ractive-ez-table/lib/EzTableHeader.js

Ractive Ez UI Table

import Ractive from 'ractive';
import utils   from './utils.js';

const EzTableHeader = Ractive.extend({
    template: require("./EzTableHeader.html"),

    dragStartColumn(event, column) {
		const contentType = this.get("columnContentType");
		const data = JSON.stringify(column);
		event.dataTransfer.setData(contentType, data);
    },

    dragOverColumn(event, column) {
		const contentType = this.get("columnContentType");
		const allowDrop = event.dataTransfer.types.indexOf(contentType) != -1;
		
		if (allowDrop) {
			event.preventDefault();
			event.dropEffect = "move";
		}
    },

    dropColumn(event, targetColumn) {
        const columns = this.get("columns");
        const groups  = this.get("groups");
		const contentType = this.get("columnContentType");
		const data = JSON.parse(event.dataTransfer.getData(contentType));
        const sourceColumn = utils.find(columns, "name", data.name);

        if (sourceColumn != null) {
            const sourceIndex = columns.indexOf(sourceColumn);
            const targetIndex = columns.indexOf(targetColumn);
            
            event.stopPropagation();

            this.splice("columns", sourceIndex, 1);
            this.splice("columns", targetIndex, 0 , sourceColumn);
        }
    },

    sortColumn(event, column) {
        const index = this.get("columns").indexOf(column);
        if (index == -1) return;
        this.set("sortColumn", column);
        this.set("columns." + index + ".sortDirection", !column.sortDirection);
    }

});

export default EzTableHeader;