I've implemented events like in this example:
https://aframe-event-set-component.glitch.me/
These events now ether listen to my cursor OR to my mouse.
How can i combine both methods in one application so that the events can be triggered by mouse and cursor? Just like here: https://github.com/mayognaise/aframe-mouse-cursor-component (not supported by the latest A-Frame any more)
Can i write something like cursor="rayOrigin: mouse && cursor"?
Best regards!
As for the click event: it seems to be working with two cursor components: one in the a-scene, and one in the camera:
<a-scene cursor="rayOrigin: mouse">
<a-camera position="0 1.6 0">
<a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat">
</a-entity>
</a-camera>
</a-scene>
Check it in this fiddle.
On the other hand the a-scenes cursor seems to mess up the other events.
You could file an issue, or create a component, which removes the mouse cursor when the enter-vr event is emitted.
...
this.el.sceneEl.addEventListener("enter-vr", function() {
this.el.removeAttribute("cursor")
})
this.el.sceneEl.addEventListener("exit-vr", function() {
this.el.setAttrubute("cursor", "rayOrigin", "mouse")
})
Related
I have a problem. When I go to Spotify and get the iframe code, I want it to play automatically and on repeat on my website.
I've tried the following:
<iframe src="https://open.spotify.com/embed/track/21Yvi82imnN9ZQ87FxMpU9" width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
Also tried
<iframe src="https://open.spotify.com/embed/track/21Yvi82imnN9ZQ87FxMpU9" <button title="Play" class="b8 b9 ba ao bb bc bd be bf bg bh bi bj"><svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; color: white;"><title>Play</title><path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill="currentColor" fill-rule="evenodd"></path></svg></button> onclick="myFunction()">width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
I can't figure it out. Any ideas? I basically need it to loop.
Your second example is incorrect as you are mixing HTML for an IFRAME and a BUTTON element together.
Spotify does not allow you to auto-play its embedded player. It's unfortunate as I would like to do this too.
The closest I have got was to create a locally hosted copy of the embed on my web site, and then add Javascript to manually 'click' the Play button.
The Javascript goes before the closing </BODY> tag:
<script>
function autoplay() {
var t = setTimeout(function(){
var button = document.querySelector('[title="Play"]') || false;
if (button) {
console.log('Click', button)
button.click()
}
}, 999)
}
document.addEventListener('DOMContentLoaded', (event) => {
autoplay()
})
</script>
The timeout might not be necessary but I include it anyway.
This has worked for me inconsistently. It works the first time but then and subsequent refreshing of the page it won't. I am unable to get further than that.
It works every time if you try this in the Developer Console:
document.querySelector('[title="Play"]')
If you figure it out - please post here.
Sometimes when I want to quickly select the entire text of an input (within a modal), I begin selecting from the end of the text and move the mouse to the left until the entire text is selected and then I release.
Sometimes this release will occur outside the modal because the mouse movement is fast.
Picture describing the movement:
The problem is that the modal is closed when I release outside.
Question: how can I prevent the modal from closing when releasing outside?
I'm okay with the modal being closed with a click outside. But not okay with the release event.
I'm using:
angularjs 1.5.8
angular-bootstrap 2.5.0 (aka bootstrap-ui)
bootstrap 3.3.7 (only css!!! not js, because js is provided by the above)
Update:
I've created a plunkr and a GIF:
https://plnkr.co/edit/mxDLAdnrQ4p0KKyw?p=info
<div class="modal-body">
<div class="form-group">
<label for="">Foo</label>
<input type="text" class="form-control input-sm" ng-model="foo">
<p>Do this: select the text from right to left and release the mouse outside the modal.</p>
</div>
</div>
GIF:
Update 2
I have new information! This started happening after the last Goole Chrome update! I tried with another computer that had the previous version of Chrome and the modal doesn't close.
//prevent modal close when click starts in modal and ends on backdrop
$(document).on('mousedown', '.modal', function(e){
window.clickStartedInModal = $(e.target).is('.modal-dialog *');
});
$(document).on('mouseup', '.modal', function(e){
if(!$(e.target).is('.modal-dialog *') && window.clickStartedInModal) {
window.preventModalClose = true;
}
});
$("#modal").on("hide.bs.modal", function (e) {
if(window.preventModalClose){
window.preventModalClose = false;
return false;
}
});
The original repository has been archived and no contributions are accepted.
I forked a version and added my fixes for those who are interested:
https://github.com/peteriman/bootstrap
The comparison below:
https://github.com/angular-ui/bootstrap/compare/master...peteriman:modal-patch
= // moved from template to fix issue #2280
- element.on('click', scope.close);
+ var ignoreClick = false;
+ element.on('mousedown', function(evt1) {
+ element.one('mouseup', function(evt2) {
+ if (evt1.target !== evt2.target)
+ ignoreClick = true;
+ });
+ });
+ element.on('click', function(){
+ if (ignoreClick) ignoreClick = false;
+ else scope.close.apply(this, arguments);
+ });
As mousedown and mouseup events trigger before click event, the code checks if mousedown and mouseup are on the same element. If on different elements, it sets ignoreClick=true for the click event to not trigger.
Maintains backward compatibility for click event for existing codes that calls element.click() programmatically.
Original problem:
https://plnkr.co/edit/mxDLAdnrQ4p0KKyw?p=info&preview
Solution by me: (plkr, modal.js, line 103-114)
https://plnkr.co/edit/V42G9NcTUnH9n9M4?p=info&preview
I updated only the code referring to "Modal.js" in bootstrap.js and bootstrap.min.js
Corrected version:
* Bootstrap: modal.js v3.4.1
* https://getbootstrap.com/docs/3.4/javascript/#modals
bootstrap.js print
Yes, this started happening again after the last Goole Chrome update Version 74.0.3729.169, is this a bug with Chrome we can't fix and that we'll just have to wait for a Chrome update for it to be resolved?
or a bootstrap maintainer will update the code for fixing this?
Issue url: https://github.com/twbs/bootstrap/issues/28844
This problem is not recent is already mentioned on github
https://github.com/angular-ui/bootstrap/issues/5810
the following solution works very well with small improvements if necessary.
$rootScope.$watch(() => document.querySelectorAll('.modal').length, val => {
//everytime the number of modals changes
for (let modal of document.querySelectorAll('.modal')) {
if ($uibModalStack.getTop().value.backdrop !== 'static') { // Testing if the
modal is supposed to be static before attaching the event
modal.addEventListener('mousedown', e => {
if (e.which === 1) {
$uibModalStack.getTop().key.dismiss()
}
})
modal.querySelector('.modal-content').addEventListener('mousedown', e => {
e.stopPropagation()
})
}
}
if (val > 0) {
$uibModalStack.getTop().value.backdrop = 'static'
}
})
Another solution on the same principle that keeps the draggrable footer and header of the modal
$rootScope.$watch(function () {
return $document.find('.modal').length;
}, function (val) {
if(openedWindows.top() ) {
var modal = $document.find('.modal');
angular.forEach(modal, function(value) {
if ($modalStack.getTop().value.backdrop !== 'static') {
value.addEventListener('mousedown', function (e) {
if (value === e.target && e.which === 1 && openedWindows.top()) {
$modalStack.getTop().key.dismiss();
}
});
}
});
if (val>0) {
$modalStack.getTop().value.backdrop = 'static';
}
}
});
I'm using Bootstrap v3.0.0 and ran into the same problem. In the end, I had to change a click event to a mousedown event.
In my bootstrap.js file, under the modal.js section, I changed this.$element.on('click.dismiss.modal', $.proxy(function (e) to this.$element.on('mousedown.dismiss.modal', $.proxy(function (e). and everything appears to be working. You may also have to change this in the bootstrap.min.js file.
Note, this will immediately close the modal on mouse down of backdrop so if for some reason you want a user to be able to click down on the backdrop, then drag the mouse and release on the modal, this will not work.
Have you tried using backdrop: 'static'. I think that should do the trick. It is present in the documentation here
Add css padding around modal window and resize it larger. Click outside still works but releasing mouse while dragging over the edge won't close it.
I had a similar situation with range slider. leaving click during slide outside the modal closes it. so I removed data-toggle="modal" and data-target="#mymodal" and added a click event with extra parameters
jQuery('button#modal_toggler').click(function(){
jQuery('#myModal').modal({
backdrop: 'static',
keyboard: false
})
})
backdrop to disable modal close on clicking outside
keyboard this is for my scenario, to disable keyboard entry for closing modal
I have figured out different way to solve the problem, idk if it will cause a problem later but anyway it works, so basically, I put modal-dialog to another <div> object (I call it modal-helper) and then put it to modal. The modal-helper element width and height are inherited (100%) as default but there is small space on top so you can use some margin and padding to close it.
<div class="modal fade" id="login-modal" tabindex="-1" aria-labelledby="loginModalLabel" style="display: none;" aria-hidden="true">
<div id="modal-helper" style="pointer-events: auto;">
<div class="modal-dialog">
...
</div>
</div>
</div>
Then I have used some JS to hide modal when modal-helper (as backdrop) is clicked (by the 'clicked' I mean when pointerup event triggered after pointerdown event on modal-helper).
The code below sets the value of isPointerDownToModalHelper true when pointerdown event triggered on modal-helper, then when the pointerup event triggered on any object it hides the modal and sets the value of isPointerDownToModalHelper back to false:
var login_modal_helper = document.getElementById('modal-helper')
var isPointerDownToModalHelper = false;
addEventListener('pointerdown', (event) => {
var objectID = event['path']['0']['id'];
if (objectID === login_modal_helper.id) { // if pointer was over modal-helper
isPointerDownToModalHelper = true;
}
});
addEventListener('pointerup', (event) => {
if (isPointerDownToModalHelper === true) {
isPointerDownToModalHelper = false;
$('#login-modal').modal('hide'); // hide the modal
}
});
It seems to work fine for now, I hope it can help someone :).
I am trying to catch click event for glft model in a scene. Scene code below.
<a-scene raycaster-autorefresh>
<a-assets>
<a-asset-item id="store_homeModel" src="app/home/store_models/store_model.gltf"></a-asset-item>
<a-asset-item id="shampoo" src="app/home/product_models/Ayush Shampoo.gltf"></a-asset-item>
<a-asset-item id="soap" src="app/home/product_models/Ayush Soap.gltf"></a-asset-item>
<a-asset-item id="facewash" src="app/home/product_models/Citra Pearl face wash.gltf"></a-asset-item>
</a-assets>
<a-gltf-model src="#store_homeModel"></a-gltf-model>
<a-gltf-model src="#shampoo" open-desc"></a-gltf-model>
</a-scene>
and component code I have. But click event is not getting catch and i am not able to see console log...
AFRAME.registerComponent('raycaster-autorefresh', {
init: function () {
// This will be called after the entity has properly attached and loaded.
console.log('I am readyyyyy!');
}
});
AFRAME.registerComponent('open-desc', {
init: function() {
var data = this.data;
var el = this.el;
el.addEventListener('click', function() {
console.log("hiiiiiiiiiiii");
});
},
});
Please remember that a-frame renders the whole view on a <canvas>, so you can't just use your mouse to click on any element inside the <a-scene>.
If you want a simple gaze based cursor, you need to attach a cursor to the camera:
<a-camera>
<a-cursor></a-cursor>
</a-camera>
If You want to use the mouse, use the cursor component in the <a-scene>:
<a-scene cursor="rayOrigin:mouse">
If you want to use vive / oculus controllers, you should try laser-controls.
More details about properties and events regarding the cursor can be found in the docs.
I've got a doozy of an ng-class problem.
So I have an app with a map/markers on the right and a list-item menu on the left with info about the markers (like Yelp or Foursquare).
With some of my beginner hacking, I got the hover events to sort of work:
But it's odd, the list-item (pink background on hover) only works when I mouseout of the marker. I'm trying to set it up so that when you mouse over the marker, the appropriate list-item's background changes and when you mouseout, it goes back to white. Most of the other ng-class examples/questions I read through seem to work quite differently (they're going for a different functionality).
Ok, to the code:
HTML
<div class="col-md-6" id="leftCol">
<div class="list-group" ng-controller="ShowsCtrl">
<div class="nav nav-stacked list-group-item" id="sidebar" ng-repeat="(key, show) in shows.features" ng-mouseover="menuMouse(show)" ng-mouseout="menuMouseout(show)" ng-class="{hover: $index == hoveritem}">
The key part there is the ng-class="{hover: $index == hoveritem}"
Now I'll show you where hoveritem comes from
Controller
$scope.hoveritem = {};
function pointMouseover(leafletEvent) {
var layer = leafletEvent.target;
//console.log(layer.feature.properties.id);
layer.setIcon(mouseoverMarker);
$scope.hoveritem = layer.feature.properties.id;
console.log($scope.hoveritem);
}
function pointMouseout(leafletEvent) {
var layer = leafletEvent.target;
layer.setIcon(defaultMarker);
}
$scope.menuMouse = function(show){
var layer = layers[show.properties.id];
//console.log(layer);
layer.setIcon(mouseoverMarker);
}
$scope.menuMouseout = function(show){
var layer = layers[show.properties.id];
layer.setIcon(defaultMarker);
}
// Get the countries geojson data from a JSON
$http.get('/json/shows.geojson').success(function (data, status) {
angular.extend($scope, {
geojson: {
data: data,
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.artist);
layer.setIcon(defaultMarker);
layer.on({
mouseover: pointMouseover,
mouseout: pointMouseout
});
layers[feature.properties.id] = layer;
//console.log(layers);
}
}
});
});
}]);
So mousing over a marker
(layer.on({
mouseover: pointMouseover,
mouseout: pointMouseout
});)
fires the appropriate functions which then changes the icon colors.
I connected the layer.feature.properties.id; to $scope.hoveritem so that my HTML can then use that as the index c. When you mouseover a marker, it then feeds the marker id through to $scope.hoveritem which then it turn goes into the $index part of the HTML, thus changing it's CSS class.
But something is awry. It only changes to the correct list item on mouseout instead of mouseover. Furthermore, I can't figure out to get it to return to the default white state. None of the list items should look active if the mouse is not on a marker.
Any ideas or hints on this would be very appreciated.
The reason for the delay in the mouseover effects was because of the angular $apply digest cycle. Angular basically wasn't aware of the changes to hoveritem. Wrapping it with $scope.$apply did the trick:
$scope.$apply(function () {
$scope.hoveritem = layer.feature.properties.id;
})
Why is my click event fired twice in jquery?
HTML
<ul class=submenu>
<li><label for=toggle><input id=toggle type=checkbox checked>Show</label></li>
</ul>
Javascript
$("ul.submenu li:contains('Show')").on("click", function(e) {
console.log("toggle");
if ($(this).find("[type=checkbox]").is(":checked")) console.log("Show");
else console.log("Hide");
});
This is what I get in console:
toggle menu.js:39
Show menu.js:40
toggle menu.js:39
Hide menu.js:41
> $("ul.submenu li:contains('Show')")
[<li> ]
<label for="toggle">
<input id="toggle" type="checkbox" checked>
"Show"
</label>
</li>
If I remember correctly, I've seen this behavior on at least some browsers, where clicking the label both triggers a click on the label and on the input.
So if you ignore the events where e.target.tagName is "LABEL", you'll just get the one event. At least, that's what I get in my tests:
Example with both events | Source
Example filtering out the e.target.tagName = "LABEL" ones | Source
I recommend you use the change event on the input[type="checkbox"] which will only be triggered once. So as a solution to the above problem you might do the following:
$("#toggle").on("change", function(e) {
if ($(this).is(":checked"))
console.log("toggle: Show");
else
console.log("toggle: Hide");
});
https://jsfiddle.net/ssrboq3w/
The vanilla JS version using querySelector which isn't compatible with older versions of IE:
document.querySelector('#toggle').addEventListener('change',function(){
if(this.checked)
console.log('toggle: Show');
else
console.log('toggle: Hide');
});
https://jsfiddle.net/rp6vsyh6/
This behavior occurs when the input tag is structured within the label tag:
<label for="toggle"><input id="toggle" type="checkbox" checked>Show</label>
If the input checkbox is placed outside label, with the use of the id and for attributes, the multiple firing of the click event will not occur:
<label for="toggle">Show</label>
<input id="toggle" type="checkbox" checked>
I found that when I had the click (or change) event defined in a location in the code that was called multiple times, this issue occurred. Move definition to click event to document ready and you should be all set.
Not sure why this wasn't mentioned. But if:
You don't want to move the input outside of the label (possibly because you don't want to alter the HTML).
Checking by e.target.tagName or even e.target doesn't work for
you because you have other elements inside the label
(in my case it had spans holding an SVG with a path so e.target.tagName sometimes showed SVG and other times it showed PATH).
You want the click handler to stay on the li (possibly because you have
other items in the li besides the checkbox).
Then this should do the trick nicely.
$('label').on('click', function(e) {
e.stopPropagation();
});
$('#toggle').on('click', function(e) {
e.stopPropagation();
$(this).closest('li').trigger('click');
});
Then you can write your own li click handler without worrying about events being triggered twice. Personally, I prefer to use a data-selected attribute that changes from false to true and vice versa each time the li is clicked instead of relying on the input's value:
$('ul.submenu li').on('click', function() {
let _li = $(this),
ticked = _li.attr('data-selected');
ticked = (ticked === 'false') ? true : false;
_li.attr('data-selected', ticked);
_li.find('#toggle').prop('checked', ticked);
});