Spage has uploaded a new change for review.
https://gerrit.wikimedia.org/r/93525
Change subject: Demonstrate use of oo-ui
......................................................................
Demonstrate use of oo-ui
Add basic oojs-ui dependency, ext.agora.ui module, and use them to
create a dialog, factory, windowSet, and insert a button in the HTML
Change-Id: I0bfacb92b3dfca1c7ec2d76df1c162e237a77735
---
A .jshintrc
M Agora.php
M SpecialAgora.php
A modules/js/ext.agora.ui.js
4 files changed, 130 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Agora
refs/changes/25/93525/1
diff --git a/.jshintrc b/.jshintrc
new file mode 100644
index 0000000..4043bcf
--- /dev/null
+++ b/.jshintrc
@@ -0,0 +1,18 @@
+{
+ /* Common */
+
+ // Enforcing
+ "camelcase": true,
+ // Environment
+ "browser": true,
+ "jquery": true,
+ // Legacy
+ "nomen": true,
+
+ "predef": [
+ "mediaWiki",
+ "jQuery",
+ "QUnit",
+ "OO"
+ ]
+}
diff --git a/Agora.php b/Agora.php
index 021a643..2d1ffb4 100644
--- a/Agora.php
+++ b/Agora.php
@@ -37,6 +37,10 @@
),
'position' => 'top',
),
+ 'ext.agora.ui' => $wgAgoraResourceTemplate + array(
+ 'scripts' => 'js/ext.agora.ui.js',
+ 'dependencies' => 'oojs-ui',
+ ),
);
/* Default Configuration */
diff --git a/SpecialAgora.php b/SpecialAgora.php
index c0d9f8d..c4da4ef 100644
--- a/SpecialAgora.php
+++ b/SpecialAgora.php
@@ -123,7 +123,7 @@
$a['simpletextfield'] = array(
'label' => 'Simple validating Text Field',
'class' => 'HTMLTextField',
- 'validation-callback' => array('SpecialAgora',
'validateSimpleTextField'), #Calling validateSimpteTextField() within
SpecialMyForm
+ 'validation-callback' => array('SpecialAgora',
'validateSimpleTextField'), #Calling validateSimpleTextField() within
SpecialMyForm
);
return $a;
@@ -131,6 +131,8 @@
public function alterForm( HTMLForm $form ) {
+ $this->getOutput()->addModules( 'ext.agora.ui' );
+
// We want to configure the form according to the values of its
control fields.
// But this runs before the form calls onSubmit() with what the
user chose!
$this->affectTheForm( $form );
diff --git a/modules/js/ext.agora.ui.js b/modules/js/ext.agora.ui.js
new file mode 100644
index 0000000..3a85cd1
--- /dev/null
+++ b/modules/js/ext.agora.ui.js
@@ -0,0 +1,105 @@
+/* Test using oo.ui */
+( function ( mw, $ ) {
+ mw.agora = {};
+
+ // We want to show a modal dialog prompting the user to enter a reason
for
+ // some action performed in the main form.
+ // To do so we'll need
+ // - a reasonDialog class that creates an instance of itself
+ // - a dialog factory that knows how to create all the different
dialogs used by the app.
+ // - a window set to manage our modal dialogs, actually put them on the
+ // screen above an overlay.
+ //
+
+ /* Window set for all modal dialogs */
+
+ mw.agora.windowSet = new OO.ui.WindowSet( mw.agora.dialogs );
+ $( 'body' ).append( mw.agora.windowSet.$ );
+
+ /* Dialog factory for all this app's dialog */
+
+ mw.agora.dialogs = new OO.ui.DialogFactory();
+
+ /**
+ * Dialog class for providing a reason.
+ *
+ */
+ mw.agora.reasonDialog = function AgoraReasonDialog( windowSet, config )
{
+ // Configuration initialization
+ config = $.extendObject( { 'small': true, 'footless': false },
config );
+
+ // Parent constructor
+ OO.ui.Dialog.call( this, windowSet, config );
+ };
+
+ /* Inheritance */
+
+ OO.inheritClass( mw.agora.reasonDialog, OO.ui.Dialog );
+
+ /* Static Properties */
+
+ mw.agora.reasonDialog.static.name = 'reason';
+
+ mw.agora.reasonDialog.static.titleMessage = 'Reason for doing it'; //
XXX Is this redundant since later on we customize this?
+
+ mw.agora.reasonDialog.static.icon = 'help';
+
+ /* Methods */
+
+ /**
+ * @inheritdoc
+ */
+ mw.agora.reasonDialog.prototype.initialize = function () {
+ // Parent method
+ OO.ui.Dialog.prototype.initialize.call( this );
+
+ // Properties
+ this.contentLayout = new OO.ui.PanelLayout( {
+ '$$': this.frame.$$,
+ 'scrollable': true,
+ 'padded': true
+ } );
+ this.continueButton = new OO.ui.PushButtonWidget( {
+ '$$': this.$$,
+ 'label': mw.msg( 'feedback-submit' ), // FIXME
Placeholder (random string in core)
+ 'flags': ['primary']
+ } );
+
+ // Events
+ this.continueButton.connect( this, { 'click': [ 'close',
'close' ] } );
+
+ // Initialization
+ this.contentLayout.$
+ .addClass( 'mw.agora.reasonDialog-content' )
+ .text( mw.msg( 'delete-comment' ) ); // FIXME
Placeholder (random string in core)
+ this.$body.append( this.contentLayout.$ );
+ this.$foot.append( this.continueButton.$ );
+ };
+
+ /**
+ * Get the title of the window.
+ *
+ * Send the MediaWiki username along with the message for {{GENDER:}}
i18n support
+ * @returns {string} Window title
+ */
+ mw.agora.reasonDialog.prototype.getTitle = function () {
+ // TODO use an actionOfReason parameter to change title.
+ return mw.msg( 'Reason for doing <ACTIONTYPE>' );
+ };
+
+ /* Register the dialog class. */
+
+ mw.agora.dialogs.register( mw.agora.reasonDialog );
+
+ /* Now create a button in the static HTML. */
+ reasonButton = new OO.ui.PushButtonWidget( {
+ 'label': mw.msg( 'provide-reason' ),
+ } );
+ reasonButton.$.addClass( 'mw-ui-button' ); // FIXME this doesn't work,
it adds the class to a div surrounding the actual button.
+
+ // insert it in the HTML.
+ $( '.mw-ui-vform-div :last').after( reasonButton.$ );
+
+
+ console.log( 'Do some oo.ui stuff!' );
+} ( mediaWiki, jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/93525
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I0bfacb92b3dfca1c7ec2d76df1c162e237a77735
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Agora
Gerrit-Branch: master
Gerrit-Owner: Spage <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
