wise-web-client/public/js/libs/plugins/backbone-wizard.min.js

Based on Spine MVC framework

/*!
 * Backbone-wizard v1.4.1 (http://http://ayxos.com/backbone-wizard/)
 * Copyright 2014 Marco Antonio Pajares Silva.
 * Licensed under MIT
 */
define(function(a){"use strict";var b;// if exist requireJs
"undefined"!=typeof a&&(a("underscore")&&a("d3")&&a("backbone")||console.log('requireJs shim configuration:\npath-to-lib:{\ndeps:["underscore","backbone", "d3"]\n}')),window._?_=window._:console.log("You need to have underscore previously loaded"),window.Backbone?b=window.Backbone:console.log("You need to have Backbone prevoiusly loaded"),window.d3||console.log("if you want tree, You need to have d3 prevoiusly loaded");var c='<header><div id="progress_indicator"></div><h2 id="step_title"></h2><p id="step_instructions"></p></header><div class="current_step_container"></div><footer><div id="buttons"><button id="prev_step_button" class="btn btn-info">Prev:</button><button id="next_step_button" class="btn btn-info">Next:</button></div></footer>',d='<header><div id="progress_indicator"></div><h2 id="step_title"></h2><p id="step_instructions"></p></header><div class="current_step_container"></div><footer><div id="buttons"><button id="prev_step_button" class="btn btn-info">Prev:</button><button id="next_step_button" class="btn btn-info">Next:</button></div><button id="showTree" class="btn btn">Tree</button><div class="tree" id="tree"></div></footer>',e=b.View.extend({id:"wizard",events:{"click #next_step_button":"nextStep","click #prev_step_button":"goToStep","click #progress_indicator > label":"goToStep","click #showTree":"showTree"},initialize:function(a){_.bindAll(this,"render"),console.log("arg",a),this.steps=a.steps,this.currentStep=0,this.tree=a.tree,this.shape=a.tree.shape?a.tree.shape:"circle",console.log("tree",this.tree),this.template=this.tree.render===!0?d:c},render:function(){return $(this.el).html(_.template(this.template)),this.progressIndicator=this.$("#progress_indicator"),this.title=this.$("h2#step_title"),this.instructions=this.$("p#step_instructions"),this.currentStepContainer=this.$(".current_step_container"),this.nextStepButton=this.$("#next_step_button"),this.prevStepButton=this.$("#prev_step_button"),this.renderStep(this.currentStep,!0),this},renderProgressIndicator:function(){this.progressIndicator.empty(),_.each(this.steps,_.bind(function(a){if(a.step_number<=this.currentStep){var b='<label data-step="'+a.step_number+'"><span>'+a.step_number+"</span><title>"+a.title+"</title></label>";this.progressIndicator.append(b)}},this))},addStep:function(a){console.log("adding step WIV",a),console.log("steps",this.steps);for(var b=this.currentStep+1;b<this.steps.length;b++){var c=this.steps[b];c.step_number=this.steps[b].step_number+1}this.steps.splice(this.currentStep+1,0,a),this.renderStep(this.currentStep,!0)},renderStep:function(a,b){console.log("renderStep",a,b,this.steps);var c,d=this.steps[a];this.isFirstStep()?this.tree.render===!0&&b===!0&&(window.jsonTree=[{name:this.steps[this.currentStep].title,parent:"null"}]):c=this.steps[this.currentStep-1];var e=this.steps[this.currentStep+1];this.title.html(d.title),this.instructions.html(d.instructions),this.currentView=new d.view,this.currentStepContainer.html(this.currentView.render().el),this.renderProgressIndicator(),c?(this.prevStepButton.attr("data-step",this.currentStep-1),this.prevStepButton.html("Prev: "+c.title).show()):this.prevStepButton.hide(),this.nextStepButton.html(e?"Next: "+e.title:"Finish")},goToStep:function(a){var b=parseInt($(a.currentTarget).attr("data-step"));console.log("click stepProgress",b),this.prevStep(b),this.resetJsonTree()},resetJsonTree:function(){$("svg").remove(),window.svg=null,window.tree=null,window.dataMap=null;for(var a=0;a<this.currentStep+1;a++)0===a?window.jsonTree=[{name:this.steps[a].title,parent:"null"}]:window.jsonTree.push({name:this.steps[a].title,parent:this.steps[a-1].title});this.createTree()},showTree:function(){$(".tree").toggle()},nextStep:function(){this.isLastStep()?this.save():(this.currentStep+=1,// check if jsontree exist as a global var and if the users wanna show tree
window.jsonTree&&this.tree.render===!0&&(console.log("tree found"),window.jsonTree.push({name:this.steps[this.currentStep].title,parent:this.steps[this.currentStep-1].title}),this.update()),this.renderStep(this.currentStep,!0))},prevStep:function(a){a?this.currentStep=parseInt(a):(this.currentStep-=1,console.log("no hay step definido")),this.isFirstStep()||this.renderStep(this.currentStep,!1)},isFirstStep:function(){return 0===this.currentStep},isLastStep:function(){return this.currentStep==this.steps.length-1},save:function(){console.log("sending form")},createTree:function(){console.log("jsontree create",window.jsonTree);// *********** Convert flat data into a nice tree ***************
// create a name: node map
// ************** Generate the tree diagram  *****************
var a={top:20,right:120,bottom:20,left:120},b=960-a.right-a.left,c=500-a.top-a.bottom;window.i=0,window.tree=d3.layout.tree().size([c,b]),window.diagonal=d3.svg.diagonal().projection(function(a){return[a.y,a.x]}),window.svg=d3.select(".tree").append("svg").attr("width",b+a.right+a.left).attr("height",c+a.top+a.bottom).append("g").attr("transform","translate("+a.left+","+a.top+")"),this.update()},update:function(){// create the tree array
var a=[];console.log("jsonTree update",window.jsonTree);var b=window.jsonTree;window.dataMap=b.reduce(function(a,b){return a[b.name]=b,a},{}),b.forEach(function(b){// add to parent
var c=window.dataMap[b.parent];c?// create child array if it doesn't exist
(c.children||(c.children=[])).push(b):// parent is null or missing
a.push(b)});// Compute the new tree layout.
var c=window.tree.nodes(a[0]).reverse(),d=window.tree.links(c);// Normalize for fixed-depth.
c.forEach(function(a){a.y=180*a.depth});// Declare the nodes…
var e=window.svg.selectAll("g.node").data(c,function(a){return a.id||(a.id=++window.i)}),f=e.enter().append("g").attr("class","node").attr("transform",function(a){return"translate("+a.y+","+a.x+")"});if(/* DEFINING TYPES OF SHAPES */
"circle"==this.shape&&f.append("circle").attr("r",10).style("fill","#fff").classed({rect:!1,circle:!0}),"rect"==this.shape){//Width and height
var g=50,h=20;// var barPadding = 1; 
f.append("rect").attr("x",0).attr("y",0).attr("width",g).attr("height",h).attr("fill","teal").classed({rect:!0,circle:!1})}f.append("text").style("fill-opacity",1).attr("x",function(a){return a.children||a._children?-13:13}).attr("dy",".35em").attr("text-anchor",function(a){return a.children||a._children?"end":"start"}).text(function(a){return a.name}).classed({text:!0});/* INTERACTION FUNCTIONS*/
// drag function
var i=50,j=0,k=d3.select("svg > g").attr("transform","translate("+i+", "+j+")"),l=function(a){a.call(d3.behavior.drag().on("drag",function(a){console.log("dragging",a),i+=d3.event.dx,j+=d3.event.dy,k.attr("transform","translate("+i+", "+j+")")}))};l(k),// hover function
f.on("mouseover",function(a){console.log("mouseover on",a);var b=d3.select(this).style({opacity:"0.8"});b.select("text").style({opacity:"1.0"})}).on("mouseout",function(a){console.log("mouseout on",a);var b=d3.select(this).style({opacity:"1"});b.select("text").style({opacity:"1.0"})}).on("click",function(a){console.log("click on",a,d3.select(this))});/* END INTERACTION FUNCTIONS */
// Declare the links…
var m=window.svg.selectAll("path.link").data(d,function(a){return a.target.id});// Enter the links.
m.enter().insert("path","g").attr("class","link").attr("d",window.diagonal),console.log("window.jsonTree end",window.jsonTree)}});return b.View.extend({initialize:function(a){_.bindAll(this,"render","wizardMethod"),this.steps=this.turnSteps(a.steps),this.tree=a.tree,this.render()},turnSteps:function(a){this.steps=[],console.log("number of slides",a.length);for(var b=0;b<a.length;b++)this.steps.push({step_number:b,title:a[b].title,instructions:a[b].intro,view:a[b].view});return this.steps},render:function(){return this.wizardMethod(),this.tree.render===!0&&(console.log("tree set to true"),this.onRenderComplete()),this},onRenderComplete:function(){// check every 200ms to see if this.el has been injected into the DOM 
if(!$.contains(document.documentElement,this.el)){var a=this;return void setTimeout(function(){a.onRenderComplete()},200)}this.wizard.createTree()},addStep:function(a){console.log("adding step WBV"),this.wizard.addStep({step_number:window.wizard.wizard.currentStep+1,title:a.title,instructions:a.intro,view:a.view})},wizardMethod:function(){var a=this.steps;this.wizard=new e({steps:a,tree:this.tree}),console.log("view",this.wizard),$(this.el).html(this.wizard.render().el)}})});