Skip to content

Commit

Permalink
fix DropZone on Chrome
Browse files Browse the repository at this point in the history
  • Loading branch information
@Khludev
Khludev committed Apr 5, 2021
1 parent 29cd2e8 commit 1f1ba28
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 17 deletions.
11 changes: 7 additions & 4 deletions public/js/kulara-components.min.js
View file
Expand Up @@ -2820,9 +2820,12 @@ __webpack_require__.r(__webpack_exports__);
var imgAttrs = document.getElementById(this.dropZoneId).querySelectorAll('.img-attrs input');
imgAttrs.forEach(function (el) {
el.addEventListener('change', function (el) {
el.target.parentElement.classList.add('changed');
var formData = new FormData(el.target.parentElement);
var form = document.createElement('form');
var formData = new FormData(form);
formData.append('_token', _this2._token);
var inputs = el.target.parentNode.querySelectorAll('input').forEach(function (inp) {
formData.append(inp.name, inp.value);
});
var xhr = new XMLHttpRequest();
xhr.open("POST", "/admin/media/update-attrs");
xhr.send(formData);
Expand Down Expand Up @@ -2907,7 +2910,7 @@ __webpack_require__.r(__webpack_exports__);
var alt = file.img_attrs && file.img_attrs.alt ? file.img_attrs.alt : '';
var title = file.img_attrs && file.img_attrs.title ? file.img_attrs.title : '';
var source = file.img_attrs && file.img_attrs.source ? file.img_attrs.source : '';
var insertHtml = "<form class='img-attrs'>" + "<span>Alt </span><input type='text' value='" + alt + "' name='dzImgAttrs[" + file.id + "][alt]'><br>" + "<span>Title </span><input type='text' value='" + title + "' name='dzImgAttrs[" + file.id + "][title]'><br>" + "<span>Джерело</span><input type='text' value='" + source + "' name='dzImgAttrs[" + file.id + "][source]'><br>" + "</form>";
var insertHtml = "<div class='img-attrs'>" + "<div><span>Alt </span><input type='text' value='" + alt + "' name='dzImgAttrs[" + file.id + "][alt]'></div>" + "<div><span>Title </span><input type='text' value='" + title + "' name='dzImgAttrs[" + file.id + "][title]'></div>" + "<div><span>Джерело</span><input type='text' value='" + source + "' name='dzImgAttrs[" + file.id + "][source]'></div>" + "</div>";

if (this.addToEditor === true) {
insertHtml += "<a hashName='" + file.hash_name + "' originalUrl=\"" + file.originalUrl + "\" class=\"to-editor-input pointer\">В редактор</a>";
Expand Down Expand Up @@ -3263,7 +3266,7 @@ exports = module.exports = __webpack_require__(/*! ../../../node_modules/css-loa


// module
exports.push([module.i, ".dropzone {\n font-family: \"Arial\", sans-serif;\n letter-spacing: 0.2px;\n color: #777;\n transition: background-color 0.2s linear;\n min-height: 200px;\n padding: 10px 0;\n margin: 0;\n text-align: center;\n}\n.dropzone:hover {\n background-color: #ffe9c1;\n}\n.dropzone .dz-preview {\n padding: 0;\n margin: 5px;\n border: 2px solid #682727;\n}\n.dropzone .dz-preview .dz-image {\n width: 270px;\n height: 180px;\n margin-bottom: 10px;\n}\n.dropzone .dz-preview .dz-image > div {\n width: inherit;\n height: inherit;\n background-size: contain;\n background-repeat: no-repeat;\n background-position-x: center;\n animation-duration: 1s;\n}\n.dropzone .dz-preview .dz-image > img {\n width: 100%;\n}\n.dropzone .dz-preview .dz-image .dz-details {\n color: white;\n transition: opacity 0.2s linear;\n text-align: center;\n}\n.dropzone .img-attrs {\n position: relative;\n z-index: 33;\n text-align: right;\n font-size: 12px;\n background: white;\n}\n.dropzone .img-attrs span {\n margin: 2px 0;\n display: inline-block;\n text-align: left;\n}\n.dropzone .img-attrs input {\n width: 78%;\n margin: 2px;\n padding-left: 2px;\n border: 1px #e8e1e1 solid;\n}\n.dropzone .img-attrs input:hover {\n cursor: initial;\n}\n.dropzone .dz-preview .dz-remove,\n.dropzone .dz-preview .to-editor-input {\n position: relative;\n z-index: 33;\n color: #fff;\n margin: 0;\n padding: 10px;\n border: 2px #fff solid;\n text-decoration: none;\n text-transform: uppercase;\n font-size: 0.8rem;\n font-weight: 800;\n letter-spacing: 1.1px;\n opacity: 0.2;\n width: 50%;\n text-align: center;\n display: inline-block;\n cursor: pointer;\n top: 0;\n}\n.dropzone .dz-remove {\n background: red;\n color: #fff;\n}\n.dropzone .to-editor-input {\n background: green;\n color: #fff;\n}\n.dropzone .dz-preview:hover .dz-image > div {\n background-size: cover;\n}\n.dropzone .dz-preview:hover .img-attrs {\n background: none;\n color: white;\n}\n.dropzone .dz-preview:hover .to-editor-input,\n.dropzone .dz-preview:hover .dz-remove {\n color: white;\n opacity: 1;\n}\n.dropzone .to-editor-input:hover,\n.dropzone .dz-remove:hover {\n text-decoration: underline !important;\n}\n.dropzone .dz-success-mark, .dz-error-mark, .dz-remove {\n display: none;\n}\n.dropzone-container.fixed .dropzone {\n position: fixed;\n right: 0;\n top: 0;\n bottom: 0;\n width: 300px;\n z-index: 1000;\n overflow-y: auto;\n background: gold;\n border: 2px solid black;\n}\n.dropzone-container.fixed .btn-fixed {\n position: fixed;\n top: 0;\n right: 0;\n z-index: 99999;\n font-size: 20px;\n border: 2px solid white;\n}\n.dropzone-container.fixed .dropzone-pagination {\n position: fixed;\n bottom: 0;\n z-index: 1001;\n border: 2px solid black;\n padding: 10px;\n background: gold;\n width: 300px;\n right: 0;\n}\n.dropzone-container.fixed .dropzone-pagination .page-link {\n padding: 0.4rem 0.65rem;\n}\n.page-link {\n position: relative;\n display: block;\n margin-left: -1px;\n line-height: 1.25;\n color: #28a745;\n background-color: #fff;\n border: 1px solid #dee2e6;\n}\n.page-item.active .page-link {\n z-index: 1;\n color: #fff;\n background-color: #28a645;\n border-color: #28a645;\n}\n.pagination {\n background: #f7f7f7;\n display: -ms-flexbox;\n display: flex;\n padding-left: 0;\n list-style: none;\n border-radius: 0.25rem;\n align-content: center;\n align-items: center;\n justify-content: center;\n}", ""]);
exports.push([module.i, ".dropzone {\n font-family: \"Arial\", sans-serif;\n letter-spacing: 0.2px;\n color: #777;\n transition: background-color 0.2s linear;\n min-height: 200px;\n padding: 10px 0;\n margin: 0;\n text-align: center;\n}\n.dropzone:hover {\n background-color: #ffe9c1;\n}\n.dropzone .dz-preview {\n padding: 0;\n margin: 5px;\n border: 2px solid #682727;\n}\n.dropzone .dz-preview .dz-image {\n width: 270px;\n height: 180px;\n margin-bottom: 10px;\n}\n.dropzone .dz-preview .dz-image > div {\n width: inherit;\n height: inherit;\n background-size: contain;\n background-repeat: no-repeat;\n background-position-x: center;\n animation-duration: 1s;\n}\n.dropzone .dz-preview .dz-image > img {\n width: 100%;\n}\n.dropzone .dz-preview .dz-image .dz-details {\n color: white;\n transition: opacity 0.2s linear;\n text-align: center;\n opacity: 0 !important;\n}\n.dropzone .img-attrs {\n position: relative;\n z-index: 33;\n text-align: right;\n font-size: 12px;\n background: white;\n}\n.dropzone .img-attrs span {\n margin: 2px 0;\n display: inline-block;\n text-align: left;\n}\n.dropzone .img-attrs input {\n width: 78%;\n margin: 2px;\n padding-left: 2px;\n border: 1px #e8e1e1 solid;\n}\n.dropzone .img-attrs input:hover {\n cursor: initial;\n}\n.dropzone .dz-preview .dz-remove,\n.dropzone .dz-preview .to-editor-input {\n position: relative;\n z-index: 33;\n color: #fff;\n margin: 0;\n padding: 10px;\n border: 2px #fff solid;\n text-decoration: none;\n text-transform: uppercase;\n font-size: 0.8rem;\n font-weight: 800;\n letter-spacing: 1.1px;\n opacity: 0.2;\n width: 50%;\n text-align: center;\n display: inline-block;\n cursor: pointer;\n top: 0;\n}\n.dropzone .dz-remove {\n background: red;\n color: #fff;\n}\n.dropzone .to-editor-input {\n background: green;\n color: #fff;\n}\n.dropzone .dz-preview:hover .dz-image > div {\n background-size: cover;\n}\n.dropzone .dz-preview:hover .img-attrs {\n background: none;\n color: white;\n}\n.dropzone .dz-preview:hover .to-editor-input,\n.dropzone .dz-preview:hover .dz-remove {\n color: white;\n opacity: 1;\n}\n.dropzone .to-editor-input:hover,\n.dropzone .dz-remove:hover {\n text-decoration: underline !important;\n}\n.dropzone .dz-success-mark, .dz-error-mark, .dz-remove {\n display: none;\n}\n.dropzone-container.fixed .dropzone {\n position: fixed;\n right: 0;\n top: 0;\n bottom: 0;\n width: 300px;\n z-index: 1000;\n overflow-y: auto;\n background: gold;\n border: 2px solid black;\n}\n.dropzone-container.fixed .btn-fixed {\n position: fixed;\n top: 0;\n right: 0;\n z-index: 99999;\n font-size: 20px;\n border: 2px solid white;\n}\n.dropzone-container.fixed .dropzone-pagination {\n position: fixed;\n bottom: 0;\n z-index: 1001;\n border: 2px solid black;\n padding: 10px;\n background: gold;\n width: 300px;\n right: 0;\n}\n.dropzone-container.fixed .dropzone-pagination .page-link {\n padding: 0.4rem 0.65rem;\n}\n.page-link {\n position: relative;\n display: block;\n margin-left: -1px;\n line-height: 1.25;\n color: #28a745;\n background-color: #fff;\n border: 1px solid #dee2e6;\n}\n.page-item.active .page-link {\n z-index: 1;\n color: #fff;\n background-color: #28a645;\n border-color: #28a645;\n}\n.pagination {\n background: #f7f7f7;\n display: -ms-flexbox;\n display: flex;\n padding-left: 0;\n list-style: none;\n border-radius: 0.25rem;\n align-content: center;\n align-items: center;\n justify-content: center;\n}\n@media (max-width: 720px) {\n.dropzone-container.fixed .dropzone {\n width: 150px;\n}\n.dropzone-container.fixed .dropzone .dz-preview .dz-image {\n width: 100%;\n height: 86px;\n margin-bottom: 10px;\n}\n.dropzone-container.fixed .dropzone .img-attrs span {\n display: block;\n width: 100%;\n}\n.dropzone-container.fixed .dropzone .img-attrs input {\n display: block;\n width: 100%;\n}\n.dropzone-container.fixed .dropzone .dz-image-preview > a {\n display: block;\n width: 100%;\n}\n}", ""]);

// exports

Expand Down
55 changes: 42 additions & 13 deletions resources/js/components/DropZoneComponent.vue
View file
Expand Up @@ -204,9 +204,14 @@
let imgAttrs = document.getElementById(this.dropZoneId).querySelectorAll('.img-attrs input');
imgAttrs.forEach((el) => {
el.addEventListener('change', (el) => {
el.target.parentElement.classList.add('changed');
let formData = new FormData(el.target.parentElement);
let form = document.createElement('form');
let formData = new FormData(form);
formData.append('_token', this._token);
let inputs = el.target.parentNode.querySelectorAll('input').forEach(inp => {
formData.append(inp.name, inp.value);
});
let xhr = new XMLHttpRequest();
xhr.open("POST", "/admin/media/update-attrs");
xhr.send(formData);
Expand Down Expand Up @@ -295,17 +300,17 @@
/*
* Если нет ID не добавляєм так як цей метод був визваний при відповіді сервера після відправки зображення
*/
if(!file.id)
if (!file.id)
return true
let alt = (file.img_attrs && file.img_attrs.alt) ? file.img_attrs.alt : '';
let title = (file.img_attrs && file.img_attrs.title) ? file.img_attrs.title : '';
let source = (file.img_attrs && file.img_attrs.source) ? file.img_attrs.source : '';
let insertHtml = "<form class='img-attrs'>" +
"<span>Alt </span><input type='text' value='" + alt + "' name='dzImgAttrs[" + file.id + "][alt]'><br>" +
"<span>Title </span><input type='text' value='" + title + "' name='dzImgAttrs[" + file.id + "][title]'><br>" +
"<span>Джерело</span><input type='text' value='" + source + "' name='dzImgAttrs[" + file.id + "][source]'><br>" +
"</form>";
let insertHtml = "<div class='img-attrs'>" +
"<div><span>Alt </span><input type='text' value='" + alt + "' name='dzImgAttrs[" + file.id + "][alt]'></div>" +
"<div><span>Title </span><input type='text' value='" + title + "' name='dzImgAttrs[" + file.id + "][title]'></div>" +
"<div><span>Джерело</span><input type='text' value='" + source + "' name='dzImgAttrs[" + file.id + "][source]'></div>" +
"</div>";
if (this.addToEditor === true) {
insertHtml += "<a hashName='" + file.hash_name + "' originalUrl=\"" + file.originalUrl + "\" class=\"to-editor-input pointer\">В редактор</a>";
Expand Down Expand Up @@ -418,7 +423,7 @@
color: white;
transition: opacity .2s linear;
text-align: center;
opacity: 0 !important;
}
}
Expand Down Expand Up @@ -533,10 +538,6 @@
border: 2px solid white;
}
.dropzone-container.fixed .dropzone-pagination {
}
.dropzone-container.fixed .dropzone-pagination {
position: fixed;
bottom: 0;
Expand Down Expand Up @@ -580,4 +581,32 @@
align-items: center;
justify-content: center;
}
@media(max-width: 720px) {
.dropzone-container.fixed .dropzone {
width: 150px;
.dz-preview .dz-image {
width: 100%;
height: 86px;
margin-bottom: 10px;
}
.img-attrs span {
display: block;
width: 100%;
}
.img-attrs input {
display: block;
width: 100%;
}
.dz-image-preview > a {
display: block;
width: 100%;
}
}
}
</style>

0 comments on commit 1f1ba28

Please sign in to comment.