From: Alexander Ebert Date: Tue, 12 May 2015 13:25:11 +0000 (+0200) Subject: Overhauled WCF.Style.Chooser X-Git-Tag: 3.0.0_Beta_1~2403 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=38fc3e399a9a5ed944dee6f711649f0022d1e42f;p=GitHub%2FWoltLab%2FWCF.git Overhauled WCF.Style.Chooser --- diff --git a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl index a519805d99..e81deb7864 100644 --- a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl +++ b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl @@ -142,7 +142,9 @@ $.holdReady(true); require(['WoltLab/WCF/BootstrapFrontend'], function(BootstrapFrontend) { - BootstrapFrontend.setup(); + BootstrapFrontend.setup({ + styleChanger: {if $__wcf->getStyleHandler()->countStyles() > 1}true{else}false{/if} + }); }); @@ -181,7 +183,7 @@ //getStyleHandler()->countStyles() > 1}new WCF.Style.Chooser();{/if} + WCF.System.PageNavigation.init('.pageNavigation'); WCF.Date.Picker.init(); new WCF.User.ProfilePreview(); diff --git a/com.woltlab.wcf/templates/styleChooser.tpl b/com.woltlab.wcf/templates/styleChooser.tpl index aa6a71c088..a3c4bb96f5 100644 --- a/com.woltlab.wcf/templates/styleChooser.tpl +++ b/com.woltlab.wcf/templates/styleChooser.tpl @@ -1,19 +1,17 @@ -
-
    - {foreach from=$styleList item=style} -
  1. -
    - - - -
    -
    -

    {$style->styleName}{if $style->styleID == $__wcf->getStyleHandler()->getStyle()->styleID} {/if}

    -
    - {if $style->styleDescription}{lang}{@$style->styleDescription}{/lang}{/if} +
      + {foreach from=$styleList item=style} +
    1. +
      + + + +
      +
      +

      {$style->styleName}{if $style->styleID == $__wcf->getStyleHandler()->getStyle()->styleID} {/if}

      + {if $style->styleDescription}{lang}{@$style->styleDescription}{/lang}{/if}
      -
      2. - {/foreach} -
    -
    \ No newline at end of file +
    +
    2. + {/foreach} +
\ No newline at end of file diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js index e2b3a767da..ec7153c002 100755 --- a/wcfsetup/install/files/js/WCF.js +++ b/wcfsetup/install/files/js/WCF.js @@ -9574,99 +9574,6 @@ WCF.Language.Chooser = Class.extend({ */ 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() { - $('
  • ' + WCF.Language.get('wcf.style.changeStyle') + '
    • ').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 = $('
    ').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. * diff --git a/wcfsetup/install/files/js/WoltLab/WCF/BootstrapFrontend.js b/wcfsetup/install/files/js/WoltLab/WCF/BootstrapFrontend.js index 764a27c4b3..024ea6dd74 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/BootstrapFrontend.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/BootstrapFrontend.js @@ -6,7 +6,7 @@ * @license GNU Lesser General Public License * @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"; /** @@ -16,12 +16,19 @@ define(['WoltLab/WCF/Bootstrap', 'WoltLab/WCF/Controller/Sitemap'], function(Boo BootstrapFrontend.prototype = { /** * Bootstraps general modules and frontend exclusive ones. + * + * @param {object} 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 +}); diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Controller/Style/Changer.js b/wcfsetup/install/files/js/WoltLab/WCF/Controller/Style/Changer.js new file mode 100644 index 0000000000..000b59d620 --- /dev/null +++ b/wcfsetup/install/files/js/WoltLab/WCF/Controller/Style/Changer.js @@ -0,0 +1,95 @@ +/** + * Dialog based style changer. + * + * @author Alexander Ebert + * @copyright 2001-2015 WoltLab GmbH + * @license GNU Lesser General Public License + * @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(); +}); diff --git a/wcfsetup/install/files/js/WoltLab/WCF/UI/TabMenu.js b/wcfsetup/install/files/js/WoltLab/WCF/UI/TabMenu.js index f2e005f063..057b2cc915 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/UI/TabMenu.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/UI/TabMenu.js @@ -22,7 +22,6 @@ define(['Dictionary', 'DOM/Util', './TabMenu/Simple'], function(Dictionary, DOMU setup: function() { this._init(); - // TODO: use WCF.DOMNodeInsertedHandler WCF.DOMNodeInsertedHandler.addCallback('WoltLab/WCF/UI/TabMenu', this._init.bind(this)); },