Focus an element within a ShadowDOM - javascript

I have a modal dialog created within a Shadow DOM and injected (using violentmonkey) into a page during document load. This dialog contains a simple form. The idea is to prompt the user for input.
When the dialog is created, it has focus. Elements can be tabbed, and I can hook key/mouse events. The problem arises when the window load event is triggered. Focus returns to the main body (verified by issuing document.activeElement in the console and by hooking focusin/out for both body and the shodowroot). I can hook the focusin event, but so far nothing I have tried will return focus to my dialog.
A cut down version of the dialog:
<div id="twifty-translate-dialogue" style="">
#shadow-root (open)
<div class="outer" style="z-index: 2147483647; pointer-events: none;">
<div class="container">
<div id="header" class="">
</div>
<div id="languages" class="">
</div>
<div class="buttons">
<button id="translate" class="button-translate" type="button">Translate</button>
<button id="cancel" class="button-cancel" type="button">Cancel</button>
</div>
</div>
</div>
I would expect the following to work:
window.onload = () => {
document.getElementById("twifty-translate-dialogue").shadowRoot.getElementById("translate").focus()
}
From what I've read, there should be two active elements. The #twifty-translate-dialogue and the shadow DOMs #translate. But:
document.activeElement
> <body>
document.getElementById("twifty-translate-dialogue").shadowRoot.getElementById("translate").focus()
document.activeElement
> #twifty-translate-dialogue
document.getElementById("twifty-translate-dialogue").shadowRoot.activeElement
> null
How can I restore focus?
Update:
A workaround:
window.onload = () => {
window.setTimeout(() => {
this.shadow.getElementById("translate").focus()
}, 1)
}
I'm guessing that the focus changes after the onload event, meaning that trying to set the focus in the handler will have no effect. By using a timeout, I've scheduled the focus call for after the completion of onload.
Is this a bug or standard behaviour? Is there a prefered way of setting the focus?

Related

How to invoke ondragstart and drop event manually javascript

I have used html ondragstart and ondrop events.
<div class="row height_380_div" id="target_div_id" ondragover="drag_over(event)" ondrop="drop(event)">
<div ondragstart="dragStart(event)" class="alert alert-warning col-lg-12 height_30_div node" draggable="true" id="call" name="Call" >
<button class="close top_min_10 hidden call_btn" data-dismiss="alert" onclick="remove_btn(this)">
×</button><p class="top_min_10">Call</p>
</div>
</div>
I want to drag and drop this dynamically on page load. Means for example, the div should be dragged to 100 px left and dropped there, which should be called dynamically when page loads and it should run on its own. How to do that?
posted 6 year ago ((( ... anyways, if anyone needs it Ill leave it here ))
// add listenner to element
someElement.addEventListener('dragstart', () => '...do something');
// fire the custom event (I didn't check it in action, but it worked in my unit
//tests so )))
const dragEvent = new Event('dragstart');
someElement.dispatchEvent(dragEvent);

Get clicked element in Meteor?

I have HTML in the following format:
<div class="panel panel-1 active" data-chart="flight-chart">
<div class="row panel-header">
<div class="col-sm-3"><i class="fa fa-plane fa-4x"></i></div>
<div class="col-sm-9">
<div class="big">123,673</div>
<div class="small">flights added since 3/3/2016</div>
</div>
</div>
<div class="panel-footer">view more information</div>
</div>
I am capturing click events using the code below:
Template.infoPanel.events
'click .panel': (event, instance) ->
console.log 'panel click',event.target
The issue I am having is that depending on where in the .panel div I click, a different element is returned for event.target. So If I click on the .col-sm-9 div, that will be returned as the target even though the event is targeting it's parent .panel. Same goes for clicking on .panel-footer.
How can I get the .panel element 100% of the time from inside of the click event?
Use currentTarget instead:
console.log 'panel click', event.currentTarget
See the Event Maps section of the docs for more details.

using .load to load pages from a navbar

I'm using bootstrap's modal and I would like to have a navbar at the top of the modal that uses jquery's .load to change the view of the modal when clicked. I am able to get the modal up with the default view to show but I can't get the rest of the buttons to fire when clicked. Below id a simplified version of what I want. Thanks for any help.
<div class="modal-header">
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>X</button>
<h3 id="myModalLabel">Account Settings</h3>
</div>
<div class="modal-body">
<div class="btn-group">
<button id="account" class="btn">Account</button>
<button id="edit-account-users" class="btn">Users</button>
</div>
<div class="wrapper">
<!-- Content -->
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss='modal' aria-hidden='true'>Close</button>
</div>
$(document).ready(function () {
accountData.init();
});
var accountData = {
'init' : function() {
$('.account-settings, #account-settings #account').click(function() {
$('#account-settings').load('/partials/account/index.html', function() {
$('#account-settings .wrapper').load('/partials/account/account_data.html');
});
});
$('#edit-account-users').click(function() {
$('#account-info .wrapper').load('/partials/account/account_users.html');
});
}
};
The reason your buttons didn't fire is because your event bindings may be attached to elements that no longer exist.
Say if you were to replace content using .load(), the original event handlers to the elements will be lost. That's why event delegation is very useful here, bind the event to the document instead of the individual element. (You're not going to replace document) So when the user clicks anything inside the page, the event will be picked up by document and delegated to a child element according to the selector provided, eg. #edit-account-users.
Use event delegation .on() instead of .click().
$(document).on('click', '#edit-account-users', function() {
$('#account-info .wrapper').load('/partials/account/account_users.html');
});
Read more about .on(): http://api.jquery.com/on/

Toggle does not work on the same element that show works on

I am trying to use JQuery toggle, so when a user clicks the info icon, the hidden div containing item information is shown / hidden. For some reason it is not working for me.
While trying to debug, I noticed that show(), correctly shows the target element that I would like to toggle. However, when I replace show() with toggle(), it does not work and does not return any error.
I was wondering if someone can help me identify the cause of this problem.
My Markup
<div class="option">
<div class="prod-text">Toy Whistle </div>
<div>
<img class="info-icon" src="Info-icon.png">
</div>
<div class="option-info" style="display:none;">
<div>
<div class="price-text">Price: $100</div>
<div class="prod-id-text">Item Number: 231912</div>
<div class="quantity-text">Quantity: 72</div>
</div>
</div>
</div>
JQuery (does not work)
$(".info-icon").click(function(){
$(this).parent().parent().find('.option-info').toggle();
});
JQuery (works!)
$(".info-icon").click(function(){
$(this).parent().parent().find('.option-info').show();
});
Many thanks in advance!
Perhaps the click event handler is getting bound twice, and thus fire twice for each click. The show() would work fine in this case, but the toggle() would show and then immediately hide the element each time you click. Try this:
$(".info-icon").click(function(){
console.log('click handler fired');
$(this).parent().parent().find('.option-info').toggle();
});
And run this with Web Inspector or Firebug enabled to see how many messages are logged for each click.

Separate touch events of parent and child

I use jquery for my web application. I want it to be correct for desktop browsers and mobile brousers for touchscreen devices.
I have a div, and some elements inside it:
<div class="well listItem element-div alert-error" data-state="removing">
<strong>Item title</strong> <small>Items count</small>
<div class="pull-right" style="margin-top: -5px;">
<a class="btn btn-success approve-button"><i class="icon-ok icon-white"></i></a>
<a class="btn btn-danger cancel-button"><i class="icon-remove icon-white"></i></a>
</div>
</div>
I catch click and touchend event for .listItem class (top-level div) and same events for every a element (for .approve-button and .cancel-button), but when I'm click on desktop browser on 'a' element, it works correct, and when I am pressing on 'a' element in iOS Safari browser, or WindowsPhone InternetExplorer, works only event for parent div, but not for 'a'. If I remove event listener for parent div, events for 'a' elements works correct in mobile browsers. I want parent-div event works when I touch a free space of it, and when I touch 'a' element - I want only 'a' event listener to go on. Can you advise me how to separate them?
Have you tried to check event target?
$(".listItem").on("click", function(event){
if (event.target === this) {
// clicked exactly on this element
}
});
I've had a similar problem, only my content was more nested. You want to exclude the areas (divs, classes or otherwise) where you expect to handle other events, using :not selector, like so:
<article>
<div class="title">
<span class="title"></span>
<div class="buttons">
<div class="minimize">+</div>
<div class="remove">x</div>
</div>
</div>
<div class="post">
...
</div>
</article>
With jQuery:
$("article :not(.buttons, .minimize, .remove)").click(function (event) {
// toggle display value of div.post
});
This triggers a click event anywhere inside article, except for the .buttons, .minimize and .remove divs.

Categories