tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Refactor Style Manager Property views

pull/330/head
Artur Arseniev 9 years ago
parent
8bdbb718c8
commit
d153bd8097
11 changed files with 93 additions and 130 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      index.html
  2. 2
      src/style_manager/model/PropertyFactory.js
  3. 3
      src/style_manager/view/PropertiesView.js
  4. 17
      src/style_manager/view/PropertyColorView.js
  5. 13
      src/style_manager/view/PropertyCompositeView.js
  6. 11
      src/style_manager/view/PropertyFileView.js
  7. 26
      src/style_manager/view/PropertyIntegerView.js
  8. 19
      src/style_manager/view/PropertyRadioView.js
  9. 17
      src/style_manager/view/PropertySelectView.js
  10. 34
      src/style_manager/view/PropertyStackView.js
  11. 79
      src/style_manager/view/PropertyView.js

2
index.html
View File

@ -1324,7 +1324,7 @@
var model = view.model; var model = view.model;
let targetValue = view.getTargetValue({ignoreDefault: 1}); let targetValue = view.getTargetValue({ignoreDefault: 1});
let computedValue = view.getComputedValue(); let computedValue = view.getComputedValue();
let defaultValue = view.getDefaultValue(); let defaultValue = view.model.getDefaultValue();
//console.log('Style of ', model.get('property'), 'Target: ', targetValue, 'Computed:', computedValue, 'Default:', defaultValue); //console.log('Style of ', model.get('property'), 'Target: ', targetValue, 'Computed:', computedValue, 'Default:', defaultValue);
}); });

2
src/style_manager/model/PropertyFactory.js
View File

@ -121,7 +121,7 @@ module.exports = () => ({
obj.defaults = 1; obj.defaults = 1;
break; break;
case 'box-shadow-blur': case 'box-shadow-blur':
obj.defaults = 5; obj.defaults = '5px';
break; break;
case 'min-height': case 'min-width': case 'max-height': case 'max-width': case 'min-height': case 'min-width': case 'max-height': case 'max-width':
case 'width': case 'height': case 'width': case 'height':

3
src/style_manager/view/PropertiesView.js
View File

@ -39,7 +39,8 @@ module.exports = Backbone.View.extend({
view.customValue = this.customValue; view.customValue = this.customValue;
} }
fragment.appendChild(view.render().el); view.render();
fragment.appendChild(view.el);
}); });
this.$el.append(fragment); this.$el.append(fragment);

17
src/style_manager/view/PropertyColorView.js
View File

@ -1,15 +1,17 @@
var Backbone = require('backbone'); var Backbone = require('backbone');
var PropertyView = require('./PropertyView');
var InputColor = require('domain_abstract/ui/InputColor'); var InputColor = require('domain_abstract/ui/InputColor');
module.exports = PropertyView.extend({ module.exports = require('./PropertyIntegerView').extend({
initialize(options) { init() {
PropertyView.prototype.initialize.apply(this, arguments);
this.className += ` ${this.pfx}file`; this.className += ` ${this.pfx}file`;
}, },
renderInput() { setValue(value) {
this.input.setValue(value, {silent: 1});
},
onRender() {
if (!this.input) { if (!this.input) {
var inputColor = new InputColor({ var inputColor = new InputColor({
target: this.target, target: this.target,
@ -21,11 +23,6 @@ module.exports = PropertyView.extend({
this.$input = this.input.inputEl; this.$input = this.input.inputEl;
this.$color = this.input.colorEl; this.$color = this.input.colorEl;
} }
this.setValue(this.componentValue);
},
setValue(value) {
this.input.setValue(value, {silent: 1});
}, },
}); });

13
src/style_manager/view/PropertyCompositeView.js
View File

@ -1,22 +1,17 @@
var Backbone = require('backbone'); const PropertyView = require('./PropertyView');
var PropertyView = require('./PropertyView');
module.exports = PropertyView.extend({ module.exports = PropertyView.extend({
templateField() { templateInput() {
const pfx = this.pfx; const pfx = this.pfx;
const ppfx = this.ppfx;
return ` return `
<div class="${pfx}field ${pfx}composite"> <div class="${pfx}field ${pfx}composite">
<span id="${pfx}input-holder"></span> <span id="${pfx}input-holder"></span>
</div> </div>
<div style="clear:both"></div>
`; `;
}, },
initialize(o) { init() {
PropertyView.prototype.initialize.apply(this, arguments);
this.config = o.config || {};
this.className = this.className + ' '+ this.pfx +'composite'; this.className = this.className + ' '+ this.pfx +'composite';
}, },
@ -28,7 +23,7 @@ module.exports = PropertyView.extend({
/** /**
* Renders input * Renders input
* */ * */
renderInput() { onRender() {
var model = this.model; var model = this.model;
var props = model.get('properties') || []; var props = model.get('properties') || [];
var self = this; var self = this;

11
src/style_manager/view/PropertyFileView.js
View File

@ -3,7 +3,7 @@ var PropertyView = require('./PropertyView');
module.exports = PropertyView.extend({ module.exports = PropertyView.extend({
templateField() { templateInput() {
const pfx = this.pfx; const pfx = this.pfx;
const ppfx = this.ppfx; const ppfx = this.ppfx;
const assetsLabel = this.config.assetsLabel || 'Images'; const assetsLabel = this.config.assetsLabel || 'Images';
@ -22,12 +22,10 @@ module.exports = PropertyView.extend({
<div id="${pfx}close">&Cross;</div> <div id="${pfx}close">&Cross;</div>
</div> </div>
</div> </div>
<div style="clear:both"></div>
`; `;
}, },
initialize(options) { init() {
PropertyView.prototype.initialize.apply(this, arguments);
this.assets = this.target.get('assets'); this.assets = this.target.get('assets');
this.modal = this.target.get('Modal'); this.modal = this.target.get('Modal');
this.am = this.target.get('AssetManager'); this.am = this.target.get('AssetManager');
@ -37,8 +35,7 @@ module.exports = PropertyView.extend({
this.delegateEvents(); this.delegateEvents();
}, },
/** @inheritdoc */ onRender() {
renderInput() {
if (!this.$input) { if (!this.$input) {
this.$input = $('<input>', {placeholder: this.model.getDefaultValue(), type: 'text' }); this.$input = $('<input>', {placeholder: this.model.getDefaultValue(), type: 'text' });
} }
@ -56,7 +53,7 @@ module.exports = PropertyView.extend({
setValue(value, f) { setValue(value, f) {
PropertyView.prototype.setValue.apply(this, arguments); PropertyView.prototype.setValue.apply(this, arguments);
this.setPreviewView(value && value != this.getDefaultValue()); this.setPreviewView(value && value != this.model.getDefaultValue());
this.setPreview(value); this.setPreview(value);
}, },

26
src/style_manager/view/PropertyIntegerView.js
View File

@ -1,16 +1,27 @@
var PropertyView = require('./PropertyView');
var InputNumber = require('domain_abstract/ui/InputNumber'); var InputNumber = require('domain_abstract/ui/InputNumber');
module.exports = PropertyView.extend({ module.exports = require('./PropertyView').extend({
initialize(options) { template(model) {
PropertyView.prototype.initialize.apply(this, arguments); const pfx = this.pfx;
return `
<div class="${pfx}label">
${this.templateLabel(model)}
</div>
`;
},
init() {
const model = this.model; const model = this.model;
this.listenTo(model, 'change:unit', this.modelValueChanged); this.listenTo(model, 'change:unit', this.modelValueChanged);
this.listenTo(model, 'el:change', this.elementUpdated); this.listenTo(model, 'el:change', this.elementUpdated);
}, },
renderInput() { setValue(value) {
this.input.setValue(value, {silent: 1});
},
onRender() {
if (!this.input) { if (!this.input) {
var inputNumber = new InputNumber({ var inputNumber = new InputNumber({
model: this.model, model: this.model,
@ -21,11 +32,6 @@ module.exports = PropertyView.extend({
this.$input = this.input.inputEl; this.$input = this.input.inputEl;
this.$unit = this.input.unitEl; this.$unit = this.input.unitEl;
} }
this.setValue(this.componentValue);
},
setValue(value) {
this.input.setValue(value, {silent: 1});
}, },
}); });

19
src/style_manager/view/PropertyRadioView.js
View File

@ -1,28 +1,22 @@
var Backbone = require('backbone'); module.exports = require('./PropertyView').extend({
var PropertyView = require('./PropertyView');
module.exports = PropertyView.extend({ templateInput() {
templateField() {
const pfx = this.pfx; const pfx = this.pfx;
const ppfx = this.ppfx; const ppfx = this.ppfx;
return ` return `
<div class="${ppfx}field ${ppfx}field-radio"> <div class="${ppfx}field ${ppfx}field-radio">
<span id="${pfx}input-holder"></span> <span id="${pfx}input-holder"></span>
</div> </div>
<div style="clear:both"></div>
`; `;
}, },
initialize(options) { init() {
PropertyView.prototype.initialize.apply(this, arguments);
const model = this.model; const model = this.model;
this.list = model.get('list') || model.get('options') || []; this.list = model.get('list') || model.get('options') || [];
this.className = this.className + ' '+ this.pfx +'list'; this.className = this.className + ' '+ this.pfx +'list';
}, },
/** @inheritdoc */ onRender() {
renderInput() {
var pfx = this.pfx; var pfx = this.pfx;
var ppfx = this.ppfx; var ppfx = this.ppfx;
var itemCls = ppfx + 'radio-item-label'; var itemCls = ppfx + 'radio-item-label';
@ -60,7 +54,8 @@ module.exports = PropertyView.extend({
/** @inheritdoc */ /** @inheritdoc */
setValue(value) { setValue(value) {
var v = this.model.get('value') || this.model.getDefaultValue(); const model = this.model;
var v = model.get('value') || model.getDefaultValue();
if(value) if(value)
v = value; v = value;
@ -68,7 +63,7 @@ module.exports = PropertyView.extend({
if(this.$input) if(this.$input)
this.$input.filter('[value="'+v+'"]').prop('checked', true); this.$input.filter('[value="'+v+'"]').prop('checked', true);
this.model.set({value: v},{silent: true}); model.set({value: v}, {silent: true});
}, },
}); });

17
src/style_manager/view/PropertySelectView.js
View File

@ -1,9 +1,6 @@
var Backbone = require('backbone'); module.exports = require('./PropertyView').extend({
var PropertyView = require('./PropertyView');
module.exports = PropertyView.extend({ templateInput() {
templateField() {
const pfx = this.pfx; const pfx = this.pfx;
const ppfx = this.ppfx; const ppfx = this.ppfx;
return ` return `
@ -13,20 +10,17 @@ module.exports = PropertyView.extend({
<div class="${ppfx}d-s-arrow"></div> <div class="${ppfx}d-s-arrow"></div>
</div> </div>
</div> </div>
<div style="clear:both"></div>
`; `;
}, },
initialize(options) { init() {
PropertyView.prototype.initialize.apply(this, arguments);
const model = this.model; const model = this.model;
this.list = model.get('list') || model.get('options') || []; this.list = model.get('list') || model.get('options') || [];
}, },
/** @inheritdoc */ onRender() {
renderInput() {
var pfx = this.pfx; var pfx = this.pfx;
if(!this.$input){ if (!this.$input) {
var input = '<select>'; var input = '<select>';
if (this.list && this.list.length) { if (this.list && this.list.length) {
@ -43,7 +37,6 @@ module.exports = PropertyView.extend({
this.$input = $(this.input); this.$input = $(this.input);
this.$el.find('#'+ pfx +'input-holder').html(this.$input); this.$el.find('#'+ pfx +'input-holder').html(this.$input);
} }
this.setValue(this.componentValue, 0);
}, },
}); });

34
src/style_manager/view/PropertyStackView.js
View File

@ -5,7 +5,7 @@ var LayersView = require('./LayersView');
module.exports = PropertyCompositeView.extend({ module.exports = PropertyCompositeView.extend({
templateField() { templateInput() {
const pfx = this.pfx; const pfx = this.pfx;
const ppfx = this.ppfx; const ppfx = this.ppfx;
return ` return `
@ -13,12 +13,10 @@ module.exports = PropertyCompositeView.extend({
<button type="button" id="${pfx}add">+</button> <button type="button" id="${pfx}add">+</button>
<span id="${pfx}input-holder"></span> <span id="${pfx}input-holder"></span>
</div> </div>
<div style="clear:both"></div>
`; `;
}, },
initialize(o) { init() {
PropertyCompositeView.prototype.initialize.apply(this, arguments);
const model = this.model; const model = this.model;
const pfx = this.pfx; const pfx = this.pfx;
model.set('stackIndex', null); model.set('stackIndex', null);
@ -116,6 +114,7 @@ module.exports = PropertyCompositeView.extend({
valueOnIndex(index, propView) { valueOnIndex(index, propView) {
let result; let result;
const model = this.model; const model = this.model;
const propModel = propView.model;
const layerIndex = model.get('stackIndex'); const layerIndex = model.get('stackIndex');
// If detached the value in this case is stacked, eg. substack-prop: 1px, 2px, 3px... // If detached the value in this case is stacked, eg. substack-prop: 1px, 2px, 3px...
@ -123,8 +122,8 @@ module.exports = PropertyCompositeView.extend({
var targetValue = propView.getTargetValue({ignoreCustomValue: 1}); var targetValue = propView.getTargetValue({ignoreCustomValue: 1});
var valist = (targetValue + '').split(','); var valist = (targetValue + '').split(',');
result = valist[layerIndex]; result = valist[layerIndex];
result = result ? result.trim() : propView.getDefaultValue(); result = result ? result.trim() : propModel.getDefaultValue();
result = propView.model.parseValue(result); result = propModel.parseValue(result);
} else { } else {
var aStack = this.getStackValues(); var aStack = this.getStackValues();
var strVar = aStack[layerIndex]; var strVar = aStack[layerIndex];
@ -174,14 +173,15 @@ module.exports = PropertyCompositeView.extend({
const layers = this.getLayers(); const layers = this.getLayers();
const layer = layers.add({name: 'New'}); const layer = layers.add({name: 'New'});
const index = layers.indexOf(layer); const index = layers.indexOf(layer);
layer.set('value', this.model.getDefaultValue(1)); const model = this.model;
layer.set('value', model.getDefaultValue(1));
// In detached mode inputValueChanged will add new 'layer value' // In detached mode inputValueChanged will add new 'layer value'
// to all subprops // to all subprops
this.inputValueChanged(); this.inputValueChanged();
// This will set subprops with a new default values // This will set subprops with a new default values
this.model.set('stackIndex', index); model.set('stackIndex', index);
} }
}, },
@ -226,12 +226,6 @@ module.exports = PropertyCompositeView.extend({
return this; return this;
}, },
/** @inheritdoc */
renderInput(...args) {
PropertyCompositeView.prototype.renderInput.apply(this, args);
this.refreshLayers();
},
/** /**
* Returns array suitale for layers from target style * Returns array suitale for layers from target style
* Only for detached stacks * Only for detached stacks
@ -280,7 +274,7 @@ module.exports = PropertyCompositeView.extend({
a = this.getLayersFromTarget(); a = this.getLayersFromTarget();
} else { } else {
var v = this.getTargetValue(); var v = this.getTargetValue();
var vDef = this.getDefaultValue(); var vDef = this.model.getDefaultValue();
v = v == vDef ? '' : v; v = v == vDef ? '' : v;
if (v) { if (v) {
// Remove spaces inside functions: // Remove spaces inside functions:
@ -314,14 +308,10 @@ module.exports = PropertyCompositeView.extend({
this.model.set({stackIndex: null}, {silent: true}); this.model.set({stackIndex: null}, {silent: true});
}, },
render() { onRender(...args) {
const el = this.el; PropertyCompositeView.prototype.onRender.apply(this, args);
el.innerHTML = this.template(this.model); this.refreshLayers();
this.renderInput();
this.renderLayers(); this.renderLayers();
this.$el.attr('class', this.className);
this.updateStatus();
return this;
}, },
}); });

79
src/style_manager/view/PropertyView.js
View File

@ -4,28 +4,31 @@ module.exports = Backbone.View.extend({
template(model) { template(model) {
const pfx = this.pfx; const pfx = this.pfx;
const name = model.get('name');
const icon = model.get('icon');
const info = model.get('info');
return ` return `
<div class="${pfx}label"> <div class="${pfx}label">
<span class="${pfx}icon ${icon}" title="${info}"> ${this.templateLabel(model)}
${name}
</span>
<b class="${pfx}clear">&Cross;</b>
</div> </div>
${this.templateField(model)} ${this.templateInput(model)}
`; `;
}, },
templateField() { templateLabel(model) {
const pfx = this.pfx; const pfx = this.pfx;
const ppfx = this.ppfx; const icon = model.get('icon');
const info = model.get('info');
return `
<span class="${pfx}icon ${icon}" title="${info}">
${model.get('name')}
</span>
<b class="${pfx}clear">&Cross;</b>
`;
},
templateInput(model) {
return ` return `
<div class="${ppfx}field"> <div class="${this.ppfx}field">
<span id="${pfx}input-holder"></span> <input placeholder="${model.getDefaultValue()}"/>
</div> </div>
<div style="clear:both"></div>
`; `;
}, },
@ -33,7 +36,7 @@ module.exports = Backbone.View.extend({
'change': 'inputValueChanged' 'change': 'inputValueChanged'
}, },
initialize(o) { initialize(o = {}) {
this.config = o.config || {}; this.config = o.config || {};
this.em = this.config.em; this.em = this.config.em;
this.pfx = this.config.stylePrefix || ''; this.pfx = this.config.stylePrefix || '';
@ -63,8 +66,16 @@ module.exports = Backbone.View.extend({
this.listenTo(model, 'change:status', this.updateStatus); this.listenTo(model, 'change:status', this.updateStatus);
this.events[`click .${pfx}clear`] = 'clear'; this.events[`click .${pfx}clear`] = 'clear';
this.delegateEvents(); this.delegateEvents();
const init = this.init && this.init.bind(this);
init && init();
}, },
/**
* Triggers when the status changes. The status indicates if the value of
* the proprerty is changed or inherited
* @private
*/
updateStatus() { updateStatus() {
const status = this.model.get('status'); const status = this.model.get('status');
const pfx = this.pfx; const pfx = this.pfx;
@ -92,7 +103,7 @@ module.exports = Backbone.View.extend({
}, },
/** /**
* Clear the property * Clear the property from the target
*/ */
clear() { clear() {
const target = this.getTargetModel(); const target = this.getTargetModel();
@ -157,14 +168,14 @@ module.exports = Backbone.View.extend({
return; return;
} }
const config = this.config;
const em = config.em;
const model = this.model;
let value = ''; let value = '';
let status = ''; let status = '';
let targetValue = this.getTargetValue({ignoreDefault: 1}); let targetValue = this.getTargetValue({ignoreDefault: 1});
let defaultValue = this.getDefaultValue(); let defaultValue = model.getDefaultValue();
let computedValue = this.getComputedValue(); let computedValue = this.getComputedValue();
const config = this.config;
const em = config.em;
const model = this.model;
if (targetValue) { if (targetValue) {
value = targetValue; value = targetValue;
@ -240,7 +251,7 @@ module.exports = Backbone.View.extend({
result = model.parseValue(result); result = model.parseValue(result);
if (!result && !opts.ignoreDefault) { if (!result && !opts.ignoreDefault) {
result = this.getDefaultValue(); result = model.getDefaultValue();
} }
if (typeof customFetchValue == 'function' && !opts.ignoreCustomValue) { if (typeof customFetchValue == 'function' && !opts.ignoreCustomValue) {
@ -255,15 +266,6 @@ module.exports = Backbone.View.extend({
return result; return result;
}, },
/**
* Returns default value
* @return {String}
* @private
*/
getDefaultValue() {
return this.model.getDefaultValue();
},
/** /**
* Returns computed value * Returns computed value
* @return {String} * @return {String}
@ -411,20 +413,6 @@ module.exports = Backbone.View.extend({
this.model.set('visible', 0); this.model.set('visible', 0);
}, },
/**
* Renders input, to override
* */
renderInput() {
if(!this.$input){
this.$input = $('<input>', {
placeholder: this.model.getDefaultValue(),
type: 'text'
});
this.$el.find(this.inputHolderId).html(this.$input);
}
this.setValue(this.componentValue, 0);
},
/** /**
* Clean input * Clean input
* */ * */
@ -436,9 +424,10 @@ module.exports = Backbone.View.extend({
const el = this.el; const el = this.el;
el.innerHTML = this.template(this.model); el.innerHTML = this.template(this.model);
el.className = this.className; el.className = this.className;
this.renderInput();
this.updateStatus(); this.updateStatus();
return this;
const onRender = this.onRender && this.onRender.bind(this);
onRender && onRender();
}, },
}); });

Write Preview
Loading…
Cancel
Save