Mercurial > code > home > repos > href
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); |