128 lines
4.0 KiB
JavaScript
128 lines
4.0 KiB
JavaScript
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> V odspredje');
|
|
|
|
return 'context-menu-icon-updated';
|
|
}
|
|
},
|
|
"toBack": {
|
|
icon: function(opt, $itemElement, itemKey, item){
|
|
$itemElement.html('<i class="fas fa-share"></i> V ozadje');
|
|
|
|
return 'context-menu-icon-updated';
|
|
}
|
|
},
|
|
|
|
"edit": {
|
|
icon: function(opt, $itemElement, itemKey, item){
|
|
$itemElement.html('<i class="fas fa-edit"></i> Uredi');
|
|
|
|
return 'context-menu-icon-updated';
|
|
}
|
|
},
|
|
|
|
"delete": {
|
|
icon: function(opt, $itemElement, itemKey, item){
|
|
$itemElement.html('<i class="fas fa-trash-alt"></i> 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'
|
|
});
|
|
}
|
|
}
|
|
|