Skip to content

Commit 89fed4c

Browse files
author
Will Bamberg
committed
Remove autocomplete, remove edit button, have multiple lines in editor
1 parent 733755e commit 89fed4c

9 files changed

Lines changed: 11 additions & 110 deletions

File tree

‎editable-samples/js/editable.js‎

Lines changed: 7 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ var element = document.getElementById("example-element");
22
var input = document.getElementById("input");
33
var editor = document.getElementById("editor");
44
var reset = document.getElementById("reset");
5-
var edit = document.getElementById("edit");
65

76
var cmOptions = {
87
mode: "css",
@@ -14,17 +13,8 @@ var cmOptions = {
1413
var cmEditor = CodeMirror(editor, cmOptions);
1514
cmEditor.setSize("100%", 50);
1615
cmEditor.doc.setValue(cmInitContent);
17-
18-
CodeMirror.hint.css = function(cm) {
19-
var inner = {from: cm.getCursor(), to: cm.getCursor(), list: []};
20-
21-
var currentPos = cm.getCursor();
22-
var preceding = cm.getRange({line: currentPos.line, ch: 0}, currentPos);
23-
if (preceding == cmMatchToShowCompletions) {
24-
inner.list = cmCompletionChoices;
25-
}
26-
return inner;
27-
};
16+
cmEditor.focus();
17+
cmEditor.doc.setCursor({line:0, pos: -1});
2818

2919
function applyCode() {
3020
element.style.cssText = cmEditor.doc.getValue();
@@ -34,52 +24,13 @@ reset.addEventListener("click", function() {
3424
cmEditor.doc.setValue(cmInitContent);
3525
applyCode();
3626
reset.classList.add("hidden");
37-
edit.classList.remove("hidden");
3827
});
3928

40-
function selectValue() {
41-
var value = cmEditor.doc.getValue();
42-
var start = value.indexOf(":") + 1;
43-
if ((value.length > start) && (value[start] === " ")) {
44-
start++;
45-
}
46-
47-
var end = value.length - 1;
48-
if ((value.length > 0) && (value[end-1] === ";")) {
49-
end--;
50-
}
51-
52-
cmEditor.doc.setSelection(
53-
{line: 0, ch: start},
54-
{line: 0, ch: end});
55-
}
56-
57-
edit.addEventListener("click", function() {
58-
cmEditor.focus();
59-
selectValue();
60-
edit.classList.add("hidden");
29+
cmEditor.on("change", function() {
6130
reset.classList.remove("hidden");
31+
applyCode();
6232
});
6333

64-
cmEditor.on("change", applyCode);
65-
window.addEventListener("load", applyCode);
66-
67-
function showCompletions(cm, event) {
68-
var popupKeyCodes = {
69-
"9": "tab",
70-
"13": "enter",
71-
"27": "escape",
72-
"33": "pageup",
73-
"34": "pagedown",
74-
"35": "end",
75-
"36": "home",
76-
"38": "up",
77-
"40": "down"
78-
}
79-
80-
if(!popupKeyCodes[(event.keyCode || event.which).toString()]) {
81-
CodeMirror.showHint(cm, CodeMirror.hint.css, {completeSingle: false, closeOnUnfocus:false});
82-
}
83-
}
84-
85-
cmEditor.on("keyup", showCompletions);
34+
window.addEventListener("load", function() {
35+
applyCode();
36+
});

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
<body>
1515

1616
<div id="editor">
17-
<input id="edit" type="button" value="Edit" />
1817
<input id="reset" class="hidden" type="button" value="Reset" />
1918
</div>
2019

‎editable-samples/pages/border-top-color/js/border-top-color.js‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1 @@
1-
var cmInitContent = 'border-top-color: red;';
2-
3-
var cmMatchToShowCompletions = "border-top-color: ";
4-
5-
var cmCompletionChoices = [
6-
'red',
7-
'rgb(255, 128, 0)',
8-
'hsla(240, 50%, 25%, 0.75)',
9-
'#ffbb00',
10-
'currentColor',
11-
'transparent'
12-
];
1+
var cmInitContent = 'border-top-color: red;\n\n';

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
<body>
1515

1616
<div id="editor">
17-
<input id="edit" type="button" value="Edit" />
1817
<input id="reset" class="hidden" type="button" value="Reset" />
1918
</div>
2019

‎editable-samples/pages/filter/js/filter.js‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1 @@
1-
var cmInitContent = 'filter: hue-rotate(180deg);';
2-
3-
var cmMatchToShowCompletions = "filter: ";
4-
5-
var cmCompletionChoices = [
6-
'blur(5px)',
7-
'brightness(0.4)',
8-
'contrast(200%)',
9-
'drop-shadow(16px 16px 20px blue)',
10-
'grayscale(50%)',
11-
'hue-rotate(90deg)',
12-
'invert(75%)',
13-
'opacity(25%)',
14-
'saturate(30%)',
15-
'sepia(60%)'
16-
];
1+
var cmInitContent = 'filter: hue-rotate(180deg);\n\n';

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515

1616

1717
<div id="editor">
18-
<input id="edit" type="button" value="Edit" />
1918
<input id="reset" class="hidden" type="button" value="Reset" />
2019
</div>
2120

‎editable-samples/pages/font/js/font.js‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1 @@
1-
var cmInitContent = 'font: italic 1.5em cursive;';
2-
3-
var cmMatchToShowCompletions = "font: ";
4-
5-
var cmCompletionChoices = [
6-
'italic 1.5em cursive',
7-
'1.5em/1.2 courier',
8-
'small-caps bold 24px/2 sans-serif',
9-
'caption'
10-
];
1+
var cmInitContent = 'font: italic 1.5em cursive;;\n\n';

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
<body>
1515

1616
<div id="editor">
17-
<input id="edit" type="button" value="Edit" />
1817
<input id="reset" class="hidden" type="button" value="Reset" />
1918
</div>
2019

‎editable-samples/pages/transform/js/transform.js‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1 @@
1-
var cmInitContent = 'transform: skew(30deg, 20deg);';
2-
3-
var cmMatchToShowCompletions = "transform: ";
4-
5-
var cmCompletionChoices = [
6-
'scale(2, 0.5)',
7-
'rotate(0.5turn)',
8-
'skew(30deg, 20deg)',
9-
'translateX(12em)',
10-
'matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)',
11-
'translateX(100px) rotate(180deg) skew(30deg, 20deg)'
12-
];
1+
var cmInitContent = 'transform: skew(30deg, 20deg);\n\n';

0 commit comments

Comments
 (0)