👌 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",
"version": "0.0.2.1",
"version": "0.0.2.2",
"manifest_version": 2,
"description": "__MSG_extensionDescription__",
"icons": {

View File

@ -8,7 +8,21 @@
<div id="app" class="popup-content">
<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">
<div class="grid">

View File

@ -16,17 +16,17 @@ storage.get('token', function(resp) {
urlInput.addEventListener("blur", function(e) {
var value = this.value;
storage.set({ url: value }, function() {
message.innerHTML = ext.i18n.getMessage("URLChanged");
message.textContent = ext.i18n.getMessage("URLChanged");
});
});
tokenInput.addEventListener("blur", function(e) {
var value = this.value;
storage.set({ token: value }, function() {
message.innerHTML = ext.i18n.getMessage("tokenSaved");
message.textContent = ext.i18n.getMessage("tokenSaved");
});
});
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 displayContainer = document.getElementById("display-container");
displayContainer.innerHTML = `<p class='message'>${message}</p>`;
displayContainer.textContent = message;
};
var renderBookmark = (data) => {
var displayContainer = document.getElementById("display-container");
if(data) {
if (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 {
renderMessage(ext.i18n.getMessage("cantExtractTitle"));
}
@ -70,8 +60,7 @@ popup.addEventListener("click", function(e) {
var dataMessages = document.querySelectorAll("[data-message]");
[].forEach.call(dataMessages, function(elt) {
console.log(elt.dataset.message);
elt.innerHTML = ext.i18n.getMessage(elt.dataset.message);
elt.textContent = ext.i18n.getMessage(elt.dataset.message);
});
var optionsLink = document.querySelector(".js-options");