[pjax] PushState API + Ajax, Event Date Format as DD, d MM, yy hh:mm tt

webnotes/templates/base.html

@@ -49,27 +49,32 @@
 		{%- block navbar -%}{% include "templates/includes/navbar.html" %}{%- endblock -%}
 	
 		<header class="page-header">
-			<div class="container">
+			<div class="container" data-html-block="header">
 			{%- if header is defined -%}{{ header }}{%- endif -%}
 			</div>
 		</header>
+		<header class="page-breadcrumbs">
+			<div class="container" data-html-block="breadcrumbs">
+			{%- if breadcrumbs is defined -%}{{ breadcrumbs }}{%- endif -%}
+			</div>
+		</header>
 		<div class="container page-container" id="page-{{ name or page_name }}">
 			<div class="row">
-				<div class="col-sm-9 page-content">
+				<div class="col-sm-9 page-content" data-html-block="content">
 					{%- block content -%}{{ content }}{%- endblock -%}
 				</div>
-				<div class="col-sm-3 page-sidebar">
+				<div class="col-sm-3 page-sidebar" data-html-block="sidebar">
 					{%- block sidebar -%}{%- if sidebar is defined -%}{{ sidebar }}{%- endif -%}{%- endblock -%}
 				</div>
 			</div>
 		</div>
 		<footer class="page-footer">
-			<div class="container">
+			<div class="container" data-html-block="footer">
 				{%- if footer is defined -%}{{ footer }}{%- endif -%}
 			</div>
 		</footer>
 	</div>
-	<div id="footer">
+	<div id="wrap-footer">
 		{%- block footer -%}{% include "templates/includes/footer.html" %}{%- endblock -%}
 	</div>
 </body>

webnotes/templates/generators/website_group.html

@@ -7,6 +7,15 @@
 {%- endif -%}
 {% endblock %}
 
+{% block breadcrumbs %}
+<ul class="breadcrumb">
+	{% for parent in parents %}
+		<li><a href="/{{ parent.name|lower }}">{{ parent.page_title }}</a></li>
+	{% endfor %}
+	<li class="active">{{ title }}</li>
+</ul>
+{% endblock %}
+
 {% block content %}
 <ul class="nav nav-tabs view-selector">
 	{%- for t in views -%}

webnotes/templates/includes/login.js

@@ -1,20 +1,6 @@
 var disable_signup = {{ disable_signup and "true" or "false" }};
 var login = {};
 
-$(document).ready(function(wrapper) {
-	window.location.hash = "#login";
-	login.login();
-	
-	$('#login_btn').click(login.do_login);
-		
-	$('#pass').keypress(function(ev){
-		if(ev.which==13 && $('#pass').val()) {
-			$("#login_btn").click();
-		}
-	});
-	$(document).trigger('login_rendered');
-})
-
 $(window).on("hashchange", function() {
 	var route = window.location.hash.slice(1);
 	if(!route) route = "login";
@@ -148,7 +134,6 @@ login.login_handlers = {
 {% if fb_app_id is defined -%}
 // facebook login
 $(document).ready(function() {
-  $.ajaxSetup({ cache: true });
   var user_id = wn.get_cookie("user_id");
   var sid = wn.get_cookie("sid");
   
@@ -205,4 +190,18 @@ login.via_facebook = function() {
 		}
 	},{scope:"email"});	
 }
+
+$(document).ready(function(wrapper) {
+	window.location.hash = "#login";
+	login.login();
+	
+	$('#login_btn').click(login.do_login);
+		
+	$('#pass').keypress(function(ev){
+		if(ev.which==13 && $('#pass').val()) {
+			$("#login_btn").click();
+		}
+	});
+	$(document).trigger('login_rendered');
+})
 {%- endif %}

webnotes/templates/includes/sidebar.html

@@ -1,7 +1,7 @@
 {%- if children -%}
 {%- for child in children -%}
 <div class="sidebar-item">
-	<a href="/{{ child.name|lower }}">
+	<a href="/{{ child.name|lower }}" class="no-decoration">
 		{{ child.page_title }}
 		{% if not child.public_read %}
 		(<i class="icon-fixed-width icon-lock"></i>)

webnotes/website/css/website.css

@@ -214,22 +214,33 @@ fieldset {
 }
 
 .page-header {
-	margin: 0 0 20px;
+	margin: 0px;
 	padding: 5px 0px;
 }
 
+.page-container {
+	margin-top: 15px;
+}
+
 .page-header h1,
 .page-header h2,
 .page-header h3 {
-	margin-top: 5px;
+	margin: 5px auto;
 }
 
 .page-header .lead {
 	margin-bottom: 5px;
 }
 
-.page-sidebar {
-	border-left: 1px solid #aaa;
+.sidebar-item {
+	margin: 15px auto;
+	color: #999;
+	font-size: 90%;
+}
+
+.sidebar-item a:hover {
+	color: #333;
+	border-bottom: 2px solid #999;
 }
 
 html,
@@ -250,7 +261,7 @@ body {
 }
 
 /* Set the fixed height of the footer here */
-#footer {
+#wrap-footer {
   height: 140px;
   background-color: #f5f5f5;
 }
@@ -268,11 +279,15 @@ body {
 
 /* post and post list */
 .post {
-	padding: 7px 0px;
+	padding: 15px 0px;
 	word-wrap: break-word;
 	border-bottom: 1px solid #eee;
 }
 
+.post:first-child {
+	margin-top: 15px !important;
+}
+
 .post .img-responsive {
 	border-radius: 4px;
 }
@@ -309,4 +324,97 @@ textarea {
 
 .post-add-textarea {
 	height: 200px !important;
-}
+}
+
+/* needs review */
+
+.btn-small, .post-editor .btn {
+	padding: 5px;
+	font-size: 90%;
+}
+
+.btn-right, .post-editor .btn {
+	margin-left: 5px;
+}
+
+.no-posts {
+	margin-top: 15px;
+}
+
+.full-page {
+	margin: 30px;
+}
+
+.img-responsive {
+	border-radius: 4px;
+}
+
+.user-profile {
+	min-height: 50px;
+	min-width: 70px;
+}
+
+.hidden-xs {
+	display: inline-block !important;
+}
+
+.visible-xs {
+	display: none !important;
+}
+
+@media (max-width: 767px) {
+	.hidden-xs {
+		display: none !important;
+	}
+	.visible-xs {
+		display: inline-block !important;
+	}
+}
+
+.nav-tabs > li > a {
+	padding: 7px 10px;
+}
+
+.btn-more {
+	margin-top: 15px;
+}
+
+.post-content img {
+	margin: 10px 0px;
+}
+
+.assigned-label, .event-label {
+	display: inline-block;
+	padding: .4em .6em .4em;
+	margin-bottom: 7px;
+}
+
+a.no-decoration {
+	text-decoration: none;
+	color: inherit;
+}
+
+.page-breadcrumbs {
+	border-bottom: 1px solid #eee;
+}
+
+.page-breadcrumbs .breadcrumb {
+	margin-bottom: 0px;
+	background-color: transparent;
+	border-radius: 0px;
+	padding: 8px 0px;
+}
+
+@media (min-width: 768px) {
+	.page-sidebar {
+		padding-left: 5em;
+	}
+	
+}
+
+.post:last-child {
+	border-bottom: none;
+}
+
+/* end - needs review */
+

webnotes/website/js/website.js

@@ -184,6 +184,101 @@ $.extend(wn, {
 			$(".full-name").html(wn.get_cookie("full_name"));
 			$(".user-picture").attr("src", wn.get_cookie("user_image"));
 		}
+	},
+	setup_push_state: function() {
+		if(wn.supports_pjax()) {
+			// hack for chrome's onload popstate call
+			window.initial_href = window.location.href
+			
+			$(document).on("click", "#wrap a", wn.handle_click);
+			
+			$(window).on("popstate", function(event) {
+				// hack for chrome's onload popstate call
+				if(window.initial_href==location.href && window.previous_href==undefined) {
+					wn.set_force_reload(true);
+					return;
+				}
+				
+				window.previous_href = location.href;
+				var state = event.originalEvent.state;
+				
+				if(state) {
+					wn.render_json(state);
+				} else {
+					console.log("state not found!");
+				}
+			});
+		}
+	},
+	handle_click: function(event) {
+		// taken from jquery pjax
+		var link = event.currentTarget
+		
+		if (link.tagName.toUpperCase() !== 'A')
+			throw "using pjax requires an anchor element"
+
+		// Middle click, cmd click, and ctrl click should open
+		// links in a new tab as normal.
+		if ( event.which > 1 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey )
+			return
+			
+		// Ignore cross origin links
+		if ( location.protocol !== link.protocol || location.hostname !== link.hostname )
+			return
+
+		// Ignore anchors on the same page
+		if (link.hash && link.href.replace(link.hash, '') ===
+			 location.href.replace(location.hash, ''))
+			 return
+			 
+		// Ignore empty anchor "foo.html#"
+		if (link.href === location.href + '#')
+			return
+		
+		// our custom logic
+		if (link.href.indexOf("cmd=")!==-1)
+			return
+			
+		event.preventDefault()
+		wn.load_via_ajax(link.href);
+
+	},
+	load_via_ajax: function(href) {
+		console.log("calling ajax");
+		
+		window.previous_href = href;
+		history.pushState(null, null, href);
+		
+		$.ajax({ url: href, cache: false }).done(function(data) {
+			history.replaceState(data, data.title, href);
+			wn.render_json(data); 
+		})
+	},
+	render_json: function(data) {
+		if(data.reload) {
+			window.location = location.href;
+		// } else if(data.html) {
+		// 	var newDoc = document.open("text/html", "replace");
+		// 	newDoc.write(data.html);
+		// 	newDoc.close();
+		} else {
+			$('[data-html-block]').each(function(i, section) {
+				var $section = $(section);
+				$section.html(data[$section.attr("data-html-block")] || "");
+			});
+			if(data.title) $("title").html(data.title);
+			$(document).trigger("page_change");
+		}
+	},
+	set_force_reload: function(reload) {
+		// learned this from twitter's implementation
+		window.history.replaceState({"reload": reload}, 
+			window.document.title, location.href);
+	},
+	supports_pjax: function() {
+		return (window.history && window.history.pushState && window.history.replaceState &&
+		  // pushState isn't reliable on iOS until 5.
+		  !navigator.userAgent.match(/((iPod|iPhone|iPad).+\bOS\s+[1-4]|WebApps\/.+CFNetwork)/))
 	}
 });
 
@@ -316,6 +411,7 @@ $(document).ready(function() {
 	}
 	
 	wn.render_user();
+	wn.setup_push_state()
 	
 	$(document).trigger("page_change");
 });
@@ -323,6 +419,7 @@ $(document).ready(function() {
 $(document).on("page_change", function() {
 	$(".page-header").toggleClass("hidden", !!!$(".page-header").text().trim());
 	$(".page-footer").toggleClass("hidden", !!!$(".page-footer").text().trim());
+	$(".page-breadcrumbs").toggleClass("hidden", !!!$(".page-breadcrumbs").text().trim());
 
 	// add prive pages to sidebar
 	if(website.private_pages && $(".page-sidebar").length) {

webnotes/website/js/website_group.js

@@ -9,7 +9,6 @@ $.extend(website, {
 			$('li[data-view="add"]').toggleClass("hide", !website.access.write);
 			$('li[data-view="settings"]').toggleClass("hide", !website.access.admin);
 			$('li[data-view="edit"]').toggleClass("hide", website.view!=="edit");
-			// $('li[data-view="settings"]').toggleClass("hide", !website.access.admin);
 		
 			// show message
 			$(".post-list-help").html(!website.access.write ? "You do not have permission to post" : "");
@@ -203,8 +202,19 @@ $.extend(website, {
 		}
 	},
 	format_event_timestamps: function() {
+		var get_day = function(num) {
+			return ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
+				"Friday", "Saturday"][num];
+		}
+		
+		var get_month = function(num) {
+			return ["January", "February", "March", "April", "May", "June",
+				"July", "August", "September", "October", "November", "December"][num-1];
+		}
+		
 		var format = function(datetime) {
 			if(!datetime) return "";
+			
 			var date = datetime.split(" ")[0].split("-");
 			var time = datetime.split(" ")[1].split(":");
 			var tt = "am";
@@ -217,8 +227,18 @@ $.extend(website, {
 			}
 		
 			var hhmm = [time[0], time[1]].join(":")
-		
-			return [date[2], date[1], date[0]].join("-") + " " + hhmm + " " + tt;
+			
+			// DD, d MM, yy hh:mm tt
+			
+			var dateobj = new Date(date[0], date[1], date[2])
+			
+			return repl("%(day)s, %(date)s %(month)s, %(year)s %(time)s", {
+				day: get_day(dateobj.getDay()),
+				date: date[2],
+				month: get_month(dateobj.getMonth()),
+				year: date[0],
+				time: hhmm + " " + tt
+			})
 		}
 		$(".event-timestamp").each(function() {
 			$(this).html(format($(this).attr("data-timestamp")));
@@ -348,7 +368,7 @@ $.extend(website, {
 
 		opts.$control.datetimepicker({
 			timeFormat: "hh:mm tt",
-			dateFormat: 'dd-mm-yy',
+			dateFormat: 'DD, d MM, yy',
 			changeYear: true,
 			yearRange: "-70Y:+10Y",
 			stepMinute: 5,
@@ -385,7 +405,7 @@ $.extend(website, {
 			if (typeof(datetime)==="string") {
 				datetime = website.datetimepicker.str_to_obj(datetime);
 			}
-			var date_str = $.datepicker.formatDate("dd-mm-yy", datetime)
+			var date_str = $.datepicker.formatDate("DD, d MM, yy", datetime)
 			var time_str = $.datepicker.formatTime("hh:mm tt", {
 				hour: datetime.getHours(),
 				minute: datetime.getMinutes(),

webnotes/webutils.py

@@ -239,6 +239,9 @@ def scrub_page_name(page_name):
 	if page_name.endswith('.html'):
 		page_name = page_name[:-5]
 		
+	if page_name == "index":
+		page_name = get_home_page()
+		
 	return page_name
 
 def insert_traceback(data):