{ var regExp = /(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&|?]+)/; var match = url.match(regExp); return (match && match.length) ? match[1] : false; } document.querySelectorAll('.video_plyr').forEach(function(el){ if(el.node != 'video'){ if(el.querySelector('video')){ el = el.querySelector('video'); } } if(typeof Plyr == 'function'){ let src = el.getAttribute('src'); if(src && src.split('.').pop() == 'mpd' && typeof dash != 'undefined'){ var dash = dashjs.MediaPlayer().create(); dash.initialize(el, src, true); } let pplayer = new Plyr(el); let ycode = youtube_parser(media.url); if(ycode){ pplayer.source = { type: 'video', sources: [ { src: ycode, provider: 'youtube', }, ], }; } if(src && src.split('.').pop() == 'm3u8'){ if (Hls.isSupported() && typeof Hls != 'undefined') { const hls = new Hls(); hls.loadSource(src); hls.attachMedia(el); } } } }); document.querySelectorAll('.vibebp_tabs_wrapper').forEach((tabs)=>{ tabs.querySelector(".vibebp_tab_titles > label").classList.add('active'); tabs.querySelector('.'+document.querySelector(".vibebp_tab_titles > label").getAttribute('for')).classList.add('show'); tabs.querySelectorAll(".vibebp_tab_titles > label").forEach(function(el){ el.addEventListener('click',function(){ tabs.querySelector(".vibebp_tab_titles > label.active").classList.remove('active'); el.classList.add('active'); tabs.querySelector('.vibebp_tab_content.show').classList.remove('show'); tabs.querySelector('.'+el.getAttribute('for')).classList.add('show'); }) }); }); //SCRATCH CARD START document.querySelectorAll(".scratcardContainer>canvas.scratchcard").forEach((scratchcard)=>{ let scratchcardCanvas = scratchcard.getContext('2d'); let img = new Image(); let brushRadius = 20; let imageObject = pathNameGetFromImage(scratchcard.getAttribute('front-image')); img.loc = imageObject.path; img.filename = imageObject.name; img.src = img.loc + img.filename; img.onload = function(){ console.log('image laoded'); scratchcardCanvas.drawImage(img, 0, 0, scratchcard.width, scratchcard.height); scratchcard.style.display = "block"; } function detectLeftButton(event) { if ('buttons' in event) { return event.buttons === 1; } else if ('which' in event) { return event.which === 1; } else { return event.button === 1; } } function getBrushPos(xRef, yRef) { var scratchcardRect = scratchcard.getBoundingClientRect(); return { x: Math.floor((xRef-scratchcardRect.left)/(scratchcardRect.right-scratchcardRect.left)*scratchcard.width), y: Math.floor((yRef-scratchcardRect.top)/(scratchcardRect.bottom-scratchcardRect.top)*scratchcard.height) }; } function drawDot(mouseX,mouseY){ scratchcardCanvas.beginPath(); scratchcardCanvas.arc(mouseX, mouseY, brushRadius, 0, 2*Math.PI, true); scratchcardCanvas.fillStyle = '#000'; scratchcardCanvas.globalCompositeOperation = "destination-out"; scratchcardCanvas.fill(); } scratchcard.addEventListener("mousemove", function(e) { var brushPos = getBrushPos(e.clientX, e.clientY); var leftBut = detectLeftButton(e); if (leftBut == 1) { drawDot(brushPos.x, brushPos.y); } }, false); scratchcard.addEventListener("touchmove", function(e) { e.preventDefault(); var touch = e.targetTouches[0]; if (touch) { var brushPos = getBrushPos(touch.pageX, touch.pageY); drawDot(brushPos.x, brushPos.y); } }, false); }); function pathNameGetFromImage(str){ const regex = /[^/\\&\?]+\.\w{3,4}(?=([\?&].*$|$))/g; let m; let ImageObj = { 'path':'', 'name':'' } while ((m = regex.exec(str)) !== null) { if (m.index === regex.lastIndex) { regex.lastIndex++; } m.forEach((match, groupIndex) => { if(groupIndex == 0 && match.length){ ImageObj.path = str.split(match)[0]; ImageObj.name = match; } }); } return ImageObj; } //SCRATCH CARD END //Image Revealer Start document.querySelectorAll('.cocoen').forEach(function(element){ new Cocoen(element); }); //Image Revealer End //Memory Game Start class MemoryGame { constructor(jsCard) { this.solved = false; this.duration = 1000; this.cardsContainer = jsCard; this.cards = Array.from(this.cardsContainer.children); } shuffleCards() { this.cards.forEach(card => { const randomNumber = Math.floor(Math.random() * this.cards.length) + 1; card.classList.remove('has-match'); setTimeout(() => { card.style.order = `${randomNumber}`; }, 400); }) } checkAllCards() { if (!this.cards.every(card => card.classList.contains('has-match'))) { return; }else{ if(!this.solved){ this.cardsContainer.insertAdjacentHTML("afterend", ""); } this.solved = true; let reloadButton = this.cardsContainer.parentElement.children[1]; let $this = this; $this.cardsContainer.style.opacity = 0.5; reloadButton.style.display = "block"; reloadButton.addEventListener('click',function(){ $this.shuffleCards(); reloadButton.style.display = "none"; $this.cardsContainer.style.opacity = 1; }); } if(!this.solved){ setTimeout(() => { this.shuffleCards(); }, this.duration); } } stopEvent() { this.cardsContainer.classList.add('no-event'); setTimeout(() => { this.cardsContainer.classList.remove('no-event'); }, this.duration); } checkIfMatched(firstCard, secondCard) { if (firstCard.dataset.card === secondCard.dataset.card) { firstCard.classList.remove('flipped'); secondCard.classList.remove('flipped'); firstCard.classList.add('has-match'); secondCard.classList.add('has-match'); this.checkAllCards(); } else { setTimeout(() => { firstCard.classList.remove('flipped'); secondCard.classList.remove('flipped'); }, this.duration); } } flip(selectedCard) { selectedCard.classList.add('flipped'); const flippedCards = this.cards.filter(card => card.classList.contains('flipped')); if (flippedCards.length === 2) { this.stopEvent(); this.checkIfMatched(flippedCards[0], flippedCards[1]); } } } document.querySelectorAll('.memorygame__cards.js-cards').forEach((jsCard)=>{ const memorygame = new MemoryGame(jsCard); memorygame.cards.forEach(card => { card.addEventListener('click', memorygame.flip.bind(memorygame, card)); }); }) //Memory Game End //CardStack start { var clickeventtype = 'click'; (function() { let types = ['yuda','krisna','wangi','wira','utari','cinta','eka','dian','iman','iskandar','kasih','buana','mawar']; types.map((type)=>{ document.querySelectorAll(`.cardstack_${type}`).forEach((elm)=>{ if(elm){ let stackElm = null; switch (type) { case 'yuda': case 'krisna': case 'wangi': case 'wira': case 'utari': stackElm = new Stack(elm); break; case 'cinta': stackElm = new Stack(elm, { perspective: 1400, perspectiveOrigin: '200% -100%', visible: 6, infinite: false, onEndStack: function(instance) { setTimeout(function() { instance.restart(); }, 300); } }); break; case 'eka': stackElm = new Stack(elm, { cardstackItemsAnimation : { duration: 800, type: dynamics.spring } }); break; case 'dian': stackElm = new Stack(elm, { cardstackItemsAnimationDelay : 100, cardstackItemsAnimation : { duration: 800, type: dynamics.spring, }, visible: 1, perspectiveOrigin: '50% 50%' }); break; case 'iman': stackElm = new Stack(elm, { cardstackItemsAnimation : { duration: 800, type: dynamics.spring }, cardstackItemsPreAnimation : { accept : { elastic: true, animationProperties: {translateX : 100, translateY : 10, rotateZ: 5}, animationSettings: { duration: 100, type: dynamics.easeIn } }, reject : { elastic: true, animationProperties: {translateX : -100, translateY : 10, rotateZ: -5}, animationSettings: { duration: 100, type: dynamics.easeIn } } } }); break; case 'iskandar': stackElm = new Stack(elm, { cardstackItemsAnimation : { duration: 800, type: dynamics.spring }, perspectiveOrigin : '50% 130%', visible: 5, cardstackItemsPreAnimation : { accept : { elastic: true, animationProperties: {translateX : 150, translateY : -10}, animationSettings: { duration: 200, type: dynamics.easeOut } } } }); break; case 'kasih': stackElm = new Stack(elm, { cardstackItemsAnimation : { duration: 1300, type: dynamics.spring, friction: 420, }, visible: 4, perspectiveOrigin : '50% 50%', cardstackItemsPreAnimation : { accept : { elastic: true, animationProperties: {translateX : 250}, animationSettings: { duration: 400, type: dynamics.easeIn } }, reject : { elastic: true, animationProperties: {translateX : -250}, animationSettings: { duration: 400, type: dynamics.easeIn } } } }); break; case 'buana': stackElm = new Stack(elm, { perspectiveOrigin : '-50% -50%' }); break; case 'mawar': stackElm = new Stack(elm, { perspective : 1500, perspectiveOrigin : '-150% 50%', visible: 4, cardstackItemsAnimation : { duration: 1300, type: dynamics.spring }, cardstackItemsPreAnimation : { accept : { elastic: true, animationProperties: {translateX : 100}, animationSettings: { duration: 200, type: dynamics.easeIn } }, reject : { elastic: true, animationProperties: {translateX : -100}, animationSettings: { duration: 200, type: dynamics.easeIn } } } }); break; default: stackElm = new Stack(elm); break; } if(stackElm){ elm.addEventListener(clickeventtype, function() { stackElm.accept(); }); } } }) }); })(); } //CardStack end },500); },false); Já aconteceu algum imprevisto em sua vida? Algum que você necessitou de dinheiro não disponível no momento? Algumas vezes acontecem …" >
0

Introdução

Já aconteceu algum imprevisto em sua vida?

Algum que você necessitou de dinheiro não disponível no momento?

Algumas vezes acontecem coisas que fogem do nosso controle. Nesse módulo você vai aprender um dos

principais pilares para sua vida financeira, o que é e como montar uma reserva de emergência.

📷

Arquivos

Categorias

Meta