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