准备第7次课

SD/20240326_3_workflowstyle/_extensions/shafayetShafee/reveal-header/_extension.yml

@@ -0,0 +1,8 @@
+title: Reveal-header
+author: Shafayet Khan Shafee
+version: 1.2.6
+quarto-required: ">=1.2.0"
+contributes:
+  filters:
+    - reveal-header.lua
+

SD/20240326_3_workflowstyle/_extensions/shafayetShafee/reveal-header/resources/css/add_header.css

@@ -0,0 +1,67 @@
+/*@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz@8..60&display=swap');*/
+
+
+:root {
+  --header-font-size: max(10px, 1.4vw);
+  --header-font-color: #898E8B;
+  --header-margin: 0px 0px 0px 0px;
+  /*--header-font-family: 'Source Serif 4', serif;*/
+}
+
+.reveal .reveal-header {
+  top: 0;
+  margin: 3.2px 0px 2px 0px;
+  width: 100%;
+  position: fixed;
+  z-index: 5;
+  /*font-family: var(--header-font-family);*/
+}
+
+.reveal .reveal-header p {
+  color: var(--header-font-color);
+  text-align: center;
+  margin: var(--header-margin);
+  font-size: var(--header-font-size);
+}
+
+.reveal-header .sc-title p,
+.reveal-header .sb-title p {
+  font-size: max(10px, 1.45vw);
+  filter: brightness(0.85);
+}
+
+.reveal-header .sc-title p { float: left; margin-left: 0.5vw}
+.reveal-header .sb-title p { float: right; margin-right: 0.5vw}
+.reveal-header.no-logo .sc-title p {margin-left: 6vw}
+
+
+.reveal .header-logo img {
+  margin: var(--header-margin);
+  padding-left: 1vw;
+  padding-top: 5px;
+  height: 100%;
+  width: auto;
+  max-width: max(60px, 10vw);
+  max-height: max(60px, 10vh);
+}
+
+
+/* .reveal .slides { margin-top: 3vh !important;} */
+.inverse-header { color: #c5d7ce !important;}
+
+
+div.slides section:not(.title-slide):not(#title-slide):not(.stack) {
+  padding-top: 1em;
+}
+
+/* On screens that are 600px or less*/
+@media screen and (max-width: 600px) {
+  .reveal .header-logo img {
+    padding-top: 0px;
+    margin: 0px 0px 5px 0px;
+  }
+
+  .reveal-header .sc-title p { margin-left: 1vw; }
+  .reveal-header.no-logo .sc-title p {margin-left: 2vw; }
+  div.reveal.has-logo div.slide-number { font-size: 10px; }
+}

SD/20240326_3_workflowstyle/_extensions/shafayetShafee/reveal-header/resources/css/grid_htext.css

@@ -0,0 +1,50 @@
+div.header-logo { grid-area: logo;}
+
+.no-logo div.header-logo { grid-area: unset !important; }
+
+div.sc-title { grid-area: sc;}
+div.sb-title { grid-area: sb;}
+div.header-text { grid-area: ht;}
+div.reveal.has-logo div.slide-number {
+  grid-area: sn;
+  top: unset !important;
+  right: unset !important;
+  bottom: unset !important;
+  padding: 5px 5px 5px 5px;
+  justify-self: center;
+  /*font-family: var(--header-font-family);*/
+  font-size: 18px;
+}
+
+div.reveal-header {
+  display: grid;
+  grid-template-columns: 0.4fr 0.4fr 2fr 0.4fr 0.3fr;
+  grid-template-areas: "logo sc ht sb sn";
+  column-gap: 10px;
+  align-items: center;
+}
+
+div.reveal-header.no-logo {
+  grid-template-columns: 0.7fr 2fr 0.7fr 0.05fr;
+  grid-template-areas: "sc ht sb sn";
+  margin-top: 1.5vh;
+}
+
+
+/* On screens that are 600px or less*/
+@media screen and (max-width: 600px) {
+
+  div.reveal-header {
+    grid-template-columns: 0.4fr 0.4fr 1fr 0.4fr 0.3fr;
+    grid-template-areas: "logo sc ht sb sn";
+  }
+
+  div.reveal-header.no-logo {
+    grid-template-columns: 0.7fr 1fr 0.7fr 0.05fr;
+    grid-template-areas: "sc ht sb sn";
+  }
+  
+  .reveal-header .sc-title p { margin-left: 1vw; }
+  .reveal-header.no-logo .sc-title p {margin-left: 2vw; }
+  div.reveal.has-logo div.slide-number { font-size: 10px; }
+}

SD/20240326_3_workflowstyle/_extensions/shafayetShafee/reveal-header/resources/css/grid_no_htext.css

@@ -0,0 +1,50 @@
+div.header-logo { grid-area: logo;}
+
+.no-logo div.header-logo { grid-area: unset !important; }
+
+div.sc-title { grid-area: sc;}
+div.header-text { grid-area: ht;}
+div.sb-title { grid-area: sb;}
+div.reveal.has-logo div.slide-number {
+  grid-area: sn;
+  top: unset !important;
+  right: unset !important;
+  bottom: unset !important;
+  padding: 5px 5px 5px 5px;
+  justify-self: center;
+  /*font-family: var(--header-font-family);*/
+  font-size: 18px;
+}
+
+div.reveal-header {
+  display: grid;
+  grid-template-columns: 0.35fr 1.2fr 0.1fr 1.2fr 0.2fr;
+  grid-template-areas: "logo sc ht sb sn";
+  column-gap: 10px;
+  align-items: center;
+}
+
+div.reveal-header.no-logo {
+  grid-template-columns: 1fr 0.1fr 1fr 0.15fr;
+  grid-template-areas: "sc ht sb sn";
+  margin-top: 1.5vh;
+}
+
+
+/* On screens that are 600px or less*/
+@media screen and (max-width: 600px) {
+
+  div.reveal-header {
+    grid-template-columns:  0.2fr 1.2fr 0.1fr 1.2fr 0.4fr;
+    grid-template-areas: "logo sc ht sb sn";
+  }
+
+  div.reveal-header.no-logo {
+    grid-template-columns: 1fr 0.1fr 1fr 0.25fr;
+    grid-template-areas: "sc ht sb sn";
+  }
+  
+  .reveal-header .sc-title p { margin-left: 1vw; }
+  .reveal-header.no-logo .sc-title p {margin-left: 2vw; }
+  div.reveal.has-logo div.slide-number { font-size: 10px; }
+}

SD/20240326_3_workflowstyle/_extensions/shafayetShafee/reveal-header/resources/js/add_header.js

@@ -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();
+});

SD/20240326_3_workflowstyle/_extensions/shafayetShafee/reveal-header/resources/js/sc_sb_title.js

@@ -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();
+});
+
+
+

SD/20240326_3_workflowstyle/_extensions/shafayetShafee/reveal-header/reveal-header.lua

@@ -0,0 +1,117 @@
+--[[
+MIT License
+
+Copyright (c) 2023 Shafayet Khan Shafee
+
+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.
+]]--
+
+
+local function ensureHtmlDeps()
+  quarto.doc.add_html_dependency({
+    name = "reveal-header",
+    version = "1.0.0",
+    scripts = {
+        { path = "resources/js/add_header.js", attribs = {defer = "true"}}
+      },
+    stylesheets = {"resources/css/add_header.css"}
+  })
+end
+
+local function sc_sb_title()
+  quarto.doc.add_html_dependency({
+    name = "sc-sb-title",
+    version = "1.0.0",
+    scripts = {
+        { path = "resources/js/sc_sb_title.js", attribs = {defer = "true"}}
+      }
+  })
+end
+
+local function grid_htext()
+  quarto.doc.add_html_dependency({
+  name = "grid-htext",
+  version = "1.0.0",
+  stylesheets = {"resources/css/grid_htext.css"}
+})
+end
+
+local function grid_no_htext()
+  quarto.doc.add_html_dependency({
+  name = "grid-no-htext",
+  version = "1.0.0",
+  stylesheets = {"resources/css/grid_no_htext.css"}
+})
+end
+
+
+if quarto.doc.is_format('revealjs') then
+  -- Ensuring the dependencies got loaded before proceeding
+  ensureHtmlDeps()
+  function Pandoc(doc)
+    local blocks = doc.blocks
+    local str = pandoc.utils.stringify
+    local meta = doc.meta
+    if meta['sc-sb-title'] then
+      sc_sb_title()
+    end
+    if meta['header'] then
+      grid_htext()
+    else
+      grid_no_htext()
+    end
+    local header_text = meta['header'] and str(meta['header']) or " "
+    local header_para_class = {class = "header-text"}
+    if meta['title-as-header'] then
+      header_text = meta['title']
+      header_para_class = {class = "header-text title-text"}
+    end
+    if meta['subtitle-as-header'] then
+      header_text = meta['subtitle']
+      header_para_class = {class = "header-text title-text"}
+    end
+    -- make divs structure for holding text and logo.
+    local header_logo = meta['header-logo'] and str(meta['header-logo']) or ""
+    local header_img = pandoc.Div(pandoc.Image("", header_logo, ""), {class = "header-logo"})
+    local header_section = pandoc.Div(pandoc.Para(" "), {class = "sc-title"})
+    local header_sbsection = pandoc.Div(pandoc.Para(" "), {class = "sb-title"})
+    local header_para = pandoc.Div(pandoc.Para(header_text), header_para_class)
+    if meta['hide-from-titleSlide'] then
+      local hide = str(meta['hide-from-titleSlide'])
+      if hide == "text" then
+        header_para.attributes['hide-from-titleslide'] = "true"
+      elseif hide == "logo" then
+        header_img.attributes['hide-from-titleslide'] = "true"
+      elseif hide == "all" then
+        header_para.attributes['hide-from-titleslide'] = "true"
+        header_img.attributes['hide-from-titleslide'] = "true"
+      end
+    end
+    local div = pandoc.Div(
+      {
+        header_img,
+        header_section,
+        header_para,
+        header_sbsection
+      }, 
+      {class = 'reveal-header'})
+    table.insert(blocks, div)
+    return doc
+  end
+end