Skip to content

Instantly share code, notes, and snippets.

@jameshahn2
Forked from runspired/components.each-chunk.js
Last active August 26, 2019 01:18
Show Gist options
  • Save jameshahn2/4dfad2612b5d8b8ede138b92f60ebf84 to your computer and use it in GitHub Desktop.
Save jameshahn2/4dfad2612b5d8b8ede138b92f60ebf84 to your computer and use it in GitHub Desktop.
Alphabetical Table Grids
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
import Ember from 'ember';
export function drawTable(){
var array = [
'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',];
var windowSize = $(window).width();
var maxWidth = 50;
var maxColumn = 2;
if(windowSize < 400){
maxWidth = 33;
maxColumn = 3;
}
if(windowSize < 1800){
maxWidth = 25;
maxColumn = 4;
}
if(windowSize < 2400){
maxWidth = 20;
maxColumn = 5;
}
var maxItemInColumn = Math.ceil(array.length/maxColumn);
var result = "<div style='width:100%;'>";
result += "<ul style='float:left;'>";
for (var j = 0; j < array.length; j++) {
result += "<li>" + array[j] + "</li>";
if ((j + 1) % maxItemInColumn === 0) {
result += "</ul><ul style='float:left;'>";
}
}
result += "</ul>";
result += "</div>";
var d1 = document.getElementById('grids');
d1.insertAdjacentHTML('afterend', result);
}
drawTable();
$( window ).resize(function() {
drawTable()
});
export default Ember.Helper.helper(table);
<h1 id="grids">Alphbetical Table Grids</h1>
<br>
{{#each-table items as |table|}}
{{index}}
{{/each-table}}
{{#each (table) as |table|}}
{{yield}}
{{/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