Is it possible to add a component, like Button to a ToastBar? I want to add an action button that loads a new form when its clicked. Or is there any method exposed to add listeners to a ToastBar component?
You can't add an actual button to ToastBar at the moment but you can add an action event.
// 10 seconds on screen
ToastBar.showMessage("I am a toast message", FontImage.MATERIAL_OPEN_WITH, 10000, e -> {
// ToastBar clicked, go to next form
});
Sure use something like:
tb.addMaterialCommandToRightSideMenu("", FontImage.MATERIAL_OPEN_WITH, e -> {
// button click event
});
Related
I'm using Angular Material to create my toggling panels. I still want my panel to expand and contract when clicking the arrow, but I not when I click anywhere in the panel header because I want to add a checkbox at the top. Currently, when I click on my checkbox, the toggling event of the panel fires when I click the checkbox. The 'change' event of the checkbox still fires afterward.
I don't mind to have the panel toggles only when clicking its arrow, how do I stop the toggling of the panel from firing when clicking anywhere in the top?
HTML
<mat-expansion-panel #panel
(opened)="togglePanel()"
(closed)="togglePanel()">
<mat-expansion-panel-header>
<mat-panel-title>
<mat-checkbox (change)="onCheckChanged($event)">
<label>Options 1</label>
</mat-checkbox>
</mat-panel-title>
<mat-panel-description></mat-panel-description>
</mat-expansion-panel-header>
</mat-expansion-panel>
TypeScript
togglePanel() {
// this event fires before the onCheckChanged event
}
onCheckChanged(event: MatCheckboxChange) {
// this event fires after the togglePanel event
}
There is currently a feature request in for this, about a year old so not sure of the ETA... seems to be some workarounds people are playing with that might help but appear to have mixed reviews.
https://github.com/angular/material2/issues/8190
Revision
I tested the following in stackblitz and it seems to work.
HTML
<mat-accordion>
<mat-expansion-panel #expansionPanel>
<mat-expansion-panel-header (click)="expandPanel(expansionPanel, $event)">
Component
expandPanel(matExpansionPanel, event): void {
event.stopPropagation(); // Preventing event bubbling
if (!this._isExpansionIndicator(event.target)) {
matExpansionPanel.close(); // Here's the magic
}
}
private _isExpansionIndicator(target: EventTarget): boolean {
const expansionIndicatorClass = 'mat-expansion-indicator';
return (target['classList'] && target['classList'].contains(expansionIndicatorClass) );
}
Stackblitz
https://stackblitz.com/edit/angular-5kugm3?embed=1&file=app/expansion-overview-example.html
I have a PopOver page and I pass a string message to it, what I want is use this popover as a Tooltip for some elements on the page.
Example, on my page I have this:
<button ion-button icon-only clear (click)="shareThisCardByEmail(item)" (blur)="showTooltipShareByEmail($event)" >
Share
</button>
In this case I am associating the event "blur" (I am not sure what would be the best for this case) and I need when the view is loaded that event is shot and the popover is shown to the user.
On the component I have this:
showTooltipShareByEmail(event ? : any) {
let popover = this.popoverCtrl.create(PopoverTooltipPage, {
"message": 'This is a message on the tooltip popover about sharing by email'
});
let navOptions: any = {
animate: true,
ev: event
};
popover.present(navOptions);
}
How would I activate one specific event for an specific element on the page then the tooltip would be displayed?
I saw 2 questions but I'm trying to answer this:
I need when the view is loaded that event is shot and the popover is shown to the user
Check this out for the lifecycle events https://ionicframework.com/docs/api/navigation/NavController/.
You can call the popover when the view did load at here
ionViewDidLoad() {
console.log("I'm alive!");
// Right here
}
When the user clicks this camera icon the get a snapshot of the page in a modal. If they click repeatedly it will make multiple snapshots before the modal has loaded and essentially blocked the camera icon.
Is there a way that I can say if a snapshot modal has just been created do not create another one?
events: {
'click .snapshot-camera' : 'clickCamera'
}
clickCamera: (event) ->
event.preventDefault()
#snapshot = new ******.Models.Snapshot({ user_id: ******.State.get('signInUser').id })
You can use underscore's debounce method which prevents double submissions.
// prevent double-click
$('button.my-button').on('click', _.debounce(function() {
console.log('clicked');
/* .. code to handle form submition .. */
}, 500, true);
Have a look into the below article
http://jules.boussekeyt.org/2012/backbonejs-tips-tricks.html
I need some direction in the following situation I have to solve:
I have a 'page' that have some fields that can be edit with 'save' button and with another button to 'navigate' to another place.
If the user edit some fields and click on the 'navigate' button before saving the data, the application should show and message something like:
Confirm Navigation
Button1 -> Leave this page Stay on this page
Button2 -> Stay on this page
I was think that I need some availability of pre-processing, before navigating to another place, Is there some availability in marionettejs before navigating in the AppRouter Or Router objects?, also I need to get some indication from the user, to which button he clicks.
You should have events set up for the buttons
Backbone.Marionette.ItemView.extend({
/* Removed other stuffs*/
events: {
'click #navigateBtn': function(e) {
/* Do your preprocessing in here */
}
}, //events
}
Using Wijmo Open ComponentOne's Dropdown, I tried to place it in a registration form that displays when a button is clicked. This form is inside a jquery modal window.
The problem is that it is not displayed like a wijdropdown inside the form.
I supposed that since is was hidden, then it wasn't part of the DOM and so I added a method in the callback of the function that displayed the modal window; when the modal window finishes displaying, then call the .wijdropdown() on the element. However, it didn't work.
In conclusion: the select tag is not being wijdropdowned...
¿Any recommendations?
Script
$(function() {
// show overlay
$('#product-slideshow-overlay-trigger').live('click', function() {
var $registerOverlay = $('#product-slideshow-overlay');
//left position
var positionLeft = ($(window).width() - $registerOverlay.width())/2;
$registerOverlay.css({'left':positionLeft});
//show mask
$('#mask').fadeIn();
$registerOverlay.slideDown(function()
{
console.log("Started");
/**Add WijmoDropdown***/
$('#estado').wijdropdown(function()
{
console.log("Did the wijdropdown");
});
console.log("Ended");
});
return false
});
}); // end document ready function
Refresh the wijdropdown when the dropdown is not hidden:
$('.wijmo_drp').wijdropdown("refresh");
or
Find the wijmo component and check if it's visible or not (styled or not).
And trigger the visiblity changed event when you display the modal window.
if($('.wijmo-wijobserver-visibility').is(':visible'))
{
$('.wijmo-wijobserver-visibility').trigger("wijmovisibilitychanged");
}