https://www.studiolta.com/wp-content/plugins/codelights-shortcodes-and-widgets/js/cl-flipbox.js?ver=1.4

1/**
2 * CodeLights: FlipBox
3 */
4!function($){
5	"use strict";
6	var CLFlipbox = function(container){
7		// Common dom elements
8		this.$container = $(container);
9		this.$front = this.$container.find('.cl-flipbox-front');
10		this.$frontH = this.$container.find('.cl-flipbox-front-h');
11		this.$back = this.$container.find('.cl-flipbox-back');
12		this.$backH = this.$container.find('.cl-flipbox-back-h');
13		this.$btn = this.$container.find('.cl-btn');
14
15		// Simplified animation for IE11
16		if (!!window.MSInputMethodContext && !!document.documentMode){
17			this.$container.clMod('animation', 'cardflip').find('.cl-flipbox-h').css({
18				'transition-duration': '0s',
19				'-webkit-transition-duration': '0s'
20			});
21		}
22
23		// In chrome cube flip animation makes button not clickable. Replacing it with cube tilt
24		var isWebkit = 'WebkitAppearance' in document.documentElement.style;
25		if (isWebkit && this.$container.clMod('animation') === 'cubeflip' && this.$btn.length){
26			this.$container.clMod('animation', 'cubetilt');
27		}
28
29		// For diagonal cube animations height should equal width (heometrical restriction)
30		var animation = this.$container.clMod('animation'),
31			direction = this.$container.clMod('direction');
32		this.forceSquare = (animation == 'cubeflip' && ['ne', 'se', 'sw', 'nw'].indexOf(direction) != -1);
33
34		// Container height is determined by the maximum content height
35		this.autoSize = (this.$front[0].style.height == '' && !this.forceSquare);
36
37		// Content is centered
38		this.centerContent = (this.$container.clMod('valign') == 'center');
39
40		if (this._events === undefined) this._events = {};
41		$.extend(this._events, {
42			resize: this.resize.bind(this)
43		});
44		if (this.centerContent || this.autoSize) {
45			this.padding = parseInt(this.$front.css('padding-top'));
46		}
47		if (this.centerContent || this.forceSquare || this.autoSize) {
48			$cl.$window.bind('resize load', this._events.resize);
49			this.resize();
50		}
51
52		this.makeHoverable('.cl-btn');
53
54		// Fixing css3 animations rendering glitch on page load
55		setTimeout(function(){
56			this.$back.css('display', '');
57			this.resize();
58		}.bind(this), 250);
59	};
60	CLFlipbox.prototype = {
61		resize: function(){
62			var width = this.$container.width(),
63				height;
64			if (this.autoSize || this.centerContent) {
65				var frontContentHeight = this.$frontH.height(),
66					backContentHeight = this.$backH.height();
67			}
68			// Changing the whole container height
69			if (this.forceSquare || this.autoSize) {
70				height = this.forceSquare ? width : (Math.max(frontContentHeight, backContentHeight) + 2 * this.padding);
71				this.$front.css('height', height + 'px');
72			} else {
73				height = this.$container.height();
74			}
75			if (this.centerContent) {
76				this.$front.css('padding-top', Math.max(this.padding, (height - frontContentHeight) / 2));
77				this.$back.css('padding-top', Math.max(this.padding, (height - backContentHeight) / 2));
78			}
79		}
80	};
81	$.extend(CLFlipbox.prototype, $cl.mutators.Hoverable);
82	if (window.$cl === undefined) window.$cl = {};
83	if ($cl.elements === undefined) $cl.elements = {};
84	$cl.elements['cl-flipbox'] = CLFlipbox;
85	if ($cl.maybeInit !== undefined) $cl.maybeInit();
86}(jQuery);