erp5_slideshow_style: Allow to choose the css link

d0fc7c54 · Tristan Cavelier · 6e1b8e20 · d0fc7c54 · d0fc7c54 · d0fc7c54
Commit d0fc7c54 authored Jul 21, 2015 by Tristan Cavelier
3 changed files
--- a/bt5/erp5_slideshow_style/SkinTemplateItem/portal_skins/erp5_slideshow_style/WebPage_viewAsWeb.xml
+++ b/bt5/erp5_slideshow_style/SkinTemplateItem/portal_skins/erp5_slideshow_style/WebPage_viewAsWeb.xml
@@ -52,12 +52,14 @@
            <key> <string>_body</string> </key>
            <value> <string encoding="cdata"><![CDATA[
+css_link = context.REQUEST.get("css_link", "slides.css")\n
+\n
 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
+    <link rel="stylesheet" type="text/css" href="%s">\n
    <script type="text/javascript" src="slides.js"></script>\n
    <meta charset="utf-8">\n
    <title>%s</title>\n
@@ -66,7 +68,7 @@ return"""<!DOCTYPE html>\n
  <body>\n
 %s   \n
  </body>\n
-</html>""" % (context.getTitle(), context.getTextContent())\n
+</html>""" % (css_link, context.getTitle(), context.getTextContent())\n
 ]]></string> </value>

--- a/bt5/erp5_slideshow_style/SkinTemplateItem/portal_skins/erp5_slideshow_style/slides.css.xml
+++ b/bt5/erp5_slideshow_style/SkinTemplateItem/portal_skins/erp5_slideshow_style/slides.css.xml
+<?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>ts53759224.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: 1em;\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; \n
+             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>2845</int> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <string>slides.css</string> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>
--- a/bt5/erp5_slideshow_style/SkinTemplateItem/portal_skins/erp5_slideshow_style/slides.js.xml
+++ b/bt5/erp5_slideshow_style/SkinTemplateItem/portal_skins/erp5_slideshow_style/slides.js.xml
+<?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>ts26109956.55</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>3719</int> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <string>slides.js</string> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>