mirror of https://github.com/artf/grapesjs.git
Alex Ritter
4 years ago
16 changed files with 330 additions and 212 deletions
@ -0,0 +1,102 @@ |
|||||
|
import { includes } from 'underscore'; |
||||
|
import Backbone from 'backbone'; |
||||
|
import View from './View'; |
||||
|
import Model from './Model'; |
||||
|
/*interface DomainView<TView, TModel>{ |
||||
|
constructor(model: TModel): TView |
||||
|
}*/ |
||||
|
type TModel<TCollection> = TCollection extends Backbone.Collection<infer TModel>? TModel: Model; |
||||
|
|
||||
|
export default abstract class DomainViews<TCollection extends Backbone.Collection<Model>, TItemView extends View> extends View<TModel<TCollection>> { |
||||
|
// Defines the View per type
|
||||
|
itemsView = ''; |
||||
|
|
||||
|
protected itemType = 'type'; |
||||
|
|
||||
|
reuseView = false; |
||||
|
|
||||
|
viewCollection: TItemView[] = []; |
||||
|
constructor(opts: any = {}, autoAdd = false) { |
||||
|
super(opts); |
||||
|
autoAdd && this.listenTo(this.collection, 'add', this.addTo); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Add new model to the collection |
||||
|
* @param {Model} model |
||||
|
* @private |
||||
|
* */ |
||||
|
private addTo(model: TModel<TCollection>) { |
||||
|
this.add(model); |
||||
|
} |
||||
|
|
||||
|
private itemViewNotFound(type: string) { |
||||
|
/*const { em, ns } = this; |
||||
|
const warn = `${ns ? `[${ns}]: ` : ''}'${type}' type not found`; |
||||
|
em?.logWarning(warn);*/ |
||||
|
} |
||||
|
protected abstract renderView(model: TModel<TCollection>, itemType: string): TItemView; |
||||
|
|
||||
|
/** |
||||
|
* Render new model inside the view |
||||
|
* @param {Model} model |
||||
|
* @param {Object} fragment Fragment collection |
||||
|
* @private |
||||
|
* */ |
||||
|
private add(model: TModel<TCollection>, fragment?: DocumentFragment) { |
||||
|
const { config, reuseView, viewCollection, itemsView = {} } = this; |
||||
|
var frag = fragment || null; |
||||
|
var typeField = model.get(this.itemType); |
||||
|
let view; |
||||
|
|
||||
|
//@ts-ignore
|
||||
|
if (model.view && reuseView) { |
||||
|
//@ts-ignore
|
||||
|
view = model.view; |
||||
|
} else { |
||||
|
view = this.renderView(model, typeField); |
||||
|
} |
||||
|
|
||||
|
viewCollection.push(view); |
||||
|
const rendered = view.render().el; |
||||
|
|
||||
|
if (frag) frag.appendChild(rendered); |
||||
|
else this.$el.append(rendered); |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
var frag = document.createDocumentFragment(); |
||||
|
this.clearItems(); |
||||
|
this.$el.empty(); |
||||
|
|
||||
|
if (this.collection.length) |
||||
|
this.collection.each((model) => { |
||||
|
this.add(model, frag); |
||||
|
}, this); |
||||
|
|
||||
|
this.$el.append(frag); |
||||
|
this.onRender(); |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
onRender() {} |
||||
|
|
||||
|
onRemoveBefore(items: TItemView[], opts: any) {} |
||||
|
onRemove(items: TItemView[], opts: any) {} |
||||
|
|
||||
|
remove(opts: any = {}) { |
||||
|
const { viewCollection } = this; |
||||
|
this.onRemoveBefore(viewCollection, opts); |
||||
|
this.clearItems(); |
||||
|
Backbone.View.prototype.remove.apply(this, opts); |
||||
|
this.onRemove(viewCollection, opts); |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
clearItems() { |
||||
|
const items = this.viewCollection || []; |
||||
|
// TODO Traits do not update the target anymore
|
||||
|
// items.forEach(item => item.remove());
|
||||
|
// this.items = [];
|
||||
|
} |
||||
|
} |
||||
@ -1,21 +0,0 @@ |
|||||
import DomainViews from '../../domain_abstract/view/DomainViews'; |
|
||||
import FrameWrapView from './FrameWrapView'; |
|
||||
|
|
||||
export default class FramesView extends DomainViews { |
|
||||
constructor(opts = {}, config) { |
|
||||
super(opts, config, true); |
|
||||
this.listenTo(this.collection, 'reset', this.render); |
|
||||
} |
|
||||
|
|
||||
onRemoveBefore(items, opts) { |
|
||||
items.forEach(item => item.remove(opts)); |
|
||||
} |
|
||||
|
|
||||
onRender() { |
|
||||
const { $el } = this; |
|
||||
const { em } = this.collection.first; |
|
||||
em && $el.attr({ class: `${em.getConfig().stylePrefix}frames` }); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
FramesView.prototype.itemView = FrameWrapView; |
|
||||
@ -0,0 +1,26 @@ |
|||||
|
import DomainViews from '../../abstract/DomainViews'; |
||||
|
import Frames from '../model/Frames'; |
||||
|
import CanvasView from './CanvasView'; |
||||
|
import FrameWrapView from './FrameWrapView'; |
||||
|
|
||||
|
export default class FramesView extends DomainViews<Frames, FrameWrapView> { |
||||
|
canvasView: CanvasView; |
||||
|
constructor(opts = {}, config: any) { |
||||
|
super(opts, true); |
||||
|
//console.log(this.collection)
|
||||
|
this.listenTo(this.collection, 'reset', this.render); |
||||
|
this.canvasView = config.canvasView |
||||
|
} |
||||
|
|
||||
|
onRemoveBefore(items: FrameWrapView[], opts = {}) { |
||||
|
items.forEach(item => item.remove(opts)); |
||||
|
} |
||||
|
|
||||
|
onRender() { |
||||
|
const { $el, em } = this; |
||||
|
em && $el.attr({ class: `${em.config.stylePrefix}frames` }); |
||||
|
} |
||||
|
protected renderView(item: any, type: string){return new FrameWrapView(item, this.canvasView)} |
||||
|
} |
||||
|
|
||||
|
//FramesView.prototype.itemView = FrameWrapView;
|
||||
Loading…
Reference in new issue