Merge pull request #9 from yubowenok/pr

display warning message for mobile devices
yubowenok · Feb 24, 2017 · a76635a · a76635a
2 parents 9e55c96 + 3ade6eb
commit a76635a
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 8 deletions.
diff --git a/bower.json b/bower.json
@@ -31,6 +31,7 @@
     "moment": "~2.10.6",
     "select2": "~4.0.0",
     "underscore": "~1.8.2",
-    "js-cookie": "~2.1.0"
+    "js-cookie": "~2.1.0",
+    "jquery-ui-touch-punch": "*"
   }
 }
diff --git a/doc.html b/doc.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>Visflow Documentation</title>
+  <meta name="description" content="VisFlow is a web-based visualization framework for tabular data with a subset flow model.">
   <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
 
   <!-- jquery -->

diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>VisFlow</title>
+  <meta name="description" content="VisFlow is a web-based visualization framework for tabular data with a subset flow model.">
   <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
 
   <!-- npm components -->
@@ -39,6 +40,10 @@
   <script type="text/javascript" src="bower_components/crypto-js/crypto-js.js"></script>
   <script type="text/javascript" src="bower_components/moment/min/moment.min.js"></script>
   <script type="text/javascript" src="bower_components/js-cookie/src/js.cookie.js"></script>
+  <script type="text/javascript" src="bower_components/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
+  <script type="text/javascript"><!-- isMobile -->
+    !function(a){var b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.*\bAndroid\b)(?=.*\bMobile\b)/i,f=/Android/i,g=/(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i,h=/(?=.*\bAndroid\b)(?=.*\b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)\b)/i,i=/Windows Phone/i,j=/(?=.*\bWindows\b)(?=.*\bARM\b)/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/(CriOS|Chrome)(?=.*\bMobile\b)/i,o=/(?=.*\bFirefox\b)(?=.*\bMobile\b)/i,p=new RegExp("(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)","i"),q=function(a,b){return a.test(b)},r=function(a){var r=a||navigator.userAgent,s=r.split("[FBAN");if("undefined"!=typeof s[1]&&(r=s[0]),s=r.split("Twitter"),"undefined"!=typeof s[1]&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q(b,r)&&q(d,r),device:q(b,r)||q(c,r)||q(d,r)},this.amazon={phone:q(g,r),tablet:!q(g,r)&&q(h,r),device:q(g,r)||q(h,r)},this.android={phone:q(g,r)||q(e,r),tablet:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),device:q(g,r)||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),tablet:q(j,r),device:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),opera:q(m,r),firefox:q(o,r),chrome:q(n,r),device:q(k,r)||q(l,r)||q(m,r)||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this.windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet||this.android.tablet||this.windows.tablet,"undefined"==typeof window)return this},s=function(){var a=new r;return a.Class=r,a};"undefined"!=typeof module&&module.exports&&"undefined"==typeof window?module.exports=r:"undefined"!=typeof module&&module.exports&&"undefined"!=typeof window?module.exports=s():"function"==typeof define&&define.amd?define("isMobile",[],a.isMobile=s()):a.isMobile=s()}(this);
+  </script>
 
   <!-- visflow src -->
   <script type="text/javascript" src="dist/visflow.js"></script>

diff --git a/index.php b/index.php
@@ -19,9 +19,6 @@ function isMobile(){
   return false;
 }
 
-if (isMobile())
-  echo '<h1>Sorry, but we currently do not support mobile devices.</h1>';
-else
-  echo file_get_contents('index.html');
+echo file_get_contents('index.html');
 
 ?>
diff --git a/src/externs/is-mobile.js b/src/externs/is-mobile.js
@@ -0,0 +1,19 @@
+/**
+ * @fileoverview isMobile externs.
+ */
+
+
+/** @const */
+var isMobile;
+
+
+/**
+ * @type {boolean}
+ */
+isMobile.prototype.phone;
+
+
+/**
+ * @type {boolean}
+ */
+isMobile.prototype.tablet;
diff --git a/src/node/index.js b/src/node/index.js
@@ -595,8 +595,10 @@ visflow.Node.prototype.initContextMenu = function() {
         minimize.children('.glyphicon')
           .addClass('glyphicon-resize-full')
           .removeClass('glyphicon-resize-small');
-        minimize.children('span')
+        minimize.children('span:first')
           .text('Maximize');
+        minimize.children('span:last')
+          .text('(M)');
       }
       if (visflow.flow.visMode) {
         minimize.hide();

diff --git a/src/panel/node-panel/index.js b/src/panel/node-panel/index.js
@@ -27,6 +27,8 @@ visflow.nodePanel.isOpen = false;
 visflow.nodePanel.TEMPLATE_ = './dist/html/panel/node-panel/node-panel.html';
 /** @private @const {number} */
 visflow.nodePanel.TRANSITION_DURATION_ = 300;
+/** @private @const {number} */
+visflow.nodePanel.INIT_DELAY_ = 300;
 
 /**
  * Initializes the node panel and its interaction.
@@ -45,6 +47,9 @@ visflow.nodePanel.init = function() {
   visflow.nodePanel.hoverArea_.mouseenter(showPanel);
 
   visflow.nodePanel.initUpdateHandlers_();
+  // Set correct panel with on system init
+  visflow.nodePanel.show_();
+  setTimeout(visflow.nodePanel.hide_, visflow.nodePanel.INIT_DELAY_);
 };
 
 /**

diff --git a/src/panel/node-panel/node-panel.scss b/src/panel/node-panel/node-panel.scss
@@ -3,7 +3,6 @@
 #node-panel {
   bottom: 25px;
   height: auto;
-  left: -22px;
   position: fixed;
   top: 50px;
   z-index: 102;
@@ -35,6 +34,8 @@
     background-color: $trans-gray-230-75;
     border: 1px solid $gray-c;
     border-radius: 0 0 4px;
+    height: 100%;
+    overflow-y: scroll;
     padding: 10px;
     top: 0;
   }

diff --git a/src/visflow.js b/src/visflow.js
@@ -29,6 +29,15 @@ visflow.init = function() {
 /** @private @const {number} */
 visflow.MESSAGE_DURATION_ = 2000;
 
+
+/**
+ * Tests if the client is using mobile device.
+ * @return {boolean}
+ */
+visflow.isMobile = function() {
+  return isMobile.phone || isMobile.tablet;
+};
+
 /**
  * Displays a user visible error message.
  * @param {...} args

diff --git a/src/welcome/welcome.html b/src/welcome/welcome.html
@@ -3,6 +3,10 @@
   <h4 class="modal-title">Welcome to VisFlow</h4>
 </div>
 <div class="modal-body">
+  <div id="is-mobile">
+    Some interactions currently may not behave correctly on mobile devices.
+    Desktop/laptop is recommended for VisFlow.
+  </div>
   <div class="section">
     VisFlow is a web-based framework for interactive visualization of tabular data, based on the
     <a href="./doc.html#flow-diagram">subset flow model</a>.

diff --git a/src/welcome/welcome.js b/src/welcome/welcome.js
@@ -8,24 +8,27 @@ visflow.welcome = {};
 /** @private @const {string} */
 visflow.welcome.TEMPLATE_ = './dist/html/welcome/welcome.html';
 
+
 /**
  * Launches the system welcome.
  */
 visflow.welcome.init = function() {
-  if (!visflow.user.loggedIn()) {
+  if (!visflow.user.loggedIn() || visflow.isMobile()) {
     visflow.dialog.create({
       template: visflow.welcome.TEMPLATE_,
       complete: visflow.welcome.initWelcome_
     });
   }
 };
 
+
 /**
  * Initializes the welcome dialog.
  * @param {!jQuery} dialog
  * @private
  */
 visflow.welcome.initWelcome_ = function(dialog) {
+  dialog.find('#is-mobile').toggle(visflow.isMobile());
   dialog.find('#get-started')
     .click(function() {
       visflow.documentation();

diff --git a/src/welcome/welcome.scss b/src/welcome/welcome.scss
@@ -0,0 +1,8 @@
+@import 'src/common/colors';
+
+.visflow {
+  #is-mobile {
+    color: $red;
+    font-weight: bold;
+  }
+}