alongslide 0.9.10 → 0.9.11

checksums.yaml

@@ -1,15 +1,7 @@
 ---
-!binary "U0hBMQ==":
-  metadata.gz: !binary |-
-    NDM0ODFhYTU3OTQ2OGY1ODQwYzU4M2FlYzc3N2UxNDRlZmJiYjYxNQ==
-  data.tar.gz: !binary |-
-    YWU4YjgzNWM5MDYzMWZkNjhlZjc2YzJjNTBiNzdiNTRkZDU3ZGE2OQ==
+SHA1:
+  metadata.gz: 542170c9eaf643945063831eba1c4197003157a2
+  data.tar.gz: 97ff3fa6ea20d7292d3cbf2ad7c03cc82b72b01d
 SHA512:
-  metadata.gz: !binary |-
-    NDMxZTU3YzJlMjRmMTc2NmIxYThjNDhlZDAwYjNjZmNiZWNmMmNmMzFjOGZl
-    ODM0MTcwMTUwZTgxY2QxMWE3NGEwN2UwYTkyMjI3ZDIyZGFiYTYyODRhMjgw
-    MDdlYWZjOGYwZGViZDRhYTM0OTQ5NjQ0YTc5ODBjZWFjMGIyNGU=
-  data.tar.gz: !binary |-
-    Y2FjZjZhMzUyYmJmNzNjOGJiZjZhMTIwNTcwOWZmMjlmMWU3NjZlMGYyZDcz
-    YzE0NTdkNDhiNDk2YmYzMzA1OTYwNWQwMTZjNDExZGJiNTkwOTc3MDEzY2Qy
-    MDczY2Y5NzNiODkwNmQxMGNhZDcxMjVlMGY0YWUyYTEzMDQ4OGY=
+  metadata.gz: d5df3c8d11284c544419845fee71be332c244b27432ad9e5aefe59e08902e91494140c5cf67c968d5d05de8c0e888e336866441c61c227fd1fc8a97639b2bffd
+  data.tar.gz: da422b446b18f80f98a4b85127eb2e25ae925e32276fe02e929b957bb59ee1d8ff98666ce00d4ff1057904f98cbbd5d07fcaed6d65f6d9351fc2e63c290f9cce

data/Gemfile

@@ -1,9 +1,9 @@
 source 'https://rubygems.org'
 
-ruby '1.9.3'
+ruby '2.2.2'
 
 gem 'redcarpet'
-gem 'treetop'
+gem 'treetop', '~>1.4.14'
 gem 'polyglot'
 gem 'haml'
 gem 'sass'

data/Gemfile.lock

@@ -102,4 +102,7 @@ DEPENDENCIES
   redcarpet
   rspec
   sass
-  treetop
+  treetop (~> 1.4.14)
+
+BUNDLED WITH
+   1.10.6

data/alongslide.gemspec

@@ -1,6 +1,6 @@
 Gem::Specification.new do |gem|
   gem.name    = 'alongslide'
-  gem.version = '0.9.10'
+  gem.version = '0.9.11'
 
   gem.summary = "Create dynamic web layouts with an extended Markdown syntax"
   gem.description = "Create dynamic web layouts with an extended Markdown syntax"
@@ -10,7 +10,7 @@ Gem::Specification.new do |gem|
   gem.homepage = 'http://github.com/triplecanopy/alongslide'
 
   gem.add_dependency('redcarpet')
-  gem.add_dependency('treetop')
+  gem.add_dependency('treetop','~>1.4.14')
   gem.add_dependency('polyglot')
   gem.add_development_dependency('rspec')
 

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

@@ -9,42 +9,47 @@ class Alongslide
   panels     : {}
   sections   : {}
 
-  parser     : null
-  layout     : null
-  scrolling  : null
-  state      : null
+  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
-    @panelNames   = {}
+    @panelIndices = []
+    @flowIndices  = []
 
     RegionFlow::init()
 
     # parse
     @parser = new @Parser source: @source
-    {@flowNames, @backgrounds, @panels, @footnotes, @sourceLength} = @parser.parse()
+    {@flowNames, @panelNames, @backgrounds, @panels, @footnotes, @sourceLength} = @parser.parse()
 
     # init layout
     @layout = new @Layout
-      sourceLength:    @sourceLength
-      frames:          @frames
-      flowNames:       @flowNames
-      backgrounds:     @backgrounds
-      panels:          @panels
-      regionCls:       @regionCls
-      panelNames:      @panelNames
+      sourceLength: @sourceLength
+      frames      : @frames
+      flowNames   : @flowNames
+      backgrounds : @backgrounds
+      panels      : @panels
+      regionCls   : @regionCls
+      panelNames  : @panelNames
+      panelIndices: @panelIndices
+      flowIndices : @flowIndices
 
     # init scrolling
     @scrolling = new @Scrolling
-      frames:          @frames
+      frames: @frames
 
     # init broswer history
     @state = new @State
-      panelNames: @panelNames
-
+      panelNames  : @panelNames
+      flowNames   : @flowNames
+      panelIndices: @panelIndices
+      flowIndices : @flowIndices
 
   # Render flowing layout and scroll behavior.
   #
@@ -55,6 +60,7 @@ class Alongslide
   # @param postRenderCallback - to be called when layout returns
   #
   render: (postRenderCallback) ->
+
     frameAspect = FixedAspect.prototype.fitFrame(@layout.FRAME_WIDTH, @marginTop)
     @layout.render (lastFramePosition) =>
 
@@ -65,9 +71,14 @@ class Alongslide
       @applyAnchorScrolling()
 
       # Emit notification that layout is complete.
+      #
       $(document).triggerHandler 'alongslide.ready', @frames
 
+      # Default array of indices for URL rewrites is set to section names
+      #
+      @state.setIndices(@flowIndices)
       @hashToPosition()
+
       FixedAspect.prototype.fitPanels(frameAspect)
       postRenderCallback()
 
@@ -80,11 +91,14 @@ class Alongslide
 
   hashToPosition: ->
     hash = window.location.hash
-    if hash.length > 0
-      @goToPanel(hash.substr(1))
-    else
-      @goToPanel('titlesplash')
+    if hash.length
 
+      # State will update hash on skroll
+      #
+      stateIndex = @goToPanel(hash.substr(1))
+
+    state = {index: stateIndex || 0}
+    @state.updateLocation state
 
   # Create footnotes
   #
@@ -93,34 +107,40 @@ class Alongslide
     # For each footnote in the article
     @frames.find('.als-fn-ref').each (i, el) =>
       # Reference the footnote
+      #
       $el = $(el)
-      # Find the footnote text
-      $footnote = @footnotes.find($el.data('anchor'))
 
-      # Append the footnote text element to the column
+      # Find and clone the footnote element
+      #
+      $footnote = @footnotes.find($el.data('anchor')).clone()
+
+      # Append the cloned element to the column
+      #
       $column = $el.parents('.column')
       $column.append($footnote)
 
-      # place footnote, prevent placing offscreen
-      bottom = $column.height() + $column.offset().top
-      if ($el.offset().top + $footnote.height()) > bottom
-        $footnote.css('bottom', 0)
-      else
-        $footnote.css('top', $el.parent().position().top )
-
-      $el.on "mouseenter click", (e) ->
+      $el.on 'click mouseenter', (e) ->
         e.preventDefault()
         e.stopImmediatePropagation()
+
+        # Place footnote, prevent placing offscreen
+        #
+        bottom = $column.height() + $column.offset().top
+        if ($el.offset().top + $footnote.height()) > bottom
+          $footnote.css('bottom', 0)
+        else
+          $footnote.css('top', $el.parent().position().top )
+
         $footnote.fadeIn(150)
-        false
 
-      $footnote.on "mouseleave click", (e) ->
-        setTimeout ( ()-> $footnote.fadeOut(150) ), 100
-        false
+      $footnote.on 'click mouseleave', (e) ->
+        setTimeout ->
+          $footnote.fadeOut(150)
+        , 100
 
   applyAnchorScrolling: ->
     self = @
-    @frames.find('a[href*=#]:not([href=#])').on('click', (e) ->
+    @frames.find('a[href*=\\#]:not([href=\\#])').on('click', (e) ->
       self.goToPanel(@hash.substr(1))
     )
 
@@ -128,7 +148,7 @@ class Alongslide
     $target = $('#frames').find('[data-alongslide-id=' + alsId + ']')
     targetPos = $target.data('als-in-position')
     @scrolling.scrollToPosition(targetPos)
-
+    targetPos
 
 # Make global
 #

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

@@ -38,7 +38,7 @@ class Alongslide::Layout
   #
   #
   constructor: (options = {}) ->
-    {@frames, @flowNames, @backgrounds, @panels, @regionCls, @sourceLength, @panelNames} = options
+    {@frames, @flowNames, @flowIndices, @panel, @panelIndices, @backgrounds, @panels, @regionCls, @sourceLength, @cols} = options
 
   # Main entrypoint for asynchronous chain of render calls.
   #
@@ -71,15 +71,23 @@ class Alongslide::Layout
   renderSection: ->
     flowName = @flowNames[@currentFlowIndex]
 
-    @log "Laying out section \"#{flowName}\"", @SUPER_FRAME_LEVEL
-    background = @findBackground(flowName)
-    @setPositionOf background, to: @nextFramePosition() if background.length
-    background.addClass('unstaged')
+    if flowName?
 
-    # Reset section index before building another section
-    @currentSectionFlowIndex = 0
+      # If there `flowName` exists, i.e., not `undefined`, lay out the section
+      # and increment `@currentFlowIndex`
+      #
+      @log "Laying out section \"#{flowName}\"", @SUPER_FRAME_LEVEL
+      @currentFlowIndex++
+      background = @findBackground(flowName)
+      @setPositionOf background, to: @nextFramePosition()
+      background.addClass('unstaged')
 
-    @renderFrame(flowName)
+      # Reset section index before building another section
+      #
+      @currentSectionFlowIndex = 0
+      position = @nextFramePosition()
+      @pushFlows(flowName, position, @flowIndices)
+      @renderFrame(flowName)
 
   # Render one frame and its containing columns.
   #
@@ -97,7 +105,8 @@ class Alongslide::Layout
       column = @buildRegion frame, flowName
 
       # Give each section flow an index
-      @currentSectionFlowIndex++
+      # @currentSectionFlowIndex++
+
       column.find('.section').attr('data-section-flow-idx', @currentSectionFlowIndex)
 
       # Move three-columns class from .section to .frame
@@ -115,17 +124,19 @@ class Alongslide::Layout
 
       # Section is complete. Current column is the last column of the
       # section (no longer the overflow column).
+      #
       if @flowComplete(flowName)
         @updateProgress column
         @checkForDirectives column, true
         @checkForEmpties column
 
         # render next section, or complete render.
-        @currentFlowIndex++
+        # @currentSectionFlowIndex++
+
         unless @currentFlowIndex is @flowNames.length
           background = @findBackground(flowName)
           @setPositionOf background, until: @lastFramePosition() if background.length
-          setTimeout((=> @renderSection()), 1)
+          setTimeout((=> @renderSection()), 0)
         else
           @log "Layout complete"
           @reorder()
@@ -138,9 +149,7 @@ class Alongslide::Layout
 
     # unstage earlier frames
     frame.prevAll().addClass('unstaged')
-
-    # render next frame
-    setTimeout((=> @renderFrame(flowName, frame, lastColumn)), 1)
+    @renderFrame(flowName, frame, lastColumn)
 
   # Check the last "fit" column for any special directives (CSS classes).
   #
@@ -213,6 +222,7 @@ class Alongslide::Layout
 
               # If we changed this frame's layout, re-flow this whole section's
               # regions.
+              #
               if directive.hasClass("now")
                 sectionId = flowFrame.data('als-section-id')
                 @frames.children('.flow').find(".frame[data-als-section-id=#{sectionId}]").removeClass('unstaged')
@@ -315,7 +325,14 @@ class Alongslide::Layout
       if panelPosition > frame.data(@IN_POINT_KEY)
         @log "Moving panel \"#{$(panel).data('alongslide-id')}\" at " +
           "#{panelPosition} to #{panelPosition-1}", @FRAME_LEVEL
+        @movePanelPos($(panel).data('alongslide-id'), panelPosition-1, panelPosition)
         $(panel).data(@IN_POINT_KEY, panelPosition-1)
+        oldOutKey = $(panel).data(@OUT_POINT_KEY)
+        newOutKey = if !isNaN(oldOutKey) and oldOutKey > -1
+          oldOutKey - 1
+        else
+          oldOutKey
+        $(panel).data(@OUT_POINT_KEY, newOutKey)
 
   # Create region to receive flowing text (column). Return jQuery object.
   #
@@ -327,20 +344,54 @@ class Alongslide::Layout
     document.namedFlows.get(flowName).addRegion(region.get(0))
     return region
 
+  # Create an index of flow names and panel names.  Since `position` can
+  # increment by steps (0: a, 1: b, 3: c), we fill the gaps in the indices
+  # array with the array's previous index, if there is one (0: a, 1: b, 2: b,
+  # 3: c). This is used to sync skroll position with flow/panel name by
+  # `State`.
+  #
+  pushFlows: (id, position, arr) ->
+    # Frames named `sectionFlow[0-9]` are not part of the regular flow, and
+    # therefore shouldn't be included.
+    #
+    if position is arr.length and id.match(/^sectionFlow[0-9]/) is null
+      arr.push(id)
+    else if position > arr.length
+      while position > arr.length
+        arr.push(arr[arr.length - 1])
+      if id.match(/^sectionFlow[0-9]/) is null
+        arr.push(id)
+
+  # To build an array of panel objects indicating each panel's scroll position
+  # and id
+  #
+  pushPanels: (id, pos) ->
+    if pos then @panelIndices.push({pos:pos, id:id})
+
+  # When frames are destroyed, panels shift around, so we need to update the
+  # pointer to their scroll position in `@panelIndices` accordingly
+  #
+  movePanelPos:(panelName, newIndex, oldIndex)->
+    obj = _.findWhere(@panelIndices, {pos:oldIndex})
+    obj.pos = newIndex
+
   # 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()
+    panel = @panels[id]
+      .clone()
+      .addClass('unstaged frame')
+      .attr('data-panel-index', position)
+      .show()
+      .appendTo @frames.children('.panels')
     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
+    @pushPanels(id, position)
+
     return panel
 
   # Destroy all previously laid out content.
@@ -368,16 +419,19 @@ class Alongslide::Layout
   #   until: out point (= end position)
   #
   setPositionOf: (frame, options={}) ->
-    frameType = frame.parent().get(0).className
-    if options.to?
-      if (currentFramePosition = @getPositionOf frame)?
-        @log "Moving #{frameType} frame at #{currentFramePosition} to " +
-          "#{options.to}", @SUB_FRAME_LEVEL
-      frame.data @IN_POINT_KEY, options.to
-    if options.until?
-      @log "Dismissing #{frameType} frame \"#{frame.data('alongslide-id')}\" " +
-        "at #{options.until}", @SUB_FRAME_LEVEL
-      frame.data @OUT_POINT_KEY, options.until
+    parent = frame.parent()
+    if parent.length
+      frameType = parent[0].className
+
+      if options.to?
+        if (currentFramePosition = @getPositionOf frame)?
+          @log "Moving #{frameType} frame at #{currentFramePosition} to " +
+            "#{options.to}", @SUB_FRAME_LEVEL
+        frame.data @IN_POINT_KEY, options.to
+      if options.until?
+        @log "Dismissing #{frameType} frame \"#{frame.data('alongslide-id')}\" " +
+          "at #{options.until}", @SUB_FRAME_LEVEL
+        frame.data @OUT_POINT_KEY, options.until
     return frame
 
   # Return start position.

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

@@ -1,56 +1,56 @@
-# 
-# parser.coffee: parse raw HTML into Alongslide types: sections, panels, etc. 
-# 
+#
+# parser.coffee: parse raw HTML into Alongslide types: sections, panels, etc.
+#
 # Copyright 2013 Canopy Canopy Canopy, Inc.
 # Author Adam Florin
 
 class Alongslide::Parser
 
   # Store names of flows here as we create them.
-  # 
+  #
   # sections: []
   backgrounds: []
-  flowNames: []
+  flowNames  : []
+  panelNames : []
 
   constructor: (options) ->
     {@source} = options
     @preprocessSource()
 
-  # 
-  # 
+  #
+  #
   preprocessSource: ->
     # Put dummy content inside empty directives as CSSRegions trims any empty
     # elements found near the boundaries of a region.
     (@source.find ".alongslide:empty").text("[ALS]")
 
   # Parser entrypoint.
-  # 
+  #
   # Build sections and store them directly as CSSRegions named flows.
-  # 
+  #
   # Retun panels and footnotes, which will be needed by other components.
-  # 
+  #
   # Note! Parse order matters! Sections should go last, once all non-section
   # material has been scraped out of @source.
-  # 
+  #
   parse: ->
     @sourceLength = 0
 
-    panels = @collectPanels()
+    panels    = @collectPanels()
     footnotes = @collectFootnotes()
     @collectSections()
 
-    flowNames: @flowNames
-    backgrounds: @backgrounds
-    panels: panels
-    footnotes: footnotes
+    flowNames   : @flowNames
+    panelNames  : @panelNames
+    backgrounds : @backgrounds
+    panels      : panels
+    footnotes   : footnotes
     sourceLength: @sourceLength
 
-  # 
-  # 
   collectPanels: ->
     rawPanels = @source.find('.alongslide.show.panel')
 
-    _.object _.map rawPanels, (el) ->
+    _.object _.map rawPanels, (el) =>
       $el = $(el)
       panelId = $el.data('alongslide-id')
       panelEl = $el.clone().removeClass('show')
@@ -58,11 +58,12 @@ class Alongslide::Parser
       # Cleanup
       $el.empty().removeClass('panel')
 
+      @panelNames.push(panelId)
       return [ panelId, panelEl ]
 
   # Sift through passed-in sections, delineating them based on `enter` and `exit`
   # directives, then assigning each to a flow.
-  # 
+  #
   collectSections: ->
     @source.find('.alongslide.enter.section').each (index, directiveElement) =>
       directive = $(directiveElement)
@@ -84,15 +85,15 @@ class Alongslide::Parser
     @buildSection @source.children() unless @source.is(':empty')
 
   # Build section, given content.
-  # 
+  #
   # Create new NamedFlow for it, and log the name.
-  # 
+  #
   # Create section background.
-  # 
+  #
   # @param content - jQuery object of section contents
   # @param directive (optional) - directive which specified the section
   # @param id (optional) - Alongslide section ID
-  # 
+  #
   buildSection: (content, directive, id) ->
     flowName = id || "sectionFlow#{@flowNames.length}"
 
@@ -115,10 +116,10 @@ class Alongslide::Parser
       @backgrounds.push(background)
 
   # Search for footntes as formatted by Redcarpet's footnotes callback
-  # 
+  #
   # Each has an ID of the form `fn1`, which corresponds to the links in the
   # footnote references.
-  # 
+  #
   # Returns a DOM node whose child elements are footnote definitions and removes the generated footnotes from DOM
   collectFootnotes: ->
     @source.find('.als-footnotes:last')

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

@@ -9,27 +9,27 @@ class Alongslide::Scrolling
   # For applyTransition.
   #
   TRANSITIONS:
-    in: [-1..0]
+    in : [-1..0]
     out: [0..1]
 
-  FLIP_THRESHOLD: 0.04
-  WAIT_BEFORE_RESET_MS: 250
-  SLIDE_DURATION_MS: 250
-  FORCE_SLIDE_DURATION_MS: 100
+  FLIP_THRESHOLD          : 0.04
+  WAIT_BEFORE_RESET_MS    : 250
+  SLIDE_DURATION_MS       : 250
+  FORCE_SLIDE_DURATION_MS : 100
   NUM_WHEEL_HISTORY_EVENTS: 10
-  MAGNITUDE_THRESHOLD: 2.2
+  MAGNITUDE_THRESHOLD     : 2.2
 
-  currentPosition: 0
-  indexedTransitions: {}
+  currentPosition         : 0
+  indexedTransitions      : {}
 
   # For desktop scroll throttling.
   #
-  wheelHistory: []
-  lastAverageMagnitude: 0
-  ignoreScroll: false
+  wheelHistory         : []
+  lastAverageMagnitude : 0
+  ignoreScroll         : false
   lastRequestedPosition: 0
 
-  mouseDown: false
+  mouseDown            : false
 
   # browser history
   stateData: {}
@@ -372,9 +372,9 @@ class Alongslide::Scrolling
       duration: duration
       easing: 'easeOutQuad'
       done: (skrollr) =>
-        @stateData =
+        stateData =
           index: @currentPosition
-        alongslide.state.update(@stateData)
+        alongslide.state.updateLocation(stateData)
 
     # For mobile, stage/unstage frames after transition
     if @skrollr.isMobile()

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

@@ -5,28 +5,53 @@
 #
 class Alongslide::State
 
-  panelNames   : {}
-  documentTitle: ''
-  hash         : '#'
-
   constructor: (options = {}) ->
+
     History = window.History
-    if !History.enabled then return false
+
     @documentTitle = document.getElementsByTagName('title')[0].innerHTML
     @panelNames    = options.panelNames
+    @flowNames     = options.flowNames
+    @panelIndices  = options.panelIndices
+    @flowIndices   = options.flowIndices
+    @hashIndices   = []
+    @hash          = '#'
 
-  rewindStateIndex:(state) ->
+  setIndices:(arr) ->
+    @hashIndices = arr
+    # Manually pushing 'digital-project-context' to sections
+    #
+    @flowIndices.push('digital-project-context')
+
+  rewindIndex:(state) ->
     state.index -= 1
-    @update(state);
-
-  update:(state)->
-    if @panelNames[state.index]
-      History.replaceState null, @documentTitle, @hash + @panelNames[state.index]
-      pageData =
-        index    : state.index
-        hash     : @panelNames[state.index]
-      $(document).triggerHandler 'alongslide.pagechange', pageData
-    else if !@panelNames[state.index] and state.index > -1
-      @rewindStateIndex(state)
-    else if state.index <= -1
+    @updateLocation(state);
+
+  updateLocation:(state = {})->
+
+    if !History.enabled then return
+
+    # Account for layouts that only have one section, as the `position`s
+    # won't be in the indices array.
+    #
+    if !@hashIndices[state.index] and state.index > -1
+      @rewindIndex(state)
+
+    # Exit if the indices array is empty
+    #
+    else if state.index < 0
       return
+
+    # Update the hash
+    #
+    else if @hashIndices[state.index]
+
+      History.replaceState null, @documentTitle, @hash + @hashIndices[state.index]
+
+      data =
+        index       : state.index
+        sectionHash : @flowIndices[state.index]
+        panels      : @panelIndices
+        sections    : @flowIndices
+
+      $(document).triggerHandler 'alongslide.stateChange', data

data/app/assets/stylesheets/alongslide.sass

@@ -66,9 +66,8 @@ $white-bg: #ffffff
   position: absolute
   text-rendering: optimizelegibility
   text-transform: auto
-
-  em
-    line-height: 1em
+  p:nth-of-type(1):not(.region-flow-post-text-break)
+    text-indent: 0
 
   // One frame is one screen's worth.
   //
@@ -99,12 +98,6 @@ $white-bg: #ffffff
         height: 45 * $vertical-grid-unit
         top: $outer-margin-height
         position: absolute
-        // > div
-        //   height: $full-bleed - $frame-height-padding
-        .section
-          &[data-section-flow-idx]
-            p:first-child
-              text-indent: 0 !important
 
         // Left/right columns
         //
@@ -333,6 +326,7 @@ $white-bg: #ffffff
       text-indent: 0%
       padding: 2% 6% 0% 6%
   .als-fn-sup
+    line-height: 0
     position: relative
     top: -0.8em
     z-index: 1000000

data/vendor/assets/javascripts/regionFlow.coffee

@@ -1,121 +1,121 @@
-# 
+#
 # regionFlow.coffee: ultralightweight, if somewhat naïve, implementation of
 # CSS regions, according to the spec at:
-# 
+#
 #   http://dev.w3.org/csswg/css-regions/
-# 
+#
 # Copyright 2013 Canopy Canopy Canopy, Inc.
-# 
+#
 
 
 # Initialize NamedFlowMap.
-# 
+#
 class RegionFlow
 
   # To be spec compliant, the NamedFlow .overset property should be proactively
   # calculated after any layout change.
-  # 
+  #
   # However, in reality, checking a DOM element's scrollHeight is very expensive,
   # so it's best not to call it any more than is stricly necessary.
-  # 
+  #
   # For that reason, lazy mode is enabled by default, and callers should call
   # .updateOverset() on namedFlows instead of checking the .overset property.
-  # 
+  #
   lazyMode: true
 
   init: ->
     document.namedFlows = new @NamedFlowMap
 
 # Document has one NamedFlowMap, so that flows may be looked up by index.
-# 
+#
 # [MapClass(DOMString, NamedFlow)]
-# 
+#
 class RegionFlow::NamedFlowMap
 
   namedFlows: {}
 
-  # 
-  # 
+  #
+  #
   build: (flowName) ->
     @namedFlows[flowName] = new RegionFlow::NamedFlow(flowName)
 
   # As specified:
-  # 
+  #
   #   NamedFlow? get(DOMString flowName);
-  # 
+  #
   get: (flowName) ->
     @namedFlows[flowName] || @build(flowName)
 
   # As specified:
-  # 
+  #
   #   boolean has(DOMString flowName);
-  # 
+  #
   has: (flowName) ->
     @namedFlows[flowName]?
 
   # As specified:
-  # 
+  #
   #   NamedFlowMap set(DOMString flowName, NamedFlow flowValue);
-  # 
+  #
   set: (flowName, flowValue) ->
     @namedFlows[flowName] = flowValue
 
   # As specified:
-  # 
+  #
   #   boolean delete(DOMString flowName);
-  # 
+  #
   delete: (flowName) ->
     delete @namedFlows[flowName]
 
 # A NamedFlow
-# 
+#
 #   interface NamedFlow : EventTarget {
 #   };
-# 
+#
 class RegionFlow::NamedFlow
   # readonly attribute DOMString name;
   # readonly attribute boolean overset;
   # readonly attribute integer firstEmptyRegionIndex;
 
-  # 
-  # 
+  #
+  #
   constructor: (@name) ->
     @contentNodes = []
     @overset = false
     @resetRegions()
 
   # Reset, assuming all previously-tracked regions have been destroyed.
-  # 
+  #
   # Leave content nodes right where they are.
-  # 
+  #
   resetRegions: ->
     @regions = []
     @firstEmptyRegionIndex = -1
     @updateOverset() unless RegionFlow::lazyMode
 
   # As specified:
-  # 
+  #
   #   sequence<Region> getRegions();
-  # 
+  #
   getRegions: ->
     @regions
 
   # Push region to end of array and doFlow.
-  # 
+  #
   addRegion: (regionNode) ->
     @regions.push new RegionFlow::Region(regionNode)
     @firstEmptyRegionIndex = @regions.length - 1
     @doFlow()
 
   # As specified:
-  # 
+  #
   #   sequence<Node> getContent();
-  # 
+  #
   getContent: ->
     @contentNodes
 
   # Push content to end of array and doFlow.
-  # 
+  #
   addContent: (contentNode) ->
     @contentNodes.push($(contentNode))
     @doFlow()
@@ -123,7 +123,7 @@ class RegionFlow::NamedFlow
   # If regions are all still there, but the dimensions of already laid-out
   # regions has changed, re-flow all regions from scratch (like resetRegions,
   # but softer).
-  # 
+  #
   reFlow: ->
     node.empty() for node in _.pluck @regions, 'node'
 
@@ -134,16 +134,16 @@ class RegionFlow::NamedFlow
       @firstEmptyRegionIndex++
 
   # Layout logic.
-  # 
+  #
   doFlow: ->
     if @firstEmptyRegionIndex is 0
 
       # TODO: prune marginal nodes? comments, scripts?
-      
+
       @populateRegions()
 
     else if @firstEmptyRegionIndex > 0
-      
+
       # move all nodes from oversetRegion to lastRegion
       # (which will later become the oversetRegion)
       nodes = $(@oversetRegion().node).contents().remove()
@@ -151,21 +151,36 @@ class RegionFlow::NamedFlow
 
       # enter recursive loop
       @breakUp nodes: nodes
-      
+
     @updateOverset() unless RegionFlow::lazyMode
 
   # Place all content into regions. Performed only on first time.
-  # 
+  #
   populateRegions: ->
     @lastRegion().appendNode(node.clone()) for node in @contentNodes
 
+
+  # Verify that a node can be separated from it's predecessor. Used to prevent
+  # breaks on context-dependent elements, e.g., footnote references.
+  #
+  contextDependent:(node) ->
+    conditions = [
+      -> Boolean(@nodeName is 'SUP')
+    ]
+    result = false
+    i = conditions.length
+    while i--
+      result = conditions[i].call(node)
+      if result then break
+    result
+
   # Recursive layout call.
-  # 
+  #
   # @params options - hash
   #   node - HTML element to be broken up. ignored if nodes option is specified.
   #   nodes - array of HTML elements. overrides node option if specified.
   #   into - targetNode to break up 'node' into. defaults to oversetRegion's root.
-  # 
+  #
   breakUp: (options = {}) ->
     nodes = options.nodes || $(options.node).contents()
 
@@ -182,11 +197,11 @@ class RegionFlow::NamedFlow
       formerParent = $(childNode).parent()
       $(childNode).remove().appendTo(targetNode)
 
-      if @oversetRegion().updateOverset() is 'overset'
+      if @oversetRegion().updateOverset() is 'overset' and not @contextDependent(childNode)
 
         # move it back where it was
         $(childNode).remove().prependTo(formerParent)
-        
+
         if childNode.nodeType is Node.TEXT_NODE
           @breakUpText node: childNode, into: targetNode
         else
@@ -198,17 +213,28 @@ class RegionFlow::NamedFlow
       else if $(childNode).hasClass('break-after-always')
         return false
 
+  # Helper function, recurses up the DOM looking for a block element
+  # @params elem - jQuery object
+  #
+  getBlockParent:(elem) ->
+    inlineEls = ['B', 'BIG', 'I', 'SMALL', 'TT', 'ABBR', 'ACRONYM', 'CITE', 'CODE', 'DFN', 'EM', 'KBD', 'STRONG', 'SAMP', 'VAR', 'A', 'BDO', 'BR', 'IMG', 'MAP', 'OBJECT', 'Q', 'SCRIPT', 'SPAN', 'SUB', 'SUP', 'BUTTON', 'INPUT', 'LABEL', 'SELECT', 'TEXTAREA']
+    blockElem = if $.inArray(elem.prop('tagName'), inlineEls) > -1
+      @getBlockParent(elem.parent(), inlineEls)
+    else
+      elem
+    return blockElem
+
   # Given a text node and a target node (in the overset region), find the number
   # of words which fit.
-  # 
+  #
   # @params options - hash
   #   node - textNode to copy words from
   #   into - targetNode to copy words to
-  # 
+  #
   breakUpText: (options = {}) ->
     textNode = options.node
     targetNode = document.createTextNode("")
-    $(targetNode).appendTo(options.into)
+    inlineElements = $(targetNode).appendTo(options.into)
 
     words = textNode.nodeValue.split(/[ ]+/)
     highIndex = words.length - 1
@@ -224,38 +250,39 @@ class RegionFlow::NamedFlow
         lowIndex = tryIndex
 
       tryIndex = Math.floor(lowIndex + (highIndex - lowIndex) / 2)
-      
+
       break if highIndex - lowIndex <= 1
-    
+
     if tryIndex is 0
       $(targetNode).remove()
     else
       targetNode.textContent = words[0..tryIndex].join(" ")
       textNode.nodeValue = words[tryIndex+1..words.length-1].join(" ")
-      $(textNode).parent().addClass("region-flow-post-text-break")
+      $parentElem = @getBlockParent $(textNode).parent() # prevents us from attaching classes to inline elements
+      $parentElem.addClass("region-flow-post-text-break")
 
     @oversetRegion().updateOverset() unless RegionFlow::lazyMode
 
   # Calculate whether named flow is overset.
-  # 
+  #
   # Normally treated as a private method, but called publicly in lazy mode.
   # See RegionFlow::lazyMode.
-  # 
+  #
   updateOverset: ->
     @overset = @regions[@firstEmptyRegionIndex]?.updateOverset() is 'overset'
 
   # Readability helpers.
-  # 
+  #
   oversetRegion: ->
     @regions[@firstEmptyRegionIndex - 1]
   lastRegion: ->
     @regions[@firstEmptyRegionIndex]
-  
+
 
 # [NoInterfaceObject]
 # interface Region {
 # };
-# 
+#
 class RegionFlow::Region
 
   constructor: (node) ->
@@ -263,21 +290,21 @@ class RegionFlow::Region
     @updateOverset() unless RegionFlow::lazyMode
 
   # Append one or more nodes.
-  # 
+  #
   appendNode: (contentNode) ->
     $(@node).append(contentNode)
     @updateOverset() unless RegionFlow::lazyMode
 
   # As specified:
-  # 
+  #
   #   readonly attribute DOMString regionOverset;
-  # 
+  #
   # Possible states
-  # 
+  #
   #   'overset': The region is the last one in the region chain and not able to fit the remaining content from the named flow.
   #   'fit': The region's flow fragment content fits into the region's content box.
   #   'empty': All content from the named flow was fitted in prior regions.
-  # 
+  #
   updateOverset: ->
     node = @node.get(0)
     isOverset = node.scrollHeight > node.clientHeight
@@ -301,5 +328,5 @@ class RegionFlow::Region
       else
         'fit'
 
-# 
+#
 window.RegionFlow = RegionFlow

data/vendor/assets/javascripts/skrollr.js

@@ -722,7 +722,7 @@
 		var deltaTime;
 
 		_addEvent(documentElement, [EVENT_TOUCHSTART, EVENT_TOUCHMOVE, EVENT_TOUCHCANCEL, EVENT_TOUCHEND].join(' '), function(e) {
-			e.preventDefault();
+			// e.preventDefault();
 
 			var touch = e.changedTouches[0];
 
@@ -750,12 +750,18 @@
 					deltaX = currentTouchX - lastTouchX;
 					deltaTime = currentTouchTime - lastTouchTime;
 
-					var position = _mobileOffset - (!_scrollHorizontal ? deltaY : deltaX);
-					_instance.setScrollPosition(position, true);
+					// Allow horizontal scroll on overflowing elements
+					if (Math.abs(deltaX) < Math.abs(deltaY)) {
+						return;
+					} else {
+						var position = _mobileOffset - (!_scrollHorizontal ? deltaY : deltaX);
+						_instance.setScrollPosition(position, true);
+
+						lastTouchY = currentTouchY;
+						lastTouchX = currentTouchX;
+						lastTouchTime = currentTouchTime;
+					}
 
-					lastTouchY = currentTouchY;
-					lastTouchX = currentTouchX;
-					lastTouchTime = currentTouchTime;
 					break;
 				default:
 				case EVENT_TOUCHCANCEL:
@@ -1713,4 +1719,4 @@
 	//Animation frame id returned by RequestAnimationFrame (or timeout when RAF is not supported).
 	var _animFrame;
 
-}(window, document));
+}(window, document));

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: alongslide
 version: !ruby/object:Gem::Version
-  version: 0.9.10
+  version: 0.9.11
 platform: ruby
 authors:
 - Adam Florin
@@ -9,62 +9,62 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-07-09 00:00:00.000000000 Z
+date: 2016-09-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: redcarpet
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
   name: treetop
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 1.4.14
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 1.4.14
 - !ruby/object:Gem::Dependency
   name: polyglot
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
   name: rspec
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 description: Create dynamic web layouts with an extended Markdown syntax
@@ -123,17 +123,17 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ! '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ! '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.2.2
+rubygems_version: 2.4.8
 signing_key: 
 specification_version: 4
 summary: Create dynamic web layouts with an extended Markdown syntax