<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/andytran/pen/jyEPyL?limit=all&page=5&q=code" />
<style class="cp-pen-styles">body {
margin: 0;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.app {
width: 100%;
max-width: 600px;
margin: 100px auto;
width: 80%;
}
.app__title {
display: block;
max-width: 600px;
width: 80%;
margin: 0 auto 20px;
padding: 10px;
box-sizing: border-box;
color: #212121;
font-size: 18px;
font-weight: 600;
line-height: 1px;
}
.form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
max-width: 600px;
width: 80%;
margin: 0 auto;
}
.input {
outline: none;
background: #FFFFFF;
width: 100%;
height: 40px;
border: 1px solid #EEEEEE;
border-radius: 2px;
margin: 0 10px;
padding: 0 20px;
box-sizing: border-box;
}
.input:focus {
border-color: #2B87DA;
}
.input--error {
border-color: #EF5555;
}
.textarea {
outline: none;
display: block;
background: #FFFFFF;
width: 100%;
height: 200px;
border: 1px solid #EEEEEE;
border-radius: 2px;
margin: 0 10px;
padding: 20px;
box-sizing: border-box;
line-height: 18px;
}
.textarea:focus {
border-color: #2B87DA;
}
.button {
outline: none;
background: #2B87DA;
height: 40px;
border: 0;
border-radius: 2px;
margin: 0 10px;
padding: 0 20px;
box-sizing: border-box;
color: #FFFFFF;
font-weight: 600;
letter-spacing: 0.7px;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
}
.results {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
max-width: 600px;
width: 80%;
margin: 20px auto 0;
}
.examples {
max-width: 600px;
width: 80%;
border-top: 1px solid #EEEEEE;
margin: 40px auto 0;
padding: 40px 10px 0;
box-sizing: border-box;
}
.examples__title {
margin: 0 0 10px;
color: #444444;
line-height: 1;
font-size: 14px;
font-weight: 600;
}
.examples__content {
padding: 10px 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.examples__item {
position: relative;
display: inline-block;
width: 200px;
height: 120px;
border: 1px solid #EEEEEE;
border-radius: 2px;
margin: 0 10px;
overflow: hidden;
}
.examples__item:before {
content: '';
z-index: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
width: 100%;
height: 100%;
}
.examples__item:first-child {
margin-left: 0;
}
.examples__item:last-child {
margin-right: 0;
}
.examples__item iframe {
width: 400%;
height: 400%;
border: 0;
-webkit-transform: scale(0.25);
transform: scale(0.25);
-webkit-transform-origin: top left;
transform-origin: top left;
}
</style></head><body>
<div id="root"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.16/clipboard.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script >'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
console.clear();
var _React = React;
var Component = _React.Component;
var PropTypes = _React.PropTypes;
var _ReactDOM = ReactDOM;
var render = _ReactDOM.render;
var App = function (_Component) {
_inherits(App, _Component);
function App() {
_classCallCheck(this, App);
var _this = _possibleConstructorReturn(this, _Component.call(this));
_this.state = {
cssCode: '',
error: false,
examples: ['//s.codepen.io/andytran/debug/dNPMOB', '//s.codepen.io/andytran/debug/MJYaRw', '//s.codepen.io/andytran/debug/ggMYod', '//s.codepen.io/andytran/debug/dNGJJN', '//s.codepen.io/andytran/debug/vgNjjd', '//s.codepen.io/andytran/debug/MJKOqB'],
htmlCode: '',
url: '',
jsCode: '',
request: false
};
_this._handleAjaxRequest = _this._handleAjaxRequest.bind(_this);
_this._onChange = _this._onChange.bind(_this);
_this._onClick = _this._onClick.bind(_this);
_this._onKeyDown = _this._onKeyDown.bind(_this);
return _this;
}
App.prototype._handleAjaxRequest = function _handleAjaxRequest(ext) {
var self = this;
this.setState({
error: false,
request: true
});
$.ajax({
url: this.state.url + '.' + ext,
success: function success(data) {
if (ext === 'css') {
return self.setState({
cssCode: data ? '<style>' + data + '</style>' : '',
request: false
});
} else if (ext === 'html') {
return self.setState({
htmlCode: data,
request: false
});
} else if (ext === 'js') {
return self.setState({
jsCode: '<scr' + 'ipt>' + data + '</scr' + 'ipt>',
request: false
});
}
return false;
},
error: function error() {
self.setState({
cssCode: '',
error: true,
htmlCode: '',
jsCode: '',
request: false
});
},
type: 'get'
});
};
App.prototype._onChange = function _onChange(event) {
var protocol = event.target.value.substring(0, 5);
var url = event.target.value.substring(5);
if (window.location.protocol === 'https:') {
url = event.target.value;
}
if (protocol === 'http:') {
url = 'https:' + url;
}
this.setState({
cssCode: '',
htmlCode: '',
url: url || event.target.value,
jsCode: ''
});
};
App.prototype._onClick = function _onClick(event) {
event.preventDefault();
this._handleAjaxRequest('css');
this._handleAjaxRequest('html');
this._handleAjaxRequest('js');
};
App.prototype._onKeyDown = function _onKeyDown(event) {
if (event.keyCode === 13) {
event.preventDefault();
this._handleAjaxRequest('css');
this._handleAjaxRequest('html');
this._handleAjaxRequest('js');
}
};
App.prototype._renderButton = function _renderButton() {
var _state = this.state;
var cssCode = _state.cssCode;
var htmlCode = _state.htmlCode;
var jsCode = _state.jsCode;
var clipboard = new Clipboard('#copy');
if (!cssCode || !htmlCode || !jsCode) {
return React.createElement(
'button',
{
className: 'button',
onClick: this._onClick,
type: 'button',
disabled: this.state.request
},
'Generate'
);
}
return React.createElement(
'button',
{
className: 'button',
'data-clipboard-target': '#results',
id: 'copy',
onClick: function onClick(e) {
return e.preventDefault();
},
type: 'button'
},
'Copy Code'
);
};
App.prototype._renderCode = function _renderCode() {
var _state2 = this.state;
var cssCode = _state2.cssCode;
var htmlCode = _state2.htmlCode;
var jsCode = _state2.jsCode;
if (!cssCode || !htmlCode || !jsCode) {
return '';
}
return cssCode.replace(/\s+/g, ' ') + htmlCode.replace(/\s+/g, ' ') + jsCode.replace(/\s+/g, ' ');
};
App.prototype._renderExample = function _renderExample(url, i) {
return React.createElement(
'a',
{
className: 'examples__item',
href: url,
target: '_blank'
},
React.createElement('iframe', { src: url })
);
};
App.prototype.render = function render() {
var _this2 = this;
return React.createElement(
'div',
{ className: 'app' },
React.createElement(
'h1',
{ className: 'app__title' },
'Code Module Generator'
),
React.createElement(
'form',
{ className: 'form' },
React.createElement('input', {
className: 'input' + (this.state.error ? ' input--error' : ''),
name: 'id',
onChange: this._onChange,
onKeyDown: this._onKeyDown,
placeholder: 'CodePen URL (Ex. https://codepen.io/andytran/pen/dNPMOB)',
ref: function ref(input) {
_this2.textInput = input;
},
required: true,
type: 'text'
}),
this._renderButton()
),
React.createElement(
'div',
{ className: 'results' },
React.createElement('textarea', {
className: 'textarea',
id: 'results',
value: this._renderCode(),
disabled: this.state.request
})
),
React.createElement(
'div',
{ className: 'examples' },
React.createElement(
'h1',
{ className: 'examples__title' },
'Works with Divi Code Module'
),
React.createElement(
'div',
{ className: 'examples__content' },
this.state.examples.map(this._renderExample)
)
)
);
};
return App;
}(Component);
render(React.createElement(App, null), document.getElementById('root'));
//# sourceURL=pen.js
</script>
</body></html>
