Added explanatory comments. Added a check right after submitting the …

…html form so when there are validation errors the section HIRE US will animate to the top on the screen.
Crafity · Jul 22, 2013 · e662289 · e662289
1 parent 8a321db
commit e662289
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 13 deletions.
diff --git a/crafity.forms.js b/crafity.forms.js
@@ -1,4 +1,4 @@
-/*globals window */
+/* globals window */
 
 (function (crafity, $, window) {
 

diff --git a/crafity.navigation.js b/crafity.navigation.js
@@ -18,7 +18,9 @@
 
 	function openPage(href, bookmark, formData, callback) {
 		// see if the Url actually changed
-		if (!formData && html$.hasClass("ready") && html$.attr("data-href") === href.split("?")[0]) { return; }
+		if (!formData && html$.hasClass("ready") && html$.attr("data-href") === href.split("?")[0]) {
+			return;
+		}
 
 		html$.removeClass('loaded').addClass('loading');
 
@@ -69,14 +71,18 @@
 						$("html").removeClass("not-ready").addClass("ready");
 						window.setTimeout(function () {
 							content$.findAndSelf(".columns").removeClass("open");
-							if (callback) { callback(); }
+							if (callback) {
+								callback();
+							}
 						}, 1);
 
 						window.setTimeout(function () {
 							content$.findAndSelf(".autoexpand")
 								.removeClass("autoexpand collapsed")
 								.addClass("expanded");
-							if (callback) { callback(); }
+							if (callback) {
+								callback();
+							}
 						}, 0);
 						window.setTimeout(function () {
 							content$.findAndSelf(".autocollapse")
@@ -146,7 +152,9 @@
 						container$.findAndSelf(".autoexpand")
 							.removeClass("autoexpand collapsed")
 							.addClass("expanded");
-						if (callback) { callback(); }
+						if (callback) {
+							callback();
+						}
 					}, 0);
 					window.setTimeout(function () {
 						container$.findAndSelf(".autocollapse")
@@ -174,11 +182,13 @@
 		return false;
 	}
 
+	// initializayion method
 	(function addUrlHashFunctionality() {
 		var objects = crafity.objects
 			, Event = crafity.Event
 			, window$ = $(window);
 
+		// HashInfo constructor
 		function HashInfo() {
 			var self = this;
 
@@ -261,13 +271,16 @@
 			}
 		}
 
+		// add HashInfo object as a property of the crafity navigation
 		navigation.hashInfo = new HashInfo();
 
 	}());
 
 	(function addAsyncUrlLoadingListener() {
+
 		crafity.ready(function () {
-			if (!navigation.enabled) { return; 
+			if (!navigation.enabled) {
+				return;
 			}
 			(function checkIfUrlNeedsToBeChangedToAUrlWithHash(window) {
 				if (!window.history || !window.history.pushState) {
@@ -283,9 +296,14 @@
 				}
 			}(window));
 
+			// subscribe on: 1) hash change event and 2) all clicks on anchor elements
 			crafity.navigation.hashInfo.onChange.subscribe(function (value) {
-				if (value === "_=_") { value = "!/"; }
-				if (value.substr(0, 2) !== "!/") { return; }
+				if (value === "_=_") {
+					value = "!/";
+				}
+				if (value.substr(0, 2) !== "!/") {
+					return;
+				}
 				openPage(value.substr(1).replace("#_=_", "") || "/", true);
 			});
 
@@ -311,7 +329,6 @@
 
 				} else {
 					throw new Error("Unknown Async command", this$[0].outerHTML);
-
 				}
 
 				return false;
@@ -324,9 +341,12 @@
 			}
 
 		});
+
 	}());
 
 	(function addAsyncSubmitListener() {
+
+		// subscribe on form submit events
 		$(window.document).delegate("form", "submit", function (e) {
 			var form$ = $(e.target)
 				, formData = form$.serialize()
@@ -351,9 +371,40 @@
 				openPage(url, form$.hasClass("bookmark"), formData);
 
 			} else if (form$.attr("data-async") === "content") {
+
+				// the following lines are some hack to obtain the paddingTop of the 
+				// section with the form just BEFORE it is submitted to the server
+				var parentSection$ = form$.closest("section[data-href]")
+					, paddingTop = -1; // quick and dirty
+
+				if (parentSection$.length) {
+					var section = crafity.sections.getByUrl(parentSection$.attr('data-href'));
+
+//					console.log("\n\rsection.getPaddingTop()", section.getPaddingTop());
+
+					paddingTop = section.getPaddingTop() + form$.offset().top;
+				}
+
+				// submit form
 				openContent(form$, href, formData, function () {
+
 					fields$.attr("disabled", null);
 					submitButton$.val(submitButton$.attr("data-default-value") || submitButton$.val()).removeClass("busy");
+
+					// GASL
+
+					if (paddingTop > -1) {
+
+						$(".scrollable:first").animate(
+							{
+								"scrollTop": paddingTop,
+								opacity: 1
+							},
+							400,
+							"swing",
+							function () {
+							});
+					}
 				});
 
 			} else {
@@ -366,7 +417,7 @@
 	}());
 
 	navigation.enabled = true;
-	
+
 	navigation.init = function () {
 		var nav = {};
 

diff --git a/crafity.sections.js b/crafity.sections.js
@@ -11,7 +11,7 @@
 			, self = {}
 			, scrollable$
 			, paddingTop;
-
+		
 		/**
 		 * A type representing a Section
 		 * @param {String} url The url of the section
@@ -20,7 +20,6 @@
 		function Section(url, data) {
 
 			/* Variables */
-
 			var self = this;
 
 			/**
@@ -74,6 +73,10 @@
 				return self;
 			};
 
+			this.getPaddingTop = function () {
+				return (self.section$.get(0).offsetTop - paddingTop);
+			};
+
 			/**
 			 * Show this section
 			 */
@@ -86,8 +89,17 @@
 					self.section$.addClass("animate");
 				}, (Math.random() * 500));
 				if (!scrollable$) { scrollable$ = $(".scrollable:first"); }
-				scrollable$.animate({ "scrollTop": (self.section$.get(0).offsetTop - paddingTop), opacity: 1 }, 400, "swing", function () {
+
+				scrollable$.animate(
+					{ 
+						"scrollTop": self.getPaddingTop(), 
+						opacity: 1 
+					}, 
+					400, 
+					"swing", 
+					function () {
 				});
+
 				self.visible = true;
 				return self;
 			};