TypeScript Toolbar.parts方法代碼示例

本文整理匯總了TypeScript中@ephox/alloy.Toolbar.parts方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript Toolbar.parts方法的具體用法？TypeScript Toolbar.parts怎麽用？TypeScript Toolbar.parts使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@ephox/alloy.Toolbar的用法示例。

在下文中一共展示了Toolbar.parts方法的3個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1: getToolbarbehaviours

const renderToolbar = (toolbarSpec: ToolbarSpec) => {
  const modeName: any = toolbarSpec.cyclicKeying ? 'cyclic' : 'acyclic';

  return AlloyToolbar.sketch({
    uid: toolbarSpec.uid,
    dom: {
      tag: 'div',
      classes: ['tox-toolbar']
    },
    components: [
      AlloyToolbar.parts().groups({})
    ],

    toolbarBehaviours: getToolbarbehaviours(toolbarSpec, modeName, Option.none())
  });
};

開發者ID:tinymce，項目名稱:tinymce，代碼行數:16，代碼來源:CommonToolbar.ts

示例2: function

export default function () {
  const makeGroup = function (gSpec) {
    const scrollClass = gSpec.scrollable === true ? '${prefix}-toolbar-scrollable-group' : '';
    return {
      dom: UiDomFactory.dom('<div aria-label="' + gSpec.label + '" class="${prefix}-toolbar-group ' + scrollClass + '"></div>'),

      tgroupBehaviours: Behaviour.derive([
        AddEventsBehaviour.config('adhoc-scrollable-toolbar', gSpec.scrollable === true ? [
          AlloyEvents.runOnInit(function (component, simulatedEvent) {
            Css.set(component.element(), 'overflow-x', 'auto');
            Scrollables.markAsHorizontal(component.element());
            Scrollable.register(component.element());
          })
        ] : [ ])
      ]),

      components: [
        Container.sketch({
          components: [
            ToolbarGroup.parts().items({ })
          ]
        })
      ],
      markers: {
        itemClass: Styles.resolve('toolbar-group-item')
      },

      items: gSpec.items
    };
  };

  const toolbar = GuiFactory.build(
    Toolbar.sketch(
      {
        dom: UiDomFactory.dom('<div class="${prefix}-toolbar"></div>'),
        components: [
          Toolbar.parts().groups({ })
        ],
        toolbarBehaviours: Behaviour.derive([
          Toggling.config({
            toggleClass: Styles.resolve('context-toolbar'),
            toggleOnExecute: false,
            aria: {
              mode: 'none'
            }
          }),
          Keying.config({
            mode: 'cyclic'
          })
        ]),
        shell: true
      }
    )
  );

  const wrapper = GuiFactory.build(
    Container.sketch({
      dom: {
        classes: [ Styles.resolve('toolstrip') ]
      },
      components: [
        GuiFactory.premade(toolbar)
      ],
      containerBehaviours: Behaviour.derive([
        Toggling.config({
          toggleClass: Styles.resolve('android-selection-context-toolbar'),
          toggleOnExecute: false
        })
      ])
    })
  );

  const resetGroups = function () {
    Toolbar.setGroups(toolbar, initGroups.get());
    Toggling.off(toolbar);
  };

  const initGroups = Cell([ ]);

  const setGroups = function (gs) {
    initGroups.set(gs);
    resetGroups();
  };

  const createGroups = function (gs) {
    return Arr.map(gs, Fun.compose(ToolbarGroup.sketch, makeGroup));
  };

  const refresh = function () {
    Toolbar.refresh(toolbar);
  };

  const setContextToolbar = function (gs) {
    Toggling.on(toolbar);
    Toolbar.setGroups(toolbar, gs);
  };

  const restoreToolbar = function () {
    if (Toggling.isOn(toolbar)) {
      resetGroups();
//.........這裏部分代碼省略.........

開發者ID:abstask，項目名稱:tinymce，代碼行數:101，代碼來源:ScrollingToolbar.ts

示例3: function

export default function () {
  const makeGroup = function (gSpec) {
    const scrollClass = gSpec.scrollable === true ? '${prefix}-toolbar-scrollable-group' : '';
    return {
      dom: UiDomFactory.dom('<div aria-label="' + gSpec.label + '" class="${prefix}-toolbar-group ' + scrollClass + '"></div>'),

      tgroupBehaviours: Behaviour.derive([
        AddEventsBehaviour.config('adhoc-scrollable-toolbar', gSpec.scrollable === true ? [
          AlloyEvents.runOnInit(function (component, simulatedEvent) {
            Css.set(component.element(), 'overflow-x', 'auto');
            Scrollables.markAsHorizontal(component.element());
            Scrollable.register(component.element());
          })
        ] : [ ])
      ]),

      components: [
        Container.sketch({
          components: [
            ToolbarGroup.parts().items({ })
          ]
        })
      ],
      markers: {
        // TODO: Now that alloy isn't marking the items with the old
        // itemClass here, this navigation probably doesn't work. But
        // it's mobile. However, bluetooth keyboards will need to be fixed
        // Essentially, all items put in the toolbar will need to be given
        // this class if they are to be part of keyboard navigation
        itemSelector: '.' + Styles.resolve('toolbar-group-item')
      },

      items: gSpec.items
    };
  };

  const toolbar = GuiFactory.build(
    Toolbar.sketch(
      {
        dom: UiDomFactory.dom('<div class="${prefix}-toolbar"></div>'),
        components: [
          Toolbar.parts().groups({ })
        ],
        toolbarBehaviours: Behaviour.derive([
          Toggling.config({
            toggleClass: Styles.resolve('context-toolbar'),
            toggleOnExecute: false,
            aria: {
              mode: 'none'
            }
          }),
          Keying.config({
            mode: 'cyclic'
          })
        ]),
        shell: true
      }
    )
  ) as AlloyComponent;

  const wrapper = GuiFactory.build(
    Container.sketch({
      dom: {
        classes: [ Styles.resolve('toolstrip') ]
      },
      components: [
        GuiFactory.premade(toolbar)
      ],
      containerBehaviours: Behaviour.derive([
        Toggling.config({
          toggleClass: Styles.resolve('android-selection-context-toolbar'),
          toggleOnExecute: false
        })
      ])
    })
  ) as AlloyComponent;

  const resetGroups = function () {
    Toolbar.setGroups(toolbar, initGroups.get());
    Toggling.off(toolbar);
  };

  const initGroups = Cell([ ]);

  const setGroups = function (gs) {
    initGroups.set(gs);
    resetGroups();
  };

  const createGroups = function (gs) {
    return Arr.map(gs, Fun.compose(ToolbarGroup.sketch, makeGroup));
  };

  const refresh = function () {
    // Toolbar.refresh is undefined
    // Toolbar.refresh(toolbar);
  };

  const setContextToolbar = function (gs) {
    Toggling.on(toolbar);
//.........這裏部分代碼省略.........

開發者ID:tinymce，項目名稱:tinymce，代碼行數:101，代碼來源:ScrollingToolbar.ts

注：本文中的@ephox/alloy.Toolbar.parts方法示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台，相關代碼片段篩選自各路編程大神貢獻的開源項目，源碼版權歸原作者所有，傳播和使用請參考對應項目的License；未經允許，請勿轉載。