Merge pull request #15 from PLAYG0N/feature/custom-selector

Feature/custom selector

.github/workflows/mkdocs-pages.yml

@@ -28,6 +28,7 @@ jobs:
           path: .cache
           restore-keys: |
             mkdocs-material-
+      - run: curl -fsSL https://d2lang.com/install.sh | sh -s --
       - run: pip install .
       - run: pip install -r requirements.txt
       - run: mkdocs gh-deploy --force

docs/D2/D2imported.md

@@ -0,0 +1,5 @@
+# Imported D2 Diagram
+
+This was made with an image of the d2 diagram.
+
+![Flow](./assets/diagram.d2)

docs/D2/assets/diagram.d2

@@ -0,0 +1,22 @@
+shape: sequence_diagram
+
+mkdocs: MkDocs {
+  link: https://www.mkdocs.org
+}
+plugin: mkdocs-d2-plugin {
+  link: https://github.com/landmaj/mkdocs-d2-plugin
+}
+d2: D2 {
+  link: https://d2lang.com
+}
+
+mkdocs -> mkdocs: build/serve
+mkdocs -> plugin: diagram definition
+
+subprocess: {
+  link: https://docs.python.org/3/library/subprocess.html
+  plugin -> d2.sub: compile
+  d2.sub -> plugin: svg
+}
+
+plugin -> mkdocs: svg

docs/D2/d2diagram.md

@@ -0,0 +1,11 @@
+# D2 Diagram
+
+This was made with a fenced code block.
+
+```d2
+shape: sequence_diagram
+Alice -> John: Hello John, how are you?
+Alice -> John.ack: John, can you hear me?
+John.ack -> Alice: Hi Alice, I can hear you!
+John -> Alice: I feel great!
+```

mkdocs.yml

@@ -55,3 +55,4 @@ plugins:
       key: "alt"
       exclude:
         - Mermaid/excluded.md
+  - d2

mkdocs_panzoom_plugin/custom/zoompan.js

@@ -6,7 +6,7 @@ function minimize(e,box,max,min){
 }
 
 function escapeFullScreen(e,box,max,min) {
-  console.log(e,box,);
+  // console.log(e,box,);
 
   if (e.keyCode == 27){
     minimize(e,box,max,min);
@@ -60,16 +60,31 @@ function add_buttons(box, instance) {
 
 function activate_zoom_pan() {
   boxes = document.querySelectorAll(".panzoom-box");
+
+  meta_tag = document.querySelector('meta[name="panzoom-data"]').content;
+  selectors = JSON.parse(meta_tag).selectors;
+
+
   // console.log(boxes);
   boxes.forEach((box) => {
-    elem = box.querySelector(".mermaid");
 
     key = box.dataset.key;
+
+    selectors.every((selector) => {
+      elem = box.querySelector(selector);
+
+      if (elem != undefined) {
+        return false;
+      }
+      return true;
+    })
+    // elem = box.querySelector(".mermaid");
+
 
-    // check if it is an image
-    if (elem == undefined) {
-      elem = box.querySelector("img");
-    }
+    // // check if it is an image
+    // if (elem == undefined) {
+    //   elem = box.querySelector("img");
+    // }
 
     if (elem == undefined) {
       return;

mkdocs_panzoom_plugin/html_page.py

@@ -1,17 +1,17 @@
 import re
 import logging
+import json
 from bs4 import BeautifulSoup
 
 from mkdocs_panzoom_plugin import panzoom_box
 from mkdocs_panzoom_plugin.panzoom_box import *
 
-#from mkdocs_panzoom_plugin.panzoom_box import PanZoomBox
-
 class HTMLPage:
     def __init__(self, content:str, config, page):
         self.soup = BeautifulSoup(content,"html.parser")
         self.config = config
         self.page = page
+        self.default_selectors = {".mermaid", ".d2"}
         self.containers = self._find_elements()
 
 
@@ -35,13 +35,44 @@ def add_panzoom(self):
         self.soup.body.append(create_js_script(self.soup,self.page))
         self.soup.body.append(create_js_script_plugin(self.soup,self.page))
 
+        self._add_data_for_js()
+
+    def _add_data_for_js(self):
+        meta_tag = self.soup.new_tag("meta")
+        meta_tag["name"] = "panzoom-data"
+        meta_tag["content"] = json.dumps({
+            "selectors": self.config.get("selectors")
+            })
+        self.soup.head.append(meta_tag)
+
     def _find_elements(self):
         output = []
+
+        # get final set of selectors
+        included_selectors = set(self.config.get("include_selectors", [])) | set()
+        excluded_selectors = set(self.config.get("exclude_selectors", [])) | set()
+
+        final_selectors = self.default_selectors.difference(excluded_selectors)
+        final_selectors.update(included_selectors) 
 
         if self.config.get("images",False):
+            final_selectors.add("img")
+
+
+        if not self.config.get("mermaid",False):
+            final_selectors.remove(".mermaid")
+
+
+        self.config.update({"selectors": list(final_selectors)})
 
-            output += self.soup.findAll("img")
+        for selector in self.default_selectors:
+            if selector.startswith("."):
+                output += self.soup.findAll(class_=selector.lstrip("."))
+            elif selector.startswith("#"):
+                id_element = self.soup.find(id=selector.lstrip("#"))
+                if not id_element is None:
+                    output.append(id_element)
+            else:
+                output += self.soup.findAll(selector)
 
-        if self.config.get("mermaid",False):
-            output += self.soup.findAll(class_="mermaid")
         return output

mkdocs_panzoom_plugin/plugin.py

@@ -22,6 +22,8 @@ class PanZoomPlugin(BasePlugin):
         ("key", config_options.Type(str, default="alt")),
         ("include", config_options.Type(list, default=["*"])),
         ("exclude", config_options.Type(list, default=[])),
+        ("include_selectors", config_options.Type(list, default=[])),
+        ("exclude_selectors", config_options.Type(list, default=[])),
     )
 
     def on_config(self, config, **kwargs):

requirements.txt

@@ -4,6 +4,9 @@ mkdocs>=1.1.2
 # Material theme
 mkdocs-material>=8.1.7
 
+# d2 diagram plugin
+mkdocs-d2-plugin
+D2>=0.6.3
 # Panzoom for mermaid and images
 # plugin gets built directly
 # mkdocs-panzoom-plugin

setup.py

@@ -5,7 +5,7 @@
 
 setup(
     name="mkdocs-panzoom-plugin",
-    version="0.1.1",
+    version="0.1.2",
         description="MkDocs Plugin to enable pan & zoom on images and mermaid diagrams",
         long_description=long_description,
         long_description_content_type="text/markdown",