From 3d28b8992a1dd638d1fe0d86db43ed56ca682611 Mon Sep 17 00:00:00 2001 From: Michael Saunby Date: Fri, 27 Oct 2023 09:36:59 +0100 Subject: [PATCH 1/4] slide show (reveal.js) --- reveal.js/.gitignore | 11 + reveal.js/.npmignore | 7 + reveal.js/00_welcome.md | 34 + reveal.js/01_motivation.md | 70 + reveal.js/02_fundamentals.md | 330 + reveal.js/03_lists.md | 532 + reveal.js/04_dictionaries.md | 174 + reveal.js/05_control_flow.md | 270 + reveal.js/06_loops.md | 436 + reveal.js/07_additional_exercises.md | 144 + reveal.js/08_recap.md | 339 + reveal.js/09_functions.md | 533 + reveal.js/10_imports.md | 140 + reveal.js/11_analysis_task_intro.md | 37 + reveal.js/12_analysis_task_1.md | 797 + reveal.js/13_analysis_task_2.md | 303 + reveal.js/14_analysis_task_3.md | 255 + reveal.js/15_wrap_up.md | 18 + reveal.js/LICENSE | 19 + reveal.js/README.md | 50 + reveal.js/css/layout.scss | 69 + reveal.js/css/print/paper.scss | 166 + reveal.js/css/print/pdf.scss | 159 + reveal.js/css/reveal.scss | 2104 ++ reveal.js/css/theme/README.md | 21 + reveal.js/css/theme/source/beige.scss | 44 + .../css/theme/source/black-contrast.scss | 49 + reveal.js/css/theme/source/black.scss | 46 + reveal.js/css/theme/source/blood.scss | 87 + reveal.js/css/theme/source/dracula.scss | 106 + reveal.js/css/theme/source/league.scss | 36 + reveal.js/css/theme/source/moon.scss | 58 + reveal.js/css/theme/source/night.scss | 37 + reveal.js/css/theme/source/serif.scss | 41 + reveal.js/css/theme/source/simple.scss | 43 + reveal.js/css/theme/source/sky.scss | 52 + reveal.js/css/theme/source/solarized.scss | 66 + .../css/theme/source/white-contrast.scss | 52 + reveal.js/css/theme/source/white.scss | 49 + reveal.js/css/theme/template/exposer.scss | 30 + reveal.js/css/theme/template/mixins.scss | 45 + reveal.js/css/theme/template/settings.scss | 50 + reveal.js/css/theme/template/theme.scss | 331 + reveal.js/demo.html | 481 + reveal.js/dist/reset.css | 30 + reveal.js/dist/reveal.css | 8 + reveal.js/dist/reveal.esm.js | 9 + reveal.js/dist/reveal.esm.js.map | 1 + reveal.js/dist/reveal.js | 9 + reveal.js/dist/reveal.js.map | 1 + reveal.js/dist/theme/beige.css | 366 + reveal.js/dist/theme/black-contrast.css | 362 + reveal.js/dist/theme/black.css | 359 + reveal.js/dist/theme/blood.css | 392 + reveal.js/dist/theme/dracula.css | 385 + .../dist/theme/fonts/league-gothic/LICENSE | 2 + .../fonts/league-gothic/league-gothic.css | 10 + .../fonts/league-gothic/league-gothic.eot | Bin 0 -> 25696 bytes .../fonts/league-gothic/league-gothic.ttf | Bin 0 -> 64256 bytes .../fonts/league-gothic/league-gothic.woff | Bin 0 -> 30764 bytes .../dist/theme/fonts/source-sans-pro/LICENSE | 45 + .../source-sans-pro-italic.eot | Bin 0 -> 75720 bytes .../source-sans-pro-italic.ttf | Bin 0 -> 238084 bytes .../source-sans-pro-italic.woff | Bin 0 -> 98556 bytes .../source-sans-pro-regular.eot | Bin 0 -> 88070 bytes .../source-sans-pro-regular.ttf | Bin 0 -> 288008 bytes .../source-sans-pro-regular.woff | Bin 0 -> 114324 bytes .../source-sans-pro-semibold.eot | Bin 0 -> 89897 bytes .../source-sans-pro-semibold.ttf | Bin 0 -> 284640 bytes .../source-sans-pro-semibold.woff | Bin 0 -> 115648 bytes .../source-sans-pro-semibolditalic.eot | Bin 0 -> 75706 bytes .../source-sans-pro-semibolditalic.ttf | Bin 0 -> 240944 bytes .../source-sans-pro-semibolditalic.woff | Bin 0 -> 98816 bytes .../fonts/source-sans-pro/source-sans-pro.css | 39 + reveal.js/dist/theme/league.css | 368 + reveal.js/dist/theme/moon.css | 367 + reveal.js/dist/theme/night.css | 360 + reveal.js/dist/theme/serif.css | 363 + reveal.js/dist/theme/simple.css | 362 + reveal.js/dist/theme/sky.css | 370 + reveal.js/dist/theme/solarized.css | 363 + reveal.js/dist/theme/white-contrast.css | 362 + reveal.js/dist/theme/white.css | 359 + ...hite_contrast_compact_verbatim_headers.css | 360 + reveal.js/gulpfile.js | 323 + reveal.js/index.html | 93 + reveal.js/js/components/playback.js | 165 + reveal.js/js/config.js | 330 + reveal.js/js/controllers/autoanimate.js | 640 + reveal.js/js/controllers/backgrounds.js | 437 + reveal.js/js/controllers/controls.js | 266 + reveal.js/js/controllers/focus.js | 103 + reveal.js/js/controllers/fragments.js | 375 + reveal.js/js/controllers/jumptoslide.js | 170 + reveal.js/js/controllers/keyboard.js | 386 + reveal.js/js/controllers/location.js | 247 + reveal.js/js/controllers/notes.js | 126 + reveal.js/js/controllers/overview.js | 255 + reveal.js/js/controllers/plugins.js | 254 + reveal.js/js/controllers/pointer.js | 129 + reveal.js/js/controllers/printview.js | 237 + reveal.js/js/controllers/progress.js | 110 + reveal.js/js/controllers/scrollview.js | 888 + reveal.js/js/controllers/slidecontent.js | 484 + reveal.js/js/controllers/slidenumber.js | 132 + reveal.js/js/controllers/touch.js | 263 + reveal.js/js/index.js | 58 + reveal.js/js/reveal.js | 3018 +++ reveal.js/js/utils/color.js | 77 + reveal.js/js/utils/constants.js | 10 + reveal.js/js/utils/device.js | 8 + reveal.js/js/utils/loader.js | 46 + reveal.js/js/utils/util.js | 313 + reveal.js/package-lock.json | 17719 ++++++++++++++++ reveal.js/package.json | 104 + reveal.js/plugin/highlight/highlight.esm.js | 5 + reveal.js/plugin/highlight/highlight.js | 5 + reveal.js/plugin/highlight/monokai.css | 71 + reveal.js/plugin/highlight/plugin.js | 439 + reveal.js/plugin/highlight/zenburn.css | 80 + reveal.js/plugin/markdown/markdown.esm.js | 7 + reveal.js/plugin/markdown/markdown.js | 7 + reveal.js/plugin/markdown/plugin.js | 491 + reveal.js/plugin/math/katex.js | 96 + reveal.js/plugin/math/math.esm.js | 6 + reveal.js/plugin/math/math.js | 1 + reveal.js/plugin/math/mathjax2.js | 89 + reveal.js/plugin/math/mathjax3.js | 77 + reveal.js/plugin/math/plugin.js | 15 + reveal.js/plugin/notes/notes.esm.js | 1 + reveal.js/plugin/notes/notes.js | 1 + reveal.js/plugin/notes/plugin.js | 265 + reveal.js/plugin/notes/speaker-view.html | 891 + reveal.js/plugin/search/plugin.js | 243 + reveal.js/plugin/search/search.esm.js | 7 + reveal.js/plugin/search/search.js | 7 + reveal.js/plugin/zoom/plugin.js | 264 + reveal.js/plugin/zoom/zoom.esm.js | 11 + reveal.js/plugin/zoom/zoom.js | 11 + 139 files changed, 45229 insertions(+) create mode 100644 reveal.js/.gitignore create mode 100644 reveal.js/.npmignore create mode 100644 reveal.js/00_welcome.md create mode 100644 reveal.js/01_motivation.md create mode 100644 reveal.js/02_fundamentals.md create mode 100644 reveal.js/03_lists.md create mode 100644 reveal.js/04_dictionaries.md create mode 100644 reveal.js/05_control_flow.md create mode 100644 reveal.js/06_loops.md create mode 100644 reveal.js/07_additional_exercises.md create mode 100644 reveal.js/08_recap.md create mode 100644 reveal.js/09_functions.md create mode 100644 reveal.js/10_imports.md create mode 100644 reveal.js/11_analysis_task_intro.md create mode 100644 reveal.js/12_analysis_task_1.md create mode 100644 reveal.js/13_analysis_task_2.md create mode 100644 reveal.js/14_analysis_task_3.md create mode 100644 reveal.js/15_wrap_up.md create mode 100644 reveal.js/LICENSE create mode 100644 reveal.js/README.md create mode 100644 reveal.js/css/layout.scss create mode 100644 reveal.js/css/print/paper.scss create mode 100644 reveal.js/css/print/pdf.scss create mode 100644 reveal.js/css/reveal.scss create mode 100644 reveal.js/css/theme/README.md create mode 100644 reveal.js/css/theme/source/beige.scss create mode 100644 reveal.js/css/theme/source/black-contrast.scss create mode 100644 reveal.js/css/theme/source/black.scss create mode 100644 reveal.js/css/theme/source/blood.scss create mode 100644 reveal.js/css/theme/source/dracula.scss create mode 100644 reveal.js/css/theme/source/league.scss create mode 100644 reveal.js/css/theme/source/moon.scss create mode 100644 reveal.js/css/theme/source/night.scss create mode 100644 reveal.js/css/theme/source/serif.scss create mode 100644 reveal.js/css/theme/source/simple.scss create mode 100644 reveal.js/css/theme/source/sky.scss create mode 100644 reveal.js/css/theme/source/solarized.scss create mode 100644 reveal.js/css/theme/source/white-contrast.scss create mode 100644 reveal.js/css/theme/source/white.scss create mode 100644 reveal.js/css/theme/template/exposer.scss create mode 100644 reveal.js/css/theme/template/mixins.scss create mode 100644 reveal.js/css/theme/template/settings.scss create mode 100644 reveal.js/css/theme/template/theme.scss create mode 100644 reveal.js/demo.html create mode 100644 reveal.js/dist/reset.css create mode 100644 reveal.js/dist/reveal.css create mode 100644 reveal.js/dist/reveal.esm.js create mode 100644 reveal.js/dist/reveal.esm.js.map create mode 100644 reveal.js/dist/reveal.js create mode 100644 reveal.js/dist/reveal.js.map create mode 100644 reveal.js/dist/theme/beige.css create mode 100644 reveal.js/dist/theme/black-contrast.css create mode 100644 reveal.js/dist/theme/black.css create mode 100644 reveal.js/dist/theme/blood.css create mode 100644 reveal.js/dist/theme/dracula.css create mode 100644 reveal.js/dist/theme/fonts/league-gothic/LICENSE create mode 100644 reveal.js/dist/theme/fonts/league-gothic/league-gothic.css create mode 100755 reveal.js/dist/theme/fonts/league-gothic/league-gothic.eot create mode 100755 reveal.js/dist/theme/fonts/league-gothic/league-gothic.ttf create mode 100755 reveal.js/dist/theme/fonts/league-gothic/league-gothic.woff create mode 100644 reveal.js/dist/theme/fonts/source-sans-pro/LICENSE create mode 100755 reveal.js/dist/theme/fonts/source-sans-pro/source-sans-pro-italic.eot create mode 100755 reveal.js/dist/theme/fonts/source-sans-pro/source-sans-pro-italic.ttf create mode 100755 reveal.js/dist/theme/fonts/source-sans-pro/source-sans-pro-italic.woff create mode 100755 reveal.js/dist/theme/fonts/source-sans-pro/source-sans-pro-regular.eot create mode 100755 reveal.js/dist/theme/fonts/source-sans-pro/source-sans-pro-regular.ttf create mode 100755 reveal.js/dist/theme/fonts/source-sans-pro/source-sans-pro-regular.woff create mode 100755 reveal.js/dist/theme/fonts/source-sans-pro/source-sans-pro-semibold.eot create mode 100755 reveal.js/dist/theme/fonts/source-sans-pro/source-sans-pro-semibold.ttf create mode 100755 reveal.js/dist/theme/fonts/source-sans-pro/source-sans-pro-semibold.woff create mode 100755 reveal.js/dist/theme/fonts/source-sans-pro/source-sans-pro-semibolditalic.eot create mode 100755 reveal.js/dist/theme/fonts/source-sans-pro/source-sans-pro-semibolditalic.ttf create mode 100755 reveal.js/dist/theme/fonts/source-sans-pro/source-sans-pro-semibolditalic.woff create mode 100644 reveal.js/dist/theme/fonts/source-sans-pro/source-sans-pro.css create mode 100644 reveal.js/dist/theme/league.css create mode 100644 reveal.js/dist/theme/moon.css create mode 100644 reveal.js/dist/theme/night.css create mode 100644 reveal.js/dist/theme/serif.css create mode 100644 reveal.js/dist/theme/simple.css create mode 100644 reveal.js/dist/theme/sky.css create mode 100644 reveal.js/dist/theme/solarized.css create mode 100644 reveal.js/dist/theme/white-contrast.css create mode 100644 reveal.js/dist/theme/white.css create mode 100644 reveal.js/dist/theme/white_contrast_compact_verbatim_headers.css create mode 100644 reveal.js/gulpfile.js create mode 100644 reveal.js/index.html create mode 100644 reveal.js/js/components/playback.js create mode 100644 reveal.js/js/config.js create mode 100644 reveal.js/js/controllers/autoanimate.js create mode 100644 reveal.js/js/controllers/backgrounds.js create mode 100644 reveal.js/js/controllers/controls.js create mode 100644 reveal.js/js/controllers/focus.js create mode 100644 reveal.js/js/controllers/fragments.js create mode 100644 reveal.js/js/controllers/jumptoslide.js create mode 100644 reveal.js/js/controllers/keyboard.js create mode 100644 reveal.js/js/controllers/location.js create mode 100644 reveal.js/js/controllers/notes.js create mode 100644 reveal.js/js/controllers/overview.js create mode 100644 reveal.js/js/controllers/plugins.js create mode 100644 reveal.js/js/controllers/pointer.js create mode 100644 reveal.js/js/controllers/printview.js create mode 100644 reveal.js/js/controllers/progress.js create mode 100644 reveal.js/js/controllers/scrollview.js create mode 100644 reveal.js/js/controllers/slidecontent.js create mode 100644 reveal.js/js/controllers/slidenumber.js create mode 100644 reveal.js/js/controllers/touch.js create mode 100644 reveal.js/js/index.js create mode 100644 reveal.js/js/reveal.js create mode 100644 reveal.js/js/utils/color.js create mode 100644 reveal.js/js/utils/constants.js create mode 100644 reveal.js/js/utils/device.js create mode 100644 reveal.js/js/utils/loader.js create mode 100644 reveal.js/js/utils/util.js create mode 100644 reveal.js/package-lock.json create mode 100644 reveal.js/package.json create mode 100644 reveal.js/plugin/highlight/highlight.esm.js create mode 100644 reveal.js/plugin/highlight/highlight.js create mode 100644 reveal.js/plugin/highlight/monokai.css create mode 100644 reveal.js/plugin/highlight/plugin.js create mode 100644 reveal.js/plugin/highlight/zenburn.css create mode 100644 reveal.js/plugin/markdown/markdown.esm.js create mode 100644 reveal.js/plugin/markdown/markdown.js create mode 100755 reveal.js/plugin/markdown/plugin.js create mode 100755 reveal.js/plugin/math/katex.js create mode 100644 reveal.js/plugin/math/math.esm.js create mode 100644 reveal.js/plugin/math/math.js create mode 100644 reveal.js/plugin/math/mathjax2.js create mode 100644 reveal.js/plugin/math/mathjax3.js create mode 100644 reveal.js/plugin/math/plugin.js create mode 100644 reveal.js/plugin/notes/notes.esm.js create mode 100644 reveal.js/plugin/notes/notes.js create mode 100644 reveal.js/plugin/notes/plugin.js create mode 100644 reveal.js/plugin/notes/speaker-view.html create mode 100644 reveal.js/plugin/search/plugin.js create mode 100644 reveal.js/plugin/search/search.esm.js create mode 100644 reveal.js/plugin/search/search.js create mode 100644 reveal.js/plugin/zoom/plugin.js create mode 100644 reveal.js/plugin/zoom/zoom.esm.js create mode 100644 reveal.js/plugin/zoom/zoom.js diff --git a/reveal.js/.gitignore b/reveal.js/.gitignore new file mode 100644 index 0000000..ba5aa84 --- /dev/null +++ b/reveal.js/.gitignore @@ -0,0 +1,11 @@ +.idea/ +*.iml +*.iws +*.eml +out/ +.DS_Store +.svn +log/*.log +tmp/** +node_modules/ +.sass-cache \ No newline at end of file diff --git a/reveal.js/.npmignore b/reveal.js/.npmignore new file mode 100644 index 0000000..50c12b9 --- /dev/null +++ b/reveal.js/.npmignore @@ -0,0 +1,7 @@ +/test +/examples +.github +.gulpfile +.sass-cache +gulpfile.js +CONTRIBUTING.md \ No newline at end of file diff --git a/reveal.js/00_welcome.md b/reveal.js/00_welcome.md new file mode 100644 index 0000000..7b8f33a --- /dev/null +++ b/reveal.js/00_welcome.md @@ -0,0 +1,34 @@ + + +## Welcome + +This workshop, and the others in the series, were put together by the Research Software Engineering Group, and supported by a team of volunteers. It has been adapted from the [Programming with Python](https://swcarpentry.github.io/python-novice-inflammation/) course, by the Software Carpentries. It forms part of an ongoing initiative to provide training for staff and students to expand their skillsets, and position themselves to confidently perform the informatics elements of their research projects in an efficient and reproducible way. The programme and workshops are under constant evolution. We are grateful for your feedback, a core component of this process. + +We will start by introducing the workshop leaders and helpers. We are all here because we are passionate about sharing our knowledge and supporting the development of you, our colleagues. For some of us, this is not a requirement of our current position and we are doing this at the margins of our time. + +We will have a collaborative document where we can post resources and answer any questions. You are welcome to introduce yourselves at the top of this document. + + +## Housekeeping + +The workshop in organised into episodes of content, which can be seen in the workshop schedule available on the course website. Our aim is to have an official break every 60-90 minutes, but there will also be periods in between demonstrations where you are free to take additional comfort breaks if required. This workshop will be delivered via live coding, and presentation of course material. + +Our aim is to be responsive to the needs of the group, both in person and virtual. Therefore, think of the schedule as a guide rather than a strict timetable. We welcome questions and queries as we go along, there are helpers in the room so raise your hand if you need assistance. There is also a dedicated helper for the virtual participants so please raise your virtual hand to attract their attention. In order to try to provide equality for virtual and in person participants we request that the Teams/Zoom chat is used minimally and all questions/comments etc are posted in our collaborative notes document. This will be saved and distributed to attendees at the end of each workshop session. + + +## Code of conduct + +This course will be delivered in adherence to the teaching principles and guidelines of the University of Exeter. We encourage all attendees to adhere to the code of conduct, which can be found [here](https://uniexeterrse.github.io/intro-to-python/code.html). + +Let's get started. diff --git a/reveal.js/01_motivation.md b/reveal.js/01_motivation.md new file mode 100644 index 0000000..e8cac9b --- /dev/null +++ b/reveal.js/01_motivation.md @@ -0,0 +1,70 @@ + + +## Learning Objectives + +In this lesson, we will discuss: + +- Who you are, and why you signed up for this course +- Why you should learn to code +- Why Python is great! + + +## Who are you? + +As we begin, and ensure that everyone has a working Python installation, feel free to write in the Teams chat which Department you are from, and any reasons you signed up for this course! + + +## Why learn to code? + +Loads of reasons! Focused on researchers specifically: + +- Code allows you to analyse large (millions of rows) data sets. +- Scripts, programs and software are explicit lists of instructions. Hence, analysis performed via code makes this analysis more reproducible, replicable, and robust. +- Code allows you to share your analysis with others. It becomes easier to integrate into other systems built with code, such as websites, blogs, dashboards, and other pieces of software. +- Code can help create complex visualisations, nicely formatted documents, animations, and other engaging outputs. +- Code can speed up repetitive tasks such as editing or renaming files, copying data, and even collecting new data. +- Code can help manage multi-user projects, ensuring research is not lost when individuals move on. +- Being fluent in even one coding language can open up many career opportunities. + + +But most importantly: + +- It is fun, and also incredibly satisfying, to build things! + + +## Why Python? + +- Python is open-source. Code written with Python is freely usable and distributable, even for commercial use. +- Python is easy to learn, compared to other programming languages. Its syntax was specifically designed to be easily read and understood, even by amateur developers. +- The Python community is large, and community support is easy to find. If you have a problem, someone has probably had the same problem before you! +- Python is a general purpose, flexible, versatile language. It can be used for data analysis, building websites, designing software, and anything else you can think of. +- If you want explore machine learning, AI, NLP, and similar, most of the cutting edge systems are built with Python. +- Python is supported by some huge organisations, such as Amazon, Google, and Facebook. + + +## Why Python over X? + +Q: MATLAB and R are commonly used in academic settings. Why should I use Python over these? + +A: There is no right answer, and everyone has their own opinion! At the end of the day, most modern languages are Turing complete, and can solve a variety of problems. However, Python is more popular than both of these languages outside of academia, it has a larger worldwide community, and is the de-facto language for machine learning and AI applications. + + +Some more details are found below: + +- MATLAB is not open-source, and toolboxes are incredibly expensive. If you plan on ever leaving academia and programming for yourself, or for your own company, you should not learn MATLAB (as you will have to pay huge amounts to avoid wasting your language-specific knowledge). In addition, outside of engineering, MATLAB is less commonly used. MATLAB does have some good features: matrix manipulation in MATLAB is well considered, and Simulink is effective as well. For everything else however, consider another language: Python is an obvious choice. +- R is an open-source statistical computing language, with some excellent features for statistics and visualisation, including some fantastic Bayesian and MCMC packages. However, if you plan on linking analysis with cloud services, building websites or applications, or performing other development tasks, a general purpose language such as Python is perhaps a better choice. A good comparison of Python and R is made by IBM [here](https://www.ibm.com/cloud/blog/python-vs-r). + + +## Why NOT Python? + +Q: What are the reasons I should not learn Python? + +A: As a beginner, there are none to worry about for a few years! However, compared to languages such as C++ or Rust, Python can be slower (in terms of calculation speed) for certain types of tasks. In addition, if you plan on building web applications, or anything with a front (user-facing) end, you will have to learn Javascript at some point. Even so, Python is a fantastic choice for your first (general) programming language. diff --git a/reveal.js/02_fundamentals.md b/reveal.js/02_fundamentals.md new file mode 100644 index 0000000..a6292c4 --- /dev/null +++ b/reveal.js/02_fundamentals.md @@ -0,0 +1,330 @@ + + +## Learning Objectives + +At the end of this lesson you will be able to: + +- Identify and explain the basic data types used in Python +- Create and use new variables in Python +- Assign values to variables, and change these values later +- Identify and use some built in features and functions of Python +- Perform some simple operations on variables + + +## Key points + +- Basic data types in Python include integers, strings, and floating-point numbers. +- Use ```variable = value``` to assign a value to a variable. +- Variables are created on demand whenever a value is assigned to them. +- Use ```print(something)``` to display the value of `something`. +- Built-in functions, like ```print()```, are always available to use. + + +## Variables + +The Python interpreter can be used as a calculator: +~~~python +3 + 5 * 4 +~~~ + +~~~ +23 +~~~ + +This is great but not very interesting. +To do anything useful with data, we need to assign its value to a _variable_. +In Python, we can assign a value to a variable, using the equals sign `=`. +For example, we can track the weight of a patient who weighs 60 kilograms by +assigning the value `60` to a variable `weight_kg`: + +~~~python +weight_kg = 60 +~~~ + +From now on, whenever we use `weight_kg`, Python will substitute the value we assigned to +it. In layperson's terms, **a variable is a name for a value**. + + +In Python, variable names: + + - can include letters, digits, and underscores + - cannot start with a digit + - are case-sensitive. + +This means that, for example: + - `weight0` is a valid variable name, whereas `0weight` is not + - `weight` and `Weight` are different variables + + +## Types of data +Python knows various types of data. Three common ones are: + +* integer numbers +* floating point numbers, and +* strings. + +In the example above, variable `weight_kg` has an integer value of `60`. +If we want to more precisely track the weight of our patient, +we can use a floating point value by executing: + +~~~ +weight_kg = 60.3 +~~~ +{: .language-python} + +To create a string, we add single or double quotes around some text. +To identify and track a patient throughout our study, +we can assign each person a unique identifier by storing it in a string: + +~~~ +patient_id = '001' +~~~ +{: .language-python} + + +## Using Variables in Python + +Once we have data stored with variable names, we can make use of it in calculations. +We may want to store our patient's weight in pounds as well as kilograms: + +~~~ +weight_lb = 2.2 * weight_kg +~~~ +{: .language-python} + +We might decide to add a prefix to our patient identifier: + +~~~ +patient_id = 'inflam_' + patient_id +~~~ +{: .language-python} + + +## Built-in Python functions + +To carry out common tasks with data and variables in Python, +the language provides us with several built-in functions. +To display information to the screen, we use the `print` function: + +~~~ +print(weight_lb) +print(patient_id) +~~~ +{: .language-python} + +~~~ +132.66 +inflam_001 +~~~ +{: .output} + +When we want to make use of a function, referred to as calling the function, +we follow its name by parentheses. The parentheses are important: +if you leave them off, the function doesn't actually run! +Sometimes you will include values or variables inside the parentheses for the function to use. +In the case of `print`, +we use the parentheses to tell the function what value we want to display. +We will learn more about how functions work and how to create our own in later episodes. + +We can display multiple things at once using only one `print` call: + +~~~ +print(patient_id, 'weight in kilograms:', weight_kg) +~~~ +{: .language-python} +~~~ +inflam_001 weight in kilograms: 60.3 +~~~ +{: .output} + +We can also call a function inside of another +function call. For example, Python has a built-in function called `type` that tells you a value's data type: + +~~~ +print(type(60.3)) +print(type(patient_id)) +~~~ +{: .language-python} + +~~~ + + +~~~ +{: .output} + +Moreover, we can do arithmetic with variables right inside the `print` function: + +~~~ +print('weight in pounds:', 2.2 * weight_kg) +~~~ +{: .language-python} + +~~~ +weight in pounds: 132.66 +~~~ +{: .output} + +The above command, however, did not change the value of `weight_kg`: +~~~ +print(weight_kg) +~~~ +{: .language-python} + +~~~ +60.3 +~~~ +{: .output} + +To change the value of the `weight_kg` variable, we have to +**assign** `weight_kg` a new value using the equals `=` sign: + +~~~ +weight_kg = 65.0 +print('weight in kilograms is now:', weight_kg) +~~~ +{: .language-python} + +~~~ +weight in kilograms is now: 65.0 +~~~ +{: .output} + + +## Variables as Sticky Notes + +> A variable in Python is analogous to a sticky note with a name written on it: +> assigning a value to a variable is like putting that sticky note on a particular value. +> +> ![Value of 65.0 with weight_kg label stuck on it](../fig/python-sticky-note-variables-01.svg) +> +> Using this analogy, we can investigate how assigning a value to one variable +> does **not** change values of other, seemingly related, variables. For +> example, let's store the subject's weight in pounds in its own variable: +> +> ~~~ +> # There are 2.2 pounds per kilogram +> weight_lb = 2.2 * weight_kg +> print('weight in kilograms:', weight_kg, 'and in pounds:', weight_lb) +> ~~~ +> {: .language-python} +> +> ~~~ +> weight in kilograms: 65.0 and in pounds: 143.0 +> ~~~ +> {: .output} +> +> ![Value of 65.0 with weight_kg label stuck on it, and value of 143.0 with weight_lb label +stuck on it](../fig/python-sticky-note-variables-02.svg) +> +> Similar to above, the expression `2.2 * weight_kg` is evaluated to `143.0`, +> and then this value is assigned to the variable `weight_lb` (i.e. the sticky +> note `weight_lb` is placed on `143.0`). At this point, each variable is +> "stuck" to completely distinct and unrelated values. +> +> Let's now change `weight_kg`: +> +> ~~~ +> weight_kg = 100.0 +> print('weight in kilograms is now:', weight_kg, 'and weight in pounds is still:', weight_lb) +> ~~~ +> {: .language-python} +> +> ~~~ +> weight in kilograms is now: 100.0 and weight in pounds is still: 143.0 +> ~~~ +> {: .output} +> +> ![Value of 100.0 with label weight_kg stuck on it, and value of 143.0 with label weight_lb +stuck on it](../fig/python-sticky-note-variables-03.svg) +> +> Since `weight_lb` doesn't "remember" where its value comes from, +> it is not updated when we change `weight_kg`. +{: .callout} + + +## Check Your Understanding + +> What values do the variables `mass` and `age` have after each of the following statements? +> Test your answer by executing the lines. +> +> ~~~ +> mass = 47.5 +> age = 122 +> mass = mass * 2.0 +> age = age - 20 +> ~~~ +> {: .language-python} +> +> > ## Solution +> > ~~~ +> > `mass` holds a value of 47.5, `age` does not exist +> > `mass` still holds a value of 47.5, `age` holds a value of 122 +> > `mass` now has a value of 95.0, `age`'s value is still 122 +> > `mass` still has a value of 95.0, `age` now holds 102 +> > ~~~ +> > {: .output} +> {: .solution} +{: .challenge} + + +## Sorting Out References + +> Python allows you to assign multiple values to multiple variables in one line by separating +> the variables and values with commas. What does the following program print out? +> +> ~~~ +> first, second = 'Grace', 'Hopper' +> third, fourth = second, first +> print(third, fourth) +> ~~~ +> {: .language-python} +> +> > ## Solution +> > ~~~ +> > Hopper Grace +> > ~~~ +> > {: .output} +> {: .solution} +{: .challenge} + + +## Seeing Data Types + +> What are the data types of the following variables? +> +> ~~~ +> planet = 'Earth' +> apples = 5 +> distance = 10.5 +> ~~~ +> {: .language-python} +> +> > ## Solution +> > ~~~ +> > print(type(planet)) +> > print(type(apples)) +> > print(type(distance)) +> > ~~~ +> > {: .language-python} +> > +> > ~~~ +> > +> > +> > +> > ~~~ +> > {: .output} +> {: .solution} +{: .challenge} diff --git a/reveal.js/03_lists.md b/reveal.js/03_lists.md new file mode 100644 index 0000000..3dfd1a7 --- /dev/null +++ b/reveal.js/03_lists.md @@ -0,0 +1,532 @@ +--- +layout: page +title: Lists +order: 4 +session: 1 +length: 25 +toc: true +adapted: true +attrib_name: Programming with Python - Storing Multiple Values in Lists +attrib_link: https://swcarpentry.github.io/python-novice-inflammation/04-lists/index.html +attrib_copywrite: Software Carpentry +attrib_license: CC-BY 4.0 +attrib_license_link: https://creativecommons.org/licenses/by/4.0/ +--- + +## Learning Objectives + +At the end of this lesson you will be able to: + +- Identify and explain some simple data structures, including lists +- Understand what lists are used for +- Store multiple values in a list, and change these later +- Append values to an existing list +- Create and manipulate nested lists + +## Key points + +- "`[value1, value2, value3, ...]` creates a list." +- "Lists can contain any Python object, including lists (i.e., list of lists)." +- "Lists are indexed and sliced with square brackets (e.g., list[0] and +list[2:9]), in the same way as strings and arrays." +- "Lists are mutable (i.e., their values can be changed in place)." +- "Strings are immutable (i.e., the characters in them cannot be changed)." + +## Python lists + +Lists are a data structure in Python that can contain a changeable (or mutable) sequence of elements. These elements can be values or other variables. + +We create a list by putting values inside square brackets and separating the values with commas: + +~~~ +odds = [1, 3, 5, 7] +print('odds are:', odds) +~~~ +{: .language-python} + +~~~ +odds are: [1, 3, 5, 7] +~~~ +{: .output} + +We can access elements of a list using indices -- numbered positions of elements in the list. +These positions are numbered starting at 0, so the first element has an index of 0. + +~~~ +print('first element:', odds[0]) +print('last element:', odds[3]) +print('"-1" element:', odds[-1]) +~~~ +{: .language-python} + +~~~ +first element: 1 +last element: 7 +"-1" element: 7 +~~~ +{: .output} + +Yes, we can use negative numbers as indices in Python. When we do so, the index `-1` gives us the +last element in the list, `-2` the second to last, and so on. +Because of this, `odds[3]` and `odds[-1]` point to the same element here. + +There is one important difference between lists and strings: +we can change the values in a list, +but we cannot change individual characters in a string. +For example: + +~~~ +names = ['Curie', 'Darwing', 'Turing'] # typo in Darwin's name +print('names is originally:', names) +names[1] = 'Darwin' # correct the name +print('final value of names:', names) +~~~ +{: .language-python} + +~~~ +names is originally: ['Curie', 'Darwing', 'Turing'] +final value of names: ['Curie', 'Darwin', 'Turing'] +~~~ +{: .output} + +works, but: + +~~~ +name = 'Darwin' +name[0] = 'd' +~~~ +{: .language-python} + +~~~ +--------------------------------------------------------------------------- +TypeError Traceback (most recent call last) + in () + 1 name = 'Darwin' +----> 2 name[0] = 'd' + +TypeError: 'str' object does not support item assignment +~~~ +{: .error} + +does not. + +## Ch-Ch-Ch-Ch-Changes + +> Data which can be modified in place is called mutable, +> while data which cannot be modified is called +> immutable. +> Strings and numbers are immutable. This does not mean that variables with string or number values +> are constants, but when we want to change the value of a string or number variable, we can only +> replace the old value with a completely new value. +> +> Lists and arrays, on the other hand, are mutable: we can modify them after they have been +> created. We can change individual elements, append new elements, or reorder the whole list. For +> some operations, like sorting, we can choose whether to use a function that modifies the data +> in-place or a function that returns a modified copy and leaves the original unchanged. +> +> Be careful when modifying data in-place. If two variables refer to the same list, and you modify +> the list value, it will change for both variables! +> +> ~~~ +> salsa = ['peppers', 'onions', 'cilantro', 'tomatoes'] +> my_salsa = salsa # <-- my_salsa and salsa point to the *same* list data in memory +> salsa[0] = 'hot peppers' +> print('Ingredients in my salsa:', my_salsa) +> ~~~ +> {: .language-python} +> +> ~~~ +> Ingredients in my salsa: ['hot peppers', 'onions', 'cilantro', 'tomatoes'] +> ~~~ +> {: .output} +> +> If you want variables with mutable values to be independent, you +> must make a copy of the value when you assign it. +> +> ~~~ +> salsa = ['peppers', 'onions', 'cilantro', 'tomatoes'] +> my_salsa = list(salsa) # <-- makes a *copy* of the list +> salsa[0] = 'hot peppers' +> print('Ingredients in my salsa:', my_salsa) +> ~~~ +> {: .language-python} +> +> ~~~ +> Ingredients in my salsa: ['peppers', 'onions', 'cilantro', 'tomatoes'] +> ~~~ +> {: .output} +> +> Because of pitfalls like this, code which modifies data in place can be more difficult to +> understand. However, it is often far more efficient to modify a large data structure in place +> than to create a modified copy for every small change. You should consider both of these aspects +> when writing your code. +{: .callout} + +## Nested Lists +> Since a list can contain any Python variables, it can even contain other lists. +> +> For example, we could represent the products in the shelves of a small grocery shop: +> +> ~~~ +> x = [['pepper', 'zucchini', 'onion'], +> ['cabbage', 'lettuce', 'garlic'], +> ['apple', 'pear', 'banana']] +> ~~~ +> {: .language-python} +> +> Here is a visual example of how indexing a list of lists `x` works: +> +> [![x is represented as a pepper shaker containing several packets of pepper. [x[0]] is represented +> as a pepper shaker containing a single packet of pepper. x[0] is represented as a single packet of +> pepper. x[0][0] is represented as single grain of pepper. Adapted +> from @hadleywickham.](../fig/indexing_lists_python.png)][hadleywickham-tweet] +> +> Using the previously declared list `x`, these would be the results of the +> index operations shown in the image: +> +> ~~~ +> print([x[0]]) +> ~~~ +> {: .language-python} +> +> ~~~ +> [['pepper', 'zucchini', 'onion']] +> ~~~ +> {: .output} +> +> ~~~ +> print(x[0]) +> ~~~ +> {: .language-python} +> +> ~~~ +> ['pepper', 'zucchini', 'onion'] +> ~~~ +> {: .output} +> +> ~~~ +> print(x[0][0]) +> ~~~ +> {: .language-python} +> +> ~~~ +> 'pepper' +> ~~~ +> {: .output} +> +> Thanks to [Hadley Wickham][hadleywickham-tweet] +> for the image above. +{: .callout} + +## Heterogeneous Lists +> Lists in Python can contain elements of different types. Example: +> ~~~ +> sample_ages = [10, 12.5, 'Unknown'] +> ~~~ +> {: .language-python} +{: .callout} + +There are many ways to change the contents of lists besides assigning new values to +individual elements: + +~~~ +odds.append(11) +print('odds after adding a value:', odds) +~~~ +{: .language-python} + +~~~ +odds after adding a value: [1, 3, 5, 7, 11] +~~~ +{: .output} + +~~~ +removed_element = odds.pop(0) +print('odds after removing the first element:', odds) +print('removed_element:', removed_element) +~~~ +{: .language-python} + +~~~ +odds after removing the first element: [3, 5, 7, 11] +removed_element: 1 +~~~ +{: .output} + +~~~ +odds.reverse() +print('odds after reversing:', odds) +~~~ +{: .language-python} + +~~~ +odds after reversing: [11, 7, 5, 3] +~~~ +{: .output} + +While modifying in place, it is useful to remember that Python treats lists in a slightly +counter-intuitive way. + +As we saw earlier, when we modified the `salsa` list item in-place, if we make a list, (attempt to) +copy it and then modify this list, we can cause all sorts of trouble. This also applies to modifying +the list using the above functions: + +~~~ +odds = [3, 5, 7] +primes = odds +primes.append(2) +print('primes:', primes) +print('odds:', odds) +~~~ +{: .language-python} + +~~~ +primes: [3, 5, 7, 2] +odds: [3, 5, 7, 2] +~~~ +{: .output} + +This is because Python stores a list in memory, and then can use multiple names to refer to the +same list. If all we want to do is copy a (simple) list, we can again use the `list` function, so we +do not modify a list we did not mean to: + +~~~ +odds = [3, 5, 7] +primes = list(odds) +primes.append(2) +print('primes:', primes) +print('odds:', odds) +~~~ +{: .language-python} + +~~~ +primes: [3, 5, 7, 2] +odds: [3, 5, 7] +~~~ +{: .output} + +Subsets of lists and strings can be accessed by specifying ranges of values in brackets, +similar to how we accessed ranges of positions in a NumPy array. +This is commonly referred to as "slicing" the list/string. + +~~~ +binomial_name = 'Drosophila melanogaster' +group = binomial_name[0:10] +print('group:', group) + +species = binomial_name[11:23] +print('species:', species) + +chromosomes = ['X', 'Y', '2', '3', '4'] +autosomes = chromosomes[2:5] +print('autosomes:', autosomes) + +last = chromosomes[-1] +print('last:', last) +~~~ +{: .language-python} + +~~~ +group: Drosophila +species: melanogaster +autosomes: ['2', '3', '4'] +last: 4 +~~~ +{: .output} + +## Slicing From the End + +> Use slicing to access only the last four characters of a string or entries of a list. +> +> ~~~ +> string_for_slicing = 'Observation date: 02-Feb-2013' +> list_for_slicing = [['fluorine', 'F'], +> ['chlorine', 'Cl'], +> ['bromine', 'Br'], +> ['iodine', 'I'], +> ['astatine', 'At']] +> ~~~ +> {: .language-python} +> +> ~~~ +> '2013' +> [['chlorine', 'Cl'], ['bromine', 'Br'], ['iodine', 'I'], ['astatine', 'At']] +> ~~~ +> {: .output} +> +> Would your solution work regardless of whether you knew beforehand +> the length of the string or list +> (e.g. if you wanted to apply the solution to a set of lists of different lengths)? +> If not, try to change your approach to make it more robust. +> +> Hint: Remember that indices can be negative as well as positive +> +> > ## Solution +> > Use negative indices to count elements from the end of a container (such as list or string): +> > +> > ~~~ +> > string_for_slicing[-4:] +> > list_for_slicing[-4:] +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} + +## Non-Continuous Slices + +> So far we've seen how to use slicing to take single blocks +> of successive entries from a sequence. +> But what if we want to take a subset of entries +> that aren't next to each other in the sequence? +> +> You can achieve this by providing a third argument +> to the range within the brackets, called the _step size_. +> The example below shows how you can take every third entry in a list: +> +> ~~~ +> primes = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37] +> subset = primes[0:12:3] +> print('subset', subset) +> ~~~ +> {: .language-python} +> +> ~~~ +> subset [2, 7, 17, 29] +> ~~~ +> {: .output} +> +> Notice that the slice taken begins with the first entry in the range, +> followed by entries taken at equally-spaced intervals (the steps) thereafter. +> If you wanted to begin the subset with the third entry, +> you would need to specify that as the starting point of the sliced range: +> +> ~~~ +> primes = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37] +> subset = primes[2:12:3] +> print('subset', subset) +> ~~~ +> {: .language-python} +> +> ~~~ +> subset [5, 13, 23, 37] +> ~~~ +> {: .output} +> +> Use the step size argument to create a new string +> that contains only every other character in the string +> "In an octopus's garden in the shade". Start with +> creating a variable to hold the string: +> +> ~~~ +> beatles = "In an octopus's garden in the shade" +> ~~~ +> {: .language-python} +> +> What slice of `beatles` will produce the +> following output (i.e., the first character, third +> character, and every other character through the end +> of the string)? +> ~~~ +> I notpssgre ntesae +> ~~~ +> {: .output} +> +> > ## Solution +> > To obtain every other character you need to provide a slice with the step +> > size of 2: +> > +> > ~~~ +> > beatles[0:35:2] +> > ~~~ +> > {: .language-python} +> > +> > You can also leave out the beginning and end of the slice to take the whole string +> > and provide only the step argument to go every second +> > element: +> > +> > ~~~ +> > beatles[::2] +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} + +If you want to take a slice from the beginning of a sequence, you can omit the first index in the +range: + +~~~ +date = 'Monday 4 January 2016' +day = date[0:6] +print('Using 0 to begin range:', day) +day = date[:6] +print('Omitting beginning index:', day) +~~~ +{: .language-python} + +~~~ +Using 0 to begin range: Monday +Omitting beginning index: Monday +~~~ +{: .output} + +And similarly, you can omit the ending index in the range to take a slice to the very end of the +sequence: + +~~~ +months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'] +sond = months[8:12] +print('With known last position:', sond) +sond = months[8:len(months)] +print('Using len() to get last entry:', sond) +sond = months[8:] +print('Omitting ending index:', sond) +~~~ +{: .language-python} + +~~~ +With known last position: ['sep', 'oct', 'nov', 'dec'] +Using len() to get last entry: ['sep', 'oct', 'nov', 'dec'] +Omitting ending index: ['sep', 'oct', 'nov', 'dec'] +~~~ +{: .output} + +## Overloading + +> `+` usually means addition, but when used on strings or lists, it means "concatenate". +> Given that, what do you think the multiplication operator `*` does on lists? +> In particular, what will be the output of the following code? +> +> ~~~ +> counts = [2, 4, 6, 8, 10] +> repeats = counts * 2 +> print(repeats) +> ~~~ +> {: .language-python} +> +> 1. `[2, 4, 6, 8, 10, 2, 4, 6, 8, 10]` +> 2. `[4, 8, 12, 16, 20]` +> 3. `[[2, 4, 6, 8, 10],[2, 4, 6, 8, 10]]` +> 4. `[2, 4, 6, 8, 10, 4, 8, 12, 16, 20]` +> +> The technical term for this is *operator overloading*: +> a single operator, like `+` or `*`, +> can do different things depending on what it's applied to. +> +> > ## Solution +> > +> > The multiplication operator `*` used on a list replicates elements of the list and concatenates +> > them together: +> > +> > ~~~ +> > [2, 4, 6, 8, 10, 2, 4, 6, 8, 10] +> > ~~~ +> > {: .output} +> > +> > It's equivalent to: +> > +> > ~~~ +> > counts + counts +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} diff --git a/reveal.js/04_dictionaries.md b/reveal.js/04_dictionaries.md new file mode 100644 index 0000000..9f9cfaa --- /dev/null +++ b/reveal.js/04_dictionaries.md @@ -0,0 +1,174 @@ +--- +layout: page +title: Dictionaries +order: 5 +session: 1 +length: 15 +toc: true +adapted: false +--- + +## Learning Objectives + +At the end of this lesson you will be able to: + +- Identify and explain what a dictionary is +- Explain what makes a dictionary different to a list +- Understand the `key`: `value` relationship +- Create a dictionary containing simple values +- Update values in a dictionary + +## Key points + +- A dictionary stores key-value pairs. +- Dictionaries are unordered. +- Dictionaries are immutable. + +## Introduction + +Lists and arrays are useful, but don’t cover every use case. One of Python’s best features is its “dictionary” data structure. Whereas a list or array is simply a collection of elements, a dictionary supports key-value storage of data. Put into plain english, it lets you store and retrieve data values by name. + +## Create a dictionary + +Let’s create and use a simple dictionary of scientist's birth years to illustrate this: + +~~~ +birth_years = {'Newton': 1642, 'Darwin': 1809, 'Einstein': 1979, 'Nobel': 1833} +print(birth_years) +~~~ +{: .language-python} + +~~~ +{'Newton': 1642, 'Darwin': 1809, 'Einstein': 1979, 'Nobel': 1833} +~~~ +{: .output} + +Here, 'Newton', 'Darwin', 'Einstein' and 'Nobel' are keys, and the years are values. Keys and values form a pairwise mapping, allowing the retrieval of a value via the value's key. + +We can retrieve a value from a dictionary by entering the correct key for this value. We do this using the following syntax: + +~~~ +value_we_want = dictionary['key_of_value_we_want'] +~~~ +{: .language-python} + +This is similar to accessing a value stored in a list. However, the key does not have to be an integer. + +## Retrieve a value + +> Retrieve the birth year for Isaac Newton from the dictionary of birth years. +> +> > ## Solution +> > ~~~ +> > birth_years = {'Newton': 1642, 'Darwin': 1809, 'Einstein': 1979, 'Nobel': 1833} +> > birth_years['Newton'] +> > ~~~ +> > {: .language-python} +> > ~~~ +> > 1642 +> > ~~~ +> > {: .output} +> {: .solution} +{: .challenge} + +## Altering a dictionary + +Similar to lists, dictionaries are mutable. We can add a value to a dictionary, using a key: + +~~~ +birth_years = {'Newton': 1642, 'Darwin': 1809, 'Einstein': 1979, 'Nobel': 1833} +birth_years['Turing'] = 1612 +print(birth_years) +~~~ +{: .language-python} + +~~~ +{'Newton': 1642, 'Darwin': 1809, 'Einstein': 1979, 'Nobel': 1833, 'Turing': 1612} +~~~ +{: .output} + +Oops, we made a mistake there. Turing was actually born in 1912. We can update a value using a key. + +Turing's birthdate above is actual incorrect. Values may be overwritten by re-assignment: + +~~~ +birth_years = {'Newton': 1642, 'Darwin': 1809, 'Einstein': 1979, 'Nobel': 1833, 'Turing': 1612} +birth_years['Turing'] = 1912 +print(birth_years) +~~~ +{: .language-python} + +~~~ +{'Newton': 1642, 'Darwin': 1809, 'Einstein': 1979, 'Nobel': 1833, 'Turing': 1912} +~~~ +{: .output} + +## Add your own scientists to a dictionary + +> Add two more scientist's birth years to our dictionary of birth years. +> +> > ## Solution +> > ~~~ +> > birth_years = {'Newton': 1642, 'Darwin': 1809, 'Einstein': 1979, 'Nobel': 1833, 'Turing': 1612} +> > birth_years['Curie'] = 1867 +> > birth_years['Franklin'] = 1920 +> > print(birth_years) +> > ~~~ +> > {: .language-python} +> > ~~~ +> > {'Newton': 1642, 'Darwin': 1809, 'Einstein': 1979, 'Nobel': 1833, 'Turing': 1612, 'Curie': 1867, 'Franklin': 1920} +> > ~~~ +> > {: .output} +> {: .solution} +{: .challenge} + +## Retrieve all keys and values + +Dictionaries contain a number of in-built methods that allow you to easily access the data contained within. These methods are automatically attached to every dictionary. + +~~~ +birth_years = {'Newton': 1642, 'Darwin': 1809, 'Einstein': 1979, 'Nobel': 1833, 'Turing': 1612, 'Curie': 1867, 'Franklin': 1920} +birth_years.keys() +~~~ +{: .language-python} + +~~~ +dict_keys(['Newton', 'Darwin', 'Einstein', 'Nobel', 'Turing', 'Curie', 'Franklin']) +~~~ +{: .output} + +Similarly for values: + +~~~ +birth_years.values() +~~~ +{: .language-python} + +~~~ +dict_values([1642, 1809, 1979, 1833, 1612, 1867, 1920]) +~~~ +{: .output} + +We can convert these to lists: + +~~~ +list(birth_years.values()) +~~~ +{: .language-python} + +~~~ +[1642, 1809, 1979, 1833, 1612, 1867, 1920] +~~~ +{: .output} + +And finally, retrieve the key, value pairs together, forming a list of tuples: + +~~~ +list(birth_years.items()) +~~~ +{: .language-python} + +~~~ +[('Newton', 1642), ('Darwin', 1809), ('Einstein', 1979), ('Nobel', 1833), ('Turing', 1612), ('Curie', 1867), ('Franklin', 1920)] +~~~ +{: .output} diff --git a/reveal.js/05_control_flow.md b/reveal.js/05_control_flow.md new file mode 100644 index 0000000..6071936 --- /dev/null +++ b/reveal.js/05_control_flow.md @@ -0,0 +1,270 @@ +--- +layout: page +title: Control flow +order: 6 +session: 1 +length: 30 +toc: true +adapted: true +attrib_name: Programming with Python - Making Choices +attrib_link: https://swcarpentry.github.io/python-novice-inflammation/07-cond/index.html +attrib_copywrite: Software Carpentry +attrib_license: CC-BY 4.0 +attrib_license_link: https://creativecommons.org/licenses/by/4.0/ +--- + +## Learning Objectives + +At the end of this lesson you will be able to: + +- Discuss the benefits of thinking about a problem before starting to code +- Understand the basics of control flow +- Explain the basic conditional statements, such as `if`, `else`, `and`, `not`, and `or` +- Write some simple expressions using these statements + +## Key points +- "Use `if condition` to start a conditional statement, `elif condition` to + provide additional tests, and `else` to provide a default." +- "The bodies of the branches of conditional statements must be indented." +- "Use `==` to test for equality." +- "`X and Y` is only true if both `X` and `Y` are true." +- "`X or Y` is true if either `X` or `Y`, or both, are true." +- "Zero, the empty string, and the empty list are considered false; + all other numbers, strings, and lists are considered true." +- "`True` and `False` represent truth values." + +## Conditionals + +We can ask Python to take different actions, depending on a condition, with an `if` statement: + +~~~ +num = 37 +if num > 100: + print('greater') +else: + print('not greater') +print('done') +~~~ +{: .language-python} + +~~~ +not greater +done +~~~ +{: .output} + +The second line of this code uses the keyword `if` to tell Python that we want to make a choice. +If the test that follows the `if` statement is true, +the body of the `if` +(i.e., the set of lines indented underneath it) is executed, and "greater" is printed. +If the test is false, +the body of the `else` is executed instead, and "not greater" is printed. +Only one or the other is ever executed before continuing on with program execution to print "done": + +![A flowchart diagram of the if-else construct that tests if variable num is greater than 100](../fig/python-flowchart-conditional.png) + +Conditional statements don't have to include an `else`. +If there isn't one, +Python simply does nothing if the test is false: + +~~~ +num = 53 +print('before conditional...') +if num > 100: + print(num, 'is greater than 100') +print('...after conditional') +~~~ +{: .language-python} + +~~~ +before conditional... +...after conditional +~~~ +{: .output} + +We can also chain several tests together using `elif`, +which is short for "else if". +The following Python code uses `elif` to print the sign of a number. + +~~~ +num = -3 + +if num > 0: + print(num, 'is positive') +elif num == 0: + print(num, 'is zero') +else: + print(num, 'is negative') +~~~ +{: .language-python} + +~~~ +-3 is negative +~~~ +{: .output} + +Note that to test for equality we use a double equals sign `==` +rather than a single equals sign `=` which is used to assign values. + +## Comparing in Python + +> Along with the `>` and `==` operators we have already used for comparing values in our +> conditionals, there are a few more options to know about: +> +> - `>`: greater than +> - `<`: less than +> - `==`: equal to +> - `!=`: does not equal +> - `>=`: greater than or equal to +> - `<=`: less than or equal to +{: .callout} + +We can also combine tests using `and` and `or`. +`and` is only true if both parts are true: + +~~~ +if (1 > 0) and (-1 >= 0): + print('both parts are true') +else: + print('at least one part is false') +~~~ +{: .language-python} + +~~~ +at least one part is false +~~~ +{: .output} + +while `or` is true if at least one part is true: + +~~~ +if (1 < 0) or (1 >= 0): + print('at least one test is true') +~~~ +{: .language-python} + +~~~ +at least one test is true +~~~ +{: .output} + +> ## `True` and `False` +> `True` and `False` are special words in Python called `booleans`, +> which represent truth values. A statement such as `1 < 0` returns +> the value `False`, while `-1 < 0` returns the value `True`. +{: .callout} + +## How Many Paths? + +> Consider this code: +> +> ~~~ +> if 4 > 5: +> print('A') +> elif 4 == 5: +> print('B') +> elif 4 < 5: +> print('C') +> ~~~ +> {: .language-python} +> +> Which of the following would be printed if you were to run this code? +> Why did you pick this answer? +> +> 1. A +> 2. B +> 3. C +> 4. B and C +> +> > ## Solution +> > C gets printed because the first two conditions, `4 > 5` and `4 == 5`, are not true, +> > but `4 < 5` is true. +> {: .solution} +{: .challenge} + +## What Is Truth? + +> `True` and `False` booleans are not the only values in Python that are true and false. +> In fact, *any* value can be used in an `if` or `elif`. +> After reading and running the code below, +> explain what the rule is for which values are considered true and which are considered false. +> +> ~~~ +> if '': +> print('empty string is true') +> if 'word': +> print('word is true') +> if []: +> print('empty list is true') +> if [1, 2, 3]: +> print('non-empty list is true') +> if 0: +> print('zero is true') +> if 1: +> print('one is true') +> ~~~ +> {: .language-python} +{: .challenge} + +## That's Not Not What I Meant + +> Sometimes it is useful to check whether some condition is not true. +> The Boolean operator `not` can do this explicitly. +> After reading and running the code below, +> write some `if` statements that use `not` to test the rule +> that you formulated in the previous challenge. +> +> ~~~ +> if not '': +> print('empty string is not true') +> if not 'word': +> print('word is not true') +> if not not True: +> print('not not True is true') +> ~~~ +> {: .language-python} +{: .challenge} + +## Close Enough + +> Write some conditions that print `True` if the variable `a` is within 10% of the variable `b` +> and `False` otherwise. +> Compare your implementation with your partner's: +> do you get the same answer for all possible pairs of numbers? +> +> > ## Hint +> > There is a [built-in function `abs`][abs-function] that returns the absolute value of +> > a number: +> > ~~~ +> > print(abs(-12)) +> > ~~~ +> > {: .language-python} +> > ~~~ +> > 12 +> > ~~~ +> > {: .output} +> {: .solution} +> +> > ## Solution 1 +> > ~~~ +> > a = 5 +> > b = 5.1 +> > +> > if abs(a - b) <= 0.1 * abs(b): +> > print('True') +> > else: +> > print('False') +> > ~~~ +> > {: .language-python} +> {: .solution} +> +> > ## Solution 2 +> > ~~~ +> > print(abs(a - b) <= 0.1 * abs(b)) +> > ~~~ +> > {: .language-python} +> > +> > This works because the Booleans `True` and `False` +> > have string representations which can be printed. +> {: .solution} +{: .challenge} diff --git a/reveal.js/06_loops.md b/reveal.js/06_loops.md new file mode 100644 index 0000000..80eb016 --- /dev/null +++ b/reveal.js/06_loops.md @@ -0,0 +1,436 @@ +--- +layout: page +title: Loops +order: 7 +session: 1 +length: 45 +toc: true +adapted: true +attrib_name: Programming with Python - Repeating Actions with Loops +attrib_link: https://swcarpentry.github.io/python-novice-inflammation/05-loop/index.html +attrib_copywrite: Software Carpentry +attrib_license: CC-BY 4.0 +attrib_license_link: https://creativecommons.org/licenses/by/4.0/ +--- + +## Learning Objectives + +At the end of this lesson you will be able to: + +- Identify what a `for` loop is +- Understand how a `for` loop can be used to perform operations on a number of values +- Write some simple loops to perform repeat calculations +- Investigate what is happening to variables as a `for` loop progresses + +## Key points + +- "Use `for variable in sequence` to process the elements of a sequence one at a time." +- "The body of a `for` loop must be indented." +- "Use `len(thing)` to determine the length of something that contains other values." + +## Introduction to loops + +~~~ +odds = [1, 3, 5, 7] +~~~ +{: .language-python} + +In Python, a list is basically an ordered collection of elements, and every +element has a unique number associated with it --- its index. This means that +we can access elements in a list using their indices. +For example, we can get the first number in the list `odds`, +by using `odds[0]`. One way to print each number is to use four `print` statements: + +~~~ +print(odds[0]) +print(odds[1]) +print(odds[2]) +print(odds[3]) +~~~ +{: .language-python} + +~~~ +1 +3 +5 +7 +~~~ +{: .output} + +This is a bad approach for three reasons: + +1. **Not scalable**. Imagine you need to print a list that has hundreds + of elements. It might be easier to type them in manually. + +2. **Difficult to maintain**. If we want to decorate each printed element with an + asterisk or any other character, we would have to change four lines of code. While + this might not be a problem for small lists, it would definitely be a problem for + longer ones. + +3. **Fragile**. If we use it with a list that has more elements than what we initially + envisioned, it will only display part of the list's elements. A shorter list, on + the other hand, will cause an error because it will be trying to display elements of the + list that do not exist. + +~~~ +odds = [1, 3, 5] +print(odds[0]) +print(odds[1]) +print(odds[2]) +print(odds[3]) +~~~ +{: .language-python} + +~~~ +1 +3 +5 +~~~ +{: .output} + +~~~ +--------------------------------------------------------------------------- +IndexError Traceback (most recent call last) + in () + 3 print(odds[1]) + 4 print(odds[2]) +----> 5 print(odds[3]) + +IndexError: list index out of range +~~~ +{: .error} + +Here's a better approach: a `for` loop + +~~~ +odds = [1, 3, 5, 7] +for num in odds: + print(num) +~~~ +{: .language-python} + +~~~ +1 +3 +5 +7 +~~~ +{: .output} + +This is shorter --- certainly shorter than something that prints every number in a +hundred-number list --- and more robust as well: + +~~~ +odds = [1, 3, 5, 7, 9, 11] +for num in odds: + print(num) +~~~ +{: .language-python} + +~~~ +1 +3 +5 +7 +9 +11 +~~~ +{: .output} + +The improved version uses a `for` loop +to repeat an operation --- in this case, printing --- once for each thing in a sequence. +The general form of a loop is: + +~~~ +for variable in collection: + # do things using variable, such as print +~~~ +{: .language-python} + +Using the odds example above, the loop might look like this: + +![Loop variable 'num' being assigned the value of each element in the list `odds` in turn and +then being printed](../fig/05-loops_image_num.png) + +where each number (`num`) in the variable `odds` is looped through and printed one number after +another. The other numbers in the diagram denote which loop cycle the number was printed in (1 +being the first loop cycle, and 6 being the final loop cycle). + +We can call the loop variable anything we like, but +there must be a colon at the end of the line starting the loop, and we must indent anything we +want to run inside the loop. Unlike many other languages, there is no command to signify the end +of the loop body (e.g. `end for`); what is indented after the `for` statement belongs to the loop. + + +## What's in a name? + +> In the example above, the loop variable was given the name `num` as a mnemonic; +> it is short for 'number'. +> We can choose any name we want for variables. We might just as easily have chosen the name +> `banana` for the loop variable, as long as we use the same name when we invoke the variable inside +> the loop: +> +> ~~~ +> odds = [1, 3, 5, 7, 9, 11] +> for banana in odds: +> print(banana) +> ~~~ +> {: .language-python} +> +> ~~~ +> 1 +> 3 +> 5 +> 7 +> 9 +> 11 +> ~~~ +> {: .output} +> +> It is a good idea to choose variable names that are meaningful, otherwise it would be more +> difficult to understand what the loop is doing. +{: .callout} + +Here's another loop that repeatedly updates a variable: + +~~~ +length = 0 +names = ['Curie', 'Darwin', 'Turing'] +for value in names: + length = length + 1 +print('There are', length, 'names in the list.') +~~~ +{: .language-python} + +~~~ +There are 3 names in the list. +~~~ +{: .output} + +It's worth tracing the execution of this little program step by step. +Since there are three names in `names`, +the statement on line 4 will be executed three times. +The first time around, +`length` is zero (the value assigned to it on line 1) +and `value` is `Curie`. +The statement adds 1 to the old value of `length`, +producing 1, +and updates `length` to refer to that new value. +The next time around, +`value` is `Darwin` and `length` is 1, +so `length` is updated to be 2. +After one more update, +`length` is 3; +since there is nothing left in `names` for Python to process, +the loop finishes +and the `print` function on line 5 tells us our final answer. + +Note that a loop variable is a variable that is being used to record progress in a loop. +It still exists after the loop is over, +and we can re-use variables previously defined as loop variables as well: + +~~~ +name = 'Rosalind' +for name in ['Curie', 'Darwin', 'Turing']: + print(name) +print('after the loop, name is', name) +~~~ +{: .language-python} + +~~~ +Curie +Darwin +Turing +after the loop, name is Turing +~~~ +{: .output} + +Note also that finding the length of an object is such a common operation +that Python actually has a built-in function to do it called `len`: + +~~~ +print(len([0, 1, 2, 3])) +~~~ +{: .language-python} + +~~~ +4 +~~~ +{: .output} + +`len` is much faster than any function we could write ourselves, +and much easier to read than a two-line loop; +it will also give us the length of many other things that we haven't met yet, +so we should always use it when we can. + +## From 1 to N + +> Python has a built-in function called `range` that generates a sequence of numbers. `range` can +> accept 1, 2, or 3 parameters. +> +> * If one parameter is given, `range` generates a sequence of that length, +> starting at zero and incrementing by 1. +> For example, `range(3)` produces the numbers `0, 1, 2`. +> * If two parameters are given, `range` starts at +> the first and ends just before the second, incrementing by one. +> For example, `range(2, 5)` produces `2, 3, 4`. +> * If `range` is given 3 parameters, +> it starts at the first one, ends just before the second one, and increments by the third one. +> For example, `range(3, 10, 2)` produces `3, 5, 7, 9`. +> +> Using `range`, +> write a loop that uses `range` to print the first 3 natural numbers: +> +> ~~~ +> 1 +> 2 +> 3 +> ~~~ +> {: .language-python} +> +> > ## Solution +> > ~~~ +> > for number in range(1, 4): +> > print(number) +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} + +## Understanding the loops + +> Given the following loop: +> ~~~ +> word = 'oxygen' +> for char in word: +> print(char) +> ~~~ +> {: .language-python} +> +> How many times is the body of the loop executed? +> +> * 3 times +> * 4 times +> * 5 times +> * 6 times +> +> > ## Solution +> > +> > The body of the loop is executed 6 times. +> > +> {: .solution} +{: .challenge} + +## Computing Powers With Loops + +> Exponentiation is built into Python: +> +> ~~~ +> print(5 ** 3) +> ~~~ +> {: .language-python} +> +> ~~~ +> 125 +> ~~~ +> {: .output} +> +> Write a loop that calculates the same result as `5 ** 3` using +> multiplication (and without exponentiation). +> +> > ## Solution +> > ~~~ +> > result = 1 +> > for number in range(0, 3): +> > result = result * 5 +> > print(result) +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} + +## Summing a list + +> Write a loop that calculates the sum of elements in a list +> by adding each element and printing the final value, +> so `[124, 402, 36]` prints 562 +> +> > ## Solution +> > ~~~ +> > numbers = [124, 402, 36] +> > summed = 0 +> > for num in numbers: +> > summed = summed + num +> > print(summed) +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} + +## Computing the Value of a Polynomial + +> The built-in function `enumerate` takes a sequence (e.g. a list and +> generates a new sequence of the same length. Each element of the new sequence is a pair composed +> of the index (0, 1, 2,...) and the value from the original sequence: +> +> ~~~ +> for idx, val in enumerate(a_list): +> # Do something using idx and val +> ~~~ +> {: .language-python} +> +> The code above loops through `a_list`, assigning the index to `idx` and the value to `val`. +> +> Suppose you have encoded a polynomial as a list of coefficients in +> the following way: the first element is the constant term, the +> second element is the coefficient of the linear term, the third is the +> coefficient of the quadratic term, etc. +> +> ~~~ +> x = 5 +> coefs = [2, 4, 3] +> y = coefs[0] * x**0 + coefs[1] * x**1 + coefs[2] * x**2 +> print(y) +> ~~~ +> {: .language-python} +> +> ~~~ +> 97 +> ~~~ +> {: .output} +> +> Write a loop using `enumerate(coefs)` which computes the value `y` of any +> polynomial, given `x` and `coefs`. +> +> > ## Solution +> > ~~~ +> > y = 0 +> > for idx, coef in enumerate(coefs): +> > y = y + coef * x**idx +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} + +## Counting Vowels + +> 1. Write a loop that counts the number of vowels in a character string. +> 2. Test it on a few individual words and full sentences. +> 3. Once you are done, compare your solution to your neighbor's. +> Did you make the same decisions about how to handle the letter 'y' +> (which some people think is a vowel, and some do not)? +> +> > ## Solution +> > ~~~ +> > vowels = 'aeiouAEIOU' +> > sentence = 'Mary had a little lamb.' +> > count = 0 +> > for char in sentence: +> > if char in vowels: +> > count += 1 +> > +> > print('The number of vowels in this string is ' + str(count)) +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} diff --git a/reveal.js/07_additional_exercises.md b/reveal.js/07_additional_exercises.md new file mode 100644 index 0000000..c6a7a6f --- /dev/null +++ b/reveal.js/07_additional_exercises.md @@ -0,0 +1,144 @@ +--- +layout: page +title: Additional Session 1 Exercises +order: 8 +session: 1 +length: 20 +toc: true +adapted: false +--- + +## Swapping the contents of variables + +> Explain what the overall effect of this code is: +> +> ~~~ +> left = 'L' +> right = 'R' +> +> temp = left +> left = right +> right = temp +> ~~~ +> {: .language-python} +> +> Compare it to: +> +> ~~~ +> left, right = right, left +> ~~~ +> {: .language-python} +> +> Do they always do the same thing? +> Which do you find easier to read? +> +> > ## Solution +> > Both examples exchange the values of `left` and `right`: +> > +> > ~~~ +> > print(left, right) +> > ~~~ +> > {: .language-python} +> > +> > ~~~ +> > R L +> > ~~~ +> > {: .output} +> > +> > In the first case we used a temporary variable `temp` to keep the value of `left` before we +> > overwrite it with the value of `right`. In the second case, `right` and `left` are packed into a +> > tuple and then unpacked into `left` and `right`. +> {: .solution} +{: .challenge} + +## In-Place Operators + +> Python (and most other languages in the C family) provides +> in-place operators +> that work like this: +> +> ~~~ +> x = 1 # original value +> x += 1 # add one to x, assigning result back to x +> x *= 3 # multiply x by 3 +> print(x) +> ~~~ +> {: .language-python} +> +> ~~~ +> 6 +> ~~~ +> {: .output} +> +> Write some code that sums the positive and negative numbers in a list separately, +> using in-place operators. +> Do you think the result is more or less readable +> than writing the same without in-place operators? +> +> > ## Solution +> > ~~~ +> > positive_sum = 0 +> > negative_sum = 0 +> > test_list = [3, 4, 6, 1, -1, -5, 0, 7, -8] +> > for num in test_list: +> > if num > 0: +> > positive_sum += num +> > elif num == 0: +> > pass +> > else: +> > negative_sum += num +> > print(positive_sum, negative_sum) +> > ~~~ +> > {: .language-python} +> > +> > Here `pass` means "don't do anything". +> In this particular case, it's not actually needed, since if `num == 0` neither +> > sum needs to change, but it illustrates the use of `elif` and `pass`. +> {: .solution} +{: .challenge} + +## Turn a String into a List + +> Use a for-loop to convert the string "hello" into a list of letters: +> +> ~~~ +> ["h", "e", "l", "l", "o"] +> ~~~ +> {: .language-python} +> +> Hint: You can create an empty list like this: +> +> ~~~ +> my_list = [] +> ~~~ +> {: .language-python} +> +> > ## Solution +> > ~~~ +> > my_list = [] +> > for char in "hello": +> > my_list.append(char) +> > print(my_list) +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} + +## Reverse a String + +> Knowing that two strings can be concatenated using the `+` operator, +> write a loop that takes a string +> and produces a new string with the characters in reverse order, +> so `'Newton'` becomes `'notweN'`. +> +> > ## Solution +> > ~~~ +> > newstring = '' +> > oldstring = 'Newton' +> > for char in oldstring: +> > newstring = char + newstring +> > print(newstring) +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} diff --git a/reveal.js/08_recap.md b/reveal.js/08_recap.md new file mode 100644 index 0000000..373d1c1 --- /dev/null +++ b/reveal.js/08_recap.md @@ -0,0 +1,339 @@ +--- +layout: page +title: Session 1 Recap +order: 9 +session: 2 +length: 30 +toc: true +adapted: false +--- + +## A quick recap: + +- Fundamentals +- Data structures: lists and dictionaries +- Control flow: `if`, `elif` & `else` +- Loops +- Exercise: check your understanding + +## Fundamentals + +We can instantiate variables, and assign data values to them. Lets create some data for the greatest car in the world, the Citroen Berlingo Mk1. + +[](../fig/berlingo.jpg) + +~~~ +make = "Citroen" +model = "Berlingo" +color = "blue" +owner = "Simon" +sliding_doors = 2 +other_doors = 3 +coolness_pc = 95 +print(f"My {make} {model} is {coolness_pc}% cool.") +~~~ +{: .language-python} +~~~ +My Citroen Berlingo is 95% cool. +~~~ +{: .output} + +Each variable has a type. We did not have to declare this specifically: Python worked this out based on our data. Some common data types are `string`, `float`, and `int`. We can check the type of a variable using the built-in function, `type`: + +~~~ +print(type(owner)) +~~~ +{: .language-python} +~~~ + +~~~ +{: .output} + +We can write comments using the `#` symbol, or using triple quotes. Lines in these sections will not be executed. An example if shown with the `#` symbol: + +~~~ +# new_car_make = "Mercedes" +print(new_car_make) +~~~ +{: .language-python} +~~~ +Traceback (most recent call last): + File "", line 1, in +NameError: name 'new_car_make' is not defined +~~~ +{: .output} + + +## Lists and dictionaries + +We can hold more than one piece of data in a data structure. We can use create lists using square brackets, as follows: + +~~~ +car_info = [make, model, color, sliding_doors, other_doors] +print(car_info) +print(type(car_info)) +~~~ +{: .language-python} +~~~ +['Citroen', 'Berlingo', 'blue', 2, 3] + +~~~ +{: .output} + +We can access specific elements of a list using the elements index. Remember that indexing starts from 0. + +~~~ +element_2 = car_info[1] +print(element_2) +print(type(element_2)) +~~~ +{: .language-python} +~~~ +Berlingo + +~~~ +{: .output} + +Data structures often have built-in functions, or methods, attached to them. These provide fast ways of achieving common tasks. We can use the .append method to insert an element at the final index plus one, of a list: + +~~~ +cost = 2000 +car_info.append(cost) +print(car_info) +~~~ +{: .language-python} +~~~ +['Citroen', 'Berlingo', 'blue', 2, 3, 2000] +~~~ +{: .output} + +We can update a list element, using the element's index. Remember that a negative index counts from the end of the list, with an index of -1 indicating the final element index. + +~~~ +new_cost = 1850 +car_info[-1] = new_cost +print(car_info) +~~~ +{: .language-python} +~~~ +['Citroen', 'Berlingo', 'blue', 2, 3, 1850] +~~~ +{: .output} + +We can make a dictionary using key, values pairs. Dictionaries are useful when we want to return values, based on a value name, and not an index. For example: + +~~~ +car_dict = { + "make": "Citroen", + "model": "Berlingo", + "color": "blue", + "owner": "Simon", + "sliding_doors": 2, + "other_doors": 3, + "coolness_pc": 95 +} +print(car_dict) +print(type(car_dict)) +~~~ +{: .language-python} +~~~ +{'make': 'Citroen', 'model': 'Berlingo', 'color': 'blue', 'owner': 'Simon', 'sliding_doors': 2, 'other_doors': 3, 'coolness_pc': 95} + +~~~ +{: .output} + +We can then access values based on their key. To access the value associated with the coolness percentage key: + +~~~ +print(car_dict["coolness_pc"]) +~~~ +{: .language-python} +~~~ +95 +~~~ +{: .output} + +We can add data to a dictionary in-place, as it is mutable. + +~~~ +current_price = 1850 +car_dict["current_price"] = current_price +print(car_dict) +~~~ +{: .language-python} +~~~ +{'make': 'Citroen', 'model': 'Berlingo', 'color': 'blue', 'owner': 'Simon', 'sliding_doors': 2, 'other_doors': 3, 'coolness_pc': 95, 'current_price': 1850} +~~~ +{: .output} + +Finally, we can access just the keys, just the values, or the key, value pairs of a dictionary, using built-in methods: + +~~~ +car_fields = list(car_dict.keys()) +print(car_fields) +~~~ +{: .language-python} +~~~ +['make', 'model', 'color', 'owner', 'sliding_doors', 'other_doors', 'coolness_pc', 'current_price'] +~~~ +{: .output} + +## Control flow + +We can use `if`, `elif` and `else` statements to perform different tasks, based on data values. For example, imagine if we are trying to sell our car, stored in the `car_dict` dictionary. Lets say that we will indicate on our inventory system when a buyer has offered more than 90% of the asking price of a car. We will update the boolean flag when we should sell it. + +~~~ +sell_flag = False +asking_price = 1500 + +current_price = car_dict["current_price"] + +if asking_price >= current_price * 0.9: + sell_flag = True + print("You got yourself a deal!") +else: + print("You're taking the mick matey!") +~~~ +{: .language-python} +~~~ +You're taking the mick matey! +~~~ +{: .output} + +Now for an unrealistic example. Lets say a buyer wants a car that is a Berlingo, but has a car to trade in. As a dealer, we are willing to take the car and a lower asking price for the Berlingo if the car is in our desired car list. We can update our system accordingly, using the `and` and `in` operators. + +~~~ +sell_flag = False +desired_cars = ["Audi", "Mercedes", "Aston Martin"] + +asking_price = 556 +trade_in_car = "Audi" + +current_price = car_dict["current_price"] + +if asking_price >= current_price * 0.9: + sell_flag = True + print("I'm happy with that.") +elif (trade_in_car in desired_cars) and (asking_price >= current_price * 0.3): + sell_flag = True + print("Great to do business with you!") +else: + print("Sorry mate thats the best I can do.") +~~~ +{: .language-python} +~~~ +Great to do business with you! +~~~ +{: .output} + +## Loops + +It is often very helpful to perform calculations over a number of items, usually stored in a data structure. If the data structure is iterable, then we can write a `for` loop to execute operations over each element. For example, lets print out every value in our `car_dict` dictionary: + +~~~ +for value in car_dict.values(): + print(value) +~~~ +{: .language-python} +~~~ +Citroen +Berlingo +blue +Simon +2 +3 +95 +1850 +~~~ +{: .output} + +Lets try to multiply every value by 10. Why are some results strange? + +~~~ +for value in car_dict.values(): + new_value = value * 10 + print(new_value) +~~~ +{: .language-python} +~~~ +CitroenCitroenCitroenCitroenCitroenCitroenCitroenCitroenCitroenCitroen +BerlingoBerlingoBerlingoBerlingoBerlingoBerlingoBerlingoBerlingoBerlingoBerlingo +blueblueblueblueblueblueblueblueblueblue +SimonSimonSimonSimonSimonSimonSimonSimonSimonSimon +20 +30 +950 +18500 +~~~ +{: .output} + +(When we use an asterisk operator on a string we are overloading it. It is actually concatenating the string 10 times!) + +## Exercise + +> This is a famous (and now overused) programming task used in interviews. +> +> "Write a program that prints the numbers from 1 to 50. But for multiples of +> three print “Fizz” instead of the number and for the multiples of five print +> “Buzz”. For numbers which are multiples of both three and five print +> “FizzBuzz”." +> +> Give it a go! + +> > ## Hint 1 +> > In Python, the modulo operator is `%`. This returns the remainder when +> > dividing one number by another. +> > ~~~ +> > print(10 % 5) +> > ~~~ +> > {: .language-python} +> > ~~~ +> > 0 +> > ~~~ +> > {: .output} +> > ~~~ +> > print(10 % 3) +> > ~~~ +> > {: .language-python} +> > ~~~ +> > 1 +> > ~~~ +> > {: .output} +> {: .solution} + +> > ## Hint 2 +> > Here is the control flow for the fizzbuzz problem. Note that the iterator variable is not called `i` in this flowchart (it is called `fizzbuzz`.) +> > +> > ![A flowchart of the control flow for the fizzbuzz problem](../fig/fizzbuzz.png) +> {: .solution} + +> +> > ## Solution 1 +> > ~~~ +> > for i in range(1, 51): +> > if i % 3 == 0 and i % 5 == 0: +> > print("fizzbuzz") +> > elif i % 3 == 0: +> > print("fizz") +> > elif i % 5 == 0: +> > print("buzz") +> > else: +> > print(i) +> > ~~~ +> > {: .language-python} +> {: .solution} +> +> > ## Solution 2 +> > ~~~ +> > for i in range(1, 51): +> > s = '' +> > if not i % 3: +> > s += 'fizz' +> > if not i % 5: +> > s += 'buzz' +> > if not s: +> > s = i +> > print(s) +> > ~~~ +> > {: .language-python} +> {: .solution} diff --git a/reveal.js/09_functions.md b/reveal.js/09_functions.md new file mode 100644 index 0000000..4304e9b --- /dev/null +++ b/reveal.js/09_functions.md @@ -0,0 +1,533 @@ +--- +layout: page +title: Functions +order: 10 +session: 2 +length: 30 +toc: true +adapted: true +attrib_name: Programming with Python - Creating Functions +attrib_link: https://swcarpentry.github.io/python-novice-inflammation/08-func/index.html +attrib_copywrite: Software Carpentry +attrib_license: CC-BY 4.0 +attrib_license_link: https://creativecommons.org/licenses/by/4.0/ +--- + +## Learning Objectives + +At the end of this lesson you will be able to: + +- Identify the built-in functions that we have used previously. +- Define a function that takes parameters. +- Return a value from a function. +- Test and debug a function. +- Set default values for function parameters. +- Explain why we should divide programs into small, single-purpose functions. + +## Key points + +- "Define a function using `def function_name(parameter)`." +- "The body of a function must be indented." +- "Call a function using `function_name(value)`." +- "Numbers are stored as integers or floating-point numbers." +- "Variables defined within a function can only be seen and used within the body of the function." +- "Variables created outside of any function are called global variables." +- "Within a function, we can access global variables." +- "Variables created within a function override global variables if their names match." +- "Use `help(thing)` to view help for something." +- "Put docstrings in functions to provide help for that function." +- "Specify default values for parameters when defining a function using `name=value` + in the parameter list." +- "Parameters can be passed by matching based on name, by position, + or by omitting them (in which case the default value is used)." +- "Put code whose parameters change frequently in a function, + then call it with different parameter values to customize its behavior." + +## Why use functions? + +We are starting to write some more complex code, and things could get quite complicated. When we want to repeat a programming task, or check that everything is working correctly, we should use functions. + +A function is a shorthand way of allowing us to re-execute longer pieces of code. We can test and verify these smaller blocks individually, and call them whenever we want. + +## Built in functions + +We have already used some built-in functions: `print()`, `type()`, `range()` and so on. We have also used functions that are associated with objects, such as `.append()`, `.keys()`, `.strip()`, and more. + +Using these functions allows us to create much more concise, readable code. Imagine if we had to write all the code that goes on behind the scenes each time we wanted to use `print()`! We will do the same with our own functions. + +## Defining functions + +Let's start by defining a function `fahr_to_celsius` that converts temperatures +from Fahrenheit to Celsius: + +~~~ +def fahr_to_celsius(temp): + return ((temp - 32) * (5/9)) +~~~ +{: .language-python} + + +The function definition opens with the keyword `def` followed by the +name of the function (`fahr_to_celsius`) and a parenthesized list of parameter names (`temp`). The +body of the function --- the +statements that are executed when it runs --- is indented below the +definition line. The body concludes with a `return` keyword followed by the return value. + +![Labeled parts of a Python function definition](../fig/python-function.svg) + +When we call the function, +the values we pass to it are assigned to those variables +so that we can use them inside the function. +Inside the function, +we use a return statement to send a result +back to whoever asked for it. + +Let's try running our function. + +~~~ +fahr_to_celsius(32) +~~~ +{: .language-python} + +This command should call our function, using "32" as the input and return the function value. + +In fact, calling our own function is no different from calling any other function: +~~~ +print('freezing point of water:', fahr_to_celsius(32), 'C') +print('boiling point of water:', fahr_to_celsius(212), 'C') +~~~ +{: .language-python} + +~~~ +freezing point of water: 0.0 C +boiling point of water: 100.0 C +~~~ +{: .output} + +We've successfully called the function that we defined, +and we have access to the value that we returned. + + +## Composing Functions + +Now that we've seen how to turn Fahrenheit into Celsius, +we can also write the function to turn Celsius into Kelvin: + +~~~ +def celsius_to_kelvin(temp_c): + return temp_c + 273.15 + +print('freezing point of water in Kelvin:', celsius_to_kelvin(0.)) +~~~ +{: .language-python} + +~~~ +freezing point of water in Kelvin: 273.15 +~~~ +{: .output} + +What about converting Fahrenheit to Kelvin? +We could write out the formula, +but we don't need to. +Instead, +we can compose the two functions we have already created: + +~~~ +def fahr_to_kelvin(temp_f): + temp_c = fahr_to_celsius(temp_f) + temp_k = celsius_to_kelvin(temp_c) + return temp_k + +print('boiling point of water in Kelvin:', fahr_to_kelvin(212.0)) +~~~ +{: .language-python} + +~~~ +boiling point of water in Kelvin: 373.15 +~~~ +{: .output} + +This is our first taste of how larger programs are built: +we define basic operations, +then combine them in ever-larger chunks to get the effect we want. +Real-life functions will usually be larger than the ones shown here --- typically half a dozen +to a few dozen lines --- but they shouldn't ever be much longer than that, +or the next person who reads it won't be able to understand what's going on. + +## Variable Scope + +In composing our temperature conversion functions, we created variables inside of those functions, +`temp`, `temp_c`, `temp_f`, and `temp_k`. +We refer to these variables as local variables +because they no longer exist once the function is done executing. +If we try to access their values outside of the function, we will encounter an error: +~~~ +print('Again, temperature in Kelvin was:', temp_k) +~~~ +{: .language-python} + +~~~ +--------------------------------------------------------------------------- +NameError Traceback (most recent call last) + in +----> 1 print('Again, temperature in Kelvin was:', temp_k) + +NameError: name 'temp_k' is not defined +~~~ +{: .error} + +If you want to reuse the temperature in Kelvin after you have calculated it with `fahr_to_kelvin`, +you can store the result of the function call in a variable: +~~~ +temp_kelvin = fahr_to_kelvin(212.0) +print('temperature in Kelvin was:', temp_kelvin) +~~~ +{: .language-python} + +~~~ +temperature in Kelvin was: 373.15 +~~~ +{: .output} + +The variable `temp_kelvin`, being defined outside any function, +is said to be global. + +Inside a function, one can read the value of such global variables: +~~~ +def print_temperatures(): + print('temperature in Fahrenheit was:', temp_fahr) + print('temperature in Kelvin was:', temp_kelvin) + +temp_fahr = 212.0 +temp_kelvin = fahr_to_kelvin(temp_fahr) + +print_temperatures() +~~~ +{: .language-python} + +~~~ +temperature in Fahrenheit was: 212.0 +temperature in Kelvin was: 373.15 +~~~ +{: .output} + +## Readable functions + +Consider these two functions: + +~~~ +def s(p): + a = 0 + for v in p: + a += v + m = a / len(p) + d = 0 + for v in p: + d += (v - m) * (v - m) + return np.sqrt(d / (len(p) - 1)) +~~~ +{: .language-python} + +and: +~~~ +def std_dev(sample): + sample_sum = 0 + for value in sample: + sample_sum += value + + sample_mean = sample_sum / len(sample) + + sum_squared_devs = 0 + for value in sample: + sum_squared_devs += (value - sample_mean) * (value - sample_mean) + + return np.sqrt(sum_squared_devs / (len(sample) - 1)) +~~~ +{: .language-python} + +The functions `s` and `std_dev` are computationally equivalent (they +both calculate the sample standard deviation), but to a human reader, +they look very different. You probably found `std_dev` much easier to +read and understand than `s`. + +As this example illustrates, both documentation and a programmer's +_coding style_ combine to determine how easy it is for others to read +and understand the programmer's code. Choosing meaningful variable +names and using blank spaces to break the code into logical "chunks" +are helpful techniques for producing _readable code_. This is useful +not only for sharing code with others, but also for the original +programmer. If you need to revisit code that you wrote months ago and +haven't thought about since then, you will appreciate the value of +readable code! + +## Exercises + +## Combining Strings +> +> "Adding" two strings produces their concatenation: +> `'a' + 'b'` is `'ab'`. +> Write a function called `fence` that takes two parameters called `original` and `wrapper` +> and returns a new string that has the wrapper character at the beginning and end of the original. +> A call to your function should look like this: +> +> ~~~ +> print(fence('name', '*')) +> ~~~ +> {: .language-python} +> +> ~~~ +> *name* +> ~~~ +> {: .output} +> +> > ## Solution +> > ~~~ +> > def fence(original, wrapper): +> > return wrapper + original + wrapper +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} + +## Return versus print +> +> Note that `return` and `print` are not interchangeable. +> `print` is a Python function that *prints* data to the screen. +> It enables us, *users*, see the data. +> `return` statement, on the other hand, makes data visible to the program. +> Let's have a look at the following function: +> +> ~~~ +> def add(a, b): +> print(a + b) +> ~~~ +> {: .language-python} +> +> What will we see if we execute the following commands? +> ~~~ +> A = add(7, 3) +> print(A) +> ~~~ +> {: .language-python} +> +> > ## Solution +> > Python will first execute the function `add` with `a = 7` and `b = 3`, +> > and, therefore, print `10`. However, because function `add` does not have a +> > line that starts with `return` (no `return` "statement"), it will, by default, return +> > nothing which, in Python world, is called `None`. Therefore, `A` will be assigned to `None` +> > and the last line (`print(A)`) will print `None`. As a result, we will see: +> > ~~~ +> > 10 +> > None +> > ~~~ +> > {: .output} +> {: .solution} +{: .challenge} + +## Selecting Characters From Strings +> +> If the variable `s` refers to a string, +> then `s[0]` is the string's first character +> and `s[-1]` is its last. +> Write a function called `outer` +> that returns a string made up of just the first and last characters of its input. +> A call to your function should look like this: +> +> ~~~ +> print(outer('helium')) +> ~~~ +> {: .language-python} +> +> ~~~ +> hm +> ~~~ +> {: .output} +> +> > ## Solution +> > ~~~ +> > def outer(input_string): +> > return input_string[0] + input_string[-1] +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} + +## Rescaling a list +> +> Write a function `rescale` that takes a list as input +> and returns a corresponding list of values scaled to lie in the range 0.0 to 1.0. +> > ## Hint +> > If `L` and `H` are the lowest and highest values in the original list, +> > then the replacement for a value `v` should be `(v-L) / (H-L)`. +> {: .solution} +> > ## Solution +> > ~~~ +> > def rescale(input_list): +> > list_min = min(input_list) +> > list_max = max(input_list) +> > +> > output_list = [] +> > for i in input_list: +> > scaled_i = (float(i) - list_min) / (list_max - list_min) +> > output_list.append(scaled_i) +> > +> > return output_list +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} + +## Improving our function with docstrings + +Now that we have written a few functions, we should add some docstrings. A docstring is a small explanation of the expected functionality of the function, as well as descriptions of the function parameters, and any returns. There are lots of styles of docstrings. See here for the Google style. + +It is good habit to write a docstring for every single function you create. Even if noone reads your code, you will forget why you wrote this function in a years time. Dont be that person with no docstrings! + + +> Add a Google-style docstring to your rescale function. Include the expected types of the function parameters. +> +> > ## Solution +> > ~~~ +> > def rescale(input_list): +> > """Rescales a list between 0 and 1. +> > +> > Given an input list, this function rescales each element between 0 +> > and 1. Please only provide lists containing numeric values. +> > +> > Args: +> > input_list: A list containing numeric values +> > +> > Returns: +> > output_list: The input list, with all elements scaled +> > """ +> > +> > list_min = min(input_list) +> > list_max = max(input_list) +> > +> > output_list = [] +> > for i in input_list: +> > scaled_i = (float(i) - list_min) / (list_max - list_min) +> > output_list.append(scaled_i) +> > +> > return output_list +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} + + + +## Defining Defaults +> +> Rewrite the `rescale` function so that it scales data to lie between `0.0` and `1.0` by default, +> but will allow the caller to specify lower and upper bounds if they want. +> Compare your implementation to your neighbor's: +> do the two functions always behave the same way? +> +> > ## Solution +> > ~~~ +> > def rescale(input_list, low_val=50, high_val=100): +> > list_min = min(input_list) +> > list_max = max(input_list) +> > +> > output_list = [] +> > for i in input_list: +> > intermediate_i = (float(i) - list_min) / (list_max - list_min) +> > scaled_i = intermediate_i * (high_val - low_val) + low_val +> > output_list.append(scaled_i) +> > +> > return output_list +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} + +## Variables Inside and Outside Functions +> +> What does the following piece of code display when run --- and why? +> +> ~~~ +> f = 0 +> k = 0 +> +> def f2k(f): +> k = ((f - 32) * (5.0 / 9.0)) + 273.15 +> return k +> +> print(f2k(8)) +> print(f2k(41)) +> print(f2k(32)) +> +> print(k) +> ~~~ +> {: .language-python} +> +> > ## Solution +> > +> > ~~~ +> > 259.81666666666666 +> > 278.15 +> > 273.15 +> > 0 +> > ~~~ +> > {: .output} +> > `k` is 0 because the `k` inside the function `f2k` doesn't know +> > about the `k` defined outside the function. When the `f2k` function is called, +> > it creates a [local variable]({{ page.root }}/reference.html#local-variable) +> > `k`. The function does not return any values +> > and does not alter `k` outside of its local copy. +> > Therefore the original value of `k` remains unchanged. +> > Beware that a local `k` is created because `f2k` internal statements +> > *affect* a new value to it. If `k` was only `read`, it would simply retrieve the +> > global `k` value. +> {: .solution} +{: .challenge} + +## Mixing Default and Non-Default Parameters +> +> Given the following code: +> +> ~~~ +> def numbers(one, two=2, three, four=4): +> n = str(one) + str(two) + str(three) + str(four) +> return n +> +> print(numbers(1, three=3)) +> ~~~ +> {: .language-python} +> +> what do you expect will be printed? What is actually printed? +> What rule do you think Python is following? +> +> 1. `1234` +> 2. `one2three4` +> 3. `1239` +> 4. `SyntaxError` +> +> Given that, what does the following piece of code display when run? +> +> ~~~ +> def func(a, b=3, c=6): +> print('a: ', a, 'b: ', b, 'c:', c) +> +> func(-1, 2) +> ~~~ +> {: .language-python} +> +> 1. `a: b: 3 c: 6` +> 2. `a: -1 b: 3 c: 6` +> 3. `a: -1 b: 2 c: 6` +> 4. `a: b: -1 c: 2` +> +> > ## Solution +> > Attempting to define the `numbers` function results in `4. SyntaxError`. +> > The defined parameters `two` and `four` are given default values. Because +> > `one` and `three` are not given default values, they are required to be +> > included as arguments when the function is called and must be placed +> > before any parameters that have default values in the function definition. +> > +> > The given call to `func` displays `a: -1 b: 2 c: 6`. -1 is assigned to +> > the first parameter `a`, 2 is assigned to the next parameter `b`, and `c` is +> > not passed a value, so it uses its default value 6. +> {: .solution} +{: .challenge} diff --git a/reveal.js/10_imports.md b/reveal.js/10_imports.md new file mode 100644 index 0000000..9010cb8 --- /dev/null +++ b/reveal.js/10_imports.md @@ -0,0 +1,140 @@ +--- +layout: page +title: Imports +order: 11 +session: 2 +length: 20 +toc: true +--- + +## Learning Objectives + +At the end of this lesson you will be able to: + +- Import some key Python modules from the Python Standard Library +- Understand how to use the functions they include +- Identify some of the main packages available on PyPi, an online repository +- Install these, and check they work + +## The Python standard library + +So far, we have only used a tiny portion of the Python Standard Library. This is a collection of modules that are installed when you install Python. However, the Standard Library contains many more modules that will be of use to us. Lets jump right in. + +## Importing a module + +We can import modules included with the standard library immediately. For example, the `math` module gives access to the underlying C library functions for floating point math. Lets import it using the `import` function. + +~~~ +import math +~~~ +{: .language-python} + +For standard library modules, you do not need to get the package from an external repository. As such, you shouldnt get an error when importing them. + +Try importing a module with an incorrect name: + +~~~ +import thisisanincorrectmodulename +~~~ +{: .language-python} +~~~ +Traceback (most recent call last): + File "", line 1, in +ModuleNotFoundError: No module named 'thisisanincorrectmodulename' +~~~ +{: .output} + +We might run into a few of these errors when we try to install from external repositories. But dont panic! Usually it means that something has been placed in a strange location, and cant be found. + +## Using a module + +Now that we have imported the `math` module, we can access the functions contained within it. This is done using the prefix `math.something` + +But how do we know what is there for us to use? + +The first thing to do is to check the documentation. For the `math` module, this can be found [here](https://docs.python.org/3/library/math.html). + +Lets do a quick calculation with the cosine function and the `pi` constant. + +~~~ +math.cos(math.pi / 4) +~~~ +{: .language-python} +~~~ +0.70710678118654757 +~~~ +{: .output} + +In addition to reading the documentation, you can type `math.` and then hit the tab key. This should give you a list of everything available to use. + +## Exercise: generate random numbers + +> Write a function that returns a list of n random integers between 0 and 100. +> n should be a function parameter, and you should use the standard library module `random`. The `random` documentation can be found [here](https://docs.python.org/3/library/random.html). +> +> > ## Solution +> > ~~~ +> > import random +> > +> > def generate_random(n): +> > """Generates n random numbers between 0 and 100, and places them in a list.""" +> > +> > output_list = [] +> > for i in range(0, n): +> > rand_int = random.randrange(100) +> > output_list.append(rand_int) +> > +> > return output_list +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} + +## External Python libraries + +There are some very common libraries that you will come across very soon into your Python journey. Some of these have been listed below: + +* [NumPy](https://numpy.org/): Used for array computation, GPU processing, and generally running things really, really fast. +* [SciPy](https://scipy.org/): Contains many more complex algorithms, for optimisation, geometry, algebra, statistics, and much more. +* [Pandas](https://pandas.pydata.org/): Table-like data structures, and vectorised table operations. Think Excel for millions of rows. +* [Matplotlib](https://matplotlib.org/): Plotting library for Python. + +We will use the following syntax for each of these libraries. This is unfortunately just convention! + +* `import numpy as np`. Access functions using `np.XXX`. +* `import scipy`. Access functions using `scipy.XXX`. +* `import pandas as pd`. Access functions as `pd.XXX`. +* `import matplotlib.pyplot as plt`. Access functions as `plt.XXX`. + +## Installing these manually + +We have asked you to install Anaconda because it contains many packages commonly used for data science and visualisation, including those above. If you have problems importing these (receive error messages when trying to import them), we will do our best to help you out here. However, this troubleshooting will involve reading error messages: please be patient with us! + +If you want to install these packages manually, we can use various installers. + +The most common is `pip`. For example, to install `numpy` using `pip`, we type in the shell/terminal/command prompt: + +~~~ +pip install numpy +~~~ +{: .language-shell} + +If we have installed Anaconda, this contains an installer as well. We can use the following. Note that `numpy` is included with `conda`. + +~~~ +conda install numpy +~~~ +{: .language-shell} + +## Virtual environments + +**Note**: This is an intermediate/advanced topic, and something that even proficient Python developers struggle with. + +By default, the shell commands above will install packages into the base Python environment on your machine. In the future (beyond the scope of Intro to Python), we will try to create a "clean room" for each project that we create where we can install things that we need. This clean room is called a virtual environment. This helps us to minimise conflicts between different packages, and keep in control of things like our Python and package versions. + +Virtual environment management in Python could easily take two sessions to go through, and takes a while to get the hang of. At this stage, you should be aware that: + +- Virtual environments exist, and should be used per project, to keep project dependencies separate. +- They allow you to keep your base Python environment clean. +- They can be managed with tools such as Anaconda, Poetry, Virtualenv, Pipenv, and others. +- For more information, please start [here](https://docs.python.org/3/tutorial/venv.html). diff --git a/reveal.js/11_analysis_task_intro.md b/reveal.js/11_analysis_task_intro.md new file mode 100644 index 0000000..82e9bea --- /dev/null +++ b/reveal.js/11_analysis_task_intro.md @@ -0,0 +1,37 @@ +--- +layout: page +title: Data Analysis Introduction +order: 12 +session: 2 +length: 10 +toc: true +--- + +## Learning Objectives + +In this lesson, we will: + +- Introduce the data analysis task +- Create a project folder for the task, download some data, and place this into it. + +## Scenario: A miracle arthritis inflammation cure + +Our imaginary colleague “Dr. Maverick” has invented a new miracle drug that promises to cure arthritis inflammation flare-ups after only 3 weeks since initially taking the medication! Naturally, we wish to see the clinical trial data, and after months of asking for the data they have finally provided us with a CSV spreadsheet containing the clinical trial data. + +The CSV file contains the number of inflammation flare-ups per day for the 60 patients in the initial clinical trial, with the trial lasting 40 days. Each row corresponds to a patient, and each column corresponds to a day in the trial. Once a patient has their first inflammation flare-up they take the medication and wait a few weeks for it to take effect and reduce flare-ups. + +To see how effective the treatment is we would like to: + +- Calculate the average inflammation per day across all patients. +- Plot the result to discuss and share with colleagues. + +![3-step flowchart shows inflammation data records for patients moving to the Analysis step +where a heat map of provided data is generated moving to the Conclusion step that asks the +question, How does the medication affect patients?]( +../fig/lesson-overview.svg "Lesson Overview") + +## Download the data + +First, we need to open JupyterLab, and create a new folder for our project. In this folder, lets create a new folder called data. We can then download some data from [here](https://swcarpentry.github.io/python-novice-inflammation/data/python-novice-inflammation-data.zip). + +Unzip this folder, and move the `.csv` files into the same folder as your Jupyter notebook, or JupyterLab instance. This can be done by dragging them across onto the sidebar. diff --git a/reveal.js/12_analysis_task_1.md b/reveal.js/12_analysis_task_1.md new file mode 100644 index 0000000..e5dceba --- /dev/null +++ b/reveal.js/12_analysis_task_1.md @@ -0,0 +1,797 @@ +--- +layout: page +title: Data Analysis Task 1 +order: 12 +session: 2 +length: 30 +toc: true +--- + +## Learning Objectives + +In this lesson, we will: + +- "Read tabular data from a file into a program." +- "Select individual values and subsections from data." +- "Perform operations on arrays of data." + +## Key points + +- "Import a library into a program using `import libraryname`." +- "Use the `numpy` library to work with arrays in Python." +- "The expression `array.shape` gives the shape of an array." +- "Use `array[x, y]` to select a single element from a 2D array." +- "Array indices start at 0, not 1." +- "Use `low:high` to specify a `slice` that includes the indices from `low` to `high-1`." +- "Use `# some kind of explanation` to add comments to programs." +- "Use `numpy.mean(array)`, `numpy.max(array)`, and `numpy.min(array)` to calculate simple statistics." +- "Use `numpy.mean(array, axis=0)` or `numpy.mean(array, axis=1)` to calculate statistics across the specified axis." + +## Loading data into Python + +To begin processing the clinical trial inflammation data, we need to load it into Python. +We can do that using a library called +[NumPy](https://numpy.org/doc/stable "NumPy Documentation"), which stands for Numerical Python. +In general, you should use this library when you want to do fancy things with lots of numbers, +especially if you have matrices or arrays. To tell Python that we'd like to start using NumPy, +we need to import it: + +~~~ +import numpy as np +~~~ +{: .language-python} + +Importing a library is like getting a piece of lab equipment out of a storage locker and setting it +up on the bench. Libraries provide additional functionality to the basic Python package, much like +a new piece of equipment adds functionality to a lab space. Just like in the lab, importing too +many libraries can sometimes complicate and slow down your programs - so we only import what we +need for each program. + +Once we've imported the library, we can ask the library to read our data file for us: + +~~~ +np.loadtxt(fname='data/inflammation-01.csv', delimiter=',') +~~~ +{: .language-python} + +~~~ +array([[ 0., 0., 1., ..., 3., 0., 0.], + [ 0., 1., 2., ..., 1., 0., 1.], + [ 0., 1., 1., ..., 2., 1., 1.], + ..., + [ 0., 1., 1., ..., 1., 1., 1.], + [ 0., 0., 0., ..., 0., 2., 0.], + [ 0., 0., 1., ..., 1., 1., 0.]]) +~~~ +{: .output} + +The expression `np.loadtxt(...)` is a +function call +that asks Python to run the function `loadtxt` which +belongs to the `numpy` library. +The dot notation in Python is used most of all as an object attribute/property specifier or for invoking its method. `object.property` will give you the object.property value, +`object_name.method()` will invoke on object_name method. + +As an example, John Smith is the John that belongs to the Smith family. +We could use the dot notation to write his name `smith.john`, +just as `loadtxt` is a function that belongs to the `numpy` library. + +`np.loadtxt` has two parameters: the name of the file +we want to read and the delimiter that separates values +on a line. These both need to be character strings +(or strings for short), so we put them in quotes. + +Since we haven't told it to do anything else with the function's output, +the notebook displays it. +In this case, +that output is the data we just loaded. +By default, +only a few rows and columns are shown +(with `...` to omit elements when displaying big arrays). +Note that, to save space when displaying NumPy arrays, Python does not show us trailing zeros, +so `1.0` becomes `1.`. + +Our call to `np.loadtxt` read our file +but didn't save the data in memory. +To do that, +we need to assign the array to a variable. In a similar manner to how we assign a single +value to a variable, we can also assign an array of values to a variable using the same syntax. +Let's re-run `np.loadtxt` and save the returned data: + +~~~ +data = np.loadtxt(fname='data/inflammation-01.csv', delimiter=',') +~~~ +{: .language-python} + +This statement doesn't produce any output because we've assigned the output to the variable `data`. +If we want to check that the data have been loaded, +we can print the variable's value: + +~~~ +print(data) +~~~ +{: .language-python} + +~~~ +[[ 0. 0. 1. ..., 3. 0. 0.] + [ 0. 1. 2. ..., 1. 0. 1.] + [ 0. 1. 1. ..., 2. 1. 1.] + ..., + [ 0. 1. 1. ..., 1. 1. 1.] + [ 0. 0. 0. ..., 0. 2. 0.] + [ 0. 0. 1. ..., 1. 1. 0.]] +~~~ +{: .output} + +Now that the data are in memory, +we can manipulate them. +First, +let's ask what type of thing `data` refers to: + +~~~ +print(type(data)) +~~~ +{: .language-python} + +~~~ + +~~~ +{: .output} + +The output tells us that `data` currently refers to +an N-dimensional array, the functionality for which is provided by the NumPy library. +These data correspond to arthritis patients' inflammation. +The rows are the individual patients, and the columns +are their daily inflammation measurements. + +## Data Type +> +> A Numpy array contains one or more elements +> of the same type. The `type` function will only tell you that +> a variable is a NumPy array but won't tell you the type of +> thing inside the array. +> We can find out the type +> of the data contained in the NumPy array. +> +> ~~~ +> print(data.dtype) +> ~~~ +> {: .language-python} +> +> ~~~ +> float64 +> ~~~ +> {: .output} +> +> This tells us that the NumPy array's elements are +> floating point numbers. +{: .callout} + +With the following command, we can see the array's shape: + +~~~ +print(data.shape) +~~~ +{: .language-python} + +~~~ +(60, 40) +~~~ +{: .output} + +The output tells us that the `data` array variable contains 60 rows and 40 columns. When we +created the variable `data` to store our arthritis data, we did not only create the array; we also +created information about the array, called members or +attributes. This extra information describes `data` in the same way an adjective describes a noun. +`data.shape` is an attribute of `data` which describes the dimensions of `data`. We use the same +dotted notation for the attributes of variables that we use for the functions in libraries because +they have the same part-and-whole relationship. + +If we want to get a single number from the array, we must provide an +index in square brackets after the variable name, just as we +do in math when referring to an element of a matrix. Our inflammation data has two dimensions, so +we will need to use two indices to refer to one specific value: + +~~~ +print('first value in data:', data[0, 0]) +~~~ +{: .language-python} + +~~~ +first value in data: 0.0 +~~~ +{: .output} + +~~~ +print('middle value in data:', data[30, 20]) +~~~ +{: .language-python} + +~~~ +middle value in data: 13.0 +~~~ +{: .output} + +The expression `data[30, 20]` accesses the element at row 30, column 20. While this expression may +not surprise you, + `data[0, 0]` might. +Programming languages like Fortran, MATLAB and R start counting at 1 +because that's what human beings have done for thousands of years. +Languages in the C family (including C++, Java, Perl, and Python) count from 0 +because it represents an offset from the first value in the array (the second +value is offset by one index from the first value). This is closer to the way +that computers represent arrays (if you are interested in the historical +reasons behind counting indices from zero, you can read +[Mike Hoye's blog post](http://exple.tive.org/blarg/2013/10/22/citation-needed/)). +As a result, +if we have an M×N array in Python, +its indices go from 0 to M-1 on the first axis +and 0 to N-1 on the second. +It takes a bit of getting used to, +but one way to remember the rule is that +the index is how many steps we have to take from the start to get the item we want. + +!["data" is a 3 by 3 numpy array containing row 0: ['A', 'B', 'C'], row 1: ['D', 'E', 'F'], and +row 2: ['G', 'H', 'I']. Starting in the upper left hand corner, data[0, 0] = 'A', data[0, 1] = 'B', +data[0, 2] = 'C', data[1, 0] = 'D', data[1, 1] = 'E', data[1, 2] = 'F', data[2, 0] = 'G', +data[2, 1] = 'H', and data[2, 2] = 'I', +in the bottom right hand corner.](../fig/python-zero-index.svg) + +## In the Corner +> +> What may also surprise you is that when Python displays an array, +> it shows the element with index `[0, 0]` in the upper left corner +> rather than the lower left. +> This is consistent with the way mathematicians draw matrices +> but different from the Cartesian coordinates. +> The indices are (row, column) instead of (column, row) for the same reason, +> which can be confusing when plotting data. +{: .callout} + +## Slicing data +An index like `[30, 20]` selects a single element of an array, +but we can select whole sections as well. +For example, +we can select the first ten days (columns) of values +for the first four patients (rows) like this: + +~~~ +print(data[0:4, 0:10]) +~~~ +{: .language-python} + +~~~ +[[ 0. 0. 1. 3. 1. 2. 4. 7. 8. 3.] + [ 0. 1. 2. 1. 2. 1. 3. 2. 2. 6.] + [ 0. 1. 1. 3. 3. 2. 6. 2. 5. 9.] + [ 0. 0. 2. 0. 4. 2. 2. 1. 6. 7.]] +~~~ +{: .output} + +The slice `0:4` means, "Start at index 0 and go up to, +but not including, index 4". Again, the up-to-but-not-including takes a bit of getting used to, +but the rule is that the difference between the upper and lower bounds is the number of values in +the slice. + +We don't have to start slices at 0: + +~~~ +print(data[5:10, 0:10]) +~~~ +{: .language-python} + +~~~ +[[ 0. 0. 1. 2. 2. 4. 2. 1. 6. 4.] + [ 0. 0. 2. 2. 4. 2. 2. 5. 5. 8.] + [ 0. 0. 1. 2. 3. 1. 2. 3. 5. 3.] + [ 0. 0. 0. 3. 1. 5. 6. 5. 5. 8.] + [ 0. 1. 1. 2. 1. 3. 5. 3. 5. 8.]] +~~~ +{: .output} + +We also don't have to include the upper and lower bound on the slice. If we don't include the lower +bound, Python uses 0 by default; if we don't include the upper, the slice runs to the end of the +axis, and if we don't include either (i.e., if we use ':' on its own), the slice includes +everything: + +~~~ +small = data[:3, 36:] +print('small is:') +print(small) +~~~ +{: .language-python} +The above example selects rows 0 through 2 and columns 36 through to the end of the array. + +~~~ +small is: +[[ 2. 3. 0. 0.] + [ 1. 1. 0. 1.] + [ 2. 2. 1. 1.]] +~~~ +{: .output} + +## Analyzing data + +NumPy has several useful functions that take an array as input to perform operations on its values. +If we want to find the average inflammation for all patients on +all days, for example, we can ask NumPy to compute `data`'s mean value: + +~~~ +print(np.mean(data)) +~~~ +{: .language-python} + +~~~ +6.14875 +~~~ +{: .output} + +`mean` is a function that takes +an array as an argument. + +## Not All Functions Have Input +> +> Generally, a function uses inputs to produce outputs. +> However, some functions produce outputs without +> needing any input. For example, checking the current time +> doesn't require any input. +> +> ~~~ +> import time +> print(time.ctime()) +> ~~~ +> {: .language-python} +> +> ~~~ +> Sat Mar 26 13:07:33 2016 +> ~~~ +> {: .output} +> +> For functions that don't take in any arguments, +> we still need parentheses (`()`) +> to tell Python to go and do something for us. +{: .callout} + +Let's use three other NumPy functions to get some descriptive values about the dataset. +We'll also use multiple assignment, +a convenient Python feature that will enable us to do this all in one line. + +~~~ +maxval, minval, stdval = np.max(data), np.min(data), np.std(data) + +print('maximum inflammation:', maxval) +print('minimum inflammation:', minval) +print('standard deviation:', stdval) +~~~ +{: .language-python} + +Here we've assigned the return value from `np.max(data)` to the variable `maxval`, the value +from `np.min(data)` to `minval`, and so on. + +~~~ +maximum inflammation: 20.0 +minimum inflammation: 0.0 +standard deviation: 4.61383319712 +~~~ +{: .output} + +## Mystery Functions in IPython +> +> How did we know what functions NumPy has and how to use them? +> If you are working in IPython or in a Jupyter Notebook, there is an easy way to find out. +> If you type the name of something followed by a dot, then you can use +> tab completion +> (e.g. type `np.` and then press Tab) +> to see a list of all functions and attributes that you can use. After selecting one, you +> can also add a question mark (e.g. `np.cumprod?`), and IPython will return an +> explanation of the method! This is the same as doing `help(np.cumprod)`. +> Similarly, if you are using the "plain vanilla" Python interpreter, you can type `np.` +> and press the Tab key twice for a listing of what is available. You can then use the +> `help()` function to see an explanation of the function you're interested in, +> for example: `help(np.cumprod)`. +{: .callout} + +When analyzing data, though, +we often want to look at variations in statistical values, +such as the maximum inflammation per patient +or the average inflammation per day. +One way to do this is to create a new temporary array of the data we want, +then ask it to do the calculation: + +~~~ +patient_0 = data[0, :] # 0 on the first axis (rows), everything on the second (columns) +print('maximum inflammation for patient 0:', np.max(patient_0)) +~~~ +{: .language-python} + +~~~ +maximum inflammation for patient 0: 18.0 +~~~ +{: .output} + +Everything in a line of code following the '#' symbol is a +comment that is ignored by Python. +Comments allow programmers to leave explanatory notes for other +programmers or their future selves. + +We don't actually need to store the row in a variable of its own. +Instead, we can combine the selection and the function call: + +~~~ +print('maximum inflammation for patient 2:', np.max(data[2, :])) +~~~ +{: .language-python} + +~~~ +maximum inflammation for patient 2: 19.0 +~~~ +{: .output} + +What if we need the maximum inflammation for each patient over all days (as in the +next diagram on the left) or the average for each day (as in the +diagram on the right)? As the diagram below shows, we want to perform the +operation across an axis: + +![Per-patient maximum inflammation is computed row-wise across all columns using +np.max(data, axis=1). Per-day average inflammation is computed column-wise across all rows using +np.mean(data, axis=0).](../fig/python-operations-across-axes.png) + +To support this functionality, +most array functions allow us to specify the axis we want to work on. +If we ask for the average across axis 0 (rows in our 2D example), +we get: + +~~~ +print(np.mean(data, axis=0)) +~~~ +{: .language-python} + +~~~ +[ 0. 0.45 1.11666667 1.75 2.43333333 3.15 + 3.8 3.88333333 5.23333333 5.51666667 5.95 5.9 + 8.35 7.73333333 8.36666667 9.5 9.58333333 + 10.63333333 11.56666667 12.35 13.25 11.96666667 + 11.03333333 10.16666667 10. 8.66666667 9.15 7.25 + 7.33333333 6.58333333 6.06666667 5.95 5.11666667 3.6 + 3.3 3.56666667 2.48333333 1.5 1.13333333 + 0.56666667] +~~~ +{: .output} + +As a quick check, +we can ask this array what its shape is: + +~~~ +print(np.mean(data, axis=0).shape) +~~~ +{: .language-python} + +~~~ +(40,) +~~~ +{: .output} + +The expression `(40,)` tells us we have an N×1 vector, +so this is the average inflammation per day for all patients. +If we average across axis 1 (columns in our 2D example), we get: + +~~~ +print(np.mean(data, axis=1)) +~~~ +{: .language-python} + +~~~ +[ 5.45 5.425 6.1 5.9 5.55 6.225 5.975 6.65 6.625 6.525 + 6.775 5.8 6.225 5.75 5.225 6.3 6.55 5.7 5.85 6.55 + 5.775 5.825 6.175 6.1 5.8 6.425 6.05 6.025 6.175 6.55 + 6.175 6.35 6.725 6.125 7.075 5.725 5.925 6.15 6.075 5.75 + 5.975 5.725 6.3 5.9 6.75 5.925 7.225 6.15 5.95 6.275 5.7 + 6.1 6.825 5.975 6.725 5.7 6.25 6.4 7.05 5.9 ] +~~~ +{: .output} + +which is the average inflammation per patient across all days. + + +## Slicing Strings +> +> A section of an array is called a slice. +> We can take slices of character strings as well: +> +> ~~~ +> element = 'oxygen' +> print('first three characters:', element[0:3]) +> print('last three characters:', element[3:6]) +> ~~~ +> {: .language-python} +> +> ~~~ +> first three characters: oxy +> last three characters: gen +> ~~~ +> {: .output} +> +> What is the value of `element[:4]`? +> What about `element[4:]`? +> Or `element[:]`? +> +> > ## Solution +> > ~~~ +> > oxyg +> > en +> > oxygen +> > ~~~ +> > {: .output} +> {: .solution} +> +> What is `element[-1]`? +> What is `element[-2]`? +> +> > ## Solution +> > ~~~ +> > n +> > e +> > ~~~ +> > {: .output} +> {: .solution} +> +> Given those answers, +> explain what `element[1:-1]` does. +> +> > ## Solution +> > Creates a substring from index 1 up to (not including) the final index, +> > effectively removing the first and last letters from 'oxygen' +> {: .solution} +> +> How can we rewrite the slice for getting the last three characters of `element`, +> so that it works even if we assign a different string to `element`? +> Test your solution with the following strings: `carpentry`, `clone`, `hi`. +> +> > ## Solution +> > ~~~ +> > element = 'oxygen' +> > print('last three characters:', element[-3:]) +> > element = 'carpentry' +> > print('last three characters:', element[-3:]) +> > element = 'clone' +> > print('last three characters:', element[-3:]) +> > element = 'hi' +> > print('last three characters:', element[-3:]) +> > ~~~ +> > {: .language-python} +> > ~~~ +> > last three characters: gen +> > last three characters: try +> > last three characters: one +> > last three characters: hi +> > ~~~ +> > {: .output} +> {: .solution} +{: .challenge} + +> ## Thin Slices +> +> The expression `element[3:3]` produces an +> empty string, +> i.e., a string that contains no characters. +> If `data` holds our array of patient data, +> what does `data[3:3, 4:4]` produce? +> What about `data[3:3, :]`? +> +> > ## Solution +> > ~~~ +> > array([], shape=(0, 0), dtype=float64) +> > array([], shape=(0, 40), dtype=float64) +> > ~~~ +> > {: .output} +> {: .solution} +{: .challenge} + +## Stacking Arrays +> +> Arrays can be concatenated and stacked on top of one another, +> using NumPy's `vstack` and `hstack` functions for vertical and horizontal stacking, respectively. +> +> ~~~ +> import numpy as np +> +> A = np.array([[1,2,3], [4,5,6], [7, 8, 9]]) +> print('A = ') +> print(A) +> +> B = np.hstack([A, A]) +> print('B = ') +> print(B) +> +> C = np.vstack([A, A]) +> print('C = ') +> print(C) +> ~~~ +> {: .language-python} +> +> ~~~ +> A = +> [[1 2 3] +> [4 5 6] +> [7 8 9]] +> B = +> [[1 2 3 1 2 3] +> [4 5 6 4 5 6] +> [7 8 9 7 8 9]] +> C = +> [[1 2 3] +> [4 5 6] +> [7 8 9] +> [1 2 3] +> [4 5 6] +> [7 8 9]] +> ~~~ +> {: .output} +> +> Write some additional code that slices the first and last columns of `A`, +> and stacks them into a 3x2 array. +> Make sure to `print` the results to verify your solution. +> +> > ## Solution +> > +> > A 'gotcha' with array indexing is that singleton dimensions +> > are dropped by default. That means `A[:, 0]` is a one dimensional +> > array, which won't stack as desired. To preserve singleton dimensions, +> > the index itself can be a slice or array. For example, `A[:, :1]` returns +> > a two dimensional array with one singleton dimension (i.e. a column +> > vector). +> > +> > ~~~ +> > D = np.hstack((A[:, :1], A[:, -1:])) +> > print('D = ') +> > print(D) +> > ~~~ +> > {: .language-python} +> > +> > ~~~ +> > D = +> > [[1 3] +> > [4 6] +> > [7 9]] +> > ~~~ +> > {: .output} +> {: .solution} +> +> > ## Solution +> > +> > An alternative way to achieve the same result is to use Numpy's +> > delete function to remove the second column of A. +> > +> > ~~~ +> > D = np.delete(A, 1, 1) +> > print('D = ') +> > print(D) +> > ~~~ +> > {: .language-python} +> > +> > ~~~ +> > D = +> > [[1 3] +> > [4 6] +> > [7 9]] +> > ~~~ +> > {: .output} +> {: .solution} +{: .challenge} + +## Change In Inflammation +> +> The patient data is _longitudinal_ in the sense that each row represents a +> series of observations relating to one individual. This means that +> the change in inflammation over time is a meaningful concept. +> Let's find out how to calculate changes in the data contained in an array +> with NumPy. +> +> The `np.diff()` function takes an array and returns the differences +> between two successive values. Let's use it to examine the changes +> each day across the first week of patient 3 from our inflammation dataset. +> +> ~~~ +> patient3_week1 = data[3, :7] +> print(patient3_week1) +> ~~~ +> {: .language-python} +> +> ~~~ +> [0. 0. 2. 0. 4. 2. 2.] +> ~~~ +> {: .output} +> +> Calling `np.diff(patient3_week1)` would do the following calculations +> +> ~~~ +> [ 0 - 0, 2 - 0, 0 - 2, 4 - 0, 2 - 4, 2 - 2 ] +> ~~~ +> {: .language-python} +> +> and return the 6 difference values in a new array. +> +> ~~~ +> np.diff(patient3_week1) +> ~~~ +> {: .language-python} +> +> ~~~ +> array([ 0., 2., -2., 4., -2., 0.]) +> ~~~ +> {: .output} +> +> Note that the array of differences is shorter by one element (length 6). +> +> When calling `np.diff` with a multi-dimensional array, an `axis` argument may +> be passed to the function to specify which axis to process. When applying +> `np.diff` to our 2D inflammation array `data`, which axis would we specify? +> +> > ## Solution +> > Since the row axis (0) is patients, it does not make sense to get the +> > difference between two arbitrary patients. The column axis (1) is in +> > days, so the difference is the change in inflammation -- a meaningful +> > concept. +> > +> > ~~~ +> > np.diff(data, axis=1) +> > ~~~ +> > {: .language-python} +> {: .solution} +> +> If the shape of an individual data file is `(60, 40)` (60 rows and 40 +> columns), what would the shape of the array be after you run the `diff()` +> function and why? +> +> > ## Solution +> > The shape will be `(60, 39)` because there is one fewer difference between +> > columns than there are columns in the data. +> {: .solution} +> +> How would you find the largest change in inflammation for each patient? Does +> it matter if the change in inflammation is an increase or a decrease? +> +> > ## Solution +> > By using the `np.max()` function after you apply the `np.diff()` +> > function, you will get the largest difference between days. +> > +> > ~~~ +> > np.max(np.diff(data, axis=1), axis=1) +> > ~~~ +> > {: .language-python} +> > +> > ~~~ +> > array([ 7., 12., 11., 10., 11., 13., 10., 8., 10., 10., 7., +> > 7., 13., 7., 10., 10., 8., 10., 9., 10., 13., 7., +> > 12., 9., 12., 11., 10., 10., 7., 10., 11., 10., 8., +> > 11., 12., 10., 9., 10., 13., 10., 7., 7., 10., 13., +> > 12., 8., 8., 10., 10., 9., 8., 13., 10., 7., 10., +> > 8., 12., 10., 7., 12.]) +> > ~~~ +> > {: .language-python} +> > +> > If inflammation values *decrease* along an axis, then the difference from +> > one element to the next will be negative. If +> > you are interested in the **magnitude** of the change and not the +> > direction, the `np.absolute()` function will provide that. +> > +> > Notice the difference if you get the largest _absolute_ difference +> > between readings. +> > +> > ~~~ +> > np.max(np.absolute(np.diff(data, axis=1)), axis=1) +> > ~~~ +> > {: .language-python} +> > +> > ~~~ +> > array([ 12., 14., 11., 13., 11., 13., 10., 12., 10., 10., 10., +> > 12., 13., 10., 11., 10., 12., 13., 9., 10., 13., 9., +> > 12., 9., 12., 11., 10., 13., 9., 13., 11., 11., 8., +> > 11., 12., 13., 9., 10., 13., 11., 11., 13., 11., 13., +> > 13., 10., 9., 10., 10., 9., 9., 13., 10., 9., 10., +> > 11., 13., 10., 10., 12.]) +> > ~~~ +> > {: .language-python} +> > +> {: .solution} +{: .challenge} diff --git a/reveal.js/13_analysis_task_2.md b/reveal.js/13_analysis_task_2.md new file mode 100644 index 0000000..608625f --- /dev/null +++ b/reveal.js/13_analysis_task_2.md @@ -0,0 +1,303 @@ +--- +layout: page +title: Data Analysis Task 2 +order: 13 +session: 2 +length: 30 +toc: true +--- + +## Learning Objectives + +In this lesson, we will: + +- "Plot simple graphs from data." +- "Plot multiple graphs in a single figure." + +## Key points + +- "Use the `pyplot` module from the `matplotlib` library for creating simple visualizations." + +## Visualizing data +The mathematician Richard Hamming once said, "The purpose of computing is insight, not numbers," +and the best way to develop insight is often to visualize data. Visualization deserves an entire +lecture of its own, but we can explore a few features of Python's `matplotlib` library here. While +there is no official plotting library, `matplotlib` is the _de facto_ standard. First, we will +import the `pyplot` module from `matplotlib` and use two of its functions to create and display a +heat map of our data: + +~~~ +import matplotlib.pyplot as plt +image = plt.imshow(data) +plt.show() +~~~ +{: .language-python} + +![Heat map representing the `data` variable. Each cell is colored by value along a color gradient +from blue to yellow.](../fig/inflammation-01-imshow.svg) + +Each row in the heat map corresponds to a patient in the clinical trial dataset, and each column +corresponds to a day in the dataset. Blue pixels in this heat map represent low values, while +yellow pixels represent high values. As we can see, the general number of inflammation flare-ups +for the patients rises and falls over a 40-day period. + +So far so good as this is in line with our knowledge of the clinical trial and Dr. Maverick's +claims: + +* the patients take their medication once their inflammation flare-ups begin +* it takes around 3 weeks for the medication to take effect and begin reducing flare-ups +* and flare-ups appear to drop to zero by the end of the clinical trial. + +Now let's take a look at the average inflammation over time: + +~~~ +ave_inflammation = np.mean(data, axis=0) +ave_plot = plt.plot(ave_inflammation) +plt.show() +~~~ +{: .language-python} + +![A line graph showing the average inflammation across all patients over a 40-day period.](../fig/inflammation-01-average.svg) + +Here, we have put the average inflammation per day across all patients in the variable +`ave_inflammation`, then asked `matplotlib.pyplot` to create and display a line graph of those +values. The result is a reasonably linear rise and fall, in line with Dr. Maverick's claim that +the medication takes 3 weeks to take effect. But a good data scientist doesn't just consider the +average of a dataset, so let's have a look at two other statistics: + +~~~ +max_plot = plt.plot(np.max(data, axis=0)) +plt.show() +~~~ +{: .language-python} + +![A line graph showing the maximum inflammation across all patients over a 40-day period.](../fig/inflammation-01-maximum.svg) + +~~~ +min_plot = plt.plot(np.min(data, axis=0)) +plt.show() +~~~ +{: .language-python} + +![A line graph showing the minimum inflammation across all patients over a 40-day period.](../fig/inflammation-01-minimum.svg) + +The maximum value rises and falls linearly, while the minimum seems to be a step function. +Neither trend seems particularly likely, so either there's a mistake in our calculations or +something is wrong with our data. This insight would have been difficult to reach by examining +the numbers themselves without visualization tools. + +### Grouping plots +You can group similar plots in a single figure using subplots. +This script below uses a number of new commands. The function `matplotlib.pyplot.figure()` +creates a space into which we will place all of our plots. The parameter `figsize` +tells Python how big to make this space. Each subplot is placed into the figure using +its `add_subplot` method. The `add_subplot` method takes +3 parameters. The first denotes how many total rows of subplots there are, the second parameter +refers to the total number of subplot columns, and the final parameter denotes which subplot +your variable is referencing (left-to-right, top-to-bottom). Each subplot is stored in a +different variable (`axes1`, `axes2`, `axes3`). Once a subplot is created, the axes can +be titled using the `set_xlabel()` command (or `set_ylabel()`). +Here are our three plots side by side: + +~~~ +import numpy +import matplotlib.pyplot as plt + +data = np.loadtxt(fname='data/inflammation-01.csv', delimiter=',') + +fig = plt.figure(figsize=(10.0, 3.0)) + +axes1 = fig.add_subplot(1, 3, 1) +axes2 = fig.add_subplot(1, 3, 2) +axes3 = fig.add_subplot(1, 3, 3) + +axes1.set_ylabel('average') +axes1.plot(np.mean(data, axis=0)) + +axes2.set_ylabel('max') +axes2.plot(np.max(data, axis=0)) + +axes3.set_ylabel('min') +axes3.plot(np.min(data, axis=0)) + +fig.tight_layout() + +plt.savefig('inflammation.png') +plt.show() +~~~ +{: .language-python} + +![Three line graphs showing the daily average, maximum and minimum inflammation over a 40-day period.](../fig/inflammation-01-group-plot.svg) + +The call to `loadtxt` reads our data, +and the rest of the program tells the plotting library +how large we want the figure to be, +that we're creating three subplots, +what to draw for each one, +and that we want a tight layout. +(If we leave out that call to `fig.tight_layout()`, +the graphs will actually be squeezed together more closely.) + +The call to `savefig` stores the plot as a graphics file. This can be +a convenient way to store your plots for use in other documents, web +pages etc. The graphics format is automatically determined by +Matplotlib from the file name ending we specify; here PNG from +'inflammation.png'. Matplotlib supports many different graphics +formats, including SVG, PDF, and JPEG. + +## Importing libraries with shortcuts +> +> In this lesson we use the `import matplotlib.pyplot` +> syntax +> to import the `pyplot` module of `matplotlib`. However, shortcuts such as +> `import matplotlib.pyplot as plt` are frequently used. +> Importing `pyplot` this way means that after the initial import, rather than writing +> `matplotlib.pyplot.plot(...)`, you can now write `plt.plot(...)`. +> Another common convention is to use the shortcut `import numpy as np` when importing the +> NumPy library. We then can write `np.loadtxt(...)` instead of `np.loadtxt(...)`, +> for example. +> +> Some people prefer these shortcuts as it is quicker to type and results in shorter +> lines of code - especially for libraries with long names! You will frequently see +> Python code online using a `pyplot` function with `plt`, or a NumPy function with +> `np`, and it's because they've used this shortcut. It makes no difference which +> approach you choose to take, but you must be consistent as if you use +> `import matplotlib.pyplot as plt` then `matplotlib.pyplot.plot(...)` will not work, and +> you must use `plt.plot(...)` instead. Because of this, when working with other people it +> is important you agree on how libraries are imported. +{: .callout} + +## Plot Scaling +> +> Why do all of our plots stop just short of the upper end of our graph? +> +> > ## Solution +> > Because matplotlib normally sets x and y axes limits to the min and max of our data +> > (depending on data range) +> {: .solution} +> +> If we want to change this, we can use the `set_ylim(min, max)` method of each 'axes', +> for example: +> +> ~~~ +> axes3.set_ylim(0,6) +> ~~~ +> {: .language-python} +> +> Update your plotting code to automatically set a more appropriate scale. +> (Hint: you can make use of the `max` and `min` methods to help.) +> +> > ## Solution +> > ~~~ +> > # One method +> > axes3.set_ylabel('min') +> > axes3.plot(np.min(data, axis=0)) +> > axes3.set_ylim(0,6) +> > ~~~ +> > {: .language-python} +> {: .solution} +> +> > ## Solution +> > ~~~ +> > # A more automated approach +> > min_data = np.min(data, axis=0) +> > axes3.set_ylabel('min') +> > axes3.plot(min_data) +> > axes3.set_ylim(np.min(min_data), np.max(min_data) * 1.1) +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} + +## Drawing Straight Lines +> +> In the center and right subplots above, we expect all lines to look like step functions because +> non-integer value are not realistic for the minimum and maximum values. However, you can see +> that the lines are not always vertical or horizontal, and in particular the step function +> in the subplot on the right looks slanted. Why is this? +> +> > ## Solution +> > Because matplotlib interpolates (draws a straight line) between the points. +> > One way to do avoid this is to use the Matplotlib `drawstyle` option: +> > +> > ~~~ +> > import numpy as np +> > import matplotlib.pyplot as plt +> > +> > data = np.loadtxt(fname='data/inflammation-01.csv', delimiter=',') +> > +> > fig = plt.figure(figsize=(10.0, 3.0)) +> > +> > axes1 = fig.add_subplot(1, 3, 1) +> > axes2 = fig.add_subplot(1, 3, 2) +> > axes3 = fig.add_subplot(1, 3, 3) +> > +> > axes1.set_ylabel('average') +> > axes1.plot(np.mean(data, axis=0), drawstyle='steps-mid') +> > +> > axes2.set_ylabel('max') +> > axes2.plot(np.max(data, axis=0), drawstyle='steps-mid') +> > +> > axes3.set_ylabel('min') +> > axes3.plot(np.min(data, axis=0), drawstyle='steps-mid') +> > +> > fig.tight_layout() +> > +> > plt.show() +> > ~~~ +> > {: .language-python} +> ![Three line graphs, with step lines connecting the points, showing the daily average, maximum + and minimum inflammation over a 40-day period.](../fig/inflammation-01-line-styles.svg) +> {: .solution} +{: .challenge} + +## Make Your Own Plot +> +> Create a plot showing the standard deviation (`np.std`) +> of the inflammation data for each day across all patients. +> +> > ## Solution +> > ~~~ +> > std_plot = plt.plot(np.std(data, axis=0)) +> > plt.show() +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} + +## Moving Plots Around +> +> Modify the program to display the three plots on top of one another +> instead of side by side. +> +> > ## Solution +> > ~~~ +> > import numpy as np +> > import matplotlib.pyplot as plt +> > +> > data = np.loadtxt(fname='data/inflammation-01.csv', delimiter=',') +> > +> > # change figsize (swap width and height) +> > fig = plt.figure(figsize=(3.0, 10.0)) +> > +> > # change add_subplot (swap first two parameters) +> > axes1 = fig.add_subplot(3, 1, 1) +> > axes2 = fig.add_subplot(3, 1, 2) +> > axes3 = fig.add_subplot(3, 1, 3) +> > +> > axes1.set_ylabel('average') +> > axes1.plot(np.mean(data, axis=0)) +> > +> > axes2.set_ylabel('max') +> > axes2.plot(np.max(data, axis=0)) +> > +> > axes3.set_ylabel('min') +> > axes3.plot(np.min(data, axis=0)) +> > +> > fig.tight_layout() +> > +> > plt.show() +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} diff --git a/reveal.js/14_analysis_task_3.md b/reveal.js/14_analysis_task_3.md new file mode 100644 index 0000000..0aff83f --- /dev/null +++ b/reveal.js/14_analysis_task_3.md @@ -0,0 +1,255 @@ +--- +layout: page +title: Data Analysis Task 3 +order: 14 +session: 2 +length: 30 +toc: true +--- + +## Learning Objectives + +In this lesson, we will: + +- "Use a library function to get a list of filenames that match a wildcard pattern." +- "Write a `for` loop to process multiple files." + +## Key points + +- "Use `glob.glob(pattern)` to create a list of files whose names match a pattern." +- "Use `*` in a pattern to match zero or more characters, and `?` to match any single character." + +## Processing multiple files + +As a final piece to processing our inflammation data, we need a way to get a list of all the files +in our `data` directory whose names start with `inflammation-` and end with `.csv`. +The following library will help us to achieve this: +~~~ +import glob +~~~ +{: .language-python} + +The `glob` library contains a function, also called `glob`, +that finds files and directories whose names match a pattern. +We provide those patterns as strings: +the character `*` matches zero or more characters, +while `?` matches any one character. +We can use this to get the names of all the CSV files in the current directory: + +~~~ +print(glob.glob('data/inflammation*.csv')) +~~~ +{: .language-python} + +~~~ +['inflammation-05.csv', 'inflammation-11.csv', 'inflammation-12.csv', 'inflammation-08.csv', +'inflammation-03.csv', 'inflammation-06.csv', 'inflammation-09.csv', 'inflammation-07.csv', +'inflammation-10.csv', 'inflammation-02.csv', 'inflammation-04.csv', 'inflammation-01.csv'] +~~~ +{: .output} + +As these examples show, +`glob.glob`'s result is a list of file and directory paths in arbitrary order. +This means we can loop over it +to do something with each filename in turn. +In our case, +the "something" we want to do is generate a set of plots for each file in our inflammation dataset. + +If we want to start by analyzing just the first three files in alphabetical order, we can use the +`sorted` built-in function to generate a new sorted list from the `glob.glob` output: + +~~~ +import glob +import numpy as np +import matplotlib.pyplot as plt + +filenames = sorted(glob.glob('data/inflammation*.csv')) +filenames = filenames[0:3] +for filename in filenames: + print(filename) + + data = np.loadtxt(fname=filename, delimiter=',') + + fig = plt.figure(figsize=(10.0, 3.0)) + + axes1 = fig.add_subplot(1, 3, 1) + axes2 = fig.add_subplot(1, 3, 2) + axes3 = fig.add_subplot(1, 3, 3) + + axes1.set_ylabel('average') + axes1.plot(np.mean(data, axis=0)) + + axes2.set_ylabel('max') + axes2.plot(np.max(data, axis=0)) + + axes3.set_ylabel('min') + axes3.plot(np.min(data, axis=0)) + + fig.tight_layout() + plt.show() +~~~ +{: .language-python} + +~~~ +inflammation-01.csv +~~~ +{: .output} + +![Output from the first iteration of the for loop. Three line graphs showing the daily average, +maximum and minimum inflammation over a 40-day period for all patients in the first dataset.]( +../fig/03-loop_49_1.png) + +~~~ +inflammation-02.csv +~~~ +{: .output} + +![Output from the second iteration of the for loop. Three line graphs showing the daily average, +maximum and minimum inflammation over a 40-day period for all patients in the second +dataset.](../fig/03-loop_49_3.png) + +~~~ +inflammation-03.csv +~~~ +{: .output} + +![Output from the third iteration of the for loop. Three line graphs showing the daily average, +maximum and minimum inflammation over a 40-day period for all patients in the third +dataset.](../fig/03-loop_49_5.png) + + +The plots generated for the second clinical trial file look very similar to the plots for +the first file: their average plots show similar "noisy" rises and falls; their maxima plots +show exactly the same linear rise and fall; and their minima plots show similar staircase +structures. + +The third dataset shows much noisier average and maxima plots that are far less suspicious than +the first two datasets, however the minima plot shows that the third dataset minima is +consistently zero across every day of the trial. If we produce a heat map for the third data file +we see the following: + +![Heat map of the third inflammation dataset. Note that there are sporadic zero values throughout +the entire dataset, and the last patient only has zero values over the 40 day study. +](../fig/inflammation-03-imshow.svg) + +We can see that there are zero values sporadically distributed across all patients and days of the +clinical trial, suggesting that there were potential issues with data collection throughout the +trial. In addition, we can see that the last patient in the study didn't have any inflammation +flare-ups at all throughout the trial, suggesting that they may not even suffer from arthritis! + + +## Plotting Differences +> +> Plot the difference between the average inflammations reported in the first and second datasets +> (stored in `inflammation-01.csv` and `inflammation-02.csv`, correspondingly), +> i.e., the difference between the leftmost plots of the first two figures. +> +> > ## Solution +> > ~~~ +> > import glob +> > import numpy as np +> > import matplotlib.pyplot as plt +> > +> > filenames = sorted(glob.glob('data/inflammation*.csv')) +> > +> > data0 = np.loadtxt(fname=filenames[0], delimiter=',') +> > data1 = np.loadtxt(fname=filenames[1], delimiter=',') +> > +> > fig = plt.figure(figsize=(10.0, 3.0)) +> > +> > plt.ylabel('Difference in average') +> > plt.plot(np.mean(data0, axis=0) - np.mean(data1, axis=0)) +> > +> > fig.tight_layout() +> > plt.show() +> > ~~~ +> > {: .language-python} +> {: .solution} +{: .challenge} + +## Generate Composite Statistics + +> Use each of the files once to generate a dataset containing values averaged over all patients: +> +> ~~~ +> filenames = glob.glob('data/inflammation*.csv') +> composite_data = np.zeros((60,40)) +> for filename in filenames: +> # sum each new file's data into composite_data as it's read +> # +> # and then divide the composite_data by number of samples +> composite_data = composite_data / len(filenames) +> ~~~ +> {: .language-python} +> +> Then use pyplot to generate average, max, and min for all patients. +> +> > ## Solution +> > ~~~ +> > import glob +> > import numpy as np +> > import matplotlib.pyplot as plt +> > +> > filenames = glob.glob('data/inflammation*.csv') +> > composite_data = np.zeros((60,40)) +> > +> > for filename in filenames: +> > data = np.loadtxt(fname = filename, delimiter=',') +> > composite_data = composite_data + data +> > +> > composite_data = composite_data / len(filenames) +> > +> > fig = plt.figure(figsize=(10.0, 3.0)) +> > +> > axes1 = fig.add_subplot(1, 3, 1) +> > axes2 = fig.add_subplot(1, 3, 2) +> > axes3 = fig.add_subplot(1, 3, 3) +> > +> > axes1.set_ylabel('average') +> > axes1.plot(np.mean(composite_data, axis=0)) +> > +> > axes2.set_ylabel('max') +> > axes2.plot(np.max(composite_data, axis=0)) +> > +> > axes3.set_ylabel('min') +> > axes3.plot(np.min(composite_data, axis=0)) +> > +> > fig.tight_layout() +> > +> > plt.show() +> > ~~~ +> > {: .language-python} +>{: .solution} +{: .challenge} + +## Conclusions + +After spending some time investigating the heat map and statistical plots, as well as +doing the above exercises to plot differences between datasets and to generate composite +patient statistics, we gain some insight into the twelve clinical trial datasets. + +The datasets appear to fall into two categories: + +* seemingly "ideal" datasets that agree excellently with Dr. Maverick's claims, + but display suspicious maxima and minima (such as `inflammation-01.csv` and `inflammation-02.csv`) +* "noisy" datasets that somewhat agree with Dr. Maverick's claims, but show concerning + data collection issues such as sporadic missing values and even an unsuitable candidate + making it into the clinical trial. + +In fact, it appears that all three of the "noisy" datasets (`inflammation-03.csv`, +`inflammation-08.csv`, and `inflammation-11.csv`) are identical down to the last value. +Armed with this information, we confront Dr. Maverick about the suspicious data and +duplicated files. + +Dr. Maverick confesses that they fabricated the clinical data after they found out +that the initial trial suffered from a number of issues, including unreliable data-recording and +poor participant selection. They created fake data to prove their drug worked, and when we asked +for more data they tried to generate more fake datasets, as well as throwing in the original +poor-quality dataset a few times to try and make all the trials seem a bit more "realistic". + +Congratulations! We've investigated the inflammation data and proven that the datasets have been +synthetically generated. + +But it would be a shame to throw away the synthetic datasets that have taught us so much +already, so we'll forgive the imaginary Dr. Maverick and continue to use the data to learn +how to program. diff --git a/reveal.js/15_wrap_up.md b/reveal.js/15_wrap_up.md new file mode 100644 index 0000000..e7ce5cd --- /dev/null +++ b/reveal.js/15_wrap_up.md @@ -0,0 +1,18 @@ +--- +layout: page +title: Wrap-up +order: 16 +session: 2 +length: 10 +toc: true +--- + +## Thanks for coming along! + +We hope you have enjoyed this course, and are inspired to start using Python for your research tasks. Please feel free to go through the course notes at your own pace, and complete the exercises that we have provided. + +This is the first time that we have run this course. We would be grateful for your feedback. If you wish to give it, please send this to Eilis Hannon, at . + +## What next? + +The hard part is to choose what to learn next. The best thing you can do is to start using Python, and use it as much as possible, for as many different types of task as you can. At this stage in your journey, gathering broad knowledge will be more beneficial than specialising. However, we have provided a list of resources to check out next [here](https://uniexeterrse.github.io/intro-to-python/resources.html), which cover many bases. diff --git a/reveal.js/LICENSE b/reveal.js/LICENSE new file mode 100644 index 0000000..0de9fdd --- /dev/null +++ b/reveal.js/LICENSE @@ -0,0 +1,19 @@ +Copyright (C) 2011-2023 Hakim El Hattab, http://hakim.se, and reveal.js contributors + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/reveal.js/README.md b/reveal.js/README.md new file mode 100644 index 0000000..db584dc --- /dev/null +++ b/reveal.js/README.md @@ -0,0 +1,50 @@ +

+ + reveal.js + +

+ + Slides +

+ +reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at [revealjs.com](https://revealjs.com/). + +The framework comes with a powerful feature set including [nested slides](https://revealjs.com/vertical-slides/), [Markdown support](https://revealjs.com/markdown/), [Auto-Animate](https://revealjs.com/auto-animate/), [PDF export](https://revealjs.com/pdf-export/), [speaker notes](https://revealjs.com/speaker-view/), [LaTeX typesetting](https://revealjs.com/math/), [syntax highlighted code](https://revealjs.com/code/) and an [extensive API](https://revealjs.com/api/). + +--- + +Want to create reveal.js presentation in a graphical editor? Try . It's made by the same people behind reveal.js. + +--- + +### Sponsors +Hakim's open source work is supported by GitHub sponsors. Special thanks to: + + +--- + +### Getting started +- 🚀 [Install reveal.js](https://revealjs.com/installation) +- 👀 [View the demo presentation](https://revealjs.com/demo) +- 📖 [Read the documentation](https://revealjs.com/markup/) +- 🖌 [Try the visual editor for reveal.js at Slides.com](https://slides.com/) +- 🎬 [Watch the reveal.js video course (paid)](https://revealjs.com/course) + +--- +
+ MIT licensed | Copyright © 2011-2023 Hakim El Hattab, https://hakim.se +
diff --git a/reveal.js/css/layout.scss b/reveal.js/css/layout.scss new file mode 100644 index 0000000..f499fdd --- /dev/null +++ b/reveal.js/css/layout.scss @@ -0,0 +1,69 @@ +/** + * Layout helpers. + */ + +// Stretch an element vertically based on available space +.reveal .stretch, +.reveal .r-stretch { + max-width: none; + max-height: none; +} + +.reveal pre.stretch code, +.reveal pre.r-stretch code { + height: 100%; + max-height: 100%; + box-sizing: border-box; +} + +// Text that auto-fits its container +.reveal .r-fit-text { + display: inline-block; // https://github.com/rikschennink/fitty#performance + white-space: nowrap; +} + +// Stack multiple elements on top of each other +.reveal .r-stack { + display: grid; +} + +.reveal .r-stack > * { + grid-area: 1/1; + margin: auto; +} + +// Horizontal and vertical stacks +.reveal .r-vstack, +.reveal .r-hstack { + display: flex; + + img, video { + min-width: 0; + min-height: 0; + object-fit: contain; + } +} + +.reveal .r-vstack { + flex-direction: column; + align-items: center; + justify-content: center; +} + +.reveal .r-hstack { + flex-direction: row; + align-items: center; + justify-content: center; +} + +// Naming based on tailwindcss +.reveal .items-stretch { align-items: stretch; } +.reveal .items-start { align-items: flex-start; } +.reveal .items-center { align-items: center; } +.reveal .items-end { align-items: flex-end; } + +.reveal .justify-between { justify-content: space-between; } +.reveal .justify-around { justify-content: space-around; } +.reveal .justify-start { justify-content: flex-start; } +.reveal .justify-center { justify-content: center; } +.reveal .justify-end { justify-content: flex-end; } diff --git a/reveal.js/css/print/paper.scss b/reveal.js/css/print/paper.scss new file mode 100644 index 0000000..32fab8a --- /dev/null +++ b/reveal.js/css/print/paper.scss @@ -0,0 +1,166 @@ + +@media print { + html:not(.print-pdf) { + overflow: visible; + width: auto; + height: auto; + + body { + margin: 0; + padding: 0; + overflow: visible; + } + } + + html:not(.print-pdf) .reveal { + background: #fff; + font-size: 20pt; + + .controls, + .state-background, + .progress, + .backgrounds, + .slide-number { + display: none !important; + } + + p, td, li { + font-size: 20pt!important; + color: #000; + } + + h1,h2,h3,h4,h5,h6 { + color: #000!important; + height: auto; + line-height: normal; + text-align: left; + letter-spacing: normal; + } + + h1 { font-size: 28pt !important; } + h2 { font-size: 24pt !important; } + h3 { font-size: 22pt !important; } + h4 { font-size: 22pt !important; font-variant: small-caps; } + h5 { font-size: 21pt !important; } + h6 { font-size: 20pt !important; font-style: italic; } + + a:link, + a:visited { + color: #000 !important; + font-weight: bold; + text-decoration: underline; + } + + ul, ol, div, p { + visibility: visible; + position: static; + width: auto; + height: auto; + display: block; + overflow: visible; + margin: 0; + text-align: left !important; + } + pre, + table { + margin-left: 0; + margin-right: 0; + } + pre code { + padding: 20px; + } + blockquote { + margin: 20px 0; + } + + .slides { + position: static !important; + width: auto !important; + height: auto !important; + + left: 0 !important; + top: 0 !important; + margin-left: 0 !important; + margin-top: 0 !important; + padding: 0 !important; + zoom: 1 !important; + transform: none !important; + + overflow: visible !important; + display: block !important; + + text-align: left !important; + perspective: none; + + perspective-origin: 50% 50%; + } + .slides section { + visibility: visible !important; + position: static !important; + width: auto !important; + height: auto !important; + display: block !important; + overflow: visible !important; + + left: 0 !important; + top: 0 !important; + margin-left: 0 !important; + margin-top: 0 !important; + padding: 60px 20px !important; + z-index: auto !important; + + opacity: 1 !important; + + page-break-after: always !important; + + transform-style: flat !important; + transform: none !important; + transition: none !important; + } + .slides section.stack { + padding: 0 !important; + } + .slides section:last-of-type { + page-break-after: avoid !important; + } + .slides section .fragment { + opacity: 1 !important; + visibility: visible !important; + + transform: none !important; + } + + .r-fit-text { + white-space: normal !important; + } + + section img { + display: block; + margin: 15px 0px; + background: rgba(255,255,255,1); + border: 1px solid #666; + box-shadow: none; + } + + section small { + font-size: 0.8em; + } + + .hljs { + max-height: 100%; + white-space: pre-wrap; + word-wrap: break-word; + word-break: break-word; + font-size: 15pt; + } + + .hljs .hljs-ln-numbers { + white-space: nowrap; + } + + .hljs td { + font-size: inherit !important; + color: inherit !important; + } + } +} diff --git a/reveal.js/css/print/pdf.scss b/reveal.js/css/print/pdf.scss new file mode 100644 index 0000000..0a1c2bf --- /dev/null +++ b/reveal.js/css/print/pdf.scss @@ -0,0 +1,159 @@ +/** + * This stylesheet is used to print reveal.js + * presentations to PDF. + * + * https://revealjs.com/pdf-export/ + */ + +html.reveal-print { + * { + -webkit-print-color-adjust: exact; + } + + & { + width: 100%; + height: 100%; + overflow: visible; + } + + body { + margin: 0 auto !important; + border: 0; + padding: 0; + float: none !important; + overflow: visible; + } + + /* Remove any elements not needed in print. */ + .nestedarrow, + .reveal .controls, + .reveal .progress, + .reveal .playback, + .reveal.overview, + .state-background { + display: none !important; + } + + .reveal pre code { + overflow: hidden !important; + } + + .reveal { + width: auto !important; + height: auto !important; + overflow: hidden !important; + } + .reveal .slides { + position: static; + width: 100% !important; + height: auto !important; + zoom: 1 !important; + pointer-events: initial; + + left: auto; + top: auto; + margin: 0 !important; + padding: 0 !important; + + overflow: visible; + display: block; + + perspective: none; + perspective-origin: 50% 50%; + } + + .reveal .slides .pdf-page { + position: relative; + overflow: hidden; + z-index: 1; + + page-break-after: always; + } + + .reveal .slides .pdf-page:last-of-type { + page-break-after: avoid; + } + + .reveal .slides section { + visibility: visible !important; + display: block !important; + position: absolute !important; + + margin: 0 !important; + padding: 0 !important; + box-sizing: border-box !important; + min-height: 1px; + + opacity: 1 !important; + + transform-style: flat !important; + transform: none !important; + } + + .reveal section.stack { + position: relative !important; + margin: 0 !important; + padding: 0 !important; + page-break-after: avoid !important; + height: auto !important; + min-height: auto !important; + } + + .reveal img { + box-shadow: none; + } + + /* Slide backgrounds are placed inside of their slide when exporting to PDF */ + .reveal .backgrounds { + display: none; + } + .reveal .slide-background { + display: block !important; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: auto !important; + } + + /* Display slide speaker notes when 'showNotes' is enabled */ + .reveal.show-notes { + max-width: none; + max-height: none; + } + .reveal .speaker-notes-pdf { + display: block; + width: 100%; + height: auto; + max-height: none; + top: auto; + right: auto; + bottom: auto; + left: auto; + z-index: 100; + } + + /* Layout option which makes notes appear on a separate page */ + .reveal .speaker-notes-pdf[data-layout="separate-page"] { + position: relative; + color: inherit; + background-color: transparent; + padding: 20px; + page-break-after: always; + border: 0; + } + + /* Display slide numbers when 'slideNumber' is enabled */ + .reveal .slide-number-pdf { + display: block; + position: absolute; + font-size: 14px; + visibility: visible; + } + + /* This accessibility tool is not useful in PDF and breaks it visually */ + .aria-status { + display: none; + } +} diff --git a/reveal.js/css/reveal.scss b/reveal.js/css/reveal.scss new file mode 100644 index 0000000..a3ab067 --- /dev/null +++ b/reveal.js/css/reveal.scss @@ -0,0 +1,2104 @@ +@use "sass:math"; + +/** + * reveal.js + * http://revealjs.com + * MIT licensed + * + * Copyright (C) Hakim El Hattab, https://hakim.se + */ + +@import 'layout'; + +/********************************************* + * GLOBAL STYLES + *********************************************/ + +html.reveal-full-page { + width: 100%; + height: 100%; + height: 100vh; + height: calc( var(--vh, 1vh) * 100 ); + height: 100svh; + overflow: hidden; +} + +.reveal-viewport { + height: 100%; + overflow: hidden; + position: relative; + line-height: 1; + margin: 0; + + background-color: #fff; + color: #000; + + --r-controls-spacing: 12px; +} + +// Force the presentation to cover the full viewport when we +// enter fullscreen mode. Fixes sizing issues in Safari. +.reveal-viewport:fullscreen { + top: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; + transform: none !important; +} + + +/********************************************* + * VIEW FRAGMENTS + *********************************************/ + +.reveal .fragment { + transition: all .2s ease; + + &:not(.custom) { + opacity: 0; + visibility: hidden; + will-change: opacity; + } + + &.visible { + opacity: 1; + visibility: inherit; + } + + &.disabled { + transition: none; + } +} + +.reveal .fragment.grow { + opacity: 1; + visibility: inherit; + + &.visible { + transform: scale( 1.3 ); + } +} + +.reveal .fragment.shrink { + opacity: 1; + visibility: inherit; + + &.visible { + transform: scale( 0.7 ); + } +} + +.reveal .fragment.zoom-in { + transform: scale( 0.1 ); + + &.visible { + transform: none; + } +} + +.reveal .fragment.fade-out { + opacity: 1; + visibility: inherit; + + &.visible { + opacity: 0; + visibility: hidden; + } +} + +.reveal .fragment.semi-fade-out { + opacity: 1; + visibility: inherit; + + &.visible { + opacity: 0.5; + visibility: inherit; + } +} + +.reveal .fragment.strike { + opacity: 1; + visibility: inherit; + + &.visible { + text-decoration: line-through; + } +} + +.reveal .fragment.fade-up { + transform: translate(0, 40px); + + &.visible { + transform: translate(0, 0); + } +} + +.reveal .fragment.fade-down { + transform: translate(0, -40px); + + &.visible { + transform: translate(0, 0); + } +} + +.reveal .fragment.fade-right { + transform: translate(-40px, 0); + + &.visible { + transform: translate(0, 0); + } +} + +.reveal .fragment.fade-left { + transform: translate(40px, 0); + + &.visible { + transform: translate(0, 0); + } +} + +.reveal .fragment.fade-in-then-out, +.reveal .fragment.current-visible { + opacity: 0; + visibility: hidden; + + &.current-fragment { + opacity: 1; + visibility: inherit; + } +} + +.reveal .fragment.fade-in-then-semi-out { + opacity: 0; + visibility: hidden; + + &.visible { + opacity: 0.5; + visibility: inherit; + } + + &.current-fragment { + opacity: 1; + visibility: inherit; + } +} + +.reveal .fragment.highlight-red, +.reveal .fragment.highlight-current-red, +.reveal .fragment.highlight-green, +.reveal .fragment.highlight-current-green, +.reveal .fragment.highlight-blue, +.reveal .fragment.highlight-current-blue { + opacity: 1; + visibility: inherit; +} + .reveal .fragment.highlight-red.visible { + color: #ff2c2d + } + .reveal .fragment.highlight-green.visible { + color: #17ff2e; + } + .reveal .fragment.highlight-blue.visible { + color: #1b91ff; + } + +.reveal .fragment.highlight-current-red.current-fragment { + color: #ff2c2d +} +.reveal .fragment.highlight-current-green.current-fragment { + color: #17ff2e; +} +.reveal .fragment.highlight-current-blue.current-fragment { + color: #1b91ff; +} + + +/********************************************* + * DEFAULT ELEMENT STYLES + *********************************************/ + +/* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */ +.reveal:after { + content: ''; + font-style: italic; +} + +.reveal iframe { + z-index: 1; +} + +/** Prevents layering issues in certain browser/transition combinations */ +.reveal a { + position: relative; +} + + +/********************************************* + * CONTROLS + *********************************************/ + +@keyframes bounce-right { + 0%, 10%, 25%, 40%, 50% {transform: translateX(0);} + 20% {transform: translateX(10px);} + 30% {transform: translateX(-5px);} +} + +@keyframes bounce-left { + 0%, 10%, 25%, 40%, 50% {transform: translateX(0);} + 20% {transform: translateX(-10px);} + 30% {transform: translateX(5px);} +} + +@keyframes bounce-down { + 0%, 10%, 25%, 40%, 50% {transform: translateY(0);} + 20% {transform: translateY(10px);} + 30% {transform: translateY(-5px);} +} + +$controlArrowSize: 3.6em; +$controlArrowSpacing: 1.4em; +$controlArrowLength: 2.6em; +$controlArrowThickness: 0.5em; +$controlsArrowAngle: 45deg; +$controlsArrowAngleHover: 40deg; +$controlsArrowAngleActive: 36deg; + +@mixin controlsArrowTransform( $angle ) { + &:before { + transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( $angle ); + } + + &:after { + transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( -$angle ); + } +} + +.reveal .controls { + display: none; + position: absolute; + top: auto; + bottom: var(--r-controls-spacing); + right: var(--r-controls-spacing); + left: auto; + z-index: 11; + color: #000; + pointer-events: none; + font-size: 10px; + + button { + position: absolute; + padding: 0; + background-color: transparent; + border: 0; + outline: 0; + cursor: pointer; + color: currentColor; + transform: scale(.9999); + transition: color 0.2s ease, + opacity 0.2s ease, + transform 0.2s ease; + z-index: 2; // above slides + pointer-events: auto; + font-size: inherit; + + visibility: hidden; + opacity: 0; + + -webkit-appearance: none; + -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); + } + + .controls-arrow:before, + .controls-arrow:after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: $controlArrowLength; + height: $controlArrowThickness; + border-radius: $controlArrowThickness*0.5; + background-color: currentColor; + + transition: all 0.15s ease, background-color 0.8s ease; + transform-origin: math.div(floor(($controlArrowThickness*0.5)*10), 10) 50%; + will-change: transform; + } + + .controls-arrow { + position: relative; + width: $controlArrowSize; + height: $controlArrowSize; + + @include controlsArrowTransform( $controlsArrowAngle ); + + &:hover { + @include controlsArrowTransform( $controlsArrowAngleHover ); + } + + &:active { + @include controlsArrowTransform( $controlsArrowAngleActive ); + } + } + + .navigate-left { + right: $controlArrowSize + $controlArrowSpacing*2; + bottom: $controlArrowSpacing + $controlArrowSize*0.5; + transform: translateX( -10px ); + + &.highlight { + animation: bounce-left 2s 50 both ease-out; + } + } + + .navigate-right { + right: 0; + bottom: $controlArrowSpacing + $controlArrowSize*0.5; + transform: translateX( 10px ); + + .controls-arrow { + transform: rotate( 180deg ); + } + + &.highlight { + animation: bounce-right 2s 50 both ease-out; + } + } + + .navigate-up { + right: $controlArrowSpacing + $controlArrowSize*0.5; + bottom: $controlArrowSpacing*2 + $controlArrowSize; + transform: translateY( -10px ); + + .controls-arrow { + transform: rotate( 90deg ); + } + } + + .navigate-down { + right: $controlArrowSpacing + $controlArrowSize*0.5; + bottom: -$controlArrowSpacing; + padding-bottom: $controlArrowSpacing; + transform: translateY( 10px ); + + .controls-arrow { + transform: rotate( -90deg ); + } + + &.highlight { + animation: bounce-down 2s 50 both ease-out; + } + } + + // Back arrow style: "faded": + // Deemphasize backwards navigation arrows in favor of drawing + // attention to forwards navigation + &[data-controls-back-arrows="faded"] .navigate-up.enabled { + opacity: 0.3; + + &:hover { + opacity: 1; + } + } + + // Back arrow style: "hidden": + // Never show arrows for backwards navigation + &[data-controls-back-arrows="hidden"] .navigate-up.enabled { + opacity: 0; + visibility: hidden; + } + + // Any control button that can be clicked is "enabled" + .enabled { + visibility: visible; + opacity: 0.9; + cursor: pointer; + transform: none; + } + + // Any control button that leads to showing or hiding + // a fragment + .enabled.fragmented { + opacity: 0.5; + } + + .enabled:hover, + .enabled.fragmented:hover { + opacity: 1; + } +} + +.reveal:not(.rtl) .controls { + // Back arrow style: "faded": + // Deemphasize left arrow + &[data-controls-back-arrows="faded"] .navigate-left.enabled { + opacity: 0.3; + + &:hover { + opacity: 1; + } + } + + // Back arrow style: "hidden": + // Never show left arrow + &[data-controls-back-arrows="hidden"] .navigate-left.enabled { + opacity: 0; + visibility: hidden; + } +} + +.reveal.rtl .controls { + // Back arrow style: "faded": + // Deemphasize right arrow in RTL mode + &[data-controls-back-arrows="faded"] .navigate-right.enabled { + opacity: 0.3; + + &:hover { + opacity: 1; + } + } + + // Back arrow style: "hidden": + // Never show right arrow in RTL mode + &[data-controls-back-arrows="hidden"] .navigate-right.enabled { + opacity: 0; + visibility: hidden; + } +} + +.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up, +.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down { + display: none; +} + +// Adjust the layout when there are no vertical slides +.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left, +.reveal:not(.has-vertical-slides) .controls .navigate-left { + bottom: $controlArrowSpacing; + right: 0.5em + $controlArrowSpacing + $controlArrowSize; +} + +.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right, +.reveal:not(.has-vertical-slides) .controls .navigate-right { + bottom: $controlArrowSpacing; + right: 0.5em; +} + +// Adjust the layout when there are no horizontal slides +.reveal:not(.has-horizontal-slides) .controls .navigate-up { + right: $controlArrowSpacing; + bottom: $controlArrowSpacing + $controlArrowSize; +} +.reveal:not(.has-horizontal-slides) .controls .navigate-down { + right: $controlArrowSpacing; + bottom: 0.5em; +} + +// Invert arrows based on background color +.reveal.has-dark-background .controls { + color: #fff; +} +.reveal.has-light-background .controls { + color: #000; +} + +// Disable active states on touch devices +.reveal.no-hover .controls .controls-arrow:hover, +.reveal.no-hover .controls .controls-arrow:active { + @include controlsArrowTransform( $controlsArrowAngle ); +} + +// Edge aligned controls layout +@media screen and (min-width: 500px) { + + .reveal-viewport { + --r-controls-spacing: 0.8em; + } + + .reveal .controls[data-controls-layout="edges"] { + & { + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + .navigate-left, + .navigate-right, + .navigate-up, + .navigate-down { + bottom: auto; + right: auto; + } + + .navigate-left { + top: 50%; + left: var(--r-controls-spacing); + margin-top: -$controlArrowSize*0.5; + } + + .navigate-right { + top: 50%; + right: var(--r-controls-spacing); + margin-top: -$controlArrowSize*0.5; + } + + .navigate-up { + top: var(--r-controls-spacing); + left: 50%; + margin-left: -$controlArrowSize*0.5; + } + + .navigate-down { + bottom: calc(var(--r-controls-spacing) - #{$controlArrowSpacing} + 0.3em); + left: 50%; + margin-left: -$controlArrowSize*0.5; + } + } + +} + + +/********************************************* + * PROGRESS BAR + *********************************************/ + +.reveal .progress { + position: absolute; + display: none; + height: 3px; + width: 100%; + bottom: 0; + left: 0; + z-index: 10; + + background-color: rgba( 0, 0, 0, 0.2 ); + color: #fff; +} + .reveal .progress:after { + content: ''; + display: block; + position: absolute; + height: 10px; + width: 100%; + top: -10px; + } + .reveal .progress span { + display: block; + height: 100%; + width: 100%; + + background-color: currentColor; + transition: transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transform-origin: 0 0; + transform: scaleX(0); + } + +/********************************************* + * SLIDE NUMBER + *********************************************/ + +.reveal .slide-number { + position: absolute; + display: block; + right: 8px; + bottom: 8px; + z-index: 31; + font-family: Helvetica, sans-serif; + font-size: 12px; + line-height: 1; + color: #fff; + background-color: rgba( 0, 0, 0, 0.4 ); + padding: 5px; +} + +.reveal .slide-number a { + color: currentColor; +} + +.reveal .slide-number-delimiter { + margin: 0 3px; +} + +/********************************************* + * SLIDES + *********************************************/ + +.reveal { + position: relative; + width: 100%; + height: 100%; + overflow: hidden; + touch-action: pinch-zoom; +} + +// Swiping on an embedded deck should not block page scrolling +.reveal.embedded { + touch-action: pan-y; +} + +.reveal .slides { + position: absolute; + width: 100%; + height: 100%; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + pointer-events: none; + + overflow: visible; + z-index: 1; + text-align: center; + perspective: 600px; + perspective-origin: 50% 40%; +} + +.reveal .slides>section { + perspective: 600px; +} + +.reveal .slides>section, +.reveal .slides>section>section { + display: none; + position: absolute; + width: 100%; + pointer-events: auto; + + z-index: 10; + transform-style: flat; + transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); +} + +/* Global transition speed settings */ +.reveal[data-transition-speed="fast"] .slides section { + transition-duration: 400ms; +} +.reveal[data-transition-speed="slow"] .slides section { + transition-duration: 1200ms; +} + +/* Slide-specific transition speed overrides */ +.reveal .slides section[data-transition-speed="fast"] { + transition-duration: 400ms; +} +.reveal .slides section[data-transition-speed="slow"] { + transition-duration: 1200ms; +} + +.reveal .slides>section.stack { + padding-top: 0; + padding-bottom: 0; + pointer-events: none; + height: 100%; +} + +.reveal .slides>section.present, +.reveal .slides>section>section.present { + display: block; + z-index: 11; + opacity: 1; +} + +.reveal .slides>section:empty, +.reveal .slides>section>section:empty, +.reveal .slides>section[data-background-interactive], +.reveal .slides>section>section[data-background-interactive] { + pointer-events: none; +} + +.reveal.center, +.reveal.center .slides, +.reveal.center .slides section { + min-height: 0 !important; +} + +/* Don't allow interaction with invisible slides */ +.reveal .slides>section:not(.present), +.reveal .slides>section>section:not(.present) { + pointer-events: none; +} + +.reveal.overview .slides>section, +.reveal.overview .slides>section>section { + pointer-events: auto; +} + +.reveal .slides>section.past, +.reveal .slides>section.future, +.reveal .slides>section.past>section, +.reveal .slides>section.future>section, +.reveal .slides>section>section.past, +.reveal .slides>section>section.future { + opacity: 0; +} + + +/********************************************* + * Mixins for readability of transitions + *********************************************/ + +@mixin transition-global($style) { + .reveal .slides section[data-transition=#{$style}], + .reveal.#{$style} .slides section:not([data-transition]) { + @content; + } +} +@mixin transition-stack($style) { + .reveal .slides section[data-transition=#{$style}].stack, + .reveal.#{$style} .slides section.stack { + @content; + } +} +@mixin transition-horizontal-past($style) { + .reveal .slides>section[data-transition=#{$style}].past, + .reveal .slides>section[data-transition~=#{$style}-out].past, + .reveal.#{$style} .slides>section:not([data-transition]).past { + @content; + } +} +@mixin transition-horizontal-future($style) { + .reveal .slides>section[data-transition=#{$style}].future, + .reveal .slides>section[data-transition~=#{$style}-in].future, + .reveal.#{$style} .slides>section:not([data-transition]).future { + @content; + } +} + +@mixin transition-vertical-past($style) { + .reveal .slides>section>section[data-transition=#{$style}].past, + .reveal .slides>section>section[data-transition~=#{$style}-out].past, + .reveal.#{$style} .slides>section>section:not([data-transition]).past { + @content; + } +} +@mixin transition-vertical-future($style) { + .reveal .slides>section>section[data-transition=#{$style}].future, + .reveal .slides>section>section[data-transition~=#{$style}-in].future, + .reveal.#{$style} .slides>section>section:not([data-transition]).future { + @content; + } +} + +/********************************************* + * SLIDE TRANSITION + * Aliased 'linear' for backwards compatibility + *********************************************/ + +@each $stylename in slide, linear { + @include transition-horizontal-past(#{$stylename}) { + transform: translate(-150%, 0); + } + @include transition-horizontal-future(#{$stylename}) { + transform: translate(150%, 0); + } + @include transition-vertical-past(#{$stylename}) { + transform: translate(0, -150%); + } + @include transition-vertical-future(#{$stylename}) { + transform: translate(0, 150%); + } +} + +/********************************************* + * CONVEX TRANSITION + * Aliased 'default' for backwards compatibility + *********************************************/ + +@each $stylename in default, convex { + @include transition-stack(#{$stylename}) { + transform-style: preserve-3d; + } + + @include transition-horizontal-past(#{$stylename}) { + transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + } + @include transition-horizontal-future(#{$stylename}) { + transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); + } + @include transition-vertical-past(#{$stylename}) { + transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); + } + @include transition-vertical-future(#{$stylename}) { + transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); + } +} + +/********************************************* + * CONCAVE TRANSITION + *********************************************/ + +@include transition-stack(concave) { + transform-style: preserve-3d; +} + +@include transition-horizontal-past(concave) { + transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); +} +@include transition-horizontal-future(concave) { + transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); +} +@include transition-vertical-past(concave) { + transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); +} +@include transition-vertical-future(concave) { + transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); +} + + +/********************************************* + * ZOOM TRANSITION + *********************************************/ + +@include transition-global(zoom) { + transition-timing-function: ease; +} +@include transition-horizontal-past(zoom) { + visibility: hidden; + transform: scale(16); +} +@include transition-horizontal-future(zoom) { + visibility: hidden; + transform: scale(0.2); +} +@include transition-vertical-past(zoom) { + transform: scale(16); +} +@include transition-vertical-future(zoom) { + transform: scale(0.2); +} + + +/********************************************* + * CUBE TRANSITION + * + * WARNING: + * this is deprecated and will be removed in a + * future version. + *********************************************/ + +.reveal.cube .slides { + perspective: 1300px; +} + +.reveal.cube .slides section { + padding: 30px; + min-height: 700px; + backface-visibility: hidden; + box-sizing: border-box; + transform-style: preserve-3d; +} + .reveal.center.cube .slides section { + min-height: 0; + } + .reveal.cube .slides section:not(.stack):before { + content: ''; + position: absolute; + display: block; + width: 100%; + height: 100%; + left: 0; + top: 0; + background: rgba(0,0,0,0.1); + border-radius: 4px; + transform: translateZ( -20px ); + } + .reveal.cube .slides section:not(.stack):after { + content: ''; + position: absolute; + display: block; + width: 90%; + height: 30px; + left: 5%; + bottom: 0; + background: none; + z-index: 1; + + border-radius: 4px; + box-shadow: 0px 95px 25px rgba(0,0,0,0.2); + transform: translateZ(-90px) rotateX( 65deg ); + } + +.reveal.cube .slides>section.stack { + padding: 0; + background: none; +} + +.reveal.cube .slides>section.past { + transform-origin: 100% 0%; + transform: translate3d(-100%, 0, 0) rotateY(-90deg); +} + +.reveal.cube .slides>section.future { + transform-origin: 0% 0%; + transform: translate3d(100%, 0, 0) rotateY(90deg); +} + +.reveal.cube .slides>section>section.past { + transform-origin: 0% 100%; + transform: translate3d(0, -100%, 0) rotateX(90deg); +} + +.reveal.cube .slides>section>section.future { + transform-origin: 0% 0%; + transform: translate3d(0, 100%, 0) rotateX(-90deg); +} + + +/********************************************* + * PAGE TRANSITION + * + * WARNING: + * this is deprecated and will be removed in a + * future version. + *********************************************/ + +.reveal.page .slides { + perspective-origin: 0% 50%; + perspective: 3000px; +} + +.reveal.page .slides section { + padding: 30px; + min-height: 700px; + box-sizing: border-box; + transform-style: preserve-3d; +} + .reveal.page .slides section.past { + z-index: 12; + } + .reveal.page .slides section:not(.stack):before { + content: ''; + position: absolute; + display: block; + width: 100%; + height: 100%; + left: 0; + top: 0; + background: rgba(0,0,0,0.1); + transform: translateZ( -20px ); + } + .reveal.page .slides section:not(.stack):after { + content: ''; + position: absolute; + display: block; + width: 90%; + height: 30px; + left: 5%; + bottom: 0; + background: none; + z-index: 1; + + border-radius: 4px; + box-shadow: 0px 95px 25px rgba(0,0,0,0.2); + + -webkit-transform: translateZ(-90px) rotateX( 65deg ); + } + +.reveal.page .slides>section.stack { + padding: 0; + background: none; +} + +.reveal.page .slides>section.past { + transform-origin: 0% 0%; + transform: translate3d(-40%, 0, 0) rotateY(-80deg); +} + +.reveal.page .slides>section.future { + transform-origin: 100% 0%; + transform: translate3d(0, 0, 0); +} + +.reveal.page .slides>section>section.past { + transform-origin: 0% 0%; + transform: translate3d(0, -40%, 0) rotateX(80deg); +} + +.reveal.page .slides>section>section.future { + transform-origin: 0% 100%; + transform: translate3d(0, 0, 0); +} + + +/********************************************* + * FADE TRANSITION + *********************************************/ + +.reveal .slides section[data-transition=fade], +.reveal.fade .slides section:not([data-transition]), +.reveal.fade .slides>section>section:not([data-transition]) { + transform: none; + transition: opacity 0.5s; +} + + +.reveal.fade.overview .slides section, +.reveal.fade.overview .slides>section>section { + transition: none; +} + + +/********************************************* + * NO TRANSITION + *********************************************/ + +@include transition-global(none) { + transform: none; + transition: none; +} + + +/********************************************* + * PAUSED MODE + *********************************************/ + +.reveal .pause-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: black; + visibility: hidden; + opacity: 0; + z-index: 100; + transition: all 1s ease; +} + +.reveal .pause-overlay .resume-button { + position: absolute; + bottom: 20px; + right: 20px; + color: #ccc; + border-radius: 2px; + padding: 6px 14px; + border: 2px solid #ccc; + font-size: 16px; + background: transparent; + cursor: pointer; + + &:hover { + color: #fff; + border-color: #fff; + } +} + +.reveal.paused .pause-overlay { + visibility: visible; + opacity: 1; +} + + +/********************************************* + * FALLBACK + *********************************************/ + +.reveal .no-transition, +.reveal .no-transition *, +.reveal .slides.disable-slide-transitions section { + transition: none !important; +} + +.reveal .slides.disable-slide-transitions section { + transform: none !important; +} + + +/********************************************* + * PER-SLIDE BACKGROUNDS + *********************************************/ + +.reveal .backgrounds { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + perspective: 600px; +} + .reveal .slide-background { + display: none; + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + visibility: hidden; + overflow: hidden; + + background-color: rgba( 0, 0, 0, 0 ); + + transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + } + + .reveal .slide-background-content { + position: absolute; + width: 100%; + height: 100%; + + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: cover; + } + + .reveal .slide-background.stack { + display: block; + } + + .reveal .slide-background.present { + opacity: 1; + visibility: visible; + z-index: 2; + } + + .print-pdf .reveal .slide-background { + opacity: 1 !important; + visibility: visible !important; + } + +/* Video backgrounds */ +.reveal .slide-background video { + position: absolute; + width: 100%; + height: 100%; + max-width: none; + max-height: none; + top: 0; + left: 0; + object-fit: cover; +} + .reveal .slide-background[data-background-size="contain"] video { + object-fit: contain; + } + +/* Immediate transition style */ +.reveal[data-background-transition=none]>.backgrounds .slide-background:not([data-background-transition]), +.reveal>.backgrounds .slide-background[data-background-transition=none] { + transition: none; +} + +/* Slide */ +.reveal[data-background-transition=slide]>.backgrounds .slide-background:not([data-background-transition]), +.reveal>.backgrounds .slide-background[data-background-transition=slide] { + opacity: 1; +} + .reveal[data-background-transition=slide]>.backgrounds .slide-background.past:not([data-background-transition]), + .reveal>.backgrounds .slide-background.past[data-background-transition=slide] { + transform: translate(-100%, 0); + } + .reveal[data-background-transition=slide]>.backgrounds .slide-background.future:not([data-background-transition]), + .reveal>.backgrounds .slide-background.future[data-background-transition=slide] { + transform: translate(100%, 0); + } + + .reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]), + .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] { + transform: translate(0, -100%); + } + .reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]), + .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] { + transform: translate(0, 100%); + } + + +/* Convex */ +.reveal[data-background-transition=convex]>.backgrounds .slide-background.past:not([data-background-transition]), +.reveal>.backgrounds .slide-background.past[data-background-transition=convex] { + opacity: 0; + transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); +} +.reveal[data-background-transition=convex]>.backgrounds .slide-background.future:not([data-background-transition]), +.reveal>.backgrounds .slide-background.future[data-background-transition=convex] { + opacity: 0; + transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); +} + +.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]), +.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] { + opacity: 0; + transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); +} +.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]), +.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] { + opacity: 0; + transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); +} + + +/* Concave */ +.reveal[data-background-transition=concave]>.backgrounds .slide-background.past:not([data-background-transition]), +.reveal>.backgrounds .slide-background.past[data-background-transition=concave] { + opacity: 0; + transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); +} +.reveal[data-background-transition=concave]>.backgrounds .slide-background.future:not([data-background-transition]), +.reveal>.backgrounds .slide-background.future[data-background-transition=concave] { + opacity: 0; + transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); +} + +.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]), +.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] { + opacity: 0; + transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); +} +.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]), +.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] { + opacity: 0; + transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); +} + +/* Zoom */ +.reveal[data-background-transition=zoom]>.backgrounds .slide-background:not([data-background-transition]), +.reveal>.backgrounds .slide-background[data-background-transition=zoom] { + transition-timing-function: ease; +} + +.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past:not([data-background-transition]), +.reveal>.backgrounds .slide-background.past[data-background-transition=zoom] { + opacity: 0; + visibility: hidden; + transform: scale(16); +} +.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future:not([data-background-transition]), +.reveal>.backgrounds .slide-background.future[data-background-transition=zoom] { + opacity: 0; + visibility: hidden; + transform: scale(0.2); +} + +.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]), +.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] { + opacity: 0; + visibility: hidden; + transform: scale(16); +} +.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]), +.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] { + opacity: 0; + visibility: hidden; + transform: scale(0.2); +} + + +/* Global transition speed settings */ +.reveal[data-transition-speed="fast"]>.backgrounds .slide-background { + transition-duration: 400ms; +} +.reveal[data-transition-speed="slow"]>.backgrounds .slide-background { + transition-duration: 1200ms; +} + + +/********************************************* + * AUTO ANIMATE + *********************************************/ + +.reveal [data-auto-animate-target^="unmatched"] { + will-change: opacity; +} + +.reveal section[data-auto-animate]:not(.stack):not([data-auto-animate="running"]) [data-auto-animate-target^="unmatched"] { + opacity: 0; +} + + +/********************************************* + * OVERVIEW + *********************************************/ + +.reveal.overview { + perspective-origin: 50% 50%; + perspective: 700px; + + .slides { + // Fixes overview rendering errors in FF48+, not applied to + // other browsers since it degrades performance + -moz-transform-style: preserve-3d; + } + + .slides section { + height: 100%; + top: 0 !important; + opacity: 1 !important; + overflow: hidden; + visibility: visible !important; + cursor: pointer; + box-sizing: border-box; + } + .slides section:hover, + .slides section.present { + outline: 10px solid rgba(150,150,150,0.4); + outline-offset: 10px; + } + .slides section .fragment { + opacity: 1; + transition: none; + } + .slides section:after, + .slides section:before { + display: none !important; + } + .slides>section.stack { + padding: 0; + top: 0 !important; + background: none; + outline: none; + overflow: visible; + } + + .backgrounds { + perspective: inherit; + + // Fixes overview rendering errors in FF48+, not applied to + // other browsers since it degrades performance + -moz-transform-style: preserve-3d; + } + + .backgrounds .slide-background { + opacity: 1; + visibility: visible; + + // This can't be applied to the slide itself in Safari + outline: 10px solid rgba(150,150,150,0.1); + outline-offset: 10px; + } + + .backgrounds .slide-background.stack { + overflow: visible; + } +} + +// Disable transitions transitions while we're activating +// or deactivating the overview mode. +.reveal.overview .slides section, +.reveal.overview-deactivating .slides section { + transition: none; +} + +.reveal.overview .backgrounds .slide-background, +.reveal.overview-deactivating .backgrounds .slide-background { + transition: none; +} + + +/********************************************* + * RTL SUPPORT + *********************************************/ + +.reveal.rtl .slides, +.reveal.rtl .slides h1, +.reveal.rtl .slides h2, +.reveal.rtl .slides h3, +.reveal.rtl .slides h4, +.reveal.rtl .slides h5, +.reveal.rtl .slides h6 { + direction: rtl; + font-family: sans-serif; +} + +.reveal.rtl pre, +.reveal.rtl code { + direction: ltr; +} + +.reveal.rtl ol, +.reveal.rtl ul { + text-align: right; +} + +.reveal.rtl .progress span { + transform-origin: 100% 0; +} + +/********************************************* + * PARALLAX BACKGROUND + *********************************************/ + +.reveal.has-parallax-background .backgrounds { + transition: all 0.8s ease; +} + +/* Global transition speed settings */ +.reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds { + transition-duration: 400ms; +} +.reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds { + transition-duration: 1200ms; +} + + +/********************************************* + * OVERLAY FOR LINK PREVIEWS AND HELP + *********************************************/ + +$overlayHeaderHeight: 40px; +$overlayHeaderPadding: 5px; + +.reveal > .overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1000; + background: rgba( 0, 0, 0, 0.9 ); + transition: all 0.3s ease; +} + + .reveal > .overlay .spinner { + position: absolute; + display: block; + top: 50%; + left: 50%; + width: 32px; + height: 32px; + margin: -16px 0 0 -16px; + z-index: 10; + background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D); + + visibility: visible; + opacity: 0.6; + transition: all 0.3s ease; + } + + .reveal > .overlay header { + position: absolute; + left: 0; + top: 0; + width: 100%; + padding: $overlayHeaderPadding; + z-index: 2; + box-sizing: border-box; + } + .reveal > .overlay header a { + display: inline-block; + width: $overlayHeaderHeight; + height: $overlayHeaderHeight; + line-height: 36px; + padding: 0 10px; + float: right; + opacity: 0.6; + + box-sizing: border-box; + } + .reveal > .overlay header a:hover { + opacity: 1; + } + .reveal > .overlay header a .icon { + display: inline-block; + width: 20px; + height: 20px; + + background-position: 50% 50%; + background-size: 100%; + background-repeat: no-repeat; + } + .reveal > .overlay header a.close .icon { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); + } + .reveal > .overlay header a.external .icon { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); + } + + .reveal > .overlay .viewport { + position: absolute; + display: flex; + top: $overlayHeaderHeight + $overlayHeaderPadding*2; + right: 0; + bottom: 0; + left: 0; + } + + .reveal > .overlay.overlay-preview .viewport iframe { + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + border: 0; + + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + } + + .reveal > .overlay.overlay-preview.loaded .viewport iframe { + opacity: 1; + visibility: visible; + } + + .reveal > .overlay.overlay-preview.loaded .viewport-inner { + position: absolute; + z-index: -1; + left: 0; + top: 45%; + width: 100%; + text-align: center; + letter-spacing: normal; + } + .reveal > .overlay.overlay-preview .x-frame-error { + opacity: 0; + transition: opacity 0.3s ease 0.3s; + } + .reveal > .overlay.overlay-preview.loaded .x-frame-error { + opacity: 1; + } + + .reveal > .overlay.overlay-preview.loaded .spinner { + opacity: 0; + visibility: hidden; + transform: scale(0.2); + } + + .reveal > .overlay.overlay-help .viewport { + overflow: auto; + color: #fff; + } + + .reveal > .overlay.overlay-help .viewport .viewport-inner { + width: 600px; + margin: auto; + padding: 20px 20px 80px 20px; + text-align: center; + letter-spacing: normal; + } + + .reveal > .overlay.overlay-help .viewport .viewport-inner .title { + font-size: 20px; + } + + .reveal > .overlay.overlay-help .viewport .viewport-inner table { + border: 1px solid #fff; + border-collapse: collapse; + font-size: 16px; + } + + .reveal > .overlay.overlay-help .viewport .viewport-inner table th, + .reveal > .overlay.overlay-help .viewport .viewport-inner table td { + width: 200px; + padding: 14px; + border: 1px solid #fff; + vertical-align: middle; + } + + .reveal > .overlay.overlay-help .viewport .viewport-inner table th { + padding-top: 20px; + padding-bottom: 20px; + } + + +/********************************************* + * PLAYBACK COMPONENT + *********************************************/ + +.reveal .playback { + position: absolute; + left: 15px; + bottom: 20px; + z-index: 30; + cursor: pointer; + transition: all 400ms ease; + -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); +} + +.reveal.overview .playback { + opacity: 0; + visibility: hidden; +} + + +/********************************************* + * CODE HIGHLGIHTING + *********************************************/ + +.reveal .hljs { + min-height: 100%; +} + +.reveal .hljs table { + margin: initial; +} + +.reveal .hljs-ln-code, +.reveal .hljs-ln-numbers { + padding: 0; + border: 0; +} + +.reveal .hljs-ln-numbers { + opacity: 0.6; + padding-right: 0.75em; + text-align: right; + vertical-align: top; +} + +.reveal .hljs.has-highlights tr:not(.highlight-line) { + opacity: 0.4; +} + +.reveal .hljs.has-highlights.fragment { + transition: all .2s ease; +} + +.reveal .hljs:not(:first-child).fragment { + position: absolute; + top: 0; + left: 0; + width: 100%; + box-sizing: border-box; +} + +.reveal pre[data-auto-animate-target] { + overflow: hidden; +} +.reveal pre[data-auto-animate-target] code { + height: 100%; +} + + +/********************************************* + * ROLLING LINKS + *********************************************/ + +.reveal .roll { + display: inline-block; + line-height: 1.2; + overflow: hidden; + + vertical-align: top; + perspective: 400px; + perspective-origin: 50% 50%; +} + .reveal .roll:hover { + background: none; + text-shadow: none; + } +.reveal .roll span { + display: block; + position: relative; + padding: 0 2px; + + pointer-events: none; + transition: all 400ms ease; + transform-origin: 50% 0%; + transform-style: preserve-3d; + backface-visibility: hidden; +} + .reveal .roll:hover span { + background: rgba(0,0,0,0.5); + transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); + } +.reveal .roll span:after { + content: attr(data-title); + + display: block; + position: absolute; + left: 0; + top: 0; + padding: 0 2px; + backface-visibility: hidden; + transform-origin: 50% 0%; + transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg ); +} + + +/********************************************* + * SPEAKER NOTES + *********************************************/ + +$notesWidthPercent: 25%; + +// Hide on-page notes +.reveal aside.notes { + display: none; +} + +// An interface element that can optionally be used to show the +// speaker notes to all viewers, on top of the presentation +.reveal .speaker-notes { + display: none; + position: absolute; + width: math.div($notesWidthPercent, (1 - math.div($notesWidthPercent,100))) * 1%; + height: 100%; + top: 0; + left: 100%; + padding: 14px 18px 14px 18px; + z-index: 1; + font-size: 18px; + line-height: 1.4; + border: 1px solid rgba( 0, 0, 0, 0.05 ); + color: #222; + background-color: #f5f5f5; + overflow: auto; + box-sizing: border-box; + text-align: left; + font-family: Helvetica, sans-serif; + -webkit-overflow-scrolling: touch; + + .notes-placeholder { + color: #ccc; + font-style: italic; + } + + &:focus { + outline: none; + } + + &:before { + content: 'Speaker notes'; + display: block; + margin-bottom: 10px; + opacity: 0.5; + } +} + + +.reveal.show-notes { + max-width: 100% - $notesWidthPercent; + overflow: visible; +} + +.reveal.show-notes .speaker-notes { + display: block; +} + +@media screen and (min-width: 1600px) { + .reveal .speaker-notes { + font-size: 20px; + } +} + +@media screen and (max-width: 1024px) { + .reveal.show-notes { + border-left: 0; + max-width: none; + max-height: 70%; + max-height: 70vh; + overflow: visible; + } + + .reveal.show-notes .speaker-notes { + top: 100%; + left: 0; + width: 100%; + height: 30vh; + border: 0; + } +} + +@media screen and (max-width: 600px) { + .reveal.show-notes { + max-height: 60%; + max-height: 60vh; + } + + .reveal.show-notes .speaker-notes { + top: 100%; + height: 40vh; + } + + .reveal .speaker-notes { + font-size: 14px; + } +} + + +/********************************************* + * JUMP-TO-SLIDE COMPONENT + *********************************************/ + + .reveal .jump-to-slide { + position: absolute; + top: 15px; + left: 15px; + z-index: 30; + font-size: 32px; + -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); +} + +.reveal .jump-to-slide-input { + background: transparent; + padding: 8px; + font-size: inherit; + color: currentColor; + border: 0; +} +.reveal .jump-to-slide-input::placeholder { + color: currentColor; + opacity: 0.5; +} + +.reveal.has-dark-background .jump-to-slide-input { + color: #fff; +} +.reveal.has-light-background .jump-to-slide-input { + color: #222; +} + +.reveal .jump-to-slide-input:focus { + outline: none; +} + + +/********************************************* + * ZOOM PLUGIN + *********************************************/ + +.zoomed .reveal *, +.zoomed .reveal *:before, +.zoomed .reveal *:after { + backface-visibility: visible !important; +} + +.zoomed .reveal .progress, +.zoomed .reveal .controls { + opacity: 0; +} + +.zoomed .reveal .roll span { + background: none; +} + +.zoomed .reveal .roll span:after { + visibility: hidden; +} + + +/********************************************* + * SCROLL VIEW + *********************************************/ +.reveal-viewport.loading-scroll-mode { + visibility: hidden; +} + +.reveal-viewport.reveal-scroll { + & { + margin: 0 auto !important; + overflow: auto; + overflow-x: hidden; + overflow-y: auto; + z-index: 1; + + --r-scrollbar-width: 7px; + --r-scrollbar-trigger-size: 5px; + --r-controls-spacing: 8px; + } + + @media screen and (max-width: 500px) { + --r-scrollbar-width: 3px; + --r-scrollbar-trigger-size: 3px; + } + + .controls, + .progress, + .playback, + .backgrounds, + .slide-number, + .speaker-notes { + display: none !important; + } + + .reveal { + overflow: visible; + touch-action: manipulation; + } + + .slides { + position: static; + pointer-events: initial; + + left: auto; + top: auto; + width: 100% !important; + margin: 0 !important; + padding: 0 !important; + + overflow: visible; + display: block; + + perspective: none; + perspective-origin: 50% 50%; + } + + .scroll-page { + position: relative; + width: 100%; + height: calc(var(--page-height) + var(--page-scroll-padding)); + z-index: 1; + overflow: visible; + } + + .scroll-page-sticky { + position: sticky; + height: var(--page-height); + top: 0px; + } + + .scroll-page-content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + } + + .scroll-page section { + visibility: visible !important; + display: block !important; + position: absolute !important; + width: var(--slide-width) !important; + height: var(--slide-height) !important; + top: 50% !important; + left: 50% !important; + opacity: 1 !important; + transform: scale(var(--slide-scale)) translate(-50%, -50%) !important; + transform-style: flat !important; + transform-origin: 0 0 !important; + } + + .slide-background { + display: block !important; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: auto !important; + visibility: visible; + opacity: 1; + touch-action: manipulation; + } +} + +// Chromium +.reveal-viewport.reveal-scroll[data-scrollbar="true"]::-webkit-scrollbar, +.reveal-viewport.reveal-scroll[data-scrollbar="auto"]::-webkit-scrollbar { + display: none; +} + +// Firefox +.reveal-viewport.reveal-scroll[data-scrollbar="true"], +.reveal-viewport.reveal-scroll[data-scrollbar="auto"] { + scrollbar-width: none; +} + +.reveal.has-dark-background, +.reveal-viewport.has-dark-background { + --r-overlay-element-bg-color: 240, 240, 240; + --r-overlay-element-fg-color: 0, 0, 0; +} +.reveal.has-light-background, +.reveal-viewport.has-light-background { + --r-overlay-element-bg-color: 0, 0, 0; + --r-overlay-element-fg-color: 240, 240, 240; +} + +.reveal-viewport.reveal-scroll .scrollbar { + position: sticky; + top: 50%; + z-index: 20; + opacity: 0; + transition: all 0.3s ease; + + &.visible, + &:hover { + opacity: 1; + } + + .scrollbar-inner { + position: absolute; + width: var(--r-scrollbar-width); + height: calc(var(--viewport-height) - var(--r-controls-spacing) * 2); + right: var(--r-controls-spacing); + top: 0; + transform: translateY(-50%); + border-radius: var(--r-scrollbar-width); + z-index: 10; + } + + .scrollbar-playhead { + position: absolute; + width: var(--r-scrollbar-width); + height: var(--r-scrollbar-width); + top: 0; + left: 0; + border-radius: var(--r-scrollbar-width); + background-color: rgba(var(--r-overlay-element-bg-color), 1); + z-index: 11; + transition: background-color 0.2s ease; + } + + .scrollbar-slide { + position: absolute; + width: 100%; + background-color: rgba(var(--r-overlay-element-bg-color), 0.2); + box-shadow: 0 0 0px 1px rgba(var(--r-overlay-element-fg-color), 0.1); + border-radius: var(--r-scrollbar-width); + transition: background-color 0.2s ease; + } + + // Hit area + .scrollbar-slide:after { + content: ''; + position: absolute; + width: 200%; + height: 100%; + top: 0; + left: -50%; + background: rgba( 0, 0, 0, 0 ); + z-index: -1; + } + + .scrollbar-slide:hover, + .scrollbar-slide.active { + background-color: rgba(var(--r-overlay-element-bg-color), 0.4); + } + + .scrollbar-trigger { + position: absolute; + width: 100%; + transition: background-color 0.2s ease; + } + + .scrollbar-slide.active.has-triggers { + background-color: rgba(var(--r-overlay-element-bg-color), 0.4); + z-index: 10; + } + + .scrollbar-slide.active .scrollbar-trigger:after { + content: ''; + position: absolute; + width: var(--r-scrollbar-trigger-size); + height: var(--r-scrollbar-trigger-size); + border-radius: 20px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: rgba(var(--r-overlay-element-bg-color), 1); + transition: transform 0.2s ease, opacity 0.2s ease; + opacity: 0.4; + } + + .scrollbar-slide.active .scrollbar-trigger.active:after, + .scrollbar-slide.active .scrollbar-trigger.active ~ .scrollbar-trigger:after { + opacity: 1; + } + + .scrollbar-slide.active .scrollbar-trigger ~ .scrollbar-trigger.active:after { + transform: translate(calc( var(--r-scrollbar-width) * -2), 0); + background-color: rgba(var(--r-overlay-element-bg-color), 1); + } +} + + +/********************************************* + * PRINT STYLES + *********************************************/ + +@import 'print/pdf.scss'; +@import 'print/paper.scss'; + diff --git a/reveal.js/css/theme/README.md b/reveal.js/css/theme/README.md new file mode 100644 index 0000000..30916c4 --- /dev/null +++ b/reveal.js/css/theme/README.md @@ -0,0 +1,21 @@ +## Dependencies + +Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment installed before proceeding: https://revealjs.com/installation/#full-setup + +## Creating a Theme + +To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled from Sass to CSS (see the [gulpfile](https://github.com/hakimel/reveal.js/blob/master/gulpfile.js)) when you run `npm run build -- css-themes`. + +Each theme file does four things in the following order: + +1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)** +Shared utility functions. + +2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)** +Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3. + +3. **Override** +This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding any selectors and styles you please. + +4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)** +The template theme file which will generate final CSS output based on the currently defined variables. diff --git a/reveal.js/css/theme/source/beige.scss b/reveal.js/css/theme/source/beige.scss new file mode 100644 index 0000000..7598b94 --- /dev/null +++ b/reveal.js/css/theme/source/beige.scss @@ -0,0 +1,44 @@ +/** + * Beige theme for reveal.js. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Include theme-specific fonts +@import url(./fonts/league-gothic/league-gothic.css); +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); + + +// Override theme settings (see ../template/settings.scss) +$mainColor: #333; +$headingColor: #333; +$headingTextShadow: none; +$backgroundColor: #f7f3de; +$linkColor: #8b743d; +$linkColorHover: lighten( $linkColor, 20% ); +$selectionBackgroundColor: rgba(79, 64, 28, 0.99); +$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); + +$overlayElementBgColor: 0, 0, 0; +$overlayElementFgColor: 240, 240, 240; + +// Background generator +@mixin bodyBackground() { + @include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) ); +} + +// Change text colors against dark slide backgrounds +@include dark-bg-text-color(#fff); + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- diff --git a/reveal.js/css/theme/source/black-contrast.scss b/reveal.js/css/theme/source/black-contrast.scss new file mode 100644 index 0000000..9e1a2ca --- /dev/null +++ b/reveal.js/css/theme/source/black-contrast.scss @@ -0,0 +1,49 @@ +/** + * Black compact & high contrast reveal.js theme, with headers not in capitals. + * + * By Peter Kehl. Based on black.(s)css by Hakim El Hattab, http://hakim.se + * + * - Keep the source similar to black.css - for easy comparison. + * - $mainFontSize controls code blocks, too (although under some ratio). + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + +// Include theme-specific fonts +@import url(./fonts/source-sans-pro/source-sans-pro.css); + + +// Override theme settings (see ../template/settings.scss) +$backgroundColor: #000000; + +$mainColor: #fff; +$headingColor: #fff; + +$mainFontSize: 42px; +$mainFont: 'Source Sans Pro', Helvetica, sans-serif; +$headingFont: 'Source Sans Pro', Helvetica, sans-serif; +$headingTextShadow: none; +$headingLetterSpacing: normal; +$headingTextTransform: uppercase; +$headingFontWeight: 600; +$linkColor: #42affa; +$linkColorHover: lighten( $linkColor, 15% ); +$selectionBackgroundColor: lighten( $linkColor, 25% ); + +$heading1Size: 2.5em; +$heading2Size: 1.6em; +$heading3Size: 1.3em; +$heading4Size: 1.0em; + +// Change text colors against light slide backgrounds +@include light-bg-text-color(#000); + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- diff --git a/reveal.js/css/theme/source/black.scss b/reveal.js/css/theme/source/black.scss new file mode 100644 index 0000000..7c655c4 --- /dev/null +++ b/reveal.js/css/theme/source/black.scss @@ -0,0 +1,46 @@ +/** + * Black theme for reveal.js. This is the opposite of the 'white' theme. + * + * By Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + +// Include theme-specific fonts +@import url(./fonts/source-sans-pro/source-sans-pro.css); + + +// Override theme settings (see ../template/settings.scss) +$backgroundColor: #191919; + +$mainColor: #fff; +$headingColor: #fff; + +$mainFontSize: 42px; +$mainFont: 'Source Sans Pro', Helvetica, sans-serif; +$headingFont: 'Source Sans Pro', Helvetica, sans-serif; +$headingTextShadow: none; +$headingLetterSpacing: normal; +$headingTextTransform: uppercase; +$headingFontWeight: 600; +$linkColor: #42affa; +$linkColorHover: lighten( $linkColor, 15% ); +$selectionBackgroundColor: rgba( $linkColor, 0.75 ); + +$heading1Size: 2.5em; +$heading2Size: 1.6em; +$heading3Size: 1.3em; +$heading4Size: 1.0em; + +// Change text colors against light slide backgrounds +@include light-bg-text-color(#222); + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- diff --git a/reveal.js/css/theme/source/blood.scss b/reveal.js/css/theme/source/blood.scss new file mode 100644 index 0000000..b5a8679 --- /dev/null +++ b/reveal.js/css/theme/source/blood.scss @@ -0,0 +1,87 @@ +/** + * Blood theme for reveal.js + * Author: Walther http://github.com/Walther + * + * Designed to be used with highlight.js theme + * "monokai_sublime.css" available from + * https://github.com/isagalaev/highlight.js/ + * + * For other themes, change $codeBackground accordingly. + * + */ + + // Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + +// Include theme-specific fonts + +@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic); + +// Colors used in the theme +$blood: #a23; +$coal: #222; +$codeBackground: #23241f; + +$backgroundColor: $coal; + +// Main text +$mainFont: Ubuntu, 'sans-serif'; +$mainColor: #eee; + +// Headings +$headingFont: Ubuntu, 'sans-serif'; +$headingTextShadow: 2px 2px 2px $coal; + +// h1 shadow, borrowed humbly from +// (c) Default theme by Hakim El Hattab +$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); + +// Links +$linkColor: $blood; +$linkColorHover: lighten( $linkColor, 20% ); + +// Text selection +$selectionBackgroundColor: $blood; +$selectionColor: #fff; + +// Change text colors against dark slide backgrounds +@include light-bg-text-color(#222); + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- + +// some overrides after theme template import + +.reveal p { + font-weight: 300; + text-shadow: 1px 1px $coal; +} + +section.has-light-background { + p, h1, h2, h3, h4 { + text-shadow: none; + } +} + +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + font-weight: 700; +} + +.reveal p code { + background-color: $codeBackground; + display: inline-block; + border-radius: 7px; +} + +.reveal small code { + vertical-align: baseline; +} \ No newline at end of file diff --git a/reveal.js/css/theme/source/dracula.scss b/reveal.js/css/theme/source/dracula.scss new file mode 100644 index 0000000..ae968b8 --- /dev/null +++ b/reveal.js/css/theme/source/dracula.scss @@ -0,0 +1,106 @@ +/** + * Dracula Dark theme for reveal.js. + * Based on https://draculatheme.com + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Include theme-specific fonts +$systemFontsSansSerif: -apple-system, + BlinkMacSystemFont, + avenir next, + avenir, + segoe ui, + helvetica neue, + helvetica, + Cantarell, + Ubuntu, + roboto, + noto, + arial, + sans-serif; +$systemFontsMono: Menlo, + Consolas, + Monaco, + Liberation Mono, + Lucida Console, + monospace; + +/** + * Dracula colors by Zeno Rocha + * https://draculatheme.com/contribute + */ +html * { + color-profile: sRGB; + rendering-intent: auto; +} + +$background: #282A36; +$foreground: #F8F8F2; +$selection: #44475A; +$comment: #6272A4; +$red: #FF5555; +$orange: #FFB86C; +$yellow: #F1FA8C; +$green: #50FA7B; +$purple: #BD93F9; +$cyan: #8BE9FD; +$pink: #FF79C6; + + + +// Override theme settings (see ../template/settings.scss) +$mainColor: $foreground; +$headingColor: $purple; +$headingTextShadow: none; +$headingTextTransform: none; +$backgroundColor: $background; +$linkColor: $pink; +$linkColorHover: $cyan; +$selectionBackgroundColor: $selection; +$inlineCodeColor: $green; +$listBulletColor: $cyan; + +$mainFont: $systemFontsSansSerif; +$codeFont: "Fira Code", $systemFontsMono; + +// Change text colors against light slide backgrounds +@include light-bg-text-color($background); + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- + +// Define additional color effects based on Dracula spec +// https://spec.draculatheme.com/ +:root { + --r-bold-color: #{$orange}; + --r-italic-color: #{$yellow}; + --r-inline-code-color: #{$inlineCodeColor}; + --r-list-bullet-color: #{$listBulletColor}; +} + +.reveal { + strong, b { + color: var(--r-bold-color); + } + em, i, blockquote { + color: var(--r-italic-color); + } + code { + color: var(--r-inline-code-color); + } + // Dracula colored list bullets and numbers + ul, ol { + li::marker { + color: var(--r-list-bullet-color); + } + } +} + diff --git a/reveal.js/css/theme/source/league.scss b/reveal.js/css/theme/source/league.scss new file mode 100644 index 0000000..ee01258 --- /dev/null +++ b/reveal.js/css/theme/source/league.scss @@ -0,0 +1,36 @@ +/** + * League theme for reveal.js. + * + * This was the default theme pre-3.0.0. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Include theme-specific fonts +@import url(./fonts/league-gothic/league-gothic.css); +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); + +// Override theme settings (see ../template/settings.scss) +$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); +$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); + +// Background generator +@mixin bodyBackground() { + @include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) ); +} + +// Change text colors against light slide backgrounds +@include light-bg-text-color(#222); + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- diff --git a/reveal.js/css/theme/source/moon.scss b/reveal.js/css/theme/source/moon.scss new file mode 100644 index 0000000..ff2074a --- /dev/null +++ b/reveal.js/css/theme/source/moon.scss @@ -0,0 +1,58 @@ +/** + * Solarized Dark theme for reveal.js. + * Author: Achim Staebler + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Include theme-specific fonts +@import url(./fonts/league-gothic/league-gothic.css); +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); + +/** + * Solarized colors by Ethan Schoonover + */ +html * { + color-profile: sRGB; + rendering-intent: auto; +} + +// Solarized colors +$base03: #002b36; +$base02: #073642; +$base01: #586e75; +$base00: #657b83; +$base0: #839496; +$base1: #93a1a1; +$base2: #eee8d5; +$base3: #fdf6e3; +$yellow: #b58900; +$orange: #cb4b16; +$red: #dc322f; +$magenta: #d33682; +$violet: #6c71c4; +$blue: #268bd2; +$cyan: #2aa198; +$green: #859900; + +// Override theme settings (see ../template/settings.scss) +$mainColor: $base1; +$headingColor: $base2; +$headingTextShadow: none; +$backgroundColor: $base03; +$linkColor: $blue; +$linkColorHover: lighten( $linkColor, 20% ); +$selectionBackgroundColor: $magenta; + +// Change text colors against light slide backgrounds +@include light-bg-text-color(#222); + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- diff --git a/reveal.js/css/theme/source/night.scss b/reveal.js/css/theme/source/night.scss new file mode 100644 index 0000000..98a2062 --- /dev/null +++ b/reveal.js/css/theme/source/night.scss @@ -0,0 +1,37 @@ +/** + * Black theme for reveal.js. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + +// Include theme-specific fonts +@import url(https://fonts.googleapis.com/css?family=Montserrat:700); +@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); + + +// Override theme settings (see ../template/settings.scss) +$backgroundColor: #111; + +$mainFont: 'Open Sans', sans-serif; +$linkColor: #e7ad52; +$linkColorHover: lighten( $linkColor, 20% ); +$headingFont: 'Montserrat', Impact, sans-serif; +$headingTextShadow: none; +$headingLetterSpacing: -0.03em; +$headingTextTransform: none; +$selectionBackgroundColor: #e7ad52; + +// Change text colors against light slide backgrounds +@include light-bg-text-color(#222); + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/reveal.js/css/theme/source/serif.scss b/reveal.js/css/theme/source/serif.scss new file mode 100644 index 0000000..babec4d --- /dev/null +++ b/reveal.js/css/theme/source/serif.scss @@ -0,0 +1,41 @@ +/** + * A simple theme for reveal.js presentations, similar + * to the default theme. The accent color is brown. + * + * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed. + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Override theme settings (see ../template/settings.scss) +$mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; +$mainColor: #000; +$headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; +$headingColor: #383D3D; +$headingTextShadow: none; +$headingTextTransform: none; +$backgroundColor: #F0F1EB; +$linkColor: #51483D; +$linkColorHover: lighten( $linkColor, 20% ); +$selectionBackgroundColor: #26351C; + +$overlayElementBgColor: 0, 0, 0; +$overlayElementFgColor: 240, 240, 240; + +.reveal a { + line-height: 1.3em; +} + +// Change text colors against dark slide backgrounds +@include dark-bg-text-color(#fff); + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- diff --git a/reveal.js/css/theme/source/simple.scss b/reveal.js/css/theme/source/simple.scss new file mode 100644 index 0000000..51a21af --- /dev/null +++ b/reveal.js/css/theme/source/simple.scss @@ -0,0 +1,43 @@ +/** + * A simple theme for reveal.js presentations, similar + * to the default theme. The accent color is darkblue. + * + * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. + * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Include theme-specific fonts +@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); + + +// Override theme settings (see ../template/settings.scss) +$mainFont: 'Lato', sans-serif; +$mainColor: #000; +$headingFont: 'News Cycle', Impact, sans-serif; +$headingColor: #000; +$headingTextShadow: none; +$headingTextTransform: none; +$backgroundColor: #fff; +$linkColor: #00008B; +$linkColorHover: lighten( $linkColor, 20% ); +$selectionBackgroundColor: rgba(0, 0, 0, 0.99); + +$overlayElementBgColor: 0, 0, 0; +$overlayElementFgColor: 240, 240, 240; + +// Change text colors against dark slide backgrounds +@include dark-bg-text-color(#fff); + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/reveal.js/css/theme/source/sky.scss b/reveal.js/css/theme/source/sky.scss new file mode 100644 index 0000000..457e9e5 --- /dev/null +++ b/reveal.js/css/theme/source/sky.scss @@ -0,0 +1,52 @@ +/** + * Sky theme for reveal.js. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Include theme-specific fonts +@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); +@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); + + +// Override theme settings (see ../template/settings.scss) +$mainFont: 'Open Sans', sans-serif; +$mainColor: #333; +$headingFont: 'Quicksand', sans-serif; +$headingColor: #333; +$headingLetterSpacing: -0.08em; +$headingTextShadow: none; +$backgroundColor: #f7fbfc; +$linkColor: #3b759e; +$linkColorHover: lighten( $linkColor, 20% ); +$selectionBackgroundColor: #134674; + +$overlayElementBgColor: 0, 0, 0; +$overlayElementFgColor: 240, 240, 240; + +// Fix links so they are not cut off +.reveal a { + line-height: 1.3em; +} + +// Background generator +@mixin bodyBackground() { + @include radial-gradient( #add9e4, #f7fbfc ); +} + +// Change text colors against dark slide backgrounds +@include dark-bg-text-color(#fff); + + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- diff --git a/reveal.js/css/theme/source/solarized.scss b/reveal.js/css/theme/source/solarized.scss new file mode 100644 index 0000000..f325345 --- /dev/null +++ b/reveal.js/css/theme/source/solarized.scss @@ -0,0 +1,66 @@ +/** + * Solarized Light theme for reveal.js. + * Author: Achim Staebler + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Include theme-specific fonts +@import url(./fonts/league-gothic/league-gothic.css); +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); + + +/** + * Solarized colors by Ethan Schoonover + */ +html * { + color-profile: sRGB; + rendering-intent: auto; +} + +// Solarized colors +$base03: #002b36; +$base02: #073642; +$base01: #586e75; +$base00: #657b83; +$base0: #839496; +$base1: #93a1a1; +$base2: #eee8d5; +$base3: #fdf6e3; +$yellow: #b58900; +$orange: #cb4b16; +$red: #dc322f; +$magenta: #d33682; +$violet: #6c71c4; +$blue: #268bd2; +$cyan: #2aa198; +$green: #859900; + +// Override theme settings (see ../template/settings.scss) +$mainColor: $base00; +$headingColor: $base01; +$headingTextShadow: none; +$backgroundColor: $base3; +$linkColor: $blue; +$linkColorHover: lighten( $linkColor, 20% ); +$selectionBackgroundColor: $magenta; + +$overlayElementBgColor: 0, 0, 0; +$overlayElementFgColor: 240, 240, 240; + +// Background generator +// @mixin bodyBackground() { +// @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) ); +// } + + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- diff --git a/reveal.js/css/theme/source/white-contrast.scss b/reveal.js/css/theme/source/white-contrast.scss new file mode 100644 index 0000000..e22007e --- /dev/null +++ b/reveal.js/css/theme/source/white-contrast.scss @@ -0,0 +1,52 @@ +/** + * White compact & high contrast reveal.js theme, with headers not in capitals. + * + * By Peter Kehl. Based on white.(s)css by Hakim El Hattab, http://hakim.se + * + * - Keep the source similar to black.css - for easy comparison. + * - $mainFontSize controls code blocks, too (although under some ratio). + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + +// Include theme-specific fonts +@import url(./fonts/source-sans-pro/source-sans-pro.css); + + +// Override theme settings (see ../template/settings.scss) +$backgroundColor: #fff; + +$mainColor: #000; +$headingColor: #000; + +$mainFontSize: 42px; +$mainFont: 'Source Sans Pro', Helvetica, sans-serif; +$headingFont: 'Source Sans Pro', Helvetica, sans-serif; +$headingTextShadow: none; +$headingLetterSpacing: normal; +$headingTextTransform: uppercase; +$headingFontWeight: 600; +$linkColor: #2a76dd; +$linkColorHover: lighten( $linkColor, 15% ); +$selectionBackgroundColor: lighten( $linkColor, 25% ); + +$heading1Size: 2.5em; +$heading2Size: 1.6em; +$heading3Size: 1.3em; +$heading4Size: 1.0em; + +$overlayElementBgColor: 0, 0, 0; +$overlayElementFgColor: 240, 240, 240; + +// Change text colors against dark slide backgrounds +@include dark-bg-text-color(#fff); + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- diff --git a/reveal.js/css/theme/source/white.scss b/reveal.js/css/theme/source/white.scss new file mode 100644 index 0000000..a2b1292 --- /dev/null +++ b/reveal.js/css/theme/source/white.scss @@ -0,0 +1,49 @@ +/** + * White theme for reveal.js. This is the opposite of the 'black' theme. + * + * By Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + +// Include theme-specific fonts +@import url(./fonts/source-sans-pro/source-sans-pro.css); + + +// Override theme settings (see ../template/settings.scss) +$backgroundColor: #fff; + +$mainColor: #222; +$headingColor: #222; + +$mainFontSize: 42px; +$mainFont: 'Source Sans Pro', Helvetica, sans-serif; +$headingFont: 'Source Sans Pro', Helvetica, sans-serif; +$headingTextShadow: none; +$headingLetterSpacing: normal; +$headingTextTransform: uppercase; +$headingFontWeight: 600; +$linkColor: #2a76dd; +$linkColorHover: lighten( $linkColor, 15% ); +$selectionBackgroundColor: lighten( $linkColor, 25% ); + +$heading1Size: 2.5em; +$heading2Size: 1.6em; +$heading3Size: 1.3em; +$heading4Size: 1.0em; + +$overlayElementBgColor: 0, 0, 0; +$overlayElementFgColor: 240, 240, 240; + +// Change text colors against dark slide backgrounds +@include dark-bg-text-color(#fff); + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- diff --git a/reveal.js/css/theme/template/exposer.scss b/reveal.js/css/theme/template/exposer.scss new file mode 100644 index 0000000..2e9288d --- /dev/null +++ b/reveal.js/css/theme/template/exposer.scss @@ -0,0 +1,30 @@ +// Exposes theme's variables for easy re-use in CSS for plugin authors + +:root { + --r-background-color: #{$backgroundColor}; + --r-main-font: #{$mainFont}; + --r-main-font-size: #{$mainFontSize}; + --r-main-color: #{$mainColor}; + --r-block-margin: #{$blockMargin}; + --r-heading-margin: #{$headingMargin}; + --r-heading-font: #{$headingFont}; + --r-heading-color: #{$headingColor}; + --r-heading-line-height: #{$headingLineHeight}; + --r-heading-letter-spacing: #{$headingLetterSpacing}; + --r-heading-text-transform: #{$headingTextTransform}; + --r-heading-text-shadow: #{$headingTextShadow}; + --r-heading-font-weight: #{$headingFontWeight}; + --r-heading1-text-shadow: #{$heading1TextShadow}; + --r-heading1-size: #{$heading1Size}; + --r-heading2-size: #{$heading2Size}; + --r-heading3-size: #{$heading3Size}; + --r-heading4-size: #{$heading4Size}; + --r-code-font: #{$codeFont}; + --r-link-color: #{$linkColor}; + --r-link-color-dark: #{darken($linkColor , 15% )}; + --r-link-color-hover: #{$linkColorHover}; + --r-selection-background-color: #{$selectionBackgroundColor}; + --r-selection-color: #{$selectionColor}; + --r-overlay-element-bg-color: #{$overlayElementBgColor}; + --r-overlay-element-fg-color: #{$overlayElementFgColor}; +} diff --git a/reveal.js/css/theme/template/mixins.scss b/reveal.js/css/theme/template/mixins.scss new file mode 100644 index 0000000..17a3db5 --- /dev/null +++ b/reveal.js/css/theme/template/mixins.scss @@ -0,0 +1,45 @@ +@mixin vertical-gradient( $top, $bottom ) { + background: $top; + background: -moz-linear-gradient( top, $top 0%, $bottom 100% ); + background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) ); + background: -webkit-linear-gradient( top, $top 0%, $bottom 100% ); + background: -o-linear-gradient( top, $top 0%, $bottom 100% ); + background: -ms-linear-gradient( top, $top 0%, $bottom 100% ); + background: linear-gradient( top, $top 0%, $bottom 100% ); +} + +@mixin horizontal-gradient( $top, $bottom ) { + background: $top; + background: -moz-linear-gradient( left, $top 0%, $bottom 100% ); + background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) ); + background: -webkit-linear-gradient( left, $top 0%, $bottom 100% ); + background: -o-linear-gradient( left, $top 0%, $bottom 100% ); + background: -ms-linear-gradient( left, $top 0%, $bottom 100% ); + background: linear-gradient( left, $top 0%, $bottom 100% ); +} + +@mixin radial-gradient( $outer, $inner, $type: circle ) { + background: $outer; + background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) ); + background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: radial-gradient( center, $type cover, $inner 0%, $outer 100% ); +} + +@mixin light-bg-text-color( $color ) { + section.has-light-background { + &, h1, h2, h3, h4, h5, h6 { + color: $color; + } + } +} + +@mixin dark-bg-text-color( $color ) { + section.has-dark-background { + &, h1, h2, h3, h4, h5, h6 { + color: $color; + } + } +} \ No newline at end of file diff --git a/reveal.js/css/theme/template/settings.scss b/reveal.js/css/theme/template/settings.scss new file mode 100644 index 0000000..3d54ac8 --- /dev/null +++ b/reveal.js/css/theme/template/settings.scss @@ -0,0 +1,50 @@ +// Base settings for all themes that can optionally be +// overridden by the super-theme + +// Background of the presentation +$backgroundColor: #2b2b2b; + +// Primary/body text +$mainFont: 'Lato', sans-serif; +$mainFontSize: 40px; +$mainColor: #eee; + +// Vertical spacing between blocks of text +$blockMargin: 20px; + +// Headings +$headingMargin: 0 0 $blockMargin 0; +$headingFont: 'League Gothic', Impact, sans-serif; +$headingColor: #eee; +$headingLineHeight: 1.2; +$headingLetterSpacing: normal; +$headingTextTransform: uppercase; +$headingTextShadow: none; +$headingFontWeight: normal; +$heading1TextShadow: $headingTextShadow; + +$heading1Size: 3.77em; +$heading2Size: 2.11em; +$heading3Size: 1.55em; +$heading4Size: 1.00em; + +$codeFont: monospace; + +// Links and actions +$linkColor: #13DAEC; +$linkColorHover: lighten( $linkColor, 20% ); + +// Text selection +$selectionBackgroundColor: #FF5E99; +$selectionColor: #fff; + +// Colors used for UI elements that are overlaid on top of +// the presentation +$overlayElementBgColor: 240, 240, 240; +$overlayElementFgColor: 0, 0, 0; + +// Generates the presentation background, can be overridden +// to return a background image or gradient +@mixin bodyBackground() { + background: $backgroundColor; +} diff --git a/reveal.js/css/theme/template/theme.scss b/reveal.js/css/theme/template/theme.scss new file mode 100644 index 0000000..bc377d3 --- /dev/null +++ b/reveal.js/css/theme/template/theme.scss @@ -0,0 +1,331 @@ +// Base theme template for reveal.js + +/********************************************* + * GLOBAL STYLES + *********************************************/ + +@import "./exposer"; + +.reveal-viewport { + @include bodyBackground(); + background-color: var(--r-background-color); +} + +.reveal { + font-family: var(--r-main-font); + font-size: var(--r-main-font-size); + font-weight: normal; + color: var(--r-main-color); +} + +.reveal ::selection { + color: var(--r-selection-color); + background: var(--r-selection-background-color); + text-shadow: none; +} + +.reveal ::-moz-selection { + color: var(--r-selection-color); + background: var(--r-selection-background-color); + text-shadow: none; +} + +.reveal .slides section, +.reveal .slides section>section { + line-height: 1.3; + font-weight: inherit; +} + +/********************************************* + * HEADERS + *********************************************/ + +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: var(--r-heading-margin); + color: var(--r-heading-color); + + font-family: var(--r-heading-font); + font-weight: var(--r-heading-font-weight); + line-height: var(--r-heading-line-height); + letter-spacing: var(--r-heading-letter-spacing); + + text-transform: var(--r-heading-text-transform); + text-shadow: var(--r-heading-text-shadow); + + word-wrap: break-word; +} + +.reveal h1 {font-size: var(--r-heading1-size); } +.reveal h2 {font-size: var(--r-heading2-size); } +.reveal h3 {font-size: var(--r-heading3-size); } +.reveal h4 {font-size: var(--r-heading4-size); } + +.reveal h1 { + text-shadow: var(--r-heading1-text-shadow); +} + + +/********************************************* + * OTHER + *********************************************/ + +.reveal p { + margin: var(--r-block-margin) 0; + line-height: 1.3; +} + +/* Remove trailing margins after titles */ +.reveal h1:last-child, +.reveal h2:last-child, +.reveal h3:last-child, +.reveal h4:last-child, +.reveal h5:last-child, +.reveal h6:last-child { + margin-bottom: 0; +} + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, +.reveal video, +.reveal iframe { + max-width: 95%; + max-height: 95%; +} +.reveal strong, +.reveal b { + font-weight: bold; +} + +.reveal em { + font-style: italic; +} + +.reveal ol, +.reveal dl, +.reveal ul { + display: inline-block; + + text-align: left; + margin: 0 0 0 1em; +} + +.reveal ol { + list-style-type: decimal; +} + +.reveal ul { + list-style-type: disc; +} + +.reveal ul ul { + list-style-type: square; +} + +.reveal ul ul ul { + list-style-type: circle; +} + +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { + display: block; + margin-left: 40px; +} + +.reveal dt { + font-weight: bold; +} + +.reveal dd { + margin-left: 40px; +} + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: var(--r-block-margin) auto; + padding: 5px; + + font-style: italic; + background: rgba(255, 255, 255, 0.05); + box-shadow: 0px 0px 2px rgba(0,0,0,0.2); +} + .reveal blockquote p:first-child, + .reveal blockquote p:last-child { + display: inline-block; + } + +.reveal q { + font-style: italic; +} + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: var(--r-block-margin) auto; + + text-align: left; + font-size: 0.55em; + font-family: var(--r-code-font); + line-height: 1.2em; + + word-wrap: break-word; + + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); +} + +.reveal code { + font-family: var(--r-code-font); + text-transform: none; + tab-size: 2; +} + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; +} + +.reveal .code-wrapper { + white-space: normal; +} + +.reveal .code-wrapper code { + white-space: pre; +} + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; +} + +.reveal table th { + font-weight: bold; +} + +.reveal table th, +.reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; +} + +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; +} + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; +} + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { + border-bottom: none; +} + +.reveal sup { + vertical-align: super; + font-size: smaller; +} +.reveal sub { + vertical-align: sub; + font-size: smaller; +} + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; +} + +.reveal small * { + vertical-align: top; +} + +.reveal img { + margin: var(--r-block-margin) 0; +} + + +/********************************************* + * LINKS + *********************************************/ + +.reveal a { + color: var(--r-link-color); + text-decoration: none; + transition: color .15s ease; +} + .reveal a:hover { + color: var(--r-link-color-hover); + text-shadow: none; + border: none; + } + +.reveal .roll span:after { + color: #fff; + // background: darken( var(--r-link-color), 15% ); + background: var(--r-link-color-dark); + +} + + +/********************************************* + * Frame helper + *********************************************/ + +.reveal .r-frame { + border: 4px solid var(--r-main-color); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); +} + +.reveal a .r-frame { + transition: all .15s linear; +} + +.reveal a:hover .r-frame { + border-color: var(--r-link-color); + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); +} + + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ + +.reveal .controls { + color: var(--r-link-color); +} + + +/********************************************* + * PROGRESS BAR + *********************************************/ + +.reveal .progress { + background: rgba(0,0,0,0.2); + color: var(--r-link-color); +} + +/********************************************* + * PRINT BACKGROUND + *********************************************/ + @media print { + .backgrounds { + background-color: var(--r-background-color); + } +} diff --git a/reveal.js/demo.html b/reveal.js/demo.html new file mode 100644 index 0000000..5a8ba36 --- /dev/null +++ b/reveal.js/demo.html @@ -0,0 +1,481 @@ + + + + + + + reveal.js – The HTML Presentation Framework + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ + + +

The HTML Presentation Framework

+

+ Created by Hakim El Hattab and contributors +

+
+ +
+

Hello There

+

+ reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. +

+
+ + +
+
+

Vertical Slides

+

Slides can be nested inside of each other.

+

Use the Space key to navigate through all slides.

+
+ + Down arrow + +
+
+

Basement Level 1

+

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

+
+
+

Basement Level 2

+

That's it, time to go back up.

+
+ + Up arrow + +
+
+ +
+

Slides

+

+ Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com. +

+
+ +
+

Hidden Slides

+

+ This slide is visible in the source, but hidden when the presentation is viewed. You can show all hidden slides by setting the `showHiddenSlides` config option to `true`. +

+
+ +
+

Pretty Code

+ 

+						import React, { useState } from 'react';
+
+						function Example() {
+						  const [count, setCount] = useState(0);
+
+						  return (
+						    ...
+						  );
+						}
+
+

Code syntax highlighting courtesy of highlight.js.

+
+ +
+

With Animations

+
+
+ +
+

Point of View

+

+ Press ESC to enter the slide overview. +

+

+ Hold down the alt key (ctrl in Linux) and click on any element to zoom towards it using zoom.js. Click again to zoom back out. +

+

+ (NOTE: Use ctrl + click in Linux.) +

+
+ +
+

Auto-Animate

+

Automatically animate matching elements across slides with Auto-Animate.

+
+
+
+
+
+
+
+
+
+
+
+
+

Auto-Animate

+
+
+
+
+
+
+
+

Auto-Animate

+
+ +
+

Touch Optimized

+

+ Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides. +

+
+ +
+ +
+ +
+

Add the r-fit-text class to auto-size text

+

FIT TEXT

+
+ +
+
+

Fragments

+

Hit the next arrow...

+

... to step through ...

+

... a fragmented slide.

+ + +
+
+

Fragment Styles

+

There's different types of fragments, like:

+

grow

+

shrink

+

fade-out

+

+ fade-right, + up, + down, + left +

+

fade-in-then-out

+

fade-in-then-semi-out

+

Highlight red blue green

+
+
+ +
+

Transition Styles

+

+ You can select from different transitions, like:
+ None - + Fade - + Slide - + Convex - + Concave - + Zoom +

+
+ +
+

Themes

+

+ reveal.js comes with a few themes built in:
+ + Black (default) - + White - + League - + Sky - + Beige - + Simple
+ Serif - + Blood - + Night - + Moon - + Solarized +

+
+ +
+
+

Slide Backgrounds

+

+ Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported. +

+ + Down arrow + +
+
+

Gradient Backgrounds

+ 
<section data-background-gradient=
+							"linear-gradient(to bottom, #ddd, #191919)">
+
+
+

Image Backgrounds

+ 
<section data-background="image.png">
+
+
+

Tiled Backgrounds

+ 
<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
+
+
+
+

Video Backgrounds

+ 
<section data-background-video="video.mp4,video.webm">
+
+
+
+

... and GIFs!

+
+
+ +
+

Background Transitions

+

+ Different background transitions are available via the backgroundTransition option. This one's called "zoom". +

+ 
Reveal.configure({ backgroundTransition: 'zoom' })
+
+ +
+

Background Transitions

+

+ You can override background transitions per-slide. +

+ 
<section data-background-transition="zoom">
+
+ +
+
+

Iframe Backgrounds

+

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

+
+
+ +
+

Marvelous List

+
    +
  • No order here
    • +
  • Or here
    • +
  • Or here
    • +
  • Or here
    • +
+
+ +
+

Fantastic Ordered List

+
    +
  1. One is smaller than...
    2. +
  2. Two is smaller than...
    3. +
  3. Three!
    4. +
+
+ +
+

Tabular Tables

+ + + + + + + + + + + + + + + + + + + + + + + + + +
ItemValueQuantity
Apples$17
Lemonade$218
Bread$32
+
+ +
+

Clever Quotes

+

+ These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block: +

+
+ “For years there has been a theory that millions of monkeys typing at random on millions of typewriters would + reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.” +
+
+ +
+

Intergalactic Interconnections

+

+ You can link between slides internally, + like this. +

+
+ +
+

Speaker View

+

There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes.

+

Press the S key to try it out.

+ + +
+ +
+

Export to PDF

+

Presentations can be exported to PDF, here's an example:

+ +
+ +
+

Global State

+

+ Set data-state="something" on a slide and "something" + will be added as a class to the document element when the slide is open. This lets you + apply broader style changes, like switching the page background. +

+
+ +
+

State Events

+

+ Additionally custom events can be triggered on a per slide basis by binding to the data-state name. +

+ 

+Reveal.on( 'customevent', function() {
+	console.log( '"customevent" has fired' );
+} );
+
+
+ +
+

Take a Moment

+

+ Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen. +

+
+ +
+

Much more

+ +
+ +
+

THE END

+

+ - Try the online editor
+ - Source code & documentation +

+
+ +
+ +
+ + + + + + + + + + + diff --git a/reveal.js/dist/reset.css b/reveal.js/dist/reset.css new file mode 100644 index 0000000..e238539 --- /dev/null +++ b/reveal.js/dist/reset.css @@ -0,0 +1,30 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v4.0 | 20180602 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +main, menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, main, menu, nav, section { + display: block; +} \ No newline at end of file diff --git a/reveal.js/dist/reveal.css b/reveal.js/dist/reveal.css new file mode 100644 index 0000000..ee08cfa --- /dev/null +++ b/reveal.js/dist/reveal.css @@ -0,0 +1,8 @@ +/*! +* reveal.js 4.6.1 +* https://revealjs.com +* MIT licensed +* +* Copyright (C) 2011-2023 Hakim El Hattab, https://hakim.se +*/ +.reveal .r-stretch,.reveal .stretch{max-width:none;max-height:none}.reveal pre.r-stretch code,.reveal pre.stretch code{height:100%;max-height:100%;box-sizing:border-box}.reveal .r-fit-text{display:inline-block;white-space:nowrap}.reveal .r-stack{display:grid}.reveal .r-stack>*{grid-area:1/1;margin:auto}.reveal .r-hstack,.reveal .r-vstack{display:flex}.reveal .r-hstack img,.reveal .r-hstack video,.reveal .r-vstack img,.reveal .r-vstack video{min-width:0;min-height:0;object-fit:contain}.reveal .r-vstack{flex-direction:column;align-items:center;justify-content:center}.reveal .r-hstack{flex-direction:row;align-items:center;justify-content:center}.reveal .items-stretch{align-items:stretch}.reveal .items-start{align-items:flex-start}.reveal .items-center{align-items:center}.reveal .items-end{align-items:flex-end}.reveal .justify-between{justify-content:space-between}.reveal .justify-around{justify-content:space-around}.reveal .justify-start{justify-content:flex-start}.reveal .justify-center{justify-content:center}.reveal .justify-end{justify-content:flex-end}html.reveal-full-page{width:100%;height:100%;height:100vh;height:calc(var(--vh,1vh) * 100);height:100svh;overflow:hidden}.reveal-viewport{height:100%;overflow:hidden;position:relative;line-height:1;margin:0;background-color:#fff;color:#000;--r-controls-spacing:12px}.reveal-viewport:fullscreen{top:0!important;left:0!important;width:100%!important;height:100%!important;transform:none!important}.reveal .fragment{transition:all .2s ease}.reveal .fragment:not(.custom){opacity:0;visibility:hidden;will-change:opacity}.reveal .fragment.visible{opacity:1;visibility:inherit}.reveal .fragment.disabled{transition:none}.reveal .fragment.grow{opacity:1;visibility:inherit}.reveal .fragment.grow.visible{transform:scale(1.3)}.reveal .fragment.shrink{opacity:1;visibility:inherit}.reveal .fragment.shrink.visible{transform:scale(.7)}.reveal .fragment.zoom-in{transform:scale(.1)}.reveal .fragment.zoom-in.visible{transform:none}.reveal .fragment.fade-out{opacity:1;visibility:inherit}.reveal .fragment.fade-out.visible{opacity:0;visibility:hidden}.reveal .fragment.semi-fade-out{opacity:1;visibility:inherit}.reveal .fragment.semi-fade-out.visible{opacity:.5;visibility:inherit}.reveal .fragment.strike{opacity:1;visibility:inherit}.reveal .fragment.strike.visible{text-decoration:line-through}.reveal .fragment.fade-up{transform:translate(0,40px)}.reveal .fragment.fade-up.visible{transform:translate(0,0)}.reveal .fragment.fade-down{transform:translate(0,-40px)}.reveal .fragment.fade-down.visible{transform:translate(0,0)}.reveal .fragment.fade-right{transform:translate(-40px,0)}.reveal .fragment.fade-right.visible{transform:translate(0,0)}.reveal .fragment.fade-left{transform:translate(40px,0)}.reveal .fragment.fade-left.visible{transform:translate(0,0)}.reveal .fragment.current-visible,.reveal .fragment.fade-in-then-out{opacity:0;visibility:hidden}.reveal .fragment.current-visible.current-fragment,.reveal .fragment.fade-in-then-out.current-fragment{opacity:1;visibility:inherit}.reveal .fragment.fade-in-then-semi-out{opacity:0;visibility:hidden}.reveal .fragment.fade-in-then-semi-out.visible{opacity:.5;visibility:inherit}.reveal .fragment.fade-in-then-semi-out.current-fragment{opacity:1;visibility:inherit}.reveal .fragment.highlight-blue,.reveal .fragment.highlight-current-blue,.reveal .fragment.highlight-current-green,.reveal .fragment.highlight-current-red,.reveal .fragment.highlight-green,.reveal .fragment.highlight-red{opacity:1;visibility:inherit}.reveal .fragment.highlight-red.visible{color:#ff2c2d}.reveal .fragment.highlight-green.visible{color:#17ff2e}.reveal .fragment.highlight-blue.visible{color:#1b91ff}.reveal .fragment.highlight-current-red.current-fragment{color:#ff2c2d}.reveal .fragment.highlight-current-green.current-fragment{color:#17ff2e}.reveal .fragment.highlight-current-blue.current-fragment{color:#1b91ff}.reveal:after{content:"";font-style:italic}.reveal iframe{z-index:1}.reveal a{position:relative}@keyframes bounce-right{0%,10%,25%,40%,50%{transform:translateX(0)}20%{transform:translateX(10px)}30%{transform:translateX(-5px)}}@keyframes bounce-left{0%,10%,25%,40%,50%{transform:translateX(0)}20%{transform:translateX(-10px)}30%{transform:translateX(5px)}}@keyframes bounce-down{0%,10%,25%,40%,50%{transform:translateY(0)}20%{transform:translateY(10px)}30%{transform:translateY(-5px)}}.reveal .controls{display:none;position:absolute;top:auto;bottom:var(--r-controls-spacing);right:var(--r-controls-spacing);left:auto;z-index:11;color:#000;pointer-events:none;font-size:10px}.reveal .controls button{position:absolute;padding:0;background-color:transparent;border:0;outline:0;cursor:pointer;color:currentColor;transform:scale(.9999);transition:color .2s ease,opacity .2s ease,transform .2s ease;z-index:2;pointer-events:auto;font-size:inherit;visibility:hidden;opacity:0;-webkit-appearance:none;-webkit-tap-highlight-color:transparent}.reveal .controls .controls-arrow:after,.reveal .controls .controls-arrow:before{content:"";position:absolute;top:0;left:0;width:2.6em;height:.5em;border-radius:.25em;background-color:currentColor;transition:all .15s ease,background-color .8s ease;transform-origin:.2em 50%;will-change:transform}.reveal .controls .controls-arrow{position:relative;width:3.6em;height:3.6em}.reveal .controls .controls-arrow:before{transform:translateX(.5em) translateY(1.55em) rotate(45deg)}.reveal .controls .controls-arrow:after{transform:translateX(.5em) translateY(1.55em) rotate(-45deg)}.reveal .controls .controls-arrow:hover:before{transform:translateX(.5em) translateY(1.55em) rotate(40deg)}.reveal .controls .controls-arrow:hover:after{transform:translateX(.5em) translateY(1.55em) rotate(-40deg)}.reveal .controls .controls-arrow:active:before{transform:translateX(.5em) translateY(1.55em) rotate(36deg)}.reveal .controls .controls-arrow:active:after{transform:translateX(.5em) translateY(1.55em) rotate(-36deg)}.reveal .controls .navigate-left{right:6.4em;bottom:3.2em;transform:translateX(-10px)}.reveal .controls .navigate-left.highlight{animation:bounce-left 2s 50 both ease-out}.reveal .controls .navigate-right{right:0;bottom:3.2em;transform:translateX(10px)}.reveal .controls .navigate-right .controls-arrow{transform:rotate(180deg)}.reveal .controls .navigate-right.highlight{animation:bounce-right 2s 50 both ease-out}.reveal .controls .navigate-up{right:3.2em;bottom:6.4em;transform:translateY(-10px)}.reveal .controls .navigate-up .controls-arrow{transform:rotate(90deg)}.reveal .controls .navigate-down{right:3.2em;bottom:-1.4em;padding-bottom:1.4em;transform:translateY(10px)}.reveal .controls .navigate-down .controls-arrow{transform:rotate(-90deg)}.reveal .controls .navigate-down.highlight{animation:bounce-down 2s 50 both ease-out}.reveal .controls[data-controls-back-arrows=faded] .navigate-up.enabled{opacity:.3}.reveal .controls[data-controls-back-arrows=faded] .navigate-up.enabled:hover{opacity:1}.reveal .controls[data-controls-back-arrows=hidden] .navigate-up.enabled{opacity:0;visibility:hidden}.reveal .controls .enabled{visibility:visible;opacity:.9;cursor:pointer;transform:none}.reveal .controls .enabled.fragmented{opacity:.5}.reveal .controls .enabled.fragmented:hover,.reveal .controls .enabled:hover{opacity:1}.reveal:not(.rtl) .controls[data-controls-back-arrows=faded] .navigate-left.enabled{opacity:.3}.reveal:not(.rtl) .controls[data-controls-back-arrows=faded] .navigate-left.enabled:hover{opacity:1}.reveal:not(.rtl) .controls[data-controls-back-arrows=hidden] .navigate-left.enabled{opacity:0;visibility:hidden}.reveal.rtl .controls[data-controls-back-arrows=faded] .navigate-right.enabled{opacity:.3}.reveal.rtl .controls[data-controls-back-arrows=faded] .navigate-right.enabled:hover{opacity:1}.reveal.rtl .controls[data-controls-back-arrows=hidden] .navigate-right.enabled{opacity:0;visibility:hidden}.reveal[data-navigation-mode=linear].has-horizontal-slides .navigate-down,.reveal[data-navigation-mode=linear].has-horizontal-slides .navigate-up{display:none}.reveal:not(.has-vertical-slides) .controls .navigate-left,.reveal[data-navigation-mode=linear].has-horizontal-slides .navigate-left{bottom:1.4em;right:5.5em}.reveal:not(.has-vertical-slides) .controls .navigate-right,.reveal[data-navigation-mode=linear].has-horizontal-slides .navigate-right{bottom:1.4em;right:.5em}.reveal:not(.has-horizontal-slides) .controls .navigate-up{right:1.4em;bottom:5em}.reveal:not(.has-horizontal-slides) .controls .navigate-down{right:1.4em;bottom:.5em}.reveal.has-dark-background .controls{color:#fff}.reveal.has-light-background .controls{color:#000}.reveal.no-hover .controls .controls-arrow:active:before,.reveal.no-hover .controls .controls-arrow:hover:before{transform:translateX(.5em) translateY(1.55em) rotate(45deg)}.reveal.no-hover .controls .controls-arrow:active:after,.reveal.no-hover .controls .controls-arrow:hover:after{transform:translateX(.5em) translateY(1.55em) rotate(-45deg)}@media screen and (min-width:500px){.reveal-viewport{--r-controls-spacing:0.8em}.reveal .controls[data-controls-layout=edges]{top:0;right:0;bottom:0;left:0}.reveal .controls[data-controls-layout=edges] .navigate-down,.reveal .controls[data-controls-layout=edges] .navigate-left,.reveal .controls[data-controls-layout=edges] .navigate-right,.reveal .controls[data-controls-layout=edges] .navigate-up{bottom:auto;right:auto}.reveal .controls[data-controls-layout=edges] .navigate-left{top:50%;left:var(--r-controls-spacing);margin-top:-1.8em}.reveal .controls[data-controls-layout=edges] .navigate-right{top:50%;right:var(--r-controls-spacing);margin-top:-1.8em}.reveal .controls[data-controls-layout=edges] .navigate-up{top:var(--r-controls-spacing);left:50%;margin-left:-1.8em}.reveal .controls[data-controls-layout=edges] .navigate-down{bottom:calc(var(--r-controls-spacing) - 1.4em + .3em);left:50%;margin-left:-1.8em}}.reveal .progress{position:absolute;display:none;height:3px;width:100%;bottom:0;left:0;z-index:10;background-color:rgba(0,0,0,.2);color:#fff}.reveal .progress:after{content:"";display:block;position:absolute;height:10px;width:100%;top:-10px}.reveal .progress span{display:block;height:100%;width:100%;background-color:currentColor;transition:transform .8s cubic-bezier(.26,.86,.44,.985);transform-origin:0 0;transform:scaleX(0)}.reveal .slide-number{position:absolute;display:block;right:8px;bottom:8px;z-index:31;font-family:Helvetica,sans-serif;font-size:12px;line-height:1;color:#fff;background-color:rgba(0,0,0,.4);padding:5px}.reveal .slide-number a{color:currentColor}.reveal .slide-number-delimiter{margin:0 3px}.reveal{position:relative;width:100%;height:100%;overflow:hidden;touch-action:pinch-zoom}.reveal.embedded{touch-action:pan-y}.reveal .slides{position:absolute;width:100%;height:100%;top:0;right:0;bottom:0;left:0;margin:auto;pointer-events:none;overflow:visible;z-index:1;text-align:center;perspective:600px;perspective-origin:50% 40%}.reveal .slides>section{perspective:600px}.reveal .slides>section,.reveal .slides>section>section{display:none;position:absolute;width:100%;pointer-events:auto;z-index:10;transform-style:flat;transition:transform-origin .8s cubic-bezier(.26,.86,.44,.985),transform .8s cubic-bezier(.26,.86,.44,.985),visibility .8s cubic-bezier(.26,.86,.44,.985),opacity .8s cubic-bezier(.26,.86,.44,.985)}.reveal[data-transition-speed=fast] .slides section{transition-duration:.4s}.reveal[data-transition-speed=slow] .slides section{transition-duration:1.2s}.reveal .slides section[data-transition-speed=fast]{transition-duration:.4s}.reveal .slides section[data-transition-speed=slow]{transition-duration:1.2s}.reveal .slides>section.stack{padding-top:0;padding-bottom:0;pointer-events:none;height:100%}.reveal .slides>section.present,.reveal .slides>section>section.present{display:block;z-index:11;opacity:1}.reveal .slides>section:empty,.reveal .slides>section>section:empty,.reveal .slides>section>section[data-background-interactive],.reveal .slides>section[data-background-interactive]{pointer-events:none}.reveal.center,.reveal.center .slides,.reveal.center .slides section{min-height:0!important}.reveal .slides>section:not(.present),.reveal .slides>section>section:not(.present){pointer-events:none}.reveal.overview .slides>section,.reveal.overview .slides>section>section{pointer-events:auto}.reveal .slides>section.future,.reveal .slides>section.future>section,.reveal .slides>section.past,.reveal .slides>section.past>section,.reveal .slides>section>section.future,.reveal .slides>section>section.past{opacity:0}.reveal .slides>section[data-transition=slide].past,.reveal .slides>section[data-transition~=slide-out].past,.reveal.slide .slides>section:not([data-transition]).past{transform:translate(-150%,0)}.reveal .slides>section[data-transition=slide].future,.reveal .slides>section[data-transition~=slide-in].future,.reveal.slide .slides>section:not([data-transition]).future{transform:translate(150%,0)}.reveal .slides>section>section[data-transition=slide].past,.reveal .slides>section>section[data-transition~=slide-out].past,.reveal.slide .slides>section>section:not([data-transition]).past{transform:translate(0,-150%)}.reveal .slides>section>section[data-transition=slide].future,.reveal .slides>section>section[data-transition~=slide-in].future,.reveal.slide .slides>section>section:not([data-transition]).future{transform:translate(0,150%)}.reveal .slides>section[data-transition=linear].past,.reveal .slides>section[data-transition~=linear-out].past,.reveal.linear .slides>section:not([data-transition]).past{transform:translate(-150%,0)}.reveal .slides>section[data-transition=linear].future,.reveal .slides>section[data-transition~=linear-in].future,.reveal.linear .slides>section:not([data-transition]).future{transform:translate(150%,0)}.reveal .slides>section>section[data-transition=linear].past,.reveal .slides>section>section[data-transition~=linear-out].past,.reveal.linear .slides>section>section:not([data-transition]).past{transform:translate(0,-150%)}.reveal .slides>section>section[data-transition=linear].future,.reveal .slides>section>section[data-transition~=linear-in].future,.reveal.linear .slides>section>section:not([data-transition]).future{transform:translate(0,150%)}.reveal .slides section[data-transition=default].stack,.reveal.default .slides section.stack{transform-style:preserve-3d}.reveal .slides>section[data-transition=default].past,.reveal .slides>section[data-transition~=default-out].past,.reveal.default .slides>section:not([data-transition]).past{transform:translate3d(-100%,0,0) rotateY(-90deg) translate3d(-100%,0,0)}.reveal .slides>section[data-transition=default].future,.reveal .slides>section[data-transition~=default-in].future,.reveal.default .slides>section:not([data-transition]).future{transform:translate3d(100%,0,0) rotateY(90deg) translate3d(100%,0,0)}.reveal .slides>section>section[data-transition=default].past,.reveal .slides>section>section[data-transition~=default-out].past,.reveal.default .slides>section>section:not([data-transition]).past{transform:translate3d(0,-300px,0) rotateX(70deg) translate3d(0,-300px,0)}.reveal .slides>section>section[data-transition=default].future,.reveal .slides>section>section[data-transition~=default-in].future,.reveal.default .slides>section>section:not([data-transition]).future{transform:translate3d(0,300px,0) rotateX(-70deg) translate3d(0,300px,0)}.reveal .slides section[data-transition=convex].stack,.reveal.convex .slides section.stack{transform-style:preserve-3d}.reveal .slides>section[data-transition=convex].past,.reveal .slides>section[data-transition~=convex-out].past,.reveal.convex .slides>section:not([data-transition]).past{transform:translate3d(-100%,0,0) rotateY(-90deg) translate3d(-100%,0,0)}.reveal .slides>section[data-transition=convex].future,.reveal .slides>section[data-transition~=convex-in].future,.reveal.convex .slides>section:not([data-transition]).future{transform:translate3d(100%,0,0) rotateY(90deg) translate3d(100%,0,0)}.reveal .slides>section>section[data-transition=convex].past,.reveal .slides>section>section[data-transition~=convex-out].past,.reveal.convex .slides>section>section:not([data-transition]).past{transform:translate3d(0,-300px,0) rotateX(70deg) translate3d(0,-300px,0)}.reveal .slides>section>section[data-transition=convex].future,.reveal .slides>section>section[data-transition~=convex-in].future,.reveal.convex .slides>section>section:not([data-transition]).future{transform:translate3d(0,300px,0) rotateX(-70deg) translate3d(0,300px,0)}.reveal .slides section[data-transition=concave].stack,.reveal.concave .slides section.stack{transform-style:preserve-3d}.reveal .slides>section[data-transition=concave].past,.reveal .slides>section[data-transition~=concave-out].past,.reveal.concave .slides>section:not([data-transition]).past{transform:translate3d(-100%,0,0) rotateY(90deg) translate3d(-100%,0,0)}.reveal .slides>section[data-transition=concave].future,.reveal .slides>section[data-transition~=concave-in].future,.reveal.concave .slides>section:not([data-transition]).future{transform:translate3d(100%,0,0) rotateY(-90deg) translate3d(100%,0,0)}.reveal .slides>section>section[data-transition=concave].past,.reveal .slides>section>section[data-transition~=concave-out].past,.reveal.concave .slides>section>section:not([data-transition]).past{transform:translate3d(0,-80%,0) rotateX(-70deg) translate3d(0,-80%,0)}.reveal .slides>section>section[data-transition=concave].future,.reveal .slides>section>section[data-transition~=concave-in].future,.reveal.concave .slides>section>section:not([data-transition]).future{transform:translate3d(0,80%,0) rotateX(70deg) translate3d(0,80%,0)}.reveal .slides section[data-transition=zoom],.reveal.zoom .slides section:not([data-transition]){transition-timing-function:ease}.reveal .slides>section[data-transition=zoom].past,.reveal .slides>section[data-transition~=zoom-out].past,.reveal.zoom .slides>section:not([data-transition]).past{visibility:hidden;transform:scale(16)}.reveal .slides>section[data-transition=zoom].future,.reveal .slides>section[data-transition~=zoom-in].future,.reveal.zoom .slides>section:not([data-transition]).future{visibility:hidden;transform:scale(.2)}.reveal .slides>section>section[data-transition=zoom].past,.reveal .slides>section>section[data-transition~=zoom-out].past,.reveal.zoom .slides>section>section:not([data-transition]).past{transform:scale(16)}.reveal .slides>section>section[data-transition=zoom].future,.reveal .slides>section>section[data-transition~=zoom-in].future,.reveal.zoom .slides>section>section:not([data-transition]).future{transform:scale(.2)}.reveal.cube .slides{perspective:1300px}.reveal.cube .slides section{padding:30px;min-height:700px;backface-visibility:hidden;box-sizing:border-box;transform-style:preserve-3d}.reveal.center.cube .slides section{min-height:0}.reveal.cube .slides section:not(.stack):before{content:"";position:absolute;display:block;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,.1);border-radius:4px;transform:translateZ(-20px)}.reveal.cube .slides section:not(.stack):after{content:"";position:absolute;display:block;width:90%;height:30px;left:5%;bottom:0;background:0 0;z-index:1;border-radius:4px;box-shadow:0 95px 25px rgba(0,0,0,.2);transform:translateZ(-90px) rotateX(65deg)}.reveal.cube .slides>section.stack{padding:0;background:0 0}.reveal.cube .slides>section.past{transform-origin:100% 0;transform:translate3d(-100%,0,0) rotateY(-90deg)}.reveal.cube .slides>section.future{transform-origin:0 0;transform:translate3d(100%,0,0) rotateY(90deg)}.reveal.cube .slides>section>section.past{transform-origin:0 100%;transform:translate3d(0,-100%,0) rotateX(90deg)}.reveal.cube .slides>section>section.future{transform-origin:0 0;transform:translate3d(0,100%,0) rotateX(-90deg)}.reveal.page .slides{perspective-origin:0 50%;perspective:3000px}.reveal.page .slides section{padding:30px;min-height:700px;box-sizing:border-box;transform-style:preserve-3d}.reveal.page .slides section.past{z-index:12}.reveal.page .slides section:not(.stack):before{content:"";position:absolute;display:block;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,.1);transform:translateZ(-20px)}.reveal.page .slides section:not(.stack):after{content:"";position:absolute;display:block;width:90%;height:30px;left:5%;bottom:0;background:0 0;z-index:1;border-radius:4px;box-shadow:0 95px 25px rgba(0,0,0,.2);-webkit-transform:translateZ(-90px) rotateX(65deg)}.reveal.page .slides>section.stack{padding:0;background:0 0}.reveal.page .slides>section.past{transform-origin:0 0;transform:translate3d(-40%,0,0) rotateY(-80deg)}.reveal.page .slides>section.future{transform-origin:100% 0;transform:translate3d(0,0,0)}.reveal.page .slides>section>section.past{transform-origin:0 0;transform:translate3d(0,-40%,0) rotateX(80deg)}.reveal.page .slides>section>section.future{transform-origin:0 100%;transform:translate3d(0,0,0)}.reveal .slides section[data-transition=fade],.reveal.fade .slides section:not([data-transition]),.reveal.fade .slides>section>section:not([data-transition]){transform:none;transition:opacity .5s}.reveal.fade.overview .slides section,.reveal.fade.overview .slides>section>section{transition:none}.reveal .slides section[data-transition=none],.reveal.none .slides section:not([data-transition]){transform:none;transition:none}.reveal .pause-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;visibility:hidden;opacity:0;z-index:100;transition:all 1s ease}.reveal .pause-overlay .resume-button{position:absolute;bottom:20px;right:20px;color:#ccc;border-radius:2px;padding:6px 14px;border:2px solid #ccc;font-size:16px;background:0 0;cursor:pointer}.reveal .pause-overlay .resume-button:hover{color:#fff;border-color:#fff}.reveal.paused .pause-overlay{visibility:visible;opacity:1}.reveal .no-transition,.reveal .no-transition *,.reveal .slides.disable-slide-transitions section{transition:none!important}.reveal .slides.disable-slide-transitions section{transform:none!important}.reveal .backgrounds{position:absolute;width:100%;height:100%;top:0;left:0;perspective:600px}.reveal .slide-background{display:none;position:absolute;width:100%;height:100%;opacity:0;visibility:hidden;overflow:hidden;background-color:rgba(0,0,0,0);transition:all .8s cubic-bezier(.26,.86,.44,.985)}.reveal .slide-background-content{position:absolute;width:100%;height:100%;background-position:50% 50%;background-repeat:no-repeat;background-size:cover}.reveal .slide-background.stack{display:block}.reveal .slide-background.present{opacity:1;visibility:visible;z-index:2}.print-pdf .reveal .slide-background{opacity:1!important;visibility:visible!important}.reveal .slide-background video{position:absolute;width:100%;height:100%;max-width:none;max-height:none;top:0;left:0;object-fit:cover}.reveal .slide-background[data-background-size=contain] video{object-fit:contain}.reveal>.backgrounds .slide-background[data-background-transition=none],.reveal[data-background-transition=none]>.backgrounds .slide-background:not([data-background-transition]){transition:none}.reveal>.backgrounds .slide-background[data-background-transition=slide],.reveal[data-background-transition=slide]>.backgrounds .slide-background:not([data-background-transition]){opacity:1}.reveal>.backgrounds .slide-background.past[data-background-transition=slide],.reveal[data-background-transition=slide]>.backgrounds .slide-background.past:not([data-background-transition]){transform:translate(-100%,0)}.reveal>.backgrounds .slide-background.future[data-background-transition=slide],.reveal[data-background-transition=slide]>.backgrounds .slide-background.future:not([data-background-transition]){transform:translate(100%,0)}.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide],.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]){transform:translate(0,-100%)}.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide],.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]){transform:translate(0,100%)}.reveal>.backgrounds .slide-background.past[data-background-transition=convex],.reveal[data-background-transition=convex]>.backgrounds .slide-background.past:not([data-background-transition]){opacity:0;transform:translate3d(-100%,0,0) rotateY(-90deg) translate3d(-100%,0,0)}.reveal>.backgrounds .slide-background.future[data-background-transition=convex],.reveal[data-background-transition=convex]>.backgrounds .slide-background.future:not([data-background-transition]){opacity:0;transform:translate3d(100%,0,0) rotateY(90deg) translate3d(100%,0,0)}.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex],.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]){opacity:0;transform:translate3d(0,-100%,0) rotateX(90deg) translate3d(0,-100%,0)}.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex],.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]){opacity:0;transform:translate3d(0,100%,0) rotateX(-90deg) translate3d(0,100%,0)}.reveal>.backgrounds .slide-background.past[data-background-transition=concave],.reveal[data-background-transition=concave]>.backgrounds .slide-background.past:not([data-background-transition]){opacity:0;transform:translate3d(-100%,0,0) rotateY(90deg) translate3d(-100%,0,0)}.reveal>.backgrounds .slide-background.future[data-background-transition=concave],.reveal[data-background-transition=concave]>.backgrounds .slide-background.future:not([data-background-transition]){opacity:0;transform:translate3d(100%,0,0) rotateY(-90deg) translate3d(100%,0,0)}.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave],.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]){opacity:0;transform:translate3d(0,-100%,0) rotateX(-90deg) translate3d(0,-100%,0)}.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave],.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]){opacity:0;transform:translate3d(0,100%,0) rotateX(90deg) translate3d(0,100%,0)}.reveal>.backgrounds .slide-background[data-background-transition=zoom],.reveal[data-background-transition=zoom]>.backgrounds .slide-background:not([data-background-transition]){transition-timing-function:ease}.reveal>.backgrounds .slide-background.past[data-background-transition=zoom],.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past:not([data-background-transition]){opacity:0;visibility:hidden;transform:scale(16)}.reveal>.backgrounds .slide-background.future[data-background-transition=zoom],.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future:not([data-background-transition]){opacity:0;visibility:hidden;transform:scale(.2)}.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom],.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]){opacity:0;visibility:hidden;transform:scale(16)}.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom],.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]){opacity:0;visibility:hidden;transform:scale(.2)}.reveal[data-transition-speed=fast]>.backgrounds .slide-background{transition-duration:.4s}.reveal[data-transition-speed=slow]>.backgrounds .slide-background{transition-duration:1.2s}.reveal [data-auto-animate-target^=unmatched]{will-change:opacity}.reveal section[data-auto-animate]:not(.stack):not([data-auto-animate=running]) [data-auto-animate-target^=unmatched]{opacity:0}.reveal.overview{perspective-origin:50% 50%;perspective:700px}.reveal.overview .slides{-moz-transform-style:preserve-3d}.reveal.overview .slides section{height:100%;top:0!important;opacity:1!important;overflow:hidden;visibility:visible!important;cursor:pointer;box-sizing:border-box}.reveal.overview .slides section.present,.reveal.overview .slides section:hover{outline:10px solid rgba(150,150,150,.4);outline-offset:10px}.reveal.overview .slides section .fragment{opacity:1;transition:none}.reveal.overview .slides section:after,.reveal.overview .slides section:before{display:none!important}.reveal.overview .slides>section.stack{padding:0;top:0!important;background:0 0;outline:0;overflow:visible}.reveal.overview .backgrounds{perspective:inherit;-moz-transform-style:preserve-3d}.reveal.overview .backgrounds .slide-background{opacity:1;visibility:visible;outline:10px solid rgba(150,150,150,.1);outline-offset:10px}.reveal.overview .backgrounds .slide-background.stack{overflow:visible}.reveal.overview .slides section,.reveal.overview-deactivating .slides section{transition:none}.reveal.overview .backgrounds .slide-background,.reveal.overview-deactivating .backgrounds .slide-background{transition:none}.reveal.rtl .slides,.reveal.rtl .slides h1,.reveal.rtl .slides h2,.reveal.rtl .slides h3,.reveal.rtl .slides h4,.reveal.rtl .slides h5,.reveal.rtl .slides h6{direction:rtl;font-family:sans-serif}.reveal.rtl code,.reveal.rtl pre{direction:ltr}.reveal.rtl ol,.reveal.rtl ul{text-align:right}.reveal.rtl .progress span{transform-origin:100% 0}.reveal.has-parallax-background .backgrounds{transition:all .8s ease}.reveal.has-parallax-background[data-transition-speed=fast] .backgrounds{transition-duration:.4s}.reveal.has-parallax-background[data-transition-speed=slow] .backgrounds{transition-duration:1.2s}.reveal>.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;background:rgba(0,0,0,.9);transition:all .3s ease}.reveal>.overlay .spinner{position:absolute;display:block;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;z-index:10;background-image:url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D);visibility:visible;opacity:.6;transition:all .3s ease}.reveal>.overlay header{position:absolute;left:0;top:0;width:100%;padding:5px;z-index:2;box-sizing:border-box}.reveal>.overlay header a{display:inline-block;width:40px;height:40px;line-height:36px;padding:0 10px;float:right;opacity:.6;box-sizing:border-box}.reveal>.overlay header a:hover{opacity:1}.reveal>.overlay header a .icon{display:inline-block;width:20px;height:20px;background-position:50% 50%;background-size:100%;background-repeat:no-repeat}.reveal>.overlay header a.close .icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC)}.reveal>.overlay header a.external .icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==)}.reveal>.overlay .viewport{position:absolute;display:flex;top:50px;right:0;bottom:0;left:0}.reveal>.overlay.overlay-preview .viewport iframe{width:100%;height:100%;max-width:100%;max-height:100%;border:0;opacity:0;visibility:hidden;transition:all .3s ease}.reveal>.overlay.overlay-preview.loaded .viewport iframe{opacity:1;visibility:visible}.reveal>.overlay.overlay-preview.loaded .viewport-inner{position:absolute;z-index:-1;left:0;top:45%;width:100%;text-align:center;letter-spacing:normal}.reveal>.overlay.overlay-preview .x-frame-error{opacity:0;transition:opacity .3s ease .3s}.reveal>.overlay.overlay-preview.loaded .x-frame-error{opacity:1}.reveal>.overlay.overlay-preview.loaded .spinner{opacity:0;visibility:hidden;transform:scale(.2)}.reveal>.overlay.overlay-help .viewport{overflow:auto;color:#fff}.reveal>.overlay.overlay-help .viewport .viewport-inner{width:600px;margin:auto;padding:20px 20px 80px 20px;text-align:center;letter-spacing:normal}.reveal>.overlay.overlay-help .viewport .viewport-inner .title{font-size:20px}.reveal>.overlay.overlay-help .viewport .viewport-inner table{border:1px solid #fff;border-collapse:collapse;font-size:16px}.reveal>.overlay.overlay-help .viewport .viewport-inner table td,.reveal>.overlay.overlay-help .viewport .viewport-inner table th{width:200px;padding:14px;border:1px solid #fff;vertical-align:middle}.reveal>.overlay.overlay-help .viewport .viewport-inner table th{padding-top:20px;padding-bottom:20px}.reveal .playback{position:absolute;left:15px;bottom:20px;z-index:30;cursor:pointer;transition:all .4s ease;-webkit-tap-highlight-color:transparent}.reveal.overview .playback{opacity:0;visibility:hidden}.reveal .hljs{min-height:100%}.reveal .hljs table{margin:initial}.reveal .hljs-ln-code,.reveal .hljs-ln-numbers{padding:0;border:0}.reveal .hljs-ln-numbers{opacity:.6;padding-right:.75em;text-align:right;vertical-align:top}.reveal .hljs.has-highlights tr:not(.highlight-line){opacity:.4}.reveal .hljs.has-highlights.fragment{transition:all .2s ease}.reveal .hljs:not(:first-child).fragment{position:absolute;top:0;left:0;width:100%;box-sizing:border-box}.reveal pre[data-auto-animate-target]{overflow:hidden}.reveal pre[data-auto-animate-target] code{height:100%}.reveal .roll{display:inline-block;line-height:1.2;overflow:hidden;vertical-align:top;perspective:400px;perspective-origin:50% 50%}.reveal .roll:hover{background:0 0;text-shadow:none}.reveal .roll span{display:block;position:relative;padding:0 2px;pointer-events:none;transition:all .4s ease;transform-origin:50% 0;transform-style:preserve-3d;backface-visibility:hidden}.reveal .roll:hover span{background:rgba(0,0,0,.5);transform:translate3d(0,0,-45px) rotateX(90deg)}.reveal .roll span:after{content:attr(data-title);display:block;position:absolute;left:0;top:0;padding:0 2px;backface-visibility:hidden;transform-origin:50% 0;transform:translate3d(0,110%,0) rotateX(-90deg)}.reveal aside.notes{display:none}.reveal .speaker-notes{display:none;position:absolute;width:33.3333333333%;height:100%;top:0;left:100%;padding:14px 18px 14px 18px;z-index:1;font-size:18px;line-height:1.4;border:1px solid rgba(0,0,0,.05);color:#222;background-color:#f5f5f5;overflow:auto;box-sizing:border-box;text-align:left;font-family:Helvetica,sans-serif;-webkit-overflow-scrolling:touch}.reveal .speaker-notes .notes-placeholder{color:#ccc;font-style:italic}.reveal .speaker-notes:focus{outline:0}.reveal .speaker-notes:before{content:"Speaker notes";display:block;margin-bottom:10px;opacity:.5}.reveal.show-notes{max-width:75%;overflow:visible}.reveal.show-notes .speaker-notes{display:block}@media screen and (min-width:1600px){.reveal .speaker-notes{font-size:20px}}@media screen and (max-width:1024px){.reveal.show-notes{border-left:0;max-width:none;max-height:70%;max-height:70vh;overflow:visible}.reveal.show-notes .speaker-notes{top:100%;left:0;width:100%;height:30vh;border:0}}@media screen and (max-width:600px){.reveal.show-notes{max-height:60%;max-height:60vh}.reveal.show-notes .speaker-notes{top:100%;height:40vh}.reveal .speaker-notes{font-size:14px}}.reveal .jump-to-slide{position:absolute;top:15px;left:15px;z-index:30;font-size:32px;-webkit-tap-highlight-color:transparent}.reveal .jump-to-slide-input{background:0 0;padding:8px;font-size:inherit;color:currentColor;border:0}.reveal .jump-to-slide-input::placeholder{color:currentColor;opacity:.5}.reveal.has-dark-background .jump-to-slide-input{color:#fff}.reveal.has-light-background .jump-to-slide-input{color:#222}.reveal .jump-to-slide-input:focus{outline:0}.zoomed .reveal *,.zoomed .reveal :after,.zoomed .reveal :before{backface-visibility:visible!important}.zoomed .reveal .controls,.zoomed .reveal .progress{opacity:0}.zoomed .reveal .roll span{background:0 0}.zoomed .reveal .roll span:after{visibility:hidden}.reveal-viewport.loading-scroll-mode{visibility:hidden}.reveal-viewport.reveal-scroll{margin:0 auto!important;overflow:auto;overflow-x:hidden;overflow-y:auto;z-index:1;--r-scrollbar-width:7px;--r-scrollbar-trigger-size:5px;--r-controls-spacing:8px}@media screen and (max-width:500px){.reveal-viewport.reveal-scroll{--r-scrollbar-width:3px;--r-scrollbar-trigger-size:3px}}.reveal-viewport.reveal-scroll .backgrounds,.reveal-viewport.reveal-scroll .controls,.reveal-viewport.reveal-scroll .playback,.reveal-viewport.reveal-scroll .progress,.reveal-viewport.reveal-scroll .slide-number,.reveal-viewport.reveal-scroll .speaker-notes{display:none!important}.reveal-viewport.reveal-scroll .reveal{overflow:visible;touch-action:manipulation}.reveal-viewport.reveal-scroll .slides{position:static;pointer-events:initial;left:auto;top:auto;width:100%!important;margin:0!important;padding:0!important;overflow:visible;display:block;perspective:none;perspective-origin:50% 50%}.reveal-viewport.reveal-scroll .scroll-page{position:relative;width:100%;height:calc(var(--page-height) + var(--page-scroll-padding));z-index:1;overflow:visible}.reveal-viewport.reveal-scroll .scroll-page-sticky{position:sticky;height:var(--page-height);top:0}.reveal-viewport.reveal-scroll .scroll-page-content{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.reveal-viewport.reveal-scroll .scroll-page section{visibility:visible!important;display:block!important;position:absolute!important;width:var(--slide-width)!important;height:var(--slide-height)!important;top:50%!important;left:50%!important;opacity:1!important;transform:scale(var(--slide-scale)) translate(-50%,-50%)!important;transform-style:flat!important;transform-origin:0 0!important}.reveal-viewport.reveal-scroll .slide-background{display:block!important;position:absolute;top:0;left:0;width:100%;height:100%;z-index:auto!important;visibility:visible;opacity:1;touch-action:manipulation}.reveal-viewport.reveal-scroll[data-scrollbar=auto]::-webkit-scrollbar,.reveal-viewport.reveal-scroll[data-scrollbar=true]::-webkit-scrollbar{display:none}.reveal-viewport.reveal-scroll[data-scrollbar=auto],.reveal-viewport.reveal-scroll[data-scrollbar=true]{scrollbar-width:none}.reveal-viewport.has-dark-background,.reveal.has-dark-background{--r-overlay-element-bg-color:240,240,240;--r-overlay-element-fg-color:0,0,0}.reveal-viewport.has-light-background,.reveal.has-light-background{--r-overlay-element-bg-color:0,0,0;--r-overlay-element-fg-color:240,240,240}.reveal-viewport.reveal-scroll .scrollbar{position:sticky;top:50%;z-index:20;opacity:0;transition:all .3s ease}.reveal-viewport.reveal-scroll .scrollbar.visible,.reveal-viewport.reveal-scroll .scrollbar:hover{opacity:1}.reveal-viewport.reveal-scroll .scrollbar .scrollbar-inner{position:absolute;width:var(--r-scrollbar-width);height:calc(var(--viewport-height) - var(--r-controls-spacing) * 2);right:var(--r-controls-spacing);top:0;transform:translateY(-50%);border-radius:var(--r-scrollbar-width);z-index:10}.reveal-viewport.reveal-scroll .scrollbar .scrollbar-playhead{position:absolute;width:var(--r-scrollbar-width);height:var(--r-scrollbar-width);top:0;left:0;border-radius:var(--r-scrollbar-width);background-color:rgba(var(--r-overlay-element-bg-color),1);z-index:11;transition:background-color .2s ease}.reveal-viewport.reveal-scroll .scrollbar .scrollbar-slide{position:absolute;width:100%;background-color:rgba(var(--r-overlay-element-bg-color),.2);box-shadow:0 0 0 1px rgba(var(--r-overlay-element-fg-color),.1);border-radius:var(--r-scrollbar-width);transition:background-color .2s ease}.reveal-viewport.reveal-scroll .scrollbar .scrollbar-slide:after{content:"";position:absolute;width:200%;height:100%;top:0;left:-50%;background:rgba(0,0,0,0);z-index:-1}.reveal-viewport.reveal-scroll .scrollbar .scrollbar-slide.active,.reveal-viewport.reveal-scroll .scrollbar .scrollbar-slide:hover{background-color:rgba(var(--r-overlay-element-bg-color),.4)}.reveal-viewport.reveal-scroll .scrollbar .scrollbar-trigger{position:absolute;width:100%;transition:background-color .2s ease}.reveal-viewport.reveal-scroll .scrollbar .scrollbar-slide.active.has-triggers{background-color:rgba(var(--r-overlay-element-bg-color),.4);z-index:10}.reveal-viewport.reveal-scroll .scrollbar .scrollbar-slide.active .scrollbar-trigger:after{content:"";position:absolute;width:var(--r-scrollbar-trigger-size);height:var(--r-scrollbar-trigger-size);border-radius:20px;top:50%;left:50%;transform:translate(-50%,-50%);background-color:rgba(var(--r-overlay-element-bg-color),1);transition:transform .2s ease,opacity .2s ease;opacity:.4}.reveal-viewport.reveal-scroll .scrollbar .scrollbar-slide.active .scrollbar-trigger.active:after,.reveal-viewport.reveal-scroll .scrollbar .scrollbar-slide.active .scrollbar-trigger.active~.scrollbar-trigger:after{opacity:1}.reveal-viewport.reveal-scroll .scrollbar .scrollbar-slide.active .scrollbar-trigger~.scrollbar-trigger.active:after{transform:translate(calc(var(--r-scrollbar-width) * -2),0);background-color:rgba(var(--r-overlay-element-bg-color),1)}html.reveal-print *{-webkit-print-color-adjust:exact}html.reveal-print{width:100%;height:100%;overflow:visible}html.reveal-print body{margin:0 auto!important;border:0;padding:0;float:none!important;overflow:visible}html.reveal-print .nestedarrow,html.reveal-print .reveal .controls,html.reveal-print .reveal .playback,html.reveal-print .reveal .progress,html.reveal-print .reveal.overview,html.reveal-print .state-background{display:none!important}html.reveal-print .reveal pre code{overflow:hidden!important}html.reveal-print .reveal{width:auto!important;height:auto!important;overflow:hidden!important}html.reveal-print .reveal .slides{position:static;width:100%!important;height:auto!important;zoom:1!important;pointer-events:initial;left:auto;top:auto;margin:0!important;padding:0!important;overflow:visible;display:block;perspective:none;perspective-origin:50% 50%}html.reveal-print .reveal .slides .pdf-page{position:relative;overflow:hidden;z-index:1;page-break-after:always}html.reveal-print .reveal .slides .pdf-page:last-of-type{page-break-after:avoid}html.reveal-print .reveal .slides section{visibility:visible!important;display:block!important;position:absolute!important;margin:0!important;padding:0!important;box-sizing:border-box!important;min-height:1px;opacity:1!important;transform-style:flat!important;transform:none!important}html.reveal-print .reveal section.stack{position:relative!important;margin:0!important;padding:0!important;page-break-after:avoid!important;height:auto!important;min-height:auto!important}html.reveal-print .reveal img{box-shadow:none}html.reveal-print .reveal .backgrounds{display:none}html.reveal-print .reveal .slide-background{display:block!important;position:absolute;top:0;left:0;width:100%;height:100%;z-index:auto!important}html.reveal-print .reveal.show-notes{max-width:none;max-height:none}html.reveal-print .reveal .speaker-notes-pdf{display:block;width:100%;height:auto;max-height:none;top:auto;right:auto;bottom:auto;left:auto;z-index:100}html.reveal-print .reveal .speaker-notes-pdf[data-layout=separate-page]{position:relative;color:inherit;background-color:transparent;padding:20px;page-break-after:always;border:0}html.reveal-print .reveal .slide-number-pdf{display:block;position:absolute;font-size:14px;visibility:visible}html.reveal-print .aria-status{display:none}@media print{html:not(.print-pdf){overflow:visible;width:auto;height:auto}html:not(.print-pdf) body{margin:0;padding:0;overflow:visible}html:not(.print-pdf) .reveal{background:#fff;font-size:20pt}html:not(.print-pdf) .reveal .backgrounds,html:not(.print-pdf) .reveal .controls,html:not(.print-pdf) .reveal .progress,html:not(.print-pdf) .reveal .slide-number,html:not(.print-pdf) .reveal .state-background{display:none!important}html:not(.print-pdf) .reveal li,html:not(.print-pdf) .reveal p,html:not(.print-pdf) .reveal td{font-size:20pt!important;color:#000}html:not(.print-pdf) .reveal h1,html:not(.print-pdf) .reveal h2,html:not(.print-pdf) .reveal h3,html:not(.print-pdf) .reveal h4,html:not(.print-pdf) .reveal h5,html:not(.print-pdf) .reveal h6{color:#000!important;height:auto;line-height:normal;text-align:left;letter-spacing:normal}html:not(.print-pdf) .reveal h1{font-size:28pt!important}html:not(.print-pdf) .reveal h2{font-size:24pt!important}html:not(.print-pdf) .reveal h3{font-size:22pt!important}html:not(.print-pdf) .reveal h4{font-size:22pt!important;font-variant:small-caps}html:not(.print-pdf) .reveal h5{font-size:21pt!important}html:not(.print-pdf) .reveal h6{font-size:20pt!important;font-style:italic}html:not(.print-pdf) .reveal a:link,html:not(.print-pdf) .reveal a:visited{color:#000!important;font-weight:700;text-decoration:underline}html:not(.print-pdf) .reveal div,html:not(.print-pdf) .reveal ol,html:not(.print-pdf) .reveal p,html:not(.print-pdf) .reveal ul{visibility:visible;position:static;width:auto;height:auto;display:block;overflow:visible;margin:0;text-align:left!important}html:not(.print-pdf) .reveal pre,html:not(.print-pdf) .reveal table{margin-left:0;margin-right:0}html:not(.print-pdf) .reveal pre code{padding:20px}html:not(.print-pdf) .reveal blockquote{margin:20px 0}html:not(.print-pdf) .reveal .slides{position:static!important;width:auto!important;height:auto!important;left:0!important;top:0!important;margin-left:0!important;margin-top:0!important;padding:0!important;zoom:1!important;transform:none!important;overflow:visible!important;display:block!important;text-align:left!important;perspective:none;perspective-origin:50% 50%}html:not(.print-pdf) .reveal .slides section{visibility:visible!important;position:static!important;width:auto!important;height:auto!important;display:block!important;overflow:visible!important;left:0!important;top:0!important;margin-left:0!important;margin-top:0!important;padding:60px 20px!important;z-index:auto!important;opacity:1!important;page-break-after:always!important;transform-style:flat!important;transform:none!important;transition:none!important}html:not(.print-pdf) .reveal .slides section.stack{padding:0!important}html:not(.print-pdf) .reveal .slides section:last-of-type{page-break-after:avoid!important}html:not(.print-pdf) .reveal .slides section .fragment{opacity:1!important;visibility:visible!important;transform:none!important}html:not(.print-pdf) .reveal .r-fit-text{white-space:normal!important}html:not(.print-pdf) .reveal section img{display:block;margin:15px 0;background:#fff;border:1px solid #666;box-shadow:none}html:not(.print-pdf) .reveal section small{font-size:.8em}html:not(.print-pdf) .reveal .hljs{max-height:100%;white-space:pre-wrap;word-wrap:break-word;word-break:break-word;font-size:15pt}html:not(.print-pdf) .reveal .hljs .hljs-ln-numbers{white-space:nowrap}html:not(.print-pdf) .reveal .hljs td{font-size:inherit!important;color:inherit!important}} \ No newline at end of file diff --git a/reveal.js/dist/reveal.esm.js b/reveal.js/dist/reveal.esm.js new file mode 100644 index 0000000..250ab42 --- /dev/null +++ b/reveal.js/dist/reveal.esm.js @@ -0,0 +1,9 @@ +/*! +* reveal.js 4.6.1 +* https://revealjs.com +* MIT licensed +* +* Copyright (C) 2011-2023 Hakim El Hattab, https://hakim.se +*/ +const e=(e,t)=>{for(let i in t)e[i]=t[i];return e},t=(e,t)=>Array.from(e.querySelectorAll(t)),i=(e,t,i)=>{i?e.classList.add(t):e.classList.remove(t)},s=e=>{if("string"==typeof e){if("null"===e)return null;if("true"===e)return!0;if("false"===e)return!1;if(e.match(/^-?[\d\.]+$/))return parseFloat(e)}return e},a=(e,t)=>{e.style.transform=t},n=(e,t)=>{let i=e.matches||e.matchesSelector||e.msMatchesSelector;return!(!i||!i.call(e,t))},r=(e,t)=>{if("function"==typeof e.closest)return e.closest(t);for(;e;){if(n(e,t))return e;e=e.parentNode}return null},o=(e,t,i,s="")=>{let a=e.querySelectorAll("."+i);for(let t=0;t{let t=document.createElement("style");return t.type="text/css",e&&e.length>0&&(t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))),document.head.appendChild(t),t},d=()=>{let e={};location.search.replace(/[A-Z0-9]+?=([\w\.%-]*)/gi,(t=>{e[t.split("=").shift()]=t.split("=").pop()}));for(let t in e){let i=e[t];e[t]=s(unescape(i))}return void 0!==e.dependencies&&delete e.dependencies,e},c=(e,t=0)=>{if(e){let i,s=e.style.height;return e.style.height="0px",e.parentNode.style.height="auto",i=t-e.parentNode.offsetHeight,e.style.height=s+"px",e.parentNode.style.removeProperty("height"),i}return t},h={mp4:"video/mp4",m4a:"video/mp4",ogv:"video/ogg",mpeg:"video/mpeg",webm:"video/webm"},u=navigator.userAgent,g=/(iphone|ipod|ipad|android)/gi.test(u)||"MacIntel"===navigator.platform&&navigator.maxTouchPoints>1;/chrome/i.test(u)&&/edge/i.test(u);const p=/android/gi.test(u);var v={};Object.defineProperty(v,"__esModule",{value:!0});var m=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:{};return"string"==typeof e?x(t(document.querySelectorAll(e)),i):x([e],i)[0]}}("undefined"==typeof window?null:window);class y{constructor(e){this.Reveal=e,this.startEmbeddedIframe=this.startEmbeddedIframe.bind(this)}shouldPreload(e){if(this.Reveal.isScrollView())return!0;let t=this.Reveal.getConfig().preloadIframes;return"boolean"!=typeof t&&(t=e.hasAttribute("data-preload")),t}load(e,i={}){e.style.display=this.Reveal.getConfig().display,t(e,"img[data-src], video[data-src], audio[data-src], iframe[data-src]").forEach((e=>{("IFRAME"!==e.tagName||this.shouldPreload(e))&&(e.setAttribute("src",e.getAttribute("data-src")),e.setAttribute("data-lazy-loaded",""),e.removeAttribute("data-src"))})),t(e,"video, audio").forEach((e=>{let i=0;t(e,"source[data-src]").forEach((e=>{e.setAttribute("src",e.getAttribute("data-src")),e.removeAttribute("data-src"),e.setAttribute("data-lazy-loaded",""),i+=1})),g&&"VIDEO"===e.tagName&&e.setAttribute("playsinline",""),i>0&&e.load()}));let s=e.slideBackgroundElement;if(s){s.style.display="block";let t=e.slideBackgroundContentElement,a=e.getAttribute("data-background-iframe");if(!1===s.hasAttribute("data-loaded")){s.setAttribute("data-loaded","true");let n=e.getAttribute("data-background-image"),r=e.getAttribute("data-background-video"),o=e.hasAttribute("data-background-video-loop"),l=e.hasAttribute("data-background-video-muted");if(n)/^data:/.test(n.trim())?t.style.backgroundImage=`url(${n.trim()})`:t.style.backgroundImage=n.split(",").map((e=>`url(${((e="")=>encodeURI(e).replace(/%5B/g,"[").replace(/%5D/g,"]").replace(/[!'()*]/g,(e=>`%${e.charCodeAt(0).toString(16).toUpperCase()}`)))(decodeURI(e.trim()))})`)).join(",");else if(r&&!this.Reveal.isSpeakerNotes()){let e=document.createElement("video");o&&e.setAttribute("loop",""),l&&(e.muted=!0),g&&(e.muted=!0,e.setAttribute("playsinline","")),r.split(",").forEach((t=>{let i=((e="")=>h[e.split(".").pop()])(t);e.innerHTML+=i?``:``})),t.appendChild(e)}else if(a&&!0!==i.excludeIframes){let e=document.createElement("iframe");e.setAttribute("allowfullscreen",""),e.setAttribute("mozallowfullscreen",""),e.setAttribute("webkitallowfullscreen",""),e.setAttribute("allow","autoplay"),e.setAttribute("data-src",a),e.style.width="100%",e.style.height="100%",e.style.maxHeight="100%",e.style.maxWidth="100%",t.appendChild(e)}}let n=t.querySelector("iframe[data-src]");n&&this.shouldPreload(s)&&!/autoplay=(1|true|yes)/gi.test(a)&&n.getAttribute("src")!==a&&n.setAttribute("src",a)}this.layout(e)}layout(e){Array.from(e.querySelectorAll(".r-fit-text")).forEach((e=>{f(e,{minSize:24,maxSize:.8*this.Reveal.getConfig().height,observeMutations:!1,observeWindow:!1})}))}unload(e){e.style.display="none";let i=this.Reveal.getSlideBackground(e);i&&(i.style.display="none",t(i,"iframe[src]").forEach((e=>{e.removeAttribute("src")}))),t(e,"video[data-lazy-loaded][src], audio[data-lazy-loaded][src], iframe[data-lazy-loaded][src]").forEach((e=>{e.setAttribute("data-src",e.getAttribute("src")),e.removeAttribute("src")})),t(e,"video[data-lazy-loaded] source[src], audio source[src]").forEach((e=>{e.setAttribute("data-src",e.getAttribute("src")),e.removeAttribute("src")}))}formatEmbeddedContent(){let e=(e,i,s)=>{t(this.Reveal.getSlidesElement(),"iframe["+e+'*="'+i+'"]').forEach((t=>{let i=t.getAttribute(e);i&&-1===i.indexOf(s)&&t.setAttribute(e,i+(/\?/.test(i)?"&":"?")+s)}))};e("src","youtube.com/embed/","enablejsapi=1"),e("data-src","youtube.com/embed/","enablejsapi=1"),e("src","player.vimeo.com/","api=1"),e("data-src","player.vimeo.com/","api=1")}startEmbeddedContent(e){e&&!this.Reveal.isSpeakerNotes()&&(t(e,'img[src$=".gif"]').forEach((e=>{e.setAttribute("src",e.getAttribute("src"))})),t(e,"video, audio").forEach((e=>{if(r(e,".fragment")&&!r(e,".fragment.visible"))return;let t=this.Reveal.getConfig().autoPlayMedia;if("boolean"!=typeof t&&(t=e.hasAttribute("data-autoplay")||!!r(e,".slide-background")),t&&"function"==typeof e.play)if(e.readyState>1)this.startEmbeddedMedia({target:e});else if(g){let t=e.play();t&&"function"==typeof t.catch&&!1===e.controls&&t.catch((()=>{e.controls=!0,e.addEventListener("play",(()=>{e.controls=!1}))}))}else e.removeEventListener("loadeddata",this.startEmbeddedMedia),e.addEventListener("loadeddata",this.startEmbeddedMedia)})),t(e,"iframe[src]").forEach((e=>{r(e,".fragment")&&!r(e,".fragment.visible")||this.startEmbeddedIframe({target:e})})),t(e,"iframe[data-src]").forEach((e=>{r(e,".fragment")&&!r(e,".fragment.visible")||e.getAttribute("src")!==e.getAttribute("data-src")&&(e.removeEventListener("load",this.startEmbeddedIframe),e.addEventListener("load",this.startEmbeddedIframe),e.setAttribute("src",e.getAttribute("data-src")))})))}startEmbeddedMedia(e){let t=!!r(e.target,"html"),i=!!r(e.target,".present");t&&i&&(e.target.currentTime=0,e.target.play()),e.target.removeEventListener("loadeddata",this.startEmbeddedMedia)}startEmbeddedIframe(e){let t=e.target;if(t&&t.contentWindow){let i=!!r(e.target,"html"),s=!!r(e.target,".present");if(i&&s){let e=this.Reveal.getConfig().autoPlayMedia;"boolean"!=typeof e&&(e=t.hasAttribute("data-autoplay")||!!r(t,".slide-background")),/youtube\.com\/embed\//.test(t.getAttribute("src"))&&e?t.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}',"*"):/player\.vimeo\.com\//.test(t.getAttribute("src"))&&e?t.contentWindow.postMessage('{"method":"play"}',"*"):t.contentWindow.postMessage("slide:start","*")}}}stopEmbeddedContent(i,s={}){s=e({unloadIframes:!0},s),i&&i.parentNode&&(t(i,"video, audio").forEach((e=>{e.hasAttribute("data-ignore")||"function"!=typeof e.pause||(e.setAttribute("data-paused-by-reveal",""),e.pause())})),t(i,"iframe").forEach((e=>{e.contentWindow&&e.contentWindow.postMessage("slide:stop","*"),e.removeEventListener("load",this.startEmbeddedIframe)})),t(i,'iframe[src*="youtube.com/embed/"]').forEach((e=>{!e.hasAttribute("data-ignore")&&e.contentWindow&&"function"==typeof e.contentWindow.postMessage&&e.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}',"*")})),t(i,'iframe[src*="player.vimeo.com/"]').forEach((e=>{!e.hasAttribute("data-ignore")&&e.contentWindow&&"function"==typeof e.contentWindow.postMessage&&e.contentWindow.postMessage('{"method":"pause"}',"*")})),!0===s.unloadIframes&&t(i,"iframe[data-src]").forEach((e=>{e.setAttribute("src","about:blank"),e.removeAttribute("src")})))}}class b{constructor(e){this.Reveal=e}render(){this.element=document.createElement("div"),this.element.className="slide-number",this.Reveal.getRevealElement().appendChild(this.element)}configure(e,t){let i="none";e.slideNumber&&!this.Reveal.isPrintView()&&("all"===e.showSlideNumber||"speaker"===e.showSlideNumber&&this.Reveal.isSpeakerNotes())&&(i="block"),this.element.style.display=i}update(){this.Reveal.getConfig().slideNumber&&this.element&&(this.element.innerHTML=this.getSlideNumber())}getSlideNumber(e=this.Reveal.getCurrentSlide()){let t,i=this.Reveal.getConfig(),s="h.v";if("function"==typeof i.slideNumber)t=i.slideNumber(e);else{"string"==typeof i.slideNumber&&(s=i.slideNumber),/c/.test(s)||1!==this.Reveal.getHorizontalSlides().length||(s="c");let a=e&&"uncounted"===e.dataset.visibility?0:1;switch(t=[],s){case"c":t.push(this.Reveal.getSlidePastCount(e)+a);break;case"c/t":t.push(this.Reveal.getSlidePastCount(e)+a,"/",this.Reveal.getTotalSlides());break;default:let i=this.Reveal.getIndices(e);t.push(i.h+a);let n="h/v"===s?"/":".";this.Reveal.isVerticalSlide(e)&&t.push(n,i.v+1)}}let a="#"+this.Reveal.location.getHash(e);return this.formatNumber(t[0],t[1],t[2],a)}formatNumber(e,t,i,s="#"+this.Reveal.location.getHash()){return"number"!=typeof i||isNaN(i)?`\n\t\t\t\t\t${e}\n\t\t\t\t\t`:`\n\t\t\t\t\t${e}\n\t\t\t\t\t${t}\n\t\t\t\t\t${i}\n\t\t\t\t\t`}destroy(){this.element.remove()}}class w{constructor(e){this.Reveal=e,this.onInput=this.onInput.bind(this),this.onBlur=this.onBlur.bind(this),this.onKeyDown=this.onKeyDown.bind(this)}render(){this.element=document.createElement("div"),this.element.className="jump-to-slide",this.jumpInput=document.createElement("input"),this.jumpInput.type="text",this.jumpInput.className="jump-to-slide-input",this.jumpInput.placeholder="Jump to slide",this.jumpInput.addEventListener("input",this.onInput),this.jumpInput.addEventListener("keydown",this.onKeyDown),this.jumpInput.addEventListener("blur",this.onBlur),this.element.appendChild(this.jumpInput)}show(){this.indicesOnShow=this.Reveal.getIndices(),this.Reveal.getRevealElement().appendChild(this.element),this.jumpInput.focus()}hide(){this.isVisible()&&(this.element.remove(),this.jumpInput.value="",clearTimeout(this.jumpTimeout),delete this.jumpTimeout)}isVisible(){return!!this.element.parentNode}jump(){clearTimeout(this.jumpTimeout),delete this.jumpTimeout;const e=this.jumpInput.value.trim("");let t=this.Reveal.location.getIndicesFromHash(e,{oneBasedIndex:!0});return!t&&/\S+/i.test(e)&&e.length>1&&(t=this.search(e)),t&&""!==e?(this.Reveal.slide(t.h,t.v,t.f),!0):(this.Reveal.slide(this.indicesOnShow.h,this.indicesOnShow.v,this.indicesOnShow.f),!1)}jumpAfter(e){clearTimeout(this.jumpTimeout),this.jumpTimeout=setTimeout((()=>this.jump()),e)}search(e){const t=new RegExp("\\b"+e.trim()+"\\b","i"),i=this.Reveal.getSlides().find((e=>t.test(e.innerText)));return i?this.Reveal.getIndices(i):null}cancel(){this.Reveal.slide(this.indicesOnShow.h,this.indicesOnShow.v,this.indicesOnShow.f),this.hide()}confirm(){this.jump(),this.hide()}destroy(){this.jumpInput.removeEventListener("input",this.onInput),this.jumpInput.removeEventListener("keydown",this.onKeyDown),this.jumpInput.removeEventListener("blur",this.onBlur),this.element.remove()}onKeyDown(e){13===e.keyCode?this.confirm():27===e.keyCode&&(this.cancel(),e.stopImmediatePropagation())}onInput(e){this.jumpAfter(200)}onBlur(){setTimeout((()=>this.hide()),1)}}const E=e=>{let t=e.match(/^#([0-9a-f]{3})$/i);if(t&&t[1])return t=t[1],{r:17*parseInt(t.charAt(0),16),g:17*parseInt(t.charAt(1),16),b:17*parseInt(t.charAt(2),16)};let i=e.match(/^#([0-9a-f]{6})$/i);if(i&&i[1])return i=i[1],{r:parseInt(i.slice(0,2),16),g:parseInt(i.slice(2,4),16),b:parseInt(i.slice(4,6),16)};let s=e.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);if(s)return{r:parseInt(s[1],10),g:parseInt(s[2],10),b:parseInt(s[3],10)};let a=e.match(/^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\,\s*([\d]+|[\d]*.[\d]+)\s*\)$/i);return a?{r:parseInt(a[1],10),g:parseInt(a[2],10),b:parseInt(a[3],10),a:parseFloat(a[4])}:null};class S{constructor(e){this.Reveal=e}render(){this.element=document.createElement("div"),this.element.className="backgrounds",this.Reveal.getRevealElement().appendChild(this.element)}create(){this.element.innerHTML="",this.element.classList.add("no-transition"),this.Reveal.getHorizontalSlides().forEach((e=>{let i=this.createBackground(e,this.element);t(e,"section").forEach((e=>{this.createBackground(e,i),i.classList.add("stack")}))})),this.Reveal.getConfig().parallaxBackgroundImage?(this.element.style.backgroundImage='url("'+this.Reveal.getConfig().parallaxBackgroundImage+'")',this.element.style.backgroundSize=this.Reveal.getConfig().parallaxBackgroundSize,this.element.style.backgroundRepeat=this.Reveal.getConfig().parallaxBackgroundRepeat,this.element.style.backgroundPosition=this.Reveal.getConfig().parallaxBackgroundPosition,setTimeout((()=>{this.Reveal.getRevealElement().classList.add("has-parallax-background")}),1)):(this.element.style.backgroundImage="",this.Reveal.getRevealElement().classList.remove("has-parallax-background"))}createBackground(e,t){let i=document.createElement("div");i.className="slide-background "+e.className.replace(/present|past|future/,"");let s=document.createElement("div");return s.className="slide-background-content",i.appendChild(s),t.appendChild(i),e.slideBackgroundElement=i,e.slideBackgroundContentElement=s,this.sync(e),i}sync(e){const t=e.slideBackgroundElement,i=e.slideBackgroundContentElement,s={background:e.getAttribute("data-background"),backgroundSize:e.getAttribute("data-background-size"),backgroundImage:e.getAttribute("data-background-image"),backgroundVideo:e.getAttribute("data-background-video"),backgroundIframe:e.getAttribute("data-background-iframe"),backgroundColor:e.getAttribute("data-background-color"),backgroundGradient:e.getAttribute("data-background-gradient"),backgroundRepeat:e.getAttribute("data-background-repeat"),backgroundPosition:e.getAttribute("data-background-position"),backgroundTransition:e.getAttribute("data-background-transition"),backgroundOpacity:e.getAttribute("data-background-opacity")},a=e.hasAttribute("data-preload");e.classList.remove("has-dark-background"),e.classList.remove("has-light-background"),t.removeAttribute("data-loaded"),t.removeAttribute("data-background-hash"),t.removeAttribute("data-background-size"),t.removeAttribute("data-background-transition"),t.style.backgroundColor="",i.style.backgroundSize="",i.style.backgroundRepeat="",i.style.backgroundPosition="",i.style.backgroundImage="",i.style.opacity="",i.innerHTML="",s.background&&(/^(http|file|\/\/)/gi.test(s.background)||/\.(svg|png|jpg|jpeg|gif|bmp|webp)([?#\s]|$)/gi.test(s.background)?e.setAttribute("data-background-image",s.background):t.style.background=s.background),(s.background||s.backgroundColor||s.backgroundGradient||s.backgroundImage||s.backgroundVideo||s.backgroundIframe)&&t.setAttribute("data-background-hash",s.background+s.backgroundSize+s.backgroundImage+s.backgroundVideo+s.backgroundIframe+s.backgroundColor+s.backgroundGradient+s.backgroundRepeat+s.backgroundPosition+s.backgroundTransition+s.backgroundOpacity),s.backgroundSize&&t.setAttribute("data-background-size",s.backgroundSize),s.backgroundColor&&(t.style.backgroundColor=s.backgroundColor),s.backgroundGradient&&(t.style.backgroundImage=s.backgroundGradient),s.backgroundTransition&&t.setAttribute("data-background-transition",s.backgroundTransition),a&&t.setAttribute("data-preload",""),s.backgroundSize&&(i.style.backgroundSize=s.backgroundSize),s.backgroundRepeat&&(i.style.backgroundRepeat=s.backgroundRepeat),s.backgroundPosition&&(i.style.backgroundPosition=s.backgroundPosition),s.backgroundOpacity&&(i.style.opacity=s.backgroundOpacity);const n=this.getContrastClass(e);"string"==typeof n&&e.classList.add(n)}getContrastClass(e){const t=e.slideBackgroundElement;let i=e.getAttribute("data-background-color");if(!i||!E(i)){let e=window.getComputedStyle(t);e&&e.backgroundColor&&(i=e.backgroundColor)}if(i){const e=E(i);if(e&&0!==e.a)return"string"==typeof(s=i)&&(s=E(s)),(s?(299*s.r+587*s.g+114*s.b)/1e3:null)<128?"has-dark-background":"has-light-background"}var s;return null}bubbleSlideContrastClassToElement(e,t){["has-light-background","has-dark-background"].forEach((i=>{e.classList.contains(i)?t.classList.add(i):t.classList.remove(i)}),this)}update(e=!1){let i=this.Reveal.getCurrentSlide(),s=this.Reveal.getIndices(),a=null,n=this.Reveal.getConfig().rtl?"future":"past",r=this.Reveal.getConfig().rtl?"past":"future";if(Array.from(this.element.childNodes).forEach(((i,o)=>{i.classList.remove("past","present","future"),os.h?i.classList.add(r):(i.classList.add("present"),a=i),(e||o===s.h)&&t(i,".slide-background").forEach(((e,t)=>{e.classList.remove("past","present","future"),ts.v?e.classList.add("future"):(e.classList.add("present"),o===s.h&&(a=e))}))})),this.previousBackground&&this.Reveal.slideContent.stopEmbeddedContent(this.previousBackground,{unloadIframes:!this.Reveal.slideContent.shouldPreload(this.previousBackground)}),a){this.Reveal.slideContent.startEmbeddedContent(a);let e=a.querySelector(".slide-background-content");if(e){let t=e.style.backgroundImage||"";/\.gif/i.test(t)&&(e.style.backgroundImage="",window.getComputedStyle(e).opacity,e.style.backgroundImage=t)}let t=this.previousBackground?this.previousBackground.getAttribute("data-background-hash"):null,i=a.getAttribute("data-background-hash");i&&i===t&&a!==this.previousBackground&&this.element.classList.add("no-transition"),this.previousBackground=a}i&&this.bubbleSlideContrastClassToElement(i,this.Reveal.getRevealElement()),setTimeout((()=>{this.element.classList.remove("no-transition")}),1)}updateParallax(){let e=this.Reveal.getIndices();if(this.Reveal.getConfig().parallaxBackgroundImage){let t,i,s=this.Reveal.getHorizontalSlides(),a=this.Reveal.getVerticalSlides(),n=this.element.style.backgroundSize.split(" ");1===n.length?t=i=parseInt(n[0],10):(t=parseInt(n[0],10),i=parseInt(n[1],10));let r,o,l=this.element.offsetWidth,d=s.length;r="number"==typeof this.Reveal.getConfig().parallaxBackgroundHorizontal?this.Reveal.getConfig().parallaxBackgroundHorizontal:d>1?(t-l)/(d-1):0,o=r*e.h*-1;let c,h,u=this.element.offsetHeight,g=a.length;c="number"==typeof this.Reveal.getConfig().parallaxBackgroundVertical?this.Reveal.getConfig().parallaxBackgroundVertical:(i-u)/(g-1),h=g>0?c*e.v:0,this.element.style.backgroundPosition=o+"px "+-h+"px"}}destroy(){this.element.remove()}}const A=".slides section",R=".slides>section",k=".slides>section.present>section",L=/registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener|showPreview/,C=/fade-(down|up|right|left|out|in-then-out|in-then-semi-out)|semi-fade-out|current-visible|shrink|grow/;let x=0;class P{constructor(e){this.Reveal=e}run(e,t){this.reset();let i=this.Reveal.getSlides(),s=i.indexOf(t),a=i.indexOf(e);if(e.hasAttribute("data-auto-animate")&&t.hasAttribute("data-auto-animate")&&e.getAttribute("data-auto-animate-id")===t.getAttribute("data-auto-animate-id")&&!(s>a?t:e).hasAttribute("data-auto-animate-restart")){this.autoAnimateStyleSheet=this.autoAnimateStyleSheet||l();let i=this.getAutoAnimateOptions(t);e.dataset.autoAnimate="pending",t.dataset.autoAnimate="pending",i.slideDirection=s>a?"forward":"backward";let n="none"===e.style.display;n&&(e.style.display=this.Reveal.getConfig().display);let r=this.getAutoAnimatableElements(e,t).map((e=>this.autoAnimateElements(e.from,e.to,e.options||{},i,x++)));if(n&&(e.style.display="none"),"false"!==t.dataset.autoAnimateUnmatched&&!0===this.Reveal.getConfig().autoAnimateUnmatched){let e=.8*i.duration,s=.2*i.duration;this.getUnmatchedAutoAnimateElements(t).forEach((e=>{let t=this.getAutoAnimateOptions(e,i),s="unmatched";t.duration===i.duration&&t.delay===i.delay||(s="unmatched-"+x++,r.push(`[data-auto-animate="running"] [data-auto-animate-target="${s}"] { transition: opacity ${t.duration}s ease ${t.delay}s; }`)),e.dataset.autoAnimateTarget=s}),this),r.push(`[data-auto-animate="running"] [data-auto-animate-target="unmatched"] { transition: opacity ${e}s ease ${s}s; }`)}this.autoAnimateStyleSheet.innerHTML=r.join(""),requestAnimationFrame((()=>{this.autoAnimateStyleSheet&&(getComputedStyle(this.autoAnimateStyleSheet).fontWeight,t.dataset.autoAnimate="running")})),this.Reveal.dispatchEvent({type:"autoanimate",data:{fromSlide:e,toSlide:t,sheet:this.autoAnimateStyleSheet}})}}reset(){t(this.Reveal.getRevealElement(),'[data-auto-animate]:not([data-auto-animate=""])').forEach((e=>{e.dataset.autoAnimate=""})),t(this.Reveal.getRevealElement(),"[data-auto-animate-target]").forEach((e=>{delete e.dataset.autoAnimateTarget})),this.autoAnimateStyleSheet&&this.autoAnimateStyleSheet.parentNode&&(this.autoAnimateStyleSheet.parentNode.removeChild(this.autoAnimateStyleSheet),this.autoAnimateStyleSheet=null)}autoAnimateElements(e,t,i,s,a){e.dataset.autoAnimateTarget="",t.dataset.autoAnimateTarget=a;let n=this.getAutoAnimateOptions(t,s);void 0!==i.delay&&(n.delay=i.delay),void 0!==i.duration&&(n.duration=i.duration),void 0!==i.easing&&(n.easing=i.easing);let r=this.getAutoAnimatableProperties("from",e,i),o=this.getAutoAnimatableProperties("to",t,i);if(t.classList.contains("fragment")&&(delete o.styles.opacity,e.classList.contains("fragment"))){(e.className.match(C)||[""])[0]===(t.className.match(C)||[""])[0]&&"forward"===s.slideDirection&&t.classList.add("visible","disabled")}if(!1!==i.translate||!1!==i.scale){let e=this.Reveal.getScale(),t={x:(r.x-o.x)/e,y:(r.y-o.y)/e,scaleX:r.width/o.width,scaleY:r.height/o.height};t.x=Math.round(1e3*t.x)/1e3,t.y=Math.round(1e3*t.y)/1e3,t.scaleX=Math.round(1e3*t.scaleX)/1e3,t.scaleX=Math.round(1e3*t.scaleX)/1e3;let s=!1!==i.translate&&(0!==t.x||0!==t.y),a=!1!==i.scale&&(0!==t.scaleX||0!==t.scaleY);if(s||a){let e=[];s&&e.push(`translate(${t.x}px, ${t.y}px)`),a&&e.push(`scale(${t.scaleX}, ${t.scaleY})`),r.styles.transform=e.join(" "),r.styles["transform-origin"]="top left",o.styles.transform="none"}}for(let e in o.styles){const t=o.styles[e],i=r.styles[e];t===i?delete o.styles[e]:(!0===t.explicitValue&&(o.styles[e]=t.value),!0===i.explicitValue&&(r.styles[e]=i.value))}let l="",d=Object.keys(o.styles);if(d.length>0){r.styles.transition="none",o.styles.transition=`all ${n.duration}s ${n.easing} ${n.delay}s`,o.styles["transition-property"]=d.join(", "),o.styles["will-change"]=d.join(", "),l='[data-auto-animate-target="'+a+'"] {'+Object.keys(r.styles).map((e=>e+": "+r.styles[e]+" !important;")).join("")+'}[data-auto-animate="running"] [data-auto-animate-target="'+a+'"] {'+Object.keys(o.styles).map((e=>e+": "+o.styles[e]+" !important;")).join("")+"}"}return l}getAutoAnimateOptions(t,i){let s={easing:this.Reveal.getConfig().autoAnimateEasing,duration:this.Reveal.getConfig().autoAnimateDuration,delay:0};if(s=e(s,i),t.parentNode){let e=r(t.parentNode,"[data-auto-animate-target]");e&&(s=this.getAutoAnimateOptions(e,s))}return t.dataset.autoAnimateEasing&&(s.easing=t.dataset.autoAnimateEasing),t.dataset.autoAnimateDuration&&(s.duration=parseFloat(t.dataset.autoAnimateDuration)),t.dataset.autoAnimateDelay&&(s.delay=parseFloat(t.dataset.autoAnimateDelay)),s}getAutoAnimatableProperties(e,t,i){let s=this.Reveal.getConfig(),a={styles:[]};if(!1!==i.translate||!1!==i.scale){let e;if("function"==typeof i.measure)e=i.measure(t);else if(s.center)e=t.getBoundingClientRect();else{let i=this.Reveal.getScale();e={x:t.offsetLeft*i,y:t.offsetTop*i,width:t.offsetWidth*i,height:t.offsetHeight*i}}a.x=e.x,a.y=e.y,a.width=e.width,a.height=e.height}const n=getComputedStyle(t);return(i.styles||s.autoAnimateStyles).forEach((t=>{let i;"string"==typeof t&&(t={property:t}),void 0!==t.from&&"from"===e?i={value:t.from,explicitValue:!0}:void 0!==t.to&&"to"===e?i={value:t.to,explicitValue:!0}:("line-height"===t.property&&(i=parseFloat(n["line-height"])/parseFloat(n["font-size"])),isNaN(i)&&(i=n[t.property])),""!==i&&(a.styles[t.property]=i)})),a}getAutoAnimatableElements(e,t){let i=("function"==typeof this.Reveal.getConfig().autoAnimateMatcher?this.Reveal.getConfig().autoAnimateMatcher:this.getAutoAnimatePairs).call(this,e,t),s=[];return i.filter(((e,t)=>{if(-1===s.indexOf(e.to))return s.push(e.to),!0}))}getAutoAnimatePairs(e,t){let i=[];const s="h1, h2, h3, h4, h5, h6, p, li";return this.findAutoAnimateMatches(i,e,t,"[data-id]",(e=>e.nodeName+":::"+e.getAttribute("data-id"))),this.findAutoAnimateMatches(i,e,t,s,(e=>e.nodeName+":::"+e.innerText)),this.findAutoAnimateMatches(i,e,t,"img, video, iframe",(e=>e.nodeName+":::"+(e.getAttribute("src")||e.getAttribute("data-src")))),this.findAutoAnimateMatches(i,e,t,"pre",(e=>e.nodeName+":::"+e.innerText)),i.forEach((e=>{n(e.from,s)?e.options={scale:!1}:n(e.from,"pre")&&(e.options={scale:!1,styles:["width","height"]},this.findAutoAnimateMatches(i,e.from,e.to,".hljs .hljs-ln-code",(e=>e.textContent),{scale:!1,styles:[],measure:this.getLocalBoundingBox.bind(this)}),this.findAutoAnimateMatches(i,e.from,e.to,".hljs .hljs-ln-numbers[data-line-number]",(e=>e.getAttribute("data-line-number")),{scale:!1,styles:["width"],measure:this.getLocalBoundingBox.bind(this)}))}),this),i}getLocalBoundingBox(e){const t=this.Reveal.getScale();return{x:Math.round(e.offsetLeft*t*100)/100,y:Math.round(e.offsetTop*t*100)/100,width:Math.round(e.offsetWidth*t*100)/100,height:Math.round(e.offsetHeight*t*100)/100}}findAutoAnimateMatches(e,t,i,s,a,n){let r={},o={};[].slice.call(t.querySelectorAll(s)).forEach(((e,t)=>{const i=a(e);"string"==typeof i&&i.length&&(r[i]=r[i]||[],r[i].push(e))})),[].slice.call(i.querySelectorAll(s)).forEach(((t,i)=>{const s=a(t);let l;if(o[s]=o[s]||[],o[s].push(t),r[s]){const e=o[s].length-1,t=r[s].length-1;r[s][e]?(l=r[s][e],r[s][e]=null):r[s][t]&&(l=r[s][t],r[s][t]=null)}l&&e.push({from:l,to:t,options:n})}))}getUnmatchedAutoAnimateElements(e){return[].slice.call(e.children).reduce(((e,t)=>{const i=t.querySelector("[data-auto-animate-target]");return t.hasAttribute("data-auto-animate-target")||i||e.push(t),t.querySelector("[data-auto-animate-target]")&&(e=e.concat(this.getUnmatchedAutoAnimateElements(t))),e}),[])}}class T{constructor(e){this.Reveal=e,this.active=!1,this.activatedCallbacks=[],this.onScroll=this.onScroll.bind(this)}activate(){if(this.active)return;const e=this.Reveal.getState();this.active=!0,this.slideHTMLBeforeActivation=this.Reveal.getSlidesElement().innerHTML;const i=t(this.Reveal.getRevealElement(),R);let s;this.viewportElement.classList.add("loading-scroll-mode","reveal-scroll");const a=window.getComputedStyle(this.viewportElement);a&&a.background&&(s=a.background);const n=[],r=i[0].parentNode;let o;const l=(e,t,i)=>{let a;if(o&&this.Reveal.shouldAutoAnimateBetween(o,e))a=document.createElement("div"),a.className="scroll-page-content scroll-auto-animate-page",a.style.display="none",o.closest(".scroll-page-content").parentNode.appendChild(a);else{const e=document.createElement("div");e.className="scroll-page",n.push(e),s&&(e.style.background=s);const t=document.createElement("div");t.className="scroll-page-sticky",e.appendChild(t),a=document.createElement("div"),a.className="scroll-page-content",t.appendChild(a)}a.appendChild(e),e.classList.remove("past","future"),e.setAttribute("data-index-h",t),e.setAttribute("data-index-v",i),e.slideBackgroundElement&&(e.slideBackgroundElement.remove("past","future"),a.insertBefore(e.slideBackgroundElement,e)),o=e};i.forEach(((e,t)=>{this.Reveal.isVerticalStack(e)?e.querySelectorAll("section").forEach(((e,i)=>{l(e,t,i)})):l(e,t,0)}),this),this.createProgressBar(),t(this.Reveal.getRevealElement(),".stack").forEach((e=>e.remove())),n.forEach((e=>r.appendChild(e))),this.Reveal.slideContent.layout(this.Reveal.getSlidesElement()),this.Reveal.layout(),this.Reveal.setState(e),this.activatedCallbacks.forEach((e=>e())),this.activatedCallbacks=[],this.restoreScrollPosition(),this.viewportElement.classList.remove("loading-scroll-mode"),this.viewportElement.addEventListener("scroll",this.onScroll,{passive:!0})}deactivate(){if(!this.active)return;const e=this.Reveal.getState();this.active=!1,this.viewportElement.removeEventListener("scroll",this.onScroll),this.viewportElement.classList.remove("reveal-scroll"),this.removeProgressBar(),this.Reveal.getSlidesElement().innerHTML=this.slideHTMLBeforeActivation,this.Reveal.sync(),this.Reveal.setState(e),this.slideHTMLBeforeActivation=null}toggle(e){"boolean"==typeof e?e?this.activate():this.deactivate():this.isActive()?this.deactivate():this.activate()}isActive(){return this.active}createProgressBar(){this.progressBar=document.createElement("div"),this.progressBar.className="scrollbar",this.progressBarInner=document.createElement("div"),this.progressBarInner.className="scrollbar-inner",this.progressBar.appendChild(this.progressBarInner),this.progressBarPlayhead=document.createElement("div"),this.progressBarPlayhead.className="scrollbar-playhead",this.progressBarInner.appendChild(this.progressBarPlayhead),this.viewportElement.insertBefore(this.progressBar,this.viewportElement.firstChild);const e=e=>{let t=(e.clientY-this.progressBarInner.getBoundingClientRect().top)/this.progressBarHeight;t=Math.max(Math.min(t,1),0),this.viewportElement.scrollTop=t*(this.viewportElement.scrollHeight-this.viewportElement.offsetHeight)},t=i=>{this.draggingProgressBar=!1,this.showProgressBar(),document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",t)};this.progressBarInner.addEventListener("mousedown",(i=>{i.preventDefault(),this.draggingProgressBar=!0,document.addEventListener("mousemove",e),document.addEventListener("mouseup",t),e(i)}))}removeProgressBar(){this.progressBar&&(this.progressBar.remove(),this.progressBar=null)}layout(){this.isActive()&&(this.syncPages(),this.syncScrollPosition())}syncPages(){const e=this.Reveal.getConfig(),t=this.Reveal.getComputedSlideSize(window.innerWidth,window.innerHeight),i=this.Reveal.getScale(),s="compact"===e.scrollLayout,a=this.viewportElement.offsetHeight,n=t.height*i,r=s?n:a,o=s?n:a;this.viewportElement.style.setProperty("--page-height",r+"px"),this.viewportElement.style.scrollSnapType="string"==typeof e.scrollSnap?`y ${e.scrollSnap}`:"",this.slideTriggers=[];const l=Array.from(this.Reveal.getRevealElement().querySelectorAll(".scroll-page"));this.pages=l.map((i=>{const n=this.createPage({pageElement:i,slideElement:i.querySelector("section"),stickyElement:i.querySelector(".scroll-page-sticky"),contentElement:i.querySelector(".scroll-page-content"),backgroundElement:i.querySelector(".slide-background"),autoAnimateElements:i.querySelectorAll(".scroll-auto-animate-page"),autoAnimatePages:[]});n.pageElement.style.setProperty("--slide-height",!0===e.center?"auto":t.height+"px"),this.slideTriggers.push({page:n,activate:()=>this.activatePage(n),deactivate:()=>this.deactivatePage(n)}),this.createFragmentTriggersForPage(n),n.autoAnimateElements.length>0&&this.createAutoAnimateTriggersForPage(n);let l=Math.max(n.scrollTriggers.length-1,0);l+=n.autoAnimatePages.reduce(((e,t)=>e+Math.max(t.scrollTriggers.length-1,0)),n.autoAnimatePages.length),n.pageElement.querySelectorAll(".scroll-snap-point").forEach((e=>e.remove()));for(let e=0;e0?(n.pageHeight=a,n.pageElement.style.setProperty("--page-height",a+"px")):(n.pageHeight=r,n.pageElement.style.removeProperty("--page-height")),n.scrollPadding=o*l,n.totalHeight=n.pageHeight+n.scrollPadding,n.pageElement.style.setProperty("--page-scroll-padding",n.scrollPadding+"px"),l>0?(n.stickyElement.style.position="sticky",n.stickyElement.style.top=Math.max((a-n.pageHeight)/2,0)+"px"):(n.stickyElement.style.position="relative",n.pageElement.style.scrollSnapAlign=n.pageHeight1?(this.progressBar||this.createProgressBar(),this.syncProgressBar()):this.removeProgressBar()}setTriggerRanges(){this.totalScrollTriggerCount=this.slideTriggers.reduce(((e,t)=>e+Math.max(t.page.scrollTriggers.length,1)),0);let e=0;this.slideTriggers.forEach(((t,i)=>{t.range=[e,e+Math.max(t.page.scrollTriggers.length,1)/this.totalScrollTriggerCount];const s=(t.range[1]-t.range[0])/t.page.scrollTriggers.length;t.page.scrollTriggers.forEach(((t,i)=>{t.range=[e+i*s,e+(i+1)*s]})),e=t.range[1]}))}createFragmentTriggersForPage(e,t){t=t||e.slideElement;const i=this.Reveal.fragments.sort(t.querySelectorAll(".fragment"),!0);return i.length&&(e.fragments=this.Reveal.fragments.sort(t.querySelectorAll(".fragment:not(.disabled)")),e.scrollTriggers.push({activate:()=>{this.Reveal.fragments.update(-1,e.fragments,t)}},...i.map(((i,s)=>({activate:()=>{this.Reveal.fragments.update(s,e.fragments,t)}}))))),e.scrollTriggers.length}createAutoAnimateTriggersForPage(e){e.autoAnimateElements.length>0&&this.slideTriggers.push(...Array.from(e.autoAnimateElements).map(((t,i)=>{let s=this.createPage({slideElement:t.querySelector("section"),contentElement:t,backgroundElement:t.querySelector(".slide-background")});return this.createFragmentTriggersForPage(s,s.slideElement),e.autoAnimatePages.push(s),{page:s,activate:()=>this.activatePage(s),deactivate:()=>this.deactivatePage(s)}})))}createPage(e){return e.scrollTriggers=[],e.indexh=parseInt(e.slideElement.getAttribute("data-index-h"),10),e.indexv=parseInt(e.slideElement.getAttribute("data-index-v"),10),e}syncProgressBar(){this.progressBarInner.querySelectorAll(".scrollbar-slide").forEach((e=>e.remove()));const e=this.viewportElement.scrollHeight,t=this.viewportElement.offsetHeight,i=t/e;this.progressBarHeight=this.progressBarInner.offsetHeight,this.playheadHeight=Math.max(i*this.progressBarHeight,8),this.progressBarScrollableHeight=this.progressBarHeight-this.playheadHeight;const s=t/e*this.progressBarHeight,a=Math.min(s/8,4);this.progressBarPlayhead.style.height=this.playheadHeight-a+"px",s>6?this.slideTriggers.forEach((e=>{const{page:t}=e;t.progressBarSlide=document.createElement("div"),t.progressBarSlide.className="scrollbar-slide",t.progressBarSlide.style.top=e.range[0]*this.progressBarHeight+"px",t.progressBarSlide.style.height=(e.range[1]-e.range[0])*this.progressBarHeight-a+"px",t.progressBarSlide.classList.toggle("has-triggers",t.scrollTriggers.length>0),this.progressBarInner.appendChild(t.progressBarSlide),t.scrollTriggerElements=t.scrollTriggers.map(((i,s)=>{const n=document.createElement("div");return n.className="scrollbar-trigger",n.style.top=(i.range[0]-e.range[0])*this.progressBarHeight+"px",n.style.height=(i.range[1]-i.range[0])*this.progressBarHeight-a+"px",t.progressBarSlide.appendChild(n),0===s&&(n.style.display="none"),n}))})):this.pages.forEach((e=>e.progressBarSlide=null))}syncScrollPosition(){const e=this.viewportElement.offsetHeight,t=e/this.viewportElement.scrollHeight,i=this.viewportElement.scrollTop,s=this.viewportElement.scrollHeight-e,a=Math.max(Math.min(i/s,1),0),n=Math.max(Math.min((i+e/2)/this.viewportElement.scrollHeight,1),0);let r;this.slideTriggers.forEach((e=>{const{page:i}=e;a>=e.range[0]-2*t&&a<=e.range[1]+2*t&&!i.loaded?(i.loaded=!0,this.Reveal.slideContent.load(i.slideElement)):i.loaded&&(i.loaded=!1,this.Reveal.slideContent.unload(i.slideElement)),a>=e.range[0]&&a<=e.range[1]?(this.activateTrigger(e),r=e.page):e.active&&this.deactivateTrigger(e)})),r&&r.scrollTriggers.forEach((e=>{n>=e.range[0]&&n<=e.range[1]?this.activateTrigger(e):e.active&&this.deactivateTrigger(e)})),this.setProgressBarValue(i/(this.viewportElement.scrollHeight-e))}setProgressBarValue(e){this.progressBar&&(this.progressBarPlayhead.style.transform=`translateY(${e*this.progressBarScrollableHeight}px)`,this.getAllPages().filter((e=>e.progressBarSlide)).forEach((e=>{e.progressBarSlide.classList.toggle("active",!0===e.active),e.scrollTriggers.forEach(((t,i)=>{e.scrollTriggerElements[i].classList.toggle("active",!0===e.active&&!0===t.active)}))})),this.showProgressBar())}showProgressBar(){this.progressBar.classList.add("visible"),clearTimeout(this.hideProgressBarTimeout),"auto"!==this.Reveal.getConfig().scrollProgress||this.draggingProgressBar||(this.hideProgressBarTimeout=setTimeout((()=>{this.progressBar&&this.progressBar.classList.remove("visible")}),500))}scrollToSlide(e){if(this.active){const t=this.getScrollTriggerBySlide(e);t&&(this.viewportElement.scrollTop=t.range[0]*(this.viewportElement.scrollHeight-this.viewportElement.offsetHeight))}else this.activatedCallbacks.push((()=>this.scrollToSlide(e)))}storeScrollPosition(){clearTimeout(this.storeScrollPositionTimeout),this.storeScrollPositionTimeout=setTimeout((()=>{sessionStorage.setItem("reveal-scroll-top",this.viewportElement.scrollTop),sessionStorage.setItem("reveal-scroll-origin",location.origin+location.pathname),this.storeScrollPositionTimeout=null}),50)}restoreScrollPosition(){const e=sessionStorage.getItem("reveal-scroll-top"),t=sessionStorage.getItem("reveal-scroll-origin");e&&t===location.origin+location.pathname&&(this.viewportElement.scrollTop=parseInt(e,10))}activatePage(e){if(!e.active){e.active=!0;const{slideElement:t,backgroundElement:i,contentElement:s,indexh:a,indexv:n}=e;s.style.display="block",t.classList.add("present"),i&&i.classList.add("present"),this.Reveal.setCurrentScrollPage(t,a,n),this.Reveal.backgrounds.bubbleSlideContrastClassToElement(t,this.viewportElement),Array.from(s.parentNode.querySelectorAll(".scroll-page-content")).forEach((e=>{e!==s&&(e.style.display="none")}))}}deactivatePage(e){e.active&&(e.active=!1,e.slideElement.classList.remove("present"),e.backgroundElement.classList.remove("present"))}activateTrigger(e){e.active||(e.active=!0,e.activate())}deactivateTrigger(e){e.active&&(e.active=!1,e.deactivate&&e.deactivate())}getSlideByIndices(e,t){const i=this.getAllPages().find((i=>i.indexh===e&&i.indexv===t));return i?i.slideElement:null}getScrollTriggerBySlide(e){return this.slideTriggers.find((t=>t.page.slideElement===e))}getAllPages(){return this.pages.flatMap((e=>[e,...e.autoAnimatePages||[]]))}onScroll(){this.syncScrollPosition(),this.storeScrollPosition()}get viewportElement(){return this.Reveal.getViewportElement()}}class N{constructor(e){this.Reveal=e}async activate(){const e=this.Reveal.getConfig(),i=t(this.Reveal.getRevealElement(),A),s=e.slideNumber&&/all|print/i.test(e.showSlideNumber),a=this.Reveal.getComputedSlideSize(window.innerWidth,window.innerHeight),n=Math.floor(a.width*(1+e.margin)),r=Math.floor(a.height*(1+e.margin)),o=a.width,d=a.height;await new Promise(requestAnimationFrame),l("@page{size:"+n+"px "+r+"px; margin: 0px;}"),l(".reveal section>img, .reveal section>video, .reveal section>iframe{max-width: "+o+"px; max-height:"+d+"px}"),document.documentElement.classList.add("reveal-print","print-pdf"),document.body.style.width=n+"px",document.body.style.height=r+"px";const c=this.Reveal.getViewportElement();let h;if(c){const e=window.getComputedStyle(c);e&&e.background&&(h=e.background)}await new Promise(requestAnimationFrame),this.Reveal.layoutSlideContents(o,d),await new Promise(requestAnimationFrame);const u=i.map((e=>e.scrollHeight)),g=[],p=i[0].parentNode;let v=1;i.forEach((function(i,a){if(!1===i.classList.contains("stack")){let l=(n-o)/2,c=(r-d)/2;const p=u[a];let m=Math.max(Math.ceil(p/r),1);m=Math.min(m,e.pdfMaxPagesPerSlide),(1===m&&e.center||i.classList.contains("center"))&&(c=Math.max((r-p)/2,0));const f=document.createElement("div");if(g.push(f),f.className="pdf-page",f.style.height=(r+e.pdfPageHeightOffset)*m+"px",h&&(f.style.background=h),f.appendChild(i),i.style.left=l+"px",i.style.top=c+"px",i.style.width=o+"px",this.Reveal.slideContent.layout(i),i.slideBackgroundElement&&f.insertBefore(i.slideBackgroundElement,i),e.showNotes){const t=this.Reveal.getSlideNotes(i);if(t){const i=8,s="string"==typeof e.showNotes?e.showNotes:"inline",a=document.createElement("div");a.classList.add("speaker-notes"),a.classList.add("speaker-notes-pdf"),a.setAttribute("data-layout",s),a.innerHTML=t,"separate-page"===s?g.push(a):(a.style.left=i+"px",a.style.bottom=i+"px",a.style.width=n-2*i+"px",f.appendChild(a))}}if(s){const e=document.createElement("div");e.classList.add("slide-number"),e.classList.add("slide-number-pdf"),e.innerHTML=v++,f.appendChild(e)}if(e.pdfSeparateFragments){const e=this.Reveal.fragments.sort(f.querySelectorAll(".fragment"),!0);let t;e.forEach((function(e,i){t&&t.forEach((function(e){e.classList.remove("current-fragment")})),e.forEach((function(e){e.classList.add("visible","current-fragment")}),this);const a=f.cloneNode(!0);if(s){const e=i+1;a.querySelector(".slide-number-pdf").innerHTML+="."+e}g.push(a),t=e}),this),e.forEach((function(e){e.forEach((function(e){e.classList.remove("visible","current-fragment")}))}))}else t(f,".fragment:not(.fade-out)").forEach((function(e){e.classList.add("visible")}))}}),this),await new Promise(requestAnimationFrame),g.forEach((e=>p.appendChild(e))),this.Reveal.slideContent.layout(this.Reveal.getSlidesElement()),this.Reveal.dispatchEvent({type:"pdf-ready"})}isActive(){return"print"===this.Reveal.getConfig().view}}class M{constructor(e){this.Reveal=e}configure(e,t){!1===e.fragments?this.disable():!1===t.fragments&&this.enable()}disable(){t(this.Reveal.getSlidesElement(),".fragment").forEach((e=>{e.classList.add("visible"),e.classList.remove("current-fragment")}))}enable(){t(this.Reveal.getSlidesElement(),".fragment").forEach((e=>{e.classList.remove("visible"),e.classList.remove("current-fragment")}))}availableRoutes(){let e=this.Reveal.getCurrentSlide();if(e&&this.Reveal.getConfig().fragments){let t=e.querySelectorAll(".fragment:not(.disabled)"),i=e.querySelectorAll(".fragment:not(.disabled):not(.visible)");return{prev:t.length-i.length>0,next:!!i.length}}return{prev:!1,next:!1}}sort(e,t=!1){e=Array.from(e);let i=[],s=[],a=[];e.forEach((e=>{if(e.hasAttribute("data-fragment-index")){let t=parseInt(e.getAttribute("data-fragment-index"),10);i[t]||(i[t]=[]),i[t].push(e)}else s.push([e])})),i=i.concat(s);let n=0;return i.forEach((e=>{e.forEach((e=>{a.push(e),e.setAttribute("data-fragment-index",n)})),n++})),!0===t?i:a}sortAll(){this.Reveal.getHorizontalSlides().forEach((e=>{let i=t(e,"section");i.forEach(((e,t)=>{this.sort(e.querySelectorAll(".fragment"))}),this),0===i.length&&this.sort(e.querySelectorAll(".fragment"))}))}update(e,t,i=this.Reveal.getCurrentSlide()){let s={shown:[],hidden:[]};if(i&&this.Reveal.getConfig().fragments&&(t=t||this.sort(i.querySelectorAll(".fragment"))).length){let a=0;if("number"!=typeof e){let t=this.sort(i.querySelectorAll(".fragment.visible")).pop();t&&(e=parseInt(t.getAttribute("data-fragment-index")||0,10))}Array.from(t).forEach(((t,i)=>{if(t.hasAttribute("data-fragment-index")&&(i=parseInt(t.getAttribute("data-fragment-index"),10)),a=Math.max(a,i),i<=e){let a=t.classList.contains("visible");t.classList.add("visible"),t.classList.remove("current-fragment"),i===e&&(this.Reveal.announceStatus(this.Reveal.getStatusText(t)),t.classList.add("current-fragment"),this.Reveal.slideContent.startEmbeddedContent(t)),a||(s.shown.push(t),this.Reveal.dispatchEvent({target:t,type:"visible",bubbles:!1}))}else{let e=t.classList.contains("visible");t.classList.remove("visible"),t.classList.remove("current-fragment"),e&&(this.Reveal.slideContent.stopEmbeddedContent(t),s.hidden.push(t),this.Reveal.dispatchEvent({target:t,type:"hidden",bubbles:!1}))}})),e="number"==typeof e?e:-1,e=Math.max(Math.min(e,a),-1),i.setAttribute("data-fragment",e)}return s}sync(e=this.Reveal.getCurrentSlide()){return this.sort(e.querySelectorAll(".fragment"))}goto(e,t=0){let i=this.Reveal.getCurrentSlide();if(i&&this.Reveal.getConfig().fragments){let s=this.sort(i.querySelectorAll(".fragment:not(.disabled)"));if(s.length){if("number"!=typeof e){let t=this.sort(i.querySelectorAll(".fragment:not(.disabled).visible")).pop();e=t?parseInt(t.getAttribute("data-fragment-index")||0,10):-1}e+=t;let a=this.update(e,s);return a.hidden.length&&this.Reveal.dispatchEvent({type:"fragmenthidden",data:{fragment:a.hidden[0],fragments:a.hidden}}),a.shown.length&&this.Reveal.dispatchEvent({type:"fragmentshown",data:{fragment:a.shown[0],fragments:a.shown}}),this.Reveal.controls.update(),this.Reveal.progress.update(),this.Reveal.getConfig().fragmentInURL&&this.Reveal.location.writeURL(),!(!a.shown.length&&!a.hidden.length)}}return!1}next(){return this.goto(null,1)}prev(){return this.goto(null,-1)}}class I{constructor(e){this.Reveal=e,this.active=!1,this.onSlideClicked=this.onSlideClicked.bind(this)}activate(){if(this.Reveal.getConfig().overview&&!this.Reveal.isScrollView()&&!this.isActive()){this.active=!0,this.Reveal.getRevealElement().classList.add("overview"),this.Reveal.cancelAutoSlide(),this.Reveal.getSlidesElement().appendChild(this.Reveal.getBackgroundsElement()),t(this.Reveal.getRevealElement(),A).forEach((e=>{e.classList.contains("stack")||e.addEventListener("click",this.onSlideClicked,!0)}));const e=70,i=this.Reveal.getComputedSlideSize();this.overviewSlideWidth=i.width+e,this.overviewSlideHeight=i.height+e,this.Reveal.getConfig().rtl&&(this.overviewSlideWidth=-this.overviewSlideWidth),this.Reveal.updateSlidesVisibility(),this.layout(),this.update(),this.Reveal.layout();const s=this.Reveal.getIndices();this.Reveal.dispatchEvent({type:"overviewshown",data:{indexh:s.h,indexv:s.v,currentSlide:this.Reveal.getCurrentSlide()}})}}layout(){this.Reveal.getHorizontalSlides().forEach(((e,i)=>{e.setAttribute("data-index-h",i),a(e,"translate3d("+i*this.overviewSlideWidth+"px, 0, 0)"),e.classList.contains("stack")&&t(e,"section").forEach(((e,t)=>{e.setAttribute("data-index-h",i),e.setAttribute("data-index-v",t),a(e,"translate3d(0, "+t*this.overviewSlideHeight+"px, 0)")}))})),Array.from(this.Reveal.getBackgroundsElement().childNodes).forEach(((e,i)=>{a(e,"translate3d("+i*this.overviewSlideWidth+"px, 0, 0)"),t(e,".slide-background").forEach(((e,t)=>{a(e,"translate3d(0, "+t*this.overviewSlideHeight+"px, 0)")}))}))}update(){const e=Math.min(window.innerWidth,window.innerHeight),t=Math.max(e/5,150)/e,i=this.Reveal.getIndices();this.Reveal.transformSlides({overview:["scale("+t+")","translateX("+-i.h*this.overviewSlideWidth+"px)","translateY("+-i.v*this.overviewSlideHeight+"px)"].join(" ")})}deactivate(){if(this.Reveal.getConfig().overview){this.active=!1,this.Reveal.getRevealElement().classList.remove("overview"),this.Reveal.getRevealElement().classList.add("overview-deactivating"),setTimeout((()=>{this.Reveal.getRevealElement().classList.remove("overview-deactivating")}),1),this.Reveal.getRevealElement().appendChild(this.Reveal.getBackgroundsElement()),t(this.Reveal.getRevealElement(),A).forEach((e=>{a(e,""),e.removeEventListener("click",this.onSlideClicked,!0)})),t(this.Reveal.getBackgroundsElement(),".slide-background").forEach((e=>{a(e,"")})),this.Reveal.transformSlides({overview:""});const e=this.Reveal.getIndices();this.Reveal.slide(e.h,e.v),this.Reveal.layout(),this.Reveal.cueAutoSlide(),this.Reveal.dispatchEvent({type:"overviewhidden",data:{indexh:e.h,indexv:e.v,currentSlide:this.Reveal.getCurrentSlide()}})}}toggle(e){"boolean"==typeof e?e?this.activate():this.deactivate():this.isActive()?this.deactivate():this.activate()}isActive(){return this.active}onSlideClicked(e){if(this.isActive()){e.preventDefault();let t=e.target;for(;t&&!t.nodeName.match(/section/gi);)t=t.parentNode;if(t&&!t.classList.contains("disabled")&&(this.deactivate(),t.nodeName.match(/section/gi))){let e=parseInt(t.getAttribute("data-index-h"),10),i=parseInt(t.getAttribute("data-index-v"),10);this.Reveal.slide(e,i)}}}}class B{constructor(e){this.Reveal=e,this.shortcuts={},this.bindings={},this.onDocumentKeyDown=this.onDocumentKeyDown.bind(this)}configure(e,t){"linear"===e.navigationMode?(this.shortcuts["→ , ↓ , SPACE , N , L , J"]="Next slide",this.shortcuts["← , ↑ , P , H , K"]="Previous slide"):(this.shortcuts["N , SPACE"]="Next slide",this.shortcuts["P , Shift SPACE"]="Previous slide",this.shortcuts["← , H"]="Navigate left",this.shortcuts["→ , L"]="Navigate right",this.shortcuts["↑ , K"]="Navigate up",this.shortcuts["↓ , J"]="Navigate down"),this.shortcuts["Alt + ←/↑/→/↓"]="Navigate without fragments",this.shortcuts["Shift + ←/↑/→/↓"]="Jump to first/last slide",this.shortcuts["B , ."]="Pause",this.shortcuts.F="Fullscreen",this.shortcuts.G="Jump to slide",this.shortcuts["ESC, O"]="Slide overview"}bind(){document.addEventListener("keydown",this.onDocumentKeyDown,!1)}unbind(){document.removeEventListener("keydown",this.onDocumentKeyDown,!1)}addKeyBinding(e,t){"object"==typeof e&&e.keyCode?this.bindings[e.keyCode]={callback:t,key:e.key,description:e.description}:this.bindings[e]={callback:t,key:null,description:null}}removeKeyBinding(e){delete this.bindings[e]}triggerKey(e){this.onDocumentKeyDown({keyCode:e})}registerKeyboardShortcut(e,t){this.shortcuts[e]=t}getShortcuts(){return this.shortcuts}getBindings(){return this.bindings}onDocumentKeyDown(e){let t=this.Reveal.getConfig();if("function"==typeof t.keyboardCondition&&!1===t.keyboardCondition(e))return!0;if("focused"===t.keyboardCondition&&!this.Reveal.isFocused())return!0;let i=e.keyCode,s=!this.Reveal.isAutoSliding();this.Reveal.onUserInput(e);let a=document.activeElement&&!0===document.activeElement.isContentEditable,n=document.activeElement&&document.activeElement.tagName&&/input|textarea/i.test(document.activeElement.tagName),r=document.activeElement&&document.activeElement.className&&/speaker-notes/i.test(document.activeElement.className),o=!(-1!==[32,37,38,39,40,78,80,191].indexOf(e.keyCode)&&e.shiftKey||e.altKey)&&(e.shiftKey||e.altKey||e.ctrlKey||e.metaKey);if(a||n||r||o)return;let l,d=[66,86,190,191];if("object"==typeof t.keyboard)for(l in t.keyboard)"togglePause"===t.keyboard[l]&&d.push(parseInt(l,10));if(this.Reveal.isPaused()&&-1===d.indexOf(i))return!1;let c="linear"===t.navigationMode||!this.Reveal.hasHorizontalSlides()||!this.Reveal.hasVerticalSlides(),h=!1;if("object"==typeof t.keyboard)for(l in t.keyboard)if(parseInt(l,10)===i){let i=t.keyboard[l];"function"==typeof i?i.apply(null,[e]):"string"==typeof i&&"function"==typeof this.Reveal[i]&&this.Reveal[i].call(),h=!0}if(!1===h)for(l in this.bindings)if(parseInt(l,10)===i){let t=this.bindings[l].callback;"function"==typeof t?t.apply(null,[e]):"string"==typeof t&&"function"==typeof this.Reveal[t]&&this.Reveal[t].call(),h=!0}!1===h&&(h=!0,80===i||33===i?this.Reveal.prev({skipFragments:e.altKey}):78===i||34===i?this.Reveal.next({skipFragments:e.altKey}):72===i||37===i?e.shiftKey?this.Reveal.slide(0):!this.Reveal.overview.isActive()&&c?this.Reveal.prev({skipFragments:e.altKey}):this.Reveal.left({skipFragments:e.altKey}):76===i||39===i?e.shiftKey?this.Reveal.slide(this.Reveal.getHorizontalSlides().length-1):!this.Reveal.overview.isActive()&&c?this.Reveal.next({skipFragments:e.altKey}):this.Reveal.right({skipFragments:e.altKey}):75===i||38===i?e.shiftKey?this.Reveal.slide(void 0,0):!this.Reveal.overview.isActive()&&c?this.Reveal.prev({skipFragments:e.altKey}):this.Reveal.up({skipFragments:e.altKey}):74===i||40===i?e.shiftKey?this.Reveal.slide(void 0,Number.MAX_VALUE):!this.Reveal.overview.isActive()&&c?this.Reveal.next({skipFragments:e.altKey}):this.Reveal.down({skipFragments:e.altKey}):36===i?this.Reveal.slide(0):35===i?this.Reveal.slide(this.Reveal.getHorizontalSlides().length-1):32===i?(this.Reveal.overview.isActive()&&this.Reveal.overview.deactivate(),e.shiftKey?this.Reveal.prev({skipFragments:e.altKey}):this.Reveal.next({skipFragments:e.altKey})):[58,59,66,86,190].includes(i)||191===i&&!e.shiftKey?this.Reveal.togglePause():70===i?(e=>{let t=(e=e||document.documentElement).requestFullscreen||e.webkitRequestFullscreen||e.webkitRequestFullScreen||e.mozRequestFullScreen||e.msRequestFullscreen;t&&t.apply(e)})(t.embedded?this.Reveal.getViewportElement():document.documentElement):65===i?t.autoSlideStoppable&&this.Reveal.toggleAutoSlide(s):71===i?t.jumpToSlide&&this.Reveal.toggleJumpToSlide():191===i&&e.shiftKey?this.Reveal.toggleHelp():h=!1),h?e.preventDefault&&e.preventDefault():27!==i&&79!==i||(!1===this.Reveal.closeOverlay()&&this.Reveal.overview.toggle(),e.preventDefault&&e.preventDefault()),this.Reveal.cueAutoSlide()}}class H{constructor(e){var t,i,s;s=1e3,(i="MAX_REPLACE_STATE_FREQUENCY")in(t=this)?Object.defineProperty(t,i,{value:s,enumerable:!0,configurable:!0,writable:!0}):t[i]=s,this.Reveal=e,this.writeURLTimeout=0,this.replaceStateTimestamp=0,this.onWindowHashChange=this.onWindowHashChange.bind(this)}bind(){window.addEventListener("hashchange",this.onWindowHashChange,!1)}unbind(){window.removeEventListener("hashchange",this.onWindowHashChange,!1)}getIndicesFromHash(e=window.location.hash,t={}){let i=e.replace(/^#\/?/,""),s=i.split("/");if(/^[0-9]*$/.test(s[0])||!i.length){const e=this.Reveal.getConfig();let i,a=e.hashOneBasedIndex||t.oneBasedIndex?1:0,n=parseInt(s[0],10)-a||0,r=parseInt(s[1],10)-a||0;return e.fragmentInURL&&(i=parseInt(s[2],10),isNaN(i)&&(i=void 0)),{h:n,v:r,f:i}}{let e,t;/\/[-\d]+$/g.test(i)&&(t=parseInt(i.split("/").pop(),10),t=isNaN(t)?void 0:t,i=i.split("/").shift());try{e=document.getElementById(decodeURIComponent(i)).closest(".slides section")}catch(e){}if(e)return{...this.Reveal.getIndices(e),f:t}}return null}readURL(){const e=this.Reveal.getIndices(),t=this.getIndicesFromHash();t?t.h===e.h&&t.v===e.v&&void 0===t.f||this.Reveal.slide(t.h,t.v,t.f):this.Reveal.slide(e.h||0,e.v||0)}writeURL(e){let t=this.Reveal.getConfig(),i=this.Reveal.getCurrentSlide();if(clearTimeout(this.writeURLTimeout),"number"==typeof e)this.writeURLTimeout=setTimeout(this.writeURL,e);else if(i){let e=this.getHash();t.history?window.location.hash=e:t.hash&&("/"===e?this.debouncedReplaceState(window.location.pathname+window.location.search):this.debouncedReplaceState("#"+e))}}replaceState(e){window.history.replaceState(null,null,e),this.replaceStateTimestamp=Date.now()}debouncedReplaceState(e){clearTimeout(this.replaceStateTimeout),Date.now()-this.replaceStateTimestamp>this.MAX_REPLACE_STATE_FREQUENCY?this.replaceState(e):this.replaceStateTimeout=setTimeout((()=>this.replaceState(e)),this.MAX_REPLACE_STATE_FREQUENCY)}getHash(e){let t="/",i=e||this.Reveal.getCurrentSlide(),s=i?i.getAttribute("id"):null;s&&(s=encodeURIComponent(s));let a=this.Reveal.getIndices(e);if(this.Reveal.getConfig().fragmentInURL||(a.f=void 0),"string"==typeof s&&s.length)t="/"+s,a.f>=0&&(t+="/"+a.f);else{let e=this.Reveal.getConfig().hashOneBasedIndex?1:0;(a.h>0||a.v>0||a.f>=0)&&(t+=a.h+e),(a.v>0||a.f>=0)&&(t+="/"+(a.v+e)),a.f>=0&&(t+="/"+a.f)}return t}onWindowHashChange(e){this.readURL()}}class D{constructor(e){this.Reveal=e,this.onNavigateLeftClicked=this.onNavigateLeftClicked.bind(this),this.onNavigateRightClicked=this.onNavigateRightClicked.bind(this),this.onNavigateUpClicked=this.onNavigateUpClicked.bind(this),this.onNavigateDownClicked=this.onNavigateDownClicked.bind(this),this.onNavigatePrevClicked=this.onNavigatePrevClicked.bind(this),this.onNavigateNextClicked=this.onNavigateNextClicked.bind(this)}render(){const e=this.Reveal.getConfig().rtl,i=this.Reveal.getRevealElement();this.element=document.createElement("aside"),this.element.className="controls",this.element.innerHTML=`\n\t\t\t\n\t\t\t\n\t\t\t`,this.Reveal.getRevealElement().appendChild(this.element),this.controlsLeft=t(i,".navigate-left"),this.controlsRight=t(i,".navigate-right"),this.controlsUp=t(i,".navigate-up"),this.controlsDown=t(i,".navigate-down"),this.controlsPrev=t(i,".navigate-prev"),this.controlsNext=t(i,".navigate-next"),this.controlsRightArrow=this.element.querySelector(".navigate-right"),this.controlsLeftArrow=this.element.querySelector(".navigate-left"),this.controlsDownArrow=this.element.querySelector(".navigate-down")}configure(e,t){this.element.style.display=e.controls?"block":"none",this.element.setAttribute("data-controls-layout",e.controlsLayout),this.element.setAttribute("data-controls-back-arrows",e.controlsBackArrows)}bind(){let e=["touchstart","click"];p&&(e=["touchstart"]),e.forEach((e=>{this.controlsLeft.forEach((t=>t.addEventListener(e,this.onNavigateLeftClicked,!1))),this.controlsRight.forEach((t=>t.addEventListener(e,this.onNavigateRightClicked,!1))),this.controlsUp.forEach((t=>t.addEventListener(e,this.onNavigateUpClicked,!1))),this.controlsDown.forEach((t=>t.addEventListener(e,this.onNavigateDownClicked,!1))),this.controlsPrev.forEach((t=>t.addEventListener(e,this.onNavigatePrevClicked,!1))),this.controlsNext.forEach((t=>t.addEventListener(e,this.onNavigateNextClicked,!1)))}))}unbind(){["touchstart","click"].forEach((e=>{this.controlsLeft.forEach((t=>t.removeEventListener(e,this.onNavigateLeftClicked,!1))),this.controlsRight.forEach((t=>t.removeEventListener(e,this.onNavigateRightClicked,!1))),this.controlsUp.forEach((t=>t.removeEventListener(e,this.onNavigateUpClicked,!1))),this.controlsDown.forEach((t=>t.removeEventListener(e,this.onNavigateDownClicked,!1))),this.controlsPrev.forEach((t=>t.removeEventListener(e,this.onNavigatePrevClicked,!1))),this.controlsNext.forEach((t=>t.removeEventListener(e,this.onNavigateNextClicked,!1)))}))}update(){let e=this.Reveal.availableRoutes();[...this.controlsLeft,...this.controlsRight,...this.controlsUp,...this.controlsDown,...this.controlsPrev,...this.controlsNext].forEach((e=>{e.classList.remove("enabled","fragmented"),e.setAttribute("disabled","disabled")})),e.left&&this.controlsLeft.forEach((e=>{e.classList.add("enabled"),e.removeAttribute("disabled")})),e.right&&this.controlsRight.forEach((e=>{e.classList.add("enabled"),e.removeAttribute("disabled")})),e.up&&this.controlsUp.forEach((e=>{e.classList.add("enabled"),e.removeAttribute("disabled")})),e.down&&this.controlsDown.forEach((e=>{e.classList.add("enabled"),e.removeAttribute("disabled")})),(e.left||e.up)&&this.controlsPrev.forEach((e=>{e.classList.add("enabled"),e.removeAttribute("disabled")})),(e.right||e.down)&&this.controlsNext.forEach((e=>{e.classList.add("enabled"),e.removeAttribute("disabled")}));let t=this.Reveal.getCurrentSlide();if(t){let e=this.Reveal.fragments.availableRoutes();e.prev&&this.controlsPrev.forEach((e=>{e.classList.add("fragmented","enabled"),e.removeAttribute("disabled")})),e.next&&this.controlsNext.forEach((e=>{e.classList.add("fragmented","enabled"),e.removeAttribute("disabled")})),this.Reveal.isVerticalSlide(t)?(e.prev&&this.controlsUp.forEach((e=>{e.classList.add("fragmented","enabled"),e.removeAttribute("disabled")})),e.next&&this.controlsDown.forEach((e=>{e.classList.add("fragmented","enabled"),e.removeAttribute("disabled")}))):(e.prev&&this.controlsLeft.forEach((e=>{e.classList.add("fragmented","enabled"),e.removeAttribute("disabled")})),e.next&&this.controlsRight.forEach((e=>{e.classList.add("fragmented","enabled"),e.removeAttribute("disabled")})))}if(this.Reveal.getConfig().controlsTutorial){let t=this.Reveal.getIndices();!this.Reveal.hasNavigatedVertically()&&e.down?this.controlsDownArrow.classList.add("highlight"):(this.controlsDownArrow.classList.remove("highlight"),this.Reveal.getConfig().rtl?!this.Reveal.hasNavigatedHorizontally()&&e.left&&0===t.v?this.controlsLeftArrow.classList.add("highlight"):this.controlsLeftArrow.classList.remove("highlight"):!this.Reveal.hasNavigatedHorizontally()&&e.right&&0===t.v?this.controlsRightArrow.classList.add("highlight"):this.controlsRightArrow.classList.remove("highlight"))}}destroy(){this.unbind(),this.element.remove()}onNavigateLeftClicked(e){e.preventDefault(),this.Reveal.onUserInput(),"linear"===this.Reveal.getConfig().navigationMode?this.Reveal.prev():this.Reveal.left()}onNavigateRightClicked(e){e.preventDefault(),this.Reveal.onUserInput(),"linear"===this.Reveal.getConfig().navigationMode?this.Reveal.next():this.Reveal.right()}onNavigateUpClicked(e){e.preventDefault(),this.Reveal.onUserInput(),this.Reveal.up()}onNavigateDownClicked(e){e.preventDefault(),this.Reveal.onUserInput(),this.Reveal.down()}onNavigatePrevClicked(e){e.preventDefault(),this.Reveal.onUserInput(),this.Reveal.prev()}onNavigateNextClicked(e){e.preventDefault(),this.Reveal.onUserInput(),this.Reveal.next()}}class F{constructor(e){this.Reveal=e,this.onProgressClicked=this.onProgressClicked.bind(this)}render(){this.element=document.createElement("div"),this.element.className="progress",this.Reveal.getRevealElement().appendChild(this.element),this.bar=document.createElement("span"),this.element.appendChild(this.bar)}configure(e,t){this.element.style.display=e.progress?"block":"none"}bind(){this.Reveal.getConfig().progress&&this.element&&this.element.addEventListener("click",this.onProgressClicked,!1)}unbind(){this.Reveal.getConfig().progress&&this.element&&this.element.removeEventListener("click",this.onProgressClicked,!1)}update(){if(this.Reveal.getConfig().progress&&this.bar){let e=this.Reveal.getProgress();this.Reveal.getTotalSlides()<2&&(e=0),this.bar.style.transform="scaleX("+e+")"}}getMaxWidth(){return this.Reveal.getRevealElement().offsetWidth}onProgressClicked(e){this.Reveal.onUserInput(e),e.preventDefault();let t=this.Reveal.getSlides(),i=t.length,s=Math.floor(e.clientX/this.getMaxWidth()*i);this.Reveal.getConfig().rtl&&(s=i-s);let a=this.Reveal.getIndices(t[s]);this.Reveal.slide(a.h,a.v)}destroy(){this.element.remove()}}class z{constructor(e){this.Reveal=e,this.lastMouseWheelStep=0,this.cursorHidden=!1,this.cursorInactiveTimeout=0,this.onDocumentCursorActive=this.onDocumentCursorActive.bind(this),this.onDocumentMouseScroll=this.onDocumentMouseScroll.bind(this)}configure(e,t){e.mouseWheel?(document.addEventListener("DOMMouseScroll",this.onDocumentMouseScroll,!1),document.addEventListener("mousewheel",this.onDocumentMouseScroll,!1)):(document.removeEventListener("DOMMouseScroll",this.onDocumentMouseScroll,!1),document.removeEventListener("mousewheel",this.onDocumentMouseScroll,!1)),e.hideInactiveCursor?(document.addEventListener("mousemove",this.onDocumentCursorActive,!1),document.addEventListener("mousedown",this.onDocumentCursorActive,!1)):(this.showCursor(),document.removeEventListener("mousemove",this.onDocumentCursorActive,!1),document.removeEventListener("mousedown",this.onDocumentCursorActive,!1))}showCursor(){this.cursorHidden&&(this.cursorHidden=!1,this.Reveal.getRevealElement().style.cursor="")}hideCursor(){!1===this.cursorHidden&&(this.cursorHidden=!0,this.Reveal.getRevealElement().style.cursor="none")}destroy(){this.showCursor(),document.removeEventListener("DOMMouseScroll",this.onDocumentMouseScroll,!1),document.removeEventListener("mousewheel",this.onDocumentMouseScroll,!1),document.removeEventListener("mousemove",this.onDocumentCursorActive,!1),document.removeEventListener("mousedown",this.onDocumentCursorActive,!1)}onDocumentCursorActive(e){this.showCursor(),clearTimeout(this.cursorInactiveTimeout),this.cursorInactiveTimeout=setTimeout(this.hideCursor.bind(this),this.Reveal.getConfig().hideCursorTime)}onDocumentMouseScroll(e){if(Date.now()-this.lastMouseWheelStep>1e3){this.lastMouseWheelStep=Date.now();let t=e.detail||-e.wheelDelta;t>0?this.Reveal.next():t<0&&this.Reveal.prev()}}}const q=(e,t)=>{const i=document.createElement("script");i.type="text/javascript",i.async=!1,i.defer=!1,i.src=e,"function"==typeof t&&(i.onload=i.onreadystatechange=e=>{("load"===e.type||/loaded|complete/.test(i.readyState))&&(i.onload=i.onreadystatechange=i.onerror=null,t())},i.onerror=e=>{i.onload=i.onreadystatechange=i.onerror=null,t(new Error("Failed loading script: "+i.src+"\n"+e))});const s=document.querySelector("head");s.insertBefore(i,s.lastChild)};class O{constructor(e){this.Reveal=e,this.state="idle",this.registeredPlugins={},this.asyncDependencies=[]}load(e,t){return this.state="loading",e.forEach(this.registerPlugin.bind(this)),new Promise((e=>{let i=[],s=0;if(t.forEach((e=>{e.condition&&!e.condition()||(e.async?this.asyncDependencies.push(e):i.push(e))})),i.length){s=i.length;const t=t=>{t&&"function"==typeof t.callback&&t.callback(),0==--s&&this.initPlugins().then(e)};i.forEach((e=>{"string"==typeof e.id?(this.registerPlugin(e),t(e)):"string"==typeof e.src?q(e.src,(()=>t(e))):(console.warn("Unrecognized plugin format",e),t())}))}else this.initPlugins().then(e)}))}initPlugins(){return new Promise((e=>{let t=Object.values(this.registeredPlugins),i=t.length;if(0===i)this.loadAsync().then(e);else{let s,a=()=>{0==--i?this.loadAsync().then(e):s()},n=0;s=()=>{let e=t[n++];if("function"==typeof e.init){let t=e.init(this.Reveal);t&&"function"==typeof t.then?t.then(a):a()}else a()},s()}}))}loadAsync(){return this.state="loaded",this.asyncDependencies.length&&this.asyncDependencies.forEach((e=>{q(e.src,e.callback)})),Promise.resolve()}registerPlugin(e){2===arguments.length&&"string"==typeof arguments[0]?(e=arguments[1]).id=arguments[0]:"function"==typeof e&&(e=e());let t=e.id;"string"!=typeof t?console.warn("Unrecognized plugin format; can't find plugin.id",e):void 0===this.registeredPlugins[t]?(this.registeredPlugins[t]=e,"loaded"===this.state&&"function"==typeof e.init&&e.init(this.Reveal)):console.warn('reveal.js: "'+t+'" plugin has already been registered')}hasPlugin(e){return!!this.registeredPlugins[e]}getPlugin(e){return this.registeredPlugins[e]}getRegisteredPlugins(){return this.registeredPlugins}destroy(){Object.values(this.registeredPlugins).forEach((e=>{"function"==typeof e.destroy&&e.destroy()})),this.registeredPlugins={},this.asyncDependencies=[]}}class W{constructor(e){this.Reveal=e,this.touchStartX=0,this.touchStartY=0,this.touchStartCount=0,this.touchCaptured=!1,this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onTouchStart=this.onTouchStart.bind(this),this.onTouchMove=this.onTouchMove.bind(this),this.onTouchEnd=this.onTouchEnd.bind(this)}bind(){let e=this.Reveal.getRevealElement();"onpointerdown"in window?(e.addEventListener("pointerdown",this.onPointerDown,!1),e.addEventListener("pointermove",this.onPointerMove,!1),e.addEventListener("pointerup",this.onPointerUp,!1)):window.navigator.msPointerEnabled?(e.addEventListener("MSPointerDown",this.onPointerDown,!1),e.addEventListener("MSPointerMove",this.onPointerMove,!1),e.addEventListener("MSPointerUp",this.onPointerUp,!1)):(e.addEventListener("touchstart",this.onTouchStart,!1),e.addEventListener("touchmove",this.onTouchMove,!1),e.addEventListener("touchend",this.onTouchEnd,!1))}unbind(){let e=this.Reveal.getRevealElement();e.removeEventListener("pointerdown",this.onPointerDown,!1),e.removeEventListener("pointermove",this.onPointerMove,!1),e.removeEventListener("pointerup",this.onPointerUp,!1),e.removeEventListener("MSPointerDown",this.onPointerDown,!1),e.removeEventListener("MSPointerMove",this.onPointerMove,!1),e.removeEventListener("MSPointerUp",this.onPointerUp,!1),e.removeEventListener("touchstart",this.onTouchStart,!1),e.removeEventListener("touchmove",this.onTouchMove,!1),e.removeEventListener("touchend",this.onTouchEnd,!1)}isSwipePrevented(e){if(n(e,"video, audio"))return!0;for(;e&&"function"==typeof e.hasAttribute;){if(e.hasAttribute("data-prevent-swipe"))return!0;e=e.parentNode}return!1}onTouchStart(e){if(this.isSwipePrevented(e.target))return!0;this.touchStartX=e.touches[0].clientX,this.touchStartY=e.touches[0].clientY,this.touchStartCount=e.touches.length}onTouchMove(e){if(this.isSwipePrevented(e.target))return!0;let t=this.Reveal.getConfig();if(this.touchCaptured)p&&e.preventDefault();else{this.Reveal.onUserInput(e);let i=e.touches[0].clientX,s=e.touches[0].clientY;if(1===e.touches.length&&2!==this.touchStartCount){let a=this.Reveal.availableRoutes({includeFragments:!0}),n=i-this.touchStartX,r=s-this.touchStartY;n>40&&Math.abs(n)>Math.abs(r)?(this.touchCaptured=!0,"linear"===t.navigationMode?t.rtl?this.Reveal.next():this.Reveal.prev():this.Reveal.left()):n<-40&&Math.abs(n)>Math.abs(r)?(this.touchCaptured=!0,"linear"===t.navigationMode?t.rtl?this.Reveal.prev():this.Reveal.next():this.Reveal.right()):r>40&&a.up?(this.touchCaptured=!0,"linear"===t.navigationMode?this.Reveal.prev():this.Reveal.up()):r<-40&&a.down&&(this.touchCaptured=!0,"linear"===t.navigationMode?this.Reveal.next():this.Reveal.down()),t.embedded?(this.touchCaptured||this.Reveal.isVerticalSlide())&&e.preventDefault():e.preventDefault()}}}onTouchEnd(e){this.touchCaptured=!1}onPointerDown(e){e.pointerType!==e.MSPOINTER_TYPE_TOUCH&&"touch"!==e.pointerType||(e.touches=[{clientX:e.clientX,clientY:e.clientY}],this.onTouchStart(e))}onPointerMove(e){e.pointerType!==e.MSPOINTER_TYPE_TOUCH&&"touch"!==e.pointerType||(e.touches=[{clientX:e.clientX,clientY:e.clientY}],this.onTouchMove(e))}onPointerUp(e){e.pointerType!==e.MSPOINTER_TYPE_TOUCH&&"touch"!==e.pointerType||(e.touches=[{clientX:e.clientX,clientY:e.clientY}],this.onTouchEnd(e))}}const U="focus",j="blur";class V{constructor(e){this.Reveal=e,this.onRevealPointerDown=this.onRevealPointerDown.bind(this),this.onDocumentPointerDown=this.onDocumentPointerDown.bind(this)}configure(e,t){e.embedded?this.blur():(this.focus(),this.unbind())}bind(){this.Reveal.getConfig().embedded&&this.Reveal.getRevealElement().addEventListener("pointerdown",this.onRevealPointerDown,!1)}unbind(){this.Reveal.getRevealElement().removeEventListener("pointerdown",this.onRevealPointerDown,!1),document.removeEventListener("pointerdown",this.onDocumentPointerDown,!1)}focus(){this.state!==U&&(this.Reveal.getRevealElement().classList.add("focused"),document.addEventListener("pointerdown",this.onDocumentPointerDown,!1)),this.state=U}blur(){this.state!==j&&(this.Reveal.getRevealElement().classList.remove("focused"),document.removeEventListener("pointerdown",this.onDocumentPointerDown,!1)),this.state=j}isFocused(){return this.state===U}destroy(){this.Reveal.getRevealElement().classList.remove("focused")}onRevealPointerDown(e){this.focus()}onDocumentPointerDown(e){let t=r(e.target,".reveal");t&&t===this.Reveal.getRevealElement()||this.blur()}}class K{constructor(e){this.Reveal=e}render(){this.element=document.createElement("div"),this.element.className="speaker-notes",this.element.setAttribute("data-prevent-swipe",""),this.element.setAttribute("tabindex","0"),this.Reveal.getRevealElement().appendChild(this.element)}configure(e,t){e.showNotes&&this.element.setAttribute("data-layout","string"==typeof e.showNotes?e.showNotes:"inline")}update(){this.Reveal.getConfig().showNotes&&this.element&&this.Reveal.getCurrentSlide()&&!this.Reveal.isScrollView()&&!this.Reveal.isPrintView()&&(this.element.innerHTML=this.getSlideNotes()||'No notes on this slide.')}updateVisibility(){this.Reveal.getConfig().showNotes&&this.hasNotes()&&!this.Reveal.isScrollView()&&!this.Reveal.isPrintView()?this.Reveal.getRevealElement().classList.add("show-notes"):this.Reveal.getRevealElement().classList.remove("show-notes")}hasNotes(){return this.Reveal.getSlidesElement().querySelectorAll("[data-notes], aside.notes").length>0}isSpeakerNotesWindow(){return!!window.location.search.match(/receiver/gi)}getSlideNotes(e=this.Reveal.getCurrentSlide()){if(e.hasAttribute("data-notes"))return e.getAttribute("data-notes");let t=e.querySelectorAll("aside.notes");return t?Array.from(t).map((e=>e.innerHTML)).join("\n"):null}destroy(){this.element.remove()}}class ${constructor(e,t){this.diameter=100,this.diameter2=this.diameter/2,this.thickness=6,this.playing=!1,this.progress=0,this.progressOffset=1,this.container=e,this.progressCheck=t,this.canvas=document.createElement("canvas"),this.canvas.className="playback",this.canvas.width=this.diameter,this.canvas.height=this.diameter,this.canvas.style.width=this.diameter2+"px",this.canvas.style.height=this.diameter2+"px",this.context=this.canvas.getContext("2d"),this.container.appendChild(this.canvas),this.render()}setPlaying(e){const t=this.playing;this.playing=e,!t&&this.playing?this.animate():this.render()}animate(){const e=this.progress;this.progress=this.progressCheck(),e>.8&&this.progress<.2&&(this.progressOffset=this.progress),this.render(),this.playing&&requestAnimationFrame(this.animate.bind(this))}render(){let e=this.playing?this.progress:0,t=this.diameter2-this.thickness,i=this.diameter2,s=this.diameter2,a=28;this.progressOffset+=.1*(1-this.progressOffset);const n=-Math.PI/2+e*(2*Math.PI),r=-Math.PI/2+this.progressOffset*(2*Math.PI);this.context.save(),this.context.clearRect(0,0,this.diameter,this.diameter),this.context.beginPath(),this.context.arc(i,s,t+4,0,2*Math.PI,!1),this.context.fillStyle="rgba( 0, 0, 0, 0.4 )",this.context.fill(),this.context.beginPath(),this.context.arc(i,s,t,0,2*Math.PI,!1),this.context.lineWidth=this.thickness,this.context.strokeStyle="rgba( 255, 255, 255, 0.2 )",this.context.stroke(),this.playing&&(this.context.beginPath(),this.context.arc(i,s,t,r,n,!1),this.context.lineWidth=this.thickness,this.context.strokeStyle="#fff",this.context.stroke()),this.context.translate(i-14,s-14),this.playing?(this.context.fillStyle="#fff",this.context.fillRect(0,0,10,a),this.context.fillRect(18,0,10,a)):(this.context.beginPath(),this.context.translate(4,0),this.context.moveTo(0,0),this.context.lineTo(24,14),this.context.lineTo(0,a),this.context.fillStyle="#fff",this.context.fill()),this.context.restore()}on(e,t){this.canvas.addEventListener(e,t,!1)}off(e,t){this.canvas.removeEventListener(e,t,!1)}destroy(){this.playing=!1,this.canvas.parentNode&&this.container.removeChild(this.canvas)}}var X={width:960,height:700,margin:.04,minScale:.2,maxScale:2,controls:!0,controlsTutorial:!0,controlsLayout:"bottom-right",controlsBackArrows:"faded",progress:!0,slideNumber:!1,showSlideNumber:"all",hashOneBasedIndex:!1,hash:!1,respondToHashChanges:!0,jumpToSlide:!0,history:!1,keyboard:!0,keyboardCondition:null,disableLayout:!1,overview:!0,center:!0,touch:!0,loop:!1,rtl:!1,navigationMode:"default",shuffle:!1,fragments:!0,fragmentInURL:!0,embedded:!1,help:!0,pause:!0,showNotes:!1,showHiddenSlides:!1,autoPlayMedia:null,preloadIframes:null,autoAnimate:!0,autoAnimateMatcher:null,autoAnimateEasing:"ease",autoAnimateDuration:1,autoAnimateUnmatched:!0,autoAnimateStyles:["opacity","color","background-color","padding","font-size","line-height","letter-spacing","border-width","border-color","border-radius","outline","outline-offset"],autoSlide:0,autoSlideStoppable:!0,autoSlideMethod:null,defaultTiming:null,mouseWheel:!1,previewLinks:!1,postMessage:!0,postMessageEvents:!1,focusBodyOnPageVisibilityChange:!0,transition:"slide",transitionSpeed:"default",backgroundTransition:"fade",parallaxBackgroundImage:"",parallaxBackgroundSize:"",parallaxBackgroundRepeat:"",parallaxBackgroundPosition:"",parallaxBackgroundHorizontal:null,parallaxBackgroundVertical:null,view:null,scrollLayout:"full",scrollSnap:"mandatory",scrollProgress:"auto",scrollActivationWidth:435,pdfMaxPagesPerSlide:Number.POSITIVE_INFINITY,pdfSeparateFragments:!0,pdfPageHeightOffset:-1,viewDistance:3,mobileViewDistance:2,display:"block",hideInactiveCursor:!0,hideCursorTime:5e3,sortFragmentsOnSync:!0,dependencies:[],plugins:[]};const Y="4.6.0";function _(n,l){arguments.length<2&&(l=arguments[0],n=document.querySelector(".reveal"));const h={};let u,p,v,m,f,E={},C=!1,x={hasNavigatedHorizontally:!1,hasNavigatedVertically:!1},q=[],U=1,j={layout:"",overview:""},_={},J="idle",G=0,Q=0,Z=-1,ee=!1,te=new y(h),ie=new b(h),se=new w(h),ae=new P(h),ne=new S(h),re=new T(h),oe=new N(h),le=new M(h),de=new I(h),ce=new B(h),he=new H(h),ue=new D(h),ge=new F(h),pe=new z(h),ve=new O(h),me=new V(h),fe=new W(h),ye=new K(h);function be(e){if(!n)throw'Unable to find presentation root (
).';if(_.wrapper=n,_.slides=n.querySelector(".slides"),!_.slides)throw'Unable to find slides container (
).';return E={...X,...E,...l,...e,...d()},/print-pdf/gi.test(window.location.search)&&(E.view="print"),we(),window.addEventListener("load",Xe,!1),ve.load(E.plugins,E.dependencies).then(Ee),new Promise((e=>h.on("ready",e)))}function we(){!0===E.embedded?_.viewport=r(n,".reveal-viewport")||n:(_.viewport=document.body,document.documentElement.classList.add("reveal-full-page")),_.viewport.classList.add("reveal-viewport")}function Ee(){C=!0,Ae(),Re(),Te(),xe(),Pe(),vt(),Ne(),ne.update(!0),Se(),he.readURL(),setTimeout((()=>{_.slides.classList.remove("no-transition"),_.wrapper.classList.add("ready"),ze({type:"ready",data:{indexh:u,indexv:p,currentSlide:m}})}),1)}function Se(){const e="print"===E.view,t="scroll"===E.view||"reader"===E.view;(e||t)&&(e?Ie():fe.unbind(),_.viewport.classList.add("loading-scroll-mode"),e?"complete"===document.readyState?oe.activate():window.addEventListener("load",(()=>oe.activate())):re.activate())}function Ae(){E.showHiddenSlides||t(_.wrapper,'section[data-visibility="hidden"]').forEach((e=>{const t=e.parentNode;1===t.childElementCount&&/section/i.test(t.nodeName)?t.remove():e.remove()}))}function Re(){_.slides.classList.add("no-transition"),g?_.wrapper.classList.add("no-hover"):_.wrapper.classList.remove("no-hover"),ne.render(),ie.render(),se.render(),ue.render(),ge.render(),ye.render(),_.pauseOverlay=o(_.wrapper,"div","pause-overlay",E.controls?'':null),_.statusElement=ke(),_.wrapper.setAttribute("role","application")}function ke(){let e=_.wrapper.querySelector(".aria-status");return e||(e=document.createElement("div"),e.style.position="absolute",e.style.height="1px",e.style.width="1px",e.style.overflow="hidden",e.style.clip="rect( 1px, 1px, 1px, 1px )",e.classList.add("aria-status"),e.setAttribute("aria-live","polite"),e.setAttribute("aria-atomic","true"),_.wrapper.appendChild(e)),e}function Le(e){_.statusElement.textContent=e}function Ce(e){let t="";if(3===e.nodeType)t+=e.textContent;else if(1===e.nodeType){let i=e.getAttribute("aria-hidden"),s="none"===window.getComputedStyle(e).display;"true"===i||s||Array.from(e.childNodes).forEach((e=>{t+=Ce(e)}))}return t=t.trim(),""===t?"":t+" "}function xe(){setInterval((()=>{(!re.isActive()&&0!==_.wrapper.scrollTop||0!==_.wrapper.scrollLeft)&&(_.wrapper.scrollTop=0,_.wrapper.scrollLeft=0)}),1e3)}function Pe(){document.addEventListener("fullscreenchange",Zt),document.addEventListener("webkitfullscreenchange",Zt)}function Te(){E.postMessage&&window.addEventListener("message",Yt,!1)}function Ne(t){const s={...E};if("object"==typeof t&&e(E,t),!1===h.isReady())return;const a=_.wrapper.querySelectorAll(A).length;_.wrapper.classList.remove(s.transition),_.wrapper.classList.add(E.transition),_.wrapper.setAttribute("data-transition-speed",E.transitionSpeed),_.wrapper.setAttribute("data-background-transition",E.backgroundTransition),_.viewport.style.setProperty("--slide-width","string"==typeof E.width?E.width:E.width+"px"),_.viewport.style.setProperty("--slide-height","string"==typeof E.height?E.height:E.height+"px"),E.shuffle&&mt(),i(_.wrapper,"embedded",E.embedded),i(_.wrapper,"rtl",E.rtl),i(_.wrapper,"center",E.center),!1===E.pause&&at(),E.previewLinks?(We(),Ue("[data-preview-link=false]")):(Ue(),We("[data-preview-link]:not([data-preview-link=false])")),ae.reset(),f&&(f.destroy(),f=null),a>1&&E.autoSlide&&E.autoSlideStoppable&&(f=new $(_.wrapper,(()=>Math.min(Math.max((Date.now()-Z)/G,0),1))),f.on("click",ti),ee=!1),"default"!==E.navigationMode?_.wrapper.setAttribute("data-navigation-mode",E.navigationMode):_.wrapper.removeAttribute("data-navigation-mode"),ye.configure(E,s),me.configure(E,s),pe.configure(E,s),ue.configure(E,s),ge.configure(E,s),ce.configure(E,s),le.configure(E,s),ie.configure(E,s),gt()}function Me(){window.addEventListener("resize",Gt,!1),E.touch&&fe.bind(),E.keyboard&&ce.bind(),E.progress&&ge.bind(),E.respondToHashChanges&&he.bind(),ue.bind(),me.bind(),_.slides.addEventListener("click",Jt,!1),_.slides.addEventListener("transitionend",_t,!1),_.pauseOverlay.addEventListener("click",at,!1),E.focusBodyOnPageVisibilityChange&&document.addEventListener("visibilitychange",Qt,!1)}function Ie(){fe.unbind(),me.unbind(),ce.unbind(),ue.unbind(),ge.unbind(),he.unbind(),window.removeEventListener("resize",Gt,!1),_.slides.removeEventListener("click",Jt,!1),_.slides.removeEventListener("transitionend",_t,!1),_.pauseOverlay.removeEventListener("click",at,!1)}function Be(){Ie(),zt(),Ue(),ye.destroy(),me.destroy(),ve.destroy(),pe.destroy(),ue.destroy(),ge.destroy(),ne.destroy(),ie.destroy(),se.destroy(),document.removeEventListener("fullscreenchange",Zt),document.removeEventListener("webkitfullscreenchange",Zt),document.removeEventListener("visibilitychange",Qt,!1),window.removeEventListener("message",Yt,!1),window.removeEventListener("load",Xe,!1),_.pauseOverlay&&_.pauseOverlay.remove(),_.statusElement&&_.statusElement.remove(),document.documentElement.classList.remove("reveal-full-page"),_.wrapper.classList.remove("ready","center","has-horizontal-slides","has-vertical-slides"),_.wrapper.removeAttribute("data-transition-speed"),_.wrapper.removeAttribute("data-background-transition"),_.viewport.classList.remove("reveal-viewport"),_.viewport.style.removeProperty("--slide-width"),_.viewport.style.removeProperty("--slide-height"),_.slides.style.removeProperty("width"),_.slides.style.removeProperty("height"),_.slides.style.removeProperty("zoom"),_.slides.style.removeProperty("left"),_.slides.style.removeProperty("top"),_.slides.style.removeProperty("bottom"),_.slides.style.removeProperty("right"),_.slides.style.removeProperty("transform"),Array.from(_.wrapper.querySelectorAll(A)).forEach((e=>{e.style.removeProperty("display"),e.style.removeProperty("top"),e.removeAttribute("hidden"),e.removeAttribute("aria-hidden")}))}function He(e,t,i){n.addEventListener(e,t,i)}function De(e,t,i){n.removeEventListener(e,t,i)}function Fe(e){"string"==typeof e.layout&&(j.layout=e.layout),"string"==typeof e.overview&&(j.overview=e.overview),j.layout?a(_.slides,j.layout+" "+j.overview):a(_.slides,j.overview)}function ze({target:t=_.wrapper,type:i,data:s,bubbles:a=!0}){let n=document.createEvent("HTMLEvents",1,2);return n.initEvent(i,a,!0),e(n,s),t.dispatchEvent(n),t===_.wrapper&&Oe(i),n}function qe(e){ze({type:"slidechanged",data:{indexh:u,indexv:p,previousSlide:v,currentSlide:m,origin:e}})}function Oe(t,i){if(E.postMessageEvents&&window.parent!==window.self){let s={namespace:"reveal",eventName:t,state:Ht()};e(s,i),window.parent.postMessage(JSON.stringify(s),"*")}}function We(e="a"){Array.from(_.wrapper.querySelectorAll(e)).forEach((e=>{/^(http|www)/gi.test(e.getAttribute("href"))&&e.addEventListener("click",ei,!1)}))}function Ue(e="a"){Array.from(_.wrapper.querySelectorAll(e)).forEach((e=>{/^(http|www)/gi.test(e.getAttribute("href"))&&e.removeEventListener("click",ei,!1)}))}function je(e){$e(),_.overlay=document.createElement("div"),_.overlay.classList.add("overlay"),_.overlay.classList.add("overlay-preview"),_.wrapper.appendChild(_.overlay),_.overlay.innerHTML=`
\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tUnable to load iframe. This is likely due to the site's policy (x-frame-options).\n\t\t\t\t\n\t\t\t
`,_.overlay.querySelector("iframe").addEventListener("load",(e=>{_.overlay.classList.add("loaded")}),!1),_.overlay.querySelector(".close").addEventListener("click",(e=>{$e(),e.preventDefault()}),!1),_.overlay.querySelector(".external").addEventListener("click",(e=>{$e()}),!1)}function Ve(e){"boolean"==typeof e?e?Ke():$e():_.overlay?$e():Ke()}function Ke(){if(E.help){$e(),_.overlay=document.createElement("div"),_.overlay.classList.add("overlay"),_.overlay.classList.add("overlay-help"),_.wrapper.appendChild(_.overlay);let e='

Keyboard Shortcuts


',t=ce.getShortcuts(),i=ce.getBindings();e+="";for(let i in t)e+=``;for(let t in i)i[t].key&&i[t].description&&(e+=``);e+="
KEYACTION
${i}${t[i]}
${i[t].key}${i[t].description}
",_.overlay.innerHTML=`\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
${e}
\n\t\t\t\t
\n\t\t\t`,_.overlay.querySelector(".close").addEventListener("click",(e=>{$e(),e.preventDefault()}),!1)}}function $e(){return!!_.overlay&&(_.overlay.parentNode.removeChild(_.overlay),_.overlay=null,!0)}function Xe(){if(_.wrapper&&!oe.isActive()){const e=_.viewport.offsetWidth,t=_.viewport.offsetHeight;if(!E.disableLayout){g&&!E.embedded&&document.documentElement.style.setProperty("--vh",.01*window.innerHeight+"px");const i=re.isActive()?_e(e,t):_e(),s=U;Ye(E.width,E.height),_.slides.style.width=i.width+"px",_.slides.style.height=i.height+"px",U=Math.min(i.presentationWidth/i.width,i.presentationHeight/i.height),U=Math.max(U,E.minScale),U=Math.min(U,E.maxScale),1===U||re.isActive()?(_.slides.style.zoom="",_.slides.style.left="",_.slides.style.top="",_.slides.style.bottom="",_.slides.style.right="",Fe({layout:""})):(_.slides.style.zoom="",_.slides.style.left="50%",_.slides.style.top="50%",_.slides.style.bottom="auto",_.slides.style.right="auto",Fe({layout:"translate(-50%, -50%) scale("+U+")"}));const a=Array.from(_.wrapper.querySelectorAll(A));for(let e=0,t=a.length;e0&&i.presentationWidth<=E.scrollActivationWidth?re.isActive()||re.activate():re.isActive()&&re.deactivate())}_.viewport.style.setProperty("--slide-scale",U),_.viewport.style.setProperty("--viewport-width",e+"px"),_.viewport.style.setProperty("--viewport-height",t+"px"),re.layout(),ge.update(),ne.updateParallax(),de.isActive()&&de.update()}}function Ye(e,i){t(_.slides,"section > .stretch, section > .r-stretch").forEach((t=>{let s=c(t,i);if(/(img|video)/gi.test(t.nodeName)){const i=t.naturalWidth||t.videoWidth,a=t.naturalHeight||t.videoHeight,n=Math.min(e/i,s/a);t.style.width=i*n+"px",t.style.height=a*n+"px"}else t.style.width=e+"px",t.style.height=s+"px"}))}function _e(e,t){let i=E.width,s=E.height;E.disableLayout&&(i=_.slides.offsetWidth,s=_.slides.offsetHeight);const a={width:i,height:s,presentationWidth:e||_.wrapper.offsetWidth,presentationHeight:t||_.wrapper.offsetHeight};return a.presentationWidth-=a.presentationWidth*E.margin,a.presentationHeight-=a.presentationHeight*E.margin,"string"==typeof a.width&&/%$/.test(a.width)&&(a.width=parseInt(a.width,10)/100*a.presentationWidth),"string"==typeof a.height&&/%$/.test(a.height)&&(a.height=parseInt(a.height,10)/100*a.presentationHeight),a}function Je(e,t){"object"==typeof e&&"function"==typeof e.setAttribute&&e.setAttribute("data-previous-indexv",t||0)}function Ge(e){if("object"==typeof e&&"function"==typeof e.setAttribute&&e.classList.contains("stack")){const t=e.hasAttribute("data-start-indexv")?"data-start-indexv":"data-previous-indexv";return parseInt(e.getAttribute(t)||0,10)}return 0}function Qe(e=m){return e&&e.parentNode&&!!e.parentNode.nodeName.match(/section/i)}function Ze(e=m){return e.classList.contains(".stack")||null!==e.querySelector("section")}function et(){return!(!m||!Qe(m))&&!m.nextElementSibling}function tt(){return 0===u&&0===p}function it(){return!!m&&(!m.nextElementSibling&&(!Qe(m)||!m.parentNode.nextElementSibling))}function st(){if(E.pause){const e=_.wrapper.classList.contains("paused");zt(),_.wrapper.classList.add("paused"),!1===e&&ze({type:"paused"})}}function at(){const e=_.wrapper.classList.contains("paused");_.wrapper.classList.remove("paused"),Ft(),e&&ze({type:"resumed"})}function nt(e){"boolean"==typeof e?e?st():at():rt()?at():st()}function rt(){return _.wrapper.classList.contains("paused")}function ot(e){"boolean"==typeof e?e?se.show():se.hide():se.isVisible()?se.hide():se.show()}function lt(e){"boolean"==typeof e?e?Ot():qt():ee?Ot():qt()}function dt(){return!(!G||ee)}function ct(e,t,i,s){if(ze({type:"beforeslidechange",data:{indexh:void 0===e?u:e,indexv:void 0===t?p:t,origin:s}}).defaultPrevented)return;v=m;const a=_.wrapper.querySelectorAll(R);if(re.isActive()){const i=re.getSlideByIndices(e,t);return void(i&&re.scrollToSlide(i))}if(0===a.length)return;void 0!==t||de.isActive()||(t=Ge(a[e])),v&&v.parentNode&&v.parentNode.classList.contains("stack")&&Je(v.parentNode,p);const n=q.concat();q.length=0;let r=u||0,o=p||0;u=ft(R,void 0===e?u:e),p=ft(k,void 0===t?p:t);let l=u!==r||p!==o;l||(v=null);let d=a[u],c=d.querySelectorAll("section");m=c[p]||d;let h=!1;l&&v&&m&&!de.isActive()&&(J="running",h=ht(v,m,r,o),h&&_.slides.classList.add("disable-slide-transitions")),wt(),Xe(),de.isActive()&&de.update(),void 0!==i&&le.goto(i),v&&v!==m&&(v.classList.remove("present"),v.setAttribute("aria-hidden","true"),tt()&&setTimeout((()=>{xt().forEach((e=>{Je(e,0)}))}),0));e:for(let e=0,t=q.length;e{Le(Ce(m))})),ge.update(),ue.update(),ye.update(),ne.update(),ne.updateParallax(),ie.update(),le.update(),he.writeURL(),Ft(),h&&(setTimeout((()=>{_.slides.classList.remove("disable-slide-transitions")}),0),E.autoAnimate&&ae.run(v,m))}function ht(e,t,i,s){return e.hasAttribute("data-auto-animate")&&t.hasAttribute("data-auto-animate")&&e.getAttribute("data-auto-animate-id")===t.getAttribute("data-auto-animate-id")&&!(u>i||p>s?t:e).hasAttribute("data-auto-animate-restart")}function ut(e,t,i){let s=u||0;u=t,p=i;const a=m!==e;v=m,m=e,m&&v&&E.autoAnimate&&ht(v,m,s,p)&&ae.run(v,m),a&&(v&&(te.stopEmbeddedContent(v),te.stopEmbeddedContent(v.slideBackgroundElement)),te.startEmbeddedContent(m),te.startEmbeddedContent(m.slideBackgroundElement)),requestAnimationFrame((()=>{Le(Ce(m))})),qe()}function gt(){Ie(),Me(),Xe(),G=E.autoSlide,Ft(),ne.create(),he.writeURL(),!0===E.sortFragmentsOnSync&&le.sortAll(),ue.update(),ge.update(),wt(),ye.update(),ye.updateVisibility(),ne.update(!0),ie.update(),te.formatEmbeddedContent(),!1===E.autoPlayMedia?te.stopEmbeddedContent(m,{unloadIframes:!1}):te.startEmbeddedContent(m),de.isActive()&&de.layout()}function pt(e=m){ne.sync(e),le.sync(e),te.load(e),ne.update(),ye.update()}function vt(){Lt().forEach((e=>{t(e,"section").forEach(((e,t)=>{t>0&&(e.classList.remove("present"),e.classList.remove("past"),e.classList.add("future"),e.setAttribute("aria-hidden","true"))}))}))}function mt(e=Lt()){e.forEach(((t,i)=>{let s=e[Math.floor(Math.random()*e.length)];s.parentNode===t.parentNode&&t.parentNode.insertBefore(t,s);let a=t.querySelectorAll("section");a.length&&mt(a)}))}function ft(e,i){let s=t(_.wrapper,e),a=s.length,n=re.isActive()||oe.isActive(),r=!1,o=!1;if(a){E.loop&&(i>=a&&(r=!0),(i%=a)<0&&(i=a+i,o=!0)),i=Math.max(Math.min(i,a-1),0);for(let e=0;ei?(t.classList.add(a?"past":"future"),E.fragments&&bt(t)):e===i&&E.fragments&&(r?bt(t):o&&yt(t))}let e=s[i],t=e.classList.contains("present");e.classList.add("present"),e.removeAttribute("hidden"),e.removeAttribute("aria-hidden"),t||ze({target:e,type:"visible",bubbles:!1});let l=e.getAttribute("data-state");l&&(q=q.concat(l.split(" ")))}else i=0;return i}function yt(e){t(e,".fragment").forEach((e=>{e.classList.add("visible"),e.classList.remove("current-fragment")}))}function bt(e){t(e,".fragment.visible").forEach((e=>{e.classList.remove("visible","current-fragment")}))}function wt(){let e,i,s=Lt(),a=s.length;if(a&&void 0!==u){let n=de.isActive()?10:E.viewDistance;g&&(n=de.isActive()?6:E.mobileViewDistance),oe.isActive()&&(n=Number.MAX_VALUE);for(let r=0;r0,right:u0,down:p1&&(s.left=!0,s.right=!0),i.length>1&&(s.up=!0,s.down=!0)),t.length>1&&"linear"===E.navigationMode&&(s.right=s.right||s.down,s.left=s.left||s.up),!0===e){let e=le.availableRoutes();s.left=s.left||e.prev,s.up=s.up||e.prev,s.down=s.down||e.next,s.right=s.right||e.next}if(E.rtl){let e=s.left;s.left=s.right,s.right=e}return s}function St(e=m){let t=Lt(),i=0;e:for(let s=0;s0){let i=.9;t+=m.querySelectorAll(".fragment.visible").length/e.length*i}}return Math.min(t/(e-1),1)}function Rt(e){let i,s=u,a=p;if(e)if(re.isActive())s=parseInt(e.getAttribute("data-index-h"),10),e.getAttribute("data-index-v")&&(a=parseInt(e.getAttribute("data-index-v"),10));else{let i=Qe(e),n=i?e.parentNode:e,r=Lt();s=Math.max(r.indexOf(n),0),a=void 0,i&&(a=Math.max(t(e.parentNode,"section").indexOf(e),0))}if(!e&&m){if(m.querySelectorAll(".fragment").length>0){let e=m.querySelector(".current-fragment");i=e&&e.hasAttribute("data-fragment-index")?parseInt(e.getAttribute("data-fragment-index"),10):m.querySelectorAll(".fragment.visible").length-1}}return{h:s,v:a,f:i}}function kt(){return t(_.wrapper,A+':not(.stack):not([data-visibility="uncounted"])')}function Lt(){return t(_.wrapper,R)}function Ct(){return t(_.wrapper,".slides>section>section")}function xt(){return t(_.wrapper,R+".stack")}function Pt(){return Lt().length>1}function Tt(){return Ct().length>1}function Nt(){return kt().map((e=>{let t={};for(let i=0;i{e.hasAttribute("data-autoplay")&&G&&1e3*e.duration/e.playbackRate>G&&(G=1e3*e.duration/e.playbackRate+1e3)}))),!G||ee||rt()||de.isActive()||it()&&!le.availableRoutes().next&&!0!==E.loop||(Q=setTimeout((()=>{"function"==typeof E.autoSlideMethod?E.autoSlideMethod():$t(),Ft()}),G),Z=Date.now()),f&&f.setPlaying(-1!==Q)}}function zt(){clearTimeout(Q),Q=-1}function qt(){G&&!ee&&(ee=!0,ze({type:"autoslidepaused"}),clearTimeout(Q),f&&f.setPlaying(!1))}function Ot(){G&&ee&&(ee=!1,ze({type:"autoslideresumed"}),Ft())}function Wt({skipFragments:e=!1}={}){x.hasNavigatedHorizontally=!0,E.rtl?(de.isActive()||e||!1===le.next())&&Et().left&&ct(u+1,"grid"===E.navigationMode?p:void 0):(de.isActive()||e||!1===le.prev())&&Et().left&&ct(u-1,"grid"===E.navigationMode?p:void 0)}function Ut({skipFragments:e=!1}={}){x.hasNavigatedHorizontally=!0,E.rtl?(de.isActive()||e||!1===le.prev())&&Et().right&&ct(u-1,"grid"===E.navigationMode?p:void 0):(de.isActive()||e||!1===le.next())&&Et().right&&ct(u+1,"grid"===E.navigationMode?p:void 0)}function jt({skipFragments:e=!1}={}){(de.isActive()||e||!1===le.prev())&&Et().up&&ct(u,p-1)}function Vt({skipFragments:e=!1}={}){x.hasNavigatedVertically=!0,(de.isActive()||e||!1===le.next())&&Et().down&&ct(u,p+1)}function Kt({skipFragments:e=!1}={}){if(e||!1===le.prev())if(Et().up)jt({skipFragments:e});else{let i;if(i=E.rtl?t(_.wrapper,R+".future").pop():t(_.wrapper,R+".past").pop(),i&&i.classList.contains("stack")){let e=i.querySelectorAll("section").length-1||void 0;ct(u-1,e)}else Wt({skipFragments:e})}}function $t({skipFragments:e=!1}={}){if(x.hasNavigatedHorizontally=!0,x.hasNavigatedVertically=!0,e||!1===le.next()){let t=Et();t.down&&t.right&&E.loop&&et()&&(t.down=!1),t.down?Vt({skipFragments:e}):E.rtl?Wt({skipFragments:e}):Ut({skipFragments:e})}}function Xt(e){E.autoSlideStoppable&&qt()}function Yt(e){let t=e.data;if("string"==typeof t&&"{"===t.charAt(0)&&"}"===t.charAt(t.length-1)&&(t=JSON.parse(t),t.method&&"function"==typeof h[t.method]))if(!1===L.test(t.method)){const e=h[t.method].apply(h,t.args);Oe("callback",{method:t.method,result:e})}else console.warn('reveal.js: "'+t.method+'" is is blacklisted from the postMessage API')}function _t(e){"running"===J&&/section/gi.test(e.target.nodeName)&&(J="idle",ze({type:"slidetransitionend",data:{indexh:u,indexv:p,previousSlide:v,currentSlide:m}}))}function Jt(e){const t=r(e.target,'a[href^="#"]');if(t){const i=t.getAttribute("href"),s=he.getIndicesFromHash(i);s&&(h.slide(s.h,s.v,s.f),e.preventDefault())}}function Gt(e){Xe()}function Qt(e){!1===document.hidden&&document.activeElement!==document.body&&("function"==typeof document.activeElement.blur&&document.activeElement.blur(),document.body.focus())}function Zt(e){(document.fullscreenElement||document.webkitFullscreenElement)===_.wrapper&&(e.stopImmediatePropagation(),setTimeout((()=>{h.layout(),h.focus.focus()}),1))}function ei(e){if(e.currentTarget&&e.currentTarget.hasAttribute("href")){let t=e.currentTarget.getAttribute("href");t&&(je(t),e.preventDefault())}}function ti(e){it()&&!1===E.loop?(ct(0,0),Ot()):ee?Ot():qt()}const ii={VERSION:Y,initialize:be,configure:Ne,destroy:Be,sync:gt,syncSlide:pt,syncFragments:le.sync.bind(le),slide:ct,left:Wt,right:Ut,up:jt,down:Vt,prev:Kt,next:$t,navigateLeft:Wt,navigateRight:Ut,navigateUp:jt,navigateDown:Vt,navigatePrev:Kt,navigateNext:$t,navigateFragment:le.goto.bind(le),prevFragment:le.prev.bind(le),nextFragment:le.next.bind(le),on:He,off:De,addEventListener:He,removeEventListener:De,layout:Xe,shuffle:mt,availableRoutes:Et,availableFragments:le.availableRoutes.bind(le),toggleHelp:Ve,toggleOverview:de.toggle.bind(de),toggleScrollView:re.toggle.bind(re),togglePause:nt,toggleAutoSlide:lt,toggleJumpToSlide:ot,isFirstSlide:tt,isLastSlide:it,isLastVerticalSlide:et,isVerticalSlide:Qe,isVerticalStack:Ze,isPaused:rt,isAutoSliding:dt,isSpeakerNotes:ye.isSpeakerNotesWindow.bind(ye),isOverview:de.isActive.bind(de),isFocused:me.isFocused.bind(me),isScrollView:re.isActive.bind(re),isPrintView:oe.isActive.bind(oe),isReady:()=>C,loadSlide:te.load.bind(te),unloadSlide:te.unload.bind(te),startEmbeddedContent:()=>te.startEmbeddedContent(m),stopEmbeddedContent:()=>te.stopEmbeddedContent(m,{unloadIframes:!1}),showPreview:je,hidePreview:$e,addEventListeners:Me,removeEventListeners:Ie,dispatchEvent:ze,getState:Ht,setState:Dt,getProgress:At,getIndices:Rt,getSlidesAttributes:Nt,getSlidePastCount:St,getTotalSlides:Mt,getSlide:It,getPreviousSlide:()=>v,getCurrentSlide:()=>m,getSlideBackground:Bt,getSlideNotes:ye.getSlideNotes.bind(ye),getSlides:kt,getHorizontalSlides:Lt,getVerticalSlides:Ct,hasHorizontalSlides:Pt,hasVerticalSlides:Tt,hasNavigatedHorizontally:()=>x.hasNavigatedHorizontally,hasNavigatedVertically:()=>x.hasNavigatedVertically,shouldAutoAnimateBetween:ht,addKeyBinding:ce.addKeyBinding.bind(ce),removeKeyBinding:ce.removeKeyBinding.bind(ce),triggerKey:ce.triggerKey.bind(ce),registerKeyboardShortcut:ce.registerKeyboardShortcut.bind(ce),getComputedSlideSize:_e,setCurrentScrollPage:ut,getScale:()=>U,getConfig:()=>E,getQueryHash:d,getSlidePath:he.getHash.bind(he),getRevealElement:()=>n,getSlidesElement:()=>_.slides,getViewportElement:()=>_.viewport,getBackgroundsElement:()=>ne.element,registerPlugin:ve.registerPlugin.bind(ve),hasPlugin:ve.hasPlugin.bind(ve),getPlugin:ve.getPlugin.bind(ve),getPlugins:ve.getRegisteredPlugins.bind(ve)};return e(h,{...ii,announceStatus:Le,getStatusText:Ce,focus:me,scroll:re,progress:ge,controls:ue,location:he,overview:de,fragments:le,backgrounds:ne,slideContent:te,slideNumber:ie,onUserInput:Xt,closeOverlay:$e,updateSlidesVisibility:wt,layoutSlideContents:Ye,transformSlides:Fe,cueAutoSlide:Ft,cancelAutoSlide:zt}),ii}let J=_,G=[];J.initialize=e=>(Object.assign(J,new _(document.querySelector(".reveal"),e)),G.map((e=>e(J))),J.initialize()),["configure","on","off","addEventListener","removeEventListener","registerPlugin"].forEach((e=>{J[e]=(...t)=>{G.push((i=>i[e].call(null,...t)))}})),J.isReady=()=>!1,J.VERSION=Y;export default J; +//# sourceMappingURL=reveal.esm.js.map diff --git a/reveal.js/dist/reveal.esm.js.map b/reveal.js/dist/reveal.esm.js.map new file mode 100644 index 0000000..5a2af1a --- /dev/null +++ b/reveal.js/dist/reveal.esm.js.map @@ -0,0 +1 @@ +{"version":3,"file":"reveal.esm.js","sources":["../js/utils/util.js","../js/utils/device.js","../node_modules/fitty/dist/fitty.module.js","../js/controllers/slidecontent.js","../js/controllers/slidenumber.js","../js/controllers/jumptoslide.js","../js/utils/color.js","../js/controllers/backgrounds.js","../js/utils/constants.js","../js/controllers/autoanimate.js","../js/controllers/scrollview.js","../js/controllers/printview.js","../js/controllers/fragments.js","../js/controllers/overview.js","../js/controllers/keyboard.js","../js/controllers/location.js","../js/controllers/controls.js","../js/controllers/progress.js","../js/controllers/pointer.js","../js/utils/loader.js","../js/controllers/plugins.js","../js/controllers/touch.js","../js/controllers/focus.js","../js/controllers/notes.js","../js/components/playback.js","../js/config.js","../js/reveal.js","../js/index.js"],"sourcesContent":["/**\n * Extend object a with the properties of object b.\n * If there's a conflict, object b takes precedence.\n *\n * @param {object} a\n * @param {object} b\n */\nexport const extend = ( a, b ) => {\n\n\tfor( let i in b ) {\n\t\ta[ i ] = b[ i ];\n\t}\n\n\treturn a;\n\n}\n\n/**\n * querySelectorAll but returns an Array.\n */\nexport const queryAll = ( el, selector ) => {\n\n\treturn Array.from( el.querySelectorAll( selector ) );\n\n}\n\n/**\n * classList.toggle() with cross browser support\n */\nexport const toggleClass = ( el, className, value ) => {\n\tif( value ) {\n\t\tel.classList.add( className );\n\t}\n\telse {\n\t\tel.classList.remove( className );\n\t}\n}\n\n/**\n * Utility for deserializing a value.\n *\n * @param {*} value\n * @return {*}\n */\nexport const deserialize = ( value ) => {\n\n\tif( typeof value === 'string' ) {\n\t\tif( value === 'null' ) return null;\n\t\telse if( value === 'true' ) return true;\n\t\telse if( value === 'false' ) return false;\n\t\telse if( value.match( /^-?[\\d\\.]+$/ ) ) return parseFloat( value );\n\t}\n\n\treturn value;\n\n}\n\n/**\n * Measures the distance in pixels between point a\n * and point b.\n *\n * @param {object} a point with x/y properties\n * @param {object} b point with x/y properties\n *\n * @return {number}\n */\nexport const distanceBetween = ( a, b ) => {\n\n\tlet dx = a.x - b.x,\n\t\tdy = a.y - b.y;\n\n\treturn Math.sqrt( dx*dx + dy*dy );\n\n}\n\n/**\n * Applies a CSS transform to the target element.\n *\n * @param {HTMLElement} element\n * @param {string} transform\n */\nexport const transformElement = ( element, transform ) => {\n\n\telement.style.transform = transform;\n\n}\n\n/**\n * Element.matches with IE support.\n *\n * @param {HTMLElement} target The element to match\n * @param {String} selector The CSS selector to match\n * the element against\n *\n * @return {Boolean}\n */\nexport const matches = ( target, selector ) => {\n\n\tlet matchesMethod = target.matches || target.matchesSelector || target.msMatchesSelector;\n\n\treturn !!( matchesMethod && matchesMethod.call( target, selector ) );\n\n}\n\n/**\n * Find the closest parent that matches the given\n * selector.\n *\n * @param {HTMLElement} target The child element\n * @param {String} selector The CSS selector to match\n * the parents against\n *\n * @return {HTMLElement} The matched parent or null\n * if no matching parent was found\n */\nexport const closest = ( target, selector ) => {\n\n\t// Native Element.closest\n\tif( typeof target.closest === 'function' ) {\n\t\treturn target.closest( selector );\n\t}\n\n\t// Polyfill\n\twhile( target ) {\n\t\tif( matches( target, selector ) ) {\n\t\t\treturn target;\n\t\t}\n\n\t\t// Keep searching\n\t\ttarget = target.parentNode;\n\t}\n\n\treturn null;\n\n}\n\n/**\n * Handling the fullscreen functionality via the fullscreen API\n *\n * @see http://fullscreen.spec.whatwg.org/\n * @see https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode\n */\nexport const enterFullscreen = element => {\n\n\telement = element || document.documentElement;\n\n\t// Check which implementation is available\n\tlet requestMethod = element.requestFullscreen ||\n\t\t\t\t\t\telement.webkitRequestFullscreen ||\n\t\t\t\t\t\telement.webkitRequestFullScreen ||\n\t\t\t\t\t\telement.mozRequestFullScreen ||\n\t\t\t\t\t\telement.msRequestFullscreen;\n\n\tif( requestMethod ) {\n\t\trequestMethod.apply( element );\n\t}\n\n}\n\n/**\n * Creates an HTML element and returns a reference to it.\n * If the element already exists the existing instance will\n * be returned.\n *\n * @param {HTMLElement} container\n * @param {string} tagname\n * @param {string} classname\n * @param {string} innerHTML\n *\n * @return {HTMLElement}\n */\nexport const createSingletonNode = ( container, tagname, classname, innerHTML='' ) => {\n\n\t// Find all nodes matching the description\n\tlet nodes = container.querySelectorAll( '.' + classname );\n\n\t// Check all matches to find one which is a direct child of\n\t// the specified container\n\tfor( let i = 0; i < nodes.length; i++ ) {\n\t\tlet testNode = nodes[i];\n\t\tif( testNode.parentNode === container ) {\n\t\t\treturn testNode;\n\t\t}\n\t}\n\n\t// If no node was found, create it now\n\tlet node = document.createElement( tagname );\n\tnode.className = classname;\n\tnode.innerHTML = innerHTML;\n\tcontainer.appendChild( node );\n\n\treturn node;\n\n}\n\n/**\n * Injects the given CSS styles into the DOM.\n *\n * @param {string} value\n */\nexport const createStyleSheet = ( value ) => {\n\n\tlet tag = document.createElement( 'style' );\n\ttag.type = 'text/css';\n\n\tif( value && value.length > 0 ) {\n\t\tif( tag.styleSheet ) {\n\t\t\ttag.styleSheet.cssText = value;\n\t\t}\n\t\telse {\n\t\t\ttag.appendChild( document.createTextNode( value ) );\n\t\t}\n\t}\n\n\tdocument.head.appendChild( tag );\n\n\treturn tag;\n\n}\n\n/**\n * Returns a key:value hash of all query params.\n */\nexport const getQueryHash = () => {\n\n\tlet query = {};\n\n\tlocation.search.replace( /[A-Z0-9]+?=([\\w\\.%-]*)/gi, a => {\n\t\tquery[ a.split( '=' ).shift() ] = a.split( '=' ).pop();\n\t} );\n\n\t// Basic deserialization\n\tfor( let i in query ) {\n\t\tlet value = query[ i ];\n\n\t\tquery[ i ] = deserialize( unescape( value ) );\n\t}\n\n\t// Do not accept new dependencies via query config to avoid\n\t// the potential of malicious script injection\n\tif( typeof query['dependencies'] !== 'undefined' ) delete query['dependencies'];\n\n\treturn query;\n\n}\n\n/**\n * Returns the remaining height within the parent of the\n * target element.\n *\n * remaining height = [ configured parent height ] - [ current parent height ]\n *\n * @param {HTMLElement} element\n * @param {number} [height]\n */\nexport const getRemainingHeight = ( element, height = 0 ) => {\n\n\tif( element ) {\n\t\tlet newHeight, oldHeight = element.style.height;\n\n\t\t// Change the .stretch element height to 0 in order find the height of all\n\t\t// the other elements\n\t\telement.style.height = '0px';\n\n\t\t// In Overview mode, the parent (.slide) height is set of 700px.\n\t\t// Restore it temporarily to its natural height.\n\t\telement.parentNode.style.height = 'auto';\n\n\t\tnewHeight = height - element.parentNode.offsetHeight;\n\n\t\t// Restore the old height, just in case\n\t\telement.style.height = oldHeight + 'px';\n\n\t\t// Clear the parent (.slide) height. .removeProperty works in IE9+\n\t\telement.parentNode.style.removeProperty('height');\n\n\t\treturn newHeight;\n\t}\n\n\treturn height;\n\n}\n\nconst fileExtensionToMimeMap = {\n\t'mp4': 'video/mp4',\n\t'm4a': 'video/mp4',\n\t'ogv': 'video/ogg',\n\t'mpeg': 'video/mpeg',\n\t'webm': 'video/webm'\n}\n\n/**\n * Guess the MIME type for common file formats.\n */\nexport const getMimeTypeFromFile = ( filename='' ) => {\n\treturn fileExtensionToMimeMap[filename.split('.').pop()]\n}\n\n/**\n * Encodes a string for RFC3986-compliant URL format.\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI#encoding_for_rfc3986\n *\n * @param {string} url\n */\nexport const encodeRFC3986URI = ( url='' ) => {\n\treturn encodeURI(url)\n\t .replace(/%5B/g, \"[\")\n\t .replace(/%5D/g, \"]\")\n\t .replace(\n\t\t/[!'()*]/g,\n\t\t(c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`\n\t );\n}","const UA = navigator.userAgent;\n\nexport const isMobile = /(iphone|ipod|ipad|android)/gi.test( UA ) ||\n\t\t\t\t\t\t( navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 ); // iPadOS\n\nexport const isChrome = /chrome/i.test( UA ) && !/edge/i.test( UA );\n\nexport const isAndroid = /android/gi.test( UA );","/*\n * fitty v2.3.3 - Snugly resizes text to fit its parent container\n * Copyright (c) 2020 Rik Schennink (https://pqina.nl/)\n */\n'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nexports.default = function (w) {\n\n // no window, early exit\n if (!w) return;\n\n // node list to array helper method\n var toArray = function toArray(nl) {\n return [].slice.call(nl);\n };\n\n // states\n var DrawState = {\n IDLE: 0,\n DIRTY_CONTENT: 1,\n DIRTY_LAYOUT: 2,\n DIRTY: 3\n };\n\n // all active fitty elements\n var fitties = [];\n\n // group all redraw calls till next frame, we cancel each frame request when a new one comes in. If no support for request animation frame, this is an empty function and supports for fitty stops.\n var redrawFrame = null;\n var requestRedraw = 'requestAnimationFrame' in w ? function () {\n w.cancelAnimationFrame(redrawFrame);\n redrawFrame = w.requestAnimationFrame(function () {\n return redraw(fitties.filter(function (f) {\n return f.dirty && f.active;\n }));\n });\n } : function () {};\n\n // sets all fitties to dirty so they are redrawn on the next redraw loop, then calls redraw\n var redrawAll = function redrawAll(type) {\n return function () {\n fitties.forEach(function (f) {\n return f.dirty = type;\n });\n requestRedraw();\n };\n };\n\n // redraws fitties so they nicely fit their parent container\n var redraw = function redraw(fitties) {\n\n // getting info from the DOM at this point should not trigger a reflow, let's gather as much intel as possible before triggering a reflow\n\n // check if styles of all fitties have been computed\n fitties.filter(function (f) {\n return !f.styleComputed;\n }).forEach(function (f) {\n f.styleComputed = computeStyle(f);\n });\n\n // restyle elements that require pre-styling, this triggers a reflow, please try to prevent by adding CSS rules (see docs)\n fitties.filter(shouldPreStyle).forEach(applyStyle);\n\n // we now determine which fitties should be redrawn\n var fittiesToRedraw = fitties.filter(shouldRedraw);\n\n // we calculate final styles for these fitties\n fittiesToRedraw.forEach(calculateStyles);\n\n // now we apply the calculated styles from our previous loop\n fittiesToRedraw.forEach(function (f) {\n applyStyle(f);\n markAsClean(f);\n });\n\n // now we dispatch events for all restyled fitties\n fittiesToRedraw.forEach(dispatchFitEvent);\n };\n\n var markAsClean = function markAsClean(f) {\n return f.dirty = DrawState.IDLE;\n };\n\n var calculateStyles = function calculateStyles(f) {\n\n // get available width from parent node\n f.availableWidth = f.element.parentNode.clientWidth;\n\n // the space our target element uses\n f.currentWidth = f.element.scrollWidth;\n\n // remember current font size\n f.previousFontSize = f.currentFontSize;\n\n // let's calculate the new font size\n f.currentFontSize = Math.min(Math.max(f.minSize, f.availableWidth / f.currentWidth * f.previousFontSize), f.maxSize);\n\n // if allows wrapping, only wrap when at minimum font size (otherwise would break container)\n f.whiteSpace = f.multiLine && f.currentFontSize === f.minSize ? 'normal' : 'nowrap';\n };\n\n // should always redraw if is not dirty layout, if is dirty layout, only redraw if size has changed\n var shouldRedraw = function shouldRedraw(f) {\n return f.dirty !== DrawState.DIRTY_LAYOUT || f.dirty === DrawState.DIRTY_LAYOUT && f.element.parentNode.clientWidth !== f.availableWidth;\n };\n\n // every fitty element is tested for invalid styles\n var computeStyle = function computeStyle(f) {\n\n // get style properties\n var style = w.getComputedStyle(f.element, null);\n\n // get current font size in pixels (if we already calculated it, use the calculated version)\n f.currentFontSize = parseFloat(style.getPropertyValue('font-size'));\n\n // get display type and wrap mode\n f.display = style.getPropertyValue('display');\n f.whiteSpace = style.getPropertyValue('white-space');\n };\n\n // determines if this fitty requires initial styling, can be prevented by applying correct styles through CSS\n var shouldPreStyle = function shouldPreStyle(f) {\n\n var preStyle = false;\n\n // if we already tested for prestyling we don't have to do it again\n if (f.preStyleTestCompleted) return false;\n\n // should have an inline style, if not, apply\n if (!/inline-/.test(f.display)) {\n preStyle = true;\n f.display = 'inline-block';\n }\n\n // to correctly calculate dimensions the element should have whiteSpace set to nowrap\n if (f.whiteSpace !== 'nowrap') {\n preStyle = true;\n f.whiteSpace = 'nowrap';\n }\n\n // we don't have to do this twice\n f.preStyleTestCompleted = true;\n\n return preStyle;\n };\n\n // apply styles to single fitty\n var applyStyle = function applyStyle(f) {\n f.element.style.whiteSpace = f.whiteSpace;\n f.element.style.display = f.display;\n f.element.style.fontSize = f.currentFontSize + 'px';\n };\n\n // dispatch a fit event on a fitty\n var dispatchFitEvent = function dispatchFitEvent(f) {\n f.element.dispatchEvent(new CustomEvent('fit', {\n detail: {\n oldValue: f.previousFontSize,\n newValue: f.currentFontSize,\n scaleFactor: f.currentFontSize / f.previousFontSize\n }\n }));\n };\n\n // fit method, marks the fitty as dirty and requests a redraw (this will also redraw any other fitty marked as dirty)\n var fit = function fit(f, type) {\n return function () {\n f.dirty = type;\n if (!f.active) return;\n requestRedraw();\n };\n };\n\n var init = function init(f) {\n\n // save some of the original CSS properties before we change them\n f.originalStyle = {\n whiteSpace: f.element.style.whiteSpace,\n display: f.element.style.display,\n fontSize: f.element.style.fontSize\n };\n\n // should we observe DOM mutations\n observeMutations(f);\n\n // this is a new fitty so we need to validate if it's styles are in order\n f.newbie = true;\n\n // because it's a new fitty it should also be dirty, we want it to redraw on the first loop\n f.dirty = true;\n\n // we want to be able to update this fitty\n fitties.push(f);\n };\n\n var destroy = function destroy(f) {\n return function () {\n\n // remove from fitties array\n fitties = fitties.filter(function (_) {\n return _.element !== f.element;\n });\n\n // stop observing DOM\n if (f.observeMutations) f.observer.disconnect();\n\n // reset the CSS properties we changes\n f.element.style.whiteSpace = f.originalStyle.whiteSpace;\n f.element.style.display = f.originalStyle.display;\n f.element.style.fontSize = f.originalStyle.fontSize;\n };\n };\n\n // add a new fitty, does not redraw said fitty\n var subscribe = function subscribe(f) {\n return function () {\n if (f.active) return;\n f.active = true;\n requestRedraw();\n };\n };\n\n // remove an existing fitty\n var unsubscribe = function unsubscribe(f) {\n return function () {\n return f.active = false;\n };\n };\n\n var observeMutations = function observeMutations(f) {\n\n // no observing?\n if (!f.observeMutations) return;\n\n // start observing mutations\n f.observer = new MutationObserver(fit(f, DrawState.DIRTY_CONTENT));\n\n // start observing\n f.observer.observe(f.element, f.observeMutations);\n };\n\n // default mutation observer settings\n var mutationObserverDefaultSetting = {\n subtree: true,\n childList: true,\n characterData: true\n };\n\n // default fitty options\n var defaultOptions = {\n minSize: 16,\n maxSize: 512,\n multiLine: true,\n observeMutations: 'MutationObserver' in w ? mutationObserverDefaultSetting : false\n };\n\n // array of elements in, fitty instances out\n function fittyCreate(elements, options) {\n\n // set options object\n var fittyOptions = _extends({}, defaultOptions, options);\n\n // create fitties\n var publicFitties = elements.map(function (element) {\n\n // create fitty instance\n var f = _extends({}, fittyOptions, {\n\n // internal options for this fitty\n element: element,\n active: true\n });\n\n // initialise this fitty\n init(f);\n\n // expose API\n return {\n element: element,\n fit: fit(f, DrawState.DIRTY),\n unfreeze: subscribe(f),\n freeze: unsubscribe(f),\n unsubscribe: destroy(f)\n };\n });\n\n // call redraw on newly initiated fitties\n requestRedraw();\n\n // expose fitties\n return publicFitties;\n }\n\n // fitty creation function\n function fitty(target) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n\n // if target is a string\n return typeof target === 'string' ?\n\n // treat it as a querySelector\n fittyCreate(toArray(document.querySelectorAll(target)), options) :\n\n // create single fitty\n fittyCreate([target], options)[0];\n }\n\n // handles viewport changes, redraws all fitties, but only does so after a timeout\n var resizeDebounce = null;\n var onWindowResized = function onWindowResized() {\n w.clearTimeout(resizeDebounce);\n resizeDebounce = w.setTimeout(redrawAll(DrawState.DIRTY_LAYOUT), fitty.observeWindowDelay);\n };\n\n // define observe window property, so when we set it to true or false events are automatically added and removed\n var events = ['resize', 'orientationchange'];\n Object.defineProperty(fitty, 'observeWindow', {\n set: function set(enabled) {\n var method = (enabled ? 'add' : 'remove') + 'EventListener';\n events.forEach(function (e) {\n w[method](e, onWindowResized);\n });\n }\n });\n\n // fitty global properties (by setting observeWindow to true the events above get added)\n fitty.observeWindow = true;\n fitty.observeWindowDelay = 100;\n\n // public fit all method, will force redraw no matter what\n fitty.fitAll = redrawAll(DrawState.DIRTY);\n\n // export our fitty function, we don't want to keep it to our selves\n return fitty;\n}(typeof window === 'undefined' ? null : window);","import { extend, queryAll, closest, getMimeTypeFromFile, encodeRFC3986URI } from '../utils/util.js'\nimport { isMobile } from '../utils/device.js'\n\nimport fitty from 'fitty';\n\n/**\n * Handles loading, unloading and playback of slide\n * content such as images, videos and iframes.\n */\nexport default class SlideContent {\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t\tthis.startEmbeddedIframe = this.startEmbeddedIframe.bind( this );\n\n\t}\n\n\t/**\n\t * Should the given element be preloaded?\n\t * Decides based on local element attributes and global config.\n\t *\n\t * @param {HTMLElement} element\n\t */\n\tshouldPreload( element ) {\n\n\t\tif( this.Reveal.isScrollView() ) {\n\t\t\treturn true;\n\t\t}\n\n\t\t// Prefer an explicit global preload setting\n\t\tlet preload = this.Reveal.getConfig().preloadIframes;\n\n\t\t// If no global setting is available, fall back on the element's\n\t\t// own preload setting\n\t\tif( typeof preload !== 'boolean' ) {\n\t\t\tpreload = element.hasAttribute( 'data-preload' );\n\t\t}\n\n\t\treturn preload;\n\t}\n\n\t/**\n\t * Called when the given slide is within the configured view\n\t * distance. Shows the slide element and loads any content\n\t * that is set to load lazily (data-src).\n\t *\n\t * @param {HTMLElement} slide Slide to show\n\t */\n\tload( slide, options = {} ) {\n\n\t\t// Show the slide element\n\t\tslide.style.display = this.Reveal.getConfig().display;\n\n\t\t// Media elements with data-src attributes\n\t\tqueryAll( slide, 'img[data-src], video[data-src], audio[data-src], iframe[data-src]' ).forEach( element => {\n\t\t\tif( element.tagName !== 'IFRAME' || this.shouldPreload( element ) ) {\n\t\t\t\telement.setAttribute( 'src', element.getAttribute( 'data-src' ) );\n\t\t\t\telement.setAttribute( 'data-lazy-loaded', '' );\n\t\t\t\telement.removeAttribute( 'data-src' );\n\t\t\t}\n\t\t} );\n\n\t\t// Media elements with children\n\t\tqueryAll( slide, 'video, audio' ).forEach( media => {\n\t\t\tlet sources = 0;\n\n\t\t\tqueryAll( media, 'source[data-src]' ).forEach( source => {\n\t\t\t\tsource.setAttribute( 'src', source.getAttribute( 'data-src' ) );\n\t\t\t\tsource.removeAttribute( 'data-src' );\n\t\t\t\tsource.setAttribute( 'data-lazy-loaded', '' );\n\t\t\t\tsources += 1;\n\t\t\t} );\n\n\t\t\t// Enable inline video playback in mobile Safari\n\t\t\tif( isMobile && media.tagName === 'VIDEO' ) {\n\t\t\t\tmedia.setAttribute( 'playsinline', '' );\n\t\t\t}\n\n\t\t\t// If we rewrote sources for this video/audio element, we need\n\t\t\t// to manually tell it to load from its new origin\n\t\t\tif( sources > 0 ) {\n\t\t\t\tmedia.load();\n\t\t\t}\n\t\t} );\n\n\n\t\t// Show the corresponding background element\n\t\tlet background = slide.slideBackgroundElement;\n\t\tif( background ) {\n\t\t\tbackground.style.display = 'block';\n\n\t\t\tlet backgroundContent = slide.slideBackgroundContentElement;\n\t\t\tlet backgroundIframe = slide.getAttribute( 'data-background-iframe' );\n\n\t\t\t// If the background contains media, load it\n\t\t\tif( background.hasAttribute( 'data-loaded' ) === false ) {\n\t\t\t\tbackground.setAttribute( 'data-loaded', 'true' );\n\n\t\t\t\tlet backgroundImage = slide.getAttribute( 'data-background-image' ),\n\t\t\t\t\tbackgroundVideo = slide.getAttribute( 'data-background-video' ),\n\t\t\t\t\tbackgroundVideoLoop = slide.hasAttribute( 'data-background-video-loop' ),\n\t\t\t\t\tbackgroundVideoMuted = slide.hasAttribute( 'data-background-video-muted' );\n\n\t\t\t\t// Images\n\t\t\t\tif( backgroundImage ) {\n\t\t\t\t\t// base64\n\t\t\t\t\tif( /^data:/.test( backgroundImage.trim() ) ) {\n\t\t\t\t\t\tbackgroundContent.style.backgroundImage = `url(${backgroundImage.trim()})`;\n\t\t\t\t\t}\n\t\t\t\t\t// URL(s)\n\t\t\t\t\telse {\n\t\t\t\t\t\tbackgroundContent.style.backgroundImage = backgroundImage.split( ',' ).map( background => {\n\t\t\t\t\t\t\t// Decode URL(s) that are already encoded first\n\t\t\t\t\t\t\tlet decoded = decodeURI(background.trim());\n\t\t\t\t\t\t\treturn `url(${encodeRFC3986URI(decoded)})`;\n\t\t\t\t\t\t}).join( ',' );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t// Videos\n\t\t\t\telse if ( backgroundVideo && !this.Reveal.isSpeakerNotes() ) {\n\t\t\t\t\tlet video = document.createElement( 'video' );\n\n\t\t\t\t\tif( backgroundVideoLoop ) {\n\t\t\t\t\t\tvideo.setAttribute( 'loop', '' );\n\t\t\t\t\t}\n\n\t\t\t\t\tif( backgroundVideoMuted ) {\n\t\t\t\t\t\tvideo.muted = true;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Enable inline playback in mobile Safari\n\t\t\t\t\t//\n\t\t\t\t\t// Mute is required for video to play when using\n\t\t\t\t\t// swipe gestures to navigate since they don't\n\t\t\t\t\t// count as direct user actions :'(\n\t\t\t\t\tif( isMobile ) {\n\t\t\t\t\t\tvideo.muted = true;\n\t\t\t\t\t\tvideo.setAttribute( 'playsinline', '' );\n\t\t\t\t\t}\n\n\t\t\t\t\t// Support comma separated lists of video sources\n\t\t\t\t\tbackgroundVideo.split( ',' ).forEach( source => {\n\t\t\t\t\t\tlet type = getMimeTypeFromFile( source );\n\t\t\t\t\t\tif( type ) {\n\t\t\t\t\t\t\tvideo.innerHTML += ``;\n\t\t\t\t\t\t}\n\t\t\t\t\t\telse {\n\t\t\t\t\t\t\tvideo.innerHTML += ``;\n\t\t\t\t\t\t}\n\t\t\t\t\t} );\n\n\t\t\t\t\tbackgroundContent.appendChild( video );\n\t\t\t\t}\n\t\t\t\t// Iframes\n\t\t\t\telse if( backgroundIframe && options.excludeIframes !== true ) {\n\t\t\t\t\tlet iframe = document.createElement( 'iframe' );\n\t\t\t\t\tiframe.setAttribute( 'allowfullscreen', '' );\n\t\t\t\t\tiframe.setAttribute( 'mozallowfullscreen', '' );\n\t\t\t\t\tiframe.setAttribute( 'webkitallowfullscreen', '' );\n\t\t\t\t\tiframe.setAttribute( 'allow', 'autoplay' );\n\n\t\t\t\t\tiframe.setAttribute( 'data-src', backgroundIframe );\n\n\t\t\t\t\tiframe.style.width = '100%';\n\t\t\t\t\tiframe.style.height = '100%';\n\t\t\t\t\tiframe.style.maxHeight = '100%';\n\t\t\t\t\tiframe.style.maxWidth = '100%';\n\n\t\t\t\t\tbackgroundContent.appendChild( iframe );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Start loading preloadable iframes\n\t\t\tlet backgroundIframeElement = backgroundContent.querySelector( 'iframe[data-src]' );\n\t\t\tif( backgroundIframeElement ) {\n\n\t\t\t\t// Check if this iframe is eligible to be preloaded\n\t\t\t\tif( this.shouldPreload( background ) && !/autoplay=(1|true|yes)/gi.test( backgroundIframe ) ) {\n\t\t\t\t\tif( backgroundIframeElement.getAttribute( 'src' ) !== backgroundIframe ) {\n\t\t\t\t\t\tbackgroundIframeElement.setAttribute( 'src', backgroundIframe );\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t}\n\n\t\tthis.layout( slide );\n\n\t}\n\n\t/**\n\t * Applies JS-dependent layout helpers for the scope.\n\t */\n\tlayout( scopeElement ) {\n\n\t\t// Autosize text with the r-fit-text class based on the\n\t\t// size of its container. This needs to happen after the\n\t\t// slide is visible in order to measure the text.\n\t\tArray.from( scopeElement.querySelectorAll( '.r-fit-text' ) ).forEach( element => {\n\t\t\tfitty( element, {\n\t\t\t\tminSize: 24,\n\t\t\t\tmaxSize: this.Reveal.getConfig().height * 0.8,\n\t\t\t\tobserveMutations: false,\n\t\t\t\tobserveWindow: false\n\t\t\t} );\n\t\t} );\n\n\t}\n\n\t/**\n\t * Unloads and hides the given slide. This is called when the\n\t * slide is moved outside of the configured view distance.\n\t *\n\t * @param {HTMLElement} slide\n\t */\n\tunload( slide ) {\n\n\t\t// Hide the slide element\n\t\tslide.style.display = 'none';\n\n\t\t// Hide the corresponding background element\n\t\tlet background = this.Reveal.getSlideBackground( slide );\n\t\tif( background ) {\n\t\t\tbackground.style.display = 'none';\n\n\t\t\t// Unload any background iframes\n\t\t\tqueryAll( background, 'iframe[src]' ).forEach( element => {\n\t\t\t\telement.removeAttribute( 'src' );\n\t\t\t} );\n\t\t}\n\n\t\t// Reset lazy-loaded media elements with src attributes\n\t\tqueryAll( slide, 'video[data-lazy-loaded][src], audio[data-lazy-loaded][src], iframe[data-lazy-loaded][src]' ).forEach( element => {\n\t\t\telement.setAttribute( 'data-src', element.getAttribute( 'src' ) );\n\t\t\telement.removeAttribute( 'src' );\n\t\t} );\n\n\t\t// Reset lazy-loaded media elements with children\n\t\tqueryAll( slide, 'video[data-lazy-loaded] source[src], audio source[src]' ).forEach( source => {\n\t\t\tsource.setAttribute( 'data-src', source.getAttribute( 'src' ) );\n\t\t\tsource.removeAttribute( 'src' );\n\t\t} );\n\n\t}\n\n\t/**\n\t * Enforces origin-specific format rules for embedded media.\n\t */\n\tformatEmbeddedContent() {\n\n\t\tlet _appendParamToIframeSource = ( sourceAttribute, sourceURL, param ) => {\n\t\t\tqueryAll( this.Reveal.getSlidesElement(), 'iframe['+ sourceAttribute +'*=\"'+ sourceURL +'\"]' ).forEach( el => {\n\t\t\t\tlet src = el.getAttribute( sourceAttribute );\n\t\t\t\tif( src && src.indexOf( param ) === -1 ) {\n\t\t\t\t\tel.setAttribute( sourceAttribute, src + ( !/\\?/.test( src ) ? '?' : '&' ) + param );\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// YouTube frames must include \"?enablejsapi=1\"\n\t\t_appendParamToIframeSource( 'src', 'youtube.com/embed/', 'enablejsapi=1' );\n\t\t_appendParamToIframeSource( 'data-src', 'youtube.com/embed/', 'enablejsapi=1' );\n\n\t\t// Vimeo frames must include \"?api=1\"\n\t\t_appendParamToIframeSource( 'src', 'player.vimeo.com/', 'api=1' );\n\t\t_appendParamToIframeSource( 'data-src', 'player.vimeo.com/', 'api=1' );\n\n\t}\n\n\t/**\n\t * Start playback of any embedded content inside of\n\t * the given element.\n\t *\n\t * @param {HTMLElement} element\n\t */\n\tstartEmbeddedContent( element ) {\n\n\t\tif( element && !this.Reveal.isSpeakerNotes() ) {\n\n\t\t\t// Restart GIFs\n\t\t\tqueryAll( element, 'img[src$=\".gif\"]' ).forEach( el => {\n\t\t\t\t// Setting the same unchanged source like this was confirmed\n\t\t\t\t// to work in Chrome, FF & Safari\n\t\t\t\tel.setAttribute( 'src', el.getAttribute( 'src' ) );\n\t\t\t} );\n\n\t\t\t// HTML5 media elements\n\t\t\tqueryAll( element, 'video, audio' ).forEach( el => {\n\t\t\t\tif( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Prefer an explicit global autoplay setting\n\t\t\t\tlet autoplay = this.Reveal.getConfig().autoPlayMedia;\n\n\t\t\t\t// If no global setting is available, fall back on the element's\n\t\t\t\t// own autoplay setting\n\t\t\t\tif( typeof autoplay !== 'boolean' ) {\n\t\t\t\t\tautoplay = el.hasAttribute( 'data-autoplay' ) || !!closest( el, '.slide-background' );\n\t\t\t\t}\n\n\t\t\t\tif( autoplay && typeof el.play === 'function' ) {\n\n\t\t\t\t\t// If the media is ready, start playback\n\t\t\t\t\tif( el.readyState > 1 ) {\n\t\t\t\t\t\tthis.startEmbeddedMedia( { target: el } );\n\t\t\t\t\t}\n\t\t\t\t\t// Mobile devices never fire a loaded event so instead\n\t\t\t\t\t// of waiting, we initiate playback\n\t\t\t\t\telse if( isMobile ) {\n\t\t\t\t\t\tlet promise = el.play();\n\n\t\t\t\t\t\t// If autoplay does not work, ensure that the controls are visible so\n\t\t\t\t\t\t// that the viewer can start the media on their own\n\t\t\t\t\t\tif( promise && typeof promise.catch === 'function' && el.controls === false ) {\n\t\t\t\t\t\t\tpromise.catch( () => {\n\t\t\t\t\t\t\t\tel.controls = true;\n\n\t\t\t\t\t\t\t\t// Once the video does start playing, hide the controls again\n\t\t\t\t\t\t\t\tel.addEventListener( 'play', () => {\n\t\t\t\t\t\t\t\t\tel.controls = false;\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// If the media isn't loaded, wait before playing\n\t\t\t\t\telse {\n\t\t\t\t\t\tel.removeEventListener( 'loadeddata', this.startEmbeddedMedia ); // remove first to avoid dupes\n\t\t\t\t\t\tel.addEventListener( 'loadeddata', this.startEmbeddedMedia );\n\t\t\t\t\t}\n\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\t// Normal iframes\n\t\t\tqueryAll( element, 'iframe[src]' ).forEach( el => {\n\t\t\t\tif( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tthis.startEmbeddedIframe( { target: el } );\n\t\t\t} );\n\n\t\t\t// Lazy loading iframes\n\t\t\tqueryAll( element, 'iframe[data-src]' ).forEach( el => {\n\t\t\t\tif( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif( el.getAttribute( 'src' ) !== el.getAttribute( 'data-src' ) ) {\n\t\t\t\t\tel.removeEventListener( 'load', this.startEmbeddedIframe ); // remove first to avoid dupes\n\t\t\t\t\tel.addEventListener( 'load', this.startEmbeddedIframe );\n\t\t\t\t\tel.setAttribute( 'src', el.getAttribute( 'data-src' ) );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t}\n\n\t}\n\n\t/**\n\t * Starts playing an embedded video/audio element after\n\t * it has finished loading.\n\t *\n\t * @param {object} event\n\t */\n\tstartEmbeddedMedia( event ) {\n\n\t\tlet isAttachedToDOM = !!closest( event.target, 'html' ),\n\t\t\tisVisible \t\t= !!closest( event.target, '.present' );\n\n\t\tif( isAttachedToDOM && isVisible ) {\n\t\t\tevent.target.currentTime = 0;\n\t\t\tevent.target.play();\n\t\t}\n\n\t\tevent.target.removeEventListener( 'loadeddata', this.startEmbeddedMedia );\n\n\t}\n\n\t/**\n\t * \"Starts\" the content of an embedded iframe using the\n\t * postMessage API.\n\t *\n\t * @param {object} event\n\t */\n\tstartEmbeddedIframe( event ) {\n\n\t\tlet iframe = event.target;\n\n\t\tif( iframe && iframe.contentWindow ) {\n\n\t\t\tlet isAttachedToDOM = !!closest( event.target, 'html' ),\n\t\t\t\tisVisible \t\t= !!closest( event.target, '.present' );\n\n\t\t\tif( isAttachedToDOM && isVisible ) {\n\n\t\t\t\t// Prefer an explicit global autoplay setting\n\t\t\t\tlet autoplay = this.Reveal.getConfig().autoPlayMedia;\n\n\t\t\t\t// If no global setting is available, fall back on the element's\n\t\t\t\t// own autoplay setting\n\t\t\t\tif( typeof autoplay !== 'boolean' ) {\n\t\t\t\t\tautoplay = iframe.hasAttribute( 'data-autoplay' ) || !!closest( iframe, '.slide-background' );\n\t\t\t\t}\n\n\t\t\t\t// YouTube postMessage API\n\t\t\t\tif( /youtube\\.com\\/embed\\//.test( iframe.getAttribute( 'src' ) ) && autoplay ) {\n\t\t\t\t\tiframe.contentWindow.postMessage( '{\"event\":\"command\",\"func\":\"playVideo\",\"args\":\"\"}', '*' );\n\t\t\t\t}\n\t\t\t\t// Vimeo postMessage API\n\t\t\t\telse if( /player\\.vimeo\\.com\\//.test( iframe.getAttribute( 'src' ) ) && autoplay ) {\n\t\t\t\t\tiframe.contentWindow.postMessage( '{\"method\":\"play\"}', '*' );\n\t\t\t\t}\n\t\t\t\t// Generic postMessage API\n\t\t\t\telse {\n\t\t\t\t\tiframe.contentWindow.postMessage( 'slide:start', '*' );\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t}\n\n\t}\n\n\t/**\n\t * Stop playback of any embedded content inside of\n\t * the targeted slide.\n\t *\n\t * @param {HTMLElement} element\n\t */\n\tstopEmbeddedContent( element, options = {} ) {\n\n\t\toptions = extend( {\n\t\t\t// Defaults\n\t\t\tunloadIframes: true\n\t\t}, options );\n\n\t\tif( element && element.parentNode ) {\n\t\t\t// HTML5 media elements\n\t\t\tqueryAll( element, 'video, audio' ).forEach( el => {\n\t\t\t\tif( !el.hasAttribute( 'data-ignore' ) && typeof el.pause === 'function' ) {\n\t\t\t\t\tel.setAttribute('data-paused-by-reveal', '');\n\t\t\t\t\tel.pause();\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\t// Generic postMessage API for non-lazy loaded iframes\n\t\t\tqueryAll( element, 'iframe' ).forEach( el => {\n\t\t\t\tif( el.contentWindow ) el.contentWindow.postMessage( 'slide:stop', '*' );\n\t\t\t\tel.removeEventListener( 'load', this.startEmbeddedIframe );\n\t\t\t});\n\n\t\t\t// YouTube postMessage API\n\t\t\tqueryAll( element, 'iframe[src*=\"youtube.com/embed/\"]' ).forEach( el => {\n\t\t\t\tif( !el.hasAttribute( 'data-ignore' ) && el.contentWindow && typeof el.contentWindow.postMessage === 'function' ) {\n\t\t\t\t\tel.contentWindow.postMessage( '{\"event\":\"command\",\"func\":\"pauseVideo\",\"args\":\"\"}', '*' );\n\t\t\t\t}\n\t\t\t});\n\n\t\t\t// Vimeo postMessage API\n\t\t\tqueryAll( element, 'iframe[src*=\"player.vimeo.com/\"]' ).forEach( el => {\n\t\t\t\tif( !el.hasAttribute( 'data-ignore' ) && el.contentWindow && typeof el.contentWindow.postMessage === 'function' ) {\n\t\t\t\t\tel.contentWindow.postMessage( '{\"method\":\"pause\"}', '*' );\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tif( options.unloadIframes === true ) {\n\t\t\t\t// Unload lazy-loaded iframes\n\t\t\t\tqueryAll( element, 'iframe[data-src]' ).forEach( el => {\n\t\t\t\t\t// Only removing the src doesn't actually unload the frame\n\t\t\t\t\t// in all browsers (Firefox) so we set it to blank first\n\t\t\t\t\tel.setAttribute( 'src', 'about:blank' );\n\t\t\t\t\tel.removeAttribute( 'src' );\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t}\n\n}\n","/**\n * Handles the display of reveal.js' optional slide number.\n */\nexport default class SlideNumber {\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t}\n\n\trender() {\n\n\t\tthis.element = document.createElement( 'div' );\n\t\tthis.element.className = 'slide-number';\n\t\tthis.Reveal.getRevealElement().appendChild( this.element );\n\n\t}\n\n\t/**\n\t * Called when the reveal.js config is updated.\n\t */\n\tconfigure( config, oldConfig ) {\n\n\t\tlet slideNumberDisplay = 'none';\n\t\tif( config.slideNumber && !this.Reveal.isPrintView() ) {\n\t\t\tif( config.showSlideNumber === 'all' ) {\n\t\t\t\tslideNumberDisplay = 'block';\n\t\t\t}\n\t\t\telse if( config.showSlideNumber === 'speaker' && this.Reveal.isSpeakerNotes() ) {\n\t\t\t\tslideNumberDisplay = 'block';\n\t\t\t}\n\t\t}\n\n\t\tthis.element.style.display = slideNumberDisplay;\n\n\t}\n\n\t/**\n\t * Updates the slide number to match the current slide.\n\t */\n\tupdate() {\n\n\t\t// Update slide number if enabled\n\t\tif( this.Reveal.getConfig().slideNumber && this.element ) {\n\t\t\tthis.element.innerHTML = this.getSlideNumber();\n\t\t}\n\n\t}\n\n\t/**\n\t * Returns the HTML string corresponding to the current slide\n\t * number, including formatting.\n\t */\n\tgetSlideNumber( slide = this.Reveal.getCurrentSlide() ) {\n\n\t\tlet config = this.Reveal.getConfig();\n\t\tlet value;\n\t\tlet format = 'h.v';\n\n\t\tif ( typeof config.slideNumber === 'function' ) {\n\t\t\tvalue = config.slideNumber( slide );\n\t\t} else {\n\t\t\t// Check if a custom number format is available\n\t\t\tif( typeof config.slideNumber === 'string' ) {\n\t\t\t\tformat = config.slideNumber;\n\t\t\t}\n\n\t\t\t// If there are ONLY vertical slides in this deck, always use\n\t\t\t// a flattened slide number\n\t\t\tif( !/c/.test( format ) && this.Reveal.getHorizontalSlides().length === 1 ) {\n\t\t\t\tformat = 'c';\n\t\t\t}\n\n\t\t\t// Offset the current slide number by 1 to make it 1-indexed\n\t\t\tlet horizontalOffset = slide && slide.dataset.visibility === 'uncounted' ? 0 : 1;\n\n\t\t\tvalue = [];\n\t\t\tswitch( format ) {\n\t\t\t\tcase 'c':\n\t\t\t\t\tvalue.push( this.Reveal.getSlidePastCount( slide ) + horizontalOffset );\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'c/t':\n\t\t\t\t\tvalue.push( this.Reveal.getSlidePastCount( slide ) + horizontalOffset, '/', this.Reveal.getTotalSlides() );\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tlet indices = this.Reveal.getIndices( slide );\n\t\t\t\t\tvalue.push( indices.h + horizontalOffset );\n\t\t\t\t\tlet sep = format === 'h/v' ? '/' : '.';\n\t\t\t\t\tif( this.Reveal.isVerticalSlide( slide ) ) value.push( sep, indices.v + 1 );\n\t\t\t}\n\t\t}\n\n\t\tlet url = '#' + this.Reveal.location.getHash( slide );\n\t\treturn this.formatNumber( value[0], value[1], value[2], url );\n\n\t}\n\n\t/**\n\t * Applies HTML formatting to a slide number before it's\n\t * written to the DOM.\n\t *\n\t * @param {number} a Current slide\n\t * @param {string} delimiter Character to separate slide numbers\n\t * @param {(number|*)} b Total slides\n\t * @param {HTMLElement} [url='#'+locationHash()] The url to link to\n\t * @return {string} HTML string fragment\n\t */\n\tformatNumber( a, delimiter, b, url = '#' + this.Reveal.location.getHash() ) {\n\n\t\tif( typeof b === 'number' && !isNaN( b ) ) {\n\t\t\treturn `\n\t\t\t\t\t${a}\n\t\t\t\t\t${delimiter}\n\t\t\t\t\t${b}\n\t\t\t\t\t`;\n\t\t}\n\t\telse {\n\t\t\treturn `\n\t\t\t\t\t${a}\n\t\t\t\t\t`;\n\t\t}\n\n\t}\n\n\tdestroy() {\n\n\t\tthis.element.remove();\n\n\t}\n\n}","/**\n * Makes it possible to jump to a slide by entering its\n * slide number or id.\n */\nexport default class JumpToSlide {\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t\tthis.onInput = this.onInput.bind( this );\n\t\tthis.onBlur = this.onBlur.bind( this );\n\t\tthis.onKeyDown = this.onKeyDown.bind( this );\n\n\t}\n\n\trender() {\n\n\t\tthis.element = document.createElement( 'div' );\n\t\tthis.element.className = 'jump-to-slide';\n\n this.jumpInput = document.createElement( 'input' );\n this.jumpInput.type = 'text';\n this.jumpInput.className = 'jump-to-slide-input';\n this.jumpInput.placeholder = 'Jump to slide';\n\t\tthis.jumpInput.addEventListener( 'input', this.onInput );\n\t\tthis.jumpInput.addEventListener( 'keydown', this.onKeyDown );\n\t\tthis.jumpInput.addEventListener( 'blur', this.onBlur );\n\n this.element.appendChild( this.jumpInput );\n\n\t}\n\n\tshow() {\n\n\t\tthis.indicesOnShow = this.Reveal.getIndices();\n\n\t\tthis.Reveal.getRevealElement().appendChild( this.element );\n\t\tthis.jumpInput.focus();\n\n\t}\n\n\thide() {\n\n\t\tif( this.isVisible() ) {\n\t\t\tthis.element.remove();\n\t\t\tthis.jumpInput.value = '';\n\n\t\t\tclearTimeout( this.jumpTimeout );\n\t\t\tdelete this.jumpTimeout;\n\t\t}\n\n\t}\n\n\tisVisible() {\n\n\t\treturn !!this.element.parentNode;\n\n\t}\n\n\t/**\n\t * Parses the current input and jumps to the given slide.\n\t */\n\tjump() {\n\n\t\tclearTimeout( this.jumpTimeout );\n\t\tdelete this.jumpTimeout;\n\n\t\tconst query = this.jumpInput.value.trim( '' );\n\t\tlet indices = this.Reveal.location.getIndicesFromHash( query, { oneBasedIndex: true } );\n\n\t\t// If no valid index was found and the input query is a\n\t\t// string, fall back on a simple search\n\t\tif( !indices && /\\S+/i.test( query ) && query.length > 1 ) {\n\t\t\tindices = this.search( query );\n\t\t}\n\n\t\tif( indices && query !== '' ) {\n\t\t\tthis.Reveal.slide( indices.h, indices.v, indices.f );\n\t\t\treturn true;\n\t\t}\n\t\telse {\n\t\t\tthis.Reveal.slide( this.indicesOnShow.h, this.indicesOnShow.v, this.indicesOnShow.f );\n\t\t\treturn false;\n\t\t}\n\n\t}\n\n\tjumpAfter( delay ) {\n\n\t\tclearTimeout( this.jumpTimeout );\n\t\tthis.jumpTimeout = setTimeout( () => this.jump(), delay );\n\n\t}\n\n\t/**\n\t * A lofi search that looks for the given query in all\n\t * of our slides and returns the first match.\n\t */\n\tsearch( query ) {\n\n\t\tconst regex = new RegExp( '\\\\b' + query.trim() + '\\\\b', 'i' );\n\n\t\tconst slide = this.Reveal.getSlides().find( ( slide ) => {\n\t\t\treturn regex.test( slide.innerText );\n\t\t} );\n\n\t\tif( slide ) {\n\t\t\treturn this.Reveal.getIndices( slide );\n\t\t}\n\t\telse {\n\t\t\treturn null;\n\t\t}\n\n\t}\n\n\t/**\n\t * Reverts back to the slide we were on when jump to slide was\n\t * invoked.\n\t */\n\tcancel() {\n\n\t\tthis.Reveal.slide( this.indicesOnShow.h, this.indicesOnShow.v, this.indicesOnShow.f );\n\t\tthis.hide();\n\n\t}\n\n\tconfirm() {\n\n\t\tthis.jump();\n\t\tthis.hide();\n\n\t}\n\n\tdestroy() {\n\n\t\tthis.jumpInput.removeEventListener( 'input', this.onInput );\n\t\tthis.jumpInput.removeEventListener( 'keydown', this.onKeyDown );\n\t\tthis.jumpInput.removeEventListener( 'blur', this.onBlur );\n\n\t\tthis.element.remove();\n\n\t}\n\n\tonKeyDown( event ) {\n\n\t\tif( event.keyCode === 13 ) {\n\t\t\tthis.confirm();\n\t\t}\n\t\telse if( event.keyCode === 27 ) {\n\t\t\tthis.cancel();\n\n\t\t\tevent.stopImmediatePropagation();\n\t\t}\n\n\t}\n\n\tonInput( event ) {\n\n\t\tthis.jumpAfter( 200 );\n\n\t}\n\n\tonBlur() {\n\n\t\tsetTimeout( () => this.hide(), 1 );\n\n\t}\n\n}","/**\n * Converts various color input formats to an {r:0,g:0,b:0} object.\n *\n * @param {string} color The string representation of a color\n * @example\n * colorToRgb('#000');\n * @example\n * colorToRgb('#000000');\n * @example\n * colorToRgb('rgb(0,0,0)');\n * @example\n * colorToRgb('rgba(0,0,0)');\n *\n * @return {{r: number, g: number, b: number, [a]: number}|null}\n */\nexport const colorToRgb = ( color ) => {\n\n\tlet hex3 = color.match( /^#([0-9a-f]{3})$/i );\n\tif( hex3 && hex3[1] ) {\n\t\thex3 = hex3[1];\n\t\treturn {\n\t\t\tr: parseInt( hex3.charAt( 0 ), 16 ) * 0x11,\n\t\t\tg: parseInt( hex3.charAt( 1 ), 16 ) * 0x11,\n\t\t\tb: parseInt( hex3.charAt( 2 ), 16 ) * 0x11\n\t\t};\n\t}\n\n\tlet hex6 = color.match( /^#([0-9a-f]{6})$/i );\n\tif( hex6 && hex6[1] ) {\n\t\thex6 = hex6[1];\n\t\treturn {\n\t\t\tr: parseInt( hex6.slice( 0, 2 ), 16 ),\n\t\t\tg: parseInt( hex6.slice( 2, 4 ), 16 ),\n\t\t\tb: parseInt( hex6.slice( 4, 6 ), 16 )\n\t\t};\n\t}\n\n\tlet rgb = color.match( /^rgb\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*\\)$/i );\n\tif( rgb ) {\n\t\treturn {\n\t\t\tr: parseInt( rgb[1], 10 ),\n\t\t\tg: parseInt( rgb[2], 10 ),\n\t\t\tb: parseInt( rgb[3], 10 )\n\t\t};\n\t}\n\n\tlet rgba = color.match( /^rgba\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*\\,\\s*([\\d]+|[\\d]*.[\\d]+)\\s*\\)$/i );\n\tif( rgba ) {\n\t\treturn {\n\t\t\tr: parseInt( rgba[1], 10 ),\n\t\t\tg: parseInt( rgba[2], 10 ),\n\t\t\tb: parseInt( rgba[3], 10 ),\n\t\t\ta: parseFloat( rgba[4] )\n\t\t};\n\t}\n\n\treturn null;\n\n}\n\n/**\n * Calculates brightness on a scale of 0-255.\n *\n * @param {string} color See colorToRgb for supported formats.\n * @see {@link colorToRgb}\n */\nexport const colorBrightness = ( color ) => {\n\n\tif( typeof color === 'string' ) color = colorToRgb( color );\n\n\tif( color ) {\n\t\treturn ( color.r * 299 + color.g * 587 + color.b * 114 ) / 1000;\n\t}\n\n\treturn null;\n\n}","import { queryAll } from '../utils/util.js'\nimport { colorToRgb, colorBrightness } from '../utils/color.js'\n\n/**\n * Creates and updates slide backgrounds.\n */\nexport default class Backgrounds {\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t}\n\n\trender() {\n\n\t\tthis.element = document.createElement( 'div' );\n\t\tthis.element.className = 'backgrounds';\n\t\tthis.Reveal.getRevealElement().appendChild( this.element );\n\n\t}\n\n\t/**\n\t * Creates the slide background elements and appends them\n\t * to the background container. One element is created per\n\t * slide no matter if the given slide has visible background.\n\t */\n\tcreate() {\n\n\t\t// Clear prior backgrounds\n\t\tthis.element.innerHTML = '';\n\t\tthis.element.classList.add( 'no-transition' );\n\n\t\t// Iterate over all horizontal slides\n\t\tthis.Reveal.getHorizontalSlides().forEach( slideh => {\n\n\t\t\tlet backgroundStack = this.createBackground( slideh, this.element );\n\n\t\t\t// Iterate over all vertical slides\n\t\t\tqueryAll( slideh, 'section' ).forEach( slidev => {\n\n\t\t\t\tthis.createBackground( slidev, backgroundStack );\n\n\t\t\t\tbackgroundStack.classList.add( 'stack' );\n\n\t\t\t} );\n\n\t\t} );\n\n\t\t// Add parallax background if specified\n\t\tif( this.Reveal.getConfig().parallaxBackgroundImage ) {\n\n\t\t\tthis.element.style.backgroundImage = 'url(\"' + this.Reveal.getConfig().parallaxBackgroundImage + '\")';\n\t\t\tthis.element.style.backgroundSize = this.Reveal.getConfig().parallaxBackgroundSize;\n\t\t\tthis.element.style.backgroundRepeat = this.Reveal.getConfig().parallaxBackgroundRepeat;\n\t\t\tthis.element.style.backgroundPosition = this.Reveal.getConfig().parallaxBackgroundPosition;\n\n\t\t\t// Make sure the below properties are set on the element - these properties are\n\t\t\t// needed for proper transitions to be set on the element via CSS. To remove\n\t\t\t// annoying background slide-in effect when the presentation starts, apply\n\t\t\t// these properties after short time delay\n\t\t\tsetTimeout( () => {\n\t\t\t\tthis.Reveal.getRevealElement().classList.add( 'has-parallax-background' );\n\t\t\t}, 1 );\n\n\t\t}\n\t\telse {\n\n\t\t\tthis.element.style.backgroundImage = '';\n\t\t\tthis.Reveal.getRevealElement().classList.remove( 'has-parallax-background' );\n\n\t\t}\n\n\t}\n\n\t/**\n\t * Creates a background for the given slide.\n\t *\n\t * @param {HTMLElement} slide\n\t * @param {HTMLElement} container The element that the background\n\t * should be appended to\n\t * @return {HTMLElement} New background div\n\t */\n\tcreateBackground( slide, container ) {\n\n\t\t// Main slide background element\n\t\tlet element = document.createElement( 'div' );\n\t\telement.className = 'slide-background ' + slide.className.replace( /present|past|future/, '' );\n\n\t\t// Inner background element that wraps images/videos/iframes\n\t\tlet contentElement = document.createElement( 'div' );\n\t\tcontentElement.className = 'slide-background-content';\n\n\t\telement.appendChild( contentElement );\n\t\tcontainer.appendChild( element );\n\n\t\tslide.slideBackgroundElement = element;\n\t\tslide.slideBackgroundContentElement = contentElement;\n\n\t\t// Syncs the background to reflect all current background settings\n\t\tthis.sync( slide );\n\n\t\treturn element;\n\n\t}\n\n\t/**\n\t * Renders all of the visual properties of a slide background\n\t * based on the various background attributes.\n\t *\n\t * @param {HTMLElement} slide\n\t */\n\tsync( slide ) {\n\n\t\tconst element = slide.slideBackgroundElement,\n\t\t\tcontentElement = slide.slideBackgroundContentElement;\n\n\t\tconst data = {\n\t\t\tbackground: slide.getAttribute( 'data-background' ),\n\t\t\tbackgroundSize: slide.getAttribute( 'data-background-size' ),\n\t\t\tbackgroundImage: slide.getAttribute( 'data-background-image' ),\n\t\t\tbackgroundVideo: slide.getAttribute( 'data-background-video' ),\n\t\t\tbackgroundIframe: slide.getAttribute( 'data-background-iframe' ),\n\t\t\tbackgroundColor: slide.getAttribute( 'data-background-color' ),\n\t\t\tbackgroundGradient: slide.getAttribute( 'data-background-gradient' ),\n\t\t\tbackgroundRepeat: slide.getAttribute( 'data-background-repeat' ),\n\t\t\tbackgroundPosition: slide.getAttribute( 'data-background-position' ),\n\t\t\tbackgroundTransition: slide.getAttribute( 'data-background-transition' ),\n\t\t\tbackgroundOpacity: slide.getAttribute( 'data-background-opacity' ),\n\t\t};\n\n\t\tconst dataPreload = slide.hasAttribute( 'data-preload' );\n\n\t\t// Reset the prior background state in case this is not the\n\t\t// initial sync\n\t\tslide.classList.remove( 'has-dark-background' );\n\t\tslide.classList.remove( 'has-light-background' );\n\n\t\telement.removeAttribute( 'data-loaded' );\n\t\telement.removeAttribute( 'data-background-hash' );\n\t\telement.removeAttribute( 'data-background-size' );\n\t\telement.removeAttribute( 'data-background-transition' );\n\t\telement.style.backgroundColor = '';\n\n\t\tcontentElement.style.backgroundSize = '';\n\t\tcontentElement.style.backgroundRepeat = '';\n\t\tcontentElement.style.backgroundPosition = '';\n\t\tcontentElement.style.backgroundImage = '';\n\t\tcontentElement.style.opacity = '';\n\t\tcontentElement.innerHTML = '';\n\n\t\tif( data.background ) {\n\t\t\t// Auto-wrap image urls in url(...)\n\t\t\tif( /^(http|file|\\/\\/)/gi.test( data.background ) || /\\.(svg|png|jpg|jpeg|gif|bmp|webp)([?#\\s]|$)/gi.test( data.background ) ) {\n\t\t\t\tslide.setAttribute( 'data-background-image', data.background );\n\t\t\t}\n\t\t\telse {\n\t\t\t\telement.style.background = data.background;\n\t\t\t}\n\t\t}\n\n\t\t// Create a hash for this combination of background settings.\n\t\t// This is used to determine when two slide backgrounds are\n\t\t// the same.\n\t\tif( data.background || data.backgroundColor || data.backgroundGradient || data.backgroundImage || data.backgroundVideo || data.backgroundIframe ) {\n\t\t\telement.setAttribute( 'data-background-hash', data.background +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.backgroundSize +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.backgroundImage +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.backgroundVideo +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.backgroundIframe +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.backgroundColor +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.backgroundGradient +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.backgroundRepeat +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.backgroundPosition +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.backgroundTransition +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.backgroundOpacity );\n\t\t}\n\n\t\t// Additional and optional background properties\n\t\tif( data.backgroundSize ) element.setAttribute( 'data-background-size', data.backgroundSize );\n\t\tif( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;\n\t\tif( data.backgroundGradient ) element.style.backgroundImage = data.backgroundGradient;\n\t\tif( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );\n\n\t\tif( dataPreload ) element.setAttribute( 'data-preload', '' );\n\n\t\t// Background image options are set on the content wrapper\n\t\tif( data.backgroundSize ) contentElement.style.backgroundSize = data.backgroundSize;\n\t\tif( data.backgroundRepeat ) contentElement.style.backgroundRepeat = data.backgroundRepeat;\n\t\tif( data.backgroundPosition ) contentElement.style.backgroundPosition = data.backgroundPosition;\n\t\tif( data.backgroundOpacity ) contentElement.style.opacity = data.backgroundOpacity;\n\n\t\tconst contrastClass = this.getContrastClass( slide );\n\n\t\tif( typeof contrastClass === 'string' ) {\n\t\t\tslide.classList.add( contrastClass );\n\t\t}\n\n\t}\n\n\t/**\n\t * Returns a class name that can be applied to a slide to indicate\n\t * if it has a light or dark background.\n\t *\n\t * @param {*} slide\n\t *\n\t * @returns {string|null}\n\t */\n\tgetContrastClass( slide ) {\n\n\t\tconst element = slide.slideBackgroundElement;\n\n\t\t// If this slide has a background color, we add a class that\n\t\t// signals if it is light or dark. If the slide has no background\n\t\t// color, no class will be added\n\t\tlet contrastColor = slide.getAttribute( 'data-background-color' );\n\n\t\t// If no bg color was found, or it cannot be converted by colorToRgb, check the computed background\n\t\tif( !contrastColor || !colorToRgb( contrastColor ) ) {\n\t\t\tlet computedBackgroundStyle = window.getComputedStyle( element );\n\t\t\tif( computedBackgroundStyle && computedBackgroundStyle.backgroundColor ) {\n\t\t\t\tcontrastColor = computedBackgroundStyle.backgroundColor;\n\t\t\t}\n\t\t}\n\n\t\tif( contrastColor ) {\n\t\t\tconst rgb = colorToRgb( contrastColor );\n\n\t\t\t// Ignore fully transparent backgrounds. Some browsers return\n\t\t\t// rgba(0,0,0,0) when reading the computed background color of\n\t\t\t// an element with no background\n\t\t\tif( rgb && rgb.a !== 0 ) {\n\t\t\t\tif( colorBrightness( contrastColor ) < 128 ) {\n\t\t\t\t\treturn 'has-dark-background';\n\t\t\t\t}\n\t\t\t\telse {\n\t\t\t\t\treturn 'has-light-background';\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn null;\n\n\t}\n\n\t/**\n\t * Bubble the 'has-light-background'/'has-dark-background' classes.\n\t */\n\tbubbleSlideContrastClassToElement( slide, target ) {\n\n\t\t[ 'has-light-background', 'has-dark-background' ].forEach( classToBubble => {\n\t\t\tif( slide.classList.contains( classToBubble ) ) {\n\t\t\t\ttarget.classList.add( classToBubble );\n\t\t\t}\n\t\t\telse {\n\t\t\t\ttarget.classList.remove( classToBubble );\n\t\t\t}\n\t\t}, this );\n\n\t}\n\n\t/**\n\t * Updates the background elements to reflect the current\n\t * slide.\n\t *\n\t * @param {boolean} includeAll If true, the backgrounds of\n\t * all vertical slides (not just the present) will be updated.\n\t */\n\tupdate( includeAll = false ) {\n\n\t\tlet currentSlide = this.Reveal.getCurrentSlide();\n\t\tlet indices = this.Reveal.getIndices();\n\n\t\tlet currentBackground = null;\n\n\t\t// Reverse past/future classes when in RTL mode\n\t\tlet horizontalPast = this.Reveal.getConfig().rtl ? 'future' : 'past',\n\t\t\thorizontalFuture = this.Reveal.getConfig().rtl ? 'past' : 'future';\n\n\t\t// Update the classes of all backgrounds to match the\n\t\t// states of their slides (past/present/future)\n\t\tArray.from( this.element.childNodes ).forEach( ( backgroundh, h ) => {\n\n\t\t\tbackgroundh.classList.remove( 'past', 'present', 'future' );\n\n\t\t\tif( h < indices.h ) {\n\t\t\t\tbackgroundh.classList.add( horizontalPast );\n\t\t\t}\n\t\t\telse if ( h > indices.h ) {\n\t\t\t\tbackgroundh.classList.add( horizontalFuture );\n\t\t\t}\n\t\t\telse {\n\t\t\t\tbackgroundh.classList.add( 'present' );\n\n\t\t\t\t// Store a reference to the current background element\n\t\t\t\tcurrentBackground = backgroundh;\n\t\t\t}\n\n\t\t\tif( includeAll || h === indices.h ) {\n\t\t\t\tqueryAll( backgroundh, '.slide-background' ).forEach( ( backgroundv, v ) => {\n\n\t\t\t\t\tbackgroundv.classList.remove( 'past', 'present', 'future' );\n\n\t\t\t\t\tif( v < indices.v ) {\n\t\t\t\t\t\tbackgroundv.classList.add( 'past' );\n\t\t\t\t\t}\n\t\t\t\t\telse if ( v > indices.v ) {\n\t\t\t\t\t\tbackgroundv.classList.add( 'future' );\n\t\t\t\t\t}\n\t\t\t\t\telse {\n\t\t\t\t\t\tbackgroundv.classList.add( 'present' );\n\n\t\t\t\t\t\t// Only if this is the present horizontal and vertical slide\n\t\t\t\t\t\tif( h === indices.h ) currentBackground = backgroundv;\n\t\t\t\t\t}\n\n\t\t\t\t} );\n\t\t\t}\n\n\t\t} );\n\n\t\t// Stop content inside of previous backgrounds\n\t\tif( this.previousBackground ) {\n\n\t\t\tthis.Reveal.slideContent.stopEmbeddedContent( this.previousBackground, { unloadIframes: !this.Reveal.slideContent.shouldPreload( this.previousBackground ) } );\n\n\t\t}\n\n\t\t// Start content in the current background\n\t\tif( currentBackground ) {\n\n\t\t\tthis.Reveal.slideContent.startEmbeddedContent( currentBackground );\n\n\t\t\tlet currentBackgroundContent = currentBackground.querySelector( '.slide-background-content' );\n\t\t\tif( currentBackgroundContent ) {\n\n\t\t\t\tlet backgroundImageURL = currentBackgroundContent.style.backgroundImage || '';\n\n\t\t\t\t// Restart GIFs (doesn't work in Firefox)\n\t\t\t\tif( /\\.gif/i.test( backgroundImageURL ) ) {\n\t\t\t\t\tcurrentBackgroundContent.style.backgroundImage = '';\n\t\t\t\t\twindow.getComputedStyle( currentBackgroundContent ).opacity;\n\t\t\t\t\tcurrentBackgroundContent.style.backgroundImage = backgroundImageURL;\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t\t// Don't transition between identical backgrounds. This\n\t\t\t// prevents unwanted flicker.\n\t\t\tlet previousBackgroundHash = this.previousBackground ? this.previousBackground.getAttribute( 'data-background-hash' ) : null;\n\t\t\tlet currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' );\n\t\t\tif( currentBackgroundHash && currentBackgroundHash === previousBackgroundHash && currentBackground !== this.previousBackground ) {\n\t\t\t\tthis.element.classList.add( 'no-transition' );\n\t\t\t}\n\n\t\t\tthis.previousBackground = currentBackground;\n\n\t\t}\n\n\t\t// If there's a background brightness flag for this slide,\n\t\t// bubble it to the .reveal container\n\t\tif( currentSlide ) {\n\t\t\tthis.bubbleSlideContrastClassToElement( currentSlide, this.Reveal.getRevealElement() );\n\t\t}\n\n\t\t// Allow the first background to apply without transition\n\t\tsetTimeout( () => {\n\t\t\tthis.element.classList.remove( 'no-transition' );\n\t\t}, 1 );\n\n\t}\n\n\t/**\n\t * Updates the position of the parallax background based\n\t * on the current slide index.\n\t */\n\tupdateParallax() {\n\n\t\tlet indices = this.Reveal.getIndices();\n\n\t\tif( this.Reveal.getConfig().parallaxBackgroundImage ) {\n\n\t\t\tlet horizontalSlides = this.Reveal.getHorizontalSlides(),\n\t\t\t\tverticalSlides = this.Reveal.getVerticalSlides();\n\n\t\t\tlet backgroundSize = this.element.style.backgroundSize.split( ' ' ),\n\t\t\t\tbackgroundWidth, backgroundHeight;\n\n\t\t\tif( backgroundSize.length === 1 ) {\n\t\t\t\tbackgroundWidth = backgroundHeight = parseInt( backgroundSize[0], 10 );\n\t\t\t}\n\t\t\telse {\n\t\t\t\tbackgroundWidth = parseInt( backgroundSize[0], 10 );\n\t\t\t\tbackgroundHeight = parseInt( backgroundSize[1], 10 );\n\t\t\t}\n\n\t\t\tlet slideWidth = this.element.offsetWidth,\n\t\t\t\thorizontalSlideCount = horizontalSlides.length,\n\t\t\t\thorizontalOffsetMultiplier,\n\t\t\t\thorizontalOffset;\n\n\t\t\tif( typeof this.Reveal.getConfig().parallaxBackgroundHorizontal === 'number' ) {\n\t\t\t\thorizontalOffsetMultiplier = this.Reveal.getConfig().parallaxBackgroundHorizontal;\n\t\t\t}\n\t\t\telse {\n\t\t\t\thorizontalOffsetMultiplier = horizontalSlideCount > 1 ? ( backgroundWidth - slideWidth ) / ( horizontalSlideCount-1 ) : 0;\n\t\t\t}\n\n\t\t\thorizontalOffset = horizontalOffsetMultiplier * indices.h * -1;\n\n\t\t\tlet slideHeight = this.element.offsetHeight,\n\t\t\t\tverticalSlideCount = verticalSlides.length,\n\t\t\t\tverticalOffsetMultiplier,\n\t\t\t\tverticalOffset;\n\n\t\t\tif( typeof this.Reveal.getConfig().parallaxBackgroundVertical === 'number' ) {\n\t\t\t\tverticalOffsetMultiplier = this.Reveal.getConfig().parallaxBackgroundVertical;\n\t\t\t}\n\t\t\telse {\n\t\t\t\tverticalOffsetMultiplier = ( backgroundHeight - slideHeight ) / ( verticalSlideCount-1 );\n\t\t\t}\n\n\t\t\tverticalOffset = verticalSlideCount > 0 ? verticalOffsetMultiplier * indices.v : 0;\n\n\t\t\tthis.element.style.backgroundPosition = horizontalOffset + 'px ' + -verticalOffset + 'px';\n\n\t\t}\n\n\t}\n\n\tdestroy() {\n\n\t\tthis.element.remove();\n\n\t}\n\n}\n","\nexport const SLIDES_SELECTOR = '.slides section';\nexport const HORIZONTAL_SLIDES_SELECTOR = '.slides>section';\nexport const VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section';\n\n// Methods that may not be invoked via the postMessage API\nexport const POST_MESSAGE_METHOD_BLACKLIST = /registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener|showPreview/;\n\n// Regex for retrieving the fragment style from a class attribute\nexport const FRAGMENT_STYLE_REGEX = /fade-(down|up|right|left|out|in-then-out|in-then-semi-out)|semi-fade-out|current-visible|shrink|grow/;","import { queryAll, extend, createStyleSheet, matches, closest } from '../utils/util.js'\nimport { FRAGMENT_STYLE_REGEX } from '../utils/constants.js'\n\n// Counter used to generate unique IDs for auto-animated elements\nlet autoAnimateCounter = 0;\n\n/**\n * Automatically animates matching elements across\n * slides with the [data-auto-animate] attribute.\n */\nexport default class AutoAnimate {\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t}\n\n\t/**\n\t * Runs an auto-animation between the given slides.\n\t *\n\t * @param {HTMLElement} fromSlide\n\t * @param {HTMLElement} toSlide\n\t */\n\trun( fromSlide, toSlide ) {\n\n\t\t// Clean up after prior animations\n\t\tthis.reset();\n\n\t\tlet allSlides = this.Reveal.getSlides();\n\t\tlet toSlideIndex = allSlides.indexOf( toSlide );\n\t\tlet fromSlideIndex = allSlides.indexOf( fromSlide );\n\n\t\t// Ensure that both slides are auto-animate targets with the same data-auto-animate-id value\n\t\t// (including null if absent on both) and that data-auto-animate-restart isn't set on the\n\t\t// physically latter slide (independent of slide direction)\n\t\tif( fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' )\n\t\t\t\t&& fromSlide.getAttribute( 'data-auto-animate-id' ) === toSlide.getAttribute( 'data-auto-animate-id' ) \n\t\t\t\t&& !( toSlideIndex > fromSlideIndex ? toSlide : fromSlide ).hasAttribute( 'data-auto-animate-restart' ) ) {\n\n\t\t\t// Create a new auto-animate sheet\n\t\t\tthis.autoAnimateStyleSheet = this.autoAnimateStyleSheet || createStyleSheet();\n\n\t\t\tlet animationOptions = this.getAutoAnimateOptions( toSlide );\n\n\t\t\t// Set our starting state\n\t\t\tfromSlide.dataset.autoAnimate = 'pending';\n\t\t\ttoSlide.dataset.autoAnimate = 'pending';\n\n\t\t\t// Flag the navigation direction, needed for fragment buildup\n\t\t\tanimationOptions.slideDirection = toSlideIndex > fromSlideIndex ? 'forward' : 'backward';\n\n\t\t\t// If the from-slide is hidden because it has moved outside\n\t\t\t// the view distance, we need to temporarily show it while\n\t\t\t// measuring\n\t\t\tlet fromSlideIsHidden = fromSlide.style.display === 'none';\n\t\t\tif( fromSlideIsHidden ) fromSlide.style.display = this.Reveal.getConfig().display;\n\n\t\t\t// Inject our auto-animate styles for this transition\n\t\t\tlet css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => {\n\t\t\t\treturn this.autoAnimateElements( elements.from, elements.to, elements.options || {}, animationOptions, autoAnimateCounter++ );\n\t\t\t} );\n\n\t\t\tif( fromSlideIsHidden ) fromSlide.style.display = 'none';\n\n\t\t\t// Animate unmatched elements, if enabled\n\t\t\tif( toSlide.dataset.autoAnimateUnmatched !== 'false' && this.Reveal.getConfig().autoAnimateUnmatched === true ) {\n\n\t\t\t\t// Our default timings for unmatched elements\n\t\t\t\tlet defaultUnmatchedDuration = animationOptions.duration * 0.8,\n\t\t\t\t\tdefaultUnmatchedDelay = animationOptions.duration * 0.2;\n\n\t\t\t\tthis.getUnmatchedAutoAnimateElements( toSlide ).forEach( unmatchedElement => {\n\n\t\t\t\t\tlet unmatchedOptions = this.getAutoAnimateOptions( unmatchedElement, animationOptions );\n\t\t\t\t\tlet id = 'unmatched';\n\n\t\t\t\t\t// If there is a duration or delay set specifically for this\n\t\t\t\t\t// element our unmatched elements should adhere to those\n\t\t\t\t\tif( unmatchedOptions.duration !== animationOptions.duration || unmatchedOptions.delay !== animationOptions.delay ) {\n\t\t\t\t\t\tid = 'unmatched-' + autoAnimateCounter++;\n\t\t\t\t\t\tcss.push( `[data-auto-animate=\"running\"] [data-auto-animate-target=\"${id}\"] { transition: opacity ${unmatchedOptions.duration}s ease ${unmatchedOptions.delay}s; }` );\n\t\t\t\t\t}\n\n\t\t\t\t\tunmatchedElement.dataset.autoAnimateTarget = id;\n\n\t\t\t\t}, this );\n\n\t\t\t\t// Our default transition for unmatched elements\n\t\t\t\tcss.push( `[data-auto-animate=\"running\"] [data-auto-animate-target=\"unmatched\"] { transition: opacity ${defaultUnmatchedDuration}s ease ${defaultUnmatchedDelay}s; }` );\n\n\t\t\t}\n\n\t\t\t// Setting the whole chunk of CSS at once is the most\n\t\t\t// efficient way to do this. Using sheet.insertRule\n\t\t\t// is multiple factors slower.\n\t\t\tthis.autoAnimateStyleSheet.innerHTML = css.join( '' );\n\n\t\t\t// Start the animation next cycle\n\t\t\trequestAnimationFrame( () => {\n\t\t\t\tif( this.autoAnimateStyleSheet ) {\n\t\t\t\t\t// This forces our newly injected styles to be applied in Firefox\n\t\t\t\t\tgetComputedStyle( this.autoAnimateStyleSheet ).fontWeight;\n\n\t\t\t\t\ttoSlide.dataset.autoAnimate = 'running';\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tthis.Reveal.dispatchEvent({\n\t\t\t\ttype: 'autoanimate',\n\t\t\t\tdata: {\n\t\t\t\t\tfromSlide,\n\t\t\t\t\ttoSlide,\n\t\t\t\t\tsheet: this.autoAnimateStyleSheet\n\t\t\t\t}\n\t\t\t});\n\n\t\t}\n\n\t}\n\n\t/**\n\t * Rolls back all changes that we've made to the DOM so\n\t * that as part of animating.\n\t */\n\treset() {\n\n\t\t// Reset slides\n\t\tqueryAll( this.Reveal.getRevealElement(), '[data-auto-animate]:not([data-auto-animate=\"\"])' ).forEach( element => {\n\t\t\telement.dataset.autoAnimate = '';\n\t\t} );\n\n\t\t// Reset elements\n\t\tqueryAll( this.Reveal.getRevealElement(), '[data-auto-animate-target]' ).forEach( element => {\n\t\t\tdelete element.dataset.autoAnimateTarget;\n\t\t} );\n\n\t\t// Remove the animation sheet\n\t\tif( this.autoAnimateStyleSheet && this.autoAnimateStyleSheet.parentNode ) {\n\t\t\tthis.autoAnimateStyleSheet.parentNode.removeChild( this.autoAnimateStyleSheet );\n\t\t\tthis.autoAnimateStyleSheet = null;\n\t\t}\n\n\t}\n\n\t/**\n\t * Creates a FLIP animation where the `to` element starts out\n\t * in the `from` element position and animates to its original\n\t * state.\n\t *\n\t * @param {HTMLElement} from\n\t * @param {HTMLElement} to\n\t * @param {Object} elementOptions Options for this element pair\n\t * @param {Object} animationOptions Options set at the slide level\n\t * @param {String} id Unique ID that we can use to identify this\n\t * auto-animate element in the DOM\n\t */\n\tautoAnimateElements( from, to, elementOptions, animationOptions, id ) {\n\n\t\t// 'from' elements are given a data-auto-animate-target with no value,\n\t\t// 'to' elements are are given a data-auto-animate-target with an ID\n\t\tfrom.dataset.autoAnimateTarget = '';\n\t\tto.dataset.autoAnimateTarget = id;\n\n\t\t// Each element may override any of the auto-animate options\n\t\t// like transition easing, duration and delay via data-attributes\n\t\tlet options = this.getAutoAnimateOptions( to, animationOptions );\n\n\t\t// If we're using a custom element matcher the element options\n\t\t// may contain additional transition overrides\n\t\tif( typeof elementOptions.delay !== 'undefined' ) options.delay = elementOptions.delay;\n\t\tif( typeof elementOptions.duration !== 'undefined' ) options.duration = elementOptions.duration;\n\t\tif( typeof elementOptions.easing !== 'undefined' ) options.easing = elementOptions.easing;\n\n\t\tlet fromProps = this.getAutoAnimatableProperties( 'from', from, elementOptions ),\n\t\t\ttoProps = this.getAutoAnimatableProperties( 'to', to, elementOptions );\n\n\t\t// Maintain fragment visibility for matching elements when\n\t\t// we're navigating forwards, this way the viewer won't need\n\t\t// to step through the same fragments twice\n\t\tif( to.classList.contains( 'fragment' ) ) {\n\n\t\t\t// Don't auto-animate the opacity of fragments to avoid\n\t\t\t// conflicts with fragment animations\n\t\t\tdelete toProps.styles['opacity'];\n\n\t\t\tif( from.classList.contains( 'fragment' ) ) {\n\n\t\t\t\tlet fromFragmentStyle = ( from.className.match( FRAGMENT_STYLE_REGEX ) || [''] )[0];\n\t\t\t\tlet toFragmentStyle = ( to.className.match( FRAGMENT_STYLE_REGEX ) || [''] )[0];\n\n\t\t\t\t// Only skip the fragment if the fragment animation style\n\t\t\t\t// remains unchanged\n\t\t\t\tif( fromFragmentStyle === toFragmentStyle && animationOptions.slideDirection === 'forward' ) {\n\t\t\t\t\tto.classList.add( 'visible', 'disabled' );\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t}\n\n\t\t// If translation and/or scaling are enabled, css transform\n\t\t// the 'to' element so that it matches the position and size\n\t\t// of the 'from' element\n\t\tif( elementOptions.translate !== false || elementOptions.scale !== false ) {\n\n\t\t\tlet presentationScale = this.Reveal.getScale();\n\n\t\t\tlet delta = {\n\t\t\t\tx: ( fromProps.x - toProps.x ) / presentationScale,\n\t\t\t\ty: ( fromProps.y - toProps.y ) / presentationScale,\n\t\t\t\tscaleX: fromProps.width / toProps.width,\n\t\t\t\tscaleY: fromProps.height / toProps.height\n\t\t\t};\n\n\t\t\t// Limit decimal points to avoid 0.0001px blur and stutter\n\t\t\tdelta.x = Math.round( delta.x * 1000 ) / 1000;\n\t\t\tdelta.y = Math.round( delta.y * 1000 ) / 1000;\n\t\t\tdelta.scaleX = Math.round( delta.scaleX * 1000 ) / 1000;\n\t\t\tdelta.scaleX = Math.round( delta.scaleX * 1000 ) / 1000;\n\n\t\t\tlet translate = elementOptions.translate !== false && ( delta.x !== 0 || delta.y !== 0 ),\n\t\t\t\tscale = elementOptions.scale !== false && ( delta.scaleX !== 0 || delta.scaleY !== 0 );\n\n\t\t\t// No need to transform if nothing's changed\n\t\t\tif( translate || scale ) {\n\n\t\t\t\tlet transform = [];\n\n\t\t\t\tif( translate ) transform.push( `translate(${delta.x}px, ${delta.y}px)` );\n\t\t\t\tif( scale ) transform.push( `scale(${delta.scaleX}, ${delta.scaleY})` );\n\n\t\t\t\tfromProps.styles['transform'] = transform.join( ' ' );\n\t\t\t\tfromProps.styles['transform-origin'] = 'top left';\n\n\t\t\t\ttoProps.styles['transform'] = 'none';\n\n\t\t\t}\n\n\t\t}\n\n\t\t// Delete all unchanged 'to' styles\n\t\tfor( let propertyName in toProps.styles ) {\n\t\t\tconst toValue = toProps.styles[propertyName];\n\t\t\tconst fromValue = fromProps.styles[propertyName];\n\n\t\t\tif( toValue === fromValue ) {\n\t\t\t\tdelete toProps.styles[propertyName];\n\t\t\t}\n\t\t\telse {\n\t\t\t\t// If these property values were set via a custom matcher providing\n\t\t\t\t// an explicit 'from' and/or 'to' value, we always inject those values.\n\t\t\t\tif( toValue.explicitValue === true ) {\n\t\t\t\t\ttoProps.styles[propertyName] = toValue.value;\n\t\t\t\t}\n\n\t\t\t\tif( fromValue.explicitValue === true ) {\n\t\t\t\t\tfromProps.styles[propertyName] = fromValue.value;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tlet css = '';\n\n\t\tlet toStyleProperties = Object.keys( toProps.styles );\n\n\t\t// Only create animate this element IF at least one style\n\t\t// property has changed\n\t\tif( toStyleProperties.length > 0 ) {\n\n\t\t\t// Instantly move to the 'from' state\n\t\t\tfromProps.styles['transition'] = 'none';\n\n\t\t\t// Animate towards the 'to' state\n\t\t\ttoProps.styles['transition'] = `all ${options.duration}s ${options.easing} ${options.delay}s`;\n\t\t\ttoProps.styles['transition-property'] = toStyleProperties.join( ', ' );\n\t\t\ttoProps.styles['will-change'] = toStyleProperties.join( ', ' );\n\n\t\t\t// Build up our custom CSS. We need to override inline styles\n\t\t\t// so we need to make our styles vErY IMPORTANT!1!!\n\t\t\tlet fromCSS = Object.keys( fromProps.styles ).map( propertyName => {\n\t\t\t\treturn propertyName + ': ' + fromProps.styles[propertyName] + ' !important;';\n\t\t\t} ).join( '' );\n\n\t\t\tlet toCSS = Object.keys( toProps.styles ).map( propertyName => {\n\t\t\t\treturn propertyName + ': ' + toProps.styles[propertyName] + ' !important;';\n\t\t\t} ).join( '' );\n\n\t\t\tcss = \t'[data-auto-animate-target=\"'+ id +'\"] {'+ fromCSS +'}' +\n\t\t\t\t\t'[data-auto-animate=\"running\"] [data-auto-animate-target=\"'+ id +'\"] {'+ toCSS +'}';\n\n\t\t}\n\n\t\treturn css;\n\n\t}\n\n\t/**\n\t * Returns the auto-animate options for the given element.\n\t *\n\t * @param {HTMLElement} element Element to pick up options\n\t * from, either a slide or an animation target\n\t * @param {Object} [inheritedOptions] Optional set of existing\n\t * options\n\t */\n\tgetAutoAnimateOptions( element, inheritedOptions ) {\n\n\t\tlet options = {\n\t\t\teasing: this.Reveal.getConfig().autoAnimateEasing,\n\t\t\tduration: this.Reveal.getConfig().autoAnimateDuration,\n\t\t\tdelay: 0\n\t\t};\n\n\t\toptions = extend( options, inheritedOptions );\n\n\t\t// Inherit options from parent elements\n\t\tif( element.parentNode ) {\n\t\t\tlet autoAnimatedParent = closest( element.parentNode, '[data-auto-animate-target]' );\n\t\t\tif( autoAnimatedParent ) {\n\t\t\t\toptions = this.getAutoAnimateOptions( autoAnimatedParent, options );\n\t\t\t}\n\t\t}\n\n\t\tif( element.dataset.autoAnimateEasing ) {\n\t\t\toptions.easing = element.dataset.autoAnimateEasing;\n\t\t}\n\n\t\tif( element.dataset.autoAnimateDuration ) {\n\t\t\toptions.duration = parseFloat( element.dataset.autoAnimateDuration );\n\t\t}\n\n\t\tif( element.dataset.autoAnimateDelay ) {\n\t\t\toptions.delay = parseFloat( element.dataset.autoAnimateDelay );\n\t\t}\n\n\t\treturn options;\n\n\t}\n\n\t/**\n\t * Returns an object containing all of the properties\n\t * that can be auto-animated for the given element and\n\t * their current computed values.\n\t *\n\t * @param {String} direction 'from' or 'to'\n\t */\n\tgetAutoAnimatableProperties( direction, element, elementOptions ) {\n\n\t\tlet config = this.Reveal.getConfig();\n\n\t\tlet properties = { styles: [] };\n\n\t\t// Position and size\n\t\tif( elementOptions.translate !== false || elementOptions.scale !== false ) {\n\t\t\tlet bounds;\n\n\t\t\t// Custom auto-animate may optionally return a custom tailored\n\t\t\t// measurement function\n\t\t\tif( typeof elementOptions.measure === 'function' ) {\n\t\t\t\tbounds = elementOptions.measure( element );\n\t\t\t}\n\t\t\telse {\n\t\t\t\tif( config.center ) {\n\t\t\t\t\t// More precise, but breaks when used in combination\n\t\t\t\t\t// with zoom for scaling the deck ¯\\_(ツ)_/¯\n\t\t\t\t\tbounds = element.getBoundingClientRect();\n\t\t\t\t}\n\t\t\t\telse {\n\t\t\t\t\tlet scale = this.Reveal.getScale();\n\t\t\t\t\tbounds = {\n\t\t\t\t\t\tx: element.offsetLeft * scale,\n\t\t\t\t\t\ty: element.offsetTop * scale,\n\t\t\t\t\t\twidth: element.offsetWidth * scale,\n\t\t\t\t\t\theight: element.offsetHeight * scale\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tproperties.x = bounds.x;\n\t\t\tproperties.y = bounds.y;\n\t\t\tproperties.width = bounds.width;\n\t\t\tproperties.height = bounds.height;\n\t\t}\n\n\t\tconst computedStyles = getComputedStyle( element );\n\n\t\t// CSS styles\n\t\t( elementOptions.styles || config.autoAnimateStyles ).forEach( style => {\n\t\t\tlet value;\n\n\t\t\t// `style` is either the property name directly, or an object\n\t\t\t// definition of a style property\n\t\t\tif( typeof style === 'string' ) style = { property: style };\n\n\t\t\tif( typeof style.from !== 'undefined' && direction === 'from' ) {\n\t\t\t\tvalue = { value: style.from, explicitValue: true };\n\t\t\t}\n\t\t\telse if( typeof style.to !== 'undefined' && direction === 'to' ) {\n\t\t\t\tvalue = { value: style.to, explicitValue: true };\n\t\t\t}\n\t\t\telse {\n\t\t\t\t// Use a unitless value for line-height so that it inherits properly\n\t\t\t\tif( style.property === 'line-height' ) {\n\t\t\t\t\tvalue = parseFloat( computedStyles['line-height'] ) / parseFloat( computedStyles['font-size'] );\n\t\t\t\t}\n\n\t\t\t\tif( isNaN(value) ) {\n\t\t\t\t\tvalue = computedStyles[style.property];\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif( value !== '' ) {\n\t\t\t\tproperties.styles[style.property] = value;\n\t\t\t}\n\t\t} );\n\n\t\treturn properties;\n\n\t}\n\n\t/**\n\t * Get a list of all element pairs that we can animate\n\t * between the given slides.\n\t *\n\t * @param {HTMLElement} fromSlide\n\t * @param {HTMLElement} toSlide\n\t *\n\t * @return {Array} Each value is an array where [0] is\n\t * the element we're animating from and [1] is the\n\t * element we're animating to\n\t */\n\tgetAutoAnimatableElements( fromSlide, toSlide ) {\n\n\t\tlet matcher = typeof this.Reveal.getConfig().autoAnimateMatcher === 'function' ? this.Reveal.getConfig().autoAnimateMatcher : this.getAutoAnimatePairs;\n\n\t\tlet pairs = matcher.call( this, fromSlide, toSlide );\n\n\t\tlet reserved = [];\n\n\t\t// Remove duplicate pairs\n\t\treturn pairs.filter( ( pair, index ) => {\n\t\t\tif( reserved.indexOf( pair.to ) === -1 ) {\n\t\t\t\treserved.push( pair.to );\n\t\t\t\treturn true;\n\t\t\t}\n\t\t} );\n\n\t}\n\n\t/**\n\t * Identifies matching elements between slides.\n\t *\n\t * You can specify a custom matcher function by using\n\t * the `autoAnimateMatcher` config option.\n\t */\n\tgetAutoAnimatePairs( fromSlide, toSlide ) {\n\n\t\tlet pairs = [];\n\n\t\tconst codeNodes = 'pre';\n\t\tconst textNodes = 'h1, h2, h3, h4, h5, h6, p, li';\n\t\tconst mediaNodes = 'img, video, iframe';\n\n\t\t// Explicit matches via data-id\n\t\tthis.findAutoAnimateMatches( pairs, fromSlide, toSlide, '[data-id]', node => {\n\t\t\treturn node.nodeName + ':::' + node.getAttribute( 'data-id' );\n\t\t} );\n\n\t\t// Text\n\t\tthis.findAutoAnimateMatches( pairs, fromSlide, toSlide, textNodes, node => {\n\t\t\treturn node.nodeName + ':::' + node.innerText;\n\t\t} );\n\n\t\t// Media\n\t\tthis.findAutoAnimateMatches( pairs, fromSlide, toSlide, mediaNodes, node => {\n\t\t\treturn node.nodeName + ':::' + ( node.getAttribute( 'src' ) || node.getAttribute( 'data-src' ) );\n\t\t} );\n\n\t\t// Code\n\t\tthis.findAutoAnimateMatches( pairs, fromSlide, toSlide, codeNodes, node => {\n\t\t\treturn node.nodeName + ':::' + node.innerText;\n\t\t} );\n\n\t\tpairs.forEach( pair => {\n\t\t\t// Disable scale transformations on text nodes, we transition\n\t\t\t// each individual text property instead\n\t\t\tif( matches( pair.from, textNodes ) ) {\n\t\t\t\tpair.options = { scale: false };\n\t\t\t}\n\t\t\t// Animate individual lines of code\n\t\t\telse if( matches( pair.from, codeNodes ) ) {\n\n\t\t\t\t// Transition the code block's width and height instead of scaling\n\t\t\t\t// to prevent its content from being squished\n\t\t\t\tpair.options = { scale: false, styles: [ 'width', 'height' ] };\n\n\t\t\t\t// Lines of code\n\t\t\t\tthis.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-code', node => {\n\t\t\t\t\treturn node.textContent;\n\t\t\t\t}, {\n\t\t\t\t\tscale: false,\n\t\t\t\t\tstyles: [],\n\t\t\t\t\tmeasure: this.getLocalBoundingBox.bind( this )\n\t\t\t\t} );\n\n\t\t\t\t// Line numbers\n\t\t\t\tthis.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-numbers[data-line-number]', node => {\n\t\t\t\t\treturn node.getAttribute( 'data-line-number' );\n\t\t\t\t}, {\n\t\t\t\t\tscale: false,\n\t\t\t\t\tstyles: [ 'width' ],\n\t\t\t\t\tmeasure: this.getLocalBoundingBox.bind( this )\n\t\t\t\t} );\n\n\t\t\t}\n\n\t\t}, this );\n\n\t\treturn pairs;\n\n\t}\n\n\t/**\n\t * Helper method which returns a bounding box based on\n\t * the given elements offset coordinates.\n\t *\n\t * @param {HTMLElement} element\n\t * @return {Object} x, y, width, height\n\t */\n\tgetLocalBoundingBox( element ) {\n\n\t\tconst presentationScale = this.Reveal.getScale();\n\n\t\treturn {\n\t\t\tx: Math.round( ( element.offsetLeft * presentationScale ) * 100 ) / 100,\n\t\t\ty: Math.round( ( element.offsetTop * presentationScale ) * 100 ) / 100,\n\t\t\twidth: Math.round( ( element.offsetWidth * presentationScale ) * 100 ) / 100,\n\t\t\theight: Math.round( ( element.offsetHeight * presentationScale ) * 100 ) / 100\n\t\t};\n\n\t}\n\n\t/**\n\t * Finds matching elements between two slides.\n\t *\n\t * @param {Array} pairs \tList of pairs to push matches to\n\t * @param {HTMLElement} fromScope Scope within the from element exists\n\t * @param {HTMLElement} toScope Scope within the to element exists\n\t * @param {String} selector CSS selector of the element to match\n\t * @param {Function} serializer A function that accepts an element and returns\n\t * a stringified ID based on its contents\n\t * @param {Object} animationOptions Optional config options for this pair\n\t */\n\tfindAutoAnimateMatches( pairs, fromScope, toScope, selector, serializer, animationOptions ) {\n\n\t\tlet fromMatches = {};\n\t\tlet toMatches = {};\n\n\t\t[].slice.call( fromScope.querySelectorAll( selector ) ).forEach( ( element, i ) => {\n\t\t\tconst key = serializer( element );\n\t\t\tif( typeof key === 'string' && key.length ) {\n\t\t\t\tfromMatches[key] = fromMatches[key] || [];\n\t\t\t\tfromMatches[key].push( element );\n\t\t\t}\n\t\t} );\n\n\t\t[].slice.call( toScope.querySelectorAll( selector ) ).forEach( ( element, i ) => {\n\t\t\tconst key = serializer( element );\n\t\t\ttoMatches[key] = toMatches[key] || [];\n\t\t\ttoMatches[key].push( element );\n\n\t\t\tlet fromElement;\n\n\t\t\t// Retrieve the 'from' element\n\t\t\tif( fromMatches[key] ) {\n\t\t\t\tconst primaryIndex = toMatches[key].length - 1;\n\t\t\t\tconst secondaryIndex = fromMatches[key].length - 1;\n\n\t\t\t\t// If there are multiple identical from elements, retrieve\n\t\t\t\t// the one at the same index as our to-element.\n\t\t\t\tif( fromMatches[key][ primaryIndex ] ) {\n\t\t\t\t\tfromElement = fromMatches[key][ primaryIndex ];\n\t\t\t\t\tfromMatches[key][ primaryIndex ] = null;\n\t\t\t\t}\n\t\t\t\t// If there are no matching from-elements at the same index,\n\t\t\t\t// use the last one.\n\t\t\t\telse if( fromMatches[key][ secondaryIndex ] ) {\n\t\t\t\t\tfromElement = fromMatches[key][ secondaryIndex ];\n\t\t\t\t\tfromMatches[key][ secondaryIndex ] = null;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// If we've got a matching pair, push it to the list of pairs\n\t\t\tif( fromElement ) {\n\t\t\t\tpairs.push({\n\t\t\t\t\tfrom: fromElement,\n\t\t\t\t\tto: element,\n\t\t\t\t\toptions: animationOptions\n\t\t\t\t});\n\t\t\t}\n\t\t} );\n\n\t}\n\n\t/**\n\t * Returns a all elements within the given scope that should\n\t * be considered unmatched in an auto-animate transition. If\n\t * fading of unmatched elements is turned on, these elements\n\t * will fade when going between auto-animate slides.\n\t *\n\t * Note that parents of auto-animate targets are NOT considered\n\t * unmatched since fading them would break the auto-animation.\n\t *\n\t * @param {HTMLElement} rootElement\n\t * @return {Array}\n\t */\n\tgetUnmatchedAutoAnimateElements( rootElement ) {\n\n\t\treturn [].slice.call( rootElement.children ).reduce( ( result, element ) => {\n\n\t\t\tconst containsAnimatedElements = element.querySelector( '[data-auto-animate-target]' );\n\n\t\t\t// The element is unmatched if\n\t\t\t// - It is not an auto-animate target\n\t\t\t// - It does not contain any auto-animate targets\n\t\t\tif( !element.hasAttribute( 'data-auto-animate-target' ) && !containsAnimatedElements ) {\n\t\t\t\tresult.push( element );\n\t\t\t}\n\n\t\t\tif( element.querySelector( '[data-auto-animate-target]' ) ) {\n\t\t\t\tresult = result.concat( this.getUnmatchedAutoAnimateElements( element ) );\n\t\t\t}\n\n\t\t\treturn result;\n\n\t\t}, [] );\n\n\t}\n\n}\n","import { HORIZONTAL_SLIDES_SELECTOR } from '../utils/constants.js'\nimport { queryAll } from '../utils/util.js'\n\nconst HIDE_SCROLLBAR_TIMEOUT = 500;\nconst MAX_PROGRESS_SPACING = 4;\nconst MIN_PROGRESS_SEGMENT_HEIGHT = 6;\nconst MIN_PLAYHEAD_HEIGHT = 8;\n\n/**\n * The scroll view lets you read a reveal.js presentation\n * as a linear scrollable page.\n */\nexport default class ScrollView {\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t\tthis.active = false;\n\t\tthis.activatedCallbacks = [];\n\n\t\tthis.onScroll = this.onScroll.bind( this );\n\n\t}\n\n\t/**\n\t * Activates the scroll view. This rearranges the presentation DOM\n\t * by—among other things—wrapping each slide in a page element.\n\t */\n\tactivate() {\n\n\t\tif( this.active ) return;\n\n\t\tconst stateBeforeActivation = this.Reveal.getState();\n\n\t\tthis.active = true;\n\n\t\t// Store the full presentation HTML so that we can restore it\n\t\t// when/if the scroll view is deactivated\n\t\tthis.slideHTMLBeforeActivation = this.Reveal.getSlidesElement().innerHTML;\n\n\t\tconst horizontalSlides = queryAll( this.Reveal.getRevealElement(), HORIZONTAL_SLIDES_SELECTOR );\n\n\t\tthis.viewportElement.classList.add( 'loading-scroll-mode', 'reveal-scroll' );\n\n\t\tlet presentationBackground;\n\n\t\tconst viewportStyles = window.getComputedStyle( this.viewportElement );\n\t\tif( viewportStyles && viewportStyles.background ) {\n\t\t\tpresentationBackground = viewportStyles.background;\n\t\t}\n\n\t\tconst pageElements = [];\n\t\tconst pageContainer = horizontalSlides[0].parentNode;\n\n\t\tlet previousSlide;\n\n\t\t// Creates a new page element and appends the given slide/bg\n\t\t// to it.\n\t\tconst createPageElement = ( slide, h, v ) => {\n\n\t\t\tlet contentContainer;\n\n\t\t\t// If this slide is part of an auto-animation sequence, we\n\t\t\t// group it under the same page element as the previous slide\n\t\t\tif( previousSlide && this.Reveal.shouldAutoAnimateBetween( previousSlide, slide ) ) {\n\t\t\t\tcontentContainer = document.createElement( 'div' );\n\t\t\t\tcontentContainer.className = 'scroll-page-content scroll-auto-animate-page';\n\t\t\t\tcontentContainer.style.display = 'none';\n\t\t\t\tpreviousSlide.closest( '.scroll-page-content' ).parentNode.appendChild( contentContainer );\n\t\t\t}\n\t\t\telse {\n\t\t\t\t// Wrap the slide in a page element and hide its overflow\n\t\t\t\t// so that no page ever flows onto another\n\t\t\t\tconst page = document.createElement( 'div' );\n\t\t\t\tpage.className = 'scroll-page';\n\t\t\t\tpageElements.push( page );\n\n\t\t\t\t// Copy the presentation-wide background to each page\n\t\t\t\tif( presentationBackground ) {\n\t\t\t\t\tpage.style.background = presentationBackground;\n\t\t\t\t}\n\n\t\t\t\tconst stickyContainer = document.createElement( 'div' );\n\t\t\t\tstickyContainer.className = 'scroll-page-sticky';\n\t\t\t\tpage.appendChild( stickyContainer );\n\n\t\t\t\tcontentContainer = document.createElement( 'div' );\n\t\t\t\tcontentContainer.className = 'scroll-page-content';\n\t\t\t\tstickyContainer.appendChild( contentContainer );\n\t\t\t}\n\n\t\t\tcontentContainer.appendChild( slide );\n\n\t\t\tslide.classList.remove( 'past', 'future' );\n\t\t\tslide.setAttribute( 'data-index-h', h );\n\t\t\tslide.setAttribute( 'data-index-v', v );\n\n\t\t\tif( slide.slideBackgroundElement ) {\n\t\t\t\tslide.slideBackgroundElement.remove( 'past', 'future' );\n\t\t\t\tcontentContainer.insertBefore( slide.slideBackgroundElement, slide );\n\t\t\t}\n\n\t\t\tpreviousSlide = slide;\n\n\t\t}\n\n\t\t// Slide and slide background layout\n\t\thorizontalSlides.forEach( ( horizontalSlide, h ) => {\n\n\t\t\tif( this.Reveal.isVerticalStack( horizontalSlide ) ) {\n\t\t\t\thorizontalSlide.querySelectorAll( 'section' ).forEach( ( verticalSlide, v ) => {\n\t\t\t\t\tcreatePageElement( verticalSlide, h, v );\n\t\t\t\t});\n\t\t\t}\n\t\t\telse {\n\t\t\t\tcreatePageElement( horizontalSlide, h, 0 );\n\t\t\t}\n\n\t\t}, this );\n\n\t\tthis.createProgressBar();\n\n\t\t// Remove leftover stacks\n\t\tqueryAll( this.Reveal.getRevealElement(), '.stack' ).forEach( stack => stack.remove() );\n\n\t\t// Add our newly created pages to the DOM\n\t\tpageElements.forEach( page => pageContainer.appendChild( page ) );\n\n\t\t// Re-run JS-based content layout after the slide is added to page DOM\n\t\tthis.Reveal.slideContent.layout( this.Reveal.getSlidesElement() );\n\n\t\tthis.Reveal.layout();\n\t\tthis.Reveal.setState( stateBeforeActivation );\n\n\t\tthis.activatedCallbacks.forEach( callback => callback() );\n\t\tthis.activatedCallbacks = [];\n\n\t\tthis.restoreScrollPosition();\n\n\t\tthis.viewportElement.classList.remove( 'loading-scroll-mode' );\n\t\tthis.viewportElement.addEventListener( 'scroll', this.onScroll, { passive: true } );\n\n\t}\n\n\t/**\n\t * Deactivates the scroll view and restores the standard slide-based\n\t * presentation.\n\t */\n\tdeactivate() {\n\n\t\tif( !this.active ) return;\n\n\t\tconst stateBeforeDeactivation = this.Reveal.getState();\n\n\t\tthis.active = false;\n\n\t\tthis.viewportElement.removeEventListener( 'scroll', this.onScroll );\n\t\tthis.viewportElement.classList.remove( 'reveal-scroll' );\n\n\t\tthis.removeProgressBar();\n\n\t\tthis.Reveal.getSlidesElement().innerHTML = this.slideHTMLBeforeActivation;\n\t\tthis.Reveal.sync();\n\t\tthis.Reveal.setState( stateBeforeDeactivation );\n\n\t\tthis.slideHTMLBeforeActivation = null;\n\n\t}\n\n\ttoggle( override ) {\n\n\t\tif( typeof override === 'boolean' ) {\n\t\t\toverride ? this.activate() : this.deactivate();\n\t\t}\n\t\telse {\n\t\t\tthis.isActive() ? this.deactivate() : this.activate();\n\t\t}\n\n\t}\n\n\t/**\n\t * Checks if the scroll view is currently active.\n\t */\n\tisActive() {\n\n\t\treturn this.active;\n\n\t}\n\n\t/**\n\t * Renders the progress bar component.\n\t */\n\tcreateProgressBar() {\n\n\t\tthis.progressBar = document.createElement( 'div' );\n\t\tthis.progressBar.className = 'scrollbar';\n\n\t\tthis.progressBarInner = document.createElement( 'div' );\n\t\tthis.progressBarInner.className = 'scrollbar-inner';\n\t\tthis.progressBar.appendChild( this.progressBarInner );\n\n\t\tthis.progressBarPlayhead = document.createElement( 'div' );\n\t\tthis.progressBarPlayhead.className = 'scrollbar-playhead';\n\t\tthis.progressBarInner.appendChild( this.progressBarPlayhead );\n\n\t\tthis.viewportElement.insertBefore( this.progressBar, this.viewportElement.firstChild );\n\n\t\tconst handleDocumentMouseMove\t= ( event ) => {\n\n\t\t\tlet progress = ( event.clientY - this.progressBarInner.getBoundingClientRect().top ) / this.progressBarHeight;\n\t\t\tprogress = Math.max( Math.min( progress, 1 ), 0 );\n\n\t\t\tthis.viewportElement.scrollTop = progress * ( this.viewportElement.scrollHeight - this.viewportElement.offsetHeight );\n\n\t\t};\n\n\t\tconst handleDocumentMouseUp = ( event ) => {\n\n\t\t\tthis.draggingProgressBar = false;\n\t\t\tthis.showProgressBar();\n\n\t\t\tdocument.removeEventListener( 'mousemove', handleDocumentMouseMove );\n\t\t\tdocument.removeEventListener( 'mouseup', handleDocumentMouseUp );\n\n\t\t};\n\n\t\tconst handleMouseDown = ( event ) => {\n\n\t\t\tevent.preventDefault();\n\n\t\t\tthis.draggingProgressBar = true;\n\n\t\t\tdocument.addEventListener( 'mousemove', handleDocumentMouseMove );\n\t\t\tdocument.addEventListener( 'mouseup', handleDocumentMouseUp );\n\n\t\t\thandleDocumentMouseMove( event );\n\n\t\t};\n\n\t\tthis.progressBarInner.addEventListener( 'mousedown', handleMouseDown );\n\n\t}\n\n\tremoveProgressBar() {\n\n\t\tif( this.progressBar ) {\n\t\t\tthis.progressBar.remove();\n\t\t\tthis.progressBar = null;\n\t\t}\n\n\t}\n\n\tlayout() {\n\n\t\tif( this.isActive() ) {\n\t\t\tthis.syncPages();\n\t\t\tthis.syncScrollPosition();\n\t\t}\n\n\t}\n\n\t/**\n\t * Updates our pages to match the latest configuration and\n\t * presentation size.\n\t */\n\tsyncPages() {\n\n\t\tconst config = this.Reveal.getConfig();\n\n\t\tconst slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );\n\t\tconst scale = this.Reveal.getScale();\n\t\tconst useCompactLayout = config.scrollLayout === 'compact';\n\n\t\tconst viewportHeight = this.viewportElement.offsetHeight;\n\t\tconst compactHeight = slideSize.height * scale;\n\t\tconst pageHeight = useCompactLayout ? compactHeight : viewportHeight;\n\n\t\t// The height that needs to be scrolled between scroll triggers\n\t\tconst scrollTriggerHeight = useCompactLayout ? compactHeight : viewportHeight;\n\n\t\tthis.viewportElement.style.setProperty( '--page-height', pageHeight + 'px' );\n\t\tthis.viewportElement.style.scrollSnapType = typeof config.scrollSnap === 'string' ? `y ${config.scrollSnap}` : '';\n\n\t\t// This will hold all scroll triggers used to show/hide slides\n\t\tthis.slideTriggers = [];\n\n\t\tconst pageElements = Array.from( this.Reveal.getRevealElement().querySelectorAll( '.scroll-page' ) );\n\n\t\tthis.pages = pageElements.map( pageElement => {\n\t\t\tconst page = this.createPage({\n\t\t\t\tpageElement,\n\t\t\t\tslideElement: pageElement.querySelector( 'section' ),\n\t\t\t\tstickyElement: pageElement.querySelector( '.scroll-page-sticky' ),\n\t\t\t\tcontentElement: pageElement.querySelector( '.scroll-page-content' ),\n\t\t\t\tbackgroundElement: pageElement.querySelector( '.slide-background' ),\n\t\t\t\tautoAnimateElements: pageElement.querySelectorAll( '.scroll-auto-animate-page' ),\n\t\t\t\tautoAnimatePages: []\n\t\t\t});\n\n\t\t\tpage.pageElement.style.setProperty( '--slide-height', config.center === true ? 'auto' : slideSize.height + 'px' );\n\n\t\t\tthis.slideTriggers.push({\n\t\t\t\tpage: page,\n\t\t\t\tactivate: () => this.activatePage( page ),\n\t\t\t\tdeactivate: () => this.deactivatePage( page )\n\t\t\t});\n\n\t\t\t// Create scroll triggers that show/hide fragments\n\t\t\tthis.createFragmentTriggersForPage( page );\n\n\t\t\t// Create scroll triggers for triggering auto-animate steps\n\t\t\tif( page.autoAnimateElements.length > 0 ) {\n\t\t\t\tthis.createAutoAnimateTriggersForPage( page );\n\t\t\t}\n\n\t\t\tlet totalScrollTriggerCount = Math.max( page.scrollTriggers.length - 1, 0 );\n\n\t\t\t// Each auto-animate step may include its own scroll triggers\n\t\t\t// for fragments, ensure we count those as well\n\t\t\ttotalScrollTriggerCount += page.autoAnimatePages.reduce( ( total, page ) => {\n\t\t\t\treturn total + Math.max( page.scrollTriggers.length - 1, 0 );\n\t\t\t}, page.autoAnimatePages.length );\n\n\t\t\t// Clean up from previous renders\n\t\t\tpage.pageElement.querySelectorAll( '.scroll-snap-point' ).forEach( el => el.remove() );\n\n\t\t\t// Create snap points for all scroll triggers\n\t\t\t// - Can't be absolute in FF\n\t\t\t// - Can't be 0-height in Safari\n\t\t\t// - Can't use snap-align on parent in Safari because then\n\t\t\t// inner triggers won't work\n\t\t\tfor( let i = 0; i < totalScrollTriggerCount + 1; i++ ) {\n\t\t\t\tconst triggerStick = document.createElement( 'div' );\n\t\t\t\ttriggerStick.className = 'scroll-snap-point';\n\t\t\t\ttriggerStick.style.height = scrollTriggerHeight + 'px';\n\t\t\t\ttriggerStick.style.scrollSnapAlign = useCompactLayout ? 'center' : 'start';\n\t\t\t\tpage.pageElement.appendChild( triggerStick );\n\n\t\t\t\tif( i === 0 ) {\n\t\t\t\t\ttriggerStick.style.marginTop = -scrollTriggerHeight + 'px';\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// In the compact layout, only slides with scroll triggers cover the\n\t\t\t// full viewport height. This helps avoid empty gaps before or after\n\t\t\t// a sticky slide.\n\t\t\tif( useCompactLayout && page.scrollTriggers.length > 0 ) {\n\t\t\t\tpage.pageHeight = viewportHeight;\n\t\t\t\tpage.pageElement.style.setProperty( '--page-height', viewportHeight + 'px' );\n\t\t\t}\n\t\t\telse {\n\t\t\t\tpage.pageHeight = pageHeight;\n\t\t\t\tpage.pageElement.style.removeProperty( '--page-height' );\n\t\t\t}\n\n\t\t\t// Add scroll padding based on how many scroll triggers we have\n\t\t\tpage.scrollPadding = scrollTriggerHeight * totalScrollTriggerCount;\n\n\t\t\t// The total height including scrollable space\n\t\t\tpage.totalHeight = page.pageHeight + page.scrollPadding;\n\n\t\t\t// This is used to pad the height of our page in CSS\n\t\t\tpage.pageElement.style.setProperty( '--page-scroll-padding', page.scrollPadding + 'px' );\n\n\t\t\t// If this is a sticky page, stick it to the vertical center\n\t\t\tif( totalScrollTriggerCount > 0 ) {\n\t\t\t\tpage.stickyElement.style.position = 'sticky';\n\t\t\t\tpage.stickyElement.style.top = Math.max( ( viewportHeight - page.pageHeight ) / 2, 0 ) + 'px';\n\t\t\t}\n\t\t\telse {\n\t\t\t\tpage.stickyElement.style.position = 'relative';\n\t\t\t\tpage.pageElement.style.scrollSnapAlign = page.pageHeight < viewportHeight ? 'center' : 'start';\n\t\t\t}\n\n\t\t\treturn page;\n\t\t} );\n\n\t\tthis.setTriggerRanges();\n\n\t\t/*\n\t\tconsole.log(this.slideTriggers.map( t => {\n\t\t\treturn {\n\t\t\t\trange: `${t.range[0].toFixed(2)}-${t.range[1].toFixed(2)}`,\n\t\t\t\ttriggers: t.page.scrollTriggers.map( t => {\n\t\t\t\t\treturn `${t.range[0].toFixed(2)}-${t.range[1].toFixed(2)}`\n\t\t\t\t}).join( ', ' ),\n\t\t\t}\n\t\t}))\n\t\t*/\n\n\t\tthis.viewportElement.setAttribute( 'data-scrollbar', config.scrollProgress );\n\n\t\tif( config.scrollProgress && this.totalScrollTriggerCount > 1 ) {\n\t\t\t// Create the progress bar if it doesn't already exist\n\t\t\tif( !this.progressBar ) this.createProgressBar();\n\n\t\t\tthis.syncProgressBar();\n\t\t}\n\t\telse {\n\t\t\tthis.removeProgressBar();\n\t\t}\n\n\t}\n\n\t/**\n\t * Calculates and sets the scroll range for all of our scroll\n\t * triggers.\n\t */\n\tsetTriggerRanges() {\n\n\t\t// Calculate the total number of scroll triggers\n\t\tthis.totalScrollTriggerCount = this.slideTriggers.reduce( ( total, trigger ) => {\n\t\t\treturn total + Math.max( trigger.page.scrollTriggers.length, 1 );\n\t\t}, 0 );\n\n\t\tlet rangeStart = 0;\n\n\t\t// Calculate the scroll range of each scroll trigger on a scale\n\t\t// of 0-1\n\t\tthis.slideTriggers.forEach( ( trigger, i ) => {\n\t\t\ttrigger.range = [\n\t\t\t\trangeStart,\n\t\t\t\trangeStart + Math.max( trigger.page.scrollTriggers.length, 1 ) / this.totalScrollTriggerCount\n\t\t\t];\n\n\t\t\tconst scrollTriggerSegmentSize = ( trigger.range[1] - trigger.range[0] ) / trigger.page.scrollTriggers.length;\n\n\t\t\t// Set the range for each inner scroll trigger\n\t\t\ttrigger.page.scrollTriggers.forEach( ( scrollTrigger, i ) => {\n\t\t\t\tscrollTrigger.range = [\n\t\t\t\t\trangeStart + i * scrollTriggerSegmentSize,\n\t\t\t\t\trangeStart + ( i + 1 ) * scrollTriggerSegmentSize\n\t\t\t\t];\n\t\t\t} );\n\n\t\t\trangeStart = trigger.range[1];\n\t\t} );\n\n\t}\n\n\t/**\n\t * Creates one scroll trigger for each fragments in the given page.\n\t *\n\t * @param {*} page\n\t */\n\tcreateFragmentTriggersForPage( page, slideElement ) {\n\n\t\tslideElement = slideElement || page.slideElement;\n\n\t\t// Each fragment 'group' is an array containing one or more\n\t\t// fragments. Multiple fragments that appear at the same time\n\t\t// are part of the same group.\n\t\tconst fragmentGroups = this.Reveal.fragments.sort( slideElement.querySelectorAll( '.fragment' ), true );\n\n\t\t// Create scroll triggers that show/hide fragments\n\t\tif( fragmentGroups.length ) {\n\t\t\tpage.fragments = this.Reveal.fragments.sort( slideElement.querySelectorAll( '.fragment:not(.disabled)' ) );\n\t\t\tpage.scrollTriggers.push(\n\t\t\t\t// Trigger for the initial state with no fragments visible\n\t\t\t\t{\n\t\t\t\t\tactivate: () => {\n\t\t\t\t\t\tthis.Reveal.fragments.update( -1, page.fragments, slideElement );\n\t\t\t\t\t}\n\t\t\t\t},\n\n\t\t\t\t// Triggers for each fragment group\n\t\t\t\t...fragmentGroups.map( ( fragments, i ) => ({\n\t\t\t\t\t\tactivate: () => {\n\t\t\t\t\t\t\tthis.Reveal.fragments.update( i, page.fragments, slideElement );\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\n\n\t\treturn page.scrollTriggers.length;\n\n\t}\n\n\t/**\n\t * Creates scroll triggers for the auto-animate steps in the\n\t * given page.\n\t *\n\t * @param {*} page\n\t */\n\tcreateAutoAnimateTriggersForPage( page ) {\n\n\t\tif( page.autoAnimateElements.length > 0 ) {\n\n\t\t\t// Triggers for each subsequent auto-animate slide\n\t\t\tthis.slideTriggers.push( ...Array.from( page.autoAnimateElements ).map( ( autoAnimateElement, i ) => {\n\t\t\t\tlet autoAnimatePage = this.createPage({\n\t\t\t\t\tslideElement: autoAnimateElement.querySelector( 'section' ),\n\t\t\t\t\tcontentElement: autoAnimateElement,\n\t\t\t\t\tbackgroundElement: autoAnimateElement.querySelector( '.slide-background' )\n\t\t\t\t});\n\n\t\t\t\t// Create fragment scroll triggers for the auto-animate slide\n\t\t\t\tthis.createFragmentTriggersForPage( autoAnimatePage, autoAnimatePage.slideElement );\n\n\t\t\t\tpage.autoAnimatePages.push( autoAnimatePage );\n\n\t\t\t\t// Return our slide trigger\n\t\t\t\treturn {\n\t\t\t\t\tpage: autoAnimatePage,\n\t\t\t\t\tactivate: () => this.activatePage( autoAnimatePage ),\n\t\t\t\t\tdeactivate: () => this.deactivatePage( autoAnimatePage )\n\t\t\t\t};\n\t\t\t}));\n\t\t}\n\n\t}\n\n\t/**\n\t * Helper method for creating a page definition and adding\n\t * required fields. A \"page\" is a slide or auto-animate step.\n\t */\n\tcreatePage( page ) {\n\n\t\tpage.scrollTriggers = [];\n\t\tpage.indexh = parseInt( page.slideElement.getAttribute( 'data-index-h' ), 10 );\n\t\tpage.indexv = parseInt( page.slideElement.getAttribute( 'data-index-v' ), 10 );\n\n\t\treturn page;\n\n\t}\n\n\t/**\n\t * Rerenders progress bar segments so that they match the current\n\t * reveal.js config and size.\n\t */\n\tsyncProgressBar() {\n\n\t\tthis.progressBarInner.querySelectorAll( '.scrollbar-slide' ).forEach( slide => slide.remove() );\n\n\t\tconst scrollHeight = this.viewportElement.scrollHeight;\n\t\tconst viewportHeight = this.viewportElement.offsetHeight;\n\t\tconst viewportHeightFactor = viewportHeight / scrollHeight;\n\n\t\tthis.progressBarHeight = this.progressBarInner.offsetHeight;\n\t\tthis.playheadHeight = Math.max( viewportHeightFactor * this.progressBarHeight, MIN_PLAYHEAD_HEIGHT );\n\t\tthis.progressBarScrollableHeight = this.progressBarHeight - this.playheadHeight;\n\n\t\tconst progressSegmentHeight = viewportHeight / scrollHeight * this.progressBarHeight;\n\t\tconst spacing = Math.min( progressSegmentHeight / 8, MAX_PROGRESS_SPACING );\n\n\t\tthis.progressBarPlayhead.style.height = this.playheadHeight - spacing + 'px';\n\n\t\t// Don't show individual segments if they're too small\n\t\tif( progressSegmentHeight > MIN_PROGRESS_SEGMENT_HEIGHT ) {\n\n\t\t\tthis.slideTriggers.forEach( slideTrigger => {\n\n\t\t\t\tconst { page } = slideTrigger;\n\n\t\t\t\t// Visual representation of a slide\n\t\t\t\tpage.progressBarSlide = document.createElement( 'div' );\n\t\t\t\tpage.progressBarSlide.className = 'scrollbar-slide';\n\t\t\t\tpage.progressBarSlide.style.top = slideTrigger.range[0] * this.progressBarHeight + 'px';\n\t\t\t\tpage.progressBarSlide.style.height = ( slideTrigger.range[1] - slideTrigger.range[0] ) * this.progressBarHeight - spacing + 'px';\n\t\t\t\tpage.progressBarSlide.classList.toggle( 'has-triggers', page.scrollTriggers.length > 0 );\n\t\t\t\tthis.progressBarInner.appendChild( page.progressBarSlide );\n\n\t\t\t\t// Visual representations of each scroll trigger\n\t\t\t\tpage.scrollTriggerElements = page.scrollTriggers.map( ( trigger, i ) => {\n\n\t\t\t\t\tconst triggerElement = document.createElement( 'div' );\n\t\t\t\t\ttriggerElement.className = 'scrollbar-trigger';\n\t\t\t\t\ttriggerElement.style.top = ( trigger.range[0] - slideTrigger.range[0] ) * this.progressBarHeight + 'px';\n\t\t\t\t\ttriggerElement.style.height = ( trigger.range[1] - trigger.range[0] ) * this.progressBarHeight - spacing + 'px';\n\t\t\t\t\tpage.progressBarSlide.appendChild( triggerElement );\n\n\t\t\t\t\tif( i === 0 ) triggerElement.style.display = 'none';\n\n\t\t\t\t\treturn triggerElement;\n\n\t\t\t\t} );\n\n\t\t\t} );\n\n\t\t}\n\t\telse {\n\n\t\t\tthis.pages.forEach( page => page.progressBarSlide = null );\n\n\t\t}\n\n\t}\n\n\t/**\n\t * Reads the current scroll position and updates our active\n\t * trigger states accordingly.\n\t */\n\tsyncScrollPosition() {\n\n\t\tconst viewportHeight = this.viewportElement.offsetHeight;\n\t\tconst viewportHeightFactor = viewportHeight / this.viewportElement.scrollHeight;\n\n\t\tconst scrollTop = this.viewportElement.scrollTop;\n\t\tconst scrollHeight = this.viewportElement.scrollHeight - viewportHeight\n\t\tconst scrollProgress = Math.max( Math.min( scrollTop / scrollHeight, 1 ), 0 );\n\t\tconst scrollProgressMid = Math.max( Math.min( ( scrollTop + viewportHeight / 2 ) / this.viewportElement.scrollHeight, 1 ), 0 );\n\n\t\tlet activePage;\n\n\t\tthis.slideTriggers.forEach( ( trigger ) => {\n\t\t\tconst { page } = trigger;\n\n\t\t\tconst shouldPreload = scrollProgress >= trigger.range[0] - viewportHeightFactor*2 &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscrollProgress <= trigger.range[1] + viewportHeightFactor*2;\n\n\t\t\t// Load slides that are within the preload range\n\t\t\tif( shouldPreload && !page.loaded ) {\n\t\t\t\tpage.loaded = true;\n\t\t\t\tthis.Reveal.slideContent.load( page.slideElement );\n\t\t\t}\n\t\t\telse if( page.loaded ) {\n\t\t\t\tpage.loaded = false;\n\t\t\t\tthis.Reveal.slideContent.unload( page.slideElement );\n\t\t\t}\n\n\t\t\t// If we're within this trigger range, activate it\n\t\t\tif( scrollProgress >= trigger.range[0] && scrollProgress <= trigger.range[1] ) {\n\t\t\t\tthis.activateTrigger( trigger );\n\t\t\t\tactivePage = trigger.page;\n\t\t\t}\n\t\t\t// .. otherwise deactivate\n\t\t\telse if( trigger.active ) {\n\t\t\t\tthis.deactivateTrigger( trigger );\n\t\t\t}\n\t\t} );\n\n\t\t// Each page can have its own scroll triggers, check if any of those\n\t\t// need to be activated/deactivated\n\t\tif( activePage ) {\n\t\t\tactivePage.scrollTriggers.forEach( ( trigger ) => {\n\t\t\t\tif( scrollProgressMid >= trigger.range[0] && scrollProgressMid <= trigger.range[1] ) {\n\t\t\t\t\tthis.activateTrigger( trigger );\n\t\t\t\t}\n\t\t\t\telse if( trigger.active ) {\n\t\t\t\t\tthis.deactivateTrigger( trigger );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Update our visual progress indication\n\t\tthis.setProgressBarValue( scrollTop / ( this.viewportElement.scrollHeight - viewportHeight ) );\n\n\t}\n\n\t/**\n\t * Moves the progress bar playhead to the specified position.\n\t *\n\t * @param {number} progress 0-1\n\t */\n\tsetProgressBarValue( progress ) {\n\n\t\tif( this.progressBar ) {\n\n\t\t\tthis.progressBarPlayhead.style.transform = `translateY(${progress * this.progressBarScrollableHeight}px)`;\n\n\t\t\tthis.getAllPages()\n\t\t\t\t.filter( page => page.progressBarSlide )\n\t\t\t\t.forEach( ( page ) => {\n\t\t\t\t\tpage.progressBarSlide.classList.toggle( 'active', page.active === true );\n\n\t\t\t\t\tpage.scrollTriggers.forEach( ( trigger, i ) => {\n\t\t\t\t\t\tpage.scrollTriggerElements[i].classList.toggle( 'active', page.active === true && trigger.active === true );\n\t\t\t\t\t} );\n\t\t\t\t} );\n\n\t\t\tthis.showProgressBar();\n\n\t\t}\n\n\t}\n\n\t/**\n\t * Show the progress bar and, if configured, automatically hide\n\t * it after a delay.\n\t */\n\tshowProgressBar() {\n\n\t\tthis.progressBar.classList.add( 'visible' );\n\n\t\tclearTimeout( this.hideProgressBarTimeout );\n\n\t\tif( this.Reveal.getConfig().scrollProgress === 'auto' && !this.draggingProgressBar ) {\n\n\t\t\tthis.hideProgressBarTimeout = setTimeout( () => {\n\t\t\t\tif( this.progressBar ) {\n\t\t\t\t\tthis.progressBar.classList.remove( 'visible' );\n\t\t\t\t}\n\t\t\t}, HIDE_SCROLLBAR_TIMEOUT );\n\n\t\t}\n\n\t}\n\n\t/**\n\t * Scrolls the given slide element into view.\n\t *\n\t * @param {HTMLElement} slideElement\n\t */\n\tscrollToSlide( slideElement ) {\n\n\t\t// If the scroll view isn't active yet, queue this action\n\t\tif( !this.active ) {\n\t\t\tthis.activatedCallbacks.push( () => this.scrollToSlide( slideElement ) );\n\t\t}\n\t\telse {\n\t\t\t// Find the trigger for this slide\n\t\t\tconst trigger = this.getScrollTriggerBySlide( slideElement );\n\n\t\t\tif( trigger ) {\n\t\t\t\t// Use the trigger's range to calculate the scroll position\n\t\t\t\tthis.viewportElement.scrollTop = trigger.range[0] * ( this.viewportElement.scrollHeight - this.viewportElement.offsetHeight );\n\t\t\t}\n\t\t}\n\n\t}\n\n\t/**\n\t * Persists the current scroll position to session storage\n\t * so that it can be restored.\n\t */\n\tstoreScrollPosition() {\n\n\t\tclearTimeout( this.storeScrollPositionTimeout );\n\n\t\tthis.storeScrollPositionTimeout = setTimeout( () => {\n\t\t\tsessionStorage.setItem( 'reveal-scroll-top', this.viewportElement.scrollTop );\n\t\t\tsessionStorage.setItem( 'reveal-scroll-origin', location.origin + location.pathname );\n\n\t\t\tthis.storeScrollPositionTimeout = null;\n\t\t}, 50 );\n\n\t}\n\n\t/**\n\t * Restores the scroll position when a deck is reloader.\n\t */\n\trestoreScrollPosition() {\n\n\t\tconst scrollPosition = sessionStorage.getItem( 'reveal-scroll-top' );\n\t\tconst scrollOrigin = sessionStorage.getItem( 'reveal-scroll-origin' );\n\n\t\tif( scrollPosition && scrollOrigin === location.origin + location.pathname ) {\n\t\t\tthis.viewportElement.scrollTop = parseInt( scrollPosition, 10 );\n\t\t}\n\n\t}\n\n\t/**\n\t * Activates the given page and starts its embedded conten\n\t * if there is any.\n\t *\n\t * @param {object} page\n\t */\n\tactivatePage( page ) {\n\n\t\tif( !page.active ) {\n\n\t\t\tpage.active = true;\n\n\t\t\tconst { slideElement, backgroundElement, contentElement, indexh, indexv } = page;\n\n\t\t\tcontentElement.style.display = 'block';\n\n\t\t\tslideElement.classList.add( 'present' );\n\n\t\t\tif( backgroundElement ) {\n\t\t\t\tbackgroundElement.classList.add( 'present' );\n\t\t\t}\n\n\t\t\tthis.Reveal.setCurrentScrollPage( slideElement, indexh, indexv );\n\t\t\tthis.Reveal.backgrounds.bubbleSlideContrastClassToElement( slideElement, this.viewportElement );\n\n\t\t\t// If this page is part of an auto-animation there will be one\n\t\t\t// content element per auto-animated page. We need to show the\n\t\t\t// current page and hide all others.\n\t\t\tArray.from( contentElement.parentNode.querySelectorAll( '.scroll-page-content' ) ).forEach( sibling => {\n\t\t\t\tif( sibling !== contentElement ) {\n\t\t\t\t\tsibling.style.display = 'none';\n\t\t\t\t}\n\t\t\t});\n\n\t\t}\n\n\t}\n\n\t/**\n\t * Deactivates the page after it has been visible.\n\t *\n\t * @param {object} page\n\t */\n\tdeactivatePage( page ) {\n\n\t\tif( page.active ) {\n\n\t\t\tpage.active = false;\n\t\t\tpage.slideElement.classList.remove( 'present' );\n\t\t\tpage.backgroundElement.classList.remove( 'present' );\n\n\t\t}\n\n\t}\n\n\tactivateTrigger( trigger ) {\n\n\t\tif( !trigger.active ) {\n\t\t\ttrigger.active = true;\n\t\t\ttrigger.activate();\n\t\t}\n\n\t}\n\n\tdeactivateTrigger( trigger ) {\n\n\t\tif( trigger.active ) {\n\t\t\ttrigger.active = false;\n\n\t\t\tif( trigger.deactivate ) {\n\t\t\t\ttrigger.deactivate();\n\t\t\t}\n\t\t}\n\n\t}\n\n\t/**\n\t * Retrieve a slide by its original h/v index (i.e. the indices the\n\t * slide had before being linearized).\n\t *\n\t * @param {number} h\n\t * @param {number} v\n\t * @returns {HTMLElement}\n\t */\n\tgetSlideByIndices( h, v ) {\n\n\t\tconst page = this.getAllPages().find( page => {\n\t\t\treturn page.indexh === h && page.indexv === v;\n\t\t} );\n\n\t\treturn page ? page.slideElement : null;\n\n\t}\n\n\t/**\n\t * Retrieve a list of all scroll triggers for the given slide\n\t * DOM element.\n\t *\n\t * @param {HTMLElement} slide\n\t * @returns {Array}\n\t */\n\tgetScrollTriggerBySlide( slide ) {\n\n\t\treturn this.slideTriggers.find( trigger => trigger.page.slideElement === slide );\n\n\t}\n\n\t/**\n\t * Get a list of all pages in the scroll view. This includes\n\t * both top-level slides and auto-animate steps.\n\t *\n\t * @returns {Array}\n\t */\n\tgetAllPages() {\n\n\t\treturn this.pages.flatMap( page => [page, ...(page.autoAnimatePages || [])] );\n\n\t}\n\n\tonScroll() {\n\n\t\tthis.syncScrollPosition();\n\t\tthis.storeScrollPosition();\n\n\t}\n\n\tget viewportElement() {\n\n\t\treturn this.Reveal.getViewportElement();\n\n\t}\n\n}\n","import { SLIDES_SELECTOR } from '../utils/constants.js'\nimport { queryAll, createStyleSheet } from '../utils/util.js'\n\n/**\n * Setups up our presentation for printing/exporting to PDF.\n */\nexport default class PrintView {\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t}\n\n\t/**\n\t * Configures the presentation for printing to a static\n\t * PDF.\n\t */\n\tasync activate() {\n\n\t\tconst config = this.Reveal.getConfig();\n\t\tconst slides = queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR )\n\n\t\t// Compute slide numbers now, before we start duplicating slides\n\t\tconst injectPageNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );\n\n\t\tconst slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );\n\n\t\t// Dimensions of the PDF pages\n\t\tconst pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ),\n\t\t\tpageHeight = Math.floor( slideSize.height * ( 1 + config.margin ) );\n\n\t\t// Dimensions of slides within the pages\n\t\tconst slideWidth = slideSize.width,\n\t\t\tslideHeight = slideSize.height;\n\n\t\tawait new Promise( requestAnimationFrame );\n\n\t\t// Let the browser know what page size we want to print\n\t\tcreateStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0px;}' );\n\n\t\t// Limit the size of certain elements to the dimensions of the slide\n\t\tcreateStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' );\n\n\t\tdocument.documentElement.classList.add( 'reveal-print', 'print-pdf' );\n\t\tdocument.body.style.width = pageWidth + 'px';\n\t\tdocument.body.style.height = pageHeight + 'px';\n\n\t\tconst viewportElement = this.Reveal.getViewportElement();\n\t\tlet presentationBackground;\n\t\tif( viewportElement ) {\n\t\t\tconst viewportStyles = window.getComputedStyle( viewportElement );\n\t\t\tif( viewportStyles && viewportStyles.background ) {\n\t\t\t\tpresentationBackground = viewportStyles.background;\n\t\t\t}\n\t\t}\n\n\t\t// Make sure stretch elements fit on slide\n\t\tawait new Promise( requestAnimationFrame );\n\t\tthis.Reveal.layoutSlideContents( slideWidth, slideHeight );\n\n\t\t// Batch scrollHeight access to prevent layout thrashing\n\t\tawait new Promise( requestAnimationFrame );\n\n\t\tconst slideScrollHeights = slides.map( slide => slide.scrollHeight );\n\n\t\tconst pages = [];\n\t\tconst pageContainer = slides[0].parentNode;\n\t\tlet slideNumber = 1;\n\n\t\t// Slide and slide background layout\n\t\tslides.forEach( function( slide, index ) {\n\n\t\t\t// Vertical stacks are not centred since their section\n\t\t\t// children will be\n\t\t\tif( slide.classList.contains( 'stack' ) === false ) {\n\t\t\t\t// Center the slide inside of the page, giving the slide some margin\n\t\t\t\tlet left = ( pageWidth - slideWidth ) / 2;\n\t\t\t\tlet top = ( pageHeight - slideHeight ) / 2;\n\n\t\t\t\tconst contentHeight = slideScrollHeights[ index ];\n\t\t\t\tlet numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 );\n\n\t\t\t\t// Adhere to configured pages per slide limit\n\t\t\t\tnumberOfPages = Math.min( numberOfPages, config.pdfMaxPagesPerSlide );\n\n\t\t\t\t// Center slides vertically\n\t\t\t\tif( numberOfPages === 1 && config.center || slide.classList.contains( 'center' ) ) {\n\t\t\t\t\ttop = Math.max( ( pageHeight - contentHeight ) / 2, 0 );\n\t\t\t\t}\n\n\t\t\t\t// Wrap the slide in a page element and hide its overflow\n\t\t\t\t// so that no page ever flows onto another\n\t\t\t\tconst page = document.createElement( 'div' );\n\t\t\t\tpages.push( page );\n\n\t\t\t\tpage.className = 'pdf-page';\n\t\t\t\tpage.style.height = ( ( pageHeight + config.pdfPageHeightOffset ) * numberOfPages ) + 'px';\n\n\t\t\t\t// Copy the presentation-wide background to each individual\n\t\t\t\t// page when printing\n\t\t\t\tif( presentationBackground ) {\n\t\t\t\t\tpage.style.background = presentationBackground;\n\t\t\t\t}\n\n\t\t\t\tpage.appendChild( slide );\n\n\t\t\t\t// Position the slide inside of the page\n\t\t\t\tslide.style.left = left + 'px';\n\t\t\t\tslide.style.top = top + 'px';\n\t\t\t\tslide.style.width = slideWidth + 'px';\n\n\t\t\t\tthis.Reveal.slideContent.layout( slide );\n\n\t\t\t\tif( slide.slideBackgroundElement ) {\n\t\t\t\t\tpage.insertBefore( slide.slideBackgroundElement, slide );\n\t\t\t\t}\n\n\t\t\t\t// Inject notes if `showNotes` is enabled\n\t\t\t\tif( config.showNotes ) {\n\n\t\t\t\t\t// Are there notes for this slide?\n\t\t\t\t\tconst notes = this.Reveal.getSlideNotes( slide );\n\t\t\t\t\tif( notes ) {\n\n\t\t\t\t\t\tconst notesSpacing = 8;\n\t\t\t\t\t\tconst notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline';\n\t\t\t\t\t\tconst notesElement = document.createElement( 'div' );\n\t\t\t\t\t\tnotesElement.classList.add( 'speaker-notes' );\n\t\t\t\t\t\tnotesElement.classList.add( 'speaker-notes-pdf' );\n\t\t\t\t\t\tnotesElement.setAttribute( 'data-layout', notesLayout );\n\t\t\t\t\t\tnotesElement.innerHTML = notes;\n\n\t\t\t\t\t\tif( notesLayout === 'separate-page' ) {\n\t\t\t\t\t\t\tpages.push( notesElement );\n\t\t\t\t\t\t}\n\t\t\t\t\t\telse {\n\t\t\t\t\t\t\tnotesElement.style.left = notesSpacing + 'px';\n\t\t\t\t\t\t\tnotesElement.style.bottom = notesSpacing + 'px';\n\t\t\t\t\t\t\tnotesElement.style.width = ( pageWidth - notesSpacing*2 ) + 'px';\n\t\t\t\t\t\t\tpage.appendChild( notesElement );\n\t\t\t\t\t\t}\n\n\t\t\t\t\t}\n\n\t\t\t\t}\n\n\t\t\t\t// Inject page numbers if `slideNumbers` are enabled\n\t\t\t\tif( injectPageNumbers ) {\n\t\t\t\t\tconst numberElement = document.createElement( 'div' );\n\t\t\t\t\tnumberElement.classList.add( 'slide-number' );\n\t\t\t\t\tnumberElement.classList.add( 'slide-number-pdf' );\n\t\t\t\t\tnumberElement.innerHTML = slideNumber++;\n\t\t\t\t\tpage.appendChild( numberElement );\n\t\t\t\t}\n\n\t\t\t\t// Copy page and show fragments one after another\n\t\t\t\tif( config.pdfSeparateFragments ) {\n\n\t\t\t\t\t// Each fragment 'group' is an array containing one or more\n\t\t\t\t\t// fragments. Multiple fragments that appear at the same time\n\t\t\t\t\t// are part of the same group.\n\t\t\t\t\tconst fragmentGroups = this.Reveal.fragments.sort( page.querySelectorAll( '.fragment' ), true );\n\n\t\t\t\t\tlet previousFragmentStep;\n\n\t\t\t\t\tfragmentGroups.forEach( function( fragments, index ) {\n\n\t\t\t\t\t\t// Remove 'current-fragment' from the previous group\n\t\t\t\t\t\tif( previousFragmentStep ) {\n\t\t\t\t\t\t\tpreviousFragmentStep.forEach( function( fragment ) {\n\t\t\t\t\t\t\t\tfragment.classList.remove( 'current-fragment' );\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Show the fragments for the current index\n\t\t\t\t\t\tfragments.forEach( function( fragment ) {\n\t\t\t\t\t\t\tfragment.classList.add( 'visible', 'current-fragment' );\n\t\t\t\t\t\t}, this );\n\n\t\t\t\t\t\t// Create a separate page for the current fragment state\n\t\t\t\t\t\tconst clonedPage = page.cloneNode( true );\n\n\t\t\t\t\t\t// Inject unique page numbers for fragments\n\t\t\t\t\t\tif( injectPageNumbers ) {\n\t\t\t\t\t\t\tconst numberElement = clonedPage.querySelector( '.slide-number-pdf' );\n\t\t\t\t\t\t\tconst fragmentNumber = index + 1;\n\t\t\t\t\t\t\tnumberElement.innerHTML += '.' + fragmentNumber;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tpages.push( clonedPage );\n\n\t\t\t\t\t\tpreviousFragmentStep = fragments;\n\n\t\t\t\t\t}, this );\n\n\t\t\t\t\t// Reset the first/original page so that all fragments are hidden\n\t\t\t\t\tfragmentGroups.forEach( function( fragments ) {\n\t\t\t\t\t\tfragments.forEach( function( fragment ) {\n\t\t\t\t\t\t\tfragment.classList.remove( 'visible', 'current-fragment' );\n\t\t\t\t\t\t} );\n\t\t\t\t\t} );\n\n\t\t\t\t}\n\t\t\t\t// Show all fragments\n\t\t\t\telse {\n\t\t\t\t\tqueryAll( page, '.fragment:not(.fade-out)' ).forEach( function( fragment ) {\n\t\t\t\t\t\tfragment.classList.add( 'visible' );\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t}, this );\n\n\t\tawait new Promise( requestAnimationFrame );\n\n\t\tpages.forEach( page => pageContainer.appendChild( page ) );\n\n\t\t// Re-run JS-based content layout after the slide is added to page DOM\n\t\tthis.Reveal.slideContent.layout( this.Reveal.getSlidesElement() );\n\n\t\t// Notify subscribers that the PDF layout is good to go\n\t\tthis.Reveal.dispatchEvent({ type: 'pdf-ready' });\n\n\t}\n\n\t/**\n\t * Checks if the print mode is/should be activated.\n\t */\n\tisActive() {\n\n\t\treturn this.Reveal.getConfig().view === 'print';\n\n\t}\n\n}","import { extend, queryAll } from '../utils/util.js'\n\n/**\n * Handles sorting and navigation of slide fragments.\n * Fragments are elements within a slide that are\n * revealed/animated incrementally.\n */\nexport default class Fragments {\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t}\n\n\t/**\n\t * Called when the reveal.js config is updated.\n\t */\n\tconfigure( config, oldConfig ) {\n\n\t\tif( config.fragments === false ) {\n\t\t\tthis.disable();\n\t\t}\n\t\telse if( oldConfig.fragments === false ) {\n\t\t\tthis.enable();\n\t\t}\n\n\t}\n\n\t/**\n\t * If fragments are disabled in the deck, they should all be\n\t * visible rather than stepped through.\n\t */\n\tdisable() {\n\n\t\tqueryAll( this.Reveal.getSlidesElement(), '.fragment' ).forEach( element => {\n\t\t\telement.classList.add( 'visible' );\n\t\t\telement.classList.remove( 'current-fragment' );\n\t\t} );\n\n\t}\n\n\t/**\n\t * Reverse of #disable(). Only called if fragments have\n\t * previously been disabled.\n\t */\n\tenable() {\n\n\t\tqueryAll( this.Reveal.getSlidesElement(), '.fragment' ).forEach( element => {\n\t\t\telement.classList.remove( 'visible' );\n\t\t\telement.classList.remove( 'current-fragment' );\n\t\t} );\n\n\t}\n\n\t/**\n\t * Returns an object describing the available fragment\n\t * directions.\n\t *\n\t * @return {{prev: boolean, next: boolean}}\n\t */\n\tavailableRoutes() {\n\n\t\tlet currentSlide = this.Reveal.getCurrentSlide();\n\t\tif( currentSlide && this.Reveal.getConfig().fragments ) {\n\t\t\tlet fragments = currentSlide.querySelectorAll( '.fragment:not(.disabled)' );\n\t\t\tlet hiddenFragments = currentSlide.querySelectorAll( '.fragment:not(.disabled):not(.visible)' );\n\n\t\t\treturn {\n\t\t\t\tprev: fragments.length - hiddenFragments.length > 0,\n\t\t\t\tnext: !!hiddenFragments.length\n\t\t\t};\n\t\t}\n\t\telse {\n\t\t\treturn { prev: false, next: false };\n\t\t}\n\n\t}\n\n\t/**\n\t * Return a sorted fragments list, ordered by an increasing\n\t * \"data-fragment-index\" attribute.\n\t *\n\t * Fragments will be revealed in the order that they are returned by\n\t * this function, so you can use the index attributes to control the\n\t * order of fragment appearance.\n\t *\n\t * To maintain a sensible default fragment order, fragments are presumed\n\t * to be passed in document order. This function adds a \"fragment-index\"\n\t * attribute to each node if such an attribute is not already present,\n\t * and sets that attribute to an integer value which is the position of\n\t * the fragment within the fragments list.\n\t *\n\t * @param {object[]|*} fragments\n\t * @param {boolean} grouped If true the returned array will contain\n\t * nested arrays for all fragments with the same index\n\t * @return {object[]} sorted Sorted array of fragments\n\t */\n\tsort( fragments, grouped = false ) {\n\n\t\tfragments = Array.from( fragments );\n\n\t\tlet ordered = [],\n\t\t\tunordered = [],\n\t\t\tsorted = [];\n\n\t\t// Group ordered and unordered elements\n\t\tfragments.forEach( fragment => {\n\t\t\tif( fragment.hasAttribute( 'data-fragment-index' ) ) {\n\t\t\t\tlet index = parseInt( fragment.getAttribute( 'data-fragment-index' ), 10 );\n\n\t\t\t\tif( !ordered[index] ) {\n\t\t\t\t\tordered[index] = [];\n\t\t\t\t}\n\n\t\t\t\tordered[index].push( fragment );\n\t\t\t}\n\t\t\telse {\n\t\t\t\tunordered.push( [ fragment ] );\n\t\t\t}\n\t\t} );\n\n\t\t// Append fragments without explicit indices in their\n\t\t// DOM order\n\t\tordered = ordered.concat( unordered );\n\n\t\t// Manually count the index up per group to ensure there\n\t\t// are no gaps\n\t\tlet index = 0;\n\n\t\t// Push all fragments in their sorted order to an array,\n\t\t// this flattens the groups\n\t\tordered.forEach( group => {\n\t\t\tgroup.forEach( fragment => {\n\t\t\t\tsorted.push( fragment );\n\t\t\t\tfragment.setAttribute( 'data-fragment-index', index );\n\t\t\t} );\n\n\t\t\tindex ++;\n\t\t} );\n\n\t\treturn grouped === true ? ordered : sorted;\n\n\t}\n\n\t/**\n\t * Sorts and formats all of fragments in the\n\t * presentation.\n\t */\n\tsortAll() {\n\n\t\tthis.Reveal.getHorizontalSlides().forEach( horizontalSlide => {\n\n\t\t\tlet verticalSlides = queryAll( horizontalSlide, 'section' );\n\t\t\tverticalSlides.forEach( ( verticalSlide, y ) => {\n\n\t\t\t\tthis.sort( verticalSlide.querySelectorAll( '.fragment' ) );\n\n\t\t\t}, this );\n\n\t\t\tif( verticalSlides.length === 0 ) this.sort( horizontalSlide.querySelectorAll( '.fragment' ) );\n\n\t\t} );\n\n\t}\n\n\t/**\n\t * Refreshes the fragments on the current slide so that they\n\t * have the appropriate classes (.visible + .current-fragment).\n\t *\n\t * @param {number} [index] The index of the current fragment\n\t * @param {array} [fragments] Array containing all fragments\n\t * in the current slide\n\t *\n\t * @return {{shown: array, hidden: array}}\n\t */\n\tupdate( index, fragments, slide = this.Reveal.getCurrentSlide() ) {\n\n\t\tlet changedFragments = {\n\t\t\tshown: [],\n\t\t\thidden: []\n\t\t};\n\n\t\tif( slide && this.Reveal.getConfig().fragments ) {\n\n\t\t\tfragments = fragments || this.sort( slide.querySelectorAll( '.fragment' ) );\n\n\t\t\tif( fragments.length ) {\n\n\t\t\t\tlet maxIndex = 0;\n\n\t\t\t\tif( typeof index !== 'number' ) {\n\t\t\t\t\tlet currentFragment = this.sort( slide.querySelectorAll( '.fragment.visible' ) ).pop();\n\t\t\t\t\tif( currentFragment ) {\n\t\t\t\t\t\tindex = parseInt( currentFragment.getAttribute( 'data-fragment-index' ) || 0, 10 );\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tArray.from( fragments ).forEach( ( el, i ) => {\n\n\t\t\t\t\tif( el.hasAttribute( 'data-fragment-index' ) ) {\n\t\t\t\t\t\ti = parseInt( el.getAttribute( 'data-fragment-index' ), 10 );\n\t\t\t\t\t}\n\n\t\t\t\t\tmaxIndex = Math.max( maxIndex, i );\n\n\t\t\t\t\t// Visible fragments\n\t\t\t\t\tif( i <= index ) {\n\t\t\t\t\t\tlet wasVisible = el.classList.contains( 'visible' )\n\t\t\t\t\t\tel.classList.add( 'visible' );\n\t\t\t\t\t\tel.classList.remove( 'current-fragment' );\n\n\t\t\t\t\t\tif( i === index ) {\n\t\t\t\t\t\t\t// Announce the fragments one by one to the Screen Reader\n\t\t\t\t\t\t\tthis.Reveal.announceStatus( this.Reveal.getStatusText( el ) );\n\n\t\t\t\t\t\t\tel.classList.add( 'current-fragment' );\n\t\t\t\t\t\t\tthis.Reveal.slideContent.startEmbeddedContent( el );\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif( !wasVisible ) {\n\t\t\t\t\t\t\tchangedFragments.shown.push( el )\n\t\t\t\t\t\t\tthis.Reveal.dispatchEvent({\n\t\t\t\t\t\t\t\ttarget: el,\n\t\t\t\t\t\t\t\ttype: 'visible',\n\t\t\t\t\t\t\t\tbubbles: false\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// Hidden fragments\n\t\t\t\t\telse {\n\t\t\t\t\t\tlet wasVisible = el.classList.contains( 'visible' )\n\t\t\t\t\t\tel.classList.remove( 'visible' );\n\t\t\t\t\t\tel.classList.remove( 'current-fragment' );\n\n\t\t\t\t\t\tif( wasVisible ) {\n\t\t\t\t\t\t\tthis.Reveal.slideContent.stopEmbeddedContent( el );\n\t\t\t\t\t\t\tchangedFragments.hidden.push( el );\n\t\t\t\t\t\t\tthis.Reveal.dispatchEvent({\n\t\t\t\t\t\t\t\ttarget: el,\n\t\t\t\t\t\t\t\ttype: 'hidden',\n\t\t\t\t\t\t\t\tbubbles: false\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t} );\n\n\t\t\t\t// Write the current fragment index to the slide
.\n\t\t\t\t// This can be used by end users to apply styles based on\n\t\t\t\t// the current fragment index.\n\t\t\t\tindex = typeof index === 'number' ? index : -1;\n\t\t\t\tindex = Math.max( Math.min( index, maxIndex ), -1 );\n\t\t\t\tslide.setAttribute( 'data-fragment', index );\n\n\t\t\t}\n\n\t\t}\n\n\t\treturn changedFragments;\n\n\t}\n\n\t/**\n\t * Formats the fragments on the given slide so that they have\n\t * valid indices. Call this if fragments are changed in the DOM\n\t * after reveal.js has already initialized.\n\t *\n\t * @param {HTMLElement} slide\n\t * @return {Array} a list of the HTML fragments that were synced\n\t */\n\tsync( slide = this.Reveal.getCurrentSlide() ) {\n\n\t\treturn this.sort( slide.querySelectorAll( '.fragment' ) );\n\n\t}\n\n\t/**\n\t * Navigate to the specified slide fragment.\n\t *\n\t * @param {?number} index The index of the fragment that\n\t * should be shown, -1 means all are invisible\n\t * @param {number} offset Integer offset to apply to the\n\t * fragment index\n\t *\n\t * @return {boolean} true if a change was made in any\n\t * fragments visibility as part of this call\n\t */\n\tgoto( index, offset = 0 ) {\n\n\t\tlet currentSlide = this.Reveal.getCurrentSlide();\n\t\tif( currentSlide && this.Reveal.getConfig().fragments ) {\n\n\t\t\tlet fragments = this.sort( currentSlide.querySelectorAll( '.fragment:not(.disabled)' ) );\n\t\t\tif( fragments.length ) {\n\n\t\t\t\t// If no index is specified, find the current\n\t\t\t\tif( typeof index !== 'number' ) {\n\t\t\t\t\tlet lastVisibleFragment = this.sort( currentSlide.querySelectorAll( '.fragment:not(.disabled).visible' ) ).pop();\n\n\t\t\t\t\tif( lastVisibleFragment ) {\n\t\t\t\t\t\tindex = parseInt( lastVisibleFragment.getAttribute( 'data-fragment-index' ) || 0, 10 );\n\t\t\t\t\t}\n\t\t\t\t\telse {\n\t\t\t\t\t\tindex = -1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Apply the offset if there is one\n\t\t\t\tindex += offset;\n\n\t\t\t\tlet changedFragments = this.update( index, fragments );\n\n\t\t\t\tif( changedFragments.hidden.length ) {\n\t\t\t\t\tthis.Reveal.dispatchEvent({\n\t\t\t\t\t\ttype: 'fragmenthidden',\n\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\tfragment: changedFragments.hidden[0],\n\t\t\t\t\t\t\tfragments: changedFragments.hidden\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\tif( changedFragments.shown.length ) {\n\t\t\t\t\tthis.Reveal.dispatchEvent({\n\t\t\t\t\t\ttype: 'fragmentshown',\n\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\tfragment: changedFragments.shown[0],\n\t\t\t\t\t\t\tfragments: changedFragments.shown\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\tthis.Reveal.controls.update();\n\t\t\t\tthis.Reveal.progress.update();\n\n\t\t\t\tif( this.Reveal.getConfig().fragmentInURL ) {\n\t\t\t\t\tthis.Reveal.location.writeURL();\n\t\t\t\t}\n\n\t\t\t\treturn !!( changedFragments.shown.length || changedFragments.hidden.length );\n\n\t\t\t}\n\n\t\t}\n\n\t\treturn false;\n\n\t}\n\n\t/**\n\t * Navigate to the next slide fragment.\n\t *\n\t * @return {boolean} true if there was a next fragment,\n\t * false otherwise\n\t */\n\tnext() {\n\n\t\treturn this.goto( null, 1 );\n\n\t}\n\n\t/**\n\t * Navigate to the previous slide fragment.\n\t *\n\t * @return {boolean} true if there was a previous fragment,\n\t * false otherwise\n\t */\n\tprev() {\n\n\t\treturn this.goto( null, -1 );\n\n\t}\n\n}","import { SLIDES_SELECTOR } from '../utils/constants.js'\nimport { extend, queryAll, transformElement } from '../utils/util.js'\n\n/**\n * Handles all logic related to the overview mode\n * (birds-eye view of all slides).\n */\nexport default class Overview {\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t\tthis.active = false;\n\n\t\tthis.onSlideClicked = this.onSlideClicked.bind( this );\n\n\t}\n\n\t/**\n\t * Displays the overview of slides (quick nav) by scaling\n\t * down and arranging all slide elements.\n\t */\n\tactivate() {\n\n\t\t// Only proceed if enabled in config\n\t\tif( this.Reveal.getConfig().overview && !this.Reveal.isScrollView() && !this.isActive() ) {\n\n\t\t\tthis.active = true;\n\n\t\t\tthis.Reveal.getRevealElement().classList.add( 'overview' );\n\n\t\t\t// Don't auto-slide while in overview mode\n\t\t\tthis.Reveal.cancelAutoSlide();\n\n\t\t\t// Move the backgrounds element into the slide container to\n\t\t\t// that the same scaling is applied\n\t\t\tthis.Reveal.getSlidesElement().appendChild( this.Reveal.getBackgroundsElement() );\n\n\t\t\t// Clicking on an overview slide navigates to it\n\t\t\tqueryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR ).forEach( slide => {\n\t\t\t\tif( !slide.classList.contains( 'stack' ) ) {\n\t\t\t\t\tslide.addEventListener( 'click', this.onSlideClicked, true );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\t// Calculate slide sizes\n\t\t\tconst margin = 70;\n\t\t\tconst slideSize = this.Reveal.getComputedSlideSize();\n\t\t\tthis.overviewSlideWidth = slideSize.width + margin;\n\t\t\tthis.overviewSlideHeight = slideSize.height + margin;\n\n\t\t\t// Reverse in RTL mode\n\t\t\tif( this.Reveal.getConfig().rtl ) {\n\t\t\t\tthis.overviewSlideWidth = -this.overviewSlideWidth;\n\t\t\t}\n\n\t\t\tthis.Reveal.updateSlidesVisibility();\n\n\t\t\tthis.layout();\n\t\t\tthis.update();\n\n\t\t\tthis.Reveal.layout();\n\n\t\t\tconst indices = this.Reveal.getIndices();\n\n\t\t\t// Notify observers of the overview showing\n\t\t\tthis.Reveal.dispatchEvent({\n\t\t\t\ttype: 'overviewshown',\n\t\t\t\tdata: {\n\t\t\t\t\t'indexh': indices.h,\n\t\t\t\t\t'indexv': indices.v,\n\t\t\t\t\t'currentSlide': this.Reveal.getCurrentSlide()\n\t\t\t\t}\n\t\t\t});\n\n\t\t}\n\n\t}\n\n\t/**\n\t * Uses CSS transforms to position all slides in a grid for\n\t * display inside of the overview mode.\n\t */\n\tlayout() {\n\n\t\t// Layout slides\n\t\tthis.Reveal.getHorizontalSlides().forEach( ( hslide, h ) => {\n\t\t\thslide.setAttribute( 'data-index-h', h );\n\t\t\ttransformElement( hslide, 'translate3d(' + ( h * this.overviewSlideWidth ) + 'px, 0, 0)' );\n\n\t\t\tif( hslide.classList.contains( 'stack' ) ) {\n\n\t\t\t\tqueryAll( hslide, 'section' ).forEach( ( vslide, v ) => {\n\t\t\t\t\tvslide.setAttribute( 'data-index-h', h );\n\t\t\t\t\tvslide.setAttribute( 'data-index-v', v );\n\n\t\t\t\t\ttransformElement( vslide, 'translate3d(0, ' + ( v * this.overviewSlideHeight ) + 'px, 0)' );\n\t\t\t\t} );\n\n\t\t\t}\n\t\t} );\n\n\t\t// Layout slide backgrounds\n\t\tArray.from( this.Reveal.getBackgroundsElement().childNodes ).forEach( ( hbackground, h ) => {\n\t\t\ttransformElement( hbackground, 'translate3d(' + ( h * this.overviewSlideWidth ) + 'px, 0, 0)' );\n\n\t\t\tqueryAll( hbackground, '.slide-background' ).forEach( ( vbackground, v ) => {\n\t\t\t\ttransformElement( vbackground, 'translate3d(0, ' + ( v * this.overviewSlideHeight ) + 'px, 0)' );\n\t\t\t} );\n\t\t} );\n\n\t}\n\n\t/**\n\t * Moves the overview viewport to the current slides.\n\t * Called each time the current slide changes.\n\t */\n\tupdate() {\n\n\t\tconst vmin = Math.min( window.innerWidth, window.innerHeight );\n\t\tconst scale = Math.max( vmin / 5, 150 ) / vmin;\n\t\tconst indices = this.Reveal.getIndices();\n\n\t\tthis.Reveal.transformSlides( {\n\t\t\toverview: [\n\t\t\t\t'scale('+ scale +')',\n\t\t\t\t'translateX('+ ( -indices.h * this.overviewSlideWidth ) +'px)',\n\t\t\t\t'translateY('+ ( -indices.v * this.overviewSlideHeight ) +'px)'\n\t\t\t].join( ' ' )\n\t\t} );\n\n\t}\n\n\t/**\n\t * Exits the slide overview and enters the currently\n\t * active slide.\n\t */\n\tdeactivate() {\n\n\t\t// Only proceed if enabled in config\n\t\tif( this.Reveal.getConfig().overview ) {\n\n\t\t\tthis.active = false;\n\n\t\t\tthis.Reveal.getRevealElement().classList.remove( 'overview' );\n\n\t\t\t// Temporarily add a class so that transitions can do different things\n\t\t\t// depending on whether they are exiting/entering overview, or just\n\t\t\t// moving from slide to slide\n\t\t\tthis.Reveal.getRevealElement().classList.add( 'overview-deactivating' );\n\n\t\t\tsetTimeout( () => {\n\t\t\t\tthis.Reveal.getRevealElement().classList.remove( 'overview-deactivating' );\n\t\t\t}, 1 );\n\n\t\t\t// Move the background element back out\n\t\t\tthis.Reveal.getRevealElement().appendChild( this.Reveal.getBackgroundsElement() );\n\n\t\t\t// Clean up changes made to slides\n\t\t\tqueryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR ).forEach( slide => {\n\t\t\t\ttransformElement( slide, '' );\n\n\t\t\t\tslide.removeEventListener( 'click', this.onSlideClicked, true );\n\t\t\t} );\n\n\t\t\t// Clean up changes made to backgrounds\n\t\t\tqueryAll( this.Reveal.getBackgroundsElement(), '.slide-background' ).forEach( background => {\n\t\t\t\ttransformElement( background, '' );\n\t\t\t} );\n\n\t\t\tthis.Reveal.transformSlides( { overview: '' } );\n\n\t\t\tconst indices = this.Reveal.getIndices();\n\n\t\t\tthis.Reveal.slide( indices.h, indices.v );\n\t\t\tthis.Reveal.layout();\n\t\t\tthis.Reveal.cueAutoSlide();\n\n\t\t\t// Notify observers of the overview hiding\n\t\t\tthis.Reveal.dispatchEvent({\n\t\t\t\ttype: 'overviewhidden',\n\t\t\t\tdata: {\n\t\t\t\t\t'indexh': indices.h,\n\t\t\t\t\t'indexv': indices.v,\n\t\t\t\t\t'currentSlide': this.Reveal.getCurrentSlide()\n\t\t\t\t}\n\t\t\t});\n\n\t\t}\n\t}\n\n\t/**\n\t * Toggles the slide overview mode on and off.\n\t *\n\t * @param {Boolean} [override] Flag which overrides the\n\t * toggle logic and forcibly sets the desired state. True means\n\t * overview is open, false means it's closed.\n\t */\n\ttoggle( override ) {\n\n\t\tif( typeof override === 'boolean' ) {\n\t\t\toverride ? this.activate() : this.deactivate();\n\t\t}\n\t\telse {\n\t\t\tthis.isActive() ? this.deactivate() : this.activate();\n\t\t}\n\n\t}\n\n\t/**\n\t * Checks if the overview is currently active.\n\t *\n\t * @return {Boolean} true if the overview is active,\n\t * false otherwise\n\t */\n\tisActive() {\n\n\t\treturn this.active;\n\n\t}\n\n\t/**\n\t * Invoked when a slide is and we're in the overview.\n\t *\n\t * @param {object} event\n\t */\n\tonSlideClicked( event ) {\n\n\t\tif( this.isActive() ) {\n\t\t\tevent.preventDefault();\n\n\t\t\tlet element = event.target;\n\n\t\t\twhile( element && !element.nodeName.match( /section/gi ) ) {\n\t\t\t\telement = element.parentNode;\n\t\t\t}\n\n\t\t\tif( element && !element.classList.contains( 'disabled' ) ) {\n\n\t\t\t\tthis.deactivate();\n\n\t\t\t\tif( element.nodeName.match( /section/gi ) ) {\n\t\t\t\t\tlet h = parseInt( element.getAttribute( 'data-index-h' ), 10 ),\n\t\t\t\t\t\tv = parseInt( element.getAttribute( 'data-index-v' ), 10 );\n\n\t\t\t\t\tthis.Reveal.slide( h, v );\n\t\t\t\t}\n\n\t\t\t}\n\t\t}\n\n\t}\n\n}","import { enterFullscreen } from '../utils/util.js'\n\n/**\n * Handles all reveal.js keyboard interactions.\n */\nexport default class Keyboard {\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t\t// A key:value map of keyboard keys and descriptions of\n\t\t// the actions they trigger\n\t\tthis.shortcuts = {};\n\n\t\t// Holds custom key code mappings\n\t\tthis.bindings = {};\n\n\t\tthis.onDocumentKeyDown = this.onDocumentKeyDown.bind( this );\n\n\t}\n\n\t/**\n\t * Called when the reveal.js config is updated.\n\t */\n\tconfigure( config, oldConfig ) {\n\n\t\tif( config.navigationMode === 'linear' ) {\n\t\t\tthis.shortcuts['→ , ↓ , SPACE , N , L , J'] = 'Next slide';\n\t\t\tthis.shortcuts['← , ↑ , P , H , K'] = 'Previous slide';\n\t\t}\n\t\telse {\n\t\t\tthis.shortcuts['N , SPACE'] = 'Next slide';\n\t\t\tthis.shortcuts['P , Shift SPACE'] = 'Previous slide';\n\t\t\tthis.shortcuts['← , H'] = 'Navigate left';\n\t\t\tthis.shortcuts['→ , L'] = 'Navigate right';\n\t\t\tthis.shortcuts['↑ , K'] = 'Navigate up';\n\t\t\tthis.shortcuts['↓ , J'] = 'Navigate down';\n\t\t}\n\n\t\tthis.shortcuts['Alt + ←/↑/→/↓'] = 'Navigate without fragments';\n\t\tthis.shortcuts['Shift + ←/↑/→/↓'] = 'Jump to first/last slide';\n\t\tthis.shortcuts['B , .'] = 'Pause';\n\t\tthis.shortcuts['F'] = 'Fullscreen';\n\t\tthis.shortcuts['G'] = 'Jump to slide';\n\t\tthis.shortcuts['ESC, O'] = 'Slide overview';\n\n\t}\n\n\t/**\n\t * Starts listening for keyboard events.\n\t */\n\tbind() {\n\n\t\tdocument.addEventListener( 'keydown', this.onDocumentKeyDown, false );\n\n\t}\n\n\t/**\n\t * Stops listening for keyboard events.\n\t */\n\tunbind() {\n\n\t\tdocument.removeEventListener( 'keydown', this.onDocumentKeyDown, false );\n\n\t}\n\n\t/**\n\t * Add a custom key binding with optional description to\n\t * be added to the help screen.\n\t */\n\taddKeyBinding( binding, callback ) {\n\n\t\tif( typeof binding === 'object' && binding.keyCode ) {\n\t\t\tthis.bindings[binding.keyCode] = {\n\t\t\t\tcallback: callback,\n\t\t\t\tkey: binding.key,\n\t\t\t\tdescription: binding.description\n\t\t\t};\n\t\t}\n\t\telse {\n\t\t\tthis.bindings[binding] = {\n\t\t\t\tcallback: callback,\n\t\t\t\tkey: null,\n\t\t\t\tdescription: null\n\t\t\t};\n\t\t}\n\n\t}\n\n\t/**\n\t * Removes the specified custom key binding.\n\t */\n\tremoveKeyBinding( keyCode ) {\n\n\t\tdelete this.bindings[keyCode];\n\n\t}\n\n\t/**\n\t * Programmatically triggers a keyboard event\n\t *\n\t * @param {int} keyCode\n\t */\n\ttriggerKey( keyCode ) {\n\n\t\tthis.onDocumentKeyDown( { keyCode } );\n\n\t}\n\n\t/**\n\t * Registers a new shortcut to include in the help overlay\n\t *\n\t * @param {String} key\n\t * @param {String} value\n\t */\n\tregisterKeyboardShortcut( key, value ) {\n\n\t\tthis.shortcuts[key] = value;\n\n\t}\n\n\tgetShortcuts() {\n\n\t\treturn this.shortcuts;\n\n\t}\n\n\tgetBindings() {\n\n\t\treturn this.bindings;\n\n\t}\n\n\t/**\n\t * Handler for the document level 'keydown' event.\n\t *\n\t * @param {object} event\n\t */\n\tonDocumentKeyDown( event ) {\n\n\t\tlet config = this.Reveal.getConfig();\n\n\t\t// If there's a condition specified and it returns false,\n\t\t// ignore this event\n\t\tif( typeof config.keyboardCondition === 'function' && config.keyboardCondition(event) === false ) {\n\t\t\treturn true;\n\t\t}\n\n\t\t// If keyboardCondition is set, only capture keyboard events\n\t\t// for embedded decks when they are focused\n\t\tif( config.keyboardCondition === 'focused' && !this.Reveal.isFocused() ) {\n\t\t\treturn true;\n\t\t}\n\n\t\t// Shorthand\n\t\tlet keyCode = event.keyCode;\n\n\t\t// Remember if auto-sliding was paused so we can toggle it\n\t\tlet autoSlideWasPaused = !this.Reveal.isAutoSliding();\n\n\t\tthis.Reveal.onUserInput( event );\n\n\t\t// Is there a focused element that could be using the keyboard?\n\t\tlet activeElementIsCE = document.activeElement && document.activeElement.isContentEditable === true;\n\t\tlet activeElementIsInput = document.activeElement && document.activeElement.tagName && /input|textarea/i.test( document.activeElement.tagName );\n\t\tlet activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className);\n\n\t\t// Whitelist certain modifiers for slide navigation shortcuts\n\t\tlet keyCodeUsesModifier = [32, 37, 38, 39, 40, 78, 80, 191].indexOf( event.keyCode ) !== -1;\n\n\t\t// Prevent all other events when a modifier is pressed\n\t\tlet unusedModifier = \t!( keyCodeUsesModifier && event.shiftKey || event.altKey ) &&\n\t\t\t\t\t\t\t\t( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey );\n\n\t\t// Disregard the event if there's a focused element or a\n\t\t// keyboard modifier key is present\n\t\tif( activeElementIsCE || activeElementIsInput || activeElementIsNotes || unusedModifier ) return;\n\n\t\t// While paused only allow resume keyboard events; 'b', 'v', '.'\n\t\tlet resumeKeyCodes = [66,86,190,191];\n\t\tlet key;\n\n\t\t// Custom key bindings for togglePause should be able to resume\n\t\tif( typeof config.keyboard === 'object' ) {\n\t\t\tfor( key in config.keyboard ) {\n\t\t\t\tif( config.keyboard[key] === 'togglePause' ) {\n\t\t\t\t\tresumeKeyCodes.push( parseInt( key, 10 ) );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif( this.Reveal.isPaused() && resumeKeyCodes.indexOf( keyCode ) === -1 ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Use linear navigation if we're configured to OR if\n\t\t// the presentation is one-dimensional\n\t\tlet useLinearMode = config.navigationMode === 'linear' || !this.Reveal.hasHorizontalSlides() || !this.Reveal.hasVerticalSlides();\n\n\t\tlet triggered = false;\n\n\t\t// 1. User defined key bindings\n\t\tif( typeof config.keyboard === 'object' ) {\n\n\t\t\tfor( key in config.keyboard ) {\n\n\t\t\t\t// Check if this binding matches the pressed key\n\t\t\t\tif( parseInt( key, 10 ) === keyCode ) {\n\n\t\t\t\t\tlet value = config.keyboard[ key ];\n\n\t\t\t\t\t// Callback function\n\t\t\t\t\tif( typeof value === 'function' ) {\n\t\t\t\t\t\tvalue.apply( null, [ event ] );\n\t\t\t\t\t}\n\t\t\t\t\t// String shortcuts to reveal.js API\n\t\t\t\t\telse if( typeof value === 'string' && typeof this.Reveal[ value ] === 'function' ) {\n\t\t\t\t\t\tthis.Reveal[ value ].call();\n\t\t\t\t\t}\n\n\t\t\t\t\ttriggered = true;\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t}\n\n\t\t// 2. Registered custom key bindings\n\t\tif( triggered === false ) {\n\n\t\t\tfor( key in this.bindings ) {\n\n\t\t\t\t// Check if this binding matches the pressed key\n\t\t\t\tif( parseInt( key, 10 ) === keyCode ) {\n\n\t\t\t\t\tlet action = this.bindings[ key ].callback;\n\n\t\t\t\t\t// Callback function\n\t\t\t\t\tif( typeof action === 'function' ) {\n\t\t\t\t\t\taction.apply( null, [ event ] );\n\t\t\t\t\t}\n\t\t\t\t\t// String shortcuts to reveal.js API\n\t\t\t\t\telse if( typeof action === 'string' && typeof this.Reveal[ action ] === 'function' ) {\n\t\t\t\t\t\tthis.Reveal[ action ].call();\n\t\t\t\t\t}\n\n\t\t\t\t\ttriggered = true;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// 3. System defined key bindings\n\t\tif( triggered === false ) {\n\n\t\t\t// Assume true and try to prove false\n\t\t\ttriggered = true;\n\n\t\t\t// P, PAGE UP\n\t\t\tif( keyCode === 80 || keyCode === 33 ) {\n\t\t\t\tthis.Reveal.prev({skipFragments: event.altKey});\n\t\t\t}\n\t\t\t// N, PAGE DOWN\n\t\t\telse if( keyCode === 78 || keyCode === 34 ) {\n\t\t\t\tthis.Reveal.next({skipFragments: event.altKey});\n\t\t\t}\n\t\t\t// H, LEFT\n\t\t\telse if( keyCode === 72 || keyCode === 37 ) {\n\t\t\t\tif( event.shiftKey ) {\n\t\t\t\t\tthis.Reveal.slide( 0 );\n\t\t\t\t}\n\t\t\t\telse if( !this.Reveal.overview.isActive() && useLinearMode ) {\n\t\t\t\t\tthis.Reveal.prev({skipFragments: event.altKey});\n\t\t\t\t}\n\t\t\t\telse {\n\t\t\t\t\tthis.Reveal.left({skipFragments: event.altKey});\n\t\t\t\t}\n\t\t\t}\n\t\t\t// L, RIGHT\n\t\t\telse if( keyCode === 76 || keyCode === 39 ) {\n\t\t\t\tif( event.shiftKey ) {\n\t\t\t\t\tthis.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );\n\t\t\t\t}\n\t\t\t\telse if( !this.Reveal.overview.isActive() && useLinearMode ) {\n\t\t\t\t\tthis.Reveal.next({skipFragments: event.altKey});\n\t\t\t\t}\n\t\t\t\telse {\n\t\t\t\t\tthis.Reveal.right({skipFragments: event.altKey});\n\t\t\t\t}\n\t\t\t}\n\t\t\t// K, UP\n\t\t\telse if( keyCode === 75 || keyCode === 38 ) {\n\t\t\t\tif( event.shiftKey ) {\n\t\t\t\t\tthis.Reveal.slide( undefined, 0 );\n\t\t\t\t}\n\t\t\t\telse if( !this.Reveal.overview.isActive() && useLinearMode ) {\n\t\t\t\t\tthis.Reveal.prev({skipFragments: event.altKey});\n\t\t\t\t}\n\t\t\t\telse {\n\t\t\t\t\tthis.Reveal.up({skipFragments: event.altKey});\n\t\t\t\t}\n\t\t\t}\n\t\t\t// J, DOWN\n\t\t\telse if( keyCode === 74 || keyCode === 40 ) {\n\t\t\t\tif( event.shiftKey ) {\n\t\t\t\t\tthis.Reveal.slide( undefined, Number.MAX_VALUE );\n\t\t\t\t}\n\t\t\t\telse if( !this.Reveal.overview.isActive() && useLinearMode ) {\n\t\t\t\t\tthis.Reveal.next({skipFragments: event.altKey});\n\t\t\t\t}\n\t\t\t\telse {\n\t\t\t\t\tthis.Reveal.down({skipFragments: event.altKey});\n\t\t\t\t}\n\t\t\t}\n\t\t\t// HOME\n\t\t\telse if( keyCode === 36 ) {\n\t\t\t\tthis.Reveal.slide( 0 );\n\t\t\t}\n\t\t\t// END\n\t\t\telse if( keyCode === 35 ) {\n\t\t\t\tthis.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );\n\t\t\t}\n\t\t\t// SPACE\n\t\t\telse if( keyCode === 32 ) {\n\t\t\t\tif( this.Reveal.overview.isActive() ) {\n\t\t\t\t\tthis.Reveal.overview.deactivate();\n\t\t\t\t}\n\t\t\t\tif( event.shiftKey ) {\n\t\t\t\t\tthis.Reveal.prev({skipFragments: event.altKey});\n\t\t\t\t}\n\t\t\t\telse {\n\t\t\t\t\tthis.Reveal.next({skipFragments: event.altKey});\n\t\t\t\t}\n\t\t\t}\n\t\t\t// TWO-SPOT, SEMICOLON, B, V, PERIOD, LOGITECH PRESENTER TOOLS \"BLACK SCREEN\" BUTTON\n\t\t\telse if( [58, 59, 66, 86, 190].includes( keyCode ) || ( keyCode === 191 && !event.shiftKey ) ) {\n\t\t\t\tthis.Reveal.togglePause();\n\t\t\t}\n\t\t\t// F\n\t\t\telse if( keyCode === 70 ) {\n\t\t\t\tenterFullscreen( config.embedded ? this.Reveal.getViewportElement() : document.documentElement );\n\t\t\t}\n\t\t\t// A\n\t\t\telse if( keyCode === 65 ) {\n\t\t\t\tif( config.autoSlideStoppable ) {\n\t\t\t\t\tthis.Reveal.toggleAutoSlide( autoSlideWasPaused );\n\t\t\t\t}\n\t\t\t}\n\t\t\t// G\n\t\t\telse if( keyCode === 71 ) {\n\t\t\t\tif( config.jumpToSlide ) {\n\t\t\t\t\tthis.Reveal.toggleJumpToSlide();\n\t\t\t\t}\n\t\t\t}\n\t\t\t// ?\n\t\t\telse if( keyCode === 191 && event.shiftKey ) {\n\t\t\t\tthis.Reveal.toggleHelp();\n\t\t\t}\n\t\t\telse {\n\t\t\t\ttriggered = false;\n\t\t\t}\n\n\t\t}\n\n\t\t// If the input resulted in a triggered action we should prevent\n\t\t// the browsers default behavior\n\t\tif( triggered ) {\n\t\t\tevent.preventDefault && event.preventDefault();\n\t\t}\n\t\t// ESC or O key\n\t\telse if( keyCode === 27 || keyCode === 79 ) {\n\t\t\tif( this.Reveal.closeOverlay() === false ) {\n\t\t\t\tthis.Reveal.overview.toggle();\n\t\t\t}\n\n\t\t\tevent.preventDefault && event.preventDefault();\n\t\t}\n\n\t\t// If auto-sliding is enabled we need to cue up\n\t\t// another timeout\n\t\tthis.Reveal.cueAutoSlide();\n\n\t}\n\n}","/**\n * Reads and writes the URL based on reveal.js' current state.\n */\nexport default class Location {\n\n\t// The minimum number of milliseconds that must pass between\n\t// calls to history.replaceState\n\tMAX_REPLACE_STATE_FREQUENCY = 1000\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t\t// Delays updates to the URL due to a Chrome thumbnailer bug\n\t\tthis.writeURLTimeout = 0;\n\n\t\tthis.replaceStateTimestamp = 0;\n\n\t\tthis.onWindowHashChange = this.onWindowHashChange.bind( this );\n\n\t}\n\n\tbind() {\n\n\t\twindow.addEventListener( 'hashchange', this.onWindowHashChange, false );\n\n\t}\n\n\tunbind() {\n\n\t\twindow.removeEventListener( 'hashchange', this.onWindowHashChange, false );\n\n\t}\n\n\t/**\n\t * Returns the slide indices for the given hash link.\n\t *\n\t * @param {string} [hash] the hash string that we want to\n\t * find the indices for\n\t *\n\t * @returns slide indices or null\n\t */\n\tgetIndicesFromHash( hash=window.location.hash, options={} ) {\n\n\t\t// Attempt to parse the hash as either an index or name\n\t\tlet name = hash.replace( /^#\\/?/, '' );\n\t\tlet bits = name.split( '/' );\n\n\t\t// If the first bit is not fully numeric and there is a name we\n\t\t// can assume that this is a named link\n\t\tif( !/^[0-9]*$/.test( bits[0] ) && name.length ) {\n\t\t\tlet slide;\n\n\t\t\tlet f;\n\n\t\t\t// Parse named links with fragments (#/named-link/2)\n\t\t\tif( /\\/[-\\d]+$/g.test( name ) ) {\n\t\t\t\tf = parseInt( name.split( '/' ).pop(), 10 );\n\t\t\t\tf = isNaN(f) ? undefined : f;\n\t\t\t\tname = name.split( '/' ).shift();\n\t\t\t}\n\n\t\t\t// Ensure the named link is a valid HTML ID attribute\n\t\t\ttry {\n\t\t\t\tslide = document\n\t\t\t\t\t.getElementById( decodeURIComponent( name ) )\n\t\t\t\t\t.closest('.slides section');\n\t\t\t}\n\t\t\tcatch ( error ) { }\n\n\t\t\tif( slide ) {\n\t\t\t\treturn { ...this.Reveal.getIndices( slide ), f };\n\t\t\t}\n\t\t}\n\t\telse {\n\t\t\tconst config = this.Reveal.getConfig();\n\t\t\tlet hashIndexBase = config.hashOneBasedIndex || options.oneBasedIndex ? 1 : 0;\n\n\t\t\t// Read the index components of the hash\n\t\t\tlet h = ( parseInt( bits[0], 10 ) - hashIndexBase ) || 0,\n\t\t\t\tv = ( parseInt( bits[1], 10 ) - hashIndexBase ) || 0,\n\t\t\t\tf;\n\n\t\t\tif( config.fragmentInURL ) {\n\t\t\t\tf = parseInt( bits[2], 10 );\n\t\t\t\tif( isNaN( f ) ) {\n\t\t\t\t\tf = undefined;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn { h, v, f };\n\t\t}\n\n\t\t// The hash couldn't be parsed or no matching named link was found\n\t\treturn null\n\n\t}\n\n\t/**\n\t * Reads the current URL (hash) and navigates accordingly.\n\t */\n\treadURL() {\n\n\t\tconst currentIndices = this.Reveal.getIndices();\n\t\tconst newIndices = this.getIndicesFromHash();\n\n\t\tif( newIndices ) {\n\t\t\tif( ( newIndices.h !== currentIndices.h || newIndices.v !== currentIndices.v || newIndices.f !== undefined ) ) {\n\t\t\t\t\tthis.Reveal.slide( newIndices.h, newIndices.v, newIndices.f );\n\t\t\t}\n\t\t}\n\t\t// If no new indices are available, we're trying to navigate to\n\t\t// a slide hash that does not exist\n\t\telse {\n\t\t\tthis.Reveal.slide( currentIndices.h || 0, currentIndices.v || 0 );\n\t\t}\n\n\t}\n\n\t/**\n\t * Updates the page URL (hash) to reflect the current\n\t * state.\n\t *\n\t * @param {number} delay The time in ms to wait before\n\t * writing the hash\n\t */\n\twriteURL( delay ) {\n\n\t\tlet config = this.Reveal.getConfig();\n\t\tlet currentSlide = this.Reveal.getCurrentSlide();\n\n\t\t// Make sure there's never more than one timeout running\n\t\tclearTimeout( this.writeURLTimeout );\n\n\t\t// If a delay is specified, timeout this call\n\t\tif( typeof delay === 'number' ) {\n\t\t\tthis.writeURLTimeout = setTimeout( this.writeURL, delay );\n\t\t}\n\t\telse if( currentSlide ) {\n\n\t\t\tlet hash = this.getHash();\n\n\t\t\t// If we're configured to push to history OR the history\n\t\t\t// API is not available.\n\t\t\tif( config.history ) {\n\t\t\t\twindow.location.hash = hash;\n\t\t\t}\n\t\t\t// If we're configured to reflect the current slide in the\n\t\t\t// URL without pushing to history.\n\t\t\telse if( config.hash ) {\n\t\t\t\t// If the hash is empty, don't add it to the URL\n\t\t\t\tif( hash === '/' ) {\n\t\t\t\t\tthis.debouncedReplaceState( window.location.pathname + window.location.search );\n\t\t\t\t}\n\t\t\t\telse {\n\t\t\t\t\tthis.debouncedReplaceState( '#' + hash );\n\t\t\t\t}\n\t\t\t}\n\t\t\t// UPDATE: The below nuking of all hash changes breaks\n\t\t\t// anchors on pages where reveal.js is running. Removed\n\t\t\t// in 4.0. Why was it here in the first place? ¯\\_(ツ)_/¯\n\t\t\t//\n\t\t\t// If history and hash are both disabled, a hash may still\n\t\t\t// be added to the URL by clicking on a href with a hash\n\t\t\t// target. Counter this by always removing the hash.\n\t\t\t// else {\n\t\t\t// \twindow.history.replaceState( null, null, window.location.pathname + window.location.search );\n\t\t\t// }\n\n\t\t}\n\n\t}\n\n\treplaceState( url ) {\n\n\t\twindow.history.replaceState( null, null, url );\n\t\tthis.replaceStateTimestamp = Date.now();\n\n\t}\n\n\tdebouncedReplaceState( url ) {\n\n\t\tclearTimeout( this.replaceStateTimeout );\n\n\t\tif( Date.now() - this.replaceStateTimestamp > this.MAX_REPLACE_STATE_FREQUENCY ) {\n\t\t\tthis.replaceState( url );\n\t\t}\n\t\telse {\n\t\t\tthis.replaceStateTimeout = setTimeout( () => this.replaceState( url ), this.MAX_REPLACE_STATE_FREQUENCY );\n\t\t}\n\n\t}\n\n\t/**\n\t * Return a hash URL that will resolve to the given slide location.\n\t *\n\t * @param {HTMLElement} [slide=currentSlide] The slide to link to\n\t */\n\tgetHash( slide ) {\n\n\t\tlet url = '/';\n\n\t\t// Attempt to create a named link based on the slide's ID\n\t\tlet s = slide || this.Reveal.getCurrentSlide();\n\t\tlet id = s ? s.getAttribute( 'id' ) : null;\n\t\tif( id ) {\n\t\t\tid = encodeURIComponent( id );\n\t\t}\n\n\t\tlet index = this.Reveal.getIndices( slide );\n\t\tif( !this.Reveal.getConfig().fragmentInURL ) {\n\t\t\tindex.f = undefined;\n\t\t}\n\n\t\t// If the current slide has an ID, use that as a named link,\n\t\t// but we don't support named links with a fragment index\n\t\tif( typeof id === 'string' && id.length ) {\n\t\t\turl = '/' + id;\n\n\t\t\t// If there is also a fragment, append that at the end\n\t\t\t// of the named link, like: #/named-link/2\n\t\t\tif( index.f >= 0 ) url += '/' + index.f;\n\t\t}\n\t\t// Otherwise use the /h/v index\n\t\telse {\n\t\t\tlet hashIndexBase = this.Reveal.getConfig().hashOneBasedIndex ? 1 : 0;\n\t\t\tif( index.h > 0 || index.v > 0 || index.f >= 0 ) url += index.h + hashIndexBase;\n\t\t\tif( index.v > 0 || index.f >= 0 ) url += '/' + (index.v + hashIndexBase );\n\t\t\tif( index.f >= 0 ) url += '/' + index.f;\n\t\t}\n\n\t\treturn url;\n\n\t}\n\n\t/**\n\t * Handler for the window level 'hashchange' event.\n\t *\n\t * @param {object} [event]\n\t */\n\tonWindowHashChange( event ) {\n\n\t\tthis.readURL();\n\n\t}\n\n}","import { queryAll } from '../utils/util.js'\nimport { isAndroid } from '../utils/device.js'\n\n/**\n * Manages our presentation controls. This includes both\n * the built-in control arrows as well as event monitoring\n * of any elements within the presentation with either of the\n * following helper classes:\n * - .navigate-up\n * - .navigate-right\n * - .navigate-down\n * - .navigate-left\n * - .navigate-next\n * - .navigate-prev\n */\nexport default class Controls {\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t\tthis.onNavigateLeftClicked = this.onNavigateLeftClicked.bind( this );\n\t\tthis.onNavigateRightClicked = this.onNavigateRightClicked.bind( this );\n\t\tthis.onNavigateUpClicked = this.onNavigateUpClicked.bind( this );\n\t\tthis.onNavigateDownClicked = this.onNavigateDownClicked.bind( this );\n\t\tthis.onNavigatePrevClicked = this.onNavigatePrevClicked.bind( this );\n\t\tthis.onNavigateNextClicked = this.onNavigateNextClicked.bind( this );\n\n\t}\n\n\trender() {\n\n\t\tconst rtl = this.Reveal.getConfig().rtl;\n\t\tconst revealElement = this.Reveal.getRevealElement();\n\n\t\tthis.element = document.createElement( 'aside' );\n\t\tthis.element.className = 'controls';\n\t\tthis.element.innerHTML =\n\t\t\t`\n\t\t\t\n\t\t\t\n\t\t\t`;\n\n\t\tthis.Reveal.getRevealElement().appendChild( this.element );\n\n\t\t// There can be multiple instances of controls throughout the page\n\t\tthis.controlsLeft = queryAll( revealElement, '.navigate-left' );\n\t\tthis.controlsRight = queryAll( revealElement, '.navigate-right' );\n\t\tthis.controlsUp = queryAll( revealElement, '.navigate-up' );\n\t\tthis.controlsDown = queryAll( revealElement, '.navigate-down' );\n\t\tthis.controlsPrev = queryAll( revealElement, '.navigate-prev' );\n\t\tthis.controlsNext = queryAll( revealElement, '.navigate-next' );\n\n\t\t// The left, right and down arrows in the standard reveal.js controls\n\t\tthis.controlsRightArrow = this.element.querySelector( '.navigate-right' );\n\t\tthis.controlsLeftArrow = this.element.querySelector( '.navigate-left' );\n\t\tthis.controlsDownArrow = this.element.querySelector( '.navigate-down' );\n\n\t}\n\n\t/**\n\t * Called when the reveal.js config is updated.\n\t */\n\tconfigure( config, oldConfig ) {\n\n\t\tthis.element.style.display = config.controls ? 'block' : 'none';\n\n\t\tthis.element.setAttribute( 'data-controls-layout', config.controlsLayout );\n\t\tthis.element.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows );\n\n\t}\n\n\tbind() {\n\n\t\t// Listen to both touch and click events, in case the device\n\t\t// supports both\n\t\tlet pointerEvents = [ 'touchstart', 'click' ];\n\n\t\t// Only support touch for Android, fixes double navigations in\n\t\t// stock browser\n\t\tif( isAndroid ) {\n\t\t\tpointerEvents = [ 'touchstart' ];\n\t\t}\n\n\t\tpointerEvents.forEach( eventName => {\n\t\t\tthis.controlsLeft.forEach( el => el.addEventListener( eventName, this.onNavigateLeftClicked, false ) );\n\t\t\tthis.controlsRight.forEach( el => el.addEventListener( eventName, this.onNavigateRightClicked, false ) );\n\t\t\tthis.controlsUp.forEach( el => el.addEventListener( eventName, this.onNavigateUpClicked, false ) );\n\t\t\tthis.controlsDown.forEach( el => el.addEventListener( eventName, this.onNavigateDownClicked, false ) );\n\t\t\tthis.controlsPrev.forEach( el => el.addEventListener( eventName, this.onNavigatePrevClicked, false ) );\n\t\t\tthis.controlsNext.forEach( el => el.addEventListener( eventName, this.onNavigateNextClicked, false ) );\n\t\t} );\n\n\t}\n\n\tunbind() {\n\n\t\t[ 'touchstart', 'click' ].forEach( eventName => {\n\t\t\tthis.controlsLeft.forEach( el => el.removeEventListener( eventName, this.onNavigateLeftClicked, false ) );\n\t\t\tthis.controlsRight.forEach( el => el.removeEventListener( eventName, this.onNavigateRightClicked, false ) );\n\t\t\tthis.controlsUp.forEach( el => el.removeEventListener( eventName, this.onNavigateUpClicked, false ) );\n\t\t\tthis.controlsDown.forEach( el => el.removeEventListener( eventName, this.onNavigateDownClicked, false ) );\n\t\t\tthis.controlsPrev.forEach( el => el.removeEventListener( eventName, this.onNavigatePrevClicked, false ) );\n\t\t\tthis.controlsNext.forEach( el => el.removeEventListener( eventName, this.onNavigateNextClicked, false ) );\n\t\t} );\n\n\t}\n\n\t/**\n\t * Updates the state of all control/navigation arrows.\n\t */\n\tupdate() {\n\n\t\tlet routes = this.Reveal.availableRoutes();\n\n\t\t// Remove the 'enabled' class from all directions\n\t\t[...this.controlsLeft, ...this.controlsRight, ...this.controlsUp, ...this.controlsDown, ...this.controlsPrev, ...this.controlsNext].forEach( node => {\n\t\t\tnode.classList.remove( 'enabled', 'fragmented' );\n\n\t\t\t// Set 'disabled' attribute on all directions\n\t\t\tnode.setAttribute( 'disabled', 'disabled' );\n\t\t} );\n\n\t\t// Add the 'enabled' class to the available routes; remove 'disabled' attribute to enable buttons\n\t\tif( routes.left ) this.controlsLeft.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );\n\t\tif( routes.right ) this.controlsRight.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );\n\t\tif( routes.up ) this.controlsUp.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );\n\t\tif( routes.down ) this.controlsDown.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );\n\n\t\t// Prev/next buttons\n\t\tif( routes.left || routes.up ) this.controlsPrev.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );\n\t\tif( routes.right || routes.down ) this.controlsNext.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );\n\n\t\t// Highlight fragment directions\n\t\tlet currentSlide = this.Reveal.getCurrentSlide();\n\t\tif( currentSlide ) {\n\n\t\t\tlet fragmentsRoutes = this.Reveal.fragments.availableRoutes();\n\n\t\t\t// Always apply fragment decorator to prev/next buttons\n\t\t\tif( fragmentsRoutes.prev ) this.controlsPrev.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );\n\t\t\tif( fragmentsRoutes.next ) this.controlsNext.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );\n\n\t\t\t// Apply fragment decorators to directional buttons based on\n\t\t\t// what slide axis they are in\n\t\t\tif( this.Reveal.isVerticalSlide( currentSlide ) ) {\n\t\t\t\tif( fragmentsRoutes.prev ) this.controlsUp.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );\n\t\t\t\tif( fragmentsRoutes.next ) this.controlsDown.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );\n\t\t\t}\n\t\t\telse {\n\t\t\t\tif( fragmentsRoutes.prev ) this.controlsLeft.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );\n\t\t\t\tif( fragmentsRoutes.next ) this.controlsRight.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );\n\t\t\t}\n\n\t\t}\n\n\t\tif( this.Reveal.getConfig().controlsTutorial ) {\n\n\t\t\tlet indices = this.Reveal.getIndices();\n\n\t\t\t// Highlight control arrows with an animation to ensure\n\t\t\t// that the viewer knows how to navigate\n\t\t\tif( !this.Reveal.hasNavigatedVertically() && routes.down ) {\n\t\t\t\tthis.controlsDownArrow.classList.add( 'highlight' );\n\t\t\t}\n\t\t\telse {\n\t\t\t\tthis.controlsDownArrow.classList.remove( 'highlight' );\n\n\t\t\t\tif( this.Reveal.getConfig().rtl ) {\n\n\t\t\t\t\tif( !this.Reveal.hasNavigatedHorizontally() && routes.left && indices.v === 0 ) {\n\t\t\t\t\t\tthis.controlsLeftArrow.classList.add( 'highlight' );\n\t\t\t\t\t}\n\t\t\t\t\telse {\n\t\t\t\t\t\tthis.controlsLeftArrow.classList.remove( 'highlight' );\n\t\t\t\t\t}\n\n\t\t\t\t} else {\n\n\t\t\t\t\tif( !this.Reveal.hasNavigatedHorizontally() && routes.right && indices.v === 0 ) {\n\t\t\t\t\t\tthis.controlsRightArrow.classList.add( 'highlight' );\n\t\t\t\t\t}\n\t\t\t\t\telse {\n\t\t\t\t\t\tthis.controlsRightArrow.classList.remove( 'highlight' );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tdestroy() {\n\n\t\tthis.unbind();\n\t\tthis.element.remove();\n\n\t}\n\n\t/**\n\t * Event handlers for navigation control buttons.\n\t */\n\tonNavigateLeftClicked( event ) {\n\n\t\tevent.preventDefault();\n\t\tthis.Reveal.onUserInput();\n\n\t\tif( this.Reveal.getConfig().navigationMode === 'linear' ) {\n\t\t\tthis.Reveal.prev();\n\t\t}\n\t\telse {\n\t\t\tthis.Reveal.left();\n\t\t}\n\n\t}\n\n\tonNavigateRightClicked( event ) {\n\n\t\tevent.preventDefault();\n\t\tthis.Reveal.onUserInput();\n\n\t\tif( this.Reveal.getConfig().navigationMode === 'linear' ) {\n\t\t\tthis.Reveal.next();\n\t\t}\n\t\telse {\n\t\t\tthis.Reveal.right();\n\t\t}\n\n\t}\n\n\tonNavigateUpClicked( event ) {\n\n\t\tevent.preventDefault();\n\t\tthis.Reveal.onUserInput();\n\n\t\tthis.Reveal.up();\n\n\t}\n\n\tonNavigateDownClicked( event ) {\n\n\t\tevent.preventDefault();\n\t\tthis.Reveal.onUserInput();\n\n\t\tthis.Reveal.down();\n\n\t}\n\n\tonNavigatePrevClicked( event ) {\n\n\t\tevent.preventDefault();\n\t\tthis.Reveal.onUserInput();\n\n\t\tthis.Reveal.prev();\n\n\t}\n\n\tonNavigateNextClicked( event ) {\n\n\t\tevent.preventDefault();\n\t\tthis.Reveal.onUserInput();\n\n\t\tthis.Reveal.next();\n\n\t}\n\n\n}","/**\n * Creates a visual progress bar for the presentation.\n */\nexport default class Progress {\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t\tthis.onProgressClicked = this.onProgressClicked.bind( this );\n\n\t}\n\n\trender() {\n\n\t\tthis.element = document.createElement( 'div' );\n\t\tthis.element.className = 'progress';\n\t\tthis.Reveal.getRevealElement().appendChild( this.element );\n\n\t\tthis.bar = document.createElement( 'span' );\n\t\tthis.element.appendChild( this.bar );\n\n\t}\n\n\t/**\n\t * Called when the reveal.js config is updated.\n\t */\n\tconfigure( config, oldConfig ) {\n\n\t\tthis.element.style.display = config.progress ? 'block' : 'none';\n\n\t}\n\n\tbind() {\n\n\t\tif( this.Reveal.getConfig().progress && this.element ) {\n\t\t\tthis.element.addEventListener( 'click', this.onProgressClicked, false );\n\t\t}\n\n\t}\n\n\tunbind() {\n\n\t\tif ( this.Reveal.getConfig().progress && this.element ) {\n\t\t\tthis.element.removeEventListener( 'click', this.onProgressClicked, false );\n\t\t}\n\n\t}\n\n\t/**\n\t * Updates the progress bar to reflect the current slide.\n\t */\n\tupdate() {\n\n\t\t// Update progress if enabled\n\t\tif( this.Reveal.getConfig().progress && this.bar ) {\n\n\t\t\tlet scale = this.Reveal.getProgress();\n\n\t\t\t// Don't fill the progress bar if there's only one slide\n\t\t\tif( this.Reveal.getTotalSlides() < 2 ) {\n\t\t\t\tscale = 0;\n\t\t\t}\n\n\t\t\tthis.bar.style.transform = 'scaleX('+ scale +')';\n\n\t\t}\n\n\t}\n\n\tgetMaxWidth() {\n\n\t\treturn this.Reveal.getRevealElement().offsetWidth;\n\n\t}\n\n\t/**\n\t * Clicking on the progress bar results in a navigation to the\n\t * closest approximate horizontal slide using this equation:\n\t *\n\t * ( clickX / presentationWidth ) * numberOfSlides\n\t *\n\t * @param {object} event\n\t */\n\tonProgressClicked( event ) {\n\n\t\tthis.Reveal.onUserInput( event );\n\n\t\tevent.preventDefault();\n\n\t\tlet slides = this.Reveal.getSlides();\n\t\tlet slidesTotal = slides.length;\n\t\tlet slideIndex = Math.floor( ( event.clientX / this.getMaxWidth() ) * slidesTotal );\n\n\t\tif( this.Reveal.getConfig().rtl ) {\n\t\t\tslideIndex = slidesTotal - slideIndex;\n\t\t}\n\n\t\tlet targetIndices = this.Reveal.getIndices(slides[slideIndex]);\n\t\tthis.Reveal.slide( targetIndices.h, targetIndices.v );\n\n\t}\n\n\tdestroy() {\n\n\t\tthis.element.remove();\n\n\t}\n\n}","/**\n * Handles hiding of the pointer/cursor when inactive.\n */\nexport default class Pointer {\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t\t// Throttles mouse wheel navigation\n\t\tthis.lastMouseWheelStep = 0;\n\n\t\t// Is the mouse pointer currently hidden from view\n\t\tthis.cursorHidden = false;\n\n\t\t// Timeout used to determine when the cursor is inactive\n\t\tthis.cursorInactiveTimeout = 0;\n\n\t\tthis.onDocumentCursorActive = this.onDocumentCursorActive.bind( this );\n\t\tthis.onDocumentMouseScroll = this.onDocumentMouseScroll.bind( this );\n\n\t}\n\n\t/**\n\t * Called when the reveal.js config is updated.\n\t */\n\tconfigure( config, oldConfig ) {\n\n\t\tif( config.mouseWheel ) {\n\t\t\tdocument.addEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false ); // FF\n\t\t\tdocument.addEventListener( 'mousewheel', this.onDocumentMouseScroll, false );\n\t\t}\n\t\telse {\n\t\t\tdocument.removeEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false ); // FF\n\t\t\tdocument.removeEventListener( 'mousewheel', this.onDocumentMouseScroll, false );\n\t\t}\n\n\t\t// Auto-hide the mouse pointer when its inactive\n\t\tif( config.hideInactiveCursor ) {\n\t\t\tdocument.addEventListener( 'mousemove', this.onDocumentCursorActive, false );\n\t\t\tdocument.addEventListener( 'mousedown', this.onDocumentCursorActive, false );\n\t\t}\n\t\telse {\n\t\t\tthis.showCursor();\n\n\t\t\tdocument.removeEventListener( 'mousemove', this.onDocumentCursorActive, false );\n\t\t\tdocument.removeEventListener( 'mousedown', this.onDocumentCursorActive, false );\n\t\t}\n\n\t}\n\n\t/**\n\t * Shows the mouse pointer after it has been hidden with\n\t * #hideCursor.\n\t */\n\tshowCursor() {\n\n\t\tif( this.cursorHidden ) {\n\t\t\tthis.cursorHidden = false;\n\t\t\tthis.Reveal.getRevealElement().style.cursor = '';\n\t\t}\n\n\t}\n\n\t/**\n\t * Hides the mouse pointer when it's on top of the .reveal\n\t * container.\n\t */\n\thideCursor() {\n\n\t\tif( this.cursorHidden === false ) {\n\t\t\tthis.cursorHidden = true;\n\t\t\tthis.Reveal.getRevealElement().style.cursor = 'none';\n\t\t}\n\n\t}\n\n\tdestroy() {\n\n\t\tthis.showCursor();\n\n\t\tdocument.removeEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false );\n\t\tdocument.removeEventListener( 'mousewheel', this.onDocumentMouseScroll, false );\n\t\tdocument.removeEventListener( 'mousemove', this.onDocumentCursorActive, false );\n\t\tdocument.removeEventListener( 'mousedown', this.onDocumentCursorActive, false );\n\n\t}\n\n\t/**\n\t * Called whenever there is mouse input at the document level\n\t * to determine if the cursor is active or not.\n\t *\n\t * @param {object} event\n\t */\n\tonDocumentCursorActive( event ) {\n\n\t\tthis.showCursor();\n\n\t\tclearTimeout( this.cursorInactiveTimeout );\n\n\t\tthis.cursorInactiveTimeout = setTimeout( this.hideCursor.bind( this ), this.Reveal.getConfig().hideCursorTime );\n\n\t}\n\n\t/**\n\t * Handles mouse wheel scrolling, throttled to avoid skipping\n\t * multiple slides.\n\t *\n\t * @param {object} event\n\t */\n\tonDocumentMouseScroll( event ) {\n\n\t\tif( Date.now() - this.lastMouseWheelStep > 1000 ) {\n\n\t\t\tthis.lastMouseWheelStep = Date.now();\n\n\t\t\tlet delta = event.detail || -event.wheelDelta;\n\t\t\tif( delta > 0 ) {\n\t\t\t\tthis.Reveal.next();\n\t\t\t}\n\t\t\telse if( delta < 0 ) {\n\t\t\t\tthis.Reveal.prev();\n\t\t\t}\n\n\t\t}\n\n\t}\n\n}","/**\n * Loads a JavaScript file from the given URL and executes it.\n *\n * @param {string} url Address of the .js file to load\n * @param {function} callback Method to invoke when the script\n * has loaded and executed\n */\nexport const loadScript = ( url, callback ) => {\n\n\tconst script = document.createElement( 'script' );\n\tscript.type = 'text/javascript';\n\tscript.async = false;\n\tscript.defer = false;\n\tscript.src = url;\n\n\tif( typeof callback === 'function' ) {\n\n\t\t// Success callback\n\t\tscript.onload = script.onreadystatechange = event => {\n\t\t\tif( event.type === 'load' || /loaded|complete/.test( script.readyState ) ) {\n\n\t\t\t\t// Kill event listeners\n\t\t\t\tscript.onload = script.onreadystatechange = script.onerror = null;\n\n\t\t\t\tcallback();\n\n\t\t\t}\n\t\t};\n\n\t\t// Error callback\n\t\tscript.onerror = err => {\n\n\t\t\t// Kill event listeners\n\t\t\tscript.onload = script.onreadystatechange = script.onerror = null;\n\n\t\t\tcallback( new Error( 'Failed loading script: ' + script.src + '\\n' + err ) );\n\n\t\t};\n\n\t}\n\n\t// Append the script at the end of \n\tconst head = document.querySelector( 'head' );\n\thead.insertBefore( script, head.lastChild );\n\n}","import { loadScript } from '../utils/loader.js'\n\n/**\n * Manages loading and registering of reveal.js plugins.\n */\nexport default class Plugins {\n\n\tconstructor( reveal ) {\n\n\t\tthis.Reveal = reveal;\n\n\t\t// Flags our current state (idle -> loading -> loaded)\n\t\tthis.state = 'idle';\n\n\t\t// An id:instance map of currently registered plugins\n\t\tthis.registeredPlugins = {};\n\n\t\tthis.asyncDependencies = [];\n\n\t}\n\n\t/**\n\t * Loads reveal.js dependencies, registers and\n\t * initializes plugins.\n\t *\n\t * Plugins are direct references to a reveal.js plugin\n\t * object that we register and initialize after any\n\t * synchronous dependencies have loaded.\n\t *\n\t * Dependencies are defined via the 'dependencies' config\n\t * option and will be loaded prior to starting reveal.js.\n\t * Some dependencies may have an 'async' flag, if so they\n\t * will load after reveal.js has been started up.\n\t */\n\tload( plugins, dependencies ) {\n\n\t\tthis.state = 'loading';\n\n\t\tplugins.forEach( this.registerPlugin.bind( this ) );\n\n\t\treturn new Promise( resolve => {\n\n\t\t\tlet scripts = [],\n\t\t\t\tscriptsToLoad = 0;\n\n\t\t\tdependencies.forEach( s => {\n\t\t\t\t// Load if there's no condition or the condition is truthy\n\t\t\t\tif( !s.condition || s.condition() ) {\n\t\t\t\t\tif( s.async ) {\n\t\t\t\t\t\tthis.asyncDependencies.push( s );\n\t\t\t\t\t}\n\t\t\t\t\telse {\n\t\t\t\t\t\tscripts.push( s );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tif( scripts.length ) {\n\t\t\t\tscriptsToLoad = scripts.length;\n\n\t\t\t\tconst scriptLoadedCallback = (s) => {\n\t\t\t\t\tif( s && typeof s.callback === 'function' ) s.callback();\n\n\t\t\t\t\tif( --scriptsToLoad === 0 ) {\n\t\t\t\t\t\tthis.initPlugins().then( resolve );\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\t// Load synchronous scripts\n\t\t\t\tscripts.forEach( s => {\n\t\t\t\t\tif( typeof s.id === 'string' ) {\n\t\t\t\t\t\tthis.registerPlugin( s );\n\t\t\t\t\t\tscriptLoadedCallback( s );\n\t\t\t\t\t}\n\t\t\t\t\telse if( typeof s.src === 'string' ) {\n\t\t\t\t\t\tloadScript( s.src, () => scriptLoadedCallback(s) );\n\t\t\t\t\t}\n\t\t\t\t\telse {\n\t\t\t\t\t\tconsole.warn( 'Unrecognized plugin format', s );\n\t\t\t\t\t\tscriptLoadedCallback();\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t\telse {\n\t\t\t\tthis.initPlugins().then( resolve );\n\t\t\t}\n\n\t\t} );\n\n\t}\n\n\t/**\n\t * Initializes our plugins and waits for them to be ready\n\t * before proceeding.\n\t */\n\tinitPlugins() {\n\n\t\treturn new Promise( resolve => {\n\n\t\t\tlet pluginValues = Object.values( this.registeredPlugins );\n\t\t\tlet pluginsToInitialize = pluginValues.length;\n\n\t\t\t// If there are no plugins, skip this step\n\t\t\tif( pluginsToInitialize === 0 ) {\n\t\t\t\tthis.loadAsync().then( resolve );\n\t\t\t}\n\t\t\t// ... otherwise initialize plugins\n\t\t\telse {\n\n\t\t\t\tlet initNextPlugin;\n\n\t\t\t\tlet afterPlugInitialized = () => {\n\t\t\t\t\tif( --pluginsToInitialize === 0 ) {\n\t\t\t\t\t\tthis.loadAsync().then( resolve );\n\t\t\t\t\t}\n\t\t\t\t\telse {\n\t\t\t\t\t\tinitNextPlugin();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tlet i = 0;\n\n\t\t\t\t// Initialize plugins serially\n\t\t\t\tinitNextPlugin = () => {\n\n\t\t\t\t\tlet plugin = pluginValues[i++];\n\n\t\t\t\t\t// If the plugin has an 'init' method, invoke it\n\t\t\t\t\tif( typeof plugin.init === 'function' ) {\n\t\t\t\t\t\tlet promise = plugin.init( this.Reveal );\n\n\t\t\t\t\t\t// If the plugin returned a Promise, wait for it\n\t\t\t\t\t\tif( promise && typeof promise.then === 'function' ) {\n\t\t\t\t\t\t\tpromise.then( afterPlugInitialized );\n\t\t\t\t\t\t}\n\t\t\t\t\t\telse {\n\t\t\t\t\t\t\tafterPlugInitialized();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\telse {\n\t\t\t\t\t\tafterPlugInitialized();\n\t\t\t\t\t}\n\n\t\t\t\t}\n\n\t\t\t\tinitNextPlugin();\n\n\t\t\t}\n\n\t\t} )\n\n\t}\n\n\t/**\n\t * Loads all async reveal.js dependencies.\n\t */\n\tloadAsync() {\n\n\t\tthis.state = 'loaded';\n\n\t\tif( this.asyncDependencies.length ) {\n\t\t\tthis.asyncDependencies.forEach( s => {\n\t\t\t\tloadScript( s.src, s.callback );\n\t\t\t} );\n\t\t}\n\n\t\treturn Promise.resolve();\n\n\t}\n\n\t/**\n\t * Registers a new plugin with this reveal.js instance.\n\t *\n\t * reveal.js waits for all registered plugins to initialize\n\t * before considering itself ready, as long as the plugin\n\t * is registered before calling `Reveal.initialize()`.\n\t */\n\tregisterPlugin( plugin ) {\n\n\t\t// Backwards compatibility to make reveal.js ~3.9.0\n\t\t// plugins work with reveal.js 4.0.0\n\t\tif( arguments.length === 2 && typeof arguments[0] === 'string' ) {\n\t\t\tplugin = arguments[1];\n\t\t\tplugin.id = arguments[0];\n\t\t}\n\t\t// Plugin can optionally be a function which we call\n\t\t// to create an instance of the plugin\n\t\telse if( typeof plugin === 'function' ) {\n\t\t\tplugin = plugin();\n\t\t}\n\n\t\tlet id = plugin.id;\n\n\t\tif( typeof id !== 'string' ) {\n\t\t\tconsole.warn( 'Unrecognized plugin format; can\\'t find plugin.id', plugin );\n\t\t}\n\t\telse if( this.registeredPlugins[id] === undefined ) {\n\t\t\tthis.registeredPlugins[id] = plugin;\n\n\t\t\t// If a plugin is registered after reveal.js is loaded,\n\t\t\t// initialize it right away\n\t\t\tif( this.state === 'loaded' && typeof plugin.init === 'function' ) {\n\t\t\t\tplugin.init( this.Reveal );\n\t\t\t}\n\t\t}\n\t\telse {\n\t\t\tconsole.warn( 'reveal.js: \"'+ id +'\" plugin has already been registered' );\n\t\t}\n\n\t}\n\n\t/**\n\t * Checks if a specific plugin has been registered.\n\t *\n\t * @param {String} id Unique plugin identifier\n\t */\n\thasPlugin( id ) {\n\n\t\treturn !!this.registeredPlugins[id];\n\n\t}\n\n\t/**\n\t * Returns the specific plugin instance, if a plugin\n\t * with the given ID has been registered.\n\t *\n\t * @param {String} id Unique plugin identifier\n\t */\n\tgetPlugin( id ) {\n\n\t\treturn this.registeredPlugins[id];\n\n\t}\n\n\tgetRegisteredPlugins() {\n\n\t\treturn this.registeredPlugins;\n\n\t}\n\n\tdestroy() {\n\n\t\tObject.values( this.registeredPlugins ).forEach( plugin => {\n\t\t\tif( typeof plugin.destroy === 'function' ) {\n\t\t\t\tplugin.destroy();\n\t\t\t}\n\t\t} );\n\n\t\tthis.registeredPlugins = {};\n\t\tthis.asyncDependencies = [];\n\n\t}\n\n}\n","import { isAndroid } from '../utils/device.js'\nimport { matches } from '../utils/util.js'\n\nconst SWIPE_THRESHOLD = 40;\n\n/**\n * Controls all touch interactions and navigations for\n * a presentation.\n */\nexport default class Touch {\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t\t// Holds information about the currently ongoing touch interaction\n\t\tthis.touchStartX = 0;\n\t\tthis.touchStartY = 0;\n\t\tthis.touchStartCount = 0;\n\t\tthis.touchCaptured = false;\n\n\t\tthis.onPointerDown = this.onPointerDown.bind( this );\n\t\tthis.onPointerMove = this.onPointerMove.bind( this );\n\t\tthis.onPointerUp = this.onPointerUp.bind( this );\n\t\tthis.onTouchStart = this.onTouchStart.bind( this );\n\t\tthis.onTouchMove = this.onTouchMove.bind( this );\n\t\tthis.onTouchEnd = this.onTouchEnd.bind( this );\n\n\t}\n\n\t/**\n\t *\n\t */\n\tbind() {\n\n\t\tlet revealElement = this.Reveal.getRevealElement();\n\n\t\tif( 'onpointerdown' in window ) {\n\t\t\t// Use W3C pointer events\n\t\t\trevealElement.addEventListener( 'pointerdown', this.onPointerDown, false );\n\t\t\trevealElement.addEventListener( 'pointermove', this.onPointerMove, false );\n\t\t\trevealElement.addEventListener( 'pointerup', this.onPointerUp, false );\n\t\t}\n\t\telse if( window.navigator.msPointerEnabled ) {\n\t\t\t// IE 10 uses prefixed version of pointer events\n\t\t\trevealElement.addEventListener( 'MSPointerDown', this.onPointerDown, false );\n\t\t\trevealElement.addEventListener( 'MSPointerMove', this.onPointerMove, false );\n\t\t\trevealElement.addEventListener( 'MSPointerUp', this.onPointerUp, false );\n\t\t}\n\t\telse {\n\t\t\t// Fall back to touch events\n\t\t\trevealElement.addEventListener( 'touchstart', this.onTouchStart, false );\n\t\t\trevealElement.addEventListener( 'touchmove', this.onTouchMove, false );\n\t\t\trevealElement.addEventListener( 'touchend', this.onTouchEnd, false );\n\t\t}\n\n\t}\n\n\t/**\n\t *\n\t */\n\tunbind() {\n\n\t\tlet revealElement = this.Reveal.getRevealElement();\n\n\t\trevealElement.removeEventListener( 'pointerdown', this.onPointerDown, false );\n\t\trevealElement.removeEventListener( 'pointermove', this.onPointerMove, false );\n\t\trevealElement.removeEventListener( 'pointerup', this.onPointerUp, false );\n\n\t\trevealElement.removeEventListener( 'MSPointerDown', this.onPointerDown, false );\n\t\trevealElement.removeEventListener( 'MSPointerMove', this.onPointerMove, false );\n\t\trevealElement.removeEventListener( 'MSPointerUp', this.onPointerUp, false );\n\n\t\trevealElement.removeEventListener( 'touchstart', this.onTouchStart, false );\n\t\trevealElement.removeEventListener( 'touchmove', this.onTouchMove, false );\n\t\trevealElement.removeEventListener( 'touchend', this.onTouchEnd, false );\n\n\t}\n\n\t/**\n\t * Checks if the target element prevents the triggering of\n\t * swipe navigation.\n\t */\n\tisSwipePrevented( target ) {\n\n\t\t// Prevent accidental swipes when scrubbing timelines\n\t\tif( matches( target, 'video, audio' ) ) return true;\n\n\t\twhile( target && typeof target.hasAttribute === 'function' ) {\n\t\t\tif( target.hasAttribute( 'data-prevent-swipe' ) ) return true;\n\t\t\ttarget = target.parentNode;\n\t\t}\n\n\t\treturn false;\n\n\t}\n\n\t/**\n\t * Handler for the 'touchstart' event, enables support for\n\t * swipe and pinch gestures.\n\t *\n\t * @param {object} event\n\t */\n\tonTouchStart( event ) {\n\n\t\tif( this.isSwipePrevented( event.target ) ) return true;\n\n\t\tthis.touchStartX = event.touches[0].clientX;\n\t\tthis.touchStartY = event.touches[0].clientY;\n\t\tthis.touchStartCount = event.touches.length;\n\n\t}\n\n\t/**\n\t * Handler for the 'touchmove' event.\n\t *\n\t * @param {object} event\n\t */\n\tonTouchMove( event ) {\n\n\t\tif( this.isSwipePrevented( event.target ) ) return true;\n\n\t\tlet config = this.Reveal.getConfig();\n\n\t\t// Each touch should only trigger one action\n\t\tif( !this.touchCaptured ) {\n\t\t\tthis.Reveal.onUserInput( event );\n\n\t\t\tlet currentX = event.touches[0].clientX;\n\t\t\tlet currentY = event.touches[0].clientY;\n\n\t\t\t// There was only one touch point, look for a swipe\n\t\t\tif( event.touches.length === 1 && this.touchStartCount !== 2 ) {\n\n\t\t\t\tlet availableRoutes = this.Reveal.availableRoutes({ includeFragments: true });\n\n\t\t\t\tlet deltaX = currentX - this.touchStartX,\n\t\t\t\t\tdeltaY = currentY - this.touchStartY;\n\n\t\t\t\tif( deltaX > SWIPE_THRESHOLD && Math.abs( deltaX ) > Math.abs( deltaY ) ) {\n\t\t\t\t\tthis.touchCaptured = true;\n\t\t\t\t\tif( config.navigationMode === 'linear' ) {\n\t\t\t\t\t\tif( config.rtl ) {\n\t\t\t\t\t\t\tthis.Reveal.next();\n\t\t\t\t\t\t}\n\t\t\t\t\t\telse {\n\t\t\t\t\t\t\tthis.Reveal.prev();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\telse {\n\t\t\t\t\t\tthis.Reveal.left();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\telse if( deltaX < -SWIPE_THRESHOLD && Math.abs( deltaX ) > Math.abs( deltaY ) ) {\n\t\t\t\t\tthis.touchCaptured = true;\n\t\t\t\t\tif( config.navigationMode === 'linear' ) {\n\t\t\t\t\t\tif( config.rtl ) {\n\t\t\t\t\t\t\tthis.Reveal.prev();\n\t\t\t\t\t\t}\n\t\t\t\t\t\telse {\n\t\t\t\t\t\t\tthis.Reveal.next();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\telse {\n\t\t\t\t\t\tthis.Reveal.right();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\telse if( deltaY > SWIPE_THRESHOLD && availableRoutes.up ) {\n\t\t\t\t\tthis.touchCaptured = true;\n\t\t\t\t\tif( config.navigationMode === 'linear' ) {\n\t\t\t\t\t\tthis.Reveal.prev();\n\t\t\t\t\t}\n\t\t\t\t\telse {\n\t\t\t\t\t\tthis.Reveal.up();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\telse if( deltaY < -SWIPE_THRESHOLD && availableRoutes.down ) {\n\t\t\t\t\tthis.touchCaptured = true;\n\t\t\t\t\tif( config.navigationMode === 'linear' ) {\n\t\t\t\t\t\tthis.Reveal.next();\n\t\t\t\t\t}\n\t\t\t\t\telse {\n\t\t\t\t\t\tthis.Reveal.down();\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// If we're embedded, only block touch events if they have\n\t\t\t\t// triggered an action\n\t\t\t\tif( config.embedded ) {\n\t\t\t\t\tif( this.touchCaptured || this.Reveal.isVerticalSlide() ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t// Not embedded? Block them all to avoid needless tossing\n\t\t\t\t// around of the viewport in iOS\n\t\t\t\telse {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\n\t\t\t}\n\t\t}\n\t\t// There's a bug with swiping on some Android devices unless\n\t\t// the default action is always prevented\n\t\telse if( isAndroid ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t}\n\n\t/**\n\t * Handler for the 'touchend' event.\n\t *\n\t * @param {object} event\n\t */\n\tonTouchEnd( event ) {\n\n\t\tthis.touchCaptured = false;\n\n\t}\n\n\t/**\n\t * Convert pointer down to touch start.\n\t *\n\t * @param {object} event\n\t */\n\tonPointerDown( event ) {\n\n\t\tif( event.pointerType === event.MSPOINTER_TYPE_TOUCH || event.pointerType === \"touch\" ) {\n\t\t\tevent.touches = [{ clientX: event.clientX, clientY: event.clientY }];\n\t\t\tthis.onTouchStart( event );\n\t\t}\n\n\t}\n\n\t/**\n\t * Convert pointer move to touch move.\n\t *\n\t * @param {object} event\n\t */\n\tonPointerMove( event ) {\n\n\t\tif( event.pointerType === event.MSPOINTER_TYPE_TOUCH || event.pointerType === \"touch\" ) {\n\t\t\tevent.touches = [{ clientX: event.clientX, clientY: event.clientY }];\n\t\t\tthis.onTouchMove( event );\n\t\t}\n\n\t}\n\n\t/**\n\t * Convert pointer up to touch end.\n\t *\n\t * @param {object} event\n\t */\n\tonPointerUp( event ) {\n\n\t\tif( event.pointerType === event.MSPOINTER_TYPE_TOUCH || event.pointerType === \"touch\" ) {\n\t\t\tevent.touches = [{ clientX: event.clientX, clientY: event.clientY }];\n\t\t\tthis.onTouchEnd( event );\n\t\t}\n\n\t}\n\n}","import { closest } from '../utils/util.js'\n\n/**\n * Manages focus when a presentation is embedded. This\n * helps us only capture keyboard from the presentation\n * a user is currently interacting with in a page where\n * multiple presentations are embedded.\n */\n\nconst STATE_FOCUS = 'focus';\nconst STATE_BLUR = 'blur';\n\nexport default class Focus {\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t\tthis.onRevealPointerDown = this.onRevealPointerDown.bind( this );\n\t\tthis.onDocumentPointerDown = this.onDocumentPointerDown.bind( this );\n\n\t}\n\n\t/**\n\t * Called when the reveal.js config is updated.\n\t */\n\tconfigure( config, oldConfig ) {\n\n\t\tif( config.embedded ) {\n\t\t\tthis.blur();\n\t\t}\n\t\telse {\n\t\t\tthis.focus();\n\t\t\tthis.unbind();\n\t\t}\n\n\t}\n\n\tbind() {\n\n\t\tif( this.Reveal.getConfig().embedded ) {\n\t\t\tthis.Reveal.getRevealElement().addEventListener( 'pointerdown', this.onRevealPointerDown, false );\n\t\t}\n\n\t}\n\n\tunbind() {\n\n\t\tthis.Reveal.getRevealElement().removeEventListener( 'pointerdown', this.onRevealPointerDown, false );\n\t\tdocument.removeEventListener( 'pointerdown', this.onDocumentPointerDown, false );\n\n\t}\n\n\tfocus() {\n\n\t\tif( this.state !== STATE_FOCUS ) {\n\t\t\tthis.Reveal.getRevealElement().classList.add( 'focused' );\n\t\t\tdocument.addEventListener( 'pointerdown', this.onDocumentPointerDown, false );\n\t\t}\n\n\t\tthis.state = STATE_FOCUS;\n\n\t}\n\n\tblur() {\n\n\t\tif( this.state !== STATE_BLUR ) {\n\t\t\tthis.Reveal.getRevealElement().classList.remove( 'focused' );\n\t\t\tdocument.removeEventListener( 'pointerdown', this.onDocumentPointerDown, false );\n\t\t}\n\n\t\tthis.state = STATE_BLUR;\n\n\t}\n\n\tisFocused() {\n\n\t\treturn this.state === STATE_FOCUS;\n\n\t}\n\n\tdestroy() {\n\n\t\tthis.Reveal.getRevealElement().classList.remove( 'focused' );\n\n\t}\n\n\tonRevealPointerDown( event ) {\n\n\t\tthis.focus();\n\n\t}\n\n\tonDocumentPointerDown( event ) {\n\n\t\tlet revealElement = closest( event.target, '.reveal' );\n\t\tif( !revealElement || revealElement !== this.Reveal.getRevealElement() ) {\n\t\t\tthis.blur();\n\t\t}\n\n\t}\n\n}","/**\n * Handles the showing of speaker notes\n */\nexport default class Notes {\n\n\tconstructor( Reveal ) {\n\n\t\tthis.Reveal = Reveal;\n\n\t}\n\n\trender() {\n\n\t\tthis.element = document.createElement( 'div' );\n\t\tthis.element.className = 'speaker-notes';\n\t\tthis.element.setAttribute( 'data-prevent-swipe', '' );\n\t\tthis.element.setAttribute( 'tabindex', '0' );\n\t\tthis.Reveal.getRevealElement().appendChild( this.element );\n\n\t}\n\n\t/**\n\t * Called when the reveal.js config is updated.\n\t */\n\tconfigure( config, oldConfig ) {\n\n\t\tif( config.showNotes ) {\n\t\t\tthis.element.setAttribute( 'data-layout', typeof config.showNotes === 'string' ? config.showNotes : 'inline' );\n\t\t}\n\n\t}\n\n\t/**\n\t * Pick up notes from the current slide and display them\n\t * to the viewer.\n\t *\n\t * @see {@link config.showNotes}\n\t */\n\tupdate() {\n\n\t\tif( this.Reveal.getConfig().showNotes &&\n\t\t\tthis.element && this.Reveal.getCurrentSlide() &&\n\t\t\t!this.Reveal.isScrollView() &&\n\t\t\t!this.Reveal.isPrintView()\n\t\t) {\n\t\t\tthis.element.innerHTML = this.getSlideNotes() || 'No notes on this slide.';\n\t\t}\n\n\t}\n\n\t/**\n\t * Updates the visibility of the speaker notes sidebar that\n\t * is used to share annotated slides. The notes sidebar is\n\t * only visible if showNotes is true and there are notes on\n\t * one or more slides in the deck.\n\t */\n\tupdateVisibility() {\n\n\t\tif( this.Reveal.getConfig().showNotes &&\n\t\t\tthis.hasNotes() &&\n\t\t\t!this.Reveal.isScrollView() &&\n\t\t\t!this.Reveal.isPrintView()\n\t\t) {\n\t\t\tthis.Reveal.getRevealElement().classList.add( 'show-notes' );\n\t\t}\n\t\telse {\n\t\t\tthis.Reveal.getRevealElement().classList.remove( 'show-notes' );\n\t\t}\n\n\t}\n\n\t/**\n\t * Checks if there are speaker notes for ANY slide in the\n\t * presentation.\n\t */\n\thasNotes() {\n\n\t\treturn this.Reveal.getSlidesElement().querySelectorAll( '[data-notes], aside.notes' ).length > 0;\n\n\t}\n\n\t/**\n\t * Checks if this presentation is running inside of the\n\t * speaker notes window.\n\t *\n\t * @return {boolean}\n\t */\n\tisSpeakerNotesWindow() {\n\n\t\treturn !!window.location.search.match( /receiver/gi );\n\n\t}\n\n\t/**\n\t * Retrieves the speaker notes from a slide. Notes can be\n\t * defined in two ways:\n\t * 1. As a data-notes attribute on the slide
\n\t * 2. With