Skip to content

Commit 7dd26b9

Browse files
code1009code1009
committed
1
1 parent 3117dff commit 7dd26b9

File tree

4 files changed

+164
-115
lines changed

4 files changed

+164
-115
lines changed

‎web/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="utf-8" />
66
<title>페이지</title>
77
<script type="text/javascript">
8-
window.location.href = "./셈말짓기/page.html";
8+
window.location.href = "./home-셈말짓기/page.html";
99
</script>
1010

1111
</head>

‎web/template-markdown/core.css‎

Lines changed: 52 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,24 +36,70 @@ body {
3636
display: flex;
3737
width: 100vw;
3838
height: 100vh;
39+
40+
margin-top: 0px;
41+
margin-bottom: 0px;
42+
margin-left: 0px;
43+
margin-right: 0px;
44+
45+
padding-top: 0px;
46+
padding-bottom: 0px;
47+
padding-left: 0px;
48+
padding-right: 0px;
49+
}
50+
51+
#resizer {
52+
width: 2px;
53+
height: 100%;
54+
background: #bdbdbd;
55+
cursor: ew-resize;
56+
transition: background 0.2s;
57+
}
58+
59+
#resizer:hover {
60+
background: #0d0deb;
3961
}
4062

4163
#information {
42-
width: 300px; /* 초기값 */
64+
width: 400px; /* 초기값 */
4365
min-width: 100px;
4466
max-width: 80vw;
4567

46-
}
68+
margin-top: 0px;
69+
margin-bottom: 0px;
70+
margin-left: 0px;
71+
margin-right: 0px;
4772

48-
#resizer {
49-
width: 5px;
50-
background: red;
51-
cursor: ew-resize;
73+
border-top: 1px solid #bdbdbd;
74+
border-bottom: 1px solid #bdbdbd;
75+
border-left: 1px solid #bdbdbd;
76+
border-right: 1px solid #bdbdbd;
77+
box-sizing: border-box;
78+
79+
padding-top: 16px;
80+
padding-bottom: 16px;
81+
padding-left: 16px;
82+
padding-right: 16px;
83+
84+
background: #fafafa;
5285
}
5386

5487
#contents {
5588
flex: 1;
5689

90+
margin-top: 0px;
91+
margin-bottom: 0px;
92+
margin-left: 0px;
93+
margin-right: 0px;
94+
95+
box-sizing: border-box;
96+
97+
padding-top: 16px;
98+
padding-bottom: 16px;
99+
padding-left: 16px;
100+
padding-right: 16px;
101+
102+
background: white;
57103
}
58104

59105
pre {

‎web/template-markdown/core.js‎

Lines changed: 111 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,61 @@ var _Core = null;
3535

3636
/////////////////////////////////////////////////////////////////////////////
3737
//===========================================================================
38-
function coreInitialize() {
39-
_Core = new Core();
38+
function resizerInitialize() {
39+
const resizer = document.getElementById("resizer");
40+
const left = document.getElementById("information");
41+
42+
if (!resizer) {
43+
return;
44+
}
45+
if (!left) {
46+
return;
47+
}
48+
49+
50+
let isResizing = false;
51+
52+
53+
resizer.addEventListener('mousedown',
54+
function (e) {
55+
isResizing = true;
56+
document.body.style.cursor = 'ew-resize';
57+
58+
document.body.style.userSelect = 'none'; // 텍스트 선택 방지
59+
}
60+
);
61+
62+
document.addEventListener('mousemove',
63+
function (e) {
64+
if (!isResizing) return;
65+
const newWidth = e.clientX - left.getBoundingClientRect().left;
66+
if (newWidth > 400 && newWidth < window.innerWidth * 0.8) {
67+
left.style.width = newWidth + 'px';
68+
}
69+
}
70+
);
4071

72+
document.addEventListener('mouseup',
73+
function () {
74+
if (isResizing) {
75+
document.body.style.cursor = '';
76+
77+
document.body.style.userSelect = ''; // 텍스트 선택 방지 원래대로 복원
78+
}
79+
80+
isResizing = false;
81+
}
82+
);
83+
}
84+
85+
function informationInitialize() {
4186
const information = document.getElementById("information");
87+
if (!information) {
88+
return;
89+
}
90+
4291
information.innerHTML =
43-
`
92+
`
4493
<p style="text-align: center;"><img src="../logo.png" style="border:2px solid #bdbdbd; border-radius:120px;" /></p>
4594
<br />
4695
@@ -73,17 +122,73 @@ function coreInitialize() {
73122
</svg>
74123
<a href="https://github.com/code1009"><b>https://github.com/code1009/</b></a><br />
75124
76-
`
125+
`
77126
;
78-
127+
}
128+
129+
function information_setHeight() {
79130
const documentHeight = Math.max(
80131
document.body.scrollHeight,
81132
document.documentElement.scrollHeight,
82133
document.body.offsetHeight,
83134
document.documentElement.offsetHeight,
84135
document.body.clientHeight,
85136
document.documentElement.clientHeight
86-
);
137+
);
87138

88139
information.style.minHeight = documentHeight + 'px';
89140
}
141+
142+
function loadShowdownScript(callback) {
143+
var script = document.createElement('script');
144+
script.src = "https://cdn.jsdelivr.net/npm/showdown/dist/showdown.min.js";
145+
script.type = "text/javascript";
146+
script.onload = callback;
147+
document.head.appendChild(script);
148+
}
149+
150+
function renderMarkdwon(markdown_view_id, markdown_url) {
151+
var xmlhttp = new XMLHttpRequest();
152+
xmlhttp.onreadystatechange =
153+
function () {
154+
if (this.readyState == 4 && this.status == 200) {
155+
const markdown = this.responseText;
156+
//marked
157+
//const html = marked.parse(markdown); // marked
158+
//showdown
159+
const converter = new showdown.Converter();
160+
const html = converter.makeHtml(markdown);
161+
document.getElementById(markdown_view_id).innerHTML = html;
162+
}
163+
}
164+
;
165+
xmlhttp.open("GET", markdown_url, true);
166+
xmlhttp.send();
167+
}
168+
169+
function page_renderMarkdwon() {
170+
const markdown_view = document.getElementById("markdown_view");
171+
if (!markdown_view) {
172+
return;
173+
}
174+
175+
loadShowdownScript(
176+
function () {
177+
renderMarkdwon("markdown_view", "./page.md");
178+
}
179+
);
180+
}
181+
182+
183+
184+
185+
186+
/////////////////////////////////////////////////////////////////////////////
187+
//===========================================================================
188+
function coreInitialize() {
189+
_Core = new Core();
190+
191+
informationInitialize();
192+
193+
resizerInitialize();
194+
}

‎web/template-markdown/page.html‎

Lines changed: 0 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -30,110 +30,8 @@
3030
<div id="resizer"></div>
3131

3232
<div id="contents">
33-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
34-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
35-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
36-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
37-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
38-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
39-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
40-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
41-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
42-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
43-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
44-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
45-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
46-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
47-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
48-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
49-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
50-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
51-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
52-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
53-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
54-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
55-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
56-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
57-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
58-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
59-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
60-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
61-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
62-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
63-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
64-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
65-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
66-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
67-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
68-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
69-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
70-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
71-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
72-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
73-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
74-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
75-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
76-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
7733
<div id="markdown_view">
7834
</div>
79-
80-
<script>
81-
82-
function renderMarkdwon(markdown_view_id, markdown_url) {
83-
var xmlhttp = new XMLHttpRequest();
84-
xmlhttp.onreadystatechange =
85-
function () {
86-
if (this.readyState == 4 && this.status == 200) {
87-
const markdown = this.responseText;
88-
//marked
89-
//const html = marked.parse(markdown); // marked
90-
//showdown
91-
const converter = new showdown.Converter();
92-
const html = converter.makeHtml(markdown);
93-
document.getElementById(markdown_view_id).innerHTML = html;
94-
}
95-
}
96-
;
97-
xmlhttp.open("GET", markdown_url, true);
98-
xmlhttp.send();
99-
}
100-
101-
renderMarkdwon("markdown_view", "./page.md");
102-
103-
104-
window.addEventListener('DOMContentLoaded',
105-
function () {
106-
const resizer = document.getElementById("resizer");
107-
const left = document.getElementById("information");
108-
let isResizing = false;
109-
110-
resizer.addEventListener('mousedown',
111-
function (e) {
112-
isResizing = true;
113-
document.body.style.cursor = 'ew-resize';
114-
}
115-
);
116-
117-
document.addEventListener('mousemove',
118-
function (e) {
119-
if (!isResizing) return;
120-
const newWidth = e.clientX - left.getBoundingClientRect().left;
121-
if (newWidth > 100 && newWidth < window.innerWidth * 0.8) {
122-
left.style.width = newWidth + 'px';
123-
}
124-
}
125-
);
126-
127-
document.addEventListener('mouseup',
128-
function () {
129-
isResizing = false;
130-
document.body.style.cursor = '';
131-
}
132-
);
133-
}
134-
);
135-
136-
</script>
13735
</div>
13836

13937
</div>

0 commit comments

Comments
 (0)