https://www.allied-telesis.co.jp/assets/js/lib/scroll-hint.js

1/**
2 * Modules in this bundle
3 * @license
4 *
5 * scroll-hint:
6 *   license: MIT (http://opensource.org/licenses/MIT)
7 *   author: steelydylan
8 *   version: 1.2.5
9 *
10 * es6-object-assign:
11 *   license: MIT (http://opensource.org/licenses/MIT)
12 *   author: Rubén Norte <[email protected]>
13 *   homepage: https://github.com/rubennorte/es6-object-assign
14 *   version: 1.1.0
15 *
16 * This header is generated by licensify (https://github.com/twada/licensify)
17 */
18(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ScrollHint = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
19/**
20 * Code refactored from Mozilla Developer Network:
21 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
22 */
23
24'use strict';
25
26function assign(target, firstSource) {
27  if (target === undefined || target === null) {
28    throw new TypeError('Cannot convert first argument to object');
29  }
30
31  var to = Object(target);
32  for (var i = 1; i < arguments.length; i++) {
33    var nextSource = arguments[i];
34    if (nextSource === undefined || nextSource === null) {
35      continue;
36    }
37
38    var keysArray = Object.keys(Object(nextSource));
39    for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
40      var nextKey = keysArray[nextIndex];
41      var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
42      if (desc !== undefined && desc.enumerable) {
43        to[nextKey] = nextSource[nextKey];
44      }
45    }
46  }
47  return to;
48}
49
50function polyfill() {
51  if (!Object.assign) {
52    Object.defineProperty(Object, 'assign', {
53      enumerable: false,
54      configurable: true,
55      writable: true,
56      value: assign
57    });
58  }
59}
60
61module.exports = {
62  assign: assign,
63  polyfill: polyfill
64};
65
66},{}],2:[function(require,module,exports){
67'use strict';
68
69Object.defineProperty(exports, "__esModule", {
70  value: true
71});
72
73var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
74
75var _es6ObjectAssign = require('es6-object-assign');
76
77var _util = require('./util');
78
79function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
80
81var defaults = {
82  suggestClass: 'is-active',
83  scrollableClass: 'is-scrollable',
84  scrollableRightClass: 'is-right-scrollable',
85  scrollableLeftClass: 'is-left-scrollable',
86  scrollHintClass: 'scroll-hint',
87  scrollHintIconClass: 'scroll-hint-icon',
88  scrollHintIconAppendClass: '', // 'scroll-hint-icon-white'
89  scrollHintIconWrapClass: 'scroll-hint-icon-wrap',
90  scrollHintText: 'scroll-hint-text',
91  scrollHintBorderWidth: 10,
92  remainingTime: -1,
93  enableOverflowScrolling: true,
94  applyToParents: false,
95  suggestiveShadow: false,
96  offset: 0,
97  i18n: {
98    scrollable: 'scrollable'
99  }
100};
101
102var ScrollHint = function () {
103  function ScrollHint(ele, option) {
104    var _this = this;
105
106    _classCallCheck(this, ScrollHint);
107
108    this.opt = (0, _es6ObjectAssign.assign)({}, defaults, option);
109    this.items = [];
110    var elements = typeof ele === 'string' ? document.querySelectorAll(ele) : ele;
111    var applyToParents = this.opt.applyToParents;
112
113    [].forEach.call(elements, function (element) {

114      if (applyToParents) {
115        element = element.parentElement;
116      }
117      element.style.position = 'relative';
118      element.style.overflow = 'auto';
119      if (_this.opt.enableOverflowScrolling) {
120        if ('overflowScrolling' in element.style) {
121          element.style.overflowScrolling = 'touch';
122        } else if ('webkitOverflowScrolling' in element.style) {
123          element.style.webkitOverflowScrolling = 'touch';
124        }
125      }
126      var item = {
127        element: element,
128        scrolledIn: false,
129        interacted: false
130      };
131      document.addEventListener('scroll', function (e) {
132        if (e.target === element) {
133          item.interacted = true;
134          _this.updateItem(item);
135        }
136      }, true);
137      (0, _util.addClass)(element, _this.opt.scrollHintClass);
138      (0, _util.append)(element, '<div class="' + _this.opt.scrollHintIconWrapClass + '" data-target="scrollable-icon">\n        <span class="' + _this.opt.scrollHintIconClass + (_this.opt.scrollHintIconAppendClass ? ' ' + _this.opt.scrollHintIconAppendClass : '') + '">\n          <div class="' + _this.opt.scrollHintText + '">' + _this.opt.i18n.scrollable + '</div>\n        </span>\n      </div>');
139      _this.items.push(item);
140    });
141    window.addEventListener('scroll', function () {
142      _this.updateItems();
143    });
144    window.addEventListener('resize', function () {
145      _this.updateItems();
146    });
147    this.updateItems();
148  }
149
150  _createClass(ScrollHint, [{
151    key: 'isScrollable',
152    value: function isScrollable(item) {
153      var offset = this.opt.offset;
154      var element = item.element;
155      var offsetWidth = element.offsetWidth;
156
157      return offsetWidth + offset < element.scrollWidth;
158    }
159  }, {
160    key: 'checkScrollableDir',
161    value: function checkScrollableDir(item) {
162      var _opt = this.opt,
163          scrollHintBorderWidth = _opt.scrollHintBorderWidth,
164          scrollableRightClass = _opt.scrollableRightClass,
165          scrollableLeftClass = _opt.scrollableLeftClass;
166      var element = item.element;
167
168      var child = element.children[0];
169      var width = child.scrollWidth;
170      var parentWidth = element.offsetWidth;
171      var scrollLeft = element.scrollLeft;
172      if (parentWidth + scrollLeft < width - scrollHintBorderWidth) {
173        (0, _util.addClass)(element, scrollableRightClass);
174      } else {
175        (0, _util.removeClass)(element, scrollableRightClass);
176      }
177      if (parentWidth < width && scrollLeft > scrollHintBorderWidth) {
178        (0, _util.addClass)(element, scrollableLeftClass);
179      } else {
180        (0, _util.removeClass)(element, scrollableLeftClass);
181      }
182    }
183  }, {
184    key: 'needSuggest',
185    value: function needSuggest(item) {
186      var scrolledIn = item.scrolledIn,
187          interacted = item.interacted;
188
189      return !interacted && scrolledIn && this.isScrollable(item);
190    }
191  }, {
192    key: 'updateItems',
193    value: function updateItems() {
194      var _this2 = this;
195
196      [].forEach.call(this.items, function (item) {
197        _this2.updateItem(item);
198      });
199    }
200  }, {
201    key: 'updateStatus',
202    value: function updateStatus(item) {
203      var _this3 = this;
204
205      var element = item.element,
206          scrolledIn = item.scrolledIn;
207
208      if (scrolledIn) {
209        return;
210      }
211      var target = element.querySelector('[data-target="scrollable-icon"] > span');
212      if ((0, _util.getOffset)(target).top < (0, _util.getScrollTop)() + window.innerHeight) {
213        item.scrolledIn = true;
214        if (this.opt.remainingTime !== -1) {
215          setTimeout(function () {
216            item.interacted = true;
217            _this3.updateItem(item);
218          }, this.opt.remainingTime);
219        }
220      }
221    }
222  }, {
223    key: 'updateItem',
224    value: function updateItem(item) {
225      var opt = this.opt;
226      var element = item.element;
227
228      var target = element.querySelector('[data-target="scrollable-icon"]');
229      this.updateStatus(item);
230      if (this.isScrollable(item)) {
231        (0, _util.addClass)(element, opt.scrollableClass);
232      } else {
233        (0, _util.removeClass)(element, opt.scrollableClass);
234      }
235      if (this.needSuggest(item)) {
236        (0, _util.addClass)(target, opt.suggestClass);
237      } else {
238        (0, _util.removeClass)(target, opt.suggestClass);
239      }
240      if (opt.suggestiveShadow) {
241        this.checkScrollableDir(item);
242      }
243    }
244  }]);
245
246  return ScrollHint;
247}();

248
249exports.default = ScrollHint;
250module.exports = exports['default'];
251
252},{"./util":3,"es6-object-assign":1}],3:[function(require,module,exports){
253'use strict';
254
255Object.defineProperty(exports, "__esModule", {
256  value: true
257});
258var append = exports.append = function append(element, string) {
259  var div = document.createElement('div');
260  div.innerHTML = string;
261  while (div.children.length > 0) {
262    element.appendChild(div.children[0]);
263  }
264};
265
266var addClass = exports.addClass = function addClass(element, className) {
267  if (element.classList) {
268    element.classList.add(className);
269  } else {
270    element.className += ' ' + className;
271  }
272};
273
274var removeClass = exports.removeClass = function removeClass(element, className) {
275  if (element.classList) {
276    element.classList.remove(className);
277  } else {
278    element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
279  }
280};
281
282var getScrollTop = exports.getScrollTop = function getScrollTop() {
283  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
284};
285
286var getScrollLeft = exports.getScrollLeft = function getScrollLeft() {
287  return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
288};
289
290var getOffset = exports.getOffset = function getOffset(el) {
291  var rect = el.getBoundingClientRect();
292  return {
293    top: rect.top + getScrollTop(),
294    left: rect.left + getScrollLeft()
295  };
296};
297
298},{}]},{},[2])(2)
299});