https://jankelley.com/wp-content/themes/jankelley/assets/js/splitting.js?ver=7.1.2

1(function (global, factory) {
2	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
3	typeof define === 'function' && define.amd ? define(factory) :
4	(global.Splitting = factory());
5}(this, (function () { 'use strict';
6
7var root = document;
8var createText = root.createTextNode.bind(root);
9
10/**
11 * # setProperty
12 * Apply a CSS var
13 * @param el{HTMLElement} 
14 * @param varName {string} 
15 * @param value {string|number}  
16 */
17function setProperty(el, varName, value) {
18    el.style.setProperty(varName, value);
19} 
20
21/**
22 * 
23 * @param {Node} el 
24 * @param {Node} child 
25 */
26function appendChild(el, child) {
27  return el.appendChild(child);
28}
29
30function createElement(parent, key, text, whitespace) {
31  var el = root.createElement('span');
32  key && (el.className = key); 
33  if (text) { 
34      !whitespace && el.setAttribute("data-" + key, text);
35      el.textContent = text; 
36  }
37  return (parent && appendChild(parent, el)) || el;
38}
39
40function getData(el, key) {
41  return el.getAttribute("data-" + key)
42}
43
44/**
45 * 
46 * @param e {import('../types').Target} 
47 * @param parent {HTMLElement}
48 * @returns {HTMLElement[]}
49 */
50function $(e, parent) {
51
52    return !e || e.length == 0
53        ? // null or empty string returns empty array
54          []
55        : e.nodeName
56            ? // a single element is wrapped in an array
57              [e]
58            : // selector and NodeList are converted to Element[]
59              [].slice.call(e[0].nodeName ? e : (parent || root).querySelectorAll(e));
60}
61
62/**
63 * Creates and fills an array with the value provided
64 * @template {T}
65 * @param {number} len
66 * @param {() => T} valueProvider
67 * @return {T}
68 */
69function Array2D(len) {
70    var a = [];
71    for (; len--; ) {
72        a[len] = [];
73    }
74    return a;
75}
76
77function each(items, fn) {
78    items && items.some(fn);
79}
80
81function selectFrom(obj) {
82    return function (key) {
83        return obj[key];
84    }
85}
86
87/**
88 * # Splitting.index
89 * Index split elements and add them to a Splitting instance.
90 *
91 * @param element {HTMLElement}
92 * @param key {string}
93 * @param items {HTMLElement[] | HTMLElement[][]}
94 */
95function index(element, key, items) {
96    var prefix = '--' + key;
97    var cssVar = prefix + "-index";
98
99    each(items, function (items, i) {
100        if (Array.isArray(items)) {
101            each(items, function(item) {
102                setProperty(item, cssVar, i);
103            });
104        } else {
105            setProperty(items, cssVar, i);
106        }
107    });
108
109    setProperty(element, prefix + "-total", items.length);
110}
111
112/**
113 * @type {Record<string, import('./types').ISplittingPlugin>}
114 */
115var plugins = {};
116
117/**
118 * @param by {string}
119 * @param parent {string}
120 * @param deps {string[]}
121 * @return {string[]}
122 */
123function resolvePlugins(by, parent, deps) {
124    // skip if already visited this dependency
125    var index = deps.indexOf(by);
126    if (index == -1) {
127        // if new to dependency array, add to the beginning
128        deps.unshift(by);
129
130        // recursively call this function for all dependencies
131        each(plugins[by].depends, function(p) {
132            resolvePlugins(p, by, deps);
133        });
134    } else {
135        // if this dependency was added already move to the left of
136        // the parent dependency so it gets loaded in order
137        var indexOfParent = deps.indexOf(parent);
138        deps.splice(index, 1);
139        deps.splice(indexOfParent, 0, by);
140    }
141    return deps;
142}
143
144/**
145 * Internal utility for creating plugins... essentially to reduce
146 * the size of the library
147 * @param {string} by 
148 * @param {string} key 
149 * @param {string[]} depends 
150 * @param {Function} split 
151 * @returns {import('./types').ISplittingPlugin}
152 */
153function createPlugin(by, depends, key, split) {
154    return {
155        by: by,
156        depends: depends,
157        key: key,
158        split: split
159    }
160}
161
162/**
163 *
164 * @param by {string}
165 * @returns {import('./types').ISplittingPlugin[]}
166 */
167function resolve(by) {
168    return resolvePlugins(by, 0, []).map(selectFrom(plugins));
169}
170
171/**
172 * Adds a new plugin to splitting
173 * @param opts {import('./types').ISplittingPlugin}
174 */
175function add(opts) {
176    plugins[opts.by] = opts;
177}
178
179/**
180 * # Splitting.split

332  parent.innerHTML = opts.content;
333  Splitting(opts);
334  return parent.outerHTML
335}
336
337Splitting.html = html;
338Splitting.add = add;
339
340function detectGrid(el, options, side) {
341    var items = $(options.matching || el.children, el);
342    var c = {};
343
344    each(items, function(w) {
345        var val = Math.round(w[side]);
346        (c[val] || (c[val] = [])).push(w);
347    });
348
349    return Object.keys(c).map(Number).sort(byNumber).map(selectFrom(c));
350}
351
352function byNumber(a, b) {
353    return a - b;
354}
355
356var linePlugin = createPlugin(
357    /*by: */ 'lines',
358    /*depends: */ [WORDS],
359    /*key: */ 'line',
360    /*split: */ function(el, options, ctx) {
361      return detectGrid(el, { matching: ctx[WORDS] }, 'offsetTop')
362    }
363);
364
365var itemPlugin = createPlugin(
366    /*by: */ 'items',
367    /*depends: */ _,
368    /*key: */ 'item', 
369    /*split: */ function(el, options) {
370        return $(options.matching || el.children, el)
371    }
372);
373
374var rowPlugin = createPlugin(
375    /*by: */ 'rows',
376    /*depends: */ _,
377    /*key: */ 'row', 
378    /*split: */ function(el, options) {
379        return detectGrid(el, options, "offsetTop");
380    }
381);
382
383var columnPlugin = createPlugin(
384    /*by: */ 'cols',
385    /*depends: */ _,
386    /*key: */ "col", 
387    /*split: */ function(el, options) {
388        return detectGrid(el, options, "offsetLeft");
389    }
390);
391
392var gridPlugin = createPlugin(
393    /*by: */ 'grid',
394    /*depends: */ ['rows', 'cols']
395);
396
397var LAYOUT = "layout";
398
399var layoutPlugin = createPlugin(
400    /*by: */ LAYOUT,
401    /*depends: */ _,
402    /*key: */ _,
403    /*split: */ function(el, opts) {
404        // detect and set options
405        var rows =  opts.rows = +(opts.rows || getData(el, 'rows') || 1);
406        var columns = opts.columns = +(opts.columns || getData(el, 'columns') || 1);
407
408        // Seek out the first <img> if the value is true 
409        opts.image = opts.image || getData(el, 'image') || el.currentSrc || el.src;
410        if (opts.image) {
411            var img = $("img", el)[0];
412            opts.image = img && (img.currentSrc || img.src);
413        }
414
415        // add optional image to background
416        if (opts.image) {
417            setProperty(el, "background-image", "url(" + opts.image + ")");
418        }
419
420        var totalCells = rows * columns;
421        var elements = [];
422
423        var container = createElement(_, "cell-grid");
424        while (totalCells--) {
425            // Create a span
426            var cell = createElement(container, "cell");
427            createElement(cell, "cell-inner");
428            elements.push(cell);
429        }
430
431        // Append elements back into the parent
432        appendChild(el, container);
433
434        return elements;
435    }
436);
437
438var cellRowPlugin = createPlugin(
439    /*by: */ "cellRows",
440    /*depends: */ [LAYOUT],
441    /*key: */ "row",
442    /*split: */ function(el, opts, ctx) {
443        var rowCount = opts.rows;
444        var result = Array2D(rowCount);
445
446        each(ctx[LAYOUT], function(cell, i, src) {
447            result[Math.floor(i / (src.length / rowCount))].push(cell);
448        });
449
450        return result;
451    }
452);
453
454var cellColumnPlugin = createPlugin(
455    /*by: */ "cellColumns",
456    /*depends: */ [LAYOUT],
457    /*key: */ "col",
458    /*split: */ function(el, opts, ctx) {
459        var columnCount = opts.columns;
460        var result = Array2D(columnCount);
461
462        each(ctx[LAYOUT], function(cell, i) {
463            result[i % columnCount].push(cell);
464        });
465
466        return result;
467    }
468);
469
470var cellPlugin = createPlugin(
471    /*by: */ "cells",
472    /*depends: */ ['cellRows', 'cellColumns'],
473    /*key: */ "cell", 
474    /*split: */ function(el, opt, ctx) { 
475        // re-index the layout as the cells
476        return ctx[LAYOUT];
477    }
478);
479
480// install plugins
481// word/char plugins
482add(wordPlugin);
483add(charPlugin);
484add(linePlugin);
485// grid plugins
486add(itemPlugin);
487add(rowPlugin);
488add(columnPlugin);
489add(gridPlugin);
490// cell-layout plugins
491add(layoutPlugin);
492add(cellRowPlugin);
493add(cellColumnPlugin);
494add(cellPlugin);
495
496return Splitting;
497
498})));