jenkins-bot has submitted this change and it was merged.
Change subject: Enable formatting toolbar for non-Chrome browsers
......................................................................
Enable formatting toolbar for non-Chrome browsers
* Show list tools only in Chrome where they work sensibly
* Do not animate the formatting toolbar because it is distracting
* Remove the unused 'beta' url param hack
* Avoid js error while executing document.queryCommandState by
first checking document.queryCommandEnabled due to different
implementations in different browsers
Bug: T95710
Change-Id: I66a5dd675abe588209eaa1487c30d7664313ab3a
---
M modules/tools/ext.cx.tools.formatter.js
M modules/tools/styles/ext.cx.tools.formatter.less
2 files changed, 27 insertions(+), 14 deletions(-)
Approvals:
Nikerabbit: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/tools/ext.cx.tools.formatter.js
b/modules/tools/ext.cx.tools.formatter.js
index 2e2cd4a..404277d 100644
--- a/modules/tools/ext.cx.tools.formatter.js
+++ b/modules/tools/ext.cx.tools.formatter.js
@@ -39,18 +39,40 @@
orderedlist: this.$card.find(
'.card__format--orderedlist' ),
unorderedlist: this.$card.find(
'.card__format--unorderedlist' )
};
+
+ if ( window.chrome ) {
+ // Following controls work only in Chrome.
+ this.$buttons.orderedlist.hide();
+ this.$buttons.unorderedlist.hide();
+ }
+
this.$card.hide();
};
+
+ /**
+ * Get command state for the given command
+ * @param {string} command Example: bold, italic.
+ * @return {boolean} whether the selection has the command applied or
not.
+ */
+ function getCommandState( command ) {
+ // queryCommandEnabled returns a Boolean value that indicates
whether a specified
+ // command can be successfully executed using execCommand, or
queried
+ // given the current state of the document.
+ //
https://docs.webplatform.org/wiki/dom/TextRange/queryCommandEnabled
+ // Also see list of contenteditable browser inconsistencies
+ //
https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md
+ return document.queryCommandEnabled( command ) &&
document.queryCommandState( command );
+ }
/**
* Show the card.
*/
FormatTool.prototype.show = function () {
// Highlight the buttons based on the current state of the
selection
- this.$buttons.bold.toggleClass( 'highlight',
document.queryCommandState( 'bold' ) );
- this.$buttons.italic.toggleClass( 'highlight',
document.queryCommandState( 'italic' ) );
- this.$buttons.orderedlist.toggleClass( 'highlight',
document.queryCommandState( 'insertOrderedList' ) );
- this.$buttons.unorderedlist.toggleClass( 'highlight',
document.queryCommandState( 'insertUnorderedList' ) );
+ this.$buttons.bold.toggleClass( 'highlight', getCommandState(
'bold' ) );
+ this.$buttons.italic.toggleClass( 'highlight', getCommandState(
'italic' ) );
+ this.$buttons.orderedlist.toggleClass( 'highlight',
getCommandState( 'insertOrderedList' ) );
+ this.$buttons.unorderedlist.toggleClass( 'highlight',
getCommandState( 'insertUnorderedList' ) );
this.$card.show();
this.onShow();
};
@@ -182,14 +204,7 @@
// Capture the selection
mw.cx.selection.save( 'format', mw.cx.selection.get() );
this.listen();
-
- // Format tool is shown only in Chrome. It is show in other
browsers
- // if URL hash contains beta
- if ( window.chrome || location.hash.match( /beta/ ) ) {
- this.show();
- } else {
- this.stop();
- }
+ this.show();
};
FormatTool.prototype.stop = function () {
diff --git a/modules/tools/styles/ext.cx.tools.formatter.less
b/modules/tools/styles/ext.cx.tools.formatter.less
index d47d886..e71e609 100644
--- a/modules/tools/styles/ext.cx.tools.formatter.less
+++ b/modules/tools/styles/ext.cx.tools.formatter.less
@@ -1,8 +1,6 @@
@import "mediawiki.mixins";
.card__format {
- animation-name: card-show-animation;
- animation-duration: 0.5s;
position: relative;
min-height: 30px;
padding: 5px;
--
To view, visit https://gerrit.wikimedia.org/r/207421
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I66a5dd675abe588209eaa1487c30d7664313ab3a
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Santhosh <santhosh.thottin...@gmail.com>
Gerrit-Reviewer: Nikerabbit <niklas.laxst...@gmail.com>
Gerrit-Reviewer: Santhosh <santhosh.thottin...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
