cleaning up of asset widget; html tab is broken
This commit is contained in:
Tom Giannattasio
@@ -33,6 +33,7 @@ function initHTMLEditor($editor, $prev) {
|
||||
image : '/static/img/visual-editor-image-icon.png',
|
||||
onclick : function() {
|
||||
$assetWidget = $($('#asset-library-widget').html());
|
||||
$modalCover.css('z-index', '99999');
|
||||
$('.insert-asset-button', $assetWidget).bind('click', { editor: ed }, insertAsset);
|
||||
$body.append($assetWidget);
|
||||
}
|
||||
@@ -47,11 +48,17 @@ function initHTMLEditor($editor, $prev) {
|
||||
lineNumbers: true
|
||||
});
|
||||
|
||||
$(htmlEditor.getWrapperElement()).hide();
|
||||
$(htmlEditor.getWrapperElement()).bind('click', function() {
|
||||
$(htmlEditor).focus();
|
||||
});
|
||||
|
||||
$editor.find('.save-button, .cancel-button').bind('click', updatePreview);
|
||||
}
|
||||
|
||||
function insertAsset(e) {
|
||||
$assetWidget.remove();
|
||||
$modalCover.css('z-index', '1000');
|
||||
var editor = e.data.editor;
|
||||
editor.focus();
|
||||
editor.selection.setContent($(this).attr('data-markup'));
|
||||
@@ -67,5 +74,4 @@ function convertHTMLToVisual() {
|
||||
|
||||
function updatePreview() {
|
||||
$htmlPreview.html($visualEditor.html());
|
||||
}
|
||||
|
||||
}
|
||||
@@ -17,14 +17,13 @@ var commandDown;
|
||||
$(document).bind('keyup', onKeyboard);
|
||||
})();
|
||||
|
||||
|
||||
function initProblemEditors($editor, $prev) {
|
||||
$currentEditor = $editor;
|
||||
simpleEditor = CodeMirror.fromTextArea($editor.find('.edit-box')[0], {
|
||||
lineWrapping: true,
|
||||
extraKeys: {
|
||||
'Ctrl-N': newUnit,
|
||||
'Ctrl-H': makeHeader,
|
||||
'Ctrl-H': makeHeader,
|
||||
'Ctrl-V': makeVideo,
|
||||
'Ctrl-M': makeMultipleChoice,
|
||||
'Ctrl-C': makeCheckboxes,
|
||||
|
||||
@@ -115,18 +115,20 @@
|
||||
left: 50%;
|
||||
z-index: 99999;
|
||||
width: 900px;
|
||||
padding: 20px;
|
||||
margin-left: -450px;
|
||||
border-radius: 3px;
|
||||
background: $lightGrey;
|
||||
|
||||
header {
|
||||
height: 40px;
|
||||
margin-bottom: 20px;
|
||||
@include clearfix;
|
||||
padding: 25px 25px 30px;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
@include white-button;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
padding: 0;
|
||||
@@ -139,11 +141,13 @@
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 400px;
|
||||
height: 38px;
|
||||
float: left;
|
||||
width: 350px;
|
||||
height: 34px;
|
||||
padding-left: 36px;
|
||||
margin-top: 2px;
|
||||
background-color: #fff;
|
||||
background-position: 12px 10px;
|
||||
background-position: 12px 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -158,16 +162,39 @@
|
||||
|
||||
.upload-button {
|
||||
@include blue-button;
|
||||
float: right;
|
||||
padding: 8px 30px 10px;
|
||||
float: left;
|
||||
padding: 6px 20px 8px;
|
||||
margin-right: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
table {
|
||||
border: none;
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: block;
|
||||
width: 900px;
|
||||
height: 550px;
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
tr {
|
||||
display: table;
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 5px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-radius: 3px 3px 0 0;
|
||||
border: 1px solid #c5cad4;
|
||||
border: 1px solid $mediumGrey;
|
||||
|
||||
td,
|
||||
th {
|
||||
@@ -178,16 +205,18 @@
|
||||
|
||||
thead th {
|
||||
@include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
|
||||
padding: 6px 20px 7px;
|
||||
background-color: #ced2db;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
tbody {
|
||||
tbody {
|
||||
background: #fff;
|
||||
|
||||
tr {
|
||||
width: 890px;
|
||||
border-top: 1px solid #c5cad4;
|
||||
|
||||
&:first-child {
|
||||
@@ -222,6 +251,7 @@
|
||||
|
||||
.insert-asset-button {
|
||||
@include blue-button;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.embeddable-xml-input {
|
||||
|
||||
@@ -389,7 +389,6 @@
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 47px;
|
||||
width: 100%;
|
||||
|
||||
@@ -20,12 +20,14 @@
|
||||
e.preventDefault();
|
||||
$('.editor-tabs .current').removeClass('current');
|
||||
$(this).addClass('current');
|
||||
console.log($(this).attr('data-tab'));
|
||||
switch($(this).attr('data-tab')) {
|
||||
case 'simple':
|
||||
currentEditor = simpleEditor;
|
||||
$(simpleEditor.getWrapperElement()).show();
|
||||
$(xmlEditor.getWrapperElement()).hide();
|
||||
$(simpleEditor).focus();
|
||||
onSimpleEditorUpdate();
|
||||
break;
|
||||
case 'xml':
|
||||
currentEditor = xmlEditor;
|
||||
@@ -34,17 +36,19 @@
|
||||
$(xmlEditor).focus();
|
||||
break;
|
||||
case 'visual':
|
||||
currentEditor = visualEditor;
|
||||
convertHTMLToVisual();
|
||||
$('table.mceToolbar').show();
|
||||
$(htmlEditor.getWrapperElement()).hide();
|
||||
convertHTMLToVisual();
|
||||
break;
|
||||
case 'html':
|
||||
currentEditor = htmlEditor;
|
||||
convertVisualToHTML();
|
||||
$('table.mceToolbar').hide();
|
||||
$(htmlEditor.getWrapperElement()).show();
|
||||
convertVisualToHTML();
|
||||
$(htmlEditor).focus();
|
||||
break;
|
||||
}
|
||||
onSimpleEditorUpdate();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -59,8 +63,8 @@
|
||||
<span class="close-icon"></span>
|
||||
</a>
|
||||
<header>
|
||||
<input type="text" class="search">
|
||||
<a href="#" class="upload-button">Upload New File</a>
|
||||
<input type="text" class="search">
|
||||
</header>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -123,6 +127,125 @@
|
||||
<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>
|
||||
<nav class="pagination wip-box">
|
||||
|
||||
Reference in New Issue
Block a user