Skip to content

Instantly share code, notes, and snippets.

@ef4
Forked from jameshahn2/controllers.application.js
Last active August 26, 2019 01:58
Show Gist options
  • Save ef4/c7cd6f3f7b8dd8a8c6ed4072fc4e4b9f to your computer and use it in GitHub Desktop.
Save ef4/c7cd6f3f7b8dd8a8c6ed4072fc4e4b9f to your computer and use it in GitHub Desktop.
Alphabetical Table Grids
import Ember from 'ember';
export default Ember.Component.extend({
rows: Ember.computed('names', function() {
let names = this.get('names');
let columns = Math.floor($(window).width() / 100);
let itemsPerColumn = Math.ceil(names.length / columns);
let rows = [];
for (let rowNumber = 0; rowNumber < itemsPerColumn; rowNumber++) {
let row = [];
for (let i = rowNumber; i < names.length; i+= itemsPerColumn) {
row.push(names[i]);
}
rows.push(row);
}
return rows;
}),
handleResize() {
this.notifyPropertyChange('rows');
},
didInsertElement() {
this.handleResize = this.handleResize.bind(this);
window.addEventListener('resize', this.handleResize);
},
willDestroyElement() {
window.removeEventListener('resize', this.handleResize);
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
names: [
'Aaron',
'Abel',
'Abraham',
'Adam',
'Adrian',
'Aiden',
'Alan',
'Alejandro',
'Alex',
'Alexander',
'Amir',
'Andrew',
'Angel',
'Anthony',
'Antonio',
'Asher',
'Ashton',
'August',
'Austin',
'Avery',
'Axel',
'Ayden',
'Beau',
'Benjamin',
'Bennett',
'Bentley',
'Blake',
'Brandon',
'Brantley',
'Braxton',
'Brayden',
'Brody',
'Bryce',
'Bryson',
'Caleb',
'Calvin',
'Camden',
'Cameron',
'Carlos',
'Carson',
'Carter',
'Charles',
'Chase',
'Chris',
'Christian',
'Christopher',
'Cole',
'Colton',
'Connor',
'Cooper',
'Damian',
'Daniel',
'David',
'Dawson',
'Dean',
'Declan',
'Diego',
'Dominic',
'Dylan',
'Easton',
'Edward',
'Eli',
'Elias',
'Elijah',
'Elliot',
'Elliott',
'Emmanuel',
'Emmett',
'Eric',
'Ethan',
'Evan',
'Everett',
'Ezekiel',
'Ezra',
'Finn',
'Gabriel',
'Gael',
'Gavin',
'George',
'Giovanni',
'Graham',
'Grant',
'Grayson',
'Greyson',
'Harrison',
'Hayden',
'Henry',
'Hudson',
'Hunter',
'Ian',
'Isaac',
'Isaiah',
'Ivan',
'Jace',
'Jack',
'Jackson',
'Jacob',
'James',
'Jameson',
'Jason',
'Jasper',
'Jaxon',
'Jaxson',
'Jayce',
'Jayden',
'Jeremiah',
'Jeremy',
'Jesse',
'Jesus',
'Jill',
'Joel',
'John',
'Jonah',
'Jonathan',
'Jordan',
'Jose',
'Joseph',
'Joshua',
'Josiah',
'Juan',
'Jude',
'Julian',
'Justin',
'Kai',
'Kaiden',
'Kaleb',
'Karter',
'Kayden',
'Kevin',
'King',
'Kingston',
'Landon',
'Leo',
'Leonardo',
'Levi',
'Liam',
'Lincoln',
'Logan',
'Lorenzo',
'Luca',
'Lucas',
'Luis',
'Luke',
'Maddox',
'Malachi',
'Marcus',
'Mason',
'Mateo',
'Matteo',
'Matthew',
'Maverick',
'Max',
'Maximus',
'Maxwell',
'Messiah',
'Micah',
'Michael',
'Miguel',
'Miles',
'Nathan',
'Nathaniel',
'Nicholas',
'Noah',
'Nolan',
'Oliver',
'Oscar',
'Owen',
'Parker',
'Patrick',
'Preston',
'Renee',
'Rhett',
'Richard',
'Robert',
'Roman',
'Rosemary',
'Rowan',
'Ryan',
'Ryder',
'Ryker',
'Samuel',
'Santiago',
'Sawyer',
'Sebastian',
'Silas',
'Steven',
'Tanya',
'Theodore',
'Thomas',
'Timothy',
'Tristan',
'Tucker',
'Tyler',
'Victor',
'Vincent',
'Waylon',
'Wesley',
'Weston',
'William',
'Wyatt',
'Xander',
'Xavier',
'Zach',
'Zachary',
'Zayden',
'Zion',]
});
<h1 id="grids">Alphbetical Table Grids</h1>
<br>
{{alpha-grid names=this.names}}
{{#each rows as |row|}}
<div style="display: flex">
{{#each row as |item|}}
<div style="min-width: 100px">{{item}}</div>
{{/each}}
</div>
{{/each}}
{
"version": "0.15.0",
"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.2.2",
"ember-template-compiler": "3.2.2",
"ember-testing": "3.2.2"
},
"addons": {
"ember-data": "3.2.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment