Anyone have some code to reorder a ng-repeat using drag and drop that does not require jQuery? (angularjs dependency only)
I've had good results with https://github.com/kamilkp/angular-sortable-view - it's brand new (first commit was last week!), but it's extremely easy to work with. You put an sv-root attribute on the element (probably a div) that's the ancestor of the ng-repeat you want to be able to reorder. Then you put an sv-element attribute on whichever element you're ng-repeating, and drag and drop is handled for you.
You can also optionally put an sv-handle attribute on some element (probably an image, or a Font Awesome icon) inside your ng-repeat, in which case that element gets used as the drag handle. You can also optionally set up "placeholders" (something that shows up as you drag to show where the dragged element will be positioned if you drop it right now) with an sv-placeholder attribute on whatever element is your placeholder. And finally, you can optionally specify an sv-helper attribute on some element to make that element the one that gets dragged. (So if the thing you want the user to see while dragging needs to be different from the thing they see inside the list, that's how you do it).
Oh, and both the sv-placeholder and sv-helper attributes can go either on elements outside the ng-repeat, in which case the same element will be used for every drag situation (use this, for example, if you want a blank gray box as a placeholder the way Trello does it when you drag cards around) -- or those attributes can go on elements inside the ng-repeat, in which case you have access to the local scope of that particular ng-repeat element (use this, for example, if you want your placeholder to be "the text of what I'm dragging around, with opacity 50%, and a dashed border around it").
The demos linked from the https://github.com/kamilkp/angular-sortable-view repo demostrate the usage pretty well, so rather than say more about it I'll just let you poke around in the demos. My personal experience so far has been very favorable.
Oh, and it has no dependencies other than Angular. No jQuery or anything else required.
Related
I have am A-frame scene where a series of entities must become visible after the user has clicked one by one another group of entities. I’ve a system that allowed me to hide every element of this first series, but I cant figured out how to show the second series, mostly because the user could click the first series in any order.
I’ve been trying to adapt this idea: https://css-tricks.com/snippets/css/toggle-visibility-when-hiding-elements/, but It seems that the “visibililty” attribute does not work in A-Frame.
Thank you very much.
The rendered elements are not DOM elements, so CSS will have no effect here. To toggle the visibility, use setAttribute()
someElement.setAttribute('visible', false) // or true
Check it out here. Docs here.
how to show a field in oracle reports at the bottom of the last page which is placed outside the border
A trivial answer is: place it outside the border.
I presume you already did that and encountered problems. It would really help if you specified which one(s).
The most usual error is that you're referencing a column at a wrong frequency, i.e. you can't just "move" it outside of its parent frame. (I guess that the frame is what you call a "border".) If that's so, well, you can't do that.
One way out is to create a new column (in the Data Model layout editor) (be it a formula or a placeholder column) which doesn't belong to any group, but is independent. Then you can place it anywhere you want.
If, on the other hand, you do have a formula (or placeholder, or summary) column and "border" you mentioned is the margin, then - while in Paper Layout editor - click the "Margin" icon in the toolbar to switch to ... well, margin layout editor. Now place that field anywhere you want.
Or, did you try to move the field but frames were resized and other fields moved along with the movement of the field you're moving? Pay attention to "Flex" and "Confine" ON/OFF buttons in the toolbar as they make the difference.
If none of above, what is your situation, then?
Is their anyway of keeping one tile at a constant position in a wrap panel and having all the added items (currently implementing through a listbox, so listboxitems) wrap around this item.
For example, having the blue tile constant regardless of how many items, with every other tile wrapping around it.
For example:
and:
*Edit #1
I've been looking into custom panels. Maybe i could add a field that if true, would allow for the absolute positioning of an element? Still need to understand how exactly the wrappanel wraps its elements.
*Edit #2
Just realized that idea wont work either. since the attribute of whether the item should have an absolute position would depend on the item itself and so it would require another container, like a "WrapPanelItem" of some sort to define that. Ugh lol
Edit #3
I can maybe set the "Tag" attribute of the children and have a custom Wrappanel check this attribute of the child. If it equals a certain value, it wont adjust its position? But then how do i set the initial position?
Edit #4
No luck with the previous idea.
Edit #5
So i'm attempting to make the custom panel again, but i have a few questions. When items are placed in a grid, how does the arrange method place the item in the item's desired position. I've looked and couldn't find such a property, so how then does the method know where to put the item?
Solved this by making a custom version of the "VariableSizedWrapGrid" provided in Kinnara's branch of the WP7ToolKit. (https://github.com/Kinnara/WPToolkit). It didnt work initially, as it wasn't checking if the entire block fit and instead than just the first unit of the block. If anyone is running into this problem PM me and il send you my updated control :)
O, and instead of trying to wrap around one element, i overlapped the element and had the elements wrapping in the background using the VariableSizedWrapGrid. This implementation was ALOT easier than what i was trying to do.
I have a project that I'm working on that has a TreeView Control in it. For everything underneath Level 1, those nodes are being used as a bookmark function, so we want a Tri-State CheckBox there. I found a control that I'm using here.
However, as the top two levels in the TreeView do not need bookmarking, the customer wants an Image there. I found this page who's response gets CheckBoxes to disappear on specific Nodes. Unfortunately, the API calls clash with the ones used in the above Tri-State TreeView and they both can't work at the same time.
Basically, what I'm looking for is how to get Images in nodes on the top two levels, and Tri-State CheckBoxes on the lower levels. I'd be more than willing to try another Tri-State CheckBox if necessary.
Also, when the user clicks on the Image in the top two levels, the image shouldn't change. I found this page which does keep the image from changing, but removes the PlusMinus, Lines, and RootLines from the control.
Sorry in advance that this is such a ridiculous and specific request.
Ok, I finally got this figured out. Using the Tri-State Treeview Control, I am able to still have access to the AfterClick event on the Treeview.
I had added a series of Checkbox icons to the ImageList, and after determining which CheckState (of the 3) my underlying object was in. Then I set the ImageIndex, SelectedImageIndex, and StateImageIndex (probably don't need the last one, but I was being thorough) to the proper index of the ImageList.
I won't post any code for now, but if you are trying to do the same thing, let me know and I'll upload until it becomes clear.
I have a sliding carousel of items, each of which includes its own like button. I want the like buttons to have comments; that is, when the user clicks Like, he should be presented with a prompt to leave a comment (http://developers.facebook.com/blog/post/397/). I'm starting to doubt that these goals are compatible and would like to hear if anyone has already achieved it.
The comments on the Like buttons are wider than the items in the carousel, and correctly overflow onto other carousel items. However, some of these items are outside the clipping box, since the carousel items are necessarily inside a div with overflow: hidden (otherwise we wouldn't achieve the effect of the items scrolling into existence upon paging). Because of this, if I click Like on the rightmost item currently visible, the comments prompt that appears will be partially outside the clipping box and thus partially visible.
It appears to me the only possible hope of allowing the comments prompt to overflow the carousel container is to place the prompt outside the container in the dom. This way, assuming we can visually position the prompt next to its Like button where it belongs, it's no longer constrained by the container. This seems within possible, since at the time of this writing the comment prompt is implemented as a separate iframe from the button itself; i.e., this XFBML:
<fb:like width="450"></fb:like>
yields (approximately) this HTML:
<iframe src="facebook.com/like_button.php"></iframe>
<iframe src="facebook.com/comments_widget.php"></iframe>
But if I try to move the comments iframe in the dom, it instantly and permanently becomes empty. Even if I could find a way to detach certain events and prevent this, it shows that an intricate solution is called for, and one which Facebook can break at any time in the future with changes to their implementation. Thus, I can't move the comments in the dom, and thus, the prompt is always in danger of being clipped. Facebook says this on the subject:
If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting setting the overflow property to a value other than hidden, such as visible, scroll, or auto.
Clearly in the case of a carousel it's not possible to remove overflow: hidden. Has anyone found a way around this, or should I give up and spend my time elsewhere?
Thanks