update readme and script

tuanladevgithub · Jan 21, 2019 · 06924b0 · 06924b0
1 parent 9d4a26b
commit 06924b0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -3,6 +3,11 @@ Demos
 
 Author: Michael Scharnagl @justmarkup
 
+Transforming a link to a login page to a button opening the login form in an overlay
+------------
+* Demo: http://justmarkup.github.io/demos/link-to-button
+* Article: https://justmarkup.com/log/?p=3432&preview=true
+
 Enhancing a login form – from basic to validation to reveal password
 ------------
 * Demo: https://enhance-login-form.glitch.me/login

diff --git a/link-to-button/script.js b/link-to-button/script.js
@@ -6,14 +6,6 @@
             var dialogContent = document.querySelector('[data-dialog-content]');
             window.dialog = false;
 
-            dialogOpener.outerHTML = `
-                <button data-link="${dialogOpener.href}" class="link-like">
-                    ${dialogOpener.textContent}
-                </button>
-            `;
-
-            dialogOpener = document.querySelector('[data-link="' + dialogOpener.href + '"]')
-
             if (!window.dialog) {
                 var dialogElement = document.getElementById('dialog');
                 var mainEl = document.querySelector('#content');
@@ -31,11 +23,17 @@
                 });
             }
 
+            dialogOpener.outerHTML = `
+                <button data-link="${dialogOpener.href}" class="link-like">
+                    ${dialogOpener.textContent}
+                </button>
+            `;
+
+            dialogOpener = document.querySelector('[data-link="' + dialogOpener.href + '"]');
+
             dialogOpener.addEventListener('click', function(ev) {
                 var link = this.dataset.link ? this.dataset.link : false;
 
-                console.log('click', link);
-
                 if (link) {
 
                     fetch(link)