In the script I am working on,[1] I have a PanelLayout that is defined like this:
this.previewResult = new OO.ui.PanelLayout({ expanded: true, padded: true, framed: true, $content: '' });
Later on, I would like to modify the content of this; specifically, I want to use MW API to retrieve the parsed output of some short wikitext. For now, however, I just want to try out the concept by replacing the content with a simple <p> tag.
Evidently, this line of code does not do the trick:
dialog.previewResult.$content = '<p>Something</p>';
That is, it does update the value of the $content property for the OOUI object, but that does not result in the object getting re-rendered. None of the setter functions for OO.ui.PanelLayout seem to do the trick either.
What is the correct way to do this? If PanelLayout is not the right object type for this purpose, what is?
I haven't dealt with OOUI for a couple of years but maybe you could pass a jQuery object to the $content parameter, store it yourself, then modify that later?
On Sun, 24 Mar 2019 at 14:14, Huji Lee huji.huji@gmail.com wrote:
In the script I am working on,[1] I have a PanelLayout that is defined like this:
this.previewResult = new OO.ui.PanelLayout({ expanded: true, padded: true, framed: true, $content: '' });Later on, I would like to modify the content of this; specifically, I want to use MW API to retrieve the parsed output of some short wikitext. For now, however, I just want to try out the concept by replacing the content with a simple <p> tag.
Evidently, this line of code does not do the trick:
dialog.previewResult.$content = '<p>Something</p>';That is, it does update the value of the $content property for the OOUI object, but that does not result in the object getting re-rendered. None of the setter functions for OO.ui.PanelLayout seem to do the trick either.
What is the correct way to do this? If PanelLayout is not the right object type for this purpose, what is? _______________________________________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
You absolutely can attach a jQuery element into your $content parameter. That will work, and probably give you what you want.
However, one of the more powerful things about OOUI is its ability to encapsulate this type of work. In this case, what I would recommend, is creating your own custom widget that manages itself.
I imagine that your $content changes, but it probably has similar structure through its changes. For example, it might have an error box at the top that only appears when necessary, or it can have some regular inputs alongside inputs that maybe change, and it probably has some area where you display a text or an image or anything else.
You could create all of those in jQuery, but OOUI also offers you an ability to encapuslate this better.
I tried to explain this in an email and got a bit long, so I created a gist: https://gist.github.com/mooeypoo/a9082a5a5828dcec53be28ed3c538e22
The main idea I am trying to show is how you can create your own widget that extends OO.ui.Widget, construct its base structure in the constructor with either other OOUI widgets or with some custom jQuery elements, add classes and event listeners, and then manage the state of this widget when some other code calls its methods.
I tried to also show how you can have your custom widget emit some custom event so that other pieces of your code (say, the dialog in general?) can listen to some event (I used "success" but you can define whatever you want) and respond, like change to another panel, or close the dialog, or enable some other action.
I hope the gist helps, I tried to make it self explanatory, but please let me know if you encounter any issues with it (I wrote it relatively quickly, I hope there aren't any bugs ;)
Moriel
On Sun, Mar 24, 2019 at 7:19 AM Alex Monk krenair@gmail.com wrote:
I haven't dealt with OOUI for a couple of years but maybe you could pass a jQuery object to the $content parameter, store it yourself, then modify that later?
On Sun, 24 Mar 2019 at 14:14, Huji Lee huji.huji@gmail.com wrote:
In the script I am working on,[1] I have a PanelLayout that is defined
like
this:
this.previewResult = new OO.ui.PanelLayout({ expanded: true, padded: true, framed: true, $content: '' });Later on, I would like to modify the content of this; specifically, I
want
to use MW API to retrieve the parsed output of some short wikitext. For now, however, I just want to try out the concept by replacing the content with a simple <p> tag.
Evidently, this line of code does not do the trick:
dialog.previewResult.$content = '<p>Something</p>';That is, it does update the value of the $content property for the OOUI object, but that does not result in the object getting re-rendered. None
of
the setter functions for OO.ui.PanelLayout seem to do the trick either.
What is the correct way to do this? If PanelLayout is not the right
object
type for this purpose, what is? _______________________________________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Thanks a lot! The gist certainly helped a lot.
I think the key line in your code, and what Alex was referring to, was this one: this.$content.empty().append( $content );
But I like the idea of formalizing the process into an object. I will likely take a slightly different approach, in which I will create a class that inherits PanelLayout but has the additional setContent() method you had in your gist.
On Sun, Mar 24, 2019 at 3:01 PM Moriel Schottlender < mschottlender@wikimedia.org> wrote:
You absolutely can attach a jQuery element into your $content parameter. That will work, and probably give you what you want.
However, one of the more powerful things about OOUI is its ability to encapsulate this type of work. In this case, what I would recommend, is creating your own custom widget that manages itself.
I imagine that your $content changes, but it probably has similar structure through its changes. For example, it might have an error box at the top that only appears when necessary, or it can have some regular inputs alongside inputs that maybe change, and it probably has some area where you display a text or an image or anything else.
You could create all of those in jQuery, but OOUI also offers you an ability to encapuslate this better.
I tried to explain this in an email and got a bit long, so I created a gist: https://gist.github.com/mooeypoo/a9082a5a5828dcec53be28ed3c538e22
The main idea I am trying to show is how you can create your own widget that extends OO.ui.Widget, construct its base structure in the constructor with either other OOUI widgets or with some custom jQuery elements, add classes and event listeners, and then manage the state of this widget when some other code calls its methods.
I tried to also show how you can have your custom widget emit some custom event so that other pieces of your code (say, the dialog in general?) can listen to some event (I used "success" but you can define whatever you want) and respond, like change to another panel, or close the dialog, or enable some other action.
I hope the gist helps, I tried to make it self explanatory, but please let me know if you encounter any issues with it (I wrote it relatively quickly, I hope there aren't any bugs ;)
Moriel
On Sun, Mar 24, 2019 at 7:19 AM Alex Monk krenair@gmail.com wrote:
I haven't dealt with OOUI for a couple of years but maybe you could pass
a
jQuery object to the $content parameter, store it yourself, then modify that later?
On Sun, 24 Mar 2019 at 14:14, Huji Lee huji.huji@gmail.com wrote:
In the script I am working on,[1] I have a PanelLayout that is defined
like
this:
this.previewResult = new OO.ui.PanelLayout({ expanded: true, padded: true, framed: true, $content: '' });Later on, I would like to modify the content of this; specifically, I
want
to use MW API to retrieve the parsed output of some short wikitext. For now, however, I just want to try out the concept by replacing the
content
with a simple <p> tag.
Evidently, this line of code does not do the trick:
dialog.previewResult.$content = '<p>Something</p>';That is, it does update the value of the $content property for the OOUI object, but that does not result in the object getting re-rendered.
None
of
the setter functions for OO.ui.PanelLayout seem to do the trick either.
What is the correct way to do this? If PanelLayout is not the right
object
type for this purpose, what is? _______________________________________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
-- Moriel Schottlender (she/her) Senior Software Engineer Tech Lead | Community Tech and Anti Harassment Tools Wikimedia Foundation https://wikimediafoundation.org/ _______________________________________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
I watched your talk, [1] which happened 3 days after this exchange, and I found it very informative! Posting here so more people can see it along with the same thread.
[1] https://www.youtube.com/watch?v=T_CUN2o4faw
On Sun, Mar 24, 2019 at 10:11 PM Huji Lee huji.huji@gmail.com wrote:
Thanks a lot! The gist certainly helped a lot.
I think the key line in your code, and what Alex was referring to, was this one: this.$content.empty().append( $content );
But I like the idea of formalizing the process into an object. I will likely take a slightly different approach, in which I will create a class that inherits PanelLayout but has the additional setContent() method you had in your gist.
On Sun, Mar 24, 2019 at 3:01 PM Moriel Schottlender < mschottlender@wikimedia.org> wrote:
You absolutely can attach a jQuery element into your $content parameter. That will work, and probably give you what you want.
However, one of the more powerful things about OOUI is its ability to encapsulate this type of work. In this case, what I would recommend, is creating your own custom widget that manages itself.
I imagine that your $content changes, but it probably has similar structure through its changes. For example, it might have an error box at the top that only appears when necessary, or it can have some regular inputs alongside inputs that maybe change, and it probably has some area where you display a text or an image or anything else.
You could create all of those in jQuery, but OOUI also offers you an ability to encapuslate this better.
I tried to explain this in an email and got a bit long, so I created a gist: https://gist.github.com/mooeypoo/a9082a5a5828dcec53be28ed3c538e22
The main idea I am trying to show is how you can create your own widget that extends OO.ui.Widget, construct its base structure in the constructor with either other OOUI widgets or with some custom jQuery elements, add classes and event listeners, and then manage the state of this widget when some other code calls its methods.
I tried to also show how you can have your custom widget emit some custom event so that other pieces of your code (say, the dialog in general?) can listen to some event (I used "success" but you can define whatever you want) and respond, like change to another panel, or close the dialog, or enable some other action.
I hope the gist helps, I tried to make it self explanatory, but please let me know if you encounter any issues with it (I wrote it relatively quickly, I hope there aren't any bugs ;)
Moriel
On Sun, Mar 24, 2019 at 7:19 AM Alex Monk krenair@gmail.com wrote:
I haven't dealt with OOUI for a couple of years but maybe you could
pass a
jQuery object to the $content parameter, store it yourself, then modify that later?
On Sun, 24 Mar 2019 at 14:14, Huji Lee huji.huji@gmail.com wrote:
In the script I am working on,[1] I have a PanelLayout that is defined
like
this:
this.previewResult = new OO.ui.PanelLayout({ expanded: true, padded: true, framed: true, $content: '' });Later on, I would like to modify the content of this; specifically, I
want
to use MW API to retrieve the parsed output of some short wikitext.
For
now, however, I just want to try out the concept by replacing the
content
with a simple <p> tag.
Evidently, this line of code does not do the trick:
dialog.previewResult.$content = '<p>Something</p>';That is, it does update the value of the $content property for the
OOUI
object, but that does not result in the object getting re-rendered.
None
of
the setter functions for OO.ui.PanelLayout seem to do the trick
either.
What is the correct way to do this? If PanelLayout is not the right
object
type for this purpose, what is? _______________________________________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
-- Moriel Schottlender (she/her) Senior Software Engineer Tech Lead | Community Tech and Anti Harassment Tools Wikimedia Foundation https://wikimediafoundation.org/ _______________________________________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
wikitech-l@lists.wikimedia.org