123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150 |
- const editMode = window.location.hash == "#edit";
- console.log(editMode);
- class Note {
- constructor(id, text, x, y, width, height, deleted) {
- this.id = id;
- this.text = text;
- this.x = x;
- this.y = y;
- this.width = width;
- this.height = height;
- this.deleted = deleted;
- // some UI state, too
- this.editable = false;
- this.deleteConfirm = false;
- }
- draw() {
- if (this.deleted) {
- return;
- }
- const id = `n_${this.id}`;
- const note = $(`<div class="note" id="${id}"></div>`);
- const text = $(`<div class="text">${this.text}</div>`);
- const tools = $("<div class=\"tools\"></div>");
- const edit = $("<a class=\"edit\">edit</a>");
- const del = $("<a class=\"delete\">delete</a>");
- const confirm = $("<a class=\"confirm\">do it</a>");
- edit.on("click", event => {
- if (this.editable) {
- this.text = text.text();
- this.save();
- text.attr("contentEditable", false);
- edit.text("edit");
- } else {
- text.attr("contentEditable", true);
- edit.text("save");
- }
- this.editable = !this.editable;
- });
- tools.append(edit);
- del.on("click", event => {
- if (this.deleteConfirm) {
- del.text("delete");
- confirm.css({'display': 'none'});
- } else {
- del.text("nevermind");
- confirm.css({'display': 'inline'});
- }
- this.deleteConfirm = !this.deleteConfirm;
- });
- tools.append(del);
- confirm.css({'display': 'none'});
- confirm.on("click", event => {
- this.deleted = true;
- note.css({'display': 'none'});
- this.save();
- });
- tools.append(confirm);
- if (!editMode) {
- tools.css({'display': 'none'});
- }
- note.append(text);
- note.append(tools);
- $("#board").append(note);
- note.css({
- 'position': 'absolute',
- 'left': this.x,
- 'top': this.y,
- 'width': this.width,
- 'height': this.height,
- });
- if (editMode) {
- note.draggable();
- note.on("dragstop", (event, ui) => {
- this.y = ui.offset.top;
- this.x = ui.offset.left;
- this.save();
- });
- note.resizable();
- note.on("resizestop", (event, ui) => {
- this.width = ui.size.width;
- this.height = ui.size.height;
- this.save();
- });
- }
- }
- save() {
- fetch("/note", {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: this.json,
- }).then(response => console.log(`Saved note ${this.id}: ${this.json}`));
- }
- static allNotes = [];
- get json() {
- return JSON.stringify({
- "id": this.id,
- "text": this.text,
- "x": this.x,
- "y": this.y,
- "width": this.width,
- "height": this.height,
- "deleted": this.deleted,
- });
- }
- static make(id, text, x, y, width, height, deleted) {
- const n = new Note(id, text, x, y, width, height, deleted);
- n.draw();
- this.allNotes.push(n);
- return n;
- }
- static new() {
- const new_id = this.allNotes.length;
- const n = this.make(new_id, "new note!", 100.0, 100.0, 220.0, 220.0, false);
- n.save();
- }
- }
- $(document).ready(() => {
- const add = $("#add");
- add.on("click", event => {
- Note.new();
- });
- if (!editMode) {
- add.css({'display': 'none'});
- }
- fetch('/note')
- .then(response => response.json())
- .then(data => data.forEach(d => {
- Note.make(d["id"], d["text"], d["x"], d["y"], d["width"] || 220.0, d["height"] || 220.0, d["deleted"] == true);
- }));
- });
|