From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 26 Oct 2020 19:03:16 +0000 (+0100)
Subject: wip #3962 @1:40
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=023db7378dcc2c33530b3d6774863187e2bf53e4;p=fluidbook-html5.git

wip #3962 @1:40
---

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index c56c52b8..43e99488 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -119,6 +119,9 @@ FluidbookMenu.prototype = {
             this['open' + camelView](param1, param2, cb);
         }
     },
+    openNotes: function (p1, p2, cb) {
+        this.fluidbook.notes.openMenu(cb);
+    },
     openSearch: function (q, cb) {
         this.fluidbook.nav.openSearch(q, cb);
     },
@@ -972,7 +975,7 @@ FluidbookMenu.prototype = {
                 // console.log('%cmaxImgW: '+ maxImageWidth +' | maxImageH: '+ maxImageHeight, lcss+'blueviolet')
 
                 // Process each image to determine dimensions and how big it will be once scaled onto the screen
-                fluidbook.slideshow.$slideshow.find('img').each(function() {
+                fluidbook.slideshow.$slideshow.find('img').each(function () {
                     var meta = $(this).data('meta');
                     var scaledWidth = 0;
                     var scaledHeight = 0;
diff --git a/js/libs/fluidbook/fluidbook.notes.js b/js/libs/fluidbook/fluidbook.notes.js
index 3a869a9a..359988ad 100644
--- a/js/libs/fluidbook/fluidbook.notes.js
+++ b/js/libs/fluidbook/fluidbook.notes.js
@@ -32,37 +32,54 @@ FluidbookNotes.prototype = {
         $(this.fluidbook).on('fluidbook.resize', function () {
             $this.resize();
         });
-        $(this.fluidbook).on('fluidbook.page.change.end', function () {
+        $(this.fluidbook).on('fluidbook.page.change.start', function () {
             $this.clearNotes();
         });
         $(this.fluidbook).on('fluidbook.page.change.end', function () {
             $this.initNotesFromStorage();
         });
+        $(document).on('click', '.notes-toggle', function () {
+            $this.toggleNotes();
+            return false;
+        });
         $('header').append(this.horizontalNav());
         $('body').addClass('notes-no').addClass('notes-unhidden');
+
+        this.updateMenus();
+    },
+
+    unhideNotes: function () {
+        if ($('body').hasClass('notes-hidden')) {
+            this.toggleNotes();
+        }
+    },
+    toggleNotes: function () {
+        $('body').toggleClass('notes-hidden').toggleClass('notes-unhidden');
     },
 
     horizontalNav: function () {
         var res = '<nav class="fixedTooltip" id="notesHorizontalSub">';
         res += '<a href="#" id="notes-add">' + getSpriteIcon('notes-add') + ' ' + this.fluidbook.l10n.__('add a note') + '</a>';
         res += '<a class="having-notes" href="#/notes">' + getSpriteIcon('notes-overview') + ' ' + this.fluidbook.l10n.__('all notes') + '</a>';
-        res += '<a class="having-notes" href="#" class="notes-toggle"><span class="unhide">' + getSpriteIcon('notes-unhide') + ' ' + this.fluidbook.l10n.__('unhide notes') + '</span><span class="hide">' + getSpriteIcon('notes-hide') + ' ' + this.fluidbook.l10n.__('hide notes') + '</span></a>';
+        res += '<a class="having-notes notes-toggle" href="#"><span class="unhide">' + getSpriteIcon('notes-unhide') + ' ' + this.fluidbook.l10n.__('unhide notes') + '</span><span class="hide">' + getSpriteIcon('notes-hide') + ' ' + this.fluidbook.l10n.__('hide notes') + '</span></a>';
         res += '</nav>';
         return res;
     },
 
     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">' + getSpriteIcon('interface-close') + '</a><textarea placeholder="' + __('your text') + '" name="' + name + '"></textarea></div>');
+        $("#notesHolder").append('<div class="note" id="' + name + '" style="left:' + (-120 + (0.5 * this.fluidbook.resize.fluidbookrect.width)) + 'px;top:' + (-120 + (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);
+        this.updateMenus();
+        this.unhideNotes();
     },
 
     removeNote: function (n) {
         var id = $(n).attr('id');
         $("#" + id).remove();
         this._unsetNote(id);
+        this.updateMenus();
     },
 
     clearNotes: function () {
@@ -82,7 +99,7 @@ FluidbookNotes.prototype = {
                 pages.push(this.fluidbook.currentPage + 1);
             }
         }
-        var notes = this.fluidbook.cache.find('note_');
+        var notes = this.getAllNotes();
         var $this = this;
         $.each(notes, function (k, v) {
             if (pages.indexOf(v.p) === -1) {
@@ -102,6 +119,63 @@ FluidbookNotes.prototype = {
         this.initNotes();
     },
 
+    openMenu: function (callback) {
+        this.fluidbook.menu.viewWrap(this.getView(this.fluidbook.l10n.__('all notes')), 'notes');
+
+        if (callback !== undefined) {
+            callback();
+        }
+    },
+
+    getView: function (title) {
+        var c = this.getIndex();
+        if (c === false) {
+            return c;
+        }
+        var index = '<div class="notessub">';
+        index += this.fluidbook.menu.getCaption(title);
+        index += c;
+        index += '</div>';
+        return index;
+    },
+
+    getIndex: function () {
+        var contentClass = 'content';
+        if (this.fluidbook.mobilefirst.enabled) {
+            contentClass += ' noscroll mobilefirst';
+        }
+
+        var $this = this;
+        var index = '<div class="' + contentClass + '"><div class="indexView notesView"><div class="indexViewHolder">';
+
+        $.each(this.getPagesWithNotes(), function (k, page) {
+            index += $this.fluidbook.menu.index.getPage(page, $this.fluidbook.displayOnePage, 300, true, false, $this.fluidbook.mobilefirst.enabled, '');
+        });
+
+        index += '</div></div>';
+        index += '</div>';
+        return index;
+    },
+
+    getPagesWithNotes: function () {
+        var pages = [];
+        var $this = this;
+        $.each(this.getAllNotes(), function (k, note) {
+            if (!$this.fluidbook.displayOnePage) {
+                if (note.p === 0) {
+                    note.p = 1;
+                } else if (note.p % 2 === 1) {
+                    note.p--;
+                }
+            }
+            if (pages.indexOf(note.p) === -1) {
+                pages.push(note.p);
+            }
+        });
+        pages.sort();
+        return pages;
+    },
+
     initNotes: function () {
         var $this = this;
         $("#notesHolder").find('.note').each(function () {
@@ -193,6 +267,29 @@ FluidbookNotes.prototype = {
         }
         this._setNote(id, n);
     },
+
+    updateMenus: function () {
+        var nb = this.getNotesNumber();
+        if (nb === 0) {
+            $('body').addClass('notes-no');
+        } else {
+            $('body').removeClass('notes-no');
+        }
+    },
+
+    getNotesNumber: function () {
+        try {
+            return this.getAllNotes().length;
+        } catch (e) {
+
+        }
+        return 0;
+    },
+
+    getAllNotes: function () {
+        return this.fluidbook.cache.find('note_');
+    },
+
     createNote: function (id) {
         this._setNote(id, this._defaultNote());
         this.updateNote(id);
diff --git a/js/libs/fluidbook/menu/fluidbook.index.js b/js/libs/fluidbook/menu/fluidbook.index.js
index f93194ee..1ca007b7 100644
--- a/js/libs/fluidbook/menu/fluidbook.index.js
+++ b/js/libs/fluidbook/menu/fluidbook.index.js
@@ -105,71 +105,82 @@ FluidbookIndex.prototype = {
         var start = this.singleMode ? 1 : 0;
 
         for (var i = start; i <= this.fluidbook.contentlock.getMaxPage(); i += increment) {
-            var pages = [];
-            j = i + 1;
-            ix1 = '';
-            ix2 = '';
+            res += this.getPage(i, this.singleMode, height, pageLinks, bookmarks, mobileFirst, '');
+        }
+        res += '</nav></div></div>';
+        return res;
+    },
 
-            var dim = this.getThumbDimensions(i, height);
+    getPage: function (page, singleMode, height, links, bookmarks, mobileFirst, additionalContent) {
+        if (additionalContent === undefined) {
+            additionalContent = '';
+        }
+        var pages = [];
+        var j = page + 1;
+        var ix1 = '';
+        var ix2 = '';
+        var ix;
 
-            if (this.singleMode) {
-                c = ' singlemode simple left ';
-                s2 = s1 = 'left';
-            } else {
-                c = '';
-
-                if (this.fluidbook.l10n.dir === 'ltr') {
-                    s1 = 'left';
-                    s2 = 'right'
-                } else {
-                    s1 = 'right';
-                    s2 = 'left'
-                }
-            }
+        var dim = this.getThumbDimensions(page, height);
+        var s1, s2;
 
-            if (i > 0) {
-                ix1 += this._thumb(i, s1, height, undefined, pageLinks);
-                if (this.fluidbook.bookmarks.enabled && bookmarks) {
-                    ix1 += this.fluidbook.bookmarks.getBookmarkForPage(i, mobileFirst, this.fluidbook.settings.bookmarkPermanentIcon);
-                }
-                pages.push(i);
-                ix1 += '</div>';
-            } else {
-                c = ' simple ' + s2;
-            }
+        if (singleMode) {
+            var c = ' singlemode simple left ';
+            s2 = s1 = 'left';
+        } else {
+            c = '';
 
-            if (this.fluidbook.l10n.dir === 'rtl') {
+            if (this.fluidbook.l10n.dir === 'ltr') {
                 s1 = 'left';
                 s2 = 'right'
             } else {
                 s1 = 'right';
                 s2 = 'left'
             }
-            if (!this.singleMode) {
-                if (j <= this.fluidbook.contentlock.getMaxPage()) {
-                    ix2 += this._thumb(j, s1, height, undefined, pageLinks);
-                    if (this.fluidbook.bookmarks.enabled && bookmarks) {
-                        ix2 += this.fluidbook.bookmarks.getBookmarkForPage(j, true);
-                    }
-                    ix2 += '</div>';
-                    pages.push(j);
-                } else {
-                    c = ' simple ' + s2;
-                }
+        }
 
-                if (j === 1) {
-                    pages.unshift(0);
-                }
+        if (page > 0) {
+            ix1 += this._thumb(page, s1, height, undefined, links);
+            if (this.fluidbook.bookmarks.enabled && bookmarks) {
+                ix1 += this.fluidbook.bookmarks.getBookmarkForPage(page, mobileFirst, this.fluidbook.settings.bookmarkPermanentIcon);
+            }
+            pages.push(page);
+            ix1 += '</div>';
+        } else {
+            c = ' simple ' + s2;
+        }
 
-                ix = ix1 + ix2;
+        if (this.fluidbook.l10n.dir === 'rtl') {
+            s1 = 'left';
+            s2 = 'right'
+        } else {
+            s1 = 'right';
+            s2 = 'left'
+        }
+        if (!singleMode) {
+            if (j <= this.fluidbook.contentlock.getMaxPage()) {
+                ix2 += this._thumb(j, s1, height, undefined, links);
+                if (this.fluidbook.bookmarks.enabled && bookmarks) {
+                    ix2 += this.fluidbook.bookmarks.getBookmarkForPage(j, true);
+                }
+                ix2 += '</div>';
+                pages.push(j);
             } else {
-                ix = ix1;
+                c = ' simple ' + s2;
+            }
+
+            if (j === 1) {
+                pages.unshift(0);
             }
 
-            res += '<div class="doubleThumb' + c + '" page="' + i + '" data-pages="' + pages.join(',') + '"' + dim.doublethumb + '>' + ix;
-            res += '</div>';
+            ix = ix1 + ix2;
+        } else {
+            ix = ix1;
         }
-        res += '</nav></div></div>';
+
+        var res = '<div class="doubleThumb' + c + '" page="' + page + '" data-pages="' + pages.join(',') + '"' + dim.doublethumb + '>' + ix;
+        res += additionalContent;
+        res += '</div>';
         return res;
     },
 
diff --git a/style/notes.less b/style/notes.less
index f13b6dd4..b962283c 100644
--- a/style/notes.less
+++ b/style/notes.less
@@ -10,6 +10,10 @@
   display: none;
 }
 
+.notes-hidden #notesHolder {
+  display: none;
+}
+
 #notesHolder {
   position: absolute;
   top: 0;
@@ -30,7 +34,7 @@
       right: 5px;
       width: 14px;
       height: 14px;
-      color:#b5b46c;
+      color: #b5b46c;
     }
 
     textarea {