alongslide 0.9.9 → 0.9.10

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    ZjhiZDM3YTNiNWYyYWI0N2IzNGIwNGU1ZmEyOWMyZjkyZTg1NjZiYQ==
+    NDM0ODFhYTU3OTQ2OGY1ODQwYzU4M2FlYzc3N2UxNDRlZmJiYjYxNQ==
   data.tar.gz: !binary |-
-    YmMxZGM2YWJlMzQwYjRkYjc2Y2E3YmM1MTM1M2Q2NjFiYWNmY2ZjYg==
+    YWU4YjgzNWM5MDYzMWZkNjhlZjc2YzJjNTBiNzdiNTRkZDU3ZGE2OQ==
 SHA512:
   metadata.gz: !binary |-
-    OTNjZGZiNDA0YzJhYjc0NDEzYmFiNThiOTUwM2JjYjhhMjFmNDJmYTNhOWRl
-    MjYyZmNkYWMwZWMwZDBiNjk1NDFmNzhhM2QxZTAwODE3YzQwYzM4MmMyNjlh
-    MTBmZTU5MjU5ZTcwYmI4NTZhMDhjNGI0ZTc1OWFlNDA2MTg1Y2Q=
+    NDMxZTU3YzJlMjRmMTc2NmIxYThjNDhlZDAwYjNjZmNiZWNmMmNmMzFjOGZl
+    ODM0MTcwMTUwZTgxY2QxMWE3NGEwN2UwYTkyMjI3ZDIyZGFiYTYyODRhMjgw
+    MDdlYWZjOGYwZGViZDRhYTM0OTQ5NjQ0YTc5ODBjZWFjMGIyNGU=
   data.tar.gz: !binary |-
-    YWE3MjYxZDQyMGZiYWIwNTM3NmIzMmVhODEyMWIwNzBhYzI0MmY5NWE1NjFj
-    NmRjNzY5MDZlZWY4YTczMjZjYTRmZDIwNDdlZDc4MDk2MTRlMmViYjQyZGE4
-    NmNjYWE1YmNmN2QxMWZhNjcwNmI5NzMzNDFlODk0ZWRhNjlkY2I=
+    Y2FjZjZhMzUyYmJmNzNjOGJiZjZhMTIwNTcwOWZmMjlmMWU3NjZlMGYyZDcz
+    YzE0NTdkNDhiNDk2YmYzMzA1OTYwNWQwMTZjNDExZGJiNTkwOTc3MDEzY2Qy
+    MDczY2Y5NzNiODkwNmQxMGNhZDcxMjVlMGY0YWUyYTEzMDQ4OGY=

data/alongslide.gemspec

@@ -1,6 +1,6 @@
 Gem::Specification.new do |gem|
   gem.name    = 'alongslide'
-  gem.version = '0.9.9'
+  gem.version = '0.9.10'
 
   gem.summary = "Create dynamic web layouts with an extended Markdown syntax"
   gem.description = "Create dynamic web layouts with an extended Markdown syntax"

data/app/assets/javascripts/alongslide/alongslide.coffee

@@ -1,9 +1,9 @@
-# 
+#
 # alongslide.cofee: Central init, pull in submodules.
-# 
+#
 # Copyright 2013 Canopy Canopy Canopy, Inc.
 # Authors Adam Florin & Anthony Tran
-# 
+#
 class Alongslide
 
   panels     : {}
@@ -12,12 +12,14 @@ class Alongslide
   parser     : null
   layout     : null
   scrolling  : null
+  state      : null
 
   constructor: (options= {}) ->
-    @source     = $(options.source)  ? $('#content .raw')
-    @frames     = $(options.to)      ? $('#frames')
-    @regionCls  = options.regionCls  ? 'column'
-    @marginTop  = options.marginTop  ? 0
+    @source       = $(options.source)  ? $('#content .raw')
+    @frames       = $(options.to)      ? $('#frames')
+    @regionCls    = options.regionCls  ? 'column'
+    @marginTop    = options.marginTop  ? 0
+    @panelNames   = {}
 
     RegionFlow::init()
 
@@ -33,20 +35,25 @@ class Alongslide
       backgrounds:     @backgrounds
       panels:          @panels
       regionCls:       @regionCls
+      panelNames:      @panelNames
 
     # init scrolling
     @scrolling = new @Scrolling
       frames:          @frames
 
+    # init broswer history
+    @state = new @State
+      panelNames: @panelNames
+
 
   # Render flowing layout and scroll behavior.
-  # 
+  #
   # Force use of CSS Regions polyfill. (Don't trust native browser support
   # while W3C draft is under active development.)
-  # 
+  #
   # @param frameAspect - bounding box computed by FixedAspect
   # @param postRenderCallback - to be called when layout returns
-  # 
+  #
   render: (postRenderCallback) ->
     frameAspect = FixedAspect.prototype.fitFrame(@layout.FRAME_WIDTH, @marginTop)
     @layout.render (lastFramePosition) =>
@@ -65,7 +72,7 @@ class Alongslide
       postRenderCallback()
 
   # Refresh Skrollr only on resize events, as it's fast.
-  # 
+  #
   refresh: ->
     frameAspect = FixedAspect.prototype.fitFrame(@layout.FRAME_WIDTH, @marginTop)
     @scrolling.render(frameAspect, @lastFramePosition)
@@ -80,7 +87,7 @@ class Alongslide
 
 
   # Create footnotes
-  # 
+  #
   # Sanitize Markdown generated HTML
   applyFootnotes: ->
     # For each footnote in the article
@@ -107,7 +114,7 @@ class Alongslide
         $footnote.fadeIn(150)
         false
 
-      $footnote.on "mouseleave click", (e) -> 
+      $footnote.on "mouseleave click", (e) ->
         setTimeout ( ()-> $footnote.fadeOut(150) ), 100
         false
 
@@ -124,5 +131,5 @@ class Alongslide
 
 
 # Make global
-# 
+#
 window.Alongslide = Alongslide

data/app/assets/javascripts/alongslide/layout.coffee

@@ -1,61 +1,61 @@
-# 
+#
 # alongslide.coffee: Re-format HTML into horizontally-scrolling elements
 # which scroll at different rates.
-# 
+#
 # Use CSS Regions polyfill for text flowing, and skrollr for scroll positioning.
-# 
+#
 # Copyright 2013 Canopy Canopy Canopy, Inc.
 # Authors Adam Florin & Anthony Tran
-# 
+#
 class Alongslide::Layout
 
   # For parsing pinned panel directives.
-  # 
+  #
   HORIZONTAL_EDGES: ["left", "right"]
-  VERTICAL_EDGES: ["top", "bottom"]
-  EDGES: @::HORIZONTAL_EDGES.concat @::VERTICAL_EDGES
-  SIZES: ["one-third", "half", "two-thirds"]
-  ALIGNMENTS: @::EDGES.concat 'fullscreen'
+  VERTICAL_EDGES  : ["top", "bottom"]
+  EDGES           : @::HORIZONTAL_EDGES.concat @::VERTICAL_EDGES
+  SIZES           : ["one-third", "half", "two-thirds"]
+  ALIGNMENTS      : @::EDGES.concat 'fullscreen'
 
   # Keys to ALS position data attributes
-  IN_POINT_KEY: 'als-in-position'
+  IN_POINT_KEY : 'als-in-position'
   OUT_POINT_KEY: 'als-out-position'
 
   # Corresponds to $fixed-frame-width in alongslide.sass
   FRAME_WIDTH: 980
 
   # Pixel width of each frame == screen width.
-  # 
+  #
   frameWidth: $(window).width()
 
   # Switch to true for verbose debugging. Plus constants for indent level.
-  # 
-  debug: false
+  #
+  debug            : false
   SUPER_FRAME_LEVEL: 1
-  FRAME_LEVEL: 2
-  SUB_FRAME_LEVEL: 3
-  
-  # 
-  # 
+  FRAME_LEVEL      : 2
+  SUB_FRAME_LEVEL  : 3
+
+  #
+  #
   constructor: (options = {}) ->
-    {@frames, @flowNames, @backgrounds, @panels, @regionCls, @sourceLength} = options
+    {@frames, @flowNames, @backgrounds, @panels, @regionCls, @sourceLength, @panelNames} = options
 
   # Main entrypoint for asynchronous chain of render calls.
-  # 
+  #
   # @param postRenderCallback - to be called when layout is 100% complete
-  # 
+  #
   render: (@postRenderCallback) ->
     @reset()
     @writeBackgrounds()
     @layout()
-  
+
   # Flow text into columns, using regionFlow as a CSS regions polyfill.
-  # 
+  #
   # Loop through each flow (= section), then each frame, then each column.
-  # 
+  #
   # This is all done asynchronously so that DOM can update itself periodically
   # (namely for layout progress updates).
-  # 
+  #
   layout: =>
     @startTime = new Date
     @log "Beginning layout"
@@ -67,7 +67,7 @@ class Alongslide::Layout
 
   # Render one section (a.k.a. one "flow" in CSSRegions parlance),
   # one frame at a time, asynchronously.
-  # 
+  #
   renderSection: ->
     flowName = @flowNames[@currentFlowIndex]
 
@@ -82,13 +82,13 @@ class Alongslide::Layout
     @renderFrame(flowName)
 
   # Render one frame and its containing columns.
-  # 
+  #
   # When frame is done, trigger (asynchronously) either next frame or next section.
-  # 
+  #
   # Note that normally we check _second-to-last_ column for directives,
   # as last column contains overflow. Once flow is complete, though,
   # check the last column--and remove it if it contains nothing but directives.
-  # 
+  #
   renderFrame: (flowName, frame, lastColumn) ->
     frame = @findOrBuildNextFlowFrame frame
 
@@ -143,20 +143,20 @@ class Alongslide::Layout
     setTimeout((=> @renderFrame(flowName, frame, lastColumn)), 1)
 
   # Check the last "fit" column for any special directives (CSS classes).
-  # 
+  #
   # The last "fit" column is the last one that doesn't also contain all the
   # overflow to be laid out in other columns--typically the second-to-last column.
-  # 
+  #
   # Then, having found a directive, parse the classes and act accordingly.
-  # 
+  #
   # NOTE that this method also takes responsibility for creating the appropriate
   # next frame for text to flow in. It doesn't need to return it, however,
   # as the caller will just use `findOrBuildNextFlowFrame` to check for it.
-  # 
+  #
   # @param column - jQuery element to scan for directives
   # @param layoutComplete - true if this flow has been completely laid out
   #   (and therefore no new flowing regions should be created)
-  # 
+  #
   checkForDirectives: (column, layoutComplete) ->
     # for each directive
     (column.find ".alongslide").each (index, directiveElement) =>
@@ -198,7 +198,7 @@ class Alongslide::Layout
               framesWithPinnedPanels = _.compact [
                 flowFrame if directive.hasClass("now"),
                 nextFlowFrame]
-              
+
               # set frame classes--pushing columns into subsequent frames if necessary
               _.each framesWithPinnedPanels, (frame) =>
                 @log "Applying with-pinned-panel styles to flow frame at " +
@@ -225,11 +225,11 @@ class Alongslide::Layout
 
               if nextFlowFrame?
                 @setPositionOf nextFlowFrame, to: nextFlowFramePosition + 1
-        
+
         # unpin pinned panel
         when directive.hasClass "unpin"
           panelFrame = @findPanel(id)
-          
+
           unless panelFrame.length == 0
             @setPositionOf panelFrame, until:
               if layoutComplete
@@ -246,14 +246,14 @@ class Alongslide::Layout
               postPanelFlowFrame.removeClass @withSizedClass(panelFrame)
 
   # If column contains nothing other than directives, remove it.
-  # 
+  #
   # Called only when a section has been fully laid out.
-  # 
+  #
   # Do the test on a clone, so we don't strip directives from actual column,
   # which will still be checked by checkForDirectives.
-  # 
+  #
   # If column's frame is empty, remove that, too.
-  # 
+  #
   checkForEmpties: (column) ->
     columnClone = column.clone()
     columnClone.find(".alongslide").detach()
@@ -272,16 +272,16 @@ class Alongslide::Layout
     # while we're at it, check if any empty frames were created (probably at the end)
     @frames.children('.flow').find('.frame:empty').each (index, frame) =>
       @destroyFlowFrame $(frame)
-  
+
   # Check for orphaned content. This can take many forms, so this method will
   # grow and evolve as cases emerge.
-  # 
+  #
   checkForOrphans: (column) ->
     # If column ends with a header, push it to the overflow column.
     column.find(':last:header').detach().prependTo($('.'+@regionCls+':last'))
 
   # Given a flow frame, find the next in line after it--or create one if none exists.
-  # 
+  #
   findOrBuildNextFlowFrame: (lastFrame) ->
     nextFlowFrame = if lastFrame?.length then lastFrame.next('.frame')
     unless nextFlowFrame?.length
@@ -289,9 +289,9 @@ class Alongslide::Layout
     return nextFlowFrame
 
   # Build one frame to hold columns of flowing text.
-  # 
+  #
   # Only build new frame if there are none. Otherwise, clone the last one.
-  # 
+  #
   buildFlowFrame: (lastFrame) ->
     position = if lastFrame?.length
       @getPositionOf(lastFrame) + 1
@@ -306,7 +306,7 @@ class Alongslide::Layout
     @setPositionOf frame, to: position
 
   # Destroy frame, shifting any subsequent panels up by one.
-  # 
+  #
   destroyFlowFrame: (frame) ->
     @log "Destroying flow frame at #{@getPositionOf frame}", @FRAME_LEVEL
     frame.detach()
@@ -329,42 +329,44 @@ class Alongslide::Layout
 
   # Pull panel element out of @panels storage, apply its transition, and
   # append to DOM!
-  # 
+  #
   # @param id - Alongslide panel ID
-  # 
+  #
   buildPanel: (id, position) ->
+    @panelNames[position] = id
     panel = @panels[id].clone().addClass('unstaged').show()
     alignment = _.filter @ALIGNMENTS, (alignment) -> panel.hasClass(alignment)
     @log "Building #{alignment} panel frame \"#{id}\" at position #{position}", @FRAME_LEVEL
     panel.addClass('frame')
+    panel.attr('data-panel-index', position);
     panel.appendTo @frames.children('.panels')
     @setPositionOf panel, to: position
     return panel
 
   # Destroy all previously laid out content.
-  # 
+  #
   reset: ->
     @laidOutLength = 0
 
     @frames.find('.backgrounds').empty()
     @frames.find('.flow').empty()
     @frames.find('.panels').empty()
-    
+
     # remove regionFlows' internal record of regions we just destroyed
     _.each document.namedFlows.namedFlows, (flow) -> flow.resetRegions()
 
   # Write the given array of backgrounds to the DOM.
-  # 
+  #
   writeBackgrounds: ->
     for background in @backgrounds
       @frames.find('.backgrounds').append(background.clone())
 
   # Set frame start/end position.
-  # 
+  #
   # @param options
   #   to: in point (= start position)
   #   until: out point (= end position)
-  # 
+  #
   setPositionOf: (frame, options={}) ->
     frameType = frame.parent().get(0).className
     if options.to?
@@ -379,18 +381,18 @@ class Alongslide::Layout
     return frame
 
   # Return start position.
-  # 
+  #
   getPositionOf: (frame) ->
     frame.data(@IN_POINT_KEY)
 
   # What position the _next_ (as yet unrendered) frame should be at.
-  # 
+  #
   nextFramePosition: ->
     framePosition = @lastFramePosition()
     if framePosition? then framePosition + 1 else 0
 
   # Return the largest frame number of all frames.
-  # 
+  #
   lastFramePosition: ->
     flowsAndPanels = @frames.children('.flow, .panels').find('.frame')
     allFramePositions = _(flowsAndPanels).map (frame) => @getPositionOf $(frame)
@@ -398,7 +400,7 @@ class Alongslide::Layout
 
   # Certain frame CSS classes limit the number of columns allowed
   # per flow frame.
-  # 
+  #
   numFrameColumns: (frame) ->
     numColumns = if frame.hasClass('three-columns') then 3 else 2
     numColumns -= 1 if @isWithHorizontalPanel(frame)
@@ -406,7 +408,7 @@ class Alongslide::Layout
     return numColumns
 
   # Once render is done, build relevant indices for later lookup.
-  # 
+  #
   index: ->
     @panelIndex = {}
     @frames.children('.panels').find('.panel.frame').each (index, panel) =>
@@ -417,41 +419,41 @@ class Alongslide::Layout
         @panelIndex[position].push panel
 
   # Re-order elements in DOM if specified.
-  # 
+  #
   # This is a more reliable method of forcing a higher z-index for certain panels.
-  # 
+  #
   reorder: ->
     frontPanels = @frames.children('.panels').find('.panel.front').detach()
     @frames.children('.panels').append(frontPanels)
 
   # DOM utility.
-  # 
+  #
   # Find background for a given section (flow).
-  # 
+  #
   findBackground: (flowName) ->
     @frames.children('.backgrounds').find(".background.frame[data-alongslide-id=#{flowName}]")
 
   # DOM utility.
-  # 
+  #
   findPanel: (id) ->
     @frames.children('.panels').find(".panel.frame[data-alongslide-id=#{id}]")
 
   # Check panel index for panel at given position, and check if it's horizontal.
-  # 
+  #
   horizontalPanelAt: (position, edge) ->
     edges = if edge? then [edge] else @HORIZONTAL_EDGES
     _(@panelIndex[position] || []).any (panel) ->
       _(edges).any (edge) -> $(panel).hasClass(edge)
 
   # Check if flow frame shares space with horizontally-pinned panel.
-  # 
+  #
   isWithHorizontalPanel: (frame) ->
     for cssClass in _.map(@HORIZONTAL_EDGES, (edge) -> "with-panel-pinned-#{edge}")
       return true if frame.hasClass(cssClass)
 
   # Given a directive for a pinned panel, retun the class to be applied to
   # flow frames.
-  # 
+  #
   withPinnedClass: (directive) ->
     edge = _.first _.filter @EDGES, (edge) -> directive.hasClass(edge)
     "with-panel-pinned-#{edge}"
@@ -466,48 +468,48 @@ class Alongslide::Layout
 
   # If panel is partial width (i.e. is with left/right pinned panel),
   # then return its scrolling scale (0.0-1.0).
-  # 
+  #
   # Called by Scrolling to determine scoll distance.
-  # 
+  #
   # @return partialWidth - a percentage width (0.0-1.0), or undefined.
   #   Note: This number doesn't have to be exact--just has to "feel" right for
   #   pinned panels of different widths.
-  # 
+  #
   framePartialWidth: (frame) ->
     if @isWithHorizontalPanel(frame)
       $column = frame.find('.'+@regionCls)
       return ($column.width() + $column.position().left) * @numFrameColumns(frame) / frame.width()
 
   # Return panel alignment.
-  # 
+  #
   panelAlignment: (directive) ->
     _.first _.filter @ALIGNMENTS, (alignment) -> directive.hasClass(alignment)
 
   # Returns true when all flowing text has been laid out (i.e. last column
   # region no longer contains overflow.)
-  # 
+  #
   flowComplete: (flowName) ->
     not document.namedFlows.get(flowName).updateOverset()
 
   # Utility: Is column empty after we remove directives from it?
-  # 
+  #
   isEmpty: (el) ->
     $.trim(el.children().html()) == ''
 
   # Compute length of total laid out content so far and broadcast it to our
   # listeners.
-  # 
+  #
   # To listen:
-  # 
+  #
   #   $(document).on 'alongslide.progress', (e, progress) ->
   #     #
-  # 
+  #
   updateProgress: (newElement) ->
     @laidOutLength += newElement.text().length
     $(document).triggerHandler 'alongslide.progress', (@laidOutLength / @sourceLength)
 
   # Write debug log to console if available/desired.
-  # 
+  #
   log: (message, indentLevel = 0) ->
     indent = (_(indentLevel).times -> ". ").join('')
     if console? and @debug