Skip to content

Commit

Permalink
Merge branch 'dev'
Browse files Browse the repository at this point in the history
  • Loading branch information
denehyg committed Jul 18, 2020
2 parents e8248b6 + bf3a46c commit 57998f8
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 46 deletions.
32 changes: 28 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,11 +108,25 @@ Reveal.initialize({
// with the default themes list. Alternatively, provide an
// array to specify the themes to make available in the
// themes menu panel, for example...
//
// [
// { name: 'Black', theme: 'css/theme/black.css' },
// { name: 'White', theme: 'css/theme/white.css' },
// { name: 'League', theme: 'css/theme/league.css' }
// { name: 'Black', theme: 'dist/theme/black.css' },
// { name: 'White', theme: 'dist/theme/white.css' },
// { name: 'League', theme: 'dist/theme/league.css' },
// {
// name: 'Dark',
// theme: 'lib/reveal.js/dist/theme/black.css',
// highlightTheme: 'lib/reveal.js/plugin/highlight/monokai.css'
// },
// {
// name: 'Code: Zenburn',
// highlightTheme: 'lib/reveal.js/plugin/highlight/zenburn.css'
// }
// ]
//
// Note: specifying highlightTheme without a theme will
// change the code highlight theme while leaving the
// presentation theme unchanged.
themes: false,

// Specifies the path to the default theme files. If your
Expand All @@ -121,7 +135,7 @@ Reveal.initialize({
// when 'themes' is set to 'true'. If you provide your own
// list of themes or 'themes' is set to 'false' the
// 'themesPath' option is ignored.
themesPath: 'css/theme/',
themesPath: 'dist/theme/',

// Specifies if the transitions menu panel will be shown.
// Set to 'true' to show the transitions menu panel with
Expand Down Expand Up @@ -184,6 +198,16 @@ If you are using the themes panel you need to ensure the theme stylesheet in the
<link rel="stylesheet" href="css/theme/black.css" id="theme" />
```

If your themes configuration includes code highlight themes you need to ensure the highlights theme stylesheet in the presentation uses the `id="highlight-theme"` attribute. For example...

```html
<link
rel="stylesheet"
href="plugin/highlight/zenburn.css"
id="highlight-theme"
/>
```

## Slide Titles

The slide titles used in the menu can be supplied explicitly or are taken directly from the presentation, using the following rules...
Expand Down
97 changes: 55 additions & 42 deletions plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const Plugin = () => {
if (options.markers === undefined) options.markers = true;

if (typeof options.themesPath !== 'string')
options.themesPath = 'css/theme/';
options.themesPath = 'dist/theme/';
if (!options.themesPath.endsWith('/')) options.themesPath += '/';

if (!select('link#theme')) options.themes = false;
Expand Down Expand Up @@ -536,45 +536,40 @@ const Plugin = () => {
var h = parseInt(item.getAttribute('data-slide-h'));
var v = parseInt(item.getAttribute('data-slide-v'));
var theme = item.getAttribute('data-theme');
var highlightTheme = item.getAttribute('data-highlight-theme');
var transition = item.getAttribute('data-transition');

if (!isNaN(h) && !isNaN(v)) {
deck.slide(h, v);
closeMenu();
} else if (theme) {
// take note of the previous theme and remove it, then create a new stylesheet reference and insert it
// this is required to force a load event so we can change the menu style to match the new style
var stylesheet = select('link#theme');
var parent = stylesheet.parentElement;
var sibling = stylesheet.nextElementSibling;
stylesheet.remove();

var newStylesheet = stylesheet.cloneNode();
newStylesheet.setAttribute('href', theme);
newStylesheet.onload = function () {
matchRevealStyle();
};
parent.insertBefore(newStylesheet, sibling);
}

if (theme) {
changeStylesheet('theme', theme);
}

if (highlightTheme) {
changeStylesheet('highlight-theme', highlightTheme);
}

closeMenu();
} else if (transition) {
if (transition) {
deck.configure({ transition: transition });
closeMenu();
} else {
var link = select('a', item);
if (link) {
if (
force ||
!options.sticky ||
(options.autoOpen && link.href.startsWith('#')) ||
link.href.startsWith(
window.location.origin + window.location.pathname + '#'
)
) {
link.click();
}
}

var link = select('a', item);
if (link) {
if (
force ||
!options.sticky ||
(options.autoOpen && link.href.startsWith('#')) ||
link.href.startsWith(
window.location.origin + window.location.pathname + '#'
)
) {
link.click();
}
closeMenu();
}

closeMenu();
}

function clicked(event) {
Expand Down Expand Up @@ -950,15 +945,17 @@ const Plugin = () => {
var menu = create('ul', { class: 'slide-menu-items' });
panel.appendChild(menu);
options.themes.forEach(function (t, i) {
var item = create(
'li',
{
class: 'slide-menu-item',
'data-theme': t.theme,
'data-item': '' + (i + 1)
},
t.name
);
var attrs = {
class: 'slide-menu-item',
'data-item': '' + (i + 1)
};
if (t.theme) {
attrs['data-theme'] = t.theme;
}
if (t.highlightTheme) {
attrs['data-highlight-theme'] = t.highlightTheme;
}
var item = create('li', attrs, t.name);
menu.appendChild(item);
item.onclick = clicked;
});
Expand Down Expand Up @@ -1136,6 +1133,22 @@ const Plugin = () => {
return el;
}

function changeStylesheet(id, href) {
// take note of the previous theme and remove it, then create a new stylesheet reference and insert it
// this is required to force a load event so we can change the menu style to match the new style
var stylesheet = select('link#' + id);
var parent = stylesheet.parentElement;
var sibling = stylesheet.nextElementSibling;
stylesheet.remove();

var newStylesheet = stylesheet.cloneNode();
newStylesheet.setAttribute('href', href);
newStylesheet.onload = function () {
matchRevealStyle();
};
parent.insertBefore(newStylesheet, sibling);
}

// modified from math plugin
function loadResource(url, type, callback) {
var head = document.querySelector('head');
Expand Down

0 comments on commit 57998f8

Please sign in to comment.