ink_ui_rails 2.1.1.0

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

@@ -0,0 +1,426 @@
+/**
+ * @module Ink.UI.Tabs_1
+ * @author inkdev AT sapo.pt
+ * @version 1
+ */
+Ink.createModule('Ink.UI.Tabs', '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';
+
+    /**
+     * Tabs component
+     * 
+     * @class Ink.UI.Tabs
+     * @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 {Boolean}      [options.preventUrlChange]        Flag that determines if follows the link on click or stops the event
+     *     @param {String}       [options.active]                  ID of the tab to activate on creation
+     *     @param {Array}        [options.disabled]                IDs of the tabs that will be disabled on creation
+     *     @param {Function}     [options.onBeforeChange]          callback to be executed before changing tabs
+     *     @param {Function}     [options.onChange]                callback to be executed after changing tabs
+     * @example
+     *      <div class="ink-tabs top"> <!-- replace 'top' with 'bottom', 'left' or 'right' to place navigation -->
+     *          
+     *          <!-- put navigation first if using top, left or right positioning -->
+     *          <ul class="tabs-nav">
+     *              <li><a href="#home">Home</a></li>
+     *              <li><a href="#news">News</a></li>
+     *              <li><a href="#description">Description</a></li>
+     *              <li><a href="#stuff">Stuff</a></li>
+     *              <li><a href="#more_stuff">More stuff</a></li>
+     *          </ul>
+     *          
+     *          <!-- Put your content second if using top, left or right navigation -->
+     *          <div id="home" class="tabs-content"><p>Content</p></div>
+     *          <div id="news" class="tabs-content"><p>Content</p></div>
+     *          <div id="description" class="tabs-content"><p>Content</p></div>
+     *          <div id="stuff" class="tabs-content"><p>Content</p></div>
+     *          <div id="more_stuff" class="tabs-content"><p>Content</p></div>
+     *          <!-- If you're using bottom navigation, switch the nav block with the content blocks -->
+     *       
+     *      </div>
+     *      <script>
+     *          Ink.requireModules( ['Ink.Dom.Selector_1','Ink.UI.Tabs_1'], function( Selector, Tabs ){
+     *              var tabsElement = Ink.s('.ink-tabs');
+     *              var tabsObj = new Tabs( tabsElement );
+     *          });
+     *      </script>
+     */
+    var Tabs = function(selector, options) {
+
+        if (!Aux.isDOMElement(selector)) {
+            selector = Selector.select(selector);
+            if (selector.length === 0) { throw new TypeError('1st argument must either be a DOM Element or a selector expression!'); }
+            this._element = selector[0];
+        } else {
+            this._element = selector;
+        }
+
+
+        this._options = Ink.extendObj({
+            preventUrlChange: false,
+            active: undefined,
+            disabled: [],
+            onBeforeChange: undefined,
+            onChange: undefined
+        }, Element.data(selector));
+
+        this._options = Ink.extendObj(this._options,options || {});
+
+        this._handlers = {
+            tabClicked: Ink.bindEvent(this._onTabClicked,this),
+            disabledTabClicked: Ink.bindEvent(this._onDisabledTabClicked,this),
+            resize: Ink.bindEvent(this._onResize,this)
+        };
+
+        this._init();
+    };
+
+    Tabs.prototype = {
+
+        /**
+         * Init function called by the constructor
+         * 
+         * @method _init
+         * @private
+         */
+        _init: function() {
+            this._menu = Selector.select('.tabs-nav', this._element)[0];
+            this._menuTabs = this._getChildElements(this._menu);
+            this._contentTabs = Selector.select('.tabs-content', this._element);
+
+            //initialization of the tabs, hides all content before setting the active tab
+            this._initializeDom();
+
+            // subscribe events
+            this._observe();
+
+            //sets the first active tab
+            this._setFirstActive();
+
+            //shows the active tab
+            this._changeTab(this._activeMenuLink);
+
+            this._handlers.resize();
+
+            Aux.registerInstance(this, this._element, 'tabs');
+        },
+
+        /**
+         * Initialization of the tabs, hides all content before setting the active tab
+         * 
+         * @method _initializeDom
+         * @private
+         */
+        _initializeDom: function(){
+            for(var i = 0; i < this._contentTabs.length; i++){
+                Css.hide(this._contentTabs[i]);
+            }
+        },
+
+        /**
+         * Subscribe events
+         * 
+         * @method _observe
+         * @private
+         */
+        _observe: function() {
+            InkArray.each(this._menuTabs,Ink.bind(function(elem){
+                var link = Selector.select('a', elem)[0];
+                if(InkArray.inArray(link.getAttribute('href'), this._options.disabled)){
+                    this.disable(link);
+                } else {
+                    this.enable(link);
+                }
+            },this));
+
+            Event.observe(window, 'resize', this._handlers.resize);
+        },
+
+        /**
+         * Run at instantiation, to determine which is the first active tab
+         * fallsback from window.location.href to options.active to the first not disabled tab
+         * 
+         * @method _setFirstActive
+         * @private
+         */
+        _setFirstActive: function() {
+            var hash = window.location.hash;
+            this._activeContentTab = Selector.select(hash, this._element)[0] ||
+                                     Selector.select(this._hashify(this._options.active), this._element)[0] ||
+                                     Selector.select('.tabs-content', this._element)[0];
+
+            this._activeMenuLink = this._findLinkByHref(this._activeContentTab.getAttribute('id'));
+            this._activeMenuTab = this._activeMenuLink.parentNode;
+        },
+
+        /**
+         * Changes to the desired tab
+         * 
+         * @method _changeTab
+         * @param {DOMElement} link             anchor linking to the content container
+         * @param {boolean}    runCallbacks     defines if the callbacks should be run or not
+         * @private
+         */
+        _changeTab: function(link, runCallbacks){
+            if(runCallbacks && typeof this._options.onBeforeChange !== 'undefined'){
+                this._options.onBeforeChange(this);
+            }
+
+            var selector = link.getAttribute('href');
+            Css.removeClassName(this._activeMenuTab, 'active');
+            Css.removeClassName(this._activeContentTab, 'active');
+            Css.addClassName(this._activeContentTab, 'hide-all');
+
+            this._activeMenuLink = link;
+            this._activeMenuTab = this._activeMenuLink.parentNode;
+            this._activeContentTab = Selector.select(selector.substr(selector.indexOf('#')), this._element)[0];
+
+            Css.addClassName(this._activeMenuTab, 'active');
+            Css.addClassName(this._activeContentTab, 'active');
+            Css.removeClassName(this._activeContentTab, 'hide-all');
+            Css.show(this._activeContentTab);
+
+            if(runCallbacks && typeof(this._options.onChange) !== 'undefined'){
+                this._options.onChange(this);
+            }
+        },
+
+        /**
+         * Tab clicked handler
+         * 
+         * @method _onTabClicked
+         * @param {Event} ev
+         * @private
+         */
+        _onTabClicked: function(ev) {
+            Event.stop(ev);
+
+            var target = Event.findElement(ev, 'A');
+            if(target.nodeName.toLowerCase() !== 'a') {
+                return;
+            }
+
+            if( this._options.preventUrlChange.toString() !== 'true'){
+                window.location.hash = target.getAttribute('href').substr(target.getAttribute('href').indexOf('#'));
+            }
+
+            if(target === this._activeMenuLink){
+                return;
+            }
+            this.changeTab(target);
+        },
+
+        /**
+         * Disabled tab clicked handler
+         * 
+         * @method _onDisabledTabClicked
+         * @param {Event} ev
+         * @private
+         */
+        _onDisabledTabClicked: function(ev) {
+            Event.stop(ev);
+        },
+
+        /**
+         * Resize handler
+         * 
+         * @method _onResize
+         * @private
+         */
+        _onResize: function(){
+            var currentLayout = Aux.currentLayout();
+            if(currentLayout === this._lastLayout){
+                return;
+            }
+
+            if(currentLayout === Aux.Layouts.SMALL || currentLayout === Aux.Layouts.MEDIUM){
+                Css.removeClassName(this._menu, 'menu');
+                Css.removeClassName(this._menu, 'horizontal');
+                // Css.addClassName(this._menu, 'pills');
+            } else {
+                Css.addClassName(this._menu, 'menu');
+                Css.addClassName(this._menu, 'horizontal');
+                // Css.removeClassName(this._menu, 'pills');
+            }
+            this._lastLayout = currentLayout;
+        },
+
+        /*****************
+         * Aux Functions *
+         *****************/
+
+        /**
+         * Allows the hash to be passed with or without the cardinal sign
+         * 
+         * @method _hashify
+         * @param {String} hash     the string to be hashified
+         * @return {String} Resulting hash
+         * @private
+         */
+        _hashify: function(hash){
+            if(!hash){
+                return "";
+            }
+            return hash.indexOf('#') === 0? hash : '#' + hash;
+        },
+
+        /**
+         * Returns the anchor with the desired href
+         * 
+         * @method _findLinkBuHref
+         * @param {String} href     the href to be found on the returned link
+         * @return {String|undefined} [description]
+         * @private
+         */
+        _findLinkByHref: function(href){
+            href = this._hashify(href);
+            var ret;
+            InkArray.each(this._menuTabs,Ink.bind(function(elem){
+                var link = Selector.select('a', elem)[0];
+                if( (link.getAttribute('href').indexOf('#') !== -1) && ( link.getAttribute('href').substr(link.getAttribute('href').indexOf('#')) === href ) ){
+                    ret = link;
+                }
+            },this));
+            return ret;
+        },
+
+        /**
+         * Returns the child elements of a given parent element
+         * 
+         * @method _getChildElements
+         * @param {DOMElement} parent  DOMElement to fetch the child elements from.
+         * @return {Array}  Child elements of the given parent.
+         * @private
+         */
+        _getChildElements: function(parent){
+            var childNodes = [];
+            var children = parent.children;
+            for(var i = 0; i < children.length; i++){
+                if(children[i].nodeType === 1){
+                    childNodes.push(children[i]);
+                }
+            }
+            return childNodes;
+        },
+
+        /**************
+         * PUBLIC API *
+         **************/
+
+        /**
+         * Changes to the desired tag
+         * 
+         * @method changeTab
+         * @param {String|DOMElement} selector      the id of the desired tab or the link that links to it
+         * @public
+         */
+        changeTab: function(selector) {
+            var element = (selector.nodeType === 1)? selector : this._findLinkByHref(this._hashify(selector));
+            if(!element || Css.hasClassName(element, 'ink-disabled')){
+                return;
+            }
+            this._changeTab(element, true);
+        },
+
+        /**
+         * Disables the desired tag
+         * 
+         * @method disable
+         * @param {String|DOMElement} selector      the id of the desired tab or the link that links to it
+         * @public
+         */
+        disable: function(selector){
+            var element = (selector.nodeType === 1)? selector : this._findLinkByHref(this._hashify(selector));
+            if(!element){
+                return;
+            }
+            Event.stopObserving(element, 'click', this._handlers.tabClicked);
+            Event.observe(element, 'click', this._handlers.disabledTabClicked);
+            Css.addClassName(element, 'ink-disabled');
+        },
+
+         /**
+         * Enables the desired tag
+         * 
+         * @method enable
+         * @param {String|DOMElement} selector      the id of the desired tab or the link that links to it
+         * @public
+         */
+        enable: function(selector){
+            var element = (selector.nodeType === 1)? selector : this._findLinkByHref(this._hashify(selector));
+            if(!element){
+                return;
+            }
+            Event.stopObserving(element, 'click', this._handlers.disabledTabClicked);
+            Event.observe(element, 'click', this._handlers.tabClicked);
+            Css.removeClassName(element, 'ink-disabled');
+        },
+
+        /***********
+         * Getters *
+         ***********/
+
+        /**
+         * Returns the active tab id
+         * 
+         * @method activeTab
+         * @return {String} ID of the active tab.
+         * @public
+         */
+        activeTab: function(){
+            return this._activeContentTab.getAttribute('id');
+        },
+
+        /**
+         * Returns the current active Menu LI
+         * 
+         * @method activeMenuTab
+         * @return {DOMElement} Active menu LI.
+         * @public
+         */
+        activeMenuTab: function(){
+            return this._activeMenuTab;
+        },
+
+        /**
+         * Returns the current active Menu anchorChanges to the desired tag
+         * 
+         * @method activeMenuLink
+         * @return {DOMElement} Active menu link
+         * @public
+         */
+        activeMenuLink: function(){
+            return this._activeMenuLink;
+        },
+
+        /**
+         * Returns the current active Content Tab
+         * 
+         * @method activeContentTab
+         * @return {DOMElement} Active Content Tab
+         * @public
+         */
+        activeContentTab: function(){
+            return this._activeContentTab;
+        },
+
+        /**
+         * Unregisters the component and removes its markup from the DOM
+         * 
+         * @method destroy
+         * @public
+         */
+        destroy: Aux.destroyComponent
+    };
+
+    return Tabs;
+
+});

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

@@ -0,0 +1,218 @@
+/**
+00 * @module Ink.UI.Toggle_1
+ * @author inkdev AT sapo.pt
+ * @version 1
+ */
+Ink.createModule('Ink.UI.Toggle', '1', ['Ink.UI.Aux_1','Ink.Dom.Event_1','Ink.Dom.Css_1','Ink.Dom.Element_1','Ink.Dom.Selector_1'], function(Aux, Event, Css, Element, Selector ) {
+    'use strict';
+
+    /**
+     * Toggle component
+     * 
+     * @class Ink.UI.Toggle
+     * @constructor
+     * @version 1
+     * @uses Ink.UI.Aux
+     * @uses Ink.Dom.Event
+     * @uses Ink.Dom.Css
+     * @uses Ink.Dom.Element
+     * @uses Ink.Dom.Selector
+     * @param {String|DOMElement} selector
+     * @param {Object} [options] Options
+     *     @param {String}       options.target                    CSS Selector that specifies the elements that will toggle
+     *     @param {String}       [options.triggerEvent]            Event that will trigger the toggling. Default is 'click'
+     *     @param {Boolean}      [options.closeOnClick]            Flag that determines if, when clicking outside of the toggled content, it should hide it. Default: true.
+     * @example
+     *      <div class="ink-dropdown">
+     *          <button class="ink-button toggle" data-target="#dropdown">Dropdown <span class="icon-caret-down"></span></button>
+     *          <ul id="dropdown" class="dropdown-menu">
+     *              <li class="heading">Heading</li>
+     *              <li class="separator-above"><a href="#">Option</a></li>
+     *              <li><a href="#">Option</a></li>
+     *              <li class="separator-above disabled"><a href="#">Disabled option</a></li>
+     *              <li class="submenu">
+     *                  <a href="#" class="toggle" data-target="#submenu1">A longer option name</a>
+     *                  <ul id="submenu1" class="dropdown-menu">
+     *                      <li class="submenu">
+     *                          <a href="#" class="toggle" data-target="#ultrasubmenu">Sub option</a>
+     *                          <ul id="ultrasubmenu" class="dropdown-menu">
+     *                              <li><a href="#">Sub option</a></li>
+     *                              <li><a href="#" data-target="ultrasubmenu">Sub option</a></li>
+     *                              <li><a href="#">Sub option</a></li>
+     *                          </ul>
+     *                      </li>
+     *                      <li><a href="#">Sub option</a></li>
+     *                      <li><a href="#">Sub option</a></li>
+     *                  </ul>
+     *              </li>
+     *              <li><a href="#">Option</a></li>
+     *          </ul>
+     *      </div>
+     *      <script>
+     *          Ink.requireModules( ['Ink.Dom.Selector_1','Ink.UI.Toggle_1'], function( Selector, Toggle ){
+     *              var toggleElement = Ink.s('.toggle');
+     *              var toggleObj = new Toggle( toggleElement );
+     *          });
+     *      </script>
+     */
+    var Toggle = function( selector, options ){
+
+        if( typeof selector !== 'string' && typeof selector !== 'object' ){
+            throw '[Ink.UI.Toggle] Invalid CSS selector to determine the root element';
+        }
+
+        if( typeof selector === 'string' ){
+            this._rootElement = Selector.select( selector );
+            if( this._rootElement.length <= 0 ){
+                throw '[Ink.UI.Toggle] Root element not found';
+            }
+
+            this._rootElement = this._rootElement[0];
+        } else {
+            this._rootElement = selector;
+        }
+
+        this._options = Ink.extendObj({
+            target : undefined,
+            triggerEvent: 'click',
+            closeOnClick: true
+        },Element.data(this._rootElement));
+
+        this._options = Ink.extendObj(this._options,options || {});
+
+        if( typeof this._options.target === 'undefined' ){
+            throw '[Ink.UI.Toggle] Target option not defined';
+        }
+
+        this._childElement = Aux.elOrSelector( this._options.target, 'Target' );
+        // this._childElement = Selector.select( this._options.target, this._rootElement );
+        // if( this._childElement.length <= 0 ){
+        //     if( this._childElement.length <= 0 ){
+        //         this._childElement = Selector.select( this._options.target, this._rootElement.parentNode );
+        //     }
+
+        //     if( this._childElement.length <= 0 ){
+        //         this._childElement = Selector.select( this._options.target );
+        //     }
+
+        //     if( this._childElement.length <= 0 ){
+        //         return;
+        //     }
+        // }
+        // this._childElement = this._childElement[0];
+
+        this._init();
+
+    };
+
+    Toggle.prototype = {
+
+        /**
+         * Init function called by the constructor
+         * 
+         * @method _init
+         * @private
+         */
+        _init: function(){
+
+            this._accordion = ( Css.hasClassName(this._rootElement.parentNode,'accordion') || Css.hasClassName(this._childElement.parentNode,'accordion') );
+
+            Event.observe( this._rootElement, this._options.triggerEvent, Ink.bindEvent(this._onTriggerEvent,this) );
+            if( this._options.closeOnClick.toString() === 'true' ){
+                Event.observe( document, 'click', Ink.bindEvent(this._onClick,this));
+            }
+        },
+
+        /**
+         * Event handler. It's responsible for handling the <triggerEvent> defined in the options.
+         * This will trigger the toggle.
+         * 
+         * @method _onTriggerEvent
+         * @param {Event} event
+         * @private
+         */
+        _onTriggerEvent: function( event ){
+
+            if( this._accordion ){
+                var elms, i, accordionElement;
+                if( Css.hasClassName(this._childElement.parentNode,'accordion') ){
+                    accordionElement = this._childElement.parentNode;
+                } else {
+                    accordionElement = this._childElement.parentNode.parentNode;
+                }
+                elms = Selector.select('.toggle',accordionElement);
+                for( i=0; i<elms.length; i+=1 ){
+                    var
+                        dataset = Element.data( elms[i] ),
+                        targetElm = Selector.select( dataset.target,accordionElement )
+                    ;
+                    if( (targetElm.length > 0) && (targetElm[0] !== this._childElement) ){
+                            targetElm[0].style.display = 'none';
+                    }
+                }
+            }
+
+            var finalClass = ( Css.getStyle(this._childElement,'display') === 'none') ? 'show-all' : 'hide-all';
+            var finalDisplay = ( Css.getStyle(this._childElement,'display') === 'none') ? 'block' : 'none';
+            Css.removeClassName(this._childElement,'show-all');
+            Css.removeClassName(this._childElement, 'hide-all');
+            Css.addClassName(this._childElement, finalClass);
+            this._childElement.style.display = finalDisplay;
+
+            if( finalClass === 'show-all' ){
+                Css.addClassName(this._rootElement,'active');
+            } else {
+                Css.removeClassName(this._rootElement,'active');
+            }
+        },
+
+        /**
+         * Click handler. Will handle clicks outside the toggle component.
+         * 
+         * @method _onClick
+         * @param {Event} event
+         * @private
+         */
+        _onClick: function( event ){
+            var
+                tgtEl = Event.element(event),
+                shades
+            ;
+
+            if( (this._rootElement === tgtEl) || Element.isAncestorOf( this._rootElement, tgtEl ) || Element.isAncestorOf( this._childElement, tgtEl ) ){
+                return;
+            } else if( (shades = Ink.ss('.ink-shade')).length ) {
+                var
+                    shadesLength = shades.length
+                ;
+
+                for( var i = 0; i < shadesLength; i++ ){
+                    if( Element.isAncestorOf(shades[i],tgtEl) && Element.isAncestorOf(shades[i],this._rootElement) ){
+                        return;
+                    }
+                }
+            }
+            
+            this._dismiss( this._rootElement );
+        },
+
+        /**
+         * Dismisses the toggling.
+         * 
+         * @method _dismiss
+         * @private
+         */
+        _dismiss: function( ){
+            if( ( Css.getStyle(this._childElement,'display') === 'none') ){
+                return;
+            }
+            Css.removeClassName(this._childElement, 'show-all');
+            Css.removeClassName(this._rootElement,'active');
+            Css.addClassName(this._childElement, 'hide-all');
+            this._childElement.style.display = 'none';
+        }
+    };
+
+    return Toggle;
+
+});