loleaflet/css/device-mobile.css | 10 +-
loleaflet/src/control/Control.PartsPreview.js | 114 +++++++++++++++++++++++---
2 files changed, 112 insertions(+), 12 deletions(-)
New commits:
commit a7f82d2ede40db10985406168eab38fbff44b799
Author: Pranam Lashkari <lpra...@collabora.com>
AuthorDate: Fri Jul 10 17:05:43 2020 +0530
Commit: Pranam Lashkari <lpra...@collabora.com>
CommitDate: Thu Jul 30 12:44:46 2020 +0200
tdf#133283 leaflet: fixed reordering of slide with drag and drop in touch
screens
Changed the gestures:
1st tap to select the slide
2nd tap will open the mobile wizard
long press and then drag and drop the slides
Change-Id: I44a874f69eed4586667f7fbe825d5da943565071
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/99527
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoff...@gmail.com>
Reviewed-by: Pranam Lashkari <lpra...@collabora.com>
diff --git a/loleaflet/css/device-mobile.css b/loleaflet/css/device-mobile.css
index 24f26678a..ca7007b6a 100644
--- a/loleaflet/css/device-mobile.css
+++ b/loleaflet/css/device-mobile.css
@@ -702,6 +702,12 @@ td[id^=tb_spreadsheet-toolbar_item]:focus
table.w2ui-button div.w2ui-icon, td[id
padding-right: 1em;
}
+.preview-frame-portrait.preview-img-dropsite {
+ padding-right: 0px;
+ border-right: 20px solid #b6b6b6;
+ border-bottom: none;
+}
+
/* Slidesorter in landscape mode */
#presentation-controls-wrapper.landscape {
top: 41px;
@@ -746,8 +752,8 @@ td[id^=tb_spreadsheet-toolbar_item]:focus table.w2ui-button
div.w2ui-icon, td[id
}
/* Highlight where a slide can be dropped when reordering by drag-and-drop. */
-.preview-img-dropsite {
- border-bottom: 3px solid #b6b6b6;
+.preview-frame-landscape.preview-img-dropsite {
+ border-bottom: 10px solid #b6b6b6;
}
/* Related to mobilewizard.cxx */
diff --git a/loleaflet/src/control/Control.PartsPreview.js
b/loleaflet/src/control/Control.PartsPreview.js
index 860ad6bb7..f7f11e348 100644
--- a/loleaflet/src/control/Control.PartsPreview.js
+++ b/loleaflet/src/control/Control.PartsPreview.js
@@ -122,6 +122,7 @@ L.Control.PartsPreview = L.Control.extend({
var frame = L.DomUtil.create('div',
'preview-frame', this._scrollContainer);
this._addDnDHandlers(frame);
frame.setAttribute('draggable', false);
+ frame.setAttribute('id', 'first-drop-site');
if (!window.mode.isMobile()) {
L.DomUtil.setStyle(frame, 'height',
'20px');
@@ -187,21 +188,31 @@ L.Control.PartsPreview = L.Control.extend({
img.fetched = false;
if (window.mode.isMobile() || window.mode.isTablet()) {
(new Hammer(img, {recognizers: [[Hammer.Press]]}))
- .on('press', L.bind(function () {
- if (this._map._permission === 'edit') {
- setTimeout(function () {
-
w2ui['actionbar'].click('mobile_wizard');
- }, 0);
+ .on('press', function (e) {
+ if (this._map.isPermissionEdit()) {
+ this._addDnDTouchHandlers(e);
}
- }, this));
+ }.bind(this));
}
L.DomEvent.on(img, 'click', function (e) {
L.DomEvent.stopPropagation(e);
L.DomEvent.stop(e);
- this._setPart(e);
- this._map.focus();
- this.partsFocused = true;
- document.activeElement.blur();
+ var part =
$(this._partsPreviewCont).find('.mCSB_container
.preview-frame').index(e.target.parentNode);
+ if (part !== null)
+ var partId = parseInt(part) - 1; // The first
part is just a drop-site for reordering.
+ if (!window.mode.isDesktop() && partId ===
this._map._docLayer._selectedPart) {
+ // if mobile or tab then second tap will open
the mobile wizard
+ if (this._map._permission === 'edit') {
+ setTimeout(function () {
+
w2ui['actionbar'].click('mobile_wizard');
+ }, 0);
+ }
+ } else {
+ this._setPart(e);
+ this._map.focus();
+ this.partsFocused = true;
+ document.activeElement.blur();
+ }
}, this);
var topBound = this._previewContTop;
@@ -491,6 +502,89 @@ L.Control.PartsPreview = L.Control.extend({
}
},
+ _addDnDTouchHandlers: function (e) {
+ $(e.target).bind('touchmove', this._handleTouchMove.bind(this));
+ $(e.target).bind('touchcancel',
this._handleTouchCancel.bind(this));
+ $(e.target).bind('touchend', this._handleTouchEnd.bind(this));
+
+ // To avoid having to add a new message to move an arbitrary
part, let's select the
+ // slide that is being dragged.
+ var part = $(this._partsPreviewCont).find('.mCSB_container
.preview-frame').index(e.target.parentNode);
+ if (part !== null) {
+ var partId = parseInt(part) - 1; // The first part is
just a drop-site for reordering.
+ this._map.setPart(partId);
+ this._map.selectPart(partId, 1, false); // And select.
+ }
+ this.draggedSlide = L.DomUtil.create('img', '', document.body);
+ this.draggedSlide.setAttribute('src', e.target.currentSrc);
+ $(this.draggedSlide).css('position', 'absolute');
+ $(this.draggedSlide).css('height', e.target.height);
+ $(this.draggedSlide).css('width', e.target.width);
+ $(this.draggedSlide).css('left', e.center.x -
(e.target.width/2));
+ $(this.draggedSlide).css('top', e.center.y - e.target.height);
+ $(this.draggedSlide).css('z-index', '10');
+ $(this.draggedSlide).css('opacity', '75%');
+ $(this.draggedSlide).css('pointer-events', 'none');
+ $('.preview-img').css('pointer-events', 'none');
+
+ this.currentNode = null;
+ this.previousNode = null;
+ },
+
+ _removeDnDTouchHandlers: function (e) {
+ $(e.target).unbind('touchmove');
+ $(e.target).unbind('touchcancel');
+ $(e.target).unbind('touchend');
+ $('.preview-img').css('pointer-events', '');
+ },
+
+ _handleTouchMove: function (e) {
+ if (e.preventDefault) {
+ e.preventDefault();
+ }
+
+ this.currentNode =
document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY);
+
+ if (this.currentNode !== this.previousNode && this.previousNode
!== null) {
+ $('.preview-frame').removeClass('preview-img-dropsite');
+ }
+
+ if (this.currentNode.draggable || this.currentNode.id ===
'first-drop-site') {
+ this.currentNode.classList.add('preview-img-dropsite');
+ }
+
+ this.previousNode = this.currentNode;
+
+ $(this.draggedSlide).css('left', e.touches[0].clientX -
(e.target.width/2));
+ $(this.draggedSlide).css('top', e.touches[0].clientY -
e.target.height);
+ return false;
+ },
+
+ _handleTouchCancel: function(e) {
+ $('.preview-frame').removeClass('preview-img-dropsite');
+ $(this.draggedSlide).remove();
+ this._removeDnDTouchHandlers(e);
+ },
+
+ _handleTouchEnd: function (e) {
+ if (e.stopPropagation) {
+ e.stopPropagation();
+ }
+ if (this.currentNode) {
+ var part =
$(this._partsPreviewCont).find('.mCSB_container
.preview-frame').index(this.currentNode);
+ if (part !== null) {
+ var partId = parseInt(part) - 1; // First frame
is a drop-site for reordering.
+ if (partId < 0)
+ partId = -1; // First item is -1.
+
this._map._socket.sendMessage('moveselectedclientparts position=' + partId);
+ }
+ }
+ $('.preview-frame').removeClass('preview-img-dropsite');
+ $(this.draggedSlide).remove();
+ this._removeDnDTouchHandlers(e);
+ return false;
+ },
+
_handleDragStart: function (e) {
// To avoid having to add a new message to move an arbitrary
part, let's select the
// slide that is being dragged.
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
