ModernArt

es6-playground.markdown

ES6 playground

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.

License.

index.html

<div id="Page">
  <div id="Poster">
  </div>
</div>

modernart.markdown

ModernArt

a modern art elegant to view and even to read and extend the code

A Pen by Rahul Gaur on CodePen.

License.

script.babel

  /**
   * 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;
}

style.scss

// @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);
        }
      }
    }
  }
}