Customize EditLive menu with a popup form to gather data

[misterB]

I'm looking to have a custom button/menu item in my EditLive menu that will popup a form to get some info from the user. When they are done they will click OK and data will be written back to the cursor point in the EditLive window.

It seems easy enough to fire off an XHR that immediately writes back, but that's not what I want. I want some user interaction before writing back to the point where the cursor is. The long story is they will get some content, transform it with XSLT, fix if necessary, then write out that data to the EditLive window.

Currently using EditLive 6.7.3.25 for IWWCM.

[Adrian Sutton]

On 8 Oct 2009, at 20:50, misterB wrote:

> I'm looking to have a custom button/menu item in my EditLive menu  
> that will
> popup a form to get some info from the user. When they are done they  
> will
> click OK and data will be written back to the cursor point in the  
> EditLive
> window.
>
> It seems easy enough to fire off an XHR that immediately writes  
> back, but
> that's not what I want. I want some user interaction before writing  
> back to
> the point where the cursor is. The long story is they will get some  
> content,
> transform it with XSLT, fix if necessary, then write out that data  
> to the
> EditLive window.

When your JavaScript method is called in response to the raiseEvent,  
you can just use window.open(...) to open a new window to act as a  
dialog, then add a listener to the "OK" button on that window that  
calls window.opener.eljInstance.InsertHTMLAtCursor("whatever");

There's no requirement to call InsertHTMLAtCursor in the same function  
that EditLive! calls out to.

Does that answer your question?

Regards,

Adrian Sutton.
______________________
Adrian Sutton, CTO
UK: [phone]  US: [phone] x717
Ephox <http://www.ephox.com/>
Ephox Blogs <http://planet.ephox.com/>, Personal Blog <http://www.symphonious.net/ 
 >

_______________________________________________
[hidden email]
List instructions at http://liveworks.ephox.com/mailing-list/

[misterB]

Thanks Adrian:
That's perfect. Got it working. The hardest part after that was accessing the data. I use dojo in the popup window and figuring out the DOM without dojo query is painful. :-) Is dojo or jquery available in EditLive?

Adrian Sutton wrote:

On 8 Oct 2009, at 20:50, misterB wrote:
> I'm looking to have a custom button/menu item in my EditLive menu  
> that will
> popup a form to get some info from the user. When they are done they  
> will
> click OK and data will be written back to the cursor point in the  
> EditLive
> window.
>
> It seems easy enough to fire off an XHR that immediately writes  
> back, but
> that's not what I want. I want some user interaction before writing  
> back to
> the point where the cursor is. The long story is they will get some  
> content,
> transform it with XSLT, fix if necessary, then write out that data  
> to the
> EditLive window.

When your JavaScript method is called in response to the raiseEvent,  
you can just use window.open(...) to open a new window to act as a  
dialog, then add a listener to the "OK" button on that window that  
calls window.opener.eljInstance.InsertHTMLAtCursor("whatever");

There's no requirement to call InsertHTMLAtCursor in the same function  
that EditLive! calls out to.

Does that answer your question?

Regards,

Adrian Sutton.
______________________
Adrian Sutton, CTO
UK: [phone]  US: [phone] x717
Ephox <http://www.ephox.com/>
Ephox Blogs <http://planet.ephox.com/>, Personal Blog <http://www.symphonious.net/ 
 >

_______________________________________________
[e-mail]
List instructions at http://liveworks.ephox.com/mailing-list/

[Just, Dylan]

> Is dojo or jquery available in EditLive?

We build EditLive!'s javascript code using plain old javascript so it
doesn't interfere with any javascript toolkits used by our customers. We
have used EditLive! with JQuery before - works fine. No idea about dojo,
but it should be ok and if you encounter any issues we can help out.

Kind regards,

Dylan Just
Software Engineer
www.ephox.com
_______________________________________________
[hidden email]
List instructions at http://liveworks.ephox.com/mailing-list/

[misterB]

One more issue I ran into and that's getting the onload to fire for IE. Seems to all work OK for FF. Nothing in my popup.onload section ever fires in IE. Here's what I have. Is there something unique I need to take care of with EditLive? Looking on the web there seems to be some issues in general with onload and IE but haven't seen any special code in the various EditLive scripts and JSPs.


        function insertXSLTText() {
                var base = editlivebaseurl.substring(0,editlivebaseurl.lastIndexOf('/'));
                base = base.substring(0,base.lastIndexOf('/'));
                var url = base + "/jsp/html/STGXSLTPopup.jsp";
                var popup = window.open(url,"Window1", "scrollbars=yes,menubar=no,width=800,height=500,toolbar=no,resizable=yes");
                popup.onload = function(){
// HERE NOTHING HAPPENS FOR IE
                        var okDOM = popup.document.getElementById('copyButton');
                        var dojoElement = popup.document.getElementById("stiboOut");
                        // Loop through the children and get the text node
                        var returnedTextDOM = null;
                        if (dojoElement.hasChildNodes())
                        // So, first we check if the object is not empty, if the object has child nodes
                        {
                                var children = dojoElement.childNodes;
                                for (var i = 0; i < children.length; i++)
                                {
                                        if (children[i].type == "textarea") // TEXT_NODE
                                        {
                                                returnedTextDOM = children[i];
                                        }
                                };
                        };

                        if (okDOM.addEventListener) {
                                okDOM.addEventListener('click', function (event) {
                                        STGinsertText(returnedTextDOM);
                                        this.removeEventListener('click',arguments.callee,false);
                                        }, false);
                        } else if (okDOM.attachEvent){
                                okDOM.attachEvent('click', STGinsertText);
                                okDOM.attachEvent('click', function (event) {
                                        STGinsertText(returnedTextDOM);
                                        this.detachEvent('click',arguments.callee);
                                        });
                        }
                }
        }

        function STGinsertText(returnedTextDOM) {
                var textValue = returnedTextDOM.value;
                eljInstance.InsertHTMLAtCursor(textValue);
        }

Dylan Just wrote:

> Is dojo or jquery available in EditLive?

We build EditLive!'s javascript code using plain old javascript so it
doesn't interfere with any javascript toolkits used by our customers. We
have used EditLive! with JQuery before - works fine. No idea about dojo,
but it should be ok and if you encounter any issues we can help out.

Kind regards,

Dylan Just
Software Engineer
www.ephox.com
_______________________________________________
[e-mail]
List instructions at http://liveworks.ephox.com/mailing-list/

[Just, Dylan]

> One more issue I ran into and that's getting the onload to fire for
IE. Seems
> to all work OK for FF. Nothing in my popup.onload section ever fires
in IE.
> Here's what I have. Is there something unique I need to take care of
with
> EditLive? Looking on the web there seems to be some issues in general
with
> onload and IE but haven't seen any special code in the various
EditLive
> scripts and JSPs.

I think the problem you're encountering is independent of EditLive!'s
inclusion in the page. Perhaps IE is firing the onload before you
register the event listener? Try attaching the onload via the HTML for
the popup window, e.g. "<body onload='myfunction'>".

Also, perhaps you don't need to wait for onload - maybe the popup window
is available for manipulation immediately.

Another thought: try registering the listener and when the listener
fires, set a flag. Set a timeout and if the flag hasn't been set after,
say, 1 second, fire the event yourself. I'd avoid this technique though.

Hope this helps.

Kind regards,

Dylan Just
Software Engineer
www.ephox.com
_______________________________________________
[hidden email]
List instructions at http://liveworks.ephox.com/mailing-list/