From 409c40c248d174117a90cdcaa6d76a66622f269e Mon Sep 17 00:00:00 2001 From: alekseybobkov Date: Fri, 9 Oct 2015 23:01:47 -0700 Subject: [PATCH] Finished Inspector validation, some minor Inspector fixes. --- .../ui/js/inspector.editor.dictionary.js | 50 ++++++++++++++++++- .../ui/js/inspector.editor.objectlist.js | 44 +++++++++++++--- .../ui/js/inspector.editor.popupbase.js | 1 - .../system/assets/ui/js/inspector.surface.js | 11 ++-- modules/system/assets/ui/less/inspector.less | 11 ++-- modules/system/assets/ui/storm.css | 4 +- 6 files changed, 100 insertions(+), 21 deletions(-) diff --git a/modules/system/assets/ui/js/inspector.editor.dictionary.js b/modules/system/assets/ui/js/inspector.editor.dictionary.js index 70d7ccda5..1a7e8833c 100644 --- a/modules/system/assets/ui/js/inspector.editor.dictionary.js +++ b/modules/system/assets/ui/js/inspector.editor.dictionary.js @@ -7,12 +7,30 @@ BaseProto = Base.prototype var DictionaryEditor = function(inspector, propertyDefinition, containerCell, group) { + this.keyValidationSet = null + this.valueValidationSet = null + Base.call(this, inspector, propertyDefinition, containerCell, group) } DictionaryEditor.prototype = Object.create(BaseProto) DictionaryEditor.prototype.constructor = Base + DictionaryEditor.prototype.dispose = function() { + this.disposeValidators() + + this.keyValidationSet = null + this.valueValidationSet = null + + BaseProto.dispose.call(this) + } + + DictionaryEditor.prototype.init = function() { + this.initValidators() + + BaseProto.init.call(this) + } + // // Popup editor methods // @@ -108,7 +126,6 @@ DictionaryEditor.prototype.handleSubmit = function($form) { return this.applyValues() -// TODO: validate here } // @@ -253,6 +270,18 @@ this.focusAndMakeActive(keyInput) return false } + + var validationResult = this.keyValidationSet.validate(key) + if (validationResult !== null) { + $.oc.flashMsg({text: validationResult, 'class': 'error', 'interval': 5}) + return false + } + + validationResult = this.valueValidationSet.validate(value) + if (validationResult !== null) { + $.oc.flashMsg({text: validationResult, 'class': 'error', 'interval': 5}) + return false + } result[key] = value } @@ -351,6 +380,25 @@ this.focusAndMakeActive(newActiveEditor) } + // + // Validation + // + + DictionaryEditor.prototype.initValidators = function() { + this.keyValidationSet = new $.oc.inspector.validationSet({ + validation: this.propertyDefinition.validationKey + }, this.propertyDefinition.property+'.validationKey') + + this.valueValidationSet = new $.oc.inspector.validationSet({ + validation: this.propertyDefinition.validationValue + }, this.propertyDefinition.property+'.validationValue') + } + + DictionaryEditor.prototype.disposeValidators = function() { + this.keyValidationSet.dispose() + this.valueValidationSet.dispose() + } + // // Event handlers // diff --git a/modules/system/assets/ui/js/inspector.editor.objectlist.js b/modules/system/assets/ui/js/inspector.editor.objectlist.js index abefeaba6..dd0681552 100644 --- a/modules/system/assets/ui/js/inspector.editor.objectlist.js +++ b/modules/system/assets/ui/js/inspector.editor.objectlist.js @@ -205,7 +205,7 @@ table.appendChild(tbody) if (firstRow !== undefined) { - this.selectRow(firstRow) + this.selectRow(firstRow, true) } this.updateScrollpads() @@ -250,17 +250,26 @@ // Built-in Inspector management // - ObjectListEditor.prototype.selectRow = function(row) { + ObjectListEditor.prototype.selectRow = function(row, forceSelect) { var tbody = row.parentNode, inspectorContainer = this.getInspectorContainer(), selectedRow = this.getSelectedRow() + if (selectedRow === row && !forceSelect) { + return + } + if (selectedRow) { if (!this.validateKeyValue()) { return } -// TODO: validation of the currently existing Inspector is required + if (this.currentRowInspector) { + if (!this.currentRowInspector.validate()) { + return + } + } + this.applyDataToRow(selectedRow) $.oc.foundation.element.removeClass(selectedRow, 'active') } @@ -291,7 +300,7 @@ } ObjectListEditor.prototype.disposeInspector = function() { - $.oc.foundation.controlUtils.disposeControls(this.popup) + $.oc.foundation.controlUtils.disposeControls(this.popup.querySelector('[data-inspector-container]')) this.currentRowInspector = null } @@ -315,6 +324,15 @@ return } + value = $.trim(value) + + if (value.length === 0) { + value = '[No title]' + $.oc.foundation.element.addClass(selectedRow, 'disabled') + } else { + $.oc.foundation.element.removeClass(selectedRow, 'disabled') + } + selectedRow.firstChild.textContent = value } @@ -342,7 +360,12 @@ return } -// TODO: validation of the currently existing Inspector is required + if (this.currentRowInspector) { + if (!this.currentRowInspector.validate()) { + return + } + } + this.applyDataToRow(selectedRow) $.oc.foundation.element.removeClass(selectedRow, 'active') } @@ -359,7 +382,7 @@ row.setAttribute('data-inspector-values', JSON.stringify(data)) tbody.appendChild(row) - this.selectRow(row) + this.selectRow(row, true) this.removeEmptyRow() this.updateScrollpads() @@ -402,7 +425,12 @@ return } -// TODO: validation of the currently existing Inspector is required + if (this.currentRowInspector) { + if (!this.currentRowInspector.validate()) { + return + } + } + this.applyDataToRow(selectedRow) } @@ -611,6 +639,8 @@ $(popup).off('click.inspector', '[data-cmd]', this.proxy(this.onCommand)) this.disposeInspector() + $.oc.foundation.controlUtils.disposeControls(this.popup) + this.popup = null } diff --git a/modules/system/assets/ui/js/inspector.editor.popupbase.js b/modules/system/assets/ui/js/inspector.editor.popupbase.js index c49e64031..47b51a2fb 100644 --- a/modules/system/assets/ui/js/inspector.editor.popupbase.js +++ b/modules/system/assets/ui/js/inspector.editor.popupbase.js @@ -84,7 +84,6 @@ } PopupBase.prototype.handleSubmit = function($form) { -// TODO: validate here } PopupBase.prototype.hidePopup = function() { diff --git a/modules/system/assets/ui/js/inspector.surface.js b/modules/system/assets/ui/js/inspector.surface.js index 505984f6f..8f8196a07 100644 --- a/modules/system/assets/ui/js/inspector.surface.js +++ b/modules/system/assets/ui/js/inspector.surface.js @@ -283,8 +283,7 @@ Surface.prototype.getRowCssClass = function(property, group) { var result = property.itemType - // The property.groupedControl flag doesn't allow to collapse the grouped control row itself. - if (property.itemType == 'property' && !property.groupedControl) { + if (property.itemType == 'property') { // result += ' grouped' if (group.parentGroup) { result += this.getGroupManager().isGroupExpanded(group) ? ' expanded' : ' collapsed' @@ -362,8 +361,8 @@ // Field grouping // - Surface.prototype.applyGroupIndexAttribute = function(property, row, group) { - if (property.itemType == 'group' || property.groupedControl) { + Surface.prototype.applyGroupIndexAttribute = function(property, row, group, isGroupedControl) { + if (property.itemType == 'group' || isGroupedControl) { row.setAttribute('data-group-index', this.getGroupManager().getGroupIndex(group)) row.setAttribute('data-parent-group-index', this.getGroupManager().getGroupIndex(group.parentGroup)) } else { @@ -472,12 +471,12 @@ var editor = new $.oc.inspector.propertyEditors[type](this, property, cell, group) if (editor.isGroupedEditor()) { - property.groupedControl = true +// property.groupedControl = true $.oc.foundation.element.addClass(dataTable, 'has-groups') $.oc.foundation.element.addClass(row, 'control-group') - this.applyGroupIndexAttribute(property, row, editor.group) + this.applyGroupIndexAttribute(property, row, editor.group, true) this.buildGroupExpandControl(row.querySelector('span.title-element'), property, true, editor.hasChildSurface(), editor.group) if (cell.children.length == 0) { diff --git a/modules/system/assets/ui/less/inspector.less b/modules/system/assets/ui/less/inspector.less index b00566466..ff2eb9bbb 100644 --- a/modules/system/assets/ui/less/inspector.less +++ b/modules/system/assets/ui/less/inspector.less @@ -129,6 +129,7 @@ display: block; padding: 5px 12px 7px 12px; overflow: hidden; + min-height: 29px; text-overflow: ellipsis; color: @color-inspector-text; text-decoration: none; @@ -237,10 +238,12 @@ } } - &.dropdown div.external-param-editor-container div.external-editor { - height: 100%; - margin: 0; - bottom: auto; + &.dropdown, &.trigger-cell { + div.external-param-editor-container div.external-editor { + height: 100%; + margin: 0; + bottom: auto; + } } } diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css index d2c9169e5..65fcbe2c2 100644 --- a/modules/system/assets/ui/storm.css +++ b/modules/system/assets/ui/storm.css @@ -2445,7 +2445,7 @@ table.table.data tr.list-tree-level-10 td.list-cell-index-1{padding-left:125px} .inspector-fields td.text input[type=text]:-ms-input-placeholder{font-weight:normal !important;color:#b5babd} .inspector-fields td.text.active{background:#ffffff;border-left:1px solid #c8cccd} .inspector-fields td.trigger-cell{padding:0 !important} -.inspector-fields td.trigger-cell a.trigger{display:block;padding:5px 12px 7px 12px;overflow:hidden;text-overflow:ellipsis;color:#333333;text-decoration:none} +.inspector-fields td.trigger-cell a.trigger{display:block;padding:5px 12px 7px 12px;overflow:hidden;min-height:29px;text-overflow:ellipsis;color:#333333;text-decoration:none} .inspector-fields td.trigger-cell a.trigger.placeholder{color:#b5babd} .inspector-fields td.trigger-cell a.trigger .loading-indicator{background-color:#f2f2f2} .inspector-fields td.trigger-cell a.trigger .loading-indicator span{margin-top:-12px;right:10px;left:auto} @@ -2459,7 +2459,7 @@ table.table.data tr.list-tree-level-10 td.list-cell-index-1{padding-left:125px} .inspector-fields td div.external-param-editor-container div.external-editor div.controls input{position:absolute;display:block;border:none;width:100%;height:100%;left:0;top:0;padding-left:30px;padding-right:12px;background:transparent} .inspector-fields td div.external-param-editor-container.editor-visible div.external-editor div.controls input{background:#f2f2f2} .inspector-fields td.active div.external-param-editor-container div.external-editor div.controls input{background:white} -.inspector-fields td.dropdown div.external-param-editor-container div.external-editor{height:100%;margin:0;bottom:auto} +.inspector-fields td.dropdown div.external-param-editor-container div.external-editor,.inspector-fields td.trigger-cell div.external-param-editor-container div.external-editor{height:100%;margin:0;bottom:auto} .inspector-fields th{font-weight:500} .inspector-fields th > div{position:relative} .inspector-fields th > div > div{white-space:nowrap;padding-right:10px;text-overflow:ellipsis;overflow:hidden;width:100%}