New function for complex layouts via Javascript

Hello World, this is technical... but very nice!

I've added a new empty function to the RTD, invoked when the designer is fully loaded.
The name of the function is rtd_custom_fixes().
It can be very useful in case you need to mathematically reposition elements of your layouts.
For example, I had a case where the size selector had to be moved on top: but for various reasons, it wasn't possible to properly align it with the top-left coordinates of the design area.
So, thanks to the new function, I was able to do that by placing this piece of code into the Footer code for designer area:

<script>
function rtd_custom_fixes() {
	if (document.getElementById('elements_sizectrl_s1') && document.getElementById('elements_sizectrl_s2') && document.getElementById('panel_sizes')) {
		var fixcoords1=findPos(document.getElementById('elements_sizectrl_s1'));
		var fixcoords2=findPos(document.getElementById('elements_sizectrl_s2'));
		document.getElementById('panel_sizes').style.marginLeft="0";
		document.getElementById('panel_sizes').style.left=((fixcoords2[0]/1)-(fixcoords1[0]/1))+'px';
	}
}
</script>

This simple toys uses another internal function of the RTD, findPos. It returns an array with the absolute coordinates of the passed element.
elements_sizectrl_s1 is the left area, where text, clips and other items are listed.
elements_sizectrl_s2 is the right area, with designer and everything else.
The code above recalculate, relative to the live size of such elements in the designer, the left position required to properly align the size selection, which is included in the panel_sizes element.

One day I should write a tutorial about these codes and the various hacking possibilities you could use in the RTD, so this post is really to let you know it's there, and remind me I did it

Enjoy!



Edited 1 time(s). Last edit at 07/29/2013 09:52AM by Alex.

Another more complez sample as reference, as I did it as a reply for another issue.
This piece of code, placed into the Footer code for designer area, will force all of the "change clipart" button's texts to be changed to anything you want, when loading templates:

<script>
function custom_reset_changeclipart_texts() {
	if (totalrows_c>0) {
		for (i=1; i<=totalrows_c; i++) {
			AdminItemNames['c_'+i+'_changename']="Change this clip!";
		}
		addrow_c(totalrows_c);
	}
}
function rtd_custom_fixes() {
	custom_reset_changeclipart_texts();
}
Import = (function() {
	var cached_function = Import;
	return function() {
		cached_function.apply(this, arguments);
		custom_reset_changeclipart_texts();
	};
}());
</script>