Mercurial
comparison .cms/lib/codemirror/demo/folding.html @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:78edf6b517a0 |
---|---|
1 <!doctype html> | |
2 | |
3 <head> | |
4 <title>CodeMirror: Code Folding Demo</title> | |
5 <meta charset="utf-8"/> | |
6 <link rel=stylesheet href="../doc/docs.css"> | |
7 | |
8 <style> | |
9 .some-css { | |
10 color: red; | |
11 line-height: 2; | |
12 } | |
13 </style> | |
14 | |
15 <link rel="stylesheet" href="../lib/codemirror.css"> | |
16 <link rel="stylesheet" href="../addon/fold/foldgutter.css" /> | |
17 <script src="../lib/codemirror.js"></script> | |
18 <script src="../addon/fold/foldcode.js"></script> | |
19 <script src="../addon/fold/foldgutter.js"></script> | |
20 <script src="../addon/fold/brace-fold.js"></script> | |
21 <script src="../addon/fold/xml-fold.js"></script> | |
22 <script src="../addon/fold/indent-fold.js"></script> | |
23 <script src="../addon/fold/markdown-fold.js"></script> | |
24 <script src="../addon/fold/comment-fold.js"></script> | |
25 <script src="../mode/javascript/javascript.js"></script> | |
26 <script src="../mode/xml/xml.js"></script> | |
27 <script src="../mode/css/css.js"></script> | |
28 <script src="../mode/htmlmixed/htmlmixed.js"></script> | |
29 <script src="../mode/python/python.js"></script> | |
30 <script src="../mode/markdown/markdown.js"></script> | |
31 <style> | |
32 .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} | |
33 </style> | |
34 </head> | |
35 | |
36 <body> | |
37 <div id=nav> | |
38 <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> | |
39 | |
40 <ul> | |
41 <li><a href="../index.html">Home</a> | |
42 <li><a href="../doc/manual.html">Manual</a> | |
43 <li><a href="https://github.com/codemirror/codemirror5">Code</a> | |
44 </ul> | |
45 <ul> | |
46 <li><a class=active href="#">Code Folding</a> | |
47 </ul> | |
48 </div> | |
49 | |
50 <article> | |
51 <h2>Code Folding Demo</h2> | |
52 <form> | |
53 <div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br> | |
54 <textarea id="code" name="code"></textarea></div> | |
55 <div style="max-width: 50em; margin-bottom: 1em">HTML:<br> | |
56 <textarea id="code-html" name="code-html"></textarea></div> | |
57 <div style="max-width: 50em; margin-bottom: 1em">JSON with custom widget:<br> | |
58 <textarea id="code-json" name="code-json"> | |
59 { | |
60 "menu": { | |
61 "id": "file", | |
62 "value": "File", | |
63 "popup": { | |
64 "menuitem": [ | |
65 {"value": "New", "onclick": "CreateNewDoc()"}, | |
66 {"value": "Open", "onclick": "OpenDoc()"}, | |
67 {"value": "Close", "onclick": "CloseDoc()"} | |
68 ] | |
69 } | |
70 } | |
71 } | |
72 </textarea></div> | |
73 <div style="max-width: 50em">Python:<br> | |
74 <textarea id="code-python" name="code"> | |
75 def foo(): | |
76 do_some_stuff() | |
77 here | |
78 return None | |
79 | |
80 class Bar: | |
81 __init__(self): | |
82 if True: | |
83 print("True") | |
84 else: | |
85 print("False") | |
86 | |
87 this_code_makes_no_sense(): | |
88 pass | |
89 | |
90 # A comment</textarea></div> | |
91 <div style="max-width: 50em">Markdown:<br> | |
92 <textarea id="code-markdown" name="code"></textarea></div> | |
93 </form> | |
94 <script id="script"> | |
95 /* | |
96 * Demonstration of code folding | |
97 */ | |
98 window.onload = function() { | |
99 var te = document.getElementById("code"); | |
100 var sc = document.getElementById("script"); | |
101 te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, ""); | |
102 sc.innerHTML = ""; | |
103 var te_html = document.getElementById("code-html"); | |
104 te_html.value = document.documentElement.innerHTML; | |
105 var te_python = document.getElementById("code-python"); | |
106 var te_markdown = document.getElementById("code-markdown"); | |
107 te_markdown.value = "# Foo\n## Bar\n\nblah blah\n\n## Baz\n\nblah blah\n\n# Quux\n\nblah blah\n" | |
108 var te_json = document.getElementById("code-json"); | |
109 | |
110 window.editor = CodeMirror.fromTextArea(te, { | |
111 mode: "javascript", | |
112 lineNumbers: true, | |
113 lineWrapping: true, | |
114 extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, | |
115 foldGutter: true, | |
116 gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] | |
117 }); | |
118 editor.foldCode(CodeMirror.Pos(13, 0)); | |
119 | |
120 window.editor_json = CodeMirror.fromTextArea(te_json, { | |
121 mode: {name: "javascript", json: true}, | |
122 lineNumbers: true, | |
123 lineWrapping: true, | |
124 extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, | |
125 foldGutter: true, | |
126 gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], | |
127 foldOptions: { | |
128 widget: (from, to) => { | |
129 var count = undefined; | |
130 | |
131 // Get open / close token | |
132 var startToken = '{', endToken = '}'; | |
133 var prevLine = window.editor_json.getLine(from.line); | |
134 if (prevLine.lastIndexOf('[') > prevLine.lastIndexOf('{')) { | |
135 startToken = '[', endToken = ']'; | |
136 } | |
137 | |
138 // Get json content | |
139 var internal = window.editor_json.getRange(from, to); | |
140 var toParse = startToken + internal + endToken; | |
141 | |
142 // Get key count | |
143 try { | |
144 var parsed = JSON.parse(toParse); | |
145 count = Object.keys(parsed).length; | |
146 } catch(e) { } | |
147 | |
148 return count ? `\u21A4${count}\u21A6` : '\u2194'; | |
149 } | |
150 } | |
151 }); | |
152 editor_json.foldCode(CodeMirror.Pos(5, 0)); | |
153 | |
154 window.editor_html = CodeMirror.fromTextArea(te_html, { | |
155 mode: "text/html", | |
156 lineNumbers: true, | |
157 lineWrapping: true, | |
158 extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, | |
159 foldGutter: true, | |
160 gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] | |
161 }); | |
162 editor_html.foldCode(CodeMirror.Pos(0, 0)); | |
163 editor_html.foldCode(CodeMirror.Pos(34, 0)); | |
164 | |
165 window.editor_python = CodeMirror.fromTextArea(te_python, { | |
166 mode: "python", | |
167 lineNumbers: true, | |
168 extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, | |
169 foldGutter: true, | |
170 gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] | |
171 }); | |
172 | |
173 window.editor_markdown = CodeMirror.fromTextArea(te_markdown, { | |
174 mode: "markdown", | |
175 lineNumbers: true, | |
176 lineWrapping: true, | |
177 extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, | |
178 foldGutter: true, | |
179 gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] | |
180 }); | |
181 }; | |
182 </script> | |
183 </article> | |
184 </body> |