/home/alan/gitlive/roojs1/Roo/bootstrap/MasonryBrick.js

X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=docs%2Fsrc%2FRoo_bootstrap_MasonryBrick.js.html;fp=docs%2Fsrc%2FRoo_bootstrap_MasonryBrick.js.html;h=1a8c9351fe2da7cc5290a236ebbadc9b3b0bdda8;hb=9ff8ded6bbbd258ecd646184ba26020874e2c085;hp=0000000000000000000000000000000000000000;hpb=2542b67d1a0768025056f2f330bfe50b64d1ad38;p=roojs1 diff --git a/docs/src/Roo_bootstrap_MasonryBrick.js.html b/docs/src/Roo_bootstrap_MasonryBrick.js.html new file mode 100644 index 0000000000..1a8c9351fe --- /dev/null +++ b/docs/src/Roo_bootstrap_MasonryBrick.js.html @@ -0,0 +1,546 @@ +/home/alan/gitlive/roojs1/Roo/bootstrap/MasonryBrick.js
/*
+ * - LGPL
+ *
+ * element
+ * 
+ */
+
+/**
+ * @class Roo.bootstrap.MasonryBrick
+ * @extends Roo.bootstrap.Component
+ * Bootstrap MasonryBrick class
+ * 
+ * @constructor
+ * Create a new MasonryBrick
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.MasonryBrick = function(config){
+
+    Roo.bootstrap.MasonryBrick.superclass.constructor.call(this, config);
+
+    Roo.bootstrap.MasonryBrick.register(this);
+
+    this.addEvents({
+        // raw events
+        /**
+         * @event click
+         * When a MasonryBrick is clcik
+         * @param {Roo.bootstrap.MasonryBrick} this
+         * @param {Roo.EventObject} e
+         */
+        "click" : true
+    });
+};
+
+Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
+
+    /**
+     * @cfg {String} title
+     */
+    title : '',
+    /**
+     * @cfg {String} html
+     */
+    html : '',
+    /**
+     * @cfg {String} bgimage
+     */
+    bgimage : '',
+    /**
+     * @cfg {String} videourl
+     */
+    videourl : '',
+    /**
+     * @cfg {String} cls
+     */
+    cls : '',
+    /**
+     * @cfg {String} href
+     */
+    href : '',
+    /**
+     * @cfg {String} size (xs|sm|md|md-left|md-right|tall|wide)
+     */
+    size : 'xs',
+
+    /**
+     * @cfg {String} placetitle (center|bottom)
+     */
+    placetitle : '',
+
+    /**
+     * @cfg {Boolean} isFitContainer defalut true
+     */
+    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';
+
+        if(this.href.length){
+            cls += ' masonry-brick-link';
+        }
+
+        if(this.bgimage.length){
+            cls += ' masonry-brick-image';
+        }
+
+        if(this.maskInverse){
+            cls += ' mask-inverse';
+        }
+
+        if(!this.html.length && !this.maskInverse && !this.videourl.length){
+            cls += ' enable-mask';
+        }
+
+        if(this.size){
+            cls += ' masonry-' + this.size + '-brick';
+        }
+
+        if(this.placetitle.length){
+
+            switch (this.placetitle) {
+                case 'center' :
+                    cls += ' masonry-center-title';
+                    break;
+                case 'bottom' :
+                    cls += ' masonry-bottom-title';
+                    break;
+                default:
+                    break;
+            }
+
+        } else {
+            if(!this.html.length && !this.bgimage.length){
+                cls += ' masonry-center-title';
+            }
+
+            if(!this.html.length && this.bgimage.length){
+                cls += ' masonry-bottom-title';
+            }
+        }
+
+        if(this.cls){
+            cls += ' ' + this.cls;
+        }
+
+        var cfg = {
+            tag: (this.href.length) ? 'a' : 'div',
+            cls: cls,
+            cn: [
+                {
+                    tag: 'div',
+                    cls: 'masonry-brick-mask'
+                },
+                {
+                    tag: 'div',
+                    cls: 'masonry-brick-paragraph',
+                    cn: []
+                }
+            ]
+        };
+
+        if(this.href.length){
+            cfg.href = this.href;
+        }
+
+        var cn = cfg.cn[1].cn;
+
+        if(this.title.length){
+            cn.push({
+                tag: 'h4',
+                cls: 'masonry-brick-title',
+                html: this.title
+            });
+        }
+
+        if(this.html.length){
+            cn.push({
+                tag: 'p',
+                cls: 'masonry-brick-text',
+                html: this.html
+            });
+        }
+
+        if (!this.title.length && !this.html.length) {
+            cfg.cn[1].cls += ' hide';
+        }
+
+        if(this.bgimage.length){
+            cfg.cn.push({
+                tag: 'img',
+                cls: 'masonry-brick-image-view',
+                src: this.bgimage
+            });
+        }
+
+        if(this.videourl.length){
+            var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
+            // youtube support only?
+            cfg.cn.push({
+                tag: 'iframe',
+                cls: 'masonry-brick-image-view',
+                src: vurl,
+                frameborder : 0,
+                allowfullscreen : true
+            });
+        }
+
+        return cfg;
+
+    },
+
+    getSplitAutoCreate : function()
+    {
+        var cls = 'masonry-brick masonry-brick-split';
+
+        if(this.href.length){
+            cls += ' masonry-brick-link';
+        }
+
+        if(this.bgimage.length){
+            cls += ' masonry-brick-image';
+        }
+
+        if(this.size){
+            cls += ' masonry-' + this.size + '-brick';
+        }
+
+        switch (this.placetitle) {
+            case 'center' :
+                cls += ' masonry-center-title';
+                break;
+            case 'bottom' :
+                cls += ' masonry-bottom-title';
+                break;
+            default:
+                if(!this.bgimage.length){
+                    cls += ' masonry-center-title';
+                }
+
+                if(this.bgimage.length){
+                    cls += ' masonry-bottom-title';
+                }
+                break;
+        }
+
+        if(this.cls){
+            cls += ' ' + this.cls;
+        }
+
+        var cfg = {
+            tag: (this.href.length) ? 'a' : 'div',
+            cls: cls,
+            cn: [
+                {
+                    tag: 'div',
+                    cls: 'masonry-brick-split-head',
+                    cn: [
+                        {
+                            tag: 'div',
+                            cls: 'masonry-brick-paragraph',
+                            cn: []
+                        }
+                    ]
+                },
+                {
+                    tag: 'div',
+                    cls: 'masonry-brick-split-body',
+                    cn: []
+                }
+            ]
+        };
+
+        if(this.href.length){
+            cfg.href = this.href;
+        }
+
+        if(this.title.length){
+            cfg.cn[0].cn[0].cn.push({
+                tag: 'h4',
+                cls: 'masonry-brick-title',
+                html: this.title
+            });
+        }
+
+        if(this.html.length){
+            cfg.cn[1].cn.push({
+                tag: 'p',
+                cls: 'masonry-brick-text',
+                html: this.html
+            });
+        }
+
+        if(this.bgimage.length){
+            cfg.cn[0].cn.push({
+                tag: 'img',
+                cls: 'masonry-brick-image-view',
+                src: this.bgimage
+            });
+        }
+
+        if(this.videourl.length){
+            var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
+            // youtube support only?
+            cfg.cn[0].cn.cn.push({
+                tag: 'iframe',
+                cls: 'masonry-brick-image-view',
+                src: vurl,
+                frameborder : 0,
+                allowfullscreen : true
+            });
+        }
+
+        return cfg;
+    },
+
+    initEvents: function()
+    {
+        switch (this.size) {
+            case 'xs' :
+                this.x = 1;
+                this.y = 1;
+                break;
+            case 'sm' :
+                this.x = 2;
+                this.y = 2;
+                break;
+            case 'md' :
+            case 'md-left' :
+            case 'md-right' :
+                this.x = 3;
+                this.y = 3;
+                break;
+            case 'tall' :
+                this.x = 2;
+                this.y = 3;
+                break;
+            case 'wide' :
+                this.x = 3;
+                this.y = 2;
+                break;
+            case 'wide-thin' :
+                this.x = 3;
+                this.y = 1;
+                break;
+
+            default :
+                break;
+        }
+
+        if(Roo.isTouch){
+            this.el.on('touchstart', this.onTouchStart, this);
+            this.el.on('touchmove', this.onTouchMove, this);
+            this.el.on('touchend', this.onTouchEnd, this);
+            this.el.on('contextmenu', this.onContextMenu, this);
+        } 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) {
+            this.parent().bricks.push(this);
+        }
+
+    },
+
+    onClick: function(e, el)
+    {
+        var time = this.endTimer - this.startTimer;
+        // Roo.log(e.preventDefault());
+        if(Roo.isTouch){
+            if(time > 1000){
+                e.preventDefault();
+                return;
+            }
+        }
+
+        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 || this.maskInverse || this.videourl.length){
+            return;
+        }
+
+        if(this.bgimage.length && this.html.length){
+            this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
+        }
+    },
+
+    leave: function(e, el)
+    {
+        e.preventDefault();
+
+        if(!this.isFitContainer || this.maskInverse  || this.videourl.length){
+            return;
+        }
+
+        if(this.bgimage.length && this.html.length){
+            this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
+        }
+    },
+
+    onTouchStart: function(e, el)
+    {
+//        e.preventDefault();
+
+        this.touchmoved = false;
+
+        if(!this.isFitContainer){
+            return;
+        }
+
+        if(!this.bgimage.length || !this.html.length){
+            return;
+        }
+
+        this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
+
+        this.timer = new Date().getTime();
+
+    },
+
+    onTouchMove: function(e, el)
+    {
+        this.touchmoved = true;
+    },
+
+    onContextMenu : function(e,el)
+    {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+    },
+
+    onTouchEnd: function(e, el)
+    {
+//        e.preventDefault();
+
+        if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
+
+            this.leave(e,el);
+
+            return;
+        }
+
+        if(!this.bgimage.length || !this.html.length){
+
+            if(this.href.length){
+                window.location.href = this.href;
+            }
+
+            return;
+        }
+
+        if(!this.isFitContainer){
+            return;
+        }
+
+        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