/** * Provides the functionality to toggle sections with additional informations. * * The `.presentationUiTogglesection()` provides the functionality to toggle areas with additional informations. * * ### Examples * Explanation for example, * * JavaScript: * * * <div class="ep-js" data-js=".presentationUiTogglesection({ * selector: $(elem).closest('.row').find('.ep-toggle-section-area'), * duration: 800, * iconElement: $(elem).find('.iconElement'), * iconClass: {open: 'icon-plus', close: 'icon-minus'} * })"> * * * @class jQuery.ui.presentationUiDnduploader * @extends jQuery.widget * * @uses jquery * @uses jquery.ui.widget * @uses ep * @uses de_epages * @since 6.17.38 */ /** * @cfg {Object} [options] A map of additional options pass to the method. */ /** * @cfg {String} [selector] A valid css selector, a DOM node or a jQuery element representing the toggle area. */ /** * @cfg {Integer} [duration] A number containing the duration of the animation. */ /** * @cfg {String} [iconElement] A valid css selector, a DOM node or a jQuery element representing the element which contains the state icon. */ /** * @cfg {Object} [iconClass] A object containing the icon classes for the icon states. */ /** * @cfg {Boolean} [storeState] A boolean to set if toggle states should be saved in local storage. */ /** * See `jQuery.ui.presentationUiTogglesection` for details. * * @param {Object} [options] A map of additional options pass to the method. * @param {String} [selector] A valid css selector, a DOM node or a jQuery element representing the toggle area. * @param {Integer} [duration] A number containing the duration of the animation. * @param {String} [iconElement] A valid css selector, a DOM node or a jQuery element representing the element which contains the state icon. * @param {Object} [iconClass] A object containing the icon classes for the icon states. * @param {Boolean} [storeState] A boolean to set if toggle states should be saved in local storage. * * @method presentationUiTogglesection * @member jQuery * * @since 6.17.38 */ /* * @copyright © Copyright 2006-2010, epages GmbH, All Rights Reserved. * * @module de_epages.presentation.ui.togglesection * * @revision $Revision$ */ define( "de_epages/presentation/ui/togglesection", [ "jquery", "ep", "de_epages", "util/storage", "jquery/ui/widget" ], function ($, ep, de_epages, storage) { $.widget('ui.presentationUiTogglesection', { options: { selector: '.ep-toggle-section-area', duration: 600, iconElement: undefined, iconClass: { open: 'fa-minus', close: 'fa-plus' }, storeState: true }, _create: function () { var self = this, elem = self.element, o = self.options, localStorage; // toggle area self.toggleArea = $(o.selector); // if toggle state should be saved in local storage if (o.storeState) { // get local storage object for toggle states self.storageKey = elem.data('storageKey'); // if local storage object doesn't exist if (!storage.localStorage('toggleareas')) { storage.localStorage('toggleareas', {}); } // get and set local storage variable localStorage = storage.localStorage('toggleareas'); // if already an entry for this element exists => set data attribute depending on the storage value if (self.storageKey && localStorage[self.storageKey] !== undefined) { elem.data('open', !localStorage[self.storageKey].open); } else { elem.data('open', true); } } else { elem.data('open', true); } // default icon element self.iconElement = o.iconElement===undefined ? elem.find('.fa') : $(o.iconElement); // save state (open/close) of toggle area // elem.data('open', self.toggleArea.is(':visible')); // register handling for toggle button elem.on('click', $.proxy(function (e) { self._toggleArea(e); }, self)); // initial call to set toggle areas self._toggleArea(); }, _toggleArea: function (e) { var self = this, elem = self.element, o = self.options, open = elem.data('open'), localStorage; // stop already running animations and set state to the end self.toggleArea.stop(false, true); // toggle area self.toggleArea[open ? 'slideUp' : 'slideDown']({ duration: o.duration, complete: function () { self.iconElement.addClass(open ? o.iconClass.close : o.iconClass.open); self.iconElement.removeClass(open ? o.iconClass.open : o.iconClass.close); // set new state for area elem.data('open', !open); // if toggle states should be saved and a corresponding key exists if (o.storeState && self.storageKey) { // get and set local storage object localStorage = storage.localStorage('toggleareas'); if (!localStorage[self.storageKey]) { localStorage[self.storageKey] = {}; } localStorage[self.storageKey].open = !open; storage.localStorage('toggleareas', localStorage); } } }); }, /** * This method removes the container on which the selection toggler has been appended to. * * @method destroy * @member jQuery.ui.presentationUiTogglesection * * @since 6.17.37 */ destroy: function () { var self = this; //self.elem.off('.presentationUiTogglesection'); self._superApply(arguments); } }); return de_epages; });