Commit 4431ddb6 authored by Luc Damas's avatar Luc Damas

Merge branch 'master' of https://framagit.org/lucdamas/dim-2017

parents 157578f6 c40b92a8
* { margin: 0px; padding: 0px; }
<<<<<<< HEAD
=======
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;
}
>>>>>>> c40b92a83e13605eec61046ee36e78273b57f9f7
......@@ -8,6 +8,7 @@
</head>
<body>
<<<<<<< HEAD
<header>
</header>
......@@ -16,6 +17,14 @@
<footer>
</footer>
=======
<div id='form'>
</div>
>>>>>>> c40b92a83e13605eec61046ee36e78273b57f9f7
......
$(document).ready(function() {
<<<<<<< HEAD
});
=======
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;
}
>>>>>>> c40b92a83e13605eec61046ee36e78273b57f9f7
[{"title":"Au revoir la-haut","director":"Albert Dupontel"},{"title":"Inception","director":"Christopher Nolan"},{"title":"Predestination","director":"Michael Spierig"},{"title":"hop","director":"plop"},{"title":"hop","director":"plop"},{"title":"Starwars","director":"Lucas"},{"title":"a","director":"b"},{"title":"aa","director":"aa"},{"title":"Les promesses de l'ombre","director":"???"},{"title":"qdsqsd","director":"qsd"},{"title":"a","director":"a"},{"title":"a","director":"a"},{"title":"a","director":"a"},{"title":"a","director":"a"}]
\ No newline at end of file
<?php
$data = json_decode(file_get_contents("data.json"), true);
if (isset($_POST["action"])) {
if ($_POST["action"] == "add") {
$data[] = array(
"title" => $_POST["title"],
"director" => $_POST["director"]
);
file_put_contents("data.json", json_encode($data));
echo json_encode(array("ok"=>true));
}
} else {
echo json_encode($data);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vidéothèque</title>
<link rel="stylesheet" type="text/css" href="css/style">
</head>
<body>
<header>
<h1>Vidéothèque</h1>
</header>
<nav>
<ul>
<li id='link-home'>Accueil</li>
<li id='link-admin'>Administration</li>
</ul>
</nav>
<section id='content'>
</section>
<footer>
</footer>
<script src='js/main.js'></script>
</body>
</html>
//-------------------------------------------------------------------
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("#link-home").onclick = displayHome;
document.querySelector("#link-admin").onclick = displayAdmin;
displayHome();
});
//-------------------------------------------------------------------
function displayHome() {
let content = document.querySelector("#content");
content.innerHTML = "";
let h1 = document.createElement("h1");
h1.appendChild(document.createTextNode("Accueil"));
content.appendChild(h1);
let ul = document.createElement("ul");
content.appendChild(ul);
ajax("controller/service.php", { }, function(data) {
for(let movie of data) {
let li = document.createElement("li");
li.appendChild(document.createTextNode(movie.title));
ul.appendChild(li);
}
});
}
//-------------------------------------------------------------------
function displayAdmin() {
document.querySelector("#content").innerHTML =
"<h1>Admin</h1>"+
"<p><label>Titre</label><input id='title'/></p>"+
"<p><label>Réalisateur</label><input id='director'/></p>"+
"<p><input id='add-movie' type='button' value='ajouter'/></p>";
document.querySelector("#add-movie").onclick = function() {
let title = document.querySelector("#title").value;
let director = document.querySelector("#director").value;
if (title != "" && director != "") {
ajax("controller/service.php", {
"action": "add",
"title": title,
"director": director
}, function(response) {
displayMessage("Film ajouté");
displayHome();
});
}
}
}
function displayMessage(message) {
var section = document.querySelector("#content");
section.insertAdjacentHTML('beforebegin',
"<div class='message'>"+message+"</div>");
setTimeout(function() {
var messages = document.querySelectorAll(".message");
for(let message of messages)
document.querySelector("body").removeChild(message);
}, 1000);
}
//-------------------------------------------------------------------
function ajax(url, params, callback) {
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.responseType = "json";
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
callback(xhr.response);
}
}
var s = "";
for(let field in params)
s += field+"="+params[field]+"&";
s = s.substr(0, s.length-1);
xhr.send(s);
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
$(document).ready(function() {
let url = "service.php";
$("#button-jokes").click(allJokes);
$("#button-admin").click(startAdmin);
$("#admin").hide();
$("#button-jokes").addClass("selected");
if (!cookie("page"))
cookie("page","home");
if (cookie("page") == "home")
allJokes();
else if (cookie("page") == "admin")
startAdmin();
else
allJokes();
function cookie(name, value) {
if (value) {
document.cookie = name+"="+value;
} else {
let namePos = document.cookie.indexOf(name);
let value = null;
if (namePos != -1) {
let semicolonPos = document.cookie.indexOf(";",namePos);
if (semicolonPos == -1)
semicolonPos = document.cookie.length;
value = document.cookie.substr(namePos+name.length+1, semicolonPos-namePos-name.length-1);
}
return value;
}
}
function allJokes() {
$("#admin").hide();
$("#jokes").show();
$("#button-jokes").toggleClass("selected");
$("#button-admin").toggleClass("selected");
displayAllJokes();
cookie("page","home");
}
function startAdmin() {
$("#admin").show();
$("#jokes").hide();
$("#button-jokes").toggleClass("selected");
$("#button-admin").toggleClass("selected");
displayAdmin();
cookie("page","admin");
}
function displayAllJokes() {
$.get(
url,
{ action: "joke-read" },
function(jokes) {
$("#all-jokes").empty();
for(let joke of jokes) {
let jokeDiv = $("<div/>");
jokeDiv.data("joke",joke);
jokeDiv.addClass("joke");
$("#all-jokes").append(jokeDiv);
let p = $("<p/>");
p.addClass("joke-text");
p.append(joke.text);
jokeDiv.append(p);
p = $("<p/>");
p.addClass("joke-user");
p.append('<i class="fa fa-user" aria-hidden="true"></i> ' + joke.user);
jokeDiv.append(p);
}
},
"json"
);
}
var addButtonFlag = false;
function displayAdmin() {
//---------------------------------------------
if (!addButtonFlag)
$("#add-joke-button")
.click(function() {
let text = $("#joke-text").val().trim();
if (text != "") {
$.get(
url,
{ action: "joke-create",
text: text,
user: "Luc" },
function(data) {
$("#joke-text").val("");
},
"json");
allJokes();
}
addButtonFlag = true;
});
//-----------------------------------------------
$.get(
url,
{ action: "joke-read" },
function(jokes) {
$("#admin #jokes").empty();
for(let joke of jokes) {
let jokeDiv = $("<div/>");
jokeDiv.data("joke",joke);
jokeDiv.addClass("joke-to-delete");
jokeDiv.append(joke.text.substr(0,10)+"...");
jokeDiv.draggable();
$("#admin #jokes").append(jokeDiv);
}
}
,"json");
$("#trash").droppable({
drop: function(event, ui) {
ui.draggable.remove();
}
})
}
});
I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project,
Fort Awesome (https://fortawesome.com). It makes it easy to put the perfect icons on your website. Choose from our awesome,
comprehensive icon sets or copy and paste your own.
Please. Check it out.
-Dave Gandy
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
// Animated Icons
// --------------------------
.@{fa-css-prefix}-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.@{fa-css-prefix}-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
// Bordered & Pulled
// -------------------------
.@{fa-css-prefix}-border {
padding: .2em .25em .15em;
border: solid .08em @fa-border-color;
border-radius: .1em;
}
.@{fa-css-prefix}-pull-left { float: left; }
.@{fa-css-prefix}-pull-right { float: right; }
.@{fa-css-prefix} {
&.@{fa-css-prefix}-pull-left { margin-right: .3em; }
&.@{fa-css-prefix}-pull-right { margin-left: .3em; }
}
/* Deprecated as of 4.4.0 */