Synnefo

/* Components */

Synnefo.Btn1Component = Ember.Component.extend({

        tagName: 'a',

        click: function() {

                this.sendAction("action", this.get('param'));

        },

        content: undefined // will be set if we want to print a message inside the span

});

Synnefo.BtnsSpanComponent = Ember.Component.extend({

        tagName: 'a',

        templateName: 'components/btns-span',

        click: function() {

                this.sendAction("action");

        }

});

/* Add New Item */

Synnefo.AddNewComponent = Ember.Component.extend({

        templateName: 'snfElem',

        addNewBtn: true,

        selectable: false,

        icon: function() {

                baseIcon = Synnefo.conf.sectors.findBy('destination', this.get('type')).icon;

                return        baseIcon.replace('outline', 'create-full');

        }.property(),

        tagName: 'li',

        status: 'add-new',

        classNameBindings: ['status'],

        attributeBindings: ['data-status, data-reveal-id'],

        'data-status': function() {

                return this.status;

        }.property(),

        name: function() {

                var msg = 'Create New ';

                var btnType = this.get('type')

                switch(btnType){

                        case 'vms':

                                return msg + 'Machine';

                        case 'networks':

                                return msg + 'Network';

                        case 'volumes':

                                return msg + 'Volume';

                        case 'snapshots':

                                return msg + 'Snapshot';

                        case 'images':

                                return '+ Upload New Image';

                }

        }.property(),

                click: function () {

                this.sendAction('action');

                }

});

/* Login Menu */

Synnefo.LoginMenuComponent = Ember.Component.extend({

        classNames: ['login'],

        didInsertElement: function() {

                var self = this.$();

                self.mouseenter(function(e){

                self.find('ul').stop(true, true).slideDown(200);

            });

            self.mouseleave(function(e){

        self.find('ul').stop(true, true).slideUp(200);

    });

        }

});

/* Checkboxes and Radiobuttons */

Synnefo.SnfCheckboxComponent = Ember.Component.extend({

        tagName: 'a',

        classNames: ['check'],

        templateName: 'components/select-btn',

        initState: function() {

                return this.get('initState');

        }.property(),

        didInsertElement: function() {

                var el = this.$();

                var self =this;

                this.setInitClasses();

                el.click(function(e) {

            e.preventDefault();

            e.stopPropagation();

            self.changeState(el);

            // ui.entitiesActionsEnabled();

        });

        },

        setInitClasses: function() {

                var self =this.$();

                switch(this.initState){

                        case 'unchecked': {

                                this.uncheck(self);

                                break;

                        }

                        case 'prechecked': {

                                self.find('span').addClass('prechecked')

                                this.check(self);

                                break;

                        }

                }

        },

        // used to be in ui.checkbox

        changeState : function(checkbox_link) {

        $(checkbox_link).find('.snf-checkbox-unchecked, .snf-checkbox-checked').toggleClass('snf-checkbox-unchecked snf-checkbox-checked');

        $(checkbox_link).closest('li').toggleClass('selected');

    },

    check : function(checkbox_link) {

        $(checkbox_link).find('span').removeClass('snf-checkbox-unchecked').addClass('snf-checkbox-checked');

        $(checkbox_link).closest('li').addClass('selected');

    },

    uncheck : function(checkbox_link) {

        $(checkbox_link).find('span').removeClass('snf-checkbox-checked').addClass('snf-checkbox-unchecked');

        $(checkbox_link).closest('li').removeClass('selected');

    },

    reset: function(area) {

        $(area).find('.snf-radio-checked').not('.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked');

        $(area).find('.snf-radio-unchecked.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked');

    },

});

/* Wizard Buttons */

Synnefo.Close1Component = Synnefo.BtnsSpanComponent.extend({

        classNames: ['close'],

        spanClass: 'snf-close' // has to be modified to array of strings

});

        //  there's another close icon to confirm/info modals

/*

Back and Next buttons are constructed as views and not as components

{{cancel-1 action="moveBack" step=currentStep minStep=1}}

{{next-1 action="moveNext" step=currentStep maxStep=totalStep}}

Synnefo.Cancel1Component = Synnefo.BtnsSpanComponent.extend({

        // classNameBindings: ['el3'], the element that should be focused when the user goes to the next step

        content: 'CANCEL',

        click: function(){

                var currentStep =this.get('step');

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

                console.log('minStep ', minStep);

                this.sendAction();

                if(currentStep === minStep)

                        this.set('content', 'CANCEL');

                else

                        this.set('content', 'PREVIOUS');

        }

//  there's another close to modals

Synnefo.Cancel1Component = Synnefo.BtnsSpanComponent.extend({

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

        // classNameBindings: ['el3'], the element that should be focused when the user goes to the next step

        content: 'CANCEL'

});

Synnefo.Next1Component = Synnefo.BtnsSpanComponent.extend({

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

        // classNameBindings: ['el3'], the element that should be focused when the user goes to the next step

        content: 'NEXT',

        click: function() {

                var currentStep =this.get('step');

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

                this.sendAction('action');

                if(currentStep === maxStep)

                        this.set('content', 'CREATE');

                else

                        this.set('content', 'NEXT');

        }

}); */