cardMaker/main.js at master · JonnyCodes/cardMaker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
$(document).ready(function() {
	$("select").material_select();

	if (window.File && window.FileReader && window.FileList && window.Blob) {
		// Great success! All the File APIs are supported.
		$("#fileinput").change(handleFilesSelected);
		$("#applyBtn").click(applyStyles);


		$("#cardSizes").change(handleCustomCardSize);
		$("#customSize").hide();
	} else {
	  alert("The File APIs are not fully supported in this browser.");
	}
});

function handleFilesSelected(event) {
	let files = event.target.files;

	if(files.length > 0) {
		if($("#imageArea").children().length > 0) {
			$("#imageArea").empty();
		}

		for (var i = files.length - 1; i >= 0; i--) {
			loadFile(files[i]);
		}
	}
}

function loadFile(file) {
	let fileReader = new FileReader();
	fileReader.addEventListener("load", onLoaded);
	fileReader.readAsDataURL(file);
}

function onLoaded(event) {
	$("#imageArea").append($("<img>").attr({src: event.target.result}));
}

function handleCustomCardSize(event) {
	if($("#cardSizes").val() === "custom") {
		$("#customSize").show(250);
	} else {
		$("#customSize").hide(250);
	}
}

function applyStyles(event) {
	let resizeCards = $("#shouldResize").is(':checked');
	let cardSize = $("#cardSizes").val();

	let applyBorder = $("#applyBorder").is(':checked');
	let borderColor = applyBorder ? $("#borderColor").val() : "#000000";
	let borderThickness = applyBorder ? $("#borderThickness").val() : 0;

	let addSpacing = $("#addSpacing").is(':checked');
	let rowSpace = addSpacing ? $("#rowSpace").val() : 0;
	let columnSpace = addSpacing ?  $("#columnSpace").val() : 0;

	let newWidth;
	let newHeight;

	if(resizeCards) {
		switch(cardSize) {
			case "poker":
				newWidth = 2.5;
				newHeight = 3.5;
			break;

			case "bridge":
				newWidth = 2.25;
				newHeight = 3.5;
			break;

			case "large":
				newWidth = 3.5;
				newHeight = 5;
			break;

			case "tarot":
				newWidth = 2.75;
				newHeight = 4.75;
			break;

			case "mini":
				newWidth = 1.75;
				newHeight = 2.5;
			break;

			case "custom":
				newWidth = $(".customWidth").val();
				newHeight = $(".customHeight").val();
			break;
		}
	}

	$("#imageArea").children().css({
		"border":  `${borderThickness}px solid ${borderColor}`,
		"margin-right": `${columnSpace}px`,
		"margin-bottom": `${rowSpace}px`,
		"width": resizeCards ? newWidth + "in" : "",
		"height": resizeCards ? newHeight + "in" : ""
	});
}