Commit c40b92a8 by Luc Damas

seance 3 : forms

parent 4e8d2d7d
* { margin: 0px; padding: 0px; }
body {
font-family: sans-serif, arial;
font-size: 14px;
}
#form {
margin: 50px;
border: solid 2px #AAAAAA;
border-radius: 5px;
}
/* Pas bien mais ça le fait quand même */
#form * {
transition: all 0.5s ease;
}
.fieldContainer {
margin: 30px;
}
.fieldContainer label {
display: inline-block;
width: 200px;
}
input[type=text] {
border: solid 2px #AAAAAA;
background-color: white;
padding: 7px;
border-radius: 5px;
width: 300px;
}
input[type=text].focus {
border-color: #77AAFF;
width: 400px;
}
.switchValue {
display: inline-block;
vertical-align: middle;
}
.switcher {
display: inline-block;
width: 60px;
border: solid 2px #AAAAAA;
border-radius: 20px;
margin: 0px 10px;
height: 25px;
position: relative;
vertical-align: middle;
}
.switchButton {
display: inline-block;
position: absolute;
top: 2px;
left: 2px;
width: 21px;
height: 21px;
border-radius: 50%;
background-color: #AAAAAA;
}
.switcher.switched .switchButton {
left: 37px;
}
.multiselectList {
display: inline-block;
border: solid 2px #AAAAAA;
padding: 5px 30px 5px 5px;
position: relative;
cursor: pointer
}
.multiselectList:hover {
border-color: #77AAFF;
}
.multiselectList::after {
content: "";
position: absolute;
top: 8px;
right: 5px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #AAAAAA transparent transparent transparent;
}
.multiselectList:hover::after {
border-top-color: #77AAFF;
}
#bg {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.1);
}
.dropdown {
position: absolute;
border: solid 2px #AAAAAA;
background-color: white;
padding: 2px;
}
.dropdown li {
list-style-type: none;
padding: 5px;
min-width: 100px;
cursor: pointer;
text-align: center;
}
.dropdown li:hover {
background-color: #77AAFF;
color: white;
}
.multiselectValues {
margin-left: 200px;
}
.multiselectValues li {
display: inline-block;
list-style-type: none;
margin: 5px;
background-color: #AAAAAA;
color: white;
border-radius: 20px;
padding: 4px 10px;
}
.multiselectValues li span {
cursor: pointer;
display: inline-block;
margin-left: 15px;
width: 15px;
height: 15px;
line-height: 15px;
text-align: center;
}
.multiselectValues li span:hover {
border-radius: 50%;
color: #AAAAAA;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
</head>
<body>
<div id='form'>
</div>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/main.js'></script>
</body>
</html>
$(document).ready(function() {
var form = [
{
name: "firstname",
label: "Firstname",
type: "text"
},
{
name: "happy",
label: "Are you happy?",
type: "switch",
values: [ "Yes","No" ]
},
{
name: "color",
label: "Couleur",
type: "multiselect",
values: ["Orange","Rose","Violet","Rouge","Bleu","Vert"]
}
];
createForm("#form",form);
});
//----------------------------------------------------------
function createForm(selector, form) {
for (let field of form) {
var f = eval("create"+
field.type.charAt(0).toUpperCase()+
field.type.slice(1));
$(selector).append( f(field) );
}
}
//----------------------------------------------------------
function createFieldContainer(field) {
var p = $("<p/>");
p.addClass("fieldContainer");
p.append("<label>"+field.label+"</label>");
// var label = $("<label/>");
// label.append(field.label);
// p.append(label);
return p;
}
//----------------------------------------------------------
function createText(field) {
var container = createFieldContainer(field);
var input = $("<input/>");
input
.attr("type",field.type)
.attr("id",field.name)
.attr("name",field.name)
.focus(function() { $(this).addClass("focus"); })
.blur(function() { $(this).removeClass("focus"); })
container.append(input);
return container;
}
//----------------------------------------------------------
function createSwitch(field) {
var container = createFieldContainer(field);
var value1 = $("<div/>");
value1
.addClass("switchValue")
.append(field.values[0]);
var value2 = $("<div/>");
value2
.addClass("switchValue")
.append(field.values[1]);
var switcher = $("<div/>");
switcher
.addClass("switcher");
var switchButton = $("<div/>");
switchButton.addClass("switchButton");
switcher.append(switchButton);
var input = $("<input/>");
input
.attr("type","hidden")
.attr("id",field.name)
.attr("name",field.name)
.val(field.values[0]);
container
.append(value1)
.append(switcher)
.append(value2)
.append(input);
switcher.click(function() {
$(this).toggleClass("switched");
if ($(this).hasClass("switched"))
input.val(field.values[1]);
else
input.val(field.values[0]);
});
return container;
}
//----------------------------------------------------------
function createMultiselect(field) {
var container = createFieldContainer(field);
//--------------------------------
var list = $("<div/>");
list
.addClass("multiselectList")
.append("Choisissez...")
.click(function() {
// lightbox
var bg = $("<div/>");
bg
.attr("id","bg")
.click(function() {
dropdown.remove();
bg.remove();
});
$("body").append(bg);
var dropdown = $("<ul/>");
dropdown
.addClass("dropdown")
.css({
top: list.position().top,
left: list.position().left
});
for (let value of field.values) {
var li = $("<li/>");
li
.append(value)
.click(function() {
var liSelected = $("<li/>");
liSelected
.append($(this).text());
var cross = $("<span/>");
cross
.append("x")
.click(function() {
$(this).parent().remove();
})
liSelected.append(cross);
selectedValues.append(liSelected);
dropdown.remove();
bg.remove();
});
dropdown.append(li);
}
bg.append(dropdown);
});
container.append(list);
//--------------------------------
var selectedValues = $("<ul/>");
selectedValues
.addClass("multiselectValues");
container.append(selectedValues);
return container;
}
\ No newline at end of file
function property(object, name, value) {
var props = { };
props[name] = {
get: function () {
return this["_"+name];
},
set: function (x) {
this["_"+name] = x;
update();
}
};
Object.defineProperties(object, props);
object[name] = value;
}
function update() {
console.log("ui updated");
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment