完成 商品 规格 分类 运费模板 等功能

public/UEditor/dialogs/charts/charts.js

@@ -0,0 +1,519 @@
+/*
+ * 图片转换对话框脚本
+ **/
+
+var tableData = [],
+    //编辑器页面table
+    editorTable = null,
+    chartsConfig = window.typeConfig,
+    resizeTimer = null,
+    //初始默认图表类型
+    currentChartType = 0;
+
+window.onload = function () {
+
+    editorTable = domUtils.findParentByTagName( editor.selection.getRange().startContainer, 'table', true);
+
+    //未找到表格， 显示错误页面
+    if ( !editorTable ) {
+        document.body.innerHTML = "<div class='edui-charts-not-data'>未找到数据</div>";
+        return;
+    }
+
+    //初始化图表类型选择
+    initChartsTypeView();
+    renderTable( editorTable );
+    initEvent();
+    initUserConfig( editorTable.getAttribute( "data-chart" ) );
+    $( "#scrollBed .view-box:eq("+ currentChartType +")" ).trigger( "click" );
+    updateViewType( currentChartType );
+
+    dialog.addListener( "resize", function () {
+
+        if ( resizeTimer != null ) {
+            window.clearTimeout( resizeTimer );
+        }
+
+        resizeTimer = window.setTimeout( function () {
+
+            resizeTimer = null;
+
+            renderCharts();
+
+        }, 500 );
+
+    } );
+
+};
+
+function initChartsTypeView () {
+
+    var contents = [];
+
+    for ( var i = 0, len = chartsConfig.length; i<len; i++ ) {
+
+        contents.push( '<div class="view-box" data-chart-type="'+ i +'"><img width="300" src="images/charts'+ i +'.png"></div>' );
+
+    }
+
+    $( "#scrollBed" ).html( contents.join( "" ) );
+
+}
+
+//渲染table， 以便用户修改数据
+function renderTable ( table ) {
+
+    var tableHtml = [];
+
+    //构造数据
+    for ( var i = 0, row; row = table.rows[ i ]; i++ ) {
+
+        tableData[ i ] = [];
+        tableHtml[ i ] = [];
+
+        for ( var j = 0, cell; cell = row.cells[ j ]; j++ ) {
+
+            var value = getCellValue( cell );
+
+            if ( i > 0 && j > 0 ) {
+                value = +value;
+            }
+
+            if ( i === 0 || j === 0 ) {
+                tableHtml[ i ].push( '<th>'+ value +'</th>' );
+            } else {
+                tableHtml[ i ].push( '<td><input type="text" class="data-item" value="'+ value +'"></td>' );
+            }
+
+            tableData[ i ][ j ] = value;
+
+        }
+
+        tableHtml[ i ] = tableHtml[ i ].join( "" );
+
+    }
+
+    //draw 表格
+    $( "#tableContainer" ).html( '<table id="showTable" border="1"><tbody><tr>'+ tableHtml.join( "</tr><tr>" ) +'</tr></tbody></table>' );
+
+}
+
+/*
+ * 根据表格已有的图表属性初始化当前图表属性
+ */
+function initUserConfig ( config ) {
+
+    var parsedConfig = {};
+
+    if ( !config ) {
+        return;
+    }
+
+    config = config.split( ";" );
+
+    $.each( config, function ( index, item ) {
+
+        item = item.split( ":" );
+        parsedConfig[ item[ 0 ] ] = item[ 1 ];
+
+    } );
+
+    setUserConfig( parsedConfig );
+
+}
+
+function initEvent () {
+
+    var cacheValue = null,
+        //图表类型数
+        typeViewCount = chartsConfig.length- 1,
+        $chartsTypeViewBox = $( '#scrollBed .view-box' );
+
+    $( ".charts-format" ).delegate( ".format-ctrl", "change", function () {
+
+        renderCharts();
+
+    } )
+
+    $( ".table-view" ).delegate( ".data-item", "focus", function () {
+
+        cacheValue = this.value;
+
+    } ).delegate( ".data-item", "blur", function () {
+
+        if ( this.value !== cacheValue ) {
+            renderCharts();
+        }
+
+        cacheValue = null;
+
+    } );
+
+    $( "#buttonContainer" ).delegate( "a", "click", function (e) {
+
+        e.preventDefault();
+
+        if ( this.getAttribute( "data-title" ) === 'prev' ) {
+
+            if ( currentChartType > 0 ) {
+                currentChartType--;
+                updateViewType( currentChartType );
+            }
+
+        } else {
+
+            if ( currentChartType < typeViewCount ) {
+                currentChartType++;
+                updateViewType( currentChartType );
+            }
+
+        }
+
+    } );
+
+    //图表类型变化
+    $( '#scrollBed' ).delegate( ".view-box", "click", function (e) {
+
+        var index = $( this ).attr( "data-chart-type" );
+        $chartsTypeViewBox.removeClass( "selected" );
+        $( $chartsTypeViewBox[ index ] ).addClass( "selected" );
+
+        currentChartType = index | 0;
+
+        //饼图， 禁用部分配置
+        if ( currentChartType === chartsConfig.length - 1 ) {
+
+            disableNotPieConfig();
+
+        //启用完整配置
+        } else {
+
+            enableNotPieConfig();
+
+        }
+
+        renderCharts();
+
+    } );
+
+}
+
+function renderCharts () {
+
+    var data = collectData();
+
+    $('#chartsContainer').highcharts( $.extend( {}, chartsConfig[ currentChartType ], {
+
+        credits: {
+            enabled: false
+        },
+        exporting: {
+            enabled: false
+        },
+        title: {
+            text: data.title,
+            x: -20 //center
+        },
+        subtitle: {
+            text: data.subTitle,
+            x: -20
+        },
+        xAxis: {
+            title: {
+                text: data.xTitle
+            },
+            categories: data.categories
+        },
+        yAxis: {
+            title: {
+                text: data.yTitle
+            },
+            plotLines: [{
+                value: 0,
+                width: 1,
+                color: '#808080'
+            }]
+        },
+        tooltip: {
+            enabled: true,
+            valueSuffix: data.suffix
+        },
+        legend: {
+            layout: 'vertical',
+            align: 'right',
+            verticalAlign: 'middle',
+            borderWidth: 1
+        },
+        series: data.series
+
+    } ));
+
+}
+
+function updateViewType ( index ) {
+
+    $( "#scrollBed" ).css( 'marginLeft', -index*324+'px' );
+
+}
+
+function collectData () {
+
+    var form = document.forms[ 'data-form' ],
+        data = null;
+
+    if ( currentChartType !== chartsConfig.length - 1 ) {
+
+        data = getSeriesAndCategories();
+        $.extend( data, getUserConfig() );
+
+    //饼图数据格式
+    } else {
+        data = getSeriesForPieChart();
+        data.title = form[ 'title' ].value;
+        data.suffix = form[ 'unit' ].value;
+    }
+
+    return data;
+
+}
+
+/**
+ * 获取用户配置信息
+ */
+function getUserConfig () {
+
+    var form = document.forms[ 'data-form' ],
+        info = {
+            title: form[ 'title' ].value,
+            subTitle: form[ 'sub-title' ].value,
+            xTitle: form[ 'x-title' ].value,
+            yTitle: form[ 'y-title' ].value,
+            suffix: form[ 'unit' ].value,
+            //数据对齐方式
+            tableDataFormat: getTableDataFormat (),
+            //饼图提示文字
+            tip: $( "#tipInput" ).val()
+        };
+
+    return info;
+
+}
+
+function setUserConfig ( config ) {
+
+    var form = document.forms[ 'data-form' ];
+
+    config.title && ( form[ 'title' ].value = config.title );
+    config.subTitle && ( form[ 'sub-title' ].value = config.subTitle );
+    config.xTitle && ( form[ 'x-title' ].value = config.xTitle );
+    config.yTitle && ( form[ 'y-title' ].value = config.yTitle );
+    config.suffix && ( form[ 'unit' ].value = config.suffix );
+    config.dataFormat == "-1" && ( form[ 'charts-format' ][ 1 ].checked = true );
+    config.tip && ( form[ 'tip' ].value = config.tip );
+    currentChartType = config.chartType || 0;
+
+}
+
+function getSeriesAndCategories () {
+
+    var form = document.forms[ 'data-form' ],
+        series = [],
+        categories = [],
+        tmp = [],
+        tableData = getTableData();
+
+    //反转数据
+    if ( getTableDataFormat() === "-1" ) {
+
+        for ( var i = 0, len = tableData.length; i < len; i++ ) {
+
+            for ( var j = 0, jlen = tableData[ i ].length; j < jlen; j++ ) {
+
+                if ( !tmp[ j ] ) {
+                    tmp[ j ] = [];
+                }
+
+                tmp[ j ][ i ] = tableData[ i ][ j ];
+
+            }
+
+        }
+
+        tableData = tmp;
+
+    }
+
+    categories = tableData[0].slice( 1 );
+
+    for ( var i = 1, data; data = tableData[ i ]; i++ ) {
+
+        series.push( {
+            name: data[ 0 ],
+            data: data.slice( 1 )
+        } );
+
+    }
+
+    return {
+        series: series,
+        categories: categories
+    };
+
+}
+
+/*
+ * 获取数据源数据对齐方式
+ */
+function getTableDataFormat () {
+
+    var form = document.forms[ 'data-form' ],
+        items = form['charts-format'];
+
+    return items[ 0 ].checked ? items[ 0 ].value : items[ 1 ].value;
+
+}
+
+/*
+ * 禁用非饼图类型的配置项
+ */
+function disableNotPieConfig() {
+
+    updateConfigItem( 'disable' );
+
+}
+
+/*
+ * 启用非饼图类型的配置项
+ */
+function enableNotPieConfig() {
+
+    updateConfigItem( 'enable' );
+
+}
+
+function updateConfigItem ( value ) {
+
+    var table = $( "#showTable" )[ 0 ],
+        isDisable = value === 'disable' ? true : false;
+
+    //table中的input处理
+    for ( var i = 2 , row; row = table.rows[ i ]; i++ ) {
+
+        for ( var j = 1, cell; cell = row.cells[ j ]; j++ ) {
+
+            $( "input", cell ).attr( "disabled", isDisable );
+
+        }
+
+    }
+
+    //其他项处理
+    $( "input.not-pie-item" ).attr( "disabled", isDisable );
+    $( "#tipInput" ).attr( "disabled", !isDisable )
+
+}
+
+/*
+ * 获取饼图数据
+ * 饼图的数据只取第一行的
+ **/
+function getSeriesForPieChart () {
+
+    var series = {
+            type: 'pie',
+            name: $("#tipInput").val(),
+            data: []
+        },
+        tableData = getTableData();
+
+
+    for ( var j = 1, jlen = tableData[ 0 ].length; j < jlen; j++ ) {
+
+        var title = tableData[ 0 ][ j ],
+            val = tableData[ 1 ][ j ];
+
+        series.data.push( [ title, val ] );
+
+    }
+
+    return {
+        series: [ series ]
+    };
+
+}
+
+function getTableData () {
+
+    var table = document.getElementById( "showTable" ),
+        xCount = table.rows[0].cells.length - 1,
+        values = getTableInputValue();
+
+    for ( var i = 0, value; value = values[ i ]; i++ ) {
+
+        tableData[ Math.floor( i / xCount ) + 1 ][ i % xCount + 1 ] = values[ i ];
+
+    }
+
+    return tableData;
+
+}
+
+function getTableInputValue () {
+
+    var table = document.getElementById( "showTable" ),
+        inputs = table.getElementsByTagName( "input" ),
+        values = [];
+
+    for ( var i = 0, input; input = inputs[ i ]; i++ ) {
+        values.push( input.value | 0 );
+    }
+
+    return values;
+
+}
+
+function getCellValue ( cell ) {
+
+    var value = utils.trim( ( cell.innerText || cell.textContent || '' ) );
+
+    return value.replace( new RegExp( UE.dom.domUtils.fillChar, 'g' ), '' ).replace( /^\s+|\s+$/g, '' );
+
+}
+
+
+//dialog确认事件
+dialog.onok = function () {
+
+    //收集信息
+    var form = document.forms[ 'data-form' ],
+        info = getUserConfig();
+
+    //添加图表类型
+    info.chartType = currentChartType;
+
+    //同步表格数据到编辑器
+    syncTableData();
+
+    //执行图表命令
+    editor.execCommand( 'charts', info );
+
+};
+
+/*
+ * 同步图表编辑视图的表格数据到编辑器里的原始表格
+ */
+function syncTableData () {
+
+    var tableData = getTableData();
+
+    for ( var i = 1, row; row = editorTable.rows[ i ]; i++ ) {
+
+        for ( var j = 1, cell; cell = row.cells[ j ]; j++ ) {
+
+            cell.innerHTML = tableData[ i ] [ j ];
+
+        }
+
+    }
+
+}