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

Update Layers view

up-style-manager
Artur Arseniev 4 years ago
parent
19224a7ab5
commit
f8ff7bb62f
3 changed files with 104 additions and 153 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 97
      src/style_manager/view/LayerView.js
  2. 154
      src/style_manager/view/LayersView.js
  3. 6
      src/style_manager/view/PropertyStackView.js

97
src/style_manager/view/LayerView.js
View File

@ -1,17 +1,19 @@
import { keys } from 'underscore';
import { View } from 'backbone';
import { keys } from 'underscore';
export default View.extend({
events: {
click: 'select',
'click [data-close-layer]': 'removeItem',
'mousedown [data-move-layer]': 'initSorter',
'touchstart [data-move-layer]': 'initSorter',
},
export default class LayersView extends View {
events() {
return {
click: 'select',
'click [data-close-layer]': 'removeItem',
'mousedown [data-move-layer]': 'initSorter',
'touchstart [data-move-layer]': 'initSorter',
};
}
template() {
const { pfx, ppfx } = this;
const icons = this.em?.getConfig('icons');
const { pfx, ppfx, em } = this;
const icons = em?.getConfig('icons');
const iconClose = icons?.close || '';
const iconMove = icons?.move || '';
@ -30,71 +32,55 @@ export default View.extend({
</div>
<div id="${pfx}inputs" data-properties></div>
`;
},
}
initialize(o = {}) {
const { model } = this;
this.stackModel = o.stackModel;
const config = o.config || {};
this.em = config.em;
this.config = config;
this.sorter = o.sorter;
this.pfx = config.stylePrefix || '';
this.ppfx = config.pStylePrefix || '';
this.propertyView = o.propertyView;
this.config = o.config || {};
this.em = this.config.em;
this.pfx = this.config.stylePrefix || '';
this.ppfx = this.config.pStylePrefix || '';
this.sorter = o.sorter || null;
this.propsConfig = o.propsConfig || {};
const pModel = this.propertyView.model;
this.listenTo(model, 'destroy remove', this.remove);
this.listenTo(pModel, 'change:selectedLayer', this.updateVisibility);
this.listenTo(model, 'change:values', this.updateLabel);
this.listenTo(pModel, 'change:selectedLayer', this.updateVisibility);
// For the sorter
model.view = this;
model.set({ droppable: 0, draggable: 1 });
this.$el.data('model', model);
},
}
initSorter() {
if (this.sorter) this.sorter.startSort(this.el);
},
this.sorter?.startSort(this.el);
}
removeItem(ev) {
ev && ev.stopPropagation();
this.model.remove();
},
}
select() {
this.model.select();
}
getPropertiesWrapper() {
if (!this.propsWrapEl) {
this.propsWrapEl = this.el.querySelector('[data-properties]');
}
if (!this.propsWrapEl) this.propsWrapEl = this.el.querySelector('[data-properties]');
return this.propsWrapEl;
},
}
getPreviewEl() {
if (!this.previewEl) {
this.previewEl = this.el.querySelector('[data-preview]');
}
if (!this.previewEl) this.previewEl = this.el.querySelector('[data-preview]');
return this.previewEl;
},
}
getLabelEl() {
if (!this.labelEl) {
this.labelEl = this.el.querySelector('[data-label]');
}
if (!this.labelEl) this.labelEl = this.el.querySelector('[data-label]');
return this.labelEl;
},
select() {
this.model.select();
},
updateVisibility() {
const { pfx, model, propertyView } = this;
const wrapEl = this.getPropertiesWrapper();
const isSelected = model.isSelected();
wrapEl.style.display = isSelected ? '' : 'none';
this.$el[isSelected ? 'addClass' : 'removeClass'](`${pfx}active`);
isSelected && wrapEl.appendChild(propertyView.props.el);
},
}
updateLabel() {
const { model } = this;
@ -109,7 +95,16 @@ export default View.extend({
.join(';');
prvEl.setAttribute('style', styleStr);
}
},
}
updateVisibility() {
const { pfx, model, propertyView } = this;
const wrapEl = this.getPropertiesWrapper();
const isSelected = model.isSelected();
wrapEl.style.display = isSelected ? '' : 'none';
this.$el[isSelected ? 'addClass' : 'removeClass'](`${pfx}active`);
isSelected && wrapEl.appendChild(propertyView.props.el);
}
render() {
const { el, pfx, model } = this;
@ -121,5 +116,5 @@ export default View.extend({
this.updateLabel();
this.updateVisibility();
return this;
},
});
}
}

154
src/style_manager/view/LayersView.js
View File

@ -1,81 +1,47 @@
import Backbone from 'backbone';
import { View } from 'common';
import LayerView from './LayerView';
export default Backbone.View.extend({
export default class LayersView extends View {
initialize(o) {
this.config = o.config || {};
this.stackModel = o.stackModel;
const coll = this.collection;
const config = o.config || {};
const em = config.em;
const pfx = config.stylePrefix || '';
const ppfx = config.pStylePrefix || '';
this.config = config;
this.pfx = pfx;
this.ppfx = ppfx;
this.propertyView = o.propertyView;
this.preview = o.preview;
this.pfx = this.config.stylePrefix || '';
this.ppfx = this.config.pStylePrefix || '';
this.propsConfig = o.propsConfig;
let pfx = this.pfx;
let ppfx = this.ppfx;
let collection = this.collection;
this.className = `${pfx}layers ${ppfx}field`;
this.listenTo(collection, 'add', this.addTo);
this.listenTo(collection, 'deselectAll', this.deselectAll);
this.listenTo(collection, 'reset', this.reset);
this.listenTo(coll, 'add', this.addTo);
this.listenTo(coll, 'reset', this.reset);
this.items = [];
var em = this.config.em || '';
var utils = em ? em.get('Utils') : '';
// For the Sorter
const utils = em ? em.get('Utils') : '';
this.sorter = utils
? new utils.Sorter({
container: this.el,
ignoreViewChildren: 1,
containerSel: `.${pfx}layers`,
itemSel: `.${pfx}layer`,
pfx: this.config.pStylePrefix,
pfx: config.pStylePrefix,
})
: '';
coll.view = this;
this.$el.data('model', coll);
this.$el.data('collection', coll);
}
// For the Sorter
collection.view = this;
this.$el.data('model', collection);
this.$el.data('collection', collection);
},
/**
* Add to collection
* @param Object Model
*
* @return Object
* */
addTo(model) {
var i = this.collection.indexOf(model);
const i = this.collection.indexOf(model);
this.addToCollection(model, null, i);
},
}
/**
* Add new object to collection
* @param Object Model
* @param Object Fragment collection
* @param {number} index Index of append
*
* @return Object Object created
* */
addToCollection(model, fragmentEl, index) {
var fragment = fragmentEl || null;
const { propertyView, config } = this;
const stackModel = this.stackModel;
const sorter = this.sorter;
const propsConfig = this.propsConfig;
if (typeof this.preview !== 'undefined') {
model.set('preview', this.preview);
}
const view = new LayerView({
model,
config,
sorter,
stackModel,
propsConfig,
propertyView,
});
const fragment = fragmentEl || null;
const { propertyView, config, sorter, $el } = this;
const view = new LayerView({ model, config, sorter, propertyView });
const rendered = view.render().el;
this.items.push(view);
@ -83,60 +49,50 @@ export default Backbone.View.extend({
fragment.appendChild(rendered);
} else {
if (typeof index != 'undefined') {
var method = 'before';
// If the added model is the last of collection
// need to change the logic of append
if (this.$el.children().length == index) {
let method = 'before';
if ($el.children().length === index) {
index--;
method = 'after';
}
// In case the added is new in the collection index will be -1
if (index < 0) {
this.$el.append(rendered);
} else this.$el.children().eq(index)[method](rendered);
} else this.$el.append(rendered);
$el.append(rendered);
} else {
$el.children().eq(index)[method](rendered);
}
} else {
$el.append(rendered);
}
}
return rendered;
},
/**
* Deselect all
*
* @return void
* */
deselectAll() {
this.$el.find('.' + this.pfx + 'layer').removeClass(this.pfx + 'active');
},
}
reset(coll, opts) {
this.clearItems(opts);
this.render();
},
render() {
var fragment = document.createDocumentFragment();
this.$el.empty();
this.collection.each(function (model) {
this.addToCollection(model, fragment);
}, this);
this.$el.append(fragment);
this.$el.attr('class', this.className);
if (this.sorter) this.sorter.plh = null;
return this;
},
}
remove() {
this.clearItems();
Backbone.View.prototype.remove.apply(this, arguments);
},
View.prototype.remove.apply(this, arguments);
}
clearItems(opts) {
this.items.forEach(item => item.remove(opts));
clearItems() {
this.items.forEach(item => item.remove());
this.items = [];
},
});
}
render() {
const { $el, sorter } = this;
const frag = document.createDocumentFragment();
$el.empty();
this.collection.forEach(m => this.addToCollection(m, frag));
$el.append(frag);
$el.attr('class', this.className);
if (sorter) sorter.plh = null;
return this;
}
}

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

@ -52,13 +52,13 @@ export default PropertyCompositeView.extend({
},
onRender() {
const { model, el } = this;
const { model, el, config } = this;
const props = model.getProperties();
if (props.length && !this.props) {
const propsView = new PropertiesView({
config: {
...this.config,
...config,
highlightComputed: false,
highlightChanged: false,
},
@ -69,7 +69,7 @@ export default PropertyCompositeView.extend({
const layersView = new LayersView({
collection: model.__getLayers(),
config: this.config,
config,
propertyView: this,
});
layersView.render();

Write Preview
Loading…
Cancel
Save