Started adding options to configure websites from settings.

This commit is contained in:
Tamius Han 2017-03-02 20:06:53 +01:00
parent e36689e708
commit 486ca08e89
3 changed files with 306 additions and 16 deletions

View File

@ -208,6 +208,8 @@ if(usebrowser == "chrome"){
var UW_SITES = {
youtube: {
enabled: true,
type: "official",
urlRules: ["youtu"],
player: {
name: "movie_player",
@ -219,10 +221,23 @@ var UW_SITES = {
name: "ytp-right-controls",
isClass: true,
insertStrat: "prepend",
}
},
autoar_imdb: false
},
netflix: {
urlRules: ["netflix"]
enabled: true,
type: "official",
urlRules: ["netflix"],
player: {
name: "placeholder",
isClass: true,
},
uiParent: {
name: "placeholder",
isClass: true,
insertStrat: "append"
},
autoar_imdb: true
}
}
@ -390,7 +405,7 @@ function init(force_reload){
// after messing with CSS.
var ui_anchor = document.getElementById("uw_ui_anchor");
// if(force_reload && ui_anchor)
// ui_anchor.parentNode.remove(ui_anchor);uf
// ui_anchor.parentNode.remove(ui_anchor);
var uwcss = document.getElementsByClassName("uw_css");
while(uwcss && uwcss.length > 0)
uwcss[0].parentNode.removeChild(uwcss[0]);
@ -883,14 +898,14 @@ function extsetup_siterules(opt){
// else
// var obj = opt[0];
// if(obj.ultrawidify_siterules === undefined){
// if(debugmsg)
// console.log("uw::extsetup_siterules | site url rules missing from storage. Setting defaults.");
// browser.storage.local.set({ultrawidify_siterules: UW_SITES});
// }
// else{
// UW_SITES = obj.ultrawidify_siterules;
// }
if(obj.ultrawidify_siterules === undefined){
if(debugmsg)
console.log("uw::extsetup_siterules | site url rules missing from storage. Setting defaults.");
browser.storage.local.set({ultrawidify_siterules: UW_SITES});
}
else{
UW_SITES = obj.ultrawidify_siterules;
}
if(debugmsg)
console.log("uw::extsetup_siterules | UW_SITES:",UW_SITES,"current site:",SITE);

View File

@ -52,6 +52,10 @@
h2{
font-size: 2.2em;
}
.sites_header{
font-size: 1.6em;
color: #ff9;
}
.content{
display: inline-block;
width: 52em;
@ -162,6 +166,50 @@
background-color: rgba(0,0,0,0.66);
color: #ffc;
height: 1.7em;
}optionsoptions
Shortcuts
About
Official
Shortcuts
About
Official
/** site options css **/
.site_name {
padding-left: 1em;
padding-bottom: 0.3em;
color: #fff;
font-size: 1.1em;
height: 13em !important;
}
.site_details {
font-size: 0.8em;
}
.site_title_ebox {
width: 10em !important;
font-size: 1.5em !important;
background-color: rgba(0,0,0,0) !important;
margin-left: 0px !important;
border: 0px !important;
color: #ffc !important;
}
.details_ebox {
width: 12em !important;
background-color: rgba(0,0,0,0) !important;
border: 0px !important;
color: #ffc !important;
margin-left: 0em !important;
}
.details_ebox:disabled {
color: #aaa !important;
}
.inline_button {
display: inline-block;
margin-top: -1.42em;
}
.inline_button:hover {
color: #fff;
}
</style>
@ -177,11 +225,15 @@
<div class="tabline center">
<div class="content left">
<div id="tab_general_settings" class="block tab tab-selected">General settings</div>
<div id="tab_sites" class="block tab">Site options</div>
<div id="tab_shortcuts" class="block tab">Shortcuts</div>
<div id="tab_about" class="block tab">About</div>
</div>
</div>
</header>
<div id="general_settings">
<div class="content left">
<div class="uw_options_line">
@ -200,6 +252,12 @@
</div>
</div>
<div id="uw_sites" class="hide">
<div id="uw_sites_body" class="content left">
</div>
</div>
<div id="uw_shortcuts" class="hide">
<div class="content left">
<form>

View File

@ -2,10 +2,10 @@ var browser_autodetect = true;
var usebrowser = "chrome";
if(browser_autodetect){
if(typeof browser === "undefined"){ // This means we're probably not on Firefox, but on nazi chrome
if(chrome){ // in glorious Firefox, 'typeof browser === "undefined"' spaghetti would
browser = chrome; // only be if (!browser) gg
usebrowser = "chrome"; // google chrome is really the untermensch browser
if(typeof browser === "undefined"){
if(chrome){
browser = chrome;
usebrowser = "chrome";
}
}
else
@ -37,16 +37,24 @@ function showGeneralSettings(){
document.getElementById("tab_general_settings").classList.add("tab-selected");
}
function showSites(){
clearPage();
document.getElementById("uw_sites").classList.remove("hide");
document.getElementById("tab_sites").classList.add("tab-selected");
}
function clearPage(){
// Hide you sections
document.getElementById("uw_shortcuts").classList.add("hide");
document.getElementById("about").classList.add("hide");
document.getElementById("general_settings").classList.add("hide");
document.getElementById("uw_sites").classList.add("hide");
// Hide you tabs
document.getElementById("tab_shortcuts").classList.remove("tab-selected");
document.getElementById("tab_about").classList.remove("tab-selected");
document.getElementById("tab_general_settings").classList.remove("tab-selected");
document.getElementById("tab_sites").classList.remove("tab-selected");
}
@ -190,8 +198,12 @@ function printerr(err){
}
function gotopts(opts){
if(!opts.ultrawidify_keybinds){
console.log("ultrawidify keybinds are undefined. the fuck?",opts);
return;
}
var KEYBINDS = Object.keys(opts.ultrawidify_keybinds).map(function (key) { return opts.ultrawidify_keybinds[key];});
// google chrome is really the untermensch browse // google chrome is really the untermensch browserr
var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43", "autoar"];
for(var i = 0; i < actions.length; i++){
document.querySelector("#" + actions[i] + "_letter").classList.remove("dup_keybinds");
@ -233,11 +245,215 @@ function gotui(opts){
}
}
function gotsites(opts){
var list = document.getElementById("uw_sites_list");
if(list)
list.remove();
var anchor = document.getElementById("uw_sites_body");
list = document.createElement("div");
list.id = "uw_sites_list";
list.className = "uw_sites";
anchor.appendChild(list);
uw_sites = opts.ultrawidify_siterules;
console.log("opts",opts);
for (type in {"official":1,"non-official":1,"custom":1} ) { // unparalleled laziness!
var head = document.createElement("div");
head.className = "sites_header";
head.textContent = type.charAt(0).toUpperCase() + type.slice(1);
var category_desc = document.createElement("div");
if(type == "official"){
category_desc.textContent = "These sites are officially supported by the extension developer. These sites should always work.";
}
else if(type == "non-official"){
category_desc.textContent = "Sites in this category have been contribued by third parties. These sites will probably work, but the developer couldn't test whether they work or not.";
}
else if(type == "custom"){
category_desc.textContent = "In this section, you can define rules for sites that aren't supported either officially or non-officially. See [todo: link] contributing for details. If you define a custom site, please consider sharing configuration on github (see contributing for details).";
}
list.append(head);
list.append(category_desc);
var category_counter;
for (site in uw_sites){
category_counter = 0;
if(uw_sites[site].type == type){
var entry = document.createElement("div");
var displayedInfo = document.createElement("div");
displayedInfo.id = site + "_display";
displayedInfo.className = "uw_options_line site_details";
var siteTitle = document.createElement("div");
siteTitle.className = "site_name";
{
var sitecb = mkcb(site, uw_sites[site].enabled, true);
var editTitle = mkebox(site, site)
editTitle.className = "site_title_ebox";
siteTitle.append(sitecb);
siteTitle.append(editTitle);
var editBtn = document.createElement("div");
editBtn.textContent = "« edit »";
editBtn.className = "inline_button";
siteTitle.append(editBtn);
}
var urlRules = document.createElement("div");
{
var urlRulesLabel = document.createElement("span");
urlRulesLabel.textContent = "URL rule: ";
urlRulesEbox = mkebox(site, uw_sites[site].urlRules[0]);
urlRules.append(urlRulesLabel);
urlRules.append(urlRulesEbox);
}
var playerElement = document.createElement("div");
{
var playerName = document.createElement("div");
var playerNameLabel = document.createElement("span");
var playerNameEbox = mkebox(site);
playerNameLabel.textContent = "id of the player container:";
playerNameEbox = mkebox(site, uw_sites[site].player.name);
playerName.append(playerNameLabel);
playerName.append(playerNameEbox);
var playerClass = document.createElement("div");
var pcb = document.createElement("input");
pcb.type = "checkbox";
pcb.name = site + "_pccb_name";
pcb.id = site + "_pccb_id";
pcb.checked = uw_sites[site].player.isClass;
pcb.disabled = true;
var pcblabel = document.createElement("span");
pcblabel.textContent = " Name of the player container is a class";
playerClass.append(pcb);
playerClass.append(pcblabel);
playerElement.append(playerName);
playerElement.append(playerClass);
}
var iframe_playerName = document.createElement("div");
var ipn_label = document.createElement("span");
ipn_label.textContent = "id of the player container when in an iframe:";
ipn_ebox = mkebox(site, uw_sites[site].iframe ? uw_sites[site].iframe.name : "");
iframe_playerName.append(ipn_label);
iframe_playerName.append(ipn_ebox);
var iframe_playerClass = document.createElement("div");
var ipc_label = document.createElement("span");
ipc_label.textContent = " Name of the player container is a class";
var ipc_cb = mkcb(site, uw_sites[site].iframe ? uw_sites[site].iframe.isClass : false);
iframe_playerClass.append(ipc_cb);
iframe_playerClass.append(ipc_label);
var imdbar = document.createElement("div");
var imdbar_cb = mkcb(site, uw_sites[site].autoar_imdb);
var imdbar_label = document.createElement("span");
imdbar_label.textContent = " This site supports automatic aspect ratio detection";
imdbar.append(imdbar_cb);
imdbar.append(imdbar_label);
var imdbar_title = document.createElement("div");
var it_label = document.createElement("span");
it_label.textContent = "id of the element containing video title:";
it_ebox = mkebox(site, uw_sites[site].iframe ? uw_sites[site].iframe.name : "");
imdbar_title.append(it_label);
imdbar_title.append(it_ebox);
var imdbar_class = document.createElement("div");
var ic_label = document.createElement("span");
ic_label.textContent = " Name of the title container is a class";
var ic_cb = mkcb(site, uw_sites[site].iframe ? uw_sites[site].iframe.isClass : false);
imdbar_class.append(ic_cb);
imdbar_class.append(ic_label);
displayedInfo.append(siteTitle);
displayedInfo.append(urlRules);
displayedInfo.append(playerElement);
displayedInfo.append(iframe_playerName);
displayedInfo.append(iframe_playerClass);
displayedInfo.append(imdbar);
displayedInfo.append(imdbar_title);
displayedInfo.append(imdbar_class);
entry.append(displayedInfo);
list.append(entry);
category_counter++;
}
}
if(! category_counter){
var noEntriesMsg = document.createElement("div");
noEntriesMsg.textContent = "There's no entries in this category yet";
noEntriesMsg.classList = "red";
list.append(noEntriesMsg);
}
}
}
function mkebox(site, value){
var ebox = document.createElement("input");
ebox.className = "site_details details_ebox " + site + "_ebox",
ebox.type = "text";
ebox.value = value;
ebox.disabled = true;
return ebox;
}
function mkcb(site, checked, forceEnable){
var cb = document.createElement("input");
cb.type = "checkbox";
cb.name = site + "_cb_name";
cb.id = site + "_cb_id";
cb.checked = checked;
if(!forceEnable)
cb.disabled = true;
return cb;
}
function loadopts(){
getopt("ultrawidify_keybinds", gotopts);
// getopt("ultrawidify_autoar", gotar)
getopt("ultrawidify_ui", gotui);
getopt("ultrawidify_siterules", gotsites);
// We build ui for 'site options' here
// buildSites();
}
@ -248,6 +464,7 @@ document.addEventListener("DOMContentLoaded", loadopts);
document.querySelector("#tab_shortcuts").addEventListener("click", showShortcuts);
document.querySelector("#tab_about").addEventListener("click", showAbout);
document.querySelector("#tab_general_settings").addEventListener("click",showGeneralSettings);
document.querySelector("#tab_sites").addEventListener("click", showSites);
document.querySelector("#kb_save").addEventListener("click", saveopts);
document.querySelector("#kb_cancel").addEventListener("click",loadopts);