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