From 069f4af6683879ed8e5e84a9daeac8256df17893 Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Tue, 19 Sep 2017 23:28:19 +0530 Subject: [PATCH] First commit --- .babelrc | 4 + .editorconfig | 12 ++ .eslintrc | 184 +++++++++++++++++ .gitignore | 31 +++ .nvmrc | 1 + LICENSE | 22 ++ README.md | 83 ++++++++ lib/ReGrid.js | 494 ++++++++++++++++++++++++++++++++++++++++++++ lib/ReGrid.js.map | 1 + package.json | 45 ++++ src/index.js | 2 + src/regrid.js | 291 ++++++++++++++++++++++++++ src/utils.js | 63 ++++++ test/regrid.spec.js | 32 +++ webpack.config.js | 50 +++++ 15 files changed, 1315 insertions(+) create mode 100644 .babelrc create mode 100644 .editorconfig create mode 100644 .eslintrc create mode 100644 .gitignore create mode 100644 .nvmrc create mode 100644 LICENSE create mode 100644 README.md create mode 100644 lib/ReGrid.js create mode 100644 lib/ReGrid.js.map create mode 100644 package.json create mode 100644 src/index.js create mode 100644 src/regrid.js create mode 100644 src/utils.js create mode 100644 test/regrid.spec.js create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..7b1c321 --- /dev/null +++ b/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["es2015"], + "plugins": ["babel-plugin-add-module-exports"] +} \ No newline at end of file diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..48fe40a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,12 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = LF +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..e053304 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,184 @@ +{ + "ecmaFeatures": { + "globalReturn": true, + "jsx": true, + "modules": true + }, + + "env": { + "browser": true, + "es6": true, + "node": true + }, + + "globals": { + "document": false, + "escape": false, + "navigator": false, + "unescape": false, + "window": false, + "describe": true, + "before": true, + "it": true, + "expect": true, + "sinon": true + }, + + "parser": "babel-eslint", + + "plugins": [ + + ], + + "rules": { + "block-scoped-var": 2, + "brace-style": [2, "1tbs", { "allowSingleLine": true }], + "camelcase": [2, { "properties": "always" }], + "comma-dangle": [2, "never"], + "comma-spacing": [2, { "before": false, "after": true }], + "comma-style": [2, "last"], + "complexity": 0, + "consistent-return": 2, + "consistent-this": 0, + "curly": [2, "multi-line"], + "default-case": 0, + "dot-location": [2, "property"], + "dot-notation": 0, + "eol-last": 2, + "eqeqeq": [2, "allow-null"], + "func-names": 0, + "func-style": 0, + "generator-star-spacing": [2, "both"], + "guard-for-in": 0, + "handle-callback-err": [2, "^(err|error|anySpecificError)$" ], + "indent": [2, 2, { "SwitchCase": 1 }], + "key-spacing": [2, { "beforeColon": false, "afterColon": true }], + "keyword-spacing": [2, {"before": true, "after": true}], + "linebreak-style": 0, + "max-depth": 0, + "max-len": [2, 120, 4], + "max-nested-callbacks": 0, + "max-params": 0, + "max-statements": 0, + "new-cap": [2, { "newIsCap": true, "capIsNew": false }], + "newline-after-var": [2, "always"], + "new-parens": 2, + "no-alert": 0, + "no-array-constructor": 2, + "no-bitwise": 0, + "no-caller": 2, + "no-catch-shadow": 0, + "no-cond-assign": 2, + "no-console": 0, + "no-constant-condition": 0, + "no-continue": 0, + "no-control-regex": 2, + "no-debugger": 2, + "no-delete-var": 2, + "no-div-regex": 0, + "no-dupe-args": 2, + "no-dupe-keys": 2, + "no-duplicate-case": 2, + "no-else-return": 2, + "no-empty": 0, + "no-empty-character-class": 2, + "no-eq-null": 0, + "no-eval": 2, + "no-ex-assign": 2, + "no-extend-native": 2, + "no-extra-bind": 2, + "no-extra-boolean-cast": 2, + "no-extra-parens": 0, + "no-extra-semi": 0, + "no-extra-strict": 0, + "no-fallthrough": 2, + "no-floating-decimal": 2, + "no-func-assign": 2, + "no-implied-eval": 2, + "no-inline-comments": 0, + "no-inner-declarations": [2, "functions"], + "no-invalid-regexp": 2, + "no-irregular-whitespace": 2, + "no-iterator": 2, + "no-label-var": 2, + "no-labels": 2, + "no-lone-blocks": 0, + "no-lonely-if": 0, + "no-loop-func": 0, + "no-mixed-requires": 0, + "no-mixed-spaces-and-tabs": [2, false], + "no-multi-spaces": 2, + "no-multi-str": 2, + "no-multiple-empty-lines": [2, { "max": 1 }], + "no-native-reassign": 2, + "no-negated-in-lhs": 2, + "no-nested-ternary": 0, + "no-new": 2, + "no-new-func": 2, + "no-new-object": 2, + "no-new-require": 2, + "no-new-wrappers": 2, + "no-obj-calls": 2, + "no-octal": 2, + "no-octal-escape": 2, + "no-path-concat": 0, + "no-plusplus": 0, + "no-process-env": 0, + "no-process-exit": 0, + "no-proto": 2, + "no-redeclare": 2, + "no-regex-spaces": 2, + "no-reserved-keys": 0, + "no-restricted-modules": 0, + "no-return-assign": 2, + "no-script-url": 0, + "no-self-compare": 2, + "no-sequences": 2, + "no-shadow": 0, + "no-shadow-restricted-names": 2, + "no-spaced-func": 2, + "no-sparse-arrays": 2, + "no-sync": 0, + "no-ternary": 0, + "no-throw-literal": 2, + "no-trailing-spaces": 2, + "no-undef": 2, + "no-undef-init": 2, + "no-undefined": 0, + "no-underscore-dangle": 0, + "no-unneeded-ternary": 2, + "no-unreachable": 2, + "no-unused-expressions": 0, + "no-unused-vars": [2, { "vars": "all", "args": "none" }], + "no-use-before-define": 2, + "no-var": 0, + "no-void": 0, + "no-warning-comments": 0, + "no-with": 2, + "one-var": 0, + "operator-assignment": 0, + "operator-linebreak": [2, "after"], + "padded-blocks": 0, + "quote-props": 0, + "quotes": [2, "single", "avoid-escape"], + "radix": 2, + "semi": [2, "always"], + "semi-spacing": 0, + "sort-vars": 0, + "space-before-blocks": [2, "always"], + "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}], + "space-in-brackets": 0, + "space-in-parens": [2, "never"], + "space-infix-ops": 2, + "space-unary-ops": [2, { "words": true, "nonwords": false }], + "spaced-comment": [2, "always"], + "strict": 0, + "use-isnan": 2, + "valid-jsdoc": 0, + "valid-typeof": 2, + "vars-on-top": 2, + "wrap-iife": [2, "any"], + "wrap-regex": 0, + "yoda": [2, "never"] + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..bc2b59d --- /dev/null +++ b/.gitignore @@ -0,0 +1,31 @@ +# Logs +logs +*.log + +# Runtime data +pids +*.pid +*.seed + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directory +# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git +node_modules + +# Remove some common IDE working directories +.idea +.vscode diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..d064077 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +v6.10 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..95862e0 --- /dev/null +++ b/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2017 Faris Ansari + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + diff --git a/README.md b/README.md new file mode 100644 index 0000000..1c04b7f --- /dev/null +++ b/README.md @@ -0,0 +1,83 @@ +# Webpack library starter + +Webpack based boilerplate for producing libraries (Input: ES6, Output: universal library) + +## Features + +* Webpack 3 based. +* ES6 as a source. +* Exports in a [umd](https://github.com/umdjs/umd) format so your library works everywhere. +* ES6 test setup with [Mocha](http://mochajs.org/) and [Chai](http://chaijs.com/). +* Linting with [ESLint](http://eslint.org/). + +## Process + +``` +ES6 source files + | + | + webpack + | + +--- babel, eslint + | + ready to use + library + in umd format +``` + +*Have in mind that you have to build your library before publishing. The files under the `lib` folder are the ones that should be distributed.* + +## Getting started + +1. Setting up the name of your library + * Open `webpack.config.js` file and change the value of `libraryName` variable. + * Open `package.json` file and change the value of `main` property so it matches the name of your library. +2. Build your library + * Run `npm install` to get the project's dependencies + * Run `npm run build` to produce minified version of your library. +3. Development mode + * Having all the dependencies installed run `npm run dev`. This command will generate an non-minified version of your library and will run a watcher so you get the compilation on file change. +4. Running the tests + * Run `npm run test` + +## Scripts + +* `npm run build` - produces production version of your library under the `lib` folder +* `npm run dev` - produces development version of your library and runs a watcher +* `npm run test` - well ... it runs the tests :) +* `npm run test:watch` - same as above but in a watch mode + +## Readings + +* [Start your own JavaScript library using webpack and ES6](http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6) + +## Misc + +### An example of using dependencies that shouldn’t be resolved by webpack, but should become dependencies of the resulting bundle + +In the following example we are excluding React and Lodash: + +```js +{ + devtool: 'source-map', + output: { + path: '...', + libraryTarget: 'umd', + library: '...' + }, + entry: '...', + ... + externals: { + react: 'react' + // Use more complicated mapping for lodash. + // We need to access it differently depending + // on the environment. + lodash: { + commonjs: 'lodash', + commonjs2: 'lodash', + amd: '_', + root: '_' + } + } +} +``` diff --git a/lib/ReGrid.js b/lib/ReGrid.js new file mode 100644 index 0000000..f095ed4 --- /dev/null +++ b/lib/ReGrid.js @@ -0,0 +1,494 @@ +(function webpackUniversalModuleDefinition(root, factory) { + if(typeof exports === 'object' && typeof module === 'object') + module.exports = factory(); + else if(typeof define === 'function' && define.amd) + define("ReGrid", [], factory); + else if(typeof exports === 'object') + exports["ReGrid"] = factory(); + else + root["ReGrid"] = factory(); +})(this, function() { +return /******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { +/******/ configurable: false, +/******/ enumerable: true, +/******/ get: getter +/******/ }); +/******/ } +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.ReGrid = undefined; + +var _regrid = __webpack_require__(1); + +var _regrid2 = _interopRequireDefault(_regrid); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.ReGrid = _regrid2.default; + +/***/ }), +/* 1 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _utils = __webpack_require__(2); + +var _jQuery = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"jQuery\""); e.code = 'MODULE_NOT_FOUND'; throw e; }())); + +var _jQuery2 = _interopRequireDefault(_jQuery); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +var ReGrid = function () { + function ReGrid(_ref) { + var wrapper = _ref.wrapper, + events = _ref.events; + + _classCallCheck(this, ReGrid); + + this.wrapper = wrapper; + this.events = events || {}; + this.makeDom(); + this.bindEvents(); + } + + _createClass(ReGrid, [{ + key: 'makeDom', + value: function makeDom() { + this.wrapper.html('\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n '); + + this.header = this.wrapper.find('.data-table-header'); + this.bodyScrollable = this.wrapper.find('.body-scrollable'); + this.body = this.wrapper.find('.data-table-body'); + this.footer = this.wrapper.find('.data-table-footer'); + } + }, { + key: 'render', + value: function render(_ref2) { + var columns = _ref2.columns, + rows = _ref2.rows; + + if (this.wrapper.find('.data-table').length === 0) { + this.makeDom(); + this.bindEvents(); + } + + this.columns = this.prepareColumns(columns); + this.rows = this.prepareRows(rows); + + this.header.html((0, _utils.getHeader)(this.columns)); + this.body.html((0, _utils.getBody)(this.rows)); + + this.setDimensions(); + } + }, { + key: 'updateCell', + value: function updateCell(rowIndex, colIndex, value) { + var row = this.getRow(rowIndex); + var cell = row.find(function (cell) { + return cell.col_index === colIndex; + }); + + cell.data = value; + this.refreshCell(cell); + } + }, { + key: 'refreshRows', + value: function refreshRows(rows) { + if (rows) { + this.rows = this.prepareRows(rows); + } + this.body.html((0, _utils.getBody)(this.rows)); + this.setDimensions(); + } + }, { + key: 'refreshCell', + value: function refreshCell(cell) { + var selector = '.data-table-col[data-row-index="' + cell.row_index + '"][data-col-index="' + cell.col_index + '"]'; + var $cell = this.body.find(selector); + var $newCell = (0, _jQuery2.default)((0, _utils.getCell)(cell)); + + $cell.replaceWith($newCell); + } + }, { + key: 'prepareColumns', + value: function prepareColumns(columns) { + return columns.map(function (col, i) { + col.colIndex = i; + col.isHeader = 1; + col.format = function (val) { + return '' + val + ''; + }; + return col; + }); + } + }, { + key: 'prepareRows', + value: function prepareRows(rows) { + return rows.map(function (cells, i) { + return cells.map(function (cell, j) { + cell.colIndex = j; + cell.rowIndex = i; + return cell; + }); + }); + } + }, { + key: 'bindEvents', + value: function bindEvents() { + var me = this; + + this.bodyScrollable.on('click', '.data-table-col', function () { + var $col = (0, _jQuery2.default)(this); + + me.bodyScrollable.find('.data-table-col').removeClass('selected'); + $col.addClass('selected'); + }); + + this.bindCellDoubleClick(); + this.bindResizeColumn(); + this.bindSortColumn(); + } + }, { + key: 'setDimensions', + value: function setDimensions() { + var me = this; + + // set the width for each cell + this.header.find('.data-table-col').each(function () { + var col = (0, _jQuery2.default)(this); + var height = col.find('.content').height(); + var width = col.find('.content').width(); + var colIndex = col.attr('data-col-index'); + var selector = '.data-table-col[data-col-index="' + colIndex + '"] .content'; + var $cell = me.bodyScrollable.find(selector); + + $cell.width(width); + $cell.height(height); + }); + + // setting width as 0 will ensure that the + // header doesn't take the available space + this.header.css({ + width: 0, + margin: 0 + }); + + this.bodyScrollable.css({ + width: this.header.css('width'), + marginTop: this.header.height() + 1 + }); + + this.bodyScrollable.find('.table').css('margin', 0); + } + }, { + key: 'bindCellDoubleClick', + value: function bindCellDoubleClick() { + var events = this.events; + + + var $editPopup = this.wrapper.find('.edit-popup'); + + $editPopup.hide(); + + this.bodyScrollable.on('dblclick', '.data-table-col', function () { + var $cell = (0, _jQuery2.default)(this); + var rowIndex = $cell.attr('data-row-index'); + var colIndex = $cell.attr('data-col-index'); + + $editPopup.empty(); + + var _$cell$position = $cell.position(), + top = _$cell$position.top, + left = _$cell$position.left; + + $editPopup.css({ + top: top - 12, + left: left - 12 + }); + + // showing the popup is the responsibility of event handler + events.on_cell_doubleclick($cell.get(0), $editPopup, rowIndex, colIndex); + }); + + (0, _jQuery2.default)(document.body).on('click', function (e) { + if ((0, _jQuery2.default)(e.target).is('.edit-popup, .edit-popup *')) return; + $editPopup.hide(); + }); + } + }, { + key: 'bindResizeColumn', + value: function bindResizeColumn() { + var me = this; + var isDragging = false; + var $currCell = void 0, + startWidth = void 0, + startX = void 0; + + this.header.on('mousedown', '.data-table-col', function (e) { + $currCell = (0, _jQuery2.default)(this); + var col = me.getColumn($currCell.attr('data-col-index')); + + if (col && col.resizable === false) { + return; + } + + isDragging = true; + startWidth = $currCell.find('.content').width(); + startX = e.pageX; + }); + + (0, _jQuery2.default)('body').on('mouseup', function (e) { + if (!$currCell) return; + isDragging = false; + var colIndex = $currCell.attr('data-col-index'); + + if ($currCell) { + var width = $currCell.find('.content').css('width'); + + me.setColumnWidth(colIndex, width); + me.bodyScrollable.css('width', me.header.css('width')); + $currCell = null; + } + }); + + this.header.on('mousemove', '.data-table-col', function (e) { + if (!isDragging) return; + var fwidth = startWidth + (e.pageX - startX); + + $currCell.find('.content').width(fwidth); + }); + } + }, { + key: 'bindSortColumn', + value: function bindSortColumn() { + var me = this; + + this.header.on('click', '.data-table-col .content span', function () { + var $cell = (0, _jQuery2.default)(this).closest('.data-table-col'); + var sortBy = $cell.attr('data-sort-by'); + var colIndex = $cell.attr('data-col-index'); + + if (sortBy === 'none') { + $cell.attr('data-sort-by', 'asc'); + $cell.find('.content').append(''); + } else if (sortBy === 'asc') { + $cell.attr('data-sort-by', 'desc'); + $cell.find('.content .octicon').removeClass('octicon-chevron-up').addClass('octicon-chevron-down'); + } else if (sortBy === 'desc') { + $cell.attr('data-sort-by', 'none'); + $cell.find('.content .octicon').remove(); + } + + var sortByAction = $cell.attr('data-sort-by'); + + if (me.events.on_sort) { + me.events.on_sort.apply(null, [colIndex, sortByAction]); + } else { + me.sortRows(colIndex, sortByAction); + me.refreshRows(); + } + }); + } + }, { + key: 'sortRows', + value: function sortRows(colIndex) { + var sortBy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'none'; + + this.rows.sort(function (a, b) { + var _aIndex = a[0].row_index; + var _bIndex = b[0].row_index; + var _a = a[colIndex].data; + var _b = b[colIndex].data; + + if (sortBy === 'none') { + return _aIndex - _bIndex; + } else if (sortBy === 'asc') { + if (_a < _b) return -1; + if (_a > _b) return 1; + if (_a === _b) return 0; + } else if (sortBy === 'desc') { + if (_a < _b) return 1; + if (_a > _b) return -1; + if (_a === _b) return 0; + } + return 0; + }); + } + }, { + key: 'setColumnWidth', + value: function setColumnWidth(colIndex, width) { + var header = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + + var selector = '.data-table-col[data-col-index="' + colIndex + '"] .content'; + var $el = void 0; + + if (header) { + $el = this.header.find(selector); + } else { + $el = this.bodyScrollable.find(selector); + } + $el.css('width', width); + } + }, { + key: 'getColumn', + value: function getColumn(colIndex) { + return this.columns.find(function (col) { + return col.col_index === colIndex; + }); + } + }, { + key: 'getRow', + value: function getRow(rowIndex) { + return this.rows.find(function (row) { + return row[0].row_index === rowIndex; + }); + } + }]); + + return ReGrid; +}(); + +exports.default = ReGrid; +module.exports = exports['default']; + +/***/ }), +/* 2 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _jQuery = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"jQuery\""); e.code = 'MODULE_NOT_FOUND'; throw e; }())); + +var _jQuery2 = _interopRequireDefault(_jQuery); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getCell(cell) { + var customAttr = [!isNaN(cell.colIndex) ? 'data-col-index="' + cell.colIndex + '"' : '', !isNaN(cell.rowIndex) ? 'data-row-index="' + cell.rowIndex + '"' : '', cell.isHeader ? 'data-sort-by="none"' : ''].join(' '); + + return '\n \n
\n ' + (cell.format ? cell.format(cell.data) : cell.data) + '\n
\n \n '; +} + +function getRow(row) { + var header = row.isHeader ? 'data-header' : ''; + var cells = row.cells; + var dataRowIndex = !isNaN(cells[0].rowIndex) ? 'data-row-index="' + cells[0].rowIndex + '"' : ''; + + return '\n \n ' + cells.map(getCell).join('') + '\n \n '; +} + +function getHeader(columns) { + var $header = (0, _jQuery2.default)('\n ' + getRow({ cells: columns, isHeader: 1 }) + '\n \n '); + + columns.map(function (col) { + if (!col.width) return; + var $cellContent = $header.find('.data-table-col[data-col-index="' + col.colIndex + '"] .content'); + + $cellContent.width(col.width); + // $cell_content.css('max-width', col.width + 'px'); + }); + + return $header; +} + +function getBody(rows) { + return '\n ' + rows.map(function (row) { + return getRow({ cells: row }); + }).join('') + '\n \n '; +} + +exports.default = { + getHeader: getHeader, + getBody: getBody, + getRow: getRow, + getCell: getCell +}; +module.exports = exports['default']; + +/***/ }) +/******/ ]); +}); +//# sourceMappingURL=ReGrid.js.map \ No newline at end of file diff --git a/lib/ReGrid.js.map b/lib/ReGrid.js.map new file mode 100644 index 0000000..bef0959 --- /dev/null +++ b/lib/ReGrid.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap 7ac26c4bf51513474366","webpack:///./src/index.js","webpack:///./src/regrid.js","webpack:///./src/utils.js"],"names":["ReGrid","wrapper","events","makeDom","bindEvents","html","header","find","bodyScrollable","body","footer","columns","rows","length","prepareColumns","prepareRows","setDimensions","rowIndex","colIndex","value","row","getRow","cell","col_index","data","refreshCell","selector","row_index","$cell","$newCell","replaceWith","map","col","i","isHeader","format","val","cells","j","me","on","$col","removeClass","addClass","bindCellDoubleClick","bindResizeColumn","bindSortColumn","each","height","width","attr","css","margin","marginTop","$editPopup","hide","empty","position","top","left","on_cell_doubleclick","get","document","e","target","is","isDragging","$currCell","startWidth","startX","getColumn","resizable","pageX","setColumnWidth","fwidth","closest","sortBy","append","remove","sortByAction","on_sort","apply","sortRows","refreshRows","sort","a","b","_aIndex","_bIndex","_a","_b","$el","getCell","customAttr","isNaN","join","dataRowIndex","getHeader","$header","$cellContent","getBody"],"mappings":"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","file":"ReGrid.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"ReGrid\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ReGrid\"] = factory();\n\telse\n\t\troot[\"ReGrid\"] = factory();\n})(this, function() {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 7ac26c4bf51513474366","import ReGrid from './regrid.js';\nexport { ReGrid };\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.js","import { getHeader, getBody, getCell } from './utils.js';\nimport $ from 'jQuery';\n\nexport default class ReGrid {\n constructor({ wrapper, events }) {\n this.wrapper = wrapper;\n this.events = events || {};\n this.makeDom();\n this.bindEvents();\n }\n\n makeDom() {\n this.wrapper.html(`\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n `);\n\n this.header = this.wrapper.find('.data-table-header');\n this.bodyScrollable = this.wrapper.find('.body-scrollable');\n this.body = this.wrapper.find('.data-table-body');\n this.footer = this.wrapper.find('.data-table-footer');\n }\n\n render({ columns, rows }) {\n if (this.wrapper.find('.data-table').length === 0) {\n this.makeDom();\n this.bindEvents();\n }\n\n this.columns = this.prepareColumns(columns);\n this.rows = this.prepareRows(rows);\n\n this.header.html(getHeader(this.columns));\n this.body.html(getBody(this.rows));\n\n this.setDimensions();\n }\n\n updateCell(rowIndex, colIndex, value) {\n const row = this.getRow(rowIndex);\n const cell = row.find(cell => cell.col_index === colIndex);\n\n cell.data = value;\n this.refreshCell(cell);\n }\n\n refreshRows(rows) {\n if (rows) {\n this.rows = this.prepareRows(rows);\n }\n this.body.html(getBody(this.rows));\n this.setDimensions();\n }\n\n refreshCell(cell) {\n const selector = `.data-table-col[data-row-index=\"${cell.row_index}\"][data-col-index=\"${cell.col_index}\"]`;\n const $cell = this.body.find(selector);\n const $newCell = $(getCell(cell));\n\n $cell.replaceWith($newCell);\n }\n\n prepareColumns(columns) {\n return columns.map((col, i) => {\n col.colIndex = i;\n col.isHeader = 1;\n col.format = val => `${val}`;\n return col;\n });\n }\n\n prepareRows(rows) {\n return rows.map((cells, i) => {\n return cells.map((cell, j) => {\n cell.colIndex = j;\n cell.rowIndex = i;\n return cell;\n });\n });\n }\n\n bindEvents() {\n const me = this;\n\n this.bodyScrollable.on('click', '.data-table-col', function () {\n const $col = $(this);\n\n me.bodyScrollable.find('.data-table-col').removeClass('selected');\n $col.addClass('selected');\n });\n\n this.bindCellDoubleClick();\n this.bindResizeColumn();\n this.bindSortColumn();\n }\n\n setDimensions() {\n const me = this;\n\n // set the width for each cell\n this.header.find('.data-table-col').each(function () {\n const col = $(this);\n const height = col.find('.content').height();\n const width = col.find('.content').width();\n const colIndex = col.attr('data-col-index');\n const selector = `.data-table-col[data-col-index=\"${colIndex}\"] .content`;\n const $cell = me.bodyScrollable.find(selector);\n\n $cell.width(width);\n $cell.height(height);\n });\n\n // setting width as 0 will ensure that the\n // header doesn't take the available space\n this.header.css({\n width: 0,\n margin: 0\n });\n\n this.bodyScrollable.css({\n width: this.header.css('width'),\n marginTop: this.header.height() + 1\n });\n\n this.bodyScrollable.find('.table').css('margin', 0);\n }\n\n bindCellDoubleClick() {\n const { events } = this;\n\n const $editPopup = this.wrapper.find('.edit-popup');\n\n $editPopup.hide();\n\n this.bodyScrollable.on('dblclick', '.data-table-col', function () {\n const $cell = $(this);\n const rowIndex = $cell.attr('data-row-index');\n const colIndex = $cell.attr('data-col-index');\n\n $editPopup.empty();\n const { top, left } = $cell.position();\n\n $editPopup.css({\n top: top - 12,\n left: left - 12\n });\n\n // showing the popup is the responsibility of event handler\n events.on_cell_doubleclick(\n $cell.get(0),\n $editPopup,\n rowIndex,\n colIndex\n );\n });\n\n $(document.body).on('click', e => {\n if ($(e.target).is('.edit-popup, .edit-popup *')) return;\n $editPopup.hide();\n });\n }\n\n bindResizeColumn() {\n const me = this;\n let isDragging = false;\n let $currCell, startWidth, startX;\n\n this.header.on('mousedown', '.data-table-col', function (e) {\n $currCell = $(this);\n const col = me.getColumn($currCell.attr('data-col-index'));\n\n if (col && col.resizable === false) {\n return;\n }\n\n isDragging = true;\n startWidth = $currCell.find('.content').width();\n startX = e.pageX;\n });\n\n $('body').on('mouseup', function (e) {\n if (!$currCell) return;\n isDragging = false;\n const colIndex = $currCell.attr('data-col-index');\n\n if ($currCell) {\n const width = $currCell.find('.content').css('width');\n\n me.setColumnWidth(colIndex, width);\n me.bodyScrollable.css('width', me.header.css('width'));\n $currCell = null;\n }\n });\n\n this.header.on('mousemove', '.data-table-col', function (e) {\n if (!isDragging) return;\n const fwidth = startWidth + (e.pageX - startX);\n\n $currCell.find('.content').width(fwidth);\n });\n }\n\n bindSortColumn() {\n const me = this;\n\n this.header.on('click', '.data-table-col .content span', function () {\n const $cell = $(this).closest('.data-table-col');\n const sortBy = $cell.attr('data-sort-by');\n const colIndex = $cell.attr('data-col-index');\n\n if (sortBy === 'none') {\n $cell.attr('data-sort-by', 'asc');\n $cell\n .find('.content')\n .append('');\n } else if (sortBy === 'asc') {\n $cell.attr('data-sort-by', 'desc');\n $cell\n .find('.content .octicon')\n .removeClass('octicon-chevron-up')\n .addClass('octicon-chevron-down');\n } else if (sortBy === 'desc') {\n $cell.attr('data-sort-by', 'none');\n $cell.find('.content .octicon').remove();\n }\n\n const sortByAction = $cell.attr('data-sort-by');\n\n if (me.events.on_sort) {\n me.events.on_sort.apply(null, [colIndex, sortByAction]);\n } else {\n me.sortRows(colIndex, sortByAction);\n me.refreshRows();\n }\n });\n }\n\n sortRows(colIndex, sortBy = 'none') {\n this.rows.sort((a, b) => {\n const _aIndex = a[0].row_index;\n const _bIndex = b[0].row_index;\n const _a = a[colIndex].data;\n const _b = b[colIndex].data;\n\n if (sortBy === 'none') {\n return _aIndex - _bIndex;\n } else if (sortBy === 'asc') {\n if (_a < _b) return -1;\n if (_a > _b) return 1;\n if (_a === _b) return 0;\n } else if (sortBy === 'desc') {\n if (_a < _b) return 1;\n if (_a > _b) return -1;\n if (_a === _b) return 0;\n }\n return 0;\n });\n }\n\n setColumnWidth(colIndex, width, header = false) {\n const selector = `.data-table-col[data-col-index=\"${colIndex}\"] .content`;\n let $el;\n\n if (header) {\n $el = this.header.find(selector);\n } else {\n $el = this.bodyScrollable.find(selector);\n }\n $el.css('width', width);\n }\n\n getColumn(colIndex) {\n return this.columns.find(col => col.col_index === colIndex);\n }\n\n getRow(rowIndex) {\n return this.rows.find(row => row[0].row_index === rowIndex);\n }\n}\n\n\n\n\n// WEBPACK FOOTER //\n// ./src/regrid.js","import $ from 'jQuery';\n\nfunction getCell(cell) {\n const customAttr = [\n !isNaN(cell.colIndex) ? `data-col-index=\"${cell.colIndex}\"` : '',\n !isNaN(cell.rowIndex) ? `data-row-index=\"${cell.rowIndex}\"` : '',\n cell.isHeader ? 'data-sort-by=\"none\"' : ''\n ].join(' ');\n\n return `\n \n
\n ${cell.format ? cell.format(cell.data) : cell.data}\n
\n \n `;\n}\n\nfunction getRow(row) {\n const header = row.isHeader ? 'data-header' : '';\n const cells = row.cells;\n const dataRowIndex = !isNaN(cells[0].rowIndex) ?\n `data-row-index=\"${cells[0].rowIndex}\"` : '';\n\n return `\n \n ${cells.map(getCell).join('')}\n \n `;\n}\n\nfunction getHeader(columns) {\n const $header = $(`\n ${getRow({ cells: columns, isHeader: 1 })}\n \n `);\n\n columns.map(col => {\n if (!col.width) return;\n const $cellContent = $header.find(\n `.data-table-col[data-col-index=\"${col.colIndex}\"] .content`\n );\n\n $cellContent.width(col.width);\n // $cell_content.css('max-width', col.width + 'px');\n });\n\n return $header;\n}\n\nfunction getBody(rows) {\n return `\n ${rows.map(row => getRow({ cells: row })).join('')}\n \n `;\n}\n\nexport default {\n getHeader,\n getBody,\n getRow,\n getCell\n};\n\n\n\n// WEBPACK FOOTER //\n// ./src/utils.js"],"sourceRoot":""} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..289b831 --- /dev/null +++ b/package.json @@ -0,0 +1,45 @@ +{ + "name": "regrid", + "version": "0.0.1", + "description": "A modern grid for the web", + "main": "lib/regrid.js", + "scripts": { + "build": "webpack --env build", + "dev": "webpack --progress --colors --watch --env dev", + "test": "mocha --compilers js:babel-core/register --colors ./test/*.spec.js", + "test:watch": "mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js" + }, + "devDependencies": { + "babel-cli": "6.24.1", + "babel-core": "6.24.1", + "babel-eslint": "7.2.3", + "babel-loader": "7.0.0", + "babel-plugin-add-module-exports": "0.2.1", + "babel-preset-es2015": "6.24.1", + "chai": "3.5.0", + "eslint": "3.19.0", + "eslint-loader": "1.7.1", + "mocha": "3.3.0", + "webpack": "3.1.0", + "yargs": "7.1.0" + }, + "repository": { + "type": "git", + "url": "https://github.com/netchampfaris/regrid.git" + }, + "keywords": [ + "webpack", + "es6", + "starter", + "library", + "universal", + "umd", + "commonjs" + ], + "author": "Faris Ansari", + "license": "MIT", + "bugs": { + "url": "https://github.com/netchampfaris/regrid/issues" + }, + "homepage": "https://github.com/netchampfaris/regrid" +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..73dadb2 --- /dev/null +++ b/src/index.js @@ -0,0 +1,2 @@ +import ReGrid from './regrid.js'; +export { ReGrid }; diff --git a/src/regrid.js b/src/regrid.js new file mode 100644 index 0000000..e37c750 --- /dev/null +++ b/src/regrid.js @@ -0,0 +1,291 @@ +import { getHeader, getBody, getCell } from './utils.js'; +import $ from 'jQuery'; + +export default class ReGrid { + constructor({ wrapper, events }) { + this.wrapper = wrapper; + this.events = events || {}; + this.makeDom(); + this.bindEvents(); + } + + makeDom() { + this.wrapper.html(` +
+ +
+
+ +
+
+
+
+
+
+
+
+ `); + + this.header = this.wrapper.find('.data-table-header'); + this.bodyScrollable = this.wrapper.find('.body-scrollable'); + this.body = this.wrapper.find('.data-table-body'); + this.footer = this.wrapper.find('.data-table-footer'); + } + + render({ columns, rows }) { + if (this.wrapper.find('.data-table').length === 0) { + this.makeDom(); + this.bindEvents(); + } + + this.columns = this.prepareColumns(columns); + this.rows = this.prepareRows(rows); + + this.header.html(getHeader(this.columns)); + this.body.html(getBody(this.rows)); + + this.setDimensions(); + } + + updateCell(rowIndex, colIndex, value) { + const row = this.getRow(rowIndex); + const cell = row.find(cell => cell.col_index === colIndex); + + cell.data = value; + this.refreshCell(cell); + } + + refreshRows(rows) { + if (rows) { + this.rows = this.prepareRows(rows); + } + this.body.html(getBody(this.rows)); + this.setDimensions(); + } + + refreshCell(cell) { + const selector = `.data-table-col[data-row-index="${cell.row_index}"][data-col-index="${cell.col_index}"]`; + const $cell = this.body.find(selector); + const $newCell = $(getCell(cell)); + + $cell.replaceWith($newCell); + } + + prepareColumns(columns) { + return columns.map((col, i) => { + col.colIndex = i; + col.isHeader = 1; + col.format = val => `${val}`; + return col; + }); + } + + prepareRows(rows) { + return rows.map((cells, i) => { + return cells.map((cell, j) => { + cell.colIndex = j; + cell.rowIndex = i; + return cell; + }); + }); + } + + bindEvents() { + const me = this; + + this.bodyScrollable.on('click', '.data-table-col', function () { + const $col = $(this); + + me.bodyScrollable.find('.data-table-col').removeClass('selected'); + $col.addClass('selected'); + }); + + this.bindCellDoubleClick(); + this.bindResizeColumn(); + this.bindSortColumn(); + } + + setDimensions() { + const me = this; + + // set the width for each cell + this.header.find('.data-table-col').each(function () { + const col = $(this); + const height = col.find('.content').height(); + const width = col.find('.content').width(); + const colIndex = col.attr('data-col-index'); + const selector = `.data-table-col[data-col-index="${colIndex}"] .content`; + const $cell = me.bodyScrollable.find(selector); + + $cell.width(width); + $cell.height(height); + }); + + // setting width as 0 will ensure that the + // header doesn't take the available space + this.header.css({ + width: 0, + margin: 0 + }); + + this.bodyScrollable.css({ + width: this.header.css('width'), + marginTop: this.header.height() + 1 + }); + + this.bodyScrollable.find('.table').css('margin', 0); + } + + bindCellDoubleClick() { + const { events } = this; + + const $editPopup = this.wrapper.find('.edit-popup'); + + $editPopup.hide(); + + this.bodyScrollable.on('dblclick', '.data-table-col', function () { + const $cell = $(this); + const rowIndex = $cell.attr('data-row-index'); + const colIndex = $cell.attr('data-col-index'); + + $editPopup.empty(); + const { top, left } = $cell.position(); + + $editPopup.css({ + top: top - 12, + left: left - 12 + }); + + // showing the popup is the responsibility of event handler + events.on_cell_doubleclick( + $cell.get(0), + $editPopup, + rowIndex, + colIndex + ); + }); + + $(document.body).on('click', e => { + if ($(e.target).is('.edit-popup, .edit-popup *')) return; + $editPopup.hide(); + }); + } + + bindResizeColumn() { + const me = this; + let isDragging = false; + let $currCell, startWidth, startX; + + this.header.on('mousedown', '.data-table-col', function (e) { + $currCell = $(this); + const col = me.getColumn($currCell.attr('data-col-index')); + + if (col && col.resizable === false) { + return; + } + + isDragging = true; + startWidth = $currCell.find('.content').width(); + startX = e.pageX; + }); + + $('body').on('mouseup', function (e) { + if (!$currCell) return; + isDragging = false; + const colIndex = $currCell.attr('data-col-index'); + + if ($currCell) { + const width = $currCell.find('.content').css('width'); + + me.setColumnWidth(colIndex, width); + me.bodyScrollable.css('width', me.header.css('width')); + $currCell = null; + } + }); + + this.header.on('mousemove', '.data-table-col', function (e) { + if (!isDragging) return; + const fwidth = startWidth + (e.pageX - startX); + + $currCell.find('.content').width(fwidth); + }); + } + + bindSortColumn() { + const me = this; + + this.header.on('click', '.data-table-col .content span', function () { + const $cell = $(this).closest('.data-table-col'); + const sortBy = $cell.attr('data-sort-by'); + const colIndex = $cell.attr('data-col-index'); + + if (sortBy === 'none') { + $cell.attr('data-sort-by', 'asc'); + $cell + .find('.content') + .append(''); + } else if (sortBy === 'asc') { + $cell.attr('data-sort-by', 'desc'); + $cell + .find('.content .octicon') + .removeClass('octicon-chevron-up') + .addClass('octicon-chevron-down'); + } else if (sortBy === 'desc') { + $cell.attr('data-sort-by', 'none'); + $cell.find('.content .octicon').remove(); + } + + const sortByAction = $cell.attr('data-sort-by'); + + if (me.events.on_sort) { + me.events.on_sort.apply(null, [colIndex, sortByAction]); + } else { + me.sortRows(colIndex, sortByAction); + me.refreshRows(); + } + }); + } + + sortRows(colIndex, sortBy = 'none') { + this.rows.sort((a, b) => { + const _aIndex = a[0].row_index; + const _bIndex = b[0].row_index; + const _a = a[colIndex].data; + const _b = b[colIndex].data; + + if (sortBy === 'none') { + return _aIndex - _bIndex; + } else if (sortBy === 'asc') { + if (_a < _b) return -1; + if (_a > _b) return 1; + if (_a === _b) return 0; + } else if (sortBy === 'desc') { + if (_a < _b) return 1; + if (_a > _b) return -1; + if (_a === _b) return 0; + } + return 0; + }); + } + + setColumnWidth(colIndex, width, header = false) { + const selector = `.data-table-col[data-col-index="${colIndex}"] .content`; + let $el; + + if (header) { + $el = this.header.find(selector); + } else { + $el = this.bodyScrollable.find(selector); + } + $el.css('width', width); + } + + getColumn(colIndex) { + return this.columns.find(col => col.col_index === colIndex); + } + + getRow(rowIndex) { + return this.rows.find(row => row[0].row_index === rowIndex); + } +} + diff --git a/src/utils.js b/src/utils.js new file mode 100644 index 0000000..560f285 --- /dev/null +++ b/src/utils.js @@ -0,0 +1,63 @@ +import $ from 'jQuery'; + +function getCell(cell) { + const customAttr = [ + !isNaN(cell.colIndex) ? `data-col-index="${cell.colIndex}"` : '', + !isNaN(cell.rowIndex) ? `data-row-index="${cell.rowIndex}"` : '', + cell.isHeader ? 'data-sort-by="none"' : '' + ].join(' '); + + return ` + +
+ ${cell.format ? cell.format(cell.data) : cell.data} +
+ + `; +} + +function getRow(row) { + const header = row.isHeader ? 'data-header' : ''; + const cells = row.cells; + const dataRowIndex = !isNaN(cells[0].rowIndex) ? + `data-row-index="${cells[0].rowIndex}"` : ''; + + return ` + + ${cells.map(getCell).join('')} + + `; +} + +function getHeader(columns) { + const $header = $(` + ${getRow({ cells: columns, isHeader: 1 })} + + `); + + columns.map(col => { + if (!col.width) return; + const $cellContent = $header.find( + `.data-table-col[data-col-index="${col.colIndex}"] .content` + ); + + $cellContent.width(col.width); + // $cell_content.css('max-width', col.width + 'px'); + }); + + return $header; +} + +function getBody(rows) { + return ` + ${rows.map(row => getRow({ cells: row })).join('')} + + `; +} + +export default { + getHeader, + getBody, + getRow, + getCell +}; diff --git a/test/regrid.spec.js b/test/regrid.spec.js new file mode 100644 index 0000000..6917c8c --- /dev/null +++ b/test/regrid.spec.js @@ -0,0 +1,32 @@ +/* global describe, it, before */ + +import chai from 'chai'; +import {Cat, Dog} from '../lib/regrid.js'; + +chai.expect(); + +const expect = chai.expect; + +let lib; + +describe('Given an instance of my Cat library', () => { + before(() => { + lib = new Cat(); + }); + describe('when I need the name', () => { + it('should return the name', () => { + expect(lib.name).to.be.equal('Cat'); + }); + }); +}); + +describe('Given an instance of my Dog library', () => { + before(() => { + lib = new Dog(); + }); + describe('when I need the name', () => { + it('should return the name', () => { + expect(lib.name).to.be.equal('Dog'); + }); + }); +}); diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..c8868b7 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,50 @@ +/* global __dirname, require, module*/ + +const webpack = require('webpack'); +const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; +const path = require('path'); +const env = require('yargs').argv.env; // use --env with webpack 2 + +let libraryName = 'ReGrid'; + +let plugins = [], outputFile; + +if (env === 'build') { + plugins.push(new UglifyJsPlugin({ minimize: true })); + outputFile = libraryName + '.min.js'; +} else { + outputFile = libraryName + '.js'; +} + +const config = { + entry: __dirname + '/src/index.js', + devtool: 'source-map', + output: { + path: __dirname + '/lib', + filename: outputFile, + library: libraryName, + libraryTarget: 'umd', + umdNamedDefine: true + }, + module: { + rules: [ + { + test: /(\.jsx|\.js)$/, + loader: 'babel-loader', + exclude: /(node_modules|bower_components)/ + }, + { + test: /(\.jsx|\.js)$/, + loader: 'eslint-loader', + exclude: /node_modules/ + } + ] + }, + resolve: { + modules: [path.resolve('./node_modules'), path.resolve('./src')], + extensions: ['.json', '.js'] + }, + plugins: plugins +}; + +module.exports = config;