docs/source/Thumb.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-slider-Thumb'>/**
  19 </span> * @class Ext.slider.Thumb
  20  * @extends Ext.Base
  21  * @private
  22  * Represents a single thumb element on a Slider. This would not usually be created manually and would instead
  23  * be created internally by an {@link Ext.slider.Multi Ext.Slider}.
  24  */
  25 Ext.define('Ext.slider.Thumb', {
  26     requires: ['Ext.dd.DragTracker', 'Ext.util.Format'],
  27 <span id='Ext-slider-Thumb-property-topThumbZIndex'>    /**
  28 </span>     * @private
  29      * @property topThumbZIndex
  30      * @type Number
  31      * The number used internally to set the z index of the top thumb (see promoteThumb for details)
  32      */
  33     topZIndex: 10000,
  34 <span id='Ext-slider-Thumb-cfg-slider'>    /**
  35 </span>     * @cfg {Ext.slider.MultiSlider} slider The Slider to render to (required)
  36      */
  37 <span id='Ext-slider-Thumb-method-constructor'>    /**
  38 </span>     * Creates new slider thumb.
  39      * @param {Object} config (optional) Config object.
  40      */
  41     constructor: function(config) {
  42         var me = this;
  43
  44 <span id='Ext-slider-Thumb-property-slider'>        /**
  45 </span>         * @property slider
  46          * @type Ext.slider.MultiSlider
  47          * The slider this thumb is contained within
  48          */
  49         Ext.apply(me, config || {}, {
  50             cls: Ext.baseCSSPrefix + 'slider-thumb',
  51
  52 <span id='Ext-slider-Thumb-cfg-constrain'>            /**
  53 </span>             * @cfg {Boolean} constrain True to constrain the thumb so that it cannot overlap its siblings
  54              */
  55             constrain: false
  56         });
  57         me.callParent([config]);
  58
  59         if (me.slider.vertical) {
  60             Ext.apply(me, Ext.slider.Thumb.Vertical);
  61         }
  62     },
  63
  64 <span id='Ext-slider-Thumb-method-render'>    /**
  65 </span>     * Renders the thumb into a slider
  66      */
  67     render: function() {
  68         var me = this;
  69
  70         me.el = me.slider.innerEl.insertFirst({cls: me.cls});
  71         if (me.disabled) {
  72             me.disable();
  73         }
  74         me.initEvents();
  75     },
  76
  77 <span id='Ext-slider-Thumb-method-move'>    /**
  78 </span>     * @private
  79      * move the thumb
  80      */
  81     move: function(v, animate){
  82         if(!animate){
  83             this.el.setLeft(v);
  84         }else{
  85             Ext.create('Ext.fx.Anim', {
  86                 target: this.el,
  87                 duration: 350,
  88                 to: {
  89                     left: v
  90                 }
  91             });
  92         }
  93     },
  94
  95 <span id='Ext-slider-Thumb-method-bringToFront'>    /**
  96 </span>     * @private
  97      * Bring thumb dom element to front.
  98      */
  99     bringToFront: function() {
 100         this.el.setStyle('zIndex', this.topZIndex);
 101     },
 102
 103 <span id='Ext-slider-Thumb-method-sendToBack'>    /**
 104 </span>     * @private
 105      * Send thumb dom element to back.
 106      */
 107     sendToBack: function() {
 108         this.el.setStyle('zIndex', '');
 109     },
 110
 111 <span id='Ext-slider-Thumb-method-enable'>    /**
 112 </span>     * Enables the thumb if it is currently disabled
 113      */
 114     enable: function() {
 115         var me = this;
 116
 117         me.disabled = false;
 118         if (me.el) {
 119             me.el.removeCls(me.slider.disabledCls);
 120         }
 121     },
 122
 123 <span id='Ext-slider-Thumb-method-disable'>    /**
 124 </span>     * Disables the thumb if it is currently enabled
 125      */
 126     disable: function() {
 127         var me = this;
 128
 129         me.disabled = true;
 130         if (me.el) {
 131             me.el.addCls(me.slider.disabledCls);
 132         }
 133     },
 134
 135 <span id='Ext-slider-Thumb-method-initEvents'>    /**
 136 </span>     * Sets up an Ext.dd.DragTracker for this thumb
 137      */
 138     initEvents: function() {
 139         var me = this,
 140             el = me.el;
 141
 142         me.tracker = Ext.create('Ext.dd.DragTracker', {
 143             onBeforeStart: Ext.Function.bind(me.onBeforeDragStart, me),
 144             onStart      : Ext.Function.bind(me.onDragStart, me),
 145             onDrag       : Ext.Function.bind(me.onDrag, me),
 146             onEnd        : Ext.Function.bind(me.onDragEnd, me),
 147             tolerance    : 3,
 148             autoStart    : 300,
 149             overCls      : Ext.baseCSSPrefix + 'slider-thumb-over'
 150         });
 151
 152         me.tracker.initEl(el);
 153     },
 154
 155 <span id='Ext-slider-Thumb-method-onBeforeDragStart'>    /**
 156 </span>     * @private
 157      * This is tied into the internal Ext.dd.DragTracker. If the slider is currently disabled,
 158      * this returns false to disable the DragTracker too.
 159      * @return {Boolean} False if the slider is currently disabled
 160      */
 161     onBeforeDragStart : function(e) {
 162         if (this.disabled) {
 163             return false;
 164         } else {
 165             this.slider.promoteThumb(this);
 166             return true;
 167         }
 168     },
 169
 170 <span id='Ext-slider-Thumb-method-onDragStart'>    /**
 171 </span>     * @private
 172      * This is tied into the internal Ext.dd.DragTracker's onStart template method. Adds the drag CSS class
 173      * to the thumb and fires the 'dragstart' event
 174      */
 175     onDragStart: function(e){
 176         var me = this;
 177
 178         me.el.addCls(Ext.baseCSSPrefix + 'slider-thumb-drag');
 179         me.dragging = true;
 180         me.dragStartValue = me.value;
 181
 182         me.slider.fireEvent('dragstart', me.slider, e, me);
 183     },
 184
 185 <span id='Ext-slider-Thumb-method-onDrag'>    /**
 186 </span>     * @private
 187      * This is tied into the internal Ext.dd.DragTracker's onDrag template method. This is called every time
 188      * the DragTracker detects a drag movement. It updates the Slider's value using the position of the drag
 189      */
 190     onDrag: function(e) {
 191         var me       = this,
 192             slider   = me.slider,
 193             index    = me.index,
 194             newValue = me.getNewValue(),
 195             above,
 196             below;
 197
 198         if (me.constrain) {
 199             above = slider.thumbs[index + 1];
 200             below = slider.thumbs[index - 1];
 201
 202             if (below !== undefined &amp;&amp; newValue &lt;= below.value) {
 203                 newValue = below.value;
 204             }
 205
 206             if (above !== undefined &amp;&amp; newValue &gt;= above.value) {
 207                 newValue = above.value;
 208             }
 209         }
 210
 211         slider.setValue(index, newValue, false);
 212         slider.fireEvent('drag', slider, e, me);
 213     },
 214
 215     getNewValue: function() {
 216         var slider = this.slider,
 217             pos = slider.innerEl.translatePoints(this.tracker.getXY());
 218
 219         return Ext.util.Format.round(slider.reverseValue(pos.left), slider.decimalPrecision);
 220     },
 221
 222 <span id='Ext-slider-Thumb-method-onDragEnd'>    /**
 223 </span>     * @private
 224      * This is tied to the internal Ext.dd.DragTracker's onEnd template method. Removes the drag CSS class and
 225      * fires the 'changecomplete' event with the new value
 226      */
 227     onDragEnd: function(e) {
 228         var me     = this,
 229             slider = me.slider,
 230             value  = me.value;
 231
 232         me.el.removeCls(Ext.baseCSSPrefix + 'slider-thumb-drag');
 233
 234         me.dragging = false;
 235         slider.fireEvent('dragend', slider, e);
 236
 237         if (me.dragStartValue != value) {
 238             slider.fireEvent('changecomplete', slider, value, me);
 239         }
 240     },
 241
 242     destroy: function() {
 243         Ext.destroy(this.tracker);
 244     },
 245     statics: {
 246         // Method overrides to support vertical dragging of thumb within slider
 247         Vertical: {
 248             getNewValue: function() {
 249                 var slider   = this.slider,
 250                     innerEl  = slider.innerEl,
 251                     pos      = innerEl.translatePoints(this.tracker.getXY()),
 252                     bottom   = innerEl.getHeight() - pos.top;
 253
 254                 return Ext.util.Format.round(slider.reverseValue(bottom), slider.decimalPrecision);
 255             },
 256             move: function(v, animate) {
 257                 if (!animate) {
 258                     this.el.setBottom(v);
 259                 } else {
 260                     Ext.create('Ext.fx.Anim', {
 261                         target: this.el,
 262                         duration: 350,
 263                         to: {
 264                             bottom: v
 265                         }
 266                     });
 267                 }
 268             }
 269         }
 270     }
 271 });
 272 </pre>
 273 </body>
 274 </html>