osr flip

README.md

There are four classes that control the flip

.front-flip-sc - only used for keyframe animations
.back-flip-sc - only used for keyframe animations
.front-sc - styling for the front container
.back-sc - styling for the back container

The click handlers are appended on .cta-sc and .send-sc, but those are (should be?) design agnostic. They are only there for the script.

flip.js

(function() {
  'use strict';

  function _scs(sel) {
    var query = document.querySelectorAll(sel);
    if (query.length === 0)
      return [];
    else if (query.length === 1)
      return query[0];
    else if (query.length > 1)
      return query;
  }

  function flip() {
    var front = _scs('#wrapper-sc div.back-flip-sc');
    var back = _scs('#wrapper-sc div.front-flip-sc');
    toggleClass(front, 'front-flip-sc');
    toggleClass(front, 'back-flip-sc');
    toggleClass(back, 'back-flip-sc');
    toggleClass(back, 'front-flip-sc');
  };

  function toggleClass(el, name) {
    var className = el.className;
    var arr = className !== (null || '') ? el.className.trim().split(' ') : [];
    var index = arr.indexOf(name);
    if (index > -1)
      arr.splice(index, 1);
    else
      arr.push(name);
    el.className = arr.join(' ');
  };

  _scs('.send-sc').addEventListener('click', flip);
  _scs('.cta-sc')[0].addEventListener('click', flip);
  _scs('.cta-sc')[1].addEventListener('click', flip);

})();

script.html

<script>
  !function(){"use strict";function c(c){var e=document.querySelectorAll(c);return 0===e.length?[]:1===e.length?e[0]:e.length>1?e:void 0}function e(){var e=c("#wrapper-sc div.back-flip-sc"),i=c("#wrapper-sc div.front-flip-sc");s(e,"front-flip-sc"),s(e,"back-flip-sc"),s(i,"back-flip-sc"),s(i,"front-flip-sc")}function s(c,e){var s=c.className,i=""!==s?c.className.trim().split(" "):[],n=i.indexOf(e);n>-1?i.splice(n,1):i.push(e),c.className=i.join(" ")}c(".send-sc").addEventListener("click",e),c(".cta-sc")[0].addEventListener("click",e),c(".cta-sc")[1].addEventListener("click",e)}();
</script>