mirror of
https://github.com/chinchang/web-maker.git
synced 2025-06-11 04:00:54 +02:00
add codepen feature
This commit is contained in:
@ -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"
|
||||||
|
@ -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="{"title": "New Pen!", "html": "<div>Hello, World!</div>"}"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user