#4 - Add some sort of marker/reminder

added toggle functionality
glaubinix · Oct 2, 2013 · 57b2b87 · 57b2b87
1 parent 7b67d84
commit 57b2b87
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 13 deletions.
diff --git a/css/main.css b/css/main.css
@@ -101,4 +101,17 @@ h3 {
     background: #ff69b4 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path fill='white' d='M10.000 14.000L15.290 17.281L13.804 11.236L18.560 7.219L12.351 6.764L10.000 1.000L7.649 6.764L1.440 7.219L6.196 11.236L4.710 17.281L10.000 14.000'/></svg>") center center no-repeat;
     border-radius: 10px;
     margin: 0 5px -3px 0;
+}
+
+.talk .star-button {
+    display: inline-block;
+    border-radius: 5px;
+    padding: 1px 5px;
+    color: #fff;
+    background-color: #444;
+    font-weight: bold;
+}
+
+.talk.starred .star-button {
+    background-color: #ff69b4;
 }
diff --git a/js/main.js b/js/main.js
@@ -37,7 +37,7 @@
 					day_string += '<div class="talk" data-talk-id="' + talk_id + '">';
 					day_string += '<h3 class="talk-headline">' + talk.speaker + ' - ' +  talk.topic + '</h3>';
 					day_string += '<div>Location: ' + talk.location + '</div>';
-					day_string += '<div id="' + talk_id + '" class="description">' +talk.description + '</div>';
+					day_string += '<div id="' + talk_id + '" class="description">' +talk.description + '<div><span class="star-button"></span></div></div>';
 					day_string += '</div>';
 				}
 			}
@@ -101,6 +101,18 @@
 				toggleClass(document.getElementById(talk_id), 'hidden');
 			});
 		});
+
+        applyForSelector('star-button', function(element) {
+            var talk_element = element.parentNode.parentNode.parentNode;
+
+            element.innerText = (hasClass(talk_element, 'starred') ? 'unstar' : 'star');
+
+            element.addEventListener('click', function(event) {
+                event.stopPropagation();
+                toggleClass(talk_element, 'starred');
+                element.innerText = (hasClass(talk_element, 'starred') ? 'unstar' : 'star');
+            });
+        });
 	};
 
 	var selectTab = function (day) {
@@ -118,13 +130,14 @@
 		}
 	};
 
-	var addClass = function(element, css_class) {
-		var current_css_class = element.getAttribute('class').split(' ');
-		if (current_css_class.indexOf(css_class) === -1) {
-			current_css_class.push(css_class);
-		}
+    var hasClass = function(element, css_class) {
+        return (element.getAttribute('class').split(' ').indexOf(css_class) != -1);
+    };
 
-		element.setAttribute('class', current_css_class.join(' '));
+	var addClass = function(element, css_class) {
+        if (!hasClass(element, css_class)) {
+            element.setAttribute('class', element.getAttribute('class') + ' ' + css_class);
+        }
 	};
 
 	var removeClass = function(element, css_class) {
@@ -138,12 +151,11 @@
 	};
 
 	var toggleClass = function(element, css_class) {
-		var current_css_class = element.getAttribute('class').split(' ');
-		if (current_css_class.indexOf(css_class) === -1) {
-			addClass(element, css_class);
-		} else {
-			removeClass(element, css_class);
-		}
+        if (hasClass(element, css_class)) {
+            removeClass(element, css_class);
+        } else {
+            addClass(element, css_class);
+        }
 	};
 
 	if (window.localStorage) {