Skip to content

Commit a40668f

Browse files
author
Will Bamberg
committed
Various updates to CSS v3
1 parent b81ce9c commit a40668f

9 files changed

Lines changed: 1998 additions & 24 deletions

File tree

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

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
* {
2+
box-sizing: border-box;
3+
}
14

25
body {
36
background-color: #EAEFF2;
@@ -35,10 +38,13 @@ p {
3538
}
3639

3740
.example-choice {
38-
padding: 0.5em 0.5em;
3941
font-size: 14px;
4042
transition: background-color .2s ease-out;
4143
cursor: pointer;
44+
padding: 0.25em;
45+
display: inline-block;
46+
width: 100%;
47+
position: relative;
4248
}
4349

4450
.example-choice:hover {
@@ -52,6 +58,33 @@ p {
5258
cursor: text;
5359
}
5460

61+
.example-choice>code {
62+
width: 90%;
63+
display: inline-block;
64+
}
65+
66+
.reset {
67+
display: none;
68+
position: absolute;
69+
top: .75em;
70+
right: 1em;
71+
}
72+
73+
.example-choice.selected>.reset {
74+
display: unset;
75+
}
76+
77+
.error {
78+
max-height: 1em;
79+
position: absolute;
80+
top: .75em;
81+
right: 5.5em;
82+
}
83+
84+
.hidden {
85+
display: none;
86+
}
87+
5588
[contenteditable]:focus {
5689
outline: 0px solid transparent;
5790
}

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

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
/* http://prismjs.com/download.html?themes=prism&languages=css */
2+
/**
3+
* prism.js default theme for JavaScript, CSS and HTML
4+
* Based on dabblet (http://dabblet.com)
5+
* @author Lea Verou
6+
*/
7+
8+
code[class*="language-"],
9+
pre[class*="language-"] {
10+
color: black;
11+
background: none;
12+
text-shadow: 0 1px white;
13+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
14+
text-align: left;
15+
white-space: pre;
16+
word-spacing: normal;
17+
word-break: normal;
18+
word-wrap: normal;
19+
line-height: 1.5;
20+
21+
-moz-tab-size: 4;
22+
-o-tab-size: 4;
23+
tab-size: 4;
24+
25+
-webkit-hyphens: none;
26+
-moz-hyphens: none;
27+
-ms-hyphens: none;
28+
hyphens: none;
29+
}
30+
31+
@media print {
32+
code[class*="language-"],
33+
pre[class*="language-"] {
34+
text-shadow: none;
35+
}
36+
}
37+
38+
/* Code blocks */
39+
pre[class*="language-"] {
40+
padding: 1em;
41+
margin: .5em 0;
42+
overflow: auto;
43+
}
44+
45+
:not(pre) > code[class*="language-"],
46+
pre[class*="language-"] {
47+
}
48+
49+
/* Inline code */
50+
:not(pre) > code[class*="language-"] {
51+
padding: .1em;
52+
border-radius: .3em;
53+
white-space: normal;
54+
}
55+
56+
.token.comment,
57+
.token.prolog,
58+
.token.doctype,
59+
.token.cdata {
60+
color: slategray;
61+
}
62+
63+
.token.punctuation {
64+
color: #999;
65+
}
66+
67+
.namespace {
68+
opacity: .7;
69+
}
70+
71+
.token.property,
72+
.token.tag,
73+
.token.boolean,
74+
.token.number,
75+
.token.constant,
76+
.token.symbol,
77+
.token.deleted {
78+
color: #905;
79+
}
80+
81+
.token.selector,
82+
.token.attr-name,
83+
.token.string,
84+
.token.char,
85+
.token.builtin,
86+
.token.inserted {
87+
color: #690;
88+
}
89+
90+
.token.operator,
91+
.token.entity,
92+
.token.url,
93+
.language-css .token.string,
94+
.style .token.string {
95+
color: #a67f59;
96+
}
97+
98+
.token.atrule,
99+
.token.attr-value,
100+
.token.keyword {
101+
color: #07a;
102+
}
103+
104+
.token.function {
105+
color: #DD4A68;
106+
}
107+
108+
.token.regex,
109+
.token.important,
110+
.token.variable {
111+
color: #e90;
112+
}
113+
114+
.token.important,
115+
.token.bold {
116+
font-weight: bold;
117+
}
118+
.token.italic {
119+
font-style: italic;
120+
}
121+
122+
.token.entity {
123+
cursor: help;
124+
}

‎editable-samples-2/img/alerticon-warning@2x.png‎

432 Bytes
Loading

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

Lines changed: 49 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,77 @@
11
var element = document.getElementById("example-element");
22

3-
function applyCode(code) {
3+
function applyCode(code, choice) {
44
element.style.cssText = code;
5+
var errorIcon = choice.querySelector(".error");
56
if (!element.style.cssText) {
6-
console.log("bad style");
7+
errorIcon.classList.remove("hidden");
78
} else {
8-
console.log(element.style.cssText);
9+
errorIcon.classList.add("hidden");
910
}
1011
}
1112

12-
1313
var exampleChoices = document.querySelectorAll(".example-choice");
1414

15+
function indexOf(exampleChoices, choice) {
16+
for (var i = 0; i < exampleChoices.length; i++) {
17+
if (exampleChoices[i] === choice) {
18+
return i;
19+
}
20+
}
21+
return -1;
22+
}
23+
1524
function choose(choice) {
1625
choice.classList.add("selected");
17-
choice.setAttribute("contentEditable", true);
18-
choice.focus();
19-
applyCode(choice.textContent);
26+
choice.firstChild.setAttribute("contentEditable", true);
27+
choice.firstChild.setAttribute("spellcheck", false);
28+
choice.firstChild.focus();
29+
applyCode(choice.textContent, choice);
2030
}
2131

2232
function onChoose(e) {
33+
// highlght the code we are leaving
34+
var selected = document.querySelector(".selected");
35+
if (selected && (e.currentTarget != selected)) {
36+
var highlighted = Prism.highlight(selected.firstChild.textContent, Prism.languages.css);
37+
selected.firstChild.innerHTML = highlighted;
38+
}
39+
if (selected) {
40+
var errorIcon = selected.querySelector(".error");
41+
if (errorIcon) {
42+
errorIcon.classList.add("hidden");
43+
}
44+
}
2345
for (exampleChoice of exampleChoices) {
2446
exampleChoice.classList.remove("selected");
2547
}
2648
choose(e.currentTarget);
2749
}
2850

2951
function onEdit(e) {
30-
applyCode(e.target.textContent);
52+
applyCode(e.currentTarget.textContent, e.currentTarget.parentNode);
3153
}
3254

55+
document.addEventListener('copy', function(e){
56+
var selection = window.getSelection();
57+
var range = selection.getRangeAt(0);
58+
59+
e.clipboardData.setData('text/plain', range.toString());
60+
e.clipboardData.setData('text/html', range.toString());
61+
e.preventDefault();
62+
e.stopPropagation();
63+
64+
});
65+
3366
for (exampleChoice of exampleChoices) {
3467
exampleChoice.addEventListener("click", onChoose);
35-
exampleChoice.addEventListener("keyup", onEdit);
68+
exampleChoice.firstChild.addEventListener("keyup", onEdit);
69+
exampleChoice.querySelector(".reset").addEventListener("click", function(e) {
70+
var choice = e.target.parentNode;
71+
var replacementText = originalChoices[indexOf(exampleChoices, choice)];
72+
var highlighted = Prism.highlight(replacementText, Prism.languages.css);
73+
choice.firstChild.innerHTML = highlighted;
74+
});
3675
}
3776

38-
choose(exampleChoices[0]);
77+
choose(exampleChoices[4]);

0 commit comments

Comments
 (0)