shining 1.1.0 → 1.1.1

data/README.markdown

@@ -24,10 +24,23 @@ Which leads us to...
 
 # Configuration
 
-Presentation-wide configuration happens through the **config.json** file. The existing
-parameters are what I like to call "self documenting" enough so I'll refrain from
-explaining them for now. The only detail worth nothing is that the slides _have_ to be
-listed in the slides array, or else Shining will ignore their existence.
+Presentation-wide configuration happens through the **config.json** file. Existing
+parameters are:
+
+* slides: an array containing the name of the presentation's slides. If you're using
+the generator to add slides, don't worry about editing it.
+* transitions: See next section.
+
+# Transitions
+
+Transitions take effect when you navigate back or forward your slides. Valid options are:
+
+* "fade": Fades slides out/in.
+* "slide": Slides them horizontally.
+* "slice": Cool horizontal slicing effect.
+* false: Setting to false disables transitions altogether.
+
+For anything not false, make sure you're passing a proper string.
 
 # Slides
 
@@ -55,6 +68,23 @@ Say you have a slide template named **ROOT/slides/test.haml**. Running the afore
 command will generate a new **test.html** from it. Note that this will _overwrite_ an
 existing **test.html** slide if one exists.
 
+# Slide scripts
+
+Slides can have an associated script which you can use to trigger certain actions
+(e.g.: effects) at a predetermined time. If you used the generator to create a slide,
+you'll notice a .js file got created along with it. That's the script we're talking
+about. So for instance, say you have 2 hidden paragraphs in your slide, and you intent 
+to show one after another. Open that .js file and do
+
+    1, $('p:first').effect('fades-in')
+    3, $('p:eq(1)').effect('fades-in')
+    
+The above translates to: 1 second into this slide, fade in the first
+paragraph. 3 seconds in, fade in the second paragraph.
+
+This is handy if you want to schedule things you'd like to see happening at certain
+stages during a presentation.
+
 # Steps to winning
 
 Quickly outline of things I'm going to do with this project:

data/VERSION

@@ -1 +1 @@
-1.1.0
+1.1.1

data/css/base.css

@@ -39,8 +39,10 @@ ul    { display: inline-block; margin-left: 2em }
 #stage > * { text-rendering: optimizeLegibility }
 a          { cursor: pointer }
 
+div.slice { position: absolute; display: block; width: 0; top: -10px; bottom: -10px }
+
 @media all and (min-width: 480px)   { #stage  { font-size: 80% } }
 @media all and (min-width: 640px)   { #stage  { font-size: 100% } }
 @media all and (min-width: 800px)   { #stage  { font-size: 130% } }
 @media all and (min-width: 1024px)  { #stage  { font-size: 160% } }
-@media all and (min-width: 1280px)  { #stage  { font-size: 180% } }
+@media all and (min-width: 1280px)  { #stage  { font-size: 180% } }

data/lib/jquery.shining.js

@@ -1,49 +1,132 @@
 (function($) {
-  
   $.shining = function() {
     $.shining.slides = {
-      get length()      { return this._slides.length },
-      get current()     { return (typeof this._current == 'undefined' ? this._slides[0] : this._slides[this._current]) },
-      set current(_new) { this._current = this._slides.indexOf(_new); return this.current },
-      get all()         { return this._slides },
-      get first()       { return this._slides[0] },
-      get last()        { return this._slides[ this._slides.length - 1 ] },
-      get next()        { return this._slides[ this._slides.indexOf(this.current) + 1 ] },
-      get previous()    { return this._slides[ this._slides.indexOf(this.current) - 1 ] },
-      add: function(slides) { return Array.prototype.push.apply(this._slides, slides) },
+      length:   function() { return this._slides.length },
+      current:  function() {
+        if (arguments.length) {
+          this._current = this._slides.indexOf(arguments[0]);
+          return this.current();
+        } else {
+          return (typeof this._current == 'undefined' ? this._slides[0] : this._slides[this._current]);
+        }
+      },
+      all:      function() { return this._slides },
+      first:    function() { return this._slides[0] },
+      last:     function() { return this._slides[ this._slides.length - 1 ] },
+      next:     function() { return this._slides[ this._slides.indexOf(this.current()) + 1 ] },
+      previous: function() { return this._slides[ this._slides.indexOf(this.current()) - 1 ] },
+      add:      function(slides) { return Array.prototype.push.apply(this._slides, slides) },
       _slides: [],
       _current: 0
     };
 
+    function applyTransition(enter, leave) {
+      switch($.shining.config.transitions) {
+        case 'fade':
+          $('#stage').fadeOut(200, function() {
+            enter.call();
+            $('#stage').fadeIn(200, function() {
+              leave.call();
+            })
+          })
+          break;
+        case 'slide':
+          $('#stage').animate(
+            { opacity: 0, marginLeft: '-200' },
+            200,
+            function() {
+              enter.call();
+              $('#stage')
+                .css({ marginLeft: null, marginRight: '-200px' })
+                .animate({ opacity: 1, marginRight: '0' }, 200, function() {
+                  leave.call();
+                })
+            }
+          );
+          break;
+        case 'slice':
+          var width = $('#stage').width() / 10;
+          for (var i = 0; i <= 10; i++) {
+            $('#stage').append(
+              $('<div class="slice"></div>').css({
+                backgroundColor: $('body').css('background-color'),
+                left: (i * width) - 10
+              }).delay(i * 50).animate({width: width + 1})
+            );
+          }
+          setTimeout(enter, 900);
+          var reversed = Array.prototype.reverse.call($('#stage .slice'));
+          for (var i = 0; i < reversed.length; i++) {
+            $(reversed[i]).delay(i * 50).animate({width: '0'})
+          }
+          setTimeout(leave, 4200);
+          break;
+        default:
+          enter();
+          setTimeout(leave, 200);
+          break;
+      }
+    }
+    
+    function slice() {
+      var width = $('#stage').width() / 10;
+      for (var i = 0; i <= 10; i++) {
+        $('#stage').append(
+          $('<div class="slice"></div>').css({
+            backgroundColor: $('body').css('background-color'),
+            left: (i * width) - 10
+          }).delay(i * 100).animate({width: width + 1})
+        );
+      }      
+    }
+    
+    function unslice() {
+      var reversed = Array.prototype.reverse.call($('#stage .slice'));
+      for (var i = 0; i < reversed.length; i++) {
+        $(reversed[i]).delay(i * 100).animate({width: '0'})
+      }
+    }
+    
+    $.shining.slice = slice;
+    $.shining.unslice = unslice;
+
     String.prototype.markup = function() { return this + '.html' };
     String.prototype.script = function() { return this + '.js' };
-    String.prototype.style =  function() { return this + '.css' };    
+    String.prototype.style  = function() { return this + '.css' };
+
+    $.fn.effect = function(name) { return this.each(function() { applyEffect(this, name) }); }
+    $.fn.hasClasses = function(classes) {
+      var classes = classes.split(/\s+/), yes = true, element = this.get(0);
+      for (var i = 0; i < classes.length && yes; i++) { yes = $(element).hasClass(classes[i]) }
+      return yes;
+    }
 
     $.extend($.shining, {
-      firstSlide:     function() { getSlide($.shining.slides.first) },
-      lastSlide:      function() { getSlide($.shining.slides.last ) },
-      nextSlide:      function() { getSlide($.shining.slides.next) },
-      previousSlide:  function() { getSlide($.shining.slides.previous) },
+      firstSlide:     function() { getSlide($.shining.slides.first()) },
+      lastSlide:      function() { getSlide($.shining.slides.last() ) },
+      nextSlide:      function() { getSlide($.shining.slides.next()) },
+      previousSlide:  function() { getSlide($.shining.slides.previous()) },
       getSlide:       function(slide) { getSlide(slide) }
     });
 
-    function init()         {
+    var FILTERS = {
+      // reads: "fades-out" can be achieved by removing "fades-in" if the element hasClass "transparent"
+      'fades-out': { remove: 'fades-in', when: 'fades-in transparent' }
+    }
+
+    function init() {
       $(document).ready(function() {
         $('#controls').ondistance(
           300,
-          function(controls) { $(controls).addClass('fades-in') },
-          function(controls) { $(controls).removeClass('fades-in') }
+          function(controls) { $(controls).effect('fades-in') },
+          function(controls) { $(controls).effect('fades-out') }
         );
         $('#stage').centralize();
       });
       $(window).resize(function() { $('#stage').centralize() });
       loadConfig(function() {
         var startAt = document.location.hash.replace('#', '');
-        if (startAt) {
-          getSlide(startAt)
-        } else {
-          getSlide($.shining.slides.current);          
-        }
+        loadSlide(startAt ? startAt : $.shining.slides.current());
         setTitle($.shining.config.title);
         setTheme($.shining.config.theme);
         parseEffects();
@@ -51,50 +134,47 @@
       });
     }
 
-    function getSlide(name) {
-      if (!name) return false;
-      if ($.shining.config.transitions) {
-        $('#stage').removeClass('fades-in');
-        setTimeout(
-          function() {
-            loadSlide(name);
-            setTimeout(
-              function() {
-                $('#stage').addClass('fades-in');
-                $.shining.scripts.run($.shining.currentScript);
-              },
-            200);
-          }, 200);
+    function applyEffect(element, name) {
+      if (name in FILTERS) {
+        if ($(element).hasClasses(FILTERS[name].when)) $(element).removeClass(FILTERS[name].remove)
       } else {
-        loadSlide(name);
+        $(element).addClass(name);
       }
     }
-    
+
+    function getSlide(name) {
+      if (!name) return false;
+      applyTransition(
+        function() { loadSlide(name) },
+        function() { $.shining.scripts.run($.shining.currentScript) }
+      )
+    }
+
     function setTitle(title) {
       if (!title) { return false };
       $('title').text(title);
     }
-    
+
     function setTheme(name) {
       if (!name || name == "default") { return false };
       var path = $('link.theme').attr('href').replace('default.css', name + 'css');
       return $('link.theme').attr('href', path);
     }
-    
+
     // private
     function slide(name) {
       return 'slides/' + name;
     }
-    
+
     function vendored() {
       return $('script:first').attr('src').match(/^vendor/);
     }
-    
+
     function loadSlide(name) {
-      $('#stage').load(
+      $('#stage .contents').load(
         slide(name).markup(),
         function(data) {
-          $.shining.slides.current = name;
+          $.shining.slides.current(name);
           $('link.slide').remove(); // remove now previous slide styles
           if (SyntaxHighlighter) SyntaxHighlighter.highlight();
           $('#stage').centralize();
@@ -107,49 +187,44 @@
         }
       );
     }
-    
+
     function loadSlideScript(name) {
       $.get(slide(name).script(), function(script) {
-        if ($.shining.config.transitions) {
-          $.shining.currentScript = script;
-        } else {
-          $.shining.scripts.run(script)
-        }      
+        $.shining.currentScript = script;
       })
     }
-    
+
     function loadSlideStyle(name) {
       $('head').append('<link rel="stylesheet" type="text/css" href="' + slide(name).style() + '" media="all" class="slide"/>')
     }
-    
+
     function loadConfig(callback) {
       $.getJSON('config.json', function(config) {
         $.shining.config = config;
         $.shining.slides.add(config.slides);
-        if (config.transitions) { $('#stage').addClass('transparent fades-in'); }
         callback.call();
       });
     }
-    
+
     function parseEffects() {
-      $.get($('link[href$=effects.css]').attr('href'), 
+      $.get($('link[href$=effects.css]').attr('href'),
         function(css) { $.shining.effects = $.parseCSS(css) }
       );
     }
-    
+
     function updateControlAnchors() {
-      $('#controls #first').    attr('href', '#' + $.shining.slides.first);
-      $('#controls #previous'). attr('href', ($.shining.slides.previous ? '#' + $.shining.slides.previous : ''));
-      $('#controls #next').     attr('href', ($.shining.slides.next ? '#' + $.shining.slides.next : ''));
-      $('#controls #last').     attr('href', '#' + $.shining.slides.first);
+      $('#controls #first').    attr('href', '#' + $.shining.slides.first());
+      $('#controls #previous'). attr('href', ($.shining.slides.previous() ? '#' + $.shining.slides.previous() : ''));
+      $('#controls #next').     attr('href', ($.shining.slides.next() ? '#' + $.shining.slides.next() : ''));
+      $('#controls #last').     attr('href', '#' + $.shining.slides.first());
     }
-    
+
     $.shining.scripts = {
       LINE: /^(\d[.\d]*),[\s]*(.*)/,
       parsed: [], processes: [],
       nextSlide:      function() { $.shining.nextSlide() },
       previousSlide:  function() { $.shining.previousSlide() },
-      at:             function(seconds, method) { 
+      at:             function(seconds, method) {
         $.shining.scripts.processes.push(setTimeout(method, parseFloat(seconds) * 1000))
       },
       parse:          function(script) {
@@ -167,7 +242,7 @@
               parsed.push(lines[i]);
             }
           }
-        }        
+        }
         return parsed;
       },
       run:          function(script) {
@@ -175,19 +250,19 @@
         for (var i = 0; parsed.length > i; i += 2) {
           all.push(["at(", parsed[i], ", function() { ", parsed[i+1], " })"].join(''));
         }
-        with($.shining.scripts) { eval(all.join(';')) }; 
+        with($.shining.scripts) { eval(all.join(';')) };
       },
       reap: function() {
-        $($.shining.scripts.processes).map(function() { clearTimeout(this) });
+        $($.shining.scripts.processes).each(function() { clearTimeout(this) });
         return $.shining.scripts.processes = [];
       }
     }
-    
+
     init();
   }
   // boots!
   $.shining();
-  
+
 })(jQuery);
 
 // Dependencies!!
@@ -222,7 +297,7 @@ var RESGMLcomment=/<!--([^-]|-[^-])*-->/g;var REnotATag=/(>)[^<]*/g;var REtag=/<
 /*
  * jQuery hashchange event - v1.2 - 2/11/2010
  * http://benalman.com/projects/jquery-hashchange-plugin/
- * 
+ *
  * Copyright (c) 2010 "Cowboy" Ben Alman
  * Dual licensed under the MIT and GPL licenses.
  * http://benalman.com/about/license/

data/shining.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = %q{shining}
-  s.version = "1.1.0"
+  s.version = "1.1.1"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Julio Cesar Ody"]
-  s.date = %q{2010-03-23}
+  s.date = %q{2010-04-07}
   s.description = %q{Webkit + CSS + Javascript = awesome presos}
   s.email = %q{julio.ody@gmail.com}
   s.executables = ["console", "shine"]

data/templates/config.json

@@ -1,4 +1,4 @@
 {
   "slides":       ["welcome"],
-  "transitions":  true
+  "transitions":  "fade"
 }

data/templates/index.html

@@ -14,7 +14,10 @@
     <script type="text/javascript" charset="utf-8" src="<%= vendorized? ? 'vendor' : Shining.root %>/lib/jquery.shining.js"></script>
   </head>
   <body>
-    <section id="stage"></section>
+    <section id="stage">
+      <div class="contents"></div>
+      
+    </section>
     <nav id="controls" class="transparent">
       <a id="first"><<</a>
       <a id="previous"><</a>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: shining
 version: !ruby/object:Gem::Version 
-  version: 1.1.0
+  version: 1.1.1
 platform: ruby
 authors: 
 - Julio Cesar Ody
@@ -9,7 +9,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-03-23 00:00:00 +11:00
+date: 2010-04-07 00:00:00 +10:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency