Sfoglia il codice sorgente

Improve filtering by tags

We now filter when a url is entered in the address bar, and when the
browser navigation is used.  In addition, clicking on the currently
selected tag resets the filter.
Lucas Stadler 10 anni fa
parent
commit
544c9991b6
1 ha cambiato i file con 38 aggiunte e 5 eliminazioni
  1. 38 5
      go/blog/blog.go

+ 38 - 5
go/blog/blog.go

200
	fmt.Fprintf(out, `
200
	fmt.Fprintf(out, `
201
201
202
	<script>
202
	<script>
203
	var currentFilter = null;
204
205
	window.addEventListener("hashchange", function(ev) {
206
		filterFromURL(new URL(ev.newURL));
207
	});
208
203
	window.addEventListener("click", function(ev) {
209
	window.addEventListener("click", function(ev) {
204
		if (ev.target.classList.contains("tag-link")) {
210
		if (ev.target.classList.contains("tag-link")) {
205
			if (ev.target.href == "") {
211
			if (ev.target.href == "") {
206
				return;
212
				return;
207
			}
213
			}
208
214
209
			var u = new URL(ev.target.href);
210
			if (!u.hash.startsWith("#tag:")) {
211
				return;
215
			var tag = tagFromURL(new URL(ev.target.href));
216
			if (currentFilter == tag) {
217
				clearFilter();
218
			} else {
219
				filterTag(tag);
212
			}
220
			}
213
			var tag = u.hash.substr(5);
221
		}
222
	});
223
224
	function filterFromURL(u) {
225
		var tag = tagFromURL(u);
226
		if (tag == null) {
227
			clearFilter();
228
		} else {
214
			filterTag(tag);
229
			filterTag(tag);
215
		}
230
		}
216
	})
231
	}
232
233
	function tagFromURL(u) {
234
		if (!u.hash.startsWith("#tag:")) {
235
			return null;
236
		}
237
		return u.hash.substr(5);
238
	}
217
239
218
	function filterTag(tag) {
240
	function filterTag(tag) {
241
		currentFilter = tag;
242
219
		var articles = document.querySelectorAll("article");
243
		var articles = document.querySelectorAll("article");
220
		for (var i = 0; i < articles.length; i++) {
244
		for (var i = 0; i < articles.length; i++) {
221
			var article = articles[i];
245
			var article = articles[i];
234
			}
258
			}
235
		}
259
		}
236
	}
260
	}
261
262
	function clearFilter() {
263
		var articles = document.querySelectorAll("article.does-not-match");
264
		for (var i = 0; i < articles.length; i++) {
265
			articles[i].classList.remove("does-not-match");
266
		}
267
268
		currentFilter = null;
269
	}
237
	</script>`)
270
	</script>`)
238
	fmt.Fprintf(out, "\n</body>\n</html>\n")
271
	fmt.Fprintf(out, "\n</body>\n</html>\n")
239
	out.Close()
272
	out.Close()