#40 - Added pm-toggle component

Privacy-Managers · Oct 11, 2019 · 061d26c · 061d26c
1 parent 123f41d
commit 061d26c
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 37 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,7 @@ privacy-manager.zip
 .DS_Store
 package-lock.json
 node_modules
-dist
+dist
+src/css/pm-tab-panel.css
+src/img
+src/src/components.js
diff --git a/src/js/ui/common.js b/src/js/ui/common.js
@@ -48,9 +48,6 @@ const {registerActionListener} = require("./actionListener");
     });
 
     // Settings list localization
-    var content = Elem("#settings-list").content;
-    content.querySelector("#btn-on-label").textContent = getMsg("on");
-    content.querySelector("#btn-off-label").textContent = getMsg("off");
   }, false);
 })();
 

diff --git a/src/js/ui/components/settingList.js b/src/js/ui/components/settingList.js
@@ -17,23 +17,19 @@ const {additionalPermission, getStorage, setStorage} = require("../../common");
  */ 
 function addSettingItem(parent, dataObj, type, callback)
 {
-  var content = Elem("#settings-list").content;
-  var accessor = dataObj.dataset.access;
-  content.querySelector("label").textContent = dataObj.text;
-  content.querySelector("[data-dialog='setting-info']").title =
-    getMsg(dataObj.dataset.access + "_desc");
+  const content = Elem("#settings-list").content;
+  const listElem = document.importNode(content, true);
+  const accessor = dataObj.dataset.access;
+  const pmToggle = listElem.querySelector("pm-toggle");
+  pmToggle.setAttribute("text", dataObj.text);
+  pmToggle.setAttribute("description", getMsg(dataObj.dataset.access + "_desc"));
 
-  var listElem = content.querySelector("li");
-  var datasetObj = dataObj.dataset;
+  const datasetObj = dataObj.dataset;
 
-  for (var name in datasetObj)
-    listElem.dataset[name] = datasetObj[name];
+  for (const name in datasetObj)
+    pmToggle.dataset[name] = datasetObj[name];
 
-  var node = document.importNode(content, true);
-  parent.appendChild(node);
-
-  var settingItem = Elem("[data-access='" + accessor + "']", parent);
-  var settingButton = Elem("button[role='checkbox']", settingItem);
+  parent.appendChild(listElem);
 
   switch (type)
   {
@@ -42,9 +38,9 @@ function addSettingItem(parent, dataObj, type, callback)
 
       privacyObject.get({}, function(details)
       {
-        _updateSettingButton(settingItem, details.value);
+        _updateSettingButton(pmToggle, details.value);
       });
-      settingButton.addEventListener("click", function()
+      pmToggle.addEventListener("change", function()
       {
         privacyObject.get({}, function(details)
         {
@@ -55,7 +51,7 @@ function addSettingItem(parent, dataObj, type, callback)
             {
               if (chrome.runtime.lastError != undefined)
               {
-                var message = chrome.runtime.lastError.message;
+                const message = chrome.runtime.lastError.message;
                 if (message ==
                   "Can't modify regular settings from an incognito context.")
                 {
@@ -89,11 +85,11 @@ function addSettingItem(parent, dataObj, type, callback)
           return;
 
         var state = settingList[accessor] == true;
-        _updateSettingButton(settingItem, state);
+        _updateSettingButton(pmToggle, state);
         if (callback)
           callback(state);
       });
-      settingButton.addEventListener("click", function()
+      pmToggle.addEventListener("change", function()
       {
         getStorage("settingList", function(data)
         {
@@ -120,7 +116,7 @@ function addSettingItem(parent, dataObj, type, callback)
         _updateSettingButton(accessor, result);
       });
 
-      settingButton.addEventListener("click", function()
+      pmToggle.addEventListener("click", function()
       {
         chrome.permissions.contains(additionalPermission, function(result)
         {
@@ -182,7 +178,7 @@ function _updateSettingButton(setting, state)
   }
   else
   {
-    Elem("button[role='checkbox']", setting).setAttribute("aria-checked", state);
+    setting.setEnabled(state);
   }
 }
 

diff --git a/src/popup.html b/src/popup.html
@@ -29,18 +29,8 @@
 	<body>
 		<template id="settings-list">
 			<li>
-				<div data-key-action="open-dialog"
-							data-action="open-dialog"
-							data-dialog="setting-info"
-              data-info="true"
-							tabindex="0">
-							<label></label>
-							<button class="infoIcon" tabindex="-1"></button>
-						</div>
-						<button role="checkbox" aria-checked="false">
-							<span id="btn-on-label"></span>
-							<span id="btn-off-label"></span>
-						</button>
+				<pm-toggle text="My text" description="Description of the element goes here">
+					</pm-toggle>
 			</li>
     </template>
 		<div id="main">