Synnefo

/* Views */

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,

                isCurrent: false,

                isFirst: 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')

        });

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(),

                click: function() {

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

                        this.set('isCurrent', true)

                }

        })

});

// 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');

        }

});