| 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123 | 1×
1×
1×
1×
1390×
1390×
1×
1390×
1390×
1390×
1390×
1×
1390×
1390×
1390×
1390×
1×
1390×
1390×
1390×
1390×
1390×
1×
1026×
1026×
1026×
1026×
37×
37×
989×
989×
989×
989×
989×
989×
989×
989×
989×
989×
989×
989×
989×
989×
3809×
989×
989×
989×
989×
1×
1040×
1040×
1040×
1040×
1040×
1040×
1040×
194×
1×
453×
453×
1×
12×
2×
10×
10×
10×
1×
3×
3×
2×
1×
3×
3×
3×
1×
1008×
1008×
1008×
1×
1390×
1390×
1390×
1390×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "../../models/enums", "../../common/utils/dom", "../../common/utils/block", "../../common/constant", "../../common/constant"], function (require, exports, ej2_base_1, enums_1, dom_1, block_1, constants, constant_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var FloatingIcon = (function () {
function FloatingIcon(manager) {
this.parent = manager;
this.wireGlobalEvents();
}
FloatingIcon.prototype.wireGlobalEvents = function () {
this.parent.observer.on('floatingIconsCreated', this.handleFloatingIconsCreated, this);
this.parent.observer.on('addIconClick', this.handleAddIconClick, this);
this.parent.observer.on('dragIconClick', this.handleDragIconClick, this);
this.parent.observer.on(constant_1.events.destroy, this.destroy, this);
};
FloatingIcon.prototype.unWireGlobalEvents = function () {
this.parent.observer.off('floatingIconsCreated', this.handleFloatingIconsCreated);
this.parent.observer.off('addIconClick', this.handleAddIconClick);
this.parent.observer.off('dragIconClick', this.handleDragIconClick);
this.parent.observer.off(constant_1.events.destroy, this.destroy);
};
FloatingIcon.prototype.handleFloatingIconsCreated = function () {
this.floatingIconContainer = document.getElementById(this.parent.rootEditorElement.id + "_floatingicons");
var addIcon = this.floatingIconContainer.querySelector('.e-floating-icon.e-block-add-icon');
var dragIcon = this.floatingIconContainer.querySelector('.e-floating-icon.e-block-drag-icon');
ej2_base_1.EventHandler.add(addIcon, 'click', this.handleAddIconClick, this);
ej2_base_1.EventHandler.add(dragIcon, 'click', this.handleDragIconClick, this);
};
FloatingIcon.prototype.showFloatingIcons = function (target) {
var blockElement = target;
this.hideDragIconForEmptyBlock(blockElement);
var calloutContent = blockElement.closest('.' + constants.CALLOUT_CONTENT_CLS);
if ((calloutContent && blockElement === calloutContent.firstElementChild) ||
!this.isFullyVisibleInEditor(blockElement) ||
this.parent.readOnly) {
this.hideFloatingIcons();
return;
}
ej2_base_1.updateCSSText(this.floatingIconContainer, 'display: flex;');
var isToggleBlock = blockElement.classList.contains('e-toggle-block');
var tableBlock = dom_1.findClosestParent(target, '.' + constants.TABLE_BLOCK_CLS);
blockElement = isToggleBlock
? blockElement.querySelector('.e-toggle-header')
: (tableBlock ? tableBlock : blockElement);
var editorRect = dom_1.getElementRect(this.parent.rootEditorElement);
var blockElementRect = dom_1.getElementRect(blockElement);
var styles = window.getComputedStyle(blockElement);
var floatingIconRect = this.floatingIconContainer.getBoundingClientRect();
var marginTop = parseFloat(styles.marginTop) || 0;
var marginLeft = parseFloat(styles.marginLeft) || 0;
var paddingTop = parseFloat(styles.paddingTop) || 0;
var paddingLeft = parseFloat(styles.paddingLeft) || 0;
var editorScrollTop = this.parent.rootEditorElement.scrollTop || 0;
var baseTopOffset = blockElementRect.top + marginTop - editorRect.top + editorScrollTop;
var hasHeading = ['h1', 'h2', 'h3', 'h4'].some(function (tag) { return blockElement.querySelector(tag) !== null; });
var topOffset = hasHeading
? (baseTopOffset + floatingIconRect.height / 2 + paddingTop)
: baseTopOffset + paddingTop;
var adjustedLeft = (blockElementRect.left - marginLeft) + paddingLeft - (floatingIconRect.width + 5) - editorRect.left;
var cssText = "top: " + topOffset + "px; left: " + adjustedLeft + "px; pointer-events: auto;";
ej2_base_1.updateCSSText(this.floatingIconContainer, cssText);
};
FloatingIcon.prototype.hideDragIconForEmptyBlock = function (target) {
var dragIcon = this.floatingIconContainer.querySelector('.e-block-drag-icon');
ej2_base_1.updateCSSText(dragIcon, 'display: flex;');
var ignoredTypes = [enums_1.BlockType.Code, enums_1.BlockType.Callout, enums_1.BlockType.Divider, enums_1.BlockType.CollapsibleHeading,
enums_1.BlockType.CollapsibleParagraph, enums_1.BlockType.Image, enums_1.BlockType.Table];
var blockType = target.getAttribute('data-block-type');
var isIgnoredtype = blockType && ignoredTypes.indexOf(blockType) !== -1;
var contentElement = block_1.getBlockContentElement(target);
if (!isIgnoredtype && (contentElement && !contentElement.textContent)) {
ej2_base_1.updateCSSText(dragIcon, 'display: none;');
}
};
FloatingIcon.prototype.hideFloatingIcons = function () {
Eif (this.floatingIconContainer) {
ej2_base_1.updateCSSText(this.floatingIconContainer, 'display: none;');
}
};
FloatingIcon.prototype.handleDragIconClick = function (event) {
if (!this.parent.blockActionMenuSettings.enable) {
return;
}
this.parent.popupRenderer.adjustPopupPositionRelativeToTarget(this.floatingIconContainer, this.parent.blockActionMenuModule.popupObj);
var popupElement = document.querySelector('#' + this.parent.rootEditorElement.id + constants.BLOCKACTION_POPUP_ID);
this.parent.blockActionMenuModule.toggleBlockActionPopup(popupElement.classList.contains('e-popup-open'), event);
};
FloatingIcon.prototype.handleAddIconClick = function () {
var block = this.parent.currentHoveredBlock;
if ((this.parent.currentHoveredBlock.innerText.length > 0) || (block_1.isNonContentEditableBlock(block.getAttribute('data-block-type')))) {
this.parent.execCommand({
command: 'AddBlock',
state: {
targetBlock: this.parent.currentHoveredBlock,
preventUpdateAction: true,
forceIgnoreTargetUpdate: true
}
});
}
else {
this.parent.setFocusAndUIForNewBlock(block);
}
Eif (this.parent.slashCommandModule) {
this.parent.isPopupOpenedOnAddIconClick = true;
this.parent.slashCommandModule.showPopup();
}
};
FloatingIcon.prototype.isFullyVisibleInEditor = function (blockElement) {
var editorRect = this.parent.rootEditorElement.getBoundingClientRect();
var blockRect = blockElement.getBoundingClientRect();
return (blockRect.top >= editorRect.top &&
blockRect.bottom <= editorRect.bottom);
};
FloatingIcon.prototype.destroy = function () {
ej2_base_1.EventHandler.remove(this.floatingIconContainer.firstChild, 'click', this.handleAddIconClick);
ej2_base_1.EventHandler.remove(this.floatingIconContainer.lastChild, 'click', this.handleDragIconClick);
this.unWireGlobalEvents();
this.floatingIconContainer = null;
};
return FloatingIcon;
}());
exports.FloatingIcon = FloatingIcon;
});
|