Devil Killer Is Here MiNi Shell
MiNi SheLL

Current Path : /home/vmanager/www/backend/web/js/
Linux 9dbcd5f6333d 5.15.0-124-generic #134-Ubuntu SMP Fri Sep 27 20:20:17 UTC 2024 x86_64
Current File : /home/vmanager/www/backend/web/js/article-import-from-doc.js
class ArticleImporter {
    _newImages = [];
    constructor({ 
        newImagesDropZoneId = 'fileDropZone', 
        newImagesListPreviewId = 'fileListPreview', 
        newImagesWaitingListPreviewId = 'fileWaitingListPreview', 
        newImagesUploadButtonId = 'uploadBtn', 
        additionalImagesDropZoneId = 'additionalImagesDropZone',
        additionalImagesListPreviewId = 'additionalImagesListPreview', 
        replaceableImageClass = 'replaceable-article-photo', 
        imageClass = 'article-photo',
        imageDetailsContainerClass = 'details-container',
        imageDetailsClass = 'article-photo-details',
        imageStatusClass = 'article-photo-status',
        modiferDataClass = 'modifier-data',
        minImageWidth = 1000, 
        csrfToken, 
        sourceDir, 
        refreshPreviewCallback
    }) {
        this.newImagesDropZone = document.getElementById(newImagesDropZoneId);
        this.newImagesListPreview = document.getElementById(newImagesListPreviewId);
        this.newImagesWaitingListPreview = document.getElementById(newImagesWaitingListPreviewId);
        this.newImagesUploadButton = document.getElementById(newImagesUploadButtonId);
        
        this.newImagesFileInput = document.createElement('input');
        this.newImagesFileInput.type = 'file';
        this.newImagesFileInput.multiple = true; // Allow multiple file selection
        this.newImagesFileInput.onchange = (e) => {
            this._handleSelectNewImages(Array.from(e.target.files));
        };
        
        this.additionalImagesDropZone = document.getElementById(additionalImagesDropZoneId);
        this.additionalImagesListPreview = document.getElementById(additionalImagesListPreviewId);
        this.additionalImagesDeleteButtons = this.additionalImagesListPreview.querySelectorAll('.delete-button');
        
        this._csrfToken = csrfToken;
        this._sourceDir = sourceDir;
        
        this.replaceableImages = document.querySelectorAll(`.${replaceableImageClass}`);
        this.dataModifiers = document.querySelectorAll(`.${modiferDataClass}`);
        
        this.imageClass = imageClass;
        this.imageDetailsContainerClass = imageDetailsContainerClass;
        this.imageDetailsClass = imageDetailsClass;
        this.imageStatusClass = imageStatusClass;
        
        this.minImageWidth = parseInt(minImageWidth);
        
        this.refreshPreviewCallback = refreshPreviewCallback;
    }
    
    addEventListeners() {
        if (this.newImagesDropZone) {      
            this.newImagesDropZone.addEventListener('dragenter', this._newImagesDropZoneDragenterListener.bind(this));
            this.newImagesDropZone.addEventListener('dragover', this._newImagesDropZoneDragoverListener.bind(this));
            this.newImagesDropZone.addEventListener('dragleave', this._newImagesDropZoneDragleaveListener.bind(this));
            this.newImagesDropZone.addEventListener('drop', this._newImagesDropZoneDropListener.bind(this));
            this.newImagesDropZone.addEventListener('click', this._newImagesDropZoneClickListener.bind(this));            
        }
        if (this.newImagesUploadButton) {
            this.newImagesUploadButton.addEventListener('click', this._newImagesUploadButtonClickListener.bind(this));
        }
        if (this.replaceableImages && this.replaceableImages.length > 0) {
            this.replaceableImages.forEach((replaceableImage) => replaceableImage.addEventListener('dragover', this._replaceableImagesDragoverListener.bind(this)));
            this.replaceableImages.forEach((replaceableImage) => replaceableImage.addEventListener('drop', this._replaceableImagesDropListener.bind(this)));
        }
        if (this.dataModifiers && this.dataModifiers.length > 0) {
            this.dataModifiers.forEach((dataModifier) => dataModifier.addEventListener('change', this._dataModifiersChangeListener.bind(this)));
        }
        if (this.additionalImagesDropZone) {
            this.additionalImagesDropZone.addEventListener('dragover', this._additionalImagesDropZoneDragoverListener.bind(this));
            this.additionalImagesDropZone.addEventListener('drop', this._additionalImagesDropZoneDropListener.bind(this));
        }
        if (this.additionalImagesDeleteButtons && this.additionalImagesDeleteButtons.length > 0) {
            this.additionalImagesDeleteButtons.forEach((additionalImageDeleteButton) => additionalImageDeleteButton.addEventListener('click', this._deleteAdditionImageOnClickListener.bind(this)));
        }
    }
    
    _newImagesDropZoneDragenterListener(e) {
        e.preventDefault();
        e.stopPropagation();
        e.target.style.backgroundColor = '#f0f0f0';
    }
    
    _newImagesDropZoneDragoverListener(e) {
        e.preventDefault();
        e.stopPropagation();
        e.target.style.backgroundColor = '#f0f0f0';
    }
    
    _newImagesDropZoneDragleaveListener(e) {
        e.preventDefault();
        e.stopPropagation();
        e.target.style.backgroundColor = '';
    }
    
    _newImagesDropZoneDropListener(e) {
        e.preventDefault();
        e.stopPropagation();
        e.target.style.backgroundColor = '';
        this._handleSelectNewImages(Array.from(e.dataTransfer.files));
    }
    
    _newImagesDropZoneClickListener() {
        this.newImagesFileInput.click();
    }
    
    _newImageDragstartListener(e) {
        e.dataTransfer.setData("image", e.target.id);
    }
    
    _newImagesUploadButtonClickListener() {
        if (this._newImages.length === 0) return;

        const formData = new FormData();
        this._newImages.forEach((newImage) => {
            formData.append('files[]', newImage);
        });

        formData.append('_csrf', this._csrfToken);
        formData.append('dir', this._sourceDir);

        fetch('/articles/upload-additional-images-for-import-from-doc-file', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            this.newImagesListPreview.style.display = data.length ? 'flex' : 'none';
//            const newImagesContainer = document.createElement('div');
//            newImagesContainer.classList.add('flex', 'flex-wrap');

            for (let i = 0; i < data.length; i++) {
                const file = data[i];
                
                const newImage = document.createElement('img');
                newImage.src = file.url;
                newImage.setAttribute("draggable", "true");
                newImage.setAttribute("alt", "image");
                newImage.setAttribute("loading", "lazy");
                newImage.setAttribute("id", Math.random().toString(36).substr(2, 9));
                newImage.setAttribute("data-details", JSON.stringify(file));
                newImage.classList.add('img-responsive');
                
                const dimensions = document.createElement('span');
                dimensions.classList.add(this.imageDetailsClass);
                dimensions.innerText = `${file.width}×${file.height}px `;
                
                const newImageIsValid = document.createElement('span');
                newImageIsValid.classList.add(file.width > this.minImageWidth ? "img_ok" : "img_no");
                newImageIsValid.classList.add(this.imageStatusClass);
                newImageIsValid.innerText = file.width > this.minImageWidth ? "[OK]" : "[NO]";

                const newImageInfo = document.createElement('div');                
                newImageInfo.append(dimensions);
                newImageInfo.append(newImageIsValid);``
                
                const newImageContainer = document.createElement('div');
                newImageContainer.style.width = 'calc(31% - 20px)';
                newImageContainer.classList.add('new-photo');
                newImageContainer.append(newImage);
                newImageContainer.append(newImageInfo);     
                this.newImagesListPreview.append(newImageContainer);
//                newImagesContainer.append(newImageContainer);
                
                newImage.addEventListener('dragstart', this._newImageDragstartListener.bind(this));
            }
            
            this.newImagesWaitingListPreview.innerHTML = "";
            this._newImages = [];
            
//            this.newImagesListPreview.innerHTML = "";
//            this.newImagesListPreview.append(newImagesContainer);
//            
//            const parent = this.newImagesUploadButton.closest('.file-drop-area'); // Get the parent with class 'file-drop-area'
//            if (parent) {
//                parent.innerHTML = "";
//                parent.append(newImagesContainer);
//            }            
        });
    }
    
    _replaceableImagesDropListener(e) {
        e.preventDefault();
        const data = e.dataTransfer.getData("image");        
        const selectedImg = document.getElementById(data);
        const selectedImgParent = selectedImg.closest('.new-photo');
        const selectedImgDetails = selectedImgParent.querySelector(`.${this.imageDetailsClass}`);
        const selectedImgStatus = selectedImgParent.querySelector(`.${this.imageStatusClass}`);
        
        const selectedImageFileName = selectedImg.src.substring(selectedImg.src.lastIndexOf('/')+1);
        
        const dataPath = e.target.closest(`.${this.imageClass}`).getAttribute("data-path");        
        const imagesToReplace = document.querySelectorAll(`.${this.imageClass}[data-path="${dataPath}"]`);
        
        for(let i = 0; i < imagesToReplace.length; i++) {            
            const targetImg = imagesToReplace[i].querySelector('img');
            const targetImgDetails = imagesToReplace[i].querySelector(`.${this.imageDetailsClass}`);
            const targetImgStatus = imagesToReplace[i].querySelector(`.${this.imageStatusClass}`);
            const targetImgOrMainInput = imagesToReplace[i].querySelector('input[type="radio"]');
            
            targetImg.src = selectedImg.src + "?v="+Date.now();
            
            targetImgDetails.innerText = selectedImgDetails.innerText;
            
            targetImgStatus.innerText = selectedImgStatus.innerText;
            if(selectedImgStatus.classList.contains('img_ok')) {
                targetImgStatus.classList.remove('img_no');
                targetImgStatus.classList.add('img_ok');
            } else {
                targetImgStatus.classList.remove('img_ok');
                targetImgStatus.classList.add('img_no');
            }
            
            targetImgOrMainInput.setAttribute("value", selectedImageFileName);
            targetImgOrMainInput.setAttribute("data-value", selectedImageFileName);
        }
        
        selectedImg.removeEventListener('dragstart', this._newImageDragstartListener.bind(this));
        
        selectedImgParent.remove();
        
        const formData = new FormData();
        formData.append('_csrf', this._csrfToken);
        formData.append('dir', this._sourceDir);
        formData.append('path', dataPath);
        formData.append('value', selectedImg.dataset.details);
        formData.append('data_type', 'json');
        
    
        fetch('/articles/modify-data-import-from-doc-file', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if(this.refreshPreviewCallback) {
                this.refreshPreviewCallback();
            }
        })
        .catch(error => {
            console.error('error:', error);
        });
    }
    
    _replaceableImagesDragoverListener(e) {
        e.preventDefault();
    }
    
    _additionalImagesDropZoneDropListener(e) {
        e.preventDefault();
        const data = e.dataTransfer.getData("image");        
        const selectedImg = document.getElementById(data);        
        const file = JSON.parse(selectedImg.dataset.details);
        let dataValue = JSON.parse(this.additionalImagesDropZone.dataset.value);        
        dataValue.push(file);
                
        this._sendRequestModifyData({
            path: this.additionalImagesDropZone.dataset.path,
            value: JSON.stringify(dataValue),
            data_type: 'json'
        }, () => {            
            const newImage = document.createElement('img');
            newImage.src = file.url;    
            newImage.setAttribute("alt", "image");
            newImage.setAttribute("loading", "lazy");
            newImage.classList.add('img-responsive');

            const dimensions = document.createElement('span');
            dimensions.classList.add(this.imageDetailsClass);
            dimensions.innerText = `${file.width}×${file.height}px `;

            const newImageIsValid = document.createElement('span');
            newImageIsValid.classList.add(file.width > this.minImageWidth ? "img_ok" : "img_no");
            newImageIsValid.classList.add(this.imageStatusClass);
            newImageIsValid.innerText = file.width > this.minImageWidth ? "[OK]" : "[NO]";

            const newImageInfo = document.createElement('div');
            newImageInfo.append(dimensions);
            newImageInfo.append(newImageIsValid);

            const newImageRemoveButton = document.createElement('span');
            newImageRemoveButton.classList.add('delete-button');
            newImageRemoveButton.innerText = "[X]";
            newImageRemoveButton.addEventListener('click', this._deleteAdditionImageOnClickListener.bind(this));

            const newImageDetailsContainer = document.createElement('div');      
            newImageDetailsContainer.classList.add(this.imageDetailsContainerClass);
            newImageDetailsContainer.append(newImageRemoveButton);
            newImageDetailsContainer.append(newImageInfo);

            const newImageContainer = document.createElement('div');
            newImageContainer.style.width = 'calc(31% - 20px)';
            newImageContainer.classList.add(this.imageClass);
            newImageContainer.append(newImage);
            newImageContainer.append(newImageDetailsContainer);     

            this.additionalImagesListPreview.append(newImageContainer);
            
            this.additionalImagesDropZone.setAttribute("data-value", JSON.stringify(dataValue));
            
            selectedImg.removeEventListener('dragstart', this._newImageDragstartListener.bind(this));        
            selectedImg.closest('.new-photo').remove();
        }); 
    }
    
    _additionalImagesDropZoneDragoverListener(e) {
        e.preventDefault();
    }
    
    _deleteAdditionImageOnClickListener(e) {
        e.preventDefault();
        e.target.removeEventListener('click', this._deleteAdditionImageOnClickListener.bind(this));        
        
        const image = e.target.closest(`.${this.imageClass}`);
        let dataValue = JSON.parse(this.additionalImagesDropZone.dataset.value);
        dataValue = dataValue.filter((item) => item.url !== image.querySelector('img').src);
        
        
        this._sendRequestModifyData({
            path: this.additionalImagesDropZone.dataset.path,
            value: JSON.stringify(dataValue),
            data_type: 'json'
        }, () => {
            this.additionalImagesDropZone.setAttribute("data-value", JSON.stringify(dataValue));
            image.remove();
        }); 
    }
    
    _sendRequestModifyData(data, callback) {
        const formData = new FormData();
        formData.append('_csrf', this._csrfToken);
        formData.append('dir', this._sourceDir);
        
        for (const [key, value] of Object.entries(data)) {
            formData.append(key, value);
        }
    
        fetch('/articles/modify-data-import-from-doc-file', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if(callback) {
                callback();
            }
        })
        .catch(error => {
            console.error('error:', error);
        });
    }
    
    _dataModifiersChangeListener(e) {
        const path = e.target.dataset.path;
        const value = e.target.dataset.value;
        const valueOn = e.target.dataset.valueOn;
        const valueOff = e.target.dataset.valueOff;
        const group = e.target.dataset.group;
        let dataType = e.target.dataset.type;
        
        let outputValue = null;
        
        if(e.target.nodeName === 'SELECT') {
            outputValue = e.target.options[e.target.selectedIndex].dataset.value;
            dataType = e.target.options[e.target.selectedIndex].dataset.type;
            
        } else if(group !== undefined && group.length > 0) {
            const fields = document.querySelectorAll(`[data-group="${group}"]:checked`);
            
            outputValue = fields.length > 0 ? Array.from(fields).map((field) => {
                if (field.dataset.type === 'integer') {
                    return parseInt(field.dataset.value);
                } else if (field.dataset.type === 'boolean') {
                    return field.dataset.value === '0' ? false : true;
                } else {
                    return field.dataset.value;
                }
            }) : [];
            
            outputValue = JSON.stringify(outputValue);
            
            dataType = 'json';
        } else if (valueOn !== undefined && valueOff !== undefined) {
            outputValue = e.target.checked ? valueOn : valueOff;
        } else if (dataType === 'json') { 
            outputValue = JSON.stringify(JSON.parse(value));
        } else {
            outputValue = value;
        }
        
        const formData = new FormData();
        formData.append('_csrf', this._csrfToken);
        formData.append('dir', this._sourceDir);
        formData.append('path', path);
        formData.append('value', outputValue);
        formData.append('data_type', dataType); 
    
        fetch('/articles/modify-data-import-from-doc-file', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if(this.refreshPreviewCallback) {
                this.refreshPreviewCallback();
            }
        })
        .catch(error => {
            console.error('error:', error);
        });
    }
    
    _handleSelectNewImages(selectedImages) {
        this._newImages.push(...selectedImages); // Add new files to the array
        this._updateNewImagesListPreview();
        this.newImagesUploadButton.disabled = false; // Enable the upload button
    }
    
    _updateNewImagesListPreview() {
        this.newImagesWaitingListPreview.innerHTML = ''; // Clear previous preview

        this._newImages.forEach((newImage, index) => {
            const imageInfo = document.createElement('div');
            imageInfo.textContent = `${index + 1}. ${newImage.name} (${(newImage.size / 1024).toFixed(2)} KB)`;
            this.newImagesWaitingListPreview.appendChild(imageInfo);
        });
    }
}
Creat By MiNi SheLL
Email: jattceo@gmail.com