Import legacy nurinda.co.id website

wp-content/themes/wpnt/framework/js/elements/flipbox.js

@@ -0,0 +1,146 @@
+/**
+ * UpSolution Element: FlipBox
+ */
+! function( $ ) {
+	"use strict";
+	$us.WFlipBox = function( container ) {
+		// Common dom elements
+		this.$container = $( container );
+		this.$front = this.$container.find( '.w-flipbox-front' );
+		this.$frontH = this.$container.find( '.w-flipbox-front-h' );
+		this.$back = this.$container.find( '.w-flipbox-back' );
+		this.$backH = this.$container.find( '.w-flipbox-back-h' );
+		this.$btn = this.$container.find( '.w-btn' );
+
+		// Simplified animation for IE11
+		if ( ! ! window.MSInputMethodContext && ! ! document.documentMode ) {
+			this.$container.usMod( 'animation', 'cardflip' ).find( '.w-flipbox-h' ).css( {
+				'transition-duration': '0s',
+				'-webkit-transition-duration': '0s'
+			} );
+		}
+
+		// In chrome cube flip animation makes button not clickable. Replacing it with cube tilt
+		var isWebkit = 'WebkitAppearance' in document.documentElement.style;
+		if ( isWebkit && this.$container.usMod( 'animation' ) === 'cubeflip' && this.$btn.length ) {
+			this.$container.usMod( 'animation', 'cubetilt' );
+		}
+
+		// For diagonal cube animations height should equal width (heometrical restriction)
+		var animation = this.$container.usMod( 'animation' ),
+			direction = this.$container.usMod( 'direction' );
+		this.forceSquare = ( animation == 'cubeflip' && [ 'ne', 'se', 'sw', 'nw' ].indexOf( direction ) != - 1 );
+
+		// Container height is determined by the maximum content height
+		this.autoSize = ( this.$front[ 0 ].style.height == '' && ! this.forceSquare );
+
+		// Content is centered
+		this.centerContent = ( this.$container.usMod( 'valign' ) == 'center' );
+
+		if ( this._events === undefined ) {
+			this._events = {};
+		}
+		$.extend( this._events, {
+			resize: this.resize.bind( this )
+		} );
+		if ( this.centerContent || this.autoSize ) {
+			this.padding = parseInt( this.$front.css( 'padding-top' ) );
+		}
+		if ( this.centerContent || this.forceSquare || this.autoSize ) {
+			$us.$window.bind( 'resize load', this._events.resize );
+			this.resize();
+		}
+
+		this.makeHoverable( '.w-btn' );
+
+		// Fixing css3 animations rendering glitch on page load
+		setTimeout( function() {
+			this.$back.css( 'display', '' );
+			this.resize();
+		}.bind( this ), 250 );
+	};
+	$us.WFlipBox.prototype = {
+		resize: function() {
+			var width = this.$container.width(),
+				height;
+			if ( this.autoSize || this.centerContent ) {
+				var frontContentHeight = this.$frontH.height(),
+					backContentHeight = this.$backH.height();
+			}
+			// Changing the whole container height
+			if ( this.forceSquare || this.autoSize ) {
+				height = this.forceSquare ? width : ( Math.max( frontContentHeight, backContentHeight ) + 2 * this.padding );
+				this.$front.css( 'height', height + 'px' );
+			} else {
+				height = this.$container.height();
+			}
+			if ( this.centerContent ) {
+				this.$front.css( 'padding-top', Math.max( this.padding, ( height - frontContentHeight ) / 2 ) );
+				this.$back.css( 'padding-top', Math.max( this.padding, ( height - backContentHeight ) / 2 ) );
+			}
+		},
+		makeHoverable: function( exclude ) {
+			if ( this._events === undefined ) {
+				this._events = {};
+			}
+			if ( jQuery.isMobile ) {
+				// Mobile: Touch hover
+				this._events.touchHoverStart = function() {
+					this.$container.toggleClass( 'hover' );
+				}.bind( this );
+				this.$container.on( 'touchstart', this._events.touchHoverStart );
+				if ( exclude ) {
+					this._events.touchHoverPrevent = function( e ) {
+						e.stopPropagation();
+					};
+					this.$container.find( exclude ).on( 'touchstart', this._events.touchHoverPrevent );
+				}
+			} else {
+				// Desktop: Mouse hover
+				this._mouseInside = false;
+				this._focused = false;
+
+				$.extend( this._events, {
+					mouseHoverStart: function() {
+						this.$container.addClass( 'hover' );
+						this._mouseInside = true;
+					}.bind( this ),
+					mouseHoverEnd: function() {
+						if ( ! this._focused ) {
+							this.$container.removeClass( 'hover' );
+						}
+						this._mouseInside = false;
+					}.bind( this ),
+					focus: function() {
+						this.$container.addClass( 'hover' );
+						this._focused = true;
+					}.bind( this ),
+					blur: function() {
+						if ( ! this._mouseInside ) {
+							this.$container.removeClass( 'hover' );
+						}
+						this._focused = false;
+					}.bind( this )
+				} );
+				this.$container.on( 'mouseenter', this._events.mouseHoverStart );
+				this.$container.on( 'mouseleave', this._events.mouseHoverEnd );
+				this.$focusable = this.$container.find( 'a' ).addBack( 'a' );
+				this.$focusable.on( 'focus', this._events.focus );
+				this.$focusable.on( 'blur', this._events.blur );
+			}
+		}
+	};
+
+	$.fn.wFlipBox = function( options ) {
+		return this.each( function() {
+			$( this ).data( 'wFlipBox', new $us.WFlipBox( this, options ) );
+		} );
+	};
+
+	$( function() {
+		$( '.w-flipbox' ).wFlipBox();
+	} );
+
+}( jQuery );
+
+