hi,

does anybody knows if there's a way to show the selected options in the search results box?
just like when you set display_selected_options = true on Chosen multiselect component (which is its default behaviour)

By default, ember changes the Array and Function prototypes. This can interfere with other libraries, for example when an ember app is embedded in another app or a strange environment (like an App for Microsoft Office). Ember offers a setting to disable this behavior, but it requires more work on the programmer's part to get observers and computed properties on arrays working. More details here:

http://emberjs.com/guides/configuring-ember/disabling-prototype-extensions/

Ember widgets should support apps that have prototype extensions disabled.

Likely prefixing them with addepar- or ember-

I would like to improve the ember code sharing story, @rjackson and myself have been chatting about extending the idea of a namespace to the container/resolver. This will very likely simplify the sharability of code.

Hi I am finding it hard to integrate it with my existing ember app.
Can anybody point on how to integrate it.
I am sure I am not placing the files in correct places!!!

Select/Multi-Select should drop down by default, or up if (1) there is not enough space below, and (2) there is enough space above.

Currently if expands up even if (2) is false (there isn't enough space on top either).

All bootstrap modals are visible because of the following rule :

ember-widgets.css line 586:

.modal {
display: block !important;
..}

I added the following to my Brocfile:

app.import('vendor/ember-widgets/dist/js/ember-widgets.js')
app.import('vendor/ember-widgets/dist/css/ember-widgets.css')

Then did this in my template:

{{multi-select-component contentBinding="this" optionLabelPath="name"   optionValuePath="id" classNames="multi-select-example"}}

But I get the error:

Uncaught TypeError: Cannot read property 'extend' of undefined
on
Ember.Widgets.SelectOptionView = Ember.ListItemView.extend({

And:

Uncaught Error: <myapp@view:default::ember391> Handlebars error: Could not find property 'multi-select-component' on object (generated posts controller). 

It would be nice if there was an option for the select widget that would allow it to accept arbitrary text input as it's value/selection perhaps by dynamically adding the current text to the selection options if not present.

Hi All-

I'm having some issues installing ember-widgets. Right now, I get

Uncaught TypeError: undefined is not a function build/src/accordion.js:10 (anonymous function) build/src/accordion.js:10 (anonymous function) build/src/accordion.js:68 (anonymous function) ember-widgets.js:14

and

Uncaught Error: <Frontend.StudentsView:ember1264> Handlebars error: Could not find property 'select-component' on object <Frontend.StudentsController:ember1257>. VM5293:956

When I try and add a select-component.

Index.html

        <script src="bower_components/jquery/dist/jquery.js"></script>
        <script src="bower_components/jquery-ui/ui/jquery-ui.custom.js"></script>
        <script src="bower_components/handlebars/handlebars.runtime.js"></script>
        <script src="bower_components/underscore/underscore.js"></script>
        <script src="bower_components/d3/d3.js"></script>
        <script src="@@ember"></script>
        <script src="@@ember_data"></script>
        <script src="bower_components/list-view/dist/list-view.js"></script>
        <script src="bower_components/ember-widgets/dist/js/ember-widgets.js"></script>

and students.hbs

<div class="well">
    {{select-component
  contentBinding=model
  prompt="Select a Country"
}}

is there a way to configure the popover widget to appear on mouse over

Hi, I'm trying to implement your library to my current Ember project, as I need the modals and the multi-value select box.
I find it hard to implement and set up this library, without a sufficient guide. I need to scan the source code to understand what dependencies to include.
Currently I'm having a problem with rendering the modals. I included bootstrap.js, list-view.js, ember-widgets.js as dependencies. I also included the ember-widgets.css file together with my css stylings. I put the code for popping up the modal when the user clicks a button in a controller.
The code seems fine, running without any errors in the console. However, when the background fades in, the modal dialog is never shown. I tried to inspect, and found out that the HTML is generated, but it is not showing.
Did I miss something? Any CSS files or dependencies that I haven't included (besides the ones stated above)?

Hi there,

As it is currently written, ember-widgets resolves views in a way that isn't very compatible with ember-cli:

from popover-link-popover.hbs:

<div class="popover-content">
  {{view view._contentViewClass}}
</div>

from popover_link.coffee:

  _contentViewClass: Ember.computed ->
    contentViewClass = @get 'contentViewClass'
    if typeof contentViewClass is 'string'
      return Ember.get contentViewClass
    contentViewClass
  .property 'contentViewClass'

I couldn't figure out any way to resolve an ember-cli view via Ember.get contentViewClass

But, there is a very easy workaround...here is an example:

{{#popover-link-component tagName="button"
  class="btn btn-primary" placement="bottom-left"
  _contentViewClass="custom-popover-content"}}
  Show Popover Button-Left
{{/popover-link-component}}

The key thing to notice is that I am overriding the computed property and just telling the component explicitly where to find the view using {{view 'custom-popover-content'}}

If the maintainers would like, I could add this to the README as a gotcha...

This shows up using emberjs 1.5.1. Simply fixed by replacing all vars called state to _state.

Action handlers implemented directly on object are deprecated in favor of action handlers on an actions hash.

If you are using the ember-routing-drop-deprecated-action-style feature flag, all ember-widgets actions will fail.

Example:

I added a couple small changes to behavior for use in my project. Is there any interest in merging them? I'm happy to make a pull request.

Clear search text on selection:

Ember.Widgets.SelectComponent =
  ... snip ...

  userDidSelect: (selection) ->
    @set 'query', ''
    @sendAction 'userSelected', selection

  ... snip ...

Select existing search text when input is focused, e.g. after pressing escape or clicking the body:

Ember.Widgets.SelectComponent =
  ... snip ...

  searchView: Ember.TextField.extend
    focusIn: (event) ->
      Ember.run.next -> 
        Ember.$(event.target).select()

    ... snip ...

Upgrade dependencies so that ember-widgets can be installed without version conflicts in a new app. A good benchmark for this is installing into a new ember-cli app.

Not sure if I'm doing something wrong here. When I run grunt karma:default, I get the following errors:

Running "karma:default" (karma) task
Chrome 37.0.2062 (Linux) ERROR
  Uncaught ReferenceError: jQuery is not defined
  at /home/chris/Projects/ember-widgets/dependencies/jquery-ui/jquery-ui-1.10.1.custom.min.js:6
Chrome 37.0.2062 (Linux) ERROR
  Uncaught ReferenceError: Ember is not defined
  at /home/chris/Projects/ember-widgets/dependencies/list-view.js:12
Chrome 37.0.2062 (Linux): Executed 0 of 0 ERROR (0.046 secs / 0 secs)

It seems like a bunch of dependencies needed to run the tests are missing from the dependencies directory. Are these meant to be pulled in from vendor via a grunt task?

I ran into this problem when using popover-link-component in my Ember 1.6.1 project. It seems that something has changed in Ember that breaks the expectations on what you're passing into jQuery.

I've created a JSBin that shows there issue. Open up the console and scroll the page. You'll see that jQuery is throwing an undefined is not a function error. Upon further investigation, it appears that the result of debounceSnapToPosition is returning an Array[Class, function] and I'm assuming in older versions of Ember it did not do this (previously just returning a function that jQuery can run).

For the time being, you can get around this issue by short-circuiting the _scrollHandler when initializing the PopoverMixin, like so:

popoverView = Ember.View.extend Ember.Widgets.PopoverMixin,
  # There's something strange with this Mixin that is causing jQuery
  # errors to be thrown when using the debouncedSnapToPosition defined
  # by Addepar. This means that the 'snapToPosition on scroll' functionality
  # does not work until we get this figured out.
  _scrollHandler: ->

Im trying to use the multiple select component binding the optionLabelPath to an attribute in depth.
Example:
{{ multi-select-component
contentBinding="myList"
optionLabelPath="someAttr.otherAttr" <--- the 2 levels depth
optionValuePath="code"
}}

where someAttr is an object with "otherAttr" property.
All works well except the search.
This works using the core Ember.Select view, so I guess is an ember-widget issue.

When using an array of strings, select doesn't show anything

priority: ['high', 'low']

and
{{select-component content=priority selection=taggingPriority}}

See http://cl.ly/image/2S3o3o2f1o1D

I'm using the following versions, with ember widgets built from the current master d8516d1.

Ember : 1.3.0
Ember Data : 1.0.0-beta.5
Handlebars : 1.2.1
jQuery : 1.10.2
Ember Widgets : 0.0.1

Using the Select component I get the following error.

Assertion failed: Unable to find view at path 'searchView' ember.js?body=1:3286

The assertion is here https://github.com/emberjs/ember.js/blob/master/packages/ember-handlebars/lib/helpers/view.js#L169

Downgrading to Ember 1.2.0.1 resolves this issue.

Replacing https://github.com/Addepar/ember-widgets/blob/master/src/templates/select.hbs#L17 with

{{view view.searchView}} 

Resolves this error but then there are others.

The select widget has it's position reset on any scrolling list of items in IE11/Win8.1 which causes some strange behavior.

EX:
Open up the demo page, first click on the select box and you see this

Now scroll a little over halfway down the first page of results click somewhere else on the page to toggle off the rsults, then click back on the select box and you see this.

It's because the inline translate: transform(x, y) values are expecting the scroll position to stay fixed, but infact this broswer/OS combo causes the scroll position to reset.

Should look like http://addepar.github.io/#/ember-widgets/overview

steps to reproduce:

1. grunt
2. search dist/ember-widgets.min.js for Ember.Handlebars.compile(

expectation:

in the minified build all templates to be precompiled, so that only the handlebars runtime is required for production builds.

• prefer templates over templateNames #23
• precompile defaultTemplate

I am trying to figure out how to get Ember-widgets to work with EAK. Add in the DIST js and css is not enough, someone EAK needs to register the templates etc.

Any ideas? (not ready to move to Ember-CLI either, and getting this to work with CLI is a previous issue).

Thanks!

In Firefox (31.0 on OS X 10.9 at least) the modal widget does not dismiss properly. When you close a modal the css class change occurs which hides the modal and the modal background. However the dom elements are not removed, disabling clicking anywhere else on the app. You can see this bug exhibited on the model demo page.

Stepping through the code I found the callback which takes care of destroying the modal never fires after the transition completes.

I am trying to import both ember-widgets and ember-table to a single project using bower.

However, ember-widgets requires handlebars 1.0.0 while ember-table enforces 1.3.0. Is it possible to relax ember-widgets to require >1.0.0?

rather then re-implementing what ember already provides, you could just use

Ember.get or Ember.set in place of:
https://github.com/Addepar/ember-widgets/blob/master/src/select.coffee#L1-L8
https://github.com/Addepar/ember-widgets/blob/master/src/multi_select.coffee#L1-L8

in dist/ember-widgets.js line 910:

Ember.Widgets.SelectOptionView = Ember.ListItemView.extend({

Extends Ember.ListItemView which is undeclared.

It is declared in gh_pages/app.js, hence it works for the demo, but it is not present in the dist/ versions

https://github.com/Addepar/ember-widgets/blob/master/dependencies/list-view.js#L1
this is causing some people trouble with the auto-complete widget

should be 2014-03-03 or greater

https://github.com/Addepar/ember-widgets/blob/master/src/accordion.coffee#L6

When dismissing the modal by clicking outside of the modal area, (i.e. the grayed out background) the model disappears without actions being propagated.

I would think that this should be the same as action as sendCancel, as the user dismissed the modal without confirming.

Opening modal adds margin-right. I had this issue with bootstrap 3 and this should fix it.

// Fixes modal view wrong margin
body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
  margin-right: inherit;
}

Hi,
I think it is pretty frustrating that after i open the select drop-down I have to click to search field to be able to search.

Can the need for second click be eliminated please?

I think it is fine if the serch will got focus automatically after the select dropdown is shown.

What's your opinion?

Would be great if ember-widgets would be installable via bower (without any further build-steps).

Howdy,

I've been trying to get this thing working, but could really use a set up guide. Is there an ETA?

PopoverComponent.hide has

 @$().one $.support.transition.end, => @destroy()

However jquery doc says of $.support:

Intended for jQuery's internal use; specific properties may be removed when they are no longer needed internally to improve page startup performance. For your own project's feature-detection needs, we strongly recommend the use of an external library such as Modernizr instead of dependency on properties in jQuery.support.

Perhaps a modernizr dependency would be better, and fall back if necessary to $.support?

vague classes such as popup popover-title and arrow can easily conflict with existing styles, resulting in unexpected behavior.

A suggestion would be to ensure these are all prefixed.

I've only tested on the iOS simulator so far, but I have noticed in my own code, and on the product demo page (http://addepar.github.io/#/ember-widgets/select) that the select event does not work on iOS devices (I've been focusing on the iPad in particular). You can open the drop down menu, but can not select anything from it.

Has anybody else looked at this problem? Before trying to figure it out myself I wanted to see if anyone else has already made progress on this.

Thanks!
Andrew

http://jsbin.com/netep/4/edit
In this jsbin above, the pre-selected value of "Australia" does not work in the multi-select-component, but if you change it to a select-component, it does work. Am I doing something wrong?

Discussion from #19: "The files should be structured in such a way that to just use the couple of components only (not whole ember-widgets), the inclusion of the features should be very light and isolated."

Ideally, there would be a way to include just a few components, and avoid unnecessary dependencies/large amounts of code from other components.

There are several dependencies that appear to only be useful in development in the dependencies block of the bower.json.

Currently it's

  "dependencies": {
    "bootstrap": "~3.2.0",
    "ember": "~1.1.0",
    "font-awesome": "~4.0.3",
    "handlebars": "~1.3.0",
    "holder": "holderjs#1.9",
    "jquery": "1.9.1",
    "jquery-browser": "jquery.browser#~0.0.4",
    "lodash": "~1.2.1",
    "qunit": "~1.12.0",
    "rangy": "~1.2.3"
  },
  "devDependencies": {
    "sinonjs": "~1.7.3",
    "sinon-qunit": "~1.0.0"
  }

Things like holder and qunit are likely not required in a production setting, so they should be moved to the devDependencies section.

I'm not totally familiar with the ins-and-outs of this project, so I'd need to put in some time to move these things around (to make sure I didn't break anything). If I get some time, I'll try to submit a PR. For now we're using the dist/ js and css because of this problem (and the out-of-date versions problem described in #67 )

This kind of css rules needs to have a more specific css path to avoid conflicts with boostrap popover

.popover.right .arrow {
top: auto !important;
}

The same happens with modals (already registered in ticked #87)

Hey everyone,

We've finished cleaning up and merging the dev branch, which had a huge number of changes and had diverged from master quite a bit. (Those changes have been squashed into one commit: c265d6c).

You'll probably want to run a git reset --hard origin/master on your local master branch, assuming you have no local changes and are ready to upgrade. If you really need everything just like it was, the old-master branch will be around for a while.

Steps to reproduce:

1. Visit http://addepar.github.io/#/ember-widgets/select
2. Type in a "chile" and hit enter
3. The choice "Chile" is selected as expected
4. Type in "asdf" and hit enter
5. An empty box is selected

Hello, here's my brocfile.js:

/.../
app.import('vendor/underscore/underscore.js');

app.import('vendor/ember-list-view/list-view.js');

app.import('vendor/ember-widgets/dist/css/ember-widgets.css');
app.import('vendor/ember-widgets/dist/js/ember-widgets.min.js');
app.import('vendor/ember-widgets/dist/img/invalid_color.svg', {destDir: 'img'});
app.import('vendor/ember-widgets/dist/img/no_color.svg', {destDir: 'img'});
app.import('vendor/ember-widgets/dist/img/select2.png', {destDir: 'img'});
app.import('vendor/ember-widgets/dist/img/spinnner.gif', {destDir: 'img'});
/.../

Any toughs on why throws 'Assertion Failed: You specified the layoutName select_item_layout for Ember.Widgets.SelectOptionView:ember742, but it did not exist.' on my client?

I did an Ember.keys(Ember.TEMPLATES) and there IT IS...

since it load inside the ember-widgets.js, before everything...

don't have a clue..

I've just cloned the project, ran npm install, then ran grunt but I only had index.html in the gh_pages and app directories.. each of them improperly referencing (from those directories) the gh_pages directory for resources.

I was able to cp the index.html in the root directory to fix that issue, however I had to rewrite all the src/href URLS from starting with '/' to './' since I'm running this from localhost, the same issue for all the images that were loaded.

Love the widgets, can't wait to use!!! :D

Is there a way for a user to reset a selection while using the Select widget? In a regular ember select tag, the user can select the prompt to reset the selected value, but in the Select widget, once you have made a selection, there appears to be no way to reset it.
For example, in the country example in jsbin starter kit, (http://emberjs.jsbin.com/xabeb/1/edit), how can a user set the country dropdown back to 'Select a Country' after they have made a selection.
If I've missed something obvious, I apologize :)

I've posted a question about this on stackoverflow. I don't really understand why the disabled property doesn't work in the multi-select-component, since it seems to inherit from the select-component where it does work. Cheers.
http://stackoverflow.com/questions/25375319/how-to-disable-multi-select-component-in-ember-widgets

Need to clean up the gh-pages branch and set up the release script to publish new docs/demo app on every release, similar to how ember-table works.