loleaflet/Makefile.am | 1 loleaflet/src/control/Control.JSDialogBuilder.js | 4 loleaflet/src/control/Control.MobileTopBar.js | 216 +++++++++++++++++++++++ loleaflet/src/control/Control.StatusBar.js | 21 -- loleaflet/src/control/Control.Toolbar.js | 44 ---- loleaflet/src/layer/tile/CalcTileLayer.js | 39 ---- loleaflet/src/layer/tile/ImpressTileLayer.js | 39 ---- loleaflet/src/layer/tile/WriterTileLayer.js | 41 ---- 8 files changed, 227 insertions(+), 178 deletions(-)
New commits: commit 651a7bba1c6ce68bfbd54f7cc8c9622b4d036af0 Author: Szymon Kłos <szymon.k...@collabora.com> AuthorDate: Fri Apr 10 17:36:40 2020 +0200 Commit: Szymon Kłos <szymon.k...@collabora.com> CommitDate: Wed Apr 15 11:43:09 2020 +0200 Move mobile top bar to separate file Change-Id: I26fc5be1b73b4ff68be00c21a6691c7712d08c1e Reviewed-on: https://gerrit.libreoffice.org/c/online/+/92158 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 cef67ce69..303e53d6b 100644 --- a/loleaflet/Makefile.am +++ b/loleaflet/Makefile.am @@ -264,6 +264,7 @@ LOLEAFLET_JS =\ src/control/Control.Scale.js \ src/control/Control.StatusBar.js \ src/control/Control.SearchBar.js \ + src/control/Control.MobileTopBar.js \ src/control/Control.Layers.js \ src/control/Search.js \ src/control/Permission.js \ diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js index 8727e065c..7ff08ce86 100644 --- a/loleaflet/src/control/Control.JSDialogBuilder.js +++ b/loleaflet/src/control/Control.JSDialogBuilder.js @@ -4,7 +4,7 @@ * from the JSON description provided by the server. */ -/* global $ _ _UNO */ +/* global $ w2ui _ _UNO */ L.Control.JSDialogBuilder = L.Control.extend({ @@ -1570,7 +1570,7 @@ L.Control.JSDialogBuilder = L.Control.extend({ if (builder.wizard) { $(menuEntry).click(function() { if (window.insertionMobileWizard) - window.onClick(null, 'insertion_mobile_wizard'); + w2ui['actionbar'].click('insertion_mobile_wizard'); else if (window.mobileMenuWizard) $('#main-menu-state').click(); else if (window.contextMenuWizard) { diff --git a/loleaflet/src/control/Control.MobileTopBar.js b/loleaflet/src/control/Control.MobileTopBar.js new file mode 100644 index 000000000..2d4a917f3 --- /dev/null +++ b/loleaflet/src/control/Control.MobileTopBar.js @@ -0,0 +1,216 @@ +/* -*- js-indent-level: 8 -*- */ +/* + * L.Control.SearchBar + */ + +/* global $ w2ui _ _UNO */ +L.Control.MobileTopBar = L.Control.extend({ + + options: { + doctype: 'text' + }, + + initialize: function (docType) { + L.setOptions(this, {docType: docType}); + }, + + onAdd: function (map) { + this.map = map; + this.create(); + + map.on('updatepermission', this.onUpdatePermission, this); + }, + + getToolItems: function(docType) { + if (docType == 'text') { + return [ + {type: 'button', id: 'closemobile', img: 'closemobile'}, + {type: 'spacer'}, + {type: 'button', id: 'undo', img: 'undo', hint: _UNO('.uno:Undo'), uno: 'Undo', disabled: true}, + {type: 'button', id: 'redo', img: 'redo', hint: _UNO('.uno:Redo'), uno: 'Redo', disabled: true}, + {type: 'button', id: 'mobile_wizard', img: 'mobile_wizard', disabled: true}, + {type: 'button', id: 'insertion_mobile_wizard', img: 'insertion_mobile_wizard', disabled: true}, + {type: 'button', id: 'insertcomment', img: 'insertcomment', disabled: true}, + {type: 'button', id: 'fullscreen', img: 'fullscreen', hint: _UNO('.uno:FullScreen', 'text')}, + {type: 'drop', id: 'userlist', img: 'users', html: '<div id="userlist_container"><table id="userlist_table"><tbody></tbody></table>' + + '<hr><table class="loleaflet-font" id="editor-btn">' + + '<tr>' + + '<td><input type="checkbox" name="alwaysFollow" id="follow-checkbox" onclick="editorUpdate(event)"></td>' + + '<td>' + _('Always follow the editor') + '</td>' + + '</tr>' + + '</table>' + + '<p id="currently-msg">' + _('Current') + ' - <b><span id="current-editor"></span></b></p>' + + '</div>' + }, + ]; + } else if (docType == 'spreadsheet') { + return [ + {type: 'button', id: 'closemobile', img: 'closemobile'}, + {type: 'spacer'}, + {type: 'button', id: 'undo', img: 'undo', hint: _UNO('.uno:Undo'), uno: 'Undo', disabled: true}, + {type: 'button', id: 'redo', img: 'redo', hint: _UNO('.uno:Redo'), uno: 'Redo', disabled: true}, + {type: 'button', id: 'mobile_wizard', img: 'mobile_wizard', disabled: true}, + {type: 'button', id: 'insertion_mobile_wizard', img: 'insertion_mobile_wizard', disabled: true}, +// {type: 'button', id: 'insertcomment', img: 'insertcomment', disabled: true}, + {type: 'button', id: 'fullscreen', img: 'fullscreen', hint: _UNO('.uno:FullScreen', 'text')}, + {type: 'drop', id: 'userlist', img: 'users', html: '<div id="userlist_container"><table id="userlist_table"><tbody></tbody></table>' + + '<hr><table class="loleaflet-font" id="editor-btn">' + + '<tr>' + + '<td><input type="checkbox" name="alwaysFollow" id="follow-checkbox" onclick="editorUpdate(event)"></td>' + + '<td>' + _('Always follow the editor') + '</td>' + + '</tr>' + + '</table>' + + '<p id="currently-msg">' + _('Current') + ' - <b><span id="current-editor"></span></b></p>' + + '</div>' + }, + ]; + } else if (docType == 'presentation') { + return [ + {type: 'button', id: 'closemobile', img: 'closemobile'}, + {type: 'spacer'}, + {type: 'button', id: 'undo', img: 'undo', hint: _UNO('.uno:Undo'), uno: 'Undo', disabled: true}, + {type: 'button', id: 'redo', img: 'redo', hint: _UNO('.uno:Redo'), uno: 'Redo', disabled: true}, + {type: 'button', id: 'fullscreen-presentation', img: 'fullscreen-presentation', hint: _UNO('.uno:FullScreen', 'presentation')}, + {type: 'button', id: 'mobile_wizard', img: 'mobile_wizard', disabled: true}, + {type: 'button', id: 'insertion_mobile_wizard', img: 'insertion_mobile_wizard', disabled: true}, + {type: 'button', id: 'insertcomment', img: 'insertcomment', disabled: true}, + {type: 'drop', id: 'userlist', img: 'users', hidden: true, html: '<div id="userlist_container"><table id="userlist_table"><tbody></tbody></table>' + + '<hr><table class="loleaflet-font" id="editor-btn">' + + '<tr>' + + '<td><input type="checkbox" name="alwaysFollow" id="follow-checkbox" onclick="editorUpdate(event)"></td>' + + '<td>' + _('Always follow the editor') + '</td>' + + '</tr>' + + '</table>' + + '<p id="currently-msg">' + _('Current') + ' - <b><span id="current-editor"></span></b></p>' + + '</div>' + }, + ]; + } + }, + + create: function() { + var toolItems = this.getToolItems(this.options.docType); + var that = this; + + var toolbar = $('#toolbar-up'); + toolbar.w2toolbar({ + name: 'actionbar', + tooltip: 'bottom', + items: toolItems, + onClick: function (e) { + that.onClick(e, e.target); + window.hideTooltip(this, e.target); + } + }); + toolbar.bind('touchstart', function(e) { + w2ui['actionbar'].touchStarted = true; + var touchEvent = e.originalEvent; + if (touchEvent && touchEvent.touches.length > 1) { + L.DomEvent.preventDefault(e); + } + }); + }, + + onClick: function(e, id, item) { + if ('actionbar' in w2ui && w2ui['actionbar'].get(id) !== null) { + var toolbar = w2ui['actionbar']; + item = toolbar.get(id); + } + + // In the iOS app we don't want clicking on the toolbar to pop up the keyboard. + if (!window.ThisIsTheiOSApp && id !== 'zoomin' && id !== 'zoomout' && id !== 'mobile_wizard' && id !== 'insertion_mobile_wizard') { + this.map.focus(this.map.canAcceptKeyboardInput()); // Maintain same keyboard state. + } + + if (item.disabled) { + return; + } + + if (item.uno) { + if (item.unosheet && this.map.getDocType() === 'spreadsheet') { + this.map.toggleCommandState(item.unosheet); + } + else { + this.map.toggleCommandState(window.getUNOCommand(item.uno)); + } + } + else if (id === 'insertcomment') { + this.map.insertComment(); + } + else if (id === 'closemobile') { + // Call global onClick handler + window.onClick(e, id, item); + } + else if (id === 'fullscreen') { + if (item.checked) { + toolbar.uncheck(id); + } + else { + toolbar.check(id); + } + L.toggleFullScreen(); + } + else if (id === 'fullscreen-presentation') { + // Call global onClick handler + window.onClick(e, id, item); + } + else if (id === 'insertcomment') { + this.map.insertComment(); + } + else if (id === 'mobile_wizard') { + if (window.mobileWizard) { + window.mobileWizard = false; + this.map.sendUnoCommand('.uno:SidebarHide'); + this.map.fire('closemobilewizard'); + toolbar.uncheck(id); + } + else { + if (window.insertionMobileWizard) + this.onClick(null, 'insertion_mobile_wizard'); + window.mobileWizard = true; + this.map.sendUnoCommand('.uno:SidebarShow'); + this.map.fire('showwizardsidebar'); + toolbar.check(id); + } + } + else if (id === 'insertion_mobile_wizard') { + if (window.insertionMobileWizard) { + window.insertionMobileWizard = false; + this.map.fire('closemobilewizard'); + toolbar.uncheck(id); + } + else { + if (window.mobileWizard) + this.onClick(null, 'mobile_wizard'); + window.insertionMobileWizard = true; + var menuData = this.map.menubar.generateInsertMenuStructure(); + this.map.fire('mobilewizard', menuData); + toolbar.check(id); + } + } + }, + + onUpdatePermission: function(e) { + var toolbar; + var toolbarDownButtons = ['next', 'prev', 'mobile_wizard', 'insertion_mobile_wizard', 'insertcomment']; + if (e.perm === 'edit') { + toolbar = w2ui['actionbar']; + if (toolbar) { + toolbarDownButtons.forEach(function(id) { + toolbar.enable(id); + }); + } + } else { + toolbar = w2ui['actionbar']; + if (toolbar) { + toolbarDownButtons.forEach(function(id) { + toolbar.disable(id); + }); + } + } + } +}); + +L.control.mobileTopBar = function (docType) { + return new L.Control.MobileTopBar(docType); +}; diff --git a/loleaflet/src/control/Control.StatusBar.js b/loleaflet/src/control/Control.StatusBar.js index a46ab6604..544302d2d 100644 --- a/loleaflet/src/control/Control.StatusBar.js +++ b/loleaflet/src/control/Control.StatusBar.js @@ -26,7 +26,6 @@ L.Control.StatusBar = L.Control.extend({ map.on('commandvalues', this.onCommandValues, this); map.on('commandstatechanged', this.onCommandStateChanged, this); map.on('deselectuser', this.deselectUser, this); - map.on('updatepermission', this.onUpdatePermission, this); }, @@ -694,26 +693,6 @@ L.Control.StatusBar = L.Control.extend({ userlistItem.html = $(userlistItem.html).find('#user-' + e.viewId).removeClass('selected-user').parent().parent().parent()[0].outerHTML; }, - - onUpdatePermission: function(e) { - var toolbar; - var toolbarDownButtons = ['next', 'prev', 'mobile_wizard', 'insertion_mobile_wizard', 'insertcomment']; - if (e.perm === 'edit') { - toolbar = w2ui['actionbar']; - if (toolbar) { - toolbarDownButtons.forEach(function(id) { - toolbar.enable(id); - }); - } - } else { - toolbar = w2ui['actionbar']; - if (toolbar) { - toolbarDownButtons.forEach(function(id) { - toolbar.disable(id); - }); - } - } - } }); L.control.statusBar = function () { diff --git a/loleaflet/src/control/Control.Toolbar.js b/loleaflet/src/control/Control.Toolbar.js index 73c693010..06ffa7cdd 100644 --- a/loleaflet/src/control/Control.Toolbar.js +++ b/loleaflet/src/control/Control.Toolbar.js @@ -166,9 +166,6 @@ function onClick(e, id, item) { else if (id === 'insertannotation') { map.insertComment(); } - else if (id === 'insertcomment') { - map.insertComment(); - } else if (id === 'insertpage') { map.insertPage(); } @@ -252,15 +249,6 @@ function onClick(e, id, item) { else if (id === 'fold' || id === 'hamburger-tablet') { map.toggleMenubar(); } - else if (id === 'fullscreen') { - if (item.checked) { - toolbar.uncheck(id); - } - else { - toolbar.check(id); - } - L.toggleFullScreen(); - } else if (id === 'close' || id === 'closemobile') { if (window.ThisIsAMobileApp) { window.postMobileMessage('BYE'); @@ -272,37 +260,6 @@ function onClick(e, id, item) { map.remove(); } } - else if (id === 'mobile_wizard') { - if (window.mobileWizard) { - window.mobileWizard = false; - map.sendUnoCommand('.uno:SidebarHide'); - map.fire('closemobilewizard'); - toolbar.uncheck(id); - } - else { - if (window.insertionMobileWizard) - this.onClick(null, 'insertion_mobile_wizard'); - window.mobileWizard = true; - map.sendUnoCommand('.uno:SidebarShow'); - map.fire('showwizardsidebar'); - toolbar.check(id); - } - } - else if (id === 'insertion_mobile_wizard') { - if (window.insertionMobileWizard) { - window.insertionMobileWizard = false; - map.fire('closemobilewizard'); - toolbar.uncheck(id); - } - else { - if (window.mobileWizard) - this.onClick(null, 'mobile_wizard'); - window.insertionMobileWizard = true; - var menuData = map.menubar.generateInsertMenuStructure(); - map.fire('mobilewizard', menuData); - toolbar.check(id); - } - } else if (id === 'link') { map.showHyperlinkDialog(); } @@ -2136,5 +2093,6 @@ global.insertShapes = insertShapes; global.createShapesPanel = createShapesPanel; global.onUpdatePermission = onUpdatePermission; global.setupSearchInput = setupSearchInput; +global.getUNOCommand = getUNOCommand; }(window)); diff --git a/loleaflet/src/layer/tile/CalcTileLayer.js b/loleaflet/src/layer/tile/CalcTileLayer.js index a1af6f75e..446e339eb 100644 --- a/loleaflet/src/layer/tile/CalcTileLayer.js +++ b/loleaflet/src/layer/tile/CalcTileLayer.js @@ -100,44 +100,9 @@ L.CalcTileLayer = L.TileLayer.extend({ {type: 'break', id: 'break-number'}, */ ]; - var toolbar = $('#toolbar-up'); - toolbar.w2toolbar({ - name: 'actionbar', - tooltip: 'bottom', - items: [ - {type: 'button', id: 'closemobile', img: 'closemobile'}, - {type: 'spacer'}, - {type: 'button', id: 'undo', img: 'undo', hint: _UNO('.uno:Undo'), uno: 'Undo', disabled: true}, - {type: 'button', id: 'redo', img: 'redo', hint: _UNO('.uno:Redo'), uno: 'Redo', disabled: true}, - {type: 'button', id: 'mobile_wizard', img: 'mobile_wizard', disabled: true}, - {type: 'button', id: 'insertion_mobile_wizard', img: 'insertion_mobile_wizard', disabled: true}, -// {type: 'button', id: 'insertcomment', img: 'insertcomment', disabled: true}, - {type: 'button', id: 'fullscreen', img: 'fullscreen', hint: _UNO('.uno:FullScreen', 'text')}, - {type: 'drop', id: 'userlist', img: 'users', html: '<div id="userlist_container"><table id="userlist_table"><tbody></tbody></table>' + - '<hr><table class="loleaflet-font" id="editor-btn">' + - '<tr>' + - '<td><input type="checkbox" name="alwaysFollow" id="follow-checkbox" onclick="editorUpdate(event)"></td>' + - '<td>' + _('Always follow the editor') + '</td>' + - '</tr>' + - '</table>' + - '<p id="currently-msg">' + _('Current') + ' - <b><span id="current-editor"></span></b></p>' + - '</div>' - }, - ], - onClick: function (e) { - window.onClick(e, e.target); - window.hideTooltip(this, e.target); - } - }); - toolbar.bind('touchstart', function(e) { - w2ui['actionbar'].touchStarted = true; - var touchEvent = e.originalEvent; - if (touchEvent && touchEvent.touches.length > 1) { - L.DomEvent.preventDefault(e); - } - }); + map.addControl(L.control.mobileTopBar('spreadsheet')); - toolbar = $('#formulabar'); + var toolbar = $('#formulabar'); toolbar.w2toolbar({ name: 'formulabar', tooltip: 'bottom', diff --git a/loleaflet/src/layer/tile/ImpressTileLayer.js b/loleaflet/src/layer/tile/ImpressTileLayer.js index e91d32094..36dabf7ba 100644 --- a/loleaflet/src/layer/tile/ImpressTileLayer.js +++ b/loleaflet/src/layer/tile/ImpressTileLayer.js @@ -135,44 +135,9 @@ L.ImpressTileLayer = L.TileLayer.extend({ {type: 'button', id: 'defaultbullet', img: 'bullet', hint: _UNO('.uno:DefaultBullet', '', true), uno: 'DefaultBullet', disabled: true}, ]; - var toolbar = $('#toolbar-up'); - toolbar.w2toolbar({ - name: 'actionbar', - tooltip: 'bottom', - items: [ - {type: 'button', id: 'closemobile', img: 'closemobile'}, - {type: 'spacer'}, - {type: 'button', id: 'undo', img: 'undo', hint: _UNO('.uno:Undo'), uno: 'Undo', disabled: true}, - {type: 'button', id: 'redo', img: 'redo', hint: _UNO('.uno:Redo'), uno: 'Redo', disabled: true}, - {type: 'button', id: 'fullscreen-presentation', img: 'fullscreen-presentation', hint: _UNO('.uno:FullScreen', 'presentation')}, - {type: 'button', id: 'mobile_wizard', img: 'mobile_wizard', disabled: true}, - {type: 'button', id: 'insertion_mobile_wizard', img: 'insertion_mobile_wizard', disabled: true}, - {type: 'button', id: 'insertcomment', img: 'insertcomment', disabled: true}, - {type: 'drop', id: 'userlist', img: 'users', hidden: true, html: '<div id="userlist_container"><table id="userlist_table"><tbody></tbody></table>' + - '<hr><table class="loleaflet-font" id="editor-btn">' + - '<tr>' + - '<td><input type="checkbox" name="alwaysFollow" id="follow-checkbox" onclick="editorUpdate(event)"></td>' + - '<td>' + _('Always follow the editor') + '</td>' + - '</tr>' + - '</table>' + - '<p id="currently-msg">' + _('Current') + ' - <b><span id="current-editor"></span></b></p>' + - '</div>' - }, - ], - onClick: function (e) { - window.onClick(e, e.target); - window.hideTooltip(this, e.target); - } - }); - toolbar.bind('touchstart', function(e) { - w2ui['actionbar'].touchStarted = true; - var touchEvent = e.originalEvent; - if (touchEvent && touchEvent.touches.length > 1) { - L.DomEvent.preventDefault(e); - } - }); + map.addControl(L.control.mobileTopBar('presentation')); - toolbar = $('#presentation-toolbar'); + var toolbar = $('#presentation-toolbar'); toolbar.w2toolbar({ name: 'presentation-toolbar', tooltip: 'bottom', diff --git a/loleaflet/src/layer/tile/WriterTileLayer.js b/loleaflet/src/layer/tile/WriterTileLayer.js index caff2e102..e9e89ddbc 100644 --- a/loleaflet/src/layer/tile/WriterTileLayer.js +++ b/loleaflet/src/layer/tile/WriterTileLayer.js @@ -80,44 +80,7 @@ L.WriterTileLayer = L.TileLayer.extend({ {type: 'button', id: 'decrementindent', img: 'decrementindent', hint: _UNO('.uno:DecrementIndent', '', true), uno: 'DecrementIndent', disabled: true}, ]; - var toolbar = $('#toolbar-up'); - toolbar.w2toolbar({ - name: 'actionbar', - tooltip: 'bottom', - items: [ - {type: 'button', id: 'closemobile', img: 'closemobile'}, - {type: 'spacer'}, - {type: 'button', id: 'undo', img: 'undo', hint: _UNO('.uno:Undo'), uno: 'Undo', disabled: true}, - {type: 'button', id: 'redo', img: 'redo', hint: _UNO('.uno:Redo'), uno: 'Redo', disabled: true}, - {type: 'button', id: 'mobile_wizard', img: 'mobile_wizard', disabled: true}, - {type: 'button', id: 'insertion_mobile_wizard', img: 'insertion_mobile_wizard', disabled: true}, - {type: 'button', id: 'insertcomment', img: 'insertcomment', disabled: true}, - {type: 'button', id: 'fullscreen', img: 'fullscreen', hint: _UNO('.uno:FullScreen', 'text')}, - {type: 'drop', id: 'userlist', img: 'users', html: '<div id="userlist_container"><table id="userlist_table"><tbody></tbody></table>' + - '<hr><table class="loleaflet-font" id="editor-btn">' + - '<tr>' + - '<td><input type="checkbox" name="alwaysFollow" id="follow-checkbox" onclick="editorUpdate(event)"></td>' + - '<td>' + _('Always follow the editor') + '</td>' + - '</tr>' + - '</table>' + - '<p id="currently-msg">' + _('Current') + ' - <b><span id="current-editor"></span></b></p>' + - '</div>' - }, - ], - onClick: function (e) { - window.onClick(e, e.target); - window.hideTooltip(this, e.target); - } - }); - toolbar.bind('touchstart', function(e) { - w2ui['actionbar'].touchStarted = true; - var touchEvent = e.originalEvent; - if (touchEvent && touchEvent.touches.length > 1) { - L.DomEvent.preventDefault(e); - } - }); - - toolbar = $('#toolbar-down'); + var toolbar = $('#toolbar-down'); toolbar.w2toolbar({ name: 'editbar', tooltip: 'top', @@ -142,6 +105,8 @@ L.WriterTileLayer = L.TileLayer.extend({ } }); + map.addControl(L.control.mobileTopBar('text')); + map.addControl(L.control.searchBar()); map.on('updatepermission', window.onUpdatePermission); _______________________________________________ Libreoffice-commits mailing list libreoffice-comm...@lists.freedesktop.org https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits