at_theme-1.4.1/at_core/scripts/at.responsiveLists.js
at_core/scripts/at.responsiveLists.js
/** * @file * Responsive Lists * This is based on the the Seven themes responsive tabs JS, except I have * generalized it so we can use it for any list. Also we use outerWidth and * calculate the total width of all list items. * * In AT we use this for tabs (local tasks), pagers and breadcrumbs. * See the breadcrumbs template and SCSS partial to see how this works. */ (function ($, Drupal, window) { 'use strict'; function init(i, list) { var rep_list = $(list); function handleResize(e) { rep_list.addClass('is-horizontal'); var lists = rep_list.find('.is-responsive__list'); var list_items_width = 0; lists.find('.is-responsive__item').each(function() { list_items_width += $(this).outerWidth(true); }); var isVertical = lists.outerWidth(true) <= list_items_width; if (isVertical == true) { rep_list.removeClass('is-horizontal').addClass('is-vertical'); } else { rep_list.removeClass('is-vertical').addClass('is-horizontal'); } } $(window).on('resize.lists', Drupal.debounce(handleResize, 150)).trigger('resize.lists'); } // Initialize the Responsive lists JS. Drupal.behaviors.atRL = { attach: function (context) { var list = $(context).find('[data-at-responsive-list]'); if (list.length) { list.once().each(init); } } }; })(jQuery, Drupal, window);