From f4d42071dbbf8bade0f144370238428fe4484b52 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Fri, 23 Oct 2020 14:02:12 +0200 Subject: [PATCH] wip #3962 @3 --- js/libs/fluidbook/fluidbook.cache.js | 31 ++++++- js/libs/fluidbook/fluidbook.notes.js | 131 ++++++++++++++++++++++----- style/fluidbook.less | 2 +- style/notes.less | 8 +- 4 files changed, 140 insertions(+), 32 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.cache.js b/js/libs/fluidbook/fluidbook.cache.js index 22651a41..93e97eae 100644 --- 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 4699b26a..9c0cfbb0 100644 --- 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('
'); + + var name = 'note_' + Math.round(Math.random() * 10000000); + $("#notesHolder").append('
'); + 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('
') + }); 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 c2025f88..579a5645 100644 --- 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 3c6d5b71..c2b0e5a9 100644 --- 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 -- 2.39.5