rhet-butler 0.13.0 → 0.14.0

data/default-configuration/assets/javascript/rhet-butler/transition-stations.js

@@ -0,0 +1,107 @@
+//StationList -> *[Station]
+//  Runs through the JS mechanics of transitioning between steps -
+//
+//  * marks all slides in the stream as prior and post
+//  * marks the current step,
+//  * handles event listeners
+//  * issues most custom events.
+//
+//  FSM: preparing -> started-uphill -> downhill -> completed
+//
+
+import states from './transition-states.js';
+import TransitionStation from './transition-station.js';
+//import * from '../utils.js';
+
+export default class {
+  constructor(presenter, firstStep, currentStep, lastStep){
+    this.presenter = presenter;
+    this.uphill = [];
+    this.uphillIndex = 0;
+    this.downhill = [];
+    this.downhillIndex = 0;
+    this.firstStep = firstStep;
+    this.currentStep = currentStep;
+    this.lastStep = lastStep;
+    this.buildList();
+    this.currentState = null;
+    this.changeState("preparing")
+  }
+
+  changeState(name){
+    if(typeof quiet_console == "undefined"){
+      console.log("Changing state: " + name +
+          " S/C/E: " + this.firstStep.toString() +
+          " / " + this.currentStep.toString() +
+          " / " + this.lastStep.toString()
+      );
+    }
+    var newState = states[name];
+    for(let func in newState){
+      this[func] = newState[func];
+    }
+    for(let stateName in states){
+      this.presenter.rootStep.removeClass(stateName);
+    }
+    this.presenter.rootStep.addClass(name);
+    this.currentState = name;
+    this.enterState();
+  }
+
+  buildList(){
+    var step = this.firstStep;
+    var checkedIn = true;
+    var station;
+
+    this.direction = this.firstStep.relativePosition(this.lastStep);
+
+    while(step != null){
+      checkedIn = checkedIn && (step != this.currentStep);
+      station = new TransitionStation(step);
+      this.uphill.push(station);
+      if(checkedIn){
+        station.visited();
+      }
+      step = step.parent;
+    }
+    step = this.lastStep;
+    while(step != null){
+      this.downhill.unshift(new TransitionStation(step));
+      step = step.parent;
+    }
+  }
+
+  startElemId(){
+    return "prev_" + this.firstStep.element.id;
+  }
+
+  endElemId(){
+    return "next_" + this.lastStep.element.id;
+  }
+
+  eachStation(func){
+    this.uphill.forEach(func, this);
+    this.downhill.forEach(func, this);
+  }
+
+  //XXX The bind does not appear to be working:
+  //  station is an animation event, and
+  //  event is undefined
+  arriveListener(station, event){
+    console.log("rhet-butler/transition-stations.js:256", "event", event);
+    event.stopPropagation();
+
+    station.visited();
+    this.elementArrived();
+
+    return true;
+  }
+
+  elementArrived(station){
+    while(this.nextStation()){
+    };
+    if(typeof quiet_console == "undefined"){
+      console.log("Waiting for event")
+    };
+  }
+}

data/default-configuration/assets/javascript/rhet-butler/tree-builder.js

@@ -0,0 +1,103 @@
+import { arrayify } from "../utils.js";
+import Step from "./step.js";
+import StepsRoot from "./steps/root.js";
+import StepsGroup from "./steps/group.js";
+import StepsSlide from "./steps/slide.js";
+import StepsItem from "./steps/item.js";
+
+export default class {
+  constructor(element, stepClass){
+    this.root = element;
+    this.stepClass = stepClass;
+    this.rootStep = null;
+    this.parentStack = [];
+    this.indexes = {
+      step: 0,
+      group: 0,
+      slide: 0,
+      item: 0
+    };
+  }
+
+  getParent(element){
+    var checkElement, parent, parentElement;
+    while(this.parentStack.length > 0) {
+      parent = this.parentStack[0];
+      parentElement = parent.element;
+      checkElement = element;
+      while(checkElement != parentElement && checkElement != this.root){
+        checkElement = checkElement.parentElement;
+      }
+
+      if(checkElement == parentElement){
+        return parent;
+      }
+
+      this.parentStack.shift().treeFinished();
+    }
+
+    return null;
+  }
+
+  assembleNextElement(element){
+    var step;
+
+    var parent = this.getParent(element);
+
+    if(element.classList.contains("root")){
+      if(element.id.length == 0){
+        element.id = "rhet-root"
+      }
+      step = new StepsRoot(element, this.indexes);
+      this.rootStep = step;
+      this.indexes.step++;
+      this.parentStack.unshift(step);
+    } else if(element.classList.contains("group")){
+      this.indexes.group++;
+      if(element.id.length == 0){
+        element.id = "group-" + this.indexes.group
+      }
+
+      step = new StepsGroup(parent, element, this.indexes);
+      this.indexes.step++;
+      this.parentStack.unshift(step);
+    } else if(element.classList.contains("slide")){
+      this.indexes.slide++;
+      if(element.id.length == 0){
+        element.id = "slide-" + this.indexes.slide
+      }
+
+      step = new StepsSlide(parent, element, this.indexes);
+      this.indexes.step++;
+      this.parentStack.unshift(step);
+    } else if(element.classList.contains("item")){
+      var cues = (Array.prototype.filter.call(element.classList, function(klass){ return /^cue-.*/.test(klass); }));
+      var cueLength = cues.length;
+      for(var i = 0; i < cueLength; i++){
+        this.indexes.item++;
+        if(element.id.length == 0){
+          element.id = "item-" + this.indexes.item
+        }
+        step = new StepsItem(parent, element, this.indexes, cues[i]);
+        if(step.parent.items.some(function(item){ return item == step})){
+          this.indexes.step++;
+        } else {
+          this.indexes.item--;
+        }
+      }
+    } else {
+      return //malformed
+    }
+  }
+
+  buildTree(){
+    var elements = arrayify(this.root.getElementsByClassName(this.stepClass));
+
+    elements.forEach(this.assembleNextElement, this);
+    while(this.parentStack.length > 0){
+      this.parentStack.shift().treeFinished();
+    };
+
+    return this.rootStep;
+  }
+}

data/default-configuration/assets/javascript/utils.js

@@ -0,0 +1,78 @@
+/*
+ * RhetButler presentation Javascript (version <%= version %>
+ * Build date: <%= build_date %>
+ *
+ * Copyright <%= copyright_year %> Judson Lester (@judsonlester)
+ *
+ * Inspired by impress.js by
+ *   Bartek Szopka (@bartaz)
+ *
+ * Released under the MIT and GPL Licenses.
+ */
+
+// `arraify` takes an array-like object and turns it into real Array
+// to make all the Array.prototype goodness available.
+export function arrayify( a ) {
+  return [].slice.call( a );
+};
+
+// `$$` return an array of elements for given CSS `selector` in the `context` of
+// the given element or whole document.
+export function $$( selector, context ) {
+  context = context || document;
+  return this.arrayify( context.querySelectorAll(selector) );
+};
+
+// `byId` returns element with given `id` - you probably have guessed that ;)
+export function byId( id ) {
+  return document.getElementById(id);
+};
+
+// `triggerEvent` builds a custom DOM event with given `eventName` and `detail` data
+// and triggers it on element given as `el`.
+export function triggerEvent(el, eventName, detail) {
+  var event = document.createEvent("CustomEvent");
+  event.initCustomEvent(eventName, true, true, detail);
+  el.dispatchEvent(event);
+};
+
+var prefixes = ['Webkit', 'webkit', 'moz', 'Moz', 'o', 'O', 'ms', 'khtml', 'Khtml'];
+
+var style = window.getComputedStyle(document.createElement('dummy')),
+memory = {};
+
+// `pfx` is a function that takes a standard CSS property name as a parameter
+// and returns it's prefixed version valid for current browser it runs in.
+// The code is heavily inspired by Modernizr http://www.modernizr.com/
+export function pfx( prop ) {
+  if ( typeof memory[ prop ] === "undefined" ) {
+
+    var ucProp, props;
+    ucProp  = prop.replace(/-[a-z]/g, function(match){ return match.slice(-1)[0].toUpperCase(); }),
+    props = [prop, ucProp];
+    ucProp = ucProp.replace(/^[a-z]/, function(letter){ return letter.toUpperCase() });
+
+    var allPfx = prefixes.forEach(function(prefix){
+        props.push(prefix + prop);
+        props.push(prefix + ucProp);
+        props.push(prefix + "-" + prop);
+        props.push(prefix + "-" + ucProp);
+        props.push("-" + prefix + "-" + prop);
+        props.push("-" + prefix + "-" + ucProp);
+      });
+
+    props = props.concat(allPfx);
+
+    memory[ prop ] = null;
+    for ( var i in props ) {
+      var testValue = style.getPropertyValue(props[i]);
+      if (!(testValue === null || testValue === undefined) ) {
+        memory[ prop ] = props[i];
+        break;
+      }
+    }
+
+  }
+
+  return memory[ prop ];
+};

data/default-configuration/assets/stylesheets/font.sass

@@ -2,32 +2,28 @@
   font-family: 'Arimo'
   font-style: normal
   font-weight: 700
-  src: local("Arimo Bold"), local("Arimo-Bold"), url(../../themes.googleusercontent.com/static/fonts/arimo/v5/K-bXE71xZHgbUS_UdQjugvesZW2xOQ-xsNqO47m55DA.ttf) format("truetype")
-
+  src: local('Arimo Bold'), local('Arimo-Bold'), url(../fonts.gstatic.com/s/arimo/v12/P5sBzZCDf9_T_1Wi4TRNrZc.ttf) format('truetype')
 
 @font-face
   font-family: 'Cinzel Decorative'
   font-style: normal
   font-weight: 700
-  src: local("Cinzel Decorative Bold"), local("CinzelDecorative-Bold"), url(../../themes.googleusercontent.com/static/fonts/cinzeldecorative/v1/pXhIVnhFtL_B9Vb1wq2F9wIh9oxuYcmvOvyh_107lQs.ttf) format("truetype")
-
+  src: local('Cinzel Decorative Bold'), local('CinzelDecorative-Bold'), url(../fonts.gstatic.com/s/cinzeldecorative/v7/daaHSScvJGqLYhG8nNt8KPPswUAPniZoadlESTQ.ttf) format('truetype')
 
 @font-face
   font-family: 'Cinzel Decorative'
   font-style: normal
   font-weight: 900
-  src: local("Cinzel Decorative Black"), local("CinzelDecorative-Black"), url(../../themes.googleusercontent.com/static/fonts/cinzeldecorative/v1/pXhIVnhFtL_B9Vb1wq2F9zCUrkmwPfdnoTjOU_kXqBI.ttf) format("truetype")
-
+  src: local('Cinzel Decorative Black'), local('CinzelDecorative-Black'), url(../fonts.gstatic.com/s/cinzeldecorative/v7/daaHSScvJGqLYhG8nNt8KPPswUAPniZQa9lESTQ.ttf) format('truetype')
 
 @font-face
   font-family: 'Droid Sans Mono'
   font-style: normal
   font-weight: 400
-  src: local("Droid Sans Mono"), local("DroidSansMono"), url(../../themes.googleusercontent.com/static/fonts/droidsansmono/v4/ns-m2xQYezAtqh7ai59hJYW_AySPyikQrZReizgrnuw.ttf) format("truetype")
-
+  src: local('Droid Sans Mono Regular'), local('DroidSansMono-Regular'), url(../fonts.gstatic.com/s/droidsansmono/v10/6NUO8FuJNQ2MbkrZ5-J8lKFrp7pRef2u.ttf) format('truetype')
 
 @font-face
   font-family: 'Slackey'
   font-style: normal
   font-weight: 400
-  src: local("Slackey"), url(../../themes.googleusercontent.com/static/fonts/slackey/v3/bJZDrYrGx8atJRHR9DVdqg.ttf) format("truetype")
+  src: local('Slackey Regular'), local('Slackey-Regular'), url(../fonts.gstatic.com/s/slackey/v9/N0bV2SdQO-5yM0-dGlNQIQ.ttf) format('truetype')

data/default-configuration/common/templates/presentation.html.erb

@@ -9,7 +9,6 @@
     <meta name="description" content="<%= presentation.description %>" />
     <meta name="author" content="<%= presentation.author_name %>" />
 
-    <script src="/javascript/rhet-present.js"></script>
     <script src="/javascript/keyboard-nav.js"></script>
     <%= render 'stylesheets.html' %>
     <%= render 'header-javascript.html' %>
@@ -28,10 +27,11 @@
     </div>
 
     <%= render 'live-javascript.html' %>
-    <script>
-        var presenter = new rhetButler.Presenter(document, window);
-        presenter.setup("presentation");
-        setupUserInterface(presenter);
+    <script type='module'>
+      import Presenter from '/javascript/presenter.js';
+
+      var presenter = new rhetButler.Presenter(document, window, "presentation");
+      setupUserInterface(presenter);
     </script>
 
   </body>

data/lib/rhet-butler/file-loading.rb

@@ -26,7 +26,7 @@ module RhetButler
         return YAML.load_stream(file.contents).flatten
       rescue => ex
         puts "While processing `#{file.full_path}`"
-        puts ex.class
+        puts "  #{ex.class}: #{ex.message}"
         raise
       end
     end

data/lib/rhet-butler/stasis/transform-queue.rb

@@ -21,6 +21,8 @@ module RhetButler
         end
 
         def lookup(type)
+          type.sub!(/;.*/, '')
+          type.chomp!
           transformers.fetch(type) do
             transformers.fetch(nil)
           end

data/spec/command-line.rb

@@ -0,0 +1 @@
+require 'rhet-butler/command-line'

data/spec/configuration.rb

@@ -0,0 +1,27 @@
+require 'rhet-butler/configuration'
+require 'valise'
+
+describe RhetButler::Configuration, "defaults" do
+  let :test_fileset do
+    Valise::Set.new
+  end
+
+  subject :config do
+    described_class.new(test_fileset)
+  end
+
+  its(:root_slide_template){ should == "presentation.html" }
+  its(:username){ should == 'judson' }
+  its(:password){ should == 'judsonr00tzme' }
+  its(:author){ should == "Judson Lester" }
+  its(:title){ should == 'Presentation' }
+  its(:description){ should == "A nifty presentation made with Rhet Butler" }
+  its(:search_paths){ should == [] }
+  its(:static_target){ should == "static" }
+  its(:impress_config){ should == {} }
+  its(:root_arrangement){ should == "horizontal" }
+  its(:arrangement_blueprint){ should == [] }
+  its(:serve_port){ should == 8081 }
+  its(:root_slide){ should == "slides.yaml" }
+  its('default_content_filters'){ should == "textile" }
+end

data/spec/javascripts/fixtures/long-animation-group-1.html

@@ -0,0 +1,19 @@
+<style type="text/css">
+  #group-1 {
+    color: black;
+  }
+
+  #group-1.am-at {
+    -webkit-animation: lighten 100s;
+  }
+
+  @keyframes lighten {
+    from {
+      color: black;
+    }
+
+    to {
+      color: white;
+    }
+  }
+</style>

data/spec/javascripts/fixtures/long-transition-group-1.html

@@ -0,0 +1,10 @@
+<style type="text/css">
+  #group-1 {
+    color: black;
+  }
+
+  #group-1.am-at {
+    -webkit-transition: color 100s;
+    color: gray;
+  }
+</style>

data/spec/javascripts/fixtures/looped-animation-group-1.html

@@ -0,0 +1,20 @@
+<style type="text/css">
+  #group-1 {
+    color: black;
+  }
+
+  #group-1.am-at {
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-name: pulse;
+  }
+
+  @keyframes pulse {
+    from {
+      color: black;
+    }
+
+    to {
+      color: white;
+    }
+  }
+</style>