/** * Create a slider with label (value and unit) and (optional) info bubble * * The `ep.uiSlider()` creates a slider with a label (value and (optional) unit) and an (optional) info bubble. * * ### Examples * Create a simple slider with unit pixel and info bubble. Options are passed in data attribute. (Could just as well be passed via options map.) * * JavaScript: * * ep('#uiSlider').uiSlider(); * * HTML: * * <div id="uiSlider" data-ep-ui-slider='{"value" : 5, "unit" : "pixel", "max" : 10, "min" : 0, "label" : "Height", "info" : {"src" : "./../BO/icons/ico_s_bubblehelp.png", "alt" : "Info text about height settings"}}'></div> * * * @class jQuery.ui.uiSlider * @extends jQuery.slider * * @uses ep.ui.core * @uses ep.ui.tooltip * @uses jQuery.ui.slider * @since 6.15.0 */ /** * @cfg {String} label The label (text). */ /** * @cfg {Object} info A map with keys "src" and "alt" specifying the info bubble to appear next to the label. */ /** * @cfg {String} unit The unit (text). */ /** * See `jQuery.ui.uiSlider` for details. * * @param {Object} options A map of additional options pass to the method. * @param {String} label The label (text). * @param {Object} info A map with keys "src" and "alt" specifying the info bubble to appear next to the label. * @param {String} unit The unit (text). * * @method uiSlider * @member jQuery * * @since 6.15.0 */ /* * @copyright © Copyright 2006-2012, epages GmbH, All Rights Reserved. * * @module ep.ui.slider * * @revision $Revision: 1.11 $ */ /*jslint nomen: true*/ /*global define*/ define("ep/ui/slider", [ "jquery", "ep", "jquery/ui/widget", "jquery/ui/slider", "ep/ui/tooltip" ], function ($, ep) { 'use strict'; $.widget('ui.uiSlider', $.ui.slider, { options: { label: '', unit: '', info: null }, widgetEventPrefix: 'slide', _create: function () { var self = this, o = $.extend(self.options, $.parseJSON(self.element.attr('data-ep-ui-slider'))); // Create UI elements, add CSS classes and set initial texts. self.labelNode = $('<div>').text(o.label).addClass('ep-uiSlider-label'); if (o.info) { self.infoNode = $('<span>').text(o.info.alt); self.bubbleHelp = $('<img/>').addClass('BubbleHelp').attr({ 'src': o.info.src, 'alt': o.info.alt }).appendTo(self.labelNode); } self.valueNode = $('<div>').addClass('ep-uiSlider-value'); self.sliderNode = $('<div>').addClass('ep-uiSlider-slider'); self.element.addClass('ep-uiSlider-wrap').append(self.labelNode, self.valueNode, self.sliderNode); // Create (ep.ui) *tooltip*. if (o.info) { self.infoNode.uiTooltip({ context: self.bubbleHelp }); } // Create (jQuery) *slider*. self.element = self.sliderNode; self._superApply(arguments); self.element = self.element.parent(); // Add event handling. self.element.on('slide', function (event, ui) { self.valueNode.text(ui.value + (o.unit ? (' ' + o.unit) : '')); }); // Render *valueNode*. self.element.trigger('slide', { value: o.value }); }, destroy: function () { var self = this; if (self.infoNode) { self.infoNode.remove(); } self.labelNode.remove(); self.valueNode.remove(); self.element.removeClass('ep-uiSlider-wrap'); self._superApply(arguments); self.sliderNode.remove(); } }); return ep; });