Mooeypoo has uploaded a new change for review.
https://gerrit.wikimedia.org/r/243037
Change subject: [proof of concept] Selectively disable nojs pieces when loading
Flow
......................................................................
[proof of concept] Selectively disable nojs pieces when loading Flow
When we load Flow boards, the nojs version is being replaced by a
js version. While that loads, we want to prevent the user from
accidentally clicking a not-yet-replaced element to avoid loading
separately and avoid surprising behavior.
Our current solution was to disable the entire board until
it is all available, but that may be too obstructive. In order
to let users interact with the pieces of the board that can be
interacted with while all else loads, this commit hides only
the relevant replaceable parts and leaves the permanent pieces
available.
This is a proof of concept pending review. DO NOT MERGE.
Bug: T108313
Change-Id: I80401f116122b6b23af2fd7fd5039d04823bb3ed
---
M handlebars/compiled/flow_block_loop.handlebars.php
M handlebars/compiled/flow_block_topiclist.handlebars.php
M handlebars/flow_block_loop.handlebars
M handlebars/flow_topic.partial.handlebars
M modules/flow-initialize.js
A modules/styles/flow/images/pending.gif
M modules/styles/js.less
7 files changed, 25 insertions(+), 22 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Flow
refs/changes/37/243037/1
diff --git a/handlebars/compiled/flow_block_loop.handlebars.php
b/handlebars/compiled/flow_block_loop.handlebars.php
index 9fd35e6..17035d5 100644
--- a/handlebars/compiled/flow_block_loop.handlebars.php
+++ b/handlebars/compiled/flow_block_loop.handlebars.php
@@ -23,8 +23,7 @@
);
return ''.LCRun3::sec($cx, ((isset($in['blocks']) && is_array($in)) ?
$in['blocks'] : null), $in, true, function($cx, $in) {return '
'.LCRun3::ch($cx, 'block', array(array($in),array()), 'encq').'
-';}).'<div class="flow-ui-load-overlay"></div>
-<div style="clear: both"></div>
+';}).'<div style="clear: both"></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 39befcc..8e73f08 100644
--- a/handlebars/compiled/flow_block_topiclist.handlebars.php
+++ b/handlebars/compiled/flow_block_topiclist.handlebars.php
@@ -263,7 +263,7 @@
'.$sp.'';}).'';}).'' : '').'
'.$sp.''.((LCRun3::ifvar($cx, ((isset($in['actions']['reply']) &&
is_array($in['actions'])) ? $in['actions']['reply'] : null))) ?
''.LCRun3::hbch($cx, 'ifCond',
array(array(((isset($cx['sp_vars']['root']['submitted']['postId']) &&
is_array($cx['sp_vars']['root']['submitted'])) ?
$cx['sp_vars']['root']['submitted']['postId'] :
null),'===',((isset($in['postId']) && is_array($in)) ? $in['postId'] :
null)),array()), $in, false, function($cx, $in)use($sp){return
''.LCRun3::p($cx, 'flow_reply_form', array(array($in),array()), '
').'';}, function($cx, $in)use($sp){return ''.LCRun3::hbch($cx,
'progressiveEnhancement', array(array(),array('type'=>'replace','target'=>'~
a')), $in, false, function($cx, $in)use($sp){return ''.LCRun3::p($cx,
'flow_reply_form', array(array($in),array()), '
').'';}).' <a
href="'.htmlentities((string)((isset($in['actions']['reply']['url']) &&
is_array($in['actions']['reply'])) ? $in['actions']['reply']['url'] : null),
ENT_QUOTES, 'UTF-8').'"
'.$sp.'
title="'.htmlentities((string)((isset($in['actions']['reply']['title']) &&
is_array($in['actions']['reply'])) ? $in['actions']['reply']['title'] : null),
ENT_QUOTES, 'UTF-8').'"
-'.$sp.' class="flow-ui-input-replacement-anchor
mw-ui-input"
+'.$sp.' class="flow-ui-input-replacement-anchor
mw-ui-input flow-nojs-reply-link"
'.$sp.' >'.LCRun3::ch($cx, 'l10n',
array(array('flow-reply-topic-title-placeholder',((isset($in['properties']['topic-of-post'])
&& is_array($in['properties'])) ? $in['properties']['topic-of-post'] :
null)),array()), 'encq').'</a>
'.$sp.'';}).'' : '').'</div>
';},'flow_topiclist_loop' => function ($cx, $in, $sp) {return
''.$sp.''.LCRun3::sec($cx, ((isset($in['roots']) && is_array($in)) ?
$in['roots'] : null), $in, true, function($cx, $in)use($sp){return
''.LCRun3::hbch($cx, 'eachPost', array(array(((isset($cx['sp_vars']['root']) &&
is_array($cx['sp_vars'])) ? $cx['sp_vars']['root'] : null),$in),array()), $in,
false, function($cx, $in)use($sp){return ''.LCRun3::p($cx, 'flow_topic',
array(array($in),array()), ' ').'';}).'';}).'';},'flow_load_more'
=> function ($cx, $in, $sp) {return ''.$sp.''.((LCRun3::ifvar($cx,
((isset($in['loadMoreObject']) && is_array($in)) ? $in['loadMoreObject'] :
null))) ? ' <div class="flow-load-more">
diff --git a/handlebars/flow_block_loop.handlebars
b/handlebars/flow_block_loop.handlebars
index 7ad2734..2759f55 100644
--- a/handlebars/flow_block_loop.handlebars
+++ b/handlebars/flow_block_loop.handlebars
@@ -1,5 +1,4 @@
{{#each blocks}}
{{block this}}
{{/each}}
-<div class="flow-ui-load-overlay"></div>
<div style="clear: both"></div>
diff --git a/handlebars/flow_topic.partial.handlebars
b/handlebars/flow_topic.partial.handlebars
index c5af033..18f8bf9 100644
--- a/handlebars/flow_topic.partial.handlebars
+++ b/handlebars/flow_topic.partial.handlebars
@@ -29,7 +29,7 @@
{{/progressiveEnhancement}}
<a href="{{actions.reply.url}}"
title="{{actions.reply.title}}"
- class="flow-ui-input-replacement-anchor mw-ui-input"
+ class="flow-ui-input-replacement-anchor mw-ui-input
flow-nojs-reply-link"
>
{{~l10n "flow-reply-topic-title-placeholder"
properties.topic-of-post~}}
</a>
diff --git a/modules/flow-initialize.js b/modules/flow-initialize.js
index 22717a8..c46d457 100644
--- a/modules/flow-initialize.js
+++ b/modules/flow-initialize.js
@@ -17,7 +17,6 @@
preloadTopic, preloadContent, preloadFormat,
finishLoading = function () {
$component.addClass( 'flow-component-ready' );
- $( '.flow-ui-load-overlay' ).hide();
};
// HACK: If there is no component, we are not on a flow
diff --git a/modules/styles/flow/images/pending.gif
b/modules/styles/flow/images/pending.gif
new file mode 100644
index 0000000..1194eed
--- /dev/null
+++ b/modules/styles/flow/images/pending.gif
Binary files differ
diff --git a/modules/styles/js.less b/modules/styles/js.less
index 561b2d4..daa1851 100644
--- a/modules/styles/js.less
+++ b/modules/styles/js.less
@@ -4,25 +4,31 @@
// @todo: Find better home for this css
.client-js {
- // Hide the component while it is loading if Javascript
- // is enabled.
- .flow-ui-load-overlay {
- z-index: 101;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- cursor: wait;
- }
-
+ // Hide elements from handlebars if the client has js
+ // so that the new elements appear when the JS is loaded
.flow-component {
- position: relative;
- opacity: 0.5;
+ &:not(.flow-component-ready) {
+ opacity: 0.8;
+
+ .flow-nojs-reply-link,
+ .flow-newtopic-form,
+ .flow-post-meta-actions,
+ .flow-ui-boardDescriptionWidget-editButton {
+ visibility: hidden;
+
+ &::after {
+ display: block;
+ visibility: visible;
+ content: " ";
+ background:
url(flow/images/pending.gif);
+ width: 100%;
+ height: 1em;
+ margin-top: -1em;
+ }
+ }
+ }
&-ready {
- opacity: 1;
-
-moz-transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
--
To view, visit https://gerrit.wikimedia.org/r/243037
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I80401f116122b6b23af2fd7fd5039d04823bb3ed
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
