jestho/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
</head>
<body>
  <button spid-pay="https://payment.schibsted.no/"></button>
</body>
</html>

## index.js
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);
}

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "csjs": "1.0.6",
    "insert-css": "1.0.0",
    "babel-runtime": "6.11.6"
  }
}

## transpiled.js
'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);
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	</head>
	<body>
	<button spid-pay="https://payment.schibsted.no/"></button>
	</body>
	</html>
	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);
	}
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"csjs": "1.0.6",
	"insert-css": "1.0.0",
	"babel-runtime": "6.11.6"
	}
	}
	'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);
	}