mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-06-11 20:20:50 +02:00
Code Issues Releases Wiki Activity

add codepen feature

Browse Source
This commit is contained in:
Kushagra Gour
2018-06-07 10:48:05 +05:30
parent f5e3b9fd44
commit d3ba0534aa
2 changed files with 49 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
webmaker/src/components/Footer.jsx
View File

@ -40,6 +40,7 @@ export default class Footer extends Component {
<a <a
href="" href=""
onClick={this.props.codepenBtnClickHandler}
id="codepenBtn" id="codepenBtn"
class="mode-btn hint--rounded hint--top-left hide-on-mobile" class="mode-btn hint--rounded hint--top-left hide-on-mobile"
aria-label="Edit on CodePen" aria-label="Edit on CodePen"

48
webmaker/src/components/app.jsx
View File

@ -799,6 +799,40 @@ export default class App extends Component {
trackEvent('ui', 'notificationButtonClick', version); trackEvent('ui', 'notificationButtonClick', version);
return false; return false;
} }
codepenBtnClickHandler(e) {
debugger;
if (this.state.currentItem.cssMode === CssModes.ACSS) {
alert("Oops! CodePen doesn't supports Atomic CSS currently.");
e.preventDefault();
return;
}
var json = {
title: 'A Web Maker experiment',
html: this.state.currentItem.html,
css: this.state.currentItem.css,
js: this.state.currentItem.js,
/* eslint-disable camelcase */
html_pre_processor: modes[this.state.currentItem.htmlMode].codepenVal,
css_pre_processor: modes[this.state.currentItem.cssMode].codepenVal,
js_pre_processor: modes[this.state.currentItem.jsMode].codepenVal,
css_external: this.state.currentItem.externalLibs.css
.split('\n')
.join(';'),
js_external: this.state.currentItem.externalLibs.js.split('\n').join(';')
/* eslint-enable camelcase */
};
if (!this.state.currentItem.title.match(/Untitled\s\d\d*-\d/)) {
json.title = this.state.currentItem.title;
}
json = JSON.stringify(json);
window.codepenForm.querySelector('input').value = json;
window.codepenForm.submit();
trackEvent('ui', 'openInCodepen');
e.preventDefault();
}
render() { render() {
return ( return (
@ -845,6 +879,7 @@ export default class App extends Component {
detachedPreviewBtnHandler={this.detachedPreviewBtnHandler.bind( detachedPreviewBtnHandler={this.detachedPreviewBtnHandler.bind(
this this
)} )}
codepenBtnClickHandler={this.codepenBtnClickHandler.bind(this)}
hasUnseenChangelog={this.state.hasUnseenChangelog} hasUnseenChangelog={this.state.hasUnseenChangelog}
/> />
</div> </div>
@ -1088,6 +1123,19 @@ export default class App extends Component {
</symbol> </symbol>
</symbol> </symbol>
</svg> </svg>
<form
style="display:none;"
action="https://codepen.io/pen/define"
method="POST"
target="_blank"
id="codepenForm"
>
<input
type="hidden"
name="data"
value="{&quot;title&quot;: &quot;New Pen!&quot;, &quot;html&quot;: &quot;<div>Hello, World!</div>&quot;}"
/>
</form>
</div> </div>
); );
} }