Skip to content

E
edx-platform
Commit e171d97d by Tom Giannattasio
Options

upload process; basic lms styles

parent af908104
Showing with 332 additions and 210 deletions
cms/static/css/html-editor.css
......@@ -33,6 +33,11 @@ h2 {
text-transform: uppercase;
}
h3 {
font-size: 19px;
font-weight: 400;
}
code {
margin: 0 2px;
padding: 0px 5px;
......
cms/static/js/base.js
......@@ -463,11 +463,25 @@ function displayFinishedUpload(xhr) {
}
var resp = JSON.parse(xhr.responseText);
$('.upload-modal .embeddable-xml-input').val('<img src="' + xhr.getResponseHeader('asset_url') + '"/>');
var extension = resp.url.match(/\.([0-9a-z]+)(?:[\?#]|$)/i);
var embedMarkup;
switch(extension[1]) {
case 'png':
case 'jpg':
case 'jpeg':
case 'gif':
embedMarkup = '<img src="' + xhr.getResponseHeader('asset_url') + '" />';
break;
default:
embedMarkup = '<a href="' + xhr.getResponseHeader('asset_url') + '">' + resp.displayname + '</a>';
break;
}
$('.upload-modal .embeddable-xml-input').val(embedMarkup);
$('.asset-library.widget .insert-asset-button').attr('data-markup', embedMarkup);
$('.upload-modal .embeddable').show();
$('.upload-modal .file-name').hide();
$('.upload-modal .progress-fill').html(resp.msg);
$('.upload-modal .choose-file-button').html('Load Another File').show();
$('.upload-modal .choose-file-button').html('Load Another File').addClass('another').show();
$('.upload-modal .progress-fill').width('100%');
// see if this id already exists, if so, then user must have updated an existing piece of content
......
cms/static/js/html-editor.js
......@@ -17,13 +17,13 @@ function initHTMLEditor($editor, $prev) {
theme : "advanced",
skin: 'studio',
// we may want to add "styleselect" when we collect all styles used throught the lms
// we may want to add "styleselect" when we collect all styles used throughout the lms
theme_advanced_buttons1 : "formatselect,bold,italic,underline,bullist,numlist,outdent,indent,blockquote,studio.asset,link,unlink",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "none",
theme_advanced_resizing : true,
theme_advanced_blockformats : "p,code,h2,h3,h4,h5,h6,blockquote",
theme_advanced_blockformats : "p,code,h2,h3,blockquote",
content_css : "/static/css/html-editor.css",
width: '100%',
height: '400px',
......@@ -32,11 +32,12 @@ function initHTMLEditor($editor, $prev) {
title : 'Add Asset',
image : '/static/img/visual-editor-image-icon.png',
onclick : function() {
$assetWidget = $($('#asset-library-widget').html());
$assetWidget.find('.close-button').bind('click', closeAssetWidget);
$assetWidget = $($('#asset-library-widget').html());
$modalCover.unbind('click');
$modalCover.bind('click', closeAssetWidget);
$modalCover.css('z-index', '99999');
$('.upload-button', $assetWidget).bind('click', uploadFromWidget);
$('.close-button', $assetWidget).bind('click', closeAssetWidget);
$('.insert-asset-button', $assetWidget).bind('click', { editor: ed }, insertAsset);
$body.append($assetWidget);
}
......@@ -54,6 +55,28 @@ function initHTMLEditor($editor, $prev) {
$editor.find('.save-button, .cancel-button').bind('click', updateHTMLPreview);
}
function uploadFromWidget(e) {
$('.library', $assetWidget).hide();
$('.upload-form', $assetWidget).show();
$('.choose-file-button', $assetWidget).bind('click', function(e) {
e.preventDefault();
$('.file-input', $assetWidget).click();
$('.file-input', $assetWidget).bind('change', startUpload);
});
}
function startUploadFromWidget(e) {
$('.upload-modal h1').html('Uploading…');
$('.upload-modal .file-name').html($('.file-input').val().replace('C:\\fakepath\\', ''));
$('.upload-modal .file-chooser').ajaxSubmit({
beforeSend: resetUploadBar,
uploadProgress: showUploadFeedback,
complete: displayFinishedUpload
});
$('.upload-modal .choose-file-button').hide();
$('.upload-modal .progress-bar').removeClass('loaded').show();
}
function insertAsset(e) {
closeAssetWidget();
var editor = e.data.editor;
......
cms/static/sass/_assets.scss
......@@ -37,6 +37,12 @@
@include blue-button;
padding: 10px 82px 12px;
font-size: 17px;
&.another {
@include white-button;
padding: 6px 22px 8px;
font-size: 13px;
}
}
.progress-bar {
......@@ -149,7 +155,7 @@
margin-top: 2px;
background-color: #fff;
background-position: 12px 8px;
font-size: 14px;
font-size: 13px;
}
.thumb-col {
......@@ -198,6 +204,21 @@
.upload-form {
display: none;
width: auto !important;
margin: 60px 30px 80px !important;
text-align: center;
h1 {
float: none;
font-size: 34px;
font-weight: 300;
text-align: center;
}
.insert-asset-button {
padding: 8px 40px 10px;
font-size: 17px;
}
}
}
......@@ -258,11 +279,6 @@
width: 100px;
}
.insert-asset-button {
@include blue-button;
font-size: 12px;
}
.embeddable-xml-input {
@include box-shadow(none);
width: 100%;
......@@ -279,6 +295,11 @@
}
}
.insert-asset-button {
@include blue-button;
font-size: 12px;
}
.pagination {
float: right;
margin: 15px 10px;
......
cms/static/sass/_lms.scss 0 → 100644
.components li {
font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #3c3c3c;
a {
color: #1d9dd9;
text-decoration: none;
}
p {
font-size: 16px;
line-height: 1.6;
}
h2 {
color: #646464;
font-size: 19px;
font-weight: 300;
letter-spacing: 1px;
margin-bottom: 15px;
text-transform: uppercase;
}
h3 {
font-size: 19px;
font-weight: 400;
}
code {
margin: 0 2px;
padding: 0px 5px;
border-radius: 3px;
border: 1px solid #eaeaea;
white-space: nowrap;
font-family: Monaco, monospace;
font-size: 14px;
background-color: #f8f8f8;
}
p + h2, ul + h2, ol + h2, p + h3 {
margin-top: 40px;
}
p + p, ul + p, ol + p {
margin-top: 20px;
}
p {
color: #3c3c3c;
font: normal 1em/1.6em;
margin: 0px;
}
}
\ No newline at end of file
cms/static/sass/_unit.scss
......@@ -40,14 +40,14 @@
}
}
h2 {
margin: 30px 0;
color: #646464;
font-size: 19px;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
}
// h2 {
// margin: 30px 0;
// color: #646464;
// font-size: 19px;
// font-weight: 300;
// letter-spacing: 1px;
// text-transform: uppercase;
// }
.components {
> li {
......
cms/static/sass/base-style.scss
......@@ -24,9 +24,10 @@
@import "modal";
@import "alerts";
@import "login";
@import "lms";
@import 'jquery-ui-calendar';
@import 'content-types';
@import 'module/module-styles.scss';
@import 'descriptor/module-styles.scss';
@import 'descriptor/module-styles.scss';
\ No newline at end of file
cms/templates/unit.html
......@@ -64,15 +64,14 @@
<span class="close-icon"></span>
</a>
<div class="upload-form">
<div class="upload-form upload-modal">
<h1>Upload New File</h1>
<p class="file-name"></p>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
<div class="embeddable">
<label>Embeddable XML:</label>
<input type="text" class="embeddable-xml-input" value="&lt;img src=&quot;&quot;/&gt;">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert File</a>
</div>
<form class="file-chooser" action="/Giannattasio/313/course/Photoshop_for_Monkeys/upload_asset" method="post" enctype="multipart/form-data">
<a href="#" class="choose-file-button">Choose File</a>
......@@ -80,192 +79,194 @@
</form>
</div>
<header>
<a href="#" class="upload-button">Upload New File</a>
<input type="text" class="search">
</header>
<table class="library-list">
<thead>
<tr>
<th class="thumb-col"></th>
<th class="name-col"><a href="#">Name <span class="sort-icon down"></span></a></th>
<th class="date-col"><a href="#">Date Added</a></th>
<th class="insert-col"></th>
</tr>
</thead>
<tbody id="asset_table_body">
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
</tbody>
</table>
<div class="library">
<header>
<a href="#" class="upload-button">Upload New File</a>
<input type="text" class="search" placeholder="search assets">
</header>
<table>
<thead>
<tr>
<th class="thumb-col"></th>
<th class="name-col"><a href="#">Name <span class="sort-icon down"></span></a></th>
<th class="date-col"><a href="#">Date Added</a></th>
<th class="insert-col"></th>
</tr>
</thead>
<tbody id="asset_table_body">
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">ut-logo-350-150.png</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
30 October, 2012 at 07:17 PM
</td>
<td class="insert-col">
<a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination wip-box">
Page:
<ol class="pages">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment