TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implemented and styled the toolbar

This commit is contained in:
alekseybobkov 2014-12-14 22:34:37 -08:00
parent c6eb544101
commit 831f28e84d
4 changed files with 192 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
modules/backend/widgets/table/assets/css/table.css
View File

@ -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
*/

BIN
modules/backend/widgets/table/assets/images/table-icons.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

100
modules/backend/widgets/table/assets/js/table.js
View File

@ -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

55
modules/backend/widgets/table/assets/less/table.less
View File

@ -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;
}
}
}
}
/*