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 );
}
} );
Related
I have watcher code which gets triggered whenever an item is changed from a dropdown. I am trying to get the value of $scope.from_date after the event occurs but the value being returned from the console log is the value before the event is triggered.
$scope.$watch('strSelectedDateRange', function(strNewRange, strOldRange) {
if (strNewRange && strNewRange !== strOldRange) {
if ($scope.strSelectedDateRange === 'custom') {
$scope.bShowDateRange = true;
checkHourlyCustomDateRange();
$scope.setCustomDateRange();
} else {
$scope.bShowDateRange = false; // for safety
$scope.strCurDateRange = $scope.strSelectedDateRange;
$this.getReportData($scope.deal);
}
}
console.log($scope.from_date)
});
This the the link to example code:
JSFiddle link
angular.module('watchApp', []).controller('watchCtrl', function($scope) {
$scope.watchVariable = "hghj";
$scope.$watch('watchVariable', function(newVal, oldVal) {
// do something here
$scope.oldVal = oldVal;
$scope.newVal = newVal;
}, true);
});
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);
In my Service i have the vars i want to display and the getters for it:
var docsLoaded = 0;
var docsToLoad = null;
pouchService.getDocsLoaded = function () {
return docsLoaded;
};
pouchService.getDocsToLoad = function () {
return docsToLoad;
};
While the service is syncing, i want to count the synced docs
pouchService.syncNow = function () {
var foundLastSeq = false;
docsLoaded = 0;
docsToLoad = null;
remoteDB.info().then(function (remoteInfo) {
function findOutDiff(localPosition) {
docsToLoad = (remoteInfo.update_seq - localPosition) + 1;
console.log("docs to load: " + docsToLoad);
}
// start Sync progress
sync = localDB.sync(remoteDB, {live: false})
.on('change', function (info) {
console.log('AI change: ');
console.log(info);
if (info.direction === 'pull') {
if (foundLastSeq === false) {
foundLastSeq = true;
findOutDiff(info.change.last_seq);
}
}
console.log(docsLoaded + " from " + docsToLoad);
docsLoaded++;
})
In my HTML i want to display the progress like this:
{{pouchService.getDocsLoaded()}} from {{pouchService.getDocsToLoad()}}
Now i get sometimes a value from getDocsLoaded, but mostly its zero. When I cancel the Syncprogress i get the value where it's stopped.
So i get the value before it really starts and when it's over, but i want it during the sync progress. (on the console my my progressinfos are working as expected)
Any ideas?
The problem is in applying scope. Jim wrote a nice article about this problem:
jimhoskins.com/2012/12/17/angularjs-and-apply.html
Solved it:
$rootScope.$apply(function () {
docsLoaded++;
});
I am working on an Angular JS application which has HTML5 file input button and a Drag - Drop area.
I need to disable the drag drop area as long as the file browse popup is open. What is the best way to achieve this?
Here is an example I just made for you, this is an updated Google DnD Controller that I made more advanced plus added the functionality you wanted.
window.fileBrowserActive = false; //init the controller to false
function DnDFileController(selector, onDropCallback) {
var el_ = document.querySelector(selector);//select our element
var overCount = 0;//over count is 0
this.dragenter = function(e)
{
e.stopPropagation();//stop propagation and prevent the default action if any
e.preventDefault();
overCount++;//increment and assign the overCount var to 1
if(fileBrowserActive == false)//if the fileBrowserAction is false we can add dropping class
{
el_.classList.add('dropping');
}
else //else add error or none at all it's your choice
{
el_.classList.add('error');
}
};
this.dragover = function(e)
{
e.stopPropagation();
e.preventDefault();
};
this.dragleave = function(e)
{
e.stopPropagation();
e.preventDefault();
if (--overCount <= 0) { //we decrement and assign overCount once if it's equal to or less than 0 remove the classes and assign overCount to 0
el_.classList.remove('dropping');
el_.classList.remove('error');
overCount = 0;
}
};
this.drop = function(e) {
e.stopPropagation();
e.preventDefault();
el_.classList.remove('dropping');
el_.classList.remove('error');
if(fileBrowserActive === false)
{ //if fileBrowserActive is false send the datatranser data to the callback
onDropCallback(e.dataTransfer);
}
else
{ //else send false
onDropCallback(false);
}
};
el_.addEventListener('dragenter', this.dragenter, false);
el_.addEventListener('dragover', this.dragover, false);
el_.addEventListener('dragleave', this.dragleave, false);
el_.addEventListener('drop', this.drop, false);
}
var isFileBrowserActive = function(e){
fileBrowserActive = true; //once clicked on it is active
this.onchange = function(e){ //create the onchange listener
if(e.target.value !== "") //if the value is not blank we keep it active
{ //so now user can't DnD AND use the file browser
fileBrowserActive = true;
}
else if(e.target.value == "") //if it is blank means they click cancel most likely
{
fileBrowserActive = false;//assign false back
} //remove the listener
this.removeEventListener('change',this.onchange,false);
};
//assign the listener for change
this.addEventListener('change',this.onchange,false);
};
var fB = document.getElementById('fileBrowser'); //grab our element for file input
fB.addEventListener('click',isFileBrowserActive,false); //assign the click event
var activation = new DnDFileController('#dragNDrop',function(e){ //grab our DnD element
console.log(e); //console log the e (either datatransfer || false)
});
Check out the This Fiddle to see how this works
hi i want to show a timer that will stop if the window/tab is not in focus and when the user will back to the window/tab it will again start to countdown. i have following code and i tried some methods but not getting the desired result!hope one of you will able to solve my problem
function adTimer() {
timer++;
if(timer == fulltimer) {
var show="Click <img src=\"clickimages/"+key+".png\">";
$("#buttons").fadeIn();
$("#timer").html(show);
}
else {
setTimeout(adTimer, 1000);
}
$("#bar").width((timer/fulltimer)*200);
}
$(document).ready(function() {
if(id != -1) adTimer();
else $("#timer").html("Cheat Check");
});
Check for focus with a timer:
var focus;
function mytimer() {
if (focus) {
// Do stuff.
alert("test");
}
}
$(window).blur(function () {
focus = false;
});
$(window).focus(function () {
focus = true;
});
setInterval(mytimer, 1000);
Fiddle