211 lines
7.4 KiB
HTML
211 lines
7.4 KiB
HTML
<%inherit file="base.html" />
|
|
<%! from django.core.urlresolvers import reverse %>
|
|
<%! from django.utils.translation import ugettext as _ %>
|
|
<%block name="bodyclass">is-signedin course uploads</%block>
|
|
<%block name="title">${_("Files & Uploads")}</%block>
|
|
|
|
<%namespace name='static' file='static_content.html'/>
|
|
|
|
<%block name="header_extras">
|
|
<script type="text/template" id="asset-tpl">
|
|
<%static:include path="js/asset.underscore"/>
|
|
</script>
|
|
</%block>
|
|
|
|
<%block name="jsextra">
|
|
<script src="${static.url('js/vendor/mustache.js')}"></script>
|
|
<script src="${static.url('js/vendor/jQuery-File-Upload/js/jquery.iframe-transport.js')}"> </script>
|
|
<script src="${static.url('js/vendor/jQuery-File-Upload/js/jquery.fileupload.js')}"> </script>
|
|
|
|
<script type="text/javascript">
|
|
var assets = new CMS.Models.AssetCollection(${asset_list});
|
|
assets.url = "${update_asset_callback_url}";
|
|
var assetsView = new CMS.Views.Assets({collection: assets, el: $('#asset_table_body')});
|
|
|
|
$(document).ready(function() {
|
|
$('.uploads .upload-button').bind('click', showUploadModal);
|
|
$('.upload-modal .close-button').bind('click', hideModal);
|
|
$('.upload-modal .choose-file-button').bind('click', showFileSelectionMenu);
|
|
});
|
|
|
|
var showUploadModal = function (e) {
|
|
e.preventDefault();
|
|
resetUploadModal();
|
|
// $modal has to be global for hideModal to work.
|
|
$modal = $('.upload-modal').show();
|
|
$('.file-input').bind('change', startUpload);
|
|
$('.upload-modal .file-chooser').fileupload({
|
|
dataType: 'json',
|
|
type: 'POST',
|
|
maxChunkSize: 100 * 1000 * 1000, // 100 MB
|
|
autoUpload: true,
|
|
progressall: function(e, data) {
|
|
var percentComplete = parseInt((100 * data.loaded) / data.total, 10);
|
|
showUploadFeedback(e, percentComplete);
|
|
},
|
|
maxFileSize: 100 * 1000 * 1000, // 100 MB
|
|
maxNumberofFiles: 100,
|
|
add: function(e, data) {
|
|
data.process().done(function () {
|
|
data.submit();
|
|
});
|
|
},
|
|
done: function(e, data) {
|
|
displayFinishedUpload(data.result);
|
|
}
|
|
|
|
});
|
|
|
|
$modalCover.show();
|
|
};
|
|
|
|
var showFileSelectionMenu = function(e) {
|
|
e.preventDefault();
|
|
$('.file-input').click();
|
|
};
|
|
|
|
var startUpload = function (e) {
|
|
var file = e.target.value;
|
|
|
|
$('.upload-modal h1').html(gettext('Uploading…'));
|
|
$('.upload-modal .file-name').html(file.substring(file.lastIndexOf("\\") + 1));
|
|
$('.upload-modal .choose-file-button').hide();
|
|
$('.upload-modal .progress-bar').removeClass('loaded').show();
|
|
};
|
|
|
|
var resetUploadModal = function () {
|
|
// Reset modal so it no longer displays information about previously
|
|
// completed uploads.
|
|
var percentVal = '0%';
|
|
$('.upload-modal .progress-fill').width(percentVal);
|
|
$('.upload-modal .progress-fill').html(percentVal);
|
|
$('.upload-modal .progress-bar').hide();
|
|
|
|
$('.upload-modal .file-name').show();
|
|
$('.upload-modal .file-name').html('');
|
|
$('.upload-modal .choose-file-button').html(gettext('Choose File'));
|
|
$('.upload-modal .embeddable-xml-input').val('');
|
|
$('.upload-modal .embeddable').hide();
|
|
};
|
|
|
|
var showUploadFeedback = function (event, percentComplete) {
|
|
var percentVal = percentComplete + '%';
|
|
$('.upload-modal .progress-fill').width(percentVal);
|
|
$('.upload-modal .progress-fill').html(percentVal);
|
|
};
|
|
|
|
var displayFinishedUpload = function (resp) {
|
|
var asset = resp.asset;
|
|
|
|
$('.upload-modal h1').html(gettext('Upload New File'));
|
|
$('.upload-modal .embeddable-xml-input').val(asset.portable_url);
|
|
$('.upload-modal .embeddable').show();
|
|
$('.upload-modal .file-name').hide();
|
|
$('.upload-modal .progress-fill').html(resp.msg);
|
|
$('.upload-modal .choose-file-button').html(gettext('Load Another File')).show();
|
|
$('.upload-modal .progress-fill').width('100%');
|
|
|
|
assetsView.addAsset(new CMS.Models.Asset(asset));
|
|
};
|
|
|
|
</script>
|
|
</%block>
|
|
|
|
<%block name="content">
|
|
|
|
<div class="wrapper-mast wrapper">
|
|
<header class="mast has-actions has-subtitle">
|
|
<h1 class="page-header">
|
|
<small class="subtitle">${_("Content")}</small>
|
|
<span class="sr">> </span>${_("Files & Uploads")}
|
|
</h1>
|
|
|
|
<nav class="nav-actions">
|
|
<h3 class="sr">${_("Page Actions")}</h3>
|
|
<ul>
|
|
<li class="nav-item">
|
|
<a href="#" class="button upload-button new-button"><i class="icon-plus"></i> ${_("Upload New File")}</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
</div>
|
|
|
|
<div class="main-wrapper">
|
|
<div class="inner-wrapper">
|
|
<div class="page-actions">
|
|
<input type="text" class="asset-search-input search wip-box" placeholder="search assets" style="display:none"/>
|
|
</div>
|
|
<article class="asset-library">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="thumb-col"></th>
|
|
<th class="name-col">Name</th>
|
|
<th class="date-col">Date Added</th>
|
|
<th class="embed-col">URL</th>
|
|
<th class="delete-col"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="asset_table_body" >
|
|
|
|
</tbody>
|
|
</table>
|
|
<nav class="pagination wip-box">
|
|
Page:
|
|
<ol class="pages">
|
|
<li>1</li>
|
|
<li><a href="#">2</a></li>
|
|
<li><a href="#">3</a></li>
|
|
<li><a href="#">4</a></li>
|
|
<li><a href="#">5</a></li>
|
|
</ol>
|
|
<a href="#" class="next">»</a>
|
|
</nav>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-modal modal">
|
|
<a href="#" class="close-button"><span class="close-icon"></span></a>
|
|
<div class="modal-body">
|
|
<h1>${_("Upload New File")}</h1>
|
|
<p class="file-name"></a>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill"></div>
|
|
</div>
|
|
<div class="embeddable">
|
|
<label>URL:</label>
|
|
<input type="text" class="embeddable-xml-input" value='' readonly>
|
|
</div>
|
|
<form class="file-chooser" action="${upload_asset_callback_url}"
|
|
method="post" enctype="multipart/form-data">
|
|
<a href="#" class="choose-file-button">${_("Choose File")}</a>
|
|
<input type="file" class="file-input" name="file" multiple>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-cover"></div>
|
|
|
|
|
|
</%block>
|
|
|
|
<%block name="view_alerts">
|
|
<!-- alert: save confirmed with close -->
|
|
<div class="wrapper wrapper-alert wrapper-alert-confirmation" role="status">
|
|
<div class="alert confirmation">
|
|
<i class="icon-ok"></i>
|
|
|
|
<div class="copy">
|
|
<h2 class="title title-3">${_('Your file has been deleted.')}</h2>
|
|
</div>
|
|
|
|
<a href="" rel="view" class="action action-alert-close">
|
|
<i class="icon-remove-sign"></i>
|
|
<span class="label">${_('close alert')}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</%block>
|