Add Vanilla JS version

jerrylow · Jan 30, 2021 · f177a00 · f177a00
1 parent 827bd62
commit f177a00
Show file tree

Hide file tree

Showing 18 changed files with 3,173 additions and 287 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+.DS_Store
+yarn-error.log
diff --git a/README.md b/README.md
@@ -1,11 +1,25 @@
 # Basic Table
 
-A simple lightweight jQuery responsive table library. A library to setup tables for a basic responsive table stucture. Utilizing the techniques of http://css-tricks.com/responsive-data-tables/. This is to assists in those situations where the users don't necessarily have access or capacity to modify HTML such as input from a WYSIWYG.
+A simple lightweight jQuery or Vanilla JS responsive table library. A library to setup tables for a basic responsive table stucture. Utilizing the techniques of http://css-tricks.com/responsive-data-tables/. This is to assists in those situations where the users don't necessarily have access or capacity to modify HTML such as input from a WYSIWYG.
 
-**[View Demo](http://www.jerrylow.com/basictable/demo/)**
+**[View Demo (jQuery)](http://www.jerrylow.com/basictable/demo/jquery.html)**
+
+**[View Demo (Vanilla JS)](http://www.jerrylow.com/basictable/demo/vanilla-js)**
+
+## jQuery User Notes for 2.0.0
+
+The jQuery version remains the same as 1.0.0. While the source remains unchanged there are three things to note when upgrading:
+
+- Distribution files are no longer in the root directory, they've moved to `/dist/js/jquery.basictable.js` and `/dist/js/jquery.basictable.min.js`,
+- The non-minified version is now a beautified version rather than the source file, and
+- The minified version is no longer compressed with uglifyjs, it's compressed using Tercer.
+
+These changes should have no impact on the way it functions in comparison with 1.x.
 
 ## Options
 
+Options are applicable to both the jQuery and Vanilla JS.
+
 ### breakpoint
 
 `integer` `default: null`
@@ -54,7 +68,7 @@ When true, empty cells will be shown.
 
 Set to false if table does not have a header row. Table will just be responsive with table body and optional footer.
 
-## Methods
+## Methods (jQuery)
 
 ### start
 
@@ -87,3 +101,43 @@ Run `destroy`, `setup` then `check` without resetting the table data. Run this i
 ```js
 $('table').basictable('restart');
 ```
+
+## Methods (Vanilla JS)
+
+Methods demonstrated assuming you've defined the object as `table`.
+
+```
+const table = new basictable('.table');
+```
+
+### start
+
+Engage the table in responsive mode. This method can only run after the table has been initialized.
+
+```js
+table.start();
+```
+
+### stop
+
+Toggle the table back to normal mode, removing the responsive look. This does not destory the Basic Table data and wrappers. The table will still work once the breakpoint is met.
+
+```js
+table.stop();
+```
+
+### destroy
+
+Destroy the the responsive bind on the table. This will remove all data and generated wrappers from the table, returning it to its initial state.
+
+```js
+table.stop();
+```
+
+### restart
+
+Run `destroy`, `setup` then `check` without resetting the table data. Run this if the table dynamically updates.
+
+```js
+table.restart();
+```
diff --git a/bower.json b/bower.json
diff --git a/demo/index.html → demo/jquery.html b/demo/index.html → demo/jquery.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no"/>
-  <title>Basic Table Demo</title>
+  <title>Basic Table (jQuery) Demo</title>
 
   <link rel="stylesheet" type="text/css" href="css/style.css" />
-  <link rel="stylesheet" type="text/css" href="../basictable.css" />
+  <link rel="stylesheet" type="text/css" href="../dist/css/basictable.min.css" />
 
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
-  <script type="text/javascript" src="../jquery.basictable.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  <script type="text/javascript" src="../dist/js/jquery.basictable.min.js"></script>
 
   <script type="text/javascript">
     $(document).ready(function() {
@@ -45,21 +45,21 @@
 
 <body>
 <div id="page">
-  <h1>Basic Table Demo</h1>
-  <p>Demonstration of different settings for Basic Table. For full documentation of settings and method visit <a href="http://www.jerrylow.com/basictable" target="_blank">http://www.jerrylow.com/basictable</a> or <a href="https://github.com/jerrylow/basictable" target="_blank">https://github.com/jerrylow/basictable</a>.</p>
+  <h1>Basic Table (jQuery) Demo</h1>
+  <p>Demonstration of different settings for Basic Table using the jQuery version. Click <a href="http://www.jerrylow.com/basictable/demo/vanilla-js.html">here</a> to see the Vanilla JS demonstration. For full documentation of settings and method visit <a href="http://www.jerrylow.com/basictable">http://www.jerrylow.com/basictable</a> or <a href="https://github.com/jerrylow/basictable">https://github.com/jerrylow/basictable</a>.</p>
 
   <h2>Basic Implementation</h2>
   <p>The basic implementation using all default settigs. The table will use responsive mode when the viewport is less or equal to 568px in width.</p>
 
   <table class="table">
     <thead>
       <tr>
-        <th>One</th>
-        <th>Two</th>
-        <th>Three</th>
-        <th>Four</th>
-        <th>Five</th>
-        <th>Six</th>
+        <th>Name</th>
+        <th>Age</th>
+        <th>Gender</th>
+        <th>Height</th>
+        <th>Province</th>
+        <th>Sport</th>
       </tr>
     </thead>
     <tbody>