Implement pull-to-refresh (#107)

This commit is contained in:
Christopher C. Wells 2020-02-04 10:52:05 -08:00
parent 5c8fc91538
commit 682ebb34ca
6 changed files with 46 additions and 2 deletions

View File

@ -9,15 +9,19 @@ if (typeof moment === 'undefined') {
* Baby Buddy Namespace * Baby Buddy Namespace
* *
* Default namespace for the Baby Buddy app. * Default namespace for the Baby Buddy app.
*
* @type {{}}
*/ */
var BabyBuddy = function () { var BabyBuddy = function () {
return {}; return {};
}(); }();
/** /**
* Baby Buddy Datetime Picker * Datetime Picker.
* *
* Provides modifications and defaults for the base datetime picker widget. * Provides modifications and defaults for the base datetime picker widget.
*
* @type {{init: BabyBuddy.DatetimePicker.init}}
*/ */
BabyBuddy.DatetimePicker = function ($, moment) { BabyBuddy.DatetimePicker = function ($, moment) {
return { return {
@ -35,3 +39,23 @@ BabyBuddy.DatetimePicker = function ($, moment) {
} }
}; };
}(jQuery, 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);

View File

@ -60,3 +60,12 @@
} }
} }
} }
// 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;
}
}

View File

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

View File

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

6
package-lock.json generated
View File

@ -8063,6 +8063,12 @@
"integrity": "sha512-5NsSEDv8zY70ScRnOTn7bK7eanl2MvFrOrS/R6x+dBt5g1ghnj9Zv90kO8GwT8gxcu2ANyFprnFYB85IogIJOQ==", "integrity": "sha512-5NsSEDv8zY70ScRnOTn7bK7eanl2MvFrOrS/R6x+dBt5g1ghnj9Zv90kO8GwT8gxcu2ANyFprnFYB85IogIJOQ==",
"dev": true "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": { "pump": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",

View File

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