Harej has uploaded a new change for review.
https://gerrit.wikimedia.org/r/322229
Change subject: Adding hub image selector and embedding icon and color
selectors in proper places.
......................................................................
Adding hub image selector and embedding icon and color selectors in proper
places.
Adds VisualEditor as a dependency.
Change-Id: I1c2a2f028f647390ec8cd98741c9b2dcf5bf7e31
---
M extension.json
M i18n/en.json
M i18n/qqq.json
M includes/CollaborationHubContentEditor.php
M includes/SpecialCreateCollaborationHub.php
M modules/ext.CollaborationKit.colour.js
A modules/ext.CollaborationKit.hubimage.js
M modules/ext.CollaborationKit.icon.js
8 files changed, 155 insertions(+), 16 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/CollaborationKit
refs/changes/29/322229/1
diff --git a/extension.json b/extension.json
index c120287..ea49f1f 100644
--- a/extension.json
+++ b/extension.json
@@ -111,6 +111,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 62f7fb9..c072ca0 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -92,6 +92,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 51ea868..4a9d86c 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -92,6 +92,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
index 8094556..66c7df9 100644
--- a/includes/CollaborationHubContentEditor.php
+++ b/includes/CollaborationHubContentEditor.php
@@ -9,6 +9,13 @@
// 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;
+
+ // Nice JavaScript buttons
+ $out = $this->getContext()->getOutput();
+ $out->addModules( 'ext.CollaborationKit.colour' );
+ $out->addModules( 'ext.CollaborationKit.hubimage' );
+ $out->addModuleStyles(
'ext.CollaborationKit.colourbrowser.styles' );
+ $out->addJsConfigVars( 'wgCollaborationKitColourList',
CollaborationHubContent::getThemeColours() );
}
/**
diff --git a/includes/SpecialCreateCollaborationHub.php
b/includes/SpecialCreateCollaborationHub.php
index 0551cdd..d0153b0 100644
--- a/includes/SpecialCreateCollaborationHub.php
+++ b/includes/SpecialCreateCollaborationHub.php
@@ -19,8 +19,10 @@
public function execute( $par ) {
$out = $this->getContext()->getOutput();
$out->addModules( 'ext.CollaborationKit.colour' );
+ $out->addModules( 'ext.CollaborationKit.hubimage' );
$out->addModuleStyles(
'ext.CollaborationKit.colourbrowser.styles' );
$out->addJsConfigVars( 'wgCollaborationKitColourList',
CollaborationHubContent::getThemeColours() );
+
parent::execute( $par );
}
@@ -45,7 +47,7 @@
// Hub image/icon thing
'icon' => [
'type' => 'text',
- 'cssclass' => 'mw-ck-icon-input',
+ 'cssclass' => 'mw-ck-hubimageinput',
'label-message' =>
'collaborationkit-createhub-image',
],
];
@@ -56,7 +58,7 @@
}
$fields['colour'] = [
'type' => 'select',
- 'cssclass' => 'mw-ck-colour-input',
+ 'cssclass' => 'mw-ck-colourinput',
'id' => 'wpCollabHubColour',
'label-message' => 'collaborationkit-createhub-colour',
'options' => $this->getOptions( $colours ),
diff --git a/modules/ext.CollaborationKit.colour.js
b/modules/ext.CollaborationKit.colour.js
index 9f49bd7..4c79ec6 100644
--- a/modules/ext.CollaborationKit.colour.js
+++ b/modules/ext.CollaborationKit.colour.js
@@ -85,7 +85,8 @@
);
// Set form value
- $( '#wpCollabHubColour select' ).val( toAppend
);
+ $( 'select#mw-ck-colourinput option[value=' +
toAppend + '], div.mw-ck-colourinput select option[value=' + toAppend + ']' )
+ .attr( 'selected', 'selected' );
dialog.close( { action: action } );
} );
@@ -131,11 +132,11 @@
colourBrowserButton.setLabel( mw.msg(
'collaborationkit-colour-launchbutton' ) );
colourBrowserButton.on( 'click', openItUp );
- curColour = $( '#wpCollabHubColour select option:selected'
).val();
+ curColour = $( 'select#mw-ck-colourinput option:selected,
div.mw-ck-colourinput select option:selected' ).val();
- $( '#wpCollabHubColour div span' ).css( 'display', 'none' );
- $( '#wpCollabHubColour' ).addClass( 'colour-browser-field' );
- $( '#wpCollabHubColour' ).append(
+ $( 'select#mw-ck-colourinput, div.oo-ui-fieldLayout-field
div.mw-ck-colourinput' ).css( 'display', 'none' );
+ $( '.mw-ck-colourinput' ).addClass( 'colour-browser-field' );
+ $( '.mw-ck-colourinput' ).append(
$( '<div class="colourPreview
mw-ck-colourblock-container"></div>' )
.append( getColourBlock( curColour ) )
.append(
@@ -146,7 +147,6 @@
.append( colourBrowserButton.$element )
)
);
- $( '#wpCollabHubColour select' ).css( 'display', 'none' );
};
$( setupPage );
diff --git a/modules/ext.CollaborationKit.hubimage.js
b/modules/ext.CollaborationKit.hubimage.js
new file mode 100644
index 0000000..19249f2
--- /dev/null
+++ b/modules/ext.CollaborationKit.hubimage.js
@@ -0,0 +1,107 @@
+( 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, div#wpCollabHubImage' )
+ .append( '<img class="hubimagePreview" /><div
class="hubimageBrowserButton">' )
+ .append( hubimageBrowserButton.$element )
+ .append( '</div>' );
+ $( 'div.mw-ck-hubimageinput input, div#wpCollabHubImage input' ).css(
'display', 'none' );
+
+ // Load current hub image
+ if ( $( 'input#wpCollabHubImage' ).val() !== undefined ) {
+ currentImageFilename = 'File:' + $( 'input#wpCollabHubImage'
).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' )
+ .css( 'display', 'block' );
+ }
+ );
+ }
+
+} )( jQuery, mediaWiki, OO );
diff --git a/modules/ext.CollaborationKit.icon.js
b/modules/ext.CollaborationKit.icon.js
index f82e0e0..56ce417 100644
--- a/modules/ext.CollaborationKit.icon.js
+++ b/modules/ext.CollaborationKit.icon.js
@@ -29,7 +29,7 @@
divElm = $( '<div></div>' )
.addClass(
'mw-ck-iconbrowser-iconcontainer' )
.append( $( '<div></div>' )
- .addClass( 'mw-ckicon-' +
iconList[ i ] )
+ .addClass( 'mw-ck-icon-' +
iconList[ i ] )
.addClass(
'mw-ck-iconbrowser-icon' )
);
@@ -61,10 +61,10 @@
// Generate preview
$( '.iconPreview' )
- .addClass( 'mw-ckicon-'
+ toAppend )
+ .addClass(
'mw-ck-icon-' + toAppend )
.css( 'display',
'block' );
// Set form value
- $( '.mw-ck-iconinput input'
).val( toAppend );
+ $( '.mw-ck-icon-input input'
).val( toAppend );
dialog.close( { action: action
} );
} );
@@ -99,11 +99,11 @@
iconBrowserButton.setLabel( mw.msg(
'collaborationkit-icon-launchbutton' ) );
iconBrowserButton.on( 'click', openItUp );
- $( 'div.mw-ck-iconinput' ).addClass( 'icon-browser-field' );
- $( 'div.mw-ck-iconinput .oo-ui-labelElement-label' ).css( 'display',
'none' );
- $( 'div.mw-ck-iconinput .oo-ui-fieldLayout-field' ).css( 'display',
'none' );
- $( 'div.mw-ck-iconinput' )
- .append( '<div class="iconPreview" style="display:none"></div>'
)
+ $( 'div.mw-ck-icon-input' ).addClass( 'icon-browser-field' );
+ $( 'div.mw-ck-icon-input div' ).css( 'display', 'none' );
+ $( 'div.mw-ck-icon-input' )
+ .append( '<div class="iconPreview
mw-ck-icon-circlestar"></div>' )
.append( iconBrowserButton.$element );
+
} )( jQuery, mediaWiki, OO );
--
To view, visit https://gerrit.wikimedia.org/r/322229
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I1c2a2f028f647390ec8cd98741c9b2dcf5bf7e31
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
