on-hold also firing ng-click on Samsung phones - angularjs

I have two functions openMenu() and openItem()
* If i click on item it will activate ng-click with openItem()
* If i hold, it will trigger on-hold with openMenu() calling $ionicActionSheet.show({.....});
It works fine on Motorola and Asus devices, but Samsung is firing twice.
Is it opening the menu and opening the item (causing the change of the view and closing menu at once)
Any solutions?
PS:
I'm using Ionic Framework
I have discovered something.. If you hold and stay with your finger in the same point before move up yout finger, it will occurs, BUT.. if you do a litte swipe (move to any side, just 1mm movement) it will not!

I had the same problem and found the solution.i code as bellow.
<div ng-repeat="array in location.location track by $id($index)">
<div on-hold="array.qty = 0;array.showInput=true" on-release="array.showInput=false">
<label ng-show="!showDisabled(array.showInput)" ng-bind="array.qty" ng-click="$event.preventDefault();$event.stopPropagation();array.qty = array.qty + 1;></label>
<label ng-show="showDisabled(array.showInput)" ng-bind="array.qty"></label>
</div>
</div>
if i directly write ng-show="array.showIput" AND ng-show="!array.showIput" then ng-click fire after on-hold.
So i took two label one show after on-hold, without click-able label the other label with click-able and show it using the function. Then function is
$scope.showDisabled = function(val){
setTimeout(function(){
if(val){return true;}
else{return false;}
});
}

Related

Aframe cursor fuse working, when it not expected

strange behavior with fuse cursor. I've set fuse false for cursor both mainscene and a-cursor, but fuse still appears on hover.
This problems is apeearing when testing on ios, android. From desktop browser working fine.
<a-camera id="default_angle" camera position="0 0 0" look-controls wasd-controls>
<a-cursor>
<!-- by default click should be not expected on hover object (fuse) -->
</a-cursor>
</a-camera>
...
<a-box id="motor" color="red" position="0 0 -5"></a-box>
<!-- on hover to this object from mobile fuse should not appear -->
...
var motor = document.querySelector('#motor');
motor.addEventListener('click', function (evt) {
alert('clicked');
});
Please checkout this codepen
https://codepen.io/sevenspring/pen/XWWzNvK
Here may be thought, that clicks produced by touch (tap on mobile screen) while cursor is hovered on object.
but you may check this example with gyro.
https://parent.glitch.me
in vr mode we can hover cursor on button "play/pause" by gyroscop moving, it still will produce clicks.
https://glitch.com/edit/#!/join/d1afa869-dea2-47ec-9904-e851e451d832
Answer from Dan S. is correct.
When we use without attribute "cursor" , fusing event is not fired, as it is expected by default
There are actually a number of issues here.
One issue is that the CodePen demo is using <a-cursor fuse="false" cursor></a-cursor>. This is essentially two cursors as you're adding a second one as a component via cursor that hasn't been configured.
Another issue is that cursor fuses by default on mobile if not explicitly set to cursor="fuse: false;"
Another issue is that you're listening for the click event, which is capturing the click when you mouseup after hovering over the entity.
I believe fuse was designed to allow for click without clicking, but while also allowing users to click if they have the ability.
If you want to test when something is fusing exclusively, you may want to try listening for the fusing event rather than click.
<a-cursor fuse="false"><a-cursor>
Or
<a-entity cursor="fuse: false;">
<!-- you will need to provide your own cursor geometry -->
<a-entity>
Then listen for fusing:
this.el.addEventListener('fusing', function (e) {
console.log(e);
});
I hope this helps.

Element not visible with button click in selenium chrome driver

I'm trying to click the continue button after filling in the fields on this webpage. But an exception is thrown saying element is not visible even though I maximize the screen and you can clearly see the button.
I have tried the following even with waiting 10 seconds for the page:
driver.findElement(By.xpath("//*[#id=\"submitButton\"]/span")).click();
driver.findElement(By.cssSelector("#submitButton > span")).click();
driver.findElement(By.partialLinkText("Continue")).click();
driver.findElement(By.className("caret_rebrand")).click();
driver.findElement(By.name("submitButton")).click();
driver.findElement(By.xpath("//span[contains(#class,'red') and contains(text(), 'Continue')]")).click();
Here is the part of the html I am trying to access:
<button style="padding-left: 0px;" type=button" "id=submitButton" class = "nbutton" title = "Continue" onclick=_hblicnk('continue,'continue'); goFeaturePage('true');">
<span style = "padding-right: 12px;" class="red"
"Continue"
<img class="caret_rebrand">
</span>
I expect the continue button to be found and clicked. attached is the picture of the webpage
UPDATE: 8-3-19: I've tested the following pieces of code and it is able to find the element in all cases. But when adding the .click() function to any one of them, it causes a no such element exception.
driver.findElement(By.name("submitButton")).click();
driver.findElement(By.id("submitButton")).click();
driver.findElement(By.cssSelector("#submitButton")).click();
driver.findElement(By.xpath("//*[#id=\"submitButton\"]")).click();
My expectation is that you need to click the <button> element as this <span> might be not clickable at all. You can use i.e. title attribute to uniquely identify the element on the page
It's better to use Explicit Wait to ensure that the button is present and clickable as it might be the case it's not available in DOM right away. Check out How to use Selenium to test web applications using AJAX technology article for more details
Assuming all above I believe you should be able to use below code for clicking the button:
continue_button = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//button[#title='Continue']")))
continue_button.click()

Angular fade animation happening at wrong time during load

We have a popup modal in our Angular application which contains, among other things, a <span> element which should appear, and then fade, when a certain button is clicked. This all works as expected. But there is one problem. When the modal first loads, the <span> momentarily appears, then fades out. The behavior is consistent with the <span> having ng-show set to true, but then set to false at the time the modal is loaded, triggering the fade out transition.
Here is the <span>:
<span id="fileLinkCopied" data-ng-show="copyLinkClicked"
class="text-fade float-right">file copied to clipboard</span>
But the varible $scope.copyLinkClicked is set to false when the controller loads, and hence we would expect to never even seen the <span> being rendered at load time.
Here is the relevant CSS:
.text-fade {
transition: all linear 500ms;
opacity: 1;
}
.text-fade.ng-hide {
opacity: 0;
}
This problem was discussed in this SO question, but no definitive solution was given. We have pondered turning off the animation for this element, but this may have problems as well.
Any solution which gets the job done within normative usage of Angular would be greatly appreciated.
One quick workaround would be to add another span tag as the parent of your span element. You can then add an ng-if condition to the parent element and use a variable that is set to false initially in the if condition. This would make sure that the child span is not rendered when the page loads and therefore you wouldn't see the animation. You can then set the value of that variable to true on document ready event.
Here is the <span>:
<span ng-if="firstLoad "><span id="fileLinkCopied" data-ng-show="copyLinkClicked"
class="text-fade float-right">file copied to clipboard</span><span>
In your controller add the following:
$scope.firstLoad = false;
angular.element(document).ready(function () {
$scope.firstLoad = true;
});

Angular: Fading out element and then setting display none

When I click an element, I'd like another element to first fade out, and then be set to display: none.
I have the following code:
Partial:
<div class="main_menu_image" ng-class="{ fadeOut : MenuOpen==true }" /></div>
<div class="button" ng-click="ActivateMenu()"></div>
Then in my controller:
$scope.MenuOpen = false;
$scope.ActivateMenu = function(){
$scope.MenuOpen = $scope.MenuOpen === false ? true: false;
}
So when I click the button, element main_menu_image gets the class fadeOut. So it now fades out. But after the fading animation completes I would also like to set display to none on main_menu_image so it is completely hidden.
I don't want to resort to jQuery. Is there an Angular approved way of doing this?
Yes it's very easy to do:)
Like Svein says, you can use ng-show, and you can use ng-hide.
Working fiddle here
This hides things instantly though. But you can for example set a timeout, via the $timeout service, and set your hiding boolean in that way.
You can also use ng-if, this actually removes the element from the DOM if the condition is not met, rather than just setting display:none.
Update: Here's a more proper fiddle showcasing what you're trying to do
You can use ngShow. If you use the ngAnimate module, you'll have built in support for animations for most built-in Angular directives.
See here for more information:
https://docs.angularjs.org/guide/animations

How to catch dojox.mobile.view events?

I am developing a mobile web app using dojo. I have a view with a video in it.
<div id="v1" dojoType="dojox.mobile.View">
<h1 id="h1" dojoType="dojox.mobile.Heading" back="Media" moveTo="media">IT Models</h1>
<video id="vid1" controls width="100%" poster="itModels.jpg"><source src="itModels.m4v"></video>
</div>
When I start the video on the view and then click the back button to go to another view, media, the video keeps playing. I want to catch the event when the v1 view is no longer visible so I can turn off the video with a dojo.byId("vid1").pause();
My issue is that I can't catch any of the events associated with the V1 view
There is documented a number of events associated with dojox.mobile.view at http://dojotoolkit.org/api/1.6/dojox/mobile/View but I can't catch any. I have tried with both the dojo.connect and the new 1.7 dojo.on function.
dojo.on(dojo.byId("v1"),"onAfterTransitionOut",function() {dojo.byId("vid1").pause()});
The onAfterTransitionOut event never gets fired.
Any ideas?
I ended up punting and doing something like this to make it work:
dojo.subscribe("/dojox/mobile/afterTransitionOut","v1",function(x) {if (-1 != x.toString().indexOf("v1"))dojo.byId("vid1").pause();});

Resources