extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/slider/Single.js

@@ -0,0 +1,56 @@
+/**
+ * Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking
+ * and animation. Can be added as an item to any container.
+ *
+ *     @example
+ *     Ext.create('Ext.slider.Single', {
+ *         width: 200,
+ *         value: 50,
+ *         increment: 10,
+ *         minValue: 0,
+ *         maxValue: 100,
+ *         renderTo: Ext.getBody()
+ *     });
+ *
+ * The class Ext.slider.Single is aliased to Ext.Slider for backwards compatibility.
+ */
+Ext.define('Ext.slider.Single', {
+    extend: 'Ext.slider.Multi',
+    alias: ['widget.slider', 'widget.sliderfield'],
+    alternateClassName: ['Ext.Slider', 'Ext.form.SliderField', 'Ext.slider.SingleSlider', 'Ext.slider.Slider'],
+
+    /**
+     * Returns the current value of the slider
+     * @return {Number} The current value of the slider
+     */
+    getValue: function() {
+        // just returns the value of the first thumb, which should be the only one in a single slider
+        return this.callParent([0]);
+    },
+
+    /**
+     * Programmatically sets the value of the Slider. Ensures that the value is constrained within the minValue and
+     * maxValue.
+     * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
+     * @param {Boolean} [animate] Turn on or off animation
+     */
+    setValue: function(value, animate) {
+        var args = arguments,
+            len  = args.length;
+
+        // this is to maintain backwards compatiblity for sliders with only one thunb. Usually you must pass the thumb
+        // index to setValue, but if we only have one thumb we inject the index here first if given the multi-slider
+        // signature without the required index. The index will always be 0 for a single slider
+        if (len == 1 || (len <= 3 && typeof args[1] != 'number')) {
+            args = Ext.toArray(args);
+            args.unshift(0);
+        }
+        return this.callParent(args);
+    },
+
+    // private
+    getNearest : function(){
+        // Since there's only 1 thumb, it's always the nearest
+        return this.thumbs[0];
+    }
+});

data/app/assets/javascripts/extjs-rails/src/slider/Thumb.js

@@ -0,0 +1,259 @@
+/**
+ * @class Ext.slider.Thumb
+ * @private
+ * Represents a single thumb element on a Slider. This would not usually be created manually and would instead
+ * be created internally by an {@link Ext.slider.Multi Multi slider}.
+ */
+Ext.define('Ext.slider.Thumb', {
+    requires: ['Ext.dd.DragTracker', 'Ext.util.Format'],
+    /**
+     * @private
+     * @property {Number} topThumbZIndex
+     * The number used internally to set the z index of the top thumb (see promoteThumb for details)
+     */
+    topZIndex: 10000,
+
+    /**
+     * @cfg {Ext.slider.MultiSlider} slider (required)
+     * The Slider to render to.
+     */
+
+    /**
+     * Creates new slider thumb.
+     * @param {Object} [config] Config object.
+     */
+    constructor: function(config) {
+        var me = this;
+
+        /**
+         * @property {Ext.slider.MultiSlider} slider
+         * The slider this thumb is contained within
+         */
+        Ext.apply(me, config || {}, {
+            cls: Ext.baseCSSPrefix + 'slider-thumb',
+
+            /**
+             * @cfg {Boolean} constrain True to constrain the thumb so that it cannot overlap its siblings
+             */
+            constrain: false
+        });
+        me.callParent([config]);
+    },
+
+    /**
+     * Renders the thumb into a slider
+     */
+    render: function() {
+        var me = this;
+        me.el = me.slider.innerEl.insertFirst(me.getElConfig());
+        me.onRender();
+    },
+    
+    onRender: function() {
+        if (this.disabled) {
+            this.disable();
+        }
+        this.initEvents();
+    },
+
+    getElConfig: function() {
+        var me = this,
+            slider = me.slider,
+            style = {};
+
+        style[slider.vertical ? 'bottom' : 'left'] = slider.calculateThumbPosition(slider.normalizeValue(me.value)) + '%';
+        return {
+            style: style,
+            id  : this.id,
+            cls : this.cls
+        };
+    },
+
+    /**
+     * @private
+     * move the thumb
+     */
+    move: function(v, animate) {
+        var el = this.el,
+            styleProp = this.slider.vertical ? 'bottom' : 'left',
+            to,
+            from;
+
+        v += '%';
+        
+        if (!animate) {
+            el.dom.style[styleProp] = v;
+        } else {
+            to = {};
+            to[styleProp] = v;
+            
+            if (!Ext.supports.GetPositionPercentage) {
+                from = {};
+                from[styleProp] = el.dom.style[styleProp];
+            }
+            
+            new Ext.fx.Anim({
+                target: el,
+                duration: 350,
+                from: from,
+                to: to
+            });
+        }
+    },
+
+    /**
+     * @private
+     * Bring thumb dom element to front.
+     */
+    bringToFront: function() {
+        this.el.setStyle('zIndex', this.topZIndex);
+    },
+
+    /**
+     * @private
+     * Send thumb dom element to back.
+     */
+    sendToBack: function() {
+        this.el.setStyle('zIndex', '');
+    },
+
+    /**
+     * Enables the thumb if it is currently disabled
+     */
+    enable: function() {
+        var me = this;
+
+        me.disabled = false;
+        if (me.el) {
+            me.el.removeCls(me.slider.disabledCls);
+        }
+    },
+
+    /**
+     * Disables the thumb if it is currently enabled
+     */
+    disable: function() {
+        var me = this;
+
+        me.disabled = true;
+        if (me.el) {
+            me.el.addCls(me.slider.disabledCls);
+        }
+    },
+
+    /**
+     * Sets up an Ext.dd.DragTracker for this thumb
+     */
+    initEvents: function() {
+        var me = this,
+            el = me.el;
+
+        me.tracker = new Ext.dd.DragTracker({
+            onBeforeStart: Ext.Function.bind(me.onBeforeDragStart, me),
+            onStart      : Ext.Function.bind(me.onDragStart, me),
+            onDrag       : Ext.Function.bind(me.onDrag, me),
+            onEnd        : Ext.Function.bind(me.onDragEnd, me),
+            tolerance    : 3,
+            autoStart    : 300,
+            overCls      : Ext.baseCSSPrefix + 'slider-thumb-over'
+        });
+
+        me.tracker.initEl(el);
+    },
+
+    /**
+     * @private
+     * This is tied into the internal Ext.dd.DragTracker. If the slider is currently disabled,
+     * this returns false to disable the DragTracker too.
+     * @return {Boolean} False if the slider is currently disabled
+     */
+    onBeforeDragStart : function(e) {
+        if (this.disabled) {
+            return false;
+        } else {
+            this.slider.promoteThumb(this);
+            return true;
+        }
+    },
+
+    /**
+     * @private
+     * This is tied into the internal Ext.dd.DragTracker's onStart template method. Adds the drag CSS class
+     * to the thumb and fires the 'dragstart' event
+     */
+    onDragStart: function(e){
+        var me = this;
+
+        me.el.addCls(Ext.baseCSSPrefix + 'slider-thumb-drag');
+        me.dragging = me.slider.dragging = true;
+        me.dragStartValue = me.value;
+
+        me.slider.fireEvent('dragstart', me.slider, e, me);
+    },
+
+    /**
+     * @private
+     * This is tied into the internal Ext.dd.DragTracker's onDrag template method. This is called every time
+     * the DragTracker detects a drag movement. It updates the Slider's value using the position of the drag
+     */
+    onDrag: function(e) {
+        var me       = this,
+            slider   = me.slider,
+            index    = me.index,
+            newValue = me.getValueFromTracker(),
+            above,
+            below;
+
+        // If dragged out of range, value will be undefined
+        if (newValue !== undefined) {
+            if (me.constrain) {
+                above = slider.thumbs[index + 1];
+                below = slider.thumbs[index - 1];
+
+                if (below !== undefined && newValue <= below.value) {
+                    newValue = below.value;
+                }
+
+                if (above !== undefined && newValue >= above.value) {
+                    newValue = above.value;
+                }
+            }
+            slider.setValue(index, newValue, false);
+            slider.fireEvent('drag', slider, e, me);
+        }
+    },
+
+    getValueFromTracker: function() {
+        var slider = this.slider,
+            trackPoint = slider.getTrackpoint(this.tracker.getXY());
+
+        // If dragged out of range, value will be undefined
+        if (trackPoint !== undefined) {
+            return slider.reversePixelValue(trackPoint);
+        }
+    },
+
+    /**
+     * @private
+     * This is tied to the internal Ext.dd.DragTracker's onEnd template method. Removes the drag CSS class and
+     * fires the 'changecomplete' event with the new value
+     */
+    onDragEnd: function(e) {
+        var me     = this,
+            slider = me.slider,
+            value  = me.value;
+
+        me.el.removeCls(Ext.baseCSSPrefix + 'slider-thumb-drag');
+
+        me.dragging = slider.dragging = false;
+        slider.fireEvent('dragend', slider, e);
+
+        if (me.dragStartValue != value) {
+            slider.fireEvent('changecomplete', slider, value, me);
+        }
+    },
+
+    destroy: function() {
+        Ext.destroy(this.tracker);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/slider/Tip.js

@@ -0,0 +1,130 @@
+/**
+ * Simple plugin for using an Ext.tip.Tip with a slider to show the slider value. In general this class is not created
+ * directly, instead pass the {@link Ext.slider.Multi#useTips} and {@link Ext.slider.Multi#tipText} configuration
+ * options to the slider directly.
+ *
+ *     @example
+ *     Ext.create('Ext.slider.Single', {
+ *         width: 214,
+ *         minValue: 0,
+ *         maxValue: 100,
+ *         useTips: true,
+ *         renderTo: Ext.getBody()
+ *     });
+ *
+ * Optionally provide your own tip text by passing tipText:
+ *
+ *     @example
+ *     Ext.create('Ext.slider.Single', {
+ *         width: 214,
+ *         minValue: 0,
+ *         maxValue: 100,
+ *         useTips: true,
+ *         tipText: function(thumb){
+ *             return Ext.String.format('**{0}% complete**', thumb.value);
+ *         },
+ *         renderTo: Ext.getBody()
+ *     });
+ */
+Ext.define('Ext.slider.Tip', {
+    extend: 'Ext.tip.Tip',
+    minWidth: 10,
+    alias: 'widget.slidertip',
+    
+    /**
+     * @cfg {Array} [offsets=null]
+     * Offsets for aligning the tip to the slider. See {@link Ext.dom.Element#alignTo}. Default values
+     * for offsets are provided by specifying the {@link #position} config.
+     */
+    offsets : null,
+    
+    /**
+     * @cfg {String} [align=null]
+     * Alignment configuration for the tip to the slider. See {@link Ext.dom.Element#alignTo}. Default
+     * values for alignment are provided by specifying the {@link #position} config.
+     */
+    align: null,
+    
+    /**
+     * @cfg {String} [position=For horizontal sliders, "top", for vertical sliders, "left"] 
+     * Sets the position for where the tip will be displayed related to the thumb. This sets
+     * defaults for {@link #align} and {@link #offsets} configurations. If {@link #align} or 
+     * {@link #offsets} configurations are specified, they will override the defaults defined
+     * by position.
+     */
+    position: '',
+    
+    defaultVerticalPosition: 'left',
+    
+    defaultHorizontalPosition: 'top',
+
+    isSliderTip: true,
+
+    init: function(slider) {
+        var me = this,
+            align,
+            offsets;
+        
+        if (!me.position) {
+            me.position = slider.vertical ? me.defaultVerticalPosition : me.defaultHorizontalPosition;
+        }
+            
+        switch (me.position) {
+            case 'top':
+                offsets = [0, -10];
+                align = 'b-t?';
+                break;
+            case 'bottom':
+                offsets = [0, 10];
+                align = 't-b?';
+                break;
+            case 'left':
+                offsets = [-10, 0];
+                align = 'r-l?';
+                break;
+            case 'right':
+                offsets = [10, 0];
+                align = 'l-r?';
+        }
+        
+        if (!me.align) {
+            me.align = align;
+        }
+        
+        if (!me.offsets) {
+            me.offsets = offsets;
+        }
+
+        slider.on({
+            scope    : me,
+            dragstart: me.onSlide,
+            drag     : me.onSlide,
+            dragend  : me.hide,
+            destroy  : me.destroy
+        });
+    },
+    /**
+     * @private
+     * Called whenever a dragstart or drag event is received on the associated Thumb.
+     * Aligns the Tip with the Thumb's new position.
+     * @param {Ext.slider.MultiSlider} slider The slider
+     * @param {Ext.EventObject} e The Event object
+     * @param {Ext.slider.Thumb} thumb The thumb that the Tip is attached to
+     */
+    onSlide : function(slider, e, thumb) {
+        var me = this;
+        me.show();
+        me.update(me.getText(thumb));
+        me.el.alignTo(thumb.el, me.align, me.offsets);
+    },
+
+    /**
+     * Used to create the text that appears in the Tip's body. By default this just returns the value of the Slider
+     * Thumb that the Tip is attached to. Override to customize.
+     * @param {Ext.slider.Thumb} thumb The Thumb that the Tip is attached to
+     * @return {String} The text to display in the tip
+     */
+    getText : function(thumb) {
+        return String(thumb.value);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/state/CookieProvider.js

@@ -0,0 +1,120 @@
+/**
+ * A Provider implementation which saves and retrieves state via cookies. The CookieProvider supports the usual cookie
+ * options, such as:
+ *
+ * - {@link #path}
+ * - {@link #expires}
+ * - {@link #domain}
+ * - {@link #secure}
+ *
+ * Example:
+ *
+ *     Ext.create('Ext.state.CookieProvider', {
+ *         path: "/cgi-bin/",
+ *         expires: new Date(new Date().getTime()+(1000*60*60*24*30)), //30 days
+ *         domain: "sencha.com"
+ *     });
+ *
+ *     Ext.state.Manager.setProvider(cp);
+ *
+ */
+Ext.define('Ext.state.CookieProvider', {
+    extend: 'Ext.state.Provider',
+
+    /**
+     * @cfg {String} path
+     * The path for which the cookie is active. Defaults to root '/' which makes it active for all pages in the site.
+     */
+
+    /**
+     * @cfg {Date} expires
+     * The cookie expiration date. Defaults to 7 days from now.
+     */
+
+    /**
+     * @cfg {String} domain
+     * The domain to save the cookie for. Note that you cannot specify a different domain than your page is on, but you can
+     * specify a sub-domain, or simply the domain itself like 'sencha.com' to include all sub-domains if you need to access
+     * cookies across different sub-domains. Defaults to null which uses the same domain the page is running on including
+     * the 'www' like 'www.sencha.com'.
+     */
+
+    /**
+     * @cfg {Boolean} [secure=false]
+     * True if the site is using SSL
+     */
+
+    /**
+     * Creates a new CookieProvider.
+     * @param {Object} [config] Config object.
+     */
+    constructor : function(config){
+        var me = this;
+        me.path = "/";
+        me.expires = new Date(new Date().getTime()+(1000*60*60*24*7)); //7 days
+        me.domain = null;
+        me.secure = false;
+        me.callParent(arguments);
+        me.state = me.readCookies();
+    },
+
+    // private
+    set : function(name, value){
+        var me = this;
+
+        if(typeof value == "undefined" || value === null){
+            me.clear(name);
+            return;
+        }
+        me.setCookie(name, value);
+        me.callParent(arguments);
+    },
+
+    // private
+    clear : function(name){
+        this.clearCookie(name);
+        this.callParent(arguments);
+    },
+
+    // private
+    readCookies : function(){
+        var cookies = {},
+            c = document.cookie + ";",
+            re = /\s?(.*?)=(.*?);/g,
+            prefix = this.prefix,
+            len = prefix.length,
+            matches,
+            name,
+            value;
+
+        while((matches = re.exec(c)) != null){
+            name = matches[1];
+            value = matches[2];
+            if (name && name.substring(0, len) == prefix){
+                cookies[name.substr(len)] = this.decodeValue(value);
+            }
+        }
+        return cookies;
+    },
+
+    // private
+    setCookie : function(name, value){
+        var me = this;
+
+        document.cookie = me.prefix + name + "=" + me.encodeValue(value) +
+           ((me.expires == null) ? "" : ("; expires=" + me.expires.toGMTString())) +
+           ((me.path == null) ? "" : ("; path=" + me.path)) +
+           ((me.domain == null) ? "" : ("; domain=" + me.domain)) +
+           ((me.secure == true) ? "; secure" : "");
+    },
+
+    // private
+    clearCookie : function(name){
+        var me = this;
+
+        document.cookie = me.prefix + name + "=null; expires=Thu, 01-Jan-70 00:00:01 GMT" +
+           ((me.path == null) ? "" : ("; path=" + me.path)) +
+           ((me.domain == null) ? "" : ("; domain=" + me.domain)) +
+           ((me.secure == true) ? "; secure" : "");
+    }
+});