selvagsz · September 1, 2019 12:52
diff --git a/components.accordion-item.js b/components.accordion-item.js
 import Ember from 'ember';

 export default Ember.Component.extend({
  classNameBindings: [':accordion-item', 'isOpen'],
  
  isOpen: Ember.computed('elementId', 'accordion.activeItemId', function() {
    return this.elementId === this.accordion.activeItemId;
  }),
  
  _open() {
    this.accordion.actions.open(this.elementId);
  },
  
  _close() {
    this.accordion.actions.close(this.elementId);
  },
  
  actions: {
    open() {
      this._open();
    },

    close() {
      this._close();
    },
    
    toggle() {
      if (this.isOpen) {
        this._close();
      } else {
        this._open(this.elementId);
      }
    },
  },
 });
diff --git a/components.accordion-list.js b/components.accordion-list.js
 import Ember from 'ember';

 export default Ember.Component.extend({
  init() {
    this._super(...arguments);
    this.set('activeItemId', null);
  },
  
  actions: {
    open(key) {
      this.set('activeItemId', key);
    },
    
    close() {
      this.set('activeItemId', null);
    },
  },
 });
diff --git a/controllers.application.js b/controllers.application.js
 import Ember from 'ember';

 export default Ember.Controller.extend({
 });
diff --git a/styles.app.css b/styles.app.css
 .accordion-item {
  border: 2px solid green;
 }

 .accordion-item__trigger {
  cursor: pointer;
 }

 .accordion-item__content {
  height: 0;
  overflow: hidden;
 }

 .accordion-item__content--open {
  height: auto;
 }
diff --git a/templates.application.hbs b/templates.application.hbs
 <h1>Ember Accordion</h1>

 <AccordionList as |accordion|>
  <accordion.item as |item|>
    <item.trigger><h3>Sales Channels</h3></item.trigger>
    <item.content>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </item.content>
  </accordion.item>

  <accordion.item as |item|>
    <item.trigger><h3>Accounting Channels</h3></item.trigger>
    <item.content>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </item.content>
  </accordion.item>
 </AccordionList>
  	
    
    
 {{!--

 For <2.x, we cannot curry the components. So pass the curried args as public api manually. This can be safely replaced with contextual components >2.x}}

 {{#accordion-list as |accordion|}}
  {{#accordion-list-item accordion=accordion as |item|}}
    {{#accordion-list-item-header item=item}}Sales{{/accordion-list-item-header}}
    {{#accordion-list-item-content item=item}}
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.    
    {{/accordion-list-item-header}}    
  {{/accordion-list-item}}

  {{#accordion-list-item accordion=accordion as |item|}}
    {{#accordion-list-item-header item=item}}Accounting{{/accordion-list-item-header}}
    {{#accordion-list-item-content item=item}}
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.    
    {{/accordion-list-item-header}}    
  {{/accordion-list-item}}
 {{/accordion-list}}

 --}}
diff --git a/templates.components.accordion-item-content.hbs b/templates.components.accordion-item-content.hbs
 <div class={{if isOpen "accordion-item__content accordion-item__content--open" "accordion-item__content"}}>
  {{yield}}
 </div>
diff --git a/templates.components.accordion-item-trigger.hbs b/templates.components.accordion-item-trigger.hbs
 <div role="button" class={{if isOpen "accordion-item__trigger accordion-item__trigger--open" "accordion-item__trigger"}}>
  {{yield}}
 </div>
diff --git a/templates.components.accordion-item.hbs b/templates.components.accordion-item.hbs
 {{yield (hash
  trigger=(component "accordion-item-trigger" isOpen=this.isOpen click=(action "toggle"))
  content=(component "accordion-item-content" isOpen=this.isOpen)
  publicApi=(hash
    isOpen=this.isOpen
    actions=(hash
      open=(action "open")
      close=(action "close")
    )
  )
 )}}
diff --git a/templates.components.accordion-list.hbs b/templates.components.accordion-list.hbs
 {{yield (
  hash
    item=(
      component "accordion-item"
      accordion=(hash
      	activeItemId=this.activeItemId
      	actions=(hash
        	open=(action "open")
      		close=(action "close")
        )
      )
    )
  )
 }}
diff --git a/twiddle.json b/twiddle.json
 {
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
 }
	import Ember from 'ember';

	export default Ember.Component.extend({
	classNameBindings: [':accordion-item', 'isOpen'],

	isOpen: Ember.computed('elementId', 'accordion.activeItemId', function() {
	return this.elementId === this.accordion.activeItemId;
	}),

	_open() {
	this.accordion.actions.open(this.elementId);
	},

	_close() {
	this.accordion.actions.close(this.elementId);
	},

	actions: {
	open() {
	this._open();
	},

	close() {
	this._close();
	},

	toggle() {
	if (this.isOpen) {
	this._close();
	} else {
	this._open(this.elementId);
	}
	},
	},
	});
	import Ember from 'ember';

	export default Ember.Component.extend({
	init() {
	this._super(...arguments);
	this.set('activeItemId', null);
	},

	actions: {
	open(key) {
	this.set('activeItemId', key);
	},

	close() {
	this.set('activeItemId', null);
	},
	},
	});
	import Ember from 'ember';

	export default Ember.Controller.extend({
	});
	.accordion-item {
	border: 2px solid green;
	}

	.accordion-item__trigger {
	cursor: pointer;
	}

	.accordion-item__content {
	height: 0;
	overflow: hidden;
	}

	.accordion-item__content--open {
	height: auto;
	}
	<h1>Ember Accordion</h1>

	<AccordionList as \|accordion\|>
	<accordion.item as \|item\|>
	<item.trigger><h3>Sales Channels</h3></item.trigger>
	<item.content>
	Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
	</item.content>
	</accordion.item>

	<accordion.item as \|item\|>
	<item.trigger><h3>Accounting Channels</h3></item.trigger>
	<item.content>
	Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
	</item.content>
	</accordion.item>
	</AccordionList>



	{{!--

	For <2.x, we cannot curry the components. So pass the curried args as public api manually. This can be safely replaced with contextual components >2.x}}

	{{#accordion-list as \|accordion\|}}
	{{#accordion-list-item accordion=accordion as \|item\|}}
	{{#accordion-list-item-header item=item}}Sales{{/accordion-list-item-header}}
	{{#accordion-list-item-content item=item}}
	Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
	{{/accordion-list-item-header}}
	{{/accordion-list-item}}

	{{#accordion-list-item accordion=accordion as \|item\|}}
	{{#accordion-list-item-header item=item}}Accounting{{/accordion-list-item-header}}
	{{#accordion-list-item-content item=item}}
	Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
	{{/accordion-list-item-header}}
	{{/accordion-list-item}}
	{{/accordion-list}}

	--}}
	<div class={{if isOpen "accordion-item__content accordion-item__content--open" "accordion-item__content"}}>
	{{yield}}
	</div>
	<div role="button" class={{if isOpen "accordion-item__trigger accordion-item__trigger--open" "accordion-item__trigger"}}>
	{{yield}}
	</div>
	{{yield (hash
	trigger=(component "accordion-item-trigger" isOpen=this.isOpen click=(action "toggle"))
	content=(component "accordion-item-content" isOpen=this.isOpen)
	publicApi=(hash
	isOpen=this.isOpen
	actions=(hash
	open=(action "open")
	close=(action "close")
	)
	)
	)}}
	{{yield (
	hash
	item=(
	component "accordion-item"
	accordion=(hash
	activeItemId=this.activeItemId
	actions=(hash
	open=(action "open")
	close=(action "close")
	)
	)
	)
	)
	}}
	{
	"version": "0.15.1",
	"EmberENV": {
	"FEATURES": {}
	},
	"options": {
	"use_pods": false,
	"enable-testing": false
	},
	"dependencies": {
	"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
	"ember": "3.4.3",
	"ember-template-compiler": "3.4.3",
	"ember-testing": "3.4.3"
	},
	"addons": {
	"ember-data": "3.4.2"
	}
	}