223 lines
8.2 KiB
HTML
223 lines
8.2 KiB
HTML
<%inherit file="base.html" />
|
|
<%!
|
|
from django.core.urlresolvers import reverse
|
|
from django.utils.translation import ugettext as _
|
|
%>
|
|
<%block name="title">${_("Files & Uploads")}</%block>
|
|
<%block name="bodyclass">is-signedin course uploads view-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 type="text/javascript">
|
|
require(["domReady", "jquery", "gettext", "js/models/asset", "js/collections/asset",
|
|
"js/views/assets", "js/views/feedback_prompt",
|
|
"js/views/feedback_notification", "js/utils/modal", "jquery.fileupload"],
|
|
function(domReady, $, gettext, AssetModel, AssetCollection, AssetsView, PromptView, NotificationView, ModalUtils) {
|
|
|
|
var assets = new AssetCollection(${asset_list});
|
|
assets.url = "${asset_callback_url}";
|
|
var assetsView = new AssetsView({collection: assets, el: $('#asset_table_body')});
|
|
|
|
var hideModal = function (e) {
|
|
if (e) {
|
|
e.preventDefault();
|
|
}
|
|
$('.file-input').unbind('change.startUpload');
|
|
ModalUtils.hideModal();
|
|
};
|
|
|
|
var showUploadModal = function (e) {
|
|
e.preventDefault();
|
|
resetUploadModal();
|
|
ModalUtils.showModal();
|
|
$('.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);
|
|
}
|
|
|
|
});
|
|
};
|
|
|
|
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 AssetModel(asset));
|
|
};
|
|
|
|
domReady(function() {
|
|
$('.uploads .upload-button').bind('click', showUploadModal);
|
|
$('.upload-modal .close-button').bind('click', hideModal);
|
|
$('.upload-modal .choose-file-button').bind('click', showFileSelectionMenu);
|
|
});
|
|
|
|
}); // end of require()
|
|
</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="wrapper-content wrapper">
|
|
<section class="content">
|
|
<article class="asset-library content-primary" role="main">
|
|
<table>
|
|
<caption class="sr">${_("List of uploaded files and assets in this course")}</caption>
|
|
<colgroup>
|
|
<col class="thumb-cols" />
|
|
<col class="name-cols" />
|
|
<col class="date-cols" />
|
|
<col class="embed-cols" />
|
|
<col class="actions-cols" />
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th class="thumb-col">${_("Preview")}</th>
|
|
<th class="name-col">${_("Name")}</th>
|
|
<th class="date-col">${_("Date Added")}</th>
|
|
<th class="embed-col">${_("URL")}</th>
|
|
<th class="actions-col"><span class="sr">${_("Actions")}</span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="asset_table_body" >
|
|
|
|
</tbody>
|
|
</table>
|
|
</article>
|
|
|
|
<aside class="content-supplementary" role="complimentary">
|
|
<div class="bit">
|
|
<h3 class="title-3">${_("What files are included here?")}</h3>
|
|
<p>${_("Any file you upload to the course will be listed here, including your course image, textbook chapters, and any files you add directly to this page.")}</p>
|
|
</div>
|
|
<div class="bit">
|
|
<h3 class="title-3">${_("What can I do on this page?")}</h3>
|
|
<p>${_("You can click the file name to view or download the file, upload a new file, delete a file, and lock a file to prevent people who are not enrolled from accessing that specific file. You can also copy the location (URL) of a file to use elsewhere in your course.")}</p>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="upload-modal modal">
|
|
<a href="#" class="close-button"><i class="icon-remove-sign"></i> <span class="sr">${_('close')}</span></a>
|
|
<div class="modal-body">
|
|
<h1 class="title">${_("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="${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>
|
|
|
|
|
|
</%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>
|