hrss/web/templates/setup.html

117 lines
4.4 KiB
HTML
Raw Normal View History

2018-10-24 23:57:41 +02:00
{% 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 %}