[Intermediate] Detect when the wysiwyg is expanded


(Chris Horikx) #1

This solution only provides for when the wysiwyg container is clicked or either of the wysiwyg image buttons are clicked. I don't know that you can intercept the call to the function switchEditingMode that the wysiwyg seems to call to expand.


This code is written in YUI (YAHOO User Interface) which I prefer, feel free to resubmit in other JS Libraries.

In comparison to other JS Libraries, YUI is well known for its superior Event handling capabilities which is what is used to perform this detection:



First you would need to include:

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>



Then

    var wysiwygExpanded = new YAHOO.util.CustomEvent('wysiwygOpened');
    		
    var wysiwygContainers = $D.getElementsBy(function(a) {
    	return a.id.search(/^bodycopy_.+_content_type_wysiwyg_.+_contents_div$/) > -1;
    }, 'div', document.getElementById('wysiwygContainer'))
    		
    var wysiwygImageButtons = $D.getElementsBy(function(a) {
    	return a.id.search(/^bodycopy_\d+_div_\d+$/) > -1;
    }, 'td', document.getElementById('wysiwygContainer')).shift().getElementsByTagName('img');
    		
    YAHOO.util.Event.on(wysiwygContainers.concat(wysiwygImageButtons), 'click', function(e) { wysiwygExpanded.fire(e); })
    		
    wysiwygExpanded.subscribe(function() {
    	alert('Expand detected');
    });


I used this to bolden the submit button in simple edit and to assist in my 'changeDetected' function. All of the text fields and select fields have their own 'change' listener on them to bold the button as well. My changeDetected function will stop people from attempting to navigate away from their changes without saving.

Chris

(Chris Horikx) #2

[quote]var wysiwygImageButtons = $D.getElementsBy(function(a) {
return a.id.search(/^bodycopy_\d+div\d+$/) > -1;

}, 'td', document.getElementById('wysiwygContainer')).shift().getElementsByTagName('img');[/quote]



EDIT to allow for multiple wysiwyg divs :

var wysiwygImageButtons = $D.getElementsBy(function(a) {

return $D.getAncestorByTagName(a, 'td').id.search(/^bodycopy_\d+div\d+$/) > -1;

}, 'img', document.getElementById('wysiwygContainer'));