• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript alloy.GuiFactory类代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中@ephox/alloy.GuiFactory的典型用法代码示例。如果您正苦于以下问题:TypeScript GuiFactory类的具体用法?TypeScript GuiFactory怎么用?TypeScript GuiFactory使用的例子?那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。



在下文中一共展示了GuiFactory类的10个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: renderColorInput

 (store, doc, body) => {
   return GuiFactory.build(
     Container.sketch({
       dom: {
         classes: [ 'colorinput-container' ]
       },
       components: [
         renderColorInput({
           type: 'colorinput',
           name: 'alpha',
           label: Option.some('test-color-input'),
         }, helpers.shared, {
           colorPicker: (callback, value) => {},
           hasCustomColors: () => true,
           getColors: () => [
             { type: choiceItem, text: 'Turquoise', value: '#18BC9B' },
             { type: choiceItem, text: 'Green', value: '#2FCC71' },
             { type: choiceItem, text: 'Blue', value: '#3598DB' },
             { type: choiceItem, text: 'Purple', value: '#9B59B6' },
             { type: choiceItem, text: 'Navy Blue', value: '#34495E' }
           ],
           getColorCols: () => 3
         })
       ]
     })
   );
 },
开发者ID:tinymce,项目名称:tinymce,代码行数:27,代码来源:ColorInputTest.ts


示例2:

const makeCell = (row, col, labelId) => {
  const emitCellOver = (c) => AlloyTriggers.emitWith(c, cellOverEvent, {row, col} );
  const emitExecute = (c) => AlloyTriggers.emitWith(c, cellExecuteEvent, {row, col} );

  return GuiFactory.build({
    dom: {
      tag: 'div',
      attributes: {
        role: 'button',
        ['aria-labelledby']: labelId
      }
    },
    behaviours: Behaviour.derive([
      AddEventsBehaviour.config('insert-table-picker-cell', [
        AlloyEvents.run(NativeEvents.mouseover(), Focusing.focus),
        AlloyEvents.run(SystemEvents.execute(), emitExecute),
        AlloyEvents.run(SystemEvents.tapOrClick(), emitExecute)
      ]),
      Toggling.config({
        toggleClass: 'tox-insert-table-picker__selected',
        toggleOnExecute: false
      }),
      Focusing.config({onFocus: emitCellOver})
    ])
  });
};
开发者ID:tinymce,项目名称:tinymce,代码行数:26,代码来源:InsertTableMenuItem.ts


示例3:

const renderText = (text: string): AlloySpec => ({
  dom: {
    tag: 'div',
    classes: [ ItemClasses.textClass ]
  },
  components: [ GuiFactory.text(I18n.translate(text)) ]
});
开发者ID:tinymce,项目名称:tinymce,代码行数:7,代码来源:ItemSlices.ts


示例4: zoomFit

      return memContainer.getOpt(anyInSystem).map((panel) => {
        const aImg = GuiFactory.external({
          element: img
        });

        Replacing.replaceAt(panel, 1, Option.some(aImg));

        const lastViewRect = viewRectState.get();
        const viewRect = {
          x: 0,
          y: 0,
          w: img.dom().naturalWidth,
          h: img.dom().naturalHeight
        };
        viewRectState.set(viewRect);
        const rect = Rect.inflate(viewRect, -20, -20);
        rectState.set(rect);

        if (lastViewRect.w !== viewRect.w || lastViewRect.h !== viewRect.h) {
          zoomFit(panel, img);
        }

        repaintImg(panel, img);
        return img;
      });
开发者ID:tinymce,项目名称:tinymce,代码行数:25,代码来源:ImagePanel.ts


示例5:

 moveTo: (x: number, y: number) => {
   InlineView.showAt(notificationWrapper, {
     anchor: 'makeshift',
     x,
     y
   }, GuiFactory.premade(notification));
 },
开发者ID:tinymce,项目名称:tinymce,代码行数:7,代码来源:NotificationManagerImpl.ts


示例6: closeWindow

    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;
    };
开发者ID:tinymce,项目名称:tinymce,代码行数:47,代码来源:WindowManager.ts


示例7: renderInsertTableMenuItem

export function renderInsertTableMenuItem(spec: Menu.FancyMenuItem): ItemTypes.WidgetItemSpec {
  const numRows = 10;
  const numColumns = 10;
  const sizeLabelId = Id.generate('size-label');
  const cells = makeCells(sizeLabelId, numRows, numColumns);

  const memLabel = Memento.record({
    dom: {
      tag: 'span',
      classes: ['tox-insert-table-picker__label'],
      attributes: {
        id: sizeLabelId
      }
    },
    components: [GuiFactory.text('0x0')],
    behaviours: Behaviour.derive([
      Replacing.config({})
    ])
  });

  return {
    type: 'widget',
    data: { value: Id.generate('widget-id')},
    dom: {
      tag: 'div',
      classes: ['tox-fancymenuitem'],
    },
    autofocus: true,
    components: [ItemWidget.parts().widget({
      dom: {
        tag: 'div',
        classes: ['tox-insert-table-picker']
      },
      components: makeComponents(cells).concat(memLabel.asSpec()),
      behaviours: Behaviour.derive([
        AddEventsBehaviour.config('insert-table-picker', [
          AlloyEvents.runWithTarget<CellEvent>(cellOverEvent, (c, t, e) => {
            const row = e.event().row();
            const col = e.event().col();
            selectCells(cells, row, col, numRows, numColumns);
            Replacing.set(memLabel.get(c), [makeLabelText(row, col)]);
          }),
          AlloyEvents.runWithTarget<CellEvent>(cellExecuteEvent, (c, _, e) => {
            spec.onAction({numRows: e.event().row() + 1, numColumns: e.event().col() + 1});
            AlloyTriggers.emit(c, SystemEvents.sandboxClose());
          })
        ]),
        Keying.config({
          initSize: {
            numRows,
            numColumns
          },
          mode: 'flatgrid',
          selector: '[role="button"]'
        })
      ])
    })]
  };
}
开发者ID:tinymce,项目名称:tinymce,代码行数:59,代码来源:InsertTableMenuItem.ts


示例8:

 const updateText: NotificationSketchApis['updateText'] = (comp, text) => {
   if (comp.getSystem().isConnected()) {
     const banner = memBannerText.get(comp);
     Replacing.set(banner, [
       GuiFactory.text(text)
     ]);
   }
 };
开发者ID:tinymce,项目名称:tinymce,代码行数:8,代码来源:Notification.ts


示例9: renderHtmlPanel

 (store, doc, body) => {
   return GuiFactory.build(
     renderHtmlPanel({
       type: 'htmlpanel',
       html: '<br /><br /><hr />',
       presets: 'presentation'
     })
   );
 },
开发者ID:tinymce,项目名称:tinymce,代码行数:9,代码来源:HtmlPanelTest.ts


示例10:

 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
   });
 });
开发者ID:tinymce,项目名称:tinymce,代码行数:9,代码来源:ContextUi.ts



注:本文中的@ephox/alloy.GuiFactory类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript alloy.Highlighting类代码示例发布时间:2022-05-28
下一篇:
TypeScript alloy.Gui类代码示例发布时间:2022-05-28
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap