angular-cn/modules/@angular/core/src/view/element.ts

/**
 * @license
 * Copyright Google Inc. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */

import {isDevMode} from '../application_ref';
import {SecurityContext} from '../security';

import {BindingDef, BindingType, DebugContext, DisposableFn, ElementData, ElementOutputDef, EntryAction, NodeData, NodeDef, NodeFlags, NodeType, QueryValueType, Refs, ViewData, ViewDefinition, ViewFlags, asElementData} from './types';
import {checkAndUpdateBinding, dispatchEvent, entryAction, setBindingDebugInfo, setCurrentNode, sliceErrorStack, unwrapValue} from './util';

export function anchorDef(
    flags: NodeFlags, matchedQueries: [string, QueryValueType][], ngContentIndex: number,
    childCount: number, template?: ViewDefinition): NodeDef {
  const matchedQueryDefs: {[queryId: string]: QueryValueType} = {};
  if (matchedQueries) {
    matchedQueries.forEach(([queryId, valueType]) => { matchedQueryDefs[queryId] = valueType; });
  }
  // skip the call to sliceErrorStack itself + the call to this function.
  const source = isDevMode() ? sliceErrorStack(2, 3) : '';
  return {
    type: NodeType.Element,
    // will bet set by the view definition
    index: undefined,
    reverseChildIndex: undefined,
    parent: undefined,
    childFlags: undefined,
    childMatchedQueries: undefined,
    bindingIndex: undefined,
    disposableIndex: undefined,
    // regular values
    flags,
    matchedQueries: matchedQueryDefs, ngContentIndex, childCount,
    bindings: [],
    disposableCount: 0,
    element: {
      name: undefined,
      attrs: undefined,
      outputs: [], template,
      // will bet set by the view definition
      providerIndices: undefined, source,
    },
    provider: undefined,
    text: undefined,
    pureExpression: undefined,
    query: undefined,
    ngContent: undefined
  };
}

export function elementDef(
    flags: NodeFlags, matchedQueries: [string, QueryValueType][], ngContentIndex: number,
    childCount: number, name: string, fixedAttrs: {[name: string]: string} = {},
    bindings?:
        ([BindingType.ElementClass, string] | [BindingType.ElementStyle, string, string] |
         [BindingType.ElementAttribute | BindingType.ElementProperty, string, SecurityContext])[],
    outputs?: (string | [string, string])[]): NodeDef {
  // skip the call to sliceErrorStack itself + the call to this function.
  const source = isDevMode() ? sliceErrorStack(2, 3) : '';
  const matchedQueryDefs: {[queryId: string]: QueryValueType} = {};
  if (matchedQueries) {
    matchedQueries.forEach(([queryId, valueType]) => { matchedQueryDefs[queryId] = valueType; });
  }
  bindings = bindings || [];
  const bindingDefs = new Array(bindings.length);
  for (let i = 0; i < bindings.length; i++) {
    const entry = bindings[i];
    let bindingDef: BindingDef;
    const bindingType = entry[0];
    const name = entry[1];
    let securityContext: SecurityContext;
    let suffix: string;
    switch (bindingType) {
      case BindingType.ElementStyle:
        suffix = <string>entry[2];
        break;
      case BindingType.ElementAttribute:
      case BindingType.ElementProperty:
        securityContext = <SecurityContext>entry[2];
        break;
    }
    bindingDefs[i] = {type: bindingType, name, nonMinfiedName: name, securityContext, suffix};
  }
  outputs = outputs || [];
  const outputDefs: ElementOutputDef[] = new Array(outputs.length);
  for (let i = 0; i < outputs.length; i++) {
    const output = outputs[i];
    let target: string;
    let eventName: string;
    if (Array.isArray(output)) {
      [target, eventName] = output;
    } else {
      eventName = output;
    }
    outputDefs[i] = {eventName: eventName, target: target};
  }
  return {
    type: NodeType.Element,
    // will bet set by the view definition
    index: undefined,
    reverseChildIndex: undefined,
    parent: undefined,
    childFlags: undefined,
    childMatchedQueries: undefined,
    bindingIndex: undefined,
    disposableIndex: undefined,
    // regular values
    flags,
    matchedQueries: matchedQueryDefs, ngContentIndex, childCount,
    bindings: bindingDefs,
    disposableCount: outputDefs.length,
    element: {
      name,
      attrs: fixedAttrs,
      outputs: outputDefs,
      template: undefined,
      // will bet set by the view definition
      providerIndices: undefined, source,
    },
    provider: undefined,
    text: undefined,
    pureExpression: undefined,
    query: undefined,
    ngContent: undefined
  };
}

export function createElement(view: ViewData, renderHost: any, def: NodeDef): ElementData {
  const elDef = def.element;
  const rootSelectorOrNode = view.root.selectorOrNode;
  let el: any;
  if (view.parent || !rootSelectorOrNode) {
    const parentNode =
        def.parent != null ? asElementData(view, def.parent).renderElement : renderHost;
    if (view.renderer) {
      const debugContext = isDevMode() ? Refs.createDebugContext(view, def.index) : undefined;
      el = elDef.name ? view.renderer.createElement(parentNode, elDef.name, debugContext) :
                        view.renderer.createTemplateAnchor(parentNode, debugContext);
    } else {
      el = elDef.name ? document.createElement(elDef.name) : document.createComment('');
      if (parentNode) {
        parentNode.appendChild(el);
      }
    }
  } else {
    if (view.renderer) {
      const debugContext = isDevMode() ? Refs.createDebugContext(view, def.index) : undefined;
      el = view.renderer.selectRootElement(rootSelectorOrNode, debugContext);
    } else {
      el = typeof rootSelectorOrNode === 'string' ? document.querySelector(rootSelectorOrNode) :
                                                    rootSelectorOrNode;
      el.textContent = '';
    }
  }
  if (elDef.attrs) {
    for (let attrName in elDef.attrs) {
      if (view.renderer) {
        view.renderer.setElementAttribute(el, attrName, elDef.attrs[attrName]);
      } else {
        el.setAttribute(attrName, elDef.attrs[attrName]);
      }
    }
  }
  if (elDef.outputs.length) {
    for (let i = 0; i < elDef.outputs.length; i++) {
      const output = elDef.outputs[i];
      let disposable: DisposableFn;
      if (view.renderer) {
        const handleEventClosure = renderEventHandlerClosure(view, def.index, output.eventName);
        if (output.target) {
          disposable =
              <any>view.renderer.listenGlobal(output.target, output.eventName, handleEventClosure);
        } else {
          disposable = <any>view.renderer.listen(el, output.eventName, handleEventClosure);
        }
      } else {
        let target: any;
        switch (output.target) {
          case 'window':
            target = window;
            break;
          case 'document':
            target = document;
            break;
          default:
            target = el;
        }
        const handleEventClosure = directDomEventHandlerClosure(view, def.index, output.eventName);
        target.addEventListener(output.eventName, handleEventClosure);
        disposable = target.removeEventListener.bind(target, output.eventName, handleEventClosure);
      }
      view.disposables[def.disposableIndex + i] = disposable;
    }
  }
  return {
    renderElement: el,
    embeddedViews: (def.flags & NodeFlags.HasEmbeddedViews) ? [] : undefined,
    projectedViews: undefined
  };
}

function renderEventHandlerClosure(view: ViewData, index: number, eventName: string) {
  return entryAction(
      EntryAction.HandleEvent, (event: any) => dispatchEvent(view, index, eventName, event));
}


function directDomEventHandlerClosure(view: ViewData, index: number, eventName: string) {
  return entryAction(EntryAction.HandleEvent, (event: any) => {
    const result = dispatchEvent(view, index, eventName, event);
    if (result === false) {
      event.preventDefault();
    }
    return result;
  });
}

export function checkAndUpdateElementInline(
    view: ViewData, def: NodeDef, v0: any, v1: any, v2: any, v3: any, v4: any, v5: any, v6: any,
    v7: any, v8: any, v9: any) {
  // Note: fallthrough is intended!
  switch (def.bindings.length) {
    case 10:
      checkAndUpdateElementValue(view, def, 9, v9);
    case 9:
      checkAndUpdateElementValue(view, def, 8, v8);
    case 8:
      checkAndUpdateElementValue(view, def, 7, v7);
    case 7:
      checkAndUpdateElementValue(view, def, 6, v6);
    case 6:
      checkAndUpdateElementValue(view, def, 5, v5);
    case 5:
      checkAndUpdateElementValue(view, def, 4, v4);
    case 4:
      checkAndUpdateElementValue(view, def, 3, v3);
    case 3:
      checkAndUpdateElementValue(view, def, 2, v2);
    case 2:
      checkAndUpdateElementValue(view, def, 1, v1);
    case 1:
      checkAndUpdateElementValue(view, def, 0, v0);
  }
}

export function checkAndUpdateElementDynamic(view: ViewData, def: NodeDef, values: any[]) {
  for (let i = 0; i < values.length; i++) {
    checkAndUpdateElementValue(view, def, i, values[i]);
  }
}

function checkAndUpdateElementValue(view: ViewData, def: NodeDef, bindingIdx: number, value: any) {
  if (!checkAndUpdateBinding(view, def, bindingIdx, value)) {
    return;
  }
  value = unwrapValue(value);

  const binding = def.bindings[bindingIdx];
  const name = binding.name;
  const renderNode = asElementData(view, def.index).renderElement;
  switch (binding.type) {
    case BindingType.ElementAttribute:
      setElementAttribute(view, binding, renderNode, name, value);
      break;
    case BindingType.ElementClass:
      setElementClass(view, renderNode, name, value);
      break;
    case BindingType.ElementStyle:
      setElementStyle(view, binding, renderNode, name, value);
      break;
    case BindingType.ElementProperty:
      setElementProperty(view, binding, renderNode, name, value);
      break;
  }
}

function setElementAttribute(
    view: ViewData, binding: BindingDef, renderNode: any, name: string, value: any) {
  const securityContext = binding.securityContext;
  let renderValue = securityContext ? view.root.sanitizer.sanitize(securityContext, value) : value;
  renderValue = renderValue != null ? renderValue.toString() : null;
  if (view.renderer) {
    view.renderer.setElementAttribute(renderNode, name, renderValue);
  } else {
    if (value != null) {
      renderNode.setAttribute(name, renderValue);
    } else {
      renderNode.removeAttribute(name);
    }
  }
}

function setElementClass(view: ViewData, renderNode: any, name: string, value: boolean) {
  if (view.renderer) {
    view.renderer.setElementClass(renderNode, name, value);
  } else {
    if (value) {
      renderNode.classList.add(name);
    } else {
      renderNode.classList.remove(name);
    }
  }
}

function setElementStyle(
    view: ViewData, binding: BindingDef, renderNode: any, name: string, value: any) {
  let renderValue = view.root.sanitizer.sanitize(SecurityContext.STYLE, value);
  if (renderValue != null) {
    renderValue = renderValue.toString();
    const unit = binding.suffix;
    if (unit != null) {
      renderValue = renderValue + unit;
    }
  } else {
    renderValue = null;
  }
  if (view.renderer) {
    view.renderer.setElementStyle(renderNode, name, renderValue);
  } else {
    if (renderValue != null) {
      renderNode.style[name] = renderValue;
    } else {
      // IE requires '' instead of null
      // see https://github.com/angular/angular/issues/7916
      (renderNode.style as any)[name] = '';
    }
  }
}

function setElementProperty(
    view: ViewData, binding: BindingDef, renderNode: any, name: string, value: any) {
  const securityContext = binding.securityContext;
  let renderValue = securityContext ? view.root.sanitizer.sanitize(securityContext, value) : value;
  if (view.renderer) {
    view.renderer.setElementProperty(renderNode, name, renderValue);
    if (isDevMode() && (view.def.flags & ViewFlags.DirectDom) === 0) {
      setBindingDebugInfo(view.renderer, renderNode, name, renderValue);
    }
  } else {
    renderNode[name] = renderValue;
  }
}