wip #3962 @3

diff --git a/js/libs/fluidbook/fluidbook.cache.js b/js/libs/fluidbook/fluidbook.cache.js
index 22651a415a073df8b91bae37248bf638b751854d..93e97eaef6c8a32498cdff401015b228957b7fb7 100644 (file)
--- a/js/libs/fluidbook/fluidbook.cache.js
+++ b/js/libs/fluidbook/fluidbook.cache.js
@@ -29,7 +29,10 @@ FluidbookCache.prototype = {
     },
     isset: function (key) {
         if (this._support) {
-            var res = localStorage.getItem(this._prefix + key) != null;
+            if (key.indexOf(this._prefix) !== 0) {
+                key = this._prefix + key;
+            }
+            var res = localStorage.getItem(key) != null;
             return res;
         } else {
             return this._cache[key] != null;
@@ -41,7 +44,10 @@ FluidbookCache.prototype = {
         }
         var res;
         if (this._support) {
-            res = localStorage.getItem(this._prefix + key);
+            if (key.indexOf(this._prefix) !== 0) {
+                key = this._prefix + key;
+            }
+            res = localStorage.getItem(key);
         } else {
             res = this._cache[key];
         }
@@ -49,7 +55,7 @@ FluidbookCache.prototype = {
             return defaultValue;
         }
         var f = res.substr(0, 1);
-        if (f == '[' || f == '{') {
+        if (f === '[' || f === '{') {
             res = json_parse(res);
         }
         return res;
@@ -59,11 +65,28 @@ FluidbookCache.prototype = {
             value = JSON.stringify(value);
         }
         if (this._support) {
-            localStorage.setItem(this._prefix + key, value);
+            if (key.indexOf(this._prefix) !== 0) {
+                key = this._prefix + key;
+            }
+            localStorage.setItem(key, value);
         } else {
             this._cache[key] = value;
         }
     },
+    find: function (search) {
+        var $this = this;
+        var res = {};
+        var it = this._support ? localStorage : this._cache;
+        if (this._support) {
+            search = this._prefix + search;
+        }
+        $.each(it, function (k, v) {
+            if (k.indexOf(search) === 0) {
+                res[k.replace($this._prefix, '')] = ($this.get(k));
+            }
+        });
+        return res;
+    },
     checkValidity: function () {
         if (!this.isset('validity') || this.get('validity') != this._date) {
             //this.clear();

diff --git a/js/libs/fluidbook/fluidbook.notes.js b/js/libs/fluidbook/fluidbook.notes.js
index 4699b26a030cced875aed66a1d0b296931f8f0d7..9c0cfbb043f03b6ad53b588eae8743c3f7cfdd07 100644 (file)
--- a/js/libs/fluidbook/fluidbook.notes.js
+++ b/js/libs/fluidbook/fluidbook.notes.js
@@ -21,9 +21,18 @@ FluidbookNotes.prototype = {
             $this.addNote();
             return false;
         });
+        $(document).on('change keyup resize', '.note textarea', function () {
+            $this.updateNote($(this).closest('.note').attr('id'));
+        });
         $(this.fluidbook).on('fluidbook.resize', function () {
             $this.resize();
         });
+        $(this.fluidbook).on('fluidbook.page.change.end', function () {
+            $this.clearNotes();
+        });
+        $(this.fluidbook).on('fluidbook.page.change.end', function () {
+            $this.initNotesFromStorage();
+        });
         $('header').append(this.horizontalNav());
         $('body').addClass('notes-no').addClass('notes-unhidden');
     },
@@ -38,33 +47,81 @@ FluidbookNotes.prototype = {
     },
 
     addNote: function () {
-        var name = 'note_' + Math.round(Math.random() * 100000);
-        $("#notesHolder").append('<div class="note" id="' + name + '"><a href="#" class="remove"></a><textarea placeholder="' + __('your text') + '" name="' + name + '"></textarea></div>');
+
+        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>');
+        this.initNotes();
+        this.createNote(name);
+    },
+
+    clearNotes: function () {
+        $("#notesHolder .note").each(function () {
+            interact('#' + $(this).attr('id')).unset();
+        });
+        $('#notesHolder').html('');
+    },
+
+    initNotesFromStorage: function () {
+        this.clearNotes();
+        var pages = [this.fluidbook.currentPage];
+        if (!this.fluidbook.displayOnePage) {
+            if (this.currentPage === 1) {
+                pages.unshift(0);
+            } else {
+                pages.push(this.fluidbook.currentPage + 1);
+            }
+        }
+        var notes = this.fluidbook.cache.find('note_');
+        var $this = this;
+        $.each(notes, function (k, v) {
+            if (pages.indexOf(v.p) === -1) {
+                return;
+            }
+            v.y = Math.max(0, Math.min(1, v.y));
+            v.x = Math.max(0, Math.min(1, v.x));
+            var w = $this.fluidbook.resize.fluidbookrect.width;
+            if (!$this.fluidbook.displayOnePage) {
+                w /= 2;
+                if (v.p % 2 === 1) {
+                    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>')
+        });
         this.initNotes();
     },
 
     initNotes: function () {
         var $this = this;
         $("#notesHolder").find('.note').each(function () {
-            $this.initNote($(this),
-                -120 + $this.dragRestrict.restriction.x + $this.dragRestrict.restriction.width / 2,
-                -120 + $this.dragRestrict.restriction.y + $this.dragRestrict.restriction.height / 2);
+            $this.initNote($(this));
         });
     },
 
-    initNote: function (note, x, y) {
-        this.setNotePosition(note, x, y);
+    initNote: function (note) {
+        if ($(note).data('inited') === true) {
+            return;
+        }
+        $(note).data('inited', true);
+        this.setNotePosition(note, parseFloat($(note).css('left')), parseFloat($(note).css('top')));
         var $this = this;
         var options = {
-            autoScroll: false,
             inertia: true,
-            restrict: this.dragRestriction,
+            modifiers: [
+                interact.modifiers.restrict({
+                    restriction: 'parent',
+                    elementRect: {top: 0, left: 0, right: 1, bottom: 1},
+                    endOnly: true
+                })
+            ],
+            ignoreFrom: 'textarea',
             onstart: function () {
                 if (Modernizr.ftouch) {
                     $this.fluidbook.touch.externalgesture = true;
                 }
             },
             onmove: function (event) {
+                console.log('//0');
                 $this.moveNote(event);
             },
             onend: function () {
@@ -73,6 +130,7 @@ FluidbookNotes.prototype = {
                         $this.fluidbook.touch.externalgesture = false;
                     }, 200);
                 }
+                $this.updateNote($(note).attr('id'));
             },
         };
         interact("#" + $(note).attr('id')).draggable(options);
@@ -82,15 +140,14 @@ 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) {
         if (!this.enabled) {
             return '';
         }
     },
-
     resize: function () {
         var maxx = this.fluidbook.resize.fluidbookrect.width;
         var maxy = this.fluidbook.resize.fluidbookrect.height;
@@ -99,20 +156,46 @@ FluidbookNotes.prototype = {
 
         this.dragRestrict = {
             restriction: {x: minx, y: miny, width: maxx, height: maxy},
-            endOnly: true,
-            elementRect: {top: 0, left: 0, right: 1, bottom: 1}
         };
 
-        var $this = this;
-
-        $("#notesHolder .note").each(function () {
-            var wmaxx = $this.dragRestrict.restriction.x + $this.dragRestrict.restriction.width - $(this).outerWidth();
-            var wmaxy = $this.dragRestrict.restriction.y + $this.dragRestrict.restriction.height - $(this).outerHeight();
-            var x = Math.max($this.dragRestrict.restriction.x, Math.min($(this).data('x'), wmaxx));
-            var y = Math.max($this.dragRestrict.restriction.y, Math.min($(this).data('y'), wmaxy));
+        $("#notesHolder").css({
+            top: this.fluidbook.resize.fluidbookrect.y,
+            left: this.fluidbook.resize.fluidbookrect.x,
+            width: this.fluidbook.resize.fluidbookrect.width,
+            height: this.fluidbook.resize.fluidbookrect.height
+        })
+    },
+    updateNote: function (id) {
+        var n = this._getNote(id);
+        var e = $("#" + id);
+        var t = $(e).find('textarea');
+        n.c = $(t).val();
+        n.w = $(t).outerWidth();
+        n.h = $(t).outerHeight();
+        n.x = parseFloat($(e).css('left')) / this.fluidbook.resize.fluidbookrect.width;
+        n.y = parseFloat($(e).css('top')) / this.fluidbook.resize.fluidbookrect.height;
+        n.p = this.fluidbook.currentPage;
+        if (!this.fluidbook.displayOnePage) {
+            n.x *= 2;
+            if (n.x >= 1) {
+                n.x--;
+                n.p++;
+            }
+        }
+        this._setNote(id, n);
+    },
+    createNote: function (id) {
+        this._setNote(id, this._defaultNote());
+        this.updateNote(id);
+    },
+    _defaultNote: function () {
+        return {x: 0, y: 0, w: 0, h: 0, p: -1, c: ''};
+    },
+    _setNote: function (id, val) {
+        this.fluidbook.cache.set(id, val);
+    },
+    _getNote: function (id) {
+        return this.fluidbook.cache.get(id, this._defaultNote());
+    },
 
-            $(this).css({left: x, top: y}).data({x: x, y: y});
-            interact("#" + $(this).attr('id')).setOptions('restrict', $this.dragRestrict);
-        });
-    }
 }
\ No newline at end of file

diff --git a/style/fluidbook.less b/style/fluidbook.less
index c2025f88dc87fc3df821605a39adec09a078be7d..579a56452096eb6ea8ea7f32d5eb4d6ed98fc787 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -774,7 +774,7 @@ body, html {
 /* Header */
 header {
   position: relative;
-  z-index: 12;
+  z-index: 13;
 
   // Header should sit above help overlay when it is open
   .help & {

diff --git a/style/notes.less b/style/notes.less
index 3c6d5b715a1ea04f92fa88e4352383416804f553..c2b0e5a9b48ef108391d1ef6d7ff1008e677f1f0 100644 (file)
--- a/style/notes.less
+++ b/style/notes.less
@@ -14,12 +14,12 @@
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 19;
+  z-index: 12;
 
   .note {
     position: absolute;
     display: block;
-    padding: 15px 0 0 0;
+    padding: 30px 0 0 15px;
     background-color: #fffe96;
     cursor: move;
     box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25);
@@ -34,7 +34,9 @@
       height: 200px;
       max-width: 400px;
       max-height: 400px;
-      padding:15px;
+      min-width: 100px;
+      min-height: 100px;
+      padding:0 15px 15px 0;
     }
   }
 }
\ No newline at end of file