Hey there,
I've recently started to use CSS3 Pie in a custom Javascript enviroment. However, the only thing I miss is to be able to use transparency set via "filter=alpha(..." (like jQuery does for animations). I came across the ticket at
https://github.com/lojjic/PIE/issues/issue/46 and thought about extending it by myself. Of course I'll provide the changes for you.
However, I'm facing some problems.
I did the following changes on PIE.htc:
1. Added a listener (addListener) in PIE.Element.init
2. This listener invokes a method in PIE.Element on "onfilterchange"
3. This method checks some parameters and invokes a new method in the elements RootRenderer
4. This method sets the new opacity to the element
According to what I saw in your code, this should be the correct way of handling attributes, that might change. However, onfilterchange (which is officially supportet by IE) doesn't seem to get fired at all.
Is the element 'el' within PIE.Element's init referring to the original element, where PIE.htc is attached to? Or is it some sort of copy?
For debugging reasons, I was outputting the filter attribute of the element "el" within PIE.Element.propChanged and saw the filter-attribute to be changed. However, I'm a bit confused by the different ways "el" is used.
Could you please push me into the right direction? Is PIE.Element.init.el a dummy/clone object? Do I need to push the original's filter attribute to that element?
Here's some code:
(i've left the line numbers, so you can track it down if you want)
Code:
3271 if( !eventsAttached ) {
3272 eventsAttached = 1;
3273 addListener( el, 'onmove', handleMoveOrResize );
3274 addListener( el, 'onresize', handleMoveOrResize );
3275 addListener( el, 'onpropertychange', propChanged );
3276 addListener( el, 'onmouseenter', mouseEntered );
3277 addListener( el, 'onmouseleave', mouseLeft );
3278 addListener( el, 'onfilterchange', filterChanged );
3279 PIE.OnResize.observe( handleMoveOrResize );
3280
3281 PIE.OnBeforeUnload.observe( removeEventListeners );
3282 }
Code:
3165 PIE.Element = (function() {
...
3400 function filterChanged() {
3401 alert("FILTER CHANGED!");
3402 if( !destroyed ) {
3403 if( initialized ) {
3404 var i, len;
3405
3406 lockAll();
3407 for( i = 0, len = renderers.length; i < len; i++ ) {
3408 renderers[i].updateFilter();
3409 }
3410 unlockAll();
3411 }
3412 else if( !initializing ) {
3413 init();
3414 }
3415 }
3416 }
Code:
2020 PIE.RootRenderer = PIE.RendererBase.newRenderer( {
...
2097 updateFilter: function() {
2098 var el = this.getPositioningElement();
2099 alert(el.style.filter);
2100 // <Do lots of fancy filter handling stuff on el>
2101 },
I've left out posting removeListener and some other stuff.
Attention, pseudo-code ahead:
My test-case is pretty simple. I've got one #element with PIE.htc attached to it. On onclick I set (#element).style.filter = 'alpha(Opacity=50)';.
I'm sure, PIE works, as I've also set rounded borders to the element. I'm also sure the filter is applied, as its child elements are set to transparent after invoking the filter change. However, "onfilterchange" within PIE.htc is not fired.
[EDIT:]
I've manually set the #element's onfilterchange to debug some output and so it does when the filter is applied.
Means the event is intact. However, it isn't recognized by PIE.htc.
Thanks for your help.
Kind Regards from Germany
Mario