-
-
Notifications
You must be signed in to change notification settings - Fork 2k
/
block-tune-move-up.ts
108 lines (91 loc) · 2.86 KB
/
block-tune-move-up.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/**
* @class MoveUpTune
* @classdesc Editor's default tune that moves up selected block
*
* @copyright <CodeX Team> 2018
*/
import $ from '../dom';
import { API, BlockTune, BlockAPI, PopoverItem } from '../../../types';
import Popover from '../../components/utils/popover';
/**
*
*/
export default class MoveUpTune 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',
};
/**
* MoveUpTune 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-up', 14, 14).outerHTML,
label: this.api.i18n.t('Move up'),
onActivate: (item, e): void => this.handleClick(e),
name: 'move-up',
};
}
/**
* Move current block up
*
* @param {MouseEvent} event - click event
*/
public handleClick(event: MouseEvent): void {
const currentBlockIndex = this.api.blocks.getCurrentBlockIndex();
const currentBlock = this.api.blocks.getBlockByIndex(currentBlockIndex);
const previousBlock = this.api.blocks.getBlockByIndex(currentBlockIndex - 1);
if (currentBlockIndex === 0 || !currentBlock || !previousBlock) {
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 currentBlockElement = currentBlock.holder;
const previousBlockElement = previousBlock.holder;
/**
* Here is two cases:
* - when previous block has negative offset and part of it is visible on window, then we scroll
* by window's height and add offset which is mathematically difference between two blocks
*
* - when previous block is visible and has offset from the window,
* than we scroll window to the difference between this offsets.
*/
const currentBlockCoords = currentBlockElement.getBoundingClientRect(),
previousBlockCoords = previousBlockElement.getBoundingClientRect();
let scrollUpOffset;
if (previousBlockCoords.top > 0) {
scrollUpOffset = Math.abs(currentBlockCoords.top) - Math.abs(previousBlockCoords.top);
} else {
scrollUpOffset = window.innerHeight - Math.abs(currentBlockCoords.top) + Math.abs(previousBlockCoords.top);
}
window.scrollBy(0, -1 * scrollUpOffset);
/** Change blocks positions */
this.api.blocks.move(currentBlockIndex - 1);
this.api.toolbar.toggleBlockSettings(true);
}
}