I am having a slight issue with using dragabilly in angular, the problem is odd because it was working until I made some changes to how the content using packery is loaded in, specifically adding a level of nested repeats. When I do this, packery still runs correctly, however it seems dragabilly only runs on the first object.
The html looks like -
<div class="item gs-w" ng-class="widget.size" ng-repeat="widget in contentHere" packery-angular >
<!-- nested repeat -->
<div ng-repeat="side in widget.sides" ng-show="side.active">
So it's just a nested repeat where packery runs off of the outer items, and again, the packery element works fine. It broke when I Added in the nested repeat - these objects have multiple faces which I hide with that side.acive you see there, however the drag handle is inside the nested repeat and I think this may be the problem, or perhaps the nested is taking a bit longer to load in and it doesn't recognize the handle in time? I'm not too sure and that's where I could use some direction.
Here is the directive - http://jsfiddle.net/yq4zwLzs/ . The only thing I added to it was that mobile UA check to try and turn off dragabilly on mobile devices because it's unnecessary at that point. I Tried taking that off it doesn't seem to effect anything.
Here is a plunker of it in action -
http://plnkr.co/edit/HSVztH3vlf5VI1lf1tFR?p=preview
Forgive the ugliness - but if you look, you can move around the top item, but not the bottom item. That is where I am stuck and I cannot seem to figure out how or why this is happening. You can drag the items by the .handle (title element). I would appreciate any help as I seem to be stuck here.
Thanks for reading!
Update
It seems even if I put the .handle outside of the inner repeat, it still has the same problem. Perhaps it has to do with the order the inner repeat and the angulary packery run?
Update 2
It appears the drag handle logic is not working at all, you can drag by anything, not just .handle
Update 3
I am almost certain this has to do with the nested ng-repeat (perhaps it interacting in conjunction with how the directive runs on the object), because no matter what I try, as long as I have the nested repeat, I have the same issue. If I pull it off it goes back to working as normal, however It will be hard to achieve my desired goal without it :(.
Also - if i turn
var draggable2 = new Draggabilly(element[0], {handle: '.handle'} );
into
var draggable2 = new Draggabilly(element[0] );
It works fine. I need a drag handle though, as there will be content inside these divs the user will interact with, and I don't want the div moving around when they are clicking around inside it. Maybe if there is a way to initiate dragabilly a little bit later?
Looks like it might be a digest issue, as if you stick the Draggabilly creation in a $timeout it works as expected
if(!isMobile()){
$timeout(function(){
var draggable2 = new Draggabilly(element[0], {handle: '.handle'} );
$rootScope.packery.bindDraggabillyEvents(draggable2);
})
}
http://plnkr.co/edit/qxv1VWPHZEKX3pVHgBi2?p=preview
One thing of note i noticed whilst fiddling around with it, is if you use a different option than handle, for example { axis: 'x'} then it works without the need for the $timeout.
Related
I modified this code from another project. I want a slider that goes both directions. I did not want to siled all panels at once. Like I see a lot of sliders do. I wanted the content to show in kind of an “in-demand” once requested way. This being one of my first jQuery projects, I figured I would learn, so I tried it out. I seem to get pretty much what I wanted. The place I am stuck with is this. I cannot seem to get out of the IF statement context in the sliderMultipanel function. I need this, so I can determine the direction the animation should flow in, based on the click. I have read a lot and learned some about bubbling and (stopping) propagation, but I don’t know if I am going down the correct path. The IF statement seems to keep on starting the counting over. This makes for unexpected results. So what gets evaluated by the IF is only sometime correct, also it does random weird behavior. However, it is correct if its context is outside of the IF or click function (see lines 66-73). Can some show a way this can be done? To be clear I want to properly determine the number of the nav button click so the slider can go in the requested direction. Thanks
CodePen of project
if ( (mySlider.panelCompare + 1) < mySlider.currentPanel || !mySlider.panelCompare...
I would like to ask if there are any examples related to Polymer's animated pages ( http://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages ) and how we can build a similar demo using the resources provided in the Angular/material repo (https://github.com/angular/material).
I would like to achieve http://www.polymer-project.org/components/core-animated-pages/demos/music.html but I don't want to use Polymer since I would like to use Angular.
Can you please provide me some directions in order to start?
What they typically do with Polymer is have two connected elements which shows only one and when you perform some action, the other gets shown (from display: none) and animates from certain dimentions to its final form. Sometimes elements also shift but it depends on whether the content is able to move to its new position or not.
You have to work with css transition, transform and display. Sometimes even custom animations. And you are mostly changing multiple divs to their final form. I think the most difficult would be animating colors (from white to pink or from yellow to green for example) as those are most difficult to do (performance-wise).
If you look at the example you've set (final link) you see there's a list of items with a detail div and once you click the item you show the detail and transform the contents to its final dimentions.
Just know that these things are pretty hard if you aren't very much into Angular or HTML/CSS/Javascript.
The framework of Polymer for Web is very much a work in progress and i wouldn't be surprised if it took a few months to get similar results for both native and web.
You can take example from things like this: https://medium.com/tictail-makers/giving-animations-life-8b20165224c5 or https://www.polymer-project.org/apps/topeka/ or http://codepen.io/collection/amheq/ . And don't forget to speed it up by using some bootstrap theme like this http://fezvrasta.github.io/bootstrap-material-design/ or something.
I've been struggling with the same problem as there isn't much to go from right now. You stated the Angular project but that will take time. If you want to do it now, you have to do quite some work (if you do, share it with us), but you might be better of with postponing this until most of the bugs and problems have been solved.
Thats what i'm doing now.
I can't seem to find the correct set of scrollView options to disable the overscroll/bounce effect. I'm using the last example on this page:
https://famo.us/integrations/angular/docs/unstable/api/directive/faScrollView/index.html
End goal is to have a sidebar menu like every single app ever made in the last 5 years. You would think it would be a more popular example for this framework, but I can't seem to find any useful ones for FA.
I have been told multiple times that setting edgeGrip : 1 in the options will make it no longer bounce. It doesn't work for me and no ones showed me a fiddle where it does work. I don't use the angular integrated version of famo.us so I'm not sure I can be of much help.
I personally used a generic sync and built a scrollview with that. Its similar to how the draggable works. Which is what i suggest, the draggable can give you a 'scroller' without a bounce. The down side is it won't be smart enough to not render things outside it's view. For my use I was building a form that was maybe twice the height of the screen and it works fine. If you want the non angular / straight famo.us version I use let me know. Hope the edgeGrip works for you.
Test case: http://plnkr.co/edit/dsG3gxFomAK8Q15Xfouj?p=preview
The test case above is a list of data rendered with the ng-repeat directive, twice. Once without using ng-include and once using ng-include.
CSS transitions are setup for all three (enter, leave and move) animations supported by the ng-repeat directive. All three animations work fine when not using ng-include, but only the enter animation works when using ng-include to load the template of each item in the list.
I'm pretty sure this is a bug with angular-animate but not sure. I might be doing something wrong when using ng-repeat and ng-include combination. I tried digging in the angular-animate source code and fix the problem, but couldn't. All I figured (hopefully truly) is that the ng-include directive adds a comment node just above every item rendered by ng-repeat and this node is throwing off the angular-animate's workings. This is also the only noticeable difference between the two implementations.
Please also note that all functionality works quite fine when no animations are set. But in the example using ng-include, not only are the animations (for moving items up or down) messed up, but the items don't even move.
Is this a bug? If so, is there a known workaround? I tried searching the angular.js's issues on github but couldn't find a workaround (The ones I found don't work). Thank you for any help on this.
but only the enter animation works when using ng-include to load the template of each item in the list.
I actually get inconsistent behaviour in Chrome. Sometimes the moving animations work.
If so, is there a known workaround?
You could nest the ng-repeat-ed / ng-include-ed elements, so the directives are on different elements, so there shouldn't be any conflict, whatever the cause. Example at http://plnkr.co/edit/dVniIVUaGS8y7wHe7CuT?p=preview
Edit: fixed plnkr link.
I am experimenting with jQuery and the animate() functionality. I don't believe the work is a final piece however I have problem that I can't seem to figure out on my own or by trolling search engines.
I've created some random animate block with a color array etc and everything is working as intended including the creation and deletion of the blocks (div's). My issue is within 2mins of running the page, Firefox 4 is already at more than a 500,000k according to my task manager. IE9 & Chrome have very little noticeable impact yet the processes still continue to increase.
Feel free to check out the link here: http://truimage.biz/wip300/project%202/
My best guess are the div's are being created at a greater speed than the 2000ms they are being removed however I was hoping an expert might either have a solution or could explain what I am doing wrong and some suggestions.
On another note, from the start of my typing this out till now the process is at 2,500,000k. Insane!m
It could be a lot of things other than just your script there. It could be a mem leak in one of the jQuery things you use, pretty hard to say.
Something you could try is this though:
Instead of creating new squares, use a "square pool". Let's say you create 20 squares and just keep re-using them instead of creating new ones.
You'd basically just have an array for the pool and take elements out from it when they are displayed, and put them back to it when the animation finishes.