git.roojs.org Git - roojs1/blob - Roo/bootstrap/NavProgressItem.js

   1 /*
   2  * - LGPL
   3  *
   4  * Nav Progress Item
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.NavProgressItem
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap NavProgressItem class
  12  * @cfg {Boolean} active (true|false) Is item active default false
  13  * @cfg {Boolean} disabled (true|false) Is item active default false
  14  * @cfg {String} html
  15  * @cfg {String} position (top|bottom) text position default bottom
  16  * @cfg {String} icon show icon instead of number
  17  *
  18  * @constructor
  19  * Create a new NavProgressItem
  20  * @param {Object} config The config object
  21  */
  22 Roo.bootstrap.NavProgressItem = function(config){
  23     Roo.bootstrap.NavProgressItem.superclass.constructor.call(this, config);
  24     this.addEvents({
  25         // raw events
  26         /**
  27          * @event click
  28          * The raw click event for the entire grid.
  29          * @param {Roo.bootstrap.NavProgressItem} this
  30          * @param {Roo.EventObject} e
  31          */
  32         "click" : true,
  33          /**
  34             * @event changed
  35             * Fires when the active item active state changes
  36             * @param {Roo.bootstrap.NavProgressItem} this
  37             * @param {boolean} state the new state
  38
  39          */
  40         'changed': true
  41     });
  42
  43 };
  44
  45 Roo.extend(Roo.bootstrap.NavProgressItem, Roo.bootstrap.Component,  {
  46
  47     active : false,
  48     disabled : false,
  49     html : '',
  50     position : 'bottom',
  51     icon : false,
  52
  53     getAutoCreate : function()
  54     {
  55
  56         var cfg = {
  57             tag: 'li',
  58             cls: 'roo-navigation-bar-item',
  59             cn : [
  60                 {
  61                     tag : 'i',
  62                     cls : 'roo-navigation-bar-item-icon ' + this.icon ? this.icon : ''
  63                 },
  64                 {
  65                     tag : 'span',
  66                     cls : 'roo-navigation-bar-item-text ' + this.position,
  67                     html : this.html
  68                 }
  69             ]
  70         }
  71
  72         if(this.active){
  73             cfg.cls += ' active';
  74         }
  75         if(this.disabled){
  76             cfg.cls += ' disabled';
  77         }
  78
  79         return cfg;
  80     },
  81
  82     initEvents: function()
  83     {
  84
  85     }
  86 //
  87 //    onClick : function(e)
  88 //    {
  89 //        if(
  90 //                this.preventDefault ||
  91 //                this.href == '#'
  92 //        ){
  93 //
  94 //            e.preventDefault();
  95 //        }
  96 //
  97 //        if (this.disabled) {
  98 //            return;
  99 //        }
 100 //
 101 //        var tg = Roo.bootstrap.TabGroup.get(this.navId);
 102 //        if (tg && tg.transition) {
 103 //            Roo.log("waiting for the transitionend");
 104 //            return;
 105 //        }
 106 //
 107 //
 108 //
 109 //        //Roo.log("fire event clicked");
 110 //        if(this.fireEvent('click', this, e) === false){
 111 //            return;
 112 //        };
 113 //
 114 //        if(this.tagtype == 'span'){
 115 //            return;
 116 //        }
 117 //
 118 //        //Roo.log(this.href);
 119 //        var ael = this.el.select('a',true).first();
 120 //        //Roo.log(ael);
 121 //
 122 //        if(ael && this.animateRef && this.href.indexOf('#') > -1){
 123 //            //Roo.log(["test:",ael.dom.href.split("#")[0], document.location.toString().split("#")[0]]);
 124 //            if (ael.dom.href.split("#")[0] != document.location.toString().split("#")[0]) {
 125 //                return; // ignore... - it's a 'hash' to another page.
 126 //            }
 127 //
 128 //            e.preventDefault();
 129 //            this.scrollToElement(e);
 130 //        }
 131 //
 132 //
 133 //        var p =  this.parent();
 134 //
 135 //        if (['tabs','pills'].indexOf(p.type)!==-1) {
 136 //            if (typeof(p.setActiveItem) !== 'undefined') {
 137 //                p.setActiveItem(this);
 138 //            }
 139 //        }
 140 //
 141 //        // if parent is a navbarheader....- and link is probably a '#' page ref.. then remove the expanded menu.
 142 //        if (p.parentType == 'NavHeaderbar' && !this.menu) {
 143 //            // remove the collapsed menu expand...
 144 //            p.parent().el.select('.navbar-collapse',true).removeClass('in');
 145 //        }
 146 //    },
 147 //
 148 //    isActive: function () {
 149 //        return this.active
 150 //    },
 151 //    setActive : function(state, fire, is_was_active)
 152 //    {
 153 //        if (this.active && !state && this.navId) {
 154 //            this.was_active = true;
 155 //            var nv = Roo.bootstrap.NavGroup.get(this.navId);
 156 //            if (nv) {
 157 //                nv.clearWasActive(this);
 158 //            }
 159 //
 160 //        }
 161 //        this.active = state;
 162 //
 163 //        if (!state ) {
 164 //            this.el.removeClass('active');
 165 //        } else if (!this.el.hasClass('active')) {
 166 //            this.el.addClass('active');
 167 //        }
 168 //        if (fire) {
 169 //            this.fireEvent('changed', this, state);
 170 //        }
 171 //
 172 //        // show a panel if it's registered and related..
 173 //
 174 //        if (!this.navId || !this.tabId || !state || is_was_active) {
 175 //            return;
 176 //        }
 177 //
 178 //        var tg = Roo.bootstrap.TabGroup.get(this.navId);
 179 //        if (!tg) {
 180 //            return;
 181 //        }
 182 //        var pan = tg.getPanelByName(this.tabId);
 183 //        if (!pan) {
 184 //            return;
 185 //        }
 186 //        // if we can not flip to new panel - go back to old nav highlight..
 187 //        if (false == tg.showPanel(pan)) {
 188 //            var nv = Roo.bootstrap.NavGroup.get(this.navId);
 189 //            if (nv) {
 190 //                var onav = nv.getWasActive();
 191 //                if (onav) {
 192 //                    onav.setActive(true, false, true);
 193 //                }
 194 //            }
 195 //
 196 //        }
 197 //
 198 //
 199 //
 200 //    },
 201 //     // this should not be here...
 202 //    setDisabled : function(state)
 203 //    {
 204 //        this.disabled = state;
 205 //        if (!state ) {
 206 //            this.el.removeClass('disabled');
 207 //        } else if (!this.el.hasClass('disabled')) {
 208 //            this.el.addClass('disabled');
 209 //        }
 210 //
 211 //    },
 212 //
 213 //    /**
 214 //     * Fetch the element to display the tooltip on.
 215 //     * @return {Roo.Element} defaults to this.el
 216 //     */
 217 //    tooltipEl : function()
 218 //    {
 219 //        return this.el.select('' + this.tagtype + '', true).first();
 220 //    },
 221 //
 222 //    scrollToElement : function(e)
 223 //    {
 224 //        var c = document.body;
 225 //
 226 //        /*
 227 //         * Firefox / IE places the overflow at the html level, unless specifically styled to behave differently.
 228 //         */
 229 //        if(Roo.isFirefox || Roo.isIE || Roo.isIE11){
 230 //            c = document.documentElement;
 231 //        }
 232 //
 233 //        var target = Roo.get(c).select('a[name=' + this.href.split('#')[1] +']', true).first();
 234 //
 235 //        if(!target){
 236 //            return;
 237 //        }
 238 //
 239 //        var o = target.calcOffsetsTo(c);
 240 //
 241 //        var options = {
 242 //            target : target,
 243 //            value : o[1]
 244 //        }
 245 //
 246 //        this.fireEvent('scrollto', this, options, e);
 247 //
 248 //        Roo.get(c).scrollTo('top', options.value, true);
 249 //
 250 //        return;
 251 //    }
 252 });
 253
 254
 255