https://www.communitylandscotland.org.uk/wp-content/plugins/dynami…/node/revealfx/revealFx.js?ver=3.4.10

1
2;(function(window) {
3
4	'use strict';
5
6	// Helper vars and functions.
7	function extend(a, b) {
8		for(var key in b) { 
9			if( b.hasOwnProperty( key ) ) {
10				a[key] = b[key];
11			}
12		}
13		return a;
14	}
15
16	function createDOMEl(type, className,content) {
17		var el = document.createElement(type);
18		el.className = className || '';
19		el.innerHTML = content || '';
20		return el;
21    }
22    
23    function createStyleForDOMEL(el,position,top,left,width,height,color,background,opacity,pointerEvents,zIndex) 
24    {
25		//this is a helper function for creating the styles for a given element
26        el.style.position = position || 'absolute';
27        el.style.top = top || '0';
28        el.style.left = left || '0';
29        el.style.color = color || '#fff';
30        el.style.width = width || '100%';
31        el.style.height = height || '100%';
32        el.style.backgroundColor = background || '#f0f0f0';
33        el.style.opacity = opacity || '0';
34		el.style.pointerEvents = pointerEvents || 'none';
35		el.style.zIndex = zIndex || 0;
36    }
37
38	/**
39	 * RevealFx obj.
40	 */
41	function RevealFx(el, options) {
42        this.el = el;
43        this.revealLayers = [];        
44		this.options = extend({}, this.options);
45		extend(this.options, options);
46		this._init();
47	}
48
49	/**
50	 * RevealFx options.
51	 */
52	RevealFx.prototype.options = {
53		// If true, then the content will be hidden until it´s "revealed".
54		isContentHidden: true,
55		//number of layers to be displayed 
56		layers:1,
57		// The animation/reveal settings. This can be set initially or passed when calling the reveal method.
58		revealSettings: {
59			// Animation direction: left right (lr) || right left (rl) || top bottom (tb) || bottom top (bt).
60			direction: 'lr',
61			// Revealers´s background color Array.
62			bgColors: ['#111'],
63			// Animation speed. This is the speed to "cover" and also "uncover" the element (seperately, not the total time).
64			duration: 500,
65			// Animation easing. This is the easing to "cover" and also "uncover" the element.
66			easing: 'easeInOutQuint',
67			// percentage-based value representing how much of the area should be left covered.
68			coverArea: 0,
69			//milliseconds of delay between layers animation thatis used in stagger animation 
70			delay:100,
71			// Callback for when the revealer is covering the element (halfway through of the whole animation)
72			onHalfway: function(contentEl, revealerEl) { return false; },
73			// Callback for when the animation starts (animation start).
74			onStart: function(contentEl, revealerEl) { return false; },
75			// Callback for when the revealer has completed uncovering (animation end).
76            onComplete: function(contentEl, revealerEl) { return false; },
77		}
78	};
79
80	/**
81	 * Init.
82	 */
83	RevealFx.prototype._init = function() {
84        this._layout();
85	};
86
87	/**
88	 * Build the necessary structure.
89	 */
90	RevealFx.prototype._layout = function() {
91		//instead of going with the %s go with the pxs for the better view
92		//create an array of the selected elements and store it as global 
93		var position = getComputedStyle(this.el).position;
94		if( position !== 'fixed' && position !== 'absolute' && position !== 'relative' ) {
95			this.el.style.position = 'relative';
96		}
97		var heightOfEl =  100;
98		var widthOfEl = 100;
99		// Content element.
100		this.content = createDOMEl('div', 'block-revealer__content',this.el.innerHTML);
101		if( this.options.isContentHidden) {
102			this.content.style.opacity = 0;
103        }
104        this.el.innerHTML = '';
105		this.el.appendChild(this.content);
106		
107		var topOfRevealerElement=0; 
108		var leftOfRevalerElement=0;
109		const numberOfLayers = this.options.layers;
110		var colorOfBlockLayer ='#111';
111        for(var i=0;i<numberOfLayers;i++)
112        {
113        // Revealer element (the one that animates)
114		this.revealLayers.push(createDOMEl('div', 'block-revealer__element'));
115		if(this.options.revealSettings.bgColors[i])
116		colorOfBlockLayer = this.options.revealSettings.bgColors[i];
117		else
118		colorOfBlockLayer = '#111111';
119		//to be refactored to default and check if it exists
120		if(this.options.revealSettings.direction === 'tb' || this.options.revealSettings.direction === 'bt')
121		{
122			var widthOfIndividualBlock = widthOfEl/numberOfLayers;
123			createStyleForDOMEL(this.revealLayers[i],'absolute','0%',leftOfRevalerElement+'%',widthOfIndividualBlock+'%','100%','#fff',colorOfBlockLayer,'0','none');
124			leftOfRevalerElement = leftOfRevalerElement+widthOfIndividualBlock;
125		}
126        else{

127			var heightOfIndividualBlock = heightOfEl/numberOfLayers;
128			createStyleForDOMEL(this.revealLayers[i],'absolute',topOfRevealerElement+'%','0%','100%',(heightOfIndividualBlock+.5)+'%','#fff',colorOfBlockLayer,'0','none');
129			topOfRevealerElement = topOfRevealerElement+heightOfIndividualBlock;
130		}
131		
132        
133		this.el.classList.add('block-revealer');
134		
135        this.el.appendChild(this.revealLayers[i]);
136        }
137	};
138
139	/**
140	 * Gets the revealer element´s transform and transform origin.
141	 */
142	RevealFx.prototype._getTransformSettings = function(direction) {
143	//check for rotation
144
145		var origin, origin_2,val;
146
147		switch (direction) {
148			case 'lr' : 
149				val = 'scaleY(1)';
150				origin = '0 50%';
151				origin_2 = '100% 50%';
152				break;
153			case 'rl' : 
154				val = 'scaleY(1)';
155				origin = '100% 50%';
156				origin_2 = '0 50%';
157				break;
158			case 'tb' :
159				val = 'scaleX(1)';
160				origin = '50% 0';
161				origin_2 = '50% 100%';
162				break;
163			case 'bt' : 
164				val = 'scaleX(1)';
165				origin = '50% 100%';
166				origin_2 = '50% 0';
167				break;
168			default :
169				val = 'scaleY(1)';
170				origin = '0 50%';
171				origin_2 = '100% 50%';
172				break;
173		};
174
175		return {
176			// transform value.
177			val:val,
178			origin: {initial: origin, halfway: origin_2},
179		};
180	};
181
182	/**
183	 * Reveal animation. If revealSettings is passed, then it will overwrite the options.revealSettings.
184	 */
185	RevealFx.prototype.reveal = function(revealSettings) {
186
187
188		// Do nothing if currently animating.
189		if( this.isAnimating ) {
190			return false;
191		}
192		this.isAnimating = true;
193		
194		// Set the revealer element´s transform and transform origin.
195		var defaults = { // In case revealSettings is incomplete, its properties deafault to:
196				duration: 500,
197				easing: 'easeInOutQuint',
198				delay: 100,
199				bgColors: ['#111111'],
200				direction: 'lr',
201				coverArea: 0,
202			},
203			revealSettings = revealSettings || this.options.revealSettings,
204			direction = revealSettings.direction || defaults.direction,
205			delay = revealSettings.delay || defaults.delay,
206			transformSettings = this._getTransformSettings(direction);
207	
208			for(var i=0;i<this.revealLayers.length;i++)
209			{
210				this.revealLayers[i].style.WebkitTransform = this.revealLayers[i].style.transform =  transformSettings.val;
211				this.revealLayers[i].style.WebkitTransformOrigin = this.revealLayers[i].style.transformOrigin =  transformSettings.origin.initial;
212				// Show it. By default the revealer element has opacity = 0 (CSS).
213				this.revealLayers[i].style.opacity = 1;
214				if(revealSettings.bgColors[i])
215				this.revealLayers[i].style.backgroundColor = revealSettings.bgColors[i];
216				else
217				this.revealLayers[i].style.backgroundColor = defaults.bgColors[0];
218			}
219		
220		// Animate it.
221        var self = this,
222			// Second animation step.
223			animationSettings_2 = {
224                targets:self.revealLayers,
225                delay: anime.stagger(parseInt(delay)),
226				complete: function(anim) {
227					if( typeof revealSettings.onComplete === 'function' ) {
228						revealSettings.onComplete(self.content, self.revealLayers);	
229					}
230                    
231                self.isAnimating = false;
232            }
233			},
234			// First animation step.
235			animationSettings = {
236                targets:self.revealLayers,
237                delay: anime.stagger(parseInt(delay)),
238				complete: function() {
239                    for(var i=0;i<self.revealLayers.length;i++)
240					{
241						self.revealLayers[i].style.WebkitTransformOrigin = self.revealLayers[i].style.transformOrigin =  transformSettings.origin.halfway;
242						
243					}			
244			if( typeof revealSettings.onHalfway === 'function' ) {
245				revealSettings.onHalfway(self.content, self.revealLayers);
246			}				
247					 anime(animationSettings_2);		
248				}
249			};
250
251		animationSettings.duration = animationSettings_2.duration = revealSettings.duration || defaults.duration;
252		animationSettings.easing = animationSettings_2.easing = revealSettings.easing || defaults.easing;
253
254		var coverArea = revealSettings.coverArea || defaults.coverArea;
255		if( direction === 'lr' || direction === 'rl' ) {
256			animationSettings.scaleX = [0,1];
257			animationSettings_2.scaleX = [1,coverArea/100];
258		}
259		else {
260			animationSettings.scaleY = [0,1];
261			animationSettings_2.scaleY = [1,coverArea/100];
262		}
263
264		if( typeof revealSettings.onStart === 'function' ) {
265			revealSettings.onStart(self.content, self.revealLayers);
266		}
267		anime(animationSettings);
268		
269	};
270	
271	window.RevealFx = RevealFx;
272
273})(window);