DEV: Move JS/HBS into dedicated files
This introduces no functional changes, it simply copies the js and templates into their own files, and applies prettier formatting.
This commit is contained in:
David Taylor
parent
5bb68c3dcc
commit
4422ee24d3
|
|
@ -1,223 +0,0 @@
|
|||
<script type="text/discourse-plugin" version="0.8">
|
||||
const enableConnectorName = settings.plugin_outlet;
|
||||
const disableConnectorName = enableConnectorName === 'above-main-container' ? 'below-site-header' : 'above-main-container';
|
||||
|
||||
api.registerConnectorClass(disableConnectorName, 'search-banner', {
|
||||
shouldRender() { return false }
|
||||
});
|
||||
|
||||
api.registerConnectorClass(enableConnectorName, 'search-banner', {
|
||||
setupComponent(args, component) {
|
||||
var topMenuRoutes = Discourse.SiteSettings.top_menu.split('|').map(function(route) {return '/' + route});
|
||||
var homeRoute = topMenuRoutes[0];
|
||||
|
||||
api.onPageChange((url, title) => {
|
||||
var home = url === "/" || url.match(/^\/\?/) || url === homeRoute
|
||||
if(settings.show_on === "homepage") {
|
||||
var showBannerHere = home
|
||||
} else if (settings.show_on === "top_menu"){
|
||||
var showBannerHere = topMenuRoutes.indexOf(url) > -1 || home
|
||||
} else {
|
||||
var showBannerHere = url.match(/.*/) && !url.match(/search.*/) && !url.match(/admin.*/)
|
||||
}
|
||||
if (showBannerHere) {
|
||||
component.set('displaySearchBanner', true);
|
||||
$('html').addClass('display-search-banner');
|
||||
} else {
|
||||
component.set('displaySearchBanner', false);
|
||||
$('html').removeClass('display-search-banner');
|
||||
}
|
||||
|
||||
if(settings.show_for === "everyone") {
|
||||
component.set('show_for', true);
|
||||
} else if(settings.show_for === "logged_out" && !api.getCurrentUser()) {
|
||||
component.set('show_for', true);
|
||||
} else if(settings.show_for === "logged_in" && api.getCurrentUser()) {
|
||||
component.set('show_for', true);
|
||||
} else {
|
||||
component.set('show_for', false);
|
||||
$('html').removeClass('display-search-banner');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/discourse-plugin" version="0.8">
|
||||
api.registerConnectorClass('above-main-container', 'search-banner-above-main', {
|
||||
setupComponent(args, component) {
|
||||
var topMenuRoutes = Discourse.SiteSettings.top_menu.split('|').map(function(route) {return '/' + route});
|
||||
var homeRoute = topMenuRoutes[0];
|
||||
|
||||
api.onPageChange((url, title) => {
|
||||
var home = url === "/" || url.match(/^\/\?/) || url === homeRoute
|
||||
if(settings.show_on === "homepage") {
|
||||
var showBannerHere = home
|
||||
} else if (settings.show_on === "top_menu"){
|
||||
var showBannerHere = topMenuRoutes.indexOf(url) > -1 || home
|
||||
} else {
|
||||
var showBannerHere = url.match(/.*/) && !url.match(/search.*/) && !url.match(/admin.*/)
|
||||
}
|
||||
if (showBannerHere){
|
||||
component.set('displaySearchBanner', true);
|
||||
$('html').addClass('display-search-banner');
|
||||
} else {
|
||||
component.set('displaySearchBanner', false);
|
||||
$('html').removeClass('display-search-banner');
|
||||
}
|
||||
|
||||
if(settings.show_for === "everyone") {
|
||||
component.set('show_for', true);
|
||||
} else if(settings.show_for === "logged_out" && !api.getCurrentUser()) {
|
||||
component.set('show_for', true);
|
||||
} else if(settings.show_for === "logged_in" && api.getCurrentUser()) {
|
||||
component.set('show_for', true);
|
||||
} else {
|
||||
component.set('show_for', false);
|
||||
$('html').removeClass('display-search-banner');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/discourse-plugin" version="0.8">
|
||||
// Simplified version of header search theme component
|
||||
const searchMenuWidget = api.container.factoryFor('widget:search-menu');
|
||||
const corePanelContents = searchMenuWidget.class.prototype['panelContents'];
|
||||
api.reopenWidget('search-menu', {
|
||||
buildKey: function(attrs) {
|
||||
let type = attrs.formFactor || 'menu'
|
||||
return `search-${type}`
|
||||
},
|
||||
defaultState: function(attrs) {
|
||||
return {
|
||||
formFactor: attrs.formFactor || 'menu',
|
||||
showHeaderResults: false
|
||||
}
|
||||
},
|
||||
html: function() {
|
||||
if (this.state.formFactor === 'widget') {
|
||||
return this.panelContents();
|
||||
} else {
|
||||
return this.attach('menu-panel', {
|
||||
maxWidth: 500,
|
||||
contents: () => this.panelContents()
|
||||
});
|
||||
}
|
||||
},
|
||||
clickOutside() {
|
||||
if (!this.vnode.hooks['widget-mouse-down-outside']) {
|
||||
return this.mouseDownOutside();
|
||||
}
|
||||
},
|
||||
mouseDownOutside() {
|
||||
const formFactor = this.state.formFactor;
|
||||
if (formFactor === 'menu') {
|
||||
return this.sendWidgetAction('toggleSearchMenu');
|
||||
} else {
|
||||
this.state.showHeaderResults = false;
|
||||
this.scheduleRerender();
|
||||
}
|
||||
},
|
||||
click: function() {
|
||||
const formFactor = this.state.formFactor;
|
||||
if (formFactor === 'widget') {
|
||||
this.showResults();
|
||||
}
|
||||
},
|
||||
showResults: function() {
|
||||
this.state.showHeaderResults = true;
|
||||
this.scheduleRerender();
|
||||
},
|
||||
linkClickedEvent: function() {
|
||||
const formFactor = this.state.formFactor;
|
||||
if (formFactor === 'widget') {
|
||||
$('#search-term').val('');
|
||||
$('.search-placeholder').css('visibility', 'visible');
|
||||
this.state.showHeaderResults = false;
|
||||
this.scheduleRerender();
|
||||
}
|
||||
},
|
||||
panelContents: function() {
|
||||
const formFactor = this.state.formFactor;
|
||||
let showHeaderResults = this.state.showHeaderResults == null || this.state.showHeaderResults === true;
|
||||
let contents = [];
|
||||
|
||||
if (formFactor === 'widget') {
|
||||
contents.push(this.attach('button', {
|
||||
icon: 'search',
|
||||
className: 'search-icon',
|
||||
action: 'showResults'
|
||||
}));
|
||||
}
|
||||
|
||||
contents = contents.concat(...corePanelContents.call(this));
|
||||
let results = contents.find(w => w.name == 'search-menu-results');
|
||||
if (results && results.attrs.results) {
|
||||
$('.search-menu.search-header').addClass('has-results');
|
||||
} else {
|
||||
$('.search-menu.search-header').removeClass('has-results');
|
||||
}
|
||||
if (formFactor === 'menu' || showHeaderResults) {
|
||||
return contents;
|
||||
} else {
|
||||
return contents.filter((widget) => {
|
||||
return widget.name != 'search-menu-results' && widget.name != 'search-context';
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
api.createWidget("search-widget", {
|
||||
tagName: "div.search-widget",
|
||||
});
|
||||
api.decorateWidget('search-widget:after', function(helper) {
|
||||
const searchWidget = helper.widget,
|
||||
appController = helper.register.lookup('controller:application'),
|
||||
searchMenuVisible = searchWidget.state.searchVisible;
|
||||
if (!searchMenuVisible && !searchWidget.attrs.topic) {
|
||||
return helper.attach('search-menu', {
|
||||
contextEnabled: searchWidget.state.contextEnabled,
|
||||
formFactor: 'widget'
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script
|
||||
type="text/x-handlebars"
|
||||
data-template-name="/connectors/below-site-header/search-banner"
|
||||
>
|
||||
|
||||
{{#if show_for}}
|
||||
{{#if displaySearchBanner}}
|
||||
<div class="custom-search-banner" >
|
||||
<div class="wrap custom-search-banner-wrap">
|
||||
<h1>{{theme-i18n "search_banner.headline"}}</h1>
|
||||
<p>{{theme-i18n "search_banner.subhead"}}</p>
|
||||
{{mount-widget widget="search-widget"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{/if}}
|
||||
</script>
|
||||
|
||||
<script
|
||||
type="text/x-handlebars"
|
||||
data-template-name="/connectors/above-main-container/search-banner"
|
||||
>
|
||||
|
||||
{{#if show_for}}
|
||||
{{#if displaySearchBanner}}
|
||||
<div class="custom-search-banner" >
|
||||
<div class="wrap custom-search-banner-wrap">
|
||||
<h1>{{theme-i18n "search_banner.headline"}}</h1>
|
||||
<p>{{theme-i18n "search_banner.subhead"}}</p>
|
||||
{{mount-widget widget="search-widget"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{/if}}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
import { apiInitializer } from "discourse/lib/api";
|
||||
|
||||
export default apiInitializer("0.8", (api) => {
|
||||
const enableConnectorName = settings.plugin_outlet;
|
||||
const disableConnectorName =
|
||||
enableConnectorName === "above-main-container"
|
||||
? "below-site-header"
|
||||
: "above-main-container";
|
||||
|
||||
api.registerConnectorClass(disableConnectorName, "search-banner", {
|
||||
shouldRender() {
|
||||
return false;
|
||||
},
|
||||
});
|
||||
|
||||
api.registerConnectorClass(enableConnectorName, "search-banner", {
|
||||
setupComponent(args, component) {
|
||||
var topMenuRoutes = Discourse.SiteSettings.top_menu
|
||||
.split("|")
|
||||
.map(function (route) {
|
||||
return "/" + route;
|
||||
});
|
||||
var homeRoute = topMenuRoutes[0];
|
||||
|
||||
api.onPageChange((url, title) => {
|
||||
var home = url === "/" || url.match(/^\/\?/) || url === homeRoute;
|
||||
if (settings.show_on === "homepage") {
|
||||
var showBannerHere = home;
|
||||
} else if (settings.show_on === "top_menu") {
|
||||
var showBannerHere = topMenuRoutes.indexOf(url) > -1 || home;
|
||||
} else {
|
||||
var showBannerHere =
|
||||
url.match(/.*/) && !url.match(/search.*/) && !url.match(/admin.*/);
|
||||
}
|
||||
if (showBannerHere) {
|
||||
component.set("displaySearchBanner", true);
|
||||
$("html").addClass("display-search-banner");
|
||||
} else {
|
||||
component.set("displaySearchBanner", false);
|
||||
$("html").removeClass("display-search-banner");
|
||||
}
|
||||
|
||||
if (settings.show_for === "everyone") {
|
||||
component.set("show_for", true);
|
||||
} else if (
|
||||
settings.show_for === "logged_out" &&
|
||||
!api.getCurrentUser()
|
||||
) {
|
||||
component.set("show_for", true);
|
||||
} else if (settings.show_for === "logged_in" && api.getCurrentUser()) {
|
||||
component.set("show_for", true);
|
||||
} else {
|
||||
component.set("show_for", false);
|
||||
$("html").removeClass("display-search-banner");
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
api.registerConnectorClass(
|
||||
"above-main-container",
|
||||
"search-banner-above-main",
|
||||
{
|
||||
setupComponent(args, component) {
|
||||
var topMenuRoutes = Discourse.SiteSettings.top_menu
|
||||
.split("|")
|
||||
.map(function (route) {
|
||||
return "/" + route;
|
||||
});
|
||||
var homeRoute = topMenuRoutes[0];
|
||||
|
||||
api.onPageChange((url, title) => {
|
||||
var home = url === "/" || url.match(/^\/\?/) || url === homeRoute;
|
||||
if (settings.show_on === "homepage") {
|
||||
var showBannerHere = home;
|
||||
} else if (settings.show_on === "top_menu") {
|
||||
var showBannerHere = topMenuRoutes.indexOf(url) > -1 || home;
|
||||
} else {
|
||||
var showBannerHere =
|
||||
url.match(/.*/) &&
|
||||
!url.match(/search.*/) &&
|
||||
!url.match(/admin.*/);
|
||||
}
|
||||
if (showBannerHere) {
|
||||
component.set("displaySearchBanner", true);
|
||||
$("html").addClass("display-search-banner");
|
||||
} else {
|
||||
component.set("displaySearchBanner", false);
|
||||
$("html").removeClass("display-search-banner");
|
||||
}
|
||||
|
||||
if (settings.show_for === "everyone") {
|
||||
component.set("show_for", true);
|
||||
} else if (
|
||||
settings.show_for === "logged_out" &&
|
||||
!api.getCurrentUser()
|
||||
) {
|
||||
component.set("show_for", true);
|
||||
} else if (
|
||||
settings.show_for === "logged_in" &&
|
||||
api.getCurrentUser()
|
||||
) {
|
||||
component.set("show_for", true);
|
||||
} else {
|
||||
component.set("show_for", false);
|
||||
$("html").removeClass("display-search-banner");
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
// Simplified version of header search theme component
|
||||
const searchMenuWidget = api.container.factoryFor("widget:search-menu");
|
||||
const corePanelContents = searchMenuWidget.class.prototype["panelContents"];
|
||||
api.reopenWidget("search-menu", {
|
||||
buildKey: function (attrs) {
|
||||
let type = attrs.formFactor || "menu";
|
||||
return `search-${type}`;
|
||||
},
|
||||
defaultState: function (attrs) {
|
||||
return {
|
||||
formFactor: attrs.formFactor || "menu",
|
||||
showHeaderResults: false,
|
||||
};
|
||||
},
|
||||
html: function () {
|
||||
if (this.state.formFactor === "widget") {
|
||||
return this.panelContents();
|
||||
} else {
|
||||
return this.attach("menu-panel", {
|
||||
maxWidth: 500,
|
||||
contents: () => this.panelContents(),
|
||||
});
|
||||
}
|
||||
},
|
||||
clickOutside() {
|
||||
if (!this.vnode.hooks["widget-mouse-down-outside"]) {
|
||||
return this.mouseDownOutside();
|
||||
}
|
||||
},
|
||||
mouseDownOutside() {
|
||||
const formFactor = this.state.formFactor;
|
||||
if (formFactor === "menu") {
|
||||
return this.sendWidgetAction("toggleSearchMenu");
|
||||
} else {
|
||||
this.state.showHeaderResults = false;
|
||||
this.scheduleRerender();
|
||||
}
|
||||
},
|
||||
click: function () {
|
||||
const formFactor = this.state.formFactor;
|
||||
if (formFactor === "widget") {
|
||||
this.showResults();
|
||||
}
|
||||
},
|
||||
showResults: function () {
|
||||
this.state.showHeaderResults = true;
|
||||
this.scheduleRerender();
|
||||
},
|
||||
linkClickedEvent: function () {
|
||||
const formFactor = this.state.formFactor;
|
||||
if (formFactor === "widget") {
|
||||
$("#search-term").val("");
|
||||
$(".search-placeholder").css("visibility", "visible");
|
||||
this.state.showHeaderResults = false;
|
||||
this.scheduleRerender();
|
||||
}
|
||||
},
|
||||
panelContents: function () {
|
||||
const formFactor = this.state.formFactor;
|
||||
let showHeaderResults =
|
||||
this.state.showHeaderResults == null ||
|
||||
this.state.showHeaderResults === true;
|
||||
let contents = [];
|
||||
|
||||
if (formFactor === "widget") {
|
||||
contents.push(
|
||||
this.attach("button", {
|
||||
icon: "search",
|
||||
className: "search-icon",
|
||||
action: "showResults",
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
contents = contents.concat(...corePanelContents.call(this));
|
||||
let results = contents.find((w) => w.name == "search-menu-results");
|
||||
if (results && results.attrs.results) {
|
||||
$(".search-menu.search-header").addClass("has-results");
|
||||
} else {
|
||||
$(".search-menu.search-header").removeClass("has-results");
|
||||
}
|
||||
if (formFactor === "menu" || showHeaderResults) {
|
||||
return contents;
|
||||
} else {
|
||||
return contents.filter((widget) => {
|
||||
return (
|
||||
widget.name != "search-menu-results" &&
|
||||
widget.name != "search-context"
|
||||
);
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
api.createWidget("search-widget", {
|
||||
tagName: "div.search-widget",
|
||||
});
|
||||
api.decorateWidget("search-widget:after", function (helper) {
|
||||
const searchWidget = helper.widget,
|
||||
appController = helper.register.lookup("controller:application"),
|
||||
searchMenuVisible = searchWidget.state.searchVisible;
|
||||
if (!searchMenuVisible && !searchWidget.attrs.topic) {
|
||||
return helper.attach("search-menu", {
|
||||
contextEnabled: searchWidget.state.contextEnabled,
|
||||
formFactor: "widget",
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{{#if show_for}}
|
||||
{{#if displaySearchBanner}}
|
||||
<div class="custom-search-banner" >
|
||||
<div class="wrap custom-search-banner-wrap">
|
||||
<h1>{{theme-i18n "search_banner.headline"}}</h1>
|
||||
<p>{{theme-i18n "search_banner.subhead"}}</p>
|
||||
{{mount-widget widget="search-widget"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{{#if show_for}}
|
||||
{{#if displaySearchBanner}}
|
||||
<div class="custom-search-banner" >
|
||||
<div class="wrap custom-search-banner-wrap">
|
||||
<h1>{{theme-i18n "search_banner.headline"}}</h1>
|
||||
<p>{{theme-i18n "search_banner.subhead"}}</p>
|
||||
{{mount-widget widget="search-widget"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
Loading…
Reference in New Issue