Skip to content
This repository was archived by the owner on Jun 5, 2018. It is now read-only.

Commit 3397dec

Browse files
committed
完成基础功能
1 parent d92ea89 commit 3397dec

File tree

4 files changed

+87
-71
lines changed

4 files changed

+87
-71
lines changed

README.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,11 @@ Powered by:
6565
- [base64.js][] Base64 implementation for JavaScript
6666
- [CodeMirror][] In-browser code editor
6767
- [polyfill.io][] Upgrade the web. Automatically
68+
- [highlight.js][] Javascript syntax highlighter
6869
- [normalize.css][] A modern alternative to CSS resets
69-
- [material-design-icons][] Material Design icons by Google
70+
- [code-mirror-themes][] A large collection of Code Mirror themes for your coding pleasure
71+
- [github-markdown-css][] The minimal amount of CSS to replicate the GitHub Markdown style
72+
- [PowJS][] Power ECMAScript 6 Template Engine DOM tree based
7073

7174
## LICENSE
7275

@@ -85,5 +88,8 @@ that can be found in the LICENSE file.
8588
[polyfill.io]: https://polyfill.io
8689
[GoDocu]: https://github.com/golang-china/godocu
8790
[normalize.css]: https://github.com/necolas/normalize.css
88-
[material-design-icons]: https://github.com/google/material-design-icons
89-
[Github REST API v3]: https://developer.github.com/v3/
91+
[code-mirror-themes]: https://github.com/FarhadG/code-mirror-themes
92+
[Github REST API v3]: https://developer.github.com/v3/
93+
[PowJS]: https://github.com/powjs/powjs
94+
[highlight.js]: https://github.com/isagalaev/highlight.js
95+
[github-markdown-css]: https://github.com/sindresorhus/github-markdown-css

css/index.css

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ html{
33
}
44

55
body {
6-
padding: 0 1rem;
6+
padding: 0;
77
height:100%;
88
tab-size: 2rem;
99
background-color: #EBEDEF;
@@ -15,7 +15,9 @@ header {
1515
font-size: 1.5rem;
1616
width: 100%;
1717
height: 3rem;
18-
line-height: 2rem;
18+
line-height: 3rem;
19+
color: rgba(255,255,255,0.75);
20+
background-color: #24292e;
1921
}
2022
header > span{
2123
font-weight: lighter;
@@ -41,6 +43,7 @@ header::after{
4143
}
4244

4345
main {
46+
padding: 0 1rem;
4447
box-sizing: border-box;
4548
height: calc(100vh - 5rem);
4649
display: flex;
@@ -52,8 +55,8 @@ main {
5255

5356
footer {
5457
display: block;
55-
margin: 1rem -2rem;
56-
min-height: 2rem;
58+
margin: 1rem 0;
59+
min-height: 5rem;
5760
background-color: #26A69A;
5861
text-align: center;
5962
line-height: 2rem;
@@ -79,6 +82,8 @@ dd {
7982
overflow-y: scroll;
8083
}
8184

85+
.CodeMirror{height: auto;}
86+
8287
#preview{
8388
display: none;
8489
overflow-y: scroll;
@@ -91,22 +96,6 @@ main.preview > #editor-container {
9196
display: none;
9297
}
9398

94-
.ace-twilight .ace_gutter {opacity: 0.3;}
95-
.ace_editor{
96-
}
97-
.ace_scrollbar{
98-
background-color: #272822;
99-
}
100-
.ace_status-indicator {
101-
color: #272822;
102-
position: absolute;
103-
left: 0;
104-
min-width: 3rem;
105-
font-size: 1.2rem;
106-
bottom: -1em;
107-
border-bottom: 1px solid;
108-
}
109-
11099
.markdown-body pre{
111100
background: #002b36;
112101
}

index.html

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,20 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
66
<meta name="viewport" content="width=device-width">
77
<title>GoHub</title>
8-
<!-- <script src="//cdn.polyfill.io/v2/polyfill.min.js"></script> -->
8+
<script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>
99
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
1010
<link href='//unpkg.com/normalize.css' rel='stylesheet'>
11-
<link href="//unpkg.com/[email protected]/iconfont/material-icons.css" rel='stylesheet'>
1211
<link href="//unpkg.com/[email protected]/github-markdown.css" rel='stylesheet'>
1312
<!-- <script src="//unpkg.com/[email protected]/dist/receptor.js"></script> -->
1413
<!-- <script src="//unpkg.com/interactjs/dist/interact.min.js"></script> -->
15-
<script src="https://bundle.run/[email protected]"></script>
14+
<!-- <script src="https://bundle.run/[email protected]"></script> -->
1615

1716
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css" rel="stylesheet">
1817
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
1918
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/go.min.js"></script>
2019

20+
<link href="//farhadg.github.io/code-mirror-themes/themes/chrome-devtools.css" rel="stylesheet">
2121
<link href="//unpkg.com/[email protected]/lib/codemirror.css" rel='stylesheet'>
22-
<link href="//unpkg.com/[email protected]/theme/twilight.css" rel='stylesheet'>
2322
<script src="//unpkg.com/[email protected]/lib/codemirror.js"></script>
2423
<script src="//unpkg.com/[email protected]/keymap/sublime.js"></script>
2524
<script src="//unpkg.com/[email protected]/addon/fold/foldcode.js"></script>
@@ -35,8 +34,6 @@
3534
<body>
3635
<header>
3736
<span>gohub://</span><code></code>
38-
<i class="material-icons" aria-label="Close">close</i>
39-
<i class="material-icons" aria-label="Search">search</i>
4037
</header>
4138
<main>
4239
<div id="panel"></div>
@@ -50,7 +47,8 @@
5047
open
5148
let="ctx=data.content"
5249
sha="{{data.sha}}"
53-
repo="{{ctx.Repo}}"
50+
origin="{{ctx.Repo}}"
51+
repo="{{data.owner}}/{{data.repo}}"
5452
subdir="{{ctx.Subdir||''}}"
5553
filename="{{ctx.Filename}}"
5654
render=":ctx"

js/script.js

Lines changed: 64 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@
4242
return fetch(`${api}/${path}`).then(
4343
(resp)=>this.normalize(resp)
4444
).catch(data=>{
45-
console.log(data);
46-
sel('header > code')
47-
.textContent = data.statusText + ' ' + data.url;
45+
document.dispatchEvent(
46+
new CustomEvent('gohub-catch', {detail: data })
47+
);
4848
return data;
4949
});
5050
}
@@ -67,19 +67,22 @@
6767
slice(1).toLowerCase(),
6868
text = Base64.decode(json.content),
6969
content = ext === 'json' &&
70-
JSON.parse(text) || text;
71-
72-
return storeCache(
73-
url, {
74-
owner, repo,
75-
name: json.name,
76-
url: json.html_url,
77-
sha: json.sha,
78-
path,
79-
ext,
80-
content,
81-
}
70+
JSON.parse(text) || text,
71+
data = storeCache(
72+
url, {
73+
owner, repo,
74+
name: json.name,
75+
url: json.html_url,
76+
sha: json.sha,
77+
path,
78+
ext,
79+
content,
80+
}
81+
);
82+
document.dispatchEvent(
83+
new CustomEvent('gohub-got', {detail: data })
8284
);
85+
return data;
8386
});
8487
}
8588
}
@@ -88,7 +91,9 @@
8891
if (!owner) return gohub.prototype;
8992
return new gohub(owner, repo);
9093
};
94+
}(this));
9195

96+
(function (global) {
9297
global.all = function (s, node) {
9398
return (node || document).querySelectorAll(s);
9499
};
@@ -98,39 +103,53 @@
98103
};
99104

100105
global.on = function (type, listener, useCapture) {
101-
let node = this instanceof Node && this || document.body;
106+
let node = this instanceof Node && this || document;
102107
node.addEventListener(type, listener, useCapture);
103108
};
104109

105110
global.emit = function (type, detail) {
106-
let node = this instanceof Node && this || document.body;
111+
let node = this instanceof Node && this || document;
107112
node.dispatchEvent(
108113
new CustomEvent(type, {detail: detail })
109114
);
110115
};
111-
112116
global.is = {
113117
array:(v)=>Array.isArray(v),
114118
object:(v)=>Object.prototype.toString.call(v) === '[object Object]',
115119
string:(v)=>typeof v === 'string',
116120
};
117-
118121
}(this));
122+
119123
(function (global) {
120124
let tmpl = PowJS(sel('template'));
121125

122126
on.call(sel('#panel'), 'update', (event)=> {
123127
tmpl.render(event.detail).removeChilds();
124128
});
129+
125130
on.call(sel('#panel'), 'click',(event)=> {
126-
let target = event.target;
127-
if (target.matches('summary')) {
128-
if (target.nextElementSibling) return;
129-
let repo = target.closest('details').getAttribute('repo');
130-
gohub(repo).list().then(data=>tmpl.render(data).removeChilds());
131+
let
132+
repo, path, target = event.target;
133+
if (target.matches('summary')){
134+
repo = !target.nextElementSibling && getRepo(target);
135+
path = 'contents/golist.json';
136+
}else if (target.matches('p')) {
137+
repo = getRepo(target);
138+
path = getContentPath(target);
131139
}
140+
if(repo) gohub(repo).get(path||'');
132141
});
142+
143+
function getRepo(n) {
144+
return n.closest('details').getAttribute('repo');
145+
}
146+
147+
function getContentPath(n) {
148+
let p = n.closest('details');
149+
return `contents/${p.getAttribute('subdir')}/${n.textContent}/${p.getAttribute('filename')}`;
150+
}
133151
}(this));
152+
134153
(function (global) {
135154

136155
let
@@ -145,8 +164,9 @@
145164
autoCloseBrackets: true,
146165
matchBrackets: true,
147166
showCursorWhenSelecting: true,
148-
theme: "twilight",
149-
tabSize: 2
167+
theme: "chrome-devtools",
168+
tabSize: 2,
169+
readOnly: true
150170
}),
151171
split = {};
152172

@@ -159,26 +179,29 @@
159179
});
160180

161181
CodeMirror.modeURL = '//unpkg.com/[email protected]/mode/%N/%N.js';
162-
CodeMirror.autoLoadMode(editor,'go');
182+
CodeMirror.autoLoadMode(editor, 'go');
163183

164-
if (location.hostname !== 'localhost')
165-
global.addEventListener('beforeunload', function (e) {
166-
e.returnValue = '\o/';
167-
});
184+
// if (location.hostname !== 'localhost')
185+
// global.addEventListener('beforeunload', function (e) {
186+
// e.returnValue = '\o/';
187+
// });
168188

169-
let gh = gohub('gohub/gohub.github.io');
189+
on('gohub-got', event=>render(event.detail));
170190

171-
fetch('/README.md?'+Date.now()).then((resp)=>{
172-
return resp.text().then((content)=>(
173-
{content,ext: 'md',url:'README.md'}
174-
)).then(data =>render(data));
175-
});
191+
on('gohub-catch', (event)=>{
192+
sel('header code').textContent =
193+
event.detail.statusText + ': ' + event.detail.url;
194+
}, true);
195+
196+
let gh = gohub('gohub/gohub.github.io');
176197

177-
gh.list().then(data =>render(data));
198+
gh.readme();
199+
gh.list();
178200

179201
function render(data) {
180202
let content = data && data.content;
181-
if(!content) return;
203+
if(!content)
204+
return console.log('Oop!');
182205

183206
if (typeof content !== 'string')
184207
return emit.call(sel('#panel'), 'update', data);
@@ -193,9 +216,9 @@
193216
preview.querySelectorAll('pre code[class*=lang-]')
194217
.forEach((e)=>hljs.highlightBlock(e));
195218
} else {
196-
editor.setValue(content);
197-
editor.focus();
198219
main.setAttribute('class','');
220+
editor.focus();
221+
editor.setValue(content);
199222
}
200223
}
201224

0 commit comments

Comments
 (0)