github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-05-24 23:59:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Better post scrubber size calculations. fixes #109

Browse Source
This commit is contained in:
Toby Zerner
2016-02-06 18:47:09 +10:30
parent 9ecb5f437a
commit 173f88da92
2 changed files with 34 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
js/forum/dist/app.js vendored
View File

@ -26238,15 +26238,15 @@ System.register('flarum/components/PostStreamScrubber', ['flarum/Component', 'fl
var top = $this.offset().top; var top = $this.offset().top;
var height = $this.outerHeight(true); var height = $this.outerHeight(true);
// If an item is comment and is above the top of the viewport, // If an item is a comment and is not below the viewport, update the
// or within the viewport or more than 50% of it is visible, // comment index, which will be displayed as "viewing ? of X" on the
// update the commentIndex // scrubber.
if ($this.data('type') == 'comment' && top < viewportBottom) { if ($this.data('type') == 'comment' && top < viewportBottom) {
commentsIndex++; commentsIndex++;
} }
// If this item is above the top of the viewport, skip to the next // If this item is above the top of the viewport, skip to the next
// post. If it's below the bottom of the viewport, break out of the // one. If it's below the bottom of the viewport, break out of the
// loop. // loop.
if (top + height < viewportTop) { if (top + height < viewportTop) {
return true; return true;
@ -26255,43 +26255,19 @@ System.register('flarum/components/PostStreamScrubber', ['flarum/Component', 'fl
return false; return false;
} }
// Work out how many pixels of this item are visible inside the viewport.
// Then add the proportion of this item's total height to the index.
var visibleTop = Math.max(0, viewportTop - top); var visibleTop = Math.max(0, viewportTop - top);
var visibleBottom = Math.min(height, viewportTop + viewportHeight - top); var visibleBottom = Math.min(height, viewportTop + viewportHeight - top);
var visiblePost = visibleBottom - visibleTop; var visiblePost = visibleBottom - visibleTop;
if (visiblePost > 0) {
visible += visiblePost / height;
}
if (top <= viewportTop) { if (top <= viewportTop) {
index = parseFloat($this.data('index')) + visibleTop / height; index = parseFloat($this.data('index')) + visibleTop / height;
} }
//if (top <= viewportTop) { if (visiblePost > 0) {
// visible += visiblePost / height;
//} }
// If the bottom half of this item is visible at the top of the
// viewport, then set the start of the visible proportion as our index.
//if (top <= viewportTop) {
//
//
// if (top + height > viewportTop) {
// visible = (top + height - viewportTop) / height;
// }
//
// index = parseFloat($this.data('index')) + 1 - visible;
// //
//// If the top half of this item is visible at the bottom of the
//// viewport, then add the visible proportion to the visible
//// counter.
//}
//if (top + height >= viewportTop + viewportHeight) {
// visible += (viewportTop + viewportHeight - top) / height;
////
//// If the whole item is visible in the viewport, then increment the
//// visible counter.
//}// else visible++;
// If this item has a time associated with it, then set the // If this item has a time associated with it, then set the
// scrollbar's current period to a formatted version of this time. // scrollbar's current period to a formatted version of this time.
@ -29146,7 +29122,7 @@ System.register('flarum/components/UserPage', ['flarum/components/Page', 'flarum
user.commentsCount() user.commentsCount()
)], )],
icon: 'comment-o' icon: 'comment-o'
})); }), 100);
items.add('discussions', LinkButton.component({ items.add('discussions', LinkButton.component({
href: app.route('user.discussions', { username: user.username() }), href: app.route('user.discussions', { username: user.username() }),
@ -29156,15 +29132,15 @@ System.register('flarum/components/UserPage', ['flarum/components/Page', 'flarum
user.discussionsCount() user.discussionsCount()
)], )],
icon: 'reorder' icon: 'reorder'
})); }), 90);
if (app.session.user === user) { if (app.session.user === user) {
items.add('separator', Separator.component()); items.add('separator', Separator.component(), -90);
items.add('settings', LinkButton.component({ items.add('settings', LinkButton.component({
href: app.route('settings'), href: app.route('settings'),
children: app.translator.trans('core.forum.user.settings_link'), children: app.translator.trans('core.forum.user.settings_link'),
icon: 'cog' icon: 'cog'
})); }), -100);
} }
return items; return items;
@ -30608,10 +30584,10 @@ System.register('flarum/Model', [], function (_export) {
} }
}; };
});; });;
System.register('flarum/models/Discussion', ['flarum/Model', 'flarum/utils/mixin', 'flarum/utils/computed', 'flarum/utils/ItemList', 'flarum/utils/string', 'flarum/components/Badge'], function (_export) { System.register('flarum/models/Discussion', ['flarum/Model', 'flarum/utils/mixin', 'flarum/utils/computed', 'flarum/utils/ItemList', 'flarum/components/Badge'], function (_export) {
'use strict'; 'use strict';
var Model, mixin, computed, ItemList, slug, Badge, Discussion; var Model, mixin, computed, ItemList, Badge, Discussion;
return { return {
setters: [function (_flarumModel) { setters: [function (_flarumModel) {
Model = _flarumModel['default']; Model = _flarumModel['default'];
@ -30621,8 +30597,6 @@ System.register('flarum/models/Discussion', ['flarum/Model', 'flarum/utils/mixin
computed = _flarumUtilsComputed['default']; computed = _flarumUtilsComputed['default'];
}, function (_flarumUtilsItemList) { }, function (_flarumUtilsItemList) {
ItemList = _flarumUtilsItemList['default']; ItemList = _flarumUtilsItemList['default'];
}, function (_flarumUtilsString) {
slug = _flarumUtilsString.slug;
}, function (_flarumComponentsBadge) { }, function (_flarumComponentsBadge) {
Badge = _flarumComponentsBadge['default']; Badge = _flarumComponentsBadge['default'];
}], }],
@ -30642,7 +30616,7 @@ System.register('flarum/models/Discussion', ['flarum/Model', 'flarum/utils/mixin
babelHelpers._extends(Discussion.prototype, { babelHelpers._extends(Discussion.prototype, {
title: Model.attribute('title'), title: Model.attribute('title'),
slug: computed('title', slug), slug: Model.attribute('slug'),
startTime: Model.attribute('startTime', Model.transformDate), startTime: Model.attribute('startTime', Model.transformDate),
startUser: Model.hasOne('startUser'), startUser: Model.hasOne('startUser'),

40
js/forum/src/components/PostStreamScrubber.js
View File

@ -226,40 +226,36 @@ export default class PostStreamScrubber extends Component {
const top = $this.offset().top; const top = $this.offset().top;
const height = $this.outerHeight(true); const height = $this.outerHeight(true);
// If an item is comment and is above the top of the viewport, // If an item is a comment and is not below the viewport, update the
// or within the viewport or more than 50% of it is visible, // comment index, which will be displayed as "viewing ? of X" on the
// update the commentIndex // scrubber.
if($this.data('type') == 'comment' && top < viewportBottom && ((viewportBottom - top)/height) > 0.5) { if ($this.data('type') == 'comment' && top < viewportBottom) {
commentsIndex++; commentsIndex++;
} }
// If this item is above the top of the viewport, skip to the next // If this item is above the top of the viewport, skip to the next
// post. If it's below the bottom of the viewport, break out of the // one. If it's below the bottom of the viewport, break out of the
// loop. // loop.
if (top + height < viewportTop) { if (top + height < viewportTop) {
visible = (top + height - viewportTop) / height;
index = parseFloat($this.data('index')) + 1 - visible;
return true; return true;
} }
if (top > viewportTop + viewportHeight) { if (top > viewportTop + viewportHeight) {
return false; return false;
} }
// If the bottom half of this item is visible at the top of the // Work out how many pixels of this item are visible inside the viewport.
// viewport, then set the start of the visible proportion as our index. // Then add the proportion of this item's total height to the index.
if (top <= viewportTop && top + height > viewportTop) { const visibleTop = Math.max(0, viewportTop - top);
visible = (top + height - viewportTop) / height; const visibleBottom = Math.min(height, viewportTop + viewportHeight - top);
index = parseFloat($this.data('index')) + 1 - visible; const visiblePost = visibleBottom - visibleTop;
//
// If the top half of this item is visible at the bottom of the if (top <= viewportTop) {
// viewport, then add the visible proportion to the visible index = parseFloat($this.data('index')) + visibleTop / height;
// counter. }
} else if (top + height >= viewportTop + viewportHeight) {
visible += (viewportTop + viewportHeight - top) / height; if (visiblePost > 0) {
// visible += visiblePost / height;
// If the whole item is visible in the viewport, then increment the }
// visible counter.
} else visible++;
// If this item has a time associated with it, then set the // If this item has a time associated with it, then set the
// scrollbar's current period to a formatted version of this time. // scrollbar's current period to a formatted version of this time.