Roo/bootstrap/MasonryBrick.js

[roojs1] / Roo / bootstrap / MasonryBrick.js

diff --git a/Roo/bootstrap/MasonryBrick.js b/Roo/bootstrap/MasonryBrick.js
index a3f3d1c..477bfef 100644 (file)
--- a/Roo/bootstrap/MasonryBrick.js
+++ b/Roo/bootstrap/MasonryBrick.js
@@ -16,8 +16,11 @@
  */
 
 Roo.bootstrap.MasonryBrick = function(config){
+    
     Roo.bootstrap.MasonryBrick.superclass.constructor.call(this, config);
     
+    Roo.bootstrap.MasonryBrick.register(this);
+    
     this.addEvents({
         // raw events
         /**
@@ -57,12 +60,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 : '',
     
@@ -71,13 +74,23 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
      */   
     isFitContainer : true, 
     
+    /**
+     * @cfg {Boolean} preventDefault defalut false
+     */   
+    preventDefault : false, 
+    
+    /**
+     * @cfg {Boolean} inverse defalut false
+     */   
+    maskInverse : false, 
+    
     getAutoCreate : function()
     {
         if(!this.isFitContainer){
             return this.getSplitAutoCreate();
         }
         
-        var cls = 'masonry-brick masonry-brick-full';
+        var cls = 'masonry-brick masonry-brick-full embed-responsive';
         
         if(this.href.length){
             cls += ' masonry-brick-link';
@@ -87,7 +100,11 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
             cls += ' masonry-brick-image';
         }
         
-        if(!this.html.length){
+        if(this.maskInverse){
+            cls += ' mask-inverse';
+        }
+        
+        if(!this.html.length && !this.maskInverse && !this.videourl.length){
             cls += ' enable-mask';
         }
         
@@ -126,6 +143,10 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
             tag: (this.href.length) ? 'a' : 'div',
             cls: cls,
             cn: [
+                {
+                    tag: 'div',
+                    cls: 'masonry-brick-mask'
+                },
                 {
                     tag: 'div',
                     cls: 'masonry-brick-paragraph',
@@ -138,7 +159,7 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
             cfg.href = this.href;
         }
         
-        var cn = cfg.cn[0].cn;
+        var cn = cfg.cn[1].cn;
         
         if(this.title.length){
             cn.push({
@@ -154,9 +175,10 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
                 cls: 'masonry-brick-text',
                 html: this.html
             });
-        }  
+        }
+        
         if (!this.title.length && !this.html.length) {
-            cfg.cn[0].cls += ' hide';
+            cfg.cn[1].cls += ' hide';
         }
         
         if(this.bgimage.length){
@@ -172,20 +194,13 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
             // youtube support only?
             cfg.cn.push({
                 tag: 'iframe',
-                cls: 'masonry-brick-image-view',
+                cls: 'masonry-brick-image-view embed-responsive-item',
                 src: vurl,
                 frameborder : 0,
                 allowfullscreen : true
             });
-            
-            
         }
         
-        cfg.cn.push({
-            tag: 'div',
-            cls: 'masonry-brick-mask'
-        });
-        
         return cfg;
         
     },
@@ -328,8 +343,6 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
                 break;
         }
         
-        
-        
         if(Roo.isTouch){
             this.el.on('touchstart', this.onTouchStart, this);
             this.el.on('touchmove', this.onTouchMove, this);
@@ -338,6 +351,7 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
         } else {
             this.el.on('mouseenter'  ,this.enter, this);
             this.el.on('mouseleave', this.leave, this);
+            this.el.on('click', this.onClick, this);
         }
         
         if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
@@ -348,26 +362,33 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
     
     onClick: function(e, el)
     {
-        if(!Roo.isTouch){
-            return;
-        }
-        
         var time = this.endTimer - this.startTimer;
+        // Roo.log(e.preventDefault());
+        if(Roo.isTouch){
+            if(time > 1000){
+                e.preventDefault();
+                return;
+            }
+        }
         
-        //alert(time);
-        
-        if(time < 1000){
+        if(!this.preventDefault){
             return;
         }
         
         e.preventDefault();
+        
+        if (this.activeClass != '') {
+            this.selectBrick();
+        }
+        
+        this.fireEvent('click', this, e);
     },
     
     enter: function(e, el)
     {
         e.preventDefault();
         
-        if(!this.isFitContainer){
+        if(!this.isFitContainer || this.maskInverse || this.videourl.length){
             return;
         }
         
@@ -380,7 +401,7 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
     {
         e.preventDefault();
         
-        if(!this.isFitContainer){
+        if(!this.isFitContainer || this.maskInverse  || this.videourl.length){
             return;
         }
         
@@ -448,10 +469,78 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
         
         window.location.href = this.href;
-    }
+    },
     
+    //selection on single brick only
+    selectBrick : function() {
+        
+        if (!this.parentId) {
+            return;
+        }
+        
+        var m = Roo.bootstrap.LayoutMasonry.get(this.parentId);
+        var index = m.selectedBrick.indexOf(this.id);
+        
+        if ( index > -1) {
+            m.selectedBrick.splice(index,1);
+            this.el.removeClass(this.activeClass);
+            return;
+        }
+        
+        for(var i = 0; i < m.selectedBrick.length; i++) {
+            var b = Roo.bootstrap.MasonryBrick.get(m.selectedBrick[i]);
+            b.el.removeClass(b.activeClass);
+        }
+        
+        m.selectedBrick = [];
+        
+        m.selectedBrick.push(this.id);
+        this.el.addClass(this.activeClass);
+        return;
+    },
+    
+    isSelected : function(){
+        return this.el.hasClass(this.activeClass);
+        
+    }
 });
 
- 
+Roo.apply(Roo.bootstrap.MasonryBrick, {
+    
+    //groups: {},
+    groups : new Roo.util.MixedCollection(false, function(o) { return o.el.id; }),
+     /**
+    * register a Masonry Brick
+    * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
+    */
+    
+    register : function(brick)
+    {
+        //this.groups[brick.id] = brick;
+        this.groups.add(brick.id, brick);
+    },
+    /**
+    * fetch a  masonry brick based on the masonry brick ID
+    * @param {string} the masonry brick to add
+    * @returns {Roo.bootstrap.MasonryBrick} the masonry brick
+    */
+    
+    get: function(brick_id) 
+    {
+        // if (typeof(this.groups[brick_id]) == 'undefined') {
+        //     return false;
+        // }
+        // return this.groups[brick_id] ;
+        
+        if(this.groups.key(brick_id)) {
+            return this.groups.key(brick_id);
+        }
+        
+        return false;
+    }
+    
+    
+    
+});
 
  
\ No newline at end of file