adopted-ember-addons / ember-collapsible-panel Goto Github PK

At the moment the first click to toggle does not animate the body. I stopped using this addon and wrote a custom component for this reason.

You should use a transition instead of the use option like this:

export default function() {
  this.transition(
    this.includingInitialRender(),
    this.hasClass('some-body'),
    this.use('crossFade')
  );
}

Currently this addon makes some opinionated choices about how the UI of the collapsible panels is rendered.

A better fit for this addon might be to provide contextual components that don't render anything but instead provide the primitives needed for collapsible panels without the UI.

thanks for the great addon!

I'd love to do something like this:

{{#cp-panel as |p|}}
  {{#p.toggle}}
    <h3>
      Cool title
    </h3>
    {{#if p.isOpen}}
      <i class="fa fa-angle-up"></i>
    {{else}}
      <i class="fa fa-angle-down"></i>
    {{/if}}
  {{/p.toggle}}

  {{#p.body}}
    <p>Something cool to show</p>
  {{/p.body}}
{{/cp-panel}}

is there a design reason why the isOpen isn't exposed like above? or am I doing something really dumb at it is anyway?

thanks for the help

CI was brought back over in #88 (with the migration from Travis to GitHub Actions), but some CI jobs were disabled there (in order to keep the PR a bit more focused).

This issue is tracking "bringing back" the following CI scenarios:

• Ember 3.20
• Ember 3.24
• Ember 3.28
• Ember Classic
• Ember Release
• Ember Beta
• Ember Canary
• Embroider Safe
• Embroider Optimized

I want to override all the tagNames for creating an expandable table, so I need to override the panel body, the root element's tagname too, etc. Is it possible?

How do I have multiple panel open at the same time? Currently opening one panel closes the other one.

I was trying to embed collapsible display using version ember-collapsible-panel-1.0.

After installing also, I am getting assertion fail issue.

"Error: Assertion Failed: A helper named 'p.toggle' could not be found
at EmberError (http://localhost:4200/assets/vendor.js:25125:21)
at Object._emberMetalCore.default.assert (http://localhost:4200/assets/vendor.js:14755:13)
at Object.lookupHelper [as default] (http://localhost:4200/assets/vendor.js:20038:32)
at Object.lookupHelperHook [as lookupHelper] (http://localhost:4200/assets/vendor.js:17778:55)
at http://localhost:4200/assets/vendor.js:60155:30
at Object.renderAndCleanup (http://localhost:4200/assets/vendor.js:61625:18)
at hostBlock (http://localhost:4200/assets/vendor.js:60162:32)
at continueBlock (http://localhost:4200/assets/vendor.js:60154:5)
at Object.block (http://localhost:4200/assets/vendor.js:60150:5)
at Object.block (http://localhost:4200/assets/vendor.js:59377:17)"

My hbs code is as sample provided in page.

{{#cp-panel open=true as |p|}}
{{#p.toggle}}

Click me!

{{/cp-panel}}

After installing this plugin I get an error from dependency-check.js.

Need to add this in a test's afterEach for proper cleanup:

Ember.run(() => {
  application.__container__.lookup('service:panel-actions').get('state').reset();
});

Need a better solution

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency release-plan to ^0.9.0
• Update dependency bootstrap to v5
• Update dependency eslint-plugin-n to v16
• Update dependency stylelint to v16
• Update dependency stylelint-config-standard to v36
• Update dependency stylelint-prettier to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

When I use this addon with ios on cordova, I have to tap the panels twice to open initially, after which they can be toggled with one tap. I have ember-hammertime and added the touch-action: manipulation; cursor: pointer; to the cp-Panel class. What can I do to fix this?

I'll try to explain as best as I can but essentially our app is composed like this:

• consuming app
  • component library add-on
    • ember-collapsible-panel
    • a bunch of other components

The dependency-checker service appears to be looking at the consuming applications environment for the add-on ENV['ember-collapsible-panel'], and not the add-on with which it was bootstrapped.

Currently, I've been able to get around this simply by installing the add-on at the consuming application.

@samselikoff Great add-on. Some very cool patterns in here.

Is there a way to add a deploy preview to the CI checks? If so, that would make it easier to review some PRs.

In Ember 2.7 Ember.Binding is deprecated

_setup: Ember.on('init', function() {
  const binding = Ember.Binding.from('open').to('panelState.boundOpenState').oneWay();
  binding.connect(this);
}),

http://emberjs.com/deprecations/v2.x/#toc_ember-binding

Getting hard-to-reproduce test failures, may have something to do with resetState

The current docs dummy app is showing its age. It still depends on TED header etc.

Options to consider:

• @empress/field-guide
• docfy

Other ideas?

use case: detecting if any panels in a group have been opened (for conditionally displaying a "collapse all" button)

options:

1. isAnyOpen(groupName) - boolean flag specific to this use case
2. getPanelStates(groupName) - expose an array of state data (probably just panel name and isOpen) and let consumer compute a flag. This could accommodate additional use cases, but also exposes more data publicly.
   cc @ryanto @samselikoff

Currently panelActions exposes actions to mutate the state. #7 adds methods that let users query the state of panelActions, so we should rename this. Perhaps to cpPanels.

The checkbox inside the panel header is not working.
I know that the panel header wraps any element in an tag thus making the whole panel header a link.
Is there a way to include checkbox or any other element inside the header?

Deprecation details: https://emberjs.com/deprecations/v2.x/#toc_arguments-in-component-lifecycle-hooks

The cp-panel component is using the unsupported, now deprecated attrs arg in the didReceiveAttrs hook (https://github.com/tedconf/ember-collapsible-panel/blob/master/addon/components/cp-panel/component.js#L37). Instead component attrs should be retrieved via Ember.get.

Easier to show:
http://tedconf.github.io/ember-collapsible-panel/
Go to the "Nested panels" section, toggle the parent element once or twice and the child elements will display strangely.
Without animations, this issue doesn't happen.

This was added here: aeb6a44

It isn't documented in the Dummy app.

Need to add an example of usage.

Im seeing an error when trying to use this addon in an app running FastBoot. It explodes pretty spectacularly and FastBoot ends up returning a 502 bad gateway.

There was an error running your app in fastboot. More info about the error: 
 ReferenceError: name is not defined
    at Module.callback (/dist/fastboot/vendor.js:82789:11)
    at Module.exports (/dist/fastboot/vendor.js:132:32)
    at Module.reify (dist/fastboot/vendor.js:153:59)
    at Module.exports (dist/fastboot/vendor.js:130:10)
    at requireModule (dist/fastboot/vendor.js:32:18)
    at _extractDefaultExport (dist/fastboot/vendor.js:112943:20)
    at resolveOther (dist/fastboot/vendor.js:112656:32)
    at superWrapper (dist/fastboot/vendor.js:26374
          throw new Error('infinite rendering invalidation detected');
          ^
Error: infinite rendering invalidation detected
    at Array.loopEnd

It seems to be https://github.com/tedconf/ember-collapsible-panel/blob/master/addon/services/panel-actions.js#L4 that is throwing the error. Im assuming its because name is undefined at that point.

Changing it to name: null seems to fix the FastBoot error.

Not really sure what's going on, but in a fresh ember app, I'm getting the following error:

my project is simply:

$ ember -v
ember-cli: 3.3.0
node: 8.11.3
os: darwin x64

$ ember new scratch
...

$ cd scratch
$ ember install ember-collapsible-panel
...
[replace application.hbs with "basic usage" example from the docs site]

I can give you a repo if you like. I have a hunch it has to do with the module unification/pod component structure.

It appears the latest tagged version, 3.2.1, is not on npm. I tried install it but it said the latest version is 3.2.0. The npm UI says similar.

We created a 3.2.1 tag on GH but never published. Need to get it working.

With Ember-CLI 2.18.2, I'm getting the following deprecation message at the start of an ember serve:

DEPRECATION: An addon is trying to access project.nodeModulesPath. This is not a reliable way to discover npm modules. Instead, consider doing: require("resolve").sync(something, { basedir: project.root }). Accessed from:   new NPMDependencyVersionChecker (C:\Users\rmack\Code\TFS\filterwizard\trunk\source\FilterWizardClient\node_modules\ember-collapsible-panel\node_modules\ember-cli-version-checker\src\npm-dependency-version-checker.js:11:33)

The root of the problem is:

ember-collapsible-panel@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/ember-collapsible-panel/-/ember-collapsible-panel-2.1.1.tgz#2ab8b564f221a284079bd2a049a5f8f29b3fef44"
  dependencies:
    ember-cli-babel "^5.1.6"
    ember-cli-htmlbars "^1.0.3"
    ember-cli-version-checker "^1.1.6" 

The latest ember-cli-version-checker is 2.1.0, a major version bump above 1.1.6 (or 1.3.0 or ...), a bit further than I wanted to tweak up in the yarn.lock, since semver promises the possibility of breaking changes.

Recently, PR #43 added the aria-expanded attr to the cp-panel-toggle component when it becomes open. This works in that the attr is added to the DOM, but screen readers do not annouce that state. It turns out ARIA attrs need to have an actual value assigned to it, e.g. aria-expaned="true" or aria-expanded="false".

Something like the following could be done:

attributeBindings: [ 'ariaExpanded:aria-expaned' ]

ariaExpanded: computed('isOpen', function() {
  return this.isOpen ? "true" : "false" ;
})

I have a use case where I want to disable the on-click listener on the panel-toggle component. I can overwrite the on-click property in the dom to equal false but then the console throws an error since the action attempts to treat it as a function.

I'm currently passing in a empty function (instead of a boolean) to avoid the error. Could add a "disableClick" property.

this.attrs.disableClick ? null : this.get("on-click")();

Willing to open up a PR if interested.

• per panel
• per group

I noticed this issue: #47

But I still see it used in the documentation site, causing much pain -> http://adopted-ember-addons.github.io/ember-collapsible-panel/

Any chance we can get the new documentation published?

I was wondering if you'd be interested in supporting a min-height setting? Instead of completely closed and completely open, it would not collapse further than the min-height if that property's been set.

So for example:

{{#cp-panel is-open=true min-height=50px}}

When installing this lib:

warning " > [email protected]" has incorrect peer dependency "ember-source@^3.20 || ^4.0.0".

suggested fix for package.json:

"peerDependencies": {
  "ember-source": "^3.20 || ^4.0.0 || >=5.0.0",
},

Hello former colleagues!

I've been half-maintaining this repo since leaving TED, and was thinking it'd be much easier to keep up-to-date with our modern best practices/Travis setups/etc. if we were to transfer it to our EmberMap Github org, where I would have full access to it.

What do you think? We'll take it off of your hands, and of course make sure it still serves all the original use cases if it happens to still be in use at TED!

If this sounds good let's chat next steps :)

/cc @VinSpee

What I would like to do:

• pass an action "toggleIsOpen" to the panel
• that action gets called
• I check if opening is allowed based on application state
• If ok, i set open=true

Is this possible? For now i hack something, but support for ddau pattern would be great!

Thanks for this add-on!

I have a code that generate a new panels.panel inside a #each helper and i want to make only first panel with open=true. There's a way to do this?

Hitting this right after installing. Here's what I have

    "ember-cli": "2.6.2",
    "ember-cli-babel": "^5.1.6",
    "ember-cli-dependency-checker": "^1.2.0",
    "ember-collapsible-panel": "3.0.0",

Any help?