<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1>The top <span id="sets">36</span> color sets from Adobe Color CC (<a href="http://onepagerapp.com/harunpehlivantebimtebitagem" target="_blank"> HARUN PEHLİVAN</a>)</h1>
<div class="use">
<div class="info">Click on button "css" to get the CSS from a theme. Click the ⚙ to edit the theme on Kuler/Adobe Color CC</div>
<textarea name="" id="" cols="30" rows="10" class="css"></textarea>
</div>
<ul class="kuler">
</ul>
<div class="loader">
<div class="blocks">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<h2>Loading...</h2>
</div>
<style>
.loader {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 100%;
color: white;
}
.loader h2 {
font-weight: 200;
}
.loader .blocks {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.blocks div {
margin: 2%;
width: 15%;
height: 3em;
border-radius: 5px;
}
.blocks div:nth-child(1) {
background-color: rgba(230,226,175,1);
animation: anim1 2s infinite;
}
.blocks div:nth-child(2) {
background-color: rgba(167,163,126,1);
animation: anim2 2s infinite;
}
.blocks div:nth-child(3) {
background-color: rgba(239,235,202,1);
animation: anim3 2s infinite;
}
.blocks div:nth-child(4) {
background-color: rgba(4,98,128,1);
animation: anim4 2s infinite;
}
.blocks div:nth-child(5) {
background-color: rgba(0,47,47,1);
animation: anim5 2s infinite;
}
@keyframes anim1 {
0% {
background-color: rgba(230,226,175,1);
}
50% {
background-color: rgba(16,90,99,1);
}
100% {
background-color: rgba(16,33,43,1);
}
}
@keyframes anim2 {
0% {
background-color: rgba(230,226,175,1);
}
50% {
background-color: rgba(255,249,212,1);
}
100% {
background-color: rgba(149,170,99,1);
}
}
@keyframes anim3 {
0% {
background-color: rgba(230,226,175,1);
}
50% {
background-color: rgba(255,210,78,1);
}
100% {
background-color: rgba(189,214,131,1);
}
}
@keyframes anim4 {
0% {
background-color: rgba(230,226,175,1);
}
50% {
background-color: rgba(219,158,54,1);
}
100% {
background-color: rgba(226,239,214,1);
}
}
@keyframes anim5 {
0% {
background-color: rgba(230,226,175,1);
}
50% {
background-color: rgba(188,72,50,1);
}
100% {
background-color: rgba(245,255,223,1);
}
}
.hidden {
display: none;
}
</style>
<script type="javascript/template" id="template">
<li class="kuler__theme">
<ul class="kuler__theme__swatches">%swatches%</ul>
<h2 class="kuler__theme__title"><a href="%link%" target="_blank">%title%</a><button onclick="setCSS('%css%')">CSS</button><button onclick="window.open('%editLink%')" class="edit" title="edit">⚙</button></h2>
</li>
</script>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,100,800);
* {
box-sizing: border-box;
}
body {
font-weight: 100;
background: #262626;
box-sizing: border-box;
font-family: "open sans";
font-weight: 300;
}
h1 {
color: rgba(251,251,251,1);
font-weight: 100;
}
.kuler {
margin: 0;
padding: 10px;
list-style: none;
display: flex;
flex-flow: row wrap;
}
.kuler__theme {
margin: 0;
padding: 5px 15px 0 5px;
width: 25%;
}
.kuler__theme:hover {
background: rgba(0,0,0,.4);
}
.kuler__theme__swatches {
display: flex;
justify-content: space-between;
width: 100%;
}
.kuler__theme__swatches li {
margin: 0;
padding: 0;
list-style: none;
width: 18%;
height: 2em;
margin: 0 4px 1em 4px;
border-radius: 4px;
transition: all .5s;
}
.kuler__theme__swatches li:hover {
flex-grow: 1;
border-radius: 2px;
margin: 0 4px;
transition: all .25s;
height: 3em;
}
.kuler__theme__title {
font-size: .9em;
font-weight: 400;
}
.kuler__theme__title a {
text-decoration: none;
color: white;
font-weight: 300;
}
.kuler__theme__title button {
float: left;
padding: 5px;
margin-right: 3px;
cursor: pointer;
font-size: 10px;
background:rgb(43,61,79);
border-width: 0;
color: white;
}
.css {
font-family: monospace;
font-size: 20px;
width: 100%;
margin: 0;
padding: 0;
height: 0;
}
.info {
color: #eee;
}
.hasContent .info { display: none;}
.hasContent .css {
height: 200px;
}
button.edit {
border-width: 0;
line-height: .95em;
color: white;
float: left;
padding: 6px 5px 4px;
margin-right: 6px;
cursor: pointer;
font-size: .75em;
background:rgb(43,61,79);
border-width: 0;
color: white;
}
button.edit:hover, .kuler__theme__title button:hover {
background: rgb(51,119,219);
color: yellow;
}
.hidden {
display: none;
}
function getKuler(cb) {
let url = "//gethead.herokuapp.com/public/kuler.json";
fetch(url)
.then(response => {
let { status } = response;
if (status !== 200) {
alert("Could not fetch JSON");
return;
}
response.json().then(data => {
cb(data);
});
})
.catch(function(err) {
console.log("Fetch Error :-S", err);
});
}
function Kuler(kulerObj) {
var userLang = navigator.language || navigator.userLanguage;
var me = this;
me.title = kulerObj.name;
me.id = kulerObj.id;
me.link = `https://color.adobe.com/${userLang}/${kulerObj.name}-color-theme-${kulerObj.id}`;
me.editLink = `https://color.adobe.com/${userLang}/${kulerObj.name}-color-theme-${kulerObj.id}/edit/?copy=true`;
me.css = "/*\\n";
me.css += "title: " + kulerObj.name;
me.css += "\\nlink : " + me.link;
me.css += "\\n*/\\n";
me.swatches = [];
forEach(kulerObj.swatches, function(e, i) {
var alpha = parseInt(Math.random() * 100) / 100;
alpha = 1;
var r = parseInt(e.values[0] * 255);
var g = parseInt(e.values[1] * 255);
var b = parseInt(e.values[2] * 255);
var col = "rgba(" + r + "," + g + "," + b + "," + alpha + ")";
me.swatches.push(col);
me.css += ".col" + (i + 1) + " { color: " + col + ";}\\n";
me.css += ".bgCol" + (i + 1) + " { background-color: " + col + ";}\\n";
});
return this;
}
function getThemes(noOfSets) {
getKuler(function(_themes) {
var themes = _themes.themes.map(theme => {
return new Kuler(theme);
});
window.themes = themes;
document.querySelector('.loader').classList.add('hidden');
renderThemes(themes);
});
}
function parseTemplate(template, obj) {
var userLang = navigator.language || navigator.userLanguage;
let swatches = "";
obj.swatches.map(swatch => {
swatches += `<li style="background-color: ${swatch};" title="${swatch}"></li>`;
});
const attr = {
title: obj.title,
link: obj.link,
editLink: obj.editLink,
swatches,
css:obj.css
};
let sHTML = template;
Object.keys(attr).map(key => {
const value = attr[key];
sHTML = sHTML.replace(new RegExp(`%${key}%`, "ig"), value);
});
return sHTML;
}
function forEach(domNodes, cb) {
return Array.prototype.forEach.call(domNodes, function(item, i) {
cb(item, i);
});
}
function setCSS(css) {
if (eleCSS.value.indexOf(css) > -1) return;
eleUse.classList.add('hasContent');
eleCSS.value = css + "\n/********/\n" + eleCSS.value;
}
function renderThemes(themes) {
var kuler = document.querySelector(".kuler");
var sHTML = "";
var template = document.querySelector("#template").innerHTML;
themes.forEach(function(theme) {
sHTML += parseTemplate(template, theme);
});
kuler.innerHTML = sHTML;
}
function toggleHidden(ele) {
ele.target.classList.toggle('hidden')
}
const eleInfo = document.querySelector('.info'),
eleUse = document.querySelector('.use'),
eleCSS = document.querySelector(".css"),
sets = document.querySelector("#sets"),
themes = document.querySelector(".themes");
getThemes();
eleCSS.addEventListener('dblclick', toggleHidden)
/*
function Kuler(kulerObj) {
console.log(kulerObj);
var me = this;
me.title = kulerObj.querySelector("themeTitle").textContent;
me.id = kulerObj.querySelector("themeID").textContent;
me.link = kulerObj.querySelector("guid").textContent;
me.editLink = "https: //color.adobe.com/en/%name%-color-theme-%id%/edit/?copy=true"
.replace(/%name%/gi, me.title.split(" ").join("-"))
.replace(/%id%/gi, me.id)
.replace(/ /gi, "");
me.css = "/*\\n";
me.css += "title: " + me.title;
me.css += "\\nlink : " + me.link;
me.css += "\\n * /\\n";
me.swatches = [];
forEach(kulerObj.querySelectorAll("swatch"), function(e, i) {
var alpha = parseInt(Math.random() * 100) / 100;
alpha = 1;
var r = parseInt(parseFloat(e.querySelector("swatchRGB1").textContent) * 255);
var g = parseInt(parseFloat(e.querySelector("swatchRGB2").textContent) * 255);
var b = parseInt(parseFloat(e.querySelector("swatchRGB3").textContent) * 255);
var col = "rgba(" + r + "," + g + "," + b + "," + alpha + ")";
me.swatches.push(col);
me.css += ".col" + (i + 1) + " { color: " + col + ";}\\n";
me.css += ".bgCol" + (i + 1) + " { background-color: " + col + ";}\\n";
});
return this;
}
function getThemes(noOfSets) {
noOfSets = noOfSets ? noOfSets : parseInt(sets.textContent);
function reqListener(resp) {
var dom = document.createElement("div"),
themes = [];
dom.innerHTML = oReq.responseText.replace(/kuler:/gi, "");
forEach(dom.querySelectorAll("item"), function(ele) {
themes.push(new Kuler(ele));
});
renderThemes(themes);
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open(
"GET",
"https://kuler-api.adobe.com/rss/get.cfm?listType=popular&itemsPerPage=" +
noOfSets +
"&key=mykey"
);
oReq.send();
}
function parseTemplate(template, obj) {
// Flatten obj
var prep = {};
for (var a in obj) {
var value = obj[a];
if (typeof value === "object") {
var objValue = "";
for (var aa in value) {
objValue +=
"<li style='background-color: " +
value[aa] +
"' title=" +
value[aa] +
"></li>";
}
value = objValue;
}
prep[a] = value;
}
var sHTML = template;
for (var att in prep) {
sHTML = sHTML.replace(new RegExp("%" + att + "%", "ig"), prep[att]);
}
return sHTML;
}
*/
