From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 21 Oct 2020 06:33:18 +0000 (+0200)
Subject: wip #3962 @5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=b583c9a34adda8b2d2d3960fbd3e0aefdfa0d891;p=fluidbook-html5.git

wip #3962 @5
---

diff --git a/images/interface.svg b/images/interface.svg
index 45abeb79..3523ab3f 100644
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -118,6 +118,49 @@
         <polygon
                 points="33.5,23.5 26.5,23.5 26.5,16.5 23.5,16.5 23.5,23.5 16.5,23.5 16.5,26.5 23.5,26.5 23.5,33.5 26.5,33.5 26.5,26.5 33.5,26.5 "/>
     </symbol>
+    <symbol id="notes-hide" viewBox="0 0 25 25">
+        <path d="M12.5,18c-3.7,0-7.1-1.8-9.2-4.8c-0.2-0.2-0.2-0.6,0-0.8c2.1-3,5.6-4.8,9.2-4.8s7.1,1.8,9.2,4.8
+	c0.2,0.2,0.2,0.6,0,0.8C19.6,16.2,16.2,18,12.5,18z M4.7,12.7c1.9,2.4,4.8,3.8,7.8,3.8s5.9-1.4,7.8-3.8C18.4,10.4,15.5,9,12.5,9
+	S6.6,10.4,4.7,12.7z"/>
+        <path d="M6.7,19c-0.2,0-0.4-0.1-0.5-0.2c-0.3-0.3-0.3-0.7,0-1L17.9,6.2c0.3-0.3,0.7-0.3,1,0c0.3,0.3,0.3,0.7,0,1
+	L7.2,18.8C7,19,6.9,19,6.7,19z"/>
+    </symbol>
+    <symbol id="notes-add" viewBox="0 0 25 25">
+        <path d="M12.5,24.2C6,24.2,0.8,19,0.8,12.5S6,0.8,12.5,0.8S24.2,6,24.2,12.5S19,24.2,12.5,24.2z M12.5,2.2
+	C6.8,2.2,2.2,6.8,2.2,12.5s4.6,10.3,10.3,10.3s10.3-4.6,10.3-10.3S18.2,2.2,12.5,2.2z"/>
+        <path d="M12.5,17.6c-0.4,0-0.7-0.3-0.7-0.7V8.1c0-0.4,0.3-0.7,0.7-0.7s0.7,0.3,0.7,0.7v8.8
+	C13.2,17.3,12.9,17.6,12.5,17.6z"/>
+        <path d="M16.9,13.2H8.1c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h8.8c0.4,0,0.7,0.3,0.7,0.7S17.3,13.2,16.9,13.2z"/>
+    </symbol>
+    <symbol id="notes-overview" viewBox="0 0 25 25">
+        <path d="M10.3,11.1H2.4c-0.5,0-0.9-0.4-0.9-0.9V2.4c0-0.5,0.4-0.9,0.9-0.9h7.9c0.5,0,0.9,0.4,0.9,0.9v7.7
+	C11.3,10.7,10.8,11.1,10.3,11.1z M3.4,9.2h6V3.4h-6V9.2z"/>
+        <path d="M22.6,11.1h-7.9c-0.5,0-0.9-0.4-0.9-0.9V2.4c0-0.5,0.4-0.9,0.9-0.9h7.9c0.5,0,0.9,0.4,0.9,0.9v7.7
+	C23.5,10.7,23.1,11.1,22.6,11.1z M15.6,9.2h6V3.4h-6V9.2z"/>
+        <path d="M10.3,23.5H2.4c-0.5,0-0.9-0.4-0.9-0.9v-7.7c0-0.5,0.4-0.9,0.9-0.9h7.9c0.5,0,0.9,0.4,0.9,0.9v7.7
+	C11.3,23.1,10.8,23.5,10.3,23.5z M3.4,21.6h6v-5.9h-6V21.6z"/>
+        <path d="M22.6,23.5h-7.9c-0.5,0-0.9-0.4-0.9-0.9v-7.7c0-0.5,0.4-0.9,0.9-0.9h7.9c0.5,0,0.9,0.4,0.9,0.9v7.7
+	C23.5,23.1,23.1,23.5,22.6,23.5z M15.6,21.6h6v-5.9h-6V21.6z"/>
+    </symbol>
+    <symbol id="notes-handler" viewBox="0 0 11 11">
+        <circle cx="10.1" cy="0.9" r="0.9"/>
+        <circle cx="0.9" cy="10.1" r="0.9"/>
+        <circle cx="4" cy="10.1" r="0.9"/>
+        <circle cx="4" cy="7" r="0.9"/>
+        <circle cx="7" cy="10.1" r="0.9"/>
+        <circle cx="7" cy="7" r="0.9"/>
+        <circle cx="7" cy="4" r="0.9"/>
+        <circle cx="10.1" cy="10.1" r="0.9"/>
+        <circle cx="10.1" cy="7" r="0.9"/>
+        <circle cx="10.1" cy="4" r="0.9"/>
+    </symbol>
+    <symbol id="notes-unhide" viewBox="0 0 25 25">
+        <path d="M12.5,18.6c-4.3,0-8.4-2.1-10.8-5.6c-0.2-0.3-0.2-0.7,0-1c2.5-3.5,6.5-5.6,10.8-5.6s8.4,2.1,10.8,5.6
+	c0.2,0.3,0.2,0.7,0,1C20.9,16.5,16.8,18.6,12.5,18.6z M3.4,12.5c2.2,2.8,5.6,4.5,9.1,4.5s6.9-1.7,9.1-4.5C19.4,9.7,16.1,8,12.5,8
+	S5.6,9.7,3.4,12.5z"/>
+        <path d="M12.5,16.2c-2,0-3.7-1.6-3.7-3.7s1.6-3.7,3.7-3.7s3.7,1.6,3.7,3.7S14.5,16.2,12.5,16.2z M12.5,10.3
+	c-1.2,0-2.2,1-2.2,2.2s1,2.2,2.2,2.2s2.2-1,2.2-2.2S13.7,10.3,12.5,10.3z"/>
+    </symbol>
     <symbol id="bookmark-corner" viewBox="0 0 50 50">
         <path fill="currentColor" stroke="currentColor" d="M20.4,29.512c-0.213,0.21-0.488,0.356-0.799,0.407c-0.629,0.102-1.251-0.213-1.542-0.779l-3.212-6.252
 	l-7.155,1.092c-0.629,0.096-1.249-0.225-1.535-0.793s-0.174-1.256,0.277-1.704l5.094-5.055l-3.17-6.178
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 47f2d95a..1a190567 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -43,6 +43,7 @@ Fluidbook.prototype = {
         this.singleMode = (this.settings.mobileNavigationType === 'portrait' || this.settings.mobileNavigationType === 'mobilefirst');
 
         this.junk = this.settings.cacheDate;
+        this.l10n = new FluidbookL10N(this, $_GET['lang']);
         this.networkControl = new FluidbookNetworkControl(this);
         this.input = new FluidbookInput(this);
         this.keyboard = new FluidbookKeyboard(this);
@@ -53,7 +54,6 @@ Fluidbook.prototype = {
         this.contentlock = new FluidbookContentLock(this);
         this.menu = new FluidbookMenu(this);
         this.support = new FluidbookSupport(this);
-        this.l10n = new FluidbookL10N(this, $_GET['lang']);
         this.search = new FluidbookSearch(this);
         this.mobilefirst = new FluidbookMobileFirst(this);
         if (!this.mobilefirst.enabled) {
@@ -85,6 +85,7 @@ Fluidbook.prototype = {
         this.slideshow = new FluidbookSlideshow(this);
         this.printing = new FluidbookPrint(this);
         this.posad = new FluidbookPOSAd(this);
+        this.notes = new FluidbookNotes(this);
 
         if (this.settings.basket) {
             this.cart = new FluidbookCart(this);
diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 0d73fc85..ad18edbd 100644
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -175,7 +175,7 @@ FluidbookNav.prototype = {
 
 
         // Make sure that the link gets a unique ID when it is used in both menus
-        var elementID = (navType === undefined || navType === null || navType === '' || navType==='interface') ? id : navType + '_' + id;
+        var elementID = (navType === undefined || navType === null || navType === '' || navType === 'interface') ? id : navType + '_' + id;
 
         res += ' id="' + elementID + '"';
 
@@ -268,6 +268,7 @@ FluidbookNav.prototype = {
          * __('switch on / switch off the sound')
          * __('switch off the sound')
          * __('switch on the sound')
+         * __('notes')
          */
         var $this = this,
             navOrder = this.fluidbook.settings.navOrder; // Default desktop order, maybe be overridden later
@@ -326,6 +327,7 @@ FluidbookNav.prototype = {
             "friend",
             "print",
             "pdf",
+            'notes',
             "bookmark",
             "archives",
             "basket",
@@ -492,12 +494,14 @@ FluidbookNav.prototype = {
                 link = this.addLink(navType, 'nav-sound-on', '#', 'sound-on', 'switch off the sound', 'switch on / switch off the sound', 'F10');
                 link2 = this.addLink(navType, 'nav-sound-off', '#', 'sound-off', 'switch on the sound', 'switch on / switch off the sound', 'F10');
             } else if (icon === 'search') {
-
                 // Only the horizontal icon menu has the search icon, which opens the main menu
                 if (this.fluidbook.settings.search && navType === 'horizontalNav') {
                     link = this.addLink(navType, 'nav-search', '#', 'searchIcon', 'search', 'search', 'Control+F');
                 }
-
+            } else if (icon === 'notes') {
+                if (this.fluidbook.notes.enabled) {
+                    link = this.addLink(navType, 'nav-notes', '#', 'notes', 'notes', 'notes', 'Control+Alt+N');
+                }
             } else if (icon === 'extra') {
 
                 var id = 'extra',
diff --git a/js/libs/fluidbook/fluidbook.notes.js b/js/libs/fluidbook/fluidbook.notes.js
new file mode 100644
index 00000000..41230e06
--- /dev/null
+++ b/js/libs/fluidbook/fluidbook.notes.js
@@ -0,0 +1,32 @@
+function FluidbookNotes(fluidbook) {
+    this.fluidbook = fluidbook;
+    this.enabled = !!this.fluidbook.settings.notes;
+    if (this.enabled) {
+        this.init();
+    }
+}
+
+FluidbookNotes.prototype = {
+    init: function () {
+        var $this = this;
+        $(document).on('click', '#horizontalNav_notes', function (event) {
+            event.preventDefault()
+            var rect = $(this).get(0).getBoundingClientRect();
+            $this.fluidbook.tooltip.showFixedTooltip($("#notesHorizontalSub"),'w','n',{
+                top: rect.y + rect.height + 20,
+                left: -30 + rect.x + (rect.width / 2)
+            })
+        });
+        $('header').append(this.horizontalNav());
+        $('body').addClass('notes-no').addClass('notes-unhidden');
+    },
+
+    horizontalNav: function () {
+        var res = '<nav class="fixedTooltip" id="notesHorizontalSub">';
+        res += '<a href="#">' + 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 += '</nav>';
+        return res;
+    },
+}
\ No newline at end of file
diff --git a/js/libs/fluidbook/fluidbook.tooltip.js b/js/libs/fluidbook/fluidbook.tooltip.js
index fa11d30a..70c27e22 100644
--- a/js/libs/fluidbook/fluidbook.tooltip.js
+++ b/js/libs/fluidbook/fluidbook.tooltip.js
@@ -44,6 +44,7 @@ FluidbookTooltip.prototype = {
         $("body").append('<div id="tooltip" role="tooltip"></div>');
     },
 
+
     updateMousePosition: function (e) {
         this.mouseX = e.pageX;
         this.mouseY = e.pageY;
@@ -133,6 +134,9 @@ FluidbookTooltip.prototype = {
     },
 
     displayTooltip: function (text, style) {
+        if ($('.fixedTooltip:visible').length > 0) {
+            return;
+        }
         var t = $("#tooltip");
         if (style == undefined) {
             style = '';
@@ -162,5 +166,12 @@ FluidbookTooltip.prototype = {
     },
     hideTooltip: function () {
         $("#tooltip").hide().text('');
-    }
+    },
+    showFixedTooltip: function (e, posX, posY, css) {
+        this.hideTooltip();
+        $(e).attr('data-pos-x', posX).attr('data-pos-y', posY).css(css).show();
+        $(document).one('click', '*', function () {
+            $(e).hide();
+        });
+    },
 }
\ No newline at end of file
diff --git a/style/fluidbook.less b/style/fluidbook.less
index eb317220..c2025f88 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -2959,3 +2959,4 @@ body > input {
 @import "menu-articles.less";
 @import "nointerface.less";
 @import "posad.less";
+@import "notes.less";
diff --git a/style/notes.less b/style/notes.less
new file mode 100644
index 00000000..25fed76b
--- /dev/null
+++ b/style/notes.less
@@ -0,0 +1,11 @@
+.notes-no .having-notes {
+  display: none;
+}
+
+.notes-unhidden .unhide {
+  display: none;
+}
+
+.notes-hidden .hide {
+  display: none;
+}
\ No newline at end of file
diff --git a/style/tooltip.less b/style/tooltip.less
index 5627ba6a..e8a9cc4b 100644
--- a/style/tooltip.less
+++ b/style/tooltip.less
@@ -1,7 +1,6 @@
-
 /* Tooltip */
 
-#tooltip {
+#tooltip, .fixedTooltip {
   @tooltip-arrows-size: 10px;
 
   position: absolute;
@@ -95,4 +94,22 @@
       right: 16px;
     }
   }
+}
+
+.fixedTooltip {
+  pointer-events: all;
+  a {
+    position: relative;
+    top:-3px;
+    margin-right: 25px;
+    display: inline-block;
+    text-transform: uppercase;
+    svg {
+      height: 19px;
+      width: auto;
+      position: relative;
+      top: 5px;
+      margin-right: 4px;
+    }
+  }
 }
\ No newline at end of file