mirror of
https://github.com/codex-team/editor.js
synced 2024-05-06 16:36:47 +02:00
581289c03e
* Default tunes to popover * Add the rest of default tunes * Add popover * Cleanup * Rename custom content * Cleanup * Add ability to open block settings upwards * Fix tests * Cleanup default tunes * Rename and cleanup * Add ability to display rendered custom tunes * cleanup * Rename * Add flag to close tunes popover * Cleanup * i18n * Cleanup * Fix build and tests * Fix for iframe * Add comments * Display active item, move closeOnActivate to popover * Add confirmation support to popover * Handle boolean value in confirmation param * Clarify flippable logic in popover * Comments * Pass editor element as a param of popover constructor * Fix readability * Tests * Fix flipper for confirmation element * Update confirmation config structure * Rename onClick to onActivate * Fix tests and build * Make confirmation props optional * Simplify processing tunes * Renamings * Fix text block tunes * Docs * Update event type * Move enabling confirmation state to separate method * move popover types * Unhardcode color * Support toggling * Add support of disabled items * Fix tab in empty block leading to selecting second item in popover * Remove margins for styles api settings button class * Fix arrow navigation between blocks after opening block tunes * Cleaup in default tunes code * Fix chaining confirmations * Colors * Types * Change the way flippable elements of popover custom area are set * Remove borders around popover icons * Fix untabbable inline toolbar * Fix locked scroll after closing tunes popover on mobile * Cleanup * Set max popover width * Make popover icon's border outside * Fix tab issue * Fix focus/hover issue * Reformat * Cleanup * Fix opening block tunes via keyboard * Add disableSpecialHoverAndFocusBehavior * Add deprecated comment * Cleanup * Fix popover active state * Fix checklist deletion with confirmation * Fix checklist deletion 2 * Fix popover focus * Fix popover items being impossible to flip after searching * Fix popover item highlighting issue * Update flipper.spec.ts * Fixes after review * Add Tunes Api tests * Fix multiple popover entries configured by one tune * Add tool's renderSettings() tests * Add popover confirmation state test * Fix popover width on mobile * Add popover tests * Add changelog and update version * Update changelog * Fix block tunes being unable to open after tune activation Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
101 lines
2.3 KiB
TypeScript
101 lines
2.3 KiB
TypeScript
/**
|
|
* @class MoveDownTune
|
|
* @classdesc Editor's default tune - Moves down highlighted block
|
|
*
|
|
* @copyright <CodeX Team> 2018
|
|
*/
|
|
|
|
import $ from '../dom';
|
|
import { API, BlockTune, PopoverItem } from '../../../types';
|
|
import Popover from '../utils/popover';
|
|
|
|
/**
|
|
*
|
|
*/
|
|
export default class MoveDownTune implements BlockTune {
|
|
/**
|
|
* Set Tool is Tune
|
|
*/
|
|
public static readonly isTune = true;
|
|
|
|
/**
|
|
* Property that contains Editor.js API methods
|
|
*
|
|
* @see {@link docs/api.md}
|
|
*/
|
|
private readonly api: API;
|
|
|
|
/**
|
|
* Styles
|
|
*/
|
|
private CSS = {
|
|
animation: 'wobble',
|
|
};
|
|
|
|
/**
|
|
* MoveDownTune constructor
|
|
*
|
|
* @param {API} api — Editor's API
|
|
*/
|
|
constructor({ api }) {
|
|
this.api = api;
|
|
}
|
|
|
|
/**
|
|
* Tune's appearance in block settings menu
|
|
*/
|
|
public render(): PopoverItem {
|
|
return {
|
|
icon: $.svg('arrow-down', 14, 14).outerHTML,
|
|
label: this.api.i18n.t('Move down'),
|
|
onActivate: (item, event): void => this.handleClick(event),
|
|
name: 'move-down',
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Handle clicks on 'move down' button
|
|
*
|
|
* @param event - click event
|
|
*/
|
|
public handleClick(event: MouseEvent): void {
|
|
const currentBlockIndex = this.api.blocks.getCurrentBlockIndex();
|
|
const nextBlock = this.api.blocks.getBlockByIndex(currentBlockIndex + 1);
|
|
|
|
// If Block is last do nothing
|
|
if (!nextBlock) {
|
|
const button = (event.target as HTMLElement)
|
|
.closest('.' + Popover.CSS.item)
|
|
.querySelector('.' + Popover.CSS.itemIcon);
|
|
|
|
button.classList.add(this.CSS.animation);
|
|
|
|
window.setTimeout(() => {
|
|
button.classList.remove(this.CSS.animation);
|
|
}, 500);
|
|
|
|
return;
|
|
}
|
|
|
|
const nextBlockElement = nextBlock.holder;
|
|
const nextBlockCoords = nextBlockElement.getBoundingClientRect();
|
|
|
|
let scrollOffset = Math.abs(window.innerHeight - nextBlockElement.offsetHeight);
|
|
|
|
/**
|
|
* Next block ends on screen.
|
|
* Increment scroll by next block's height to save element onscreen-position
|
|
*/
|
|
if (nextBlockCoords.top < window.innerHeight) {
|
|
scrollOffset = window.scrollY + nextBlockElement.offsetHeight;
|
|
}
|
|
|
|
window.scrollTo(0, scrollOffset);
|
|
|
|
/** Change blocks positions */
|
|
this.api.blocks.move(currentBlockIndex + 1);
|
|
|
|
this.api.toolbar.toggleBlockSettings(true);
|
|
}
|
|
}
|