diff --git a/index.html b/index.html index b752ca1..f19f923 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ <script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script src="js/marked.js"></script> + <script src="js/store.js"></script> <script src="js/ditto.js"></script> <script src="js/prism.js"></script> <link rel="stylesheet" href="app/bower_components/normalize-css/normalize.css"> @@ -34,7 +35,7 @@ ditto.sidebar_file = "sidebar.md", ditto.document_title = "ECMAScript 6入门", // where the docs are actually stored on github - so you can edit - ditto.base_url = "https://github.com/ruanyf/es6tutorial/edit/gh-pages/"; // <------- EDIT ME!! + ditto.base_url = "https://github.com/ruanyf/es6tutorial/edit/gh-pages"; // <------- EDIT ME!! // run ditto.run(); diff --git a/js/ditto.js b/js/ditto.js index 6f90b6b..a38ae7c 100644 --- a/js/ditto.js +++ b/js/ditto.js @@ -11,13 +11,14 @@ var ditto = { sidebar: true, edit_button: true, back_to_top_button: true, + save_progress: true, // 保存阅读进度 // initialize function run: initialize }; -var disqusCode = '<h3>留言</h3><div id="disqus_thread"></div>'; -var menu=new Array(); +var disqusCode = '<h3>留言</h3><div id="disqus_thread"></div>'; +var menu = new Array(); function initialize() { // initialize sidebar and buttons @@ -41,27 +42,27 @@ function initialize() { function init_sidebar_section() { $.get(ditto.sidebar_file, function(data) { $(ditto.sidebar_id).html(marked(data)); - // 初始化内容数组 - var menuOL = $(ditto.sidebar_id+' ol'); - menuOL.attr('start',0); + // 初始化内容数组 + var menuOL = $(ditto.sidebar_id + ' ol'); + menuOL.attr('start', 0); - menuOL.find('li a').map(function(){ - menu.push(this.href.slice(this.href.indexOf('#'))); - }); - $('#pageup').on('click',function (){ - for (var i=0;i<menu.length;i++){ - if (location.hash==='') break; - if (menu[i]===location.hash) break; - } - location.hash = menu[i-1] - }); - $('#pagedown').on('click',function (){ - for (var i=0;i<menu.length;i++){ - if (location.hash==='') break; - if (menu[i]===location.hash) break; - } - location.hash = menu[i+1]; - }); + menuOL.find('li a').map(function() { + menu.push(this.href.slice(this.href.indexOf('#'))); + }); + $('#pageup').on('click', function() { + for (var i = 0; i < menu.length; i++) { + if (location.hash === '') break; + if (menu[i] === location.hash) break; + } + location.hash = menu[i - 1] + }); + $('#pagedown').on('click', function() { + for (var i = 0; i < menu.length; i++) { + if (location.hash === '') break; + if (menu[i] === location.hash) break; + } + location.hash = menu[i + 1]; + }); }, "text").fail(function() { alert("Opps! can't find the sidebar file to display!"); }); @@ -139,20 +140,20 @@ function create_page_anchors() { $('#content h' + i).map(function() { headers.push($(this).text()); $(this).addClass(replace_symbols($(this).text())); - this.id = 'h'+i+'-'+replace_symbols($(this).text()); + this.id = 'h' + i + '-' + replace_symbols($(this).text()); }); - if ((i === 2) && headers.length !== 0){ - var ul_tag = $('<ol></ol>') - .insertAfter('#content h1') - .addClass("content-toc") - .attr('id','content-toc'); - for (var j = 0; j < headers.length; j++) { + if ((i === 2) && headers.length !== 0) { + var ul_tag = $('<ol></ol>') + .insertAfter('#content h1') + .addClass("content-toc") + .attr('id', 'content-toc'); + for (var j = 0; j < headers.length; j++) { var li_tag = $('<li></li>').text(headers[j]); - ul_tag.append(li_tag); + ul_tag.append(li_tag); li_create_linkage(li_tag, i); - } - } + } + } } } @@ -195,6 +196,11 @@ function router() { var path = location.hash.replace("#", "./"); + if (ditto.save_progress && store.get('menu-progress') !== location.hash) { + store.set('menu-progress', location.hash); + store.set('page-progress', 0); + } + // default page if hash is empty if (location.pathname === "/index.html") { path = location.pathname.replace("index.html", ditto.index); @@ -208,79 +214,80 @@ function router() { // otherwise get the markdown and render it var loading = show_loading(); - $.get(path , function(data) { + $.get(path, function(data) { $(ditto.error_id).hide(); - $(ditto.content_id).html(marked(data)+disqusCode); - if ($(ditto.content_id+" h1").text() === ditto.document_title){ - document.title = ditto.document_title; - } else { - document.title = $(ditto.content_id+" h1").text() + " - " + ditto.document_title; - } + $(ditto.content_id).html(marked(data) + disqusCode); + if ($(ditto.content_id + " h1").text() === ditto.document_title) { + document.title = ditto.document_title; + } else { + document.title = $(ditto.content_id + " h1").text() + " - " + ditto.document_title; + } normalize_paths(); create_page_anchors(); - // 完成代码高亮 - $('#content code').map(function() { + // 完成代码高亮 + $('#content code').map(function() { Prism.highlightElement(this); }); - // 加载disqus - (function () { - // http://docs.disqus.com/help/2/ - window.disqus_shortname = 'es6'; - window.disqus_identifier = (location.hash?location.hash.replace("#", ""):'READEME'); - window.disqus_title =$(ditto.content_id+" h1").text(); - window.disqus_url = 'http://es6.ruanyifeng.com/' + (location.hash?location.hash.replace("#", ""):'README'); + // 加载disqus + (function() { + // http://docs.disqus.com/help/2/ + window.disqus_shortname = 'es6'; + window.disqus_identifier = (location.hash ? location.hash.replace("#", "") : 'READEME'); + window.disqus_title = $(ditto.content_id + " h1").text(); + window.disqus_url = 'http://es6.ruanyifeng.com/' + (location.hash ? location.hash.replace("#", "") : 'README'); - // http://docs.disqus.com/developers/universal/ - (function() { - var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; - dsq.src = 'http://'+window.disqus_shortname+'.disqus.com/embed.js'; - (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); - })(); - })(); + // http://docs.disqus.com/developers/universal/ + (function() { + var dsq = document.createElement('script'); + dsq.type = 'text/javascript'; + dsq.async = true; + dsq.src = 'http://' + window.disqus_shortname + '.disqus.com/embed.js'; + (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); + })(); + })(); - if(location.hash !== ''){ - $('html, body').animate({ - scrollTop: $('#content').offset().top - }, 200); - } + if (location.hash === '' || location.hash === menu[0]) { + $('#pageup').css('display', 'none'); + } else { + $('#pageup').css('display', 'inline-block'); + } - if(location.hash==='' || location.hash===menu[0]){ - $('#pageup').css('display','none'); - }else{ - $('#pageup').css('display','inline-block'); - } + if (location.hash === menu[(menu.length - 1)]) { + $('#pagedown').css('display', 'none'); + } else { + $('#pagedown').css('display', 'inline-block'); + } - if (location.hash===menu[(menu.length-1)]){ - $('#pagedown').css('display','none'); - }else{ - $('#pagedown').css('display','inline-block'); - } + (function() { + var $w = $(window); + var $prog2 = $('.progress-indicator-2'); + var wh = $w.height(); + var h = $('body').height(); + var sHeight = h - wh; + var perc = ditto.save_progress ? store.get('page-progress') || 0 : 0; - (function(){ - var $w = $(window); - var $prog2 = $('.progress-indicator-2'); - var wh = $w.height(); - var h = $('body').height(); - var sHeight = h - wh; - $w.off('scroll'); - $w.on('scroll', function(){ - var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight)); - updateProgress(perc); - }); + $w.off('scroll').on('scroll', function() { + var perc = Math.max(0, Math.min(1, $w.scrollTop() / sHeight)); + updateProgress(perc); + }); - function updateProgress(perc){ - $prog2.css({width : perc*100 + '%'}); - } + function updateProgress(perc) { + $prog2.css({width: perc * 100 + '%'}); + ditto.save_progress && store.set('page-progress', perc); + } - }()); + updateProgress(perc); + $('html, body').animate({ + scrollTop: sHeight * perc + }, 200); + }()); }).fail(function() { show_error(); - }).always(function() { clearInterval(loading); $(ditto.loading_id).hide(); - }); + }); } diff --git a/js/store.js b/js/store.js new file mode 100644 index 0000000..915283b --- /dev/null +++ b/js/store.js @@ -0,0 +1,2 @@ +/* Copyright (c) 2010-2013 Marcus Westin */ +this.JSON||(this.JSON={}),function(){function f(e){return e<10?"0"+e:e}function quote(e){return escapable.lastIndex=0,escapable.test(e)?'"'+e.replace(escapable,function(e){var t=meta[e];return typeof t=="string"?t:"\\u"+("0000"+e.charCodeAt(0).toString(16)).slice(-4)})+'"':'"'+e+'"'}function str(e,t){var n,r,i,s,o=gap,u,a=t[e];a&&typeof a=="object"&&typeof a.toJSON=="function"&&(a=a.toJSON(e)),typeof rep=="function"&&(a=rep.call(t,e,a));switch(typeof a){case"string":return quote(a);case"number":return isFinite(a)?String(a):"null";case"boolean":case"null":return String(a);case"object":if(!a)return"null";gap+=indent,u=[];if(Object.prototype.toString.apply(a)==="[object Array]"){s=a.length;for(n=0;n<s;n+=1)u[n]=str(n,a)||"null";return i=u.length===0?"[]":gap?"[\n"+gap+u.join(",\n"+gap)+"\n"+o+"]":"["+u.join(",")+"]",gap=o,i}if(rep&&typeof rep=="object"){s=rep.length;for(n=0;n<s;n+=1)r=rep[n],typeof r=="string"&&(i=str(r,a),i&&u.push(quote(r)+(gap?": ":":")+i))}else for(r in a)Object.hasOwnProperty.call(a,r)&&(i=str(r,a),i&&u.push(quote(r)+(gap?": ":":")+i));return i=u.length===0?"{}":gap?"{\n"+gap+u.join(",\n"+gap)+"\n"+o+"}":"{"+u.join(",")+"}",gap=o,i}}typeof Date.prototype.toJSON!="function"&&(Date.prototype.toJSON=function(e){return isFinite(this.valueOf())?this.getUTCFullYear()+"-"+f(this.getUTCMonth()+1)+"-"+f(this.getUTCDate())+"T"+f(this.getUTCHours())+":"+f(this.getUTCMinutes())+":"+f(this.getUTCSeconds())+"Z":null},String.prototype.toJSON=Number.prototype.toJSON=Boolean.prototype.toJSON=function(e){return this.valueOf()});var cx=/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,escapable=/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,gap,indent,meta={"\b":"\\b"," ":"\\t","\n":"\\n","\f":"\\f","\r":"\\r",'"':'\\"',"\\":"\\\\"},rep;typeof JSON.stringify!="function"&&(JSON.stringify=function(e,t,n){var r;gap="",indent="";if(typeof n=="number")for(r=0;r<n;r+=1)indent+=" ";else typeof n=="string"&&(indent=n);rep=t;if(!t||typeof t=="function"||typeof t=="object"&&typeof t.length=="number")return str("",{"":e});throw new Error("JSON.stringify")}),typeof JSON.parse!="function"&&(JSON.parse=function(text,reviver){function walk(e,t){var n,r,i=e[t];if(i&&typeof i=="object")for(n in i)Object.hasOwnProperty.call(i,n)&&(r=walk(i,n),r!==undefined?i[n]=r:delete i[n]);return reviver.call(e,t,i)}var j;text=String(text),cx.lastIndex=0,cx.test(text)&&(text=text.replace(cx,function(e){return"\\u"+("0000"+e.charCodeAt(0).toString(16)).slice(-4)}));if(/^[\],:{}\s]*$/.test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,"@").replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,"]").replace(/(?:^|:|,)(?:\s*\[)+/g,"")))return j=eval("("+text+")"),typeof reviver=="function"?walk({"":j},""):j;throw new SyntaxError("JSON.parse")})}(),function(e){function o(){try{return r in e&&e[r]}catch(t){return!1}}var t={},n=e.document,r="localStorage",i="script",s;t.disabled=!1,t.set=function(e,t){},t.get=function(e){},t.remove=function(e){},t.clear=function(){},t.transact=function(e,n,r){var i=t.get(e);r==null&&(r=n,n=null),typeof i=="undefined"&&(i=n||{}),r(i),t.set(e,i)},t.getAll=function(){},t.forEach=function(){},t.serialize=function(e){return JSON.stringify(e)},t.deserialize=function(e){if(typeof e!="string")return undefined;try{return JSON.parse(e)}catch(t){return e||undefined}};if(o())s=e[r],t.set=function(e,n){return n===undefined?t.remove(e):(s.setItem(e,t.serialize(n)),n)},t.get=function(e){return t.deserialize(s.getItem(e))},t.remove=function(e){s.removeItem(e)},t.clear=function(){s.clear()},t.getAll=function(){var e={};return t.forEach(function(t,n){e[t]=n}),e},t.forEach=function(e){for(var n=0;n<s.length;n++){var r=s.key(n);e(r,t.get(r))}};else if(n.documentElement.addBehavior){var u,a;try{a=new ActiveXObject("htmlfile"),a.open(),a.write("<"+i+">document.w=window</"+i+'><iframe src="/favicon.ico"></iframe>'),a.close(),u=a.w.frames[0].document,s=u.createElement("div")}catch(f){s=n.createElement("div"),u=n.body}function l(e){return function(){var n=Array.prototype.slice.call(arguments,0);n.unshift(s),u.appendChild(s),s.addBehavior("#default#userData"),s.load(r);var i=e.apply(t,n);return u.removeChild(s),i}}var c=new RegExp("[!\"#$%&'()*+,/\\\\:;<=>?@[\\]^`{|}~]","g");function h(e){return e.replace(/^d/,"___$&").replace(c,"___")}t.set=l(function(e,n,i){return n=h(n),i===undefined?t.remove(n):(e.setAttribute(n,t.serialize(i)),e.save(r),i)}),t.get=l(function(e,n){return n=h(n),t.deserialize(e.getAttribute(n))}),t.remove=l(function(e,t){t=h(t),e.removeAttribute(t),e.save(r)}),t.clear=l(function(e){var t=e.XMLDocument.documentElement.attributes;e.load(r);for(var n=0,i;i=t[n];n++)e.removeAttribute(i.name);e.save(r)}),t.getAll=function(e){var n={};return t.forEach(function(e,t){n[e]=t}),n},t.forEach=l(function(e,n){var r=e.XMLDocument.documentElement.attributes;for(var i=0,s;s=r[i];++i)n(s.name,t.deserialize(e.getAttribute(s.name)))})}try{var p="__storejs__";t.set(p,p),t.get(p)!=p&&(t.disabled=!0),t.remove(p)}catch(f){t.disabled=!0}t.enabled=!t.disabled,typeof module!="undefined"&&module.exports&&this.module!==module?module.exports=t:typeof define=="function"&&define.amd?define(t):e.store=t}(Function("return this")()) \ No newline at end of file