CU-mhbk6g Add a resize event and viewport correcting code (#384)

source/js/app.js

@@ -23,6 +23,8 @@ import Segment from './segment';
 import ContainerMediaQuery from './mediaQuery';
 import Pagination from './pagination';
 import ResizeByChildren from './resizeByChildren';
+import KeepInViewPort from './keepInViewPort';
+
 
 import './datepicker';
 import './helpers/swipe';
@@ -40,9 +42,9 @@ const NotificationDocInstance = new NotificationDoc;
 const SidebarInstance = new Sidebar;
 const NavbarInstance = new Navbar();
 const ContainerMediaQueryInstance = new ContainerMediaQuery();
+const KeepInViewPortInstance = new KeepInViewPort(); 
 const ResizeByChildrenInstance = new ResizeByChildren(); 
 
-
 const tables = document.querySelectorAll('.c-table');
 if (tables.length > 0) {
     for (let table of tables) {

source/js/keepInViewPort.js

@@ -0,0 +1,53 @@
+export default class KeepInViewPort {
+  constructor() {
+    this.VIEWPORTRESIZE = 'js-keep-in-viewport-after-resize';
+    this.VIEWPORT = 'js-keep-in-viewport';
+
+    // Get containers.
+    const ViewPortResizeContainer = document.querySelectorAll(`[${this.VIEWPORTRESIZE}]`);
+
+    if(ViewPortResizeContainer) {
+      ViewPortResizeContainer.forEach(item => {
+        item.addEventListener('resizeByChildren', KeepInViewPort.resizeEvent);
+      });
+    }
+
+    // Get containers.
+    const ViewPortContainer = document.querySelectorAll(`[${this.VIEWPORT}]`);
+
+    if(ViewPortContainer) {
+      ViewPortContainer.forEach(item => {
+        KeepInViewPort.moveInsideViewPort(item, 8);
+      });
+    }
+  }
+
+  /**
+   * Keep the actual viewport function cleaned from event objects.
+   * @param {object} event 
+   * @return void
+   */
+  static resizeEvent(event) {
+    KeepInViewPort.moveInsideViewPort(event.target, 8);
+  }
+
+  /**
+   * Move element inside viewport.
+   * @param {object} element 
+   * @param {integer} margin
+   * @return void
+   */
+  static moveInsideViewPort(element, margin) {
+    // Enable calculations.
+    element.classList.add('u-display--block');
+
+    // Compare window width with right most position.
+    const viewPortRightDistance = window.innerWidth - element.getBoundingClientRect().right;
+    if (viewPortRightDistance < 0) {
+        element.setAttribute('style', `${element.getAttribute('style')} left: ${viewPortRightDistance - margin}px;`);
+    }
+
+    // Disable calculations.
+    element.classList.remove('u-display--block'); 
+  }
+}

source/js/resizeByChildren.js

@@ -1,40 +1,40 @@
 export default class ResizeByChildren {
   constructor() {
     this.RESIZE = 'js-resize-by-children';
-
-    //Get containers
-    let resizeContainer = document.querySelectorAll(`[${this.RESIZE}]`);
-
+    // Get containers
+    const resizeContainer = document.querySelectorAll(`[${this.RESIZE}]`);
+
     if(resizeContainer) {
 
       resizeContainer.forEach(item => {
 
-        //Enale calculations
+        // Enable calculations
         item.classList.add('u-display--block'); 
-
-        //Declare
-        let currentChilds = item.querySelectorAll('li > a'); 
-        let widthStack = []; 
-
-        //Get all widts as array
+        // Declare
+        const currentChilds = item.querySelectorAll('li > a'); 
+        const widthStack = []; 
+
+        // Get all widts as array
         currentChilds.forEach(child => {
           widthStack.push(child.getBoundingClientRect().width);
         }); 
+
 
-        //Get largest
-        let maxSize = Math.round(Math.max.apply(null, widthStack)); 
+        // Get largest
+        const maxSize = Math.round(Math.max.apply(null, widthStack)); 
 
         if(item.getBoundingClientRect().width > maxSize) {
-          item.setAttribute("style", "width:" + maxSize + "px !important;");
+          item.setAttribute('style', 'width:' + maxSize + 'px !important;');
+          item.dispatchEvent(new Event('resizeByChildren'));
         }
 
-        //Disable calculations
+        // Disable calculations
         item.classList.remove('u-display--block'); 
 
-        //Add class as calc
+        // Add class as calc
         item.classList.add(item.classList[0] + '--calculated'); 
 
-      }); 
+      });
     }
   }
 }