<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome - Ace Docs</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/font-awesome.css" rel="stylesheet" />
<link href="../assets/css/prettify.css" rel="stylesheet">
<link rel="stylesheet" href="../assets/css/ace-fonts.css" />
<link rel="stylesheet" href="../assets/css/ace.css" class="ace-main-stylesheet" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="../assets/css/ace-part2.css" class="ace-main-stylesheet" />
<![endif]-->
<link rel="stylesheet" href="../assets/css/ace-skins.css" />
<link href="assets/js/themes/sunburst.css" rel="stylesheet" />
<style>
.navbar {
background: #438EB9 !important;
}
body {
font-size: 14px;
}
.skin-3 .main-container:before {
background: #F6F6F6;
}
.page-content {
padding-top: 25px;
padding-bottom: 75px;
max-width: 700px;
margin: 0 auto;
}
.help-content {
background-color: #FFF;
max-width: 680px;
margin: 0 auto;
padding: 12px 24px;
border:1px solid #C5D0DC;
}
.help-content > .widget-box > .widget-header > .info-title {
cursor: pointer;
}
.help-content > .widget-box > .widget-header > .info-title:hover {
background-color: #DCE8F1;
}
.help-content > .widget-box.collapsed > .widget-header {
border-bottom-width: 0;
}
.help-content > .widget-box {
border-bottom: 1px solid #DCE8F1;
margin-bottom: 10px;
padding-bottom: 5px;
transition: none;
}
.help-content > .widget-box.collapsed {
padding-bottom: 10px;
transition: padding-bottom 0.1s;
}
.help-content > .widget-box:last-child {
border-bottom-width: 0;
margin-bottom: 0;
}
.help-content > .widget-box:only-child {
padding-bottom: 0;
padding-bottom: 5px;
}
.info-list {
margin: 0;
}
.info-list > li:nth-child(odd) > .ace-icon:first-child {
color: #478FCA;
}
.info-list > li:nth-child(even) > .ace-icon:first-child {
color: #69AA46;
}
.info-list > li:not(.hr) {
margin-top: 0;
margin-bottom: 0;
padding: 16px 12px;
line-height: 22px;
}
.info-list > li:not(.hr):nth-child(even) {
background-color: #FFF;
border: 1px solid #E9E9E9;
}
.info-list > li:not(.hr):nth-child(odd) {
background-color: #F0F4F9;
}
.info-list > li:not(.hr):nth-child(even) code
{
background-color: #F0F4F9;
}
.info-list > li:not(.hr):nth-child(odd) code
{
background-color: #FFF;
}
.help-more {
color: #4E82A3;
border-bottom: 1px dotted #8BA8BA;
padding: 0 1px 1px;
}
.help-more:hover {
text-decoration: none;
border-bottom-color: #628DB2;
background-color: #E4EAC7;
}
u.dotted {
text-decoration: none;
border-bottom: 1px dotted #999;
}
@media only screen and (min-width: 992px) {
.sidebar {
padding-top: 4px;
}
}
pre .close {
float: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
opacity: inherit;
text-shadow: inherit;
}
.open-file {
cursor: pointer;
-webkit-transition: all 0.12s;
transition: all 0.12s;
}
.open-file:hover {
background-color: #CEE0EA !important;
}
.open-file .brief-show {
display: none;
}
.open-file:hover .brief-show {
display: inline;
}
.code-modal .modal-dialog {
margin-top: 6px;
margin-bottom: 6px;
}
.code-modal .modal-header {
padding-top: 6px;
padding-bottom: 6px;
}
.code-modal .modal-body {
padding: 10px 12px
}
pre {
border-width: 0;
box-shadow: none;
border-radius: 0;
margin-top: 8px;
}
a[href^="http"]:before {
font-family: FontAwesome;
font-size: 15px;
content: "\f08e";
display: inline;
margin-right: 3px;
}
a.external_link[href^="http"]:before {
display: none;
}
.thumbnail {
margin: 12px 0 8px;
}
</style>
</head>
<body class="no-skin skin-3">
<div id="navbar" class="navbar navbar-default navbar-fixed-top h-navbar">
<div class="navbar-container container" id="navbar-container">
<div class="navbar-header pull-left ace-navbar-brand">
<span class="no-skin">
<button data-target="#sidebar" type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler">
<span class="sr-only">Toggle sidebar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</span>
<a href="#" class="navbar-brand">
<small>
<i class="glyphicon glyphicon-book"></i>
Help <span class="smaller-75">(v1.3.2)</span>
</small>
</a><!-- /.brand -->
</div>
<div class="navbar-header pull-right ace-navbar-buttons">
<ul class="nav ace-nav">
<li class="margin-2 no-border">
<a href="#" id="help-move-prev"><i class="ace-icon fa fa-chevron-left"></i></a>
</li>
<li class="margin-2 no-border">
<a href="#" id="help-move-next"><i class="ace-icon fa fa-chevron-right"></i></a>
</li>
</ul>
</div>
</div>
</div>
<div class="main-container container">
<script>
if(document.location.protocol == 'file:') {
document.write('<div class="alert alert-danger">\
<strong>Please open this page using <span class="text-info">`http` protocol</span>, i.e. access it like this <span class="text-primary">http://127.0.0.1/path/to/ace/docs/index.html</span></strong><br />\
Demo pages, documentation & CSS/JS builder pages, load data dynamically using ajax and <b>`file` protocol</b> prevents that due to browser restrictions.\<br />\
Also some browsers such as Firefox don\'t load fonts when resource files are inside an upper level directory.\
</div>');
}
</script>
<div class="sidebar responsive sidebar-fixed" id="sidebar">
<ul class="nav nav-list">
<li class="highlight">
<a href="#intro">
<span class="menu-icon">ⅰ.</span>
<span class="menu-text">Introduction</span>
</a>
<b class="arrow"></b>
</li>
<li class="highlight hover">
<a href="#changes" class="dropdown-toggle">
<span class="menu-icon">ⅱ.</span>
<span class="menu-text">Changes & Updates</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="hover"><a href="#changes.v7"><i class="menu-icon fa fa-caret-right"></i> v1.3.1 <i class="fa fa-long-arrow-right"></i> v1.3.2</a></li>
<li class="hover"><a href="#changes.v6"><i class="menu-icon fa fa-caret-right"></i> v1.3.0 <i class="fa fa-long-arrow-right"></i> v1.3.1</a></li>
<li class="hover"><a href="#changes.v5"><i class="menu-icon fa fa-caret-right"></i> v1.2.0 <i class="fa fa-long-arrow-right"></i> v1.3.0</a></li>
<li class="hover"><a href="#changes.v4"><i class="menu-icon fa fa-caret-right"></i> v1.1.3 <i class="fa fa-long-arrow-right"></i> v1.2.0</a></li>
<li class="hover"><a href="#changes.v3"><i class="menu-icon fa fa-caret-right"></i> v1.1.2 <i class="fa fa-long-arrow-right"></i> v1.1.3</a></li>
<li class="hover"><a href="#changes.v2"><i class="menu-icon fa fa-caret-right"></i> v1.1.0 <i class="fa fa-long-arrow-right"></i> v1.1.2</a></li>
<li class="hover"><a href="#changes.fontawesome"><i class="menu-icon fa fa-caret-right"></i> Fontawesome & Icons</a></li>
</ul>
<b class="arrow"></b>
</li>
<li class="highlight hover">
<a href="#" class="dropdown-toggle">
<span class="menu-icon">ⅲ.</span>
<span class="menu-text">Files</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="hover"><a href="#files/html"><i class="menu-icon fa fa-caret-right"></i> HTML Files</a></li>
<li class="hover"><a href="#files/mustache"><i class="menu-icon fa fa-caret-right"></i> Mustache Files</a></li>
<li class="hover"><a href="#files/css"><i class="menu-icon fa fa-caret-right"></i> CSS/LESS Files</a></li>
<li class="hover"><a href="#files/javascript"><i class="menu-icon fa fa-caret-right"></i> Javascript Files</a></li>
<li class="hover"><a href="#files/examples"><i class="menu-icon fa fa-caret-right"></i> Example Files</a></li>
</ul>
</li>
<li class="highlight hover">
<a href="#" class="dropdown-toggle">
<span class="menu-icon">ⅳ.</span>
<span class="menu-text">Basics</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="hover"><a href="#basics/layout"><i class="menu-icon fa fa-caret-right"></i> Page Layout</a></li>
<li class="hover"><a href="#basics/navbar"><i class="menu-icon fa fa-caret-right"></i> Navbar</a></li>
<li class="hover"><a href="#basics/sidebar"><i class="menu-icon fa fa-caret-right"></i> Sidebar</a></li>
<li class="hover"><a href="#basics/content"><i class="menu-icon fa fa-caret-right"></i> Content</a></li>
<li class="hover"><a href="#basics/ajax"><i class="menu-icon fa fa-caret-right"></i> Ajax Content</a></li>
<li class="hover"><a href="#basics/footer"><i class="menu-icon fa fa-caret-right"></i> Footer</a></li>
</ul>
</li>
<li class="highlight hover">
<a href="#elements" class="dropdown-toggle">
<span class="menu-icon">ⅴ.</span>
<span class="menu-text">Elements</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="hover"><a href="#elements.button"><i class="menu-icon fa fa-caret-right"></i> Buttons</a></li>
<li class="hover"><a href="#elements.label-badge"><i class="menu-icon fa fa-caret-right"></i> Labels & Badges</a></li>
<li class="hover"><a href="#elements.icon"><i class="menu-icon fa fa-caret-right"></i> Icons</a></li>
<li class="hover"><a href="#elements.form"><i class="menu-icon fa fa-caret-right"></i> Form Control</a></li>
<li class="hover"><a href="#elements.tab"><i class="menu-icon fa fa-caret-right"></i> Tabs</a></li>
<li class="hover"><a href="#elements.accordion"><i class="menu-icon fa fa-caret-right"></i> Accordion</a></li>
<li class="hover"><a href="#elements.tooltip"><i class="menu-icon fa fa-caret-right"></i> Tooltip & Popover</a></li>
<li class="hover"><a href="#elements.dropdown"><i class="menu-icon fa fa-caret-right"></i> Dropdown</a></li>
<li class="hover"><a href="#elements.other"><i class="menu-icon fa fa-caret-right"></i> Other</a></li>
</ul>
</li>
<li class="highlight hover">
<a href="#" class="dropdown-toggle">
<span class="menu-icon">ⅵ.</span>
<span class="menu-text">Custom Elements</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="hover"><a href="#custom/widget-box"><i class="menu-icon fa fa-caret-right"></i> Widget Boxes</a></li>
<li class="hover"><a href="#custom/scrollbar"><i class="menu-icon fa fa-caret-right"></i> Scrollbars</a></li>
<li class="hover"><a href="#custom/file-input"><i class="menu-icon fa fa-caret-right"></i> File Input</a></li>
<li class="hover"><a href="#custom/checkbox"><i class="menu-icon fa fa-caret-right"></i> Checkbox & Switches</a></li>
<li class="hover"><a href="#custom/colorpicker"><i class="menu-icon fa fa-caret-right"></i> Simple Color Picker</a></li>
<li class="hover"><a href="#custom/inline-editable"><i class="menu-icon fa fa-caret-right"></i> Inline Editable Addons</a></li>
<li class="hover"><a href="#custom/content-slider"><i class="menu-icon fa fa-caret-right"></i> Content Slider</a></li>
<li class="hover"><a href="#custom/onpage-help"><i class="menu-icon fa fa-caret-right"></i> Onpage Help</a></li>
<li class="hover"><a href="#custom/extra"><i class="menu-icon fa fa-caret-right"></i> Extra Classes</a></li>
</ul>
</li>
<li class="highlight hover">
<a href="#" class="dropdown-toggle">
<span class="menu-icon">ⅶ.</span>
<span class="menu-text">Pages</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="hover"><a href="#pages/dashboard"><i class="menu-icon fa fa-caret-right"></i> Dashboard</a></li>
<li class="hover"><a href="#pages/gallery"><i class="menu-icon fa fa-caret-right"></i> Gallery</a></li>
<li class="hover"><a href="#pages/pricing"><i class="menu-icon fa fa-caret-right"></i> Pricing</a></li>
<li class="hover"><a href="#pages/invoice"><i class="menu-icon fa fa-caret-right"></i> Invoice</a></li>
<li class="hover"><a href="#pages/faq"><i class="menu-icon fa fa-caret-right"></i> FAQ</a></li>
<li class="hover"><a href="#pages/inbox"><i class="menu-icon fa fa-caret-right"></i> Inbox</a></li>
<li class="hover"><a href="#pages/email"><i class="menu-icon fa fa-caret-right"></i> Email Templates</a></li>
<li class="hover"><a href="#pages/profile"><i class="menu-icon fa fa-caret-right"></i> Profile</a></li>
<li class="hover"><a href="#pages/timeline"><i class="menu-icon fa fa-caret-right"></i> Timeline</a></li>
<li class="hover"><a href="#pages/login"><i class="menu-icon fa fa-caret-right"></i> Login</a></li>
<li class="hover"><a href="#pages/error"><i class="menu-icon fa fa-caret-right"></i> Error</a></li>
</ul>
</li>
<li class="highlight hover">
<a href="#" class="dropdown-toggle">
<span class="menu-icon">ⅷ.</span>
<span class="menu-text">Plugins</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="hover">
<a href="#plugins/tools" class="dropdown-toggle">
<i class="menu-icon fa fa-caret-right"></i> Tools
<b class="arrow fa fa-angle-right"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="hover"><a href="#plugins/tools.node-js">Node.js</a></li>
<li class="hover"><a href="#plugins/tools.less-js">Less.js</a></li>
<li class="hover"><a href="#plugins/tools.mustache">Mustache Compilers</a></li>
<li class="hover"><a href="#plugins/tools.uglifyjs">UglifyJS</a></li>
<li class="hover"><a href="#plugins/tools.yui-compressor">YUI Compressor</a></li>
</ul>
</li>
<li class="hover"><a href="#plugins/bootstrap"><i class="menu-icon fa fa-caret-right"></i> Bootstrap</a></li>
<li class="hover"><a href="#plugins/jquery"><i class="menu-icon fa fa-caret-right"></i> jQuery</a></li>
<li class="hover">
<a href="#plugins/date-time" class="dropdown-toggle">
<i class="menu-icon fa fa-caret-right"></i> Date & Time
<b class="arrow fa fa-angle-right"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="hover"><a href="#plugins/date-time.datepicker">Date picker</a></li>
<li class="hover"><a href="#plugins/date-time.daterangepicker">Daterange Picker</a></li>
<li class="hover"><a href="#plugins/date-time.timepicker">Time Picker</a></li>
<li class="hover"><a href="#plugins/date-time.datetimepicker">Datetime Picker</a></li>
<li class="hover"><a href="#plugins/date-time.fullcalendar">FullCalendar</a></li>
</ul>
</li>
<li class="hover">
<a href="#plugins/charts" class="dropdown-toggle">
<i class="menu-icon fa fa-caret-right"></i> Charts
<b class="arrow fa fa-angle-right"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="hover"><a href="#plugins/charts.flot">jQuery Flot Charts</a></li>
<li class="hover"><a href="#plugins/charts.sparkline">jQuery Sparklines</a></li>
<li class="hover"><a href="#plugins/charts.easypiechart">Easy Pie Chart</a></li>
<li class="hover"><a href="#plugins/charts.knob">jQuery Knob</a></li>
</ul>
</li>
<li class="hover">
<a href="#plugins/tables" class="dropdown-toggle">
<i class="menu-icon fa fa-caret-right"></i> Table & Grids
<b class="arrow fa fa-angle-right"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="hover"><a href="#plugins/tables.datatables">jQuery dataTables</a></li>
<li class="hover"><a href="#plugins/tables.jqgrid">jQuery jqGrid</a></li>
</ul>
</li>
<li class="hover">
<a href="#plugins/input" class="dropdown-toggle">
<i class="menu-icon fa fa-caret-right"></i> Input & Controls
<b class="arrow fa fa-angle-right"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="hover"><a href="#plugins/input.chosen">Chosen</a></li>
<li class="hover"><a href="#plugins/input.select2">Select2</a></li>
<li class="hover"><a href="#plugins/input.tag-input">Tag Input</a></li>
<li class="hover"><a href="#plugins/input.duallist">Dual listbox</a></li>
<li class="hover"><a href="#plugins/input.multiselect">Multiselect</a></li>
<li class="hover"><a href="#plugins/input.masked-input">Masked Input</a></li>
<li class="hover"><a href="#plugins/input.limiter">Input Limiter</a></li>
<li class="hover"><a href="#plugins/input.autosize">Textarea Autosize</a></li>
</ul>
</li>
<li class="hover">
<a href="#plugins/editor" class="dropdown-toggle">
<i class="menu-icon fa fa-caret-right"></i> Editors
<b class="arrow fa fa-angle-right"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="hover"><a href="#plugins/editor.wysiwyg">Wysiwyg Editor</a></li>
<li class="hover"><a href="#plugins/editor.markdown">Markdown Editor</a></li>
</ul>
</li>
<li class="hover">
<a href="#plugins/fuelux" class="dropdown-toggle">
<i class="menu-icon fa fa-caret-right"></i> FuelUX
<b class="arrow fa fa-angle-right"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="hover"><a href="#plugins/fuelux.spinner">Spinner</a></li>
<li class="hover"><a href="#plugins/fuelux.wizard">Wizard</a></li>
<li class="hover"><a href="#plugins/fuelux.treeview">Treeview</a></li>
</ul>
</li>
<li class="hover">
<a href="#plugins/misc" class="dropdown-toggle">
<i class="menu-icon fa fa-caret-right"></i> Miscellaneous
<b class="arrow fa fa-angle-right"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="hover"><a href="#plugins/misc.inline-editable">Inline Editable</a></li>
<li class="hover"><a href="#plugins/misc.jquery-validate">jQuery Validate</a></li>
<li class="hover"><a href="#plugins/misc.colorbox">Colorbox</a></li>
<li class="hover"><a href="#plugins/misc.dropzone">Dropzone.js</a></li>
<li class="hover"><a href="#plugins/misc.colorpicker">Colorpicker</a></li>
<li class="hover"><a href="#plugins/misc.bootbox">Bootbox</a></li>
<li class="hover"><a href="#plugins/misc.gritter">Gritter</a></li>
<li class="hover"><a href="#plugins/misc.nestable-list">Nestable Lists</a></li>
<li class="hover"><a href="#plugins/misc.slimscroll">SlimScroll</a></li>
<li class="hover"><a href="#plugins/misc.raty">Star Rating</a></li>
</ul>
</li>
</ul>
</li>
<li class="highlight hover">
<a href="#settings" class="dropdown-toggle">
<span class="menu-icon">ⅸ.</span>
<span class="menu-text">Settings</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="hover"><a href="#settings.page"><i class="menu-icon fa fa-caret-right"></i> Page options</a></li>
<li class="hover"><a href="#settings.sidebar"><i class="menu-icon fa fa-caret-right"></i> Sidebar options</a></li>
<li class="hover"><a href="#settings.skins"><i class="menu-icon fa fa-caret-right"></i> Skins</a></li>
<li class="hover"><a href="#settings.rtl"><i class="menu-icon fa fa-caret-right"></i> RTL (right to left)</a></li>
<li class="hover"><a href="#settings.storage"><i class="menu-icon fa fa-caret-right"></i> Cookies & Storage</a></li>
</ul>
</li>
<li class="highlight">
<a href="#credits">
<span class="menu-icon">ⅹ.</span>
<span class="menu-text">Credits</span>
</a>
<b class="arrow"></b>
</li>
<li class="highlight">
<a href="#issues">
<i class="menu-icon fa fa-gavel"></i>
<span class="menu-text">Issues</span>
</a>
<b class="arrow"></b>
</li>
</ul>
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
<i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
</div>
<div class="main-content">
<div class="page-content">
</div><!-- /.page-content -->
</div><!-- /.main-content -->
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a><!-- /.btn-scroll-up -->
</div><!-- /.main-container -->
<!--[if !IE]> -->
<script src="../assets/js/jquery.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="../assets/js/jquery1x.js"></script>
<![endif]-->
<script src="../assets/js/bootstrap.js"></script>
<script src="../assets/js/prettify.js"></script>
<script src="../assets/js/ace-extra.js"></script>
<script src="../assets/js/ace-elements.js"></script>
<script src="../assets/js/ace.js"></script>
<script>
$(function() {
//$('body').scrollspy({ target: '.sidebar' })
//used for top next/prev buttons
var section_list = [], section_map = {}, current = 0;
var sindex = 0;
$('.sidebar .nav-list a').each(function() {
var href = getHref($(this).attr('href'));
if(href) {
section_list.push(href);
section_map[href] = sindex++;
}
});
$('#help-move-prev').on('click', function(e) {
e.preventDefault();
if( --current >= 0 ) {
var href = section_list[current];
document.location.hash = href;
}
if(current < 0) current = 0;
});
$('#help-move-next').on('click', function(e) {
e.preventDefault();
if( ++current < section_list.length ) {
var href = section_list[current];
document.location.hash = href;
}
if(current >= section_list.length) current = section_list.length - 1;
});
//$(document).on('show.ace.widget hide.ace.widget', '.help-content > .widget-box', function(e) {
//disable button action
//e.preventDefault();
//});
$(document).on(ace.click_event, '.help-content > .widget-box > .widget-header > .info-title', function(e) {
var widget_box = $(this).closest('.widget-box').widget_box('toggle');
//widget_box.siblings('.widget-box').widget_box('hide');
});
$(document).off(ace.click_event+'.ace.submenu', '.sidebar .nav-list');
$(document).on(ace.click_event+'.ace.submenu', '.sidebar .nav-list a', function(e) {
var href = getHref($(this).attr('href'));
if(!href) return false;
});
$(window).on('hashchange.help', function(e) {
var href = getHref(window.location.hash);
if(!href) return false;
return gotoUrl(href);
})
$(document).on(ace.click_event+'.help', '.help-more', function(ev) {
//clicking on a link triggers 'hashchange', so it's not needed
//but if we already are on a hash such as '#hash1'
//and click a '#hash1' link, 'hashchange' won't be triggered and we won't scroll to our content
var href = $(this).attr('href');
if(window.location.hash == href) gotoUrl(href);
});
var href = getHref(window.location.hash);
if(!href) window.location.hash = '#intro';
else $(window).triggerHandler('hashchange.help');
var prev_target = null;
function gotoUrl(href) {
current = section_map[href];
var url = href.replace(/\..*$/g, '').replace(/#/gi , '')
var parts = url.split('/');
if(parts.length == 1) {
if(url.length == 0) url = 'intro';
url = url+'/index.html';
}
else if(parts.length > 1) {
url = url+'.html';
}
$('.sidebar .active').removeClass('active');
var link = $('a[href="'+href+'"]').eq(0);
link.parents('li').addClass('active');
var text = $.trim(link.find('.menu-text').text());
if(text.length == 0) text = $.trim(link.text());
document.title = text + " - Ace Docs";
//if(text == '');
var ret = scrollToTarget(href);
if(ret === false) {
$('.page-content').empty().html('<i class="ace-icon fa fa-spinner fa-spin blue fa-2x"></i>');
//otherwise try downloading the page
$.ajax({url: 'sections/'+url}).done(function(result) {
result = result.replace(/\<pre(?:\s+)data\-language=["'](?:html|javascript|php)["']\>([\S|\s]+?)\<\/pre\>/ig, function(a, b){
return a.replace(b , b.replace(/\</g , '<').replace(/\>/g , '>'));
});
$('.page-content').addClass('hidden').empty().html(result);
formatResult();
ret = scrollToTarget(href);
if(ret) document.title = ret + " - Ace Docs";
}).fail(function() {
$('.page-content').empty().html('<div class="alert alert-danger"><i class="fa fa-warning"></i> Unable to load page!</div>');
});
}
else if(ret) document.title = ret + " - Ace Docs";
return true;
}
function formatResult() {
$('.page-content .info-section').each(function() {
var header = $(this).prevAll('.info-title').eq(0).addClass('widget-title').wrap('<div class="widget-header" />')
.parent().append('<div class="widget-toolbar no-border">\
<a href="#" data-action="collapse">\
<i data-icon-hide="fa-minus" data-icon-show="fa-plus" class="ace-icon fa fa-plus"></i>\
</a>\
</div>').closest('.widget-header');
$(this).wrap('<div class="widget-box transparent'+(header.length > 0 ? ' collapsed':'')+'"><div class="widget-body"><div class="widget-main"></div></div></div>');
$(this).closest('.widget-box').prepend(header);
$(this).ace_scroll({size: parseInt($(window).height() - 200), reset: true});
//.parent().css({'max-height':400, 'overflow-y':'scroll'});//
});
Rainbow.color();
$('.page-content').removeClass('hidden');
}
function getHref(href) {
href = href && href.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
href = $.trim(href);
if(href.match(/[\#\/]$/i)) return false;
return href;
}
function scrollToTarget(href) {
target = $('[data-id="'+href+'"]').eq(0);
if(target.length == 1) {
target.closest('.widget-box').widget_box('show');
//if target exists on page scroll to it
$('html,body').animate({scrollTop: target.offset().top - 75} , 300);
if(prev_target) prev_target.find('.fa-angle-right').remove();
if(!target.is('h1')) target.prepend('<i class="fa fa-angle-right red"></i> ');
prev_target = target;
return target.text().replace(/^[\d\s\.]+/ig, '');//convert "4. something" to "something"
}
return false;//section not found, go back and get it via ajax
}
$(document).on(ace.click_event, '.open-file[data-open-file]', function() {
var url = $(this).text();
var language = $(this).attr('data-open-file');
$.ajax({url: '../'+url, dataType:'text'}).done(function(content) {
if(language != 'json') {
if(language != 'css') {
//replace each tab character with two spaces (only those that start at a new line)
content = content.replace(/\n[\t]{1,}/g, function(p, q) {
return p.replace(/\t/g, " ");
});
} else {
content = content.replace(/\t/g , " ")
}
}
else {
content = JSON.stringify(JSON.parse(content), null, 2);
}
content = content.replace(/\>/g, '>').replace(/\</g, '<')
Rainbow.color(content, language, function(highlighted_code) {
display_code(url, highlighted_code);
});
});
});
function display_code(url, highlighted_code) {
var modal = $(document.body).find('#code-modal');
if(modal.length == 0) {
modal = $('<div id="code-modal" class="modal fade code-modal" tabindex="-1" role="dialog" aria-labelledby="CodeDialog" aria-hidden="true">\
<div class="modal-dialog modal-lg">\
<div class="modal-content">\
<div class="modal-header">\
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>\
<i class="fa fa-file-o"></i>\
<code class="code-url"></code>\
</div>\
<div class="modal-body"><pre class="code-content"></pre></div>\
</div>\
</div>\
</div>').appendTo('body');
}
modal.find('.code-url').html(url);
modal.find('.code-content').html(highlighted_code);
modal.modal('show');
}
$(document).on('click', 'a[href^="http"]', function(ev) {
//go to a url, using meta refresh tag, to avoid sending 'referrer' url,
//maybe because of hiding development server's directory and folders
ev.preventDefault();
var url = $(this).attr('href');
var win = window.open('blank.html');
win.onload = function() {
win.document.write('<meta http-equiv="refresh" content="0; url='+url+'">');
}
});
});
</script>
<script src="assets/js/rainbow.js"></script>
<script src="assets/js/language/generic.js"></script>
<script src="assets/js/language/html.js"></script>
<script src="assets/js/language/javascript.js"></script>
<script src="assets/js/language/css.js"></script>
<script src="assets/js/language/php.js"></script>
</body>
</html>