Strategy switch: cards, section headers

tagslice.css

@@ -1,73 +1,73 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto');
+@import url('https://fonts.googleapis.com/css?family=Roboto:400');
 
 :root {
 	/* Highly approximate color names from our pallette */
-	--orange: rgb(255,153,0);
-	--black: rgb(66,66,66);
 	--white: rgb(255,255,255);
-	--lightgrey: rgb(233,233,233);
-	--darkgrey: rgb(188,188,188);
-	--blue: rgb(50,153,187);
+	--lightgrey: rgb(238,238,238);
+	--darkgrey: rgb(81,81,81);
+	--blue: rgb(0,180,255);
 }
 
-outer {
+tagList {
 	display: flex;
+	flex-direction: column;
+	align-items: center;
+	overflow: scroll;
 
 	width: 100%;
 	height: 100%;
 
 	background-color: var(--white);
 	font-family: 'Roboto';
-
-	flex-direction: row;
-}
-
-taglist {
-	display: flex;
-
-	border-right: 2px solid var(--orange);
-
-	flex-shrink: 0;
-
-	flex-direction: column;
-}
-
-tagsection {
-	display: flex;
-
-	padding: 5px;
-
-	border-bottom: 1px solid var(--orange);
-
-	flex-direction: column;
 }
 
 tag {
+	display: flex;
+	flex-direction: column;
+
+	flex-shrink: 0;
+	width: 100%;
+	max-width: 50rem;
+
+	margin-bottom: 2rem;
+}
+
+tagName {
 	display: block;
 
-	padding: 3px;
+	color: var(--darkgrey);
+	font-size: x-large;
 
-	border: 1px solid var(--darkgrey);
-	border-radius: 8px;
+	margin-bottom: 0.5rem;
+}
 
-	background-color: var(--lightgrey);
+card {
+	display: flex;
+	flex-direction: column;
+
+	border: 1px solid var(--lightgrey);
+	border-radius: 0.25rem;
+	padding: 0.75rem;
+	margin: 0.5rem;
+}
+
+cardTitle {
 	color: var(--blue);
-	font-family: 'Roboto';
-	font-size: small;
-	text-align: center;
-
-	cursor: move;
-	user-select: none;
+	font-size: large;
+	cursor: pointer;
 }
 
-tag.placeholder {
-	opacity: 0.7;
+cardTitle::selection {
+	background: transparent;
 }
 
-objectlist {
+cardText {
+	display: none;
+
+	color: var(--darkgrey);
+	margin-top: 0.5rem;
+}
+
+card.expanded cardText {
 	display: block;
-
-	padding: 5px;
-
-	flex-grow: 1;
 }

tagslice.js

@@ -3,6 +3,8 @@
 class TagSlice {
 	constructor(container) {
 		this.buildDom_(container);
+		addEventListener('hashchange', () => this.parseHash_());
+		this.parseHash_();
 		this.loadJson_();
 	}
 
@@ -15,33 +17,33 @@ class TagSlice {
 		return elem;
 	}
 
+	createTag_(container, tagName) {
+		let elem = this.createElement_(container, 'tag');
+		this.createElement_(elem, 'tagName', tagName);
+		return elem;
+	}
+
+	createCard_(container, object) {
+		let elem = this.createElement_(container, 'card');
+		let title = this.createElement_(elem, 'cardTitle', object['title']);
+		title.addEventListener('click', () => {
+			elem.classList.toggle('expanded');
+		});
+		this.createElement_(elem, 'cardText', object['description']);
+	}
+
+	parseHash_() {
+		this.tags_ = [];
+		let hash = window.location.hash.substr(1);
+		for (let tag of hash.split(',')) {
+			this.tags_.push(decodeURIComponent(tag));
+		}
+		document.title = this.tags_.join(', ');
+		this.maybeRender_();
+	}
+
 	buildDom_(container) {
-		let outer = this.createElement_(container, 'outer');
-		this.buildTagList_(outer);
-		this.buildObjectList_(outer);
-	}
-
-	buildTagList_(container) {
-		let taglist = this.createElement_(container, 'taglist');
-		this.tagInclude_ = this.buildTagSection_(taglist, 'include');
-		this.tagExclude_ = this.buildTagSection_(taglist, 'exclude');
-		this.tagSortAsc_ = this.buildTagSection_(taglist, 'sort ⇣')
-		this.tagSortDesc_ = this.buildTagSection_(taglist, 'sort ⇡')
-	}
-
-	buildTagSection_(container, title) {
-		let tagsection = this.createElement_(container, 'tagsection');
-		this.buildTag_(tagsection, title).classList.add('placeholder');
-		return tagsection;
-	}
-
-	buildObjectList_(container) {
-		let objectlist = document.createElement('objectlist');
-		container.appendChild(objectlist);
-	}
-
-	buildTag_(container, name) {
-		return this.createElement_(container, 'tag', name);
+		this.tagList_ = this.createElement_(container, 'tagList');
 	}
 
 	loadJson_() {
@@ -55,6 +57,22 @@ class TagSlice {
 	}
 
 	onJsonLoad_(response) {
-		console.log('foo', response);
+		this.objects_ = response;
+		this.maybeRender_();
+	}
+
+	maybeRender_() {
+		if (!this.tags_ || !this.objects_) {
+			return;
+		}
+		this.tagList_.innerHTML = '';
+		for (let tag of this.tags_) {
+			let elem = this.createTag_(this.tagList_, tag);
+			for (let object of this.objects_) {
+				if (object['tags'].includes(tag)) {
+					this.createCard_(elem, object);
+				}
+			}
+		}
 	}
 }