webextensions/src/scripts/popup.js

71 lines
2.2 KiB
JavaScript

import ext from "./utils/ext";
import storage from "./utils/storage";
var popup = document.getElementById("app");
storage.get('color', function(resp) {
var color = resp.color;
if(color) {
popup.style.backgroundColor = color
}
});
var template = (data) => {
var json = JSON.stringify(data);
return (`
<div class="site-description">
<h3 class="title">${data.title}</h3>
<p class="description">${data.description}</p>
<a href="${data.url}" target="_blank" class="url">${data.url}</a>
</div>
<div class="action-container">
<button data-bookmark='${json}' id="save-btn" class="btn btn-primary">Save</button>
</div>
`);
};
var renderMessage = (message) => {
var displayContainer = document.getElementById("display-container");
displayContainer.innerHTML = `<p class='message'>${message}</p>`;
};
var renderBookmark = (data) => {
var displayContainer = document.getElementById("display-container")
if(data) {
var tmpl = template(data);
displayContainer.innerHTML = tmpl;
} else {
renderMessage(browser.i18n.getMessage("cantExtractTitle"));
}
}
ext.tabs.query({active: true, currentWindow: true}, function(tabs) {
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, { action: 'process-page' }, renderBookmark);
});
popup.addEventListener("click", function(e) {
if(e.target && e.target.matches("#save-btn")) {
e.preventDefault();
var data = e.target.getAttribute("data-bookmark");
ext.runtime.sendMessage({action: "perform-save", data: data}, function (response) {
if (response && response.action === "saved") {
renderMessage(browser.i18n.getMessage("savedSuccessfully"));
} else {
renderMessage(browser.i18n.getMessage("unknownError"));
}
});
}
});
var dataMessages = document.querySelectorAll("[data-message]");
console.dir(dataMessages);
[].forEach.call(dataMessages, function(elt) {
console.log(elt.dataset.message);
elt.innerHTML = browser.i18n.getMessage(elt.dataset.message);
});
var optionsLink = document.querySelector(".js-options");
optionsLink.addEventListener("click", function(e) {
e.preventDefault();
ext.tabs.create({'url': ext.extension.getURL('options.html')});
});