dev

2024-03-10 18:58:24 +01:00
parent 52f4900103
commit c4883e4296
39 changed files with 2068 additions and 1227 deletions
--- a/ZpcBulletinBoard/wwwroot/js/pages/note.js
+++ b/ZpcBulletinBoard/wwwroot/js/pages/note.js
@@ -0,0 +1,127 @@
+class Note{
+    constructor(id, divCanvas, x, y, width, height, content, colorClass, zindex) {
+        this.id = id;
+        this.divCanvas = divCanvas;
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.element = null;
+        this.content = content;
+        this.colorClass = colorClass;
+        this.zindex = zindex;
+    }
+
+    refresh(){
+        if (this.element !== null){
+            this.element.remove();
+        }
+
+        this.element =  $(`
+<div class="card div-note ${this.colorClass}" data-id="${this.id}">
+  <div class="card-body note-body">
+    <div class='note-content'>
+    ${this.content}
+    </div>
+  </div>
+</div>`);
+        this.element.draggable({
+            containment: "parent",
+            stop: function( event, ui ) {
+                let id = parseInt($(this).attr('data-id'));
+                let note = getNote(id);
+                note.x = ui.position.left;
+                note.y = ui.position.top;
+            }
+        });
+        this.element.resizable({
+            handles: 'se',
+            autoHide: true,
+            minHeight: 240,
+            minWidth: 300,
+            stop: function( event, ui ) {
+                let id = parseInt($(this).attr('data-id'));
+                let note = getNote(id);
+                note.width = ui.size.width;
+                note.height = ui.size.height;
+            }
+        });
+        this.element.css({
+            'width': this.width + 'px',
+            'height': this.height + 'px',
+            'position': 'relative',
+            'z-index': this.zindex
+        });
+        this.element.on("dblclick", function() {
+            openModalEditNote(parseInt($(this).attr('data-id')));    
+        });
+
+        this.element.on('mousedown', function(){
+            selectNote(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();
+    }
+
+    setPosition(){
+        this.element.css({
+            'left': this.x + 'px',
+            'top': this.y + 'px'
+        });
+    }
+}
+