Skip to content

Commit 98d59bb

Browse files
author
Will Bamberg
committed
Test a different approach for CSS
1 parent 9ec782c commit 98d59bb

8 files changed

Lines changed: 201 additions & 0 deletions

File tree

‎editable-samples-2/css/editable.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
2+
body {
3+
background-color: #EAEFF2;
4+
padding: 0;
5+
margin: 0;
6+
}
7+
8+
#output {
9+
width: 100%;
10+
height: 200px;
11+
background-color: white;
12+
padding: 1em;
13+
box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.1);
14+
}
15+
16+
#example-element {
17+
max-width: 80%;
18+
max-height: 80%;
19+
display: block;
20+
margin: 0 auto 0 auto;
21+
}
22+
23+
#output {
24+
overflow: hidden;
25+
}
26+
27+
#example-element {
28+
display: block;
29+
color: #C13832;
30+
}
31+
32+
p {
33+
padding: 0 0.5em;
34+
font: 14px "Open Sans", sans-serif;
35+
}
36+
37+
.example-choice {
38+
padding: 0.5em 0.5em;
39+
font-size: 14px;
40+
transition: background-color .2s ease-out;
41+
cursor: pointer;
42+
}
43+
44+
.example-choice:hover {
45+
background-color: whitesmoke;
46+
}
47+
48+
.example-choice.selected {
49+
background-color: white;
50+
transition: background-color .2s ease-in;
51+
box-shadow: inset 0px 2px 2px -2px rgba(0,0,0,0.2);
52+
cursor: text;
53+
}
54+
55+
[contenteditable]:focus {
56+
outline: 0px solid transparent;
57+
}

‎editable-samples-2/js/editable.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
var element = document.getElementById("example-element");
2+
3+
function applyCode(code) {
4+
element.style.cssText = code;
5+
if (!element.style.cssText) {
6+
console.log("bad style");
7+
} else {
8+
console.log(element.style.cssText);
9+
}
10+
}
11+
12+
13+
var exampleChoices = document.querySelectorAll(".example-choice");
14+
15+
function choose(choice) {
16+
choice.classList.add("selected");
17+
choice.setAttribute("contentEditable", true);
18+
choice.focus();
19+
applyCode(choice.textContent);
20+
}
21+
22+
function onChoose(e) {
23+
for (exampleChoice of exampleChoices) {
24+
exampleChoice.classList.remove("selected");
25+
}
26+
choose(e.currentTarget);
27+
}
28+
29+
function onEdit(e) {
30+
applyCode(e.target.textContent);
31+
}
32+
33+
for (exampleChoice of exampleChoices) {
34+
exampleChoice.addEventListener("click", onChoose);
35+
exampleChoice.addEventListener("keyup", onEdit);
36+
}
37+
38+
choose(exampleChoices[0]);

‎editable-samples-2/pages/border-top-color/css/element.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#example-element {
2+
border: solid 0.3em gold;
3+
}

‎editable-samples-2/pages/border-top-color/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<link href="../../css/editable.css" rel="stylesheet"></link>
6+
<link href="css/element.css" rel="stylesheet"></link>
7+
8+
</head>
9+
10+
<body>
11+
12+
<div id="output">
13+
<div id="example-element">
14+
<p>This is a box with a border around it.
15+
Note which side of the box is
16+
red.</p>
17+
</div>
18+
</div>
19+
20+
<p>Try editing the selected example, or select a different example:</p>
21+
22+
<pre class="prettyprint lang-css" id="example-choice-list"><div class=" example-choice">border-top-color: red;</div><div class=" example-choice">border-top-color: rgb(255, 128, 0);</div><div class=" example-choice">border-top-color: hsla(240, 50%, 25%, 0.75);</div><div class=" example-choice">border-top-color: #ffbb00;</div><div class=" example-choice">border-top-color: currentColor;</div><div class=" example-choice">border-top-color: transparent;</div></pre>
23+
24+
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
25+
<script type="text/javascript" src="../../js/editable.js"></script>
26+
27+
</body>
28+
29+
</html>

‎editable-samples-2/pages/filter/img/firefox.png‎

77.1 KB
Loading

‎editable-samples-2/pages/filter/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<link href="../../css/editable.css" rel="stylesheet"></link>
6+
</head>
7+
8+
<body>
9+
10+
<div id="output">
11+
<img id="example-element" src="img/firefox.png"/>
12+
</div>
13+
14+
<p>Try editing the selected example, or select a different example:</p>
15+
16+
<pre class="prettyprint lang-css" id="example-choice-list"><div class="example-choice">filter: blur(5px);</div><div class=" example-choice">filter: brightness(0.4);</div><div class="example-choice">filter: contrast(200%);</div><div class=" example-choice">filter: drop-shadow(16px 16px 20px blue);</div><div class="example-choice">filter: grayscale(50%);</div><div class="example-choice">filter: hue-rotate(90deg);</div><div class="example-choice">filter: invert(75%);</div><div class=" example-choice">filter: opacity(25%);</div><div class=" example-choice">filter: saturate(30%);</div><div class=" example-choice">filter: sepia(60%);</div><div class=" example-choice">filter: contrast(175%) brightness(3%);</div></pre>
17+
18+
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
19+
<script type="text/javascript" src="../../js/editable.js"></script>
20+
21+
</body>
22+
23+
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
24+
<script type="text/javascript" src="../../js/editable.js"></script>
25+
26+
</body>
27+
28+
</html>

‎editable-samples-2/pages/font/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<link href="../../css/editable.css" rel="stylesheet"></link>
6+
</head>
7+
8+
<body>
9+
10+
<div id="output">
11+
<span id="example-element">London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. Smoke lowering down from chimney-pots, making a soft black drizzle, with flakes of soot in it as big as full-grown snowflakes—gone into mourning, one might imagine, for the death of the sun. Dogs, undistinguishable in mire. Horses, scarcely better; splashed to their very blinkers. Foot passengers, jostling one another's umbrellas in a general infection of ill temper, and losing their foot-hold at street-corners, where tens of thousands of other foot passengers have been slipping and sliding since the day broke (if this day ever broke), adding new deposits to the crust upon crust of mud, sticking at those points tenaciously to the pavement, and accumulating at compound interest.</span>
12+
</div>
13+
14+
<p>Try editing the selected example, or select a different example:</p>
15+
16+
<pre class="prettyprint lang-css" id="example-choice-list"><div class=" example-choice">/* size | family */<br/>font: 2em "Open Sans", sans-serif;</div><div class=" example-choice">/* style | size | family */</br>font: italic 2em "Open Sans", sans-serif;</div><div class=" example-choice">/* style | variant | weight | size/line-height | family */<br/>font: italic small-caps bolder 16px/3 cursive;</div><div class=" example-choice">/* style | variant | weight | stretch | size/line-height | family */<br/>font: italic small-caps bolder condensed 16px/3 cursive;</div><div class=" example-choice">/* The font used in system dialogs */<br/>font: message-box;</div></pre>
17+
18+
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
19+
<script type="text/javascript" src="../../js/editable.js"></script>
20+
21+
</body>
22+
23+
</html>

‎editable-samples-2/pages/transform/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<link href="../../css/editable.css" rel="stylesheet"></link>
6+
</head>
7+
8+
<body>
9+
10+
<div id="output">
11+
<span id="example-element">London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. Smoke lowering down from chimney-pots, making a soft black drizzle, with flakes of soot in it as big as full-grown snowflakes—gone into mourning, one might imagine, for the death of the sun. Dogs, undistinguishable in mire. Horses, scarcely better; splashed to their very blinkers. Foot passengers, jostling one another's umbrellas in a general infection of ill temper, and losing their foot-hold at street-corners, where tens of thousands of other foot passengers have been slipping and sliding since the day broke (if this day ever broke), adding new deposits to the crust upon crust of mud, sticking at those points tenaciously to the pavement, and accumulating at compound interest.</span>
12+
</div>
13+
14+
<p>Try editing the selected example, or select a different example:</p>
15+
16+
<pre class="prettyprint lang-css" id="example-choice-list"><div class=" example-choice">/* size | family */<br/>font: 2em "Open Sans", sans-serif;</div><div class=" example-choice">/* style | size | family */</br>font: italic 2em "Open Sans", sans-serif;</div><div class=" example-choice">/* style | variant | weight | size/line-height | family */<br/>font: italic small-caps bolder 16px/3 cursive;</div><div class=" example-choice">/* style | variant | weight | stretch | size/line-height | family */<br/>font: italic small-caps bolder condensed 16px/3 cursive;</div><div class=" example-choice">/* The font used in system dialogs */<br/>font: message-box;</div></pre>
17+
18+
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
19+
<script type="text/javascript" src="../../js/editable.js"></script>
20+
21+
</body>
22+
23+
</html>

0 commit comments

Comments
 (0)