👌 Remove all innerHTML

This commit is contained in:
Clement Desmidt 2018-12-12 08:06:04 +01:00
parent 5177b67480
commit 25fe0c5849
4 changed files with 31 additions and 28 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "Shikiryu Read Later", "name": "Shikiryu Read Later",
"version": "0.0.2.1", "version": "0.0.2.2",
"manifest_version": 2, "manifest_version": 2,
"description": "__MSG_extensionDescription__", "description": "__MSG_extensionDescription__",
"icons": { "icons": {

View File

@ -8,7 +8,21 @@
<div id="app" class="popup-content"> <div id="app" class="popup-content">
<h1 data-message="extensionName"></h1> <h1 data-message="extensionName"></h1>
<div id="display-container"></div> <div id="display-container">
<div class="site-description">
<h3 class="title" data-template="title"></h3>
<p class="description" data-template="description"></p>
<p class="image" data-template="image"></p>
<div>
<label for="comment">Comment:</label>
<textarea id="comment" name="comment"></textarea>
</div>
<a href="" target="_blank" class="url" data-template="url"></a>
</div>
<div class="action-container">
<button id="save-btn" class="btn btn-primary">Save</button>
</div>
</div>
<footer class="main-footer"> <footer class="main-footer">
<div class="grid"> <div class="grid">

View File

@ -16,17 +16,17 @@ storage.get('token', function(resp) {
urlInput.addEventListener("blur", function(e) { urlInput.addEventListener("blur", function(e) {
var value = this.value; var value = this.value;
storage.set({ url: value }, function() { storage.set({ url: value }, function() {
message.innerHTML = ext.i18n.getMessage("URLChanged"); message.textContent = ext.i18n.getMessage("URLChanged");
}); });
}); });
tokenInput.addEventListener("blur", function(e) { tokenInput.addEventListener("blur", function(e) {
var value = this.value; var value = this.value;
storage.set({ token: value }, function() { storage.set({ token: value }, function() {
message.innerHTML = ext.i18n.getMessage("tokenSaved"); message.textContent = ext.i18n.getMessage("tokenSaved");
}); });
}); });
document.querySelectorAll("[data-message]").forEach(function(elt) { document.querySelectorAll("[data-message]").forEach(function(elt) {
elt.innerHTML = ext.i18n.getMessage(elt.dataset.message); elt.textContent = ext.i18n.getMessage(elt.dataset.message);
}); });

View File

@ -17,33 +17,23 @@ storage.get('color', function(resp) {
} }
}); });
var template = (data) => {
return (`
<div class="site-description">
<h3 class="title">${data.title}</h3>
<p class="description">${data.description}</p>
<p class="image"><img src="${data.image}"></p>
<div>
<label for="comment">Comment:</label>
<textarea id="comment" name="comment"></textarea>
</div>
<a href="${data.url}" target="_blank" class="url">${data.url}</a>
</div>
<div class="action-container">
<button id="save-btn" class="btn btn-primary">Save</button>
</div>
`);
};
var renderMessage = (message) => { var renderMessage = (message) => {
var displayContainer = document.getElementById("display-container"); var displayContainer = document.getElementById("display-container");
displayContainer.innerHTML = `<p class='message'>${message}</p>`; displayContainer.textContent = message;
}; };
var renderBookmark = (data) => { var renderBookmark = (data) => {
var displayContainer = document.getElementById("display-container");
if (data) { if (data) {
page_data = data; page_data = data;
displayContainer.innerHTML = template(data); document.querySelector("[data-template=title]").textContent = page_data.title;
document.querySelector("[data-template=description]").textContent = page_data.description;
if ("" !== img) {
var img = document.createElement("image");
img.src = page_data.image;
document.querySelector("[data-template=image]").appendChild(img);
}
document.querySelector("[data-template=url]").textContent = page_data.url;
document.querySelector("[data-template=url]").setAttribute("href", page_data.url);
} else { } else {
renderMessage(ext.i18n.getMessage("cantExtractTitle")); renderMessage(ext.i18n.getMessage("cantExtractTitle"));
} }
@ -70,8 +60,7 @@ popup.addEventListener("click", function(e) {
var dataMessages = document.querySelectorAll("[data-message]"); var dataMessages = document.querySelectorAll("[data-message]");
[].forEach.call(dataMessages, function(elt) { [].forEach.call(dataMessages, function(elt) {
console.log(elt.dataset.message); elt.textContent = ext.i18n.getMessage(elt.dataset.message);
elt.innerHTML = ext.i18n.getMessage(elt.dataset.message);
}); });
var optionsLink = document.querySelector(".js-options"); var optionsLink = document.querySelector(".js-options");