From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 26 Oct 2020 17:23:37 +0000 (+0100)
Subject: wip #3962 @0:20
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=bb2438bbc6298fdc7fdc39cb5f9529413faf5aed;p=fluidbook-html5.git

wip #3962 @0:20
---

diff --git a/js/libs/fluidbook/fluidbook.cache.js b/js/libs/fluidbook/fluidbook.cache.js
index 93e97eae..c2c472c1 100644
--- a/js/libs/fluidbook/fluidbook.cache.js
+++ b/js/libs/fluidbook/fluidbook.cache.js
@@ -73,6 +73,16 @@ FluidbookCache.prototype = {
             this._cache[key] = value;
         }
     },
+    unset: function (key) {
+        if (this._support) {
+            if (key.indexOf(this._prefix) !== 0) {
+                key = this._prefix + key;
+            }
+            localStorage.removeItem(key);
+        } else {
+            delete this._cache[key];
+        }
+    },
     find: function (search) {
         var $this = this;
         var res = {};
diff --git a/js/libs/fluidbook/fluidbook.notes.js b/js/libs/fluidbook/fluidbook.notes.js
index 9c0cfbb0..3a869a9a 100644
--- a/js/libs/fluidbook/fluidbook.notes.js
+++ b/js/libs/fluidbook/fluidbook.notes.js
@@ -21,6 +21,11 @@ FluidbookNotes.prototype = {
             $this.addNote();
             return false;
         });
+        $(document).on('click', '.note .remove', function () {
+            $this.removeNote($(this).closest('.note'));
+            return false;
+        });
+
         $(document).on('change keyup resize', '.note textarea', function () {
             $this.updateNote($(this).closest('.note').attr('id'));
         });
@@ -49,11 +54,17 @@ FluidbookNotes.prototype = {
     addNote: function () {
 
         var name = 'note_' + Math.round(Math.random() * 10000000);
-        $("#notesHolder").append('<div class="note" id="' + name + '" style="left:' + (0.5 * this.fluidbook.resize.fluidbookrect.width) + 'px;top:' + (0.5 * this.fluidbook.resize.fluidbookrect.height) + 'px;"><a href="#" class="remove"></a><textarea placeholder="' + __('your text') + '" name="' + name + '"></textarea></div>');
+        $("#notesHolder").append('<div class="note" id="' + name + '" style="left:' + (0.5 * this.fluidbook.resize.fluidbookrect.width) + 'px;top:' + (0.5 * this.fluidbook.resize.fluidbookrect.height) + 'px;"><a href="#" class="remove">' + getSpriteIcon('interface-close') + '</a><textarea placeholder="' + __('your text') + '" name="' + name + '"></textarea></div>');
         this.initNotes();
         this.createNote(name);
     },
 
+    removeNote: function (n) {
+        var id = $(n).attr('id');
+        $("#" + id).remove();
+        this._unsetNote(id);
+    },
+
     clearNotes: function () {
         $("#notesHolder .note").each(function () {
             interact('#' + $(this).attr('id')).unset();
@@ -86,7 +97,7 @@ FluidbookNotes.prototype = {
                     v.x++;
                 }
             }
-            $('#notesHolder').append('<div class="note" id="' + k + '" style="left:' + (v.x * w) + 'px;top:' + (v.y * $this.fluidbook.resize.fluidbookrect.height) + 'px;"><a href="#" class="remove"></a><textarea style="width:' + v.w + 'px;px;height:' + v.h + 'px;" placeholder="' + __('your text') + '" name="' + k + '">' + v.c + '</textarea></div>')
+            $('#notesHolder').append('<div class="note" id="' + k + '" style="left:' + (v.x * w) + 'px;top:' + (v.y * $this.fluidbook.resize.fluidbookrect.height) + 'px;"><a href="#" class="remove">' + getSpriteIcon('interface-close') + '</a><textarea style="width:' + v.w + 'px;px;height:' + v.h + 'px;" placeholder="' + __('your text') + '" name="' + k + '">' + v.c + '</textarea></div>')
         });
         this.initNotes();
     },
@@ -121,7 +132,6 @@ FluidbookNotes.prototype = {
                 }
             },
             onmove: function (event) {
-                console.log('//0');
                 $this.moveNote(event);
             },
             onend: function () {
@@ -140,7 +150,6 @@ FluidbookNotes.prototype = {
     },
     moveNote: function (event) {
         var target = event.target;
-        console.log(target, event.dx);
         this.setNotePosition(target, $(target).data('x') + event.dx, $(target).data('y') + event.dy);
     },
     getNotes: function (pageNr) {
@@ -197,5 +206,8 @@ FluidbookNotes.prototype = {
     _getNote: function (id) {
         return this.fluidbook.cache.get(id, this._defaultNote());
     },
+    _unsetNote: function (id) {
+        this.fluidbook.cache.unset(id);
+    }
 
 }
\ No newline at end of file
diff --git a/style/notes.less b/style/notes.less
index c2b0e5a9..f13b6dd4 100644
--- a/style/notes.less
+++ b/style/notes.less
@@ -24,6 +24,15 @@
     cursor: move;
     box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25);
 
+    .remove {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      width: 14px;
+      height: 14px;
+      color:#b5b46c;
+    }
+
     textarea {
       font-family: @font;
       border: 0;
@@ -36,7 +45,7 @@
       max-height: 400px;
       min-width: 100px;
       min-height: 100px;
-      padding:0 15px 15px 0;
+      padding: 0 15px 15px 0;
     }
   }
 }
\ No newline at end of file