IMPR: detect landscape/portrait

This commit is contained in:
Tony Air 2020-09-09 23:27:25 +07:00
parent 9f892ceeab
commit 9595160430
1 changed files with 22 additions and 9 deletions

View File

@ -148,12 +148,12 @@ const MainUI = (($) => {
$Body.addClass('is-offline'); $Body.addClass('is-offline');
$Body.trigger(Events.OFFLINE); $Body.trigger(Events.OFFLINE);
$W.trigger(Events.OFFLINE); $W.trigger(Events.OFFLINE);
//W.location.reload(false); //W.location.reload(false);
} else { } else {
$Body.removeClass('is-offline'); $Body.removeClass('is-offline');
$Body.trigger(Events.ONLINE); $Body.trigger(Events.ONLINE);
$W.trigger(Events.ONLINE); $W.trigger(Events.ONLINE);
} }
}, },
}); });
@ -215,22 +215,23 @@ const MainUI = (($) => {
// Static methods // Static methods
static init() { static init() {
this.dispose(); const ui = this;
ui.dispose();
console.log(`${NAME}: init`); console.log(`${NAME}: init`);
// update location details // update location details
this.updateLocation(); ui.updateLocation();
// mark available offline areas // mark available offline areas
if ('caches' in W) { if ('caches' in W) {
$('a.offline').addClass('offline-available'); $('a.offline').addClass('offline-available');
} }
this.loadImages(); ui.loadImages();
// detect bootstrap screen size // detect bootstrap screen size
this.detectBootstrapScreenSize(); ui.detectBootstrapScreenSize();
// mark external links // mark external links
$('a.external,a[rel="external"]').attr('target', '_blank'); $('a.external,a[rel="external"]').attr('target', '_blank');
@ -340,12 +341,11 @@ const MainUI = (($) => {
W.print(); W.print();
} }
$Body.data(NAME, this); $Body.data(NAME, ui);
$W.removeClass('lock-main-init'); $W.removeClass('lock-main-init');
} }
static detectBootstrapScreenSize() { static detectBootstrapScreenSize() {
const $el = $('<div class="env-test"></div>'); const $el = $('<div class="env-test"></div>');
let envs = [...Consts.ENVS]; let envs = [...Consts.ENVS];
$Body.append($el); $Body.append($el);
@ -366,7 +366,20 @@ const MainUI = (($) => {
$Body.removeClass(envs); $Body.removeClass(envs);
$Body.addClass(curEnv); $Body.addClass(curEnv);
console.log(`${NAME}: screen size detected ${curEnv}`); let landscape = true;
if ($W.width() > $W.height()) {
$Body.removeClass('portrait');
$Body.addClass('landscape');
} else {
landscape = false;
$Body.removeClass('landscape');
$Body.addClass('portrait');
}
console.log(
`${NAME}: screen size detected ${curEnv} | landscape ${landscape}`,
);
return curEnv; return curEnv;
} }