diff --git a/preferences/preferences.js b/preferences/preferences.js
index c6aa6fd..9d6b1cf 100644
--- a/preferences/preferences.js
+++ b/preferences/preferences.js
@@ -1,8 +1,103 @@
+document.addEventListener('DOMContentLoaded', function(){
+ displaySettings();
+ addListeners();
+ getSettings();
+});
+
+function displaySettings(){
+ var tableSettings = document.getElementById("settings");
+ var tableBody = tableSettings.getElementsByTagName("tbody");
+ var newElement = "";
+
+ settings.forEach( function( setting ){
+ var type = "";
+
+ newElement += "
"+setting.name+" | ";
+
+ switch ( setting.type ){
+ case "checkbox":
+
+ newElement += "";
+
+ break;
+
+ case "radio":
+ setting.options.forEach( function( option ){
+ newElement += "";
+ newElement += "";
+
+ });
+
+ break;
+
+ case "range":
+ newElement += "";
+ newElement += "";
+ break;
+
+ case "text":
+ newElement += "";
+
+ break;
+
+ case "dropdown":
+ newElement += "";
+ break;
+ }
+
+
+ newElement = newElement + " |
";
+
+ });
+
+ tableBody.innerHTML = newElement;
+ tableSettings.innerHTML = tableBody.innerHTML;
+
+}
+// function loadSettings(){
+// var settingsList = document.getElementsByClassName("setting");
+// for (var i = settingsList.length - 1; i >= 0; i--) {
+// var settingId = String( settingsList[i].id.split("_")[1] );
+// getSetting();
+// };
+// }
+
+function addListeners(){
+ var settingsElement = document.getElementsByClassName("setting");
+
+ for (var i = settingsElement.length - 1; i >= 0; i--) {
+ settingsElement[i].addEventListener('change', saveSettings);
+ }
+
+ var rangeElements = document.getElementsByClassName("rangeSelector");
+
+ for (var i = rangeElements.length - 1; i >= 0; i--) {
+ rangeElements[i].addEventListener('change', updateRangeValueLabel);
+ };
+}
+
//saves the data into storage
function saveSettings(){
var setting = this.id;
setting = setting.split("_")[1];
- var value = this.childNodes[1].childNodes[0].checked;
+ var type = this.getAttribute('data-type');
+ switch (type){
+ case "checkbox":
+ var value = this.childNodes[1].childNodes[0].checked;
+ break;
+ case "radio":
+ var value = document.querySelector('input[name = "radio_'+setting+'"]:checked').value;
+ break;
+ case "text":
+ case "range":
+ case "dropdown":
+ var value = this.childNodes[1].childNodes[0].value;
+ break;
+ }
var obj = {};
obj[setting] = value;
@@ -17,36 +112,59 @@ function saveSettings(){
}
//get the value stored in the storage and will be shown in the text box.
-function getSetting( settingId ){
- chrome.storage.sync.get( settingId ,function(obj){
+function getSettings( ){
+
+ chrome.storage.sync.get( null ,function(obj){
- document.getElementById( "setting_" + settingId ).childNodes[1].childNodes[0].checked = obj[settingId];
- // console.dir( obj[settingId]);
+ updateSettings(obj);
+
});
}
-//calling the getSetting() function to show the saved message when opening from 2nd time.
-document.addEventListener('DOMContentLoaded', function(){
- loadSettings();
- addListener();
-
-});
-//binding change event to text box to call function to save data
-function addListener(){
- var settingsElement = document.getElementsByClassName("setting");
+function updateSettings( storedSettings ){
+ for( var settingId in storedSettings ){
+ settingId = String( settingId );
+ settingObject = document.getElementById( "setting_"+settingId );
+ type = settingObject.getAttribute('data-type');
- for( var i = 0 ; i < settingsElement.length; i++){
- settingsElement[i].addEventListener('change', saveSettings);
+ switch( type ){
+ case ( "checkbox" ):
+ settingObject.childNodes[1].childNodes[0].checked = storedSettings[settingId];
+ break;
+ case ( "radio" ):
+ document.getElementById( "radio_"+ settingId +"_"+ storedSettings[settingId] ).checked = true;
+ break;
+ case "range":
+ settingObject.childNodes[1].childNodes[0].value = storedSettings[settingId];
+ updateRangeValueLabel( settingId , storedSettings[settingId] );
+ break;
+ case "text":
+ case "dropdown":
+ settingObject.childNodes[1].childNodes[0].value = storedSettings[settingId];
+ break;
+ }
}
-
}
+function updateRangeValueLabel( labelIdNumber, value ){
+ // console.log(this.value);
+ if( typeof labelIdNumber === "undefined" ){
+ var labelIdNumber = this.id.split("_")[1];
+ }
+ if( value ){
+ this.value = value;
+ }
+ var label = document.getElementById("range_value_"+labelIdNumber);
+ label.innerHTML = this.value;
+}
+
+
var settings = [
{
id: "1",
- name: "Message",
+ name: "Message 1",
type: "checkbox"
}, {
id: "2",
@@ -55,19 +173,25 @@ var settings = [
}, {
id: "3",
name: "Message 3",
- type: "checkbox"
+ type: "radio",
+ options: [ "black", "blue"]
+ }, {
+ id: "4",
+ name: "Message 4",
+ type: "range",
+ options: {
+ min: "0",
+ max: "100"
+ }
+ }, {
+ id: "5",
+ name: "Message 5",
+ type: "dropdown",
+ options: [ "test", "seconda voce"]
+ }, {
+ id: "6",
+ name: "Message 6",
+ type: "text"
},
];
-function loadSettings(){
- var table = document.getElementById("settings");
-
- settings.forEach( function( setting ){
- var type = "";
- table.innerHTML = table.innerHTML + "
"+setting.name+" | |
";
- getSetting( setting.id );
- });
-
-}
-
-