117 lines
4.4 KiB
HTML
117 lines
4.4 KiB
HTML
{% extends 'template.html' %}
|
|
{% block content %}
|
|
<div id="wrapper" class="toggled bg-dark">
|
|
<!-- Sidebar -->
|
|
<div id="sidebar-wrapper" class="bg-dark bg-">
|
|
<ul class="sidebar-nav">
|
|
<li>
|
|
<span class="badge badge-danger">Element</span>
|
|
<code style="display:block" id="element-selector"></code>
|
|
</li>
|
|
<li>
|
|
<span class="badge badge-danger">Title</span>
|
|
<code style="display:block" id="title-selector"></code>
|
|
</li>
|
|
<li>
|
|
<span class="badge badge-danger">Content</span>
|
|
<code style="display:block" id="content-selector"></code>
|
|
</li>
|
|
<li>
|
|
<span class="badge badge-danger">Date</span>
|
|
<code style="display:block" id="date-selector"></code>
|
|
</li>
|
|
<li>
|
|
<span class="badge badge-danger">Author</span>
|
|
<code style="display:block" id="author-selector"></code>
|
|
</li>
|
|
<li>
|
|
<span class="badge badge-danger">Link</span>
|
|
<code style="display:block" id="link-selector"></code>
|
|
</li>
|
|
<li>
|
|
<form action="/newfeed" method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" id="url" name="url" value="{{ url }}">
|
|
<input type="hidden" id="element" name="element" value="">
|
|
<input type="hidden" id="title" name="title" value="">
|
|
<input type="hidden" id="content" name="content" value="">
|
|
<input type="hidden" id="date" name="date" value="">
|
|
<input type="hidden" id="author" name="author" value="">
|
|
<input type="hidden" id="link" name="link" value="">
|
|
<input type="submit" class="btn btn-primary" value="Generate">
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- /#sidebar-wrapper -->
|
|
<iframe id="preview" style="width:100%" src="/iframe/{{ url }}"></iframe>
|
|
<script>
|
|
$(function() {
|
|
function handleResize() {
|
|
$("#preview").height($(window).height());
|
|
}
|
|
$(window).resize(function() {
|
|
handleResize();
|
|
});
|
|
handleResize();
|
|
});
|
|
|
|
|
|
var lastCSS = false;
|
|
function hoverSelector() {
|
|
lastCSS = $(lastElement).css("border");
|
|
$(lastElement).css("border", "2px dashed orange")
|
|
}
|
|
function resetHoverSelector() {
|
|
$(lastElement).css("border", lastCSS);
|
|
}
|
|
|
|
|
|
var lastElement = false;
|
|
var selectedElement = false;
|
|
$("iframe").on("load", function() {
|
|
var iframeWnd = $($("iframe")[0].contentWindow);
|
|
|
|
// disable a links
|
|
//$("iframe").contents().find("a").attr("href", "#");
|
|
|
|
iframeWnd.on('click', function(event) {
|
|
selectedElement = $(event.target).getPath();
|
|
if (currentProperty) {
|
|
$("#"+$(currentProperty).text().toLowerCase()).val(selectedElement);
|
|
var t = selectedElement.split(">");
|
|
$("#"+$(currentProperty).text().toLowerCase()+"-selector").text(t[t.length-1]);
|
|
|
|
// reset
|
|
$(".sidebar-nav > li > span.badge-warning").removeClass("badge-warning").addClass("badge-success");
|
|
currentProperty = false;
|
|
resetHoverSelector();
|
|
}
|
|
});
|
|
iframeWnd.on('mousemove', function(event) {
|
|
if (currentProperty && lastElement != event.target) {
|
|
resetHoverSelector();
|
|
lastElement = event.target;
|
|
hoverSelector();
|
|
}
|
|
});
|
|
});
|
|
|
|
var currentProperty = false;
|
|
$(".sidebar-nav > li > span.badge").click(function(evt) {
|
|
var selectedProperty = $(this).text().toLowerCase();
|
|
|
|
// reset every elements
|
|
$(".sidebar-nav > li > span.badge.badge-warning").removeClass("badge-warning").addClass("badge-danger");
|
|
//$(".sidebar-nav > li > span.badge");
|
|
|
|
// set element
|
|
$(this).removeClass("badge-danger");
|
|
$(this).addClass("badge-warning");
|
|
currentProperty = this;
|
|
});
|
|
|
|
|
|
</script>
|
|
</div>
|
|
{% endblock %} |