Ember Virtual List Component

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_99":-5,"_50":16,"_100":-5,"_101":102,"_103":104},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":-5,"_26":-5,"_27":-5,"_28":16,"_29":30,"_31":-5,"_32":33},"vizInfo",{"_40":60,"_77":78,"_79":80,"_81":-7,"_82":43,"_83":41,"_84":-5,"_85":86,"_87":16,"_88":89,"_90":89,"_91":-7,"_92":-7,"_57":93,"_59":94,"_95":-5,"_96":56,"_97":98},"vizContent",{"_40":60,"_61":62},"ownerAccount",{"_40":41,"_42":43,"_44":45,"_46":39,"_47":-5,"_48":-7,"_49":-7,"_50":16,"_51":-7,"_52":39,"_53":54,"_55":56,"_57":58,"_59":58},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz","runtimeVersion","license","descriptionIsAiGenerated","sourceProvenance",{"_34":35,"_36":37,"_27":-5,"_38":39},"project","socialImageUrl","https://next.vizhub.com/images/1101f0bfb0a2fb1fdc846dfb7e759f19505583db48107df3a8be7e868c540455.png","sourceType","gist","originalUrl","https://gist.github.com/RandomEtc/d6f11e539dc4a92c3a39","author","RandomEtc","id","gist-user-randometc","accountType","user","email","","displayName","avatar","oauthProvider","oauthId","isAdmin","stripeCustomerId","handle","handleNormalized","randometc","lifecycleEmailsEnabled",true,"createdAt",1791657928666,"updatedAt","gist-d6f11e539dc4a92c3a39","files",{"_63":64,"_65":66,"_67":68},"f1",{"_69":75,"_71":76},"f2",{"_69":73,"_71":74},"f3",{"_69":70,"_71":72},"name","jsbin.qutevisabu.js","text","App = Ember.Application.create();\n\nApp.Router.map(function() {\n // put your routes here\n});\n\nApp.IndexRoute = Ember.Route.extend({\n model: function() {\n var people = [\n 'Bill', \n 'Zach', \n 'Seung',\n 'Kapil', \n 'Tom', \n 'Ren',\n 'George', \n 'Ed', \n 'Ben',\n 'Curtis', \n 'Allie', \n 'Tao',\n 'David', \n 'Gian', \n 'Clifton',\n 'Richard', \n 'Max', \n 'Tony',\n 'Kiran', \n 'Mike', \n 'Brian',\n 'Joe',\n 'Matt',\n 'Alex',\n 'Jeremy',\n 'Travis'\n ];\n var items = [];\n for (var i = 0; i < 1000; i++) {\n var person = people[Math.floor(Math.random() * people.length)];\n items.push({\n name: (i+1) + \". \" + person\n });\n }\n return items;\n }\n});\n\nApp.XVirtualListComponent = Ember.Component.extend({\n rowHeight: 40,\n scrollOffset: 0,\n containerHeight: 0,\n itemComponent: 'x-virtual-list-item',\n \n visibleRows: function() {\n var rowHeight = this.get('rowHeight');\n var startIndex = this.get('startIndex');\n var endIndex = this.get('endIndex');\n return this.get('items').slice(startIndex, endIndex).map(function(item, i) { \n var index = i + startIndex;\n var top = (rowHeight * index);\n return {\n rowKey: index,\n item: item,\n style: new Ember.Handlebars.SafeString(\"top: \" + top + \"px;\")\n };\n });\n }.property('items', 'rowHeight', 'startIndex', 'endIndex'),\n \n startOffset: function() {\n return Math.abs(this.get('scrollOffset')) / this.get('rowHeight');\n }.property('scrollOffset', 'containerHeight', 'rowHeight'),\n\n endOffset: function() {\n return (Math.abs(this.get('scrollOffset')) + this.getWithDefault('containerHeight', 0)) / this.get('rowHeight');\n }.property('scrollOffset', 'containerHeight', 'rowHeight'),\n\n startIndex: function() {\n return Math.floor(this.get('startOffset'));\n }.property('startOffset'),\n\n endIndex: function() {\n return Math.ceil(this.get('endOffset'));\n }.property('endOffset'),\n\n scrollerStyle: function() {\n var height = this.get('items.length') * this.get('rowHeight');\n var style = \"height: \" + height + \"px\";\n return new Ember.Handlebars.SafeString(style);\n }.property('items.length', 'rowHeight'),\n \n hookupScroll: function() {\n var component = this;\n this.outer().bind('scroll', function() {\n Ember.run.once(component, function() {\n var containerOffset = this.outer().offset().top;\n var scrollerOffset = this.inner().offset().top;\n var scrollOffset = scrollerOffset - containerOffset;\n this.set('scrollOffset', scrollOffset);\n });\n });\n }.on('didInsertElement'),\n \n readySetGo: function() {\n Ember.run.later(this, function() {\n this.set('containerHeight', this.outer().height());\n });\n }.on('didInsertElement'),\n \n outer: function() {\n return this.$().find('.x-virtual-list__container');\n },\n \n inner: function() {\n return this.$().find('.x-virtual-list__scroller');\n }\n \n});","jsbin.qutevisabu.css","/* Put your CSS here */\nhtml, body {\n margin: 20px;\n box-sizing: border-box;\n}\n\nh1, h2 {\n font-weight: normal;\n}\n\n.x-virtual-list__container {\n width: 300px;\n height: 500px;\n outline: 1px solid black;\n overflow: scroll;\n position: relative;\n}\n\n.x-virtual-list__scroller {\n position: absolute;\n background-color: blue;\n width: 100%;\n}\n\n.x-virtual_list__item {\n position: absolute;\n outline: 1px solid white;\n height: 40px;\n width: calc(100% - 10px);\n line-height: 40px;\n padding-left: 10px;\n color: white;\n background-color: green;\n}","index.html","\n\n\n \n Ember Virtual List Component\n \n \n \n \n\n\n\n\n \n\n \n \n \n\n \n\n\n\n\n\n\n\n\n","slug","d6f11e539dc4a92c3a39","title","Ember Virtual List Component","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","xmMUBz8Rau8xbKYU7KBBb","startCommitId","forkedFrom","forkedFromVisibility",1453394387000,1453394380000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]