ES6 (also known as Harmony) is the the next version of Javascript. Here's a few of the additions.
A Pen by Rahul Gaur on CodePen.
ES6 (also known as Harmony) is the the next version of Javascript. Here's a few of the additions.
A Pen by Rahul Gaur on CodePen.
<div id="Page"> | |
<div id="Poster"> | |
</div> | |
</div> |
a modern art elegant to view and even to read and extend the code
A Pen by Rahul Gaur on CodePen.
/** | |
* Set attributes on giving element | |
* @param {object} attrs | |
* @param {HTMLElement} el | |
*/ | |
function setAttrs(attrs, el) { | |
let uniqueId = Math.round(Math.random() * Date.now()).toString(20).substr(0, 4); | |
Object.keys(attrs).forEach(key => el[key] = attrs[key]); | |
el.setAttribute('uid', uniqueId); | |
} | |
/** | |
* If the values is a string set it as text; | |
* @param {string} val | |
* @param {HTMLElement} el | |
* @returns {boolean} | |
*/ | |
function ifStringSetText(val, el) { | |
if (!!val && !!val.match) { | |
el.innerHTML = val; | |
return true; | |
} | |
return false; | |
} | |
/** | |
* Create and element function for ease of use as api | |
* @param {string} tagName | |
* @returns {function} | |
*/ | |
function createElement(tagName) { | |
return (attrs, children) => { | |
let el = document.createElement(tagName); | |
attrs && setAttrs(attrs, el); | |
if (children) { | |
if (!!children.map) { | |
children.forEach(child => { | |
if (!ifStringSetText(child, el)) { | |
el.appendChild(child); | |
} | |
}); | |
} | |
ifStringSetText(children, el); | |
} | |
return el; | |
}; | |
} | |
const rDom = function (elements) { | |
let el = function (e) { | |
return createElement(e); | |
} | |
let minimal = ['h1', 'div', 'span', 'article', 'a', 'nav', 'button']; | |
let elist = Array.isArray(elements) ? minimal.concat(elements) : minimal; | |
elist.forEach((d) => { | |
el[d.toLowerCase()] = el.bind(null, d)(); | |
}); | |
return el; | |
} | |
const dom = rDom(['label']); | |
(function(){ | |
Colors = {}; | |
Colors.names = { | |
aqua: "#00ffff", | |
azure: "#f0ffff", | |
beige: "#f5f5dc", | |
black: "#000000", | |
blue: "#0000ff", | |
brown: "#a52a2a", | |
cyan: "#00ffff", | |
darkblue: "#00008b", | |
darkcyan: "#008b8b", | |
darkgrey: "#a9a9a9", | |
darkgreen: "#006400", | |
darkkhaki: "#bdb76b", | |
darkmagenta: "#8b008b", | |
darkolivegreen: "#556b2f", | |
darkorange: "#ff8c00", | |
darkorchid: "#9932cc", | |
darkred: "#8b0000", | |
darksalmon: "#e9967a", | |
darkviolet: "#9400d3", | |
fuchsia: "#ff00ff", | |
gold: "#ffd700", | |
green: "#008000", | |
indigo: "#4b0082", | |
khaki: "#f0e68c", | |
lightblue: "#add8e6", | |
lightcyan: "#e0ffff", | |
lightgreen: "#90ee90", | |
lightgrey: "#d3d3d3", | |
lightpink: "#ffb6c1", | |
lightyellow: "#ffffe0", | |
lime: "#00ff00", | |
magenta: "#ff00ff", | |
maroon: "#800000", | |
navy: "#000080", | |
olive: "#808000", | |
orange: "#ffa500", | |
pink: "#ffc0cb", | |
purple: "#800080", | |
violet: "#800080", | |
red: "#ff0000", | |
silver: "#c0c0c0", | |
white: "#ffffff", | |
yellow: "#ffff00" | |
}; | |
Colors.random = function() { | |
var result; | |
var count = 0; | |
for (var prop in this.names) | |
if (Math.random() < 1/++count) | |
result = prop; | |
return { name: result, rgb: this.names[result]}; | |
}; | |
})(); | |
const values = { | |
groupsPerRow: 16, | |
rows: 3 | |
} | |
populateSwitches(); | |
function onToggle(el, bool) { | |
console.log(bool, 'clicked<<'); | |
var color = Colors.random(); | |
if (bool) { | |
el.setAttribute('style' , `background: ${color.rgb};box-shadow(0 0 0 25px ${color.rgb} inset)`); | |
} else { | |
el.removeAttribute('style'); | |
} | |
} | |
function populateSwitches() { | |
var poster = document.getElementById("Poster"); | |
for (var i = 0; i < (values.groupsPerRow*values.rows); i++) { | |
var group = getSwitchGroup(); | |
poster.appendChild(group); | |
} | |
document.querySelectorAll('#Poster > div > label').forEach(sl => { | |
(function(btn) { | |
setInterval(function() { | |
btn.click(); | |
}, (Math.random() * 4000) + 1000);})(sl); | |
}); | |
} | |
function getSwitchGroup() { | |
// create group element | |
let groupEl = dom.div({className: 'SwitchGroup'}, [getSwitch(onToggle), getSwitch(onToggle)]); | |
if (Math.round(Math.random())) { | |
if (Math.round(Math.random())) { | |
groupEl.className += " Rotate180"; | |
} else { | |
groupEl.className += " Rotate90"; | |
} | |
} | |
return groupEl; | |
} | |
function getSwitch(ontoggle) { | |
let toggleContentsEl = dom.div({className: 'ToggleContents'}); | |
let toggleEl = dom.div({className: 'Toggle'}, [toggleContentsEl]); | |
let onClick = function(ontoggle, ev) { | |
ev.preventDefault(); | |
if (switchEl.className.indexOf('On') > -1) { | |
switchEl.className = "Switch"; | |
ontoggle(switchEl, false); | |
} else { | |
switchEl.className += " On"; | |
ontoggle(switchEl, true); | |
} | |
} | |
let switchEl = dom.label({className: 'Switch', for: 'Switch', onclick: onClick.bind(null, ontoggle)}, [toggleEl]); | |
return switchEl; | |
} |
// @import "compass/css3"; | |
// @mixin transition($transitions...) { | |
// -webkit-transition: $transitions; | |
// -moz-transition: $transitions; | |
// -ms-transition: $transitions; | |
// -o-transition: $transitions; | |
// transition: $transitions; | |
// } | |
// @mixin border-radius($properties) { | |
// -webkit-border-radius: $properties; | |
// -moz-border-radius: $properties; | |
// border-radius: $properties; | |
// } | |
// @mixin box-shadow($properties...) { | |
// -webkit-box-shadow: $properties; | |
// -moz-box-shadow: $properties; | |
// -o-box-shadow: $properties; | |
// box-shadow: $properties; | |
// } | |
// @mixin transform($transform) { | |
// -webkit-transform: $transform; | |
// -moz-transform: $transform; | |
// -ms-transform: $transform; | |
// -o-transform: $transform; | |
// transform: $transform; | |
// } | |
// #Page { | |
// margin: auto; | |
// width: 600px; | |
// #Poster { | |
// margin-top: 90px; | |
// } | |
// } | |
// .SwitchGroup { | |
// float: left; | |
// width: 100px; | |
// height: 100px; | |
// &.Rotate90 { | |
// @include transform(rotate(90deg)); | |
// } | |
// &.Rotate180 { | |
// @include transform(rotate(180deg)); | |
// } | |
// .Switch { | |
// float: left; | |
// background: #FFF; | |
// width: 70px; | |
// height: 20px; | |
// margin: 2px; | |
// cursor: pointer; | |
// @include border-radius(25px); | |
// @include transition(all ease 300ms 100ms); | |
// @include box-shadow(0 0 0 2px rgba(0,0,0,.1) inset); | |
// .Toggle { | |
// position: relative; | |
// margin: 0; | |
// padding: 0; | |
// float: left; | |
// left: 2px; | |
// top: 2px; | |
// border: 0; | |
// @include box-shadow( | |
// 0 0 0 1px rgba(0,0,0,.08) inset, | |
// 0 2px 2px rgba(0,0,0,.25)); | |
// background: #FFF; | |
// max-width: 16px; | |
// height: 16px; | |
// @include transition( | |
// all ease 1s, | |
// width ease 500ms, | |
// left ease 300ms); | |
// @include border-radius(16px); | |
// overflow: hidden; | |
// &:focus { | |
// outline: none; | |
// cursor: pointer; | |
// } | |
// .ToggleContents { | |
// float: left; | |
// width: 30px; | |
// height: 26px; | |
// @include transition(all ease 300ms); | |
// } | |
// } | |
// input#Switch:checked ~ &, | |
// &.On { | |
// background: #3CD96C; | |
// @include box-shadow(0 0 0 25px rgba(60,217,108,1) inset); | |
// .Toggle { | |
// max-width: 15px; | |
// left: 52px; | |
// @include transition( | |
// all ease 1s, | |
// width ease 500ms, | |
// left ease 300ms 300ms); | |
// .ToggleContents { | |
// width: 16px; | |
// @include transition(all ease 300ms 300ms); | |
// } | |
// } | |
// } | |
// } | |
// } | |
@import "compass/css3"; | |
@mixin transition($transitions...) { | |
-webkit-transition: $transitions; | |
-moz-transition: $transitions; | |
-ms-transition: $transitions; | |
-o-transition: $transitions; | |
transition: $transitions; | |
} | |
@mixin border-radius($properties) { | |
-webkit-border-radius: $properties; | |
-moz-border-radius: $properties; | |
border-radius: $properties; | |
} | |
@mixin box-shadow($properties...) { | |
-webkit-box-shadow: $properties; | |
-moz-box-shadow: $properties; | |
-o-box-shadow: $properties; | |
box-shadow: $properties; | |
} | |
@mixin transform($transform) { | |
-webkit-transform: $transform; | |
-moz-transform: $transform; | |
-ms-transform: $transform; | |
-o-transform: $transform; | |
transform: $transform; | |
} | |
#Page { | |
margin: auto; | |
width: 800px; | |
#Poster { | |
margin-top: 100px; | |
} | |
} | |
input#Switch { | |
visibility: hidden; | |
position: absolute; | |
left: -1000%; | |
} | |
.SwitchGroup { | |
float: left; | |
width: 100px; | |
height: 100px; | |
&.Rotate90 { | |
@include transform(rotate(90deg)); | |
} | |
&.Rotate180 { | |
@include transform(rotate(180deg)); | |
} | |
.Switch { | |
float: left; | |
background: #FFF; | |
width: 100px; | |
height: 50px; | |
margin: 0; | |
cursor: pointer; | |
@include border-radius(25px); | |
@include transition(all ease 300ms 100ms); | |
@include box-shadow(0 0 0 2px rgba(0,0,0,.1) inset); | |
.Toggle { | |
position: relative; | |
margin: 0; | |
padding: 0; | |
float: left; | |
left: 2px; | |
top: 2px; | |
border: 0; | |
@include box-shadow( | |
0 0 0 1px rgba(0,0,0,.08) inset, | |
0 2px 2px rgba(0,0,0,.25)); | |
background: #FFF; | |
max-width: 46px; | |
height: 46px; | |
@include transition( | |
all ease 1s, | |
width ease 500ms, | |
left ease 300ms); | |
@include border-radius(25px); | |
overflow: hidden; | |
&:focus { | |
outline: none; | |
cursor: pointer; | |
} | |
.ToggleContents { | |
float: left; | |
width: 100px; | |
height: 46px; | |
@include transition(all ease 300ms); | |
} | |
} | |
input#Switch:checked ~ &, | |
&.On { | |
.Toggle { | |
max-width: 60px; | |
left: 52px; | |
@include transition( | |
all ease 1s, | |
width ease 500ms, | |
left ease 300ms 300ms); | |
.ToggleContents { | |
width: 46px; | |
@include transition(all ease 300ms 300ms); | |
} | |
} | |
} | |
} | |
} |