all files / lib/src/instance/functions/ animate.js

7.61% Statements 7/92
0% Branches 0/68
0% Functions 0/13
7.78% Lines 7/90
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 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169                                                                                                                                                                                                                                                                                                                                   
import { isElementVisible } from '../../utils/core'
import { each } from '../../utils/generic'
import clean from '../methods/clean'
 
 
export default function animate (element, sequencing) {
 
	var sequence = (element.sequence) ? this.store.sequences[element.sequence.id] : false
	var delayed = element.config.useDelay === 'always'
		|| element.config.useDelay === 'onload' && this.pristine
		|| element.config.useDelay === 'once' && !element.seen
 
	element.visible = isElementVisible.call(this, element)
 
	if (sequencing) {
		if (element.sequence.index === sequence.nose.pointer - 1 && sequence.nose.pointer > sequence.nose.index) {
			sequence.nose.pointer--
			queueSequenceNose.call(this, sequence)
		} else if (element.sequence.index === sequence.tail.pointer + 1 && sequence.tail.pointer < sequence.tail.index) {
			sequence.tail.pointer++
			queueSequenceTail.call(this, sequence)
		} else {
			return
		}
		return triggerReveal.call(this, element, delayed)
	}
 
	if (element.visible && !element.revealed) {
		if (sequence) {
			updateSequenceIndexes.call(this, sequence)
			if (sequence.nose.pointer === null && sequence.tail.pointer === null) {
				sequence.nose.pointer = sequence.tail.pointer = element.sequence.index
				queueSequenceNose.call(this, sequence)
				queueSequenceTail.call(this, sequence)
			} else if (element.sequence.index === sequence.nose.pointer - 1 && !sequence.nose.blocked) {
				sequence.nose.pointer--
				queueSequenceNose.call(this, sequence)
			} else if (element.sequence.index === sequence.tail.pointer + 1 && !sequence.tail.blocked) {
				sequence.tail.pointer++
				queueSequenceTail.call(this, sequence)
			} else {
				return
			}
		}
		return triggerReveal.call(this, element, delayed)
	}
 
	if (!element.visible && element.revealed && element.config.reset) {
		if (sequence) {
			updateSequenceIndexes.call(this, sequence)
			if (sequence.nose.index !== Infinity && sequence.tail.index !== -Infinity) {
				sequence.nose.pointer = Math.max(sequence.nose.pointer, sequence.nose.index)
				sequence.tail.pointer = Math.min(sequence.tail.pointer, sequence.tail.index)
			}
		}
		return triggerReset.call(this, element)
	}
}
 
 
function triggerReveal (element, delayed) {
	var styles = [
		element.styles.inline,
		element.styles.opacity.computed,
		element.styles.transform.generated.final ]
	delayed
		? styles.push(element.styles.transition.generated.delayed)
		: styles.push(element.styles.transition.generated.instant)
	element.revealed = element.seen = true
	element.node.setAttribute('style', styles.filter(function (i) { return i !== ''; }).join(' '))
	registerCallbacks.call(this, element, delayed)
}
 
 
function triggerReset (element) {
	var styles = [
		element.styles.inline,
		element.styles.opacity.generated,
		element.styles.transform.generated.initial,
		element.styles.transition.generated.instant ]
	element.revealed = false
	element.node.setAttribute('style', styles.filter(function (i) { return i !== ''; }).join(' '))
	registerCallbacks.call(this, element)
}
 
 
function registerCallbacks (element, isDelayed) {
	var this$1 = this;
 
	var duration = isDelayed
		? element.config.duration + element.config.delay
		: element.config.duration
 
	var beforeCallback = element.revealed
		? element.config.beforeReveal
		: element.config.beforeReset
 
	var afterCallback = element.revealed
		? element.config.afterReveal
		: element.config.afterReset
 
	var elapsed = 0
	if (element.callbackTimer) {
		elapsed = Date.now() - element.callbackTimer.start
		window.clearTimeout(element.callbackTimer.clock)
	}
 
	beforeCallback(element.node)
 
	element.callbackTimer = {
		start: Date.now(),
		clock: window.setTimeout(function () {
			afterCallback(element.node)
			element.callbackTimer = null
			if (element.revealed && !element.config.reset) {
				clean.call(this$1, element.node)
			}
		}, duration - elapsed),
	}
}
 
 
function updateSequenceIndexes (sequence) {
	var this$1 = this;
 
	var min = Infinity
	var max = -Infinity
	each(sequence.elementIds, function (id) {
		var element = this$1.store.elements[id]
		if (element && element.visible) {
			min = Math.min(min, element.sequence.index)
			max = Math.max(max, element.sequence.index)
		}
	})
	sequence.nose.index = min
	sequence.tail.index = max
}
 
 
function queueSequenceNose (sequence) {
	var this$1 = this;
 
	var nextId = sequence.elementIds[sequence.nose.pointer - 1]
	var nextElement = this.store.elements[nextId]
	if (nextElement) {
		sequence.nose.blocked = true
		window.setTimeout(function () {
			sequence.nose.blocked = false
			animate.call(this$1, nextElement, true)
		}, sequence.interval)
	}
}
 
 
function queueSequenceTail (sequence) {
	var this$1 = this;
 
	var nextId = sequence.elementIds[sequence.tail.pointer + 1]
	var nextElement = this.store.elements[nextId]
	if (nextElement) {
		sequence.tail.blocked = true
		window.setTimeout(function () {
			sequence.tail.blocked = false
			animate.call(this$1, nextElement, true)
		}, sequence.interval)
	}
}