https://www.monumenten.nl/themes/monumenten/src/scripts/limethemed…/jquery.ltOverflowHor.js?tluhor

1/**
2 * @file
3 * OverflowHor.
4 *
5 * Documentation, see https://kennis.limoengroen.nl/js-plugins/v1/
6 */
7
8(function ($) {
9
10  // Populate global object container "lt" with plugin specific object.
11  lt.data.OverflowHor = {};
12  lt.data.OverflowHor.usedID = {};
13
14  $.fn.ltOverflowHor = function(options) {
15    // Default settings.
16    var settings = $.extend({
17      htmlClass: '',
18      moveAllItems: false,
19    }, options);
20
21    return $(once('io', this)).each(function() {
22      new lt.classes.OverflowHor($(this), settings);
23    });
24  };
25
26  lt.classes.OverflowHor = function(element, settings) {
27
28    this.element = element;
29    this.settings = settings;
30    this.resizeTimer = null;
31    this.ioIndicator = this.uniqueHtmlId("io parent");
32
33    this.element.attr({
34      'data-io-ap': this.ioIndicator,
35    });
36    var overflowContainerInit = $('<div class="overflow-container"><div class="overflow-container-inner"><ul class="overflow-items"></ul></div></div>');
37    overflowContainerInit.find('ul.overflow-items').attr({
38      'data-io-op': this.ioIndicator,
39    });
40
41    $(once('overflow-hor', this.element)).after(overflowContainerInit);
42
43    this.html = $('html');
44    this.originalParent = $('[data-io-ap="' + this.ioIndicator + '"]');
45    this.adoptingParent = $('[data-io-op="' + this.ioIndicator + '"]');
46
47    this.apply();
48
49    var that = this;
50
51    $(window).resize(function () {
52      that.moveItems();
53    });
54    window.addEventListener('orientationchange', function () {
55      that.moveItems();
56    });
57    window.addEventListener('hashchange', function () {
58      that.moveItems();
59    });
60
61  };
62
63  lt.classes.OverflowHor.prototype.adopt = function () {
64    var that = this;
65    window.requestAnimationFrame(function () {
66      $(that.element.find('> *').get().reverse()).each(function () {
67        if ((that.originalParent[0].offsetWidth < that.originalParent[0].scrollWidth)) {
68          that.element.addClass('io-active');
69          that.html.addClass(that.settings.htmlClass);
70          // Move all items at once.
71          if (that.settings.moveAllItems) {
72            $(this).parent().find('> *').prependTo(that.adoptingParent);
73          }
74          // Move each item seperately.
75          else {
76            $(this).prependTo(that.adoptingParent);
77          }
78        }
79      });
80    });
81  };
82
83  lt.classes.OverflowHor.prototype.unAdopt = function () {
84    var that = this;
85    window.requestAnimationFrame(function () {
86      that.adoptingParent.find('> *').each(function () {
87        $(this).appendTo(that.originalParent);
88        that.element.removeClass('io-active');
89        that.html.removeClass(that.settings.htmlClass);
90      });
91    });
92  };
93
94  lt.classes.OverflowHor.prototype.moveItems = function () {
95    // If the originalParent has overflow, move it to adoptingParent.
96    // If there is room again, move it back to originalParent.
97    // First try to move item back from adoptingParent to originalParent.
98    this.unAdopt();
99
100    // When originalParent has overflow, move overflowing item to adoptingParent.
101    this.adopt();
102  };
103
104  lt.classes.OverflowHor.prototype.apply = function () {
105    this.moveItems();
106  };
107
108  lt.classes.OverflowHor.prototype.uniqueHtmlId = function(text) {
109    var id = lt.helpers.cleanAttrName(text);
110    if (lt.data.OverflowHor.usedID[id]) {
111      lt.data.OverflowHor.usedID[id].count++;
112      return id + '-' + lt.data.OverflowHor.usedID[id].count;
113    }
114    else {
115      lt.data.OverflowHor.usedID[id] = {};
116      lt.data.OverflowHor.usedID[id].count = 1;
117      return id;
118    }
119  };
120
121
122}(jQuery));