Commit 7becc262 authored by Gaus Surahman's avatar Gaus Surahman
Browse files

- Fixed for GridStack regressions with Outlayer Masonry/Packery at... 

- Fixed for GridStack regressions with Outlayer Masonry/Packery at gridstack:8.x-2.3. Isotope is not affected.
parent d9cf31f3

CHANGELOG.txt

+5 −0
Original line number Diff line number Diff line 


Outlayer 8.x-1.0-dev, 2020-03-06

--------------------------------

- Fixed for GridStack regressions with Outlayer Masonry/Packery at

  gridstack:8.x-2.3. Isotope is not affected.



Outlayer 8.x-1.0-dev, 2020-02-23

--------------------------------

- Updated minimum core_version_requirement to 8.8.

js/outlayer.base.js

+17 −4
Original line number Diff line number Diff line
@@ -7,14 +7,14 @@ 


  'use strict';



  Drupal.outLayer = Drupal.outLayer || {};



  /**

   * Outlayer utility functions.

   *

   * @namespace

   */

  Drupal.outLayer.base = {

  Drupal.outLayer = Drupal.outLayer || {

    $el: null,

    $instance: null,



    /**

     * Updates grid boxes with the given aspect ratios to make them responsive.
@@ -32,7 +32,7 @@ 
        var width = item.hasAttribute('data-ol-width') ? parseInt(item.getAttribute('data-ol-width')) : -1;

        var height = item.hasAttribute('data-ol-height') ? parseInt(item.getAttribute('data-ol-height')) : -1;

        var pad = Math.round(((height / width) * 100), 2);

        var $media = item.querySelectorAll('.media--ratio');

        var $media = item.querySelectorAll('.media--ratio, .b-bg');



        // Supports multiple media such as an embedded Slick carousel.

        if ($media !== null && height > 0 && width > 0) {
@@ -41,6 +41,19 @@ 
          });

        }

      });

    },



    cleanUp: function () {

      var me = this;



      if (me.$el !== null && me.$el !== 'undefined') {

        window.setTimeout(function () {

          me.$el.classList.remove('gridstack--packing');

          if (me.$el.classList.contains('ungridstack')) {

            me.$el.classList.remove('gridstack--enabled');

          }

        }, 100);

      }

    }



  };

js/outlayer.base.min.js

+1 −1
Original line number Diff line number Diff line 
!function(t,a){"use strict";t.outLayer=t.outLayer||{},t.outLayer.base={updateRatio:function(t){a.forEach(t,function(t){var e=t.hasAttribute("data-ol-width")?parseInt(t.getAttribute("data-ol-width")):-1,o=t.hasAttribute("data-ol-height")?parseInt(t.getAttribute("data-ol-height")):-1,r=Math.round(o/e*100,2),i=t.querySelectorAll(".media--ratio");null!==i&&o>0&&e>0&&a.forEach(i,function(t){t.style.paddingBottom=r+"%"})})}}}(Drupal,dBlazy);
 
!function(t,a){"use strict";t.outLayer=t.outLayer||{$el:null,$instance:null,updateRatio:function(t){a.forEach(t,function(t){var e=t.hasAttribute("data-ol-width")?parseInt(t.getAttribute("data-ol-width")):-1,i=t.hasAttribute("data-ol-height")?parseInt(t.getAttribute("data-ol-height")):-1,n=Math.round(i/e*100,2),l=t.querySelectorAll(".media--ratio, .b-bg");null!==l&&i>0&&e>0&&a.forEach(l,function(t){t.style.paddingBottom=n+"%"})})},cleanUp:function(){var t=this;null!==t.$el&&"undefined"!==t.$el&&window.setTimeout(function(){t.$el.classList.remove("gridstack--packing"),t.$el.classList.contains("ungridstack")&&t.$el.classList.remove("gridstack--enabled")},100)}}}(Drupal,dBlazy);

js/outlayer.isotope.js

+34 −21
Original line number Diff line number Diff line
@@ -7,17 +7,12 @@ 


  'use strict';



  Drupal.outLayer = Drupal.outLayer || {};



  /**

   * Outlayer utility functions.

   *

   * @namespace

   */

  Drupal.outLayer.isotope = {



    $instance: null,

    $el: null,

  Drupal.outLayer.isotope = _db.extend({}, Drupal.outLayer || {}, {

    $empty: null,

    $items: [],

    $filter: null,
@@ -40,13 +35,15 @@ 
     */

    init: function (force) {

      var me = this;

      var opts = me.$el.getAttribute('data-outlayer-isotope') ? _db.parse(me.$el.getAttribute('data-outlayer-isotope')) : {};

      var opts = _db.parse(me.$el.getAttribute('data-outlayer-isotope')) || {};



      // If not using gridstack, layout items manually.

      if (!me.useGridStack) {

        Drupal.outLayer.base.updateRatio(me.$items);

        me.updateRatio(me.$items);

      }



      me.cleanUp();



      // Only initialize it if not already, or a force for ugridstack.

      if (me.$instance === null || force) {

        me.isIsotope = true;
@@ -83,6 +80,7 @@ 
          // We have no onDestroy event, and destroy is unfortunately unclean.

          // This causes unwanted transition, but at least not breaking layout.

          // Isotope is NOT immediately destroyed till transitions ends.

          // @todo hook into transitioend event if it has one, not always.

          window.setTimeout(function () {

            _db.forEach(me.$items, function (item) {

              item.removeAttribute('style');
@@ -107,7 +105,7 @@ 
        Drupal.blazy.init.load($elms);

      }

    }

  };

  });



  /**

   * Outlayer utility functions.
@@ -142,11 +140,7 @@ 
      me.init();



      // Toggle the current active button class.

      if ($active !== null) {

        $active.classList.remove('is-active');

      }



      btn.classList.add('is-active');

      toggleButton($active, btn);



      // Filter items.

      me.$instance.arrange({
@@ -206,11 +200,7 @@ 
      me.init();



      // Toggle the current active button class.

      if ($active !== null) {

        $active.classList.remove('is-active');

      }



      btn.classList.add('is-active');

      toggleButton($active, btn);



      // Sort items.

      options = {
@@ -223,6 +213,23 @@ 
      me.revalidate();

    }



    /**

     * Toggle button states.

     *

     * @param {HTMLElement} $active

     *   The active button, if any.

     * @param {HTMLElement} btn

     *   The current clicked button

     */

    function toggleButton($active, btn) {

      // Toggle the current active button class.

      if ($active !== null) {

        $active.classList.remove('is-active');

      }



      btn.classList.add('is-active');

    }



    /**

     * Filter elements on a button click.

     */
@@ -281,8 +288,14 @@ 
   */

  Drupal.behaviors.outLayerIsotope = {

    attach: function (context) {

      var galleries = context.querySelectorAll('.outlayer--isotope:not(.outlayer--isotope--on)');

      _db.once(_db.forEach(galleries, doOutLayerIsotope, context));

      if ('length' in context) {

        context = context[0];

      }



      var elms = context.querySelectorAll('.outlayer--isotope:not(.outlayer--isotope--on)');

      if (elms.length > 0) {

        _db.once(_db.forEach(elms, doOutLayerIsotope, context));

      }

    }

  };

js/outlayer.isotope.min.js

+1 −1
Original line number Diff line number Diff line 
!function(t,e,r,i){"use strict";function a(e){function r(t){var e=t.target,r=o.$filter.querySelector(".is-active");o.dataFilter=e.getAttribute("data-filter"),o.init(),null!==r&&r.classList.remove("is-active"),e.classList.add("is-active"),o.$instance.arrange({filter:o.dataFilter}),o.revalidate()}function a(e){var r=e.target,i=r.value;if(o.$input=r,""===o.$input.value)return void l();o.init(),o.searchString=t.checkPlain(i.toLowerCase()),o.$instance.arrange({filter:function(){return-1!==this.textContent.toLowerCase().indexOf(o.searchString)}}),o.revalidate()}function n(t){var e,r=t.target,i=r.getAttribute("data-sort-by"),a=o.$sorter.querySelector(".is-active");o.init(),null!==a&&a.classList.remove("is-active"),r.classList.add("is-active"),e={sortBy:i},o.$instance.arrange(e),o.revalidate()}function l(){o.destroy(),null!==o.$input&&(o.$input.value="")}var o=t.outLayer.isotope,s=e.getAttribute("data-instance-id");o.$el=e,o.gridHeight=o.$el.style.height,o.$filter=document.querySelector('.outlayer-list--filter[data-instance-id="'+s+'"]'),o.$search=document.querySelector('.outlayer-list--search[data-instance-id="'+s+'"]'),o.$sorter=document.querySelector('.outlayer-list--sorter[data-instance-id="'+s+'"]'),function(){if(null!==o.$filter&&i.on(o.$filter,"click",".button--filter",r),null!==o.$search){var e=t.debounce(a,250);i.on(o.$search,"keyup",".form-text--search",e)}null!==o.$sorter&&(o.activeSorters=o.$sorter.hasAttribute("data-sorters")?i.parse(o.$sorter.getAttribute("data-sorters")):{},i.on(o.$sorter,"click",".button--sorter",n)),i.forEach([o.$filter,o.$search,o.$sorter],function(t){null!==t&&i.on(t,"click",".button--reset",l)}),o.$empty=o.$el.querySelector(".outlayer__empty"),o.$items=o.$el.querySelectorAll(".gridstack__box"),o.$el.classList.contains("ungridstack")&&(o.useGridStack=!1,o.init(!0)),o.$el.classList.add("outlayer--isotope--on")}()}t.outLayer=t.outLayer||{},t.outLayer.isotope={$instance:null,$el:null,$empty:null,$items:[],$filter:null,$sorter:null,$search:null,$input:null,isIsotope:!1,useGridStack:!0,dataFilter:null,searchString:null,activeFilters:[],activeSorters:[],gridHeight:"210px",init:function(e){var a=this,n=a.$el.getAttribute("data-outlayer-isotope")?i.parse(a.$el.getAttribute("data-outlayer-isotope")):{};a.useGridStack||t.outLayer.base.updateRatio(a.$items),(null===a.$instance||e)&&(a.isIsotope=!0,a.$instance=new r(a.$el,n),a.$instance.on("arrangeComplete",function(e){if(null!==a.$empty){var r=0===e.length;a.$el.classList[r?"add":"remove"]("outlayer--empty"),a.$empty.textContent=r?t.t("No data found."):""}}))},destroy:function(){var t=this;null!==t.$instance&&void 0!==t.$instance&&(t.useGridStack?(t.$instance.destroy(),t.isIsotope=!1,t.$el.style.height=t.gridHeight,t.$el.classList.remove("outlayer--empty"),window.setTimeout(function(){i.forEach(t.$items,function(t){t.removeAttribute("style")})},1e3)):t.$instance.arrange())},revalidate:function(){var e=this,r=e.$el.querySelectorAll(".b-lazy:not(.b-loaded)");null!==r&&t.blazy&&null!==t.blazy.init&&t.blazy.init.load(r)}},t.behaviors.outLayerIsotope={attach:function(t){var e=t.querySelectorAll(".outlayer--isotope:not(.outlayer--isotope--on)");i.once(i.forEach(e,a,t))}}}(Drupal,drupalSettings,Isotope,dBlazy);
 
!function(t,e,r,i){"use strict";function a(e){function r(t){var e=t.target,r=s.$filter.querySelector(".is-active");s.dataFilter=e.getAttribute("data-filter"),s.init(),l(r,e),s.$instance.arrange({filter:s.dataFilter}),s.revalidate()}function a(e){var r=e.target,i=r.value;if(s.$input=r,""===s.$input.value)return void o();s.init(),s.searchString=t.checkPlain(i.toLowerCase()),s.$instance.arrange({filter:function(){return-1!==this.textContent.toLowerCase().indexOf(s.searchString)}}),s.revalidate()}function n(t){var e,r=t.target,i=r.getAttribute("data-sort-by"),a=s.$sorter.querySelector(".is-active");s.init(),l(a,r),e={sortBy:i},s.$instance.arrange(e),s.revalidate()}function l(t,e){null!==t&&t.classList.remove("is-active"),e.classList.add("is-active")}function o(){s.destroy(),null!==s.$input&&(s.$input.value="")}var s=t.outLayer.isotope,u=e.getAttribute("data-instance-id");s.$el=e,s.gridHeight=s.$el.style.height,s.$filter=document.querySelector('.outlayer-list--filter[data-instance-id="'+u+'"]'),s.$search=document.querySelector('.outlayer-list--search[data-instance-id="'+u+'"]'),s.$sorter=document.querySelector('.outlayer-list--sorter[data-instance-id="'+u+'"]'),function(){if(null!==s.$filter&&i.on(s.$filter,"click",".button--filter",r),null!==s.$search){var e=t.debounce(a,250);i.on(s.$search,"keyup",".form-text--search",e)}null!==s.$sorter&&(s.activeSorters=s.$sorter.hasAttribute("data-sorters")?i.parse(s.$sorter.getAttribute("data-sorters")):{},i.on(s.$sorter,"click",".button--sorter",n)),i.forEach([s.$filter,s.$search,s.$sorter],function(t){null!==t&&i.on(t,"click",".button--reset",o)}),s.$empty=s.$el.querySelector(".outlayer__empty"),s.$items=s.$el.querySelectorAll(".gridstack__box"),s.$el.classList.contains("ungridstack")&&(s.useGridStack=!1,s.init(!0)),s.$el.classList.add("outlayer--isotope--on")}()}t.outLayer.isotope=i.extend({},t.outLayer||{},{$empty:null,$items:[],$filter:null,$sorter:null,$search:null,$input:null,isIsotope:!1,useGridStack:!0,dataFilter:null,searchString:null,activeFilters:[],activeSorters:[],gridHeight:"210px",init:function(e){var a=this,n=i.parse(a.$el.getAttribute("data-outlayer-isotope"))||{};a.useGridStack||a.updateRatio(a.$items),a.cleanUp(),(null===a.$instance||e)&&(a.isIsotope=!0,a.$instance=new r(a.$el,n),a.$instance.on("arrangeComplete",function(e){if(null!==a.$empty){var r=0===e.length;a.$el.classList[r?"add":"remove"]("outlayer--empty"),a.$empty.textContent=r?t.t("No data found."):""}}))},destroy:function(){var t=this;null!==t.$instance&&void 0!==t.$instance&&(t.useGridStack?(t.$instance.destroy(),t.isIsotope=!1,t.$el.style.height=t.gridHeight,t.$el.classList.remove("outlayer--empty"),window.setTimeout(function(){i.forEach(t.$items,function(t){t.removeAttribute("style")})},1e3)):t.$instance.arrange())},revalidate:function(){var e=this,r=e.$el.querySelectorAll(".b-lazy:not(.b-loaded)");null!==r&&t.blazy&&null!==t.blazy.init&&t.blazy.init.load(r)}}),t.behaviors.outLayerIsotope={attach:function(t){"length"in t&&(t=t[0]);var e=t.querySelectorAll(".outlayer--isotope:not(.outlayer--isotope--on)");e.length>0&&i.once(i.forEach(e,a,t))}}}(Drupal,drupalSettings,Isotope,dBlazy);