SG has uploaded a new change for review.
https://gerrit.wikimedia.org/r/169531
Change subject: J-2a.II Current topic title in affixed board nav
......................................................................
J-2a.II Current topic title in affixed board nav
As you scroll, finds the topic currently in view,
and renders its topic title in place of "browse topics"
Change-Id: I4a9b24a9ab5bf9c4a585a8e8687197d6ee10a739
---
M Resources.php
M handlebars/compiled/flow_block_topic.handlebars.php
M handlebars/compiled/flow_block_topiclist.handlebars.php
M handlebars/flow_board_navigation.handlebars
M handlebars/flow_topic_titlebar_content.handlebars
M i18n/en.json
M i18n/qqq.json
M modules/engine/components/board/base/flow-board-load-events.js
M modules/engine/components/common/flow-component-events.js
M modules/styles/board/navigation.less
10 files changed, 114 insertions(+), 21 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Flow
refs/changes/31/169531/1
diff --git a/Resources.php b/Resources.php
index 140a929..464165e 100644
--- a/Resources.php
+++ b/Resources.php
@@ -224,9 +224,12 @@
'flow-moderation-confirmation-delete-topic',
'flow-moderation-confirmation-suppress-topic',
'flow-topic-moderated-reason-prefix',
+ // Undo actions
'flow-post-undo-hide',
'flow-post-undo-delete',
'flow-post-undo-suppress',
+ // Board header
+ "flow-board-header-browse-topics-link",
),
),
// @todo: upstream to mediawiki ui
diff --git a/handlebars/compiled/flow_block_topic.handlebars.php
b/handlebars/compiled/flow_block_topic.handlebars.php
index 4e2b764..9fff08d 100644
--- a/handlebars/compiled/flow_block_topic.handlebars.php
+++ b/handlebars/compiled/flow_block_topic.handlebars.php
@@ -48,7 +48,9 @@
</div>
' : '').'
</div>
-';},'flow_topic_titlebar_content' => function ($cx, $in) {return '<h2
class="flow-topic-title" data-title="'.LCRun3::ch($cx, 'plaintextSnippet',
Array(Array(((isset($in['content']['format']) && is_array($in['content'])) ?
$in['content']['format'] : null),((isset($in['content']['content']) &&
is_array($in['content'])) ? $in['content']['content'] : null)),Array()),
'encq').'">'.LCRun3::ch($cx, 'escapeContent',
Array(Array(((isset($in['content']['format']) && is_array($in['content'])) ?
$in['content']['format'] : null),((isset($in['content']['content']) &&
is_array($in['content'])) ? $in['content']['content'] : null)),Array()),
'encq').'</h2>
+';},'flow_topic_titlebar_content' => function ($cx, $in) {return '<h2
class="flow-topic-title flow-load-interactive"
+ data-title="'.LCRun3::ch($cx, 'plaintextSnippet',
Array(Array(((isset($in['content']['format']) && is_array($in['content'])) ?
$in['content']['format'] : null),((isset($in['content']['content']) &&
is_array($in['content'])) ? $in['content']['content'] : null)),Array()),
'encq').'"
+ data-flow-load-handler="topicTitle">'.LCRun3::ch($cx, 'escapeContent',
Array(Array(((isset($in['content']['format']) && is_array($in['content'])) ?
$in['content']['format'] : null),((isset($in['content']['content']) &&
is_array($in['content'])) ? $in['content']['content'] : null)),Array()),
'encq').'</h2>
<div class="flow-topic-meta">
'.((LCRun3::ifvar($cx, ((isset($in['actions']['reply']) &&
is_array($in['actions'])) ? $in['actions']['reply'] : null))) ? '
<a
href="'.htmlentities((string)((isset($in['actions']['reply']['url']) &&
is_array($in['actions']['reply'])) ? $in['actions']['reply']['url'] : null),
ENT_QUOTES, 'UTF-8').'"
diff --git a/handlebars/compiled/flow_block_topiclist.handlebars.php
b/handlebars/compiled/flow_block_topiclist.handlebars.php
index 684960e..2415b1a 100644
--- a/handlebars/compiled/flow_block_topiclist.handlebars.php
+++ b/handlebars/compiled/flow_block_topiclist.handlebars.php
@@ -34,9 +34,14 @@
</div>
<div class="flow-board-navigation-inner">
+ <a href="javascript:void(0);"
+ class="flow-board-navigator-active
flow-board-navigator-first">
+ <span class="wikiglyph wikiglyph-stripe-toc"></span>
+ <span class="flow-load-interactive"
data-flow-load-handler="boardNavigationTitle">'.LCRun3::ch($cx, 'l10n',
Array(Array('flow-board-header-browse-topics-link'),Array()), 'encq').'</span>
+ </a>
<a href="javascript:void(0);"
- class="flow-board-navigator-active
flow-board-navigator-first flow-ui-tooltip-target"
+ class="flow-board-navigator-last flow-ui-tooltip-target"
data-tooltip-pointing="down"
title="'.LCRun3::ch($cx, 'l10n',
Array(Array('flow-sorting-tooltip'),Array()), 'encq').'"
data-flow-interactive-handler="menuToggle"
@@ -145,7 +150,9 @@
</div>
' : '').'
</div>
-';},'flow_topic_titlebar_content' => function ($cx, $in) {return '<h2
class="flow-topic-title" data-title="'.LCRun3::ch($cx, 'plaintextSnippet',
Array(Array(((isset($in['content']['format']) && is_array($in['content'])) ?
$in['content']['format'] : null),((isset($in['content']['content']) &&
is_array($in['content'])) ? $in['content']['content'] : null)),Array()),
'encq').'">'.LCRun3::ch($cx, 'escapeContent',
Array(Array(((isset($in['content']['format']) && is_array($in['content'])) ?
$in['content']['format'] : null),((isset($in['content']['content']) &&
is_array($in['content'])) ? $in['content']['content'] : null)),Array()),
'encq').'</h2>
+';},'flow_topic_titlebar_content' => function ($cx, $in) {return '<h2
class="flow-topic-title flow-load-interactive"
+ data-title="'.LCRun3::ch($cx, 'plaintextSnippet',
Array(Array(((isset($in['content']['format']) && is_array($in['content'])) ?
$in['content']['format'] : null),((isset($in['content']['content']) &&
is_array($in['content'])) ? $in['content']['content'] : null)),Array()),
'encq').'"
+ data-flow-load-handler="topicTitle">'.LCRun3::ch($cx, 'escapeContent',
Array(Array(((isset($in['content']['format']) && is_array($in['content'])) ?
$in['content']['format'] : null),((isset($in['content']['content']) &&
is_array($in['content'])) ? $in['content']['content'] : null)),Array()),
'encq').'</h2>
<div class="flow-topic-meta">
'.((LCRun3::ifvar($cx, ((isset($in['actions']['reply']) &&
is_array($in['actions'])) ? $in['actions']['reply'] : null))) ? '
<a
href="'.htmlentities((string)((isset($in['actions']['reply']['url']) &&
is_array($in['actions']['reply'])) ? $in['actions']['reply']['url'] : null),
ENT_QUOTES, 'UTF-8').'"
diff --git a/handlebars/flow_board_navigation.handlebars
b/handlebars/flow_board_navigation.handlebars
index e0b150c..79e5300 100644
--- a/handlebars/flow_board_navigation.handlebars
+++ b/handlebars/flow_board_navigation.handlebars
@@ -4,9 +4,14 @@
{{!-- placeholder for javascript injected errors --}}
</div>
<div class="flow-board-navigation-inner">
+ <a href="javascript:void(0);"
+ class="flow-board-navigator-active
flow-board-navigator-first">
+ <span class="wikiglyph wikiglyph-stripe-toc"></span>
+ <span class="flow-load-interactive"
data-flow-load-handler="boardNavigationTitle">{{l10n
"flow-board-header-browse-topics-link"}}</span>
+ </a>
{{!-- Click for sorting options, not sure what this url should
be --}}
<a href="javascript:void(0);"
- class="flow-board-navigator-active
flow-board-navigator-first flow-ui-tooltip-target"
+ class="flow-board-navigator-last flow-ui-tooltip-target"
data-tooltip-pointing="down"
title="{{l10n "flow-sorting-tooltip"}}"
data-flow-interactive-handler="menuToggle"
diff --git a/handlebars/flow_topic_titlebar_content.handlebars
b/handlebars/flow_topic_titlebar_content.handlebars
index 8d61750..cf3ef3c 100644
--- a/handlebars/flow_topic_titlebar_content.handlebars
+++ b/handlebars/flow_topic_titlebar_content.handlebars
@@ -1,4 +1,6 @@
-<h2 class="flow-topic-title" data-title="{{plaintextSnippet content.format
content.content}}">{{escapeContent content.format content.content}}</h2>
+<h2 class="flow-topic-title flow-load-interactive"
+ data-title="{{plaintextSnippet content.format content.content}}"
+ data-flow-load-handler="topicTitle">{{escapeContent content.format
content.content}}</h2>
<div class="flow-topic-meta">
{{#if actions.reply}}
<a href="{{actions.reply.url}}"
diff --git a/i18n/en.json b/i18n/en.json
index 62ce01e..fa43568 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -22,6 +22,7 @@
"logentry-suppress-flow-suppress-topic": "$1 {{GENDER:$2|suppressed}} a
[$4 topic] on [[$3]]",
"logentry-suppress-flow-restore-topic": "$1 {{GENDER:$2|deleted}} a [$4
topic] on [[$3]]",
"flow-user-moderated": "Moderated user",
+ "flow-board-header-browse-topics-link": "Browse topics",
"flow-edit-header-link": "Edit header",
"flow-post-moderated-toggle-hide-show": "Show comment {{GENDER:$1|hidden}}
by $2",
"flow-post-moderated-toggle-delete-show": "Show comment
{{GENDER:$1|deleted}} by $2",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 8913b91..c720c86 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -26,6 +26,7 @@
"logentry-suppress-flow-suppress-topic": "Text for a deletion log entry
when a topic was suppressed. Parameters:\n* $1 - the user: link to the user
page\n* $2 - the username. Can be used for GENDER.\n* $3 - the page where the
topic was moderated\n* $4 - permalink URL to the moderated
topic\n{{Related|Flow-logentry}}",
"logentry-suppress-flow-restore-topic": "Text for a deletion log entry
when a suppressed topic was restored. Parameters:\n* $1 - the user: link to the
user page\n* $2 - the username. Can be used for GENDER.\n* $3 - the page where
the topic was moderated\n* $4 - permalink URL to the moderated
topic\n{{Related|Flow-logentry}}",
"flow-user-moderated": "Name to display when the current user is not
allowed to see the users name due to moderation",
+ "flow-board-header-browse-topics-link": "Text to show in the board
header which links to the topics list.",
"flow-edit-header-link": "Used as text for the button that either
allows editing the header in place or brings the user to a page for editing the
header.",
"flow-post-moderated-toggle-hide-show": "Message to display instead of
content when a hidden post has been hidden.\n\nParameters:\n* $1 - username
that hid the title, can be used for GENDER\n* $2 - user link and tool links for
the user\n{{Related|Flow-post-moderated-toggle}}",
"flow-post-moderated-toggle-delete-show": "Message to display instead
of content when a deleted post has been hidden.\n\nParameters:\n* $1 - username
that hid the title, can be used for GENDER\n* $2 - user link and tool links for
the user\n{{Related|Flow-post-moderated-toggle}}",
diff --git a/modules/engine/components/board/base/flow-board-load-events.js
b/modules/engine/components/board/base/flow-board-load-events.js
index 9d4903b..899bb2b 100644
--- a/modules/engine/components/board/base/flow-board-load-events.js
+++ b/modules/engine/components/board/base/flow-board-load-events.js
@@ -65,12 +65,48 @@
* Bind the navigation header bar to the window.scroll event.
* @param {jQuery} $boardNavigation
*/
-
FlowBoardComponentLoadEventsMixin.UI.events.loadHandlers.boardNavigation =
function ( $boardNavigation ) {
- this.on( 'scroll', _flowBoardAdjustTopicNavigationHeader, [
$boardNavigation ] );
+ function flowBoardLoadEventsBoardNavigation( $boardNavigation ) {
+ this
+ .on( 'scroll', _flowBoardAdjustTopicNavigationHeader, [
$boardNavigation ] )
+ .on( 'resize', _flowBoardAdjustTopicNavigationHeader, [
$boardNavigation ] );
// The topic navigation header becomes fixed to the window
beyond its position
- _flowBoardAdjustTopicNavigationHeader( $boardNavigation, {} );
- };
+ _flowBoardAdjustTopicNavigationHeader.call( this,
$boardNavigation, {} );
+ }
+
FlowBoardComponentLoadEventsMixin.UI.events.loadHandlers.boardNavigation =
flowBoardLoadEventsBoardNavigation;
+
+ /**
+ * Stores the board navigation title.
+ * @param {jQuery} $boardNavigation
+ */
+ function flowBoardLoadEventsBoardNavigationTitle( $boardNavigationTitle
) {
+ if ( !$boardNavigationTitle.closest(
'.flow-board-navigation-affixed' ).length ) {
+ // We only care about this when it's in the affixed
board navigation header, not the main one
+ return;
+ }
+
+ this.$boardNavigationTitle = $boardNavigationTitle;
+ }
+
FlowBoardComponentLoadEventsMixin.UI.events.loadHandlers.boardNavigationTitle =
flowBoardLoadEventsBoardNavigationTitle;
+
+ /**
+ * Stores every topic title currently on the page
+ * @param {jQuery} $topicTitle
+ */
+ function flowBoardLoadEventsTopicTitle( $topicTitle ) {
+ if ( !this.topicTitles ) {
+ this.topicTitles = {};
+ }
+
+ // Get the topic ID from the parent container
+ var topicId = $topicTitle.closest( '[data-flow-id]' ).data(
'flow-id' );
+
+ // Store this title by ID
+ if ( topicId ) {
+ this.topicTitles[topicId] = $topicTitle;
+ }
+ }
+ FlowBoardComponentLoadEventsMixin.UI.events.loadHandlers.topicTitle =
flowBoardLoadEventsTopicTitle;
//
// Private functions
@@ -85,7 +121,8 @@
*/
function _flowBoardAdjustTopicNavigationHeader( $boardNavigation, event
) {
var $clone = $boardNavigation.data( 'flowScrollClone' ),
- boardNavigationPosition = $boardNavigation.offset();
+ boardNavigationPosition = $boardNavigation.offset(),
+ bottomScrollPosition, $topicInView, topicText;
if ( window.scrollY <= boardNavigationPosition.top ) {
// Board nav is still in view; don't affix it
@@ -93,6 +130,7 @@
// Remove the old clone if it exists
$clone.remove();
$boardNavigation.removeData( 'flowScrollClone'
);
+ delete this.$boardNavigationTitle;
}
return;
}
@@ -100,14 +138,21 @@
if ( !$clone ) {
// Make a new clone
$clone = $boardNavigation.clone( true );
+
+ // Add new classes, and remove the main load handler so
we don't trigger it again
$clone
- .addClass( 'flow-board-navigation-affixed' )
- .removeClass( 'flow-load-interactive' );
+ .removeData( 'flow-load-handler' )
+ .removeClass( 'flow-load-interactive' )
+ .addClass( 'flow-board-navigation-affixed' );
+
$boardNavigation
// Store this
.data( 'flowScrollClone', $clone )
// Insert it
.after( $clone );
+
+ // Run loadHandlers
+ this.emitWithReturn( 'makeContentInteractive', $clone );
}
// The only thing that needs calculating is its left offset
@@ -116,6 +161,22 @@
left: boardNavigationPosition.left
} );
}
+
+ // Find out what the bottom of the board nav is touching
+ bottomScrollPosition = window.scrollY +
$boardNavigation.outerHeight();
+
+ $.each( this.topicTitles || {}, function ( topicId, $topicTitle
) {
+ if ( $topicTitle.offset().top > bottomScrollPosition ) {
+ return false; // stop, this topic is too far
+ }
+ $topicInView = $topicTitle;
+ topicText = $topicInView.text();
+ } );
+
+ // Find out if we need to change the title
+ if ( $topicInView && this.$boardNavigationTitle.text() !==
topicText ) {
+ this.$boardNavigationTitle.text( topicText );
+ }
}
// Mixin to FlowBoardComponent
diff --git a/modules/engine/components/common/flow-component-events.js
b/modules/engine/components/common/flow-component-events.js
index 1d5eaf0..27c32d4 100644
--- a/modules/engine/components/common/flow-component-events.js
+++ b/modules/engine/components/common/flow-component-events.js
@@ -62,11 +62,15 @@
}
_isGlobalBound = true;
- // Handle scroll events globally
+ // Handle scroll and resize events globally
$( window )
.on(
'scroll.flow',
$.throttle( 50, _getDispatchCallback( this,
'scroll' ) )
+ )
+ .on(
+ 'resize.flow',
+ $.throttle( 50, _getDispatchCallback( this,
'resize' ) )
);
}
OO.mixinClass( FlowComponentEventsMixin, OO.EventEmitter );
@@ -109,7 +113,7 @@
// Call function
retVal = method.apply(
- binding.context,
+ binding.context || this,
binding.args ? binding.args.concat(
args ) : args
);
diff --git a/modules/styles/board/navigation.less
b/modules/styles/board/navigation.less
index ff7f3c9..4db9337 100644
--- a/modules/styles/board/navigation.less
+++ b/modules/styles/board/navigation.less
@@ -55,13 +55,6 @@
&.flow-board-navigator-first {
padding-left: 0;
}
- &.flow-board-navigator-last {
- position: absolute;
- bottom: 0;
- right: -2.5em;
- width: 1.1em;
- border-bottom: 1px solid @colorGrayLight;
- }
}
// Added by JS when the window has been scrolled beyond the navigation,
so it sticks to the viewport
@@ -72,6 +65,20 @@
top: 0;
width: 100%;
background: @colorWhite;
+
+ .flow-board-navigation-inner {
+ & .flow-board-navigator-active {
+ // Clip the topic title
+ display: block;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ & > :not(.flow-board-navigator-active) {
+ display: none; // hide everything but the
current topic title
+ }
+ }
+
}
}
--
To view, visit https://gerrit.wikimedia.org/r/169531
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I4a9b24a9ab5bf9c4a585a8e8687197d6ee10a739
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: SG <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
