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