add extensions
This commit is contained in:
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
* reveal-header
|
||||
* A filter that adds header text and logo.
|
||||
*
|
||||
* MIT License
|
||||
* Copyright (c) 2023 Shafayet Khan Shafee.
|
||||
*/
|
||||
|
||||
function header() {
|
||||
|
||||
// add the header structure as the firstChild of div.reveal-header
|
||||
function add_header() {
|
||||
let header = document.querySelector("div.reveal-header");
|
||||
let reveal = document.querySelector(".reveal");
|
||||
reveal.insertBefore(header, reveal.firstChild);
|
||||
|
||||
logo_img = document.querySelector('.header-logo img');
|
||||
if (logo_img.getAttribute('src') == null) {
|
||||
if (logo_img?.getAttribute('data-src') != null) {
|
||||
logo_img.src = logo_img?.getAttribute('data-src') || "";
|
||||
logo_img.removeAttribute('data-src');
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
// add the class inverse-header for slide with has-dark-background class
|
||||
// otherwise remove it.
|
||||
function add_class(has_dark, header_paras) {
|
||||
header_paras.forEach(el => {
|
||||
el.classList.remove('inverse-header');
|
||||
if(has_dark) {
|
||||
el.classList.add('inverse-header');
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// dynamically changing the header
|
||||
function change_header(dheader, cheader, ctext) {
|
||||
// dhead => dynamic header
|
||||
// chead => constant header
|
||||
// ctext => contstant header_text inner html
|
||||
if (dheader !== null) {
|
||||
cheader.innerHTML = dheader.innerHTML;
|
||||
} else {
|
||||
cheader.innerHTML = ctext;
|
||||
};
|
||||
};
|
||||
|
||||
function hide_from_title_slide(element) {
|
||||
Reveal.on( 'slidechanged' , event => {
|
||||
if (event.currentSlide.matches('#title-slide')) {
|
||||
element.style.visibility = 'hidden';
|
||||
} else {
|
||||
element.style.visibility = 'visible';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
if (Reveal.isReady()) {
|
||||
|
||||
add_header();
|
||||
|
||||
if (document.querySelector('div.reveal.has-logo') != null) {
|
||||
var slide_number = document.querySelector('div.slide-number');
|
||||
var header = document.querySelector("div.reveal-header");
|
||||
header.appendChild(slide_number);
|
||||
};
|
||||
|
||||
// Get the default header text element and innner HTML (i.e. literal text)
|
||||
var header_text = document.querySelector("div.header-text p");
|
||||
const header_inner_html = header_text.innerHTML;
|
||||
|
||||
var header_paras = document.querySelectorAll("div.reveal-header p");
|
||||
var dark = Reveal.getCurrentSlide().classList.contains('has-dark-background');
|
||||
add_class(dark, header_paras);
|
||||
|
||||
Reveal.on( 'slidechanged', event => {
|
||||
var has_dark = event.currentSlide.classList.contains('has-dark-background');
|
||||
add_class(has_dark, header_paras);
|
||||
});
|
||||
|
||||
// make the visibility of slide specific header text defined in slide body none
|
||||
document.querySelectorAll('div.header').forEach(el => {
|
||||
el.style.display = 'none';
|
||||
});
|
||||
|
||||
|
||||
// change the header if currently loaded slide has the header div defined
|
||||
// which won't be captured by slidechanged event unless we change slides.
|
||||
let dynamic_header = Reveal.getCurrentSlide().querySelector('div.header p');
|
||||
change_header(dynamic_header, header_text, header_inner_html);
|
||||
|
||||
Reveal.on( 'slidechanged', event => {
|
||||
let dyn_header = event.currentSlide.querySelector('div.header p');
|
||||
change_header(dyn_header, header_text, header_inner_html);
|
||||
});
|
||||
|
||||
/************** header text in title slide if title or ***********************/
|
||||
/************* subtitle is used as header text ***********************/
|
||||
|
||||
var title_text = document.querySelector('.reveal-header .title-text p');
|
||||
if (title_text != null) {
|
||||
title_text.style.visibility = 'hidden';
|
||||
hide_from_title_slide(title_text);
|
||||
};
|
||||
|
||||
/*************** hide header text and logo on title slide ********************/
|
||||
|
||||
var hide_header_text = document.querySelector('.header-text').getAttribute('data-hide-from-titleslide');
|
||||
var hide_header_logo = document.querySelector('.header-logo').getAttribute('data-hide-from-titleslide');
|
||||
|
||||
if (hide_header_text == 'true') {
|
||||
header_text.style.visibility = 'hidden';
|
||||
hide_from_title_slide(header_text);
|
||||
}
|
||||
|
||||
if (hide_header_logo == 'true') {
|
||||
logo_img.style.visibility = 'hidden';
|
||||
hide_from_title_slide(logo_img);
|
||||
}
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
window.addEventListener("load", (event) => {
|
||||
header();
|
||||
});
|
||||
@@ -0,0 +1,93 @@
|
||||
/**
|
||||
* reveal-header
|
||||
* A filter that adds header text and logo.
|
||||
*
|
||||
* MIT License
|
||||
* Copyright (c) 2023 Shafayet Khan Shafee.
|
||||
*/
|
||||
|
||||
function add_sc_sb_title() {
|
||||
|
||||
function get_title() {
|
||||
var h1_arr = [];
|
||||
var h2_arr = [];
|
||||
|
||||
Reveal.getSlides().forEach(el => {
|
||||
if (!el.matches('#title-slide')) {
|
||||
var h1 = el.querySelector('.title-slide h1')?.innerText;
|
||||
var h2 = el.querySelector('.title-slide h2')?.innerText;
|
||||
h1_arr.push(h1);
|
||||
h2_arr.push(h2);
|
||||
};
|
||||
});
|
||||
|
||||
return [h1_arr, h2_arr]
|
||||
};
|
||||
|
||||
function fill_array(ar) {
|
||||
let last_val = ar[0] || " ";
|
||||
for (let i = 1; i < ar.length; i++) {
|
||||
if (typeof ar[i] === 'undefined') {
|
||||
ar[i] = last_val;
|
||||
} else {
|
||||
last_val = ar[i];
|
||||
}
|
||||
}
|
||||
return ar
|
||||
};
|
||||
|
||||
|
||||
if (Reveal.isReady()) {
|
||||
|
||||
if (document.querySelector('div.reveal-header img').getAttribute('src').length == 0) {
|
||||
document.querySelector('div.reveal-header').classList.add('no-logo')
|
||||
}
|
||||
|
||||
var [h1_array, h2_array] = get_title();
|
||||
var filled_h1_array = fill_array(h1_array);
|
||||
var filled_h2_array = fill_array(h2_array);
|
||||
|
||||
Reveal.getSlides().forEach((el, idx) => {
|
||||
if (!el.matches('#title-slide')) {
|
||||
el.setAttribute('data-sc-title', filled_h1_array[(idx - 1)])
|
||||
el.setAttribute('data-sb-title', filled_h2_array[(idx - 1)])
|
||||
}
|
||||
});
|
||||
|
||||
Reveal.on( 'slidechanged', event => {
|
||||
let sp = Reveal.getSlidesElement().querySelector('.stack.present');
|
||||
|
||||
if (sp != null) {
|
||||
let header = document.querySelector("div.reveal-header");
|
||||
|
||||
// handling h1 section title (`.sc-title`)
|
||||
var section_text = event.currentSlide.getAttribute('data-sc-title') || " ";
|
||||
if (event.currentSlide.matches('.title-slide.level1')) {
|
||||
header.querySelector('.sc-title p').innerText = "";
|
||||
} else if (event.currentSlide.matches('.title-slide.level2')) {
|
||||
header.querySelector('.sc-title p').innerText = section_text;
|
||||
} else {
|
||||
header.querySelector('.sc-title p').innerText = section_text;
|
||||
};
|
||||
|
||||
// handling h2 section title (`.sb-title`)
|
||||
var sbsection_text = event.currentSlide.getAttribute('data-sb-title') || " ";
|
||||
if (event.currentSlide.matches('.title-slide.level1')) {
|
||||
header.querySelector('.sb-title p').innerText = "";
|
||||
} else if (event.currentSlide.matches('.title-slide.level2')) {
|
||||
header.querySelector('.sb-title p').innerText = "";
|
||||
} else {
|
||||
header.querySelector('.sb-title p').innerText = sbsection_text;
|
||||
};
|
||||
};
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
window.addEventListener("load", (event) => {
|
||||
add_sc_sb_title();
|
||||
});
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user