Commit 3aec3d8f authored by Christian's avatar Christian
Browse files

Fade-in-out works mostly, icon-name chips style okay

parent a0528e49
......@@ -7,29 +7,28 @@
var elHead = document.getElementsByTagName('head')[0];
var elBody = document.getElementsByTagName('body')[0];
var elContent = elBody.querySelector('div.content[role="main"]');
var ico = 'icon.png';
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
//console.log('content.js: chrome.runtime.onMessage.addListener');
//console.log('content.js: msg.text: ' + msg.text);
var iconPng = chrome.extension.getURL('/icon.png');
var loadingGif = chrome.extension.getURL('/loading.gif');
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.text === 'page_fadeout') {
// This fades only a virgin page, so its possible to open
// and close the popup repeatedly, without re-rendering
// the page every time.
var loadingGif = chrome.extension.getURL("/loading.gif");
// This needs to be called as early as possible to hide the page, because
// for some reason, it starts to lose style even before we do anything with
// the page's stylesheets.
//
// This fades only a virgin page, so its possible to open and close the
// popup repeatedly, without re-rendering the page every time.
if ( ! isPageDone()) {
elBody.style.opacity = '0';
elBody.style.transition = '0.15s';
elHtml.style.background = '#FFF url(' + loadingGif + ') center center no-repeat';
bodyFadeOut();
}
sendResponse(true);
}
if (msg.text === 'page_fadein') {
elBody.style.opacity = "1";
elBody.style.transition = "0.75s";
elHtml.style.backgroundColor = "#FFF";
// Simply resets the opacity of the <body/> back to "1" and the background
// color of the <html/> element back to white.
bodyFadeIn();
sendResponse(true);
}
......@@ -39,13 +38,27 @@
}
if (msg.text === 'mark_members') {
addStyle();
markMemberUsers(msg.userlist);
addStyle();
sendResponse(true);
}
});
function bodyFadeOut() {
// Fade out entire <body/> and display a "loading spinner" on <html/> background.
//elBody.style.opacity = '0';
//elBody.style.transition = '0.3s';
elBody.style.visibility = 'hidden';
elHtml.style.background = '#FFF url(' + loadingGif + ') center center no-repeat';
}
function bodyFadeIn() {
//elBody.style.opacity = "1";
//elBody.style.transition = '0.3s';
elBody.style.visibility = 'visible';
elHtml.style.backgroundColor = "#FFF";
}
function getUsernames() {
// Return usernames from cache or find them in the markup.
if (isPageDone()) {
......@@ -77,30 +90,24 @@
function findRedditUsernames() {
var all = document.all[0].querySelectorAll('div.content[role="main"] p.tagline a.author');
var li = [];
for (var i=0; i<all.length; i++)
li.push(all[i].innerHTML);
//console.log('content.js: findRedditUsernames(): Found ' + li.length + ' usernames.');
for (var i=0; i<all.length; i++) li.push(all[i].innerHTML);
return li;
}
function addStyle() {
var s = '' +
'.reddmeet-link { ' +
' display: inline-block; height: 24px; line-height: 24px; ' +
' border: 0; outline: 0; ' +
' margin: 0; padding: 0 4px 0 0; ' +
' border-radius: 10px; background-color: #F3F3F3; ' +
' box-shadow: 0 0 2px rgba(0,0,0,0.56); ' +
' display: inline-block; height: 24px; line-height: 23px; ' +
' border: 0; outline: 0; margin: 0; padding: 0 4px 0 0; ' +
' border-radius: 2px; background-color: #005280; color: #FFFFFF; ' +
' overflow: hidden; vertical-align: middle; ' +
'} ' +
'.reddmeet-link a.author { color: inherit; border: 0; }' +
'.reddmeet-icon { ' +
' display: inline-block; width: 32px; height: 24px; border-radius: 10px 0 0 10px; ' +
' background: transparent url(http://redddate.com/static/icon32.png) center center no-repeat; ' +
' background-size: cover; ' +
' border: 0; border-right: 8px solid transparent; ' +
' outline: 0; margin: 0; padding: 0; ' +
' vertical-align: middle; ' +
' display: inline-block; width: 32px; height: 24px; ' +
' background: #005280 url(http://redddate.com/static/icon32.png) center center no-repeat; ' +
' background-size: cover; border: 0; border-right: 8px solid transparent; ' +
' outline: 0; margin: 0; padding: 0; vertical-align: middle; ' +
'}';
//document.getElementsByTagName('style')[0].innerText += s;
......@@ -117,7 +124,7 @@
if (qr && qr.length > 0) { // was there at least one element for this username?
for (var j=0; j<qr.length; j++) { // loop all the occurences of this username on the page.
if ( ! qr[j].parentNode.classList.contains('reddmeet-link')) { // only if its not already wrapped.
qr[j].outerHTML = '<span class="reddmeet-link"><a class="reddmeet-icon" href="' + baseUserURL + userlist[i]['name'] + '" style="background-image:url(' + userlist[i]['pic'] + ')"></a>' + qr[j].outerHTML + '</span>';
qr[j].outerHTML = '<span class="reddmeet-link"><a class="reddmeet-icon" href="' + baseUserURL + userlist[i]['name'] + '" style="background-image:url(' + (userlist[i]['pic']||iconPng) + ')"></a>' + qr[j].outerHTML + '</span>';
}
}
}
......
......@@ -24,6 +24,7 @@
"web_accessible_resources": [
"loading.gif",
"icon*.png",
"*.css",
"*.js"
]
......
......@@ -26,6 +26,9 @@
var baseUserURL = 'http://localhost:8000/u/';
var baseApiUrl = 'http://localhost:8000/api/v1/';
var iconPng = 'icon.png';
var loadingGif = 'loading.gif';
var isBusy = false; // only fetch one tab at a time.
var currTab = null; // the tab we are currently working on.
......@@ -37,9 +40,16 @@
// busy and the tab contains a Reddit URL.
isBusy = true;
currTab = tab;
setTimeout(function(){ // wait a little for the page content to fade out.
// Hide the <body/> to avoid re-rendering that seems to
// happen for no reason.
chrome.tabs.sendMessage(currTab.id, {text: 'page_fadeout'}, function(response){ });
setTimeout(function() {
chrome.tabs.sendMessage(currTab.id, {text: 'get_usernames'}, receiveUserlist);
}, 250);
}, 300);
setTimeout(function() {
chrome.tabs.sendMessage(currTab.id, {text: 'page_fadein'}, function(response){ });
}, 900);
} else {
// not reddit
......@@ -68,19 +78,18 @@
}
function receiveUserlist(userlist) {
if (typeof userlist == 'undefined') {
replaceStatus('popup.js: Uhm, userlist is undefined. Do nothing.');
} else if (userlist === null) {
//replaceStatus('popup.js: Already done userlist, do not fetch it again.');
}
else if (userlist.length === 0) {
if (typeof userlist == 'undefined' || userlist.getName() != 'Array') { userlist = []; }
if (userlist.length === 0) {
//replaceStatus('popup.js: Got empty userlist, do nothing.');
//chrome.tabs.sendMessage(currTab.id, {text: 'page_fadein'}, function(response){ });
}
else {
userlist = unique_set(userlist); // remove duplicates.
if (userlist.length === 0) {
if (userlist.length == 0) {
//replaceStatus('popup.js: Got empty userlist, do nothing.');
//chrome.tabs.sendMessage(currTab.id, {text: 'page_fadein'}, function(response){ });
} else {
// with the list of usernames, check which have a reddmeet account
// and pass the resulting list on to the markMembers function.
......@@ -99,20 +108,19 @@
var html = '';
if (userlist.length > 0) {
chrome.tabs.sendMessage(currTab.id, {text: 'mark_members', 'userlist': userlist}, function(response){
//chrome.tabs.sendMessage(currTab.id, {text: 'page_fadein'}, function(response){ });
});
for (var i=0; i<userlist.length; i++) {
var pic = '<img src="' + userlist[i]['pic'] + '" alt="">';
var pic = '<img src="' + (userlist[i]['pic']||iconPng) + '" alt="">';
var ahref = '<a href="' + baseUserURL + userlist[i]['name'] + '">';
var infoLine1 = '<span class="infoline1">' + userlist[i]['name'] + '</span>';
var infoLine2 = '<span class="infoline2">33, woman who like men</span>';
var infoLine2 = '<span class="infoline2">' + userlist[i]['age'] + ', ' + userlist[i]['sex'] + '</span>';
html += '<li>' + ahref + pic + infoLine1 + infoLine2 + '</a></li>';
}
replaceStatus('<ul id="userlist">' + html + '</ul>');
chrome.tabs.sendMessage(currTab.id, {text: 'page_fadeout'}, function(response){ });
chrome.tabs.sendMessage(currTab.id, {text: 'mark_members', 'userlist': userlist}, function(response){ });
chrome.tabs.sendMessage(currTab.id, {text: 'page_fadein'}, function(response){ });
isBusy = false;
}
else {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment