Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Commit

Permalink
show and hide portions of the form when upload is not supported
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidmason
davidmason committed Apr 29, 2014
1 parent e757dee commit 7f34125
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 40 deletions.
10 changes: 8 additions & 2 deletions zanata-war/src/main/webapp/resources/jQuery-File-Upload/9_5_6/js/main.js
View file
Expand Up @@ -75,7 +75,6 @@ $(function () {
e.preventDefault();
});


dropZone.bind('drop dragleave dragend', function (e) {
e.preventDefault();
dropZone.removeClass('is-active');
Expand All @@ -85,13 +84,20 @@ $(function () {
dropZone.addClass('is-active');
});

var accepted = uploadForm.data('accepted') || '';
var acceptedTypes = (function (commaSeparated) {
var types = commaSeparated.split(',');
$.each(types, function (i, type) {
types[i] = type.trim();
});
return new RegExp('(\.|\/)(' + types.join('|') + ')$', 'i');
})(uploadForm.data('accepted'));
})(accepted);

if (accepted.trim().length === 0) {
uploadForm.find('.js-upload-supported').addClass('is-hidden');
} else {
uploadForm.find('.js-upload-not-supported').addClass('is-hidden');
}

uploadForm.fileupload({
sequentialUploads: true,
Expand Down
86 changes: 48 additions & 38 deletions zanata-war/src/main/webapp/resources/zanata/multi-file-upload.xhtml
View file
Expand Up @@ -62,59 +62,69 @@ site: http://www.fsf.org.
<form class="fileupload" action="#{cc.attrs.url}" method="post" enctype="multipart/form-data" data-accepted="#{cc.attrs.accepted}">

<div class="modal__content">

<ul class="js-errors list--no-bullets">
</ul>

<div class="drag-drop l--push-all-1">
<p class="txt--lead l--push-bottom-0"><i class="i i--left i--document"></i>
Drag and drop or
<a href="#" style="display: inline-block;position:relative;overflow:hidden;">
browse files
<input type="file" name="files[]" multiple="multiple" style="position:absolute;top:0;left:0;direction:ltr;opacity:0;font-size:200px;" />
</a>
</p>
<small class="txt--meta">Maximum file size is 200MB</small><br />
<small class="txt--meta">Accepted: #{cc.attrs.accepted}</small>
<div class="js-upload-not-supported">
<div class="message--warning txt--align-center txt--hero">This project-version is not set to a type that supports web upload</div>
<div class="l--pad-h-2 l--pad-v-1">
<p>You can use the Zanata client to upload documents. Instructions for to upload documents with the client can be found in <a href="http://zanata.org/help/cli/cli-push/">Help - Document Upload with Client</a></p>
<p>A maintainer of this project can set or change the type in the project and version settings.</p>
</div>
</div>

<div class="panel l--push-h-1 l--push-v-half">
<!-- .files is used for attaching elements generated from templates. Could change to use id or data- -->
<ul class="files list--panel bg--higher">
</ul>
</div>
<div class="l--push-bottom-1 l--push-h-1 js-reveal">
<p class="txt--align-center">
<button class="button--link js-reveal__toggle" data-target="#fu-advanced">Advanced settings</button>
</p>
<div id="fu-advanced" class="l--pad-all-half bg--pop-higher is-hidden">
<label for="#filepath">File Path</label>
<input type="text" id="filepath" name="filepath" />
<label for="filelang">Source Language</label>
<select name="filelang" id="filelang">
<option value="english-US" selected="selected">English (United States)</option>
<option value="english-US">Something else</option>
</select>
<label for="fileparams">File Parameters</label>
<textarea name="fileparams" id="fileparams" class="l--push-bottom-0" style="background-image: none; background-position: 0% 0%; background-repeat: repeat repeat;"></textarea>
<div class="js-upload-supported">
<div class="drag-drop l--push-all-1">
<p class="txt--lead l--push-bottom-0"><i class="i i--left i--document"></i>
Drag and drop or
<a href="#" style="display: inline-block;position:relative;overflow:hidden;">
browse files
<input type="file" name="files[]" multiple="multiple" style="position:absolute;top:0;left:0;direction:ltr;opacity:0;font-size:200px;" />
</a>
</p>
<small class="txt--meta">Maximum file size is 200MB</small><br />
<small class="txt--meta">Accepted: #{cc.attrs.accepted}</small>
</div>
</div>
<!-- fileupload-progress is used in the script to locate the progress bar -->
<div class="fileupload-progress progress-bar">
<div class="progress">
<span class="progress-bar__success" style="width: 0%"></span>

<div class="panel l--push-h-1 l--push-v-half">
<!-- .files is used for attaching elements generated from templates. Could change to use id or data- -->
<ul class="files list--panel bg--higher">
</ul>
</div>
<div class="l--push-bottom-1 l--push-h-1 js-reveal">
<p class="txt--align-center">
<button class="button--link js-reveal__toggle" data-target="#fu-advanced">Advanced settings</button>
</p>
<div id="fu-advanced" class="l--pad-all-half bg--pop-higher is-hidden">
<label for="#filepath">File Path</label>
<input type="text" id="filepath" name="filepath" />
<label for="filelang">Source Language</label>
<select name="filelang" id="filelang">
<option value="english-US" selected="selected">English (United States)</option>
<option value="english-US">Something else</option>
</select>
<label for="fileparams">File Parameters</label>
<textarea name="fileparams" id="fileparams" class="l--push-bottom-0" style="background-image: none; background-position: 0% 0%; background-repeat: repeat repeat;"></textarea>
</div>
</div>
<!-- fileupload-progress is used in the script to locate the progress bar -->
<div class="fileupload-progress progress-bar">
<div class="progress">
<span class="progress-bar__success" style="width: 0%"></span>
</div>
</div>
</div>
<footer class="modal__footer l--pad-h-1 l--pad-v-half bg--highest">
<div class="g--tight">
<div class="g__item w--2-3 l--pad-v-quarter">
<!-- FIXME remove the default text and update when documents added -->
<span class="txt--meta"><i class="i i--left i-documents"></i><span class="js-file-count">No documents queued</span></span>
<span class="txt--meta js-upload-supported"><i class="i i--left i-documents"></i><span class="js-file-count">No documents queued</span></span>
</div>
<!-- fileupload-buttonbar is used in the script to find the global 'start' and 'cancel' buttons -->
<div class="fileupload-buttonbar g__item w--1-3 txt--align-right">
<button type="button" class="fileupload-cancel cancel button--link l--push-right-half" data-dismiss="modal">Cancel</button>
<button class="fileupload-main-start start button--primary" disabled="disabled">Upload Documents</button>
<button type="button" class="fileupload-done button--primary is-hidden" disabled="disabled" data-dismiss="modal">Done</button>
<button class="js-upload-supported fileupload-main-start start button--primary" disabled="disabled">Upload Documents</button>
<button type="button" class="js-upload-supported fileupload-done button--primary is-hidden" disabled="disabled" data-dismiss="modal">Done</button>
</div>
</div>
</footer>
Expand Down

0 comments on commit 7f34125

Please sign in to comment.