Creating a custom Dialog for Link

Post here questions and problems related to oXygen frameworks/document types.
pramanikhimangshu
Posts: 17
Joined: Fri Dec 29, 2017 11:16 am

Creating a custom Dialog for Link

Post by pramanikhimangshu »

Hello,

I am new to the JS api provided to customize Frameworks in Web Author.
As demonstrated in the example of customizing DITA framework by writing custom code using Oxygen JS api in framework.js I could implement the code for attaching the external link.
The current implementation uses :

Code: Select all

var text = window.prompt("Please enter the link attribute");
this prompt to take link value from the user.
Instead of using this prompt I implemented a dialog box with a html input type text and a OK_CANCEL button configuration, but I cannot create the events for buttons(OK and Cancel) displayed in the dialog.
Will appreciate any help there.

Thank you.
Regards,
Himangshu.
mihai_coanda
Posts: 78
Joined: Wed Jul 20, 2016 8:22 am

Re: Creating a custom Dialog for Link

Post by mihai_coanda »

Hello Himangshu,
This is a sample code on how to use a dialog:

Code: Select all


function actionTriggered() {
if(!myDialog) {
myDialog = createDialog();
}

myDialog.getElement().innerHTML =
'My custom HTML content';

myDialog.show();
myDialog.onSelect(function(e) {
// The event contains information on the selected button.
console.log('Event: ', e);
});
}
More information on the onSelect function and a complete dialog api documentation can be found at https://www.oxygenxml.com/maven/com/oxy ... ialog.html

Regards,
Michael
Michael

https://www.oxygenxml.com
pramanikhimangshu
Posts: 17
Joined: Fri Dec 29, 2017 11:16 am

Re: Creating a custom Dialog for Link

Post by pramanikhimangshu »

Hi Michael,

Thank you for your quick reply it worked and I can handle the button clicks for the particular dialog.
One more question is where to add the css file specific to that dialog box html content?

Thank you.
Regards,
Himangshu
mihai_coanda
Posts: 78
Joined: Wed Jul 20, 2016 8:22 am

Re: Creating a custom Dialog for Link

Post by mihai_coanda »

Hello,

The easiest approach to style your HTML would be to use inline styling using the element's "style" attribute.

If you want to have the CSS in a separate file, to load a CSS file from your framework you should add a .css file in your framework's web folder and load it from your framework.js code like :

Code: Select all


sync.util.loadCSSFile(
sync.ext.Registry.extensionURL + "my-custom.css");
Regards,
Michael.
Michael

https://www.oxygenxml.com
pramanikhimangshu
Posts: 17
Joined: Fri Dec 29, 2017 11:16 am

Re: Creating a custom Dialog for Link

Post by pramanikhimangshu »

Hi Michael,

Thank you for the quick reply and it was very helpful.
I am currently working on the customization of external links in oxygen web author.
I currently used sync.api.dom.Element to get the href of selection element is already a link or not, but if it is a link then I should change the existing href attribute and not re encapsulate with ro.sync.ecss.extensions.commons.operations.SurroundWithFragmentOperation, my question is how I can set value to an attribute of an element.

Thank you.
Regards,
Himangshu.
mihai_coanda
Posts: 78
Joined: Wed Jul 20, 2016 8:22 am

Re: Creating a custom Dialog for Link

Post by mihai_coanda »

Hello,

You can use the ro.sync.ecss.extensions.commons.operations.ChangeAttributeOperation operation.

Regards,
Mihai
Michael

https://www.oxygenxml.com
pramanikhimangshu
Posts: 17
Joined: Fri Dec 29, 2017 11:16 am

Re: Creating a custom Dialog for Link

Post by pramanikhimangshu »

Hello,

Thank you very much for the help, now I can change the attributes of the existing links. :D

1>I would like to ask is there any JS-Api methods to check for a particular kind of an attribute from all the tags present in the document i.e I need to find all the ELEMENTS from the dita document which have that particular attribute presents in the tags.

Like: <AnyTag particularAttr></AnyTag>

I want to get the array of elements which have particularAttr present.
Please suggest me a way to do this operation.
2>How can stop a dialog from closing after click of Ok and Cancel button configuration

Thank you.
Regards,
Himangshu.
mihaela
Posts: 490
Joined: Wed May 20, 2009 2:40 pm

Re: Creating a custom Dialog for Link

Post by mihaela »

Hi,

1> Please see our questions and answers about this in the "Finding a particular attribute of tags within the document" topic.
From what I understand, it has the same subject.

2> You can call the preventDefault function on the event:

Code: Select all

e.preventDefault();


Best regards,
Mihaela
Mihaela Calotescu
http://www.oxygenxml.com
pramanikhimangshu
Posts: 17
Joined: Fri Dec 29, 2017 11:16 am

Re: Creating a custom Dialog for Link

Post by pramanikhimangshu »

HI

Thank you for the previous reply to stop the default propagation.
I want to use the authoraccess variable in JS.
In documentation it is stated : It must have a function called doOperation()
I tried to put a doOperation function in the framework.js file, but I cannot access the authoraccess.
Could you please guide me with this.

Thank you.
Regards,
Himangshu.
pramanikhimangshu
Posts: 17
Joined: Fri Dec 29, 2017 11:16 am

Re: Creating a custom Dialog for Link

Post by pramanikhimangshu »

mihaela wrote:Hi,

1> Please see our questions and answers about this in the "Finding a particular attribute of tags within the document" topic.
From what I understand, it has the same subject.

2> You can call the preventDefault function on the event:

Code: Select all

e.preventDefault();


Best regards,
Mihaela

Code: Select all


function buttonClick = function(e)
{
e.preventDefault();
}
this.dialog.onSelect(buttonClick);
I am getting :
Uncaught TypeError: e.preventDefault is not a function
at URNDialog.buttonClick (<anonymous>:1029:7)
at sync.view.ApiDialog.<anonymous> (workspace-c71778b94e.js:1231)
at sync.view.Dialog.goog.events.EventTarget.fireListeners (workspace-c71778b94e.js:234)
at Function.goog.events.EventTarget.dispatchEventInternal_ (workspace-c71778b94e.js:236)
at sync.view.Dialog.goog.events.EventTarget.dispatchEvent (workspace-c71778b94e.js:231)
at sync.view.Dialog.goog.ui.Dialog.onButtonClick_ (workspace-c71778b94e.js:1138)
at Object.goog.events.fireListener (workspace-c71778b94e.js:224)
at HTMLDivElement.goog.events.handleBrowserEvent_ (workspace-c71778b94e.js:227)
at HTMLDivElement.b (workspace-c71778b94e.js:216)

The type of e is string and not event.
Please help me with this.

Thank you.
Regards,
Himangshu
cristi_talau
Posts: 494
Joined: Thu Sep 04, 2014 4:22 pm

Re: Creating a custom Dialog for Link

Post by cristi_talau »

Hello,

The signature of the callback is documented here: https://www.oxygenxml.com/maven/com/oxy ... ctCallback . Basically, the first argument is the key of the pressed button and the event is the second.

Best,
Cristian
pramanikhimangshu
Posts: 17
Joined: Fri Dec 29, 2017 11:16 am

Re: Creating a custom Dialog for Link

Post by pramanikhimangshu »

pramanikhimangshu wrote:HI

Thank you for the previous reply to stop the default propagation.
I want to use the authoraccess variable in JS.
In documentation it is stated : It must have a function called doOperation()
I tried to put a doOperation function in the framework.js file, but I cannot access the authoraccess.
Could you please guide me with this.

Thank you.
Regards,
Himangshu.
Hello,
Thanks for the reply.
Can I use authoraccess in framework.js?
How would I do this, please guide me with this.
Regards,
Himangshu
cristi_talau
Posts: 494
Joined: Thu Sep 04, 2014 4:22 pm

Re: Creating a custom Dialog for Link

Post by cristi_talau »

Hello,

The ro.sync.ecss.extensions.api.AuthorAccess API is a server-side API. You can implement AuthorOperation-s that run on the server using JS, but the code needs to be placed in a different file. For mode information you can take a look at this sample code: https://github.com/oxygenxml/javascript ... operations .

Best,
Cristian
pramanikhimangshu
Posts: 17
Joined: Fri Dec 29, 2017 11:16 am

Re: Creating a custom Dialog for Link

Post by pramanikhimangshu »

Hi,

Thank you for the reply it was helpful.
I want to know two more things:

1> Can we use the blue notification box that web author shows during logging in our custom framework using JS-API, if we can can you please tell process, so that displaying user message/notification stay aligned to web author styles.
2> I want my custom dialog box to appear only in certain areas of the document in rest places it should not be appearing. For example I created a Link dialog box using JS, I don't want it to appear when user right clicks selecting the title tag, as we should not allow user to insert link in Title or the root tag like concept, reference .etc. To achieve this use case what is the way forward is there any rule I can place or I have to manually check for all the Tag names that is selected in JS and selectively display and hide the dialog box. Please guide me with this use case.

Thank you.
Regards,
Himangshu.
cristi_talau
Posts: 494
Joined: Thu Sep 04, 2014 4:22 pm

Re: Creating a custom Dialog for Link

Post by cristi_talau »

Hello,

First of all, I would suggest starting new Forum posts for each of your problems.

Regarding your questions:
1) We have such an API: workspace.getNotificationManager().showInfo("message");
2) Currently, the only feasible way is to list those tags manually. You can take a look at all the possible parent elements here: http://docs.oasis-open.org/dita/v1.2/os ... .html#xref .

Best,
Cristian
Post Reply