@ckeditor/ckeditor5-ui 40.0.0 → 40.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -26
- package/LICENSE.md +3 -3
- package/lang/translations/gl.po +4 -4
- package/lang/translations/pt-br.po +1 -1
- package/lang/translations/sr-latn.po +6 -6
- package/lang/translations/ug.po +26 -26
- package/package.json +3 -3
- package/src/arialiveannouncer.d.ts +94 -0
- package/src/arialiveannouncer.js +113 -0
- package/src/augmentation.d.ts +86 -86
- package/src/augmentation.js +5 -5
- package/src/autocomplete/autocompleteview.d.ts +81 -81
- package/src/autocomplete/autocompleteview.js +153 -146
- package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
- package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
- package/src/bindings/clickoutsidehandler.d.ts +28 -28
- package/src/bindings/clickoutsidehandler.js +36 -36
- package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
- package/src/bindings/csstransitiondisablermixin.js +55 -55
- package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
- package/src/bindings/injectcsstransitiondisabler.js +71 -71
- package/src/bindings/preventdefault.d.ts +33 -33
- package/src/bindings/preventdefault.js +34 -34
- package/src/bindings/submithandler.d.ts +57 -57
- package/src/bindings/submithandler.js +47 -47
- package/src/button/button.d.ts +172 -178
- package/src/button/button.js +5 -5
- package/src/button/buttonlabel.d.ts +34 -34
- package/src/button/buttonlabel.js +5 -5
- package/src/button/buttonlabelview.d.ts +31 -31
- package/src/button/buttonlabelview.js +42 -42
- package/src/button/buttonview.d.ts +181 -185
- package/src/button/buttonview.js +217 -219
- package/src/button/switchbuttonview.d.ts +45 -45
- package/src/button/switchbuttonview.js +75 -75
- package/src/collapsible/collapsibleview.d.ts +69 -0
- package/src/collapsible/collapsibleview.js +95 -0
- package/src/colorgrid/colorgridview.d.ts +132 -132
- package/src/colorgrid/colorgridview.js +124 -124
- package/src/colorgrid/colortileview.d.ts +28 -28
- package/src/colorgrid/colortileview.js +40 -40
- package/src/colorgrid/utils.d.ts +47 -47
- package/src/colorgrid/utils.js +84 -84
- package/src/colorpicker/colorpickerview.d.ts +137 -137
- package/src/colorpicker/colorpickerview.js +270 -270
- package/src/colorpicker/utils.d.ts +43 -43
- package/src/colorpicker/utils.js +99 -99
- package/src/colorselector/colorgridsfragmentview.d.ts +194 -194
- package/src/colorselector/colorgridsfragmentview.js +289 -289
- package/src/colorselector/colorpickerfragmentview.d.ts +128 -128
- package/src/colorselector/colorpickerfragmentview.js +205 -205
- package/src/colorselector/colorselectorview.d.ts +242 -242
- package/src/colorselector/colorselectorview.js +256 -256
- package/src/colorselector/documentcolorcollection.d.ts +70 -70
- package/src/colorselector/documentcolorcollection.js +42 -42
- package/src/componentfactory.d.ts +81 -81
- package/src/componentfactory.js +104 -104
- package/src/dropdown/button/dropdownbutton.d.ts +25 -25
- package/src/dropdown/button/dropdownbutton.js +5 -5
- package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
- package/src/dropdown/button/dropdownbuttonview.js +66 -66
- package/src/dropdown/button/splitbuttonview.d.ts +162 -161
- package/src/dropdown/button/splitbuttonview.js +154 -152
- package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
- package/src/dropdown/dropdownpanelfocusable.js +5 -5
- package/src/dropdown/dropdownpanelview.d.ts +62 -62
- package/src/dropdown/dropdownpanelview.js +97 -97
- package/src/dropdown/dropdownview.d.ts +315 -315
- package/src/dropdown/dropdownview.js +379 -379
- package/src/dropdown/utils.d.ts +235 -235
- package/src/dropdown/utils.js +463 -458
- package/src/editableui/editableuiview.d.ts +72 -72
- package/src/editableui/editableuiview.js +112 -112
- package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
- package/src/editableui/inline/inlineeditableuiview.js +48 -48
- package/src/editorui/bodycollection.d.ts +55 -55
- package/src/editorui/bodycollection.js +84 -84
- package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
- package/src/editorui/boxed/boxededitoruiview.js +81 -81
- package/src/editorui/editorui.d.ts +288 -282
- package/src/editorui/editorui.js +412 -410
- package/src/editorui/editoruiview.d.ts +39 -39
- package/src/editorui/editoruiview.js +38 -38
- package/src/editorui/poweredby.d.ts +71 -71
- package/src/editorui/poweredby.js +276 -276
- package/src/focuscycler.d.ts +226 -226
- package/src/focuscycler.js +245 -245
- package/src/formheader/formheaderview.d.ts +59 -59
- package/src/formheader/formheaderview.js +69 -69
- package/src/highlightedtext/highlightedtextview.d.ts +38 -38
- package/src/highlightedtext/highlightedtextview.js +102 -102
- package/src/icon/iconview.d.ts +85 -85
- package/src/icon/iconview.js +114 -114
- package/src/iframe/iframeview.d.ts +50 -50
- package/src/iframe/iframeview.js +63 -63
- package/src/index.d.ts +74 -73
- package/src/index.js +71 -70
- package/src/input/inputbase.d.ts +107 -107
- package/src/input/inputbase.js +110 -110
- package/src/input/inputview.d.ts +36 -36
- package/src/input/inputview.js +24 -24
- package/src/inputnumber/inputnumberview.d.ts +49 -49
- package/src/inputnumber/inputnumberview.js +40 -40
- package/src/inputtext/inputtextview.d.ts +18 -18
- package/src/inputtext/inputtextview.js +27 -27
- package/src/label/labelview.d.ts +36 -36
- package/src/label/labelview.js +41 -41
- package/src/labeledfield/labeledfieldview.d.ts +187 -187
- package/src/labeledfield/labeledfieldview.js +157 -157
- package/src/labeledfield/utils.d.ts +123 -123
- package/src/labeledfield/utils.js +176 -176
- package/src/labeledinput/labeledinputview.d.ts +125 -125
- package/src/labeledinput/labeledinputview.js +125 -125
- package/src/list/listitemgroupview.d.ts +59 -51
- package/src/list/listitemgroupview.js +67 -75
- package/src/list/listitemview.d.ts +36 -36
- package/src/list/listitemview.js +42 -42
- package/src/list/listseparatorview.d.ts +18 -18
- package/src/list/listseparatorview.js +28 -28
- package/src/list/listview.d.ts +123 -122
- package/src/list/listview.js +188 -187
- package/src/model.d.ts +22 -22
- package/src/model.js +31 -31
- package/src/notification/notification.d.ts +211 -211
- package/src/notification/notification.js +187 -187
- package/src/panel/balloon/balloonpanelview.d.ts +685 -685
- package/src/panel/balloon/balloonpanelview.js +1010 -1010
- package/src/panel/balloon/contextualballoon.d.ts +299 -299
- package/src/panel/balloon/contextualballoon.js +572 -572
- package/src/panel/sticky/stickypanelview.d.ts +156 -156
- package/src/panel/sticky/stickypanelview.js +234 -234
- package/src/search/filteredview.d.ts +31 -31
- package/src/search/filteredview.js +5 -5
- package/src/search/searchinfoview.d.ts +45 -45
- package/src/search/searchinfoview.js +59 -59
- package/src/search/searchresultsview.d.ts +54 -54
- package/src/search/searchresultsview.js +65 -65
- package/src/search/text/searchtextqueryview.d.ts +76 -76
- package/src/search/text/searchtextqueryview.js +75 -75
- package/src/search/text/searchtextview.d.ts +219 -219
- package/src/search/text/searchtextview.js +201 -201
- package/src/spinner/spinnerview.d.ts +25 -25
- package/src/spinner/spinnerview.js +38 -38
- package/src/template.d.ts +942 -942
- package/src/template.js +1294 -1294
- package/src/textarea/textareaview.d.ts +88 -88
- package/src/textarea/textareaview.js +142 -140
- package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
- package/src/toolbar/balloon/balloontoolbar.js +300 -300
- package/src/toolbar/block/blockbuttonview.d.ts +35 -35
- package/src/toolbar/block/blockbuttonview.js +41 -41
- package/src/toolbar/block/blocktoolbar.d.ts +161 -161
- package/src/toolbar/block/blocktoolbar.js +395 -395
- package/src/toolbar/normalizetoolbarconfig.d.ts +40 -40
- package/src/toolbar/normalizetoolbarconfig.js +52 -51
- package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
- package/src/toolbar/toolbarlinebreakview.js +28 -28
- package/src/toolbar/toolbarseparatorview.d.ts +18 -18
- package/src/toolbar/toolbarseparatorview.js +28 -28
- package/src/toolbar/toolbarview.d.ts +266 -266
- package/src/toolbar/toolbarview.js +719 -719
- package/src/tooltipmanager.d.ts +180 -180
- package/src/tooltipmanager.js +353 -353
- package/src/view.d.ts +422 -422
- package/src/view.js +396 -396
- package/src/viewcollection.d.ts +139 -139
- package/src/viewcollection.js +206 -206
- package/theme/components/arialiveannouncer/arialiveannouncer.css +10 -0
- package/theme/components/button/button.css +9 -1
- package/theme/components/collapsible/collapsible.css +10 -0
- package/theme/components/formheader/formheader.css +0 -4
|
@@ -1,234 +1,234 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
|
-
*/
|
|
5
|
-
/**
|
|
6
|
-
* @module ui/panel/sticky/stickypanelview
|
|
7
|
-
*/
|
|
8
|
-
import View from '../../view';
|
|
9
|
-
import Template from '../../template';
|
|
10
|
-
import { global, toUnit, Rect } from '@ckeditor/ckeditor5-utils';
|
|
11
|
-
// @if CK_DEBUG_STICKYPANEL // const {
|
|
12
|
-
// @if CK_DEBUG_STICKYPANEL // default: RectDrawer,
|
|
13
|
-
// @if CK_DEBUG_STICKYPANEL // diagonalStylesBlack
|
|
14
|
-
// @if CK_DEBUG_STICKYPANEL // } = require( '@ckeditor/ckeditor5-utils/tests/_utils/rectdrawer' );
|
|
15
|
-
import '../../../theme/components/panel/stickypanel.css';
|
|
16
|
-
const toPx = toUnit('px');
|
|
17
|
-
/**
|
|
18
|
-
* The sticky panel view class.
|
|
19
|
-
*/
|
|
20
|
-
export default class StickyPanelView extends View {
|
|
21
|
-
/**
|
|
22
|
-
* @inheritDoc
|
|
23
|
-
*/
|
|
24
|
-
constructor(locale) {
|
|
25
|
-
super(locale);
|
|
26
|
-
const bind = this.bindTemplate;
|
|
27
|
-
this.set('isActive', false);
|
|
28
|
-
this.set('isSticky', false);
|
|
29
|
-
this.set('limiterElement', null);
|
|
30
|
-
this.set('limiterBottomOffset', 50);
|
|
31
|
-
this.set('viewportTopOffset', 0);
|
|
32
|
-
this.set('_marginLeft', null);
|
|
33
|
-
this.set('_isStickyToTheBottomOfLimiter', false);
|
|
34
|
-
this.set('_stickyTopOffset', null);
|
|
35
|
-
this.set('_stickyBottomOffset', null);
|
|
36
|
-
this.content = this.createCollection();
|
|
37
|
-
this._contentPanelPlaceholder = new Template({
|
|
38
|
-
tag: 'div',
|
|
39
|
-
attributes: {
|
|
40
|
-
class: [
|
|
41
|
-
'ck',
|
|
42
|
-
'ck-sticky-panel__placeholder'
|
|
43
|
-
],
|
|
44
|
-
style: {
|
|
45
|
-
display: bind.to('isSticky', isSticky => isSticky ? 'block' : 'none'),
|
|
46
|
-
height: bind.to('isSticky', isSticky => {
|
|
47
|
-
return isSticky ? toPx(this._contentPanelRect.height) : null;
|
|
48
|
-
})
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}).render();
|
|
52
|
-
this._contentPanel = new Template({
|
|
53
|
-
tag: 'div',
|
|
54
|
-
attributes: {
|
|
55
|
-
class: [
|
|
56
|
-
'ck',
|
|
57
|
-
'ck-sticky-panel__content',
|
|
58
|
-
// Toggle class of the panel when "sticky" state changes in the view.
|
|
59
|
-
bind.if('isSticky', 'ck-sticky-panel__content_sticky'),
|
|
60
|
-
bind.if('_isStickyToTheBottomOfLimiter', 'ck-sticky-panel__content_sticky_bottom-limit')
|
|
61
|
-
],
|
|
62
|
-
style: {
|
|
63
|
-
width: bind.to('isSticky', isSticky => {
|
|
64
|
-
return isSticky ? toPx(this._contentPanelPlaceholder.getBoundingClientRect().width) : null;
|
|
65
|
-
}),
|
|
66
|
-
top: bind.to('_stickyTopOffset', value => value ? toPx(value) : value),
|
|
67
|
-
bottom: bind.to('_stickyBottomOffset', value => value ? toPx(value) : value),
|
|
68
|
-
marginLeft: bind.to('_marginLeft')
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
children: this.content
|
|
72
|
-
}).render();
|
|
73
|
-
this.setTemplate({
|
|
74
|
-
tag: 'div',
|
|
75
|
-
attributes: {
|
|
76
|
-
class: [
|
|
77
|
-
'ck',
|
|
78
|
-
'ck-sticky-panel'
|
|
79
|
-
]
|
|
80
|
-
},
|
|
81
|
-
children: [
|
|
82
|
-
this._contentPanelPlaceholder,
|
|
83
|
-
this._contentPanel
|
|
84
|
-
]
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
/**
|
|
88
|
-
* @inheritDoc
|
|
89
|
-
*/
|
|
90
|
-
render() {
|
|
91
|
-
super.render();
|
|
92
|
-
// Check if the panel should go into the sticky state immediately.
|
|
93
|
-
this.checkIfShouldBeSticky();
|
|
94
|
-
// Update sticky state of the panel as the window and ancestors are being scrolled.
|
|
95
|
-
this.listenTo(global.document, 'scroll', () => {
|
|
96
|
-
this.checkIfShouldBeSticky();
|
|
97
|
-
}, { useCapture: true });
|
|
98
|
-
// Synchronize with `model.isActive` because sticking an inactive panel is pointless.
|
|
99
|
-
this.listenTo(this, 'change:isActive', () => {
|
|
100
|
-
this.checkIfShouldBeSticky();
|
|
101
|
-
});
|
|
102
|
-
}
|
|
103
|
-
/**
|
|
104
|
-
* Analyzes the environment to decide whether the panel should be sticky or not.
|
|
105
|
-
* Then handles the positioning of the panel.
|
|
106
|
-
*/
|
|
107
|
-
checkIfShouldBeSticky() {
|
|
108
|
-
// @if CK_DEBUG_STICKYPANEL // RectDrawer.clear();
|
|
109
|
-
if (!this.limiterElement || !this.isActive) {
|
|
110
|
-
this._unstick();
|
|
111
|
-
return;
|
|
112
|
-
}
|
|
113
|
-
const limiterRect = new Rect(this.limiterElement);
|
|
114
|
-
let visibleLimiterRect = limiterRect.getVisible();
|
|
115
|
-
if (visibleLimiterRect) {
|
|
116
|
-
const windowRect = new Rect(global.window);
|
|
117
|
-
windowRect.top += this.viewportTopOffset;
|
|
118
|
-
windowRect.height -= this.viewportTopOffset;
|
|
119
|
-
visibleLimiterRect = visibleLimiterRect.getIntersection(windowRect);
|
|
120
|
-
}
|
|
121
|
-
// @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {
|
|
122
|
-
// @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( visibleLimiterRect,
|
|
123
|
-
// @if CK_DEBUG_STICKYPANEL // { outlineWidth: '3px', opacity: '.8', outlineColor: 'red', outlineOffset: '-3px' },
|
|
124
|
-
// @if CK_DEBUG_STICKYPANEL // 'Visible anc'
|
|
125
|
-
// @if CK_DEBUG_STICKYPANEL // );
|
|
126
|
-
// @if CK_DEBUG_STICKYPANEL // }
|
|
127
|
-
// @if CK_DEBUG_STICKYPANEL //
|
|
128
|
-
// @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( limiterRect,
|
|
129
|
-
// @if CK_DEBUG_STICKYPANEL // { outlineWidth: '3px', opacity: '.8', outlineColor: 'green', outlineOffset: '-3px' },
|
|
130
|
-
// @if CK_DEBUG_STICKYPANEL // 'Limiter'
|
|
131
|
-
// @if CK_DEBUG_STICKYPANEL // );
|
|
132
|
-
// Stick the panel only if
|
|
133
|
-
// * the limiter's ancestors are intersecting with each other so that some of their rects are visible,
|
|
134
|
-
// * and the limiter's top edge is above the visible ancestors' top edge.
|
|
135
|
-
if (visibleLimiterRect && limiterRect.top < visibleLimiterRect.top) {
|
|
136
|
-
// @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( visibleLimiterRect,
|
|
137
|
-
// @if CK_DEBUG_STICKYPANEL // { outlineWidth: '3px', opacity: '.8', outlineColor: 'fuchsia', outlineOffset: '-3px',
|
|
138
|
-
// @if CK_DEBUG_STICKYPANEL // backgroundColor: 'rgba(255, 0, 255, .3)' },
|
|
139
|
-
// @if CK_DEBUG_STICKYPANEL // 'Visible limiter'
|
|
140
|
-
// @if CK_DEBUG_STICKYPANEL // );
|
|
141
|
-
const visibleLimiterTop = visibleLimiterRect.top;
|
|
142
|
-
// Check if there's a change the panel can be sticky to the bottom of the limiter.
|
|
143
|
-
if (visibleLimiterTop + this._contentPanelRect.height + this.limiterBottomOffset > visibleLimiterRect.bottom) {
|
|
144
|
-
const stickyBottomOffset = Math.max(limiterRect.bottom - visibleLimiterRect.bottom, 0) + this.limiterBottomOffset;
|
|
145
|
-
// @if CK_DEBUG_STICKYPANEL // const stickyBottomOffsetRect = new Rect( {
|
|
146
|
-
// @if CK_DEBUG_STICKYPANEL // top: limiterRect.bottom - stickyBottomOffset, left: 0, right: 2000,
|
|
147
|
-
// @if CK_DEBUG_STICKYPANEL // bottom: limiterRect.bottom - stickyBottomOffset, width: 2000, height: 1
|
|
148
|
-
// @if CK_DEBUG_STICKYPANEL // } );
|
|
149
|
-
// @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( stickyBottomOffsetRect,
|
|
150
|
-
// @if CK_DEBUG_STICKYPANEL // { outlineWidth: '1px', opacity: '.8', outlineColor: 'black' },
|
|
151
|
-
// @if CK_DEBUG_STICKYPANEL // 'Sticky bottom offset'
|
|
152
|
-
// @if CK_DEBUG_STICKYPANEL // );
|
|
153
|
-
// Check if sticking the panel to the bottom of the limiter does not cause it to suddenly
|
|
154
|
-
// move upwards if there's not enough space for it.
|
|
155
|
-
if (limiterRect.bottom - stickyBottomOffset > limiterRect.top + this._contentPanelRect.height) {
|
|
156
|
-
this._stickToBottomOfLimiter(stickyBottomOffset);
|
|
157
|
-
}
|
|
158
|
-
else {
|
|
159
|
-
this._unstick();
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
else {
|
|
163
|
-
if (this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height) {
|
|
164
|
-
this._stickToTopOfAncestors(visibleLimiterTop);
|
|
165
|
-
}
|
|
166
|
-
else {
|
|
167
|
-
this._unstick();
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
else {
|
|
172
|
-
this._unstick();
|
|
173
|
-
}
|
|
174
|
-
// @if CK_DEBUG_STICKYPANEL // console.clear();
|
|
175
|
-
// @if CK_DEBUG_STICKYPANEL // console.log( 'isSticky', this.isSticky );
|
|
176
|
-
// @if CK_DEBUG_STICKYPANEL // console.log( '_isStickyToTheBottomOfLimiter', this._isStickyToTheBottomOfLimiter );
|
|
177
|
-
// @if CK_DEBUG_STICKYPANEL // console.log( '_stickyTopOffset', this._stickyTopOffset );
|
|
178
|
-
// @if CK_DEBUG_STICKYPANEL // console.log( '_stickyBottomOffset', this._stickyBottomOffset );
|
|
179
|
-
// @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {
|
|
180
|
-
// @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( visibleLimiterRect,
|
|
181
|
-
// @if CK_DEBUG_STICKYPANEL // { ...diagonalStylesBlack,
|
|
182
|
-
// @if CK_DEBUG_STICKYPANEL // outlineWidth: '3px', opacity: '.8', outlineColor: 'orange', outlineOffset: '-3px',
|
|
183
|
-
// @if CK_DEBUG_STICKYPANEL // backgroundColor: 'rgba(0, 0, 255, .2)' },
|
|
184
|
-
// @if CK_DEBUG_STICKYPANEL // 'visibleLimiterRect'
|
|
185
|
-
// @if CK_DEBUG_STICKYPANEL // );
|
|
186
|
-
// @if CK_DEBUG_STICKYPANEL // }
|
|
187
|
-
}
|
|
188
|
-
/**
|
|
189
|
-
* Sticks the panel at the given CSS `top` offset.
|
|
190
|
-
*
|
|
191
|
-
* @private
|
|
192
|
-
* @param topOffset
|
|
193
|
-
*/
|
|
194
|
-
_stickToTopOfAncestors(topOffset) {
|
|
195
|
-
this.isSticky = true;
|
|
196
|
-
this._isStickyToTheBottomOfLimiter = false;
|
|
197
|
-
this._stickyTopOffset = topOffset;
|
|
198
|
-
this._stickyBottomOffset = null;
|
|
199
|
-
this._marginLeft = toPx(-global.window.scrollX);
|
|
200
|
-
}
|
|
201
|
-
/**
|
|
202
|
-
* Sticks the panel at the bottom of the limiter with a given CSS `bottom` offset.
|
|
203
|
-
*
|
|
204
|
-
* @private
|
|
205
|
-
* @param stickyBottomOffset
|
|
206
|
-
*/
|
|
207
|
-
_stickToBottomOfLimiter(stickyBottomOffset) {
|
|
208
|
-
this.isSticky = true;
|
|
209
|
-
this._isStickyToTheBottomOfLimiter = true;
|
|
210
|
-
this._stickyTopOffset = null;
|
|
211
|
-
this._stickyBottomOffset = stickyBottomOffset;
|
|
212
|
-
this._marginLeft = toPx(-global.window.scrollX);
|
|
213
|
-
}
|
|
214
|
-
/**
|
|
215
|
-
* Unsticks the panel putting it back to its original position.
|
|
216
|
-
*
|
|
217
|
-
* @private
|
|
218
|
-
*/
|
|
219
|
-
_unstick() {
|
|
220
|
-
this.isSticky = false;
|
|
221
|
-
this._isStickyToTheBottomOfLimiter = false;
|
|
222
|
-
this._stickyTopOffset = null;
|
|
223
|
-
this._stickyBottomOffset = null;
|
|
224
|
-
this._marginLeft = null;
|
|
225
|
-
}
|
|
226
|
-
/**
|
|
227
|
-
* Returns the bounding rect of the {@link #_contentPanel}.
|
|
228
|
-
*
|
|
229
|
-
* @private
|
|
230
|
-
*/
|
|
231
|
-
get _contentPanelRect() {
|
|
232
|
-
return new Rect(this._contentPanel);
|
|
233
|
-
}
|
|
234
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* @module ui/panel/sticky/stickypanelview
|
|
7
|
+
*/
|
|
8
|
+
import View from '../../view';
|
|
9
|
+
import Template from '../../template';
|
|
10
|
+
import { global, toUnit, Rect } from '@ckeditor/ckeditor5-utils';
|
|
11
|
+
// @if CK_DEBUG_STICKYPANEL // const {
|
|
12
|
+
// @if CK_DEBUG_STICKYPANEL // default: RectDrawer,
|
|
13
|
+
// @if CK_DEBUG_STICKYPANEL // diagonalStylesBlack
|
|
14
|
+
// @if CK_DEBUG_STICKYPANEL // } = require( '@ckeditor/ckeditor5-utils/tests/_utils/rectdrawer' );
|
|
15
|
+
import '../../../theme/components/panel/stickypanel.css';
|
|
16
|
+
const toPx = toUnit('px');
|
|
17
|
+
/**
|
|
18
|
+
* The sticky panel view class.
|
|
19
|
+
*/
|
|
20
|
+
export default class StickyPanelView extends View {
|
|
21
|
+
/**
|
|
22
|
+
* @inheritDoc
|
|
23
|
+
*/
|
|
24
|
+
constructor(locale) {
|
|
25
|
+
super(locale);
|
|
26
|
+
const bind = this.bindTemplate;
|
|
27
|
+
this.set('isActive', false);
|
|
28
|
+
this.set('isSticky', false);
|
|
29
|
+
this.set('limiterElement', null);
|
|
30
|
+
this.set('limiterBottomOffset', 50);
|
|
31
|
+
this.set('viewportTopOffset', 0);
|
|
32
|
+
this.set('_marginLeft', null);
|
|
33
|
+
this.set('_isStickyToTheBottomOfLimiter', false);
|
|
34
|
+
this.set('_stickyTopOffset', null);
|
|
35
|
+
this.set('_stickyBottomOffset', null);
|
|
36
|
+
this.content = this.createCollection();
|
|
37
|
+
this._contentPanelPlaceholder = new Template({
|
|
38
|
+
tag: 'div',
|
|
39
|
+
attributes: {
|
|
40
|
+
class: [
|
|
41
|
+
'ck',
|
|
42
|
+
'ck-sticky-panel__placeholder'
|
|
43
|
+
],
|
|
44
|
+
style: {
|
|
45
|
+
display: bind.to('isSticky', isSticky => isSticky ? 'block' : 'none'),
|
|
46
|
+
height: bind.to('isSticky', isSticky => {
|
|
47
|
+
return isSticky ? toPx(this._contentPanelRect.height) : null;
|
|
48
|
+
})
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}).render();
|
|
52
|
+
this._contentPanel = new Template({
|
|
53
|
+
tag: 'div',
|
|
54
|
+
attributes: {
|
|
55
|
+
class: [
|
|
56
|
+
'ck',
|
|
57
|
+
'ck-sticky-panel__content',
|
|
58
|
+
// Toggle class of the panel when "sticky" state changes in the view.
|
|
59
|
+
bind.if('isSticky', 'ck-sticky-panel__content_sticky'),
|
|
60
|
+
bind.if('_isStickyToTheBottomOfLimiter', 'ck-sticky-panel__content_sticky_bottom-limit')
|
|
61
|
+
],
|
|
62
|
+
style: {
|
|
63
|
+
width: bind.to('isSticky', isSticky => {
|
|
64
|
+
return isSticky ? toPx(this._contentPanelPlaceholder.getBoundingClientRect().width) : null;
|
|
65
|
+
}),
|
|
66
|
+
top: bind.to('_stickyTopOffset', value => value ? toPx(value) : value),
|
|
67
|
+
bottom: bind.to('_stickyBottomOffset', value => value ? toPx(value) : value),
|
|
68
|
+
marginLeft: bind.to('_marginLeft')
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
children: this.content
|
|
72
|
+
}).render();
|
|
73
|
+
this.setTemplate({
|
|
74
|
+
tag: 'div',
|
|
75
|
+
attributes: {
|
|
76
|
+
class: [
|
|
77
|
+
'ck',
|
|
78
|
+
'ck-sticky-panel'
|
|
79
|
+
]
|
|
80
|
+
},
|
|
81
|
+
children: [
|
|
82
|
+
this._contentPanelPlaceholder,
|
|
83
|
+
this._contentPanel
|
|
84
|
+
]
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* @inheritDoc
|
|
89
|
+
*/
|
|
90
|
+
render() {
|
|
91
|
+
super.render();
|
|
92
|
+
// Check if the panel should go into the sticky state immediately.
|
|
93
|
+
this.checkIfShouldBeSticky();
|
|
94
|
+
// Update sticky state of the panel as the window and ancestors are being scrolled.
|
|
95
|
+
this.listenTo(global.document, 'scroll', () => {
|
|
96
|
+
this.checkIfShouldBeSticky();
|
|
97
|
+
}, { useCapture: true });
|
|
98
|
+
// Synchronize with `model.isActive` because sticking an inactive panel is pointless.
|
|
99
|
+
this.listenTo(this, 'change:isActive', () => {
|
|
100
|
+
this.checkIfShouldBeSticky();
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Analyzes the environment to decide whether the panel should be sticky or not.
|
|
105
|
+
* Then handles the positioning of the panel.
|
|
106
|
+
*/
|
|
107
|
+
checkIfShouldBeSticky() {
|
|
108
|
+
// @if CK_DEBUG_STICKYPANEL // RectDrawer.clear();
|
|
109
|
+
if (!this.limiterElement || !this.isActive) {
|
|
110
|
+
this._unstick();
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
const limiterRect = new Rect(this.limiterElement);
|
|
114
|
+
let visibleLimiterRect = limiterRect.getVisible();
|
|
115
|
+
if (visibleLimiterRect) {
|
|
116
|
+
const windowRect = new Rect(global.window);
|
|
117
|
+
windowRect.top += this.viewportTopOffset;
|
|
118
|
+
windowRect.height -= this.viewportTopOffset;
|
|
119
|
+
visibleLimiterRect = visibleLimiterRect.getIntersection(windowRect);
|
|
120
|
+
}
|
|
121
|
+
// @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {
|
|
122
|
+
// @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( visibleLimiterRect,
|
|
123
|
+
// @if CK_DEBUG_STICKYPANEL // { outlineWidth: '3px', opacity: '.8', outlineColor: 'red', outlineOffset: '-3px' },
|
|
124
|
+
// @if CK_DEBUG_STICKYPANEL // 'Visible anc'
|
|
125
|
+
// @if CK_DEBUG_STICKYPANEL // );
|
|
126
|
+
// @if CK_DEBUG_STICKYPANEL // }
|
|
127
|
+
// @if CK_DEBUG_STICKYPANEL //
|
|
128
|
+
// @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( limiterRect,
|
|
129
|
+
// @if CK_DEBUG_STICKYPANEL // { outlineWidth: '3px', opacity: '.8', outlineColor: 'green', outlineOffset: '-3px' },
|
|
130
|
+
// @if CK_DEBUG_STICKYPANEL // 'Limiter'
|
|
131
|
+
// @if CK_DEBUG_STICKYPANEL // );
|
|
132
|
+
// Stick the panel only if
|
|
133
|
+
// * the limiter's ancestors are intersecting with each other so that some of their rects are visible,
|
|
134
|
+
// * and the limiter's top edge is above the visible ancestors' top edge.
|
|
135
|
+
if (visibleLimiterRect && limiterRect.top < visibleLimiterRect.top) {
|
|
136
|
+
// @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( visibleLimiterRect,
|
|
137
|
+
// @if CK_DEBUG_STICKYPANEL // { outlineWidth: '3px', opacity: '.8', outlineColor: 'fuchsia', outlineOffset: '-3px',
|
|
138
|
+
// @if CK_DEBUG_STICKYPANEL // backgroundColor: 'rgba(255, 0, 255, .3)' },
|
|
139
|
+
// @if CK_DEBUG_STICKYPANEL // 'Visible limiter'
|
|
140
|
+
// @if CK_DEBUG_STICKYPANEL // );
|
|
141
|
+
const visibleLimiterTop = visibleLimiterRect.top;
|
|
142
|
+
// Check if there's a change the panel can be sticky to the bottom of the limiter.
|
|
143
|
+
if (visibleLimiterTop + this._contentPanelRect.height + this.limiterBottomOffset > visibleLimiterRect.bottom) {
|
|
144
|
+
const stickyBottomOffset = Math.max(limiterRect.bottom - visibleLimiterRect.bottom, 0) + this.limiterBottomOffset;
|
|
145
|
+
// @if CK_DEBUG_STICKYPANEL // const stickyBottomOffsetRect = new Rect( {
|
|
146
|
+
// @if CK_DEBUG_STICKYPANEL // top: limiterRect.bottom - stickyBottomOffset, left: 0, right: 2000,
|
|
147
|
+
// @if CK_DEBUG_STICKYPANEL // bottom: limiterRect.bottom - stickyBottomOffset, width: 2000, height: 1
|
|
148
|
+
// @if CK_DEBUG_STICKYPANEL // } );
|
|
149
|
+
// @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( stickyBottomOffsetRect,
|
|
150
|
+
// @if CK_DEBUG_STICKYPANEL // { outlineWidth: '1px', opacity: '.8', outlineColor: 'black' },
|
|
151
|
+
// @if CK_DEBUG_STICKYPANEL // 'Sticky bottom offset'
|
|
152
|
+
// @if CK_DEBUG_STICKYPANEL // );
|
|
153
|
+
// Check if sticking the panel to the bottom of the limiter does not cause it to suddenly
|
|
154
|
+
// move upwards if there's not enough space for it.
|
|
155
|
+
if (limiterRect.bottom - stickyBottomOffset > limiterRect.top + this._contentPanelRect.height) {
|
|
156
|
+
this._stickToBottomOfLimiter(stickyBottomOffset);
|
|
157
|
+
}
|
|
158
|
+
else {
|
|
159
|
+
this._unstick();
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
else {
|
|
163
|
+
if (this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height) {
|
|
164
|
+
this._stickToTopOfAncestors(visibleLimiterTop);
|
|
165
|
+
}
|
|
166
|
+
else {
|
|
167
|
+
this._unstick();
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
else {
|
|
172
|
+
this._unstick();
|
|
173
|
+
}
|
|
174
|
+
// @if CK_DEBUG_STICKYPANEL // console.clear();
|
|
175
|
+
// @if CK_DEBUG_STICKYPANEL // console.log( 'isSticky', this.isSticky );
|
|
176
|
+
// @if CK_DEBUG_STICKYPANEL // console.log( '_isStickyToTheBottomOfLimiter', this._isStickyToTheBottomOfLimiter );
|
|
177
|
+
// @if CK_DEBUG_STICKYPANEL // console.log( '_stickyTopOffset', this._stickyTopOffset );
|
|
178
|
+
// @if CK_DEBUG_STICKYPANEL // console.log( '_stickyBottomOffset', this._stickyBottomOffset );
|
|
179
|
+
// @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {
|
|
180
|
+
// @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( visibleLimiterRect,
|
|
181
|
+
// @if CK_DEBUG_STICKYPANEL // { ...diagonalStylesBlack,
|
|
182
|
+
// @if CK_DEBUG_STICKYPANEL // outlineWidth: '3px', opacity: '.8', outlineColor: 'orange', outlineOffset: '-3px',
|
|
183
|
+
// @if CK_DEBUG_STICKYPANEL // backgroundColor: 'rgba(0, 0, 255, .2)' },
|
|
184
|
+
// @if CK_DEBUG_STICKYPANEL // 'visibleLimiterRect'
|
|
185
|
+
// @if CK_DEBUG_STICKYPANEL // );
|
|
186
|
+
// @if CK_DEBUG_STICKYPANEL // }
|
|
187
|
+
}
|
|
188
|
+
/**
|
|
189
|
+
* Sticks the panel at the given CSS `top` offset.
|
|
190
|
+
*
|
|
191
|
+
* @private
|
|
192
|
+
* @param topOffset
|
|
193
|
+
*/
|
|
194
|
+
_stickToTopOfAncestors(topOffset) {
|
|
195
|
+
this.isSticky = true;
|
|
196
|
+
this._isStickyToTheBottomOfLimiter = false;
|
|
197
|
+
this._stickyTopOffset = topOffset;
|
|
198
|
+
this._stickyBottomOffset = null;
|
|
199
|
+
this._marginLeft = toPx(-global.window.scrollX);
|
|
200
|
+
}
|
|
201
|
+
/**
|
|
202
|
+
* Sticks the panel at the bottom of the limiter with a given CSS `bottom` offset.
|
|
203
|
+
*
|
|
204
|
+
* @private
|
|
205
|
+
* @param stickyBottomOffset
|
|
206
|
+
*/
|
|
207
|
+
_stickToBottomOfLimiter(stickyBottomOffset) {
|
|
208
|
+
this.isSticky = true;
|
|
209
|
+
this._isStickyToTheBottomOfLimiter = true;
|
|
210
|
+
this._stickyTopOffset = null;
|
|
211
|
+
this._stickyBottomOffset = stickyBottomOffset;
|
|
212
|
+
this._marginLeft = toPx(-global.window.scrollX);
|
|
213
|
+
}
|
|
214
|
+
/**
|
|
215
|
+
* Unsticks the panel putting it back to its original position.
|
|
216
|
+
*
|
|
217
|
+
* @private
|
|
218
|
+
*/
|
|
219
|
+
_unstick() {
|
|
220
|
+
this.isSticky = false;
|
|
221
|
+
this._isStickyToTheBottomOfLimiter = false;
|
|
222
|
+
this._stickyTopOffset = null;
|
|
223
|
+
this._stickyBottomOffset = null;
|
|
224
|
+
this._marginLeft = null;
|
|
225
|
+
}
|
|
226
|
+
/**
|
|
227
|
+
* Returns the bounding rect of the {@link #_contentPanel}.
|
|
228
|
+
*
|
|
229
|
+
* @private
|
|
230
|
+
*/
|
|
231
|
+
get _contentPanelRect() {
|
|
232
|
+
return new Rect(this._contentPanel);
|
|
233
|
+
}
|
|
234
|
+
}
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
|
-
*/
|
|
5
|
-
import type { FocusableView } from '../focuscycler';
|
|
6
|
-
/**
|
|
7
|
-
* @module ui/search/filteredview
|
|
8
|
-
*/
|
|
9
|
-
/**
|
|
10
|
-
* A view that can be filtered by a {@link module:ui/search/text/searchtextview~SearchTextView}.
|
|
11
|
-
*/
|
|
12
|
-
export default interface FilteredView extends FocusableView {
|
|
13
|
-
/**
|
|
14
|
-
* Filters the view by the given regular expression.
|
|
15
|
-
*/
|
|
16
|
-
filter(regExp: RegExp | null): {
|
|
17
|
-
resultsCount: number;
|
|
18
|
-
totalItemsCount: number;
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
/**
|
|
22
|
-
* Fired when the user selects an autocomplete option. The event data should contain the selected value.
|
|
23
|
-
*
|
|
24
|
-
* @eventName ~FilteredView#execute
|
|
25
|
-
*/
|
|
26
|
-
export interface FilteredViewExecuteEvent {
|
|
27
|
-
name: 'execute';
|
|
28
|
-
args: [{
|
|
29
|
-
value: string;
|
|
30
|
-
}];
|
|
31
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
|
+
*/
|
|
5
|
+
import type { FocusableView } from '../focuscycler';
|
|
6
|
+
/**
|
|
7
|
+
* @module ui/search/filteredview
|
|
8
|
+
*/
|
|
9
|
+
/**
|
|
10
|
+
* A view that can be filtered by a {@link module:ui/search/text/searchtextview~SearchTextView}.
|
|
11
|
+
*/
|
|
12
|
+
export default interface FilteredView extends FocusableView {
|
|
13
|
+
/**
|
|
14
|
+
* Filters the view by the given regular expression.
|
|
15
|
+
*/
|
|
16
|
+
filter(regExp: RegExp | null): {
|
|
17
|
+
resultsCount: number;
|
|
18
|
+
totalItemsCount: number;
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Fired when the user selects an autocomplete option. The event data should contain the selected value.
|
|
23
|
+
*
|
|
24
|
+
* @eventName ~FilteredView#execute
|
|
25
|
+
*/
|
|
26
|
+
export interface FilteredViewExecuteEvent {
|
|
27
|
+
name: 'execute';
|
|
28
|
+
args: [{
|
|
29
|
+
value: string;
|
|
30
|
+
}];
|
|
31
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
|
-
*/
|
|
5
|
-
export {};
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
|
+
*/
|
|
5
|
+
export {};
|
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
|
-
*/
|
|
5
|
-
/**
|
|
6
|
-
* @module ui/search/searchinfoview
|
|
7
|
-
*/
|
|
8
|
-
import type { FocusableView } from '../focuscycler';
|
|
9
|
-
import View from '../view';
|
|
10
|
-
/**
|
|
11
|
-
* A view displaying an information text related to different states of {@link module:ui/search/text/searchtextview~SearchTextView}.
|
|
12
|
-
*
|
|
13
|
-
* @internal
|
|
14
|
-
*/
|
|
15
|
-
export default class SearchInfoView extends View implements FocusableView {
|
|
16
|
-
/**
|
|
17
|
-
* Controls whether the view is visible.
|
|
18
|
-
*
|
|
19
|
-
* @observable
|
|
20
|
-
* @default false
|
|
21
|
-
*/
|
|
22
|
-
isVisible: boolean;
|
|
23
|
-
/**
|
|
24
|
-
* Controls the primary line of text in the info.
|
|
25
|
-
*
|
|
26
|
-
* @observable
|
|
27
|
-
* @default ''
|
|
28
|
-
*/
|
|
29
|
-
primaryText: string;
|
|
30
|
-
/**
|
|
31
|
-
* Controls the secondary line of text in the info.
|
|
32
|
-
*
|
|
33
|
-
* @observable
|
|
34
|
-
* @default ''
|
|
35
|
-
*/
|
|
36
|
-
secondaryText: string;
|
|
37
|
-
/**
|
|
38
|
-
* @inheritDoc
|
|
39
|
-
*/
|
|
40
|
-
constructor();
|
|
41
|
-
/**
|
|
42
|
-
* Focuses the view
|
|
43
|
-
*/
|
|
44
|
-
focus(): void;
|
|
45
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* @module ui/search/searchinfoview
|
|
7
|
+
*/
|
|
8
|
+
import type { FocusableView } from '../focuscycler';
|
|
9
|
+
import View from '../view';
|
|
10
|
+
/**
|
|
11
|
+
* A view displaying an information text related to different states of {@link module:ui/search/text/searchtextview~SearchTextView}.
|
|
12
|
+
*
|
|
13
|
+
* @internal
|
|
14
|
+
*/
|
|
15
|
+
export default class SearchInfoView extends View implements FocusableView {
|
|
16
|
+
/**
|
|
17
|
+
* Controls whether the view is visible.
|
|
18
|
+
*
|
|
19
|
+
* @observable
|
|
20
|
+
* @default false
|
|
21
|
+
*/
|
|
22
|
+
isVisible: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Controls the primary line of text in the info.
|
|
25
|
+
*
|
|
26
|
+
* @observable
|
|
27
|
+
* @default ''
|
|
28
|
+
*/
|
|
29
|
+
primaryText: string;
|
|
30
|
+
/**
|
|
31
|
+
* Controls the secondary line of text in the info.
|
|
32
|
+
*
|
|
33
|
+
* @observable
|
|
34
|
+
* @default ''
|
|
35
|
+
*/
|
|
36
|
+
secondaryText: string;
|
|
37
|
+
/**
|
|
38
|
+
* @inheritDoc
|
|
39
|
+
*/
|
|
40
|
+
constructor();
|
|
41
|
+
/**
|
|
42
|
+
* Focuses the view
|
|
43
|
+
*/
|
|
44
|
+
focus(): void;
|
|
45
|
+
}
|