File drop-zone component

media/components/office/dropzone/dz.css

+.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;
+}

media/components/office/dropzone/dz.js

+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);
+        }
+    }
+})();

media/components/office/dropzone/dz.twig

+<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>

~dev_rating/system/classes/Kohana/HTML.php

@@ -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");
+    }
+
 }