UNPKG

scrollreveal

Version:

Easy scroll animations for web and mobile browsers.

525 lines (524 loc) 18.3 kB
<!doctype html> <html lang="en"> <head> <title>Code coverage report for library/src/instance/methods/reveal.js</title> <meta charset="utf-8" /> <link rel="stylesheet" href="../../../../prettify.css" /> <link rel="stylesheet" href="../../../../base.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type='text/css'> .coverage-summary .sorter { background-image: url(../../../../sort-arrow-sprite.png); } </style> </head> <body> <div class='wrapper'> <div class='pad1'> <h1> <a href="../../../../index.html">all files</a> / <a href="index.html">library/src/instance/methods/</a> reveal.js </h1> <div class='clearfix'> <div class='fl pad1y space-right2'> <span class="strong">1.64% </span> <span class="quiet">Statements</span> <span class='fraction'>1/61</span> </div> <div class='fl pad1y space-right2'> <span class="strong">0% </span> <span class="quiet">Branches</span> <span class='fraction'>0/34</span> </div> <div class='fl pad1y space-right2'> <span class="strong">0% </span> <span class="quiet">Functions</span> <span class='fraction'>0/4</span> </div> <div class='fl pad1y space-right2'> <span class="strong">1.64% </span> <span class="quiet">Lines</span> <span class='fraction'>1/61</span> </div> </div> </div> <div class='status-line low'></div> <pre><table class="coverage"> <tr><td class="line-count quiet">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154</td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-yes"></span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import style from '../functions/style' import initialize from '../functions/initialize' &nbsp; import { getNode, getNodes, logger } from '../../utils/core' import { deepAssign, each, nextUniqueId } from '../../utils/generic' import { isMobile } from '../../utils/browser' &nbsp; &nbsp; export default <span class="fstat-no" title="function not covered" >function reveal (target, options, interval, sync) {</span> <span class="cstat-no" title="statement not covered" > var this$1 = this;</span> &nbsp; &nbsp; /** * The reveal method has an optional 2nd parameter, * so here we just shuffle things around to accept * the interval being passed as the 2nd argument. */ <span class="cstat-no" title="statement not covered" > if (typeof options === 'number') {</span> <span class="cstat-no" title="statement not covered" > interval = Math.abs(parseInt(options))</span> <span class="cstat-no" title="statement not covered" > options = {}</span> } else { <span class="cstat-no" title="statement not covered" > interval = Math.abs(parseInt(interval))</span> <span class="cstat-no" title="statement not covered" > options = options || {}</span> } &nbsp; <span class="cstat-no" title="statement not covered" > var config = deepAssign({}, this.defaults, options)</span> <span class="cstat-no" title="statement not covered" > var containers = this.store.containers</span> <span class="cstat-no" title="statement not covered" > var container = getNode(config.container)</span> <span class="cstat-no" title="statement not covered" > var targets = getNodes(target, container)</span> &nbsp; <span class="cstat-no" title="statement not covered" > if (!targets.length) {</span> <span class="cstat-no" title="statement not covered" > logger('Reveal aborted.', 'Reveal cannot be performed on 0 elements.')</span> <span class="cstat-no" title="statement not covered" > return</span> } &nbsp; /** * Verify our platform matches our platform configuration. */ <span class="cstat-no" title="statement not covered" > if (!config.mobile &amp;&amp; isMobile() || !config.desktop &amp;&amp; !isMobile()) {</span> <span class="cstat-no" title="statement not covered" > logger('Reveal aborted.', 'This platform has been disabled.')</span> <span class="cstat-no" title="statement not covered" > return</span> } &nbsp; /** * Sequence intervals must be at least 16ms (60fps). */ <span class="cstat-no" title="statement not covered" > var sequence</span> <span class="cstat-no" title="statement not covered" > if (interval) {</span> <span class="cstat-no" title="statement not covered" > if (interval &gt;= 16) {</span> <span class="cstat-no" title="statement not covered" > var sequenceId = nextUniqueId()</span> <span class="cstat-no" title="statement not covered" > sequence = {</span> elementIds: [], head: { index: null, blocked: false }, tail: { index: null, blocked: false }, id: sequenceId, interval: Math.abs(interval), } } else { <span class="cstat-no" title="statement not covered" > logger('Reveal failed.', 'Sequence intervals must be at least 16 milliseconds.')</span> <span class="cstat-no" title="statement not covered" > return</span> } } &nbsp; <span class="cstat-no" title="statement not covered" > var containerId</span> <span class="cstat-no" title="statement not covered" > each(containers, <span class="fstat-no" title="function not covered" >function (storedContainer) {</span></span> <span class="cstat-no" title="statement not covered" > if (!containerId &amp;&amp; storedContainer.node === container) {</span> <span class="cstat-no" title="statement not covered" > containerId = storedContainer.id</span> } }) &nbsp; <span class="cstat-no" title="statement not covered" > if (isNaN(containerId)) {</span> <span class="cstat-no" title="statement not covered" > containerId = nextUniqueId()</span> } &nbsp; <span class="cstat-no" title="statement not covered" > try {</span> <span class="cstat-no" title="statement not covered" > var elements = targets.map(<span class="fstat-no" title="function not covered" >function (node) {</span></span> <span class="cstat-no" title="statement not covered" > var element = {}</span> <span class="cstat-no" title="statement not covered" > var existingId = node.getAttribute('data-sr-id')</span> &nbsp; <span class="cstat-no" title="statement not covered" > if (existingId) {</span> <span class="cstat-no" title="statement not covered" > deepAssign(element, this$1.store.elements[existingId])</span> &nbsp; /** * In order to prevent previously generated styles * from throwing off the new styles, the style tag * has to be reverted to it's pre-reveal state. */ <span class="cstat-no" title="statement not covered" > element.node.setAttribute('style', element.styles.inline)</span> &nbsp; } else { <span class="cstat-no" title="statement not covered" > element.id = nextUniqueId()</span> <span class="cstat-no" title="statement not covered" > element.node = node</span> <span class="cstat-no" title="statement not covered" > element.seen = false</span> <span class="cstat-no" title="statement not covered" > element.visible = false</span> } &nbsp; <span class="cstat-no" title="statement not covered" > element.config = config</span> <span class="cstat-no" title="statement not covered" > element.containerId = containerId</span> <span class="cstat-no" title="statement not covered" > element.styles = style(element)</span> &nbsp; <span class="cstat-no" title="statement not covered" > if (sequence) {</span> <span class="cstat-no" title="statement not covered" > element.sequence = {</span> id: sequence.id, index: sequence.elementIds.length, } <span class="cstat-no" title="statement not covered" > sequence.elementIds.push(element.id)</span> } &nbsp; <span class="cstat-no" title="statement not covered" > return element</span> }) &nbsp; /** * Modifying the DOM via setAttribute needs to be handled * separately from reading computed styles in the map above * for the browser to batch DOM changes (limiting reflows) */ <span class="cstat-no" title="statement not covered" > each(elements, <span class="fstat-no" title="function not covered" >function (element) {</span></span> <span class="cstat-no" title="statement not covered" > this$1.store.elements[element.id] = element</span> <span class="cstat-no" title="statement not covered" > element.node.setAttribute('data-sr-id', element.id)</span> }) &nbsp; } catch (error) { <span class="cstat-no" title="statement not covered" > logger('Reveal failed.', error.message)</span> <span class="cstat-no" title="statement not covered" > return</span> } &nbsp; <span class="cstat-no" title="statement not covered" > containers[containerId] = containers[containerId] || {</span> id: containerId, node: container, } &nbsp; <span class="cstat-no" title="statement not covered" > if (sequence) {</span> <span class="cstat-no" title="statement not covered" > this.store.sequences[sequence.id] = sequence</span> } &nbsp; /** * If reveal wasn't invoked by sync, we want to * make sure to add this call to the history. */ <span class="cstat-no" title="statement not covered" > if (!sync) {</span> <span class="cstat-no" title="statement not covered" > this.store.history.push({ target: target, options: options, interval: interval })</span> &nbsp; /** * Push initialization to the event queue, giving * multiple reveal calls time to be interpretted. */ <span class="cstat-no" title="statement not covered" > if (this.initTimeout) {</span> <span class="cstat-no" title="statement not covered" > window.clearTimeout(this.initTimeout)</span> } <span class="cstat-no" title="statement not covered" > this.initTimeout = window.setTimeout(initialize.bind(this), 0)</span> } } &nbsp; &nbsp;</pre></td></tr> </table></pre> <div class='push'></div><!-- for sticky footer --> </div><!-- /wrapper --> <div class='footer quiet pad2 space-top1 center small'> Code coverage generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sat Feb 18 2017 04:51:13 GMT+0100 (CET) </div> </div> <script src="../../../../prettify.js"></script> <script> window.onload = function () { if (typeof prettyPrint === 'function') { prettyPrint(); } }; </script> <script src="../../../../sorter.js"></script> </body> </html>