@diplodoc/transform 4.27.1-beta → 4.28.0

package/src/js/term/utils.ts

@@ -112,19 +112,19 @@ export function setDefinitionPosition(
 }
 
 function termOnResize() {
-    const openDefinition = document.getElementsByClassName(openDefinitionClass)[0] as HTMLElement;
+    const openedDefinition = document.getElementsByClassName(openDefinitionClass)[0] as HTMLElement;
 
-    if (!openDefinition) {
+    if (!openedDefinition) {
         return;
     }
-    const termId = openDefinition.getAttribute('term-id') || '';
+    const termId = openedDefinition.getAttribute('term-id') || '';
     const termElement = document.getElementById(termId);
 
     if (!termElement) {
         return;
     }
 
-    setDefinitionPosition(openDefinition, termElement);
+    setDefinitionPosition(openedDefinition, termElement);
 }
 
 function termParentElement(term: HTMLElement | null) {
@@ -137,16 +137,57 @@ function termParentElement(term: HTMLElement | null) {
     return closestScrollableParent || term.parentElement;
 }
 
+export function openDefinition(target: HTMLElement) {
+    const openedDefinition = document.getElementsByClassName(openDefinitionClass)[0] as HTMLElement;
+
+    const termId = target.getAttribute('id');
+    const termKey = target.getAttribute('term-key');
+    let definitionElement = document.getElementById(termKey + '_element');
+
+    if (termKey && !definitionElement) {
+        definitionElement = createDefinitionElement(target);
+    }
+
+    const isSameTerm = openedDefinition && termId === openedDefinition.getAttribute('term-id');
+    if (isSameTerm) {
+        closeDefinition(openedDefinition);
+        return;
+    }
+
+    const isTargetDefinitionContent = target.closest(
+        [Selector.CONTENT.replace(' ', ''), openClass].join('.'),
+    );
+
+    if (openedDefinition && !isTargetDefinitionContent) {
+        closeDefinition(openedDefinition);
+    }
+
+    if (!target.matches(Selector.TITLE) || !definitionElement) {
+        return;
+    }
+
+    setDefinitionId(definitionElement, target);
+    setDefinitonAriaLive(definitionElement, target);
+    setDefinitionPosition(definitionElement, target);
+
+    definitionElement.classList.toggle(openClass);
+
+    trapFocus(definitionElement);
+}
+
 export function closeDefinition(definition: HTMLElement) {
     definition.classList.remove(openClass);
     const termId = definition.getAttribute('term-id') || '';
-    const termParent = termParentElement(document.getElementById(termId));
+    const term = document.getElementById(termId);
+    const termParent = termParentElement(term);
 
     if (!termParent) {
         return;
     }
 
     termParent.removeEventListener('scroll', termOnResize);
+    term?.focus(); // Set focus back to open button after closing popup
+
     isListenerNeeded = true;
 }
 
@@ -167,3 +208,32 @@ function getCoords(elem: HTMLElement) {
 
     return {top: Math.round(top), left: Math.round(left)};
 }
+
+export function trapFocus(element: HTMLElement) {
+    const focusableElements = element.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    );
+    const firstFocusableElement = focusableElements[0] as HTMLElement;
+    const lastFocusableElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+    if (firstFocusableElement) {
+        firstFocusableElement.focus();
+    }
+
+    element.addEventListener('keydown', function (e) {
+        const isTabPressed = e.key === 'Tab' || e.keyCode === 9;
+        if (!isTabPressed) {
+            return;
+        }
+
+        if (e.shiftKey) {
+            if (document.activeElement === firstFocusableElement) {
+                lastFocusableElement.focus();
+                e.preventDefault();
+            }
+        } else if (document.activeElement === lastFocusableElement) {
+            firstFocusableElement.focus();
+            e.preventDefault();
+        }
+    });
+}

package/src/scss/_anchor.scss

@@ -9,11 +9,17 @@
 
             text-align: center;
             font-size: 18px;
-        }
 
-        .yfm-anchor::before {
-            content: '#';
-            opacity: 0;
+            &:focus {
+                &::before {
+                    opacity: 1;
+                }
+            }
+
+            &::before {
+                content: '#';
+                opacity: 0;
+            }
         }
 
         &:hover .yfm-anchor::before {

package/src/scss/_code.scss

@@ -2,22 +2,35 @@
     &-clipboard {
         position: relative;
 
-        &:hover &-button {
-            display: block;
+        &-button {
+            &:hover, &:focus {
+                opacity: 1;
+            }
         }
 
         & > pre {
             border-radius: 10px;
             overflow: hidden;
         }
-    }
 
-    &-clipboard-button {
-        display: none;
-        position: absolute;
-        cursor: pointer;
-        top: 16px;
-        right: 16px;
-        z-index: 1;
+        &-button {
+            position: absolute;
+            top: 16px;
+            right: 16px;
+            z-index: 1;
+            opacity: 0;
+
+            //reset default button style
+            background: none;
+            color: inherit;
+            border: none;
+            padding: 0;
+            font: inherit;
+            cursor: pointer;
+        }
+
+        &-icon {
+            pointer-events: none;
+        }
     }
 }

package/src/transform/plugins/code.ts

@@ -6,39 +6,41 @@ import {generateID} from './utils';
 const wrapInClipboard = (element: string | undefined, id: number) => {
     return `
     <div class="yfm-clipboard">
-    ${element}
-    <svg width="16" height="16" viewBox="0 0 24 24" class="yfm-clipboard-button" data-animation="${id}">
-        <path
-            fill="currentColor"
-            d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
-        />
-        <path
-            stroke="currentColor"
-            fill="transparent"
-            stroke-width="1.5"
-            d="M9.5 13l3 3l5 -5"
-            visibility="hidden"
-        >
-            <animate
-                id="visibileAnimation-${id}"
-                attributeName="visibility"
-                from="hidden"
-                to="visible"
-                dur="0.2s"
-                fill="freeze"
-                begin=""
-            />
-            <animate
-                id="hideAnimation-${id}"
-                attributeName="visibility"
-                from="visible"
-                to="hidden"
-                dur="1s"
-                begin="visibileAnimation-${id}.end+1"
-                fill="freeze"
-            />
-        </path>
-    </svg>
+        ${element}
+        <button class="yfm-clipboard-button">
+            <svg width="16" height="16" viewBox="0 0 24 24" class="yfm-clipboard-icon" data-animation="${id}">
+                <path
+                    fill="currentColor"
+                    d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                />
+                <path
+                    stroke="currentColor"
+                    fill="transparent"
+                    stroke-width="1.5"
+                    d="M9.5 13l3 3l5 -5"
+                    visibility="hidden"
+                >
+                    <animate
+                        id="visibileAnimation-${id}"
+                        attributeName="visibility"
+                        from="hidden"
+                        to="visible"
+                        dur="0.2s"
+                        fill="freeze"
+                        begin=""
+                    />
+                    <animate
+                        id="hideAnimation-${id}"
+                        attributeName="visibility"
+                        from="visible"
+                        to="hidden"
+                        dur="1s"
+                        begin="visibileAnimation-${id}.end+1"
+                        fill="freeze"
+                    />
+                </path>
+            </svg>
+        </button>
     </div>
 `;
 };

package/src/transform/plugins/term/index.ts

@@ -100,6 +100,7 @@ const term: MarkdownItPluginCb = (md, options) => {
                     token.attrSet('class', 'yfm yfm-term_title');
                     token.attrSet('term-key', ':' + termKey);
                     token.attrSet('aria-describedby', ':' + termKey + '_element');
+                    token.attrSet('tabindex', '0');
                     token.attrSet('id', generateID());
                     nodes.push(token);
 

package/src/transform/sanitize.ts

@@ -485,7 +485,7 @@ const defaultCssWhitelist = {
     '--method': true,
 };
 
-const yfmHtmlAttrs = ['note-type', 'term-key'];
+const yfmHtmlAttrs = ['note-type', 'yfm2xliff-explicit', 'term-key'];
 
 const allowedTags = Array.from(
     new Set([...htmlTags, ...svgTags, ...sanitizeHtml.defaults.allowedTags]),
@@ -518,7 +518,7 @@ export const defaultOptions: SanitizeOptions = {
 function sanitizeStyleTags(dom: cheerio.CheerioAPI, cssWhiteList: CssWhiteList) {
     const styleTags = dom('style');
 
-    styleTags.each((_index, element) => {
+    styleTags.each((_index: number, element: cheerio.Element) => {
         const styleText = dom(element).text();
 
         try {