loleaflet/Makefile.am | 4 loleaflet/src/control/Control.SigningBar.js | 64 +++ loleaflet/src/control/Control.Toolbar.js | 564 ---------------------------- loleaflet/src/control/Control.TopToolbar.js | 554 +++++++++++++++++++++++++++ 4 files changed, 628 insertions(+), 558 deletions(-)
New commits: commit b69000b366b1b60782dbb0140a137f7658171ac4 Author: Szymon Kłos <szymon.k...@collabora.com> AuthorDate: Thu Apr 16 13:19:55 2020 +0200 Commit: Szymon Kłos <szymon.k...@collabora.com> CommitDate: Thu Apr 16 16:01:30 2020 +0200 Move top toolbar to separate file Change-Id: I0465b32af1fbb2534aa6db41342df3993b7837bf Reviewed-on: https://gerrit.libreoffice.org/c/online/+/92349 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 7017c6e72..6c10bc441 100644 --- a/loleaflet/Makefile.am +++ b/loleaflet/Makefile.am @@ -271,6 +271,7 @@ LOLEAFLET_JS =\ src/control/Control.SheetsBar.js \ src/control/Control.PresentationBar.js \ src/control/Control.SigningBar.js \ + src/control/Control.TopToolbar.js \ src/control/Control.Layers.js \ src/control/Search.js \ src/control/Permission.js \ @@ -545,6 +546,7 @@ pot: src/control/Control.StatusBar.js \ src/control/Control.Tabs.js \ src/control/Control.Toolbar.js \ + src/control/Control.TopToolbar.js \ src/control/Control.UserList.js \ src/control/Ruler.js \ src/control/Signing.js \ diff --git a/loleaflet/src/control/Control.Toolbar.js b/loleaflet/src/control/Control.Toolbar.js index 33fd4ac46..005fbd21c 100644 --- a/loleaflet/src/control/Control.Toolbar.js +++ b/loleaflet/src/control/Control.Toolbar.js @@ -3,42 +3,12 @@ * LibreOffice Online toolbar */ -/* global $ w2ui w2utils vex _ _UNO */ +/* global $ w2ui vex _ */ /*eslint indent: [error, "tab", { "outerIIFEBody": 0 }]*/ (function(global) { var map; -function _updateVisibilityForToolbar(toolbar) { - if (!toolbar) - return; - - var toShow = []; - var toHide = []; - - toolbar.items.forEach(function(item) { - if (window.ThisIsTheiOSApp && window.mode.isTablet() && item.iosapptablet === false) { - toHide.push(item.id); - } - else if (((window.mode.isMobile() && item.mobile === false) || (window.mode.isTablet() && item.tablet === false) || (window.mode.isDesktop() && item.desktop === false) || (!window.ThisIsAMobileApp && item.mobilebrowser === false)) && !item.hidden) { - toHide.push(item.id); - } - else if (((window.mode.isMobile() && item.mobile === true) || (window.mode.isTablet() && item.tablet === true) || (window.mode.isDesktop() && item.desktop === true) || (window.ThisIsAMobileApp && item.mobilebrowser === true)) && item.hidden) { - toShow.push(item.id); - } - }); - - console.log('explicitly hiding: ' + toHide); - console.log('explicitly showing: ' + toShow); - - toHide.forEach(function(item) { toolbar.hide(item); }); - toShow.forEach(function(item) { toolbar.show(item); }); -} - -function _updateToolbarsVisibility() { - _updateVisibilityForToolbar(w2ui['editbar']); -} - function resizeToolbar() { if ($(window).width() !== map.getSize().x) { var toolbarUp = w2ui['editbar']; @@ -620,9 +590,6 @@ function hideTooltip(toolbar, id) { } } -var stylesSelectValue; -var fontsSelectValue; - function createToolbar() { if (window.mode.isMobile()) { @@ -634,197 +601,8 @@ function createToolbar() { } } -// mobile:false means hide it both for normal Online used from a mobile phone browser, and in a mobile app on a mobile phone -// mobilebrowser:false means hide it for normal Online used from a mobile browser, but don't hide it in a mobile app -// tablet:true means show it in normal Online from a tablet browser, and in a mobile app on a tablet -// tablet:false means hide it in normal Online used from a tablet browser, and in a mobile app on a tablet - -function createMainToolbar() { - var toolItems = [ - {type: 'button', id: 'closemobile', img: 'closemobile', desktop: false, mobile: false, tablet: true, hidden: true}, - {type: 'button', id: 'save', img: 'save', hint: _UNO('.uno:Save')}, - {type: 'button', id: 'print', img: 'print', hint: _UNO('.uno:Print', 'text'), mobile: false, tablet: false}, - {type: 'break', id: 'savebreak', mobile: false}, - {type: 'button', id: 'undo', img: 'undo', hint: _UNO('.uno:Undo'), uno: 'Undo', disabled: true, mobile: false}, - {type: 'button', id: 'redo', img: 'redo', hint: _UNO('.uno:Redo'), uno: 'Redo', disabled: true, mobile: false}, - {type: 'button', id: 'formatpaintbrush', img: 'copyformat', hint: _UNO('.uno:FormatPaintbrush'), uno: 'FormatPaintbrush', mobile: false}, - {type: 'button', id: 'reset', img: 'deleteformat', hint: _UNO('.uno:ResetAttributes', 'text'), uno: 'ResetAttributes', mobile: false}, - {type: 'break', mobile: false, tablet: false,}, - {type: 'html', id: 'styles', - html: '<select class="styles-select"><option>' + _('Default Style') + '</option></select>', - onRefresh: function (edata) { - if (!edata.item.html) { - edata.isCancelled = true; - } else { - $.extend(edata, { onComplete: function (e) { - $('.styles-select').select2(); - e.item.html = undefined; - }}); - } - }, hidden: true, desktop: true, mobile: false, tablet: false}, - {type: 'html', id: 'fonts', - html: '<select class="fonts-select"><option>Liberation Sans</option></select>', - onRefresh: function (edata) { - if (!edata.item.html) { - edata.isCancelled = true; - } else { - $.extend(edata, { onComplete: function (e) { - $('.fonts-select').select2(); - e.item.html = undefined; - }}); - } - }, mobile: false}, - {type: 'html', id: 'fontsizes', - html: '<select class="fontsizes-select">', - onRefresh: function (edata) { - if (!edata.item.html) { - edata.isCancelled = true; - } else { - $.extend(edata, { onComplete: function (e) { - $('.fontsizes-select').select2({ dropdownAutoWidth: true, width: 'auto'}); - e.item.html = undefined; - }}); - } - }, mobile: false}, - {type: 'break', id: 'breakstyles', mobile: false, tablet: false }, - {type: 'button', id: 'languagecode', desktop: false, mobile: true, tablet: false}, - {type: 'button', id: 'bold', img: 'bold', hint: _UNO('.uno:Bold'), uno: 'Bold'}, - {type: 'button', id: 'italic', img: 'italic', hint: _UNO('.uno:Italic'), uno: 'Italic'}, - {type: 'button', id: 'underline', img: 'underline', hint: _UNO('.uno:Underline'), uno: 'Underline'}, - {type: 'button', id: 'strikeout', img: 'strikeout', hint: _UNO('.uno:Strikeout'), uno: 'Strikeout'}, - {type: 'break', id: 'breakformatting'}, - {type: 'text-color', id: 'fontcolor', img: 'textcolor', hint: _UNO('.uno:FontColor')}, - {type: 'color', id: 'backcolor', img: 'backcolor', hint: _UNO('.uno:BackColor', 'text'), hidden: true}, - {type: 'color', id: 'backgroundcolor', img: 'backgroundcolor', hint: _UNO('.uno:BackgroundColor'), hidden: true}, - {type: 'break' , id: 'breakcolor', mobile:false}, - {type: 'button', id: 'leftpara', img: 'alignleft', hint: _UNO('.uno:LeftPara', '', true), - uno: {textCommand: 'LeftPara', objectCommand: 'ObjectAlignLeft'}, - hidden: true, unosheet: 'AlignLeft', disabled: true}, - {type: 'button', id: 'centerpara', img: 'alignhorizontal', hint: _UNO('.uno:CenterPara', '', true), - uno: {textCommand: 'CenterPara', objectCommand: 'AlignCenter'}, - hidden: true, unosheet: 'AlignHorizontalCenter', disabled: true}, - {type: 'button', id: 'rightpara', img: 'alignright', hint: _UNO('.uno:RightPara', '', true), - uno: {textCommand: 'RightPara', objectCommand: 'ObjectAlignRight'}, - hidden: true, unosheet: 'AlignRight', disabled: true}, - {type: 'button', id: 'justifypara', img: 'alignblock', hint: _UNO('.uno:JustifyPara', '', true), uno: 'JustifyPara', hidden: true, unosheet: '', disabled: true}, - {type: 'break', id: 'breakpara', hidden: true}, - {type: 'drop', id: 'setborderstyle', img: 'setborderstyle', hint: _('Borders'), hidden: true, - html: '<table id="setborderstyle-grid"><tr><td class="w2ui-tb-image w2ui-icon frame01" onclick="setBorderStyle(1)"></td>' + - '<td class="w2ui-tb-image w2ui-icon frame02" onclick="setBorderStyle(2)"></td><td class="w2ui-tb-image w2ui-icon frame03" onclick="setBorderStyle(3)"></td>' + - '<td class="w2ui-tb-image w2ui-icon frame04" onclick="setBorderStyle(4)"></td></tr><tr><td class="w2ui-tb-image w2ui-icon frame05" onclick="setBorderStyle(5)"></td>' + - '<td class="w2ui-tb-image w2ui-icon frame06" onclick="setBorderStyle(6)"></td><td class="w2ui-tb-image w2ui-icon frame07" onclick="setBorderStyle(7)"></td>' + - '<td class="w2ui-tb-image w2ui-icon frame08" onclick="setBorderStyle(8)"></td></tr><tr><td class="w2ui-tb-image w2ui-icon frame09" onclick="setBorderStyle(9)"></td>' + - '<td class="w2ui-tb-image w2ui-icon frame10" onclick="setBorderStyle(10)"></td><td class="w2ui-tb-image w2ui-icon frame11" onclick="setBorderStyle(11)"></td>' + - '<td class="w2ui-tb-image w2ui-icon frame12" onclick="setBorderStyle(12)"></td></tr><tr>' + - '<td colspan="4" class="w2ui-tb-image w2ui-icon frame13" onclick="setBorderStyle(0)"><div id="div-frame13">' + _('More...') + '</div></td></tr></table>' - }, - {type: 'button', id: 'togglemergecells', img: 'togglemergecells', hint: _UNO('.uno:ToggleMergeCells', 'spreadsheet', true), hidden: true, uno: 'ToggleMergeCells', disabled: true}, - {type: 'break', id: 'breakmergecells', hidden: true}, - {type: 'menu', id: 'textalign', img: 'alignblock', hint: _UNO('.uno:TextAlign'), hidden: true, - items: [ - {id: 'alignleft', text: _UNO('.uno:AlignLeft', 'spreadsheet', true), icon: 'alignleft', uno: 'AlignLeft'}, - {id: 'alignhorizontalcenter', text: _UNO('.uno:AlignHorizontalCenter', 'spreadsheet', true), icon: 'alignhorizontal', uno: 'AlignHorizontalCenter'}, - {id: 'alignright', text: _UNO('.uno:AlignRight', 'spreadsheet', true), icon: 'alignright', uno: 'AlignRight'}, - {id: 'alignblock', text: _UNO('.uno:AlignBlock', 'spreadsheet', true), icon: 'alignblock', uno: 'AlignBlock'}, - ]}, - {type: 'menu', id: 'linespacing', img: 'linespacing', hint: _UNO('.uno:FormatSpacingMenu'), hidden: true, - items: [ - {id: 'spacepara1', text: _UNO('.uno:SpacePara1'), uno: 'SpacePara1'}, - {id: 'spacepara15', text: _UNO('.uno:SpacePara15'), uno: 'SpacePara15'}, - {id: 'spacepara2', text: _UNO('.uno:SpacePara2'), uno: 'SpacePara2'}, - {type: 'break'}, - {id: 'paraspaceincrease', text: _UNO('.uno:ParaspaceIncrease'), uno: 'ParaspaceIncrease'}, - {id: 'paraspacedecrease', text: _UNO('.uno:ParaspaceDecrease'), uno: 'ParaspaceDecrease'} - ]}, - {type: 'button', id: 'wraptext', img: 'wraptext', hint: _UNO('.uno:WrapText', 'spreadsheet', true), hidden: true, uno: 'WrapText', disabled: true}, - {type: 'break', id: 'breakspacing', hidden: true}, - {type: 'button', id: 'defaultnumbering', img: 'numbering', hint: _UNO('.uno:DefaultNumbering', '', true), hidden: true, uno: 'DefaultNumbering', disabled: true}, - {type: 'button', id: 'defaultbullet', img: 'bullet', hint: _UNO('.uno:DefaultBullet', '', true), hidden: true, uno: 'DefaultBullet', disabled: true}, - {type: 'break', id: 'breakbullet', hidden: true}, - {type: 'button', id: 'incrementindent', img: 'incrementindent', hint: _UNO('.uno:IncrementIndent', '', true), uno: 'IncrementIndent', hidden: true, disabled: true}, - {type: 'button', id: 'decrementindent', img: 'decrementindent', hint: _UNO('.uno:DecrementIndent', '', true), uno: 'DecrementIndent', hidden: true, disabled: true}, - {type: 'break', id: 'breakindent', hidden: true}, - {type: 'button', id: 'sortascending', img: 'sortascending', hint: _UNO('.uno:SortAscending', 'spreadsheet', true), uno: 'SortAscending', disabled: true, hidden: true}, - {type: 'button', id: 'sortdescending', img: 'sortdescending', hint: _UNO('.uno:SortDescending', 'spreadsheet', true), uno: 'SortDescending', disabled: true, hidden: true}, - {type: 'break', id: 'breaksorting', hidden: true}, - {type: 'drop', id: 'conditionalformaticonset', img: 'conditionalformatdialog', hint: _UNO('.uno:ConditionalFormatMenu', 'spreadsheet', true), hidden: true, - html: '<table id="conditionalformatmenu-grid"><tr>' + - '<td class="w2ui-tb-image w2ui-icon iconset00" onclick="setConditionalFormatIconSet(0)"/><td class="w2ui-tb-image w2ui-icon iconset01" onclick="setConditionalFormatIconSet(1)"/><td class="w2ui-tb-image w2ui-icon iconset02" onclick="setConditionalFormatIconSet(2)"/></tr><tr>' + - '<td class="w2ui-tb-image w2ui-icon iconset03" onclick="setConditionalFormatIconSet(3)"/><td class="w2ui-tb-image w2ui-icon iconset04" onclick="setConditionalFormatIconSet(4)"/><td class="w2ui-tb-image w2ui-icon iconset05" onclick="setConditionalFormatIconSet(5)"/></tr><tr>' + - '<td class="w2ui-tb-image w2ui-icon iconset06" onclick="setConditionalFormatIconSet(6)"/><td class="w2ui-tb-image w2ui-icon iconset08" onclick="setConditionalFormatIconSet(8)"/><td class="w2ui-tb-image w2ui-icon iconset09" onclick="setConditionalFormatIconSet(9)"/></tr><tr>' + // iconset07 deliberately left out, see the .css for the reason - '<td class="w2ui-tb-image w2ui-icon iconset10" onclick="setConditionalFormatIconSet(10)"/><td class="w2ui-tb-image w2ui-icon iconset11" onclick="setConditionalFormatIconSet(11)"/><td class="w2ui-tb-image w2ui-icon iconset12" onclick="setConditionalFormatIconSet(12)"/></tr><tr>' + - '<td class="w2ui-tb-image w2ui-icon iconset13" onclick="setConditionalFormatIconSet(13)"/><td class="w2ui-tb-image w2ui-icon iconset14" onclick="setConditionalFormatIconSet(14)"/><td class="w2ui-tb-image w2ui-icon iconset15" onclick="setConditionalFormatIconSet(15)"/></tr><tr>' + - '<td class="w2ui-tb-image w2ui-icon iconset16" onclick="setConditionalFormatIconSet(16)"/><td class="w2ui-tb-image w2ui-icon iconset17" onclick="setConditionalFormatIconSet(17)"/><td class="w2ui-tb-image w2ui-icon iconset18" onclick="setConditionalFormatIconSet(18)"/></tr><tr>' + - '<td class="w2ui-tb-image w2ui-icon iconset19" onclick="setConditionalFormatIconSet(19)"/><td class="w2ui-tb-image w2ui-icon iconset20" onclick="setConditionalFormatIconSet(20)"/><td class="w2ui-tb-image w2ui-icon iconset21" onclick="setConditionalFormatIconSet(21)"/></tr></table>' - }, - {type: 'button', id: 'numberformatcurrency', img: 'numberformatcurrency', hint: _UNO('.uno:NumberFormatCurrency', 'spreadsheet', true), hidden: true, uno: 'NumberFormatCurrency', disabled: true}, - {type: 'button', id: 'numberformatpercent', img: 'numberformatpercent', hint: _UNO('.uno:NumberFormatPercent', 'spreadsheet', true), hidden: true, uno: 'NumberFormatPercent', disabled: true}, - {type: 'button', id: 'numberformatdecdecimals', img: 'numberformatdecdecimals', hint: _UNO('.uno:NumberFormatDecDecimals', 'spreadsheet', true), hidden: true, uno: 'NumberFormatDecDecimals', disabled: true}, - {type: 'button', id: 'numberformatincdecimals', img: 'numberformatincdecimals', hint: _UNO('.uno:NumberFormatIncDecimals', 'spreadsheet', true), hidden: true, uno: 'NumberFormatIncDecimals', disabled: true}, - {type: 'break', id: 'break-number', hidden: true}, - {type: 'button', id: 'inserttextbox', img: 'text', hint: _UNO('.uno:Text', '', true), uno: 'Text?CreateDirectly:bool=true', hidden: true}, - {type: 'button', id: 'insertannotation', img: 'annotation', hint: _UNO('.uno:InsertAnnotation', '', true), hidden: true}, - {type: 'drop', id: 'inserttable', img: 'inserttable', hint: _('Insert table'), hidden: true, overlay: {onShow: insertTable}, - html: '<div id="inserttable-wrapper"><div id="inserttable-popup" class="inserttable-pop ui-widget ui-corner-all"><div class="inserttable-grid"></div><div id="inserttable-status" class="loleaflet-font" style="padding: 5px;"><br/></div></div></div>'}, - {type: 'button', id: 'insertgraphic', img: 'insertgraphic', hint: _UNO('.uno:InsertGraphic', '', true)}, - {type: 'menu', id: 'menugraphic', img: 'insertgraphic', hint: _UNO('.uno:InsertGraphic', '', true), hidden: true, - items: [ - {id: 'localgraphic', text: _('Insert Local Image')}, - {id: 'remotegraphic', text: _UNO('.uno:InsertGraphic', '', true)}, - ]}, - {type: 'button', id: 'insertobjectchart', img: 'insertobjectchart', hint: _UNO('.uno:InsertObjectChart', '', true), uno: 'InsertObjectChart'}, - {type: 'drop', id: 'insertshapes', img: 'basicshapes_ellipse', hint: _('Insert shapes'), overlay: {onShow: insertShapes}, - html: '<div id="insertshape-wrapper"><div id="insertshape-popup" class="insertshape-pop ui-widget ui-corner-all"><div class="insertshape-grid"></div></div></div>'}, - {type: 'button', id: 'link', img: 'link', hint: _UNO('.uno:HyperlinkDialog', '', true), disabled: true}, - {type: 'button', id: 'insertsymbol', img: 'insertsymbol', hint: _UNO('.uno:InsertSymbol', '', true), uno: 'InsertSymbol'}, - {type: 'spacer'}, - {type: 'button', id: 'edit', img: 'edit'}, - {type: 'button', id: 'sidebar', img: 'sidebar_modify_page', hint: _UNO('.uno:Sidebar', '', true), uno: '.uno:Sidebar', hidden: true}, - {type: 'button', id: 'modifypage', img: 'sidebar_modify_page', hint: _UNO('.uno:ModifyPage', 'presentation', true), uno: '.uno:ModifyPage', hidden: true}, - {type: 'button', id: 'slidechangewindow', img: 'sidebar_slide_change', hint: _UNO('.uno:SlideChangeWindow', 'presentation', true), uno: '.uno:SlideChangeWindow', hidden: true}, - {type: 'button', id: 'customanimation', img: 'sidebar_custom_animation', hint: _UNO('.uno:CustomAnimation', 'presentation', true), uno: '.uno:CustomAnimation', hidden: true}, - {type: 'button', id: 'masterslidespanel', img: 'sidebar_master_slides', hint: _UNO('.uno:MasterSlidesPanel', 'presentation', true), uno: '.uno:MasterSlidesPanel', hidden: true}, - {type: 'break', id: 'breaksidebar', hidden: true}, - {type: 'button', id: 'fold', img: 'fold', desktop: true, mobile: false, hidden: true}, - {type: 'button', id: 'hamburger-tablet', img: 'hamburger', desktop: false, mobile: false, tablet: true, iosapptablet: false, hidden: true}, - {type: 'button', id: 'languagecode', desktop: false, mobile: true, tablet: false} - ]; - - var toolbar = $('#toolbar-up'); - toolbar.w2toolbar({ - name: 'editbar', - tooltip: 'bottom', - items: toolItems, - onClick: function (e) { - onClick(e, e.target); - hideTooltip(this, e.target); - }, - onRefresh: function(event) { - if ((event.target === 'styles' || event.target === 'fonts' || event.target === 'fontsizes') && event.item) { - var toolItem = $(this.box).find('#tb_'+ this.name +'_item_'+ w2utils.escapeId(event.item.id)); - if ((window.mode.isDesktop() && event.item.desktop == false) - || (window.mode.isTablet() && event.item.tablet == false)) { - toolItem.css('display', 'none'); - } else { - toolItem.css('display', ''); - } - } - - if (event.target === 'inserttable') - insertTable(); - - if (event.target === 'insertshapes') - insertShapes(); - } - }); - - toolbar.bind('touchstart', function() { - w2ui['editbar'].touchStarted = true; - }); -} - function initNormalToolbar() { - createMainToolbar(); + map.addControl(L.control.topToolbar()); map.addControl(L.control.signingBar()); } @@ -982,34 +760,6 @@ function onDocumentNameFocus() { map._onLostFocus(); } -function onStyleSelect(e) { - var style = e.target.value; - if (style.startsWith('.uno:')) { - map.sendUnoCommand(style); - } - else if (map.getDocType() === 'text') { - map.applyStyle(style, 'ParagraphStyles'); - } - else if (map.getDocType() === 'spreadsheet') { - map.applyStyle(style, 'CellStyles'); - } - else if (map.getDocType() === 'presentation' || map.getDocType() === 'drawing') { - map.applyLayout(style); - } - map.focus(); -} - -function onFontSelect(e) { - var font = e.target.value; - map.applyFont(font); - map.focus(); -} - -function onFontSizeSelect(e) { - map.applyFontSize(e.target.value); - map.focus(); -} - function onInsertFile() { var insertGraphic = L.DomUtil.get('insertgraphic'); if ('files' in insertGraphic) { @@ -1041,12 +791,6 @@ function onInsertBackground() { } function onWopiProps(e) { - if (e.HideSaveOption) { - w2ui['editbar'].hide('save'); - } - if (e.HidePrintOption) { - w2ui['editbar'].hide('print'); - } if (e.DisableCopy) { $('input#formulaInput').bind('copy', function(evt) { evt.preventDefault(); @@ -1072,68 +816,9 @@ function onWopiProps(e) { $('#document-name-input').removeClass('editable'); $('#document-name-input').off('keypress', onDocumentNameKeyPress); } - if (e.EnableInsertRemoteImage === true && w2ui['editbar']) { - w2ui['editbar'].hide('insertgraphic'); - w2ui['editbar'].show('menugraphic'); - } } function onDocLayerInit() { - var toolbarUp = w2ui['editbar']; - var docType = map.getDocType(); - var data; - - switch (docType) { - case 'spreadsheet': - if (toolbarUp) { - toolbarUp.show('textalign', 'wraptext', 'breakspacing', 'insertannotation', 'conditionalformaticonset', - 'numberformatcurrency', 'numberformatpercent', - 'numberformatincdecimals', 'numberformatdecdecimals', 'break-number', 'togglemergecells', 'breakmergecells', - 'setborderstyle', 'sortascending', 'sortdescending', 'breaksorting', 'backgroundcolor', 'breaksidebar', 'sidebar'); - toolbarUp.remove('styles'); - } - - break; - case 'text': - if (toolbarUp) - toolbarUp.show('leftpara', 'centerpara', 'rightpara', 'justifypara', 'breakpara', 'linespacing', - 'breakspacing', 'defaultbullet', 'defaultnumbering', 'breakbullet', 'incrementindent', 'decrementindent', - 'breakindent', 'inserttable', 'insertannotation', 'backcolor', 'breaksidebar', 'sidebar'); - - break; - case 'presentation': - // Fill the style select box if not yet filled - if ($('.styles-select')[0] && $('.styles-select')[0].length === 1) { - data = ['']; - // Inserts a separator element - data = data.concat({text: '\u2500\u2500\u2500\u2500\u2500\u2500', disabled: true}); - - L.Styles.impressLayout.forEach(function(layout) { - data = data.concat({id: layout.id, text: _(layout.text)}); - }, this); - - $('.styles-select').select2({ - data: data, - placeholder: _UNO('.uno:LayoutStatus', 'presentation') - }); - $('.styles-select').on('select2:select', onStyleSelect); - } - - if (toolbarUp) { - toolbarUp.show('breaksidebar', 'modifypage'); - } - - // FALLTHROUGH intended - case 'drawing': - if (toolbarUp) - toolbarUp.show('leftpara', 'centerpara', 'rightpara', 'justifypara', 'breakpara', 'linespacing', - 'breakspacing', 'defaultbullet', 'defaultnumbering', 'breakbullet', 'inserttextbox', 'inserttable', 'backcolor', - 'breaksidebar', 'modifypage', 'slidechangewindow', 'customanimation', 'masterslidespanel'); - break; - } - - _updateToolbarsVisibility(); - if (window.mode.isMobile() || window.mode.isTablet()) { if (!window.ThisIsAMobileApp) $('#document-name-input').hide(); @@ -1143,9 +828,6 @@ function onDocLayerInit() { $('#document-name-input').show(); } - if (toolbarUp) - toolbarUp.refresh(); - if (window.ThisIsAMobileApp) { // We can now set the document name in the menu bar $('#document-name-input').prop('disabled', false); @@ -1159,26 +841,6 @@ function onDocLayerInit() { // TODO: Yes, it would be better to see it change as you rotate the device or invoke Split View. ); } - - data = [6, 7, 8, 9, 10, 10.5, 11, 12, 13, 14, 15, 16, 18, 20, - 22, 24, 26, 28, 32, 36, 40, 44, 48, 54, 60, 66, 72, 80, 88, 96]; - $('.fontsizes-select').select2({ - data: data, - placeholder: ' ', - //Allow manually entered font size. - createTag: function(query) { - return { - id: query.term, - text: query.term, - tag: true - }; - }, - tags: true, - sorter: function(data) { return data.sort(function(a, b) { - return parseFloat(a.text) - parseFloat(b.text); - });} - }); - $('.fontsizes-select').off('select2:select', onFontSizeSelect).on('select2:select', onFontSizeSelect); } function onCommandStateChanged(e) { @@ -1186,79 +848,13 @@ function onCommandStateChanged(e) { var statusbar = w2ui['actionbar']; var commandName = e.commandName; var state = e.state; - var found = false; - var value, color, div; + var color, div; if (!commandName) return; if (commandName === '.uno:AssignLayout') { $('.styles-select').val(state).trigger('change'); - } else if (commandName === '.uno:StyleApply') { - if (!state) { - return; - } - - // For impress documents, no styles is supported. - if (map.getDocType() === 'presentation') { - return; - } - - $('.styles-select option').each(function () { - var value = this.value; - // For writer we get UI names; ideally we should be getting only programmatic ones - // For eg: 'Text body' vs 'Text Body' - // (likely to be fixed in core to make the pattern consistent) - if (state && value.toLowerCase() === state.toLowerCase()) { - state = value; - found = true; - return; - } - }); - if (!found) { - // we need to add the size - $('.styles-select') - .append($('<option></option>') - .text(state)); - } - - stylesSelectValue = state; - $('.styles-select').val(state).trigger('change'); - } - else if (commandName === '.uno:CharFontName') { - $('.fonts-select option').each(function () { - value = this.value; - if (value.toLowerCase() === state.toLowerCase()) { - found = true; - return; - } - }); - if (!found) { - // we need to add the size - $('.fonts-select') - .append($('<option></option>') - .text(state)); - } - fontsSelectValue = state; - $('.fonts-select').val(state).trigger('change'); - } - else if (commandName === '.uno:FontHeight') { - if (state === '0') { - state = ''; - } - - $('.fontsizes-select option').each(function (i, e) { - if ($(e).text() === state) { - found = true; - } - }); - if (!found) { - // we need to add the size - $('.fontsizes-select') - .append($('<option>') - .text(state).val(state)); - } - $('.fontsizes-select').val(state).trigger('change'); } else if (commandName === '.uno:FontColor' || commandName === '.uno:Color') { // confusingly, the .uno: command is named differently in Writer, Calc and Impress @@ -1363,104 +959,6 @@ function onCommandStateChanged(e) { } } -function updateCommandValues(e) { - var data = []; - var commandValues; - // 1) For .uno:StyleApply - // we need an empty option for the place holder to work - if (e.commandName === '.uno:StyleApply') { - var styles = []; - var topStyles = []; - commandValues = map.getToolbarCommandValues(e.commandName); - if (typeof commandValues === 'undefined') - return; - var commands = commandValues.Commands; - if (commands && commands.length > 0) { - // Inserts a separator element - data = data.concat({text: '\u2500\u2500\u2500\u2500\u2500\u2500', disabled: true}); - - commands.forEach(function (command) { - var translated = command.text; - if (L.Styles.styleMappings[command.text]) { - // if it's in English, translate it - translated = L.Styles.styleMappings[command.text].toLocaleString(); - } - data = data.concat({id: command.id, text: translated }); - }, this); - } - - if (map.getDocType() === 'text') { - styles = commandValues.ParagraphStyles.slice(7, 19); - topStyles = commandValues.ParagraphStyles.slice(0, 7); - } - else if (map.getDocType() === 'spreadsheet') { - styles = commandValues.CellStyles; - } - else if (map.getDocType() === 'presentation') { - // styles are not applied for presentation - return; - } - - if (topStyles.length > 0) { - // Inserts a separator element - data = data.concat({text: '\u2500\u2500\u2500\u2500\u2500\u2500', disabled: true}); - - topStyles.forEach(function (style) { - data = data.concat({id: style, text: L.Styles.styleMappings[style].toLocaleString()}); - }, this); - } - - if (styles !== undefined && styles.length > 0) { - // Inserts a separator element - data = data.concat({text: '\u2500\u2500\u2500\u2500\u2500\u2500', disabled: true}); - - styles.forEach(function (style) { - var localeStyle; - if (style.startsWith('outline')) { - var outlineLevel = style.split('outline')[1]; - localeStyle = 'Outline'.toLocaleString() + ' ' + outlineLevel; - } else { - localeStyle = L.Styles.styleMappings[style]; - localeStyle = localeStyle === undefined ? style : localeStyle.toLocaleString(); - } - - data = data.concat({id: style, text: localeStyle}); - }, this); - } - - $('.styles-select').select2({ - data: data, - placeholder: _('Style') - }); - $('.styles-select').val(stylesSelectValue).trigger('change'); - $('.styles-select').on('select2:select', onStyleSelect); - w2ui['editbar'].resize(); - } else if (e.commandName === '.uno:CharFontName') { - // 2) For .uno:CharFontName - commandValues = map.getToolbarCommandValues(e.commandName); - if (typeof commandValues === 'undefined') { - return; - } - - data = []; // reset data in order to avoid that the font select box is populated with styles, too. - // Old browsers like IE11 et al don't like Object.keys with - // empty arguments - if (typeof commandValues === 'object') { - data = data.concat(Object.keys(commandValues)); - } - - $('.fonts-select').select2({ - data: data.sort(function (a, b) { // also sort(localely) - return a.localeCompare(b); - }), - placeholder: _('Font') - }); - $('.fonts-select').on('select2:select', onFontSelect); - $('.fonts-select').val(fontsSelectValue).trigger('change'); - w2ui['editbar'].resize(); - } -} - function onUpdateParts(e) { if (e.docType === 'text') { var current = e.currentPage; @@ -1566,24 +1064,12 @@ function onUpdatePermission(e) { } if (e.perm === 'edit') { - // Enable list boxes - $('.styles-select').prop('disabled', false); - $('.fonts-select').prop('disabled', false); - $('.fontsizes-select').prop('disabled', false); - if (window.mode.isMobile()) { $('#toolbar-down').show(); } } - else { - // Disable list boxes - $('.styles-select').prop('disabled', true); - $('.fonts-select').prop('disabled', true); - $('.fontsizes-select').prop('disabled', true); - - if (window.mode.isMobile()) { - $('#toolbar-down').hide(); - } + else if (window.mode.isMobile()) { + $('#toolbar-down').hide(); } // We've resized the document container. @@ -1658,12 +1144,6 @@ function setupToolbar(e) { } }); - if (!window.mode.isMobile()) { - map.on('updatetoolbarcommandvalues', function(e) { - updateCommandValues(e); - }); - } - map.on('doclayerinit', onDocLayerInit); map.on('updatepermission', onUpdatePermission); map.on('wopiprops', onWopiProps); @@ -1694,7 +1174,6 @@ function setupToolbar(e) { global.setupToolbar = setupToolbar; global.onClick = onClick; global.hideTooltip = hideTooltip; -global.onStyleSelect = onStyleSelect; global.insertTable = insertTable; global.insertShapes = insertShapes; global.createShapesPanel = createShapesPanel; diff --git a/loleaflet/src/control/Control.TopToolbar.js b/loleaflet/src/control/Control.TopToolbar.js new file mode 100644 index 000000000..20a178f1b --- /dev/null +++ b/loleaflet/src/control/Control.TopToolbar.js @@ -0,0 +1,554 @@ +/* -*- js-indent-level: 8 -*- */ +/* + * L.Control.TopToolbar + */ + +/* global $ w2ui _ _UNO w2utils */ +L.Control.TopToolbar = L.Control.extend({ + options: { + stylesSelectValue: null, + fontsSelectValue: null + }, + + onAdd: function (map) { + this.map = map; + this.create(); + + map.on('doclayerinit', this.onDocLayerInit, this); + map.on('updatepermission', this.onUpdatePermission, this); + map.on('wopiprops', this.onWopiProps, this); + map.on('commandstatechanged', this.onCommandStateChanged, this); + + if (!window.mode.isMobile()) { + map.on('updatetoolbarcommandvalues', this.updateCommandValues, this); + } + }, + + onFontSizeSelect: function(e) { + this.map.applyFontSize(e.target.value); + this.map.focus(); + }, + + onFontSelect: function(e) { + var font = e.target.value; + this.map.applyFont(font); + this.map.focus(); + }, + + onStyleSelect: function(e) { + var style = e.target.value; + if (style.startsWith('.uno:')) { + this.map.sendUnoCommand(style); + } + else if (this.map.getDocType() === 'text') { + this.map.applyStyle(style, 'ParagraphStyles'); + } + else if (this.map.getDocType() === 'spreadsheet') { + this.map.applyStyle(style, 'CellStyles'); + } + else if (this.map.getDocType() === 'presentation' || this.map.getDocType() === 'drawing') { + this.map.applyLayout(style); + } + this.map.focus(); + }, + + _updateVisibilityForToolbar: function(toolbar) { + if (!toolbar) + return; + + var toShow = []; + var toHide = []; + + toolbar.items.forEach(function(item) { + if (window.ThisIsTheiOSApp && window.mode.isTablet() && item.iosapptablet === false) { + toHide.push(item.id); + } + else if (((window.mode.isMobile() && item.mobile === false) || (window.mode.isTablet() && item.tablet === false) || (window.mode.isDesktop() && item.desktop === false) || (!window.ThisIsAMobileApp && item.mobilebrowser === false)) && !item.hidden) { + toHide.push(item.id); + } + else if (((window.mode.isMobile() && item.mobile === true) || (window.mode.isTablet() && item.tablet === true) || (window.mode.isDesktop() && item.desktop === true) || (window.ThisIsAMobileApp && item.mobilebrowser === true)) && item.hidden) { + toShow.push(item.id); + } + }); + + console.log('explicitly hiding: ' + toHide); + console.log('explicitly showing: ' + toShow); + + toHide.forEach(function(item) { toolbar.hide(item); }); + toShow.forEach(function(item) { toolbar.show(item); }); + }, + + // mobile:false means hide it both for normal Online used from a mobile phone browser, and in a mobile app on a mobile phone + // mobilebrowser:false means hide it for normal Online used from a mobile browser, but don't hide it in a mobile app + // tablet:true means show it in normal Online from a tablet browser, and in a mobile app on a tablet + // tablet:false means hide it in normal Online used from a tablet browser, and in a mobile app on a tablet + + getToolItems: function() { + return [ + {type: 'button', id: 'closemobile', img: 'closemobile', desktop: false, mobile: false, tablet: true, hidden: true}, + {type: 'button', id: 'save', img: 'save', hint: _UNO('.uno:Save')}, + {type: 'button', id: 'print', img: 'print', hint: _UNO('.uno:Print', 'text'), mobile: false, tablet: false}, + {type: 'break', id: 'savebreak', mobile: false}, + {type: 'button', id: 'undo', img: 'undo', hint: _UNO('.uno:Undo'), uno: 'Undo', disabled: true, mobile: false}, + {type: 'button', id: 'redo', img: 'redo', hint: _UNO('.uno:Redo'), uno: 'Redo', disabled: true, mobile: false}, + {type: 'button', id: 'formatpaintbrush', img: 'copyformat', hint: _UNO('.uno:FormatPaintbrush'), uno: 'FormatPaintbrush', mobile: false}, + {type: 'button', id: 'reset', img: 'deleteformat', hint: _UNO('.uno:ResetAttributes', 'text'), uno: 'ResetAttributes', mobile: false}, + {type: 'break', mobile: false, tablet: false,}, + {type: 'html', id: 'styles', + html: '<select class="styles-select"><option>' + _('Default Style') + '</option></select>', + onRefresh: function (edata) { + if (!edata.item.html) { + edata.isCancelled = true; + } else { + $.extend(edata, { onComplete: function (e) { + $('.styles-select').select2(); + e.item.html = undefined; + }}); + } + }, hidden: true, desktop: true, mobile: false, tablet: false}, + {type: 'html', id: 'fonts', + html: '<select class="fonts-select"><option>Liberation Sans</option></select>', + onRefresh: function (edata) { + if (!edata.item.html) { + edata.isCancelled = true; + } else { + $.extend(edata, { onComplete: function (e) { + $('.fonts-select').select2(); + e.item.html = undefined; + }}); + } + }, mobile: false}, + {type: 'html', id: 'fontsizes', + html: '<select class="fontsizes-select">', + onRefresh: function (edata) { + if (!edata.item.html) { + edata.isCancelled = true; + } else { + $.extend(edata, { onComplete: function (e) { + $('.fontsizes-select').select2({ dropdownAutoWidth: true, width: 'auto'}); + e.item.html = undefined; + }}); + } + }, mobile: false}, + {type: 'break', id: 'breakstyles', mobile: false, tablet: false }, + {type: 'button', id: 'languagecode', desktop: false, mobile: true, tablet: false}, + {type: 'button', id: 'bold', img: 'bold', hint: _UNO('.uno:Bold'), uno: 'Bold'}, + {type: 'button', id: 'italic', img: 'italic', hint: _UNO('.uno:Italic'), uno: 'Italic'}, + {type: 'button', id: 'underline', img: 'underline', hint: _UNO('.uno:Underline'), uno: 'Underline'}, + {type: 'button', id: 'strikeout', img: 'strikeout', hint: _UNO('.uno:Strikeout'), uno: 'Strikeout'}, + {type: 'break', id: 'breakformatting'}, + {type: 'text-color', id: 'fontcolor', img: 'textcolor', hint: _UNO('.uno:FontColor')}, + {type: 'color', id: 'backcolor', img: 'backcolor', hint: _UNO('.uno:BackColor', 'text'), hidden: true}, + {type: 'color', id: 'backgroundcolor', img: 'backgroundcolor', hint: _UNO('.uno:BackgroundColor'), hidden: true}, + {type: 'break' , id: 'breakcolor', mobile:false}, + {type: 'button', id: 'leftpara', img: 'alignleft', hint: _UNO('.uno:LeftPara', '', true), + uno: {textCommand: 'LeftPara', objectCommand: 'ObjectAlignLeft'}, + hidden: true, unosheet: 'AlignLeft', disabled: true}, + {type: 'button', id: 'centerpara', img: 'alignhorizontal', hint: _UNO('.uno:CenterPara', '', true), + uno: {textCommand: 'CenterPara', objectCommand: 'AlignCenter'}, + hidden: true, unosheet: 'AlignHorizontalCenter', disabled: true}, + {type: 'button', id: 'rightpara', img: 'alignright', hint: _UNO('.uno:RightPara', '', true), + uno: {textCommand: 'RightPara', objectCommand: 'ObjectAlignRight'}, + hidden: true, unosheet: 'AlignRight', disabled: true}, + {type: 'button', id: 'justifypara', img: 'alignblock', hint: _UNO('.uno:JustifyPara', '', true), uno: 'JustifyPara', hidden: true, unosheet: '', disabled: true}, + {type: 'break', id: 'breakpara', hidden: true}, + {type: 'drop', id: 'setborderstyle', img: 'setborderstyle', hint: _('Borders'), hidden: true, + html: '<table id="setborderstyle-grid"><tr><td class="w2ui-tb-image w2ui-icon frame01" onclick="setBorderStyle(1)"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame02" onclick="setBorderStyle(2)"></td><td class="w2ui-tb-image w2ui-icon frame03" onclick="setBorderStyle(3)"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame04" onclick="setBorderStyle(4)"></td></tr><tr><td class="w2ui-tb-image w2ui-icon frame05" onclick="setBorderStyle(5)"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame06" onclick="setBorderStyle(6)"></td><td class="w2ui-tb-image w2ui-icon frame07" onclick="setBorderStyle(7)"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame08" onclick="setBorderStyle(8)"></td></tr><tr><td class="w2ui-tb-image w2ui-icon frame09" onclick="setBorderStyle(9)"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame10" onclick="setBorderStyle(10)"></td><td class="w2ui-tb-image w2ui-icon frame11" onclick="setBorderStyle(11)"></td>' + + '<td class="w2ui-tb-image w2ui-icon frame12" onclick="setBorderStyle(12)"></td></tr><tr>' + + '<td colspan="4" class="w2ui-tb-image w2ui-icon frame13" onclick="setBorderStyle(0)"><div id="div-frame13">' + _('More...') + '</div></td></tr></table>' + }, + {type: 'button', id: 'togglemergecells', img: 'togglemergecells', hint: _UNO('.uno:ToggleMergeCells', 'spreadsheet', true), hidden: true, uno: 'ToggleMergeCells', disabled: true}, + {type: 'break', id: 'breakmergecells', hidden: true}, + {type: 'menu', id: 'textalign', img: 'alignblock', hint: _UNO('.uno:TextAlign'), hidden: true, + items: [ + {id: 'alignleft', text: _UNO('.uno:AlignLeft', 'spreadsheet', true), icon: 'alignleft', uno: 'AlignLeft'}, + {id: 'alignhorizontalcenter', text: _UNO('.uno:AlignHorizontalCenter', 'spreadsheet', true), icon: 'alignhorizontal', uno: 'AlignHorizontalCenter'}, + {id: 'alignright', text: _UNO('.uno:AlignRight', 'spreadsheet', true), icon: 'alignright', uno: 'AlignRight'}, + {id: 'alignblock', text: _UNO('.uno:AlignBlock', 'spreadsheet', true), icon: 'alignblock', uno: 'AlignBlock'}, + ]}, + {type: 'menu', id: 'linespacing', img: 'linespacing', hint: _UNO('.uno:FormatSpacingMenu'), hidden: true, + items: [ + {id: 'spacepara1', text: _UNO('.uno:SpacePara1'), uno: 'SpacePara1'}, + {id: 'spacepara15', text: _UNO('.uno:SpacePara15'), uno: 'SpacePara15'}, + {id: 'spacepara2', text: _UNO('.uno:SpacePara2'), uno: 'SpacePara2'}, + {type: 'break'}, + {id: 'paraspaceincrease', text: _UNO('.uno:ParaspaceIncrease'), uno: 'ParaspaceIncrease'}, + {id: 'paraspacedecrease', text: _UNO('.uno:ParaspaceDecrease'), uno: 'ParaspaceDecrease'} + ]}, + {type: 'button', id: 'wraptext', img: 'wraptext', hint: _UNO('.uno:WrapText', 'spreadsheet', true), hidden: true, uno: 'WrapText', disabled: true}, + {type: 'break', id: 'breakspacing', hidden: true}, + {type: 'button', id: 'defaultnumbering', img: 'numbering', hint: _UNO('.uno:DefaultNumbering', '', true), hidden: true, uno: 'DefaultNumbering', disabled: true}, + {type: 'button', id: 'defaultbullet', img: 'bullet', hint: _UNO('.uno:DefaultBullet', '', true), hidden: true, uno: 'DefaultBullet', disabled: true}, + {type: 'break', id: 'breakbullet', hidden: true}, + {type: 'button', id: 'incrementindent', img: 'incrementindent', hint: _UNO('.uno:IncrementIndent', '', true), uno: 'IncrementIndent', hidden: true, disabled: true}, + {type: 'button', id: 'decrementindent', img: 'decrementindent', hint: _UNO('.uno:DecrementIndent', '', true), uno: 'DecrementIndent', hidden: true, disabled: true}, + {type: 'break', id: 'breakindent', hidden: true}, + {type: 'button', id: 'sortascending', img: 'sortascending', hint: _UNO('.uno:SortAscending', 'spreadsheet', true), uno: 'SortAscending', disabled: true, hidden: true}, + {type: 'button', id: 'sortdescending', img: 'sortdescending', hint: _UNO('.uno:SortDescending', 'spreadsheet', true), uno: 'SortDescending', disabled: true, hidden: true}, + {type: 'break', id: 'breaksorting', hidden: true}, + {type: 'drop', id: 'conditionalformaticonset', img: 'conditionalformatdialog', hint: _UNO('.uno:ConditionalFormatMenu', 'spreadsheet', true), hidden: true, + html: '<table id="conditionalformatmenu-grid"><tr>' + + '<td class="w2ui-tb-image w2ui-icon iconset00" onclick="setConditionalFormatIconSet(0)"/><td class="w2ui-tb-image w2ui-icon iconset01" onclick="setConditionalFormatIconSet(1)"/><td class="w2ui-tb-image w2ui-icon iconset02" onclick="setConditionalFormatIconSet(2)"/></tr><tr>' + + '<td class="w2ui-tb-image w2ui-icon iconset03" onclick="setConditionalFormatIconSet(3)"/><td class="w2ui-tb-image w2ui-icon iconset04" onclick="setConditionalFormatIconSet(4)"/><td class="w2ui-tb-image w2ui-icon iconset05" onclick="setConditionalFormatIconSet(5)"/></tr><tr>' + + '<td class="w2ui-tb-image w2ui-icon iconset06" onclick="setConditionalFormatIconSet(6)"/><td class="w2ui-tb-image w2ui-icon iconset08" onclick="setConditionalFormatIconSet(8)"/><td class="w2ui-tb-image w2ui-icon iconset09" onclick="setConditionalFormatIconSet(9)"/></tr><tr>' + // iconset07 deliberately left out, see the .css for the reason + '<td class="w2ui-tb-image w2ui-icon iconset10" onclick="setConditionalFormatIconSet(10)"/><td class="w2ui-tb-image w2ui-icon iconset11" onclick="setConditionalFormatIconSet(11)"/><td class="w2ui-tb-image w2ui-icon iconset12" onclick="setConditionalFormatIconSet(12)"/></tr><tr>' + + '<td class="w2ui-tb-image w2ui-icon iconset13" onclick="setConditionalFormatIconSet(13)"/><td class="w2ui-tb-image w2ui-icon iconset14" onclick="setConditionalFormatIconSet(14)"/><td class="w2ui-tb-image w2ui-icon iconset15" onclick="setConditionalFormatIconSet(15)"/></tr><tr>' + + '<td class="w2ui-tb-image w2ui-icon iconset16" onclick="setConditionalFormatIconSet(16)"/><td class="w2ui-tb-image w2ui-icon iconset17" onclick="setConditionalFormatIconSet(17)"/><td class="w2ui-tb-image w2ui-icon iconset18" onclick="setConditionalFormatIconSet(18)"/></tr><tr>' + + '<td class="w2ui-tb-image w2ui-icon iconset19" onclick="setConditionalFormatIconSet(19)"/><td class="w2ui-tb-image w2ui-icon iconset20" onclick="setConditionalFormatIconSet(20)"/><td class="w2ui-tb-image w2ui-icon iconset21" onclick="setConditionalFormatIconSet(21)"/></tr></table>' + }, + {type: 'button', id: 'numberformatcurrency', img: 'numberformatcurrency', hint: _UNO('.uno:NumberFormatCurrency', 'spreadsheet', true), hidden: true, uno: 'NumberFormatCurrency', disabled: true}, + {type: 'button', id: 'numberformatpercent', img: 'numberformatpercent', hint: _UNO('.uno:NumberFormatPercent', 'spreadsheet', true), hidden: true, uno: 'NumberFormatPercent', disabled: true}, + {type: 'button', id: 'numberformatdecdecimals', img: 'numberformatdecdecimals', hint: _UNO('.uno:NumberFormatDecDecimals', 'spreadsheet', true), hidden: true, uno: 'NumberFormatDecDecimals', disabled: true}, + {type: 'button', id: 'numberformatincdecimals', img: 'numberformatincdecimals', hint: _UNO('.uno:NumberFormatIncDecimals', 'spreadsheet', true), hidden: true, uno: 'NumberFormatIncDecimals', disabled: true}, + {type: 'break', id: 'break-number', hidden: true}, + {type: 'button', id: 'inserttextbox', img: 'text', hint: _UNO('.uno:Text', '', true), uno: 'Text?CreateDirectly:bool=true', hidden: true}, + {type: 'button', id: 'insertannotation', img: 'annotation', hint: _UNO('.uno:InsertAnnotation', '', true), hidden: true}, + {type: 'drop', id: 'inserttable', img: 'inserttable', hint: _('Insert table'), hidden: true, overlay: {onShow: window.insertTable}, + html: '<div id="inserttable-wrapper"><div id="inserttable-popup" class="inserttable-pop ui-widget ui-corner-all"><div class="inserttable-grid"></div><div id="inserttable-status" class="loleaflet-font" style="padding: 5px;"><br/></div></div></div>'}, + {type: 'button', id: 'insertgraphic', img: 'insertgraphic', hint: _UNO('.uno:InsertGraphic', '', true)}, + {type: 'menu', id: 'menugraphic', img: 'insertgraphic', hint: _UNO('.uno:InsertGraphic', '', true), hidden: true, + items: [ + {id: 'localgraphic', text: _('Insert Local Image')}, + {id: 'remotegraphic', text: _UNO('.uno:InsertGraphic', '', true)}, + ]}, + {type: 'button', id: 'insertobjectchart', img: 'insertobjectchart', hint: _UNO('.uno:InsertObjectChart', '', true), uno: 'InsertObjectChart'}, + {type: 'drop', id: 'insertshapes', img: 'basicshapes_ellipse', hint: _('Insert shapes'), overlay: {onShow: window.insertShapes}, + html: '<div id="insertshape-wrapper"><div id="insertshape-popup" class="insertshape-pop ui-widget ui-corner-all"><div class="insertshape-grid"></div></div></div>'}, + {type: 'button', id: 'link', img: 'link', hint: _UNO('.uno:HyperlinkDialog', '', true), disabled: true}, + {type: 'button', id: 'insertsymbol', img: 'insertsymbol', hint: _UNO('.uno:InsertSymbol', '', true), uno: 'InsertSymbol'}, + {type: 'spacer'}, + {type: 'button', id: 'edit', img: 'edit'}, + {type: 'button', id: 'sidebar', img: 'sidebar_modify_page', hint: _UNO('.uno:Sidebar', '', true), uno: '.uno:Sidebar', hidden: true}, + {type: 'button', id: 'modifypage', img: 'sidebar_modify_page', hint: _UNO('.uno:ModifyPage', 'presentation', true), uno: '.uno:ModifyPage', hidden: true}, + {type: 'button', id: 'slidechangewindow', img: 'sidebar_slide_change', hint: _UNO('.uno:SlideChangeWindow', 'presentation', true), uno: '.uno:SlideChangeWindow', hidden: true}, + {type: 'button', id: 'customanimation', img: 'sidebar_custom_animation', hint: _UNO('.uno:CustomAnimation', 'presentation', true), uno: '.uno:CustomAnimation', hidden: true}, + {type: 'button', id: 'masterslidespanel', img: 'sidebar_master_slides', hint: _UNO('.uno:MasterSlidesPanel', 'presentation', true), uno: '.uno:MasterSlidesPanel', hidden: true}, + {type: 'break', id: 'breaksidebar', hidden: true}, + {type: 'button', id: 'fold', img: 'fold', desktop: true, mobile: false, hidden: true}, + {type: 'button', id: 'hamburger-tablet', img: 'hamburger', desktop: false, mobile: false, tablet: true, iosapptablet: false, hidden: true}, + {type: 'button', id: 'languagecode', desktop: false, mobile: true, tablet: false} + ]; + }, + + create: function() { + var toolbar = $('#toolbar-up'); + toolbar.w2toolbar({ + name: 'editbar', + tooltip: 'bottom', + items: this.getToolItems(), + onClick: function (e) { + window.onClick(e, e.target); + window.hideTooltip(this, e.target); + }, + onRefresh: function(event) { + if ((event.target === 'styles' || event.target === 'fonts' || event.target === 'fontsizes') && event.item) { + var toolItem = $(this.box).find('#tb_'+ this.name +'_item_'+ w2utils.escapeId(event.item.id)); + if ((window.mode.isDesktop() && event.item.desktop == false) + || (window.mode.isTablet() && event.item.tablet == false)) { + toolItem.css('display', 'none'); + } else { + toolItem.css('display', ''); + } + } + + if (event.target === 'inserttable') + window.insertTable(); + + if (event.target === 'insertshapes') + window.insertShapes(); + } + }); + + toolbar.bind('touchstart', function() { + w2ui['editbar'].touchStarted = true; + }); + }, + + onDocLayerInit: function() { + var toolbarUp = w2ui['editbar']; + var docType = this.map.getDocType(); + var data; + + switch (docType) { + case 'spreadsheet': + if (toolbarUp) { + toolbarUp.show('textalign', 'wraptext', 'breakspacing', 'insertannotation', 'conditionalformaticonset', + 'numberformatcurrency', 'numberformatpercent', + 'numberformatincdecimals', 'numberformatdecdecimals', 'break-number', 'togglemergecells', 'breakmergecells', + 'setborderstyle', 'sortascending', 'sortdescending', 'breaksorting', 'backgroundcolor', 'breaksidebar', 'sidebar'); + toolbarUp.remove('styles'); + } + + break; + case 'text': + if (toolbarUp) + toolbarUp.show('leftpara', 'centerpara', 'rightpara', 'justifypara', 'breakpara', 'linespacing', + 'breakspacing', 'defaultbullet', 'defaultnumbering', 'breakbullet', 'incrementindent', 'decrementindent', + 'breakindent', 'inserttable', 'insertannotation', 'backcolor', 'breaksidebar', 'sidebar'); + + break; + case 'presentation': + // Fill the style select box if not yet filled + if ($('.styles-select')[0] && $('.styles-select')[0].length === 1) { + data = ['']; + // Inserts a separator element + data = data.concat({text: '\u2500\u2500\u2500\u2500\u2500\u2500', disabled: true}); + + L.Styles.impressLayout.forEach(function(layout) { + data = data.concat({id: layout.id, text: _(layout.text)}); + }, this); + + $('.styles-select').select2({ + data: data, + placeholder: _UNO('.uno:LayoutStatus', 'presentation') + }); + $('.styles-select').on('select2:select', this.onStyleSelect, this); + } + + if (toolbarUp) { + toolbarUp.show('breaksidebar', 'modifypage'); + } + + // FALLTHROUGH intended + case 'drawing': + if (toolbarUp) + toolbarUp.show('leftpara', 'centerpara', 'rightpara', 'justifypara', 'breakpara', 'linespacing', + 'breakspacing', 'defaultbullet', 'defaultnumbering', 'breakbullet', 'inserttextbox', 'inserttable', 'backcolor', + 'breaksidebar', 'modifypage', 'slidechangewindow', 'customanimation', 'masterslidespanel'); + break; + } + + this._updateVisibilityForToolbar(w2ui['editbar']); + + if (toolbarUp) + toolbarUp.refresh(); + + data = [6, 7, 8, 9, 10, 10.5, 11, 12, 13, 14, 15, 16, 18, 20, + 22, 24, 26, 28, 32, 36, 40, 44, 48, 54, 60, 66, 72, 80, 88, 96]; + $('.fontsizes-select').select2({ + data: data, + placeholder: ' ', + //Allow manually entered font size. + createTag: function(query) { + return { + id: query.term, + text: query.term, + tag: true + }; + }, + tags: true, + sorter: function(data) { return data.sort(function(a, b) { + return parseFloat(a.text) - parseFloat(b.text); + });} + }); + $('.fontsizes-select').off('select2:select', this.onFontSizeSelect.bind(this)).on('select2:select', this.onFontSizeSelect.bind(this)); + }, + + onUpdatePermission: function(e) { + if (e.perm === 'edit') { + // Enable list boxes + $('.styles-select').prop('disabled', false); + $('.fonts-select').prop('disabled', false); + $('.fontsizes-select').prop('disabled', false); + } else { + // Disable list boxes + $('.styles-select').prop('disabled', true); + $('.fonts-select').prop('disabled', true); + $('.fontsizes-select').prop('disabled', true); + } + }, + + onWopiProps: function(e) { + if (e.HideSaveOption) { + w2ui['editbar'].hide('save'); + } + if (e.HidePrintOption) { + w2ui['editbar'].hide('print'); + } + if (e.EnableInsertRemoteImage === true && w2ui['editbar']) { + w2ui['editbar'].hide('insertgraphic'); + w2ui['editbar'].show('menugraphic'); + } + }, + + updateCommandValues: function(e) { + var data = []; + var commandValues; + // 1) For .uno:StyleApply + // we need an empty option for the place holder to work + if (e.commandName === '.uno:StyleApply') { + var styles = []; + var topStyles = []; + commandValues = this.map.getToolbarCommandValues(e.commandName); + if (typeof commandValues === 'undefined') + return; + var commands = commandValues.Commands; + if (commands && commands.length > 0) { + // Inserts a separator element + data = data.concat({text: '\u2500\u2500\u2500\u2500\u2500\u2500', disabled: true}); + + commands.forEach(function (command) { + var translated = command.text; + if (L.Styles.styleMappings[command.text]) { + // if it's in English, translate it + translated = L.Styles.styleMappings[command.text].toLocaleString(); + } + data = data.concat({id: command.id, text: translated }); + }, this); + } + + if (this.map.getDocType() === 'text') { + styles = commandValues.ParagraphStyles.slice(7, 19); + topStyles = commandValues.ParagraphStyles.slice(0, 7); + } + else if (this.map.getDocType() === 'spreadsheet') { + styles = commandValues.CellStyles; + } + else if (this.map.getDocType() === 'presentation') { + // styles are not applied for presentation + return; + } + + if (topStyles.length > 0) { + // Inserts a separator element + data = data.concat({text: '\u2500\u2500\u2500\u2500\u2500\u2500', disabled: true}); + + topStyles.forEach(function (style) { + data = data.concat({id: style, text: L.Styles.styleMappings[style].toLocaleString()}); + }, this); + } + + if (styles !== undefined && styles.length > 0) { + // Inserts a separator element + data = data.concat({text: '\u2500\u2500\u2500\u2500\u2500\u2500', disabled: true}); + + styles.forEach(function (style) { + var localeStyle; + if (style.startsWith('outline')) { + var outlineLevel = style.split('outline')[1]; + localeStyle = 'Outline'.toLocaleString() + ' ' + outlineLevel; + } else { + localeStyle = L.Styles.styleMappings[style]; + localeStyle = localeStyle === undefined ? style : localeStyle.toLocaleString(); + } + + data = data.concat({id: style, text: localeStyle}); + }, this); + } + + $('.styles-select').select2({ + data: data, + placeholder: _('Style') + }); + $('.styles-select').val(this.options.stylesSelectValue).trigger('change'); + $('.styles-select').on('select2:select', this.onStyleSelect.bind(this)); + w2ui['editbar'].resize(); + } else if (e.commandName === '.uno:CharFontName') { + // 2) For .uno:CharFontName + commandValues = this.map.getToolbarCommandValues(e.commandName); + if (typeof commandValues === 'undefined') { + return; + } + + data = []; // reset data in order to avoid that the font select box is populated with styles, too. + // Old browsers like IE11 et al don't like Object.keys with + // empty arguments + if (typeof commandValues === 'object') { + data = data.concat(Object.keys(commandValues)); + } + + $('.fonts-select').select2({ + data: data.sort(function (a, b) { // also sort(localely) + return a.localeCompare(b); + }), + placeholder: _('Font') + }); + $('.fonts-select').on('select2:select', this.onFontSelect.bind(this)); + $('.fonts-select').val(this.options.fontsSelectValue).trigger('change'); + w2ui['editbar'].resize(); + } + }, + + onCommandStateChanged: function(e) { + var commandName = e.commandName; + var state = e.state; + var found = false; + var value; + + if (commandName === '.uno:StyleApply') { + if (!state) { + return; + } + + // For impress documents, no styles is supported. + if (this.map.getDocType() === 'presentation') { + return; + } + + $('.styles-select option').each(function () { + var value = this.value; + // For writer we get UI names; ideally we should be getting only programmatic ones + // For eg: 'Text body' vs 'Text Body' + // (likely to be fixed in core to make the pattern consistent) + if (state && value.toLowerCase() === state.toLowerCase()) { + state = value; + found = true; + return; + } + }); + if (!found) { + // we need to add the size + $('.styles-select') + .append($('<option></option>') + .text(state)); + } + + this.options.stylesSelectValue = state; + $('.styles-select').val(state).trigger('change'); + } + else if (commandName === '.uno:CharFontName') { + $('.fonts-select option').each(function () { + value = this.value; + if (value.toLowerCase() === state.toLowerCase()) { + found = true; + return; + } + }); + if (!found) { + // we need to add the size + $('.fonts-select') + .append($('<option></option>') + .text(state)); + } + this.options.fontsSelectValue = state; + $('.fonts-select').val(state).trigger('change'); + } + else if (commandName === '.uno:FontHeight') { + if (state === '0') { + state = ''; + } + + $('.fontsizes-select option').each(function (i, e) { + if ($(e).text() === state) { + found = true; + } + }); + if (!found) { + // we need to add the size + $('.fontsizes-select') + .append($('<option>') + .text(state).val(state)); + } + $('.fontsizes-select').val(state).trigger('change'); + } + } +}); + +L.control.topToolbar = function () { + return new L.Control.TopToolbar(); +}; commit aca7badc6dfb2b858ef5fe8dbb55a713cccd7ccc Author: Szymon Kłos <szymon.k...@collabora.com> AuthorDate: Thu Apr 16 11:13:21 2020 +0200 Commit: Szymon Kłos <szymon.k...@collabora.com> CommitDate: Thu Apr 16 16:01:22 2020 +0200 Move signing bar to separate file In the future should be merged with Signing.js Change-Id: I3b5db8b20dcead4e0f1f80643de474fdba8245af Reviewed-on: https://gerrit.libreoffice.org/c/online/+/92348 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 cc3b8a86a..7017c6e72 100644 --- a/loleaflet/Makefile.am +++ b/loleaflet/Makefile.am @@ -270,6 +270,7 @@ LOLEAFLET_JS =\ src/control/Control.FormulaBar.js \ src/control/Control.SheetsBar.js \ src/control/Control.PresentationBar.js \ + src/control/Control.SigningBar.js \ src/control/Control.Layers.js \ src/control/Search.js \ src/control/Permission.js \ @@ -540,6 +541,7 @@ pot: src/control/Control.Scroll.Annotation.js \ src/control/Control.SearchBar.js \ src/control/Control.SheetsBar.js \ + src/control/Control.SigningBar.js \ src/control/Control.StatusBar.js \ src/control/Control.Tabs.js \ src/control/Control.Toolbar.js \ diff --git a/loleaflet/src/control/Control.SigningBar.js b/loleaflet/src/control/Control.SigningBar.js new file mode 100644 index 000000000..dbccc9114 --- /dev/null +++ b/loleaflet/src/control/Control.SigningBar.js @@ -0,0 +1,64 @@ +/* -*- js-indent-level: 8 -*- */ +/* + * L.Control.SigningBar + */ + +/* global $ w2ui */ +L.Control.SigningBar = L.Control.extend({ + + onAdd: function (map) { + this.map = map; + this.create(); + + map.on('doclayerinit', this.onDocLayerInit, this); + }, + + create: function() { + var that = this; + if (L.DomUtil.get('document-signing-bar') !== null) { + var toolbar = $('#document-signing-bar'); + toolbar.w2toolbar({ + name: 'document-signing-bar', + tooltip: 'bottom', + items: this.map.setupSigningToolbarItems(), + onClick: function (e) { + that.onClick(e, e.target); + window.hideTooltip(this, e.target); + }, + onRefresh: function() { + } + }); + toolbar.bind('touchstart', function() { + w2ui['document-signing-bar'].touchStarted = true; + }); + } + }, + + onClick: function(e, id, item) { + if ('document-signing-bar' in w2ui && w2ui['document-signing-bar'].get(id) !== null) { + var toolbar = w2ui['document-signing-bar']; + 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; + } + + this.map.handleSigningClickEvent(id, item); // this handles a bunch of signing bar click events + }, + + onDocLayerInit: function() { + if (L.DomUtil.get('document-signing-bar') !== null) { + this.map.signingInitializeBar(); + } + } +}); + +L.control.signingBar = function () { + return new L.Control.SigningBar(); +}; diff --git a/loleaflet/src/control/Control.Toolbar.js b/loleaflet/src/control/Control.Toolbar.js index 529e0fa71..33fd4ac46 100644 --- a/loleaflet/src/control/Control.Toolbar.js +++ b/loleaflet/src/control/Control.Toolbar.js @@ -85,10 +85,6 @@ function onClick(e, id, item) { var toolbar = w2ui['editbar']; item = toolbar.get(id); } - else if ('document-signing-bar' in w2ui && w2ui['document-signing-bar'].get(id) !== null) { - toolbar = w2ui['document-signing-bar']; - item = toolbar.get(id); - } else if ('actionbar' in w2ui && w2ui['actionbar'].get(id) !== null) { toolbar = w2ui['actionbar']; item = toolbar.get(id); @@ -189,9 +185,6 @@ function onClick(e, id, item) { else if (id === 'languagecode') { map.fire('languagedialog'); } - else { - map.handleSigningClickEvent(id, item); // this handles a bunch of signing bar click events - } } function _setBorders(left, right, bottom, top, horiz, vert, color) { @@ -830,29 +823,9 @@ function createMainToolbar() { }); } -function createSigningBar() { - if (L.DomUtil.get('document-signing-bar') !== null) { - var toolbar = $('#document-signing-bar'); - toolbar.w2toolbar({ - name: 'document-signing-bar', - tooltip: 'bottom', - items: map.setupSigningToolbarItems(), - onClick: function (e) { - onClick(e, e.target); - hideTooltip(this, e.target); - }, - onRefresh: function() { - } - }); - toolbar.bind('touchstart', function() { - w2ui['document-signing-bar'].touchStarted = true; - }); - } -} - function initNormalToolbar() { createMainToolbar(); - createSigningBar(); + map.addControl(L.control.signingBar()); } function setupSearchInput() { @@ -1159,10 +1132,6 @@ function onDocLayerInit() { break; } - if (L.DomUtil.get('document-signing-bar') !== null) { - map.signingInitializeBar(); - } - _updateToolbarsVisibility(); if (window.mode.isMobile() || window.mode.isTablet()) { _______________________________________________ Libreoffice-commits mailing list libreoffice-comm...@lists.freedesktop.org https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits