PHP Classes

File: engine/modules/contrib/foundation/js/plugins/foundation.magellan.js

Recommend this page to a friend!
  Classes of Aldo Tripiciano   Quanta CMS   engine/modules/contrib/foundation/js/plugins/foundation.magellan.js   Download  
File: engine/modules/contrib/foundation/js/plugins/foundation.magellan.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Quanta CMS
Manage content that works without a database
Author: By
Last change:
Date: 5 years ago
Size: 8,697 bytes
 

Contents

Class file image Download
'use strict'; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } !function ($) { /** * Magellan module. * @module foundation.magellan */ var Magellan = function () { /** * Creates a new instance of Magellan. * @class * @fires Magellan#init * @param {Object} element - jQuery object to add the trigger to. * @param {Object} options - Overrides to the default plugin settings. */ function Magellan(element, options) { _classCallCheck(this, Magellan); this.$element = element; this.options = $.extend({}, Magellan.defaults, this.$element.data(), options); this._init(); this.calcPoints(); Foundation.registerPlugin(this, 'Magellan'); } /** * Initializes the Magellan plugin and calls functions to get equalizer functioning on load. * @private */ _createClass(Magellan, [{ key: '_init', value: function _init() { var id = this.$element[0].id || Foundation.GetYoDigits(6, 'magellan'); var _this = this; this.$targets = $('[data-magellan-target]'); this.$links = this.$element.find('a'); this.$element.attr({ 'data-resize': id, 'data-scroll': id, 'id': id }); this.$active = $(); this.scrollPos = parseInt(window.pageYOffset, 10); this._events(); } /** * Calculates an array of pixel values that are the demarcation lines between locations on the page. * Can be invoked if new elements are added or the size of a location changes. * @function */ }, { key: 'calcPoints', value: function calcPoints() { var _this = this, body = document.body, html = document.documentElement; this.points = []; this.winHeight = Math.round(Math.max(window.innerHeight, html.clientHeight)); this.docHeight = Math.round(Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)); this.$targets.each(function () { var $tar = $(this), pt = Math.round($tar.offset().top - _this.options.threshold); $tar.targetPoint = pt; _this.points.push(pt); }); } /** * Initializes events for Magellan. * @private */ }, { key: '_events', value: function _events() { var _this = this, $body = $('html, body'), opts = { duration: _this.options.animationDuration, easing: _this.options.animationEasing }; $(window).one('load', function () { if (_this.options.deepLinking) { if (location.hash) { _this.scrollToLoc(location.hash); } } _this.calcPoints(); _this._updateActive(); }); this.$element.on({ 'resizeme.zf.trigger': this.reflow.bind(this), 'scrollme.zf.trigger': this._updateActive.bind(this) }).on('click.zf.magellan', 'a[href^="#"]', function (e) { e.preventDefault(); var arrival = this.getAttribute('href'); _this.scrollToLoc(arrival); }); $(window).on('popstate', function (e) { if (_this.options.deepLinking) { _this.scrollToLoc(window.location.hash); } }); } /** * Function to scroll to a given location on the page. * @param {String} loc - a properly formatted jQuery id selector. Example: '#foo' * @function */ }, { key: 'scrollToLoc', value: function scrollToLoc(loc) { // Do nothing if target does not exist to prevent errors if (!$(loc).length) { return false; } this._inTransition = true; var _this = this, scrollPos = Math.round($(loc).offset().top - this.options.threshold / 2 - this.options.barOffset); $('html, body').stop(true).animate({ scrollTop: scrollPos }, this.options.animationDuration, this.options.animationEasing, function () { _this._inTransition = false;_this._updateActive(); }); } /** * Calls necessary functions to update Magellan upon DOM change * @function */ }, { key: 'reflow', value: function reflow() { this.calcPoints(); this._updateActive(); } /** * Updates the visibility of an active location link, and updates the url hash for the page, if deepLinking enabled. * @private * @function * @fires Magellan#update */ }, { key: '_updateActive', value: function _updateActive() /*evt, elem, scrollPos*/{ if (this._inTransition) { return; } var winPos = /*scrollPos ||*/parseInt(window.pageYOffset, 10), curIdx; if (winPos + this.winHeight === this.docHeight) { curIdx = this.points.length - 1; } else if (winPos < this.points[0]) { curIdx = undefined; } else { var isDown = this.scrollPos < winPos, _this = this, curVisible = this.points.filter(function (p, i) { return isDown ? p - _this.options.barOffset <= winPos : p - _this.options.barOffset - _this.options.threshold <= winPos; }); curIdx = curVisible.length ? curVisible.length - 1 : 0; } this.$active.removeClass(this.options.activeClass); this.$active = this.$links.filter('[href="#' + this.$targets.eq(curIdx).data('magellan-target') + '"]').addClass(this.options.activeClass); if (this.options.deepLinking) { var hash = ""; if (curIdx != undefined) { hash = this.$active[0].getAttribute('href'); } if (hash !== window.location.hash) { if (window.history.pushState) { window.history.pushState(null, null, hash); } else { window.location.hash = hash; } } } this.scrollPos = winPos; /** * Fires when magellan is finished updating to the new active element. * @event Magellan#update */ this.$element.trigger('update.zf.magellan', [this.$active]); } /** * Destroys an instance of Magellan and resets the url of the window. * @function */ }, { key: 'destroy', value: function destroy() { this.$element.off('.zf.trigger .zf.magellan').find('.' + this.options.activeClass).removeClass(this.options.activeClass); if (this.options.deepLinking) { var hash = this.$active[0].getAttribute('href'); window.location.hash.replace(hash, ''); } Foundation.unregisterPlugin(this); } }]); return Magellan; }(); /** * Default settings for plugin */ Magellan.defaults = { /** * Amount of time, in ms, the animated scrolling should take between locations. * @option * @example 500 */ animationDuration: 500, /** * Animation style to use when scrolling between locations. * @option * @example 'ease-in-out' */ animationEasing: 'linear', /** * Number of pixels to use as a marker for location changes. * @option * @example 50 */ threshold: 50, /** * Class applied to the active locations link on the magellan container. * @option * @example 'active' */ activeClass: 'active', /** * Allows the script to manipulate the url of the current page, and if supported, alter the history. * @option * @example true */ deepLinking: false, /** * Number of pixels to offset the scroll of the page on item click if using a sticky nav bar. * @option * @example 25 */ barOffset: 0 }; // Window exports Foundation.plugin(Magellan, 'Magellan'); }(jQuery);