for #113, show popover

hds-lab · Mar 9, 2015 · 2a08236 · 2a08236
1 parent 3c4fdca
commit 2a08236
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 9 deletions.
diff --git a/msgvis/static/SparQs/controllers.js b/msgvis/static/SparQs/controllers.js
@@ -142,10 +142,26 @@
             SampleQuestions.load(Selection.dimensions());
         };
 
-        $scope.get_authors = function(question){
-
+        $scope.get_authors = function(authors){
+            var author_list = authors.split("\n");
+            var last_names = [];
+            author_list.forEach(function(d){
+                var l = d.split(" ");
+                last_names.push(l.pop());
+            });
+            if (last_names.length >= 3)
+                return last_names[0] + " et al.";
+            return last_names.join(" & ");
         };
 
+        $scope.get_full_source_info = function(source){
+            var template = "<div class='source title'><strong>" + source.title + "</strong> (" + source.year + ")</div>";
+            template += "<span class='source authors'>" + (source.authors.split('\n').join(", ")) + ".</span> ";
+            if ( source.venue )
+                template += "<span class='source venue'>Published in <em>" + source.venue + "</em></span>";
+            return template;
+        }
+
         $scope.$watch('questions.list', function(){
             //When the question list changes, we are going to manually (jQuery)
             //update the token classes so that they end up the right color.

diff --git a/msgvis/static/SparQs/services/questions_service.js b/msgvis/static/SparQs/services/questions_service.js
@@ -5,8 +5,8 @@
 
     //A service for loading sample questions.
     module.factory('SparQs.services.SampleQuestions', [
-        '$http', '$sce', 'djangoUrl', 'SparQs.services.Dimensions',
-        function sampleQuestionsFactory($http, $sce, djangoUrl, Dimensions) {
+        '$http', '$sce', '$timeout', 'djangoUrl', 'SparQs.services.Dimensions',
+        function sampleQuestionsFactory($http, $sce, $timeout, djangoUrl, Dimensions) {
 
             var apiUrl = djangoUrl.reverse('research-questions');
 
@@ -90,6 +90,9 @@
                     $http.post(apiUrl, request)
                         .success(function (data) {
                             self.list = data.questions.map(function (qdata) {
+                                $timeout(function() {
+                                    $('[data-toggle="popover"]').popover({html: 'true'})
+                                }, 10);
                                 return new Question(qdata);
                             });
                         });

diff --git a/msgvis/static/sparqs.less b/msgvis/static/sparqs.less
@@ -325,7 +325,7 @@ body {
 }
 
 
-@questions-row-height: 170px;
+@questions-row-height: 180px;
 @dropzone-buffer: 20px;
 @secondary-dropzone-width: 150px;
 @primary-dropzone-height: 80px;
@@ -518,6 +518,13 @@ body {
 #questions {
     height: @questions-row-height;
     top: 0;
+    z-index: 1000;
+
+    .popover{
+        z-index: 10000;
+        max-width: 1000px;
+        color: black;
+    }
 
     .questions-list {
         padding-left: 22px;
@@ -536,7 +543,20 @@ body {
             .tag-primary.tag-secondary {
                 color: #BB8DEA;
             }
-
+            .source-popover:hover{
+                cursor: pointer;
+            }
+            .source-popover:focus{
+                outline: none;
+            }
+            .source{
+                div{
+                  display: block;
+                }
+                .title{
+                    font-weight: bold;
+                }
+            }
 
         }
     }

diff --git a/msgvis/templates/explorer.html b/msgvis/templates/explorer.html
@@ -50,7 +50,6 @@
 
     angular.module('SparQs.bootstrap')
         .constant('SparQs.bootstrap.dataset', 1);
-
 </script>
 {% endblock %}
 
@@ -105,9 +104,20 @@
                 <div id="questions" class="row app-panel"
                      ng-controller="SparQs.controllers.SampleQuestionController" ng-class="selection.dimensions_class()">
                     <div class="heading">From the literature...</div>
+
+
                     <ul class="questions-list heading-body">
-                        <li ng-repeat="question in questions.list">
-                            <span ng-bind-html="question.text"></span> ({$ get_authors(question.source.authors) $}, {$ question.source.year $})
+                        <li ng-repeat="question in questions.list track by $index">
+                            <div  class="source-popover"
+                                  tabindex="0" role="button" data-toggle="popover"
+                                  data-trigger="focus"
+                                  data-placement="{$ $index < 3 ? 'bottom' : 'top' $}"
+                                  data-content="{$ get_full_source_info(question.source) $}">
+                                <span ng-bind-html="question.text"></span>
+                                <span class="citation">({$ get_authors(question.source.authors) $} {$ question.source.year $})</span>
+                            </div>
+
+
                             <!--Dimensions: <span ng-repeat="dimension in question.dimensions">
                                 <span ng-class="dimension.token_class()" ng-bind="dimension.name"></span>
                             </span>-->