Skip to content

Commit

Permalink
Add bulk actions
Browse files Browse the repository at this point in the history
  • Loading branch information
@robinparisi
robinparisi committed Sep 3, 2017
1 parent 8d424ae commit 1e1bc3f
Show file tree
Hide file tree
Showing 6 changed files with 152 additions and 28 deletions.
2 changes: 1 addition & 1 deletion dist/calendar.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

74 changes: 66 additions & 8 deletions dist/calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ var Calendar = function () {
switch (mode) {
case ADD_MODE:
this.mode.current = ADD_MODE;
this.uiManager.showFooter('Choisissez une plage horaire libre', function () {
this.uiManager.showFooter('Choisissez une plage horaire libre', 'Annuler', function () {
// if we were previously in edit mode
if (_this2.mode.EDIT_MODE.event !== null) {
_this2.addEvent(_this2.mode.EDIT_MODE.event);
Expand All @@ -132,8 +132,8 @@ var Calendar = function () {
this.mode.current = LOCKED_MODE;
this.target.dataset.mode = LOCKED_MODE;

this.uiManager.showFooter('Choisissez les plages horaires à bloquer', function () {
_this2.resetMode();
this.uiManager.showFooter('Choisissez les plages horaires à bloquer', 'Valider', function () {
_this2.commitLocked();
});

break;
Expand Down Expand Up @@ -200,14 +200,15 @@ var Calendar = function () {
}
}, {
key: 'commitLocked',
value: function commitLocked(callback) {
value: function commitLocked() {
var colNumber = this.options.numberOfDays * this.options.columnsPerDay;
var lineNumber = this.dateManager.hours.length;
var samePeriod = false;
for (var i = 1; i <= colNumber; i++) {
for (var j = 1; j <= lineNumber; j++) {
var currentCell = document.querySelector('[data-coordinate="' + j + '#' + i + '"]');
var id = currentCell.dataset.id.split('#');
var coordinate = currentCell.dataset.coordinate.split('#');

var lastItem = this.mode.LOCKED_MODE.stack[this.mode.LOCKED_MODE.stack.length - 1];

Expand All @@ -217,7 +218,7 @@ var Calendar = function () {
// retrieve column based on day
var coordinates = currentCell.dataset.coordinate.split('#');
lastItem.column = coordinates[1] % this.options.columnsPerDay == 0 ? this.options.columnsPerDay : coordinates[1] % this.options.columnsPerDay;
} else if (currentCell.dataset.type !== 'locked' && lastItem.end === null && lastItem.start !== null) {
} else if (currentCell.dataset.type !== 'locked' && lastItem.end === null && lastItem.start !== null || currentCell.dataset.type === 'locked' && parseInt(coordinate[0]) === this.dateManager.hours.length) {
lastItem.end = new Date(parseInt(id[0]));
this.mode.LOCKED_MODE.stack.push({
start: null,
Expand All @@ -233,7 +234,7 @@ var Calendar = function () {
this.mode.LOCKED_MODE.stack.splice(-1, 1);
}

callback(this.mode.LOCKED_MODE.stack);
this.options.onCommitLocked(this.mode.LOCKED_MODE.stack);

this.mode.LOCKED_MODE.stack = [{
start: null,
Expand Down Expand Up @@ -296,11 +297,45 @@ var Calendar = function () {
_this5.options.onPeriodChange.bind(_this5)(newDate, DateManager.addToDate(newDate, _this5.options.numberOfDays));
});
}
}, {
key: 'bulk',
value: function bulk(event) {
if (!event.target.dataset.bulk) return;

if (event.target.dataset.bulk === 'locked') {
for (var i = 1; i <= this.dateManager.hours.length; i++) {
var cell = document.querySelector('[data-coordinate="' + i + '#' + event.target.dataset.col + '"]');
if (cell.dataset.type !== 'event') {
cell.classList.add('calendar-locked');
cell.dataset.type = 'locked';
}
}
event.target.innerHTML = UIManager.getIcon('unlocked');
event.target.dataset.bulk = 'unlocked';
} else {
for (var _i = 1; _i <= this.dateManager.hours.length; _i++) {
var _cell = document.querySelector('[data-coordinate="' + _i + '#' + event.target.dataset.col + '"]');
console.log('[data-coordinate="' + _i + '#' + event.target.dataset.col + '"]');
console.log(_cell);
if (_cell.dataset.type !== 'event') {
_cell.classList.remove('calendar-locked');
_cell.removeAttribute('data-type');
}
}
event.target.innerHTML = UIManager.getIcon('locked');
event.target.dataset.bulk = 'locked';
}
}
}, {
key: '_bindEvents',
value: function _bindEvents() {
var _this6 = this;

// bulk actions
[].forEach.call(document.querySelectorAll('[data-bulk]'), function (el) {
el.addEventListener('click', _this6.bulk.bind(_this6));
});

[].forEach.call(document.querySelectorAll('[data-type="event"]'), function (el) {
// click on event
_this6._attachClickEvent(el);
Expand Down Expand Up @@ -785,14 +820,19 @@ var UIManager = function () {
}
}, {
key: 'showFooter',
value: function showFooter(text, callback) {
value: function showFooter(text) {
var _this = this;

var btnText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'annuler';
var callback = arguments[2];

this.ui.footer.message.innerHTML = text;
setTimeout(function () {
_this.ui.footer.wrapper.classList.add('calendar-mode--active');
}, 10);

this.ui.footer.btn.innerText = btnText;

this.ui.footer.btn.addEventListener('click', function (event) {
callback();
_this.hideFooter();
Expand Down Expand Up @@ -851,8 +891,13 @@ var UIManager = function () {
th.innerHTML = '';
th.classList.add('calendar-bulk');
} else {
th.innerHTML = 'bloquer';
var button = document.createElement('button');
button.innerHTML = UIManager.getIcon('locked');
button.dataset.col = i;
button.dataset.bulk = 'locked';

th.classList.add('calendar-bulk');
th.appendChild(button);
}

bulkActionsLine.appendChild(th);
Expand Down Expand Up @@ -953,6 +998,19 @@ var UIManager = function () {
value: function getCellCoordinate(index, column) {
return index + 1 + '#' + column;
}
}], [{
key: 'getIcon',
value: function getIcon(icon) {
switch (icon) {
case 'locked':
return '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M73.668,44.387h-2.912V30.659c0-11.228-9.135-20.362-20.362-20.362c-11.229,0-20.363,9.134-20.363,20.362v13.728h-2.91 c-3.549,0-6.428,2.876-6.428,6.425v32.556c0,3.549,2.879,6.425,6.428,6.425h46.547c3.549,0,6.426-2.876,6.426-6.425V50.813 C80.094,47.264,77.217,44.387,73.668,44.387z M52.359,69.109v7.635c0,1.087-0.881,1.967-1.965,1.967 c-1.086,0-1.967-0.88-1.967-1.967v-7.635c-2.223-0.805-3.814-2.928-3.814-5.43c0-3.191,2.588-5.781,5.781-5.781 c3.19,0,5.782,2.59,5.782,5.781C56.176,66.184,54.582,68.307,52.359,69.109z M63.045,44.387H37.742V30.659 c0-6.976,5.676-12.652,12.652-12.652c6.975,0,12.651,5.676,12.651,12.652V44.387z"></path></svg>\n ';
break;
case 'unlocked':
return '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M85.113,44.387H49.188V30.659c0-11.228-9.136-20.362-20.364-20.362S8.46,19.431,8.46,30.659V47.98 c0,2.129,1.726,3.855,3.855,3.855s3.854-1.726,3.854-3.855V30.659c0-6.976,5.676-12.652,12.653-12.652 c6.978,0,12.653,5.676,12.653,12.652v13.728h-2.911c-3.548,0-6.426,2.876-6.426,6.425v32.556c0,3.549,2.877,6.425,6.426,6.425 h46.547c3.55,0,6.427-2.876,6.427-6.425V50.813C91.539,47.264,88.662,44.387,85.113,44.387z M63.807,69.109v7.635 c0,1.087-0.883,1.967-1.967,1.967c-1.087,0-1.967-0.88-1.967-1.967v-7.635c-2.223-0.805-3.814-2.928-3.814-5.43 c0-3.191,2.59-5.781,5.781-5.781c3.192,0,5.78,2.59,5.78,5.781C67.62,66.184,66.027,68.307,63.807,69.109z"></path></svg>';
break;
default:
}
}
}]);

return UIManager;
Expand Down
11 changes: 3 additions & 8 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@
<button id="add">Add task</button>
<button id="edit">Edit task 1</button>
<button id="block">Blocked mode</button>
<button id="commit">Commit blocked cell</button>
<button id="reset">Reset</button>
</div>
<div id="calendar"></div>
Expand Down Expand Up @@ -134,6 +133,9 @@
onPeriodChange: function(start, end) {
//console.log(start + ' ->', end);
this.loadEvents(events, blockedEvents);
},
onCommitLocked: function(periods) {
console.log(periods);
}
});

Expand Down Expand Up @@ -166,13 +168,6 @@
calendar.resetMode();
});


document.querySelector('#commit').addEventListener('click', () => {
calendar.commitLocked((periods) => {
console.log(periods);
});
});

</script>
</body>
</html>
20 changes: 17 additions & 3 deletions src/css/calendar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,8 @@
background-color: transparent;
}

.calendar tr:hover,
.calendar th:active {
background-color: #eceff1;
.calendar tbody tr:hover {
background-color: #eceff1;
}

.calendar td {
Expand All @@ -52,6 +51,21 @@
display: table-cell;
}

.calendar-bulk button {
margin: 0;
padding: 0 2rem;
outline: none;
background-color: transparent;
}

.calendar-bulk button svg {
width: 1.5rem;
height: 1.5rem;
pointer-events: none;

fill: #212121;
}

/* event
-------------------------------------------------------------- */

Expand Down
49 changes: 43 additions & 6 deletions src/js/calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ class Calendar {
switch (mode) {
case ADD_MODE:
this.mode.current = ADD_MODE;
this.uiManager.showFooter('Choisissez une plage horaire libre', () => {
this.uiManager.showFooter('Choisissez une plage horaire libre', 'Annuler', () => {
// if we were previously in edit mode
if (this.mode.EDIT_MODE.event !== null) {
this.addEvent(this.mode.EDIT_MODE.event);
Expand All @@ -115,8 +115,8 @@ class Calendar {
this.mode.current = LOCKED_MODE;
this.target.dataset.mode = LOCKED_MODE;

this.uiManager.showFooter('Choisissez les plages horaires à bloquer', () => {
this.resetMode();
this.uiManager.showFooter('Choisissez les plages horaires à bloquer', 'Valider', () => {
this.commitLocked();
});

break;
Expand Down Expand Up @@ -178,14 +178,15 @@ class Calendar {
this._switchMode(LOCKED_MODE);
};

commitLocked(callback) {
commitLocked() {
let colNumber = this.options.numberOfDays * this.options.columnsPerDay;
let lineNumber = this.dateManager.hours.length;
let samePeriod = false;
for (let i = 1; i <= colNumber; i++) {
for (let j = 1; j <= lineNumber; j++) {
let currentCell = document.querySelector('[data-coordinate="' + j + '#' + i + '"]');
let id = currentCell.dataset.id.split('#');
let coordinate = currentCell.dataset.coordinate.split('#');

let lastItem = this.mode.LOCKED_MODE.stack[this.mode.LOCKED_MODE.stack.length - 1];

Expand All @@ -197,7 +198,7 @@ class Calendar {
lastItem.column = coordinates[1] % this.options.columnsPerDay == 0 ? this.options.columnsPerDay :
coordinates[1] % this.options.columnsPerDay;
} else if (currentCell.dataset.type !== 'locked' && lastItem.end === null && lastItem.start !==
null) {
null || currentCell.dataset.type === 'locked' && parseInt(coordinate[0]) === this.dateManager.hours.length) {
lastItem.end = new Date(parseInt(id[0]));
this.mode.LOCKED_MODE.stack.push({
start: null,
Expand All @@ -213,7 +214,7 @@ class Calendar {
this.mode.LOCKED_MODE.stack.splice(-1, 1);
}

callback(this.mode.LOCKED_MODE.stack);
this.options.onCommitLocked(this.mode.LOCKED_MODE.stack);

this.mode.LOCKED_MODE.stack = [{
start: null,
Expand Down Expand Up @@ -271,8 +272,44 @@ class Calendar {
});
}

bulk(event) {
if(!event.target.dataset.bulk) return;

if(event.target.dataset.bulk === 'locked') {
for(let i = 1; i <= this.dateManager.hours.length; i++) {
let cell = document.querySelector('[data-coordinate="' + i + '#' + event.target.dataset.col + '"]');
if(cell.dataset.type !== 'event') {
cell.classList.add('calendar-locked');
cell.dataset.type = 'locked';
}
}
event.target.innerHTML = UIManager.getIcon('unlocked');
event.target.dataset.bulk = 'unlocked';

} else {
for(let i = 1; i <= this.dateManager.hours.length; i++) {
let cell = document.querySelector('[data-coordinate="' + i + '#' + event.target.dataset.col + '"]');
console.log('[data-coordinate="' + i + '#' + event.target.dataset.col + '"]');
console.log(cell);
if(cell.dataset.type !== 'event') {
cell.classList.remove('calendar-locked');
cell.removeAttribute('data-type');
}
}
event.target.innerHTML = UIManager.getIcon('locked');
event.target.dataset.bulk = 'locked';
}


}

_bindEvents() {

// bulk actions
[].forEach.call(document.querySelectorAll('[data-bulk]'), (el) => {
el.addEventListener('click', this.bulk.bind(this));
});

[].forEach.call(document.querySelectorAll('[data-type="event"]'), (el) => {
// click on event
this._attachClickEvent(el);
Expand Down
Loading

0 comments on commit 1e1bc3f

Please sign in to comment.