$.holdReady(true);
require(['WoltLab/WCF/BootstrapFrontend'], function(BootstrapFrontend) {
- BootstrapFrontend.setup();
+ BootstrapFrontend.setup({
+ styleChanger: {if $__wcf->getStyleHandler()->countStyles() > 1}true{else}false{/if}
+ });
});
</script>
//<![CDATA[
$(function() {
new WCF.Effect.SmoothScroll();
- {if $__wcf->getStyleHandler()->countStyles() > 1}new WCF.Style.Chooser();{/if}
+
WCF.System.PageNavigation.init('.pageNavigation');
WCF.Date.Picker.init();
new WCF.User.ProfilePreview();
-<div class="container">
- <ol class="containerList styleList{if $styleList|count > 4} doubleColumned{/if}">
- {foreach from=$styleList item=style}
- <li data-style-id="{@$style->styleID}">
- <div class="box64">
- <span class="framed">
- <img src="{@$style->getPreviewImage()}" alt="" />
- </span>
- <div class="details">
- <div class="containerHeadline">
- <h3>{$style->styleName}{if $style->styleID == $__wcf->getStyleHandler()->getStyle()->styleID} <span class="icon icon16 icon-ok-sign" title="{lang}wcf.style.currentStyle{/lang}"></span>{/if}</h3>
- </div>
- {if $style->styleDescription}<small>{lang}{@$style->styleDescription}{/lang}</small>{/if}
+<ol class="containerList styleList{if $styleList|count > 4} doubleColumned{/if}">
+ {foreach from=$styleList item=style}
+ <li data-style-id="{@$style->styleID}">
+ <div class="box64">
+ <span class="framed">
+ <img src="{@$style->getPreviewImage()}" alt="" />
+ </span>
+ <div class="details">
+ <div class="containerHeadline">
+ <h3>{$style->styleName}{if $style->styleID == $__wcf->getStyleHandler()->getStyle()->styleID} <span class="icon icon16 icon-ok-sign" title="{lang}wcf.style.currentStyle{/lang}"></span>{/if}</h3>
</div>
+ {if $style->styleDescription}<small>{lang}{@$style->styleDescription}{/lang}</small>{/if}
</div>
- </li>
- {/foreach}
- </ol>
-</div>
\ No newline at end of file
+ </div>
+ </li>
+ {/foreach}
+</ol>
\ No newline at end of file
*/
WCF.Style = { };
-/**
- * Provides a visual style chooser.
- */
-WCF.Style.Chooser = Class.extend({
- /**
- * dialog overlay
- * @var jQuery
- */
- _dialog: null,
-
- /**
- * action proxy
- * @var WCF.Action.Proxy
- */
- _proxy: null,
-
- /**
- * Initializes the style chooser class.
- */
- init: function() {
- $('<li class="styleChooser"><a href="#">' + WCF.Language.get('wcf.style.changeStyle') + '</a></li>').appendTo($('#footerNavigation > ul.navigationItems')).click($.proxy(this._showDialog, this));
-
- this._proxy = new WCF.Action.Proxy({
- success: $.proxy(this._success, this)
- });
- },
-
- /**
- * Displays the style chooser dialog.
- *
- * @param object event
- */
- _showDialog: function(event) {
- if (event !== null) {
- event.preventDefault();
- }
-
- if (this._dialog === null) {
- this._dialog = $('<div id="styleChooser" />').hide().appendTo(document.body);
- this._loadDialog();
- }
- else {
- this._dialog.wcfDialog({
- title: WCF.Language.get('wcf.style.changeStyle')
- });
- }
- },
-
- /**
- * Loads the style chooser dialog.
- */
- _loadDialog: function() {
- this._proxy.setOption('data', {
- actionName: 'getStyleChooser',
- className: 'wcf\\data\\style\\StyleAction'
- });
- this._proxy.sendRequest();
- },
-
- /**
- * Handles successful AJAX requests.
- *
- * @param object data
- * @param string textStatus
- * @param jQuery jqXHR
- */
- _success: function(data, textStatus, jqXHR) {
- if (data.actionName === 'changeStyle') {
- window.location.reload();
- return;
- }
-
- this._dialog.html(data.returnValues.template);
- this._dialog.find('li').addClass('pointer').click($.proxy(this._click, this));
-
- this._showDialog(null);
- },
-
- /**
- * Changes user style.
- *
- * @param object event
- */
- _click: function(event) {
- this._proxy.setOption('data', {
- actionName: 'changeStyle',
- className: 'wcf\\data\\style\\StyleAction',
- objectIDs: [ $(event.currentTarget).data('styleID') ]
- });
- this._proxy.sendRequest();
- }
-});
-
/**
* Converts static user panel items into interactive dropdowns.
*
* @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
* @module WoltLab/WCF/BootstrapFrontend
*/
-define(['WoltLab/WCF/Bootstrap', 'WoltLab/WCF/Controller/Sitemap'], function(Bootstrap, ControllerSitemap) {
+define(['WoltLab/WCF/Bootstrap', 'WoltLab/WCF/Controller/Sitemap', 'WoltLab/WCF/Controller/Style/Changer'], function(Bootstrap, ControllerSitemap, ControllerStyleChanger) {
"use strict";
/**
BootstrapFrontend.prototype = {
/**
* Bootstraps general modules and frontend exclusive ones.
+ *
+ * @param {object<string, *>} options bootstrap options
*/
- setup: function() {
+ setup: function(options) {
Bootstrap.setup();
+
ControllerSitemap.setup();
+
+ if (options.styleChanger) {
+ ControllerStyleChanger.setup();
+ }
}
};
return new BootstrapFrontend();
-});
\ No newline at end of file
+});
--- /dev/null
+/**
+ * Dialog based style changer.
+ *
+ * @author Alexander Ebert
+ * @copyright 2001-2015 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module WoltLab/WCF/Controller/Style/Changer
+ */
+define(['UI/Dialog'], function(UIDialog) {
+ "use strict";
+
+ /**
+ * @constructor
+ */
+ function ControllerStyleChanger() {};
+ ControllerStyleChanger.prototype = {
+ /**
+ * Adds the style changer to the bottom navigation.
+ */
+ setup: function() {
+ var list = document.querySelector('#footerNavigation > ul.navigationItems');
+ if (list === null) {
+ return;
+ }
+
+ var listItem = document.createElement('li');
+ listItem.classList.add('styleChanger');
+ listItem.addEventListener('click', this.showDialog.bind(this));
+
+ var link = document.createElement('a');
+ link.setAttribute('href', '#');
+ link.textContent = WCF.Language.get('wcf.style.changeStyle');
+ listItem.appendChild(link);
+
+ list.appendChild(listItem);
+ },
+
+ /**
+ * Loads and displays the style change dialog.
+ *
+ * @param {object} event event object
+ */
+ showDialog: function(event) {
+ event.preventDefault();
+
+ if (UIDialog.getDialog('styleChanger') === null) {
+ new WCF.Action.Proxy({
+ autoSend: true,
+ data: {
+ actionName: 'getStyleChooser',
+ className: 'wcf\\data\\style\\StyleAction'
+ },
+ success: (function(data) {
+ var dialog = UIDialog.open('styleChanger', data.returnValues.template, {
+ disableContentPadding: true,
+ title: WCF.Language.get('wcf.style.changeStyle')
+ });
+
+ var styles = dialog.content.querySelectorAll('.styleList > li');
+ for (var i = 0, length = styles.length; i < length; i++) {
+ var style = styles[i];
+
+ style.classList.add('pointer');
+ style.addEventListener('click', this._click.bind(this));
+ }
+ }).bind(this)
+ });
+ }
+ else {
+ UIDialog.open('styleChanger');
+ }
+ },
+
+ /**
+ * Changes the style and reloads current page.
+ *
+ * @param {object} event event object
+ */
+ _click: function(event) {
+ event.preventDefault();
+
+ new WCF.Action.Proxy({
+ autoSend: true,
+ data: {
+ actionName: 'changeStyle',
+ className: 'wcf\\data\\style\\StyleAction',
+ objectIDs: [ event.currentTarget.getAttribute('data-style-id') ]
+ },
+ success: function() { window.location.reload(); }
+ });
+ }
+ };
+
+ return new ControllerStyleChanger();
+});
setup: function() {
this._init();
- // TODO: use WCF.DOMNodeInsertedHandler
WCF.DOMNodeInsertedHandler.addCallback('WoltLab/WCF/UI/TabMenu', this._init.bind(this));
},
projects / GitHub / WoltLab / WCF.git / commitdiff