github-mirrors/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-04-23 05:27:14 -04:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #4181 from mfilser/drag_drop_update_and_screen_and_list_scroll

Browse source 
Drag drop jquery-ui update + screen and list scroll
This commit is contained in:
Lauri Ojansivu 2021-11-26 00:03:38 +02:00 • committed by GitHub
commit c62c705755
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 82 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.meteor/packages
View file

@ -60,7 +60,6 @@ reactive-var@1.0.11
fortawesome:fontawesome
mousetrap:mousetrap
mquandalle:jquery-textcomplete
mquandalle:jquery-ui-drag-drop-sort
mquandalle:mousetrap-bindglobal
peerlibrary:blaze-components@=0.15.1
templates:tabs

3
.meteor/versions
View file

@ -76,6 +76,7 @@ matb33:collection-hooks@0.9.1
matteodem:easy-search@1.6.4
mdg:validation-error@0.5.1
meteor@1.9.3
meteor-autosize@5.0.1
meteor-base@1.4.0
meteor-platform@1.2.6
meteorhacks:aggregate@1.3.0
@ -106,7 +107,6 @@ mquandalle:collection-mutations@0.1.0
mquandalle:jade@0.4.9
mquandalle:jade-compiler@0.4.5
mquandalle:jquery-textcomplete@0.8.0_1
mquandalle:jquery-ui-drag-drop-sort@0.2.0
mquandalle:moment@1.0.1
mquandalle:mousetrap-bindglobal@0.0.1
msavin:usercache@1.8.0
@ -219,7 +219,6 @@ url@1.3.2
useraccounts:core@1.14.2
useraccounts:flow-routing@1.14.2
useraccounts:unstyled@1.14.2
meteor-autosize@5.0.1
webapp@1.10.1
webapp-hashing@1.1.0
wekan-accounts-cas@0.1.0

6
client/components/boards/boardsList.js
View file

@ -1,5 +1,4 @@
const subManager = new SubsManager();
const { calculateIndex, enableClickOnTouch } = Utils;
Template.boardListHeaderBar.events({
'click .js-open-archived-board'() {
@ -56,7 +55,7 @@ BlazeComponent.extendComponent({
// of the previous and the following card -- if any.
const prevBoardDom = ui.item.prev('.js-board').get(0);
const nextBoardBom = ui.item.next('.js-board').get(0);
const sortIndex = calculateIndex(prevBoardDom, nextBoardBom, 1);
const sortIndex = Utils.calculateIndex(prevBoardDom, nextBoardBom, 1);
const boardDomElement = ui.item.get(0);
const board = Blaze.getData(boardDomElement);
@ -73,9 +72,6 @@ BlazeComponent.extendComponent({
},
});
// ugly touch event hotfix
enableClickOnTouch(itemsSelector);
// Disable drag-dropping if the current user is not a board member or is comment only
this.autorun(() => {
if (Utils.isMiniScreenOrShowDesktopDragHandles()) {

1
client/components/cards/labels.js
View file

@ -73,7 +73,6 @@ BlazeComponent.extendComponent({
card.board().setNewLabelOrder(newLabelOrderOnlyIds);
},
});
Utils.enableClickOnTouch(itemsSelector);
// Disable drag-dropping if the current user is not a board member or is comment only
this.autorun(() => {

39
client/components/lists/list.js
View file

@ -1,3 +1,5 @@
require('/client/lib/jquery-ui.js')
const { calculateIndex } = Utils;
BlazeComponent.extendComponent({
@ -114,6 +116,43 @@ BlazeComponent.extendComponent({
}
boardComponent.setIsDragging(false);
},
sort(event, ui) {
const $boardCanvas = $('.board-canvas');
const boardCanvas = $boardCanvas[0];
if (event.pageX < 10)
{ // scroll to the left
boardCanvas.scrollLeft -= 15;
ui.helper[0].offsetLeft -= 15;
}
if (
event.pageX > boardCanvas.offsetWidth - 10 &&
boardCanvas.scrollLeft < $boardCanvas.data('scrollLeftMax') // don't scroll more than possible
)
{ // scroll to the right
boardCanvas.scrollLeft += 15;
}
if (
event.pageY > boardCanvas.offsetHeight - 10 &&
boardCanvas.scrollTop < $boardCanvas.data('scrollTopMax') // don't scroll more than possible
)
{ // scroll to the bottom
boardCanvas.scrollTop += 15;
}
if (event.pageY < 10)
{ // scroll to the top
boardCanvas.scrollTop -= 15;
}
},
activate(event, ui) {
const $boardCanvas = $('.board-canvas');
const boardCanvas = $boardCanvas[0];
// scrollTopMax and scrollLeftMax only available at Firefox (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTopMax)
// https://stackoverflow.com/questions/12965296/how-to-get-maximum-document-scrolltop-value/12965383#12965383
$boardCanvas.data('scrollTopMax', $(document).height() - $(window).height());
// https://stackoverflow.com/questions/5138373/how-do-i-get-the-max-value-of-scrollleft/5704386#5704386
$boardCanvas.data('scrollLeftMax', boardCanvas.scrollWidth - boardCanvas.clientWidth);
},
});
this.autorun(() => {

20
client/lib/jquery-ui.js vendored Normal file
View file

@ -0,0 +1,20 @@
// https://bugs.jqueryui.com/ticket/15020
// required for sortable
require('jquery-ui/ui/widget')
require('jquery-ui/ui/scroll-parent')
require('jquery-ui/ui/data')
require('jquery-ui/ui/widgets/mouse')
require('jquery-ui/ui/ie')
require('jquery-ui/ui/widgets/sortable')
// required for draggable
require('jquery-ui/ui/plugin')
require('jquery-ui/ui/safe-active-element')
require('jquery-ui/ui/safe-blur')
require('jquery-ui/ui/widgets/draggable')
// everything already required for droppable
require('jquery-ui/ui/widgets/droppable')
// enable touch on mobile
require('jquery-ui-touch-punch')

12
client/lib/tests/Utils.tests.js
View file

@ -163,18 +163,6 @@ describe('Utils', function() {
it('has no tests yet');
});
describe(Utils.isTouchDevice.name, function() {
it('has no tests yet');
});
describe(Utils.calculateTouchDistance.name, function() {
it('has no tests yet');
});
describe(Utils.enableClickOnTouch.name, function() {
it('has no tests yet');
});
describe(Utils.manageCustomUI.name, function() {
it('has no tests yet');
});

61
client/lib/utils.js
View file

@ -364,67 +364,6 @@ Utils = {
};
},
// Detect touch device
isTouchDevice() {
const isTouchable = (() => {
const prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
const mq = function(query) {
return window.matchMedia(query).matches;
};
if (
'ontouchstart' in window ||
(window.DocumentTouch && document instanceof window.DocumentTouch)
) {
return true;
}
// include the 'heartz' as a way to have a non matching MQ to help terminate the join
// https://git.io/vznFH
const query = [
'(',
prefixes.join('touch-enabled),('),
'heartz',
')',
].join('');
return mq(query);
})();
Utils.isTouchDevice = () => isTouchable;
return isTouchable;
},
calculateTouchDistance(touchA, touchB) {
return Math.sqrt(
Math.pow(touchA.screenX - touchB.screenX, 2) +
Math.pow(touchA.screenY - touchB.screenY, 2),
);
},
enableClickOnTouch(selector) {
let touchStart = null;
let lastTouch = null;
$(document).on('touchstart', selector, function(e) {
touchStart = e.originalEvent.touches[0];
});
$(document).on('touchmove', selector, function(e) {
const touches = e.originalEvent.touches;
lastTouch = touches[touches.length - 1];
});
$(document).on('touchend', selector, function(e) {
if (
touchStart &&
lastTouch &&
Utils.calculateTouchDistance(touchStart, lastTouch) <= 20
) {
e.preventDefault();
const clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent('click', true, true);
e.target.dispatchEvent(clickEvent);
}
});
},
manageCustomUI() {
Meteor.call('getCustomUI', (err, data) => {
if (err && err.error[0] === 'var-not-exist') {

18
package-lock.json generated
View file

@ -1802,6 +1802,24 @@
"semver": "^6.3.0"
}
},
"jquery": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-2.2.4.tgz",
"integrity": "sha1-LInWiJterFIqfuoywUUhVZxsvwI="
},
"jquery-ui": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.13.0.tgz",
"integrity": "sha512-Osf7ECXNTYHtKBkn9xzbIf9kifNrBhfywFEKxOeB/OVctVmLlouV9mfc2qXCp6uyO4Pn72PXKOnj09qXetopCw==",
"requires": {
"jquery": ">=1.8.0 <4.0.0"
}
},
"jquery-ui-touch-punch": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/jquery-ui-touch-punch/-/jquery-ui-touch-punch-0.2.3.tgz",
"integrity": "sha1-7tgiQnM7okP0az6HwYQbMIGR2mg="
},
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

3
package.json
View file

@ -34,6 +34,9 @@
"exceljs": "^4.2.1",
"fibers": "^5.0.0",
"gridfs-stream": "https://github.com/wekan/gridfs-stream/tarball/master",
"jquery": "^2.2.4",
"jquery-ui": "^1.13.0",
"jquery-ui-touch-punch": "^0.2.3",
"jszip": "^3.7.1",
"ldapjs": "^2.3.1",
"markdown-it": "^12.2.0",