...
 
Commits (4)
/* scrollprogress v3.0.2 - 2017 Jeremias Menichelli - MIT License */
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.ScrollProgress = factory());
}(this, (function () { 'use strict';
/**
* Fallback noop function
* @method noop
* @returns {undefined}
*/
function noop() {}
/**
* ScrollProgress class constructor
* @constructor ScrollProgress
* @param {Function} handleUpdate method to call on scroll update
* @returns {undefined}
*/
var ScrollProgress = function(handleUpdate) {
// assign function to call on update
this._handleUpdate = typeof handleUpdate === 'function'
? handleUpdate
: noop;
// set initial values
this._viewportHeight = this._getViewportHeight();
this._viewportWidth = this._getViewportWidth();
this._progress = this._getProgress();
// trigger initial update function
this._handleUpdate(this._progress.x, this._progress.y);
// bind event functions
this._onScroll = this._onScroll.bind(this);
this._onResize = this._onResize.bind(this);
// add event listeners
window.addEventListener('scroll', this._onScroll);
window.addEventListener('resize', this._onResize);
};
/**
* Get vertical trajectory of the viewport
* @method _getViewportHeight
* @returns {Number}
*/
ScrollProgress.prototype._getViewportHeight = function() {
return document.body.scrollHeight - window.innerHeight;
};
/**
* Get horizontal trajectory of the viewport
* @method _getViewportWidth
* @returns {Number}
*/
ScrollProgress.prototype._getViewportWidth = function() {
return document.body.scrollWidth - window.innerWidth;
};
/**
* Get scroll progress on both axis
* @method _getProgress
* @returns {Object}
*/
ScrollProgress.prototype._getProgress = function() {
var x = typeof window.scrollX === 'undefined'
? window.pageXOffset
: window.scrollX;
var y = typeof window.scrollY === 'undefined'
? window.pageYOffset
: window.scrollY;
return {
x: this._viewportWidth === 0
? 0
: x / this._viewportWidth,
y: this._viewportHeight === 0
? 0
: y / this._viewportHeight
};
};
/**
* Get scroll progress on both axis
* @method _getProgress
* @returns {undefined}
*/
ScrollProgress.prototype._onScroll = function() {
this._progress = this._getProgress();
this._handleUpdate(this._progress.x, this._progress.y);
};
/**
* Update viewport metrics, recalculate progress and call update callback
* @method _onResize
* @returns {undefined}
*/
ScrollProgress.prototype._onResize = function() {
this._viewportHeight = this._getViewportHeight();
this._viewportWidth = this._getViewportWidth();
this._progress = this._getProgress();
// trigger update function
this._handleUpdate(this._progress.x, this._progress.y);
};
/**
* Trigger update callback
* @method trigger
* @returns {undefined}
*/
ScrollProgress.prototype.trigger = function() {
this._handleUpdate(this._progress.x, this._progress.y);
};
/**
* Destroy scroll observer, remove listeners and update callback
* @method destroy
* @returns {undefined}
*/
ScrollProgress.prototype.destroy = function() {
window.removeEventListener('scroll', this._onScroll);
window.removeEventListener('resize', this._onResize);
this._handleUpdate = null;
};
return ScrollProgress;
})));
......@@ -6,9 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= $view->render('head') ?>
<?php $view->style('theme', $params['style'] ? 'theme:css/theme.'.$params['style'].'.css' : 'theme:css/theme.css') ?>
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<?php $view->script('scrollProgress', 'theme:js/scrollProgress.js') ?>
<?php $view->script('theme', 'theme:js/theme.js', ['uikit-sticky', 'uikit-lightbox', 'uikit-parallax', 'uikit-slider', 'uikit-grid']) ?>
<script src=/app/assets/scrollProgress/dist/scrollProgress.js></script>
</head>
<body <?= $params['classes.body'] ?>>
......@@ -25,7 +25,7 @@
<?php if ($params['logo'] || $view->menu()->exists('main') || $view->position()->exists('navbar')) : ?>
<?= $view->position('navbar', 'header-'.$params['header_layout'].'.php') ?>
<?php endif ?>
<?php if ($view->position()->exists('progress')) : ?>
<div class="tm-headerbar tm-headerbar-overlay">
<!-- Top-Desktop -->
......@@ -43,7 +43,7 @@
</div>
</div>
<!-- Top-Mobile -->
<div class="uk-flex uk-flex-center uk-flex-middle uk-visible-small">
<a href="#" class="tm-logo-small uk-text-center uk-navbar-brand" data-uk-smooth-scroll=""><?= $view->position('progress', 'position-blank.php') ?></a>
......@@ -267,7 +267,7 @@
<?= $params['frame'] ? '</div>' : '' ?>
<?php if ($view->position()->exists('progress_js')) : ?>
<footer>
<?= $view->position('progress_js', 'position-blank.php') ?>
......