Browse Source

:ok_hand: Remove all `innerHTML`

Clement Desmidt 3 months ago
parent
commit
25fe0c5849
4 changed files with 31 additions and 28 deletions
  1. 1
    1
      manifest.json
  2. 15
    1
      src/popup.html
  3. 3
    3
      src/scripts/options.js
  4. 12
    23
      src/scripts/popup.js

+ 1
- 1
manifest.json View File

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

+ 15
- 1
src/popup.html View File

@@ -8,7 +8,21 @@
8 8
     <div id="app" class="popup-content">
9 9
       <h1 data-message="extensionName"></h1>
10 10
 
11
-      <div id="display-container"></div>
11
+      <div id="display-container">
12
+		  <div class="site-description">
13
+			  <h3 class="title" data-template="title"></h3>
14
+			  <p class="description" data-template="description"></p>
15
+			  <p class="image" data-template="image"></p>
16
+			  <div>
17
+				  <label for="comment">Comment:</label>
18
+				  <textarea id="comment" name="comment"></textarea>
19
+			  </div>
20
+			  <a href="" target="_blank" class="url" data-template="url"></a>
21
+		  </div>
22
+		  <div class="action-container">
23
+			  <button id="save-btn" class="btn btn-primary">Save</button>
24
+		  </div>
25
+	  </div>
12 26
 
13 27
       <footer class="main-footer">
14 28
         <div class="grid">

+ 3
- 3
src/scripts/options.js View File

@@ -16,17 +16,17 @@ storage.get('token', function(resp) {
16 16
 urlInput.addEventListener("blur", function(e) {
17 17
     var value = this.value;
18 18
     storage.set({ url: value }, function() {
19
-      message.innerHTML = ext.i18n.getMessage("URLChanged");
19
+      message.textContent = ext.i18n.getMessage("URLChanged");
20 20
     });
21 21
 });
22 22
 
23 23
 tokenInput.addEventListener("blur", function(e) {
24 24
     var value = this.value;
25 25
     storage.set({ token: value }, function() {
26
-      message.innerHTML = ext.i18n.getMessage("tokenSaved");
26
+      message.textContent = ext.i18n.getMessage("tokenSaved");
27 27
     });
28 28
 });
29 29
 
30 30
 document.querySelectorAll("[data-message]").forEach(function(elt) {
31
-   elt.innerHTML = ext.i18n.getMessage(elt.dataset.message);
31
+   elt.textContent = ext.i18n.getMessage(elt.dataset.message);
32 32
 });

+ 12
- 23
src/scripts/popup.js View File

@@ -17,33 +17,23 @@ storage.get('color', function(resp) {
17 17
   }
18 18
 });
19 19
 
20
-var template = (data) => {
21
-  return (`
22
-  <div class="site-description">
23
-    <h3 class="title">${data.title}</h3>
24
-    <p class="description">${data.description}</p>
25
-    <p class="image"><img src="${data.image}"></p>
26
-    <div>
27
-        <label for="comment">Comment:</label>
28
-        <textarea id="comment" name="comment"></textarea>
29
-    </div>
30
-    <a href="${data.url}" target="_blank" class="url">${data.url}</a>
31
-  </div>
32
-  <div class="action-container">
33
-    <button id="save-btn" class="btn btn-primary">Save</button>
34
-  </div>
35
-  `);
36
-};
37 20
 var renderMessage = (message) => {
38 21
   var displayContainer = document.getElementById("display-container");
39
-  displayContainer.innerHTML = `<p class='message'>${message}</p>`;
22
+  displayContainer.textContent = message;
40 23
 };
41 24
 
42 25
 var renderBookmark = (data) => {
43
-  var displayContainer = document.getElementById("display-container");
44
-  if(data) {
26
+  if (data) {
45 27
       page_data = data;
46
-      displayContainer.innerHTML = template(data);
28
+      document.querySelector("[data-template=title]").textContent = page_data.title;
29
+      document.querySelector("[data-template=description]").textContent = page_data.description;
30
+      if ("" !== img) {
31
+		  var img = document.createElement("image");
32
+		  img.src = page_data.image;
33
+		  document.querySelector("[data-template=image]").appendChild(img);
34
+	  }
35
+      document.querySelector("[data-template=url]").textContent = page_data.url;
36
+      document.querySelector("[data-template=url]").setAttribute("href", page_data.url);
47 37
   } else {
48 38
     renderMessage(ext.i18n.getMessage("cantExtractTitle"));
49 39
   }
@@ -70,8 +60,7 @@ popup.addEventListener("click", function(e) {
70 60
 
71 61
 var dataMessages = document.querySelectorAll("[data-message]");
72 62
 [].forEach.call(dataMessages, function(elt) {
73
-    console.log(elt.dataset.message);
74
-    elt.innerHTML = ext.i18n.getMessage(elt.dataset.message);
63
+    elt.textContent = ext.i18n.getMessage(elt.dataset.message);
75 64
 });
76 65
 
77 66
 var optionsLink = document.querySelector(".js-options");

Loading…
Cancel
Save