Skip to content

D
doodle
Commit 50065ae7 by crosf32
Options

remove jquery

parent a110532b
Showing with 144 additions and 247 deletions
dist/css/doodle.css
......@@ -25,7 +25,7 @@
color: #2c2c2c !important;
}
.doodle-table thead tr th{
.doodle-table thead tr th {
padding: 15px;
height: 70px;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
......@@ -154,11 +154,11 @@
}
.doodle-table .delete_col{
.doodle-table .delete_col {
background: #fddddd;
position: absolute;
width: 100%;
top: -74px;
top: -100%;
height: 74px;
left: 0;
opacity: 0;
......@@ -180,6 +180,16 @@
border-right: none;
}
.doodle-table #heure:hover div {
display: flex;
opacity: 1;
}
.doodle-table #date:hover div {
display: flex;
opacity: 1;
}
.doodle-table #date:hover {
background: #fdf2f2 !important;
color: #f55753;
......
dist/js/doodle.js
(function($) {
const CLOSEIMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAMpJREFUOI3Nkk0KglAQgL/3NPEKXSX62waB0F7w7y5BQRcIpU5Qd6ikDhJ6Ahcv9LUoWhmYETS7meH7ZgZGFIE7AWKgy2eRAaFsCfNkYtkSfknkFzAAvxHY8yXmcPzKzcEIe7GqFZh1xdt+hxVEj6Sq6LgeKlk3F5SXFCXA8iMQApWsKc9p8xMeHQlCACCM2jnvNzB6fSwvRG1i0BrLj9BoytOhmcCcOqhtQpkeAVBAx5nVCkQRuPrtfg3iPx4p+4LPJRABeQv4CoR3Jng1ltK2xpYAAAAASUVORK5CYII=';
const CLOSEIMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAMpJREFUOI3Nkk0KglAQgL/3NPEKXSX62waB0F7w7y5BQRcIpU5Qd6ikDhJ6Ahcv9LUoWhmYETS7meH7ZgZGFIE7AWKgy2eRAaFsCfNkYtkSfknkFzAAvxHY8yXmcPzKzcEIe7GqFZh1xdt+hxVEj6Sq6LgeKlk3F5SXFCXA8iMQApWsKc9p8xMeHQlCACCM2jnvNzB6fSwvRG1i0BrLj9BoytOhmcCcOqhtQpkeAVBAx5nVCkQRuPrtfg3iPx4p+4LPJRABeQv4CoR3Jng1ltK2xpYAAAAASUVORK5CYII=';
/**
* doodle Object
* @param item
* @param config
*/
const dynamicEvent = (event_type, target_element_selector, listener_function) => {
document.addEventListener(event_type, event => {
if (event.target && event.target.matches && event.target.matches(target_element_selector)) {
(listener_function)(event);
}
});
}
let DoodleFront = function(item, config) {
let DoodleFront = function(item, config) {
this.item = item;
this.config = config;
this.json = null;
......@@ -30,9 +31,8 @@
this.initCSS(config);
//Remet l'overflow pour le responsive en front
if(!config.vertical) {
$('table').parent().css('overflow-x', 'auto');
document.querySelector('table').parentNode.style.overflowX = 'auto';
}
};
......@@ -40,16 +40,16 @@
* Create Table
*/
this.createTable = (config) => {
$(document).on('click', 'input[type=checkbox]', this.eventInput);
dynamicEvent('click', 'input[type=checkbox]', this.eventInput);
if(config.vertical) {
this.item.append(`
this.item.innerHTML += `
<ul class="doodle-list">
${this.createList()}
</ul>
`);
`;
} else {
this.item.append(`
this.item.innerHTML += `
<table class="table doodle-table frontend">
<thead>
${this.createHeaderTable()}
......@@ -59,12 +59,12 @@
${this.createBodyTable()}
</tbody>
</table>
`);
`;
}
};
this.createList = function() { // TODO : vertical
let div = $('<div>');
let div = document.createElement('div');
// DAYS =>
for(let index in this.days) {
let formatDateDay = moment(this.days[index], this.dateFormat).locale('fr').format('dddd DD');
......@@ -72,11 +72,11 @@
let date = this.days[index];
let $h3 = $('<h5><span class="date_format"><b>' + formatDateDay + '</b></span> ' + formatDateMonth + '</td>');
div.append($h3);
div.innerHTML += '<h5><span class="date_format"><b>' + formatDateDay + '</b></span> ' + formatDateMonth + '</td>';
for(let index2 in this.hours) {
let $li = $('<li class="p-3">');
let $li = document.createElement('li');
$li.classList.add('p-3');
if(this.json[this.days[index]].includes(this.hours[index2])) {
let hour = this.hours[index2];
if (hour.indexOf(':') === -1) {
......@@ -85,17 +85,17 @@
hour = hour.replace(':', 'h');
}
$li.html(this.createInputBox(this.hours[index2], date, hour));
div.append($li);
$li.innerHTML += this.createInputBox(this.hours[index2], date, hour);
div.innerHTML += $li.innerHTML;
}
}
}
return div.html();
return div.innerHTML;
}
this.initCSS = function() {
$('.empty').css('background', '#fafafa')
document.querySelectorAll('.empty').forEach(e => e.style.background = '#fafafa');
};
/**
......@@ -103,21 +103,21 @@
* @returns {string}
*/
this.createBodyTable = () => {
let $tbody = $('<tbody>');
let $tbody = document.createElement('tbody');
let html, tbodyFinal;
for(let index in this.days) {
let $tr = $('<tr>');
let $tr = document.createElement('tr');
let formatDateDay = moment(this.days[index], this.dateFormat).locale('fr').format('dddd DD');
let formatDateMonth = moment(this.days[index], this.dateFormat).locale('fr').format('MMMM');
html = $tr.append('<td><span class="date_format"><b>' + formatDateDay + '</b></span> ' + formatDateMonth + '</td>')
.append(this.createBodyContent(this.days[index]));
html = $tr.innerHTML += '<td><span class="date_format"><b>' + formatDateDay + '</b></span> ' + formatDateMonth + '</td>'
+ this.createBodyContent(this.days[index]);
tbodyFinal = $tbody.append(html);
tbodyFinal = $tbody.innerHTML += html;
}
return tbodyFinal.html();
return tbodyFinal;
};
/**
......@@ -127,7 +127,7 @@
*/
this.createBodyContent = (index) => {
let html;
let $td = $('<td>');
let $td = document.createElement('td');
for(let key in this.hours) {
if(this.json[index].includes(this.hours[key]))
......@@ -135,10 +135,10 @@
else
html = '<td class="empty"></td>';
$td.append(html);
$td.innerHTML = html;
}
return $td.html();
return $td.innerHTML;
};
/**
......@@ -156,7 +156,6 @@
}
html += "</label>"
return html;
};
/**
......@@ -164,7 +163,7 @@
* @returns {string}
*/
this.createHeaderTable = () => {
let $tr = $('<tr>');
let $tr = document.createElement('tr');
let thead;
let finalSortedTab = [];
......@@ -173,7 +172,7 @@
//Ajoute les cases vide
for (let i = 0; i < NBRCASEVIDE; i++) {
thead = $tr.append('<th></th>');
thead = $tr.innerHTML += '<th></th>';
}
// Permet de mettre un 'h' pour les heures/minutes
......@@ -189,10 +188,10 @@
//Ajoute les heures
for(let index in finalSortedTab) {
thead = $tr.append('<th>' + finalSortedTab[index] + '</th>');
thead = $tr.innerHTML += '<th>' + finalSortedTab[index] + '</th>';
}
return thead.html();
return thead.innerHTML;
};
/**
......@@ -220,17 +219,17 @@
* Get Json data
*/
this.getJsonData = () => {
let dataJson = this.item.data('json');
let dataJson = this.item.dataset.json;
if(typeof dataJson === 'object') {
this.json = dataJson;
} else if(this.isJsonString(dataJson)){
} else if(this.isJsonString(dataJson)) {
this.json = JSON.parse(dataJson);
} else {
let data = this.fileExistsAndGetData(dataJson);
if(data) {
let json = JSON.parse(data);
if (!$.isEmptyObject(json)) {
if (Object.keys(json).length > 0) {
this.json = json;
}
}
......@@ -271,10 +270,10 @@
* Generate JSON
*/
this.createJSON = () => {
let $input = $(this.config.inputSelector);
let $input = document.querySelector(this.config.inputSelector);
if ($input.length > 0) {
$input.val(JSON.stringify(this.outputJson));
if ($input) {
$input.value = JSON.stringify(this.outputJson);
}
};
......@@ -283,15 +282,15 @@
* @param e event
*/
this.eventInput = (e) => {
let data = $(e.target).data('check').split('_');
let isChecked = $(e.target).is(':checked');
let data = e.target.dataset.check.split('_');
let isChecked = e.target.checked;
if (isChecked) {
this.addInOutputObject(data);
$(e.target).parent().parent().css('background', '#e2deef');
e.target.parentNode.style.background = '#e2deef';
} else {
this.removeInOutputObject(data);
$(e.target).parent().parent().css('background', '');
e.target.parentNode.style.background = '';
}
this.createJSON();
......@@ -344,16 +343,8 @@
* Init
*/
this.initLoad();
};
/**
* For back
* @param item
* @param config
* @constructor
*/
let DoodleBack = function (item, config) {
};
let DoodleBack = function (item, config) {
this.item = item;
this.config = config;
this.json = null;
......@@ -385,15 +376,7 @@
this.reinit = () => {
this.createJSON();
$('.doodle').html('');
$(document).off('click', 'input[type=checkbox]');
$(document).off('click', 'td a');
$(document).off('changeDate', '#addDate');
$(document).off('hide.timepicker', '#timepicker');
$(document).off('click', '#timepicker');
$(document).off('mouseenter mouseleave', '#date');
$(document).off('mouseenter mouseleave', '#heure');
document.querySelector('.doodle').innerHTML = '';
this.initLoad();
};
......@@ -417,63 +400,16 @@
onClose: this.eventAddHour
})
$(document).on('click', 'input[type=checkbox]', this.eventCheckInput);
$(document).on('click', 'td a', this.eventRemoveDate);
$(document).on('click', 'th a', this.eventRemoveHour);
$(document).on('mouseenter mouseleave', '#date', function (e) {
if (e.type === 'mouseenter') {
$(e.target).find('div').css('display', 'flex');
$(e.target).find('div').animate({
opacity : 1,
display: 'flex'
}, 250, 'linear');
} else {
if ($(e.target).is('div.delete_row') ) {
$(e.target).css('display', 'none');
$(e.target).animate({
opacity : 0,
display: 'none'
}, 200);
} else {
$(e.target).find('div').css('display', 'none');
$(e.target).find('div').animate({
opacity : 0,
display: 'none'
}, 200);
}
}
});
$(document).on('mouseenter mouseleave', '#heure', function (e) {
if (e.type === 'mouseenter') {
$(e.target).find('div').css('display', 'flex');
$(e.target).find('div').animate({
opacity : 1,
display: 'flex'
}, 250, 'linear');
} else {
if ($(e.target).is('div.delete_col') ) {
$(e.target).css('display', 'none');
$(e.target).animate({
opacity : 0,
display: 'none'
}, 200);
} else {
$(e.target).find('div').css('display', 'none');
$(e.target).find('div').animate({
opacity : 0,
display: 'none'
}, 200);
}
}
});
dynamicEvent('click', 'input[type=checkbox]', this.eventCheckInput);
dynamicEvent('click', 'td a, td a img', this.eventRemoveDate);
dynamicEvent('click', 'th a, th a img', this.eventRemoveHour);
};
/**
* Create Table
*/
this.createTable = () => {
this.item.append(`
this.item.innerHTML +=`
<table class="table doodle-table backend">
<thead>
${this.createHeaderTable()}
......@@ -483,13 +419,13 @@
${this.createBodyTable()}
</tbody>
</table>
`);
`;
this.generateEmptyCell();
};
this.initCSS = () => {
$('input[type=checkbox]:checked').parent().parent().css('background', '#e2deef');
document.querySelectorAll('input[type=checkbox]:checked').forEach(e => e.parentNode.parentNode.style.background = '#e2deef');
};
/**
......@@ -497,52 +433,51 @@
* @returns {string}
*/
this.createBodyTable = () => {
let $tbody = $('<tbody>');
let html, tbodyFinal;
let $tbody = document.createElement('tbody');
let tbodyFinal;
if (!$.isEmptyObject(this.outputJson)) {
if (Object.keys(this.outputJson).length > 0) {
for(let index in this.days) {
let $tr = $('<tr>');
let $tr = document.createElement('tr');
let formatDateDay = moment(this.days[index], this.dateFormat).locale('fr').format('dddd DD');
let formatDateMonth = moment(this.days[index], this.dateFormat).locale('fr').format('MMMM');
let formatFullDate = moment(this.days[index], this.dateFormat).locale('fr').format(this.dateFormat);
let date = this.days[index];
html = $tr.append('<td id="date" data-date="' + formatFullDate +'"><span class="date_format"><b>' + formatDateDay + '</b> ' + formatDateMonth + '</span><div class="delete_row"><a href="#"><img src='+ CLOSEIMG +' /></a></div></td>')
.append(this.createBodyContent(date))
.append('<td></td>');
$tr.innerHTML += '<td id="date" data-date="' + formatFullDate +'"><span class="date_format"><b>' + formatDateDay + '</b> ' + formatDateMonth + '</span><div class="delete_row"><a href="#"><img src='+ CLOSEIMG +' /></a></div></td>'
+ this.createBodyContent(date)
+ '<td></td>';
tbodyFinal = $tbody.append(html);
$tbody.innerHTML += $tr.innerHTML;
}
tbodyFinal.append(`<td><div id="myDatepicker" class="input-group date" data-provide="datepicker">
$tbody.innerHTML += `<td><div id="myDatepicker" class="input-group date" data-provide="datepicker">
<label>Date</label>
<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>
</td> `);
</td>`;
} else {
let $tr = $('<tr>');
let $tr = document.createElement('tr');
html = $tr.append(`<td><div id="myDatepicker" class="input-group date" data-provide="datepicker">
$tr.innerHTML += `<td><div id="myDatepicker" class="input-group date" data-provide="datepicker">
<label>Date</label>
<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>
</td> `);
tbodyFinal = $tbody.append(html);
}
</td>`;
$tbody.innerHTML += $tr.innerHTML;
tbodyFinal = $tbody.innerHTML;
}
return tbodyFinal.html();
return $tbody.innerHTML;
};
/**
......@@ -551,19 +486,16 @@
* @returns {string}
*/
this.createBodyContent = (index) => {
let html;
let $td = $('<td>');
let html = '';
for(let key in this.hours) {
if(this.outputJson[index] && this.outputJson[index].includes(this.hours[key]))
html = '<td>' + this.createInputBox(this.hours[key], index, true) + '</td>';
html += '<td>' + this.createInputBox(this.hours[key], index, true) + '</td>';
else
html = '<td>' + this.createInputBox(this.hours[key], index, false) + '</td>';
$td.append(html);
html += '<td>' + this.createInputBox(this.hours[key], index, false) + '</td>';
}
return $td.html();
return html;
};
/**
......@@ -572,7 +504,6 @@
* @param day
* @returns {string}
*/
this.createInputBox = (hour, day, checked) => {
let dayFormat = moment(day, this.dateFormat).format('DDMMYYYY');
let isChecked = checked ? 'checked' : '';
......@@ -588,7 +519,7 @@
* @returns {string}
*/
this.createHeaderTable = () => {
let $tr = $('<tr>');
let $tr = document.createElement('tr');
let thead;
let finalSortedTab = [];
......@@ -597,7 +528,7 @@
//Ajoute les cases vide
for (let i = 0; i < nbrCaseVide; i++) {
thead = $tr.append('<th></th>');
thead = $tr.innerHTML += '<th></th>';
}
// Permet de mettre un 'h' pour les heures/minutes
......@@ -613,31 +544,32 @@
//Ajoute les heures
for(let index in finalSortedTab) {
thead = $tr.append('<th id="heure"><span>' + finalSortedTab[index] + '</span><div class="delete_col"><a href="#"><img src='+ CLOSEIMG +' /></a></div></th>');
thead = $tr.innerHTML += '<th id="heure"><span>' + finalSortedTab[index] + '</span><div class="delete_col"><a href="#"><img src='+ CLOSEIMG +' /></a></div></th>';
}
thead = $tr.append(`<th><div class="input-group bootstrap-timepicker timepicker">
thead = $tr.innerHTML += `<th><div class="input-group bootstrap-timepicker timepicker">
<label>Horaire</label>
<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> `);
</div></th>`;
return thead.html();
return thead;
};
/**
* Generate empty cell
*/
this.generateEmptyCell = () => {
let colLength = $('table thead th#heure').length + 1;
let lastTR = $('.doodle-table tbody tr:last-child');
let colLength = document.querySelectorAll('table thead th#heure').length + 1;
let lastTR = document.querySelector('.doodle-table tbody tr:last-child');
if(lastTR) {
for (let i = 0; i < colLength; i++) {
$(lastTR).append('<td></td>')
lastTR.innerHTML += '<td></td>';
}
}
};
/**
......@@ -665,7 +597,7 @@
* Get Json data
*/
this.getJsonData = () => {
let dataJson = $(this.config.inputSelector).val();
let dataJson = document.querySelector(this.config.inputSelector).value;
if(typeof dataJson === 'object') {
this.json = dataJson;
......@@ -676,7 +608,7 @@
if(data){
let json = JSON.parse(data);
if (!$.isEmptyObject(json)) {
if (Object.keys(json).length > 0) {
this.json = json;
}
}
......@@ -719,7 +651,7 @@
* @returns {boolean}
*/
this.fileExistsAndGetData = (url) => {
if(url){
if(url) {
let req = new XMLHttpRequest();
req.open('GET', url, false);
req.send();
......@@ -733,10 +665,10 @@
* Generate JSON
*/
this.createJSON = () => {
let $input = $(this.config.inputSelector);
let $input = document.querySelector(this.config.inputSelector);
if ($input.length > 0) {
$input.val(JSON.stringify(this.outputJson));
if ($input) {
$input.value = JSON.stringify(this.outputJson);
}
};
......@@ -745,15 +677,15 @@
* @param e event
*/
this.eventCheckInput = (e) => {
let data = $(e.target).data('check').split('_');
let isChecked = $(e.target).is(':checked');
let data = e.target.dataset.check.split('_');
let isChecked = e.target.checked;
if (isChecked) {
this.addInOutputObject(data);
$(e.target).parent().parent().css('background', '#e2deef');
e.target.parentNode.parentNode.style.background = '#e2deef';
} else {
this.removeInOutputObject(data);
$(e.target).parent().parent().css('background', '');
e.target.parentNode.parentNode.style.background = '';
}
this.createJSON();
......@@ -843,7 +775,7 @@
e.preventDefault();
e.stopImmediatePropagation();
let date = $(e.target).parent().parent().parent().data('date');
let date = e.target.closest('#date').dataset.date;
let formatDateDay = moment(date, this.dateFormat).locale('fr').format(this.dateFormat);
......@@ -865,7 +797,7 @@
e.stopImmediatePropagation();
e.preventDefault();
let hour = $(e.target).parent().parent().parent().find('span').first().text();
let hour = e.target.closest('#heure').querySelector('span').innerText;
hour = hour.replace('h', ':');
if(hour.length < 5){
......@@ -933,33 +865,22 @@
* Init
*/
this.initLoad();
};
};
/**
*
* @param options
* @returns {$.fn.Doodle}
* @constructor
*/
$.fn.Doodle = function(options) {
class Doodle {
constructor(el, options) {
moment.locale('fr')
let config = initializeConfig();
let config = this.initializeConfig(options);
this.each(function() {
if (!config.editMode) {
new DoodleFront($(this), config);
new DoodleFront(el, config);
}
else {
new DoodleBack($(this), config);
new DoodleBack(el, config);
}
}
});
return this;
/**
*
*/
function initializeConfig() {
initializeConfig(options) {
let defaultOptions = {
editMode: false,
inputSelector: '',
......@@ -967,8 +888,6 @@
outputDateFormat: ''
};
return $.extend({}, defaultOptions, options);
return Object.assign(defaultOptions, options);
}
};
})(jQuery);
};
package.json
......@@ -12,11 +12,8 @@
"dayjs": "^1.8.14"
},
"devDependencies": {
"bootstrap": "4.0.0-alpha.6",
"font-awesome": "^4.7.0",
"flatpickr": "^4.6.13",
"jquery": "^3.3.1",
"moment": "^2.20.1",
"tether": "^1.4.3"
"font-awesome": "^4.7.0",
"moment": "^2.20.1"
}
}
test/index.html
......@@ -5,9 +5,6 @@
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<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="../dist/css/doodle.css" rel="stylesheet">
......@@ -18,13 +15,13 @@
</head>
<body>
<div class="container">
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-12">
<div class="specific-doodle">
<div class="doodle table-responsive" data-json='{"29/07/2019":["11","12:15","13"],"30/07/2019":["11","12:15","13"],"31/07/2019":["11","12:15","13"],"01/08/2019":["13","12:15","11"],"02/08/2019":["11","12:15","13"]}' ></div>
<input type="hidden" id="inputVal" value='{"29/07/2019":["11","12:15","13"],"30/07/2019":["11","12:15","13"],"31/07/2019":["11","12:15","13"],"01/08/2019":["13","12:15","11"],"02/08/2019":["11","12:15","13"]}'>
<div class="doodle table-responsive" data-json='{"29/07/2019":["11","13"],"30/07/2019":["11","12:15","13"],"31/07/2019":["11","12:15","13"],"01/08/2019":["13","12:15","11"],"02/08/2019":["11","12:15","13"]}' ></div>
<input type="hidden" id="inputVal" value='{"29/07/2019":["11", "13"],"30/07/2019":["11","12:15","13"],"31/07/2019":["11","12:15","13"],"01/08/2019":["13","12:15","11"],"02/08/2019":["11","12:15","13"]}'>
</div>
<!--<div class="doodle table-responsive" data-json="json/data.json"></div>
......@@ -36,21 +33,12 @@
<footer>
<p>© Company 2017</p>
</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>-->
<!-- Moment -->
<script src="../node_modules/moment/min/moment.min.js"></script>
<script src="../node_modules/moment/min/moment-with-locales.js"></script>
<script src="../node_modules/flatpickr/dist/flatpickr.js"></script>
<script src="../node_modules/flatpickr/dist/l10n/fr.js"></script>
<script src="../dist/js/doodle.js" type="text/javascript"></script>
<script src="../test/js/app.js" type="text/javascript"></script>
</div>
<script src="../node_modules/moment/min/moment.min.js"></script>
<script src="../node_modules/moment/min/moment-with-locales.js"></script>
<script src="../node_modules/flatpickr/dist/flatpickr.js"></script>
<script src="../node_modules/flatpickr/dist/l10n/fr.js"></script>
<script src="../dist/js/doodle.js" type="text/javascript"></script>
<script src="../test/js/app.js" type="text/javascript"></script>
</body></html>
test/js/app.js
$( document ).ready(function() {
$('.doodle').Doodle({
new Doodle(document.querySelector('.doodle'), {
editMode: true,
vertical: true,
inputSelector: '#inputVal'
});
});
yarn.lock
......@@ -2,35 +2,20 @@
# 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"
dayjs@^1.8.14:
version "1.11.5"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.5.tgz#00e8cc627f231f9499c19b38af49f56dc0ac5e93"
integrity sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==
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"
flatpickr@^4.6.13:
version "4.6.13"
resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.13.tgz#8a029548187fd6e0d670908471e43abe9ad18d94"
integrity sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==
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.21.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.21.0.tgz#2a114b51d2a6ec9e6d83cf803f838a878d8a023a"
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