github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-12-02 15:03:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1131 from flarum/866/affixSidebar-resize

Browse Source 
Affix sidebar when window is resized
This commit is contained in:
Toby Zerner 2017-03-03 15:24:13 +10:30 committed by GitHub
commit 747138402d
2 changed files with 58 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
framework/core/js/forum/dist/app.js vendored
View File

@ -31146,29 +31146,42 @@ System.register('flarum/utils/abbreviateNumber', [], function (_export, _context
System.register('flarum/utils/affixSidebar', [], function (_export, _context) { System.register('flarum/utils/affixSidebar', [], function (_export, _context) {
"use strict"; "use strict";
function affixSidebar(element, isInitialized) { function affixSidebar(element, isInitialized, context) {
var _this = this; var _this = this;
if (isInitialized) return; if (isInitialized) return;
var $sidebar = $(element); var onresize = function onresize() {
var $header = $('#header'); var $sidebar = $(element);
var $footer = $('#footer'); var $header = $('#header');
var $footer = $('#footer');
var $affixElement = $sidebar.find('> ul');
// Don't affix the sidebar if it is taller than the viewport (otherwise $(window).off('.affix');
// there would be no way to scroll through its content). $affixElement.removeClass('affix affix-top affix-bottom').removeData('bs.affix');
if ($sidebar.outerHeight(true) > $(window).height() - $header.outerHeight(true)) return;
$sidebar.find('> ul').affix({ // Don't affix the sidebar if it is taller than the viewport (otherwise
offset: { // there would be no way to scroll through its content).
top: function top() { if ($sidebar.outerHeight(true) > $(window).height() - $header.outerHeight(true)) return;
return $sidebar.offset().top - $header.outerHeight(true) - parseInt($sidebar.css('margin-top'), 10);
}, $affixElement.affix({
bottom: function bottom() { offset: {
return _this.bottom = $footer.outerHeight(true); top: function top() {
return $sidebar.offset().top - $header.outerHeight(true) - parseInt($sidebar.css('margin-top'), 10);
},
bottom: function bottom() {
return _this.bottom = $footer.outerHeight(true);
}
} }
} });
}); };
// Register the affix plugin to execute on every window resize (and trigger)
$(window).on('resize', onresize).resize();
context.onunload = function () {
$(window).off('resize', onresize);
};
} }
_export('default', affixSidebar); _export('default', affixSidebar);

42
framework/core/js/forum/src/utils/affixSidebar.js
View File

@ -4,22 +4,38 @@
* *
* @param {DOMElement} element * @param {DOMElement} element
* @param {Boolean} isInitialized * @param {Boolean} isInitialized
* @param {Object} context
*/ */
export default function affixSidebar(element, isInitialized) { export default function affixSidebar(element, isInitialized, context) {
if (isInitialized) return; if (isInitialized) return;
const $sidebar = $(element); const onresize = () => {
const $header = $('#header'); const $sidebar = $(element);
const $footer = $('#footer'); const $header = $('#header');
const $footer = $('#footer');
const $affixElement = $sidebar.find('> ul');
// Don't affix the sidebar if it is taller than the viewport (otherwise $(window).off('.affix');
// there would be no way to scroll through its content). $affixElement
if ($sidebar.outerHeight(true) > $(window).height() - $header.outerHeight(true)) return; .removeClass('affix affix-top affix-bottom')
.removeData('bs.affix');
$sidebar.find('> ul').affix({ // Don't affix the sidebar if it is taller than the viewport (otherwise
offset: { // there would be no way to scroll through its content).
top: () => $sidebar.offset().top - $header.outerHeight(true) - parseInt($sidebar.css('margin-top'), 10), if ($sidebar.outerHeight(true) > $(window).height() - $header.outerHeight(true)) return;
bottom: () => this.bottom = $footer.outerHeight(true)
} $affixElement.affix({
}); offset: {
top: () => $sidebar.offset().top - $header.outerHeight(true) - parseInt($sidebar.css('margin-top'), 10),
bottom: () => this.bottom = $footer.outerHeight(true)
}
});
};
// Register the affix plugin to execute on every window resize (and trigger)
$(window).on('resize', onresize).resize();
context.onunload = () => {
$(window).off('resize', onresize);
}
} }