namespaced css classes

css/styles.css

@@ -1,9 +1,7 @@
-body {
-	font-size: 12px;
-}
 
-.control {
+.cb-control {
 	color: #fff;
+	font-size: 12px;
 	background-color: #111;
 	margin: 5px;
 	padding: 8px;
@@ -11,7 +9,7 @@ body {
 	position: fixed !important;
 }
 
-.control.floating {
+.cb-control.floating {
 	border: 2px solid #444;
 	border-radius: 4px;
 	-webkit-border-radius: 4px;
@@ -21,7 +19,7 @@ body {
 	-moz-box-shadow: 0 0 4px #000;
 }
 
-.control.navigate {
+.cb-control.cb-navigate {
 	top: 0;
 	margin: 0;
 	cursor: pointer;
@@ -30,17 +28,17 @@ body {
 	opacity: 0;
 }
 
-.control.navigate:hover {
+.cb-control.cb-navigate:hover {
 	display: block;
 	opacity: 1;
 }
 
-.control.navigate.left {
+.cb-control.cb-navigate.left {
 	left: 0;
 	background-image: url(../img/left.png);
 }
 
-.control.navigate.right {
+.cb-control.cb-navigate.right {
 	right: 0;
 	background-image: url(../img/right.png);
 }
@@ -49,12 +47,12 @@ body {
 	cursor: move;
 }
 
-#color {
+#cb-color {
 	width: 200px;
 	height: 150px;
 }
 
-#status {
+#cb-status {
 	top: 0;
 	right: 0;
 }

lib/ComicBook.js

@@ -4,7 +4,6 @@
 	TODOs:
 
 	Fo sho:
-		- namespace all css / ids
 		- page controls - button to init color controls, zoom, current page indicator
 		- improve prev/next buttons, only show them when they can possibly work (not at beginning/end)
 		- an "alert" control for any error messages / notifications ( & remove any instances of alert() )
@@ -49,7 +48,7 @@ function merge(a, b) {
  * Exception class. Always throw an instance of this when throwing exceptions.
  *
  * @param {String} type
- * @param {mixed} object
+ * @param {Object} object
  * @returns {ComicBookException}
  */
 function ComicBookException(type, object) {
@@ -100,7 +99,7 @@ function ComicBook(id, srcs, opts) {
 
 	/**
 	 * enables the back button
-	 **/
+	 */
 	function checkHash() {
 
 		var hash = getHash();
@@ -183,8 +182,8 @@ function ComicBook(id, srcs, opts) {
 		 * TODO: split out brightness / contrast controls?
 		 */
 		color: $(document.createElement("div"))
-			.attr("id", "color")
+			.attr("id", "cb-control-color")
-			.addClass("control floating")
+			.addClass("cb-control floating")
 			.append("<label>brightness</label>")
 			.append($("<div id='brightness'></div>").slider({
 				value: 0,
@@ -230,13 +229,13 @@ function ComicBook(id, srcs, opts) {
 		navigation: {
 
 			left: $(document.createElement("div"))
-				.addClass("control navigate left")
+				.addClass("cb-control cb-navigate left")
 				.click(function(e){
 					ComicBook.prototype.drawPrevPage();
 				}),
 
 			right: $(document.createElement("div"))
-				.addClass("control navigate right")
+				.addClass("cb-control cb-navigate right")
 				.click(function(e) {
 					ComicBook.prototype.drawNextPage();
 				})
@@ -349,8 +348,8 @@ function ComicBook(id, srcs, opts) {
 		//if (i - buffer >= 0) { i = i - buffer; } // start loading from the first requested page - buffer
 
 		// show load status panel
-		if ($("#status").length === 0) {
+		if ($("#cb-status").length === 0) {
-			$(canvas).after('<div class="floating control" id="status"><p></p></div>');
+			$(canvas).after('<div class="floating cb-control" id="cb-status"><p></p></div>');
 		}
 
 		// I am using recursion instead of a forEach loop so that the next image is
@@ -359,7 +358,7 @@ function ComicBook(id, srcs, opts) {
 
 			var page = new Image();
 
-			$("#status p").text("loading page " + (i + 1) + " of " + no_pages);
+			$("#cb-status p").text("loading page " + (i + 1) + " of " + no_pages);
 
 			page.src = srcs[i];
 
@@ -383,7 +382,7 @@ function ComicBook(id, srcs, opts) {
 
 				// start rendering the comic when the buffer level has been reached (FIXME: buggy, fails if trying to load the last couple of pages)
 				if (loaded[loaded.length-1] === pointer + buffer) { ComicBook.prototype.drawPage(); }
-				if (loaded.length === no_pages) { $("#status").fadeOut(150).remove(); }
+				if (loaded.length === no_pages) { $("#cb-status").fadeOut(150).remove(); }
 			};
 		}
 
@@ -494,7 +493,7 @@ function ComicBook(id, srcs, opts) {
 		if (is_double_page_spread) { options.displayMode = "double"; }
 
 		// resize navigation controls
-		$(".control.navigate").height(window.innerHeight);
+		$(".cb-control.cb-navigate").height(window.innerHeight);
 
 		// user callback
 		if (typeof options.afterDrawPage === "function") {