imagemenu-imagemenu.js

//test
Ext.define('Shopware.apps.Emotion.view.components.Imagemenu', {
    extend: 'Shopware.apps.Emotion.view.components.Base',
    alias: 'widget.emotion-imagemenu',
    /**
     * Snippets for the component.
     * @object
     */
    snippets: {
        'select_imagemenu': '{s name=select_images_for_menu}Select image(s){/s}',
        'imagemenu_administration': '{s name=imagemenu_administration}Imagemenu administration{/s}',
        'path': '{s name=path}Image path{/s}',
        'actions': '{s name=actions}Action(s){/s}',
        'link': '{s name=link}Link{/s}',
        'altText': '{s name=altText}Alternative text{/s}',
        'title': '{s name=title}Title{/s}',

        imagemenu_title: '{s name=imagemenu_title}Title{/s}',
        imagemenu_arrows: '{s name=imagemenu_arrows}Display arrows{/s}',
        imagemenu_numbers: '{s name=imagemenu_numbers}Display numbers{/s}',
        imagemenu_scrollspeed: '{s name=imagemenu_scrollspeed}Scroll speed{/s}',
        imagemenu_rotation: '{s name=imagemenu_rotation}Rotate automatically{/s}',
        imagemenu_rotatespeed: '{s name=imagemenu_rotatespeed}Rotation speed{/s}'
    },

    /**
     * Initiliaze the component.
     *
     * @public
     * @return void
     */
    initComponent: function() {
        var me = this;
        me.callParent(arguments);

        me.setDefaultValues();
        me.add(me.createImagemenuFieldset());
        me.getGridData();
        me.refreshHiddenValue();
    },

    /**
     * Sets default values if the imagemenu
     * wasn't saved previously.
     *
     * @public
     * @return void
     */
    setDefaultValues: function() {
        var me = this,
            numberfields =  me.query('numberfield');

        Ext.each(numberfields, function(field) {
            if(!field.getValue()) {
                field.setValue(500);
            }
        });
    },

    /**
     * Creates the fieldset which holds the imagemenu administration. The method
     * also creates the imagemenu store and registers the drag and drop plugin
     * for the grid.
     *
     * @public
     * @return [object] Ext.form.FieldSet
     */
    createImagemenuFieldset: function() {
        var me = this;

        me.mediaSelection = Ext.create('Shopware.form.field.MediaSelection', {
            fieldLabel: me.snippets.select_imagemenu,
            labelWidth: 155,
            listeners: {
                scope: me,
                selectMedia: me.onAddImagemenuToGrid
            }
        });

        me.imagemenuStore = Ext.create('Ext.data.Store', {
            fields: [ 'position', 'path', 'link', 'altText', 'title', 'mediaId' ]
        });

        me.ddGridPlugin = Ext.create('Ext.grid.plugin.DragDrop');

        me.cellEditing = Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 2
        });

        me.imagemenuGrid = Ext.create('Ext.grid.Panel', {
            columns: me.createColumns(),
            autoScroll: true,
            store: me.imagemenuStore,
            height: 200,
            plugins: [ me.cellEditing ],
            viewConfig: {
                plugins: [ me.ddGridPlugin ],
                listeners: {
                    scope: me,
                    drop: me.onRepositionImagemenu
                }
            },
            listeners: {
                scope: me,
                edit: function() {
                    me.refreshHiddenValue();
                }
            }
        });

        return me.imagemenuFieldset = Ext.create('Ext.form.FieldSet', {
            title: me.snippets.imagemenu_administration,
            layout: 'anchor',
            defaults: { anchor: '100%' },
            items: [ me.mediaSelection, me.imagemenuGrid ]
        });
    },

    /**
     * Helper method which creates the column model
     * for the imagemenu administration grid panel.
     *
     * @public
     * @return [array] computed columns
     */
    createColumns: function() {
        var me = this, snippets = me.snippets;

        return [{
            header: '⚌',
            width: 24,
            hideable: false,
            renderer : me.renderSorthandleColumn
        }, {
            dataIndex: 'path',
            header: snippets.path,
            flex: 1
        }, {
            dataIndex: 'link',
            header: snippets.link,
            flex: 1,
            editor: {
                xtype: 'textfield',
                allowBlank: true
            }
        }, {
            dataIndex: 'altText',
            header: snippets.altText,
            flex: 1,
            editor: {
                xtype: 'textfield',
                allowBlank: true
            }
        }, {
            dataIndex: 'title',
            header: snippets.title,
            flex: 1,
            editor: {
                xtype: 'textfield',
                allowBlank: true
            }
        }, {
            xtype: 'actioncolumn',
            header: snippets.actions,
            width: 60,
            items: [{
                iconCls: 'sprite-minus-circle',
                action: 'delete-imagemenu',
                scope: me,
                handler: me.onDeleteImagemenu
            }]
        }];
    },

    /**
     * Event listener method which will be triggered when one (or more)
     * imagemenu are added to the imagemenu.
     *
     * Creates new models based on the selected imagemenus and
     * assigns them to the imagemenu store.
     *
     * @public
     * @event selectMedia
     * @param [object] field - Shopware.MediaManager.MediaSelection
     * @param [array] records - array of the selected media
     */
    onAddImagemenuToGrid: function(field, records) {
        var me = this, store = me.imagemenuStore;

        Ext.each(records, function(record) {
            var count = store.getCount();
            var model = Ext.create('Shopware.apps.Emotion.model.Imagemenu', {
                position: count,
                path: record.get('path'),
                mediaId: record.get('id'),
                link: record.get('link'),
                altText: record.get('altText'),
                title: record.get('title')
            });
            store.add(model);
        });

        // We need a defer due to early firing of the event
        Ext.defer(function() {
            me.mediaSelection.inputEl.dom.value = '';
            me.refreshHiddenValue();
        }, 10);

    },

    /**
     * Event listener method which will be triggered when the user
     * deletes a imagemenu from imagemenu administration grid panel.
     *
     * Removes the imagemenu from the imagemenu store.
     *
     * @event click#actioncolumn
     * @param [object] grid - Ext.grid.Panel
     * @param [integer] rowIndex - Index of the clicked row
     * @param [integer] colIndex - Index of the clicked column
     * @param [object] item - DOM node of the clicked row
     * @param [object] eOpts - additional event parameters
     * @param [object] record - Associated model of the clicked row
     */
    onDeleteImagemenu: function(grid, rowIndex, colIndex, item, eOpts, record) {
        var me = this;
        var store = grid.getStore();
        store.remove(record);
        me.refreshHiddenValue();
    },

    /**
     * Event listener method which will be fired when the user
     * repositions a imagemenu through drag and drop.
     *
     * Sets the new position of the imagemenu in the imagemenu store
     * and saves the data to an hidden field.
     *
     * @public
     * @event drop
     * @return void
     */
    onRepositionImagemenu: function() {
        var me = this;

        var i = 0;
        me.imagemenuStore.each(function(item) {
            item.set('position', i);
            i++;
        });
        me.refreshHiddenValue();
    },

    /**
     * Refreshes the mapping field in the model
     * which contains all imagemenus in the grid.
     *
     * @public
     * @return void
     */
    refreshHiddenValue: function() {
        var me = this,
            store = me.imagemenuStore,
            cache = [];

        store.each(function(item) {
            cache.push(item.data);
        });
        var record = me.getSettings('record');
        record.set('mapping', cache);
    },

    /**
     * Refactor sthe mapping field in the global record
     * which contains all imagemenu in the grid.
     *
     * Adds all imagemenus to the imagemenu administration grid
     * when the user opens the component.
     *
     * @return void
     */
    getGridData: function() {
        var me = this,
            elementStore = me.getSettings('record').get('data'), imagemenu;

        Ext.each(elementStore, function(element) {
            if(element.key === 'imagemenu') {
                imagemenu = element;
                return false;
            }
        });

        if(imagemenu && imagemenu.value) {
            Ext.each(imagemenu.value, function(item) {
                me.imagemenuStore.add(Ext.create('Shopware.apps.Emotion.model.Imagemenu', item));
            });
        }
    },

    /**
     * Renderer for sorthandle-column
     *
     * @param [string] value
     */
    renderSorthandleColumn: function() {
        return '<div style="cursor: move;">&#009868;</div>';
    }
});