is it possible to know or intercept when an accordion is open or closed with angular-ui-bootstrap, only when transition is ended?
So, when one accordion content is open i can refresh iScroll instance.
Looking at
https://github.com/angular-ui/bootstrap/blob/master/src/collapse/collapse.js
There does not seem to be any event triggered on collapseDone() or expandDone() that you can hook into.
The only way you can really do this is to watch when the class 'collapsing' exists (meaning collapsing is happening), then you know collapsing is over when that class goes away.
$scope.$watch(function() {
return $('.panel-collapse').hasClass('collapsing');
}, function(status) {
if ($scope.collapsing && !status) {
console.log('done collapsing');
}
$scope.collapsing = status;
});
Similar question: AngularJS - Find end of collapse animation
Related
I have, listing of many separate items (or tiles) in a list on my page. If the user drags a file over the an item in the list, I conditionally add the highlight class in the onDragEnter and remove the class in the onDragLeave. The highlight class essentially changes the background-color of the item.
Without using a $scope.$apply, the highlight takes a second or so before being reflected in the UI, so I am wrapping the highlight within the $scope.$apply.
Now when I move the file quickly between items, the performance becomes really slow (the highlighting and un-highlighting becomes very slow) due to the large number of digest cycles. Any ideas on how I can improve the performance but at the same time have the changes reflected in the UI pretty quickly.
I tried using $scope.$digest() instead of $scope.$apply but did not notice any improvement in the performance.
My code is:
function onDragEnter() {
$scope.$apply(function() {
$scope.highlight = true; // this controls if the highlight class is added to the item using ng-class
});
}
function onDragLeave() {
$scope.$apply(function() {
$scope.highlight = false;
});
}
In case this helps someone, using $scope.$evalAsync helped improve the performance significantly.
function onDragEnter() {
$scope.$evalAsync(function($scope) {
$scope.highlight = true; // this controls if the highlight class is added to the item using ng-class
});
}
function onDragLeave() {
$scope.$evalAsync(function($scope) {
$scope.highlight = false;
});
}
How can I prevent to have multiple popover windows open? There should only be one open at a time.
Please see my punkr: http://plnkr.co/edit/MjP1AlygixXHEOC3Jd5a
Within my plunkr, I use an updated ui-bootstrap 0.10 from jbruni (his plunkr is here:
http://plnkr.co/edit/B2wEis?p=info)
When hovering about the two windows there is a chance that two popup windows are open at the same time. :(
If you force off the animation, then the turn off delay seems to work. Not a clean solution but sort of works. You still have a chance to get two popovers at once since there is no function to delay the start of a new popover if there is one pending the turn off.
http://plnkr.co/edit/a8XHo7FKhrqv37mWTPBk?p=info
if ( scope.tt_animation ) {
// transitionTimeout = $timeout(removeTooltip, 500);
setTimeout(function(){scope.tt_animation=false;hide();},500);
} else if ( scope.tt_popdown ){
vanishTimeout = $timeout(removeTooltip, 2000);
} else {0
removeTooltip();
}
I have written a directive that wraps a popover control and uses the popover-is-open to trigger the popover opening and closeing.
To close any open popovers I trigger a custom event on the parent scope:
$scope.openPopup = function()
{
$scope.$parent.$broadcast("multiSelectSinglePopoverInstanceEvent", {});
$scope.isPopupOpen = !$scope.isPopupOpen;
}
In the custom popover controls controller I handle the event by closing the popover:
$scope.$on("multiSelectSinglePopoverInstanceEvent", function (event, args) {
$scope.isPopupOpen = false;
});
This may help
If I have a View in backbone.js and it has an event in the events list:
events: {
'click #somebutton': 'clicked'
},
clicked: function () {
console.log('clicked');
}
How can I then disable/enable that event? So for instance if its clicked then
the event is removed (the button remains on screen but is greyed out etc). When some other part of the view is updated or whatever the event
enabled. Sure I can use jquery but I want to know if this functionality is available in backbone.
Thanks for any answers
Paul
You can always use delegateEvents() and undelegateEvents() to redo your event binding between the DOM and your Backbone View. That said, I usually just keep the event handler and add a conditional in the handler.
// .disabled class (CSS) grays out the button
clicked: function(event) {
var buttonEl = $(event.currentTarget);
if (buttonEl.hasClass('disabled')) {
// Do nothing
} else {
// Do something AND...
buttonEl.addClass('disabled');
}
}
Then you can have your other view or code simply removeClass('disabled') when you want to restore functionality.
UPDATE - disabled property
See comments, but a simpler, much better solution is to use the disabled property disabled="disabled" of buttons.
Use delegateEvents and undelegateEvents for binding and unbinding events. Check for reference: delegateEvents
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");
}
I'm using the rowEditing on my grid in my mvc application. I'm able to handle the event when the user clicks update. However i'm having issues get the selected record. The below behaves strangely. I do not get the record.data.Name value the first time i click update. Tho i can see the value in fire bug.
init: function () {
this.control({
'button[text=Update]': {
click: this.onMaterialUpdate
}
});
},
onLaunch: function () {
},
onMaterialUpdate: function (button) {
var grid = Ext.getCmp('materialsContainer');
var record= grid.getSelectionModel().getSelection()[0];
if (record != null) {
console.log(record.data.Name);
}
}
Not sure about it... but I think the click event happens before completeEdit, thus the record is neither committed, nor updated in the grid (or its selection).
Perhaps try to capture the edit event of the row editor instead of click? You should get the correct record there?
I'd suggested handle edit event of the RowEditor plugin. You could subscribe to this event on grid render event for example. By getting the plugin by pluginId.