feat(pull-to-refresh): new system-like PTR behavior in iOS theme

nolimits4web · nolimits4web · commit 14a9c1482ccd · 2021-08-13T14:05:52.000+03:00
diff --git a/src/core/components/pull-to-refresh/pull-to-refresh-class.js b/src/core/components/pull-to-refresh/pull-to-refresh-class.js
@@ -29,7 +29,7 @@ class PullToRefresh extends Framework7Class {
     // Done
     ptr.done = function done() {
       const $transitionTarget = isMaterial ? $preloaderEl : $el;
-      $transitionTarget.transitionEnd(() => {
+      $transitionTarget.once('transitionend', () => {
         $el.removeClass('ptr-transitioning ptr-pull-up ptr-pull-down ptr-closing');
         $el.trigger('ptr:done');
         ptr.emit('local::done ptrDone', $el[0]);
@@ -107,6 +107,20 @@ class PullToRefresh extends Framework7Class {
       triggerDistance = 38;
     }
 
+    function setPreloaderProgress(progress = 0) {
+      const $bars = $preloaderEl.find('.preloader-inner-line');
+      const perBarProgress = 1 / $bars.length;
+
+      $bars.forEach((barEl, barIndex) => {
+        const barProgress = (progress - barIndex * perBarProgress) / perBarProgress;
+        barEl.style.opacity = Math.max(Math.min(barProgress, 1), 0) * 0.27;
+      });
+    }
+
+    function unsetPreloaderProgress() {
+      $preloaderEl.find('.preloader-inner-line').css('opacity', '');
+    }
+
     function handleTouchStart(e) {
       if (isTouched) {
         if (device.os === 'android') {
@@ -168,6 +182,9 @@ class PullToRefresh extends Framework7Class {
 
       if (!isMoved) {
         $el.removeClass('ptr-transitioning');
+        if (isIos) {
+          setPreloaderProgress(0);
+        }
         let targetIsScrollable;
         scrollHeight = $el[0].scrollHeight;
         offsetHeight = $el[0].offsetHeight;
@@ -251,12 +268,27 @@ class PullToRefresh extends Framework7Class {
               .transform(`rotate(${180 * (Math.abs(touchesDiff) / 66) + 100}deg)`);
           } else {
             // eslint-disable-next-line
-            if (ptr.bottom) {
+            if (ptr.bottom || isIos) {
               $el.children().transform(`translate3d(0,${translate}px,0)`);
             } else {
+              // eslint-disable-next-line
               $el.transform(`translate3d(0,${translate}px,0)`);
             }
+            if (isIos) {
+              $preloaderEl.transform(`translate3d(0,0px,0)`);
+            }
           }
+        } else if (isIos && !ptr.bottom) {
+          $preloaderEl.transform(`translate3d(0,${scrollTop}px,0)`);
+        }
+
+        let progress;
+        if (isIos && !refresh) {
+          progress =
+            useTranslate || forceUseTranslate
+              ? Math.abs(touchesDiff) ** 0.85 / triggerDistance
+              : Math.abs(touchesDiff) / (triggerDistance * 2);
+          setPreloaderProgress(progress);
         }
 
         if (
@@ -266,6 +298,7 @@ class PullToRefresh extends Framework7Class {
         ) {
           refresh = true;
           $el.addClass('ptr-pull-up').removeClass('ptr-pull-down');
+          unsetPreloaderProgress();
         } else {
           refresh = false;
           $el.removeClass('ptr-pull-up').addClass('ptr-pull-down');
@@ -315,8 +348,8 @@ class PullToRefresh extends Framework7Class {
       if (isMaterial) {
         $preloaderEl.transform('').find('.ptr-arrow').transform('');
       } else {
-        // eslint-disable-next-line
-        if (ptr.bottom) {
+        $preloaderEl.transform('');
+        if (ptr.bottom || isIos) {
           $el.children().transform('');
         } else {
           $el.transform('');
@@ -358,7 +391,7 @@ class PullToRefresh extends Framework7Class {
       if (isMaterial) {
         $preloaderEl.transform('').find('.ptr-arrow').transform('');
       } else {
-        // eslint-disable-next-line
+        $preloaderEl.transform('');
         if (ptr.bottom) {
           $el.children().transform('');
         } else {
@@ -396,6 +429,9 @@ class PullToRefresh extends Framework7Class {
 
       if (!mousewheelMoved) {
         $el.removeClass('ptr-transitioning');
+        if (isIos) {
+          setPreloaderProgress(0);
+        }
         let targetIsScrollable;
         scrollHeight = $el[0].scrollHeight;
         offsetHeight = $el[0].offsetHeight;
@@ -468,12 +504,22 @@ class PullToRefresh extends Framework7Class {
             $el.children().transform(`translate3d(0,${translate}px,0)`);
           } else {
             $el.transform(`translate3d(0,${translate}px,0)`);
+            if (isIos) {
+              $preloaderEl.transform(`translate3d(0,${-translate}px,0)`);
+            }
           }
         }
 
+        let progress;
+        if (isIos && !refresh) {
+          progress = Math.abs(translate) / triggerDistance;
+          setPreloaderProgress(progress);
+        }
+
         if (Math.abs(translate) > triggerDistance) {
           refresh = true;
           $el.addClass('ptr-pull-up').removeClass('ptr-pull-down');
+          unsetPreloaderProgress();
         } else {
           refresh = false;
           $el.removeClass('ptr-pull-up').addClass('ptr-pull-down');
diff --git a/src/core/components/pull-to-refresh/pull-to-refresh-ios.less b/src/core/components/pull-to-refresh/pull-to-refresh-ios.less
@@ -1,71 +1,63 @@
 .ios {
   .ptr-preloader {
-    margin-top: calc(-1 * var(--f7-ptr-size));
+    margin-bottom: calc(-1 * var(--f7-ptr-size));
     width: 100%;
     left: 0;
-  }
-  .ptr-arrow {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    background: no-repeat center;
-    z-index: 10;
-    transform: rotate(0deg) translate3d(0, 0, 0);
-    transition-duration: 300ms;
-    transition-property: transform, opacity;
-    width: 12px;
-    height: 20px;
-    margin-left: -6px;
-    margin-top: -10px;
-    visibility: visible;
-    color: var(--f7-preloader-color);
-    &:after {
-      .core-icons-font();
-      width: 12px;
-      height: 20px;
-      line-height: 20px;
-      font-size: 10px;
-      content: 'ptr_arrow_ios';
+    top: 0;
+    position: relative;
+    .preloader {
+      visibility: visible;
     }
   }
-  .ptr-content:not(.ptr-refreshing) {
+
+  .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) {
     .ptr-preloader .preloader,
     .ptr-preloader .preloader-inner {
       animation: none;
     }
   }
-  .ptr-transitioning,
-  .ptr-refreshing {
-    transition-duration: 300ms;
-    transition-property: transform;
+  .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up):not(.ptr-pull-down),
+  .ptr-content.ptr-closing {
+    .preloader-inner-line {
+      opacity: 0 !important;
+    }
   }
+
+  .ptr-transitioning,
   .ptr-refreshing {
-    transform: translate3d(0, var(--f7-ptr-size), 0);
-    .ptr-arrow {
-      visibility: hidden;
+    > * {
+      transition-duration: 300ms;
+      transition-property: transform;
     }
-    .ptr-preloader .preloader {
-      visibility: visible;
+  }
+
+  .ptr-transitioning {
+    .preloader-inner-line {
+      transition-duration: 100ms;
     }
   }
+
   .ptr-pull-up {
-    .ptr-arrow {
-      transform: rotate(180deg) translate3d(0, 0, 0);
+    .preloader {
+      animation: ios-ptr-preloader-spin 1s ease-out forwards;
     }
   }
-  .ptr-no-navbar,
-  .ptr-with-navbar-large-transparent,
-  .ptr-with-navbar-transparent {
-    margin-top: calc(-1 * var(--f7-ptr-size));
-    height: calc(100% + var(--f7-ptr-size));
-    .ptr-preloader {
-      margin-top: 0;
+
+  .ptr-refreshing:not(.ptr-bottom) {
+    transform: none;
+    > * {
+      transform: translate3d(0, var(--f7-ptr-size), 0);
+    }
+    > .ptr-preloader {
+      transform: translate3d(0, 0, 0);
     }
   }
+
   .ptr-bottom {
     .ptr-preloader {
-      margin-top: 0;
-      margin-bottom: calc(-1 * var(--f7-ptr-size));
+      margin-bottom: 0;
+      margin-top: calc(-1 * var(--f7-ptr-size));
+      position: relative;
     }
     &.ptr-transitioning,
     &.ptr-refreshing {
@@ -79,44 +71,18 @@
       > * {
         transform: translate3d(0, calc(-1 * var(--f7-ptr-size)), 0);
       }
-    }
-    .ptr-arrow {
-      transform: rotate(180deg) translate3d(0, 0, 0);
-    }
-    &.ptr-pull-up {
-      .ptr-arrow {
-        transform: rotate(0deg) translate3d(0, 0, 0);
+      > .ptr-preloader {
+        transform: translate3d(0, 0, 0);
       }
     }
   }
-  .ptr-with-navbar-large-transparent,
-  .ptr-with-navbar-transparent {
-    .ptr-preloader {
-      .preloader,
-      .ptr-arrow {
-        opacity: 0;
-        transition-duration: 300ms;
-        transition-property: transform, opacity;
-      }
-    }
-    &.ptr-pull-down,
-    &.ptr-pull-up,
-    &.ptr-refreshing {
-      .ptr-preloader {
-        .preloader,
-        .ptr-arrow {
-          opacity: 1;
-        }
-      }
-    }
-    &.ptr-closing {
-      .ptr-preloader {
-        .preloader,
-        .ptr-arrow {
-          opacity: 0;
-          transition-duration: 300ms;
-        }
-      }
-    }
+}
+
+@keyframes ios-ptr-preloader-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(135deg);
   }
 }
diff --git a/src/core/components/pull-to-refresh/pull-to-refresh.less b/src/core/components/pull-to-refresh/pull-to-refresh.less
@@ -5,6 +5,7 @@
   position: relative;
   top: var(--f7-ptr-top, 0);
   height: var(--f7-ptr-size);
+  pointer-events: none;
   .preloader {
     position: absolute;
     left: 50%;
