Commit 380398887f6e6d74be6649f9d2fc1b4db6e58593

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.
  • Diff rendering mode:
  • inline
  • side by side

swtr/static/css/swtmaker.css

50 margin-bottom: 10px;50 margin-bottom: 10px;
51}51}
5252
53.ocd-item.col-md-4 {
54 width: 32.3333%;
55}
53.ocd-item {56.ocd-item {
54 padding-bottom: 4px;57 padding-bottom: 4px;
55 border: 1px solid #ddd;58 border: 1px solid #ddd;
56 border-radius: 4px;59 border-radius: 4px;
57 margin-bottom: 20px;
60 margin: 0 5px 20px 5px;
58 text-align: center;61 text-align: center;
62}
63.ocd-item-cover {
64 position: absolute;
65 border: 1px solid #ddd;
66 box-shadow: 1px 1px 3px #ccc;
67 width: 100%;
68 padding: 12px;
69 background: #fff;
70 height: 60px;
71 margin-left: -15px;
72}
73.ocd-item .text{
74 margin-top: 3px;
59}75}
6076
61.thumb-image {77.thumb-image {

swtr/static/js/main.js

466 el: $('#ocd-view'),466 el: $('#ocd-view'),
467 events: {467 events: {
468 'click .ocd-item a': 'onImgClick',468 'click .ocd-item a': 'onImgClick',
469 'click .ocd-item-cover .close': 'onCoverCloseClick',
470 'click .ocd-item-mark': 'onMarkClick',
469 'click .pager li': 'onPagerClick'471 'click .pager li': 'onPagerClick'
470 },472 },
471 initialize: function(opts) {473 initialize: function(opts) {
……
477 this.page = 0;477 this.page = 0;
478 this.item_template = _.template($('#ocd-item-template').html());478 this.item_template = _.template($('#ocd-item-template').html());
479 this.base_template = _.template($('#ocd-view-base-template').html());479 this.base_template = _.template($('#ocd-view-base-template').html());
480 this.cover_template = _.template($('#ocd-item-cover-template').html());
480 this.render();481 this.render();
481 },482 },
482 render: function() {483 render: function() {
……
498 $row_el.append(this.item_template({498 $row_el.append(this.item_template({
499 title: item._source.title,499 title: item._source.title,
500 media_url: item._source.media_urls[0].url,500 media_url: item._source.media_urls[0].url,
501 authors: item._source.authors
501 authors: item._source.authors,
502 description: item._source.description
502 }));503 }));
503 }, this);504 }, this);
504 this.resolveOCDURLs();505 this.resolveOCDURLs();
……
561 return false;561 return false;
562 },562 },
563 onImgClick: function(event) {563 onImgClick: function(event) {
564 //console.log('onImgClick');
564 event.preventDefault();565 event.preventDefault();
565 // TODO: init the image anno566 // TODO: init the image anno
566 var url = $(event.currentTarget).find('img').attr('src');
567 this.highlightImg(event);
567 //swtr.appView.loadURL(url, 'image');568 //swtr.appView.loadURL(url, 'image');
568 return false;569 return false;
570 },
571 highlightImg: function(event) {
572 //console.log('highlightImg');
573 var elem = $(event.currentTarget).parent().parent();
574 // if .ocd-item-cover exists return
575 if(elem.find('.ocd-item-cover').length) {
576 return;
577 }
578 //console.log(elem);
579 elem.prepend(this.cover_template());
580 $(elem.find('.ocd-item-cover')[0]).slideDown('slow');
581 },
582 onCoverCloseClick: function(event) {
583 var elem = $(event.currentTarget).parent();
584 elem.slideUp('slow');
585 elem.remove();
586 },
587 onMarkClick: function(event) {
588 var url = $(event.currentTarget).parent().parent().
589 find('img').attr('src');
590 console.log('load image anno', url);
569 },591 },
570 search: function(data, cb) {592 search: function(data, cb) {
571 swtr.appView.$overlay.show();593 swtr.appView.$overlay.show();

swtr/templates/index.html

262 <img src="" class="responsive thumb-image">262 <img src="" class="responsive thumb-image">
263 </a>263 </a>
264 </div>264 </div>
265 <div>Authors: <%= authors %> </div>
265 <div class="text">Authors: <%= authors %> </div>
266 <div class="text">Description: <%= description %> </div>
267 </div>
268 </script>
269 <script type="text/template" id="ocd-item-cover-template">
270 <div class="ocd-item-cover">
271 Mark and load this image to annotate
272 <button class="btn btn-xs btn-default pull-left ocd-item-mark">Mark</button>
273 <a class="close">&times;</a>
274 <div class="clearfix"></div>
266 </div>275 </div>
267 </script>276 </script>
268 <script type="text/template" id="filter-users">277 <script type="text/template" id="filter-users">