From 2bd6f00fbf5dfa0d50c59aad9a7b0f8d574e115e Mon Sep 17 00:00:00 2001 From: Sean Roberts Date: Thu, 11 Dec 2014 16:23:50 -0800 Subject: [PATCH] creates landslide structure for the guides landslide is what we are using right now to create html slides from RST files. So we are going forward with building out the structure to support it for the rest of the project. Note that the landslide.sh script only builds for the associate guide right now. As more RST gets added, the landslide.sh script will be updated. Change-Id: Icf4be8cc29e341044ff9af5fa1866fe826d87545 Implements: blueprint convert-the-xml-into-rst --- doc/training-guides/README.md | 21 +- doc/training-guides/_assets/README | 1 + doc/training-guides/architect-guide/README.md | 10 - .../associate-guide/06-compute-node-quiz.rst | 28 +- doc/training-guides/associate-guide/README.md | 10 - doc/training-guides/developer-guide/README.md | 10 - doc/training-guides/landslide.sh | 14 + doc/training-guides/operator-guide/README.md | 10 - doc/training-guides/theme/base.html | 182 ++++++ doc/training-guides/theme/css/print.css | 108 ++++ doc/training-guides/theme/css/screen.css | 578 +++++++++++++++++ doc/training-guides/theme/js/slides.js | 580 ++++++++++++++++++ 12 files changed, 1491 insertions(+), 61 deletions(-) create mode 100644 doc/training-guides/_assets/README delete mode 100644 doc/training-guides/architect-guide/README.md delete mode 100644 doc/training-guides/associate-guide/README.md delete mode 100644 doc/training-guides/developer-guide/README.md create mode 100755 doc/training-guides/landslide.sh delete mode 100644 doc/training-guides/operator-guide/README.md create mode 100644 doc/training-guides/theme/base.html create mode 100644 doc/training-guides/theme/css/print.css create mode 100644 doc/training-guides/theme/css/screen.css create mode 100644 doc/training-guides/theme/js/slides.js diff --git a/doc/training-guides/README.md b/doc/training-guides/README.md index 7aa75f52..0776b965 100644 --- a/doc/training-guides/README.md +++ b/doc/training-guides/README.md @@ -1,10 +1,17 @@ Introduction ============ -* This folder contains all the XML files which provide the text in HTML/PDF - format. -* Please refer the following link to get more information abour this project +* The subfolders contain the RST files related to the Training Guides. +* The RST files are built into HTML through landslide. Find the landslide +style guide here https://raw.githubusercontent.com/adamzap/landslide/master/examples/restructuredtext/slides.rst +* Create the output html by **./landslide.sh** +* Please refer the following link to get more information about this project https://launchpad.net/openstack-training-guides +* Please follow the following wiki to get more information about development + process of Training Guides. This should provide enough information to start + contributing to training guides + https://wiki.openstack.org/wiki/Training-guides + * Training Guides is typically divided into four guides 1. Associate Training Guide @@ -26,13 +33,13 @@ Structure of this folder * Typically book wise folders are created, read the following for more description: - 1. associate-guide: This folder contains XML files related to Associate + 1. associate-guide: This folder contains RST files related to Associate Training Guide. - 2. operator-guide: This folder contains XML files related to Operator + 2. operator-guide: This folder contains RST files related to Operator Training Guide. - 3. developer-guide: This folder contains XML files related to Developer + 3. developer-guide: This folder contains RST files related to Developer Training Guide. - 4. architect-guide: This folder contains XML files related to Architect + 4. architect-guide: This folder contains RST files related to Architect Training Guide. 5. basic-install-guide: This folder contains Install Guides which is similar to basic/easy version of Install Guides present under diff --git a/doc/training-guides/_assets/README b/doc/training-guides/_assets/README new file mode 100644 index 00000000..ea66d28e --- /dev/null +++ b/doc/training-guides/_assets/README @@ -0,0 +1 @@ +dummy file holding directory diff --git a/doc/training-guides/architect-guide/README.md b/doc/training-guides/architect-guide/README.md deleted file mode 100644 index 7064c494..00000000 --- a/doc/training-guides/architect-guide/README.md +++ /dev/null @@ -1,10 +0,0 @@ -Introduction -============ - -* This folder contains the XML files related to Architect Training Guide. -* Please refer the following link to get more information about this project - https://launchpad.net/openstack-training-guides -* Please follow the following wiki to get more information about development - process of Training Guides. This should provide enough information to start - contributing to training guides - https://wiki.openstack.org/wiki/Training-guides diff --git a/doc/training-guides/associate-guide/06-compute-node-quiz.rst b/doc/training-guides/associate-guide/06-compute-node-quiz.rst index b46fd9a0..18ddcb95 100755 --- a/doc/training-guides/associate-guide/06-compute-node-quiz.rst +++ b/doc/training-guides/associate-guide/06-compute-node-quiz.rst @@ -4,7 +4,7 @@ Associate training guide Compute node quiz questions --------------------------- -.. include:: ./notes/06-compute-node.rst +.. include:: ./associate-guide/notes/06-compute-node.rst :start-after: begin-compute-nova-scheduler :end-before: end-compute-nova-scheduler @@ -16,7 +16,7 @@ Associate training guide Compute node quiz questions --------------------------- -.. include:: ./notes/06-compute-node.rst +.. include:: ./associate-guide/notes/06-compute-node.rst :start-after: begin-compute-queue :end-before: end-compute-queue @@ -28,7 +28,7 @@ Associate training guide Compute node quiz questions --------------------------- -.. include:: ./notes/06-compute-node.rst +.. include:: ./associate-guide/notes/06-compute-node.rst :start-after: begin-compute-default-scheduler :end-before: end-compute-default-scheduler @@ -40,7 +40,7 @@ Associate training guide Compute node quiz questions --------------------------- -.. include:: ./notes/06-compute-node.rst +.. include:: ./associate-guide/notes/06-compute-node.rst :start-after: begin-compute-filter-scheduler :end-before: end-compute-filter-scheduler @@ -52,7 +52,7 @@ Associate training guide Compute node quiz questions --------------------------- -.. include:: ./notes/06-compute-node.rst +.. include:: ./associate-guide/notes/06-compute-node.rst :start-after: begin-compute-scheduler-returns :end-before: end-compute-scheduler-returns @@ -64,7 +64,7 @@ Associate training guide Compute node quiz questions --------------------------- -.. include:: ./notes/06-compute-node.rst +.. include:: ./associate-guide/notes/06-compute-node.rst :start-after: begin-compute-classes-block-storage :end-before: end-compute-classes-block-storage @@ -76,7 +76,7 @@ Associate training guide Compute node quiz questions --------------------------- -.. include:: ./notes/06-compute-node.rst +.. include:: ./associate-guide/notes/06-compute-node.rst :start-after: begin-compute-persistent-volumes :end-before: end-compute-persistent-volumes @@ -88,30 +88,30 @@ Associate training guide Compute node quiz answers ------------------------- -.. include:: ./notes/06-compute-node.rst +.. include:: ./associate-guide/notes/06-compute-node.rst :start-after: begin-compute-answer-nova-scheduler :end-before: end-compute-answer-nova-scheduler -.. include:: ./notes/06-compute-node.rst +.. include:: ./associate-guide/notes/06-compute-node.rst :start-after: begin-compute-answer-queue :end-before: end-compute-answer-queue -.. include:: ./notes/06-compute-node.rst +.. include:: ./associate-guide/notes/06-compute-node.rst :start-after: begin-compute-answer-default-scheduler :end-before: end-compute-answer-default-scheduler -.. include:: ./notes/06-compute-node.rst +.. include:: ./associate-guide/notes/06-compute-node.rst :start-after: begin-compute-answer-filter-scheduler :end-before: end-compute-answer-filter-scheduler -.. include:: ./notes/06-compute-node.rst +.. include:: ./associate-guide/notes/06-compute-node.rst :start-after: begin-compute-answer-scheduler-returns :end-before: end-compute-answer-scheduler-returns -.. include:: ./notes/06-compute-node.rst +.. include:: ./associate-guide/notes/06-compute-node.rst :start-after: begin-compute-answer-classes-block-storage :end-before: end-compute-answer-classes-block-storage -.. include:: ./notes/06-compute-node.rst +.. include:: ./associate-guide/notes/06-compute-node.rst :start-after: begin-compute-answer-persistent-volumes :end-before: end-compute-answer-persistent-volumes diff --git a/doc/training-guides/associate-guide/README.md b/doc/training-guides/associate-guide/README.md deleted file mode 100644 index d2a87f0c..00000000 --- a/doc/training-guides/associate-guide/README.md +++ /dev/null @@ -1,10 +0,0 @@ -Introduction -============ - -* This folder contains the XML files related to Associate Training Guide. -* Please refer the following link to get more information about this project - https://launchpad.net/openstack-training-guides -* Please follow the following wiki to get more information about development - process of Training Guides. This should provide enough information to start - contributing to training guides - https://wiki.openstack.org/wiki/Training-guides diff --git a/doc/training-guides/developer-guide/README.md b/doc/training-guides/developer-guide/README.md deleted file mode 100644 index 05b011ec..00000000 --- a/doc/training-guides/developer-guide/README.md +++ /dev/null @@ -1,10 +0,0 @@ -Introduction -============ - -* This folder contains the XML files related to Developer Training Guide. -* Please refer the following link to get more information about this project - https://launchpad.net/openstack-training-guides -* Please follow the following wiki to get more information about development - process of Training Guides. This should provide enough information to start - contributing to training guides - https://wiki.openstack.org/wiki/Training-guides diff --git a/doc/training-guides/landslide.sh b/doc/training-guides/landslide.sh new file mode 100755 index 00000000..ac9e26c0 --- /dev/null +++ b/doc/training-guides/landslide.sh @@ -0,0 +1,14 @@ +#!/usr/bin/env bash + +which landslide +LANDSLIDE_MISSING=$? + +if [[ ${LANDSLIDE_MISSING} -ne 0 ]]; then + echo "landslide isn't on your path. Do you need to activate a virtual environment?" + exit 1 +fi + +for presentation in ./associate-guide/*.rst; do + presentation_name=$(basename "${presentation}" .rst) + landslide -i -d "./associate-guide/${presentation_name}.html" "${presentation}" +done diff --git a/doc/training-guides/operator-guide/README.md b/doc/training-guides/operator-guide/README.md deleted file mode 100644 index 6b018175..00000000 --- a/doc/training-guides/operator-guide/README.md +++ /dev/null @@ -1,10 +0,0 @@ -Introduction -============ - -* This folder contains the XML files related to Operator Training Guide. -* Please refer the following link to get more information about this project - https://launchpad.net/openstack-training-guides -* Please follow the following wiki to get more information about development - process of Training Guides. This should provide enough information to start - contributing to training guides - https://wiki.openstack.org/wiki/Training-guides diff --git a/doc/training-guides/theme/base.html b/doc/training-guides/theme/base.html new file mode 100644 index 00000000..142de52b --- /dev/null +++ b/doc/training-guides/theme/base.html @@ -0,0 +1,182 @@ + + + + + + + {{ head_title }} + + {% if embed %} + + + {% else %} + + + {% endif %} + {% for css in user_css %} + {% if embed %} + + {% else %} + + {% endif %} + {% endfor %} + + + {% if embed %} + + {% else %} + + {% endif %} + {% for js in user_js %} + {% if embed %} + + {% else %} + + {% endif %} + {% endfor %} + + + +
+
+
+
+
+
+ {% for slide in slides %} + +
+
+
+ {% if slide.header %} +
{{ slide.header }}
+ {% endif %} + {% if slide.content %} +
{{ slide.content }}
+ {% endif %} +
+
+

Presenter Notes

+
+ {% if slide.presenter_notes %} + {{ slide.presenter_notes }} + {% endif %} +
+
+ +
+
+ {% endfor %} +
+
+ {% if toc %} + + {% endif %} + + + + diff --git a/doc/training-guides/theme/css/print.css b/doc/training-guides/theme/css/print.css new file mode 100644 index 00000000..f91e7477 --- /dev/null +++ b/doc/training-guides/theme/css/print.css @@ -0,0 +1,108 @@ +* { + margin: 0; + padding: 0; +} + +@page { + size: landscape; +} + +body { + font: 100% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; + padding: 0; + margin: 0; +} + +div.slide { + min-width: 800px; + min-height: 600px; + padding: 1em; + overflow: hidden; + page-break-after: always; + border: 1px solid black; + border-radius: 20px; +} + +div.slide div.inner { + width: 800px; + height: 600px; + margin: auto; + display: table-cell; +} + +h1 { + font-size: 2.4em; +} + +h2 { + font-size: 1.4em; +} + +h3 { + margin: 1em 0; +} + +ul { + margin: 0; + padding: 0; +} + +p, li, pre { + margin: 1em 0; +} + +li { + margin-left: 2em; +} + +a { + color: #000000; +} + +pre, code { + max-width: 800px; + background: #eee; + font-family: Monaco, monospace; + font-size: 90%; +} + +pre { + padding: .2em .5em; + overflow: hidden; + border-radius: .8em; +} + +code { + padding: 0 .2em; +} + +.slide header:only-child h1 { + line-height: 180%; + text-align: center; + display: table-cell; + vertical-align: middle; + height: 600px; + width: 800px; + font-size: 48px; + margin-top:100px; + margin-bottom:100px; +} + +#toc, #help, .slide aside, .slide footer, .slide .notes, +.presenter_notes, #current_presenter_notes, #presenter_note { + display: none; +} + +.colleft { + float: left; + max-width: 48%; + height: 550px; + padding-left: 2em; +} + +.colright { + float: right; + max-width: 48%; + height: 550px; + padding: 0; +} diff --git a/doc/training-guides/theme/css/screen.css b/doc/training-guides/theme/css/screen.css new file mode 100644 index 00000000..6162c0ba --- /dev/null +++ b/doc/training-guides/theme/css/screen.css @@ -0,0 +1,578 @@ +body { + font: 14px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; + background: #778; + padding: 0; + margin: 0; + overflow: hidden; +} + +div.presentation { + position: absolute; + width: 100%; + display: table-cell; + vertical-align: middle; + height: 100%; + background: inherit; +} + +div.presentation > h1 { + display: none; +} + +div.slides, body.expose div.slides.nocontext { + width: 100%; + height: 100%; + left: 0; + top: 0; + position: absolute; + display: block; +} + +div.slides.nocontext { + width: 900px; + margin: 0 auto; + overflow: hidden; + position: relative; + left: auto; + top: auto; +} + +div.slide { + display: inline; + position: absolute; + overflow: hidden; + width: 900px; + height: 700px; + margin-top: -350px; + margin-left: -400px; + left: 50%; + top: 50%; + background: -webkit-gradient(linear, left bottom, left top, from(#eef3f5), to(#fff)); + background-color: #eee; + background: -moz-linear-gradient(bottom, #eef3f5, #fff); + -webkit-transition: margin 0.25s ease-in-out; + -moz-transition: margin 0.25s ease-in-out; + -o-transition: margin 0.25s ease-in-out; + border-top-left-radius: 20px; + -moz-border-radius-topleft: 20px; + -webkit-border-top-left-radius: 20px; + border-top-right-radius: 20px; + -moz-border-radius-topright: 20px; + -webkit-border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + -moz-border-radius-bottomright: 20px; + -webkit-border-bottom-right-radius: 20px; + border-bottom-left-radius: 20px; + -moz-border-radius-bottomleft: 20px; + -webkit-border-bottom-left-radius: 20px; +} + +/* Expose */ + +body.expose div.slides { + float: left; + position: relative; + overflow: auto; + margin-bottom: 10px; +} + +body.expose div.slide { + display: block; + float: left; + position: relative; + left: auto !important; + top: auto !important; + margin: 10px !important; + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -moz-transform: scale(.33, .33); + -moz-transform-origin: 0 0; + -webkit-transform: scale(.33, .33); + -webkit-transform-origin: 0 0; + -o-transform: scale(.33, .33); + -o-transform-origin: 0 0; + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + cursor: pointer; +} + +body.expose div.slide:hover { + background: -webkit-gradient(linear, left bottom, left top, from(#eef3f5), to(#fff)); + background-color: #eee; + background: -moz-linear-gradient(bottom, #eef3f5, #fff); +} + +body.expose .slide-wrapper { + float: left; + position: relative; + margin: .5%; + width: 300px; + height: 233px; +} + +body.expose .slide footer { +} + +body.expose .slide .inner { +} + +body.expose .slide.far-past, +body.expose .slide.past, +body.expose .slide.future, +body.expose .slide.far-future { + margin-left: 0; +} + +body.expose .slide.current { + background: -webkit-gradient(linear, left bottom, left top, from(#ddb), to(#fff)); + background-color: #eee; + background: -moz-linear-gradient(bottom, #ddb, #fff); + border: 16px solid #fff; + -moz-transform: scale(.315, .315); + -moz-transform-origin: 0 0; + -webkit-transform: scale(.315, .315); + -webkit-transform-origin: 0 0; + -o-transform: scale(.315, .315); + -o-transform-origin: 0 0; +} + +/* Presenter Mode */ + +body.presenter_view div.slide { + display: inline; + position: absolute; + overflow: hidden; + -moz-transform: scale(.5, .5); + -moz-transform-origin: 0 0; + -webkit-transform: scale(.5, .5); + -webkit-transform-origin: 0 0; + -o-transform: scale(.5, .5); + -o-transform-origin: 0 0; + margin-top: -300px; +} + +body.presenter_view .slide.far-past { + display: block; + margin-left: -1500px; +} + +body.presenter_view .slide.past { + display: block; + margin-left: -975px; +} + +body.presenter_view .slide.current { + display: block; + margin-left: -475px; + border: 8px solid maroon; + z-index: 2; +} + +body.presenter_view .slide.future { + display: block; + margin-left: 25px; + z-index: 1; +} + +body.presenter_view .slide.far-future { + display: block; + margin-left: 525px; +} + +body.presenter_view div#current_presenter_notes { + visibility: visible; + display: block; + position: absolute; + overflow: auto; + vertical-align: middle; + left: 50%; + top: 50%; + margin-left: -475px; + margin-top: 100px; + z-index: 2; + width: 950px; + border-style: solid; + height: 30%; + background-color: silver; +} + +body.presenter_view div#current_presenter_notes section { + font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; + color: black; + text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px; + display: block; + overflow: visible; + position: relative; + background-color: #fffeff; + height: 120px; + margin-right: 30px; + margin-top: 60px; + margin-left: 30px; + padding-right: 10px; + padding-left: 10px; + padding-top: 10px; +} + +body.presenter_view div#current_presenter_notes section p { + margin: 0; +} + +body.presenter_view div#current_presenter_notes h1 { + font-size: 50%; + display: block; +} + +div#current_presenter_notes { + display: none; +} + +div.slide div.presenter_notes, div.slides div.presenter_notes { + display: none; +} + +/* Slide styles */ + +div.slide p { + font-size: 20px; +} + +.slide.far-past { + display: block; + margin-left: -2400px; +} + +.slide.past { + display: block; + margin-left: -1400px; +} + +.slide.current { + display: block; + margin-left: -450px; +} + +.slide.future { + display: block; + margin-left: 500px; +} + +.slide.far-future { + display: block; + margin-left: 1500px; +} + +body.three-d div.slides { + -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg); + -moz-transform: translateX(50px) scale(0.8) rotateY(10deg); + -o-transform: translateX(50px) scale(0.8) rotateY(10deg); +} + + +/* Content */ + +header:not(:only-child) { + font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; + font-weight: normal; + font-size: 50px; + border-bottom: 3px solid #777; + letter-spacing: -.05em; + color: #cf2f19; + text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px; + position: relative; + left: 30px; + top: 25px; + margin: 0; + padding: 0; +} + +header h1, header h2, header h3, header h4, header h5, header h6 { + display: inline; + font-size: 100%; + font-weight: normal; + padding: 0; + margin: 0; +} + +header h2:first-child { + margin-top: 0; +} + +section, .slide header:only-child h1 { + font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; + color: #3f3f3f; + text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px; + margin-left: 30px; + margin-right: 30px; + margin-top: 40px; + display: block; + overflow: hidden; +} + +img { display: block; margin: auto; max-width: 100%; max-height: 100%} + +section img.align-center { + display: block; + margin-left: auto; + margin-right: auto; +} + +section img.align-right { + display: inline; + margin-left: auto; + margin-right: 0; + float: right; +} + +section img.align-left { + display: block; + margin-right: auto; + margin-left: 0; +} + +a { + color: inherit; + display: inline-block; + text-decoration: underline; + line-height: 110%; +} + +pre, code, tt { + font-family: Monaco, Consolas, 'Bitstream Vera Sans Mono', 'Lucida Console', FreeMono, Courier, monospace; +} + +pre, .gist .gist-file .gist-data { + font-size: 18px; + max-height: 485px; + padding-top: 0.25em !important; + padding-right: 0.5em !important; + padding-left: 0.5em !important; + overflow: auto; +} + +/* render a nice scrollbar in overflowed pre area's */ +::-webkit-scrollbar { + height: 8px; + width: 8px; +} +::-webkit-scrollbar-thumb { + background: -webkit-gradient(linear, left bottom, left top, from(#777), to(#bbd)); + -webkit-border-radius: 1ex; +} +::-webkit-scrollbar-corner { + background: #dedede; +} + +blockquote { + border-left: solid 8px #778; + padding: .1ex 1ex; + font-style: italic; +} + +li { + padding: 10px 0; + font-size: 20px; +} + +li pre { margin-left: 0em; } + +.slide header:only-child h1 { + line-height: 180%; + text-align: center; + display: table-cell; + vertical-align: middle; + height: 700px; + width: 900px; + font-size: 50px; + margin-top:100px; + margin-bottom:100px; +} + +.sidebar { + clear: both; + background: -webkit-gradient(linear, top right, bottom right, from(#dde), to(#fff)); + -webkit-transition: margin 0.25s ease-in-out; + background-color: #eee; + background: -moz-linear-gradient(right, #dde, #fff); + border-right: 5px solid #ccd; + z-index: 9999999; + height: 100%; + overflow: hidden; + top: 0; + position: absolute; + display: block; + margin: 0; + margin-left: -400px; + padding: 10px 16px; + overflow: auto; + -webkit-transition: margin 0.2s ease-in-out; + -moz-transition: margin 0.2s ease-in-out; + -o-transition: margin 0.2s ease-in-out; +} + +.sidebar h2 { + text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px; + margin: 0 0 16px; + padding: 0; +} + +.sidebar table { + width: 100%; + margin: 0; + padding: 0; + border-collapse: collapse; +} + +.sidebar table caption { + display: none; +} + +.sidebar tr { + margin: 2px 0; + border-bottom: 1px solid #ccc; +} + +.sidebar th { + text-align: left; + font-weight: normal; + max-width: 300px; + overflow: hidden; +} + +.sidebar tr.sub th { + text-indent: 20px; +} + +.sidebar td { + text-align: right; + min-width: 20px; +} + +.sidebar a { + display: block; + text-decoration: none; + border-bottom: none; + padding: 4px 0; +} + +.sidebar tr.active { + background: #ff0; +} + +aside { + display: none; +} + aside.source { + position: absolute; + bottom: 6px; + left: 10px; + text-indent: 10px; + } + aside.page_number { + position: absolute; + bottom: 6px; + right: 10px; + text-indent: 10px; + } + +.notes { + display: none; + padding: 10px; + background: #ccc; + border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; +} + div.slide p.notes { + font-size: 90%; +} + +/* Pygments default theme */ +.hll { background-color: #ffffcc } +.c { color: #408080; font-style: italic } /* Comment */ +.err { border: 1px solid #FF0000 } /* Error */ +.k { color: #008000; font-weight: bold } /* Keyword */ +.o { color: #666666 } /* Operator */ +.cm { color: #408080; font-style: italic } /* Comment.Multiline */ +.cp { color: #BC7A00 } /* Comment.Preproc */ +.c1 { color: #408080; font-style: italic } /* Comment.Single */ +.cs { color: #408080; font-style: italic } /* Comment.Special */ +.gd { color: #A00000 } /* Generic.Deleted */ +.ge { font-style: italic } /* Generic.Emph */ +.gr { color: #FF0000 } /* Generic.Error */ +.gh { color: #000080; font-weight: bold } /* Generic.Heading */ +.gi { color: #00A000 } /* Generic.Inserted */ +.go { color: #808080 } /* Generic.Output */ +.gp { color: #000080; font-weight: bold } /* Generic.Prompt */ +.gs { font-weight: bold } /* Generic.Strong */ +.gu { color: #800080; font-weight: bold } /* Generic.Subheading */ +.gt { color: #0040D0 } /* Generic.Traceback */ +.kc { color: #008000; font-weight: bold } /* Keyword.Constant */ +.kd { color: #008000; font-weight: bold } /* Keyword.Declaration */ +.kn { color: #008000; font-weight: bold } /* Keyword.Namespace */ +.kp { color: #008000 } /* Keyword.Pseudo */ +.kr { color: #008000; font-weight: bold } /* Keyword.Reserved */ +.kt { color: #B00040 } /* Keyword.Type */ +.m { color: #666666 } /* Literal.Number */ +.s { color: #BA2121 } /* Literal.String */ +.na { color: #7D9029 } /* Name.Attribute */ +.nb { color: #008000 } /* Name.Builtin */ +.nc { color: #0000FF; font-weight: bold } /* Name.Class */ +.no { color: #880000 } /* Name.Constant */ +.nd { color: #AA22FF } /* Name.Decorator */ +.ni { color: #999999; font-weight: bold } /* Name.Entity */ +.ne { color: #D2413A; font-weight: bold } /* Name.Exception */ +.nf { color: #0000FF } /* Name.Function */ +.nl { color: #A0A000 } /* Name.Label */ +.nn { color: #0000FF; font-weight: bold } /* Name.Namespace */ +.nt { color: #008000; font-weight: bold } /* Name.Tag */ +.nv { color: #19177C } /* Name.Variable */ +.ow { color: #AA22FF; font-weight: bold } /* Operator.Word */ +.w { color: #bbbbbb } /* Text.Whitespace */ +.mf { color: #666666 } /* Literal.Number.Float */ +.mh { color: #666666 } /* Literal.Number.Hex */ +.mi { color: #666666 } /* Literal.Number.Integer */ +.mo { color: #666666 } /* Literal.Number.Oct */ +.sb { color: #BA2121 } /* Literal.String.Backtick */ +.sc { color: #BA2121 } /* Literal.String.Char */ +.sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */ +.s2 { color: #BA2121 } /* Literal.String.Double */ +.se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */ +.sh { color: #BA2121 } /* Literal.String.Heredoc */ +.si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */ +.sx { color: #008000 } /* Literal.String.Other */ +.sr { color: #BB6688 } /* Literal.String.Regex */ +.s1 { color: #BA2121 } /* Literal.String.Single */ +.ss { color: #19177C } /* Literal.String.Symbol */ +.bp { color: #008000 } /* Name.Builtin.Pseudo */ +.vc { color: #19177C } /* Name.Variable.Class */ +.vg { color: #19177C } /* Name.Variable.Global */ +.vi { color: #19177C } /* Name.Variable.Instance */ +.il { color: #666666 } /* Literal.Number.Integer.Long */ +.lineno { padding-right: 10px } /* A few space after linenos */ + +#blank { + position: absolute; + top: 0; + left: 0; + background-color: black; + width: 100%; + height: 100%; + z-index: 64; + display: none; +} + +.colleft { + float: left; + max-width: 48%; + height: 600px; + padding-left: 2em; +} + +.colright { + float: right; + max-width: 48%; + height: 600px; + padding: 0; +} diff --git a/doc/training-guides/theme/js/slides.js b/doc/training-guides/theme/js/slides.js new file mode 100644 index 00000000..e7ae40c5 --- /dev/null +++ b/doc/training-guides/theme/js/slides.js @@ -0,0 +1,580 @@ +function main() { + // Since we don't have the fallback of attachEvent and + // other IE only stuff we won't try to run JS for IE. + // It will run though when using Google Chrome Frame + if (document.all) { return; } + + var currentSlideNo; + var notesOn = false; + var expanded = false; + var hiddenContext = false; + var blanked = false; + var slides = document.getElementsByClassName('slide'); + var touchStartX = 0; + var spaces = /\s+/, a1 = ['']; + var tocOpened = false; + var helpOpened = false; + var overviewActive = false; + var modifierKeyDown = false; + var scale = 1; + var showingPresenterView = false; + var presenterViewWin = null; + var isPresenterView = false; + + var str2array = function(s) { + if (typeof s == 'string' || s instanceof String) { + if (s.indexOf(' ') < 0) { + a1[0] = s; + return a1; + } else { + return s.split(spaces); + } + } + return s; + }; + + var trim = function(str) { + return str.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); + }; + + var addClass = function(node, classStr) { + classStr = str2array(classStr); + var cls = ' ' + node.className + ' '; + for (var i = 0, len = classStr.length, c; i < len; ++i) { + c = classStr[i]; + if (c && cls.indexOf(' ' + c + ' ') < 0) { + cls += c + ' '; + } + } + node.className = trim(cls); + }; + + var removeClass = function(node, classStr) { + var cls; + if (!node) { + throw 'no node provided'; + } + if (classStr !== undefined) { + classStr = str2array(classStr); + cls = ' ' + node.className + ' '; + for (var i = 0, len = classStr.length; i < len; ++i) { + cls = cls.replace(' ' + classStr[i] + ' ', ' '); + } + cls = trim(cls); + } else { + cls = ''; + } + if (node.className != cls) { + node.className = cls; + } + }; + + var getSlideEl = function(slideNo) { + if (slideNo > 0) { + return slides[slideNo - 1]; + } else { + return null; + } + }; + + var getSlideTitle = function(slideNo) { + var el = getSlideEl(slideNo); + if (el) { + var headers = el.getElementsByTagName('header'); + if (headers.length > 0) { + return el.getElementsByTagName('header')[0].innerText; + } + } + return null; + }; + + var getSlidePresenterNote = function(slideNo) { + var el = getSlideEl(slideNo); + if (el) { + var n = el.getElementsByClassName('presenter_notes'); + if (n.length > 0) { + return n[0]; + } + } + return null; + }; + + var changeSlideElClass = function(slideNo, className) { + var el = getSlideEl(slideNo); + if (el) { + removeClass(el, 'far-past past current future far-future'); + addClass(el, className); + } + }; + + var updateSlideClasses = function(updateOther) { + window.location.hash = (isPresenterView ? "presenter" : "slide") + currentSlideNo; + + for (var i=1; i 1) { + currentSlideNo--; + } + updateSlideClasses(true); + }; + + var showNotes = function() { + var notes = getSlideEl(currentSlideNo).getElementsByClassName('notes'); + for (var i = 0, len = notes.length; i < len; i++) { + notes.item(i).style.display = (notesOn) ? 'none':'block'; + } + notesOn = !notesOn; + }; + + var showSlideNumbers = function() { + var asides = document.getElementsByClassName('page_number'); + var hidden = asides[0].style.display != 'block'; + for (var i = 0; i < asides.length; i++) { + asides.item(i).style.display = hidden ? 'block' : 'none'; + } + }; + + var showSlideSources = function() { + var asides = document.getElementsByClassName('source'); + var hidden = asides[0].style.display != 'block'; + for (var i = 0; i < asides.length; i++) { + asides.item(i).style.display = hidden ? 'block' : 'none'; + } + }; + + var showToc = function() { + if (helpOpened) { + showHelp(); + } + var toc = document.getElementById('toc'); + if (toc) { + toc.style.marginLeft = tocOpened ? '-' + (toc.clientWidth + 20) + 'px' : '0px'; + tocOpened = !tocOpened; + } + updateOverview(); + }; + + var showHelp = function() { + if (tocOpened) { + showToc(); + } + + var help = document.getElementById('help'); + + if (help) { + help.style.marginLeft = helpOpened ? '-' + (help.clientWidth + 20) + 'px' : '0px'; + helpOpened = !helpOpened; + } + }; + + var showPresenterView = function() { + if (isPresenterView) { return; } + + if (showingPresenterView) { + presenterViewWin.close(); + presenterViewWin = null; + showingPresenterView = false; + } else { + presenterViewWin = open(window.location.pathname + "#presenter" + currentSlideNo, 'presenter_notes', + 'directories=no,location=no,toolbar=no,menubar=no,copyhistory=no'); + showingPresenterView = true; + } + }; + + var switch3D = function() { + if (document.body.className.indexOf('three-d') == -1) { + document.getElementsByClassName('presentation')[0].style.webkitPerspective = '1000px'; + document.body.className += ' three-d'; + } else { + window.setTimeout('document.getElementsByClassName(\'presentation\')[0].style.webkitPerspective = \'0\';', 2000); + document.body.className = document.body.className.replace(/three-d/, ''); + } + }; + + var toggleOverview = function() { + if (!overviewActive) { + addClass(document.body, 'expose'); + overviewActive = true; + setScale(1); + } else { + removeClass(document.body, 'expose'); + overviewActive = false; + if (expanded) { + setScale(scale); // restore scale + } + } + processContext(); + updateOverview(); + }; + + var updateOverview = function() { + try { + var presentation = document.getElementsByClassName('presentation')[0]; + } catch (e) { + return; + } + + if (isPresenterView) { + var action = overviewActive ? removeClass : addClass; + action(document.body, 'presenter_view'); + } + + var toc = document.getElementById('toc'); + + if (!toc) { + return; + } + + if (!tocOpened || !overviewActive) { + presentation.style.marginLeft = '0px'; + presentation.style.width = '100%'; + } else { + presentation.style.marginLeft = toc.clientWidth + 'px'; + presentation.style.width = (presentation.clientWidth - toc.clientWidth) + 'px'; + } + }; + + var computeScale = function() { + var cSlide = document.getElementsByClassName('current')[0]; + var sx = cSlide.clientWidth / window.innerWidth; + var sy = cSlide.clientHeight / window.innerHeight; + return 1 / Math.max(sx, sy); + }; + + var setScale = function(scale) { + var presentation = document.getElementsByClassName('slides')[0]; + var transform = 'scale(' + scale + ')'; + presentation.style.MozTransform = transform; + presentation.style.WebkitTransform = transform; + presentation.style.OTransform = transform; + presentation.style.msTransform = transform; + presentation.style.transform = transform; + }; + + var expandSlides = function() { + if (overviewActive) { + return; + } + if (expanded) { + setScale(1); + expanded = false; + } else { + scale = computeScale(); + setScale(scale); + expanded = true; + } + }; + + var showContext = function() { + try { + var presentation = document.getElementsByClassName('slides')[0]; + removeClass(presentation, 'nocontext'); + } catch (e) {} + }; + + var hideContext = function() { + try { + var presentation = document.getElementsByClassName('slides')[0]; + addClass(presentation, 'nocontext'); + } catch (e) {} + }; + + var processContext = function() { + if (hiddenContext) { + hideContext(); + } else { + showContext(); + } + }; + + var toggleContext = function() { + hiddenContext = !hiddenContext; + processContext(); + }; + + var toggleBlank = function() { + blank_elem = document.getElementById('blank'); + + blank_elem.style.display = blanked ? 'none' : 'block'; + + blanked = !blanked; + }; + + var isModifierKey = function(keyCode) { + switch (keyCode) { + case 16: // shift + case 17: // ctrl + case 18: // alt + case 91: // command + return true; + break; + default: + return false; + break; + } + }; + + var checkModifierKeyUp = function(event) { + if (isModifierKey(event.keyCode)) { + modifierKeyDown = false; + } + }; + + var checkModifierKeyDown = function(event) { + if (isModifierKey(event.keyCode)) { + modifierKeyDown = true; + } + }; + + var handleBodyKeyDown = function(event) { + switch (event.keyCode) { + case 13: // Enter + if (overviewActive) { + toggleOverview(); + } + break; + case 27: // ESC + toggleOverview(); + break; + case 37: // left arrow + case 33: // page up + event.preventDefault(); + prevSlide(); + break; + case 39: // right arrow + case 32: // space + case 34: // page down + event.preventDefault(); + nextSlide(); + break; + case 50: // 2 + if (!modifierKeyDown) { + showNotes(); + } + break; + case 51: // 3 + if (!modifierKeyDown && !overviewActive) { + switch3D(); + } + break; + case 190: // . + case 48: // 0 + case 66: // b + if (!modifierKeyDown && !overviewActive) { + toggleBlank(); + } + break; + case 67: // c + if (!modifierKeyDown && !overviewActive) { + toggleContext(); + } + break; + case 69: // e + if (!modifierKeyDown && !overviewActive) { + expandSlides(); + } + break; + case 72: // h + showHelp(); + break; + case 78: // n + if (!modifierKeyDown && !overviewActive) { + showSlideNumbers(); + } + break; + case 80: // p + if (!modifierKeyDown && !overviewActive) { + showPresenterView(); + } + break; + case 83: // s + if (!modifierKeyDown && !overviewActive) { + showSlideSources(); + } + break; + case 84: // t + showToc(); + break; + } + }; + + var handleWheel = function(event) { + if (tocOpened || helpOpened || overviewActive) { + return; + } + + var delta = 0; + + if (!event) { + event = window.event; + } + + if (event.wheelDelta) { + delta = event.wheelDelta/120; + if (window.opera) delta = -delta; + } else if (event.detail) { + delta = -event.detail/3; + } + + if (delta && delta <0) { + nextSlide(); + } else if (delta) { + prevSlide(); + } + }; + + var addSlideClickListeners = function() { + for (var i=0; i < slides.length; i++) { + var slide = slides.item(i); + slide.num = i + 1; + slide.addEventListener('click', function(e) { + if (overviewActive) { + currentSlideNo = this.num; + toggleOverview(); + updateSlideClasses(true); + e.preventDefault(); + } + return false; + }, true); + } + }; + + var addRemoteWindowControls = function() { + window.addEventListener("message", function(e) { + if (e.data.indexOf("slide#") != -1) { + currentSlideNo = Number(e.data.replace('slide#', '')); + updateSlideClasses(false); + } + }, false); + }; + + var addTouchListeners = function() { + document.addEventListener('touchstart', function(e) { + touchStartX = e.touches[0].pageX; + }, false); + document.addEventListener('touchend', function(e) { + var pixelsMoved = touchStartX - e.changedTouches[0].pageX; + var SWIPE_SIZE = 150; + if (pixelsMoved > SWIPE_SIZE) { + nextSlide(); + } + else if (pixelsMoved < -SWIPE_SIZE) { + prevSlide(); + } + }, false); + }; + + var addTocLinksListeners = function() { + var toc = document.getElementById('toc'); + if (toc) { + var tocLinks = toc.getElementsByTagName('a'); + for (var i=0; i < tocLinks.length; i++) { + tocLinks.item(i).addEventListener('click', function(e) { + currentSlideNo = Number(this.attributes['href'].value.replace('#slide', '')); + updateSlideClasses(true); + e.preventDefault(); + }, true); + } + } + }; + + // initialize + + (function() { + if (window.location.hash == "") { + currentSlideNo = 1; + } else if (window.location.hash.indexOf("#presenter") != -1) { + currentSlideNo = Number(window.location.hash.replace('#presenter', '')); + isPresenterView = true; + showingPresenterView = true; + presenterViewWin = window; + addClass(document.body, 'presenter_view'); + } else { + currentSlideNo = Number(window.location.hash.replace('#slide', '')); + } + + document.addEventListener('keyup', checkModifierKeyUp, false); + document.addEventListener('keydown', handleBodyKeyDown, false); + document.addEventListener('keydown', checkModifierKeyDown, false); + document.addEventListener('DOMMouseScroll', handleWheel, false); + + window.onmousewheel = document.onmousewheel = handleWheel; + window.onresize = expandSlides; + + for (var i = 0, el; el = slides[i]; i++) { + addClass(el, 'slide far-future'); + } + updateSlideClasses(false); + + // add support for finger events (filter it by property detection?) + addTouchListeners(); + + addTocLinksListeners(); + + addSlideClickListeners(); + + addRemoteWindowControls(); + })(); +}