groundworkcss 0.4.4 → 2.0.0

data/app/assets/images/groundworkcss/groundwork-logo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?>

data/app/assets/javascripts/groundworkcss/all.js

@@ -0,0 +1,4 @@
+/*
+ *= require_tree './plugins'
+ *= require_tree './components'
+ */

data/app/assets/javascripts/groundworkcss/components/checklists.coffee

@@ -0,0 +1,8 @@
+$ ->
+
+  $('body').on 'click', '.checklist:not([readonly]) li:not([readonly])', ->
+    if $(@).attr('aria-checked') == "true" or $(@).attr('data-checked') == "true" or $(@).attr('checked') == "checked" or $(@).hasClass('checked') or $(@).hasClass('completed')
+      $(@).attr('aria-checked', "false")
+    else
+      $(@).attr('aria-checked', "true")
+    $(@).removeClass('checked completed').removeAttr('data-checked').removeAttr('checked')

data/app/assets/javascripts/groundworkcss/components/dismissible.coffee

@@ -1,4 +1,8 @@
 $ ->
-  $(".dismissible").click ->
-    $(this).hide 150, ->
-      $(this).remove()
+
+  $('body').on 'click', '.dismissible', ->
+    $(@).addClass('dismiss animated')
+    setTimeout( =>
+      $(@).hide 250, ->
+        $(@).remove()
+    , 1000)

data/app/assets/javascripts/groundworkcss/components/equalizeColumns.coffee

@@ -8,7 +8,7 @@ equalizeColumns = ->
     tallest = 0
     collapsed = false
     
-    $row.children('*').each (i) ->
+    $row.children().each (i) ->
       $this = $ this
       $this.css('minHeight','1px')
       collapsed = ($this.outerWidth() == $row.outerWidth())
@@ -16,7 +16,6 @@ equalizeColumns = ->
         $this.addClass('equal') unless $this.hasClass('equal')
         if $this.outerHeight() > tallest
           tallest = $this.outerHeight()
-          
       return 
-      
-    $row.children('*').css('min-height', tallest) unless collapsed
+
+    $row.children().css('min-height', tallest) unless collapsed

data/app/assets/javascripts/groundworkcss/components/menus.coffee

@@ -1,174 +1,40 @@
-navSelector = if $('.nav').length > 0 then '.nav' else 'nav'
-
-$window = $(window)
-
 $ ->
-  # navigation menus
-  $body = $('body')
-
-  delay = undefined
-
-  # open submenu function
-  openMenu = ($target) ->
-    $target.parents('li.menu').toggleClass('on')
-
-    return
-
-  # hover on
-  $body.on 'mouseenter', navSelector + ' > ul > li.menu:not(.disabled)', (e) ->
-    if $window.width() >= 768
-      clearTimeout(delay)
-      $(navSelector + ' > ul > li.menu.on').removeClass('on')
-      $(this).addClass('on')
 
-    return
-
-  # hover off
-  $body.on 'mouseleave', navSelector + ' > ul > li.menu:not(.disabled)', (e) ->
-    if $window.width() >= 768
-      delay = setTimeout (->
-        $(navSelector + ' > ul > li.menu.on').removeClass('on')
-      ), 350
-
-    return
-
-  # click/touch
-  $body.on 'click', navSelector + ' > ul > li.menu:not(.disabled) > a', (e) =>
-    $target = $(e.target)
-
-    if !$target.hasClass('focused')
-      if Modernizr.touch || $window.width() < 768
-        openMenu($target)
-      else
-        $(navSelector + ' > ul > li.menu.on').removeClass('on')
-        $target.parents('li.menu').addClass('on')
-    else
-      $target.removeClass('focused')
-
-    e.stopImmediatePropagation()
-    
-    return false
-  
-  # keyboard accessibility
-  $body.on 'focusin', navSelector + ' > ul > li.menu > a', (e) ->
-    $target = $(e.currentTarget)
-    
-    $target.addClass('focused')
-    openMenu($target)
-
-    e.stopImmediatePropagation()
+  $body = $('body')
 
-    return
-    
-  $body.on 'focusin', navSelector + ' > ul > li.menu:not(.on) > a', (e) ->
-    $(navSelector + ' > ul > li.menu.on').removeClass('on')
-    
-    return
+  # init
+  $('.dropdown').each ->
+    unless $(@).attr('aria-pressed') == 'true'
+      $(@).attr('aria-pressed', 'false')
+      $(@).children('ul').attr
+        'aria-expanded': 'false'
+        'aria-hidden': 'true'
+        'role': 'menu'
 
-  # dropdown buttons
   $body.on 'dropdown', (e) ->
     $target = $(e.target)
-
-    $('.dropdown').not($target).removeClass('on')
-
-    $target[if $target.hasClass('on') then 'removeClass' else 'addClass']('on')
-
-    return
+    $('.dropdown').not($target).attr('aria-pressed', 'false')
+    $('.dropdown').children('ul').attr
+      'aria-expanded': 'false'
+      'aria-hidden': 'true'
+    $target.attr('aria-pressed', (if $target.attr('aria-pressed') == 'true' then 'false' else 'true'))
+    $target.children('ul').attr
+      'aria-expanded': (if $target.attr('aria-pressed') == 'true' then 'true' else 'false')
+      'aria-hidden': (if $target.attr('aria-pressed') == 'true' then 'false' else 'true')
 
   $body.on 'click', '.dropdown', (e) ->
     $target = $(e.currentTarget)
-
-    if !$target.is('a')
+    if not ($target.is('a') || $target.is('button'))
       e.stopPropagation()
-
     if !$target.hasClass('focused')
       $target.trigger('dropdown')
     else
       $target.removeClass('focused')
 
-    return
-
   $body.on 'click', ->
-    $dropdown = $('.dropdown.on')
+    $dropdown = $('.dropdown[aria-pressed="true"]')
     if $dropdown.length
-      $dropdown.removeClass('on')
-
-    $menu = $(navSelector + '.menu.on')
-    if $menu.length
-      $menu.removeClass('on')
-
-    return
-
-  # keyboard accessibility
-  $body.on 'focus', '.dropdown', (e) ->
-    $target = $(e.currentTarget)
-
-    if not $(e.target).is('a')
-      if $target.hasClass('dropdown')
-        $target.addClass('focused').trigger('dropdown')
-    else
-      e.stopPropagation()
-
-    return
-
-  $body.on 'focusout', '.dropdown li:last-child a', (e) ->
-    $('.dropdown.on').removeClass('on')
-
-    return
-
-  # hamburger menus
-  $body.on 'menu-toggle', (e) ->
-    $target = $(e.target).parents(navSelector + '.menu')
-
-    $target[if $target.hasClass('on') then 'removeClass' else 'addClass']('on')
-
-    return
-
-  $(navSelector + '.menu').each ->
-    $this = $(this)
-    $this.attr('data-label','Menu') unless $this.attr('data-label')
-    $this.prepend('<a href="#" class="menu-toggle"><i class="icon-reorder"></i></a>') unless $this.find('.menu-toggle').length > 0
-
-    return
-
-  $body.on 'click', navSelector + '.menu .menu-toggle', (e) ->
-    $target = $(e.target)
-
-    e.stopPropagation()
-    e.preventDefault()
-
-    if $target.parents('.menu-toggle').length
-      $parent = $target.parents('.menu-toggle')
-      if !$parent.hasClass('focused')
-        $parent.trigger('menu-toggle')
-      else
-        $parent.removeClass('focused')
-    else if !$target.hasClass('focused')
-      $target.trigger('menu-toggle')
-    else
-      $target.removeClass('focused')
-
-    return
-
-  # keyboard accessibility
-  $body.on 'focusin', navSelector + '.menu .menu-toggle', (e) ->
-    $target = $(e.target)
-
-    if $target.hasClass('menu-toggle')
-      $target.addClass('focused').trigger('menu-toggle')
-    else if ($parent = $target.parents('.menu-toggle')).length
-      $parent.addClass('focused').trigger('menu-toggle')
-
-    return
-
-  $body.on 'focusout', navSelector + '.menu > ul > li:last-child a', (e) ->
-    $(navSelector + '.menu.on').removeClass('on')
-
-    return
-
-  return
+      $dropdown.attr('aria-pressed', 'false')
 
-$window.on 'resize', ->
-  selector = $(navSelector + ' > ul > li.menu.on')
-  if selector.length > 1
-    selector.removeClass('on').first().addClass('on')
+  $body.on 'focusout', '.dropdown li:last-child a, .dropdown li:last-child button', (e) ->
+    $('.dropdown[aria-pressed="true"]').attr('aria-pressed', 'false')

data/app/assets/javascripts/groundworkcss/components/navigation.coffee

@@ -0,0 +1,90 @@
+###
+ *
+ *  Responsive Navigation by Gary Hepting
+ *  
+ *  Open source under the MIT License. 
+ *
+ *  Copyright © 2013 Gary Hepting. All rights reserved.
+ *
+###
+
+responsiveNavigationIndex = 0
+window.delayMenuClose = ''
+window.delayNavigationClose = ''
+
+class ResponsiveNavigation
+
+  constructor: (el) ->
+    @index = responsiveNavigationIndex++
+    @el = $(el)
+    @init()
+
+  init: ->
+    @defaultLabel()
+    @setupMarkers()
+    @hamburgerHelper()
+
+  defaultLabel: ->
+    if @el.attr('title') == undefined
+      @el.attr('title', 'Menu')
+
+  setupMarkers: ->
+    @el.find('li').each ->
+      if $(@).find('ul').length
+        $(@).attr('role', 'menu')
+
+  hamburgerHelper: ->
+    @el.prepend('<button class="hamburger"></button>')
+
+$ ->
+
+  mouseBindings = -> # needs more <3
+    $('body').on 'mouseenter', '.nav li[role="menu"]', (e) ->
+      unless $(@).parents('.nav').find('button.hamburger').is(':visible')
+        clearTimeout(window.delayMenuClose)
+        $(@).siblings().find('ul[aria-expanded="true"]').attr('aria-expanded', 'false')
+        # $(@).children('ul').attr('aria-expanded', 'true')
+        $(e.target).parents('li[role="menu"]').children('ul').attr('aria-expanded', 'true')
+
+    $('body').on 'mouseleave', '.nav li[role="menu"]', (e) ->
+      unless $(@).parents('.nav').find('button.hamburger').is(':visible')
+        window.delayMenuClose = setTimeout( =>
+          $(@).find('ul[aria-expanded="true"]').attr('aria-expanded', 'false')
+        , 500)
+
+  touchBindings = ->
+    $('body').on 'click', '.nav li[role="menu"] > a, .nav li[role="menu"] > button', (e) ->
+      list = $(@).siblings('ul')
+      menu = $(@).parent('[role="menu"]')
+      if list.attr('aria-expanded') != 'true'
+        list.attr('aria-expanded', 'true')
+      else
+        list.attr('aria-expanded', 'false')
+        list.find('[aria-expanded="true"]').attr('aria-expanded', 'false')
+      if menu.attr('aria-pressed') != 'true'
+        menu.attr('aria-pressed', 'true')
+      else
+        menu.attr('aria-pressed', 'false')
+        menu.find('[aria-pressed="true"]').attr('aria-pressed', 'false')
+        menu.find('[aria-expanded="true"]').attr('aria-expanded', 'false')
+      e.preventDefault()
+
+    $('body').on 'click', '.nav button.hamburger', (e) ->
+      list = $(@).siblings('ul')
+      if list.attr('aria-expanded') != 'true'
+        list.attr('aria-expanded', 'true')
+      else
+        list.attr('aria-expanded', 'false')
+        list.find('[aria-pressed="true"]').attr('aria-pressed', 'false')
+        list.find('[aria-expanded="true"]').attr('aria-expanded', 'false')
+      e.preventDefault()
+
+  responsiveNavigationElements = []
+
+  $('.nav').each ->
+    responsiveNavigationElements.push( new ResponsiveNavigation(@) )
+
+  # initialize bindings
+  touchBindings()
+  unless Modernizr.touch
+    mouseBindings()

data/app/assets/javascripts/groundworkcss/components/tabs.coffee

@@ -1,20 +1,85 @@
 $ ->
-  # tabs
-  $('body').on 'click', '.tabs > ul li a[href^=#], [role=tab] a', (e) ->
-    $this = $ this
-    unless $this.hasClass('disabled')
-      
-      if $this.parents('[role=tabpanel]').length > 0
-        tabs = $this.parents('[role=tabpanel]')
-      else
-        tabs = $this.parents('.tabs')
-        
-      tabs.find('> ul li a, [role=tab] a').removeClass('active')
-      $this.addClass('active')
-      tabs.children('div, [role=tabpanel]').removeClass('active')
-      tabs.children($this.attr('href')).addClass('active')
-      
+
+  $('.tabs').each ->
+    activeTab = $(@).children('ul').children('li.active')
+    if activeTab.length
+      tabs = activeTab.parents('.tabs')
+      tabs.find(activeTab.attr('aria-controls')).addClass('active')
+    else
+      $(@).children('ul').children('li').first().addClass('active')
+      $(@).children('div').first().addClass('active')
+
+  $('body').on 'click', '.tabs > ul li', (e) ->
+    tab = $(@).addClass('active')
+    tabs = tab.parents('.tabs')
+    tab.siblings('li').removeClass('active')
+    tabs.find('> div, > ul > div').hide()
+    tabs.find(tab.attr('aria-controls')).show()
     e.preventDefault()
-    return false
-    
-  return
+
+  transformTabs = ->
+    viewport = $(window).width()
+    if viewport <= 480
+      restoreTabStructure('.tabs.accordion.mobile')
+      convertToAccordion('.tabs:not(.accordion):not(.mobile)')
+    else if viewport < 768
+      restoreTabStructure('.tabs.accordion.mobile, .tabs.accordion.small-tablet')
+      convertToAccordion('.tabs:not(.accordion):not(.mobile):not(.small-tablet)')
+    else if viewport <= 1024
+      restoreTabStructure('.tabs.accordion.mobile, .tabs.accordion.small-tablet, .tabs.accordion.ipad')
+      convertToAccordion('.tabs:not(.accordion):not(.mobile):not(.small-tablet):not(.ipad)')
+    else if viewport > 1024
+      restoreTabStructure('.tabs.accordion')
+
+  convertToAccordion = (tabTypes) ->
+    tabTypes = $(tabTypes)
+    tabTypes.each ->
+      tabs = $(@)
+      tabs.addClass('accordion')
+      tabs.find('> div').each ->
+        tabpanel = $(@).clone()
+        tabs.find('li[aria-controls="#'+tabpanel.attr('id')+'"]').after(tabpanel)
+        $(@).remove()
+
+  restoreTabStructure = (tabTypes) ->
+    $(tabTypes).each ->
+      tabs = $(@)
+      tabs.removeClass('accordion')
+      if tabs.hasClass('vertical')
+        adjustVerticalTabs(tabs)
+      tabs.children('ul').children('div').each ->
+        tabpanel = $(@).clone()
+        tabs.append(tabpanel)
+        $(@).remove()
+
+  # adjustHorizontalTabs = (tabs) ->
+  #   tabs = $(tabs)
+  #   unless tabs.length
+  #     tabs = $('.tabs:not(.vertical)')
+  #   tabs.each ->
+
+  adjustVerticalTabs = (tabs) ->
+    tabs = $(tabs)
+    unless tabs.length
+      tabs = $('.tabs.vertical')
+    tabs.each ->
+      if $(@).hasClass('vertical')
+        $(@).children('ul').css
+          'min-height': '0px'
+        unless $(@).hasClass('accordion')
+          $(@).children('[role="tabpanel"]').css
+            'padding-left': $(@).children('ul').width() + 10 + 'px'
+          $(@).children('ul').css
+            'min-height': $(@).height() + 'px'
+
+  $(window).resize ->
+    clearTimeout(window.delayedAdjustTabs)
+    window.delayedAdjustTabs = setTimeout( ->
+      transformTabs()
+      adjustVerticalTabs()
+    , 50)
+
+  $(window).load ->
+    transformTabs()
+    adjustVerticalTabs()
+