https://son-vent.com/wp-content/uploads/ac_assets/uc_flip_box_base/ue-flip-box.js?ver=2.0.20

1
2var UEFlipbox = function(flipboxID){
3  
4  var g_isWasHover = false;  
5  var g_objFlipBox;
6  var g_isHoverMode;
7  var g_objTriggerFront, g_objTriggerBack;
8  var g_backEventType;
9  var g_dataCloseOnBody;
10
11  /**
12   * turn actually the box
13   */
14  function turnOverActually(isBack){
15	  
16	  if(!isBack)
17		  var isBack = g_objFlipBox.hasClass("uc-show");
18	  
19	  flipbox = g_objFlipBox[0];
20	  
21	  //turn to front
22     if( isBack ) {
23    	flipbox.classList.remove('uc-show');
24    	flipbox.classList.add('uc-hide');
25    	
26    	return(true);
27     } 
28    
29     //turn to back
30     flipbox.classList.remove('uc-hide');
31     flipbox.classList.add('uc-show');
32	  
33  }
34  
35  /**
36   * show the back panel
37   */
38  function turnOverFlipBox(event){
39	  	  
40	  var objClicked = jQuery(event.target);
41
42	  var isHoverEvent = event.type != "click";
43	  
44	  //for mobile mode
45	  if(isHoverEvent == true)
46		  g_isWasHover = true;
47
48	  var isFrontClicked = isHoverEvent == false && objClicked.hasClass("ue-flip-box__panel--front");
49	  
50	  //don't allow to click on front when trigger button exists
51	  if(isFrontClicked == true && g_objTriggerFront.length == true)
52		  return(true);
53	  	  
54	  var flipbox = g_objFlipBox[0];
55	  
56	  var isBack = flipbox.classList.contains('uc-show');
57	  
58
59	  //don't allow clicks on desktop
60	  if(g_isHoverMode == true){
61		  
62		  if(isHoverEvent == false && g_isWasHover == true)
63			  return(true);
64		  
65	  }else{
66		  	//click only mode - don't allow hover
67		  
68		  if(isHoverEvent == true){
69			  
70			  //if no trigger button on back - turn by mouse out
71			  if(isBack == true && g_backEventType == "hover" && event.type == "mouseleave" && g_dataCloseOnBody == false){
72				  turnOverActually(isBack);
73			  }
74			  			  
75			  return(true);		  
76		  }else{		
77			  	
78			  //don't allow hover on click on trigger mode, on desktop only. on mobile allowed click
79			  
80			  if(isBack == true && g_backEventType == "hover" && g_isWasHover == false)
81				  return(true);
82		  }
83		  
84	  }
85
86    //don't turn back on mouseleave
87    if(isBack == false && event.type == "mouseleave")
88    return(true);
89      
90          
91    turnOverActually(isBack);
92   	  
93	 
94  }
95	  
96	/**
97	 * init the events
98	 */
99	function initFlipBox(id){
100		
101		const isTouchDevice = 'ontouchstart' in window ? true : false
102
103		var objFlipboxWrapper = jQuery(id);
104    g_dataCloseOnBody = jQuery(flipboxID).data('closeonbody')
105
106		if(objFlipboxWrapper.length == 0){
107			console.log("flipbox not found: "+id);
108			return(false);
109		}
110		
111		g_objFlipBox = objFlipboxWrapper.find(".ue-flip-box__container");
112		
113		g_isHoverMode = g_objFlipBox.hasClass("ue-flip-box__container--hover");
114		
115		g_backEventType = "hover";
116		if(g_isHoverMode == false)
117			g_backEventType = "click";
118		
119		g_objTriggerFront = g_objFlipBox.find(".ue-flip-box__front-trigger");
120		g_objTriggerBack = g_objFlipBox.find(".ue-flip-box__back-trigger");
121		
122		if(g_objTriggerBack.length == false)
123			g_backEventType = "hover";
124		
125		if(g_objTriggerFront.length && g_objTriggerBack.length){
126			g_objTriggerBack.on("click", turnOverFlipBox);
127			g_objTriggerFront.on("click", turnOverFlipBox);
128		}else{
129			if ( isTouchDevice ) {
130				g_objFlipBox.on("click mouseenter mouseleave", turnOverFlipBox);
131			} else {
132
133				g_objFlipBox.on("click mouseenter mouseleave focusin focusout", turnOverFlipBox);
134
135        if(g_dataCloseOnBody == true){
136
137          jQuery('body').on('click', function(event){
138
139            var objTarget = jQuery(event.target);
140            var objParent = objTarget.parents('.ue-flip-box');
141            
142            var flipbox = g_objFlipBox[0];	  
143            var isBack = flipbox.classList.contains('uc-show');
144
145            if(!objParent.length && isBack == true){
146               turnOverActually(isBack)
147            }
148
149          })
150        }
151
152			}
153		}
154
155	}
156
157	initFlipBox(flipboxID);
158
159
160	// turn back visibility of back panel
161  	setTimeout( function() { jQuery('.ue-flip-box__panel--back').css('visibility', 'visible'); },1000);
162}