Commit f2263300 authored by Robert Lyon's avatar Robert Lyon
Browse files

Installing dropzonejs library to handle drag / drop (Bug #1050297)



At this stage the drag drop should only work in HTML5 compliant browsers
Displays a preview of the file if an image

Added styles to display a zone area to drop file (even though the whole page
is a drop zone)

Made the dropzone area show by default for compatible browsers and
have hidden the preview images. Added visual feedback to user for
dropping items in dropzone

Change-Id: I7a3104d7ded53f1c805779db86d407d2ec1aac26
Signed-off-by: Robert Lyon's avatarRobert Lyon <robertl@catalyst.net.nz>
parent c61916a5
......@@ -575,6 +575,11 @@ function pieform_element_filebrowser_doupdate(Pieform $form, $element) {
if (!empty($_FILES['userfile']['name'])) {
if (!is_array($_FILES['userfile']['name'])) {
if (!empty($_POST['_userfile']) && is_array($_POST['_userfile'])) {
// renaming file for drag and drop
$_FILES['userfile']['name'] = $_POST['_userfile']['name'];
$_FILES['userfile']['type'] = $_POST['_userfile']['type'];
}
if (strlen($_FILES['userfile']['name']) > 1024) {
return array(
'error' => true,
......@@ -595,7 +600,16 @@ function pieform_element_filebrowser_doupdate(Pieform $form, $element) {
'uploadfoldername' => param_variable($prefix . '_foldername'),
'resizeonuploaduserenable' => $resizeimage,
);
if (get_config('licensemetadata')) {
if (get_config('licensemetadata') && param_variable('dropzone')) {
$data = array_merge($data, array(
'license' => license_coalesce(null,
param_variable($prefix . '_license'),
param_variable($prefix . '_license_other', null)),
'licensor' => param_variable($prefix . '_licensor'),
'licensorurl' => param_variable($prefix . '_licensorurl'),
));
}
else if (get_config('licensemetadata')) {
$data = array_merge($data, array(
'license' => license_coalesce(null,
param_variable($prefix . '_edit_license'),
......@@ -1410,7 +1424,9 @@ function pieform_element_filebrowser_views_js(Pieform $form, $element) {
function pieform_element_filebrowser_get_headdata($element) {
global $THEME;
$headdata = array('<script type="text/javascript" src="' . get_config('wwwroot') . 'artefact/file/js/filebrowser.js"></script>');
$headdata[] = '<script type="text/javascript" src="' . get_config('wwwroot') . 'js/dropzone/dropzone.min.js"></script>';
$headdata[] = '<link href="' . get_config('wwwroot') . 'js/dropzone/css/dropzone.css" type="text/css" rel="stylesheet">';
$headdata[] = '<script type="text/javascript" src="' . get_config('wwwroot') . 'artefact/file/js/filedropzone.js"></script>';
$strings = PluginArtefactFile::jsstrings('filebrowser');
$jsstrings = '';
foreach ($strings as $section => $sectionstrings) {
......
......@@ -91,6 +91,13 @@ function FileBrowser(idprefix, folderid, config, globalconfig) {
connect(self.id + '_userfile', 'onchange', self.upload_submit);
}
this.upload_validate_dropzone = function () {
if ($(self.id + '_notice') && !$(self.id + '_notice').checked) {
return get_string('youmustagreetothecopyrightnotice');
}
return false;
}
this.upload_validate = function () {
if ($(self.id + '_notice') && !$(self.id + '_notice').checked) {
appendChildNodes(self.id+'_upload_messages', DIV({'class':'error'}, get_string('youmustagreetothecopyrightnotice')));
......@@ -99,6 +106,19 @@ function FileBrowser(idprefix, folderid, config, globalconfig) {
return !isEmpty($(self.id + '_userfile').value);
}
this.upload_presubmit_dropzone = function (e) {
// Display upload status
self.nextupload++;
var message = makeMessage(DIV(null,
IMG({'src':get_themeurl('images/loading.gif')}), ' ',
get_string('uploadingfiletofolder',e.name,self.foldername)
), 'info');
setNodeAttribute(message, 'id', 'uploadstatusline' + self.nextupload);
appendChildNodes(self.id + '_upload_messages', message);
$(self.id+'_uploadnumber').value = self.nextupload;
return true;
}
this.upload_presubmit = function (e) {
// Display upload status
if ($(self.id + '_userfile').files) {
......
/**
* File browser dropzone
* @source: http://gitorious.org/mahara/mahara
*
* @licstart
* Copyright (C) 2006-2013 Catalyst IT Ltd
*
* The JavaScript code in this page is free software: you can
* redistribute it and/or modify it under the terms of the GNU
* General Public License (GNU GPL) as published by the Free Software
* Foundation, either version 3 of the License, or (at your option)
* any later version. The code is distributed WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
*
* As additional permission under GNU GPL version 3 section 7, you
* may distribute non-source (e.g., minimized or compacted) forms of
* that code without the copy of the GNU GPL normally required by
* section 4, provided you include this license notice and a URL
* through which recipients can access the Corresponding Source.
* @licend
*/
// set up the dropzone
jQuery(document).ready(function() {
// to avoid any clashes with other javascript
var j = jQuery.noConflict();
// turn on the 'drop file here' area for browsers that can handle it.
j('#fileDropzone').hide();
if ('draggable' in document.createElement('span')) {
j('#fileDropzone').css('min-height', '50px');
j('#fileDropzone').show();
}
// Dropzone uploads it's file queue one at a time so to keep
// a count of uploads we need to override the data.uploadnumber
var dropzone_uploadnumber = 0;
var prefix = j('#file_dropzone_container').attr('class');
// allow the whole page to be droppable
// and display the previews below upload file selector
var myDropzone = new Dropzone(document.body, {
url: document.URL,
previewsContainer: 'div#fileDropzone',
maxFilesize: 2,
dictFileTooBig: strings.maxuploadsize + ' 2mb',
maxThumbnailFilesize: 1,
clickable: false,
createImageThumbnails: false,
paramName: 'userfile'
});
// on sending the file append the form field data and the
// fields that Pieform would normally create
myDropzone.on("sending", function(userfile, xhr, formData) {
j('#files input').each(function() {
formData.append(this.name, this.value);
});
j('#files select').each(function() {
formData.append(this.name, j('#files select[name="' + this.name + '"] option:selected').val());
});
formData.append(prefix + '_upload', '1');
formData.append('dropzone', '1');
formData.append('pieform_jssubmission', '1');
// remove the data from these as we are only trying to
// upload a file not do any of these options that appear
// earlier in the hierarchy
formData.append(prefix + '_createfolder', '');
formData.append(prefix + '_update', '');
formData.append(prefix + '_edit', '');
formData.append(prefix + '_delete', '');
j('#file_dropzone_container').removeClass('dragover');
});
myDropzone.on("addedfile", function(userfile) {
window[prefix].dragdrop = true;
window[prefix].upload_presubmit_dropzone(userfile);
var response = window[prefix].upload_validate();
if (response) {
myDropzone.errorProcessing(userfile,response);
}
});
// successful return from the ajax call that will
// return pieform data - which could contain
// error, problem or success
myDropzone.on("success", function(userfile,data) {
if (data) {
try {
data = JSON.parse(data);
}
catch(error) {
myDropzone.errorProcessing(userfile,error);
}
}
dropzone_uploadnumber ++;
data['uploadnumber'] = dropzone_uploadnumber;
window[prefix].callback(window[prefix].form, data);
});
// handling errors stemming from dropzone itself
myDropzone.on("error", function(userfile, errmsg, errxhr) {
var data = {'error':'true'};
data['message'] = errmsg;
if (undefined != errxhr) {
data['message'] += errxhr;
}
window[prefix].callback(window[prefix].form, data);
});
j(document.body).bind('dragenter', function(ev) {
ev.stopPropagation();
ev.preventDefault();
});
j('#file_dropzone_container').bind('dragover', function(ev) {
ev.stopPropagation();
ev.preventDefault();
ev.originalEvent.dataTransfer.dropEffect = 'copy';
j('#file_dropzone_container').addClass('dragover');
return false;
});
j('#file_dropzone_container').bind('dragleave', function(ev) {
ev.stopPropagation();
ev.preventDefault();
ev.originalEvent.dataTransfer.dropEffect = 'move';
j('#file_dropzone_container').removeClass('dragover');
return false;
});
});
......@@ -85,6 +85,7 @@ $string['Details'] = 'Details';
$string['Download'] = 'Download';
$string['downloadfile'] = 'Download %s';
$string['downloadoriginalversion'] = 'Download the original version';
$string['dragdrophere'] = 'Drop files here to upload';
$string['editfile'] = 'Edit file';
$string['editfolder'] = 'Edit folder';
$string['editingfailed'] = 'Editing failed: file or folder does not exist any more';
......
......@@ -89,6 +89,12 @@
<input type="submit" class="submit" name="{$prefix}_createfolder" id="{$prefix}_createfolder" value="{str tag=createfolder section=artefact.file}" /></div>
{/if}
<div id="file_dropzone_container" class="{$prefix}">
<div id="fileDropzone" class="dropzone-previews" style="display:none;">
<div class="dz-message">{str tag=dragdrophere section=artefact.file}</div>
</div>
</div>
<div id="{$prefix}_foldernav" class="foldernav">
{include file="artefact:file:form/folderpath.tpl" path=$path querybase=$querybase owner=$tabs.owner ownerid=$tabs.ownerid}
</div>
......
......@@ -94,4 +94,27 @@ tr.folderhover a,
}
#instconf_folder_selectlist {
margin: 0 0 15px 0;
}
/* Drop file upload */
#file_dropzone_container {
border-radius: 5px;
border: 2px solid #EBF0F4;
margin-bottom: 3px;
}
#file_dropzone_container .dz-message {
height: 30px;
padding: 15px 0 0;
margin: 0;
opacity: 1;
position: relative;
transition: opacity 0.3s ease-in-out 0s;
text-align: center;
font-size: 2em;
color: #CBCBCB;
}
#file_dropzone_container .dz-preview {
display: none;
}
#file_dropzone_container.dragover {
background-color: #EBF0F4;
}
\ No newline at end of file
dropzonejs
-----
Source: https://github.com/enyo/dropzone
Version: 3.1.0
Modifications:
- none
\ No newline at end of file
/* The MIT License */
.dropzone,
.dropzone *,
.dropzone-previews,
.dropzone-previews * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.dropzone {
position: relative;
border: 1px solid rgba(0,0,0,0.08);
background: rgba(0,0,0,0.02);
padding: 1em;
}
.dropzone.dz-clickable {
cursor: pointer;
}
.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message span {
cursor: pointer;
}
.dropzone.dz-clickable * {
cursor: default;
}
.dropzone .dz-message {
opacity: 1;
-ms-filter: none;
filter: none;
}
.dropzone.dz-drag-hover {
border-color: rgba(0,0,0,0.15);
background: rgba(0,0,0,0.04);
}
.dropzone.dz-started .dz-message {
display: none;
}
.dropzone .dz-preview,
.dropzone-previews .dz-preview {
background: rgba(255,255,255,0.8);
position: relative;
display: inline-block;
margin: 17px;
vertical-align: top;
border: 1px solid #acacac;
padding: 6px 6px 6px 6px;
}
.dropzone .dz-preview.dz-file-preview [data-dz-thumbnail],
.dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] {
display: none;
}
.dropzone .dz-preview .dz-details,
.dropzone-previews .dz-preview .dz-details {
width: 100px;
height: 100px;
position: relative;
background: #ebebeb;
padding: 5px;
margin-bottom: 22px;
}
.dropzone .dz-preview .dz-details .dz-filename,
.dropzone-previews .dz-preview .dz-details .dz-filename {
overflow: hidden;
height: 100%;
}
.dropzone .dz-preview .dz-details img,
.dropzone-previews .dz-preview .dz-details img {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.dropzone .dz-preview .dz-details .dz-size,
.dropzone-previews .dz-preview .dz-details .dz-size {
position: absolute;
bottom: -28px;
left: 3px;
height: 28px;
line-height: 28px;
}
.dropzone .dz-preview.dz-error .dz-error-mark,
.dropzone-previews .dz-preview.dz-error .dz-error-mark {
display: block;
}
.dropzone .dz-preview.dz-success .dz-success-mark,
.dropzone-previews .dz-preview.dz-success .dz-success-mark {
display: block;
}
.dropzone .dz-preview:hover .dz-details img,
.dropzone-previews .dz-preview:hover .dz-details img {
display: none;
}
.dropzone .dz-preview .dz-success-mark,
.dropzone-previews .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark,
.dropzone-previews .dz-preview .dz-error-mark {
display: none;
position: absolute;
width: 40px;
height: 40px;
font-size: 30px;
text-align: center;
right: -10px;
top: -10px;
}
.dropzone .dz-preview .dz-success-mark,
.dropzone-previews .dz-preview .dz-success-mark {
color: #8cc657;
}
.dropzone .dz-preview .dz-error-mark,
.dropzone-previews .dz-preview .dz-error-mark {
color: #ee162d;
}
.dropzone .dz-preview .dz-progress,
.dropzone-previews .dz-preview .dz-progress {
position: absolute;
top: 100px;
left: 6px;
right: 6px;
height: 6px;
background: #d7d7d7;
display: none;
}
.dropzone .dz-preview .dz-progress .dz-upload,
.dropzone-previews .dz-preview .dz-progress .dz-upload {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0%;
background-color: #8cc657;
}
.dropzone .dz-preview.dz-processing .dz-progress,
.dropzone-previews .dz-preview.dz-processing .dz-progress {
display: block;
}
.dropzone .dz-preview .dz-error-message,
.dropzone-previews .dz-preview .dz-error-message {
display: none;
position: absolute;
top: -5px;
left: -20px;
background: rgba(245,245,245,0.8);
padding: 8px 10px;
color: #800;
min-width: 140px;
max-width: 500px;
z-index: 500;
}
.dropzone .dz-preview:hover.dz-error .dz-error-message,
.dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
display: block;
}
/* The MIT License */
.dropzone,
.dropzone *,
.dropzone-previews,
.dropzone-previews * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.dropzone {
position: relative;
border: 1px solid rgba(0,0,0,0.08);
background: rgba(0,0,0,0.02);
padding: 1em;
}
.dropzone.dz-clickable {
cursor: pointer;
}
.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message span {
cursor: pointer;
}
.dropzone.dz-clickable * {
cursor: default;
}
.dropzone .dz-message {
opacity: 1;
-ms-filter: none;
filter: none;
}
.dropzone.dz-drag-hover {
border-color: rgba(0,0,0,0.15);
background: rgba(0,0,0,0.04);
}
.dropzone.dz-started .dz-message {
display: none;
}
.dropzone .dz-preview,
.dropzone-previews .dz-preview {
background: rgba(255,255,255,0.8);
position: relative;
display: inline-block;
margin: 17px;
vertical-align: top;
border: 1px solid #acacac;
padding: 6px 6px 6px 6px;
}
.dropzone .dz-preview.dz-file-preview [data-dz-thumbnail],
.dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] {
display: none;
}
.dropzone .dz-preview .dz-details,
.dropzone-previews .dz-preview .dz-details {
width: 100px;
height: 100px;
position: relative;
background: #ebebeb;
padding: 5px;
margin-bottom: 22px;
}
.dropzone .dz-preview .dz-details .dz-filename,
.dropzone-previews .dz-preview .dz-details .dz-filename {
overflow: hidden;
height: 100%;
}
.dropzone .dz-preview .dz-details img,
.dropzone-previews .dz-preview .dz-details img {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.dropzone .dz-preview .dz-details .dz-size,
.dropzone-previews .dz-preview .dz-details .dz-size {
position: absolute;
bottom: -28px;
left: 3px;
height: 28px;
line-height: 28px;
}
.dropzone .dz-preview.dz-error .dz-error-mark,
.dropzone-previews .dz-preview.dz-error .dz-error-mark {
display: block;
}
.dropzone .dz-preview.dz-success .dz-success-mark,
.dropzone-previews .dz-preview.dz-success .dz-success-mark {
display: block;
}
.dropzone .dz-preview:hover .dz-details img,
.dropzone-previews .dz-preview:hover .dz-details img {
display: none;
}
.dropzone .dz-preview .dz-success-mark,
.dropzone-previews .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark,
.dropzone-previews .dz-preview .dz-error-mark {
display: none;
position: absolute;
width: 40px;
height: 40px;
font-size: 30px;
text-align: center;
right: -10px;
top: -10px;
}
.dropzone .dz-preview .dz-success-mark,
.dropzone-previews .dz-preview .dz-success-mark {
color: #8cc657;
}
.dropzone .dz-preview .dz-error-mark,
.dropzone-previews .dz-preview .dz-error-mark {
color: #ee162d;
}
.dropzone .dz-preview .dz-progress,
.dropzone-previews .dz-preview .dz-progress {
position: absolute;
top: 100px;
left: 6px;
right: 6px;
height: 6px;
background: #d7d7d7;
display: none;
}
.dropzone .dz-preview .dz-progress .dz-upload,
.dropzone-previews .dz-preview .dz-progress .dz-upload {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0%;
background-color: #8cc657;
}
.dropzone .dz-preview.dz-processing .dz-progress,
.dropzone-previews .dz-preview.dz-processing .dz-progress {
display: block;
}
.dropzone .dz-preview .dz-error-message,
.dropzone-previews .dz-preview .dz-error-message {
display: none;
position: absolute;
top: -5px;
left: -20px;
background: rgba(245,245,245,0.8);
padding: 8px 10px;
color: #800;
min-width: 140px;
max-width: 500px;
z-index: 500;
}
.dropzone .dz-preview:hover.dz-error .dz-error-message,
.dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
display: block;
}
.dropzone {
border: 1px solid rgba(0,0,0,0.03);
min-height: 360px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: rgba(0,0,0,0.03);
padding: 23px;
}
.dropzone .dz-default.dz-message {
opacity: 1;
-ms-filter: none;
filter: none;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
background-image: url("../images/spritemap.png");