Created
December 16, 2014 13:03
-
-
Save cmilfont/27ada42f077ee14ec03c to your computer and use it in GitHub Desktop.
Desafio CEJS 2014 https://gist.github.com/mozartdiniz/0f53ad6156e12bca2dec
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.modalDialog { | |
position: fixed; | |
font-family: Arial, Helvetica, sans-serif; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
background: rgba(0,0,0,0.8); | |
z-index: 99999; | |
opacity:0; | |
-webkit-transition: opacity 400ms ease-in; | |
-moz-transition: opacity 400ms ease-in; | |
transition: opacity 400ms ease-in; | |
pointer-events: none; | |
} | |
.modalDialog:target { | |
opacity:1; | |
pointer-events: auto; | |
} | |
.open { | |
opacity:1; | |
pointer-events: auto; | |
} | |
.modalDialog > div { | |
width: 400px; | |
position: relative; | |
margin: 10% auto; | |
padding: 5px 20px 13px 20px; | |
border-radius: 10px; | |
background: #fff; | |
background: -moz-linear-gradient(#fff, #999); | |
background: -webkit-linear-gradient(#fff, #999); | |
background: -o-linear-gradient(#fff, #999); | |
} | |
.modalDialog > div > h2 { | |
color: #920; | |
font-family: initial!important; | |
font-size: 30px; | |
font-weight: bold; | |
left: initial!important; | |
position: initial!important; | |
top: initial!important; | |
} | |
.modalDialog > div > .close { | |
background: #606061; | |
color: #FFFFFF; | |
line-height: 25px; | |
position: absolute; | |
right: -12px; | |
text-align: center; | |
top: -10px; | |
width: 24px; | |
text-decoration: none; | |
font-weight: bold; | |
-webkit-border-radius: 12px; | |
-moz-border-radius: 12px; | |
border-radius: 12px; | |
-moz-box-shadow: 1px 1px 3px #000; | |
-webkit-box-shadow: 1px 1px 3px #000; | |
box-shadow: 1px 1px 3px #000; | |
opacity: 0.5; | |
} | |
.modalDialog > div > .close:hover { background: #00d9ff; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var DialogWindow = function(config) { | |
this.dom = document.createElement("div"); | |
this.dom.setAttribute("class", "modalDialog"); | |
this.dom.setAttribute("id", "openModal"); | |
var close = document.createElement("a"); | |
close.setAttribute("class", "close"); | |
close.setAttribute("title", "Close"); | |
close.setAttribute("href", "#close"); | |
close.innerHTML = "X"; | |
var title = document.createElement("h2"); | |
title.innerHTML = config.title; | |
var content = document.createElement("div"); | |
if(config.content) { | |
if(typeof config.content === "string") { | |
content.innerHTML = config.content; | |
} else { | |
content.innerHTML = ""; | |
content.appendChild(config.content); | |
} | |
} | |
var bodyWindow = document.createElement("div"); | |
bodyWindow.appendChild(close); | |
bodyWindow.appendChild(title); | |
bodyWindow.appendChild(content); | |
this.dom.appendChild(bodyWindow); | |
document.body.appendChild( this.dom ); | |
this.close = function() { | |
document.body.removeChild( this.dom ); | |
}; | |
this.show = function() { | |
this.dom.setAttribute("class", "modalDialog open"); | |
} | |
var scope = this; | |
close.addEventListener("click", function(evt) { | |
evt.preventDefault(); | |
scope.close(); | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var JiujitsuTeam = {}; | |
JiujitsuTeam.Field = { | |
text: function(field) { | |
var input = document.createElement("input"); | |
input.setAttribute("id", field.id || field.name); | |
input.setAttribute("name", field.name); | |
input.setAttribute("class", "form-control"); | |
input.setAttribute("placeholder", "Enter text"); | |
input.setAttribute("mandatory", field.mandatory ); | |
var mandatory = function(event) { | |
/* dever de casa */ | |
console.log(event.target.value, event.target.checked); | |
}; | |
input.addEventListener("keyup", mandatory.bind(input) ); | |
input.addEventListener("change", mandatory.bind(input) ); | |
return input; | |
}, | |
button: function(field) { | |
var input = JiujitsuTeam.Field.text.call(this, field); | |
input.setAttribute("type", "button"); | |
input.setAttribute("value", field.name); | |
/* | |
dever de casa generalizar buttons, aqui convencionei | |
que só teremos submit | |
*/ | |
input.addEventListener("click", function(evt){ | |
evt.preventDefault(); | |
evt.target.formParent.save(); | |
}.bind(input) ); | |
return input; | |
}, | |
date: function(field) { | |
var input = JiujitsuTeam.Field.text.call(this, field); | |
input.setAttribute("type", "date"); | |
input.setAttribute("placeholder", "Enter Date"); | |
return input; | |
} | |
} | |
JiujitsuTeam.FormEngine = function(model) { | |
this.form = document.createElement("form"); | |
var _model = model; | |
this.getModel = function() { | |
return _model || {}; | |
}; | |
this.setModel = function(model) { | |
_model = model; | |
}; | |
this.save = function() { | |
if( this.getModel().id ) { | |
console.log("Atualiza"); | |
} else { | |
console.log("Cria"); | |
} | |
}; | |
this.createLabel = function(field) { | |
var label = document.createElement("label"); | |
label.setAttribute("for", field.name); | |
label.innerHTML = field.name; //Dever de casa, fazer I18n aqui | |
return label; | |
}; | |
this.createInput = function(field) { | |
var constructor = JiujitsuTeam.Field[field.type] || JiujitsuTeam.Field['text']; | |
var input = new constructor(field); | |
input.formParent = this; | |
return input; | |
}; | |
this.createField = function(field) { | |
var formGroup = document.createElement("div"); | |
formGroup.setAttribute("class", "form-group"); | |
if( field.type !== 'button') { | |
formGroup.appendChild( this.createLabel(field) ); | |
} | |
formGroup.appendChild( this.createInput(field) ); | |
return formGroup; | |
}; | |
this.createFields = function(sectionArea, section) { | |
if( Array.isArray(section.fields) ) { | |
section.fields.forEach( function(field){ | |
sectionArea.appendChild( this.createField( field) ); | |
}, this ); | |
} | |
}; | |
this.createSection = function(section) { | |
var sectionArea = document.createElement('div'); | |
sectionArea.className = 'section'; | |
var description = document.createElement("h3"); | |
description.innerHTML = section.description; | |
sectionArea.appendChild( description ); | |
this.createFields(sectionArea, section); | |
this.form.appendChild( sectionArea ); | |
}; | |
this.render = function(layout) { | |
if( layout && layout.sections) { | |
layout.sections.forEach(this.createSection, this); | |
} | |
this.form.addEventListener("submit", function(evt){ | |
evt.preventDefault(); | |
this.save(); | |
}.bind(this)); | |
return this; | |
}; | |
this.getForm = function() { | |
return this.form; | |
}; | |
return this; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var model = {id: 10000}; | |
var contatoForm = new JiujitsuTeam.FormEngine(model); | |
new DialogWindow({ | |
title: "Contato", | |
content: contatoForm.render(window.layout).getForm() | |
}).show(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.layout = { | |
sections:[{ | |
description: 'Dados de autenticação', | |
fields: [{ | |
name: 'login', | |
mandatory: true, | |
type: 'text' | |
},{ | |
name: 'password', | |
mandatory: true, | |
type: 'password' | |
},{ | |
name: 'expirationDate', | |
mandatory: true, | |
type: 'date' | |
},{ | |
name: 'enabled', | |
mandatory: false, | |
type: 'checkbox' | |
}] | |
},{ | |
description: 'Dados de contato', | |
fields: [{ | |
name: 'rua', | |
mandatory: false, | |
type: 'text' | |
},{ | |
name: 'complemento', | |
mandatory: false, | |
type: 'text' | |
},{ | |
name: 'bairro', | |
mandatory: false, | |
type: 'text' | |
},{ | |
name: 'telefone', | |
mandatory: false, | |
type: 'tel' | |
}] | |
},{ | |
description: '', | |
fields: [{ | |
name: 'submit', | |
type: 'button' | |
}] | |
}] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment