made with esnextbin
Last active
October 13, 2016 10:18
-
-
Save jestho/5cfa2dd428583f98d598a999a319dcb1 to your computer and use it in GitHub Desktop.
esnextbin sketch
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>ESNextbin Sketch</title> | |
| </head> | |
| <body> | |
| <button spid-pay="https://payment.schibsted.no/"></button> | |
| </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
| import csjs from 'csjs'; | |
| import insertCss from 'insert-css'; | |
| const style = csjs` | |
| .button { | |
| background: blue; | |
| border: 0; | |
| border-radius: 5px; | |
| color: white; | |
| font: 400 1rem 'Helvetica', sans-serif; | |
| padding: 1em; | |
| } | |
| .overlay { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(0,0,0,.6); | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| } | |
| .iframe { | |
| background: white; | |
| border-radius: 5px; | |
| width: 400px; | |
| height: 600px; | |
| } | |
| `; | |
| const css = csjs.getCss(style); | |
| insertCss(css); | |
| const rootEle = document.querySelector('[spid-pay]'); | |
| rootEle.classList.add(style.button.className); | |
| rootEle.innerText = "Pay with SPiD"; | |
| rootEle.addEventListener('click', buildIframe); | |
| function buildIframe () { | |
| const overlay = document.createElement('div'); | |
| const iframe = document.createElement('iframe'); | |
| overlay.classList.add(style.overlay.className); | |
| document.body.appendChild(overlay); | |
| iframe.setAttribute('src', rootEle.getAttribute('spid-pay')); | |
| iframe.setAttribute('frameborder', 0); | |
| iframe.classList.add(style.iframe.className); | |
| overlay.appendChild(iframe); | |
| } |
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
| { | |
| "name": "esnextbin-sketch", | |
| "version": "0.0.0", | |
| "dependencies": { | |
| "csjs": "1.0.6", | |
| "insert-css": "1.0.0", | |
| "babel-runtime": "6.11.6" | |
| } | |
| } |
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
| 'use strict'; | |
| var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral'); | |
| var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2); | |
| var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n\n .button {\n background: blue;\n border: 0;\n border-radius: 5px;\n color: white;\n font: 400 1rem \'Helvetica\', sans-serif;\n padding: 1em;\n }\n \n .overlay {\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0,0,0,.6);\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n }\n \n .iframe {\n background: white;\n border-radius: 5px;\n width: 400px;\n height: 600px;\n }\n\n'], ['\n\n .button {\n background: blue;\n border: 0;\n border-radius: 5px;\n color: white;\n font: 400 1rem \'Helvetica\', sans-serif;\n padding: 1em;\n }\n \n .overlay {\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0,0,0,.6);\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n }\n \n .iframe {\n background: white;\n border-radius: 5px;\n width: 400px;\n height: 600px;\n }\n\n']); | |
| var _csjs = require('csjs'); | |
| var _csjs2 = _interopRequireDefault(_csjs); | |
| var _insertCss = require('insert-css'); | |
| var _insertCss2 = _interopRequireDefault(_insertCss); | |
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
| var style = (0, _csjs2.default)(_templateObject); | |
| var css = _csjs2.default.getCss(style); | |
| (0, _insertCss2.default)(css); | |
| var rootEle = document.querySelector('[spid-pay]'); | |
| rootEle.classList.add(style.button.className); | |
| rootEle.innerText = "Pay with SPiD"; | |
| rootEle.addEventListener('click', buildIframe); | |
| function buildIframe() { | |
| var overlay = document.createElement('div'); | |
| var iframe = document.createElement('iframe'); | |
| overlay.classList.add(style.overlay.className); | |
| document.body.appendChild(overlay); | |
| iframe.setAttribute('src', rootEle.getAttribute('spid-pay')); | |
| iframe.setAttribute('frameborder', 0); | |
| iframe.classList.add(style.iframe.className); | |
| overlay.appendChild(iframe); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment