@teipublisher/pb-components 2.15.3 → 2.17.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/CHANGELOG.md +14 -0
- package/css/leaflet/Control.Geocoder.css +126 -0
- package/dist/demo/demos.json +2 -1
- package/dist/pb-components-bundle.js +7 -2
- package/dist/pb-elements.json +27 -10
- package/dist/pb-leaflet-map.js +6 -5
- package/i18n/common/en.json +3 -0
- package/lib/Control.Geocoder.min.js +2 -0
- package/lib/Control.Geocoder.min.js.map +1 -0
- package/package.json +2 -1
- package/pb-elements.json +27 -10
- package/src/pb-events.js +38 -0
- package/src/pb-leaflet-map.js +545 -463
- package/src/pb-view-annotate.js +27 -16
package/src/pb-view-annotate.js
CHANGED
|
@@ -479,7 +479,7 @@ class PbViewAnnotate extends PbView {
|
|
|
479
479
|
console.log('<pb-view-annotate> Range: %o', range);
|
|
480
480
|
const span = document.createElement('span');
|
|
481
481
|
const addClass = teiRange.properties[this.getKey(teiRange.type)] === '' ? 'incomplete' : '';
|
|
482
|
-
span.className = `annotation annotation-${teiRange.type} ${teiRange.type} ${addClass}`;
|
|
482
|
+
span.className = `annotation annotation-${teiRange.type} ${teiRange.type} ${addClass} ${teiRange.before ? 'before' : ''}`;
|
|
483
483
|
span.dataset.type = teiRange.type;
|
|
484
484
|
span.dataset.annotation = JSON.stringify(teiRange.properties);
|
|
485
485
|
|
|
@@ -585,13 +585,17 @@ class PbViewAnnotate extends PbView {
|
|
|
585
585
|
|
|
586
586
|
addAnnotation(info) {
|
|
587
587
|
const range = info.range || this._currentSelection;
|
|
588
|
+
if (range.collapsed && !info.before) {
|
|
589
|
+
return null;
|
|
590
|
+
}
|
|
588
591
|
const startRange = rangeToPoint(range.startContainer, range.startOffset);
|
|
589
592
|
const endRange = rangeToPoint(range.endContainer, range.endOffset, 'end');
|
|
590
593
|
const adjustedRange = {
|
|
591
594
|
context: startRange.parent,
|
|
592
595
|
start: startRange.offset,
|
|
593
|
-
end: endRange.offset,
|
|
594
|
-
text: range.cloneContents().textContent,
|
|
596
|
+
end: info.before ? startRange.offset : endRange.offset,
|
|
597
|
+
text: info.before ? '' : range.cloneContents().textContent,
|
|
598
|
+
before: info.before
|
|
595
599
|
};
|
|
596
600
|
if (info.type) {
|
|
597
601
|
adjustedRange.type = info.type;
|
|
@@ -848,19 +852,21 @@ class PbViewAnnotate extends PbView {
|
|
|
848
852
|
_showMarker(span, root, rootRect, margin = 0) {
|
|
849
853
|
const rects = span.getClientRects();
|
|
850
854
|
const type = span.dataset.type;
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
855
|
+
if (!span.classList.contains('before')) {
|
|
856
|
+
for (let i = 0; i < rects.length; i++) {
|
|
857
|
+
const rect = rects[i];
|
|
858
|
+
const marker = document.createElement('div');
|
|
859
|
+
marker.className = `marker annotation-${type}`;
|
|
860
|
+
marker.style.position = 'absolute';
|
|
861
|
+
marker.style.left = `${rect.left - rootRect.left}px`;
|
|
862
|
+
marker.style.top = `${rect.top - rootRect.top + rect.height}px`;
|
|
863
|
+
marker.style.marginTop = `${margin}px`;
|
|
864
|
+
marker.style.width = `${rect.width}px`;
|
|
865
|
+
marker.style.height = `3px`;
|
|
866
|
+
marker.style.backgroundColor = `var(--pb-annotation-${type})`;
|
|
867
|
+
marker.part = 'annotation';
|
|
868
|
+
root.appendChild(marker);
|
|
869
|
+
}
|
|
864
870
|
}
|
|
865
871
|
|
|
866
872
|
this._createTooltip(span);
|
|
@@ -1136,6 +1142,11 @@ class PbViewAnnotate extends PbView {
|
|
|
1136
1142
|
padding: 2px;
|
|
1137
1143
|
}
|
|
1138
1144
|
|
|
1145
|
+
.annotation.before::after {
|
|
1146
|
+
margin-left: 0;
|
|
1147
|
+
border-radius: 4px;
|
|
1148
|
+
}
|
|
1149
|
+
|
|
1139
1150
|
[part=highlight] {
|
|
1140
1151
|
border: 3px solid rgb(255, 174, 0);
|
|
1141
1152
|
border-radius: 8px;
|