|
@@ -8,19 +8,22 @@
|
|
|
import ViewText from './text.js';
|
|
import ViewText from './text.js';
|
|
|
import ViewElement from './element.js';
|
|
import ViewElement from './element.js';
|
|
|
|
|
|
|
|
-const _domToViewMapping = new WeakMap();
|
|
|
|
|
-const _viewToDomMapping = new WeakMap();
|
|
|
|
|
-
|
|
|
|
|
-const converter = {
|
|
|
|
|
- bindElements: function( domElement, viewElement ) {
|
|
|
|
|
- _domToViewMapping.set( domElement, viewElement );
|
|
|
|
|
- _viewToDomMapping.set( viewElement, domElement );
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- compareNodes: function( domNode, viewNode ) {
|
|
|
|
|
|
|
+// Converter is a class in the future it may take a configuration in the constructor (e.g. what should be inserted into empty elements).
|
|
|
|
|
+export default class Converter {
|
|
|
|
|
+ constructor() {
|
|
|
|
|
+ this._domToViewMapping = new WeakMap();
|
|
|
|
|
+ this._viewToDomMapping = new WeakMap();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ bindElements( domElement, viewElement ) {
|
|
|
|
|
+ this._domToViewMapping.set( domElement, viewElement );
|
|
|
|
|
+ this._viewToDomMapping.set( viewElement, domElement );
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ compareNodes( domNode, viewNode ) {
|
|
|
// Elements.
|
|
// Elements.
|
|
|
if ( domNode instanceof HTMLElement && viewNode instanceof ViewElement ) {
|
|
if ( domNode instanceof HTMLElement && viewNode instanceof ViewElement ) {
|
|
|
- return domNode === converter.getCorespondingDomElement( viewNode );
|
|
|
|
|
|
|
+ return domNode === this.getCorespondingDomElement( viewNode );
|
|
|
}
|
|
}
|
|
|
// Texts.
|
|
// Texts.
|
|
|
else if ( domNode instanceof Text && viewNode instanceof ViewText ) {
|
|
else if ( domNode instanceof Text && viewNode instanceof ViewText ) {
|
|
@@ -29,43 +32,43 @@ const converter = {
|
|
|
|
|
|
|
|
// Not matching types.
|
|
// Not matching types.
|
|
|
return false;
|
|
return false;
|
|
|
- },
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- cloneDomAttrs: function( domElement, viewElement ) {
|
|
|
|
|
|
|
+ cloneDomAttrs( domElement, viewElement ) {
|
|
|
for ( let i = domElement.attributes.length - 1; i >= 0; i-- ) {
|
|
for ( let i = domElement.attributes.length - 1; i >= 0; i-- ) {
|
|
|
let attr = domElement.attributes[ i ];
|
|
let attr = domElement.attributes[ i ];
|
|
|
viewElement.setAttr( attr.name, attr.value );
|
|
viewElement.setAttr( attr.name, attr.value );
|
|
|
}
|
|
}
|
|
|
- },
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
// viewToDom do bind elements
|
|
// viewToDom do bind elements
|
|
|
- viewToDom: function( viewNode, domDocument ) {
|
|
|
|
|
|
|
+ viewToDom( viewNode, domDocument ) {
|
|
|
if ( viewNode instanceof ViewText ) {
|
|
if ( viewNode instanceof ViewText ) {
|
|
|
return domDocument.createTextNode( viewNode.getText() );
|
|
return domDocument.createTextNode( viewNode.getText() );
|
|
|
} else {
|
|
} else {
|
|
|
- if ( converter.getCorespondingDom( viewNode ) ) {
|
|
|
|
|
- return converter.getCorespondingDom( viewNode );
|
|
|
|
|
|
|
+ if ( this.getCorespondingDom( viewNode ) ) {
|
|
|
|
|
+ return this.getCorespondingDom( viewNode );
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const domElement = domDocument.createElement( viewNode.name );
|
|
const domElement = domDocument.createElement( viewNode.name );
|
|
|
- converter.bindElements( domElement, viewNode );
|
|
|
|
|
|
|
+ this.bindElements( domElement, viewNode );
|
|
|
|
|
|
|
|
for ( let key of viewNode.getAttrKeys() ) {
|
|
for ( let key of viewNode.getAttrKeys() ) {
|
|
|
domElement.setAttribute( key, viewNode.getAttr( key ) );
|
|
domElement.setAttribute( key, viewNode.getAttr( key ) );
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
for ( let childView of viewNode.getChildren() ) {
|
|
for ( let childView of viewNode.getChildren() ) {
|
|
|
- domElement.appendChild( converter.viewToDom( childView, domDocument ) );
|
|
|
|
|
|
|
+ domElement.appendChild( this.viewToDom( childView, domDocument ) );
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
return domElement;
|
|
return domElement;
|
|
|
}
|
|
}
|
|
|
- },
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
// Note that created elements will not have coresponding DOM elements created it these did not exist before.
|
|
// Note that created elements will not have coresponding DOM elements created it these did not exist before.
|
|
|
// domToView do not bind elements
|
|
// domToView do not bind elements
|
|
|
- domToView: function( domElement ) {
|
|
|
|
|
- let viewElement = converter.getCorespondingView( domElement );
|
|
|
|
|
|
|
+ domToView( domElement ) {
|
|
|
|
|
+ let viewElement = this.getCorespondingView( domElement );
|
|
|
|
|
|
|
|
if ( viewElement ) {
|
|
if ( viewElement ) {
|
|
|
return viewElement;
|
|
return viewElement;
|
|
@@ -84,37 +87,37 @@ const converter = {
|
|
|
for ( let i = 0, len = domElement.childNodes.length; i < len; i++ ) {
|
|
for ( let i = 0, len = domElement.childNodes.length; i < len; i++ ) {
|
|
|
let domChild = domElement.childNodes[ i ];
|
|
let domChild = domElement.childNodes[ i ];
|
|
|
|
|
|
|
|
- viewElement.appendChildren( converter.domToView( domChild ) );
|
|
|
|
|
|
|
+ viewElement.appendChildren( this.domToView( domChild ) );
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
return viewElement;
|
|
return viewElement;
|
|
|
}
|
|
}
|
|
|
- },
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- getCorespondingView: function( domNode ) {
|
|
|
|
|
|
|
+ getCorespondingView( domNode ) {
|
|
|
if ( domNode instanceof HTMLElement ) {
|
|
if ( domNode instanceof HTMLElement ) {
|
|
|
- return converter.getCorespondingViewElement( domNode );
|
|
|
|
|
|
|
+ return this.getCorespondingViewElement( domNode );
|
|
|
} else {
|
|
} else {
|
|
|
- return converter.getCorespondingViewText( domNode );
|
|
|
|
|
|
|
+ return this.getCorespondingViewText( domNode );
|
|
|
}
|
|
}
|
|
|
- },
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
// Coresponding elements exists only for rendered elementes.
|
|
// Coresponding elements exists only for rendered elementes.
|
|
|
- getCorespondingViewElement: function( domElement ) {
|
|
|
|
|
- return _domToViewMapping.get( domElement );
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ getCorespondingViewElement( domElement ) {
|
|
|
|
|
+ return this._domToViewMapping.get( domElement );
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- getCorespondingViewText: function( domText ) {
|
|
|
|
|
|
|
+ getCorespondingViewText( domText ) {
|
|
|
const previousSibling = domText.previousSibling;
|
|
const previousSibling = domText.previousSibling;
|
|
|
|
|
|
|
|
if ( previousSibling ) {
|
|
if ( previousSibling ) {
|
|
|
- const viewElement = converter.getCorespondingView( previousSibling );
|
|
|
|
|
|
|
+ const viewElement = this.getCorespondingView( previousSibling );
|
|
|
|
|
|
|
|
if ( viewElement ) {
|
|
if ( viewElement ) {
|
|
|
return viewElement.getNextSibling();
|
|
return viewElement.getNextSibling();
|
|
|
}
|
|
}
|
|
|
} else {
|
|
} else {
|
|
|
- const viewElement = converter.getCorespondingView( domText.parentElement );
|
|
|
|
|
|
|
+ const viewElement = this.getCorespondingView( domText.parentElement );
|
|
|
|
|
|
|
|
if ( viewElement ) {
|
|
if ( viewElement ) {
|
|
|
return viewElement.getChild( 0 );
|
|
return viewElement.getChild( 0 );
|
|
@@ -122,33 +125,31 @@ const converter = {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
return null;
|
|
return null;
|
|
|
- },
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- getCorespondingDom: function( viewNode ) {
|
|
|
|
|
|
|
+ getCorespondingDom( viewNode ) {
|
|
|
if ( viewNode instanceof ViewElement ) {
|
|
if ( viewNode instanceof ViewElement ) {
|
|
|
- return converter.getCorespondingDomElement( viewNode );
|
|
|
|
|
|
|
+ return this.getCorespondingDomElement( viewNode );
|
|
|
} else {
|
|
} else {
|
|
|
- return converter.getCorespondingDomText( viewNode );
|
|
|
|
|
|
|
+ return this.getCorespondingDomText( viewNode );
|
|
|
}
|
|
}
|
|
|
- },
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- getCorespondingDomElement: function( viewElement ) {
|
|
|
|
|
- return _viewToDomMapping.get( viewElement );
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ getCorespondingDomElement( viewElement ) {
|
|
|
|
|
+ return this._viewToDomMapping.get( viewElement );
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- getCorespondingDomText: function( viewText ) {
|
|
|
|
|
|
|
+ getCorespondingDomText( viewText ) {
|
|
|
const previousSibling = viewText.getPreviousSibling();
|
|
const previousSibling = viewText.getPreviousSibling();
|
|
|
|
|
|
|
|
- if ( previousSibling && converter.getCorespondingDom( previousSibling ) ) {
|
|
|
|
|
- return converter.getCorespondingDom( previousSibling ).nextSibling;
|
|
|
|
|
|
|
+ if ( previousSibling && this.getCorespondingDom( previousSibling ) ) {
|
|
|
|
|
+ return this.getCorespondingDom( previousSibling ).nextSibling;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- if ( !previousSibling && converter.getCorespondingDom( viewText.parent ) ) {
|
|
|
|
|
- return converter.getCorespondingDom( viewText.parent ).childNodes[ 0 ];
|
|
|
|
|
|
|
+ if ( !previousSibling && this.getCorespondingDom( viewText.parent ) ) {
|
|
|
|
|
+ return this.getCorespondingDom( viewText.parent ).childNodes[ 0 ];
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
return null;
|
|
return null;
|
|
|
- },
|
|
|
|
|
-};
|
|
|
|
|
-
|
|
|
|
|
-export default converter;
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+}
|