loleaflet/build/deps.js | 14 +++ loleaflet/dist/leaflet.css | 104 ++++++++++++++++++++++++++ loleaflet/src/control/Control.ColumnHeader.js | 64 ++++++++++++++++ loleaflet/src/control/Control.RowHeader.js | 61 +++++++++++++++ 4 files changed, 243 insertions(+)
New commits: commit fd6d0c2b53c862303c1f3f4244d7f16258a53dfd Author: Henry Castro <hcas...@collabora.com> Date: Sun Nov 8 12:29:58 2015 -0400 loleaflet: add ColumnHeader and RowHeader controls Column and Row headers for spreadsheet documents, based on html table tag diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js index c9b3d1a..017b6bb 100644 --- a/loleaflet/build/deps.js +++ b/loleaflet/build/deps.js @@ -282,6 +282,20 @@ var deps = { desc: 'Parts preview sidebar' }, + ControlColumnHeader: { + src: ['control/Control.js', + 'control/Control.ColumnHeader.js'], + heading: 'Controls', + desc: 'Column Header bar' + }, + + ControlRowHeader: { + src: ['control/Control.js', + 'control/Control.RowHeader.js'], + heading: 'Controls', + desc: 'Row Header bar' + }, + ControlTabs: { src: ['control/Control.js', 'control/Control.Tabs.js'], diff --git a/loleaflet/dist/leaflet.css b/loleaflet/dist/leaflet.css index 033e8ab..af534ee 100644 --- a/loleaflet/dist/leaflet.css +++ b/loleaflet/dist/leaflet.css @@ -733,9 +733,113 @@ a.leaflet-control-buttons:hover:first-child { } .spreadsheet-document { + border-top: 1px solid #B6B6B6 !important; + top: 100px !important; + left: 50px !important; bottom: 20px !important; } +.spreadsheet-container-column { + position: absolute; + left: 0px; + top: 80px; + width: 100%; + height: 20px; + margin: 0px; + padding: 0px; + border-width: 0px; + overflow: hidden; +} + +.spreadsheet-container-table { + table-layout: fixed; + width: 100%; + height: 100%; + border-spacing: 0px; + border-collapse: collapse; + border-width: 0px; + margin: 0px; + padding: 0px; +} + +.spreadsheet-container-th-corner { + border: 1px solid black; + background-color: darkgrey; + padding: 0px; + margin: 0px; + border-width: 1px; + width: 47px; /* 50px - 2px (border) - 1px (border-collapse)*/ + height: 19px; +} + +.spreadsheet-container-th-column { + padding: 0px; + margin: 0px; + border-width: 0px; +} + +.spreadsheet-container-column-inner { + width: 100%; + height: 100%; + overflow: hidden; +} + +#spreadsheet-table-column { + table-layout: fixed; + left: 0px; + width: 100%; + height: 100%; + border-spacing: 0px !important; + border-collapse: collapse !important; + position: relative; + margin: 0px; + padding: 0px; +} + +.spreadsheet-table-column-cell { + border: 1px solid black; + background-color: darkgrey; + overflow: hidden; + min-width: 1px; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 90%; + padding: 0px; + margin: 0px; +} + +.spreadsheet-container-row { + position: absolute; + left: 0; + top: 100px; + width: 50px; + bottom: 20px; + overflow: hidden; +} + +.spreadsheet-container-row-inner { + width: 100%; +} + +#spreadsheet-table-row { + table-layout: fixed; + width: 100%; + height: 100%; + border-spacing: 0px !important; + border-collapse: collapse !important; + position: relative; +} + +.spreadsheet-table-row-cell { + border: 1px solid black; + background-color: darkgrey; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 90%; + padding: 0px; + margin: 0px; +} + .spreadsheet-tab { margin: 0; padding: 0; diff --git a/loleaflet/src/control/Control.ColumnHeader.js b/loleaflet/src/control/Control.ColumnHeader.js new file mode 100644 index 0000000..7280bc2 --- /dev/null +++ b/loleaflet/src/control/Control.ColumnHeader.js @@ -0,0 +1,64 @@ +/* +* Control.ColumnHeader +*/ + +L.Control.ColumnHeader = L.Control.extend({ + onAdd: function (map) { + var docContainer = L.DomUtil.get('document-container'); + var divHeader = L.DomUtil.create('div', 'spreadsheet-container-column', docContainer.parentElement); + var tableContainer = L.DomUtil.create('table', 'spreadsheet-container-table', divHeader); + var tbodyContainer = L.DomUtil.create('tbody', '', tableContainer); + var trContainer = L.DomUtil.create('tr', '', tbodyContainer); + L.DomUtil.create('th', 'spreadsheet-container-th-corner', trContainer); + var thColumns = L.DomUtil.create('th', 'spreadsheet-container-th-column', trContainer); + var divInner = L.DomUtil.create('div', 'spreadsheet-container-column-inner', thColumns); + this._table = L.DomUtil.create('table', '', divInner); + this._table.id = 'spreadsheet-table-column'; + L.DomUtil.create('tbody', '', this._table); + this._columns = L.DomUtil.create('tr','', this._table.firstChild); + + // dummy initial header + L.DomUtil.create('th','spreadsheet-table-column-cell', this._columns); + + return document.createElement('div'); + }, + + clearColumns : function () { + L.DomUtil.remove(this._columns); + this._columns = L.DomUtil.create('tr', '', this._table.firstChild); + }, + + offsetColumn: function (point) { + L.DomUtil.setStyle(this._table, 'left', point + 'px'); + }, + + fillColumns: function (columns, converter, context) { + var twip, width, column; + + this.clearColumns(); + for (iterator = 0; iterator < columns.length; iterator++) { + twip = new L.Point(parseInt(columns[iterator].size), + parseInt(columns[iterator].size)); + width = Math.round(converter.call(context, twip).x) - 1; + column = L.DomUtil.create('th', 'spreadsheet-table-column-cell', this._columns); + column.innerHTML = columns[iterator].text; + column.twipWidth = columns[iterator].size; + column.width = width + "px"; + } + }, + + updateColumns: function (converter, context) { + var iterator, twip, width, column; + for (iterator = 0; iterator < this._columns.childNodes.length; iterator++) { + column = this._columns.childNodes[iterator]; + twip = new L.Point(parseInt(column.twipWidth), + parseInt(column.twipWidth)); + width = Math.round(converter.call(context, twip).x) - 1; + column.width = width + "px"; + } + } +}) + +L.control.columnHeader = function (options) { + return new L.Control.ColumnHeader(options); +}; diff --git a/loleaflet/src/control/Control.RowHeader.js b/loleaflet/src/control/Control.RowHeader.js new file mode 100644 index 0000000..141527f --- /dev/null +++ b/loleaflet/src/control/Control.RowHeader.js @@ -0,0 +1,61 @@ +/* + * L.Control.RowHeader +*/ + +L.Control.RowHeader = L.Control.extend({ + onAdd: function (map) { + var docContainer = L.DomUtil.get('document-container'); + var divRowHeader = L.DomUtil.create('div', 'spreadsheet-container-row', docContainer.parentElement); + var divRowInner = L.DomUtil.create('div', 'spreadsheet-container-row-inner', divRowHeader); + this._table = L.DomUtil.create('table', '', divRowInner); + this._table.id = 'spreadsheet-table-row'; + this._rows = L.DomUtil.create('tbody', '', this._table); + + // dummy initial row header + var row = L.DomUtil.create('tr', '', this._rows); + L.DomUtil.create('th','spreadsheet-table-row-cell', row); + + return document.createElement('div'); + }, + + clearRows: function () { + L.DomUtil.remove(this._rows); + this._rows = L.DomUtil.create('tbody', '', this._table); + }, + + offsetRow: function (value) { + L.DomUtil.setStyle(this._table, 'top', value + 'px'); + }, + + fillRows: function (rows, converter, context) { + var iterator, twip, height, row, cell; + + this.clearRows(); + for (iterator = 0; iterator < rows.length; iterator++) { + twip = new L.Point(parseInt(rows[iterator].size), + parseInt(rows[iterator].size)); + height = Math.round(converter.call(context, twip).y) - 2; + row = L.DomUtil.create('tr', '', this._rows); + cell = L.DomUtil.create('th', 'spreadsheet-table-row-cell', row); + cell.innerHTML = rows[iterator].text; + cell.twipHeight = rows[iterator].size; + cell.height = height + "px"; + } + }, + + updateRows: function (converter, context) { + var iterator, twip, height, row; + + for (iterator = 0; iterator < this._rows.childNodes.length; iterator++) { + row = this._rows.childNodes[iterator].firstChild; + twip = new L.Point(parseInt(row.twipHeight), + parseInt(row.twipHeight)); + height = Math.round(converter.call(context, twip).y) - 1; + row.height = height + "px"; + } + } +}) + +L.control.rowHeader = function (options) { + return new L.Control.RowHeader(options); +}; _______________________________________________ Libreoffice-commits mailing list libreoffice-comm...@lists.freedesktop.org http://lists.freedesktop.org/mailman/listinfo/libreoffice-commits