Skip to content

Commit 14396ce

Browse files
LidaronLidaron
committed
implement global control
1 parent c651253 commit 14396ce

File tree

7 files changed

+107
-36
lines changed

7 files changed

+107
-36
lines changed

‎earthlapse-hci/modes-story.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@
6565

6666
.earthlapse-stories-explain {
6767
position: absolute;
68-
right: 50px;
69-
top: 30px;
68+
right: 40px;
69+
top: 40px;
7070
max-width: 1000px;
7171
width: 50%;
7272
text-align: left;

‎earthlapse-hci/modes-story.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,8 @@
77

88
function bindPrimaryNav() {
99
// Button: Back to menu
10-
var $backToMenu = $screen.find(".earthlapse-modes-homebutton");
11-
$backToMenu.on("click", function(e) {
12-
e.preventDefault();
10+
EarthlapseUI.GlobalControl.bindAction("home", function () {
11+
if (EarthlapseUI.Modes.getCurrentMode() !== "story") { return; }
1312
EarthlapseUI.Stories.finishStory();
1413
});
1514
}
@@ -233,7 +232,6 @@
233232

234233
</script>
235234
<div class="earthlapse-modes-screen">
236-
<button class="ui-button earthlapse-modes-homebutton">Menu</button>
237235
<div class="earthlapse-stories-explain"></div>
238236
<div class="earthlapse-stories-timeline">
239237
<div class="earthlapse-stories-timeline-wrap">

‎earthlapse-hci/modes.css‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -50,30 +50,34 @@ body.earthlapse-modes-story .earthlapse-modes-screen.earthlapse-modes-story-cont
5050
color: #ffffff;
5151
}
5252

53-
/* Global interactors
53+
/* Adapt Earthlapse UI for different modes
5454
-------------------------------------------------- */
5555

56-
.earthlapse-modes-homebutton {
57-
position: absolute;
58-
background: url(menu-icon.svg) no-repeat center;
59-
background-size: contain;
60-
z-index: 99;
61-
top: 30px;
62-
left: 40px;
63-
width: 80px;
64-
height: 80px;
65-
border: 0;
66-
font-family: Arial, Helvetica, sans-serif;
67-
font-size: 15px;
68-
line-height: 80px;
69-
text-align: center;
70-
color: #000;
71-
outline: none;
72-
text-indent: -999999px;
73-
/* border: 1px solid rgba(101,101,101,1);
74-
box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
75-
background: #FFF;
76-
border-radius: 50%;*/
56+
.earthlapse-ui-globalcontrol {
57+
opacity: 0;
58+
visibility: hidden;
59+
transition-duration: 1s;
60+
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
61+
}
62+
63+
body.earthlapse-modes-menu .earthlapse-ui-globalcontrol,
64+
body.earthlapse-modes-story .earthlapse-ui-globalcontrol,
65+
body.earthlapse-modes-explore .earthlapse-ui-globalcontrol {
66+
opacity: 1;
67+
visibility: visible;
68+
}
69+
70+
.earthlapse-ui-globalcontrol-item {
71+
opacity: 0.25;
72+
pointer-events: none;
73+
transition-duration: 1s;
74+
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
75+
}
76+
77+
body.earthlapse-modes-story .earthlapse-ui-globalcontrol-homebutton,
78+
body.earthlapse-modes-explore .earthlapse-ui-globalcontrol-homebutton {
79+
opacity: 1;
80+
pointer-events: all;
7781
}
7882

7983
/* CREATE Lab CSS modifications for exploration mode

‎earthlapse-hci/modes.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
var revertTimeoutDelay = 5 * 60 * 1000; // milliseconds since last click/touch
77

88
/* State information */
9-
var currentMode = "";
9+
var currentMode = null;
1010
var revertTimeout = null;
1111

1212
/* Functions */
@@ -47,6 +47,10 @@
4747
});
4848
}
4949

50+
function getCurrentMode() {
51+
return currentMode;
52+
}
53+
5054
function loadScreen(mode) {
5155
// Load mode-specific CSS
5256
$("<link href=\"../../earthlapse-hci/modes-" + escape(mode) + ".css\" rel=\"stylesheet\" type=\"text/css\" />").appendTo("head");
@@ -88,17 +92,10 @@
8892
EarthlapseUI.bind("init", function() {
8993
// Setup basic Earthlapse Modes UI
9094
$("body").addClass("earthlapse-modes");
91-
var $backToMenu = $("<button class=\"ui-button earthlapse-modes-homebutton earthlapse-modes-container\">Menu</button>");
92-
$backToMenu.on("click", function(e) {
93-
e.preventDefault();
94-
changeModeTo("menu");
95-
});
96-
$("#timeMachine").append($backToMenu);
9795

9896
// Convert CREATE Lab UI into Earthlapse exploration mode
9997
var $explore = $(".location_search_div, .presentationSlider, .current-location-text, .player > div[class]:not(#timeMachine_timelapse), #timeMachine_timelapse > div");
10098
$explore.addClass("earthlapse-modes-container earthlapse-modes-explore-container");
101-
$backToMenu.addClass("earthlapse-modes-explore-container");
10299

103100
// Disable panning/zooming on screens
104101
document.addEventListener("touchmove", function (e) {
@@ -116,6 +113,12 @@
116113
loadScreen("menu");
117114
loadScreen("story");
118115

116+
// Configure explore mode: Back to menu
117+
EarthlapseUI.GlobalControl.bindAction("home", function () {
118+
if (EarthlapseUI.Modes.getCurrentMode() !== "explore") { return; }
119+
changeModeTo("menu");
120+
});
121+
119122
// Set up timeout to revert to default mode
120123
$(document).on("click touchstart touchmove", function () {
121124
resetRevertTimeout();
@@ -125,6 +128,7 @@
125128
// Expose modes API
126129
EarthlapseUI.Modes = {
127130
changeModeTo: changeModeTo,
131+
getCurrentMode: getCurrentMode,
128132
loadScreen: loadScreen,
129133
revertToDefault: revertToDefault,
130134
resetRevertTimeout: resetRevertTimeout

‎earthlapse-hci/ui-globalcontrol.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.earthlapse-ui-globalcontrol {
2+
position: absolute;
3+
z-index: 101;
4+
top: 40px;
5+
left: 40px;
6+
}
7+
8+
.earthlapse-ui-globalcontrol-item {
9+
background: none;
10+
background-repeat: no-repeat;
11+
background-position: center;
12+
background-size: 80% 80%;
13+
width: 80px;
14+
height: 80px;
15+
padding: 0;
16+
margin: 0 0 10px 0;
17+
display: block;
18+
border: 0;
19+
font-family: Arial, Helvetica, sans-serif;
20+
font-size: 15px;
21+
line-height: 80px;
22+
text-align: center;
23+
color: #000;
24+
outline: none;
25+
text-indent: -999999px;
26+
}
27+
28+
.earthlapse-ui-globalcontrol-homebutton {
29+
background-image: url(menu-icon.svg);
30+
}

‎earthlapse-hci/ui-globalcontrol.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
"use strict";
2+
3+
(function($) {
4+
function bindAction(action, fn) {
5+
switch (action) {
6+
case "home":
7+
var $home = $(".earthlapse-ui-globalcontrol-homebutton");
8+
$home.on("click", function (e) {
9+
e.preventDefault();
10+
fn();
11+
});
12+
break;
13+
}
14+
}
15+
16+
// Initialize
17+
EarthlapseUI.bind("init", function () {
18+
var $control = $("<div class=\"earthlapse-ui-globalcontrol\" />");
19+
20+
var $home = $("<button class=\"ui-button earthlapse-ui-globalcontrol-item earthlapse-ui-globalcontrol-homebutton\">Home</button>");
21+
$home.on("click", function (e) {
22+
e.preventDefault();
23+
});
24+
25+
$control.append($home);
26+
$("#timeMachine").append($control);
27+
});
28+
29+
// Expose GlobalControls API
30+
EarthlapseUI.GlobalControl = {
31+
bindAction: bindAction
32+
};
33+
} (jQuery));

‎examples/webgl-timemachine/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717
<!-- Begin Earthlapse UI Styles -->
1818
<link href="../../earthlapse-hci/ui-chrome-toggle.css" rel="stylesheet" type="text/css" />
19+
<link href="../../earthlapse-hci/ui-globalcontrol.css" rel="stylesheet" type="text/css" />
1920
<link href="../../earthlapse-hci/modes.css" rel="stylesheet" type="text/css" />
2021
<!-- End Earthlapse UI Styles -->
2122

@@ -62,6 +63,7 @@
6263
<!-- Begin Earthlapse UI Scripts -->
6364
<script src="../../earthlapse-hci/earthlapse.js" type="text/javascript"></script>
6465
<script src="../../earthlapse-hci/ui-chrome-toggle.js" type="text/javascript"></script>
66+
<script src="../../earthlapse-hci/ui-globalcontrol.js" type="text/javascript"></script>
6567
<script src="../../earthlapse-hci/modes.js" type="text/javascript"></script>
6668
<script src="../../earthlapse-hci/stories-engine.js" type="text/javascript"></script>
6769
<script src="../../earthlapse-hci/stories-timeline.js" type="text/javascript"></script>

0 commit comments

Comments
 (0)