edgware/edgware/templates/editor.html

280 lines
9.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" href="/static/css/farbtastic.css" />
<link rel="stylesheet" href="/static/css/editor.css" />
<link rel="stylesheet" href="/static/css/fonts.css" />
<link rel="stylesheet" href="/static/css/jquery.tooltip.css" />
<link rel="stylesheet" href="/static/colorpicker/css/colorpicker.css" type="text/css" />
<link rel="stylesheet" media="screen" type="text/css" href="/static/colorpicker/css/layout.css" />
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/jquery-ui.js"></script>
<script type="text/javascript" src="/static/js/farbtastic.js"></script>
<script type="text/javascript" src="/static/js/jquery.Jcrop.js"></script>
<script type="text/javascript" src="/static/js/jquery.color.js"></script>
<script type="text/javascript" src="/static/js/jquery.tooltip.js"></script>
<script type="text/javascript" src="/static/js/editor.js"></script>
<script type="text/javascript" src="/static/js/placeholder.js"></script>
<script type="text/javascript" src="/static/js/utils.js"></script>
<script type="text/javascript" src="/static/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/static/colorpicker/js/colorpicker.js"></script>
<script type="text/javascript" src="/static/colorpicker/js/eye.js"></script>
<script type="text/javascript" src="/static/colorpicker/js/utils.js"></script>
<script src="/static/Jcrop/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="/static/Jcrop/css/jquery.Jcrop.css" type="text/css" />
<style type="text/css">
body {
font-size: 14px;
}
</style>
<script language="Javascript">
jQuery(function(){
jQuery('img').Jcrop();
});
</script>
<script type="text/javascript">
var ARTICLE_ID = 0;
{% if article_id %}
ARTICLE_ID = {{article_id}};
ARTICLE_WIDTH = {{article_width}};
ARTICLE_HEIGHT = {{article_height}};
REVISION_NO = {{rev_no}};
FRONTEND_URL = "{{frontend_url}}";
{% endif %}
var UUID = parseInt(new Date().getTime() / (10000 * (Math.random() * 10)));
USER_ID = {{ user.id }};
isAjaxActive = false;
$(document).ready(function() {
edgeBin = new Bin();
$('.binSelect').change(function() {
// var PAGE_ID = 1;
var cat = $('#searchSelect').val();
if (cat == 0) {
return;
}
var type = $('#typeSelect').val();
if (type == 0) {
type = 'image';
$('#typeSelect option[value=image]').attr("selected", "selected");
}
edgeBin.loadCategory(cat, type);
});
});
</script>
<title>
Edgware Editor - Hi {{ user.username }}
</title>
</head>
<body>
<script type="text/html" id="tmpl_canvas">
<div id="canvas<%= index %>" class="canvas" data-index="<%= index %>">
<div class="page_btns">
<div class="delete_page page_btn">
Delete Page
</div>
<div class="move_page_up page_btn">
Move Page Up
</div>
<div class="move_page_down page_btn">
Move Page Down
</div>
<div class="toggle_handle page_btn">
Toggle Handle
</div>
<div class="printMe page_btn">
Get PDF
</div>
<div class="viewFrontend page_btn">
View Webpage
</div>
</div>
<div class="ruler ruler_horiz"><div class="handle handle_horiz_left"></div><div class="handle handle_horiz_right"></div></div>
<div class="ruler ruler_vert"><div class="handle handle_vert_top"></div><div class="handle handle_vert_bottom"></div></div>
<div class="audio_video"></div>
</div>
</script>
<script type="text/html" id="tmpl_textbox">
<div class="textbox_canvas">
<div class="textbox_canvas_content">
<%= html %>
</div>
</div>
<div class="textbox_canvas_toolbox"></div>
<input onclick="removeEditor(this);" type="button" class="save_text" value="Save"/>
</script>
<script type="text/html" id="tmpl_imagebox">
<div class="imagebox_canvas">
</div>
<input onclick="removeEditor(this);" type="button" class="save_text" value="Save"/>
</script>
<script type="text/html" id="tmpl_imagebox_crop">
<div class="imagebox_crop" style="z-index:9999999;">
(<a href='#' class='do_crop_imagebox'>crop</a>)
(<a href='#' class='cancel_crop_imagebox'>cancel</a>)
</div>
</script>
<script type="text/html" id="tmpl_imagebox_properties">
<div class="properties imagebox_props">
(<a href="#" class="crop_imagebox">crop</a>)
<a href="#" class="z-index-sub"><</a> z <a href="#" class="z-index-add">></a> <a href="#" class="delete_box">(del)</a>
<br>
<a href="#" class="nudge_box">nudge</a>
<br><br>
Opacity: <br>
<div id="slider-range-max" class="change_opacity"></div>
Border: <br>
<div id="slider-range-max" class="change_border"></div>
<div class="borderColorSelector"><div style="background-color: #0000ff"></div></div>
<select class="borderStyle" name="borderStyle">
<option value="solid">solid</option>
<option value="dotted">dotted</option>
<option value="double">double</option>
<option value="dashed">dashed</option>
</select>
</div>
</script>
<script type="text/html" id="tmpl_textbox_properties">
<div class="properties textbox_props">
(<a href="#" class="edit_textbox">edit</a>) <a href="#" class="delete_box">(del)</a>
<a href="#" class="z-index-sub"><</a> z <a href="#" class="z-index-add">></a>
<br>
<a href="#" class="nudge_box">nudge</a>
<br><br>
Padding: <br>
<div id="slider-range-max" class="change_padding"></div>
Opacity: <br>
<div id="slider-range-max" class="change_opacity"></div>
Background:<br> ( <a href="#" class="background_transparent">transparent</a>)
<div class="backgroundColorSelector"><div style="background-color: #0000ff"></div></div>
Border: <br>
<div id="slider-range-max" class="change_border"></div>
<div class="borderColorSelector"><div style="background-color: #0000ff"></div></div>
<select class="borderStyle" name="borderStyle">
<option value="solid">solid</option>
<option value="dotted">dotted</option>
<option value="double">double</option>
<option value="dashed">dashed</option>
</select>
</div>
</script>
<script type="text/html" id="tmpl_resource_image">
<div class="resourceMenu">
<ul>
<li class="image_rotate">Rotate Image</li>
</ul>
</div>
</script>
<script type="text/html" id="tmpl_resource_doc">
<div class="resourceMenu">
<ul>
<li class="download_doc">Download Text</li>
</ul>
</div>
</script>
<script type="text/html" id="tmpl_resource_av">
<div class="resourceMenu">
<ul>
<!-- <li class="upload_srts">Upload Subtitles</li> -->
<li class="play_media">Play</li>
</ul>
</div>
</script>
<script type="text/html" id="tmpl_historyData">
<div class="historyPage">Page: <%= page_no %></div>
<div class="historyBoxType">BoxType: <%= box_type %></div>
<div class="historyAction">Action: <%= prop %></div>
<div class="historyOldVal">Old Value: <%= old_val %></div>
<div class="historyNewVal">New Value: <%= new_val %></div>
</script>
<div id="ajaxBusy">
</div>
<div id="wrapper">
<div id="canvasContainer">
</div>
<div id="bins">
<div id="bin">
<div id="binTop">
<div id="searchCat">
<div class="addTextBoxWrapper">
<div class='newTextBox english' title="Drag to page to add an english textbox">
+ TEXTBOX
</div>
<div class="newTextBox arabic" title="Drag to page to add an arabic textbox">
إضافة مربع
</div>
</div>
</div>
<div id="addElements">
<select id="searchSelect" class="binSelect" name="searchSelect">
<option value="0">Study</option>
{% for c in categories %}
<option value="{{c.id}}">{{c.name}}</option>
{% endfor %}
</select>
<select id="typeSelect" class="binSelect" name="typeSelect">
<option value="0">Type</option>
<option value="image">Images</option>
<option value="audio">Audio</option>
<option value="video">Video</option>
<option value="text">Text</option>
</select>
<div style="clear:both;"></div>
<div class="navControls">
Displaying <span class="start_index">0</span> to <span class="end_index">0</span> of <span class="totalResources">0</span> resources<br />
<a href="#" onclick='return false;' class="prevPage"><< Prev</a>
<a href="#" onclick='return false;' class="nextPage">Next >></a>
<br />
<input class="searchBin placeholder" data-placeholder="Search" />
</div>
</div>
<div class="binResources">
</div>
</div>
</div>
</div>
<div id="controls">
<a href="#" id="newPage">Add new page</a>
</div>
<div id="coordinates" style="position:fixed;bottom:20px;left:10px;z-index:10000;">
</div>
</div>
<div id="historyWindow">
<div class="historyTitle">Others' Edits:</div>
<div class="historyItems">
</div>
</div>
</body>
</html>