Commit 3cf6314a authored by svilayphiou's avatar svilayphiou

W3C's Slidy plugin to use Ethertoff documents into presentation

documents *à la* Powerpoint but with scrollbars.

Thanks to Natacha Roussel for the idea, who was interested in using Ethertoff for
presentations as well!
parent 2e792518
......@@ -20,7 +20,7 @@ $(document).ready(function() {
// DIV WRAPPER AROUND EACH H2
$("#content h2").each(function(){
h2 = $(this).attr('id');
$(this).nextUntil('h2').wrapAll('<div class="' + h2 + '"></div>');
$(this).nextUntil('h2').andSelf().wrapAll('<div class="slide ' + h2 + '"></div>');
});
// OFFSET ANCHOR BECAUSE OF FIXED MENU
......@@ -91,6 +91,13 @@ $(".logged-out a.write-button").click(function(e) {
$(".popup-wrapper").removeClass("hidden");
});
$(".slide-button").click(function(e) {
e.preventDefault();
$.getScript( "/static/js/slidy.js", function( data, textStatus, jqxhr ) {
w3c_slidy.init();
});
});
$(".popup-wrapper").click(function(e) {
$(this).addClass("hidden");
});
......@@ -104,3 +111,4 @@ $(document).keydown(function(e) {
$(".popup-wrapper").addClass("hidden");
}
});
/* slidy.css
Copyright (c) 2005-2010 W3C (MIT, ERCIM, Keio), All Rights Reserved.
W3C liability, trademark, document use and software licensing
rules apply, see:
http://www.w3.org/Consortium/Legal/copyright-documents
http://www.w3.org/Consortium/Legal/copyright-software
*/
body
{
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 100%;
height: 100%;
color: black;
background-color: white;
font-family: "Gill Sans MT", "Gill Sans", GillSans, sans-serif;
font-size: 14pt;
}
div.toolbar {
position: fixed; z-index: 200;
top: auto; bottom: 0; left: 0; right: 0;
height: 1.2em; text-align: right;
padding-left: 1em;
padding-right: 1em;
font-size: 60%;
color: red;
background-color: rgb(240,240,240);
border-top: solid 1px rgb(180,180,180);
}
div.toolbar span.copyright {
color: black;
margin-left: 0.5em;
}
div.initial_prompt {
position: absolute;
z-index: 1000;
bottom: 1.2em;
width: 100%;
background-color: rgb(200,200,200);
opacity: 0.35;
background-color: rgba(200,200,200, 0.35);
cursor: pointer;
}
div.initial_prompt p.help {
text-align: center;
}
div.initial_prompt p.close {
text-align: right;
font-style: italic;
}
div.slidy_toc {
position: absolute;
z-index: 300;
width: 60%;
max-width: 30em;
height: 30em;
overflow: auto;
top: auto;
right: auto;
left: 4em;
bottom: 4em;
padding: 1em;
background: rgb(240,240,240);
border-style: solid;
border-width: 2px;
font-size: 60%;
}
div.slidy_toc .toc_heading {
text-align: center;
width: 100%;
margin: 0;
margin-bottom: 1em;
border-bottom-style: solid;
border-bottom-color: rgb(180,180,180);
border-bottom-width: 1px;
}
div.slide {
z-index: 20;
margin: 0 0 0 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 20px;
padding-right: 20px;
border-width: 0;
clear: both;
top: 0;
bottom: 0;
left: 0;
right: 0;
line-height: 120%;
background-color: transparent;
}
div.background {
display: none;
}
div.handout {
margin-left: 20px;
margin-right: 20px;
}
div.slide.titlepage {
text-align: center;
}
div.slide.titlepage h1 {
padding-top: 10%;
margin-right: 0;
}
div.slide h1 {
padding-left: 0;
padding-right: 20pt;
padding-top: 4pt;
padding-bottom: 4pt;
margin-top: 0;
margin-left: 0;
margin-right: 60pt;
margin-bottom: 0.5em;
display: block;
font-size: 160%;
line-height: 1.2em;
background: transparent;
}
@media screen and (max-device-width: 1024px)
{
div.slide { font-size: 100%; }
}
@media screen and (max-device-width: 800px)
{
div.slide { font-size: 200%; }
div.slidy_toc {
top: 1em;
left: 1em;
right: auto;
width: 80%;
font-size: 180%;
}
}
div.toc-heading {
width: 100%;
border-bottom: solid 1px rgb(180,180,180);
margin-bottom: 1em;
text-align: center;
}
img {
image-rendering: optimize-quality;
}
pre {
font-size: 80%;
font-weight: bold;
line-height: 120%;
padding-top: 0.2em;
padding-bottom: 0.2em;
padding-left: 1em;
padding-right: 1em;
border-style: solid;
border-left-width: 1em;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-color: #95ABD0;
color: #00428C;
background-color: #E4E5E7;
}
li pre { margin-left: 0; }
blockquote { font-style: italic }
img { background-color: transparent }
p.copyright { font-size: smaller }
.center { text-align: center }
.footnote { font-size: smaller; margin-left: 2em; }
a img { border-width: 0; border-style: none }
a:visited { color: navy }
a:link { color: navy }
a:hover { color: red; text-decoration: underline }
a:active { color: red; text-decoration: underline }
a {text-decoration: none}
.toolbar a:link {color: blue}
.toolbar a:visited {color: blue}
.toolbar a:active {color: red}
.toolbar a:hover {color: red}
ul { list-style-type: square; }
ul ul { list-style-type: disc; }
ul ul ul { list-style-type: circle; }
ul ul ul ul { list-style-type: disc; }
li { margin-left: 0.5em; margin-top: 0.5em; }
li li { font-size: 85%; font-style: italic }
li li li { font-size: 85%; font-style: normal }
div dt
{
margin-left: 0;
margin-top: 1em;
margin-bottom: 0.5em;
font-weight: bold;
}
div dd
{
margin-left: 2em;
margin-bottom: 0.5em;
}
p,pre,ul,ol,blockquote,h2,h3,h4,h5,h6,dl,table {
margin-left: 1em;
margin-right: 1em;
}
p.subhead { font-weight: bold; margin-top: 2em; }
.smaller { font-size: smaller }
.bigger { font-size: 130% }
td,th { padding: 0.2em }
ul {
margin: 0.5em 1.5em 0.5em 1.5em;
padding: 0;
}
ol {
margin: 0.5em 1.5em 0.5em 1.5em;
padding: 0;
}
ul { list-style-type: square; }
ul ul { list-style-type: disc; }
ul ul ul { list-style-type: circle; }
ul ul ul ul { list-style-type: disc; }
ul li {
list-style: square;
margin: 0.1em 0em 0.6em 0;
padding: 0 0 0 0;
line-height: 140%;
}
ol li {
margin: 0.1em 0em 0.6em 1.5em;
padding: 0 0 0 0px;
line-height: 140%;
list-style-type: decimal;
}
li ul li {
font-size: 85%;
font-style: italic;
list-style-type: disc;
background: transparent;
padding: 0 0 0 0;
}
li li ul li {
font-size: 85%;
font-style: normal;
list-style-type: circle;
background: transparent;
padding: 0 0 0 0;
}
li li li ul li {
list-style-type: disc;
background: transparent;
padding: 0 0 0 0;
}
li ol li {
list-style-type: decimal;
}
li li ol li {
list-style-type: decimal;
}
/*
setting class="outline on ol or ul makes it behave as an
ouline list where blocklevel content in li elements is
hidden by default and can be expanded or collapsed with
mouse click. Set class="expand" on li to override default
*/
ol.outline li:hover { cursor: pointer }
ol.outline li.nofold:hover { cursor: default }
ul.outline li:hover { cursor: pointer }
ul.outline li.nofold:hover { cursor: default }
ol.outline { list-style:decimal; }
ol.outline ol { list-style-type:lower-alpha }
ol.outline li.nofold {
padding: 0 0 0 20px;
background: transparent url(../graphics/nofold-dim.gif) no-repeat 0px 0.5em;
}
ol.outline li.unfolded {
padding: 0 0 0 20px;
background: transparent url(../graphics/fold-dim.gif) no-repeat 0px 0.5em;
}
ol.outline li.folded {
padding: 0 0 0 20px;
background: transparent url(../graphics/unfold-dim.gif) no-repeat 0px 0.5em;
}
ol.outline li.unfolded:hover {
padding: 0 0 0 20px;
background: transparent url(../graphics/fold.gif) no-repeat 0px 0.5em;
}
ol.outline li.folded:hover {
padding: 0 0 0 20px;
background: transparent url(../graphics/unfold.gif) no-repeat 0px 0.5em;
}
ul.outline li.nofold {
padding: 0 0 0 20px;
background: transparent url(../graphics/nofold-dim.gif) no-repeat 0px 0.5em;
}
ul.outline li.unfolded {
padding: 0 0 0 20px;
background: transparent url(../graphics/fold-dim.gif) no-repeat 0px 0.5em;
}
ul.outline li.folded {
padding: 0 0 0 20px;
background: transparent url(../graphics/unfold-dim.gif) no-repeat 0px 0.5em;
}
ul.outline li.unfolded:hover {
padding: 0 0 0 20px;
background: transparent url(../graphics/fold.gif) no-repeat 0px 0.5em;
}
ul.outline li.folded:hover {
padding: 0 0 0 20px;
background: transparent url(../graphics/unfold.gif) no-repeat 0px 0.5em;
}
/* for slides with class "title" in table of contents */
a.titleslide { font-weight: bold; font-style: italic }
/*
hide images for work around for save as bug
where browsers fail to save images used by CSS
*/
img.hidden { display: none; visibility: hidden }
div.initial_prompt { display: none; visibility: hidden }
div.slide {
visibility: visible;
position: inherit;
}
div.handout {
border-top-style: solid;
border-top-width: thin;
border-top-color: black;
}
@media screen {
.hidden { display: none; visibility: visible }
div.slide.hidden { display: block; visibility: visible }
div.handout.hidden { display: block; visibility: visible }
div.background { display: none; visibility: hidden }
body.single_slide div.initial_prompt { display: block; visibility: visible }
body.single_slide div.background { display: block; visibility: visible }
body.single_slide div.background.hidden { display: none; visibility: hidden }
body.single_slide .invisible { visibility: hidden }
body.single_slide .hidden { display: none; visibility: hidden }
body.single_slide div.slide { position: absolute }
body.single_slide div.handout { display: none; visibility: hidden }
}
@media print {
.hidden { display: block; visibility: visible }
div.slide pre { font-size: 60%; padding-left: 0.5em; }
div.toolbar { display: none; visibility: hidden; }
div.slidy_toc { display: none; visibility: hidden; }
div.background { display: none; visibility: hidden; }
div.slide { page-break-before: always }
/* :first-child isn't reliable for print media */
div.slide.first-slide { page-break-before: avoid }
}
This diff is collapsed.
......@@ -11,6 +11,9 @@
<link rel="stylesheet/less" href="{% url 'css-print' %}" type="text/css" media="print">
{% endblock %}
<link rel="stylesheet" href="{{ STATIC_URL }}js/slidy.css" type="text/css" media="all">
<link rel="stylesheet" href="{% url 'css-slide'%}" type="text/css" media="all">
<script src="{{ STATIC_URL }}js/less-1.4.1.min.js" type="text/javascript"> </script>
<script src="{{ STATIC_URL }}js/jquery-1.11.1.min.js" type="text/javascript"> </script>
<script src="{{ STATIC_URL }}js/underscore.js" type="text/javascript"> </script>
......@@ -67,6 +70,7 @@
{% else %}
<a class="button screen-only" href="#" onclick="window.print()">Print</a>
{% endif %}
<a class="button screen-only slide-button" href="#">Slide</a>
{% else %}
<a class="button read-button screen-only">Read</a>
<a class="button screen-only write-button" href="{% url 'login' %}">Write</a>
......
......@@ -17,6 +17,7 @@ urlpatterns = patterns(
url(r'^publish/$', 'relearn.views.publish', name='publish'),
url(r'^css-print/$', 'relearn.views.cssprint', name='css-print'),
url(r'^offset-print/$', 'relearn.views.offsetprint', name='offset-print'),
url(r'^css-slide/$', 'relearn.views.css_slide', name='css-slide'),
url(r'^$', 'relearn.views.home', name='home'),
url(r'^(?P<slug>[^/]+)\.xhtml$', 'relearn.views.xhtml', name='xhtml'),
url(r'^accounts/login$', 'django.contrib.auth.views.login',
......
......@@ -406,3 +406,12 @@ def offsetprint(request):
css = f.read()
f.close()
return HttpResponse(css, mimetype="text/css")
def css_slide(request):
try:
pad = Pad.objects.get(display_slug='slidy.css')
padID = pad.group.groupID + '$' + urllib.quote_plus(pad.name.replace('::', '_'))
epclient = EtherpadLiteClient(pad.server.apikey, pad.server.apiurl)
return HttpResponse(epclient.getText(padID)['text'], mimetype="text/css")
except:
pass
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment