dev

ZpcBulletinBoard/wwwroot/css/boards-links/index.css

@@ -0,0 +1,102 @@
+.main-content{
+    height: calc(100vh - 300px);
+}
+
+.div-content{
+    width: 100%;
+}
+
+.div-content-boards{
+    float: left;
+    width: calc(100% - 240px);
+    max-width: calc(100% - 240px);
+}
+
+.div-content-pages{
+    float: left;
+    width: 240px;
+    height: 100%;
+}
+
+.boards-content > hr{
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+.div-board{
+    float: left;
+    text-align: center;
+    width: 50px;
+    height: 230px;
+    border: 1px solid rgba(24, 28, 33, 0.06);
+    border-radius: 0.25rem;
+    margin: 5px;
+    margin-right: 15px;
+    writing-mode: vertical-lr;
+    background-color: rgba(111, 111, 143, 0.171);
+}
+
+.div-board > h5 {
+    margin: 2px;
+    margin-left:15px;
+    text-orientation: mixed;
+}
+
+.div-pages {
+    width: calc(100% - 70px);
+    margin: 5px;
+    height: 230px;
+    margin-left: 10px;
+    margin-bottom: 5px;
+    overflow-x: auto;
+}
+
+.div-page {
+    float: left;
+    text-align: center;
+    width: 200px;
+    height: 230px;
+    border: 1px solid rgba(24, 28, 33, 0.06);
+    border-radius: 0.25rem;
+    margin-right: 5px;
+}
+
+.div-page:hover {
+    cursor: grab;
+    /* background-color: rgba(24, 28, 33, 0.06); */
+    border-color: blue;
+}
+
+.page-active {
+    background-color: rgba(128, 171, 226, 0.5);
+}
+
+.div-page > h5 {
+    margin-top: 5px;
+    margin-bottom: 2px;
+}
+
+.div-page > i {
+    margin-top: 10px;
+}
+
+.div-available-pages{
+    overflow-y: scroll;
+    height: 100%;
+}
+
+.div-available-pages>.div-page{
+    margin-top: 5px;
+    margin-left: 10px;
+}
+
+.img-thumbnail{
+    height: 170px;
+    width: 170px;
+    margin-left: 15px;
+    margin-top: 5px;
+}
+
+.btn-tool{
+    /* padding: 1px; */
+}

ZpcBulletinBoard/wwwroot/css/pages/editor-main.css

@@ -64,6 +64,21 @@
     float: left;
 }
 
+.div-note.active{
+    border-color: blue;
+}
+
+.note-content{
+    overflow: hidden;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.note-body{
+    width: 100%;
+    height: calc(100% - 15px);
+}
+
 .input-hidden {
     display: none;
 }

ZpcBulletinBoard/wwwroot/js/boards-links/index.js

@@ -0,0 +1,109 @@
+$(function(){
+    loadBoards();
+});
+
+function loadBoards(){
+    $.blockUI();
+    $.ajax({
+        type: "GET",
+        url: "/BoardsLinks/Index/?handler=Boards",
+        data: {
+        },
+        success: function (data) {
+            if (data.successful){
+                let boardContent = $('.boards-content');
+                boardContent.empty();
+
+                if (data.boards){
+                    data.boards.forEach((board) => {
+                        console.log(board);
+                        boardContent.append(`<div class="div-board">
+                        <h5>${board.name}</h5>
+                    </div>
+                    <div class="div-pages" ondrop="dropPage(event, this)" ondragover="allowDropPage(event, this)" data-idboard="${board.idBulletinBoard}">
+                        
+                    </div>
+                    <hr/>`);
+                        if (board.links){
+                            board.links.forEach((link) => {
+                                addPageToBoard(board.idBulletinBoard, link);
+                            });
+                        }
+                    });
+                }
+                
+            } else {
+                Swal.fire('Napaka', data.error, 'error');
+                console.log(data);
+            }
+            $.unblockUI();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            console.log(xhr);
+            alert(xhr.responseText);
+            $.unblockUI();
+        }
+    });
+}
+
+function allowDropPage(ev) {
+    console.log('allowDrop');
+    if (ev.dataTransfer.getData("idPage")){
+        ev.preventDefault();
+    }
+  }
+  
+  function dragPage(ev, el) {
+    console.log('drag');
+    ev.dataTransfer.setData("idPage", $(el).attr('data-id'));
+    
+  }
+  
+  function dropPage(ev, el) {
+    console.log('drop');
+    ev.preventDefault();
+    let idPage = parseInt(ev.dataTransfer.getData("idPage"));
+    let idBoard = parseInt($(el).attr('data-idboard'));
+    $.blockUI();
+    $.ajax({
+        type: "POST",
+        beforeSend: function(xhr) {
+            xhr.setRequestHeader("XSRF-TOKEN",
+                $('input:hidden[name="__RequestVerificationToken"]').val());
+        },
+        url: "/BoardsLinks/Index/?handler=AddLink",
+        data: { 
+            idBoard,
+            idPage
+        },
+        success: function(data) {
+            if (data.successful){
+                addPageToBoard(idBoard, data.link);
+            } else {
+                Swal.fire('Napaka', data.error, 'error');
+                console.log(data);
+            }
+            $.unblockUI();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            console.log({xhr, ajaxOptions, thrownError});
+            alert(xhr.responseText);
+            $.unblockUI();
+        }
+    });   
+  }
+
+  function addPageToBoard(idBoard, link){
+    let div = $('.div-pages[data-idboard="' + idBoard +  '"]');
+
+    div.append(`<div class="div-page" data-id="${link.idLink}" data-idPage='${link.bulletinBoardPage.idBulletinBoardPage}'>
+    <img class="img-thumbnail rounded" src="/bulletin-board-images/pages/${link.bulletinBoardPage.image}" alt="page image" />
+    <small>${link.bulletinBoardPage.name}</small>
+    <div class="tools">
+        <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-primary borderless"><i class="fas fa-chevron-left"></i></a>
+        <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-secondary borderless"><i class="far fa-clock"></i></a>
+        <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-danger borderless"><i class="fas fa-trash-alt"></i></a>
+        <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-primary borderless"><i class="fas fa-chevron-right"></i></a>
+    </div>
+</div>`);
+  }

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

@@ -0,0 +1,307 @@
+$(function () {
+    $('.div-note-edit-color>div').on('click', function(){
+        $('.div-note-edit-color>div').removeClass('active');
+        $(this).addClass('active');
+    });
+    $(document).on('keyup', function(e){
+        if (e.originalEvent.key === 'Delete' || e.originalEvent.key === 'Backspace'){
+            let id = parseInt($('.div-note.active').attr('data-id'));
+            if (isNaN(id)){
+                return;
+            }
+            deleteNote(id);
+        }
+    });
+    
+    loadPage();
+});
+
+
+let divCanvas;
+let canWidth;
+let canHeight;
+let notes = [];
+
+function addNewNote(){
+    let idPage = parseInt($('#inpIdPage').val());
+    if (isNaN(idPage) || idPage <= 0){
+        Swal.fire('Stran ni izbrana', '', 'warning');
+        return;
+    }
+    let tmpId = -1;
+    let tmpZindex = 50;
+    notes.forEach(note => {
+        if (note.id <= tmpId){
+            tmpId = note.id -1;
+        }
+
+        if (note.zindex >= tmpZindex){
+            tmpZindex = note.zindex + 1;
+        }
+    });
+    let note = new Note(tmpId, divCanvas, 0, 0, 400, 240, 'Vnesi besedilo', 'note-color-white', tmpZindex);
+    notes.push(note);
+    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);
+
+    $('#divModalEditNote').modal('show');
+    $('#divModalEditNoteSummernote').summernote('destroy');
+    $('#divModalEditNoteSummernote').html(note.content);
+    $('#divModalEditNoteSummernote').summernote({height: 400,});
+    $('.div-note-edit-color>div').removeClass('active');
+    $('.div-note-edit-color>.' + note.colorClass).addClass('active');
+}
+
+function saveModalEditNote(){
+    let idNote = parseInt($('#inpModalEditNoteIdNote').val());
+    note = getNote(idNote);
+    note.content = $('#divModalEditNoteSummernote').summernote('code');
+    note.colorClass = $('.div-note-edit-color>.active').attr('class').replace(' active', '');
+    note.refresh();
+    $('#divModalEditNote').modal('hide');
+}
+
+function getNote(id){
+    let note;
+    notes.forEach(e => {
+        if (e.id === id){
+            note = e;
+        }
+    });
+    return note;
+}
+
+function loadBoard(id){
+    $.blockUI();
+    $.ajax({
+        type: "GET",
+        url: "/Pages/EditMain/?handler=Board",
+        data: {
+            id
+        },
+        success: function (data) {
+            if (data.successful){
+                $('.div-board>h5').text(data.board.name);
+                $('.div-board').attr('data-idboard', data.board.idBulletinBoard);
+                
+                $('[data-idpage]').remove();
+                if (data.board.pages){
+                    data.board.pages.forEach(element => {
+                        boardAddPage(element);
+                    });
+                }
+            } else {
+                Swal.fire('Napaka', data.error, 'error');
+                console.log(data);
+            }
+            $.unblockUI();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            console.log(xhr);
+            alert(xhr.responseText);
+            $.unblockUI();
+        }
+    });
+}
+
+function loadPage(){
+    let id = parseInt($('#inpIdPage').val());
+    $.blockUI();
+    $.ajax({
+        type: "GET",
+        url: "/Pages/EditMain/?handler=Page",
+        data: {
+            id
+        },
+        success: function (data) {
+            if (data.successful){
+                let placeholder = $('#divPlaceholder');
+                placeholder.empty();
+                let tmpSplit = data.page.ratioString.split(':');
+                canWidth = placeholder.width();
+                canHeight = canWidth / (parseFloat(tmpSplit[0]) / parseFloat(tmpSplit[1]));
+                divCanvas = $(`<div id='divCanvas'></div>`);
+                placeholder.append(divCanvas);
+                divCanvas.css({
+                    'width': '100%',
+                    'height': canHeight + 'px',
+                    'background-color': 'white',
+                    'padding': '5px'
+                });
+                notes = [];
+                $('.div-note').remove();
+                if (data.page.notes){
+                    data.page.notes.forEach(el => {
+                        let note = new Note(el.idNote, divCanvas, el.x, el.y, el.width, el.height, el.content, el.colorClass, el.zindex);
+                        notes.push(note);
+                        note.refresh();
+                    });
+                }
+            } else {
+                Swal.fire('Napaka', data.error, 'error');
+                console.log(data);
+            }
+            $.unblockUI();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            console.log(xhr);
+            alert(xhr.responseText);
+            $.unblockUI();
+        }
+    });
+}
+
+function saveNotes(){
+    let idBulletinBoardPage = parseInt($('#inpIdPage').val());
+    if (isNaN(idBulletinBoardPage) || idBulletinBoardPage <= 0){
+        Swal.fire('Stran ni izbrana', '', 'warning');
+        return;
+    }
+    //skrijemo okvirje
+    $('.div-note.active').removeClass('active');
+
+    let array = [];
+
+    notes.forEach(note => {
+        array.push({
+            idNote: note.id,
+            idBulletinBoardPage,
+            x: note.x,
+            y: note.y,
+            width: note.width,
+            height: note.height,
+            content: note.content,
+            colorClass: note.colorClass,
+            zindex: note.zindex
+        })
+    });
+
+    $.blockUI();
+    $.ajax({
+        type: "POST",
+        beforeSend: function(xhr) {
+            xhr.setRequestHeader("XSRF-TOKEN",
+                $('input:hidden[name="__RequestVerificationToken"]').val());
+        },
+        url: "EditMain/?handler=Notes",
+        data: { 
+            idBulletinBoardPage,
+            notes: array
+        },
+        success: function(data) {
+            if (data.successful){
+                savePageImage();
+            } else {
+                Swal.fire('Napaka', data.error, 'error');
+                console.log(data);
+            }
+            $.unblockUI();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            alert(xhr.responseText);
+            $.unblockUI();
+        }
+    });
+}
+
+function savePageImage(){
+    let idPage = parseInt($('#inpIdPage').val());
+    if (isNaN(idPage) || idPage <= 0){
+        Swal.fire('Stran ni izbrana', '', 'warning');
+        return;
+    }
+
+    $.blockUI();
+
+    var node = document.getElementById('divCanvas');
+    htmlToImage.toSvg(node)
+    .then(function (base64String) {
+        fetch(base64String)
+        .then(res => res.blob())
+        .then(blob => {
+            let formData = new FormData();
+            formData.append("file", blob);
+            formData.append("idPage", idPage);
+            $.ajax({
+                type: "POST",
+                beforeSend: function(xhr) {
+                    xhr.setRequestHeader("XSRF-TOKEN",
+                        $('input:hidden[name="__RequestVerificationToken"]').val());
+                },
+                url: "/Pages/EditMain/?handler=BoardPageImage",
+                data: formData,
+                cache: false,
+                contentType: false,
+                processData: false,
+                success: function(data) {
+                    if (data.successful){
+                        loadPage(idPage);
+                    } else {
+                        Swal.fire('Napaka', data.error, 'error');
+                        console.log(data);
+                    }
+                    $.unblockUI();
+                },
+                error: function (xhr, ajaxOptions, thrownError) {
+                    alert(xhr.responseText);
+                    $.unblockUI();
+                }
+            });
+        });
+    })
+    .catch(function (error) {
+        $.unblockUI();
+        console.error('oops, something went wrong!', error);
+    });
+}
+
+function selectNote(id){
+    $('.div-note.active').removeClass('active');
+    $('.div-note[data-id="' + id + '"]').addClass('active');
+
+}
+
+

ZpcBulletinBoard/wwwroot/js/pages/index.js

@@ -0,0 +1,216 @@
+$(function(){
+    let openEditorForPage = parseInt($('#inpOpenEditorForPage').val());
+    if (!isNaN(openEditorForPage) && openEditorForPage > 0){
+        $('#inpOpenEditorForPage').val(0);
+        openEditor(openEditorForPage);
+    }
+    $('[data-toggle="tooltip"]').tooltip();
+});
+
+function openModalAddPage(){
+    $('#inpModalAddEditPageIdPage').val(0);
+    $('#inpModalAddEditPageName').val('');
+    $('#divModalAddEditPage').modal('show');
+}
+
+
+function openModalEditPage(el){
+    let idBulletinBoardPage = parseInt($(el).parent().parent().attr('data-id'));
+    if (isNaN(idBulletinBoardPage)){
+        Swal.fire('Napaka ni id strani!', '', 'error');
+        return;
+    }
+    $.blockUI();
+    $.ajax({
+        type: "GET",
+        url: "/Pages/Index/?handler=Page",
+        data: {
+            id: idBulletinBoardPage
+        },
+        success: function (data) {
+            if (data.successful){
+                $('#inpModalAddEditPageIdPage').val(data.page.idBulletinBoardPage);
+                $('#inpModalAddEditPageName').val(data.page.name);
+                $('#selModalAddEditPageRatio').val(data.page.ratio).trigger('change');
+                $('#selModalAddEditPageType').val(data.page.type).trigger('change');
+                $('#divModalAddEditPage').modal('show');
+            } else {
+                Swal.fire('Napaka', data.error, 'error');
+                console.log(data);
+            }
+            $.unblockUI();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            console.log(xhr);
+            alert(xhr.responseText);
+            $.unblockUI();
+        }
+    });
+}
+
+function saveModalAddEditPage(){
+    let name = $('#inpModalAddEditPageName').val();
+    let ratio = parseInt($('#selModalAddEditPageRatio').val());
+    let type = parseInt($('#selModalAddEditPageType').val());
+    let idBulletinBoardPage = parseInt($('#inpModalAddEditPageIdPage').val());
+    if (name === ''){
+        Swal.fire('Ime ni vneseno', '', 'warning');
+        return;
+    }
+
+    if (isNaN(ratio)){
+        Swal.fire('Razmerje ni vneseno', '', 'warning');
+        return;
+    }
+
+    if (isNaN(type)){
+        Swal.fire('Tip ni vnesen', '', 'warning');
+        return;
+    }
+
+    $.blockUI();
+    $.ajax({
+        type: "POST",
+        beforeSend: function(xhr) {
+            xhr.setRequestHeader("XSRF-TOKEN",
+                $('input:hidden[name="__RequestVerificationToken"]').val());
+        },
+        url: "/Pages/Index/?handler=BoardPage",
+        data: { page : {
+            idBulletinBoardPage,
+            name,
+            ratio,
+            type
+        }},
+        success: function(data) {
+            if (data.successful){
+                $('#divModalAddEditPage').modal('hide');
+                if (idBulletinBoardPage > 0){
+                    //Ce je edit ne odprem editorja
+                    $('#inpOpenEditorForPage').val(0);
+                } else {
+                    $('#inpOpenEditorForPage').val(data.page.idBulletinBoardPage);
+                }
+                $('#btnRefresh').trigger('click');
+            } else {
+                Swal.fire('Napaka', data.error, 'error');
+                console.log(data);
+            }
+            $.unblockUI();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            alert(xhr.responseText);
+            $.unblockUI();
+        }
+    });
+}
+
+function rowOpenEditor(el){
+    openEditor(parseInt($(el).parent().parent().attr('data-id')));
+}
+
+function openEditor(id){
+    $.blockUI();
+    $.ajax({
+        type: "GET",
+        url: "/Pages/Index/?handler=Page",
+        data: {
+            id
+        },
+        success: function (data) {
+            if (data.successful){
+                switch (data.page.type){
+                    case 1: //Editor notes
+                        window.location.href = "/Pages/EditMain?idPage=" + data.page.idBulletinBoardPage;
+                        break;
+                    case 2: //Picture
+                        $('#inpModalPageEditorPictureIdPage').val(data.page.idBulletinBoardPage);
+                        $('#imgModalPageEditorPicture').attr("src","/bulletin-board-images/pages/" + data.page.image);
+                        $('#divModalPageEditorPicture').modal('show');
+                        break;
+                    case 3: //Link
+                        $('#inpModalPageEditorLinkIdPage').val(data.page.idBulletinBoardPage);
+                        $('#inpModalPageEditorLinkLink').val(data.page.externalLink);
+                        $('#divModalPageEditorLink').modal('show');
+                        break;
+                }
+            } else {
+                Swal.fire('Napaka', data.error, 'error');
+                console.log(data);
+            }
+            $.unblockUI();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            console.log(xhr);
+            alert(xhr.responseText);
+            $.unblockUI();
+        }
+    });
+}
+
+function saveModalPageEditorLink(){
+    let link = $('#inpModalPageEditorLinkLink').val();
+    let idPage = parseInt($('#inpModalPageEditorLinkIdPage').val());
+
+    $.blockUI();
+    $.ajax({
+        type: "POST",
+        beforeSend: function(xhr) {
+            xhr.setRequestHeader("XSRF-TOKEN",
+                $('input:hidden[name="__RequestVerificationToken"]').val());
+        },
+        url: "/Pages/Index/?handler=BoardPageLink",
+        data: { idPage, link},
+        success: function(data) {
+            if (data.successful){
+                $('#divModalAddEditPage').modal('hide');
+                $('#btnRefresh').trigger('click');
+            } else {
+                Swal.fire('Napaka', data.error, 'error');
+                console.log(data);
+            }
+            $.unblockUI();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            alert(xhr.responseText);
+            $.unblockUI();
+        }
+    });
+}
+
+function saveModalPageEditorPicture(){
+    let idPage = parseInt($('#inpModalPageEditorPictureIdPage').val());
+
+    let files = $('#inpModalPageEditorPicturePicture').prop("files"); 
+	let formData = new FormData();
+	formData.append("file", files[0]);
+	formData.append("idPage", idPage);
+
+    $.blockUI();
+    $.ajax({
+        type: "POST",
+        beforeSend: function(xhr) {
+            xhr.setRequestHeader("XSRF-TOKEN",
+                $('input:hidden[name="__RequestVerificationToken"]').val());
+        },
+        url: "/Pages/Index/?handler=BoardPagePicture",
+        data: formData,
+        cache: false,
+		contentType: false,
+		processData: false,
+        success: function(data) {
+            if (data.successful){
+                $('#divModalPageEditorPicture').modal('hide');
+                $('#btnRefresh').trigger('click');
+            } else {
+                Swal.fire('Napaka', data.error, 'error');
+                console.log(data);
+            }
+            $.unblockUI();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            alert(xhr.responseText);
+            $.unblockUI();
+        }
+    });
+}

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'
+        });
+    }
+}
+