https://www.roomlala.fr/assets/js/blog/adm_blog_article_edit-04f996d2db2898bbbfa628c505375ef9.js

1import HTMLEditor from '../components/HTMLEditor.js'
2import AdmDomUtils from '../utils/adm_dom_utils.js'
3import ss from 'simple-ajax-uploader'
4import AdmEventListenerUtils from '../utils/adm_event_listener_utils.js'
5import AdminEntityUpdater from '../AdminEntityUpdater.js'
6import AdmNotify from '../utils/adm_notify.js'
7
8// import '../../scss/blog/adm_blog_article_edit.scss'
9
10export default class BlogArticleEdit {
11    constructor() {
12        console.log('BlogArticleEdit constr')
13        // NB: init in EasyAdmin
14        document.onreadystatechange = () => {
15            if ('complete' === document.readyState) {
16                this.init()
17            }
18        }
19    }
20
21    init() {
22        new HTMLEditor({ selector: '.html-editor' }).init()
23
24        const _contentTextAreaTag = document.getElementById('Article_content')
25        const _photoContainerTag = document.getElementById('article-add-photo-container')
26        const _reference = _contentTextAreaTag.parentNode.parentNode.parentNode
27        AdmDomUtils.moveElementAfterElement(_photoContainerTag, _reference)
28
29        this.initUpload()
30
31        AdmEventListenerUtils.addOnClass('js-added-tag', 'click', this.clickOnArticleTag)
32        AdmEventListenerUtils.addOnClass('js-pool-tag', 'click', this.clickOnArticleTag)
33    }
34
35    initUpload() {
36        const _errBox = document.getElementById('js-article-upload-image-error')
37        const _uploadBtn = document.getElementById('js-article-upload-image-btn')
38        const _description = document.getElementById('js-article-upload-image-description')
39        if (!_uploadBtn || !_description) {
40            return
41        }
42
43        // @deprecated TODO use FileUpload.ts
44        // NB: options: node_modules/simple-ajax-uploader/SimpleAjaxUploader.js:648
45        new ss.SimpleUpload({
46            button: _uploadBtn,
47            url: _uploadBtn.dataset.url,
48            name: 'uploadfile',
49            multiple: true,
50            multipart: true,
51            maxUploads: 1,
52            maxSize: 8000,
53            queue: false,
54            allowedExtensions: ['jpg', 'jpeg', 'JPG', 'JPEG'],
55            accept: ['image/*'],
56            debug: false,
57            hoverClass: 'btn-hover',
58            focusClass: 'active',
59            disabledClass: 'disabled',
60            responseType: 'json',
61            onSubmit: function(filename, ext) {
62                const _description = document.getElementById('js-article-upload-image-description')
63                _description.required = false
64                this._opts.data['description'] = _description.value // `POST data` on submit
65
66                const prog = document.createElement('div'),
67                    outer = document.createElement('div'),
68                    bar = document.createElement('div'),
69                    size = document.createElement('div'),
70                    self = this
71                prog.className = 'prog'
72                size.className = 'size'
73                outer.appendChild(bar)
74                prog.appendChild(size)
75                prog.appendChild(outer)
76                self.setProgressContainer(prog)
77                _errBox.innerHTML = ''
78                _uploadBtn.value = 'Choose another file'
79            },
80            onSizeError: function() {
81                _errBox.innerHTML = 'Files may not exceed 8Mo.'
82            },
83            onExtError: function() {
84                _errBox.innerHTML = 'Invalid file type. Please select a PNG, JPG, GIF image.'
85            },
86            onComplete: (file, response, btn) => {
87                this.processUploadResponse(response)
88            }
89        })
90
91        const _generatedButton = document.querySelector('[name="uploadfile"]')
92        _generatedButton.addEventListener('click', function(event) {
93            const _description = document.getElementById('js-article-upload-image-description')
94            if ('' === _description.value) {
95                _description.required = true
96                _description.checkValidity()
97                event.stopImmediatePropagation()
98                event.preventDefault()
99                return false
100            }
101        })
102    }
103
104    async processUploadResponse(response) {
105        const _description = document.getElementById('js-article-upload-image-description')
106        _description.required = false
107        _description.value = ''
108        const _result = document.getElementById('js-article-upload-image-result')
109        _result.classList.remove('d-none')
110        _result.innerHTML = 'added image: ' + response.imageUrl
111    }
112
113    async clickOnArticleTag(event) {
114        const articleCode = document.getElementById('js-article-code').value
115        const tagId = event.target.dataset.tagid
116
117        let data = {
118            entity: 'ArticleTag',
119            id: articleCode,
120            field: tagId,
121        }
122        console.log(data)
123
124        const _parent = event.target.parentNode

125        if (_parent.id == 'pool-tags-container') {
126            const _addedContainer = document.getElementById('added-tags-container')
127            AdmDomUtils.moveElementAfterElement(event.target, _addedContainer.lastChild)
128            data.value = 1 // selected
129        } else {
130            const _poolContainer = document.getElementById('pool-tags-container')
131            AdmDomUtils.moveElementAfterElement(event.target, _poolContainer.lastChild)
132            data.value = 0 // unselected
133        }
134
135        AdminEntityUpdater.send(data, () => {
136            AdmNotify.success()
137        })
138    }
139}