girault/WIM
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ajout

Browse Source
This commit is contained in:
girault 2022-06-07 13:34:26 +02:00
parent aa1b224c56
commit c8311babd7
4 changed files with 171 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
WIM4.1/tp/tp5/ex1/VoirLePUBLIC_HTML Normal file
View File

29
WIM4.1/tp/tp5/ex1/index.html Normal file
View File

@ -0,0 +1,29 @@
<!doctype html>
<html>
<head>
<title>Riot todo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="todo.css">
<script src="todo.riot" type="riot"></script>
<script src="https://cdn.jsdelivr.net/npm/riot@6.1.2/riot+compiler.min.js"></script>
</head>
<body>
<todo></todo>
<script>
riot.compile().then(() => {
riot.mount('todo', {
title: 'I want to behave!',
items: [
{ title: 'Avoid excessive caffeine', done: false },
{ title: 'Be less provocative', done: true },
{ title: 'Be nice to people', done: true }
]
})
})
</script>
</body>
</html>

84
WIM4.1/tp/tp5/ex1/todo.css Normal file
View File

@ -0,0 +1,84 @@
body {
font-family: 'myriad pro', sans-serif;
font-size: 20px;
border: 0;
}
todo {
display: block;
max-width: 600px;
margin: 5% auto;
}
form input {
font-size: 85%;
padding: .4em;
border: 1px solid #ccc;
border-radius: 2px;
}
button {
background-color: #1FADC5;
border: 1px solid rgba(0,0,0,.2);
font-size: 75%;
color: #fff;
padding: .4em 1.2em;
border-radius: 2em;
cursor: pointer;
margin: 0 .23em;
outline: none;
}
button[disabled] {
background-color: #ddd;
color: #aaa;
}
ul {
padding: 0;
}
li {
list-style-type: none;
padding: .2em 0;
}
.completed {
text-decoration: line-through;
color: #ccc;
}
label {
cursor: pointer;
}
.filters {
margin-top: 10px;
padding: 0;
list-style: none;
/* position: absolute;*/
right: 0;
left: 0;
}
.filters li {
display: inline;
}
.filters li a {
color: inherit;
/* margin: 3px;*/
margin-right:10px;
padding: 3px 7px;
text-decoration: none;
font-size : 0.75em;
border: 1px solid transparent;
border-radius: 3px;
}
.filters li a:hover {
border-color: rgba(175, 47, 47, 0.1);
}
.filters li a.selected {
border-color: rgba(175, 47, 47, 0.2);
}

58
WIM4.1/tp/tp5/ex1/todo.riot Normal file
View File

@ -0,0 +1,58 @@
<todo>
<h3>{ props.title }</h3>
<ul>
<li each={ item in state.items }>
<label class={ item.done ? 'completed' : null }>
<input
type="checkbox"
checked={ item.done }
onclick={ () => toggle(item) } />
{ item.title }
</label>
</li>
</ul>
<form onsubmit={ add }>
<input oninput={ edit } />
<button disabled={ !state.text }>
Add #{ state.items.length + 1 }
</button>
<button onclick={ clear }>Clear done</button>
<ul class="filters">
<li> <a href="#">All</a></li>
<li> <a href="#">Active</a></li>
<li> <a href="#">Done</a></li>
</ul>
</form>
<script>
export default {
onBeforeMount(props, state) {
// initial state
this.state = {
items: props.items,
text: ''
}
},
edit(e) {
// update only the text state
this.update({
text: e.target.value
})
},
clear(e) {
// COMPLETEZ
},
add(e) {
// COMPLETEZ
this.idem.push(e)
this.update({items: this.items })
},
toggle(item) {
item.done = !item.done
// trigger a component update
this.update()
}
}
</script>
</todo>