Skip to content

Instantly share code, notes, and snippets.

@lagden
Created July 19, 2018 12:46
Show Gist options
  • Save lagden/65771a5d928090508f16e19652f02be0 to your computer and use it in GitHub Desktop.
Save lagden/65771a5d928090508f16e19652f02be0 to your computer and use it in GitHub Desktop.
Agrega
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Agrega</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<link href="./agrega/main.css" rel="stylesheet" type="text/css">
<!-- Folha de estilo do iframe do Nimble + FormAgrega -->
<style>
#texAppPlace {
width: 100%;
position: relative;
display: block;
flex: 1 1 100%;
}
#agregaAppIframe,
#nimbleAppIframe {
width: 100%;
min-height: 100%;
display: block;
margin: 0 auto;
background: transparent;
}
</style>
</head>
<body class="grid">
<header class="grid__head">
<h1 class="corretora">Corretora</h1>
<img class="logo" src="./agrega/logo.svg" alt="Liberty">
</header>
<!-- Local onde será criado o iframe-->
<main class="grid__main" id="texAppPlace" data-nimble="https://agrega-dev.nimble.com.br" data-color="#A4C14A"></main>
<footer class="grid__foot">Copyright © 2018 TEx Tecnologia. All rights reserved.</footer>
<!-- Snippet -->
<script src="https://assets.nimble.com.br/snippet/iframeResizer/3.5.7/iframeResizer.min.js"></script>
<script src="https://agrega-dev.nimble.com.br/snippet.js"></script>
<!-- Inicializa Form -->
<script src="./agrega/module.js" type="module"></script>
</body>
</html>
body,
html {
width: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.grid {
width: 100%;
/*min-height: 100vh;*/
display: grid;
grid-gap: 0;
grid-auto-flow: dense;
/*grid-template-columns: 1fr;*/
grid-template-rows: 120px 1fr 70px;
grid-template-areas: "head head"
"main main"
"foot foot";
}
.grid__head {
grid-area: head;
background-color: #C3C3C3;
color: white;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.grid__main {
grid-area: main;
background-color: #f1f1f1;
min-height: calc(100vh - 120px - 70px);
}
.grid__foot {
grid-area: foot;
background-color: #9F9F9F;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.logo {
width: 150px;
padding: 1em;
}
.corretora {
padding: 1em;
margin: 0
}
/* globals document, window, iFrameResize, texNimbleSnippet */
'use strict'
const formOrigin = 'https://api.nimble.com.br'
const formUrl = `${formOrigin}/agrega-form/v1`
// Iframe do formulário do Agrega
let iframeAgrega
// Helpers
// Convert obj para querystring
function _obj2qs(obj) {
const arr = []
Object.keys(obj).forEach(k => {
arr.push(`${k}=${obj[k]}`)
})
return arr.join('&')
}
// Handler (iframe)
function _formLoad() {
this.removeEventListener('load', _formLoad, false)
if ('iFrameResize' in window) {
iFrameResize({heightCalculationMethod: 'taggedElement'}, '#' + this.id)
}
}
// Cria iframe
function _criaIframe(id, baseUrl, place, _onLoad) {
const docFragment = document.createDocumentFragment()
iframeAgrega = document.createElement('iframe')
iframeAgrega.id = id
iframeAgrega.src = baseUrl + '/' + window.location.search
iframeAgrega.scrolling = 'no'
iframeAgrega.frameBorder = 0
docFragment.appendChild(iframeAgrega)
place.appendChild(docFragment)
iframeAgrega.addEventListener('load', _onLoad, false)
}
// Carrega o formulário do Agrega no iframe
function initAgrega() {
const place = document.querySelector('#texAppPlace')
_criaIframe('agregaAppIframe', formUrl, place, _formLoad)
}
// Helpers do postMessage
// Esconde o form do Agrega
function _removeAgregaForm(cb) {
iframeAgrega.style.display = 'none'
cb()
}
// Helpers do postMessage
// Carrega o Nimble se o item Automóvel foi checado
function _carregaNimble(data) {
data.useFB = 0
const qs = window.location.search + (window.location.search === '' ? '?' : '&') + _obj2qs(data)
const place = document.querySelector('#texAppPlace')
texNimbleSnippet(place, qs)
}
// Handler (postMessage) do FormAgrega
function _postMessageFormAgrega(event) {
const origin = event.origin || event.originalEvent.origin
// Valida a origin do postMessage
if (origin !== formOrigin) {
return
}
// Verifica a existência de dados
const message = event.data
if (!message || !message.type) {
return false
}
// Manipuladores
switch (message.type) {
case 'agregaForm.nimble':
_removeAgregaForm(() => _carregaNimble(message.data))
break
default:
console.debug(`message.type(${message.type}) sem manipulador`)
}
}
// Listener (postMessage)
window.addEventListener('message', _postMessageFormAgrega, false)
// Init
initAgrega()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment