lzstealth
f0177e6628
Publish Docker Image / build-and-push (./build/Dockerfile, git.lzstealth.com/lzstealth/pulse-signage-web, web) (push) Successful in 1m15s
Publish Docker Image / build-and-push (./build/Dockerfile.player, git.lzstealth.com/lzstealth/pulse-signage-player, player) (push) Successful in 32s
573 lines
15 KiB
JavaScript
573 lines
15 KiB
JavaScript
// Slide image cropper modal wiring and file replacement helpers.
|
|
|
|
(function () {
|
|
var templateFields = document.getElementById('template-fields');
|
|
var modal = document.getElementById('slide-image-cropper-modal');
|
|
var image = document.getElementById('slide-image-cropper-image');
|
|
var status = document.getElementById('slide-image-cropper-status');
|
|
|
|
if (!templateFields || !modal || !image || !status) {
|
|
return;
|
|
}
|
|
|
|
var cropper = null;
|
|
var currentInput = null;
|
|
var currentFile = null;
|
|
var currentObjectUrl = '';
|
|
var cropperFrame = modal.querySelector('.slide-image-cropper-frame');
|
|
var flipX = 1;
|
|
var flipY = 1;
|
|
var currentAspectRatio = NaN;
|
|
var currentRegionAspectRatio = NaN;
|
|
var currentRegionAspectRatioLabel = 'Region';
|
|
var listenersAttached = false;
|
|
var uploadMaxBytes = 100 * 1024 * 1024;
|
|
var uploadMaxLabel = '100 MB';
|
|
|
|
function getRegionId(input) {
|
|
var match = String(input && input.name || '').match(/^region_image_(\d+)$/);
|
|
return match ? match[1] : '';
|
|
}
|
|
|
|
function getExistingInput(regionId) {
|
|
if (!regionId) {
|
|
return null;
|
|
}
|
|
|
|
return document.querySelector('input[type="hidden"][name="existing_region_image_' + regionId + '"]');
|
|
}
|
|
|
|
function setStatus(message) {
|
|
status.textContent = String(message || '');
|
|
}
|
|
|
|
function setCropperLoading(loading) {
|
|
if (cropperFrame) {
|
|
cropperFrame.classList.toggle('is-loading', Boolean(loading));
|
|
}
|
|
}
|
|
|
|
function showModal() {
|
|
if (window.pulseModal && typeof window.pulseModal.show === 'function') {
|
|
window.pulseModal.show(modal);
|
|
return;
|
|
}
|
|
|
|
if (window.bootstrap && window.bootstrap.Modal) {
|
|
window.bootstrap.Modal.getOrCreateInstance(modal).show();
|
|
}
|
|
}
|
|
|
|
function hideModal() {
|
|
if (window.pulseModal && typeof window.pulseModal.hide === 'function') {
|
|
window.pulseModal.hide(modal);
|
|
return;
|
|
}
|
|
|
|
if (window.bootstrap && window.bootstrap.Modal) {
|
|
window.bootstrap.Modal.getOrCreateInstance(modal).hide();
|
|
}
|
|
}
|
|
|
|
function destroyCropper() {
|
|
if (cropper) {
|
|
cropper.destroy();
|
|
cropper = null;
|
|
}
|
|
}
|
|
|
|
function revokeObjectUrl() {
|
|
if (currentObjectUrl) {
|
|
URL.revokeObjectURL(currentObjectUrl);
|
|
currentObjectUrl = '';
|
|
}
|
|
}
|
|
|
|
function resetModalState() {
|
|
destroyCropper();
|
|
revokeObjectUrl();
|
|
setCropperLoading(false);
|
|
currentInput = null;
|
|
currentFile = null;
|
|
flipX = 1;
|
|
flipY = 1;
|
|
image.removeAttribute('src');
|
|
image.alt = 'Selected image to crop';
|
|
setStatus('');
|
|
}
|
|
|
|
function setButtonState(disabled) {
|
|
modal.querySelectorAll('[data-slide-image-cropper-action]').forEach(function (button) {
|
|
button.disabled = Boolean(disabled) && button.getAttribute('data-slide-image-cropper-action') !== 'reset';
|
|
});
|
|
}
|
|
|
|
function ratioLabelForValue(value) {
|
|
if (value === 'free') {
|
|
return 'free';
|
|
}
|
|
|
|
if (value === 'region') {
|
|
return 'region';
|
|
}
|
|
|
|
return String(value || '').trim();
|
|
}
|
|
|
|
function parseAspectRatio(value) {
|
|
var parts = String(value || '').trim().split(/[:/]/);
|
|
var width = Number(parts[0]);
|
|
var height = Number(parts[1]);
|
|
|
|
if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
|
|
return NaN;
|
|
}
|
|
|
|
return width / height;
|
|
}
|
|
|
|
function isSvgFile(file) {
|
|
if (!file) {
|
|
return false;
|
|
}
|
|
|
|
return String(file.type || '').toLowerCase() === 'image/svg+xml' || /\.svg$/i.test(String(file.name || ''));
|
|
}
|
|
|
|
function isGifFile(file) {
|
|
if (!file) {
|
|
return false;
|
|
}
|
|
|
|
return String(file.type || '').toLowerCase() === 'image/gif' || /\.gif$/i.test(String(file.name || ''));
|
|
}
|
|
|
|
function isSpecialRasterizationFile(file) {
|
|
return isSvgFile(file) || isGifFile(file);
|
|
}
|
|
|
|
function getSpecialFileWarning(file) {
|
|
if (isGifFile(file)) {
|
|
return 'GIF selected. If you crop, rotate, or flip this image, it will be rasterized and the animation will be lost. Leave the full image selected to keep the original GIF.';
|
|
}
|
|
|
|
return 'SVG selected. If you crop, rotate, or flip this image, it will be rasterized. Leave the full image selected to keep the original SVG.';
|
|
}
|
|
|
|
function isOriginalSpecialSelection() {
|
|
if (!cropper || !currentFile || !isSpecialRasterizationFile(currentFile) || typeof cropper.getData !== 'function' || typeof cropper.getImageData !== 'function') {
|
|
return false;
|
|
}
|
|
|
|
var cropData = cropper.getData(true) || {};
|
|
var imageData = cropper.getImageData() || {};
|
|
var width = Number(imageData.naturalWidth || 0);
|
|
var height = Number(imageData.naturalHeight || 0);
|
|
|
|
if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
|
|
return false;
|
|
}
|
|
|
|
return Math.abs(Number(cropData.x || 0)) < 0.5 &&
|
|
Math.abs(Number(cropData.y || 0)) < 0.5 &&
|
|
Math.abs(Number(cropData.width || 0) - width) < 0.5 &&
|
|
Math.abs(Number(cropData.height || 0) - height) < 0.5 &&
|
|
Math.abs(Number(cropData.rotate || 0)) < 0.5 &&
|
|
Number(cropData.scaleX || 1) === 1 &&
|
|
Number(cropData.scaleY || 1) === 1;
|
|
}
|
|
|
|
function getRasterizedFileName(sourceName) {
|
|
var name = String(sourceName || '').trim();
|
|
|
|
if (!name) {
|
|
return 'slide-region-image.png';
|
|
}
|
|
|
|
if (/\.svg$/i.test(name)) {
|
|
return name.replace(/\.svg$/i, '.png');
|
|
}
|
|
|
|
if (/\.[a-z0-9]+$/i.test(name)) {
|
|
return name.replace(/\.[a-z0-9]+$/i, '.png');
|
|
}
|
|
|
|
return name + '.png';
|
|
}
|
|
|
|
function setActiveRatioButton(value) {
|
|
var targetValue = ratioLabelForValue(value);
|
|
modal.querySelectorAll('[data-slide-image-cropper-action="ratio"]').forEach(function (button) {
|
|
var buttonValue = ratioLabelForValue(button.getAttribute('data-slide-image-cropper-ratio'));
|
|
var isActive = buttonValue === targetValue;
|
|
button.classList.toggle('active', isActive);
|
|
button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
|
|
});
|
|
}
|
|
|
|
function applyAspectRatio(value) {
|
|
if (!cropper) {
|
|
return;
|
|
}
|
|
|
|
currentAspectRatio = value;
|
|
if (value === 'free') {
|
|
cropper.setAspectRatio(NaN);
|
|
setActiveRatioButton('free');
|
|
return;
|
|
}
|
|
|
|
if (value === 'region') {
|
|
if (!Number.isFinite(currentRegionAspectRatio) || currentRegionAspectRatio <= 0) {
|
|
cropper.setAspectRatio(NaN);
|
|
setActiveRatioButton('free');
|
|
return;
|
|
}
|
|
|
|
cropper.setAspectRatio(currentRegionAspectRatio);
|
|
setActiveRatioButton('region');
|
|
return;
|
|
}
|
|
|
|
var parts = String(value || '').split(':');
|
|
var width = Number(parts[0]);
|
|
var height = Number(parts[1]);
|
|
if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
|
|
return;
|
|
}
|
|
|
|
cropper.setAspectRatio(width / height);
|
|
setActiveRatioButton(value);
|
|
}
|
|
|
|
function initCropper() {
|
|
if (!currentInput || !currentFile || !window.Cropper) {
|
|
return;
|
|
}
|
|
|
|
destroyCropper();
|
|
cropper = new window.Cropper(image, {
|
|
aspectRatio: NaN,
|
|
autoCropArea: 1,
|
|
background: false,
|
|
dragMode: 'move',
|
|
initialAspectRatio: NaN,
|
|
movable: true,
|
|
responsive: true,
|
|
rotatable: true,
|
|
scalable: true,
|
|
viewMode: 1,
|
|
zoomOnTouch: true,
|
|
zoomOnWheel: true,
|
|
ready: function () {
|
|
setCropperLoading(false);
|
|
|
|
if (cropper && cropper.container) {
|
|
cropper.container.style.width = '100%';
|
|
cropper.container.style.height = '560px';
|
|
cropper.container.style.maxHeight = '70vh';
|
|
}
|
|
|
|
var containerData = cropper.getContainerData();
|
|
var imageData = cropper.getImageData();
|
|
var fitRatio = Math.min(
|
|
Number(containerData.width || 0) / Number(imageData.naturalWidth || 1),
|
|
Number(containerData.height || 0) / Number(imageData.naturalHeight || 1),
|
|
1
|
|
);
|
|
|
|
if (Number.isFinite(fitRatio) && fitRatio > 0) {
|
|
cropper.zoomTo(fitRatio);
|
|
} else {
|
|
cropper.reset();
|
|
}
|
|
|
|
applyAspectRatio(currentAspectRatio === undefined ? 'free' : currentAspectRatio);
|
|
}
|
|
});
|
|
|
|
setButtonState(false);
|
|
setActiveRatioButton(currentAspectRatio === undefined ? 'free' : currentAspectRatio);
|
|
|
|
if (isSpecialRasterizationFile(currentFile)) {
|
|
setStatus(getSpecialFileWarning(currentFile));
|
|
}
|
|
}
|
|
|
|
function openEditor(input, file) {
|
|
currentInput = input;
|
|
currentFile = file;
|
|
flipX = 1;
|
|
flipY = 1;
|
|
currentAspectRatio = 'free';
|
|
currentRegionAspectRatio = parseAspectRatio(input && input.dataset && input.dataset.slideImageCropperRegionRatio);
|
|
currentRegionAspectRatioLabel = String(input && input.dataset && input.dataset.slideImageCropperRegionRatioLabel || 'Region').trim() || 'Region';
|
|
setCropperLoading(true);
|
|
setButtonState(true);
|
|
setStatus(isSpecialRasterizationFile(file) ? getSpecialFileWarning(file) : '');
|
|
|
|
modal.querySelectorAll('[data-slide-image-cropper-action="ratio"][data-slide-image-cropper-ratio="region"]').forEach(function (button) {
|
|
button.title = currentRegionAspectRatioLabel ? 'Region ratio ' + currentRegionAspectRatioLabel : 'Region ratio';
|
|
});
|
|
|
|
revokeObjectUrl();
|
|
currentObjectUrl = URL.createObjectURL(file);
|
|
image.alt = file.name || 'Selected image to crop';
|
|
image.src = currentObjectUrl;
|
|
|
|
if (!listenersAttached) {
|
|
listenersAttached = true;
|
|
modal.addEventListener('shown.bs.modal', function () {
|
|
if (currentInput && currentFile) {
|
|
initCropper();
|
|
}
|
|
});
|
|
modal.addEventListener('hidden.bs.modal', function () {
|
|
resetModalState();
|
|
});
|
|
}
|
|
|
|
showModal();
|
|
}
|
|
|
|
function setInputFile(input, file) {
|
|
var dataTransfer = new DataTransfer();
|
|
dataTransfer.items.add(file);
|
|
input.files = dataTransfer.files;
|
|
}
|
|
|
|
function rejectOversizeFile(input) {
|
|
if (!input) {
|
|
return;
|
|
}
|
|
|
|
if (typeof window.showToast === 'function') {
|
|
window.showToast('File must be ' + uploadMaxLabel + ' or smaller.', 'warning');
|
|
} else {
|
|
window.alert('File must be ' + uploadMaxLabel + ' or smaller.');
|
|
}
|
|
input.value = '';
|
|
}
|
|
|
|
function finalizeCropFile(file) {
|
|
if (!currentInput) {
|
|
return;
|
|
}
|
|
|
|
var input = currentInput;
|
|
var existing = getExistingInput(getRegionId(input));
|
|
|
|
input.dataset.cropperBypass = '1';
|
|
setInputFile(input, file);
|
|
if (existing) {
|
|
existing.value = '';
|
|
}
|
|
input.dispatchEvent(new Event('change', { bubbles: true }));
|
|
window.setTimeout(function () {
|
|
delete input.dataset.cropperBypass;
|
|
}, 0);
|
|
hideModal();
|
|
}
|
|
|
|
function finalizeCurrentSvgSelection() {
|
|
if (!currentFile) {
|
|
return;
|
|
}
|
|
|
|
if (isOriginalSpecialSelection()) {
|
|
finalizeCropFile(currentFile);
|
|
return;
|
|
}
|
|
|
|
setButtonState(true);
|
|
setStatus('Creating a rasterized image from the crop...');
|
|
|
|
var canvas = cropper && typeof cropper.getCroppedCanvas === 'function' ? cropper.getCroppedCanvas({
|
|
fillColor: 'transparent',
|
|
imageSmoothingEnabled: true,
|
|
imageSmoothingQuality: 'high'
|
|
}) : null;
|
|
|
|
if (!canvas) {
|
|
setStatus('Unable to create the cropped image.');
|
|
setButtonState(false);
|
|
return;
|
|
}
|
|
|
|
canvas.toBlob(function (blob) {
|
|
if (!blob) {
|
|
setStatus('Unable to create the cropped image.');
|
|
setButtonState(false);
|
|
return;
|
|
}
|
|
|
|
var finalFile = new File([blob], getRasterizedFileName(currentFile.name), {
|
|
lastModified: Date.now(),
|
|
type: blob.type || 'image/png'
|
|
});
|
|
|
|
finalizeCropFile(finalFile);
|
|
}, 'image/png');
|
|
}
|
|
|
|
function commitCrop() {
|
|
if (!currentInput || !currentFile) {
|
|
return;
|
|
}
|
|
|
|
if (isSpecialRasterizationFile(currentFile)) {
|
|
if (!cropper) {
|
|
finalizeCropFile(currentFile);
|
|
return;
|
|
}
|
|
|
|
finalizeCurrentSvgSelection();
|
|
return;
|
|
}
|
|
|
|
if (!cropper) {
|
|
finalizeCropFile(currentFile);
|
|
return;
|
|
}
|
|
|
|
setButtonState(true);
|
|
setStatus('Creating the cropped image...');
|
|
|
|
var canvas = cropper.getCroppedCanvas({
|
|
fillColor: 'transparent',
|
|
imageSmoothingEnabled: true,
|
|
imageSmoothingQuality: 'high'
|
|
});
|
|
|
|
if (!canvas) {
|
|
setStatus('Unable to create the cropped image.');
|
|
setButtonState(false);
|
|
return;
|
|
}
|
|
|
|
var outputType = /^image\/(jpeg|jpg|webp|png)$/i.test(currentFile.type || '') ? currentFile.type : 'image/png';
|
|
canvas.toBlob(function (blob) {
|
|
if (!blob) {
|
|
setStatus('Unable to create the cropped image.');
|
|
setButtonState(false);
|
|
return;
|
|
}
|
|
|
|
var finalFile = new File([blob], currentFile.name || 'slide-region-image.png', {
|
|
lastModified: Date.now(),
|
|
type: blob.type || outputType
|
|
});
|
|
|
|
finalizeCropFile(finalFile);
|
|
}, outputType, outputType.indexOf('jpeg') !== -1 ? 0.92 : undefined);
|
|
}
|
|
|
|
function rotateImage(direction) {
|
|
if (cropper) {
|
|
cropper.rotate(direction);
|
|
}
|
|
}
|
|
|
|
function flipImage(axis) {
|
|
if (!cropper) {
|
|
return;
|
|
}
|
|
|
|
if (axis === 'x') {
|
|
flipX *= -1;
|
|
cropper.scaleX(flipX);
|
|
return;
|
|
}
|
|
|
|
flipY *= -1;
|
|
cropper.scaleY(flipY);
|
|
}
|
|
|
|
function resetImage() {
|
|
if (!cropper) {
|
|
return;
|
|
}
|
|
|
|
cropper.reset();
|
|
flipX = 1;
|
|
flipY = 1;
|
|
}
|
|
|
|
templateFields.addEventListener('change', function (event) {
|
|
var input = event.target;
|
|
if (!input || !input.matches || !input.matches('input[type="file"][name^="region_image_"]')) {
|
|
return;
|
|
}
|
|
|
|
if (input.dataset.cropperBypass === '1') {
|
|
return;
|
|
}
|
|
|
|
var file = input.files && input.files[0];
|
|
if (!file) {
|
|
return;
|
|
}
|
|
|
|
if (Number(file.size || 0) > uploadMaxBytes) {
|
|
event.stopImmediatePropagation();
|
|
event.stopPropagation();
|
|
rejectOversizeFile(input);
|
|
return;
|
|
}
|
|
|
|
if (!/^image\//i.test(file.type || '') && !/\.svg$/i.test(String(file.name || ''))) {
|
|
input.value = '';
|
|
return;
|
|
}
|
|
|
|
event.stopImmediatePropagation();
|
|
event.stopPropagation();
|
|
input.value = '';
|
|
|
|
if (!window.Cropper) {
|
|
currentInput = input;
|
|
currentFile = file;
|
|
commitCrop();
|
|
return;
|
|
}
|
|
|
|
openEditor(input, file);
|
|
}, true);
|
|
|
|
modal.addEventListener('click', function (event) {
|
|
var button = event.target && event.target.closest ? event.target.closest('[data-slide-image-cropper-action]') : null;
|
|
if (!button) {
|
|
return;
|
|
}
|
|
|
|
var action = button.getAttribute('data-slide-image-cropper-action');
|
|
if (action === 'apply') {
|
|
commitCrop();
|
|
return;
|
|
}
|
|
if (action === 'ratio') {
|
|
applyAspectRatio(button.getAttribute('data-slide-image-cropper-ratio') || 'free');
|
|
return;
|
|
}
|
|
if (action === 'rotate-left') {
|
|
rotateImage(-90);
|
|
return;
|
|
}
|
|
if (action === 'rotate-right') {
|
|
rotateImage(90);
|
|
return;
|
|
}
|
|
if (action === 'flip-horizontal') {
|
|
flipImage('x');
|
|
return;
|
|
}
|
|
if (action === 'flip-vertical') {
|
|
flipImage('y');
|
|
return;
|
|
}
|
|
if (action === 'reset') {
|
|
resetImage();
|
|
return;
|
|
}
|
|
});
|
|
}()); |