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

TypeScript alloy.Tabstopping类代码示例

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

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



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

示例1:

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


示例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 renderCommonSpec = (spec, actionOpt, extraBehaviours = [], dom, components) => {
  const action = actionOpt.fold(() => {
    return {};
  }, (action) => {
    return {
      action
    };
  });

  const common = {
    buttonBehaviours: Behaviour.derive([
      DisablingConfigs.button(spec.disabled),
      Tabstopping.config({}),
      AddEventsBehaviour.config('button press', [
        AlloyEvents.preventDefault('click'),
        AlloyEvents.preventDefault('mousedown')
      ])
    ].concat(extraBehaviours)),
    eventOrder: {
      click: ['button press', 'alloy.base.behaviour'],
      mousedown: ['button press', 'alloy.base.behaviour']
    },
    ...action
  };
  const domFinal = Merger.deepMerge(common, { dom });
  return Merger.deepMerge(domFinal, { components });
};
开发者ID:tinymce,项目名称:tinymce,代码行数:27,代码来源:Button.ts


示例4: function

const field = function (name, placeholder) {
  const inputSpec = Memento.record(Input.sketch({
    placeholder,
    onSetValue (input, data) {
      // If the value changes, inform the container so that it can update whether the "x" is visible
      AlloyTriggers.emit(input, NativeEvents.input());
    },
    inputBehaviours: Behaviour.derive([
      Composing.config({
        find: Option.some
      }),
      Tabstopping.config({ }),
      Keying.config({
        mode: 'execution'
      })
    ]),
    selectOnFocus: false
  }));

  const buttonSpec = Memento.record(
    Button.sketch({
      dom: UiDomFactory.dom('<button class="${prefix}-input-container-x ${prefix}-icon-cancel-circle ${prefix}-icon"></button>'),
      action (button) {
        const input = inputSpec.get(button);
        Representing.setValue(input, '');
      }
    })
  );

  return {
    name,
    spec: Container.sketch({
      dom: UiDomFactory.dom('<div class="${prefix}-input-container"></div>'),
      components: [
        inputSpec.asSpec(),
        buttonSpec.asSpec()
      ],
      containerBehaviours: Behaviour.derive([
        Toggling.config({
          toggleClass: Styles.resolve('input-container-empty')
        }),
        Composing.config({
          find (comp) {
            return Option.some(inputSpec.get(comp));
          }
        }),
        AddEventsBehaviour.config(clearInputBehaviour, [
          // INVESTIGATE: Because this only happens on input,
          // it won't reset unless it has an initial value
          AlloyEvents.run(NativeEvents.input(), function (iContainer) {
            const input = inputSpec.get(iContainer);
            const val = Representing.getValue(input);
            const f = val.length > 0 ? Toggling.off : Toggling.on;
            f(iContainer);
          })
        ])
      ])
    })
  };
};
开发者ID:danielpunkass,项目名称:tinymce,代码行数:60,代码来源:Inputs.ts


示例5: renderLabel

export const renderSelectBox = (spec: Types.SelectBox.SelectBox, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
  const translatedOptions = Arr.map(spec.items, (item) => {
    return {
      text: providersBackstage.translate(item.text),
      value: item.value
    };
  });

  // DUPE with TextField.
  const pLabel = spec.label.map((label) => renderLabel(label, providersBackstage));

  const pField = AlloyFormField.parts().field({
    // TODO: Alloy should not allow dom changing of an HTML select!
    dom: {  },
    selectAttributes: {
      size: spec.size
    },
    options: translatedOptions,
    factory: AlloyHtmlSelect,
    selectBehaviours: Behaviour.derive([
      Tabstopping.config({ }),
      AddEventsBehaviour.config('selectbox-change', [
        AlloyEvents.run(NativeEvents.change(), (component, _) => {
          AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name } );
        })
      ])
    ])
  });

  const chevron = spec.size > 1 ? Option.none() :
    Option.some({
        dom: {
          tag: 'div',
          classes: ['tox-selectfield__icon-js'],
          innerHtml: Icons.get('chevron-down', providersBackstage.icons)
        }
      });

  const selectWrap: SimpleSpec = {
    dom: {
      tag: 'div',
      classes: ['tox-selectfield']
    },
    components: Arr.flatten([[pField], chevron.toArray()])
  };

  return AlloyFormField.sketch({
    dom: {
      tag: 'div',
      classes: ['tox-form__group']
    },
    components: Arr.flatten<AlloySpec>([pLabel.toArray(), [selectWrap]])
  });
};
开发者ID:tinymce,项目名称:tinymce,代码行数:54,代码来源:SelectBox.ts


示例6: createPartialChoiceMenu

export const renderPanelButton = (spec: SwatchPanelButtonFoo, sharedBackstage: UiFactoryBackstageShared): SketchSpec => {
  return AlloyDropdown.sketch({
    dom: spec.dom,
    components: spec.components,

    toggleClass: 'mce-active',

    dropdownBehaviours: Behaviour.derive([
      Unselecting.config({}),
      Tabstopping.config({})
    ]),
    // getHotspot: spec.getHotspot,
    layouts: spec.layouts,
    sandboxClasses: ['tox-dialog__popups'],

    lazySink: sharedBackstage.getSink,
    fetch: (comp) => {
      return Future.nu((callback) => {
        return spec.fetch(callback);
      }).map((items) => {
        return Option.from(createTieredDataFrom(
          Merger.deepMerge(
            createPartialChoiceMenu(
              Id.generate('menu-value'),
              items,
              (value) => {
                spec.onItemAction(comp, value);
              },
              spec.columns,
              spec.presets,
              ItemResponse.CLOSE_ON_EXECUTE,
              // No colour is ever selected on opening
              () => false,
              sharedBackstage.providers
            ),
            {
              movement: deriveMenuMovement(spec.columns, spec.presets)
            }
          )
        ));
      });
    },

    parts: {
      menu: MenuParts.part(false, 1, spec.presets)
    }
  });
};
开发者ID:tinymce,项目名称:tinymce,代码行数:48,代码来源:PanelButton.ts


示例7: function

 const getFieldPart = (isField1) => AlloyFormField.parts().field({
   factory: AlloyInput,
   inputClasses: ['tox-textfield'],
   inputBehaviours: Behaviour.derive([
     Tabstopping.config({}),
     AddEventsBehaviour.config('size-input-events', [
       AlloyEvents.run(NativeEvents.focusin(), function (component, simulatedEvent) {
         AlloyTriggers.emitWith(component, ratioEvent, { isField1 });
       }),
       AlloyEvents.run(NativeEvents.change(), function (component, simulatedEvent) {
         AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name });
       })
     ])
   ]),
   selectOnFocus: false
 });
开发者ID:tinymce,项目名称:tinymce,代码行数:16,代码来源:SizeInput.ts


示例8:

const pClose = (onClose, providersBackstage: UiFactoryBackstageProviders) => ModalDialog.parts().close(
  // Need to find a way to make it clear in the docs whether parts can be sketches
  Button.sketch({
    dom: {
      tag: 'button',
      classes: [ 'tox-button', 'tox-button--icon', 'tox-button--naked' ],
      attributes: {
        'type': 'button',
        'aria-label': providersBackstage.translate('Close')
      }
    },
    action: onClose,
    buttonBehaviours: Behaviour.derive([
      Tabstopping.config({ })
    ])
  })
);
开发者ID:tinymce,项目名称:tinymce,代码行数:17,代码来源:Dialogs.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: renderLabel

export const renderListbox = (spec: ListboxFoo, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
  const pLabel = renderLabel(spec.label, providersBackstage);

  const pField = AlloyFormField.parts().field({
    factory: HtmlSelect,
    dom: {
      classes: [ 'mce-select-field' ]
    },
    selectBehaviours: Behaviour.derive([
      Tabstopping.config({ })
    ]),
    options: spec.values,
    // FIX: Don't use undefined here.
    data: spec.initialValue.getOr(undefined)
  });

  return renderFormField(Option.some(pLabel), pField);
};
开发者ID:tinymce,项目名称:tinymce,代码行数:18,代码来源:Listbox.ts



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


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
TypeScript alloy.TestHelpers类代码示例发布时间:2022-05-28
下一篇:
TypeScript alloy.TabSection类代码示例发布时间: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