本文整理汇总了TypeScript中@ephox/alloy.Positioning类的典型用法代码示例。如果您正苦于以下问题:TypeScript Positioning类的具体用法?TypeScript Positioning怎么用?TypeScript Positioning使用的例子?那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。
在下文中一共展示了Positioning类的4个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。
示例1:
return SplitAlloyToolbar.getMoreButton(toolbar).bind((_moreButton) => {
if (overflow.getSystem().isConnected()) {
// you have the build thing, so just return it
Positioning.position(sink, toolbarSpec.backstage.shared.anchors.toolbarOverflow(), overflow);
return Option.some(overflow);
} else {
return Option.none();
}
});
开发者ID:tinymce,项目名称:tinymce,代码行数:9,代码来源:CommonToolbar.ts
示例2: getBoxElement
lastAnchor.get().each((anchor) => {
const elem = lastElement.get().getOr(editor.selection.getNode());
const nodeBounds = elem.getBoundingClientRect();
const contentAreaBounds = editor.contentAreaContainer.getBoundingClientRect();
const aboveEditor = nodeBounds.bottom < 0;
const belowEditor = nodeBounds.top > contentAreaBounds.height;
if (aboveEditor || belowEditor) {
Css.set(contextbar.element(), 'display', 'none');
} else {
Css.remove(contextbar.element(), 'display');
Positioning.positionWithin(sink, anchor, contextbar, getBoxElement());
}
});
开发者ID:tinymce,项目名称:tinymce,代码行数:13,代码来源:ContextToolbar.ts
示例3: default
export default () => {
const oldSink = document.querySelectorAll('.mce-silver-sink');
if (oldSink.length > 0) {
throw Error('old sinks found, a previous test did not call helpers.destroy() leaving artifacts, found: ' + oldSink.length);
}
const sink = GuiFactory.build({
dom: DomFactory.fromHtml('<div class="mce-silver-sink"></div>'),
behaviours: Behaviour.derive([
Positioning.config({
useFixed: true
})
])
});
const uiMothership = Gui.create();
Class.add(uiMothership.element(), 'tox');
const backstage = TestBackstage(sink);
const mockEditor = {
setContent: (content) => {},
insertContent: (content: string, args?: any) => {},
execCommand: (cmd: string, ui?: boolean, value?: any) => {}
} as Editor;
const extras = {
editor: mockEditor,
backstage
};
uiMothership.add(sink);
Attachment.attachSystem(Body.body(), uiMothership);
const destroy = () => {
uiMothership.remove(sink);
uiMothership.destroy();
};
return {
backstage,
shared: backstage.shared,
extras,
destroy,
uiMothership,
mockEditor
};
};
开发者ID:tinymce,项目名称:tinymce,代码行数:49,代码来源:TestExtras.ts
示例4: onEscape
const setup = (editor: Editor): RenderInfo => {
const isInline = editor.getParam('inline', false, 'boolean');
const mode = isInline ? Inline : Iframe;
let lazyOuterContainer: Option<AlloyComponent> = Option.none();
const dirAttributes = I18n.isRtl() ? {
attributes: {
dir: 'rtl'
}
} : {};
const sink = GuiFactory.build({
dom: {
tag: 'div',
classes: ['tox', 'tox-silver-sink', 'tox-tinymce-aux'],
...dirAttributes
},
behaviours: Behaviour.derive([
Positioning.config({
useFixed: false // this allows menus to scroll with the outer page, we don't want position: fixed
})
])
});
const memAnchorBar = Memento.record({
dom: {
tag: 'div',
classes: [ 'tox-anchorbar']
}
});
const lazyAnchorBar = () => lazyOuterContainer.bind((container) => {
return memAnchorBar.getOpt(container);
}).getOrDie('Could not find a anchor bar element');
const lazyMoreButton = () => lazyOuterContainer.bind((container) => {
return OuterContainer.getMoreButton(container);
}).getOrDie('Could not find more button element');
const lazyToolbar = () => lazyOuterContainer.bind((container) => {
return OuterContainer.getToolbar(container);
}).getOrDie('Could not find more toolbar element');
const lazyThrobber = () => lazyOuterContainer.bind((container) => {
return OuterContainer.getThrobber(container);
}).getOrDie('Could not find throbber element');
const backstage: Backstage.UiFactoryBackstage = Backstage.init(sink, editor, lazyAnchorBar, lazyMoreButton);
const lazySink = () => Result.value<AlloyComponent, Error>(sink);
const partMenubar: AlloySpec = OuterContainer.parts().menubar({
dom: {
tag: 'div',
classes: [ 'tox-menubar' ]
},
backstage,
onEscape () {
editor.focus();
}
});
const partToolbar: AlloySpec = OuterContainer.parts().toolbar({
dom: {
tag: 'div',
classes: [ 'tox-toolbar' ]
},
getSink: lazySink,
backstage,
onEscape() {
editor.focus();
},
split: getToolbarDrawer(editor),
lazyToolbar,
lazyMoreButton
});
const partSocket: AlloySpec = OuterContainer.parts().socket({
dom: {
tag: 'div',
classes: [ 'tox-edit-area' ]
}
});
const partSidebar: AlloySpec = OuterContainer.parts().sidebar({
dom: {
tag: 'div',
classes: ['tox-sidebar']
}
});
const partThrobber: AlloySpec = OuterContainer.parts().throbber({
dom: {
tag: 'div',
classes: ['tox-throbber']
},
backstage
});
const statusbar = editor.getParam('statusbar', true, 'boolean') && !isInline ? Option.some(renderStatusbar(editor, backstage.shared.providers)) : Option.none();
//.........这里部分代码省略.........
开发者ID:tinymce,项目名称:tinymce,代码行数:101,代码来源:Render.ts
注:本文中的@ephox/alloy.Positioning类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。 |
请发表评论