StyleGuide Mockup

by amindunited

HTML

<link rel="stylesheet" href="https://rawgithub.com/ducksboard/gridster.js/master/dist/jquery.gridster.css" />
<link rel="stylesheet" href="https://s3.amazonaws.com/kiddsoftware-jsfiddle/qunit-1.11.0.css"/>


<script type="text/x-handlebars" data-template-name="application">
    
    <div class="pageWrap">
        {{outlet}}
    </div>
    <nav class="mainNav">
        <div class="url">
            {{controller.history.lastObject}}
        </div>
        <ul>
            <li>{{#link-to 'home'}}Home{{/link-to}}</li>
            <li>{{#link-to 'styleguide'}}Styleguide{{/link-to}}</li>
            <li>{{back-button action="goBack"}}</li>
        </ul>
    </nav>
    
</script>
<script type="text/x-handlebars" data-template-name="home">
    
    <div {{bind-attr class=":page view.current view.previous view.next"}}>
        <h1>Home Page</h1>
    </div>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="styleguide">
    
    <div {{bind-attr class=":page view.current view.previous view.next"}}>
        <h1>Style Guide</h1>
        <nav class="sideNav">
            <ul>
                {{#each medium in controller.content.media}}
                <li>
                    {{#link-to 'media' medium.id}}
                        {{medium.title}}
                    {{/link-to}}
                </li>
                {{/each}}
            </ul>
        </nav>
    </div>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="media">
    
    <div {{bind-attr class=":page view.current view.previous view.next"}}>
        <h1>Media</h1>
        
        <nav class="sideNav">
            <ul>
                {{#each publication in controller.content}}
                <li>
                    {{#link-to 'publication' publication.id}}
                        {{publication.title}}
                    {{/link-to}}
                </li>
                {{/each}}
            </ul>
        </nav>
    </div>
   ...

CSS

nav.mainNav ul li {
    display: inline-block;
}
/* */
.pageWrap {
    position: absolute;
    left: 0%;
    top: 40px;
    width: 100%;
    height: 100%;
    border: solid 1px #336633;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*
Page transitions
*/
.page {
    /*margin-top: 90px;*/
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    position:absolute;
    height: 100%;
    width:100%;
    top: 0px;
    left: 0;
    background-color: rgba(200, 200, 200, .5);

    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.page.current {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.page.previous {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
 
.page.next {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
 
.page.transition {
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}

/* SOF entypo */
/*//////////////////////////////////////////////////////////////////////*/
.icon-phone:after { content:"\1F4DE"; }
.icon-mobile:after { content:"\1F4F1"; }
.icon-mouse:after { content:"\E789"; }
.icon-address:after { content:"\E723"; }
.icon-mail:after { content:"\2709"; }
.icon-paper-plane:after { content:"\1F53F"; }
.icon-pencil:after { content:"\270E"; }
.icon-feather:after { content:"\2712"; }
.icon-attach:after { content:"\1F4CE"; }
.icon-inbox:after { content:"\E777"; }
.icon-reply:after { content:"\E712"; }
.icon-reply-all:after { content:"\E713"; }
.icon-forward:after { content:"\27A6"; }
.icon-user:after { content:"\1F464"; }
.icon-users:after { content:"\1F465"; }
.icon-add-user:after { content:"\E700"; }
.icon-vcard:after { content:"\E722"; }
.icon-export:after { content:"\E715"; }
.icon-location:after { content:"\E724"; }
.icon-map:after { content:"\E727";...

JavaScript

//Set up global environment vars
env = {
    testing: false
}

App = Em.Application.create();

App.ApplicationController = Em.Controller.extend({
  history: [],

  hasHistory: function(){
    return this.get('history.length')>1;
  }.property('history.length'),

  watchHistory: function(){
    this.get('history').pushObject(this.get('currentPath'));
  }.observes('currentPath'),

    actions: {
        goBack: function(){
            // implement your own history popping that actually works ;)
            this.get('history').popObject();
            window.history.back(); 
            this.get('history').popObject(); // get rid of route change here, don't need it
        }
    }
 });


App.Router.map(function(){
    this.resource('home', {path:'/'}, function(){
        this.resource('styleguide', {path:'/styleguide'}, function(){
            this.resource('media', {path:'/:media_id'}, function(){
                this.resource('publication', {path:'/:publication_id'}, function(){
                    this.resource('element', {path:'/:element_id'}, function(){
                    
                    });
                    
                });
            });
        });
    });
});

App.PageView = Em.View.extend({
    
    current: false,
	previous: false,
	next: true,
    
	animateIn: function(done){
		
		this.get('parentView').set('previous', true);
		this.get('parentView').set('next', false);
		this.get('parentView').set('current', false);
		
		var pp = this.get('parentView').$('.page').first();
		pp.addClass('transition');

        done.call(this);
		
        PrefixedEvent(pp[0], 'transitionEnd', function(e){
			$(e.target).removeClass('transition');
		});
	},
	animateOut: function(done){
		//
		this.set('previous', false);
		this.set('next', true);
		this.set('current', false);
		
		var pp = this.$('.page').first();
		pp.addClass('transition');

		PrefixedEvent(pp[0], 'transitionEnd',...