gh-pages

es6-org · Aug 16, 2015 · 62128fc · 62128fc
1 parent bcf9a5e
commit 62128fc
Show file tree

Hide file tree

Showing 8 changed files with 846 additions and 0 deletions.
diff --git a/css/github-markdown.css b/css/github-markdown.css
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,74 @@
+html, body {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+.markdown-body {
+    height: 100%;
+}
+.index {
+    width: 360px;
+    overflow-x: auto;
+    background: #eee;
+    position: absolute;
+    top: 100px;
+    left: 0;
+    bottom: 0;
+}
+.index a.current {
+    color: red;
+}
+.content {
+    position: absolute;
+    left: 375px;
+    right: 0;
+    top: 100px;
+    bottom: 0;
+    overflow-y: auto;
+}
+
+.layer {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+.layer .cover {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0.5;
+    background: #000;
+}
+.layer .tip {
+    color: white;
+    font-size: 20px;
+    height: 40px;
+    line-height: 40px;
+    font-weight: bold;
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    margin-top: -20px;
+    width: 100%;
+}
+
+.head {
+    height: 100px;
+    line-height: 100px;
+    padding: 0 20px;
+    border-bottom: 1px solid #ddd;
+}
+.book-name {
+    font-size: 40px;
+    font-weight: bold;
+    margin-right: 30px;
+}
+.project-location {
+    float: right;
+    font-weight: bold;
+    font-size: 30px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>探索 ES6</title>
+    <link rel="stylesheet" type="text/css" href="./css/github-markdown.css">
+    <link rel="stylesheet" type="text/css" href="./js/highlight/default.min.css">
+    <link rel="stylesheet" type="text/css" href="./css/index.css">
+</head>
+<body class="markdown-body">
+    <div class="head">
+        <span class="book-name">探索 ES6</span> 翻译自<a href="https://leanpub.com/exploring-es6/read">《 Exploring ES6 》</a>
+        <a class="project-location" href="https://github.com/es6-org/exploring-es6">GitHub</a>
+    </div>
+    <div class="index"></div>
+    <div class="content"></div>
+    <script src="./js/marked.min.js"></script>
+    <script src="./js/highlight/highlight.min.js"></script>
+    <script src="./js/jquery-2.1.4.min.js"></script>
+    <script src="./js/index.js"></script>
+</body>
+</html>
diff --git a/js/highlight/default.min.css b/js/highlight/default.min.css
diff --git a/js/highlight/highlight.min.js b/js/highlight/highlight.min.js
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,89 @@
+$(document).ready(init);
+
+function init() {
+    marked.setOptions({
+        highlight: function (code) {
+            return hljs.highlightAuto(code).value;
+        }
+    });
+
+    renderIndex().then(function () {
+        toIndex(window.location.hash, true);
+    });
+}
+
+function renderIndex() {
+    return $.ajax({
+        url: './md/index.md',
+        async: true
+    }).then(function (data) {
+        marked(data, function (err, content) {
+            $('.index').html(content);
+            bindIndexEvents();
+        });
+    });
+}
+
+function bindIndexEvents() {
+    $('.index a').on('click', function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        window.location.hash = $(event.target).attr('href');
+        toIndex(window.location.hash);
+    });
+}
+
+function toIndex(hash, isInit) {
+    hash = hash.replace(/^#/, '');
+    var $curLink = $('.index a[href="' + hash + '"]');
+    if (!$curLink.length) {
+        return;
+    }
+
+    $('.index a.current').removeClass('current');
+    $curLink.addClass('current');
+
+    if ($curLink[0].scrollIntoView && isInit) {
+        $curLink[0].scrollIntoView();
+    }
+
+    getContent(hash);
+}
+
+function getContent(mdUrl) {
+    if (!mdUrl) {
+        return;
+    }
+    addLoadingLayer();
+    $.ajax({
+        url: './md/' + mdUrl.replace(/^\.\//, ''),
+        async: true
+    }).done(function (data) {
+        marked(data, function (err, content) {
+            $('.content').html(content);
+            removeLayer();
+        });
+    });
+}
+
+function addLoadingLayer() {
+    if (addLoadingLayer.$layer) {
+        return;
+    }
+    var $layer = $([
+        '<div class="layer">',
+            '<div class="cover"></div>',
+            '<div class="tip">加载中...</div>',
+        '</div>'
+    ].join(''));
+    $('body').append($layer);
+    addLoadingLayer.$layer = $layer;
+}
+
+function removeLayer() {
+    if (addLoadingLayer.$layer) {
+        addLoadingLayer.$layer.remove();
+        addLoadingLayer.$layer = undefined;
+    }
+}
diff --git a/js/jquery-2.1.4.min.js b/js/jquery-2.1.4.min.js