We Keep Coding

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

Datepicker Angular2 Hidden Popup

I have issue about using multiple datepicer at one page in angular2
this is example code
https://embed.plnkr.co/nRCpS4/
the problem is, i want to hide datepicker popup when i click another datepicker
Can someone please help me solve my problem?

I have modified openDatePicker method a bit:
openDatepicker(id){
if (this.dynamicId && this.dynamicId !== id) {
this.dynamicId.close();
}
this.dynamicId = id;
}
About onClick that should hide datepicker when clicked somewhere on the page excluding current input and datepicker button I've used this condition:
if (!this._eref.nativeElement.contains(event.target) || !this.dynamicId._elRef.nativeElement.parentNode.contains(event.target)) {
setTimeout(() => this.dynamicId.close(), 10);
}
It relies that input and button have common parent, otherwise it won't work.
plnkr: https://plnkr.co/edit/ziTk5B4x8sFiTPXMc52Y

Prevent double tap closing behavior on jQuery Mobile Popup

I'm using jQuery Mobile to create a popup near an info image button (see picture below). The popup I'm creating has data-dismissable set as false. In red it has been highlighted the container created by jQuery Mobile.
If the user taps once on i icon, it works perfectly. The popup opens and popupafteropen event is called. To dismiss it, the user can tap (click) on the i or outside the red area (thanks to data-dismissable value). On the contrary, if the users performs a double tap (here I mean that the delay bewteen two taps is very short), the popup opens, popupafteropen is called but then also close is called (due to the second tap and data-dismissable value). The overall result is that the popup is not shown.
Are there any solutions to adopt? My goal is to prevent the second tap in order to display the popup correctly.
Thanks.

Kazekage Gaara has a good idea so look first at it.
Other one would require you to bind a doubletap event to popup opening icon and prevent default action, unfortunately jQuery Mobile don't have support for doubletap so you can use this plugin:
(function($) {
$.fn.doubleTap = function(doubleTapCallback) {
return this.each(function(){
var elm = this;
var lastTap = 0;
$(elm).bind('vmousedown', function (e) {
var now = (new Date()).valueOf();
var diff = (now - lastTap);
lastTap = now ;
if (diff < 250) {
if($.isFunction( doubleTapCallback ))
{
doubleTapCallback.call(elm);
}
}
});
});
}
})(jQuery);
and bind it like this:
$(".icon").doubleTap(function(event){
event.preventDefault();
});
There used to be much easier solution for this, jQUery Mobile used to have mobileinit configuration parameter that allowed you to set how long tap event can last.
Or you can monitor interval between taps and prevent allow actions, like this:
var lastTapTime;
function isJqmGhostClick(event) {
var currTapTime = new Date().getTime();
if(lastTapTime == null || currTapTime > (lastTapTime + 800)) {
lastTapTime = currTapTime;
return false;
}
else {
return true;
}
}

You can handle the event and ignore it if the popup is already open. Something like :
if ($.mobile.activePage.find("#popupID").is(":visible") {
// Do something here if the popup is open
}

Is it possible to permanently disable html buttons?

I'm new to programming so I don't know much, but I was wondering if there is a way to permanently disable a button. I've used this:
document.getElementById("WhateverTheIdIs").disabled = true;
but at some parts of the document I reverse that by using this:
document.getElementById("WhateverTheIdIs").disabled = false;
I need something that can override that, and just permanently disable the button. Is there a way to do this?

There is only one way to disable or enable a button. So, if you're looking for a separate way to permanently disable a button (yet leave it visible) that will override setting .disabled to true - there is no such property or feature for a button.
There are many ways to fix your code. For example, when you want to permanently disable a button, you can set a custom attribute on the button and then everywhere you think about enabling the button, you can just check that custom attribute and if it's set, don't enable the button.
Other options you could consider are hiding the button or removing the button from the DOM.
You can fix your code by making your own permanent disable in your own code. If, rather than manipulating the .disabled property directly, you just switch to using these functions, then your code would respect the .permDisabled property.
function getElem(elem) {
if (typeof elem === "string") {
elem = document.getElementById(elem);
}
return elem;
}
function disableButtonPermanent(elem) {
elem = getElem(elem);
elem.disabled = true;
elem.permDisabled = true;
}
function disableButton(elem) {
elem = getElem(elem);
elem.disabled = true;
}
function enableButton(elem) {
elem = getElem(elem);
if (!elem.permDisabled) {
elem.disabled = false;
}
}

You're trying to push too much logic into the DOM. This is very bad practise. Make sure your data model matches that what you're modelling. Have a boolean: all_buttons_are_disabled and then a boolean button_X_is_disabled then do something like:
function updateButtonX() {
document.getElementById("WhateverTheIdIs").disabled =
all_buttons_are_disabled || button_X_is_disabled;
}
http://jsfiddle.net/3n3w3/
toggleX will disable/enabled buttonX, but when you press disable all all buttons are permanently disabled.

Why doesn't noautohide work in an XUL panel?

I'm developing a Firefox extension, trying to get a panel to overlay a browser element. Here is my javascript code:
var panel = oldTabBrowser.contentDocument.createElement('panel');
panel.setAttribute('noautohide','true');
var label = oldTabBrowser.contentDocument.createElement('label');
label.setAttribute('value','my text');
panel.appendChild(label);
elem.appendChild(panel);
panel.openPopup(elem, "overlap",0,0);
alert(panel.getAttribute('noautohide'));
The noautohide attribute is set fine and the panel appears as expected, but on clicking anywhere, the panel disappears. What am I missing?

I have a strong suspicion that noautohide attribute doesn't work correctly. At least for <xul:tooltip> the result isn't the one I expected. You can however make sure that your panel doesn't close prematurely using popuphiding event:
var canClose = false;
panel.addEventListener("popuphiding", function(event)
{
if (!canClose)
{
// Too early to close, prevent it
event.preventDefault();
}
}, false);
panel.openPopup(elem, "overlap",0,0);
...
// Now it is ok to close
canClose = true;
panel.hidePopup();