Harej has uploaded a new change for review. https://gerrit.wikimedia.org/r/317382
Change subject: Hub image selector. ...................................................................... Hub image selector. This introduces VisualEditor as a dependency. So it goes. Bug: T140165 Change-Id: Ifc629ad11550253ea6a5ff72547e41e266bcba2f --- M extension.json M i18n/en.json M i18n/qqq.json A includes/CollaborationHubContentEditor.php M includes/SpecialCreateCollaborationHub.php A modules/ext.CollaborationKit.hubimage.js 6 files changed, 346 insertions(+), 1 deletion(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/CollaborationKit refs/changes/82/317382/1 diff --git a/extension.json b/extension.json index f8145af..6e82298 100644 --- a/extension.json +++ b/extension.json @@ -103,6 +103,23 @@ "cancel" ] }, + "ext.CollaborationKit.hubimage": { + "scripts": "ext.CollaborationKit.hubimage.js", + "dependencies": [ + "oojs-ui", + "oojs-ui.styles.icons-movement", + "mediawiki.widgets", + "mediawiki.widgets.UserInputWidget", + "ext.visualEditor.mwimage", + "mediawiki.api" + ], + "messages": [ + "collaborationkit-hubimage-browser", + "collaborationkit-hubimage-select", + "collaborationkit-hubimage-launchbutton", + "cancel" + ] + }, "ext.CollaborationKit.colour": { "scripts": "ext.CollaborationKit.colour.js", "dependencies": [ diff --git a/i18n/en.json b/i18n/en.json index 6813fa5..086e3da 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -86,6 +86,9 @@ "collaborationkit-colour-launchbutton": "Browse colors", "collaborationkit-colour-browser": "Color browser", "collaborationkit-colour-select": "Select", + "collaborationkit-hubimage-launchbutton": "Browse images", + "collaborationkit-hubimage-browser": "Media browser", + "collaborationkit-hubimage-select": "Select", "collaborationkit-subpage-toc-label": "Part of a project:", "collaborationkit-red1": "Dark red", "collaborationkit-red2": "Red", diff --git a/i18n/qqq.json b/i18n/qqq.json index 55802ad..0a4ebb3 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -86,6 +86,9 @@ "collaborationkit-colour-launchbutton": "Button label for button that launches the hub colour browser", "collaborationkit-colour-browser": "Header label for the hub colour browser", "collaborationkit-colour-select": "Button for selecting a colour in the hub colour browser", + "collaborationkit-hubimage-launchbutton": "Button label for button that launches the hub image browser", + "collaborationkit-hubimage-browser": "Header label for the hub image browser", + "collaborationkit-hubimage-select": "Button for selecting an image in the hub image browser", "collaborationkit-subpage-toc-label": "Label for the toc on a Collaboration Hub subpage", "collaborationkit-red1": "Color label", "collaborationkit-red2": "Color label", diff --git a/includes/CollaborationHubContentEditor.php b/includes/CollaborationHubContentEditor.php new file mode 100644 index 0000000..4bacd07 --- /dev/null +++ b/includes/CollaborationHubContentEditor.php @@ -0,0 +1,210 @@ +<?php +/** + * @todo Unicode unsafe browsers? + */ +class CollaborationHubContentEditor extends EditPage { + + function __construct( $page ) { + parent::__construct( $page ); + // Make human readable the default format for editing, but still + // save as json. Can be overriden by url ?format=application/json param. + $this->contentFormat = CollaborationHubContentHandler::FORMAT_WIKI; + } + + /** + * Build and return the aossociative array for the content source field. + * @param $mapping array + * @return array + */ + protected function getOptions( $mapping ) { + $options = []; + foreach ( $mapping as $msgKey => $option ) { + $options[] = [ 'label' => wfMessage( $msgKey )->escaped(), 'data' => $option ]; + } + return $options; + } + + /** + * @param $parts array + * @return array + */ + protected function getFormFields( $parts ) { + + $fields = [ + // Display name can be different from page title + 'display_name' => new OOUI\FieldLayout( + new OOUI\TextInputWidget( [ + 'name' => 'wpCollabHubDisplayName', + 'id' => 'wpCollabHubDisplayName', + 'type' => 'text', + 'cssclass' => 'mw-ck-displayinput', + 'value' => $parts[0] + ] ), + [ + 'label' => wfMessage( 'collaborationkit-hubedit-displayname' )->text(), + 'align' => 'top' + ] ), + 'introduction' => new OOUI\FieldLayout( + new OOUI\TextInputWidget( [ + 'multiline' => true, + 'name' => 'wpCollabHubIntroduction', + 'id' => 'wpCollabHubIntroduction', + 'type' => 'textarea', + 'rows' => 5, + 'cssclass' => 'mw-ck-introductioninput', + 'value' => $parts[1] + ] ), + [ + 'label' => wfMessage( 'collaborationkit-hubedit-introduction' )->text(), + 'align' => 'top' + ] ), + 'footer' => new OOUI\FieldLayout( + new OOUI\TextInputWidget( [ + 'multiline' => true, + 'name' => 'wpCollabHubFooter', + 'id' => 'wpCollabHubFooter', + 'type' => 'textarea', + 'rows' => 5, + 'cssclass' => 'mw-ck-introductioninput', + 'value' => $parts[2] + ] ), + [ + 'label' => wfMessage( 'collaborationkit-hubedit-footer' )->text(), + 'align' => 'top' + ] ), + // Hub image/icon thing + 'image' => new OOUI\FieldLayout( + new OOUI\TextInputWidget( [ + 'name' => 'wpCollabHubImage', + 'id' => 'wpCollabHubImage', + 'type' => 'text', + 'cssclass' => 'mw-ck-hubimageinput', + 'value' => $parts[3] + ] ), + [ + 'label' => wfMessage( 'collaborationkit-hubedit-image' )->text(), + 'align' => 'top' + ] ), + ]; + // Colours for the hub styles + $colours = []; + foreach ( CollaborationHubContent::getThemeColours() as $colour ) { + $colours[ 'collaborationkit-' . $colour ] = $colour; + } + + if ( $parts[4] == '' ) { + $selectedColour = 'blue5'; + } else { + $selectedColour = $parts[4]; + } + + $fields['colour'] = new OOUI\FieldLayout( + new OOUI\DropdownInputWidget( [ + 'name' => 'wpCollabHubColour', + 'id' => 'wpCollabHubColour', + 'type' => 'select', + 'options' => $this->getOptions( $colours ), + 'cssclass' => 'mw-ck-colourinput', + 'value' => $selectedColour + ] ), + [ + 'label' => wfMessage( 'collaborationkit-hubedit-colour' )->text(), + 'align' => 'top' + ] ); + + if ( $parts[5] == '' ) { + $includedContent = ''; + } else { + $includedContent = $parts[5]; + } + + $fields['content'] = new OOUI\FieldLayout( + new OOUI\TextInputWidget( [ + 'multiline' => true, + 'name' => 'wpCollabHubContent', + 'id' => 'wpCollabHubContent', + 'type' => 'textarea', + 'rows' => 10, + 'cssclass' => 'mw-ck-introductioninput', + 'value' => $includedContent + ] ), + [ + 'label' => wfMessage( 'collaborationkit-hubedit-content' )->text(), + 'align' => 'top' + ] ); + + return $fields; + } + + /** + * Renders and adds the editing form to the parser output. + */ + protected function showContentForm() { + if ( $this->contentFormat !== CollaborationHubContentHandler::FORMAT_WIKI ) { + return parent::showContentForm(); + } + + $parts = explode( CollaborationHubContent::HUMAN_DESC_SPLIT, $this->textbox1, 6 ); + if ( count( $parts ) !== 6 ) { + return parent::showContentForm(); + } + + $out = RequestContext::getMain()->getOutput(); + $pageLang = $this->getTitle()->getPageLanguage(); + + $formFields = $this->getFormFields( $parts ); + + $htmlForm = new OOUI\FieldsetLayout( [ 'items' => $formFields ] ); + $out->enableOOUI(); + $out->addHtml( $htmlForm ); + } + + /** + * Required as a callback by the parent class, but not used as + * we have validation logic elsewhere that works just fine. + * @param $formData + */ + static function trySubmit( $formData ) { + return true; + } + + /** + * Converts input from the editing form into the text/x-collabkit + * serialization used for processing the edit. + * @param &$request WebRequest + * @return string|null + */ + protected function importContentFormData( &$request ) { + $format = $request->getVal( 'format', CollaborationListContentHandler::FORMAT_WIKI ); + if ( $format !== CollaborationListContentHandler::FORMAT_WIKI ) { + return parent::importContentFormData( $request ); + } + $displayname = trim( $request->getText( 'wpCollabHubDisplayName' ) ); + if ( $displayname === null ) { + // Only 1 textbox? + return parent::importContentFormData( $request ); + } + + $introduction = trim( $request->getText( 'wpCollabHubIntroduction', '' ) ); + $footer = trim( $request->getText( 'wpCollabHubFooter', '' ) ); + $image = trim( $request->getText( 'wpCollabHubImage', '' ) ); + $colour = trim( $request->getText( 'wpCollabHubColour', '' ) ); + $content = trim( $request->getText( 'wpCollabHubContent', '' ) ); + + return $displayname + . CollaborationHubContent::HUMAN_DESC_SPLIT + . $introduction + . CollaborationHubContent::HUMAN_DESC_SPLIT + . $footer + . CollaborationHubContent::HUMAN_DESC_SPLIT + . $image + . CollaborationHubContent::HUMAN_DESC_SPLIT + . $colour + . CollaborationHubContent::HUMAN_DESC_SPLIT + . $content; + } + + protected function getDisplayFormat() { + return 'ooui'; + } +} diff --git a/includes/SpecialCreateCollaborationHub.php b/includes/SpecialCreateCollaborationHub.php index 26c761b..98e2c39 100644 --- a/includes/SpecialCreateCollaborationHub.php +++ b/includes/SpecialCreateCollaborationHub.php @@ -18,9 +18,15 @@ */ public function execute( $par ) { $out = $this->getContext()->getOutput(); + + // For the colour browser $out->addModules( 'ext.CollaborationKit.colour' ); $out->addModuleStyles( 'ext.CollaborationKit.colourbrowser.styles' ); $out->addJsConfigVars( 'wgCollaborationKitColourList', CollaborationHubContent::getThemeColours() ); + + // For the hub image selector (think VisualEditor media browser) + $out->addModules( 'ext.CollaborationKit.hubimage' ); + parent::execute( $par ); } @@ -45,7 +51,7 @@ // Hub image/icon thing 'icon' => [ 'type' => 'text', - 'cssclass' => 'mw-ck-iconinput', + 'cssclass' => 'mw-ck-hubimageinput', 'label-message' => 'collaborationkit-createhub-image', ], ]; diff --git a/modules/ext.CollaborationKit.hubimage.js b/modules/ext.CollaborationKit.hubimage.js new file mode 100644 index 0000000..fd3262e --- /dev/null +++ b/modules/ext.CollaborationKit.hubimage.js @@ -0,0 +1,106 @@ +( function ( $, mw, OO ) { + + // Subclass ProcessDialog. + function ProcessDialog( config ) { + ProcessDialog.super.call( this, config ); + } + OO.inheritClass( ProcessDialog, OO.ui.ProcessDialog ); + + // Specify a static title and actions. + ProcessDialog.static.title = mw.msg( 'collaborationkit-hubimage-browser' ); + ProcessDialog.static.actions = [ + { action: 'save', label: mw.msg( 'collaborationkit-hubimage-select' ), flags: 'primary' }, + { label: mw.msg( 'cancel' ), flags: 'safe' } + ]; + + // Use the initialize() method to add content to the dialog's $body, + // to initialize widgets, and to set up event handlers. + ProcessDialog.prototype.initialize = function () { + ProcessDialog.super.prototype.initialize.apply( this, arguments ); + + this.content = new ve.ui.MWMediaSearchWidget(); + this.$body.append( this.content.$element ); + }; + + // In the event "Select" is pressed + ProcessDialog.prototype.getActionProcess = function ( action ) { + var dialog, openItUp, windowManager, processDialog, + currentImageFilename, currentImage, hubimageBrowserButton; + + dialog = this; + if ( action ) { + return new OO.ui.Process( function () { + fileObj = dialog.content.getResults().getSelectedItem().getData(); + fileUrl = fileObj.thumburl; + fileTitle = new mw.Title( fileObj.title ); + fileTitle = fileTitle.title + '.' + fileTitle.ext; + + // Generate preview + $( 'img.hubimagePreview' ) + .attr( 'style', 'display:block' ) + .attr( 'src', fileUrl ) + .attr( 'width', '200px' ) + .css( 'margin-bottom', '10px' ); + + // Set form value + $( '.mw-ck-hubimageinput input, div#wpCollabHubImage input' ).val( fileTitle ); + + dialog.close( { action: action } ); + } ); + } + // Fallback to parent handler. + return ProcessDialog.super.prototype.getActionProcess.call( this, action ); + }; + + // Get dialog height. + ProcessDialog.prototype.getBodyHeight = function () { + return 600; + }; + + // Create and append the window manager. + openItUp = function () { + windowManager = new OO.ui.WindowManager(); + $( 'body' ).append( windowManager.$element ); + + // Create a new dialog window. + processDialog = new ProcessDialog( { + size: 'large' + } ); + + // Add windows to window manager using the addWindows() method. + windowManager.addWindows( [ processDialog ] ); + + // Open the window. + windowManager.openWindow( processDialog ); + }; + + hubimageBrowserButton = new OO.ui.ButtonWidget(); + hubimageBrowserButton.setLabel( mw.msg( 'collaborationkit-hubimage-launchbutton' ) ); + hubimageBrowserButton.on( 'click', openItUp ); + + $( 'div.mw-ck-hubimageinput, div#wpCollabHubImage' ).addClass( 'hubimage-browser-field' ); + $( 'div.mw-ck-hubimageinput label span, div#wpCollabHubImage' ) + .append( '<img class="hubimagePreview" /><div class="hubimageBrowserButton">' ) + .append( hubimageBrowserButton.$element ) + .append( '</div>' ); + $( 'div.mw-ck-hubimageinput .oo-ui-fieldLayout-field, div#wpCollabHubImage input' ).css( 'display', 'none' ); + + // Load current hub image + if ( $( 'div#wpCollabHubImage input' ).val() !== undefined ) { + currentImageFilename = 'File:' + $( 'div#wpCollabHubImage input' ).val(); + currentImage = new mw.Api() + .get( { + action: 'query', + titles: currentImageFilename, + prop: 'imageinfo', + iiprop: 'url', + iiurlwidth: 200 } ) + .done( function ( data ) { + $( 'img.hubimagePreview' ) + .attr( 'src', data.query.pages[ -1 ].imageinfo[ 0 ].thumburl ) + .css( 'margin-bottom', '10px' ); + } + ); + } + +} )( jQuery, mediaWiki, OO ); \ No newline at end of file -- To view, visit https://gerrit.wikimedia.org/r/317382 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ifc629ad11550253ea6a5ff72547e41e266bcba2f Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/CollaborationKit Gerrit-Branch: master Gerrit-Owner: Harej <jamesmh...@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits