User:Ember314/style.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/***
 * 
 * common.css is lame, this is so much better
 * 
 * work in progress
 * /

 /*jshint esversion:6 */
$('body').prepend("<script>function changeg(select,val){if(select==1){ localStorage.setItem('mainColor', val)};	document.body.style.color = localStorage.getItem('mainColor'); document.getElementById('colorPick').value = standardize_color(localStorage.getItem('mainColor'))}</script>");

//1 is color
const COLORS =['red','orange','yellow', 'green','blue','indigo','black']

const FONTS={
	'Times New Roman':{
		'family':'serif'
	},
		'Georgia':{
		'family':'serif'
	},
		'Garamond':{
		'family':'serif'
	},
		'Arial':{
		'family':'Sans-serif'
	},
		'Verdana':{
		'family':'Sans-serif'
	},
		'Helvetica':{
		'family':'Sans-serif'
	},
		'Courier New':{
		'family':'Monospace'
	},
		'Lucida Console':{
		'family':'Monospace'
	},
		'Monaco':{
		'family':'Monospace'
	},
		'Brush Script MT':{
		'family':'Cursive'
	},
		'Lucida Handwriting':{
		'family':'Cursive'
	},
		'Copperplate':{
		'family':'Fantasy'
	},
		'Papyrus':{
		'family':'Fantasy'
	},
}

const FONT_LIST = Object.getOwnPropertyNames(FONTS)
$('body').prepend("<div id='styleTab' class='intab'><div id='color' class='box intab'><input id='colorPick' type='color' onchange='changeFontStyle(2,this)'></input></div><div id='idk' class='box intab'><p class='intab'>font</p><select id='dropdown' class'intab' onchange='changeFontStyle (1,this);'></select></div><div id='font' class='box intab'><button id='buton' class='intab'>useless button :(</button></div></div>");

$('body').prepend('<style>#styleTab{flex-direction:row;display:flex; flex-wrap: nowrap;justify-content:center;position: fixed;bottom: 0;height: 100px;width: 500px; z-index: 1000000;pointser-events: none; overflow: auto; background-color: #f8f9fa; border-top-right-radius:15px; border-style: solid; border-width: 1px 1px 0px 0px ;  border-color: #a2a9b1;}</style>');
$('body').prepend('<style>#color{ order:1;flex-wrap:wrap;}#idk{order:2;}#font{order:3;flex-wrap:wrap;}</style>');
$('body').prepend('<style>.box{background-color:#f8f9fa;display:flex; flex-grow:1;justify-content:center;flex-direction:column;align-content:center;}</style>');
$('body').prepend('<style>.intab{opacity:0.5;transition: opacity 0.5s;} .intab:hover{opacity:1;transition: opacity 0.5s;;}}</style>');



const colour = document.getElementById("color");
for(var i=0; i < COLORS.length; i++){
	colour.innerHTML+="<button id='"+COLORS[i]+"Button' class='intab' onclick='changeg(1,\""+ COLORS[i] + "\")'>"+COLORS[i]+"</button>"
		$('body').append("<style>#"+COLORS[i]+"Button{background-color:"+COLORS[i]+"}</style>");
}

var select = document.getElementById("dropdown");

for(var i = 0; i < FONT_LIST.length; i++) {
    var opt = FONT_LIST[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}

        var changeFontStyle = function (type,val) {//1 is font, 2 is color
        if(type==1){
                	localStorage.setItem('mainFont',val.value)	
            document.body.style.fontFamily = localStorage.getItem('mainFont')		
        }        if(type==2){
                	localStorage.setItem('mainColor',val.value)	
            document.body.style.color = localStorage.getItem('mainColor')		
            	document.getElementById('colorPick').value = localStorage.getItem('mainColor')
        }


        }
        
        if(localStorage.getItem('mainColor')!=null){
	var colorr = localStorage.getItem('mainColor');
document.body.style.color = colorr
if(document.getElementById('colorPick').value){
	document.getElementById('colorPick').value = standardize_color(colorr)
}else{
	document.getElementById('colorPick').value = colorr
}
}if(localStorage.getItem('mainFont')!=null){
document.body.style.fontFamily = localStorage.getItem('mainFont')	
document.body.getElementById(dropdown).value = localStorage.getItem('mainFont')
}
function standardize_color(str){
    var ctx = document.createElement("canvas").getContext("2d");
    ctx.fillStyle = str;
    return ctx.fillStyle;
}