EBernhardson has uploaded a new change for review. https://gerrit.wikimedia.org/r/201358
Change subject: Conditionally add switch buttons ...................................................................... Conditionally add switch buttons There should be no switch button if the other editor isn't supported. Since the switch-button under wikitext textarea may not be added, I also had to change how that border is added. I've added it on the parent div, where textarea & switcher are both children of. With or without the switcher, there'll be a complete border. I'm not too happy with the editors depending on one another (that sort of logic should probably be outside of editors) but hey, it works. VE depends on none through Resources.php. None depends in VE in JS. I couldn't add VE as a dependency because VE has no mobile target. Since VE won't work on mobile, the resource won't be able to load in JS & the switcher won't be attached. Meanwhile also slightly cleaned up some jsdoc Bug: T94676 Change-Id: Ia4a0d4e2b10564afe68a567fd5fa93b20324b7dd (cherry picked from commit 3e0cbc544e825a2f7ba3b9952669d4d1ed1a1ac7) --- M Resources.php M handlebars/flow_editor_switcher.partial.handlebars M i18n/en.json M i18n/qqq.json M modules/editor/editors/ext.flow.editors.none.js M modules/editor/editors/visualeditor/ext.flow.editors.visualeditor.js M modules/editor/editors/visualeditor/mw.flow.ve.Target.js M modules/editor/ext.flow.editor.js M modules/engine/components/board/features/flow-board-switcheditor.js M modules/styles/board/editor-switcher.less 10 files changed, 73 insertions(+), 61 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Flow refs/changes/58/201358/1 diff --git a/Resources.php b/Resources.php index 1e39a70..9511d0a 100644 --- a/Resources.php +++ b/Resources.php @@ -239,6 +239,7 @@ "flow-board-header-browse-topics-link", // editor switching "flow-wikitext-editor-help", + "flow-wikitext-editor-help-and-preview", "flow-wikitext-editor-help-uses-wikitext", "flow-wikitext-editor-help-preview-the-result", ), @@ -478,6 +479,7 @@ 'site', 'user', 'mediawiki.api', + 'ext.flow.editors.none', // needed to figure out if that editor is supported, for switch button ), 'messages' => array( 'flow-ve-mention-context-item-label', diff --git a/handlebars/flow_editor_switcher.partial.handlebars b/handlebars/flow_editor_switcher.partial.handlebars index ad0f49c..812b093 100644 --- a/handlebars/flow_editor_switcher.partial.handlebars +++ b/handlebars/flow_editor_switcher.partial.handlebars @@ -3,15 +3,16 @@ {{! this message is manually constructed in ext.flow.editors.none.js !}} <p class="flow-wikitext-editor-help">{{html help_text}}</p> - <a href="#" - title="{{l10n "flow-wikitext-switch-editor-tooltip"}}" - class="mw-ui-button mw-ui-constructive flow-js flow-editor-color" - data-flow-interactive-handler="switchEditor" - data-flow-load-handler="requiresVisualEditor" - data-flow-target="< form textarea" - > - </> - </a> + {{#if enable_switcher}} + <a href="#" + title="{{l10n "flow-wikitext-switch-editor-tooltip"}}" + class="mw-ui-button mw-ui-constructive flow-js flow-editor-color" + data-flow-interactive-handler="switchEditor" + data-flow-target="< form textarea" + > + </> + </a> + {{/if}} </div> <div class="flow-ui-clear"></div> </div> diff --git a/i18n/en.json b/i18n/en.json index 7099121..a24107c 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -540,7 +540,8 @@ "flow-ve-mention-tool-title": "Mention a user", "flow-ve-mention-template": "ping", "flow-ve-mention-inspector-invalid-user": "The username '$1' is not registered.", - "flow-wikitext-editor-help": "Wikitext $1 and you can $2 anytime.", + "flow-wikitext-editor-help": "Wikitext $1.", + "flow-wikitext-editor-help-and-preview": "Wikitext $1 and you can $2 anytime.", "flow-wikitext-editor-help-uses-wikitext": "[[mw:Help:Formatting|uses markup]]", "flow-wikitext-editor-help-preview-the-result": "preview the result", "flow-wikitext-switch-editor-tooltip": "Switch to VisualEditor", diff --git a/i18n/qqq.json b/i18n/qqq.json index 9460e51..d35b753 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -542,7 +542,8 @@ "flow-ve-mention-tool-title": "Title text for the user mention tool on Flow's VisualEditor toolbar.", "flow-ve-mention-template": "Name of on-wiki template used for user mentions. The template should accept a call in the form <nowiki>{{templatename|Username}}</nowiki>, to mention Username. It will use content language.", "flow-ve-mention-inspector-invalid-user": "Error shown when the poster attempts to mention a user that does not exist. Parameters:\n$1: Username. The username is not registered; thus, gender is unknown.", - "flow-wikitext-editor-help": "Text shown at the bottom of a wikitext editing box", + "flow-wikitext-editor-help": "Text shown at the bottom of a wikitext editing box when visualeditor is not available to switch to", + "flow-wikitext-editor-help-and-preview": "Text shown at the bottom of a wikitext editing box when visualeditor is available to switch to", "flow-wikitext-editor-help-uses-wikitext": "Link to wikitext help. See also flow-wikitext-editor-help", "flow-wikitext-editor-help-preview-the-result": "Text of link that will switch from wikitext editor to an html preview. See also flow-wikitext-editor-help", "flow-wikitext-switch-editor-tooltip": "Tooltip for button shown below a wikitext editor to switch to VisualEditor.", diff --git a/modules/editor/editors/ext.flow.editors.none.js b/modules/editor/editors/ext.flow.editors.none.js index 06c33de..c869943 100644 --- a/modules/editor/editors/ext.flow.editors.none.js +++ b/modules/editor/editors/ext.flow.editors.none.js @@ -24,7 +24,9 @@ this.$node.keyup( this.autoExpand ); this.autoExpand.call( this.$node.get( 0 ) ); - this.attachSwitcher(); + // only attach switcher if VE is actually supported + // code to figure out if that VE is supported is in that module + mw.loader.using( 'ext.flow.editors.visualeditor', $.proxy( this.attachControls, this ) ); }; OO.inheritClass( mw.flow.editors.none, mw.flow.editors.AbstractEditor ); @@ -120,25 +122,41 @@ } }; - mw.flow.editors.none.prototype.attachSwitcher = function() { - var board = mw.flow.getPrototypeMethod( 'board', 'getInstanceByElement' )( this.$node ), + mw.flow.editors.none.prototype.attachControls = function() { + var $preview, $controls, templateArgs, + board = mw.flow.getPrototypeMethod( 'board', 'getInstanceByElement' )( this.$node ); + + if ( mw.flow.editors.visualeditor.static.isSupported() ) { $preview = $( '<a>' ).attr( { href: '#', 'data-flow-interactive-handler': 'switchEditor', 'data-flow-target': '< form textarea' - } ).text( mw.message( 'flow-wikitext-editor-help-preview-the-result' ).text() ), - $switcher = $( mw.flow.TemplateEngine.processTemplateGetFragment( - 'flow_editor_switcher.partial', - { - help_text: mw.message( 'flow-wikitext-editor-help' ).params( [ - mw.message( 'flow-wikitext-editor-help-uses-wikitext' ).parse(), - $preview[0].outerHTML - ] ).parse() - } - ) ).children(); + } ).text( mw.message( 'flow-wikitext-editor-help-preview-the-result' ).text() ); + + templateArgs = { + enable_switcher: true, + help_text: mw.message( 'flow-wikitext-editor-help-and-preview' ).params( [ + mw.message( 'flow-wikitext-editor-help-uses-wikitext' ).parse(), + $preview[0].outerHTML + ] ).parse() + }; + } else { + // render just a basic help text + templateArgs = { + enable_switcher: false, + help_text: mw.message( 'flow-wikitext-editor-help' ).params( [ + mw.message( 'flow-wikitext-editor-help-uses-wikitext' ).parse() + ] ).parse() + }; + } + + $controls = $( mw.flow.TemplateEngine.processTemplateGetFragment( + 'flow_editor_switcher.partial', + templateArgs + ) ).children(); // insert help information + editor switcher, and make it interactive - board.emitWithReturn( 'makeContentInteractive', $switcher.insertAfter( this.$node ) ); + board.emitWithReturn( 'makeContentInteractive', $controls.insertAfter( this.$node ) ); }; mw.flow.editors.none.prototype.focus = function() { diff --git a/modules/editor/editors/visualeditor/ext.flow.editors.visualeditor.js b/modules/editor/editors/visualeditor/ext.flow.editors.visualeditor.js index fec83ee..0bdad04 100644 --- a/modules/editor/editors/visualeditor/ext.flow.editors.visualeditor.js +++ b/modules/editor/editors/visualeditor/ext.flow.editors.visualeditor.js @@ -191,13 +191,16 @@ // ES5 support, from es5-skip.js ( function () { // This test is based on 'use strict', - // which is inherited from the top-leve function. + // which is inherited from the top-level function. return !this && !!Function.prototype.bind; }() ) && // Since VE commit e2fab2f1ebf2a28f18b8ead08c478c4fc95cd64e, SVG is required document.createElementNS && - document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ).createSVGRect + document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ).createSVGRect && + + // ve needs to be turned on as a valid editor + mw.config.get( 'wgFlowEditorList' ).indexOf( 'visualeditor' ) !== -1 ); }; diff --git a/modules/editor/editors/visualeditor/mw.flow.ve.Target.js b/modules/editor/editors/visualeditor/mw.flow.ve.Target.js index 8e8dc15..2925164 100644 --- a/modules/editor/editors/visualeditor/mw.flow.ve.Target.js +++ b/modules/editor/editors/visualeditor/mw.flow.ve.Target.js @@ -37,9 +37,11 @@ { include: [ 'flowMention' ] } ]; - mw.flow.ve.Target.static.actionGroups = [ - { include: [ 'flowSwitchEditor' ] } - ]; + if ( mw.flow.editors.none.static.isSupported() ) { + mw.flow.ve.Target.static.actionGroups = [ + { include: [ 'flowSwitchEditor' ] } + ]; + } // Methods diff --git a/modules/editor/ext.flow.editor.js b/modules/editor/ext.flow.editor.js index 351fc7c..95af71d 100644 --- a/modules/editor/ext.flow.editor.js +++ b/modules/editor/ext.flow.editor.js @@ -192,6 +192,7 @@ * and call switchEditor for each iteration. * * @param {jQuery} $node + * @param {string} desiredEditor * @return {jQuery.Promise} Will resolve once editor instance is loaded */ switchEditor: function ( $node, desiredEditor ) { diff --git a/modules/engine/components/board/features/flow-board-switcheditor.js b/modules/engine/components/board/features/flow-board-switcheditor.js index b68de6f..b08eb7b 100644 --- a/modules/engine/components/board/features/flow-board-switcheditor.js +++ b/modules/engine/components/board/features/flow-board-switcheditor.js @@ -30,8 +30,8 @@ * code for switching, so this is only run by clicking the switch button from 'none'. * If we add more editors later this will have to be revisited. * - * @param {Event} - * @returns {$.Promise} + * @param {Event} event + * @returns {jQuery.Promise} */ FlowBoardComponentSwitchEditorFeatureMixin.UI.events.interactiveHandlers.switchEditor = function ( event ) { var $this = $( this ), @@ -45,25 +45,6 @@ } return mw.flow.editor.switchEditor( $target, 'visualeditor' ); - }; - - /** - * Hide wikitext editor switchEditor controls on load if visualeditor is not available. - * - * @param {jQuery} event - */ - FlowBoardComponentSwitchEditorFeatureMixin.UI.events.loadHandlers.requiresVisualEditor = function ( $switcher ) { - if ( mw.config.get( 'wgFlowEditorList' ).indexOf( 'visualeditor' ) === -1 ) { - $switcher.hide(); - } else { - // this just pulls in a small bit of code, the full VE is not pulled in until - // the editor is initialized. - mw.loader.using( 'ext.flow.editors.visualeditor', function() { - if ( !mw.flow.editors.visualeditor.static.isSupported() ) { - $switcher.hide(); - } - } ); - } }; // Mixin to FlowComponent diff --git a/modules/styles/board/editor-switcher.less b/modules/styles/board/editor-switcher.less index 5c52d56..d1cdd18 100644 --- a/modules/styles/board/editor-switcher.less +++ b/modules/styles/board/editor-switcher.less @@ -16,18 +16,20 @@ } .flow-editor { - .flow-switcher-controls { - background-color: white; + // because we're attaching switcher controls below the textarea & we + // want them to look unified with the textarea, we'll have to take away + // it's border and re-apply on the parent node that contains both + &.flow-editor-none { border: 1px solid @colorFieldBorder; - border-top: 0; - padding: .25em; - } - textarea { - border-bottom: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - margin-bottom: 0; + textarea { + border: 0; + } + + .flow-switcher-controls { + background-color: white; + padding: .25em; + } } // would prefer textarea:not(.flow-input-compressed) above, but ie8 wont do it -- To view, visit https://gerrit.wikimedia.org/r/201358 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ia4a0d4e2b10564afe68a567fd5fa93b20324b7dd Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/Flow Gerrit-Branch: wmf/1.25wmf24 Gerrit-Owner: EBernhardson <ebernhard...@wikimedia.org> Gerrit-Reviewer: Matthias Mullie <mmul...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits