Roo/bootstrap/MasonryBrick.js

[roojs1] / Roo / bootstrap / MasonryBrick.js

diff --git a/Roo/bootstrap/MasonryBrick.js b/Roo/bootstrap/MasonryBrick.js
index 8514715..477bfef 100644 (file)
--- a/Roo/bootstrap/MasonryBrick.js
+++ b/Roo/bootstrap/MasonryBrick.js
@@ -19,6 +19,8 @@ Roo.bootstrap.MasonryBrick = function(config){
     
     Roo.bootstrap.MasonryBrick.superclass.constructor.call(this, config);
     
+    Roo.bootstrap.MasonryBrick.register(this);
+    
     this.addEvents({
         // raw events
         /**
@@ -88,7 +90,7 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
             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';
@@ -102,7 +104,7 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
             cls += ' mask-inverse';
         }
         
-        if(!this.html.length && !this.maskInverse){
+        if(!this.html.length && !this.maskInverse && !this.videourl.length){
             cls += ' enable-mask';
         }
         
@@ -141,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',
@@ -153,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({
@@ -169,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){
@@ -187,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;
         
     },
@@ -377,18 +377,18 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
         
         e.preventDefault();
         
-        if (this.activcClass != '') {
+        if (this.activeClass != '') {
             this.selectBrick();
         }
         
-        this.fireEvent('click', this);
+        this.fireEvent('click', this, e);
     },
     
     enter: function(e, el)
     {
         e.preventDefault();
         
-        if(!this.isFitContainer || this.maskInverse){
+        if(!this.isFitContainer || this.maskInverse || this.videourl.length){
             return;
         }
         
@@ -401,7 +401,7 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
     {
         e.preventDefault();
         
-        if(!this.isFitContainer || this.maskInverse){
+        if(!this.isFitContainer || this.maskInverse  || this.videourl.length){
             return;
         }
         
@@ -471,6 +471,7 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
         window.location.href = this.href;
     },
     
+    //selection on single brick only
     selectBrick : function() {
         
         if (!this.parentId) {
@@ -486,13 +487,60 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
             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