You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
254 lines
6.1 KiB
254 lines
6.1 KiB
var settings = [
|
|
{
|
|
id: "long_post_visualization_enabler",
|
|
name: "Long Post Visualization Mod Enabler",
|
|
description: "Enable long post mod?",
|
|
type: "checkbox",
|
|
|
|
},{
|
|
id: "long_post_visualization",
|
|
name: "Long Post Visualization",
|
|
description: "Select which way you prefer to display long posts",
|
|
type: "radio",
|
|
options: [ "Sidebar" ]
|
|
},{
|
|
id: "night_mode_enabler",
|
|
name: "Night Mode",
|
|
description: "Enable or disable night mode",
|
|
type: "checkbox"
|
|
},{
|
|
id: "night_mode_starting_hour",
|
|
name: "Night Mode Starting Hour",
|
|
description: "in hours. Ex: 19",
|
|
type: "range",
|
|
options: {
|
|
min: "0",
|
|
max: "24"
|
|
}
|
|
},{
|
|
id: "night_mode_ending_hour",
|
|
name: "Night Mode Ending Hour",
|
|
description: "in hours. Ex: 7",
|
|
type: "range",
|
|
options: {
|
|
min: "0",
|
|
max: "24"
|
|
}
|
|
},{
|
|
id: "video_controls_enabler",
|
|
name: "Video controls",
|
|
description: "Show controls on gif posts to pause or seeking gif?",
|
|
type: "checkbox",
|
|
},{
|
|
id: "nsfw_enabler",
|
|
name: "Show NSFW",
|
|
description: "Show NSFW posts without login?",
|
|
type: "checkbox",
|
|
},{
|
|
id: "disable_wakeup_enabler",
|
|
name: "Wakeup pop-up",
|
|
description: "Disable wakeup pop-up?",
|
|
type: "checkbox",
|
|
}
|
|
|
|
];
|
|
|
|
// 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();
|
|
loadSettings();
|
|
});
|
|
|
|
function displaySettings(){
|
|
var tableSettings = document.getElementById("settings");
|
|
var tableBody = tableSettings.getElementsByTagName("tbody");
|
|
var newElement = "";
|
|
|
|
settings.forEach( function( setting ){
|
|
var type = "";
|
|
|
|
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":
|
|
|
|
newElement += "<input id='checkbox_"+setting.id+"' type='"+setting.type+"'>";
|
|
|
|
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>";
|
|
|
|
});
|
|
|
|
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+"'>";
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
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', 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 = "Preferences saved, refresh 9gag pages to enable new preferences.";
|
|
|
|
});
|
|
|
|
}
|
|
|
|
//get the value stored in the storage and will be shown in the text box.
|
|
function loadSettings( ){
|
|
|
|
chrome.storage.sync.get( null ,function(obj){
|
|
|
|
updateSettings(obj);
|
|
|
|
});
|
|
}
|
|
|
|
function updateSettings( storedSettings ){
|
|
|
|
for( var settingId in storedSettings ){
|
|
settingId = String( settingId );
|
|
|
|
settingObject = document.getElementById( "setting_"+settingId );
|
|
if( typeof settingObject != "undefined" && settingObject != null){
|
|
|
|
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 label = document.getElementById("range_value_"+labelIdNumber);
|
|
label.innerHTML = value;
|
|
}
|
|
|