- PDF: WIP

- Activated Discord chat
- CSS: Added image tooltip preview
- CSS: Fixed tooltips position
- Docsify Plugins: Added custom attributes plugin

Author: alexis-

docs/content/css/shared.css

@@ -55,6 +55,8 @@ blockquote.siema div {
 }
 
 dfn {
+	display: inline-block;
+	display: static;
 	border-bottom: 1px dashed;
 	text-decoration: none;
 }
@@ -64,18 +66,19 @@ dfn:hover {
 }
 
 dfn[aria-label]:hover:after {
+	display: block;
 	content: attr(aria-label);
 	line-height: 1.2rem;
 	position: absolute;
 	background-color: #C5F7CA;
 	border: #c0c0c0 1px dotted;
 	padding: 4px 8px 4px 8px;
-    -webkit-transform: translate(-60%, 60%);
+    /*-webkit-transform: translate(-60%, 60%);
        -moz-transform: translate(-60%, 60%);
         -ms-transform: translate(-60%, 60%);
          -o-transform: translate(-60%, 60%);
-            transform: translate(-60%, 60%);
-	width: 300px;
+            transform: translate(-60%, 60%);*/
+	max-width: 300px;
 	z-index: 100;
 	text-transform: none;
 	font-style: normal;
@@ -86,19 +89,32 @@ dfn a {
 	/*cursor: help;*/
 }
 
-img.tooltip-preview:hover:after {
-	content: url(attr(src));
+a[tooltip-preview] {
+	display: inline-block;
+	display: static;
+}
+
+a[tooltip-preview] img {
+	display: none;
+}
+
+a[tooltip-preview]:hover img {
+	display: block;
 	position: absolute;
 	background-color: #C5F7CA;
-	border: #c0c0c0 1px dotted;
-	padding: 4px 8px 4px 8px;
-    -webkit-transform: translate(-60%, 60%);
-       -moz-transform: translate(-60%, 60%);
-        -ms-transform: translate(-60%, 60%);
-         -o-transform: translate(-60%, 60%);
-            transform: translate(-60%, 60%);
-	width: 300px;
+	box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+	padding: 0;
+    /*-webkit-transform: translate(-60%, 20%);
+       -moz-transform: translate(-60%, 20%);
+        -ms-transform: translate(-60%, 20%);
+         -o-transform: translate(-60%, 20%);
+            transform: translate(-60%, 20%);*/
+	max-width: 300px;
+	max-height: 300px;
 	z-index: 100;
+    /*bottom: 125%;
+    left: 50%;
+    margin-left: -150px;*/
 }
 
 video {

docs/docsify-plugins/custom-attributes/custom-attributes.js

@@ -0,0 +1,34 @@
+function install(hook) {
+  hook.doneEach(_ => {
+    let elms = [].slice.call(document.querySelectorAll('.markdown-section img:not(.emoji), a'));
+    
+    elms.forEach(elm => {
+      let { str, config } = getAndRemoveConfig(elm.title);
+      
+      for (key in config)
+		  elm.setAttribute(key, config[key]);
+	  
+	  if (config.hasOwnProperty('title') == false)
+		  elm.title = str;
+    });
+  })
+}
+
+function getAndRemoveConfig(str = '') {
+  const config = {}
+
+  if (str) {
+    str = str
+      .replace(/^'/, '')
+      .replace(/'$/, '')
+      .replace(/(?:^|\s)@([\w-]+)(?:="([^"]+)")?/g, (m, key, value) => {
+        config[key] = (value && value.replace(/"/g, '')) || true
+        return ''
+      })
+      .trim()
+  }
+
+  return { str, config }
+}
+
+$docsify.plugins = [].concat(install, $docsify.plugins);

docs/docsify-plugins/zoom-to-video/zoom-to-video.js

@@ -1,5 +1,3 @@
-//import { getAndRemoveConfig, showVideo } from './core'
-
 const matchesSelector = Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.msMatchesSelector;
 
 const defaultOptions = {
@@ -10,19 +8,24 @@ const defaultOptions = {
 
 function install(hook) {
   hook.doneEach(_ => {
-    let elms = [].slice.call(document.querySelectorAll('.markdown-section img:not(.emoji)'))
-                 .filter(elm => elm.title.includes("@z2v") && matchesSelector.call(elm, 'a img') === false);
+    let imgElms = [].slice.call(document.querySelectorAll('.markdown-section img[z2v]:not(.emoji)'))
+                    .filter(elm => matchesSelector.call(elm, 'a img') === false);
 
-    elms.forEach(elm => {
-      let { str, config } = getAndRemoveConfig(elm.title);
-      
-      elm.title = str;
+    imgElms.forEach(elm => {
       elm.classList.add('z2v-img');
 
-	  let imgContainer = addVideoInfo(elm);
+	    let imgContainer = addVideoInfo(elm);
 
       imgContainer.onclick = function() {
-        showVideo(imgContainer, config['z2v']);
+        showVideo(elm.getAttribute('z2v'));
+      };
+    });
+    
+    let aElms = [].slice.call(document.querySelectorAll('.markdown-section a[z2v]'));
+    
+    aElms.forEach(elm => {
+      elm.onclick = function() {
+        showVideo(elm.getAttribute('z2v'));
       };
     });
   })
@@ -71,7 +74,7 @@ function onImageLoaded(elm, imgContainer, imgSubtitle) {
   imgContainer.insertBefore(elm, imgContainer.firstChild);
 }
 
-function showVideo(elm, baseLink) {
+function showVideo(baseLink) {
     var overlay = document.createElement('div');
     overlay.className = 'z2v-overlay';
 
@@ -122,21 +125,4 @@ function showVideo(elm, baseLink) {
     overlay.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
 };
 
-function getAndRemoveConfig(str = '') {
-  const config = {}
-
-  if (str) {
-    str = str
-      .replace(/^'/, '')
-      .replace(/'$/, '')
-      .replace(/(?:^|\s)@([\w-]+)=?([\w-./]+)?/g, (m, key, value) => {
-        config[key] = (value && value.replace(/"/g, '')) || true
-        return ''
-      })
-      .trim()
-  }
-
-  return { str, config }
-}
-
 $docsify.plugins = [].concat(install, $docsify.plugins);