Version Description
- Improvement: Fall back to previous version when the theme does not support the new script mainly because of using float instead of flex
- Improvement: Stop Elements work also when they are in a different column or sidebar than the fixed element
- Improvement: Recalculate Fixed Widget height on scroll
Download this release
Release Info
Developer | webzunft |
Plugin | Q2W3 Fixed Widget |
Version | 6.0.2 |
Comparing to | |
See all releases |
Code changes from version 6.0.1 to 6.0.2
- js/frontend.js +170 -103
- js/frontend.min.js +1 -1
- q2w3-fixed-widget.php +15 -5
- readme.txt +7 -1
js/frontend.js
CHANGED
@@ -56,11 +56,11 @@ var Widget = /** @class */ (function () {
|
|
56 |
};
|
57 |
}
|
58 |
Widget.prototype.render = function () { };
|
59 |
-
Widget.prototype.mount = function (user_margins
|
|
|
60 |
if (!this.el || !this.el.parentElement) {
|
61 |
return;
|
62 |
}
|
63 |
-
this.el.style.zIndex = "" + layer;
|
64 |
this.top_offset = this.get_total_top_offset(user_margins);
|
65 |
this.root_offset = scrollY + this.el.getBoundingClientRect().y;
|
66 |
};
|
@@ -69,14 +69,14 @@ var Widget = /** @class */ (function () {
|
|
69 |
};
|
70 |
Widget.prototype.toString = function () {
|
71 |
var _a;
|
72 |
-
return ""
|
73 |
};
|
74 |
Widget.prototype.get_total_top_offset = function (margins) {
|
75 |
return get_sibilings_offset(this.prevSibling, this.need_to_calc_el_offset, this.prevSibling(this.el), margins.margin_top);
|
76 |
};
|
77 |
Widget.queryAllWidgetsContainers = function (className) {
|
78 |
return []
|
79 |
-
.concat(Array.from(document.querySelectorAll("."
|
80 |
.map(function (el) {
|
81 |
el.classList.remove(className);
|
82 |
el.removeAttribute('data-fixed_widget');
|
@@ -88,7 +88,14 @@ var Widget = /** @class */ (function () {
|
|
88 |
};
|
89 |
Widget.from = function (root, className) {
|
90 |
var _this = this;
|
91 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
92 |
.filter(function (el) { return el !== null; })
|
93 |
.map(function (e) { return new _this(e); });
|
94 |
};
|
@@ -122,6 +129,62 @@ var get_sibilings_offset = function (next, need_to_calc_el_offset, el, offset) {
|
|
122 |
return get_sibilings_offset(next, need_to_calc_el_offset, next(el), offset + el.offsetHeight + parseInt(marginTop || '0') + parseInt(marginBottom || '0'));
|
123 |
};
|
124 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
125 |
var PositionWidget = /** @class */ (function (_super) {
|
126 |
__extends(PositionWidget, _super);
|
127 |
function PositionWidget() {
|
@@ -141,8 +204,8 @@ var PositionWidget = /** @class */ (function (_super) {
|
|
141 |
};
|
142 |
return _this;
|
143 |
}
|
144 |
-
PositionWidget.prototype.mount = function (user_margins
|
145 |
-
_super.prototype.mount.call(this, user_margins
|
146 |
if (!this.el || !this.el.parentElement) {
|
147 |
return;
|
148 |
}
|
@@ -151,9 +214,11 @@ var PositionWidget = /** @class */ (function (_super) {
|
|
151 |
this.bottom_margin = parseInt(marginBottom);
|
152 |
this.top_margin = parseInt(marginTop);
|
153 |
this.bottom_offset = this.get_total_bottom_offset(user_margins);
|
154 |
-
this.max_top_offset = max_top_offset;
|
155 |
this.borderBox = this.el.clientHeight + this.top_margin + this.bottom_margin;
|
156 |
};
|
|
|
|
|
|
|
157 |
PositionWidget.prototype.render = function () {
|
158 |
if (!this.el || !this.el.parentElement) {
|
159 |
return;
|
@@ -178,6 +243,8 @@ var FixedWidget = /** @class */ (function (_super) {
|
|
178 |
var _this = _super.call(this, el) || this;
|
179 |
_this.is_pinned = false;
|
180 |
_this.relative_top = 0;
|
|
|
|
|
181 |
_this.init_style = { position: 'static', marginTop: '', marginBottom: '', width: '', height: '' };
|
182 |
_this.need_to_calc_el_offset = function (el) {
|
183 |
return el.classList.contains(FixedWidgetClassName);
|
@@ -188,23 +255,26 @@ var FixedWidget = /** @class */ (function (_super) {
|
|
188 |
_this.el.classList.add(FixedWidgetClassName);
|
189 |
return _this;
|
190 |
}
|
191 |
-
FixedWidget.prototype.mount = function (margins
|
192 |
-
_super.prototype.mount.call(this, margins
|
193 |
if (!this.el) {
|
194 |
return;
|
195 |
}
|
196 |
-
|
197 |
-
|
198 |
-
|
199 |
-
|
200 |
-
|
201 |
-
this.max_top_offset
|
202 |
-
- this.top_offset
|
203 |
-
- this.borderBox
|
204 |
-
- this.bottom_offset;
|
205 |
this.store_style(getComputedStyle(this.el));
|
206 |
this.clone();
|
207 |
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
208 |
FixedWidget.prototype.clone = function () {
|
209 |
var _this = this;
|
210 |
if (!this.el || !this.el.parentElement) {
|
@@ -241,6 +311,12 @@ var FixedWidget = /** @class */ (function (_super) {
|
|
241 |
if (!this.el) {
|
242 |
return;
|
243 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
244 |
var need_to_fix = scrollTop > this.root_offset - this.top_offset;
|
245 |
var limited_by_stop_element = this.max_top_offset !== 0 && scrollTop > this.relative_top;
|
246 |
var top = limited_by_stop_element ? this.relative_top - scrollTop + this.top_offset : this.top_offset;
|
@@ -252,7 +328,7 @@ var FixedWidget = /** @class */ (function (_super) {
|
|
252 |
if (!this.el) {
|
253 |
return;
|
254 |
}
|
255 |
-
this.el.style.top = top
|
256 |
if (this.is_pinned) {
|
257 |
return;
|
258 |
}
|
@@ -290,21 +366,27 @@ var StickyWidget = /** @class */ (function (_super) {
|
|
290 |
_this.el.classList.add(FixedWidgetClassName);
|
291 |
return _this;
|
292 |
}
|
293 |
-
StickyWidget.prototype.mount = function (margins
|
294 |
-
_super.prototype.mount.call(this, margins
|
295 |
if (!this.el || !this.el.parentElement) {
|
296 |
return;
|
297 |
}
|
298 |
-
/** StopWidget can limit top offset if it is placed only after widget*/
|
299 |
-
if (max_top_offset < this.el.offsetTop) {
|
300 |
-
this.max_top_offset = 0;
|
301 |
-
}
|
302 |
this.margins = this.el.parentElement.clientHeight - this.borderBox;
|
303 |
this.el.style.position = 'sticky';
|
304 |
this.el.style.position = '-webkit-sticky';
|
305 |
this.el.style.transition = 'transform 0s';
|
306 |
this.el.style.boxSizing = 'border-box';
|
307 |
-
this.el.style.top = this.top_offset
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
308 |
};
|
309 |
StickyWidget.prototype.onScroll = function () {
|
310 |
if (!this.el || !this.el.parentElement) {
|
@@ -317,7 +399,7 @@ var StickyWidget = /** @class */ (function (_super) {
|
|
317 |
this.el.style.transform = "translateY(0px)";
|
318 |
return;
|
319 |
}
|
320 |
-
this.el.style.transform = "translateY("
|
321 |
};
|
322 |
StickyWidget.new = function (selector) {
|
323 |
return new StickyWidget(document.querySelector(selector));
|
@@ -353,73 +435,18 @@ var StopWidget = /** @class */ (function (_super) {
|
|
353 |
return StopWidget;
|
354 |
}(Widget));
|
355 |
|
356 |
-
/**
|
357 |
-
*
|
358 |
-
* @param arr1
|
359 |
-
* @param arr2
|
360 |
-
* @returns [uniq elements from arr2, dublicates]
|
361 |
-
*/
|
362 |
-
var findIntersections = function (arr1, arr2) {
|
363 |
-
return [
|
364 |
-
arr2.filter(function (e) { return !arr1.includes(e); }),
|
365 |
-
arr1.filter(function (e) { return arr2.includes(e); }),
|
366 |
-
];
|
367 |
-
};
|
368 |
-
var splitSelectors = function (s) {
|
369 |
-
if (s === void 0) { s = ''; }
|
370 |
-
return s.replace(/[\r\n]|[\r]/gi, '\n')
|
371 |
-
.split('\n')
|
372 |
-
.map(function (s) { return s.trim(); })
|
373 |
-
.filter(function (s) { return s !== ''; });
|
374 |
-
};
|
375 |
-
/**
|
376 |
-
* For compatabilty with Fixed Widget 5.3.0 (had a ids without #)
|
377 |
-
* Clone and add selectors with #-prefix
|
378 |
-
* @see https://github.com/webgilde/fixed-widget/issues/75
|
379 |
-
*/
|
380 |
-
var compatabilty_FW_v5 = function (selectors) {
|
381 |
-
if (selectors === void 0) { selectors = []; }
|
382 |
-
/** If `selectors` includes extended selectors, not id names only, then it's v 6.0.0 */
|
383 |
-
if (selectors.some(function (s) { return !/^[a-z]/i.test(s); })) {
|
384 |
-
return selectors;
|
385 |
-
}
|
386 |
-
return selectors.concat(selectors.map(function (s) { return "#" + s; }));
|
387 |
-
};
|
388 |
-
|
389 |
-
var initSidebars = function (options) {
|
390 |
-
var fixedWidgetsContainers = Array.from(new Set(// use Set to remove duplicates
|
391 |
-
Widget
|
392 |
-
.queryAllWidgetsContainers(FixedWidgetClassName) // widgets by classNames from editor's plugin
|
393 |
-
.concat(queryElements(compatabilty_FW_v5(options.widgets))) // widgets from option's custom selectors
|
394 |
-
));
|
395 |
-
var stopWidgetsSelectors = compatabilty_FW_v5(splitSelectors(options.stop_elements_selectors));
|
396 |
-
var stopWidgetsContainers = Array.from(new Set(// use Set to remove duplicates
|
397 |
-
Widget
|
398 |
-
.queryAllWidgetsContainers(StopWidgetClassName) // widgets by classNames from editor's plugin;
|
399 |
-
.concat(queryElements(stopWidgetsSelectors)) // widgets from option's custom selectors
|
400 |
-
));
|
401 |
-
var _a = findIntersections(fixedWidgetsContainers, stopWidgetsContainers), stopWidgetsUniqContainers = _a[0], duplicates = _a[1];
|
402 |
-
duplicates.forEach(function (w) {
|
403 |
-
console.error("The Widget is detected as fixed block and stop block!\n" + w.innerHTML);
|
404 |
-
});
|
405 |
-
fixedWidgetsContainers.forEach(function (c) { c.classList.add(FixedWidgetClassName); });
|
406 |
-
stopWidgetsUniqContainers.forEach(function (c) { c.classList.add(StopWidgetClassName); });
|
407 |
-
var sidebars = Sidebar.create(fixedWidgetsContainers.concat(stopWidgetsUniqContainers), options);
|
408 |
-
sidebars.forEach(function (sidebar) { sidebar.mount(); });
|
409 |
-
document.addEventListener('scroll', function () {
|
410 |
-
sidebars.forEach(function (sidebar) { return sidebar.render(); });
|
411 |
-
});
|
412 |
-
};
|
413 |
var Sidebar = /** @class */ (function () {
|
414 |
function Sidebar(el, margins, use_sticky_position) {
|
|
|
415 |
this.el = el;
|
416 |
this.margins = margins;
|
417 |
this.use_sticky_position = use_sticky_position;
|
418 |
this.widgets = [];
|
419 |
this.stop_widgets = [];
|
420 |
-
this.
|
|
|
|
|
421 |
this.stop_widgets = StopWidget.from(this.el);
|
422 |
-
var WidgetContructor = typeof use_sticky_position === 'undefined' || use_sticky_position ? StickyWidget : FixedWidget;
|
423 |
this.widgets = WidgetContructor.from(this.el);
|
424 |
if (!use_sticky_position) {
|
425 |
return;
|
@@ -432,36 +459,76 @@ var Sidebar = /** @class */ (function () {
|
|
432 |
}
|
433 |
Sidebar.prototype.mount = function () {
|
434 |
var _this = this;
|
435 |
-
this.stop_widgets.forEach(function (widget
|
436 |
-
this.
|
|
|
|
|
|
|
|
|
437 |
function (w) { return w.top_offset; } :
|
438 |
function (w) { return w.root_offset; })) :
|
439 |
0;
|
440 |
-
this.widgets.forEach(function (widget, i) {
|
441 |
};
|
442 |
Sidebar.prototype.render = function () {
|
443 |
this.widgets.forEach(function (widget) { return widget.render(); });
|
444 |
};
|
445 |
-
Sidebar.
|
446 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
447 |
.filter(function (sidebar_el) { return sidebar_el !== null; })
|
448 |
-
.map(function (sidebar_el) {
|
449 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
450 |
});
|
|
|
|
|
|
|
|
|
|
|
451 |
};
|
452 |
-
return
|
453 |
}());
|
454 |
-
var queryElements = function (selectors) {
|
455 |
-
if (selectors === void 0) { selectors = []; }
|
456 |
-
return Array.from((selectors)
|
457 |
-
.map(function (selector) { return Array.from(document.querySelectorAll(selector)); }))
|
458 |
-
.reduce(function (all, elements) { return all.concat(elements); }, [])
|
459 |
-
.filter(function (e) { return e instanceof HTMLElement; });
|
460 |
-
};
|
461 |
|
462 |
var initPlugin = function (options) {
|
463 |
if (options === void 0) { options = []; }
|
464 |
-
|
465 |
};
|
466 |
|
467 |
window.addEventListener('load', onDocumentLoaded);
|
56 |
};
|
57 |
}
|
58 |
Widget.prototype.render = function () { };
|
59 |
+
Widget.prototype.mount = function (user_margins) {
|
60 |
+
if (user_margins === void 0) { user_margins = {}; }
|
61 |
if (!this.el || !this.el.parentElement) {
|
62 |
return;
|
63 |
}
|
|
|
64 |
this.top_offset = this.get_total_top_offset(user_margins);
|
65 |
this.root_offset = scrollY + this.el.getBoundingClientRect().y;
|
66 |
};
|
69 |
};
|
70 |
Widget.prototype.toString = function () {
|
71 |
var _a;
|
72 |
+
return "".concat((_a = this.el) === null || _a === void 0 ? void 0 : _a.innerHTML);
|
73 |
};
|
74 |
Widget.prototype.get_total_top_offset = function (margins) {
|
75 |
return get_sibilings_offset(this.prevSibling, this.need_to_calc_el_offset, this.prevSibling(this.el), margins.margin_top);
|
76 |
};
|
77 |
Widget.queryAllWidgetsContainers = function (className) {
|
78 |
return []
|
79 |
+
.concat(Array.from(document.querySelectorAll(".".concat(className))), Array.from(document.querySelectorAll("[data-fixed_widget=".concat(className))))
|
80 |
.map(function (el) {
|
81 |
el.classList.remove(className);
|
82 |
el.removeAttribute('data-fixed_widget');
|
88 |
};
|
89 |
Widget.from = function (root, className) {
|
90 |
var _this = this;
|
91 |
+
var elements = [];
|
92 |
+
try {
|
93 |
+
elements = Array.from(root.querySelectorAll(":scope > .".concat(className)));
|
94 |
+
}
|
95 |
+
catch (_e) {
|
96 |
+
elements = Array.from(root.children).filter(function (e) { return e.classList.contains(className); });
|
97 |
+
}
|
98 |
+
return elements
|
99 |
.filter(function (el) { return el !== null; })
|
100 |
.map(function (e) { return new _this(e); });
|
101 |
};
|
129 |
return get_sibilings_offset(next, need_to_calc_el_offset, next(el), offset + el.offsetHeight + parseInt(marginTop || '0') + parseInt(marginBottom || '0'));
|
130 |
};
|
131 |
|
132 |
+
/**
|
133 |
+
*
|
134 |
+
* @param arr1
|
135 |
+
* @param arr2
|
136 |
+
* @returns [uniq elements from arr2, dublicates]
|
137 |
+
*/
|
138 |
+
var findIntersections = function (arr1, arr2) {
|
139 |
+
return [
|
140 |
+
arr2.filter(function (e) { return !arr1.includes(e); }),
|
141 |
+
arr1.filter(function (e) { return arr2.includes(e); }),
|
142 |
+
];
|
143 |
+
};
|
144 |
+
var splitSelectors = function (s) {
|
145 |
+
if (s === void 0) { s = ''; }
|
146 |
+
return s.replace(/[\r\n]|[\r]/gi, '\n')
|
147 |
+
.split('\n')
|
148 |
+
.map(function (s) { return s.trim(); })
|
149 |
+
.filter(function (s) { return s !== ''; });
|
150 |
+
};
|
151 |
+
/**
|
152 |
+
* For compatabilty with Fixed Widget 5.3.0 (had a ids without #)
|
153 |
+
* Clone and add selectors with #-prefix
|
154 |
+
* @see https://github.com/webgilde/fixed-widget/issues/75
|
155 |
+
*/
|
156 |
+
var compatabilty_FW_v5 = function (selectors) {
|
157 |
+
if (selectors === void 0) { selectors = []; }
|
158 |
+
/** If `selectors` includes extended selectors, not id names only, then it's v 6.0.0 */
|
159 |
+
if (selectors.some(function (s) { return !/^[a-z]/i.test(s); })) {
|
160 |
+
return selectors;
|
161 |
+
}
|
162 |
+
return selectors.concat(selectors.map(function (s) { return "#".concat(s); }));
|
163 |
+
};
|
164 |
+
|
165 |
+
var queryElements = function (selectors) {
|
166 |
+
if (selectors === void 0) { selectors = []; }
|
167 |
+
return Array.from((selectors)
|
168 |
+
.map(function (selector) { return Array.from(document.querySelectorAll(selector)); }))
|
169 |
+
.reduce(function (all, elements) { return all.concat(elements); }, [])
|
170 |
+
.filter(function (e) { return e instanceof HTMLElement; });
|
171 |
+
};
|
172 |
+
/**
|
173 |
+
* Search property from el to document.body
|
174 |
+
* @param el
|
175 |
+
* @param predicate Returns true, if desired property exists
|
176 |
+
* @returns {HTMLElement|null}
|
177 |
+
*/
|
178 |
+
function findWithProperty(el, predicate) {
|
179 |
+
if (!el || el === document.body) {
|
180 |
+
return null;
|
181 |
+
}
|
182 |
+
if (predicate(getComputedStyle(el))) {
|
183 |
+
return el;
|
184 |
+
}
|
185 |
+
return findWithProperty(el.parentElement, predicate);
|
186 |
+
}
|
187 |
+
|
188 |
var PositionWidget = /** @class */ (function (_super) {
|
189 |
__extends(PositionWidget, _super);
|
190 |
function PositionWidget() {
|
204 |
};
|
205 |
return _this;
|
206 |
}
|
207 |
+
PositionWidget.prototype.mount = function (user_margins) {
|
208 |
+
_super.prototype.mount.call(this, user_margins);
|
209 |
if (!this.el || !this.el.parentElement) {
|
210 |
return;
|
211 |
}
|
214 |
this.bottom_margin = parseInt(marginBottom);
|
215 |
this.top_margin = parseInt(marginTop);
|
216 |
this.bottom_offset = this.get_total_bottom_offset(user_margins);
|
|
|
217 |
this.borderBox = this.el.clientHeight + this.top_margin + this.bottom_margin;
|
218 |
};
|
219 |
+
PositionWidget.prototype.setMaxOffset = function (max_top_offset) {
|
220 |
+
this.max_top_offset = max_top_offset;
|
221 |
+
};
|
222 |
PositionWidget.prototype.render = function () {
|
223 |
if (!this.el || !this.el.parentElement) {
|
224 |
return;
|
243 |
var _this = _super.call(this, el) || this;
|
244 |
_this.is_pinned = false;
|
245 |
_this.relative_top = 0;
|
246 |
+
/** margins + offsets */
|
247 |
+
_this.paddings = 0;
|
248 |
_this.init_style = { position: 'static', marginTop: '', marginBottom: '', width: '', height: '' };
|
249 |
_this.need_to_calc_el_offset = function (el) {
|
250 |
return el.classList.contains(FixedWidgetClassName);
|
255 |
_this.el.classList.add(FixedWidgetClassName);
|
256 |
return _this;
|
257 |
}
|
258 |
+
FixedWidget.prototype.mount = function (margins) {
|
259 |
+
_super.prototype.mount.call(this, margins);
|
260 |
if (!this.el) {
|
261 |
return;
|
262 |
}
|
263 |
+
this.paddings =
|
264 |
+
this.top_offset
|
265 |
+
+ this.top_margin
|
266 |
+
+ this.bottom_margin
|
267 |
+
+ this.bottom_offset;
|
|
|
|
|
|
|
|
|
268 |
this.store_style(getComputedStyle(this.el));
|
269 |
this.clone();
|
270 |
};
|
271 |
+
FixedWidget.prototype.setMaxOffset = function (max_top_offset) {
|
272 |
+
/** StopWidget can limit top offset if it is placed only after widget */
|
273 |
+
if (max_top_offset < this.root_offset) {
|
274 |
+
return;
|
275 |
+
}
|
276 |
+
this.max_top_offset = max_top_offset;
|
277 |
+
};
|
278 |
FixedWidget.prototype.clone = function () {
|
279 |
var _this = this;
|
280 |
if (!this.el || !this.el.parentElement) {
|
311 |
if (!this.el) {
|
312 |
return;
|
313 |
}
|
314 |
+
/**
|
315 |
+
* Recalculate relative block's height on scroll because it could change
|
316 |
+
*/
|
317 |
+
var block_height = Math.max(this.el.clientHeight, this.el.scrollHeight, this.el.getBoundingClientRect().height);
|
318 |
+
this.borderBox = block_height + this.top_margin + this.bottom_margin;
|
319 |
+
this.relative_top = this.max_top_offset - block_height - this.paddings;
|
320 |
var need_to_fix = scrollTop > this.root_offset - this.top_offset;
|
321 |
var limited_by_stop_element = this.max_top_offset !== 0 && scrollTop > this.relative_top;
|
322 |
var top = limited_by_stop_element ? this.relative_top - scrollTop + this.top_offset : this.top_offset;
|
328 |
if (!this.el) {
|
329 |
return;
|
330 |
}
|
331 |
+
this.el.style.top = "".concat(top, "px");
|
332 |
if (this.is_pinned) {
|
333 |
return;
|
334 |
}
|
366 |
_this.el.classList.add(FixedWidgetClassName);
|
367 |
return _this;
|
368 |
}
|
369 |
+
StickyWidget.prototype.mount = function (margins) {
|
370 |
+
_super.prototype.mount.call(this, margins);
|
371 |
if (!this.el || !this.el.parentElement) {
|
372 |
return;
|
373 |
}
|
|
|
|
|
|
|
|
|
374 |
this.margins = this.el.parentElement.clientHeight - this.borderBox;
|
375 |
this.el.style.position = 'sticky';
|
376 |
this.el.style.position = '-webkit-sticky';
|
377 |
this.el.style.transition = 'transform 0s';
|
378 |
this.el.style.boxSizing = 'border-box';
|
379 |
+
this.el.style.top = "".concat(this.top_offset, "px");
|
380 |
+
};
|
381 |
+
StickyWidget.prototype.setMaxOffset = function (max_top_offset) {
|
382 |
+
if (!this.el || !this.el.parentElement) {
|
383 |
+
return;
|
384 |
+
}
|
385 |
+
/** StopWidget can limit top offset if it is placed only after widget*/
|
386 |
+
if (max_top_offset < this.el.offsetTop) {
|
387 |
+
return;
|
388 |
+
}
|
389 |
+
this.max_top_offset = max_top_offset;
|
390 |
};
|
391 |
StickyWidget.prototype.onScroll = function () {
|
392 |
if (!this.el || !this.el.parentElement) {
|
399 |
this.el.style.transform = "translateY(0px)";
|
400 |
return;
|
401 |
}
|
402 |
+
this.el.style.transform = "translateY(".concat(bottom_margin - this.bottom_offset, "px)");
|
403 |
};
|
404 |
StickyWidget.new = function (selector) {
|
405 |
return new StickyWidget(document.querySelector(selector));
|
435 |
return StopWidget;
|
436 |
}(Widget));
|
437 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
438 |
var Sidebar = /** @class */ (function () {
|
439 |
function Sidebar(el, margins, use_sticky_position) {
|
440 |
+
if (use_sticky_position === void 0) { use_sticky_position = true; }
|
441 |
this.el = el;
|
442 |
this.margins = margins;
|
443 |
this.use_sticky_position = use_sticky_position;
|
444 |
this.widgets = [];
|
445 |
this.stop_widgets = [];
|
446 |
+
var isDeprecatedFloatMarkup = !!findWithProperty(this.el, function (style) { return style.float !== 'none'; });
|
447 |
+
isDeprecatedFloatMarkup && console.log('Fixed Widget: fallback to position sticky');
|
448 |
+
var WidgetContructor = isDeprecatedFloatMarkup || !use_sticky_position ? FixedWidget : StickyWidget;
|
449 |
this.stop_widgets = StopWidget.from(this.el);
|
|
|
450 |
this.widgets = WidgetContructor.from(this.el);
|
451 |
if (!use_sticky_position) {
|
452 |
return;
|
459 |
}
|
460 |
Sidebar.prototype.mount = function () {
|
461 |
var _this = this;
|
462 |
+
this.stop_widgets.forEach(function (widget) { widget.mount(); });
|
463 |
+
this.widgets.forEach(function (widget) { widget.mount(_this.margins); });
|
464 |
+
};
|
465 |
+
Sidebar.prototype.setMaxOffset = function (common_stop_widgets) {
|
466 |
+
var stop_widgets = this.stop_widgets.length != 0 ? this.stop_widgets : common_stop_widgets;
|
467 |
+
var max_top_offset = stop_widgets.length !== 0 ? Math.min.apply(Math, stop_widgets.map(this.use_sticky_position ?
|
468 |
function (w) { return w.top_offset; } :
|
469 |
function (w) { return w.root_offset; })) :
|
470 |
0;
|
471 |
+
this.widgets.forEach(function (widget, i) { widget.setMaxOffset(max_top_offset); });
|
472 |
};
|
473 |
Sidebar.prototype.render = function () {
|
474 |
this.widgets.forEach(function (widget) { return widget.render(); });
|
475 |
};
|
476 |
+
Sidebar.prototype.isFloatMarkup = function () {
|
477 |
+
};
|
478 |
+
return Sidebar;
|
479 |
+
}());
|
480 |
+
|
481 |
+
var Sidebars = /** @class */ (function () {
|
482 |
+
function Sidebars(elements, options) {
|
483 |
+
var _this = this;
|
484 |
+
this.data = [];
|
485 |
+
this.render = function () {
|
486 |
+
_this.data.forEach(function (sidebar) { sidebar.render(); });
|
487 |
+
};
|
488 |
+
var use_sticky_position = typeof options.use_sticky_position === 'undefined' || options.use_sticky_position;
|
489 |
+
this.data = Array.from(new Set(elements.map(function (widget) { return widget.parentElement; })))
|
490 |
.filter(function (sidebar_el) { return sidebar_el !== null; })
|
491 |
+
.map(function (sidebar_el) { return new Sidebar(sidebar_el, options, use_sticky_position); });
|
492 |
+
}
|
493 |
+
Sidebars.prototype.mount = function () {
|
494 |
+
this.data.forEach(function (sidebar) { sidebar.mount(); });
|
495 |
+
var common_stop_widgets = this.getCommonStopElements();
|
496 |
+
this.data.forEach(function (sidebar) { sidebar.setMaxOffset(common_stop_widgets); });
|
497 |
+
};
|
498 |
+
Sidebars.prototype.getCommonStopElements = function () {
|
499 |
+
return this.data
|
500 |
+
.filter(function (sidebar) { return sidebar.widgets.length === 0; })
|
501 |
+
.map(function (sidebar) { return sidebar.stop_widgets; })
|
502 |
+
.reduce(function (all, widgets) { return all.concat(widgets); }, []);
|
503 |
+
};
|
504 |
+
Sidebars.new = function (options) {
|
505 |
+
var fixedWidgetsContainers = Array.from(new Set(// use Set to remove duplicates
|
506 |
+
Widget
|
507 |
+
.queryAllWidgetsContainers(FixedWidgetClassName) // widgets by classNames from editor's plugin
|
508 |
+
.concat(queryElements(compatabilty_FW_v5(options.widgets))) // widgets from option's custom selectors
|
509 |
+
));
|
510 |
+
var stopWidgetsSelectors = compatabilty_FW_v5(splitSelectors(options.stop_elements_selectors));
|
511 |
+
var stopWidgetsContainers = Array.from(new Set(// use Set to remove duplicates
|
512 |
+
Widget
|
513 |
+
.queryAllWidgetsContainers(StopWidgetClassName) // widgets by classNames from editor's plugin;
|
514 |
+
.concat(queryElements(stopWidgetsSelectors)) // widgets from option's custom selectors
|
515 |
+
));
|
516 |
+
var _a = findIntersections(fixedWidgetsContainers, stopWidgetsContainers), stopWidgetsUniqContainers = _a[0], duplicates = _a[1];
|
517 |
+
duplicates.forEach(function (w) {
|
518 |
+
console.error("The Widget is detected as fixed block and stop block!\n".concat(w.innerHTML));
|
519 |
});
|
520 |
+
fixedWidgetsContainers.forEach(function (c) { c.classList.add(FixedWidgetClassName); });
|
521 |
+
stopWidgetsUniqContainers.forEach(function (c) { c.classList.add(StopWidgetClassName); });
|
522 |
+
var sidebars = new Sidebars(fixedWidgetsContainers.concat(stopWidgetsUniqContainers), options);
|
523 |
+
sidebars.mount();
|
524 |
+
document.addEventListener('scroll', sidebars.render);
|
525 |
};
|
526 |
+
return Sidebars;
|
527 |
}());
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
528 |
|
529 |
var initPlugin = function (options) {
|
530 |
if (options === void 0) { options = []; }
|
531 |
+
Sidebars.new(options.reduce(function (prev, cur) { return (__assign(__assign(__assign({}, prev), cur), { widgets: prev.widgets.concat(cur.widgets || []) })); }, { widgets: [] }));
|
532 |
};
|
533 |
|
534 |
window.addEventListener('load', onDocumentLoaded);
|
js/frontend.min.js
CHANGED
@@ -12,4 +12,4 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
12 |
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
13 |
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
14 |
PERFORMANCE OF THIS SOFTWARE.
|
15 |
-
***************************************************************************** */var extendStatics=function(d,b){return extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)Object.prototype.hasOwnProperty.call(b,p)&&(d[p]=b[p])},extendStatics(d,b)};function __extends(d,b){if("function"!=typeof b&&null!==b)throw new TypeError("Class extends value "+String(b)+" is not a constructor or null");function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}var __assign=function(){return __assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t},__assign.apply(this,arguments)},StopWidgetClassName="FixedWidget__stop_widget",FixedWidgetClassName="FixedWidget__fixed_widget",Widget=function(){function Widget(el){this.el=el,this.top_offset=0,this.root_offset=0,this.need_to_calc_el_offset=function(_){return!1},this.prevSibling=function(el){return el&&el.previousElementSibling}}return Widget.prototype.render=function(){},Widget.prototype.mount=function(user_margins,layer,_max_top_offset){this.el&&this.el.parentElement&&(this.el.style.zIndex=""+layer,this.top_offset=this.get_total_top_offset(user_margins),this.root_offset=scrollY+this.el.getBoundingClientRect().y)},Widget.prototype.getElement=function(){return this.el},Widget.prototype.toString=function(){var _a;return""+(null===(_a=this.el)||void 0===_a?void 0:_a.innerHTML)},Widget.prototype.get_total_top_offset=function(margins){return get_sibilings_offset(this.prevSibling,this.need_to_calc_el_offset,this.prevSibling(this.el),margins.margin_top)},Widget.queryAllWidgetsContainers=function(className){return[].concat(Array.from(document.querySelectorAll("."+className)),Array.from(document.querySelectorAll("[data-fixed_widget="+className))).map((function(el){el.classList.remove(className),el.removeAttribute("data-fixed_widget");var container=getWidgetContainer(el);return container.classList.remove(FixedWidgetClassName),container.classList.remove(StopWidgetClassName),container}))},Widget.from=function(root,className){var _this=this;return Array.from(root.querySelectorAll("."+className)).filter((function(el){return null!==el})).map((function(e){return new _this(e)}))},Widget}(),getWidgetContainer=function(el){return el.parentElement&&(1===el.parentElement.childElementCount||el.parentElement.classList.toString().includes("wp-block-group")||el.parentElement.classList.toString().includes("wp-block-column")||el.parentElement.classList.contains("widget"))?getWidgetContainer(el.parentElement):el},get_sibilings_offset=function(next,need_to_calc_el_offset,el,offset){if(void 0===offset&&(offset=0),!el)return offset;if(!need_to_calc_el_offset(el))return get_sibilings_offset(next,need_to_calc_el_offset,next(el),offset);var _a=getComputedStyle(el),marginTop=_a.marginTop,marginBottom=_a.marginBottom;return get_sibilings_offset(next,need_to_calc_el_offset,next(el),offset+el.offsetHeight+parseInt(marginTop||"0")+parseInt(marginBottom||"0"))},PositionWidget=function(_super){function PositionWidget(){var _this=null!==_super&&_super.apply(this,arguments)||this;return _this.bottom_offset=0,_this.top_margin=0,_this.borderBox=0,_this.max_top_offset=0,_this.bottom_margin=0,_this.user_margins={},_this.prevSibling=function(el){return el&&!el.classList.contains(StopWidgetClassName)&&el.previousElementSibling||null},_this}return __extends(PositionWidget,_super),PositionWidget.prototype.mount=function(user_margins,layer,max_top_offset){if(_super.prototype.mount.call(this,user_margins,layer),this.el&&this.el.parentElement){this.user_margins=user_margins;var _a=getComputedStyle(this.el),marginTop=_a.marginTop,marginBottom=_a.marginBottom;this.bottom_margin=parseInt(marginBottom),this.top_margin=parseInt(marginTop),this.bottom_offset=this.get_total_bottom_offset(user_margins),this.max_top_offset=max_top_offset,this.borderBox=this.el.clientHeight+this.top_margin+this.bottom_margin}},PositionWidget.prototype.render=function(){if(this.el&&this.el.parentElement){var scrollTop=scrollY;this.onScroll(scrollTop)}},PositionWidget.from=function(root){return _super.from.call(this,root,FixedWidgetClassName)},PositionWidget.prototype.onScroll=function(_scrollTop){},PositionWidget.prototype.get_total_bottom_offset=function(margins){var next=function(el){return el&&!el.classList.contains(StopWidgetClassName)?el.nextElementSibling:null};return get_sibilings_offset(next,this.need_to_calc_el_offset,next(this.el),margins.margin_bottom)},PositionWidget}(Widget),FixedWidget=function(_super){function FixedWidget(el){var _this=_super.call(this,el)||this;return _this.is_pinned=!1,_this.relative_top=0,_this.init_style={position:"static",marginTop:"",marginBottom:"",width:"",height:""},_this.need_to_calc_el_offset=function(el){return el.classList.contains(FixedWidgetClassName)},_this.el&&_this.el.parentElement?(_this.el.classList.add(FixedWidgetClassName),_this):_this}return __extends(FixedWidget,_super),FixedWidget.prototype.mount=function(margins,layer,max_top_offset){_super.prototype.mount.call(this,margins,layer,max_top_offset),this.el&&(max_top_offset<this.root_offset&&(this.max_top_offset=0),this.relative_top=this.max_top_offset-this.top_offset-this.borderBox-this.bottom_offset,this.store_style(getComputedStyle(this.el)),this.clone())},FixedWidget.prototype.clone=function(){var _this=this;if(this.el&&this.el.parentElement){for(var prop in this.clone_el=this.el.cloneNode(!1),this.clone_el.getAttributeNames().forEach((function(attr){_this.clone_el.removeAttribute(attr)})),this.init_style)this.clone_el.style[prop]=this.init_style[prop];this.clone_el.style.display="none",this.el.parentElement.insertBefore(this.clone_el,this.el)}},FixedWidget.prototype.store_style=function(style){this.init_style.position=style.position,this.init_style.marginTop=style.marginTop,this.init_style.marginBottom=style.marginBottom,this.init_style.width=style.width,this.init_style.height=style.height},FixedWidget.prototype.restore_style=function(style){this.is_pinned&&(this.is_pinned=!1,style.position=this.init_style.position,this.clone_el&&(this.clone_el.style.display="none"))},FixedWidget.prototype.onScroll=function(scrollTop){if(this.el){var need_to_fix=scrollTop>this.root_offset-this.top_offset,top=0!==this.max_top_offset&&scrollTop>this.relative_top?this.relative_top-scrollTop+this.top_offset:this.top_offset;need_to_fix?this.fix(top):this.restore_style(this.el.style)}},FixedWidget.prototype.fix=function(top){this.el&&(this.el.style.top=top+"px",this.is_pinned||(this.is_pinned=!0,this.el.style.position="fixed",this.el.style.transition="transform 0.5s",this.el.style.width=this.init_style.width,this.el.style.height=this.init_style.height,this.clone_el&&(this.clone_el.style.display="block")))},FixedWidget.new=function(selector){return new FixedWidget(document.querySelector(selector))},FixedWidget.is=function(selector){var el=document.querySelector(selector);return!!el&&el.classList.contains(FixedWidgetClassName)},FixedWidget}(PositionWidget),StickyWidget=function(_super){function StickyWidget(el){var _this=_super.call(this,el)||this;return _this.margins=0,_this.need_to_calc_el_offset=function(el){return el.classList.contains(FixedWidgetClassName)},_this.el&&_this.el.parentElement?(_this.el.classList.add(FixedWidgetClassName),_this):_this}return __extends(StickyWidget,_super),StickyWidget.prototype.mount=function(margins,layer,max_top_offset){_super.prototype.mount.call(this,margins,layer,max_top_offset),this.el&&this.el.parentElement&&(max_top_offset<this.el.offsetTop&&(this.max_top_offset=0),this.margins=this.el.parentElement.clientHeight-this.borderBox,this.el.style.position="sticky",this.el.style.position="-webkit-sticky",this.el.style.transition="transform 0s",this.el.style.boxSizing="border-box",this.el.style.top=this.top_offset+"px")},StickyWidget.prototype.onScroll=function(){if(this.el&&this.el.parentElement){var bottom_margin=this.max_top_offset?Math.min(this.max_top_offset-this.el.offsetTop-this.borderBox,this.margins-this.el.offsetTop):this.margins-this.el.offsetTop;bottom_margin>=this.bottom_offset?this.el.style.transform="translateY(0px)":this.el.style.transform="translateY("+(bottom_margin-this.bottom_offset)+"px)"}},StickyWidget.new=function(selector){return new StickyWidget(document.querySelector(selector))},StickyWidget.is=function(selector){var el=document.querySelector(selector);return!!el&&el.classList.contains(FixedWidgetClassName)},StickyWidget}(PositionWidget),StopWidget=function(_super){function StopWidget(el){var _this=_super.call(this,el)||this;return _this.need_to_calc_el_offset=function(){return!0},_this.el&&_this.el.parentElement?(_this.el.classList.add(StopWidgetClassName),_this):_this}return __extends(StopWidget,_super),StopWidget.new=function(selector){return new StopWidget(document.querySelector(selector))},StopWidget.is=function(selector){var el=document.querySelector(selector);return!!el&&el.classList.contains(StopWidgetClassName)},StopWidget.from=function(root){return _super.from.call(this,root,StopWidgetClassName)},StopWidget}(Widget),compatabilty_FW_v5=function(selectors){return void 0===selectors&&(selectors=[]),selectors.some((function(s){return!/^[a-z]/i.test(s)}))?selectors:selectors.concat(selectors.map((function(s){return"#"+s})))},Sidebar=function(){function Sidebar(el,margins,use_sticky_position){this.el=el,this.margins=margins,this.use_sticky_position=use_sticky_position,this.widgets=[],this.stop_widgets=[],this.min_top_offset=0,this.stop_widgets=StopWidget.from(this.el);var WidgetContructor=void 0===use_sticky_position||use_sticky_position?StickyWidget:FixedWidget;this.widgets=WidgetContructor.from(this.el),use_sticky_position&&(this.el.style.position="relative",0===this.stop_widgets.length&&(this.el.style.minHeight="100%"))}return Sidebar.prototype.mount=function(){var _this=this;this.stop_widgets.forEach((function(widget,i){return widget.mount({},0,0)})),this.min_top_offset=0!==this.stop_widgets.length?Math.min.apply(Math,this.stop_widgets.map(this.use_sticky_position?function(w){return w.top_offset}:function(w){return w.root_offset})):0,this.widgets.forEach((function(widget,i){return widget.mount(_this.margins,i,_this.min_top_offset)}))},Sidebar.prototype.render=function(){this.widgets.forEach((function(widget){return widget.render()}))},Sidebar.create=function(elements,options){return Array.from(new Set(elements.map((function(widget){return widget.parentElement})))).filter((function(sidebar_el){return null!==sidebar_el})).map((function(sidebar_el){return new Sidebar(sidebar_el,options,void 0===options.use_sticky_position||options.use_sticky_position)}))},Sidebar}(),queryElements=function(selectors){return void 0===selectors&&(selectors=[]),Array.from(selectors.map((function(selector){return Array.from(document.querySelectorAll(selector))}))).reduce((function(all,elements){return all.concat(elements)}),[]).filter((function(e){return e instanceof HTMLElement}))},initPlugin=function(options){void 0===options&&(options=[]),function(options){var s,arr1,arr2,fixedWidgetsContainers=Array.from(new Set(Widget.queryAllWidgetsContainers(FixedWidgetClassName).concat(queryElements(compatabilty_FW_v5(options.widgets))))),stopWidgetsSelectors=compatabilty_FW_v5((void 0===(s=options.stop_elements_selectors)&&(s=""),s.replace(/[\r\n]|[\r]/gi,"\n").split("\n").map((function(s){return s.trim()})).filter((function(s){return""!==s})))),stopWidgetsContainers=Array.from(new Set(Widget.queryAllWidgetsContainers(StopWidgetClassName).concat(queryElements(stopWidgetsSelectors)))),_a=(arr1=fixedWidgetsContainers,[(arr2=stopWidgetsContainers).filter((function(e){return!arr1.includes(e)})),arr1.filter((function(e){return arr2.includes(e)}))]),stopWidgetsUniqContainers=_a[0];_a[1].forEach((function(w){console.error("The Widget is detected as fixed block and stop block!\n"+w.innerHTML)})),fixedWidgetsContainers.forEach((function(c){c.classList.add(FixedWidgetClassName)})),stopWidgetsUniqContainers.forEach((function(c){c.classList.add(StopWidgetClassName)}));var sidebars=Sidebar.create(fixedWidgetsContainers.concat(stopWidgetsUniqContainers),options);sidebars.forEach((function(sidebar){sidebar.mount()})),document.addEventListener("scroll",(function(){sidebars.forEach((function(sidebar){return sidebar.render()}))}))}(options.reduce((function(prev,cur){return __assign(__assign(__assign({},prev),cur),{widgets:prev.widgets.concat(cur.widgets||[])})}),{widgets:[]}))};function onDocumentLoaded(){var admin_panel=document.querySelector("#wpadminbar"),options=(window.q2w3_sidebar_options||[{}]).map((function(option){return option.margin_top=(option.margin_top||0)+((null==admin_panel?void 0:admin_panel.clientHeight)||0),option}));options.some((function(option){return window.innerWidth<option.screen_max_width||window.innerHeight<option.screen_max_height}))||initPlugin(options)}window.addEventListener("load",onDocumentLoaded),"complete"===document.readyState&&onDocumentLoaded();
|
12 |
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
13 |
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
14 |
PERFORMANCE OF THIS SOFTWARE.
|
15 |
+
***************************************************************************** */var extendStatics=function(d,b){return extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)Object.prototype.hasOwnProperty.call(b,p)&&(d[p]=b[p])},extendStatics(d,b)};function __extends(d,b){if("function"!=typeof b&&null!==b)throw new TypeError("Class extends value "+String(b)+" is not a constructor or null");function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}var __assign=function(){return __assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t},__assign.apply(this,arguments)},StopWidgetClassName="FixedWidget__stop_widget",FixedWidgetClassName="FixedWidget__fixed_widget",Widget=function(){function Widget(el){this.el=el,this.top_offset=0,this.root_offset=0,this.need_to_calc_el_offset=function(_){return!1},this.prevSibling=function(el){return el&&el.previousElementSibling}}return Widget.prototype.render=function(){},Widget.prototype.mount=function(user_margins){void 0===user_margins&&(user_margins={}),this.el&&this.el.parentElement&&(this.top_offset=this.get_total_top_offset(user_margins),this.root_offset=scrollY+this.el.getBoundingClientRect().y)},Widget.prototype.getElement=function(){return this.el},Widget.prototype.toString=function(){var _a;return"".concat(null===(_a=this.el)||void 0===_a?void 0:_a.innerHTML)},Widget.prototype.get_total_top_offset=function(margins){return get_sibilings_offset(this.prevSibling,this.need_to_calc_el_offset,this.prevSibling(this.el),margins.margin_top)},Widget.queryAllWidgetsContainers=function(className){return[].concat(Array.from(document.querySelectorAll(".".concat(className))),Array.from(document.querySelectorAll("[data-fixed_widget=".concat(className)))).map((function(el){el.classList.remove(className),el.removeAttribute("data-fixed_widget");var container=getWidgetContainer(el);return container.classList.remove(FixedWidgetClassName),container.classList.remove(StopWidgetClassName),container}))},Widget.from=function(root,className){var _this=this,elements=[];try{elements=Array.from(root.querySelectorAll(":scope > .".concat(className)))}catch(_e){elements=Array.from(root.children).filter((function(e){return e.classList.contains(className)}))}return elements.filter((function(el){return null!==el})).map((function(e){return new _this(e)}))},Widget}(),getWidgetContainer=function(el){return el.parentElement&&(1===el.parentElement.childElementCount||el.parentElement.classList.toString().includes("wp-block-group")||el.parentElement.classList.toString().includes("wp-block-column")||el.parentElement.classList.contains("widget"))?getWidgetContainer(el.parentElement):el},get_sibilings_offset=function(next,need_to_calc_el_offset,el,offset){if(void 0===offset&&(offset=0),!el)return offset;if(!need_to_calc_el_offset(el))return get_sibilings_offset(next,need_to_calc_el_offset,next(el),offset);var _a=getComputedStyle(el),marginTop=_a.marginTop,marginBottom=_a.marginBottom;return get_sibilings_offset(next,need_to_calc_el_offset,next(el),offset+el.offsetHeight+parseInt(marginTop||"0")+parseInt(marginBottom||"0"))},compatabilty_FW_v5=function(selectors){return void 0===selectors&&(selectors=[]),selectors.some((function(s){return!/^[a-z]/i.test(s)}))?selectors:selectors.concat(selectors.map((function(s){return"#".concat(s)})))},queryElements=function(selectors){return void 0===selectors&&(selectors=[]),Array.from(selectors.map((function(selector){return Array.from(document.querySelectorAll(selector))}))).reduce((function(all,elements){return all.concat(elements)}),[]).filter((function(e){return e instanceof HTMLElement}))};function findWithProperty(el,predicate){return el&&el!==document.body?predicate(getComputedStyle(el))?el:findWithProperty(el.parentElement,predicate):null}var PositionWidget=function(_super){function PositionWidget(){var _this=null!==_super&&_super.apply(this,arguments)||this;return _this.bottom_offset=0,_this.top_margin=0,_this.borderBox=0,_this.max_top_offset=0,_this.bottom_margin=0,_this.user_margins={},_this.prevSibling=function(el){return el&&!el.classList.contains(StopWidgetClassName)&&el.previousElementSibling||null},_this}return __extends(PositionWidget,_super),PositionWidget.prototype.mount=function(user_margins){if(_super.prototype.mount.call(this,user_margins),this.el&&this.el.parentElement){this.user_margins=user_margins;var _a=getComputedStyle(this.el),marginTop=_a.marginTop,marginBottom=_a.marginBottom;this.bottom_margin=parseInt(marginBottom),this.top_margin=parseInt(marginTop),this.bottom_offset=this.get_total_bottom_offset(user_margins),this.borderBox=this.el.clientHeight+this.top_margin+this.bottom_margin}},PositionWidget.prototype.setMaxOffset=function(max_top_offset){this.max_top_offset=max_top_offset},PositionWidget.prototype.render=function(){if(this.el&&this.el.parentElement){var scrollTop=scrollY;this.onScroll(scrollTop)}},PositionWidget.from=function(root){return _super.from.call(this,root,FixedWidgetClassName)},PositionWidget.prototype.onScroll=function(_scrollTop){},PositionWidget.prototype.get_total_bottom_offset=function(margins){var next=function(el){return el&&!el.classList.contains(StopWidgetClassName)?el.nextElementSibling:null};return get_sibilings_offset(next,this.need_to_calc_el_offset,next(this.el),margins.margin_bottom)},PositionWidget}(Widget),FixedWidget=function(_super){function FixedWidget(el){var _this=_super.call(this,el)||this;return _this.is_pinned=!1,_this.relative_top=0,_this.paddings=0,_this.init_style={position:"static",marginTop:"",marginBottom:"",width:"",height:""},_this.need_to_calc_el_offset=function(el){return el.classList.contains(FixedWidgetClassName)},_this.el&&_this.el.parentElement?(_this.el.classList.add(FixedWidgetClassName),_this):_this}return __extends(FixedWidget,_super),FixedWidget.prototype.mount=function(margins){_super.prototype.mount.call(this,margins),this.el&&(this.paddings=this.top_offset+this.top_margin+this.bottom_margin+this.bottom_offset,this.store_style(getComputedStyle(this.el)),this.clone())},FixedWidget.prototype.setMaxOffset=function(max_top_offset){max_top_offset<this.root_offset||(this.max_top_offset=max_top_offset)},FixedWidget.prototype.clone=function(){var _this=this;if(this.el&&this.el.parentElement){for(var prop in this.clone_el=this.el.cloneNode(!1),this.clone_el.getAttributeNames().forEach((function(attr){_this.clone_el.removeAttribute(attr)})),this.init_style)this.clone_el.style[prop]=this.init_style[prop];this.clone_el.style.display="none",this.el.parentElement.insertBefore(this.clone_el,this.el)}},FixedWidget.prototype.store_style=function(style){this.init_style.position=style.position,this.init_style.marginTop=style.marginTop,this.init_style.marginBottom=style.marginBottom,this.init_style.width=style.width,this.init_style.height=style.height},FixedWidget.prototype.restore_style=function(style){this.is_pinned&&(this.is_pinned=!1,style.position=this.init_style.position,this.clone_el&&(this.clone_el.style.display="none"))},FixedWidget.prototype.onScroll=function(scrollTop){if(this.el){var block_height=Math.max(this.el.clientHeight,this.el.scrollHeight,this.el.getBoundingClientRect().height);this.borderBox=block_height+this.top_margin+this.bottom_margin,this.relative_top=this.max_top_offset-block_height-this.paddings;var need_to_fix=scrollTop>this.root_offset-this.top_offset,top=0!==this.max_top_offset&&scrollTop>this.relative_top?this.relative_top-scrollTop+this.top_offset:this.top_offset;need_to_fix?this.fix(top):this.restore_style(this.el.style)}},FixedWidget.prototype.fix=function(top){this.el&&(this.el.style.top="".concat(top,"px"),this.is_pinned||(this.is_pinned=!0,this.el.style.position="fixed",this.el.style.transition="transform 0.5s",this.el.style.width=this.init_style.width,this.el.style.height=this.init_style.height,this.clone_el&&(this.clone_el.style.display="block")))},FixedWidget.new=function(selector){return new FixedWidget(document.querySelector(selector))},FixedWidget.is=function(selector){var el=document.querySelector(selector);return!!el&&el.classList.contains(FixedWidgetClassName)},FixedWidget}(PositionWidget),StickyWidget=function(_super){function StickyWidget(el){var _this=_super.call(this,el)||this;return _this.margins=0,_this.need_to_calc_el_offset=function(el){return el.classList.contains(FixedWidgetClassName)},_this.el&&_this.el.parentElement?(_this.el.classList.add(FixedWidgetClassName),_this):_this}return __extends(StickyWidget,_super),StickyWidget.prototype.mount=function(margins){_super.prototype.mount.call(this,margins),this.el&&this.el.parentElement&&(this.margins=this.el.parentElement.clientHeight-this.borderBox,this.el.style.position="sticky",this.el.style.position="-webkit-sticky",this.el.style.transition="transform 0s",this.el.style.boxSizing="border-box",this.el.style.top="".concat(this.top_offset,"px"))},StickyWidget.prototype.setMaxOffset=function(max_top_offset){this.el&&this.el.parentElement&&(max_top_offset<this.el.offsetTop||(this.max_top_offset=max_top_offset))},StickyWidget.prototype.onScroll=function(){if(this.el&&this.el.parentElement){var bottom_margin=this.max_top_offset?Math.min(this.max_top_offset-this.el.offsetTop-this.borderBox,this.margins-this.el.offsetTop):this.margins-this.el.offsetTop;bottom_margin>=this.bottom_offset?this.el.style.transform="translateY(0px)":this.el.style.transform="translateY(".concat(bottom_margin-this.bottom_offset,"px)")}},StickyWidget.new=function(selector){return new StickyWidget(document.querySelector(selector))},StickyWidget.is=function(selector){var el=document.querySelector(selector);return!!el&&el.classList.contains(FixedWidgetClassName)},StickyWidget}(PositionWidget),StopWidget=function(_super){function StopWidget(el){var _this=_super.call(this,el)||this;return _this.need_to_calc_el_offset=function(){return!0},_this.el&&_this.el.parentElement?(_this.el.classList.add(StopWidgetClassName),_this):_this}return __extends(StopWidget,_super),StopWidget.new=function(selector){return new StopWidget(document.querySelector(selector))},StopWidget.is=function(selector){var el=document.querySelector(selector);return!!el&&el.classList.contains(StopWidgetClassName)},StopWidget.from=function(root){return _super.from.call(this,root,StopWidgetClassName)},StopWidget}(Widget),Sidebar=function(){function Sidebar(el,margins,use_sticky_position){void 0===use_sticky_position&&(use_sticky_position=!0),this.el=el,this.margins=margins,this.use_sticky_position=use_sticky_position,this.widgets=[],this.stop_widgets=[];var isDeprecatedFloatMarkup=!!findWithProperty(this.el,(function(style){return"none"!==style.float}));isDeprecatedFloatMarkup&&console.log("Fixed Widget: fallback to position sticky");var WidgetContructor=isDeprecatedFloatMarkup||!use_sticky_position?FixedWidget:StickyWidget;this.stop_widgets=StopWidget.from(this.el),this.widgets=WidgetContructor.from(this.el),use_sticky_position&&(this.el.style.position="relative",0===this.stop_widgets.length&&(this.el.style.minHeight="100%"))}return Sidebar.prototype.mount=function(){var _this=this;this.stop_widgets.forEach((function(widget){widget.mount()})),this.widgets.forEach((function(widget){widget.mount(_this.margins)}))},Sidebar.prototype.setMaxOffset=function(common_stop_widgets){var stop_widgets=0!=this.stop_widgets.length?this.stop_widgets:common_stop_widgets,max_top_offset=0!==stop_widgets.length?Math.min.apply(Math,stop_widgets.map(this.use_sticky_position?function(w){return w.top_offset}:function(w){return w.root_offset})):0;this.widgets.forEach((function(widget,i){widget.setMaxOffset(max_top_offset)}))},Sidebar.prototype.render=function(){this.widgets.forEach((function(widget){return widget.render()}))},Sidebar.prototype.isFloatMarkup=function(){},Sidebar}(),Sidebars=function(){function Sidebars(elements,options){var _this=this;this.data=[],this.render=function(){_this.data.forEach((function(sidebar){sidebar.render()}))};var use_sticky_position=void 0===options.use_sticky_position||options.use_sticky_position;this.data=Array.from(new Set(elements.map((function(widget){return widget.parentElement})))).filter((function(sidebar_el){return null!==sidebar_el})).map((function(sidebar_el){return new Sidebar(sidebar_el,options,use_sticky_position)}))}return Sidebars.prototype.mount=function(){this.data.forEach((function(sidebar){sidebar.mount()}));var common_stop_widgets=this.getCommonStopElements();this.data.forEach((function(sidebar){sidebar.setMaxOffset(common_stop_widgets)}))},Sidebars.prototype.getCommonStopElements=function(){return this.data.filter((function(sidebar){return 0===sidebar.widgets.length})).map((function(sidebar){return sidebar.stop_widgets})).reduce((function(all,widgets){return all.concat(widgets)}),[])},Sidebars.new=function(options){var s,arr1,arr2,fixedWidgetsContainers=Array.from(new Set(Widget.queryAllWidgetsContainers(FixedWidgetClassName).concat(queryElements(compatabilty_FW_v5(options.widgets))))),stopWidgetsSelectors=compatabilty_FW_v5((void 0===(s=options.stop_elements_selectors)&&(s=""),s.replace(/[\r\n]|[\r]/gi,"\n").split("\n").map((function(s){return s.trim()})).filter((function(s){return""!==s})))),stopWidgetsContainers=Array.from(new Set(Widget.queryAllWidgetsContainers(StopWidgetClassName).concat(queryElements(stopWidgetsSelectors)))),_a=(arr1=fixedWidgetsContainers,[(arr2=stopWidgetsContainers).filter((function(e){return!arr1.includes(e)})),arr1.filter((function(e){return arr2.includes(e)}))]),stopWidgetsUniqContainers=_a[0];_a[1].forEach((function(w){console.error("The Widget is detected as fixed block and stop block!\n".concat(w.innerHTML))})),fixedWidgetsContainers.forEach((function(c){c.classList.add(FixedWidgetClassName)})),stopWidgetsUniqContainers.forEach((function(c){c.classList.add(StopWidgetClassName)}));var sidebars=new Sidebars(fixedWidgetsContainers.concat(stopWidgetsUniqContainers),options);sidebars.mount(),document.addEventListener("scroll",sidebars.render)},Sidebars}();function onDocumentLoaded(){var admin_panel=document.querySelector("#wpadminbar"),options=(window.q2w3_sidebar_options||[{}]).map((function(option){return option.margin_top=(option.margin_top||0)+((null==admin_panel?void 0:admin_panel.clientHeight)||0),option}));options.some((function(option){return window.innerWidth<option.screen_max_width||window.innerHeight<option.screen_max_height}))||function(options){void 0===options&&(options=[]),Sidebars.new(options.reduce((function(prev,cur){return __assign(__assign(__assign({},prev),cur),{widgets:prev.widgets.concat(cur.widgets||[])})}),{widgets:[]}))}(options)}window.addEventListener("load",onDocumentLoaded),"complete"===document.readyState&&onDocumentLoaded();
|
q2w3-fixed-widget.php
CHANGED
@@ -5,7 +5,7 @@ Plugin URI: https://wpadvancedads.com/fixed-widget-wordpress/
|
|
5 |
Description: Use the fixed widget plugin to create sticky widgets that stay in the visible screen area when the page is scrolled up or down and boost your conversions.
|
6 |
Text Domain: q2w3-fixed-widget
|
7 |
Author: Thomas Maier, Max Bond
|
8 |
-
Version: 6.0.
|
9 |
Author URI: https://wpadvancedads.com/fixed-widget-wordpress/
|
10 |
*/
|
11 |
|
@@ -23,7 +23,7 @@ class q2w3_fixed_widget {
|
|
23 |
|
24 |
const ID = 'q2w3_fixed_widget';
|
25 |
|
26 |
-
const VERSION = '6.0.
|
27 |
|
28 |
protected static $sidebars_widgets;
|
29 |
|
@@ -108,10 +108,10 @@ class q2w3_fixed_widget {
|
|
108 |
protected static function wp_localize_script() {
|
109 |
$options = self::load_options();
|
110 |
|
|
|
|
|
111 |
if ( is_array( self::$fixed_widgets ) && ! empty( self::$fixed_widgets ) ) {
|
112 |
-
$use_sticky_position = isset( $options['use_sticky_position'] ) && $options['use_sticky_position'];
|
113 |
$i = 0;
|
114 |
-
$sidebar_options = array();
|
115 |
|
116 |
self::$fixed_widgets = apply_filters( 'q2w3-fixed-widgets', self::$fixed_widgets ); // this filter was requested by users
|
117 |
|
@@ -132,8 +132,18 @@ class q2w3_fixed_widget {
|
|
132 |
|
133 |
$sidebar_options = apply_filters( 'q2w3-fixed-widget-sidebar-options', $sidebar_options );
|
134 |
|
135 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
136 |
}
|
|
|
137 |
}
|
138 |
|
139 |
/**
|
5 |
Description: Use the fixed widget plugin to create sticky widgets that stay in the visible screen area when the page is scrolled up or down and boost your conversions.
|
6 |
Text Domain: q2w3-fixed-widget
|
7 |
Author: Thomas Maier, Max Bond
|
8 |
+
Version: 6.0.2
|
9 |
Author URI: https://wpadvancedads.com/fixed-widget-wordpress/
|
10 |
*/
|
11 |
|
23 |
|
24 |
const ID = 'q2w3_fixed_widget';
|
25 |
|
26 |
+
const VERSION = '6.0.2';
|
27 |
|
28 |
protected static $sidebars_widgets;
|
29 |
|
108 |
protected static function wp_localize_script() {
|
109 |
$options = self::load_options();
|
110 |
|
111 |
+
$sidebar_options = array();
|
112 |
+
$use_sticky_position = isset( $options['use_sticky_position'] ) && $options['use_sticky_position'];
|
113 |
if ( is_array( self::$fixed_widgets ) && ! empty( self::$fixed_widgets ) ) {
|
|
|
114 |
$i = 0;
|
|
|
115 |
|
116 |
self::$fixed_widgets = apply_filters( 'q2w3-fixed-widgets', self::$fixed_widgets ); // this filter was requested by users
|
117 |
|
132 |
|
133 |
$sidebar_options = apply_filters( 'q2w3-fixed-widget-sidebar-options', $sidebar_options );
|
134 |
|
135 |
+
} else {
|
136 |
+
$sidebar_options[ 0 ] = array(
|
137 |
+
'use_sticky_position' => $use_sticky_position,
|
138 |
+
'margin_top' => $options['margin-top'],
|
139 |
+
'margin_bottom' => $options['margin-bottom'],
|
140 |
+
'stop_elements_selectors' => isset($options['stop-id']) && $options['stop-id'] != '' && (!isset($options['stop_elements_selectors']) || $options['stop_elements_selectors'] == '') ? $options['stop-id']: $options['stop_elements_selectors'],
|
141 |
+
'screen_max_width' => $options['screen-max-width'],
|
142 |
+
'screen_max_height' => $options['screen-max-height'],
|
143 |
+
'widgets' => array(),
|
144 |
+
);
|
145 |
}
|
146 |
+
wp_localize_script( self::ID, 'q2w3_sidebar_options', $sidebar_options );
|
147 |
}
|
148 |
|
149 |
/**
|
readme.txt
CHANGED
@@ -3,7 +3,7 @@ Contributors: webzunft, max-bond, advancedads
|
|
3 |
Tags: fixed widget, sticky widget, sidebar, ads, widget
|
4 |
Requires at least: 5.0
|
5 |
Tested up to: 5.9
|
6 |
-
Stable tag: 6.0.
|
7 |
|
8 |
More attention and a higher ad performance with fixed sticky widgets.
|
9 |
|
@@ -91,6 +91,12 @@ Use the options `Minimum Screen Width` and `Minimum Screen Height` to disable st
|
|
91 |
|
92 |
== Changelog ==
|
93 |
|
|
|
|
|
|
|
|
|
|
|
|
|
94 |
= 6.0.1 =
|
95 |
|
96 |
- Fix: use the previous Stop ID value in the new Stop Elements section
|
3 |
Tags: fixed widget, sticky widget, sidebar, ads, widget
|
4 |
Requires at least: 5.0
|
5 |
Tested up to: 5.9
|
6 |
+
Stable tag: 6.0.2
|
7 |
|
8 |
More attention and a higher ad performance with fixed sticky widgets.
|
9 |
|
91 |
|
92 |
== Changelog ==
|
93 |
|
94 |
+
= 6.0.2 =
|
95 |
+
|
96 |
+
- Improvement: Fall back to previous version when the theme does not support the new script – mainly because of using float instead of flex
|
97 |
+
- Improvement: Stop Elements work also when they are in a different column or sidebar than the fixed element
|
98 |
+
- Improvement: Recalculate Fixed Widget height on scroll
|
99 |
+
|
100 |
= 6.0.1 =
|
101 |
|
102 |
- Fix: use the previous Stop ID value in the new Stop Elements section
|