Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable flipping tools via standalone class #830

Merged
merged 15 commits into from
Jul 15, 2019
Prev Previous commit
Next Next commit
Hghl active button of CT, simplify activate/deactivate
neSpecc committed Jul 15, 2019
commit 1ecfc0f9363df9b5c9a477ef9c4adecb479da516
4 changes: 2 additions & 2 deletions dist/editor.js

Large diffs are not rendered by default.

36 changes: 23 additions & 13 deletions src/components/flipper.ts
Original file line number Diff line number Diff line change
@@ -82,12 +82,23 @@ export default class Flipper {
}

/**
* Blocks flipping handlers.
* When you do not need keyCodes to be handles set activated state `false`
* @param {Boolean} value
* Active tab/arrows handling by flipper
* @param {HTMLElement[]} items - Some modules (like, InlineToolbar, BlockSettings) might refresh buttons dynamically
*/
public set activated(value) {
this._activated = value;
public activate(items?: HTMLElement[]): void {
this._activated = true;

if (items) {
this.flipperIterator.setItems(items);
}
}

/**
* Disable tab/arrows handling by flipper
*/
public deactivate(): void {
this._activated = false;
this.dropCursor();
}

/**
@@ -99,19 +110,18 @@ export default class Flipper {
}

/**
* Updates flipper iterators iterable list
* Some modules (like, InlineToolbar, BlockSettings) might refresh tools dynamically
* @param {HTMLElement[]} nodeList
* Focus first item
*/
public updateItems(nodeList: HTMLElement[]): void {
this.flipperIterator.setItems(nodeList);
public focusFirst(): void {
this.dropCursor();
this.flipRight();
}

/**
* Drops flipper's iterator cursor
* @see FlipperIterator#dropCursor
*/
public dropCursor(): void {
private dropCursor(): void {
this.flipperIterator.dropCursor();
}

@@ -152,10 +162,10 @@ export default class Flipper {

switch (direction) {
case Flipper.LEAF_DIRECTIONS.RIGHT:
this.flipperIterator.next();
this.flipRight();
break;
case Flipper.LEAF_DIRECTIONS.LEFT:
this.flipperIterator.previous();
this.flipLeft();
break;
}
}
6 changes: 2 additions & 4 deletions src/components/modules/toolbar/blockSettings.ts
Original file line number Diff line number Diff line change
@@ -114,8 +114,7 @@ export default class BlockSettings extends Module {
/** Tell to subscribers that block settings is opened */
this.Editor.Events.emit(this.events.opened);

this.flipper.updateItems(this.blockTunesButtons);
this.flipper.activated = true;
this.flipper.activate(this.blockTunesButtons);
}

/**
@@ -135,8 +134,7 @@ export default class BlockSettings extends Module {
this.buttons = [];

/** Clear focus on active button */
this.flipper.activated = false;
this.flipper.dropCursor();
this.flipper.deactivate();
}

/**
29 changes: 26 additions & 3 deletions src/components/modules/toolbar/conversion.ts
Original file line number Diff line number Diff line change
@@ -82,6 +82,11 @@ export default class ConversionToolbar extends Module {
return;
}

/**
* Mark current block's button with color
*/
this.highlightActiveTool(block.name);

this.move(block);

if (!this.opened) {
@@ -94,7 +99,8 @@ export default class ConversionToolbar extends Module {
*/
public open(): void {
this.opened = true;
this.flipper.activated = true;
this.flipper.activate();
this.flipper.focusFirst();
this.nodes.wrapper.classList.add(ConversionToolbar.CSS.conversionToolbarShowed);
}

@@ -103,8 +109,7 @@ export default class ConversionToolbar extends Module {
*/
public close(): void {
this.opened = false;
this.flipper.activated = false;
this.flipper.dropCursor();
this.flipper.deactivate();
this.nodes.wrapper.classList.remove(ConversionToolbar.CSS.conversionToolbarShowed);
}

@@ -262,6 +267,24 @@ export default class ConversionToolbar extends Module {
});
}

/**
* Marks current Blocks button with highlighting color
*/
private highlightActiveTool(toolName: string): void {
if (!this.tools[toolName]) {
return;
}

/**
* Drop previous active button
*/
Object.values(this.tools).forEach((el) => {
el.classList.remove(ConversionToolbar.CSS.conversionToolActive);
});

this.tools[toolName].classList.add(ConversionToolbar.CSS.conversionToolActive);
}

/**
* Prepare Flipper to be able to leaf tools by arrows/tab
*/
6 changes: 2 additions & 4 deletions src/components/modules/toolbar/inline.ts
Original file line number Diff line number Diff line change
@@ -227,8 +227,7 @@ export default class InlineToolbar extends Module {

this.opened = false;

this.flipper.activated = false;
this.flipper.dropCursor();
this.flipper.deactivate();
}

/**
@@ -263,8 +262,7 @@ export default class InlineToolbar extends Module {
const visibleTools = Array.from(this.buttonsList)
.filter((tool) => !(tool as HTMLElement).hidden) as HTMLElement[];

this.flipper.updateItems(visibleTools);
this.flipper.activated = true;
this.flipper.activate(visibleTools);
}

/**
5 changes: 2 additions & 3 deletions src/components/modules/toolbar/toolbox.ts
Original file line number Diff line number Diff line change
@@ -109,7 +109,7 @@ export default class Toolbox extends Module {
this.nodes.toolbox.classList.add(this.CSS.toolboxOpened);

this.opened = true;
this.flipper.activated = true;
this.flipper.activate();
}

/**
@@ -122,8 +122,7 @@ export default class Toolbox extends Module {
this.Editor.UI.nodes.wrapper.classList.remove(this.CSS.openedToolbarHolderModifier);

this.opened = false;
this.flipper.dropCursor();
this.flipper.activated = false;
this.flipper.deactivate();
}

/**