redesign api but idea is the same, typescript

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.npmignore

@@ -0,0 +1,2 @@
+src
+tsconfig.json

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "cSpell.words": [
+    "htmlacademy",
+    "Mansilla",
+    "Sergi",
+    "Volkov"
+  ]
+}

README.md

@@ -10,78 +10,44 @@ decided to keep it since it is too big of a sacrifice for the sake of speed.
 
 ## Installation
 
+```cmd
     npm install virtual-list
+```
 
 Or if you prefer bower:
 
+```cmd
     bower install virtual-list
+```
 
 Of course it can also just be added to any JavaScript project since it consists of a
 single JavaScript file.
 
 ## Usage
 
-Each of the following snippets of code creates a virtual list that holds 1 milion
+Each of the following snippets of code creates a virtual list that holds 1 million
 rows:
 
-```javascript
-// This will create a scrolling list of 300x300 with 10000 rows. It is necessary to specify
-// how tall each row is by setting the `itemHeight` prpoerty in the config object. In this
-// example, we set up a generator function that will generate each row on demand.
-var list = new ScrollableList({
-  w: 300,
-  h: 300,
-  itemHeight: 31,
-  totalRows: 10000,
-  generatorFn: function(row) {
-    var el = document.createElement("div");
-    el.innerHTML = "ITEM " + row;
-    el.style.borderBottom = "1px solid red";
-    el.style.position = "absolute"
+```typescript
+const container = document.querySelector(".container");
+const unmount = virtualList({
+  container,
+  itemHeight: 30,
+  totalRows: 100000,
+  createRow: function(row) {
+    const el = document.createElement("div");
+    const p = document.createElement("p");
+    p.innerText = `row item: ${row}`;
+    el.appendChild(p);
+    el.classList.add('vrow');
     return el;
   }
 });
-document.body.appendChild(list.container)
-
-// The code below will create an array of 10000 DOM elements beforehand and pass them to
-// the list. The Virtual list will then display them on demand. Of course, even if the
-// virtual list is smart about displaying them, this method fills up a lot of memory by
-// creating the elements before-hand.
-var bigAssList = [];
-for (var i = 0; i < 10000; i++) {
-  var el = document.createElement("div");
-  el.classList.add("item");
-  el.innerHTML = "ITEM " + i;
-  el.style.borderBottom = "1px solid red";
-  bigAssList.push(el);
-}
-
-var list = new ScrollableList({
-  w: 300,
-  h: 300,
-  items: bigAssList,
-  itemHeight: 31
-});
-document.body.appendChild(list.container)
-
-// The code below will create an array of 10000 strings beforehand and pass them to
-// the list. The Virtual list will then display them on demand.
-var bigAssList = [];
-for (var i = 0; i < 10000; i++)
-  bigAssList.push("ITEM " + i);
-
-var list = new ScrollableList({
-  w: 300,
-  h: 300,
-  items: bigAssList,
-  itemHeight: 31
-});
-document.body.appendChild(list.container)
 ```
 
 ## Caveats
 
-Firefox has a nasty bug (https://bugzilla.mozilla.org/show_bug.cgi?id=373875)
+Firefox has a nasty bug (<https://bugzilla.mozilla.org/show_bug.cgi?id=373875>)
 that breaks any attempt of assigning big numerical values to css properties.
 Since the virtual list does exactly that to give the illusion of a very big list
 without actually loading the components, you might run into that bug for very big
@@ -91,7 +57,7 @@ lists. Unfortunately, I haven't found a way to work around it yet.
 
 The MIT License (MIT)
 
-Copyright (C) 2013 Sergi Mansilla
+Copyright (C) 2013 Sergi Mansilla, 2021 Maxim Volkov
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

examples/example.js

@@ -0,0 +1,16 @@
+import {virtualList} from '../dist/index.js';
+const container = document.querySelector('.container');
+virtualList({
+  container,
+  itemHeight: 30,
+  totalRows: 100000,
+  createRow: function(row) {
+    const el = document.createElement('div');
+    const p = document.createElement('p');
+    p.innerText = `row item: ${row}`;
+    el.appendChild(p);
+    el.classList.add('vrow');
+    return el;
+  }
+});
+

examples/index.html

@@ -1,48 +1,17 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
+
 <head>
-  <!-- Meta tags that set up the page as a mobile page   -->
-  <meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-  <meta charset="UTF-8"/>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Virtual List demo</title>
-  <link rel="stylesheet" type="text/css" media="screen,print" href="style.css"/>
+  <link rel="stylesheet" type="text/css" media="screen,print" href="style.css" />
 </head>
-<body>
-<script type="text/javascript" src="../vlist.js"></script>
-<script>
-  /*
-  var bigAssList = [];
-  for (var i = 0; i < 10000; i++) {
-    var el = document.createElement("div");
-    el.classList.add("item");
-    el.innerHTML = "ITEM " + i;
-    el.style.borderBottom = "1px solid red";
-    bigAssList.push(el);
-  }
-
-  var list = new ScrollableList({
-    w: 300,
-    h: 300,
-    items: bigAssList,
-    itemHeight: 31
-  });
-  */
 
-  var list = new VirtualList({
-    h: window.innerHeight,
-    itemHeight: 30,
-    totalRows: 100000,
-    generatorFn: function(row) {
-      var el = document.createElement("div");
-      el.innerHTML = "<p>ITEM " + row + "</p>";
-      return el;
-    }
-  });
-
-  list.container.classList.add("container");
-  document.body.appendChild(list.container)
-</script>
+<body>
+  <div class="container"></div>
+  <script type="module" src="./example.js"></script>
 </body>
-</html>
+
+</html>

examples/style.css

@@ -9,7 +9,11 @@ body, html {
 body {
   overflow: hidden;
 }
-
+.container {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+}
 @media
 only screen and (-webkit-min-device-pixel-ratio : 1.5),
 only screen and (min-device-pixel-ratio : 1.5) {