Просмотр исходного кода

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 лет назад: 9
Родитель
Сommit
544c9991b6
1 измененных файлов с 38 добавлено и 5 удалено
  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()