Guides source PR 200 component example

components.animation-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['animated','sliding-elem'],
   
  didInsertElement() {
    this._super(...arguments);
    
    this.animationHandler = () => {
			this.element.classList.remove('sliding-elem');      
    };
    
    this.element.addEventListener('animationstart', this.animationHandler);
  },
  
  willDestroyElement() {
    this.element.removeEventListener('animationend', this.animationHandler);
	}
});

components.button-classlist.js

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement() {
    this._super(...arguments);
    
    let buttons = this.element.querySelectorAll('div p button');
    
    buttons.forEach(function(button) {
      button.classList.add('enabled');
    });
  },
  
  willDestroyElement() {
  	this.datePicker.destroy();
  	this._super(...arguments);
  },
});

components.datepicker-component.js

import Ember from 'ember';

function myDatePickerLib(input) {
  console.log('myDatePickerLib attached to input', input);
  input.classList.add('datepicker');
  
  return {
    destroy() {
      input.classList.remove('datepicker');
      console.log('myDatePickerLib destroyed');
    }
  };
}

export default Ember.Component.extend({
  didInsertElement() {
    this._super(...arguments);
    this.datePicker = myDatePickerLib(this.element.querySelector('input.date'));
  },
  
  willDestroyElement() {
    this.datePicker.destroy();
    this._super(...arguments);
  }
});

components.selected-item-list.js

import Ember from 'ember';

export default Ember.Component.extend({
 
  init() {
    this._super(...arguments);
    this.items = Array(25).fill().map((v, index) => ({ id: index + 1, label: `Item ${index + 1}` }));
  },

  didReceiveAttrs() {
    this._super(...arguments);

    this.set('items', this.items.map((item) => {    
      return Object.assign({}, item, {
        isSelected: item.id === this.selectedItem.id,
      });
    })); 
  },

  didRender() {
    this._super(...arguments);
    const scrollTarget = Math.abs(this.element.getBoundingClientRect().top - this.element.querySelector('.selected-item').getBoundingClientRect().top);
    this.element.querySelector('.item-list').scrollTop = scrollTarget;   
  }  
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  showExample: true,
  
  selectedItem: { id: 1 },
  
	actions: {
  	toggleExample() {
    	this.toggleProperty('showExample');
	  },
    
    changeSelectedItem() {
      console.log('changeSelectedItem from', this.selectedItem);
      this.set('selectedItem', { id: 5 });
      console.log(this.selectedItem);
    }
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.ember-view {
  margin-bottom: 20px;
}

button.enabled {
  background: green;
  color: white;
}

input.datepicker {
  border-color: green;
}

.animated {
  position: relative;
  width: 100px;
  height: 100px;
  background: green;
}

.sliding-elem {
  animation: slide 2s infinite;
}

@keyframes slide {
  from {
    left: 0;
  }
  50% {
    left: 100px;
  }
  to {
    left: 0;
  }
}

.selected-item {
  background: green;
  color: white;
}

.item-list {
  max-height: 100px;
  overflow: auto;
}

templates.application.hbs

<h1>Guides source PR 200 component example</h1>

<p>The toggle below will ensure the `willDestroyElement` is run, and we can see the things we need to see</p>
<p>
<button onclick={{action 'toggleExample'}}>Toggle example component</button>
</p>

{{#if showExample}}
{{button-classlist}}

{{datepicker-component}}

{{animation-component}}
{{/if}}

<p>
<button onclick={{action 'changeSelectedItem'}}>Change selectedItem</button>
</p>
{{selected-item-list selectedItem=selectedItem}}

templates.components.animation-component.hbs

{{yield}}

templates.components.button-classlist.hbs

<div>
<p>
<button>Button 1</button>
<button>Button 2</button>
</p>
</div>

templates.components.datepicker-component.hbs

<div>
<input class="date" />
</div>

templates.components.selected-item-list.hbs

<div class="item-list">
  {{#each items as |item|}}
    <div class="list-item {{if item.isSelected 'selected-item'}}">{{item.label}}</div>
  {{/each}}
</div>

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"
  }
}