Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.10.0/ember-template-compiler.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.10.0/ember.debug.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//www.fuelcdn.com/fuelux/3.6.3/css/fuelux.min.css" rel="stylesheet">
</head>
<body class="fuelux">
  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
    {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="wizard/index">
  <div class="step-pane sample-pane alert active">
      <h4>Create</h4>
</div>
  </script>
  <script type="text/x-handlebars" data-template-name="wizard/review">
  <div class="step-pane sample-pane alert active">
      <h4>Review</h4>
    </div>
  </script>
  <script type="text/x-handlebars" data-template-name="wizard/complete">
  <div class="step-pane sample-pane alert active">
      <h4>Complete</h4>
    </div>
  </script>
  <script type="text/x-handlebars" data-template-name="wizard">
   <div class="wizard" id="wizardIllustration">
    {{form-wizard steps=routeValues currentPath=currentPath}}
  <div class="actions">
  {{#if showPrev}}
    <button type="button" {{action 'prev'}}class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>{{prevButton}}</button>
    {{/if}}
    {{#if showNext}}
    <button {{action 'next'}}type="button" class="btn btn-default btn-next" >{{nextButton}}<span class="glyphicon glyphicon-arrow-right"></span></button>
    {{/if}}
  </div>
  <div class="step-content">
    {{outlet}}
  </div>
</div>
  </script>
  <script type="text/x-handlebars" data-template-name="components/form-wizard">
  {{#each step in steps}}
    {{wizard-step name=step.step activeIndex=activeIndex index=_view.contentIndex}}
{{/each}}
  </script>
   <script type="text/x-handlebars" data-template-name="components/wizard-step">
  <span class="badge">{{displayIndex}}</span>{{name}}<span class="chevron"></span>
  </script>
  
  
</body>
</html>
 
/* Put your CSS here */
html, body {
  margin: 20px;
}
 
App = Ember.Application.create();
App.Router.map(function() {
  this.resource('wizard', function(){
    this.route('index');
    this.route('review');
    this.route('complete');
  });
});
App.IndexRoute = Ember.Route.extend({
  model: function() {
    this.transitionTo('wizard');
    return ['red', 'yellow', 'blue'];
  }
  
});
App.FormWizardComponent = Ember.Component.extend({
    tagName: 'ul',
    classNames: ['steps'],
    currentPath: null, //passed in value, is current route
    steps: null, 
    activeIndex: function(){
        var currentPath = this.get('currentPath');
        var steps = this.get('steps');
        for(var i = 0; i < steps.length; i++){
            if(steps[i].route === currentPath){
                return i;
            }
        }
    }.property('currentPath')
});
App.WizardStepComponent = Ember.Component.extend({
    tagName: 'li',
    attributeBindings: ['displayIndex:data-step'],
    classNameBindings: ['isActive:active'],
    index: null,
    displayIndex: function(){
        return this.get('index') + 1;
    }.property('index'),
    isActive: function(){
        
        return this.get('activeIndex') === this.get('index');
    }.property('activeIndex', 'index')
});
App.RouteVal = Ember.Object.extend({
    route: null,
    val: null
});
App.CurrentRouteAware = Ember.Mixin.create({
    needs: ['application'],
    currentPath: Ember.computed.alias("controllers.application.currentPath")
});
App.WizardController = Ember.Controller.extend(App.CurrentRouteAware, {
  routeValues: [
        App.RouteVal.create({
            route: 'wizard.index',
            step: 'Create',
            next: 'Review',
            nextTransition: 'wizard.review',
            prevTransition: 'wizard.index',
            showNext: true,
            showPrev: false
        }),
        App.RouteVal.create({
            route: 'wizard.review',
            step: 'Review',
            next: 'Complete',
            prev: 'Create',
            nextTransition: 'wizard.complete',
            prevTransition: 'wizard.index',
            showNext: true,
            showPrev: true
        }),
        App.RouteVal.create({
            route: 'wizard.complete',
            step: 'Complete',
            next: 'Make Another',
            prev: 'Review',
            nextTransition: 'wizard.complete',
            prevTransition: 'wizard.review',
            showNext: false,
            showPrev: true
        })
    ], 
    nextButton: routeVal('routeValues', 'next'),
    prevButton: routeVal('routeValues', 'prev'),
    nextTransition: routeVal('routeValues', 'nextTransition'),
    showButtons: routeVal('routeValues', 'showButtons'),
    prevTransition: routeVal('routeValues', 'prevTransition'),
    showNext: routeVal('routeValues', 'showNext'),
    showPrev: routeVal('routeValues', 'showPrev'),
    actions: {
        next: function(){
            this.transitionToRoute(this.get('nextTransition'));
        },
        prev: function(){
            this.transitionToRoute(this.get('prevTransition'));
        }
    }
});
function routeVal(routeVals, prop){
    return Ember.computed('currentPath', function(){
        var currentRoute = Ember.get(this, 'currentPath');
        var routeValues = Ember.get(this, routeVals);
        for (var i = 0; i < routeValues.length; i++) {
            if (routeValues[i].route === currentRoute) {
                return routeValues[i][prop];
            }
        }
    });
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
henryw14pro
0viewers