@mjhls/mjh-framework 1.0.735 → 1.0.736

package/README.md

@@ -1,4 +1,4 @@
-# mjh-framework v. 1.0.735
+# mjh-framework v. 1.0.736
 
 [![NPM](https://img.shields.io/npm/v/mjh-framework.svg)](https://www.npmjs.com/package/mjh-framework) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 

package/dist/cjs/View.js

@@ -206,7 +206,13 @@ var ISI = function ISI(props) {
       active = _useState2[0],
       setActive = _useState2[1];
 
+  var _useState3 = React.useState(false),
+      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+      bottomOfArticle = _useState4[0],
+      setbottomOfArticle = _useState4[1];
+
   var isi = React.useRef();
+
   React.useEffect(function () {
     if (active) {
       var offset = '5rem';
@@ -221,6 +227,72 @@ var ISI = function ISI(props) {
       isi.current.style.overflowY = '';
     }
   }, [active]);
+  React.useEffect(function () {
+    var detectBottomOfArticle = function detectBottomOfArticle() {
+      var article_body = document.getElementById('article__block');
+      var isi = document.getElementById('isi');
+      var articleBottomPosition = article_body.getBoundingClientRect().bottom - window.innerHeight;
+      console.log(articleBottomPosition, bottomOfArticle);
+      if (articleBottomPosition < 30 && !isi.classList.contains('in-view')) {
+        setbottomOfArticle(true);
+      }
+      if (articleBottomPosition > 60 && isi.classList.contains('in-view')) {
+        setbottomOfArticle(false);
+      }
+    };
+    window.addEventListener('scroll', detectBottomOfArticle);
+    return function () {
+      return window.removeEventListener('scroll', detectBottomOfArticle);
+    };
+  }, []);
+
+  React.useEffect(function () {
+    var isi = document.getElementById('isi');
+    if (bottomOfArticle) {
+      toggleSticky(true);
+      isi.classList.add('in-view');
+      if (active) {
+        setActive(false);
+      }
+    }
+    if (!bottomOfArticle) {
+      toggleSticky(false);
+      isi.classList.remove('in-view');
+    }
+  }, [bottomOfArticle]);
+
+  var toggleSticky = function toggleSticky(sticky) {
+    var isiToggle = document.getElementById('isiToggle');
+    var isiContent = document.getElementById('isiContent');
+    var isi = document.getElementById('isi');
+    if (sticky) {
+      isi.style.bottom = '-200px';
+      setTimeout(function () {
+        isi.style.maxHeight = 'unset';
+        isi.style.position = 'relative';
+        isi.style.boxShadow = 'none';
+        isi.style.zIndex = '1';
+        isi.style.marginTop = '-25rem';
+        isi.style.marginBottom = '15rem';
+        isiToggle.style.display = 'none';
+        isiContent.style.padding = '0';
+      }, 300);
+    } else if (!sticky) {
+
+      isi.style.marginBottom = '0';
+      isi.style.maxHeight = '12rem';
+      isi.style.position = 'fixed';
+      isi.style.boxShadow = '0 0 1rem 0 rgba(0, 0, 0, 0.5)';
+      isi.style.zIndex = '99999';
+
+      isiToggle.style.display = 'block';
+      isiContent.style.padding = '1rem';
+      setTimeout(function () {
+        isi.style.bottom = '0';
+        isi.style.marginTop = '0';
+      }, 300);
+    }
+  };
   return React__default['default'].createElement(
     React__default['default'].Fragment,
     null,
@@ -255,7 +327,7 @@ var ISI = function ISI(props) {
     React__default['default'].createElement(
       'style',
       { jsx: true },
-      '\n        #isi {\n          position: fixed;\n          z-index: 99999;\n          bottom: 0;\n          left: 0;\n          max-height: 10rem;\n          background-color: #ffffff;\n          overflow-x: hidden;\n          overflow-y: hidden;\n          transition: max-height 0.2s;\n          width: 100%;\n          box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);\n        }\n        #isiContent {\n          width: 100%;\n          max-width: 1000px;\n          margin-left: auto;\n          margin-right: auto;\n          position: relative;\n          padding: 1rem;\n          font-size: 1rem;\n        }\n        #isi::-webkit-scrollbar {\n          display: none;\n        }\n        #isiToggle {\n          position: absolute;\n          top: 0;\n          right: 0;\n          padding: 1rem;\n          font-weight: bold;\n          cursor: pointer;\n          font-size: 1rem;\n        }\n        #isiToggle p {\n          margin: 0;\n        }\n      '
+      '\n        #isi {\n          position: fixed;\n          z-index: 9999999;\n          bottom: 0;\n          left: 0;\n          max-height: 12rem;\n          background-color: #ffffff;\n          overflow-x: hidden;\n          overflow-y: hidden;\n          width: 100%;\n          box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);\n          transition: bottom .5s ease , margin-top .3s, max-height .2s;\n        }\n        #isiContent {\n          width: 100%;\n          max-width: 1000px;\n          margin-left: auto;\n          margin-right: auto;\n          position: relative;\n          padding: 1rem;\n          font-size: 1rem;\n        }\n        #isi::-webkit-scrollbar {\n          display: none;\n        }\n        #isiToggle {\n          position: absolute;\n          top: 0;\n          right: 0;\n          padding: 1rem;\n          font-weight: bold;\n          cursor: pointer;\n          font-size: 1rem;\n        }\n        #isiToggle p {\n          margin: 0;\n        }\n      '
     )
   );
 };
@@ -822,7 +894,7 @@ var Article = function Article(props) {
           } },
         React__default['default'].createElement(
           'div',
-          null,
+          { id: 'article__block' },
           React__default['default'].createElement(
             'div',
             { className: 'video-detail', style: { marginBottom: isCutomPage(props.article) || showIsi && Array.isArray(isi) && isi.length > 0 ? '15rem' : 0 } },
@@ -1041,7 +1113,7 @@ var Article = function Article(props) {
           )
         )
       ),
-      React__default['default'].createElement('hr', { className: 'article-seperater mb-5 mt-3' })
+      props.infiniteScroll && React__default['default'].createElement('hr', { className: 'article-seperater mb-5 mt-3' })
     );
   };
 

package/dist/esm/View.js

@@ -196,7 +196,13 @@ var ISI = function ISI(props) {
       active = _useState2[0],
       setActive = _useState2[1];
 
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      bottomOfArticle = _useState4[0],
+      setbottomOfArticle = _useState4[1];
+
   var isi = useRef();
+
   useEffect(function () {
     if (active) {
       var offset = '5rem';
@@ -211,6 +217,72 @@ var ISI = function ISI(props) {
       isi.current.style.overflowY = '';
     }
   }, [active]);
+  useEffect(function () {
+    var detectBottomOfArticle = function detectBottomOfArticle() {
+      var article_body = document.getElementById('article__block');
+      var isi = document.getElementById('isi');
+      var articleBottomPosition = article_body.getBoundingClientRect().bottom - window.innerHeight;
+      console.log(articleBottomPosition, bottomOfArticle);
+      if (articleBottomPosition < 30 && !isi.classList.contains('in-view')) {
+        setbottomOfArticle(true);
+      }
+      if (articleBottomPosition > 60 && isi.classList.contains('in-view')) {
+        setbottomOfArticle(false);
+      }
+    };
+    window.addEventListener('scroll', detectBottomOfArticle);
+    return function () {
+      return window.removeEventListener('scroll', detectBottomOfArticle);
+    };
+  }, []);
+
+  useEffect(function () {
+    var isi = document.getElementById('isi');
+    if (bottomOfArticle) {
+      toggleSticky(true);
+      isi.classList.add('in-view');
+      if (active) {
+        setActive(false);
+      }
+    }
+    if (!bottomOfArticle) {
+      toggleSticky(false);
+      isi.classList.remove('in-view');
+    }
+  }, [bottomOfArticle]);
+
+  var toggleSticky = function toggleSticky(sticky) {
+    var isiToggle = document.getElementById('isiToggle');
+    var isiContent = document.getElementById('isiContent');
+    var isi = document.getElementById('isi');
+    if (sticky) {
+      isi.style.bottom = '-200px';
+      setTimeout(function () {
+        isi.style.maxHeight = 'unset';
+        isi.style.position = 'relative';
+        isi.style.boxShadow = 'none';
+        isi.style.zIndex = '1';
+        isi.style.marginTop = '-25rem';
+        isi.style.marginBottom = '15rem';
+        isiToggle.style.display = 'none';
+        isiContent.style.padding = '0';
+      }, 300);
+    } else if (!sticky) {
+
+      isi.style.marginBottom = '0';
+      isi.style.maxHeight = '12rem';
+      isi.style.position = 'fixed';
+      isi.style.boxShadow = '0 0 1rem 0 rgba(0, 0, 0, 0.5)';
+      isi.style.zIndex = '99999';
+
+      isiToggle.style.display = 'block';
+      isiContent.style.padding = '1rem';
+      setTimeout(function () {
+        isi.style.bottom = '0';
+        isi.style.marginTop = '0';
+      }, 300);
+    }
+  };
   return React.createElement(
     React.Fragment,
     null,
@@ -245,7 +317,7 @@ var ISI = function ISI(props) {
     React.createElement(
       'style',
       { jsx: true },
-      '\n        #isi {\n          position: fixed;\n          z-index: 99999;\n          bottom: 0;\n          left: 0;\n          max-height: 10rem;\n          background-color: #ffffff;\n          overflow-x: hidden;\n          overflow-y: hidden;\n          transition: max-height 0.2s;\n          width: 100%;\n          box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);\n        }\n        #isiContent {\n          width: 100%;\n          max-width: 1000px;\n          margin-left: auto;\n          margin-right: auto;\n          position: relative;\n          padding: 1rem;\n          font-size: 1rem;\n        }\n        #isi::-webkit-scrollbar {\n          display: none;\n        }\n        #isiToggle {\n          position: absolute;\n          top: 0;\n          right: 0;\n          padding: 1rem;\n          font-weight: bold;\n          cursor: pointer;\n          font-size: 1rem;\n        }\n        #isiToggle p {\n          margin: 0;\n        }\n      '
+      '\n        #isi {\n          position: fixed;\n          z-index: 9999999;\n          bottom: 0;\n          left: 0;\n          max-height: 12rem;\n          background-color: #ffffff;\n          overflow-x: hidden;\n          overflow-y: hidden;\n          width: 100%;\n          box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);\n          transition: bottom .5s ease , margin-top .3s, max-height .2s;\n        }\n        #isiContent {\n          width: 100%;\n          max-width: 1000px;\n          margin-left: auto;\n          margin-right: auto;\n          position: relative;\n          padding: 1rem;\n          font-size: 1rem;\n        }\n        #isi::-webkit-scrollbar {\n          display: none;\n        }\n        #isiToggle {\n          position: absolute;\n          top: 0;\n          right: 0;\n          padding: 1rem;\n          font-weight: bold;\n          cursor: pointer;\n          font-size: 1rem;\n        }\n        #isiToggle p {\n          margin: 0;\n        }\n      '
     )
   );
 };
@@ -812,7 +884,7 @@ var Article = function Article(props) {
           } },
         React.createElement(
           'div',
-          null,
+          { id: 'article__block' },
           React.createElement(
             'div',
             { className: 'video-detail', style: { marginBottom: isCutomPage(props.article) || showIsi && Array.isArray(isi) && isi.length > 0 ? '15rem' : 0 } },
@@ -1031,7 +1103,7 @@ var Article = function Article(props) {
           )
         )
       ),
-      React.createElement('hr', { className: 'article-seperater mb-5 mt-3' })
+      props.infiniteScroll && React.createElement('hr', { className: 'article-seperater mb-5 mt-3' })
     );
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjhls/mjh-framework",
-  "version": "1.0.735",
+  "version": "1.0.736",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",