mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
Merge pull request #336 from adrexia/6943-drag-drop-upload-field
BUGFIX: Fixes #6943
This commit is contained in:
Sean Harvey
commit
97e44c0915
@ -60,3 +60,14 @@
|
||||
-o-box-shadow: $shadow $outerColor;
|
||||
box-shadow: $shadow $outerColor;
|
||||
}
|
||||
|
||||
@mixin clearfix{
|
||||
&:after{
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
*:first-child &{ zoom:1;}
|
||||
}
|
||||
|
||||
@ -4,6 +4,10 @@
|
||||
/** ----------------------------------------------- Typography. ------------------------------------------------ */
|
||||
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
|
||||
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
|
||||
/** This file contains generic mixins which we use throughout the admin panels. Mixins should be stored here rather than individual files so that we can keep. */
|
||||
/** ---------------------------------------------------- Hides the overflowing text from a container Note: you must define a width on the element with this overflow. ----------------------------------------------------- */
|
||||
/** ---------------------------------------------------- Clear the properties of sub form fields. Often needed for nested form fields and ----------------------------------------------------- */
|
||||
/** ---------------------------------------------------- Double tone borders http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */
|
||||
#AssetUploadField { border-bottom: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
|
||||
|
||||
body.cms.ss-uploadfield-edit-iframe { padding: 16px; overflow: auto; }
|
||||
@ -37,5 +41,6 @@ body.cms.ss-uploadfield-edit-iframe { padding: 16px; overflow: auto; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; display: none; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; -moz-box-shadow: #9a9a9a 0 0 3px 3px inset; -webkit-box-shadow: #9a9a9a 0 0 3px 3px inset; -o-box-shadow: #9a9a9a 0 0 3px 3px inset; box-shadow: #9a9a9a 0 0 3px 3px inset; border: 2px dashed gray; background: rgba(201, 205, 206, 0.8); display: none; height: 66px; width: 300px; float: left; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { padding: 15px 0 0; line-height: 22px; font-size: 20px; font-weight: bold; text-align: center; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { display: block; font-size: 12px; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone.active.hover { -moz-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 3px inset; -webkit-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 3px inset; -o-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 3px inset; box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 3px inset; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { z-index: 1; padding: 15px 0 0; line-height: 22px; font-size: 20px; font-weight: bold; text-align: center; display: block; margin: 0 auto; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { display: block; font-size: 12px; z-index: -1; }
|
||||
|
||||
@ -30,16 +30,47 @@
|
||||
Config: null,
|
||||
|
||||
onmatch: function() {
|
||||
|
||||
if(this.is('.readonly,.disabled')) return;
|
||||
|
||||
var fileInput = this.find('input');
|
||||
var dropZone = this.find('.ss-uploadfield-dropzone');
|
||||
var config = $.parseJSON(fileInput.data('config').replace(/'/g,'"'));
|
||||
|
||||
|
||||
/* Attach classes to dropzone when element can be dropped*/
|
||||
$(document).unbind('dragover');
|
||||
$(document).bind('dragover', function (e) {
|
||||
timeout = window.dropZoneTimeout;
|
||||
var $target = $(e.target);
|
||||
if (!timeout) {
|
||||
dropZone.addClass('active');
|
||||
} else {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
if ($target.closest('.ss-uploadfield-dropzone').length > 0) {
|
||||
dropZone.addClass('hover');
|
||||
} else {
|
||||
dropZone.removeClass('hover');
|
||||
}
|
||||
window.dropZoneTimeout = setTimeout(function () {
|
||||
window.dropZoneTimeout = null;
|
||||
dropZone.removeClass('active hover');
|
||||
}, 100);
|
||||
});
|
||||
|
||||
//disable default behaviour if file dropped in the wrong area
|
||||
$(document).bind('drop dragover', function (e){
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
|
||||
this.setConfig(config);
|
||||
this.fileupload($.extend(true,
|
||||
{
|
||||
formData: function(form) {
|
||||
|
||||
return [
|
||||
{name: 'SecurityID', value: $(form).find(':input[name=SecurityID]').val()},
|
||||
{name: 'ID', value: $(form).find(':input[name=ID]').val()}
|
||||
@ -90,6 +121,7 @@
|
||||
if (this.data('fileupload')._isXHRUpload({multipart: true})) {
|
||||
$('.ss-uploadfield-item-uploador').show();
|
||||
dropZone.show(); // drag&drop avaliable
|
||||
|
||||
}
|
||||
this._super();
|
||||
},
|
||||
@ -147,11 +179,13 @@
|
||||
});
|
||||
$('div.ss-upload *').entwine({
|
||||
getUploadField: function() {
|
||||
|
||||
return this.parents('div.ss-upload:first');
|
||||
}
|
||||
});
|
||||
$('div.ss-upload .ss-uploadfield-files .ss-uploadfield-item').entwine({
|
||||
onmatch: function() {
|
||||
|
||||
this.closest('.ss-upload').find('.ss-uploadfield-addfile').addClass('borderTop');
|
||||
},
|
||||
onunmatch: function() {
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
// TODO we need a seperated file for styles that are used in both cms and front end (such as buttons)
|
||||
@import "../admin/scss/themes/default.scss";
|
||||
|
||||
|
||||
|
||||
#AssetUploadField {
|
||||
border-bottom: 0;
|
||||
@include box-shadow(none);
|
||||
@ -203,17 +205,24 @@ body.cms.ss-uploadfield-edit-iframe {
|
||||
height: 66px;
|
||||
width: 300px;
|
||||
float: left;
|
||||
|
||||
&.active{
|
||||
&.hover{
|
||||
@include box-shadow(rgba(#fff,0.6) 0 0 3px 3px inset);
|
||||
}
|
||||
}
|
||||
div {
|
||||
z-index:1;
|
||||
padding: 15px 0 0;
|
||||
line-height: 22px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
||||
display:block;
|
||||
margin:0 auto;
|
||||
span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
z-index:-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user