Fix clipping on mobile devices

simonwep · Jun 10, 2019 · 1cd2989 · 1cd2989
1 parent b157b87
commit 1cd2989
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 17 deletions.
diff --git a/dist/pickr.es5.min.js b/dist/pickr.es5.min.js
diff --git a/dist/pickr.es5.min.js.map b/dist/pickr.es5.min.js.map
diff --git a/dist/pickr.min.js b/dist/pickr.min.js
diff --git a/dist/pickr.min.js.map b/dist/pickr.min.js.map
diff --git a/src/js/libs/nanopop.js b/src/js/libs/nanopop.js
@@ -7,14 +7,25 @@
  * @returns {{update(): void}}
  * @constructor
  */
-export default function Nanopop({el, reference, pos, padding = 8}) {
+export default function Nanopop({el, reference, padding = 8}) {
     const vBehaviour = {start: 'sme', middle: 'mse', end: 'ems'};
     const hBehaviour = {top: 'tb', right: 'rl', bottom: 'bt', left: 'lr'};
-    const [position, variant = 'middle'] = pos.split('-');
-    const isVertical = (position === 'top' || position === 'bottom');
+
+    const getInfo = ((cache = {}) => (pos, cached = cache[pos]) => {
+        if (cached) return cached;
+        const [position, variant = 'middle'] = pos.split('-');
+        const isVertical = (position === 'top' || position === 'bottom');
+
+        return cache[pos] = {
+            position,
+            variant,
+            isVertical
+        };
+    })();
 
     return {
-        update() {
+        update(pos) {
+            const {position, variant, isVertical} = getInfo(pos);
             const rb = reference.getBoundingClientRect();
             const eb = el.getBoundingClientRect();
 
@@ -36,6 +47,7 @@ export default function Nanopop({el, reference, pos, padding = 8}) {
                 e: rb.bottom - rb.height
             };
 
+
             function apply(bevs, vars, styleprop) {
                 const vertical = styleprop === 'top';
                 const adder = vertical ? eb.height : eb.width;
@@ -45,13 +57,25 @@ export default function Nanopop({el, reference, pos, padding = 8}) {
                     const v = vars[ch];
                     if (v > 0 && (v + adder) < win) {
                         el.style[styleprop] = `${v}px`;
-                        break;
+                        return true;
                     }
                 }
+
+                return false;
             }
 
-            apply(vBehaviour[variant], variants, isVertical ? 'left' : 'top');
-            apply(hBehaviour[position], positions, isVertical ? 'top' : 'left');
+            const v1Ok = apply(vBehaviour[variant], variants, isVertical ? 'left' : 'top');
+            const v2Ok = apply(hBehaviour[position], positions, isVertical ? 'top' : 'left');
+            if (!v1Ok || !v2Ok) {
+                Object.assign(el.style, {
+                    top: `${padding}px`,
+                    left: 0,
+                    right: 0,
+                    margin: 'auto'
+                });
+            } else {
+                el.style.margin = 'inherit';
+            }
         }
     };
 }
diff --git a/src/js/pickr.js b/src/js/pickr.js
@@ -1,4 +1,3 @@
-
 // Import utils
 import * as _     from './utils/utils';
 import * as Color from './utils/color';
@@ -58,7 +57,7 @@ class Pickr {
             closeWithKey: 'Escape'
         }, opt);
 
-        const {swatches, inline, components, position} = opt;
+        const {swatches, inline, components} = opt;
 
         // Check interaction section
         if (!components.interaction) {
@@ -90,8 +89,7 @@ class Pickr {
         // Initialize positioning engine
         this._nanopop = Nanopop({
             reference: this._root.button,
-            el: this._root.app,
-            pos: position
+            el: this._root.app
         });
 
         // Initilization is finish, pickr is visible and ready for usage
@@ -428,10 +426,11 @@ class Pickr {
     }
 
     _rePositioningPicker() {
+        const {options} = this;
 
         // No repositioning needed if inline
-        if (!this.options.inline) {
-            this._nanopop.update();
+        if (!options.inline) {
+            this._nanopop.update(options.position);
         }
     }