I have a directive to have a sorting icon on a table column (fa-caret-up, fa-caret-down) When i mouseenter on the column header, it should show opposite direction of existing otherwise default direction desc.
I am able to get the events click, mouseenter and mouseleave.
Now the problem is, when you go over a column to click, triggering is not appropriate and it is removing sort icon.
Is there a way to combine both click and mouseenter events to trigger first click and mouseenter event next?
This is my code.I need to implement something like ele.bind("click mouseenter") or order events click then implement mouseeneter:
var upSortClass = "fa fa-caret-up";
var downSortClass = "fa fa-caret-down";
var iconClass = ".icon-sort";
var addIconClass ="";
var removeIconClass ="";
ele.bind('click', function () {
var ic = ele.find(iconClass);
ic.addClass(addIconClass);
addIconClass ="";
});
ele.bind('mouseenter', function () {
var ic = ele.find(iconClass);
var sortUp = ic.hasClass(upSortClass);
var sortDown = ic.hasClass(downSortClass);
if(sortUp) {
addIconClass = upSortClass;
removeIconClass = downSortClass;
ic.removeClass(upSortClass);
ic.addClass(downSortClass);
}
if(sortDown) {
addIconClass = downSortClass;
removeIconClass = upSortClass;
ic.removeClass(downSortClass);
ic.addClass(upSortClass);
}
if(!sortUp && !sortDown) {
removeIconClass = downSortClass;
ic.addClass(downSortClass);
}
});
ele.bind('mouseleave', function () {
var ic = ele.find(iconClass);
ic.removeClass(removeIconClass);
ic.addClass(addIconClass);
addIconClass ="";
removeIconClass ="";
});
please guide.
Thanks in advance.
Related
I am working on an application which is using ammaps. I have a number of points located on the map based on longitude and latitude value. I have achieved single click functionality by using the following code:
map.addListener("clickMapObject", function (event) {
$scope.$apply(function(){
$scope.colorPoints();
$scope.selectedRow = event.mapObject.idBase;
});
});
I want to achieve the functionality of double click. Could anyone let me know how I could do that in amMaps.
Technically, amMap does not support double-click events. However, you can simulate it with a clickMapObject event.
For that you'll need to ignore the first click. If the subsequent clickMapObject happens within 500ms or so, you register it as double-click.
Something like this:
map.addListener( "clickMapObject", function( event ) {
if ( false !== map.clickedObject && map.clickedObject === event.mapObject ) {
// doubleckick
map.clickedObject = false;
$scope.$apply( function() {
$scope.colorPoints();
$scope.selectedRow = event.mapObject.idBase;
} );
} else {
clearTimeout( map.clickedObjectTimeout );
map.clickedObject = event.mapObject;
map.clickedObjectTimeout = setTimeout( function() {
map.clickedObject = false;
}, 500 );
}
} );
In Extjs, I want to know whether I can restrict the dragging of elements within a specific x,y co-ordinates, just like an option, containment in jQuery-UI.
Currently this is my code:
abc.prototype.initDrag = function(v) {
v.dragZone = new Ext.dd.DragZone(v.getEl(), {
containerScroll : false,
getDragData : function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10);
var t = e.getTarget();
var rowIndex = abc.grid.getView().findRowIndex(t);
var columnIndex = abc.grid.getView().findCellIndex(t);
var abcDragZone = v.dragZone ; //Ext.getCmp('idabcDragZone');
var widthToScrollV = $(window).width()-((columnIndex-1)*100);
var widthToScrollH = $(window).height()-((5-rowIndex)*30);
abcDragZone.setXConstraint(0,widthToScrollV);
abcDragZone.setYConstraint(widthToScrollH,0);
if ((rowIndex !== false) && (columnIndex !== false)) {
if (sourceEl) {
abc.isDragged = true;
def.scriptGrid.isDraggableForObject = false;
def.scriptGrid.dragRowIndex = false;
d = sourceEl.cloneNode(true);
d.id = Ext.id();
d.textContent = "\$" + abc.grid.getColumnModel().getColumnHeader(columnIndex);
return {
ddel : d,
sourceEl : d,
sourceStore : v.store
}
}
}
},
getRepairXY : function() {
return this.dragData.repairXY;
},
});
}
But the problem is that the initdrag is called when the csv sheet is added to DOM. Only when its added that element can be accessed and the individual cells' drag limits can be set. So once I add a csv, the limits are not getting set. If I add it again to DOM then the limits work. Is there an option like the jQuery UI containment for draggable, here in extjs?
edit:
I even tried :
constrainTo( constrainTo, [pad], [inContent] )
body had an id of #abc
when I tried with
dragZoneObj.startDrag = function(){
this.constrainTo('abc');
};
which is a method of the DragZone class. It still did not cover the whole body tag.
I'm trying to create two panes inside a tab bar programmatically using the following code:
var middlePanel = new LayoutPanel
{
Orientation = Orientation.Vertical,
DockHeight = new GridLength(250)
};
rootPanel.Children.Add(middlePanel);
var paneGroup = new LayoutAnchorablePaneGroup
{
DockHeight = new GridLength(200)
};
middlePanel.Children.Add(new LayoutDocumentPane());
middlePanel.Children.Add(paneGroup);
var validationEditorPane = new LayoutAnchorablePane();
paneGroup.Children.Add(validationEditorPane);
validationEditorPane.Children.Add(new LayoutAnchorable { ContentId = "Validation", Title = "Validation" });
var searchEditorPane = new LayoutAnchorablePane();
paneGroup.Children.Add(searchEditorPane);
searchEditorPane.Children.Add(new LayoutAnchorable { ContentId = "Search", Title = "Search" });
However, the code above creates the two panes next to each other without tabs. During runtime I can drag the Search pane onto the Validation pane to move them into tabs. This suggests that it must be possible to achieve this programmatically, but I cannot see how.
Any suggestions?
This turned out to be easier than I thought. All I had to do was to add the LayoutAnchorables to the same LayoutAnchorablePane object:
var tabPane = new LayoutAnchorablePane();
paneGroup.Children.Add(tabPane);
tabPane.Children.Add(new LayoutAnchorable { ContentId = "Validation", Title = "Validation" });
tabPane.Children.Add(new LayoutAnchorable { ContentId = "Search", Title = "Search" });
I'm trying to implement Alert/Confirmation dialog boxes using the bootstrap modal service in my angular app. I want to make it generic, based on the parameter that I pass to the modal's controller it will either behave as the alert box where the user can just close it on reading the message on the modal and also it can behave like a confirmation dialog where the user should say either 'OK' or 'Cancel' I need to capture the response from the user which I'm able to. Now, the problem here is that i've list of items say in a grid and when ever user wants to delete an item from the list I need to show the confirmation message box and based on the user response I need to either delete the item or leave it if users wishes to leave it in the list, but my item is being deleted first and then the confirmation dialog is showing up, I've tried using the call back but still no use. Please help me if anyone came across this situation.
Method that shows the alert:
$scope.showAlertMessage = function (modalName,commands,callback)
{
var modalOptions = {};
var alertMessageText;
var okBtn;
var cancelBtn;
var autoCloseTimeout;
$scope.modalResp === false;
if (modalName === 'ItemNotEligible')
{
modalOptions['template'] = 'application/Views/ItemNotEligibleAlert.html';
modalOptions['cntrlr'] = 'itemAlertsController';
modalOptions['winClass'] = 'item-alert-win';
alertMessageText = commands.alertMessage.text;
okBtn=true;
cancelBtn = false;
autoCloseTimeout=commands.alertMessage.autoDismissalTimeout;
}
else if (modalName === 'ItemDelete')
{
modalOptions['template'] = 'application/Views/ItemNotEligibleAlert.html';
modalOptions['cntrlr'] = 'itemAlertsController';
modalOptions['winClass'] = 'item-alert-win';
alertMessageText = commands.alertMessage.text;
okBtn = true;
cancelBtn = true;
autoCloseTimeout = commands.alertMessage.autoDismissalTimeout;
}
var params = { alertMessage: alertMessageText};
var modalInstance=$modal.open({
templateUrl: modalOptions.template,
controller: modalOptions.cntrlr,
windowClass: modalOptions.winClass,
resolve: {
modalParams: function () {
return params;
}
}
});
modalInstance.result.then(function (selected) {
$scope.modalResp = selected; //Response from the dialog
});
callback($scope.modalResp);
}
Method where the delete item logic exists and call to show alert method is made
this.voidItem = function (skuid) {
alertMessage.text = 'Are you sure you want to remove <strong>' + itemdata[itmid].split('|')[0] + '</strong> from your list?';
$scope.showAlertMessage('ItemDelete', commands, function (userresp) {
if (userresp === true) {
var lineId = 0;
for (var i = itemListState.length - 1; i >= 0; i--) {
if (parseInt(itemListState[i].item) === itmid && Boolean(itemListState[i].isItemVoid) != true) {
lineId = itemListState[i].Id;
if (lineId != 0) {
break;
}
}
}
poService.DeleteItem(itmid, lineId, function (modal) {
virtualtable = modal;
$scope.itemCount = $scope.itemCount - 1;
$scope.createlist(itmid);
});
}
});
}
The problem is that you are executing the callback instead of chain the method to the result of the promise
modalInstance.result.then(function (selected) {
callback($scope.modalResp); //Once the promise is solved, execute your callback
$scope.modalResp = selected; //Why you need to save the response?
// If the user press cancel o close the dialog the promise will be rejected
}, onUserCancelDialogFn);
A more simple way:
modalInstance.result
.then(callback, onErrBack);
I would like to have checkBoxes inside a comboBox, like in this simplified example :
var rawData = [];
for (var i = 0; i < 20; i++) {
rawData.push(i);;
}
var data = new qx.data.Array(rawData);
var list = new qx.ui.form.ComboBox();
list.setWidth(150);
this.getRoot().add(list);
var controller = new qx.data.controller.List(null, list);
var delegate = {
createItem : function() {
return new qx.ui.form.CheckBox();
}
};
controller.setDelegate(delegate);
controller.setModel(data);
It's working but i'm not able to "check" the checkboxes because the combobox is closed when i click on it, so i would like to open/close the combobox only with the button.
How to do it? Thanks in advance.
Some event of the ComboBox is responsible for closing the PopUp (see code on GitHub) before the click can get to an underlying checkbox. If you implement your own ComboBox and overwrite the close method it works.
qx.Class.define("foo.ComboBox", {
extend: qx.ui.form.ComboBox,
members: {
close: function() {
}
}
})
var rawData = [];
for (var i = 0; i < 20; i++) {
rawData.push(i);;
}
var data = new qx.data.Array(rawData);
var list = new foo.ComboBox();
list.setWidth(150);
var controller = new qx.data.controller.List(null, list);
var delegate = {
createItem : function() {
return new qx.ui.form.CheckBox();
}
};
controller.setDelegate(delegate);
controller.setModel(data);
this.getRoot().add(list);
However now you have to think about how you will handle multiple selection of checkboxes and when to close the popup.