Merge branch 'master' into production

nhn · Oct 26, 2017 · ab4d18c · ab4d18c
2 parents 033efc9 + 5505522
commit ab4d18c
Show file tree

Hide file tree

Showing 31 changed files with 376 additions and 277 deletions.
diff --git a/examples/example.json b/examples/example.json
@@ -23,8 +23,8 @@
     "example08-using-datepicker": {
         "title": "8. Using DatePicker component"
     },
-    "example09-footer-summary": {
-        "title": "9. Footer and Summary"
+    "example09-using-summary": {
+        "title": "9. Using Summary"
     },
     "example10-using-net": {
         "title": "10. Binding to remote data using net"
@@ -33,6 +33,6 @@
         "title": "11. Customizing Row headers"
     },
     "example12-using-whitespace": {
-        "title": "11. Using whiteSpace"
+        "title": "12. Using whiteSpace"
     }
 }
diff --git a/examples/example03-complex-columns.html b/examples/example03-complex-columns.html
@@ -27,28 +27,33 @@
     scrollX: false,
     scrollY: false,
     header: {
-        height: 100,
+        height: 120,
         complexColumns: [
             {
-                title: 'Detail',
+                title: 'Basic',
                 name: 'mergeColumn1',
-                childNames: ['type', 'release', 'genre']
+                childNames: ['name', 'artist']
             },
             {
-                title: 'Album Info',
+                title: 'Extra',
                 name: 'mergeColumn2',
-                childNames: ['name', 'artist', 'mergeColumn1']
+                childNames: ['type', 'release', 'genre']
             },
             {
-                title: 'Total Count',
+                title: 'Detail',
                 name: 'mergeColumn3',
-                childNames: ['downloadCount', 'listenCount']
+                childNames: ['mergeColumn1', 'mergeColumn2']
             },
             {
-                title: 'Sales Info',
+                title: 'Count',
                 name: 'mergeColumn4',
-                childNames: ['price', 'mergeColumn3']
+                childNames: ['downloadCount', 'listenCount']
             },
+            {
+                title: 'Album Info',
+                name: 'mergeColumn5',
+                childNames: ['price', 'mergeColumn3', 'mergeColumn4']
+            }
         ]
     },
     columns: [

diff --git a/examples/example09-footer-summary.html → examples/example09-using-summary.html b/examples/example09-footer-summary.html → examples/example09-using-summary.html
@@ -2,13 +2,15 @@
 <html lang="ko">
 <head>
 	<meta charset="utf-8">
-	<title>9. Footer and Summary</title>
+	<title>9. Using Summary</title>
     <link rel="stylesheet" type="text/css" href="./css/explain.css" />
     <link rel="stylesheet" type="text/css" href="../dist/tui-grid.css" />
 </head>
 <body>
 <div class="explain">
-You can see the tutorial <a href="https://github.com/nhnent/tui.grid/wiki/Footer-and-Summary" target="_blank">here</a>.
+You can see the tutorial <a href="https://github.com/nhnent/tui.grid/wiki/Using-Summary" target="_blank">here</a>.
+The "footer" option to use summary feature is deprecated since 2.5.0 version and
+this option is replaced by the "summary" option.
 </div>
 <div class="code-html">
 <div id="grid"></div>
@@ -54,8 +56,9 @@
             }
         }
     ],
-    footer: {
+    summary: {
         height: 50,
+		position: 'bottom', // or 'top'
         columnContent: {
             c2: {
                 template: function(valueMap) {

diff --git a/examples/example11-customizing-rowheaders.html b/examples/example11-customizing-rowheaders.html
@@ -29,6 +29,7 @@
     el: $('#grid'),
     data: gridData,
     scrollX: false,
+    scrollY: false,
     rowHeight: 40,
     header: {
         height: 40

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tui-grid",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "TOAST UI Grid : Powerful data grid control supported by TOAST UI",
   "main": "dist/tui-grid.js",
   "scripts": {

diff --git a/src/css/calendar.styl b/src/css/calendar.styl
diff --git a/src/css/index.styl b/src/css/index.styl
@@ -125,4 +125,3 @@ opacity(n)
     @import 'table.styl'
     @import 'layout.styl'
     @import 'pagination.styl'
-    @import 'calendar.styl'
diff --git a/src/css/layout.styl b/src/css/layout.styl
@@ -52,14 +52,19 @@
     position relative
     overflow scroll
 
-.foot-area
+.summary-area
     position relative
-    border-width 1px 0 0
     border-style solid
     margin-top -18px
     overflow-y hidden
     overflow-x scroll
 
+.summary-area-top
+    border-width 0
+
+.summary-area-bottom
+    border-width 1px 0 0
+
 .lside-area
     display none
     position absolute
@@ -78,27 +83,31 @@
     display none
     overflow hidden
 
-    .head-area, .foot-area
+    .head-area, .summary-area
         margin-right 17px
 
 .no-scroll-y
     .rside-area
-        .head-area, .foot-area
+        .head-area, .summary-area
             margin-right 0
 
 .no-scroll-x
-    .foot-area
+    .summary-area
         margin-top 0
         overflow-x hidden
-    .foot-area-right
+    .summary-area-right
         bottom 0
 
-.foot-area-right
+.summary-area-right
     position absolute
     right 0
-    bottom 17px
     width 17px
     border-style solid
+
+.summary-area-right-top
+    border-width 0 0 1px 1px
+
+.summary-area-right-bottom
     border-width 1px 0 1px 1px
 
 .body-container

diff --git a/src/css/table.styl b/src/css/table.styl
@@ -11,7 +11,7 @@
     width 100%
     border-right-width 0
 
-.foot-area
+.summary-area
     .table
         border-width 0 0 1px
     .cell
@@ -83,10 +83,9 @@
 .column-resize-handle
     float left
     position absolute
-    top -1px
+    bottom 1px
     left -99px
     width 7px
-    height 100%
     background #000
     opacity 0
     cursor col-resize

diff --git a/src/js/common/classNameConst.js b/src/js/common/classNameConst.js
@@ -46,8 +46,12 @@ var classNames = {
     RSIDE_AREA: 'rside-area',
     HEAD_AREA: 'head-area',
     BODY_AREA: 'body-area',
-    FOOT_AREA: 'foot-area',
-    FOOT_AREA_RIGHT: 'foot-area-right',
+    SUMMARY_AREA: 'summary-area',
+    SUMMARY_AREA_TOP: 'summary-area-top',
+    SUMMARY_AREA_BOTTOM: 'summary-area-bottom',
+    SUMMARY_AREA_RIGHT: 'summary-area-right',
+    SUMMARY_AREA_RIGHT_TOP: 'summary-area-right-top',
+    SUMMARY_AREA_RIGHT_BOTTOM: 'summary-area-right-bottom',
 
     // header
     COLUMN_RESIZE_CONTAINER: 'column-resize-container',

diff --git a/src/js/common/constMap.js b/src/js/common/constMap.js
@@ -73,5 +73,9 @@ module.exports = {
         CNT: 'cnt',
         MAX: 'max',
         MIN: 'min'
+    },
+    summaryPosition: {
+        TOP: 'top',
+        BOTTOM: 'bottom'
     }
 };
diff --git a/src/js/grid.js b/src/js/grid.js
@@ -163,20 +163,36 @@ var instanceMap = {};
  *                  for this column
  *              @param {Object} [options.columns.component.options] - The options object to be used for
  *                  creating the component
- *      @param {Object} [options.footer] - The object for configuring footer area.
- *          @param {number} [options.footer.height] - The height of the footer area.
- *          @param {Object.<string, Object>} [options.footer.columnContent]
- *              The object for configuring each column in the footer.
+ *      @param {Object} [options.summary] - The object for configuring summary area.
+ *          @param {number} [options.summary.height] - The height of the summary area.
+ *          @param {Object.<string, Object>} [options.summary.columnContent]
+ *              The object for configuring each column in the summary.
  *              Sub options below are keyed by each column name.
- *              @param {boolean} [options.footer.columnContent.useAutoSummary=true]
+ *              @param {boolean} [options.summary.columnContent.useAutoSummary=true]
  *                  If set to true, the summary value of each column is served as a paramater to the template
  *                  function whenever data is changed.
- *              @param {function} [options.footer.columnContent.template] - Template function which returns the
- *                  content(HTML) of the column of the footer. This function takes an K-V object as a parameter
+ *              @param {function} [options.summary.columnContent.template] - Template function which returns the
+ *                  content(HTML) of the column of the summary. This function takes an K-V object as a parameter
+ *                  which contains a summary values keyed by 'sum', 'avg', 'min', 'max' and 'cnt'.
+ *      @param {Object} [options.footer] - Deprecated: The object for configuring summary area. This option is replaced by "summary" option.
+ *          @param {number} [options.footer.height] - Deprecated: The height of the summary area.
+ *          @param {Object.<string, Object>} [options.footer.columnContent]
+ *              Deprecated: The object for configuring each column in the summary.
+ *                          Sub options below are keyed by each column name.
+ *              @param {boolean} [options.footer.columnContent.useAutoSummary=true]
+ *                  Deprecated: If set to true, the summary value of each column is served as a paramater to the template
+ *                              function whenever data is changed.
+ *              @param {function} [options.footer.columnContent.template] - Deprecated: Template function which returns the
+ *                  content(HTML) of the column of the summary. This function takes an K-V object as a parameter
  *                  which contains a summary values keyed by 'sum', 'avg', 'min', 'max' and 'cnt'.
  */
 var Grid = View.extend(/** @lends Grid.prototype */{
     initialize: function(options) {
+        if (options.footer) {
+            util.warning('The "footer" option is deprecated since 2.5.0 and replaced by "summary" option.');
+            options.summary = options.footer;
+        }
+
         this.id = util.getUniqueKey();
         this.domState = new DomState(this.$el);
         this.domEventBus = DomEventBus.create();
@@ -250,7 +266,7 @@ var Grid = View.extend(/** @lends Grid.prototype */{
      */
     _createViewFactory: function(options) {
         var viewOptions = _.pick(options, [
-            'heightResizable', 'footer'
+            'heightResizable', 'summary'
         ]);
         var dependencies = {
             modelManager: this.modelManager,
@@ -880,12 +896,22 @@ var Grid = View.extend(/** @lends Grid.prototype */{
     },
 
     /**
-     * Sets the HTML string of given column footer.
+     * Sets the HTML string of given column summary.
+     * @param {string} columnName - column name
+     * @param {string} contents - HTML string
+     */
+    setSummaryColumnContent: function(columnName, contents) {
+        this.modelManager.columnModel.setSummaryContent(columnName, contents);
+    },
+
+    /**
+     * Sets the HTML string of given column summary.
+     * @deprecated since version 2.5.0 and is replaced by "setSummaryColumnContent" API
      * @param {string} columnName - column name
      * @param {string} contents - HTML string
      */
     setFooterColumnContent: function(columnName, contents) {
-        this.modelManager.columnModel.setFooterContent(columnName, contents);
+        this.modelManager.columnModel.setSummaryContent(columnName, contents);
     },
 
     /**