brettbuddin · stutrek · Jan 24, 2013 · Jan 24, 2013 · Jan 24, 2013 · Jan 24, 2013
diff --git a/README.md b/README.md
@@ -1,45 +1,45 @@
-# Lectric Slider
+# Frankenslide slider
 
-Lectric is a JavaScript slider that is touch-enabled and takes advantage of hardware acceleration. It looks awesome on Apple touch devices. You can see an early version of this software implemented on [mckinney.com](http://mckinney.com).
-
-It's Electric!
+Frankenslide is a JavaScript slider that is touch-enabled and takes advantage of hardware acceleration. It looks awesome on Apple touch devices. You can see an early version of this software implemented on [mckinney.com](http://mckinney.com).
 
 **Requires:** [jQuery](http://github.com/jquery/jquery)
 
 ## Installation
 
 Put this in your `<head>`:
 
-    <link href="/path/to/css/lectric.css" rel="stylesheet" type="text/css" media="screen">
+    <link href="/path/to/css/frankenslide.css" rel="stylesheet" type="text/css" media="screen">
 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
-    <script src="/path/to/js/lectric.js" type="text/javascript"></script>
+    <script src="/path/to/js/frankenslide.js" type="text/javascript"></script>
 
 ## Usage
 
 HTML:
 
     <div id="slider">
-      <div class="item">Page 1</div>
-      <div class="item">Page 2</div>
-      <div class="item">Page 3</div>
-      <div class="item">Page 4</div>
+      <div class="item">Slide 1</div>
+      <div class="item">Slide 2</div>
+      <div class="item">Slide 3</div>
+      <div class="item">Slide 4</div>
     </div>
 
 JavaScript:
 
-    var slider = new Lectric();
+    var slider = new Frankenslide();
     slider.init('#slider');
 
 ## Optional Parameters
 
 You can specify a few extra parameters when you call the `init` method. Those include:
 
-- `next` *(selector)*: Next button
-- `previous` *(selector)*: Previous button
+- `next` *(selector)*: Next slide button
+- `previous` *(selector)*: Previous slide button
+- `nextPage` *(selector)*: Next page button. This will advance as many slides as fit in the viewport.
+- `previousPage` *(selector)*: Previous tile button. This will go back as many slides as fit in the viewport.
 - `limitLeft` *(boolean)*: Prohibits the slider from moving left
 - `limitRight` *(boolean)*: Prohibits the slider from moving right
-- `itemClassName` *(string)*: Class name of the individual pages of the slider (defaults to "item")
+- `itemClassName` *(string)*: Class name of the individual slides of the slider (defaults to "item")
 - `itemWrapperClassName` *(string)*: Class name of the container that wraps all items (defaults to "items")
 - `animateEasing` *(string)*: A string indicating which easing function to use for the transition (non-mobile only).
 - `animateDuration` *(integer or string)*: A string (e.g. "fast" or "slow") or number (in milliseconds) determining how long a slide animation will run.
@@ -49,36 +49,36 @@ You can specify a few extra parameters when you call the `init` method. Those in
 
 For example, let's provide a slider with next/previous buttons:
 
-    var slider = new Lectric();
+    var slider = new frankenslide();
     slider.init('#slider', {next: '.next', previous: '.previous'});
 
 ## Hook System
 
-Lectric is designed to give you a great deal of visibility of its insides. To help you extend Lectric, we've provided a simple hook system for you to tap into. Hooks have specific names and are invoked at specific times in the execution of the slider's timeline. 
+Frankenslide is designed to give you a great deal of visibility of its insides. To help you extend frankenslide, we've provided a simple hook system for you to tap into. Hooks have specific names and are invoked at specific times in the execution of the slider's timeline. 
 
 Subscribing to a hook looks something like this:
 
-    slider.subscribe('slide', function(s, event) {
+    slider.on('move', function(s, event) {
       console.log('We just moved! Our current position is:' + s.position.x);
     });
 
 Unsubscribing from a hook looks like this:
 
-    var handler = slider.subscribe('slide', function(s, event) {
+    var handler = slider.on('move', function(s, event) {
       console.log('We just moved! Our current position is:' + s.position.x);
     });
-    slider.unsubscribe('slide', handler); // Unsubscribe handler from slider
+    slider.off('move', handler); // Unsubscribe handler from slider
 
 The hooks available to you are:
 
-- `init`: Triggered when after the slider is initialized
+- `init`: Triggered after the slider is initialized
 - `start`: Triggered when the user puts her finger down on the slider
-- `slide`: Triggered when the position of the slider is moved
+- `move`: Triggered when the position of the slider is moved
 - `firstSlide`: Triggered the first time the position of the slider is moved (for a single touch event)
 - `end`: Triggered when the user lifts her finger off of the slider
 - `endNoSlide`: Triggered when the user lifts her finger off of the slider and did not move the slider
 - `animationEnd`: Triggered when the slide animation has completed
 - `nextButton`: Triggered when the next button is pressed
 - `previousButton`: Triggered when the previous button is pressed
 
-The callback function that you provide the `subscribe` function will pass your callback two parameters: slider controller instance you are manipulating and the jQuery event object that was triggered. Having a reference to the controller object will allow you to augment the behaviour of the slider itself.
+The callback function that you provide the `on` function will pass your callback two parameters: slider controller instance you are manipulating and the jQuery event object that was triggered. Having a reference to the controller object will allow you to augment the behaviour of the slider itself.
diff --git a/Rakefile b/Rakefile
@@ -5,22 +5,22 @@ require 'jslint'
 require 'webrick'
 
 prefix = File.dirname(__FILE__)
-lectric = File.join(prefix, 'js', 'lectric.js')
-lectric_min = File.join(prefix, 'js', 'lectric.min.js')
+frankenslide = File.join(prefix, 'js', 'frankenslide.js')
+frankenslide_min = File.join(prefix, 'js', 'frankenslide.min.js')
 version = File.join(prefix, 'VERSION')
 
 task :default => :build
 
-desc "Build and minify Lectric."
+desc "Build and minify frankenslide."
 task :build => [:lint, :stamp_version, :minify] do
-  puts "Lectric build complete."
+  puts "frankenslide build complete."
 end
 
 desc "Stamp the library with the current version"
 task :stamp_version => :version do
-  contents = File.read(lectric)
-  file = File.open(lectric, 'w')
-  file.puts contents.gsub(/(Lectric v)([\d\w\.-]+)/, "\\1#{@version}")
+  contents = File.read(frankenslide)
+  file = File.open(frankenslide, 'w')
+  file.puts contents.gsub(/(frankenslide v)([\d\w\.-]+)/, "\\1#{@version}")
   file.close
 end
 
@@ -35,22 +35,22 @@ end
 
 desc "Compress the library using Google's Closure Compiler"
 task :minify => :version do
-  puts "Minifying Lectric..."
+  puts "Minifying frankenslide..."
   comments = <<-EOS
   /*!
-   * Lectric v#{@version}
-   * http://github.com/mckinney/lectric
+   * frankenslide v#{@version}
+   * http://github.com/mckinney/frankenslide
    *
    * Copyright 2011, McKinney
    * Licensed under the MIT license.
-   * http://github.com/mckinney/lectric/blob/master/LICENSE
+   * http://github.com/mckinney/frankenslide/blob/master/LICENSE
    *
    * Author: Brett C. Buddin
    */
   EOS
 
-  file = File.open(lectric_min, 'w')
-  file.puts comments + Closure::Compiler.new.compile(File.open(lectric, 'r'))
+  file = File.open(frankenslide_min, 'w')
+  file.puts comments + Closure::Compiler.new.compile(File.open(frankenslide, 'r'))
   file.close
 end
 

diff --git a/css/lectric.css → css/frankenslide.css b/css/lectric.css → css/frankenslide.css
@@ -1,17 +1,17 @@
-.lectric-slider,.lectric-slider .items {
+.frankenslide-slider,.frankenslide-slider .items {
   position: relative;
 }
-.lectric-slider .items {
+.frankenslide-slider .items {
   left: 0;
   width: 100000px;
 }
-.lectric-slider-touch {
+.frankenslide-slider-touch {
   -webkit-transform: translate3d(0, 0, 0);
 }
-.lectric-slider-touch .items {
+.frankenslide-slider-touch .items {
   -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   -webkit-font-smoothing: antialiased;
 }
-.lectric-slider-touch .item {
+.frankenslide-slider-touch .item {
   -webkit-transform: translate3d(0, 0, 0);
 }
diff --git a/examples/autoplay.html b/examples/autoplay.html
@@ -6,8 +6,8 @@
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
 
-  <link href="../css/lectric.css" rel="stylesheet" media="screen" type="text/css">
-  <script src="../js/lectric.js" type="text/javascript"></script>
+  <link href="../css/frankenslide.css" rel="stylesheet" media="screen" type="text/css">
+  <script src="../js/frankenslide.js" type="text/javascript"></script>
 
   <style>
     * {
@@ -86,7 +86,7 @@
   <script type="text/javascript">
   $(function() {
     // Initialize the slider
-    var slider = new Lectric();
+    var slider = new frankenslide();
     slider.init('#slider', {next: '.next', previous: '.previous'});
 
     var count = 0;

diff --git a/examples/scrubber.html b/examples/scrubber.html
@@ -6,8 +6,8 @@
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
 
-  <link href="../css/lectric.css" rel="stylesheet" media="screen" type="text/css">
-  <script src="../js/lectric.js" type="text/javascript"></script>
+  <link href="../css/frankenslide.css" rel="stylesheet" media="screen" type="text/css">
+  <script src="../js/frankenslide.js" type="text/javascript"></script>
 
   <style>
     * {
@@ -86,11 +86,11 @@
   <script type="text/javascript">
   $(function() {
     // Initialize the slider
-    var slider = new Lectric();
+    var slider = new frankenslide();
     slider.init('#slider', {next: '.next', previous: '.previous'});
 
     // Initialize the scrubber
-    var scrubber = new Lectric();
+    var scrubber = new frankenslide();
     scrubber.init('#scrubber', {reverse: true});
 
     // Get the relative scale between the two sliders

diff --git a/examples/simple.html b/examples/simple.html
@@ -6,8 +6,8 @@
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
 
-  <link href="../css/lectric.css" rel="stylesheet" media="screen" type="text/css">
-  <script src="../js/lectric.js" type="text/javascript"></script>
+  <link href="../css/frankenslide.css" rel="stylesheet" media="screen" type="text/css">
+  <script src="../js/frankenslide.js" type="text/javascript"></script>
 
   <style>
     #slider {
@@ -46,7 +46,7 @@
   <script type="text/javascript">
   $(function() {
     // Initialize the slider
-    var slider = new Lectric();
+    var slider = new frankenslide();
     slider.init('#slider', {next: '.next', previous: '.previous'});
 
     // Keyboard shortcuts for left and right arrows

diff --git a/examples/thin-slides.html b/examples/thin-slides.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html>
+<head>
+  <title>Simple</title>
+  <meta name="viewport" content="width=600, initial-scale=1.0">
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
+
+  <link href="../css/frankenslide.css" rel="stylesheet" media="screen" type="text/css">
+  <script src="../js/frankenslide.js" type="text/javascript"></script>
+
+  <style>
+    #slider {
+      height: 300px;
+      width: 500px;
+      margin-bottom: 1em;
+    }
+    #slider .item {
+      height: 300px;
+      width: 100px;
+      margin-right: 10px;
+      padding: 10px;
+      background-color: #ccc;
+    }
+    .next,.previous, .nextPage, .previousPage {
+      display: block;
+      padding: 1em;
+      float: left;
+      color: #fff;
+      background-color: #000;
+      margin-right: 0.5em;
+    }
+  </style>
+</head>
+<body>
+  <div id="slider">
+    <div class="item">Hello world 1</div>
+    <div class="item">Hello world 2</div>
+    <div class="item">Hello world 3</div>
+    <div class="item">Hello world 4</div>
+    <div class="item">Hello world 5</div>
+    <div class="item">Hello world 6</div>
+    <div class="item">Hello world 7</div>
+    <div class="item">Hello world 8</div>
+    <div class="item">Hello world 9</div>
+    <div class="item">Hello world 10</div>
+    <div class="item">Hello world 11</div>
+    <div class="item">Hello world 12</div>
+    <div class="item">Hello world 13</div>
+    <div class="item">Hello world 14</div>
+    <div class="item">Hello world 15</div>
+    <div class="item">Hello world 16</div>
+    <div class="item">Hello world 17</div>
+    <div class="item">Hello world 18</div>
+  </div>
+
+  <a href="" class="previous">Previous</a>
+  <a href="" class="next">Next</a>
+  <a href="" class="previousPage">Previous Page</a>
+  <a href="" class="nextPage">Next Page</a>
+
+  <script type="text/javascript">
+  $(function() {
+    // Initialize the slider
+    var slider = new frankenslide();
+    slider.init('#slider', {next: '.next', previous: '.previous', nextPage: '.nextPage', previousPage: '.previousPage'});
+
+    // Keyboard shortcuts for left and right arrows
+    $(document).keydown(function(e) {
+      if (e.keyCode === 39) { 
+        e.preventDefault();
+        var previous = slider.page();
+        slider.to(previous + 1);
+      } else if (e.keyCode === 37) { 
+        e.preventDefault();
+        var previous = slider.page();
+        slider.to(previous - 1);
+      }
+    });
+  });
+  </script>
+</body>
+</html>
diff --git a/extensions/XofY.js b/extensions/XofY.js
@@ -0,0 +1,47 @@
+/*!
+ * Autoplay for frankenslide
+ * Copyright 2013 Stu Kabakoff
+ * Licensed under the MIT license.
+ */
+(function( factory ) {
+  //AMD
+  if(typeof define === 'function' && define.amd) {
+    define(['jquery'], factory);
+
+  //NODE
+  } else if(typeof module === 'object' && module.exports) {
+    var jquery = require('jquery');
+    module.exports = factory(jquery);
+
+  //GLOBAL
+  } else {
+    window.frankenslideXofY = factory(jQuery);
+  }
+})(function($) {
+
+  function XofY() {
+    var self = this;
+
+    this.update = function() {
+      var slideIndex = self.slider.currentSlide+1;
+      var totalSlides = self.slider.slideCount();
+      var newText = self.beforeText+' '+slideIndex+' '+self.of+' '+totalSlides+' '+self.afterText;
+      self.$container.html( $.trim(newText) );
+    }
+  }
+
+  XofY.prototype = {
+    of: 'of',
+    beforeText: '',
+    afterText: '',
+    init: function( container, slider ) {
+      this.$container = $(container);
+      this.slider = slider;
+
+      slider.on('animationEnd', this.update);
+      this.update()
+    }
+  };
+
+  return XofY;
+});