1 /** @fileoverview Widget convidativo ao projeto. Efetua transições exibindo informaçãoes de como interagir. 2 3 @version 1.0 4 @author Matheus Martins Teixeira <a href="mailto:mteixeira@grad.icmc.usp.br"><mteixeira@grad.icmc.usp.br></a> 5 */ 6 /** 7 Objeto com as funções para o widget convidatido do projeto. 8 @class 9 @name joinUs 10 */ 11 var joinUs = { 12 /** 13 Div que irá armazenar o widget. 14 @type DOM Object 15 */ 16 container : null, 17 /** 18 Tempo em milisegundos para a transição entre os frames. 19 @default 8000 20 @type int 21 */ 22 swapTime: 8000, 23 /** 24 Contador de transições 25 @type {int^} 26 @private 27 */ 28 counter : 0, 29 /** 30 Inicia o widget 31 @public 32 @function 33 */ 34 start : function() { 35 joinUs.container = $('<div>').addClass('main').appendTo('#container'); 36 var slide1 = joinUs.modelSlide(); 37 slide1.css('background', 'rgb(107,128,155)').append('<h1>Quer interagir?</h1><div><img height=60 src="mobile.png"/><img style="height:28px;padding:16px;" src="plus.png"/><img height=60 src="qr.jpg"/><img style="height:28px;padding:16px;" src="arrow.png"/><img height=60 src="web.png"/></div><h2>Simples! Tire uma fotografia com seu <b>celular</b> do <b>QRCode</b> e vá direto ao <b>link</b>!</h2'); 38 var slide2 = joinUs.modelSlide(); 39 slide2.css('background', 'rgb(250,169,84)').append('<h1>Quer participar?</h1><h2>compartilhe suas experiências no <b>ICMC</b>!</h2><h2><b>Fotos</b>, <b>vídeos</b>, <b>notícias</b> e muito mais!</h2><img src="com.png" width=60/><img style="height:28px;padding:16px;" src="plus.png"/><img width=60 src="f_logo.png"/><h2>Procure o grupo <b>ICMC Social</b> no <b>Facebook</b> e participe!</h2>'); 40 var slide3 = joinUs.modelSlide(); 41 slide3.css('background', 'rgb(204,202,217)').css('color', 'rgb(107,128,155)').append($('<iframe>').addClass('bandejao').attr('src','../bandejao/index.html')).append($('<iframe>').addClass('tempo').attr('src','http://www.cptec.inpe.br/widget/widget.php?p=4774&w=h&c=748ccc&f=ffffff')); 42 joinUs.container.append($('<div>').addClass('wrapper').append(slide1)).append($('<div>').addClass('wrapper').append(slide2)).append($('<div>').addClass('wrapper').append(slide3)); 43 setTimeout(function() { 44 joinUs.next(); 45 }, joinUs.swapTime); 46 }, 47 /** 48 Contrutor para um modelo de frame 49 @private 50 @returns {DOM Object} Retorna o objeto do modelo. 51 @function 52 */ 53 modelSlide : function() { 54 return $('<div>').addClass('page'); 55 }, 56 /** 57 Efetua a transição suave entre frames. 58 @private 59 @function 60 */ 61 next : function() { 62 var first = $(joinUs.container.children()[0]); 63 if(joinUs.counter < 2) { 64 first.animate({ 65 "margin-top" : (parseInt(first.css('margin-top'), 10) - 300) + 'px' 66 }, joinUs.swapTime/8, function() { 67 joinUs.counter++; 68 setTimeout(function() { 69 joinUs.next(); 70 }, joinUs.swapTime); 71 }); 72 } else { 73 first.animate({ 74 "margin-top" : '0px' 75 }, joinUs.swapTime/8, function() { 76 joinUs.counter = 0; 77 setTimeout(function() { 78 joinUs.next(); 79 }, joinUs.swapTime); 80 }); 81 } 82 } 83 }; 84 85 $(document).ready(function() { 86 joinUs.start(); 87 }); 88