diff --git a/modules/backend/widgets/table/assets/css/table.css b/modules/backend/widgets/table/assets/css/table.css index c3a17057a..523d0967a 100644 --- a/modules/backend/widgets/table/assets/css/table.css +++ b/modules/backend/widgets/table/assets/css/table.css @@ -98,6 +98,50 @@ .table-control table.data td:last-child { border-right: none; } +.table-control .toolbar { + background: white; + border-bottom: 1px solid #bdc3c7; +} +.table-control .toolbar a { + color: #323e50; + padding: 10px; + opacity: 0.5; + filter: alpha(opacity=50); +} +.table-control .toolbar a:hover { + opacity: 1; + filter: alpha(opacity=100); +} +.table-control .toolbar a:before { + display: inline-block; + content: ' '; + width: 16px; + height: 16px; + margin-right: 8px; + position: relative; + top: 3px; + background: transparent url(../images/table-icons.gif) no-repeat; + background-position: 0 0; + background-size: 32px auto; +} +.table-control .toolbar a.add-table-row-above:before { + background-position: 0 -56px; +} +.table-control .toolbar a.delete-table-row:before { + background-position: 0 -113px; +} +@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) { + .table-control .toolbar a:before { + background-position: 0px -9px; + background-size: 16px auto; + } + .table-control .toolbar a.add-table-row-above:before { + background-position: 0 -39px; + } + .table-control .toolbar a.delete-table-row:before { + background-position: 0 -66px; + } +} /* * String editor */ diff --git a/modules/backend/widgets/table/assets/images/table-icons.gif b/modules/backend/widgets/table/assets/images/table-icons.gif new file mode 100644 index 000000000..fee3716fb Binary files /dev/null and b/modules/backend/widgets/table/assets/images/table-icons.gif differ diff --git a/modules/backend/widgets/table/assets/js/table.js b/modules/backend/widgets/table/assets/js/table.js index 23dbe28a9..968da55d5 100644 --- a/modules/backend/widgets/table/assets/js/table.js +++ b/modules/backend/widgets/table/assets/js/table.js @@ -53,9 +53,13 @@ // A reference to the header table this.headerTable = null + // A reference to the toolbar + this.toolbar = null + // Event handlers this.clickHandler = this.onClick.bind(this) this.keydownHandler = this.onKeydown.bind(this) + this.toolbarClickHandler = this.onToolbarClick.bind(this) if (this.options.postback && this.options.clientDataSourceClass == 'client') this.formSubmitHandler = this.onFormSubmit.bind(this) @@ -86,8 +90,8 @@ // Initialize helpers this.navigation = new $.oc.table.helper.navigation(this) - // Create header and data tables - this.buildTables() + // Create the UI + this.buildUi() // Register event handlers this.registerHandlers() @@ -128,6 +132,10 @@ if (this.options.postback && this.options.clientDataSourceClass == 'client') this.$el.closest('form').bind('oc.beforeRequest', this.formSubmitHandler) + + var toolbar = this.getToolbar() + if (toolbar) + toolbar.addEventListener('click', this.toolbarClickHandler); } Table.prototype.unregisterHandlers = function() { @@ -137,6 +145,12 @@ this.el.removeEventListener('keydown', this.keydownHandler); this.keydownHandler = null + var toolbar = this.getToolbar() + if (toolbar) + toolbar.removeEventListener('click', this.toolbarClickHandler); + + this.toolbarClickHandler = null + if (this.formSubmitHandler) { this.$el.closest('form').unbind('oc.beforeRequest', this.formSubmitHandler) this.formSubmitHandler = null @@ -167,10 +181,14 @@ return this.cellProcessors[columnName] } - Table.prototype.buildTables = function() { + Table.prototype.buildUi = function() { this.tableContainer = document.createElement('div') this.tableContainer.setAttribute('class', 'table-container') + // Build the toolbar + if (this.options.toolbar) + this.buildToolbar() + // Build the headers table this.tableContainer.appendChild(this.buildHeaderTable()) @@ -181,6 +199,46 @@ this.updateDataTable() } + Table.prototype.buildToolbar = function() { + if (!this.options.adding && !this.options.deleting) + return + + this.toolbar = document.createElement('div') + this.toolbar.setAttribute('class', 'toolbar') + + if (this.options.adding) { + var addBelowButton = document.createElement('a') + addBelowButton.setAttribute('class', 'btn add-table-row-below') + addBelowButton.setAttribute('data-cmd', 'record-add-below') + this.toolbar.appendChild(addBelowButton) + + if (this.navigation.paginationEnabled() || !this.options.rowSorting) { + // When the pagination is enabled, or sorting is disabled, + // new records can only be added to the bottom of the + // table. + addBelowButton.textContent = 'Add row' + } else { + addBelowButton.textContent = 'Add row below' + + var addAboveButton = document.createElement('a') + addAboveButton.setAttribute('class', 'btn add-table-row-above') + addAboveButton.textContent = 'Add row above' + addAboveButton.setAttribute('data-cmd', 'record-add-above') + this.toolbar.appendChild(addAboveButton) + } + } + + if (this.options.deleting) { + var deleteButton = document.createElement('a') + deleteButton.setAttribute('class', 'btn delete-table-row') + deleteButton.textContent = 'Delete row' + deleteButton.setAttribute('data-cmd', 'record-delete') + this.toolbar.appendChild(deleteButton) + } + + this.tableContainer.appendChild(this.toolbar) + } + Table.prototype.buildHeaderTable = function() { var headersTable = document.createElement('table'), row = document.createElement('tr') @@ -492,6 +550,10 @@ } } + Table.prototype.getToolbar = function() { + return this.tableContainer.querySelector('div.toolbar') + } + // EVENT HANDLERS // ============================ @@ -517,7 +579,7 @@ } Table.prototype.onKeydown = function(ev) { - if (ev.keyCode == 65 && ev.altKey) { + if (ev.keyCode == 65 && ev.altKey && this.options.adding) { if (!ev.shiftKey) { // alt+a - add record below this.addRecord('below') @@ -530,9 +592,9 @@ return } - if (ev.keyCode == 68 && ev.altKey) { + if (ev.keyCode == 68 && ev.altKey && this.options.deleting) { // alt+d - delete record - this.deleteRecord('above') + this.deleteRecord() this.stopEvent(ev) return @@ -555,6 +617,25 @@ } } + Table.prototype.onToolbarClick = function(ev) { + var target = this.getEventTarget(ev), + cmd = target.getAttribute('data-cmd') + + switch (cmd) { + case 'record-add-below': + this.addRecord('below') + break + case 'record-add-above': + this.addRecord('above') + break + case 'record-delete': + this.deleteRecord() + break + } + + this.stopEvent(ev) + } + // PUBLIC METHODS // ============================ @@ -572,6 +653,7 @@ // Remove references to DOM elements this.dataTable = null this.headerTable = null + this.toolbar = null // Dispose cell processors this.disposeCellProcessors() @@ -707,7 +789,11 @@ recordsPerPage: false, data: null, postback: true, - postbackHandlerName: 'onSave' + postbackHandlerName: 'onSave', + adding: true, + deleting: true, + toolbar: true, + rowSorting: false } // TABLE PLUGIN DEFINITION diff --git a/modules/backend/widgets/table/assets/less/table.less b/modules/backend/widgets/table/assets/less/table.less index 098883b0a..873c47851 100644 --- a/modules/backend/widgets/table/assets/less/table.less +++ b/modules/backend/widgets/table/assets/less/table.less @@ -124,6 +124,61 @@ border-right: none; } } + + .toolbar { + background: white; + border-bottom: 1px solid #bdc3c7; + + a { + color: #323e50; + padding: 10px; + .opacity(0.5); + + &:hover { + .opacity(1); + } + + &:before { + display: inline-block; + content: ' '; + width: 16px; + height: 16px; + margin-right: 8px; + position: relative; + top: 3px; + background: transparent url(../images/table-icons.gif) no-repeat; + background-position: 0 0; + background-size: 32px auto; + } + + &.add-table-row-above:before { + background-position: 0 -56px; + } + + &.delete-table-row:before { + background-position: 0 -113px; + } + } + } +} + +@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) { + .table-control .toolbar { + a { + &:before { + background-position: 0px -9px; + background-size: 16px auto; + } + + &.add-table-row-above:before { + background-position: 0 -39px; + } + + &.delete-table-row:before { + background-position: 0 -66px; + } + } + } } /*