@diplodoc/transform 4.70.4 → 4.72.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/_yfm-only.css +4 -4
- package/dist/css/_yfm-only.css.map +3 -3
- package/dist/css/_yfm-only.min.css +1 -1
- package/dist/css/_yfm-only.min.css.map +3 -3
- package/dist/css/base.css.map +1 -1
- package/dist/css/base.min.css.map +1 -1
- package/dist/css/print.css.map +1 -1
- package/dist/css/yfm.css +4 -4
- package/dist/css/yfm.css.map +3 -3
- package/dist/css/yfm.min.css +1 -1
- package/dist/css/yfm.min.css.map +3 -3
- package/dist/js/base.js +396 -215
- package/dist/js/base.js.map +4 -4
- package/dist/js/base.min.js +1 -6
- package/dist/js/base.min.js.map +4 -4
- package/dist/js/yfm.js +429 -228
- package/dist/js/yfm.js.map +4 -4
- package/dist/js/yfm.min.js +1 -6
- package/dist/js/yfm.min.js.map +4 -4
- package/dist/scss/{_inline-code.scss → _tooltip.scss} +1 -1
- package/dist/scss/_yfm-only.scss +1 -1
- package/lib/plugins/anchors/index.js +1 -1
- package/lib/plugins/anchors/index.js.map +1 -1
- package/lib/plugins/images/index.js +7 -0
- package/lib/plugins/images/index.js.map +1 -1
- package/lib/plugins/term/termDefinitions.js +54 -27
- package/lib/plugins/term/termDefinitions.js.map +1 -1
- package/lib/typings.d.ts +10 -0
- package/package.json +2 -2
- package/src/js/anchor.ts +27 -3
- package/src/js/{inline-code/constant.ts → constant.ts} +1 -9
- package/src/js/inline-code/index.ts +24 -42
- package/src/js/tooltip/constant.ts +25 -0
- package/src/js/tooltip/index.ts +2 -0
- package/src/js/tooltip/tooltip.ts +263 -0
- package/src/js/tooltip/types.ts +59 -0
- package/src/js/tooltip/utils.ts +247 -0
- package/src/scss/{_inline-code.scss → _tooltip.scss} +1 -1
- package/src/scss/_yfm-only.scss +1 -1
- package/src/transform/plugins/anchors/index.ts +1 -1
- package/src/transform/plugins/images/index.ts +8 -0
- package/src/transform/plugins/term/termDefinitions.ts +71 -33
- package/src/transform/typings.ts +10 -0
- package/src/js/inline-code/utils.ts +0 -217
package/dist/js/yfm.js
CHANGED
|
@@ -493,26 +493,365 @@
|
|
|
493
493
|
});
|
|
494
494
|
}
|
|
495
495
|
|
|
496
|
-
// src/js/
|
|
497
|
-
var
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
496
|
+
// src/js/tooltip/constant.ts
|
|
497
|
+
var PAGE_CONTAINER_SELECTOR = ".dc-doc-page__content";
|
|
498
|
+
var TOOLTIP_BASE_CLASS = "yfm yfm-tooltip";
|
|
499
|
+
var TOOLTIP_OPEN_CLASS = "open";
|
|
500
|
+
var TOOLTIP_DATA_ATTR = "data-tooltip-id";
|
|
501
|
+
var DEFAULT_OFFSET_VALUES = { mainAxis: 5 };
|
|
502
|
+
var OPPOSITE_SIDES = {
|
|
503
|
+
top: "bottom",
|
|
504
|
+
bottom: "top",
|
|
505
|
+
left: "right",
|
|
506
|
+
right: "left"
|
|
507
|
+
};
|
|
508
|
+
var DEFAULT_SIDE_OBJECT = {
|
|
509
|
+
top: 0,
|
|
510
|
+
bottom: 0,
|
|
511
|
+
left: 0,
|
|
512
|
+
right: 0
|
|
513
|
+
};
|
|
514
|
+
|
|
515
|
+
// src/js/tooltip/utils.ts
|
|
516
|
+
function isVerticalSide(side) {
|
|
517
|
+
return side === "top" || side === "bottom";
|
|
518
|
+
}
|
|
519
|
+
function createSideObject(value = 0) {
|
|
520
|
+
if (typeof value === "number") {
|
|
521
|
+
return { top: value, bottom: value, left: value, right: value };
|
|
522
|
+
}
|
|
523
|
+
return { ...DEFAULT_SIDE_OBJECT, ...value };
|
|
524
|
+
}
|
|
525
|
+
function parsePlacement(placement) {
|
|
526
|
+
const [side, alignment] = placement.split("-");
|
|
527
|
+
return { side, alignment };
|
|
528
|
+
}
|
|
529
|
+
function getOppositeSide(side) {
|
|
530
|
+
return OPPOSITE_SIDES[side];
|
|
531
|
+
}
|
|
532
|
+
function flipPlacement(placement) {
|
|
533
|
+
const { side, alignment } = parsePlacement(placement);
|
|
534
|
+
const opposite = getOppositeSide(side);
|
|
535
|
+
return alignment ? `${opposite}-${alignment}` : opposite;
|
|
536
|
+
}
|
|
537
|
+
function getOverflow(tooltip3, coords, viewport) {
|
|
538
|
+
const rect = updateRect(tooltip3, { top: coords.y, left: coords.x });
|
|
539
|
+
return detectOverflow(viewport, rect, 5);
|
|
540
|
+
}
|
|
541
|
+
function shouldFlip(overflow, flippedOverflow, side) {
|
|
542
|
+
const opposite = getOppositeSide(side);
|
|
543
|
+
return overflow[side] > 0 && flippedOverflow[opposite] < overflow[side];
|
|
544
|
+
}
|
|
545
|
+
function computePosition(reference, tooltip3, viewport, placement, offset, isRtl, flip = true) {
|
|
546
|
+
const coords = computeCoordsFromPlacement(reference, tooltip3, offset, placement, isRtl);
|
|
547
|
+
if (!flip) {
|
|
548
|
+
return { coords, placement };
|
|
549
|
+
}
|
|
550
|
+
const overflow = getOverflow(tooltip3, coords, viewport);
|
|
551
|
+
const { side } = parsePlacement(placement);
|
|
552
|
+
if (overflow[side] <= 0) {
|
|
553
|
+
return { coords, placement };
|
|
554
|
+
}
|
|
555
|
+
const flipped = flipPlacement(placement);
|
|
556
|
+
const flippedCoords = computeCoordsFromPlacement(reference, tooltip3, offset, flipped, isRtl);
|
|
557
|
+
const flippedOverflow = getOverflow(tooltip3, flippedCoords, viewport);
|
|
558
|
+
if (shouldFlip(overflow, flippedOverflow, side)) {
|
|
559
|
+
return { coords: flippedCoords, placement: flipped };
|
|
560
|
+
}
|
|
561
|
+
return { coords, placement };
|
|
562
|
+
}
|
|
563
|
+
function generateId() {
|
|
564
|
+
const random = Math.random().toString(36).substring(2, 6);
|
|
565
|
+
const now = Date.now().toString(36);
|
|
566
|
+
return `${random}${now}`;
|
|
567
|
+
}
|
|
568
|
+
function createRect(params) {
|
|
569
|
+
return {
|
|
570
|
+
...params,
|
|
571
|
+
right: params.left + params.width,
|
|
572
|
+
bottom: params.top + params.height
|
|
573
|
+
};
|
|
574
|
+
}
|
|
575
|
+
function updateRect(rect, params) {
|
|
576
|
+
var _a, _b, _c, _d;
|
|
577
|
+
return createRect({
|
|
578
|
+
top: (_a = params.top) != null ? _a : rect.top,
|
|
579
|
+
left: (_b = params.left) != null ? _b : rect.left,
|
|
580
|
+
width: (_c = params.width) != null ? _c : rect.width,
|
|
581
|
+
height: (_d = params.height) != null ? _d : rect.height
|
|
582
|
+
});
|
|
583
|
+
}
|
|
584
|
+
function getViewportRect() {
|
|
585
|
+
const { documentElement, body } = document;
|
|
586
|
+
const scrollTop = window.scrollY || documentElement.scrollTop || body.scrollTop;
|
|
587
|
+
const scrollLeft = window.scrollX || documentElement.scrollLeft || body.scrollLeft;
|
|
588
|
+
const clientTop = documentElement.clientTop || body.clientTop || 0;
|
|
589
|
+
const clientLeft = documentElement.clientLeft || body.clientLeft || 0;
|
|
590
|
+
return createRect({
|
|
591
|
+
top: Math.round(scrollTop - clientTop),
|
|
592
|
+
left: Math.round(scrollLeft - clientLeft),
|
|
593
|
+
width: document.body.clientWidth,
|
|
594
|
+
height: document.body.clientHeight
|
|
595
|
+
});
|
|
596
|
+
}
|
|
597
|
+
function getElementRect(element) {
|
|
598
|
+
const viewport = getViewportRect();
|
|
599
|
+
const box = element.getBoundingClientRect();
|
|
600
|
+
return createRect({
|
|
601
|
+
top: Math.round(box.top + viewport.top),
|
|
602
|
+
left: Math.round(box.left + viewport.left),
|
|
603
|
+
width: box.width,
|
|
604
|
+
height: box.height
|
|
605
|
+
});
|
|
606
|
+
}
|
|
607
|
+
function computeAxisOffset(offset, side, isRtl) {
|
|
608
|
+
const { mainAxis = 0, crossAxis = 0 } = offset;
|
|
609
|
+
const isVertical = isVerticalSide(side);
|
|
610
|
+
const mainDirection = side === "top" || side === "left" ? -1 : 1;
|
|
611
|
+
const crossDirection = isRtl && isVertical ? -1 : 1;
|
|
612
|
+
const mainOffset = mainAxis * mainDirection;
|
|
613
|
+
const crossOffset = crossAxis * crossDirection;
|
|
614
|
+
if (isVertical) {
|
|
615
|
+
return { x: crossOffset, y: mainOffset };
|
|
616
|
+
}
|
|
617
|
+
return { x: mainOffset, y: crossOffset };
|
|
618
|
+
}
|
|
619
|
+
function computeCoordsFromPlacement(reference, tooltip3, offset, placement, isRtl) {
|
|
620
|
+
const { side, alignment } = parsePlacement(placement);
|
|
621
|
+
const isVertical = isVerticalSide(side);
|
|
622
|
+
const alignmentAxis = isVertical ? "x" : "y";
|
|
623
|
+
const alignLength = alignmentAxis === "y" ? "height" : "width";
|
|
624
|
+
const centerX = reference.left + reference.width / 2 - tooltip3.width / 2;
|
|
625
|
+
const centerY = reference.top + reference.height / 2 - tooltip3.height / 2;
|
|
626
|
+
const alignmentOffset = reference[alignLength] / 2 - tooltip3[alignLength] / 2;
|
|
627
|
+
const coords = { x: reference.left, y: reference.top };
|
|
628
|
+
switch (side) {
|
|
629
|
+
case "top": {
|
|
630
|
+
coords.x = centerX;
|
|
631
|
+
coords.y = reference.top - tooltip3.height;
|
|
632
|
+
break;
|
|
633
|
+
}
|
|
634
|
+
case "bottom": {
|
|
635
|
+
coords.x = centerX;
|
|
636
|
+
coords.y = reference.top + reference.height;
|
|
637
|
+
break;
|
|
638
|
+
}
|
|
639
|
+
case "right": {
|
|
640
|
+
coords.x = reference.left + reference.width;
|
|
641
|
+
coords.y = centerY;
|
|
642
|
+
break;
|
|
643
|
+
}
|
|
644
|
+
case "left": {
|
|
645
|
+
coords.x = reference.left - tooltip3.width;
|
|
646
|
+
coords.y = centerY;
|
|
647
|
+
break;
|
|
503
648
|
}
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
649
|
+
}
|
|
650
|
+
switch (alignment) {
|
|
651
|
+
case "start": {
|
|
652
|
+
coords[alignmentAxis] -= alignmentOffset * (isRtl && isVertical ? -1 : 1);
|
|
653
|
+
break;
|
|
654
|
+
}
|
|
655
|
+
case "end": {
|
|
656
|
+
coords[alignmentAxis] += alignmentOffset * (isRtl && isVertical ? -1 : 1);
|
|
657
|
+
break;
|
|
658
|
+
}
|
|
659
|
+
}
|
|
660
|
+
const axisOffset = computeAxisOffset(offset, side, isRtl);
|
|
661
|
+
coords.x += axisOffset.x;
|
|
662
|
+
coords.y += axisOffset.y;
|
|
663
|
+
return coords;
|
|
664
|
+
}
|
|
665
|
+
function convertToRelativeToOffsetParentRect(rect, offsetParent) {
|
|
666
|
+
const offsetRect = getElementRect(offsetParent);
|
|
667
|
+
return createRect({
|
|
668
|
+
top: rect.top - offsetRect.top + offsetParent.offsetTop,
|
|
669
|
+
left: rect.left - offsetRect.left + offsetParent.offsetLeft,
|
|
670
|
+
width: rect.width,
|
|
671
|
+
height: rect.height
|
|
507
672
|
});
|
|
508
673
|
}
|
|
674
|
+
function detectOverflow(boundary, element, padding = 0) {
|
|
675
|
+
const { top, bottom, left, right } = createSideObject(padding);
|
|
676
|
+
return {
|
|
677
|
+
top: boundary.top - element.top + top,
|
|
678
|
+
bottom: element.bottom - boundary.bottom + bottom,
|
|
679
|
+
left: boundary.left - element.left + left,
|
|
680
|
+
right: element.right - boundary.right + right
|
|
681
|
+
};
|
|
682
|
+
}
|
|
509
683
|
|
|
510
|
-
// src/js/
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
684
|
+
// src/js/tooltip/tooltip.ts
|
|
685
|
+
function createTooltipFactory(options = {}) {
|
|
686
|
+
const { closeDelay = 1e3, additionalClassName } = options;
|
|
687
|
+
let initialized = false;
|
|
688
|
+
const state = {
|
|
689
|
+
currentId: null,
|
|
690
|
+
timer: null,
|
|
691
|
+
unsubscribe: null
|
|
692
|
+
};
|
|
693
|
+
const getActiveTooltip = () => {
|
|
694
|
+
if (!state.currentId) {
|
|
695
|
+
return null;
|
|
696
|
+
}
|
|
697
|
+
return document.getElementById(state.currentId);
|
|
698
|
+
};
|
|
699
|
+
const getActiveReference = () => {
|
|
700
|
+
if (!state.currentId) {
|
|
701
|
+
return null;
|
|
702
|
+
}
|
|
703
|
+
return getReferenceByTooltipId(state.currentId);
|
|
704
|
+
};
|
|
705
|
+
const hide = () => {
|
|
706
|
+
const tooltip3 = getActiveTooltip();
|
|
707
|
+
if (state.timer) {
|
|
708
|
+
clearTimeout(state.timer);
|
|
709
|
+
state.timer = null;
|
|
710
|
+
}
|
|
711
|
+
if (state.unsubscribe) {
|
|
712
|
+
state.unsubscribe();
|
|
713
|
+
state.unsubscribe = null;
|
|
714
|
+
}
|
|
715
|
+
if (tooltip3) {
|
|
716
|
+
tooltip3.classList.remove(TOOLTIP_OPEN_CLASS);
|
|
717
|
+
detachTooltip(tooltip3);
|
|
718
|
+
state.currentId = null;
|
|
719
|
+
}
|
|
720
|
+
};
|
|
721
|
+
const show = (reference, text) => {
|
|
722
|
+
hide();
|
|
723
|
+
const tooltip3 = createTooltipElement({ text, className: additionalClassName });
|
|
724
|
+
const update = updateTooltipPosition.bind(null, options, reference, tooltip3);
|
|
725
|
+
state.currentId = tooltip3.id;
|
|
726
|
+
attachTooltip(tooltip3, reference);
|
|
727
|
+
state.unsubscribe = subscribeToScroll(reference, update);
|
|
728
|
+
tooltip3.classList.add(TOOLTIP_OPEN_CLASS);
|
|
729
|
+
update();
|
|
730
|
+
if (closeDelay > 0) {
|
|
731
|
+
state.timer = setTimeout(hide, closeDelay);
|
|
732
|
+
}
|
|
733
|
+
};
|
|
734
|
+
const handleUpdate = () => {
|
|
735
|
+
const activeTooltip = getActiveTooltip();
|
|
736
|
+
const activeReference = getActiveReference();
|
|
737
|
+
if (activeTooltip && !activeReference) {
|
|
738
|
+
hide();
|
|
739
|
+
return;
|
|
740
|
+
}
|
|
741
|
+
if (activeTooltip && activeReference) {
|
|
742
|
+
updateTooltipPosition(options, activeReference, activeTooltip);
|
|
743
|
+
}
|
|
744
|
+
};
|
|
745
|
+
const init = () => {
|
|
746
|
+
if (!initialized) {
|
|
747
|
+
initialized = true;
|
|
748
|
+
window.addEventListener("scroll", handleUpdate);
|
|
749
|
+
window.addEventListener("resize", handleUpdate);
|
|
750
|
+
}
|
|
751
|
+
};
|
|
752
|
+
const cleanup = () => {
|
|
753
|
+
if (initialized) {
|
|
754
|
+
initialized = false;
|
|
755
|
+
window.removeEventListener("scroll", handleUpdate);
|
|
756
|
+
window.removeEventListener("resize", handleUpdate);
|
|
757
|
+
}
|
|
758
|
+
};
|
|
759
|
+
return {
|
|
760
|
+
get visible() {
|
|
761
|
+
return Boolean(state.currentId);
|
|
762
|
+
},
|
|
763
|
+
getActiveReference,
|
|
764
|
+
show,
|
|
765
|
+
hide,
|
|
766
|
+
init,
|
|
767
|
+
cleanup
|
|
768
|
+
};
|
|
769
|
+
}
|
|
770
|
+
function createTooltipElement(options) {
|
|
771
|
+
const { text, className } = options;
|
|
772
|
+
const id = generateId();
|
|
773
|
+
const tooltip3 = document.createElement("div");
|
|
774
|
+
tooltip3.id = id;
|
|
775
|
+
tooltip3.className = className ? `${TOOLTIP_BASE_CLASS} ${className}` : TOOLTIP_BASE_CLASS;
|
|
776
|
+
tooltip3.setAttribute("role", "tooltip");
|
|
777
|
+
tooltip3.setAttribute("aria-live", "polite");
|
|
778
|
+
tooltip3.textContent = text;
|
|
779
|
+
return tooltip3;
|
|
780
|
+
}
|
|
781
|
+
function attachTooltip(tooltip3, reference) {
|
|
782
|
+
const container2 = document.querySelector(PAGE_CONTAINER_SELECTOR) || document.body;
|
|
783
|
+
const ariaLive = reference.getAttribute("aria-live");
|
|
784
|
+
reference.setAttribute(TOOLTIP_DATA_ATTR, tooltip3.id);
|
|
785
|
+
if (ariaLive) {
|
|
786
|
+
tooltip3.setAttribute("aria-live", ariaLive);
|
|
787
|
+
}
|
|
788
|
+
container2.appendChild(tooltip3);
|
|
789
|
+
}
|
|
790
|
+
function detachTooltip(tooltip3) {
|
|
791
|
+
if (tooltip3.id) {
|
|
792
|
+
const reference = getReferenceByTooltipId(tooltip3.id);
|
|
793
|
+
reference == null ? void 0 : reference.removeAttribute(TOOLTIP_DATA_ATTR);
|
|
794
|
+
}
|
|
795
|
+
tooltip3.remove();
|
|
796
|
+
}
|
|
797
|
+
function getReferenceByTooltipId(id) {
|
|
798
|
+
return document.querySelector(`[${TOOLTIP_DATA_ATTR}="${id}"]`);
|
|
799
|
+
}
|
|
800
|
+
function subscribeToScroll(reference, update) {
|
|
801
|
+
const scrollableElement = getParentScrollableElement(reference);
|
|
802
|
+
scrollableElement.addEventListener("scroll", update);
|
|
803
|
+
return () => {
|
|
804
|
+
scrollableElement.removeEventListener("scroll", update);
|
|
805
|
+
};
|
|
806
|
+
}
|
|
807
|
+
function getParentScrollableElement(target) {
|
|
808
|
+
const closestScrollableParent = target.closest("table") || target.closest("code");
|
|
809
|
+
return closestScrollableParent || target.parentElement || document.body;
|
|
810
|
+
}
|
|
811
|
+
function createTooltipContext(referenceElement, tooltipElement) {
|
|
812
|
+
const tooltipParent = tooltipElement.parentElement;
|
|
813
|
+
if (!tooltipParent) {
|
|
814
|
+
return null;
|
|
815
|
+
}
|
|
816
|
+
const elements = {
|
|
817
|
+
reference: referenceElement,
|
|
818
|
+
tooltip: tooltipElement,
|
|
819
|
+
offsetParent: tooltipParent
|
|
820
|
+
};
|
|
821
|
+
const viewport = getViewportRect();
|
|
822
|
+
const reference = getElementRect(referenceElement);
|
|
823
|
+
const { width, height } = tooltipElement.getBoundingClientRect();
|
|
824
|
+
return {
|
|
825
|
+
isRtl: document.dir === "rtl",
|
|
826
|
+
viewport,
|
|
827
|
+
reference,
|
|
828
|
+
tooltip: createRect({ top: 0, left: 0, width, height }),
|
|
829
|
+
elements
|
|
830
|
+
};
|
|
831
|
+
}
|
|
832
|
+
function updateTooltipPosition(options, referenceElement, tooltipElement) {
|
|
833
|
+
const context = createTooltipContext(referenceElement, tooltipElement);
|
|
834
|
+
if (!context) {
|
|
835
|
+
return;
|
|
836
|
+
}
|
|
837
|
+
const coords = getTooltipCoords(context, options);
|
|
838
|
+
tooltipElement.style.top = `${coords.y}px`;
|
|
839
|
+
tooltipElement.style.left = `${coords.x}px`;
|
|
840
|
+
}
|
|
841
|
+
function getTooltipCoords(context, options) {
|
|
842
|
+
const { placement = "bottom-start", offset = DEFAULT_OFFSET_VALUES, flip = true } = options;
|
|
843
|
+
const { reference, tooltip: tooltip3, viewport, isRtl } = context;
|
|
844
|
+
const { coords } = computePosition(reference, tooltip3, viewport, placement, offset, isRtl, flip);
|
|
845
|
+
const rect = updateRect(tooltip3, { top: coords.y, left: coords.x });
|
|
846
|
+
const relativeRect = convertToRelativeToOffsetParentRect(rect, context.elements.offsetParent);
|
|
847
|
+
return {
|
|
848
|
+
x: relativeRect.left,
|
|
849
|
+
y: relativeRect.top
|
|
850
|
+
};
|
|
851
|
+
}
|
|
852
|
+
|
|
853
|
+
// src/js/constant.ts
|
|
854
|
+
var COPIED_LANG_TOKEN = {
|
|
516
855
|
ru: "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D\u043E",
|
|
517
856
|
en: "Copied",
|
|
518
857
|
ar: "\u062A\u0645 \u0627\u0644\u0646\u0633\u062E",
|
|
@@ -531,6 +870,80 @@
|
|
|
531
870
|
uz: "Nusxalandi"
|
|
532
871
|
};
|
|
533
872
|
|
|
873
|
+
// src/js/anchor.ts
|
|
874
|
+
var ALLOWED_PROTOCOL_RE = /^(?:https?|file):$/;
|
|
875
|
+
var ANCHOR_BUTTON_SELECTOR = ".yfm-clipboard-anchor";
|
|
876
|
+
var tooltip = createTooltipFactory();
|
|
877
|
+
function getLink(target) {
|
|
878
|
+
const href = target.nodeName === "A" ? target.href : target.dataset.href;
|
|
879
|
+
const link = new URL(href || "", window.location.href);
|
|
880
|
+
if (ALLOWED_PROTOCOL_RE.test(link.protocol)) {
|
|
881
|
+
return link.href;
|
|
882
|
+
}
|
|
883
|
+
return window.location.href;
|
|
884
|
+
}
|
|
885
|
+
if (typeof document !== "undefined") {
|
|
886
|
+
tooltip.init();
|
|
887
|
+
document.addEventListener("click", (event) => {
|
|
888
|
+
const target = getEventTarget(event);
|
|
889
|
+
if (isCustom(event) || !target.matches(ANCHOR_BUTTON_SELECTOR)) {
|
|
890
|
+
return;
|
|
891
|
+
}
|
|
892
|
+
const link = getLink(target);
|
|
893
|
+
copyToClipboard(link).then(() => {
|
|
894
|
+
var _a;
|
|
895
|
+
const lang = document.documentElement.lang || "en";
|
|
896
|
+
const tooltipText = (_a = COPIED_LANG_TOKEN[lang]) != null ? _a : COPIED_LANG_TOKEN.en;
|
|
897
|
+
tooltip.show(target, tooltipText);
|
|
898
|
+
});
|
|
899
|
+
});
|
|
900
|
+
}
|
|
901
|
+
|
|
902
|
+
// src/js/inline-code/index.ts
|
|
903
|
+
var CLASS_INLINE_CODE = "yfm-clipboard-inline-code";
|
|
904
|
+
var INLINE_CODE = `.${CLASS_INLINE_CODE}`;
|
|
905
|
+
var tooltip2 = createTooltipFactory({
|
|
906
|
+
// NOTE: Add additional className for backward capability
|
|
907
|
+
additionalClassName: "inline_code_tooltip"
|
|
908
|
+
});
|
|
909
|
+
function inlineCopyFn(target) {
|
|
910
|
+
const innerText = target.innerText;
|
|
911
|
+
if (!innerText) {
|
|
912
|
+
return;
|
|
913
|
+
}
|
|
914
|
+
copyToClipboard(innerText).then(() => {
|
|
915
|
+
var _a;
|
|
916
|
+
const lang = document.documentElement.lang || "en";
|
|
917
|
+
const tooltipText = (_a = COPIED_LANG_TOKEN[lang]) != null ? _a : COPIED_LANG_TOKEN.en;
|
|
918
|
+
tooltip2.show(target, tooltipText);
|
|
919
|
+
});
|
|
920
|
+
}
|
|
921
|
+
if (typeof document !== "undefined") {
|
|
922
|
+
tooltip2.init();
|
|
923
|
+
document.addEventListener("click", (event) => {
|
|
924
|
+
const target = getEventTarget(event);
|
|
925
|
+
const inline = target.matches(INLINE_CODE);
|
|
926
|
+
if (isCustom(event) || !inline) {
|
|
927
|
+
return;
|
|
928
|
+
}
|
|
929
|
+
inlineCopyFn(target);
|
|
930
|
+
});
|
|
931
|
+
document.addEventListener("keydown", (event) => {
|
|
932
|
+
if (event.key === "Enter" && document.activeElement) {
|
|
933
|
+
const activeElement = document.activeElement;
|
|
934
|
+
if (!activeElement.classList.contains(CLASS_INLINE_CODE)) {
|
|
935
|
+
return;
|
|
936
|
+
}
|
|
937
|
+
inlineCopyFn(activeElement);
|
|
938
|
+
}
|
|
939
|
+
if (event.key === "Escape" && tooltip2.visible) {
|
|
940
|
+
const reference = tooltip2.getActiveReference();
|
|
941
|
+
tooltip2.hide();
|
|
942
|
+
reference == null ? void 0 : reference.focus();
|
|
943
|
+
}
|
|
944
|
+
});
|
|
945
|
+
}
|
|
946
|
+
|
|
534
947
|
// src/js/term/utils.ts
|
|
535
948
|
var Selector = {
|
|
536
949
|
TITLE: ".yfm .yfm-term_title",
|
|
@@ -716,218 +1129,6 @@
|
|
|
716
1129
|
return document.getElementById(termId);
|
|
717
1130
|
}
|
|
718
1131
|
|
|
719
|
-
// src/js/inline-code/utils.ts
|
|
720
|
-
var timer = null;
|
|
721
|
-
var isListenerNeeded2 = true;
|
|
722
|
-
function getTooltipElement() {
|
|
723
|
-
return document.getElementById(INLINE_CODE_ID);
|
|
724
|
-
}
|
|
725
|
-
function setTooltipAriaAttributes(tooltipElement, targetElement) {
|
|
726
|
-
const ariaLive = targetElement.getAttribute("aria-live") || "polite";
|
|
727
|
-
tooltipElement == null ? void 0 : tooltipElement.setAttribute("aria-live", ariaLive);
|
|
728
|
-
tooltipElement == null ? void 0 : tooltipElement.setAttribute("aria-modal", "true");
|
|
729
|
-
}
|
|
730
|
-
function checkTimerAndClear() {
|
|
731
|
-
if (timer) {
|
|
732
|
-
clearTimeout(timer);
|
|
733
|
-
timer = null;
|
|
734
|
-
}
|
|
735
|
-
}
|
|
736
|
-
function tooltipParentElement(target) {
|
|
737
|
-
if (!target) {
|
|
738
|
-
return null;
|
|
739
|
-
}
|
|
740
|
-
const closestScrollableParent = target.closest("table") || target.closest("code");
|
|
741
|
-
return closestScrollableParent || target.parentElement;
|
|
742
|
-
}
|
|
743
|
-
function tooltipOnResize() {
|
|
744
|
-
const openedDefinition = getTooltipElement();
|
|
745
|
-
if (!openedDefinition) {
|
|
746
|
-
return;
|
|
747
|
-
}
|
|
748
|
-
const inlineId = openedDefinition.getAttribute("inline-id") || "";
|
|
749
|
-
const targetElement = document.getElementById(inlineId);
|
|
750
|
-
if (!targetElement) {
|
|
751
|
-
return;
|
|
752
|
-
}
|
|
753
|
-
setTooltipPosition(openedDefinition, targetElement);
|
|
754
|
-
}
|
|
755
|
-
function setTooltipPosition(tooltipElement, targetElement) {
|
|
756
|
-
const {
|
|
757
|
-
x: inlineX,
|
|
758
|
-
y: inlineY,
|
|
759
|
-
right: inlineRight,
|
|
760
|
-
left: inlineLeft,
|
|
761
|
-
width: inlineWidth,
|
|
762
|
-
height: inlineHeight
|
|
763
|
-
} = targetElement.getBoundingClientRect();
|
|
764
|
-
const tooltipParent = tooltipParentElement(targetElement);
|
|
765
|
-
if (!tooltipParent) {
|
|
766
|
-
return;
|
|
767
|
-
}
|
|
768
|
-
const { right: tooltipParentRight, left: tooltipParentLeft } = tooltipParent.getBoundingClientRect();
|
|
769
|
-
if ((tooltipParentRight < inlineLeft || tooltipParentLeft > inlineRight) && !isListenerNeeded2) {
|
|
770
|
-
closeTooltip(tooltipElement);
|
|
771
|
-
return;
|
|
772
|
-
}
|
|
773
|
-
if (isListenerNeeded2 && tooltipParent) {
|
|
774
|
-
tooltipParent.addEventListener("scroll", tooltipOnResize);
|
|
775
|
-
isListenerNeeded2 = false;
|
|
776
|
-
}
|
|
777
|
-
const relativeX = Number(tooltipElement.getAttribute("relativeX"));
|
|
778
|
-
const relativeY = Number(tooltipElement.getAttribute("relativeY"));
|
|
779
|
-
if (relativeX === inlineX && relativeY === inlineY) {
|
|
780
|
-
return;
|
|
781
|
-
}
|
|
782
|
-
tooltipElement.setAttribute("relativeX", String(inlineX));
|
|
783
|
-
tooltipElement.setAttribute("relativeY", String(inlineY));
|
|
784
|
-
const offsetTop = inlineHeight + 5;
|
|
785
|
-
const definitionParent = tooltipElement.parentElement;
|
|
786
|
-
if (!definitionParent) {
|
|
787
|
-
return;
|
|
788
|
-
}
|
|
789
|
-
const { width: definitionWidth } = tooltipElement.getBoundingClientRect();
|
|
790
|
-
const { left: definitionParentLeft } = definitionParent.getBoundingClientRect();
|
|
791
|
-
const definitionLeftCoordinate = Number(getCoords(targetElement).left);
|
|
792
|
-
const definitionRightCoordinate = definitionWidth + definitionLeftCoordinate;
|
|
793
|
-
const definitionOutOfScreenOnLeft = definitionLeftCoordinate - definitionWidth < 0;
|
|
794
|
-
const definitionOutOfScreenOnRight = definitionRightCoordinate > document.body.clientWidth;
|
|
795
|
-
const isAlignSwapped = definitionOutOfScreenOnRight || document.dir === "rtl";
|
|
796
|
-
const fitDefinitionDocument = isAlignSwapped && !definitionOutOfScreenOnLeft ? definitionWidth - inlineWidth : 0;
|
|
797
|
-
const customHeaderTop = getCoords(definitionParent).top - definitionParent.offsetTop;
|
|
798
|
-
const offsetRight = 5;
|
|
799
|
-
const shiftLeft = definitionOutOfScreenOnRight ? definitionRightCoordinate - document.body.clientWidth + offsetRight : 0;
|
|
800
|
-
const offsetLeft = getCoords(targetElement).left - definitionParentLeft + definitionParent.offsetLeft - fitDefinitionDocument;
|
|
801
|
-
const isShiftLeftNeeded = offsetLeft + definitionWidth >= document.body.clientWidth;
|
|
802
|
-
tooltipElement.style.top = Number(getCoords(targetElement).top + offsetTop - customHeaderTop) + "px";
|
|
803
|
-
tooltipElement.style.left = Number(offsetLeft - (isShiftLeftNeeded ? shiftLeft : 0)) + "px";
|
|
804
|
-
}
|
|
805
|
-
function getInlineCodeByTooltip(definition) {
|
|
806
|
-
const inlineId = definition.getAttribute("inline-id");
|
|
807
|
-
return inlineId ? document.getElementById(inlineId) : null;
|
|
808
|
-
}
|
|
809
|
-
function closeTooltipFn(definition) {
|
|
810
|
-
definition.classList.remove(OPEN_CLASS);
|
|
811
|
-
const inline = getInlineCodeByTooltip(definition);
|
|
812
|
-
const inlineCodepParent = tooltipParentElement(inline);
|
|
813
|
-
const tooltipParent = tooltipParentElement(definition);
|
|
814
|
-
definition.removeAttribute("inline-id");
|
|
815
|
-
if (!inlineCodepParent || !tooltipParent) {
|
|
816
|
-
return;
|
|
817
|
-
}
|
|
818
|
-
tooltipParent.removeChild(definition);
|
|
819
|
-
inlineCodepParent.removeEventListener("scroll", tooltipOnResize);
|
|
820
|
-
isListenerNeeded2 = true;
|
|
821
|
-
}
|
|
822
|
-
function createTooltip() {
|
|
823
|
-
var _a;
|
|
824
|
-
let tooltip = getTooltipElement();
|
|
825
|
-
if (!tooltip) {
|
|
826
|
-
const pageContent = document.querySelector(".dc-doc-page__content") || document.body;
|
|
827
|
-
const lang = document.documentElement.lang || "en";
|
|
828
|
-
const tooltipText = (_a = LANG_TOKEN[lang]) != null ? _a : LANG_TOKEN.en;
|
|
829
|
-
const host = document.createElement("div");
|
|
830
|
-
host.innerHTML = `
|
|
831
|
-
<div id="${INLINE_CODE_ID}" class="${INLINE_CODE_CLASS}"
|
|
832
|
-
role="dialog" aria-live="polite" aria-modal="true">
|
|
833
|
-
${tooltipText}
|
|
834
|
-
</div>
|
|
835
|
-
`;
|
|
836
|
-
tooltip = host.firstElementChild;
|
|
837
|
-
pageContent.appendChild(tooltip);
|
|
838
|
-
}
|
|
839
|
-
return tooltip;
|
|
840
|
-
}
|
|
841
|
-
function openTooltip(target) {
|
|
842
|
-
const tooltip = createTooltip();
|
|
843
|
-
if (!target.matches(INLINE_CODE) || !tooltip) {
|
|
844
|
-
return;
|
|
845
|
-
}
|
|
846
|
-
tooltip.setAttribute("inline-id", target.getAttribute("id") || "");
|
|
847
|
-
setTooltipAriaAttributes(tooltip, target);
|
|
848
|
-
setTooltipPosition(tooltip, target);
|
|
849
|
-
if (tooltip.classList.contains(OPEN_CLASS)) {
|
|
850
|
-
tooltip.classList.remove(OPEN_CLASS);
|
|
851
|
-
requestAnimationFrame(() => {
|
|
852
|
-
tooltip.classList.add(OPEN_CLASS);
|
|
853
|
-
});
|
|
854
|
-
} else {
|
|
855
|
-
tooltip.classList.add(OPEN_CLASS);
|
|
856
|
-
}
|
|
857
|
-
return tooltip;
|
|
858
|
-
}
|
|
859
|
-
function closeTooltip(target) {
|
|
860
|
-
checkTimerAndClear();
|
|
861
|
-
closeTooltipFn(target);
|
|
862
|
-
}
|
|
863
|
-
function tooltipWorker(target) {
|
|
864
|
-
const definition = openTooltip(target);
|
|
865
|
-
if (!definition) {
|
|
866
|
-
return;
|
|
867
|
-
}
|
|
868
|
-
checkTimerAndClear();
|
|
869
|
-
timer = setTimeout(() => {
|
|
870
|
-
closeTooltip(definition);
|
|
871
|
-
timer = null;
|
|
872
|
-
}, 1e3);
|
|
873
|
-
}
|
|
874
|
-
|
|
875
|
-
// src/js/inline-code/index.ts
|
|
876
|
-
function inlineCopyFn(target) {
|
|
877
|
-
const innerText = target.innerText;
|
|
878
|
-
if (!innerText) {
|
|
879
|
-
return;
|
|
880
|
-
}
|
|
881
|
-
copyToClipboard(innerText).then(() => {
|
|
882
|
-
tooltipWorker(target);
|
|
883
|
-
});
|
|
884
|
-
}
|
|
885
|
-
if (typeof document !== "undefined") {
|
|
886
|
-
document.addEventListener("click", (event) => {
|
|
887
|
-
const target = getEventTarget(event);
|
|
888
|
-
const inline = target.matches(INLINE_CODE);
|
|
889
|
-
if (isCustom(event) || !inline) {
|
|
890
|
-
return;
|
|
891
|
-
}
|
|
892
|
-
inlineCopyFn(target);
|
|
893
|
-
});
|
|
894
|
-
document.addEventListener("keydown", (event) => {
|
|
895
|
-
var _a;
|
|
896
|
-
if (event.key === "Enter" && document.activeElement) {
|
|
897
|
-
const activeElement = document.activeElement;
|
|
898
|
-
const classInlineCode = INLINE_CODE.replace(".", "");
|
|
899
|
-
if (!activeElement.classList.contains(classInlineCode)) {
|
|
900
|
-
return;
|
|
901
|
-
}
|
|
902
|
-
const innerText = activeElement.innerText;
|
|
903
|
-
if (!innerText) {
|
|
904
|
-
return;
|
|
905
|
-
}
|
|
906
|
-
copyToClipboard(innerText).then(() => {
|
|
907
|
-
tooltipWorker(activeElement);
|
|
908
|
-
});
|
|
909
|
-
}
|
|
910
|
-
const inlineTooltip = getTooltipElement();
|
|
911
|
-
if (event.key === "Escape" && inlineTooltip) {
|
|
912
|
-
closeTooltip(inlineTooltip);
|
|
913
|
-
(_a = getInlineCodeByTooltip(inlineTooltip)) == null ? void 0 : _a.focus();
|
|
914
|
-
}
|
|
915
|
-
});
|
|
916
|
-
window.addEventListener("resize", () => {
|
|
917
|
-
const inlineTooltip = getTooltipElement();
|
|
918
|
-
if (!inlineTooltip) {
|
|
919
|
-
return;
|
|
920
|
-
}
|
|
921
|
-
const inlineId = inlineTooltip.getAttribute("inline-id") || "";
|
|
922
|
-
const inlineCodeElement = document.getElementById(inlineId);
|
|
923
|
-
if (!inlineCodeElement) {
|
|
924
|
-
inlineTooltip.classList.toggle(OPEN_CLASS);
|
|
925
|
-
return;
|
|
926
|
-
}
|
|
927
|
-
setTooltipPosition(inlineTooltip, inlineCodeElement);
|
|
928
|
-
});
|
|
929
|
-
}
|
|
930
|
-
|
|
931
1132
|
// src/js/term/index.ts
|
|
932
1133
|
if (typeof document !== "undefined") {
|
|
933
1134
|
document.addEventListener("click", (event) => {
|