trowel-covers
Version:
The official Trowel Component for covers
360 lines (292 loc) • 11.3 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("TrowelCovers", [], factory);
else if(typeof exports === 'object')
exports["TrowelCovers"] = factory();
else
root["TrowelCovers"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 1);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
// Robert Penner's easeInOutQuad
// find the rest of his easing functions here: http://robertpenner.com/easing/
// find them exported for ES6 consumption here: https://github.com/jaxgeller/ez.js
var easeInOutQuad = function easeInOutQuad(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t - 2) - 1) + b;
};
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
var jumper = function jumper() {
// private variable cache
// no variables are created during a jump, preventing memory leaks
var element = void 0; // element to scroll to (node)
var start = void 0; // where scroll starts (px)
var stop = void 0; // where scroll stops (px)
var offset = void 0; // adjustment from the stop position (px)
var easing = void 0; // easing function (function)
var a11y = void 0; // accessibility support flag (boolean)
var distance = void 0; // distance of scroll (px)
var duration = void 0; // scroll duration (ms)
var timeStart = void 0; // time scroll started (ms)
var timeElapsed = void 0; // time spent scrolling thus far (ms)
var next = void 0; // next scroll position (px)
var callback = void 0; // to call when done scrolling (function)
// scroll position helper
function location() {
return window.scrollY || window.pageYOffset;
}
// element offset helper
function top(element) {
return element.getBoundingClientRect().top + start;
}
// rAF loop helper
function loop(timeCurrent) {
// store time scroll started, if not started already
if (!timeStart) {
timeStart = timeCurrent;
}
// determine time spent scrolling so far
timeElapsed = timeCurrent - timeStart;
// calculate next scroll position
next = easing(timeElapsed, start, distance, duration);
// scroll to it
window.scrollTo(0, next);
// check progress
timeElapsed < duration ? window.requestAnimationFrame(loop) // continue scroll loop
: done(); // scrolling is done
}
// scroll finished helper
function done() {
// account for rAF time rounding inaccuracies
window.scrollTo(0, start + distance);
// if scrolling to an element, and accessibility is enabled
if (element && a11y) {
// add tabindex indicating programmatic focus
element.setAttribute('tabindex', '-1');
// focus the element
element.focus();
}
// if it exists, fire the callback
if (typeof callback === 'function') {
callback();
}
// reset time for next jump
timeStart = false;
}
// API
function jump(target) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
// resolve options, or use defaults
duration = options.duration || 1000;
offset = options.offset || 0;
callback = options.callback; // "undefined" is a suitable default, and won't be called
easing = options.easing || easeInOutQuad;
a11y = options.a11y || false;
// cache starting position
start = location();
// resolve target
switch (typeof target === 'undefined' ? 'undefined' : _typeof(target)) {
// scroll from current position
case 'number':
element = undefined; // no element to scroll to
a11y = false; // make sure accessibility is off
stop = start + target;
break;
// scroll to element (node)
// bounding rect is relative to the viewport
case 'object':
element = target;
stop = top(element);
break;
// scroll to element (selector)
// bounding rect is relative to the viewport
case 'string':
element = document.querySelector(target);
stop = top(element);
break;
}
// resolve scroll distance, accounting for offset
distance = stop - start + offset;
// resolve duration
switch (_typeof(options.duration)) {
// number in ms
case 'number':
duration = options.duration;
break;
// function passed the distance of the scroll
case 'function':
duration = options.duration(distance);
break;
}
// start the loop
window.requestAnimationFrame(loop);
}
// expose only the jump method
return jump;
};
// export singleton
var singleton = jumper();
/* harmony default export */ __webpack_exports__["default"] = (singleton);
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
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; }; }();
var _jump = __webpack_require__(0);
var _jump2 = _interopRequireDefault(_jump);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var TrowelCovers = function TrowelCovers(elements) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
_classCallCheck(this, TrowelCovers);
[].slice.call(elements).forEach(function (element, index) {
var element_obj = new TrowelCover(element, options);
});
};
exports.default = TrowelCovers;
var TrowelCover = function () {
function TrowelCover(element) {
var customOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
_classCallCheck(this, TrowelCover);
this.element = element;
this.scrollDownTriggers = [].slice.call(this.element.querySelectorAll('[data-cover-scrolldown]'));
this.options = customOptions;
this.events = this.events();
this.listener();
this.element.dispatchEvent(this.events.mounted);
return;
}
_createClass(TrowelCover, [{
key: 'scrollDown',
value: function scrollDown() {
this.element.dispatchEvent(this.events.jump);
(0, _jump2.default)(this.element, {
duration: this.options.scrollDuration,
offset: this.element.offsetHeight + this.options.offset
});
this.element.dispatchEvent(this.events.jumped);
return;
}
}, {
key: 'listener',
value: function listener() {
var _this = this;
this.scrollDownTriggers.forEach(function (trigger) {
trigger.addEventListener('click', function () {
return _this.scrollDown();
});
});
}
}, {
key: 'events',
value: function events() {
var jump = new Event('trowel.cover.jump');
var jumped = new Event('trowel.cover.jumped');
var mounted = new Event('trowel.cover.mounted');
return { jump: jump, jumped: jumped, mounted: mounted };
}
}, {
key: 'options',
set: function set(customOptions) {
var defaultOptions = {
scrollDuration: 500,
offset: 0
};
return this._options = Object.keys(defaultOptions).reduce(function (options, option) {
options[option] = customOptions[option] ? customOptions[option] : defaultOptions[option];
return options;
}, {});
},
get: function get() {
return this._options;
}
}]);
return TrowelCover;
}();
module.exports = exports['default'];
/***/ })
/******/ ]);
});
//# sourceMappingURL=covers.js.map