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

Table drop-down processor, in progress

This commit is contained in:
alekseybobkov 2014-12-03 22:48:16 -08:00
parent d2e4225bae
commit e032fd682d
10 changed files with 263 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
modules/backend/layouts/_head.htm
View File

@ -20,9 +20,9 @@
<script src="<?= Backend::skinAsset('assets/js/vendor/jquery.autoellipsis.js') ?>"></script>
<script src="<?= Backend::skinAsset('assets/js/vendor/jquery.waterfall.js') ?>"></script>
<script src="<?= Backend::skinAsset('assets/js/vendor/jquery.cookie.js') ?>"></script>
-->
<script src="<?= Backend::skinAsset('assets/vendor/select2/select2.js') ?>"></script>
<script src="<?= Backend::skinAsset('assets/vendor/mustache/mustache.min.js') ?>"></script>
<!--<script src="<?= Backend::skinAsset('assets/vendor/mustache/mustache.min.js') ?>"></script>
<script src="<?= Backend::skinAsset('assets/vendor/dropzone/dropzone.js') ?>"></script>
<script src="<?= URL::asset('modules/system/assets/vendor/bootstrap/js/tooltip.js') ?>"></script>

1
modules/backend/widgets/Table.php
View File

@ -69,6 +69,7 @@ class Table extends WidgetBase
$this->addJs('js/table.processor.base.js', 'core');
$this->addJs('js/table.processor.string.js', 'core');
$this->addJs('js/table.processor.checkbox.js', 'core');
$this->addJs('js/table.processor.dropdown.js', 'core');
}
/**

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

@ -149,3 +149,32 @@
border-color: #5fb6f5;
outline: none;
}
/*
* Dropdown editor
*/
.table-control td[data-column-type=dropdown] [data-view-container] {
padding-right: 20px;
position: relative;
cursor: pointer;
}
.table-control td[data-column-type=dropdown] [data-view-container]:after {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
content: "\f107";
font-size: 13px;
line-height: 100%;
color: #95a5a6;
position: absolute;
top: 8px;
right: 10px;
}
.table-control td[data-column-type=dropdown] [data-view-container]:hover:after {
color: #0181b9;
}
.table-control td[data-column-type=dropdown] [data-view-container] select {
display: none;
}

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

@ -132,10 +132,11 @@
Table.prototype.initCellProcessors = function() {
for (var i = 0, len = this.options.columns.length; i < len; i++) {
var column = this.options.columns[i].key,
columnType = this.options.columns[i].type
var columnConfiguration = this.options.columns[i],
column = columnConfiguration.key,
columnType = columnConfiguration.type
// Resolve the default column type string
// Resolve the default column type to string
if (columnType === undefined) {
columnType = 'string'
this.options.columns[i].type = columnType
@ -145,7 +146,7 @@
throw new Error('The table cell processor for the column type "'+columnType+'" is not ' +
'found in the $.oc.table.processor namespace.')
this.cellProcessors[column] = new $.oc.table.processor[columnType](this, column)
this.cellProcessors[column] = new $.oc.table.processor[columnType](this, column, columnConfiguration)
}
}

4
modules/backend/widgets/table/assets/js/table.processor.base.js
View File

@ -15,7 +15,7 @@
// CLASS DEFINITION
// ============================
var Base = function(tableObj, columnName) {
var Base = function(tableObj, columnName, columnConfiguration) {
//
// State properties
//
@ -24,6 +24,8 @@
this.columnName = columnName
this.columnConfiguration = columnConfiguration
this.activeCell = null
// Register event handlers

4
modules/backend/widgets/table/assets/js/table.processor.checkbox.js
View File

@ -18,12 +18,12 @@
var Base = $.oc.table.processor.base,
BaseProto = Base.prototype
var CheckboxProcessor = function(tableObj, columnName) {
var CheckboxProcessor = function(tableObj, columnName, columnConfiguration) {
//
// Parent constructor
//
Base.call(this, tableObj, columnName)
Base.call(this, tableObj, columnName, columnConfiguration)
}
CheckboxProcessor.prototype = Object.create(BaseProto)

133
modules/backend/widgets/table/assets/js/table.processor.dropdown.js Normal file
View File

@ -0,0 +1,133 @@
/*
* Drop-down cell processor for the table control.
*/
+function ($) { "use strict";
// NAMESPACE CHECK
// ============================
if ($.oc.table === undefined)
throw new Error("The $.oc.table namespace is not defined. Make sure that the table.js script is loaded.");
if ($.oc.table.processor === undefined)
throw new Error("The $.oc.table.processor namespace is not defined. Make sure that the table.processor.base.js script is loaded.");
// CLASS DEFINITION
// ============================
var Base = $.oc.table.processor.base,
BaseProto = Base.prototype
var DropdownProcessor = function(tableObj, columnName, columnConfiguration) {
//
// Parent constructor
//
Base.call(this, tableObj, columnName, columnConfiguration)
}
DropdownProcessor.prototype = Object.create(BaseProto)
DropdownProcessor.prototype.constructor = DropdownProcessor
DropdownProcessor.prototype.dispose = function() {
BaseProto.dispose.call(this)
}
/*
* Determines if the processor's cell is focusable.
*/
DropdownProcessor.prototype.isCellFocusable = function() {
return false
}
/*
* Renders the cell in the normal (no edit) mode
*/
DropdownProcessor.prototype.renderCell = function(value, cellContentContainer) {
var self = this
this.fetchOptions(function renderCellFetchOptions(options) {
if ( options[value] !== undefined )
value = options[value]
self.createViewContainer(cellContentContainer, value)
self = null
})
}
/*
* This method is called when the cell managed by the processor
* is focused (clicked or navigated with the keyboard).
*/
DropdownProcessor.prototype.onFocus = function(cellElement, isClick) {
if (this.activeCell === cellElement)
return
this.activeCell = cellElement
this.buildEditor(cellElement, this.getCellContentContainer(cellElement))
}
/*
* Forces the processor to hide the editor when the user navigates
* away from the cell. Processors can update the sell value in this method.
* Processors must clear the reference to the active cell in this method.
*/
DropdownProcessor.prototype.onUnfocus = function() {
if (!this.activeCell)
return
var select = this.activeCell.querySelector('select')
if (select) {
// Update the cell value and remove the select element
$(select).select2('destroy')
var value = select.options[select.selectedIndex].value,
text = select.options[select.selectedIndex].text
this.tableObj.setCellValue(this.activeCell, value)
this.setViewContainerValue(this.activeCell, text)
select.parentNode.removeChild(select)
}
this.showViewContainer(this.activeCell)
this.activeCell = null
}
DropdownProcessor.prototype.buildEditor = function(cellElement, cellContentContainer) {
this.hideViewContainer(this.activeCell)
// Create the select control
var select = document.createElement('select'),
currentValue = this.tableObj.getCellValue(cellElement)
this.fetchOptions(function renderCellFetchOptions(options) {
for (var value in options) {
var option = document.createElement('option')
option.value = value
option.text = options[value]
if (value == currentValue)
option.selected = true
select.appendChild(option)
}
cellContentContainer.appendChild(select)
$(select).select2()
cellContentContainer = null
select = null
})
}
DropdownProcessor.prototype.fetchOptions = function(onSuccess) {
// TODO: implement caching and AJAX support,
// loading indicator is required here for AJAX-based options.
//
if ( this.columnConfiguration.options )
onSuccess(this.columnConfiguration.options)
}
$.oc.table.processor.dropdown = DropdownProcessor;
}(window.jQuery);

4
modules/backend/widgets/table/assets/js/table.processor.string.js
View File

@ -20,7 +20,7 @@
var Base = $.oc.table.processor.base,
BaseProto = Base.prototype
var StringProcessor = function(tableObj, columnName) {
var StringProcessor = function(tableObj, columnName, columnConfiguration) {
//
// State properties
//
@ -31,7 +31,7 @@
// Parent constructor
//
Base.call(this, tableObj, columnName)
Base.call(this, tableObj, columnName, columnConfiguration)
}
StringProcessor.prototype = Object.create(BaseProto)

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

@ -184,3 +184,35 @@
}
}
}
/*
* Dropdown editor
*/
.table-control {
td[data-column-type=dropdown] {
[data-view-container] {
padding-right: 20px;
position: relative;
cursor: pointer;
&:after {
.icon(@angle-down);
font-size: 13px;
line-height: 100%;
color: #95a5a6;
position: absolute;
top: 8px;
right: 10px;
}
&:hover:after {
color: @color-link;
}
select {
display: none;
}
}
}
}

108
modules/backend/widgets/table/partials/_table.htm
View File

@ -3,8 +3,8 @@
$data = [
[
'name' => 'City',
'type' => true,
'default' => 'Vancouver',
'billabe' => true,
'type' => 'string',
'description' => 'City name',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -15,8 +15,8 @@
],
[
'name' => 'Country',
'type' => false,
'default' => 'Canada',
'billabe' => false,
'type' => 'checkbox',
'description' => 'Country name',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -27,8 +27,8 @@
],
[
'name' => 'State',
'type' => true,
'default' => 'BC',
'billabe' => true,
'type' => 'dropdown',
'description' => 'British columbia',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -39,8 +39,8 @@
],
[
'name' => 'Country',
'type' => true,
'default' => 'Canada',
'billabe' => true,
'type' => 'checkbox',
'description' => 'Country name',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -51,8 +51,8 @@
],
[
'name' => 'State',
'type' => false,
'default' => 'BC',
'billabe' => false,
'type' => 'dropdown',
'description' => 'British columbia',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -63,8 +63,8 @@
],
[
'name' => 'Country',
'type' => false,
'default' => 'Canada',
'billabe' => false,
'type' => 'checkbox',
'description' => 'Country name',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -75,8 +75,8 @@
],
[
'name' => 'State',
'type' => false,
'default' => 'BC',
'billabe' => false,
'type' => 'dropdown',
'description' => 'British columbia',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -87,8 +87,8 @@
],
[
'name' => 'Country',
'type' => true,
'default' => 'Canada',
'billabe' => true,
'type' => 'checkbox',
'description' => 'Country name',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -99,8 +99,8 @@
],
[
'name' => 'State',
'type' => true,
'default' => 'BC',
'billabe' => true,
'type' => 'dropdown',
'description' => 'British columbia',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -111,8 +111,8 @@
],
[
'name' => 'Country',
'type' => false,
'default' => 'Canada',
'billabe' => false,
'type' => 'checkbox',
'description' => 'Country name',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -123,8 +123,8 @@
],
[
'name' => 'State',
'type' => true,
'default' => 'BC',
'billabe' => true,
'type' => 'dropdown',
'description' => 'British columbia',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -135,8 +135,8 @@
],
[
'name' => 'Country',
'type' => false,
'default' => 'Canada',
'billabe' => false,
'type' => 'checkbox',
'description' => 'Country name',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -147,8 +147,8 @@
],
[
'name' => 'State',
'type' => true,
'default' => 'BC',
'billabe' => true,
'type' => 'dropdown',
'description' => 'British columbia',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -159,8 +159,8 @@
],
[
'name' => 'State',
'type' => false,
'default' => 'BC',
'billabe' => false,
'type' => 'dropdown',
'description' => 'British columbia',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -171,8 +171,8 @@
],
[
'name' => 'Country',
'type' => false,
'default' => 'Canada',
'billabe' => false,
'type' => 'checkbox',
'description' => 'Country name',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -183,8 +183,8 @@
],
[
'name' => 'State',
'type' => true,
'default' => 'BC',
'billabe' => true,
'type' => 'dropdown',
'description' => 'British columbia',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -195,8 +195,8 @@
],
[
'name' => 'Country',
'type' => true,
'default' => 'Canada',
'billabe' => true,
'type' => 'checkbox',
'description' => 'Country name',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -207,8 +207,8 @@
],
[
'name' => 'State',
'type' => true,
'default' => 'BC',
'billabe' => true,
'type' => 'dropdown',
'description' => 'British columbia',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -219,8 +219,8 @@
],
[
'name' => 'Country',
'type' => true,
'default' => 'Canada',
'billabe' => true,
'type' => 'checkbox',
'description' => 'Country name',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -231,8 +231,8 @@
],
[
'name' => 'State',
'type' => true,
'default' => 'BC',
'billabe' => true,
'type' => 'dropdown',
'description' => 'British columbia',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -243,8 +243,8 @@
],
[
'name' => 'State',
'type' => true,
'default' => 'BC',
'billabe' => true,
'type' => 'dropdown',
'description' => 'British columbia',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -255,8 +255,8 @@
],
[
'name' => 'Country',
'type' => true,
'default' => 'Canada',
'billabe' => true,
'type' => 'checkbox',
'description' => 'Country name',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -267,8 +267,8 @@
],
[
'name' => 'State',
'type' => true,
'default' => 'BC',
'billabe' => true,
'type' => 'dropdown',
'description' => 'British columbia',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -279,8 +279,8 @@
],
[
'name' => 'Country',
'type' => true,
'default' => 'Canada',
'billabe' => true,
'type' => 'checkbox',
'description' => 'Country name',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -291,8 +291,8 @@
],
[
'name' => 'State',
'type' => true,
'default' => 'BC',
'billabe' => true,
'type' => 'dropdown',
'description' => 'British columbia',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -303,8 +303,8 @@
],
[
'name' => 'Country',
'type' => true,
'default' => 'Canada',
'billabe' => true,
'type' => 'checkbox',
'description' => 'Country name',
'details' => 'Details string',
'monitors' => 'Monitors string',
@ -315,8 +315,8 @@
],
[
'name' => 'State',
'type' => true,
'default' => 'BC',
'billabe' => true,
'type' => 'dropdown',
'description' => 'British columbia',
'details' => 'Details string',
'monitors' => 'Monitors string',