Created
March 3, 2017 22:17
-
-
Save notrab/4f3b12aa750a3ea408f3da898e5f4382 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const express = require('express') | |
| const path = require('path') | |
| const app = express() | |
| app.set('views', __dirname + '/views'); | |
| app.set('view engine', 'ejs') | |
| app.get('/test', (req, res) => { | |
| res.render('home') | |
| }) | |
| app.get('/iframe.html', (req, res) => { | |
| res.render('iframe') | |
| }) | |
| app.get('/embed/:id.js', (req, res) => { | |
| res.header('Content-Type', 'text/javascript') | |
| res.sendFile(__dirname + '/views/widget.js', { | |
| embedId: req.params.id | |
| }) | |
| }) | |
| app.listen(1234) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Hello world</title> | |
| </head> | |
| <body> | |
| <h1>Welcome to my world!</h1> | |
| <script src="http://localhost:1234/embed/f490df.js" charset="utf-8"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Feedback Modal</title> | |
| <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1"> | |
| <style media="screen"> | |
| html { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, sans-serif; | |
| } | |
| #feedbackapp-modal-container { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| opacity: 0; | |
| overflow: auto; | |
| -webkit-perspective: 900px; | |
| background: rgba(0, 0, 0, 0.2); | |
| background: radial-gradient(ellipse at bottom right, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 75%); | |
| -webkit-backface-visibility: hidden; | |
| transition: all 0.25s ease; | |
| -moz-transition: all 0.25s ease; | |
| -webkit-transition: all 0.25s ease; | |
| } | |
| #feedbackapp-modal-container.show { | |
| opacity: 1; | |
| transition: all 0.25s ease; | |
| -moz-transition: all 0.25s ease; | |
| -webkit-transition: all 0.25s ease; | |
| } | |
| #feedbackapp-modal { | |
| right: 30px; | |
| bottom: 90px; | |
| padding: 30px; | |
| opacity: 0; | |
| width: 340px; | |
| height: 460px; | |
| background: white; | |
| position: absolute; | |
| border-radius: 8px; | |
| transform: scale(0.2) translateY(200px); | |
| -moz-transform: scale(0.2) translateY(200px); | |
| -webkit-transform: scale(0.2) translateY(200px); | |
| } | |
| #feedbackapp-modal.show { | |
| opacity: 1; | |
| transform: scale(1) translateY(0); | |
| -moz-transform: scale(1) translateY(0); | |
| -webkit-transform: scale(1) translateY(0); | |
| transition: all 0.3s cubic-bezier(0.000, 0.340, 0.325, 1.385) 0.2s; | |
| -moz-transition: all 0.3s cubic-bezier(0.000, 0.340, 0.325, 1.385) 0.2s; | |
| -webkit-transition: all 0.3s cubic-bezier(0.000, 0.340, 0.325, 1.385) 0.2s; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="feedbackapp-modal-container"> | |
| <div id="feedbackapp-modal"> | |
| <p>Hello world</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| console.log('Hello world'); | |
| var displayModal = function(e) { | |
| e.preventDefault(); | |
| var iframe = document.querySelector('#feedbackapp-iframe') | |
| iframe.style.display = 'block' | |
| var modalContainer = iframe.contentWindow.document.getElementById('feedbackapp-modal-container') | |
| modalContainer.className = 'show' | |
| setTimeout(function() { | |
| var actualModal = iframe.contentWindow.document.getElementById('feedbackapp-modal') | |
| actualModal.className = 'show' | |
| }, 300) | |
| } | |
| var body = document.querySelector('body'); | |
| var iframe = document.createElement('iframe'); | |
| iframe.id = 'feedbackapp-iframe' | |
| iframe.src = 'http://localhost:1234/iframe.html'; | |
| iframe.frameBorder = 0; | |
| iframe.style = 'display: none; z-index: 9999; border: 0; overflow-x: hidden; overflow-y: auto; visibility: visible; margin: 0; padding: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%'; | |
| body.appendChild(iframe); | |
| var launchBtn = document.createElement('button') | |
| launchBtn.appendChild(document.createTextNode('Got feedback?')) | |
| launchBtn.style = 'z-index: 9998; background: black, color: white; font-size: 21px; position: fixed; bottom: 30px; right: 30px;' | |
| launchBtn.addEventListener('click', displayModal) | |
| body.appendChild(launchBtn) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment