We're doing a project in Angular.js and the Mockups we're getting from our UX person heavily use interactive popovers / callouts.
The problem is that I can't seem to map these on to angular concepts in a clean way. Conceptually they require their own templates, controllers, and they need to be created and destroyed all over the page. Overlapping elements without changing the layout.
Bootstrap modals aren't seen as an acceptable alternative. The founders are really keen on having interactive dialogs that point at specific elements on the page.
Is there something that can accomplish this? Or do you have any tips?
I would implement a directive or set of directives that you can show on focus or blur or mouseover of other elements. Depending on your implementation, you might be able to get away with just one directive that opens onFocus or onBLur. Angular 1.2 supports ng-focus, ng-mouseover, and ng-blur which you can leverage to do something like this.
<div class="check-thing">
<button class="checkmark" ng-mouseenter="showModal = true" ng-mouseleave="showModal = false"></button>
<modal ng-show="showModal" model="modal-model"></modal>
</div>
Then just have the form in the directive populate a two-way bound modal-model, or fire a callback when the user clicks okay that the controller waits for. It might even be better to just make the whole checker thing a directive and use them in a repeat.
Beware, none of this will be very friendly on a tablet or phone as they don't readily support hovers.
Have you looked at the AngularUI Bootstrap modals? (http://angular-ui.github.io/bootstrap/#/modal) They fit very well into AngularJS and can really be styled into almost any appearance you want. Passing data in and getting data out is very easy. Most UX people don't seem to understand how the web works (mine doesn't seem to anyway) and these have been a real savior for me and my team.
I know this is an older post but since an answer was never selected I would like to point out a possible solution that I had come across recently.
The Angular UI BS Popover allows you to have it align with the element you are targeting, which can be click, hoover, and focus.
For content you have the choice between text, HTML formatted string and template. Based on the question, the template is likely the one that would be used to allow the content to be dynamic and include interaction.
You can find more information and a demo on how it works at: https://angular-ui.github.io/bootstrap/
Related
I'm looking to build something pretty much identical to this snippet in react without jquery. This snippet only works with jquery and jquery does not work well with react:
https://bootsnipp.com/snippets/2q81r
The only examples I can find anywhere are option select examples.
When I try the above snippet it doesn't even show the dropdown without jquery.
Seems like something you could just make yourself and not have to rely on further dependencies.
Have whether it's open or not tied to a local component state variable, and have each input controlled and updating a local state value.
THere re a ton of great UI libraries if you wanna search around for something that might fit your needs - Semantic UI, Material UI, etc.
Or you can follow along a great tutorial - this one seems decent:
https://blog.logrocket.com/building-a-custom-dropdown-menu-component-for-react-e94f02ced4a1/
I'm a Polymer novice, but I guess what the answer will be...
Recently I came across with this issue: I got to loop through a collection of elements (using dom-repeat) and display its contents. But every element has a unique display and bindings, making it almost impossible to display each element dynamically. The ideal scenario would be to load a different component for each display type, but it looks like there is no easy way to achieve this.
Some options I have been thinking of were the following:
Using dom-if but it would add crap to my resulting HTML.
Is there a dom-switch? If it were something like that and didn't leave empty template tags (as it would do with dom-if) it would be nice.
It's possible to load a component dynamically? Using something like this: <[[item.type]] item-configuration=[[item.configuration]]></[[item.type]]>
Any other ideas? I would really appreciate any ideas or solutions or at least a workaround for my issue.
TL;DR; you can't
Polymer (and Web Components in general I guess) are best when used in a declarative way. Out-of-the-box your best solution is dynamically creating elements and adding to DOM or messy use of dom-if.
(potential) OPTION 1
I guess you could fairly easily implement a dom-switch element to work like
<template-switch switch="[[some.value]]">
<template-case case="10">
<element-one></element-one>
</template-case>
<template-case case="20">
<element-two></element-two>
</template>
<template-default>
<element-one></element-one>
</template-default>
</dom-switch>
I wrote this off the top of my head. There are multiple ways to implement such an element. A crucial decision is whether to use <template> internally or not. In this plunk I've implemented such element without templates but simply using content distribution.
OPTION 2
There is also Polymer.Templatizer.
Faced with a similar issue of choosing element to render dynamically I created this Plunk as a proof of concept.
As you see, you extend the <template> element with custom rules, which match against a model. You then bind the matched template's nodes with the model using Polymer.Templatizer.
Thanks to Templatizer, you don't have to pollute your actual element with conditionals and still get full binding functionality.
I'm working on a more feature-complete solution. If you're interested I could move it to a separate repository and publish.
I have a huge form divided into sections. It has about eight sections and it will simply be unwieldy to put this giant form on one page. No one would ever slog through it.
I also decided that dividing it into pages will also not be ideal because if someone is section 6 and realizes he needs to change something on section 2.
I created a client side solution using Jquery. So You just click tabs representing sections of the form. So you hide a previous section section when you click on a new section and handle all the logic of saving server side making sure someone can switch back and forth while validating data on each section. Behind the scenes its still one huge form. A lot of Jquery is used to make it work properly. It is tightly coupled to the DOM and no one can understand the code unless I explain.
Also when making changes you have to make sure there are no lingering events which cause something unexpected to affect another section of the code.
Its quickly becoming a monster. I think this is an ideal problem a Javascript framework would solve but I have no idea where to start. How would it fit in the context of Javascript MVC especially all the DOM manipulation and event driven approach I use. any ideas or suggestions are welcome.
I would consider using AngularJS
This is a real war story - I was struggling with the exact same issue you are. Huge unwieldy form, needed it to be refactored into re-usable components(since one portion of the form included a pricing page).
Getting started is pretty easy, I'd suggest to look at the tutorial before you see my solution.
Here's how I solved my issue -
Have one controller for your form.
Use UI-router for making sub-routes of your form (e.g. /signup/profile, /signup/address etc); all of them being controlled by your main controller. Store them in separate HTML files as templates being rendered on a view (yay!)
Also, you don't need a major commitment to use angular, you can just use it for this purpose in your app.
Hope this helps.
Frameworks that handle data binding and embedded control statements sound like they would be ideal for an issue like this, like Knockout.js or Angular.js.
For example, with knockout, you could have a segment like:
<div data-bind="if: someCondition">
Only show this section of the form if the condition is met
....
</div>
I'm trying to implement a few angular UI components into my simple angularjs application. When elements from the directives are entering the DOM they are shifting elements that are already there rather than popping over them. It seems that any directive that is meant to appear overtop of other elements are being displayed this way.
I'm a relatively new developer and there is a decent chance that I'm missing something easy and completely obvious. Any guidance is welcome.
I'm using angular 1.1.5 and ui-bootstrap 0.6.0 (with templates included).
Below are some screenshots to give you a better idea of what I'm talking about.
Datepicker directive as it appears before opening:
Datepicker after opening:
What it is suppose to look like upon opening(Link to plunker):
This example is from the tooltip directive which shows the same issue ("on the right" is meant to appear to the right of the text):
Last example using typeahead (names are meant to appear in a dropdown list):
As mentioned earlier, any help or guidance is welcome- I would really like to get these working and have run dry for way to troubleshoot. Thanks!
I have a requirement where I need the autocomplete feature of textfield & allow multiple selection. I searched the net for resources [like wicket stuff and this ] but could not find any.
My Question -
1) Does wicket provide any component of this kind?
2) What work around can I have to accomplish this?
3) Can we use jquery in wicket?
I am having legacy code using wicket 1.4.18 & its hard to upgrade to the latest wicket due to time constraints.
Appreciate all your inputs.
Had the exact same problem as you a while back....At that point we had a custom component that did exactly what you need (multi-seclect-autocomplete). The component used a lot of Javascript and sadly did not perform the same on all browsers.
After some research I found Select2-Wicket witch is the wicket implementation of Select2 component.This really solved all the problems...it is genius.
The only problem you have regarding this component is that it does not have 1.4 wicket support and you will have to either port it to 1.4 or make the switch at least to 1.5(that is what I did).
You could implement a multichoice in a ModalWindow with a TextField and a ListView with the values filtered by the TextField input and selectable by Checkboxes.
ModalWindow and all other components are in Wicket 1.4. You have custom component which you can fully control. You can make it work and look like you want. You are not depending on an external component (i mean Select2).
The advantage of Select2 is the much better UX. However control is limited. It's hard to change it's appearance, it might not fit into your App. Not all js events from the orginal component are exposed and you might evolve into some complex scenario where you will encounter the limits of (Wicket)Select2. It is ok for basic tasks.