TypeScript DomEvent.bind方法代碼示例

    Chain.on(function (element, next, die) {
      const unbindMouseMove = DomEvent.bind(element, 'mousemove', function (e) {
        Clicks.mouseup(element);
        unbindMouseMove();
        next(Chain.wrap(element));
      }).unbind;

      const unbindMouseDown = DomEvent.bind(element, 'mousedown', function (e) {
        Clicks.mousemove(element); // not sure if xy actually matters here
        unbindMouseDown();
      }).unbind;

      Clicks.mousedown(element);
    })

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
  };
};

const stubborn = function (outerBody, cWin, page, frame/*, toolstrip, toolbar*/) {
  const toEditing = function () {
    ResumeEditing.resume(cWin, frame);
  };

  const toReading = function () {
    CaptureBin.input(outerBody, Focus.blur);
  };

  const captureInput = DomEvent.bind(page, 'keydown', function (evt) {
    // Think about killing the event.
    if (! Arr.contains([ 'input', 'textarea' ], Node.name(evt.target()))) {

      // FIX: Close the menus
      // closeMenus()

      toEditing();
    }
  });

  const onToolbarTouch = function (/* event */) {
    // Do nothing
  };

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

  return {
    toReading,
    toEditing,
    onToolbarTouch,
    destroy
  };
};

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);
  });
};

  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
  };
}

 return function (handler) {
   return DomEvent.bind(doc, type, handler);
 };