I am looking to set an ionic button's state to active, but this isn't documented at all in the API docs. As of right now, when you click the button, the "activated" class is added to the button, and then removed a few moments later.
This can be done via [ngClass]="{'activated' : YourVariableHere }"
HTML:
<button class="post-button" [ngClass]="{'activated' : buttonActive}"ion-button outline small icon-left">
Component code:
buttonActive: boolean = true;
Related
I have a simple Ionic v1 app that displays a list of items. Clicking on an item navigates the user to a new view displaying info about the item.
If the user selects a second before the first item is loaded, the app will navigate to both views respectively, which is an issue.
Is there a way to prevent this via an ionic config or angular?
Note I am using Ionic Native Transitions, but this issue seems to be independent
*Edit * I know I can use something like a 'loading' modal to prevent clicks, but then I'll have to do this for every single list in the application that loads data, so that doesn't sound ideal
I ended up utilizing inoicNativeTransition.beforeTransition in order to render a modal-style backdrop that prevents users from clicking for 300ms
$rootScope.$on('ionicNativeTransitions.beforeTransition', function(){
$rootScope.stateTransitioning = true;
$timeout(function(){
$rootScope.stateTransitioning = false;
}, 300)
});
HTML
<div ng-show="stateTransitioning === true" id="inivisible-backdrop"> </div>
I don't hide the backdrop on the success of the transition, because there seems to be an inconsistent lag between when the view is changed and the transition is marked as 'successful'. 300ms seems to work just fine
I am using cordova-google-maps plugin with my ionic 2 app, and I want to show the menu (sidenav) on that page. Problem is for the sidenav to receive events properly I need to call map.setClickable( false ) while opening the sidenav and set it back to true when the user closes the sidenav. It seems there is an event for checking while the menu is being opened with opening, but I don't know how to track when the user closes the menu.
For using ionDrag, ionOpen, ionClose in Ionic2 you must add it on the menu itself
for example modify menu in your app.html file by
<ion-menu [content]="content" (ionOpen)="menuOpened()" (ionClose)="menuClosed()">
After I use "Events" see doc here: http://ionicframework.com/docs/v2/api/util/Events/
For detect in my page if the menu was close or open.
Example in my app.ts
menuClosed() {
this.events.publish('menu:closed', '');
}
menuOpened() {
this.events.publish('menu:opened', '');
}
And in my other page
events.subscribe('menu:opened', () => {
// your action here
});
events.subscribe('menu:closed', () => {
// your action here
});
I hope this help
It seems new events have been added to the menu component which solves this problem. I am also using the google maps plugin and it works fine
http://ionicframework.com/docs/v2/api/components/menu/Menu/
ionDrag
When the menu is being dragged open.
ionOpen
When the menu has been opened.
ionClose
When the menu has been closed.
Using these output events, in your handlers you can keep a flag for the menu if its open or not :)
I am working on a mobile application that has a list of items, each of which contain toggle buttons. When the Accessibility (Voice over) mode is turned on, the focus on these list items is enabled but double-tapping the item does not turn ON/OFF the toggle button.
Here's the code sample that I am using. It reads the content but the on-tap or ng-click methods are not triggered.
The below code focuses on the item but when it is double tapped, the toggle does not turn ON/OFF. Same behavior is observed on iOS and Android. Any ideas?
HTML
<ion-list>
<ion-toggle role="option" toggle-class="toggle-balanced" ng-repeat=“item in items" tabindex="-1" ng-model="item.isToggleOn" ng-change=“item.isToggleOn" on-tap=“updateSettings(item)" aria-label=“Item description,, Double Tap to toggle setting." >
<div class="pref-item-text-wrap” >Item description</div>
</ion-toggle>
</ion-list>
In the Controller:
$scope.updateSettings = function (item) {
console.log("In update settings");
}
Heres a little hack to get it working.
In you SASS, after importing Ionic, you need to overwrite the pointer-events property of the toggle component:
// accessible toggles
.item-toggle {
pointer-events: all;
.toggle {
pointer-events: none;
}
}
Please note that this makes the toggle not react to click events unless you handle that event manually on item level, eg:
<ion-toggle role="checkbox" aria-checked="{{isChecked}}" ng-model="isChecked" ng-click="isChecked=!isChecked">Toggle item</ion-toggle>
Events like gestures and keyboard events are intercepted by screen readers. You can use the correct roles to allow the screen reader to pass the appropriate event through to your JavaScript event handlers.
Also, note that when the screen reader is turned on, the gestures change. A single-tap becomes a double-tap on iOS and a double-tap becomes a triple-tap. See http://axslab.com/articles/ios-voiceover-gestures-and-keyboard-commands.php
Similar changes happen on Android.
That being said, you have many things wrong with that little bit of code:
If the tabindex is -1, it will not be focusable for a keyboard-only user and is therefore not accessible by all users. You need to make sure that the tabindex is set to 0
The behavior you are describing is more akin to a checkbox or radio role than it is to an option. You should probably be using the checkbox role.
The parent of an option must be a listbox role as can be clearly seen in the spec http://www.w3.org/TR/wai-aria/roles#option, if you do use listbox in combination with option, you need to set aria-multiselectable to true
In any case, when you implement one of these roles, you must maintain the appropriate aria-* state properties and then you must use a device-independent event handler. You may have to use the ng-click in combination with ngAria to get the required behavior. Make sure that you test with a keyboard only and no screen reader (on Android) and with a keyboard and a screen reader (on iOS and Android) as well as touch and a screen reader (on iOS and Android).
I wanted to migrate my existing add-on for firefox and chrome to crossrider in order to have it also with safari and IE, but i've a few doubts that mayble Schlomo (or any Crossrider developercan) can help me to solve them.
Questions :
Can i add a popup pane when someone clicks on the add-on button showing some kind of options inside it?
Can i add a blinking icon to the actual icon showing some kind of event happened like incoming chat or so?
Is there a way to add the red text box like in chrome showing at the bottom right of the icon some kind of text?
Thanks a lot!
When you pose the question like that, I can only hope the following answers will serve to allay your doubts and enlighten :)
First off, I would recommend familiarizing yourself with How to add a browser button to your Crossrider extension in general and the button popup feature specifically.
In answer to your specific questions:
You can use the button popup feature and build the required options in there. Take a look at the Button Popup Menu demo extension to get you started.
Whilst you can't make the button blink, you can alternate the button icon to make it look like blinking (see example).
In short, yes. Simply use the appAPI.browserAction.setBadgeText and appAPI.browserAction.setBadgeBackgroundColor methods (see example).
The following example bring together the key elements in the background.js code required to achieve the solutions mentioned. Look at the popup.html file in the Button Popup Menu for an example of how to build the options page.
appAPI.ready(function() {
var sid, // Blink interval id
alt=0, // Blink alternation state
icon = { // Blink icons
0: 'icons/icon0.png',
1: 'icons/icon1.png'
};
// Set the initial icon for the button
appAPI.browserAction.setResourceIcon(icon[0]);
// Sets the popup for the button
appAPI.browserAction.setPopup({
resourcePath:'html/popup.html',
height: 300,
width: 300
});
if (true) { // blink condition, set to true for this example
// Blink icon
sid = appAPI.setInterval(function() {
alt = 1 - alt;
appAPI.browserAction.setResourceIcon(icon[alt]);
}, 1 * 1000);
} else {
appAPI.clearInterval(sid);
}
if (true) { // show button text condition, set to true for this example
// Add red text box to icon
appAPI.browserAction.setBadgeText('ext', [255,0,0,255]);
}
});
[Disclosure: I am a crossrider employee]
I'm using Fancybox afterShow to display image descriptions on the side via overlay like so:
afterShow : function (){
var description = "<div class='hidden_tab'>"+$("#tab").html()+"</div>"
$('#fancybox-overlay').html(description);
}
The problem is that I need modal to be false so users can click out. But the hidden_tab tabs, when clicked, also exit fancybox.
Is there a way to section where modal takes affect? Or a workaround? I have tried setting z-index for the hidden_tab to be high but this did not do the trick.
If you need to set modal : false then try adding closeClick : false (which prevents closing when clicking INSIDE fancybox)
BTW, the default value of modal is false. Don't assume that people will necessarily understand why modal was set to true in your script.