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

Commit

Permalink
create multi file upload widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidmason
davidmason committed Apr 2, 2014
1 parent daf433e commit 453df6e
Showing 1 changed file with 233 additions and 0 deletions.
233 changes: 233 additions & 0 deletions zanata-war/src/main/webapp/resources/zanata/multi-file-upload.xhtml
View file
@@ -0,0 +1,233 @@
<!--
Copyright 2014, Red Hat, Inc. and individual contributors as indicated by the
@author tags. See the copyright.txt file in the distribution for a full
listing of individual contributors.
This is free software; you can redistribute it and/or modify it under the
terms of the GNU Lesser General Public License as published by the Free
Software Foundation; either version 2.1 of the License, or (at your option)
any later version.
This software is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
details.
You should have received a copy of the GNU Lesser General Public License
along with this software; if not, write to the Free Software Foundation,
Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA, or see the FSF
site: http://www.fsf.org.
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:s="http://jboss.org/schema/seam/taglib"
xmlns:h="http://java.sun.com/jsf/html">

<composite:interface>
<composite:attribute name="url"
shortDescription="url to send upload xhr requests"
required="true"/>
<composite:attribute name="title"
shortDescription="tooltip for button"
required="true" />
</composite:interface>

<composite:implementation>

<!-- TODO need to give this button a distinct id so that I can refer to it from the script,
id needs to be accessed from the modal, -->
<button class="button button--snug l--push-top-half"
id="#{cc.clientId}-toggle-button"
data-toggle="modal"
data-target="##{cc.clientId}"
title="#{cc.attrs.title}">
<composite:insertChildren />
</button>

<div class="modal" id="#{cc.clientId}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal__dialog l--constrain-medium">

<header class="modal__header">
<h2 class="modal__title">Upload new documents</h2>
<button type="button" class="fileupload-close modal__close button--link" data-dismiss="modal"><i class="i i--huge i--cancel"></i></button>
</header>

<form class="fileupload" action="#{cc.attrs.url}" method="post" enctype="multipart/form-data">

<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 5mb</small><br />
<small class="txt--meta">Accepted: pot, dtd, txt, idml, htm, html, odt, odp, ods, odg</small>
</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>
</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>
<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>
</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>
</div>
</div>
</footer>
</div>

</form>

</div>
</div>


<script id="template-error" type="text/x-tmpl">
<![CDATA[
<li class="message message--danger l--pad-h-1">
{%=o.error%}
</li>
]]>
</script>

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
<![CDATA[
{% for (var i=0, file; file=o.files[i]; i++) { %}
<li class="template-upload">
<div class="list__item__content">
<div class="list__item__info">
<span class="list__title">{%=file.name%}</span>
{% if (file.error) { %}
<span class="fileupload-error message message--danger">{%=file.error%}</span>
{% } else { %}
<span class="fileupload-error message message--danger is-invisible"></span>
{% } %}
</div>
<div class="list__item__actions">
<span class="txt--meta">{%=o.formatFileSize(file.size)%}</span>
{% if (!i && !o.options.autoUpload) { %}
<button class="start is-invisible" disabled />
{% } %}
{% if (!i) { %}
<button class="button--link link--danger cancel" title="Remove document">
<span class="is-invisible">Remove document</span>
<i class="i i--large i--cancel"></i>
</button>
{% } %}
</div>
</div>
<div class="progress-bar">
<span class="progress-bar__item"></span>
<!-- <span class="progress-bar__success" style="width: 40%"></span> -->
</div>
</li>
{% } %}
]]>
</script>

<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
<![CDATA[
{% for (var i=0, file; file=o.files[i]; i++) { %}
<li class="template-download">
<div class="list__item__content">
<div class="list__item__info">
<span class="list__title">{%=file.name%}</span>
{% if (file.error) { %}
<span class="message message--danger">{%=file.error%}</span>
{% } %}
</div>

<div class="list__item__actions">
<span class="txt--meta">{%=o.formatFileSize(file.size)%}</span>
</div>
</div>
<div class="progress-bar">
{% if (file.error) { %}
<span class="progress-bar__item"></span>
{% } else { %}
<span class="progress-bar__success" style="width: 100%"></span>
{% } %}
</div>
</li>
{% } %}
]]>
</script>

<!-- FIXME refer to the jQuery we are already using, if it is a compatible version -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<h:outputScript target="body" library="jQuery-File-Upload" name="js/vendor/jquery.ui.widget.js" />

<!-- The Templates plugin is included to render the upload/download listings -->
<h:outputScript target="body" library="JavaScript-Templates" name="js/tmpl.min.js" />

<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<h:outputScript target="body" library="jQuery-File-Upload" name="js/jquery.iframe-transport.js" />

<!-- The basic File Upload plugin -->
<h:outputScript target="body" library="jQuery-File-Upload" name="js/jquery.fileupload.js" />

<!-- The File Upload processing plugin -->
<h:outputScript target="body" library="jQuery-File-Upload" name="js/jquery.fileupload-process.js" />

<!-- The File Upload validation plugin -->
<h:outputScript target="body" library="jQuery-File-Upload" name="js/jquery.fileupload-validate.js" />

<!-- The File Upload user interface plugin -->
<h:outputScript target="body" library="jQuery-File-Upload" name="js/jquery.fileupload-ui.js" />

<!-- The main application script -->
<h:outputScript target="body" library="jQuery-File-Upload" name="js/main.js" />

<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
<!-- FIXME this might not work as expected -->
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="js/cors/jquery.xdr-transport.js"></script>
<![endif]-->

</composite:implementation>
</html>

0 comments on commit 453df6e

Please sign in to comment.