Synnefo

/* Views */

Ember.View.reopen({

    didInsertElement: function() {

       this._super();

       this.set('elIsInserted', true);

    },

    willDestroyElement: function() {

       this._super();

       this.set('elIsInserted', false);

    }

});

Synnefo.ApplicationView = Ember.View.extend({

        classNames: ['content']

});

/* Navigation Menu */

Synnefo.NavIconView = Ember.View.extend({

        tagName: 'span',

        click: function() {

                var parentEl = this.$().parent('a');

                var currentEl = this.$().parents('li').siblings('li').find('a.current');

                ui.replaceClass(currentEl, 'full', 'outline', 'snf-');

                ui.replaceClass(parentEl, 'outline', 'full', 'snf-');

        }

});

Synnefo.NavigationView = Ember.CollectionView.extend({

  tagName: "ul",

  classNames: ['icons-nav'],

  content: Synnefo.conf.sectors,

  itemViewClass: Ember.View.extend({

    templateName: "navigationItem"

  }),

});

/* Items Parts */

Synnefo.ElemView = Ember.View.extend({

        // templateName: 'elem',

        addNewBtn: false,

        templateName: 'snfElem',

        tagName: 'li',

        selectable: true,

        initSelect: 'unchecked',

        classNameBindings: ['status'],

        attributeBindings: ['data-status'],

        'data-status': function() {

                return this.status;

        }.property(),

        status: function() {

                return this.get('controller.status');

        }.property('controller.status')

});

Synnefo.ImgWrapView = Ember.View.extend({

        templateName: 'img-wrap',

        classNames: ['img-wrap'],

        icon: function() {

                var parentView = this.get('parentView');

                var addNewBtn = parentView.get('addNewBtn');

                if(addNewBtn)

                        return parentView.get('icon');

                else

                        return parentView.get('controller').get('parentController').get('icon');

        }.property()

});

Synnefo.LabelNameView = Ember.View.extend({

        templateName: 'name',

        tagName: 'h4',

        name: function() {

                // the name may be defined inside the parent view or in its model or controller

                return this.get('parentView').get('controller').get('name');

        }.property()

});

// to be changed

Synnefo.ImmediateActionView = Ember.View.extend({

        templateName: 'actions',

        classNames: ['actions']

});

/* Wizard */

Synnefo.CollectionView = Ember.CollectionView.extend({

        counter: 0

});

// to use (extend) Synnefo.CollectionItemView must a counter to be set (initialized) in the parent view

//  so when we want to use Synnefo.CollectionItemView, the collection that includes has extend Synnefo.CollectionView

Synnefo.CollectionItemView = Ember.View.extend({

        // classNameBindings: ['isCurrent:current::', 'isFirst:preselected', 'isPast:past::'],

                index: undefined, // index>=1

                isCurrent: false,

                isFirst: false,

                isPrev: false,

                init: function() {

                        this._super();

                        var prevIndex = this.get('parentView').get('counter');

                        var index = ++prevIndex;

                        this.get('parentView').set('counter', index);

                        this.set('index', index);

                        if(index === 1) {

                                this.set('isFirst', true);

                        }

                },

                isCurrent: function() {

                        return this.index === this.get('controller').get('currentStep');

                }.property('controller.currentStep'),

                isPast: function() {

                        return this.index < this.get('controller').get('currentStep');

                }.property('controller.currentStep'),

                isNext: function() {

                        return this.index === (this.get('controller').get('currentStep')+1);

                }.property('controller.currentStep'),

                isPrev: function() {

                                return this.index === (this.get('controller').get('currentStep')-1);

                }.property('controller.currentStep')

        });

Synnefo.WizardStepView = Synnefo.CollectionItemView.extend({

        classNames: ['step'],

        classNameBindings: ['isFirst:current::', 'isFirst:preselected', 'isNext:next::', 'isPrev:prev::'],

        templateName: function() {

                return 'wizardSteps/step-'+this.get('index');

        }.property(),

});

Synnefo.WizardStepsView = Synnefo.CollectionView.extend({

        classNames: 'middle',

        content: Synnefo.wizards.vmWizard.stepsContent,

        itemViewClass: Synnefo.WizardStepView,

        move: function() {

                if(this.get('elIsInserted')) {

                        var onMove = this.get('controller').get('onMove');

                        if(onMove) {

                                var el = this.$();

                                var self = this;

                                // I find the current step from the view's property

                                // not from dom's class to be sure that there will be no sychronisation problem?

                                var direction = this.get('controller').get('directionMove');

                                var viewCurrent = this._childViews.findBy('isCurrent', true);

                                var totalSteps = this.get('controller').get('totalSteps')

                                if(!(direction === 'next' && viewCurrent.get('index') === totalSteps) && !(direction === 'prev' && viewCurrent.get('index') === 1)) {

                                        var elCurrent = el.find('.current');

                                        var elSteps = el.find('.step');

                                        var pos = (direction==='next')?(100):(-100);

                                        var viewToDisplay;

                                        var elToDisplay

                                        if(direction === 'next') {

                                                viewToDisplay = this._childViews.findBy('isNext', true);

                                                elToDisplay = el.find('.next');

                                        }

                                        else {

                                                viewToDisplay = this._childViews.findBy('isPrev', true);

                                                elToDisplay = el.find('.prev');

                                        }

                                        $('body').css('overflow', 'hidden');

                                        elToDisplay.css({

                                                left: pos.toString()+'%'

                                        }).addClass('current');

                                        elToDisplay.css({

                                                top: document.body.scrollTop + 'px'

                                        });

                                        elSteps.animate({

                                                marginLeft: (-pos).toString() + '%'

                                        },{

                                                complete: _.bind(function() {

                                                        elCurrent.removeClass('current');

                                                        window.scroll(0, 0);

                                                        elToDisplay.css({

                                                                left: '0',

                                                                top: '0'

                                                        });

                                                        elSteps.css({

                                                                marginLeft: '0'

                                                        });

                                                        $('body').css('overflow', 'visible');

                                                        viewCurrent.set('isCurrent', false);

                                                        viewToDisplay.set('isCurrent', true);

                                                        self.get('controller').set('currentStep',viewToDisplay.get('index'));

                                                        this.get('controller').set('onMove', false);

                                                }, this)

                                        });

                                }

                        }

                }

        }.observes('controller.onMove'),

        didInsertElement: function() {

                this._super();

                $('body').addClass('with-overlay');

        },

        willDestroyElement: function() {

                this._super();

                $('body').removeClass('with-overlay');

        }

});

Synnefo.WizardHeadersView = Synnefo.CollectionView.extend({

        tagName: 'ul',

        classNames:['nums'],

        content: Synnefo.wizards.vmWizard.stepsHeadlines,

        itemViewClass: Synnefo.CollectionItemView.extend({

                classNameBindings: ['isCurrent:current::', 'isFirst:preselected', 'isPast:past::'],

                templateName: 'wizardStepHeader',

        })

});

Synnefo.WizardSubMenusView = Synnefo.CollectionView.extend({

        classNames: ['row', 'menus'],

        content: Synnefo.wizards.vmWizard.stepsSubmenus,

        itemViewClass: Synnefo.CollectionItemView.extend({

                tagName: 'nav',

                classNames: ['sub-menu'],

                classNameBindings: ['isCurrent:current::', 'isFirst:preselected', 'isPast:past::'],

                templateName: 'submenu'

        })

});

Synnefo.WizardSubMenuView = Synnefo.CollectionView.extend({

        tagName: 'ul',

        content: function() {

                var stepIndex = this.get('parentView').get('index');

                return Synnefo.wizards.vmWizard.stepsSubmenus[--stepIndex].options;

        }.property(),

        removeOtherCurrent: function(clickedView) {

                var childViews = this._childViews;

                for(var i=0; i<childViews.length; i++)

                        if(childViews[i] !== clickedView)

                                childViews[i].set('isCurrent', false);

        },

        itemViewClass: Synnefo.CollectionItemView.extend({

                templateName: 'menuOption',

                classNameBindings:['isCurrent:current::', 'isFirst:preselected'],

                isCurrent: function(){

                        if(this.get('isFirst')) return true;

                }.property(),

                move: function() {

                        if(this.get('controller').get('onMove')) {

                        this.get('parentView').removeOtherCurrent(this);

                        this.set('isCurrent', true);

                        }

                }.observes('controller.onMove')

        })

});

// The only buttons that are views are the buttons that move the wizard

// The reason is that they shouldn't be isolated from the surrounding

// (Their labels changes depanding the current step)

Synnefo.WizardBtnBackView = Ember.View.extend({

        classNames: ['nav', 'prev'],

        tagName: 'a',

        templateName: 'components/btns-span',

        content: function(){

                return this.get('controller').get('btnLeftLabel');

        }.property('controller.btnLeftLabel'),

        click: function() {

                this.get('controller').send('moveBack');

        }

});

Synnefo.WizardBtnNextView = Ember.View.extend({

        classNames: ['nav', 'next'],

        tagName: 'a',

        templateName: 'components/btns-span',

        content: function(){

                return this.get('controller').get('btnRightLabel');

        }.property('controller.btnRightLabel'),

        click: function() {

                this.get('controller').send('moveNext');

        }

});