diff --git a/Gruntfile.coffee b/Gruntfile.coffee index 18ee874..39453d3 100644 --- a/Gruntfile.coffee +++ b/Gruntfile.coffee @@ -32,6 +32,7 @@ module.exports = (grunt) -> # Vendor dependencies. 'vendor/lodash/dist/lodash.js' 'vendor/ractive/ractive.js' + 'vendor/ractive-transitions-fade/ractive-transitions-fade.js' 'vendor/ractive-adaptor/adaptor.js' 'vendor/firebase/firebase.js' 'vendor/firebase-simple-login/firebase-simple-login.js' diff --git a/TODO.md b/TODO.md index ac26a65..00893a1 100644 --- a/TODO.md +++ b/TODO.md @@ -2,15 +2,9 @@ ##Release: MVP -- [x] upgrade to Ractive [0.6.0](https://github.com/ractivejs/ractive/blob/dev/CHANGELOG.md) - [ ] create a 500/400/loading system messages -- [ ] slide top menu on page load too - [ ] deal with Firebase timing out, are we still logged-in? -- [ ] on system-wide notifications show a button that takes us to the index unless we are on index - [ ] mediator `!app/notify/edit` will edit the current notification -- [ ] slide topbar up a bit on hover so that the user can click the menu -- [ ] landing/index page needs to show (hero box) immediately -- [ ] logged-in state slides into view independent of page loading - [ ] verify that project exists on project page when fetching it remotely (add behind the scenes) - [ ] need to show status (receiving information etc.) per repo - [ ] provide a documentation site @@ -33,6 +27,8 @@ - [ ] trigger success topbar when we have completed a milestone on chart page; show plain when we are behind - [ ] on chart page show a little progress bar in the title - [ ] use tap plugin for Ractive +- [x] logged-in state fade into view independent of page loading +- [x] upgrade to Ractive [0.6.0](https://github.com/ractivejs/ractive/blob/dev/CHANGELOG.md) ##Future Releases diff --git a/bower.json b/bower.json index b87f9eb..ddd8679 100644 --- a/bower.json +++ b/bower.json @@ -16,6 +16,7 @@ "d3": "~3.4.11", "d3-tip": "~0.6.5", "marked": "~0.3.2", - "director": "~1.2.2" + "director": "~1.2.2", + "ractive-transitions-fade": "~0.1.2" } } diff --git a/public/js/app.bundle.js b/public/js/app.bundle.js index 6fee08e..628b60f 100644 --- a/public/js/app.bundle.js +++ b/public/js/app.bundle.js @@ -21148,6 +21148,107 @@ }; }( typeof window !== 'undefined' ? window : this ) ); +;/* + + ractive-transitions-fade + ======================== + + Version 0.1.2. + + This plugin does exactly what it says on the tin - it fades elements + in and out, using CSS transitions. You can control the following + properties: `duration`, `delay` and `easing` (which must be a valid + CSS transition timing function, and defaults to `linear`). + + The `duration` property is in milliseconds, and defaults to 300 (you + can also use `fast` or `slow` instead of a millisecond value, which + equate to 200 and 600 respectively). As a shorthand, you can use + `intro='fade:500'` instead of `intro='fade:{"duration":500}'` - this + applies to many other transition plugins as well. + + If an element has an opacity other than 1 (whether directly, because + of an inline style, or indirectly because of a CSS rule), it will be + respected. You can override the target opacity of an intro fade by + specifying a `to` property between 0 and 1. + + ========================== + + Troubleshooting: If you're using a module system in your app (AMD or + something more nodey) then you may need to change the paths below, + where it says `require( 'Ractive' )` or `define([ 'Ractive' ]...)`. + + ========================== + + Usage: Include this file on your page below Ractive, e.g: + + + + + Or, if you're using a module loader, require this module: + + // requiring the plugin will 'activate' it - no need to use + // the return value + require( 'ractive-transitions-fade' ); + + Add a fade transition like so: + +
this will fade in
+ +*/ + +(function ( global, factory ) { + + 'use strict'; + + // Common JS (i.e. browserify) environment + if ( typeof module !== 'undefined' && module.exports && typeof require === 'function' ) { + factory( require( 'ractive' ) ); + } + + // AMD? + else if ( typeof define === 'function' && define.amd ) { + define([ 'ractive' ], factory ); + } + + // browser global + else if ( global.Ractive ) { + factory( global.Ractive ); + } + + else { + throw new Error( 'Could not find Ractive! It must be loaded before the ractive-transitions-fade plugin' ); + } + +}( typeof window !== 'undefined' ? window : this, function ( Ractive ) { + + 'use strict'; + + var fade, defaults; + + defaults = { + delay: 0, + duration: 300, + easing: 'linear' + }; + + fade = function ( t, params ) { + var targetOpacity; + + params = t.processParams( params, defaults ); + + if ( t.isIntro ) { + targetOpacity = t.getStyle( 'opacity' ); + t.setStyle( 'opacity', 0 ); + } else { + targetOpacity = 0; + } + + t.animateStyle( 'opacity', targetOpacity, params ).then( t.complete ); + }; + + Ractive.transitions.fade = fade; + +})); ;// Ractive adaptor plugin // ======================= // @@ -41197,6 +41298,7 @@ Router.prototype.mount = function(routes, path) { var _this = this; this.client = new Firebase("https://" + (config.get('firebase')) + ".firebaseio.com"); this.auth = new FirebaseSimpleLogin(this.client, function(err, obj) { + user.set('loaded', true); if (err || !obj) { return _this.authCb(err); } @@ -41622,7 +41724,7 @@ Router.prototype.mount = function(routes, path) { // header.mustache root.require.register('burnchart/src/templates/header.js', function(exports, require, module) { - module.exports = ["
","
"," {{#user.displayName}}"," {{user.displayName}} logged in"," {{else}}"," Sign In"," {{/user.displayName}}","
",""," "," "," ","","
"," "," "," ","
",""," ","
"].join("\n"); + module.exports = ["
"," {{#with user}}"," {{#loaded}}","
"," {{#displayName}}"," {{displayName}} logged in"," {{else}}"," Sign In"," {{/displayName}}","
"," {{/loaded}}"," {{/with}}",""," "," "," ","","
"," "," "," ","
",""," ","
"].join("\n"); }); // hero.mustache diff --git a/public/js/app.js b/public/js/app.js index 48d27e5..b0f7ec8 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -389,6 +389,7 @@ var _this = this; this.client = new Firebase("https://" + (config.get('firebase')) + ".firebaseio.com"); this.auth = new FirebaseSimpleLogin(this.client, function(err, obj) { + user.set('loaded', true); if (err || !obj) { return _this.authCb(err); } @@ -814,7 +815,7 @@ // header.mustache root.require.register('burnchart/src/templates/header.js', function(exports, require, module) { - module.exports = ["
","
"," {{#user.displayName}}"," {{user.displayName}} logged in"," {{else}}"," Sign In"," {{/user.displayName}}","
",""," "," "," ","","
"," "," "," ","
",""," ","
"].join("\n"); + module.exports = ["
"," {{#with user}}"," {{#loaded}}","
"," {{#displayName}}"," {{displayName}} logged in"," {{else}}"," Sign In"," {{/displayName}}","
"," {{/loaded}}"," {{/with}}",""," "," "," ","","
"," "," "," ","
",""," ","
"].join("\n"); }); // hero.mustache diff --git a/src/models/user.coffee b/src/models/user.coffee index f9bd9ec..cb00acc 100644 --- a/src/models/user.coffee +++ b/src/models/user.coffee @@ -6,7 +6,7 @@ module.exports = new Model # Default to a local user. 'data': - 'provider': "local" - 'id': "0" - 'uid': "local:0" - 'token': null \ No newline at end of file + 'provider': "local" + 'id': "0" + 'uid': "local:0" + 'token': null \ No newline at end of file diff --git a/src/modules/firebase.coffee b/src/modules/firebase.coffee index 5c7081d..fd38ee1 100644 --- a/src/modules/firebase.coffee +++ b/src/modules/firebase.coffee @@ -10,6 +10,8 @@ class Class # Check if we have a user in session. @auth = new FirebaseSimpleLogin @client, (err, obj) => + user.set 'loaded', yes + return @authCb err if err or not obj # Save user. diff --git a/src/templates/header.mustache b/src/templates/header.mustache index 7a8f35c..3758f20 100644 --- a/src/templates/header.mustache +++ b/src/templates/header.mustache @@ -1,11 +1,15 @@