Permalink
Browse files

Merge branch 'app-transitions'

  • Loading branch information...
2 parents e4310d4 + bb1500c commit 2a0377f9555eb2cd4daadd1185a856f268e65f82 @ericf ericf committed Mar 5, 2012
View
59 src/app/docs/app/app-contributors.mustache
@@ -24,10 +24,11 @@ This example demonstrates the powerful navigation and view management features `
<section>
-<div id="github-app" class="example">
-{{>app-contributors-css}}
-{{>app-contributors-templates}}
-{{>app-contributors-javascript}}
+<div class="example">
+ {{>app-contributors-css}}
+ {{>app-contributors-templates}}
+ {{>app-contributors-javascript}}
+ <div id="github-app"></div>
</div>
</section>
@@ -45,7 +46,7 @@ This application starts with a bare container which will be used to define the b
<h3>Templates</h3>
<p>
-This app makes heavy use of <a href="http://www.handlebarsjs.com/">Handlebars</a> templates to create reusable chunks of HTML which will be used by our views render the different "pages" and sections of our app.
+This app makes heavy use of <a href="../handlebars/index.html">Handlebars</a> templates to create reusable chunks of HTML which will be used by our views render the different "pages" and sections of our app.
</p>
<p>
@@ -61,7 +62,7 @@ This is generally a more maintainable way of embedding templates than storing th
</p>
<div class="scrollable">
-```
+```handlebars
{{>app-contributors-templates}}
```
</div>
@@ -117,8 +118,7 @@ All of these things will live inside the following YUI instance:
<script>
YUI().use('app', 'handlebars', 'jsonp', 'cssbutton', function (Y) {
-var GithubSync,
- User, Repo, RepoList, Contributor, ContributorList,
+var User, Repo, RepoList, Contributor, ContributorList,
UserView, RepoView, RepoListView, ContributorListView,
HomePageView, UserPageView, RepoPageView,
ContributorsApp;
@@ -139,7 +139,7 @@ We have this ability to create mixable feature extensions, like this sync implem
</p>
```
-GithubSync = function () {};
+function GithubSync() {}
GithubSync.API_ORIGIN = 'https://api.github.com';
@@ -860,8 +860,7 @@ ContributorsApp = Y.Base.create('contributorsApp', Y.App, [], {
},
userPage: {
- type : UserPageView,
- parent: 'homePage'
+ type: UserPageView
},
repoPage: {
@@ -871,11 +870,6 @@ ContributorsApp = Y.Base.create('contributorsApp', Y.App, [], {
},
initializer: function () {
- // When a user navigates to different "pages" within our app, the
- // `navigate` event will fire; we can listen to this event and show some
- // indication that the app is busy loading data.
- this.on('navigate', this.indicateLoading);
-
// Here we register a listener for the `HomePageView`'s `changeUser`
// event. When the `HomePageView` is the `activeView`, its events will
// bubble up to this app instance.
@@ -901,14 +895,22 @@ ContributorsApp = Y.Base.create('contributorsApp', Y.App, [], {
// -- Event Handlers -------------------------------------------------------
- indicateLoading: function (e) {
- this.get('activeView').get('container').addClass('loading');
- },
-
// When called, this will navigate the application to the user-page for the
// GitHub username specified on the event facade. This will cause our app to
// dispatch to its route-handlers along with updating the URL.
navigateToUser: function (e) {
+ var activeView = this.get('activeView');
+
+ // We want to add a history entry for "/" when we're showing the home
+ // page, but the app's current path isn't already "/". This provides
+ // proper back button support and helps get around a side effect of
+ // using hash based URLs in this example.
+ if (activeView instanceof HomePageView && this.getPath() !== '/') {
+ // Adds history entry for "/" so we can get back to the home page
+ // via the back button.
+ this.save('/');
+ }
+
this.navigate('/github/' + e.user + '/');
},
@@ -970,6 +972,10 @@ ContributorsApp = Y.Base.create('contributorsApp', Y.App, [], {
if (user === repos.get('user')) {
next();
} else {
+ // A fade transition is preferred when we've switched users, so it
+ // is added to the response object.
+ res.transition = 'fade';
+
// Sets the current user model on the `RepoList` instance and loads
// the repos for the given user before continuing.
repos.set('user', user).load(function () {
@@ -1023,19 +1029,25 @@ ContributorsApp = Y.Base.create('contributorsApp', Y.App, [], {
// This is the final route for "/github/:user/" URLs and will show our app's
// user page which lists the user's repos.
- showUserPage: function (req) {
+ showUserPage: function (req, res) {
this.showView('userPage', {
model : req.user,
modelList: req.repos
+ }, {
+ // Overrides the default transition with the preferred one, if set.
+ transition: res.transition
});
},
// This is the final route for "/github/:user/:repo/" URLs and will show our
// app's repo page which lists the contributors to the repo/project.
- showRepoPage: function (req) {
+ showRepoPage: function (req, res) {
this.showView('repoPage', {
model : req.repo,
modelList: req.contributors
+ }, {
+ // Overrides the default transition with the preferred one, if set.
+ transition: res.transition
});
}
}, {
@@ -1083,6 +1095,9 @@ new ContributorsApp({
container : '#github-app',
linkSelector: '#github-app a',
+ // Enable view transitions when users are navigating around the app.
+ transitions: true,
+
// We'll define the default GitHub user to be "yui".
user: new User({login: 'yui'})
}).render();
View
16 src/app/docs/app/partials/app-contributors-css.mustache
@@ -1,13 +1,12 @@
<style scoped>
/*-- Common Styles ----------------------------------------------------------*/
-#github-app h1 {
+.example {
padding: 0;
}
-#github-app .loading {
- opacity: 0.5;
- -webkit-transition: opacity 0.15s;
+#github-app h1 {
+ padding: 0;
}
#github-app .avatar,
@@ -77,6 +76,9 @@
/*-- HomePage Styles --------------------------------------------------------*/
+#github-app .home-page {
+ padding: 1em;
+}
#github-app .home-page h1,
#github-app .home-page p {
display: block;
@@ -103,6 +105,9 @@
/*-- UserPage Styles --------------------------------------------------------*/
+#github-app .user-page {
+ padding: 1em;
+}
#github-app .repos {
padding-left: 0;
list-style: none;
@@ -159,6 +164,9 @@
/*-- RepoPage Styles --------------------------------------------------------*/
+#github-app .repo-page {
+ padding: 1em;
+}
#github-app .contributors {
margin-left: -5px;
margin-right: -5px;
View
65 src/app/docs/app/partials/app-contributors-javascript.mustache
@@ -1,12 +1,13 @@
<script>
YUI().use('app', 'handlebars', 'jsonp', 'cssbutton', function (Y) {
-var GithubSync,
- User, Repo, RepoList, Contributor, ContributorList,
+var User, Repo, RepoList, Contributor, ContributorList,
UserView, RepoView, RepoListView, ContributorListView,
HomePageView, UserPageView, RepoPageView,
ContributorsApp;
+// -- Utility Functions --------------------------------------------------------
+
// A helper function used by the Views to create labels for numerical fields
// which are correctly pluralized, and puts the label back on the `data` object.
function addLabel(data, field, label) {
@@ -16,8 +17,7 @@ function addLabel(data, field, label) {
}
// -- GithubSync ---------------------------------------------------------------
-
-GithubSync = function () {};
+function GithubSync() {}
GithubSync.API_ORIGIN = 'https://api.github.com';
@@ -69,7 +69,6 @@ GithubSync.prototype = {
};
// -- User ---------------------------------------------------------------------
-
User = Y.Base.create('user', Y.Model, [GithubSync], {
githubURL: '/users/{user}',
@@ -92,7 +91,6 @@ User = Y.Base.create('user', Y.Model, [GithubSync], {
});
// -- Repo ---------------------------------------------------------------------
-
Repo = Y.Base.create('repo', Y.Model, [], {
// The `id` attribute for this Model will be an alias for `name`.
idAttribute: 'name'
@@ -111,7 +109,6 @@ Repo = Y.Base.create('repo', Y.Model, [], {
});
// -- RepoList -----------------------------------------------------------------
-
RepoList = Y.Base.create('repoList', Y.ModelList, [GithubSync], {
model : Repo,
githubURL: '/users/{user}/repos',
@@ -138,15 +135,13 @@ RepoList = Y.Base.create('repoList', Y.ModelList, [GithubSync], {
});
// -- Contributor --------------------------------------------------------------
-
Contributor = Y.Base.create('contributor', User, [], {}, {
ATTRS: {
contributions: {value: 0}
}
});
// -- ContributorList ----------------------------------------------------------
-
ContributorList = Y.Base.create('contributorList', Y.ModelList, [GithubSync], {
model : Contributor,
githubURL: '/repos/{user}/{repo}/contributors',
@@ -175,9 +170,7 @@ ContributorList = Y.Base.create('contributorList', Y.ModelList, [GithubSync], {
}
});
-
// -- User View ----------------------------------------------------------------
-
UserView = Y.Base.create('userView', Y.View, [], {
// Compiles the User Template into a reusable Handlebars template.
template: Y.Handlebars.compile(Y.one('#t-user').getContent()),
@@ -201,7 +194,6 @@ UserView = Y.Base.create('userView', Y.View, [], {
});
// -- RepoList View ------------------------------------------------------------
-
RepoListView = Y.Base.create('repoListView', Y.View, [], {
// Compiles the RepoList Template into a reusable Handlebars template.
template: Y.Handlebars.compile(Y.one('#t-repo-list').getContent()),
@@ -275,7 +267,6 @@ RepoListView = Y.Base.create('repoListView', Y.View, [], {
});
// -- Repo View ----------------------------------------------------------------
-
RepoView = Y.Base.create('repoView', Y.View, [], {
// Compiles the Repo Template into a reusable Handlebars template.
template: Y.Handlebars.compile(Y.one('#t-repo').getContent()),
@@ -299,7 +290,6 @@ RepoView = Y.Base.create('repoView', Y.View, [], {
});
// -- ContributorList View -----------------------------------------------------
-
ContributorListView = Y.Base.create('contributorListView', Y.View, [], {
// Compiles the ContributorList Template into a reusable Handlebars template.
template: Y.Handlebars.compile(Y.one('#t-contributor-list').getContent()),
@@ -336,9 +326,7 @@ ContributorListView = Y.Base.create('contributorListView', Y.View, [], {
}
});
-
// -- HomePage View ------------------------------------------------------------
-
HomePageView = Y.Base.create('homePageView', Y.View, [], {
// Compiles the HomePage Template into a reusable Handlebars template.
template: Y.Handlebars.compile(Y.one('#t-home').getContent()),
@@ -396,7 +384,6 @@ HomePageView = Y.Base.create('homePageView', Y.View, [], {
});
// -- UserPage View ------------------------------------------------------------
-
UserPageView = Y.Base.create('userPageView', Y.View, [], {
initializer: function () {
var user = this.get('model'),
@@ -440,7 +427,6 @@ UserPageView = Y.Base.create('userPageView', Y.View, [], {
});
// -- RepoPage View ------------------------------------------------------------
-
RepoPageView = Y.Base.create('repoPageView', Y.View, [], {
initializer: function () {
var repo = this.get('model'),
@@ -484,9 +470,7 @@ RepoPageView = Y.Base.create('repoPageView', Y.View, [], {
}
});
-
// -- Contributors App ---------------------------------------------------------
-
ContributorsApp = Y.Base.create('contributorsApp', Y.App, [], {
// This is where we can declare our page-level views and define the
// relationship between the "pages" of our application. We can later use the
@@ -497,8 +481,7 @@ ContributorsApp = Y.Base.create('contributorsApp', Y.App, [], {
},
userPage: {
- type : UserPageView,
- parent: 'homePage'
+ type: UserPageView
},
repoPage: {
@@ -508,11 +491,6 @@ ContributorsApp = Y.Base.create('contributorsApp', Y.App, [], {
},
initializer: function () {
- // When a user navigates to different "pages" within our app, the
- // `navigate` event will fire; we can listen to this event and show some
- // indication that the app is busy loading data.
- this.on('navigate', this.indicateLoading);
-
// Here we register a listener for the `HomePageView`'s `changeUser`
// event. When the `HomePageView` is the `activeView`, its events will
// bubble up to this app instance.
@@ -538,14 +516,22 @@ ContributorsApp = Y.Base.create('contributorsApp', Y.App, [], {
// -- Event Handlers -------------------------------------------------------
- indicateLoading: function (e) {
- this.get('activeView').get('container').addClass('loading');
- },
-
// When called, this will navigate the application to the user-page for the
// GitHub username specified on the event facade. This will cause our app to
// dispatch to its route-handlers along with updating the URL.
navigateToUser: function (e) {
+ var activeView = this.get('activeView');
+
+ // We want to add a history entry for "/" when we're showing the home
+ // page, but the app's current path isn't already "/". This provides
+ // proper back button support and helps get around a side effect of
+ // using hash based URLs in this example.
+ if (activeView instanceof HomePageView && this.getPath() !== '/') {
+ // Adds history entry for "/" so we can get back to the home page
+ // via the back button.
+ this.save('/');
+ }
+
this.navigate('/github/' + e.user + '/');
},
@@ -607,6 +593,10 @@ ContributorsApp = Y.Base.create('contributorsApp', Y.App, [], {
if (user === repos.get('user')) {
next();
} else {
+ // A fade transition is preferred when we've switched users, so it
+ // is added to the response object.
+ res.transition = 'fade';
+
// Sets the current user model on the `RepoList` instance and loads
// the repos for the given user before continuing.
repos.set('user', user).load(function () {
@@ -660,19 +650,25 @@ ContributorsApp = Y.Base.create('contributorsApp', Y.App, [], {
// This is the final route for "/github/:user/" URLs and will show our app's
// user page which lists the user's repos.
- showUserPage: function (req) {
+ showUserPage: function (req, res) {
this.showView('userPage', {
model : req.user,
modelList: req.repos
+ }, {
+ // Overrides the default transition with the preferred one, if set.
+ transition: res.transition
});
},
// This is the final route for "/github/:user/:repo/" URLs and will show our
// app's repo page which lists the contributors to the repo/project.
- showRepoPage: function (req) {
+ showRepoPage: function (req, res) {
this.showView('repoPage', {
model : req.repo,
modelList: req.contributors
+ }, {
+ // Overrides the default transition with the preferred one, if set.
+ transition: res.transition
});
}
}, {
@@ -714,6 +710,9 @@ new ContributorsApp({
container : '#github-app',
linkSelector: '#github-app a',
+ // Enable view transitions when users are navigating around the app.
+ transitions: true,
+
// We'll define the default GitHub user to be "yui".
user: new User({login: 'yui'})
}).render();

0 comments on commit 2a0377f

Please sign in to comment.