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