Implement details view for BiG CZ

src/mmw/js/src/data_catalog/templates/resultDetails.html

@@ -0,0 +1,35 @@
+<div class="result">
+    <div class="result-detail-header">
+        <h2>
+            {{ title }}
+        </h2>
+        <button type="button" class="close" aria-label="Close">
+            <span aria-hidden="true">×</span>
+        </button>
+        <a href="#"><i class="fa fa-search-plus"></i> Zoom to extent</a>
+    </div>
+    <hr>
+    {% if author %}
+        <p>
+            <i class="fa fa-user"></i>{{ author }}
+        </p>
+    {% endif %}
+    {% if activeCatalog != 'cuahsi' %}
+        <p>
+            <i class="fa fa-calendar"></i> {{ created_at|toDateFullYear }}
+        </p>
+    {% else %}
+        {% if begin_date == end_date %}
+            <p>
+                <i class="fa fa-calendar"></i> {{ begin_date|toDateWithoutTime }}
+            </p>
+        {% else %}
+            <p>
+                <i class="fa fa-calendar"></i> {{ begin_date|toDateWithoutTime }} - {{ end_date|toDateWithoutTime }}
+            </p>
+        {% endif %}
+    {% endif %}
+    <p>
+        {{ description }}
+    </p>
+</div>

src/mmw/js/src/data_catalog/templates/window.html

@@ -1,3 +1,5 @@
+<div class="result-details-region"></div>
+
 <h2 class="data-catalog-title">
     Data sources
 </h2>

src/mmw/js/src/data_catalog/views.js

@@ -17,6 +17,7 @@ var $ = require('jquery'),
     tabPanelTmpl = require('./templates/tabPanel.html'),
     headerTmpl = require('./templates/header.html'),
     windowTmpl = require('./templates/window.html'),
+    resultDetailsTmpl = require('./templates/resultDetails.html'),
     resultsWindowTmpl = require('./templates/resultsWindow.html');
 
 var ENTER_KEYCODE = 13,
@@ -77,12 +78,15 @@ var DataCatalogWindow = Marionette.LayoutView.extend({
     regions: {
         formRegion: '.form-region',
         panelsRegion: '.tab-panels-region',
-        contentsRegion: '.tab-contents-region'
+        contentsRegion: '.tab-contents-region',
+        detailsRegion: '.result-details-region'
     },
 
     childEvents: {
         'search': 'doSearch',
-        'selectCatalog': 'onSelectCatalog'
+        'selectCatalog': 'onSelectCatalog',
+        'selectResult': 'onSelectResult',
+        'closeDetails': 'onCloseDetails'
     },
 
     collectionEvents: {
@@ -96,7 +100,7 @@ var DataCatalogWindow = Marionette.LayoutView.extend({
         this.panelsRegion.show(new TabPanelsView({
             collection: this.collection
         }));
-        this.contentsRegion.show(new TabContentsView({
+        this.showChildView('contentsRegion', new TabContentsView({
             collection: this.collection
         }));
     },
@@ -119,6 +123,19 @@ var DataCatalogWindow = Marionette.LayoutView.extend({
         this.doSearch();
     },
 
+    onSelectResult: function(childView, result) {
+        var activeCatalog = this.getActiveCatalog();
+
+        this.detailsRegion.show(new ResultDetailsView({
+            model: result,
+            activeCatalog: activeCatalog.id
+        }));
+    },
+
+    onCloseDetails: function() {
+        this.detailsRegion.empty();
+    },
+
     doSearch: function() {
         var catalog = this.getActiveCatalog(),
             query = this.model.get('query'),
@@ -303,6 +320,14 @@ var TabContentView = Marionette.LayoutView.extend({
         'change:active': 'toggleActiveClass',
     },
 
+    childEvents: {
+        'selectResult': 'handleChildSelectResult'
+    },
+
+    handleChildSelectResult: function(view, result) {
+        this.triggerMethod('selectResult', result);
+    },
+
     onShow: function() {
         this.toggleActiveClass();
 
@@ -363,6 +388,11 @@ var ResultView = Marionette.ItemView.extend({
     events: {
         'mouseover': 'highlightResult',
         'mouseout': 'unHighlightResult',
+        'click': 'selectResult'
+    },
+
+    selectResult: function() {
+        this.triggerMethod('selectResult', this.model);
     },
 
     highlightResult: function() {
@@ -383,11 +413,45 @@ var ResultsView = Marionette.CollectionView.extend({
         };
     },
 
+    childEvents: {
+        'selectResult': 'handleChildSelectResult'
+    },
+
+    handleChildSelectResult: function(view, result) {
+        this.triggerMethod('selectResult', result);
+    },
+
     modelEvents: {
         'sync error': 'render'
     }
 });
 
+var ResultDetailsView = Marionette.ItemView.extend({
+    template: resultDetailsTmpl,
+
+    ui: {
+        closeDetails: '.close'
+    },
+
+    events: {
+        'click @ui.closeDetails': 'closeDetails'
+    },
+
+    initialize: function(options) {
+        this.activeCatalog = options.activeCatalog;
+    },
+
+    templateHelpers: function() {
+        return {
+            activeCatalog: this.activeCatalog
+        };
+    },
+
+    closeDetails: function() {
+        this.triggerMethod('closeDetails');
+    }
+});
+
 var PagerView = Marionette.ItemView.extend({
     template: pagerTmpl,
 

src/mmw/sass/pages/_data-catalog.scss

@@ -15,6 +15,31 @@
         position: relative;
     }
 
+    .result-details-region {
+        .result {
+            padding: 10px;
+            bottom: 0px;
+            top: 0px;
+            width: 100%;
+            position: absolute;
+            z-index: 10000;
+            background-color: #fff;
+            overflow: auto;
+
+            .result-detail-header {
+              h2 {
+                  display: inline-block;
+                  margin: 4px 0;
+                  max-width: 95%;
+              }
+
+              a {
+                display: block;
+              }
+            }
+        }
+    }
+
     .result-region {
         height: auto !important;
         width: auto !important;