Fix browserify issue and move demo to its own folder.

mariordev · Feb 14, 2019 · 04e1f82 · 04e1f82
1 parent edd7fef
commit 04e1f82
Show file tree

Hide file tree

Showing 8 changed files with 345 additions and 446 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,4 @@
 /node_modules
-index.html
-index.js
-index-min.js
-*.svg
 .DS_Store
 .eslintrc.json
+.vscode
diff --git a/.npmignore b/.npmignore
@@ -1,4 +1,3 @@
 /src/
-/assets/
+/demo/
 /gulpfile.js
-/index.html
diff --git a/demo/bear.svg b/demo/bear.svg
diff --git a/demo/demo-min.js b/demo/demo-min.js
diff --git a/demo/demo.js b/demo/demo.js
@@ -0,0 +1,43 @@
+/**
+ * Proceed only if the DOM is loaded and ready.
+ * @param  {Function}   fn  The function to be executed when DOM is ready.
+ */
+function domReady(fn) {
+    document.addEventListener('DOMContentLoaded', fn);
+
+    // Is the DOM ready now? If so, execute the given function.
+    if (document.readyState === 'interactive' || document.readyState === 'complete') {
+        fn();
+    }
+}
+
+/**
+ * Run when DOM is ready.
+ */
+domReady(function() {
+    const Vue = require('../node_modules/vue/dist/vue.min.js');
+    // const MailtoUI = require('../src/js/mailtoui.js');
+    const MailtoUI = require('../dist/mailtoui-min.js');
+
+    var app = new Vue({
+        el: '#app',
+        data: {
+            emailSyntax: '{{ email }}',
+            email: '[email protected]',
+            emailDisplay: 'With cc'
+        },
+        computed: {
+            mailtoHref: function() {
+                return 'mailto:' + this.email + '[email protected]';
+            }
+        },
+        mounted() {
+            MailtoUI.run({
+                buttonTextCopy: 'Copia',
+                buttonIconCopy: '/demo/bear.svg',
+                buttonTextCopyAction: 'Copiado!',
+                autoClose: false
+            });
+        }
+    });
+});
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en" class="smooth-scroll">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Quick Demo</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
+        <style type="text/css">
+            .smooth-scroll {
+                scroll-behavior: smooth;
+            }
+
+            /* .mailtoui-modal {
+                background-color: rgba(250,250,250,0.5);
+                color: #fff;
+            }
+
+            .mailtoui-modal-head {
+                background-color: #21262C;
+            }
+
+            .mailtoui-modal-title {
+                color: #fff;
+            }
+
+            .mailtoui-modal-close:focus,
+            .mailtoui-modal-close:hover {
+                color: #fff;
+            }
+
+            .mailtoui-modal-body {
+                background-color: #373b41;
+            }
+
+            .mailtoui-button:focus .mailtoui-button-content {
+                background-color: #D8DCDF;
+                color: #333;
+            }
+
+            .mailtoui-button-content,
+            .mailtoui-button-copy {
+                background-color: #63676b;
+                color: #fff;
+            }
+
+            .mailtoui-button-content:hover,
+            .mailtoui-button-content:focus,
+            .mailtoui-button-copy:hover,
+            .mailtoui-button-copy:focus {
+                background-color: #D8DCDF;
+                color: #333;
+            }
+
+            .mailtoui-button-copy-clicked,
+            .mailtoui-button-copy-clicked:hover,
+            .mailtoui-button-copy-clicked:focus {
+                background-color: #1F9D55;
+                color: #fff;
+            }
+
+            .mailtoui-email-address {
+                background-color: #909295;
+                color: #21262c;
+            } */
+        </style>
+    </head>
+    <body>
+        <div id="app" class="max-w-sm mx-auto py-32">
+            <h1 class="mb-12">MailtoUI Quick Demo</h1>
+
+            <p class="mb-8"><a class="mailtoui" href="mailto:[email protected],[email protected]?subject=Hello!">With subject</a></p>
+
+            <p class="mb-8"><a class="mailtoui" href="mailto:[email protected]?body=Hello World!">With body</a></p>
+
+            <p>
+                <a class="mailtoui text-blue" :href="mailtoHref">{{ emailDisplay }}</a>
+                <span class="text-grey-dark"> - Link created with Vue.js</span>
+            </p>
+        </div>
+
+        <!-- <script src="../src/js/mailtoui.js" data-options='{ "buttonTextCopy": "Copia", "buttonTextCopyAction": "Copiado!", "autoClose": true }'></script> -->
+        <script src="./demo-min.js"></script>
+    </body>
+</html>
diff --git a/gulpfile.js b/gulpfile.js
@@ -21,7 +21,7 @@ var banner = [
     ' * @author <%= pkg.author.name %> - <%= pkg.author.url %>',
     ' * @license <%= pkg.license %>',
     ' */',
-    '',
+    ''
 ].join('\n');
 
 /**
@@ -44,7 +44,7 @@ function css() {
         .pipe(
             autoprefixer({
                 browsers: ['last 2 versions'],
-                cascade: false,
+                cascade: false
             })
         )
         .pipe(cleanCss())
@@ -53,9 +53,11 @@ function css() {
 }
 
 /**
- * Process JavaScript files.
+ * Process the JavaScript library file.
  */
 function js() {
+    packageJson = fs.readJsonSync('./package.json');
+
     return src('./src/js/mailtoui.js')
         .pipe(eslint())
         .pipe(eslint.format())
@@ -65,46 +67,41 @@ function js() {
 }
 
 /**
- * Process test JavaScript file.
+ * Lint JavaScript file used on demo page.
  */
-function indexJs() {
-    return browserify({
-            entries: './index.js',
-            debug: true
-        })
-        .bundle()
-        .pipe(source('index.js'))
-        .pipe(buffer())
+function lintDemoJs() {
+    return src('./demo/demo.js')
         .pipe(eslint())
-        .pipe(eslint.format())
-        .pipe(minify({ noSource: true }))
-        .pipe(dest('./'));
+        .pipe(eslint.format());
 }
 
 /**
- * Read package.json and update version.js. This is needed
- * to update the library header info automatically.
+ * Process JavaScript file used on demo page.
  */
-function getPackageJson(done) {
-    packageJson = fs.readJsonSync('./package.json');
-    done();
+function processDemoJs() {
+    return browserify('./demo/demo.js')
+        .bundle()
+        .pipe(source('./demo/demo.js'))
+        .pipe(buffer())
+        .pipe(minify({ noSource: true }))
+        .pipe(dest('./'));
 }
 
 /**
  * The all seeing eye...
  */
 function watchFiles() {
-    watch('./package.json', getPackageJson);
     watch('./src/html/component.html', html);
     watch('./src/css/component.css', css);
-    watch(['./src/js/mailtoui.js', './package.json'], series(js, indexJs));
-    watch('./index.js', indexJs);
+    watch(['./src/js/mailtoui.js', './package.json'], series(js, lintDemoJs, processDemoJs));
+    watch('./demo/demo.js', demoJs);
 }
 
 /**
  * Define complex tasks.
  */
-const build = series(getPackageJson, parallel(html, css), js, indexJs);
+const demoJs = series(lintDemoJs, processDemoJs);
+const build = series(parallel(html, css), js, demoJs);
 const watching = series(build, watchFiles);
 
 /**
@@ -113,6 +110,6 @@ const watching = series(build, watchFiles);
 exports.html = html;
 exports.css = css;
 exports.js = js;
-exports.indexJs = indexJs;
+exports.demoJs = demoJs;
 exports.watch = watching;
 exports.default = build;