TypeScript dom_adapter.DOM类代码示例

 TimerWrapper.setTimeout(() => {
   var finishedDiv = DOM.createElement('div');
   finishedDiv.id = 'done';
   DOM.setInnerHTML(finishedDiv, 'Finished');
   DOM.appendChild(document.body, finishedDiv);
 }, 0);

 setTitle(newTitle: string) { DOM.setTitle(newTitle); }

  describe('ShadowCss', function() {

    function s(css: string, contentAttr: string, hostAttr: string = '') {
      var shadowCss = new ShadowCss();
      var shim = shadowCss.shimCssText(css, contentAttr, hostAttr);
      var nlRegexp = /\n/g;
      return normalizeCSS(StringWrapper.replaceAll(shim, nlRegexp, ''));
    }

    it('should handle empty string', () => { expect(s('', 'a')).toEqual(''); });

    it('should add an attribute to every rule', () => {
      var css = 'one {color: red;}two {color: red;}';
      var expected = 'one[a] {color:red;}two[a] {color:red;}';
      expect(s(css, 'a')).toEqual(expected);
    });

    it('should hanlde invalid css', () => {
      var css = 'one {color: red;}garbage';
      var expected = 'one[a] {color:red;}';
      expect(s(css, 'a')).toEqual(expected);
    });

    it('should add an attribute to every selector', () => {
      var css = 'one, two {color: red;}';
      var expected = 'one[a], two[a] {color:red;}';
      expect(s(css, 'a')).toEqual(expected);
    });

    it('should handle media rules', () => {
      var css = '@media screen and (max-width:800px) {div {font-size:50px;}}';
      var expected = '@media screen and (max-width:800px) {div[a] {font-size:50px;}}';
      expect(s(css, 'a')).toEqual(expected);
    });

    it('should handle media rules with simple rules', () => {
      var css = '@media screen and (max-width: 800px) {div {font-size: 50px;}} div {}';
      var expected = '@media screen and (max-width:800px) {div[a] {font-size:50px;}}div[a] {}';
      expect(s(css, 'a')).toEqual(expected);
    });

    // Check that the browser supports unprefixed CSS animation
    if (isPresent(DOM.defaultDoc().body.style) &&
        isPresent(DOM.defaultDoc().body.style.animationName)) {
      it('should handle keyframes rules', () => {
        var css = '@keyframes foo {0% {transform: translate(-50%) scaleX(0);}}';
        var passRe = /@keyframes foo {\s*0% {\s*transform:translate\(-50%\) scaleX\(0\);\s*}\s*}/g;
        expect(RegExpWrapper.test(passRe, s(css, 'a'))).toEqual(true);
      });
    }

    if (DOM.getUserAgent().indexOf('AppleWebKit') > -1 &&
        DOM.getUserAgent().indexOf('Edge') == -1) {
      it('should handle -webkit-keyframes rules', () => {
        var css = '@-webkit-keyframes foo {0% {-webkit-transform: translate(-50%) scaleX(0);}}';
        var passRe =
            /@-webkit-keyframes foo {\s*0% {\s*(-webkit-)*transform:translate\(-50%\) scaleX\(0\);\s*}}/g;
        expect(RegExpWrapper.test(passRe, s(css, 'a'))).toEqual(true);
      });
    }

    it('should handle complicated selectors', () => {
      expect(s('one::before {}', 'a')).toEqual('one[a]::before {}');
      expect(s('one two {}', 'a')).toEqual('one[a] two[a] {}');
      expect(s('one>two {}', 'a')).toEqual('one[a] > two[a] {}');
      expect(s('one+two {}', 'a')).toEqual('one[a] + two[a] {}');
      expect(s('one~two {}', 'a')).toEqual('one[a] ~ two[a] {}');
      var res = s('.one.two > three {}', 'a');  // IE swap classes
      expect(res == '.one.two[a] > three[a] {}' || res == '.two.one[a] > three[a] {}')
          .toEqual(true);
      expect(s('one[attr="value"] {}', 'a')).toEqual('one[attr="value"][a] {}');
      expect(s('one[attr=value] {}', 'a')).toEqual('one[attr="value"][a] {}');
      expect(s('one[attr^="value"] {}', 'a')).toEqual('one[attr^="value"][a] {}');
      expect(s('one[attr$="value"] {}', 'a')).toEqual('one[attr$="value"][a] {}');
      expect(s('one[attr*="value"] {}', 'a')).toEqual('one[attr*="value"][a] {}');
      expect(s('one[attr|="value"] {}', 'a')).toEqual('one[attr|="value"][a] {}');
      expect(s('one[attr] {}', 'a')).toEqual('one[attr][a] {}');
      expect(s('[is="one"] {}', 'a')).toEqual('[is="one"][a] {}');
    });

    it('should handle :host', () => {
      expect(s(':host {}', 'a', 'a-host')).toEqual('[a-host] {}');
      expect(s(':host(.x,.y) {}', 'a', 'a-host')).toEqual('[a-host].x, [a-host].y {}');
      expect(s(':host(.x,.y) > .z {}', 'a', 'a-host'))
          .toEqual('[a-host].x > .z, [a-host].y > .z {}');
    });

    it('should handle :host-context', () => {
      expect(s(':host-context(.x) {}', 'a', 'a-host')).toEqual('[a-host].x, .x [a-host] {}');
      expect(s(':host-context(.x) > .y {}', 'a', 'a-host'))
          .toEqual('[a-host].x > .y, .x [a-host] > .y {}');
    });

    it('should support polyfill-next-selector', () => {
      var css = s("polyfill-next-selector {content: 'x > y'} z {}", 'a');
      expect(css).toEqual('x[a] > y[a] {}');

      css = s('polyfill-next-selector {content: "x > y"} z {}', 'a');
      expect(css).toEqual('x[a] > y[a] {}');
    });
//.........这里部分代码省略.........

 .then((view) => {
   view.detectChanges();
   expect(DOM.getText(view.rootNodes[0])).toEqual('foo{{text}}');
   async.done();
 });

 constructor(el: ElementRef) { DOM.addClass(el.nativeElement, 'compiled'); }

 prepareShadowRoot(el): Node { return DOM.createShadowRoot(el); }

function _injectorBindings(appComponentType): List<Type | Binding | List<any>> {
  return [
    bind(DOCUMENT_TOKEN)
        .toValue(DOM.defaultDoc()),
    bind(appComponentTypeToken).toValue(appComponentType),
    bind(appComponentRefToken)
        .toAsyncFactory((dynamicComponentLoader, injector, testability, registry) =>
                        {

                          // TODO(rado): investigate whether to support bindings on root component.
                          return dynamicComponentLoader.loadAsRoot(appComponentType, null, injector)
                              .then((componentRef) => {
                                var domView = resolveInternalDomView(componentRef.hostView.render);
                                // We need to do this here to ensure that we create Testability and
                                // it's ready on the window for users.
                                registry.registerApplication(domView.boundElements[0], testability);

                                return componentRef;
                              });
                        },
                        [DynamicComponentLoader, Injector, Testability, TestabilityRegistry]),

    bind(appComponentType).toFactory((ref) => ref.instance, [appComponentRefToken]),
    bind(LifeCycle)
        .toFactory((exceptionHandler) => new LifeCycle(exceptionHandler, null, assertionsEnabled()),
                   [ExceptionHandler]),
    bind(EventManager)
        .toFactory(
            (ngZone) =>
            {
                var plugins = [
                    //new HammerGesturesPlugin(),
                    //new KeyEventsPlugin(),
                    //new DomEventsPlugin()
                ];
                return new EventManager(plugins, ngZone);
            },
            [NgZone]),
    bind(ShadowDomStrategy)
        .toFactory(
            (styleUrlResolver, doc) => {
                console.log('strategy doc', doc);
                new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, doc.head)
            },
            [StyleUrlResolver, DOCUMENT_TOKEN]
        ),
    // TODO(tbosch): We need an explicit factory here, as
    // we are getting errors in dart2js with mirrors...
    bind(DomRenderer)
        .toFactory(
            (eventManager, shadowDomStrategy, doc) => {
                console.log('renderer doc', doc);
                new DomRenderer(eventManager, shadowDomStrategy, doc)
            },
            [EventManager, ShadowDomStrategy, DOCUMENT_TOKEN]
        ),
    bind(Renderer).toAlias(DomRenderer),
    TestDomCompiler,
    bind(RenderCompiler).toAlias(TestDomCompiler),
    //// // TODO(tbosch): We need an explicit factory here, as
    //// // we are getting errors in dart2js with mirrors...
    bind(AppViewPool).toFactory((capacity) => new AppViewPool(capacity), [APP_VIEW_POOL_CAPACITY]),
    bind(APP_VIEW_POOL_CAPACITY).toValue(10000),
    DirectiveResolver,
    bind(AppViewManagerUtils).toFactory(
        (directiveResolver) => new AppViewManagerUtils(directiveResolver),
        [DirectiveResolver]
    ),
    bind(AppViewManager).toFactory(
        (viewPool, utils, renderer) => new AppViewManager(viewPool, utils, renderer),
        [AppViewPool, AppViewManagerUtils, Renderer]
    ),
    bind(Compiler).toFactory(
        (reader, cache, templateResolver,
         componentUrlMapper, urlResolver,
         render, protoViewFactory) => {
         },
         [DirectiveResolver, CompilerCache, TemplateResolver,
          ComponentUrlMapper, UrlResolver,
          RenderCompiler, ProtoViewFactory]
    ),
    CompilerCache,
    TemplateResolver,
    bind(PipeRegistry).toValue(defaultPipeRegistry),
    bind(ChangeDetection).toFactory(
        pipeRegistry => new DynamicChangeDetection(pipeRegistry),
        [PipeRegistry]
    ),
    bind(ProtoViewFactory).toFactory(
        changeDetection => new ProtoViewFactory(changeDetection),
        [ChangeDetection]
    ),
    bind(TemplateLoader).toFactory(
        (xhr, urlResolver) => new TemplateLoader(xhr, urlResolver),
        [XHR, UrlResolver]
    ),
    Lexer,
    bind(Parser).toFactory(
        (lexer, reflector) => new Parser(lexer, reflector),
        [Lexer, Reflector]
//.........这里部分代码省略.........

 return (debugElement) => { return DOM.elementMatches(debugElement.nativeElement, selector); };

function _injectorBindings(appComponentType): List<Type | Binding | List<any>> {
  var bestChangeDetection: Type = DynamicChangeDetection;
  if (PreGeneratedChangeDetection.isSupported()) {
    bestChangeDetection = PreGeneratedChangeDetection;
  } else if (JitChangeDetection.isSupported()) {
    bestChangeDetection = JitChangeDetection;
  }
  return [
    bind(DOCUMENT_TOKEN)
        .toValue(DOM.defaultDoc()),
    bind(appComponentTypeToken).toValue(appComponentType),
    bind(appComponentRefToken)
        .toAsyncFactory(
            (dynamicComponentLoader, injector, testability, registry) => {

              // TODO(rado): investigate whether to support bindings on root component.
              return dynamicComponentLoader.loadAsRoot(appComponentType, null, injector)
                  .then((componentRef) => {
                    var domView = resolveInternalDomView(componentRef.hostView.render);
                    // We need to do this here to ensure that we create Testability and
                    // it's ready on the window for users.
                    registry.registerApplication(domView.boundElements[0].element, testability);

                    return componentRef;
                  });
            },
            [DynamicComponentLoader, Injector, Testability, TestabilityRegistry]),

    bind(appComponentType).toFactory((ref) => ref.instance, [appComponentRefToken]),
    bind(LifeCycle)
        .toFactory((exceptionHandler) => new LifeCycle(exceptionHandler, null, assertionsEnabled()),
                   [ExceptionHandler]),
    bind(EventManager)
        .toFactory(
            (ngZone) => {
              var plugins =
                  [new HammerGesturesPlugin(), new KeyEventsPlugin(), new DomEventsPlugin()];
              return new EventManager(plugins, ngZone);
            },
            [NgZone]),
    bind(ShadowDomStrategy)
        .toFactory((styleInliner, styleUrlResolver, doc) => new EmulatedUnscopedShadowDomStrategy(
                       styleInliner, styleUrlResolver, doc.head),
                   [StyleInliner, StyleUrlResolver, DOCUMENT_TOKEN]),
    DomRenderer,
    DefaultDomCompiler,
    bind(Renderer).toAlias(DomRenderer),
    bind(RenderCompiler).toAlias(DefaultDomCompiler),
    ProtoViewFactory,
    AppViewPool,
    bind(APP_VIEW_POOL_CAPACITY).toValue(10000),
    AppViewManager,
    AppViewManagerUtils,
    AppViewListener,
    Compiler,
    CompilerCache,
    TemplateResolver,
    bind(PipeRegistry).toValue(defaultPipeRegistry),
    bind(ChangeDetection).toClass(bestChangeDetection),
    TemplateLoader,
    DirectiveResolver,
    Parser,
    Lexer,
    ExceptionHandler,
    bind(XHR).toValue(new XHRImpl()),
    ComponentUrlMapper,
    UrlResolver,
    StyleUrlResolver,
    StyleInliner,
    DynamicComponentLoader,
    Testability
  ];
}

 constructor() {
   super();
   this._location = DOM.getLocation();
   this._history = DOM.getHistory();
   this._baseHref = DOM.getBaseHref();
 }