First commit
This commit is contained in:
47
index.html
Normal file
47
index.html
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="mobile-web-app-capable" content="yes" />
|
||||||
|
<title>PhotoCalendar</title>
|
||||||
|
<script src="photoCalendar.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="controls">
|
||||||
|
<div class="control select">
|
||||||
|
<label>Año:</label>
|
||||||
|
<input type="number" min="2024" step="1" value="2024" id="year" />
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col50">
|
||||||
|
<div class="control checkbox">
|
||||||
|
<input type="checkbox" id="showMonthSeparators" />
|
||||||
|
<label for="showMonthSeparators">Dividir meses</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col50">
|
||||||
|
<div class="control checkbox">
|
||||||
|
<input type="checkbox" id="centerMonths" />
|
||||||
|
<label for="centerMonths">Centrar meses</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col50">
|
||||||
|
<div class="control file">
|
||||||
|
<label for="imageInput">Seleccionar Foto</label>
|
||||||
|
<input type="file" id="imageInput" accept="image/*" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col50">
|
||||||
|
<div class="control button">
|
||||||
|
<button id="downloadButton">Descargar foto-calendario</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="preview">
|
||||||
|
<canvas id="calendarCanvas" width="1181" height="1771"></canvas>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
307
photoCalendar.js
Normal file
307
photoCalendar.js
Normal file
@ -0,0 +1,307 @@
|
|||||||
|
class PhotoCalendar {
|
||||||
|
dragOptions = {
|
||||||
|
isDragging: false,
|
||||||
|
lastZoom: 1,
|
||||||
|
MAX_ZOOM: 5,
|
||||||
|
MIN_ZOOM: 0.1,
|
||||||
|
SCROLL_SENSITIVITY: 0.0005,
|
||||||
|
startX: null,
|
||||||
|
startY: null,
|
||||||
|
x: null,
|
||||||
|
y: null,
|
||||||
|
dragging: false,
|
||||||
|
mouseOver: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
options = {
|
||||||
|
calendarStartY: 690,
|
||||||
|
divideMonths: false,
|
||||||
|
fillStyle: "white",
|
||||||
|
img: null,
|
||||||
|
photoOffsetX: 0,
|
||||||
|
photoOffsetY: 0,
|
||||||
|
year: 2024,
|
||||||
|
centerMonths: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.initControls();
|
||||||
|
this.onYearChange();
|
||||||
|
}
|
||||||
|
|
||||||
|
overPhotoImg(x, y) {
|
||||||
|
this.mouseOver = y >= 0 && y <= this.options.calendarStartY;
|
||||||
|
return this.mouseOver;
|
||||||
|
}
|
||||||
|
getEventLocation(e) {
|
||||||
|
if (e.touches && e.touches.length == 1) {
|
||||||
|
return { x: e.touches[0].clientX, y: e.touches[0].clientY };
|
||||||
|
} else if (e.clientX && e.clientY) {
|
||||||
|
return { x: e.clientX, y: e.clientY };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onPointerDown(e) {
|
||||||
|
this.dragOptions.isDragging = true;
|
||||||
|
let x = this.getEventLocation(e).x;
|
||||||
|
let y = this.getEventLocation(e).y;
|
||||||
|
|
||||||
|
if (this.overPhotoImg(x, y)) {
|
||||||
|
this.dragOptions.x = x - this.options.photoOffsetX;
|
||||||
|
this.dragOptions.y = y - this.options.photoOffsetY;
|
||||||
|
this.renderPhoto();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dragOptions.x = x;
|
||||||
|
this.dragOptions.y = y;
|
||||||
|
}
|
||||||
|
dragStop() {
|
||||||
|
this.dragOptions.isDragging = false;
|
||||||
|
}
|
||||||
|
onPointerUp(e) {
|
||||||
|
this.dragStop();
|
||||||
|
}
|
||||||
|
|
||||||
|
onPointerMove(e) {
|
||||||
|
if (this.dragOptions.isDragging) {
|
||||||
|
// this.options.photoOffsetX = this.getEventLocation(e).x - this.dragOptions.x;
|
||||||
|
this.options.photoOffsetY = this.getEventLocation(e).y - this.dragOptions.y;
|
||||||
|
this.renderPhoto();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// mouse over
|
||||||
|
let x = this.getEventLocation(e).x;
|
||||||
|
let y = this.getEventLocation(e).y;
|
||||||
|
}
|
||||||
|
handleTouch(e, singleTouchHandler) {
|
||||||
|
if (e.touches.length <= 1) {
|
||||||
|
singleTouchHandler(e);
|
||||||
|
|
||||||
|
if (e.type == "touchend") {
|
||||||
|
e.preventDefault();
|
||||||
|
this.dragOptions.mouseOver = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (e.type == "touchmove" && e.touches.length == 2)
|
||||||
|
{
|
||||||
|
this.dragStop();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
initControls() {
|
||||||
|
const self = this;
|
||||||
|
document.getElementById("year").addEventListener("change", (e) => {
|
||||||
|
self.options.year = e.target.value;
|
||||||
|
self.onYearChange();
|
||||||
|
});
|
||||||
|
document.getElementById("showMonthSeparators").addEventListener("click", (e) => {
|
||||||
|
self.options.divideMonths = e.target.checked;
|
||||||
|
self.onYearChange();
|
||||||
|
});
|
||||||
|
document.getElementById("centerMonths").addEventListener("click", (e) => {
|
||||||
|
self.options.centerMonths = e.target.checked;
|
||||||
|
self.onYearChange();
|
||||||
|
});
|
||||||
|
document.getElementById("imageInput").addEventListener("change", (e) => self.handleImageUpload(e));
|
||||||
|
document.getElementById("downloadButton").addEventListener("click", (e) => self.downloadCanvas());
|
||||||
|
|
||||||
|
const canvas = this.getCanvas();
|
||||||
|
canvas.addEventListener("mousedown", (e) => self.onPointerDown(e));
|
||||||
|
canvas.addEventListener("touchstart", (e) => self.handleTouch(e, (e) => self.onPointerDown(e)));
|
||||||
|
canvas.addEventListener("mouseup", (e) => self.onPointerUp(e));
|
||||||
|
canvas.addEventListener("touchend", (e) => self.handleTouch(e, (e) => self.onPointerUp(e)));
|
||||||
|
canvas.addEventListener("mousemove", (e) => self.onPointerMove(e));
|
||||||
|
canvas.addEventListener("touchmove", (e) => self.handleTouch(e, (e) => self.onPointerMove(e)));
|
||||||
|
}
|
||||||
|
|
||||||
|
handleImageUpload(event) {
|
||||||
|
const self = this;
|
||||||
|
const canvas = self.getCanvas();
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const file = event.target.files[0];
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
reader.onload = function (e) {
|
||||||
|
const img = new Image();
|
||||||
|
img.onload = function () {
|
||||||
|
self.options.img = img;
|
||||||
|
self.renderPhoto();
|
||||||
|
};
|
||||||
|
img.src = e.target.result;
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
onYearChange() {
|
||||||
|
const calendar = this.createCalendar(this.options.year);
|
||||||
|
this.renderCalendar(calendar);
|
||||||
|
}
|
||||||
|
|
||||||
|
createCalendar(year) {
|
||||||
|
const calendar = [];
|
||||||
|
const daysInWeek = 7;
|
||||||
|
const monthsInYear = 12;
|
||||||
|
|
||||||
|
// Helper function to determine the number of days in a given month and year
|
||||||
|
function getDaysInMonth(month, year) {
|
||||||
|
return new Date(year, month + 1, 0).getDate();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to get the day of the week (0 is Monday, 6 is Sunday)
|
||||||
|
function getDayOfWeek(year, month, day) {
|
||||||
|
const date = new Date(year, month, day);
|
||||||
|
const dayOfWeek = date.getDay();
|
||||||
|
return (dayOfWeek + 6) % 7; // Adjust so Monday is 0 and Sunday is 6
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let month = 0; month < monthsInYear; month++) {
|
||||||
|
const daysInMonth = getDaysInMonth(month, year);
|
||||||
|
const monthArray = [];
|
||||||
|
let weekArray = Array(daysInWeek).fill(null);
|
||||||
|
|
||||||
|
for (let day = 1; day <= daysInMonth; day++) {
|
||||||
|
const dayOfWeek = getDayOfWeek(year, month, day);
|
||||||
|
weekArray[dayOfWeek] = day;
|
||||||
|
if (dayOfWeek === 6 || day === daysInMonth) {
|
||||||
|
// End of the week or month
|
||||||
|
monthArray.push(weekArray);
|
||||||
|
weekArray = Array(daysInWeek).fill(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
calendar.push(monthArray);
|
||||||
|
}
|
||||||
|
|
||||||
|
return calendar;
|
||||||
|
}
|
||||||
|
|
||||||
|
getCanvas() {
|
||||||
|
const canvas = document.getElementById("calendarCanvas");
|
||||||
|
return canvas;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderPhoto() {
|
||||||
|
const canvas = this.getCanvas();
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
ctx.fillStyle = this.options.fillStyle;
|
||||||
|
ctx.fillRect(0, 0, canvas.width, this.options.calendarStartY - 1); // Clear canvas
|
||||||
|
|
||||||
|
if (this.options.img == null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate the aspect ratio and new height
|
||||||
|
const aspectRatio = this.options.img.width / this.options.img.height;
|
||||||
|
const newWidth = canvas.width;
|
||||||
|
const newHeight = newWidth / aspectRatio;
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.rect(0, 0, canvas.width, this.options.calendarStartY - 1);
|
||||||
|
ctx.clip();
|
||||||
|
ctx.drawImage(this.options.img, this.options.photoOffsetX, this.options.photoOffsetY, newWidth, newHeight);
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
downloadCanvas() {
|
||||||
|
const canvas = this.getCanvas();
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = canvas.toDataURL("image/png");
|
||||||
|
link.download = "calendar.png";
|
||||||
|
link.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
renderCalendar(calendar) {
|
||||||
|
const canvas = this.getCanvas();
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
ctx.fillStyle = this.options.fillStyle;
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
this.renderPhoto();
|
||||||
|
|
||||||
|
ctx.fillStyle = this.options.fillStyle;
|
||||||
|
ctx.fillRect(0, this.options.calendarStartY, canvas.width, canvas.height);
|
||||||
|
const monthWidth = canvas.width / 3;
|
||||||
|
const monthHeigth = 30 + 30 * 8;
|
||||||
|
for (let i = 0; i < 12; i++) {
|
||||||
|
this.renderMonth(calendar, i, canvas, (i % 3) * monthWidth, parseInt(i / 3) * monthHeigth + this.options.calendarStartY, monthWidth);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
drawText(ctx, text, x, y) {
|
||||||
|
ctx.textAlign = "left";
|
||||||
|
ctx.textBaseline = "middle";
|
||||||
|
ctx.fillText(text, x, y);
|
||||||
|
}
|
||||||
|
|
||||||
|
drawTextCentered(ctx, text, x, y, cellWidth) {
|
||||||
|
const centerX = x + cellWidth / 2;
|
||||||
|
ctx.textAlign = "center";
|
||||||
|
ctx.textBaseline = "middle";
|
||||||
|
ctx.fillText(text, centerX, y);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderMonth(calendar, month, canvas, x, y, w) {
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const monthNames = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
|
||||||
|
const dayInitials = ["L", "M", "X", "J", "V", "S", "D"];
|
||||||
|
const cellWidth = w / 8;
|
||||||
|
const cellHeight = 30;
|
||||||
|
const headerHeight = 30;
|
||||||
|
|
||||||
|
if (this.options.divideMonths) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.rect(x, y, w, 30 + 30 * 8);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
x += cellWidth / 2;
|
||||||
|
y += headerHeight;
|
||||||
|
|
||||||
|
// Clear the area where the month will be rendered
|
||||||
|
ctx.fillStyle = this.options.fillStyle;
|
||||||
|
ctx.fillRect(x, y, 7 * cellWidth, calendar[month].length * cellHeight + headerHeight * 2);
|
||||||
|
|
||||||
|
// Draw the month name
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.font = "bold 28px Arial";
|
||||||
|
if (this.options.centerMonths) {
|
||||||
|
this.drawTextCentered(ctx, monthNames[month], x, y, cellWidth * 7);
|
||||||
|
} else {
|
||||||
|
this.drawText(ctx, monthNames[month], x + cellWidth / 3, y);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw the day initials header
|
||||||
|
ctx.font = "24px Arial";
|
||||||
|
for (let i = 0; i < dayInitials.length; i++) {
|
||||||
|
// ctx.fillText(dayInitials[i], x + i * cellWidth, y + headerHeight);
|
||||||
|
this.drawTextCentered(ctx, dayInitials[i], x + i * cellWidth, y + headerHeight, cellWidth);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw the days of the month
|
||||||
|
ctx.font = "22px Arial";
|
||||||
|
const monthData = calendar[month];
|
||||||
|
for (let week = 0; week < monthData.length; week++) {
|
||||||
|
for (let day = 0; day < monthData[week].length; day++) {
|
||||||
|
const dayNumber = monthData[week][day];
|
||||||
|
const dayText = dayNumber !== null ? dayNumber : "";
|
||||||
|
|
||||||
|
// Set color to red for Saturday (5) and Sunday (6), else default color
|
||||||
|
if (day === 5 || day === 6) {
|
||||||
|
ctx.fillStyle = "red";
|
||||||
|
} else {
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
}
|
||||||
|
|
||||||
|
// ctx.fillText(dayText, x + day * cellWidth, y + headerHeight * 2 + week * cellHeight);
|
||||||
|
this.drawTextCentered(ctx, dayText, x + day * cellWidth, y + headerHeight * 2 + week * cellHeight, cellWidth);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const app = new PhotoCalendar();
|
||||||
|
});
|
||||||
71
style.css
Normal file
71
style.css
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.control {
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.preview canvas {
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control.file input[type="file"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.control.file label {
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid black;
|
||||||
|
-display: block;
|
||||||
|
padding: 0.25rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control.button button {
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid black;
|
||||||
|
display: block;
|
||||||
|
padding: 0.25rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-aspect-ratio: 1/1) {
|
||||||
|
/* Horizontal */
|
||||||
|
.preview canvas {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.col50 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-aspect-ratio: 1/1) {
|
||||||
|
/* Vertical */
|
||||||
|
.preview canvas {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.control.file label {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
.control.button button {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.col50 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user