tongChong
/
css-doodle
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update code samples

This commit is contained in:
yuanchuan 2017-06-01 02:40:52 +08:00
parent 5112c0b7ec
commit 0d873983cb
3 changed files with 107 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
docs/index.html
View File

@ -7,7 +7,7 @@
<meta name="description" content="A web component for drawing patterns with css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/codemirror/style.css">
<link rel="stylesheet" href="style.css?b0aa4878c23ec">
<link rel="stylesheet" href="style.css?c9e9b69256749">
<script src="lib/css-doodle.min.js?b0aa4878c23ec"></script>
</head>
<body>
@ -33,7 +33,14 @@
<div class="wrap">
<div class="playground">
<div class="doodle" front> <!-- insert dynamicly --> </div>
<div class="doodle" front>
<select>
<option value="leaves">Leaves</option>
<option value="flames">Flames</option>
<option value="fish">Fish</option>
</select>
<!-- insert dynamicly -->
</div>
<div class="source"> <!-- insert dynamicly --> </div>
</div>
</div>
@ -148,20 +155,19 @@
</p>
<p>
The following formats of size are recognizable:
</p>
<div class="list-items">
<ul>
<li><code>grid = "0"</code></li>
<li><code>grid = "5"</code></li>
<li><code>grid = "20"</code></li>
<li><code>grid = "5x7"</code></li>
<li><code>grid = "5 x 7"</code></li>
<li><code>grid = "5，7"</code></li>
<li><code>grid = "5,7"</code></li>
</ul>
</div>
The following formats of size are recognizable:
</p>
<div class="list-items">
<ul>
<li><code>grid = "0"</code></li>
<li><code>grid = "5"</code></li>
<li><code>grid = "20"</code></li>
<li><code>grid = "5x7"</code></li>
<li><code>grid = "5 x 7"</code></li>
<li><code>grid = "5，7"</code></li>
<li><code>grid = "5,7"</code></li>
</ul>
</div>
</article>
<div class="sep"></div>
@ -678,7 +684,7 @@
<script src="lib/codemirror/core.js"></script>
<script src="lib/codemirror/lang/css.js"></script>
<script src="main.js?3683e0447f0e"></script>
<script src="main.js?c9e9b69256749"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

105
docs/main.js
View File

@ -41,53 +41,75 @@
});
});
var doodleStyle = indent(`
:doodle {
clip-path: @shape(circle);
background-color: #f6ffed;
}
transition: .2s ease @rand(.6s);
will-change: transform;
transform: scale(@rand(.25, 1.25));
border-radius: @pick(
100% 0, 0 100%
);
background: hsla(
calc(5 * @index()), 70%, 60%,@rand(.8)
);
`);
if (Math.random() < .5) {
doodleStyle = indent(`
var doodles = {
'leaves': indent(`
:doodle {
clip-path: @shape(circle);
background-color: #f6ffed;
}
clip-path: @shape(bicorn);
transition: .2s ease @rand(.6s);
transform:
rotate(@rand(360deg))
scale(@rand(.5, 2.4))
translate(
@rand(-50%, 50%),
@rand(-50%, 50%)
);
will-change: transform;
transform: scale(@rand(.25, 1.25));
border-radius: @pick(
100% 0, 0 100%
);
background: hsla(
calc(5 * @index()), 70%, 60%,@rand(.8)
);
`),
fish: indent(`
:doodle {
clip-path: @shape(pear);
transform: rotate(90deg);
background-image: linear-gradient(
to left, #03a9f4,
rgba(156, 39, 176, .02)
);
}
clip-path: @shape(fish);
transition: .24s ease;
background: hsla(
calc(190 + 2 * @index()),
70%, 60%,@rand(.8)
);
transform:
scale(@rand(.3, 2))
rotate(-90deg)
translate(
@rand(-50%, 50%), @rand(-50%, 50%)
);
`),
flames: indent(`
clip-path: @shape(bicorn);
background: hsla(
calc(180 + 4 * @index()),
70%, 60%,
@rand(.8)
);
transform:
rotate(@rand(360deg))
scale(@rand(.5, 3))
translate(
@rand(-100%, 100%),
@rand(-100%, 100%)
);
`)
}
var doodle = document.createElement('css-doodle');
doodle.title = 'Click to update';
doodle.grid = '7, 7';
if (doodle.update) {
doodle.update(doodleStyle);
doodle.update(doodles.leaves);
}
var playground = document.querySelector('.playground');
@ -98,12 +120,14 @@
container.addEventListener('click', function(e) {
e.preventDefault();
if (!toggled() || container.hasAttribute('front')) {
doodle.refresh();
if (e.target.matches('css-doodle')) {
doodle.refresh();
}
}
});
var config = {
value: doodleStyle,
value: doodles.leaves,
mode: 'css',
insertSoftTab: true,
theme: '3024-day',
@ -155,6 +179,21 @@
}
});
var select = document.querySelector('.playground select');
select.addEventListener('change', function(e) {
var newStyle = doodles[e.target.value];
if (newStyle) {
doodle.style.display = 'none';
select.blur();
editor.setValue(newStyle);
doodle.style.display = '';
}
});
select.addEventListener('click', function(e) {
e.stopPropagation();
});
var shapes = [
{ name: 'circle' },
{ name: 'triangle' },

23
docs/style.css
View File

@ -206,23 +206,23 @@ textarea[code] {
display: flex;
align-items: center;
box-shadow: 0 0 50px rgb(194, 199, 199);
height: 420px;
height: 440px;
}
.playground .doodle {
overflow: hidden;
position: relative;
cursor: pointer;
}
.playground .doodle:before {
content: 'click to refresh';
.doodle select {
cursor: pointer;
position: absolute;
right: 5px;
bottom: 5px;
padding: 2px 5px;
font-size: .8em;
background: rgba(1, 160, 228, 0.1);
color: rgba(1, 160, 228, 0.57);
z-index: 1;
left: 1em;
top: 1em;
background: #E5F5FC;
color: #00BCD4;
border: 0;
border-radius: 0;
font-size: .9em;
z-index: 2;
}
.playground .doodle,
.playground .source {
@ -240,6 +240,7 @@ textarea[code] {
.playground css-doodle {
width: 350px;
height: 350px;
cursor: pointer;
}
.playground .source {
background: #fafafa;