comparison static/links.js @ 21:8008ec2fd763

fix up link page reloading. tried davisjs; may not need it Ignore-this: d0021609f019f0734e779a61e3e73b62
author Drew Perttula <drewp@bigasterisk.com>
date Thu, 11 Jul 2013 00:45:55 -0700
parents a8887fb93676
children fa55f4439977
comparison
equal deleted inserted replaced
20:a8887fb93676 21:8008ec2fd763
1
2 $("#filterTag").focus(); 1 $("#filterTag").focus();
3 2
4 var model = { 3 var model = {
5 filterTags: ko.observableArray(currentFilter()) 4 filterTags: ko.observableArray(tagsFromWindowLocation())
6 }; 5 };
7 6
8 function currentFilter() { 7 function tagsFromWindowLocation() {
9 var p = window.location.pathname; 8 var p = window.location.pathname;
10 var comps = p.split("/"); 9 var comps = p.split("/");
11 if (toRoot == ".") { 10 if (toRoot == ".") {
12 return []; 11 return [];
13 } else { 12 } else {
14 return (comps[comps.length-1] || "").split("+"); 13 return (comps[comps.length-1] || "").replace("%20", "+").split("+");
15 } 14 }
16 } 15 }
17 16
18 function toggleTag(tag) { 17 function toggleTag(tag) {
19 var selected = currentFilter(); 18 var selected = model.filterTags();
20 19
21 if (selected.indexOf(tag) == -1) { 20 if (selected.indexOf(tag) == -1) {
22 selected.push(tag); 21 selected.push(tag);
23 } else { 22 } else {
24 selected.splice(selected.indexOf(tag), 1); 23 selected.splice(selected.indexOf(tag), 1);
25 } 24 }
26 setPageTags(selected); 25 model.filterTags(selected);
27 } 26 }
28 27
29 function setPageTags(tags) { 28 function initSpecialLinkBehavior() {
30 29 // clicking tag links doesn't go to them (they're not
31 var newPath = window.location.pathname; 30 // user-specific); it toggles their presence in our page's current
32 if (toRoot == ".") { 31 // filter list
33 newPath += "/"; 32 $(document).on("click", "a.tag", function (ev) {
34 } else { 33 var tag = $(this).text();
35 newPath = newPath.replace( 34 toggleTag(tag);
36 /(.*\/)[^\/]*$/, "$1") 35 ev.stopPropagation()
37 } 36 ev.preventDefault()
38 console.log("user root", newPath); 37 return false;
39 if (tags.length) { 38 });
40 newPath += tags.join("+") 39 }
41 } else { 40
42 newPath = newPath.substr(0, newPath.length - 1); 41 var linklist = null;
43 } 42 // unsure how to use toRoot- can it change?
44 console.log("done", newPath); 43 $.getJSON("/href/templates", function (result) {
45 44 linklist = result.linklist;
46 window.location.pathname = newPath; 45 });
46
47 function initUrlSync(model) {
48 // tag changes push url history; and url edits freshen the page
49
50 ko.computed(function () {
51 var tags = model.filterTags();
52 var newPath = window.location.pathname;
53 console.log("currently", newPath, toRoot);
54 if (toRoot == ".") {
55 newPath += "/";
56 toRoot = "..";
57 } else {
58 newPath = newPath.replace(
59 /(.*\/)[^\/]*$/, "$1")
60 }
61 console.log("user root", newPath);
62 if (tags.length) {
63 newPath += tags.join("+")
64 } else {
65 newPath = newPath.substr(0, newPath.length - 1);
66 toRoot = ".";
67 }
68
69 changePage(newPath);
70 });
71
72 function changePage(newPath) {
73 console.log("changePage", newPath);
74 if (window.location.pathname != newPath) {
75 window.history.pushState({}, "", newPath);
76
77 function updateLinklist(fullPath) {
78 var t0 = +new Date();
79 if (linklist === null) {
80 console.log("too soon- templates aren't loaded");
81 return;
82 }
83 $(".linklist").text("Loading...");
84 $.getJSON(fullPath + ".json", function (result) {
85 var t1 = +new Date();
86 var rendered = Mustache.render(linklist, result)
87 var t2 = +new Date();
88 $(".linklist").html(rendered);
89 var t3 = +new Date();
90 $(".stats").text(JSON.stringify({
91 "getMs": t1 - t0,
92 "mustacheRenderMs": t2 - t1,
93 "setHtmlMs": t3 - t2
94 }));
95 });
96 }
97 updateLinklist(newPath);
98 }
99 }
47 } 100 }
48 101
49 function backspaceLastTag() { 102 function initFilterTag(elem, model) {
50 var p = window.location.pathname; 103 // sync the entry box and the model
51 var comps = p.split("/"); 104
52 var selected = (comps[comps.length-1] || "").split("+"); 105 elem.change(function () {
53 if (selected.length == 0) { 106 var tags = $(this).val().split(",");
54 return; 107 model.filterTags(tags);
55 } 108 return false;
56 toggleTag(selected[selected.length-1]); 109 });
110
111 var filterCompleteWords = "";
112 elem.select2({
113 allowClear: true,
114 multiple: true,
115 tokenSeparators: [' ', ','],
116 query: function (opts) {
117 $.ajax({
118 url: toRoot + "/tags",
119 data: {user: user, have: opts.element.val()},
120 success: function (data) {
121 opts.callback({results: data.tags});
122 }
123 });
124 },
125 change: function (ev) {
126 console.log("ch", ev.val);
127 },
128 initSelection: function (element, callback) {
129 var data = [];
130 $(element.val().split(",")).each(function () {
131 if (this != "") {
132 data.push({id: this, text: this});
133 }
134 });
135 callback(data);
136 }
137 });
138 ko.computed(function () {
139 elem.select2("val", model.filterTags());
140 });
57 } 141 }
58 142
59 $("a.tag").click(function () { 143 initFilterTag($("#filterTag"), model);
60 var tag = $(this).text(); 144 initSpecialLinkBehavior();
61 toggleTag(tag); 145 initUrlSync(model);
62 return false;
63 });
64
65 $("#filterTag").change(function () {
66 var tags = $(this).val().split(",");
67 setPageTags(tags);
68 return false;
69 });
70
71 var filterCompleteWords = "";
72 $("#filterTag").select2({
73 allowClear: true,
74 multiple: true,
75 tokenSeparators: [' ', ','],
76 query: function (opts) {
77 $.ajax({
78 url: toRoot + "/tags",
79 data: {user: user, have: opts.element.val()},
80 success: function (data) {
81 opts.callback({results: data.tags});
82 }
83 });
84 },
85 change: function (ev) {
86 console.log("ch", ev.val);
87 },
88 initSelection: function (element, callback) {
89 var data = [];
90 $(element.val().split(",")).each(function () {
91 if (this != "") {
92 data.push({id: this, text: this});
93 }
94 });
95 callback(data);
96 }
97 });
98 $("#filterTag").select2("val", model.filterTags());
99 146
100 ko.applyBindings(model); 147 ko.applyBindings(model);