TypeScript DomEvent.capture方法代碼示例

const setupEvents = (editor: Editor) => {
  const contentWindow = editor.getWin();
  const initialDocEle = editor.getDoc().documentElement;

  const lastWindowDimensions = Cell(Position(contentWindow.innerWidth, contentWindow.innerHeight));
  const lastDocumentDimensions = Cell(Position(initialDocEle.offsetWidth, initialDocEle.offsetHeight));

  const resize = () => {
    // Don't use the initial doc ele, as there's a small chance it may have changed
    const docEle = editor.getDoc().documentElement;

    // Check if the window or document dimensions have changed and if so then trigger a content resize event
    const outer = lastWindowDimensions.get();
    const inner = lastDocumentDimensions.get();
    if (outer.left() !== contentWindow.innerWidth || outer.top() !== contentWindow.innerHeight) {
      lastWindowDimensions.set(Position(contentWindow.innerWidth, contentWindow.innerHeight));
      Events.fireResizeContent(editor);
    } else if (inner.left() !== docEle.offsetWidth || inner.top() !== docEle.offsetHeight) {
      lastDocumentDimensions.set(Position(docEle.offsetWidth, docEle.offsetHeight));
      Events.fireResizeContent(editor);
    }
  };

  DOM.bind(contentWindow, 'resize', resize);

  // Bind to async load events and trigger a content resize event if the size has changed
  const elementLoad = DomEvent.capture(Element.fromDom(editor.getBody()), 'load', resize);

  editor.on('remove', () => {
    elementLoad.unbind();
    DOM.unbind(contentWindow, 'resize', resize);
  });
};

//.........這裏部分代碼省略.........

  const onToolbarTouch = function (event) {
    iosApi.run(function (api) {
      api.onToolbarTouch(event);
    });
  };

  const tapping = TappingEvent.monitor(editorApi);

  const refreshThrottle = Throttler.last(refreshView, 300);
  const listeners = [
    // Clear any fake selections, scroll to cursor, and update the iframe height
    editorApi.onKeyup(clearAndRefresh),
    // Update any fake selections that are showing
    editorApi.onNodeChanged(refreshIosSelection),

    // Scroll to cursor, and update the iframe height
    editorApi.onDomChanged(refreshThrottle.throttle),
    // Update any fake selections that are showing
    editorApi.onDomChanged(refreshIosSelection),

    // Scroll to cursor and update the iframe height
    editorApi.onScrollToCursor(function (tinyEvent) {
      tinyEvent.preventDefault();
      refreshThrottle.throttle();
    }),

    // Scroll to element
    editorApi.onScrollToElement(function (event) {
      scrollToElement(event.element());
    }),

    // Focus the content and show the keyboard
    editorApi.onToEditing(toEditing),

    // Dismiss keyboard
    editorApi.onToReading(toReading),

    // If the user is touching outside the content, but on the body(?) or html elements, find the nearest selection
    // and focus that.
    DomEvent.bind(editorApi.doc(), 'touchend', function (touchEvent) {
      if (Compare.eq(editorApi.html(), touchEvent.target()) || Compare.eq(editorApi.body(), touchEvent.target())) {
        // IosHacks.setSelectionAtTouch(editorApi, touchEvent);
      }
    }),

    // Listen to the toolstrip growing animation so that we can update the position of the socket once it is done.
    DomEvent.bind(toolstrip, 'transitionend', function (transitionEvent) {
      if (transitionEvent.raw().propertyName === 'height') {
        reposition();
      }
    }),

    // Capture the start of interacting with a toolstrip. It is most likely going to lose the selection, so we save it
    // before that happens
    DomEvent.capture(toolstrip, 'touchstart', function (touchEvent) {
      // When touching the toolbar, the first thing that we need to do is 'represent' the selection. We do this with
      // a fake selection. As soon as the focus switches away from the content, the real selection will disappear, so
      // this lets the user still see their selection.

      saveSelectionFirst();

      // Then, depending on the keyboard mode, we may need to do something else (like dismiss the keyboard)
      onToolbarTouch(touchEvent);

      // Fire the touchstart event to the theme for things like hiding dropups
      editorApi.onTouchToolstrip();
    }),

    // When the user clicks back into the content, clear any fake selections
    DomEvent.bind(editorApi.body(), 'touchstart', function (evt) {
      clearSelection();
      editorApi.onTouchContent();
      tapping.fireTouchstart(evt);
    }),

    tapping.onTouchmove(),
    tapping.onTouchend(),

    // Stop any "clicks" being processed in the body at alls
    DomEvent.bind(editorApi.body(), 'click', function (event) {
      event.kill();
    }),

    // Close any menus when scrolling the toolstrip
    DomEvent.bind(toolstrip, 'touchmove', function (/* event */) {
      editorApi.onToolbarScrollStart();
    })
  ];

  const destroy = function () {
    Arr.each(listeners, function (l) {
      l.unbind();
    });
  };

  return {
    destroy
  };
};