]> git.quilime.com - visual-archive.git/commitdiff
git.quilime.com / visual-archive.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 9ef59fa)
Added Facets
authorGabriel Dunne <gdunne@quilime.com>
Sat, 23 Mar 2013 19:45:10 +0000 (12:45 -0700)
committerGabriel Dunne <gdunne@quilime.com>
Sat, 23 Mar 2013 19:45:10 +0000 (12:45 -0700)
public/css/style.css patch | blob | history
public/js/script.js patch | blob | history
routes/index.js patch | blob | history
views/index.ejs patch | blob | history

diff --git a/public/css/style.css b/public/css/style.css
index 0d7885bde77cf453a04813e156583a4acf5f6ef6..5f631150d0e3ddc126a9d8c64d97330d8cd58a6d 100644 (file)
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -12,10 +12,12 @@ ul, li {
     margin:0;
 }
 a {
-    color:#ff0;
+    color:#ff5;
+    text-decoration: none;
 }
 ul.thumbs {
     margin-top:35px;
+    margin-left:120px;
     text-align:center;
 }
 ul.thumbs li {
@@ -49,16 +51,32 @@ ul.thumbs li img {
 #subcontent .container ul {
     padding:20px;
 }
+#subcontent .container ul.thumbs {
+    margin:0;
+}
 #subcontent .container li {
     display:inline-block;
+    background:#222;
     margin:5px;
 }
 #filter {
-    position:fixed;
-    top:5px;
-    right:5px;
     color:#eee;
     background:#777;
     border:1px solid #aaa;
     padding:5px;
+    width:100px;
+}
+#filter-elem {
+    position: absolute;
+    left:5px;
+    top:5px;
+}
+#facets {
+    position:absolute;
+    left:5px;
+    top:40px;
+}
+#clear_filter {
+    padding:0.5em;
+
 }
diff --git a/public/js/script.js b/public/js/script.js
index 2fb9dabdf7b4f52af528df55f8f183f14a8e8dd4..9acceaf5532f267f8ace7d4b2dc366aed133be4f 100644 (file)
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -1,25 +1,40 @@
 var extended_json = {};
 
+var on_filter_change = function() {
+  var query = $('#filter').val().toLowerCase();
+  var d = jQuery.grep(extended_json.clips, function(clip, i) {
+    if (clip.id.toLowerCase().indexOf(query) >= 0 ||
+       (clip.description && clip.description.toLowerCase().indexOf(query) >= 0))
+      return true;
+    if (clip.subject)
+      for (var j = 0; j < clip.subject.length; j++)
+        if (clip.subject[j].toLowerCase().indexOf(query) >= 0)
+          return true;
+    return false;
+  });
+  $('.thumbs li').hide();
+  for (var i = 0; i < d.length; i++) {
+    $('.thumbs li#' + d[i].id).show();
+  }
+}
+
 $(document).ready(function() {
 
-  $('#filter').hide();
-  $('#filter').keyup(function() {
-    var query = this.value.toLowerCase();
-    var d = jQuery.grep(extended_json.clips, function(clip, i) {
-      if (clip.id.toLowerCase().indexOf(query) >= 0 ||
-         (clip.description && clip.description.toLowerCase().indexOf(query) >= 0))
-        return true;
-      if (clip.subject)
-        for (var j = 0; j < clip.subject.length; j++)
-          if (clip.subject[j].toLowerCase().indexOf(query) >= 0)
-            return true;
-      return false;
+  $('#facets a').each(function(key, elem) {
+
+    $(elem).click(function() {
+      $('#filter').val($(elem).text());
+      on_filter_change();
     });
-    $('.thumbs li').hide();
-    for (var i = 0; i < d.length; i++) {
-      $('.thumbs li#' + d[i].id).show();
-    }
+  })
+
+  $('#clear_filter').click(function(){
+    $('#filter').val("");
+    on_filter_change();
   });
+  $('#filter').hide();
+  $('#filter').keyup(on_filter_change);
+
 
   $.getJSON('data/prelinger_extended-search.json', function(data) {
     extended_json = data;
diff --git a/routes/index.js b/routes/index.js
index b56c6e9d0eb179e2343fd7f412677b0bc4e51e5b..019ea6ea51097cd2fcec0122ab5a2d907edd5f9b 100644 (file)
--- a/routes/index.js
+++ b/routes/index.js
@@ -1,9 +1,9 @@
 var fs        = require("fs")
-,   prelinger = require('../prelinger.json');
+,   prelinger = require('../prelinger_extended-search.json');
 
 var LIMIT = false;
 exports.index = function(req, res) {
-  var count = 10;
+  var count = 50;
   var clips = [];
   for( var i = 0; i < prelinger.clips.length; i++) {
     if (LIMIT) { count--; if (count == 0) { break; } }
diff --git a/views/index.ejs b/views/index.ejs
index 470b0af63f74b01ee4c4a3bbf5c510f3082569a4..75c89743ebca80e17e02f40191c20d32cce635a9 100644 (file)
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -7,7 +7,63 @@
     <script src="js/script.js"></script>
   </head>
   <body>
-    <input type="text" id="filter" />
+
+  <div id="filter-elem">
+    Filter <input type="text" id="filter" /> <a href="#" id="clear_filter">&times;</a>
+  </div>
+
+<div id="facets">
+<ul>
+
+<li>WHAT</li>
+<li><a href="#">Advertising</a></li>
+<li><a href="#">Automobiles</a></li>
+<li><a href="#">Car Culture</a></li>
+<li><a href="#">Children</a></li>
+<li><a href="#">Consumerism</a></li>
+<li><a href="#">Drug</a></li>
+<li><a href="#">Gender Roles</a></li>
+<li><a href="#">Health</a></li>
+<li><a href="#">Medicine</a></li>
+<li><a href="#">Perception</a></li>
+<li><a href="#">Psychology</a></li>
+<li><a href="#">Recreation</a></li>
+<li><a href="#">Safety</a></li>
+<li><a href="#">Social Guidance </a></li>
+<li><a href="#">Teenagers</a></li>
+<li><a href="#">World's Fair</a></li>
+
+<br />
+<li>WHERE</li>
+<li><a href="#">California</a></li>
+<li><a href="#">Detroit</a></li>
+<li><a href="#">New York</a></li>
+<li><a href="#">Philadelphia</a></li>
+<li><a href="#">San Francisco</a></li>
+<li><a href="#">South Dakota</a></li>
+
+<br />
+<li>WHEN</li>
+<li><a href="#">1920</a></li>
+<li><a href="#">1930</a></li>
+<li><a href="#">1940</a></li>
+<li><a href="#">1950</a></li>
+<li><a href="#">1960</a></li>
+<li><a href="#">1970</a></li>
+
+<br />
+<li>FILM TYPE</li>
+<li><a href="#">Amateur</a></li>
+<li><a href="#">Animatation</a></li>
+<li><a href="#">Home Movie</a></li>
+<li><a href="#">Newsreel</a></li>
+<li><a href="#">Soundie</a></li>
+<li><a href="#">Surrealism</a></li>
+<li><a href="#">Training</a></li>
+<li><a href="#">Travelogue</a></li>
+</ul>
+</div>
+
     <ul class="thumbs">
       <% for(var i = 0; i < clips.length; i++) { %>
         <li id="<%= clips[i].id %>" data-thumbs-url="<%= clips[i].thumbnails_url %>">
@@ -17,6 +73,7 @@
         </li>
       <% } %>
     </ul>
+
     <div id="subcontent"><div class="container"></div></div>
     <div id="scrim" />
   </body>
Unnamed repository; edit this file 'description' to name the repository.