activity-calendar
Version:
a simple activity calendar
314 lines (313 loc) • 15.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Event_1 = require("./Event");
var $ = require("jquery");
var Drawer = (function () {
function Drawer(dataProvider, today, options) {
this.dataProvider = dataProvider;
this.today = today;
this.events = [];
var defaultLang = $("html").attr("lang");
this.options = Object.assign({
selector: null,
rtl: false,
colorStep: 20,
showCalendarGuide: true,
showCurrentRangeInfo: true,
showPreviousPeriodBtn: true,
showNextPeriodBtn: true,
previousPeriodMonth: 6,
nextPeriodMonth: 6,
lang: defaultLang || "fa",
langs: {
fa: {
nextBtnText: "جلو تر",
prevBtnText: "عقب تر",
noActivity: "بدون فعالیت",
toCountActivity: "تا {count} فعالیت"
},
en: {
nextBtnText: "Earlier",
prevBtnText: "Older",
noActivity: "Without activity",
toCountActivity: "To {count} activity",
}
},
onClickPreviousPeriodBtn: function () { return Promise.resolve(); },
onClickNextPeriodBtn: function () { return Promise.resolve(); },
onClickDay: this.onClickDay,
}, options);
this._from = today.clone().subtract(this.o.previousPeriodMonth, "month");
this._to = today.clone().add(this.o.nextPeriodMonth, "month");
if (!this.o.selector) {
throw new Error("Activity Calendar: you should pass selector element to run calendar!");
}
this.$element = (typeof this.o.selector === "string" ? $(this.o.selector) : this.o.selector);
if (!this.$element.length) {
throw new Error("Drawer: selector element not exists in page!");
}
if (!$("body").hasClass("has-activity-calendar")) {
$("body").addClass("has-activity-calendar");
}
this.$element.addClass("activity-calendar-container");
if (this.o.rtl) {
this.$element.addClass("rtl");
}
this.render();
}
Object.defineProperty(Drawer.prototype, "from", {
get: function () {
return this._from.clone();
},
enumerable: false,
configurable: true
});
Object.defineProperty(Drawer.prototype, "to", {
get: function () {
return this._to.clone();
},
enumerable: false,
configurable: true
});
Drawer.prototype.clone = function () {
return new Drawer(this.dataProvider, this.today, this.options);
};
Drawer.prototype.destroy = function () {
this.$element.remove();
};
Drawer.prototype.use = function (dataProvider, rerender) {
if (rerender === void 0) { rerender = true; }
this.dataProvider = dataProvider;
if (rerender) {
this.render();
}
};
Drawer.prototype.on = function (type, callback) {
if (typeof type === "string") {
this.on(type.split(" "), callback);
}
else {
for (var _i = 0, type_1 = type; _i < type_1.length; _i++) {
var t = type_1[_i];
this.events.push({
type: t,
callback: callback,
});
}
}
};
Drawer.prototype.trigger = function (event) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
var eventObj = typeof event === "string" ? new Event_1.default(event) : event;
for (var _a = 0, _b = this.events; _a < _b.length; _a++) {
var listener = _b[_a];
if (listener.type === eventObj.type) {
listener.callback(eventObj, args);
}
}
return eventObj;
};
Drawer.prototype.setThisDay = function (date, rebuildTable) {
if (rebuildTable === void 0) { rebuildTable = true; }
this.today = date;
if (rebuildTable) {
this.render();
}
};
Drawer.prototype.goToPrevious = function () {
this._to = this._from.clone();
this.today = this._to.clone().subtract(this.o.nextPeriodMonth, "month");
this._from = this.today.clone().subtract(this.o.previousPeriodMonth, "month");
this.render();
};
Drawer.prototype.goToNext = function () {
this._from = this._to.clone();
this.today = this._from.clone().add(this.o.previousPeriodMonth, "month");
this._to = this.today.clone().add(this.o.nextPeriodMonth, "month");
this.render();
};
Drawer.prototype.render = function () {
if (this.o.showPreviousPeriodBtn || this.o.showCurrentRangeInfo || this.o.showNextPeriodBtn) {
this.$header = $("<div class=\"row activity-period-keys\" dir=\"ltr\">\n\n\t\t\t\t" + (this.o.showPreviousPeriodBtn ? "<div class=\"col-lg-2 " + (!this.o.showCurrentRangeInfo ? "col-lg-offset-8" : "") + " col-md-3 col-xs-6\">\n\t\t\t\t\t<button class=\"btn btn-default btn-block btn-calendar btn-calendar-prev tooltips\" title=\"" + this.dp.getBtnsRangeText(this._from.clone().subtract(this.o.previousPeriodMonth + this.o.nextPeriodMonth, "month"), this._from.clone()) + "\">\n\t\t\t\t\t\t<i class=\"fa fa-angle-" + (this.o.rtl ? "right" : "left") + "\"></i>\n\t\t\t\t\t\t" + this.translate("prevBtnText") + "\n\t\t\t\t\t</button>\n\t\t\t\t</div>" : "") + "\n\n\t\t\t\t" + (this.o.showCurrentRangeInfo ? "<div class=\"col-lg-8 " + (!this.o.showNextPeriodBtn ? "col-lg-offset-2" : "") + " col-md-6 hidden-xs text-center date-range-info\">\n\t\t\t\t\t" + this.dp.getHeaderRangeText(this._from, this._to) + "\n\t\t\t\t</div>" : "") + "\n\n\t\t\t\t" + (this.o.showNextPeriodBtn ? "<div class=\"col-lg-2 col-md-3 col-xs-6\">\n\t\t\t\t\t<button class=\"btn btn-default btn-block btn-calendar btn-calendar-next tooltips\" title=\"" + this.dp.getBtnsRangeText(this._to.clone(), this._to.clone().add(this.o.previousPeriodMonth + this.o.nextPeriodMonth, "month")) + "\">\n\t\t\t\t\t\t" + this.translate("nextBtnText") + "\n\t\t\t\t\t\t<i class=\"fa fa-angle-" + (this.o.rtl ? "left" : "right") + " btn-calendar-next-icon\"></i>\n\t\t\t\t\t</button>\n\t\t\t\t</div>" : "") + "\n\n\t\t\t\t" + (this.o.showCurrentRangeInfo ? "<div class=\"col-xs-12 visible-xs text-center date-range-info\">\n\t\t\t\t\t" + this.dp.getHeaderRangeText(this._from, this._to) + "\n\t\t\t\t</div>" : "") + "\n\n\t\t\t</div>");
}
var html = "";
var start = this._from.clone();
var end = this._to.clone();
var dates = "";
var months = "";
var firstDayOfWeek = this.dp.getFirstDayOfWeek();
for (var first = true, x = start.month(); start.diff(end, "day") != end.diff(start, "day"); first = false, start.add(1, "day")) {
if (start.weekday() === firstDayOfWeek && !first) {
dates += "</div>";
}
if (start.weekday() === firstDayOfWeek || first) {
dates += '<div class="activity-calendar-column">';
}
if (first) {
var clonedStart = start.clone();
var wd = clonedStart.weekday();
if (wd > firstDayOfWeek) {
for (; wd > firstDayOfWeek; wd--) {
dates += '<div class="activity-calendar-square activity-calendar-square-empty"></div>';
}
}
}
if (first || x !== start.month()) {
months += "<span class=\"activity-calendar-month\">" + start.getMonthName() + "</span>";
x = start.month();
}
var activities = this.dp.getTotalActivitiesForDate(start);
var count = activities > 0 ? activities : 0;
var color = Math.min(Math.ceil(count / this.o.colorStep), 4);
var tooltip = this.dp.getDayTooltipText(start);
dates += "<div\n\t\t\t\tclass=\"activity-calendar-square tooltips activity-calendar-color" + color + (this.isDateLinkable(start) ? "" : " activity-calendar-cursor-default") + "\"\n\t\t\t\tdata-ac-date='" + start.format("YYYY/MM/DD") + "'\n\t\t\t\tdata-ac-count=\"" + count + "\"\n\t\t\t\ttitle=\"" + tooltip + "\">\n\t\t\t</div>";
}
dates += "</div>";
var sideDays = "";
for (var _i = 0, _a = this.dp.getSideWeekDays(); _i < _a.length; _i++) {
var day = _a[_i];
sideDays += "<div class=\"activity-calendar-day\">" + day + "</div>";
}
html += "<div class=\"activity-calendar-content\">\n\t\t\t<div class=\"activity-calendar-days\">" + sideDays + "</div>\n\t\t\t<div class=\"activity-calendar-month-dates\">\n\t\t\t\t<div class=\"activity-calendar-dates\">\n\t\t\t\t\t<div class=\"activity-calendar-months\">" + months + "</div>\n\t\t\t\t\t" + dates + "\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>";
if (this.o.showCalendarGuide) {
html += "<div class=\"activity-calendar-guide\">\n\t\t\t\t<div class=\"activity-calendar-square tooltips activity-calendar-color0\" data-placement=\"bottom\" title=\"" + this.translate("noActivity") + "\"></div>\n\t\t\t\t<div class=\"activity-calendar-square tooltips activity-calendar-color1\" data-placement=\"bottom\" title=\"" + this.translate("toCountActivity", { count: this.o.colorStep }) + "\"></div>\n\t\t\t\t<div class=\"activity-calendar-square tooltips activity-calendar-color2\" data-placement=\"bottom\" title=\"" + this.translate("toCountActivity", { count: this.o.colorStep * 2 }) + "\"></div>\n\t\t\t\t<div class=\"activity-calendar-square tooltips activity-calendar-color3\" data-placement=\"bottom\" title=\"" + this.translate("toCountActivity", { count: this.o.colorStep * 3 }) + "\"></div>\n\t\t\t\t<div class=\"activity-calendar-square tooltips activity-calendar-color4\" data-placement=\"bottom\" title=\"" + this.translate("toCountActivity", { count: this.o.colorStep * 4 }) + "\"></div>\n\t\t\t</div>";
}
$(".tooltips", this.$element).tooltip("hide");
this.$element.html(html);
if (this.$header !== undefined) {
this.$element.prepend(this.$header);
}
this.setEvents();
};
Drawer.prototype.setEvents = function () {
$(".tooltips", this.$element).tooltip({
container: "body",
html: true,
});
this.setHeaderEvents();
this.setTableEvents();
};
Object.defineProperty(Drawer.prototype, "element", {
get: function () {
return this.$element;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Drawer.prototype, "o", {
get: function () {
return this.options;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Drawer.prototype, "dp", {
get: function () {
return this.dataProvider;
},
enumerable: false,
configurable: true
});
Drawer.prototype.onClickPreviousPeriodBtn = function (e, $btn) {
var _this = this;
var html = $btn.html();
$("button", this.$header).prop("disabled", true);
$btn.html("<i class=\"fa fa-spinner fa-pulse fa-fw\"></i>").tooltip("hide");
var newToday = this._from.clone();
this.o.onClickPreviousPeriodBtn(e, {
from: newToday.clone().subtract(this.o.previousPeriodMonth, "month"),
to: newToday.clone().add(this.o.nextPeriodMonth, "month"),
}, $btn)
.then(function () {
_this.goToPrevious();
})
.catch(function () {
$("button", _this.$header).prop("disabled", false);
$btn.html(html).tooltip("show");
});
};
Drawer.prototype.onClickNextPeriodBtn = function (e, $btn) {
var _this = this;
var html = $btn.html();
$("button", this.$header).prop("disabled", true);
$btn.html("<i class=\"fa fa-spinner fa-pulse fa-fw\"></i>").tooltip("hide");
var newToday = this._to.clone();
this.o.onClickNextPeriodBtn(e, {
from: newToday.clone().subtract(this.o.previousPeriodMonth, "month"),
to: newToday.clone().add(this.o.nextPeriodMonth, "month"),
}, $btn)
.then(function () {
_this.goToNext();
})
.catch(function () {
$("button", _this.$header).prop("disabled", false);
$btn.html(html).tooltip("show");
});
};
Drawer.prototype.onClickDay = function (e, el, day) {
console.log("Activity Calendar Drawer Event: click on day, event:", e, " date:", day, "JQuery element:", el);
};
Drawer.prototype.isDateLinkable = function (date) {
if (typeof this.dp.isDateLinkable !== "undefined") {
return this.dp.isDateLinkable(date);
}
return false;
};
Drawer.prototype.setHeaderEvents = function () {
var _this = this;
var $previousPeriodBtn = $(".btn-calendar-prev", this.$header);
var $nextPeriodBtn = $(".btn-calendar-next", this.$header);
if ($previousPeriodBtn.length) {
$previousPeriodBtn.on("click", function (e) {
e.preventDefault();
var event = _this.trigger("prev-btn-click");
if (!event.isPrevented) {
_this.onClickPreviousPeriodBtn(event, $previousPeriodBtn);
}
});
}
if ($nextPeriodBtn.length) {
$nextPeriodBtn.on("click", function (e) {
e.preventDefault();
var event = _this.trigger("next-btn-click", $nextPeriodBtn);
if (!event.isPrevented) {
_this.onClickNextPeriodBtn(event, $nextPeriodBtn);
}
});
}
};
Drawer.prototype.setTableEvents = function () {
var that = this;
$(".activity-calendar-square", this.$element).on("click", function (e) {
e.preventDefault();
var $this = $(this);
var day = $this.data("ac-date");
var event = that.trigger("day-click", $this, day);
if (!event.isPrevented) {
that.o.onClickDay(event, $this, day);
}
});
};
Drawer.prototype.translate = function (key, params) {
var activeLang = this.o.langs[this.o.lang];
if (!activeLang) {
return "";
}
var phrase = activeLang[key];
if (!phrase) {
return "";
}
return phrase.replace(/.?{([^}]+)}/g, function (matched, variable) {
var f = matched.charAt(0);
if (f === "\\") {
return matched;
}
return matched = ((f !== "{" ? f : "") + (params[variable] !== undefined ? params[variable] : ""));
});
};
return Drawer;
}());
exports.default = Drawer;