first commit
This commit is contained in:
1077
public/assets/plugins/dropify/css/demo.css
Executable file
1077
public/assets/plugins/dropify/css/demo.css
Executable file
File diff suppressed because it is too large
Load Diff
386
public/assets/plugins/dropify/css/dropify.css
Executable file
386
public/assets/plugins/dropify/css/dropify.css
Executable file
@ -0,0 +1,386 @@
|
||||
/*!
|
||||
* =============================================================
|
||||
* dropify v0.2.1 - Override your input files with style.
|
||||
* https://github.com/JeremyFagis/dropify
|
||||
*
|
||||
* (c) 2017 - Jeremy FAGIS <jeremy@fagis.fr> (http://fagis.fr)
|
||||
* =============================================================
|
||||
*/
|
||||
|
||||
@charset "UTF-8";
|
||||
@font-face {
|
||||
font-family: 'dropify';
|
||||
src: url("../fonts/dropify.eot");
|
||||
src: url("../fonts/dropify.eot#iefix") format("embedded-opentype"), url("../fonts/dropify.woff") format("woff"), url("../fonts/dropify.ttf") format("truetype"), url("../fonts/dropify.svg#dropify") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
|
||||
[class^="dropify-font-"]:before, [class*=" dropify-font-"]:before, .dropify-font:before, .dropify-wrapper .dropify-message span.file-icon:before {
|
||||
font-family: "dropify";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
margin-left: .2em;
|
||||
margin-right: .2em;
|
||||
text-align: center;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1em; }
|
||||
|
||||
.dropify-font-upload:before, .dropify-wrapper .dropify-message span.file-icon:before {
|
||||
content: '\e800'; }
|
||||
|
||||
.dropify-font-file:before {
|
||||
content: '\e801'; }
|
||||
|
||||
.dropify-wrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 200px;
|
||||
padding: 5px 10px;
|
||||
font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial";
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #777;
|
||||
background-color: #FFF;
|
||||
background-image: none;
|
||||
text-align: center;
|
||||
border: 2px solid #E5E5E5;
|
||||
-webkit-transition: border-color 0.15s linear;
|
||||
transition: border-color 0.15s linear; }
|
||||
.dropify-wrapper:hover {
|
||||
background-size: 30px 30px;
|
||||
background-image: -webkit-linear-gradient(135deg, #F6F6F6 25%, transparent 25%, transparent 50%, #F6F6F6 50%, #F6F6F6 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(-45deg, #F6F6F6 25%, transparent 25%, transparent 50%, #F6F6F6 50%, #F6F6F6 75%, transparent 75%, transparent);
|
||||
-webkit-animation: stripes 2s linear infinite;
|
||||
animation: stripes 2s linear infinite; }
|
||||
.dropify-wrapper.has-preview .dropify-clear {
|
||||
display: block; }
|
||||
.dropify-wrapper.has-error {
|
||||
border-color: #F34141; }
|
||||
.dropify-wrapper.has-error .dropify-message .dropify-error {
|
||||
display: block; }
|
||||
.dropify-wrapper.has-error:hover .dropify-errors-container {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
-webkit-transition-delay: 0s;
|
||||
transition-delay: 0s; }
|
||||
.dropify-wrapper.disabled input {
|
||||
cursor: not-allowed; }
|
||||
.dropify-wrapper.disabled:hover {
|
||||
background-image: none;
|
||||
-webkit-animation: none;
|
||||
animation: none; }
|
||||
.dropify-wrapper.disabled .dropify-message {
|
||||
opacity: 0.5;
|
||||
text-decoration: line-through; }
|
||||
.dropify-wrapper.disabled .dropify-infos-message {
|
||||
display: none; }
|
||||
.dropify-wrapper input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
z-index: 5; }
|
||||
.dropify-wrapper .dropify-message {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%); }
|
||||
.dropify-wrapper .dropify-message span.file-icon {
|
||||
font-size: 50px;
|
||||
color: #CCC; }
|
||||
.dropify-wrapper .dropify-message p {
|
||||
margin: 5px 0 0 0; }
|
||||
.dropify-wrapper .dropify-message p.dropify-error {
|
||||
color: #F34141;
|
||||
font-weight: bold;
|
||||
display: none; }
|
||||
.dropify-wrapper .dropify-clear {
|
||||
display: none;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 7;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: none;
|
||||
border: 2px solid #FFF;
|
||||
text-transform: uppercase;
|
||||
font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial";
|
||||
font-size: 11px;
|
||||
padding: 4px 8px;
|
||||
font-weight: bold;
|
||||
color: #FFF;
|
||||
-webkit-transition: all 0.15s linear;
|
||||
transition: all 0.15s linear; }
|
||||
.dropify-wrapper .dropify-clear:hover {
|
||||
background: rgba(255, 255, 255, 0.2); }
|
||||
.dropify-wrapper .dropify-preview {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-color: #FFF;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
text-align: center; }
|
||||
.dropify-wrapper .dropify-preview .dropify-render img {
|
||||
top: 50%;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
background-color: #FFF;
|
||||
-webkit-transition: border-color 0.15s linear;
|
||||
transition: border-color 0.15s linear; }
|
||||
.dropify-wrapper .dropify-preview .dropify-render i {
|
||||
font-size: 70px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
color: #777; }
|
||||
.dropify-wrapper .dropify-preview .dropify-render .dropify-extension {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.03em;
|
||||
font-size: 13px;
|
||||
width: 42px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; }
|
||||
.dropify-wrapper .dropify-preview .dropify-infos {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.15s linear;
|
||||
transition: opacity 0.15s linear; }
|
||||
.dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(0, -40%);
|
||||
transform: translate(0, -40%);
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease; }
|
||||
.dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
font-weight: bold; }
|
||||
.dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message {
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
opacity: 0.5; }
|
||||
.dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
background: #FFF;
|
||||
width: 30px;
|
||||
height: 2px; }
|
||||
.dropify-wrapper:hover .dropify-clear {
|
||||
opacity: 1; }
|
||||
.dropify-wrapper:hover .dropify-preview .dropify-infos {
|
||||
opacity: 1; }
|
||||
.dropify-wrapper:hover .dropify-preview .dropify-infos .dropify-infos-inner {
|
||||
margin-top: -5px; }
|
||||
.dropify-wrapper.touch-fallback {
|
||||
height: auto !important; }
|
||||
.dropify-wrapper.touch-fallback:hover {
|
||||
background-image: none;
|
||||
-webkit-animation: none;
|
||||
animation: none; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview {
|
||||
position: relative;
|
||||
padding: 0; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-render {
|
||||
display: block;
|
||||
position: relative; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-render .dropify-font-file {
|
||||
position: relative;
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
top: 0;
|
||||
left: 0; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-render .dropify-font-file::before {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-render img {
|
||||
position: relative;
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0); }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
background: transparent; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
padding: 5px 90px 5px 0; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #777;
|
||||
text-align: left;
|
||||
line-height: 25px; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-filename {
|
||||
font-weight: bold; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
opacity: 1; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message::before {
|
||||
display: none; }
|
||||
.dropify-wrapper.touch-fallback .dropify-message {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
padding: 40px 0; }
|
||||
.dropify-wrapper.touch-fallback .dropify-clear {
|
||||
top: auto;
|
||||
bottom: 23px;
|
||||
opacity: 1;
|
||||
border-color: rgba(119, 119, 119, 0.7);
|
||||
color: #777; }
|
||||
.dropify-wrapper.touch-fallback.has-preview .dropify-message {
|
||||
display: none; }
|
||||
.dropify-wrapper.touch-fallback:hover .dropify-preview .dropify-infos .dropify-infos-inner {
|
||||
margin-top: 0; }
|
||||
.dropify-wrapper .dropify-loader {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
display: none;
|
||||
z-index: 9; }
|
||||
.dropify-wrapper .dropify-loader::after {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-webkit-animation: rotate 0.6s linear infinite;
|
||||
animation: rotate 0.6s linear infinite;
|
||||
border-radius: 100%;
|
||||
border-top: 1px solid #CCC;
|
||||
border-bottom: 1px solid #777;
|
||||
border-left: 1px solid #CCC;
|
||||
border-right: 1px solid #777;
|
||||
content: ''; }
|
||||
.dropify-wrapper .dropify-errors-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
background: rgba(243, 65, 65, 0.8);
|
||||
text-align: left;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: visibility 0s linear 0.15s,opacity 0.15s linear;
|
||||
transition: visibility 0s linear 0.15s,opacity 0.15s linear; }
|
||||
.dropify-wrapper .dropify-errors-container ul {
|
||||
padding: 10px 20px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%); }
|
||||
.dropify-wrapper .dropify-errors-container ul li {
|
||||
margin-left: 20px;
|
||||
color: #FFF;
|
||||
font-weight: bold; }
|
||||
.dropify-wrapper .dropify-errors-container.visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
-webkit-transition-delay: 0s;
|
||||
transition-delay: 0s; }
|
||||
.dropify-wrapper ~ .dropify-errors-container ul {
|
||||
padding: 0;
|
||||
margin: 15px 0; }
|
||||
.dropify-wrapper ~ .dropify-errors-container ul li {
|
||||
margin-left: 20px;
|
||||
color: #F34141;
|
||||
font-weight: bold; }
|
||||
|
||||
@-webkit-keyframes stripes {
|
||||
from {
|
||||
background-position: 0 0; }
|
||||
to {
|
||||
background-position: 60px 30px; } }
|
||||
|
||||
@keyframes stripes {
|
||||
from {
|
||||
background-position: 0 0; }
|
||||
to {
|
||||
background-position: 60px 30px; } }
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
0% {
|
||||
-webkit-transform: rotateZ(-360deg);
|
||||
transform: rotateZ(-360deg); }
|
||||
100% {
|
||||
-webkit-transform: rotateZ(0deg);
|
||||
transform: rotateZ(0deg); } }
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
-webkit-transform: rotateZ(-360deg);
|
||||
transform: rotateZ(-360deg); }
|
||||
100% {
|
||||
-webkit-transform: rotateZ(0deg);
|
||||
transform: rotateZ(0deg); } }
|
||||
8
public/assets/plugins/dropify/css/dropify.min.css
vendored
Executable file
8
public/assets/plugins/dropify/css/dropify.min.css
vendored
Executable file
File diff suppressed because one or more lines are too long
BIN
public/assets/plugins/dropify/fonts/dropify.eot
Executable file
BIN
public/assets/plugins/dropify/fonts/dropify.eot
Executable file
Binary file not shown.
13
public/assets/plugins/dropify/fonts/dropify.svg
Executable file
13
public/assets/plugins/dropify/fonts/dropify.svg
Executable file
@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
|
||||
<defs>
|
||||
<font id="dropify" horiz-adv-x="1000" >
|
||||
<font-face font-family="dropify" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
|
||||
<missing-glyph horiz-adv-x="1000" />
|
||||
<glyph glyph-name="upload" unicode="" d="m654 189c3-3 8-4 12-4 4 0 8 1 11 4 6 7 6 17 0 23l-167 166c0 0 0 0 0 0l-11 12-11-12c0 0 0 0 0 0l-167-166c-6-6-6-16 0-23 7-6 17-6 23 0l139 140v-281c0-9 7-16 16-16s16 7 16 16v281l139-140z m158 292c-39 110-143 184-261 184-111 0-211-67-254-169-21 10-43 15-65 15-86 0-156-70-156-156-45-34-71-87-71-143 0-99 81-180 183-180 1 0 3 0 4 0 1 0 2 0 2 0h168c9 0 16 7 16 16 0 9-7 16-16 16h-168c-2 0-4 0-5 0l-3 0c-82 0-149 66-149 148 0 49 24 95 64 122l8 8-1 13c0 68 55 124 124 124 23 0 45-7 65-19l17-10 6 19c34 98 127 164 231 164 107 0 201-69 234-171l3-9 9-2c95-15 164-96 164-192 0-108-87-195-195-195h-130c-9 0-16-8-16-16 0-9 7-16 16-16h130c125 0 227 101 227 227 0 108-75 200-181 222z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="file" unicode="" d="m853 507c0 3 0 6-1 8-1 14-3 16-4 18-2 4-24 27-65 68l-167 166c-41 41-64 63-68 66-4 2-8 5-103 5h-165c-26 0-88 0-93-1-8-1-21-9-26-14-4-4-10-12-12-18-2-5-2-39-2-100v-710c0-3 0-86 1-93 1-8 8-20 13-25 4-4 12-10 19-13 6-2 58-2 100-2h440c4 0 87 0 93 1 9 1 21 9 26 14 4 4 10 12 12 18 2 5 2 39 2 100v435c0 34 0 57-1 72 1 1 1 3 1 5z m-313 287c11-10 29-28 52-51l166-167c24-23 41-41 52-52h-202c-38 0-68 31-68 69v201l0 0z m279-799c0-50-1-87 0-89-1-1-2-3-4-5-1-1-6-4-5-4-4 0-38-1-90-1h-440c-43 0-76 1-86 1-2 0-3 0-3 0-1 0-4 2-6 4-1 1-3 5-3 5h-1c0 4 0 37 0 89v710c0 52 1 87 0 89 1 1 3 4 4 5 1 1 6 4 6 4 4 1 39 1 89 1h165c24 0 45 0 61-1v-210c0-57 46-103 102-103h211c0-15 0-36 0-60l0-435 0 0z" horiz-adv-x="1000" />
|
||||
</font>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public/assets/plugins/dropify/fonts/dropify.ttf
Executable file
BIN
public/assets/plugins/dropify/fonts/dropify.ttf
Executable file
Binary file not shown.
BIN
public/assets/plugins/dropify/fonts/dropify.woff
Executable file
BIN
public/assets/plugins/dropify/fonts/dropify.woff
Executable file
Binary file not shown.
657
public/assets/plugins/dropify/js/dropify.js
Executable file
657
public/assets/plugins/dropify/js/dropify.js
Executable file
@ -0,0 +1,657 @@
|
||||
/*!
|
||||
* =============================================================
|
||||
* dropify v0.2.1 - Override your input files with style.
|
||||
* https://github.com/JeremyFagis/dropify
|
||||
*
|
||||
* (c) 2017 - Jeremy FAGIS <jeremy@fagis.fr> (http://fagis.fr)
|
||||
* =============================================================
|
||||
*/
|
||||
|
||||
;(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
root.Dropify = factory(root.jQuery);
|
||||
}
|
||||
}(this, function($) {
|
||||
var pluginName = "dropify";
|
||||
|
||||
/**
|
||||
* Dropify plugin
|
||||
*
|
||||
* @param {Object} element
|
||||
* @param {Array} options
|
||||
*/
|
||||
function Dropify(element, options) {
|
||||
if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var defaults = {
|
||||
defaultFile: '',
|
||||
maxFileSize: 0,
|
||||
minWidth: 0,
|
||||
maxWidth: 0,
|
||||
minHeight: 0,
|
||||
maxHeight: 0,
|
||||
showRemove: true,
|
||||
showLoader: true,
|
||||
showErrors: true,
|
||||
errorTimeout: 3000,
|
||||
errorsPosition: 'overlay',
|
||||
imgFileExtensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp'],
|
||||
maxFileSizePreview: "5M",
|
||||
allowedFormats: ['portrait', 'square', 'landscape'],
|
||||
allowedFileExtensions: ['*'],
|
||||
messages: {
|
||||
'default': 'Drag and drop a file here or click',
|
||||
'replace': 'Drag and drop or click to replace',
|
||||
'remove': 'Remove',
|
||||
'error': 'Ooops, something wrong happended.'
|
||||
},
|
||||
error: {
|
||||
'fileSize': 'The file size is too big ({{ value }} max).',
|
||||
'minWidth': 'The image width is too small ({{ value }}}px min).',
|
||||
'maxWidth': 'The image width is too big ({{ value }}}px max).',
|
||||
'minHeight': 'The image height is too small ({{ value }}}px min).',
|
||||
'maxHeight': 'The image height is too big ({{ value }}px max).',
|
||||
'imageFormat': 'The image format is not allowed ({{ value }} only).',
|
||||
'fileExtension': 'The file is not allowed ({{ value }} only).'
|
||||
},
|
||||
tpl: {
|
||||
wrap: '<div class="dropify-wrapper"></div>',
|
||||
loader: '<div class="dropify-loader"></div>',
|
||||
message: '<div class="dropify-message"><span class="file-icon" /> <p>{{ default }}</p></div>',
|
||||
preview: '<div class="dropify-preview"><span class="dropify-render"></span><div class="dropify-infos"><div class="dropify-infos-inner"><p class="dropify-infos-message">{{ replace }}</p></div></div></div>',
|
||||
filename: '<p class="dropify-filename"><span class="dropify-filename-inner"></span></p>',
|
||||
clearButton: '<button type="button" class="dropify-clear">{{ remove }}</button>',
|
||||
errorLine: '<p class="dropify-error">{{ error }}</p>',
|
||||
errorsContainer: '<div class="dropify-errors-container"><ul></ul></div>'
|
||||
}
|
||||
};
|
||||
|
||||
this.element = element;
|
||||
this.input = $(this.element);
|
||||
this.wrapper = null;
|
||||
this.preview = null;
|
||||
this.filenameWrapper = null;
|
||||
this.settings = $.extend(true, defaults, options, this.input.data());
|
||||
this.errorsEvent = $.Event('dropify.errors');
|
||||
this.isDisabled = false;
|
||||
this.isInit = false;
|
||||
this.file = {
|
||||
object: null,
|
||||
name: null,
|
||||
size: null,
|
||||
width: null,
|
||||
height: null,
|
||||
type: null
|
||||
};
|
||||
|
||||
if (!Array.isArray(this.settings.allowedFormats)) {
|
||||
this.settings.allowedFormats = this.settings.allowedFormats.split(' ');
|
||||
}
|
||||
|
||||
if (!Array.isArray(this.settings.allowedFileExtensions)) {
|
||||
this.settings.allowedFileExtensions = this.settings.allowedFileExtensions.split(' ');
|
||||
}
|
||||
|
||||
this.onChange = this.onChange.bind(this);
|
||||
this.clearElement = this.clearElement.bind(this);
|
||||
this.onFileReady = this.onFileReady.bind(this);
|
||||
|
||||
this.translateMessages();
|
||||
this.createElements();
|
||||
this.setContainerSize();
|
||||
|
||||
this.errorsEvent.errors = [];
|
||||
|
||||
this.input.on('change', this.onChange);
|
||||
}
|
||||
|
||||
/**
|
||||
* On change event
|
||||
*/
|
||||
Dropify.prototype.onChange = function()
|
||||
{
|
||||
this.resetPreview();
|
||||
this.readFile(this.element);
|
||||
};
|
||||
|
||||
/**
|
||||
* Create dom elements
|
||||
*/
|
||||
Dropify.prototype.createElements = function()
|
||||
{
|
||||
this.isInit = true;
|
||||
this.input.wrap($(this.settings.tpl.wrap));
|
||||
this.wrapper = this.input.parent();
|
||||
|
||||
var messageWrapper = $(this.settings.tpl.message).insertBefore(this.input);
|
||||
$(this.settings.tpl.errorLine).appendTo(messageWrapper);
|
||||
|
||||
if (this.isTouchDevice() === true) {
|
||||
this.wrapper.addClass('touch-fallback');
|
||||
}
|
||||
|
||||
if (this.input.attr('disabled')) {
|
||||
this.isDisabled = true;
|
||||
this.wrapper.addClass('disabled');
|
||||
}
|
||||
|
||||
if (this.settings.showLoader === true) {
|
||||
this.loader = $(this.settings.tpl.loader);
|
||||
this.loader.insertBefore(this.input);
|
||||
}
|
||||
|
||||
this.preview = $(this.settings.tpl.preview);
|
||||
this.preview.insertAfter(this.input);
|
||||
|
||||
if (this.isDisabled === false && this.settings.showRemove === true) {
|
||||
this.clearButton = $(this.settings.tpl.clearButton);
|
||||
this.clearButton.insertAfter(this.input);
|
||||
this.clearButton.on('click', this.clearElement);
|
||||
}
|
||||
|
||||
this.filenameWrapper = $(this.settings.tpl.filename);
|
||||
this.filenameWrapper.prependTo(this.preview.find('.dropify-infos-inner'));
|
||||
|
||||
if (this.settings.showErrors === true) {
|
||||
this.errorsContainer = $(this.settings.tpl.errorsContainer);
|
||||
|
||||
if (this.settings.errorsPosition === 'outside') {
|
||||
this.errorsContainer.insertAfter(this.wrapper);
|
||||
} else {
|
||||
this.errorsContainer.insertBefore(this.input);
|
||||
}
|
||||
}
|
||||
|
||||
var defaultFile = this.settings.defaultFile || '';
|
||||
|
||||
if (defaultFile.trim() !== '') {
|
||||
this.file.name = this.cleanFilename(defaultFile);
|
||||
this.setPreview(this.isImage(), defaultFile);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Read the file using FileReader
|
||||
*
|
||||
* @param {Object} input
|
||||
*/
|
||||
Dropify.prototype.readFile = function(input)
|
||||
{
|
||||
if (input.files && input.files[0]) {
|
||||
var reader = new FileReader();
|
||||
var image = new Image();
|
||||
var file = input.files[0];
|
||||
var srcBase64 = null;
|
||||
var _this = this;
|
||||
var eventFileReady = $.Event("dropify.fileReady");
|
||||
|
||||
this.clearErrors();
|
||||
this.showLoader();
|
||||
this.setFileInformations(file);
|
||||
this.errorsEvent.errors = [];
|
||||
this.checkFileSize();
|
||||
this.isFileExtensionAllowed();
|
||||
|
||||
if (this.isImage() && this.file.size < this.sizeToByte(this.settings.maxFileSizePreview)) {
|
||||
this.input.on('dropify.fileReady', this.onFileReady);
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = function(_file) {
|
||||
srcBase64 = _file.target.result;
|
||||
image.src = _file.target.result;
|
||||
image.onload = function() {
|
||||
_this.setFileDimensions(this.width, this.height);
|
||||
_this.validateImage();
|
||||
_this.input.trigger(eventFileReady, [true, srcBase64]);
|
||||
};
|
||||
|
||||
}.bind(this);
|
||||
} else {
|
||||
this.onFileReady(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* On file ready to show
|
||||
*
|
||||
* @param {Event} event
|
||||
* @param {Bool} previewable
|
||||
* @param {String} src
|
||||
*/
|
||||
Dropify.prototype.onFileReady = function(event, previewable, src)
|
||||
{
|
||||
this.input.off('dropify.fileReady', this.onFileReady);
|
||||
|
||||
if (this.errorsEvent.errors.length === 0) {
|
||||
this.setPreview(previewable, src);
|
||||
} else {
|
||||
this.input.trigger(this.errorsEvent, [this]);
|
||||
for (var i = this.errorsEvent.errors.length - 1; i >= 0; i--) {
|
||||
var errorNamespace = this.errorsEvent.errors[i].namespace;
|
||||
var errorKey = errorNamespace.split('.').pop();
|
||||
this.showError(errorKey);
|
||||
}
|
||||
|
||||
if (typeof this.errorsContainer !== "undefined") {
|
||||
this.errorsContainer.addClass('visible');
|
||||
|
||||
var errorsContainer = this.errorsContainer;
|
||||
setTimeout(function(){ errorsContainer.removeClass('visible'); }, this.settings.errorTimeout);
|
||||
}
|
||||
|
||||
this.wrapper.addClass('has-error');
|
||||
this.resetPreview();
|
||||
this.clearElement();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Set file informations
|
||||
*
|
||||
* @param {File} file
|
||||
*/
|
||||
Dropify.prototype.setFileInformations = function(file)
|
||||
{
|
||||
this.file.object = file;
|
||||
this.file.name = file.name;
|
||||
this.file.size = file.size;
|
||||
this.file.type = file.type;
|
||||
this.file.width = null;
|
||||
this.file.height = null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set file dimensions
|
||||
*
|
||||
* @param {Int} width
|
||||
* @param {Int} height
|
||||
*/
|
||||
Dropify.prototype.setFileDimensions = function(width, height)
|
||||
{
|
||||
this.file.width = width;
|
||||
this.file.height = height;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the preview and animate it
|
||||
*
|
||||
* @param {String} src
|
||||
*/
|
||||
Dropify.prototype.setPreview = function(previewable, src)
|
||||
{
|
||||
this.wrapper.removeClass('has-error').addClass('has-preview');
|
||||
this.filenameWrapper.children('.dropify-filename-inner').html(this.file.name);
|
||||
var render = this.preview.children('.dropify-render');
|
||||
|
||||
this.hideLoader();
|
||||
|
||||
if (previewable === true) {
|
||||
var imgTag = $('<img />').attr('src', src);
|
||||
|
||||
if (this.settings.height) {
|
||||
imgTag.css("max-height", this.settings.height);
|
||||
}
|
||||
|
||||
imgTag.appendTo(render);
|
||||
} else {
|
||||
$('<i />').attr('class', 'dropify-font-file').appendTo(render);
|
||||
$('<span class="dropify-extension" />').html(this.getFileType()).appendTo(render);
|
||||
}
|
||||
this.preview.fadeIn();
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset the preview
|
||||
*/
|
||||
Dropify.prototype.resetPreview = function()
|
||||
{
|
||||
this.wrapper.removeClass('has-preview');
|
||||
var render = this.preview.children('.dropify-render');
|
||||
render.find('.dropify-extension').remove();
|
||||
render.find('i').remove();
|
||||
render.find('img').remove();
|
||||
this.preview.hide();
|
||||
this.hideLoader();
|
||||
};
|
||||
|
||||
/**
|
||||
* Clean the src and get the filename
|
||||
*
|
||||
* @param {String} src
|
||||
*
|
||||
* @return {String} filename
|
||||
*/
|
||||
Dropify.prototype.cleanFilename = function(src)
|
||||
{
|
||||
var filename = src.split('\\').pop();
|
||||
if (filename == src) {
|
||||
filename = src.split('/').pop();
|
||||
}
|
||||
|
||||
return src !== "" ? filename : '';
|
||||
};
|
||||
|
||||
/**
|
||||
* Clear the element, events are available
|
||||
*/
|
||||
Dropify.prototype.clearElement = function()
|
||||
{
|
||||
if (this.errorsEvent.errors.length === 0) {
|
||||
var eventBefore = $.Event("dropify.beforeClear");
|
||||
this.input.trigger(eventBefore, [this]);
|
||||
|
||||
if (eventBefore.result !== false) {
|
||||
this.resetFile();
|
||||
this.input.val('');
|
||||
this.resetPreview();
|
||||
|
||||
this.input.trigger($.Event("dropify.afterClear"), [this]);
|
||||
}
|
||||
} else {
|
||||
this.resetFile();
|
||||
this.input.val('');
|
||||
this.resetPreview();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset file informations
|
||||
*/
|
||||
Dropify.prototype.resetFile = function()
|
||||
{
|
||||
this.file.object = null;
|
||||
this.file.name = null;
|
||||
this.file.size = null;
|
||||
this.file.type = null;
|
||||
this.file.width = null;
|
||||
this.file.height = null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the container height
|
||||
*/
|
||||
Dropify.prototype.setContainerSize = function()
|
||||
{
|
||||
if (this.settings.height) {
|
||||
this.wrapper.height(this.settings.height);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Test if it's touch screen
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
Dropify.prototype.isTouchDevice = function()
|
||||
{
|
||||
return (('ontouchstart' in window) ||
|
||||
(navigator.MaxTouchPoints > 0) ||
|
||||
(navigator.msMaxTouchPoints > 0));
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the file type.
|
||||
*
|
||||
* @return {String}
|
||||
*/
|
||||
Dropify.prototype.getFileType = function()
|
||||
{
|
||||
return this.file.name.split('.').pop().toLowerCase();
|
||||
};
|
||||
|
||||
/**
|
||||
* Test if the file is an image
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
Dropify.prototype.isImage = function()
|
||||
{
|
||||
if (this.settings.imgFileExtensions.indexOf(this.getFileType()) != "-1") {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Test if the file extension is allowed
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
Dropify.prototype.isFileExtensionAllowed = function () {
|
||||
|
||||
if (this.settings.allowedFileExtensions.indexOf('*') != "-1" ||
|
||||
this.settings.allowedFileExtensions.indexOf(this.getFileType()) != "-1") {
|
||||
return true;
|
||||
}
|
||||
this.pushError("fileExtension");
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Translate messages if needed.
|
||||
*/
|
||||
Dropify.prototype.translateMessages = function()
|
||||
{
|
||||
for (var name in this.settings.tpl) {
|
||||
for (var key in this.settings.messages) {
|
||||
this.settings.tpl[name] = this.settings.tpl[name].replace('{{ ' + key + ' }}', this.settings.messages[key]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Check the limit filesize.
|
||||
*/
|
||||
Dropify.prototype.checkFileSize = function()
|
||||
{
|
||||
if (this.sizeToByte(this.settings.maxFileSize) !== 0 && this.file.size > this.sizeToByte(this.settings.maxFileSize)) {
|
||||
this.pushError("fileSize");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert filesize to byte.
|
||||
*
|
||||
* @return {Int} value
|
||||
*/
|
||||
Dropify.prototype.sizeToByte = function(size)
|
||||
{
|
||||
var value = 0;
|
||||
|
||||
if (size !== 0) {
|
||||
var unit = size.slice(-1).toUpperCase(),
|
||||
kb = 1024,
|
||||
mb = kb * 1024,
|
||||
gb = mb * 1024;
|
||||
|
||||
if (unit === 'K') {
|
||||
value = parseFloat(size) * kb;
|
||||
} else if (unit === 'M') {
|
||||
value = parseFloat(size) * mb;
|
||||
} else if (unit === 'G') {
|
||||
value = parseFloat(size) * gb;
|
||||
}
|
||||
}
|
||||
|
||||
return value;
|
||||
};
|
||||
|
||||
/**
|
||||
* Validate image dimensions and format
|
||||
*/
|
||||
Dropify.prototype.validateImage = function()
|
||||
{
|
||||
if (this.settings.minWidth !== 0 && this.settings.minWidth >= this.file.width) {
|
||||
this.pushError("minWidth");
|
||||
}
|
||||
|
||||
if (this.settings.maxWidth !== 0 && this.settings.maxWidth <= this.file.width) {
|
||||
this.pushError("maxWidth");
|
||||
}
|
||||
|
||||
if (this.settings.minHeight !== 0 && this.settings.minHeight >= this.file.height) {
|
||||
this.pushError("minHeight");
|
||||
}
|
||||
|
||||
if (this.settings.maxHeight !== 0 && this.settings.maxHeight <= this.file.height) {
|
||||
this.pushError("maxHeight");
|
||||
}
|
||||
|
||||
if (this.settings.allowedFormats.indexOf(this.getImageFormat()) == "-1") {
|
||||
this.pushError("imageFormat");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get image format.
|
||||
*
|
||||
* @return {String}
|
||||
*/
|
||||
Dropify.prototype.getImageFormat = function()
|
||||
{
|
||||
if (this.file.width == this.file.height) {
|
||||
return "square";
|
||||
}
|
||||
|
||||
if (this.file.width < this.file.height) {
|
||||
return "portrait";
|
||||
}
|
||||
|
||||
if (this.file.width > this.file.height) {
|
||||
return "landscape";
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Push error
|
||||
*
|
||||
* @param {String} errorKey
|
||||
*/
|
||||
Dropify.prototype.pushError = function(errorKey) {
|
||||
var e = $.Event("dropify.error." + errorKey);
|
||||
this.errorsEvent.errors.push(e);
|
||||
this.input.trigger(e, [this]);
|
||||
};
|
||||
|
||||
/**
|
||||
* Clear errors
|
||||
*/
|
||||
Dropify.prototype.clearErrors = function()
|
||||
{
|
||||
if (typeof this.errorsContainer !== "undefined") {
|
||||
this.errorsContainer.children('ul').html('');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Show error in DOM
|
||||
*
|
||||
* @param {String} errorKey
|
||||
*/
|
||||
Dropify.prototype.showError = function(errorKey)
|
||||
{
|
||||
if (typeof this.errorsContainer !== "undefined") {
|
||||
this.errorsContainer.children('ul').append('<li>' + this.getError(errorKey) + '</li>');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get error message
|
||||
*
|
||||
* @return {String} message
|
||||
*/
|
||||
Dropify.prototype.getError = function(errorKey)
|
||||
{
|
||||
var error = this.settings.error[errorKey],
|
||||
value = '';
|
||||
|
||||
if (errorKey === 'fileSize') {
|
||||
value = this.settings.maxFileSize;
|
||||
} else if (errorKey === 'minWidth') {
|
||||
value = this.settings.minWidth;
|
||||
} else if (errorKey === 'maxWidth') {
|
||||
value = this.settings.maxWidth;
|
||||
} else if (errorKey === 'minHeight') {
|
||||
value = this.settings.minHeight;
|
||||
} else if (errorKey === 'maxHeight') {
|
||||
value = this.settings.maxHeight;
|
||||
} else if (errorKey === 'imageFormat') {
|
||||
value = this.settings.allowedFormats.join(', ');
|
||||
} else if (errorKey === 'fileExtension') {
|
||||
value = this.settings.allowedFileExtensions.join(', ');
|
||||
}
|
||||
|
||||
if (value !== '') {
|
||||
return error.replace('{{ value }}', value);
|
||||
}
|
||||
|
||||
return error;
|
||||
};
|
||||
|
||||
/**
|
||||
* Show the loader
|
||||
*/
|
||||
Dropify.prototype.showLoader = function()
|
||||
{
|
||||
if (typeof this.loader !== "undefined") {
|
||||
this.loader.show();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the loader
|
||||
*/
|
||||
Dropify.prototype.hideLoader = function()
|
||||
{
|
||||
if (typeof this.loader !== "undefined") {
|
||||
this.loader.hide();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Destroy dropify
|
||||
*/
|
||||
Dropify.prototype.destroy = function()
|
||||
{
|
||||
this.input.siblings().remove();
|
||||
this.input.unwrap();
|
||||
this.isInit = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Init dropify
|
||||
*/
|
||||
Dropify.prototype.init = function()
|
||||
{
|
||||
this.createElements();
|
||||
};
|
||||
|
||||
/**
|
||||
* Test if element is init
|
||||
*/
|
||||
Dropify.prototype.isDropified = function()
|
||||
{
|
||||
return this.isInit;
|
||||
};
|
||||
|
||||
$.fn[pluginName] = function(options) {
|
||||
this.each(function() {
|
||||
if (!$.data(this, pluginName)) {
|
||||
$.data(this, pluginName, new Dropify(this, options));
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
return Dropify;
|
||||
}));
|
||||
10
public/assets/plugins/dropify/js/dropify.min.js
vendored
Executable file
10
public/assets/plugins/dropify/js/dropify.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user