Markup for sorting

Ap0ught-Old · Feb 11, 2011 · bb7f8f4 · bb7f8f4
1 parent ba149db
commit bb7f8f4
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 15 deletions.
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -74,6 +74,20 @@
 
         <div id="overviewControls" class="toggleElement">
 
+          <span>OVERVIEW SORT BY</span>
+
+          <ul>
+            <li id="dateSortButton" class="active">DATE</li>
+            <li id="likesSortButton" class="inactive">LIKES</li>
+
+            <li>
+              <form id="searchForm">
+                <input id="searchField" type="text" tabindex="1" />
+                <input id="searchSubmit" type="submit" />
+              </form>
+            </li>
+          </ul>
+
           <a id="overviewPreviousButton" class="editorButton">Previous Page</a>
           <a id="overviewNextButton" class="editorButton">Next Page</a>
 

diff --git a/public/images/editor-text-background.png b/public/images/editor-text-background.png
diff --git a/public/javascripts/marblerun/main.js b/public/javascripts/marblerun/main.js
@@ -98,19 +98,6 @@ var setBuildTweetButton = function() {
   Element.writeAttribute($('twitterButton'), {href: 'http://twitter.com/share?' + Object.toQueryString(parameters)});
 };
 
-// var loadTrack = function(trackID) {
-//   if (localTracks[trackID]) {
-//     contentLoader.parseResponse({
-//       responseJSON: {
-//         mode: 'show',
-//         track: localTracks[trackID]
-//       }
-//     }, true);
-//   } else {
-//     contentLoader.loadContent('/tracks/' + trackID, true);
-//   }
-// };
-
 var initializeHTMLInterface = (function() {
 
   var myScope = this;
@@ -200,6 +187,42 @@ var initializeHTMLInterface = (function() {
     }
   }); 
 
+  $('dateSortButton').observe('click', function(event) {
+    $('dateSortButton').addClassName("active");
+    $('dateSortButton').removeClassName("inactive");
+
+    $('likesSortButton').removeClassName("active");
+    $('likesSortButton').addClassName("inactive");
+
+    document.getElementById('searchField').value = "";
+  }); 
+
+  $('likesSortButton').observe('click', function(event) {
+    $('dateSortButton').removeClassName("active");
+    $('dateSortButton').addClassName("inactive");
+
+    $('likesSortButton').addClassName("active");
+    $('likesSortButton').removeClassName("inactive");
+
+    document.getElementById('searchField').value = "";
+  }); 
+
+  document.getElementById('searchForm').onsubmit = function() {
+    $('dateSortButton').removeClassName("active");
+    $('likesSortButton').removeClassName("active");
+
+    $('dateSortButton').addClassName("inactive");
+    $('likesSortButton').addClassName("inactive");
+
+    var url = 'tracks/?search=';
+    url += document.getElementById('searchField').value;
+    url += '&page=1';
+
+    contentLoader(url, true);
+
+    return false;
+  }
+
 }());
 
 var setSwitchMode = function(mode) {

diff --git a/public/stylesheets/master.css b/public/stylesheets/master.css
@@ -558,20 +558,58 @@ a.editorButton {
 }
 
 #overviewControls {
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-size: 9px;
 	position: absolute;
 	left: 338px;
-	top: 140px;
+	top: 40px;
 	padding-left: 35px;
 }
 
+#overviewControls span {
+	font-weight: bold;
+}
+
+#overviewControls ul {
+	margin: 10px 10px 40px 10px;
+}
+
+#overviewControls li {
+	margin: 7px;
+	list-style: square;
+}
+
+#overviewControls li.active {
+	color: #800000;
+}
+
+#overviewControls li.inactive {
+	cursor: pointer;
+}
+
+#searchSubmit {
+	display: none;
+}
+
+#searchField {
+	width: 89px;
+	height: 19px;
+	font-size: 9px;
+	font-family: Helvetica, Arial, sans-serif;
+	font-weight: bold;
+	color: #333;
+	background: url(../images/editor-text-background.png) no-repeat transparent;
+	border: none;
+	padding: 0 3px;
+}
+
 #overviewControls div {
 	float: left;
 	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 	font-size: 11px;
 	font-weight: bold;
 	margin: 8px 0 0 10px;
 	color: #363535;
-
 }
 
 #overviewGrid {