https://elamed.com/bitrix/js/main/core/core_fx.js?159768224916888

1;(function(window){
2
3var defaultOptions = {
4	time: 1.0,
5	step: 0.05,
6	type: 'linear',
7
8	allowFloat: false
9}
10
11/*
12options: {
13	start: start value or {param: value, param: value}
14	finish: finish value or {param: value, param: value}
15	time: time to transform in seconds
16	type: linear|accelerated|decelerated|custom func name
17	callback,
18	callback_start,
19	callback_complete,
20
21	step: time between steps in seconds
22	allowFloat: false|true
23}
24*/
25BX.fx = function(options)
26{
27	this.options = options;
28
29	if (null != this.options.time)
30		this.options.originalTime = this.options.time;
31	if (null != this.options.step)
32		this.options.originalStep = this.options.step;
33
34	if (!this.__checkOptions())
35		return false;
36
37	this.__go = BX.delegate(this.go, this);
38
39	this.PARAMS = {};
40}
41
42BX.fx.prototype.__checkOptions = function()
43{
44	if (typeof this.options.start != typeof this.options.finish)
45		return false;
46
47	if (null == this.options.time) this.options.time = defaultOptions.time;
48	if (null == this.options.step) this.options.step = defaultOptions.step;
49	if (null == this.options.type) this.options.type = defaultOptions.type;
50	if (null == this.options.allowFloat) this.options.allowFloat = defaultOptions.allowFloat;
51
52	this.options.time *= 1000;
53	this.options.step *= 1000;
54
55	if (typeof this.options.start != 'object')
56	{
57		this.options.start = {_param: this.options.start};
58		this.options.finish = {_param: this.options.finish};
59	}
60
61	var i;
62	for (i in this.options.start)
63	{
64		if (null == this.options.finish[i])
65		{
66			this.options.start[i] = null;
67			delete this.options.start[i];
68		}
69	}
70
71	if (!BX.type.isFunction(this.options.type))
72	{
73		if (BX.type.isFunction(window[this.options.type]))
74			this.options.type = window[this.options.type];
75		else if (BX.type.isFunction(BX.fx.RULES[this.options.type]))
76			this.options.type = BX.fx.RULES[this.options.type];
77		else
78			this.options.type = BX.fx.RULES[defaultOptions.type];
79	}
80
81	return true;
82}
83
84BX.fx.prototype.go = function()
85{
86	var timeCurrent = new Date().valueOf();
87	if (timeCurrent < this.PARAMS.timeFinish)
88	{
89		for (var i in this.PARAMS.current)
90		{
91			this.PARAMS.current[i][0] = this.options.type.apply(this, [{
92				start_value: this.PARAMS.start[i][0],
93				finish_value: this.PARAMS.finish[i][0],
94				current_value: this.PARAMS.current[i][0],
95				current_time: timeCurrent - this.PARAMS.timeStart,
96				total_time: this.options.time
97			}]);
98		}
99
100		this._callback(this.options.callback);
101
102		if (!this.paused)
103			this.PARAMS.timer = setTimeout(this.__go, this.options.step);
104	}
105	else
106	{
107		this.stop();
108	}
109}
110
111BX.fx.prototype._callback = function(cb)
112{
113	var tmp = {};
114
115	cb = cb || this.options.callback;
116
117	for (var i in this.PARAMS.current)
118	{
119		tmp[i] = (this.options.allowFloat ? this.PARAMS.current[i][0] : Math.round(this.PARAMS.current[i][0])) + this.PARAMS.current[i][1];
120	}
121
122	return cb.apply(this, [null != tmp['_param'] ? tmp._param : tmp]);
123}
124
125BX.fx.prototype.start = function()
126{
127	var i,value, unit;
128
129	this.PARAMS.start = {};
130	this.PARAMS.current = {};
131	this.PARAMS.finish = {};
132
133	for (i in this.options.start)
134	{
135		value = +this.options.start[i];
136		unit = (this.options.start[i]+'').substring((value+'').length);
137		this.PARAMS.start[i] = [value, unit];
138		this.PARAMS.current[i] = [value, unit];
139		this.PARAMS.finish[i] = [+this.options.finish[i], unit];
140	}
141
142	this._callback(this.options.callback_start);
143	this._callback(this.options.callback);
144
145	this.PARAMS.timeStart = new Date().valueOf();
146	this.PARAMS.timeFinish = this.PARAMS.timeStart + this.options.time;
147	this.PARAMS.timer = setTimeout(BX.delegate(this.go, this), this.options.step);
148
149	return this;
150}
151
152BX.fx.prototype.pause = function()
153{
154	if (this.paused)
155	{
156		this.PARAMS.timer = setTimeout(this.__go, this.options.step);
157		this.paused = false;
158	}
159	else
160	{
161		clearTimeout(this.PARAMS.timer);
162		this.paused = true;
163	}
164}
165
166BX.fx.prototype.stop = function(silent)
167{
168	silent = !!silent;
169	if (this.PARAMS.timer)
170		clearTimeout(this.PARAMS.timer);
171
172	if (null != this.options.originalTime)
173		this.options.time = this.options.originalTime;
174	if (null != this.options.originalStep)
175		this.options.step = this.options.originalStep;
176
177	this.PARAMS.current = this.PARAMS.finish;
178	if (!silent) {
179		this._callback(this.options.callback);
180		this._callback(this.options.callback_complete);
181	}
182}
183
184/*
185type rules of animation
186 - linear - simple linear animation
187 - accelerated
188 - decelerated
189*/
190
191/*
192	params: {
193		start_value, finish_value, current_time, total_time
194	}
195*/
196BX.fx.RULES =
197{
198	linear: function(params)
199	{
200		return params.start_value + (params.current_time/params.total_time) * (params.finish_value - params.start_value);
201	},
202
203	decelerated: function(params)
204	{
205		return params.start_value + Math.sqrt(params.current_time/params.total_time) * (params.finish_value - params.start_value);
206	},
207
208	accelerated: function(params)
209	{
210		var q = params.current_time/params.total_time;
211		return params.start_value + q * q * (params.finish_value - params.start_value);
212	}
213}
214
215/****************** effects realizaion ************************/
216
217/*
218	type = 'fade' || 'scroll' || 'scale' || 'fold'
219*/
220
221BX.fx.hide = function(el, type, opts)
222{
223	el = BX(el);
224
225	if (typeof type == 'object' && null == opts)
226	{
227		opts = type;
228		type = opts.type
229	}
230
231	if (!opts) opts = {};
232
233	if (!BX.type.isNotEmptyString(type))
234	{
235		el.style.display = 'none';
236		return;
237	}
238
239	var fxOptions = BX.fx.EFFECTS[type](el, opts, 0);
240	fxOptions.callback_complete = function () {
241		if (opts.hide !== false)
242			el.style.display = 'none';
243
244		if (opts.callback_complete)
245			opts.callback_complete.apply(this, arguments);
246	}
247
248	return (new BX.fx(fxOptions)).start();
249}
250
251BX.fx.show = function(el, type, opts)
252{
253	el = BX(el);
254
255	if (typeof type == 'object' && null == opts)
256	{
257		opts = type;
258		type = opts.type
259	}
260
261	if (!opts) opts = {};
262
263	if (!BX.type.isNotEmptyString(type))
264	{
265		el.style.display = 'block';
266		return;
267	}
268
269	var fxOptions = BX.fx.EFFECTS[type](el, opts, 1);
270
271	fxOptions.callback_complete = function () {
272		if (opts.show !== false)
273			el.style.display = 'block';
274
275		if (opts.callback_complete)
276			opts.callback_complete.apply(this, arguments);
277	}
278
279	return (new BX.fx(fxOptions)).start();
280}
281
282BX.fx.EFFECTS = {
283	scroll: function(el, opts, action)
284	{
285		if (!opts.direction) opts.direction = 'vertical';
286
287		var param = opts.direction == 'horizontal' ? 'width' : 'height';

288
289		var val = parseInt(BX.style(el, param));
290		if (isNaN(val))
291		{
292			val = BX.pos(el)[param];
293		}
294
295		if (action == 0)
296			var start = val, finish = opts.min_height ? parseInt(opts.min_height) : 0;
297		else
298			var finish = val, start = opts.min_height ? parseInt(opts.min_height) : 0;
299
300		return {
301			'start': start,
302			'finish': finish,
303			'time': opts.time || defaultOptions.time,
304			'type': 'linear',
305			callback_start: function () {
306				if (BX.style(el, 'position') == 'static')
307					el.style.position = 'relative';
308
309				el.style.overflow = 'hidden';
310				el.style[param] = start + 'px';
311				el.style.display = 'block';
312			},
313			callback: function (val) {el.style[param] = val + 'px';}
314		}
315	},
316
317	fade: function(el, opts, action)
318	{
319		var fadeOpts = {
320			'time': opts.time || defaultOptions.time,
321			'type': action == 0 ? 'decelerated' : 'linear',
322			'start': action == 0 ? 1 : 0,
323			'finish': action == 0 ? 0 : 1,
324			'allowFloat': true
325		};
326
327		if (BX.browser.IsIE() && !BX.browser.IsIE9())
328		{
329			fadeOpts.start *= 100; fadeOpts.finish *= 100; fadeOpts.allowFloat = false;
330
331			fadeOpts.callback_start = function() {
332				el.style.display = 'block';
333				el.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity=" + fadeOpts.start + ")";
334			};
335
336			fadeOpts.callback = function (val) {
337				(el.filters['DXImageTransform.Microsoft.alpha']||el.filters.alpha).opacity = val;
338			}
339		}
340		else
341		{
342			fadeOpts.callback_start = function () {
343				el.style.display = 'block';
344			}
345
346			fadeOpts.callback = function (val) {
347				el.style.opacity = el.style.KhtmlOpacity = el.style.MozOpacity = val;
348			};
349		}
350
351		return fadeOpts;
352	},
353
354	fold: function (el, opts, action) // 'fold' is a combination of two consequential 'scroll' hidings.
355	{
356		if (action != 0) return;
357
358		var pos = BX.pos(el);
359		var coef = pos.height / (pos.width + pos.height);
360		var old_opts = {time: opts.time || defaultOptions.time, callback_complete: opts.callback_complete, hide: opts.hide};
361
362		opts.type = 'scroll';
363		opts.direction = 'vertical';
364		opts.min_height = opts.min_height || 10;
365		opts.hide = false;

366		opts.time = coef * old_opts.time;
367		opts.callback_complete = function()
368		{
369			el.style.whiteSpace = 'nowrap';
370
371			opts.direction = 'horizontal';
372			opts.min_height = null;
373
374			opts.time = old_opts.time - opts.time;
375			opts.hide = old_opts.hide;
376			opts.callback_complete = old_opts.callback_complete;
377
378			BX.fx.hide(el, opts);
379		}
380
381		return BX.fx.EFFECTS.scroll(el, opts, action);
382	},
383
384	scale: function (el, opts, action)
385	{
386		var val = {width: parseInt(BX.style(el, 'width')), height: parseInt(BX.style(el, 'height'))};
387		if (isNaN(val.width) || isNaN(val.height))
388		{
389			var pos = BX.pos(el)
390			val = {width: pos.width, height: pos.height};
391		}
392
393		if (action == 0)
394			var start = val, finish = {width: 0, height: 0};
395		else
396			var finish = val, start = {width: 0, height: 0};
397
398		return {
399			'start': start,
400			'finish': finish,
401			'time': opts.time || defaultOptions.time,
402			'type': 'linear',
403			callback_start: function () {
404				el.style.position = 'relative';
405				el.style.overflow = 'hidden';
406				el.style.display = 'block';
407				el.style.height = start.height + 'px';
408				el.style.width = start.width + 'px';
409			},
410			callback: function (val) {
411				el.style.height = val.height + 'px';
412				el.style.width = val.width + 'px';
413			}
414		}
415	}
416}
417
418// Color animation
419//
420// Set animation rule
421// BX.fx.colorAnimate.addRule('animationRule1',"#FFF","#faeeb4", "background-color", 100, 1, true);
422// BX.fx.colorAnimate.addRule('animationRule2',"#fc8282","#ff0000", "color", 100, 1, true);
423// Params: 1 - animation name, 2 - start color, 3 - end color, 4 - count step, 5 - delay each step, 6 - return color on end animation
424//
425// Animate color for element
426// BX.fx.colorAnimate(BX('element'), 'animationRule1,animationRule2');
427
428var defaultOptionsColorAnimation = {
429	arStack: {},
430	arRules: {},
431	globalAnimationId: 0
432}
433
434BX.fx.colorAnimate = function(element, rule, back)
435{
436	if (element == null)
437		return;
438
439	animationId = element.getAttribute('data-animation-id');
440	if (animationId == null)
441	{
442		animationId = defaultOptionsColorAnimation.globalAnimationId;
443		element.setAttribute('data-animation-id', defaultOptionsColorAnimation.globalAnimationId++);
444	}
445	var aRuleList = rule.split(/\s*,\s*/);
446
447	for (var j	= 0; j < aRuleList.length; j++)
448	{
449		rule = aRuleList[j];
450
451		if (!defaultOptionsColorAnimation.arRules[rule]) continue;
452
453		var i=0;
454
455		if (!defaultOptionsColorAnimation.arStack[animationId])
456		{
457			defaultOptionsColorAnimation.arStack[animationId] = {};
458		}
459		else if (defaultOptionsColorAnimation.arStack[animationId][rule])
460		{
461			i = defaultOptionsColorAnimation.arStack[animationId][rule].i;
462			clearInterval(defaultOptionsColorAnimation.arStack[animationId][rule].tId);
463		}
464
465		if ((i==0 && back) || (i==defaultOptionsColorAnimation.arRules[rule][3] && !back)) continue;
466
467		defaultOptionsColorAnimation.arStack[animationId][rule] = {'i':i, 'element': element, 'tId':setInterval('BX.fx.colorAnimate.run("'+animationId+'","'+rule+'")', defaultOptionsColorAnimation.arRules[rule][4]),'back':Boolean(back)};
468	}
469}
470
471BX.fx.colorAnimate.addRule = function (rule, startColor, finishColor, cssProp, step, delay, back)
472{
473	defaultOptionsColorAnimation.arRules[rule] = [
474		BX.util.hex2rgb(startColor),
475		BX.util.hex2rgb(finishColor),
476		cssProp.replace(/\-(.)/g,function(){return arguments[1].toUpperCase();}),
477		step,
478		delay || 1,
479		back || false
480	];
481};
482
483BX.fx.colorAnimate.run = function(animationId, rule)
484{
485	element = defaultOptionsColorAnimation.arStack[animationId][rule].element;
486
487    defaultOptionsColorAnimation.arStack[animationId][rule].i += defaultOptionsColorAnimation.arStack[animationId][rule].back?-1:1;
488 	var finishPercent = defaultOptionsColorAnimation.arStack[animationId][rule].i/defaultOptionsColorAnimation.arRules[rule][3];
489	var startPercent = 1 - finishPercent;
490
491	var aRGBStart = defaultOptionsColorAnimation.arRules[rule][0];
492	var aRGBFinish = defaultOptionsColorAnimation.arRules[rule][1];
493
494	element.style[defaultOptionsColorAnimation.arRules[rule][2]] = 'rgb('+
495	Math.floor( aRGBStart['r'] * startPercent + aRGBFinish['r'] * finishPercent ) + ','+
496	Math.floor( aRGBStart['g'] * startPercent + aRGBFinish['g'] * finishPercent ) + ','+
497	Math.floor( aRGBStart['b'] * startPercent + aRGBFinish['b'] * finishPercent ) +')';
498
499	if ( defaultOptionsColorAnimation.arStack[animationId][rule].i == defaultOptionsColorAnimation.arRules[rule][3] || defaultOptionsColorAnimation.arStack[animationId][rule].i ==0)
500	{
501		clearInterval(defaultOptionsColorAnimation.arStack[animationId][rule].tId);
502		if (defaultOptionsColorAnimation.arRules[rule][5])
503			BX.fx.colorAnimate(defaultOptionsColorAnimation.arStack[animationId][rule].element, rule, true);
504	}
505}
506
507
508/*
509options = {
510	delay: 100,
511	duration : 3000,
512	start : { scroll : document.body.scrollTop, left : 0, opacity :  100 },
513	finish : { scroll : document.body.scrollHeight, left : 500, opacity : 10 },

514	transition : BitrixAnimation.makeEaseOut(BitrixAnimation.transitions.quart),
515
516	step : function(state)
517	{
518		document.body.scrollTop = state.scroll;
519		button.style.left =  state.left + "px";
520		button.style.opacity =  state.opacity / 100;
521	},
522	complete : function()
523	{
524		button.style.background = "green";
525	}
526}
527
528options =
529{
530	delay : 20,
531	duration : 4000,
532	transition : BXAnimation.makeEaseOut(BXAnimation.transitions.quart),
533	progress : function(progress)
534	{
535		document.body.scrollTop = Math.round(topMax * progress);
536		button.style.left =  Math.round(leftMax * progress) + "px";
537		button.style.opacity =  (100 + Math.round((opacityMin - 100) * progress)) / 100;
538
539	},
540	complete : function()
541	{
542		button.style.background = "green";
543	}
544}
545*/
546
547BX.easing = function(options)
548{
549	this.options = options;
550	this.timer = null;
551};
552
553BX.easing.prototype.animate = function()
554{
555	if (!this.options || !this.options.start || !this.options.finish ||
556		typeof(this.options.start) != "object" || typeof(this.options.finish) != "object"
557		)
558		return null;
559
560	for (var propName in this.options.start)
561	{
562		if (typeof(this.options.finish[propName]) == "undefined")
563		{
564			delete this.options.start[propName];
565		}
566	}
567
568	this.options.progress = function(progress) {
569		var state = {};
570		for (var propName in this.start)
571			state[propName] = Math.round(this.start[propName] + (this.finish[propName] - this.start[propName]) * progress);
572
573		if (this.step)
574		{
575			this.step(state);
576		}
577	};
578
579	this.animateProgress();
580};
581
582BX.easing.prototype.stop = function(completed)
583{
584	if (this.timer)
585	{
586		cancelAnimationFrame(this.timer);
587		this.timer = null;
588		if (completed)
589		{
590			this.options.complete && this.options.complete();
591		}
592	}
593};
594
595BX.easing.prototype.animateProgress = function()
596{
597	if (!window.requestAnimationFrame)
598	{
599		//For old browsers we skip animation
600		this.options.progress(1);
601		this.options.complete && this.options.complete();
602		return;
603	}
604
605	var start = null;
606	var delta = this.options.transition || BX.easing.transitions.linear;
607	var duration = this.options.duration || 1000;
608	var animation = BX.proxy(function(time) {
609
610		if (start === null)
611		{
612			start = time;
613		}
614
615		var progress = (time - start) / duration;
616		if (progress > 1)
617		{
618			progress = 1;
619		}
620
621		this.options.progress(delta(progress));
622
623		if (progress == 1)
624		{
625			this.stop(true);
626		}
627		else
628		{
629			this.timer = requestAnimationFrame(animation);
630		}
631
632	}, this);
633
634	this.timer = requestAnimationFrame(animation);
635};
636
637BX.easing.makeEaseInOut = function(delta)
638{
639	return function(progress) {
640		if (progress < 0.5)
641			return delta( 2 * progress ) / 2;
642		else
643			return (2 - delta( 2 * (1-progress) ) ) / 2;
644	}
645};
646
647BX.easing.makeEaseOut = function(delta)
648{
649	return function(progress) {
650		return 1 - delta(1 - progress);
651	};
652};
653
654BX.easing.transitions = {
655
656	linear : function(progress)
657	{
658		return progress;
659	},
660
661	quad : function(progress)
662	{
663		return Math.pow(progress, 2);
664	},
665
666	cubic : function(progress) {
667		return Math.pow(progress, 3);
668	},
669
670	quart : function(progress)
671	{
672		return Math.pow(progress, 4);
673	},
674
675	quint : function(progress)
676	{
677		return Math.pow(progress, 5);
678	},
679
680	circ : function(progress)
681	{
682		return 1 - Math.sin(Math.acos(progress));
683	},
684
685	back : function(progress)
686	{
687		return Math.pow(progress, 2) * ((1.5 + 1) * progress - 1.5);
688	},
689
690	elastic: function(progress)
691	{
692		return Math.pow(2, 10 * (progress-1)) * Math.cos(20 * Math.PI * 1.5/3 * progress);
693	},
694
695	bounce : function(progress)
696	{
697		for(var a = 0, b = 1; 1; a += b, b /= 2) {
698			if (progress >= (7 - 4 * a) / 11) {
699				return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
700			}
701		}
702	}};
703
704
705})(window);
706