How to add in a jQuery extension?

How to add in a jQuery extension?

  

I would like to put Jason Day's jQuery dialog extension (https://github.com/jasonday/jQuery-UI-Dialog-extended) into an OutSystems project, in part to get the functionality where you can click outside of a popup editor to close it.

...but it and many other extensions attempt to use $.ui, which in an OutSystems context, does not exist.

Where it does exist is inside outsystems.internal.$, but just trying to s/$.ui/outsystems.internal.$.ui/ doesn't work, at least if you try to put that in the JavaScript block of a page, because you get "Identifier 'OutSystems.Internal.$' is for internal use only. Please use '$' instead."

Well, no, because '$' isn't the thing I want :)

I'm a bit stuck on how to integrate these sorts of things "properly".

Ritchie Annand wrote:

I would like to put Jason Day's jQuery dialog extension (https://github.com/jasonday/jQuery-UI-Dialog-extended) into an OutSystems project, in part to get the functionality where you can click outside of a popup editor to close it.

...but it and many other extensions attempt to use $.ui, which in an OutSystems context, does not exist.

Where it does exist is inside outsystems.internal.$, but just trying to s/$.ui/outsystems.internal.$.ui/ doesn't work, at least if you try to put that in the JavaScript block of a page, because you get "Identifier 'OutSystems.Internal.$' is for internal use only. Please use '$' instead."

Well, no, because '$' isn't the thing I want :)

I'm a bit stuck on how to integrate these sorts of things "properly".


Hi,

Please can you help me in understanding above question.

What you want to do? Are you asking where you can write jQuery in OS ?


Thanks,

Rajat


Some sort of equivalent of putting https://github.com/jasonday/jQuery-UI-Dialog-extended/blob/master/jquery.dialogOptions.js in the JavaScript, either on the page or in a RunJavaScript or anywhere else so that it will extend the jQuery.ui.dialog that Popup_Editor uses...

...preferably without having to clone RichWidgets :)

I can't just change:

// extend _init
var _init = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function () {

to

// extend _init
var _init = outsystems.internal.$.ui.dialog.prototype._init;
outsystems.internal.$.ui.dialog.prototype._init = function () {

because OutSystems detects and stops that.

Mind you, I could use array-equal-property equivalency and use outsystems["internal"].$.ui.dialog instead, but that seems cheatery. It feels like there is a more "proper" way of going about this :)

I figured it out - the naughty way.

SyntaxEditor Code Snippet

var temp$ = $;
var $ = outsystems["internal"].$;
...the JavaScript code from the extension with 'os-internal.' inserted into the styles where appropriate
$ = temp$; // So as not to raise the ire of screen componentry.

Now its feature of closing the popups when clicking anywhere on the overlay works like a charm.