- Improve HTML

- Improve layout
- Pull JavaScript and CSS out into their own files.
- Add jQuery
- jQuery-fy JavaScript.
This commit is contained in:
Raoul Snyman 2010-05-30 20:01:17 +02:00
parent 7c47e24cf0
commit b5af6bb5b9
6 changed files with 348 additions and 209 deletions

View File

@ -153,15 +153,16 @@ class ServiceItem(object):
self.RenderManager.set_override_theme(self.theme) self.RenderManager.set_override_theme(self.theme)
format = self._display_frames[row][u'text'].split(u'\n') format = self._display_frames[row][u'text'].split(u'\n')
#if screen blank then do not display footer #if screen blank then do not display footer
if self.cache[row] is not None: if row in self.cache and self.cache[row]:
frame = self.cache[row] frame = self.cache[row]
else: else:
if format[0]: if format[0]:
frame = self.RenderManager.generate_slide(format, frame = self.RenderManager.generate_slide(format,
self.raw_footer) self.raw_footer)
else: else:
frame = self.RenderManager.generate_slide(format, u'') frame = self.RenderManager.generate_slide(format, u'')
self.cache[row] = frame if frame:
self.cache.insert(row, frame)
return frame return frame
def add_from_image(self, path, title, image): def add_from_image(self, path, title, image):

View File

@ -5,191 +5,52 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OpenLP Remote Controller</title> <title>OpenLP Remote Controller</title>
<script type="text/javascript" src="/files/jquery.js"></script> <script type="text/javascript" src="/files/jquery.js"></script>
<script type='text/javascript'> <script type='text/javascript' src="/files/openlp.js"></script>
<script type='text/javascript' src="/files/init.js"></script>
function send_event(eventname, data) { <link rel="stylesheet" href="/files/style.css" type="text/css" />
/*var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if(req.readyState==4)
response(eventname, req);
}
var url = '';
if(eventname.substr(-8) == '_request')
url = 'request';
else
url = 'send';
url += '/' + eventname;
if(data!=null)
url += '?q=' + escape(data);
req.open('GET', url, true);
req.send();*/
var url = "";
if (eventname.substr(-8) == "_request")
{
url = "request";
}
else
{
url = "send";
}
url += "/" + eventname;
var args = {};
if (data != null)
{
args.q = escape(data);
}
$.get(url, args, function (data, textStatus) {
if (textStatus != "success")
{
if (eventname == "remotes_poll_request")
{
send_event("remotes_poll_request");
}
}
else
{
new_response(eventname, data);
}
});
}
function failed_response(eventname, req){
switch(eventname){
case 'remotes_poll_request':
if(req.status==408)
send_event("remotes_poll_request");
break;
}
}
function response(eventname, req){
if(req.status!=200){
failed_response(eventname, req);
return;
}
text = req.responseText;
switch(eventname){
case 'servicemanager_list_request':
var data = eval('(' + text + ')');
var html = '<table>';
for(row in data){
html += '<tr onclick="send_event('
html += "'servicemanager_set_item', " + row + ')"';
if(data[row]['selected'])
html += ' style="font-weight: bold"';
html += '>'
html += '<td>' + (parseInt(row)+1) + '</td>'
html += '<td>' + data[row]['title'] + '</td>'
html += '<td>' + data[row]['plugin'] + '</td>'
html += '<td>' + data[row]['notes'] + '</td>'
html += '</tr>';
}
html += '</table>';
document.getElementById('service').innerHTML = html;
break;
case 'slidecontroller_live_text_request':
var data = eval('(' + text + ')');
var html = '<table>';
for(row in data){
html += '<tr onclick="send_event('
html += "'slidecontroller_live_set', " + row + ')"';
if(data[row]['selected'])
html += ' style="font-weight: bold"';
html += '>';
html += '<td>' + data[row]['tag'] + '</td>';
html += '<td>' + data[row]['text'].replace(/\n/g, '<br>');
html += '</td></tr>';
}
html += '</table>';
document.getElementById('currentitem').innerHTML = html;
break;
case 'remotes_poll_request':
send_event("remotes_poll_request");
send_event("servicemanager_list_request");
send_event("slidecontroller_live_text_request");
break;
}
}
function new_response(eventname, text){
switch (eventname)
{
case 'servicemanager_list_request':
var data = eval('(' + text + ')');
var table = $("<table>");
for (row in data)
{
var trow = $("<tr>").click("send_event");
if (data[row]['selected'])
{
trow.attr("style", "font-weight: bold");
}
trow.append($("<td>").text(parseInt(row)+1));
trow.append($("<td>").text(data[row]['title']));
trow.append($("<td>").text(data[row]['plugin']));
trow.append($("<td>").text(data[row]['notes']));
table.append(trow);
}
$("#service").html(table);
break;
case 'slidecontroller_live_text_request':
var data = eval('(' + text + ')');
var html = '<table>';
for(row in data){
html += '<tr onclick="send_event('
html += "'slidecontroller_live_set', " + row + ')"';
if(data[row]['selected'])
html += ' style="font-weight: bold"';
html += '>';
html += '<td>' + data[row]['tag'] + '</td>';
html += '<td>' + data[row]['text'].replace(/\\n/g, '<br>');
html += '</td></tr>';
}
html += '</table>';
document.getElementById('currentitem').innerHTML = html;
break;
case 'remotes_poll_request':
send_event("remotes_poll_request");
send_event("servicemanager_list_request");
send_event("slidecontroller_live_text_request");
break;
}
}
send_event("servicemanager_list_request");
send_event("slidecontroller_live_text_request");
send_event("remotes_poll_request");
</script>
</head> </head>
<body> <body>
<h1>OpenLP Controller</h1> <h1>OpenLP Controller</h1>
<input type='button' value='<- Previous Slide' <h2>Service Manager</h2>
onclick='send_event("slidecontroller_live_previous");' /> <div id="service"></div>
<input type='button' value='Next Slide ->' <p><em>(Click service item to go live.)</em></p>
onclick='send_event("slidecontroller_live_next");' /> <fieldset>
<br/> <legend>Controls</legend>
<input type='button' value='<- Previous Item' <div id="service-buttons">
onclick='send_event("servicemanager_previous_item");' /> <input type="button" value="Refresh Service" id="servicemanager_list_request" />
<input type='button' value='Next Item ->' </div>
onclick='send_event("servicemanager_next_item");' /> <div id="item-buttons">
<br/> <input type="button" value="&lt;- Previous Item" id="servicemanager_previous_item" />
<input type='button' value='Blank' <input type="button" value="Next Item -&gt;" id="servicemanager_next_item" />
onclick='send_event("slidecontroller_live_blank");' /> </div>
<input type='button' value='Unblank' </fieldset>
onclick='send_event("slidecontroller_live_unblank");' />
<br/>
<label>Alert text</label><input id='alert' type='text' />
<input type='button' value='Send'
onclick='send_event("alerts_text",
document.getElementById("alert").value);' />
<hr> <hr>
<input type='button' value='Order of service' <h2>Slide Controller</h2>
onclick='send_event("servicemanager_list_request");'> <div id="current-item"></div>
<i>(Click service item to go live.)</i> <p><em>(Click verse to display.)</em></p>
<div id='service'></div> <fieldset>
<legend>Controls</legend>
<div id="item-buttons">
<input type="button" value="Refresh Item" id="slidecontroller_live_text_request" />
</div>
<div id="slide-buttons">
<input type="button" value="&lt;- Previous Slide" id="slidecontroller_live_previous" />
<input type="button" value="Next Slide -&gt;" id="slidecontroller_live_next" />
</div>
</fieldset>
<hr> <hr>
<input type='button' value='Current item' <h2>Miscellaneous</h2>
onclick='send_event("slidecontroller_live_text_request");'> <div id="display-buttons">
<i>(Click verse to display.)</i> <input type="button" value="Blank" id="slidecontroller_live_blank" />
<div id='currentitem'></div> <input type="button" value="Unblank" id="slidecontroller_live_unblank" />
</div>
<div id="alert-details">
<label for="alert-text">Alert text:</label>
<input type="text" id="alert-text" />
<input type="button" value="Send" id="alert-send" />
</div>
<hr> <hr>
<a href="http://www.openlp.org/">OpenLP website</a> <a href="http://openlp.org/">OpenLP website</a>
</body> </body>
</html> </html>

File diff suppressed because one or more lines are too long

View File

@ -63,33 +63,42 @@ OpenLP.Namespace.create("OpenLP.Events", {
// Local variables // Local variables
onload_functions: Array(), onload_functions: Array(),
// Functions // Functions
load: function (func) { bindLoad: function (func) {
this.onload_functions.append(func); this.onload_functions.append(func);
}, },
click: function (selector, func) { bindClick: function (selector, func) {
$(selector).bind("click", func); $(selector).bind("click", func);
}, },
change: function (selector, func) { bindChange: function (selector, func) {
$(selector).bind("change", func); $(selector).bind("change", func);
}, },
submit: function (selector, func) { bindSubmit: function (selector, func) {
$(selector).bind("submit", func); $(selector).bind("submit", func);
}, },
blur: function (selector, func) { bindBlur: function (selector, func) {
$(selector).bind("blur", func); $(selector).bind("blur", func);
}, },
paste: function (selector, func) { bindPaste: function (selector, func) {
$(selector).bind("paste", func); $(selector).bind("paste", func);
}, },
keyup: function (selector, func) { bindKeyUp: function (selector, func) {
$(selector).bind("keyup", func); $(selector).bind("keyup", func);
}, },
keydown: function (selector, func) { bindKeyDown: function (selector, func) {
$(selector).bind("keydown", func); $(selector).bind("keydown", func);
}, },
keypress: function (selector, func) { bindKeyPress: function (selector, func) {
$(selector).bind("keypress", func); $(selector).bind("keypress", func);
}, },
bindMouseEnter: function (selector, func) {
$(selector).bind("mouseenter", func);
},
bindMouseLeave: function (selector, func) {
$(selector).bind("mouseleave", func);
},
liveClick: function (selector, func) {
$(selector).live("click", func);
},
getElement: function(event) { getElement: function(event) {
var targ; var targ;
if (!event) { if (!event) {
@ -116,8 +125,115 @@ OpenLP.Namespace.create("OpenLP.Events", {
}); });
OpenLP.Namespace.create("OpenLP.Remote", { OpenLP.Namespace.create("OpenLP.Remote", {
sendEvent: function (event_name, event_data) sendEvent: function (eventName, eventData)
{ {
var url = "/";
if (eventName.substr(-8) == "_request")
{
url += "request";
}
else
{
url += "send";
}
url += "/" + eventName;
var args = {};
if (eventData != null && eventData != "")
{
args.q = $.parseJSON(eventData);
}
$.ajax({
url: url,
dataType: "json",
data: args,
success: function (data)
{
OpenLP.Remote.handleEvent(eventName, data);
},
error: function (xhr, textStatus, errorThrown)
{
if (eventName == "remotes_poll_request")
{
OpenLP.Remote.handleEvent("remotes_poll_request");
}
}
});
},
handleEvent: function (eventName, eventData)
{
switch (eventName)
{
case "servicemanager_list_request":
var table = $("<table>");
$.each(eventData, function (row, item) {
var trow = $("<tr>")
.attr("value", parseInt(row))
.click(OpenLP.Remote.sendSetItem);
if (item["selected"])
{
trow.addClass("selected");
}
trow.append($("<td>").text(parseInt(row) + 1));
trow.append($("<td>").text(item["title"]));
trow.append($("<td>").text(item["plugin"]));
trow.append($("<td>").text("Notes: " + item["notes"]));
table.append(trow);
});
$("#service").html(table);
break;
case "slidecontroller_live_text_request":
var table = $("<table>");
$.each(eventData, function (row, item) {
var trow = $("<tr>")
.attr("value", parseInt(row))
.click(OpenLP.Remote.sendLiveSet);
if (item["selected"])
{
trow.addClass("selected");
}
trow.append($("<td>").text(item["tag"]));
trow.append($("<td>").text(item["text"] ? item["text"].replace(/\\n/g, '<br />') : ""));
table.append(trow);
});
$("#current-item").html(table);
break;
case "remotes_poll_request":
OpenLP.Remote.sendEvent("remotes_poll_request");
OpenLP.Remote.sendEvent("servicemanager_list_request");
OpenLP.Remote.sendEvent("slidecontroller_live_text_request");
break;
}
},
sendLiveSet: function (e)
{
var id = OpenLP.Events.getElement(e).parent().attr("value");
OpenLP.Remote.sendEvent("slidecontroller_live_set", id);
return false;
},
sendSetItem: function (e)
{
var id = OpenLP.Events.getElement(e).parent().attr("value");
OpenLP.Remote.sendEvent("servicemanager_set_item", id);
return false;
},
sendAlert: function (e)
{
var alert_text = $("#alert-text").val();
OpenLP.Remote.sendEvent("alerts_text", alert_text);
return false;
},
buttonClick: function (e)
{
var id = OpenLP.Events.getElement(e).attr("id");
OpenLP.Remote.sendEvent(id);
return false; return false;
} }
}); });
OpenLP.Events.bindLoad(function () {
OpenLP.Events.bindClick("input[type=button][id!=alert-send]", OpenLP.Remote.buttonClick);
OpenLP.Events.bindClick("#alert-send", OpenLP.Remote.sendAlert);
OpenLP.Remote.sendEvent("servicemanager_list_request");
OpenLP.Remote.sendEvent("slidecontroller_live_text_request");
OpenLP.Remote.sendEvent("remotes_poll_request");
});

View File

@ -0,0 +1,26 @@
body
{
font-family: Lucida Grande, Lucida Sans, Arial, Helvetica, sans-serif;
font-size: 80%;
}
fieldset
{
border: 1px solid #ccc;
}
td
{
cursor: pointer;
}
tr:hover
{
background-color: #7397dd;
}
.selected
{
background-color: #4f7ed9;
font-weight: bold;
}

View File

@ -245,7 +245,7 @@ class HttpConnection(object):
Receiver.send_message(event, params) Receiver.send_message(event, params)
else: else:
Receiver.send_message(event) Receiver.send_message(event)
return u'OK' return json.dumps([u'OK'])
def process_request(self, event, params): def process_request(self, event, params):
""" """