github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-30 13:36:10 +08:00
Code Issues Actions 26 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) {
"use strict";
function affixSidebar(element, isInitialized) {
function affixSidebar(element, isInitialized, context) {
var _this = this;
if (isInitialized) return;
var $sidebar = $(element);
var $header = $('#header');
var $footer = $('#footer');
var onresize = function onresize() {
var $sidebar = $(element);
var $header = $('#header');
var $footer = $('#footer');
var $affixElement = $sidebar.find('> ul');
// Don't affix the sidebar if it is taller than the viewport (otherwise
// there would be no way to scroll through its content).
if ($sidebar.outerHeight(true) > $(window).height() - $header.outerHeight(true)) return;
$(window).off('.affix');
$affixElement.removeClass('affix affix-top affix-bottom').removeData('bs.affix');
$sidebar.find('> ul').affix({
offset: {
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);
// Don't affix the sidebar if it is taller than the viewport (otherwise
// there would be no way to scroll through its content).
if ($sidebar.outerHeight(true) > $(window).height() - $header.outerHeight(true)) return;
$affixElement.affix({
offset: {
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);

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

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