revelry_core 0.1.8.2 → 0.1.8.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0ff30f1fa34db5dc199df1033b972481671001d2
-  data.tar.gz: e99f24e33a966ff5f0b68572d17fc2a64dd51bff
+  metadata.gz: fa4ab2470c5392562e8f5fa32849012628e07f0b
+  data.tar.gz: b6d3f57b20aaaa6c9dced986aeec290e6d982b13
 SHA512:
-  metadata.gz: f79afb934c3b231a445d7ba262ee314c07fd804263c68cf21100def07770ccda531dc7fbf2b43c4bd88ddcc344446e931db40275ab46f6cc1e54233da9a94ccd
-  data.tar.gz: 914edc2c42526840d7f6ca488f5080c46e371ba0121d4a00575fa8e986f951480a048e4b58af3430276f4844f17d08cd9b188679d727f92ff7ec7c495b77a9a9
+  metadata.gz: d5d4735dc6bb8bb5a06e13d9a121b96b2e59c850dd27668e21bd3c01bf9a717c50830b4345a4cbe44d78604cf0aee2ecda74331a7b974b9d2b419053e784d19a
+  data.tar.gz: 5f7e4897b904c5a4d2ad127f882eb1f53677471a26d81767abddf2191824409961fa3867e182cbfbbc53b70bef48cd350e9c3516bbae9d202c686aa4db69af35

data/app/assets/javascripts/revelry/router/router.js.coffee.erb

@@ -2,6 +2,8 @@
 <%# Ensure routes are loaded during precompile. %>
 <% Rails.application.reload_routes! %>
 
+CSSTransitionGroup = React.addons.CSSTransitionGroup
+
 Rev.registerComponent 'Router',
   ### CLASS METHODS ###
 
@@ -43,12 +45,31 @@ Rev.registerComponent 'Router',
 
   mixins: [Backbone.Events]
 
+  getDefaultProps: ->
+    loadingScreenDelay: 800
+
   getInitialState: ->
     bbRouter: new Backbone.Router(Rev.Components.Router.routerConfig())
     # Seed the path and options (which we pass down to child components) from
     # the initial props we received. Updates will come from the AJAX prop fetch.
     path: @props.path
     options: @props.options
+    isLoading: false
+
+  # Loading state is just used to show the loading screen or not.
+  # Best practice is to introduce a delay before showing a loading screen.
+  # Below a certain time threshold, users actually prefer to not see that crap.
+  # Configure the delay with @props.loadingScreenDelay
+  setLoading: (isLoading) ->
+    if isLoading
+      unless @_loadingTimeoutHandle?
+        fn = () => @setState isLoading: true
+        @_loadingTimeoutHandle = setTimeout fn, @props.loadingScreenDelay
+    else
+      if @_loadingTimeoutHandle?
+        clearTimeout @_loadingTimeoutHandle
+        delete @_loadingTimeoutHandle
+      @setState isLoading: false
 
   componentDidMount: ->
     # Start history to pay attention to pushState and hashChange events
@@ -68,7 +89,7 @@ Rev.registerComponent 'Router',
     "/#{baseUrl}?#{if query? and query.length then '&' else ''}#{encodeURIComponent '__props'}"
 
   # Fall back to full page navigation request
-  onPropsFetchFailure: ->
+  doFailureFallback: ->
     window.location = @locationURL()
 
   # Make a handler for successful props fetching of a given templatePath
@@ -77,27 +98,57 @@ Rev.registerComponent 'Router',
     return (data, textStatus, xhr)=>
       try
         @setState path: templatePath, options: JSON.parse(data)
+        @setLoading false
         window.scrollTo 0, 0
       catch err
-        @onPropsFetchFailure()
+        @doFailureFallback()
 
   routeChangeHandler: (templatePath, params)->
+    @setLoading true
     # Request the same props from the server that we would get for a server-side
     # render. If we get them back successfully, swap the page. If we fail, fall
     # back to server side render.
-    Backbone.ajax
+    @_xhr.abort() if @_xhr?
+    @_xhr = Backbone.ajax
       url: @locationURL()
       beforeSend: (xhr) ->
         xhr.setRequestHeader "Content-Type", "text/reactprops"
         xhr.setRequestHeader "Accept", "text/reactprops"
       success: @makePropsFetchSuccessHandler(templatePath)
-      error: @onPropsFetchFailure
+      error: @onRouteChangeError
     true
 
-  render: ->
-    <div className="RevRouter">
+  onRouteChangeError: (xhr) ->
+    # Aborts aren't really errors.
+    @doFailureFallback unless xhr.statusText == "abort"
+
+  getKey: (isInCSSTransitionGroup) ->
+    # We never need to compute any keys at all unless we're not using CSSTransitionGroup.
+    if isInCSSTransitionGroup
+      # We can use a generic key for the loading screen.
+      if @state.isLoading
+        'GENERIC_ROUTER_KEY'
+      # Actual screens need a unique computed key to tell the CSSTransitionGroup something changed.
+      else
+        JSON.stringify path: @state.path, options: @state.options
+
+  # Show a loading screen if we're loading. Show the content if we're done.
+  renderInner: (isInCSSTransitionGroup = false) ->
+    <div className="RevRouter" key={@getKey isInCSSTransitionGroup}>
       {
-        React.Children.map @props.children, (child)=>
-          React.addons.cloneWithProps child, { path: @state.path, options: @state.options }
+        if @state.isLoading
+          @props.loadingScreen or <h1 className="RevRouter-loadingScreen">Loading...</h1>
+        else
+          React.Children.map @props.children, (child)=>
+            React.addons.cloneWithProps child, { path: @state.path, options: @state.options }
       }
     </div>
+
+  render: ->
+    # If you give it a transitionName, it will wrap everything in a CSSTransitionGroup
+    # All props are passed down, so Router can take any props that a CSSTransitionGroup can.
+    if @props.transitionName
+      <CSSTransitionGroup {...@props}>{@renderInner(true)}</CSSTransitionGroup>
+    # No transitionName? Don't do anything fancy.
+    else
+      @renderInner()

data/lib/revelry_core/version.rb

@@ -1,5 +1,5 @@
 module Revelry
   module Core
-    VERSION = "0.1.8.2"
+    VERSION = "0.1.8.3"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: revelry_core
 version: !ruby/object:Gem::Version
-  version: 0.1.8.2
+  version: 0.1.8.3
 platform: ruby
 authors:
 - Revelry Labs, LLC
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-05-26 00:00:00.000000000 Z
+date: 2015-05-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails