select multple annotations, option to pass confirm delete dialog

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);

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) {

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),

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,