chore: add comparison table and update readme

josias-r · Jan 4, 2023 · a0b1789 · a0b1789
1 parent f6e6731
commit a0b1789
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
     <meta
       name="description"
       itemprop="description"
-      content="A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the page"
+      content="A light-weight, no-dependency, vanilla JavaScript library to onboard your users to your page or application"
     />
     <link
       rel="apple-touch-icon"
@@ -44,6 +44,10 @@
       name="google-site-verification"
       content="KO9YN_XsNztSqiMkQsHfSfsAoLgeAsaVoXL26w6EPbg"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
   </head>
   <body>
     <div class="page-wrap">
@@ -167,6 +171,91 @@ <h3>How does it do that?</h3>
           you several hooks when highlighting, highlighted or un-highlighting
           elements making it highly customizable.
         </p>
+        <h3 id="comparison-table">How does it compare to driver.js?</h3>
+        <table>
+          <tr>
+            <th style="width: 50%">Features</th>
+            <th>Boarding.js</th>
+            <th>Driver.js</th>
+          </tr>
+          <tr>
+            <td>
+              Works with complex layouts <br /><small
+                >(no z-index conflicts)</small
+              >
+            </td>
+            <td><i class="fa fa-check"></i></td>
+            <td><i class="fa fa-remove"></i></td>
+          </tr>
+          <tr>
+            <td>
+              Define steps for elements which are not mounted yet <br /><small
+                >(for highly interactive websites, such as react applications,
+                where elements might only appear once an action has been
+                taken)</small
+              >
+            </td>
+            <td><i class="fa fa-check"></i></td>
+            <td><i class="fa fa-remove"></i></td>
+          </tr>
+          <tr>
+            <td>
+              Has the concept of a stage<br /><small
+                >(a customizable background for the highlighted element)</small
+              >
+              <br />
+              <br />
+              <small
+                >* Boarding.js will add the
+                <code>boarding-highlighted-element</code> class to the
+                higlighted element for optional custom styling.</small
+              >
+            </td>
+            <td><i class="fa fa-remove"></i>*</td>
+            <td><i class="fa fa-check"></i></td>
+          </tr>
+          <tr>
+            <td>Auto popover positioning</td>
+            <td><i class="fa fa-check"></i></td>
+            <td><i class="fa fa-remove"></i></td>
+          </tr>
+          <tr>
+            <td>
+              Control popover
+              <a href="#single-element-with-popover-position">alignment</a>
+            </td>
+            <td><i class="fa fa-check"></i></td>
+            <td><i class="fa fa-remove"></i></td>
+          </tr>
+          <tr>
+            <td>
+              Control allowed user (click) actions <br /><small
+                >(<a href="#api_section">strictClickHandling</a>)</small
+              >
+            </td>
+            <td><i class="fa fa-check"></i></td>
+            <td><i class="fa fa-remove"></i></td>
+          </tr>
+          <tr>
+            <td>
+              Allow preparing/validating a move before it happens <br /><small
+                >(<a href="#api_section">prepareElement</a>)</small
+              >
+            </td>
+            <td><i class="fa fa-check"></i></td>
+            <td><i class="fa fa-remove"></i></td>
+          </tr>
+          <tr>
+            <td>Written in TypeScript</td>
+            <td><i class="fa fa-check"></i></td>
+            <td><i class="fa fa-remove"></i></td>
+          </tr>
+        </table>
+        <p>
+          Besides the above, Boarding.js also has a few more options available
+          for each individual step, a more stable event system and more hooks
+          for it, such as <code>onBeforeHighlighted</code>.
+        </p>
       </section>
       <hr class="hr__fancy" />
       <section class="section__examples">

diff --git a/readme.md b/readme.md
@@ -1,8 +1,10 @@
 > This is a port of [driver.js](https://github.com/kamranahmedse/driver.js).  
-> It uses a different highlight technique under the hood, which does not fiddle with z-index.  
-> This ensures the layout will always stay intact. With driver.js this is not the case
+> The code has been fully refactored and rewritten to TS. It uses a different highlight technique under the hood, which does not fiddle with z-index.  
+> This ensures the layout will always stay intact. With driver.js this is not the case.
 >
-> After more and more work on this port, there are more changes and improvements available. At the moment the documentation is not 100% updated, please bear with me until I get around to it, I'm planning on making a comparisons table to driver.js as well.
+> After more and more work on this port, there are more changes and improvements available. At the moment the documentation is not 100% updated, please bear with me until I get around to it.
+>
+> For a full comparison you can [check here](https://josias-r.github.io/boarding.js/#comparison-table).
 
 <h1 align="center"><img height="150" src="./public/images/boarding.svg" /><br> Boarding.js</h1>
 
@@ -19,7 +21,7 @@
 </p>
 
 <p align="center" style="margin-bottom: 0;">
-  <b>Powerful, highly customizable vanilla JavaScript engine to on<i>board</i> the user's focus across the page</b>
+  <b>Powerful, highly customizable vanilla JavaScript engine to on<i>board</i> your users to your page or application</b>
 </p>
 <p align="center">
   <sub>No external dependencies, supports all major browsers and highly customizable<sub>

diff --git a/src/main.ts b/src/main.ts
@@ -113,7 +113,6 @@ document.addEventListener("DOMContentLoaded", function () {
         description:
           "Have a look at the usage examples and see how you can use it.",
       },
-      scrollIntoViewOptions: "no-scroll",
     },
     {
       element: "#boarding-demo-head",
@@ -122,7 +121,6 @@ document.addEventListener("DOMContentLoaded", function () {
         description:
           "This was just a sneak peak, have a look at the API section and examples to learn more!",
       },
-      scrollIntoViewOptions: "no-scroll",
     },
   ];
 

diff --git a/src/styles/demo.css b/src/styles/demo.css
@@ -136,6 +136,39 @@ blockquote {
   text-align: center;
 }
 /*===== End of Section comment block ======*/
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  border: 1px solid #f5f3f1;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+th,
+td {
+  text-align: center;
+  padding: 16px;
+}
+
+th:first-child,
+td:first-child {
+  text-align: left;
+}
+
+tr:nth-child(even) {
+  background-color: #f5f3f1;
+}
+
+.fa-check {
+  color: green;
+}
+
+.fa-remove {
+  color: #f54336;
+}
+
 img.emoji {
   height: 1em;
   width: 1em;