[
{
"path": ".babelrc",
"content": "{\n \"presets\": [\"es2015\"]\n}\n"
},
{
"path": ".gitignore",
"content": ".DS_Store\n*.pyc\ntags\nTAGS\n*.swp\n*.egg-info\n.emacs.desktop\n.#*\ndist\n*~\n.buildout\n.emacs.d/.autosaves\n.emacs.d/.emacs-places\n.emacs.d/tramp\n.zsh/cache\n*.elc\n.emacs.d/history\n.emacs.d/site/nxhtml\n.virtualenvs\n.ipython\n*.stackdump\nnode_modules/\nThumbs.db\ndesktop.ini\n*.sublime-project\nbuild/\n"
},
{
"path": ".npmignore",
"content": "dist/\nsrc/\ntest/\n*.html\n"
},
{
"path": ".travis.yml",
"content": "language: node_js\nnode_js:\n - \"4.1\"\n - \"4.0\"\n - \"5.7\"\nsudo: false\n"
},
{
"path": "LICENSE.md",
"content": "Copyright (c) 2016 Matt Basta\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n"
},
{
"path": "README.md",
"content": "# Websheets\n\n[](https://travis-ci.org/WebSheets/websheets)\n\nAn experiment to make a spreadsheet engine for the web.\n\n\n## Features\n\n- Formulas\n + Addition, subtraction, multiplication, division (with order of operations)\n + Ability to reference individual cells\n + Ability to pass ranges of cells (in two dimensions) as function arguments\n + Very large list of compatible Excel-style functions\n + Dynamically update as referenced values update\n- Dynamically sized columns\n- Keyboard interactions similar to Excel\n- Drag and drop\n + Drag cell to move\n + Drag corner of cell to copy\n + Copied cells adjust their formulas\n + Support for pinning identifiers with `$` (e.g., `$A$1`, `A$2`)\n- Import parsed data (`loadData`)\n- Supports Excel-style circular reference convergence\n"
},
{
"path": "demo/index.html",
"content": "\n\n Websheets Demo\n \n\n\n \n \n \n\n\n"
},
{
"path": "demo/multi.html",
"content": "\n\n Websheets Demo\n \n\n\n
Sheet1
\n \n
Sheet2
\n \n \n \n\n\n"
},
{
"path": "demo/no_iteration.html",
"content": "\n\n Websheets Demo\n \n\n\n \n \n \n\n\n"
},
{
"path": "index.js",
"content": "module.exports = require('./build');\n"
},
{
"path": "mocha.opts",
"content": "--require babelHook\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"websheets\",\n \"version\": \"0.3.1\",\n \"description\": \"A spreadsheet component for the web\",\n \"devDependencies\": {\n \"babel-cli\": \"^6.4.5\",\n \"babel-loader\": \"^6.2.1\",\n \"babel-polyfill\": \"^6.3.14\",\n \"babel-preset-es2015\": \"^6.3.13\",\n \"babel-register\": \"^6.6.0\",\n \"mocha\": \"^2.4.5\",\n \"webpack\": \"^1.12.12\"\n },\n \"scripts\": {\n \"build\": \"./node_modules/.bin/babel src --out-dir build --source-maps --no-babelrc --presets es2015\",\n \"prepublish\": \"rm -rf build/* && npm run build \",\n \"test\": \"./node_modules/.bin/mocha --recursive\",\n \"watch\": \"fswatch -0 src | xargs -0 -n 1 -I {} npm run web\",\n \"web\": \"./node_modules/.bin/webpack --config=webpack.config.js --progress\"\n },\n \"main\": \"index.js\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/websheets/websheets.git\"\n },\n \"keywords\": [\n \"spreadsheet\",\n \"table\",\n \"excel\"\n ],\n \"author\": \"Matt Basta \",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/websheets/websheets/issues\"\n },\n \"homepage\": \"https://github.com/websheets/websheets\",\n \"dependencies\": {\n \"websheets-core\": \"^0.2.2\"\n }\n}\n"
},
{
"path": "src/WebSheet.events.js",
"content": "import {DRAG_HANDLE, DRAG_MOVE, DRAG_NONE} from './constants';\nimport {getCellID, getCellPos, parseExpression as parse} from 'websheets-core';\nimport {listen, unlisten} from './utils/events';\n\n\nexport function unbindEvents(self) {\n unlisten(self.elem, 'focus');\n unlisten(self.elem, 'blur');\n unlisten(self.elem, 'keyup');\n unlisten(self.elem, 'keydown');\n unlisten(self.elem, 'mousedown');\n unlisten(self.elem, 'mouseup');\n unlisten(self.elem, 'mouseover');\n};\nexport function initEvents(self) {\n unbindEvents(self);\n const {elem} = self;\n listen(elem, 'focus', onFocus.bind(self));\n listen(elem, 'blur', onBlur.bind(self));\n listen(elem, 'keyup', onKeyup.bind(self));\n listen(elem, 'keydown', onKeydown.bind(self));\n\n listen(elem, 'mousedown', onMousedown.bind(self));\n listen(elem, 'mouseup', onMouseup.bind(self));\n listen(elem, 'mouseover', onMouseover.bind(self));\n};\n\nexport function onFocus(e) {\n const row = e.target.getAttribute('data-row') | 0;\n const col = e.target.getAttribute('data-col') | 0;\n e.target.value = (this.data[row] || [])[col] || '';\n e.target.select(0, e.target.value.length);\n e.target.parentNode.className = 'websheet-cell-wrapper websheet-has-focus';\n};\nexport function onBlur(e) {\n const row = e.target.getAttribute('data-row') | 0;\n const col = e.target.getAttribute('data-col') | 0;\n this.setValueAtPosition(row, col, e.target.value);\n if (this.calculated[row] && col in this.calculated[row]) {\n e.target.value = this.formatValue(\n getCellID(row, col),\n this.calculated[row][col]\n );\n }\n e.target.parentNode.className = 'websheet-cell-wrapper';\n};\nexport function onKeydown(e) {\n var next;\n if (e.keyCode === 37 && e.target.selectionStart === 0) {\n next = this.getCell(e.target.getAttribute('data-id-prev-col'));\n } else if (e.keyCode === 39 && e.target.selectionEnd === e.target.value.length) {\n next = this.getCell(e.target.getAttribute('data-id-next-col'));\n }\n if (next) {\n next.focus();\n e.preventDefault();\n }\n};\nexport function onKeyup(e) {\n var next;\n if (e.keyCode === 13 || e.keyCode === 40) {\n next = this.getCell(e.target.getAttribute('data-id-next-row'));\n } else if (e.keyCode === 38) {\n next = this.getCell(e.target.getAttribute('data-id-prev-row'));\n }\n if (next) {\n next.focus();\n }\n};\nexport function onMousedown(e) {\n const {target} = e;\n if (!target.classList.contains('websheet-has-focus')) {\n return;\n }\n\n e.preventDefault();\n\n const id = this.dragSource = target.firstChild.getAttribute('data-id');\n const pos = getCellPos(id);\n\n // Assign the value of the currently focused cell's input to the cell, just\n // incase it changed and hasn't been updated on the blur event.\n this.setValueAtPosition(pos.row, pos.col, target.firstChild.value);\n if (e.layerX > target.clientWidth - 10 && e.layerY > target.clientHeight - 10) {\n // this.data[pos.row] = this.data[pos.row] || [];\n // this.data[pos.row][pos.col] = target.value;\n this.dragType = DRAG_HANDLE;\n return;\n }\n\n this.dragType = DRAG_MOVE;\n this.elem.className += ' websheet-grabbing';\n};\nexport function onMouseup(e) {\n const {target} = e;\n\n if (this.dragType !== DRAG_NONE &&\n target.classList.contains('websheet-cell')) {\n\n let pos = getCellPos(this.dragSource);\n let pos2 = getCellPos(target.getAttribute('data-id'));\n\n if (this.dragType === DRAG_MOVE) {\n this.setValueAtPosition(pos2.row, pos2.col, this.getValueAtPos(pos.row, pos.col) || '');\n this.clearCell(pos.row, pos.col);\n e.target.focus();\n\n } else if (this.dragType === DRAG_HANDLE && (pos.row === pos2.row || pos.col === pos2.col)) {\n const rawSource = this.getValueAtPos(pos.row, pos.col) || '';\n const parsedSource = rawSource[0] === '=' && parse(rawSource.substr(1));\n\n if (pos.row === pos2.row) {\n let min = Math.min(pos.col, pos2.col);\n for (let i = min; i <= Math.max(pos.col, pos2.col); i++) {\n if (i === pos.col) continue;\n if (parsedSource) {\n let tmp = parsedSource.clone();\n tmp.adjust(0, i - min);\n this.setValueAtPosition(pos.row, i, '=' + tmp.toString());\n } else {\n this.setValueAtPosition(pos.row, i, rawSource);\n }\n }\n\n } else if (pos.col === pos2.col) {\n const min = Math.min(pos.row, pos2.row);\n for (let i = min; i <= Math.max(pos.row, pos2.row); i++) {\n if (i === pos.row) continue;\n if (parsedSource) {\n let tmp = parsedSource.clone();\n tmp.adjust(i - min, 0);\n this.setValueAtPosition(i, pos.col, '=' + tmp.toString());\n } else {\n this.setValueAtPosition(i, pos.col, rawSource);\n }\n }\n\n } else {\n console.error('Cannot drag handle diagonally');\n }\n }\n }\n this.elem.className = 'websheet';\n this.dragType = DRAG_NONE;\n this.dragSource = null;\n\n const existing = this.elem.querySelectorAll('.websheet-cell-hover');\n for (let i = 0; i < existing.length; i++) {\n existing[i].classList.remove('websheet-cell-hover');\n }\n};\nexport function onMouseover(e) {\n if (this.dragType === DRAG_NONE) return;\n if (!e.target.classList.contains('websheet-cell')) return;\n\n const toRemoveClassFrom = [];\n\n const existing = this.elem.querySelectorAll('.websheet-cell-hover');\n for (let i = 0; i < existing.length; i++) {\n toRemoveClassFrom.push(existing[i].firstChild.dataset.id);\n }\n\n const targetID = e.target.dataset.id;\n if (targetID === this.dragSource) {\n return;\n }\n\n if (this.dragType === DRAG_HANDLE) {\n const destPos = getCellPos(targetID);\n const srcPos = getCellPos(this.dragSource);\n if (destPos.col === srcPos.col) {\n for (let i = Math.min(srcPos.row, destPos.row); i <= Math.max(srcPos.row, destPos.row); i++) {\n const tmp = getCellID(i, srcPos.col);\n const trcfTmp = toRemoveClassFrom.indexOf(tmp);\n if (trcfTmp !== -1) {\n toRemoveClassFrom.splice(trcfTmp, 1);\n } else {\n this.getCell(tmp).parentNode.classList.add('websheet-cell-hover');\n }\n }\n } else if (destPos.row === srcPos.row) {\n for (let i = Math.min(srcPos.col, destPos.col); i <= Math.max(srcPos.col, destPos.col); i++) {\n const tmp = getCellID(srcPos.row, i);\n const trcfTmp = toRemoveClassFrom.indexOf(tmp);\n if (trcfTmp !== -1) {\n toRemoveClassFrom.splice(trcfTmp, 1);\n } else {\n this.getCell(tmp).parentNode.classList.add('websheet-cell-hover');\n }\n }\n }\n } else {\n e.target.parentNode.classList.add('websheet-cell-hover');\n }\n\n toRemoveClassFrom.forEach(id => {\n this.getCell(id).parentNode.classList.remove('websheet-cell-hover');\n });\n};\n"
},
{
"path": "src/WebSheet.js",
"content": "import WebSheet, {Emitter, getCellID, getCellPos, parseExpression} from 'websheets-core';\n\nimport {DRAG_NONE} from './constants';\nimport {initEvents, unbindEvents} from './WebSheet.events';\nimport {listen, unlisten} from './utils/events';\n\n\nconst DEFAULT_COLUMN_WIDTH = 120; // px\nconst DEFAULT_BORDER_WIDTH = 1; // px\n\nconst defaultParams = {\n noBrowser: false,\n};\n\n\nconst WINDOW_MOUSEUP = Symbol('window.onmouseup');\n\nexport default class BrowserWebSheet extends WebSheet {\n constructor(elem, params = {}) {\n super(Object.assign({}, defaultParams, params));\n this.elem = elem;\n this.elem.className = 'websheet';\n\n this.columnWidths = [];\n for (let i = 0; i < this.width; i++) {\n this.columnWidths.push(DEFAULT_COLUMN_WIDTH);\n }\n this.cellCache = {};\n\n this.dragType = DRAG_NONE;\n this.dragSource = null;\n\n if (this.noBrowser || this.immutable) {\n return;\n }\n\n listen(window, 'mouseup', this[WINDOW_MOUSEUP] = e => {\n if (this.dragType === DRAG_NONE) {\n return;\n }\n this.dragType = DRAG_NONE;\n this.dragSource = null;\n this.elem.className = 'websheet';\n });\n }\n\n destroy() {\n unlisten(window, 'mouseup', this[WINDOW_MOUSEUP]);\n unbindEvents(this);\n }\n\n addColumn(rerender = true) {\n this.columnWidths.push(DEFAULT_COLUMN_WIDTH);\n super.addColumn(rerender);\n }\n\n calculateValueAtPosition(row, col, expression) {\n const value = super.calculateValueAtPosition(row, col, expression);\n if (typeof value === 'undefined') {\n return;\n }\n const cellID = getCellID(row, col);\n const elem = this.getCell(cellID);\n if (elem) {\n elem.value = this.formatValue(cellID, value);\n }\n }\n\n clearCell(row, col) {\n super.clearCell(row, col);\n const cellID = getCellID(row, col);\n const elem = this.getCell(cellID);\n if (elem) {\n elem.value = '';\n }\n }\n\n forceRerender() {\n if (this.noBrowser) {\n return;\n }\n\n // First, update the element to be the correct dimensions.\n let width = this.columnWidths.reduce((a, b) => a + b); // Get the width of each column\n width += DEFAULT_BORDER_WIDTH;\n // width -= this.width * DEFAULT_BORDER_WIDTH; // Account for border widths\n this.elem.style.width = width + 'px';\n\n while (this.elem.childNodes.length) {\n this.elem.removeChild(this.elem.firstChild);\n }\n this.cellCache = {};\n\n const workQueue = [];\n\n // Create each row and cell\n for (let i = 0; i < this.height; i++) {\n const row = document.createElement('div');\n row.style.width = `${width}px`;\n row.className = 'websheet-row';\n this.elem.appendChild(row);\n\n const rowDataCache = this.data[i] || [];\n const rowCalculatedCache = this.calculated[i] || [];\n\n for (let j = 0; j < this.width; j++) {\n const cellID = getCellID(i, j);\n\n const cell = document.createElement('input');\n cell.className = 'websheet-cell';\n if (this.immutable) {\n cell.readOnly = true;\n }\n\n const cellWrapper = document.createElement('div');\n cellWrapper.className = 'websheet-cell-wrapper';\n cellWrapper.style.width = (this.columnWidths[j] - 1) + 'px';\n cellWrapper.appendChild(cell);\n\n row.appendChild(cellWrapper);\n\n let cellValue = null;\n if (j in rowCalculatedCache &&\n rowCalculatedCache[j] !== null &&\n typeof rowCalculatedCache[j] !== 'undefined') {\n cellValue = rowCalculatedCache[j];\n\n } else if (j in rowDataCache &&\n rowDataCache[j] !== null &&\n typeof rowDataCache[j] !== 'undefined') {\n cellValue = rowDataCache[j];\n }\n\n if (cellValue !== null) {\n cell.value = this.formatValue(cellID, cellValue);\n }\n\n cell.title = cellID;\n cell.setAttribute('data-id', cellID);\n cell.setAttribute('data-id-prev-col', getCellID(i, j - 1));\n cell.setAttribute('data-id-prev-row', getCellID(i - 1, j));\n cell.setAttribute('data-id-next-col', getCellID(i, j + 1));\n cell.setAttribute('data-id-next-row', getCellID(i + 1, j));\n cell.setAttribute('data-row', i);\n cell.setAttribute('data-col', j);\n\n if (cell.value[0] === '=') {\n workQueue.push(\n this.setValueAtPosition.bind(this, i, j, cell.value, true)\n );\n }\n\n }\n }\n\n if (!this.immutable || this.noBrowser) {\n // Bind event handlers\n initEvents(this);\n }\n\n workQueue.forEach(task => task());\n }\n\n getCell(id) {\n if (this.noBrowser) return null;\n if (id in this.cellCache) return this.cellCache[id];\n return this.cellCache[id] = this.elem.querySelector(`[data-id=\"${id}\"]`);\n }\n\n insertColumnBefore(idx) {\n this.columnWidths.splice(idx, 0, DEFAULT_COLUMN_WIDTH);\n super.insertColumnBefore(idx);\n }\n\n popColumn() {\n if (this.width < 2) throw new Error('Cannot make spreadsheet that small');\n this.columnWidths.pop();\n super.popColumn();\n }\n removeColumn(idx) {\n if (this.width < 2) throw new Error('Cannot make spreadsheet that small');\n if (idx < 0 || idx >= this.width) throw new Error('Removing cells that do not exist');\n this.columnWidths.splice(idx, 1);\n super.removeColumn(idx);\n }\n\n setValueAtPosition(row, col, value, force = false) {\n const updated = super.setValueAtPosition(row, col, value, force);\n if (!updated || value[0] === '=') {\n return;\n }\n const cellID = getCellID(row, col);\n\n const elem = this.getCell(cellID);\n if (elem) {\n elem.value = this.formatValue(cellID, value);\n }\n }\n\n};\n"
},
{
"path": "src/constants.js",
"content": "export const DRAG_HANDLE = 2;\nexport const DRAG_MOVE = 1;\nexport const DRAG_NONE = 0;\n"
},
{
"path": "src/index.js",
"content": "import {\n Emitter,\n getCellid,\n getCellPos,\n parseExpression,\n WebSheet as HeadlessWebSheet,\n WebSheetContext,\n} from 'websheets-core';\n\nimport WebSheet from './WebSheet';\n\n\n// This is because `export default` exports {default: WebSheet}\nexports = module.exports = WebSheet;\n\nexport default WebSheet;\n\nexport {\n Emitter,\n getCellid,\n getCellPos,\n HeadlessWebSheet,\n parseExpression,\n WebSheetContext,\n};\n"
},
{
"path": "src/utils/events.js",
"content": "const LISTENERS = Symbol('websheets listeners');\n\n\nexport function listen(elem, event, cb) {\n if (!(LISTENERS in elem)) {\n elem[LISTENERS] = {};\n }\n elem[LISTENERS][event] = elem[LISTENERS][event] || [];\n elem[LISTENERS][event].push(cb);\n\n elem.addEventListener(event, cb, elem !== window);\n};\n\nexport function unlisten(elem, event, listenerToRemove = null) {\n if (!elem[LISTENERS] || !elem[LISTENERS][event]) return;\n elem[LISTENERS][event].forEach(listener => {\n if (listenerToRemove && listener !== listenerToRemove) {\n return;\n }\n elem.removeEventListener(event, listener, elem !== window);\n });\n};\n"
},
{
"path": "src/websheet.css",
"content": ".websheet,\n.websheet *,\n.websheet *:before,\n.websheet *:after {\n -webkit-box-sizing: content-box;\n box-sizing: content-box;\n}\n\n.websheet.websheet-grabbing {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n}\n\n.websheet-row {\n display: block;\n padding-right: 1px;\n}\n.websheet-row-sticky {\n position: -webkit-sticky;\n position: sticky;\n top: 0;\n z-index: 2;\n}\n\n.websheet-cell-wrapper {\n border: 1px solid #000;\n display: inline-block;\n margin-bottom: -1px;\n margin-right: -1px;\n position: relative;\n z-index: 1;\n}\n.websheet-cell-wrapper.websheet-has-focus {\n border: 0;\n cursor: -webkit-grab;\n cursor: grab;\n margin: -6px -6px -6px -5px !important; /* sorry not sorry */\n padding: 6px;\n z-index: 2;\n}\n.websheet-cell-wrapper:last-child {\n margin-right: 0;\n}\n.websheet-row:last-child .websheet-cell-wrapper {\n margin-bottom: 0;\n}\n\n.websheet-cell {\n -moz-appearance: none;\n -webkit-appearance: none;\n background: transparent;\n border: 0;\n border-radius: 1px;\n box-shadow: 0 0 0 0 rgba(51, 153, 255, 0.85);\n display: block;\n font-size: 13px;\n height: 2em;\n transition: box-shadow 0.15s, z-index 0.15s;\n width: 100%;\n}\n.websheet-cell:focus {\n border: 0 solid rgb(51, 153, 255);\n box-shadow: 0 0 0 7px rgba(51, 153, 255, 0.85);\n outline: none;\n}\n\n.websheet-cell-wrapper:after {\n background: rgb(51, 153, 255);\n border: 2px solid white;\n border-radius: 4px;\n bottom: 5px;\n content: \"\";\n display: block;\n height: 5px;\n opacity: 0;\n position: absolute;\n right: 5px;\n transition: bottom 0.25s, right 0.25s, opacity 0.1s;\n width: 5px;\n}\n\n.websheet-cell-wrapper.websheet-has-focus:after {\n bottom: -4px;\n cursor: crosshair;\n opacity: 1;\n right: -4px;\n}\n\n.websheet-cell-hover input {\n background: rgb(51, 153, 255);\n color: #fff;\n}\n"
},
{
"path": "test/babelHook.js",
"content": "require('babel-polyfill');\nrequire('babel-register');\n"
},
{
"path": "webpack.config.js",
"content": "var path = require('path');\n\nvar webpack = require('webpack');\n\n\nmodule.exports = {\n // devtool: 'source-maps',\n entry: {\n app: ['./src/index.js']\n },\n output: {\n path: path.resolve(__dirname, 'dist', 'src'),\n publicPath: '/',\n filename: '/websheet.min.js',\n library: 'WebSheet',\n },\n plugins: [\n new webpack.optimize.UglifyJsPlugin({\n compress: {warnings: false},\n mangle: {},\n sourceMap: false,\n }),\n new webpack.optimize.DedupePlugin(),\n ],\n module: {\n loaders: [\n {\n test: /\\.jsx?$/,\n exclude: /node_modules/,\n loader: 'babel-loader',\n },\n ],\n },\n};\n"
}
]