contex menu

ZpcBulletinBoard/wwwroot/js/editor/edit-main.js

@@ -3,6 +3,7 @@ $(function () {
         $('.div-note-edit-color>div').removeClass('active');
         $(this).addClass('active');
     });
+
 });
 
 
@@ -18,7 +19,7 @@ function addNewNote(){
         return;
     }
     let tmpId = -1;
-    let tmpZindex = 1;
+    let tmpZindex = 50;
     notes.forEach(note => {
         if (note.id <= tmpId){
             tmpId = note.id -1;
@@ -33,6 +34,45 @@ function addNewNote(){
     note.refresh();
 }
 
+function noteChangeZindex(id, front){
+    let note = getNote(id);
+    let maxIndex = 0;
+    let minIndex = 999999999999;
+    notes.forEach(tmpNote => {
+        if (tmpNote.zindex > maxIndex){
+            maxIndex = tmpNote.zindex;
+        }
+
+        if (tmpNote.zindex < minIndex){
+            minIndex = tmpNote.zindex;
+        }
+    });
+    if (front){
+        //ce je isti ga potem ne premikam
+        if (note.zindex != maxIndex){
+            note.zindex = maxIndex + 1;
+        }
+    } else {
+        if (note.zindex != minIndex){
+            note.zindex = minIndex - 1;
+        }
+    }
+    note.refresh();
+}
+
+function deleteNote(id){
+    let note = getNote(id);
+    note.element.remove();
+    let newArray = [];
+
+    notes.forEach(tmpNote => {
+        if (tmpNote.id != note.id){
+            newArray.push(tmpNote);
+        }
+    });
+    notes = newArray;
+}
+
 function openModalEditNote(id){
     $('#inpModalEditNoteIdNote').val(id);
     note = getNote(id);

ZpcBulletinBoard/wwwroot/js/editor/note.js

@@ -30,7 +30,6 @@ class Note{
                 let note = getNote(id);
                 note.x = ui.position.left;
                 note.y = ui.position.top;
-                console.log(ui.position);
             }
         });
         this.element.resizable({
@@ -48,6 +47,59 @@ class Note{
         this.element.on( "dblclick", function() {
             openModalEditNote(parseInt($(this).attr('data-id')));    
         });
+
+        $.contextMenu({
+            selector: '.card[data-id="' + this.id + '"]',
+            callback: function(key, options) {
+                let id = parseInt($(this).attr('data-id'));
+                switch (key){
+                    case 'toFront':
+                        noteChangeZindex(id, true)
+                        break;
+                    case 'toBack':
+                        noteChangeZindex(id, false)
+                        break;
+                    case 'edit':
+                        openModalEditNote(id);
+                        break;
+                    case 'delete':
+                        deleteNote(id);
+                        break;
+                }
+            },
+            items: {
+                "toFront": { 
+                    icon: function(opt, $itemElement, itemKey, item){
+                        $itemElement.html('<i class="fas fa-reply"></i>&nbsp;V odspredje');
+            
+                        return 'context-menu-icon-updated';
+                    }
+                },
+                "toBack": { 
+                    icon: function(opt, $itemElement, itemKey, item){
+                        $itemElement.html('<i class="fas fa-share"></i>&nbsp;V ozadje');
+            
+                        return 'context-menu-icon-updated';
+                    }
+                },
+
+                "edit": { 
+                    icon: function(opt, $itemElement, itemKey, item){
+                        $itemElement.html('<i class="fas fa-edit"></i>&nbsp;Uredi');
+            
+                        return 'context-menu-icon-updated';
+                    }
+                },
+                
+                "delete": { 
+                    icon: function(opt, $itemElement, itemKey, item){
+                        $itemElement.html('<i class="fas fa-trash-alt"></i>&nbsp;Izbriši');
+            
+                        return 'context-menu-icon-updated';
+                    }
+                },
+            }
+        });
         
         this.divCanvas.append(this.element);
         this.setPosition();