2009-01-19

semicolon keyCode

When you press semicolon on Firefox and poke in the event object for its key code, the result is 59. The funny thing is, other browsers give you 186. So, if you want to execute some action when user presses semicolon, you have to check for both values.
if (event.keyCode == 186 || event.keyCode == 59) {
   // some stuff
}
Developers often choose to use semicolon in conjunction with CTRL or ALT keys to issue commands to application in a normal "desktop way". For example, CTRL+; activates other keyboard shortcuts in FogBugz. If you are a clean code maniac (as I am), the alternative for semicolon is ' (an apostrophe), which has a nice key code of 222.

2009-01-14

Prototype with TinyMCE: adventures in iframe space

If you use TinyMCE on a fairly large site with a narrow target auditence, there always comes a day when you have to sit down and develop some custom plugins for the rich text editor. For example, if your site is all about Linux and Open Source (like nixp.ru), your users would want to insert code snippets in their posts. This requires some special behavior, which is not provided by default. You have to code it yourself as a custom plugin.

Plugin creation is very closely related to DOM manipulation. TinyMCE has its own DOM API, but it is not nearly as comprehensive as the one provided by Prototype. Being used to walk the DOM with convenient methods like up and down, I hated TinyMCE for the lack of those.

As it turned out, you can't use Prototype methods while developing plugins for TinyMCE. Prototype correctly detects that Firefox 3 has implemented ElementExtensions and SpecificElementExtensions: that means Element.extend, used internally by dollar function, just returns the element, passing the stage of augmenting it with handy methods. The magic happens when designMode of document is set to 'On': Firefox doesn't apply these extensions to elements of such document. This results in awful behavior: you can't use Prototype methods on elements because Element.extend won't copy it to element thinking they are present (hey, Firefox already implemented them!), but the browser returns the elements untouched, just old plain HTMLElements.

My solution to this is a slightly different implementation of dollar function:
$t = (function() {

  var Methods = { }, ByTag = Element.Methods.ByTag;
  Object.extend(Methods, Element.Methods);
  Object.extend(Methods, Element.Methods.Simulated);

  var extend = function(element, force) {
    if (!element || (element._extendedByPrototype && !force) ||
        element.nodeType != 1 || element == window) return element;

    var methods = Object.clone(Methods),
      tagName = element.tagName, property, value;

    if (ByTag[tagName]) Object.extend(methods, ByTag[tagName]);

    for (property in methods) {
      value = methods[property];
      if (Object.isFunction(value) && !(property in element))
        element[property] = value.methodize();
    }

    element._extendedByPrototype = Prototype.emptyFunction;
    return element;
  }
  
  return extend;
})();
I gave it a different name because there is no need to override the dollar function: since the parent document of an iframe is not in designMode, it does the job properly most of the time. But in plugin development, usage of $t ensures the elements are extended with all the Prototype sugar. Sometimes (particularly, when you insert an extended element into another) the element loses its extended functions. I don't know why it happens. The workaround is the second parameter to $t, called force. This will force reaugmentation of an element disregarding the _extendedByPrototype property.

2009-01-13

Verbose boolean parameters

Suppose we program in Javascript. There is a function updatePost that takes a boolean parameter indicating whether it should highlight the updated post or not.
updatePost: function(highlight) {
  // ...code to update post...
  if (highlight) {
      post.highlight()
  }
}
One would definitely call it like this:
this.updatePost(true);
The problem is, that's not very explanatory. In other words, you can't tell straight from the line what this true does. I propose a solution that takes advantage of loose typing: just pass a string containing a parameter meaning as an argument.
this.updatePost('and highlight');
Now, this is definitily more verbose.

2009-01-05

Form Ajax upload with Opera

It looks like Opera hates having its forms disabled. Suppose you have a form with onSubmit handler attached to it using HTML.
<form action="..." onSubmit="return myHandler(this);">
and myHandler looks like that:
/*
form is the first argument to handler
the very form being submitted
*/
form.disable();
new Ajax.Request(form.action,{
 method: 'post',
 parameters: {
  username: $('loginFormUsername').value,
  password: $('loginFormPassword').value
 },
 onSuccess: this.loginSuccess.bind(this)
});
return false;
The code works fine in FF, Chrome ans Safari, but breaks in Opera. It seems that disabling the form in onSubmit handler somehow triggers its normal submission, although handler returns false. The only solution I found is to conditionalize the disabling of form:
if (!Prototype.Browser.Opera) {
 form.disable();
}
How do you manage such a problem?

Revert to default styles

For example, you've changed the default colors of a link using Prototype's setStyle.
$('answer-link').setStyle({
 color: '#000000',
 borderBottomColor: '#000000'
});
Then, after some action, you want to change the styles back to the original ones. You have an option of specifying them again:
$('answer-link').setStyle({
 color: '#B2B2B2',
 borderBottomColor: '#B2B2B2'
});
...but that means you'll have to change your JS if designer changes his CSS. This kind of dependency is bad and, in fact, could be avoided
$('answer-link').setStyle({
 color: '',
 borderBottomColor: ''
});
...by using empty strings as style property values.

2009-01-03

How to preload tinyMCE theme and language scripts

These three commands seem to do the job for me:
tinymce.ScriptLoader.add(tinymce.baseURL+'/langs/ru.js');
tinymce.ThemeManager.load('advanced', '/js/tiny_mce/themes/advanced/editor_template.js');
tinymce.ScriptLoader.loadQueue();
Of course, they should be called after main tinymce script is loaded.