| 提交 | 用户 | 时间 | ||
| 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 | }); | |
