From 3192b52562c2867359f014d55346b4e0f34a1342 Mon Sep 17 00:00:00 2001
From: Adam <adam.chan@stepworks.com.hk>
Date: Mon, 25 May 2020 12:21:04 +0800
Subject: [PATCH] added scrolledin check for items > window height

---
 js/scroll-hint.js     | 4 ++--
 js/scroll-hint.min.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/scroll-hint.js b/js/scroll-hint.js
index 1267603..7b6e2bd 100644
--- a/js/scroll-hint.js
+++ b/js/scroll-hint.js
@@ -209,7 +209,7 @@ var ScrollHint = function () {
       if (scrolledIn) {
         return;
       }
-      if ((0, _util.getOffset)(element).top + element.offsetHeight / 2 < (0, _util.getScrollTop)() + window.innerHeight) {
+      if ((0, _util.getOffset)(element).top + Math.min(element.offsetHeight, window.innerHeight) / 2 < (0, _util.getScrollTop)() + window.innerHeight) {
         item.scrolledIn = true;
         if (this.opt.remainingTime !== -1) {
           setTimeout(function () {
@@ -296,4 +296,4 @@ var getOffset = exports.getOffset = function getOffset(el) {
 };
 
 },{}]},{},[2])(2)
-});
\ No newline at end of file
+});
diff --git a/js/scroll-hint.min.js b/js/scroll-hint.min.js
index 243c16c..5643af1 100644
--- a/js/scroll-hint.min.js
+++ b/js/scroll-hint.min.js
@@ -16,4 +16,4 @@
  *
  * This header is generated by licensify (https://github.com/twada/licensify)
  */
-(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){"use strict";function assign(target,firstSource){if(target===undefined||target===null){throw new TypeError("Cannot convert first argument to object")}var to=Object(target);for(var i=1;i<arguments.length;i++){var nextSource=arguments[i];if(nextSource===undefined||nextSource===null){continue}var keysArray=Object.keys(Object(nextSource));for(var nextIndex=0,len=keysArray.length;nextIndex<len;nextIndex++){var nextKey=keysArray[nextIndex];var desc=Object.getOwnPropertyDescriptor(nextSource,nextKey);if(desc!==undefined&&desc.enumerable){to[nextKey]=nextSource[nextKey]}}}return to}function polyfill(){if(!Object.assign){Object.defineProperty(Object,"assign",{enumerable:false,configurable:true,writable:true,value:assign})}}module.exports={assign:assign,polyfill:polyfill}},{}],2:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _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}}();var _es6ObjectAssign=require("es6-object-assign");var _util=require("./util");function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}var defaults={suggestClass:"is-active",scrollableClass:"is-scrollable",scrollableRightClass:"is-right-scrollable",scrollableLeftClass:"is-left-scrollable",scrollHintClass:"scroll-hint",scrollHintIconClass:"scroll-hint-icon",scrollHintIconAppendClass:"",scrollHintIconWrapClass:"scroll-hint-icon-wrap",scrollHintText:"scroll-hint-text",scrollHintBorderWidth:10,remainingTime:-1,enableOverflowScrolling:true,applyToParents:false,suggestiveShadow:false,offset:0,i18n:{scrollable:"scrollable"}};var ScrollHint=function(){function ScrollHint(ele,option){var _this=this;_classCallCheck(this,ScrollHint);this.opt=(0,_es6ObjectAssign.assign)({},defaults,option);this.items=[];var elements=typeof ele==="string"?document.querySelectorAll(ele):ele;var applyToParents=this.opt.applyToParents;[].forEach.call(elements,function(element){if(applyToParents){element=element.parentElement}element.style.position="relative";element.style.overflow="auto";if(_this.opt.enableOverflowScrolling){if("overflowScrolling"in element.style){element.style.overflowScrolling="touch"}else if("webkitOverflowScrolling"in element.style){element.style.webkitOverflowScrolling="touch"}}var item={element:element,scrolledIn:false,interacted:false};document.addEventListener("scroll",function(e){if(e.target===element){item.interacted=true;_this.updateItem(item)}},true);(0,_util.addClass)(element,_this.opt.scrollHintClass);(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>");_this.items.push(item)});window.addEventListener("scroll",function(){_this.updateItems()});window.addEventListener("resize",function(){_this.updateItems()});this.updateItems()}_createClass(ScrollHint,[{key:"isScrollable",value:function isScrollable(item){var offset=this.opt.offset;var element=item.element;var offsetWidth=element.offsetWidth;return offsetWidth+offset<element.scrollWidth}},{key:"checkScrollableDir",value:function checkScrollableDir(item){var _opt=this.opt,scrollHintBorderWidth=_opt.scrollHintBorderWidth,scrollableRightClass=_opt.scrollableRightClass,scrollableLeftClass=_opt.scrollableLeftClass;var element=item.element;var child=element.children[0];var width=child.scrollWidth;var parentWidth=element.offsetWidth;var scrollLeft=element.scrollLeft;if(parentWidth+scrollLeft<width-scrollHintBorderWidth){(0,_util.addClass)(element,scrollableRightClass)}else{(0,_util.removeClass)(element,scrollableRightClass)}if(parentWidth<width&&scrollLeft>scrollHintBorderWidth){(0,_util.addClass)(element,scrollableLeftClass)}else{(0,_util.removeClass)(element,scrollableLeftClass)}}},{key:"needSuggest",value:function needSuggest(item){var scrolledIn=item.scrolledIn,interacted=item.interacted;return!interacted&&scrolledIn&&this.isScrollable(item)}},{key:"updateItems",value:function updateItems(){var _this2=this;[].forEach.call(this.items,function(item){_this2.updateItem(item)})}},{key:"updateStatus",value:function updateStatus(item){var _this3=this;var element=item.element,scrolledIn=item.scrolledIn;if(scrolledIn){return}if((0,_util.getOffset)(element).top+element.offsetHeight/2<(0,_util.getScrollTop)()+window.innerHeight){item.scrolledIn=true;if(this.opt.remainingTime!==-1){setTimeout(function(){item.interacted=true;_this3.updateItem(item)},this.opt.remainingTime)}}}},{key:"updateItem",value:function updateItem(item){var opt=this.opt;var element=item.element;var target=element.querySelector('[data-target="scrollable-icon"]');this.updateStatus(item);if(this.isScrollable(item)){(0,_util.addClass)(element,opt.scrollableClass)}else{(0,_util.removeClass)(element,opt.scrollableClass)}if(this.needSuggest(item)){(0,_util.addClass)(target,opt.suggestClass)}else{(0,_util.removeClass)(target,opt.suggestClass)}if(opt.suggestiveShadow){this.checkScrollableDir(item)}}}]);return ScrollHint}();exports.default=ScrollHint;module.exports=exports["default"]},{"./util":3,"es6-object-assign":1}],3:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var append=exports.append=function append(element,string){var div=document.createElement("div");div.innerHTML=string;while(div.children.length>0){element.appendChild(div.children[0])}};var addClass=exports.addClass=function addClass(element,className){if(element.classList){element.classList.add(className)}else{element.className+=" "+className}};var removeClass=exports.removeClass=function removeClass(element,className){if(element.classList){element.classList.remove(className)}else{element.className=element.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}};var getScrollTop=exports.getScrollTop=function getScrollTop(){return window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0};var getScrollLeft=exports.getScrollLeft=function getScrollLeft(){return window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0};var getOffset=exports.getOffset=function getOffset(el){var rect=el.getBoundingClientRect();return{top:rect.top+getScrollTop(),left:rect.left+getScrollLeft()}}},{}]},{},[2])(2)});
\ No newline at end of file
+!function(f){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=f();else if("function"==typeof define&&define.amd)define([],f);else{var g;(g="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).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="function"==typeof require&&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||e)}),l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){"use strict";function assign(target,firstSource){if(null==target)throw new TypeError("Cannot convert first argument to object");for(var to=Object(target),i=1;i<arguments.length;i++){var nextSource=arguments[i];if(null!=nextSource)for(var keysArray=Object.keys(Object(nextSource)),nextIndex=0,len=keysArray.length;nextIndex<len;nextIndex++){var nextKey=keysArray[nextIndex],desc=Object.getOwnPropertyDescriptor(nextSource,nextKey);void 0!==desc&&desc.enumerable&&(to[nextKey]=nextSource[nextKey])}}return to}function polyfill(){Object.assign||Object.defineProperty(Object,"assign",{enumerable:!1,configurable:!0,writable:!0,value:assign})}module.exports={assign:assign,polyfill:polyfill}},{}],2:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}(),_es6ObjectAssign=require("es6-object-assign"),_util=require("./util");function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var defaults={suggestClass:"is-active",scrollableClass:"is-scrollable",scrollableRightClass:"is-right-scrollable",scrollableLeftClass:"is-left-scrollable",scrollHintClass:"scroll-hint",scrollHintIconClass:"scroll-hint-icon",scrollHintIconAppendClass:"",scrollHintIconWrapClass:"scroll-hint-icon-wrap",scrollHintText:"scroll-hint-text",scrollHintBorderWidth:10,remainingTime:-1,enableOverflowScrolling:!0,applyToParents:!1,suggestiveShadow:!1,offset:0,i18n:{scrollable:"scrollable"}},ScrollHint=function(){function ScrollHint(ele,option){var _this=this;_classCallCheck(this,ScrollHint),this.opt=(0,_es6ObjectAssign.assign)({},defaults,option),this.items=[];var elements="string"==typeof ele?document.querySelectorAll(ele):ele,applyToParents=this.opt.applyToParents;[].forEach.call(elements,(function(element){applyToParents&&(element=element.parentElement),element.style.position="relative",element.style.overflow="auto",_this.opt.enableOverflowScrolling&&("overflowScrolling"in element.style?element.style.overflowScrolling="touch":"webkitOverflowScrolling"in element.style&&(element.style.webkitOverflowScrolling="touch"));var item={element:element,scrolledIn:!1,interacted:!1};document.addEventListener("scroll",(function(e){e.target===element&&(item.interacted=!0,_this.updateItem(item))}),!0),(0,_util.addClass)(element,_this.opt.scrollHintClass),(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>"),_this.items.push(item)})),window.addEventListener("scroll",(function(){_this.updateItems()})),window.addEventListener("resize",(function(){_this.updateItems()})),this.updateItems()}return _createClass(ScrollHint,[{key:"isScrollable",value:function isScrollable(item){var offset=this.opt.offset,element=item.element,offsetWidth;return element.offsetWidth+offset<element.scrollWidth}},{key:"checkScrollableDir",value:function checkScrollableDir(item){var _opt=this.opt,scrollHintBorderWidth=_opt.scrollHintBorderWidth,scrollableRightClass=_opt.scrollableRightClass,scrollableLeftClass=_opt.scrollableLeftClass,element=item.element,child,width=element.children[0].scrollWidth,parentWidth=element.offsetWidth,scrollLeft=element.scrollLeft;parentWidth+scrollLeft<width-scrollHintBorderWidth?(0,_util.addClass)(element,scrollableRightClass):(0,_util.removeClass)(element,scrollableRightClass),parentWidth<width&&scrollLeft>scrollHintBorderWidth?(0,_util.addClass)(element,scrollableLeftClass):(0,_util.removeClass)(element,scrollableLeftClass)}},{key:"needSuggest",value:function needSuggest(item){var scrolledIn=item.scrolledIn,interacted;return!item.interacted&&scrolledIn&&this.isScrollable(item)}},{key:"updateItems",value:function updateItems(){var _this2=this;[].forEach.call(this.items,(function(item){_this2.updateItem(item)}))}},{key:"updateStatus",value:function updateStatus(item){var _this3=this,element=item.element,scrolledIn;item.scrolledIn||(0,_util.getOffset)(element).top+Math.min(element.offsetHeight,window.innerHeight)/2<(0,_util.getScrollTop)()+window.innerHeight&&(item.scrolledIn=!0,-1!==this.opt.remainingTime&&setTimeout((function(){item.interacted=!0,_this3.updateItem(item)}),this.opt.remainingTime))}},{key:"updateItem",value:function updateItem(item){var opt=this.opt,element=item.element,target=element.querySelector('[data-target="scrollable-icon"]');this.updateStatus(item),this.isScrollable(item)?(0,_util.addClass)(element,opt.scrollableClass):(0,_util.removeClass)(element,opt.scrollableClass),this.needSuggest(item)?(0,_util.addClass)(target,opt.suggestClass):(0,_util.removeClass)(target,opt.suggestClass),opt.suggestiveShadow&&this.checkScrollableDir(item)}}]),ScrollHint}();exports.default=ScrollHint,module.exports=exports.default},{"./util":3,"es6-object-assign":1}],3:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var append=exports.append=function append(element,string){var div=document.createElement("div");for(div.innerHTML=string;div.children.length>0;)element.appendChild(div.children[0])},addClass=exports.addClass=function addClass(element,className){element.classList?element.classList.add(className):element.className+=" "+className},removeClass=exports.removeClass=function removeClass(element,className){element.classList?element.classList.remove(className):element.className=element.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")},getScrollTop=exports.getScrollTop=function getScrollTop(){return window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0},getScrollLeft=exports.getScrollLeft=function getScrollLeft(){return window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0},getOffset=exports.getOffset=function getOffset(el){var rect=el.getBoundingClientRect();return{top:rect.top+getScrollTop(),left:rect.left+getScrollLeft()}}},{}]},{},[2])(2)}));
\ No newline at end of file