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

Merged Inspector files to the Storm library. Minor fixes in the dynamic option editors. Implemented support for all events of the old Inspector.

This commit is contained in:
alekseybobkov 2015-10-14 20:21:02 -07:00
parent 6ddc366808
commit 082c536372
14 changed files with 2189 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
modules/system/assets/ui/js/inspector.editor.autocomplete.js
View File

@ -135,6 +135,9 @@
$.oc.foundation.element.addClass(container, 'loading-indicator-container size-small')
this.showLoadingIndicator()
data['inspectorProperty'] = this.propertyDefinition.property
data['inspectorClassName'] = this.inspector.options.inspectorClass
$form.request('onInspectableGetOptions', {
data: data,
})

3
modules/system/assets/ui/js/inspector.editor.object.js
View File

@ -34,7 +34,8 @@
inspectorContainer = document.createElement('div'),
options = {
enableExternalParameterEditor: false,
onChange: this.proxy(this.onInspectorDataChange)
onChange: this.proxy(this.onInspectorDataChange),
inspectorClass: this.inspector.options.inspectorClass
},
values = this.inspector.getPropertyValue(this.propertyDefinition.property)

3
modules/system/assets/ui/js/inspector.editor.objectlist.js
View File

@ -292,7 +292,8 @@
values = $.parseJSON(dataStr),
options = {
enableExternalParameterEditor: false,
onChange: this.proxy(this.onInspectorDataChange)
onChange: this.proxy(this.onInspectorDataChange),
inspectorClass: this.inspector.options.inspectorClass
}
this.currentRowInspector = new $.oc.inspector.surface(inspectorContainer, properties, values,

3
modules/system/assets/ui/js/inspector.editor.set.js
View File

@ -159,6 +159,9 @@
$.oc.foundation.element.addClass(link, 'loading-indicator-container size-small')
this.showLoadingIndicator()
data['inspectorProperty'] = this.propertyDefinition.property
data['inspectorClassName'] = this.inspector.options.inspectorClass
$form.request('onInspectableGetOptions', {
data: data,
})

13
modules/system/assets/ui/js/inspector.manager.js
View File

@ -83,7 +83,7 @@
}
else {
// If the container is already in use, apply values to the inspectable elements
if (!this.applyValuesFromContainer($container)) {
if (!this.applyValuesFromContainer($container) || !this.containerHidingAllowed($container)) {
return
}
@ -128,6 +128,17 @@
return true
}
InspectorManager.prototype.containerHidingAllowed = function($container) {
var allowedEvent = $.Event('beforeContainerHide.oc.inspector')
$container.trigger(allowedEvent)
if (allowedEvent.isDefaultPrevented()) {
return false
}
return true
}
InspectorManager.prototype.onInspectableClicked = function(ev) {
var $element = $(ev.currentTarget)

4
modules/system/assets/ui/js/inspector.surface.js
View File

@ -821,6 +821,10 @@
return true
}
Surface.prototype.hasChanges = function() {
return !this.comparePropertyValues(this.originalValues, this.values)
}
// EVENT HANDLERS
//

75
modules/system/assets/ui/js/inspector.wrapper.base.js
View File

@ -21,8 +21,19 @@
var BaseWrapper = function($element, sourceWrapper, options) {
this.$element = $element
this.options = $.extend({}, BaseWrapper.DEFAULTS, typeof options == 'object' && options)
this.switched = false
Base.call(this)
if (!sourceWrapper) {
this.surface = surface
if (!this.triggerShowingAndInit()) {
// this.init() is called inside triggerShowing()
return
}
this.surface = null
this.title = null
this.description = null
}
@ -32,13 +43,9 @@
this.description = sourceWrapper.description
sourceWrapper = null
this.init()
}
this.options = $.extend({}, BaseWrapper.DEFAULTS, typeof options == 'object' && options)
this.switched = false
Base.call(this)
this.init()
}
BaseWrapper.prototype = Object.create(BaseProto)
@ -48,6 +55,8 @@
if (!this.switched) {
this.$element.removeClass('inspector-open')
this.setInspectorVisibleFlag(false)
this.$element.trigger('hidden.oc.inspector')
}
this.surface = null
@ -104,9 +113,9 @@
}
BaseWrapper.prototype.initSurface = function(containerElement, properties, values) {
var options = {
enableExternalParameterEditor: this.isExternalParametersEditorEnabled()
}
var options = this.$element.data() || {}
options.enableExternalParameterEditor = this.isExternalParametersEditorEnabled()
this.surface = new $.oc.inspector.surface(
containerElement,
@ -203,6 +212,10 @@
this.$element.attr('data-property-' + property, value)
}
}
if (this.surface.hasChanges()) {
this.$element.trigger('change')
}
}
//
@ -210,7 +223,7 @@
//
BaseWrapper.prototype.loadConfiguration = function() {
var $configurationField = this.$element.find('input[data-inspector-config]'),
var configString = this.$element.data('inspector-config'),
result = {
properties: {},
title: null,
@ -220,6 +233,15 @@
result.title = this.$element.data('inspector-title')
result.description = this.$element.data('inspector-description')
if (configString !== undefined) {
result.properties = this.parseConfiguration(configString)
this.configurationLoaded(result)
return
}
var $configurationField = this.$element.find('input[data-inspector-config]')
if ($configurationField.length > 0) {
result.properties = this.parseConfiguration($configurationField.val())
@ -280,6 +302,37 @@
this.configurationLoaded(result)
}
//
// Events
//
BaseWrapper.prototype.triggerShowingAndInit = function() {
var e = $.Event('showing.oc.inspector')
this.$element.trigger(e, [{callback: this.proxy(this.init)}])
if (e.isDefaultPrevented()) {
this.$element = null
return false
}
if (!e.isPropagationStopped()) {
this.init()
}
}
BaseWrapper.prototype.triggerHiding = function() {
var hidingEvent = $.Event('hiding.oc.inspector'),
values = this.surface.getValues()
this.$element.trigger(hidingEvent, [{values: values}])
if (hidingEvent.isDefaultPrevented()) {
return false
}
return true
}
BaseWrapper.DEFAULTS = {
containerSupported: false
}

15
modules/system/assets/ui/js/inspector.wrapper.container.js
View File

@ -169,12 +169,15 @@
InspectorContainer.prototype.registerHandlers = function() {
this.options.container.on('apply.oc.inspector', this.proxy(this.onApplyValues))
this.options.container.on('beforeContainerHide.oc.inspector', this.proxy(this.onBeforeHide))
}
InspectorContainer.prototype.unregisterHandlers = function() {
var $layout = $(this.getLayout())
this.options.container.off('apply.oc.inspector', this.proxy(this.onApplyValues))
this.options.container.off('beforeContainerHide.oc.inspector', this.proxy(this.onBeforeHide))
$layout.off('dispose-control', this.proxy(this.dispose))
$layout.off('click', 'span.close', this.proxy(this.onClose))
$layout.off('click', 'span.detach', this.proxy(this.onDetach))
@ -196,12 +199,24 @@
}
}
InspectorContainer.prototype.onBeforeHide = function(ev) {
if (!this.triggerHiding()) {
ev.preventDefault()
return false
}
}
InspectorContainer.prototype.onClose = function(ev) {
if (!this.validateAndApply()) {
ev.preventDefault()
return false
}
if (!this.triggerHiding()) {
ev.preventDefault()
return false
}
this.surface.dispose()
this.dispose()

6
modules/system/assets/ui/js/inspector.wrapper.popup.js
View File

@ -157,11 +157,7 @@
return false
}
var hidingEvent = $.Event('hiding.oc.inspector'),
values = this.surface.getValues()
this.$element.trigger(hidingEvent, [{values: values}])
if (hidingEvent.isDefaultPrevented()) {
if (!this.triggerHiding()) {
ev.preventDefault()
return false
}

177
modules/system/assets/ui/less/inspector.less
View File

@ -122,6 +122,33 @@
}
}
&.autocomplete {
padding: 0;
.autocomplete-container {
input[type=text] {
padding: 5px 12px;
}
ul.dropdown-menu {
background: white;
font-size: 12px;
li a {
padding: 5px 12px;
}
}
.loading-indicator {
span {
margin-top: -12px;
right: 10px;
left: auto;
}
}
}
}
&.trigger-cell {
padding: 0!important;
@ -419,6 +446,156 @@ div.control-popover {
}
}
.inspector-columns-editor {
min-height: 400px;
margin-bottom: 20px;
border-bottom: 1px solid #bdc3c7;
.items-column {
width: 250px;
}
.inspector-wrapper {
background: #f2f2f2; // Use @color-inspector-bg instead
border-left: 2px solid #bdc3c7;
}
.toolbar {
padding: 20px;
}
}
.inspector-table-list {
border-top: 1px solid #e2e2e2;
.user-select(none);
}
div.inspector-dictionary-container {
border: 1px solid #e0e0e0;
.values {
height: 300px;
}
table.headers {
width: 100%;
border: none;
td {
width: 50%;
padding: 7px 5px;
font-size: 13px;
text-transform: uppercase;
font-weight: 600;
color: #333333;
background: white;
border-bottom: 1px solid #e0e0e0;
&:first-child {
border-right: 1px solid #e0e0e0;
}
}
}
table.inspector-dictionary-table{
width: 100%;
border: none;
tbody tr {
td {
width: 50%;
padding: 0!important;
border-bottom: 1px solid #e0e0e0;
div {
border: 1px solid #fff;
}
&.active div {
border-color: #5fb6f5;
}
input {
width: 100%;
height: 100%;
display: block;
outline: none;
border: none;
padding: 7px 5px;
&:focus {
border: none;
outline: none;
}
}
&:first-child {
border-right: 1px solid #e0e0e0;
}
}
&:last-child td {
border-bottom: none;
}
}
}
}
.inspector-header {
background: #d35400;
padding: 14px 16px;
position: relative;
color: #ffffff;
h3 {
font-size: 14px;
font-weight: 600;
margin-top: 0;
margin-bottom: 0;
padding-right: 15px;
line-height: 130%;
}
p {
font-size: 13px;
font-weight: 100;
margin: 10px 0 0 0;
&:empty {
display: none;
}
}
span {
position: absolute;
top: 12px;
float: none;
color: #ffffff;
cursor: pointer;
.opacity(0.4);
&:hover {
.opacity(1);
color: #ffffff;
}
}
.detach {
right: 26px;
}
.close {
right: 11px;
font-size: 21px;
}
}
.inspector-container {
.control-scrollpad {
position: absolute;
}
}
.select2-dropdown {
&.ocInspectorDropdown {
font-size: 12px;

19
modules/system/assets/ui/less/popover.less
View File

@ -172,6 +172,25 @@ div.control-popover {
.opacity(1);
}
}
.inspector-move-to-container {
.opacity(0.4);
position: absolute;
top: 12px;
right: 26px;
float: none;
color: #ffffff;
cursor: pointer;
&:hover {
.opacity(1);
color: #ffffff;
}
&:before {
.transform(~'transform: rotate(270deg)');
}
}
}
&.placement-bottom .popover-head:before {

1824
modules/system/assets/ui/storm-min.js vendored
View File

File diff suppressed because it is too large Load Diff

35
modules/system/assets/ui/storm.css
View File

@ -1205,6 +1205,9 @@ div.control-popover .popover-head p{font-size:13px;font-weight:100;margin:10px 0
div.control-popover .popover-head p:empty{display:none}
div.control-popover .popover-head .close{float:none;position:absolute;right:11px;top:12px;color:#ffffff;outline:none;opacity:0.4;filter:alpha(opacity=40)}
div.control-popover .popover-head .close:hover{opacity:1;filter:alpha(opacity=100)}
div.control-popover .popover-head .inspector-move-to-container{opacity:0.4;filter:alpha(opacity=40);position:absolute;top:12px;right:26px;float:none;color:#ffffff;cursor:pointer}
div.control-popover .popover-head .inspector-move-to-container:hover{opacity:1;filter:alpha(opacity=100);color:#ffffff}
div.control-popover .popover-head .inspector-move-to-container:before{-webkit-transform:transform:rotate(270deg);-ms-transform:transform:rotate(270deg);transform:transform:rotate(270deg)}
div.control-popover.placement-bottom .popover-head:before{content:'';display:block;width:0;height:0;border-left:7.5px solid transparent;border-right:7.5px solid transparent;border-bottom:8px solid #d35400;left:15px;top:-8px}
div.control-popover.placement-left .popover-head:before{content:'';display:block;width:0;height:0;border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;border-left:8px solid #d35400;right:-8px;top:7px}
div.control-popover.placement-right .popover-head:before{content:'';display:block;width:0;height:0;border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;border-right:8px solid #d35400;left:-8px;top:7px}
@ -2445,6 +2448,11 @@ table.table.data tr.list-tree-level-10 td.list-cell-index-1{padding-left:125px}
.inspector-fields td.text input[type=text]::-moz-placeholder{font-weight:normal !important;color:#b5babd}
.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.autocomplete{padding:0}
.inspector-fields td.autocomplete .autocomplete-container input[type=text]{padding:5px 12px}
.inspector-fields td.autocomplete .autocomplete-container ul.dropdown-menu{background:white;font-size:12px}
.inspector-fields td.autocomplete .autocomplete-container ul.dropdown-menu li a{padding:5px 12px}
.inspector-fields td.autocomplete .autocomplete-container .loading-indicator span{margin-top:-12px;right:10px;left:auto}
.inspector-fields td.trigger-cell{padding:0 !important}
.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}
@ -2489,6 +2497,33 @@ div.control-popover.control-inspector > div:before,div.control-popover.control-i
div.control-popover.hero .inspector-fields th,div.control-popover.hero .inspector-fields td{padding:9px 12px;font-weight:600 !important;font-size:13px}
div.control-popover.hero .inspector-fields td{font-weight:400 !important}
div.control-popover.hero .inspector-fields div.custom-select.select2-container .select2-selection{height:36px;line-height:36px}
.inspector-columns-editor{min-height:400px;margin-bottom:20px;border-bottom:1px solid #bdc3c7}
.inspector-columns-editor .items-column{width:250px}
.inspector-columns-editor .inspector-wrapper{background:#f2f2f2;border-left:2px solid #bdc3c7}
.inspector-columns-editor .toolbar{padding:20px}
.inspector-table-list{border-top:1px solid #e2e2e2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
div.inspector-dictionary-container{border:1px solid #e0e0e0}
div.inspector-dictionary-container .values{height:300px}
div.inspector-dictionary-container table.headers{width:100%;border:none}
div.inspector-dictionary-container table.headers td{width:50%;padding:7px 5px;font-size:13px;text-transform:uppercase;font-weight:600;color:#333333;background:white;border-bottom:1px solid #e0e0e0}
div.inspector-dictionary-container table.headers td:first-child{border-right:1px solid #e0e0e0}
div.inspector-dictionary-container table.inspector-dictionary-table{width:100%;border:none}
div.inspector-dictionary-container table.inspector-dictionary-table tbody tr td{width:50%;padding:0 !important;border-bottom:1px solid #e0e0e0}
div.inspector-dictionary-container table.inspector-dictionary-table tbody tr td div{border:1px solid #fff}
div.inspector-dictionary-container table.inspector-dictionary-table tbody tr td.active div{border-color:#5fb6f5}
div.inspector-dictionary-container table.inspector-dictionary-table tbody tr td input{width:100%;height:100%;display:block;outline:none;border:none;padding:7px 5px}
div.inspector-dictionary-container table.inspector-dictionary-table tbody tr td input:focus{border:none;outline:none}
div.inspector-dictionary-container table.inspector-dictionary-table tbody tr td:first-child{border-right:1px solid #e0e0e0}
div.inspector-dictionary-container table.inspector-dictionary-table tbody tr:last-child td{border-bottom:none}
.inspector-header{background:#d35400;padding:14px 16px;position:relative;color:#ffffff}
.inspector-header h3{font-size:14px;font-weight:600;margin-top:0;margin-bottom:0;padding-right:15px;line-height:130%}
.inspector-header p{font-size:13px;font-weight:100;margin:10px 0 0 0}
.inspector-header p:empty{display:none}
.inspector-header span{position:absolute;top:12px;float:none;color:#ffffff;cursor:pointer;opacity:0.4;filter:alpha(opacity=40)}
.inspector-header span:hover{opacity:1;filter:alpha(opacity=100);color:#ffffff}
.inspector-header .detach{right:26px}
.inspector-header .close{right:11px;font-size:21px}
.inspector-container .control-scrollpad{position:absolute}
.select2-dropdown.ocInspectorDropdown{font-size:12px;-webkit-border-radius:0 !important;-moz-border-radius:0 !important;border-radius:0 !important;border:none !important}
.select2-dropdown.ocInspectorDropdown > .select2-results > .select2-results__options{font-size:12px}
.select2-dropdown.ocInspectorDropdown > .select2-results > li > div{padding:5px 12px 5px}

29
modules/system/assets/ui/storm.js
View File

@ -21,4 +21,33 @@
=require js/input.js
=require js/drag.js
=require js/tab.js
=require js/inspector.surface.js
=require js/inspector.manager.js
=require js/inspector.wrapper.base.js
=require js/inspector.wrapper.popup.js
=require js/inspector.wrapper.container.js
=require js/inspector.groups.js
=require js/inspector.engine.js
=require js/inspector.editor.base.js
=require js/inspector.editor.string.js
=require js/inspector.editor.checkbox.js
=require js/inspector.editor.dropdown.js
=require js/inspector.editor.popupbase.js
=require js/inspector.editor.text.js
=require js/inspector.editor.set.js
=require js/inspector.editor.objectlist.js
=require js/inspector.editor.object.js
=require js/inspector.editor.stringlist.js
=require js/inspector.editor.dictionary.js
=require js/inspector.editor.autocomplete.js
=require js/inspector.helpers.js
=require js/inspector.validationset.js
=require js/inspector.validator.base.js
=require js/inspector.validator.basenumber.js
=require js/inspector.validator.required.js
=require js/inspector.validator.regex.js
=require js/inspector.validator.integer.js
=require js/inspector.validator.float.js
=require js/inspector.validator.length.js
=require js/inspector.externalparametereditor.js
*/