From 380398887f6e6d74be6649f9d2fc1b4db6e58593 Mon Sep 17 00:00:00 2001
From: Anon Ray <rayanon004@gmail.com>
Date: Sat, 30 Aug 2014 22:23:26 +0530
Subject: [PATCH] Improve and integrate the search component

  - Minor code changes to search component to work with the new routing.
  - New mark feature when clicking on resulting image in OCD search.
---
 swtr/static/css/swtmaker.css |   18 +++++++++++++++++-
 swtr/static/js/main.js       |   30 ++++++++++++++++++++++++++++--
 swtr/templates/index.html    |   11 ++++++++++-
 3 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/swtr/static/css/swtmaker.css b/swtr/static/css/swtmaker.css
index 9656fcd..a0103a4 100644
--- a/swtr/static/css/swtmaker.css
+++ b/swtr/static/css/swtmaker.css
@@ -50,13 +50,29 @@ body {
   margin-bottom: 10px;
 }
 
+.ocd-item.col-md-4 {
+  width: 32.3333%;
+}
 .ocd-item {
   padding-bottom: 4px;
   border: 1px solid #ddd;
   border-radius: 4px;
-  margin-bottom: 20px;
+  margin: 0 5px 20px 5px;
   text-align: center;
 }
+.ocd-item-cover {
+  position: absolute;
+  border: 1px solid #ddd;
+  box-shadow: 1px 1px 3px #ccc;
+  width: 100%;
+  padding: 12px;
+  background: #fff;
+  height: 60px;
+  margin-left: -15px;
+}
+.ocd-item .text{
+  margin-top: 3px;
+}
 
 .thumb-image {
   background-position: center center;
diff --git a/swtr/static/js/main.js b/swtr/static/js/main.js
index c328079..af38a85 100644
--- a/swtr/static/js/main.js
+++ b/swtr/static/js/main.js
@@ -466,6 +466,8 @@
     el: $('#ocd-view'),
     events: {
       'click .ocd-item a': 'onImgClick',
+      'click .ocd-item-cover .close': 'onCoverCloseClick',
+      'click .ocd-item-mark': 'onMarkClick',
       'click .pager li': 'onPagerClick'
     },
     initialize: function(opts) {
@@ -475,6 +477,7 @@
       this.page = 0;
       this.item_template = _.template($('#ocd-item-template').html());
       this.base_template = _.template($('#ocd-view-base-template').html());
+      this.cover_template = _.template($('#ocd-item-cover-template').html());
       this.render();
     },
     render: function() {
@@ -495,7 +498,8 @@
         $row_el.append(this.item_template({
           title: item._source.title,
           media_url: item._source.media_urls[0].url,
-          authors: item._source.authors
+          authors: item._source.authors,
+          description: item._source.description
         }));
       }, this);
       this.resolveOCDURLs();
@@ -557,12 +561,34 @@
       return false;
     },
     onImgClick: function(event) {
+      //console.log('onImgClick');
       event.preventDefault();
       // TODO: init the image anno
-      var url = $(event.currentTarget).find('img').attr('src');
+      this.highlightImg(event);
       //swtr.appView.loadURL(url, 'image');
       return false;
     },
+    highlightImg: function(event) {
+      //console.log('highlightImg');
+      var elem = $(event.currentTarget).parent().parent();
+      // if .ocd-item-cover exists return
+      if(elem.find('.ocd-item-cover').length) {
+        return;
+      }
+      //console.log(elem);
+      elem.prepend(this.cover_template());
+      $(elem.find('.ocd-item-cover')[0]).slideDown('slow');
+    },
+    onCoverCloseClick: function(event) {
+      var elem = $(event.currentTarget).parent();
+      elem.slideUp('slow');
+      elem.remove();
+    },
+    onMarkClick: function(event) {
+      var url = $(event.currentTarget).parent().parent().
+        find('img').attr('src');
+      console.log('load image anno', url);
+    },
     search: function(data, cb) {
       swtr.appView.$overlay.show();
       var self = this;
diff --git a/swtr/templates/index.html b/swtr/templates/index.html
index 474c5f9..d7d6418 100644
--- a/swtr/templates/index.html
+++ b/swtr/templates/index.html
@@ -262,7 +262,16 @@
             <img src="" class="responsive thumb-image">
           </a>
         </div>
-        <div>Authors: <%= authors %> </div>
+        <div class="text">Authors: <%= authors %> </div>
+        <div class="text">Description: <%= description %> </div>
+      </div>
+    </script>
+    <script type="text/template" id="ocd-item-cover-template">
+      <div class="ocd-item-cover">
+        Mark and load this image to annotate
+        <button class="btn btn-xs btn-default pull-left ocd-item-mark">Mark</button>
+        <a class="close">&times;</a>
+        <div class="clearfix"></div>
       </div>
     </script>
     <script type="text/template" id="filter-users">
-- 
1.7.10.4