Xinha Discussion Forum

X*

New member

Registered: 2009-08-03

Posts: 5

Use HTML class instead of id to fetch textareas (xinha_editors)

The following enhancement should NOT be part of Xinha official releases as it limits the use of HTML id attribute: you can have only one value for the id value, and using class attribute will implicitly give an ID to the element, erasing your previous ID if there is one.
So: using class instead of id doesn't "free" the id attribute, it is just an easier way to get textareas (which is explained below).

In some cases, you may prefer to use the HTML attribute 'class' instead of 'id' to fill the xinha_editors array (in your configuration file). Especially if you want to dynamically display textareas that have to become Xinha editors. Indeed, in order to make things clean, you would have to fill xinha_editors with as many IDs as you would theoretically have editors displayed at the same time. And the main problem would be to have your backend program to know how many editors are already displayed, in order to know which ID to use for the next one.

For this to be, you need to have a getElementsByClassName function. In the latest Xinha versions, there is a Xinha.getElementsByClassName that gives you exactly what you want (see Ticket #1303). Otherwise, most of code given around the Web will do, but it will return a HTML Collection which seems like an array but... not exactly. You'll need to convert its resulting collection to an array with Array.prototype.slice.call.
Each time I'll use

Xinha.getElementsByClassName( some_var )

you old Xinha guys will have to use

Array.prototype.slice.call( document.getElementsByClassName( some_var ) )

or, if you use this function only for this purpose, you can use Array.prototype.slice.call inside the function and then only use

document.getElementsByClassName( some_var )

Now, here is a choice you have to do. Either you want to use only the class attribute, and you'll alter Xinha.makeEditors, or you want to use sometimes class, sometimes id, and sometimes objects and then you'll just alter the array xinha_editors before it's passed to the function Xinha.makeEditors.

First case (not tested): xinha_editors will contain either strings representing class names, or objects. Spot Xinha.makeEditors' main loop and add before it another loop:

for(i in xinha_editors) {
 if(typeof xinha_editors[i] == 'string') {
  xinha_editors = xinha_editors.concat( Xinha.getElementsByClassName( xinha_editors[i] ) );
  xinha_editors[i] = null;
 }
}

Now your array will contain only objects fetched according to their classes, and the main loop can already handle objects.

Second case: you'll have to load objects from classes in xinha_editors before passing it to Xinha.makeEditors. Spot where xinha_editors is declared, in your configuration file:

xinha_editors = xinha_editors ? xinha_editors : 
[
 'your_id_1', 'your_id_2', 'your_id_3', ...
]

and change it as follows:

xinha_editors = xinha_editors ? xinha_editors : 
[
 'your_id_1', 'your_id_2', 'your_id_3', ...
]
.concat( Xinha.getElementsByClassName( 'your_class_1' ) )
.concat( Xinha.getElementsByClassName( 'your_class_2' ) )
.concat( Xinha.getElementsByClassName( 'your_class_3' ) )
;

Note the ' . ' sign before calling concat, as it is a method of Array, therefore applied to the IDs array ( defined between brackets [ and ]) or to the previous result of concat. Typically, you would need only one class, not three as shown in the example, but just in case...

Here it is, just add 'your_class_1' to the class attribute of textareas that you want to turn into editors, and you won't care of uniqueness of IDs anymore!

But remember: if you give an ID to your classed textareas, this ID will be erased by Xinha.makeEditors in the main loop (when it processes objects), at the line stated below:

textarea.id = 'xinha_id_' + x; //note by X*: x is the index in the array, unique

It also reminds you not to use IDs named 'xinha_id_N' where 'N' would be a number, as it would interfere with Xinha's autoID.

Have fun!