[OpenLayers-Trac] [OpenLayers] #1607: add methods for managing css class names

[OpenLayers]

#1607: add methods for managing css class names
--------------------------------+-------------------------------------------
  Reporter:  tschaub            |       Owner:  euzuro     
      Type:  feature            |      Status:  new        
  Priority:  minor              |   Milestone:  2.7 Release
 Component:  BaseTypes.Element  |     Version:  2.6        
Resolution:                     |    Keywords:             
     State:  Review             |  
--------------------------------+-------------------------------------------
Comment (by pagameba):

 tests pass in FF3 and Safari 3.1.1

 Before these become API methods, I propose that we change the names to
 hasClass, addClass, removeClass.  The addition of Name in the method names
 doesn't add semantic value and its more to type - if these methods get
 widely used in the library itself then that just adds unnecessary size to
 the library (albeit minor).

 As this is pretty common functionality of several existing libraries, I
 compared this implementation to what is being done in the mootools library
 and I have a couple of questions:

  1) hasClass(Name) is used quite a bit in the add and remove functions,
 and it seems likely that these methods will start to find widespread use.
 Without wanting to get into premature optimization, the mootools approach
 is to use the indexOf String method with an optional separator seems
 faster:

 (code)
 hasClass: function(element, name) {
     return (' '+element.className+' ').indexOf(' '+name+' ');
 }
 (end)

 I just profiled the two approaches in FF3 using loops of 10000 iterations
 and the indexOf approach seems to be somewhat to quite a bit faster - I
 was getting variable results that didn't always make sense.

  2) I don't quite understand how the regex in removeClass works, but the
 equivalent function in mootools is a bit different and I just want to make
 sure someone knowledgeable takes a look at the difference to make sure
 that our function covers all the bases.  The mootools regex is:

 (code)
 this.className.replace(new RegExp('(^|\\s)' + className + '(?:\\s|$)'),
 '$1').clean()
 (end)

 taking out the differences, the difference seems to be the addition of
 '?:' in the last part of the regex and $1 instead of ' '.

-- 
Ticket URL: <http://trac.openlayers.org/ticket/1607#comment:2>
OpenLayers <http://openlayers.org/>
A free AJAX map viewer