Import legacy nurinda.co.id website

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

@@ -0,0 +1,144 @@
+/**
+ * UpSolution Element: Interactive Text
+ */
+! function( $ ) {
+	"use strict";
+	$us.WItext = function( container ) {
+		this.$container = $( container );
+		var data = this.$container[ 0 ].onclick() || {};
+		this.$container.removeAttr( 'onclick' );
+		this.type = this.$container.usMod( 'type' );
+		this.animateChars = ( this.type.substring( this.type.length - 5 ) == 'Chars' );
+		if ( this.animateChars ) {
+			this.type = this.type.substring( 0, this.type.length - 5 );
+		}
+		this.duration = parseInt( data.duration ) || 1000;
+		this.delay = parseInt( data.delay ) || 5000;
+		this.dynamicColor = ( data.dynamicColor || '' );
+		this.$parts = this.$container.find( '.w-itext-part' );
+		if ( this.$parts.length == 0 ) {
+			return;
+		} // No animated parts
+		this.parts = [];
+		this.partsStates = []; // part index => text states
+		this.animateParts = []; // animation index => animated parts indexes
+		this.$parts.css( {
+			'-webkit-transition-duration': this.duration + 'ms',
+			'transition-duration': this.duration + 'ms'
+		} ).each( function( partIndex, part ) {
+			this.parts[ partIndex ] = $( part );
+			this.partsStates[ partIndex ] = part.onclick() || [];
+			this.parts[ partIndex ].removeAttr( 'onclick' );
+			$.map( part.className.match( /changesat_[0-9]+/g ), function( elm ) {
+				var animIndex = parseInt( elm.replace( 'changesat_', '' ) );
+				if ( this.animateParts[ animIndex ] === undefined ) {
+					this.animateParts[ animIndex ] = [];
+				}
+				this.animateParts[ animIndex ].push( partIndex );
+			}.bind( this ) );
+		}.bind( this ) );
+		this.active = 0;
+		this.maxActive = this.partsStates[ 0 ].length - 1;
+		this._events = {
+			animate: this.animate.bind( this ),
+			postAnimate: this.postAnimate.bind( this )
+		};
+		// Start animation
+		this.timer = setTimeout( this._events.animate, this.delay );
+	};
+	$us.WItext.prototype = {
+		animate: function() {
+			var nextState = ( this.active == this.maxActive ) ? 0 : ( this.active + 1 );
+			for ( var partIndex = 0; partIndex < this.parts.length; partIndex ++ ) {
+				if ( this.partsStates[ partIndex ][ this.active ] != this.partsStates[ partIndex ][ nextState ] ) {
+					this.parts[ partIndex ].addClass( 'dynamic' );
+					if ( this.dynamicColor ) {
+						this.parts[ partIndex ].css( 'color', this.dynamicColor );
+					}
+					this._animatePart( partIndex );
+				} else {
+					this.parts[ partIndex ].removeClass( 'dynamic' );
+					if ( this.dynamicColor ) {
+						this.parts[ partIndex ].css( 'color', '' );
+					}
+				}
+			}
+			this.timer = setTimeout( this._events.postAnimate, this.duration + this.delay / 2 );
+		},
+		/**
+		 * Animate a certain dynamic part
+		 * @param partIndex
+		 * @private
+		 */
+		_animatePart: function( partIndex ) {
+			// Preparing part for animation
+			var nextState = ( this.active == this.maxActive ) ? 0 : ( this.active + 1 ),
+				nextValue = this.partsStates[ partIndex ][ nextState ],
+				$curSpan = this.parts[ partIndex ].wrapInner( '<span></span>' ).children( 'span' ),
+				$nextSpan = $( '<span class="measure"></span>' ).html( nextValue.replace( ' ', '&nbsp;' ) ).appendTo( this.parts[ partIndex ] ),
+				nextWidth = $nextSpan.width(),
+				outType = ( this.type == 'flipInX' ) ? 'flipOutX' : 'fadeOut',
+				i;
+			// Measuring the future part width
+			this.parts[ partIndex ].addClass( 'notransition' ).css( 'width', this.parts[ partIndex ].width() );
+			setTimeout( function() {
+				this.parts[ partIndex ].removeClass( 'notransition' ).css( 'width', nextWidth );
+			}.bind( this ), 25 );
+			$curSpan.css( {
+				position: 'absolute',
+				left: 0,
+				top: 0,
+				'-webkit-transition-duration': ( this.duration / 5 ) + 'ms',
+				'transition-duration': ( this.duration / 5 ) + 'ms'
+			} ).addClass( 'animated_' + outType );
+			$nextSpan.css( 'width', nextWidth ).removeClass( 'measure' ).prependTo( this.parts[ partIndex ] );
+			if ( this.animateChars ) {
+				$nextSpan.empty();
+				var $chars = [],
+					charDuration = Math.floor( this.duration / nextValue.length );
+				for ( i = 0; i < nextValue.length; i ++ ) {
+					$chars.push( $( '<span>' + ( ( nextValue[ i ] != ' ' ) ? nextValue[ i ] : '&nbsp;' ) + '</span>' ).css( {
+						'-webkit-transition-duration': charDuration + 'ms',
+						'transition-duration': charDuration + 'ms'
+					} ).appendTo( $nextSpan ) );
+				}
+				$.each( $chars, function( index, char ) {
+					setTimeout( function() {
+						$( char ).addClass( 'animated_' + this.type );
+					}.bind( this ), charDuration * index );
+				}.bind( this ) );
+			} else {
+				$nextSpan.wrapInner( '<span></span>' ).children( 'span' ).css( {
+					'-webkit-transition-duration': this.duration + 'ms',
+					'transition-duration': this.duration + 'ms'
+				} ).addClass( 'animated_' + this.type );
+			}
+			setTimeout( this._cleanupPartAnimation.bind( this, partIndex ), this.duration + this.delay / 2 );
+		},
+		/**
+		 * Clean up a certain part from animation
+		 * @param partIndex
+		 * @private
+		 */
+		_cleanupPartAnimation: function( partIndex ) {
+			var nextState = ( this.active == this.maxActive ) ? 0 : ( this.active + 1 ),
+				nextValue = this.partsStates[ partIndex ][ nextState ];
+			this.parts[ partIndex ].addClass( 'notransition' ).css( 'width', '' ).html( nextValue.replace( ' ', '&nbsp;' ) );
+		},
+		postAnimate: function() {
+			this.active = ( this.active == this.maxActive ) ? 0 : ( this.active + 1 );
+			this.timer = setTimeout( this._events.animate, this.delay / 2 );
+		}
+	};
+
+	$.fn.wItext = function( options ) {
+		return this.each( function() {
+			$( this ).data( 'wItext', new $us.WItext( this, options ) );
+		} );
+	};
+
+	$( function() {
+		$( '.w-itext' ).wItext();
+	} );
+
+}( jQuery );