Mattflaschen has uploaded a new change for review.
https://gerrit.wikimedia.org/r/141070
Change subject: Refactor collapsing to handle moderated posts
......................................................................
Refactor collapsing to handle moderated posts
* Get rid of flow-topic-collapsed-invert
* Use flow-topic-expanded and flow-topic-collapsed
* Save + (expanded) or - (collapsed) to storage, since there is no
general toggle class any more
* Remove flow-topic-collapsed when explicitly overriden, either by a
user click or session storage (essentially a past click)
* Don't remove collapsed class of moderated posts when switching the
board's overall collapse mode
Change-Id: I1d8274d7306bc318f693a6a10b712e56219ea25c
---
M handlebars/compiled/flow_block_topic.handlebars.php
M handlebars/compiled/flow_block_topiclist.handlebars.php
M handlebars/flow_topic.handlebars
M modules/new/components/flow-board.js
M modules/new/styles/interactive.less
5 files changed, 77 insertions(+), 38 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Flow
refs/changes/70/141070/1
diff --git a/handlebars/compiled/flow_block_topic.handlebars.php
b/handlebars/compiled/flow_block_topic.handlebars.php
index 7a8f618..961553c 100644
--- a/handlebars/compiled/flow_block_topic.handlebars.php
+++ b/handlebars/compiled/flow_block_topic.handlebars.php
@@ -44,7 +44,7 @@
'.LCRun3::sec($cx, ((is_array($in) && isset($in['roots'])) ?
$in['roots'] : null), $in, true, function($cx, $in) {return '
'.LCRun3::hbch($cx, 'eachPost', Array($cx['scopes'][0],$in), $in,
function($cx, $in) {return '
- <div class="flow-topic flow-load-interactive
'.((LCRun3::ifvar($cx, ((is_array($in) && isset($in['isModerated'])) ?
$in['isModerated'] : null))) ? '' : 'flow-topic-collapsed-invert').'"
id="flow-topic-'.htmlentities(((is_array($in) && isset($in['postId'])) ?
$in['postId'] : null), ENT_QUOTES, 'UTF-8').'"
data-flow-id="'.htmlentities(((is_array($in) && isset($in['postId'])) ?
$in['postId'] : null), ENT_QUOTES, 'UTF-8').'"
data-flow-load-handler="topicElement">
+ <div class="flow-topic flow-load-interactive
'.((LCRun3::ifvar($cx, ((is_array($in) && isset($in['isModerated'])) ?
$in['isModerated'] : null))) ? 'flow-topic-moderated flow-topic-collapsed' :
'').'" id="flow-topic-'.htmlentities(((is_array($in) && isset($in['postId'])) ?
$in['postId'] : null), ENT_QUOTES, 'UTF-8').'"
data-flow-id="'.htmlentities(((is_array($in) && isset($in['postId'])) ?
$in['postId'] : null), ENT_QUOTES, 'UTF-8').'"
data-flow-load-handler="topicElement">
<div class="flow-topic-titlebar flow-click-interactive"
data-flow-interactive-handler="topicCollapserToggle" tabindex="0">
<h2 class="flow-topic-title"
data-title="'.htmlentities(((is_array($in) && isset($in['content'])) ?
$in['content'] : null), ENT_QUOTES, 'UTF-8').'">'.htmlentities(((is_array($in)
&& isset($in['content'])) ? $in['content'] : null), ENT_QUOTES, 'UTF-8').'</h2>
'.((LCRun3::ifvar($cx, ((is_array($in) &&
isset($in['isModerated'])) ? $in['isModerated'] : null))) ? '
@@ -273,4 +273,4 @@
</div>
';
}
-?>
+?>
\ No newline at end of file
diff --git a/handlebars/compiled/flow_block_topiclist.handlebars.php
b/handlebars/compiled/flow_block_topiclist.handlebars.php
index 3b0a7db..94d6e40 100644
--- a/handlebars/compiled/flow_block_topiclist.handlebars.php
+++ b/handlebars/compiled/flow_block_topiclist.handlebars.php
@@ -115,7 +115,7 @@
'.LCRun3::sec($cx, ((is_array($in) && isset($in['roots'])) ?
$in['roots'] : null), $in, true, function($cx, $in) {return '
'.LCRun3::hbch($cx, 'eachPost', Array($cx['scopes'][0],$in), $in,
function($cx, $in) {return '
- <div class="flow-topic flow-load-interactive
'.((LCRun3::ifvar($cx, ((is_array($in) && isset($in['isModerated'])) ?
$in['isModerated'] : null))) ? 'flow-topic-moderated
flow-topic-collapsed-invert' : '').'"
id="flow-topic-'.htmlentities(((is_array($in) && isset($in['postId'])) ?
$in['postId'] : null), ENT_QUOTES, 'UTF-8').'"
data-flow-id="'.htmlentities(((is_array($in) && isset($in['postId'])) ?
$in['postId'] : null), ENT_QUOTES, 'UTF-8').'"
data-flow-load-handler="topicElement">
+ <div class="flow-topic flow-load-interactive
'.((LCRun3::ifvar($cx, ((is_array($in) && isset($in['isModerated'])) ?
$in['isModerated'] : null))) ? 'flow-topic-moderated flow-topic-collapsed' :
'').'" id="flow-topic-'.htmlentities(((is_array($in) && isset($in['postId'])) ?
$in['postId'] : null), ENT_QUOTES, 'UTF-8').'"
data-flow-id="'.htmlentities(((is_array($in) && isset($in['postId'])) ?
$in['postId'] : null), ENT_QUOTES, 'UTF-8').'"
data-flow-load-handler="topicElement">
<div class="flow-topic-titlebar flow-click-interactive"
data-flow-interactive-handler="topicCollapserToggle" tabindex="0">
<h2 class="flow-topic-title"
data-title="'.htmlentities(((is_array($in) && isset($in['content'])) ?
$in['content'] : null), ENT_QUOTES, 'UTF-8').'">'.htmlentities(((is_array($in)
&& isset($in['content'])) ? $in['content'] : null), ENT_QUOTES, 'UTF-8').'</h2>
'.((LCRun3::ifvar($cx, ((is_array($in) &&
isset($in['isModerated'])) ? $in['isModerated'] : null))) ? '
@@ -353,4 +353,4 @@
</div>
';
}
-?>
+?>
\ No newline at end of file
diff --git a/handlebars/flow_topic.handlebars b/handlebars/flow_topic.handlebars
index bd29a7a..725de86 100644
--- a/handlebars/flow_topic.handlebars
+++ b/handlebars/flow_topic.handlebars
@@ -1,4 +1,4 @@
-<div class="flow-topic flow-load-interactive {{#if
isModerated}}flow-topic-moderated flow-topic-collapsed-invert{{/if}}"
id="flow-topic-{{postId}}" data-flow-id="{{postId}}"
data-flow-load-handler="topicElement">
+<div class="flow-topic flow-load-interactive {{#if
isModerated}}flow-topic-moderated flow-topic-collapsed{{/if}}"
id="flow-topic-{{postId}}" data-flow-id="{{postId}}"
data-flow-load-handler="topicElement">
<div class="flow-topic-titlebar flow-click-interactive"
data-flow-interactive-handler="topicCollapserToggle" tabindex="0">
<h2 class="flow-topic-title"
data-title="{{content}}">{{content}}</h2>
{{#if isModerated}}
diff --git a/modules/new/components/flow-board.js
b/modules/new/components/flow-board.js
index f7e2316..ff0760b 100644
--- a/modules/new/components/flow-board.js
+++ b/modules/new/components/flow-board.js
@@ -572,12 +572,28 @@
*/
FlowBoardComponent.UI.events.loadHandlers.topicElement =
function ( $topic ) {
// Get last collapse state from sessionStorage
- var states =
mw.flow.StorageEngine.sessionStorage.getItem( 'topicCollapserStates' ) || {},
- topicId = $topic.data('flow-id');
+ var stateForTopic, classForTopic,
+ states =
mw.flow.StorageEngine.sessionStorage.getItem( 'topicCollapserStates' ) || {},
+ topicId = $topic.data('flow-id'),
+ STORAGE_TO_CLASS = {
+ // Conserve space in browser storage
+ '+': 'flow-topic-expanded',
+ '-': 'flow-topic-collapsed'
+ };
- if ( states[ topicId ] ) {
- // This item was previously collapse-inverted,
so reapply the class
- $topic.addClass( 'flow-topic-collapsed-invert'
);
+ stateForTopic = states[ topicId ];
+ if ( stateForTopic ) {
+ // This item has an visibility override
previously, so reapply the class
+
+ classForTopic = STORAGE_TO_CLASS[stateForTopic];
+
+ if ( classForTopic === 'flow-topic-expanded' ) {
+ // Remove flow-topic-collapsed first
(can be set on server for moderated), so it
+ // doesn't clash.
+ $topic.removeClass(
'flow-topic-collapsed' );
+ }
+
+ $topic.addClass( classForTopic );
}
};
@@ -713,23 +729,42 @@
};
/**
- * Toggles the flow-topic-expanded class on .flow-topic.
+ * Sets the visibility class based on the user toggle action.
* @param {Event} event
*/
FlowBoardComponent.UI.events.interactiveHandlers.topicCollapserToggle =
function ( event ) {
var $target = $( event.target ),
- $topic, topicId, states;
+ $topic, topicId, states,
+ $component = $( this ).closest(
'.flow-component' ),
+ overrideClass;
// Make sure we didn't click on any interactive elements
if ( $target.not( '.flow-menu-js-drop' ) &&
!$target.closest( 'a, button, input, textarea, select, ul, ol' ).length ) {
- // Toggle the class
- $topic = $( this ).closest( '.flow-topic'
).toggleClass( 'flow-topic-collapsed-invert' );
+ $topic = $( this ).closest( '.flow-topic' );
+ if ( $component.is(
'.flow-board-collapsed-compact, .flow-board-collapsed-topics' ) ) {
+ // Board default is collapsed; topic
can be overridden to
+ // expanded, or not.
+
+ // We also remove flow-topic-collapsed.
That is set on the
+ // server for moderated posts, but an
explicit user action
+ // overrides that.
+ $topic.removeClass(
'flow-topic-collapsed' ).toggleClass( 'flow-topic-expanded' );
+
+ } else {
+ // .flow-board-collapsed-full; Board
default is expanded;
+ // topic can be overridden to
collapsed, or not.
+ $topic.toggleClass(
'flow-topic-collapsed' );
+ }
+
topicId = $topic.data('flow-id');
// Save in sessionStorage
states =
mw.flow.StorageEngine.sessionStorage.getItem( 'topicCollapserStates' ) || {};
- if ( $topic.hasClass(
'flow-topic-collapsed-invert' ) ) {
- states[ topicId ] = 1;
+ // Opposite of STORAGE_TO_CLASS
+ if ( $topic.hasClass( 'flow-topic-expanded' ) )
{
+ states[ topicId ] = '+';
+ } else if ( $topic.hasClass(
'flow-topic-collapsed' ) ) {
+ states[ topicId ] = '-';
} else {
delete states[ topicId ];
}
@@ -1354,7 +1389,10 @@
} else {
// Save
mw.flow.StorageEngine.localStorage.setItem(
'collapserState', newState );
- flowBoard.$board.find(
'.flow-topic-collapsed-invert' ).removeClass( 'flow-topic-collapsed-invert' );
+ flowBoard.$board.find( '.flow-topic-expanded,
.flow-topic-collapsed' )
+ // If moderated topics are currently
collapsed, leave them that way
+ .not(
'.flow-topic-moderated.flow-topic-collapsed' )
+ .removeClass( 'flow-topic-expanded
flow-topic-collapsed' );
// Remove individual topic states
mw.flow.StorageEngine.sessionStorage.removeItem( 'topicCollapserStates' );
diff --git a/modules/new/styles/interactive.less
b/modules/new/styles/interactive.less
index f8df956..157698f 100644
--- a/modules/new/styles/interactive.less
+++ b/modules/new/styles/interactive.less
@@ -176,7 +176,27 @@
display: none;
}
}
-// In compact mode, posts are hidden, and the topic titlebar is minimized
+
+
+// Overrides to the default expand/collapse state. Only set when
+// necessary and removed when the page-level state changes
+// div is used to add specificity.
+
+div.flow-topic-expanded {
+ .flow-post,
+ .flow-reply-form {
+ display: block;
+ }
+}
+
+div.flow-topic-collapsed {
+ .flow-post,
+ .flow-reply-form {
+ display: none;
+ }
+}
+
+// In compact mode, posts are hidden by default, and the topic titlebar is
minimized
.flow-board-collapsed-compact {
.flow-board-navigation {
a.flow-board-collapser-compact {
@@ -215,14 +235,8 @@
.flow-reply-form {
display: none;
}
- .flow-topic-collapsed-invert {
- .flow-post,
- .flow-reply-form {
- display: block;
- }
- }
}
-// In topics mode, posts are hidden; only the topic titlebar is visible
+// In topics mode, posts are hidden by default; only the topic titlebar is
visible
.flow-board-collapsed-topics {
.flow-board-navigation {
a.flow-board-collapser-topics {
@@ -237,23 +251,10 @@
.flow-reply-form {
display: none;
}
- .flow-topic-collapsed-invert {
- .flow-post,
- .flow-reply-form {
- display: block;
- }
- }
}
.flow-topic-moderated {
opacity: 0.4;
-}
-
-.flow-topic-collapsed-invert {
- .flow-post,
- .flow-reply-form {
- display: none;
- }
}
// Show that the topic titlebar is clickable
--
To view, visit https://gerrit.wikimedia.org/r/141070
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I1d8274d7306bc318f693a6a10b712e56219ea25c
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: frontend-rewrite
Gerrit-Owner: Mattflaschen <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
