baidu_ueditor_rails5 0.2.0 → 0.3.0

data/app/assets/javascripts/ueditor/dialogs/charts/chart.config.js

@@ -0,0 +1,65 @@
+/*
+ * 图表配置文件
+ * */
+
+
+//不同类型的配置
+var typeConfig = [
+    {
+        chart: {
+            type: 'line'
+        },
+        plotOptions: {
+            line: {
+                dataLabels: {
+                    enabled: false
+                },
+                enableMouseTracking: true
+            }
+        }
+    }, {
+        chart: {
+            type: 'line'
+        },
+        plotOptions: {
+            line: {
+                dataLabels: {
+                    enabled: true
+                },
+                enableMouseTracking: false
+            }
+        }
+    }, {
+        chart: {
+            type: 'area'
+        }
+    }, {
+        chart: {
+            type: 'bar'
+        }
+    }, {
+        chart: {
+            type: 'column'
+        }
+    }, {
+        chart: {
+            plotBackgroundColor: null,
+            plotBorderWidth: null,
+            plotShadow: false
+        },
+        plotOptions: {
+            pie: {
+                allowPointSelect: true,
+                cursor: 'pointer',
+                dataLabels: {
+                    enabled: true,
+                    color: '#000000',
+                    connectorColor: '#000000',
+                    formatter: function() {
+                        return '<b>'+ this.point.name +'</b>: '+ ( Math.round( this.point.percentage*100 ) / 100 ) +' %';
+                    }
+                }
+            }
+        }
+    }
+];

data/app/assets/javascripts/ueditor/dialogs/charts/charts.css

@@ -0,0 +1,165 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+}
+
+.main {
+    width: 100%;
+    overflow: hidden;
+}
+
+.table-view {
+    height: 100%;
+    float: left;
+    margin: 20px;
+    width: 40%;
+}
+
+.table-view .table-container {
+    width: 100%;
+    margin-bottom: 50px;
+    overflow: scroll;
+}
+
+.table-view th {
+    padding: 5px 10px;
+    background-color: #F7F7F7;
+}
+
+.table-view td {
+    width: 50px;
+    text-align: center;
+    padding:0;
+}
+
+.table-container input {
+    width: 40px;
+    padding: 5px;
+    border: none;
+    outline: none;
+}
+
+.table-view caption {
+    font-size: 18px;
+    text-align: left;
+}
+
+.charts-view {
+    /*margin-left: 49%!important;*/
+    width: 50%;
+    margin-left: 49%;
+    height: 400px;
+}
+
+.charts-container {
+    border-left: 1px solid #c3c3c3;
+}
+
+.charts-format fieldset {
+    padding-left: 20px;
+    margin-bottom: 50px;
+}
+
+.charts-format legend {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.format-item-container {
+    padding: 20px;
+}
+
+.format-item-container label {
+    display: block;
+    margin: 10px 0;
+}
+
+.charts-format .data-item {
+    border: 1px solid black;
+    outline: none;
+    padding: 2px 3px;
+}
+
+/* 图表类型 */
+
+.charts-type {
+    margin-top: 50px;
+    height: 300px;
+}
+
+.scroll-view {
+    border: 1px solid #c3c3c3;
+    border-left: none;
+    border-right: none;
+    overflow: hidden;
+}
+
+.scroll-container {
+    margin: 20px;
+    width: 100%;
+    overflow: hidden;
+}
+
+.scroll-bed {
+    width: 10000px;
+    _margin-top: 20px;
+    -webkit-transition: margin-left .5s ease;
+    -moz-transition: margin-left .5s ease;
+    transition: margin-left .5s ease;
+}
+
+.view-box {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+    margin-right: 20px;
+    border: 2px solid white;
+    line-height: 0;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.view-box img {
+    border: 1px solid #cecece;
+}
+
+.view-box.selected {
+    border-color: #7274A7;
+}
+
+.button-container {
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.button-container a {
+    display: inline-block;
+    width: 100px;
+    height: 25px;
+    line-height: 25px;
+    border: 1px solid #c2ccd1;
+    margin-right: 30px;
+    text-decoration: none;
+    color: black;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+}
+
+.button-container a:HOVER {
+    background: #fcfcfc;
+}
+
+.button-container a:ACTIVE {
+    border-top-color: #c2ccd1;
+    box-shadow:inset 0 5px 4px -4px rgba(49, 49, 64, 0.1);
+}
+
+.edui-charts-not-data {
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+}

data/app/assets/javascripts/ueditor/dialogs/charts/charts.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>chart</title>
+        <meta chartset="utf-8">
+        <link rel="stylesheet" type="text/css" href="charts.css">
+        <script type="text/javascript" src="../internal.js"></script>
+    </head>
+    <body>
+        <div class="main">
+            <div class="table-view">
+                <h3><var id="lang_data_source"></var></h3>
+                <div id="tableContainer" class="table-container"></div>
+                <h3><var id="lang_chart_format"></var></h3>
+                <form name="data-form">
+                    <div class="charts-format">
+                        <fieldset>
+                            <legend><var id="lang_data_align"></var></legend>
+                            <div class="format-item-container">
+                                <label>
+                                    <input type="radio" class="format-ctrl not-pie-item" name="charts-format" value="1" checked="checked">
+                                    <var id="lang_chart_align_same"></var>
+                                </label>
+                                <label>
+                                    <input type="radio" class="format-ctrl not-pie-item" name="charts-format" value="-1">
+                                    <var id="lang_chart_align_reverse"></var>
+                                </label>
+                                <br>
+                            </div>
+                        </fieldset>
+                        <fieldset>
+                            <legend><var id="lang_chart_title"></var></legend>
+                            <div class="format-item-container">
+                                <label>
+                                    <var id="lang_chart_main_title"></var><input type="text" name="title" class="data-item">
+                                </label>
+                                <label>
+                                    <var id="lang_chart_sub_title"></var><input type="text" name="sub-title" class="data-item not-pie-item">
+                                </label>
+                                <label>
+                                    <var id="lang_chart_x_title"></var><input type="text" name="x-title" class="data-item not-pie-item">
+                                </label>
+                                <label>
+                                    <var id="lang_chart_y_title"></var><input type="text" name="y-title" class="data-item not-pie-item">
+                                </label>
+                            </div>
+                        </fieldset>
+                        <fieldset>
+                            <legend><var id="lang_chart_tip"></var></legend>
+                            <div class="format-item-container">
+                                <label>
+                                    <var id="lang_cahrt_tip_prefix"></var>
+                                    <input type="text" id="tipInput" name="tip" class="data-item" disabled="disabled">
+                                </label>
+                                <p><var id="lang_cahrt_tip_description"></var></p>
+                            </div>
+                        </fieldset>
+                        <fieldset>
+                            <legend><var id="lang_chart_data_unit"></var></legend>
+                            <div class="format-item-container">
+                                <label><var id="lang_chart_data_unit_title"></var><input type="text" name="unit" class="data-item"></label>
+                                <p><var id="lang_chart_data_unit_description"></var></p>
+                            </div>
+                        </fieldset>
+                    </div>
+                </form>
+            </div>
+            <div class="charts-view">
+                <div id="chartsContainer" class="charts-container"></div>
+                <div id="chartsType" class="charts-type">
+                    <h3><var id="lang_chart_type"></var></h3>
+                    <div class="scroll-view">
+                        <div class="scroll-container">
+                            <div id="scrollBed" class="scroll-bed"></div>
+                        </div>
+                        <div id="buttonContainer" class="button-container">
+                            <a href="#" data-title="prev"><var id="lang_prev_btn"></var></a>
+                            <a href="#" data-title="next"><var id="lang_next_btn"></var></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <script src="../../third-party/jquery-1.10.2.min.js"></script>
+        <script src="../../third-party/highcharts/highcharts.js"></script>
+        <script src="chart.config.js"></script>
+        <script src="charts.js"></script>
+    </body>
+</html>

data/app/assets/javascripts/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 ];
+
+        }
+
+    }
+
+}