(function() {
"use strict";
var options = {
title: 'Main Colors:',
filePrefix: 'color-',
colors: [
'#6aaf08', // #1
'#e94a41', // #2
'#ffd25f', // #3
'#7fdcfe', // #4
'#ff9600', // #5
'#ff6f57', // #6
'#00C853', // #7
'#03a9f4', // #8
'#d48b91', // #9
'#8cbeb2' // #10
]
};
window.onload = function () {
// CSS
var $tcsStyle = document.createElement('style'),
styles = '';
styles += '.theme-color-switcher { position: fixed; top: 50%; left: 0; -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); transition: transform 1.05s; z-index: 999; }';
styles += '.theme-color-switcher.open { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }';
styles += '.theme-color-switcher > span { display: block; position: absolute; top: 0; left: 100%; color: #fff; background-color: '+ options.colors[0] +'; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 50px; height: 50px; -webkit-transition: background-color .25s ease-in-out; transition: background-color .25s ease-in-out; cursor: pointer; z-index: 0; }';
styles += '.theme-color-switcher > span:before { content: " "; display: block; position: absolute; top: 55%; left: 50%; width: 8px; height: 7px; margin-left: -3px; border-radius: 2px; box-shadow: inset 0 0 0 32px, 10px -10px, -10px -14px; }';
styles += '.theme-color-switcher > span:after { content: " "; display: block; position: absolute; left: 50%; width: 2px; height: 60%; margin-top: 20%; box-shadow: inset 0 0 0 32px, 10px 0, -10px 0; }';
styles += '.tcs-body { position: relative; padding: 20px 10px 10px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); overflow: hidden; z-index: 1; }';
styles += '.tcs-body:before { content: "'+ options.title +'"; display: block; margin-top: -6px; padding: 0 5px 7px; color: #252525; font-family: "Arial", sans-serif; font-size: 16px; line-height: 25px; font-weight: 600; }';
styles += '.tcs-body > span { float: left; display: block; width: 30px; height: 30px; margin: 0 5px 10px; background-color: rgba(0, 0, 0, 0.05); cursor: pointer; }';
styles += '.tcs-body > span:nth-child(6) { clear: left; }';
$tcsStyle.id = 'themeColorSwitcherStyles';
$tcsStyle.innerHTML = styles;
document.head.appendChild( $tcsStyle );
// Markup
var $tcs = document.createElement('div'),
$tcsToggle = document.createElement('span'),
$tcsBody = document.createElement('div'),
$tcsMarkup = '';
$tcs.className = 'theme-color-switcher';
$tcsToggle.setAttribute('data-action', 'toggle');
$tcsBody.className = 'tcs-body';
for (var i = 0; i < options.colors.length; i++) {
$tcsMarkup += '<span style="background-color: '+ options.colors[i] +';" data-action="'+ (i+1) +'"></span>';
}
$tcsBody.innerHTML = $tcsMarkup;
$tcs.appendChild( $tcsToggle );
$tcs.appendChild( $tcsBody );
document.body.appendChild( $tcs );
// Action
var $tcsStyles = document.getElementById('theme_color');
$tcs.addEventListener('click', function (e) {
e.action = e.target.getAttribute('data-action');
if ( e.action === 'toggle' ) {
$tcs.classList.toggle('open');
} else if ( e.action ) {
var replaceName = new RegExp(options.filePrefix +'.*.css');
$tcsStyles.href = $tcsStyles.href.replace(replaceName, options.filePrefix + e.action + '.css');
$tcsToggle.style.backgroundColor = options.colors[e.action - 1];
}
});
};
}());