Skip to content

Commit

Permalink
Remove the checkbox deselection lag when not needed
Browse files Browse the repository at this point in the history
Resolves #14896
brandonkelly committed May 1, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 038e7ca commit 19a31c9
Showing 9 changed files with 39 additions and 22 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG-WIP.md
Original file line number Diff line number Diff line change
@@ -1 +1,7 @@
# Release Notes for Craft CMS 5.2 (WIP)

### Content Management
- Element index checkboxes no longer have a lag when deselected, except within element selection modals. ([#14896](https://github.com/craftcms/cms/issues/14896))

### Extensibility
- Added the `waitForDoubleClicks` setting to `Garnish.Select`, `Craft.BaseElementIndex`, and `Craft.BaseElementIndexView`.
2 changes: 1 addition & 1 deletion src/web/assets/cp/dist/cp.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/web/assets/cp/dist/cp.js.map

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion src/web/assets/cp/src/js/BaseElementIndex.js
Original file line number Diff line number Diff line change
@@ -3027,7 +3027,7 @@ Craft.BaseElementIndex = Garnish.Base.extend(
ev.stopPropagation();
},

// Source managemnet
// Source management
// -------------------------------------------------------------------------

_getSourcesInList: function ($list, topLevel) {
@@ -3321,6 +3321,7 @@ Craft.BaseElementIndex = Garnish.Base.extend(
multiSelect: this.multiSelect,
canSelectElement: this.settings.canSelectElement,
checkboxMode: this.selectable,
waitForDoubleClicks: this.settings.waitForDoubleClicks,
sortable: this.sortable,
onSelectionChange: this._handleSelectionChange.bind(this),
onSortChange: this.settings.onSortChange,
@@ -3748,6 +3749,7 @@ Craft.BaseElementIndex = Garnish.Base.extend(
disabledElementIds: [],
selectable: false,
multiSelect: false,
waitForDoubleClicks: false,
canSelectElement: null,
canDuplicateElements: (selectedItems) => true,
onBeforeDuplicateElements: async (selectedItems) => {},
2 changes: 2 additions & 0 deletions src/web/assets/cp/src/js/BaseElementIndexView.js
Original file line number Diff line number Diff line change
@@ -64,6 +64,7 @@ Craft.BaseElementIndexView = Garnish.Base.extend(
.length;
},
checkboxMode: this.settings.checkboxMode,
waitForDoubleClicks: this.settings.waitForDoubleClicks,
onSelectionChange: this.onSelectionChange.bind(this),
}
);
@@ -435,6 +436,7 @@ Craft.BaseElementIndexView = Garnish.Base.extend(
multiSelect: false,
canSelectElement: null,
checkboxMode: false,
waitForDoubleClicks: false,
sortable: false,
loadMoreElementsAction: 'element-indexes/get-more-elements',
onAppendElements: $.noop,
1 change: 1 addition & 0 deletions src/web/assets/cp/src/js/BaseElementSelectorModal.js
Original file line number Diff line number Diff line change
@@ -447,6 +447,7 @@ Craft.BaseElementSelectorModal = Garnish.Modal.extend(
disabledElementIds: this.settings.disabledElementIds,
selectable: true,
multiSelect: this.settings.multiSelect,
waitForDoubleClicks: true,
buttonContainer: this.$secondaryButtons,
onSelectionChange: () => {
if (this.elementIndex) {
2 changes: 1 addition & 1 deletion src/web/assets/garnish/dist/garnish.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/web/assets/garnish/dist/garnish.js.map

Large diffs are not rendered by default.

40 changes: 23 additions & 17 deletions src/web/assets/garnish/src/Select.js
Original file line number Diff line number Diff line change
@@ -623,9 +623,12 @@ export default Base.extend(
if (this.first !== null && ev.shiftKey) {
// Shift key is consistent for both selection modes
this.selectRange($item, true);
} else if (this._actAsCheckbox(ev) && !this.isSelected($item)) {
// Checkbox-style selection is handled from onMouseUp()
this.selectItem($item, true, true);
} else if (
this._actAsCheckbox(ev) &&
(!this.settings.waitForDoubleClicks || !this.isSelected($item))
) {
// Checkbox-style deselection is handled from onMouseUp()
this.toggleItem($item, true);
} else {
// Prepare for click handling in onMouseUp()
this.mousedownTarget = ev.currentTarget;
@@ -650,22 +653,24 @@ export default Base.extend(

// was this a click?
if (!ev.shiftKey && ev.currentTarget === this.mousedownTarget) {
// If this is already selected, wait a moment to see if this is a double click before making any rash decisions
if (this.isSelected($item)) {
this.clearMouseUpTimeout();

this.mouseUpTimeout = setTimeout(
function () {
if (this._actAsCheckbox(ev)) {
this.deselectItem($item);
} else {
this.deselectOthers($item);
}
}.bind(this),
300
);
const handler = () => {
if (this._actAsCheckbox(ev)) {
this.deselectItem($item);
} else {
this.deselectOthers($item);
}
};

if (this.settings.waitForDoubleClicks) {
// wait a moment to see if this is a double click before making any rash decisions
this.clearMouseUpTimeout();
this.mouseUpTimeout = setTimeout(handler, 300);
} else {
handler();
}
} else if (!this._actAsCheckbox(ev)) {
// Checkbox-style deselection is handled from onMouseDown()
// Checkbox-style selection is handled from onMouseDown()
this.deselectAll();
this.selectItem($item, true, true);
}
@@ -941,6 +946,7 @@ export default Base.extend(
filter: null,
checkboxMode: false,
makeFocusable: false,
waitForDoubleClicks: false,
onSelectionChange: $.noop,
},

0 comments on commit 19a31c9

Please sign in to comment.