var parse5 = require('parse5'); var parser = new parse5.Parser(parse5.TreeAdapters.htmlparser2); var serializer = new parse5.Serializer(parse5.TreeAdapters.htmlparser2); var treeAdapter = parser.treeAdapter; var cssParse = require('css').parse; var url = require('url'); import {List, MapWrapper, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection'; import {DomAdapter, setRootDomAdapter} from './dom_adapter'; import {BaseException, isPresent, isBlank, global} from 'angular2/src/facade/lang'; import {SelectorMatcher, CssSelector} from 'angular2/src/render/dom/compiler/selector'; var _attrToPropMap = { 'innerHtml': 'innerHTML', 'readonly': 'readOnly', 'tabindex': 'tabIndex', }; var defDoc = null; var mapProps = ['attribs', 'x-attribsNamespace', 'x-attribsPrefix']; function _notImplemented(methodName) { return new BaseException('This method is not implemented in Parse5DomAdapter: ' + methodName); } /* tslint:disable:requireParameterType */ export class Parse5DomAdapter extends DomAdapter { static makeCurrent() { setRootDomAdapter(new Parse5DomAdapter()); } hasProperty(element, name: string): boolean { return _HTMLElementPropertyList.indexOf(name) > -1; } // TODO(tbosch): don't even call this method when we run the tests on server side // by not using the DomRenderer in tests. Keeping this for now to make tests happy... setProperty(el: /*element*/ any, name: string, value: any) { if (name === 'innerHTML') { this.setInnerHTML(el, value); } else { el[name] = value; } } // TODO(tbosch): don't even call this method when we run the tests on server side // by not using the DomRenderer in tests. Keeping this for now to make tests happy... getProperty(el: /*element*/ any, name: string): any { return el[name]; } logError(error) { console.error(error); } log(error) { console.log(error); } logGroup(error) { console.log(error); } logGroupEnd() {} get attrToPropMap() { return _attrToPropMap; } query(selector) { throw _notImplemented('query'); } querySelector(el, selector: string): any { return this.querySelectorAll(el, selector)[0]; } querySelectorAll(el, selector: string): List { var res = []; var _recursive = (result, node, selector, matcher) => { var cNodes = node.childNodes; if (cNodes && cNodes.length > 0) { for (var i = 0; i < cNodes.length; i++) { var childNode = cNodes[i]; if (this.elementMatches(childNode, selector, matcher)) { result.push(childNode); } _recursive(result, childNode, selector, matcher); } } }; var matcher = new SelectorMatcher(); matcher.addSelectables(CssSelector.parse(selector)); _recursive(res, el, selector, matcher); return res; } elementMatches(node, selector: string, matcher = null): boolean { if (!selector || selector === '*') { return true; } var result = false; if (selector && selector.charAt(0) == "#") { result = this.getAttribute(node, 'id') == selector.substring(1); } else if (selector) { var result = false; if (matcher == null) { matcher = new SelectorMatcher(); matcher.addSelectables(CssSelector.parse(selector)); } var cssSelector = new CssSelector(); cssSelector.setElement(this.tagName(node)); if (node.attribs) { for (var attrName in node.attribs) { cssSelector.addAttribute(attrName, node.attribs[attrName]); } } var classList = this.classList(node); for (var i = 0; i < classList.length; i++) { cssSelector.addClassName(classList[i]); } matcher.match(cssSelector, function(selector, cb) { result = true; }); } return result; } on(el, evt, listener) { var listenersMap: StringMap = el._eventListenersMap; if (isBlank(listenersMap)) { var listenersMap: StringMap = StringMapWrapper.create(); el._eventListenersMap = listenersMap; } var listeners = StringMapWrapper.get(listenersMap, evt); if (isBlank(listeners)) { listeners = []; } listeners.push(listener); StringMapWrapper.set(listenersMap, evt, listeners); } onAndCancel(el, evt, listener): Function { this.on(el, evt, listener); return () => { ListWrapper.remove(StringMapWrapper.get>(el._eventListenersMap, evt), listener); }; } dispatchEvent(el, evt) { if (isBlank(evt.target)) { evt.target = el; } if (isPresent(el._eventListenersMap)) { var listeners: any = StringMapWrapper.get(el._eventListenersMap, evt.type); if (isPresent(listeners)) { for (var i = 0; i < listeners.length; i++) { listeners[i](evt); } } } if (isPresent(el.parent)) { this.dispatchEvent(el.parent, evt); } if (isPresent(el._window)) { this.dispatchEvent(el._window, evt); } } createMouseEvent(eventType): Event { return this.createEvent(eventType); } createEvent(eventType: string): Event { var evt = { type: eventType, defaultPrevented: false, preventDefault: () => { evt.defaultPrevented = true; } }; return evt; } preventDefault(evt) { evt.returnValue = false; } getInnerHTML(el): string { return serializer.serialize(this.templateAwareRoot(el)); } getOuterHTML(el): string { serializer.html = ''; serializer._serializeElement(el); return serializer.html; } nodeName(node): string { return node.tagName; } nodeValue(node): string { return node.nodeValue; } type(node: any): string { throw _notImplemented('type'); } content(node): string { return node.childNodes[0]; } firstChild(el): Node { return el.firstChild; } nextSibling(el): Node { return el.nextSibling; } parentElement(el): Node { return el.parent; } childNodes(el): Node[] { return el.childNodes; } childNodesAsList(el): List { var childNodes = el.childNodes; var res = ListWrapper.createFixedSize(childNodes.length); for (var i = 0; i < childNodes.length; i++) { res[i] = childNodes[i]; } return res; } clearNodes(el) { while (el.childNodes.length > 0) { this.remove(el.childNodes[0]); } } appendChild(el, node) { this.remove(node); treeAdapter.appendChild(this.templateAwareRoot(el), node); } removeChild(el, node) { if (ListWrapper.contains(el.childNodes, node)) { this.remove(node); } } remove(el): HTMLElement { var parent = el.parent; if (parent) { var index = parent.childNodes.indexOf(el); parent.childNodes.splice(index, 1); } var prev = el.previousSibling; var next = el.nextSibling; if (prev) { prev.next = next; } if (next) { next.prev = prev; } el.prev = null; el.next = null; el.parent = null; return el; } insertBefore(el, node) { this.remove(node); treeAdapter.insertBefore(el.parent, node, el); } insertAllBefore(el, nodes) { ListWrapper.forEach(nodes, (n) => { this.insertBefore(el, n); }); } insertAfter(el, node) { if (el.nextSibling) { this.insertBefore(el.nextSibling, node); } else { this.appendChild(el.parent, node); } } setInnerHTML(el, value) { this.clearNodes(el); var content = parser.parseFragment(value); for (var i = 0; i < content.childNodes.length; i++) { treeAdapter.appendChild(el, content.childNodes[i]); } } getText(el): string { if (this.isTextNode(el)) { return el.data; } else if (isBlank(el.childNodes) || el.childNodes.length == 0) { return ""; } else { var textContent = ""; for (var i = 0; i < el.childNodes.length; i++) { textContent += this.getText(el.childNodes[i]); } return textContent; } } setText(el, value: string) { if (this.isTextNode(el)) { el.data = value; } else { this.clearNodes(el); if (value !== '') treeAdapter.insertText(el, value); } } getValue(el): string { return el.value; } setValue(el, value: string) { el.value = value; } getChecked(el): boolean { return el.checked; } setChecked(el, value: boolean) { el.checked = value; } createComment(text: string): Comment { return treeAdapter.createCommentNode(text); } createTemplate(html): HTMLElement { var template = treeAdapter.createElement("template", 'http://www.w3.org/1999/xhtml', []); var content = parser.parseFragment(html); treeAdapter.appendChild(template, content); return template; } createElement(tagName): HTMLElement { return treeAdapter.createElement(tagName, 'http://www.w3.org/1999/xhtml', []); } createTextNode(text: string): Text { throw _notImplemented('createTextNode'); } createScriptTag(attrName: string, attrValue: string): HTMLElement { return treeAdapter.createElement("script", 'http://www.w3.org/1999/xhtml', [{name: attrName, value: attrValue}]); } createStyleElement(css: string): HTMLStyleElement { var style = this.createElement('style'); this.setText(style, css); return style; } createShadowRoot(el): HTMLElement { el.shadowRoot = treeAdapter.createDocumentFragment(); el.shadowRoot.parent = el; return el.shadowRoot; } getShadowRoot(el): Element { return el.shadowRoot; } getHost(el): string { return el.host; } getDistributedNodes(el: any): List { throw _notImplemented('getDistributedNodes'); } clone(node: Node): Node { var _recursive = (node) => { var nodeClone = Object.create(Object.getPrototypeOf(node)); for (var prop in node) { var desc = Object.getOwnPropertyDescriptor(node, prop); if (desc && 'value' in desc && typeof desc.value !== 'object') { nodeClone[prop] = node[prop]; } } nodeClone.parent = null; nodeClone.prev = null; nodeClone.next = null; nodeClone.children = null; mapProps.forEach(mapName => { if (isPresent(node[mapName])) { nodeClone[mapName] = {}; for (var prop in node[mapName]) { nodeClone[mapName][prop] = node[mapName][prop]; } } }); var cNodes = node.children; if (cNodes) { var cNodesClone = new Array(cNodes.length); for (var i = 0; i < cNodes.length; i++) { var childNode = cNodes[i]; var childNodeClone = _recursive(childNode); cNodesClone[i] = childNodeClone; if (i > 0) { childNodeClone.prev = cNodesClone[i - 1]; cNodesClone[i - 1].next = childNodeClone; } childNodeClone.parent = nodeClone; } nodeClone.children = cNodesClone; } return nodeClone; }; return _recursive(node); } getElementsByClassName(element, name: string): List { return this.querySelectorAll(element, "." + name); } getElementsByTagName(element: any, name: string): List { throw _notImplemented('getElementsByTagName'); } classList(element): List { var classAttrValue = null; var attributes = element.attribs; if (attributes && attributes.hasOwnProperty("class")) { classAttrValue = attributes["class"]; } return classAttrValue ? classAttrValue.trim().split(/\s+/g) : []; } addClass(element, classname: string) { var classList = this.classList(element); var index = classList.indexOf(classname); if (index == -1) { classList.push(classname); element.attribs["class"] = element.className = ListWrapper.join(classList, " "); } } removeClass(element, classname: string) { var classList = this.classList(element); var index = classList.indexOf(classname); if (index > -1) { classList.splice(index, 1); element.attribs["class"] = element.className = ListWrapper.join(classList, " "); } } hasClass(element, classname: string): boolean { return ListWrapper.contains(this.classList(element), classname); } _readStyleAttribute(element) { var styleMap = {}; var attributes = element.attribs; if (attributes && attributes.hasOwnProperty("style")) { var styleAttrValue = attributes["style"]; var styleList = styleAttrValue.split(/;+/g); for (var i = 0; i < styleList.length; i++) { if (styleList[i].length > 0) { var elems = styleList[i].split(/:+/g); styleMap[elems[0].trim()] = elems[1].trim(); } } } return styleMap; } _writeStyleAttribute(element, styleMap) { var styleAttrValue = ""; for (var key in styleMap) { var newValue = styleMap[key]; if (newValue && newValue.length > 0) { styleAttrValue += key + ":" + styleMap[key] + ";"; } } element.attribs["style"] = styleAttrValue; } setStyle(element, stylename: string, stylevalue: string) { var styleMap = this._readStyleAttribute(element); styleMap[stylename] = stylevalue; this._writeStyleAttribute(element, styleMap); } removeStyle(element, stylename: string) { this.setStyle(element, stylename, null); } getStyle(element, stylename: string): string { var styleMap = this._readStyleAttribute(element); return styleMap.hasOwnProperty(stylename) ? styleMap[stylename] : ""; } tagName(element): string { return element.tagName == "style" ? "STYLE" : element.tagName; } attributeMap(element): Map { var res = new Map(); var elAttrs = treeAdapter.getAttrList(element); for (var i = 0; i < elAttrs.length; i++) { var attrib = elAttrs[i]; res.set(attrib.name, attrib.value); } return res; } hasAttribute(element, attribute: string): boolean { return element.attribs && element.attribs.hasOwnProperty(attribute); } getAttribute(element, attribute: string): string { return element.attribs && element.attribs.hasOwnProperty(attribute) ? element.attribs[attribute] : null; } setAttribute(element, attribute: string, value: string) { if (attribute) { element.attribs[attribute] = value; } } removeAttribute(element, attribute: string) { if (attribute) { StringMapWrapper.delete(element.attribs, attribute); } } templateAwareRoot(el): any { return this.isTemplateElement(el) ? this.content(el) : el; } createHtmlDocument(): Document { var newDoc = treeAdapter.createDocument(); newDoc.title = "fake title"; var head = treeAdapter.createElement("head", null, []); var body = treeAdapter.createElement("body", 'http://www.w3.org/1999/xhtml', []); this.appendChild(newDoc, head); this.appendChild(newDoc, body); StringMapWrapper.set(newDoc, "head", head); StringMapWrapper.set(newDoc, "body", body); StringMapWrapper.set(newDoc, "_window", StringMapWrapper.create()); return newDoc; } defaultDoc(): Document { if (defDoc === null) { defDoc = this.createHtmlDocument(); } return defDoc; } getBoundingClientRect(el): any { return {left: 0, top: 0, width: 0, height: 0}; } getTitle(): string { return this.defaultDoc().title || ""; } setTitle(newTitle: string) { this.defaultDoc().title = newTitle; } isTemplateElement(el: any): boolean { return this.isElementNode(el) && this.tagName(el) === "template"; } isTextNode(node): boolean { return treeAdapter.isTextNode(node); } isCommentNode(node): boolean { return treeAdapter.isCommentNode(node); } isElementNode(node): boolean { return node ? treeAdapter.isElementNode(node) : false; } hasShadowRoot(node): boolean { return isPresent(node.shadowRoot); } isShadowRoot(node): boolean { return this.getShadowRoot(node) == node; } importIntoDoc(node): any { return this.clone(node); } adoptNode(node): any { return node; } isPageRule(rule): boolean { return rule.type === 6; // CSSRule.PAGE_RULE } isStyleRule(rule): boolean { return rule.type === 1; // CSSRule.MEDIA_RULE } isMediaRule(rule): boolean { return rule.type === 4; // CSSRule.MEDIA_RULE } isKeyframesRule(rule): boolean { return rule.type === 7; // CSSRule.KEYFRAMES_RULE } getHref(el): string { return el.href; } resolveAndSetHref(el, baseUrl: string, href: string) { if (href == null) { el.href = baseUrl; } else { el.href = url.resolve(baseUrl, href); } } _buildRules(parsedRules, css?) { var rules = []; for (var i = 0; i < parsedRules.length; i++) { var parsedRule = parsedRules[i]; var rule: StringMap = StringMapWrapper.create(); StringMapWrapper.set(rule, "cssText", css); StringMapWrapper.set(rule, "style", {content: "", cssText: ""}); if (parsedRule.type == "rule") { StringMapWrapper.set(rule, "type", 1); StringMapWrapper.set(rule, "selectorText", parsedRule.selectors.join(", ") .replace(/\s{2,}/g, " ") .replace(/\s*~\s*/g, " ~ ") .replace(/\s*\+\s*/g, " + ") .replace(/\s*>\s*/g, " > ") .replace(/\[(\w+)=(\w+)\]/g, '[$1="$2"]')); if (isBlank(parsedRule.declarations)) { continue; } for (var j = 0; j < parsedRule.declarations.length; j++) { var declaration = parsedRule.declarations[j]; StringMapWrapper.set(StringMapWrapper.get(rule, "style"), declaration.property, declaration.value); StringMapWrapper.get(rule, "style").cssText += declaration.property + ": " + declaration.value + ";"; } } else if (parsedRule.type == "media") { StringMapWrapper.set(rule, "type", 4); StringMapWrapper.set(rule, "media", {mediaText: parsedRule.media}); if (parsedRule.rules) { StringMapWrapper.set(rule, "cssRules", this._buildRules(parsedRule.rules)); } } rules.push(rule); } return rules; } cssToRules(css: string): List { css = css.replace(/url\(\'(.+)\'\)/g, 'url($1)'); var rules = []; var parsedCSS = cssParse(css, {silent: true}); if (parsedCSS.stylesheet && parsedCSS.stylesheet.rules) { rules = this._buildRules(parsedCSS.stylesheet.rules, css); } return rules; } supportsDOMEvents(): boolean { return false; } supportsNativeShadowDOM(): boolean { return false; } getGlobalEventTarget(target: string): any { if (target == "window") { return (this.defaultDoc())._window; } else if (target == "document") { return this.defaultDoc(); } else if (target == "body") { return this.defaultDoc().body; } } getHistory(): History { throw 'not implemented'; } getLocation(): Location { throw 'not implemented'; } getUserAgent(): string { return "Fake user agent"; } getData(el, name: string): string { return this.getAttribute(el, 'data-' + name); } setData(el, name: string, value: string) { this.setAttribute(el, 'data-' + name, value); } // TODO(tbosch): move this into a separate environment class once we have it setGlobalVar(name: string, value: any) { global[name] = value; } } // TODO: build a proper list, this one is all the keys of a HTMLInputElement var _HTMLElementPropertyList = [ "webkitEntries", "incremental", "webkitdirectory", "selectionDirection", "selectionEnd", "selectionStart", "labels", "validationMessage", "validity", "willValidate", "width", "valueAsNumber", "valueAsDate", "value", "useMap", "defaultValue", "type", "step", "src", "size", "required", "readOnly", "placeholder", "pattern", "name", "multiple", "min", "minLength", "maxLength", "max", "list", "indeterminate", "height", "formTarget", "formNoValidate", "formMethod", "formEnctype", "formAction", "files", "form", "disabled", "dirName", "checked", "defaultChecked", "autofocus", "autocomplete", "alt", "align", "accept", "onautocompleteerror", "onautocomplete", "onwaiting", "onvolumechange", "ontoggle", "ontimeupdate", "onsuspend", "onsubmit", "onstalled", "onshow", "onselect", "onseeking", "onseeked", "onscroll", "onresize", "onreset", "onratechange", "onprogress", "onplaying", "onplay", "onpause", "onmousewheel", "onmouseup", "onmouseover", "onmouseout", "onmousemove", "onmouseleave", "onmouseenter", "onmousedown", "onloadstart", "onloadedmetadata", "onloadeddata", "onload", "onkeyup", "onkeypress", "onkeydown", "oninvalid", "oninput", "onfocus", "onerror", "onended", "onemptied", "ondurationchange", "ondrop", "ondragstart", "ondragover", "ondragleave", "ondragenter", "ondragend", "ondrag", "ondblclick", "oncuechange", "oncontextmenu", "onclose", "onclick", "onchange", "oncanplaythrough", "oncanplay", "oncancel", "onblur", "onabort", "spellcheck", "isContentEditable", "contentEditable", "outerText", "innerText", "accessKey", "hidden", "webkitdropzone", "draggable", "tabIndex", "dir", "translate", "lang", "title", "childElementCount", "lastElementChild", "firstElementChild", "children", "onwebkitfullscreenerror", "onwebkitfullscreenchange", "nextElementSibling", "previousElementSibling", "onwheel", "onselectstart", "onsearch", "onpaste", "oncut", "oncopy", "onbeforepaste", "onbeforecut", "onbeforecopy", "shadowRoot", "dataset", "classList", "className", "outerHTML", "innerHTML", "scrollHeight", "scrollWidth", "scrollTop", "scrollLeft", "clientHeight", "clientWidth", "clientTop", "clientLeft", "offsetParent", "offsetHeight", "offsetWidth", "offsetTop", "offsetLeft", "localName", "prefix", "namespaceURI", "id", "style", "attributes", "tagName", "parentElement", "textContent", "baseURI", "ownerDocument", "nextSibling", "previousSibling", "lastChild", "firstChild", "childNodes", "parentNode", "nodeType", "nodeValue", "nodeName", "closure_lm_714617", "__jsaction" ];