Merge branch 'release/0.9.0'

Muffo · Nov 5, 2016 · a230c07 · a230c07
2 parents 9eace2c + c23173c
commit a230c07
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 15 deletions.
diff --git a/app/images/mercury-help.png b/app/images/mercury-help.png
diff --git a/app/images/postlight-labs-logo.svg b/app/images/postlight-labs-logo.svg
diff --git a/app/manifest.json b/app/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "__MSG_appName__",
-    "version": "0.8.1",
+    "version": "0.9.0",
     "manifest_version": 2,
     "description": "__MSG_appDescription__",
     "icons": {
@@ -47,8 +47,9 @@
         "declarativeContent",
         "activeTab",
         "storage",
-        "http://boilerpipe-web.appspot.com/*",
-        "https://www.readability.com/api/*"
+        "https://boilerpipe-web.appspot.com/*",
+        "https://www.readability.com/api/*",
+        "https://mercury.postlight.com/*"
     ],
     "options_page": "options.html"
 }
diff --git a/app/options.html b/app/options.html
@@ -29,6 +29,7 @@ <h1 data-message="appName">FullyFeedly</h1>
                         <label for="extractionAPI" data-message="optionsArticleExtractionAPI">Article extraction API</label>
                             <select class="form-control input-lg" id="extractionAPI">
                             <option>Boilerpipe</option>
+                            <option>Mercury</option>
                             <option>Readability</option>
                         </select>
                     </div>
@@ -39,6 +40,13 @@ <h1 data-message="appName">FullyFeedly</h1>
                         </a>
                         <input type="text" class="form-control input-lg" id="readabilityAPIKey" placeholder="Readability API Key">
                     </div>
+                    <div class="form-group" id="mercuryKeyForm">
+                        <label for="mercuryAPIKey" data-message="optionsMercuryApiKey">Mercury API key </label>
+                        <a class="pull-right" data-toggle="modal" data-target="#mercuryHelp" href="#" data-message="optionsHelp">
+                            Help
+                        </a>
+                        <input type="text" class="form-control input-lg" id="mercuryAPIKey" placeholder="Mercury API Key">
+                    </div>
                     <div class="checkbox">
                         <label>
                             <input type="checkbox" id="enableShortcut"> <span data-message="optionsEnableKeyboardShortcut">Enable keyboard shortcut</span> <code>f f</code>
@@ -91,7 +99,34 @@ <h4 data-message="optionsStepTwo">2. Get your API key </h4>
                 </div>
             </div>
         </div>
+        <!-- Mercury help div -->
+        <div class="modal fade" id="mercuryHelp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header" > <!-- style="background-color:#000;color:#777" -->
+                        <button type="button" class="close" data-dismiss="modal">
+                            <span aria-hidden="true">&times;</span>
+                            <span class="sr-only" data-message="optionsClose">Close</span>
+                        </button>
+                        <div id="postlightLogo"></div>
+                        <h3 class="modal-title" id="mercuryHelpTitle">
+                            <span data-message="optionsMercuryApiKey">Mercury API key</span>
+                        </h3>
+                    </div>
+                    <div class="modal-body">
+                        <span data-message="optionsSetupMercuryApiKey">Setup your Mercury API key in two easy steps</span>:
+                        <h4 data-message="optionsMercuryStepOne">1. Create a free Mercury API account</h4>
+                        <span data-message="optionsMercuryVisit">Visit</span> <a href="https://mercury.postlight.com/web-parser/" target="_blank">mercury.postlight.com/web-parser/</a>
+                        <span data-message="optionsMercuryCreateFreeAccount">and create your free account</span>.</br>
+                        <span data-message="optionsLoginGoogle">You can also login using Google</span>.</span>
 
+                        <h4 data-message="optionsMercuryStepTwo">2. Get your API key </h4>
+                        <span data-message="optionsMercuryYourApiKeyAvailableIn">Your personal API key is available immediately after creating or logging in to your account on the main page.</span>
+                        <img src="images/mercury-help.png" />
+                    </div>
+                </div>
+            </div>
+        </div>
         <!-- Github ribbon -->
         <a href="https://github.com/muffo/fullyfeedly" target="_blank">
             <img style="position: absolute; top: 0; right: 0; border: 0;" src="images/forkmeongithub.png" alt="Fork me on GitHub">

diff --git a/app/scripts/content.js b/app/scripts/content.js
@@ -7,6 +7,7 @@
 var options = {
     extractionAPI: 'Boilerpipe',
     readabilityAPIKey: '',
+    mercuryAPIKey: '',
     enableShortcut: false
 };
 
@@ -176,13 +177,16 @@ function onBoilerpipeArticleExtracted(data, overlay) {
 
     // Replace the preview of the article with the full text
     var articlePreviewHTML = contentElement.innerHTML;
-    contentElement.innerText = articleContent;
+    contentElement.innerHTML = articleContent;
 
-    // Put the image back at the beginning of the article
-    if (articleImage !== null) {
-        contentElement.insertBefore(articleImage, contentElement.firstChild);
-    }
+    // Clear image styles to fix formatting of images with class/style/width information in article markup
+    Array.prototype.slice.call(contentElement.querySelectorAll('img')).forEach(function(el) {
+        el.removeAttribute('class');
+        el.removeAttribute('width');
+        el.setAttribute('style', 'max-width:100%;');
+    });
 
+    // Toggle Success Overlay
     addUndoButton(articlePreviewHTML);
     successOverlay('done', overlay);
 }
@@ -205,11 +209,11 @@ function boilerpipeRequest(xhr, overlay) {
     };
 }
 
-/* ===================== Readability ===================== */
+/* ===================== Readability/Mercury ===================== */
 /**
  * Process the content of the article and add it to the page
  */
-function onReadabilityArticleExtracted(data, overlay) {
+function onMercuryReadabilityArticleExtracted(data, overlay) {
 
     // Check if the API failed to extract the text
     if (data.content === null) {
@@ -238,6 +242,15 @@ function onReadabilityArticleExtracted(data, overlay) {
     // Replace the preview of the article with the full text
     var articlePreviewHTML = contentElement.innerHTML;
     contentElement.innerHTML = articleContent;
+
+    // Clear image styles to fix formatting of images with class/style/width information in article markup
+    Array.prototype.slice.call(contentElement.querySelectorAll('img')).forEach(function(el) {
+        el.removeAttribute('class');
+        el.removeAttribute('width');
+        el.setAttribute('style', 'max-width:100%;');
+    });
+
+    // Toggle success overlay
     successOverlay('done', overlay);
 
     // Put the image back at the beginning of the article
@@ -248,19 +261,20 @@ function onReadabilityArticleExtracted(data, overlay) {
     addUndoButton(articlePreviewHTML);
 }
 
+/* ===================== Readability ===================== */
 function readabilityRequest(xhr, overlay) {
     return function() {
         if (xhr.readyState === 4) {
             if (xhr.status === 200) {
                 // Operation succeded
                 var data = JSON.parse(xhr.responseText);
-                onReadabilityArticleExtracted(data, overlay);
+                onMercuryReadabilityArticleExtracted(data, overlay);
             } else if (xhr.status === 400) {
                 console.log('[FullyFeedly] Readability API Bad request: ' +
                             'The server could not understand your request. ' +
                             'Verify that request parameters (and content, if any) are valid.');
                 failOverlay('APIBadRequest', overlay);
-            } else if (xhr.status === 400) {
+            } else if (xhr.status === 403) {
                 console.log('[FullyFeedly] Readability API Authorization Required: ' +
                             'Authentication failed or was not provided.');
                 failOverlay('APIAuthorizationRequired', overlay);
@@ -272,6 +286,30 @@ function readabilityRequest(xhr, overlay) {
     };
 }
 
+/* ===================== Mercury ===================== */
+function mercuryRequest(xhr, overlay) {
+    return function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                // Operation succeded
+                var data = JSON.parse(xhr.responseText);
+                onMercuryReadabilityArticleExtracted(data, overlay);
+            } else if (xhr.status === 400) {
+                console.log('[FullyFeedly] Mercury API Bad request: ' +
+                            'The server could not understand your request. ' +
+                            'Verify that request parameters (and content, if any) are valid.');
+                failOverlay('APIBadRequest', overlay);
+            } else if (xhr.status === 403) {
+                console.log('[FullyFeedly] Mercury API Authorization Required: ' +
+                            'Authentication failed or was not provided.');
+                failOverlay('APIAuthorizationRequired', overlay);
+            } else {
+                console.log('[FullyFeedly] Mercury API Unknown error');
+                failOverlay('APIUnknownError', overlay);
+            }
+        }
+    };
+}
 
 /**
  * Performs an XMLHttpRequest to boilerpipe to get the content of the artile.
@@ -300,7 +338,7 @@ function fetchPageContent() {
     // Select the API to use to extract the article
     if (options.extractionAPI === 'Boilerpipe') {
         // Prepare the request to Boilerpipe
-        url = 'http://boilerpipe-web.appspot.com/extract?url=' +
+        url = 'https://boilerpipe-web.appspot.com/extract?url=' +
                 encodedPageUrl +
                 '&extractor=ArticleExtractor&output=json&extractImages=';
 
@@ -319,11 +357,24 @@ function fetchPageContent() {
 
         xhr.onreadystatechange = readabilityRequest(xhr, overlay);
     }
+    else if (options.extractionAPI === 'Mercury') {
+        if (options.mercuryAPIKey === '') {
+            failOverlay('APIMissingKey', overlay);
+            return;
+        }
+
+        url = 'https://mercury.postlight.com/parser?url='+ encodedPageUrl;
+
+        xhr.onreadystatechange = mercuryRequest(xhr, overlay);
+    }
     else {
         failOverlay('InvalidAPI', overlay);
         return;
     }
     xhr.open('GET', url, true);
+    if (options.extractionAPI === 'Mercury' && options.mercuryAPIKey !== '') {
+        xhr.setRequestHeader('x-api-key', options.mercuryAPIKey);
+    }
     xhr.send();
 }
 

diff --git a/app/scripts/options.js b/app/scripts/options.js
@@ -12,6 +12,13 @@ function updateForm() {
     else {
         $('#readabilityKeyForm').hide();
     }
+
+    if (extractionAPI === 'Mercury') {
+        $('#mercuryKeyForm').show();
+    }
+    else {
+        $('#mercuryKeyForm').hide();
+    }
 }
 
 // Show a visual confirmation to the user
@@ -26,6 +33,7 @@ function onKeyboardShortcut() {
 function saveOptions() {
     var extractionAPI = $('#extractionAPI').val();
     var readabilityAPIKey = $('#readabilityAPIKey').val();
+    var mercuryAPIKey = $('#mercuryAPIKey').val();
     var enableShortcut = $('#enableShortcut').prop('checked');
     var status = $('#status');
 
@@ -42,10 +50,23 @@ function saveOptions() {
             return;
         }
     }
+    if (extractionAPI === 'Mercury') {
+        if (mercuryAPIKey === '') {
+            // Show the error message
+            status.text('Missing Mercury API key');
+            $('#mercuryKeyForm').addClass('has-error');
+            setTimeout(function() {
+                status.text('');
+                $('#mercuryKeyForm').removeClass('has-error');
+            }, 2000);
+            return;
+        }
+    }
 
     chrome.storage.sync.set({
         extractionAPI: extractionAPI,
         readabilityAPIKey: readabilityAPIKey,
+        mercuryAPIKey: mercuryAPIKey,
         enableShortcut: enableShortcut
     }, function() {
         // Update status to let user know options were saved.
@@ -62,10 +83,12 @@ function restoreOptions() {
     chrome.storage.sync.get({
         extractionAPI: 'Boilerpipe',
         readabilityAPIKey: '',
+        mercuryAPIKey: '',
         enableShortcut: false
     }, function(items) {
         $('#extractionAPI').val(items.extractionAPI);
         $('#readabilityAPIKey').val(items.readabilityAPIKey);
+        $('#mercuryAPIKey').val(items.mercuryAPIKey);
         $('#enableShortcut').prop('checked', items.enableShortcut);
         updateForm();
     });

diff --git a/app/styles/main.css b/app/styles/main.css
@@ -3,7 +3,7 @@ body {
 }
 
 .jumbotron h1 {
-    font-weight: bold;   
+    font-weight: bold;
 }
 
 #tryShortcut {
@@ -13,4 +13,20 @@ body {
 
 #icon128 {
     margin: 10px 10px 0px 0px;
-}
+}
+
+#mercuryHelp .close {
+    color: #fff;
+}
+
+#postlightLogo {
+    position: absolute;
+    width: 46px;
+    height: 35px;
+    background: url('../images/postlight-labs-logo.svg') no-repeat 50%;
+    background-size: contain;
+}
+
+#mercuryHelpTitle {
+    padding-left: 50px;
+}