diff --git a/www/index.html b/www/index.html index 099d69e0..dfd279dd 100644 --- a/www/index.html +++ b/www/index.html @@ -771,7 +771,7 @@

Display settings

-
Display size and theme
+
Display size, theme and orientation
@@ -818,7 +818,13 @@ Fix UI bug with secondary displays (increases load and resize time, turn off if not needed) - + Attempt to lock display orientation: +
diff --git a/www/js/app.js b/www/js/app.js index b69ff38f..3c8d046c 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -1380,6 +1380,37 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images settingsStore.setItem('hideActiveContentWarning', params.hideActiveContentWarning, Infinity); refreshCacheStatus(); }); + // Run lockDisplayOrientation on startup + if (params.lockDisplayOrientation) { + uiUtil.lockDisplayOrientation(params.lockDisplayOrientation); + document.getElementById('lockDisplayOrientationDrop').value = params.lockDisplayOrientation; + } + document.getElementById('lockDisplayOrientationDrop').addEventListener('change', function (event) { + var that = this; + var message = event.target.value ? ('

Attempting to set the orientation lock to: ' + event.target.value + '

') : '

Attempting to clear the orientation lock.

'; + if (event.target.value) message += '

Please be aware that this setting may only work in mobile contexts where the app is installed or in standalone mode.

' + return uiUtil.lockDisplayOrientation(event.target.value).then(function (rtn) { + if (rtn === 'unsupported') { + uiUtil.systemAlert('It appears that the Screen Orientation Lock API is not supported on this device!'); + } else { + params.lockDisplayOrientation = event.target.value || ''; + settingsStore.setItem('lockDisplayOrientation', params.lockDisplayOrientation, Infinity); + that.value = params.lockDisplayOrientation || ''; + } + }).catch(function (err) { + // Note that in desktop contexts, the API might reject, but could still work + if (err.name === 'NotSupportedError') { + params.lockDisplayOrientation = event.target.value || ''; + settingsStore.setItem('lockDisplayOrientation', params.lockDisplayOrientation, Infinity); + that.value = params.lockDisplayOrientation || ''; + if (params.lockDisplayOrientation) uiUtil.systemAlert('

The Screen Orientation Lock API returned the following error, but this is expected on Desktop devices.

' + + "

If the app is installed, and it doesn't work, please reset this manually to 'Unlocked' or try a different setting.

"); + } else { + uiUtil.systemAlert('There was an error setting the requested orientation: ' + err.toString()); + that.value = params.lockDisplayOrientation; + } + }); + }) document.getElementById('debugLibzimASMDrop').addEventListener('change', function (event) { var that = this; var message = '

App will reload to apply the new setting.

' @@ -1395,7 +1426,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images that.value = params.debugLibzimASM || ''; } }); - }) + }); $('input:checkbox[name=openExternalLinksInNewTabs]').on('change', function () { params.openExternalLinksInNewTabs = this.checked ? true : false; settingsStore.setItem('openExternalLinksInNewTabs', params.openExternalLinksInNewTabs, Infinity); diff --git a/www/js/init.js b/www/js/init.js index 882ec227..d451eb86 100644 --- a/www/js/init.js +++ b/www/js/init.js @@ -130,6 +130,7 @@ params.localUWPSettings = /UWP/.test(params.appType) ? Windows.Storage.Applicati appstate['target'] = 'iframe'; // The target for article loads (this should always be 'iframe' initially, and will only be changed as a result of user action) params['mapsURI'] = getSetting('mapsURI') || (/UWP|Windows/.test(params.appType) ? 'bingmaps:' : 'https://www.openstreetmap.org/'); // Protocol with colon ('bingmaps:') or URL with final slash ('https://www.openstreetmap.org/') params['debugLibzimASM'] = getSetting('debugLibzimASM'); // 'wasm|asm' Forces use of wasm or asm for libzim decoder. You can also set this as an override URL querystring e.g. ?debugLibzimASM=wasm; +params['lockDisplayOrientation'] = getSetting('lockDisplayOrientation'); // 'portrait|landscape' (or empty for no lock) params['noHiddenElementsWarning'] = getSetting('noHiddenElementsWarning') !== null ? getSetting('noHiddenElementsWarning') : false; // A one-time warning about Hidden elements display // Apply any override parameters in querystring (done as a self-calling function to avoid creating global variables) diff --git a/www/js/lib/uiUtil.js b/www/js/lib/uiUtil.js index c30c6871..8746ae14 100644 --- a/www/js/lib/uiUtil.js +++ b/www/js/lib/uiUtil.js @@ -993,6 +993,30 @@ define(rqDef, function(util) { }); } + /** + * Attempts to lock the display orientation using the Screen Orientation Lock API + * @param {string} val A valid value in the API, e.g. '', 'natural', 'portrait', 'landscape' + * @returns + */ + function lockDisplayOrientation(val) { + if (screen && screen.orientation && screen.orientation.lock) { + if (val) { + return screen.orientation.lock(val).then(function () { + console.log(val ? ('Display orientation locked to ' + val) : 'Display orientation unlocked.'); + }).catch(function (error) { + console.warn('Error locking display orientation (but in some contexts, it may have worked anyway)', error); + }); + } else { + screen.orientation.unlock(); + return Promise.resolve(); + } + } else { + console.warn('The screen.orientation.lock API is not supported on this device!'); + return Promise.resolve('unsupported'); + } + } + + /** * Finds the closest or enclosing tag of an element. * Returns undefined if there isn't any. @@ -1048,6 +1072,7 @@ define(rqDef, function(util) { extractHTML: extractHTML, checkServerIsAccessible: checkServerIsAccessible, initTouchZoom: initTouchZoom, + lockDisplayOrientation: lockDisplayOrientation, reportAssemblerErrorToAPIStatusPanel: reportAssemblerErrorToAPIStatusPanel, reportSearchProviderToAPIStatusPanel: reportSearchProviderToAPIStatusPanel, warnAndOpenExternalLinkInNewTab: warnAndOpenExternalLinkInNewTab,