Spaces:

aletrn
/

driver.js

Running

App Files Files Community

kamrify commited on Mar 21, 2018

Commit

d52f2d6

1 Parent(s): c7b5b8a

Update demo and webpack build

Browse files

Files changed (5) hide show

.gitignore +2 -1
demo/scripts/demo.js +29 -1
index.html +33 -5
package.json +1 -0
webpack.config.dev.js +18 -8

.gitignore CHANGED Viewed

@@ -4,4 +4,5 @@ npm-debug.log
 .idea
 .vscode
 package-lock.json
-yarn-error.log

 .idea
 .vscode
 package-lock.json
+yarn-error.log
+dist/demo

demo/scripts/demo.js CHANGED Viewed

@@ -145,7 +145,7 @@ document.addEventListener("DOMContentLoaded", function () {
 /////////////////////////////////////////////
 // Form focus examples
 /////////////////////////////////////////////
-  const focusDriver = new Driver({ padding: 0 });
   const inputIds = ['creation-input', 'creation-input-2', 'creation-input-3', 'creation-input-4'];
   inputIds.forEach(inputId => {
     // Highlight the section on focus
@@ -293,6 +293,34 @@ document.addEventListener("DOMContentLoaded", function () {
       });
     });
 /////////////////////////////////////////////////////
 // Highlighting single element with popover position
 /////////////////////////////////////////////////////

 /////////////////////////////////////////////
 // Form focus examples
 /////////////////////////////////////////////
+  const focusDriver = new Driver({padding: 0});
   const inputIds = ['creation-input', 'creation-input-2', 'creation-input-3', 'creation-input-4'];
   inputIds.forEach(inputId => {
     // Highlight the section on focus
       });
     });
+/////////////////////////////////////////////
+// Single no close demo
+/////////////////////////////////////////////
+  const singleNoClose = new Driver({
+    allowClose: false,
+    position: 'top'
+  });
+  singleNoClose.defineSteps([{
+    element: '#single-element-no-close',
+    popover: {
+      title: 'Uh-huh!',
+      description: 'You cannot close by clicking outside'
+    }
+  }, {
+    element: '#third-element-introduction',
+    popover: {
+      title: 'Title on Popover',
+      description: 'Body of the popover',
+      position: 'top'
+    }
+  }]);
+  document.querySelector('#run-single-element-no-close').addEventListener('click', function (e) {
+    e.preventDefault();
+    singleNoClose.start();
+  });
 /////////////////////////////////////////////////////
 // Highlighting single element with popover position
 /////////////////////////////////////////////////////

index.html CHANGED Viewed

@@ -6,9 +6,9 @@
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Driver</title>
-  <meta name=description itemprop=description
         content="A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the page"/>
-  <link rel="stylesheet" href="./dist/demo.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai.min.css">
 </head>
 <body>
@@ -167,7 +167,28 @@ driver.highlight({
     <p class="top-20">And of course it can be any valid HTML.</p>
     <hr class="hr__fancy">
     <div id="third-element-introduction" class="section__example">
       <h4 id="first-element-introduction">Creating Feature Introductions</h4>
       <p id="second-para-feature-introductions">You can also make powerful feature introductions to guide the users
@@ -343,8 +364,15 @@ activeElement.getNode();  // Gets the DOM Element behind this element
 <script src="//twemoji.maxcdn.com/2/twemoji.min.js?2.5"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
-<script src="./dist/driver.js"></script>
-<script src="./dist/demo.js"></script>
-<script src="./dist/emoji.js"></script>
 </body>
 </html>

         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Driver</title>
+  <meta name="description" itemprop="description"
         content="A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the page"/>
+  <link rel="stylesheet" href="./dist/demo/driver-demo.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai.min.css">
 </head>
 <body>
     <p class="top-20">And of course it can be any valid HTML.</p>
     <hr class="hr__fancy">
+    <div id="single-element-no-close" class="section__example">
+      <h4>Disable Close on Outside Click</h4>
+      <p>By default, driver.js gets reset if user clicks outside the highlighted element, you can disable this:</p>
+      <a href="#" class="btn__run-demo" id="run-single-element-no-close">Show Demo</a>
+      <pre><code class="javascript">const driver = new Driver({
+    allowClose: false,
+});
+driver.highlight({
+  element: '#some-element',
+  popover: {
+    title: '&lt;em&gt;An italicized title&lt;/em&gt;',
+    description: 'Description may also contain &lt;strong&gt;HTML&lt;/strong&gt;'
+  }
+});
+</code></pre>
+      <p class="top-20">
+        If you use this option, for multi-step driver, it would close after you are done with the popover or you can close it programmatically. For single element popover, you need to close it properly, otherwise it won't be closed
+      </p>
+      <pre><code class="javascript">driver.reset()</code></div>
+    <hr class="hr__fancy">
     <div id="third-element-introduction" class="section__example">
       <h4 id="first-element-introduction">Creating Feature Introductions</h4>
       <p id="second-para-feature-introductions">You can also make powerful feature introductions to guide the users
 <script src="//twemoji.maxcdn.com/2/twemoji.min.js?2.5"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+<script src="./dist/demo/driver-demo.js"></script>
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+  ga('create', 'UA-58155965-1', 'auto');
+  ga('send', 'pageview');
+</script>
 </body>
 </html>

package.json CHANGED Viewed

@@ -6,6 +6,7 @@
   "types": "types/index.d.ts",
   "scripts": {
     "start": "node server.js",
     "build": "webpack --config webpack.config.prod.js"
   },
   "bugs": {

   "types": "types/index.d.ts",
   "scripts": {
     "start": "node server.js",
+    "build-demo": "NODE_ENV=production webpack --config webpack.config.dev.js",
     "build": "webpack --config webpack.config.prod.js"
   },
   "bugs": {

webpack.config.dev.js CHANGED Viewed

@@ -2,17 +2,23 @@ const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 module.exports = {
-  mode: 'development',
   entry: [
     'webpack-dev-server/client?http://localhost:3000',
     './demo/styles/demo.scss',
     './src/index.js',
   ],
   output: {
-    path: path.join(__dirname, '/dist'),
-    publicPath: '/dist/',
-    filename: 'driver.js',
     libraryTarget: 'umd',
     library: 'Driver',
   },
@@ -49,18 +55,22 @@ module.exports = {
       },
       {
         test: /.scss$/,
-        loader: ExtractTextPlugin.extract(['css-loader?url=false', 'sass-loader']),
       },
     ],
   },
   plugins: [
     new ExtractTextPlugin({
-      filename: 'demo.css',
       allChunks: true,
     }),
     new CopyWebpackPlugin([
-      './demo/scripts/emoji.js',
-      './demo/scripts/demo.js',
       './demo/images/separator.png',
     ]),
   ],

 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const isProduction = process.env.NODE_ENV === 'production';
+const scriptFileName = isProduction ? 'driver-demo.min.js' : 'driver-demo.js';
+const styleFileName = isProduction ? 'driver-demo.min.css' : 'driver-demo.css';
 module.exports = {
+  mode: isProduction ? 'production' : 'development',
   entry: [
     'webpack-dev-server/client?http://localhost:3000',
     './demo/styles/demo.scss',
+    './demo/scripts/emoji.js',
+    './demo/scripts/demo.js',
     './src/index.js',
   ],
   output: {
+    path: path.join(__dirname, '/dist/demo'),
+    publicPath: '/dist/demo/',
+    filename: scriptFileName,
     libraryTarget: 'umd',
     library: 'Driver',
   },
       },
       {
         test: /.scss$/,
+        loader: ExtractTextPlugin.extract([
+          {
+            loader: 'css-loader',
+            options: { minimize: isProduction, url: false },
+          },
+          'sass-loader',
+        ]),
       },
     ],
   },
   plugins: [
     new ExtractTextPlugin({
+      filename: styleFileName,
       allChunks: true,
     }),
     new CopyWebpackPlugin([
       './demo/images/separator.png',
     ]),
   ],