From 03eb3d4a569a4c23c0efe86e571f55e7d1484d1e Mon Sep 17 00:00:00 2001 From: j Date: Fri, 24 Jan 2025 17:10:36 +0530 Subject: [PATCH] select multple annotations, option to pass confirm delete dialog --- source/UI/js/Form/ArrayEditable.js | 55 ++++++++++++++-------- source/UI/js/Video/AnnotationFolder.js | 2 + source/UI/js/Video/AnnotationPanel.js | 2 + source/UI/js/Video/VideoAnnotationPanel.js | 2 + 4 files changed, 42 insertions(+), 19 deletions(-) diff --git a/source/UI/js/Form/ArrayEditable.js b/source/UI/js/Form/ArrayEditable.js index e5b2f802..7a1a0637 100644 --- a/source/UI/js/Form/ArrayEditable.js +++ b/source/UI/js/Form/ArrayEditable.js @@ -25,6 +25,7 @@ Ox.ArrayEditable = function(options, self) { var that = Ox.Element({}, self) .defaults({ clickLink: null, + confirmDeleteDialog: null, editable: true, format: null, getSortValue: null, @@ -120,19 +121,27 @@ Ox.ArrayEditable = function(options, self) { // it is possible to delete an (empty-value) item // by selecting another one id = id || self.options.selected; - var position = Ox.getIndexById(self.options.items, id) - if (self.options.editable) { - self.options.items.splice(position, 1); - renderItems(); - that.triggerEvent('delete', {id: id}); - self.editing = false; - if (self.options.selected == id) { - self.selected = -1; - self.options.selected = ''; - } else if (self.options.selected) { - self.selected = Ox.getIndexById(self.options.item, self.options.selected) + + (self.options.confirmDeleteDialog ? self.options.confirmDeleteDialog: Ox.noop)({ + items: Ox.isArray(id) ? id : [id], + }, function(result) { + if (self.options.editable) { + (Ox.isArray(id) ? id : [id]).forEach(id => { + var position = Ox.getIndexById(self.options.items, id) + self.options.items.splice(position, 1); + that.triggerEvent('delete', {id: id}); + }) + renderItems(); + self.editing = false; + if (self.options.selected == id) { + self.selected = -1; + self.options.selected = ''; + } else if (self.options.selected) { + self.selected = Ox.getIndexById(self.options.item, self.options.selected) + } } - } + }) + } function doubleclick(e) { @@ -290,12 +299,20 @@ Ox.ArrayEditable = function(options, self) { if (!Ox.isArray(self.selected)) { self.selected = [self.selected] } - if (self.options.selected.includes(id)) { - self.options.selected.pop(id) - self.selected.pop(position) - } else { - self.options.selected.push(id) - self.selected.push(position) + if (!self.options.selected.includes(id)) { + var minPos, maxPos; + if (Ox.min(self.selected) > position) { + minPos = position + maxPos = Ox.min(self.selected) + } else { + minPos = Ox.max(self.selected) + 1 + maxPos = position + 1 + } + Ox.range(minPos, maxPos).forEach(pos => { + self.selected.push(pos) + self.options.selected.push(getId(pos)) + }) + } that.find('.OxSelected').removeClass('OxSelected').removeClass('OxMultiple'); that.find('.OxGroup').removeClass('OxGroup') @@ -371,7 +388,7 @@ Ox.ArrayEditable = function(options, self) { position = $element.data('position'); // if clicked on an element if (position != self.selected) { - if (e.shiftKey) { + if (e.shiftKey && self.selected != -1) { // add/remove item from multiple selection document.getSelection().removeAllRanges(); toggleItem(position); diff --git a/source/UI/js/Video/AnnotationFolder.js b/source/UI/js/Video/AnnotationFolder.js index 4b04dcd4..5439ebed 100644 --- a/source/UI/js/Video/AnnotationFolder.js +++ b/source/UI/js/Video/AnnotationFolder.js @@ -35,6 +35,7 @@ Ox.AnnotationFolder = function(options, self) { var that = Ox.Element({}, self) .defaults({ clickLink: null, + confirmDeleteDialog: null, collapsed: false, editable: false, highlight: '', @@ -281,6 +282,7 @@ Ox.AnnotationFolder = function(options, self) { } self.$annotations = Ox.ArrayEditable(Ox.extend({ clickLink: self.options.clickLink, + confirmDeleteDialog: self.options.confirmDeleteDialog, editable: self.options.editable, getSortValue: self.options.type == 'text' ? function(value) { diff --git a/source/UI/js/Video/AnnotationPanel.js b/source/UI/js/Video/AnnotationPanel.js index 7e03f779..5f81c56a 100644 --- a/source/UI/js/Video/AnnotationPanel.js +++ b/source/UI/js/Video/AnnotationPanel.js @@ -48,6 +48,7 @@ Ox.AnnotationPanel = function(options, self) { .defaults({ calendarSize: 256, clickLink: null, + confirmDeleteDialog: null, editable: false, enableExport: false, enableImport: false, @@ -371,6 +372,7 @@ Ox.AnnotationPanel = function(options, self) { self.$folder[index] = Ox.AnnotationFolder( Ox.extend({ clickLink: self.options.clickLink, + confirmDeleteDialog: self.options.confirmDeleteDialog, collapsed: !self.options.showLayers[layer.id], editable: self.options.editable, highlight: getHighlight(layer.id), diff --git a/source/UI/js/Video/VideoAnnotationPanel.js b/source/UI/js/Video/VideoAnnotationPanel.js index c9c22801..08585a7c 100644 --- a/source/UI/js/Video/VideoAnnotationPanel.js +++ b/source/UI/js/Video/VideoAnnotationPanel.js @@ -61,6 +61,7 @@ Ox.VideoAnnotationPanel = function(options, self) { censoredIcon: '', censoredTooltip: '', clickLink: null, + confirmDeleteDialog: null, cuts: [], duration: 0, enableDownload: false, @@ -844,6 +845,7 @@ Ox.VideoAnnotationPanel = function(options, self) { autocomplete: self.options.autocomplete, calendarSize: self.options.annotationsCalendarSize, clickLink: self.options.clickLink, + confirmDeleteDialog: self.options.confirmDeleteDialog, editable: true, enableExport: self.options.enableExport, enableImport: self.options.enableImport,