fa-animate-enter what am I missing? - famous-angular

Pretty sure I have some fundamental mis-understanding of how/when fa-animate-enter is invoked. The following code works if you click on the box, it scales, but I was expecting that when the fa-view becomes active, it would also call the fa-animate-enter rather than necessitating a click. When a view becomes active, how do I call animateScale_enter()?
http://plnkr.co/edit/r2OSonPSvAQREAHvns7F
<fa-view fa-animate-enter="animateScale_enter()"
fa-animate-leave="animateScale_leave()"
fa-animate-halt="animateScale_halt()" >
<fa-modifier fa-origin="[0.5, 0.5]"
fa-align="[0.5, 0.5]"
fa-scale="scale.get()"
>
<fa-surface fa-background-color="'#dc322f'"
fa-size="[100, 100]"
fa-click="animateScale_enter()"
>{{text}}
</fa-surface>
</fa-modifier>
</fa-view>
.js
<script>
var app=angular.module('MyApp', ['famous.angular'])
.controller('MainController',
function($scope, $famous) {
var Transitionable = $famous['famous/transitions/Transitionable'];
var SpringTransition = $famous['famous/transitions/SpringTransition'];
Transitionable.registerMethod('spring', SpringTransition);
$scope.viewType="view2";
$scope.text="Scale=[1,1,1], click";
$scope.scale = new Transitionable([1, 1, 1]);
$scope.animateScale_enter = function() {
console.log("enter");
$scope.text="Scale=[2,2,1], enter";
$scope.scale.set([2, 2, 1], {
method: 'spring',
period: 750,
dampingRatio: 0.3
});
};
$scope.animateScale_leave = function() {
console.log("leave");
};
$scope.animateScale_halt = function() {
console.log("halt");
scope.transform.halt()
};
}
);
</script>

Apparently it is connected to ng-repeat, and from what I gather, anything that forces a dom update... ??
So just adding a dummy ng-repeat to the fa-view seems to make it work.
<fa-view ng-repeat="x in {x:1}"
fa-animate-enter="animateScale_enter()"
fa-animate-leave="animateScale_leave()"
fa-animate-halt="animateScale_halt()" >
I hope someone can give me a better way to do this. I just feel dirty doing it this way.

Related

How can you detect a double click in a frame?

This event seems to be missing from the standard events. Lick click, I would need to set up a listener for it in a component.
Thanks to Piotr for getting me on the right track. As of this post, there is no double click event for aframe, but we can use js/jquery to get around this. Here is the start of my function:
el.addEventListener('click', function(evt) {
\$('#myEmbeddedSce').on('dblclick', function(event) {
event.stopPropagation();
event.stopImmediatePropagation();
.....
The key was to add the jquery listener inside the aframe listener, and add the stop propagations so the doubleclicks only registered once.
use stopPropagation() to detect the double click in the frame.
The stopPropagation() method prevents propagation of the same event from being called. Propagation means bubbling up to parent elements or capturing down to child elements.
Syntax
event.stopPropagation()
I've solved the issue of detecting by taking tips from existing answers. Ie, tracking the difference of time and distance between clicks. For whatever reason the click listener did not give me clientX and clientY coordinates, so I used the distance vector instead.
This is my solution:
let prevClickTime = Date.now();
let prevVector = new Vector3(0, 0, 0);
// let pointString;
AFRAME.registerComponent('bar', {
init: function () {
this.el.addEventListener('click', (e) => {
const currClickTime = Date.now();
const currVector = e.detail.intersection.point;
const distance = currVector.distanceTo(prevVector);
const timeDiff = currClickTime - prevClickTime;
if (timeDiff < 260 && distance < 0.4) {
console.log('double click');
}
prevClickTime = currClickTime;
prevVector = currVector;
});
},
});
This was pointed at this aframe-react entity.
<Entity
class="interactable"
id="arrow"
bar
geometry={{ primitive: 'cylinder', width: 1, height: 0.05 }}
material={{ color: 'blue', opacity: 0.6 }}
position={`2 0.5 ${adj}`}
rotation="0 0 0"
/>

Creating an infinite-scroll of meteor collection in angular-meteor

I'm trying to enable infinite scroll for an angular-meteor app I'm working on that draws objects from a meteor/mongo collection.
I've adapted step 12 of the angular-meteor tutorial to use pagination for the app I'm working on, and now I'd like to convert to infinite scrolling. I've been trying to adapt both the code from the tutorial and this example from ngInfiniteScroll for my purposes.
I imagine I'll need to use reactive variables, autorun, etc. similar to the tutorial, but I don't really know how to adapt it for infinite scroll. Considering the example below, how should I adjust my controller for it to use infinite scrolling, drawing from a database, with good angular-meteor practices for production?
Demo ngInfiniteScroll HTML:
<div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
<img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
</div>
Demo ngInfiniteScroll Function inside controller:
$scope.images = [1, 2, 3, 4, 5, 6, 7, 8];
$scope.loadMore = function() {
var last = $scope.images[$scope.images.length - 1];
for(var i = 1; i <= 8; i++) {
$scope.images.push(last + i);
}
};
My angular-meteor pagination code inside controller:
$scope.page = 1;
$scope.perPage = 1;
$scope.sort = {'_id': -1};
$scope.orderProperty = '1';
$scope.images = $meteor.collection(function() {
return Images.find({}, {
sort : $scope.getReactively('sort')
});
});
$meteor.autorun($scope, function() {
$meteor.subscribe('images', {
limit: parseInt($scope.getReactively('perPage')),
skip: (parseInt($scope.getReactively('page')) - 1) * parseInt($scope.getReactively('perPage')),
sort: $scope.getReactively('sort')
}).then(function(){
$scope.imagesCount = $meteor.object(Counts ,'numberOfImages', false);
});
});
$scope.pageChanged = function(newPage) {
$scope.page = newPage;
};
Please look at this basic example https://github.com/barbatus/ng-infinite-scroll.
Controller there re-subscribes every time onLoadMore is executed.
There is also a deployed demo http://ng-infinite-scroll.meteor.com.
Make sure this time angular.module('infinite-scroll').value('THROTTLE_MILLISECONDS', 500) is set properly (not very small) to avoid very frequent requests.

Isotope No Results Message for Combination Filters

I am finally reaching out for help. I've been trying to get a no results message to show up on my Isotope image gallery for a week now, with only a little bit of luck. I had an example working at one point, but the message wouldn't hide until the animation was complete, so it didn't look good at all.
Surely someone has a solution.
I would greatly appreciate it if someone is able to help me. I have test site that I will link here in just a second.
For now here is the first half of my isotope configuration file. I have the '.message-div' placed at the bottom of my #isotopegallery div with css applying 'display: none;.'
jQuery(window).load(function() {
var $container = $('#isotopegallery').imagesLoaded(function() {
$container.isotope({
itemSelector: '.photo',
masonry: {
columnWidth: 161,
gutter: 10
},
transitionDuration: '0.6s'
});
// Filters
//
var filters = {};
$('#isotopefilters').on('click', '.menu-item', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.filter-title');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[filterGroup] = $this.attr('data-filter');
// combine filters
var filterValue = '';
for (var prop in filters) {
filterValue += filters[prop];
}
$container.isotope({filter: filterValue});
// Possibility
$container.isotope( 'on', 'layoutComplete',
function( iso, laidOutItems ) {
if ( laidOutItems < 1 ) {
$('.message-div').fadeIn('slow');
} else {
$('.message-div').fadeOut('fast');
}
})
});
});
});
There is an easy workaround to achieve the "no result" message.
Consider ".photo" as class for the itemSelector. As isotope is simply attaching ".isotope-hidden" to the div-container if it does not match the filter, the number of these divs equals the total of all isotope items in case of "no result". Easy:
if($(".isotope-hidden").length == $(".photo").length) {
$("#mynoresults").show();
}

Can we make custom overlays draggable on google maps V3

The markers are draggable, but I cannot have a custom div on a marker which changes on hover click etc. hence I thought of using custom overlays, but I am not able to find out if custom overlay support drag. There is already an answer to this, but the demo itself does not work,
how to make a Custom Overlays draggable using google-maps v3
I didn't find anything on code reference for overlayView class.
Yes, we can.
DraggableOverlay.prototype = new google.maps.OverlayView();
DraggableOverlay.prototype.onAdd = function() {
var container=document.createElement('div'),
that=this;
if(typeof this.get('content').nodeName!=='undefined'){
container.appendChild(this.get('content'));
}
else{
if(typeof this.get('content')==='string'){
container.innerHTML=this.get('content');
}
else{
return;
}
}
container.style.position='absolute';
container.draggable=true;
google.maps.event.addDomListener(this.get('map').getDiv(),
'mouseleave',
function(){
google.maps.event.trigger(container,'mouseup');
}
);
google.maps.event.addDomListener(container,
'mousedown',
function(e){
this.style.cursor='move';
that.map.set('draggable',false);
that.set('origin',e);
that.moveHandler =
google.maps.event.addDomListener(that.get('map').getDiv(),
'mousemove',
function(e){
var origin = that.get('origin'),
left = origin.clientX-e.clientX,
top = origin.clientY-e.clientY,
pos = that.getProjection()
.fromLatLngToDivPixel(that.get('position')),
latLng = that.getProjection()
.fromDivPixelToLatLng(new google.maps.Point(pos.x-left,
pos.y-top));
that.set('origin',e);
that.set('position',latLng);
that.draw();
});
}
);
google.maps.event.addDomListener(container,'mouseup',function(){
that.map.set('draggable',true);
this.style.cursor='default';
google.maps.event.removeListener(that.moveHandler);
});
this.set('container',container)
this.getPanes().floatPane.appendChild(container);
};
function DraggableOverlay(map,position,content){
if(typeof draw==='function'){
this.draw=draw;
}
this.setValues({
position:position,
container:null,
content:content,
map:map
});
}
DraggableOverlay.prototype.draw = function() {
var pos = this.getProjection().fromLatLngToDivPixel(this.get('position'));
this.get('container').style.left = pos.x + 'px';
this.get('container').style.top = pos.y + 'px';
};
DraggableOverlay.prototype.onRemove = function() {
this.get('container').parentNode.removeChild(this.get('container'));
this.set('container',null)
};
It observes the mousemove-event and modifies the top/left-style of the overlay based on the distance from the last mouse-position.
Usage:
new DraggableOverlay(
map,//maps-instance
latLng,//google.maps.LatLng
'content',//HTML-String or DOMNode
function(){}//optional, function that ovverrides the draw-method
);
The top-left-corner of the overlay by default will be placed at the position provided via the latLng-argument.
To apply a custom drawing use the optional draw-argument of the constructor .
Demo: http://jsfiddle.net/doktormolle/QRuW8/
Edit:
This solution will only work up to version 3.27 of the google maps api.
Within the release of 3.28 there were changes made on the draggable option of the map.
Release Notes: https://developers.google.com/maps/documentation/javascript/releases#328

copy a div to a window popup with css

I'm trying to take a div and basically put it in a child window. The domains are going to be the same so I figure I could do the flowing ( where parm win is the div ).
popOut = function ( win )
{
var newWindow = window.open( "about:blank", "", "toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400", false );
newWindow.onload = function ()
{
this.focus
this.document.body.appendChild( win );
};
}
This seems to do the job but the css is clobbered. In thinking about this, the new window certainly knows nothing of the includes and css files. Can I copy or inject this info over somehow?
Would I be correct in assuming the new window knows nothing of its parent, thus no function can be ran from child to parent?
New window is definitely aware of its opener as well as opener aware of the popup. If the problem is new window not seeing opener styles, the following code should copy styles from opener to popup.
Place this after var newWindow = window.open(...)
var linkrels = document.getElementsByTagName('link');
for (var i = 0, max = linkrels.length; i < max; i++) {
if (linkrels[i].rel && linkrels[i].rel == 'stylesheet') {
var thestyle = document.createElement('link');
var attrib = linkrels[i].attributes;
for (var j = 0, attribmax = attrib.length; j < attribmax; j++) {
thestyle.setAttribute(attrib[j].nodeName, attrib[j].nodeValue);
}
newWindow.document.documentElement.appendChild(thestyle);
}
}
I haven't got a chance to test it, but something like this should work.

Resources