jQuery(function($) {
|
var help = null;//Onpage_Help instance
|
|
//for ace demo pages, we temporarily disable fixed navbar, etc ... when help is enabled
|
//because when an element is fixed, its highlighted help section should also become fixed!
|
var before_enable_help = function() {
|
$('#btn-scroll-up').css('z-index', 1000000);//bring btn-scroll-up higher , to be over our help area
|
|
//save our current state of navbar, sidebar and breadcrumbs before enabling help
|
ace.settings.saveState('navbar', 'class');
|
ace.settings.saveState('sidebar', 'class');
|
ace.settings.saveState('breadcrumbs', 'class');
|
|
//now disable fixed navbar, which automatically disabled fixes sidebar and breadcrumbs
|
try {
|
ace.settingFunction.navbar_fixed(null, false , false);
|
} catch(ex) {}
|
}
|
var after_disable_help = function() {
|
$('#btn-scroll-up').css('z-index', '');
|
|
//restore fixed state of navbar, sidebar, etc
|
ace.settings.loadState('navbar', 'class');
|
ace.settings.loadState('sidebar', 'class');
|
ace.settings.loadState('breadcrumbs', 'class');
|
}
|
|
var get_file_url = function(url, language) {
|
//function that return the real path to a file which is being loaded
|
return this.settings.base + '/' + url;
|
}
|
var get_section_url = function(section_name) {
|
//according to a section_name such as `basics/navbar.toggle` return the file url which contains help content
|
section_name = section_name || '';
|
|
//for example convert `basic/navbar.layout.brand` to `basic/navbar`
|
//because 'layout.brand' section is inside `basic/navbar.html` file
|
var url = section_name.replace(/\..*$/g, '');
|
|
var parts = url.split('/');
|
if(parts.length == 1) {
|
//for example convert `changes` to `changes/index.html`
|
if(url.length == 0) url = 'intro';//or convert `empty string` to `intro/index.html`
|
url = url + '/index.html';
|
}
|
else if(parts.length > 1) {
|
//for example convert `basics/navbar.layout` to `basics/navbar.html`
|
url = url + '.html';
|
}
|
return this.settings.base + '/docs/sections/' + url;
|
}
|
var get_img_url = function(src) {
|
return this.settings.base + '/docs/' +src;
|
}
|
|
/**
|
var code_highlight = function(e, language) {
|
//'this' refers to 'Onpage_Help' object invoking this function
|
if(typeof e === 'string') {
|
if(typeof language === 'string') {
|
//called when a file (html,css,etc) is loaded
|
//'e' is a piece of code
|
//maybe highlight the syntax it according to `language` and return result
|
}
|
else {
|
//called before new help content is being displayed
|
//'e' is a string which may contain <pre>...</pre> code sections
|
//which you may want to highlight the code, or for example convert them < to < and > to >
|
//and return the result
|
}
|
}
|
else if(typeof e === 'object') {
|
//called when new help content is displayed
|
//'e' is an html element which may have "pre" children that you can syntax-highlight
|
}
|
}
|
*/
|
|
|
function startHelp() {
|
if(help !== null) return;//already created?
|
|
help = new Onpage_Help({
|
'include_all': false,
|
'base': ace.vars['base'] || '../..',
|
'file_url': get_file_url,
|
'section_url': get_section_url,
|
|
'img_url': get_img_url,
|
|
'before_enable': before_enable_help,
|
'after_disable': after_disable_help
|
|
//,'code_highlight': code_highlight
|
})
|
|
|
|
var help_container = $('#onpage-help-container');
|
//add a custom button to enable/disable help
|
help_container.append('<div class="ace-settings-container onpage-help-toggle-container">\
|
<div id="onpage-help-toggle-btn" class="btn btn-app btn-xs btn-info ace-settings-btn onpage-help-toggle-btn">\
|
<i class="onpage-help-toggle-text ace-icon fa fa-question bigger-150"></i>\
|
</div>\
|
</div>');
|
|
$('#onpage-help-toggle-btn').on('click', function(e) {
|
e.preventDefault();
|
toggleHelp();
|
})
|
|
//add .container class to help container div when our content is put inside a ".container"
|
$(document).on('settings.ace.help', function(ev, event_name, fixed) {
|
if(event_name == 'main_container_fixed') {
|
if(fixed) help_container.addClass('container');
|
else help_container.removeClass('container');
|
}
|
}).triggerHandler('settings.ace.help', ['main_container_fixed', $('.main-container').hasClass('container')])
|
|
//in ajax mode when a content is loaded via ajax, we may want to update help sections
|
$(document).on('ajaxloadcomplete.ace.help', function() {
|
help.update_sections();
|
});
|
}
|
|
function toggleHelp() {
|
help.toggle();
|
|
var toggle_btn = $('#onpage-help-toggle-btn');
|
toggle_btn.find('.onpage-help-toggle-text').removeClass('onpage-help-toggle-text');
|
toggle_btn.toggleClass('btn-grey btn-info').parent().toggleClass('active');
|
}
|
|
|
$(window).on('hashchange.start_help', function(e) {
|
if(help == null && window.location.hash == '#help') {
|
startHelp();
|
|
//add #help tag to sidebar links to enable help when navigating to the page
|
$(document).on('click.start_help', '.sidebar .nav-list a', function() {
|
var href = $(this).attr('href');
|
if( !href.match(/\#help$/) ) $(this).attr('href', href+'#help');
|
});
|
}
|
}).triggerHandler('hashchange.start_help');
|
|
|
//some buttons inside demo pages that launch a help section
|
$(document).on('click', '.btn-display-help', function(e) {
|
e.preventDefault();
|
|
startHelp();
|
if( !help.is_active() ) toggleHelp();
|
|
var section = $(this).attr('href');
|
help.show_section_help(section);
|
});
|
});
|
