WIP

tabs.slim

---
layout: false
---
sass:
  nav[role='tablist']
    text-align: center
    background-color: #f00

  label[role='tab']
    font-weight: 300
    display: inline-block
    font-size: 16px
    padding: 25px
    margin-bottom: 0
    color: #ccc
    &:hover
      text-decoration: none
      cursor: pointer
      color: #fff
    &[aria-selected='true']
      font-weight: 700
      color: #000

  input
    &[type='radio'], &[type='checkbox']
      &[aria-hidden='false']
        display: none
      & + [role='tabpanel']
        // display: none
        overflow: hidden
        -webkit-transition-duration: .5s
        transition-duration: .5s
      &:checked + [role='tabpanel']
        //display: block
        background-color: #0f0

  [role='tabpanel']:focus
    outline: transparent none 0

  %animate
    -webkit-animation-duration: 5s
    animation-duration: 5s
    -webkit-animation-fill-mode: both
    animation-fill-mode: both

  @-webkit-keyframes shake
    0%, 100%
      -webkit-transform: translate3d(0, 0, 0)

    10%, 30%, 50%, 70%, 90%
      -webkit-transform: translate3d(-10px, 0, 0)

    20%, 40%, 60%, 80%
      -webkit-transform: translate3d(10px, 0, 0)

  .shake
    -webkit-animation-name: shake
    @extend %animate

  @-webkit-keyframes swing
    20%
      -webkit-transform: rotate3d(0, 0, 1, 15deg)
    40%
      -webkit-transform: rotate3d(0, 0, 1, -10deg)
    60%
      -webkit-transform: rotate3d(0, 0, 1, 5deg)
    80%
      -webkit-transform: rotate3d(0, 0, 1, -5deg)
    100%
      -webkit-transform: rotate3d(0, 0, 1, 0deg)

  .swing
    -webkit-transform-origin: top center
    -webkit-animation-name: swing
    @extend %animate
    

//coffee:
  document.addEventListener 'DOMContentLoaded', ->
    a = ->
      return [
        document.querySelectorAll('label[role=tab]')
        document.querySelector('label[role=tab][aria-selected=true]')
        document.querySelector(location.hash + '-tab') if location.hash
      ]
    b = ->
      f =
        animation: 'animationend'
        OAnimation: 'oAnimationEnd'
        msAnimation: 'MSAnimationEnd'
        webkitAnimation: 'webkitAnimationEnd'
      g = document.createElement 'template'
      for h of f
        return f[h] if g.style[h] isnt `undefined`
    c = (i) ->
      Object.keys(i).forEach (j) ->
        i[j].cl = i[j].cl.split(' ') if typeof i[j].cl is 'string'
        i[j].cl.forEach (k) ->
          i[j].el.classList.add k
        i[j].el.addEventListener b(), l = (m) ->
          m.target.removeEventListener m.type, l
          i[j].cl.forEach (n) ->
            i[j].el.classList.remove n
    d = (o) ->
      p = a()
      if p[1] is null or o isnt (p[1] or p[2])
        [].forEach.call p[0], (q) ->
          q.setAttribute('aria-selected', false) if o isnt q
        o.setAttribute 'aria-selected', true
        location.href = o.parentNode.href if o.parentNode.href?
        r = (s) ->
          return document.getElementById(s.getAttribute('aria-controls'))
        if p[1]
          t =
            1:
              el: r(p[1])
              cl: 'shake'
            2:
              el: r(o)
              cl: 'swing'
          c(t)
    e = ->
      u = a()
      if location.hash then u[2].click() else u[0][0].click()
    [].forEach.call a()[0], (v) ->
      v.addEventListener 'click', (w) ->
        d(v)
    window.addEventListener 'hashchange', ->
      e()
    e()

javascript:
  (function(){document.addEventListener("DOMContentLoaded",function(){var n,i,r,u,t;n=function(){return[document.querySelectorAll("label[role=tab]"),document.querySelector("label[role=tab][aria-selected=true]"),location.hash?document.querySelector(location.hash+"-tab"):void 0]},i=function(){var n,i,t;n={animation:"animationend",OAnimation:"oAnimationEnd",msAnimation:"MSAnimationEnd",webkitAnimation:"webkitAnimationEnd"},i=document.createElement("template");for(t in n)if(i.style[t]!==undefined)return n[t]},r=function(n){Object.keys(n).forEach(function(t){var r;typeof n[t].cl=="string"&&(n[t].cl=n[t].cl.split(" ")),n[t].cl.forEach(function(i){n[t].el.classList.add(i)}),n[t].el.addEventListener(i(),r=function(i){i.target.removeEventListener(i.type,r),n[t].cl.forEach(function(i){n[t].el.classList.remove(i)})})})},u=function(t){var i,u,f;i=n(),(i[1]===null||t!==(i[1]||i[2]))&&([].forEach.call(i[0],function(n){t!==n&&n.setAttribute("aria-selected",!1)}),t.setAttribute("aria-selected",!0),t.parentNode.href!=null&&(location.href=t.parentNode.href),u=function(n){return document.getElementById(n.getAttribute("aria-controls"))},i[1]&&(f={1:{el:u(i[1]),cl:"shake"},2:{el:u(t),cl:"swing"}},r(f)))},t=function(){var t;t=n(),location.hash?t[2].click():t[0][0].click()},[].forEach.call(n()[0],function(n){n.addEventListener("click",function(){u(n)})}),window.addEventListener("hashchange",function(){t()}),t()})}).call(this);

nav@tablist
  a(href='#webdev')
    label#webdev-tab@tab(aria-controls='webdev' for='webdev-control' tabindex='0') Web Developer

  a(href='#macguy')
    label#macguy-tab@tab(aria-controls='macguy' for='macguy-control' tabindex='0') Mac Genius

  a(href='#building')
    label#building-tab@tab(aria-controls='building' for='building-control' tabindex='0') Home Builder

  a(href='#massage')
    label#massage-tab@tab(aria-controls='massage' for='massage-control' tabindex='0') Massage Therapist

div
  &radio#webdev-control(aria-hidden='false' name='tabs' checked='checked')
  div#webdev@tabpanel(aria-labelledby='webdev-tab' tabindex='0')
    p Web Dev

  &radio#macguy-control(aria-hidden='false' name='tabs')
  div#macguy@tabpanel(aria-labelledby='macguy-tab' tabindex='0')
    p Mac Guy

  &radio#building-control(aria-hidden='false' name='tabs')
  div#building@tabpanel(aria-labelledby='building-tab' tabindex='0')
    p Home Build

  &radio#massage-control(aria-hidden='false' name='tabs')
  div#massage@tabpanel(aria-labelledby='massage-tab' tabindex='0')
    p Massage