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

Implemented the oc.tableCellChanged event for the table widget. Added readonly mode support in the code editor widget.

This commit is contained in:
alekseybobkov 2015-08-25 21:34:21 -07:00
parent 35c9e753f4
commit c38126ce65
9 changed files with 1001 additions and 4360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5222
modules/backend/assets/css/october.css
View File

File diff suppressed because it is too large Load Diff

1
modules/backend/assets/less/layout/fancylayout.less
View File

@ -85,6 +85,7 @@
position: relative;
display: inline-block;
padding: 8px 5px 9px 5px;
height: 31px;
font-size: 13px;
z-index: 100;
background-color: @color-fancy-form-inactive-tab;

7
modules/backend/formwidgets/CodeEditor.php
View File

@ -67,6 +67,11 @@ class CodeEditor extends FormWidgetBase
*/
public $theme = 'twilight';
/**
* @var boolean If true, the editor is set to read-only mode
*/
public $readOnly = false;
//
// Object properties
//
@ -94,6 +99,7 @@ class CodeEditor extends FormWidgetBase
'fontSize',
'margin',
'theme',
'readOnly'
]);
}
@ -126,6 +132,7 @@ class CodeEditor extends FormWidgetBase
$this->vars['stretch'] = $this->formField->stretch;
$this->vars['size'] = $this->formField->size;
$this->vars['name'] = $this->formField->getName();
$this->vars['readOnly'] = $this->readOnly;
// Double encode when escaping
$this->vars['value'] = htmlentities($this->getLoadValue(), ENT_QUOTES, 'UTF-8', true);

1
modules/backend/formwidgets/codeeditor/partials/_codeeditor.htm
View File

@ -15,6 +15,7 @@
data-highlight-active-line="<?= $highlightActiveLine ?>"
data-use-soft-tabs="<?= $useSoftTabs ?>"
data-show-gutter="<?= $showGutter ? 'true' : 'false' ?>"
data-read-only="<?= $readOnly ? 'true' : 'false' ?>"
data-language="<?= $language ?>"
data-margin="<?= $margin ?>"
data-vendor-path="<?= URL::asset('/modules/backend/formwidgets/codeeditor/assets/vendor/ace') ?>">

31
modules/backend/widgets/table/assets/js/build-min.js vendored
View File

@ -317,6 +317,17 @@ this.tableContainer=null
this.$el=null
this.dataTableContainer=null
this.activeCell=null}
Table.prototype.setRowValues=function(rowIndex,rowValues){var row=this.findRowByIndex(rowIndex)
if(!row){return false}
var dataUpdated=false
for(var i=0,len=row.children.length;i<len;i++){var cell=row.children[i],cellColumnName=this.getCellColumnName(cell)
for(var rowColumnName in rowValues){if(rowColumnName==cellColumnName){this.setCellValue(cell,rowValues[rowColumnName],true)
dataUpdated=true}}}
if(dataUpdated){var originalEditedRowKey=this.editedRowKey
this.editedRowKey=this.getRowKey(row)
this.commitEditedRow()
this.editedRowKey=originalEditedRowKey}
return true}
Table.prototype.getElement=function(){return this.el}
Table.prototype.getAlias=function(){return this.options.alias}
Table.prototype.getTableContainer=function(){return this.tableContainer}
@ -352,6 +363,7 @@ Table.prototype.parentContainsElement=function(parent,element){while(element&&el
return element?true:false}
Table.prototype.getCellValue=function(cellElement){return cellElement.querySelector('[data-container]').value}
Table.prototype.getCellRowKey=function(cellElement){return parseInt(cellElement.parentNode.getAttribute('data-row'))}
Table.prototype.getRowKey=function(rowElement){return parseInt(rowElement.getAttribute('data-row'))}
Table.prototype.findRowByKey=function(key){return this.dataTable.querySelector('tbody tr[data-row="'+key+'"]')}
Table.prototype.findRowByIndex=function(index){return this.getDataTableBody().children[index]}
Table.prototype.getCellRowIndex=function(cellElement){return parseInt(cellElement.parentNode.rowIndex)}
@ -363,10 +375,12 @@ Table.prototype.getRowData=function(row){var result={}
for(var i=0,len=row.children.length;i<len;i++){var cell=row.children[i]
result[cell.getAttribute('data-column')]=this.getCellValue(cell)}
return result}
Table.prototype.setCellValue=function(cellElement,value){var dataContainer=cellElement.querySelector('[data-container]')
Table.prototype.getCellColumnName=function(cellElement){return cellElement.getAttribute('data-column')}
Table.prototype.setCellValue=function(cellElement,value,suppressEvents){var dataContainer=cellElement.querySelector('[data-container]')
if(dataContainer.value!=value){dataContainer.value=value
this.markCellRowDirty(cellElement)
this.notifyRowProcessorsOnChange(cellElement)}}
this.notifyRowProcessorsOnChange(cellElement)
if(suppressEvents===undefined||!suppressEvents){this.$el.trigger('oc.tableCellChanged',[this.getCellColumnName(cellElement),value,this.getCellRowIndex(cellElement)])}}}
Table.DEFAULTS={clientDataSourceClass:'client',keyColumn:'id',recordsPerPage:false,data:null,postback:true,postbackHandlerName:'onSave',adding:true,deleting:true,toolbar:true,rowSorting:false,height:false,dynamicHeight:false,btnAddRowLabel:'Add row',btnAddRowBelowLabel:'Add row below',btnDeleteRowLabel:'Delete row'}
var old=$.fn.table
$.fn.table=function(option){var args=Array.prototype.slice.call(arguments,1),result=undefined
@ -658,6 +672,9 @@ return caretPosition==0
if(direction=='right')
return caretPosition==editor.value.length
return true}
StringProcessor.prototype.onRowValueChanged=function(columnName,cellElement){if(columnName!=this.columnName){return}
var value=this.tableObj.getCellValue(cellElement)
this.setViewContainerValue(cellElement,value)}
StringProcessor.prototype.onFocusTimeout=function(){if(!this.activeCell)
return
var editor=this.activeCell.querySelector('.string-input')
@ -690,8 +707,7 @@ CheckboxProcessor.prototype.isCellFocusable=function(){return false}
CheckboxProcessor.prototype.renderCell=function(value,cellContentContainer){var checkbox=document.createElement('div')
checkbox.setAttribute('data-checkbox-element','true')
checkbox.setAttribute('tabindex','0')
if(value&&value!=0&&value!="false")
checkbox.setAttribute('class','checked')
if(value&&value!=0&&value!="false"){checkbox.setAttribute('class','checked')}
cellContentContainer.appendChild(checkbox)}
CheckboxProcessor.prototype.onFocus=function(cellElement,isClick){cellElement.querySelector('div[data-checkbox-element]').focus()}
CheckboxProcessor.prototype.onKeyDown=function(ev){if(ev.keyCode==32)
@ -702,9 +718,14 @@ if(container.getAttribute('data-column')!==this.columnName){return}
this.changeState(target)}}
CheckboxProcessor.prototype.changeState=function(divElement){var cell=divElement.parentNode.parentNode
if(divElement.getAttribute('class')=='checked'){divElement.setAttribute('class','')
this.tableObj.setCellValue(cell,0)}else{divElement.setAttribute('class','checked')
this.tableObj.setCellValue(cell,0)}
else{divElement.setAttribute('class','checked')
this.tableObj.setCellValue(cell,1)}}
CheckboxProcessor.prototype.getCheckboxContainerNode=function(checkbox){return checkbox.parentNode.parentNode}
CheckboxProcessor.prototype.onRowValueChanged=function(columnName,cellElement){if(columnName!=this.columnName){return}
var checkbox=cellElement.querySelector('div[data-checkbox-element]'),value=this.tableObj.getCellValue(cellElement)
if(value&&value!=0&&value!="false"){checkbox.setAttribute('class','checked')}
else{checkbox.setAttribute('class','')}}
$.oc.table.processor.checkbox=CheckboxProcessor;}(window.jQuery);+function($){"use strict";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.");var Base=$.oc.table.processor.base,BaseProto=Base.prototype

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

@ -841,6 +841,45 @@
this.activeCell = null
}
/*
* Updates row values in the table.
* rowIndex is an integer value containing the row index on the current page.
* The rowValues should be a hash object containing only changed
* columns.
* Returns false if the row wasn't found. Otherwise returns true.
*/
Table.prototype.setRowValues = function(rowIndex, rowValues) {
var row = this.findRowByIndex(rowIndex)
if (!row) {
return false
}
var dataUpdated = false
for (var i = 0, len = row.children.length; i < len; i++) {
var cell = row.children[i],
cellColumnName = this.getCellColumnName(cell)
for (var rowColumnName in rowValues) {
if (rowColumnName == cellColumnName) {
this.setCellValue(cell, rowValues[rowColumnName], true)
dataUpdated = true
}
}
}
if (dataUpdated) {
var originalEditedRowKey = this.editedRowKey
this.editedRowKey = this.getRowKey(row)
this.commitEditedRow()
this.editedRowKey = originalEditedRowKey
}
return true
}
// HELPER METHODS
// ============================
@ -942,6 +981,10 @@
return parseInt(cellElement.parentNode.getAttribute('data-row'))
}
Table.prototype.getRowKey = function(rowElement) {
return parseInt(rowElement.getAttribute('data-row'))
}
Table.prototype.findRowByKey = function(key) {
return this.dataTable.querySelector('tbody tr[data-row="'+key+'"]')
}
@ -974,7 +1017,11 @@
return result
}
Table.prototype.setCellValue = function(cellElement, value) {
Table.prototype.getCellColumnName = function(cellElement) {
return cellElement.getAttribute('data-column')
}
Table.prototype.setCellValue = function(cellElement, value, suppressEvents) {
var dataContainer = cellElement.querySelector('[data-container]')
if (dataContainer.value != value) {
@ -983,6 +1030,14 @@
this.markCellRowDirty(cellElement)
this.notifyRowProcessorsOnChange(cellElement)
if (suppressEvents === undefined || !suppressEvents) {
this.$el.trigger('oc.tableCellChanged', [
this.getCellColumnName(cellElement),
value,
this.getCellRowIndex(cellElement)
])
}
}
}

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

@ -48,8 +48,9 @@
checkbox.setAttribute('data-checkbox-element', 'true')
checkbox.setAttribute('tabindex', '0')
if (value && value != 0 && value != "false")
if (value && value != 0 && value != "false") {
checkbox.setAttribute('class', 'checked')
}
cellContentContainer.appendChild(checkbox)
}
@ -96,7 +97,8 @@
if (divElement.getAttribute('class') == 'checked') {
divElement.setAttribute('class', '')
this.tableObj.setCellValue(cell, 0)
} else {
}
else {
divElement.setAttribute('class', 'checked')
this.tableObj.setCellValue(cell, 1)
}
@ -106,5 +108,24 @@
return checkbox.parentNode.parentNode
}
/*
* This method is called when a cell value in the row changes.
*/
CheckboxProcessor.prototype.onRowValueChanged = function(columnName, cellElement) {
if (columnName != this.columnName) {
return
}
var checkbox = cellElement.querySelector('div[data-checkbox-element]'),
value = this.tableObj.getCellValue(cellElement)
if (value && value != 0 && value != "false") {
checkbox.setAttribute('class', 'checked')
}
else {
checkbox.setAttribute('class', '')
}
}
$.oc.table.processor.checkbox = CheckboxProcessor;
}(window.jQuery);

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

@ -341,13 +341,15 @@
this.showDropdown()
}
/*
/*
* This method is called when a cell value in the row changes.
*/
DropdownProcessor.prototype.onRowValueChanged = function(columnName, cellElement) {
// Determine if this drop-down depends on the changed column
// and update the option list if necessary
// TODO: setting drop-down values with table.setRowValues() is not implemented currently
if (!this.columnConfiguration.dependsOn)
return

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

@ -128,6 +128,19 @@
return true
}
/*
* This method is called when a cell value in the row changes.
*/
StringProcessor.prototype.onRowValueChanged = function(columnName, cellElement) {
if (columnName != this.columnName) {
return
}
var value = this.tableObj.getCellValue(cellElement)
this.setViewContainerValue(cellElement, value)
}
StringProcessor.prototype.onFocusTimeout = function() {
if (!this.activeCell)
return