TypeScript katamari.Throttler類代碼示例

const setup = function (editor) {
  const renderFocusCaret = Throttler.first(function () {
    if (!editor.removed) {
      const caretRange = CefUtils.renderRangeCaret(editor, editor.selection.getRng());
      editor.selection.setRng(caretRange);
    }
  }, 0);

  editor.on('focus', function () {
    renderFocusCaret.throttle();
  });

  editor.on('blur', function () {
    renderFocusCaret.cancel();
  });
};

const register = function (editor) {
  const throttledStore = Throttler.first(function () {
    SelectionBookmark.store(editor);
  }, 0);

  if (editor.inline) {
    registerPageMouseUp(editor, throttledStore);
  }

  editor.on('init', function () {
    registerEditorEvents(editor, throttledStore);
  });

  editor.on('remove', function () {
    throttledStore.cancel();
  });
};

const setup = function (editor) {
  const renderFocusCaret = Throttler.first(function () {
    if (!editor.removed) {
      const rng = editor.selection.getRng();
      if (rng.collapsed) { // see TINY-1479
        const caretRange = CefUtils.renderRangeCaret(editor, editor.selection.getRng(), false);
        editor.selection.setRng(caretRange);
      }
    }
  }, 0);

  editor.on('focus', function () {
    renderFocusCaret.throttle();
  });

  editor.on('blur', function () {
    renderFocusCaret.cancel();
  });
};

const sketch = function (onView, translate): SketchSpec {

  const memIcon = Memento.record(
    Container.sketch({
      dom: UiDomFactory.dom('<div aria-hidden="true" class="${prefix}-mask-tap-icon"></div>'),
      containerBehaviours: Behaviour.derive([
        Toggling.config({
          toggleClass: Styles.resolve('mask-tap-icon-selected'),
          toggleOnExecute: false
        })
      ])
    })
  );

  const onViewThrottle = Throttler.first(onView, 200);

  return Container.sketch({
    dom: UiDomFactory.dom('<div class="${prefix}-disabled-mask"></div>'),
    components: [
      Container.sketch({
        dom: UiDomFactory.dom('<div class="${prefix}-content-container"></div>'),
        components: [
          Button.sketch({
            dom: UiDomFactory.dom('<div class="${prefix}-content-tap-section"></div>'),
            components: [
              memIcon.asSpec()
            ],
            action (button) {
              onViewThrottle.throttle();
            },

            buttonBehaviours: Behaviour.derive([
              Toggling.config({
                toggleClass: Styles.resolve('mask-tap-icon-selected')
              })
            ])
          })
        ]
      })
    ]
  });
};

const setupIeInput = (editor: Editor) => {
  // We need to delay this since the normalization should happen after typing a letter
  // for example typing a<space>b in a paragraph would otherwise result in a a&nbsp;b
  const keypressThrotter = Throttler.first(() => {
    // We only care about non composing inputs since moving the caret or modifying the text node will blow away the IME
    if (!editor.composing) {
      normalizeNbspsInEditor(editor);
    }
  }, 0);

  if (browser.isIE()) {
    // IE doesn't have the input event so we need to fake that with a keypress on IE keypress is only fired on alpha numeric keys
    editor.on('keypress', (e) => {
      keypressThrotter.throttle();
    });

    editor.on('remove', (e) => {
      keypressThrotter.cancel();
    });
  }
};

const setup = function (editor: Editor) {
  const renderFocusCaret = Throttler.first(function () {
    // AP-24 Added the second condition in this if because of a race condition with setting focus on the PowerPaste
    // remove/keep formatting dialog on paste in IE11. Without this, because we paste twice on IE11, focus ends up set
    // in the editor, not the dialog buttons. Specifically, we focus, blur, focus, blur, focus then enter this throttled
    // code before the next blur has been able to run. With this check, this function doesn't run at all in this case,
    // so focus goes to the dialog's buttons correctly.
    if (!editor.removed && editor.getBody().contains(document.activeElement)) {
      const rng = editor.selection.getRng();
      if (rng.collapsed) { // see TINY-1479
        const caretRange = CefUtils.renderRangeCaret(editor, editor.selection.getRng(), false);
        editor.selection.setRng(caretRange);
      }
    }
  }, 0);

  editor.on('focus', function () {
    renderFocusCaret.throttle();
  });

  editor.on('blur', function () {
    renderFocusCaret.cancel();
  });
};

const register = function (toolstrip, socket, container, outerWindow, structure, cWin) {
  const scroller = BackgroundActivity(function (y) {
    return IosScrolling.moveWindowScroll(toolstrip, socket, y);
  });

  // NOTE: This is a WebView specific way of scrolling when out of bounds. When we need to make
  // the webapp work again, we'll have to adjust this function. Essentially, it just jumps the scroll
  // back to show the current selection rectangle.
  const scrollBounds = function () {
    const rects = Rectangles.getRectangles(cWin);
    return Option.from(rects[0]).bind(function (rect) {
      const viewTop = rect.top() - socket.dom().scrollTop;
      const outside = viewTop > outerWindow.innerHeight + VIEW_MARGIN || viewTop < -VIEW_MARGIN;
      return outside ? Option.some({
        top: Fun.constant(viewTop),
        bottom: Fun.constant(viewTop + rect.height())
      }) : Option.none();
    });
  };

  const scrollThrottle = Throttler.last(function () {
    /*
     * As soon as the window is back to 0 (idle), scroll the toolbar and socket back into place on scroll.
     */
    scroller.idle(function () {
      IosUpdates.updatePositions(container, outerWindow.pageYOffset).get(function (/* _ */) {
        const extraScroll = scrollBounds();
        extraScroll.each(function (extra) {
          // TODO: Smoothly animate this in a way that doesn't conflict with anything else.
          socket.dom().scrollTop = socket.dom().scrollTop + extra.top();
        });
        scroller.start(0);
        structure.refresh();
      });
    });
  }, 1000);

  const onScroll = DomEvent.bind(Element.fromDom(outerWindow), 'scroll', function () {
    if (outerWindow.pageYOffset < 0) {
      return;
    }

    /*
    We've experimented with trying to set the socket scroll (hidden vs. scroll) based on whether the outer body
    has scrolled. When the window starts scrolling, we would lock the socket scroll, and we would
    unlock it when the window stopped scrolling. This would give a nice rubber-band effect at the end
    of the content, but would break the code that tried to position the text in the viewable area
    (more details below). Also, as soon as you flicked to outer scroll, if you started scrolling up again,
    you would drag the whole window down, because you would still be in outerscroll mode. That's hardly
    much of a problem, but it is a minor issue. It also didn't play nicely with keeping the toolbar on the screen.

    The big problem was that this was incompatible with the toolbar and scrolling code. We need a padding inside
    the socket so that the bottom of the content can be scrolled into the viewable greenzone. If it doesn't
    have padding, then unless we move the socket top to some negative value as well, then we can't get
    a scrollTop high enough to get the selection into the viewable greenzone. This is the purpose of the
    padding at the bottom of the iframe. Without it, the scroll consistently jumps back to its
    max scroll value, and you can't keep the last line on screen when the keyboard is up.

    However, if the padding is too large, then the content can be 'effectively' scrolled off the screen
    (the iframe anyway), and the user can get lost about where they are. Our short-term fix is just to
    make the padding at the end the height - the greenzone height so that content should always be
    visible on the screen, even if they've scrolled to the end.
    */

    scrollThrottle.throttle();
  });

  IosUpdates.updatePositions(container, outerWindow.pageYOffset).get(Fun.identity);

  return {
    unbind: onScroll.unbind
  };
};

const open = function (editor: Editor, charMap: CharMap[]) {
  const makeGroupItems = (): Types.Dialog.BodyComponentApi[] => [
    {
      label: 'Search',
      type: 'input',
      name: patternName
    },
    {
      type: 'collection',
      name: 'results',
      // TODO TINY-3229 implement collection columns properly
      // columns: 'auto'
    }
  ];

  const makeTabs = () => {
    return Arr.map(charMap, (charGroup) => {
      return {
        title: charGroup.name,
        items: makeGroupItems()
      };
    });
  };

  const currentTab = charMap.length === 1 ? Cell(UserDefined) : Cell('All');

  const makePanel = (): Types.Dialog.PanelApi => ({ type: 'panel', items: makeGroupItems() });

  const makeTabPanel = (): Types.Dialog.TabPanelApi => ({ type: 'tabpanel', tabs: makeTabs() });

  const scanAndSet = (dialogApi: Types.Dialog.DialogInstanceApi<typeof initialData>, pattern: string) => {
    Arr.find(charMap, (group) => group.name === currentTab.get()).each((f) => {
      const items = Scan.scan(f, pattern);
      dialogApi.setData({
        results: items
      });
    });
  };

  const SEARCH_DELAY = 40;

  const updateFilter = Throttler.last((dialogApi: Types.Dialog.DialogInstanceApi<typeof initialData>) => {
    const pattern = dialogApi.getData().pattern;
    scanAndSet(dialogApi, pattern);
  }, SEARCH_DELAY);

  const body = charMap.length === 1 ? makePanel() : makeTabPanel();

  const initialData = {
    pattern: '',
    results: Scan.scan(charMap[0], '')
  };

  const bridgeSpec: Types.Dialog.DialogApi<typeof initialData> = {
    title: 'Special Character',
    size: 'normal',
    body,
    buttons: [
      {
        type: 'cancel',
        name: 'close',
        text: 'Close',
        primary: true
      }
    ],
    initialData,
    onAction(api, details) {
      if (details.name === 'results') {
        Actions.insertChar(editor, details.value);
        api.close();
      }
    },

    onTabChange: (dialogApi, title: string) => {
      currentTab.set(title);
      updateFilter.throttle(dialogApi);
    },

    onChange: (dialogApi, changeData) => {
      if (changeData.name === patternName) {
        updateFilter.throttle(dialogApi);
      }
    }
  };
  editor.windowManager.open(bridgeSpec);
};

const setup = (editor: Editor, registry: AnnotationsRegistry): AnnotationChanges => {
  const changeCallbacks = Cell<AnnotationListenerMap>({ });

  const initData = (): AnnotationListenerData => ({
    listeners: [ ],
    previous: Cell(Option.none())
  });

  const withCallbacks = (name: string, f: (listeners: AnnotationListenerData) => void) => {
    updateCallbacks(name, (data) => {
      f(data);
      return data;
    });
  };

  const updateCallbacks = (name: string, f: (inputData: AnnotationListenerData) => AnnotationListenerData) => {
    const callbackMap = changeCallbacks.get();
    const data = callbackMap.hasOwnProperty(name) ? callbackMap[name] : initData();
    const outputData = f(data);
    callbackMap[name] = outputData;
    changeCallbacks.set(callbackMap);
  };

  const fireCallbacks = (name: string, uid: string, elements: any[]): void => {
    withCallbacks(name, (data) => {
      Arr.each(data.listeners, (f) => f(true, name, {
        uid,
        nodes: Arr.map(elements, (elem) => elem.dom())
      }));
    });
  };

  const fireNoAnnotation = (name: string): void => {
    withCallbacks(name, (data) => {
      Arr.each(data.listeners, (f) => f(false, name));
    });
  };

  // NOTE: Runs in alphabetical order.
  const onNodeChange = Throttler.last(() => {
    const callbackMap = changeCallbacks.get();
    const annotations = Arr.sort(Obj.keys(callbackMap));
    Arr.each(annotations, (name) => {
      updateCallbacks(name, (data) => {
        const prev = data.previous.get();
        identify(editor, Option.some(name)).fold(
          () => {
            if (prev.isSome()) {
              // Changed from something to nothing.
              fireNoAnnotation(name);
              data.previous.set(Option.none());
            }
          },
          ({ uid, name, elements }) => {
            // Changed from a different annotation (or nothing)
            if (! prev.is(uid)) {
              fireCallbacks(name, uid, elements);
              data.previous.set(Option.some(uid));
            }
          }
        );

        return {
          previous: data.previous,
          listeners: data.listeners
        };
      });
    });
  }, 30);

  editor.on('remove', () => {
    onNodeChange.cancel();
  });

  editor.on('NodeChange', () => {
    onNodeChange.throttle();
  });

  const addListener = (name: string, f: AnnotationListener): void => {
    updateCallbacks(name, (data) => {
      return {
        previous: data.previous,
        listeners: data.listeners.concat([ f ])
      };
    });
  };

  return {
    addListener
  };
};

const initEvents = function (editorApi, iosApi, toolstrip, socket, dropup) {
  const saveSelectionFirst = function () {
    iosApi.run(function (api) {
      api.highlightSelection();
    });
  };

  const refreshIosSelection = function () {
    iosApi.run(function (api) {
      api.refreshSelection();
    });
  };

  const scrollToY = function (yTop, height) {
    // Because the iframe has no scroll, and the socket is the part that scrolls,
    // anything visible inside the iframe actually has a top value (for bounding
    // rectangle) > socket.scrollTop. The rectangle is with respect to the top of
    // the iframe, which has scrolled up above the socket viewport.
    const y = yTop - socket.dom().scrollTop;
    iosApi.run(function (api) {
      api.scrollIntoView(y, y + height);
    });
  };

  const scrollToElement = function (target) {
    scrollToY(iosApi, socket);
  };

  const scrollToCursor = function () {
    editorApi.getCursorBox().each(function (box) {
      scrollToY(box.top(), box.height());
    });
  };

  const clearSelection = function () {
    // Clear any fake selections visible.
    iosApi.run(function (api) {
      api.clearSelection();
    });
  };

  const clearAndRefresh = function () {
    clearSelection();
    refreshThrottle.throttle();
  };

  const refreshView = function () {
    scrollToCursor();
    iosApi.run(function (api) {
      api.syncHeight();
    });
  };

  const reposition = function () {
    const toolbarHeight = Height.get(toolstrip);
    iosApi.run(function (api) {
      api.setViewportOffset(toolbarHeight);
    });

    refreshIosSelection();
    refreshView();
  };

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

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

  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();
    }),
//.........這裏部分代碼省略.........