Skip to content
Snippets Groups Projects
Commit 72da3e2e authored by xamgore's avatar xamgore
Browse files

File drop-zone component

parent 0b0a4eee
Branches
Tags
No related merge requests found
.b-dropzone {
position: relative;
-webkit-transition: all .4s ease;
transition: all .4s ease;
overflow: hidden;
margin-top: 20px;
}
.b-dropzone__upload-helper {
position: absolute;
visibility: hidden;
}
._nb-normal-dropzone {
color: rgba(0, 0, 0, .8);
/*background: #ecebe9;*/
cursor: pointer;
}
.b-dropzone .nb-dropzone:before {
-webkit-transition: border-color .3s ease;
transition: border-color .3s ease;
}
._nb-normal-dropzone:before {
border: 2px dashed rgba(0, 0, 0, .2);
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.b-dropzone .nb-dropzone, .b-dropzone .nb-dropzone:hover {
background: 0 0;
}
.b-dropzone .nb-dropzone {
margin: 1px 0 0;
}
._nb-normal-dropzone {
color: rgba(0, 0, 0, .8);
background: #ecebe9;
cursor: pointer;
}
.nb-dropzone {
margin: 0 20px 20px;
position: relative;
padding: 20px;
text-align: center;
}
._nb-dropzone-text {
font-size: 13px;
line-height: 24px;
}
.b-dropzone__content {
text-align: center;
}
.b-dropzone:hover .b-dropzone__logo {
color: rgba(0, 0, 0, .8);
}
.b-dropzone__logo {
font-size: 3.4em;
display: inline-block;
vertical-align: middle;
color: #ccc;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.b-dropzone__text {
display: inline-block;
margin-left: 20px;
text-align: left;
vertical-align: middle;
}
.b-dropzone__title {
margin-bottom: 6px;
font: 19px Arial, sans-serif;
}
.b-dropzone__desc {
font: 13px Arial, sans-serif;
}
.b-dropzone:hover .nb-dropzone:before {
border-color: rgba(0, 0, 0, .8);
}
.b-dropzone.hover .nb-dropzone:before {
border-color: rgba(0, 0, 0, .8);
}
a._link {
font-size: 1em;
text-decoration: none;
cursor: pointer;
-webkit-transition: color .15s ease-out;
transition: color .15s ease-out;
}
var Dropzone = (function () {
var $dropzone, readerClbks = [];
var handlerOf = {
dragOver: function (e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
$dropzone.addClass('hover');
},
dragLeave: function (e) {
$dropzone.removeClass('hover');
},
dragDrop: function (e) {
e.stopPropagation();
e.preventDefault();
$dropzone.removeClass('hover');
processFiles(e.dataTransfer.files);
},
fileSelect: function (evt) {
processFiles(evt.target.files);
}
};
function processFiles(files) {
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = (function (file) {
return function (e) {
readerClbks.forEach(function (callback) {
callback(file, e.target.result);
});
};
})(f);
reader.readAsText(f);
}
}
return {
init: function (listeners) {
readerClbks = listeners || [];
var $input = document.getElementById('files');
$input.addEventListener('change', handlerOf.fileSelect, false);
$dropzone = document.getElementsByClassName('b-dropzone')[0];
$dropzone.addEventListener('dragover', handlerOf.dragOver, false);
$dropzone.addEventListener('dragleave', handlerOf.dragLeave, false);
$dropzone.addEventListener('drop', handlerOf.dragDrop, false);
$dropzone.addEventListener('click', function () {
$input.click();
}, false);
}
}
})();
<div class="ns-view-boxDropzone ns-view-id-17 ns-view-visible" data-key="box=boxDropzone">
<div class="ns-view-dropzoneSmall ns-view-id-33 b-dropzone js-prevent-deselect ns-view-visible" data-key="view=dropzoneSmall">
<input type="file" id="files" name="files[]" class="b-dropzone__upload-helper" multiple="multiple"/>
<div class="nb-dropzone _nb-normal-dropzone js-dropzone">
<div class="_nb-dropzone-text">
<div class="b-dropzone__content">
<i class="fa fa-file b-dropzone__logo"></i>
<div class="b-dropzone__text">
<div class="b-dropzone__title">Загрузить файлы</div>
<div class="b-dropzone__desc">Перетащить сюда или <a class="_link">выбрать</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -342,4 +342,13 @@ class Kohana_HTML {
return $compiled;
}
public static function component($file) {
$full = '../media/components/' . $file;
if (file_exists($full))
return file_get_contents($full, FILE_TEXT);
else
throw new Twig_Exception("`$full` does not exist");
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment