[Libreoffice-commits] online.git: loleaflet/css loleaflet/Makefile.am loleaflet/src
Tor Lillqvist (via logerrit)
logerrit at kemper.freedesktop.org
Wed Mar 25 15:29:44 UTC 2020
loleaflet/Makefile.am | 1
loleaflet/css/loleaflet.css | 71 ------------
loleaflet/src/control/Control.ContextToolbar.js | 141 ------------------------
loleaflet/src/map/handler/Map.TouchGesture.js | 135 +++++++++-------------
4 files changed, 55 insertions(+), 293 deletions(-)
New commits:
commit ff7db2b2292860e5c0dd2069af28966a4c0b4bb6
Author: Tor Lillqvist <tml at collabora.com>
AuthorDate: Wed Mar 25 15:12:38 2020 +0200
Commit: Tor Lillqvist <tml at collabora.com>
CommitDate: Wed Mar 25 16:29:25 2020 +0100
Get rid of the iOS app specific "context toolbar"
The less special-case code/logic/UI, the better the world is.
It had weird unintended side effects anyway. (In the iOS app, which
was the only place where it was used.) For instance, in a spreadsheet
document on iPhone, after loading the document, the normal "mobile
wizard" style context menu did not appear, no matter how long you
pressed a selected cell. But if you first got the context toolbar to
show up once, and after that selected some cell and long-pressed it,
the mobile wizard style context menu did appear, just as when using
web-based Online on the same device.
Note that despite that the code in Control.ContextToolbar.js was used
only in the iOS app (L.control.contextToolbar() was called only if
window.ThisIsTheiOSApp), the file did contain code for non-iOS, too.
Change-Id: Icdbfc7e71f77539c1bcb5ac8cf6984375297a4bd
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/91055
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
Reviewed-by: Tor Lillqvist <tml at collabora.com>
diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am
index 3a09ef370..3461fbe2f 100644
--- a/loleaflet/Makefile.am
+++ b/loleaflet/Makefile.am
@@ -246,7 +246,6 @@ LOLEAFLET_JS =\
src/control/Control.PartsPreview.js \
src/control/Control.Header.js \
src/control/Control.ColumnHeader.js \
- src/control/Control.ContextToolbar.js \
src/control/Control.RowHeader.js \
src/control/Control.DocumentRepair.js \
src/control/Control.DownloadProgress.js \
diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index 0a6ecc8d1..7a85ec727 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -396,20 +396,6 @@ body {
opacity: 0;
}
-.loleaflet-context-table {
- table-layout: fixed;
- background-color: #efefef;
- border-collapse: separate;
- border-spacing: 0;
- border: none;
- width: 100%;
-}
-
-.loleaflet-context-button {
- width: 40px;
- height: 40px;
-}
-
.loleaflet-context-down {
border: 1px solid #aaaaaa;
background-color: #dddddd;
@@ -421,12 +407,6 @@ body {
border: 0px;
}
-.loleaflet-context-toolbar {
- position: absolute;
- float: none;
- border: 1px solid #999;
-}
-
/* Important to override context-menu-icon's font-family here otherwise, jquery-contextmenu.css
* will try to load its own font file which is not available in dist/ */
.context-menu-icon::before {
@@ -589,57 +569,6 @@ body {
background: url('images/lc_rejecttrackedchange.svg') no-repeat center !important;
}
-.loleaflet-context-copy {
- background: url('images/lc_copy.svg') no-repeat center !important;
-}
-
-.loleaflet-context-cut {
- background: url('images/lc_cut.svg') no-repeat center !important;
-}
-
-.loleaflet-context-paste {
- background: url('images/lc_paste.svg') no-repeat center !important;
-}
-
-.loleaflet-ios-context-toolbar {
- position: absolute;
- float: none;
-}
-
-.loleaflet-ios-context-table {
- color: white;
- font-size: 15px;
- border-spacing: 0;
-}
-
-.loleaflet-ios-context-button {
- background-color: black;
- height: 40px;
-}
-
-.loleaflet-ios-context-left {
- padding-left: 10px;
- border-top-left-radius: 10px;
- border-bottom-left-radius: 10px;
-}
-
-.loleaflet-ios-context-first-and-middle-entry {
- padding-left: 8px;
- padding-right: 8px;
- border-right: 1px solid white;
-}
-
-.loleaflet-ios-context-last-entry {
- padding-left: 8px;
- padding-right: 8px;
-}
-
-.loleaflet-ios-context-right {
- padding-right: 10px;
- border-top-right-radius: 10px;
- border-bottom-right-radius: 10px;
-}
-
.loleaflet-annotation-menu, .loleaflet-annotation-menu-redline {
background: url('images/submenu.svg') no-repeat center/contain !important;
}
diff --git a/loleaflet/src/control/Control.ContextToolbar.js b/loleaflet/src/control/Control.ContextToolbar.js
deleted file mode 100644
index 8d97e29c0..000000000
--- a/loleaflet/src/control/Control.ContextToolbar.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/* -*- js-indent-level: 8 -*- */
-/*
- * L.Control.ContextToolbar.
- */
-/* global _UNO */
-
-L.Control.ContextToolbar = L.Control.extend({
- options: {
- position: 'topleft',
- item: ''
- },
-
- initialize: function (options) {
- L.setOptions(this, options);
- },
-
- onAdd: function () {
- if (!this._container) {
- this._initLayout();
- }
- if (this.options.item === 'paste') {
- this._paste.style.display = '';
- this._cut.style.display = 'none';
- this._copy.style.display = 'none';
- }
-
- this._container.style.visibility = 'hidden';
- return this._container;
- },
-
- onRemove: function () {
- this._paste.style.display = '';
- this._cut.style.display = '';
- this._copy.style.display = '';
- this.options.item = '';
- },
-
- _initLayout: function () {
- if (window.ThisIsTheiOSApp || window.ThisIsTheAndroidApp)
- this._container = L.DomUtil.create('div', 'loleaflet-ios-context-toolbar');
- else
- this._container = L.DomUtil.create('div', 'loleaflet-context-toolbar');
-
- var tagTd = 'td',
- onUp = 'mouseup',
- onDown = 'mousedown',
- stopEvents = 'touchstart touchmove touchend mousedown mousemove mouseout mouseover mouseup mousewheel click scroll',
- container;
-
- if (window.ThisIsTheiOSApp || window.ThisIsTheAndroidApp)
- container = L.DomUtil.create('table', 'loleaflet-ios-context-table', this._container);
- else
- container = L.DomUtil.create('table', 'loleaflet-context-table', this._container);
-
- var tbody = L.DomUtil.create('tbody', '', container),
- tr = L.DomUtil.create('tr', '', tbody);
-
- if (window.ThisIsTheiOSApp || window.ThisIsTheAndroidApp) {
- this._leftroundedend = L.DomUtil.create(tagTd, 'loleaflet-ios-context-button loleaflet-ios-context-left', tr);
- this._cut = L.DomUtil.create(tagTd, 'loleaflet-ios-context-button loleaflet-ios-context-first-and-middle-entry loleaflet-ios-context-cut', tr);
- this._cut.innerHTML = _UNO('.uno:Cut');
- this._copy = L.DomUtil.create(tagTd, 'loleaflet-ios-context-button loleaflet-ios-context-first-and-middle-entry loleaflet-ios-context-copy', tr);
- this._copy.innerHTML = _UNO('.uno:Copy');
- this._paste = L.DomUtil.create(tagTd, 'loleaflet-ios-context-button loleaflet-ios-context-last-entry loleaflet-ios-context-paste', tr);
- this._paste.innerHTML = _UNO('.uno:Paste');
- this._rightroundedend = L.DomUtil.create(tagTd, 'loleaflet-ios-context-button loleaflet-ios-context-right', tr);
- }
- else {
- this._cut = L.DomUtil.create(tagTd, 'loleaflet-context-button loleaflet-context-cut', tr);
- this._copy = L.DomUtil.create(tagTd, 'loleaflet-context-button loleaflet-context-copy', tr);
- this._paste = L.DomUtil.create(tagTd, 'loleaflet-context-button loleaflet-context-paste', tr);
- }
- L.DomEvent.on(this._cut, stopEvents, L.DomEvent.stopPropagation)
- .on(this._cut, onDown, this.onMouseDown, this)
- .on(this._cut, onUp, this.onMouseUp, this);
- L.DomEvent.on(this._copy, stopEvents, L.DomEvent.stopPropagation)
- .on(this._copy, onDown, this.onMouseDown, this)
- .on(this._copy, onUp, this.onMouseUp, this);
- L.DomEvent.on(this._paste, stopEvents, L.DomEvent.stopPropagation)
- .on(this._paste, onDown, this.onMouseDown, this)
- .on(this._paste, onUp, this.onMouseUp, this);
- },
-
- onAdded: function () {
- if (this._pos) {
- var maxBounds = this._map.getPixelBounds();
- var size = L.point(this._container.clientWidth,this._container.clientHeight);
- this._pos._add(L.point(-size.x / 2, -size.y));
- var bounds = new L.Bounds(this._pos, this._pos.add(size));
- if (!maxBounds.contains(bounds)) {
- var offset = L.point(0, 0);
- if (bounds.max.x > maxBounds.max.x) {
- offset.x = size.x;
- }
-
- if (bounds.max.y > maxBounds.max.y) {
- offset.y = size.y;
- }
- this._pos._subtract(offset);
- }
- L.DomUtil.setPosition(this._container, this._pos);
- }
- this._container.style.visibility = '';
- },
-
- onMouseDown: function (e) {
- L.DomUtil.addClass(e.target || e.srcElement, 'loleaflet-context-down');
- L.DomEvent.preventDefault(e);
- L.DomEvent.stopPropagation(e);
- },
-
- onMouseUp: function (e) {
- var target = e.target || e.srcElement;
-
- if (L.DomUtil.hasClass(target, 'loleaflet-context-cut') ||
- L.DomUtil.hasClass(target, 'loleaflet-ios-context-cut')) {
- this._map._socket.sendMessage('uno .uno:Cut');
- }
- else if (L.DomUtil.hasClass(target, 'loleaflet-context-copy') ||
- L.DomUtil.hasClass(target, 'loleaflet-ios-context-copy')) {
- this._map._socket.sendMessage('uno .uno:Copy');
- }
- else if (L.DomUtil.hasClass(target, 'loleaflet-context-paste') ||
- L.DomUtil.hasClass(target, 'loleaflet-ios-context-paste')) {
- this._map._socket.sendMessage('uno .uno:Paste');
- }
-
- L.DomEvent.preventDefault(e);
- L.DomEvent.stopPropagation(e);
- setTimeout(L.bind(this.onClick, this, target), 0);
- },
-
- onClick: function (e) {
- L.DomUtil.removeClass(e, 'loleaflet-context-down');
- this.remove();
- }
-});
-
-L.control.contextToolbar = function (options) {
- return new L.Control.ContextToolbar(options);
-};
diff --git a/loleaflet/src/map/handler/Map.TouchGesture.js b/loleaflet/src/map/handler/Map.TouchGesture.js
index 20143958f..004d423ba 100644
--- a/loleaflet/src/map/handler/Map.TouchGesture.js
+++ b/loleaflet/src/map/handler/Map.TouchGesture.js
@@ -21,11 +21,6 @@ L.Map.TouchGesture = L.Handler.extend({
L.Handler.prototype.initialize.call(this, map);
this._state = L.Map.TouchGesture.MAP;
- if (window.ThisIsTheiOSApp && !this._toolbar) {
- this._toolbar = L.control.contextToolbar();
- this._toolbarAdded = 0;
- }
-
if (!this._hammer) {
this._hammer = new Hammer(this._map._mapPane);
this._hammer.get('swipe').set({
@@ -217,84 +212,67 @@ L.Map.TouchGesture = L.Handler.extend({
var that = this;
var docLayer = this._map._docLayer;
- if (window.ThisIsTheiOSApp) {
- // console.log('==> ' + e.timeStamp);
- if (!this._toolbar._map && (docLayer.containsSelection(latlng) || (docLayer._graphicSelection && docLayer._graphicSelection.contains(latlng)))) {
- this._toolbar._pos = containerPoint;
- // console.log('==> Adding context toolbar ' + e.timeStamp);
- this._toolbar.addTo(this._map);
- this._toolbarAdded = e.timeStamp;
- } else if (this._toolbarAdded && e.timeStamp - this._toolbarAdded >= 1000) {
- // console.log('==> Removing context toolbar ' + e.timeStamp);
- this._toolbar.remove();
- this._map._contextMenu._onMouseDown({originalEvent: e.srcEvent});
- // send right click to trigger context menus
- this._map._docLayer._postMouseEvent('buttondown', mousePos.x, mousePos.y, 1, 4, 0);
- this._map._docLayer._postMouseEvent('buttonup', mousePos.x, mousePos.y, 1, 4, 0);
- }
- } else {
- var singleClick = function () {
- docLayer._postMouseEvent('buttondown', mousePos.x, mousePos.y, 1, 1, 0);
- docLayer._postMouseEvent('buttonup', mousePos.x, mousePos.y, 1, 1, 0);
- };
+ var singleClick = function () {
+ docLayer._postMouseEvent('buttondown', mousePos.x, mousePos.y, 1, 1, 0);
+ docLayer._postMouseEvent('buttonup', mousePos.x, mousePos.y, 1, 1, 0);
+ };
- var doubleClick = function () {
- docLayer._postMouseEvent('buttondown', mousePos.x, mousePos.y, 2, 1, 0);
- docLayer._postMouseEvent('buttonup', mousePos.x, mousePos.y, 2, 1, 0);
- };
+ var doubleClick = function () {
+ docLayer._postMouseEvent('buttondown', mousePos.x, mousePos.y, 2, 1, 0);
+ docLayer._postMouseEvent('buttonup', mousePos.x, mousePos.y, 2, 1, 0);
+ };
- var rightClick = function () {
- docLayer._postMouseEvent('buttondown', mousePos.x, mousePos.y, 1, 4, 0);
- docLayer._postMouseEvent('buttonup', mousePos.x, mousePos.y, 1, 4, 0);
- };
+ var rightClick = function () {
+ docLayer._postMouseEvent('buttondown', mousePos.x, mousePos.y, 1, 4, 0);
+ docLayer._postMouseEvent('buttonup', mousePos.x, mousePos.y, 1, 4, 0);
+ };
- var waitForSelectionMsg = function () {
- // check new selection if any
- var graphicSelection = docLayer._graphicSelection;
- var cellCursor = docLayer._cellCursor;
- if (!docLayer._cursorAtMispelledWord
- && (!graphicSelection || !graphicSelection.contains(latlng))
- && (!cellCursor || !cellCursor.contains(latlng))) {
- // try to select text
- doubleClick();
- }
- // send right click to trigger context menus
- that._map._contextMenu._onMouseDown({originalEvent: e.srcEvent});
- rightClick();
- };
-
- // we want to select the long touched object before triggering the context menu;
- // for selecting text we need to simulate a double click, anyway for a graphic object
- // a single click is enough, while a double click can lead to switch to edit mode
- // (not only for an embedded ole object, even for entering text inside a shape);
- // a similar problem regards spreadsheet cell: a single click moves the cell cursor,
- // while a double click enables text input;
- // in order to avoid these cases, we send a single click and wait for a few milliseconds
- // before checking if we received a possible selection message; if no such message is received
- // we simulate a double click for trying to select text and finally, in any case,
- // we trigger the context menu by sending a right click
+ var waitForSelectionMsg = function () {
+ // check new selection if any
var graphicSelection = docLayer._graphicSelection;
var cellCursor = docLayer._cellCursor;
- var bContainsSel = false;
- if (cellCursor)
- bContainsSel = docLayer.containsSelection(latlng);
- var textSelection;
- if (docLayer._textSelectionStart && docLayer._textSelectionEnd)
- textSelection = new L.LatLngBounds(docLayer._textSelectionStart.getSouthWest(), docLayer._textSelectionEnd.getNorthEast());
-
- if ((textSelection && textSelection.inBand(latlng))
- || (graphicSelection && graphicSelection.contains(latlng))
- || (cellCursor && cellCursor.contains(latlng)) || bContainsSel) {
- // long touched an already selected object
- // send right click to trigger context menus
- this._map._contextMenu._onMouseDown({originalEvent: e.srcEvent});
- rightClick();
- }
- else {
- // try to select a graphic object or move the cell cursor
- singleClick();
- setTimeout(waitForSelectionMsg, 300);
+ if (!docLayer._cursorAtMispelledWord
+ && (!graphicSelection || !graphicSelection.contains(latlng))
+ && (!cellCursor || !cellCursor.contains(latlng))) {
+ // try to select text
+ doubleClick();
}
+ // send right click to trigger context menus
+ that._map._contextMenu._onMouseDown({originalEvent: e.srcEvent});
+ rightClick();
+ };
+
+ // we want to select the long touched object before triggering the context menu;
+ // for selecting text we need to simulate a double click, anyway for a graphic object
+ // a single click is enough, while a double click can lead to switch to edit mode
+ // (not only for an embedded ole object, even for entering text inside a shape);
+ // a similar problem regards spreadsheet cell: a single click moves the cell cursor,
+ // while a double click enables text input;
+ // in order to avoid these cases, we send a single click and wait for a few milliseconds
+ // before checking if we received a possible selection message; if no such message is received
+ // we simulate a double click for trying to select text and finally, in any case,
+ // we trigger the context menu by sending a right click
+ var graphicSelection = docLayer._graphicSelection;
+ var cellCursor = docLayer._cellCursor;
+ var bContainsSel = false;
+ if (cellCursor)
+ bContainsSel = docLayer.containsSelection(latlng);
+ var textSelection;
+ if (docLayer._textSelectionStart && docLayer._textSelectionEnd)
+ textSelection = new L.LatLngBounds(docLayer._textSelectionStart.getSouthWest(), docLayer._textSelectionEnd.getNorthEast());
+
+ if ((textSelection && textSelection.inBand(latlng))
+ || (graphicSelection && graphicSelection.contains(latlng))
+ || (cellCursor && cellCursor.contains(latlng)) || bContainsSel) {
+ // long touched an already selected object
+ // send right click to trigger context menus
+ this._map._contextMenu._onMouseDown({originalEvent: e.srcEvent});
+ rightClick();
+ }
+ else {
+ // try to select a graphic object or move the cell cursor
+ singleClick();
+ setTimeout(waitForSelectionMsg, 300);
}
this._map.notifyActive();
@@ -322,9 +300,6 @@ L.Map.TouchGesture = L.Handler.extend({
latlng = this._map.layerPointToLatLng(layerPoint),
mousePos = this._map._docLayer._latLngToTwips(latlng);
- if (window.ThisIsTheiOSApp)
- this._toolbar.remove();
-
// clicked a hyperlink popup - not really designed for this.
if (this._map.hyperlinkPopup && e.target && e.target.id === 'hyperlinkpopup' &&
this._map.hyperlinkPopup._contentNode == e.target.parentNode)
More information about the Libreoffice-commits
mailing list