Merge pull request #251 from canjs/249-search-links-and-search-disappearance

search links and search disappearance

Author: mickmcgrath13

static/canjs.js

@@ -11,14 +11,19 @@ var $articleContainer,
 	$everything,
 	$headers,
 	$nav,
+	$pathPrefix,
 	headerHidden,
 	animating,
 	navigating,
 	scrollPositionInterval,
 	currentHref,
-	searchControl;
+	searchControl,
+	hasShownSearch;
 
 (function() {
+	//flag that determines whether or not the search has already been shown
+	//(used for fading in or not)
+	hasShownSearch = false;
 	init();
 
 	// prevent sidebar from changing width when header hides
@@ -72,9 +77,11 @@ function init() {
 	$everything = $('#everything');
 	$headers = getHeaders();
 	$nav = $('.top-left > .brand, .top-right-top');
+	$pathPrefix = $("[path-prefix]").first();
 	headerHidden = undefined;
 	currentHref = window.location.href;
 
+	setPathPrefix();
 	setOnThisPageContent();
 	buildTOC();
 	setNavToggleListener();
@@ -83,8 +90,22 @@ function init() {
 		navigate: function(href){
 			window.history.pushState(null, null, href);
 			navigate(href);
-		}
+		},
+		pathPrefix: window.pathPrefix,
+		animateInOnStart: !hasShownSearch
 	});
+
+	hasShownSearch = true;
+}
+
+function setPathPrefix(){
+	var pathPrefix;
+	if($pathPrefix && $pathPrefix.length){
+		pathPrefix = $pathPrefix.attr("path-prefix");
+		if(pathPrefix && pathPrefix.length){
+			window.pathPrefix = pathPrefix;
+		}
+	}
 }
 
 function setDocTitle() {
@@ -160,14 +181,27 @@ function navigate(href) {
 			if (!$content.length) {
 				window.location.reload();
 			}
-			var $nav = $content.find(".bottom-left > ul");
-			var $article = $content.find("article");
-			var $breadcrumb = $content.find(".breadcrumb");
-			var homeLink = $content.find(".logo > a").attr('href');
-			$(".bottom-left>ul").replaceWith($nav);
+			var $nav = $content.find(".bottom-left > ul"),
+					$article = $content.find("article"),
+					$breadcrumb = $content.find(".breadcrumb"),
+					homeLink = $content.find(".logo > a").attr('href'),
+					$navReplace = $(".bottom-left>ul"),
+
+					//root elements - use .filter; not .find
+					$pathPrefixDiv = $content.filter("[path-prefix]");
+
+
+			//if any page doesn't have a nav, replacing it won't work,
+			//and the nav will be gone for any subsequent page visits
+			if($navReplace && $navReplace.length){
+				$navReplace.replaceWith($nav);
+			}else{
+				$(".bottom-left").append($nav);
+			}
 			$("article").replaceWith($article);
 			$(".breadcrumb").replaceWith($breadcrumb);
 			$(".logo > a").attr('href', homeLink);
+			$("[path-prefix]").replaceWith($pathPrefixDiv);
 
 			// Initialize jsbin scripts
 			delete window.jsbinified;

static/search.js

@@ -16,8 +16,8 @@ var Search = Control.extend({
 		//renderer stuff
 		resultsRenderer: searchResultsRenderer,
 		pathPrefix: window.pathPrefix,
-		searchMapHashUrl: window.pathPrefix + '/searchMapHash.json', 
-		searchMapUrl: window.pathPrefix + '/searchMap.json',
+		searchMapHashUrl: '/searchMapHash.json', 
+		searchMapUrl: '/searchMap.json',
 
 		//callbacks
 		onResultsHide: null,
@@ -33,7 +33,10 @@ var Search = Control.extend({
 		minSearchLength: 3,
 		searchTimeout: 400,
 
-		localStorageKeyPrefix: "bit-docs-search"
+		localStorageKeyPrefix: "bit-docs-search",
+
+		//whether or not to animate in upon initialization
+		animateInOnStart: true
 	}
 }, {
 
@@ -69,12 +72,16 @@ var Search = Control.extend({
 		//hide the input until the search engine is ready
 		this.$inputWrap.hide();
 
-		this.checkSearchMapHash(this.options.searchMapHashUrl).then(function(searchMapHashChangedObject){
-			self.getSearchMap(self.options.searchMapUrl, searchMapHashChangedObject).then(function(searchMap){
+		this.checkSearchMapHash(this.options.pathPrefix + this.options.searchMapHashUrl).then(function(searchMapHashChangedObject){
+			self.getSearchMap(self.options.pathPrefix + self.options.searchMapUrl, searchMapHashChangedObject).then(function(searchMap){
 				self.initSearchEngine(searchMap);
 
 				//show the search input when the search engine is ready
-				self.$inputWrap.fadeIn(400);
+				if(self.options.animateInOnStart){
+					self.$inputWrap.fadeIn(400);
+				}else{
+					self.$inputWrap.show();
+				}
 
 				//focus the search on init
 				//only do stuff if we have an input to work with
@@ -222,23 +229,28 @@ var Search = Control.extend({
 	// @returns thenable that resolves to true if localStorage was cleared and false otherwise
 	checkSearchMapHash: function(dataUrl) {
 		var self = this,
-				returnDeferred = $.Deferred();
+				returnDeferred = $.Deferred(),
+				localStorageKey = self.formatLocalStorageKey(self.searchMapHashLocalStorageKey),
+				searchMapHashLocalStorage = self.getLocalStorageItem(localStorageKey),
+				lsHash = searchMapHashLocalStorage && searchMapHashLocalStorage.hash;
 
 		//no need to do anything if localStorage isn't present
 		if(!window.localStorage){
 			returnDeferred.resolve(false);
 			return;
 		}
 
+
+		localStorageKey = self.formatLocalStorageKey(self.searchMapHashLocalStorageKey);
+		searchMapHashLocalStorage = self.getLocalStorageItem(localStorageKey);
+		lsHash = searchMapHashLocalStorage && searchMapHashLocalStorage.hash;
+
 		$.ajax({
 			url: dataUrl,
 			dataType: "json",
 			cache: false
 		}).then(function(data){
-			var localStorageKey = self.formatLocalStorageKey(self.searchMapHashLocalStorageKey),
-					searchMapHashLocalStorage = self.getLocalStorageItem(localStorageKey),
-					lsHash = searchMapHashLocalStorage && searchMapHashLocalStorage.hash,
-					dataHash = data && data.hash;
+			var dataHash = data && data.hash;
 
 			//no lsHash && no dataHash => resolve
 			//lsHash && no dataHash => resolve
@@ -258,7 +270,14 @@ var Search = Control.extend({
 			}
 
 			returnDeferred.resolve(false);
-		}, returnDeferred.reject);
+		}, function(error){
+			//if we have a localStorage item, use it
+			if(searchMapHashLocalStorage){
+				returnDeferred.resolve(false);
+			}else{
+				returnDeferred.reject(error);
+			}
+		});
 
 		return returnDeferred;
 	},
@@ -490,15 +509,15 @@ var Search = Control.extend({
 					},{
 						docUrl: function(){
 							if(!docObject.pathToRoot){
-								return self.url;
+								return this.url;
 							}
 
 							var root = joinURIs(window.location.href, docObject.pathToRoot);
 							if(root.substr(-1) === "/"){
 								root = root.substr(0, root.length-1);
 							}
 
-							return root + "/" + self.url;
+							return root + "/" + this.url;
 						}
 					});
 

templates/layout.mustache

@@ -49,8 +49,9 @@
 			<script type='text/javascript' data-main="bit-docs-site/static" src="{{pathToDest}}/static/node_modules/steal/steal.production.js"></script>
 		{{/if}}
 		<script async defer src="https://buttons.github.io/buttons.js"></script>
-		<script type="text/javascript">
-		  window.pathPrefix = '{{pathToDest}}';
-		</script>
+
+		<!-- root-level elements with attributes necessary for the app -->
+		<div path-prefix="{{pathToDest}}" />
+		
 	</body>
 </html>