Skip to content

Commit a76635a

Browse files
yubowenokyubowenok
authored
Merge pull request #9 from yubowenok/pr
display warning message for mobile devices
2 parents 9e55c96 + 3ade6eb commit a76635a

File tree

12 files changed

+63
-8
lines changed

12 files changed

+63
-8
lines changed

‎bower.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"moment": "~2.10.6",
3232
"select2": "~4.0.0",
3333
"underscore": "~1.8.2",
34-
"js-cookie": "~2.1.0"
34+
"js-cookie": "~2.1.0",
35+
"jquery-ui-touch-punch": "*"
3536
}
3637
}

‎doc.html

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<title>Visflow Documentation</title>
6+
<meta name="description" content="VisFlow is a web-based visualization framework for tabular data with a subset flow model.">
67
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
78

89
<!-- jquery -->

‎index.html

+5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<title>VisFlow</title>
6+
<meta name="description" content="VisFlow is a web-based visualization framework for tabular data with a subset flow model.">
67
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
78

89
<!-- npm components -->
@@ -39,6 +40,10 @@
3940
<script type="text/javascript" src="bower_components/crypto-js/crypto-js.js"></script>
4041
<script type="text/javascript" src="bower_components/moment/min/moment.min.js"></script>
4142
<script type="text/javascript" src="bower_components/js-cookie/src/js.cookie.js"></script>
43+
<script type="text/javascript" src="bower_components/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
44+
<script type="text/javascript"><!-- isMobile -->
45+
!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);
46+
</script>
4247

4348
<!-- visflow src -->
4449
<script type="text/javascript" src="dist/visflow.js"></script>

‎index.php

+1-4
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,6 @@ function isMobile(){
1919
return false;
2020
}
2121

22-
if (isMobile())
23-
echo '<h1>Sorry, but we currently do not support mobile devices.</h1>';
24-
else
25-
echo file_get_contents('index.html');
22+
echo file_get_contents('index.html');
2623

2724
?>

‎src/externs/is-mobile.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
* @fileoverview isMobile externs.
3+
*/
4+
5+
6+
/** @const */
7+
var isMobile;
8+
9+
10+
/**
11+
* @type {boolean}
12+
*/
13+
isMobile.prototype.phone;
14+
15+
16+
/**
17+
* @type {boolean}
18+
*/
19+
isMobile.prototype.tablet;

‎src/node/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -595,8 +595,10 @@ visflow.Node.prototype.initContextMenu = function() {
595595
minimize.children('.glyphicon')
596596
.addClass('glyphicon-resize-full')
597597
.removeClass('glyphicon-resize-small');
598-
minimize.children('span')
598+
minimize.children('span:first')
599599
.text('Maximize');
600+
minimize.children('span:last')
601+
.text('(M)');
600602
}
601603
if (visflow.flow.visMode) {
602604
minimize.hide();

‎src/panel/node-panel/index.js

+5
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ visflow.nodePanel.isOpen = false;
2727
visflow.nodePanel.TEMPLATE_ = './dist/html/panel/node-panel/node-panel.html';
2828
/** @private @const {number} */
2929
visflow.nodePanel.TRANSITION_DURATION_ = 300;
30+
/** @private @const {number} */
31+
visflow.nodePanel.INIT_DELAY_ = 300;
3032

3133
/**
3234
* Initializes the node panel and its interaction.
@@ -45,6 +47,9 @@ visflow.nodePanel.init = function() {
4547
visflow.nodePanel.hoverArea_.mouseenter(showPanel);
4648

4749
visflow.nodePanel.initUpdateHandlers_();
50+
// Set correct panel with on system init
51+
visflow.nodePanel.show_();
52+
setTimeout(visflow.nodePanel.hide_, visflow.nodePanel.INIT_DELAY_);
4853
};
4954

5055
/**

‎src/panel/node-panel/node-panel.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
#node-panel {
44
bottom: 25px;
55
height: auto;
6-
left: -22px;
76
position: fixed;
87
top: 50px;
98
z-index: 102;
@@ -35,6 +34,8 @@
3534
background-color: $trans-gray-230-75;
3635
border: 1px solid $gray-c;
3736
border-radius: 0 0 4px;
37+
height: 100%;
38+
overflow-y: scroll;
3839
padding: 10px;
3940
top: 0;
4041
}

‎src/visflow.js

+9
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,15 @@ visflow.init = function() {
2929
/** @private @const {number} */
3030
visflow.MESSAGE_DURATION_ = 2000;
3131

32+
33+
/**
34+
* Tests if the client is using mobile device.
35+
* @return {boolean}
36+
*/
37+
visflow.isMobile = function() {
38+
return isMobile.phone || isMobile.tablet;
39+
};
40+
3241
/**
3342
* Displays a user visible error message.
3443
* @param {...} args

‎src/welcome/welcome.html

+4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
<h4 class="modal-title">Welcome to VisFlow</h4>
44
</div>
55
<div class="modal-body">
6+
<div id="is-mobile">
7+
Some interactions currently may not behave correctly on mobile devices.
8+
Desktop/laptop is recommended for VisFlow.
9+
</div>
610
<div class="section">
711
VisFlow is a web-based framework for interactive visualization of tabular data, based on the
812
<a href="./doc.html#flow-diagram">subset flow model</a>.

‎src/welcome/welcome.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,27 @@ visflow.welcome = {};
88
/** @private @const {string} */
99
visflow.welcome.TEMPLATE_ = './dist/html/welcome/welcome.html';
1010

11+
1112
/**
1213
* Launches the system welcome.
1314
*/
1415
visflow.welcome.init = function() {
15-
if (!visflow.user.loggedIn()) {
16+
if (!visflow.user.loggedIn() || visflow.isMobile()) {
1617
visflow.dialog.create({
1718
template: visflow.welcome.TEMPLATE_,
1819
complete: visflow.welcome.initWelcome_
1920
});
2021
}
2122
};
2223

24+
2325
/**
2426
* Initializes the welcome dialog.
2527
* @param {!jQuery} dialog
2628
* @private
2729
*/
2830
visflow.welcome.initWelcome_ = function(dialog) {
31+
dialog.find('#is-mobile').toggle(visflow.isMobile());
2932
dialog.find('#get-started')
3033
.click(function() {
3134
visflow.documentation();

‎src/welcome/welcome.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@import 'src/common/colors';
2+
3+
.visflow {
4+
#is-mobile {
5+
color: $red;
6+
font-weight: bold;
7+
}
8+
}

0 commit comments

Comments
 (0)