tweaks for demo

tylersticka · tylersticka · commit 2df241c91b35 · 2013-07-08T16:45:09.000-07:00
diff --git a/demo/index.html b/demo/index.html
@@ -14,6 +14,7 @@
 
     * {
       box-sizing: border-box;
+      -webkit-tap-highlight-color: rgba(0,0,0,0);
     }
 
     body {
@@ -30,7 +31,7 @@
       padding: 1em;
     }
   </style>
-  <!--<script src="../vendor/modernizr.custom.js"></script>-->
+  <script src="../vendor/modernizr.custom.js"></script>
 </head>
 <body>
 
@@ -86,21 +87,21 @@ <h2>Where to get it</h2>
 ('__proto__' in {} ? 'zepto' : 'jquery') +
 '.min.js><\/script>')
 </script>
+<!--<script src="../vendor/jquery.min.js"></script>-->
 <!--<script src="../vendor/jquery.scrollTo.min.js"></script>-->
 <script src="../lib/jquery.simpleslideview.js"></script>
 <script>
 
 var $container = $('.views')
   , containerTop = $container.position().top
-  , $body = $('body')
   , slideView = $container.simpleSlideView({ duration: 250 });
 
-$container.on('viewChangeEnd', function () {
-  if ($body.prop('scrollTop') > containerTop) {
-    console.log('scroll here');
-    // $body.animate({ scrollTop: containerTop }, 2000);
-  }
-});
+// $container.on('viewChangeStart', function () {
+//   if ($(window).scrollTop() > containerTop) {
+//     console.log('scroll here');
+//     // $body.animate({ scrollTop: containerTop }, 2000);
+//   }
+// });
 
 slideView.on();
 
diff --git a/lib/jquery.simpleslideview.js b/lib/jquery.simpleslideview.js
diff --git a/src/jquery.simpleslideview.coffee b/src/jquery.simpleslideview.coffee
@@ -4,17 +4,22 @@ defaults =
   views: '.view'
   activeView: null
   duration: $.fx.speeds._default
-  easing: null
+  easing: if Zepto? then 'ease-out' else 'swing'
   useTransformProps: Zepto?
   use3D: Modernizr? and Modernizr.csstransforms3d
   cssPrefix: if $.fx.cssPrefix? then $.fx.cssPrefix else ''
   resizeHeight: true
   heightDuration: null
   deferHeightChange: Zepto?
+  scrollAfter: if $.scrollTo? then 'scrollTo' else false
   dataAttrEvent: 'click'
   dataAttr:
     push: 'pushview'
     pop: 'popview'
+  classNames:
+    container: 'SimpleSlideView-container'
+    view: 'SimpleSlideView-view'
+    activeView: 'SimpleSlideView-view-active'
   eventNames:
     viewChangeStart: 'viewChangeStart'
     viewChangeEnd: 'viewChangeEnd'
@@ -38,10 +43,13 @@ class SimpleSlideView
     @options = $.extend true, {}, defaults, options
     @options.heightDuration = @options.duration unless @options.heightDuration
     @$container = $ element
-    @$views = @$container.find @options.views
+    @$views = if typeof @options.views is 'string' then @$container.find(@options.views) else $(@options.views)
     @$activeView =  if @options.activeView? then $(@options.activeView) else @$views.first()
 
   on: () ->
+    @$container.addClass @options.classNames.container
+    @$views.addClass @options.classNames.view
+    @$activeView.addClass @options.classNames.activeView
     @$views.not(@$activeView).css 'display', 'none'
     if @options.dataAttrEvent?
       @$container.on @options.dataAttrEvent, '[data-' + @options.dataAttr.push + ']', (event) =>
@@ -60,6 +68,9 @@ class SimpleSlideView
           @popView target
 
   off: () ->
+    @$container.removeClass @options.classNames.container
+    @$views.removeClass @options.classNames.view + ' ' + @options.classNames.activeView
+    # @$activeView.removeClass @options.classNames.activeView
     @$views.css 'display', ''
     if @options.dataAttrEvent?
       @$container.off @options.dataAttrEvent, '[data-' + @options.dataAttr.push + ']'
@@ -123,8 +134,18 @@ class SimpleSlideView
       resetStyles($targetView, resetProps)
       animateHeight() if @options.deferHeightChange
 
+    if @options.scrollAfter
+      containerTop = @$container.position().top
+      if $(window).scrollTop() > containerTop
+        if typeof @options.scrollAfter is 'string' and $[@options.scrollAfter]?
+          $[@options.scrollAfter] containerTop
+        else
+          window.scrollTo(0, containerTop);
+
     animateHeight() unless @options.deferHeightChange
 
+    @$activeView.removeClass @options.classNames.activeView
+    $targetView.addClass @options.classNames.activeView
     @$activeView = $targetView
 
   pushView: (targetView) -> @changeView targetView, true
