Info and share popups with placeholder text

diff --git a/BookReader/BookReader.js b/BookReader/BookReader.js
index 438987d..9911930 100644 (file)
--- a/BookReader/BookReader.js
+++ b/BookReader/BookReader.js
@@ -3642,7 +3642,6 @@ BookReader.prototype.initToolbar = function(mode, ui) {
     $("body").append(
           "<div id='BRtoolbar'>"
         +   "<span id='BRtoolbarbuttons'>"
-        /* XXXmang integrate search */
         +     "<form action='javascript:br.search($(\"#textSrch\").val());' id='booksearch'><input type='search' id='textSrch' name='textSrch' val='' placeholder='Search inside'/><button type='submit' id='btnSrch' name='btnSrch'>GO</button></form>"
         +     "<button class='BRicon play'></button>"
         +     "<button class='BRicon pause'></button>"
@@ -3668,7 +3667,7 @@ BookReader.prototype.initToolbar = function(mode, ui) {
         + "</div>"
         */
         );
-    
+
     $('#BRtoolbar .pause').hide();    
     
     this.updateToolbarZoom(this.reduce); // Pretty format
@@ -3733,7 +3732,22 @@ BookReader.prototype.initToolbar = function(mode, ui) {
     if ( ! (this.canSwitchToMode(this.constMode2up) || this.canSwitchToMode(this.constModeThumb)) ) {
         jToolbar.find('.one_page_mode').hide();
     }
+    
+        // $$$ Don't hardcode ids
+    jToolbar.find('.share').colorbox({inline: true, opacity: "0.5", href: "#shareThis"});
+    jToolbar.find('.info').colorbox({inline: true, opacity: "0.5", href: "#aboutThis"});
+        
+    $("body").append(
+        [
+            '<div style="display: hidden;">',
+                this.makeShareDiv(),
+                this.makeAboutDiv(),
+            '</div>'
+        ].join('\n')
+    );
+    
 
+    
     // Switch to requested mode -- binds other click handlers
     //this.switchToolbarMode(mode);
     
@@ -4052,19 +4066,19 @@ BookReader.prototype.bindMozTouchHandlers = function() {
     
     // Currently only want touch handlers in 2up
     $('#BookReader').bind('MozTouchDown', function(event) {
-        //console.log('MozTouchDown ' + event.streamId + ' ' + event.clientX + ',' + event.clientY);
+        //console.log('MozTouchDown ' + event.originalEvent.streamId + ' ' + event.target + ' ' + event.clientX + ',' + event.clientY);
         if (this.mode == this.constMode2up) {
             event.preventDefault();
         }
     })
     .bind('MozTouchMove', function(event) {
-        //console.log('MozTouchMove - ' + event.streamId + ' ' + event.clientX + ',' + event.clientY)
+        //console.log('MozTouchMove - ' + event.originalEvent.streamId + ' ' + event.target + ' ' + event.clientX + ',' + event.clientY)
         if (this.mode == this.constMode2up) { 
             event.preventDefault();
         }
     })
     .bind('MozTouchUp', function(event) {
-        //console.log('MozTouchUp - ' + event.streamId + ' ' + event.clientX + ',' + event.clientY);
+        //console.log('MozTouchUp - ' + event.originalEvent.streamId + ' ' + event.target + ' ' + event.clientX + ',' + event.clientY);
         if (this.mode = this.constMode2up) {
             event.preventDefault();
         }
@@ -5076,3 +5090,92 @@ BookReader.prototype.ttsStartPolling = function () {
             };
         });
     });
+
+BookReader.prototype.makeShareDiv = function()
+{
+    var html = [
+        '<div class="BRfloat" id="shareThis">',
+            '<div class="BRfloatHead">',
+                'Share',
+                '<a class="floatShut" href="javascript:;" onclick="$.fn.colorbox.close();"><span class="shift">Close</span></a>',
+            '</div>',
+            '<p>Copy and paste one of these options to share this book elsewhere.</p>',
+            '<form method="post" action="">',
+                '<fieldset>',
+                    '<label for="pageview">Link to this page view:</label>',
+                    '<input type="text" name="pageview" id="pageview" value="http://thisisthelinktothispageview"/>',
+                '</fieldset>',
+                '<fieldset>',
+                    '<label for="booklink">Link to the book:</label>',
+                    '<input type="text" name="booklink" id="booklink" value="http://thisisthelinktothisbook"/>',
+                '</fieldset>',
+                '<fieldset>',
+                    '<label for="iframe">Embed a mini Book Reader:</label>',
+                    '<fieldset class="sub">',
+                        '<label class="sub">',
+                            '<input type="radio" name="pages" id="1page" checked="checked"/>',
+                            '1 page',
+                        '</label>',
+                        '<label class="sub">',
+                            '<input type="radio" name="pages" id="2page"/>',
+                            '2 pages',
+                        '</label>',
+                        '<label class="sub">',
+                            '<input type="checkbox" name="thispage" id="thispage"/>',
+                            'Open to this page?',
+                        '</label>',
+                    '</fieldset>',
+                    '<textarea cols="30" rows="4" name="iframe" id="iframe"><iframe src="http://thisisthestreamlink" width="480" height="480"></iframe></textarea>',
+                    '<p class="meta"><strong>NOTE:</strong> We\'ve tested EMBED on blogspot.com blogs as well as self-hosted Wordpress blogs. This feature will NOT work on wordpress.com blogs.</p>',
+                '</fieldset>',
+                '<fieldset class="center">',
+                    '<button type="button" onclick="$.fn.colorbox.close();">Finished</button>',
+                '</fieldset>',
+            '</form>',
+        '</div>'
+    ].join('\n');
+    
+    return html;
+}
+
+BookReader.prototype.makeAboutDiv = function() 
+{
+    var html = [
+        '<div class="BRfloat" id="aboutThis">',
+            '<div class="BRfloatHead">About this book',
+                '<a class="floatShut" href="javascript:;" onclick="$.fn.colorbox.close();"><span class="shift">Close</span></a>',
+            '</div>',
+            '<div class="BRfloatBody">',
+                '<div class="BRfloatCover">',
+                    '<a href="Open Library Book Page"><img src="Open Library Book Cover" alt="Book Title" height="140"/></a>',
+                '</div>',
+                '<div class="BRfloatMeta">',
+                    '<div class="BRfloatTitle">',
+                        '<h2><a href="Open Library Book Page" class="title">Book Title</a></h2>',
+                        'by',
+                        '<a href="Open Library Author Page">Book Author</a>',
+                    '</div>',
+                    '<p>Published MONTH YEAR by <a href="Open Library Publisher Page">Publisher name</a></p>',
+                    '<p>Written in <a href="Open Library Language page">Language</a></p>',
+                    '<h3>Other Formats</h3>',
+                    '<ul class="links">',
+                        '<li><a href="PDF Link">PDF</a><span>|</span></li>',
+                        '<li><a href="Text Link">Plain Text</a><span>|</span></li>',
+                        '<li><a href="DAISY Link">DAISY</a><span>|</span></li>',
+                        '<li><a href="PDF Link">ePub</a><span>|</span></li>',
+                        '<li><a href="Kindle Link">Send to Kindle</a><span>|</span></li>',
+                        '<li><a href="archive.org Page for Book">More...</a></li>',
+                    '</ul>',
+                    '<p class="moreInfo"><span></span>More information on <a href="Open Libarary Book Page">openlibrary.org</a>.</p>',
+                '</div>',
+            '</div>',
+            '<div class="BRfloatFoot">',
+                '<a href="http://openlibrary.org/contact" class="problem">Report a problem</a>',
+                '<span>|</span>',
+                '<a href="http://openlibrary.org/dev/docs/bookreader">About the Bookreader</a>',
+            '</div>',
+        '</div>'
+    ].join('\n');
+    
+    return html;
+}