initial
This commit is contained in:
+2
@@ -0,0 +1,2 @@
|
||||
node_modules/
|
||||
npm-debug.log
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2017 Jeremy FAGIS
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+276
@@ -0,0 +1,276 @@
|
||||
|
||||
|
||||
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)
|
||||
|
||||
$ npm install dropify
|
||||
|
||||
## Bower Package
|
||||
|
||||
$ bower install 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 just 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 height 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 height 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" />
|
||||
```
|
||||
|
||||
|
||||
* __allowedFileExtensions:__ You can allow only some file extensions. If you add the attr __data-allowed-file-extensions="pdf png psd"__ only PDF, PNG and PSD files will be allowed. By default, everything is allowed. Default: ['*'].
|
||||
|
||||
```html
|
||||
<input type="file" class="dropify" data-allowed-file-extensions="pdf png psd" />
|
||||
```
|
||||
|
||||
|
||||
* __maxFileSizePreview:__ Set the max filesize of the previewed document (if it's an image). If the file size is bigger than the option, it will be only the file icon and disabled the preview. You can use unit like K, M and G.
|
||||
|
||||
```html
|
||||
<input type="file" class="dropify" data-max-file-size-preview="3M" />
|
||||
```
|
||||
|
||||
|
||||
* __messages:__ You can translate default messages. You just 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 happended.'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
* __error:__ You can translate default errors messages. You just 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 just 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!');
|
||||
});
|
||||
```
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "dropify",
|
||||
"title": "Dropify",
|
||||
"description": "Override your input files with style",
|
||||
"keywords": [
|
||||
"upload",
|
||||
"preview",
|
||||
"file",
|
||||
"drag",
|
||||
"drop",
|
||||
"jquery"
|
||||
],
|
||||
"homepage": "http://jeremyfagis.github.io/dropify/",
|
||||
"author": {
|
||||
"name": "Jeremy Fagis",
|
||||
"url": "http://www.fagis.fr/"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/JeremyFagis/dropify.git"
|
||||
},
|
||||
"bugs": "https://github.com/JeremyFagis/dropify/issues",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.8"
|
||||
},
|
||||
"main": [
|
||||
"dist/js/dropify.js",
|
||||
"dist/css/dropify.css"
|
||||
]
|
||||
}
|
||||
+1077
File diff suppressed because it is too large
Load Diff
+386
@@ -0,0 +1,386 @@
|
||||
/*!
|
||||
* =============================================================
|
||||
* dropify v0.2.1 - Override your input files with style.
|
||||
* https://github.com/JeremyFagis/dropify
|
||||
*
|
||||
* (c) 2017 - Jeremy FAGIS <jeremy@fagis.fr> (http://fagis.fr)
|
||||
* =============================================================
|
||||
*/
|
||||
|
||||
@charset "UTF-8";
|
||||
@font-face {
|
||||
font-family: 'dropify';
|
||||
src: url("../fonts/dropify.eot");
|
||||
src: url("../fonts/dropify.eot#iefix") format("embedded-opentype"), url("../fonts/dropify.woff") format("woff"), url("../fonts/dropify.ttf") format("truetype"), url("../fonts/dropify.svg#dropify") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
|
||||
[class^="dropify-font-"]:before, [class*=" dropify-font-"]:before, .dropify-font:before, .dropify-wrapper .dropify-message span.file-icon:before {
|
||||
font-family: "dropify";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
margin-left: .2em;
|
||||
margin-right: .2em;
|
||||
text-align: center;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1em; }
|
||||
|
||||
.dropify-font-upload:before, .dropify-wrapper .dropify-message span.file-icon:before {
|
||||
content: '\e800'; }
|
||||
|
||||
.dropify-font-file:before {
|
||||
content: '\e801'; }
|
||||
|
||||
.dropify-wrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 200px;
|
||||
padding: 5px 10px;
|
||||
font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial";
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #777;
|
||||
background-color: #FFF;
|
||||
background-image: none;
|
||||
text-align: center;
|
||||
border: 2px solid #E5E5E5;
|
||||
-webkit-transition: border-color 0.15s linear;
|
||||
transition: border-color 0.15s linear; }
|
||||
.dropify-wrapper:hover {
|
||||
background-size: 30px 30px;
|
||||
background-image: -webkit-linear-gradient(135deg, #F6F6F6 25%, transparent 25%, transparent 50%, #F6F6F6 50%, #F6F6F6 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(-45deg, #F6F6F6 25%, transparent 25%, transparent 50%, #F6F6F6 50%, #F6F6F6 75%, transparent 75%, transparent);
|
||||
-webkit-animation: stripes 2s linear infinite;
|
||||
animation: stripes 2s linear infinite; }
|
||||
.dropify-wrapper.has-preview .dropify-clear {
|
||||
display: block; }
|
||||
.dropify-wrapper.has-error {
|
||||
border-color: #F34141; }
|
||||
.dropify-wrapper.has-error .dropify-message .dropify-error {
|
||||
display: block; }
|
||||
.dropify-wrapper.has-error:hover .dropify-errors-container {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
-webkit-transition-delay: 0s;
|
||||
transition-delay: 0s; }
|
||||
.dropify-wrapper.disabled input {
|
||||
cursor: not-allowed; }
|
||||
.dropify-wrapper.disabled:hover {
|
||||
background-image: none;
|
||||
-webkit-animation: none;
|
||||
animation: none; }
|
||||
.dropify-wrapper.disabled .dropify-message {
|
||||
opacity: 0.5;
|
||||
text-decoration: line-through; }
|
||||
.dropify-wrapper.disabled .dropify-infos-message {
|
||||
display: none; }
|
||||
.dropify-wrapper input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
z-index: 5; }
|
||||
.dropify-wrapper .dropify-message {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%); }
|
||||
.dropify-wrapper .dropify-message span.file-icon {
|
||||
font-size: 50px;
|
||||
color: #CCC; }
|
||||
.dropify-wrapper .dropify-message p {
|
||||
margin: 5px 0 0 0; }
|
||||
.dropify-wrapper .dropify-message p.dropify-error {
|
||||
color: #F34141;
|
||||
font-weight: bold;
|
||||
display: none; }
|
||||
.dropify-wrapper .dropify-clear {
|
||||
display: none;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 7;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: none;
|
||||
border: 2px solid #FFF;
|
||||
text-transform: uppercase;
|
||||
font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial";
|
||||
font-size: 11px;
|
||||
padding: 4px 8px;
|
||||
font-weight: bold;
|
||||
color: #FFF;
|
||||
-webkit-transition: all 0.15s linear;
|
||||
transition: all 0.15s linear; }
|
||||
.dropify-wrapper .dropify-clear:hover {
|
||||
background: rgba(255, 255, 255, 0.2); }
|
||||
.dropify-wrapper .dropify-preview {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-color: #FFF;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
text-align: center; }
|
||||
.dropify-wrapper .dropify-preview .dropify-render img {
|
||||
top: 50%;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
background-color: #FFF;
|
||||
-webkit-transition: border-color 0.15s linear;
|
||||
transition: border-color 0.15s linear; }
|
||||
.dropify-wrapper .dropify-preview .dropify-render i {
|
||||
font-size: 70px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
color: #777; }
|
||||
.dropify-wrapper .dropify-preview .dropify-render .dropify-extension {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.03em;
|
||||
font-size: 13px;
|
||||
width: 42px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; }
|
||||
.dropify-wrapper .dropify-preview .dropify-infos {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.15s linear;
|
||||
transition: opacity 0.15s linear; }
|
||||
.dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(0, -40%);
|
||||
transform: translate(0, -40%);
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease; }
|
||||
.dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
font-weight: bold; }
|
||||
.dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message {
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
opacity: 0.5; }
|
||||
.dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
background: #FFF;
|
||||
width: 30px;
|
||||
height: 2px; }
|
||||
.dropify-wrapper:hover .dropify-clear {
|
||||
opacity: 1; }
|
||||
.dropify-wrapper:hover .dropify-preview .dropify-infos {
|
||||
opacity: 1; }
|
||||
.dropify-wrapper:hover .dropify-preview .dropify-infos .dropify-infos-inner {
|
||||
margin-top: -5px; }
|
||||
.dropify-wrapper.touch-fallback {
|
||||
height: auto !important; }
|
||||
.dropify-wrapper.touch-fallback:hover {
|
||||
background-image: none;
|
||||
-webkit-animation: none;
|
||||
animation: none; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview {
|
||||
position: relative;
|
||||
padding: 0; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-render {
|
||||
display: block;
|
||||
position: relative; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-render .dropify-font-file {
|
||||
position: relative;
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
top: 0;
|
||||
left: 0; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-render .dropify-font-file::before {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-render img {
|
||||
position: relative;
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0); }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
background: transparent; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
padding: 5px 90px 5px 0; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #777;
|
||||
text-align: left;
|
||||
line-height: 25px; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-filename {
|
||||
font-weight: bold; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
opacity: 1; }
|
||||
.dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message::before {
|
||||
display: none; }
|
||||
.dropify-wrapper.touch-fallback .dropify-message {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
padding: 40px 0; }
|
||||
.dropify-wrapper.touch-fallback .dropify-clear {
|
||||
top: auto;
|
||||
bottom: 23px;
|
||||
opacity: 1;
|
||||
border-color: rgba(119, 119, 119, 0.7);
|
||||
color: #777; }
|
||||
.dropify-wrapper.touch-fallback.has-preview .dropify-message {
|
||||
display: none; }
|
||||
.dropify-wrapper.touch-fallback:hover .dropify-preview .dropify-infos .dropify-infos-inner {
|
||||
margin-top: 0; }
|
||||
.dropify-wrapper .dropify-loader {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
display: none;
|
||||
z-index: 9; }
|
||||
.dropify-wrapper .dropify-loader::after {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-webkit-animation: rotate 0.6s linear infinite;
|
||||
animation: rotate 0.6s linear infinite;
|
||||
border-radius: 100%;
|
||||
border-top: 1px solid #CCC;
|
||||
border-bottom: 1px solid #777;
|
||||
border-left: 1px solid #CCC;
|
||||
border-right: 1px solid #777;
|
||||
content: ''; }
|
||||
.dropify-wrapper .dropify-errors-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
background: rgba(243, 65, 65, 0.8);
|
||||
text-align: left;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: visibility 0s linear 0.15s,opacity 0.15s linear;
|
||||
transition: visibility 0s linear 0.15s,opacity 0.15s linear; }
|
||||
.dropify-wrapper .dropify-errors-container ul {
|
||||
padding: 10px 20px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%); }
|
||||
.dropify-wrapper .dropify-errors-container ul li {
|
||||
margin-left: 20px;
|
||||
color: #FFF;
|
||||
font-weight: bold; }
|
||||
.dropify-wrapper .dropify-errors-container.visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
-webkit-transition-delay: 0s;
|
||||
transition-delay: 0s; }
|
||||
.dropify-wrapper ~ .dropify-errors-container ul {
|
||||
padding: 0;
|
||||
margin: 15px 0; }
|
||||
.dropify-wrapper ~ .dropify-errors-container ul li {
|
||||
margin-left: 20px;
|
||||
color: #F34141;
|
||||
font-weight: bold; }
|
||||
|
||||
@-webkit-keyframes stripes {
|
||||
from {
|
||||
background-position: 0 0; }
|
||||
to {
|
||||
background-position: 60px 30px; } }
|
||||
|
||||
@keyframes stripes {
|
||||
from {
|
||||
background-position: 0 0; }
|
||||
to {
|
||||
background-position: 60px 30px; } }
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
0% {
|
||||
-webkit-transform: rotateZ(-360deg);
|
||||
transform: rotateZ(-360deg); }
|
||||
100% {
|
||||
-webkit-transform: rotateZ(0deg);
|
||||
transform: rotateZ(0deg); } }
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
-webkit-transform: rotateZ(-360deg);
|
||||
transform: rotateZ(-360deg); }
|
||||
100% {
|
||||
-webkit-transform: rotateZ(0deg);
|
||||
transform: rotateZ(0deg); } }
|
||||
+8
File diff suppressed because one or more lines are too long
BIN
Binary file not shown.
+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 |
BIN
Binary file not shown.
BIN
Binary file not shown.
+657
@@ -0,0 +1,657 @@
|
||||
/*!
|
||||
* =============================================================
|
||||
* dropify v0.2.1 - Override your input files with style.
|
||||
* https://github.com/JeremyFagis/dropify
|
||||
*
|
||||
* (c) 2017 - Jeremy FAGIS <jeremy@fagis.fr> (http://fagis.fr)
|
||||
* =============================================================
|
||||
*/
|
||||
|
||||
;(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
root.Dropify = factory(root.jQuery);
|
||||
}
|
||||
}(this, function($) {
|
||||
var pluginName = "dropify";
|
||||
|
||||
/**
|
||||
* Dropify plugin
|
||||
*
|
||||
* @param {Object} element
|
||||
* @param {Array} options
|
||||
*/
|
||||
function Dropify(element, options) {
|
||||
if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var defaults = {
|
||||
defaultFile: '',
|
||||
maxFileSize: 0,
|
||||
minWidth: 0,
|
||||
maxWidth: 0,
|
||||
minHeight: 0,
|
||||
maxHeight: 0,
|
||||
showRemove: true,
|
||||
showLoader: true,
|
||||
showErrors: true,
|
||||
errorTimeout: 3000,
|
||||
errorsPosition: 'overlay',
|
||||
imgFileExtensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp'],
|
||||
maxFileSizePreview: "5M",
|
||||
allowedFormats: ['portrait', 'square', 'landscape'],
|
||||
allowedFileExtensions: ['*'],
|
||||
messages: {
|
||||
'default': 'Drag and drop a file here or click',
|
||||
'replace': 'Drag and drop or click to replace',
|
||||
'remove': 'Remove',
|
||||
'error': 'Ooops, something wrong happended.'
|
||||
},
|
||||
error: {
|
||||
'fileSize': 'The file size is too big ({{ value }} max).',
|
||||
'minWidth': 'The image width is too small ({{ value }}}px min).',
|
||||
'maxWidth': 'The image width is too big ({{ value }}}px max).',
|
||||
'minHeight': 'The image height is too small ({{ value }}}px min).',
|
||||
'maxHeight': 'The image height is too big ({{ value }}px max).',
|
||||
'imageFormat': 'The image format is not allowed ({{ value }} only).',
|
||||
'fileExtension': 'The file is not allowed ({{ value }} only).'
|
||||
},
|
||||
tpl: {
|
||||
wrap: '<div class="dropify-wrapper"></div>',
|
||||
loader: '<div class="dropify-loader"></div>',
|
||||
message: '<div class="dropify-message"><span class="file-icon" /> <p>{{ default }}</p></div>',
|
||||
preview: '<div class="dropify-preview"><span class="dropify-render"></span><div class="dropify-infos"><div class="dropify-infos-inner"><p class="dropify-infos-message">{{ replace }}</p></div></div></div>',
|
||||
filename: '<p class="dropify-filename"><span class="dropify-filename-inner"></span></p>',
|
||||
clearButton: '<button type="button" class="dropify-clear">{{ remove }}</button>',
|
||||
errorLine: '<p class="dropify-error">{{ error }}</p>',
|
||||
errorsContainer: '<div class="dropify-errors-container"><ul></ul></div>'
|
||||
}
|
||||
};
|
||||
|
||||
this.element = element;
|
||||
this.input = $(this.element);
|
||||
this.wrapper = null;
|
||||
this.preview = null;
|
||||
this.filenameWrapper = null;
|
||||
this.settings = $.extend(true, defaults, options, this.input.data());
|
||||
this.errorsEvent = $.Event('dropify.errors');
|
||||
this.isDisabled = false;
|
||||
this.isInit = false;
|
||||
this.file = {
|
||||
object: null,
|
||||
name: null,
|
||||
size: null,
|
||||
width: null,
|
||||
height: null,
|
||||
type: null
|
||||
};
|
||||
|
||||
if (!Array.isArray(this.settings.allowedFormats)) {
|
||||
this.settings.allowedFormats = this.settings.allowedFormats.split(' ');
|
||||
}
|
||||
|
||||
if (!Array.isArray(this.settings.allowedFileExtensions)) {
|
||||
this.settings.allowedFileExtensions = this.settings.allowedFileExtensions.split(' ');
|
||||
}
|
||||
|
||||
this.onChange = this.onChange.bind(this);
|
||||
this.clearElement = this.clearElement.bind(this);
|
||||
this.onFileReady = this.onFileReady.bind(this);
|
||||
|
||||
this.translateMessages();
|
||||
this.createElements();
|
||||
this.setContainerSize();
|
||||
|
||||
this.errorsEvent.errors = [];
|
||||
|
||||
this.input.on('change', this.onChange);
|
||||
}
|
||||
|
||||
/**
|
||||
* On change event
|
||||
*/
|
||||
Dropify.prototype.onChange = function()
|
||||
{
|
||||
this.resetPreview();
|
||||
this.readFile(this.element);
|
||||
};
|
||||
|
||||
/**
|
||||
* Create dom elements
|
||||
*/
|
||||
Dropify.prototype.createElements = function()
|
||||
{
|
||||
this.isInit = true;
|
||||
this.input.wrap($(this.settings.tpl.wrap));
|
||||
this.wrapper = this.input.parent();
|
||||
|
||||
var messageWrapper = $(this.settings.tpl.message).insertBefore(this.input);
|
||||
$(this.settings.tpl.errorLine).appendTo(messageWrapper);
|
||||
|
||||
if (this.isTouchDevice() === true) {
|
||||
this.wrapper.addClass('touch-fallback');
|
||||
}
|
||||
|
||||
if (this.input.attr('disabled')) {
|
||||
this.isDisabled = true;
|
||||
this.wrapper.addClass('disabled');
|
||||
}
|
||||
|
||||
if (this.settings.showLoader === true) {
|
||||
this.loader = $(this.settings.tpl.loader);
|
||||
this.loader.insertBefore(this.input);
|
||||
}
|
||||
|
||||
this.preview = $(this.settings.tpl.preview);
|
||||
this.preview.insertAfter(this.input);
|
||||
|
||||
if (this.isDisabled === false && this.settings.showRemove === true) {
|
||||
this.clearButton = $(this.settings.tpl.clearButton);
|
||||
this.clearButton.insertAfter(this.input);
|
||||
this.clearButton.on('click', this.clearElement);
|
||||
}
|
||||
|
||||
this.filenameWrapper = $(this.settings.tpl.filename);
|
||||
this.filenameWrapper.prependTo(this.preview.find('.dropify-infos-inner'));
|
||||
|
||||
if (this.settings.showErrors === true) {
|
||||
this.errorsContainer = $(this.settings.tpl.errorsContainer);
|
||||
|
||||
if (this.settings.errorsPosition === 'outside') {
|
||||
this.errorsContainer.insertAfter(this.wrapper);
|
||||
} else {
|
||||
this.errorsContainer.insertBefore(this.input);
|
||||
}
|
||||
}
|
||||
|
||||
var defaultFile = this.settings.defaultFile || '';
|
||||
|
||||
if (defaultFile.trim() !== '') {
|
||||
this.file.name = this.cleanFilename(defaultFile);
|
||||
this.setPreview(this.isImage(), defaultFile);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Read the file using FileReader
|
||||
*
|
||||
* @param {Object} input
|
||||
*/
|
||||
Dropify.prototype.readFile = function(input)
|
||||
{
|
||||
if (input.files && input.files[0]) {
|
||||
var reader = new FileReader();
|
||||
var image = new Image();
|
||||
var file = input.files[0];
|
||||
var srcBase64 = null;
|
||||
var _this = this;
|
||||
var eventFileReady = $.Event("dropify.fileReady");
|
||||
|
||||
this.clearErrors();
|
||||
this.showLoader();
|
||||
this.setFileInformations(file);
|
||||
this.errorsEvent.errors = [];
|
||||
this.checkFileSize();
|
||||
this.isFileExtensionAllowed();
|
||||
|
||||
if (this.isImage() && this.file.size < this.sizeToByte(this.settings.maxFileSizePreview)) {
|
||||
this.input.on('dropify.fileReady', this.onFileReady);
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = function(_file) {
|
||||
srcBase64 = _file.target.result;
|
||||
image.src = _file.target.result;
|
||||
image.onload = function() {
|
||||
_this.setFileDimensions(this.width, this.height);
|
||||
_this.validateImage();
|
||||
_this.input.trigger(eventFileReady, [true, srcBase64]);
|
||||
};
|
||||
|
||||
}.bind(this);
|
||||
} else {
|
||||
this.onFileReady(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* On file ready to show
|
||||
*
|
||||
* @param {Event} event
|
||||
* @param {Bool} previewable
|
||||
* @param {String} src
|
||||
*/
|
||||
Dropify.prototype.onFileReady = function(event, previewable, src)
|
||||
{
|
||||
this.input.off('dropify.fileReady', this.onFileReady);
|
||||
|
||||
if (this.errorsEvent.errors.length === 0) {
|
||||
this.setPreview(previewable, src);
|
||||
} else {
|
||||
this.input.trigger(this.errorsEvent, [this]);
|
||||
for (var i = this.errorsEvent.errors.length - 1; i >= 0; i--) {
|
||||
var errorNamespace = this.errorsEvent.errors[i].namespace;
|
||||
var errorKey = errorNamespace.split('.').pop();
|
||||
this.showError(errorKey);
|
||||
}
|
||||
|
||||
if (typeof this.errorsContainer !== "undefined") {
|
||||
this.errorsContainer.addClass('visible');
|
||||
|
||||
var errorsContainer = this.errorsContainer;
|
||||
setTimeout(function(){ errorsContainer.removeClass('visible'); }, this.settings.errorTimeout);
|
||||
}
|
||||
|
||||
this.wrapper.addClass('has-error');
|
||||
this.resetPreview();
|
||||
this.clearElement();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Set file informations
|
||||
*
|
||||
* @param {File} file
|
||||
*/
|
||||
Dropify.prototype.setFileInformations = function(file)
|
||||
{
|
||||
this.file.object = file;
|
||||
this.file.name = file.name;
|
||||
this.file.size = file.size;
|
||||
this.file.type = file.type;
|
||||
this.file.width = null;
|
||||
this.file.height = null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set file dimensions
|
||||
*
|
||||
* @param {Int} width
|
||||
* @param {Int} height
|
||||
*/
|
||||
Dropify.prototype.setFileDimensions = function(width, height)
|
||||
{
|
||||
this.file.width = width;
|
||||
this.file.height = height;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the preview and animate it
|
||||
*
|
||||
* @param {String} src
|
||||
*/
|
||||
Dropify.prototype.setPreview = function(previewable, src)
|
||||
{
|
||||
this.wrapper.removeClass('has-error').addClass('has-preview');
|
||||
this.filenameWrapper.children('.dropify-filename-inner').html(this.file.name);
|
||||
var render = this.preview.children('.dropify-render');
|
||||
|
||||
this.hideLoader();
|
||||
|
||||
if (previewable === true) {
|
||||
var imgTag = $('<img />').attr('src', src);
|
||||
|
||||
if (this.settings.height) {
|
||||
imgTag.css("max-height", this.settings.height);
|
||||
}
|
||||
|
||||
imgTag.appendTo(render);
|
||||
} else {
|
||||
$('<i />').attr('class', 'dropify-font-file').appendTo(render);
|
||||
$('<span class="dropify-extension" />').html(this.getFileType()).appendTo(render);
|
||||
}
|
||||
this.preview.fadeIn();
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset the preview
|
||||
*/
|
||||
Dropify.prototype.resetPreview = function()
|
||||
{
|
||||
this.wrapper.removeClass('has-preview');
|
||||
var render = this.preview.children('.dropify-render');
|
||||
render.find('.dropify-extension').remove();
|
||||
render.find('i').remove();
|
||||
render.find('img').remove();
|
||||
this.preview.hide();
|
||||
this.hideLoader();
|
||||
};
|
||||
|
||||
/**
|
||||
* Clean the src and get the filename
|
||||
*
|
||||
* @param {String} src
|
||||
*
|
||||
* @return {String} filename
|
||||
*/
|
||||
Dropify.prototype.cleanFilename = function(src)
|
||||
{
|
||||
var filename = src.split('\\').pop();
|
||||
if (filename == src) {
|
||||
filename = src.split('/').pop();
|
||||
}
|
||||
|
||||
return src !== "" ? filename : '';
|
||||
};
|
||||
|
||||
/**
|
||||
* Clear the element, events are available
|
||||
*/
|
||||
Dropify.prototype.clearElement = function()
|
||||
{
|
||||
if (this.errorsEvent.errors.length === 0) {
|
||||
var eventBefore = $.Event("dropify.beforeClear");
|
||||
this.input.trigger(eventBefore, [this]);
|
||||
|
||||
if (eventBefore.result !== false) {
|
||||
this.resetFile();
|
||||
this.input.val('');
|
||||
this.resetPreview();
|
||||
|
||||
this.input.trigger($.Event("dropify.afterClear"), [this]);
|
||||
}
|
||||
} else {
|
||||
this.resetFile();
|
||||
this.input.val('');
|
||||
this.resetPreview();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset file informations
|
||||
*/
|
||||
Dropify.prototype.resetFile = function()
|
||||
{
|
||||
this.file.object = null;
|
||||
this.file.name = null;
|
||||
this.file.size = null;
|
||||
this.file.type = null;
|
||||
this.file.width = null;
|
||||
this.file.height = null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the container height
|
||||
*/
|
||||
Dropify.prototype.setContainerSize = function()
|
||||
{
|
||||
if (this.settings.height) {
|
||||
this.wrapper.height(this.settings.height);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Test if it's touch screen
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
Dropify.prototype.isTouchDevice = function()
|
||||
{
|
||||
return (('ontouchstart' in window) ||
|
||||
(navigator.MaxTouchPoints > 0) ||
|
||||
(navigator.msMaxTouchPoints > 0));
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the file type.
|
||||
*
|
||||
* @return {String}
|
||||
*/
|
||||
Dropify.prototype.getFileType = function()
|
||||
{
|
||||
return this.file.name.split('.').pop().toLowerCase();
|
||||
};
|
||||
|
||||
/**
|
||||
* Test if the file is an image
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
Dropify.prototype.isImage = function()
|
||||
{
|
||||
if (this.settings.imgFileExtensions.indexOf(this.getFileType()) != "-1") {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Test if the file extension is allowed
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
Dropify.prototype.isFileExtensionAllowed = function () {
|
||||
|
||||
if (this.settings.allowedFileExtensions.indexOf('*') != "-1" ||
|
||||
this.settings.allowedFileExtensions.indexOf(this.getFileType()) != "-1") {
|
||||
return true;
|
||||
}
|
||||
this.pushError("fileExtension");
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Translate messages if needed.
|
||||
*/
|
||||
Dropify.prototype.translateMessages = function()
|
||||
{
|
||||
for (var name in this.settings.tpl) {
|
||||
for (var key in this.settings.messages) {
|
||||
this.settings.tpl[name] = this.settings.tpl[name].replace('{{ ' + key + ' }}', this.settings.messages[key]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Check the limit filesize.
|
||||
*/
|
||||
Dropify.prototype.checkFileSize = function()
|
||||
{
|
||||
if (this.sizeToByte(this.settings.maxFileSize) !== 0 && this.file.size > this.sizeToByte(this.settings.maxFileSize)) {
|
||||
this.pushError("fileSize");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert filesize to byte.
|
||||
*
|
||||
* @return {Int} value
|
||||
*/
|
||||
Dropify.prototype.sizeToByte = function(size)
|
||||
{
|
||||
var value = 0;
|
||||
|
||||
if (size !== 0) {
|
||||
var unit = size.slice(-1).toUpperCase(),
|
||||
kb = 1024,
|
||||
mb = kb * 1024,
|
||||
gb = mb * 1024;
|
||||
|
||||
if (unit === 'K') {
|
||||
value = parseFloat(size) * kb;
|
||||
} else if (unit === 'M') {
|
||||
value = parseFloat(size) * mb;
|
||||
} else if (unit === 'G') {
|
||||
value = parseFloat(size) * gb;
|
||||
}
|
||||
}
|
||||
|
||||
return value;
|
||||
};
|
||||
|
||||
/**
|
||||
* Validate image dimensions and format
|
||||
*/
|
||||
Dropify.prototype.validateImage = function()
|
||||
{
|
||||
if (this.settings.minWidth !== 0 && this.settings.minWidth >= this.file.width) {
|
||||
this.pushError("minWidth");
|
||||
}
|
||||
|
||||
if (this.settings.maxWidth !== 0 && this.settings.maxWidth <= this.file.width) {
|
||||
this.pushError("maxWidth");
|
||||
}
|
||||
|
||||
if (this.settings.minHeight !== 0 && this.settings.minHeight >= this.file.height) {
|
||||
this.pushError("minHeight");
|
||||
}
|
||||
|
||||
if (this.settings.maxHeight !== 0 && this.settings.maxHeight <= this.file.height) {
|
||||
this.pushError("maxHeight");
|
||||
}
|
||||
|
||||
if (this.settings.allowedFormats.indexOf(this.getImageFormat()) == "-1") {
|
||||
this.pushError("imageFormat");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get image format.
|
||||
*
|
||||
* @return {String}
|
||||
*/
|
||||
Dropify.prototype.getImageFormat = function()
|
||||
{
|
||||
if (this.file.width == this.file.height) {
|
||||
return "square";
|
||||
}
|
||||
|
||||
if (this.file.width < this.file.height) {
|
||||
return "portrait";
|
||||
}
|
||||
|
||||
if (this.file.width > this.file.height) {
|
||||
return "landscape";
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Push error
|
||||
*
|
||||
* @param {String} errorKey
|
||||
*/
|
||||
Dropify.prototype.pushError = function(errorKey) {
|
||||
var e = $.Event("dropify.error." + errorKey);
|
||||
this.errorsEvent.errors.push(e);
|
||||
this.input.trigger(e, [this]);
|
||||
};
|
||||
|
||||
/**
|
||||
* Clear errors
|
||||
*/
|
||||
Dropify.prototype.clearErrors = function()
|
||||
{
|
||||
if (typeof this.errorsContainer !== "undefined") {
|
||||
this.errorsContainer.children('ul').html('');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Show error in DOM
|
||||
*
|
||||
* @param {String} errorKey
|
||||
*/
|
||||
Dropify.prototype.showError = function(errorKey)
|
||||
{
|
||||
if (typeof this.errorsContainer !== "undefined") {
|
||||
this.errorsContainer.children('ul').append('<li>' + this.getError(errorKey) + '</li>');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get error message
|
||||
*
|
||||
* @return {String} message
|
||||
*/
|
||||
Dropify.prototype.getError = function(errorKey)
|
||||
{
|
||||
var error = this.settings.error[errorKey],
|
||||
value = '';
|
||||
|
||||
if (errorKey === 'fileSize') {
|
||||
value = this.settings.maxFileSize;
|
||||
} else if (errorKey === 'minWidth') {
|
||||
value = this.settings.minWidth;
|
||||
} else if (errorKey === 'maxWidth') {
|
||||
value = this.settings.maxWidth;
|
||||
} else if (errorKey === 'minHeight') {
|
||||
value = this.settings.minHeight;
|
||||
} else if (errorKey === 'maxHeight') {
|
||||
value = this.settings.maxHeight;
|
||||
} else if (errorKey === 'imageFormat') {
|
||||
value = this.settings.allowedFormats.join(', ');
|
||||
} else if (errorKey === 'fileExtension') {
|
||||
value = this.settings.allowedFileExtensions.join(', ');
|
||||
}
|
||||
|
||||
if (value !== '') {
|
||||
return error.replace('{{ value }}', value);
|
||||
}
|
||||
|
||||
return error;
|
||||
};
|
||||
|
||||
/**
|
||||
* Show the loader
|
||||
*/
|
||||
Dropify.prototype.showLoader = function()
|
||||
{
|
||||
if (typeof this.loader !== "undefined") {
|
||||
this.loader.show();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the loader
|
||||
*/
|
||||
Dropify.prototype.hideLoader = function()
|
||||
{
|
||||
if (typeof this.loader !== "undefined") {
|
||||
this.loader.hide();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Destroy dropify
|
||||
*/
|
||||
Dropify.prototype.destroy = function()
|
||||
{
|
||||
this.input.siblings().remove();
|
||||
this.input.unwrap();
|
||||
this.isInit = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Init dropify
|
||||
*/
|
||||
Dropify.prototype.init = function()
|
||||
{
|
||||
this.createElements();
|
||||
};
|
||||
|
||||
/**
|
||||
* Test if element is init
|
||||
*/
|
||||
Dropify.prototype.isDropified = function()
|
||||
{
|
||||
return this.isInit;
|
||||
};
|
||||
|
||||
$.fn[pluginName] = function(options) {
|
||||
this.each(function() {
|
||||
if (!$.data(this, pluginName)) {
|
||||
$.data(this, pluginName, new Dropify(this, options));
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
return Dropify;
|
||||
}));
|
||||
+10
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) 2017 - <%= 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/demo.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">2017 © <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>
|
||||
+67
@@ -0,0 +1,67 @@
|
||||
{
|
||||
"_args": [
|
||||
[
|
||||
"dropify@0.2.2",
|
||||
"E:\\project\\amma\\victoryadmin\\victory"
|
||||
]
|
||||
],
|
||||
"_from": "dropify@0.2.2",
|
||||
"_id": "dropify@0.2.2",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha1-VU69Hae23CA3hV+tc33YMSjz9VY=",
|
||||
"_location": "/dropify",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "version",
|
||||
"registry": true,
|
||||
"raw": "dropify@0.2.2",
|
||||
"name": "dropify",
|
||||
"escapedName": "dropify",
|
||||
"rawSpec": "0.2.2",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "0.2.2"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"/"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/dropify/-/dropify-0.2.2.tgz",
|
||||
"_spec": "0.2.2",
|
||||
"_where": "E:\\project\\amma\\victoryadmin\\victory",
|
||||
"author": {
|
||||
"name": "Jeremy FAGIS",
|
||||
"email": "jeremy@fagis.fr",
|
||||
"url": "http://fagis.fr"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/JeremyFagis/dropify/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": "*"
|
||||
},
|
||||
"description": "Override your input files with style.",
|
||||
"devDependencies": {
|
||||
"gulp": "^3.9.0",
|
||||
"gulp-autoprefixer": "^3.1.0",
|
||||
"gulp-header": "^1.7.1",
|
||||
"gulp-if": "^2.0.0",
|
||||
"gulp-load-plugins": "^1.2.0",
|
||||
"gulp-minify-css": "1.2.4",
|
||||
"gulp-plumber": "^1.0.1",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"gulp-uglify": "^2.1.0",
|
||||
"gulp-umd": "^0.2.0",
|
||||
"gulp-util": "^3.0.7",
|
||||
"gulp-wrap-js": "^0.4.1",
|
||||
"minimist": "^1.2.0"
|
||||
},
|
||||
"homepage": "https://github.com/JeremyFagis/dropify",
|
||||
"license": "MIT",
|
||||
"main": "dist/js/dropify.js",
|
||||
"name": "dropify",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/JeremyFagis/dropify.git"
|
||||
},
|
||||
"version": "0.2.2"
|
||||
}
|
||||
BIN
Binary file not shown.
+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 |
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
+636
@@ -0,0 +1,636 @@
|
||||
var pluginName = "dropify";
|
||||
|
||||
/**
|
||||
* Dropify plugin
|
||||
*
|
||||
* @param {Object} element
|
||||
* @param {Array} options
|
||||
*/
|
||||
function Dropify(element, options) {
|
||||
if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var defaults = {
|
||||
defaultFile: '',
|
||||
maxFileSize: 0,
|
||||
minWidth: 0,
|
||||
maxWidth: 0,
|
||||
minHeight: 0,
|
||||
maxHeight: 0,
|
||||
showRemove: true,
|
||||
showLoader: true,
|
||||
showErrors: true,
|
||||
errorTimeout: 3000,
|
||||
errorsPosition: 'overlay',
|
||||
imgFileExtensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp'],
|
||||
maxFileSizePreview: "5M",
|
||||
allowedFormats: ['portrait', 'square', 'landscape'],
|
||||
allowedFileExtensions: ['*'],
|
||||
messages: {
|
||||
'default': 'Drag and drop a file here or click',
|
||||
'replace': 'Drag and drop or click to replace',
|
||||
'remove': 'Remove',
|
||||
'error': 'Ooops, something wrong happended.'
|
||||
},
|
||||
error: {
|
||||
'fileSize': 'The file size is too big ({{ value }} max).',
|
||||
'minWidth': 'The image width is too small ({{ value }}}px min).',
|
||||
'maxWidth': 'The image width is too big ({{ value }}}px max).',
|
||||
'minHeight': 'The image height is too small ({{ value }}}px min).',
|
||||
'maxHeight': 'The image height is too big ({{ value }}px max).',
|
||||
'imageFormat': 'The image format is not allowed ({{ value }} only).',
|
||||
'fileExtension': 'The file is not allowed ({{ value }} only).'
|
||||
},
|
||||
tpl: {
|
||||
wrap: '<div class="dropify-wrapper"></div>',
|
||||
loader: '<div class="dropify-loader"></div>',
|
||||
message: '<div class="dropify-message"><span class="file-icon" /> <p>{{ default }}</p></div>',
|
||||
preview: '<div class="dropify-preview"><span class="dropify-render"></span><div class="dropify-infos"><div class="dropify-infos-inner"><p class="dropify-infos-message">{{ replace }}</p></div></div></div>',
|
||||
filename: '<p class="dropify-filename"><span class="dropify-filename-inner"></span></p>',
|
||||
clearButton: '<button type="button" class="dropify-clear">{{ remove }}</button>',
|
||||
errorLine: '<p class="dropify-error">{{ error }}</p>',
|
||||
errorsContainer: '<div class="dropify-errors-container"><ul></ul></div>'
|
||||
}
|
||||
};
|
||||
|
||||
this.element = element;
|
||||
this.input = $(this.element);
|
||||
this.wrapper = null;
|
||||
this.preview = null;
|
||||
this.filenameWrapper = null;
|
||||
this.settings = $.extend(true, defaults, options, this.input.data());
|
||||
this.errorsEvent = $.Event('dropify.errors');
|
||||
this.isDisabled = false;
|
||||
this.isInit = false;
|
||||
this.file = {
|
||||
object: null,
|
||||
name: null,
|
||||
size: null,
|
||||
width: null,
|
||||
height: null,
|
||||
type: null
|
||||
};
|
||||
|
||||
if (!Array.isArray(this.settings.allowedFormats)) {
|
||||
this.settings.allowedFormats = this.settings.allowedFormats.split(' ');
|
||||
}
|
||||
|
||||
if (!Array.isArray(this.settings.allowedFileExtensions)) {
|
||||
this.settings.allowedFileExtensions = this.settings.allowedFileExtensions.split(' ');
|
||||
}
|
||||
|
||||
this.onChange = this.onChange.bind(this);
|
||||
this.clearElement = this.clearElement.bind(this);
|
||||
this.onFileReady = this.onFileReady.bind(this);
|
||||
|
||||
this.translateMessages();
|
||||
this.createElements();
|
||||
this.setContainerSize();
|
||||
|
||||
this.errorsEvent.errors = [];
|
||||
|
||||
this.input.on('change', this.onChange);
|
||||
}
|
||||
|
||||
/**
|
||||
* On change event
|
||||
*/
|
||||
Dropify.prototype.onChange = function()
|
||||
{
|
||||
this.resetPreview();
|
||||
this.readFile(this.element);
|
||||
};
|
||||
|
||||
/**
|
||||
* Create dom elements
|
||||
*/
|
||||
Dropify.prototype.createElements = function()
|
||||
{
|
||||
this.isInit = true;
|
||||
this.input.wrap($(this.settings.tpl.wrap));
|
||||
this.wrapper = this.input.parent();
|
||||
|
||||
var messageWrapper = $(this.settings.tpl.message).insertBefore(this.input);
|
||||
$(this.settings.tpl.errorLine).appendTo(messageWrapper);
|
||||
|
||||
if (this.isTouchDevice() === true) {
|
||||
this.wrapper.addClass('touch-fallback');
|
||||
}
|
||||
|
||||
if (this.input.attr('disabled')) {
|
||||
this.isDisabled = true;
|
||||
this.wrapper.addClass('disabled');
|
||||
}
|
||||
|
||||
if (this.settings.showLoader === true) {
|
||||
this.loader = $(this.settings.tpl.loader);
|
||||
this.loader.insertBefore(this.input);
|
||||
}
|
||||
|
||||
this.preview = $(this.settings.tpl.preview);
|
||||
this.preview.insertAfter(this.input);
|
||||
|
||||
if (this.isDisabled === false && this.settings.showRemove === true) {
|
||||
this.clearButton = $(this.settings.tpl.clearButton);
|
||||
this.clearButton.insertAfter(this.input);
|
||||
this.clearButton.on('click', this.clearElement);
|
||||
}
|
||||
|
||||
this.filenameWrapper = $(this.settings.tpl.filename);
|
||||
this.filenameWrapper.prependTo(this.preview.find('.dropify-infos-inner'));
|
||||
|
||||
if (this.settings.showErrors === true) {
|
||||
this.errorsContainer = $(this.settings.tpl.errorsContainer);
|
||||
|
||||
if (this.settings.errorsPosition === 'outside') {
|
||||
this.errorsContainer.insertAfter(this.wrapper);
|
||||
} else {
|
||||
this.errorsContainer.insertBefore(this.input);
|
||||
}
|
||||
}
|
||||
|
||||
var defaultFile = this.settings.defaultFile || '';
|
||||
|
||||
if (defaultFile.trim() !== '') {
|
||||
this.file.name = this.cleanFilename(defaultFile);
|
||||
this.setPreview(this.isImage(), defaultFile);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Read the file using FileReader
|
||||
*
|
||||
* @param {Object} input
|
||||
*/
|
||||
Dropify.prototype.readFile = function(input)
|
||||
{
|
||||
if (input.files && input.files[0]) {
|
||||
var reader = new FileReader();
|
||||
var image = new Image();
|
||||
var file = input.files[0];
|
||||
var srcBase64 = null;
|
||||
var _this = this;
|
||||
var eventFileReady = $.Event("dropify.fileReady");
|
||||
|
||||
this.clearErrors();
|
||||
this.showLoader();
|
||||
this.setFileInformations(file);
|
||||
this.errorsEvent.errors = [];
|
||||
this.checkFileSize();
|
||||
this.isFileExtensionAllowed();
|
||||
|
||||
if (this.isImage() && this.file.size < this.sizeToByte(this.settings.maxFileSizePreview)) {
|
||||
this.input.on('dropify.fileReady', this.onFileReady);
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = function(_file) {
|
||||
srcBase64 = _file.target.result;
|
||||
image.src = _file.target.result;
|
||||
image.onload = function() {
|
||||
_this.setFileDimensions(this.width, this.height);
|
||||
_this.validateImage();
|
||||
_this.input.trigger(eventFileReady, [true, srcBase64]);
|
||||
};
|
||||
|
||||
}.bind(this);
|
||||
} else {
|
||||
this.onFileReady(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* On file ready to show
|
||||
*
|
||||
* @param {Event} event
|
||||
* @param {Bool} previewable
|
||||
* @param {String} src
|
||||
*/
|
||||
Dropify.prototype.onFileReady = function(event, previewable, src)
|
||||
{
|
||||
this.input.off('dropify.fileReady', this.onFileReady);
|
||||
|
||||
if (this.errorsEvent.errors.length === 0) {
|
||||
this.setPreview(previewable, src);
|
||||
} else {
|
||||
this.input.trigger(this.errorsEvent, [this]);
|
||||
for (var i = this.errorsEvent.errors.length - 1; i >= 0; i--) {
|
||||
var errorNamespace = this.errorsEvent.errors[i].namespace;
|
||||
var errorKey = errorNamespace.split('.').pop();
|
||||
this.showError(errorKey);
|
||||
}
|
||||
|
||||
if (typeof this.errorsContainer !== "undefined") {
|
||||
this.errorsContainer.addClass('visible');
|
||||
|
||||
var errorsContainer = this.errorsContainer;
|
||||
setTimeout(function(){ errorsContainer.removeClass('visible'); }, this.settings.errorTimeout);
|
||||
}
|
||||
|
||||
this.wrapper.addClass('has-error');
|
||||
this.resetPreview();
|
||||
this.clearElement();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Set file informations
|
||||
*
|
||||
* @param {File} file
|
||||
*/
|
||||
Dropify.prototype.setFileInformations = function(file)
|
||||
{
|
||||
this.file.object = file;
|
||||
this.file.name = file.name;
|
||||
this.file.size = file.size;
|
||||
this.file.type = file.type;
|
||||
this.file.width = null;
|
||||
this.file.height = null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set file dimensions
|
||||
*
|
||||
* @param {Int} width
|
||||
* @param {Int} height
|
||||
*/
|
||||
Dropify.prototype.setFileDimensions = function(width, height)
|
||||
{
|
||||
this.file.width = width;
|
||||
this.file.height = height;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the preview and animate it
|
||||
*
|
||||
* @param {String} src
|
||||
*/
|
||||
Dropify.prototype.setPreview = function(previewable, src)
|
||||
{
|
||||
this.wrapper.removeClass('has-error').addClass('has-preview');
|
||||
this.filenameWrapper.children('.dropify-filename-inner').html(this.file.name);
|
||||
var render = this.preview.children('.dropify-render');
|
||||
|
||||
this.hideLoader();
|
||||
|
||||
if (previewable === true) {
|
||||
var imgTag = $('<img />').attr('src', src);
|
||||
|
||||
if (this.settings.height) {
|
||||
imgTag.css("max-height", this.settings.height);
|
||||
}
|
||||
|
||||
imgTag.appendTo(render);
|
||||
} else {
|
||||
$('<i />').attr('class', 'dropify-font-file').appendTo(render);
|
||||
$('<span class="dropify-extension" />').html(this.getFileType()).appendTo(render);
|
||||
}
|
||||
this.preview.fadeIn();
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset the preview
|
||||
*/
|
||||
Dropify.prototype.resetPreview = function()
|
||||
{
|
||||
this.wrapper.removeClass('has-preview');
|
||||
var render = this.preview.children('.dropify-render');
|
||||
render.find('.dropify-extension').remove();
|
||||
render.find('i').remove();
|
||||
render.find('img').remove();
|
||||
this.preview.hide();
|
||||
this.hideLoader();
|
||||
};
|
||||
|
||||
/**
|
||||
* Clean the src and get the filename
|
||||
*
|
||||
* @param {String} src
|
||||
*
|
||||
* @return {String} filename
|
||||
*/
|
||||
Dropify.prototype.cleanFilename = function(src)
|
||||
{
|
||||
var filename = src.split('\\').pop();
|
||||
if (filename == src) {
|
||||
filename = src.split('/').pop();
|
||||
}
|
||||
|
||||
return src !== "" ? filename : '';
|
||||
};
|
||||
|
||||
/**
|
||||
* Clear the element, events are available
|
||||
*/
|
||||
Dropify.prototype.clearElement = function()
|
||||
{
|
||||
if (this.errorsEvent.errors.length === 0) {
|
||||
var eventBefore = $.Event("dropify.beforeClear");
|
||||
this.input.trigger(eventBefore, [this]);
|
||||
|
||||
if (eventBefore.result !== false) {
|
||||
this.resetFile();
|
||||
this.input.val('');
|
||||
this.resetPreview();
|
||||
|
||||
this.input.trigger($.Event("dropify.afterClear"), [this]);
|
||||
}
|
||||
} else {
|
||||
this.resetFile();
|
||||
this.input.val('');
|
||||
this.resetPreview();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset file informations
|
||||
*/
|
||||
Dropify.prototype.resetFile = function()
|
||||
{
|
||||
this.file.object = null;
|
||||
this.file.name = null;
|
||||
this.file.size = null;
|
||||
this.file.type = null;
|
||||
this.file.width = null;
|
||||
this.file.height = null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the container height
|
||||
*/
|
||||
Dropify.prototype.setContainerSize = function()
|
||||
{
|
||||
if (this.settings.height) {
|
||||
this.wrapper.height(this.settings.height);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Test if it's touch screen
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
Dropify.prototype.isTouchDevice = function()
|
||||
{
|
||||
return (('ontouchstart' in window) ||
|
||||
(navigator.MaxTouchPoints > 0) ||
|
||||
(navigator.msMaxTouchPoints > 0));
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the file type.
|
||||
*
|
||||
* @return {String}
|
||||
*/
|
||||
Dropify.prototype.getFileType = function()
|
||||
{
|
||||
return this.file.name.split('.').pop().toLowerCase();
|
||||
};
|
||||
|
||||
/**
|
||||
* Test if the file is an image
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
Dropify.prototype.isImage = function()
|
||||
{
|
||||
if (this.settings.imgFileExtensions.indexOf(this.getFileType()) != "-1") {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Test if the file extension is allowed
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
Dropify.prototype.isFileExtensionAllowed = function () {
|
||||
|
||||
if (this.settings.allowedFileExtensions.indexOf('*') != "-1" ||
|
||||
this.settings.allowedFileExtensions.indexOf(this.getFileType()) != "-1") {
|
||||
return true;
|
||||
}
|
||||
this.pushError("fileExtension");
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Translate messages if needed.
|
||||
*/
|
||||
Dropify.prototype.translateMessages = function()
|
||||
{
|
||||
for (var name in this.settings.tpl) {
|
||||
for (var key in this.settings.messages) {
|
||||
this.settings.tpl[name] = this.settings.tpl[name].replace('{{ ' + key + ' }}', this.settings.messages[key]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Check the limit filesize.
|
||||
*/
|
||||
Dropify.prototype.checkFileSize = function()
|
||||
{
|
||||
if (this.sizeToByte(this.settings.maxFileSize) !== 0 && this.file.size > this.sizeToByte(this.settings.maxFileSize)) {
|
||||
this.pushError("fileSize");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert filesize to byte.
|
||||
*
|
||||
* @return {Int} value
|
||||
*/
|
||||
Dropify.prototype.sizeToByte = function(size)
|
||||
{
|
||||
var value = 0;
|
||||
|
||||
if (size !== 0) {
|
||||
var unit = size.slice(-1).toUpperCase(),
|
||||
kb = 1024,
|
||||
mb = kb * 1024,
|
||||
gb = mb * 1024;
|
||||
|
||||
if (unit === 'K') {
|
||||
value = parseFloat(size) * kb;
|
||||
} else if (unit === 'M') {
|
||||
value = parseFloat(size) * mb;
|
||||
} else if (unit === 'G') {
|
||||
value = parseFloat(size) * gb;
|
||||
}
|
||||
}
|
||||
|
||||
return value;
|
||||
};
|
||||
|
||||
/**
|
||||
* Validate image dimensions and format
|
||||
*/
|
||||
Dropify.prototype.validateImage = function()
|
||||
{
|
||||
if (this.settings.minWidth !== 0 && this.settings.minWidth >= this.file.width) {
|
||||
this.pushError("minWidth");
|
||||
}
|
||||
|
||||
if (this.settings.maxWidth !== 0 && this.settings.maxWidth <= this.file.width) {
|
||||
this.pushError("maxWidth");
|
||||
}
|
||||
|
||||
if (this.settings.minHeight !== 0 && this.settings.minHeight >= this.file.height) {
|
||||
this.pushError("minHeight");
|
||||
}
|
||||
|
||||
if (this.settings.maxHeight !== 0 && this.settings.maxHeight <= this.file.height) {
|
||||
this.pushError("maxHeight");
|
||||
}
|
||||
|
||||
if (this.settings.allowedFormats.indexOf(this.getImageFormat()) == "-1") {
|
||||
this.pushError("imageFormat");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get image format.
|
||||
*
|
||||
* @return {String}
|
||||
*/
|
||||
Dropify.prototype.getImageFormat = function()
|
||||
{
|
||||
if (this.file.width == this.file.height) {
|
||||
return "square";
|
||||
}
|
||||
|
||||
if (this.file.width < this.file.height) {
|
||||
return "portrait";
|
||||
}
|
||||
|
||||
if (this.file.width > this.file.height) {
|
||||
return "landscape";
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Push error
|
||||
*
|
||||
* @param {String} errorKey
|
||||
*/
|
||||
Dropify.prototype.pushError = function(errorKey) {
|
||||
var e = $.Event("dropify.error." + errorKey);
|
||||
this.errorsEvent.errors.push(e);
|
||||
this.input.trigger(e, [this]);
|
||||
};
|
||||
|
||||
/**
|
||||
* Clear errors
|
||||
*/
|
||||
Dropify.prototype.clearErrors = function()
|
||||
{
|
||||
if (typeof this.errorsContainer !== "undefined") {
|
||||
this.errorsContainer.children('ul').html('');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Show error in DOM
|
||||
*
|
||||
* @param {String} errorKey
|
||||
*/
|
||||
Dropify.prototype.showError = function(errorKey)
|
||||
{
|
||||
if (typeof this.errorsContainer !== "undefined") {
|
||||
this.errorsContainer.children('ul').append('<li>' + this.getError(errorKey) + '</li>');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get error message
|
||||
*
|
||||
* @return {String} message
|
||||
*/
|
||||
Dropify.prototype.getError = function(errorKey)
|
||||
{
|
||||
var error = this.settings.error[errorKey],
|
||||
value = '';
|
||||
|
||||
if (errorKey === 'fileSize') {
|
||||
value = this.settings.maxFileSize;
|
||||
} else if (errorKey === 'minWidth') {
|
||||
value = this.settings.minWidth;
|
||||
} else if (errorKey === 'maxWidth') {
|
||||
value = this.settings.maxWidth;
|
||||
} else if (errorKey === 'minHeight') {
|
||||
value = this.settings.minHeight;
|
||||
} else if (errorKey === 'maxHeight') {
|
||||
value = this.settings.maxHeight;
|
||||
} else if (errorKey === 'imageFormat') {
|
||||
value = this.settings.allowedFormats.join(', ');
|
||||
} else if (errorKey === 'fileExtension') {
|
||||
value = this.settings.allowedFileExtensions.join(', ');
|
||||
}
|
||||
|
||||
if (value !== '') {
|
||||
return error.replace('{{ value }}', value);
|
||||
}
|
||||
|
||||
return error;
|
||||
};
|
||||
|
||||
/**
|
||||
* Show the loader
|
||||
*/
|
||||
Dropify.prototype.showLoader = function()
|
||||
{
|
||||
if (typeof this.loader !== "undefined") {
|
||||
this.loader.show();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the loader
|
||||
*/
|
||||
Dropify.prototype.hideLoader = function()
|
||||
{
|
||||
if (typeof this.loader !== "undefined") {
|
||||
this.loader.hide();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Destroy dropify
|
||||
*/
|
||||
Dropify.prototype.destroy = function()
|
||||
{
|
||||
this.input.siblings().remove();
|
||||
this.input.unwrap();
|
||||
this.isInit = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Init dropify
|
||||
*/
|
||||
Dropify.prototype.init = function()
|
||||
{
|
||||
this.createElements();
|
||||
};
|
||||
|
||||
/**
|
||||
* Test if element is init
|
||||
*/
|
||||
Dropify.prototype.isDropified = function()
|
||||
{
|
||||
return this.isInit;
|
||||
};
|
||||
|
||||
$.fn[pluginName] = function(options) {
|
||||
this.each(function() {
|
||||
if (!$.data(this, pluginName)) {
|
||||
$.data(this, pluginName, new Dropify(this, options));
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
+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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+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');
|
||||
}
|
||||
+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;
|
||||
}
|
||||
+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";
|
||||
+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;
|
||||
}
|
||||
|
||||
+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;
|
||||
+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%; }
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
@mixin clearfix() {
|
||||
*zoom: 1;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
+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;
|
||||
}
|
||||
}
|
||||
|
||||
+474
@@ -0,0 +1,474 @@
|
||||
$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-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