mirror of
https://gitlab.com/signalytic/client-external/streamline/streamline-emr.git
synced 2026-09-14 12:11:32 +00:00
updated streamline-setup v2
This commit is contained in:
@@ -0,0 +1,2 @@
|
||||
node_modules/
|
||||
npm-debug.log
|
||||
+256
@@ -0,0 +1,256 @@
|
||||
|
||||
|
||||
Dropify
|
||||
=========
|
||||
|
||||
Override your input files with style.
|
||||
|
||||
Demo here : [http://jeremyfagis.github.io/dropify](http://jeremyfagis.github.io/dropify/)
|
||||
|
||||
|
||||
## Dependency
|
||||
|
||||
[jQuery](https://github.com/jquery/jquery) is required to do the magic.
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
Clone the project in your workspace
|
||||
|
||||
$ git clone git@github.com:JeremyFagis/dropify.git
|
||||
$ cd dropify
|
||||
|
||||
Download packages
|
||||
|
||||
$ npm install
|
||||
|
||||
Compile assets
|
||||
|
||||
$ gulp build
|
||||
|
||||
|
||||
## Compilation
|
||||
|
||||
# All compilations and watch. You will have minified and not minified files.
|
||||
$ gulp
|
||||
|
||||
# Dev compilation (watch & no-minification)
|
||||
$ gulp --dev
|
||||
|
||||
# Prod compilation, you will have minified and not minified files
|
||||
$ gulp build
|
||||
|
||||
# Prod compilation, you will have only minified files
|
||||
$ gulp build --dev
|
||||
|
||||
|
||||
## NPM Package
|
||||
|
||||
[www.npmjs.com/package/dropify](https://www.npmjs.com/package/dropify)
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
You have to include __[dist/js/dropify.js](dist/js/dropify.js)__, __[dist/css/dropify.css](dist/css/dropify.css)__ and __dist/fonts/*__ to your project, then you juste have to init the jQuery plugin like that :
|
||||
|
||||
```javascript
|
||||
$('.dropify').dropify();
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
* __defaultFile:__ If there is a default file on the input. You can use options when you use the plugin or directly __data-default-file="url_of_your_file"__ on you DOM element (it's recommended).
|
||||
|
||||
```html
|
||||
<input type="file" class="dropify" data-default-file="url_of_your_file" />
|
||||
```
|
||||
|
||||
|
||||
* __height:__ Set the height of your dropify element. For exemple you want 300px height, you have to add the attribute __data-height="300"__ on your DOM element.
|
||||
|
||||
```html
|
||||
<input type="file" class="dropify" data-height="300" />
|
||||
```
|
||||
|
||||
|
||||
* __maxFileSize:__ Set the max filesize of the uploaded document. An error will be display if the file size is bigger than the option. You can use unit like K, M and G.
|
||||
|
||||
```html
|
||||
<input type="file" class="dropify" data-max-file-size="3M" />
|
||||
```
|
||||
|
||||
|
||||
* __minWidth:__ Set the min width allowed. An error will be display if the width is smaller than the option.
|
||||
|
||||
```html
|
||||
<input type="file" class="dropify" data-min-width="400" />
|
||||
```
|
||||
|
||||
|
||||
* __maxWidth:__ Set the max width allowed. An error will be display if the width is bigger than the option.
|
||||
|
||||
```html
|
||||
<input type="file" class="dropify" data-max-width="1000" />
|
||||
```
|
||||
|
||||
|
||||
* __minHeight:__ Set the min height allowed. An error will be display if the width is smaller than the option.
|
||||
|
||||
```html
|
||||
<input type="file" class="dropify" data-min-height="400" />
|
||||
```
|
||||
|
||||
|
||||
* __maxHeight:__ Set the max height allowed. An error will be display if the width is bigger than the option.
|
||||
|
||||
```html
|
||||
<input type="file" class="dropify" data-max-height="1000" />
|
||||
```
|
||||
|
||||
|
||||
* __disabled:__ You can disable the input if you add the attr __disabled="disabled"__.
|
||||
|
||||
```html
|
||||
<input type="file" class="dropify" disabled="disabled" />
|
||||
```
|
||||
|
||||
|
||||
* __showRemove:__ You can hide the remove button if you add the attr __data-show-remove="false"__. Default: true.
|
||||
|
||||
```html
|
||||
<input type="file" class="dropify" data-show-remove="false" />
|
||||
```
|
||||
|
||||
|
||||
* __showLoader:__ You can hide the loader if you add the attr __data-show-loader="false"__. Default: true.
|
||||
|
||||
```html
|
||||
<input type="file" class="dropify" data-show-loader="false" />
|
||||
```
|
||||
|
||||
|
||||
* __showErrors:__ You can hide errors if you add the attr __data-show-loader="false"__. Default: true.
|
||||
|
||||
```html
|
||||
<input type="file" class="dropify" data-show-errors="true" />
|
||||
```
|
||||
|
||||
|
||||
* __errorsPosition:__ You can choose where you want to display the errors, overlay or outside. Default: overlay.
|
||||
|
||||
```html
|
||||
<input type="file" class="dropify" data-errors-position="outside" />
|
||||
```
|
||||
|
||||
|
||||
* __allowedFormats:__ You can allow/deny pictures formats. If you add the attr __data-allowed-formats="portrait square"__ only portrait and square picture will be allowed. Default: ['portrait', 'square', 'landscape'].
|
||||
|
||||
```html
|
||||
<input type="file" class="dropify" data-allowed-formats="portrait square" />
|
||||
```
|
||||
|
||||
|
||||
* __messages:__ You can translate default messages. You juste have to add an options array when you init the plugin. This messages will be replaced in the __tpl__ option.
|
||||
|
||||
```javascript
|
||||
$('.dropify').dropify({
|
||||
messages: {
|
||||
'default': 'Drag and drop a file here or click',
|
||||
'replace': 'Drag and drop or click to replace',
|
||||
'remove': 'Remove',
|
||||
'error': 'Ooops, something wrong appended.'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
* __error:__ You can translate default errors messages. You juste have to add an options array when you init the plugin. __{{ value }}__ text will be replaced by the option.
|
||||
|
||||
```javascript
|
||||
$('.dropify').dropify({
|
||||
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).'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
* __tpl:__ You can update default template. You juste have to add an options array when you init the plugin.
|
||||
|
||||
```javascript
|
||||
$('.dropify').dropify({
|
||||
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="file-icon"></span> <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>'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
* __dropify.beforeClear:__ This event is called when you click on the "remove" button, just before clearing the Dropify. You can access to all the Dropify object properties using __element.xxxx__. See how to use it.
|
||||
|
||||
```javascript
|
||||
var drEvent = $('.dropify').dropify();
|
||||
|
||||
drEvent.on('dropify.beforeClear', function(event, element){
|
||||
return confirm("Do you really want to delete \"" + element.filename + "\" ?");
|
||||
});
|
||||
```
|
||||
|
||||
* __dropify.afterClear:__ This event is called after the Dropify is clear. You can access to all the Dropify object properties using __element.xxxx__. See how to use it.
|
||||
|
||||
```javascript
|
||||
var drEvent = $('.dropify').dropify();
|
||||
|
||||
drEvent.on('dropify.afterClear', function(event, element){
|
||||
alert('File deleted');
|
||||
});
|
||||
```
|
||||
|
||||
* __dropify.errors:__ This event is called when there is one or more error during process. See how to use it.
|
||||
|
||||
```javascript
|
||||
var drEvent = $('.dropify').dropify();
|
||||
|
||||
drEvent.on('dropify.errors', function(event, element){
|
||||
alert('Has Errors!');
|
||||
});
|
||||
```
|
||||
|
||||
* __dropify.error.xxxxx:__ In addition to the event __dropify.errors:__, you can bind errors events one by one. See how to use it.
|
||||
|
||||
```javascript
|
||||
var drEvent = $('.dropify').dropify();
|
||||
|
||||
drEvent.on('dropify.error.fileSize', function(event, element){
|
||||
alert('Filesize error message!');
|
||||
});
|
||||
drEvent.on('dropify.error.minWidth', function(event, element){
|
||||
alert('Min width error message!');
|
||||
});
|
||||
drEvent.on('dropify.error.maxWidth', function(event, element){
|
||||
alert('Max width error message!');
|
||||
});
|
||||
drEvent.on('dropify.error.minHeight', function(event, element){
|
||||
alert('Min height error message!');
|
||||
});
|
||||
drEvent.on('dropify.error.maxHeight', function(event, element){
|
||||
alert('Max height error message!');
|
||||
});
|
||||
drEvent.on('dropify.error.imageFormat', function(event, element){
|
||||
alert('Image format error message!');
|
||||
});
|
||||
```
|
||||
+1077
File diff suppressed because it is too large
Load Diff
Vendored
Executable
+388
@@ -0,0 +1,388 @@
|
||||
/*!
|
||||
* =============================================================
|
||||
* dropify v0.2.0 - Override your input files with style.
|
||||
* https://github.com/JeremyFagis/dropify
|
||||
*
|
||||
* (c) 2016 - 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, .dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-filename 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-filename span.file-icon {
|
||||
margin-right: 2px; }
|
||||
.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); } }
|
||||
Vendored
Executable
+8
File diff suppressed because one or more lines are too long
Vendored
Executable
BIN
Binary file not shown.
Vendored
Executable
+13
@@ -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 |
Vendored
Executable
BIN
Binary file not shown.
Vendored
Executable
BIN
Binary file not shown.
+632
@@ -0,0 +1,632 @@
|
||||
/*!
|
||||
* =============================================================
|
||||
* dropify v0.2.0 - Override your input files with style.
|
||||
* https://github.com/JeremyFagis/dropify
|
||||
*
|
||||
* (c) 2016 - 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,
|
||||
errorsPosition: 'overlay',
|
||||
allowedFormats: ['portrait', 'square', 'landscape'],
|
||||
messages: {
|
||||
'default': 'Drag and drop a file here or click',
|
||||
'replace': 'Drag and drop or click to replace',
|
||||
'remove': 'Remove',
|
||||
'error': 'Ooops, something wrong appended.'
|
||||
},
|
||||
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).'
|
||||
},
|
||||
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="file-icon"></span> <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.imgFileExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp'];
|
||||
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(' ');
|
||||
}
|
||||
|
||||
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(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);
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
this.errorsEvent.errors = [];
|
||||
|
||||
this.checkFileSize();
|
||||
|
||||
reader.onload = function(_file) {
|
||||
srcBase64 = _file.target.result;
|
||||
if (this.isImage()) {
|
||||
image.src = _file.target.result;
|
||||
image.onload = function() {
|
||||
_this.setFileDimensions(this.width, this.height);
|
||||
_this.validateImage();
|
||||
_this.input.trigger(eventFileReady, [srcBase64]);
|
||||
};
|
||||
} else {
|
||||
this.input.trigger(eventFileReady, [srcBase64]);
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
this.input.on('dropify.fileReady', this.onFileReady);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* On file ready to show
|
||||
*
|
||||
* @param {Event} event
|
||||
* @param {String} src
|
||||
*/
|
||||
Dropify.prototype.onFileReady = function(event, src)
|
||||
{
|
||||
this.input.off('dropify.fileReady', this.onFileReady);
|
||||
|
||||
if (this.errorsEvent.errors.length === 0) {
|
||||
this.setPreview(src, this.file.name);
|
||||
} 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'); }, 1000);
|
||||
}
|
||||
|
||||
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(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 (this.isImage() === 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.imgFileExtensions.indexOf(this.getFileType()) != "-1") {
|
||||
return true;
|
||||
}
|
||||
|
||||
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.maxFileSizeToByte() !== 0 && this.file.size > this.maxFileSizeToByte()) {
|
||||
this.pushError("fileSize");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert filesize to byte.
|
||||
*
|
||||
* @return {Int} value
|
||||
*/
|
||||
Dropify.prototype.maxFileSizeToByte = function()
|
||||
{
|
||||
var value = 0;
|
||||
|
||||
if (this.settings.maxFileSize !== 0) {
|
||||
var unit = this.settings.maxFileSize.slice(-1).toUpperCase(),
|
||||
kb = 1024,
|
||||
mb = kb * 1024,
|
||||
gb = mb * 1024;
|
||||
|
||||
if (unit === 'K') {
|
||||
value = parseFloat(this.settings.maxFileSize) * kb;
|
||||
} else if (unit === 'M') {
|
||||
value = parseFloat(this.settings.maxFileSize) * mb;
|
||||
} else if (unit === 'G') {
|
||||
value = parseFloat(this.settings.maxFileSize) * 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(' ');
|
||||
}
|
||||
|
||||
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;
|
||||
}));
|
||||
Vendored
Executable
+10
File diff suppressed because one or more lines are too long
+82
@@ -0,0 +1,82 @@
|
||||
var gulp = require('gulp'),
|
||||
$ = require('gulp-load-plugins')(),
|
||||
meta = require('./package.json');
|
||||
|
||||
var argv = require('minimist')(process.argv.slice(2));
|
||||
|
||||
var jsDir = 'src/js/',
|
||||
sassDir = 'src/sass/',
|
||||
fontsDir = 'src/fonts/',
|
||||
distDir = 'dist',
|
||||
banner = [
|
||||
'/*!',
|
||||
' * =============================================================',
|
||||
' * <%= name %> v<%= version %> - <%= description %>',
|
||||
' * <%= homepage %>',
|
||||
' *',
|
||||
' * (c) 2016 - <%= author %>',
|
||||
' * =============================================================',
|
||||
' */\n\n'
|
||||
].join('\n'),
|
||||
umdDeps = {
|
||||
dependencies: function() {
|
||||
return [
|
||||
{
|
||||
name: '$',
|
||||
amd: 'jquery',
|
||||
cjs: 'jquery',
|
||||
global: 'jQuery',
|
||||
param: '$'
|
||||
}
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
var onError = function (err) {
|
||||
$.util.beep();
|
||||
console.log(err.toString());
|
||||
this.emit('end');
|
||||
};
|
||||
|
||||
gulp.task('fonts', function() {
|
||||
return gulp.src(fontsDir + '**/*')
|
||||
.pipe(gulp.dest(distDir + "/fonts"));
|
||||
});
|
||||
|
||||
gulp.task('sass', function() {
|
||||
return gulp.src(sassDir + '*.scss')
|
||||
.pipe($.plumber({ errorHandler: onError }))
|
||||
.pipe($.sass())
|
||||
.pipe($.autoprefixer())
|
||||
|
||||
.pipe($.header(banner, meta))
|
||||
.pipe(gulp.dest(distDir + "/css"))
|
||||
|
||||
.pipe($.if(!argv.dev, $.minifyCss()))
|
||||
.pipe($.if(!argv.dev, $.rename(meta.name + '.min.css')))
|
||||
.pipe($.if(!argv.dev, gulp.dest(distDir + "/css")));
|
||||
});
|
||||
|
||||
gulp.task('scripts', function() {
|
||||
return gulp.src([jsDir + '*.js'])
|
||||
.pipe($.plumber({ errorHandler: onError }))
|
||||
.pipe(gulp.dest(distDir + "/js"))
|
||||
.pipe($.umd(umdDeps))
|
||||
|
||||
.pipe($.header(banner, meta))
|
||||
.pipe($.rename(meta.name + '.js'))
|
||||
.pipe(gulp.dest(distDir + "/js"))
|
||||
|
||||
.pipe($.if(!argv.dev, $.uglify()))
|
||||
.pipe($.if(!argv.dev, $.header(banner, meta)))
|
||||
.pipe($.if(!argv.dev, $.rename(meta.name + '.min.js')))
|
||||
.pipe($.if(!argv.dev, gulp.dest(distDir + "/js")));
|
||||
});
|
||||
|
||||
|
||||
gulp.task('default', ['sass', 'scripts', 'fonts'], function() {
|
||||
gulp.watch(jsDir + '**/*.js', ['scripts']);
|
||||
gulp.watch(sassDir + '**/*.scss', ['sass']);
|
||||
});
|
||||
|
||||
gulp.task('build', ['sass', 'scripts', 'fonts']);
|
||||
+133
@@ -0,0 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Dropify — Override your input files with style.</title>
|
||||
<meta name="description" content="">
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700,900|Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="dist/css/dropify.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/JeremyFagis/dropify" target="_blank"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1000;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
|
||||
<header id="header">
|
||||
<hgroup>
|
||||
<h1>Dropify</h1>
|
||||
<h2>Override your input files with style</h2>
|
||||
</hgroup>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-3"></div>
|
||||
<div class="col-sm-6">
|
||||
<h2>Before</h2>
|
||||
<label for="input-file-before">Basic HTML input file</label>
|
||||
<input type="file" id="input-file-before" />
|
||||
<hr class="big" />
|
||||
<h2>Now</h2>
|
||||
<label for="input-file-now">Your so fresh input file — Default version</label>
|
||||
<input type="file" id="input-file-now" class="dropify" />
|
||||
<br />
|
||||
<label for="input-file-now-custom-1">You can add a default value</label>
|
||||
<input type="file" id="input-file-now-custom-1" class="dropify" data-default-file="src/images/test-image-1.jpg" />
|
||||
<br />
|
||||
<label for="input-file-now-custom-2">You can set the height</label>
|
||||
<input type="file" id="input-file-now-custom-2" class="dropify" data-height="500" />
|
||||
<br />
|
||||
<label for="input-file-now-custom-3">You can combine options</label>
|
||||
<input type="file" id="input-file-now-custom-3" class="dropify" data-height="500" data-default-file="src/images/test-image-2.jpg" />
|
||||
<br />
|
||||
<label for="input-file-now-disabled-1">You can disabled the input</label>
|
||||
<input type="file" id="input-file-now-disabled-1" class="dropify" disabled="disabled" />
|
||||
<br />
|
||||
<label for="input-file-now-disabled-2">Also with a default file</label>
|
||||
<input type="file" id="input-file-now-disabled-2" class="dropify" disabled="disabled" data-default-file="src/images/test-image-1.jpg" />
|
||||
<br />
|
||||
<label for="input-file-max-fs">You can add a max file size</label>
|
||||
<input type="file" id="input-file-max-fs" class="dropify" data-max-file-size="2M" />
|
||||
<br />
|
||||
<label for="input-file-disable-remove">You can disable remove button</label>
|
||||
<input type="file" id="input-file-disable-remove" class="dropify" data-show-remove="false" />
|
||||
<br />
|
||||
<label for="input-file-events">You can use events</label>
|
||||
<input type="file" id="input-file-events" class="dropify-event" data-default-file="src/images/test-image-1.jpg" />
|
||||
<br />
|
||||
<label for="input-file-to-destroy">You can destroy it <button type="button" id="toggleDropify">Init/Destroy</button></label>
|
||||
<input type="file" id="input-file-to-destroy" class="dropify" data-default-file="src/images/test-image-1.jpg" />
|
||||
<br />
|
||||
<label for="input-file-to-destroy">Multiple options are available</label>
|
||||
<input type="file" id="input-file-to-destroy" class="dropify" data-allowed-formats="portrait square" data-max-file-size="2M" data-max-height="2000" />
|
||||
<p class="help">Only portrait or square images, 2M max and 2000px max-height.</p>
|
||||
<br />
|
||||
<h2>French one</h2>
|
||||
<label for="input-file-french-1">"Et voilà"</label>
|
||||
<input type="file" id="input-file-french-1" class="dropify-fr" data-default-file="" />
|
||||
<br />
|
||||
<label for="input-file-french-2">"Avec options"</label>
|
||||
<input type="file" id="input-file-french-2" class="dropify-fr" data-height="350" data-default-file="src/images/test-image-2.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-xs-6 no-padding-bottom">
|
||||
<a href="https://github.com/JeremyFagis/dropify" target="_blank">Github repository</a>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6 text-right no-padding-bottom">2016 © <a href="http://www.fagis.fr" target="_blank">Jeremy FAGIS</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
<script src="dist/js/dropify.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
// Basic
|
||||
$('.dropify').dropify();
|
||||
|
||||
// Translated
|
||||
$('.dropify-fr').dropify({
|
||||
messages: {
|
||||
default: 'Glissez-déposez un fichier ici ou cliquez',
|
||||
replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
|
||||
remove: 'Supprimer',
|
||||
error: 'Désolé, le fichier trop volumineux'
|
||||
}
|
||||
});
|
||||
|
||||
// Used events
|
||||
var drEvent = $('#input-file-events').dropify();
|
||||
|
||||
drEvent.on('dropify.beforeClear', function(event, element){
|
||||
return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
|
||||
});
|
||||
|
||||
drEvent.on('dropify.afterClear', function(event, element){
|
||||
alert('File deleted');
|
||||
});
|
||||
|
||||
drEvent.on('dropify.errors', function(event, element){
|
||||
console.log('Has Errors');
|
||||
});
|
||||
|
||||
var drDestroy = $('#input-file-to-destroy').dropify();
|
||||
drDestroy = drDestroy.data('dropify')
|
||||
$('#toggleDropify').on('click', function(e){
|
||||
e.preventDefault();
|
||||
if (drDestroy.isDropified()) {
|
||||
drDestroy.destroy();
|
||||
} else {
|
||||
drDestroy.init();
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "dropify",
|
||||
"description": "Override your input files with style.",
|
||||
"version": "0.2.0",
|
||||
"homepage": "https://github.com/JeremyFagis/dropify",
|
||||
"author": "Jeremy FAGIS <jeremy@fagis.fr> (http://fagis.fr)",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/JeremyFagis/dropify"
|
||||
},
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/JeremyFagis/dropify/issues"
|
||||
},
|
||||
"main": "dist/js/dropify.js",
|
||||
"dependencies": {
|
||||
"jquery": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gulp": "^3.9.0",
|
||||
"gulp-autoprefixer": "^3.1.0",
|
||||
"gulp-header": "^1.7.1",
|
||||
"gulp-load-plugins": "^1.2.0",
|
||||
"gulp-minify-css": "1.2.3",
|
||||
"gulp-plumber": "^1.0.1",
|
||||
"gulp-sass": "^2.1.1",
|
||||
"gulp-uglify": "^1.5.1",
|
||||
"gulp-util": "^3.0.7",
|
||||
"gulp-umd": "^0.2.0",
|
||||
"gulp-wrap-js": "^0.4.1",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"minimist": "^1.2.0",
|
||||
"gulp-if": "^2.0.0"
|
||||
}
|
||||
}
|
||||
Vendored
Executable
BIN
Binary file not shown.
Vendored
Executable
+13
@@ -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 |
Vendored
Executable
BIN
Binary file not shown.
Vendored
Executable
BIN
Binary file not shown.
Vendored
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Vendored
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Vendored
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
+611
@@ -0,0 +1,611 @@
|
||||
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,
|
||||
errorsPosition: 'overlay',
|
||||
allowedFormats: ['portrait', 'square', 'landscape'],
|
||||
messages: {
|
||||
'default': 'Drag and drop a file here or click',
|
||||
'replace': 'Drag and drop or click to replace',
|
||||
'remove': 'Remove',
|
||||
'error': 'Ooops, something wrong appended.'
|
||||
},
|
||||
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).'
|
||||
},
|
||||
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="file-icon"></span> <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.imgFileExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp'];
|
||||
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(' ');
|
||||
}
|
||||
|
||||
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(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);
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
this.errorsEvent.errors = [];
|
||||
|
||||
this.checkFileSize();
|
||||
|
||||
reader.onload = function(_file) {
|
||||
srcBase64 = _file.target.result;
|
||||
if (this.isImage()) {
|
||||
image.src = _file.target.result;
|
||||
image.onload = function() {
|
||||
_this.setFileDimensions(this.width, this.height);
|
||||
_this.validateImage();
|
||||
_this.input.trigger(eventFileReady, [srcBase64]);
|
||||
};
|
||||
} else {
|
||||
this.input.trigger(eventFileReady, [srcBase64]);
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
this.input.on('dropify.fileReady', this.onFileReady);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* On file ready to show
|
||||
*
|
||||
* @param {Event} event
|
||||
* @param {String} src
|
||||
*/
|
||||
Dropify.prototype.onFileReady = function(event, src)
|
||||
{
|
||||
this.input.off('dropify.fileReady', this.onFileReady);
|
||||
|
||||
if (this.errorsEvent.errors.length === 0) {
|
||||
this.setPreview(src, this.file.name);
|
||||
} 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'); }, 1000);
|
||||
}
|
||||
|
||||
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(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 (this.isImage() === 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.imgFileExtensions.indexOf(this.getFileType()) != "-1") {
|
||||
return true;
|
||||
}
|
||||
|
||||
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.maxFileSizeToByte() !== 0 && this.file.size > this.maxFileSizeToByte()) {
|
||||
this.pushError("fileSize");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert filesize to byte.
|
||||
*
|
||||
* @return {Int} value
|
||||
*/
|
||||
Dropify.prototype.maxFileSizeToByte = function()
|
||||
{
|
||||
var value = 0;
|
||||
|
||||
if (this.settings.maxFileSize !== 0) {
|
||||
var unit = this.settings.maxFileSize.slice(-1).toUpperCase(),
|
||||
kb = 1024,
|
||||
mb = kb * 1024,
|
||||
gb = mb * 1024;
|
||||
|
||||
if (unit === 'K') {
|
||||
value = parseFloat(this.settings.maxFileSize) * kb;
|
||||
} else if (unit === 'M') {
|
||||
value = parseFloat(this.settings.maxFileSize) * mb;
|
||||
} else if (unit === 'G') {
|
||||
value = parseFloat(this.settings.maxFileSize) * 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(' ');
|
||||
}
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
Vendored
Executable
+29
@@ -0,0 +1,29 @@
|
||||
@font-face {
|
||||
font-family: 'dropify';
|
||||
src: url('#{$dropify-font-path}/dropify.eot');
|
||||
src: url('#{$dropify-font-path}/dropify.eot#iefix') format('embedded-opentype'),
|
||||
url('#{$dropify-font-path}/dropify.woff') format('woff'),
|
||||
url('#{$dropify-font-path}/dropify.ttf') format('truetype'),
|
||||
url('#{$dropify-font-path}/dropify.svg#dropify') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="dropify-font-"]:before, [class*=" dropify-font-"]:before, .dropify-font: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 { content: '\e800'; }
|
||||
.dropify-font-file:before { content: '\e801'; }
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
@import "demo/reset";
|
||||
@import "demo/variables";
|
||||
@import "demo/helpers/mixins";
|
||||
@import "demo/helpers/grid";
|
||||
@import "demo/helpers/shortcuts";
|
||||
@import "demo/grid";
|
||||
@import "demo/typo";
|
||||
|
||||
body {
|
||||
background: $background-color;
|
||||
font-family: $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
line-height: $base-line-height;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
header#header {
|
||||
background: $main-color;
|
||||
color: #FFD270;
|
||||
font-family: $headings-font-family;
|
||||
font-weight: 700;
|
||||
letter-spacing: $headings-letter-spacing;
|
||||
text-align: center;
|
||||
font-size: 70px;
|
||||
line-height: 60px;
|
||||
padding: 50px 30px;
|
||||
margin: 0 0 30px 0;
|
||||
|
||||
h1 {
|
||||
color: #FFD270;
|
||||
font-size: 70px;
|
||||
line-height: 90px;
|
||||
font-weight: 700;
|
||||
|
||||
&::after {
|
||||
background: transparentize(#FFD270, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: transparentize(#FFD270, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
footer#footer {
|
||||
background: #DDD;
|
||||
color: #888;
|
||||
padding: 30px 0;
|
||||
margin-top: 30px;
|
||||
|
||||
a {
|
||||
&, &:visited {
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
p.help {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#toggleDropify {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
background: #DDD;
|
||||
color: #888;
|
||||
font-weight: bold;
|
||||
border: 0;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
margin-left: 10px;
|
||||
transition: background 0.1s linear;
|
||||
|
||||
&:hover {
|
||||
background: #EEE;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
header#header {
|
||||
padding: 30px 15px;
|
||||
|
||||
h1 {
|
||||
font-size: 44px;
|
||||
line-height: 70px;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Vendored
Executable
+61
@@ -0,0 +1,61 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: $container-max-width;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-left: ($grid-gutter-width / 2);
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
|
||||
.row {
|
||||
margin-left: ($grid-gutter-width / -2);
|
||||
margin-right: ($grid-gutter-width / -2);
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: ($grid-gutter-width / 2);
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
padding-bottom: $grid-gutter-width;
|
||||
|
||||
&.no-padding-bottom, &.no-pb {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11 {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.col-xs-1 { width: percentage((1 / $grid-columns)); }
|
||||
.col-xs-2 { width: percentage((2 / $grid-columns)); }
|
||||
.col-xs-3 { width: percentage((3 / $grid-columns)); }
|
||||
.col-xs-4 { width: percentage((4 / $grid-columns)); }
|
||||
.col-xs-5 { width: percentage((5 / $grid-columns)); }
|
||||
.col-xs-6 { width: percentage((6 / $grid-columns)); }
|
||||
.col-xs-7 { width: percentage((7 / $grid-columns)); }
|
||||
.col-xs-8 { width: percentage((8 / $grid-columns)); }
|
||||
.col-xs-9 { width: percentage((9 / $grid-columns)); }
|
||||
.col-xs-10 { width: percentage((10/ $grid-columns)); }
|
||||
.col-xs-11 { width: percentage((11/ $grid-columns)); }
|
||||
.col-xs-12 { width: 100%; }
|
||||
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
@include row-sizes('sm');
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: $screen-md) {
|
||||
@include row-sizes('md');
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: $screen-lg-desktop) {
|
||||
@include row-sizes('lg');
|
||||
}
|
||||
Vendored
Executable
+527
@@ -0,0 +1,527 @@
|
||||
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
|
||||
* Known issue: no IE 6 support.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
|
||||
* `em` units.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-size: 100%; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `font-family` inconsistency between `textarea` and other form
|
||||
* elements.
|
||||
*/
|
||||
|
||||
html,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address margins handled incorrectly in IE 6/7.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address font sizes and margins set differently in IE 6/7.
|
||||
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
|
||||
* and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
margin: 0.83em 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.17em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
margin: 1.33em 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.83em;
|
||||
margin: 1.67em 0;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.67em;
|
||||
margin: 2.33em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
* Known issue: no IE 6/7 normalization.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 6/7/8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address margins set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
p,
|
||||
pre {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
_font-family: 'courier new', monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address CSS quotes not supported in IE 6/7.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `quotes` property not supported in Safari 4.
|
||||
*/
|
||||
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Lists
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margins set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
dl,
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 0 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address paddings set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
padding: 0 0 0 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct list images handled incorrectly in IE 7.
|
||||
*/
|
||||
|
||||
nav ul,
|
||||
nav ol {
|
||||
list-style: none;
|
||||
list-style-image: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
|
||||
* 2. Improve image quality when scaled in IE 7.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0; /* 1 */
|
||||
-ms-interpolation-mode: bicubic; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct margin displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited in IE 6/7/8/9.
|
||||
* 2. Correct text not wrapping in Firefox 3.
|
||||
* 3. Correct alignment displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0;
|
||||
white-space: normal; /* 2 */
|
||||
*margin-left: -7px; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct font size not being inherited in all browsers.
|
||||
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
|
||||
* and Chrome.
|
||||
* 3. Improve appearance and consistency in all browsers.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
vertical-align: baseline; /* 3 */
|
||||
*vertical-align: middle; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
|
||||
* Known issue: inner spacing remains in IE 6.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
*overflow: visible; /* 4 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address box sizing set to content-box in IE 8/9.
|
||||
* 2. Remove excess padding in IE 8/9.
|
||||
* 3. Remove excess padding in IE 7.
|
||||
* Known issue: excess padding remains in IE 6.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
*height: 13px; /* 3 */
|
||||
*width: 13px; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 3+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
Vendored
Executable
+13
@@ -0,0 +1,13 @@
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
*,*::before,*::after,*:before,*:after {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@import "normalize";
|
||||
Vendored
Executable
+73
@@ -0,0 +1,73 @@
|
||||
a {
|
||||
&, &:visited {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: $headings-font-family;
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
color: $headings-color;
|
||||
letter-spacing: $headings-letter-spacing;
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: $headings-small-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $headings-color;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3 , h4 {
|
||||
margin-top: $headings-margin;
|
||||
margin-bottom: ($headings-margin / 2);
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $font-size-h1;
|
||||
text-transform: $headings-text-transform;
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
position: relative;
|
||||
padding: 0 0 20px 0;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background-color: $headings-color;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $font-size-h2;
|
||||
margin-bottom: $headings-margin;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $font-size-h3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $font-size-h4;
|
||||
}
|
||||
|
||||
Vendored
Executable
+58
@@ -0,0 +1,58 @@
|
||||
$background-color: #F8F8F8 !default;
|
||||
$base-font-family: "Roboto", "Helvetica Neue", "Helvetica" !default;
|
||||
$base-font-size: 15px !default;
|
||||
$base-line-height: $base-font-size * 1.8 !default;
|
||||
$text-color: #666 !default;
|
||||
$base-margin: 20px !default;
|
||||
$bold-font-weight: 700 !default;
|
||||
|
||||
$main-color: #1C252C !default;
|
||||
|
||||
$headings-font-family: "Roboto Condensed", "Helvetica Neue", "Helvetica" !default;
|
||||
$headings-font-weight: 400 !default;
|
||||
$headings-line-height: 1.4 !default;
|
||||
$headings-letter-spacing: -0.04em !default;
|
||||
$headings-text-transform: uppercase !default;
|
||||
$headings-color: #444 !default;
|
||||
$headings-small-color: lighten($text-color, 30%) !default;
|
||||
$headings-margin: $base-margin !default;
|
||||
|
||||
$grid-columns: 12 !default;
|
||||
$grid-gutter-width: 30px !default;
|
||||
|
||||
|
||||
$font-size-h1: 30px !default;
|
||||
$font-size-h2: 26px !default;
|
||||
$font-size-h3: 24px !default;
|
||||
$font-size-h4: 20px !default;
|
||||
|
||||
|
||||
///////////////////////////
|
||||
/// MEDIA QUERIES
|
||||
///////////////////////////
|
||||
$screen-xs: 480px !default;
|
||||
$screen-sm: 768px !default;
|
||||
$screen-md: 992px !default;
|
||||
$screen-lg: 1140px !default;
|
||||
|
||||
$screen-xs-min: $screen-xs !default;
|
||||
$screen-phone: $screen-xs-min !default;
|
||||
|
||||
$screen-sm-min: $screen-sm !default;
|
||||
$screen-tablet: $screen-sm-min !default;
|
||||
|
||||
$screen-md-min: $screen-md !default;
|
||||
$screen-desktop: $screen-md-min !default;
|
||||
|
||||
$screen-lg-min: $screen-lg !default;
|
||||
$screen-lg-desktop: $screen-lg-min !default;
|
||||
|
||||
$screen-xs-max: ($screen-sm-min - 1) !default;
|
||||
$screen-sm-max: ($screen-md-min - 1) !default;
|
||||
$screen-md-max: ($screen-lg-min - 1) !default;
|
||||
|
||||
$container-tablet: ((720px + $grid-gutter-width)) !default;
|
||||
$container-desktop: ((940px + $grid-gutter-width)) !default;
|
||||
$container-lg-desktop: ((1140px + $grid-gutter-width)) !default;
|
||||
|
||||
$container-max-width: $screen-lg !default;
|
||||
Vendored
Executable
+24
@@ -0,0 +1,24 @@
|
||||
@mixin row-sizes($preffix) {
|
||||
|
||||
@for $i from 1 through $grid-columns - 1 {
|
||||
// Float
|
||||
.col-#{ $preffix }-#{ $i } { float: left; }
|
||||
|
||||
// Size
|
||||
.col-#{ $preffix }-#{ $i } { width: percentage(($i / $grid-columns)); }
|
||||
|
||||
// Push
|
||||
.col-#{ $preffix }-push-#{ $i } { left: percentage(($i / $grid-columns)); }
|
||||
|
||||
// Pull
|
||||
.col-#{ $preffix }-pull-#{ $i } { right: percentage(($i / $grid-columns)); }
|
||||
|
||||
// Offset
|
||||
.col-#{ $preffix }-offset-#{ $i } { margin-left: percentage(($i / $grid-columns)); }
|
||||
}
|
||||
|
||||
.col-#{ $preffix }-push-0 { left: auto; }
|
||||
.col-#{ $preffix }-pull-0 { right: auto; }
|
||||
.col-#{ $preffix }-offset-0 { margin-left: 0; }
|
||||
.col-#{ $preffix }-12 { width: 100%; }
|
||||
}
|
||||
Vendored
Executable
+13
@@ -0,0 +1,13 @@
|
||||
@mixin clearfix() {
|
||||
*zoom: 1;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
Vendored
Executable
+57
@@ -0,0 +1,57 @@
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
.pull-left {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide-text {
|
||||
font: #{0/0} a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.strong, .bold {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: $base-line-height;
|
||||
margin-bottom: $base-line-height;
|
||||
border: 0;
|
||||
border-top: 1px solid #CCC;
|
||||
|
||||
&.big {
|
||||
border-top: 2px solid #DDD;
|
||||
margin-top: $base-line-height*2;
|
||||
margin-bottom: $base-line-height*2;
|
||||
}
|
||||
}
|
||||
|
||||
Vendored
Executable
+482
@@ -0,0 +1,482 @@
|
||||
$dropify-width: 100% !default;
|
||||
$dropify-height: 200px !default;
|
||||
$dropify-font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial" !default;
|
||||
$dropify-font-size: 14px !default;
|
||||
$dropify-line-height: 22px !default;
|
||||
$dropify-text-color: #777 !default;
|
||||
$dropify-icon-color: #CCC !default;
|
||||
$dropify-background: #FFF !default;
|
||||
$dropify-border-size: 2px !default;
|
||||
$dropify-border-color: #E5E5E5 !default;
|
||||
$dropify-infos-background: transparentize(#000, 0.3) !default;
|
||||
$dropify-infos-color: #FFF !default;
|
||||
$dropify-clear-color: #FFF !default;
|
||||
$dropify-error-color: #F34141 !default;
|
||||
$dropify-stripes: #F6F6F6 !default;
|
||||
$dropify-loader-size: 20px !default;
|
||||
$dropify-loader-border: 1px !default;
|
||||
$dropify-loader-fill: #CCC !default;
|
||||
$dropify-loader-trace: #777 !default;
|
||||
$dropify-font-path: "../fonts" !default;
|
||||
|
||||
@import "dropify-font";
|
||||
|
||||
.dropify-wrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
width: $dropify-width;
|
||||
max-width: 100%;
|
||||
height: $dropify-height;
|
||||
padding: 5px 10px;
|
||||
font-family: $dropify-font-family;
|
||||
font-size: $dropify-font-size;
|
||||
line-height: $dropify-line-height;
|
||||
color: $dropify-text-color;
|
||||
background-color: $dropify-background;
|
||||
background-image: none;
|
||||
text-align: center;
|
||||
border: $dropify-border-size solid $dropify-border-color;
|
||||
transition: border-color 0.15s linear;
|
||||
|
||||
&:hover {
|
||||
background-size: 30px 30px;
|
||||
background-image: linear-gradient(
|
||||
-45deg,
|
||||
$dropify-stripes 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
$dropify-stripes 50%,
|
||||
$dropify-stripes 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
animation: stripes 2s linear infinite;
|
||||
}
|
||||
|
||||
&.has-preview {
|
||||
.dropify-clear {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-error {
|
||||
border-color: $dropify-error-color;
|
||||
|
||||
.dropify-message .dropify-error, {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dropify-errors-container {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-image: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.dropify-message {
|
||||
opacity: 0.5;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.dropify-infos-message {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.dropify-message {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
span.file-icon {
|
||||
@extend .dropify-font;
|
||||
@extend .dropify-font-upload;
|
||||
font-size: 50px;
|
||||
color: $dropify-icon-color;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 5px 0 0 0;
|
||||
|
||||
&.dropify-error {
|
||||
color: $dropify-error-color;
|
||||
font-weight: bold;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropify-clear {
|
||||
display: none;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 7;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: none;
|
||||
border: 2px solid $dropify-clear-color;
|
||||
text-transform: uppercase;
|
||||
font-family: $dropify-font-family;
|
||||
font-size: 11px;
|
||||
padding: 4px 8px;
|
||||
font-weight: bold;
|
||||
color: $dropify-clear-color;
|
||||
transition: all 0.15s linear;
|
||||
|
||||
&:hover {
|
||||
background: transparentize($dropify-clear-color, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.dropify-preview {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-color: $dropify-background;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
|
||||
|
||||
.dropify-render {
|
||||
img {
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
background-color: $dropify-background;
|
||||
transition: border-color 0.15s linear;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 70px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.dropify-extension {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 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-infos {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
background: $dropify-infos-background;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s linear;
|
||||
|
||||
.dropify-infos-inner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(0, -40%);
|
||||
backface-visibility: hidden;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: $dropify-infos-color;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
font-weight: bold;
|
||||
|
||||
&.dropify-filename {
|
||||
span.file-icon {
|
||||
@extend .dropify-font;
|
||||
@extend .dropify-font-empty;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropify-infos-message {
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
opacity: 0.5;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
background: $dropify-infos-color;
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dropify-clear {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dropify-preview {
|
||||
.dropify-infos {
|
||||
opacity: 1;
|
||||
|
||||
.dropify-infos-inner {
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.touch-fallback {
|
||||
height: auto !important;
|
||||
|
||||
&:hover {
|
||||
background-image: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.dropify-preview {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
.dropify-render {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
.dropify-font-file {
|
||||
position: relative;
|
||||
transform: translate(0, 0);
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&::before {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.dropify-infos {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
background: transparent;
|
||||
|
||||
.dropify-infos-inner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
transform: translate(0, 0);
|
||||
padding: 5px 90px 5px 0;
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: $dropify-text-color;
|
||||
text-align: left;
|
||||
line-height: 25px;
|
||||
|
||||
&.dropify-filename {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.dropify-infos-message {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropify-message {
|
||||
transform: translate(0, 0);
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.dropify-clear {
|
||||
top: auto;
|
||||
bottom: 23px;
|
||||
opacity: 1;
|
||||
border-color: transparentize($dropify-text-color, 0.3);
|
||||
color: $dropify-text-color;
|
||||
}
|
||||
|
||||
&.has-preview {
|
||||
.dropify-message {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dropify-preview {
|
||||
.dropify-infos {
|
||||
.dropify-infos-inner {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropify-loader {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
display: none;
|
||||
z-index: 9;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: $dropify-loader-size;
|
||||
height: $dropify-loader-size;
|
||||
animation: rotate 0.6s linear infinite;
|
||||
border-radius: 100%;
|
||||
border-top: $dropify-loader-border solid $dropify-loader-fill;
|
||||
border-bottom: $dropify-loader-border solid $dropify-loader-trace;
|
||||
border-left: $dropify-loader-border solid $dropify-loader-fill;
|
||||
border-right: $dropify-loader-border solid $dropify-loader-trace;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.dropify-errors-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
background: transparentize($dropify-error-color, 0.2);
|
||||
text-align: left;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0s linear 0.15s,opacity 0.15s linear;
|
||||
|
||||
ul {
|
||||
padding: 10px 20px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
li {
|
||||
margin-left: 20px;
|
||||
color: #FFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&.visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
& ~ .dropify-errors-container {
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 15px 0;
|
||||
|
||||
li {
|
||||
margin-left: 20px;
|
||||
color: $dropify-error-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes stripes {
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: 60px 30px; }
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotateZ(-360deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user