Merge pull request #19 from shafayetShafee/linkify-logo

Linkify logo
shafayetShafee · Jan 13, 2024 · 5ff1a31 · 5ff1a31
2 parents 55ce00c + a53b945
commit 5ff1a31
Show file tree

Hide file tree

Showing 14 changed files with 619 additions and 49 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Shafayet Khan Shafee
+Copyright (c) 2023-2024 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

diff --git a/README.md b/README.md
@@ -6,6 +6,8 @@ A very simple Quarto filter extension for [`revealjs`](https://quarto.org/docs/p
 
 - Another YAML option to add a logo on top-left side of each slides. So by using this filter, it is possible to use two logos for each slides (One by using the default [`logo`](https://quarto.org/docs/presentations/revealjs/#footer-logo) option which adds the logo on bottom-right corner and another one by using `header-logo` option provided by this filter.)
 
+- Provides YAML option `header-logo-link` and `footer-logo-link` to hyperlink the header logo and footer logo respectively.
+
 View the Demos of using this filter,
 
 - [`live demo 01`](https://shafayetshafee.github.io/reveal-header/example.html) 
@@ -26,13 +28,15 @@ If you're using version control, you will want to check in this directory.
 
 This filter provides the following options,
 
-| Option                 | Description                                                                                                                                                                                                  |
-|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `header`               | A simple header text to appear in the top part of the each slide. `header` can be overridden by `title-as-header` or `subtitle-as-header` or slide specific header.                                          |
-| `header-logo`          | A path for logo image which will appear on the top-left corner of each slide.                                                                                                                                |
-| `sc-sb-title`          | `true` or `false`. Specifies whether level1 (`h1`) and level2 (`h2`) slide titles should appear in the slide header automatically when `slide-level` is 2 or 3.                                              |
-| `title-as-header`      | `true` or `false`. Specifies whether the Slide title should appear as the slide header automatically. Will override the `header` text.                                                                       |
-| `subtitle-as-header`   | `true` or `false`. Specifies whether the Slide subtitle should appear in the slide header automatically. Will override the `title-as-header`.                                                                |
+| Option | Description |
+|---|---|
+| `header` | A simple header text to appear in the top part of the each slide. `header` can be overridden by `title-as-header` or `subtitle-as-header` or slide specific header. |
+| `header-logo` | A path for logo image which will appear on the top-left corner of each slide. |
+| `header-logo-link` | A link in quotes for the header logo. |
+| `footer-logo-link` | A link in quotes for the footer logo. |
+| `sc-sb-title` | `true` or `false`. Specifies whether level1 (`h1`) and level2 (`h2`) slide titles should appear in the slide header automatically when `slide-level` is 2 or 3. |
+| `title-as-header` | `true` or `false`. Specifies whether the Slide title should appear as the slide header automatically. Will override the `header` text. |
+| `subtitle-as-header` | `true` or `false`. Specifies whether the Slide subtitle should appear in the slide header automatically. Will override the `title-as-header`. |
 | `hide-from-titleSlide` | Use `"text"` to remove the header text from title Slide, `"logo"` to remove the logo from top-left corner of header on the title Slide, `"all"` to remove both text and logo from the header on title Slide. |
 
 Therefore an example could be,

diff --git a/_extensions/reveal-header/_extension.yml b/_extensions/reveal-header/_extension.yml
@@ -1,6 +1,6 @@
 title: Reveal-header
 author: Shafayet Khan Shafee
-version: 1.2.6
+version: 1.2.7
 quarto-required: ">=1.2.0"
 contributes:
   filters:

diff --git a/_extensions/reveal-header/resources/js/add_header.js b/_extensions/reveal-header/resources/js/add_header.js
@@ -3,7 +3,7 @@
  * A filter that adds header text and logo.
  * 
  * MIT License
- * Copyright (c) 2023 Shafayet Khan Shafee.
+ * Copyright (c) 2023-2024 Shafayet Khan Shafee.
  */
 
 function header() {
@@ -22,6 +22,15 @@ function header() {
       };
     };
   };
+
+  function linkify_logo(logo, href) {
+    const logo_cloned = logo.cloneNode(true);
+    const link = document.createElement('a');
+    link.href = href;
+    link.target = '_blank';
+    link.appendChild(logo_cloned);
+    logo.replaceWith(link);
+  };
 
   // add the class inverse-header for slide with has-dark-background class
   // otherwise remove it.
@@ -55,13 +64,40 @@ function header() {
           element.style.visibility = 'visible';
         }
       });
-    };
+  };
+
+  function get_clean_attrs(elem, attrName) {
+    let attrVal = elem.getAttribute(attrName);
+    if (attrVal != null) {
+     elem.removeAttribute(attrName); 
+    }
+    return attrVal;
+  };
 
 
   if (Reveal.isReady()) {
 
     add_header();
 
+    /*************** linkifying the header and footer logo ********************/
+    const header_logo = document.querySelector('div.header-logo');
+    if (header_logo != null) {
+      const header_logo_link = get_clean_attrs(header_logo, 'data-header-logo-link');
+      const footer_logo_link = get_clean_attrs(header_logo, 'data-footer-logo-link');
+
+      if (header_logo_link != null) {
+        const header_logo_img = document.querySelector('div.header-logo img');
+        linkify_logo(header_logo_img, header_logo_link);
+      };
+
+      if (footer_logo_link != null) {
+        const footer_logo_img = document.querySelector('img.slide-logo');
+        footer_logo_img.setAttribute('style', "z-index:99;");
+        linkify_logo(footer_logo_img, footer_logo_link);
+      };
+    };
+    /****************************** END ***************************************/
+
     if (document.querySelector('div.reveal.has-logo') != null) {
       var slide_number = document.querySelector('div.slide-number');
       var header = document.querySelector("div.reveal-header");

diff --git a/_extensions/reveal-header/resources/js/sc_sb_title.js b/_extensions/reveal-header/resources/js/sc_sb_title.js
@@ -3,7 +3,7 @@
  * A filter that adds header text and logo.
  * 
  * MIT License
- * Copyright (c) 2023 Shafayet Khan Shafee.
+ * Copyright (c) 2023-2024 Shafayet Khan Shafee.
  */
 
  function add_sc_sb_title() {

diff --git a/_extensions/reveal-header/reveal-header.lua b/_extensions/reveal-header/reveal-header.lua
@@ -88,7 +88,18 @@ if quarto.doc.is_format('revealjs') then
     end
     -- make divs structure for holding text and logo.
     local header_logo = meta['header-logo'] and str(meta['header-logo']) or ""
+    local header_logo_link = meta['header-logo-link'] and str(meta['header-logo-link']) or ""
+    local footer_logo_link = meta['footer-logo-link'] and str(meta['footer-logo-link']) or ""
     local header_img = pandoc.Div(pandoc.Image("", header_logo, ""), {class = "header-logo"})
+
+    if header_logo_link ~= "" then
+      header_img.attributes['header-logo-link'] = header_logo_link
+    end
+
+    if footer_logo_link ~= "" then
+      header_img.attributes['footer-logo-link'] = footer_logo_link
+    end
+
     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)

diff --git a/docs/example.html b/docs/example.html
diff --git a/docs/example_all.html b/docs/example_all.html
diff --git a/docs/example_hide_header_text.html b/docs/example_hide_header_text.html
diff --git a/docs/example_section_title.html b/docs/example_section_title.html
diff --git a/example.qmd b/example.qmd
@@ -9,8 +9,10 @@ format:
     slide-number: true
     logo: images/quarto.png
     footer: <https://quarto.org>
+    footer-logo-link: "https://quarto.org"
     header: Quarto Presentations with beautiful slide decks made by RevealJs
     header-logo: images/reveal_logo.svg
+    header-logo-link: "https://revealjs.com"
 filters:
   - reveal-header
 execute: 

diff --git a/example_all.qmd b/example_all.qmd
@@ -8,9 +8,11 @@ format:
   revealjs:
     slide-number: true
     logo: images/quarto.png
+    footer-logo-link: "https://quarto.org"
     sc-sb-title: true
     header: Quarto Presentations with beautiful slide decks made by RevealJs
     header-logo: images/reveal_logo.svg
+    header-logo-link: "https://revealjs.com"
     subtitle-as-header: true
     footer: <https://quarto.org>
 filters: 

diff --git a/example_hide_header_text.qmd b/example_hide_header_text.qmd
@@ -8,9 +8,11 @@ format:
   revealjs:
     slide-number: true
     logo: images/quarto.png
+    footer-logo-link: "https://quarto.org"
     footer: <https://quarto.org>
     header: Quarto Presentations with beautiful slide decks made by RevealJs
     header-logo: images/reveal_logo.svg
+    header-logo-link: "https://revealjs.com"
     hide-from-titleSlide: "text"
 filters:
   - reveal-header

diff --git a/example_section_title.qmd b/example_section_title.qmd
@@ -9,6 +9,7 @@ format:
     slide-number: true
     sc-sb-title: true
     logo: images/quarto.png
+    footer-logo-link: "https://quarto.org"
 filters: 
   - reveal-header
 slide-level: 3