提交 | 用户 | 时间
|
58d006
|
1 |
jQuery(function($) { |
A |
2 |
var help = null;//Onpage_Help instance |
|
3 |
|
|
4 |
//for ace demo pages, we temporarily disable fixed navbar, etc ... when help is enabled |
|
5 |
//because when an element is fixed, its highlighted help section should also become fixed! |
|
6 |
var before_enable_help = function() { |
|
7 |
$('#btn-scroll-up').css('z-index', 1000000);//bring btn-scroll-up higher , to be over our help area |
|
8 |
|
|
9 |
//save our current state of navbar, sidebar and breadcrumbs before enabling help |
|
10 |
ace.settings.saveState('navbar', 'class'); |
|
11 |
ace.settings.saveState('sidebar', 'class'); |
|
12 |
ace.settings.saveState('breadcrumbs', 'class'); |
|
13 |
|
|
14 |
//now disable fixed navbar, which automatically disabled fixes sidebar and breadcrumbs |
|
15 |
try { |
|
16 |
ace.settingFunction.navbar_fixed(null, false , false); |
|
17 |
} catch(ex) {} |
|
18 |
} |
|
19 |
var after_disable_help = function() { |
|
20 |
$('#btn-scroll-up').css('z-index', ''); |
|
21 |
|
|
22 |
//restore fixed state of navbar, sidebar, etc |
|
23 |
ace.settings.loadState('navbar', 'class'); |
|
24 |
ace.settings.loadState('sidebar', 'class'); |
|
25 |
ace.settings.loadState('breadcrumbs', 'class'); |
|
26 |
} |
|
27 |
|
|
28 |
var get_file_url = function(url, language) { |
|
29 |
//function that return the real path to a file which is being loaded |
|
30 |
return this.settings.base + '/' + url; |
|
31 |
} |
|
32 |
var get_section_url = function(section_name) { |
|
33 |
//according to a section_name such as `basics/navbar.toggle` return the file url which contains help content |
|
34 |
section_name = section_name || ''; |
|
35 |
|
|
36 |
//for example convert `basic/navbar.layout.brand` to `basic/navbar` |
|
37 |
//because 'layout.brand' section is inside `basic/navbar.html` file |
|
38 |
var url = section_name.replace(/\..*$/g, ''); |
|
39 |
|
|
40 |
var parts = url.split('/'); |
|
41 |
if(parts.length == 1) { |
|
42 |
//for example convert `changes` to `changes/index.html` |
|
43 |
if(url.length == 0) url = 'intro';//or convert `empty string` to `intro/index.html` |
|
44 |
url = url + '/index.html'; |
|
45 |
} |
|
46 |
else if(parts.length > 1) { |
|
47 |
//for example convert `basics/navbar.layout` to `basics/navbar.html` |
|
48 |
url = url + '.html'; |
|
49 |
} |
|
50 |
return this.settings.base + '/docs/sections/' + url; |
|
51 |
} |
|
52 |
var get_img_url = function(src) { |
|
53 |
return this.settings.base + '/docs/' +src; |
|
54 |
} |
|
55 |
|
|
56 |
/** |
|
57 |
var code_highlight = function(e, language) { |
|
58 |
//'this' refers to 'Onpage_Help' object invoking this function |
|
59 |
if(typeof e === 'string') { |
|
60 |
if(typeof language === 'string') { |
|
61 |
//called when a file (html,css,etc) is loaded |
|
62 |
//'e' is a piece of code |
|
63 |
//maybe highlight the syntax it according to `language` and return result |
|
64 |
} |
|
65 |
else { |
|
66 |
//called before new help content is being displayed |
|
67 |
//'e' is a string which may contain <pre>...</pre> code sections |
|
68 |
//which you may want to highlight the code, or for example convert them < to < and > to > |
|
69 |
//and return the result |
|
70 |
} |
|
71 |
} |
|
72 |
else if(typeof e === 'object') { |
|
73 |
//called when new help content is displayed |
|
74 |
//'e' is an html element which may have "pre" children that you can syntax-highlight |
|
75 |
} |
|
76 |
} |
|
77 |
*/ |
|
78 |
|
|
79 |
|
|
80 |
function startHelp() { |
|
81 |
if(help !== null) return;//already created? |
|
82 |
|
|
83 |
help = new Onpage_Help({ |
|
84 |
'include_all': false, |
|
85 |
'base': ace.vars['base'] || '../..', |
|
86 |
'file_url': get_file_url, |
|
87 |
'section_url': get_section_url, |
|
88 |
|
|
89 |
'img_url': get_img_url, |
|
90 |
|
|
91 |
'before_enable': before_enable_help, |
|
92 |
'after_disable': after_disable_help |
|
93 |
|
|
94 |
//,'code_highlight': code_highlight |
|
95 |
}) |
|
96 |
|
|
97 |
|
|
98 |
|
|
99 |
var help_container = $('#onpage-help-container'); |
|
100 |
//add a custom button to enable/disable help |
|
101 |
help_container.append('<div class="ace-settings-container onpage-help-toggle-container">\ |
|
102 |
<div id="onpage-help-toggle-btn" class="btn btn-app btn-xs btn-info ace-settings-btn onpage-help-toggle-btn">\ |
|
103 |
<i class="onpage-help-toggle-text ace-icon fa fa-question bigger-150"></i>\ |
|
104 |
</div>\ |
|
105 |
</div>'); |
|
106 |
|
|
107 |
$('#onpage-help-toggle-btn').on('click', function(e) { |
|
108 |
e.preventDefault(); |
|
109 |
toggleHelp(); |
|
110 |
}) |
|
111 |
|
|
112 |
//add .container class to help container div when our content is put inside a ".container" |
|
113 |
$(document).on('settings.ace.help', function(ev, event_name, fixed) { |
|
114 |
if(event_name == 'main_container_fixed') { |
|
115 |
if(fixed) help_container.addClass('container'); |
|
116 |
else help_container.removeClass('container'); |
|
117 |
} |
|
118 |
}).triggerHandler('settings.ace.help', ['main_container_fixed', $('.main-container').hasClass('container')]) |
|
119 |
|
|
120 |
//in ajax mode when a content is loaded via ajax, we may want to update help sections |
|
121 |
$(document).on('ajaxloadcomplete.ace.help', function() { |
|
122 |
help.update_sections(); |
|
123 |
}); |
|
124 |
} |
|
125 |
|
|
126 |
function toggleHelp() { |
|
127 |
help.toggle(); |
|
128 |
|
|
129 |
var toggle_btn = $('#onpage-help-toggle-btn'); |
|
130 |
toggle_btn.find('.onpage-help-toggle-text').removeClass('onpage-help-toggle-text'); |
|
131 |
toggle_btn.toggleClass('btn-grey btn-info').parent().toggleClass('active'); |
|
132 |
} |
|
133 |
|
|
134 |
|
|
135 |
$(window).on('hashchange.start_help', function(e) { |
|
136 |
if(help == null && window.location.hash == '#help') { |
|
137 |
startHelp(); |
|
138 |
|
|
139 |
//add #help tag to sidebar links to enable help when navigating to the page |
|
140 |
$(document).on('click.start_help', '.sidebar .nav-list a', function() { |
|
141 |
var href = $(this).attr('href'); |
|
142 |
if( !href.match(/\#help$/) ) $(this).attr('href', href+'#help'); |
|
143 |
}); |
|
144 |
} |
|
145 |
}).triggerHandler('hashchange.start_help'); |
|
146 |
|
|
147 |
|
|
148 |
//some buttons inside demo pages that launch a help section |
|
149 |
$(document).on('click', '.btn-display-help', function(e) { |
|
150 |
e.preventDefault(); |
|
151 |
|
|
152 |
startHelp(); |
|
153 |
if( !help.is_active() ) toggleHelp(); |
|
154 |
|
|
155 |
var section = $(this).attr('href'); |
|
156 |
help.show_section_help(section); |
|
157 |
}); |
|
158 |
}); |