initial code push
This commit is contained in:
mage
@@ -0,0 +1,4 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
components
|
||||
reports
|
||||
@@ -0,0 +1,100 @@
|
||||
module.exports = function(grunt) {
|
||||
grunt.initConfig({
|
||||
info: grunt.file.readJSON('component.json'),
|
||||
meta: {
|
||||
banner: '/*!\n'+
|
||||
' * <%= info.name %> - <%= info.description %>\n'+
|
||||
' * v<%= info.version %>\n'+
|
||||
' * <%= info.homepage %>\n'+
|
||||
' * copyright <%= info.copyright %> <%= grunt.template.today("yyyy") %>\n'+
|
||||
' * <%= info.license %> License\n'+
|
||||
'*/\n'
|
||||
},
|
||||
jshint: {
|
||||
main: [
|
||||
'grunt.js',
|
||||
'component.json',
|
||||
'lib/**/*.js',
|
||||
'test/*.js'
|
||||
]
|
||||
},
|
||||
concat: {
|
||||
options: {
|
||||
banner: '<%= meta.banner %>'
|
||||
},
|
||||
dist: {
|
||||
src: 'lib/toc.js',
|
||||
dest: 'dist/jquery.toc.js'
|
||||
}
|
||||
},
|
||||
uglify: {
|
||||
options: {
|
||||
banner: '<%= meta.banner %>'
|
||||
},
|
||||
dist: {
|
||||
src: 'dist/jquery.toc.js',
|
||||
dest: 'dist/jquery.toc.min.js'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
main: {
|
||||
files: '<%= jshint.main %>',
|
||||
tasks: 'default'
|
||||
},
|
||||
ci: {
|
||||
files: [
|
||||
'<%= jshint.main %>',
|
||||
'test/index.html'
|
||||
],
|
||||
tasks: ['default', 'mocha']
|
||||
}
|
||||
},
|
||||
mocha: {
|
||||
all: {
|
||||
src: 'test/index.html',
|
||||
options: {
|
||||
run: true
|
||||
}
|
||||
}
|
||||
},
|
||||
plato: {
|
||||
main: {
|
||||
files: {
|
||||
'reports': ['lib/*.js']
|
||||
}
|
||||
}
|
||||
},
|
||||
reloadr: {
|
||||
test: [
|
||||
'example/*',
|
||||
'test/*',
|
||||
'dist/*'
|
||||
]
|
||||
},
|
||||
connect: {
|
||||
server:{
|
||||
port: 8000,
|
||||
base: '.'
|
||||
},
|
||||
plato: {
|
||||
port: 8000,
|
||||
base: 'reports',
|
||||
options: {
|
||||
keepalive: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-concat');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-connect');
|
||||
grunt.loadNpmTasks('grunt-mocha');
|
||||
grunt.loadNpmTasks('grunt-reloadr');
|
||||
grunt.loadNpmTasks('grunt-plato');
|
||||
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
|
||||
grunt.registerTask('dev', ['connect:server', 'reloadr', 'watch:main']);
|
||||
grunt.registerTask('ci', ['connect:server', 'watch:ci']);
|
||||
grunt.registerTask('reports', ['plato', 'connect:plato']);
|
||||
};
|
||||
@@ -0,0 +1,46 @@
|
||||
|
||||
0.1.2 / 2013-04-08
|
||||
==================
|
||||
|
||||
* optimized scroll function. fixes #15
|
||||
* migrated to grunt for building
|
||||
* fixed tabs on docs/index
|
||||
|
||||
0.1.1 / 2012-10-05
|
||||
==================
|
||||
|
||||
* updated example
|
||||
* code cleanup, fixed onHighlight, removed console.log
|
||||
* Add headerText and itemClass options
|
||||
|
||||
0.1.0 / 2012-07-05
|
||||
==================
|
||||
|
||||
* added smoosh to Makefile
|
||||
* updated docs
|
||||
* removed site submodule
|
||||
* Added callback for when a new section is highlighted
|
||||
* selected event
|
||||
* adds another option to customize the header link text
|
||||
* updated site
|
||||
|
||||
0.0.3 / 2012-04-06
|
||||
==================
|
||||
|
||||
* fixed smooth scrolling in firefox
|
||||
* fixed copyright typo
|
||||
|
||||
0.0.2 / 2012-03-09
|
||||
==================
|
||||
|
||||
* Issue [#2](https://github.com/jgallen23/toc/issues/2 "Issue #2")
|
||||
* updated site
|
||||
* 0.0.2 - updated docs
|
||||
|
||||
0.0.1 / 2012-02-25
|
||||
==================
|
||||
|
||||
* updated docs/site
|
||||
* added readme
|
||||
* got everything working
|
||||
* initial commit
|
||||
@@ -0,0 +1,22 @@
|
||||
(The MIT License)
|
||||
|
||||
Copyright (c) 2013 Greg Allen
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
'Software'), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
@@ -0,0 +1,5 @@
|
||||
#TOC
|
||||
|
||||
[TOC](http://projects.jga.me/toc/) is a jQuery plugin for automatically generating a table of contents.
|
||||
|
||||
For more information, check out the [documentation](http://projects.jga.me/toc/).
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "toc",
|
||||
"description": "jQuery Table of Contents Plugin",
|
||||
"version": "0.1.2",
|
||||
"homepage": "http://projects.jga.me/toc/",
|
||||
"license": "MIT",
|
||||
"copyright": "Greg Allen",
|
||||
"main": "dist/toc.js",
|
||||
"dependencies": {
|
||||
},
|
||||
"devDependencies": {
|
||||
"assert": "*"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
/*!
|
||||
* toc - jQuery Table of Contents Plugin
|
||||
* v0.1.2
|
||||
* http://projects.jga.me/toc/
|
||||
* copyright Greg Allen 2013
|
||||
* MIT License
|
||||
*/
|
||||
(function($) {
|
||||
$.fn.toc = function(options) {
|
||||
var self = this;
|
||||
var opts = $.extend({}, jQuery.fn.toc.defaults, options);
|
||||
|
||||
var container = $(opts.container);
|
||||
var headings = $(opts.selectors, container);
|
||||
var headingOffsets = [];
|
||||
var activeClassName = opts.prefix+'-active';
|
||||
|
||||
var scrollTo = function(e) {
|
||||
if (opts.smoothScrolling) {
|
||||
e.preventDefault();
|
||||
var elScrollTo = $(e.target).attr('href');
|
||||
var $el = $(elScrollTo);
|
||||
|
||||
$('body,html').animate({ scrollTop: $el.offset().top }, 400, 'swing', function() {
|
||||
location.hash = elScrollTo;
|
||||
});
|
||||
}
|
||||
$('li', self).removeClass(activeClassName);
|
||||
$(e.target).parent().addClass(activeClassName);
|
||||
};
|
||||
|
||||
//highlight on scroll
|
||||
var timeout;
|
||||
var highlightOnScroll = function(e) {
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
timeout = setTimeout(function() {
|
||||
var top = $(window).scrollTop(),
|
||||
highlighted;
|
||||
for (var i = 0, c = headingOffsets.length; i < c; i++) {
|
||||
if (headingOffsets[i] >= top) {
|
||||
$('li', self).removeClass(activeClassName);
|
||||
highlighted = $('li:eq('+(i-1)+')', self).addClass(activeClassName);
|
||||
opts.onHighlight(highlighted);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, 50);
|
||||
};
|
||||
if (opts.highlightOnScroll) {
|
||||
$(window).bind('scroll', highlightOnScroll);
|
||||
highlightOnScroll();
|
||||
}
|
||||
|
||||
return this.each(function() {
|
||||
//build TOC
|
||||
var el = $(this);
|
||||
var ul = $('<ul/>');
|
||||
headings.each(function(i, heading) {
|
||||
var $h = $(heading);
|
||||
headingOffsets.push($h.offset().top - opts.highlightOffset);
|
||||
|
||||
//add anchor
|
||||
var anchor = $('<span/>').attr('id', opts.anchorName(i, heading, opts.prefix)).insertBefore($h);
|
||||
|
||||
//build TOC item
|
||||
var a = $('<a/>')
|
||||
.text(opts.headerText(i, heading, $h))
|
||||
.attr('href', '#' + opts.anchorName(i, heading, opts.prefix))
|
||||
.bind('click', function(e) {
|
||||
scrollTo(e);
|
||||
el.trigger('selected', $(this).attr('href'));
|
||||
});
|
||||
|
||||
var li = $('<li/>')
|
||||
.addClass(opts.itemClass(i, heading, $h, opts.prefix))
|
||||
.append(a);
|
||||
|
||||
ul.append(li);
|
||||
});
|
||||
el.html(ul);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
jQuery.fn.toc.defaults = {
|
||||
container: 'body',
|
||||
selectors: 'h1,h2,h3',
|
||||
smoothScrolling: true,
|
||||
prefix: 'toc',
|
||||
onHighlight: function() {},
|
||||
highlightOnScroll: true,
|
||||
highlightOffset: 100,
|
||||
anchorName: function(i, heading, prefix) {
|
||||
return prefix+i;
|
||||
},
|
||||
headerText: function(i, heading, $heading) {
|
||||
return $heading.text();
|
||||
},
|
||||
itemClass: function(i, heading, $heading, prefix) {
|
||||
return prefix + '-' + $heading[0].tagName.toLowerCase();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,8 @@
|
||||
/*!
|
||||
* toc - jQuery Table of Contents Plugin
|
||||
* v0.1.2
|
||||
* http://projects.jga.me/toc/
|
||||
* copyright Greg Allen 2013
|
||||
* MIT License
|
||||
*/
|
||||
(function(t){t.fn.toc=function(e){var n,i=this,r=t.extend({},jQuery.fn.toc.defaults,e),o=t(r.container),a=t(r.selectors,o),l=[],h=r.prefix+"-active",s=function(e){if(r.smoothScrolling){e.preventDefault();var n=t(e.target).attr("href"),o=t(n);t("body,html").animate({scrollTop:o.offset().top},400,"swing",function(){location.hash=n})}t("li",i).removeClass(h),t(e.target).parent().addClass(h)},c=function(){n&&clearTimeout(n),n=setTimeout(function(){for(var e,n=t(window).scrollTop(),o=0,a=l.length;a>o;o++)if(l[o]>=n){t("li",i).removeClass(h),e=t("li:eq("+(o-1)+")",i).addClass(h),r.onHighlight(e);break}},50)};return r.highlightOnScroll&&(t(window).bind("scroll",c),c()),this.each(function(){var e=t(this),n=t("<ul/>");a.each(function(i,o){var a=t(o);l.push(a.offset().top-r.highlightOffset),t("<span/>").attr("id",r.anchorName(i,o,r.prefix)).insertBefore(a);var h=t("<a/>").text(r.headerText(i,o,a)).attr("href","#"+r.anchorName(i,o,r.prefix)).bind("click",function(n){s(n),e.trigger("selected",t(this).attr("href"))}),c=t("<li/>").addClass(r.itemClass(i,o,a,r.prefix)).append(h);n.append(c)}),e.html(n)})},jQuery.fn.toc.defaults={container:"body",selectors:"h1,h2,h3",smoothScrolling:!0,prefix:"toc",onHighlight:function(){},highlightOnScroll:!0,highlightOffset:100,anchorName:function(t,e,n){return n+t},headerText:function(t,e,n){return n.text()},itemClass:function(t,e,n,i){return i+"-"+n[0].tagName.toLowerCase()}}})(jQuery);
|
||||
@@ -0,0 +1,101 @@
|
||||
#TOC
|
||||
|
||||
TOC is a jQuery plugin that will automatically generate a table of contents for your page. You can see an example of it on the left side of the page.
|
||||
|
||||
##Features
|
||||
- Completely customizable
|
||||
- Click to smooth scroll to that spot on the page
|
||||
- Automatically highlight the current section
|
||||
- Extremely lightweight (744 bytes gzipped)
|
||||
- Can have multiple on a page
|
||||
|
||||
##Download
|
||||
|
||||
- [Production](https://raw.github.com/jgallen23/toc/master/dist/jquery.toc.min.js)
|
||||
- [Development](https://raw.github.com/jgallen23/toc/master/dist/jquery.toc.js)
|
||||
- [Source](http://github.com/jgallen23/toc)
|
||||
|
||||
##Usage
|
||||
|
||||
`javascript
|
||||
$('#toc').toc();
|
||||
|
||||
###Options
|
||||
Defaults shown below
|
||||
|
||||
`javascript
|
||||
$('#toc').toc({
|
||||
'selectors': 'h1,h2,h3', //elements to use as headings
|
||||
'container': 'body', //element to find all selectors in
|
||||
'smoothScrolling': true, //enable or disable smooth scrolling on click
|
||||
'prefix': 'toc', //prefix for anchor tags and class names
|
||||
'onHighlight': function(el) {}, //called when a new section is highlighted
|
||||
'highlightOnScroll': true, //add class to heading that is currently in focus
|
||||
'highlightOffset': 100, //offset to trigger the next headline
|
||||
'anchorName': function(i, heading, prefix) { //custom function for anchor name
|
||||
return prefix+i;
|
||||
},
|
||||
'headerText': function(i, heading, $heading) { //custom function building the header-item text
|
||||
return $heading.text();
|
||||
},
|
||||
'itemClass': function(i, heading, $heading, prefix) { // custom function for item class
|
||||
return $heading[0].tagName.toLowerCase();
|
||||
}
|
||||
});
|
||||
|
||||
##Example CSS
|
||||
|
||||
`css
|
||||
#toc {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
background: #333;
|
||||
box-shadow: inset -5px 0 5px 0px #000;
|
||||
width: 150px;
|
||||
padding-top: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#toc ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#toc li {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
#toc a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#toc .toc-h2 {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#toc .toc-h3 {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
#toc .toc-active {
|
||||
background: #336699;
|
||||
box-shadow: inset -5px 0px 10px -5px #000;
|
||||
}
|
||||
|
||||
##History
|
||||
|
||||
[View](https://raw.github.com/jgallen23/toc/master/History.md)
|
||||
|
||||
##Future
|
||||
- Figure out how to handle headlines on bottom of page
|
||||
- Zepto.js support (should work, need to verify)
|
||||
- Ender support
|
||||
|
||||
|
||||
##Contributors
|
||||
- Greg Allen ([@jgaui](http://twitter.com/jgaui)) [jga.me](http://jga.me)
|
||||
@@ -0,0 +1,10 @@
|
||||
#jQuery Dependencies
|
||||
- $.extend
|
||||
- bind
|
||||
- addClass
|
||||
- removeClass
|
||||
- animate
|
||||
- attr
|
||||
- text
|
||||
- append
|
||||
- createElement
|
||||
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<script src="live.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Helvetica, Arial;
|
||||
}
|
||||
#wrapper {
|
||||
width: 980px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 300px;
|
||||
}
|
||||
.toc {
|
||||
background: #fefefe;
|
||||
width: 200px;
|
||||
position: fixed;
|
||||
border: 1px solid #ddd;
|
||||
color: #333;
|
||||
}
|
||||
.toc a {
|
||||
color: #333;
|
||||
}
|
||||
.toc .tocH2 {
|
||||
margin-left: 10px
|
||||
}
|
||||
.toc .tocH3 {
|
||||
margin-left: 20px
|
||||
}
|
||||
.toc-active {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.toc.right {
|
||||
right: 0
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="toc">
|
||||
</div>
|
||||
<div class="toc right">
|
||||
</div>
|
||||
<div id="wrapper">
|
||||
<h1>Page Title</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<h2>Sub Heading</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<h2>Sub Heading</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<h3>SubSub Heading</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
</div>
|
||||
<script src="jquery.js"></script>
|
||||
<script src="../lib/toc.js"></script>
|
||||
<script>
|
||||
$('.toc').toc({
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,233 @@
|
||||
/*
|
||||
Live.js - One script closer to Designing in the Browser
|
||||
Written for Handcraft.com by Martin Kool (@mrtnkl).
|
||||
|
||||
Version 4.
|
||||
Recent change: Made stylesheet and mimetype checks case insensitive.
|
||||
|
||||
http://livejs.com
|
||||
http://livejs.com/license (MIT)
|
||||
@livejs
|
||||
|
||||
Include live.js#css to monitor css changes only.
|
||||
Include live.js#js to monitor js changes only.
|
||||
Include live.js#html to monitor html changes only.
|
||||
Mix and match to monitor a preferred combination such as live.js#html,css
|
||||
|
||||
By default, just include live.js to monitor all css, js and html changes.
|
||||
|
||||
Live.js can also be loaded as a bookmarklet. It is best to only use it for CSS then,
|
||||
as a page reload due to a change in html or css would not re-include the bookmarklet.
|
||||
To monitor CSS and be notified that it has loaded, include it as: live.js#css,notify
|
||||
*/
|
||||
(function () {
|
||||
|
||||
var headers = { "Etag": 1, "Last-Modified": 1, "Content-Length": 1, "Content-Type": 1 },
|
||||
resources = {},
|
||||
pendingRequests = {},
|
||||
currentLinkElements = {},
|
||||
oldLinkElements = {},
|
||||
interval = 1000,
|
||||
loaded = false,
|
||||
active = { "html": 1, "css": 1, "js": 1 };
|
||||
|
||||
var Live = {
|
||||
|
||||
// performs a cycle per interval
|
||||
heartbeat: function () {
|
||||
if (document.body) {
|
||||
// make sure all resources are loaded on first activation
|
||||
if (!loaded) Live.loadresources();
|
||||
Live.checkForChanges();
|
||||
}
|
||||
setTimeout(Live.heartbeat, interval);
|
||||
},
|
||||
|
||||
// loads all local css and js resources upon first activation
|
||||
loadresources: function () {
|
||||
|
||||
// helper method to assert if a given url is local
|
||||
function isLocal(url) {
|
||||
var loc = document.location,
|
||||
reg = new RegExp("^\\.|^\/(?!\/)|^[\\w]((?!://).)*$|" + loc.protocol + "//" + loc.host);
|
||||
return url.match(reg);
|
||||
}
|
||||
|
||||
// gather all resources
|
||||
var scripts = document.getElementsByTagName("script"),
|
||||
links = document.getElementsByTagName("link"),
|
||||
uris = [];
|
||||
|
||||
// track local js urls
|
||||
for (var i = 0; i < scripts.length; i++) {
|
||||
var script = scripts[i], src = script.getAttribute("src");
|
||||
if (src && isLocal(src))
|
||||
uris.push(src);
|
||||
if (src && src.match(/\blive.js#/)) {
|
||||
for (var type in active)
|
||||
active[type] = src.match("[#,|]" + type) != null
|
||||
if (src.match("notify"))
|
||||
alert("Live.js is loaded.");
|
||||
}
|
||||
}
|
||||
if (!active.js) uris = [];
|
||||
if (active.html) uris.push(document.location.href);
|
||||
|
||||
// track local css urls
|
||||
for (var i = 0; i < links.length && active.css; i++) {
|
||||
var link = links[i], rel = link.getAttribute("rel"), href = link.getAttribute("href", 2);
|
||||
if (href && rel && rel.match(new RegExp("stylesheet", "i")) && isLocal(href)) {
|
||||
uris.push(href);
|
||||
currentLinkElements[href] = link;
|
||||
}
|
||||
}
|
||||
|
||||
// initialize the resources info
|
||||
for (var i = 0; i < uris.length; i++) {
|
||||
var url = uris[i];
|
||||
Live.getHead(url, function (url, info) {
|
||||
resources[url] = info;
|
||||
});
|
||||
}
|
||||
|
||||
// add rule for morphing between old and new css files
|
||||
var head = document.getElementsByTagName("head")[0],
|
||||
style = document.createElement("style"),
|
||||
rule = "transition: all .3s ease-out;"
|
||||
css = [".livejs-loading * { ", rule, " -webkit-", rule, "-moz-", rule, "-o-", rule, "}"].join('');
|
||||
style.setAttribute("type", "text/css");
|
||||
head.appendChild(style);
|
||||
style.styleSheet ? style.styleSheet.cssText = css : style.appendChild(document.createTextNode(css));
|
||||
|
||||
// yep
|
||||
loaded = true;
|
||||
},
|
||||
|
||||
// check all tracking resources for changes
|
||||
checkForChanges: function () {
|
||||
for (var url in resources) {
|
||||
if (pendingRequests[url])
|
||||
continue;
|
||||
|
||||
Live.getHead(url, function (url, newInfo) {
|
||||
var oldInfo = resources[url],
|
||||
hasChanged = false;
|
||||
resources[url] = newInfo;
|
||||
for (var header in oldInfo) {
|
||||
// do verification based on the header type
|
||||
var oldValue = oldInfo[header],
|
||||
newValue = newInfo[header],
|
||||
contentType = newInfo["Content-Type"];
|
||||
switch (header.toLowerCase()) {
|
||||
case "etag":
|
||||
if (!newValue) break;
|
||||
// fall through to default
|
||||
default:
|
||||
hasChanged = oldValue != newValue;
|
||||
break;
|
||||
}
|
||||
// if changed, act
|
||||
if (hasChanged) {
|
||||
Live.refreshResource(url, contentType);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// act upon a changed url of certain content type
|
||||
refreshResource: function (url, type) {
|
||||
switch (type.toLowerCase()) {
|
||||
// css files can be reloaded dynamically by replacing the link element
|
||||
case "text/css":
|
||||
var link = currentLinkElements[url],
|
||||
html = document.body.parentNode,
|
||||
head = link.parentNode,
|
||||
next = link.nextSibling,
|
||||
newLink = document.createElement("link");
|
||||
|
||||
html.className = html.className.replace(/\s*livejs\-loading/gi, '') + ' livejs-loading';
|
||||
newLink.setAttribute("type", "text/css");
|
||||
newLink.setAttribute("rel", "stylesheet");
|
||||
newLink.setAttribute("href", url + "?now=" + new Date() * 1);
|
||||
next ? head.insertBefore(newLink, next) : head.appendChild(newLink);
|
||||
currentLinkElements[url] = newLink;
|
||||
oldLinkElements[url] = link;
|
||||
|
||||
// schedule removal of the old link
|
||||
Live.removeoldLinkElements();
|
||||
break;
|
||||
|
||||
// check if an html resource is our current url, then reload
|
||||
case "text/html":
|
||||
if (url != document.location.href)
|
||||
return;
|
||||
|
||||
// local javascript changes cause a reload as well
|
||||
case "text/javascript":
|
||||
case "application/javascript":
|
||||
case "application/x-javascript":
|
||||
document.location.reload();
|
||||
}
|
||||
},
|
||||
|
||||
// removes the old stylesheet rules only once the new one has finished loading
|
||||
removeoldLinkElements: function () {
|
||||
var pending = 0;
|
||||
for (var url in oldLinkElements) {
|
||||
// if this sheet has any cssRules, delete the old link
|
||||
try {
|
||||
var link = currentLinkElements[url],
|
||||
oldLink = oldLinkElements[url],
|
||||
html = document.body.parentNode,
|
||||
sheet = link.sheet || link.styleSheet,
|
||||
rules = sheet.rules || sheet.cssRules;
|
||||
if (rules.length >= 0) {
|
||||
oldLink.parentNode.removeChild(oldLink);
|
||||
delete oldLinkElements[url];
|
||||
setTimeout(function () {
|
||||
html.className = html.className.replace(/\s*livejs\-loading/gi, '');
|
||||
}, 100);
|
||||
}
|
||||
} catch (e) {
|
||||
pending++;
|
||||
}
|
||||
if (pending) setTimeout(Live.removeoldLinkElements, 50);
|
||||
}
|
||||
},
|
||||
|
||||
// performs a HEAD request and passes the header info to the given callback
|
||||
getHead: function (url, callback) {
|
||||
pendingRequests[url] = true;
|
||||
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XmlHttp");
|
||||
xhr.open("HEAD", url, true);
|
||||
xhr.onreadystatechange = function () {
|
||||
delete pendingRequests[url];
|
||||
if (xhr.readyState == 4 && xhr.status != 304) {
|
||||
xhr.getAllResponseHeaders();
|
||||
var info = {};
|
||||
for (var h in headers) {
|
||||
var value = xhr.getResponseHeader(h);
|
||||
// adjust the simple Etag variant to match on its significant part
|
||||
if (h.toLowerCase() == "etag" && value) value = value.replace(/^W\//, '');
|
||||
if (h.toLowerCase() == "content-type" && value) value = value.replace(/^(.*?);.*?$/i, "$1");
|
||||
info[h] = value;
|
||||
}
|
||||
callback(url, info);
|
||||
}
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
};
|
||||
|
||||
// start listening
|
||||
if (document.location.protocol != "file:") {
|
||||
if (!window.liveJsLoaded)
|
||||
Live.heartbeat();
|
||||
|
||||
window.liveJsLoaded = true;
|
||||
}
|
||||
else if (window.console)
|
||||
console.log("Live.js doesn't support the file protocol. It needs http.");
|
||||
})();
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* jquery.toc.js - A jQuery plugin that will automatically generate a table of contents.
|
||||
* v0.1.1
|
||||
* https://github.com/jgallen23/toc
|
||||
* copyright JGA 2012
|
||||
* MIT License
|
||||
*/
|
||||
@@ -0,0 +1,100 @@
|
||||
(function($) {
|
||||
$.fn.toc = function(options) {
|
||||
var self = this;
|
||||
var opts = $.extend({}, jQuery.fn.toc.defaults, options);
|
||||
|
||||
var container = $(opts.container);
|
||||
var headings = $(opts.selectors, container);
|
||||
var headingOffsets = [];
|
||||
var activeClassName = opts.prefix+'-active';
|
||||
|
||||
var scrollTo = function(e) {
|
||||
if (opts.smoothScrolling) {
|
||||
e.preventDefault();
|
||||
var elScrollTo = $(e.target).attr('href');
|
||||
var $el = $(elScrollTo);
|
||||
|
||||
$('body,html').animate({ scrollTop: $el.offset().top }, 400, 'swing', function() {
|
||||
location.hash = elScrollTo;
|
||||
});
|
||||
}
|
||||
$('li', self).removeClass(activeClassName);
|
||||
$(e.target).parent().addClass(activeClassName);
|
||||
};
|
||||
|
||||
//highlight on scroll
|
||||
var timeout;
|
||||
var highlightOnScroll = function(e) {
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
timeout = setTimeout(function() {
|
||||
var top = $(window).scrollTop(),
|
||||
highlighted;
|
||||
for (var i = 0, c = headingOffsets.length; i < c; i++) {
|
||||
if (headingOffsets[i] >= top) {
|
||||
$('li', self).removeClass(activeClassName);
|
||||
highlighted = $('li:eq('+(i-1)+')', self).addClass(activeClassName);
|
||||
opts.onHighlight(highlighted);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, 50);
|
||||
};
|
||||
if (opts.highlightOnScroll) {
|
||||
$(window).bind('scroll', highlightOnScroll);
|
||||
highlightOnScroll();
|
||||
}
|
||||
|
||||
return this.each(function() {
|
||||
//build TOC
|
||||
var el = $(this);
|
||||
var ul = $('<ul/>');
|
||||
headings.each(function(i, heading) {
|
||||
var $h = $(heading);
|
||||
headingOffsets.push($h.offset().top - opts.highlightOffset);
|
||||
|
||||
//add anchor
|
||||
var anchor = $('<span/>').attr('id', opts.anchorName(i, heading, opts.prefix)).insertBefore($h);
|
||||
|
||||
//build TOC item
|
||||
var a = $('<a/>')
|
||||
.text(opts.headerText(i, heading, $h))
|
||||
.attr('href', '#' + opts.anchorName(i, heading, opts.prefix))
|
||||
.bind('click', function(e) {
|
||||
scrollTo(e);
|
||||
el.trigger('selected', $(this).attr('href'));
|
||||
});
|
||||
|
||||
var li = $('<li/>')
|
||||
.addClass(opts.itemClass(i, heading, $h, opts.prefix))
|
||||
.append(a);
|
||||
|
||||
ul.append(li);
|
||||
});
|
||||
el.html(ul);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
jQuery.fn.toc.defaults = {
|
||||
container: 'body',
|
||||
selectors: 'h1,h2,h3',
|
||||
smoothScrolling: true,
|
||||
prefix: 'toc',
|
||||
onHighlight: function() {},
|
||||
highlightOnScroll: true,
|
||||
highlightOffset: 100,
|
||||
anchorName: function(i, heading, prefix) {
|
||||
return prefix+i;
|
||||
},
|
||||
headerText: function(i, heading, $heading) {
|
||||
return $heading.text();
|
||||
},
|
||||
itemClass: function(i, heading, $heading, prefix) {
|
||||
return prefix + '-' + $heading[0].tagName.toLowerCase();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "toc",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"mocha": "~1.8.2",
|
||||
"grunt": "~0.4.1",
|
||||
"grunt-reloadr": "~0.1.2",
|
||||
"grunt-mocha": "~0.3.0",
|
||||
"grunt-contrib-concat": "~0.1.3",
|
||||
"grunt-contrib-uglify": "~0.2.0",
|
||||
"grunt-contrib-jshint": "~0.3.0",
|
||||
"grunt-contrib-connect": "~0.2.0",
|
||||
"grunt-contrib-watch": "~0.3.1",
|
||||
"grunt-plato": "~0.1.5"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>toc Tests</title>
|
||||
<link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
|
||||
<script src="../components/assert/assert.js"></script>
|
||||
<script src="../node_modules/mocha/mocha.js"></script>
|
||||
<!--<script src="../components/blanket/dist/qunit/blanket.min.js" data-cover-adapter="../components/blanket/src/adapters/mocha-blanket.js"></script>-->
|
||||
<script>mocha.setup('tdd')</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mocha"></div>
|
||||
<div id="fixture" style="display: none">
|
||||
|
||||
</div>
|
||||
<script src="../dist/toc.js" data-cover></script>
|
||||
<script src="toc.test.js"></script>
|
||||
<script>
|
||||
if (navigator.userAgent.indexOf('PhantomJS') < 0) {
|
||||
mocha.run().globals(['LiveReload']);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,4 @@
|
||||
|
||||
suite('toc', function() {
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user