Skip to content

Commit 016458a

Browse files
Son-HNguyenSon-HNguyen
committed
Added mobile layout support for uiMenu/toolbox.
1 parent dc28518 commit 016458a

File tree

5 files changed

+393
-270
lines changed

5 files changed

+393
-270
lines changed

‎3dwebclient/MobileController.js

Lines changed: 105 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,23 @@
66
(function () {
77
/**constructor function**/
88
function MobileController() {
9-
this._isMobile = this.isMobile();
9+
// this._isMobile = this.isMobile();
10+
this._isMobile = true;
1011

1112
// GPS functionalities, including geolocation and device orientation
1213
this._gpsController = new GPSController(this._isMobile);
1314

15+
// Watch for changes in visibility of iframe to hide/show uiMenu
16+
this._hiddenInfoboxClassName = "cesium-infoBox-bodyless";
17+
this._visibleInfoboxClassName = "cesium-infoBox-visible";
18+
this._oldIframeVisibility = this._visibleInfoboxClassName;
19+
this.watchInfoboxVisibility();
20+
1421
this.hideCredits();
1522
this.hideInspector();
1623

1724
this.setInfoboxFullscreen();
25+
this.setToolboxFullscreen();
1826
}
1927

2028
Object.defineProperties(MobileController.prototype, {
@@ -25,6 +33,38 @@
2533
set: function (value) {
2634
this._isMobile = value;
2735
}
36+
},
37+
gpsController: {
38+
get: function () {
39+
return this._gpsController;
40+
},
41+
set: function (value) {
42+
this._gpsController = value;
43+
}
44+
},
45+
oldIframeVisibility: {
46+
get: function () {
47+
return this._oldIframeVisibility;
48+
},
49+
set: function (value) {
50+
this._oldIframeVisibility = value;
51+
}
52+
},
53+
hiddenInfoboxClassName: {
54+
get: function () {
55+
return this._hiddenInfoboxClassName;
56+
},
57+
set: function (value) {
58+
this._hiddenInfoboxClassName = value;
59+
}
60+
},
61+
visibleInfoboxClassName: {
62+
get: function () {
63+
return this._visibleInfoboxClassName;
64+
},
65+
set: function (value) {
66+
this._visibleInfoboxClassName = value;
67+
}
2868
}
2969
});
3070

@@ -73,6 +113,38 @@
73113
}
74114
}
75115

116+
/**
117+
* Automatically hide toolbox/uiMenu when an infox is shown in fullscreen.
118+
*
119+
* @returns {undefined}
120+
*/
121+
MobileController.prototype.watchInfoboxVisibility = function () {
122+
var scope = this;
123+
124+
window.setInterval(function () {
125+
var infobox = document.getElementsByClassName('infobox-full')[0];
126+
var uiMenu = document.getElementById('uiMenu');
127+
128+
for (var i = 0; i < infobox.classList.length; i++) {
129+
if (infobox.classList[i] === "cesium-infoBox-visible") {
130+
if (scope._oldIframeVisibility === "cesium-infoBox-bodyless") {
131+
uiMenu.style.display = "none";
132+
scope._oldIframeVisibility = "cesium-infoBox-visible";
133+
break;
134+
}
135+
}
136+
137+
if (infobox.classList[i] === "cesium-infoBox-bodyless") {
138+
if (scope._oldIframeVisibility === "cesium-infoBox-visible") {
139+
uiMenu.style.display = "block";
140+
scope._oldIframeVisibility = "cesium-infoBox-bodyless";
141+
break;
142+
}
143+
}
144+
}
145+
}, 200);
146+
}
147+
76148
/**
77149
* Set infobox containing thematic values to fullscreen on mobile devices.
78150
*
@@ -83,15 +155,41 @@
83155

84156
if (scope._isMobile) {
85157
var infobox = document.getElementsByClassName('cesium-infoBox')[0];
86-
infobox.classList.add("full");
158+
infobox.classList.add("infobox-full");
159+
if (scope.getMobileOS() === "iOS") {
160+
infobox.classList.add("infobox-full-ios");
161+
}
162+
}
163+
}
164+
165+
/**
166+
* Set toolbox to fullscreen on mobile devices.
167+
*
168+
* @returns {undefined}
169+
*/
170+
MobileController.prototype.setToolboxFullscreen = function () {
171+
var scope = this;
172+
173+
if (scope._isMobile) {
174+
var uiMenu = document.getElementById('uiMenu-content');
175+
uiMenu.style.display = "block";
176+
uiMenu.classList.add("uiMenu-full");
87177
if (scope.getMobileOS() === "iOS") {
88-
infobox.classList.add("full-ios");
178+
uiMenu.classList.add("uiMenu-full-ios");
89179
}
90180

91-
document.getElementById("uiMenu").style.display = "none";
92-
document.getElementsByClassName('cesium-infoBox-close')[0].onclick = function () {
93-
document.getElementById("uiMenu").style.display = "block";
94-
};
181+
var toolbox = document.getElementById('citydb_toolbox');
182+
toolbox.classList.add("toolbox-full");
183+
184+
// var long_containers = document.getElementsByClassName('citydb_long_container');
185+
// for (var i = 0; i < long_containers.length; i++) {
186+
// long_containers[i].classList.add("citydb_long_container-full");
187+
// }
188+
189+
// var short_containers = document.getElementsByClassName('citydb_short_container');
190+
// for (var i = 0; i < short_containers.length; i++) {
191+
// short_containers[i].classList.add("citydb_short_container-full");
192+
// }
95193
}
96194
}
97195

‎3dwebclient/css/InfoTableFullscreenStyles.css

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎3dwebclient/css/MobileFullscreenStyles.css

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.infobox-full {
2+
position: absolute;
3+
top: 0;
4+
left: 0;
5+
right: 0;
6+
height: 100%;
7+
width: 100%;
8+
/* max-height: none;
9+
max-width: none;*/
10+
z-index: 999999;
11+
overflow: hidden;
12+
}
13+
14+
.infobox-full iframe {
15+
max-height: 100%!important;
16+
height: 100%;
17+
}
18+
19+
.infobox-full-ios {
20+
overflow: auto!important;
21+
-webkit-overflow-scrolling: touch!important;
22+
}
23+
24+
.infobox-full-ios iframe {
25+
min-height: 100%;
26+
max-width: 100%;
27+
}
28+
29+
/*------------------------------------------------------*/
30+
.uiMenu-full {
31+
max-height: 80vh!important;
32+
width: 95vw!important;
33+
overflow: hidden;
34+
position: absolute;
35+
z-index: 1!important;
36+
}
37+
38+
.uiMenu-full-ios {
39+
overflow: auto!important;
40+
-webkit-overflow-scrolling: touch!important;
41+
}
42+
43+
.toolbox-full {
44+
width: 100%!important;
45+
}
46+
47+
.citydb_long_container-full {
48+
margin-left: 0!important;
49+
margin-right: 0!important;
50+
}
51+
52+
.citydb_short_container-full {
53+
width: 50%!important;
54+
}

0 commit comments

Comments
 (0)