Skip to content

D
doodle
Commit 70281c44 by Simon
Options

Work in progress

parent 386e04d1
Showing with 252 additions and 116 deletions
README.md
......@@ -18,3 +18,22 @@ index.html
</div>
```
Include all dependencies
```
<!-- Jquery -->
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/tether/dist/js/tether.js"></script>
<!-- Bootstrap / Boostrap datepicker -->
<script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="/node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="/node_modules/bootstrap-datepicker/dist/locales/bootstrap-datepicker.fr.min.js"></script>
<!-- Moment -->
<script src="/node_modules/moment/min/moment.min.js"></script>
<script src="/node_modules/moment/locale/fr.js"></script>
<script src="assets/lib/doodle/js/doodle.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
```
\ No newline at end of file
assets/lib/doodle/css/doodle.css
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');
table {
.doodle-table {
border-collapse:collapse;
width: 100%;
font-family: 'Roboto', sans-serif;
}
table thead tr th{
thead tr th {
color: #6d5cae;
}
.doodle-table thead tr th{
padding: 15px;
font-family: Roboto, sans-serif;
font-weight: 400;
......@@ -15,45 +18,45 @@ table thead tr th{
border-bottom: 1px solid #f3f3f3 !important;
}
table thead tr th:nth-child(2) {
.doodle-table thead tr th:nth-child(2) {
border-right: none
}
table tr td:nth-child(2) {
.doodle-table tr td:nth-child(2) {
border-right: 1px solid #f3f3f3;
border-left: none;
}
table thead tr th:nth-child(n+3) {
.doodle-table thead tr th:nth-child(n+3) {
border-top: none ;
}
table thead tr th:nth-child(n+2) {
.doodle-table thead tr th:nth-child(n+2) {
border-left: none;
border-right: none;
}
table thead tr th:last-child {
.doodle-table thead tr th:last-child {
border-right: none;
}
table tr td:first-child {
.doodle-table tr td:first-child {
border-left: none;
border-right: none;
}
table thead tr th {
.doodle-table thead tr th {
border-top: none !important;
border-left: none;
border-right: none;
}
table tbody tr td:first-child {
.doodle-table tbody tr td:first-child {
min-width: 90px;
}
table tbody tr td {
.doodle-table tbody tr td {
color: #6d5cae;
padding: 0 !important;
line-height: 1.2;
......@@ -65,38 +68,42 @@ table tbody tr td {
vertical-align: middle !important;
}
tr:nth-child(2n) {
background: #fafafa!important;
.doodle-table tbody tr td.purple-background {
background-color: #e2deef;
transition: background-color 100ms ease;
}
tr td:nth-child(n+3) {
.doodle-table tr td:nth-child(n+3) {
border-left: none;
border-right: none;
}
tr td:last-child {
.doodle-table tr td:last-child {
border-right: none;
}
td:nth-child(-n+2):hover {
.doodle-table td:nth-child(-n+2):hover {
background: none !important;
}
td:hover {
background: rgba(109, 92, 174, .4)!important;
.doodle-table td:hover {
background: #8a7dbe;
transition: background 200ms ease;
}
.doodle-table td:hover .label_input span{
border-color: #fff;
transition: border-color 100ms ease 100ms;
}
th, td {
.doodle-table th, td {
border:1px solid #f3f3f3;
padding: 0;
}
td, th {
.doodle-table td, th {
text-align:center;
}
caption {
font-weight:bold
}
/*******************************************************
*************************INPUT*************************
*******************************************************/
......@@ -118,9 +125,9 @@ label.label_input{
.label_input span {
position: relative;
display: flex;
width: 20px;
height: 20px;
border: 2px solid rgba(109, 92, 174, 1);
width: 16px;
height: 16px;
border: 1px solid #d0d0d0;
border-radius: 2px;
box-sizing: border-box;
overflow: hidden;
......@@ -128,8 +135,8 @@ label.label_input{
.label_input span i {
position: relative;
width: 20px;
height: 20px;
width: 16px;
height: 16px;
margin-left: 2px;
transform: rotate(-45deg) translateX(0%) translateY(0%) scale(0.8);
transform-origin: center left;
......@@ -144,7 +151,7 @@ label.label_input{
.label_input span i:before {
height: 0;
top: 50%;
top: 60%;
left: 0;
width: 2px;
}
......@@ -162,12 +169,12 @@ label.label_input{
}
.label_input input:checked ~ span i:before {
height: 50%;
height: 25%;
transition: height 300ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.label_input input:checked ~ span i:after {
width: 100%;
width: 75%;
transition: width 300ms 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
......@@ -176,7 +183,7 @@ label.label_input{
*******************************************************/
@media screen and (min-width: 768px){
table{
.doodle-table{
table-layout: fixed;
}
}
\ No newline at end of file
assets/lib/doodle/js/doodle.js
......@@ -25,6 +25,7 @@
this.getDays();
this.getHours();
this.createTable();
};
/**
......@@ -296,8 +297,6 @@
this.init = true;
this.initLoad = () => {
if (this.init) {
this.getJsonData();
......@@ -308,31 +307,54 @@
this.getDays();
this.getHours();
this.init = false;
}
this.createTable();
this.createEvents();
this.initCSS();
};
this.reinit = () => {
console.log('REINIT');
this.createJSON();
$('.doodle').html('');
$(document).off('click', 'input[type=checkbox]');
$(document).off('click', 'td button');
$(document).off('focusout keypress', '#addDate');
$(document).off('focusout', '#addHour');
/*$(document).off('click', 'input[type=checkbox]');
$(document).off('click', 'td button');*/
$(document).off('changeDate', '#addDate');
$(document).off('hide.timepicker', '#timepicker');
this.initLoad();
};
this.createEvents = () => {
//Initialise les plugins datepicker et timepicker
let date = new Date();
$('#myDatepicker').datepicker({
language: "fr",
autoclose: true,
defaultViewDate: { year: date.getFullYear(), month: date.getMonth(), day: date.getDay() }
});
$('#timepicker').timepicker({
disableFocus: true,
showInputs: false,
minuteStep: 5,
showMeridian: false,
icons : {
up: 'fa fa-chevron-up',
down: 'fa fa-chevron-down'
}
});
$(document).on('click', 'input[type=checkbox]', this.eventCheckInput);
$(document).on('click', 'td button', this.eventRemoveDate);
$(document).on('click', 'th button', this.eventRemoveHour);
$('#addDate').on('focusout keypress', this.eventAddDate);
$('#addHour').on('focusout keypress', this.eventAddHour);
};
$(document).on('changeDate', '#myDatepicker', this.eventAddDate);
$(document).on('hide.timepicker', '#timepicker',this.eventAddHour);
};
/**
* Create Table
......@@ -351,6 +373,10 @@
`);
};
this.initCSS = () => {
$('input[type=checkbox]:checked').parent().parent().css('background', '#e2deef');
};
/**
* Create table header for hours
* @returns {string}
......@@ -375,13 +401,20 @@
tbodyFinal = $tbody.append(html);
}
tbodyFinal.append('<td><input id="addDate" type="date"></td>');
tbodyFinal.append(`<th><div id="myDatepicker" class="input-group date" data-provide="datepicker">
<input type="text" id="addDate" class="form-control" placeholder="jj/mm/aaaa">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>
</th> `);
return tbodyFinal.html();
};
/**
* Create body content
* Create body content`
* @param index
* @returns {string}
*/
......@@ -451,7 +484,12 @@
thead = $tr.append('<th><button>X</button><span>' + finalSortedTab[index] + '</span></th>');
}
thead = $tr.append('<th><input type="time" id="addHour" step="300"></th>');
thead = $tr.append(`<th><div class="input-group bootstrap-timepicker timepicker">
<input id="timepicker" type="text" class="form-control" data-provide="timepicker">
<span class="input-group-addon">
<i class="fa fa-clock-o"></i>
</span>
</div></th> `);
return thead.html();
};
......@@ -561,33 +599,64 @@
if (isChecked) {
this.addInOutputObject(data);
$(e.target).parent().parent().css('background', '#e2deef');
} else {
this.removeInOutputObject(data)
this.removeInOutputObject(data);
$(e.target).parent().parent().css('background', '');
}
this.createJSON();
};
/**
* Check if key exist
* @param key
* @returns {boolean}
*/
this.keyExist = (key) => {
if (moment(key, 'DD/MM/YYYY').format('DD/MM/YYYY') === key) {
if (this.days.indexOf(key) === -1) {
return true
}
else {
console.error('La date est déjà présente dans le tableau');
return false
}
}
if (moment(key, 'HH:mm').format('HH:mm') === key) {
if (this.hours.indexOf(key) === -1) {
return true
}
else {
console.error('L\'heure est déjà présente dans le tableau');
return false
}
}
};
/**
* Add date
* @param e
*/
this.eventAddDate = (e) => {
console.log(e);
if(e.which === 13 || e.type === 'focusout') {
let valDate = $(e.target).val();
//Force la fermeture du datePicker
$('#myDatepicker').datepicker('hide');
let formatDateDay = moment(valDate, 'YYYY-MM-DD').locale('fr').format('DDMMYYYY');
let formatDateOnSneFou = moment(valDate, 'YYYY-MM-DD').locale('fr').format('DD/MM/YYYY');
let formatDateDay = moment(e.date).locale('fr').format('DDMMYYYY');
let formatDateOnSneFou = moment(e.date).locale('fr').format('DD/MM/YYYY');
this.addInOutputObject(formatDateDay);
if (this.keyExist(formatDateOnSneFou)) {
this.days.push(formatDateOnSneFou);
this.days.sort();
this.reinit();
this.addInOutputObject(formatDateDay);
}
//Tri les dates
this.days.sort(function(a,b) {
return moment(a, 'DD/MM/YYYY') - moment(b, 'DD/MM/YYYY');
});
this.reinit();
};
/**
......@@ -595,15 +664,30 @@
* @param e
*/
this.eventAddHour = (e) => {
if(e.which === 13 || e.type === 'focusout') {
let valHour = $(e.target).val();
let splitHour = e.time.value.split(':');
this.hours.push(valHour);
this.hours.sort();
//Permet de mettre dans le bon format DD:mm, le timePicker retourne mauvais format
if (splitHour[0].length === 1) {
let goodHourFormat = '0' + splitHour[0] + ':' + splitHour[1];
if (this.keyExist(goodHourFormat)) {
this.hours.push(goodHourFormat);
}
}
this.reinit();
if (this.keyExist(e.time.value)) {
//Ajout dans le bon format DD dans le tableau, supprime les 00 en trop
if (splitHour[1] === '00') {
this.hours.push(splitHour[0]);
} else {
this.hours.push(e.time.value);
}
}
this.hours.sort(function(a,b) {
return moment(a, 'HH:mm') - moment(b, 'HH:mm');
});
this.reinit();
};
/**
......@@ -613,8 +697,6 @@
this.eventRemoveDate = (e) => {
let date = $(e.target).parent().parent().find('span').text();
console.log(date);
let formatDateDay = moment(date, 'dddd DD MMMM').locale('fr').format('DDMMYYYY');
let formatDateOnSneFou = moment(date, 'dddd DD MMMM').locale('fr').format('DD/MM/YYYY');
......
assets/lib/doodle/js/moment.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
assets/lib/doodle/js/moment.min.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
index.html
......@@ -2,69 +2,32 @@
<html lang="fr"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
<!-- Custom styles for this template -->
<link href="css/starter-template.css" rel="stylesheet">
<link href="assets/lib/doodle/css/doodle.css" rel="stylesheet">
<!-- Pages css -->
<link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css">
<link rel="stylesheet" href="/node_modules/bootstrap-timepicker/css/bootstrap-timepicker.min.css">
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-12">
<!--<div class="doodle table-responsive"></div>
<input type="hidden" id="inputVal" value='{"19/01/2018":["10","11","12"],"20/01/2018":["10","11","12"],"21/01/2018":["10","11","12"],"22/01/2018":["10","11","12"],"23/01/2018":["10","11","12"],"24/01/2018":["10","11:15","12"]}'>-->
<div class="doodle table-responsive"></div>
<input type="hidden" id="inputVal" value='{"19/01/2018":["10","11","12"],"20/01/2018":["10","11","12"],"21/01/2018":["10","11","12"],"22/01/2018":["10","11","12"],"23/01/2018":["10","11","12"],"24/01/2018":["10","11:15","12"]}'>
<div class="doodle table-responsive" data-json="json/data.json"></div>
<input type="hidden" id="inputVal" value='' />
<!--<div class="doodle table-responsive" data-json="json/data.json"></div>
<input type="hidden" id="inputVal" value='' />-->
</div>
</div>
......@@ -75,12 +38,20 @@
</footer>
</div> <!-- /container -->
<!-- Jquery -->
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/tether/dist/js/tether.js"></script>
<!-- Bootstrap / Boostrap datepicker / Bootstrap timepicker -->
<script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="/node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="/node_modules/bootstrap-datepicker/dist/locales/bootstrap-datepicker.fr.min.js"></script>
<script src="/node_modules/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
<!-- Moment -->
<script src="/node_modules/moment/min/moment.min.js"></script>
<script src="/node_modules/moment/locale/fr.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous">
</script>
<script src="assets/lib/doodle/js/moment.js"></script>
<script src="assets/lib/doodle/js/doodle.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</body></html>
js/app.js
$( document ).ready(function() {
$('.doodle').Doodle({
editMode: false,
editMode: true,
output: '#inputVal',
input: '#inputVal'
});
......
package.json 0 → 100644
{
"name": "Doodle",
"version": "0.0.1",
"main": "app.js",
"repository": "git@gitlab.appolo.fr:jquery-plugin/doodle.git",
"author": "Simon <simon@appolo.fr>",
"license": "MIT",
"dependencies": {
"bootstrap": "4.0.0-alpha.6",
"bootstrap-datepicker": "^1.7.1",
"bootstrap-timepicker": "^0.5.2",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"moment": "^2.20.1"
},
"devDependencies": {
"tether": "^1.4.3"
}
}
yarn.lock 0 → 100644
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
bootstrap-datepicker@^1.7.1:
version "1.7.1"
resolved "https://registry.yarnpkg.com/bootstrap-datepicker/-/bootstrap-datepicker-1.7.1.tgz#4ee7faf34888dbec7834fbf9dbe7c4277e01ddaf"
dependencies:
jquery ">=1.7.1 <4.0.0"
bootstrap-timepicker@^0.5.2:
version "0.5.2"
resolved "https://registry.yarnpkg.com/bootstrap-timepicker/-/bootstrap-timepicker-0.5.2.tgz#10ed9f2a2f0b8ccaefcde0fcf6a0738b919a3835"
bootstrap@4.0.0-alpha.6:
version "4.0.0-alpha.6"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-alpha.6.tgz#4f54dd33ac0deac3b28407bc2df7ec608869c9c8"
dependencies:
jquery ">=1.9.1"
tether "^1.4.0"
font-awesome@^4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
"jquery@>=1.7.1 <4.0.0", jquery@>=1.9.1, jquery@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
moment@^2.20.1:
version "2.20.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
tether@^1.4.0, tether@^1.4.3:
version "1.4.3"
resolved "https://registry.yarnpkg.com/tether/-/tether-1.4.3.tgz#fd547024c47b6e5c9b87e1880f997991a9a6ad54"
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