Product: Web viewer
Product Version: 11.7.1
Please give a brief summary of your issue: I want to show Tag drop down only for count annotation.
Please describe your issue and provide steps to reproduce it: I want to show Tag drop down only for count annotation. But now the issue is when user click on the note style panel is show Tag drop down.
Here is my code:
const observer2 = new MutationObserver(() => {
const selectedAnnotations = annotationManager.getSelectedAnnotations();
var icon = selectedAnnotations[0]?.Icon;
var selectedAnnotId = selectedAnnotations[0]?.Id;
if (icon === 'Check') {
const annotationStyleButton = iframeDoc.querySelector('[data-element="annotationStyleEditButton"]');
if (annotationStyleButton) {
annotationStyleButton.addEventListener('click', () => {
setTimeout(() => { Apryse.AddTagSectionToStylePanel(iframeDoc, selectedAnnotId) }, 300);
});
}
}
});
observer2.observe(iframeDoc.body, { childList: true, subtree: true });
annotationManager.addEventListener('annotationSelected', (annots) => {
if (annots.length === 1 && annots[0].ToolName.includes('AnnotationCreateCountMeasurement')) {
Apryse.AddTagSectionToStylePanel(iframeDoc, annots[0].Id);
}
});
AddTagSectionToStylePanel: function (iframeDoc, selectedAnnotId) {
const stylePanel = iframeDoc.querySelector('[data-element="stylePanel"]');
if (!stylePanel) return;
const header = stylePanel.querySelector('[data-element="stylePanelHeaderContainer"] h2');
if (!header || (header.textContent.trim() !== 'Count measurement Annotation' && header.textContent.trim() !== 'Note Annotation')) return;
const stylePicker = stylePanel.querySelector('.StylePicker');
if (!stylePicker) return;
if (stylePicker.querySelector('[data-element="tagSelector"]')) return;
const tagSection = document.createElement('div');
tagSection.setAttribute('data-element', 'stylePanel-tagContainer');
tagSection.className = 'PanelSection';
tagSection.innerHTML = `
<div class="panel-section-wrapper Tag">
<div class="menu-items">
<div data-element="tagSelector" class="Dropdown__wrapper">
<div id="slider-Tag" class="slider-property">Tag</div>
<div class="Dropdown" role="combobox" aria-haspopup="listbox" aria-expanded="false" tabindex="0">
<div class="picked-option">
<div class="picked-option-text">Select Tag</div>
<div class="Icon arrow" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<path fill="#abb0c4" d="M9,3.5l-3,3-3-3-1,1,4,4,4-4Z"></path>
</svg>
</div>
</div>
<div class="Dropdown__items hide" role="listbox"></div>
</div>
</div>
</div>
</div>
`;
stylePicker.appendChild(tagSection);
const dropdownItemsContainer = tagSection.querySelector('.Dropdown__items');
caseTags.forEach(tag => {
if (tag && tag.key && tag.value) {
const item = document.createElement('div');
item.className = 'Dropdown__item';
item.setAttribute('role', 'option');
item.dataset.value = tag.key;
item.textContent = tag.value;
item.addEventListener('click', () => {
const picked = tagSection.querySelector('.picked-option-text');
picked.textContent = tag.value;
tagSection.querySelector('.Dropdown').setAttribute('aria-expanded', 'false');
dropdownItemsContainer.classList.add('hide');
const selectedTag = {
id: tag.key,
name: tag.value
};
Apryse.UpdateDocumentStateModel(selectedAnnotId, tag.value);
});
dropdownItemsContainer.appendChild(item);
}
});
const dropdown = tagSection.querySelector('.Dropdown');
const pickedOption = dropdown.querySelector('.picked-option');
pickedOption.addEventListener('click', () => {
const expanded = dropdown.getAttribute('aria-expanded') === 'true';
dropdown.setAttribute('aria-expanded', expanded ? 'false' : 'true');
dropdownItemsContainer.classList.toggle('hide', expanded);
});
},
Please provide a link to a minimal sample where the issue is reproducible:
