"

From 2010.igem.org

// EventSelectors // Copyright (c) 2005-2006 Justin Palmer (http://encytemedia.com) // Examples and documentation (http://encytemedia.com/event-selectors) // // EventSelectors allow you access to Javascript events using a CSS style syntax. // It goes one step beyond Javascript events to also give you :loaded, which allows // you to wait until an item is loaded in the document before you begin to interact // with it. // // Inspired by the work of Ben Nolan's Behaviour (http://bennolan.com/behaviour) // // Permission is hereby granted, free of charge, to any person obtaining // a copy of this software and associated documentation files (the // "Software"), to deal in the Software without restriction, including // without limitation the rights to use, copy, modify, merge, publish, // distribute, sublicense, and/or sell copies of the Software, and to // permit persons to whom the Software is furnished to do so, subject to // the following conditions: // // The above copyright notice and this permission notice shall be // included in all copies or substantial portions of the Software. // // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. //

/*

• • Making it work:**

|You need to start the event:Selectors before they will do anything:

EventSelectors.start(Rules);

|This should either go an an onload event in the head of your document or right |before the closing body tag.

• /

var EventSelectors = {

 version: '1.0_pre',
 cache: [],
 
 start: function(rules) {
   this.rules = rules || {};
   this.timer = new Array();
   this._extendRules();
   this.assign(this.rules);
 },
 
 assign: function(rules) {
   var observer = null;
   this._unloadCache();
   rules._each(function(rule) {
     var selectors = $A(rule.key.split(','));
     selectors.each(function(selector) {        
       var pair = selector.split(':');
       var event = pair[1];
       $$(pair[0]).each(function(element) {
         if(pair[1] ==  || pair.length == 1) return rule.value(element);
         if(event.toLowerCase() == 'loaded') {
           this.timer[pair[0]] = setInterval(this._checkLoaded.bind(this, element, pair[0], rule), 15);
         } else {
           observer = function(event) {
             var element = Event.element(event);
             if (element.nodeType == 3) // Safari Bug (Fixed in Webkit)
           		element = element.parentNode;
             rule.value($(element), event);
           }
           this.cache.push([element, event, observer]);
           Event.observe(element, event, observer);
         }
       }.bind(this));
     }.bind(this));
   }.bind(this));
 },
 
 // Scoped caches would rock.
 _unloadCache: function() {
   if (!this.cache) return;
   for (var i = 0; i < this.cache.length; i++) {
     Event.stopObserving.apply(this, this.cache[i]);
     this.cache[i][0] = null;
   }
   this.cache = [];
 },
 
 _checkLoaded: function(element, timer, rule) {
   var node = $(element);
   if(element.tagName != 'undefined') {
     clearInterval(this.timer[timer]);
     rule.value(node);
   }
 },
 
 _extendRules: function() {
   Object.extend(this.rules, {
    _each: function(iterator) {
      for (key in this) {
        if(key == '_each') continue;         
        var value = this[key];
        var pair = [key, value];
        pair.key = key;
        pair.value = value;
        iterator(pair);
      }
    }  
   });
 }

}

// Remove/Comment this if you do not wish to reapply Rules automatically // on Ajax request. /* Ajax.Responders.register({

 onComplete: function() { EventSelectors.assign(Rules);}

})

• /

/***************************************************************************************************************************************/

function hide(elements) {

   elements.each(function(a){a.hide();});

} function setupStyles() {

 $("logo").hide();
 $("central_top_back").hide();
 hide(  $$('#main_menu').concat( $$('h1') ).concat( $$('h4') ).concat( $$('h5') ).concat( $$('.section') )  );
 Element.setStyle("footer", {color:"#C9CACC"});
 new Effect.Morph("footer",{
   style:'color:#777777',
   duration: 4
 });

}

function chainAppear(elements){

 //alert(a);
 //elements.each(function(a){a.hide(); });
 new Effect.DelayedChain('Appear', elements, { duration: 0.5 }, 200);

} function sectionSelector( callingElement, options ){

 options = options || {};
 prefix = options.withoutPrefix ? "" : "#";
 if (callingElement)
   return prefix+callingElement.getAttribute('href').split('#')[1];
 else
   return prefix+( window.location.href.split('#')[1] || "main" );

}

// Probably want to remove these and create your own. var Rules = {

 '#foobar': function(element, event) {
   elements = $$('#main_menu').concat( $$('h1') ).concat( $$('h4') ).concat( $$('h5') )
   section = $(sectionSelector(null, {withoutPrefix:true}))
   if ( section && section.hasClassName('section') ){
     elements = elements.concat( section );
     $$('h4 a').each(function(link){if (section.id == link.href.split('#')[1]) link.addClassName('active');})
   } else {
     elements = elements.concat( $("main") );
   }
   elements = [$('top'), $('central'), $('footer')].concat(elements);
   
   chainAppear( elements );
   /safari/.test(navigator.userAgent.toLowerCase()) ? new Effect.SlideDown("logo" , { duration: 2 } ) : $('logo').show();
   new Effect.Appear("central_top_back" , { duration: 4 } );
   /*new Effect.Morph("central_top_back",{
     style:'background-position:-150px 0',
     duration: 9, queue:{scope:'subtitle' }
   });*/
 },
 
 'h4 a:click': function(element, event) {
   //new Effect.ScrollTo('top');
   $$(".section").each(function(section){
     if ( Element.visible(section) && section.id != sectionSelector(element, {withoutPrefix:true}) )
       //new Effect.SlideUp( section.id.toString() );
       new Effect.Fade( section.id.toString(), { queue:{scope:'sections_queue', position:'end'} });
       //section.id.hide();
   });
   section = $( sectionSelector(element, {withoutPrefix:true}) )
   if ( !Element.visible(section) ){
     new Effect.Appear( section , { duration: 1.5, queue:{scope:'sections_queue', position:'end'} } );
   }
   $$('h4 a').each(function(link){link.removeClassName('active');})
   element.addClassName('active');
   /*Event.stop(event);*/
 }

}