EPUB3 "popup" footnotes

src/i18n/_locales/en_US/messages.json

@@ -450,6 +450,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": {

src/js/Dialogs.js

@@ -94,6 +94,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);
+        },
         showModalMessageEx : function(title, body){
             var buttons = ButtonTemplate({
                     buttons : [

src/js/EpubReader.js

@@ -385,6 +385,13 @@ BookmarkData){
         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();

src/js/ReaderSettingsDialog.js

@@ -8,7 +8,8 @@ define(['./ModuleConfig', 'hgn!readium_js_viewer_html_templates/settings-dialog.
         scroll: "auto",
         columnGap: 60,
         columnMaxWidth: 550,
-        columnMinWidth: 400
+        columnMinWidth: 400,
+        epubPopupFootnotes: true
     }
 
     var getBookStyles = function(theme){
@@ -213,6 +214,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);
@@ -253,8 +261,9 @@ define(['./ModuleConfig', 'hgn!readium_js_viewer_html_templates/settings-dialog.
                 fontSelection: Number($fontSelectionList.val()),
                 syntheticSpread: "auto",
                 columnGap: Number($marginSlider.val()),
-                columnMaxWidth: columnMaxWidth,
-                scroll: "auto"
+                scroll: "auto",
+                epubPopupFootnotes: true,
+                columnMaxWidth: columnMaxWidth
             };
 
             if($('#scroll-doc-option input').prop('checked')) {
@@ -263,6 +272,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";

src/templates/settings-dialog.html

@@ -153,6 +153,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>