ink_ui_rails 2.1.1.0

data/vendor/assets/javascripts/ink.progressbar.js

@@ -0,0 +1,110 @@
+/**
+ * @module Ink.UI.ProgressBar_1
+ * @author inkdev AT sapo.pt
+ * @version 1
+ */
+Ink.createModule('Ink.UI.ProgressBar', '1', ['Ink.Dom.Selector_1','Ink.Dom.Element_1'], function( Selector, Element ) {
+    'use strict';
+
+    /**
+     * Associated to a .ink-progress-bar element, it provides the necessary
+     * method - setValue() - for the user to change the element's value.
+     * 
+     * @class Ink.UI.ProgressBar
+     * @constructor
+     * @version 1
+     * @uses Ink.Dom.Selector
+     * @uses Ink.Dom.Element
+     * @param {String|DOMElement} selector
+     * @param {Object} [options] Options for the datepicker
+     *     @param {Number}     [options.startValue]          Percentage of the bar that is filled. Range between 0 and 100. Default: 0
+     *     @param {Function}   [options.onStart]             Callback that is called when a change of value is started
+     *     @param {Function}   [options.onEnd]               Callback that is called when a change of value ends
+     *
+     * @example
+     *      <div class="ink-progress-bar grey" data-start-value="70%">
+     *          <span class="caption">I am a grey progress bar</span>
+     *          <div class="bar grey"></div>
+     *      </div>
+     *      <script>
+     *          Ink.requireModules( ['Ink.Dom.Selector_1','Ink.UI.ProgressBar_1'], function( Selector, ProgressBar ){
+     *              var progressBarElement = Ink.s('.ink-progress-bar');
+     *              var progressBarObj = new ProgressBar( progressBarElement );
+     *          });
+     *      </script>
+     */
+    var ProgressBar = function( selector, options ){
+
+        if( typeof selector !== 'object' ){
+            if( typeof selector !== 'string' ){
+                throw '[Ink.UI.ProgressBar] :: Invalid selector';
+            } else {
+                this._element = Selector.select(selector);
+                if( this._element.length < 1 ){
+                    throw "[Ink.UI.ProgressBar] :: Selector didn't find any elements";
+                }
+                this._element = this._element[0];
+            }
+        } else {
+            this._element = selector;
+        }
+
+
+        this._options = Ink.extendObj({
+            'startValue': 0,
+            'onStart': function(){},
+            'onEnd': function(){}
+        },Element.data(this._element));
+
+        this._options = Ink.extendObj( this._options, options || {});
+        this._value = this._options.startValue;
+
+        this._init();
+    };
+
+    ProgressBar.prototype = {
+
+        /**
+         * Init function called by the constructor
+         * 
+         * @method _init
+         * @private
+         */
+        _init: function(){
+            this._elementBar = Selector.select('.bar',this._element);
+            if( this._elementBar.length < 1 ){
+                throw '[Ink.UI.ProgressBar] :: Bar element not found';
+            }
+            this._elementBar = this._elementBar[0];
+
+            this._options.onStart = Ink.bind(this._options.onStart,this);
+            this._options.onEnd = Ink.bind(this._options.onEnd,this);
+            this.setValue( this._options.startValue );
+        },
+
+        /**
+         * Sets the value of the Progressbar
+         * 
+         * @method setValue
+         * @param {Number} newValue Numeric value, between 0 and 100, that represents the percentage of the bar.
+         * @public
+         */
+        setValue: function( newValue ){
+            this._options.onStart( this._value);
+
+            newValue = parseInt(newValue,10);
+            if( isNaN(newValue) || (newValue < 0) ){
+                newValue = 0;
+            } else if( newValue>100 ){
+                newValue = 100;
+            }
+            this._value = newValue;
+            this._elementBar.style.width =  this._value + '%';
+
+            this._options.onEnd( this._value );
+        }
+    };
+
+    return ProgressBar;
+
+});

data/vendor/assets/javascripts/ink.smoothscroller.js

@@ -0,0 +1,234 @@
+/**
+ * @module Ink.UI.SmoothScroller_1
+ * @author inkdev AT sapo.pt
+ * @version 1
+ */
+Ink.createModule('Ink.UI.SmoothScroller', '1', ['Ink.Dom.Event_1','Ink.Dom.Selector_1','Ink.Dom.Loaded_1'], function(Event, Selector, Loaded ) {
+    'use strict';
+
+    /**
+     * @class Ink.UI.SmoothScroller
+     * @version 1
+     * @uses Ink.Dom.Event
+     * @uses Ink.Dom.Selector
+     * @uses Ink.Dom.Loaded
+     * @static
+     */
+    var SmoothScroller = {
+
+        /**
+         * Sets the speed of the scrolling
+         *
+         * @property
+         * @type {Number}
+         * @readOnly
+         * @static
+         */
+        speed: 10,
+
+        /**
+         * Returns the Y position of the div
+         *
+         * @method gy
+         * @param  {DOMElement} d DOMElement to get the Y position from
+         * @return {Number}   Y position of div 'd'
+         * @public
+         * @static
+         */
+        gy: function(d) {
+            var gy;
+            gy = d.offsetTop;
+            if (d.offsetParent){
+                while ( (d = d.offsetParent) ){
+                    gy += d.offsetTop;
+                }
+            }
+            return gy;
+        },
+
+
+        /**
+         * Returns the current scroll position
+         *
+         * @method scrollTop
+         * @return {Number}  Current scroll position
+         * @public
+         * @static
+         */
+        scrollTop: function() {
+            var
+                body = document.body,
+                d = document.documentElement
+            ;
+            if (body && body.scrollTop){
+                return body.scrollTop;
+            }
+            if (d && d.scrollTop){
+                return d.scrollTop;
+            }
+            if (window.pageYOffset)
+            {
+                return window.pageYOffset;
+            }
+            return 0;
+        },
+
+        /**
+         * Attaches an event for an element
+         *
+         * @method add
+         * @param  {DOMElement} el DOMElement to make the listening of the event
+         * @param  {String} event Event name to be listened
+         * @param  {DOMElement} fn Callback function to run when the event is triggered.
+         * @public
+         * @static
+         */
+        add: function(el, event, fn) {
+            Event.observe(el,event,fn);
+            return;
+        },
+
+
+        /**
+         * Kill an event of an element
+         *
+         * @method end
+         * @param  {String} e Event to be killed/stopped
+         * @public
+         * @static
+         */
+        // kill an event of an element
+        end: function(e) {
+            if (window.event) {
+                window.event.cancelBubble = true;
+                window.event.returnValue = false;
+                return;
+            }
+            Event.stop(e);
+        },
+
+
+        /**
+         * Moves the scrollbar to the target element
+         *
+         * @method scroll
+         * @param  {Number} d Y coordinate value to stop
+         * @public
+         * @static
+         */
+        scroll: function(d) {
+            var a = Ink.UI.SmoothScroller.scrollTop();
+            if (d > a) {
+                a += Math.ceil((d - a) / Ink.UI.SmoothScroller.speed);
+            } else {
+                a = a + (d - a) / Ink.UI.SmoothScroller.speed;
+            }
+
+            window.scrollTo(0, a);
+            if ((a) === d || Ink.UI.SmoothScroller.offsetTop === a)
+            {
+                clearInterval(Ink.UI.SmoothScroller.interval);
+            }
+            Ink.UI.SmoothScroller.offsetTop = a;
+        },
+
+
+        /**
+         * Initializer that adds the rendered to run when the page is ready
+         *
+         * @method init
+         * @public
+         * @static
+         */
+        // initializer that adds the renderer to the onload function of the window
+        init: function() {
+            Loaded.run(Ink.UI.SmoothScroller.render);
+        },
+
+        /**
+         * This method extracts all the anchors and validates thenm as # and attaches the events
+         *
+         * @method render
+         * @public
+         * @static
+         */
+        render: function() {
+            var a = Selector.select('a.scrollableLink');
+
+            Ink.UI.SmoothScroller.end(this);
+
+            for (var i = 0; i < a.length; i++) {
+                var _elm = a[i];
+                if (_elm.href && _elm.href.indexOf('#') !== -1 && ((_elm.pathname === location.pathname) || ('/' + _elm.pathname === location.pathname))) {
+                    Ink.UI.SmoothScroller.add(_elm, 'click', Ink.UI.SmoothScroller.end);
+                    Event.observe(_elm,'click', Ink.bindEvent(Ink.UI.SmoothScroller.clickScroll, this, _elm));
+                }
+            }
+        },
+
+
+        /**
+         * Click handler
+         *
+         * @method clickScroll
+         * @public
+         * @static
+         */
+        clickScroll: function(event, _elm) {
+            /*
+            Ink.UI.SmoothScroller.end(this);
+            var hash = this.hash.substr(1);
+            var elm = Selector.select('a[name="' + hash + '"],#' + hash);
+
+            if (typeof(elm[0]) !== 'undefined') {
+
+                if (this.parentNode.className.indexOf('active') === -1) {
+                    var ul = this.parentNode.parentNode,
+                        li = ul.firstChild;
+                    do {
+                        if ((typeof(li.tagName) !== 'undefined') && (li.tagName.toUpperCase() === 'LI') && (li.className.indexOf('active') !== -1)) {
+                            li.className = li.className.replace('active', '');
+                            break;
+                        }
+                    } while ((li = li.nextSibling));
+                    this.parentNode.className += " active";
+                }
+                clearInterval(Ink.UI.SmoothScroller.interval);
+                Ink.UI.SmoothScroller.interval = setInterval('Ink.UI.SmoothScroller.scroll(' + Ink.UI.SmoothScroller.gy(elm[0]) + ')', 10);
+
+            }
+            */
+            Ink.UI.SmoothScroller.end(_elm);
+            if(_elm !== null && _elm.getAttribute('href') !== null) {
+                var hashIndex = _elm.href.indexOf('#');
+                if(hashIndex === -1) {
+                    return;
+                }
+                var hash = _elm.href.substr((hashIndex + 1));
+                var elm = Selector.select('a[name="' + hash + '"],#' + hash);
+
+                if (typeof(elm[0]) !== 'undefined') {
+
+                    if (_elm.parentNode.className.indexOf('active') === -1) {
+                        var ul = _elm.parentNode.parentNode,
+                            li = ul.firstChild;
+                        do {
+                            if ((typeof(li.tagName) !== 'undefined') && (li.tagName.toUpperCase() === 'LI') && (li.className.indexOf('active') !== -1)) {
+                                li.className = li.className.replace('active', '');
+                                break;
+                            }
+                        } while ((li = li.nextSibling));
+                        _elm.parentNode.className += " active";
+                    }
+                    clearInterval(Ink.UI.SmoothScroller.interval);
+                    Ink.UI.SmoothScroller.interval = setInterval('Ink.UI.SmoothScroller.scroll(' + Ink.UI.SmoothScroller.gy(elm[0]) + ')', 10);
+
+                }
+            }
+
+        }
+    };
+
+    return SmoothScroller;
+
+});

data/vendor/assets/javascripts/ink.sortablelist.js

@@ -0,0 +1,338 @@
+/**
+ * @module Ink.UI.SortableList_1
+ * @author inkdev AT sapo.pt
+ * @version 1
+ */
+Ink.createModule('Ink.UI.SortableList', '1', ['Ink.UI.Aux_1','Ink.Dom.Event_1','Ink.Dom.Css_1','Ink.Dom.Element_1','Ink.Dom.Selector_1','Ink.Util.Array_1'], function(Aux, Event, Css, Element, Selector, InkArray ) {
+    'use strict';
+
+    /**
+     * Adds sortable behaviour to any list!
+     * 
+     * @class Ink.UI.SortableList
+     * @constructor
+     * @version 1
+     * @uses Ink.UI.Aux
+     * @uses Ink.Dom.Event
+     * @uses Ink.Dom.Css
+     * @uses Ink.Dom.Element
+     * @uses Ink.Dom.Selector
+     * @uses Ink.Util.Array
+     * @param {String|DOMElement} selector
+     * @param {Object} [options] Options for the datepicker
+     *     @param {String} [options.dragObject] CSS Selector. The element that will trigger the dragging in the list. Default is 'li'.
+     * @example
+     *      <ul class="unstyled ink-sortable-list" id="slist" data-instance="sortableList9">
+     *          <li><span class="ink-label info"><i class="icon-reorder"></i>drag here</span>primeiro</li>
+     *          <li><span class="ink-label info"><i class="icon-reorder"></i>drag here</span>segundo</li>
+     *          <li><span class="ink-label info"><i class="icon-reorder"></i>drag here</span>terceiro</li>
+     *      </ul>
+     *      <script>
+     *          Ink.requireModules( ['Ink.Dom.Selector_1','Ink.UI.SortableList_1'], function( Selector, SortableList ){
+     *              var sortableListElement = Ink.s('.ink-sortable-list');
+     *              var sortableListObj = new SortableList( sortableListElement );
+     *          });
+     *      </script>
+     */
+    var SortableList = function(selector, options) {
+
+        this._element = Aux.elOrSelector(selector, '1st argument');
+
+        if( !Aux.isDOMElement(selector) && (typeof selector !== 'string') ){
+            throw '[Ink.UI.SortableList] :: Invalid selector';
+        } else if( typeof selector === 'string' ){
+            this._element = Ink.Dom.Selector.select( selector );
+
+            if( this._element.length < 1 ){
+                throw '[Ink.UI.SortableList] :: Selector has returned no elements';
+            }
+            this._element = this._element[0];
+
+        } else {
+            this._element = selector;
+        }
+
+        this._options = Ink.extendObj({
+            dragObject: 'li'
+        }, Ink.Dom.Element.data(this._element));
+
+        this._options = Ink.extendObj( this._options, options || {});
+
+        this._handlers = {
+            down: Ink.bindEvent(this._onDown,this),
+            move: Ink.bindEvent(this._onMove,this),
+            up:   Ink.bindEvent(this._onUp,this)
+        };
+
+        this._model = [];
+        this._index = undefined;
+        this._isMoving = false;
+
+        if (this._options.model instanceof Array) {
+            this._model = this._options.model;
+            this._createdFrom = 'JSON';
+        }
+        else if (this._element.nodeName.toLowerCase() === 'ul') {
+            this._createdFrom = 'DOM';
+        }
+        else {
+            throw new TypeError('You must pass a selector expression/DOM element as 1st option or provide a model on 2nd argument!');
+        }
+
+
+        this._dragTriggers = Selector.select( this._options.dragObject, this._element );
+        if( !this._dragTriggers ){
+            throw "[Ink.UI.SortableList] :: Drag object not found";
+        }
+
+        this._init();
+    };
+
+    SortableList.prototype = {
+
+        /**
+         * Init function called by the constructor.
+         * 
+         * @method _init
+         * @private
+         */
+        _init: function() {
+            // extract model
+            if (this._createdFrom === 'DOM') {
+                this._extractModelFromDOM();
+                this._createdFrom = 'JSON';
+            }
+
+            var isTouch = 'ontouchstart' in document.documentElement;
+
+            this._down = isTouch ? 'touchstart': 'mousedown';
+            this._move = isTouch ? 'touchmove' : 'mousemove';
+            this._up   = isTouch ? 'touchend'  : 'mouseup';
+
+            // subscribe events
+            var db = document.body;
+            Event.observe(db, this._move, this._handlers.move);
+            Event.observe(db, this._up,   this._handlers.up);
+            this._observe();
+
+            Aux.registerInstance(this, this._element, 'sortableList');
+        },
+
+        /**
+         * Sets the event handlers.
+         * 
+         * @method _observe
+         * @private
+         */
+        _observe: function() {
+            Event.observe(this._element, this._down, this._handlers.down);
+        },
+
+        /**
+         * Updates the model from the UL representation
+         * 
+         * @method _extractModelFromDOM
+         * @private
+         */
+        _extractModelFromDOM: function() {
+            this._model = [];
+            var that = this;
+
+            var liEls = Selector.select('> li', this._element);
+
+            InkArray.each(liEls,function(liEl) {
+                //var t = Element.getChildrenText(liEl);
+                var t = liEl.innerHTML;
+                that._model.push(t);
+            });
+        },
+
+        /**
+         * Returns the top element for the gallery DOM representation
+         * 
+         * @method _generateMarkup
+         * @return {DOMElement}
+         * @private
+         */
+        _generateMarkup: function() {
+            var el = document.createElement('ul');
+            el.className = 'unstyled ink-sortable-list';
+            var that = this;
+
+            InkArray.each(this._model,function(label, idx) {
+                var liEl = document.createElement('li');
+                if (idx === that._index) {
+                    liEl.className = 'drag';
+                }
+                liEl.innerHTML = [
+                    // '<span class="ink-label ink-info"><i class="icon-reorder"></i>', that._options.dragLabel, '</span>', label
+                    label
+                ].join('');
+                el.appendChild(liEl);
+            });
+
+            return el;
+        },
+
+        /**
+         * Extracts the Y coordinate of the mouse from the given MouseEvent
+         * 
+         * @method _getY
+         * @param  {Event} ev
+         * @return {Number}
+         * @private
+         */
+        _getY: function(ev) {
+            if (ev.type.indexOf('touch') === 0) {
+                //console.log(ev.type, ev.changedTouches[0].pageY);
+                return ev.changedTouches[0].pageY;
+            }
+            if (typeof ev.pageY === 'number') {
+                return ev.pageY;
+            }
+            return ev.clientY;
+        },
+
+        /**
+         * Refreshes the markup.
+         * 
+         * @method _refresh
+         * @param {Boolean} skipObs True if needs to set the event handlers, false if not.
+         * @private
+         */
+        _refresh: function(skipObs) {
+            var el = this._generateMarkup();
+            this._element.parentNode.replaceChild(el, this._element);
+            this._element = el;
+
+            Aux.restoreIdAndClasses(this._element, this);
+
+            this._dragTriggers = Selector.select( this._options.dragObject, this._element );
+
+            // subscribe events
+            if (!skipObs) { this._observe(); }
+        },
+
+        /**
+         * Mouse down handler
+         * 
+         * @method _onDown
+         * @param {Event} ev
+         * @return {Boolean|undefined} [description]
+         * @private
+         */
+        _onDown: function(ev) {
+            if (this._isMoving) { return; }
+            var tgtEl = Event.element(ev);
+
+            if( !InkArray.inArray(tgtEl,this._dragTriggers) ){
+                while( !InkArray.inArray(tgtEl,this._dragTriggers) && (tgtEl.nodeName.toLowerCase() !== 'body') ){
+                    tgtEl = tgtEl.parentNode;
+                }
+
+                if( tgtEl.nodeName.toLowerCase() === 'body' ){
+                    return;
+                }
+            }
+
+            Event.stop(ev);
+
+            var liEl;
+            if( tgtEl.nodeName.toLowerCase() !== 'li' ){
+                while( (tgtEl.nodeName.toLowerCase() !== 'li') && (tgtEl.nodeName.toLowerCase() !== 'body') ){
+                    tgtEl = tgtEl.parentNode;
+                }
+            }
+            liEl = tgtEl;
+
+            this._index = Aux.childIndex(liEl);
+            this._height = liEl.offsetHeight;
+            this._startY = this._getY(ev);
+            this._isMoving = true;
+
+            document.body.style.cursor = 'move';
+
+            this._refresh(false);
+
+            return false;
+        },
+
+        /**
+         * Mouse move handler
+         * 
+         * @method _onMove
+         * @param {Event} ev
+         * @private
+         */
+        _onMove: function(ev) {
+            if (!this._isMoving) { return; }
+            Event.stop(ev);
+
+            var y = this._getY(ev);
+            //console.log(y);
+            var dy = y - this._startY;
+            var sign = dy > 0 ? 1 : -1;
+            var di = sign * Math.floor( Math.abs(dy) / this._height );
+            if (di === 0) { return; }
+            di = di / Math.abs(di);
+            if ( (di === -1 && this._index === 0) ||
+                 (di === 1 && this._index === this._model.length - 1) ) { return; }
+
+            var a = di > 0 ? this._index : this._index + di;
+            var b = di < 0 ? this._index : this._index + di;
+            //console.log(a, b);
+            this._model.splice(a, 2, this._model[b], this._model[a]);
+            this._index += di;
+            this._startY = y;
+
+            this._refresh(false);
+        },
+
+        /**
+         * Mouse up handler
+         * 
+         * @method _onUp
+         * @param {Event} ev
+         * @private
+         */
+        _onUp: function(ev) {
+            if (!this._isMoving) { return; }
+            Event.stop(ev);
+
+            this._index = undefined;
+            this._isMoving = false;
+            document.body.style.cursor = '';
+
+            this._refresh();
+        },
+
+
+
+        /**************
+         * PUBLIC API *
+         **************/
+
+        /**
+         * Returns a copy of the model
+         * 
+         * @method getModel
+         * @return {Array} Copy of the model
+         * @public
+         */
+        getModel: function() {
+            return this._model.slice();
+        },
+
+        /**
+         * Unregisters the component and removes its markup from the DOM
+         * 
+         * @method destroy
+         * @public
+         */
+        destroy: Aux.destroyComponent
+
+    };
+
+    return SortableList;
+
+});