[Kss-devel] problem with effects in Opera and IE

[Balazs Ree]

Hi Denis,

On Wed, 15 Aug 2007 18:03:01 +0300 Denis Mishunov wrote:

> Task
> ====
> Create a KSS action that would show "backdrop" for the whole site's
> screen clicking on the image's thumbnail as it is done on many-many
> sites when you get the preview of an image or something like that. But
> here it is simple - only backdrop for now no preview, no nothing.

I am not sure: what is your application supposed to do *in its current 
state* ? I really prefer to start from a state which works straight away 
and only shows the problems to fix. The html you sent is not sufficient 
for this. This is not really your fault, we should give more "hints" 
about what to do and how to do it in a way that we can stick to some 
conventions when accepting bug reports. Maybe you can help us with this 
with your experiences.

So, I will suggest for future practice that for a minimum, every plugin 
should come with a "demo" section and selenium tests, we may also want to 
provide skeletons for that. This will make it easy to decide if we have a 
kss problem or a general application problem (which is not our task to 
fix). And we also make it easy for developers to adhere to the 
conventions.

After having fixed the bugs in your javascript, I arrived to a version 
that works without error on all browser, and that simply does - nothing. 
It inserts an empty div into the page, does something with resizing, and 
makes it appear with an effect. Then you can click to it and disappears. 
So the result of the application as currently is - nothing happens? At 
this point I am not sure if I have fixed your errors or not. But let's 
move on.

(As a remark I would also add, that just for this you don't need a custom 
plugin, you could just do this from kss with the existing effects 
plugins, which could be a bit shaped and parameters added, that noone has 
added simply because noone has needed them so far. But I assume that you 
are aiming to arrive to more complexity in the application in the end, 
which would justify a plugin. In other words, in the end I hope that you 
will provide a complex, highly parametrized single effect, ready to use 
for kss and also in many applications.)

Any way, I found the following issues in your code. Summarizing: 
javascript programming is very difficult and requires a lot of expertize. 
And if you take this as a blame, I assure you we are suffering with the 
same problems day after day. No wonder we want to take this burden from 
the shoulders of the Kss Developers, but unfortunately if you decide to 
develop new plugins, this responsibility just all comes back to you. You 
have made a lot of errors in this code and well, javascript is a hell 
when it comes to debugging these.


- You have several missing var-s and semicolons, this is
  unfortunately critical. Because FF runs fine with 
  these errors, but a single missing var blows IE !
  In addition it can blow in other ways after packing too, 
  ie. it can happen that if you have one of these
  errors, your code will run in "Development" mode but not in
  "Production", which appeared to be your main issue.

- extending Element or any existing object is not an "error" 
  but highly risky: libraries like
  prototype do that, so we know if we use prototype we expect 
  to have the extensions. However this is also the major
  reason why libraries cannot be used with code from another
  library that does the same extending and coincides.
  If you start to do this on an application level, you will
  make your component coincide with other components and
  even make the result dependent on the inclusion order of
  the javascript files.
  Solution: define these as functions in your private
  namespace, so your application can use them but you do not
  affect other components. You actually would not even win
  with extending Element in this case.

- First and major problem: you put the definition for your
  libraries *inside the kss action*, this will make it inline 
  and this is very wrong.
  Not because of kss, but because it is inside a function
  that runs again every time. This way upon each execution
  a new custom class is created for you, in addition you do
  not parametrize the classes but you use "element",
  "overlayDuration", "overlayOpacity" as inline bound
  variables, whereas in reality they are parameters. In the
  same way you refer to your object as a global variable 
  (myBackDrop) from your class, this is also not right.

- Not a critical error, just a wrong usage pattern of kss:
  You use "id" as a kss parameter, whereas the correct kss pattern
  would be to bind the event to the node where you want it
  to happen, and simply use "oper.node" in your action.
  (On the other hand if you still use id, you should pass it
  as a parameter from the kss rule.)

- In the completeParms (evaluateParameters) you should
  always have strings as default values, not booleans as
  false. Your action needs to expect strings in every case
  and process them accordingly.

- Not an error really, but I suggest to use "window" instead
  of "self". They are both identical for unknown reason, but
  "self" is usually used for other purposes.

Summarizing. None of your problems are related with kss, but rather
with wrong or unclean usage of javascript. That you are saying your 
code runs without kss ok, does not mean the problem is kss, but 
means that: 

- it runs if the definitions are in the global namespace but you should
  not expect it run the same if you wrongfully put it all inside a 
  function, (Actually it could in some cases, but... just don't do that.)

- and that it runs without the packing of kss (and Plone) which can
  unfortunately break your code if it is not *completely* correct 
  syntactically (meaning, some browsers do execute incorrect code 
  in a sloppy way but other don't and even that after packing it gets 
  worse.)

Fix your syntax errors and make your code defined outside the kss action, 
are the main issues so far. This is as far as I can get, without I don't 
having your running environment and knowing your further intentions.

I am sending you back the code I cleaned up in private, I hope that will 
help you to continue with it.

-- 
Balazs Ree