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