Created
March 21, 2018 13:55
-
-
Save closer27/bf535be05d0a88d80156a6090b675b31 to your computer and use it in GitHub Desktop.
CodeSpitz75_w2_practice1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Github = class { | |
constructor(id, repo) { | |
this._base = `https://api.github.com/repos/${id}/${repo}/contents/`; | |
} | |
load(path) { | |
if (!this._parser) return; | |
const id = 'callback' + Github._id++; | |
const f = Github[id] = ({data:{content}})=>{ | |
delete Github[id]; | |
document.head.removeChild(s); | |
this._parser.loaded(content); | |
}; | |
const s = document.createElement('script'); | |
s.src = `${this._base + path}?callback=Github.${id}`; | |
document.head.appendChild(s); | |
} | |
setParser(v) { | |
this._parser = v; | |
} | |
}; | |
Github._id = 0; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const ImageLoader = class extends Loader { | |
constructor(target) { | |
super(target); | |
} | |
async _loaded(v){ | |
this._target.src = 'data:text/plain;base64,' + v; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<body> | |
<img id="a"> | |
<div id="b"></div> | |
<script src="Github.js"></script> | |
<script src="Loader.js"></script> | |
<script src="ImageLoader.js"></script> | |
<script src="MdLoader.js"></script> | |
<script> | |
const loader = new Github('hikaMaeng', 'codespitz75'); | |
//img | |
const img = new ImageLoader('#a'); | |
loader.setParser(img); | |
loader.load('einBig.png'); | |
//md | |
const md = new MdLoader('#b'); | |
loader.setParser(md); | |
loader.load('README.md'); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Loader = class { | |
constructor(target) { | |
this._target = document.querySelector(target); | |
console.log(this._target); | |
} | |
loaded(v) { | |
this._loaded(v); | |
} | |
_loaded(v) { | |
throw 'must be overriden'; | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const MdLoader = class extends Loader { | |
constructor(target) { | |
super(target); | |
} | |
async _loaded(v) { | |
this._target.innerHTML = this._parseMD(v); | |
} | |
_parseMD(v) { | |
return d64(v).split('\n').map(v=>{ | |
let i = 3; | |
while(i--){ | |
if(v.startsWith('#'.repeat(i + 1))) return `<h${i + 1}>${v.substr(i + 1)}</h${i + 1}>`; | |
} | |
return v; | |
}).join('<br>'); | |
} | |
}; | |
const d64 =v=>decodeURIComponent( | |
atob(v).split('').map(c=>'%' + ('00' +c.charCodeAt(0).toString(16)).slice(-2)).join('') | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1(8) : 7
2(4) : 3
ps. 전체적으로 인자에 대한 유효성 검사가 추가 되었으면 좋겠고, ImageLoader에서 해당 target이 이미지 엘리먼트인지 확인 가능하면 더욱 좋을거 같습니다.
10/12 = 83