Commit 3aff002c authored by Ivan Tyagov's avatar Ivan Tyagov

Add a slideshow style for Web Pages.

parent 197a4389
<registered_skin_selection>
<skin_folder_selection>
<skin_folder>erp5_slideshow_style</skin_folder>
<skin_selection>SlideShow</skin_selection>
</skin_folder_selection>
</registered_skin_selection>
\ No newline at end of file
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="Folder" module="OFS.Folder"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_local_properties</string> </key>
<value>
<tuple/>
</value>
</item>
<item>
<key> <string>_objects</string> </key>
<value>
<tuple/>
</value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>erp5_slideshow_style</string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="PythonScript" module="Products.PythonScripts.PythonScript"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>Script_magic</string> </key>
<value> <int>3</int> </value>
</item>
<item>
<key> <string>_bind_names</string> </key>
<value>
<object>
<klass>
<global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
</klass>
<tuple/>
<state>
<dictionary>
<item>
<key> <string>_asgns</string> </key>
<value>
<dictionary>
<item>
<key> <string>name_container</string> </key>
<value> <string>container</string> </value>
</item>
<item>
<key> <string>name_context</string> </key>
<value> <string>context</string> </value>
</item>
<item>
<key> <string>name_m_self</string> </key>
<value> <string>script</string> </value>
</item>
<item>
<key> <string>name_subpath</string> </key>
<value> <string>traverse_subpath</string> </value>
</item>
</dictionary>
</value>
</item>
</dictionary>
</state>
</object>
</value>
</item>
<item>
<key> <string>_body</string> </key>
<value> <string encoding="cdata"><![CDATA[
return"""<!DOCTYPE html>\n
<html>\n
<head>\n
<meta http-equiv="content-type" content="text/html; charset=UTF-8">\n
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">\n
<link rel="stylesheet" type="text/css" href="slides.css">\n
<script type="text/javascript" src="slides.js"></script>\n
<meta charset="utf-8">\n
<title>%s</title>\n
<!-- Your Slides -->\n
</head>\n
<body>\n
%s \n
</body>\n
</html>""" % (context.getTitle(), context.getTextContent())\n
]]></string> </value>
</item>
<item>
<key> <string>_params</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>WebPage_viewAsWeb</string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="File" module="OFS.Image"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_EtagSupport__etag</string> </key>
<value> <string>ts15240428.47</string> </value>
</item>
<item>
<key> <string>__name__</string> </key>
<value> <string>slides.css</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/css</string> </value>
</item>
<item>
<key> <string>data</string> </key>
<value> <string>html { background-color: black; }\n
a { color: #ff0066; } a:hover {text-decoration: underline;}\n
footer { position: absolute; bottom: 50px; right: 50px; }\n
strong {color: #ff0066}\n
body {\n
font-family: \'oswald\', arial, serif;\n
background-color: white;\n
color: white;\n
font-size: 2em;\n
background: #1c1c1c;\n
background-image: -moz-radial-gradient(center 45deg, #333 0%, #1c1c1c 50%);\n
background-image: -moz-radial-gradient(center 45deg, #333 0%, #1c1c1c 50%);\n
}\n
\n
\n
/* transition effect */\n
section {\n
-moz-transition: left 400ms linear 0s;\n
-webkit-transition: left 400ms linear 0s;\n
-o-transition: left 400ms linear 0s;\n
-ms-transition: left 400ms linear 0s;\n
transition: left 400ms linear 0s;\n
}\n
section { left: -150%; }\n
section[aria-selected] { left: 0; }\n
section[aria-selected] ~ section { left: +150% }\n
\n
.chapter { background-color: black;}\n
.chapter h1 {line-height: 600px; vertical-align: middle; margin: 0; text-align: center; display: block}\n
\n
h1 {\n
margin: 50px 100px 0 100px;\n
font-size: 50px;\n
text-shadow: 0px -1px 0px #000;\n
text-align: left;\n
}\n
h2 {\n
color: #fae50b;\n
margin: 70px 0 0 0;\n
font-size: 40px;\n
text-align: center;\n
}\n
ul {\n
margin-top: 70px;\n
font-size: 35px;\n
text-align: right;\n
border-right: 4px solid white;\n
padding-right: 40px;\n
min-width: 310px;\n
margin-left: 50px;\n
display: inline-block;\n
}\n
q, p {\n
margin: 50px auto 0 auto;\n
width: 500px;\n
}\n
q:after {content: ""}\n
q:before {content: ""}\n
q {\n
display: block;\n
margin-top: 140px;\n
}\n
video {\n
position: absolute;\n
top: 210px;\n
width: 260px;\n
left: 445px;\n
box-shadow: 0 0 10px black;\n
}\n
#arrow {\n
position: absolute;\n
top: 165px;\n
left: 460px;\n
font-size: 100px;\n
color: white;\n
\n
}\n
li {list-style-type: none}\n
\n
\n
\n
\n
\n
\n
* { margin: 0; padding: 0; }\n
details {display: none;}\n
body {\n
width: 800px; height: 600px;\n
margin-left: -400px; margin-top: -300px;\n
position: absolute; top: 50%; left: 50%;\n
overflow: hidden;\n
}\n
section {\n
position: absolute;\n
pointer-events: none;\n
width: 100%; height: 100%;\n
}\n
section[aria-selected] { pointer-events: auto;}\n
body {display: none}\n
body.loaded {display: block}\n
\n
\n
section.code pre { margin: 20px 0 0 40px;font-size: 15px; font-weight: bold;}\n
section.code .Constant { color: #af5fff}\n
section.code .StorageClass { color: #ff8700}\n
section.code .Exception { color: #87ff00}\n
section.code .Identifier { color: #ff8700}\n
section.code .Title { color: #d75f00}\n
section.code .String { color: #afaf87}\n
section.code .Type { color: #5fd7ff}\n
section.code .Statement { color: #d7005f}\n
section.code .Function { color: #87ff00}\n
section.code .Comment { color: #CCC}\n
\n
/* Cedric extensions */\n
section img {max-width: 100%; max-height: 80%; display: block; margin-left: auto; margin-right: auto;}</string> </value>
</item>
<item>
<key> <string>precondition</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>size</string> </key>
<value> <int>2805</int> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string>slides.css</string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="File" module="OFS.Image"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_EtagSupport__etag</string> </key>
<value> <string>ts11000946.61</string> </value>
</item>
<item>
<key> <string>__name__</string> </key>
<value> <string>slides.js</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>application/javascript</string> </value>
</item>
<item>
<key> <string>data</string> </key>
<value> <string encoding="cdata"><![CDATA[
var friendWindows = [];\n
var idx = 1;\n
var slides;\n
\n
/* main() */\n
\n
window.onload = function() {\n
slides = document.querySelectorAll("body > section");\n
onhashchange();\n
setSlide();\n
document.body.className = "loaded";\n
onresize();\n
}\n
\n
/* Handle keys */\n
\n
window.onkeydown = function(e) {\n
// Don\'t intercept keyboard shortcuts\n
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {\n
return;\n
}\n
if ( e.keyCode == 37 // left arrow\n
|| e.keyCode == 33 // page up\n
) {\n
e.preventDefault();\n
back();\n
}\n
if ( e.keyCode == 39 // right arrow\n
|| e.keyCode == 34 // page down\n
) {\n
e.preventDefault();\n
forward();\n
}\n
\n
if ( e.keyCode == 32) { // space\n
e.preventDefault();\n
toggleContent();\n
}\n
}\n
\n
/* Adapt the size of the slides to the window */\n
\n
window.onresize = function() {\n
var sx = document.body.clientWidth / window.innerWidth;\n
var sy = document.body.clientHeight / window.innerHeight;\n
var transform = "scale(" + (1/Math.max(sx, sy)) + ")";\n
document.body.style.MozTransform = transform;\n
document.body.style.WebkitTransform = transform;\n
document.body.style.OTransform = transform;\n
document.body.style.msTransform = transform;\n
document.body.style.transform = transform;\n
}\n
function getDetails(idx) {\n
var s = document.querySelector("section:nth-of-type("+ idx +")");\n
var d = s.querySelector("details");\n
return d?d.innerHTML:"";\n
}\n
window.onmessage = function(e) {\n
msg = e.data;\n
win = e.source;\n
if (msg === "register") {\n
friendWindows.push(win);\n
win.postMessage(JSON.stringify({method: "registered", title: document.title, count: slides.length}), document.location);\n
win.postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), document.location);\n
return;\n
}\n
if (msg === "back") back();\n
if (msg === "forward") forward();\n
if (msg === "toggleContent") toggleContent();\n
// setSlide(42)\n
var r = /setSlide\\((\\d+)\\)/.exec(msg);\n
if (r) {\n
idx = r[1];\n
setSlide();\n
}\n
}\n
\n
/* If a Video is present in this new slide, play it.\n
If a Video is present in the previous slide, stop it. */\n
\n
function toggleContent() {\n
var s = document.querySelector("section[aria-selected]");\n
if (s) {\n
var video = s.querySelector("video");\n
if (video) {\n
if (video.ended || video.paused) {\n
video.play();\n
} else {\n
video.pause();\n
}\n
}\n
}\n
}\n
\n
/* If the user change the slide number in the URL bar, jump\n
to this slide. */\n
\n
window.onhashchange = function(e) {\n
var newidx = ~~window.location.hash.split("#")[1];\n
if (!newidx) newidx = 1;\n
if (newidx == idx) return;\n
idx = newidx;\n
setSlide();\n
}\n
\n
/* Slide controls */\n
\n
function back() {\n
if (idx == 1) return;\n
idx--;\n
setSlide();\n
}\n
function forward() {\n
if (idx >= slides.length) return;\n
idx++;\n
setSlide();\n
}\n
function setSlide() {\n
var old = document.querySelector("section[aria-selected]");\n
var next = document.querySelector("section:nth-of-type("+ idx +")");\n
if (old) {\n
old.removeAttribute("aria-selected");\n
var video = old.querySelector("video");\n
if (video) { video.pause(); }\n
}\n
if (next) {\n
next.setAttribute("aria-selected", "true");\n
var video = next.querySelector("video");\n
if (video) { video.play(); }\n
} else {\n
console.warn("No such slide: " + idx);\n
idx = 0;\n
for (var i = 0; i < slides.length; i++) {\n
if (slides[i].hasAttribute("aria-selected")) {\n
idx = i + 1;\n
}\n
}\n
}\n
window.location.hash = idx;\n
for (var i = 0; i < friendWindows.length; i++) {\n
friendWindows[i].postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), document.location);\n
}\n
}\n
]]></string> </value>
</item>
<item>
<key> <string>precondition</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>size</string> </key>
<value> <int>3715</int> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string>slides.js</string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
2011-11-09 Ivan
* Initial import
\ No newline at end of file
Copyright (c) 2001-2009 Nexedi SA
\ No newline at end of file
erp5_web
\ No newline at end of file
Provides a slide show style for Web Page.
\ No newline at end of file
GPL
\ No newline at end of file
ivan
\ No newline at end of file
1
\ No newline at end of file
erp5_slideshow_style | SlideShow
\ No newline at end of file
erp5_slideshow_style
\ No newline at end of file
erp5_slideshow_style
\ No newline at end of file
5.4.7
\ No newline at end of file
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