dani
/
vroom
mirror of https://github.com/dani/vroom.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Add tocjs plugin

Browse Source
master
Daniel Berteaud 10 years ago
parent 4acc2cb4ab
commit 452c36a63f
7 changed files with 457 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      lib/Vroom/Constants.pm
  2. 48
      public/css/toc-scroll.css
  3. 12
      public/css/toc-scroll.min.css
  4. 381
      public/js/toc.js
  5. 11
      public/js/toc.min.js
  6. 2
      templates/default/header.html.ep
  7. 2
      templates/default/js_common.html.ep

3
lib/Vroom/Constants.pm
Unescape View File

@ -55,6 +55,9 @@ use constant COMPONENTS => {
},
"bootpag" => {
url => "http://botmonster.com/jquery-bootpag/"
},
"tocjs" => {
url => "https://github.com/nghuuphuoc/tocjs"
}
};

48
public/css/toc-scroll.css
Unescape View File

@ -0,0 +1,48 @@
/**
* TocJS (https://github.com/nghuuphuoc/tocjs)
*
* Generate a table of contents based on headings
*
* @author http://twitter.com/nghuuphuoc
* @copyright (c) 2013 - 2014 Nguyen Huu Phuoc
* @license MIT
*/
.toc {
border: 1px solid #ddd;
border-radius: 4px; }
.toc.affix {
position: static; }
.toc .nav > .active > a, .toc .nav > .active:hover > a,
.toc .nav > .active :focus > a {
border-right: 2px solid #428bca; }
.toc .nav .nav {
/*
* If you want to hide the sub UL elements, then add the following line
* display: none;
*/
display: block;
margin-bottom: 8px; }
.toc .nav .nav > li > a {
font-size: 90%; }
.toc .toc-heading {
color: #333333;
background-color: #f5f5f5;
border-bottom: 1px solid #dddddd; }
.toc .toc-link-2 {
padding-left: 25px; }
.toc .toc-link-3 {
padding-left: 50px; }
.toc .toc-link-4 {
padding-left: 75px; }
.toc .toc-link-5 {
padding-left: 100px; }
.toc .toc-link-6 {
padding-left: 125px; }
@media screen and (min-width: 992px) and (min-height: 700px) {
.toc.affix {
position: fixed; }
.toc .nav > .active > ul {
display: block; } }
.toc .nav .nav {
display: none; }

12
public/css/toc-scroll.min.css vendored
Unescape View File

@ -0,0 +1,12 @@
/**
* TocJS v1.1.2 (http://github.com/nghuuphuoc/tocjs)
*
* Generate a table of contents based on headings
*
* @author http://twitter.com/nghuuphuoc
* @copyright (c) 2013 - 2014 Nguyen Huu Phuoc
* @license MIT
*/
.toc{border:1px solid #ddd;border-radius:4px}.toc.affix{position:static}.toc .nav>.active>a,.toc .nav>.active:hover>a,.toc .nav>.active :focus>a{border-right:2px solid #428bca}.toc .nav .nav{display:block;margin-bottom:8px}.toc .nav .nav>li>a{font-size:90%}.toc .toc-heading{color:#333;background-color:#f5f5f5;border-bottom:1px solid #ddd}.toc .toc-link-2{padding-left:25px}.toc .toc-link-3{padding-left:50px}.toc .toc-link-4{padding-left:75px}.toc .toc-link-5{padding-left:100px}.toc .toc-link-6{padding-left:125px}@media screen and (min-width:992px) and (min-height:700px){.toc.affix{position:fixed}.toc .nav>.active>ul{display:block}}.toc .nav .nav{display:none}

381
public/js/toc.js
Unescape View File

@ -0,0 +1,381 @@
/**
* TocJS (https://github.com/nghuuphuoc/tocjs)
*
* Generate a table of contents based on headings
*
* @author http://twitter.com/nghuuphuoc
* @copyright (c) 2013 - 2014 Nguyen Huu Phuoc
* @license MIT
*/
(function($) {
var Toc = function(element, options) {
this.$element = $(element);
this.options = $.extend({}, Toc.DEFAULT_OPTIONS, options);
this.headings = [];
this.$element.addClass(this.options.elementClass);
var that = this;
$(this.options.selector).each(function(index, node) {
$(node)
.data('tagNumber', parseInt(node.tagName.substring(1))) // 1...6
.data('index', 1)
.data('numbering', '1');
that.headings.push(node);
});
if (this.headings.length > 0) {
this.render();
}
};
/**
* The default options
*/
Toc.DEFAULT_OPTIONS = {
selector: 'h1, h2, h3, h4, h5, h6',
elementClass: 'toc',
rootUlClass: 'toc-ul-root',
ulClass: 'toc-ul',
prefixLinkClass: 'toc-link-',
heading: null,
/**
* Define the indexing formats for each heading level
* indexingFormats: {
* headingLevel: formatter
* }
*
* headingLevel can be 'h1', 'h2', ..., 'h6'
* formatter can be:
* - 'number', '1': The headings will be prefixed with number (1, 2, 3, ...)
* - 'upperAlphabet', 'A': Prefix headings with uppercase alphabetical characters (A, B, C, ...)
* - 'lowerAlphabet', 'a': Prefix headings with lowercase alphabetical characters (a, b, c, ...)
* - 'upperRoman', 'I': Prefix headings with uppercase Roman numerals (I, II, III, ...)
* - 'lowerRoman', 'i': Prefix headings with lowercase Roman numerals (i, ii, iii, ...)
*
* You can define different formatter for each heading level:
* indexingFormats: {
* 'h1': 'upperAlphabet', // 'A'
* 'h2': 'number', // '1'
* 'h3': 'lowerAlphabet' // 'a'
* }
*
* If you want to set indexing formats for levels:
* indexingFormats: formatter
*
* Example:
* indexingFormats: 'number' => Prefix all headings by number
* indexingFormats: '1AaIi' => Prefix 1st level heading by number
* Prefix 2nd level heading by uppercase character, and so forth.
*/
indexingFormats: {}
};
Toc.prototype = {
constructor: Toc,
/**
* Render table of content
*/
render: function() {
var h = {},
headings = this.headings,
numHeadings = this.headings.length;
for (var i = 0; i < numHeadings; i++) {
var currTagNumber = $(headings[i]).data('tagNumber');
if (i == 0) {
h[headings[0].tagName] = $(headings[0]);
} else {
var prevTagNumber = $(headings[i - 1]).data('tagNumber'),
prevNumbering = String($(headings[i - 1]).data('numbering')).split('.');
switch (true) {
// Case 1:
// The current heading is at the same level with previous one
// h3___________ <== previous heading
// h3___________ <== current heading
case (currTagNumber == prevTagNumber):
var index = $(headings[i - 1]).data('index') + 1;
$(headings[i]).data('index', index);
if (prevNumbering.length == 1) {
$(headings[i]).data('numbering', parseInt(prevNumbering[0]) + 1);
} else {
prevNumbering.pop();
prevNumbering.push(index);
$(headings[i]).data('numbering', prevNumbering.join('.'));
}
h[headings[i].tagName] = $(headings[i]);
break;
// Case 2:
// The current heading is child of the previous one
// h3____________ <== previous heading
// h4________ <== current heading
case (currTagNumber > prevTagNumber):
prevNumbering.push('1');
$(headings[i]).data('index', 1)
.data('numbering', prevNumbering.join('.'));
h[headings[i].tagName] = $(headings[i]);
break;
// Case 3:
// h2____________ <== (*) the closest heading that is at the same level with current one
// ...
// h4________ <== previous heading
// h2____________ <== current heading
case (currTagNumber < prevTagNumber):
// Get the cloest heading (*)
var closestHeading = h[headings[i].tagName];
// Now I come back the case 1
var closestNumbering = String($(closestHeading).data('numbering')).split('.'),
index = $(closestHeading).data('index') + 1;
$(headings[i]).data('index', index);
if (closestNumbering.length == 1) {
$(headings[i]).data('numbering', parseInt(closestNumbering[0]) + 1);
} else {
closestNumbering.pop();
closestNumbering.push(index);
$(headings[i]).data('numbering', closestNumbering.join('.'));
}
h[headings[i].tagName] = $(headings[i]);
break;
default:
break;
}
}
}
var numberingMap = {},
$toc = $('<ul/>').addClass(this.options.rootUlClass)
.addClass(this.options.ulClass)
.appendTo(this.$element);
// Add heading
if (this.options.heading) {
$('<li/>').addClass('toc-heading')
.wrapInner($('<a/>').attr('href', '#').html(this.options.heading))
.appendTo($toc);
}
for (var i = 0; i < numHeadings; i++) {
// Generate Id
var id = this.generateHeadingId(headings[i]),
numbering = String($(headings[i]).data('numbering')).split('.'),
$a = $('<a/>').html($(headings[i]).text())
.addClass(this.options.prefixLinkClass + numbering.length)
.attr('href', '#' + id);
// Add anchor icon to heading
$('<a/>').addClass('toc-anchor')
.html('#')
.attr('href', '#' + id)
.hide()
.appendTo(headings[i]);
$(headings[i]).on('mouseover', function() {
$(this).find('.toc-anchor').show();
}).on('mouseout', function() {
$(this).find('.toc-anchor').hide();
});
if (numbering.length == 1) {
var $li = $('<li/>').wrapInner($a).appendTo($toc);
} else {
var last = numbering.pop(),
n = numbering.join('.'),
uls = numberingMap[n].find('ul'),
$ul = uls.length > 0 ? uls.get(0) : $('<ul/>').addClass(this.options.ulClass).appendTo(numberingMap[n]),
$li = $('<li/>').wrapInner($a).appendTo($ul);
numbering.push(last);
}
numberingMap[numbering.join('.')] = $li;
this.prependIndexing(i, $a);
}
},
/**
* Generate heading Id
*
* @param {Number} heading
* @return {String}
*/
generateHeadingId: function(heading) {
if (!$(heading).attr('id')) {
var id = $(heading)
.text()
.toLowerCase()
.replace(/\s+|\/|\\/g, '-')
.replace(/á|à|ạ|ả|ã|ă|ắ|ằ|ặ|ẳ|ẵ|â|ấ|ầ|ậ|ẩ|ẫ|ä/g, 'a')
.replace(/đ/g, 'd')
.replace(/é|è|ẹ|ẻ|ẽ|ê|ế|ề|ệ|ể|ễ/g, 'e')
.replace(/í|ì|ị|ỉ|ĩ/g, 'i')
.replace(/ó|ò|ọ|ỏ|õ|ô|ố|ồ|ộ|ổ|ỗ|ơ|ớ|ờ|ợ|ở|ỡ/g, 'o')
.replace(/ú|ù|ụ|ủ|ũ|ư|ứ|ừ|ự|ử|ữ/g, 'u')
.replace(/ý|ỳ|ỵ|ỷ|ỹ/g, 'y')
.replace(/[^a-z0-9-]/g, '');
var found = true, counter = 0;
while (found) {
found = $('#' + id + (counter == 0 ? '' : '-' + counter)).length > 0;
if (found) {
counter++;
} else {
id = id + (counter == 0 ? '' : '-' + counter);
}
}
$(heading).attr('id', id);
return id;
}
return $(heading).attr('id');
},
/**
* Prepend indexing string to link/heading
*
* @param {Number} index
* @param {HTMLElement} linkElement
*/
prependIndexing: function(index, linkElement) {
var heading = this.headings[index],
tagNumber = parseInt($(heading).data('tagNumber')),
format = this.getIndexingFormat(tagNumber);
if (null == format) {
return;
}
var numbering = String($(heading).data('numbering')).split('.'), n = numbering.length, converted = [], j = 0;
for (var i = 0; i < n; i++) {
j = i + (tagNumber - n) + 1;
format = this.getIndexingFormat(j);
if (format) {
converted.push(this.convertIndexing(numbering[i], format));
}
}
if (converted.length > 0) {
var text = converted.join('. ') + '. ';
$(linkElement).prepend(text);
$(heading).prepend(text);
}
},
/**
* Get the indexing format for given heading level
*
* @param {Number} level Can be 1, 2, ..., 6
* @return {String} Can be null or one of 'number', 'lowerAlphabet', 'upperAlphabet', 'lowerRoman', 'upperRoman'
*/
getIndexingFormat: function(level) {
if ('object' == typeof this.options.indexingFormats) {
return this.options.indexingFormats['h' + level] ? this.options.indexingFormats['h' + level] : null;
}
if ('string' == typeof this.options.indexingFormats) {
if (['upperAlphabet', 'lowerAlphabet', 'number', 'upperRoman', 'lowerRoman'].indexOf(this.options.indexingFormats) != -1) {
return this.options.indexingFormats;
}
// indexingFormats defines format for each heading level (1AaIi, 111111, for example)
if (this.options.indexingFormats.length < level) {
return null;
}
switch (this.options.indexingFormats[level - 1]) {
case '1':
case 1:
return 'number';
case 'A':
return 'upperAlphabet';
case 'a':
return 'lowerAlphabet';
case 'I':
return 'upperRoman';
case 'i':
return 'lowerRoman';
default:
return null;
}
}
return null;
},
/**
* Format an indexing number in given type
*
* @param {Number} number
* @param {String} type Can be one of supported formats: number, lowerAlphabet, upperAlphabet, lowerRoman, upperRoman
* @returns {String}
*/
convertIndexing: function(number, type) {
var lowerChars = 'abcdefghijklmnopqrstuvwxyz', upperChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', length = lowerChars.length;
switch (type) {
case 'upperAlphabet':
case 'A':
return (number > length) ? upperChars[number % length - 1] : upperChars[number - 1];
case 'lowerAlphabet':
case 'a':
return (number > length) ? lowerChars[number % length - 1] : lowerChars[number - 1];
case 'number':
case '1':
case 1:
return number;
case 'upperRoman':
case 'I':
return this.convertToRomanNumeral(number);
case 'lowerRoman':
case 'i':
return this.convertToRomanNumeral(number).toLowerCase();
default:
return '_';
}
},
/**
* Convert a number to Roman numeral
*
* @param {Number} number
* @return {String}
*/
convertToRomanNumeral: function(number) {
if (!+number) {
return '';
}
var digits = String(+number).split(''),
key = ['', 'C', 'CC', 'CCC', 'CD', 'D', 'DC', 'DCC', 'DCCC', 'CM',
'', 'X', 'XX', 'XXX', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC',
'', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX'],
roman = '',
i = 3;
while (i--) {
roman = (key[+digits.pop() + (i * 10)] || '') + roman;
}
return Array(+digits.join('') + 1).join('M') + roman;
}
};
// Plugin definition
$.fn.toc = function(options) {
return this.each(function() {
var $this = $(this), data = $this.data('toc');
if (!data) {
$this.data('toc', (data = new Toc(this, options)));
}
});
};
$.fn.toc.Constructor = Toc;
}(window.jQuery));

11
public/js/toc.min.js vendored
Unescape View File

@ -0,0 +1,11 @@
/**
* TocJS v1.1.2 (http://github.com/nghuuphuoc/tocjs)
*
* Generate a table of contents based on headings
*
* @author http://twitter.com/nghuuphuoc
* @copyright (c) 2013 - 2014 Nguyen Huu Phuoc
* @license MIT
*/
!function(a){var b=function(c,d){this.$element=a(c),this.options=a.extend({},b.DEFAULT_OPTIONS,d),this.headings=[],this.$element.addClass(this.options.elementClass);var e=this;a(this.options.selector).each(function(b,c){a(c).data("tagNumber",parseInt(c.tagName.substring(1))).data("index",1).data("numbering","1"),e.headings.push(c)}),this.headings.length>0&&this.render()};b.DEFAULT_OPTIONS={selector:"h1, h2, h3, h4, h5, h6",elementClass:"toc",rootUlClass:"toc-ul-root",ulClass:"toc-ul",prefixLinkClass:"toc-link-",heading:null,indexingFormats:{}},b.prototype={constructor:b,render:function(){for(var b={},c=this.headings,d=this.headings.length,e=0;d>e;e++){var f=a(c[e]).data("tagNumber");if(0==e)b[c[0].tagName]=a(c[0]);else{var g=a(c[e-1]).data("tagNumber"),h=String(a(c[e-1]).data("numbering")).split(".");switch(!0){case f==g:var i=a(c[e-1]).data("index")+1;a(c[e]).data("index",i),1==h.length?a(c[e]).data("numbering",parseInt(h[0])+1):(h.pop(),h.push(i),a(c[e]).data("numbering",h.join("."))),b[c[e].tagName]=a(c[e]);break;case f>g:h.push("1"),a(c[e]).data("index",1).data("numbering",h.join(".")),b[c[e].tagName]=a(c[e]);break;case g>f:var j=b[c[e].tagName],k=String(a(j).data("numbering")).split("."),i=a(j).data("index")+1;a(c[e]).data("index",i),1==k.length?a(c[e]).data("numbering",parseInt(k[0])+1):(k.pop(),k.push(i),a(c[e]).data("numbering",k.join("."))),b[c[e].tagName]=a(c[e])}}}var l={},m=a("<ul/>").addClass(this.options.rootUlClass).addClass(this.options.ulClass).appendTo(this.$element);this.options.heading&&a("<li/>").addClass("toc-heading").wrapInner(a("<a/>").attr("href","#").html(this.options.heading)).appendTo(m);for(var e=0;d>e;e++){var n=this.generateHeadingId(c[e]),o=String(a(c[e]).data("numbering")).split("."),p=a("<a/>").html(a(c[e]).text()).addClass(this.options.prefixLinkClass+o.length).attr("href","#"+n);if(a("<a/>").addClass("toc-anchor").html("#").attr("href","#"+n).hide().appendTo(c[e]),a(c[e]).on("mouseover",function(){a(this).find(".toc-anchor").show()}).on("mouseout",function(){a(this).find(".toc-anchor").hide()}),1==o.length)var q=a("<li/>").wrapInner(p).appendTo(m);else{var r=o.pop(),s=o.join("."),t=l[s].find("ul"),u=t.length>0?t.get(0):a("<ul/>").addClass(this.options.ulClass).appendTo(l[s]),q=a("<li/>").wrapInner(p).appendTo(u);o.push(r)}l[o.join(".")]=q,this.prependIndexing(e,p)}},generateHeadingId:function(b){if(!a(b).attr("id")){for(var c=a(b).text().toLowerCase().replace(/\s+|\/|\\/g,"-").replace(/á|à|ạ|ả|ã|ă|ắ|ằ|ặ|ẳ|ẵ|â|ấ|ầ|ậ|ẩ|ẫ|ä/g,"a").replace(/đ/g,"d").replace(/é|è|ẹ|ẻ|ẽ|ê|ế|ề|ệ|ể|ễ/g,"e").replace(/í|ì|ị|ỉ|ĩ/g,"i").replace(/ó|ò|ọ|ỏ|õ|ô|ố|ồ|ộ|ổ|ỗ|ơ|ớ|ờ|ợ|ở|ỡ/g,"o").replace(/ú|ù|ụ|ủ|ũ|ư|ứ|ừ|ự|ử|ữ/g,"u").replace(/ý|ỳ|ỵ|ỷ|ỹ/g,"y").replace(/[^a-z0-9-]/g,""),d=!0,e=0;d;)d=a("#"+c+(0==e?"":"-"+e)).length>0,d?e++:c+=0==e?"":"-"+e;return a(b).attr("id",c),c}return a(b).attr("id")},prependIndexing:function(b,c){var d=this.headings[b],e=parseInt(a(d).data("tagNumber")),f=this.getIndexingFormat(e);if(null!=f){for(var g=String(a(d).data("numbering")).split("."),h=g.length,i=[],j=0,k=0;h>k;k++)j=k+(e-h)+1,f=this.getIndexingFormat(j),f&&i.push(this.convertIndexing(g[k],f));if(i.length>0){var l=i.join(". ")+". ";a(c).prepend(l),a(d).prepend(l)}}},getIndexingFormat:function(a){if("object"==typeof this.options.indexingFormats)return this.options.indexingFormats["h"+a]?this.options.indexingFormats["h"+a]:null;if("string"==typeof this.options.indexingFormats){if(-1!=["upperAlphabet","lowerAlphabet","number","upperRoman","lowerRoman"].indexOf(this.options.indexingFormats))return this.options.indexingFormats;if(this.options.indexingFormats.length<a)return null;switch(this.options.indexingFormats[a-1]){case"1":case 1:return"number";case"A":return"upperAlphabet";case"a":return"lowerAlphabet";case"I":return"upperRoman";case"i":return"lowerRoman";default:return null}}return null},convertIndexing:function(a,b){var c="abcdefghijklmnopqrstuvwxyz",d="ABCDEFGHIJKLMNOPQRSTUVWXYZ",e=c.length;switch(b){case"upperAlphabet":case"A":return a>e?d[a%e-1]:d[a-1];case"lowerAlphabet":case"a":return a>e?c[a%e-1]:c[a-1];case"number":case"1":case 1:return a;case"upperRoman":case"I":return this.convertToRomanNumeral(a);case"lowerRoman":case"i":return this.convertToRomanNumeral(a).toLowerCase();default:return"_"}},convertToRomanNumeral:function(a){if(!+a)return"";for(var b=String(+a).split(""),c=["","C","CC","CCC","CD","D","DC","DCC","DCCC","CM","","X","XX","XXX","XL","L","LX","LXX","LXXX","XC","","I","II","III","IV","V","VI","VII","VIII","IX"],d="",e=3;e--;)d=(c[+b.pop()+10*e]||"")+d;return Array(+b.join("")+1).join("M")+d}},a.fn.toc=function(c){return this.each(function(){var d=a(this),e=d.data("toc");e||d.data("toc",e=new b(this,c))})},a.fn.toc.Constructor=b}(window.jQuery);

2
templates/default/header.html.ep
Unescape View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content=" <%=l 'VROOM_DESC' %>" />
<%
foreach my $css (qw(bootstrap.min.css bootstrap-switch.min.css vroom.css)){
foreach my $css (qw(bootstrap.min.css bootstrap-switch.min.css toc-scroll.min.css vroom.css)){
%>
<link href="<%= $self->get_url('/') %><%= $self->get_mtime("public/css/$css") %>/css/<%= $css %>" rel="stylesheet" type="text/css">
<% } %>

2
templates/default/js_common.html.ep
Unescape View File

@ -4,7 +4,7 @@
var api_key = '<%= ($self->session('key')) ? $self->session('key') : '' %>';
var roomName;
</script>
<% foreach my $js (qw(jquery-1.11.2.min.js bootstrap.min.js notify-combined.min.js bootstrap-switch.min.js jquery.bootpag.min.js vroom.js)){
<% foreach my $js (qw(jquery-1.11.2.min.js bootstrap.min.js notify-combined.min.js bootstrap-switch.min.js jquery.bootpag.min.js toc.min.js vroom.js)){
%>
<script type="text/javascript" src="<%= $self->get_url('/') %><%= $self->get_mtime("public/js/$js") %>/js/<%= $js %>"></script>
<% } %>

Write Preview
Loading…
Cancel
Save