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.
977 lines
39 KiB
977 lines
39 KiB
//
|
|
// Theme Customizer v2.0.0 - from sg-app.js and sg-web.js
|
|
//
|
|
|
|
var changed = Array();
|
|
var TC = function() {
|
|
this.lessVars = {};
|
|
this.nestedLoopText = '';
|
|
this.nestedIdentation = '';
|
|
this.data = '';
|
|
this.cssValidator = true;
|
|
this.cssLineError = 0;
|
|
this.cssCustomText = '';
|
|
};
|
|
|
|
TC.prototype = {
|
|
constructor: TC,
|
|
// check the attributes that contains what we are looking for
|
|
checkAttribs: function(node, key) {
|
|
if ($.isArray(node.attributes)) {
|
|
for (var i = 0; i < node.attributes.length; i++) { this.checkForDupes(node.attributes[i], key); }
|
|
} else {
|
|
for (i in node.attributes) { this.checkForDupes(node.attributes[i], key); }
|
|
}
|
|
if (node.nested) this.checkAttribs(node.nested, key);
|
|
},
|
|
|
|
// check for duplicates
|
|
checkForDupes: function(node, key) {
|
|
// colors
|
|
var reg = node.match(/(#[A-Fa-f0-9]+)/);
|
|
if (reg && node.indexOf('\9') === -1) {
|
|
if (! this.lessVars.colors[reg[0]]) this.lessVars.colors[reg[0]] = [];
|
|
this.lessVars.colors[reg[0]].push(key);
|
|
}
|
|
|
|
// fonts
|
|
reg = node.match(/font-family:\s(.+)/);
|
|
if (reg && node.indexOf('inherit') === -1) {
|
|
if (! this.lessVars.fonts[reg[1]]) this.lessVars.fonts[reg[1]] = [];
|
|
this.lessVars.fonts[reg[1]].push(key);
|
|
}
|
|
|
|
// size
|
|
reg = node.match(/.*\s(-?[0-9]+px)$/);
|
|
if (reg) {
|
|
if (! this.lessVars.size[' ' + reg[1]]) this.lessVars.size[' ' + reg[1]] = [];
|
|
this.lessVars.size[' ' + reg[1]].push(key);
|
|
}
|
|
},
|
|
|
|
// check the results after compiling duplicates
|
|
checkResults: function(node, json, name, min) {
|
|
var var_count = 0;
|
|
var var_name = '', j;
|
|
for (var k in json) {
|
|
if (json.hasOwnProperty(k) && json[k].length >= min) {
|
|
var_count++;
|
|
var_name = name + var_count;
|
|
this.data += var_name + ': ' + k + ';\n';
|
|
for (var i = 0; i < json[k].length; i++) {
|
|
if ($.isArray(node[json[k][i]].attributes)) {
|
|
for (j = 0; j < node[json[k][i]].attributes.length; j++) {
|
|
node[json[k][i]].attributes[j] = node[json[k][i]].attributes[j].replace(k, var_name);
|
|
}
|
|
} else {
|
|
for (j in node[json[k][i]].attributes) {
|
|
node[json[k][i]].attributes[j] = node[json[k][i]].attributes[j].replace(k, var_name);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// main checking function that uses the 3 above
|
|
checkForVars: function(node, log) {
|
|
if (typeof log === "undefined") log = false;
|
|
|
|
this.lessVars.colors = {};
|
|
this.lessVars.fonts = {};
|
|
this.lessVars.size = {};
|
|
this.lessVars.named = {};
|
|
|
|
for (var k in node) {
|
|
if ($.inArray(node[k].selector,changed) != -1) {
|
|
if (node.hasOwnProperty(k) && node[k].selector && node[k].attributes) {
|
|
if (node[k].var) {
|
|
// names vars take first attribute value
|
|
this.lessVars.named[node[k].var] = node[k].attributes[Object.keys(node[k].attributes)[0]];
|
|
this.data += node[k].var + ': ' + node[k].attributes[Object.keys(node[k].attributes)[0]] + ';\n';
|
|
} else {
|
|
this.checkAttribs(node[k], k);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
this.checkResults(node, this.lessVars.colors, '@color', 5);
|
|
this.checkResults(node, this.lessVars.fonts, '@font', 3);
|
|
this.checkResults(node, this.lessVars.size, '@size', 10);
|
|
if (log) console.log(JSON.stringify(this.lessVars, null, 2));
|
|
},
|
|
|
|
// loop through the nested nodes
|
|
nestLoop: function(node, tab) {
|
|
if (typeof tab === "undefined") tab = true;
|
|
|
|
for (var k in node.nested) {
|
|
if (tab) this.nestedIdentation += ' ';
|
|
if (node.nested.hasOwnProperty(k)) {
|
|
this.nestedLoopText += this.nestedIdentation + ' ' + node.nested[k].selector + ' {\n';
|
|
if ($.isArray(node.nested[k].attributes)) {
|
|
for (var i = 0; i < node.nested[k].attributes.length; i++) {
|
|
this.nestedLoopText += this.nestedIdentation + ' ' + node.nested[k].attributes[i] + ';\n';
|
|
}
|
|
} else {
|
|
for (i in node.nested[k].attributes) {
|
|
this.nestedLoopText += this.nestedIdentation + ' ' + i + ': ' + node.nested[k].attributes[i] + ';\n';
|
|
}
|
|
}
|
|
if (node.nested[k].nested) this.nestLoop(node.nested[k]);
|
|
this.nestedLoopText += this.nestedIdentation + ' }\n';
|
|
this.nestedIdentation = this.nestedIdentation.slice(0, -2);
|
|
}
|
|
}
|
|
},
|
|
|
|
// looking for duplicate selectors in nested nodes
|
|
DSnestLoop: function(node, source, undef) {
|
|
if (typeof undef === "undefined") undef = true;
|
|
|
|
var match = false;
|
|
for (var k in node) {
|
|
if (node.hasOwnProperty(k)) {
|
|
if (undef) {
|
|
for (var key in source) {
|
|
match = false;
|
|
if (source.hasOwnProperty(key) && node[k].selector !== source[key].selector) {
|
|
match = true;
|
|
} else {
|
|
if (node[k].nested) {
|
|
source[key].nested ? this.DSnestLoop(node[k].nested, source[key].nested) : this.DSnestLoop(node[k].nested, source[key], false);
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
match = true;
|
|
}
|
|
if (match) {
|
|
if (!undef) {
|
|
source.nested = {};
|
|
source.nested = node;
|
|
} else {
|
|
$.extend(source, node);
|
|
}
|
|
delete(node);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// pass 1: separate multiple selectors
|
|
separateMultipleSelectors: function(node, log) {
|
|
if (typeof log === "undefined") log = false;
|
|
|
|
for (var k in node) {
|
|
if (node.hasOwnProperty(k) && node[k].selector) {
|
|
if (node[k].selector.indexOf(',') === -1 && node[k].selector.indexOf('@') === -1) {
|
|
var selectors = [];
|
|
var char = node[k].selector[0];
|
|
var sel_count = 0;
|
|
var wildcard = false;
|
|
|
|
for (var i = 1; i < node[k].selector.length; i++) {
|
|
switch(node[k].selector[i]) {
|
|
case ' ':
|
|
if (! wildcard) {
|
|
selectors[sel_count++] = char;
|
|
char = '';
|
|
} else {
|
|
wildcard = false;
|
|
char += ' ';
|
|
}
|
|
break;
|
|
case '(':
|
|
case '>':
|
|
case '+':
|
|
case '~':
|
|
wildcard = true;
|
|
case '.':
|
|
case '#':
|
|
case ':':
|
|
if (! wildcard && node[k].selector[i - 1] !== ' ') {
|
|
if (node[k].selector[i] !== ':' || node[k].selector[i - 1] !== ':') {
|
|
selectors[sel_count++] = char;
|
|
char = '&';
|
|
}
|
|
}
|
|
default:
|
|
char += node[k].selector[i];
|
|
}
|
|
}
|
|
|
|
selectors[sel_count++] = char;
|
|
var less = {};
|
|
if (sel_count > 1) {
|
|
node[k].selector = selectors[0];
|
|
for (i = sel_count - 1; i > 0; i--) {
|
|
less[k + '-' + i] = {};
|
|
less[k + '-' + i].selector = selectors[i];
|
|
less[k + '-' + i].attributes = [];
|
|
if (i + 1 === sel_count) {
|
|
less[k + '-' + i].attributes = node[k].attributes;
|
|
} else if (i + 1 < sel_count) {
|
|
less[k + '-' + i].nested = {};
|
|
less[k + '-' + i].nested[k + '-' + (i + 1)] = less[k + '-' + (i + 1)];
|
|
delete less[k + '-' + (i + 1)];
|
|
}
|
|
}
|
|
node[k].nested = less;
|
|
node[k].attributes = [];
|
|
}
|
|
if (log) console.log(JSON.stringify(node[k], null, 2));
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// pass 2: combine duplicate selectors
|
|
combineDuplicateSelectors: function(node, log) {
|
|
if (typeof log === "undefined") log = false;
|
|
|
|
for (var k in node) {
|
|
if (node.hasOwnProperty(k) && node[k].selector && node[k].nested) {
|
|
var down = 1;
|
|
while (node[k - down] === undefined || node[k].selector === node[k - down].selector) {
|
|
if (node[k - down] !== undefined) {
|
|
if (! node[k - down].nested) {
|
|
node[k - down].nested = node[k].nested;
|
|
} else {
|
|
for (var key in node[k].nested) {
|
|
if (node[k].nested.hasOwnProperty(key)) {
|
|
for (var kkey in node[k - down].nested) {
|
|
if (node[k - down].nested.hasOwnProperty(kkey)) {
|
|
var match = false;
|
|
if (node[k].nested[key].selector !== node[k - down].nested[kkey].selector) {
|
|
match = true;
|
|
} else {
|
|
if (!node[k - down].nested[kkey].nested) {
|
|
if (!node[k].nested[key].nested) {
|
|
node[k - down].nested[kkey].attributes = node[k - down].nested[kkey].attributes.concat(node[k].nested[key].attributes);
|
|
} else {
|
|
node[k - down].nested[kkey].nested = node[k].nested[key].nested;
|
|
}
|
|
} else {
|
|
this.DSnestLoop(node[k].nested, node[k - down].nested);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (match) {
|
|
node[k - down].nested[key] = {};
|
|
node[k - down].nested[key] = node[k].nested[key];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
delete node[k];
|
|
break;
|
|
}
|
|
down++;
|
|
}
|
|
}
|
|
if (log) console.log(JSON.stringify(node[k], null, 2));
|
|
}
|
|
},
|
|
|
|
// pass 3: add it to the file
|
|
constructFile: function(node, log) {
|
|
if (typeof log === "undefined") log = false;
|
|
|
|
for (var k in node) {
|
|
if (node.hasOwnProperty(k)) {
|
|
if ($.inArray(node[k].selector, changed) != -1) {
|
|
if (node[k].selector) {
|
|
this.data += node[k].selector + ' {\n';
|
|
if (node[k].attributes) {
|
|
if ($.isArray(node[k].attributes)) {
|
|
for (var i = 0; i < node[k].attributes.length; i++) {
|
|
this.data += ' ' + node[k].attributes[i] + ';\n';
|
|
}
|
|
} else {
|
|
for (i in node[k].attributes) {
|
|
if (node[k].attributes.hasOwnProperty(i)) {
|
|
this.data += ' ' + i + ': ' + node[k].attributes[i] + ';\n';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.nestedLoopText = '';
|
|
this.nestedIdentation = '';
|
|
if (node[k].nested) {
|
|
this.nestLoop(node[k], false);
|
|
this.data += this.nestedLoopText;
|
|
}
|
|
}
|
|
if (node[k].comment) {
|
|
if ($.isArray(node[k].comment)) {
|
|
for (i = 0; i < node[k].comment.length; i++) {
|
|
if (node[k].selector) this.data += ' ';
|
|
this.data += node[k].comment[i] + '\n';
|
|
}
|
|
} else {
|
|
if (node[k].selector) this.data += ' ';
|
|
this.data += node[k].comment + '\n';
|
|
}
|
|
|
|
if (node[k].attributes && !node[k].selector) this.data += node[k].attributes + ';\n';
|
|
}
|
|
if (node[k].selector) this.data += '}\n';
|
|
if (log) console.log(JSON.stringify(node[k], null, 2));
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// generate less file from all json sources and save it locally
|
|
generateLessFile: function(sources) {
|
|
// add generated variables based on # of times same color, font, size appears
|
|
if (sources.constructor !== Array) sources = [sources];
|
|
this.data = "/*\n";
|
|
this.data += "==========================================================================\n";
|
|
this.data += "Theme Customizer Generated LESS Variables\n";
|
|
this.data += "==========================================================================\n";
|
|
this.data += "*/\n";
|
|
|
|
var node = $.extend(true, {}, sources[0]);
|
|
this.checkForVars(node);
|
|
|
|
// next up the CSS from all sources
|
|
for (var i = 0; i < sources.length; i++) {
|
|
this.data += "/*\n";
|
|
this.data += "==========================================================================\n";
|
|
this.data += "Theme Customizer Generated LESS\n";
|
|
this.data += "==========================================================================\n";
|
|
this.data += "*/\n";
|
|
|
|
if (i !== 0) node = $.extend(true, {}, sources[i]);
|
|
this.separateMultipleSelectors(node);
|
|
this.combineDuplicateSelectors(node);
|
|
this.constructFile(node);
|
|
}
|
|
|
|
// and finally lets save and download file
|
|
var properties = {type: 'plain/text'};
|
|
try {
|
|
file = new File([this.data], 'themecustomizer.less', properties);
|
|
} catch (e) {
|
|
file = new Blob([this.data], properties);
|
|
}
|
|
url = URL.createObjectURL(file);
|
|
document.getElementById('generate-var').href = url;
|
|
},
|
|
|
|
generateLessVariables: function(sources) {
|
|
// add generated variables based on # of times same color, font, size appears
|
|
if (sources.constructor !== Array) sources = [sources];
|
|
this.data = "/*\n";
|
|
this.data += "==========================================================================\n";
|
|
this.data += "Theme Customizer Generated LESS Variables\n";
|
|
this.data += "==========================================================================\n";
|
|
this.data += "*/\n";
|
|
|
|
var node = $.extend(true, {}, sources[0]);
|
|
this.checkForVars(node);
|
|
|
|
return this.data;
|
|
},
|
|
|
|
// generate custom css file from all json sources
|
|
generateCSS: function(sources) {
|
|
if (sources.constructor !== Array) sources = [sources];
|
|
this.data = '';
|
|
|
|
for (var i = 0; i < sources.length; i++) {
|
|
this.data += "/*\n";
|
|
this.data += "=================================================\n";
|
|
this.data += "Theme Customizer Generated CSS\n";
|
|
this.data += "=================================================\n";
|
|
this.data += "*/\n";
|
|
|
|
var node = $.extend(true, {}, sources[i]);
|
|
this.constructFile(node);
|
|
}
|
|
|
|
return this.data;
|
|
},
|
|
|
|
// css file to json conversion, easier to manipulate json data compare to a css 'text' file
|
|
toJSON: function(data, base) {
|
|
if (typeof base === "undefined") base = false;
|
|
|
|
var comment = /(\/\*[\s\S]*?\*\/)/g;
|
|
var selector = /([^\s\;\{\}][^\;\{\}]+)\{|(\})/g;
|
|
var attributes = /([^\s\;\{\}][^\;\{\}]+\;)/g;
|
|
|
|
var json = {};
|
|
var obj = {};
|
|
var count = 0;
|
|
var sel = false;
|
|
var match = null;
|
|
var nested_json = {};
|
|
var nested_count = 0;
|
|
var nested = false;
|
|
|
|
var all = /(\/\*[\s\S]*?\*\/)|([^\s\;\{\}][^\;\{\}]+)\{|(\})|([^\s\;\{\}][^\;\{\}]+)/g;
|
|
if (base) all = /(\/\*[\s\S]*?\*\/)|([^\s\;\{\}][^\;\{\}]+)\{|(\})|([^\s\;\{\}][^\;\{\}]+\;)/g;
|
|
// var all = /(\/\*[\s\S]*?\*\/)|([^\s\;\{\}][^\;\{\}]*(?=\{))|(\})|([^\;\{\}]+\;(?!\s*\*\/))/gmi;
|
|
|
|
while ((match = all.exec(data)) != null) {
|
|
if (typeof match[1] !== "undefined") {
|
|
if (sel) {
|
|
if (obj['comment'] === undefined) {
|
|
obj['comment'] = [match[1]];
|
|
} else {
|
|
obj['comment'].push(match[1]);
|
|
}
|
|
} else {
|
|
obj = {};
|
|
obj['comment'] = match[1];
|
|
json[count++] = obj;
|
|
}
|
|
}
|
|
|
|
else if (typeof match[2] !== "undefined") {
|
|
if (obj['selector'] && (obj['selector'].indexOf('@media') > -1 || obj['selector'].indexOf('@keyframes') > -1 || obj['selector'].indexOf('@-webkit-keyframes') > -1)) {
|
|
nested_json = {};
|
|
nested_count = 0;
|
|
nested_json['selector'] = obj['selector'];
|
|
nested = true;
|
|
}
|
|
obj = {};
|
|
obj['selector'] = match[2].replace('}', ' ').trim();
|
|
base ? obj['attributes'] = [] : obj['attributes'] = {};
|
|
sel = true;
|
|
}
|
|
|
|
else if (typeof match[3] !== "undefined") {
|
|
if (nested) {
|
|
if ((nested_count > 0) && (nested_json.nested[(count) + '-' + (nested_count - 1)] === obj)) {
|
|
json[count++] = nested_json;
|
|
nested = false;
|
|
} else {
|
|
if (nested_count === 0) nested_json['nested'] = {};
|
|
nested_json.nested[(count) + '-' + (nested_count++)] = obj;
|
|
}
|
|
} else {
|
|
json[count++] = obj;
|
|
}
|
|
sel = false;
|
|
}
|
|
|
|
else if (typeof match[4] !== "undefined") {
|
|
if (base) {
|
|
attr = match[4].replace(';', '');
|
|
if (obj['attributes'] === undefined) {
|
|
obj['attributes'] = attr;
|
|
} else if (match[4].indexOf('base64') > -1) {
|
|
var pop = obj['attributes'].pop();
|
|
obj['attributes'].push(pop + ';' + attr);
|
|
} else {
|
|
obj['attributes'].push(attr);
|
|
}
|
|
} else {
|
|
match[4] = match[4].trim();
|
|
if (match[4].slice(-1) === ';') match[4] = match[4].slice(0, -1);
|
|
attr = match[4].split(':');
|
|
if (typeof attr[1] !== "undefined") {
|
|
obj['attributes'][attr[0]] = attr[1].trim();
|
|
} else {
|
|
obj['attributes'][attr[0]] = '';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return json;
|
|
},
|
|
|
|
// update css from json values, more stuff to do here
|
|
toCSS: function(node) {
|
|
var text = '';
|
|
var lines = 1;
|
|
this.cssValidator = true;
|
|
|
|
for (var key in node) {
|
|
if (node.hasOwnProperty(key)) {
|
|
text += node[key].selector + ' {\n';
|
|
lines++;
|
|
for (var k in node[key].nested) {
|
|
if (node[key].nested.hasOwnProperty(k)) {
|
|
text += ' ' + node[key].nested[k].selector + ' {\n';
|
|
lines++;
|
|
for (var i in node[key].nested[k].attributes) {
|
|
if (node[key].nested[k].attributes.hasOwnProperty(i)) {
|
|
var old = $(node[key].nested[k].selector).css(k);
|
|
$(node[key].nested[k].selector).css(i, node[key].nested[k].attributes[i]);
|
|
var newer = $(node[key].nested[k].selector).css(k);
|
|
if (old === newer) {
|
|
if (newer !== node[key].nested[k].attributes[k]) {
|
|
this.cssValidator = false;
|
|
this.cssLineError = lines;
|
|
}
|
|
}
|
|
text += ' ' + i + ': ' + node[key].nested[k].attributes[i] + ';\n';
|
|
lines++;
|
|
// console.log('nested selector: ' + node[key].nested[k].selector);
|
|
// console.log('nested attribute: ' + i);
|
|
// console.log('nested value: ' + node[key].nested[k].attributes[i]);
|
|
}
|
|
}
|
|
text += ' }\n';
|
|
lines++;
|
|
}
|
|
}
|
|
for (k in node[key].attributes) {
|
|
if (node[key].attributes.hasOwnProperty(k)) {
|
|
if (node[key].selector.indexOf('@') === -1) {
|
|
old = $(node[key].selector).css(k);
|
|
$(node[key].selector).css(k, node[key].attributes[k]);
|
|
newer = $(node[key].selector).css(k);
|
|
if (old === newer) {
|
|
if (newer !== node[key].attributes[k]) {
|
|
this.cssValidator = false;
|
|
this.cssLineError = lines;
|
|
// console.log(old);
|
|
// console.log(newer);
|
|
// console.log(node[key].attributes[k]);
|
|
}
|
|
}
|
|
}
|
|
text += ' ' + k + ': ' + node[key].attributes[k] + ';\n';
|
|
lines++;
|
|
// console.log('selector: ' + node[key].selector);
|
|
// console.log('attribute: ' + k);
|
|
// console.log('value: ' + node[key].attributes[k]);
|
|
}
|
|
}
|
|
text += '}\n\n';
|
|
lines = lines + 2;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
/*
|
|
* from sg-web.js
|
|
*/
|
|
|
|
//
|
|
// Theme Customizer - Web page stuff
|
|
//
|
|
|
|
|
|
var tc = new TC();
|
|
var baseJSON = {};
|
|
var inputJSON = {};
|
|
|
|
|
|
|
|
// change text color for input fields depending on background color
|
|
function getContrast(color) {
|
|
if (color === 'transparent') return 'black';
|
|
|
|
color = color.replace('#', '');
|
|
if (color.length === 3) color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2);
|
|
|
|
var r = parseInt(color.substr(0, 2), 16);
|
|
var g = parseInt(color.substr(2, 2), 16);
|
|
var b = parseInt(color.substr(4, 2), 16);
|
|
var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
|
|
|
|
return (yiq >= 128) ? 'black' : 'white';
|
|
}
|
|
|
|
|
|
|
|
// return a jquery selector
|
|
function getSelector(el) {
|
|
return el.attr('data-selector') ? el.attr('data-selector') : "";
|
|
}
|
|
|
|
|
|
|
|
// takes a 3 char color value and returns a 6 char color value
|
|
function longColorValue(color){
|
|
color = color.replace('#', '');
|
|
if (color.length === 3) {
|
|
color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2);
|
|
}
|
|
return '#' + color;
|
|
}
|
|
|
|
|
|
|
|
// convert rgb value to hex
|
|
function toHex(rgb) {
|
|
if (rgb === 'transparent') return rgb;
|
|
var regex = /([0-9]+)/g;
|
|
var matches = rgb.match(regex);
|
|
|
|
var hex = matches.map(function(x) {
|
|
return parseInt(x, 10);
|
|
});
|
|
|
|
if (hex.length > 3) {
|
|
if ((hex[0] === 0) && (hex[1] === 0) && (hex[2] === 0) && (hex[3] === 0)) return 'transparent';
|
|
}
|
|
|
|
return "#" + ((1 << 24) + (hex[0] << 16) + (hex[1] << 8) + hex[2]).toString(16).slice(1);
|
|
}
|
|
|
|
|
|
|
|
// equivalent of darken/lighten in css which is unusable in jquery
|
|
function lightenDarkenColor(color, amount) {
|
|
var isColor = false;
|
|
|
|
if (color[0] === "#") {
|
|
color = color.slice(1);
|
|
isColor = true;
|
|
if (getContrast(color) === 'black') { amount = -Math.abs(amount); }
|
|
}
|
|
|
|
var num = parseInt(color, 16);
|
|
|
|
var r = (num >> 16) + amount;
|
|
if (r > 255) r = 255;
|
|
else if (r < 0) r = 0;
|
|
|
|
var b = ((num >> 8) & 0x00FF) + amount;
|
|
if (b > 255) b = 255;
|
|
else if (b < 0) b = 0;
|
|
|
|
var g = (num & 0x0000FF) + amount;
|
|
if (g > 255) g = 255;
|
|
else if (g < 0) g = 0;
|
|
|
|
return (isColor ? "#" : "") + String("000000" + (g | (b << 8) | (r << 16)).toString(16)).slice(-6);
|
|
}
|
|
|
|
|
|
|
|
// stuff repeated in next 2 functions
|
|
function checkInputValues(el, selector) {
|
|
var bfa = el.attr('data-element'); // browser friendly attribute
|
|
if (bfa === 'border-color') bfa = 'border-top-color';
|
|
|
|
// get all the relevant example elements for this control
|
|
var $selected = $(el).parents(".row:first").find("> div:first").find(selector);
|
|
|
|
if ($selected.length === 0) $selected = $(selector);
|
|
|
|
if ($selected.css(bfa).indexOf('rgb(') > -1) {
|
|
css = $selected.css(bfa);
|
|
part1 = css.slice(0, css.indexOf('rgb('));
|
|
part2 = css.slice(css.indexOf('rgb('));
|
|
el.val( part1 + toHex(part2) );
|
|
} else if (bfa === 'padding') {
|
|
if ($selected.css('padding-top') === $selected.css('padding-left') &&
|
|
$selected.css('padding-top') === $selected.css('padding-bottom') &&
|
|
$selected.css('padding-top') === $selected.css('padding-right')) {
|
|
el.val( $selected.css('padding-top') );
|
|
} else {
|
|
el.val( $selected.css('padding-top') + ' ' + $selected.css('padding-right') + ' ' + $selected.css('padding-bottom') + ' ' + $selected.css('padding-left') );
|
|
}
|
|
} else if (bfa === 'border-radius') {
|
|
if ($selected.css('border-top-left-radius') === $selected.css('border-top-right-radius') &&
|
|
$selected.css('border-top-left-radius') === $selected.css('border-bottom-right-radius') &&
|
|
$selected.css('border-top-left-radius') === $selected.css('border-bottom-left-radius')) {
|
|
el.val( $selected.css('border-top-left-radius') );
|
|
} else {
|
|
el.val( $selected.css('border-top-left-radius') + ' ' + $selected.css('border-top-right-radius') + ' ' + $selected.css('border-bottom-right-radius') + ' ' + $selected.css('border-bottom-left-radius') );
|
|
}
|
|
} else if (bfa === 'border') {
|
|
el.val( $selected.css('border-top-width') + ' ' + $selected.css('border-top-style') + ' ' + toHex($selected.css('border-top-color')) );
|
|
} else {
|
|
el.val( $selected.css(bfa) );
|
|
}
|
|
|
|
if ( selector === '.customizer .icons .sample span' ) {
|
|
var width = 0;
|
|
$selected.css('width', '');
|
|
$selected.each(function() {
|
|
if ($(this).width() > width) width = $(this).width();
|
|
});
|
|
$selected.each(function() {
|
|
$(this).width(width);
|
|
$(this).height(width);
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// change default values of all input fields on pageload
|
|
function defaultInputValues(pageload) {
|
|
if (typeof pageload === "undefined") pageload = true;
|
|
var count = 0;
|
|
$('.input input').each(function() {
|
|
var obj = {};
|
|
var selector = getSelector($(this));
|
|
var bfa = $(this).attr('data-element'); // browser friendly attribute
|
|
if (bfa === 'border-color') bfa = 'border-top-color';
|
|
|
|
if (! $(this).hasClass('nocolor')) {
|
|
$(this).val( toHex($(selector).css(bfa)) );
|
|
if ($(this).val() === 'transparent') {
|
|
$(this).css('background-color', 'rgba(0, 0, 0, 0)');
|
|
} else {
|
|
$(this).css('background-color', '#' + $(this).val());
|
|
}
|
|
$(this).css('color', getContrast($(this).val()));
|
|
if (!pageload) $(this).closest('.picker').colorpicker('setValue', $(this).val());
|
|
} else {
|
|
checkInputValues($(this), selector);
|
|
if ( $(this).hasClass('check') ) {
|
|
if ($(this).val() === $(this).attr('data-check')) $(this).prop('checked', true);
|
|
}
|
|
}
|
|
|
|
obj['selector'] = selector;
|
|
obj['attributes'] = {};
|
|
obj['attributes'][$(this).attr("data-element")] = $(this).val();
|
|
obj['var'] = $(this).data("var");
|
|
|
|
sel = false;
|
|
for (var k in inputJSON) {
|
|
if (inputJSON.hasOwnProperty(k) && inputJSON[k].selector === obj.selector) {
|
|
sel = true;
|
|
for (var key in obj.attributes) {
|
|
if (obj.attributes.hasOwnProperty(key)) {
|
|
inputJSON[k].attributes[key] = obj.attributes[key];
|
|
}
|
|
}
|
|
inputJSON[k].var = obj.var;
|
|
break;
|
|
}
|
|
}
|
|
if (!sel) inputJSON[count++] = obj;
|
|
});
|
|
}
|
|
|
|
|
|
|
|
// update value of an input field (and json equivalent)
|
|
function updateInputValue(el) {
|
|
var selector = getSelector(el);
|
|
var bfa = el.attr('data-element'); // browser friendly attribute
|
|
if (bfa === 'border-color') bfa = 'border-top-color';
|
|
|
|
if (! el.hasClass('nocolor')) {
|
|
el.val( toHex($(selector).css(bfa)) );
|
|
el.css('background-color', '#' + el.val());
|
|
el.css('color', getContrast(el.val()));
|
|
} else {
|
|
checkInputValues(el, selector);
|
|
}
|
|
|
|
for (var k in inputJSON) {
|
|
if (inputJSON[k].selector === selector) {
|
|
inputJSON[k].attributes[el.attr("data-element")] = el.val();
|
|
break;
|
|
}
|
|
}
|
|
if ($.inArray(selector, changed) == -1) changed.push(selector);
|
|
saveCustomizerCSS();
|
|
}
|
|
|
|
|
|
|
|
// save custom CSS to localStorage
|
|
function saveCustomizerCSS() {
|
|
if ( $('.keep-changes').prop('checked') ) {
|
|
localStorage.setItem('customizerData', JSON.stringify(inputJSON));
|
|
localStorage.setItem('changedData', JSON.stringify(changed));
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// load custom CSS from localStorage
|
|
function loadCustomizerCSS() {
|
|
inputJSON = JSON.parse(localStorage.getItem('customizerData'));
|
|
changed = JSON.parse(localStorage.getItem('changedData'));
|
|
}
|
|
|
|
|
|
|
|
// delete stored data
|
|
function deleteData() {
|
|
localStorage.removeItem('customizerData');
|
|
localStorage.removeItem('changedData');
|
|
}
|
|
|
|
|
|
|
|
// stuff to fix for TC to work with all themes / browsers
|
|
function themeFix() {
|
|
var $body = $('body');
|
|
$('.header_outer, footer').css('background', $body.css('background'));
|
|
$('.header_outer, footer').css('background-color', $body.css('background-color'));
|
|
$('.customizer .tables .table-bordered .tb').css('border', '1px solid ' + $('.table-bordered > tbody > tr > td').css('border-top-color'));
|
|
$('.customizer h1, .customizer h2').css('border-bottom-color', $('h1').css('color'));
|
|
$('.customizer .btn-primary').css('border-color', $('.customizer .btn-primary').css('border-bottom-color'));
|
|
|
|
if ($('table').css('background-color') === 'rgba(0, 0, 0, 0)') {
|
|
if ($('#middle.container').css('background-color') !== 'rgba(0, 0, 0, 0)') {
|
|
$('tbody > tr:nth-of-type(even), .table-bordered tr').css('background-color', $('#middle.container').css('background-color'));
|
|
} else {
|
|
$('tbody > tr:nth-of-type(even), .table-bordered tr').css('background-color', $body.css('background-color'));
|
|
}
|
|
} else {
|
|
$('tbody > tr:nth-of-type(even), .table-bordered tr').css('background-color', $('table').css('background-color'));
|
|
}
|
|
|
|
if ($('.customizer .navbar-dark .navbar-nav .nav-link').css('background-color') === 'rgba(0, 0, 0, 0)') {
|
|
$('.customizer .navbar-dark .navbar-nav .nav-link').css('background-color', $('.customizer .navbar-dark').css('background-color'));
|
|
}
|
|
|
|
var border = ['btn-primary', 'btn-secondary', 'btn-success', 'btn-danger', 'btn-warning', 'btn-info', 'btn-light', 'btn-dark', 'alert-primary', 'alert-secondary', 'alert-success', 'alert-info', 'alert-warning', 'alert-danger'];
|
|
for (var i = 0; i < border.length; i++) {
|
|
var sel = $('.customizer .' + border[i]);
|
|
if (sel.css('border-top-color').indexOf('rgba') > -1) sel.css('border-color', sel.css('background-color'));
|
|
}
|
|
|
|
var font = $body.css('font-family').split(',');
|
|
for (i = 0; i < 3; i++) {
|
|
if (i >= font.length) {
|
|
$('.fonts .font' + (i + 1)).css('font-family', 'Arial');
|
|
$('.fonts .ff' + (i + 1)).append('Arial');
|
|
} else {
|
|
$('.fonts .font' + (i + 1)).css('font-family', font[i]);
|
|
$('.fonts .ff' + (i + 1)).append(font[i]);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
(function($) {
|
|
// parse original css to json
|
|
var base_css = '';
|
|
var customizer_css = '';
|
|
|
|
$.when(
|
|
$.get('./themes/default/css/default.css', function(data) {
|
|
base_css = data;
|
|
}),
|
|
|
|
$.get('./themes/base_files/css/theme-customizer.css', function(data) {
|
|
customizer_css = data;
|
|
})
|
|
).then(function() {
|
|
baseJSON = tc.toJSON(base_css + customizer_css, true);
|
|
// console.log(JSON.stringify(baseJSON, null, 2));
|
|
});
|
|
|
|
var $themeCustomizer = $('.customizer');
|
|
if ($themeCustomizer.length) themeFix();
|
|
$('.customizer .tc-form').submit(false);
|
|
|
|
|
|
// theme customizer's footer autotoc
|
|
$themeCustomizer.find('h2').each(function () {
|
|
var text = $(this).text();
|
|
$(this).attr('id', text);
|
|
$('.tc-footer .dropdown-menu').append('<a href="#' + text + '" class="dropdown-item">' + $(this).text() + '</a></li>');
|
|
});
|
|
|
|
|
|
// set some values if stored data exist
|
|
if (localStorage.getItem('customizerData') !== null) {
|
|
$('.keep-changes').prop('checked', true);
|
|
loadCustomizerCSS();
|
|
tc.toCSS(inputJSON);
|
|
$('textarea[name=header_custom_css]').val(tc.generateCSS([inputJSON]));
|
|
}
|
|
defaultInputValues();
|
|
|
|
|
|
// update css when out of focus
|
|
$('.input input').on('focusout', function() {
|
|
var check = $(this).val();
|
|
if (!$(this).hasClass('nocolor')) check = longColorValue(check);
|
|
$(getSelector($(this))).css($(this).attr('data-element'), $(this).val());
|
|
updateInputValue($(this));
|
|
check !== $(this).val() ? $(this).parent().addClass('error') : $(this).parent().removeClass('error');
|
|
});
|
|
|
|
|
|
// update css on change for checkbox
|
|
$('.input .check').on('change', function() {
|
|
$(this).prop('checked') ? $(this).val($(this).attr('data-check')) : $(this).val($(this).attr('data-default'));
|
|
$(getSelector($(this))).css($(this).attr('data-element'), $(this).val());
|
|
updateInputValue($(this));
|
|
});
|
|
|
|
|
|
// generate custom css when clicked
|
|
$('.generate-custom-css').click(function() {
|
|
$('textarea[name=header_custom_css]').val(tc.generateCSS([inputJSON]));
|
|
$('html, body').animate({
|
|
scrollTop: $('textarea[name=header_custom_css]').offset().top
|
|
}, 200);
|
|
return false;
|
|
});
|
|
|
|
|
|
// TODO generate SCSS variables when clicked
|
|
|
|
// apply lighter color on hover for links
|
|
$('.customizer p > a').hover(
|
|
function() {
|
|
$(this).css('color', lightenDarkenColor($('#tc-link-color').val(), 50));
|
|
}, function() {
|
|
$(this).css('color', $('#tc-link-color').val());
|
|
}
|
|
);
|
|
|
|
|
|
// apply lighter color on hover for buttons
|
|
$('.customizer .btn, .customizer .icons span').each(function() {
|
|
var id = '#tc-btn-primary-bg-color';
|
|
if ( $(this).hasClass('btn-secondary') ) id = '#tc-btn-secondary-bg-color';
|
|
if ( $(this).hasClass('btn-success') ) id = '#tc-btn-success-bg-color';
|
|
if ( $(this).hasClass('btn-info') ) id = '#tc-btn-info-bg-color';
|
|
if ( $(this).hasClass('btn-warning') ) id = '#tc-btn-warning-bg-color';
|
|
if ( $(this).hasClass('btn-danger') ) id = '#tc-btn-danger-bg-color';
|
|
if ( $(this).hasClass('btn-light') ) id = '#tc-btn-light-bg-color';
|
|
if ( $(this).hasClass('btn-dark') ) id = '#tc-btn-dark-bg-color';
|
|
if ( $(this).hasClass('fas') ) id = '#tc-icon-bg-color';
|
|
if ( $(this).hasClass('fab') ) id = '#tc-icon-bg-color';
|
|
$(this).hover(
|
|
function() {
|
|
$(this).css('background-color', lightenDarkenColor($(id).val(), 50));
|
|
}, function() {
|
|
$(this).css('background-color', $(id).val());
|
|
}
|
|
);
|
|
});
|
|
|
|
|
|
// storage behaviour when checking/unchecking
|
|
$('.keep-changes').on('change', function() {
|
|
$(this).prop('checked') ? saveCustomizerCSS() : deleteData();
|
|
});
|
|
|
|
|
|
// update css when using colorpicker
|
|
$('.picker').colorpicker().on('changeColor', function(e) {
|
|
var selector = getSelector( $(e.target) );
|
|
$(selector).css(e.target.dataset.element, e.color.toHex());
|
|
$(this).find('input').css('background-color', e.color.toHex());
|
|
$(this).find('input').css('color', getContrast(e.color.toHex()));
|
|
for (var key in inputJSON) {
|
|
if (inputJSON[key].selector === selector) {
|
|
inputJSON[key].attributes[e.target.dataset.element] = e.color.toHex();
|
|
if ($.inArray(selector, changed) == -1) changed.push(selector);
|
|
saveCustomizerCSS();
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
})(jQuery);
|