Drugi

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

@@ -0,0 +1,91 @@
+$(function () {
+    loadBoard();
+    loadNotes();
+});
+
+
+const ratio = '16:9'
+let divCanvas;
+let canWidth;
+let canHeight;
+let notes = [];
+
+function loadBoard(){
+    let placeholder = $('#divPlaceholder');
+    placeholder.empty();
+
+    let tmpSplit = ratio.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'
+    });
+}
+
+function loadNotes(){
+    let note = new Note(1, divCanvas, 200, 0, 400, 240, '<h3>Naslov</h3><hr/><p>Test</p>' );
+
+    notes.push(note);
+
+    let note2 = new Note(2, divCanvas, 0, 0, 400, 240);
+    notes.push(note2);
+
+    notes.forEach(note => {
+        note.refresh();
+    });
+}
+
+function openModalEditNote(id){
+    $('#inpModalEditNoteIdNote').val(id);
+    note = getNote(id);
+
+    $('#divModalEditNote').modal('show');
+    $('#divModalEditNoteSummernote').summernote('destroy');
+    $('#divModalEditNoteSummernote').html(note.content);
+    $('#divModalEditNoteSummernote').summernote({});
+}
+
+function saveModalEditNote(){
+    let idNote = parseInt($('#inpModalEditNoteIdNote').val());
+    note = getNote(idNote);
+    note.content = $('#divModalEditNoteSummernote').summernote('code');
+    note.refresh();
+    $('#divModalEditNote').modal('hide');
+}
+
+function getNote(id){
+    let note;
+    notes.forEach(e => {
+        if (e.id === id){
+            note = e;
+        }
+    });
+    return note;
+}
+
+function svgTest(){
+    var node = document.getElementById('divCanvas');
+
+    htmlToImage.toSvg(node)
+    .then(function (dataUrl) {
+        var link = document.createElement('a');
+        link.href = dataUrl;
+        link.download = 'Download.jpg';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        return;
+        var img = new Image();
+        img.src = dataUrl;
+        document.body.appendChild(img);
+    })
+    .catch(function (error) {
+        console.error('oops, something went wrong!', error);
+    });
+}
+

ZpcBulletinBoard/wwwroot/js/editor/note.js

@@ -0,0 +1,60 @@
+class Note{
+    constructor(id, divCanvas, x, y, width, height, content) {
+        this.id = id;
+        this.divCanvas = divCanvas;
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.element = null;
+        this.content = content;
+    }
+
+    refresh(){
+        if (this.element !== null){
+            this.element.remove();
+        }
+
+        this.element =  $(`
+<div class="card div-note" data-id="${this.id}">
+  <div class="card-body">
+    ${this.content}
+  </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;
+                console.log(ui.position);
+            }
+        });
+        this.element.resizable({
+            handles: 'se',
+            autoHide: true,
+            minHeight: 240,
+            minWidth: 300,
+        });
+        this.element.css({
+            'width': this.width + 'px',
+            'height': this.height + 'px',
+            'position': 'relative'
+        });
+        this.element.on( "dblclick", function() {
+            openModalEditNote(parseInt($(this).attr('data-id')));    
+        });
+        
+        this.divCanvas.append(this.element);
+        this.setPosition();
+    }
+
+    setPosition(){
+        this.element.css({
+            'left': this.x + 'px',
+            'top': this.y + 'px'
+        });
+    }
+}
+