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