first commit

2022-05-31 16:21:53 -04:00
commit f76abffdcd
5978 changed files with 1078901 additions and 0 deletions
@@ -0,0 +1,238 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Advanced Velocity.js examples
+*
+*  Specific JS code additions for extension_velocity_examples.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Animation options
+    // ------------------------------
+
+	// Properties animation
+	$('.velocity-properties').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next().find('.panel').velocity({
+			marginLeft: 20,
+			marginRight: 20,
+			opacity: 0.5
+		}).velocity('reverse', {
+			delay: 1000,
+	    	complete: function() {
+	    		$(this).removeAttr('style');
+	    	}
+		})
+	});
+
+
+	// Chained animation
+	$('.velocity-chained').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next().find('.panel').velocity({
+			marginLeft: 20
+		}).velocity('reverse', {
+			delay: 1000
+		}).velocity({
+			marginRight: 20 
+		}).velocity('reverse', {
+			delay: 1000
+		}).velocity({
+			opacity: 0.5
+		}).velocity('reverse', {
+			delay: 1000,
+	    	complete: function() {
+	    		$(this).removeAttr('style');
+	    	}
+		})
+	});
+
+
+	// Stagger animation
+	$('.velocity-stagger').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next().find('.panel').velocity('transition.slideUpIn', {
+			stagger: 500
+		});
+	});
+
+
+	// Drag animation
+	$('.velocity-drag').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next().find('.panel').velocity('transition.slideUpBigIn', {
+			duration: 1000,
+			drag: true
+		});
+	});
+
+
+	// Backwards animation
+	$('.velocity-backwards').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next().find('.panel').velocity('transition.slideDownOut', {
+			stagger: 400,
+			backwards: true
+		})
+	    .velocity({ opacity: 1 }, {
+	      duration: 500,
+	      display: "block"
+	    });
+	});
+
+
+
+    // Animation callbacks
+    // ------------------------------
+
+	// Begin callback
+	$('.velocity-begin').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next('.row').velocity({
+			marginLeft: 20,
+			marginRight: 20,
+			opacity: 0.5
+		}, {
+			begin: function() {
+				alert('Begin callback example');
+			}
+		}).velocity('reverse', {
+			delay: 1000,
+	    	complete: function() {
+	    		$(this).removeAttr('style');
+	    	}
+		})
+	});
+
+
+	// Complete callback
+	$('.velocity-complete').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next('.row').velocity({
+			marginLeft: 20,
+			marginRight: 20,
+			opacity: 0.5
+		}, {
+			complete: function() {
+				alert('Complete callback example');
+			}
+		}).velocity('reverse', {
+			delay: 1000,
+	    	complete: function() {
+	    		$(this).removeAttr('style');
+	    	}
+		})
+	});
+
+
+	// Progress callback animation
+	$('.velocity-progress').on('click', function (e) {
+		e.preventDefault();
+
+		var $percentComplete = $("#percentComplete"),
+		    $timeRemaining = $("#timeRemaining");
+
+		$(this).parent().next('.row').velocity({
+			marginLeft: 20,
+			marginRight: 20,
+			opacity: 0.5
+		}, {
+			duration: 1000,
+			progress: function(elements, percentComplete, timeRemaining, timeStart) {
+				$percentComplete.html(Math.round(percentComplete * 100) + "% complete.");
+				$timeRemaining.html(timeRemaining + "ms remaining.");
+			}
+		}).velocity('reverse', {
+			delay: 1000,
+	    	complete: function() {
+	    		$(this).removeAttr('style');
+	    	}
+		})
+	});
+
+
+
+    // Animate layout on page load
+    // ------------------------------
+
+	// Hide elements first
+	$(".sidebar, .navbar, .navbar-brand, .navbar-text, .navbar-nav > li, .page-header, .page-title, .page-header .heading-elements, .breadcrumb, .breadcrumb-elements > li, .content > .panel, .content .row > [class*=col-], .footer")
+		.css('opacity', 0);
+
+
+	// Animate when Pace loading is done
+    Pace.on('done', function () {
+
+		// Layout parts
+		$(".navbar, .navbar-brand, .navbar-text, .navbar-nav > li, .page-header, .page-title, .page-header .heading-elements, .breadcrumb, .breadcrumb-elements > li, .content > .panel, .content .row > [class*=col-], .footer")
+			.css('opacity', 1)
+			.velocity("transition.slideDownIn", {
+				stagger: 200,
+				duration: 200,
+				complete: function(elements) {
+					$(this).removeAttr('style');
+				}
+		});
+
+
+		// Sidebar
+		$(".sidebar")
+			.css({opacity: 0, borderColor: 'transparent'})
+			.velocity("transition.slideUpIn", {
+				delay: 100,
+				duration: 500,
+				display: 'table-cell',
+				complete: function(elements) {
+					$(this).removeAttr('style');
+				}
+		});
+
+
+		// Navigation list on load
+		$(".navigation > li")
+			.css('opacity', 0)
+			.velocity("transition.slideLeftIn", {
+				delay: 500,
+				stagger: 75,
+				duration: 200,
+				complete: function(elements) {
+					$(this).removeAttr('style')
+				}
+		});
+
+
+		// Navigation list on click
+		$(".navigation .has-ul").on('click', function() {
+			if ($(this).parent('li').hasClass('active')) {
+				$(this).next('ul').children('li').css('opacity', 0).velocity("transition.fadeIn", {
+					delay: 150,
+					stagger: 30,
+					duration: 200,
+					complete: function(elements) {
+						$(this).removeAttr('style')
+					}
+				});
+			} else {
+				$(this).next('ul').children('li').css('opacity', 0).velocity("transition.slideLeftOut", {
+					duration: 200,
+					complete: function(elements) {
+						$(this).removeAttr('style')
+					}
+				});
+			}
+		});
+    });
+
+});