/** * Classe principal do website. */ iMicrocis.Interface = Class.create(iMicrocis, { /** * Executa ao instanciar a classe. */ initialize: function() {}, /** * Carrega a interface. * * @deprecated */ load: function(area) { this.show(area); }, /** * Exibe a interface (ou parte dela). * * @param String area A classe da área a ser carregada. */ show: function(interface) { // Prossegue de acordo com a interface (ou parte dela). switch (interface) { // Página inicial. case 'home': // Retorna o elemento do contêiner. container = $('home').getElementsByClassName('container')[0]; // Retorna o elemento do cabeçalho. containerHeader = container.getElementsByClassName('header')[0]; // Oculta os elementos do título e do slogan do cabeçalho. Element.hide(containerHeader.getElementsByClassName('title')[0]); Element.hide(containerHeader.getElementsByClassName('slogan')[0]); // Retorna os elementos da área e da lista de serviços. containerService = container.getElementsByClassName('service')[0]; containerServiceList = containerService.getElementsByClassName('service')[0]; // Oculta os elementos da lista de serviços. containerServiceList.descendants().each( function(element, index) { if (index == 0 || index == 8 || index == 16 || index == 24 || index == 31) Element.hide(element); } ); // Oculta o elemento da área de serviço. Element.hide(containerService); // Retorna o elemento da área de navegação. containerNavigation = container.getElementsByClassName('navigation')[0]; // Oculta o elemento da área de navegação. Element.hide(containerNavigation); // Retorna o elemento da área de rodapé. containerFooter = container.getElementsByClassName('footer')[0]; // Retorna o elemento da área de informações do rodapé. containerFooterInfo = containerFooter.getElementsByClassName('info')[0]; // Oculta os elementos das informações do desenvolvedor e do ícones de validação para a W3C. Element.hide(containerFooterInfo.getElementsByClassName('developer')[0]); Element.hide(containerFooterInfo.getElementsByClassName('w3c-icon')[0]); // Oculta o elemento do rodapé. Element.hide(containerFooter); /*// Retorna o elemento da área de notícias. containerNews = container.getElementsByClassName('news')[0]; // Oculta o elemento da área de notícias. Element.hide(containerNews); // Oculta os elementos descendentes da área de notícias. containerNews.descendants().each( function(element, index) { if (index == 1 || index == 3) Element.hide(element); } );*/ // Oculta o elemento do contêiner. Element.hide(container); // Retorna o elemento do "blackout". blackout = $('home').getElementsByClassName('blackout')[0]; // Oculta, quase que totalmente, o elemento do "blackout". new Effect.Fade(blackout, {duration: 0.1, from: 0, to: 0.01, queue: {position: 'end', scope: 'core'}}); // Exibe o elemento do contêiner. new Effect.Appear(container, {duration: 0.3, from: 0, to: 1, queue: {position: 'end', scope: 'core'}}); // Oculta totalmente o elemento do "blackout". new Effect.Fade(blackout, {duration: 0.1, from: 0.01, to: 0, queue: {position: 'end', scope: 'core'}}); // Exibe os elementos do cabeçalho e da área de serviços. new Effect.Appear(containerHeader.getElementsByClassName('title')[0], {duration: 0.5, from: 0, to: 1, queue: {position: 'end', scope: 'core'}, delay: 0.2}); new Effect.Appear(containerService, {duration: 0.3, from: 0, to: 1, queue: {position: 'end', scope: 'core'}}); // Define o delay padrão para o próximo efeito. containerServiceListDelay = 0.7; // Exibe os elementos da lista de serviços. containerServiceList.descendants().each( function(element, index) { // Elementos da lista. if (index == 0 || index == 8 || index == 16 || index == 24 || index == 32 || index == 39) { // Exibe o elemento atual. new Effect.Appear(element, {duration: 0.3, from: 0, to: 1, queue: {position: 'end', scope: 'core'}, delay: containerServiceListDelay}); // Verifica se o está como padrão define um menor. if (containerServiceListDelay == 0.7) containerServiceListDelay = 0.2; } } ); // Exibe os elementos do slogan do cabeçalho, do rodapé (área do desenvolvedor e ícones da W3C) e da navegação. new Effect.Appear(containerHeader.getElementsByClassName('slogan')[0], {duration: 0.5, from: 0, to: 1, queue: {position: 'end', scope: 'core'}, delay: 1}); new Effect.Appear(containerFooter, {duration: 0.3, from: 0, to: 1, queue: {position: 'end', scope: 'footer'}, delay: 6.5}); new Effect.Appear(containerFooterInfo.getElementsByClassName('developer')[0], {duration: 0.3, from: 0, to: 1, queue: {position: 'end', scope: 'footer'}, delay: 0.2}); new Effect.Appear(containerFooterInfo.getElementsByClassName('w3c-icon')[0], {duration: 0.3, from: 0, to: 1, queue: {position: 'end', scope: 'footer'}, delay: 0.2}); new Effect.Appear(containerNavigation, {duration: 0.5, from: 0, to: 1, queue: {position: 'end', scope: 'navigation'}, delay: 6.5}); /*newsLead = { list: null, item: null, delay: null, trigger: function() { newsLead.list = containerNews.getElementsByClassName('lead'); newsLead.item = 0; newsLead.delay = 3; newsLead.show(); }, show: function() { if (newsLead.list != undefined && newsLead.list[newsLead.item] != undefined) new Effect.Appear(newsLead.list[newsLead.item], {from: 0, to: 1, duration: 0.5, queue: {scope: 'newsLead', position: 'end'}, afterFinish: newsLead.hide}) else { newsLead.item = 0; newsLead.show(); } }, hide: function() { if (newsLead.list != undefined && newsLead.list[newsLead.item] != undefined) new Effect.Fade(newsLead.list[newsLead.item], {from: 1, to: 0, duration: 0.5, queue: {scope: 'newsLead', position: 'end'}, delay: newsLead.delay, afterFinish: newsLead.change}) }, change: function() { newsLead.item = newsLead.item+1; newsLead.show(); } }; new Effect.Appear(containerNews, {duration: 0.2, queue: {position: 'end', scope: 'navigation'}, delay: 0.2, afterFinish: newsLead.trigger});*/ break; case 'about': new Effect.Appear($('about').getElementsByClassName('container')[0], {duration: 0.5, from: 0, to: 1, queue: {position: 'end', scope: 'interface-01'}}); function transitionEffect() { new Effect.Appear($('about').getElementsByClassName('photo-02')[0], {duration: 1.5, from: 0, to: 1, queue: {scope: 'transition01', position: 'end'}, delay: 2}); new Effect.Appear($('about').getElementsByClassName('photo-03')[0], {duration: 1.5, from: 0, to: 1, queue: {scope: 'transition01', position: 'end'}, delay: 2}); new Effect.Appear($('about').getElementsByClassName('photo-04')[0], {duration: 1.5, from: 0, to: 1, queue: {scope: 'transition01', position: 'end'}, delay: 2}); new Effect.Appear($('about').getElementsByClassName('photo-05')[0], {duration: 1.5, from: 0, to: 1, queue: {scope: 'transition01', position: 'end'}, delay: 2}); new Effect.Appear($('about').getElementsByClassName('photo-01')[0], {duration: 1.5, from: 0, to: 1, queue: {scope: 'transition01', position: 'end'}, delay: 2}); new Effect.Fade($('about').getElementsByClassName('photo-01')[0], {duration: 1.5, from: 1, to: 0, delay: 16}); new Effect.Fade($('about').getElementsByClassName('photo-02')[0], {duration: 1.5, from: 1, to: 0, delay: 16}); new Effect.Fade($('about').getElementsByClassName('photo-03')[0], {duration: 1.5, from: 1, to: 0, delay: 16}); new Effect.Fade($('about').getElementsByClassName('photo-04')[0], {duration: 1.5, from: 1, to: 0, delay: 16}); new Effect.Fade($('about').getElementsByClassName('photo-05')[0], {duration: 1.5, from: 1, to: 0, delay: 16}); } transitionEffect(); new PeriodicalExecuter(transitionEffect, 17.5); break; case 'contact': new Effect.Appear($('contact').getElementsByClassName('container')[0], {duration: 0.5, from: 0, to: 1, queue: {position: 'end', scope: 'interface-01'}}); break; case 'client': new Effect.Appear($('client').getElementsByClassName('container')[0], {duration: 0.5, from: 0, to: 1, queue: {position: 'end', scope: 'interface-01'}}); break; case 'support': new Effect.Appear($('support').getElementsByClassName('container')[0], {duration: 0.5, from: 0, to: 1, queue: {position: 'end', scope: 'interface-01'}}); } }, getPageSize: function() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = window.innerWidth + window.scrollMaxX; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; // console.log(self.innerWidth); // console.log(document.documentElement.clientWidth); if (self.innerHeight) { // all except Explorer if(document.documentElement.clientWidth){ windowWidth = document.documentElement.clientWidth; } else { windowWidth = self.innerWidth; } windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // console.log("xScroll " + xScroll) // console.log("windowWidth " + windowWidth) // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = xScroll; } else { pageWidth = windowWidth; } // console.log("pageWidth " + pageWidth) arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) return arrayPageSize; } });