From 14809d9e697eea5046f8f27142301667d80762e1 Mon Sep 17 00:00:00 2001
From: danielweck <daniel.weck@gmail.com>
Date: Wed, 20 Jan 2016 22:10:54 +0000
Subject: [PATCH] UI for popup footnotes, including settings / preferences

---
 src/i18n/_locales/en_US/messages.json | 17 ++++++++++++++++
 src/js/Dialogs.js                     | 13 ++++++++++++
 src/js/EpubReader.js                  |  9 ++++++++-
 src/js/ReaderSettingsDialog.js        | 29 +++++++++++++++++++++++++--
 src/templates/settings-dialog.html    | 20 ++++++++++++++++++
 5 files changed, 85 insertions(+), 3 deletions(-)

diff --git a/src/i18n/_locales/en_US/messages.json b/src/i18n/_locales/en_US/messages.json
index aff1525e7..5b480be05 100644
--- a/src/i18n/_locales/en_US/messages.json
+++ b/src/i18n/_locales/en_US/messages.json
@@ -425,6 +425,23 @@
   "i18n_page_navigation" : {
     "message" : "Page Navigation"
   },
+  
+  "i18n_EPUBPopupFootNotes" : {
+    "message" : "EPUB FOOTNOTES"
+  },
+  "i18n_EPUBPopupFootNote" : {
+    "message" : "Footnote"
+  },
+  "i18n_EPUBPopupFootNotes_reload" : {
+    "message" : "Please reload the page to refresh EPUB popup footnotes."
+  },
+  "i18n_EPUBPopupFootNotes_ON" : {
+    "message" : "Popup display"
+  },
+  "i18n_EPUBPopupFootNotes_OFF" : {
+    "message" : "Original links"
+  },
+  
   "chrome_accept_languages": {
     "message": "$CHROME$ accepts $languages$ languages",
     "placeholders": {
diff --git a/src/js/Dialogs.js b/src/js/Dialogs.js
index a2e1eba9f..72c8261a0 100644
--- a/src/js/Dialogs.js
+++ b/src/js/Dialogs.js
@@ -81,6 +81,19 @@ define(['hgn!readium_js_viewer_html_templates/managed-dialog.html', 'hgn!readium
 
             showModalDialog(true, title, body, buttons);
         },
+        showModalHTML : function(title, html){
+            var body = $(html),
+                buttons = ButtonTemplate({
+                    buttons : [
+                        {
+                            dismiss : true,
+                            text : Strings.ok
+                        }
+                    ]
+                });
+
+            showModalDialog(true, title, body, buttons);
+        },
         showModalPromptEx : function(title, message, buttons, handlers){
 
             var body = $('<p></p>').text(message);
diff --git a/src/js/EpubReader.js b/src/js/EpubReader.js
index 1bfb03d74..783b278e9 100644
--- a/src/js/EpubReader.js
+++ b/src/js/EpubReader.js
@@ -286,6 +286,13 @@ Helpers){
         var lastIframe = undefined,
             wasFixed;
 
+        readium.reader.on(ReadiumSDK.Events.EPUB_POPUP_FOOTNOTE, function(targetID, htmlFragment) {
+            Globals.logEvent("EPUB_POPUP_FOOTNOTE", "ON", "EpubReader.js");
+            //console.log(targetID);
+            //console.log(htmlFragment);
+            Dialogs.showModalHTML(Strings.i18n_EPUBPopupFootNote, htmlFragment);
+        });
+        
         readium.reader.on(ReadiumSDK.Events.FXL_VIEW_RESIZED, function() {
             Globals.logEvent("FXL_VIEW_RESIZED", "ON", "EpubReader.js");
             setScaleDisplay();
@@ -573,7 +580,7 @@ Helpers){
     };
 
     var installReaderEventHandlers = function(){
-
+        
         // Set handlers for click events
         $(".icon-annotations").on("click", function () {
             readium.reader.plugins.highlights.addSelectionHighlight(Math.floor((Math.random()*1000000)), "test-highlight");
diff --git a/src/js/ReaderSettingsDialog.js b/src/js/ReaderSettingsDialog.js
index c65cc480b..c12225918 100644
--- a/src/js/ReaderSettingsDialog.js
+++ b/src/js/ReaderSettingsDialog.js
@@ -4,7 +4,8 @@ define(['./ModuleConfig', 'hgn!readium_js_viewer_html_templates/settings-dialog.
         fontSize: 100,
         syntheticSpread: "auto",
         scroll: "auto",
-        columnGap: 60
+        columnGap: 60,
+        epubPopupFootnotes: true
     }
 
     var getBookStyles = function(theme){
@@ -150,6 +151,13 @@ define(['./ModuleConfig', 'hgn!readium_js_viewer_html_templates/settings-dialog.
                     $('#scroll-default-option input').prop('checked', true);
                 }
 
+                if(readerSettings.epubPopupFootnotes == true) {
+                    $('#EPUBPopupFootNotes-ON-option input').prop('checked', true);
+                }
+                else {
+                    $('#EPUBPopupFootNotes-OFF-option input').prop('checked', true);
+                }
+                
                 if (readerSettings.pageTransition === 0)
                 {
                     $('#pageTransition-1-option input').prop('checked', true);
@@ -185,7 +193,8 @@ define(['./ModuleConfig', 'hgn!readium_js_viewer_html_templates/settings-dialog.
                 fontSize: Number($fontSizeSlider.val()),
                 syntheticSpread: "auto",
                 columnGap: Number($marginSlider.val()),
-                scroll: "auto"
+                scroll: "auto",
+                epubPopupFootnotes: true
             };
 
             if($('#scroll-doc-option input').prop('checked')) {
@@ -194,6 +203,22 @@ define(['./ModuleConfig', 'hgn!readium_js_viewer_html_templates/settings-dialog.
             else if($('#scroll-continuous-option input').prop('checked')) {
                 readerSettings.scroll = "scroll-continuous";
             }
+            
+            if($('#EPUBPopupFootNotes-ON-option input').prop('checked')) {
+                
+                if (reader && reader.viewerSettings() && !reader.viewerSettings().epubPopupFootnotes){
+                    Dialogs.showModalMessage("Readium - " + Strings.i18n_EPUBPopupFootNotes, Strings.i18n_EPUBPopupFootNotes_reload);
+                }
+                readerSettings.epubPopupFootnotes = true;
+            }
+            else if($('#EPUBPopupFootNotes-OFF-option input').prop('checked')) {
+                
+                if (reader && reader.viewerSettings() && reader.viewerSettings().epubPopupFootnotes){
+                    Dialogs.showModalMessage("Readium - " + Strings.i18n_EPUBPopupFootNotes, Strings.i18n_EPUBPopupFootNotes_reload);
+                }
+                readerSettings.epubPopupFootnotes = false;
+            }
+            
 
             if($('#two-up-option input').prop('checked')) {
                 readerSettings.syntheticSpread = "double";
diff --git a/src/templates/settings-dialog.html b/src/templates/settings-dialog.html
index f597d3036..14e70a57b 100644
--- a/src/templates/settings-dialog.html
+++ b/src/templates/settings-dialog.html
@@ -130,6 +130,26 @@ <h5 id="setting-header-scroll-legend" class="setting-header">{{strings.i18n_scro
 
                     </div>
 
+                    <h5 id="setting-header-EPUBPopupFootNotes-legend" class="setting-header">{{strings.i18n_EPUBPopupFootNotes}}</h5>
+
+                    <div role="radiogroup" class="row" style="width:100%;text-align:center;" aria-labelledby="setting-header-EPUBPopupFootNotes-legend">
+
+                        <div role="radio" id="EPUBPopupFootNotes-ON-option" style="vertical-align:middle;width:40%;display:inline-block;position:relative;">
+                            <input style=""  name="EPUBPopupFootNotes" value="single" type="radio" id="EPUBPopupFootNotes-ON-radio"/>
+                            <label style="" for="EPUBPopupFootNotes-ON-radio" class="underlinedLabel">
+                                {{strings.i18n_EPUBPopupFootNotes_ON}}
+                            </label>
+                        </div>
+
+                        <div role="radio" id="EPUBPopupFootNotes-OFF-option" style="vertical-align:middle;width:40%;display:inline-block;position:relative;">
+                            <input style=""  name="EPUBPopupFootNotes" value="single" type="radio" id="EPUBPopupFootNotes-OFF-radio"/>
+                            <label style="" for="EPUBPopupFootNotes-OFF-radio" class="underlinedLabel">
+                                 {{strings.i18n_EPUBPopupFootNotes_OFF}}
+                            </label>
+                        </div>
+
+                    </div>
+                    
                     <!-- Page transitions are seriously broken (see readium-shared-js one_page_view.js disablePageTransitions boolean), so we hide the UI config options -->
                     <h5 style="display:none;" hiddenx="hidden" id="setting-header-pageTransition-legend" class="setting-header">{{strings.i18n_page_transition}}</h5>