From 94bc05ff66e7024e67b06410b38c31890664b8a4 Mon Sep 17 00:00:00 2001 From: wilding Date: Fri, 19 Feb 2016 03:29:06 -0800 Subject: [PATCH 1/5] Feature: display image in popup window MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - add variable ‘picture’ that represents the value of the src attribute of the first child of #infobox that has an tag - add variable ‘new_html’ to contain popup window html - wrap popup window html into a flex-box
- separate content into two divs: one for text and one for the picture - remove padding from cssRules - add padding for text
only - use ‘picture’ variable as source for the background image of the picture
--- src/inject/inject.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/inject/inject.js b/src/inject/inject.js index e6a5d3d..a3417d7 100755 --- a/src/inject/inject.js +++ b/src/inject/inject.js @@ -35,7 +35,7 @@ chrome.extension.sendMessage({}, function(response) { { //Clear the data clearData(); - //Remove the title attribute + //Remove the title attribute element.removeAttr('title'); var baseURL = window.location.origin, //Get the URL @@ -45,18 +45,27 @@ chrome.extension.sendMessage({}, function(response) { $.get(fullURL, function(data) { var content = $(data).find('#bodyContent').find('p').html(), cssRules = { - position: 'fixed', - top: 10+"px", - left: 10+"px", + position: 'fixed', + top: 10+"px", + left: 10+"px", right: 10+"px", maxHeight: 500+"px", - padding: 1.4+"em", background: "#fff", boxShadow: "2px 2px 15px rgba(50,50,50,.75)", zIndex: 100 }; - - $('').css(cssRules).appendTo('body').fadeIn(); + var picture = $(data).find('.infobox').find('img').attr('src'); + var new_html = ''; + new_html += ''; + $(new_html).css(cssRules).appendTo('body').fadeIn(); }); } } From a50ff1b927ad0e28a79826b5d696dba10cdd0eaf Mon Sep 17 00:00:00 2001 From: wilding Date: Mon, 29 Feb 2016 17:21:43 -0800 Subject: [PATCH 2/5] Refactor: redistribute width spacing - remove wrap property from popup div - remove width property from content - change from background image to - give img auto width, max height equal to the max height of the popup window, and a right margin of 10px --- src/inject/inject.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/inject/inject.js b/src/inject/inject.js index a3417d7..417c1ac 100755 --- a/src/inject/inject.js +++ b/src/inject/inject.js @@ -56,13 +56,13 @@ chrome.extension.sendMessage({}, function(response) { }; var picture = $(data).find('.infobox').find('img').attr('src'); var new_html = ''; - new_html += ''; + $(new_html).css(cssRules).appendTo('body').fadeIn(); + } + else { + $('').css(cssRules).appendTo('body').fadeIn(); + } + }); } } From 4556756becdf3b9949adba3d02f34a4ff4240210 Mon Sep 17 00:00:00 2001 From: wilding Date: Thu, 31 Mar 2016 15:38:27 -0700 Subject: [PATCH 4/5] Refactor: improve picture selection - select pictures from full article content rather than just the info box - update var picture to refer to the element itself rather than its src attribute - filter out pictures that are less than 100px in height --- src/inject/inject.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/inject/inject.js b/src/inject/inject.js index fd07ac5..3a4bbcd 100755 --- a/src/inject/inject.js +++ b/src/inject/inject.js @@ -54,7 +54,9 @@ chrome.extension.sendMessage({}, function(response) { boxShadow: "2px 2px 15px rgba(50,50,50,.75)", zIndex: 100 }; - var picture = $(data).find('.infobox').find('img').attr('src'); + var picture = $(data).find('#bodyContent').find('img').filter(function(index) { + return $(this).attr('height') > 100; + }); if (picture.attr('src') !== undefined) { var new_html = ''; new_html += ''; new_html += ' Date: Thu, 31 Mar 2016 15:50:59 -0700 Subject: [PATCH 5/5] Metadata: add comments --- src/inject/inject.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/inject/inject.js b/src/inject/inject.js index 3a4bbcd..ad09eb2 100755 --- a/src/inject/inject.js +++ b/src/inject/inject.js @@ -54,9 +54,11 @@ chrome.extension.sendMessage({}, function(response) { boxShadow: "2px 2px 15px rgba(50,50,50,.75)", zIndex: 100 }; + // Select article pictures that are taller than 100px var picture = $(data).find('#bodyContent').find('img').filter(function(index) { return $(this).attr('height') > 100; }); + // Display popup with picture if (picture.attr('src') !== undefined) { var new_html = ''; new_html += ''; $(new_html).css(cssRules).appendTo('body').fadeIn(); } + // If no picture exists, display text-only popup else { $('').css(cssRules).appendTo('body').fadeIn(); }