Get show-complete status from a cookie.

step07/Todo/public/javascripts/js.cookie.js

@@ -0,0 +1,145 @@
+/*!
+ * JavaScript Cookie v2.1.0
+ * https://github.com/js-cookie/js-cookie
+ *
+ * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
+ * Released under the MIT license
+ */
+(function (factory) {
+	if (typeof define === 'function' && define.amd) {
+		define(factory);
+	} else if (typeof exports === 'object') {
+		module.exports = factory();
+	} else {
+		var _OldCookies = window.Cookies;
+		var api = window.Cookies = factory();
+		api.noConflict = function () {
+			window.Cookies = _OldCookies;
+			return api;
+		};
+	}
+}(function () {
+	function extend () {
+		var i = 0;
+		var result = {};
+		for (; i < arguments.length; i++) {
+			var attributes = arguments[ i ];
+			for (var key in attributes) {
+				result[key] = attributes[key];
+			}
+		}
+		return result;
+	}
+
+	function init (converter) {
+		function api (key, value, attributes) {
+			var result;
+
+			// Write
+
+			if (arguments.length > 1) {
+				attributes = extend({
+					path: '/'
+				}, api.defaults, attributes);
+
+				if (typeof attributes.expires === 'number') {
+					var expires = new Date();
+					expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5);
+					attributes.expires = expires;
+				}
+
+				try {
+					result = JSON.stringify(value);
+					if (/^[\{\[]/.test(result)) {
+						value = result;
+					}
+				} catch (e) {}
+
+				if (!converter.write) {
+					value = encodeURIComponent(String(value))
+						.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
+				} else {
+					value = converter.write(value, key);
+				}
+
+				key = encodeURIComponent(String(key));
+				key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent);
+				key = key.replace(/[\(\)]/g, escape);
+
+				return (document.cookie = [
+					key, '=', value,
+					attributes.expires && '; expires=' + attributes.expires.toUTCString(), // use expires attribute, max-age is not supported by IE
+					attributes.path    && '; path=' + attributes.path,
+					attributes.domain  && '; domain=' + attributes.domain,
+					attributes.secure ? '; secure' : ''
+				].join(''));
+			}
+
+			// Read
+
+			if (!key) {
+				result = {};
+			}
+
+			// To prevent the for loop in the first place assign an empty array
+			// in case there are no cookies at all. Also prevents odd result when
+			// calling "get()"
+			var cookies = document.cookie ? document.cookie.split('; ') : [];
+			var rdecode = /(%[0-9A-Z]{2})+/g;
+			var i = 0;
+
+			for (; i < cookies.length; i++) {
+				var parts = cookies[i].split('=');
+				var name = parts[0].replace(rdecode, decodeURIComponent);
+				var cookie = parts.slice(1).join('=');
+
+				if (cookie.charAt(0) === '"') {
+					cookie = cookie.slice(1, -1);
+				}
+
+				try {
+					cookie = converter.read ?
+						converter.read(cookie, name) : converter(cookie, name) ||
+						cookie.replace(rdecode, decodeURIComponent);
+
+					if (this.json) {
+						try {
+							cookie = JSON.parse(cookie);
+						} catch (e) {}
+					}
+
+					if (key === name) {
+						result = cookie;
+						break;
+					}
+
+					if (!key) {
+						result[name] = cookie;
+					}
+				} catch (e) {}
+			}
+
+			return result;
+		}
+
+		api.get = api.set = api;
+		api.getJSON = function () {
+			return api.apply({
+				json: true
+			}, [].slice.call(arguments));
+		};
+		api.defaults = {};
+
+		api.remove = function (key, attributes) {
+			api(key, '', extend(attributes, {
+				expires: -1
+			}));
+		};
+
+		api.withConverter = init;
+
+		return api;
+	}
+
+	return init(function () {});
+}));

step07/Todo/views/index.tt

@@ -13,7 +13,8 @@ var items = [
 <% END -%>
 ];
 </script>
-  <p>Completed items: <input type="checkbox" name="show-complete" checked></p>
+  <p>Completed items: <input type="checkbox" name="show-complete"
+    data-on-text="Show" data-off-text="Hide" data-size="small"></p>
   <div id="list">
   </div>
 </div>
@@ -29,22 +30,36 @@ var items = [
 </script>
 
 <script>
+function generate_list(div, list_items) {
+  var template = $('#item-template').html();
+  div.append(Mustache.render(template, { items: list_items }));
+}
+
 function show_list(state) {
   if (state) {
     $(".panel-success").show(1000);
   } else {
     $(".panel-success").hide(1000);
   }
 }
-$( document ).ready(function() {
-  $("[name='show-complete']").bootstrapSwitch();
-  $("[name='show-complete']").bootstrapSwitch('onText', 'Show');
-  $("[name='show-complete']").bootstrapSwitch('offText', 'Hide');
-  $('input[name="show-complete"]').on('switchChange.bootstrapSwitch', function(event, state) {
-    show_list(state);
+
+function set_up_switch(the_switch, curr_state) {
+  // the_switch.bootstrapSwitch();
+  the_switch.on('switchChange.bootstrapSwitch', function(event, new_state) {
+    show_list(new_state);
+    Cookies.set('show-complete', new_state);
   });
-  var template = $('#item-template').html();
-  var list = Mustache.render(template, { items: items });
-  $('#list').append(list);
+  the_switch.bootstrapSwitch('state', curr_state);
+}
+
+$( document ).ready(function() {
+  list_div = $("#list");
+
+  list_div.hide();  
+  generate_list(list_div, items);
+  cook_state = Cookies.get('show-complete') == 'true';
+  set_up_switch($("[name='show-complete']"), cook_state);
+  show_list(cook_state);
+  list_div.show();
 });
 </script>

step07/Todo/views/layouts/main.tt

@@ -27,6 +27,7 @@
     <script src="/javascripts/bootstrap.min.js"></script> 
     <script src="/javascripts/bootstrap-switch.min.js"></script>
     <script src="/javascripts/mustache.min.js"></script> 
+    <script src="/javascripts/js.cookie.js"></script> 
 
     <!-- Fixed navbar -->
     <nav class="navbar navbar-inverse navbar-fixed-top">