Browse Source

[notebook][search] Support for fullscreen mode

Enrico Berti 10 years ago
parent
commit
1f615b1

+ 1 - 1
apps/metastore/src/metastore/templates/describe_table.mako

@@ -344,7 +344,7 @@ ${ components.menubar() }
     });
 
     // convert link text to URLs in comment column (Columns tab)
-    hue.text2Url(document.querySelectorAll('.sampleTable td:last-child'));
+    hueUtils.text2Url(document.querySelectorAll('.sampleTable td:last-child'));
 
     $('a[data-toggle="tab"]:eq(0)').click();
 

+ 2 - 2
apps/search/src/search/templates/search.mako

@@ -38,7 +38,7 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 
 <div class="search-bar" data-bind="visible: ! $root.isPlayerMode()">
   <div class="pull-right" style="padding-right:50px">
-    <a class="btn pointer" title="${ _('Player mode') }" rel="tooltip" data-placement="bottom" data-bind="click: function(){ $root.isEditing(false); $root.isPlayerMode(true); }">
+    <a class="btn pointer" title="${ _('Player mode') }" rel="tooltip" data-placement="bottom" data-bind="click: function(){ hueUtils.goFullScreen(); $root.isEditing(false); $root.isPlayerMode(true); }">
       <i class="fa fa-expand"></i>
     </a>
     &nbsp;&nbsp;
@@ -267,7 +267,7 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 </%dashboard:layout_toolbar>
 
 <div class="player-toolbar" data-bind="visible: $root.isPlayerMode">
-  <div class="pull-right pointer" data-bind="visible: $root.isPlayerMode, click: function(){ $root.isPlayerMode(false); }"><i class="fa fa-times"></i></div>
+  <div class="pull-right pointer" data-bind="visible: $root.isPlayerMode, click: function(){ hueUtils.exitFullScreen(); $root.isPlayerMode(false); }"><i class="fa fa-times"></i></div>
   <img src="${ static('desktop/art/icon_hue_48.png') }" />
   <h4 data-bind="text: collection.label"></h4>
   <form class="form-search" data-bind="submit: searchBtn">

+ 33 - 4
desktop/core/src/desktop/static/desktop/js/hue.utils.js

@@ -73,14 +73,14 @@ Array.prototype.diff = function (a) {
  * Add utility methods to the HUE object
 */
 
-(function (hue) {
+(function (hueUtils) {
   'use strict';
 
   /*
    * Convert text to URLs
    * Selector arg can be jQuery or document.querySelectorAll()
   */
-  hue.text2Url = function (selectors) {
+  hueUtils.text2Url = function (selectors) {
     var i = 0,
       len = selectors.length;
 
@@ -112,11 +112,40 @@ Array.prototype.diff = function (a) {
    * then grab the encoded contents back out.
   */
 
-  hue.htmlEncode = function (value){
+  hueUtils.htmlEncode = function (value){
     return $('<div/>').text(value).html();
   };
 
-}(hue = window.hue || {}));
+  hueUtils.goFullScreen = function () {
+    if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
+      if (document.documentElement.requestFullscreen) {
+        document.documentElement.requestFullscreen();
+      } else if (document.documentElement.msRequestFullscreen) {
+        document.documentElement.msRequestFullscreen();
+      } else if (document.documentElement.mozRequestFullScreen) {
+        document.documentElement.mozRequestFullScreen();
+      } else if (document.documentElement.webkitRequestFullscreen) {
+        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+      }
+    }
+  }
+
+  hueUtils.exitFullScreen = function () {
+    if (document.fullscreenElement ||
+        document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      }
+    }
+  }
+
+}(hueUtils = window.hueUtils || {}));
 
 if (!Object.keys) {
 

+ 3 - 3
desktop/core/src/desktop/static/desktop/js/ko.charts.js

@@ -66,7 +66,7 @@
               .height($(element).width())
               .showLabels(true).showLegend(false)
               .tooltipContent(function (key, y, e, graph) {
-                return '<h3>' + hue.htmlEncode(key) + '</h3><p>' + y + '</p>'
+                return '<h3>' + hueUtils.htmlEncode(key) + '</h3><p>' + y + '</p>'
               });
 
           var _d3 = ($(element).find("svg").length > 0) ? d3.select($(element).find("svg")[0]) : d3.select($(element)[0]).append("svg");
@@ -950,7 +950,7 @@
                 })
                 .staggerLabels(true)
                 .tooltipContent(function (key, x, y) {
-                  return '<h3>' + key + '</h3><p>' + y + ' on ' + hue.htmlEncode(x) + '</p>'
+                  return '<h3>' + key + '</h3><p>' + y + ' on ' + hueUtils.htmlEncode(x) + '</p>'
                 });
           }
           else {
@@ -959,7 +959,7 @@
             }
             _chart = nv.models.multiBarWithBrushChart();
             _chart.tooltipContent(function (key, x, y) {
-              return '<h3>' + hue.htmlEncode(key) + '</h3><p>' + y + ' on ' + hue.htmlEncode(x) + '</p>'
+              return '<h3>' + hueUtils.htmlEncode(key) + '</h3><p>' + y + ' on ' + hueUtils.htmlEncode(x) + '</p>'
             });
             if (_datum.length > 0 && _datum[0].values.length > 10) {
               _chart.enableSelection();

+ 1 - 1
desktop/core/src/desktop/templates/home.mako

@@ -381,7 +381,7 @@ ${ commonshare() | n,unicode }
       $.post("/desktop/api/tag/add_tag", {
         name: tag_name
       },function (data) {
-        data.name = hue.htmlEncode(data.name);
+        data.name = hueUtils.htmlEncode(data.name);
         viewModel.createTag(data);
         $("#tagsNew").val("");
         $(document).trigger("info", "${_('Project created')}");

+ 4 - 2
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -131,7 +131,7 @@ ${ require.config() }
 
 <div class="search-bar" data-bind="visible: ! $root.isPlayerMode()">
   <div class="pull-right" style="padding-right:50px">
-    <a class="btn pointer" title="${ _('Player mode') }" rel="tooltip" data-placement="bottom" data-bind="visible: $root.selectedNotebook() && $root.selectedNotebook().snippets().length > 0, click: function(){ $root.isEditing(false); $root.isPlayerMode(true); }" style="display:none">
+    <a class="btn pointer" title="${ _('Player mode') }" rel="tooltip" data-placement="bottom" data-bind="visible: $root.selectedNotebook() && $root.selectedNotebook().snippets().length > 0, click: function(){ hueUtils.goFullScreen(); $root.isEditing(false); $root.isPlayerMode(true); }" style="display:none">
       <i class="fa fa-expand"></i>
     </a>
     &nbsp;&nbsp;
@@ -212,7 +212,7 @@ ${ require.config() }
 </div>
 
 <div class="player-toolbar" data-bind="visible: $root.isPlayerMode()" style="display: none;">
-  <div class="pull-right pointer" data-bind="click: function(){ $root.isPlayerMode(false); }"><i class="fa fa-times"></i></div>
+  <div class="pull-right pointer" data-bind="click: function(){ hueUtils.exitFullScreen(); $root.isPlayerMode(false); }"><i class="fa fa-times"></i></div>
   <img src="${ static('desktop/art/icon_hue_48.png') }" />
   <!-- ko if: $root.selectedNotebook() -->
   <h4 data-bind="text: $root.selectedNotebook().name"></h4>
@@ -1645,6 +1645,8 @@ ${ require.config() }
       });
     }
 
+
+
     $(document).ready(function () {
       viewModel = new EditorViewModel(${ notebooks_json | n,unicode }, VIEW_MODEL_OPTIONS);
       ko.applyBindings(viewModel);