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
