[feature] adding random accent colour options

Author: zombieFox

index.html

@@ -287,6 +287,26 @@ <h1 class="menu-header">Theme</h1>
 <inputid="control-layout-theme-random" class="control-layout-theme-random" type="checkbox" tabindex="1">
 <labelfor="control-layout-theme-random"><spanclass="label-icon"></span>Random Accent colour on load/refresh</label>
 </div>
+<divclass="radio-wrap form-indent-1">
+<inputid="control-layout-theme-style-any" class="control-layout-theme-style-any" type="radio" tabindex="1" name="control-layout-theme-style" value="any">
+<labelfor="control-layout-theme-style-any"><spanclass="label-icon"></span>Any colour</label>
+</div>
+<divclass="radio-wrap form-indent-1">
+<inputid="control-layout-theme-style-light" class="control-layout-theme-style-light" type="radio" tabindex="1" name="control-layout-theme-style" value="light">
+<labelfor="control-layout-theme-style-light"><spanclass="label-icon"></span>Light colours</label>
+</div>
+<divclass="radio-wrap form-indent-1">
+<inputid="control-layout-theme-style-dark" class="control-layout-theme-style-dark" type="radio" tabindex="1" name="control-layout-theme-style" value="dark">
+<labelfor="control-layout-theme-style-dark"><spanclass="label-icon"></span>Dark colours</label>
+</div>
+<divclass="radio-wrap form-indent-1">
+<inputid="control-layout-theme-style-pastel" class="control-layout-theme-style-pastel" type="radio" tabindex="1" name="control-layout-theme-style" value="pastel">
+<labelfor="control-layout-theme-style-pastel"><spanclass="label-icon"></span>Pastel colours</label>
+</div>
+<divclass="radio-wrap form-indent-1">
+<inputid="control-layout-theme-style-saturated" class="control-layout-theme-style-saturated" type="radio" tabindex="1" name="control-layout-theme-style" value="saturated">
+<labelfor="control-layout-theme-style-saturated"><spanclass="label-icon"></span>Saturated colours</label>
+</div>
 </div>
 </div>
 </div>

js/control.js

@@ -192,10 +192,22 @@ var control = (function(){
 helper.e(".control-header-search-engine-custom-url").disabled=true;
 };
 };
+var_theme=function(){
+if(state.get().layout.theme.random.active){
+helper.eA("input[name='control-layout-theme-style']").forEach(function(arrayItem,index){
+arrayItem.disabled=false;
+});
+}else{
+helper.eA("input[name='control-layout-theme-style']").forEach(function(arrayItem,index){
+arrayItem.disabled=true;
+});
+};
+};
 _edit();
 _date();
 _clock();
 _search();
+_theme();
 };
 
 var_bind=function(){
@@ -224,12 +236,23 @@ var control = (function(){
 },false);
 helper.e(".control-layout-theme-random").addEventListener("change",function(){
 state.change({
-path: "layout.theme.random",
+path: "layout.theme.random.active",
 value: this.checked
 });
 theme.render();
+dependents();
 data.save();
 },false);
+helper.eA("input[name='control-layout-theme-style']").forEach(function(arrayItem,index){
+arrayItem.addEventListener("change",function(){
+state.change({
+path: "layout.theme.random.style",
+value: this.value
+});
+render();
+data.save();
+},false);
+});
 helper.e(".control-link-new-tab").addEventListener("change",function(){
 state.change({
 path: "link.newTab",
@@ -492,7 +515,8 @@ var control = (function(){
 varupdate=function(){
 helper.e(".control-edit").checked=state.get().edit.active;
 helper.e(".control-layout-theme").value=helper.rgbToHex(state.get().layout.theme.current);
-helper.e(".control-layout-theme-random").checked=state.get().layout.theme.random;
+helper.e(".control-layout-theme-random").checked=state.get().layout.theme.random.active;
+helper.e(".control-layout-theme-style-"+state.get().layout.theme.random.style).checked=true;
 helper.e(".control-link-new-tab").value=state.get().link.style.newTab;
 helper.e(".control-link-style-"+state.get().link.style).checked=true;
 helper.e(".control-link-sort-"+state.get().link.sort).checked=true;

js/helper.js

@@ -84,21 +84,79 @@ var helper = (function(){
 };
 };
 
+varhslToRgb=function(hslObject){
+if(hslObject==undefined){
+returnnull;
+};
+
+varchroma=(1-Math.abs((2*hslObject.l)-1))*hslObject.s;
+varhuePrime=hslObject.h/60;
+varsecondComponent=chroma*(1-Math.abs((huePrime%2)-1));
+
+huePrime=Math.floor(huePrime);
+varred;
+vargreen;
+varblue;
+
+if(huePrime===0){
+red=chroma;
+green=secondComponent;
+blue=0;
+}elseif(huePrime===1){
+red=secondComponent;
+green=chroma;
+blue=0;
+}elseif(huePrime===2){
+red=0;
+green=chroma;
+blue=secondComponent;
+}elseif(huePrime===3){
+red=0;
+green=secondComponent;
+blue=chroma;
+}elseif(huePrime===4){
+red=secondComponent;
+green=0;
+blue=chroma;
+}elseif(huePrime===5){
+red=chroma;
+green=0;
+blue=secondComponent;
+};
+
+varlightnessAdjustment=hslObject.l-(chroma/2);
+red+=lightnessAdjustment;
+green+=lightnessAdjustment;
+blue+=lightnessAdjustment;
+
+varresult={
+r: Math.round(red*255),
+g: Math.round(green*255),
+b: Math.round(blue*255)
+};
+
+returnresult;
+};
+
 varhexToRgb=function(hex){
+if(hex==undefined){
+returnnull;
+};
 varresult=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
 if(result){
 result={
 r: parseInt(result[1],16),
 g: parseInt(result[2],16),
 b: parseInt(result[3],16)
 };
-}else{
-result=null;
-}
+};
 returnresult;
 };
 
 varrgbToHex=function(rgbObject){
+if(rgbObject==undefined){
+returnnull;
+};
 varcomponentToHex=function(hexPart){
 hexPart=hexPart.toString(16);
 if(hexPart.length==1){
@@ -312,6 +370,7 @@ var helper = (function(){
 applyOptions: applyOptions,
 hexToRgb: hexToRgb,
 rgbToHex: rgbToHex,
+hslToRgb: hslToRgb,
 makeNode: makeNode,
 setObject: setObject,
 getObject: getObject,

js/state.js

@@ -68,7 +68,10 @@ var state = (function(){
 g: 255,
 b: 0,
 },
-random: false
+random: {
+active: false,
+style: "any"
+}
 },
 },
 edit: {

js/theme.js

@@ -7,12 +7,53 @@ var theme = (function(){
 };
 
 varrandom=function(){
-if(state.get().layout.theme.random){
-varrandomColor={
-r: helper.randomNumber(0,255),
-g: helper.randomNumber(0,255),
-b: helper.randomNumber(0,255)
+if(state.get().layout.theme.random.active){
+varrandomVal=function(min,max){
+returnMath.floor(Math.random()*(max-min)+1)+min;
 };
+varcolor={
+any: function(){
+return{
+h: randomVal(0,360),
+s: randomVal(0,100),
+l: randomVal(0,100)
+};
+},
+light: function(){
+return{
+h: randomVal(0,360),
+s: randomVal(50,90),
+l: randomVal(50,90)
+};
+},
+dark: function(){
+return{
+h: randomVal(0,360),
+s: randomVal(10,50),
+l: randomVal(10,50)
+};
+},
+pastel: function(){
+return{
+h: randomVal(0,360),
+s: 100,
+l: 80
+};
+},
+saturated: function(){
+return{
+h: randomVal(0,360),
+s: 100,
+l: 50
+};
+}
+};
+varhsl=color[state.get().layout.theme.random.style]();
+varrandomColor=helper.hslToRgb({
+h: hsl.h,
+s: (hsl.s/100),
+l: (hsl.l/100)
+});
 state.change({
 path: "layout.theme.current",
 value: randomColor

js/update.js

@@ -32,6 +32,15 @@ var update = (function(){
 returndata;
 };
 
+var_update_230=function(data){
+data.state.layout.theme.random={
+active: data.state.layout.theme.random,
+style: "any"
+};
+data.version=2.30;
+returndata;
+};
+
 // var _update_300 = function(data){
 // data.version = 3.00;
 // return data;
@@ -50,6 +59,10 @@ var update = (function(){
 console.log("\trunning update",2.10);
 data=_update_210(data);
 };
+if(data.version<2.30){
+console.log("\trunning update",2.30);
+data=_update_230(data);
+};
 // if (data.version < 3.00){
 // console.log("\t# running update", 3.00);
 // data = _update_300(data);

js/version.js

@@ -1,7 +1,7 @@
 varversion=(function(){
 
 // version is normally bumped when the state needs changing or any new functionality is added
-varcurrent="2.2.0";
+varcurrent="2.3.0";
 
 varget=function(){
 varnumber=current.split(".");