js/spreadsheet/spreadsheet.js

/**
 * API doc.
 */
define(function (require) {

    var $ = require('jquery');
    var Component = require('dt/ui/Component');
    var dtLib = require('dt/lib');
    var lang = require('./lang');
    var constant = require('./constant');
    var jsDataFactory = require('./jsDataFactory');
    var geoCoord = require('./geoCoord');

    require('./componentConfig');
    // require('handsontable');
    require('jquerymousewheel');

    // Constant
    var INIT_ATTR_INPUT_NUMBER = 4;
    var DEFAULT_ATTR = ['name', 'value', 'attr3', 'attr4'];
    var DEFAULT_ATTR_DATA_TYPE = 'auto';

    /**
     * @public
     * @type {Object}
     */
    var spreadsheet = {};

    /**
     * @public
     */
    spreadsheet.init = function () {
        var instance = new SpreadsheetMain($('.ecdoc-sprsht')); // jshint ignore:line
    };

    /**
     * @class
     * @extends dt/ui/Component
     */
    var SpreadsheetMain = Component.extend({ // jshint ignore:line

        _define: {
            tpl: require('tpl!./spreadsheet.tpl.html'),
            tplTarget: 'SpreadsheetMain',
            css: 'ecdoc-sprsht',
            viewModel: function () {
                return {
                    jsDataOb: jsDataFactory.create(),
                    attrInfoListOb: dtLib.obArray([])
                };
            }
        },

        _init: function () {
            this._initDataTableControl();
            this._initDetailSetting();
            this._initDimSetting();
            this._initAttrSetting();
        },

        _initDataTableControl: function () {
            var jsDataOb = this._viewModel().jsDataOb;
            var dataTable = this._sub('dataTable');

            this._sub('dataTableControl.clear').on(
                'click', function () {
                    jsDataOb.clear();
                    dataTable.scrollViewportTo('lt');
                }
            );

            var targets = ['lt', 'rb', 'l', 'r', 't', 'b'];
            for (var i = 0; i < targets.length; i++) {
                var name = targets[i];
                this._sub('dataTableControl.' + name).on(
                    'click', $.proxy(dataTable.scrollViewportTo, dataTable, name)
                );
            }
        },

        _initDetailSetting: function () {
            var jsDataOb = this._viewModel().jsDataOb;

            var handlers = {
                emptyValue: function (emptyValue) {
                    jsDataOb.setEmptyValue(emptyValue);
                    jsDataOb.fillJSDataByDataTable();
                },
                quotationMark: function (value) {
                    jsDataOb.setCodeInfo({'quotationMark': value});
                    jsDataOb.fillJSDataByDataTable();
                },
                codeFormatJS: codeFormatHandler,
                codeFormatJSON: codeFormatHandler
            };

            function codeFormatHandler(value) {
                var codeInfoMapping = {
                    compressed: {
                        compress: true,
                        indentBase: null
                    },
                    expanded2Indent: {
                        compress: false,
                        indentBase: 2
                    },
                    expanded4Indent: {
                        compress: false,
                        indentBase: 4
                    }
                };
                jsDataOb.setCodeInfo(codeInfoMapping[value]);
                jsDataOb.fillJSDataByDataTable();
            }

            for (var key in handlers) {
                if (handlers.hasOwnProperty(key)) {
                    this._disposable(
                        this._sub(key).viewModel('checked').subscribe(handlers[key], this)
                    );
                }
            }

            this._sub('geoConvert').on('click', $.proxy(this._convertGeo, this));

            this._disposable(
                this._sub('jsDataType').viewModel('currentTab').subscribe(
                    function (jsDataType) {
                        jsDataOb.setType(jsDataType);
                        jsDataOb.fillJSDataByDataTable();
                        this._sub('dataTable').refresh();
                    },
                    this
                )
            );
            this._disposable(
                this._sub('outputFormat').viewModel('currentTab').subscribe(
                    function (outputFormat) {
                        jsDataOb.setCodeInfo({
                            outputFormat: outputFormat
                        });

                        var cptMapping = {
                            js: 'codeFormatJS',
                            json: 'codeFormatJSON'
                        };
                        var codeFormatOb = this._sub(cptMapping[outputFormat]).viewModel('checked');
                        codeFormatOb(codeFormatOb(), null, {force: true});

                        jsDataOb.fillJSDataByDataTable();
                        this._sub('dataTable').refresh();
                    },
                    this
                )
            );
        },

        _initDimSetting: function () {
            var jsDataOb = this._viewModel().jsDataOb;
            this._disposable(
                this._sub('dimColStep').viewModel('checked').subscribe(onDimColStepChanged, this)
            );

            function onDimColStepChanged(dimColStep) {
                jsDataOb.setDimColStep(dimColStep);
                jsDataOb.fillJSDataByDataTable();
                this._sub('dataTable').refresh();
            }
        },

        _initAttrSetting: function () {
            var viewModel = this._viewModel();
            var attrInfoListOb = viewModel.attrInfoListOb;
            var jsDataOb = viewModel.jsDataOb;
            var that = this;

            attrInfoListOb.subscribe(onAttrChange);

            // Set default value
            var vms = [];
            for (var i = 0; i < INIT_ATTR_INPUT_NUMBER; i++) {
                vms.push(makeAttrInfoViewModel(DEFAULT_ATTR[i], i));
            }
            attrInfoListOb.pushArray(vms);

            // Add and remvoe
            this._sub('addAttrInput').on('click', $.proxy(addAttrInput, this));
            this._sub('removeAttrInput').on('click', $.proxy(removeAttrInput, this));

            function addAttrInput() {
                var count = attrInfoListOb.count();
                attrInfoListOb.push(makeAttrInfoViewModel('attr' + count, count));
            }

            function removeAttrInput() {
                if (attrInfoListOb.count() > 1) {
                    attrInfoListOb.pop();
                }
            }

            function makeAttrInfoViewModel(text, index) {
                var valueOb = dtLib.ob(text);
                valueOb.subscribe(onAttrChange);
                var itemDataTypeOb = dtLib.ob(DEFAULT_ATTR_DATA_TYPE);
                itemDataTypeOb.subscribe(onAttrChange);

                return {
                    mouseEnterSelect: dtLib.ob(true),
                    value: valueOb,
                    itemDataType: itemDataTypeOb,
                    title: dtLib.ob('')
                };
            }

            function onAttrChange() {
                var vms = attrInfoListOb();
                var metas = [];
                for (var i = 0, len = vms.length; i < len; i++) {
                    metas.push({
                        propertyName: vms[i].value(),
                        itemDataType: vms[i].itemDataType()
                    });
                }

                jsDataOb.setPropertyMetas(metas);
                jsDataOb.fillJSDataByDataTable();
                that._sub('dataTable').refresh();
                refreshAttrItemTitle();
            }

            function refreshAttrItemTitle() {
                var attrs = attrInfoListOb();
                for (var i = 0, len = attrs.length; i < len; i++) {
                    var colArr = jsDataOb.getColDescInSeries(
                        [0, 1, 2], i, constant.JSDATA_ARRAY_OBJECT
                    );
                    attrs[i].title(dtLib.strTemplate(
                        lang.attrInfoTitle,
                        // {colName: '<em>' + colArr.join('</em>/<em>') + '</em>/...'}
                        {colName: colArr.join('/') + '/...'}
                    ));
                }
            }
        },

        _convertGeo: function () {
            var jsDataOb = this._viewModel().jsDataOb;
            var jsData = jsDataOb();
            var seriesData = jsData[0];

            for (var rowIndex = 0; rowIndex < seriesData.length; rowIndex++) {
                var coordInfo = geoCoord.query(seriesData[rowIndex][0]);
                if (coordInfo) {
                    seriesData[rowIndex][1] = coordInfo.coord[0];
                    seriesData[rowIndex][2] = coordInfo.coord[1];
                    seriesData[rowIndex][3] = coordInfo.a2;
                    seriesData[rowIndex][4] = coordInfo.names['zh_CN'][0];
                    seriesData[rowIndex][5] = coordInfo.names['en'][0];
                }
            }

            jsDataOb(jsData);
        }
    });

    return spreadsheet;
});