We Keep Coding

Bootstrap tooltip gets stuck if element changes when visible

I am using Bootstrap 5.1.3 (in Rails). Our application consists of dynamically loaded data, that is not always the fastest to load (some complicated SQL queries / huge amounts of data to make calculations with).
We use tooltips on different elements to show extra information / indicate (click)actions. Tooltips are added like this.
On the element that should get the tooltip:
data-bs-toggle="tooltip" data-bs-placement="top" title={question.questionDescription}
In that Bootstrap file:
componentDidUpdate(previousProps, previousState)
{
// Enable all tooltips.
TooltipHelper.enableTooltips([].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')));
}
And then TooltipHelper:
static enableTooltips(targets)
{
var enabledTooltips = targets.map(function (target) {
return new bootstrap.Tooltip(target, { trigger: 'hover' });
});
}
The tooltips work, but don't always go away. My guess is that when a tooltip is shown (because hovering over something) and then that element (or a parent of that element) gets changed, for example the content of it, the tooltip stays there. No matter if I click somewhere of hover over other elements.
I've tried adding a delay within the enableTooltips()-function. This seems to work, but the needed delay is too big. Also, it still breaks when elements are dynamically added and content is loaded, when the page isn't reloaded.
My hacky solution:
static enableTooltips(targets)
{
setTimeout(function() {
var enabledTooltips = targets.map(function (target) {
return new bootstrap.Tooltip(target, { trigger: 'hover' });
});
}, 5000);
}
Anyone know of a solution? Thanks

Untick Include Annotation Checkbox by default in PDFTron PrintModal

As per my knowledge, there is no explicit properties given in pdftron to untick Include Annotation Checkbox which is checked by default.
You can go to https://www.pdftron.com/webviewer/demo/ and see the print modal by pressing ctrl+P:
So I am looking for work around in javascript, to make it disaable, having id "include-annotations". The issue is when the code runs, dom object is 'NULL', then after some time that same code works on console.
How to make this trigger when print modal dom gets loaded.
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.code === "KeyP") {
const annotationUncheck = document.getElementById(
"include-annotations"
) as HTMLElement;
annotationUncheck.click();
}
});

The reason why document.getElementById("include-annotations") is coming up as null, is because Webviewer runs inside an iframe and its components will not be part of the main DOM. To get the checkbox from inside the iFrame and uncheck it, you can use this code:
WebViewer({...}, viewerElement).then(function (instance) {
const { UI } = instance;
UI.iframeWindow.document.getElementById("include-annotations").click();
});
Here is the relevant API for getting the iFrame window.
https://www.pdftron.com/api/web/UI.html#.iframeWindow

How Can I Pass String Variable to Anonymous Adobe View SDK Script?

I have a very basic knowledge of javascript and I have been unable to find a solution for my specific use of the Adobe View SDK API, though it seems like there should be a way. I am working on a web page to show newsletters in the pdf viewer. I have created a w3.css modal element so that I can open the viewer with a button click, and then close it with an "x" in the corner. The button click and the "x" toggle between the display style being "none" or "block". I really like this solution as it lets me use small images of the newsletters as the buttons, and it can be observed here: Test News Page by clicking on the newsletter image below May 4, 2020.
The ultimate goal I have is to be able to change the name of the pdf document that is opened in the viewer by clicking the button, which would need to pass a string variable called "docName" to the url called by the View SDK script. Since the url is already specified in the script inside my modal element when the page loads, here is the thinking I have for the additional script I need to pass my string variables: The button-click invokes my script (function changeName(docName)) and passes the "docName" variable. Then my script needs to pass this variable to the url in the View script (this is the part I don't know how to do), then refresh the page to reload my modal, and then change the display style of the modal to "block". I will copy the code for the View SDK below, showing where I need to insert the string variable with my document name:
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "06179511ab964c9284f1b0887eca1b46", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content:{location: {url: "https://www.shcsfarmington.org/" + docName + ".pdf"}},
metaData:{fileName: "Newsletter_050420.pdf"}
}, {embedMode: "FULL_WINDOW", defaultViewMode: "FIT_WIDTH"});
});
</script>
It seems like this should work, but with my limited knowledge of javascript I don't know how to pass this variable to the anonymous function in the View SDK code, and I would need as much detail and specifics in the syntax of the solution. I appreciate any help with this. Thanks.
EDIT: I thought maybe it would help to show the code for the function that I have come up with so far - then it could be examined and easier to debug and comment on:
<button id="CSS-050420" onclick="changeDoc('Newsletter_050420');"></button>
<script>
function changeDoc(docName) {
/* Need to pass docName to url=https://shcsfarmington.org/2020/news/Newsletter_" + newsDate + ".pdf"; */
window.location.reload(true);
document.getElementById('viewerModal').style.display='block';
}
</script>

I created a CodePen here for you to look at.
Basically, you'll load the first file when the SDK is ready but then you need to set the adobeDCView to null before recreating it.
function showPDF(url) {
adobeDCView = null;
fetch(url)
.then((res) => res.blob())
.then((blob) => {
adobeDCView = new AdobeDC.View({
// This clientId can be used for any CodePen example
clientId: "e800d12fc12c4d60960778b2bc4370af",
// The id of the container for the PDF Viewer
divId: "adobe-dc-view"
});
adobeDCView.previewFile(
{
content: { promise: Promise.resolve(blob.arrayBuffer()) },
metaData: { fileName: url.split("/").slice(-1)[0] }
},
{
embedMode: "FULL_WINDOW",
defaultViewMode: "FIT_PAGE",
showDownloadPDF: true,
showPrintPDF: true,
showLeftHandPanel: false,
showAnnotationTools: false
}
);
});
}
The link click even will pass the url to the PDF and then display it.

manual click event only triggers on second click

I build a small color-picker module. But it only opens up (and then works) when pickColor is called a second time. I also tried to wrap the _openColorPicker into a setTimeout but that didn't work either. In fact, the color-picker didn't show up at all when I did that.
What I found interesting is that the binding to the change event works, so the $ selector must have found the element already.
So I have two questions:
1) why is the picker only showing after the second call to _openColorPicker?
2) why didn't the picker open at all when I wrapper the _openColorPicker call in a setTimeout?
Edit: The _openColorPicker functions gets executed after the user has right-clicked into the document and then clicked on context-menu which is now showing.
Complete Code:
const ColorUtils = {
_initialized: false,
_openColorPicker: function () {
$('#color-picker').click();
},
pickColor: function (onChangeCallback, context) {
if (!this._initialized) {
$('<input/>').attr({
type: 'color',
id: 'color-picker',
display: 'hidden',
value: '#ffffff'
}).appendTo('#centralRow');
this._initialized = true;
$('#color-picker').on('change', onChangeCallback.bind(context));
}
this._openColorPicker();
// version with timeOut
const scope = this;
setTimeout(function () {
scope._openColorPicker();
}, 1000);
}
};
export default ColorUtils;
Above code is used like ColorUtils.pickColor(onColorPicked, this);

Check out this post. Looks like you can't trigger a click on an invisible color picker. That answer suggests giving the element an absolute position and placing it off screen, like so:
position:absolute;
left:-9999px;
top:-9999px;

I tried to replicate your case (for what I understood) : JSFIddle
I made some changes.
I moved the $('<input/>') in a property of the object ColorUtils and appended it to the DOM with absolute position and outside the screen.
(And also commented display:'hidden' because it's either display:none or visibility:hidden and as a CSS property, not Html attribute)
On right clic on the document I instantiate the picker (and register the callback + context) then add a button to the DOM to trigger the picker again.
Does it fulfill your requirements ?

Enabling/Disabling button with Javascript

Problem :
I have an apex:commandButton on a VisualForce page, and a js file with some logic in it. Currently, this logic affects whether the button is visible or invisible on the page, using css. I need to change this so it makes the button enabled or disabled. However, whenever I try to disable the button in the js file, the onscreen button doesn't get affected. I am not experienced with front-end dev so may be missing or misunderstanding something obvious.
Button on .page file :
<apex:commandButton id="commitButton"
action="{!commitSelectedLines}"
value="{!$Label.commitSelectedLines}"/>
.js file (heavily edited down to the seemingly relevant bits) :
FFDCBalancer = (function(){
/**
* Singleton Balancer object to maintain balances on the page.
*/
var balancer = {
/** JQuery button component for the commit button. */
cmdCommit: undefined,
/** Set the enabled-ness of the commit button. */
setCommitEnabled : function(value) {
//I PRESUMABLY NEED TO CHANGE THIS BIT TO USE 'DISABLED'.
this.cmdCommit.css({
'display': value ? 'block' : 'none'
});
//I HAVE TRIED VARIOUS BITS OF CODE, SUCH AS THIS
//this.cmdCommit.disabled = value;
},
/**
* Respond to refresh by connecting event handlers and calculating the balances.
*/
onRefresh : function () {
var me = this;
me.cmdCommit = $FFDC('#commitButton');
}
};
$FFDC(document).on('FFDCRefresh', function(){ balancer.onRefresh(); });
return balancer;
}());

For this, you can do one of two things:
Use the {!$Component...commitButton} to get the client-side ID, though it can really mess JQuery up, since it adds a colon between the IDs, so you'll have to use it in combination with document.getElementById(...) - For example:
jQuery(document.getElementById('{!$Component.Form.commitButton}')).attr('disabled','disabled');
Put a "styleClass" on the button, and change it using that:
<apex:commandButton id="commitButton"
action="{!commitSelectedLines}"
value="{!$Label.commitSelectedLines}" styleClass="commitButtonClass" />
Then use jQuery to set the attribute:
jQuery(".commitButtonClass").attr('disabled','disabled');