ember-bootstrap / ember-bootstrap Goto Github PK

Is there a way to subscribe to events that happen within a component? For example, If I have an alert or modal open and the containing controller needs to know when that component has been closed, is that possible given the current api? If not, why not just go ahead and allow the current actions to continue bubbling up?

Can you explain the rationale behind this?

It seems that when the transition is complete, we are triggering a focus event on the modal root element. I have some code that gives focus to an input field in my modal from the openedAction, but when fade animation is enabled, this line of code de-focuses it as soon as the animation is complete.

What was the intent of this line, and is there a way that I can auto-focus fields in my modal?

Introduced by #6, all form elements in a horizontal form have wrong classes, literal "horizontalInputGridClass" instead of reference to property.

... when clicking the close button

Trying out the basic demo in an Ember-cli 2.2.0-beta.1 project:

{{#bs-modal title="Simple Dialog"}}
Hello world!
{{/bs-modal}}

I'm getting this error:

Uncaught Error: ember-wormhole failed to render into '#ember-bootstrap-modal-container' because the element is not in the DOM

Is Ember-cli v2+ supported by ember-bootstrap / ember-wormhole? If so, any idea why I might get this error? The few other controls I tried seem to work ok.

using the

http://kaliber5.github.io/ember-bootstrap/api/classes/Components.Dropdown.html

No matter which example I try I have to click the button twice... dropdown activates on 2nd click. Any tips for this?

I'm writing an acceptance test for an application using bs-modal. The problem is that the andThen() test helper does not wait for the closedAction() to be executed when fade=true (as is the default).

Probably this is because Bootstrap's emulateTransitionEnd calls setTimeout() and the andThen() helper is unable to cope with this (not being a promise).

What are my options? Adding a delay (either with setTimeout or with Ember.run.later) in the test seems to do the trick. But I'm wondering if there is a better way. Are there any examples or documentation concerning tests and ember-bootstrap?

Below a full example. A modal dialog is opened. Once the dialog is closed the background-color of the body is set to red. The acceptance test will fail (because it tests for background-color before the color is changed). When settings fade=false the test succeeds:

app/templates/application.hbs

{{my-popup}}  

app/components/my-popup.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    closed() {
      console.log('Modal completely closed.');
      Ember.$('body').css('background-color', 'red');
    }
  }
});

app/components/my-popup.hbs

{{#bs-modal closedAction='closed' fade=true}}
  I'm a popup!
{{/bs-modal}}

tests/acceptance/test-my-popup-test.js

import { test } from 'qunit';
import Ember from 'ember';
import moduleForAcceptance from 'ember-bs/tests/helpers/module-for-acceptance';

moduleForAcceptance('Acceptance | test popup');

test('popup changes background', function(assert) {
  visit('/');
  click('.modal-dialog button[type="button"]');
  andThen(function() {
    var bodyColor = Ember.$('body').css('background-color');
    assert.strictEqual(bodyColor, 'rgb(255, 0, 0)');
  });
});

I have the following in my confg/environment.js

  'ember-bootstrap': {
      formValidationSuccessIcon: 'icon icon-check',
      formValidationErrorIcon: 'icon icon-error',
      formValidationWarningIcon: 'icon icon-warning',
      formValidationInfoIcon: 'icon icon-info'
    }

I can see that Config.load is getting called from the initializer but it doesnt look like its getting set in the form group, errorIcon is looking up Config.formValidationErrorIcon which is its default value.

I have deprecaton warning "Ember.required is deprecated as its behavior is inconsistent and unreliable."
For example, in the line: https://github.com/kaliber5/ember-bootstrap/blob/master/addon/mixins/type-class.js#L18

ENOENT: no such file or directory, stat '/Users/me/Projects/bs/tmp/concat_with_maps-input_base_path-4RsHvtY9.tmp/0/bower_components/bootstrap/js/transition.js'
Error: ENOENT: no such file or directory, stat '/Users/me/Projects/bs/tmp/concat_with_maps-input_base_path-4RsHvtY9.tmp/0/bower_components/bootstrap/js/transition.js'
    at Error (native)
    at Object.fs.statSync (fs.js:892:18)
    at ConcatWithMaps.keyForFile (/Users/me/Projects/bs/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-caching-writer/index.js:90:20)
    at Array.map (native)
    at ConcatWithMaps.CachingWriter._conditionalBuild (/Users/me/Projects/bs/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-caching-writer/index.js:112:65)
    at /Users/me/Projects/bs/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/read_compat.js:61:34
    at lib$rsvp$$internal$$tryCatch (/Users/me/Projects/bs/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:493:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/me/Projects/bs/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:505:17)
    at lib$rsvp$$internal$$publish (/Users/me/Projects/bs/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:476:11)
    at lib$rsvp$asap$$flush (/Users/me/Projects/bs/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

right after npm install && bower install && ember server

The homepage of the docs says that the Bootstrap CSS is included, but when I use

First of all congrats for this awesome addon.

I have a bs-form with an action attribute pointing to my action in the route. One thing I haven't found how to do it is to send back (data up) the form object to the action. Using model=formObject doesn't work either. Do you know how I could achieve that? I think it's rather crucial since most actions in Ember 2.0 take place in the route and not in the controller. I can explicitly ask the controller from the route to get the formObject but I would prefer return it from the component's action directly.

What?

modal-closer's targetObject property is parentView.parentView.parentView which places a pretty hard constraint on the layout of the modal -- no other views/components can be added to the layout in between the modal header/footer and the bs-modal component or the close action will get sent to the wrong ancestor component.

Why?

Adding additional wrapping components to the layout? Why would somebody ever want to do such a thing? I'm glad you asked! :)

For reasons not really relevant to this issue, I am using a custom form component that performs validations using parsley.js, rather than bs-form. Also, I prefer to align my generated HTML with what the browser expects whenever possible, as it makes various "off the beaten path" uses cases such as old-school mobile browsers, screen readers and accessibility more likely to function correctly. So, I want to lay out my modal something like this (leaving out a bunch of the details):

{{#bs-modal body=false footer=false}}
  {{#parsley-form action=(action "submit")}}
    {{#bs-modal-body}}
      <input type="text"/>
    {{/bs-modal-body}}
    {{bs-modal-footer closeTitle="cancel" submitTitle="ok"}}
  {{/parsley-form}}
{{/bs-modal}}

This way the form wraps both the body and the footer and I don't have to put a hidden <input type="submit"/> or do custom key handling to support submit-form-on-enter.

That is my use case, but speaking more broadly, the restriction that you cannot wrap the modal header or footer in a component seems less than ideal.

How?

I have two proposals for how to address this, one that puts a teeny burden on the developer but is more Ember-onic, and one that is more similar to the current implementation in that it "just works".

My preference is option 1, but I'd be happy to put together a PR for either one.

Option 1

The targetObject property on the modal-closer is override-able, so if the template had access to the bs-modal component, it could just pass it in, overriding the default. This would involve changing the bs-modal's {{yield}} to {{yield this}}, and then any developer that wants to insert an extra component would just need to add as |modal| to the {{#bs-modal}} and targetObject=modal to the {{bs-modal-footer}}:

{{#bs-modal body=false footer=false as |moda|}}
  {{#parsley-form action=(action "submit")}}
    {{#bs-modal-body}}
      <input type="text"/>
    {{/bs-modal-body}}
    {{bs-modal-footer closeTitle="cancel" submitTitle="ok" targetObject=modal}}
  {{/parsley-form}}
{{/bs-modal}}

Option 2

This is a bit of a hack, but I believe would work. We could just make the targetObject property on the modal-closer a bit more intelligent. If we add an isBsModal: true property to bs-modal, then we could redefine modal-closer's targetObject to search up the tree like this:

targetObject: Ember.computed('parentView.parentView.parentView.parentView.parentView.parentView', function() {
  let view = this.get('parentView');
  while (view && !view.get('isBsModal')) {
    view = view.get('parentView');
  }
  return view;
});

All the .parentViews in the computed property dependency are for invalidation in case things are re-rendered such that the modal-closer component persists, but the ancestor hierarchy changes. This would allow three additional wrapping components in between the modal-closer and the bs-modal -- obviously we could make it support more by adding more .parentViews. It might also work to do it like this:

targetObject: null,
didInsertElement() {
  this._super(...arguments);

  let view = this.get('parentView');
  while (view && !view.get('isBsModal')) {
    view = view.get('parentView');
  }
  this.set('targetObject', view);
}

but I'd have to do a bit of research to make sure willClearRender/didInsertElement would reliably be called anytime the ancestor hierarchy changes.

So, yeah, this option is kind of hacky which is why I prefer option 1.

is there a property to toggle the accordion panel? forgive me, this is all new; using the example I can get them all to expand and close on switch, but i can't collapse any individual item once expanded -- i can only collapse by expanding another...

The bs-modal component doesn't seem to work on Safari for iPhone. The modal dialog does not appear on the screen.

To be called when the alert has been dismissed.

Starting a new project and have not used ember-bootstrap before. I am using ember-cli 2.5.0.

I followed the instructions for installation and had no errors, but I am not getting bootstrap classes, nor the components. I do see ember-bootstrap in my bower_components folder.

Any help for the newbie is appreciated!

See https://github.com/martndemus/ember-font-awesome#customize-with-sassscss-or-less

Are you planning to add bootstrap modal or you are going to merge 'modal-native' branch with master ?

In situations where you prefer to use another strategy for importing Bootstrap CSS... I

I think it would be great to be able to declare animation speed of modal fade in/out.

More directly, I want to be able to pass in the properties to {{bs-modal}}:
Modal.TRANSITION_DURATION = 300; Modal.BACKDROP_TRANSITION_DURATION = 150;

I have an issue where I have to double click on a bs-dropdown-button in order for the dropdown menu to appear. Doing some Googling and finding some info about an Angular/Bootstrap project that had the same problem, I removed the data-toggle="dropdown" in Chrome inspector and now it only takes one click. Does this need to be removed from the library or is it more likely that I have my app set up in a weird way?

Thanks!

{{#bs-button id="detect-user" type="primary" classNames="primary-button" action="detect-user"}}
Detect user
{{/bs-button}}

The action is never fired... all I did was install the addon, restart ember server, and add this line of code. The button shows up with the correct bootstrap styling and everything, but the action NEVER gets fired on click. Am I doing something wrong or is this a known issue?

Forms support https://github.com/dockyard/ember-validations already, add support for https://github.com/offirgolan/ember-cp-validations

I don't see any documentation on getting the collapsable navbar to work. Clicking the hamburger icon doesn't seem to open up the collapsed menu. Is there a component needed to get that to work?

I've noticed that there are pretty much zero ember addons that provide an easy way to implement tabs, so I'm assuming it's a hard thing to replicate, but it would be awesome to get access to tabs available in this package which has so many other things from Bootstrap that I'm used to! 👍

bs-select can not be disabled

{{bs-select prompt="Select one..." content=model.showTypeOptions disabled=true}}

Does not render a disabled attribute.

After adding this to your node_modules/ember-bootstrap/addon/components/bs-select.js it does disable.

attributeBindings: ['disabled']

I have the feeling I am missing something? Is this intentionally because Ember.Select does not support that? http://stackoverflow.com/questions/11457206/emberjs-how-to-disable-ember-select Workaround?

In the docs for select box items I can see the following:

{{bs-form-element controlType="select" choices=countries choiceLabelProperty="name" choiceValueProperty="id" label="Country" value=selectedCountry}}

The above works fine when using controlType="select" but when you change to controlType="select2" there are no options to select from?

I noticed select2 is a valid option in:

The type of the control widget. Supported types:

'text'
'checkbox'
'select'
'select2' (needs ember-select-2)
'textarea'
any other type will use an input tag with the controlType value as the type attribute (for e.g. HTML5 input types like 'email'), and the same layout as the 'text' type

and I have run ember install ember-select-2 so I'm just wondering if there is a different way to load the choices in if using select2?

Hi, I've tried to make a dynamic menu , however with no success. In the code below, the each-in inside the bs-dropdown-menu does not change when I change the variable.

        {{#each-in filters as |dimension keywords|}}
          {{#bs-dropdown tagName="li"}}
          {{#bs-dropdown-toggle}}{{dimension}} <span class="caret"></span>{{/bs-dropdown-toggle}}
          {{#bs-dropdown-menu}}
          {{#each-in keywords as |keyword val|}}
            <li><a href="#">{{keyword}}</a></li>
          {{/each-in}}
          {{/bs-dropdown-menu}}
          {{/bs-dropdown}}
        {{/each-in}}

The variable is:

  filters: {
    contaNivel2: { 'MANUTENCAO': true , "ONE MORE FILTER": true}
    contaNivel1: {"OTHER FILTER": true}
  },

I currently have an asp.net mvc application that has its own copy of bootstrap that I need available to it. I use simple imports in the ember-cli-build so that I have access to it. I'm assuming your add-on brings in its own bootstrap version as well... maybe not?

do you have any recommendations on handling this? I can't see having my users download both bootstrap copies. Really want to use this add-on.

Thanks

dismissed must probably be true when initially hidden

http://kaliber5.github.io/ember-bootstrap/api/classes/Components.Button.html
No example code for Basic Usage and some other.

Hello,
I'm new to Ember, so please forgive what is probably a silly question. I'm using a bs-alert on a login form to display an eventual error message, in case user fails to login.

If user dismisses the alert by clicking its "close" button, and then fails again to login, the alert does not show anymore. I think I should somehow reset the control when he tries to login, but cannot understand how to do this: could you please help?

Thanks,
al.

Hello I am completly new to ember.js

I followed the installation guide. However the css is not applied. Do I need to do an import in my scss files ?

for now I just have

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp({
  'ember-bootstrap': {
    'importBootstrapTheme': true,
    'importBootstrapCSS': true,
    'importBootstrapFont': true
  }
});

Hi, what's the possibility of adding tooltips support, I can contribute a PR for it but I'm wondering what's the best approach to mach the vision you have for the addon.

I was thinking of doing something similar to what was done on the old bootstrap-for-ember code where you have an component which will render all tooltips, then a component for each tooltip and a helper which will bind an element to have tooltips enabled; the positioning for each tooltip will be calculated from the element with the binding. I'll skip the controller and outlets hackery they had if possible.

Do you think this is a viable approach?

When will this project support BS4?

Can you please add a navbar example with the collapse component to the documentation?

Thanks,
Joep

should this be added into the bs-form-element component? potential memory leak without it? I will submit PR if wanted

https://github.com/kaliber5/ember-bootstrap/blob/master/addon/components/bs-form-element.js

 willDestroyElement: function() {
   if (!Ember.isBlank(this.get('property'))) {
       Ember.Binding.from("model." + this.get('property')).to('value').disconnect(this);
       Ember.Binding.from("model.errors." + this.get('property')).to('errors').disconnect(this);
    }
 }

Hi, this plugin seems to break ember fastboot due to transitions.js referencing a global jQuery variable (which is available as window.jQuery in ember fastboot). Ember CLI version 2.4.3

Not sure how you can do that, but whenever I want to find this addon from google it takes me some effort.. searching for "ember bootstrap" doesn't show up at all (not even in the 5th page).

A component for the progress bar would be nice :-)

http://getbootstrap.com/components/#progress

I have a child component (rendered in the modal body) that needs to be able to close the modal in which it is wrapped. Of course, the component shouldn't need to know if it's wrapped in the modal. In the child component, was thinking I could send the modal's close action, to close the modal. But that's not working.

{{#bs-modal footer=false}}
    {{some-component}}
{{/bs-modal}}

Where some-component has this:

actions: {
    cancel() {
        this.sendAction('close');
    }
}

Not working. Nor can I pass the close action into the child:

{{some-component close="close"}}

Suggestions? Help? Thanks!

It throws error "property 'ember-bootstrap' is not found"

See here the generic problem and solution
ember-cli/ember-cli#3718

It would be nice to have it fixed :)

Brocfile is still in the docs. See:

https://github.com/ember-cli/ember-cli/blob/master/TRANSITION.md#brocfile-transition

I have time in 2 weeks to create a PR. Perhaps anyone can beat me to it.

The drop down button stays seperated in the button group:

<div class="input-group">
<div class="input-group-btn">
{{#bs-dropdown}}
{{#bs-dropdown-button}}Dropdown <span class="caret"></span>{{/bs-dropdown-button}}
{{#bs-dropdown-menu}}
<li>Something</li>
<li>Something different</li>
{{/bs-dropdown-menu}}
{{/bs-dropdown}}
</div>
{{bs-input value=foo  placeholder="foo"}}
</div>

There is one <div> to much in the result:
<div class="ember-view dropdown">

It looks to me like the dropdown menus do not work.

Have I missed something or is this an issue?

http://emberjs.com/api/data/classes/DS.Errors.html