| 1 |
efrain |
1 |
/**
|
|
|
2 |
* Unilabel type imageboard
|
|
|
3 |
*
|
|
|
4 |
* @author Andreas Schenkel
|
|
|
5 |
* @copyright Andreas Schenkel {@link https://github.com/andreasschenkel}
|
|
|
6 |
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
|
|
7 |
*/
|
|
|
8 |
|
|
|
9 |
import * as Str from 'core/str';
|
|
|
10 |
|
|
|
11 |
/**
|
|
|
12 |
* @param {string} cmid
|
|
|
13 |
* @param {string} canvaswidth
|
|
|
14 |
* @param {string} canvasheight
|
|
|
15 |
* @param {boolean} autoscale
|
|
|
16 |
* @param {boolean} showgrid
|
|
|
17 |
*/
|
|
|
18 |
export const init = (cmid, canvaswidth, canvasheight, autoscale, showgrid) => {
|
|
|
19 |
if (autoscale === true) {
|
|
|
20 |
// To autoscale we can not just listen to the risize event from the window.
|
|
|
21 |
// We have to check the size of the module container. It will change its size depending on the left and right drawers.
|
|
|
22 |
// To accomplish this, we use the resizeObserver object.
|
|
|
23 |
|
|
|
24 |
// The container we want be informed about its resize.
|
|
|
25 |
const moduleContainer = document.querySelector("#module-" + cmid + " div.activity-item");
|
|
|
26 |
|
|
|
27 |
// Now we create the resizeObserver object.
|
|
|
28 |
const resizeObserver = new ResizeObserver(function() {
|
|
|
29 |
resize(moduleContainer, cmid, canvaswidth, canvasheight);
|
|
|
30 |
});
|
|
|
31 |
resizeObserver.observe(moduleContainer); // Connect the resizeObserver with the moduleContainer.
|
|
|
32 |
|
|
|
33 |
resize(moduleContainer, cmid, canvaswidth, canvasheight);
|
|
|
34 |
}
|
|
|
35 |
|
|
|
36 |
const gridtoggler = document.getElementById("unilabeltype-imageboard-gridtoggler-" + cmid);
|
|
|
37 |
const togglerText = gridtoggler.querySelector('.unilabeltype-imageboard-toggle-text');
|
|
|
38 |
const helpergrid = document.getElementById("unilabeltype-imageboard-helpergrid-" + cmid);
|
|
|
39 |
|
|
|
40 |
if (showgrid === true) {
|
|
|
41 |
showGrid(togglerText, helpergrid);
|
|
|
42 |
}
|
|
|
43 |
|
|
|
44 |
gridtoggler.addEventListener("click", function(event) {
|
|
|
45 |
event.stopPropagation();
|
|
|
46 |
event.preventDefault();
|
|
|
47 |
if (helpergrid.classList.contains("hidden")) {
|
|
|
48 |
showGrid(togglerText, helpergrid);
|
|
|
49 |
} else {
|
|
|
50 |
hideGrid(togglerText, helpergrid);
|
|
|
51 |
}
|
|
|
52 |
});
|
|
|
53 |
|
|
|
54 |
/**
|
|
|
55 |
* Helper function to remove the grid from imageboard.
|
|
|
56 |
*
|
|
|
57 |
* @param {object} button
|
|
|
58 |
* @param {object} helpergrid
|
|
|
59 |
*/
|
|
|
60 |
function showGrid(button, helpergrid) {
|
|
|
61 |
helpergrid.classList.remove("hidden");
|
|
|
62 |
button.value = 'gridvisible';
|
|
|
63 |
Str.get_string('buttonlabelhelpergridhide', 'unilabeltype_imageboard').done(function(text) {
|
|
|
64 |
button.innerText = text;
|
|
|
65 |
});
|
|
|
66 |
}
|
|
|
67 |
|
|
|
68 |
/**
|
|
|
69 |
* Helper function to remove the grid from imageboard.
|
|
|
70 |
*
|
|
|
71 |
* @param {object} button
|
|
|
72 |
* @param {object} helpergrid
|
|
|
73 |
*/
|
|
|
74 |
function hideGrid(button, helpergrid) {
|
|
|
75 |
helpergrid.classList.add("hidden");
|
|
|
76 |
button.value = 'gridhidden';
|
|
|
77 |
Str.get_string('buttonlabelhelpergridshow', 'unilabeltype_imageboard').done(function(text) {
|
|
|
78 |
button.innerText = text;
|
|
|
79 |
});
|
|
|
80 |
}
|
|
|
81 |
|
|
|
82 |
/**
|
|
|
83 |
* Helper function to get the width of the usable browserarea.
|
|
|
84 |
*
|
|
|
85 |
* @param {Element} moduleContainer
|
|
|
86 |
* @returns {*|number}
|
|
|
87 |
*/
|
|
|
88 |
function getWidth(moduleContainer) {
|
|
|
89 |
let style = window.getComputedStyle(moduleContainer);
|
|
|
90 |
let xPadding = parseInt(style.paddingLeft) + parseInt(style.paddingRight);
|
|
|
91 |
return moduleContainer.clientWidth - xPadding;
|
|
|
92 |
}
|
|
|
93 |
|
|
|
94 |
/**
|
|
|
95 |
* Resizes the imageboard when autoscale is set true.
|
|
|
96 |
* @param {Element} moduleContainer
|
|
|
97 |
* @param {string} cmid
|
|
|
98 |
* @param {string} canvaswidth
|
|
|
99 |
* @param {string} canvasheight
|
|
|
100 |
*/
|
|
|
101 |
function resize(moduleContainer, cmid, canvaswidth, canvasheight) {
|
|
|
102 |
const imageboardContainer = document.getElementById("unilabeltype-imageboard-container-" + cmid);
|
|
|
103 |
|
|
|
104 |
let newcanvaswidth = 0;
|
|
|
105 |
newcanvaswidth = getWidth(moduleContainer);
|
|
|
106 |
// Do not make backgroundimage larger than the configured width
|
|
|
107 |
if (newcanvaswidth > canvaswidth) {
|
|
|
108 |
newcanvaswidth = canvaswidth;
|
|
|
109 |
}
|
|
|
110 |
|
|
|
111 |
let widthfactor = newcanvaswidth / canvaswidth;
|
|
|
112 |
|
|
|
113 |
const mydiv = document.getElementById("unilabeltype-imageboard-" + cmid);
|
|
|
114 |
|
|
|
115 |
mydiv.style.transform = "scale(" + widthfactor + ")";
|
|
|
116 |
mydiv.style.transformOrigin = "0 0";
|
|
|
117 |
|
|
|
118 |
// Make the imageboardContainer just 20px larger than the imageboard.
|
|
|
119 |
imageboardContainer.style.width = mydiv.offsetWidth * widthfactor + "px";
|
|
|
120 |
|
|
|
121 |
// The height of the white space that is generated by scaling the div can be calculated
|
|
|
122 |
let heightOfSpace = canvasheight * (1 - widthfactor);
|
|
|
123 |
mydiv.style.marginBottom = "-" + heightOfSpace + "px";
|
|
|
124 |
}
|
|
|
125 |
};
|
|
|
126 |
|