loleaflet/dist/loleaflet.css | 1 loleaflet/reference.html | 23 +++ loleaflet/src/control/Control.LokDialog.js | 191 ++++++++++++----------------- loleaflet/src/layer/tile/TileLayer.js | 14 -- loleaflet/src/map/handler/Map.Keyboard.js | 26 ++- 5 files changed, 119 insertions(+), 136 deletions(-)
New commits: commit d1c8de9bf9021dedb67446439f117b1b64c7e2d9 Author: Pranav Kant <[email protected]> Date: Sat Dec 23 18:36:28 2017 +0530 loleaflet: Unify dialog key handling logic with document's Change-Id: I422e813d76df9b52a860a05d09a89362dfb0b616 diff --git a/loleaflet/src/control/Control.LokDialog.js b/loleaflet/src/control/Control.LokDialog.js index 3e23fa6a..b6cb4c41 100644 --- a/loleaflet/src/control/Control.LokDialog.js +++ b/loleaflet/src/control/Control.LokDialog.js @@ -224,7 +224,9 @@ L.Control.LokDialog = L.Control.extend({ this._postWindowMouseEvent(lokEventType, this._toRawDlgId(strDlgId), e.offsetX, e.offsetY, 1, buttons, 0); }, this); L.DomEvent.on(dialogCanvas, 'keyup keypress keydown', function(e) { - this._handleDialogKeyEvent(e, this._toRawDlgId(strDlgId)); + // _onKeyDown fn below requires this kind of structure but leaflet DomEvent.on doesn't pass it + e.originalEvent = e; + map['keyboard']._onKeyDown(e, L.bind(this._postWindowKeyboardEvent, this, this._toRawDlgId(strDlgId))); }, this); L.DomEvent.on(dialogCanvas, 'contextmenu', function() { return false; @@ -244,42 +246,6 @@ L.Control.LokDialog = L.Control.extend({ ' char=' + charcode + ' key=' + keycode); }, - _handleDialogKeyEvent: function(e, winid) { - var docLayer = this._map._docLayer; - this.modifier = 0; - var shift = e.shiftKey ? this._map['keyboard'].keyModifier.shift : 0; - var ctrl = e.ctrlKey ? this._map['keyboard'].keyModifier.ctrl : 0; - var alt = e.altKey ? this._map['keyboard'].keyModifier.alt : 0; - var cmd = e.metaKey ? this._map['keyboard'].keyModifier.ctrl : 0; - this.modifier = shift | ctrl | alt | cmd; - - var charCode = e.charCode; - var keyCode = e.keyCode; - var unoKeyCode = this._map['keyboard']._toUNOKeyCode(keyCode); - - if (this.modifier) { - unoKeyCode |= this.modifier; - if (e.type !== 'keyup') { - this._postWindowKeyboardEvent(winid, 'input', charCode, unoKeyCode); - return; - } - } - - if (e.type === 'keydown' && this._map['keyboard'].handleOnKeyDownKeys[keyCode]) { - this._postWindowKeyboardEvent(winid, 'input', charCode, unoKeyCode); - } - else if (e.type === 'keypress' && (!this._map['keyboard'].handleOnKeyDownKeys[keyCode] || charCode !== 0)) { - if (charCode === keyCode && charCode !== 13) { - keyCode = 0; - unoKeyCode = this._map['keyboard']._toUNOKeyCode(keyCode); - } - this._postWindowKeyboardEvent(winid, 'input', charCode, unoKeyCode); - } - else if (e.type === 'keyup') { - this._postWindowKeyboardEvent(winid, 'up', charCode, unoKeyCode); - } - }, - _onDialogClose: function(dialogId, notifyBackend) { if (notifyBackend) this._sendCloseWindow(dialogId); diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js index 26d12f8a..0046421b 100644 --- a/loleaflet/src/layer/tile/TileLayer.js +++ b/loleaflet/src/layer/tile/TileLayer.js @@ -1430,20 +1430,6 @@ L.TileLayer = L.GridLayer.extend({ } }, - _postKeyboardEvents: function(type, charcodes, keycodes) { - // Both are arrays - if (typeof(charcodes.length) !== 'number' && typeof(keycodes.length) !== 'number') - return; - - // both have same length - if (charcodes.length !== keycodes.length) - return; - - for (var i = 0; i < charcodes.length; i++) { - this._postKeyboardEvent(type, charcodes[i], keycodes[i]); - } - }, - _postKeyboardEvent: function(type, charcode, keycode) { if (this._docType === 'spreadsheet' && this._prevCellCursor && type === 'input') { if (keycode === 1030) { // PgUp diff --git a/loleaflet/src/map/handler/Map.Keyboard.js b/loleaflet/src/map/handler/Map.Keyboard.js index 134b37ff..637aa1b9 100644 --- a/loleaflet/src/map/handler/Map.Keyboard.js +++ b/loleaflet/src/map/handler/Map.Keyboard.js @@ -239,11 +239,15 @@ L.Map.Keyboard = L.Handler.extend({ return this.keymap[keyCode] || keyCode; }, - _onKeyDown: function (e) { + _onKeyDown: function (e, postEventFn) { if (this._map.slideShow && this._map.slideShow.fullscreen) { return; } var docLayer = this._map._docLayer; + if (!postEventFn) { + // default is to post keyboard events on the document + postEventFn = docLayer._postKeyboardEvent; + } this.modifier = 0; var shift = e.originalEvent.shiftKey ? this.keyModifier.shift : 0; var ctrl = e.originalEvent.ctrlKey ? this.keyModifier.ctrl : 0; @@ -313,7 +317,7 @@ L.Map.Keyboard = L.Handler.extend({ if (this.modifier) { unoKeyCode |= this.modifier; if (e.type !== 'keyup' && (this.modifier !== shift || (keyCode === 32 && !docLayer._isCursorVisible))) { - docLayer._postKeyboardEvent('input', charCode, unoKeyCode); + postEventFn.call(this, 'input', charCode, unoKeyCode); e.originalEvent.preventDefault(); return; } @@ -327,7 +331,7 @@ L.Map.Keyboard = L.Handler.extend({ this._bufferedTextInputEvent = null; if (this._handleOnKeyDown(keyCode, this.modifier) && charCode === 0) { - docLayer._postKeyboardEvent('input', charCode, unoKeyCode); + postEventFn.call(this, 'input', charCode, unoKeyCode); } } else if ((e.type === 'keypress' || e.type === 'compositionend') && @@ -344,9 +348,11 @@ L.Map.Keyboard = L.Handler.extend({ } if (e.type === 'compositionend') { // Set all keycodes to zero - docLayer._postKeyboardEvents('input', compCharCodes, Array.apply(null, Array(compCharCodes.length)).map(Number.prototype.valueOf, 0)); + for (var idx = 0; i < compCharCodes.length; ++i) { + postEventFn.call(this, 'input', compCharCodes[idx], 0); + } } else { - docLayer._postKeyboardEvent('input', charCode, unoKeyCode); + postEventFn.call(this, 'input', charCode, unoKeyCode); } this._keyHandled = true; @@ -375,13 +381,11 @@ L.Map.Keyboard = L.Handler.extend({ if (!this._keyHandled && this._bufferedTextInputEvent) { var textInputData = this._bufferedTextInputEvent.originalEvent.data; charCode = e.originalEvent.keyCode; - compCharCodes = []; - for (var idx = 0; i < textInputData.length; i++) { - compCharCodes.push(textInputData[idx].charCodeAt()); + for (idx = 0; i < textInputData.length; i++) { + postEventFn.call(this, 'input', textInputData[idx].charCodeAt(), 0); } - docLayer._postKeyboardEvents('input', compCharCodes, Array.apply(null, Array(compCharCodes.length)).map(Number.prototype.valueOf, 0)); } - docLayer._postKeyboardEvent('up', charCode, unoKeyCode); + postEventFn.call(this, 'up', charCode, unoKeyCode); this._keyHandled = true; this._bufferedTextInputEvent = null; @@ -407,7 +411,7 @@ L.Map.Keyboard = L.Handler.extend({ else if (key in this._panKeys && e.originalEvent.shiftKey && docLayer._selections.getLayers().length !== 0) { // if there is a selection and the user wants to modify it - docLayer._postKeyboardEvent('input', charCode, unoKeyCode); + postEventFn.call(this, 'input', charCode, unoKeyCode); } else if (key in this._zoomKeys) { map.setZoom(map.getZoom() + (e.shiftKey ? 3 : 1) * this._zoomKeys[key]); commit c7d268b4a432c06031de8ba7a5027ba9fa52a671 Author: Pranav Kant <[email protected]> Date: Sat Dec 23 17:57:00 2017 +0530 loleaflet: '/' or backspace launches browser-specific actions Make the canvas contentEditable which prevents such actions from being invoked. Other alternative would be to add a dummy text field but this seems to do the work as well. Change-Id: I8d39f06b02959459e0beeebad2eefcd8e9e00d9d diff --git a/loleaflet/dist/loleaflet.css b/loleaflet/dist/loleaflet.css index d97fc008..5230e2df 100644 --- a/loleaflet/dist/loleaflet.css +++ b/loleaflet/dist/loleaflet.css @@ -349,5 +349,6 @@ body { } .lokdialog_canvas { + cursor: default; display: block; /* required to remove all borders around canvas element */ } diff --git a/loleaflet/src/control/Control.LokDialog.js b/loleaflet/src/control/Control.LokDialog.js index 5c09528e..3e23fa6a 100644 --- a/loleaflet/src/control/Control.LokDialog.js +++ b/loleaflet/src/control/Control.LokDialog.js @@ -189,6 +189,7 @@ L.Control.LokDialog = L.Control.extend({ dialogCanvas.width = width; dialogCanvas.height = height; dialogCanvas.tabIndex = '0'; + dialogCanvas.contentEditable = true; dialogCanvas.id = strDlgId + '-canvas'; var that = this; commit a46486b9e8742153c8e52addc1a8a071627f43cb Author: Pranav Kant <[email protected]> Date: Sat Dec 23 16:12:18 2017 +0530 Clean up; use Leaflet DomUtil API wherever possible Not possible to use in all the cases while keeping the behavior same. Need further investigation. Also rearrange the API a bit in preparation to use the common Map.Keyboard.js handler to handle key events for both dialog and the document. Change-Id: Ifd4ba2a9c1cdda50eb9c41ee43c7f883d71f65b1 diff --git a/loleaflet/src/control/Control.LokDialog.js b/loleaflet/src/control/Control.LokDialog.js index c89550ee..5c09528e 100644 --- a/loleaflet/src/control/Control.LokDialog.js +++ b/loleaflet/src/control/Control.LokDialog.js @@ -39,12 +39,14 @@ L.Control.LokDialog = L.Control.extend({ $('#' + this._toDlgPrefix(dialogId)).length > 0; }, + // given a prefixed dialog id like 'lokdialog-323', gives a raw id, 323 _toRawDlgId: function(dialogId) { if (typeof(dialogId) === 'string') return parseInt(dialogId.replace(this.dialogIdPrefix, '')); return dialogId; }, + // converts a raw dialog id like 432, to 'lokdialog-432' _toDlgPrefix: function(id) { return this.dialogIdPrefix + id; }, @@ -85,16 +87,13 @@ L.Control.LokDialog = L.Control.extend({ _onDialogMsg: function(e) { e.id = parseInt(e.id); var strDlgId = this._toDlgPrefix(e.id); + if (e.action === 'created') { var width = parseInt(e.size.split(',')[0]); var height = parseInt(e.size.split(',')[1]); if (e.winType === 'dialog') { this._launchDialog(this._toDlgPrefix(e.id), width, height, e.title); this._sendPaintWindow(e.id, this._createRectStr(e.id)); - if (e.title) { - this._dialogs[e.id].title = e.title; - $('#' + strDlgId).dialog('option', 'title', e.title); - } } else if (e.winType === 'child') { if (!this._isOpen(e.parentId)) return; @@ -128,8 +127,6 @@ L.Control.LokDialog = L.Control.extend({ } else if (e.action === 'size_changed') { width = parseInt(e.size.split(',')[0]); height = parseInt(e.size.split(',')[1]); - - strDlgId = this._toDlgPrefix(e.id); // FIXME: we don't really have to destroy and launch the dialog again but do it for // now because the size sent to us previously in 'created' cb is not correct $('#' + strDlgId).remove(); @@ -142,10 +139,12 @@ L.Control.LokDialog = L.Control.extend({ var y = parseInt(rectangle[1]); height = parseInt(rectangle[3]); - $('#' + strDlgId + '-cursor').css({height: height}); - // set the position of the lokdialog-cursor - $(this._dialogs[e.id].cursor).css({left: x, top: y}); - $('#' + strDlgId + '-cursor').css({display: this._dialogs[e.id].cursorVisible ? 'block' : 'none'}); + var dialogCursor = L.DomUtil.get(strDlgId + '-cursor'); + L.DomUtil.setStyle(dialogCursor, 'height', height + 'px'); + L.DomUtil.setStyle(dialogCursor, 'display', this._dialogs[e.id].cursorVisible ? 'block' : 'none'); + // set the position of the cursor container element + L.DomUtil.setStyle(this._dialogs[e.id].cursor, 'left', x + 'px'); + L.DomUtil.setStyle(this._dialogs[e.id].cursor, 'top', y + 'px'); } } else if (e.action === 'title_changed') { if (e.title && this._dialogs[parseInt(e.id)]) { @@ -180,12 +179,20 @@ L.Control.LokDialog = L.Control.extend({ }, _launchDialog: function(strDlgId, width, height, title) { - var canvas = '<div class="lokdialog" style="padding: 0px; margin: 0px; overflow: hidden;" id="' + strDlgId + '">' + - '<canvas class="lokdialog_canvas" tabindex="0" id="' + strDlgId + '-canvas" width="' + width + 'px" height="' + height + 'px"></canvas>' + - '</div>'; - $(document.body).append(canvas); + var dialogContainer = L.DomUtil.create('div', 'lokdialog', document.body); + L.DomUtil.setStyle(dialogContainer, 'padding', '0px'); + L.DomUtil.setStyle(dialogContainer, 'margin', '0px'); + L.DomUtil.setStyle(dialogContainer, 'overflow', 'hidden'); + dialogContainer.id = strDlgId; + + var dialogCanvas = L.DomUtil.create('canvas', 'lokdialog_canvas', dialogContainer); + dialogCanvas.width = width; + dialogCanvas.height = height; + dialogCanvas.tabIndex = '0'; + dialogCanvas.id = strDlgId + '-canvas'; + var that = this; - $('#' + strDlgId).dialog({ + $(dialogContainer).dialog({ width: width, title: title ? title : '', modal: false, @@ -207,27 +214,18 @@ L.Control.LokDialog = L.Control.extend({ // don't make 'TAB' focus on this button; we want to cycle focus in the lok dialog with each TAB $('.lokdialog_container button.ui-dialog-titlebar-close').attr('tabindex', '-1').blur(); - $('#' + strDlgId + '-canvas').on('mousedown', function(e) { + L.DomEvent.on(dialogCanvas, 'mousedown mouseup', function(e) { var buttons = 0; buttons |= e.button === map['mouse'].JSButtons.left ? map['mouse'].LOButtons.left : 0; buttons |= e.button === map['mouse'].JSButtons.middle ? map['mouse'].LOButtons.middle : 0; buttons |= e.button === map['mouse'].JSButtons.right ? map['mouse'].LOButtons.right : 0; - var modifier = 0; - that._postWindowMouseEvent('buttondown', strDlgId, e.offsetX, e.offsetY, 1, buttons, modifier); - }); - $('#' + strDlgId + '-canvas').on('mouseup', function(e) { - var buttons = 0; - buttons |= e.button === map['mouse'].JSButtons.left ? map['mouse'].LOButtons.left : 0; - buttons |= e.button === map['mouse'].JSButtons.middle ? map['mouse'].LOButtons.middle : 0; - buttons |= e.button === map['mouse'].JSButtons.right ? map['mouse'].LOButtons.right : 0; - var modifier = 0; - that._postWindowMouseEvent('buttonup', strDlgId, e.offsetX, e.offsetY, 1, buttons, modifier); - }); - $('#' + strDlgId + '-canvas').on('keyup keypress keydown', function(e) { - e.strDlgId = strDlgId; - that._handleDialogKeyEvent(e); - }); - $('#' + strDlgId + '-canvas').on('contextmenu', function() { + var lokEventType = e.type.replace('mouse', 'button'); + this._postWindowMouseEvent(lokEventType, this._toRawDlgId(strDlgId), e.offsetX, e.offsetY, 1, buttons, 0); + }, this); + L.DomEvent.on(dialogCanvas, 'keyup keypress keydown', function(e) { + this._handleDialogKeyEvent(e, this._toRawDlgId(strDlgId)); + }, this); + L.DomEvent.on(dialogCanvas, 'contextmenu', function() { return false; }); @@ -235,48 +233,49 @@ L.Control.LokDialog = L.Control.extend({ }, _postWindowMouseEvent: function(type, winid, x, y, count, buttons, modifier) { - this._map._socket.sendMessage('windowmouse id=' + this._toRawDlgId(winid) + ' type=' + type + + this._map._socket.sendMessage('windowmouse id=' + winid + ' type=' + type + ' x=' + x + ' y=' + y + ' count=' + count + ' buttons=' + buttons + ' modifier=' + modifier); }, - _postWindowKeyboardEvent: function(type, winid, charcode, keycode) { - this._map._socket.sendMessage('windowkey id=' + this._toRawDlgId(winid) + ' type=' + type + + _postWindowKeyboardEvent: function(winid, type, charcode, keycode) { + this._map._socket.sendMessage('windowkey id=' + winid + ' type=' + type + ' char=' + charcode + ' key=' + keycode); }, - _handleDialogKeyEvent: function(e) { + _handleDialogKeyEvent: function(e, winid) { + var docLayer = this._map._docLayer; this.modifier = 0; - var shift = e.originalEvent.shiftKey ? this._map['keyboard'].keyModifier.shift : 0; - var ctrl = e.originalEvent.ctrlKey ? this._map['keyboard'].keyModifier.ctrl : 0; - var alt = e.originalEvent.altKey ? this._map['keyboard'].keyModifier.alt : 0; - var cmd = e.originalEvent.metaKey ? this._map['keyboard'].keyModifier.ctrl : 0; + var shift = e.shiftKey ? this._map['keyboard'].keyModifier.shift : 0; + var ctrl = e.ctrlKey ? this._map['keyboard'].keyModifier.ctrl : 0; + var alt = e.altKey ? this._map['keyboard'].keyModifier.alt : 0; + var cmd = e.metaKey ? this._map['keyboard'].keyModifier.ctrl : 0; this.modifier = shift | ctrl | alt | cmd; - var charCode = e.originalEvent.charCode; - var keyCode = e.originalEvent.keyCode; + var charCode = e.charCode; + var keyCode = e.keyCode; var unoKeyCode = this._map['keyboard']._toUNOKeyCode(keyCode); if (this.modifier) { unoKeyCode |= this.modifier; if (e.type !== 'keyup') { - this._postWindowKeyboardEvent('input', e.strDlgId, charCode, unoKeyCode); + this._postWindowKeyboardEvent(winid, 'input', charCode, unoKeyCode); return; } } if (e.type === 'keydown' && this._map['keyboard'].handleOnKeyDownKeys[keyCode]) { - this._postWindowKeyboardEvent('input', e.strDlgId, charCode, unoKeyCode); + this._postWindowKeyboardEvent(winid, 'input', charCode, unoKeyCode); } else if (e.type === 'keypress' && (!this._map['keyboard'].handleOnKeyDownKeys[keyCode] || charCode !== 0)) { if (charCode === keyCode && charCode !== 13) { keyCode = 0; unoKeyCode = this._map['keyboard']._toUNOKeyCode(keyCode); } - this._postWindowKeyboardEvent('input', e.strDlgId, charCode, unoKeyCode); + this._postWindowKeyboardEvent(winid, 'input', charCode, unoKeyCode); } else if (e.type === 'keyup') { - this._postWindowKeyboardEvent('up', e.strDlgId, charCode, unoKeyCode); + this._postWindowKeyboardEvent(winid, 'up', charCode, unoKeyCode); } }, @@ -351,40 +350,33 @@ L.Control.LokDialog = L.Control.extend({ }, _removeDialogChild: function(id) { + if (typeof id === 'number') + id = this._toDlgPrefix(id); $('#' + id + '-floating').remove(); }, _createDialogChild: function(childId, dialogId, top, left) { var strDlgId = this._toDlgPrefix(dialogId); - var floatingCanvas = '<canvas class="lokdialogchild-canvas" id="' + strDlgId + '-floating"></canvas>'; - $('#' + strDlgId).append(floatingCanvas); - $('#' + strDlgId + '-floating').css({position: 'absolute', left: left, top: top}); + var dialogContainer = L.DomUtil.get(strDlgId); + var floatingCanvas = L.DomUtil.create('canvas', 'lokdialogchild-canvas', dialogContainer); + floatingCanvas.id = strDlgId + '-floating'; + L.DomUtil.setStyle(floatingCanvas, 'position', 'absolute'); + L.DomUtil.setStyle(floatingCanvas, 'left', left + 'px'); // yes, it's necessary to append 'px' + L.DomUtil.setStyle(floatingCanvas, 'top', top + 'px'); - var that = this; // attach events - $('#' + strDlgId + '-floating').on('mousedown', function(e) { + L.DomEvent.on(floatingCanvas, 'mousedown mouseup', function(e) { var buttons = 0; buttons |= e.button === map['mouse'].JSButtons.left ? map['mouse'].LOButtons.left : 0; buttons |= e.button === map['mouse'].JSButtons.middle ? map['mouse'].LOButtons.middle : 0; buttons |= e.button === map['mouse'].JSButtons.right ? map['mouse'].LOButtons.right : 0; - var modifier = 0; - that._postWindowMouseEvent('buttondown', childId, e.offsetX, e.offsetY, 1, buttons, modifier); - }); - - $('#' + strDlgId + '-floating').on('mouseup', function(e) { - var buttons = 0; - buttons |= e.button === map['mouse'].JSButtons.left ? map['mouse'].LOButtons.left : 0; - buttons |= e.button === map['mouse'].JSButtons.middle ? map['mouse'].LOButtons.middle : 0; - buttons |= e.button === map['mouse'].JSButtons.right ? map['mouse'].LOButtons.right : 0; - var modifier = 0; - that._postWindowMouseEvent('buttonup', childId, e.offsetX, e.offsetY, 1, buttons, modifier); - }); - - $('#' + strDlgId + '-floating').on('mousemove', function(e) { - that._postWindowMouseEvent('move', childId, e.offsetX, e.offsetY, 1, 0, 0); - }); - - $('#' + strDlgId + '-floating').on('contextmenu', function() { + var lokEventType = e.type.replace('mouse', 'button'); + this._postWindowMouseEvent(lokEventType, childId, e.offsetX, e.offsetY, 1, buttons, 0); + }, this); + L.DomEvent.on(floatingCanvas, 'mousemove', function(e) { + this._postWindowMouseEvent('move', childId, e.offsetX, e.offsetY, 1, 0, 0); + }, this); + L.DomEvent.on(floatingCanvas, 'contextmenu', function() { return false; }); } commit c257493e3056d92bb1f2a339de2e88aaa3109f7a Author: Pranav Kant <[email protected]> Date: Fri Dec 15 20:05:27 2017 +0530 lokdialog: Handle 'title' field in the 'created' cb While at it, move the title, width, height properties to this._dialogs object as they are dialog specific. Change-Id: Ibffcc57b0af210150690b2baf45d627baf5897fb Reviewed-on: https://gerrit.libreoffice.org/46560 Reviewed-by: Jan Holesovsky <[email protected]> Tested-by: Jan Holesovsky <[email protected]> (cherry picked from commit 192a1f87024c97d4dda031a45cce4d4900416217) diff --git a/loleaflet/src/control/Control.LokDialog.js b/loleaflet/src/control/Control.LokDialog.js index b710950d..c89550ee 100644 --- a/loleaflet/src/control/Control.LokDialog.js +++ b/loleaflet/src/control/Control.LokDialog.js @@ -24,6 +24,7 @@ L.Control.LokDialog = L.Control.extend({ }, _getParentDialog: function(id) { + id = parseInt(id); for (var winId in this._dialogs) { if (this._dialogs[winId].childid && this._dialogs[winId].childid === id) { return winId; @@ -39,7 +40,9 @@ L.Control.LokDialog = L.Control.extend({ }, _toRawDlgId: function(dialogId) { - return dialogId.replace(this.dialogIdPrefix, ''); + if (typeof(dialogId) === 'string') + return parseInt(dialogId.replace(this.dialogIdPrefix, '')); + return dialogId; }, _toDlgPrefix: function(id) { @@ -48,11 +51,11 @@ L.Control.LokDialog = L.Control.extend({ // Create a rectangle string of form "x,y,width,height" // if params are missing, assumes 0,0,dialog width, dialog height - _createRectStr: function(x, y, width, height) { + _createRectStr: function(id, x, y, width, height) { if (!width) - width = this._width; + width = this._dialogs[parseInt(id)].width; if (!height) - height = this._height; + height = this._dialogs[parseInt(id)].height; if (!x) x = 0; if (!y) @@ -80,15 +83,18 @@ L.Control.LokDialog = L.Control.extend({ }, _onDialogMsg: function(e) { + e.id = parseInt(e.id); var strDlgId = this._toDlgPrefix(e.id); if (e.action === 'created') { var width = parseInt(e.size.split(',')[0]); var height = parseInt(e.size.split(',')[1]); if (e.winType === 'dialog') { - this._width = width; - this._height = height; - this._launchDialog(this._toDlgPrefix(e.id)); - this._sendPaintWindow(e.id, this._createRectStr()); + this._launchDialog(this._toDlgPrefix(e.id), width, height, e.title); + this._sendPaintWindow(e.id, this._createRectStr(e.id)); + if (e.title) { + this._dialogs[e.id].title = e.title; + $('#' + strDlgId).dialog('option', 'title', e.title); + } } else if (e.winType === 'child') { if (!this._isOpen(e.parentId)) return; @@ -104,7 +110,7 @@ L.Control.LokDialog = L.Control.extend({ this._dialogs[parentId].childx = left; this._dialogs[parentId].childy = top; this._createDialogChild(e.id, parentId, top, left); - this._sendPaintWindow(e.id, this._createRectStr(0, 0, width, height)); + this._sendPaintWindow(e.id, this._createRectStr(null, 0, 0, width, height)); } } else if (e.action === 'invalidate') { var parent = this._getParentDialog(e.id); @@ -116,20 +122,19 @@ L.Control.LokDialog = L.Control.extend({ return; if (!rectangle) - rectangle = '0,0,' + this._width + ',' + this._height; + rectangle = '0,0,' + this._dialogs[e.id].width + ',' + this._dialogs[e.id].height; } this._sendPaintWindow(e.id, rectangle); } else if (e.action === 'size_changed') { - this._width = parseInt(e.size.split(',')[0]); - this._height = parseInt(e.size.split(',')[1]); + width = parseInt(e.size.split(',')[0]); + height = parseInt(e.size.split(',')[1]); strDlgId = this._toDlgPrefix(e.id); // FIXME: we don't really have to destroy and launch the dialog again but do it for // now because the size sent to us previously in 'created' cb is not correct $('#' + strDlgId).remove(); - this._launchDialog(strDlgId); - $('#' + strDlgId).dialog('option', 'title', this._title); - this._sendPaintWindow(e.id, this._createRectStr()); + this._launchDialog(strDlgId, width, height, this._dialogs[parseInt(e.id)].title); + this._sendPaintWindow(e.id, this._createRectStr(e.id)); } else if (e.action === 'cursor_invalidate') { if (this._isOpen(e.id) && !!e.rectangle) { rectangle = e.rectangle.split(','); @@ -143,8 +148,10 @@ L.Control.LokDialog = L.Control.extend({ $('#' + strDlgId + '-cursor').css({display: this._dialogs[e.id].cursorVisible ? 'block' : 'none'}); } } else if (e.action === 'title_changed') { - this._title = e.title; - $('#' + strDlgId).dialog('option', 'title', e.title); + if (e.title && this._dialogs[parseInt(e.id)]) { + this._dialogs[parseInt(e.id)].title = e.title; + $('#' + strDlgId).dialog('option', 'title', e.title); + } } else if (e.action === 'cursor_visible') { this._dialogs[e.id].cursorVisible = e.visible === 'true'; if (this._dialogs[e.id].cursorVisible) @@ -172,15 +179,15 @@ L.Control.LokDialog = L.Control.extend({ L.DomUtil.addClass(cursor, 'blinking-cursor'); }, - _launchDialog: function(strDlgId) { + _launchDialog: function(strDlgId, width, height, title) { var canvas = '<div class="lokdialog" style="padding: 0px; margin: 0px; overflow: hidden;" id="' + strDlgId + '">' + - '<canvas class="lokdialog_canvas" tabindex="0" id="' + strDlgId + '-canvas" width="' + this._width + 'px" height="' + this._height + 'px"></canvas>' + + '<canvas class="lokdialog_canvas" tabindex="0" id="' + strDlgId + '-canvas" width="' + width + 'px" height="' + height + 'px"></canvas>' + '</div>'; $(document.body).append(canvas); var that = this; $('#' + strDlgId).dialog({ - width: this._width, - title: 'LOK Dialog', // TODO: Get the 'real' dialog title from the backend + width: width, + title: title ? title : '', modal: false, closeOnEscape: true, resizable: false, @@ -190,7 +197,12 @@ L.Control.LokDialog = L.Control.extend({ } }); - this._dialogs[this._toRawDlgId(strDlgId)] = { open: true }; + this._dialogs[this._toRawDlgId(strDlgId)] = { + open: true, + width: width, + height: height, + title: title + }; // don't make 'TAB' focus on this button; we want to cycle focus in the lok dialog with each TAB $('.lokdialog_container button.ui-dialog-titlebar-close').attr('tabindex', '-1').blur(); commit bc682b2331a4271572280ef54924e558d573d606 Author: Pranav Kant <[email protected]> Date: Sat Dec 23 15:57:04 2017 +0530 Document these helpful function Change-Id: I70b439223c107e88ca38acb7b0ed814af814a22a diff --git a/loleaflet/reference.html b/loleaflet/reference.html index a1b4f3a2..7894f2a7 100644 --- a/loleaflet/reference.html +++ b/loleaflet/reference.html @@ -7030,6 +7030,16 @@ Popups will also be automatically opened when the layer is clicked on and closed <td>Returns the value for a certain style attribute on an element, including computed values or values set through CSS.</td> </tr> <tr> + <td><code><b>setStyle</b>( + <nobr><HTMLElement> <i>el</i></nobr>, + <nobr><String> <i>style</i> )</nobr> + <nobr><String> <i>value</i> )</nobr> + </code></td> + + <td><code>String</code></td> + <td>Sets the value for a certain style attribute on an element, including computed values or values set through CSS.</td> + </tr> + <tr> <td><code><b>create</b>( <nobr><String> <i>tagName</i></nobr>, <nobr><String> <i>className</i></nobr>, @@ -7041,6 +7051,18 @@ Popups will also be automatically opened when the layer is clicked on and closed <td>Creates an element with <code>tagName</code>, sets the <code>className</code>, and optionally appends it to <code>container</code> element.</td> </tr> <tr> + <td><code><b>createWithId</b>( + <nobr><String> <i>tagName</i></nobr>, + <nobr><String> <i>Id</i></nobr>, + <nobr><HTMLElement> <i>container?</i> )</nobr> + </code></td> + + <td><code>HTMLElement</code></td> + + <td>Creates an element with <code>tagName</code>, sets the <code>id</code>, and optionally appends it to <code>container</code> element.</td> + </tr> + + <tr> <td><code><b>remove</b>( <nobr><HTMLElement> <i>el</i> )</nobr> </code></td> commit 993bda50aacf0fdbe0e55166200a47be72257735 Author: Pranav Kant <[email protected]> Date: Sat Dec 23 15:55:48 2017 +0530 Possibly leftover from incomplete merge conflict Change-Id: I60dbb7a81db10a399ba98cd0c8589ca4a975bcec diff --git a/loleaflet/reference.html b/loleaflet/reference.html index 9a1f39ae..a1b4f3a2 100644 --- a/loleaflet/reference.html +++ b/loleaflet/reference.html @@ -7004,7 +7004,6 @@ Popups will also be automatically opened when the layer is clicked on and closed <p>Utility functions to work with the DOM tree, used by Leaflet internally.</p> ->>>>>>> more layer docs <h3>Methods</h3> <table data-id='domutil'> _______________________________________________ Libreoffice-commits mailing list [email protected] https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
