/** * Showcase Javascript object * * @package Stickerei-Stoiber showcase * @subpackage Object * @category Javascript * @author Misa Brezanac * @copyright Stickerei-Stoiber */ Showcase = { /* * Showcase tabs subobject. */ Tab : { /* * Resets the tabs classes to their initiate state and selects the one that * has been choosen while additionally showing the requested tab content container. * * @param event The event itself that triggered this method call [click on a tab link] */ setActiveTab : function(event){ /* * Now extract the element (link) that triggered the action */ var element = Event.element(event); /* * Before we do any content change we need to make sure that we unmark all the tabs and additionally * mark the selected tab. */ $$('div.scTab').invoke('removeClassName', 'scSelected').invoke('removeClassName', 'scSpecialSelected'); /* * And remove any existing residual hover effect */ Showcase.Tab.clearHoveredTabs(); /* * If the page contains dynamic tab pre-content containers identified by 'scTabPreContent_#' * the pre-content container of the selected tab is shown. Of course first all the others are hidden. * These dynamic containers are identified with a 'scPreContentDynamic' CSS class. */ $$('div.scPreContentDynamic').invoke('hide'); if($(element.identify().sub('scTabLink_','scTabPreContent_'))){ $(element.identify().sub('scTabLink_','scTabPreContent_')).show(); } /* * Then we mark the selected one but check to see if it is a normal or a special tab. * Since there are two types of tabs we need to make propper class asignment in case * of each of them. */ if(element.up('div.scTab').hasClassName('scSpecial')){ /* * A normal tab is to be selected. */ $(element.up('div.scTab').addClassName('scSpecialSelected')); } else { /* * A special tab is to be selected. */ $(element.up('div.scTab').addClassName('scSelected')); } /* * Hiding the 'scExtractedTabText' container which containes ShowCase non specific content. */ $('scExtractedTabText').hide(); /* * Here we hide all of the tab content containers. */ $$('div.scTabContainer').invoke('hide'); /* * While the containers are hidden during the tab switch we need to reset all of the tab containers contents * to show the first container within it. But first we need to hide all of them. */ Showcase.ColorSelector.hideAllModels(); /* * Here we unhide the first model in every tab container... */ $$('div.scModelWrapper').invoke('firstDescendant').invoke('appear'); /* * ...and additionally update the color name in the scColorTitle container with the name * of the first color in the tab container */ /* * First we retrieve the class name of the selected tabContainer (i.e. 'scTabContent_1') */ var tabName = element.identify().sub('scTabLink_','scTabContent_'); /* * Then we select the very first color from the color selector and check to see if it is * a direct descendant of the selected tab container to display. If it is that means * that the 'scColorTitle' is to be updated with the current color name. */ $$('div.scColorSelectorColors').invoke('firstDescendant').each(function(s){ if(s.descendantOf(tabName)){ /* * The rel atribute of the current color is used to pass the name of the color. */ Showcase.ColorSelector.changeColorTitle(s.rel); } }); /* * This is the place where the actual content is displayed for the selected tab. */ $(element.identify().sub('scTabLink_','scTabContent_')).appear(); /* * This is the tricky part. We wait 100 milliseconds for the above container to appear properlly * so that no ugly flicker effect with the new content is displayed. */ setTimeout(function() {$('scExtractedTabText').show();}, 100 ); }, /** * Simulates a hover effect when a mouse has left the tab (onmouseout) * * @param event The event that triggered the call to this function */ clearHoveredTabs : function(){ /* * We clear all the possible fields that set their state to hovered during mouse overs. * Usually its just one tab. */ $$('div.scTab').invoke('removeClassName', 'scHovered').invoke('removeClassName', 'scSpecialHovered'); }, /** * Simulates a hover effect when a mouse is over the tab (onmouseover) * * @param event The event that triggered the call to this function */ setHoveredTab : function(event){ /* * First we extract the element that triggered the call */ var element = Event.element(event); /* * Before we set a currently hovered tab we need to "unhover" all of them. */ Showcase.Tab.clearHoveredTabs(); /* * The final step would be to see if the targeted tab is of special or normal type and assign an appropriate * hovered class to it. The selected containers are not hovered! */ if(!element.up('div.scTab').hasClassName('scSelected') && !element.up('div.scTab').hasClassName('scSpecialSelected')){ if(element.up('div.scTab').hasClassName('scSpecial')){ /* * A normal tab is to be made hovered. */ $(element.up('div.scTab').addClassName('scSpecialHovered')); } else { /* * A special tab is to be made hovered. */ $(element.up('div.scTab').addClassName('scHovered')); } } }, /** * To avoid content duplication this method copies the additional content from one * tab to all the others */ basecapsCopyAdditionalContent : function(){ $$('div.scAdditionalContent').invoke('update', $('scCopySource').innerHTML); } }, /* * The Color Selector subobject */ ColorSelector : { /* * Switches the active model color */ changeColor : function(event){ /* * Firts we hide all of the models */ Showcase.ColorSelector.hideAllModels(); /* * Now the container of the selected color is shown */ var element = Event.element(event); /* * The selected color. Since click events are fired upon images and rel are forbidden on anything else except links * we traverse the DOM one level up and find the rel parameter of the link. */ var color = element.up().readAttribute('rel'); /* * Now we make every model container with selected color appear no matter how much there are. */ $$('div.scModelContainer-' + color).invoke('appear'); /* * And finally the color name container is updated with the currentlly selected color. */ Showcase.ColorSelector.changeColorTitle(color); }, /* * Used to hide all of the model containers in the ShowCase. Extracted since its used in * several places. */ hideAllModels : function(){ /* * Closing a currently active color by closing all color containers. * NOTE: The buggy Opera XPath requires the > operator in order for this to work! */ $$('div.scModelWrapper > div').invoke('hide'); }, /* * The following block handles the German umlauts contra-transliteration. */ changeColorTitle : function(color){ switch(color){ case 'apfelgruen' : $$('div.scColorTitle').invoke('update', 'Apfelgr\u00FCn'); break; case 'dunkelgruen' : $$('div.scColorTitle').invoke('update', 'Dunkelgr\u00FCn'); break; case 'tuerkis' : $$('div.scColorTitle').invoke('update', 'T\u00FCrkis'); break; case 'kellygruen' : $$('div.scColorTitle').invoke('update', 'Kelly Gr\u00FCn'); break; default : $$('div.scColorTitle').invoke('update', color.capitalize()); } } }, /* * The Lightbox control subobject */ Lightbox : { /* * Contains the list of Lightbox groups which will be created on the page. * The actual links which will trigger the Lightbox groupping need to have * a class attached to it in the format '.scLightbox-'+ lightboxGroups element */ lightboxGroups : new Array('T200', 'T150', 'T300', 'T280', 'Damen', 'Herren', 'Bistroschuerzen', 'Latzschuerzen', 'Handtuecher'), /* * Used to attach REL attributes to Lightbox links and avoid SEO complaints about HTML * containig non-standard REL atribute values. I never really understood those SEO guys... */ attachRel : function(){ /* * The actual REL attachment is done here */ this.lightboxGroups.each(function(s){ $$('.scLightbox-' + s).invoke('writeAttribute', 'rel', 'lightbox['+ s +']'); }); } }, /* * The Showcase initialization stuff which executes at the very begining of the page loading. * This method is executed at DOM not page load (fired at DOMContentLoaded event) */ initShowCase : function(){ /* * Event handlers for hover (onmouseover) action are attached to Tab links */ $$('div.scTabLink').invoke('observe','mouseover', Showcase.Tab.setHoveredTab); /* * Event handlers for hover (onmouseout) action are attached to Tab Links */ $$('div.scTabLink').invoke('observe','mouseout', Showcase.Tab.clearHoveredTabs); /* * Event handlers for click action are attached to Tab links */ $$('div.scTabLink').invoke('observe','click', Showcase.Tab.setActiveTab); /* * Event handlers are attached to Color Selectors */ $$('.scColor').invoke('observe', 'click', Showcase.ColorSelector.changeColor); } }