I've been using ionic and https://github.com/driftyco/ionic-contrib-swipe-cards for a tinder-like interface and noticed that the following lines are executed twice instead of once.
ionic.onGesture('dragstart', function(e) {
console.log("onDragStart!");
var cx = window.innerWidth / 2;
if(e.gesture.touches[0].pageX < cx) {
self._transformOriginRight();
} else {
self._transformOriginLeft();
}
window._rAF(function() { self._doDragStart(e) });
}, this.el);
ionic.onGesture('dragend', function(e) {
alert("ionic.onGesture dragEnd!");
window._rAF(function() { self._doDragEnd(e) });
}, this.el);
I am on a pc testing this, so maybe that has something to do with it? I've been playing around with it for a couple hours now and am stuck at where to go from here. Any help is greatly appreciated :)
Related
I'm using the Angular-Leaflet directive to display a heatmap, and I want the data to evolve through time. My code looks like:
getData().then(function (data) {
$scope.heat.index = 0;
$scope.heat.data = data;
$scope.layers.overlays.heat = {
name: "Heatmap",
type: "heat",
data: $scope.heat.data[$scope.heat.index], // data is a dictionary, not an array
visible: true
};
$scope.$watch('heat.index', function (new_index) {
$scope.layers.overlays.heat.data = $scope.heat.data[new_index];
});
});
However, when I change data.index (through a slider), nothing happens. What could be going on? I know that Angular-Leaflet supports this behavior because of this Github issue where someone added it.
leafletData.getMap().then(function (map) {
map.eachLayer(function (layer) {
if (layer.options.layerName == 'heatmap') {
layer.setLatLngs(newHeatmapData);
}
})
})
This worked for me.
Leaflet.heat provides a redraw() method but that didn't work for me.
First I'd like to say my appreciation for this great website that I rely on rather often but never have used to ask anything.
I'm currently learning AngularJS by reading "Mastering web application development with AngularJS" and going through the provided examples.
I would like to understand how I can switch between different implementations of a provider (service) with minimal code change.
Here is the "notifications" service that I need to configure with different implementations of an "archiver" service, code for both below :
angular.module('notificationsApp', ['archiver'])
.provider('notificationsService', function () {
var notifications = [];
return {
$get : function(archiverService) {
return {
push:function (notification) {
var notificationToArchive;
var newLen = notifications.unshift(notification);
if (newLen > 5) {
notificationToArchive = notifications.pop();
archiverService.archive(notificationToArchive);
}
}
};
}
};
})
.config(function(notificationsServiceProvider){
**How could I make the 'archiverService' be of superConsoleArchiverService or consoleArchiverService ?**
});
I would like to be able to choose between different implementations for my "archiverService", namely "superConsoleArchiverService" or "consoleArchiverService" as defined in the following module.
angular.module('archiver', [])
.provider('consoleArchiverService', function () {
return {
$get : function() {
return {
archive:function (archivedNotification) {
console.log(archivedNotification);
}
};
}
};
})
.provider('superConsoleArchiverService', function () {
return {
$get : function() {
return {
archive:function (archivedNotification) {
console.log('super ' + archivedNotification);
}
};
}
};
});
Thanks a lot for helping me through this !
(also, I hope this question makes sense and has not been answered a gazillion times)
Let's say you have some condition, say a variable to use_super.
Then you could do something like this, by injecting $provide, and both of your providers:
$provide.value('archiver', use_super ? superConsoleArchiverService : consoleArchiverService);
Hope this helped!
Thanks to the answer provided by hassassin I was able to make it work, following is some working version, no code was changed in the 'archiver' module.
angular.module('notificationsApp', ['archiver'])
.provider('notificationsService', function () {
var notifications = [];
return {
$get : function(configuredArchiver) {
return {
push:function (notification) {
var notificationToArchive;
var newLen = notifications.unshift(notification);
if (newLen > 5) {
notificationToArchive = notifications.pop();
configuredArchiver.archive(notificationToArchive);
}
}
};
}
};
})
.config(function(notificationsServiceProvider, superConsoleArchiverServiceProvider, consoleArchiverServiceProvider, $provide){
// Here it is possible to set the 'configuredArchiver to either one of my archivers
//$provide.provider('configuredArchiver',consoleArchiverServiceProvider);
$provide.provider('configuredArchiver',superConsoleArchiverServiceProvider);
});
Some things I still don't fully understand like why can't I inject the 'configuredArchiver' directly in the 'notificationService' provider, but I strongly suspect it is related to my still very small grasp on the life cycle of AngularJS objects. Back to reading !
I am using iscroll4 in my application. I am facing problem with iScroll that made drop down lists(combo box) unusable when used at the same time.
I tried how they mentioned here
( http://groups.google.com/group/iscroll/browse_thread/thread/5b2fbad6aa667907# )
$(document).ready(function() {
var destinations_scroll, accounts_scroll;
function loadingIscroll() {
accounts_scroll = new iScroll('accounts_container');
destinations_scroll = new iScroll('destinations_container', {
checkDOMChanges: true
});
setTimeout(function() {
destinations_scroll.refresh();
}, 0);
}
document.addEventListener('touchmove', function(e) {
if (e.target.tagName != "SELECT") {
e.preventDefault();
e.stopPropagation();
}
}, false);
addEventListener('DOMContentLoaded', loadingIscroll, false);
});
But still select box (combo box/drop down) not working. Any suggestions?
Hi I got an answer from iScroll 4 not working with form <select> element iPhone Safari and Android browser. Thanks to #comonitos. I used his solution.
Trying to figure this concept out. If you console.log this.get("content") before and after the sort, everything seems like it worked, but when it displays to the screen it gets funky. I think the issue is with Handlebars. When it "sorts" it adds a duplicate fourth record and sticks it at the top. You can see the problem in action here:
http://jsfiddle.net/skinneejoe/Qpkz5/78/ (Click the 'Sort by Age' text a couple times to resort the records and you'll see the issues)
Am I doing something wrong, is there a better way, or is this a bug? If it's a bug is there a good workaround?
Here's the full code:
index.html
<script type="text/x-handlebars">
{{#view App.SortView}}Sort by Age{{/view}}<br/>
{{#each App.userController}}
{{#view App.RecordView contentBinding="this"}}
{{content.name}} - {{content.age}}
{{/view}}
{{/each}}
</script>
app.js
window.App = Ember.Application.create();
App.userController = Ember.ArrayController.create({
content: [
Ember.Object.create({ name:"Jeff", age:24 }),
Ember.Object.create({ name:"Mark", age:32 }),
Ember.Object.create({ name:"Jim", age:12 })
],
sort:"desc",
sortContent:function() {
if (this.get("sort") == "desc") {
this.set("sort", "asc");
} else {
this.set("sort","desc")
}
if (this.get("sort") == "asc") {
var sortedContent = this.get("content").sort( function(a,b){
return a.get("age") - b.get("age");
})
} else {
var sortedContent = this.get("content").sort( function(a,b){
return b.get("age") - a.get("age");
})
}
this.set("content", []);
this.set("content",sortedContent)
}
})
App.RecordView = Ember.View.extend({})
App.SortView = Ember.View.extend({
click: function() {
App.userController.sortContent("poId")
}
})
I'm not seeing this bug in Safari, Chrome or Firefox on OS X, so I assume it's a IE issue.
Sounds a lot like this reported Ember bug, which got fixed 11 days ago. Try upgrading to ember-latest and see if that fixes it.
I am a little desperate here. I have been reading everything I was able to find on Drupal.behaviours but obviously its still not enough. I try running a masonry grid with the infinitescroll plugin to attach the new images to the masonry. This works fine so far. The next thing I wanted to implement to my website is a hover effect (which shows information on the images) and later fancybox to show the images in a huger size.
(function ($) {
Drupal.behaviors.views_fluidgrid = {
attach: function (context) {
$('.views-fluidgrid-wrapper:not(.views-fluidgrid-processed)', context).addClass('views-fluidgrid-processed').each(function () {
// hide items while loading
var $this = $(this).css({opacity: 0}),
id = $(this).attr('id'),
settings = Drupal.settings.viewsFluidGrid[id];
$this.imagesLoaded(function() {
// show items after .imagesLoaded()
$this.animate({opacity: 1});
$this.masonry({
//the masonry settings
});
});
//implement the function of jquery.infinitescroll.min.js
$this.infinitescroll({
//the infinitescroll settings
},
//show new items and attach behaviours in callback
function(newElems) {
var newItems = $(newElems).css({opacity: 0});
$(newItems).imagesLoaded(function() {
$(newItems).animate({opacity: 1});
$this.masonry('appended', newItems);
Drupal.attachBehaviours(newItems);
});
});
});
}
};
})(jQuery);
Now I read that I need to Reattach the Drupal.behaviours if I want the hover event to also take place on the newly added content.
(function ($) {
Drupal.behaviors.imgOverlay = {
attach: function (context) {
var timeout;
$('.img_gallery').hover(function() {
$this = $(this);
timeout = setTimeout(change_opacity, 500);
}, reset_opacity);
function change_opacity() {
//set opacity to show the desired elements
}
function reset_opacity() {
clearTimeout(timeout);
//reset opacity to 0 on desired elements
}
}
};
})(jQuery)
Where do I now write the Drupal.attachBehaviours() to make it work actually? Or is there some other error I just dont see atm? I hope I wrote the question so that its understandable and maybe it also helps somebody else, since I experienced that there is no real "official" running Version of this combination in drupal 7.
Ok, the solution is actually pretty simple. When writing it correctly than it also runs. its of course not Drupal.attachBehaviours() but Drupal.attachBehaviors() . So this combination now works and I am finally relieved :).