当前位置: 首页>>代码示例>>TypeScript>>正文


TypeScript alloy.Focusing类代码示例

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


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

示例1:

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

示例2:

export const renderHtmlPanel = (spec: HtmlPanelFoo): SketchSpec => {
  if (spec.presets === 'presentation') {
    return AlloyContainer.sketch({
      dom: {
        tag: 'div',
        classes: [ 'tox-form__group' ],
        innerHtml: spec.html
      }
    });
  } else {
    return AlloyContainer.sketch({
      dom: {
        tag: 'div',
        classes: [ 'tox-form__group' ],
        innerHtml: spec.html,
        attributes: {
          role: 'document'
        }
      },
      containerBehaviours: Behaviour.derive([
        Tabstopping.config({ }),
        Focusing.config({ })
      ])
    });
  }
};
开发者ID:tinymce,项目名称:tinymce,代码行数:26,代码来源:HtmlPanel.ts

示例3:

const renderToolbarGroupCommon = (toolbarGroup: ToolbarGroup) => {
  const attributes = toolbarGroup.title.fold(() => {
    return {};
  },
    (title) => {
      return { attributes: { title } };
    });
  return {
    dom: {
      tag: 'div',
      classes: ['tox-toolbar__group'],
      ...attributes
    },

    components: [
      AlloyToolbarGroup.parts().items({})
    ],

    items: toolbarGroup.items,
    markers: {
      // nav within a group breaks if disabled buttons are first in their group so skip them
      itemSelector: '*:not(.tox-split-button) > .tox-tbtn:not([disabled]), .tox-split-button:not([disabled]), .tox-toolbar-nav-js:not([disabled])'
    },
    tgroupBehaviours: Behaviour.derive([
      Tabstopping.config({}),
      Focusing.config({})
    ])
  };
};
开发者ID:tinymce,项目名称:tinymce,代码行数:29,代码来源:CommonToolbar.ts

示例4:

const renderSpinner = (providerBackstage: UiFactoryBackstageProviders): AlloySpec => {
  return {
    dom: {
      tag: 'div',
      attributes: {
        'aria-label': providerBackstage.translate('Loading...')
      },
      classes: [ 'tox-throbber__busy-spinner' ]
    },
    components: [
      {
        dom: DomFactory.fromHtml(`<div class="tox-spinner"><div></div><div></div><div></div></div>`)
      }
    ],
    behaviours: Behaviour.derive([
      // Trap the "Tab" key and don't let it escape.
      Keying.config({
        mode: 'special',
        onTab: () => Option.some(true),
        onShiftTab: () => Option.some(true)
      }),
      Focusing.config({ })
    ])
  };
};
开发者ID:tinymce,项目名称:tinymce,代码行数:25,代码来源:Throbber.ts

示例5:

  const makeSlider = (label: string, onChoose: (slider: AlloyComponent, thumb: AlloyComponent, value: SliderTypes.SliderValueX) => void, min: number, value: number, max: number): Memento.MementoRecord => {
    const labelPart = Slider.parts().label({
      dom: {
        tag: 'label',
        classes: ['tox-label'],
        innerHtml: providersBackstage.translate(label)
      }
    });

    const spectrum = Slider.parts().spectrum({
      dom: {
        tag: 'div',
        classes: ['tox-slider__rail'],
        attributes: {
          role: 'presentation'
        }
      }
    });

    const thumb = Slider.parts().thumb({
      dom: {
        tag: 'div',
        classes: ['tox-slider__handle'],
        attributes: {
          role: 'presentation'
        }
      }
    });

    return Memento.record(Slider.sketch({
      dom: {
        tag: 'div',
        classes: ['tox-slider'],
        attributes: {
          role: 'presentation'
        }
      },
      model: {
        mode: 'x',
        minX: min,
        maxX: max,
        getInitialValue: Fun.constant({ x: Fun.constant(value) })
      },
      components: [
        labelPart,
        spectrum,
        thumb
      ],
      sliderBehaviours: Behaviour.derive([
        Focusing.config({})
      ]),
      onChoose
    }));
  };
开发者ID:tinymce,项目名称:tinymce,代码行数:54,代码来源:EditPanel.ts

示例6:

 const makeButton = (t) => {
   return {
     dom: {
       tag: 'span',
       innerHtml: t,
       // The '.tox-tbtn' class is here temporarily while we sort of the flow keying selector
       classes: [ 'test-toolbar-item', 'tox-tbtn' ]
     },
     behaviours: Behaviour.derive([
       Focusing.config({ })
     ])
   };
 };
开发者ID:tinymce,项目名称:tinymce,代码行数:13,代码来源:ToolbarTest.ts

示例7:

  const onLeftOrRightInMenu = (comp: AlloyComponent, se: SimulatedEvent<SugarEvent>) => {
    // The originating dropdown is stored on the sandbox itself.
    const dropdown: AlloyComponent = Representing.getValue(comp);

    // Focus the dropdown. Current workaround required to make flow recognise the current focus
    Focusing.focus(dropdown);
    AlloyTriggers.emitWith(dropdown, 'keydown', {
      raw: se.event().raw()
    });

    // Close the dropdown
    AlloyDropdown.close(dropdown);

    return Option.some(true);
  };
开发者ID:tinymce,项目名称:tinymce,代码行数:15,代码来源:CommonDropdown.ts

示例8: callback

  const open = (message: string, callback: (state: boolean) => void) => {

    const closeDialog = (state: boolean) => {
      ModalDialog.hide(confirmDialog);
      callback(state);
    };

    const memFooterYes = Memento.record(
      renderFooterButton({
        name: 'yes',
        text: 'Yes',
        primary: true,
        icon: Option.none()
      }, 'submit', sharedBackstage.providers)
    );

    const footerNo = renderFooterButton({
      name: 'no',
      text: 'No',
      primary: true,
      icon: Option.none()
    }, 'cancel', sharedBackstage.providers);

    const confirmDialog = GuiFactory.build(
      Dialogs.renderDialog({
        lazySink: () => sharedBackstage.getSink(),
        partSpecs: {
          title: Dialogs.pUntitled(),
          close: Dialogs.pClose(() => {
            closeDialog(false);
          }, sharedBackstage.providers),
          body: Dialogs.pBodyMessage(message, sharedBackstage.providers),
          footer: Dialogs.pFooter(Dialogs.pFooterGroup([], [
            footerNo,
            memFooterYes.asSpec()
          ]))
        },
        onCancel: () => closeDialog(false),
        onSubmit: () => closeDialog(true),
        extraClasses: [ 'tox-confirm-dialog' ]
      })
    );

    ModalDialog.show(confirmDialog);
    const footerYesButton = memFooterYes.get(confirmDialog);
    Focusing.focus(footerYesButton);
  };
开发者ID:tinymce,项目名称:tinymce,代码行数:47,代码来源:ConfirmDialog.ts

示例9:

 const factory = (newSpec: { uid: string }) => {
   return NavigableObject.craft(
     {
       // We need to use the part uid or the label and field won't be linked with ARIA
       uid: newSpec.uid,
       dom: {
         tag: 'iframe',
         attributes
       },
       behaviours: Behaviour.derive([
         Tabstopping.config({ }),
         Focusing.config({ }),
         RepresentingConfigs.withComp(Option.none(), sourcing.getValue, sourcing.setValue)
       ])
     }
   );
 };
开发者ID:tinymce,项目名称:tinymce,代码行数:17,代码来源:IFrame.ts

示例10: useFixedContainer

const getBehaviours = (editor: Editor) => {
  return useFixedContainer(editor) ? [] : [
    Docking.config({
      leftAttr: 'data-dock-left',
      topAttr: 'data-dock-top',
      contextual: {
        lazyContext (_) {
          return Option.from(editor).map((ed) => Element.fromDom(ed.getBody()));
        },
        fadeInClass: 'tox-toolbar-dock-fadein',
        fadeOutClass: 'tox-toolbar-dock-fadeout',
        transitionClass: 'tox-toolbar-dock-transition'
      }
    }),
    Focusing.config({ })
  ];
};
开发者ID:tinymce,项目名称:tinymce,代码行数:17,代码来源:Inline.ts


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