From 55ec4e5053848bc8b8434bb57fdddbb16f687e8a Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Tue, 18 Jun 2019 01:27:14 +0200
Subject: [PATCH] Frontend: Add experimental "pull to refresh" component

---
 frontend/src/component/components.js      |   2 +
 frontend/src/component/p-pull-refresh.vue | 207 ++++++++++++++++++++++
 frontend/src/css/app.css                  |  33 ++++
 frontend/src/pages/photos.vue             |  28 +--
 4 files changed, 257 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/component/p-pull-refresh.vue

diff --git a/frontend/src/component/components.js b/frontend/src/component/components.js
index 34b384bc0..3673d870e 100644
--- a/frontend/src/component/components.js
+++ b/frontend/src/component/components.js
@@ -9,6 +9,7 @@ import PPhotoViewer from "./p-photo-viewer.vue";
 import PPhotoSearch from "./p-photo-search.vue";
 import PPhotoClipboard from "./p-photo-clipboard.vue";
 import PScrollTop from "./p-scroll-top.vue";
+import PPullRefresh from "./p-pull-refresh.vue";
 
 const components = {};
 
@@ -24,6 +25,7 @@ components.install = (Vue) => {
     Vue.component("p-photo-search", PPhotoSearch);
     Vue.component("p-photo-clipboard", PPhotoClipboard);
     Vue.component("p-scroll-top", PScrollTop);
+    Vue.component("p-pull-refresh", PPullRefresh);
 };
 
 export default components;
diff --git a/frontend/src/component/p-pull-refresh.vue b/frontend/src/component/p-pull-refresh.vue
new file mode 100644
index 000000000..a7ae219af
--- /dev/null
+++ b/frontend/src/component/p-pull-refresh.vue
@@ -0,0 +1,207 @@
+<template>
+    <div class="p-pull-refresh">
+        <div class="pull-down-header" v-bind:style="{'height': pullDown.height + 'px'}">
+            <div class="pull-down-content" :style="pullDownContentStyle">
+                <i class="pull-down-icon material-icons">{{iconClass}}</i>
+            </div>
+        </div>
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    const STATUS_ERROR = -1;
+    const STATUS_START = 0;
+    const STATUS_READY = 1;
+    const STATUS_REFRESH = 2;
+    const ANIMATION = 'height .2s ease';
+
+    export default {
+        props: {
+            onRefresh: {
+                type: Function
+            },
+        },
+        data() {
+            return {
+                config: {
+                    errorLabel: "Failed to refresh",
+                    startLabel: "Pull to refresh",
+                    readyLabel: "Release to refresh",
+                    loadingLabel: "Updating...",
+                    pullDownHeight: 60,
+                },
+                pullDown: {
+                    status: 0,
+                    height: 0,
+                    msg: ''
+                },
+                canPull: false
+            };
+        },
+        computed: {
+            label() {
+                // label of pull down
+                if (this.pullDown.status === STATUS_ERROR) {
+                    return this.pullDown.msg;
+                }
+                return this.customLabels[this.pullDown.status + 1];
+            },
+            customLabels() {
+                return [this.config.errorLabel, this.config.startLabel, this.config.readyLabel, this.config.loadingLabel];
+            },
+            iconClass() {
+                // icon of pull down
+                if (this.pullDown.status === STATUS_REFRESH) {
+                    return 'refresh';
+                } else if (this.pullDown.status === STATUS_ERROR) {
+                    return 'error';
+                }
+                return 'refresh';
+            },
+            pullDownContentStyle() {
+                return {
+                    bottom: (this.config.pullDownHeight - 40) / 2 + 'px'
+                };
+            }
+        },
+        mounted() {
+            this.$nextTick(() => {
+                let el = this.$el;
+                let pullDownHeader = el.querySelector('.pull-down-header');
+                let icon = pullDownHeader.querySelector('.pull-down-icon');
+                // set default pullDownHeight
+                this.config.pullDownHeight = this.config.pullDownHeight || 60;
+                /**
+                 * reset the status of pull down
+                 * @param {Object} pullDown the pull down
+                 * @param {Boolean} withAnimation whether add animation when pull up
+                 */
+                let resetPullDown = (pullDown, withAnimation) => {
+                    if (withAnimation) {
+                        pullDownHeader.style.transition = ANIMATION;
+                    }
+                    pullDown.height = 0;
+                    pullDown.status = STATUS_START;
+                };
+                // store of touch position, include start position and distance
+                let touchPosition = {
+                    start: 0,
+                    distance: 0
+                };
+
+                // @see https://www.chromestatus.com/feature/5745543795965952
+                // Test via a getter in the options object to see if the passive property is accessed
+                let supportsPassive = false;
+                try {
+                    let opts = Object.defineProperty({}, 'passive', {
+                        get: function() {
+                            supportsPassive = true;
+                        }
+                    });
+                    /* global window */
+                    window.addEventListener("test", null, opts);
+                } catch (e) {}
+
+                // bind touchstart event to store start position of touch
+                el.addEventListener('touchstart', e => {
+                    if (el.scrollTop === 0) {
+                        this.canPull = true;
+                    } else {
+                        this.canPull = false;
+                    }
+                    touchPosition.start = e.touches.item(0).pageY;
+                }, supportsPassive ? {passive: true} : false);
+
+                /**
+                 * bind touchmove event, do the following:
+                 * first, update the height of pull down
+                 * finally, update the status of pull down based on the distance
+                 */
+                el.addEventListener('touchmove', e => {
+                    if (!this.canPull) {
+                        return;
+                    }
+
+                    let distance = e.touches.item(0).pageY - touchPosition.start;
+                    // limit the height of pull down to 180
+                    distance = distance > 180 ? 180 : distance;
+                    // prevent native scroll
+                    if (distance > 0) {
+                        el.style.overflow = 'hidden';
+                    }
+                    // update touchPosition and the height of pull down
+                    touchPosition.distance = distance;
+                    this.pullDown.height = distance;
+                    /**
+                     * if distance is bigger than the height of pull down
+                     * set the status of pull down to STATUS_READY
+                     */
+                    if (distance > this.config.pullDownHeight) {
+                        this.pullDown.status = STATUS_READY;
+                        icon.style.transform = 'rotate(180deg)';
+                    } else {
+                        /**
+                         * else set the status of pull down to STATUS_START
+                         * and rotate the icon based on distance
+                         */
+                        this.pullDown.status = STATUS_START;
+                        icon.style.transform = 'rotate(' + distance / this.config.pullDownHeight * 180 + 'deg)';
+                    }
+                }, supportsPassive ? {passive: true} : false);
+
+                // bind touchend event
+                el.addEventListener('touchend', e => {
+                    this.canPull = false;
+                    el.style.overflowY = 'auto';
+                    pullDownHeader.style.transition = ANIMATION;
+                    // reset icon rotate
+                    icon.style.transform = '';
+                    // if distance is bigger than 60
+                    if (touchPosition.distance - el.scrollTop > this.config.pullDownHeight) {
+                        el.scrollTop = 0;
+                        this.pullDown.height = this.config.pullDownHeight;
+                        this.pullDown.status = STATUS_REFRESH;
+                        // trigger refresh callback
+                        if (this.onRefresh && typeof this.onRefresh === 'function') {
+                            let res = this.onRefresh();
+                            // if onRefresh return promise
+                            if (res && res.then && typeof res.then === 'function') {
+                                res.then(result => {
+                                    resetPullDown(this.pullDown, true);
+                                }, error => {
+                                    // show error and hide the pull down after 1 second
+                                    if (typeof error !== 'string') {
+                                        error = false;
+                                    }
+                                    this.pullDown.msg = error || this.customLabels[0];
+                                    this.pullDown.status = STATUS_ERROR;
+                                    setTimeout(() => {
+                                        resetPullDown(this.pullDown, true);
+                                    }, 1000);
+                                });
+                            } else {
+                                resetPullDown(this.pullDown);
+                            }
+                        } else {
+                            resetPullDown(this.pullDown);
+                            console.warn('please use :on-refresh to pass onRefresh callback');
+                        }
+                    } else {
+                        resetPullDown(this.pullDown);
+                    }
+                    // reset touchPosition
+                    touchPosition.distance = 0;
+                    touchPosition.start = 0;
+                });
+                // remove transition when transitionend
+                pullDownHeader.addEventListener('transitionend', () => {
+                    pullDownHeader.style.transition = '';
+                });
+                pullDownHeader.addEventListener('webkitTransitionEnd', () => {
+                    pullDownHeader.style.transition = '';
+                });
+            });
+        }
+    };
+</script>
diff --git a/frontend/src/css/app.css b/frontend/src/css/app.css
index eb434d03c..838a1f517 100644
--- a/frontend/src/css/app.css
+++ b/frontend/src/css/app.css
@@ -66,3 +66,36 @@ main {
 #photoprism .p-pointer {
     cursor: pointer;
 }
+
+.p-pull-refresh {
+    height: 100%;
+    max-height: 100%;
+    overflow-y: auto;
+}
+
+.p-pull-refresh .pull-down-header {
+    width: 100%;
+    height: 0px;
+    overflow: hidden;
+    position: relative;
+    background-color: #757575;
+}
+
+.p-pull-refresh .pull-down-content {
+    position: absolute;
+    max-width: 90%;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 40px;
+    color: #ffffff;
+    text-align: center;
+    border-left: 20px solid transparent;
+    font-size: 14px;
+}
+
+.p-pull-refresh .pull-down-icon {
+    height: 20px;
+    width: 20px;
+    margin: 10px;
+}
diff --git a/frontend/src/pages/photos.vue b/frontend/src/pages/photos.vue
index f441b4a4a..ff85c79ee 100644
--- a/frontend/src/pages/photos.vue
+++ b/frontend/src/pages/photos.vue
@@ -2,22 +2,24 @@
     <div class="p-page p-page-photos" v-infinite-scroll="loadMore" :infinite-scroll-disabled="scrollDisabled"
          :infinite-scroll-distance="10" :infinite-scroll-listen-for-event="'scrollRefresh'">
 
-        <p-photo-search :settings="settings" :filter="filter" :filter-change="updateQuery"
-                        :refresh="refresh"></p-photo-search>
+        <p-pull-refresh :on-refresh="refresh">
+            <p-photo-search :settings="settings" :filter="filter" :filter-change="updateQuery"
+                            :refresh="refresh"></p-photo-search>
 
-        <v-container fluid class="pa-2">
-            <p-scroll-top></p-scroll-top>
+            <v-container fluid class="pa-2">
+                <p-scroll-top></p-scroll-top>
 
-            <p-photo-clipboard :refresh="refresh" :selection="selection"></p-photo-clipboard>
+                <p-photo-clipboard :refresh="refresh" :selection="selection"></p-photo-clipboard>
 
-            <p-photo-mosaic v-if="settings.view === 'mosaic'" :photos="results" :selection="selection"
-                            :open-photo="openPhoto"></p-photo-mosaic>
-            <p-photo-list v-else-if="settings.view === 'list'" :photos="results" :selection="selection"
-                          :open-photo="openPhoto" :open-location="openLocation"></p-photo-list>
-            <p-photo-details v-else-if="settings.view === 'details'" :photos="results" :selection="selection"
-                             :open-photo="openPhoto" :open-location="openLocation"></p-photo-details>
-            <p-photo-tiles v-else :photos="results" :selection="selection" :open-photo="openPhoto"></p-photo-tiles>
-        </v-container>
+                <p-photo-mosaic v-if="settings.view === 'mosaic'" :photos="results" :selection="selection"
+                                :open-photo="openPhoto"></p-photo-mosaic>
+                <p-photo-list v-else-if="settings.view === 'list'" :photos="results" :selection="selection"
+                              :open-photo="openPhoto" :open-location="openLocation"></p-photo-list>
+                <p-photo-details v-else-if="settings.view === 'details'" :photos="results" :selection="selection"
+                                 :open-photo="openPhoto" :open-location="openLocation"></p-photo-details>
+                <p-photo-tiles v-else :photos="results" :selection="selection" :open-photo="openPhoto"></p-photo-tiles>
+            </v-container>
+        </p-pull-refresh>
     </div>
 </template>