You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2706 lines
82 KiB
2706 lines
82 KiB
/******/ (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;
|
|
/******/
|
|
/******/ // define getter function for harmony exports
|
|
/******/ __webpack_require__.d = function(exports, name, getter) {
|
|
/******/ if(!__webpack_require__.o(exports, name)) {
|
|
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
|
/******/ }
|
|
/******/ };
|
|
/******/
|
|
/******/ // define __esModule on exports
|
|
/******/ __webpack_require__.r = function(exports) {
|
|
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
/******/ }
|
|
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
/******/ };
|
|
/******/
|
|
/******/ // create a fake namespace object
|
|
/******/ // mode & 1: value is a module id, require it
|
|
/******/ // mode & 2: merge all properties of value into the ns
|
|
/******/ // mode & 4: return value when already ns object
|
|
/******/ // mode & 8|1: behave like require
|
|
/******/ __webpack_require__.t = function(value, mode) {
|
|
/******/ if(mode & 1) value = __webpack_require__(value);
|
|
/******/ if(mode & 8) return value;
|
|
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
|
/******/ var ns = Object.create(null);
|
|
/******/ __webpack_require__.r(ns);
|
|
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
|
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
|
/******/ return ns;
|
|
/******/ };
|
|
/******/
|
|
/******/ // 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 = 0);
|
|
/******/ })
|
|
/************************************************************************/
|
|
/******/ ({
|
|
|
|
/***/ "./demo.js":
|
|
/*!*****************!*\
|
|
!*** ./demo.js ***!
|
|
\*****************/
|
|
/*! no exports provided */
|
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
|
|
"use strict";
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! riot */ "./node_modules/riot/riot.esm.js");
|
|
/* harmony import */ var _src_TinyOnePage_riot__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./src/TinyOnePage.riot */ "./src/TinyOnePage.riot");
|
|
|
|
|
|
riot__WEBPACK_IMPORTED_MODULE_0__["register"]('tiny-one-page', _src_TinyOnePage_riot__WEBPACK_IMPORTED_MODULE_1__["default"]); // adding component with animate object
|
|
|
|
riot__WEBPACK_IMPORTED_MODULE_0__["mount"]('tiny-one-page');
|
|
|
|
/***/ }),
|
|
|
|
/***/ "./node_modules/riot/riot.esm.js":
|
|
/*!***************************************!*\
|
|
!*** ./node_modules/riot/riot.esm.js ***!
|
|
\***************************************/
|
|
/*! exports provided: __, component, install, mount, register, uninstall, unmount, unregister, version */
|
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
|
|
"use strict";
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__", function() { return __; });
|
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "component", function() { return component; });
|
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "install", function() { return install; });
|
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mount", function() { return mount; });
|
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "register", function() { return register; });
|
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "uninstall", function() { return uninstall; });
|
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "unmount", function() { return unmount; });
|
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "unregister", function() { return unregister; });
|
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "version", function() { return version; });
|
|
/* Riot v4.5.0, @license MIT */
|
|
const COMPONENTS_IMPLEMENTATION_MAP = new Map(),
|
|
DOM_COMPONENT_INSTANCE_PROPERTY = Symbol('riot-component'),
|
|
PLUGINS_SET = new Set(),
|
|
IS_DIRECTIVE = 'is',
|
|
VALUE_ATTRIBUTE = 'value',
|
|
ATTRIBUTES_KEY_SYMBOL = Symbol('attributes'),
|
|
TEMPLATE_KEY_SYMBOL = Symbol('template');
|
|
|
|
var globals = /*#__PURE__*/Object.freeze({
|
|
COMPONENTS_IMPLEMENTATION_MAP: COMPONENTS_IMPLEMENTATION_MAP,
|
|
DOM_COMPONENT_INSTANCE_PROPERTY: DOM_COMPONENT_INSTANCE_PROPERTY,
|
|
PLUGINS_SET: PLUGINS_SET,
|
|
IS_DIRECTIVE: IS_DIRECTIVE,
|
|
VALUE_ATTRIBUTE: VALUE_ATTRIBUTE,
|
|
ATTRIBUTES_KEY_SYMBOL: ATTRIBUTES_KEY_SYMBOL,
|
|
TEMPLATE_KEY_SYMBOL: TEMPLATE_KEY_SYMBOL
|
|
});
|
|
|
|
/**
|
|
* Remove the child nodes from any DOM node
|
|
* @param {HTMLElement} node - target node
|
|
* @returns {undefined}
|
|
*/
|
|
function cleanNode(node) {
|
|
clearChildren(node.childNodes);
|
|
}
|
|
/**
|
|
* Clear multiple children in a node
|
|
* @param {HTMLElement[]} children - direct children nodes
|
|
* @returns {undefined}
|
|
*/
|
|
|
|
|
|
function clearChildren(children) {
|
|
Array.from(children).forEach(n => n.parentNode && n.parentNode.removeChild(n));
|
|
}
|
|
|
|
const EACH = 0;
|
|
const IF = 1;
|
|
const SIMPLE = 2;
|
|
const TAG = 3;
|
|
const SLOT = 4;
|
|
var bindingTypes = {
|
|
EACH,
|
|
IF,
|
|
SIMPLE,
|
|
TAG,
|
|
SLOT
|
|
};
|
|
/**
|
|
* Create the template meta object in case of <template> fragments
|
|
* @param {TemplateChunk} componentTemplate - template chunk object
|
|
* @returns {Object} the meta property that will be passed to the mount function of the TemplateChunk
|
|
*/
|
|
|
|
function createTemplateMeta(componentTemplate) {
|
|
const fragment = componentTemplate.dom.cloneNode(true);
|
|
return {
|
|
avoidDOMInjection: true,
|
|
fragment,
|
|
children: Array.from(fragment.childNodes)
|
|
};
|
|
}
|
|
/* get rid of the @ungap/essential-map polyfill */
|
|
|
|
|
|
const {
|
|
indexOf: iOF
|
|
} = [];
|
|
|
|
const append = (get, parent, children, start, end, before) => {
|
|
const isSelect = 'selectedIndex' in parent;
|
|
let noSelection = isSelect;
|
|
|
|
while (start < end) {
|
|
const child = get(children[start], 1);
|
|
parent.insertBefore(child, before);
|
|
|
|
if (isSelect && noSelection && child.selected) {
|
|
noSelection = !noSelection;
|
|
let {
|
|
selectedIndex
|
|
} = parent;
|
|
parent.selectedIndex = selectedIndex < 0 ? start : iOF.call(parent.querySelectorAll('option'), child);
|
|
}
|
|
|
|
start++;
|
|
}
|
|
};
|
|
|
|
const eqeq = (a, b) => a == b;
|
|
|
|
const identity = O => O;
|
|
|
|
const indexOf = (moreNodes, moreStart, moreEnd, lessNodes, lessStart, lessEnd, compare) => {
|
|
const length = lessEnd - lessStart;
|
|
/* istanbul ignore if */
|
|
|
|
if (length < 1) return -1;
|
|
|
|
while (moreEnd - moreStart >= length) {
|
|
let m = moreStart;
|
|
let l = lessStart;
|
|
|
|
while (m < moreEnd && l < lessEnd && compare(moreNodes[m], lessNodes[l])) {
|
|
m++;
|
|
l++;
|
|
}
|
|
|
|
if (l === lessEnd) return moreStart;
|
|
moreStart = m + 1;
|
|
}
|
|
|
|
return -1;
|
|
};
|
|
|
|
const isReversed = (futureNodes, futureEnd, currentNodes, currentStart, currentEnd, compare) => {
|
|
while (currentStart < currentEnd && compare(currentNodes[currentStart], futureNodes[futureEnd - 1])) {
|
|
currentStart++;
|
|
futureEnd--;
|
|
}
|
|
|
|
return futureEnd === 0;
|
|
};
|
|
|
|
const next = (get, list, i, length, before) => i < length ? get(list[i], 0) : 0 < i ? get(list[i - 1], -0).nextSibling : before;
|
|
|
|
const remove = (get, parent, children, start, end) => {
|
|
if (end - start < 2) parent.removeChild(get(children[start], -1));else {
|
|
const range = parent.ownerDocument.createRange();
|
|
range.setStartBefore(get(children[start], -1));
|
|
range.setEndAfter(get(children[end - 1], -1));
|
|
range.deleteContents();
|
|
}
|
|
}; // - - - - - - - - - - - - - - - - - - -
|
|
// diff related constants and utilities
|
|
// - - - - - - - - - - - - - - - - - - -
|
|
|
|
|
|
const DELETION = -1;
|
|
const INSERTION = 1;
|
|
const SKIP = 0;
|
|
const SKIP_OND = 50;
|
|
|
|
const HS = (futureNodes, futureStart, futureEnd, futureChanges, currentNodes, currentStart, currentEnd, currentChanges) => {
|
|
let k = 0;
|
|
/* istanbul ignore next */
|
|
|
|
let minLen = futureChanges < currentChanges ? futureChanges : currentChanges;
|
|
const link = Array(minLen++);
|
|
const tresh = Array(minLen);
|
|
tresh[0] = -1;
|
|
|
|
for (let i = 1; i < minLen; i++) tresh[i] = currentEnd;
|
|
|
|
const keymap = new Map();
|
|
|
|
for (let i = currentStart; i < currentEnd; i++) keymap.set(currentNodes[i], i);
|
|
|
|
for (let i = futureStart; i < futureEnd; i++) {
|
|
const idxInOld = keymap.get(futureNodes[i]);
|
|
|
|
if (idxInOld != null) {
|
|
k = findK(tresh, minLen, idxInOld);
|
|
/* istanbul ignore else */
|
|
|
|
if (-1 < k) {
|
|
tresh[k] = idxInOld;
|
|
link[k] = {
|
|
newi: i,
|
|
oldi: idxInOld,
|
|
prev: link[k - 1]
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
k = --minLen;
|
|
--currentEnd;
|
|
|
|
while (tresh[k] > currentEnd) --k;
|
|
|
|
minLen = currentChanges + futureChanges - k;
|
|
const diff = Array(minLen);
|
|
let ptr = link[k];
|
|
--futureEnd;
|
|
|
|
while (ptr) {
|
|
const {
|
|
newi,
|
|
oldi
|
|
} = ptr;
|
|
|
|
while (futureEnd > newi) {
|
|
diff[--minLen] = INSERTION;
|
|
--futureEnd;
|
|
}
|
|
|
|
while (currentEnd > oldi) {
|
|
diff[--minLen] = DELETION;
|
|
--currentEnd;
|
|
}
|
|
|
|
diff[--minLen] = SKIP;
|
|
--futureEnd;
|
|
--currentEnd;
|
|
ptr = ptr.prev;
|
|
}
|
|
|
|
while (futureEnd >= futureStart) {
|
|
diff[--minLen] = INSERTION;
|
|
--futureEnd;
|
|
}
|
|
|
|
while (currentEnd >= currentStart) {
|
|
diff[--minLen] = DELETION;
|
|
--currentEnd;
|
|
}
|
|
|
|
return diff;
|
|
}; // this is pretty much the same petit-dom code without the delete map part
|
|
// https://github.com/yelouafi/petit-dom/blob/bd6f5c919b5ae5297be01612c524c40be45f14a7/src/vdom.js#L556-L561
|
|
|
|
|
|
const OND = (futureNodes, futureStart, rows, currentNodes, currentStart, cols, compare) => {
|
|
const length = rows + cols;
|
|
const v = [];
|
|
let d, k, r, c, pv, cv, pd;
|
|
|
|
outer: for (d = 0; d <= length; d++) {
|
|
/* istanbul ignore if */
|
|
if (d > SKIP_OND) return null;
|
|
pd = d - 1;
|
|
/* istanbul ignore next */
|
|
|
|
pv = d ? v[d - 1] : [0, 0];
|
|
cv = v[d] = [];
|
|
|
|
for (k = -d; k <= d; k += 2) {
|
|
if (k === -d || k !== d && pv[pd + k - 1] < pv[pd + k + 1]) {
|
|
c = pv[pd + k + 1];
|
|
} else {
|
|
c = pv[pd + k - 1] + 1;
|
|
}
|
|
|
|
r = c - k;
|
|
|
|
while (c < cols && r < rows && compare(currentNodes[currentStart + c], futureNodes[futureStart + r])) {
|
|
c++;
|
|
r++;
|
|
}
|
|
|
|
if (c === cols && r === rows) {
|
|
break outer;
|
|
}
|
|
|
|
cv[d + k] = c;
|
|
}
|
|
}
|
|
|
|
const diff = Array(d / 2 + length / 2);
|
|
let diffIdx = diff.length - 1;
|
|
|
|
for (d = v.length - 1; d >= 0; d--) {
|
|
while (c > 0 && r > 0 && compare(currentNodes[currentStart + c - 1], futureNodes[futureStart + r - 1])) {
|
|
// diagonal edge = equality
|
|
diff[diffIdx--] = SKIP;
|
|
c--;
|
|
r--;
|
|
}
|
|
|
|
if (!d) break;
|
|
pd = d - 1;
|
|
/* istanbul ignore next */
|
|
|
|
pv = d ? v[d - 1] : [0, 0];
|
|
k = c - r;
|
|
|
|
if (k === -d || k !== d && pv[pd + k - 1] < pv[pd + k + 1]) {
|
|
// vertical edge = insertion
|
|
r--;
|
|
diff[diffIdx--] = INSERTION;
|
|
} else {
|
|
// horizontal edge = deletion
|
|
c--;
|
|
diff[diffIdx--] = DELETION;
|
|
}
|
|
}
|
|
|
|
return diff;
|
|
};
|
|
|
|
const applyDiff = (diff, get, parentNode, futureNodes, futureStart, currentNodes, currentStart, currentLength, before) => {
|
|
const live = new Map();
|
|
const length = diff.length;
|
|
let currentIndex = currentStart;
|
|
let i = 0;
|
|
|
|
while (i < length) {
|
|
switch (diff[i++]) {
|
|
case SKIP:
|
|
futureStart++;
|
|
currentIndex++;
|
|
break;
|
|
|
|
case INSERTION:
|
|
// TODO: bulk appends for sequential nodes
|
|
live.set(futureNodes[futureStart], 1);
|
|
append(get, parentNode, futureNodes, futureStart++, futureStart, currentIndex < currentLength ? get(currentNodes[currentIndex], 0) : before);
|
|
break;
|
|
|
|
case DELETION:
|
|
currentIndex++;
|
|
break;
|
|
}
|
|
}
|
|
|
|
i = 0;
|
|
|
|
while (i < length) {
|
|
switch (diff[i++]) {
|
|
case SKIP:
|
|
currentStart++;
|
|
break;
|
|
|
|
case DELETION:
|
|
// TODO: bulk removes for sequential nodes
|
|
if (live.has(currentNodes[currentStart])) currentStart++;else remove(get, parentNode, currentNodes, currentStart++, currentStart);
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
const findK = (ktr, length, j) => {
|
|
let lo = 1;
|
|
let hi = length;
|
|
|
|
while (lo < hi) {
|
|
const mid = (lo + hi) / 2 >>> 0;
|
|
if (j < ktr[mid]) hi = mid;else lo = mid + 1;
|
|
}
|
|
|
|
return lo;
|
|
};
|
|
|
|
const smartDiff = (get, parentNode, futureNodes, futureStart, futureEnd, futureChanges, currentNodes, currentStart, currentEnd, currentChanges, currentLength, compare, before) => {
|
|
applyDiff(OND(futureNodes, futureStart, futureChanges, currentNodes, currentStart, currentChanges, compare) || HS(futureNodes, futureStart, futureEnd, futureChanges, currentNodes, currentStart, currentEnd, currentChanges), get, parentNode, futureNodes, futureStart, currentNodes, currentStart, currentLength, before);
|
|
};
|
|
/*! (c) 2018 Andrea Giammarchi (ISC) */
|
|
|
|
|
|
const domdiff = (parentNode, // where changes happen
|
|
currentNodes, // Array of current items/nodes
|
|
futureNodes, // Array of future items/nodes
|
|
options // optional object with one of the following properties
|
|
// before: domNode
|
|
// compare(generic, generic) => true if same generic
|
|
// node(generic) => Node
|
|
) => {
|
|
if (!options) options = {};
|
|
const compare = options.compare || eqeq;
|
|
const get = options.node || identity;
|
|
const before = options.before == null ? null : get(options.before, 0);
|
|
const currentLength = currentNodes.length;
|
|
let currentEnd = currentLength;
|
|
let currentStart = 0;
|
|
let futureEnd = futureNodes.length;
|
|
let futureStart = 0; // common prefix
|
|
|
|
while (currentStart < currentEnd && futureStart < futureEnd && compare(currentNodes[currentStart], futureNodes[futureStart])) {
|
|
currentStart++;
|
|
futureStart++;
|
|
} // common suffix
|
|
|
|
|
|
while (currentStart < currentEnd && futureStart < futureEnd && compare(currentNodes[currentEnd - 1], futureNodes[futureEnd - 1])) {
|
|
currentEnd--;
|
|
futureEnd--;
|
|
}
|
|
|
|
const currentSame = currentStart === currentEnd;
|
|
const futureSame = futureStart === futureEnd; // same list
|
|
|
|
if (currentSame && futureSame) return futureNodes; // only stuff to add
|
|
|
|
if (currentSame && futureStart < futureEnd) {
|
|
append(get, parentNode, futureNodes, futureStart, futureEnd, next(get, currentNodes, currentStart, currentLength, before));
|
|
return futureNodes;
|
|
} // only stuff to remove
|
|
|
|
|
|
if (futureSame && currentStart < currentEnd) {
|
|
remove(get, parentNode, currentNodes, currentStart, currentEnd);
|
|
return futureNodes;
|
|
}
|
|
|
|
const currentChanges = currentEnd - currentStart;
|
|
const futureChanges = futureEnd - futureStart;
|
|
let i = -1; // 2 simple indels: the shortest sequence is a subsequence of the longest
|
|
|
|
if (currentChanges < futureChanges) {
|
|
i = indexOf(futureNodes, futureStart, futureEnd, currentNodes, currentStart, currentEnd, compare); // inner diff
|
|
|
|
if (-1 < i) {
|
|
append(get, parentNode, futureNodes, futureStart, i, get(currentNodes[currentStart], 0));
|
|
append(get, parentNode, futureNodes, i + currentChanges, futureEnd, next(get, currentNodes, currentEnd, currentLength, before));
|
|
return futureNodes;
|
|
}
|
|
}
|
|
/* istanbul ignore else */
|
|
else if (futureChanges < currentChanges) {
|
|
i = indexOf(currentNodes, currentStart, currentEnd, futureNodes, futureStart, futureEnd, compare); // outer diff
|
|
|
|
if (-1 < i) {
|
|
remove(get, parentNode, currentNodes, currentStart, i);
|
|
remove(get, parentNode, currentNodes, i + futureChanges, currentEnd);
|
|
return futureNodes;
|
|
}
|
|
} // common case with one replacement for many nodes
|
|
// or many nodes replaced for a single one
|
|
|
|
/* istanbul ignore else */
|
|
|
|
|
|
if (currentChanges < 2 || futureChanges < 2) {
|
|
append(get, parentNode, futureNodes, futureStart, futureEnd, get(currentNodes[currentStart], 0));
|
|
remove(get, parentNode, currentNodes, currentStart, currentEnd);
|
|
return futureNodes;
|
|
} // the half match diff part has been skipped in petit-dom
|
|
// https://github.com/yelouafi/petit-dom/blob/bd6f5c919b5ae5297be01612c524c40be45f14a7/src/vdom.js#L391-L397
|
|
// accordingly, I think it's safe to skip in here too
|
|
// if one day it'll come out like the speediest thing ever to do
|
|
// then I might add it in here too
|
|
// Extra: before going too fancy, what about reversed lists ?
|
|
// This should bail out pretty quickly if that's not the case.
|
|
|
|
|
|
if (currentChanges === futureChanges && isReversed(futureNodes, futureEnd, currentNodes, currentStart, currentEnd, compare)) {
|
|
append(get, parentNode, futureNodes, futureStart, futureEnd, next(get, currentNodes, currentEnd, currentLength, before));
|
|
return futureNodes;
|
|
} // last resort through a smart diff
|
|
|
|
|
|
smartDiff(get, parentNode, futureNodes, futureStart, futureEnd, futureChanges, currentNodes, currentStart, currentEnd, currentChanges, currentLength, compare, before);
|
|
return futureNodes;
|
|
};
|
|
/**
|
|
* Check if a value is null or undefined
|
|
* @param {*} value - anything
|
|
* @returns {boolean} true only for the 'undefined' and 'null' types
|
|
*/
|
|
|
|
|
|
function isNil(value) {
|
|
return value === null || value === undefined;
|
|
}
|
|
/**
|
|
* Check if an element is a template tag
|
|
* @param {HTMLElement} el - element to check
|
|
* @returns {boolean} true if it's a <template>
|
|
*/
|
|
|
|
|
|
function isTemplate(el) {
|
|
return !isNil(el.content);
|
|
}
|
|
|
|
const EachBinding = Object.seal({
|
|
// dynamic binding properties
|
|
childrenMap: null,
|
|
node: null,
|
|
root: null,
|
|
condition: null,
|
|
evaluate: null,
|
|
template: null,
|
|
isTemplateTag: false,
|
|
nodes: [],
|
|
getKey: null,
|
|
indexName: null,
|
|
itemName: null,
|
|
afterPlaceholder: null,
|
|
placeholder: null,
|
|
|
|
// API methods
|
|
mount(scope, parentScope) {
|
|
return this.update(scope, parentScope);
|
|
},
|
|
|
|
update(scope, parentScope) {
|
|
const {
|
|
placeholder
|
|
} = this;
|
|
const collection = this.evaluate(scope);
|
|
const items = collection ? Array.from(collection) : [];
|
|
const parent = placeholder.parentNode; // prepare the diffing
|
|
|
|
const {
|
|
newChildrenMap,
|
|
batches,
|
|
futureNodes
|
|
} = createPatch(items, scope, parentScope, this); // patch the DOM only if there are new nodes
|
|
|
|
if (futureNodes.length) {
|
|
domdiff(parent, this.nodes, futureNodes, {
|
|
before: placeholder,
|
|
node: patch(Array.from(this.childrenMap.values()), parentScope)
|
|
});
|
|
} else {
|
|
// remove all redundant templates
|
|
unmountRedundant(this.childrenMap);
|
|
} // trigger the mounts and the updates
|
|
|
|
|
|
batches.forEach(fn => fn()); // update the children map
|
|
|
|
this.childrenMap = newChildrenMap;
|
|
this.nodes = futureNodes;
|
|
return this;
|
|
},
|
|
|
|
unmount(scope, parentScope) {
|
|
unmountRedundant(this.childrenMap, parentScope);
|
|
this.childrenMap = new Map();
|
|
this.nodes = [];
|
|
return this;
|
|
}
|
|
|
|
});
|
|
/**
|
|
* Patch the DOM while diffing
|
|
* @param {TemplateChunk[]} redundant - redundant tepmplate chunks
|
|
* @param {*} parentScope - scope of the parent template
|
|
* @returns {Function} patch function used by domdiff
|
|
*/
|
|
|
|
function patch(redundant, parentScope) {
|
|
return (item, info) => {
|
|
if (info < 0) {
|
|
const {
|
|
template,
|
|
context
|
|
} = redundant.pop(); // notice that we pass null as last argument because
|
|
// the root node and its children will be removed by domdiff
|
|
|
|
template.unmount(context, parentScope, null);
|
|
}
|
|
|
|
return item;
|
|
};
|
|
}
|
|
/**
|
|
* Unmount the remaining template instances
|
|
* @param {Map} childrenMap - map containing the children template to unmount
|
|
* @param {*} parentScope - scope of the parent template
|
|
* @returns {TemplateChunk[]} collection containing the template chunks unmounted
|
|
*/
|
|
|
|
|
|
function unmountRedundant(childrenMap, parentScope) {
|
|
return Array.from(childrenMap.values()).map((_ref) => {
|
|
let {
|
|
template,
|
|
context
|
|
} = _ref;
|
|
return template.unmount(context, parentScope, true);
|
|
});
|
|
}
|
|
/**
|
|
* Check whether a template must be filtered from a loop
|
|
* @param {Function} condition - filter function
|
|
* @param {Object} context - argument passed to the filter function
|
|
* @returns {boolean} true if this item should be skipped
|
|
*/
|
|
|
|
|
|
function mustFilterItem(condition, context) {
|
|
return condition ? Boolean(condition(context)) === false : false;
|
|
}
|
|
/**
|
|
* Extend the scope of the looped template
|
|
* @param {Object} scope - current template scope
|
|
* @param {string} options.itemName - key to identify the looped item in the new context
|
|
* @param {string} options.indexName - key to identify the index of the looped item
|
|
* @param {number} options.index - current index
|
|
* @param {*} options.item - collection item looped
|
|
* @returns {Object} enhanced scope object
|
|
*/
|
|
|
|
|
|
function extendScope(scope, _ref2) {
|
|
let {
|
|
itemName,
|
|
indexName,
|
|
index,
|
|
item
|
|
} = _ref2;
|
|
scope[itemName] = item;
|
|
if (indexName) scope[indexName] = index;
|
|
return scope;
|
|
}
|
|
/**
|
|
* Loop the current template items
|
|
* @param {Array} items - expression collection value
|
|
* @param {*} scope - template scope
|
|
* @param {*} parentScope - scope of the parent template
|
|
* @param {EeachBinding} binding - each binding object instance
|
|
* @returns {Object} data
|
|
* @returns {Map} data.newChildrenMap - a Map containing the new children template structure
|
|
* @returns {Array} data.batches - array containing the template lifecycle functions to trigger
|
|
* @returns {Array} data.futureNodes - array containing the nodes we need to diff
|
|
*/
|
|
|
|
|
|
function createPatch(items, scope, parentScope, binding) {
|
|
const {
|
|
condition,
|
|
template,
|
|
childrenMap,
|
|
itemName,
|
|
getKey,
|
|
indexName,
|
|
root,
|
|
isTemplateTag
|
|
} = binding;
|
|
const newChildrenMap = new Map();
|
|
const batches = [];
|
|
const futureNodes = [];
|
|
items.forEach((item, index) => {
|
|
const context = extendScope(Object.create(scope), {
|
|
itemName,
|
|
indexName,
|
|
index,
|
|
item
|
|
});
|
|
const key = getKey ? getKey(context) : index;
|
|
const oldItem = childrenMap.get(key);
|
|
|
|
if (mustFilterItem(condition, context)) {
|
|
return;
|
|
}
|
|
|
|
const componentTemplate = oldItem ? oldItem.template : template.clone();
|
|
const el = oldItem ? componentTemplate.el : root.cloneNode();
|
|
const mustMount = !oldItem;
|
|
const meta = isTemplateTag && mustMount ? createTemplateMeta(componentTemplate) : {};
|
|
|
|
if (mustMount) {
|
|
batches.push(() => componentTemplate.mount(el, context, parentScope, meta));
|
|
} else {
|
|
componentTemplate.update(context, parentScope);
|
|
} // create the collection of nodes to update or to add
|
|
// in case of template tags we need to add all its children nodes
|
|
|
|
|
|
if (isTemplateTag) {
|
|
futureNodes.push(...(meta.children || componentTemplate.children));
|
|
} else {
|
|
futureNodes.push(el);
|
|
} // delete the old item from the children map
|
|
|
|
|
|
childrenMap.delete(key); // update the children map
|
|
|
|
newChildrenMap.set(key, {
|
|
template: componentTemplate,
|
|
context,
|
|
index
|
|
});
|
|
});
|
|
return {
|
|
newChildrenMap,
|
|
batches,
|
|
futureNodes
|
|
};
|
|
}
|
|
|
|
function create(node, _ref3) {
|
|
let {
|
|
evaluate,
|
|
condition,
|
|
itemName,
|
|
indexName,
|
|
getKey,
|
|
template
|
|
} = _ref3;
|
|
const placeholder = document.createTextNode('');
|
|
const parent = node.parentNode;
|
|
const root = node.cloneNode();
|
|
parent.insertBefore(placeholder, node);
|
|
parent.removeChild(node);
|
|
return Object.assign({}, EachBinding, {
|
|
childrenMap: new Map(),
|
|
node,
|
|
root,
|
|
condition,
|
|
evaluate,
|
|
isTemplateTag: isTemplate(root),
|
|
template: template.createDOM(node),
|
|
getKey,
|
|
indexName,
|
|
itemName,
|
|
placeholder
|
|
});
|
|
}
|
|
/**
|
|
* Binding responsible for the `if` directive
|
|
*/
|
|
|
|
|
|
const IfBinding = Object.seal({
|
|
// dynamic binding properties
|
|
node: null,
|
|
evaluate: null,
|
|
parent: null,
|
|
isTemplateTag: false,
|
|
placeholder: null,
|
|
template: null,
|
|
|
|
// API methods
|
|
mount(scope, parentScope) {
|
|
this.parent.insertBefore(this.placeholder, this.node);
|
|
this.parent.removeChild(this.node);
|
|
return this.update(scope, parentScope);
|
|
},
|
|
|
|
update(scope, parentScope) {
|
|
const value = !!this.evaluate(scope);
|
|
const mustMount = !this.value && value;
|
|
const mustUnmount = this.value && !value;
|
|
|
|
const mount = () => {
|
|
const pristine = this.node.cloneNode();
|
|
this.parent.insertBefore(pristine, this.placeholder);
|
|
this.template = this.template.clone();
|
|
this.template.mount(pristine, scope, parentScope);
|
|
};
|
|
|
|
switch (true) {
|
|
case mustMount:
|
|
mount();
|
|
break;
|
|
|
|
case mustUnmount:
|
|
this.unmount(scope);
|
|
break;
|
|
|
|
default:
|
|
if (value) this.template.update(scope, parentScope);
|
|
}
|
|
|
|
this.value = value;
|
|
return this;
|
|
},
|
|
|
|
unmount(scope, parentScope) {
|
|
this.template.unmount(scope, parentScope, true);
|
|
return this;
|
|
}
|
|
|
|
});
|
|
|
|
function create$1(node, _ref4) {
|
|
let {
|
|
evaluate,
|
|
template
|
|
} = _ref4;
|
|
return Object.assign({}, IfBinding, {
|
|
node,
|
|
evaluate,
|
|
parent: node.parentNode,
|
|
placeholder: document.createTextNode(''),
|
|
template: template.createDOM(node)
|
|
});
|
|
}
|
|
|
|
const ATTRIBUTE = 0;
|
|
const EVENT = 1;
|
|
const TEXT = 2;
|
|
const VALUE = 3;
|
|
var expressionTypes = {
|
|
ATTRIBUTE,
|
|
EVENT,
|
|
TEXT,
|
|
VALUE
|
|
};
|
|
/**
|
|
* Check if a value is a Boolean
|
|
* @param {*} value - anything
|
|
* @returns {boolean} true only for the value is a boolean
|
|
*/
|
|
|
|
function isBoolean(value) {
|
|
return typeof value === 'boolean';
|
|
}
|
|
/**
|
|
* Check if a value is an Object
|
|
* @param {*} value - anything
|
|
* @returns {boolean} true only for the value is an object
|
|
*/
|
|
|
|
|
|
function isObject(value) {
|
|
return typeof value === 'object';
|
|
}
|
|
|
|
const REMOVE_ATTRIBUTE = 'removeAttribute';
|
|
const SET_ATTIBUTE = 'setAttribute';
|
|
/**
|
|
* Add all the attributes provided
|
|
* @param {HTMLElement} node - target node
|
|
* @param {Object} attributes - object containing the attributes names and values
|
|
* @returns {undefined} sorry it's a void function :(
|
|
*/
|
|
|
|
function setAllAttributes(node, attributes) {
|
|
Object.entries(attributes).forEach((_ref5) => {
|
|
let [name, value] = _ref5;
|
|
return attributeExpression(node, {
|
|
name
|
|
}, value);
|
|
});
|
|
}
|
|
/**
|
|
* Remove all the attributes provided
|
|
* @param {HTMLElement} node - target node
|
|
* @param {Object} attributes - object containing all the attribute names
|
|
* @returns {undefined} sorry it's a void function :(
|
|
*/
|
|
|
|
|
|
function removeAllAttributes(node, attributes) {
|
|
Object.keys(attributes).forEach(attribute => node.removeAttribute(attribute));
|
|
}
|
|
/**
|
|
* This methods handles the DOM attributes updates
|
|
* @param {HTMLElement} node - target node
|
|
* @param {Object} expression - expression object
|
|
* @param {string} expression.name - attribute name
|
|
* @param {*} value - new expression value
|
|
* @param {*} oldValue - the old expression cached value
|
|
* @returns {undefined}
|
|
*/
|
|
|
|
|
|
function attributeExpression(node, _ref6, value, oldValue) {
|
|
let {
|
|
name
|
|
} = _ref6;
|
|
|
|
// is it a spread operator? {...attributes}
|
|
if (!name) {
|
|
// is the value still truthy?
|
|
if (value) {
|
|
setAllAttributes(node, value);
|
|
} else if (oldValue) {
|
|
// otherwise remove all the old attributes
|
|
removeAllAttributes(node, oldValue);
|
|
}
|
|
|
|
return;
|
|
} // handle boolean attributes
|
|
|
|
|
|
if (isBoolean(value) || isObject(value)) {
|
|
node[name] = value;
|
|
}
|
|
|
|
node[getMethod(value)](name, normalizeValue(name, value));
|
|
}
|
|
/**
|
|
* Get the attribute modifier method
|
|
* @param {*} value - if truthy we return `setAttribute` othewise `removeAttribute`
|
|
* @returns {string} the node attribute modifier method name
|
|
*/
|
|
|
|
|
|
function getMethod(value) {
|
|
return isNil(value) || value === false || value === '' || isObject(value) ? REMOVE_ATTRIBUTE : SET_ATTIBUTE;
|
|
}
|
|
/**
|
|
* Get the value as string
|
|
* @param {string} name - attribute name
|
|
* @param {*} value - user input value
|
|
* @returns {string} input value as string
|
|
*/
|
|
|
|
|
|
function normalizeValue(name, value) {
|
|
// be sure that expressions like selected={ true } will be always rendered as selected='selected'
|
|
if (value === true) return name;
|
|
return value;
|
|
}
|
|
|
|
const RE_EVENTS_PREFIX = /^on/;
|
|
/**
|
|
* Set a new event listener
|
|
* @param {HTMLElement} node - target node
|
|
* @param {Object} expression - expression object
|
|
* @param {string} expression.name - event name
|
|
* @param {*} value - new expression value
|
|
* @param {*} oldValue - old expression value
|
|
* @returns {value} the callback just received
|
|
*/
|
|
|
|
function eventExpression(node, _ref7, value, oldValue) {
|
|
let {
|
|
name
|
|
} = _ref7;
|
|
const normalizedEventName = name.replace(RE_EVENTS_PREFIX, '');
|
|
|
|
if (oldValue) {
|
|
node.removeEventListener(normalizedEventName, oldValue);
|
|
}
|
|
|
|
if (value) {
|
|
node.addEventListener(normalizedEventName, value, false);
|
|
}
|
|
|
|
return value;
|
|
}
|
|
/**
|
|
* This methods handles a simple text expression update
|
|
* @param {HTMLElement} node - target node
|
|
* @param {Object} expression - expression object
|
|
* @param {number} expression.childNodeIndex - index to find the text node to update
|
|
* @param {*} value - new expression value
|
|
* @returns {undefined}
|
|
*/
|
|
|
|
|
|
function textExpression(node, _ref8, value) {
|
|
let {
|
|
childNodeIndex
|
|
} = _ref8;
|
|
const target = node.childNodes[childNodeIndex];
|
|
const val = normalizeValue$1(value); // replace the target if it's a placeholder comment
|
|
|
|
if (target.nodeType === Node.COMMENT_NODE) {
|
|
const textNode = document.createTextNode(val);
|
|
node.replaceChild(textNode, target);
|
|
} else {
|
|
target.data = normalizeValue$1(val);
|
|
}
|
|
}
|
|
/**
|
|
* Normalize the user value in order to render a empty string in case of falsy values
|
|
* @param {*} value - user input value
|
|
* @returns {string} hopefully a string
|
|
*/
|
|
|
|
|
|
function normalizeValue$1(value) {
|
|
return isNil(value) ? '' : value;
|
|
}
|
|
/**
|
|
* This methods handles the input fileds value updates
|
|
* @param {HTMLElement} node - target node
|
|
* @param {Object} expression - expression object
|
|
* @param {*} value - new expression value
|
|
* @returns {undefined}
|
|
*/
|
|
|
|
|
|
function valueExpression(node, expression, value) {
|
|
node.value = value;
|
|
}
|
|
|
|
var expressions = {
|
|
[ATTRIBUTE]: attributeExpression,
|
|
[EVENT]: eventExpression,
|
|
[TEXT]: textExpression,
|
|
[VALUE]: valueExpression
|
|
};
|
|
const Expression = Object.seal({
|
|
// Static props
|
|
node: null,
|
|
value: null,
|
|
|
|
// API methods
|
|
|
|
/**
|
|
* Mount the expression evaluating its initial value
|
|
* @param {*} scope - argument passed to the expression to evaluate its current values
|
|
* @returns {Expression} self
|
|
*/
|
|
mount(scope) {
|
|
// hopefully a pure function
|
|
this.value = this.evaluate(scope); // IO() DOM updates
|
|
|
|
apply(this, this.value);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Update the expression if its value changed
|
|
* @param {*} scope - argument passed to the expression to evaluate its current values
|
|
* @returns {Expression} self
|
|
*/
|
|
update(scope) {
|
|
// pure function
|
|
const value = this.evaluate(scope);
|
|
|
|
if (this.value !== value) {
|
|
// IO() DOM updates
|
|
apply(this, value);
|
|
this.value = value;
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Expression teardown method
|
|
* @returns {Expression} self
|
|
*/
|
|
unmount() {
|
|
// unmount only the event handling expressions
|
|
if (this.type === EVENT) apply(this, null);
|
|
return this;
|
|
}
|
|
|
|
});
|
|
/**
|
|
* IO() function to handle the DOM updates
|
|
* @param {Expression} expression - expression object
|
|
* @param {*} value - current expression value
|
|
* @returns {undefined}
|
|
*/
|
|
|
|
function apply(expression, value) {
|
|
return expressions[expression.type](expression.node, expression, value, expression.value);
|
|
}
|
|
|
|
function create$2(node, data) {
|
|
return Object.assign({}, Expression, {}, data, {
|
|
node
|
|
});
|
|
}
|
|
/**
|
|
* Create a flat object having as keys a list of methods that if dispatched will propagate
|
|
* on the whole collection
|
|
* @param {Array} collection - collection to iterate
|
|
* @param {Array<string>} methods - methods to execute on each item of the collection
|
|
* @param {*} context - context returned by the new methods created
|
|
* @returns {Object} a new object to simplify the the nested methods dispatching
|
|
*/
|
|
|
|
|
|
function flattenCollectionMethods(collection, methods, context) {
|
|
return methods.reduce((acc, method) => {
|
|
return Object.assign({}, acc, {
|
|
[method]: scope => {
|
|
return collection.map(item => item[method](scope)) && context;
|
|
}
|
|
});
|
|
}, {});
|
|
}
|
|
|
|
function create$3(node, _ref9) {
|
|
let {
|
|
expressions
|
|
} = _ref9;
|
|
return Object.assign({}, flattenCollectionMethods(expressions.map(expression => create$2(node, expression)), ['mount', 'update', 'unmount']));
|
|
}
|
|
|
|
const SlotBinding = Object.seal({
|
|
// dynamic binding properties
|
|
node: null,
|
|
name: null,
|
|
template: null,
|
|
|
|
// API methods
|
|
mount(scope, parentScope) {
|
|
const templateData = scope.slots ? scope.slots.find((_ref10) => {
|
|
let {
|
|
id
|
|
} = _ref10;
|
|
return id === this.name;
|
|
}) : false;
|
|
const {
|
|
parentNode
|
|
} = this.node;
|
|
this.template = templateData && create$6(templateData.html, templateData.bindings).createDOM(parentNode);
|
|
|
|
if (this.template) {
|
|
this.template.mount(this.node, parentScope);
|
|
moveSlotInnerContent(this.node);
|
|
}
|
|
|
|
parentNode.removeChild(this.node);
|
|
return this;
|
|
},
|
|
|
|
update(scope, parentScope) {
|
|
if (this.template && parentScope) {
|
|
this.template.update(parentScope);
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
unmount(scope, parentScope, mustRemoveRoot) {
|
|
if (this.template) {
|
|
this.template.unmount(parentScope, null, mustRemoveRoot);
|
|
}
|
|
|
|
return this;
|
|
}
|
|
|
|
});
|
|
/**
|
|
* Move the inner content of the slots outside of them
|
|
* @param {HTMLNode} slot - slot node
|
|
* @returns {undefined} it's a void function
|
|
*/
|
|
|
|
function moveSlotInnerContent(slot) {
|
|
if (slot.firstChild) {
|
|
slot.parentNode.insertBefore(slot.firstChild, slot);
|
|
moveSlotInnerContent(slot);
|
|
}
|
|
}
|
|
/**
|
|
* Create a single slot binding
|
|
* @param {HTMLElement} node - slot node
|
|
* @param {string} options.name - slot id
|
|
* @returns {Object} Slot binding object
|
|
*/
|
|
|
|
|
|
function createSlot(node, _ref11) {
|
|
let {
|
|
name
|
|
} = _ref11;
|
|
return Object.assign({}, SlotBinding, {
|
|
node,
|
|
name
|
|
});
|
|
}
|
|
/**
|
|
* Create a new tag object if it was registered before, otherwise fallback to the simple
|
|
* template chunk
|
|
* @param {Function} component - component factory function
|
|
* @param {Array<Object>} slots - array containing the slots markup
|
|
* @param {Array} attributes - dynamic attributes that will be received by the tag element
|
|
* @returns {TagImplementation|TemplateChunk} a tag implementation or a template chunk as fallback
|
|
*/
|
|
|
|
|
|
function getTag(component, slots, attributes) {
|
|
if (slots === void 0) {
|
|
slots = [];
|
|
}
|
|
|
|
if (attributes === void 0) {
|
|
attributes = [];
|
|
}
|
|
|
|
// if this tag was registered before we will return its implementation
|
|
if (component) {
|
|
return component({
|
|
slots,
|
|
attributes
|
|
});
|
|
} // otherwise we return a template chunk
|
|
|
|
|
|
return create$6(slotsToMarkup(slots), [...slotBindings(slots), {
|
|
// the attributes should be registered as binding
|
|
// if we fallback to a normal template chunk
|
|
expressions: attributes.map(attr => {
|
|
return Object.assign({
|
|
type: ATTRIBUTE
|
|
}, attr);
|
|
})
|
|
}]);
|
|
}
|
|
/**
|
|
* Merge all the slots bindings into a single array
|
|
* @param {Array<Object>} slots - slots collection
|
|
* @returns {Array<Bindings>} flatten bindings array
|
|
*/
|
|
|
|
|
|
function slotBindings(slots) {
|
|
return slots.reduce((acc, _ref12) => {
|
|
let {
|
|
bindings
|
|
} = _ref12;
|
|
return acc.concat(bindings);
|
|
}, []);
|
|
}
|
|
/**
|
|
* Merge all the slots together in a single markup string
|
|
* @param {Array<Object>} slots - slots collection
|
|
* @returns {string} markup of all the slots in a single string
|
|
*/
|
|
|
|
|
|
function slotsToMarkup(slots) {
|
|
return slots.reduce((acc, slot) => {
|
|
return acc + slot.html;
|
|
}, '');
|
|
}
|
|
|
|
const TagBinding = Object.seal({
|
|
// dynamic binding properties
|
|
node: null,
|
|
evaluate: null,
|
|
name: null,
|
|
slots: null,
|
|
tag: null,
|
|
attributes: null,
|
|
getComponent: null,
|
|
|
|
mount(scope) {
|
|
return this.update(scope);
|
|
},
|
|
|
|
update(scope, parentScope) {
|
|
const name = this.evaluate(scope); // simple update
|
|
|
|
if (name === this.name) {
|
|
this.tag.update(scope);
|
|
} else {
|
|
// unmount the old tag if it exists
|
|
this.unmount(scope, parentScope, true); // mount the new tag
|
|
|
|
this.name = name;
|
|
this.tag = getTag(this.getComponent(name), this.slots, this.attributes);
|
|
this.tag.mount(this.node, scope);
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
unmount(scope, parentScope, keepRootTag) {
|
|
if (this.tag) {
|
|
// keep the root tag
|
|
this.tag.unmount(keepRootTag);
|
|
}
|
|
|
|
return this;
|
|
}
|
|
|
|
});
|
|
|
|
function create$4(node, _ref13) {
|
|
let {
|
|
evaluate,
|
|
getComponent,
|
|
slots,
|
|
attributes
|
|
} = _ref13;
|
|
return Object.assign({}, TagBinding, {
|
|
node,
|
|
evaluate,
|
|
slots,
|
|
attributes,
|
|
getComponent
|
|
});
|
|
}
|
|
|
|
var bindings = {
|
|
[IF]: create$1,
|
|
[SIMPLE]: create$3,
|
|
[EACH]: create,
|
|
[TAG]: create$4,
|
|
[SLOT]: createSlot
|
|
};
|
|
/**
|
|
* Bind a new expression object to a DOM node
|
|
* @param {HTMLElement} root - DOM node where to bind the expression
|
|
* @param {Object} binding - binding data
|
|
* @returns {Expression} Expression object
|
|
*/
|
|
|
|
function create$5(root, binding) {
|
|
const {
|
|
selector,
|
|
type,
|
|
redundantAttribute,
|
|
expressions
|
|
} = binding; // find the node to apply the bindings
|
|
|
|
const node = selector ? root.querySelector(selector) : root; // remove eventually additional attributes created only to select this node
|
|
|
|
if (redundantAttribute) node.removeAttribute(redundantAttribute); // init the binding
|
|
|
|
return (bindings[type] || bindings[SIMPLE])(node, Object.assign({}, binding, {
|
|
expressions: expressions || []
|
|
}));
|
|
}
|
|
/**
|
|
* Check if an element is part of an svg
|
|
* @param {HTMLElement} el - element to check
|
|
* @returns {boolean} true if we are in an svg context
|
|
*/
|
|
|
|
|
|
function isSvg(el) {
|
|
const owner = el.ownerSVGElement;
|
|
return !!owner || owner === null;
|
|
} // in this case a simple innerHTML is enough
|
|
|
|
|
|
function createHTMLTree(html, root) {
|
|
const template = isTemplate(root) ? root : document.createElement('template');
|
|
template.innerHTML = html;
|
|
return template.content;
|
|
} // for svg nodes we need a bit more work
|
|
|
|
|
|
function createSVGTree(html, container) {
|
|
// create the SVGNode
|
|
const svgNode = container.ownerDocument.importNode(new window.DOMParser().parseFromString(`<svg xmlns="http://www.w3.org/2000/svg">${html}</svg>`, 'application/xml').documentElement, true);
|
|
return svgNode;
|
|
}
|
|
/**
|
|
* Create the DOM that will be injected
|
|
* @param {Object} root - DOM node to find out the context where the fragment will be created
|
|
* @param {string} html - DOM to create as string
|
|
* @returns {HTMLDocumentFragment|HTMLElement} a new html fragment
|
|
*/
|
|
|
|
|
|
function createDOMTree(root, html) {
|
|
if (isSvg(root)) return createSVGTree(html, root);
|
|
return createHTMLTree(html, root);
|
|
}
|
|
/**
|
|
* Move all the child nodes from a source tag to another
|
|
* @param {HTMLElement} source - source node
|
|
* @param {HTMLElement} target - target node
|
|
* @returns {undefined} it's a void method ¯\_(ツ)_/¯
|
|
*/
|
|
// Ignore this helper because it's needed only for svg tags
|
|
|
|
/* istanbul ignore next */
|
|
|
|
|
|
function moveChildren(source, target) {
|
|
if (source.firstChild) {
|
|
target.appendChild(source.firstChild);
|
|
moveChildren(source, target);
|
|
}
|
|
}
|
|
/**
|
|
* Inject the DOM tree into a target node
|
|
* @param {HTMLElement} el - target element
|
|
* @param {HTMLFragment|SVGElement} dom - dom tree to inject
|
|
* @returns {undefined}
|
|
*/
|
|
|
|
|
|
function injectDOM(el, dom) {
|
|
switch (true) {
|
|
case isSvg(el):
|
|
moveChildren(dom, el);
|
|
break;
|
|
|
|
case isTemplate(el):
|
|
el.parentNode.replaceChild(dom, el);
|
|
break;
|
|
|
|
default:
|
|
el.appendChild(dom);
|
|
}
|
|
}
|
|
/**
|
|
* Create the Template DOM skeleton
|
|
* @param {HTMLElement} el - root node where the DOM will be injected
|
|
* @param {string} html - markup that will be injected into the root node
|
|
* @returns {HTMLFragment} fragment that will be injected into the root node
|
|
*/
|
|
|
|
|
|
function createTemplateDOM(el, html) {
|
|
return html && (typeof html === 'string' ? createDOMTree(el, html) : html);
|
|
}
|
|
/**
|
|
* Template Chunk model
|
|
* @type {Object}
|
|
*/
|
|
|
|
|
|
const TemplateChunk = Object.freeze({
|
|
// Static props
|
|
bindings: null,
|
|
bindingsData: null,
|
|
html: null,
|
|
isTemplateTag: false,
|
|
fragment: null,
|
|
children: null,
|
|
dom: null,
|
|
el: null,
|
|
|
|
/**
|
|
* Create the template DOM structure that will be cloned on each mount
|
|
* @param {HTMLElement} el - the root node
|
|
* @returns {TemplateChunk} self
|
|
*/
|
|
createDOM(el) {
|
|
// make sure that the DOM gets created before cloning the template
|
|
this.dom = this.dom || createTemplateDOM(el, this.html);
|
|
return this;
|
|
},
|
|
|
|
// API methods
|
|
|
|
/**
|
|
* Attach the template to a DOM node
|
|
* @param {HTMLElement} el - target DOM node
|
|
* @param {*} scope - template data
|
|
* @param {*} parentScope - scope of the parent template tag
|
|
* @param {Object} meta - meta properties needed to handle the <template> tags in loops
|
|
* @returns {TemplateChunk} self
|
|
*/
|
|
mount(el, scope, parentScope, meta) {
|
|
if (meta === void 0) {
|
|
meta = {};
|
|
}
|
|
|
|
if (!el) throw new Error('Please provide DOM node to mount properly your template');
|
|
if (this.el) this.unmount(scope); // <template> tags require a bit more work
|
|
// the template fragment might be already created via meta outside of this call
|
|
|
|
const {
|
|
fragment,
|
|
children,
|
|
avoidDOMInjection
|
|
} = meta; // <template> bindings of course can not have a root element
|
|
// so we check the parent node to set the query selector bindings
|
|
|
|
const {
|
|
parentNode
|
|
} = children ? children[0] : el;
|
|
this.isTemplateTag = isTemplate(el); // create the DOM if it wasn't created before
|
|
|
|
this.createDOM(el);
|
|
|
|
if (this.dom) {
|
|
// create the new template dom fragment if it want already passed in via meta
|
|
this.fragment = fragment || this.dom.cloneNode(true);
|
|
} // store root node
|
|
// notice that for template tags the root note will be the parent tag
|
|
|
|
|
|
this.el = this.isTemplateTag ? parentNode : el; // create the children array only for the <template> fragments
|
|
|
|
this.children = this.isTemplateTag ? children || Array.from(this.fragment.childNodes) : null; // inject the DOM into the el only if a fragment is available
|
|
|
|
if (!avoidDOMInjection && this.fragment) injectDOM(el, this.fragment); // create the bindings
|
|
|
|
this.bindings = this.bindingsData.map(binding => create$5(this.el, binding));
|
|
this.bindings.forEach(b => b.mount(scope, parentScope));
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Update the template with fresh data
|
|
* @param {*} scope - template data
|
|
* @param {*} parentScope - scope of the parent template tag
|
|
* @returns {TemplateChunk} self
|
|
*/
|
|
update(scope, parentScope) {
|
|
this.bindings.forEach(b => b.update(scope, parentScope));
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Remove the template from the node where it was initially mounted
|
|
* @param {*} scope - template data
|
|
* @param {*} parentScope - scope of the parent template tag
|
|
* @param {boolean|null} mustRemoveRoot - if true remove the root element,
|
|
* if false or undefined clean the root tag content, if null don't touch the DOM
|
|
* @returns {TemplateChunk} self
|
|
*/
|
|
unmount(scope, parentScope, mustRemoveRoot) {
|
|
if (this.el) {
|
|
this.bindings.forEach(b => b.unmount(scope, parentScope, mustRemoveRoot));
|
|
|
|
switch (true) {
|
|
// <template> tags should be treated a bit differently
|
|
// we need to clear their children only if it's explicitly required by the caller
|
|
// via mustRemoveRoot !== null
|
|
case this.isTemplateTag === true && mustRemoveRoot !== null:
|
|
clearChildren(this.children);
|
|
break;
|
|
// remove the root node only if the mustRemoveRoot === true
|
|
|
|
case mustRemoveRoot === true && this.el.parentNode !== null:
|
|
this.el.parentNode.removeChild(this.el);
|
|
break;
|
|
// otherwise we clean the node children
|
|
|
|
case mustRemoveRoot !== null:
|
|
cleanNode(this.el);
|
|
break;
|
|
}
|
|
|
|
this.el = null;
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Clone the template chunk
|
|
* @returns {TemplateChunk} a clone of this object resetting the this.el property
|
|
*/
|
|
clone() {
|
|
return Object.assign({}, this, {
|
|
el: null
|
|
});
|
|
}
|
|
|
|
});
|
|
/**
|
|
* Create a template chunk wiring also the bindings
|
|
* @param {string|HTMLElement} html - template string
|
|
* @param {Array} bindings - bindings collection
|
|
* @returns {TemplateChunk} a new TemplateChunk copy
|
|
*/
|
|
|
|
function create$6(html, bindings) {
|
|
if (bindings === void 0) {
|
|
bindings = [];
|
|
}
|
|
|
|
return Object.assign({}, TemplateChunk, {
|
|
html,
|
|
bindingsData: bindings
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Quick type checking
|
|
* @param {*} element - anything
|
|
* @param {string} type - type definition
|
|
* @returns {boolean} true if the type corresponds
|
|
*/
|
|
function checkType(element, type) {
|
|
return typeof element === type;
|
|
}
|
|
/**
|
|
* Check that will be passed if its argument is a function
|
|
* @param {*} value - value to check
|
|
* @returns {boolean} - true if the value is a function
|
|
*/
|
|
|
|
function isFunction(value) {
|
|
return checkType(value, 'function');
|
|
}
|
|
|
|
/* eslint-disable fp/no-mutating-methods */
|
|
/**
|
|
* Throw an error
|
|
* @param {string} error - error message
|
|
* @returns {undefined} it's a IO void function
|
|
*/
|
|
|
|
function panic(error) {
|
|
throw new Error(error);
|
|
}
|
|
/**
|
|
* Call the first argument received only if it's a function otherwise return it as it is
|
|
* @param {*} source - anything
|
|
* @returns {*} anything
|
|
*/
|
|
|
|
function callOrAssign(source) {
|
|
return isFunction(source) ? source.prototype && source.prototype.constructor ? new source() : source() : source;
|
|
}
|
|
/**
|
|
* Convert a string from camel case to dash-case
|
|
* @param {string} string - probably a component tag name
|
|
* @returns {string} component name normalized
|
|
*/
|
|
|
|
function camelToDashCase(string) {
|
|
return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
|
}
|
|
/**
|
|
* Convert a string containing dashes to camel case
|
|
* @param {string} string - input string
|
|
* @returns {string} my-string -> myString
|
|
*/
|
|
|
|
function dashToCamelCase(string) {
|
|
return string.replace(/-(\w)/g, (_, c) => c.toUpperCase());
|
|
}
|
|
/**
|
|
* Define default properties if they don't exist on the source object
|
|
* @param {Object} source - object that will receive the default properties
|
|
* @param {Object} defaults - object containing additional optional keys
|
|
* @returns {Object} the original object received enhanced
|
|
*/
|
|
|
|
function defineDefaults(source, defaults) {
|
|
Object.entries(defaults).forEach((_ref) => {
|
|
let [key, value] = _ref;
|
|
if (!source[key]) source[key] = value;
|
|
});
|
|
return source;
|
|
} // doese simply nothing
|
|
|
|
function noop() {
|
|
return this;
|
|
}
|
|
/**
|
|
* Autobind the methods of a source object to itself
|
|
* @param {Object} source - probably a riot tag instance
|
|
* @param {Array<string>} methods - list of the methods to autobind
|
|
* @returns {Object} the original object received
|
|
*/
|
|
|
|
function autobindMethods(source, methods) {
|
|
methods.forEach(method => {
|
|
source[method] = source[method].bind(source);
|
|
});
|
|
return source;
|
|
}
|
|
/**
|
|
* Helper function to set an immutable property
|
|
* @param {Object} source - object where the new property will be set
|
|
* @param {string} key - object key where the new property will be stored
|
|
* @param {*} value - value of the new property
|
|
* @param {Object} options - set the propery overriding the default options
|
|
* @returns {Object} - the original object modified
|
|
*/
|
|
|
|
function defineProperty(source, key, value, options) {
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
|
|
Object.defineProperty(source, key, Object.assign({
|
|
value,
|
|
enumerable: false,
|
|
writable: false,
|
|
configurable: true
|
|
}, options));
|
|
return source;
|
|
}
|
|
/**
|
|
* Define multiple properties on a target object
|
|
* @param {Object} source - object where the new properties will be set
|
|
* @param {Object} properties - object containing as key pair the key + value properties
|
|
* @param {Object} options - set the propery overriding the default options
|
|
* @returns {Object} the original object modified
|
|
*/
|
|
|
|
function defineProperties(source, properties, options) {
|
|
Object.entries(properties).forEach((_ref2) => {
|
|
let [key, value] = _ref2;
|
|
defineProperty(source, key, value, options);
|
|
});
|
|
return source;
|
|
}
|
|
/**
|
|
* Evaluate a list of attribute expressions
|
|
* @param {Array} attributes - attribute expressions generated by the riot compiler
|
|
* @returns {Object} key value pairs with the result of the computation
|
|
*/
|
|
|
|
function evaluateAttributeExpressions(attributes) {
|
|
return attributes.reduce((acc, attribute) => {
|
|
const {
|
|
value,
|
|
type
|
|
} = attribute;
|
|
|
|
switch (true) {
|
|
// spread attribute
|
|
case !attribute.name && type === expressionTypes.ATTRIBUTE:
|
|
return Object.assign({}, acc, {}, value);
|
|
// value attribute
|
|
|
|
case type === expressionTypes.VALUE:
|
|
acc[VALUE_ATTRIBUTE] = attribute.value;
|
|
break;
|
|
// normal attributes
|
|
|
|
default:
|
|
acc[dashToCamelCase(attribute.name)] = attribute.value;
|
|
}
|
|
|
|
return acc;
|
|
}, {});
|
|
}
|
|
|
|
/**
|
|
* Converts any DOM node/s to a loopable array
|
|
* @param { HTMLElement|NodeList } els - single html element or a node list
|
|
* @returns { Array } always a loopable object
|
|
*/
|
|
function domToArray(els) {
|
|
// can this object be already looped?
|
|
if (!Array.isArray(els)) {
|
|
// is it a node list?
|
|
if (/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(els)) && typeof els.length === 'number') return Array.from(els);else // if it's a single node
|
|
// it will be returned as "array" with one single entry
|
|
return [els];
|
|
} // this object could be looped out of the box
|
|
|
|
|
|
return els;
|
|
}
|
|
|
|
/**
|
|
* Normalize the return values, in case of a single value we avoid to return an array
|
|
* @param { Array } values - list of values we want to return
|
|
* @returns { Array|string|boolean } either the whole list of values or the single one found
|
|
* @private
|
|
*/
|
|
|
|
const normalize = values => values.length === 1 ? values[0] : values;
|
|
/**
|
|
* Parse all the nodes received to get/remove/check their attributes
|
|
* @param { HTMLElement|NodeList|Array } els - DOM node/s to parse
|
|
* @param { string|Array } name - name or list of attributes
|
|
* @param { string } method - method that will be used to parse the attributes
|
|
* @returns { Array|string } result of the parsing in a list or a single value
|
|
* @private
|
|
*/
|
|
|
|
|
|
function parseNodes(els, name, method) {
|
|
const names = typeof name === 'string' ? [name] : name;
|
|
return normalize(domToArray(els).map(el => {
|
|
return normalize(names.map(n => el[method](n)));
|
|
}));
|
|
}
|
|
/**
|
|
* Set any attribute on a single or a list of DOM nodes
|
|
* @param { HTMLElement|NodeList|Array } els - DOM node/s to parse
|
|
* @param { string|Object } name - either the name of the attribute to set
|
|
* or a list of properties as object key - value
|
|
* @param { string } value - the new value of the attribute (optional)
|
|
* @returns { HTMLElement|NodeList|Array } the original array of elements passed to this function
|
|
*
|
|
* @example
|
|
*
|
|
* import { set } from 'bianco.attr'
|
|
*
|
|
* const img = document.createElement('img')
|
|
*
|
|
* set(img, 'width', 100)
|
|
*
|
|
* // or also
|
|
* set(img, {
|
|
* width: 300,
|
|
* height: 300
|
|
* })
|
|
*
|
|
*/
|
|
|
|
|
|
function set(els, name, value) {
|
|
const attrs = typeof name === 'object' ? name : {
|
|
[name]: value
|
|
};
|
|
const props = Object.keys(attrs);
|
|
domToArray(els).forEach(el => {
|
|
props.forEach(prop => el.setAttribute(prop, attrs[prop]));
|
|
});
|
|
return els;
|
|
}
|
|
/**
|
|
* Get any attribute from a single or a list of DOM nodes
|
|
* @param { HTMLElement|NodeList|Array } els - DOM node/s to parse
|
|
* @param { string|Array } name - name or list of attributes to get
|
|
* @returns { Array|string } list of the attributes found
|
|
*
|
|
* @example
|
|
*
|
|
* import { get } from 'bianco.attr'
|
|
*
|
|
* const img = document.createElement('img')
|
|
*
|
|
* get(img, 'width') // => '200'
|
|
*
|
|
* // or also
|
|
* get(img, ['width', 'height']) // => ['200', '300']
|
|
*
|
|
* // or also
|
|
* get([img1, img2], ['width', 'height']) // => [['200', '300'], ['500', '200']]
|
|
*/
|
|
|
|
function get(els, name) {
|
|
return parseNodes(els, name, 'getAttribute');
|
|
}
|
|
|
|
/**
|
|
* Get all the element attributes as object
|
|
* @param {HTMLElement} element - DOM node we want to parse
|
|
* @returns {Object} all the attributes found as a key value pairs
|
|
*/
|
|
|
|
function DOMattributesToObject(element) {
|
|
return Array.from(element.attributes).reduce((acc, attribute) => {
|
|
acc[dashToCamelCase(attribute.name)] = attribute.value;
|
|
return acc;
|
|
}, {});
|
|
}
|
|
/**
|
|
* Get the tag name of any DOM node
|
|
* @param {HTMLElement} element - DOM node we want to inspect
|
|
* @returns {string} name to identify this dom node in riot
|
|
*/
|
|
|
|
function getName(element) {
|
|
return get(element, IS_DIRECTIVE) || element.tagName.toLowerCase();
|
|
}
|
|
|
|
/**
|
|
* Simple helper to find DOM nodes returning them as array like loopable object
|
|
* @param { string|DOMNodeList } selector - either the query or the DOM nodes to arraify
|
|
* @param { HTMLElement } ctx - context defining where the query will search for the DOM nodes
|
|
* @returns { Array } DOM nodes found as array
|
|
*/
|
|
|
|
function $(selector, ctx) {
|
|
return domToArray(typeof selector === 'string' ? (ctx || document).querySelectorAll(selector) : selector);
|
|
}
|
|
|
|
const CSS_BY_NAME = new Map();
|
|
const STYLE_NODE_SELECTOR = 'style[riot]'; // memoized curried function
|
|
|
|
const getStyleNode = (style => {
|
|
return () => {
|
|
// lazy evaluation:
|
|
// if this function was already called before
|
|
// we return its cached result
|
|
if (style) return style; // create a new style element or use an existing one
|
|
// and cache it internally
|
|
|
|
style = $(STYLE_NODE_SELECTOR)[0] || document.createElement('style');
|
|
set(style, 'type', 'text/css');
|
|
/* istanbul ignore next */
|
|
|
|
if (!style.parentNode) document.head.appendChild(style);
|
|
return style;
|
|
};
|
|
})();
|
|
/**
|
|
* Object that will be used to inject and manage the css of every tag instance
|
|
*/
|
|
|
|
|
|
var cssManager = {
|
|
CSS_BY_NAME,
|
|
|
|
/**
|
|
* Save a tag style to be later injected into DOM
|
|
* @param { string } name - if it's passed we will map the css to a tagname
|
|
* @param { string } css - css string
|
|
* @returns {Object} self
|
|
*/
|
|
add(name, css) {
|
|
if (!CSS_BY_NAME.has(name)) {
|
|
CSS_BY_NAME.set(name, css);
|
|
this.inject();
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Inject all previously saved tag styles into DOM
|
|
* innerHTML seems slow: http://jsperf.com/riot-insert-style
|
|
* @returns {Object} self
|
|
*/
|
|
inject() {
|
|
getStyleNode().innerHTML = [...CSS_BY_NAME.values()].join('\n');
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Remove a tag style from the DOM
|
|
* @param {string} name a registered tagname
|
|
* @returns {Object} self
|
|
*/
|
|
remove(name) {
|
|
if (CSS_BY_NAME.has(name)) {
|
|
CSS_BY_NAME.delete(name);
|
|
this.inject();
|
|
}
|
|
|
|
return this;
|
|
}
|
|
|
|
};
|
|
|
|
/**
|
|
* Function to curry any javascript method
|
|
* @param {Function} fn - the target function we want to curry
|
|
* @param {...[args]} acc - initial arguments
|
|
* @returns {Function|*} it will return a function until the target function
|
|
* will receive all of its arguments
|
|
*/
|
|
function curry(fn) {
|
|
for (var _len = arguments.length, acc = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
acc[_key - 1] = arguments[_key];
|
|
}
|
|
|
|
return function () {
|
|
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
args[_key2] = arguments[_key2];
|
|
}
|
|
|
|
args = [...acc, ...args];
|
|
return args.length < fn.length ? curry(fn, ...args) : fn(...args);
|
|
};
|
|
}
|
|
|
|
const COMPONENT_CORE_HELPERS = Object.freeze({
|
|
// component helpers
|
|
$(selector) {
|
|
return $(selector, this.root)[0];
|
|
},
|
|
|
|
$$(selector) {
|
|
return $(selector, this.root);
|
|
}
|
|
|
|
});
|
|
const COMPONENT_LIFECYCLE_METHODS = Object.freeze({
|
|
shouldUpdate: noop,
|
|
onBeforeMount: noop,
|
|
onMounted: noop,
|
|
onBeforeUpdate: noop,
|
|
onUpdated: noop,
|
|
onBeforeUnmount: noop,
|
|
onUnmounted: noop
|
|
});
|
|
const MOCKED_TEMPLATE_INTERFACE = {
|
|
update: noop,
|
|
mount: noop,
|
|
unmount: noop,
|
|
clone: noop,
|
|
createDOM: noop
|
|
/**
|
|
* Factory function to create the component templates only once
|
|
* @param {Function} template - component template creation function
|
|
* @param {Object} components - object containing the nested components
|
|
* @returns {TemplateChunk} template chunk object
|
|
*/
|
|
|
|
};
|
|
|
|
function componentTemplateFactory(template, components) {
|
|
return template(create$6, expressionTypes, bindingTypes, name => {
|
|
return components[name] || COMPONENTS_IMPLEMENTATION_MAP.get(name);
|
|
});
|
|
}
|
|
/**
|
|
* Create the component interface needed for the @riotjs/dom-bindings tag bindings
|
|
* @param {string} options.css - component css
|
|
* @param {Function} options.template - functon that will return the dom-bindings template function
|
|
* @param {Object} options.exports - component interface
|
|
* @param {string} options.name - component name
|
|
* @returns {Object} component like interface
|
|
*/
|
|
|
|
|
|
function createComponent(_ref) {
|
|
let {
|
|
css,
|
|
template,
|
|
exports,
|
|
name
|
|
} = _ref;
|
|
const templateFn = template ? componentTemplateFactory(template, exports ? createSubcomponents(exports.components) : {}) : MOCKED_TEMPLATE_INTERFACE;
|
|
return (_ref2) => {
|
|
let {
|
|
slots,
|
|
attributes,
|
|
props
|
|
} = _ref2;
|
|
const componentAPI = callOrAssign(exports) || {};
|
|
const component = defineComponent({
|
|
css,
|
|
template: templateFn,
|
|
componentAPI,
|
|
name
|
|
})({
|
|
slots,
|
|
attributes,
|
|
props
|
|
}); // notice that for the components create via tag binding
|
|
// we need to invert the mount (state/parentScope) arguments
|
|
// the template bindings will only forward the parentScope updates
|
|
// and never deal with the component state
|
|
|
|
return {
|
|
mount(element, parentScope, state) {
|
|
return component.mount(element, state, parentScope);
|
|
},
|
|
|
|
update(parentScope, state) {
|
|
return component.update(state, parentScope);
|
|
},
|
|
|
|
unmount(preserveRoot) {
|
|
return component.unmount(preserveRoot);
|
|
}
|
|
|
|
};
|
|
};
|
|
}
|
|
/**
|
|
* Component definition function
|
|
* @param {Object} implementation - the componen implementation will be generated via compiler
|
|
* @param {Object} component - the component initial properties
|
|
* @returns {Object} a new component implementation object
|
|
*/
|
|
|
|
function defineComponent(_ref3) {
|
|
let {
|
|
css,
|
|
template,
|
|
componentAPI,
|
|
name
|
|
} = _ref3;
|
|
// add the component css into the DOM
|
|
if (css && name) cssManager.add(name, css);
|
|
return curry(enhanceComponentAPI)(defineProperties( // set the component defaults without overriding the original component API
|
|
defineDefaults(componentAPI, Object.assign({}, COMPONENT_LIFECYCLE_METHODS, {
|
|
state: {}
|
|
})), Object.assign({
|
|
// defined during the component creation
|
|
slots: null,
|
|
root: null
|
|
}, COMPONENT_CORE_HELPERS, {
|
|
name,
|
|
css,
|
|
template
|
|
})));
|
|
}
|
|
/**
|
|
* Evaluate the component properties either from its real attributes or from its attribute expressions
|
|
* @param {HTMLElement} element - component root
|
|
* @param {Array} attributeExpressions - attribute values generated via createAttributeBindings
|
|
* @returns {Object} attributes key value pairs
|
|
*/
|
|
|
|
function evaluateProps(element, attributeExpressions) {
|
|
if (attributeExpressions === void 0) {
|
|
attributeExpressions = [];
|
|
}
|
|
|
|
return Object.assign({}, DOMattributesToObject(element), {}, evaluateAttributeExpressions(attributeExpressions));
|
|
}
|
|
/**
|
|
* Create the bindings to update the component attributes
|
|
* @param {HTMLElement} node - node where we will bind the expressions
|
|
* @param {Array} attributes - list of attribute bindings
|
|
* @returns {TemplateChunk} - template bindings object
|
|
*/
|
|
|
|
|
|
function createAttributeBindings(node, attributes) {
|
|
if (attributes === void 0) {
|
|
attributes = [];
|
|
}
|
|
|
|
const expressions = attributes.map(a => create$2(node, a));
|
|
const binding = {};
|
|
|
|
const updateValues = method => scope => {
|
|
expressions.forEach(e => e[method](scope));
|
|
return binding;
|
|
};
|
|
|
|
return Object.assign(binding, {
|
|
expressions,
|
|
mount: updateValues('mount'),
|
|
update: updateValues('update'),
|
|
unmount: updateValues('unmount')
|
|
});
|
|
}
|
|
/**
|
|
* Create the subcomponents that can be included inside a tag in runtime
|
|
* @param {Object} components - components imported in runtime
|
|
* @returns {Object} all the components transformed into Riot.Component factory functions
|
|
*/
|
|
|
|
|
|
function createSubcomponents(components) {
|
|
if (components === void 0) {
|
|
components = {};
|
|
}
|
|
|
|
return Object.entries(callOrAssign(components)).reduce((acc, _ref4) => {
|
|
let [key, value] = _ref4;
|
|
acc[camelToDashCase(key)] = createComponent(value);
|
|
return acc;
|
|
}, {});
|
|
}
|
|
/**
|
|
* Run the component instance through all the plugins set by the user
|
|
* @param {Object} component - component instance
|
|
* @returns {Object} the component enhanced by the plugins
|
|
*/
|
|
|
|
|
|
function runPlugins(component) {
|
|
return [...PLUGINS_SET].reduce((c, fn) => fn(c) || c, component);
|
|
}
|
|
/**
|
|
* Compute the component current state merging it with its previous state
|
|
* @param {Object} oldState - previous state object
|
|
* @param {Object} newState - new state givent to the `update` call
|
|
* @returns {Object} new object state
|
|
*/
|
|
|
|
|
|
function computeState(oldState, newState) {
|
|
return Object.assign({}, oldState, {}, callOrAssign(newState));
|
|
}
|
|
/**
|
|
* Add eventually the "is" attribute to link this DOM node to its css
|
|
* @param {HTMLElement} element - target root node
|
|
* @param {string} name - name of the component mounted
|
|
* @returns {undefined} it's a void function
|
|
*/
|
|
|
|
|
|
function addCssHook(element, name) {
|
|
if (getName(element) !== name) {
|
|
set(element, 'is', name);
|
|
}
|
|
}
|
|
/**
|
|
* Component creation factory function that will enhance the user provided API
|
|
* @param {Object} component - a component implementation previously defined
|
|
* @param {Array} options.slots - component slots generated via riot compiler
|
|
* @param {Array} options.attributes - attribute expressions generated via riot compiler
|
|
* @returns {Riot.Component} a riot component instance
|
|
*/
|
|
|
|
|
|
function enhanceComponentAPI(component, _ref5) {
|
|
let {
|
|
slots,
|
|
attributes,
|
|
props
|
|
} = _ref5;
|
|
const initialProps = callOrAssign(props);
|
|
return autobindMethods(runPlugins(defineProperties(Object.create(component), {
|
|
mount(element, state, parentScope) {
|
|
if (state === void 0) {
|
|
state = {};
|
|
}
|
|
|
|
this[ATTRIBUTES_KEY_SYMBOL] = createAttributeBindings(element, attributes).mount(parentScope);
|
|
this.props = Object.freeze(Object.assign({}, initialProps, {}, evaluateProps(element, this[ATTRIBUTES_KEY_SYMBOL].expressions)));
|
|
this.state = computeState(this.state, state);
|
|
this[TEMPLATE_KEY_SYMBOL] = this.template.createDOM(element).clone(); // link this object to the DOM node
|
|
|
|
element[DOM_COMPONENT_INSTANCE_PROPERTY] = this; // add eventually the 'is' attribute
|
|
|
|
component.name && addCssHook(element, component.name); // define the root element
|
|
|
|
defineProperty(this, 'root', element); // define the slots array
|
|
|
|
defineProperty(this, 'slots', slots); // before mount lifecycle event
|
|
|
|
this.onBeforeMount(this.props, this.state); // mount the template
|
|
|
|
this[TEMPLATE_KEY_SYMBOL].mount(element, this, parentScope);
|
|
this.onMounted(this.props, this.state);
|
|
return this;
|
|
},
|
|
|
|
update(state, parentScope) {
|
|
if (state === void 0) {
|
|
state = {};
|
|
}
|
|
|
|
if (parentScope) {
|
|
this[ATTRIBUTES_KEY_SYMBOL].update(parentScope);
|
|
}
|
|
|
|
const newProps = evaluateProps(this.root, this[ATTRIBUTES_KEY_SYMBOL].expressions);
|
|
if (this.shouldUpdate(newProps, this.props) === false) return;
|
|
this.props = Object.freeze(Object.assign({}, initialProps, {}, newProps));
|
|
this.state = computeState(this.state, state);
|
|
this.onBeforeUpdate(this.props, this.state);
|
|
this[TEMPLATE_KEY_SYMBOL].update(this, parentScope);
|
|
this.onUpdated(this.props, this.state);
|
|
return this;
|
|
},
|
|
|
|
unmount(preserveRoot) {
|
|
this.onBeforeUnmount(this.props, this.state);
|
|
this[ATTRIBUTES_KEY_SYMBOL].unmount(); // if the preserveRoot is null the template html will be left untouched
|
|
// in that case the DOM cleanup will happen differently from a parent node
|
|
|
|
this[TEMPLATE_KEY_SYMBOL].unmount(this, {}, preserveRoot === null ? null : !preserveRoot);
|
|
this.onUnmounted(this.props, this.state);
|
|
return this;
|
|
}
|
|
|
|
})), Object.keys(component).filter(prop => isFunction(component[prop])));
|
|
}
|
|
/**
|
|
* Component initialization function starting from a DOM node
|
|
* @param {HTMLElement} element - element to upgrade
|
|
* @param {Object} initialProps - initial component properties
|
|
* @param {string} componentName - component id
|
|
* @returns {Object} a new component instance bound to a DOM node
|
|
*/
|
|
|
|
function mountComponent(element, initialProps, componentName) {
|
|
const name = componentName || getName(element);
|
|
if (!COMPONENTS_IMPLEMENTATION_MAP.has(name)) panic(`The component named "${name}" was never registered`);
|
|
const component = COMPONENTS_IMPLEMENTATION_MAP.get(name)({
|
|
props: initialProps
|
|
});
|
|
return component.mount(element);
|
|
}
|
|
|
|
/**
|
|
* Similar to compose but performs from left-to-right function composition.<br/>
|
|
* {@link https://30secondsofcode.org/function#composeright see also}
|
|
* @param {...[function]} fns) - list of unary function
|
|
* @returns {*} result of the computation
|
|
*/
|
|
/**
|
|
* Performs right-to-left function composition.<br/>
|
|
* Use Array.prototype.reduce() to perform right-to-left function composition.<br/>
|
|
* The last (rightmost) function can accept one or more arguments; the remaining functions must be unary.<br/>
|
|
* {@link https://30secondsofcode.org/function#compose original source code}
|
|
* @param {...[function]} fns) - list of unary function
|
|
* @returns {*} result of the computation
|
|
*/
|
|
|
|
function compose() {
|
|
for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
fns[_key2] = arguments[_key2];
|
|
}
|
|
|
|
return fns.reduce((f, g) => function () {
|
|
return f(g(...arguments));
|
|
});
|
|
}
|
|
|
|
const {
|
|
DOM_COMPONENT_INSTANCE_PROPERTY: DOM_COMPONENT_INSTANCE_PROPERTY$1,
|
|
COMPONENTS_IMPLEMENTATION_MAP: COMPONENTS_IMPLEMENTATION_MAP$1,
|
|
PLUGINS_SET: PLUGINS_SET$1
|
|
} = globals;
|
|
/**
|
|
* Riot public api
|
|
*/
|
|
|
|
/**
|
|
* Register a custom tag by name
|
|
* @param {string} name - component name
|
|
* @param {Object} implementation - tag implementation
|
|
* @returns {Map} map containing all the components implementations
|
|
*/
|
|
|
|
function register(name, _ref) {
|
|
let {
|
|
css,
|
|
template,
|
|
exports
|
|
} = _ref;
|
|
if (COMPONENTS_IMPLEMENTATION_MAP$1.has(name)) panic(`The component "${name}" was already registered`);
|
|
COMPONENTS_IMPLEMENTATION_MAP$1.set(name, createComponent({
|
|
name,
|
|
css,
|
|
template,
|
|
exports
|
|
}));
|
|
return COMPONENTS_IMPLEMENTATION_MAP$1;
|
|
}
|
|
/**
|
|
* Unregister a riot web component
|
|
* @param {string} name - component name
|
|
* @returns {Map} map containing all the components implementations
|
|
*/
|
|
|
|
function unregister(name) {
|
|
if (!COMPONENTS_IMPLEMENTATION_MAP$1.has(name)) panic(`The component "${name}" was never registered`);
|
|
COMPONENTS_IMPLEMENTATION_MAP$1.delete(name);
|
|
cssManager.remove(name);
|
|
return COMPONENTS_IMPLEMENTATION_MAP$1;
|
|
}
|
|
/**
|
|
* Mounting function that will work only for the components that were globally registered
|
|
* @param {string|HTMLElement} selector - query for the selection or a DOM element
|
|
* @param {Object} initialProps - the initial component properties
|
|
* @param {string} name - optional component name
|
|
* @returns {Array} list of nodes upgraded
|
|
*/
|
|
|
|
function mount(selector, initialProps, name) {
|
|
return $(selector).map(element => mountComponent(element, initialProps, name));
|
|
}
|
|
/**
|
|
* Sweet unmounting helper function for the DOM node mounted manually by the user
|
|
* @param {string|HTMLElement} selector - query for the selection or a DOM element
|
|
* @param {boolean|null} keepRootElement - if true keep the root element
|
|
* @returns {Array} list of nodes unmounted
|
|
*/
|
|
|
|
function unmount(selector, keepRootElement) {
|
|
return $(selector).map(element => {
|
|
if (element[DOM_COMPONENT_INSTANCE_PROPERTY$1]) {
|
|
element[DOM_COMPONENT_INSTANCE_PROPERTY$1].unmount(keepRootElement);
|
|
}
|
|
|
|
return element;
|
|
});
|
|
}
|
|
/**
|
|
* Define a riot plugin
|
|
* @param {Function} plugin - function that will receive all the components created
|
|
* @returns {Set} the set containing all the plugins installed
|
|
*/
|
|
|
|
function install(plugin) {
|
|
if (!isFunction(plugin)) panic('Plugins must be of type function');
|
|
if (PLUGINS_SET$1.has(plugin)) panic('This plugin was already install');
|
|
PLUGINS_SET$1.add(plugin);
|
|
return PLUGINS_SET$1;
|
|
}
|
|
/**
|
|
* Uninstall a riot plugin
|
|
* @param {Function} plugin - plugin previously installed
|
|
* @returns {Set} the set containing all the plugins installed
|
|
*/
|
|
|
|
function uninstall(plugin) {
|
|
if (!PLUGINS_SET$1.has(plugin)) panic('This plugin was never installed');
|
|
PLUGINS_SET$1.delete(plugin);
|
|
return PLUGINS_SET$1;
|
|
}
|
|
/**
|
|
* Helpter method to create component without relying on the registered ones
|
|
* @param {Object} implementation - component implementation
|
|
* @returns {Function} function that will allow you to mount a riot component on a DOM node
|
|
*/
|
|
|
|
function component(implementation) {
|
|
return (el, props) => compose(c => c.mount(el), c => c({
|
|
props
|
|
}), createComponent)(implementation);
|
|
}
|
|
/** @type {string} current riot version */
|
|
|
|
const version = 'v4.5.0'; // expose some internal stuff that might be used from external tools
|
|
|
|
const __ = {
|
|
cssManager,
|
|
defineComponent,
|
|
globals
|
|
};
|
|
|
|
|
|
|
|
|
|
/***/ }),
|
|
|
|
/***/ "./node_modules/smooth-scroll/dist/smooth-scroll.polyfills.min.js":
|
|
/*!************************************************************************!*\
|
|
!*** ./node_modules/smooth-scroll/dist/smooth-scroll.polyfills.min.js ***!
|
|
\************************************************************************/
|
|
/*! no static exports found */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
/* WEBPACK VAR INJECTION */(function(global) {var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! smooth-scroll v16.1.0 | (c) 2019 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/smooth-scroll */
|
|
window.Element&&!Element.prototype.closest&&(Element.prototype.closest=function(e){var t,n=(this.document||this.ownerDocument).querySelectorAll(e),o=this;do{for(t=n.length;0<=--t&&n.item(t)!==o;);}while(t<0&&(o=o.parentElement));return o}),(function(){if("function"==typeof window.CustomEvent)return;function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,window.CustomEvent=e})(),(function(){for(var r=0,e=["ms","moz","webkit","o"],t=0;t<e.length&&!window.requestAnimationFrame;++t)window.requestAnimationFrame=window[e[t]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[e[t]+"CancelAnimationFrame"]||window[e[t]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(e,t){var n=(new Date).getTime(),o=Math.max(0,16-(n-r)),a=window.setTimeout((function(){e(n+o)}),o);return r=n+o,a}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(e){clearTimeout(e)})})(),(function(e,t){ true?!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function(){return t(e)}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
|
|
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)):undefined})("undefined"!=typeof global?global:"undefined"!=typeof window?window:this,(function(q){"use strict";var I={ignore:"[data-scroll-ignore]",header:null,topOnEmptyHash:!0,speed:500,speedAsDuration:!1,durationMax:null,durationMin:null,clip:!0,offset:0,easing:"easeInOutCubic",customEasing:null,updateURL:!0,popstate:!0,emitEvents:!0},F=function(){var n={};return Array.prototype.forEach.call(arguments,(function(e){for(var t in e){if(!e.hasOwnProperty(t))return;n[t]=e[t]}})),n},r=function(e){"#"===e.charAt(0)&&(e=e.substr(1));for(var t,n=String(e),o=n.length,a=-1,r="",i=n.charCodeAt(0);++a<o;){if(0===(t=n.charCodeAt(a)))throw new InvalidCharacterError("Invalid character: the input contains U+0000.");1<=t&&t<=31||127==t||0===a&&48<=t&&t<=57||1===a&&48<=t&&t<=57&&45===i?r+="\\"+t.toString(16)+" ":r+=128<=t||45===t||95===t||48<=t&&t<=57||65<=t&&t<=90||97<=t&&t<=122?n.charAt(a):"\\"+n.charAt(a)}return"#"+r},L=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},x=function(e){return e?(t=e,parseInt(q.getComputedStyle(t).height,10)+e.offsetTop):0;var t},H=function(e,t,n,o){if(t.emitEvents&&"function"==typeof q.CustomEvent){var a=new CustomEvent(e,{bubbles:!0,detail:{anchor:n,toggle:o}});document.dispatchEvent(a)}};return function(o,e){var A,a,O,C,M={};M.cancelScroll=function(e){cancelAnimationFrame(C),C=null,e||H("scrollCancel",A)},M.animateScroll=function(i,c,e){M.cancelScroll();var s=F(A||I,e||{}),u="[object Number]"===Object.prototype.toString.call(i),t=u||!i.tagName?null:i;if(u||t){var l=q.pageYOffset;s.header&&!O&&(O=document.querySelector(s.header));var n,o,a,m,r,d,f,h,p=x(O),g=u?i:(function(e,t,n,o){var a=0;if(e.offsetParent)for(;a+=e.offsetTop,e=e.offsetParent;);return a=Math.max(a-t-n,0),o&&(a=Math.min(a,L()-q.innerHeight)),a})(t,p,parseInt("function"==typeof s.offset?s.offset(i,c):s.offset,10),s.clip),y=g-l,v=L(),w=0,S=(n=y,a=(o=s).speedAsDuration?o.speed:Math.abs(n/1e3*o.speed),o.durationMax&&a>o.durationMax?o.durationMax:o.durationMin&&a<o.durationMin?o.durationMin:parseInt(a,10)),E=function(e,t){var n,o,a,r=q.pageYOffset;if(e==t||r==t||(l<t&&q.innerHeight+r)>=v)return M.cancelScroll(!0),o=t,a=u,0===(n=i)&&document.body.focus(),a||(n.focus(),document.activeElement!==n&&(n.setAttribute("tabindex","-1"),n.focus(),n.style.outline="none"),q.scrollTo(0,o)),H("scrollStop",s,i,c),!(C=m=null)},b=function(e){var t,n,o;m||(m=e),w+=e-m,d=l+y*(n=r=1<(r=0===S?0:w/S)?1:r,"easeInQuad"===(t=s).easing&&(o=n*n),"easeOutQuad"===t.easing&&(o=n*(2-n)),"easeInOutQuad"===t.easing&&(o=n<.5?2*n*n:(4-2*n)*n-1),"easeInCubic"===t.easing&&(o=n*n*n),"easeOutCubic"===t.easing&&(o=--n*n*n+1),"easeInOutCubic"===t.easing&&(o=n<.5?4*n*n*n:(n-1)*(2*n-2)*(2*n-2)+1),"easeInQuart"===t.easing&&(o=n*n*n*n),"easeOutQuart"===t.easing&&(o=1- --n*n*n*n),"easeInOutQuart"===t.easing&&(o=n<.5?8*n*n*n*n:1-8*--n*n*n*n),"easeInQuint"===t.easing&&(o=n*n*n*n*n),"easeOutQuint"===t.easing&&(o=1+--n*n*n*n*n),"easeInOutQuint"===t.easing&&(o=n<.5?16*n*n*n*n*n:1+16*--n*n*n*n*n),t.customEasing&&(o=t.customEasing(n)),o||n),q.scrollTo(0,Math.floor(d)),E(d,g)||(C=q.requestAnimationFrame(b),m=e)};0===q.pageYOffset&&q.scrollTo(0,0),f=i,h=s,u||history.pushState&&h.updateURL&&history.pushState({smoothScroll:JSON.stringify(h),anchor:f.id},document.title,f===document.documentElement?"#top":"#"+f.id),"matchMedia"in q&&q.matchMedia("(prefers-reduced-motion)").matches?q.scrollTo(0,Math.floor(g)):(H("scrollStart",s,i,c),M.cancelScroll(!0),q.requestAnimationFrame(b))}};var t=function(e){if(!e.defaultPrevented&&!(0!==e.button||e.metaKey||e.ctrlKey||e.shiftKey)&&"closest"in e.target&&(a=e.target.closest(o))&&"a"===a.tagName.toLowerCase()&&!e.target.closest(A.ignore)&&a.hostname===q.location.hostname&&a.pathname===q.location.pathname&&/#/.test(a.href)){var t,n=r(a.hash);if("#"===n){if(!A.topOnEmptyHash)return;t=document.documentElement}else t=document.querySelector(n);(t=t||"#top"!==n?t:document.documentElement)&&(e.preventDefault(),(function(e){if(history.replaceState&&e.updateURL&&!history.state){var t=q.location.hash;t=t||"",history.replaceState({smoothScroll:JSON.stringify(e),anchor:t||q.pageYOffset},document.title,t||q.location.href)}})(A),M.animateScroll(t,a))}},n=function(e){if(null!==history.state&&history.state.smoothScroll&&history.state.smoothScroll===JSON.stringify(A)){var t=history.state.anchor;"string"==typeof t&&t&&!(t=document.querySelector(r(history.state.anchor)))||M.animateScroll(t,null,{updateURL:!1})}};M.destroy=function(){A&&(document.removeEventListener("click",t,!1),q.removeEventListener("popstate",n,!1),M.cancelScroll(),C=O=a=A=null)};return (function(){if(!("querySelector"in document&&"addEventListener"in q&&"requestAnimationFrame"in q&&"closest"in q.Element.prototype))throw"Smooth Scroll: This browser does not support the required JavaScript methods and browser APIs.";M.destroy(),A=F(I,e||{}),O=A.header?document.querySelector(A.header):null,document.addEventListener("click",t,!1),A.updateURL&&A.popstate&&q.addEventListener("popstate",n,!1)})(),M}}));
|
|
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../webpack/buildin/global.js */ "./node_modules/webpack/buildin/global.js")))
|
|
|
|
/***/ }),
|
|
|
|
/***/ "./node_modules/webpack/buildin/global.js":
|
|
/*!***********************************!*\
|
|
!*** (webpack)/buildin/global.js ***!
|
|
\***********************************/
|
|
/*! no static exports found */
|
|
/***/ (function(module, exports) {
|
|
|
|
var g;
|
|
|
|
// This works in non-strict mode
|
|
g = (function() {
|
|
return this;
|
|
})();
|
|
|
|
try {
|
|
// This works if eval is allowed (see CSP)
|
|
g = g || new Function("return this")();
|
|
} catch (e) {
|
|
// This works if the window reference is available
|
|
if (typeof window === "object") g = window;
|
|
}
|
|
|
|
// g can still be undefined, but nothing to do about it...
|
|
// We return undefined, instead of nothing here, so it's
|
|
// easier to handle this case. if(!global) { ...}
|
|
|
|
module.exports = g;
|
|
|
|
|
|
/***/ }),
|
|
|
|
/***/ "./src/TinyOnePage.riot":
|
|
/*!******************************!*\
|
|
!*** ./src/TinyOnePage.riot ***!
|
|
\******************************/
|
|
/*! exports provided: default */
|
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
|
|
"use strict";
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony import */ var smooth_scroll__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! smooth-scroll */ "./node_modules/smooth-scroll/dist/smooth-scroll.polyfills.min.js");
|
|
/* harmony import */ var smooth_scroll__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(smooth_scroll__WEBPACK_IMPORTED_MODULE_0__);
|
|
|
|
|
|
/* harmony default export */ __webpack_exports__["default"] = ({
|
|
'css': null,
|
|
|
|
'exports': {
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
state:
|
|
{
|
|
options: {
|
|
offset: 100
|
|
}
|
|
},
|
|
|
|
/**
|
|
* getting innerHTML and remove
|
|
*
|
|
*
|
|
*/
|
|
onBeforeMount()
|
|
{
|
|
this.content = this.root.innerHTML
|
|
this.root.innerHTML = ''
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
onMounted()
|
|
{
|
|
// adding content to wrapper
|
|
const wrapper = this.$('.tiny-one-page__inner');
|
|
wrapper.innerHTML = this.content;
|
|
|
|
// adding scroll smooth, get all elements with hash
|
|
this.scroll = new smooth_scroll__WEBPACK_IMPORTED_MODULE_0___default.a('.tiny-one-page__inner a[href*="#"]', {
|
|
offset: function() {
|
|
return this.state.options.offset;
|
|
}
|
|
});
|
|
|
|
window.addEventListener('scroll', this.handleScroll.bind(this), false);
|
|
|
|
if (window.location.hash) {
|
|
this.addClass(this.$(".tiny-one-page__inner a[href$='" + window.location.hash + "']"));
|
|
} else {
|
|
this.addClass(this.$$(".tiny-one-page__inner a")[0]);
|
|
}
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {Object} element
|
|
* @return {Boolean}
|
|
*/
|
|
isVisible(element)
|
|
{
|
|
return ((element.offsetHeight + element.offsetTop) - this.state.options.offset) > window.pageYOffset;
|
|
},
|
|
|
|
/**
|
|
* add css class to parent element
|
|
*
|
|
* @param {Object} element
|
|
*/
|
|
addClass(element)
|
|
{
|
|
element
|
|
.parentElement
|
|
.classList
|
|
.add('current');
|
|
},
|
|
|
|
/**
|
|
* remove css class from parent element
|
|
*
|
|
* @param {Object} element
|
|
*/
|
|
removeClass(element)
|
|
{
|
|
element
|
|
.parentElement
|
|
.classList
|
|
.remove('current');
|
|
},
|
|
|
|
/**
|
|
* handle scrolling,
|
|
*
|
|
* @param {Object} event
|
|
*/
|
|
handleScroll(event)
|
|
{
|
|
// get elements
|
|
const elements = this.$$('.tiny-one-page__inner a');
|
|
|
|
// if found
|
|
let hasFound = false;
|
|
|
|
elements.forEach(function(element, index) {
|
|
|
|
const target = document.querySelector(element.hash);
|
|
|
|
if (this.isVisible(target) && hasFound === false) {
|
|
this.addClass(element);
|
|
hasFound = true;
|
|
} else {
|
|
this.removeClass(element);
|
|
}
|
|
}.bind(this));
|
|
}
|
|
},
|
|
|
|
'template': function(template, expressionTypes, bindingTypes, getComponent) {
|
|
return template(
|
|
'<div class="tiny-one-page"><div class="tiny-one-page__inner"></div></div>',
|
|
[]
|
|
);
|
|
},
|
|
|
|
'name': 'tiny-one-page'
|
|
});
|
|
|
|
/***/ }),
|
|
|
|
/***/ "./src/demo.scss":
|
|
/*!***********************!*\
|
|
!*** ./src/demo.scss ***!
|
|
\***********************/
|
|
/*! no static exports found */
|
|
/***/ (function(module, exports) {
|
|
|
|
// removed by extract-text-webpack-plugin
|
|
|
|
/***/ }),
|
|
|
|
/***/ 0:
|
|
/*!***************************************!*\
|
|
!*** multi ./demo.js ./src/demo.scss ***!
|
|
\***************************************/
|
|
/*! no static exports found */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
__webpack_require__(/*! /home/herrhase/Workspace/tentakelfabrik/tiny-components/tiny-one-page/demo.js */"./demo.js");
|
|
module.exports = __webpack_require__(/*! /home/herrhase/Workspace/tentakelfabrik/tiny-components/tiny-one-page/src/demo.scss */"./src/demo.scss");
|
|
|
|
|
|
/***/ })
|
|
|
|
/******/ });
|