mirror of
https://github.com/chinchang/web-maker.git
synced 2025-02-20 13:16:43 +01:00
add codepen btn.
This commit is contained in:
Kushagra Gour
parent
ecaaea74c7
commit
d9e586a34f
@ -4,6 +4,7 @@
|
||||
<title>Web Maker</title>
|
||||
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
|
||||
<link rel="stylesheet" href="lib/codemirror/theme/monokai.css">
|
||||
<link rel="stylesheet" href="lib/hint.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
@ -14,7 +15,7 @@
|
||||
min-height: 100vh;
|
||||
font-family: Helvetica, arial;
|
||||
}
|
||||
a { text-decoration: none; color: crimson; }
|
||||
a { text-decoration: none; color: crimson; cursor: pointer; }
|
||||
/*a:hover { text-decoration: underline; }*/
|
||||
.flex {
|
||||
display: flex;
|
||||
@ -130,6 +131,14 @@
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
.footer__separator {
|
||||
display: inline-block;
|
||||
}
|
||||
.footer__separator:after {
|
||||
content: '|sdfd';
|
||||
margin: 0 5px;
|
||||
color: #CCC;
|
||||
}
|
||||
.mode-btn {
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
@ -144,14 +153,15 @@
|
||||
top: 2px;
|
||||
}
|
||||
.footer a > svg {
|
||||
transition: 0.3s ease;
|
||||
fill: rgba(255, 255, 255, 0.2)
|
||||
}
|
||||
.footer a:hover svg {
|
||||
fill: rgba(255, 255, 255, 0.45)
|
||||
}
|
||||
.mode-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.mode-btn.selected svg {
|
||||
fill: rgba(255, 255, 255, 0.45);
|
||||
@ -227,17 +237,31 @@
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer__right fr">
|
||||
<a id="js-layout-btn-1" class="mode-btn" href="javascript:void(0)">
|
||||
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="codepen-logo" viewBox="0 0 120 120"><path class="outer-ring" d="M60.048 0C26.884 0 0 26.9 0 60.048s26.884 60 60 60.047c33.163 0 60.047-26.883 60.047-60.047 S93.211 0 60 0z M60.048 110.233c-27.673 0-50.186-22.514-50.186-50.186S32.375 9.9 60 9.9 c27.672 0 50.2 22.5 50.2 50.186S87.72 110.2 60 110.233z"/><path class="inner-box" d="M97.147 48.319c-0.007-0.047-0.019-0.092-0.026-0.139c-0.016-0.09-0.032-0.18-0.056-0.268 c-0.014-0.053-0.033-0.104-0.05-0.154c-0.025-0.078-0.051-0.156-0.082-0.232c-0.021-0.053-0.047-0.105-0.071-0.156 c-0.033-0.072-0.068-0.143-0.108-0.211c-0.029-0.051-0.061-0.1-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.193 c-0.035-0.047-0.072-0.094-0.109-0.139c-0.051-0.059-0.104-0.117-0.159-0.172c-0.042-0.043-0.083-0.086-0.127-0.125 c-0.059-0.053-0.119-0.104-0.181-0.152c-0.048-0.037-0.095-0.074-0.145-0.109c-0.019-0.012-0.035-0.027-0.053-0.039L61.817 23.5 c-1.072-0.715-2.468-0.715-3.54 0L24.34 46.081c-0.018 0.012-0.034 0.027-0.053 0.039c-0.05 0.035-0.097 0.072-0.144 0.1 c-0.062 0.049-0.123 0.1-0.181 0.152c-0.045 0.039-0.086 0.082-0.128 0.125c-0.056 0.055-0.108 0.113-0.158 0.2 c-0.038 0.045-0.075 0.092-0.11 0.139c-0.047 0.062-0.092 0.127-0.134 0.193c-0.032 0.049-0.062 0.098-0.092 0.1 c-0.039 0.068-0.074 0.139-0.108 0.211c-0.024 0.051-0.05 0.104-0.071 0.156c-0.031 0.076-0.057 0.154-0.082 0.2 c-0.017 0.051-0.035 0.102-0.05 0.154c-0.023 0.088-0.039 0.178-0.056 0.268c-0.008 0.047-0.02 0.092-0.025 0.1 c-0.019 0.137-0.029 0.275-0.029 0.416V71.36c0 0.1 0 0.3 0 0.418c0.006 0 0 0.1 0 0.1 c0.017 0.1 0 0.2 0.1 0.268c0.015 0.1 0 0.1 0.1 0.154c0.025 0.1 0.1 0.2 0.1 0.2 c0.021 0.1 0 0.1 0.1 0.154c0.034 0.1 0.1 0.1 0.1 0.213c0.029 0 0.1 0.1 0.1 0.1 c0.042 0.1 0.1 0.1 0.1 0.193c0.035 0 0.1 0.1 0.1 0.139c0.05 0.1 0.1 0.1 0.2 0.2 c0.042 0 0.1 0.1 0.1 0.125c0.058 0.1 0.1 0.1 0.2 0.152c0.047 0 0.1 0.1 0.1 0.1 c0.019 0 0 0 0.1 0.039L58.277 96.64c0.536 0.4 1.2 0.5 1.8 0.537c0.616 0 1.233-0.18 1.77-0.537 l33.938-22.625c0.018-0.012 0.034-0.027 0.053-0.039c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.122-0.1 0.181-0.152 c0.044-0.039 0.085-0.082 0.127-0.125c0.056-0.055 0.108-0.113 0.159-0.172c0.037-0.045 0.074-0.09 0.109-0.139 c0.048-0.062 0.092-0.127 0.135-0.193c0.03-0.049 0.062-0.098 0.091-0.146c0.04-0.07 0.075-0.141 0.108-0.213 c0.024-0.051 0.05-0.102 0.071-0.154c0.031-0.078 0.057-0.156 0.082-0.234c0.017-0.051 0.036-0.102 0.05-0.154 c0.023-0.088 0.04-0.178 0.056-0.268c0.008-0.045 0.02-0.092 0.026-0.137c0.018-0.139 0.028-0.277 0.028-0.418V48.735 C97.176 48.6 97.2 48.5 97.1 48.319z M63.238 32.073l25.001 16.666L77.072 56.21l-13.834-9.254V32.073z M56.856 32.1 v14.883L43.023 56.21l-11.168-7.471L56.856 32.073z M29.301 54.708l7.983 5.34l-7.983 5.34V54.708z M56.856 88.022L31.855 71.4 l11.168-7.469l13.833 9.252V88.022z M60.048 67.597l-11.286-7.549l11.286-7.549l11.285 7.549L60.048 67.597z M63.238 88.022V73.14 l13.834-9.252l11.167 7.469L63.238 88.022z M90.794 65.388l-7.982-5.34l7.982-5.34V65.388z"/></symbol>
|
||||
</svg>
|
||||
|
||||
<form action="http://codepen.io/pen/define" method="POST" target="_blank" id="js-codepen-form">
|
||||
<input type="hidden" name="data" value='{"title": "New Pen!", "html": "<div>Hello, World!</div>"}'>
|
||||
</form>
|
||||
<a href="" id="js-codepen-btn" class="mode-btn hint--top-left" data-hint="Try on Codepen">
|
||||
<svg class="log">
|
||||
<use xlink:href="#codepen-logo"></use>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<div class="footer__separator"></div>
|
||||
<a id="js-layout-btn-1" class="mode-btn">
|
||||
<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
|
||||
<use xlink:href="#mode-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<a id="js-layout-btn-2" class="mode-btn" href="javascript:void(0)">
|
||||
<a id="js-layout-btn-2" class="mode-btn">
|
||||
<svg viewBox="0 0 100 100">
|
||||
<use xlink:href="#mode-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<a id="js-layout-btn-3" class="mode-btn" href="javascript:void(0)">
|
||||
<a id="js-layout-btn-3" class="mode-btn">
|
||||
<svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
|
||||
<use xlink:href="#mode-icon" />
|
||||
</svg>
|
||||
@ -245,13 +269,13 @@
|
||||
</div>
|
||||
<a href="http://kushagragour.in/lab/web-maker/" target="_blank"><div class="logo"></div></a>
|
||||
© Web Maker
|
||||
<a id="js-help-btn" class="footer__link">
|
||||
<a id="js-help-btn" class="footer__link hint--top-right" data-hint="Help">
|
||||
<svg style="width:20px; height:20px; vertical-align:text-bottom" viewBox="0 0 24 24">
|
||||
<path d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<!-- #00ACED -->
|
||||
<a class="footer__link" href="http://twitter.com/share?url=http://kushagragour.in/lab/web-maker/&text=Web-Maker: Quick & offline web experimenting in your browser!&related=hint_css&hashtags=web,tinker,chrome" target="_blank">
|
||||
<a class="footer__link hint--top-right" data-hint="Tweet about 'Web Maker'" href="http://twitter.com/share?url=http://kushagragour.in/lab/web-maker/&text=Web-Maker: Quick & offline web experimenting in your browser!&related=hint_css&hashtags=web,tinker,chrome" target="_blank">
|
||||
<svg viewBox="0 0 16 16" style="width:20px; height:20px; vertical-align:text-bottom">
|
||||
<path id="twitter-icon" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
|
||||
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
|
||||
|
||||
5
src/lib/hint.min.css
vendored
Normal file
5
src/lib/hint.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -17,6 +17,8 @@
|
||||
, layoutBtn3 = $('#js-layout-btn-3')
|
||||
, helpBtn = $('#js-help-btn')
|
||||
, helpModal = $('#js-help-modal')
|
||||
, codepenBtn = $('#js-codepen-btn')
|
||||
, codepenForm = $('#js-codepen-form')
|
||||
;
|
||||
|
||||
editur.cm = {};
|
||||
@ -132,9 +134,9 @@
|
||||
});
|
||||
|
||||
function init () {
|
||||
layoutBtn1.addEventListener('click', function () { saveSetting('layoutMode', 1); toggleLayout(1); });
|
||||
layoutBtn2.addEventListener('click', function () { saveSetting('layoutMode', 2); toggleLayout(2); });
|
||||
layoutBtn3.addEventListener('click', function () { saveSetting('layoutMode', 3); toggleLayout(3); });
|
||||
layoutBtn1.addEventListener('click', function () { saveSetting('layoutMode', 1); toggleLayout(1); return false; });
|
||||
layoutBtn2.addEventListener('click', function () { saveSetting('layoutMode', 2); toggleLayout(2); return false; });
|
||||
layoutBtn3.addEventListener('click', function () { saveSetting('layoutMode', 3); toggleLayout(3); return false; });
|
||||
|
||||
chrome.storage.local.get('layoutMode', function localGetCallback(result) {
|
||||
if (result.layoutMode) {
|
||||
@ -146,6 +148,22 @@
|
||||
|
||||
helpBtn.addEventListener('click', function () {
|
||||
helpModal.classList.toggle('is-modal-visible');
|
||||
return false;
|
||||
});
|
||||
|
||||
codepenBtn.addEventListener('click', function (e) {
|
||||
var json = {
|
||||
title: 'A Web Maker experiment',
|
||||
html: editur.cm.html.getValue(),
|
||||
css: editur.cm.css.getValue(),
|
||||
js: editur.cm.js.getValue()
|
||||
};
|
||||
json = JSON.stringify(json)
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'")
|
||||
codepenForm.querySelector('input').value = json;
|
||||
codepenForm.submit();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
window.addEventListener('click', function(e) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user