Add mark for JS and CSS easings

Rakefile

@@ -105,18 +105,22 @@ class Helpers
     end
   end
 
-  def easings
-    @easings ||= begin
-      YAML.load_file(ROOT.join('easings.yml')).
-        map { |i| Easing.new(i) }.reject(&:linear?)
+  def all_easings
+    @all_easings ||= begin
+      YAML.load_file(ROOT.join('easings.yml')).map { |i| Easing.new(i) }
     end
   end
 
+  def css_easings
+    all_easings.reject(&:linear?).reject { |i| !i.css }
+  end
+
+  def js_easings
+    all_easings.reject(&:linear?).reject { |i| i.css }
+  end
+
   def linear_easing
-    @linear_easing ||= begin
-      YAML.load_file(ROOT.join('easings.yml')).
-        map { |i| Easing.new(i) }.find(&:linear?)
-    end
+    @linear_easings ||= all_easings.find(&:linear?)
   end
 
   def render(file, &block)
@@ -149,6 +153,10 @@ class Helpers
   def easing_example(name = t.howtos.name)
     "<strong>#{ name }</strong>"
   end
+
+  def partial(name)
+    render(LAYOUT.join("_#{name}.slim"))
+  end
 end
 
 def build_file(slim, production = false)

easings.yml

@@ -41,18 +41,18 @@
   css:  cubic-bezier(0.075, 0.82, 0.165, 1)
 - name: easeInOutCirc
   css:  cubic-bezier(0.785, 0.135, 0.15, 0.86)
-- name: easeInElastic
-  css:  no
-- name: easeOutElastic
-  css:  no
-- name: easeInOutElastic
-  css:  no
 - name: easeInBack
   css:  cubic-bezier(0.6, -0.28, 0.735, 0.045)
 - name: easeOutBack
   css:  cubic-bezier(0.175, 0.885, 0.32, 1.275)
 - name: easeInOutBack
   css:  cubic-bezier(0.68, -0.55, 0.265, 1.55)
+- name: easeInElastic
+  css:  no
+- name: easeOutElastic
+  css:  no
+- name: easeInOutElastic
+  css:  no
 - name: easeInBounce
   css:  no
 - name: easeOutBounce

layout/_easing.slim

@@ -0,0 +1,15 @@
+li.easing class=easing_classes(@easing)
+  h3.easing-title= @easing.name
+  - x = 120
+  - y = 60
+  - dots = @easing.dots(100, x, y)
+  a.graph.link href="##{@easing.name}"
+    .example
+      .rect
+      .arrow
+    .dot
+    svg( xmlns="http://www.w3.org/2000/svg"
+         viewBox="-2 -40 #{x + 4} #{y + 80}" )
+      line x1="0" y1="0" x2="#{x}" y2="0"
+      line x1="0" y1="#{y}" x2="#{x}" y2="#{y}"
+      path d="M0,#{y} L#{to_path dots}"

layout/action.js.coffee

@@ -36,13 +36,20 @@ jQuery ($) ->
       $(@).find('.example').stop().css(top: graphBottom).end().
            find('.dot').stop().css(top: dotY, left: dotX)
     over: ->
-      easing = $(@).find('h2').text()
+      easing = $(@).find('.easing-title').text()
       $(@).
         find('.example').animate(top: '-=60', 1000, easing).end().
         find('.dot').animate { top: '-=60', left: '+=119'}
           duration: 1000
           specialEasing: top: easing, left: 'linear'
 
+  # Highlight easings part
+
+  section = $('.easings')
+  titles  = section.find('.part-title')
+  titles.mouseenter -> section.addClass('hightlight-part')
+  titles.mouseleave -> section.removeClass('hightlight-part')
+
   # Show easing description
 
   easingPages = $('.easing-description')

layout/index.html.slim

@@ -1,7 +1,7 @@
 .about
   = t.about
   .easing.linear
-    h2= linear_easing.name
+    h3.easing-title= linear_easing.name
     .graph
       .example
         .rect
@@ -19,24 +19,20 @@
         path d="M0,#{y} L#{to_path dots}"
 
 .page-slider
-  ul.easings
-    - easings.each do |easing|
-      li.easing class=easing_classes(easing)
-        h2= easing.name
-        - x = 120
-        - y = 60
-        - dots = easing.dots(100, x, y)
-        a.graph.link href="##{easing.name}"
-          .example
-            .rect
-            .arrow
-          .dot
-          svg( xmlns="http://www.w3.org/2000/svg"
-               viewBox="-2 -40 #{x + 4} #{y + 80}" )
-            line x1="0" y1="0" x2="#{x}" y2="0"
-            line x1="0" y1="#{y}" x2="#{x}" y2="#{y}"
-            path d="M0,#{y} L#{to_path dots}"
-  .howtos
+  .easings
+    .part.css
+      h2.part-title css+js
+      ul
+        - css_easings.each do |easing|
+          - @easing = easing
+          = partial 'easing'
+    .part.js
+      h2.part-title js
+      ul
+        - js_easings.each do |easing|
+          - @easing = easing
+          = partial 'easing'
+  article.howtos
     section.js
       h3 JavaScript
       p= t.howtos.js.link('jQuery Easing Plugin', 'http://gsgd.co.uk/sandbox/jquery/easing/')
@@ -66,7 +62,7 @@
               -o-transition:      all 600ms #{easing_example(t.howtos.curve)};
               transition:         all 600ms #{easing_example(t.howtos.curve)}; }
 
-  - easings.each do |easing|
+  - all_easings.each do |easing|
     - next if easing.linear?
     article.easing-description class=easing.name
       a.back href="#"

layout/style.css.sass

@@ -59,22 +59,43 @@ $easing-width: 120px + 4px
 .easings
   margin: 0 -30px 0 -10px
   position: relative
+  .part
+    position: relative
+    ul
+      +transition(opacity 400ms)
+  .part-title
+    position: absolute
+    top: -12px
+    right: 35px
+    width: 40px
+    color: #999
+    font-size: 14px
+    font-weight: normal
+    text-align: right
+
+.easings.hightlight-part
+  .part ul
+    opacity: 0.15
+  .part:hover ul
+    opacity: 1
 
 .easing
   list-style: none
   display: inline-block
-  margin: 3px 4px
+  margin: 3px 5px
   padding: 5px
   position: relative
   &.linear
     position: absolute
-    top: 0
-    right: 15px
+    top: 11px
+    right: 25px
+    .easing-title
+      margin-bottom: -35px
   &.in-out
     margin-right: 25px
   &.easeOutElastic h2
     +box-shadow(white 0 26px 8px -8px inset)
-  h2
+  .easing-title
     text-align: center
     font-size: 15px
     font-weight: normal