JAVASCRIPT   33

begrid.js

Guest on 12th August 2021 06:51:07 PM

  1. (function (global, factory, $) {
  2.     if (typeof define == 'function' && define.amd) {
  3.         // AMD - RequireJS
  4.         define('begrid', factory);
  5.     } else if (typeof module == 'object' && module.exports) {
  6.         // CommonJS - Browserify, Webpack
  7.         module.exports = factory($);
  8.     } else {
  9.         // Browser globals
  10.         global.BeGrid = factory($);
  11.     }
  12. }(window, function ($) {
  13.     "use strict";
  14.     var $window = $(window),
  15.         BeGrid = function (grid) {
  16.             if (null != grid && !$(grid).hasClass('be-grid-initialized')) {
  17.                 this.init(grid);
  18.                 $window.load(function () {
  19.                     this.ele.isotope('layout');
  20.                 }.bind(this));
  21.             }
  22.         };
  23.     BeGrid.prototype.init = function (ele) {
  24.         if (null != ele) {
  25.             this.ele = $(ele);
  26.             this.setDefaultProps();
  27.             this.setLayout();
  28.             this.setGutter();
  29.             this.initGridAnimation();
  30.             this.grid();
  31.             this.initEvents();    
  32.             this.filterItems();
  33.         }
  34.     };
  35.     BeGrid.prototype.initEvents = function () {
  36.         $window.on('load', function () {
  37.             this.ele.isotope('layout');
  38.         }.bind(this));
  39.         $window.on( 'debouncedresize', function() {
  40.             var mediaElements = this.ele.find( 'audio, video' ),
  41.                 sliders = this.ele.find( '.be-slider' );
  42.             this.grid();
  43.             if( 0 < mediaElements.length ) {
  44.                 mediaElements.each( function() {
  45.                     var mediaElementObj = $(this).data().mediaelementplayer;
  46.                     if( 'object' == typeof mediaElementObj ) {
  47.                         mediaElementObj.setPlayerSize();
  48.                         mediaElementObj.setControlsSize();
  49.                     }
  50.                 } );
  51.             }
  52.             if( 0 < sliders.length ) {
  53.                 sliders.each(function(){
  54.                     var curSlider = $(this);
  55.                     if( curSlider.hasClass( 'flickity-enabled' ) ) {
  56.                        curSlider.flickity( 'reposition' );
  57.                     }
  58.                 });
  59.                 this.ele.isotope( 'layout' );
  60.             }
  61.         }.bind(this));
  62.     };
  63.     BeGrid.prototype.setDefaultProps = function () {
  64.         //defaults
  65.         this.cols = 3;
  66.         this.gutter = 0;
  67.         this.elementsToReveal = null;
  68.         this.animationType = 'revealAllAtOnce';
  69.         this.layout = 'masonry';
  70.     };
  71.     BeGrid.prototype.setGutter = function () {
  72.         this.gutter = parseInt(this.ele.attr('data-gutter')) || 0;
  73.     };
  74.     BeGrid.prototype.setLayout = function () {
  75.         if ('metro' === this.ele.attr('data-layout')) {
  76.             this.layout = 'metro';
  77.         }
  78.     };
  79.     BeGrid.prototype.setCols = function () {
  80.         var cols = parseInt(this.ele.attr('data-cols')) || 3,
  81.             windowWidth = $window.width();
  82.         if (1024 < windowWidth) {
  83.             //laptops and desktops
  84.             this.cols = cols;
  85.         } else {
  86.             //small screens
  87.             if (959 < windowWidth) {
  88.                 //table landscape mode
  89.                 switch (cols) {
  90.                     case 1:
  91.                         this.cols = 1;
  92.                         break;
  93.                     case 2:
  94.                         this.cols = 2;
  95.                         break;
  96.                     case 3:
  97.                     default:
  98.                         this.cols = 3;
  99.                         break;
  100.                 }
  101.             } else if( 767 < windowWidth ) {
  102.                 //tablet portrait mode
  103.                 if (1 == cols) {
  104.                     this.cols = 1;
  105.                 } else {
  106.                     this.cols = 2;
  107.                 }
  108.             }else {
  109.                 if( null != this.ele.attr('data-mobile-cols') ) {
  110.                     this.cols = parseInt(this.ele.attr('data-mobile-cols'));
  111.                 }else {
  112.                     this.cols = 1;
  113.                 }
  114.             }
  115.         }
  116.     };
  117.     BeGrid.prototype.initGridAnimation = function () {
  118.         this.animationType = '1' === this.ele.attr('data-scroll-reveal') ? 'scrollReveal' : 'revealAllAtOnce';
  119.         this.elementsToReveal = this.ele.find('.be-col');
  120.         this.addAnimationClass();
  121.         if ( 'scrollReveal' === this.animationType ) {
  122.             $window.on('scroll', function () {
  123.                 this.triggerScrollReveal();
  124.             }.bind(this));
  125.         }
  126.     };
  127.     BeGrid.prototype.addAnimationClass = function () {
  128.         var animationTarget = this.ele.attr( 'data-animation-target' ) || '.be-col',
  129.             animationClass = this.ele.attr('data-animation') || 'be-col-hide';
  130.         this.ele.find( animationTarget ).addClass( animationClass );
  131.     };
  132.     BeGrid.prototype.triggerScrollReveal = function () {
  133.         if ( 'scrollReveal' === this.animationType && 0 < this.elementsToReveal.length) {
  134.             var visibleEles = this.elementsToReveal.filter(function () {
  135.                 return $(this).isVisible(-100);
  136.             });
  137.             if (0 < visibleEles.length) {
  138.                 visibleEles.each(function (i, el) {
  139.                     var curEl = $(el),
  140.                         animationClass = null == this.ele.attr('data-animation') ? 'be-col-visible' : 'be-start-animation',
  141.                         animationTarget = this.ele.attr( 'data-animation-target' );
  142.                     if ( null != animationTarget ) {
  143.                         curEl = curEl.find( animationTarget );
  144.                     }
  145.                     curEl.css('transition-delay', (i * 150) + 'ms');
  146.                     curEl.addClass(animationClass);
  147.                 }.bind(this));
  148.                 this.elementsToReveal = this.elementsToReveal.not(visibleEles);
  149.             }
  150.         }
  151.     };
  152.     BeGrid.prototype.filterItems = function () {
  153.         if (this.ele.attr('data-filter-items') === "1") {
  154.             this.ele.parent().on('click', '.sort-items', function (e) {
  155.                 var filterKey = $(e.currentTarget).data('id');
  156.                 var filterredItems = $([]);
  157.                 if (!$(e.currentTarget).hasClass('current_choice')) {
  158.                     this.ele.parent().find('.sort-items').removeClass('current_choice');
  159.                     $(e.currentTarget).addClass('current_choice');
  160.                     var cols = this.ele.find('.be-col');
  161.                     cols.css({
  162.                         transform: 'scale(0)',
  163.                         transition: 'all 0.3s ease'
  164.                     });
  165.                     setTimeout(function () {
  166.                         cols.find('.be-start-animation').css('transition-delay', '');
  167.                         cols.css({ transform: '', transition: '' });
  168.                         this.ele.isotope({
  169.                             filter: function () {
  170.                                 var itemCategories = $(this).data('category-names');
  171.                                 if (filterKey === 'all' || itemCategories.indexOf(filterKey) > -1) {
  172.                                     filterredItems = filterredItems.add($(this));
  173.                                     return true;
  174.                                 }
  175.                             },
  176.                             transitionDuration: 0
  177.                         });
  178.                         filterredItems.find('.be-start-animation').removeClass('be-start-animation');
  179.                         this.elementsToReveal = filterredItems;
  180.                         setTimeout( function() {
  181.                             if (this.animationType === 'scrollReveal') {
  182.                                 this.triggerScrollReveal();
  183.                             }else {
  184.                                 this.revealAllAtOnce();
  185.                             }
  186.                         }.bind(this), 0 );
  187.                     }.bind(this), 300);
  188.                 }
  189.             }.bind(this));
  190.         }
  191.     };
  192.     BeGrid.prototype.revealAllAtOnce = function () {
  193.         if ( 'revealAllAtOnce' === this.animationType && 0 < this.elementsToReveal.length) {
  194.             this.elementsToReveal.each(function (i, el) {
  195.                 var jEl = $(el),
  196.                     animationClass = null == this.ele.attr('data-animation') ? 'be-col-visible' : 'be-start-animation',
  197.                     animationTarget = this.ele.attr( 'data-animation-target' );
  198.                 if ( null != animationTarget ) {
  199.                     jEl = jEl.find( animationTarget );
  200.                 }
  201.                 jEl.css('transition-delay', (i * 150) + 'ms');
  202.                 jEl.addClass( animationClass );
  203.             }.bind(this));
  204.             this.elementsToReveal = $([]);
  205.         }
  206.     };
  207.     BeGrid.prototype.grid = function () {
  208.         this.setCols();
  209.         this.setWidth();
  210.         this.setGiantCells();
  211.         this.renderLayout();
  212.     };
  213.     BeGrid.prototype.setWidth = function () {
  214.         this.ele.width(''); //reset ele width bfore recalculating
  215.         var curWidth = this.ele.width(),
  216.             windowWidth = $window.width(),
  217.             cells = this.ele.find('.be-col'),
  218.             giants,
  219.             normalWidth;
  220.  
  221.         // while ((curWidth % this.cols) != 0) {
  222.         //     curWidth = curWidth + 1;
  223.         // }
  224.  
  225.         console.log(curWidth);
  226.         var remainder = Math.floor(curWidth / this.cols);
  227.         curWidth = remainder * this.cols + this.cols;
  228.         console.log(curWidth);
  229.  
  230.         this.ele.width(curWidth);
  231.  
  232.         normalWidth = curWidth / this.cols;
  233.         if ('masonry' == this.layout) {
  234.             cells.outerWidth(normalWidth);
  235.         } else {
  236.             if (767 < windowWidth) {
  237.                 giants = cells.filter(function () {
  238.                     return $(this).hasClass('be-double-width-cell') || $(this).hasClass('be-double-width-height-cell');
  239.                 });
  240.                 if (0 < giants.length) {
  241.                     cells = cells.not(giants);
  242.                     giants.outerWidth(normalWidth * 2);
  243.                 }
  244.             }
  245.             cells.outerWidth(normalWidth);
  246.         }
  247.     };
  248.     BeGrid.prototype.setGiantCells = function () {
  249.         //computes the dimensions of double width, double height cells
  250.         if ('metro' == this.layout) {
  251.  
  252.             var aspectRatio = !isNaN(parseFloat(this.ele.attr('data-aspect-ratio'))) ? parseFloat(this.ele.attr('data-aspect-ratio')) : 1,
  253.                 normalCellWidth = (this.ele.width() / this.cols) - this.gutter,
  254.                 windowWidth = $window.width(),
  255.                 normalCellHeight = (normalCellWidth) / aspectRatio,
  256.                 normalCellHeight = Math.round(normalCellHeight * 100) / 100,
  257.                 doubleWidthCells = this.ele.find('.be-double-width-cell'),
  258.                 doubleHeightCells = this.ele.find('.be-double-height-cell'),
  259.                 doubleWidthHeightCells = this.ele.find('.be-double-width-height-cell');
  260.             //double width
  261.             if (0 < doubleWidthCells.length) {
  262.                 doubleWidthCells.each(function (i, cell) {
  263.                     var curCell = $(cell),
  264.                         padding;
  265.                     if (767 < windowWidth) {
  266.                         padding = normalCellHeight / ((normalCellWidth * 2) + this.gutter);
  267.                     } else {
  268.                         padding = normalCellHeight / normalCellWidth;
  269.                     }
  270.                     if (!isNaN(padding)) {
  271.                         padding = padding * 100;
  272.                         curCell.find('.be-grid-placeholder').css('padding-bottom', padding + '%');
  273.                     }
  274.                 }.bind(this));
  275.             }
  276.  
  277.             ///double height
  278.             if (0 < doubleHeightCells.length) {
  279.                 doubleHeightCells.each(function (i, cell) {
  280.                     var curCell = $(cell),
  281.                         padding = ((2 * normalCellHeight) + this.gutter) / normalCellWidth;
  282.                     if (!isNaN(padding)) {
  283.                         padding = padding * 100;
  284.                         curCell.find('.be-grid-placeholder').css('padding-bottom', padding + '%');
  285.                     }
  286.                 }.bind(this));
  287.             }
  288.  
  289.             //double width height
  290.             if (0 < doubleWidthHeightCells.length) {
  291.                 doubleWidthHeightCells.each(function (i, cell) {
  292.                     var curCell = $(cell),
  293.                         padding;
  294.                     if (767 < windowWidth) {
  295.                         padding = ((2 * normalCellHeight) + this.gutter) / ((normalCellWidth * 2) + this.gutter)
  296.                     } else {
  297.                         padding = ((2 * normalCellHeight) + this.gutter) / normalCellWidth;
  298.                     }
  299.                     if (!isNaN(padding)) {
  300.                         padding = padding * 100;
  301.                         curCell.find('.be-grid-placeholder').css('padding-bottom', padding + '%');
  302.                     }
  303.                 }.bind(this));
  304.             }
  305.         }
  306.     };
  307.     BeGrid.prototype.renderLayout = function () {
  308.         var columnWidth = this.ele.width() / this.cols;
  309.         this.ele.isotope({
  310.             isInitLayout: false,
  311.             itemSelector: '.be-col',
  312.             resize: false,
  313.             masonry: {
  314.                 columnWidth: columnWidth,
  315.             }
  316.         });
  317.         this.ele.on('layoutComplete', function () {
  318.             if (!this.ele.hasClass('be-grid-initialized')) {
  319.                 this.ele.addClass('be-grid-initialized');
  320.                 setTimeout(function () {
  321.                     if (this.animationType === 'scrollReveal') {
  322.                         this.triggerScrollReveal();
  323.                     }else {
  324.                         this.revealAllAtOnce();
  325.                     }
  326.                     BeLazyLoad.lazyLoad();
  327.                 }.bind(this), 0);
  328.             }
  329.         }.bind(this));
  330.         this.ele.isotope();
  331.     };
  332.     return BeGrid;
  333. }, jQuery));

Raw Paste


Login or Register to edit or fork this paste. It's free.