deblan-mirror/editor.js
deblan-mirror/editor.js
1
0
Fork 0
mirror of https://github.com/codex-team/editor.js synced 2024-06-10 09:52:36 +02:00
Code Issues Projects Releases Wiki Activity

Merge branch 'feat/vertical-toolbox' into fix/popover-open-direction

Browse source
This commit is contained in:
Tanya Fomina 2022-04-17 20:42:19 +08:00
parent 7b4cba5027 adb8b775b4
commit 4599b61a75
6 changed files with 39 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/flipper.ts
View file

@ -256,8 +256,6 @@ export default class Flipper {
*/
private flipCallback(): void {
if (this.iterator.currentItem) {
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
this.iterator.currentItem.scrollIntoViewIfNeeded();
}
}

32
src/components/modules/toolbar/index.ts
View file

@ -506,27 +506,25 @@ export default class Toolbar extends Module<ToolbarNodes> {
}, true);
/**
* Subscribe to the 'block-hovered' event
* Subscribe to the 'block-hovered' event if currenct view is not mobile
*
* @see https://github.com/codex-team/editor.js/issues/1972
*/
this.eventsDispatcher.on(this.Editor.UI.events.blockHovered, (data: {block: Block}) => {
if (!_.isMobileScreen()) {
/**
* Do not move Toolbar by hover on mobile view
*
* @see https://github.com/codex-team/editor.js/issues/1972
* Subscribe to the 'block-hovered' event
*/
if (_.isMobile()) {
return;
}
this.eventsDispatcher.on(this.Editor.UI.events.blockHovered, (data: {block: Block}) => {
/**
* Do not move toolbar if Block Settings or Toolbox opened
*/
if (this.Editor.BlockSettings.opened || this.toolboxInstance.opened) {
return;
}
/**
* Do not move toolbar if Block Settings or Toolbox opened
*/
if (this.Editor.BlockSettings.opened || this.toolboxInstance.opened) {
return;
}
this.moveAndOpen(data.block);
});
this.moveAndOpen(data.block);
});
}
}
/**

14
src/components/polyfills.ts
View file

@ -97,16 +97,22 @@ if (!Element.prototype.prepend) {
};
}
interface Element {
/**
* Scrolls the current element into the visible area of the browser window
*
* @param centerIfNeeded - true, if the element should be aligned so it is centered within the visible area of the scrollable ancestor.
*/
scrollIntoViewIfNeeded(centerIfNeeded?: boolean): void;
}
/**
* ScrollIntoViewIfNeeded polyfill by KilianSSL (forked from hsablonniere)
*
* @see {@link https://gist.github.com/KilianSSL/774297b76378566588f02538631c3137}
* @param centerIfNeeded - true, if the element should be aligned so it is centered within the visible area of the scrollable ancestor.
*/
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
if (!Element.prototype.scrollIntoViewIfNeeded) {
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded): void {
centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded;

12
src/components/ui/toolbox.ts
View file

@ -146,9 +146,7 @@ export default class Toolbox extends EventsDispatcher<ToolboxEvent> {
}),
});
this.popover.on(PopoverEvent.OverlayClicked, () => {
this.close();
});
this.popover.on(PopoverEvent.OverlayClicked, this.onOverlayClicked);
/**
* Enable tools shortcuts
@ -181,6 +179,7 @@ export default class Toolbox extends EventsDispatcher<ToolboxEvent> {
this.api.listeners.offById(this.clickListenerId);
this.removeAllShortcuts();
this.popover.off(PopoverEvent.OverlayClicked, this.onOverlayClicked);
}
/**
@ -249,6 +248,13 @@ export default class Toolbox extends EventsDispatcher<ToolboxEvent> {
return popoverPotentialTopEdge < editorElementRect.top || popoverPotentialBottomEdge <= bottomEdgeForComparison;
}
/**
* Handles overlay click
*/
private onOverlayClicked = (): void => {
this.close();
}
/**
* Returns list of tools that enables the Toolbox (by specifying the 'toolbox' getter)
*/

2
src/components/utils.ts
View file

@ -766,6 +766,6 @@ export function cacheable<Target, Value, Arguments extends unknown[] = unknown[]
/**
* True if screen has mobile size
*/
export function isMobile(): boolean {
export function isMobileScreen(): boolean {
return window.matchMedia('(max-width: 650px)').matches;
}

8
src/components/utils/popover.ts
View file

@ -3,7 +3,7 @@ import Listeners from './listeners';
import Flipper from '../flipper';
import SearchInput from './search-input';
import EventsDispatcher from './events';
import { isMobile, keyCodes, cacheable } from '../utils';
import { isMobileScreen, keyCodes, cacheable } from '../utils';
/**
* Describe parameters for rendering the single item of Popover
@ -184,7 +184,7 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
});
}
if (isMobile()) {
if (isMobileScreen()) {
document.documentElement.classList.add(Popover.CSS.documentScrollLocked);
}
}
@ -197,7 +197,7 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
this.nodes.overlay.classList.add(Popover.CSS.popoverOverlayHidden);
this.flipper.deactivate();
if (isMobile()) {
if (isMobileScreen()) {
document.documentElement.classList.remove(Popover.CSS.documentScrollLocked);
}
}
@ -323,7 +323,7 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
private createItem(item: PopoverItem): HTMLElement {
const el = Dom.make('div', Popover.CSS.item);
el.setAttribute('data-item-name', item.name);
el.dataset.itemName = item.name;
const label = Dom.make('div', Popover.CSS.itemLabel, {
innerHTML: item.label,
});