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