TypeScript InlineView.sketch方法代碼示例

export const setup = (editor: Editor, lazySink: () => Result<AlloyComponent, Error>, backstage: UiFactoryBackstage) => {
  const contextmenu = GuiFactory.build(
    InlineView.sketch({
      dom: {
        tag: 'div',
      },
      lazySink,
      onEscape: () => editor.focus(),
      fireDismissalEventInstead: { },
      inlineBehaviours: Behaviour.derive([
        AddEventsBehaviour.config('dismissContextMenu', [
          AlloyEvents.run(SystemEvents.dismissRequested(), (comp, se) => {
            Sandboxing.close(comp);
            editor.focus();
          })
        ])
      ])
    }),
  );

  editor.on('init', () => {
    editor.on('contextmenu', (e) => {
      if (isNativeOverrideKeyEvent(editor, e)) {
        return;
      }

      // Different browsers trigger the context menu from keyboards differently, so need to check both the button and target here
      // Chrome: button = 0 & target = the selection range node
      // Firefox: button = 0 & target = body
      // IE: button = 2 & target = body
      // Safari: N/A (Mac's don't expose a contextmenu keyboard shortcut)
      const isTriggeredByKeyboardEvent = e.button !== 2 || e.target === editor.getBody();
      const anchorSpec = isTriggeredByKeyboardEvent ? getNodeAnchor(editor) : getPointAnchor(editor, e);

      const registry = editor.ui.registry.getAll();
      const menuConfig = Settings.getContextMenu(editor);

      // Use the event target element for mouse clicks, otherwise fallback to the current selection
      const selectedElement = isTriggeredByKeyboardEvent ? editor.selection.getStart(true) : e.target as Element;

      const items = generateContextMenu(registry.contextMenus, menuConfig, selectedElement);

      NestedMenus.build(items, ItemResponse.CLOSE_ON_EXECUTE, backstage).map((menuData) => {
        e.preventDefault();

        // show the context menu, with items set to close on click
        InlineView.showMenuAt(contextmenu, anchorSpec, {
          menu: {
            markers: MenuParts.markers('normal')
          },
          data: menuData
        });
      });
    });
  });
};

    const factory = (contents: Types.Dialog.Dialog<T>, internalInitialData: T, dataValidator: Processor): Types.Dialog.DialogInstanceApi<T> => {
      const initialData = validateData<T>(internalInitialData, dataValidator);

      const dialogInit = {
        dataValidator,
        initialData,
        internalDialog: contents
      };

      const dialogUi = renderInlineDialog<T>(
        dialogInit,
        {
          redial: DialogManager.DialogManager.redial,
          closeWindow: () => {
            InlineView.hide(inlineDialog);
            closeWindow(dialogUi.instanceApi);
          }
        },
        extras.backstage, ariaAttrs
      );

      const inlineDialog = GuiFactory.build(InlineView.sketch({
        lazySink: extras.backstage.shared.getSink,
        dom: {
          tag: 'div',
          classes: [ ]
        },
        // Fires the default dismiss event.
        fireDismissalEventInstead: { },
        inlineBehaviours: Behaviour.derive([
          AddEventsBehaviour.config('window-manager-inline-events', [
            // Can't just fireDimissalEvent formCloseEvent, because it is on the parent component of the dialog
            AlloyEvents.run(SystemEvents.dismissRequested(), (comp, se) => {
              AlloyTriggers.emit(dialogUi.dialog, formCancelEvent);
            })
          ])
        ])
      }));
      InlineView.showAt(
        inlineDialog,
        anchor,
        GuiFactory.premade(dialogUi.dialog)
      );
      dialogUi.instanceApi.setData(initialData);
      Keying.focusIn(dialogUi.dialog);
      return dialogUi.instanceApi;
    };

  const open = function (settings: NotificationSpec, closeCallback: () => void) {
    const close = () => {
      closeCallback();
      InlineView.hide(notificationWrapper);
    };

    const notification = GuiFactory.build(
      Notification.sketch({
        text: settings.text,
        level: Arr.contains(['success', 'error', 'warning', 'info'], settings.type) ? settings.type : undefined,
        progress: settings.progressBar === true,
        icon: Option.from(settings.icon),
        onAction: close,
        iconProvider: backstage.shared.providers.icons,
        translationProvider: backstage.shared.providers.translate
      })
    );

    const notificationWrapper = GuiFactory.build(
      InlineView.sketch({
        dom: {
          tag: 'div',
          classes: [ 'tox-notifications-container' ]
        },
        lazySink: extras.backstage.shared.getSink,
        fireDismissalEventInstead: { }
      })
    );

    uiMothership.add(notificationWrapper);

    if (settings.timeout) {
      Delay.setTimeout(() => {
        close();
      }, settings.timeout);
    }

    return {
      close,
      moveTo: (x: number, y: number) => {
        InlineView.showAt(notificationWrapper, {
          anchor: 'makeshift',
          x,
          y
        }, GuiFactory.premade(notification));
      },
      moveRel: (element: Element, rel) => {
        // TODO: this should stack, TC-TC, BC-TC
        InlineView.showAt(notificationWrapper, extras.backstage.shared.anchors.banner(), GuiFactory.premade(notification));
      },
      text: (nuText: string) => {
        // check if component is still mounted
        Notification.updateText(notification, nuText);
      },
      settings,
      getEl: () => {
        // TODO: this is required to make stacking banners, should refactor getEl when AP-174 is implemented

      },
      progressBar: {
        value: (percent: number) => {
          Notification.updateProgress(notification, percent);
        }
      }
    };
  };

const renderContextToolbar = (spec: { onEscape: () => Option<boolean>, sink: AlloyComponent }) => {
  const stack = Cell([ ]);

  return InlineView.sketch({
    dom: {
      tag: 'div',
      classes: [ 'tox-pop' ]
    },
    fireDismissalEventInstead: {
      event: 'doNotDismissYet'
    },

    onShow: (comp) => {
      stack.set([ ]);
      InlineView.getContent(comp).each((c) => {
        Css.remove(c.element(), 'visibility');
      });
      Class.remove(comp.element(), resizingClass);
      Css.remove(comp.element(), 'width');
    },

    inlineBehaviours: Behaviour.derive([
      AddEventsBehaviour.config('context-toolbar-events', [
        AlloyEvents.runOnSource<SugarEvent>(NativeEvents.transitionend(), (comp, se) => {
          InlineView.getContent(comp).each((c) => {
            // Css.remove(c.element(), 'opacity');
          });
          Class.remove(comp.element(), resizingClass);
          Css.remove(comp.element(), 'width');
        }),

        AlloyEvents.run<ChangeSlideEvent>(changeSlideEvent, (comp, se) => {
          // If it was partially through a slide, clear that and measure afresh
          Css.remove(comp.element(), 'width');
          const currentWidth = Width.get(comp.element());

          InlineView.setContent(comp, se.event().contents());
          Class.add(comp.element(), resizingClass);
          const newWidth = Width.get(comp.element());
          Css.set(comp.element(), 'width', currentWidth + 'px');
          InlineView.getContent(comp).each((newContents) => {
            se.event().focus().bind((f) => {
              Focus.focus(f);
              return Focus.search(comp.element());
            }).orThunk(() => {
              Keying.focusIn(newContents);
              return Focus.active();
            });
          });
          Delay.setTimeout(() => {
            Css.set(comp.element(), 'width', newWidth + 'px');
          }, 0);
        }),

        AlloyEvents.run<ForwardSlideEvent>(forwardSlideEvent, (comp, se) => {
          InlineView.getContent(comp).each((oldContents) => {
            stack.set(stack.get().concat([
              {
                bar: oldContents,
                // TODO: Not working
                focus: Focus.active()
              }
            ]));
          });
          AlloyTriggers.emitWith(comp, changeSlideEvent, {
            contents: se.event().forwardContents(),
            focus: Option.none()
          });
        }),

        AlloyEvents.run<BackwardSlideEvent>(backSlideEvent, (comp, se) => {
          Arr.last(stack.get()).each((last) => {
            stack.set(stack.get().slice(0, stack.get().length - 1));
            AlloyTriggers.emitWith(comp, changeSlideEvent, {
              // Because we are using premade, we should have access to the same element
              // to give focus (although it isn't working)
              contents: GuiFactory.premade(last.bar),
              focus: last.focus
            });
          });
        }),

      ]),
      Keying.config({
        mode: 'special',
        onEscape: (comp) => {

          return Arr.last(stack.get()).fold(
            () => {
              // Escape just focuses the content. It no longer closes the toolbar.
              return spec.onEscape();
            },
            (_) => {
              AlloyTriggers.emit(comp, backSlideEvent);
              return Option.some(true);
            }
          );
        }
      })
    ]),
//.........這裏部分代碼省略.........

const register = (editor: Editor, sharedBackstage: UiFactoryBackstageShared) => {
  const autocompleter = GuiFactory.build(
    InlineView.sketch({
      dom: {
        tag: 'div',
        classes: [ 'tox-autocompleter' ]
      },
      components: [

      ],
      lazySink: sharedBackstage.getSink
    })
  );

  const isActive = () => InlineView.isOpen(autocompleter);
  const closeIfNecessary = () => {
    if (isActive()) {
      InlineView.hide(autocompleter);
    }
  };

  // This needs to be calcluated once things are ready, but the key events must be bound
  // before `init` or other keydown / keypress listeners will fire first. Therefore,
  // this is a thunk so that its value is calculated just once when it is used for the
  // first time, and after that it's value is stored.
  const getAutocompleters: () => Autocompleters.AutocompleterDatabase = Thunk.cached(() => {
    return Autocompleters.register(editor);
  });

  const getCombinedItems = (triggerChar: string, matches: AutocompleteLookupData[]): ItemTypes.ItemSpec[] => {
    const columns = Options.findMap(matches, (m) => Option.from(m.columns)).getOr(1);

    return Arr.bind(matches, (match) => {
      const choices = match.items;

      return createAutocompleteItems(
        choices,
        (itemValue, itemMeta) => {
          const nr = editor.selection.getRng();
          const textNode = nr.startContainer as Text; // TODO: Investigate if this is safe
          getContext(nr, triggerChar, textNode.data, nr.startOffset).fold(
            () => console.error('Lost context. Cursor probably moved'),
            ({ rng }) => {
              const autocompleterApi: InlineContent.AutocompleterInstanceApi = {
                hide: closeIfNecessary
              };
              match.onAction(autocompleterApi, rng, itemValue, itemMeta);
            }
          );
        },
        columns,
        ItemResponse.BUBBLE_TO_SANDBOX,
        sharedBackstage
      );
    });
  };

  const onKeypress = Throttler.last((e) => {
    const optMatches = e.key === ' ' ? Option.none<{ range: Range, triggerChar: string, lookupData: Promise<AutocompleteLookupData[]> }>() : lookup(editor, getAutocompleters);
    optMatches.fold(
      closeIfNecessary,
      (lookupInfo) => {
        lookupInfo.lookupData.then((lookupData) => {
          const combinedItems = getCombinedItems(lookupInfo.triggerChar, lookupData);

          // Only open the autocompleter if there are items to show
          if (combinedItems.length > 0) {
            const columns: Types.ColumnTypes = Options.findMap(lookupData, (ld) => Option.from(ld.columns)).getOr(1);
            InlineView.showAt(
              autocompleter,
              {
                anchor: 'selection',
                root: Element.fromDom(editor.getBody()),
                getSelection: () => {
                  return Option.some({
                    start: () => Element.fromDom(lookupInfo.range.startContainer),
                    soffset: () => lookupInfo.range.startOffset,
                    finish: () => Element.fromDom(lookupInfo.range.endContainer),
                    foffset: () => lookupInfo.range.endOffset
                  });
                }
              },
              Menu.sketch(
                createMenuFrom(
                  createPartialMenuWithAlloyItems('autocompleter-value', true, combinedItems, columns, 'normal'),
                  columns,
                  FocusMode.ContentFocus,
                  // Use the constant.
                  'normal'
                )
              )
            );

            InlineView.getContent(autocompleter).each(Highlighting.highlightFirst);
          } else {
            closeIfNecessary();
          }
        });
      }
    );
//.........這裏部分代碼省略.........