[!!!][TASK] Rewrite ValueSlider to AMD module 16/38516/16
authorWouter Wolters <typo3@wouterwolters.nl>
Tue, 7 Apr 2015 16:27:01 +0000 (18:27 +0200)
committerFrank Nägler <typo3@naegler.net>
Sat, 16 May 2015 19:28:03 +0000 (21:28 +0200)
Resolves: #66991
Releases: master
Change-Id: Ib78eab523fb6ecdba415bf4b07e15690794c2da1
Reviewed-on: http://review.typo3.org/38516
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>
Reviewed-by: Frank Nägler <typo3@naegler.net>
Tested-by: Frank Nägler <typo3@naegler.net>
Build/Gruntfile.js
Build/bower.json
typo3/sysext/backend/Classes/Form/FormEngine.php
typo3/sysext/backend/Classes/Form/Wizard/ValueSliderWizard.php
typo3/sysext/backend/Resources/Public/JavaScript/ValueSlider.js
typo3/sysext/core/Classes/Page/PageRenderer.php
typo3/sysext/core/Documentation/Changelog/master/Breaking-66991-TCAValueSliderBasedOnJQuery.rst [new file with mode: 0644]
typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap-slider.min.js [new file with mode: 0644]
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_slider.less [new file with mode: 0644]
typo3/sysext/t3skin/Resources/Private/Styles/t3skin.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index 6a2b74a..23275dd 100644 (file)
@@ -55,6 +55,7 @@ module.exports = function(grunt) {
                                        '<%= paths.core %>Public/JavaScript/Contrib/autosize.js': '/autosize/dest/autosize.min.js',
                                        '<%= paths.core %>Public/JavaScript/Contrib/placeholders.jquery.min.js': '/Placeholders.js/dist/placeholders.jquery.min.js',
                                        '<%= paths.core %>Public/JavaScript/Contrib/taboverride.min.js': '/taboverride/build/output/taboverride.min.js',
+                                       '<%= paths.core %>Public/JavaScript/Contrib/bootstrap-slider.min.js': '/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js',
 
                                        /**
                                         * copy needed files of scriptaculous
index d440447..c0e90a8 100644 (file)
@@ -38,6 +38,7 @@
     "cropper": "0.9.3",
     "imagesloaded": "3.1.8",
     "Placeholders.js": "4.0.1",
-    "taboverride": "4.0.2"
+    "taboverride": "4.0.2",
+    "seiyria-bootstrap-slider": "4.8.1"
   }
 }
index 7967553..072b222 100644 (file)
@@ -1305,7 +1305,7 @@ class FormEngine {
 
                        $this->loadJavascriptLib('sysext/backend/Resources/Public/JavaScript/jsfunc.evalfield.js');
                        $this->loadJavascriptLib('sysext/backend/Resources/Public/JavaScript/jsfunc.tbe_editor.js');
-                       $this->loadJavascriptLib('sysext/backend/Resources/Public/JavaScript/ValueSlider.js');
+                       $pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/ValueSlider');
                        // Needed for FormEngine manipulation (date picker)
                        $dateFormat = ($GLOBALS['TYPO3_CONF_VARS']['SYS']['USdateFormat'] ? array('MM-DD-YYYY', 'HH:mm MM-DD-YYYY') : array('DD-MM-YYYY', 'HH:mm DD-MM-YYYY'));
                        $pageRenderer->addInlineSetting('DateTimePicker', 'DateFormat', $dateFormat);
@@ -1321,7 +1321,6 @@ class FormEngine {
                        $this->loadJavascriptLib('sysext/backend/Resources/Public/JavaScript/tceforms.js');
                        $this->loadJavascriptLib('sysext/backend/Resources/Public/JavaScript/jsfunc.tceforms_suggest.js');
 
-                       $pageRenderer->loadRequireJs();
                        $pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/FormEngineFlexForm');
                        $pageRenderer->loadRequireJsModule('TYPO3/CMS/Filelist/FileListLocalisation');
                        $pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/DragUploader');
index 8e9b71b..17a3772 100644 (file)
@@ -55,44 +55,49 @@ class ValueSliderWizard {
                $type = 'null';
                if (isset($params['fieldConfig']['eval'])) {
                        $eval = GeneralUtility::trimExplode(',', $params['fieldConfig']['eval'], TRUE);
-                       if (in_array('time', $eval)) {
-                               $type = 'time';
-                               $value = (int)$value;
-                       } elseif (in_array('int', $eval)) {
+                       if (in_array('int', $eval, TRUE)) {
                                $type = 'int';
                                $value = (int)$value;
-                       } elseif (in_array('double2', $eval)) {
+                       } elseif (in_array('double2', $eval, TRUE)) {
                                $type = 'double';
-                               $value = (double) $value;
+                               $value = (double)$value;
                        }
                }
                if (isset($params['fieldConfig']['items'])) {
                        $type = 'array';
-                       $value = (int)$value;
+                       $index = 0;
+                       $itemAmount = count($params['fieldConfig']['items']);
+                       for (; $index < $itemAmount; ++$index) {
+                               $item = $params['fieldConfig']['items'][$index];
+                               if ((string)$item[1] === $value) {
+                                       break;
+                               }
+                       }
+                       $min = 0;
+                       $max = $itemAmount -1;
+                       $step = 1;
+                       $value = $index;
                }
                $callback = $params['fieldChangeFunc']['TBE_EDITOR_fieldChanged'];
                $getField = $params['fieldChangeFunc']['typo3form.fieldGet'];
                $id = 'slider-' . $params['md5ID'];
-               $contents = '<div id="' . $id . '"></div>';
-               $js = '
-               new TYPO3.Components.TcaValueSlider({
-                       minValue: ' . $min . ',
-                       maxValue: ' . $max . ',
-                       value: ' . $value . ',
-                       increment: ' . $step . ',
-                       renderTo: "' . $id . '",
-                       itemName: "' . $itemName . '",
-                       changeCallback: "' . $callback . '",
-                       getField: "' . $getField . '",
-                       width: "' . $width . '",
-                       type: "' . $type . '",
-                       elementType: "' . $elementType . '"
-               });
-               ';
-               /** @var $pageRenderer \TYPO3\CMS\Core\Page\PageRenderer */
-               $pageRenderer = $GLOBALS['SOBE']->doc->getPageRenderer();
-               $pageRenderer->addExtOnReadyCode($js);
-               return $contents;
+               $content =
+                       '<div'
+                               . ' id="' . $id . '"'
+                               . ' data-slider-id="' . $id . '"'
+                               . ' data-slider-min="' . $min . '"'
+                               . ' data-slider-max="' . $max . '"'
+                               . ' data-slider-step="' . htmlspecialchars($step) . '"'
+                               . ' data-slider-value="' . htmlspecialchars($value) . '"'
+                               . ' data-slider-value-type="' . htmlspecialchars($type) . '"'
+                               . ' data-slider-item-name="' . htmlspecialchars($itemName) . '"'
+                               . ' data-slider-element-type="' . htmlspecialchars($elementType) . '"'
+                               . ' data-slider-field="' . htmlspecialchars($getField) . '"'
+                               . ' data-slider-callback="' . htmlspecialchars($callback) . '"'
+                               . ' style="width: ' . $width . 'px;"'
+                       . '></div>';
+
+               return $content;
        }
 
 }
index fe1f1ba..a7068ee 100644 (file)
  * The TYPO3 project - inspiring people to share!
  */
 
-Ext.ns('TYPO3.Components');
+/**
+ * ValueSlider
+ */
+define('TYPO3/CMS/Backend/ValueSlider', ['jquery', 'twbs/bootstrap-slider'], function($) {
+       /**
+        * ValueSlider object
+        *
+        * @type {{selector: string}}
+        */
+       var ValueSlider = {
+               selector: '[data-slider-id]'
+       };
+
+       /**
+        * initialize all slider elements
+        */
+       ValueSlider.initializeSlider = function() {
+               var $sliders = $(ValueSlider.selector);
+               if ($sliders.length > 0) {
+                       $sliders.slider({
+                               formatter: ValueSlider.renderTooltipValue
+                       });
+                       $sliders.on('slide', ValueSlider.updateValue);
+               }
+       };
 
-TYPO3.Components.TcaValueSlider = Ext.extend(Ext.slider.SingleSlider, {
-       itemName: null,
-       getField: null,
-       changeCallback: null,
-       valueItems: null,
-       itemElement: null,
-       elementType: null,
+       /**
+        * update value of slider element
+        *
+        * @param {Event} e
+        */
+       ValueSlider.updateValue = function(e) {
+               var $slider = $(e.currentTarget),
+                       $foreignField = $('[name="' + $slider.data('sliderItemName') + '"]'),
+                       elementType = $slider.data('sliderElementType'),
+                       sliderField = $slider.data('sliderField'),
+                       sliderCallback = $slider.data('sliderCallback');
 
-       initComponent: function() {
-               var items, step, n;
-               var step = this.increment || 1;
-               if (step < 1) {
-                       this.type = 'float';
-                       this.increment = 1;
-                       this.floatValue = 1 / step;
-                       this.maxValue *= this.floatValue;
+               switch (elementType) {
+                       case 'input':
+                               $foreignField.val(e.value);
+                               break;
+                       case 'select':
+                               $foreignField.find('option').eq(e.value).prop('selected', true);
+                               break;
                }
 
-               Ext.apply(this, {
-                       minValue: this.minValue || 0,
-                       maxValue: this.maxValue || 10000,
-                       keyIncrement: step,
-                       increment: step,
-                       type: this.type,
-                       plugins: new Ext.slider.Tip({
-                               getText: function(thumb) {
-                                       return thumb.slider.renderValue(thumb.value);
-                               }
-                       }),
-                       listeners: {
-                               beforerender: function(slider) {
-                                       var items = Ext.query(this.elementType);
-                                       items.each(function(item) {
-                                               var n = item.getAttribute('name');
-                                               if (n == this.itemName) {
-                                                       this.itemElement = item;
-                                               }
-                                       }, this);
+               if (sliderField) {
+                       eval(sliderField);
+               }
 
-                                       if (this.elementType == 'select') {
-                                               this.minValue = 0;
-                                               this.maxValue = this.itemElement.options.length - 1;
-                                               step = 1;
-                                       }
-                               },
-                               changecomplete: function(slider, newValue, thumb) {
-                                       if (slider.itemName) {
-                                               if (slider.elementType == 'input') {
-                                                       slider.itemElement.value = slider.renderValue(thumb.value);
-                                               }
-                                               if (slider.elementType == 'select') {
-                                                       slider.itemElement.options[thumb.value].selected = '1';
-                                               }
-                                       }
-                                       if (slider.getField) {
-                                               eval(slider.getField);
-                                       }
-                                       if (slider.changeCallback) {
-                                               eval(slider.changeCallback);
-                                       }
-                               },
-                               scope: this
-                       }
-               });
-               TYPO3.Components.TcaValueSlider.superclass.initComponent.call(this);
-       },
+               if (sliderCallback) {
+                       eval(sliderCallback);
+               }
+       };
 
        /**
-       * Render value for tooltip
-       *
-       * @param {string} value
-       * @return string
-       */
-       renderValue: function(value) {
-               switch (this.type) {
+        *
+        * @param {Number} value
+        * @returns {*}
+        */
+       ValueSlider.renderTooltipValue = function(value) {
+               var renderedValue,
+                       data = $(this).data();
+
+               switch (data.sliderValueType) {
                        case 'array':
-                               return this.itemElement.options[value].text;
-                       break;
-                       case 'time':
-                               return this.renderValueFromTime(value);
-                       break;
-                       case 'float':
-                               return this.renderValueFromFloat(value);
-                       break;
+                               var $foreignField = $('[name="' + data.sliderItemName + '"]');
+                               renderedValue = $foreignField.find('option').eq(value).text();
+                               break;
+                       case 'double':
+                               renderedValue = parseFloat(value).toFixed(2);
+                               break;
                        case 'int':
                        default:
-                               return value;
+                               renderedValue = parseInt(value);
                }
-       },
 
-       /**
-       * Render value for tooltip as float
-       *
-       * @param {string} value
-       * @return string
-       */
-       renderValueFromFloat: function(value) {
-               var v = value / this.floatValue;
-               return v;
-       },
+               return renderedValue;
+       };
 
-       /**
-       * Render value for tooltip as time
-       *
-       * @param {string} value
-       * @return string
-       */
-       renderValueFromTime: function(value) {
-               var hours = Math.floor(value / 3600);
-               var rest = value - (hours * 3600);
-               var minutes = Math.round(rest / 60);
-               minutes = minutes < 10 ? '0' + minutes : minutes;
-               return hours + ':' + minutes;
-       }
+       // init if document is ready
+       $(function() {
+               ValueSlider.initializeSlider();
+       });
 
+       return ValueSlider;
 });
-
-Ext.reg('TYPO3.Components.TcaValueSlider', TYPO3.Components.TcaValueSlider);
\ No newline at end of file
index 1194462..9c7b7a2 100644 (file)
@@ -1608,6 +1608,7 @@ class PageRenderer implements \TYPO3\CMS\Core\SingletonInterface {
                                'twbs/bootstrap-datetimepicker' => $this->backPath . 'sysext/core/Resources/Public/JavaScript/Contrib/bootstrap-datetimepicker',
                                'autosize' => $this->backPath . 'sysext/core/Resources/Public/JavaScript/Contrib/autosize',
                                'taboverride' => $this->backPath . 'sysext/core/Resources/Public/JavaScript/Contrib/taboverride.min',
+                               'twbs/bootstrap-slider' => $this->backPath . 'sysext/core/Resources/Public/JavaScript/Contrib/bootstrap-slider.min',
                        );
                        // get all extensions that are loaded
                        $loadedExtensions = \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getLoadedExtensionListArray();
diff --git a/typo3/sysext/core/Documentation/Changelog/master/Breaking-66991-TCAValueSliderBasedOnJQuery.rst b/typo3/sysext/core/Documentation/Changelog/master/Breaking-66991-TCAValueSliderBasedOnJQuery.rst
new file mode 100644 (file)
index 0000000..7c9e30b
--- /dev/null
@@ -0,0 +1,27 @@
+===================================================
+Breaking: #66991 - TCA value slider based on jQuery
+===================================================
+
+Description
+===========
+
+The TCA value slider has been ported from ExtJS to jQuery and Bootstrap.
+
+
+Impact
+======
+
+Since TYPO3 CMS 7 uses a DateTimePicker, the time selection conflicts with the value slider and therefore
+time-sliding has been dropped.
+
+
+Affected Installations
+======================
+
+All installations are affected whose TCA uses the value slider wizard in combination with `time` evaluation.
+
+
+Migration
+=========
+
+Remove the slider wizard from affected TCA.
\ No newline at end of file
diff --git a/typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap-slider.min.js b/typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap-slider.min.js
new file mode 100644 (file)
index 0000000..ecc0062
--- /dev/null
@@ -0,0 +1,29 @@
+/*! =======================================================
+                      VERSION  4.8.1              
+========================================================= */
+/*! =========================================================
+ * bootstrap-slider.js
+ *
+ * Maintainers:
+ *             Kyle Kemp
+ *                     - Twitter: @seiyria
+ *                     - Github:  seiyria
+ *             Rohit Kalkur
+ *                     - Twitter: @Rovolutionary
+ *                     - Github:  rovolution
+ *
+ * =========================================================
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================= */
+!function(a,b){if("function"==typeof define&&define.amd)define(["jquery"],b);else if("object"==typeof module&&module.exports){var c;try{c=require("jquery")}catch(d){c=null}module.exports=b(c)}else a.Slider=b(a.jQuery)}(this,function(a){var b;return function(a){"use strict";function b(){}function c(a){function c(b){b.prototype.option||(b.prototype.option=function(b){a.isPlainObject(b)&&(this.options=a.extend(!0,this.options,b))})}function e(b,c){a.fn[b]=function(e){if("string"==typeof e){for(var g=d.call(arguments,1),h=0,i=this.length;i>h;h++){var j=this[h],k=a.data(j,b);if(k)if(a.isFunction(k[e])&&"_"!==e.charAt(0)){var l=k[e].apply(k,g);if(void 0!==l&&l!==k)return l}else f("no such method '"+e+"' for "+b+" instance");else f("cannot call methods on "+b+" prior to initialization; attempted to call '"+e+"'")}return this}var m=this.map(function(){var d=a.data(this,b);return d?(d.option(e),d._init()):(d=new c(this,e),a.data(this,b,d)),a(this)});return!m||m.length>1?m:m[0]}}if(a){var f="undefined"==typeof console?b:function(a){console.error(a)};return a.bridget=function(a,b){c(b),e(a,b)},a.bridget}}var d=Array.prototype.slice;c(a)}(a),function(a){function c(b,c){function d(a,b){var c="data-slider-"+b.replace(/_/g,"-"),d=a.getAttribute(c);try{return JSON.parse(d)}catch(e){return d}}"string"==typeof b?this.element=document.querySelector(b):b instanceof HTMLElement&&(this.element=b),c=c?c:{};for(var f=Object.keys(this.defaultOptions),g=0;g<f.length;g++){var h=f[g],i=c[h];i="undefined"!=typeof i?i:d(this.element,h),i=null!==i?i:this.defaultOptions[h],this.options||(this.options={}),this.options[h]=i}var j,k,l,m,n,o=this.element.style.width,p=!1,q=this.element.parentNode;if(this.sliderElem)p=!0;else{this.sliderElem=document.createElement("div"),this.sliderElem.className="slider";var r=document.createElement("div");if(r.className="slider-track",k=document.createElement("div"),k.className="slider-track-low",j=document.createElement("div"),j.className="slider-selection",l=document.createElement("div"),l.className="slider-track-high",m=document.createElement("div"),m.className="slider-handle min-slider-handle",n=document.createElement("div"),n.className="slider-handle max-slider-handle",r.appendChild(k),r.appendChild(j),r.appendChild(l),this.ticks=[],Array.isArray(this.options.ticks)&&this.options.ticks.length>0){for(g=0;g<this.options.ticks.length;g++){var s=document.createElement("div");s.className="slider-tick",this.ticks.push(s),r.appendChild(s)}j.className+=" tick-slider-selection"}if(r.appendChild(m),r.appendChild(n),this.tickLabels=[],Array.isArray(this.options.ticks_labels)&&this.options.ticks_labels.length>0)for(this.tickLabelContainer=document.createElement("div"),this.tickLabelContainer.className="slider-tick-label-container",g=0;g<this.options.ticks_labels.length;g++){var t=document.createElement("div");t.className="slider-tick-label",t.innerHTML=this.options.ticks_labels[g],this.tickLabels.push(t),this.tickLabelContainer.appendChild(t)}var u=function(a){var b=document.createElement("div");b.className="tooltip-arrow";var c=document.createElement("div");c.className="tooltip-inner",a.appendChild(b),a.appendChild(c)},v=document.createElement("div");v.className="tooltip tooltip-main",u(v);var w=document.createElement("div");w.className="tooltip tooltip-min",u(w);var x=document.createElement("div");x.className="tooltip tooltip-max",u(x),this.sliderElem.appendChild(r),this.sliderElem.appendChild(v),this.sliderElem.appendChild(w),this.sliderElem.appendChild(x),this.tickLabelContainer&&this.sliderElem.appendChild(this.tickLabelContainer),q.insertBefore(this.sliderElem,this.element),this.element.style.display="none"}if(a&&(this.$element=a(this.element),this.$sliderElem=a(this.sliderElem)),this.eventToCallbackMap={},this.sliderElem.id=this.options.id,this.touchCapable="ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch,this.tooltip=this.sliderElem.querySelector(".tooltip-main"),this.tooltipInner=this.tooltip.querySelector(".tooltip-inner"),this.tooltip_min=this.sliderElem.querySelector(".tooltip-min"),this.tooltipInner_min=this.tooltip_min.querySelector(".tooltip-inner"),this.tooltip_max=this.sliderElem.querySelector(".tooltip-max"),this.tooltipInner_max=this.tooltip_max.querySelector(".tooltip-inner"),e[this.options.scale]&&(this.options.scale=e[this.options.scale]),p===!0&&(this._removeClass(this.sliderElem,"slider-horizontal"),this._removeClass(this.sliderElem,"slider-vertical"),this._removeClass(this.tooltip,"hide"),this._removeClass(this.tooltip_min,"hide"),this._removeClass(this.tooltip_max,"hide"),["left","top","width","height"].forEach(function(a){this._removeProperty(this.trackLow,a),this._removeProperty(this.trackSelection,a),this._removeProperty(this.trackHigh,a)},this),[this.handle1,this.handle2].forEach(function(a){this._removeProperty(a,"left"),this._removeProperty(a,"top")},this),[this.tooltip,this.tooltip_min,this.tooltip_max].forEach(function(a){this._removeProperty(a,"left"),this._removeProperty(a,"top"),this._removeProperty(a,"margin-left"),this._removeProperty(a,"margin-top"),this._removeClass(a,"right"),this._removeClass(a,"top")},this)),"vertical"===this.options.orientation?(this._addClass(this.sliderElem,"slider-vertical"),this.stylePos="top",this.mousePos="pageY",this.sizePos="offsetHeight",this._addClass(this.tooltip,"right"),this.tooltip.style.left="100%",this._addClass(this.tooltip_min,"right"),this.tooltip_min.style.left="100%",this._addClass(this.tooltip_max,"right"),this.tooltip_max.style.left="100%"):(this._addClass(this.sliderElem,"slider-horizontal"),this.sliderElem.style.width=o,this.options.orientation="horizontal",this.stylePos="left",this.mousePos="pageX",this.sizePos="offsetWidth",this._addClass(this.tooltip,"top"),this.tooltip.style.top=-this.tooltip.outerHeight-14+"px",this._addClass(this.tooltip_min,"top"),this.tooltip_min.style.top=-this.tooltip_min.outerHeight-14+"px",this._addClass(this.tooltip_max,"top"),this.tooltip_max.style.top=-this.tooltip_max.outerHeight-14+"px"),Array.isArray(this.options.ticks)&&this.options.ticks.length>0&&(this.options.max=Math.max.apply(Math,this.options.ticks),this.options.min=Math.min.apply(Math,this.options.ticks)),Array.isArray(this.options.value)?this.options.range=!0:this.options.range&&(this.options.value=[this.options.value,this.options.max]),this.trackLow=k||this.trackLow,this.trackSelection=j||this.trackSelection,this.trackHigh=l||this.trackHigh,"none"===this.options.selection&&(this._addClass(this.trackLow,"hide"),this._addClass(this.trackSelection,"hide"),this._addClass(this.trackHigh,"hide")),this.handle1=m||this.handle1,this.handle2=n||this.handle2,p===!0)for(this._removeClass(this.handle1,"round triangle"),this._removeClass(this.handle2,"round triangle hide"),g=0;g<this.ticks.length;g++)this._removeClass(this.ticks[g],"round triangle hide");var y=["round","triangle","custom"],z=-1!==y.indexOf(this.options.handle);if(z)for(this._addClass(this.handle1,this.options.handle),this._addClass(this.handle2,this.options.handle),g=0;g<this.ticks.length;g++)this._addClass(this.ticks[g],this.options.handle);this.offset=this._offset(this.sliderElem),this.size=this.sliderElem[this.sizePos],this.setValue(this.options.value),this.handle1Keydown=this._keydown.bind(this,0),this.handle1.addEventListener("keydown",this.handle1Keydown,!1),this.handle2Keydown=this._keydown.bind(this,1),this.handle2.addEventListener("keydown",this.handle2Keydown,!1),this.mousedown=this._mousedown.bind(this),this.touchCapable&&this.sliderElem.addEventListener("touchstart",this.mousedown,!1),this.sliderElem.addEventListener("mousedown",this.mousedown,!1),"hide"===this.options.tooltip?(this._addClass(this.tooltip,"hide"),this._addClass(this.tooltip_min,"hide"),this._addClass(this.tooltip_max,"hide")):"always"===this.options.tooltip?(this._showTooltip(),this._alwaysShowTooltip=!0):(this.showTooltip=this._showTooltip.bind(this),this.hideTooltip=this._hideTooltip.bind(this),this.sliderElem.addEventListener("mouseenter",this.showTooltip,!1),this.sliderElem.addEventListener("mouseleave",this.hideTooltip,!1),this.handle1.addEventListener("focus",this.showTooltip,!1),this.handle1.addEventListener("blur",this.hideTooltip,!1),this.handle2.addEventListener("focus",this.showTooltip,!1),this.handle2.addEventListener("blur",this.hideTooltip,!1)),this.options.enabled?this.enable():this.disable()}var d={formatInvalidInputErrorMsg:function(a){return"Invalid input value '"+a+"' passed in"},callingContextNotSliderInstance:"Calling context element does not have instance of Slider bound to it. Check your code to make sure the JQuery object returned from the call to the slider() initializer is calling the method"},e={linear:{toValue:function(a){var b=a/100*(this.options.max-this.options.min);if(this.options.ticks_positions.length>0){for(var c,d,e,f=0,g=0;g<this.options.ticks_positions.length;g++)if(a<=this.options.ticks_positions[g]){c=g>0?this.options.ticks[g-1]:0,e=g>0?this.options.ticks_positions[g-1]:0,d=this.options.ticks[g],f=this.options.ticks_positions[g];break}if(g>0){var h=(a-e)/(f-e);b=c+h*(d-c)}}var i=this.options.min+Math.round(b/this.options.step)*this.options.step;return i<this.options.min?this.options.min:i>this.options.max?this.options.max:i},toPercentage:function(a){if(this.options.max===this.options.min)return 0;if(this.options.ticks_positions.length>0){for(var b,c,d,e=0,f=0;f<this.options.ticks.length;f++)if(a<=this.options.ticks[f]){b=f>0?this.options.ticks[f-1]:0,d=f>0?this.options.ticks_positions[f-1]:0,c=this.options.ticks[f],e=this.options.ticks_positions[f];break}if(f>0){var g=(a-b)/(c-b);return d+g*(e-d)}}return 100*(a-this.options.min)/(this.options.max-this.options.min)}},logarithmic:{toValue:function(a){var b=0===this.options.min?0:Math.log(this.options.min),c=Math.log(this.options.max),d=Math.exp(b+(c-b)*a/100);return d=this.options.min+Math.round((d-this.options.min)/this.options.step)*this.options.step,d<this.options.min?this.options.min:d>this.options.max?this.options.max:d},toPercentage:function(a){if(this.options.max===this.options.min)return 0;var b=Math.log(this.options.max),c=0===this.options.min?0:Math.log(this.options.min),d=0===a?0:Math.log(a);return 100*(d-c)/(b-c)}}};if(b=function(a,b){return c.call(this,a,b),this},b.prototype={_init:function(){},constructor:b,defaultOptions:{id:"",min:0,max:10,step:1,precision:0,orientation:"horizontal",value:5,range:!1,selection:"before",tooltip:"show",tooltip_split:!1,handle:"round",reversed:!1,enabled:!0,formatter:function(a){return Array.isArray(a)?a[0]+" : "+a[1]:a},natural_arrow_keys:!1,ticks:[],ticks_positions:[],ticks_labels:[],ticks_snap_bounds:0,scale:"linear",focus:!1},over:!1,inDrag:!1,getValue:function(){return this.options.range?this.options.value:this.options.value[0]},setValue:function(a,b,c){a||(a=0);var d=this.getValue();this.options.value=this._validateInputValue(a);var e=this._applyPrecision.bind(this);this.options.range?(this.options.value[0]=e(this.options.value[0]),this.options.value[1]=e(this.options.value[1]),this.options.value[0]=Math.max(this.options.min,Math.min(this.options.max,this.options.value[0])),this.options.value[1]=Math.max(this.options.min,Math.min(this.options.max,this.options.value[1]))):(this.options.value=e(this.options.value),this.options.value=[Math.max(this.options.min,Math.min(this.options.max,this.options.value))],this._addClass(this.handle2,"hide"),this.options.value[1]="after"===this.options.selection?this.options.max:this.options.min),this.percentage=this.options.max>this.options.min?[this._toPercentage(this.options.value[0]),this._toPercentage(this.options.value[1]),100*this.options.step/(this.options.max-this.options.min)]:[0,0,100],this._layout();var f=this.options.range?this.options.value:this.options.value[0];return b===!0&&this._trigger("slide",f),d!==f&&c===!0&&this._trigger("change",{oldValue:d,newValue:f}),this._setDataVal(f),this},destroy:function(){this._removeSliderEventHandlers(),this.sliderElem.parentNode.removeChild(this.sliderElem),this.element.style.display="",this._cleanUpEventCallbacksMap(),this.element.removeAttribute("data"),a&&(this._unbindJQueryEventHandlers(),this.$element.removeData("slider"))},disable:function(){return this.options.enabled=!1,this.handle1.removeAttribute("tabindex"),this.handle2.removeAttribute("tabindex"),this._addClass(this.sliderElem,"slider-disabled"),this._trigger("slideDisabled"),this},enable:function(){return this.options.enabled=!0,this.handle1.setAttribute("tabindex",0),this.handle2.setAttribute("tabindex",0),this._removeClass(this.sliderElem,"slider-disabled"),this._trigger("slideEnabled"),this},toggle:function(){return this.options.enabled?this.disable():this.enable(),this},isEnabled:function(){return this.options.enabled},on:function(a,b){return this._bindNonQueryEventHandler(a,b),this},getAttribute:function(a){return a?this.options[a]:this.options},setAttribute:function(a,b){return this.options[a]=b,this},refresh:function(){return this._removeSliderEventHandlers(),c.call(this,this.element,this.options),a&&a.data(this.element,"slider",this),this},relayout:function(){return this._layout(),this},_removeSliderEventHandlers:function(){this.handle1.removeEventListener("keydown",this.handle1Keydown,!1),this.handle1.removeEventListener("focus",this.showTooltip,!1),this.handle1.removeEventListener("blur",this.hideTooltip,!1),this.handle2.removeEventListener("keydown",this.handle2Keydown,!1),this.handle2.removeEventListener("focus",this.handle2Keydown,!1),this.handle2.removeEventListener("blur",this.handle2Keydown,!1),this.sliderElem.removeEventListener("mouseenter",this.showTooltip,!1),this.sliderElem.removeEventListener("mouseleave",this.hideTooltip,!1),this.sliderElem.removeEventListener("touchstart",this.mousedown,!1),this.sliderElem.removeEventListener("mousedown",this.mousedown,!1)},_bindNonQueryEventHandler:function(a,b){void 0===this.eventToCallbackMap[a]&&(this.eventToCallbackMap[a]=[]),this.eventToCallbackMap[a].push(b)},_cleanUpEventCallbacksMap:function(){for(var a=Object.keys(this.eventToCallbackMap),b=0;b<a.length;b++){var c=a[b];this.eventToCallbackMap[c]=null}},_showTooltip:function(){this.options.tooltip_split===!1?this._addClass(this.tooltip,"in"):(this._addClass(this.tooltip_min,"in"),this._addClass(this.tooltip_max,"in")),this.over=!0},_hideTooltip:function(){this.inDrag===!1&&this.alwaysShowTooltip!==!0&&(this._removeClass(this.tooltip,"in"),this._removeClass(this.tooltip_min,"in"),this._removeClass(this.tooltip_max,"in")),this.over=!1},_layout:function(){var a;if(a=this.options.reversed?[100-this.percentage[0],this.percentage[1]]:[this.percentage[0],this.percentage[1]],this.handle1.style[this.stylePos]=a[0]+"%",this.handle2.style[this.stylePos]=a[1]+"%",Array.isArray(this.options.ticks)&&this.options.ticks.length>0){var b=Math.max.apply(Math,this.options.ticks),c=Math.min.apply(Math,this.options.ticks),d="vertical"===this.options.orientation?"height":"width",e="vertical"===this.options.orientation?"marginTop":"marginLeft",f=this.size/(this.options.ticks.length-1);if(this.tickLabelContainer){var g=0;if(0===this.options.ticks_positions.length)this.tickLabelContainer.style[e]=-f/2+"px",g=this.tickLabelContainer.offsetHeight;else for(h=0;h<this.tickLabelContainer.childNodes.length;h++)this.tickLabelContainer.childNodes[h].offsetHeight>g&&(g=this.tickLabelContainer.childNodes[h].offsetHeight);"horizontal"===this.options.orientation&&(this.sliderElem.style.marginBottom=g+"px")}for(var h=0;h<this.options.ticks.length;h++){var i=this.options.ticks_positions[h]||100*(this.options.ticks[h]-c)/(b-c);this.ticks[h].style[this.stylePos]=i+"%",this._removeClass(this.ticks[h],"in-selection"),this.options.range?i>=a[0]&&i<=a[1]&&this._addClass(this.ticks[h],"in-selection"):"after"===this.options.selection&&i>=a[0]?this._addClass(this.ticks[h],"in-selection"):"before"===this.options.selection&&i<=a[0]&&this._addClass(this.ticks[h],"in-selection"),this.tickLabels[h]&&(this.tickLabels[h].style[d]=f+"px",void 0!==this.options.ticks_positions[h]&&(this.tickLabels[h].style.position="absolute",this.tickLabels[h].style[this.stylePos]=this.options.ticks_positions[h]+"%",this.tickLabels[h].style[e]=-f/2+"px"))}}if("vertical"===this.options.orientation)this.trackLow.style.top="0",this.trackLow.style.height=Math.min(a[0],a[1])+"%",this.trackSelection.style.top=Math.min(a[0],a[1])+"%",this.trackSelection.style.height=Math.abs(a[0]-a[1])+"%",this.trackHigh.style.bottom="0",this.trackHigh.style.height=100-Math.min(a[0],a[1])-Math.abs(a[0]-a[1])+"%";else{this.trackLow.style.left="0",this.trackLow.style.width=Math.min(a[0],a[1])+"%",this.trackSelection.style.left=Math.min(a[0],a[1])+"%",this.trackSelection.style.width=Math.abs(a[0]-a[1])+"%",this.trackHigh.style.right="0",this.trackHigh.style.width=100-Math.min(a[0],a[1])-Math.abs(a[0]-a[1])+"%";var j=this.tooltip_min.getBoundingClientRect(),k=this.tooltip_max.getBoundingClientRect();j.right>k.left?(this._removeClass(this.tooltip_max,"top"),this._addClass(this.tooltip_max,"bottom"),this.tooltip_max.style.top="18px"):(this._removeClass(this.tooltip_max,"bottom"),this._addClass(this.tooltip_max,"top"),this.tooltip_max.style.top=this.tooltip_min.style.top)}var l;if(this.options.range){l=this.options.formatter(this.options.value),this._setText(this.tooltipInner,l),this.tooltip.style[this.stylePos]=(a[1]+a[0])/2+"%","vertical"===this.options.orientation?this._css(this.tooltip,"margin-top",-this.tooltip.offsetHeight/2+"px"):this._css(this.tooltip,"margin-left",-this.tooltip.offsetWidth/2+"px"),"vertical"===this.options.orientation?this._css(this.tooltip,"margin-top",-this.tooltip.offsetHeight/2+"px"):this._css(this.tooltip,"margin-left",-this.tooltip.offsetWidth/2+"px");var m=this.options.formatter(this.options.value[0]);this._setText(this.tooltipInner_min,m);var n=this.options.formatter(this.options.value[1]);this._setText(this.tooltipInner_max,n),this.tooltip_min.style[this.stylePos]=a[0]+"%","vertical"===this.options.orientation?this._css(this.tooltip_min,"margin-top",-this.tooltip_min.offsetHeight/2+"px"):this._css(this.tooltip_min,"margin-left",-this.tooltip_min.offsetWidth/2+"px"),this.tooltip_max.style[this.stylePos]=a[1]+"%","vertical"===this.options.orientation?this._css(this.tooltip_max,"margin-top",-this.tooltip_max.offsetHeight/2+"px"):this._css(this.tooltip_max,"margin-left",-this.tooltip_max.offsetWidth/2+"px")}else l=this.options.formatter(this.options.value[0]),this._setText(this.tooltipInner,l),this.tooltip.style[this.stylePos]=a[0]+"%","vertical"===this.options.orientation?this._css(this.tooltip,"margin-top",-this.tooltip.offsetHeight/2+"px"):this._css(this.tooltip,"margin-left",-this.tooltip.offsetWidth/2+"px")},_removeProperty:function(a,b){a.style.removeProperty?a.style.removeProperty(b):a.style.removeAttribute(b)},_mousedown:function(a){if(!this.options.enabled)return!1;this.offset=this._offset(this.sliderElem),this.size=this.sliderElem[this.sizePos];var b=this._getPercentage(a);if(this.options.range){var c=Math.abs(this.percentage[0]-b),d=Math.abs(this.percentage[1]-b);this.dragged=d>c?0:1}else this.dragged=0;this.percentage[this.dragged]=this.options.reversed?100-b:b,this._layout(),this.touchCapable&&(document.removeEventListener("touchmove",this.mousemove,!1),document.removeEventListener("touchend",this.mouseup,!1)),this.mousemove&&document.removeEventListener("mousemove",this.mousemove,!1),this.mouseup&&document.removeEventListener("mouseup",this.mouseup,!1),this.mousemove=this._mousemove.bind(this),this.mouseup=this._mouseup.bind(this),this.touchCapable&&(document.addEventListener("touchmove",this.mousemove,!1),document.addEventListener("touchend",this.mouseup,!1)),document.addEventListener("mousemove",this.mousemove,!1),document.addEventListener("mouseup",this.mouseup,!1),this.inDrag=!0;var e=this._calculateValue();return this._trigger("slideStart",e),this._setDataVal(e),this.setValue(e,!1,!0),this._pauseEvent(a),this.options.focus&&this._triggerFocusOnHandle(this.dragged),!0},_triggerFocusOnHandle:function(a){0===a&&this.handle1.focus(),1===a&&this.handle2.focus()},_keydown:function(a,b){if(!this.options.enabled)return!1;var c;switch(b.keyCode){case 37:case 40:c=-1;break;case 39:case 38:c=1}if(c){if(this.options.natural_arrow_keys){var d="vertical"===this.options.orientation&&!this.options.reversed,e="horizontal"===this.options.orientation&&this.options.reversed;(d||e)&&(c=-c)}var f=this.options.value[a]+c*this.options.step;return this.options.range&&(f=[a?this.options.value[0]:f,a?f:this.options.value[1]]),this._trigger("slideStart",f),this._setDataVal(f),this.setValue(f,!0,!0),this._trigger("slideStop",f),this._setDataVal(f),this._layout(),this._pauseEvent(b),!1}},_pauseEvent:function(a){a.stopPropagation&&a.stopPropagation(),a.preventDefault&&a.preventDefault(),a.cancelBubble=!0,a.returnValue=!1},_mousemove:function(a){if(!this.options.enabled)return!1;var b=this._getPercentage(a);this._adjustPercentageForRangeSliders(b),this.percentage[this.dragged]=this.options.reversed?100-b:b,this._layout();var c=this._calculateValue(!0);return this.setValue(c,!0,!0),!1},_adjustPercentageForRangeSliders:function(a){this.options.range&&(0===this.dragged&&this.percentage[1]<a?(this.percentage[0]=this.percentage[1],this.dragged=1):1===this.dragged&&this.percentage[0]>a&&(this.percentage[1]=this.percentage[0],this.dragged=0))},_mouseup:function(){if(!this.options.enabled)return!1;this.touchCapable&&(document.removeEventListener("touchmove",this.mousemove,!1),document.removeEventListener("touchend",this.mouseup,!1)),document.removeEventListener("mousemove",this.mousemove,!1),document.removeEventListener("mouseup",this.mouseup,!1),this.inDrag=!1,this.over===!1&&this._hideTooltip();var a=this._calculateValue(!0);return this._layout(),this._trigger("slideStop",a),this._setDataVal(a),!1},_calculateValue:function(a){var b;if(this.options.range?(b=[this.options.min,this.options.max],0!==this.percentage[0]&&(b[0]=this._toValue(this.percentage[0]),b[0]=this._applyPrecision(b[0])),100!==this.percentage[1]&&(b[1]=this._toValue(this.percentage[1]),b[1]=this._applyPrecision(b[1]))):(b=this._toValue(this.percentage[0]),b=parseFloat(b),b=this._applyPrecision(b)),a){for(var c=[b,1/0],d=0;d<this.options.ticks.length;d++){var e=Math.abs(this.options.ticks[d]-b);e<=c[1]&&(c=[this.options.ticks[d],e])}if(c[1]<=this.options.ticks_snap_bounds)return c[0]}return b},_applyPrecision:function(a){var b=this.options.precision||this._getNumDigitsAfterDecimalPlace(this.options.step);return this._applyToFixedAndParseFloat(a,b)},_getNumDigitsAfterDecimalPlace:function(a){var b=(""+a).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return b?Math.max(0,(b[1]?b[1].length:0)-(b[2]?+b[2]:0)):0},_applyToFixedAndParseFloat:function(a,b){var c=a.toFixed(b);return parseFloat(c)},_getPercentage:function(a){!this.touchCapable||"touchstart"!==a.type&&"touchmove"!==a.type||(a=a.touches[0]);var b=a[this.mousePos],c=this.offset[this.stylePos],d=b-c,e=d/this.size*100;return e=Math.round(e/this.percentage[2])*this.percentage[2],Math.max(0,Math.min(100,e))},_validateInputValue:function(a){if("number"==typeof a)return a;if(Array.isArray(a))return this._validateArray(a),a;throw new Error(d.formatInvalidInputErrorMsg(a))},_validateArray:function(a){for(var b=0;b<a.length;b++){var c=a[b];if("number"!=typeof c)throw new Error(d.formatInvalidInputErrorMsg(c))}},_setDataVal:function(a){var b="value: '"+a+"'";this.element.setAttribute("data",b),this.element.setAttribute("value",a),this.element.value=a},_trigger:function(b,c){c=c||0===c?c:void 0;var d=this.eventToCallbackMap[b];if(d&&d.length)for(var e=0;e<d.length;e++){var f=d[e];f(c)}a&&this._triggerJQueryEvent(b,c)},_triggerJQueryEvent:function(a,b){var c={type:a,value:b};this.$element.trigger(c),this.$sliderElem.trigger(c)},_unbindJQueryEventHandlers:function(){this.$element.off(),this.$sliderElem.off()},_setText:function(a,b){"undefined"!=typeof a.innerText?a.innerText=b:"undefined"!=typeof a.textContent&&(a.textContent=b)},_removeClass:function(a,b){for(var c=b.split(" "),d=a.className,e=0;e<c.length;e++){var f=c[e],g=new RegExp("(?:\\s|^)"+f+"(?:\\s|$)");d=d.replace(g," ")}a.className=d.trim()},_addClass:function(a,b){for(var c=b.split(" "),d=a.className,e=0;e<c.length;e++){var f=c[e],g=new RegExp("(?:\\s|^)"+f+"(?:\\s|$)"),h=g.test(d);h||(d+=" "+f)}a.className=d.trim()},_offsetLeft:function(a){for(var b=a.offsetLeft;(a=a.offsetParent)&&!isNaN(a.offsetLeft);)b+=a.offsetLeft;return b},_offsetTop:function(a){for(var b=a.offsetTop;(a=a.offsetParent)&&!isNaN(a.offsetTop);)b+=a.offsetTop;return b},_offset:function(a){return{left:this._offsetLeft(a),top:this._offsetTop(a)}},_css:function(b,c,d){if(a)a.style(b,c,d);else{var e=c.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,function(a,b){return b.toUpperCase()});b.style[e]=d}},_toValue:function(a){return this.options.scale.toValue.apply(this,[a])},_toPercentage:function(a){return this.options.scale.toPercentage.apply(this,[a])}},a){var f=a.fn.slider?"bootstrapSlider":"slider";a.bridget(f,b)}}(a),b});
\ No newline at end of file
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_slider.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_slider.less
new file mode 100644 (file)
index 0000000..2b0e92e
--- /dev/null
@@ -0,0 +1,264 @@
+//
+// Boostrap Slider
+//
+// This is a custom less implementation for the value slider in the backend
+// based on https://github.com/seiyria/bootstrap-slider
+//
+// Please be careful on lib updates.
+//
+
+//
+// Slider Variables
+//
+@slider-track-bg: #dddddd;
+@slider-selection-bg: #999999;
+
+@slider-handle-color: @btn-default-color;
+@slider-handle-bg: @btn-default-bg;
+@slider-handle-border: darken(@btn-default-border, 15%);
+@slider-handle-border-radius: @slider-border-radius;
+@slider-disabled-handle-color: @btn-danger-color;
+@slider-disabled-handle-bg: @btn-danger-bg;
+@slider-disabled-handle-border: darken(@btn-danger-border, 15%);
+
+@slider-border-radius: @border-radius-base;
+
+@slider-horizontal-width: 210px;
+@slider-horizontal-height: @input-height-base;
+@slider-horizontal-handle-height: ceil(@slider-horizontal-height * 0.6);
+@slider-horizontal-handle-width: ceil(@slider-horizontal-height * 0.5);
+
+@slider-vertical-width: @input-height-base;
+@slider-vertical-height: 210px;
+@slider-vertical-handle-height: ceil(@slider-vertical-width * 0.5);
+@slider-vertical-handle-width: ceil(@slider-vertical-width * 0.6);
+
+
+//
+// Slider
+//
+.slider {
+       display: inline-block;
+       position: relative;
+       input {
+               display: none;
+       }
+       .tooltip {
+               &.top {
+                       margin-top: -36px;
+               }
+       }
+       .tooltip-inner {
+               white-space: nowrap;
+       }
+       .hide {
+               display: none;
+       }
+}
+.form-wizards-items {
+       > .slider {
+               &.slider-horizontal {
+                       margin-left: @slider-horizontal-height * 0.5 / 2;
+                       margin-right: @slider-horizontal-height * 0.5 / 2;
+               }
+       }
+}
+
+
+//
+// Slider track
+//
+.slider-track {
+       position: absolute;
+       cursor: pointer;
+       background-color: @slider-track-bg;
+       border-radius: @slider-border-radius;
+       .box-shadow(inset 0 0 2px rgba(0,0,0,0.25));
+}
+.slider-track-low,
+.slider-track-high {
+       position: absolute;
+       background: transparent;
+       .box-sizing(border-box);
+       border-radius: @slider-border-radius;
+}
+
+
+//
+// Slider handle
+//
+.slider-handle {
+       position: absolute;
+       background-color: @slider-handle-bg;
+       border: 1px solid @slider-handle-border;
+       border-radius: @slider-handle-border-radius;
+       .box-shadow(0px 1px 0px rgba(0, 0, 0, 0.15));
+       .box-sizing(border-box);
+       &:hover,
+       &:focus,
+       &:active {
+               background-color: darken(@slider-handle-bg, 10%);
+               border-color: darken(@slider-handle-border, 12%);
+       }
+       &:before,
+       &:after {
+               content: "";
+               display: block;
+               position: absolute;
+               background-color: @slider-handle-color;
+       }
+}
+
+
+//
+// Slider selection
+//
+.slider-selection {
+       position: absolute;
+       background-color: @slider-selection-bg;
+       border-radius: @slider-border-radius;
+       .box-shadow(inset 0 0 2px rgba(0,0,0,0.25));
+}
+
+
+//
+// Slider tick
+//
+.slider-tick {
+       position: absolute;
+       background-color: darken(@slider-track-bg, 10%);
+       &.in-selection {
+               background-color: darken(@slider-selection-bg, 10%);
+       }
+}
+
+
+//
+// Slider horizontal
+//
+.slider-horizontal {
+       width: @slider-horizontal-width;
+       height: @slider-horizontal-height;
+       .slider-selection,
+       .slider-track-low,
+       .slider-track-high {
+               height: 100%;
+               top: 0;
+               bottom: 0;
+       }
+       .slider-track {
+               top: 50%;
+               left: 0;
+               margin-top: -@slider-horizontal-height / 4;
+               height: @slider-horizontal-height / 2;
+               width: 100%;
+       }
+       .slider-tick {
+               height: @slider-horizontal-height / 2;
+               width: 1px;
+               &[style="left: 0%;"],
+               &[style="left: 100%;"]{
+                       display: none;
+               }
+       }
+       .slider-handle {
+               top: 50%;
+               height: @slider-horizontal-handle-height;
+               width: @slider-horizontal-handle-width;
+               margin-top: -@slider-horizontal-handle-height / 2;
+               margin-left: -@slider-horizontal-handle-width / 2;
+               &:before,
+               &:after {
+                       height: 50%;
+                       width: 2px;
+                       top: 25%;
+               }
+               &:before {
+                       left: @slider-horizontal-handle-width / 4;
+               }
+               &:after {
+                       right: @slider-horizontal-handle-width / 4;
+               }
+       }
+}
+
+
+//
+// Slider vertical
+//
+.slider-vertical {
+       width: @slider-vertical-width;
+       height: @slider-vertical-height;
+       .slider-selection,
+       .slider-track-low,
+       .slider-track-high {
+               width: 100%;
+               left: 0;
+               right: 0;
+       }
+       .slider-selection {
+               bottom: 0;
+       }
+       .slider-track {
+               top: 0;
+               left: 50%;
+               margin-left: -@slider-vertical-width / 4;
+               height: 100%;
+               width: @slider-vertical-width / 2;
+       }
+       .slider-tick {
+               height: 1px;
+               width: @slider-vertical-width / 2;
+               &[style="top: 0%;"],
+               &[style="top: 100%;"]{
+                       display: none;
+               }
+       }
+       .slider-handle {
+               left: 50%;
+               height: @slider-vertical-handle-height;
+               width: @slider-vertical-handle-width;
+               margin-top: -@slider-vertical-handle-height / 2;
+               margin-left: -@slider-vertical-handle-width / 2;
+               &:before,
+               &:after {
+                       height: 2px;
+                       width: 50%;
+                       left: 25%;
+               }
+               &:before {
+                       top: @slider-vertical-handle-height / 4;
+               }
+               &:after {
+                       bottom: @slider-vertical-handle-height / 4;
+               }
+       }
+       .slider-selection {
+               left: 0;
+               right: 0;
+       }
+}
+
+
+//
+// Slider disabled
+//
+.slider-disabled {
+       .slider-handle {
+               background-color: @slider-disabled-handle-bg;
+               border: 1px solid @slider-disabled-handle-border;
+               &:hover,
+               &:focus,
+               &:active {
+                       background-color: darken(@slider-disabled-handle-bg, 10%);
+                       border-color: darken(@slider-disabled-handle-border, 12%);
+               }
+               &:before,
+               &:after {
+                       background-color: @slider-disabled-handle-color;
+               }
+       }
+       .slider-track {
+               cursor: not-allowed;
+       }
+}
\ No newline at end of file
index ea3afd0..a27ca74 100644 (file)
 @import "TYPO3/_element_modal.less";
 @import "TYPO3/_element_pagetree.less";
 @import "TYPO3/_element_rte.less";
+@import "TYPO3/_element_slider.less";
 @import "TYPO3/_element_spinner.less";
 @import "TYPO3/_element_tab.less";
 @import "TYPO3/_element_table.less";
index 5b88b59..53a43ef 100644 (file)
@@ -9593,6 +9593,195 @@ body#ext-rte-app-rte-select-image-php a {
 body#ext-rte-app-rte-select-image-php table tr td table tr.bgColor4 td a {
   text-decoration: underline;
 }
+.slider {
+  display: inline-block;
+  position: relative;
+}
+.slider input {
+  display: none;
+}
+.slider .tooltip.top {
+  margin-top: -36px;
+}
+.slider .tooltip-inner {
+  white-space: nowrap;
+}
+.slider .hide {
+  display: none;
+}
+.form-wizards-items > .slider.slider-horizontal {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+.slider-track {
+  position: absolute;
+  cursor: pointer;
+  background-color: #dddddd;
+  border-radius: 2px;
+  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25);
+}
+.slider-track-low,
+.slider-track-high {
+  position: absolute;
+  background: transparent;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border-radius: 2px;
+}
+.slider-handle {
+  position: absolute;
+  background-color: #eeeeee;
+  border: 1px solid #959595;
+  border-radius: 2px;
+  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
+  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.slider-handle:hover,
+.slider-handle:focus,
+.slider-handle:active {
+  background-color: #d5d5d5;
+  border-color: #767676;
+}
+.slider-handle:before,
+.slider-handle:after {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: #333333;
+}
+.slider-selection {
+  position: absolute;
+  background-color: #999999;
+  border-radius: 2px;
+  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25);
+}
+.slider-tick {
+  position: absolute;
+  background-color: #c4c4c4;
+}
+.slider-tick.in-selection {
+  background-color: #808080;
+}
+.slider-horizontal {
+  width: 210px;
+  height: 32px;
+}
+.slider-horizontal .slider-selection,
+.slider-horizontal .slider-track-low,
+.slider-horizontal .slider-track-high {
+  height: 100%;
+  top: 0;
+  bottom: 0;
+}
+.slider-horizontal .slider-track {
+  top: 50%;
+  left: 0;
+  margin-top: -8px;
+  height: 16px;
+  width: 100%;
+}
+.slider-horizontal .slider-tick {
+  height: 16px;
+  width: 1px;
+}
+.slider-horizontal .slider-tick[style="left: 0%;"],
+.slider-horizontal .slider-tick[style="left: 100%;"] {
+  display: none;
+}
+.slider-horizontal .slider-handle {
+  top: 50%;
+  height: 20px;
+  width: 16px;
+  margin-top: -10px;
+  margin-left: -8px;
+}
+.slider-horizontal .slider-handle:before,
+.slider-horizontal .slider-handle:after {
+  height: 50%;
+  width: 2px;
+  top: 25%;
+}
+.slider-horizontal .slider-handle:before {
+  left: 4px;
+}
+.slider-horizontal .slider-handle:after {
+  right: 4px;
+}
+.slider-vertical {
+  width: 32px;
+  height: 210px;
+}
+.slider-vertical .slider-selection,
+.slider-vertical .slider-track-low,
+.slider-vertical .slider-track-high {
+  width: 100%;
+  left: 0;
+  right: 0;
+}
+.slider-vertical .slider-selection {
+  bottom: 0;
+}
+.slider-vertical .slider-track {
+  top: 0;
+  left: 50%;
+  margin-left: -8px;
+  height: 100%;
+  width: 16px;
+}
+.slider-vertical .slider-tick {
+  height: 1px;
+  width: 16px;
+}
+.slider-vertical .slider-tick[style="top: 0%;"],
+.slider-vertical .slider-tick[style="top: 100%;"] {
+  display: none;
+}
+.slider-vertical .slider-handle {
+  left: 50%;
+  height: 16px;
+  width: 20px;
+  margin-top: -8px;
+  margin-left: -10px;
+}
+.slider-vertical .slider-handle:before,
+.slider-vertical .slider-handle:after {
+  height: 2px;
+  width: 50%;
+  left: 25%;
+}
+.slider-vertical .slider-handle:before {
+  top: 4px;
+}
+.slider-vertical .slider-handle:after {
+  bottom: 4px;
+}
+.slider-vertical .slider-selection {
+  left: 0;
+  right: 0;
+}
+.slider-disabled .slider-handle {
+  background-color: #c83c3c;
+  border: 1px solid #7b2323;
+}
+.slider-disabled .slider-handle:hover,
+.slider-disabled .slider-handle:focus,
+.slider-disabled .slider-handle:active {
+  background-color: #a32e2e;
+  border-color: #4c1515;
+}
+.slider-disabled .slider-handle:before,
+.slider-disabled .slider-handle:after {
+  background-color: #ffffff;
+}
+.slider-disabled .slider-track {
+  cursor: not-allowed;
+}
 span.spinner {
   display: inline-block;
   width: 16px;