loleaflet/Makefile.am | 2 loleaflet/src/control/Control.StatusBar.js | 19 ---- loleaflet/src/control/Control.Toolbar.js | 43 ---------- loleaflet/src/control/Control.UIManager.js | 110 +++++++++++++++++++++++++++ loleaflet/src/layer/tile/CalcTileLayer.js | 38 --------- loleaflet/src/layer/tile/ImpressTileLayer.js | 37 --------- loleaflet/src/layer/tile/WriterTileLayer.js | 14 --- loleaflet/src/main.js | 24 +---- loleaflet/src/map/Map.js | 6 + 9 files changed, 136 insertions(+), 157 deletions(-)
New commits: commit 75e11420d51e3f53491a10f9933503c45fac19d6 Author: Szymon Kłos <szymon.k...@collabora.com> AuthorDate: Thu Apr 16 18:21:44 2020 +0200 Commit: Szymon Kłos <szymon.k...@collabora.com> CommitDate: Fri Apr 17 12:12:13 2020 +0200 Introduce UIManager Change-Id: I944622a352aae7951f3e69286bb163645fa23276 Reviewed-on: https://gerrit.libreoffice.org/c/online/+/92405 Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoff...@gmail.com> Reviewed-by: Szymon Kłos <szymon.k...@collabora.com> diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am index 6c10bc441..87286367f 100644 --- a/loleaflet/Makefile.am +++ b/loleaflet/Makefile.am @@ -272,6 +272,7 @@ LOLEAFLET_JS =\ src/control/Control.PresentationBar.js \ src/control/Control.SigningBar.js \ src/control/Control.TopToolbar.js \ + src/control/Control.UIManager.js \ src/control/Control.Layers.js \ src/control/Search.js \ src/control/Permission.js \ @@ -548,6 +549,7 @@ pot: src/control/Control.Toolbar.js \ src/control/Control.TopToolbar.js \ src/control/Control.UserList.js \ + src/control/Control.UIManager.js \ src/control/Ruler.js \ src/control/Signing.js \ src/control/Toolbar.js \ diff --git a/loleaflet/src/control/Control.StatusBar.js b/loleaflet/src/control/Control.StatusBar.js index ed5eb0353..2f1a7a44f 100644 --- a/loleaflet/src/control/Control.StatusBar.js +++ b/loleaflet/src/control/Control.StatusBar.js @@ -3,7 +3,7 @@ * L.Control.StatusBar */ -/* global $ w2ui w2utils _ _UNO */ +/* global $ w2ui _ _UNO */ L.Control.StatusBar = L.Control.extend({ initialize: function () { @@ -11,10 +11,10 @@ L.Control.StatusBar = L.Control.extend({ onAdd: function (map) { this.map = map; - map.on('doclayerinit', this.onDocLayerInit, this); map.on('commandvalues', this.onCommandValues, this); map.on('commandstatechanged', this.onCommandStateChanged, this); + this.create(); }, hideTooltip: function(toolbar, id) { @@ -221,6 +221,8 @@ L.Control.StatusBar = L.Control.extend({ window.setupSearchInput(); } }); + + toolbar.show(); } toolbar.bind('touchstart', function() { @@ -244,19 +246,6 @@ L.Control.StatusBar = L.Control.extend({ } }); - if (!window.mode.isMobile()) { - this.map.on('showbusy', function(e) { - w2utils.lock(w2ui['actionbar'].box, e.label, true); - }); - - this.map.on('hidebusy', function() { - // If locked, unlock - if (w2ui['actionbar'].box.firstChild.className === 'w2ui-lock') { - w2utils.unlock(w2ui['actionbar'].box); - } - }); - } - this.map.on('zoomend', function () { var zoomPercent = 100; var zoomSelected = null; diff --git a/loleaflet/src/control/Control.Toolbar.js b/loleaflet/src/control/Control.Toolbar.js index 005fbd21c..ece25efcb 100644 --- a/loleaflet/src/control/Control.Toolbar.js +++ b/loleaflet/src/control/Control.Toolbar.js @@ -9,15 +9,6 @@ var map; -function resizeToolbar() { - if ($(window).width() !== map.getSize().x) { - var toolbarUp = w2ui['editbar']; - var statusbar = w2ui['actionbar']; - toolbarUp.resize(); - statusbar.resize(); - } -} - function _cancelSearch() { var toolbar = window.mode.isMobile() ? w2ui['searchbar'] : w2ui['actionbar']; var searchInput = L.DomUtil.get('search-input'); @@ -590,22 +581,6 @@ function hideTooltip(toolbar, id) { } } -function createToolbar() { - - if (window.mode.isMobile()) { - $('#toolbar-search').hide(); - $('#mobile-edit-button').show(); - } else { - $('#toolbar-down').show(); - initNormalToolbar(); - } -} - -function initNormalToolbar() { - map.addControl(L.control.topToolbar()); - map.addControl(L.control.signingBar()); -} - function setupSearchInput() { $('#search-input').off('input', onSearchInput).on('input', onSearchInput); $('#search-input').off('keydown', onSearchKeyDown).on('keydown', onSearchKeyDown); @@ -1062,18 +1037,6 @@ function onUpdatePermission(e) { } } } - - if (e.perm === 'edit') { - if (window.mode.isMobile()) { - $('#toolbar-down').show(); - } - } - else if (window.mode.isMobile()) { - $('#toolbar-down').hide(); - } - - // We've resized the document container. - map.invalidateSize(); } function editorUpdate(e) { // eslint-disable-line no-unused-vars @@ -1103,10 +1066,6 @@ function editorUpdate(e) { // eslint-disable-line no-unused-vars global.editorUpdate = editorUpdate; -$(window).resize(function() { - resizeToolbar(); -}); - $(document).ready(function() { // Attach insert file action $('#insertgraphic').on('change', onInsertFile); @@ -1116,8 +1075,6 @@ $(document).ready(function() { function setupToolbar(e) { map = e; - createToolbar(); - map.on('focussearch', function () { var entry = L.DomUtil.get('search-input'); entry.focus(); diff --git a/loleaflet/src/control/Control.UIManager.js b/loleaflet/src/control/Control.UIManager.js new file mode 100644 index 000000000..a75481b9f --- /dev/null +++ b/loleaflet/src/control/Control.UIManager.js @@ -0,0 +1,110 @@ +/* -*- js-indent-level: 8 -*- */ +/* + * L.Control.UIManager + */ + +/* global $ setupToolbar w2ui w2utils */ +L.Control.UIManager = L.Control.extend({ + onAdd: function (map) { + this.map = map; + + map.on('updatepermission', this.onUpdatePermission, this); + }, + + initializeBasicUI: function() { + var that = this; + + var menubar = L.control.menubar(); + this.map.menubar = menubar; + this.map.addControl(menubar); + + this.map.addControl(L.control.statusBar()); + + if (window.mode.isMobile()) { + $('#mobile-edit-button').show(); + } else { + this.map.addControl(L.control.topToolbar()); + this.map.addControl(L.control.signingBar()); + } + + setupToolbar(this.map); + + this.map.addControl(L.control.scroll()); + this.map.addControl(L.control.alertDialog()); + this.map.addControl(L.control.mobileWizard()); + this.map.addControl(L.control.languageDialog()); + this.map.dialog = L.control.lokDialog(); + this.map.addControl(this.map.dialog); + this.map.addControl(L.control.contextMenu()); + this.map.addControl(L.control.infobar()); + this.map.addControl(L.control.userList()); + + this.map.on('showbusy', function(e) { + if (w2ui['actionbar']) + w2utils.lock(w2ui['actionbar'].box, e.label, true); + }); + + this.map.on('hidebusy', function() { + // If locked, unlock + if (w2ui['actionbar'] && w2ui['actionbar'].box.firstChild.className === 'w2ui-lock') { + w2utils.unlock(w2ui['actionbar'].box); + } + }); + + $(window).resize(function() { + that.resizeToolbars(); + }); + }, + + initializeSpecializedUI: function(docType) { + var isDesktop = window.mode.isDesktop(); + + if (window.mode.isMobile()) { + this.map.addControl(L.control.mobileBottomBar(docType)); + this.map.addControl(L.control.mobileTopBar(docType)); + this.map.addControl(L.control.searchBar()); + } + + if (docType === 'spreadsheet') { + this.map.addControl(L.control.sheetsBar({shownavigation: isDesktop})); + this.map.addControl(L.control.formulaBar({showfunctionwizard: isDesktop})); + } + + if (isDesktop && docType === 'presentation') { + this.map.addControl(L.control.presentationBar()); + } + + if (window.mode.isMobile() || window.mode.isTablet()) { + this.map.on('updatetoolbarcommandvalues', function() { + w2ui['editbar'].refresh(); + }); + } + }, + + onUpdatePermission: function(e) { + if (window.mode.isMobile()) { + if (e.perm === 'edit') { + $('#toolbar-down').show(); + } + else { + $('#toolbar-down').hide(); + } + } + + // We've resized the document container. + this.map.invalidateSize(); + }, + + resizeToolbars: function() { + if ($(window).width() !== this.map.getSize().x) { + var toolbarUp = w2ui['editbar']; + var statusbar = w2ui['actionbar']; + toolbarUp.resize(); + statusbar.resize(); + } + } +}); + +L.control.uiManager = function () { + return new L.Control.UIManager(); +}; diff --git a/loleaflet/src/layer/tile/CalcTileLayer.js b/loleaflet/src/layer/tile/CalcTileLayer.js index 658b6362d..1e82f2598 100644 --- a/loleaflet/src/layer/tile/CalcTileLayer.js +++ b/loleaflet/src/layer/tile/CalcTileLayer.js @@ -3,7 +3,7 @@ * Calc tile layer is used to display a spreadsheet document */ -/* global w2ui w2utils */ +/* global */ L.CalcTileLayer = L.TileLayer.extend({ STD_EXTRA_WIDTH: 113, /* 2mm extra for optimal width, * 0.1986cm with TeX points, @@ -51,12 +51,7 @@ L.CalcTileLayer = L.TileLayer.extend({ map.on('AnnotationReply', this._onAnnotationReply, this); map.on('AnnotationSave', this._onAnnotationSave, this); - if (window.mode.isMobile() || window.mode.isTablet()) { - this.onMobileInit(map); - } - - map.addControl(L.control.sheetsBar({shownavigation: true})); - map.addControl(L.control.formulaBar({showfunctionwizard: true})); + map.uiManager.initializeSpecializedUI('spreadsheet'); }, clearAnnotations: function () { @@ -74,35 +69,6 @@ L.CalcTileLayer = L.TileLayer.extend({ this._annotations = {}; }, - onMobileInit: function (map) { - map.addControl(L.control.mobileTopBar('spreadsheet')); - - map.addControl(L.control.formulaBar({showfunctionwizard: false})); - - map.addControl(L.control.sheetsBar({shownavigation: false})); - - map.addControl(L.control.mobileBottomBar('spreadsheet')); - - map.addControl(L.control.searchBar()); - - map.on('updatetoolbarcommandvalues', function() { - w2ui['editbar'].refresh(); - }); - - map.on('showbusy', function(e) { - w2utils.lock(w2ui['actionbar'].box, e.label, true); - }); - - map.on('hidebusy', function() { - // If locked, unlock - if (w2ui['actionbar'].box.firstChild.className === 'w2ui-lock') { - w2utils.unlock(w2ui['actionbar'].box); - } - }); - - map.on('updatepermission', window.onUpdatePermission); - }, - onAnnotationModify: function (annotation) { annotation.edit(); annotation.focus(); diff --git a/loleaflet/src/layer/tile/ImpressTileLayer.js b/loleaflet/src/layer/tile/ImpressTileLayer.js index 933a89c77..cc02e444d 100644 --- a/loleaflet/src/layer/tile/ImpressTileLayer.js +++ b/loleaflet/src/layer/tile/ImpressTileLayer.js @@ -3,7 +3,7 @@ * Impress tile layer is used to display a presentation document */ -/* global $ w2ui w2utils L */ +/* global $ L */ L.ImpressTileLayer = L.TileLayer.extend({ extraSize: L.point(290, 0), @@ -50,8 +50,10 @@ L.ImpressTileLayer = L.TileLayer.extend({ map.on('AnnotationScrollDown', this.onAnnotationScrollDown, this); map.on('orientationchange', this.onOrientationChange, this); map.on('resize', this.onResize, this); + + map.uiManager.initializeSpecializedUI('presentation'); + if (window.mode.isMobile()) { - this.onMobileInit(map); L.Control.MobileWizard.mergeOptions({maxHeight: '55%'}); var mobileWizard = L.DomUtil.get('mobile-wizard'); var mobileWizardContent = L.DomUtil.get('mobile-wizard-content'); @@ -60,8 +62,6 @@ L.ImpressTileLayer = L.TileLayer.extend({ L.DomUtil.toBack(container); map.addControl(L.control.partsPreview(container, preview, {fetchThumbnail: false})); L.DomUtil.addClass(mobileWizardContent, 'with-slide-sorter-above'); - } else { - this.onDesktopAndTabletInit(map); } }, @@ -115,35 +115,6 @@ L.ImpressTileLayer = L.TileLayer.extend({ } }, - onDesktopAndTabletInit: function(map) { - map.addControl(L.control.presentationBar()); - }, - - onMobileInit: function (map) { - map.addControl(L.control.mobileTopBar('presentation')); - - map.addControl(L.control.mobileBottomBar('presentation')); - - map.addControl(L.control.searchBar()); - - map.on('updatetoolbarcommandvalues', function() { - w2ui['editbar'].refresh(); - }); - - map.on('showbusy', function(e) { - w2utils.lock(w2ui['actionbar'].box, e.label, true); - }); - - map.on('hidebusy', function() { - // If locked, unlock - if (w2ui['actionbar'].box.firstChild.className === 'w2ui-lock') { - w2utils.unlock(w2ui['actionbar'].box); - } - }); - - map.on('updatepermission', window.onUpdatePermission); - }, - onAdd: function (map) { L.TileLayer.prototype.onAdd.call(this, map); this._annotations = {}; diff --git a/loleaflet/src/layer/tile/WriterTileLayer.js b/loleaflet/src/layer/tile/WriterTileLayer.js index 72e7561fb..b41b7e58d 100644 --- a/loleaflet/src/layer/tile/WriterTileLayer.js +++ b/loleaflet/src/layer/tile/WriterTileLayer.js @@ -39,9 +39,7 @@ L.WriterTileLayer = L.TileLayer.extend({ }, beforeAdd: function (map) { - if (window.mode.isMobile() || window.mode.isTablet()) { - this.onMobileInit(map); - } + map.uiManager.initializeSpecializedUI('text'); }, onAdd: function (map) { @@ -51,16 +49,6 @@ L.WriterTileLayer = L.TileLayer.extend({ map.on('updatemaxbounds', this._onUpdateMaxBounds, this); }, - onMobileInit: function (map) { - map.addControl(L.control.mobileBottomBar('text')); - - map.addControl(L.control.mobileTopBar('text')); - - map.addControl(L.control.searchBar()); - - map.on('updatepermission', window.onUpdatePermission); - }, - onAnnotationModify: function (annotation) { if (window.mode.isMobile() || window.mode.isTablet()) { var that = this; diff --git a/loleaflet/src/main.js b/loleaflet/src/main.js index a291de1c8..7f8fbb267 100644 --- a/loleaflet/src/main.js +++ b/loleaflet/src/main.js @@ -1,6 +1,6 @@ /* -*- js-indent-level: 8 -*- */ /* global errorMessages getParameterByName accessToken accessTokenTTL accessHeader reuseCookies */ -/* global vex host serviceRoot idleTimeoutSecs outOfFocusTimeoutSecs setupToolbar*/ +/* global vex host serviceRoot idleTimeoutSecs outOfFocusTimeoutSecs*/ /*eslint indent: [error, "tab", { "outerIIFEBody": 0 }]*/ (function (global) { @@ -68,23 +68,13 @@ var map = L.map('map', { }); ////// Controls ///// -var menubar = L.control.menubar(); -map.menubar = menubar; -map.addControl(menubar); -var statusbar = L.control.statusBar(); -map.addControl(statusbar); -statusbar.create(); -setupToolbar(map); -map.addControl(L.control.scroll()); -map.addControl(L.control.alertDialog()); -map.addControl(L.control.mobileWizard()); -map.addControl(L.control.languageDialog()); -map.dialog = L.control.lokDialog(); -map.addControl(map.dialog); -map.addControl(L.control.contextMenu()); -map.addControl(L.control.infobar()); + +map.uiManager = L.control.uiManager(); +map.addControl(map.uiManager); + +map.uiManager.initializeBasicUI(); + map.loadDocument(global.socket); -map.addControl(L.control.userList()); global.socket = map._socket; window.addEventListener('beforeunload', function () { diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js index ca4550593..b333774da 100644 --- a/loleaflet/src/map/Map.js +++ b/loleaflet/src/map/Map.js @@ -53,6 +53,12 @@ L.Map = L.Evented.extend({ cursorURL: 'images/cursors' }, + // uiManager is set in main.js + uiManager: null, + + // Control.LokDialog instance, is set in Control.UIManager.js + dialog: null, + lastActiveTime: Date.now(), initialize: function (id, options) { // (HTMLElement or String, Object) _______________________________________________ Libreoffice-commits mailing list libreoffice-comm...@lists.freedesktop.org https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits