TypeScript sugar.DomEvent類代碼示例

const exclusive = function (scope, selector) {
  return DomEvent.bind(scope, 'touchmove', function (event) {
    SelectorFind.closest(event.target(), selector).filter(hasScroll).fold(function () {
      event.raw().preventDefault();
    }, Fun.noop);
  });
};

const setup = function (outerWindow, cWin) {
  const cBody = Element.fromDom(cWin.document.body);

  const toEditing = function () {
    // TBIO-3816 throttling the resume was causing keyboard hide/show issues with undo/redo
    // throttling was introduced to work around a different keyboard hide/show issue, where
    // async uiChanged in Processor in polish was causing keyboard hide, which no longer seems to occur
    ResumeEditing.resume(cWin);
  };

  const onResize = DomEvent.bind(Element.fromDom(outerWindow), 'resize', function () {

    findDelta(outerWindow, cBody).each(function (delta) {
      getBounds(cWin).each(function (bounds) {
        // If the top is offscreen, scroll it into view.
        const cScrollBy = calculate(cWin, bounds, delta);
        if (cScrollBy !== 0) {
          cWin.scrollTo(cWin.pageXOffset, cWin.pageYOffset + cScrollBy);
        }
      });
    });
    setLastHeight(cBody, outerWindow.innerHeight);
  });

  setLastHeight(cBody, outerWindow.innerHeight);

  const destroy = function () {
    onResize.unbind();
  };

  return {
    toEditing,
    destroy
  };
};

  return Step.stateful(function (_, next, die) {
    const onKeydown = DomEvent.bind(body, 'keydown', function (event) {
      newState.log.push('keydown.to.body: ' + event.raw().which);
    });

    const log = [ ];
    const newState = {
      log,
      onKeydown
    };
    next(newState);
  });

      AlloyEvents.runOnAttached(() => {
        const unbind = DomEvent.bind(Element.fromDom(window), 'message', (e) => {
          // Validate that the request came from the correct domain
          if (iframeUri.isSameOrigin(new URI(e.raw().origin))) {
            const data = e.raw().data;

            // Handle the message if it has the 'mceAction' key, otherwise just ignore it
            if (isSupportedMessage(data)) {
              handleMessage(editor, instanceApi, data);
            } else if (isCustomMessage(data)) {
              internalDialog.onMessage(instanceApi, data);
            }
          }
        });
        messageHandlerUnbinder.set(Option.some(unbind));
      }),

const onChange = function (outerWindow, listeners) {
  const win = Element.fromDom(outerWindow);
  let poller = null;

  const change = function () {
    // If a developer is spamming orientation events in the simulator, clear our last check
    clearInterval(poller);

    const orientation = get(outerWindow);
    listeners.onChange(orientation);

    onAdjustment(function () {
      // We don't care about whether there was a resize or not.
      listeners.onReady(orientation);
    });
  };

  const orientationHandle = DomEvent.bind(win, 'orientationchange', change);

  const onAdjustment = function (f) {
    // If a developer is spamming orientation events in the simulator, clear our last check
    clearInterval(poller);

    const flag = outerWindow.innerHeight;
    let insurance = 0;
    poller = setInterval(function () {
      if (flag !== outerWindow.innerHeight) {
        clearInterval(poller);
        f(Option.some(outerWindow.innerHeight));
      } else if (insurance > INSURANCE) {
        clearInterval(poller);
        f(Option.none());
      }
      insurance++;
    }, INTERVAL);
  };

  const destroy = function () {
    orientationHandle.unbind();
  };

  return {
    onAdjustment,
    destroy
  };
};

  editor.on('init', () => {
    const scroller = editor.getBody().ownerDocument.defaultView;

    // FIX: make a lot nicer.
    const onScroll = DomEvent.bind(Element.fromDom(scroller), 'scroll', () => {
      lastAnchor.get().each((anchor) => {
        const elem = lastElement.get().getOr(editor.selection.getNode());
        const nodeBounds = elem.getBoundingClientRect();
        const contentAreaBounds = editor.contentAreaContainer.getBoundingClientRect();
        const aboveEditor = nodeBounds.bottom < 0;
        const belowEditor = nodeBounds.top > contentAreaBounds.height;
        if (aboveEditor || belowEditor) {
          Css.set(contextbar.element(), 'display', 'none');
        } else {
          Css.remove(contextbar.element(), 'display');
          Positioning.positionWithin(sink, anchor, contextbar, getBoxElement());
        }
      });
    });

    editor.on('remove', () => {
      onScroll.unbind();
    });
  });

export default function (win, frame) {
  // NOTE: This may be required for android also.

  /*
   * FakeSelection is used to draw rectangles around selection so that when the content loses
   * focus, the selection is still visible. The selections should match the current content
   * selection, and be removed as soon as the user clicks on them (because the content will
   * get focus again)
   */
  const doc = win.document;

  const container = Element.fromTag('div');
  Class.add(container, Styles.resolve('unfocused-selections'));

  Insert.append(Element.fromDom(doc.documentElement), container);

  const onTouch = DomEvent.bind(container, 'touchstart', function (event) {
    // We preventDefault the event incase the touch is between 2 letters creating a new collapsed selection,
    // in this very specific case we just want to turn the fake cursor into a real cursor.  Remember that
    // touchstart may be used to dimiss popups too, so don't kill it completely, just prevent its
    // default native selection
    event.prevent();
    ResumeEditing.resume(win, frame);
    clear();
  });

  const make = function (rectangle) {
    const span = Element.fromTag('span');
    Classes.add(span, [ Styles.resolve('layer-editor'), Styles.resolve('unfocused-selection') ]);
    Css.setAll(span, {
      left: rectangle.left() + 'px',
      top: rectangle.top() + 'px',
      width: rectangle.width() + 'px',
      height: rectangle.height() + 'px'
    });
    return span;
  };

  const update = function () {
    clear();
    const rectangles = Rectangles.getRectangles(win);
    const spans = Arr.map(rectangles, make);
    InsertAll.append(container, spans);
  };

  const clear = function () {
    Remove.empty(container);
  };

  const destroy = function () {
    onTouch.unbind();
    Remove.remove(container);
  };

  const isActive = function () {
    return Traverse.children(container).length > 0;
  };

  return {
    update,
    isActive,
    destroy,
    clear
  };
}

const setup = function (bag) {
  const cWin = bag.cWin();
  const ceBody = bag.ceBody();
  const socket = bag.socket();
  const toolstrip = bag.toolstrip();
  const toolbar = bag.toolbar();
  const contentElement = bag.contentElement();
  const keyboardType = bag.keyboardType();
  const outerWindow = bag.outerWindow();
  const dropup = bag.dropup();

  const structure = IosViewport.takeover(socket, ceBody, toolstrip, dropup);
  const keyboardModel = keyboardType(bag.outerBody(), cWin, Body.body(), contentElement, toolstrip, toolbar);

  const toEditing = function () {
    // Consider inlining, though it will make it harder to follow the API
    keyboardModel.toEditing();
    clearSelection();
  };

  const toReading = function () {
    keyboardModel.toReading();
  };

  const onToolbarTouch = function (event) {
    keyboardModel.onToolbarTouch(event);
  };

  const onOrientation = Orientation.onChange(outerWindow, {
    onChange: Fun.noop,
    onReady: structure.refresh
  });

  // NOTE: When the window is resizing (probably due to meta tags and viewport definitions), we are not receiving a window resize event.
  // However, it happens shortly after we start Ios mode, so here we just wait for the first window size event that we get. This code
  // is also the same code that is used for the Orientation ready event.
  onOrientation.onAdjustment(function () {
    structure.refresh();
  });

  const onResize = DomEvent.bind(Element.fromDom(outerWindow), 'resize', function () {
    if (structure.isExpanding()) {
      structure.refresh();
    }
  });

  const onScroll = register(toolstrip, socket, bag.outerBody(), outerWindow, structure, cWin);

  const unfocusedSelection = FakeSelection(cWin, contentElement);

  const refreshSelection = function () {
    if (unfocusedSelection.isActive()) {
      unfocusedSelection.update();
    }
  };

  const highlightSelection = function () {
    unfocusedSelection.update();
  };

  const clearSelection = function () {
    unfocusedSelection.clear();
  };

  const scrollIntoView = function (top, bottom) {
    Greenzone.scrollIntoView(cWin, socket, dropup, top, bottom);
  };

  const syncHeight = function () {
    Css.set(contentElement, 'height', contentElement.dom().contentWindow.document.body.scrollHeight + 'px');
  };

  const setViewportOffset = function (newYOffset) {
    structure.setViewportOffset(newYOffset);
    IosScrolling.moveOnlyTop(socket, newYOffset).get(Fun.identity);
  };

  const destroy = function () {
    structure.restore();
    onOrientation.destroy();
    onScroll.unbind();
    onResize.unbind();
    keyboardModel.destroy();

    unfocusedSelection.destroy();

    // Try and dismiss the keyboard on close, as they have no input focus.
    CaptureBin.input(Body.body(), Focus.blur);
  };

  return {
    toEditing,
    toReading,
    onToolbarTouch,
    refreshSelection,
    clearSelection,
    highlightSelection,
    scrollIntoView,
    updateToolbarPadding: Fun.noop,
    setViewportOffset,
//.........這裏部分代碼省略.........

UnitTest.asynctest('Browser Test: ios.IosRealmTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];
  const detection = PlatformDetection.detect();

  const realm = IosRealm(Fun.noop);

  const unload = function () {
    Remove.remove(iframe);
    Attachment.detachSystem(realm.system());
  };

  const iframe = Element.fromTag('iframe');
  Css.set(iframe, 'height', '400px');
  const onload = DomEvent.bind(iframe, 'load', function () {
    const head = Element.fromDom(iframe.dom().contentWindow.document.head);
    const body = Element.fromDom(iframe.dom().contentWindow.document.body);
    Attachment.attachSystem(body, realm.system());

    Css.set(body, 'margin', '0px');

    const css = Element.fromTag('link');
    Attr.setAll(css, {
      href: '/project/tinymce/js/tinymce/skins/ui/oxide/skin.mobile.min.css',
      rel: 'Stylesheet',
      type: 'text/css'
    });
    Insert.append(head, css);
    onload.unbind();

    const editor = Element.fromTag('iframe');
    Attr.set(editor, 'src', '/project/tinymce/src/themes/mobile/test/html/editor.html');
    Replacing.append(
      realm.system().getByDom(Element.fromDom(
        realm.element().dom().querySelector('.tinymce-mobile-editor-socket'))
      ).getOrDie(),
      GuiFactory.external({
        element: editor
      })
    );

    realm.init({
      editor: {
        getFrame () {
          return editor;
        },
        onDomChanged () {
          return { unbind: Fun.noop };
        }
      },
      container: realm.element(),
      socket: Element.fromDom(realm.element().dom().querySelector('.tinymce-mobile-editor-socket')),
      toolstrip: Element.fromDom(realm.element().dom().querySelector('.tinymce-mobile-toolstrip')),
      toolbar: Element.fromDom(realm.element().dom().querySelector('.tinymce-mobile-toolbar')),
      alloy: realm.system(),
      dropup: realm.dropup()
    });
  });

  Insert.append(Body.body(), iframe);

  const getCursorY = function (target) {
    /* The y position on the cursor for the viewer is a combination of y position of the editor frame and the y
     * y position of the target
     */
    const editorY = iframe.dom().contentWindow.document.querySelector('iframe').getBoundingClientRect().top;
    const targetY = target.dom().getBoundingClientRect().top;
    // tslint:disable-next-line:no-console
    console.log('editorY', editorY, 'targetY', targetY);
    return editorY + targetY;
  };

  const mShowKeyboard = function (selector, index) {
    const keyboardHeight = 200;
    return Step.stateful(function (value, next, die) {
      const pageBody = iframe.dom().contentWindow.document.body;
      const editorBody = pageBody.querySelector('iframe').contentWindow.document.body;
      const target: any = Option.from(editorBody.querySelectorAll(selector)[index]).map(Element.fromDom).getOrDie('no index ' + index + ' for selector: ' + selector);
      WindowSelection.setExact(editorBody.ownerDocument.defaultView, target, 0, target, 0);
      const socket = pageBody.querySelector('.tinymce-mobile-editor-socket');
      socket.scrollTop = target.dom().getBoundingClientRect().top - 100 - keyboardHeight;
      pageBody.style.setProperty('margin-bottom', '2000px');
      pageBody.ownerDocument.defaultView.scrollTo(0, keyboardHeight);

      //
      const cursorY = getCursorY(target);
      const newValue = Merger.deepMerge(
        value,
        {
          target,
          cursorY
        }
      );
      // tslint:disable-next-line:no-console
      console.log('newValue', newValue);
      next(newValue);
    });
  };

  Pipeline.async({}, detection.browser.isChrome() ? [
//.........這裏部分代碼省略.........