@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.
Files changed (171) hide show
  1. package/CHANGELOG.md +26 -26
  2. package/LICENSE.md +3 -3
  3. package/lang/translations/gl.po +4 -4
  4. package/lang/translations/pt-br.po +1 -1
  5. package/lang/translations/sr-latn.po +6 -6
  6. package/lang/translations/ug.po +26 -26
  7. package/package.json +3 -3
  8. package/src/arialiveannouncer.d.ts +94 -0
  9. package/src/arialiveannouncer.js +113 -0
  10. package/src/augmentation.d.ts +86 -86
  11. package/src/augmentation.js +5 -5
  12. package/src/autocomplete/autocompleteview.d.ts +81 -81
  13. package/src/autocomplete/autocompleteview.js +153 -146
  14. package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
  15. package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
  16. package/src/bindings/clickoutsidehandler.d.ts +28 -28
  17. package/src/bindings/clickoutsidehandler.js +36 -36
  18. package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
  19. package/src/bindings/csstransitiondisablermixin.js +55 -55
  20. package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
  21. package/src/bindings/injectcsstransitiondisabler.js +71 -71
  22. package/src/bindings/preventdefault.d.ts +33 -33
  23. package/src/bindings/preventdefault.js +34 -34
  24. package/src/bindings/submithandler.d.ts +57 -57
  25. package/src/bindings/submithandler.js +47 -47
  26. package/src/button/button.d.ts +172 -178
  27. package/src/button/button.js +5 -5
  28. package/src/button/buttonlabel.d.ts +34 -34
  29. package/src/button/buttonlabel.js +5 -5
  30. package/src/button/buttonlabelview.d.ts +31 -31
  31. package/src/button/buttonlabelview.js +42 -42
  32. package/src/button/buttonview.d.ts +181 -185
  33. package/src/button/buttonview.js +217 -219
  34. package/src/button/switchbuttonview.d.ts +45 -45
  35. package/src/button/switchbuttonview.js +75 -75
  36. package/src/collapsible/collapsibleview.d.ts +69 -0
  37. package/src/collapsible/collapsibleview.js +95 -0
  38. package/src/colorgrid/colorgridview.d.ts +132 -132
  39. package/src/colorgrid/colorgridview.js +124 -124
  40. package/src/colorgrid/colortileview.d.ts +28 -28
  41. package/src/colorgrid/colortileview.js +40 -40
  42. package/src/colorgrid/utils.d.ts +47 -47
  43. package/src/colorgrid/utils.js +84 -84
  44. package/src/colorpicker/colorpickerview.d.ts +137 -137
  45. package/src/colorpicker/colorpickerview.js +270 -270
  46. package/src/colorpicker/utils.d.ts +43 -43
  47. package/src/colorpicker/utils.js +99 -99
  48. package/src/colorselector/colorgridsfragmentview.d.ts +194 -194
  49. package/src/colorselector/colorgridsfragmentview.js +289 -289
  50. package/src/colorselector/colorpickerfragmentview.d.ts +128 -128
  51. package/src/colorselector/colorpickerfragmentview.js +205 -205
  52. package/src/colorselector/colorselectorview.d.ts +242 -242
  53. package/src/colorselector/colorselectorview.js +256 -256
  54. package/src/colorselector/documentcolorcollection.d.ts +70 -70
  55. package/src/colorselector/documentcolorcollection.js +42 -42
  56. package/src/componentfactory.d.ts +81 -81
  57. package/src/componentfactory.js +104 -104
  58. package/src/dropdown/button/dropdownbutton.d.ts +25 -25
  59. package/src/dropdown/button/dropdownbutton.js +5 -5
  60. package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
  61. package/src/dropdown/button/dropdownbuttonview.js +66 -66
  62. package/src/dropdown/button/splitbuttonview.d.ts +162 -161
  63. package/src/dropdown/button/splitbuttonview.js +154 -152
  64. package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
  65. package/src/dropdown/dropdownpanelfocusable.js +5 -5
  66. package/src/dropdown/dropdownpanelview.d.ts +62 -62
  67. package/src/dropdown/dropdownpanelview.js +97 -97
  68. package/src/dropdown/dropdownview.d.ts +315 -315
  69. package/src/dropdown/dropdownview.js +379 -379
  70. package/src/dropdown/utils.d.ts +235 -235
  71. package/src/dropdown/utils.js +463 -458
  72. package/src/editableui/editableuiview.d.ts +72 -72
  73. package/src/editableui/editableuiview.js +112 -112
  74. package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
  75. package/src/editableui/inline/inlineeditableuiview.js +48 -48
  76. package/src/editorui/bodycollection.d.ts +55 -55
  77. package/src/editorui/bodycollection.js +84 -84
  78. package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
  79. package/src/editorui/boxed/boxededitoruiview.js +81 -81
  80. package/src/editorui/editorui.d.ts +288 -282
  81. package/src/editorui/editorui.js +412 -410
  82. package/src/editorui/editoruiview.d.ts +39 -39
  83. package/src/editorui/editoruiview.js +38 -38
  84. package/src/editorui/poweredby.d.ts +71 -71
  85. package/src/editorui/poweredby.js +276 -276
  86. package/src/focuscycler.d.ts +226 -226
  87. package/src/focuscycler.js +245 -245
  88. package/src/formheader/formheaderview.d.ts +59 -59
  89. package/src/formheader/formheaderview.js +69 -69
  90. package/src/highlightedtext/highlightedtextview.d.ts +38 -38
  91. package/src/highlightedtext/highlightedtextview.js +102 -102
  92. package/src/icon/iconview.d.ts +85 -85
  93. package/src/icon/iconview.js +114 -114
  94. package/src/iframe/iframeview.d.ts +50 -50
  95. package/src/iframe/iframeview.js +63 -63
  96. package/src/index.d.ts +74 -73
  97. package/src/index.js +71 -70
  98. package/src/input/inputbase.d.ts +107 -107
  99. package/src/input/inputbase.js +110 -110
  100. package/src/input/inputview.d.ts +36 -36
  101. package/src/input/inputview.js +24 -24
  102. package/src/inputnumber/inputnumberview.d.ts +49 -49
  103. package/src/inputnumber/inputnumberview.js +40 -40
  104. package/src/inputtext/inputtextview.d.ts +18 -18
  105. package/src/inputtext/inputtextview.js +27 -27
  106. package/src/label/labelview.d.ts +36 -36
  107. package/src/label/labelview.js +41 -41
  108. package/src/labeledfield/labeledfieldview.d.ts +187 -187
  109. package/src/labeledfield/labeledfieldview.js +157 -157
  110. package/src/labeledfield/utils.d.ts +123 -123
  111. package/src/labeledfield/utils.js +176 -176
  112. package/src/labeledinput/labeledinputview.d.ts +125 -125
  113. package/src/labeledinput/labeledinputview.js +125 -125
  114. package/src/list/listitemgroupview.d.ts +59 -51
  115. package/src/list/listitemgroupview.js +67 -75
  116. package/src/list/listitemview.d.ts +36 -36
  117. package/src/list/listitemview.js +42 -42
  118. package/src/list/listseparatorview.d.ts +18 -18
  119. package/src/list/listseparatorview.js +28 -28
  120. package/src/list/listview.d.ts +123 -122
  121. package/src/list/listview.js +188 -187
  122. package/src/model.d.ts +22 -22
  123. package/src/model.js +31 -31
  124. package/src/notification/notification.d.ts +211 -211
  125. package/src/notification/notification.js +187 -187
  126. package/src/panel/balloon/balloonpanelview.d.ts +685 -685
  127. package/src/panel/balloon/balloonpanelview.js +1010 -1010
  128. package/src/panel/balloon/contextualballoon.d.ts +299 -299
  129. package/src/panel/balloon/contextualballoon.js +572 -572
  130. package/src/panel/sticky/stickypanelview.d.ts +156 -156
  131. package/src/panel/sticky/stickypanelview.js +234 -234
  132. package/src/search/filteredview.d.ts +31 -31
  133. package/src/search/filteredview.js +5 -5
  134. package/src/search/searchinfoview.d.ts +45 -45
  135. package/src/search/searchinfoview.js +59 -59
  136. package/src/search/searchresultsview.d.ts +54 -54
  137. package/src/search/searchresultsview.js +65 -65
  138. package/src/search/text/searchtextqueryview.d.ts +76 -76
  139. package/src/search/text/searchtextqueryview.js +75 -75
  140. package/src/search/text/searchtextview.d.ts +219 -219
  141. package/src/search/text/searchtextview.js +201 -201
  142. package/src/spinner/spinnerview.d.ts +25 -25
  143. package/src/spinner/spinnerview.js +38 -38
  144. package/src/template.d.ts +942 -942
  145. package/src/template.js +1294 -1294
  146. package/src/textarea/textareaview.d.ts +88 -88
  147. package/src/textarea/textareaview.js +142 -140
  148. package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
  149. package/src/toolbar/balloon/balloontoolbar.js +300 -300
  150. package/src/toolbar/block/blockbuttonview.d.ts +35 -35
  151. package/src/toolbar/block/blockbuttonview.js +41 -41
  152. package/src/toolbar/block/blocktoolbar.d.ts +161 -161
  153. package/src/toolbar/block/blocktoolbar.js +395 -395
  154. package/src/toolbar/normalizetoolbarconfig.d.ts +40 -40
  155. package/src/toolbar/normalizetoolbarconfig.js +52 -51
  156. package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
  157. package/src/toolbar/toolbarlinebreakview.js +28 -28
  158. package/src/toolbar/toolbarseparatorview.d.ts +18 -18
  159. package/src/toolbar/toolbarseparatorview.js +28 -28
  160. package/src/toolbar/toolbarview.d.ts +266 -266
  161. package/src/toolbar/toolbarview.js +719 -719
  162. package/src/tooltipmanager.d.ts +180 -180
  163. package/src/tooltipmanager.js +353 -353
  164. package/src/view.d.ts +422 -422
  165. package/src/view.js +396 -396
  166. package/src/viewcollection.d.ts +139 -139
  167. package/src/viewcollection.js +206 -206
  168. package/theme/components/arialiveannouncer/arialiveannouncer.css +10 -0
  169. package/theme/components/button/button.css +9 -1
  170. package/theme/components/collapsible/collapsible.css +10 -0
  171. 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
+ }