sync
[roojs1] / roojs-bootstrap-debug.js
index c3158bc..2fc8012 100644 (file)
@@ -534,6 +534,14 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component,  {
 
 Roo.bootstrap.Button = function(config){
     Roo.bootstrap.Button.superclass.constructor.call(this, config);
+    this.weightClass = ["btn-default", 
+                       "btn-primary", 
+                       "btn-success", 
+                       "btn-info", 
+                       "btn-warning",
+                       "btn-danger",
+                       "btn-link"
+                      ],  
     this.addEvents({
         // raw events
         /**
@@ -857,6 +865,11 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
     show: function() {
        
         this.el.show();   
+    },
+    setWeight : function(str)
+    {
+         this.el.removeClass(this.weightClass);
+        this.el.addClass('btn-' + str);        
     }
     
     
@@ -1293,6 +1306,15 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
         return this.el.select('.panel-heading',true).first()
     },
     
+    bodyEl : function()
+    {
+        if(!this.el || !this.panel.length){
+            return;
+        }
+        
+        return this.el.select('.panel-body',true).first()
+    },
+    
     titleEl : function()
     {
         if(!this.el || !this.panel.length || !this.header.length){
@@ -2495,7 +2517,14 @@ Roo.bootstrap.Modal = function(config){
          * The raw btnclick event for the button
          * @param {Roo.EventObject} e
          */
-        "btnclick" : true
+        "btnclick" : true,
+        /**
+         * @event resize
+         * Fire when dialog resize
+         * @param {Roo.bootstrap.Modal} this
+         * @param {Roo.EventObject} e
+         */
+        "resize" : true
     });
     this.buttons = this.buttons || [];
 
@@ -2829,6 +2858,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
         this.bodyEl.setHeight(h-this.diff);
 
+        this.fireEvent('resize', this);
 
     },
     setContentSize  : function(w, h)
@@ -5668,20 +5698,18 @@ Roo.LoadMask.prototype = {
         }
         */
     
-        
-        
-        this.el.unmask(this.removeMask);
+        (function() { this.el.unmask(this.removeMask); }).defer(50, this);
     },
     // private
     onLoad : function()
     {
-        this.el.unmask(this.removeMask);
+        (function() { this.el.unmask(this.removeMask); }).defer(50, this);
     },
 
     // private
     onBeforeLoad : function(){
         if(!this.disabled){
-            this.el.mask(this.msg, this.msgCls);
+            (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
         }
     },
 
@@ -9087,7 +9115,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
      */
     markValid : function()
     {
-        if(!this.el  || this.preventMark){ // not rendered
+        if(!this.el  || this.preventMark){ // not rendered...
             return;
         }
         
@@ -9889,12 +9917,17 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
                         tag: 'label',
                         'for' :  id,
                         cls : 'control-label',
-                        html : this.fieldLabel
-                    },
-                    {
-                        tag : 'i',
-                        cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                        tooltip : 'This field is required'
+                        cn : [
+                            {
+                                tag : 'span',
+                                html : this.fieldLabel
+                            },
+                            {
+                                tag : 'i',
+                                cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                                tooltip : 'This field is required'
+                            }
+                        ]
                     },
                     {
                         cls : "", 
@@ -9906,7 +9939,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
                 ];
                 
                 labelCfg = cfg.cn[0];
-                contentCfg = cfg.cn[2];
+                contentCfg = cfg.cn[1];
             }
             
             if(this.labelWidth > 12){
@@ -9961,16 +9994,19 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
                 cfg.cn = [
                     {
                        tag: 'label',
-                       //cls : 'input-group-addon',
-                       html : this.fieldLabel
+                       cn : [
+                           {
+                               tag : 'span',
+                               html : this.fieldLabel
+                           },
+                           {
+                              tag : 'i',
+                              cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                              tooltip : 'This field is required'
+                           }
+                       ]
 
                     },
-                    {
-                       tag : 'i',
-                       cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                       tooltip : 'This field is required'
-                    },
-                    
                     combobox
 
                 ];
@@ -12586,9 +12622,9 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
     // element that contains real text value.. (when hidden is used..)
     
     getAutoCreate : function()
-    {
+    {   
         var cfg = false;
-        
+        //render
         /*
          * Render classic select for iso
          */
@@ -12772,13 +12808,17 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                         tag: 'label',
                         'for' :  id,
                         cls : 'control-label',
-                        html : this.fieldLabel
-
-                    },
-                    {
-                        tag : 'i',
-                        cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                        tooltip : 'This field is required'
+                        cn : [
+                            {
+                                tag : 'span',
+                                html : this.fieldLabel
+                            },
+                            {
+                                tag : 'i',
+                                cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                                tooltip : 'This field is required'
+                            }
+                        ]
                     },
                     {
                         cls : "",
@@ -12789,8 +12829,10 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
 
                 ];
                 
+                
+                
                 labelCfg = cfg.cn[0];
-                contentCfg = cfg.cn[2];
+                contentCfg = cfg.cn[1];
             
             }
             
@@ -12848,15 +12890,20 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                         {
                             tag: 'label',
                             //cls : 'input-group-addon',
-                            html : this.fieldLabel
-
+                            cn : [
+                                {
+                                    tag : 'span',
+                                    html : this.fieldLabel
+                                },
+                                {
+                                    tag : 'i',
+                                    cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                                    tooltip : 'This field is required'
+                                }
+                            ]
                         },
                         
-                        {
-                            tag : 'i',
-                            cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                            tooltip : 'This field is required'
-                        },
+                        
                         
                         combobox
 
@@ -13288,6 +13335,13 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             this.tickableInputEl().on("keyup", this.onKeyUp, this);
         }
         
+        this.indicator = this.indicatorEl();
+        
+        if(this.indicator){
+            this.indicator.setVisibilityMode(Roo.Element.DISPLAY);
+            this.indicator.hide();
+        }
+        
     },
 
     onDestroy : function(){
@@ -14592,13 +14646,14 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                     {
                         tag: 'label',
                         cls : 'control-label',
-                        html : this.fieldLabel
-
-                    },
-                    {
-                       tag : 'i',
-                       cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                       tooltip : 'This field is required'
+                        html : this.fieldLabel,
+                        cn : [
+                            {
+                               tag : 'i',
+                               cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                               tooltip : 'This field is required'
+                            }
+                        ]
                     },
                     {
                         cls : '', 
@@ -14667,13 +14722,14 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                     {
                         tag: 'label',
                         cls : 'control-label',
-                        html : this.fieldLabel
-
-                    },
-                    {
-                       tag : 'i',
-                       cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                       tooltip : 'This field is required'
+                        html : this.fieldLabel,
+                        cn : [
+                            {
+                               tag : 'i',
+                               cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                               tooltip : 'This field is required'
+                            }
+                        ]
                     },
                     {
                         cls : '', 
@@ -20629,7 +20685,366 @@ Roo.extend(Roo.bootstrap.Radio, Roo.bootstrap.Component, {
 });
  
 
- //<script type="text/javascript">
+ /*
+ * - LGPL
+ *
+ * Input
+ * 
+ */
+
+/**
+ * @class Roo.bootstrap.SecurePass
+ * @extends Roo.bootstrap.Input
+ * Bootstrap SecurePass class
+ *
+ * 
+ * @constructor
+ * Create a new SecurePass
+ * @param {Object} config The config object
+ */
+Roo.bootstrap.SecurePass = function (config) {
+    // these go here, so the translation tool can replace them..
+    this.errors = {
+        PwdEmpty: "Please type a password, and then retype it to confirm.",
+        PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
+        PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
+        PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
+        IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
+        FNInPwd: "Your password can't contain your first name. Please type a different password.",
+        LNInPwd: "Your password can't contain your last name. Please type a different password.",
+        TooWeak: "Your password is Too Weak."
+    },
+    this.meterLabel = "Password strength:";
+    this.pwdStrengths = ["Too Weak", "Weak", "Medium", "Strong"];
+    this.meterClass = ["roo-password-meter-tooweak", 
+                       "roo-password-meter-weak", 
+                       "roo-password-meter-medium", 
+                       "roo-password-meter-strong", 
+                       "roo-password-meter-grey"],    
+    Roo.bootstrap.SecurePass.superclass.constructor.call(this, config);
+}
+
+Roo.extend(Roo.bootstrap.SecurePass, Roo.bootstrap.Input, {
+    /**
+     * @cfg {String/Object} errors A Error spec, or true for a default spec (defaults to
+     * {
+     *  PwdEmpty: "Please type a password, and then retype it to confirm.",
+     *  PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
+     *  PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
+     *  PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
+     *  IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
+     *  FNInPwd: "Your password can't contain your first name. Please type a different password.",
+     *  LNInPwd: "Your password can't contain your last name. Please type a different password."
+     * })
+     */
+    // private
+    
+    meterWidth: 300,
+    errorMsg :'',    
+    errors: {},
+    imageRoot: '/',
+    /**
+     * @cfg {String/Object} Label for the strength meter (defaults to
+     * 'Password strength:')
+     */
+    // private
+    meterLabel: '',
+    /**
+     * @cfg {String/Object} pwdStrengths A pwdStrengths spec, or true for a default spec (defaults to
+     * ['Weak', 'Medium', 'Strong'])
+     */
+    // private    
+    pwdStrengths: [],    
+    // private
+    strength: 0,
+    // private
+    _lastPwd: null,
+    // private
+    kCapitalLetter: 0,
+    kSmallLetter: 1,
+    kDigit: 2,
+    kPunctuation: 3,
+    
+    insecure: false,
+    // private
+    initEvents: function () {
+        Roo.bootstrap.SecurePass.superclass.initEvents.call(this);
+
+        if (this.el.is('input[type=password]') && Roo.isSafari) {
+            this.el.on('keydown', this.SafariOnKeyDown, this);
+        }
+
+        this.el.on('keyup', this.checkStrength, this, {buffer: 50});
+    },
+    // private
+    onRender: function (ct, position) {
+        Roo.bootstrap.SecurePass.superclass.onRender.call(this, ct, position);
+        this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
+        this.trigger = this.wrap.createChild({tag: 'div', cls: 'StrengthMeter ' + this.triggerClass});
+
+        this.trigger.createChild({
+                  cn: [
+                    {
+                    //id: 'PwdMeter',
+                    tag: 'div',
+                    cls: 'roo-password-meter-grey col-xs-12',
+                    style: {
+                        //width: 0,
+                        //width: this.meterWidth + 'px'                                                
+                        }
+                    },
+                    {                           
+                        cls: 'roo-password-meter-text'                          
+                    }
+                ]            
+        });
+
+        /*
+        this.trigger.createChild({
+            tag: 'div',
+            cls: 'roo-password-meter-container col-xs-12',
+            style: {               
+                //width: this.meterWidth + 'px'
+            },
+            cn: {
+                tag: 'div',
+                cls: 'roo-password-meter-grey',
+                style: {
+                    //width: this.meterWidth + 'px'                                        
+                },
+                cn: [
+                    {
+                    //id: 'PwdMeter',
+                    tag: 'div',
+                    cls: 'roo-password-meter-grey col-xs-12',
+                    style: {
+                        //width: 0,
+                        //width: this.meterWidth + 'px'                                                
+                        }
+                    },
+                    {                           
+                        cls: 'roo-password-meter-text'                          
+                    }
+                ]                
+            }
+        });
+        */
+        if (this.hideTrigger) {
+            this.trigger.setDisplayed(false);
+        }
+        this.setSize(this.width || '', this.height || '');
+    },
+    // private
+    onDestroy: function () {
+        if (this.trigger) {
+            this.trigger.removeAllListeners();
+            this.trigger.remove();
+        }
+        if (this.wrap) {
+            this.wrap.remove();
+        }
+        Roo.bootstrap.TriggerField.superclass.onDestroy.call(this);
+    },
+    // private
+    checkStrength: function () {
+        var pwd = this.inputEl().getValue();
+        if (pwd == this._lastPwd) {
+            return;
+        }
+
+        var strength;
+        if (this.ClientSideStrongPassword(pwd)) {
+            strength = 3;
+        } else if (this.ClientSideMediumPassword(pwd)) {
+            strength = 2;
+        } else if (this.ClientSideWeakPassword(pwd)) {
+            strength = 1;
+        } else {
+            strength = 0;
+        }
+        
+        console.log('strength1: ' + strength);
+        
+        //var pm = this.trigger.child('div/div/div').dom;
+        var pm = this.trigger.child('div/div');
+        pm.removeClass(this.meterClass);
+        pm.addClass(this.meterClass[strength]);
+                
+        
+        var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
+                
+        pt.innerHTML = this.meterLabel + '&nbsp;' + this.pwdStrengths[strength];
+        
+        this._lastPwd = pwd;
+    },
+    reset: function () {
+        Roo.bootstrap.SecurePass.superclass.reset.call(this);
+        
+        this._lastPwd = '';
+        
+        var pm = this.trigger.child('div/div');
+        pm.removeClass(this.meterClass);
+        pm.addClass('roo-password-meter-grey');        
+        
+        
+        var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
+        
+        pt.innerHTML = '';
+        this.inputEl().dom.type='password';
+    },
+    // private
+    validateValue: function (value) {
+        
+        if (!Roo.bootstrap.SecurePass.superclass.validateValue.call(this, value)) {
+            return false;
+        }
+        if (value.length == 0) {
+            if (this.allowBlank) {
+                this.clearInvalid();
+                return true;
+            }
+
+            this.markInvalid(this.errors.PwdEmpty);
+            this.errorMsg = this.errors.PwdEmpty;
+            return false;
+        }
+        
+        if(this.insecure){
+            return true;
+        }
+        
+        if ('[\x21-\x7e]*'.match(value)) {
+            this.markInvalid(this.errors.PwdBadChar);
+            this.errorMsg = this.errors.PwdBadChar;
+            return false;
+        }
+        if (value.length < 6) {
+            this.markInvalid(this.errors.PwdShort);
+            this.errorMsg = this.errors.PwdShort;
+            return false;
+        }
+        if (value.length > 16) {
+            this.markInvalid(this.errors.PwdLong);
+            this.errorMsg = this.errors.PwdLong;
+            return false;
+        }
+        var strength;
+        if (this.ClientSideStrongPassword(value)) {
+            strength = 3;
+        } else if (this.ClientSideMediumPassword(value)) {
+            strength = 2;
+        } else if (this.ClientSideWeakPassword(value)) {
+            strength = 1;
+        } else {
+            strength = 0;
+        }
+
+        
+        if (strength < 2) {
+            //this.markInvalid(this.errors.TooWeak);
+            this.errorMsg = this.errors.TooWeak;
+            //return false;
+        }
+        
+        
+        console.log('strength2: ' + strength);
+        
+        //var pm = this.trigger.child('div/div/div').dom;
+        
+        var pm = this.trigger.child('div/div');
+        pm.removeClass(this.meterClass);
+        pm.addClass(this.meterClass[strength]);
+                
+        var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
+                
+        pt.innerHTML = this.meterLabel + '&nbsp;' + this.pwdStrengths[strength];
+        
+        this.errorMsg = ''; 
+        return true;
+    },
+    // private
+    CharacterSetChecks: function (type) {
+        this.type = type;
+        this.fResult = false;
+    },
+    // private
+    isctype: function (character, type) {
+        switch (type) { //why needed break after return in js ? very odd bug
+            case this.kCapitalLetter:
+                if (character >= 'A' && character <= 'Z') {
+                    return true;
+                }
+                break;
+            case this.kSmallLetter:
+                if (character >= 'a' && character <= 'z') {
+                    return true;
+                }
+                break;
+            case this.kDigit:
+                if (character >= '0' && character <= '9') {
+                    return true;
+                }
+                break;
+            case this.kPunctuation:
+                if ('!@#$%^&*()_+-=\'";:[{]}|.>,</?`~'.indexOf(character) >= 0) {
+                    return true;
+                }
+                break;
+            default:
+                return false;
+        }
+
+    },
+    // private
+    IsLongEnough: function (pwd, size) {
+        return !(pwd == null || isNaN(size) || pwd.length < size);
+    },
+    // private
+    SpansEnoughCharacterSets: function (word, nb) {
+        if (!this.IsLongEnough(word, nb))
+        {
+            return false;
+        }
+
+        var characterSetChecks = new Array(
+                new this.CharacterSetChecks(this.kCapitalLetter), new this.CharacterSetChecks(this.kSmallLetter),
+                new this.CharacterSetChecks(this.kDigit), new this.CharacterSetChecks(this.kPunctuation));
+        for (var index = 0; index < word.length; ++index) {
+            for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) {
+                if (!characterSetChecks[nCharSet].fResult && this.isctype(word.charAt(index), characterSetChecks[nCharSet].type)) {
+                    characterSetChecks[nCharSet].fResult = true;
+                    break;
+                }
+            }
+        }
+
+        var nCharSets = 0;
+        for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) {
+            if (characterSetChecks[nCharSet].fResult) {
+                ++nCharSets;
+            }
+        }
+
+        if (nCharSets < nb) {
+            return false;
+        }
+        return true;
+    },
+    // private
+    ClientSideStrongPassword: function (pwd) {
+        return this.IsLongEnough(pwd, 8) && this.SpansEnoughCharacterSets(pwd, 3);
+    },
+    // private
+    ClientSideMediumPassword: function (pwd) {
+        return this.IsLongEnough(pwd, 7) && this.SpansEnoughCharacterSets(pwd, 2);
+    },
+    // private
+    ClientSideWeakPassword: function (pwd) {
+        return this.IsLongEnough(pwd, 6) || !this.IsLongEnough(pwd, 0);
+    }
+          
+})//<script type="text/javascript">
 
 /*
  * Based  Ext JS Library 1.1.1
@@ -29693,6 +30108,17 @@ Roo.bootstrap.LayoutMasonry = function(config){
     
     this.bricks = [];
     
+    this.addEvents({
+        // raw events
+        /**
+         * @event layout
+         * Fire after layout the items
+         * @param {Roo.bootstrap.LayoutMasonry} this
+         * @param {Roo.EventObject} e
+         */
+        "layout" : true
+    });
+    
 };
 
 Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
@@ -29817,12 +30243,15 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
     
     resize : function()
     {
-        Roo.log('resize');
-        
         var cs = this.el.getBox(true);
         
-        if (this.currentSize.width == cs.width && this.currentSize.x == cs.x ) {
-            Roo.log("no change in with or X");
+        if (
+                this.currentSize.width == cs.width && 
+                this.currentSize.x == cs.x && 
+                this.currentSize.height == cs.height && 
+                this.currentSize.y == cs.y 
+        ) {
+            Roo.log("no change in with or X or Y");
             return;
         }
         
@@ -29842,6 +30271,8 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
       
         this._isLayoutInited = true;
         
+        this.fireEvent('layout', this);
+        
     },
     
     _resetLayout : function()
@@ -29911,6 +30342,8 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
     
     layoutItems : function( isInstant )
     {
+        Roo.log(this.bricks);
+        
         var items = Roo.apply([], this.bricks);
         
         if(this.isHorizontal){
@@ -30875,6 +31308,46 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
 
         return pos;
         
+    },
+    
+    /**
+    * adds a Masonry Brick
+    * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
+    */
+    addItem : function(cfg)
+    {
+        var cn = new Roo.bootstrap.MasonryBrick(cfg);
+        //this.register(cn);
+        cn.parentId = this.id;
+        cn.onRender(this.el, null);
+        return cn;
+    },
+    
+    /**
+    * register a Masonry Brick
+    * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
+    */
+    register : function(brick)
+    {
+        this.bricks.push(brick);
+        brick.masonryId = this.id;
+    },
+    
+    /**
+    * clear all the Masonry Brick
+    */
+    clearAll : function()
+    {
+        this.bricks = [];
+        //this.getChildContainer().dom.innerHTML = "";
+        this.el.dom.innerHTML = '';
+    },
+    
+    getSelected : function()
+    {
+        for (var i=0; i<this.bricks.length; i++) {
+            Roo.log(this.bricks)[i];
+        }
     }
     
 });
@@ -31440,12 +31913,12 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
      */   
     href : '',
     /**
-     * @cfg {String} (xs|sm|md|md-left|md-right|tall|wide) size
+     * @cfg {String} size (xs|sm|md|md-left|md-right|tall|wide)
      */   
     size : 'xs',
     
     /**
-     * @cfg {String} (center|bottom) placetitle
+     * @cfg {String} placetitle (center|bottom)
      */   
     placetitle : '',
     
@@ -31480,7 +31953,7 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
             cls += ' masonry-brick-image';
         }
         
-        if(!Roo.isTouch && this.maskInverse){
+        if(this.maskInverse){
             cls += ' mask-inverse';
         }