LILiK
/
9gag-lilik
5
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

fixed update error on range. Fixed some bugs on table rendering. Added real settings. Fixed css bugs

master
edoardoo 9 years ago
parent
6e768a98d3
commit
ac35014075
2 changed files with 202 additions and 160 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +179
    -158
      preferences/preferences.js
  2. +23
    -2
      preferences/style.css

+ 179
- 158
preferences/preferences.js View File

@ -1,197 +1,218 @@
var settings = [
{
id: "1",
name: "Long Post Visualization",
description: "Select which way you prefer to display long posts",
type: "radio",
options: [ "Sidebar", "In place"]
},{
id: "2",
name: "Night Mode",
description: "Enable or disable night mode",
type: "checkbox"
},{
id: "3",
name: "Night Mode Starting Hour",
description: "in hours. Ex: 19",
type: "text"
},{
id: "4",
name: "Night Mode Ending Hour",
description: "in hours. Ex: 7",
type: "text"
},
];
// var settings = [
// {
// id: "1",
// name: "Message 1",
// description: "Lorem ipsum sit dolor amet",
// type: "checkbox"
// }, {
// id: "2",
// name: "Message 2",
// description: "Sim secutur iusit",
// type: "checkbox"
// }, {
// id: "3",
// name: "Message 3",
// description: "",
// type: "radio",
// options: [ "black", "blue"]
// }, {
// id: "4",
// name: "Message 4",
// description: "",
// type: "range",
// options: {
// min: "0",
// max: "100"
// }
// }, {
// id: "5",
// name: "Message 5",
// description: "",
// type: "dropdown",
// options: [ "test", "seconda voce"]
// }, {
// id: "6",
// name: "Message 6",
// description: "",
// type: "text"
// },
// ];
document.addEventListener('DOMContentLoaded', function(){
displaySettings();
addListeners();
getSettings();
displaySettings();
addListeners();
loadSettings();
});
function displaySettings(){
var tableSettings = document.getElementById("settings");
var tableBody = tableSettings.getElementsByTagName("tbody");
var newElement = "";
var tableSettings = document.getElementById("settings");
var tableBody = tableSettings.getElementsByTagName("tbody");
var newElement = "";
settings.forEach( function( setting ){
var type = "";
settings.forEach( function( setting ){
var type = "";
newElement += "<tr id='setting_"+setting.id+"' data-type='"+setting.type+"' class='setting'><td>"+setting.name+"</td><td>";
newElement += "<tr id='setting_"+setting.id+"' data-type='"+setting.type+"' class='setting'><td>"+setting.name+"<span class='description'>"+setting.description+"</span></td><td>";
switch ( setting.type ){
case "checkbox":
switch ( setting.type ){
case "checkbox":
newElement += "<input id='checkbox_"+setting.id+"' type='"+setting.type+"'>";
newElement += "<input id='checkbox_"+setting.id+"' type='"+setting.type+"'>";
break;
break;
case "radio":
setting.options.forEach( function( option ){
newElement += "<input type='"+setting.type+"' name='radio_"+setting.id+"' id='radio_"+setting.id+"_"+option+"' value='"+option+"'>";
newElement += "<label for='radio_"+setting.id+"_"+option+"' >"+option+"</label>";
case "radio":
setting.options.forEach( function( option ){
newElement += "<input type='"+setting.type+"' name='radio_"+setting.id+"' id='radio_"+setting.id+"_"+option+"' value='"+option+"'>";
newElement += "<label for='radio_"+setting.id+"_"+option+"' >"+option+"</label>";
});
});
break;
break;
case "range":
newElement += "<input type='"+setting.type+"' class='rangeSelector' id='range_"+setting.id+"' min='"+setting.options.min+"' max='"+setting.options.max+"' >";
newElement += "<label for='range_"+setting.id+"' id='range_value_"+setting.id+"' ></label>";
break;
case "range":
newElement += "<input type='"+setting.type+"' class='rangeSelector' id='range_"+setting.id+"' min='"+setting.options.min+"' max='"+setting.options.max+"' >";
newElement += "<label for='range_"+setting.id+"' id='range_value_"+setting.id+"' ></label>";
break;
case "text":
newElement += "<input type='"+setting.type+"'>";
case "text":
newElement += "<input type='"+setting.type+"'>";
break;
break;
case "dropdown":
newElement += "<select>";
setting.options.forEach( function( option ){
newElement += "<option value='"+option.replace(" ", "_")+"'>"+option+"</option>";
});
newElement += "</select>";
break;
}
case "dropdown":
newElement += "<select>";
setting.options.forEach( function( option ){
newElement += "<option value='"+option.replace(" ", "_")+"'>"+option+"</option>";
});
newElement += "</select>";
break;
}
newElement = newElement + "</td><tr>";
});
tableBody.innerHTML = newElement;
tableSettings.innerHTML = tableBody.innerHTML;
newElement = newElement + "</td></tr>";
});
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");
var settingsElement = document.getElementsByClassName("setting");
for (var i = settingsElement.length - 1; i >= 0; i--) {
settingsElement[i].addEventListener('change', saveSettings);
}
for (var i = settingsElement.length - 1; i >= 0; i--) {
settingsElement[i].addEventListener('change', saveSettings);
}
var rangeElements = document.getElementsByClassName("rangeSelector");
var rangeElements = document.getElementsByClassName("rangeSelector");
for (var i = rangeElements.length - 1; i >= 0; i--) {
rangeElements[i].addEventListener('change', updateRangeValueLabel);
};
for (var i = rangeElements.length - 1; i >= 0; i--) {
rangeElements[i].addEventListener('change', function( element ){
var labelIdNumber = this.id.split("_")[1];
updateRangeValueLabel( labelIdNumber, this.value);
});
};
}
//saves the data into storage
function saveSettings(){
var setting = this.id;
setting = setting.split("_")[1];
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;
chrome.storage.sync.set(
obj
, function(){
//callback function after saving the preferences
document.getElementById("bar").innerHTML = "Saved the preferences.";
});
var setting = this.id;
setting = setting.split("_")[1];
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;
chrome.storage.sync.set(
obj
, function(){
//callback function after saving the preferences
document.getElementById("bar").innerHTML = "Saved the preferences.";
});
}
//get the value stored in the storage and will be shown in the text box.
function getSettings( ){
chrome.storage.sync.get( null ,function(obj){
function loadSettings( ){
updateSettings(obj);
});
}
chrome.storage.sync.get( null ,function(obj){
function updateSettings( storedSettings ){
for( var settingId in storedSettings ){
settingId = String( settingId );
settingObject = document.getElementById( "setting_"+settingId );
type = settingObject.getAttribute('data-type');
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;
}
}
updateSettings(obj);
});
}
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;
function updateSettings( storedSettings ){
for( var settingId in storedSettings ){
settingId = String( settingId );
settingObject = document.getElementById( "setting_"+settingId );
type = settingObject.getAttribute('data-type');
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);
var settings = [
{
id: "1",
name: "Message 1",
type: "checkbox"
}, {
id: "2",
name: "Message 2",
type: "checkbox"
}, {
id: "3",
name: "Message 3",
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"
},
];
var label = document.getElementById("range_value_"+labelIdNumber);
label.innerHTML = value;
}

+ 23
- 2
preferences/style.css View File

@ -38,9 +38,30 @@ table tr:nth-child(2n+1){
background-color: #666;
}
table thead tr td{
table tr:nth-child(2n){
background-color: #444;
}
table .description{
font-size: 12px;
font-style: italic;
padding-left: 5px;
}
table > thead > tr > td{
background-color: #222;
}
table > thead > tr > td:first-child{
width: 70%;
}
table td:nth-child(2) > *:nth-child(odd){
float: left;
clear: left;
}
table td:nth-child(2) > *:nth-child(even){
float: left;
clear: none;
}
table td{
padding: 5px;
}
}

Write Preview
Loading…
Cancel
Save