Revision 44110e0e snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/okeanos-ember.js
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/okeanos-ember.js | ||
|---|---|---|
| 441 | 441 |
Synnefo.CreateController = Ember.ObjectController.extend({
|
| 442 | 442 |
currentStep: undefined, |
| 443 | 443 |
|
| 444 |
totalStep: function() {
|
|
| 444 |
totalSteps: function() {
|
|
| 445 | 445 |
return this.get('stepsContent').length;
|
| 446 | 446 |
}.property(), |
| 447 | 447 |
|
| ... | ... | |
| 454 | 454 |
}.property('currentStep'),
|
| 455 | 455 |
|
| 456 | 456 |
btnRightLabel: function(){
|
| 457 |
return (this.get('currentStep') === this.get('totalStep'))?'CREATE':'NEXT';
|
|
| 457 |
return (this.get('currentStep') === this.get('totalSteps'))?'CREATE':'NEXT';
|
|
| 458 | 458 |
}.property('currentStep'),
|
| 459 | 459 |
|
| 460 |
onMove: false, |
|
| 461 |
directionMove: undefined, |
|
| 462 |
|
|
| 460 | 463 |
actions: {
|
| 461 | 464 |
moveNext: function() {
|
| 462 |
var step = this.get('currentStep');
|
|
| 463 |
|
|
| 464 |
if(step!== this.get('totalStep')) {
|
|
| 465 |
step++; |
|
| 466 |
this.set('currentStep', step);
|
|
| 467 |
} |
|
| 468 |
else {
|
|
| 469 |
this.init(); |
|
| 470 |
this.get('target').send('closeWizard');
|
|
| 465 |
if(!this.get('onMove')) {
|
|
| 466 |
var step = this.get('currentStep');
|
|
| 467 |
if(step=== this.get('totalSteps')) {
|
|
| 468 |
this.init(); |
|
| 469 |
this.get('target').send('closeWizard');
|
|
| 470 |
} |
|
| 471 |
this.set('directionMove', 'next');
|
|
| 472 |
this.set('onMove', !(this.get('onMove')));
|
|
| 471 | 473 |
} |
| 472 | 474 |
}, |
| 473 | 475 |
moveBack: function() {
|
| 474 |
var step = this.get('currentStep');
|
|
| 475 |
|
|
| 476 |
if(step === 1) {
|
|
| 477 |
this.init(); |
|
| 478 |
this.get('target').send('closeWizard');
|
|
| 479 |
} |
|
| 480 |
else {
|
|
| 481 |
step--; |
|
| 482 |
this.set('currentStep', step);
|
|
| 476 |
if(!this.get('onMove')) {
|
|
| 477 |
var step = this.get('currentStep');
|
|
| 478 |
if(step === 1) {
|
|
| 479 |
this.init(); |
|
| 480 |
this.get('target').send('closeWizard');
|
|
| 481 |
} |
|
| 482 |
this.set('directionMove', 'prev');
|
|
| 483 |
this.set('onMove', !(this.get('onMove')));
|
|
| 483 | 484 |
} |
| 484 |
} |
|
| 485 |
},
|
|
| 485 |
},
|
|
| 486 |
} |
|
| 486 | 487 |
|
| 487 | 488 |
}); |
| 488 | 489 |
|
| 489 |
Synnefo.VmsCreateController =Synnefo.CreateController.extend(); |
|
| 490 |
|
|
| 491 |
|
|
| 492 |
|
|
| 493 |
Synnefo.VmsCreateController = Synnefo.CreateController.extend(); |
|
| 490 | 494 |
; |
| 491 | 495 |
/* Views */ |
| 492 | 496 |
|
| 497 |
Ember.View.reopen({
|
|
| 498 |
didInsertElement: function() {
|
|
| 499 |
this.set('elIsInserted', true);
|
|
| 500 |
this._super(); |
|
| 501 |
}, |
|
| 502 |
|
|
| 503 |
willDestroyElement: function() {
|
|
| 504 |
this.set('elIsInserted', false);
|
|
| 505 |
this._super(); |
|
| 506 |
} |
|
| 507 |
}); |
|
| 508 |
|
|
| 509 |
|
|
| 493 | 510 |
Synnefo.ApplicationView = Ember.View.extend({
|
| 494 | 511 |
classNames: ['content'] |
| 495 | 512 |
}); |
| ... | ... | |
| 570 | 587 |
|
| 571 | 588 |
/* Wizard */ |
| 572 | 589 |
|
| 590 |
|
|
| 573 | 591 |
Synnefo.CollectionView = Ember.CollectionView.extend({
|
| 574 | 592 |
counter: 0 |
| 575 | 593 |
}); |
| ... | ... | |
| 578 | 596 |
// so when we want to use Synnefo.CollectionItemView, the collection that includes has extend Synnefo.CollectionView |
| 579 | 597 |
Synnefo.CollectionItemView = Ember.View.extend({
|
| 580 | 598 |
// classNameBindings: ['isCurrent:current::', 'isFirst:preselected', 'isPast:past::'], |
| 581 |
index: undefined, |
|
| 599 |
index: undefined, // index>=1
|
|
| 582 | 600 |
isCurrent: false, |
| 583 | 601 |
isFirst: false, |
| 602 |
isPrev: false, |
|
| 584 | 603 |
init: function() {
|
| 585 | 604 |
this._super(); |
| 586 | 605 |
var prevIndex = this.get('parentView').get('counter');
|
| ... | ... | |
| 596 | 615 |
}.property('controller.currentStep'),
|
| 597 | 616 |
isPast: function() {
|
| 598 | 617 |
return this.index < this.get('controller').get('currentStep');
|
| 618 |
}.property('controller.currentStep'),
|
|
| 619 |
isNext: function() {
|
|
| 620 |
return this.index === (this.get('controller').get('currentStep')+1);
|
|
| 621 |
}.property('controller.currentStep'),
|
|
| 622 |
isPrev: function() {
|
|
| 623 |
return this.index === (this.get('controller').get('currentStep')-1);
|
|
| 599 | 624 |
}.property('controller.currentStep')
|
| 600 | 625 |
}); |
| 601 | 626 |
|
| 602 | 627 |
|
| 628 |
Synnefo.WizardStepView = Synnefo.CollectionItemView.extend({
|
|
| 629 |
classNames: ['step'], |
|
| 630 |
classNameBindings: ['isFirst:current::', 'isFirst:preselected', 'isNext:next::', 'isPrev:prev::'], |
|
| 631 |
templateName: function() {
|
|
| 632 |
return 'wizardSteps/step-'+this.get('index');
|
|
| 633 |
}.property(), |
|
| 634 |
}); |
|
| 635 |
|
|
| 636 |
Synnefo.WizardStepsView = Synnefo.CollectionView.extend({
|
|
| 637 |
classNames: 'middle', |
|
| 638 |
content: Synnefo.wizards.vmWizard.stepsContent, |
|
| 639 |
itemViewClass: Synnefo.WizardStepView, |
|
| 640 |
move: function() {
|
|
| 641 |
if(this.get('elIsInserted')) {
|
|
| 642 |
var onMove = this.get('controller').get('onMove');
|
|
| 643 |
if(onMove) {
|
|
| 644 |
var el = this.$(); |
|
| 645 |
var self = this; |
|
| 646 |
// I find the current step from the view's property |
|
| 647 |
// not from dom's class to be sure that there will be no sychronisation problem? |
|
| 648 |
var direction = this.get('controller').get('directionMove');
|
|
| 649 |
var viewCurrent = this._childViews.findBy('isCurrent', true);
|
|
| 650 |
var totalSteps = this.get('controller').get('totalSteps')
|
|
| 651 |
|
|
| 652 |
if(!(direction === 'next' && viewCurrent.get('index') === totalSteps) && !(direction === 'prev' && viewCurrent.get('index') === 1)) {
|
|
| 653 |
var elCurrent = el.find('.current');
|
|
| 654 |
var elSteps = el.find('.step');
|
|
| 655 |
var pos = (direction==='next')?(100):(-100); |
|
| 656 |
var viewToDisplay; |
|
| 657 |
var elToDisplay |
|
| 658 |
|
|
| 659 |
if(direction === 'next') {
|
|
| 660 |
viewToDisplay = this._childViews.findBy('isNext', true);
|
|
| 661 |
elToDisplay = el.find('.next');
|
|
| 662 |
} |
|
| 663 |
else {
|
|
| 664 |
viewToDisplay = this._childViews.findBy('isPrev', true);
|
|
| 665 |
elToDisplay = el.find('.prev');
|
|
| 666 |
} |
|
| 667 |
|
|
| 668 |
$('body').css('overflow', 'hidden');
|
|
| 669 |
|
|
| 670 |
elToDisplay.css({
|
|
| 671 |
left: pos.toString()+'%' |
|
| 672 |
}).addClass('current');
|
|
| 673 |
|
|
| 674 |
elToDisplay.css({
|
|
| 675 |
top: document.body.scrollTop + 'px' |
|
| 676 |
}); |
|
| 677 |
|
|
| 678 |
elSteps.animate({
|
|
| 679 |
marginLeft: (-pos).toString() + '%' |
|
| 680 |
},{
|
|
| 681 |
complete: _.bind(function() {
|
|
| 682 |
elCurrent.removeClass('current');
|
|
| 683 |
window.scroll(0, 0); |
|
| 684 |
elToDisplay.css({
|
|
| 685 |
left: '0', |
|
| 686 |
top: '0' |
|
| 687 |
}); |
|
| 688 |
elSteps.css({
|
|
| 689 |
marginLeft: '0' |
|
| 690 |
}); |
|
| 691 |
$('body').css('overflow', 'visible');
|
|
| 692 |
|
|
| 693 |
viewCurrent.set('isCurrent', false);
|
|
| 694 |
viewToDisplay.set('isCurrent', true);
|
|
| 695 |
self.get('controller').set('currentStep',viewToDisplay.get('index'));
|
|
| 696 |
}, this) |
|
| 697 |
}); |
|
| 698 |
} |
|
| 699 |
this.get('controller').set('onMove', false);
|
|
| 700 |
} |
|
| 701 |
} |
|
| 702 |
}.observes('controller.onMove'),
|
|
| 703 |
didInsertElement: function() {
|
|
| 704 |
this._super(); |
|
| 705 |
$('body').addClass('with-overlay');
|
|
| 706 |
}, |
|
| 707 |
willDestroyElement: function() {
|
|
| 708 |
this._super(); |
|
| 709 |
$('body').removeClass('with-overlay');
|
|
| 710 |
} |
|
| 711 |
}); |
|
| 712 |
|
|
| 713 |
|
|
| 714 |
|
|
| 603 | 715 |
Synnefo.WizardHeadersView = Synnefo.CollectionView.extend({
|
| 604 | 716 |
tagName: 'ul', |
| 605 | 717 |
classNames:['nums'], |
Also available in: Unified diff