Page MenuHomePhabricator

Make OOUI easier to use for gadgets
Open, HighPublic

Description

As I explained in T155473#2944504

For example when someone wants to make a dialog box in OOUI:

function MyDialog( config ) {
  MyDialog.super.call( this, config );
}
OO.inheritClass( MyDialog, OO.ui.Dialog ); 
MyDialog.static.title = 'Simple dialog';

MyDialog.prototype.initialize = function () {
  MyDialog.super.prototype.initialize.call( this );
  this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } );
  this.content.$element.append( '<p>A simple dialog window. Press \'Esc\' to close. </p>' );
  this.$body.append( this.content.$element );
};
MyDialog.prototype.getBodyHeight = function () {
  return this.content.$element.outerHeight( true );
};
var myDialog = new MyDialog( {
  size: 'medium'
} ); 
var windowManager = new OO.ui.WindowManager();
$( 'body' ).append( windowManager.$element );
windowManager.addWindows( [ myDialog ] );
windowManager.openWindow( myDialog );

(Copied from here).

What I would love to see is some sort of form factory in JavaScript. Like HTMLFormFactory in PHP. So we only build an array of form descriptors and call it, then bam! the form is there. Something like:

windowManager.openWindow( 
  {
    name: 'MyDialog',
    title: 'Simple dialog',
    size: 'medium',
    elements: [
      {
        id: 'panel1',
        type: 'Panel',
        attr: { padded: true, expanded: false }
      },
      {
        tag: 'p',
        text: 'A simple dialog window. Press \'Esc\' to close.',
        parent: 'panel1'
      }
    ]
  }
);

And/or something like jQuery (which can consume existing HTML divs as the source of the dialogue:

<div id="MyDialog" title="Simple dialog">
  <p>A simple dialog window. Press \'Esc\' to close.</p>
</div>
$( function() {
   $( '#MyDialog' ).dialog();
 } );

Details

Related Gerrit Patches:

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 17 2017, 10:16 PM
scfc awarded a token.Jan 17 2017, 10:24 PM
scfc added a subscriber: scfc.
Isarra added a subscriber: Isarra.Jan 17 2017, 11:08 PM

I'll say this again: YES.

We need this sort of abstraction for two reasons: ease of use, and more ability to change things about how it all works without breaking all the usage of it.

Huji added a subscriber: Huji.Jan 21 2017, 4:50 PM
Huji added a comment.Jan 21 2017, 4:54 PM

I get the idea here, but I think the task description by @Ladsgroup is not conveying what I think the idea is. His example above is an unfair comparison; the #dialog element has been defined somewhere else (using hard-coded HTML, or created on-the-fly using JS) and it has probably taken an equal number of rows of code as the OOjs UI example above.

I think what is being asked here is: create wrappers for basic use cases like simple dialogues, that can accept a simple list of form elements, for example in JSON, and creates and initiates the elements automatically.

If that is what is intended, then I will go ahead and change the task description accordingly. If not, I would appreciate clarification.

I get the idea here, but I think the task description by @Ladsgroup is not conveying what I think the idea is. His example above is an unfair comparison; the #dialog element has been defined somewhere else (using hard-coded HTML, or created on-the-fly using JS) and it has probably taken an equal number of rows of code as the OOjs UI example above.

No, read the documentation. It's three lines of HTML without any need to add classes, etc. Also It's not a competition which one has the least number of lines and quantifying difficulty of code by number of lines is an evil practice.

I think what is being asked here is: create wrappers for basic use cases like simple dialogues, that can accept a simple list of form elements, for example in JSON, and creates and initiates the elements automatically.

Have you worked with HTMLForm in mediawiki php? If not read this.

If that is what is intended, then I will go ahead and change the task description accordingly. If not, I would appreciate clarification.

TheDJ updated the task description. (Show Details)Jan 23 2017, 12:06 PM
Huji added a comment.Jan 23 2017, 2:49 PM

Have you worked with HTMLForm in mediawiki php? If not read this.

Yes I have. And I think you and I are in agreement here! What is being asked is a simple way to define elements using associative arrays. Why don't you let me update the Task, and if it does not clarify you can revert it.

Huji updated the task description. (Show Details)Jan 23 2017, 2:59 PM
Huji updated the task description. (Show Details)
Volker_E triaged this task as High priority.Jan 26 2017, 1:06 AM

This proposal is selected for the Developer-Wishlist voting round and will be added to a MediaWiki page very soon. To the subscribers, or proposer of this task: please help modify the task description: add a brief summary (10-12 lines) of the problem that this proposal raises, topics discussed in the comments, and a proposed solution (if there is any yet). Remember to add a header with a title "Description," to your content. Please do so before February 5th, 12:00 pm UTC.

I added the T101484 subtask because of this task's title (wide scope), not its description (narrow scope). In case only the narrower scope is desired, please clarify the title and edit related tasks.

Tgr added a subscriber: Tgr.Feb 4 2017, 2:33 AM

Basically just make sure the title + description is something that's going to make sense on a wiki page for a voter who probably won't have time to read Phabricator discussions for all ~70 proposals.

Tgr added a comment.Feb 15 2017, 9:59 AM

This was the sixth most popular item in the Developer Wishlist results.

@matmarex you are one of the few people who has intimate knowlegde of both OOUI and HTMLForm. What do you think about building an exact replica of OOUIHTMLForm in JS (to cut down the learning curve and documentation costs)?

Volker_E moved this task from Backlog to Next-up on the OOUI board.Feb 28 2017, 9:52 PM
Qgil added a subscriber: Qgil.Mar 1 2017, 4:58 PM

Volker_E moved this task from Backlog to Next-up on the OOjs-UI board.

Does this mean that this task is being committed, or in its way to? I am asking with big hopes to see this task moving forward, and reflecting that in the table at T158149: Find an owner for top 10 Developer Wishlist 2017 proposals. :)

srishakatux added a subscriber: Volker_E.EditedMar 1 2017, 9:37 PM

@Volker_E Does this task need an owner? If so, would this be a good 2-3 month long project for a beginner? I'm asking as we are currently recruiting projects and mentors for GSOC 2017/ Outreachy Round 14.

Qgil added a comment.Sep 12 2017, 8:34 AM

In relation to T158149: Find an owner for top 10 Developer Wishlist 2017 proposals, I dare to ask: what is the current status? :)

Is this task specifically to Make OOjs UI dialogs easier to use for gadgets? Or is that just one example that we're talking about and should be added as a subtask?

Dialogs is an example, there are lots of things that need work.

Volker_E renamed this task from Make OOjs UI easier to use for gadgets to Make OOUI easier to use for gadgets.Jan 10 2019, 8:23 PM
Volker_E updated the task description. (Show Details)

@Ladsgroup Dialogs seems one of the biggest concerns, what other issues do you have in mind?

Change 365504 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[oojs/ui@master] SimpleDialogWidget: Create a simple dialog widget

https://gerrit.wikimedia.org/r/365504

Qgil removed a subscriber: Qgil.Jan 11 2019, 3:29 PM

@Ladsgroup Dialogs seems one of the biggest concerns, what other issues do you have in mind?

It has been a while since I developed a gadget using OOUI. I can ask others though.