knownasilya / ember-toggle Goto Github PK

• small
• medium
• large

default: medium

And use a .x-toggle.small pattern for classes.

When the toggle is disabled, actions are still fired...didn't expected that.
Is this desired?

So only the themes that the user wants.

Ideas @rwjblue? Is it possible to configure in the Brocfile, and only import what's set, e.g.

var toggle = Toggle({
  includedThemes: ['light', 'default'],
  defaultTheme: 'light'
})

Thanks for the great addon!

If you add 'on' and 'off' text to a toggle and set the toggle to disabled there is not way to style the text without reopening the x-toggle component. This is because the .x-toggle-disabled class is set on the toggle not the container.

I'd expect a class on the container like .x-toggle-container-disabled.

Ember.Component has methods named on and off, which x-toggle is attempting to reuse for its own purposes. This fails in confusing ways on some versions of Ember. For example, using Ember 1.13 with x-toggle 0.5.10, the defaults provided in x-toggle are ignored and you end up trying to do indexOf on function values.

{{x-toggle value=status theme='ios' size="small" onToggle=(action (mut status)) onLabel='status' offLabel='status'}}

I recently upgraded to the ember shims beta that uses the new module import syntax, and was getting deprication errors due to the use of things like import Component from 'ember-component';

I suggest that we switch to using the default global Ember import, and then we could possibly do the constant destructuring. What are you're thoughts @knownasilya @rwwagner90 ?

All of the the documentation uses the mut helper, so it's unclear that value should be a string that matches the labels.
I thought value was supposed to be a boolean because of
the default value: false.

To add to that, I'm using labels that are one letter representation of the actual value they are toggling, and right now this behavior is pushed onto the consumer.

@knownasilya
Could you think of any way of supporting this so we can make it behave like a options in a select (where the label and values are different but map to each other)

Would be nice to have a {{yield}} at line 6 on template.hbs so that we can add our own question labels like:

{{#x-toggle value=showHidden onToggle=(mut showHidden)}}
Show hidden?
{{/x-toggle}}

Any thoughts?

• Document new APIs
• Add toggleLabel label component, which handles the value and label display for you
• Update to babel 6
• Release

I have just started using ember-cli-toggle and I'm finding the css theme files are not getting compiled. If I copy and paste those files into base.css it works.

Trying to create a simple controller with a boolean flag attribute, and the code:

{{x-toggle value=flag onToggle=(mut flag)}}

As taken from the README, Ember raises an error:

Assertion Failed: You modified flag twice on <webapp@controller:session/index::ember903> in a single render. This was unreliable and slow in Ember 1.x and is no longer supported. See https://github.com/emberjs/ember.js/issues/13948 for more details.

Tested with latest ember-cli-toggle (v2.0.2) and Ember 2.10

I have this in my template:

{{x-toggle value=item.enabled class="pull-right"}}

Which is bound to this:

{id: 1, enabled: true}

But when the page is rendered the value of item is set to false

I can't use the component as it seems to make the page fail with A helper named 'x-toggle' could not be found.

I can add a stack trace if needed. I ran rm -rf node_modules bower_components, then re-ran npm install && bower install.

I'm on Ember 1.13.5, EmberData 1.13.5.

I not sure why I am getting this error in a my application. Is it because I haven't added the line below to a config file. I am new to Ember and am not sure where I'd add that information. Do I add it to environment.js or create a new file in the config folder? I am currently using Ember 2.5.1

Add a configuration for ember-cli-toggle to include only the themes that you will use.

ENV['ember-cli-toggle'] = {
includedThemes: ['light', 'default', 'flip'],
excludedThemes: ['flip'],
defaultShowLabels: true, // defaults to false
defaultTheme: 'light', // defaults to 'default'
defaultSize: 'small', // defaults to 'medium'
defaultOffLabel: 'False', // defaults to 'Off'
defaultOnLabel: 'True' // defaults to 'On'
};

Hi! When I include ember-cli-toggle into the main app, it's fine.

But when I instead include it into an addon's dependencies, the x-toggle component appear unstyled.

PS Thank you for the awesome component!

Looks like there are some cases when you want a customized toggle and don't need those default styles. Is it suitable to make them importable optionally like add @import 'ember-cli-toggle' to the app.css?

The value on my controller isn't being toggled or bound when changing the switch.

the code I think should work according to the README is {{x-toggle toggle='onlineOnly' theme='flip' off='All' on='Online'}}, but the value is not being updated on my controller. Going through the demo and other issues, I've seen other ways such as toggled=onlineOnly, value=onlineOnly, but none of these seem to be changing the value on my controller. Also have tried variations with to property set as controller.onlineOnly.

On my controller I have either defined the property as onlineOnly: null, or I have left off the property.

I'm new to ember and as there aren't other issues around this fundamental problem, I'm guessing I'm doing something wrong, but everything seems right to me according to the available docs.

Thanks for making this! Having trouble getting it to work in canary and ecli 0.2.0 stock new app

installed with npm install --save-dev ember-cli-toggle

All suggested inputs provided the subject error
{{x-toggle toggle='startCar'}}
{{x-toggle theme='light' toggle='enableLayer'}}
{{x-toggle theme='ios' size='small' toggle='muteVolume'}}
{{x-toggle theme='flat' toggle='disableTest'}}
{{x-toggle theme='flip' off='Nope' on='Yep' toggle='haveFun'}}
{{x-toggle theme='skewed' size='large' toggle='enablePartyMode'}}

If an app customizes podModulePrefix, their resolver won't find app/components/x-toggle/component.js.

I think the only way for addons to remain 100% compatible is to stick with the stock structure (app/components/x-toggle.js).

Hi! I'm doing something like this:

{{x-toggle value=tfa onToggle=(mut tfa)}}

When tfa is boolean true, the toggle is in the off state, but when tfa is the string "True", it is in the on state. If tfa is any other string, it is also off. Is this intentional, or is this a bug?

Uncaught Error: Could not find module ember-cli-toggle/components/x-toggle/template imported from ember-cli-toggle/components/x-toggle/component

the above error occurs whenever i try to use {{x-toggle}} component in my application

i tried all of the below:
{{x-toggle toggle='startCar'}}
{{x-toggle theme='light' toggle='enableLayer'}}
{{x-toggle theme='ios' size='small' toggle='muteVolume'}}
{{x-toggle theme='flat' toggle='disableTest'}}
{{x-toggle theme='flip' off='Nope' on='Yep' toggle='haveFun'}}
{{x-toggle theme='skewed' size='large' toggle='enablePartyMode'}}

My ember version is 1.11.1
and Ember Data : 1.0.0-beta.16.1

This leads to error "calling set on destroyed object" during application level tests when view is destroyed before debounce timer completes

I'm rendering my component with an if like so. The boolean changes via a button.

{{#if myBoolean}} {{my-emberclitoggle-comp}} {{/if}}

And the CSS of the component is not switching to the selected state when clicked, but the value is being changed correctly.

When the component is rendered normally example:
{{my-emberclitoggle-comp}}
the CSS changes fine when clicked.

I also tried by rendering the component via transitionTo and the CSS doesn't change either.

Here is a reproduction in a vanilla 2.3.0 Ember app.
https://github.com/MarioDiar/emberToggle-Bug

Is there a way to know which toggle button called the action function. The toggle only has one parameter (isToggeled) so how else can i send the Id of the button that triggered the action?

• Run tests against other versions of ember
• Test component
  • checking
  • disabling
  • actions

The component triggers the toggle action at initialization.
I think that isn't a good idea because at this time the position isn't defined by user.

If I want to persist my model directly when the toggle action is triggered, I should test if value is different with previous to know if it's well the user who has triggered it.

So I just installed this addon, looks pretty swish, great job!

However, the following code results in a toggle that looks like the screenshot below it;

{{x-toggle value=isLive onToggle=(action (mut isLive)) size='large' showLabels=true onLabel='Live' offLabel='History' theme='default'}}

You can see that the "Live" label is aligned next to the end of the toggle, rather than after the entire toggle container.

Here's an ember-twiddle showing the issue
https://ember-twiddle.com/306112700222db6884344a56a24cccd3?openFiles=templates.application.hbs%2C

I was able to solve this by adding width:auto to x-toggle-container (this overrides the element's set value of width:4.4rem; )

Have I done something wrong? Any idea why I had to specifically declare width:auto to get this to work?

Occurs in both Edge and Chrome

Thanks!

Love the underlying choice of toggle buttons but unfortunately it isn't working for me in Ember with the ios7 or flat themes. My configuration in the CLI's environment file is as follows:

var ENV = 
  // other config
  // ...
  'ember-cli-toggle': {
    includedThemes: ['light', 'default', 'flat', 'ios7'],
    excludedThemes: ['flip'],
    defaultTheme: 'flat',  
    defaultSize: 'medium',   
    defaultOff: 'False',    // defaults to 'Off'
    defaultOn: 'True'       // defaults to 'On'
  }

};

This results in no Javascript errors and the view code is rendered but it displays nothing. It appears that the light and default themes do work though.

I keep getting this error whenever I add {{x-toggle}} to my template. Doesn't matter what options I provide it. Has this anything to do with the new computed property syntax?

Any advice?

How can I disable the switch, for the user who don't have the edit access.

  Ember      : 2.4.5
  Ember Data : 2.5.1
  jQuery     : 2.2.3

In my form component:

  {{x-toggle theme='flip' size='small' 
                  toggle='setEventStatus' 
                  value=model.isClosed
                  name='eventStatus' onLabel='Open' offLabel='Closed'}}

I find that the toggle event is firing as the route is rendered. It should not fire until a user clicks on the x-toggle component.

Major release assumes breaking changes, but what are they?

{{x-toggle value=true theme='light'}} is rendered in a non-checked state. Is that expected behaviour?

Hi team,

Please provide a demo link so that we can find out the proper stylesheet.

http://knownasilya.github.io/ember-toggle/

In the demo app, there is an example showing "Discrete labels and values".

{{x-toggle
  showLabels="true"
  offLabel="Hey:hey"
  onLabel="Ho:ho"
}}

The syntax for the label text looks a lot like how classNameBindings are done for components.

classNameBindings: ['isEnabled:enabled:disabled'],

So my assumption is that "Hey" would be the text, and "hey" the value, but that does not seem to be how the toggle is actually working.

It seems like the entire string is being set as both the value and the label.

Maybe I'm misunderstanding the intention, but what's the difference between "Hey:hey" in this example vs "Hey" in the example above?

DEPRECATION: Enumerable#contains is deprecated, use Enumerable#includes instead. [deprecation id: ember-runtime.enumerable-contains] See http://emberjs.com/deprecations/v2.x#toc_enumerable-contains for more details.

Currently Ember has no checkbox addon with support for three states. ember-cli-toggle could be the first!

Able to set id on the checkbox input, which can also be used with the label:

<label for="{{enableDeployId}}">Enable Deploy</label>
{{x-toggle for-id=enableDeployId on-toggle='enableDeploy'}}

The documentation says that adding off and on to a toggle should not change the value of a bound property unless you 'overload' the label/value:

Finally, it is sometimes the case that rather than a true or false value the toggle is meant to move between two discrete, but non-boolean states. In order to support this functionality there is an overloaded form of setting the on and off properties which not only sets a "label" for the state but also a "value". In our "hey" versus "ho" example you might do the following:

Thus, it is expected that controller.toggled is a boolean value equal to true or false in the following situation:

{{x-toggle value=controller.toggled showLabel='true' off='Hey' on='Ho'}}

However, in v0.1.15 of ember-cli-toggle, controller.toggled is always equal to Ho or Hey when it should be equal to true or false, respectively.

Some people try to use the toggles by dragging, but the action fails since we don't support that.

I'm having difficulties getting this to work with toggling booleans.

component:

...
booleanValue: false,
...

template:

my value: {{booleanValue}}
{{x-toggle value=booleanValue onToggle=(mut booleanValue) theme='light' size='large'}}

.. then the output is either my value: on or my value: off. Is it possible to simply toggle between true and false?

I would have assumed unless you used the on or off computed properties that the value of the control would be a boolean true/false but instead I'm getting the capitalized text "True" and "False" for the bound value.

Hi, whenever I use the theme attribute the 'toggle-element' becomes completely blank (as in invisible).
Without defining that attribute the default 'toggle-element' comes up just fine.
(I'm using bootstrap, also without bootstrap the sam occurs)

$ ember -v
version: 1.13.8
node: 0.12.2
npm: 2.13.4
os: darwin x64

It simply doesnt work in 2.10. I tried to set up a minimal toggle button in a new project but nothing happens to the button when i click. It does not toggle.

By default the whole switch is filling my whole table cell and its centered. How would I make it inline and align to the left? The default styling seems kind of strange to me.

I tried using this inside a link-to. But when i click the switch the link-to event is sent and the switch event is cancelled.

It seems odd that we are checking labels and values and all that. Shouldn't a toggle switch just have true or false values based on whether the checkbox behind the scenes is checked?

Hello, I have a question to ask you. I added the configuration as you requested, ember, install, ember-toggle, and config/environment, but it didn't work. Please help, thank you.

{{x-toggle value=toggled theme='ios' onToggle=(action (bsSwitchChanged toggled))}}

if (environment === 'development') {
// ENV.APP.LOG_RESOLVER = true;
ENV.APP.LOG_ACTIVE_GENERATION = true;
ENV.APP.LOG_TRANSITIONS = true;
ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
ENV.APP.LOG_VIEW_LOOKUPS = true;
ENV.locationType = 'hash';
ENV['ember-cli-toggle'] = {
includedThemes: ['light', 'default', 'flip','ios'],
excludedThemes: ['flip'],
excludeBaseStyles: false, // defaults to false
defaultShowLabels: true, // defaults to false
defaultTheme: 'light', // defaults to 'default'
defaultSize: 'small', // defaults to 'medium'
defaultOffLabel: 'False', // defaults to 'Off'
defaultOnLabel: 'True' // defaults to 'On'
}
}
`

It's my code. I don't know what's wrong with it. Please give me your advice