A simple widget-info view using syntaxhighlighter.

1 files changed, 51 insertions, 0 deletions

diff --git a/src/templates/apps/room/widget.html b/src/templates/apps/room/widget.html
new file mode 100644
index 0000000..de37e97
--- /dev/null
+++ b/src/templates/apps/room/widget.html
@@ -0,0 +1,51 @@
+{% extends "base.html" %}
+{% load prefix %}
+{% block widgets %}
+     SyntaxHighlighter.all()
+{% endblock %}
+{% block meta %}
+<script type="text/javascript" src="{% prefix %}/site-media/js/xregexp-min.js"></script>
+<script type="text/javascript" src="{% prefix %}/site-media/js/shCore.js"></script>
+<script type="text/javascript" src="{% prefix %}/site-media/js/shAutoloader.js"></script>
+<script type="text/javascript" src="{% prefix %}/site-media/js/shLegacy.js"></script>
+<script type="text/javascript" src="{% prefix %}/site-media/js/shBrushXml.js"></script>
+<link href="{% prefix %}/site-media/css/shCore.css" rel="stylesheet" type="text/css" />
+<link href="{% prefix %}/site-media/css/shThemeDefault.css" rel="stylesheet" type="text/css" />
+{% endblock %}
+{% block content %}
+<h1>{{title}}</h1>
+
+<div class="ui-widget">
+	<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
+		<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
+		The meetingtools jquery widget allows you to easily embed lists of meetings in your own
+		web page using the popular <a href="http://jquery.com">jQuery javascript library</a>.
+	</div>
+</div>
+
+<p>Copy the sample html below in order to list rooms tagged with <em>{{tags}}</em>.</p>
+
+<pre class="brush: xml">
+&lt;html&gt;
+   &lt;head&gt;
+      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
+      &lt;script type="text/javascript" src="{% baseurl %}/{% prefix %}js/jquery.meetingtools.js"&gt;&lt;/script&gt;
+      &lt;link href="{% baseurl %}/{% prefix %}css/jquery.meetingtools.css" rel="stylesheet" type="text/css" /&gt;
+      &lt;script type="text/javascript"&gt;
+         $(function() {
+            $("#meetings").meetingtools({tags: '{{tags}}',url: '{% baseurl %}/{% prefix %}'});
+         });
+      &lt;/script&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;h1&gt;Meetings...&lt;/h1&gt;
+      &lt;div id="meetings"/&gt;
+   &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>
+	Change the tags option in the call to 'meetingtools' in order to list other rooms. Override 
+	the CSS elements in jquery.meetingtools.css in order to apply your own skin to the generated html. 
+</p>
+{% endblock %}
\ No newline at end of file