Implement pull-to-refresh (#107)

babybuddy/static_src/js/babybuddy.js

@@ -9,15 +9,19 @@ if (typeof moment === 'undefined') {
  * Baby Buddy Namespace
  *
  * Default namespace for the Baby Buddy app.
+ *
+ * @type {{}}
  */
 var BabyBuddy = function () {
     return {};
 }();
 
 /**
- * Baby Buddy Datetime Picker
+ * Datetime Picker.
  *
  * Provides modifications and defaults for the base datetime picker widget.
+ *
+ * @type {{init: BabyBuddy.DatetimePicker.init}}
  */
 BabyBuddy.DatetimePicker = function ($, moment) {
     return {
@@ -35,3 +39,23 @@ BabyBuddy.DatetimePicker = function ($, moment) {
         }
     };
 }(jQuery, moment);
+
+/**
+ * Pull to refresh.
+ *
+ * @type {{init: BabyBuddy.PullToRefresh.init, onRefresh: BabyBuddy.PullToRefresh.onRefresh}}
+ */
+BabyBuddy.PullToRefresh = function(ptr) {
+    return {
+        init: function () {
+            ptr.init({
+                mainElement: 'body',
+                onRefresh: this.onRefresh
+            });
+        },
+
+        onRefresh: function() {
+            window.location.reload();
+        }
+    };
+}(PullToRefresh);

babybuddy/static_src/scss/global.scss

@@ -59,4 +59,13 @@
             }
         }
     }
-}
+}
+
+// PullToRefresh elements.
+.ptr--ptr {
+    background: theme-color('dark');
+    .ptr--text, .ptr--icon {
+        // "!important" must be used to override inline styling from JS.
+        color: theme-color('light') !important;
+    }
+}

babybuddy/templates/babybuddy/base.html

@@ -43,6 +43,9 @@
     <script src="{% static "babybuddy/js/vendor.js" %}"></script>
     <script>moment.locale('{{ LOCALE }}');</script>
     <script src="{% static "babybuddy/js/app.js" %}"></script>
+    {% if user.is_authenticated %}
+        <script>BabyBuddy.PullToRefresh.init()</script>
+    {% endif %}
 
 {% block javascript %}{% endblock %}
 </body>

gulpfile.config.js

@@ -23,6 +23,7 @@ module.exports = {
     scriptsConfig: {
         dest: basePath + 'js/',
         vendor: [
+            'node_modules/pulltorefreshjs/dist/index.umd.js',
             'node_modules/jquery/dist/jquery.js',
             'node_modules/popper.js/dist/umd/popper.js',
             'node_modules/bootstrap/dist/js/bootstrap.js',

package-lock.json

@@ -8063,6 +8063,12 @@
       "integrity": "sha512-5NsSEDv8zY70ScRnOTn7bK7eanl2MvFrOrS/R6x+dBt5g1ghnj9Zv90kO8GwT8gxcu2ANyFprnFYB85IogIJOQ==",
       "dev": true
     },
+    "pulltorefreshjs": {
+      "version": "0.1.20",
+      "resolved": "https://registry.npmjs.org/pulltorefreshjs/-/pulltorefreshjs-0.1.20.tgz",
+      "integrity": "sha512-ezJLhM1dXoNJ2Sx5tRAp4QPqI7jfQfHAHdVd6gQgNPfpIC5v6v/TTesgPQT2aFxEmqiTemWCQrmliaCxqRAYiA==",
+      "dev": true
+    },
     "pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "moment": "^2.24.0",
     "plotly.js": "^1.52.1",
     "popper.js": "^1.16.1",
+    "pulltorefreshjs": "^0.1.20",
     "pump": "^3.0.0",
     "stylelint": "^13.0.0",
     "stylelint-config-recommended-scss": "^4.1.0",