I am using angular-bootstrap-lightbox and would like to add a callback function when the image is changed.
Specifically, on the mobile view, when a user swipes right or left, I want to get the image id, as well as the direction of the swipe.
This code works fine to initialize the lightbox:
$scope.openLightboxModal = function(index) {
Lightbox.openModal($scope.images, index);
}
How do I add a callback function to the above so as to register the image change event?
Thanks!
Got it!
On this line in the angular-bootstrap-lightbox.js file:
https://github.com/compact/angular-bootstrap-lightbox/blob/0cfd9aea6e1ed7a192614c6ee4480e13dfdfbeb9/dist/angular-bootstrap-lightbox.js#L13
You can change thit ng-swipe-right=Lightbox.prevImage() to something like ng-swipe-right=Lightbox.myFunction() and in my controller, I have access to that event!
Related
I would like to a pass a record from a grid to a window that I create,
Ext.create('MyWindow',
{recordRef: record}).show();
where record is an argument that is passed into my rowdblclick function but when I try to access recordRef (like below) during debugging, it is undefined.
var me = this;
var record = me.getView().recordRef;
The code fragment above is in a controller for MyWindow.js
The reason this is happening is probably because you are using an event to access recordRef that is called before the constructor assigns recordRef to your window as a property.
My advice would be to use the show event just to be sure, here is a fiddle: https://fiddle.sencha.com/#view/editor&fiddle/232m
You can access custom configs you add to a component with getConfig - in this case it would be this.getConfig('recordRef')
Here's a small fiddle where the custom config is logged to the console, and set to be the window's title.
I need to load a specific JavaScript function after one of the tabs in the tabbar finishes loading (after it is clicked for the first time). I don't really understand how to set up an event listener with the onsen-ui tabbar (ons-tabbar), and the docs were not very clear.
Basically, what I am trying to do, is create a few graphs on one of the pages. This page is loaded up when a ons-tab is selected and the partial loads. However, I need the JavaScript that creates the graphs to only load after the page is loaded (the JavaScript looks for the elements to position the graph in the partial, hence my problem right now is that the JS is loading first and not finding the html elements in the partial because they have't been loaded yet). How do I create an event listener to detect when one of the tabs are selected to run a specific code of JavaScript?
To be a little bit more clear, I am using the persistent attribute on this specific tab, so essentially I only need this event listener to run the JS code once, when the tab is first opened. However, I don't understand how to get the once event listener to work...
For the reference: http://onsen.io/reference/ons-tabbar.html#methods-summary
There are three tabbar methods related to events: on, once and off.
That means the way to use them is myTabbar.on(...), for example. You can see in that link their parameters as well. Also, right below there are the three tabbar events. In this case I think you want to use postchange, right?
In your HTML you create a tabbar and assign it to a variable with var attribute, as I am sure you already know:
<ons-tabbar var="myTabbar">
<ons-tab page="tab0.html" label="Tab0" active="true"></ons-tab>
<ons-tab page="tab1.html" label="Tab1"></ons-tab>
<ons-tab page="tab2.html" label="Tab2"></ons-tab>
</ons-tabbar>
Now, you have to wait until the app is initialised and Onsen UI is loaded in order to set the event listeners, and you can use ons.ready() for that.
Going back to the tabbar events method, since you only need to trigger the functionality with a specific tab you need to filter the tabs inside the listener. Therefore, if you use myTabbar.once('postchange', ...) the listener itself will be triggered only once regardless the filter you set inside, so perhaps it will be triggered with a different tab and then deleted for the tab you want. You cannot use it in this case.
Instead of that, you can set a listener with myTabbar.on('postchange', ...) that triggers always, then filter the tabs inside and remove the listener only when you want with myTabbar.off('postchange'). Something like this:
ons.ready(function() {
myTabbar.on('postchange', function(event) {
// Only with the tab we want, we can use the index or the name
if (event.index === 2) {
console.log('postchange and do stuff with the tab');
console.log(event.tabItem);
// Delete this listener so it's only triggered the first time
myTabbar.off('postchange');
}
});
Working here: http://codepen.io/frankdiox/pen/QbYEaq
In case you have other listener over postchange, you can use the second parameter of myTabbar.off(...) to remove the exact listener you want and not the others.
Hope it helps!
I'm using Sencha Touch 2 and wonder how I listen to the Store's refresh event in my Ext.dataview.List? I want that my list automatically updates when there are new records in my store, so the refresh event seems to do the job for me, but how do I set up a listener?
Edit: Thanks to Anand Gupta I realized my problem isn't refreshing the list but just displaying it. So I will give you some more information and hope you can help me. I use NavigationView inside tabpanel. I have one list loading from localstorage which works just fine, if you tap disclose indicator you come to a form with a button "auto complete".
By tapping autocomplete the following method is called:
e.stopEvent();
var lastname = this.getNewUserForm().down("textfield[name=lastname]").getValue();
if(lastname!=="")
{
var complete = this.getApplication().getController("Complete");
this.getUserNav().push(complete.getView());
complete.setSearch(this.getNewUserForm().down("textfield[name=firstname]").getValue(), lastname);
}
else
{
//errormessage
}
The getView() method is a ref with auto create and the "setSearch" Message on Complete Controller simply loads the Store through jsonP Proxy:
var store = Ext.getStore("Playernames");
store.setParams({firstname:firstname, lastname:lastname});
store.load({callback: function(){
console.log(this);
}});
I added a log to see that the store is properly loaded and store is properly loaded.
Thanks for help
Ok after some more hard search I found my bug: I had a List view embedded in a Panel with an undefined layout. So I changed the layout to "fit" and it works fine.
How to Get the mouse position, in "onRegionOver:function(event,code,region)" in jqvmap???
The event object in the function, doesn't have the properties from mouse position.
I need show a div, with extra country information, when the mouse overs the region.
thank you very much!
First of all I am not sure if this is a right approach or not. If you open the jquery.vmap.js plugin file, check out this code:
if (e.type == 'mouseover') {
jQuery(params.container).trigger(regionMouseOverEvent, [code, mapData.pathes[code].name]);
Change the code of the following line to:
jQuery(params.container).trigger(regionMouseOverEvent, [e, code, mapData.pathes[code].name]);
This event e is passed as a parameter to the function in the plugin. And in your call back function add one more parameter
onRegionOver:function(event,e,code,region){
alert(e.pageX,"_",e.pageY);
}
This worked for me...Hope this Helps for you
I'm using extJS 4.
I have a form pop up every time you click edit profile.
The problem is that every time you click edit Profile another form pops up so you can just keep clicking.
Is there a way to make the form only pop up if there isn't one already up.
Thanks for the help!!!
The problem sounds like you are creating a new window on every click of the "edit profile" button/link.
What you need to do is put a check in at the beginning of your form code to check to see if it exists first. If it doesn't, create the window and .show() it... Otherwise, you will just need to .show() it. Be sure to also reset the form if need be. You will also want to try and hide the window instead of destroying it. Otherwise, you will be creating new objects every time.
You can make your form modal, so to block entire interface until you close it, or you can use something like this to your controller to create form:
editProfile: function(button) {
var me = this;
if (!me.win) {
me.win = Ext.widget('editProfile');
// delete the me.win reference if the window gets destroyed
me.win.on('destroy', function() {
delete me.win;
return;
});
}
me.win.show();
}