HelpDialog.js (8409B)
1 /************************************************************* 2 * 3 * MathJax/extensions/HelpDialog.js 4 * 5 * Implements the MathJax Help dialog box. 6 * 7 * --------------------------------------------------------------------- 8 * 9 * Copyright (c) 2013-2015 The MathJax Consortium 10 * 11 * Licensed under the Apache License, Version 2.0 (the "License"); 12 * you may not use this file except in compliance with the License. 13 * You may obtain a copy of the License at 14 * 15 * http://www.apache.org/licenses/LICENSE-2.0 16 * 17 * Unless required by applicable law or agreed to in writing, software 18 * distributed under the License is distributed on an "AS IS" BASIS, 19 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 20 * See the License for the specific language governing permissions and 21 * limitations under the License. 22 */ 23 24 (function (HUB,HTML,AJAX,OUTPUT,LOCALE) { 25 26 var HELP = MathJax.Extension.Help = { 27 version: "2.6.0" 28 }; 29 30 var STIXURL = "http://www.stixfonts.org/"; 31 var MENU = MathJax.Menu; 32 var FALSE, KEY; 33 HUB.Register.StartupHook("MathEvents Ready",function () { 34 FALSE = MathJax.Extension.MathEvents.Event.False; 35 KEY = MathJax.Extension.MathEvents.Event.KEY; 36 }); 37 38 39 var CONFIG = HUB.CombineConfig("HelpDialog",{ 40 41 styles: { 42 "#MathJax_Help": { 43 position:"fixed", left:"50%", width:"auto", "max-width": "90%", "text-align":"center", 44 border:"3px outset", padding:"1em 2em", "background-color":"#DDDDDD", color:"black", 45 cursor: "default", "font-family":"message-box", "font-size":"120%", 46 "font-style":"normal", "text-indent":0, "text-transform":"none", 47 "line-height":"normal", "letter-spacing":"normal", "word-spacing":"normal", 48 "word-wrap":"normal", "white-space":"wrap", "float":"none", "z-index":201, 49 50 "border-radius": "15px", // Opera 10.5 and IE9 51 "-webkit-border-radius": "15px", // Safari and Chrome 52 "-moz-border-radius": "15px", // Firefox 53 "-khtml-border-radius": "15px", // Konqueror 54 55 "box-shadow":"0px 10px 20px #808080", // Opera 10.5 and IE9 56 "-webkit-box-shadow":"0px 10px 20px #808080", // Safari 3 and Chrome 57 "-moz-box-shadow":"0px 10px 20px #808080", // Forefox 3.5 58 "-khtml-box-shadow":"0px 10px 20px #808080", // Konqueror 59 filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')" // IE 60 }, 61 "#MathJax_Help.MathJax_MousePost": { 62 outline:"none" 63 }, 64 65 "#MathJax_HelpContent": { 66 overflow:"auto", "text-align":"left", "font-size":"80%", 67 padding:".4em .6em", border:"1px inset", margin:"1em 0px", 68 "max-height":"20em", "max-width":"30em", "background-color":"#EEEEEE" 69 }, 70 71 "#MathJax_HelpClose": { 72 position:"absolute", top:".2em", right:".2em", 73 cursor:"pointer", 74 display:"inline-block", 75 border:"2px solid #AAA", 76 "border-radius":"18px", 77 "-webkit-border-radius": "18px", // Safari and Chrome 78 "-moz-border-radius": "18px", // Firefox 79 "-khtml-border-radius": "18px", // Konqueror 80 "font-family":"'Courier New',Courier", 81 "font-size":"24px", 82 color:"#F0F0F0" 83 }, 84 "#MathJax_HelpClose span": { 85 display:"block", "background-color":"#AAA", border:"1.5px solid", 86 "border-radius":"18px", 87 "-webkit-border-radius": "18px", // Safari and Chrome 88 "-moz-border-radius": "18px", // Firefox 89 "-khtml-border-radius": "18px", // Konqueror 90 "line-height":0, 91 padding:"8px 0 6px" // may need to be browser-specific 92 }, 93 "#MathJax_HelpClose:hover": { 94 color:"white!important", 95 border:"2px solid #CCC!important" 96 }, 97 "#MathJax_HelpClose:hover span": { 98 "background-color":"#CCC!important" 99 }, 100 "#MathJax_HelpClose:hover:focus": { 101 outline:"none" 102 } 103 } 104 }); 105 106 /* 107 * Handle the Help Dialog box 108 */ 109 HELP.Dialog = function (event) { 110 LOCALE.loadDomain("HelpDialog",["Post",HELP,event]); 111 }; 112 113 HELP.Post = function (event) { 114 this.div = MENU.Background(this); 115 var help = HTML.addElement(this.div,"div",{ 116 id: "MathJax_Help", tabIndex: 0, onkeydown: HELP.Keydown 117 },LOCALE._("HelpDialog",[ 118 ["b",{style:{fontSize:"120%"}},[["Help","MathJax Help"]]], 119 ["div",{id: "MathJax_HelpContent", tabIndex: 0},[ 120 ["p",{},[["MathJax", 121 "*MathJax* is a JavaScript library that allows page authors to include " + 122 "mathematics within their web pages. As a reader, you don't need to do " + 123 "anything to make that happen."]] 124 ], 125 ["p",{},[["Browsers", 126 "*Browsers*: MathJax works with all modern browsers including IE6+, Firefox 3+, " + 127 "Chrome 0.2+, Safari 2+, Opera 9.6+ and most mobile browsers."]] 128 ], 129 ["p",{},[["Menu", 130 "*Math Menu*: MathJax adds a contextual menu to equations. Right-click or " + 131 "CTRL-click on any mathematics to access the menu."]] 132 ], 133 ["div",{style:{"margin-left":"1em"}},[ 134 ["p",{},[["ShowMath", 135 "*Show Math As* allows you to view the formula's source markup " + 136 "for copy & paste (as MathML or in its original format)."]] 137 ], 138 ["p",{},[["Settings", 139 "*Settings* gives you control over features of MathJax, such as the " + 140 "size of the mathematics, and the mechanism used to display equations."]] 141 ], 142 ["p",{},[["Language", 143 "*Language* lets you select the language used by MathJax for its menus " + 144 "and warning messages."]] 145 ], 146 ]], 147 ["p",{},[["Zoom", 148 "*Math Zoom*: If you are having difficulty reading an equation, MathJax can " + 149 "enlarge it to help you see it better."]] 150 ], 151 ["p",{},[["Accessibilty", 152 "*Accessibility*: MathJax will automatically work with screen readers to make " + 153 "mathematics accessible to the visually impaired."]] 154 ], 155 ["p",{},[["Fonts", 156 "*Fonts*: MathJax will use certain math fonts if they are installed on your " + 157 "computer; otherwise, it will use web-based fonts. Although not required, " + 158 "locally installed fonts will speed up typesetting. We suggest installing " + 159 "the [STIX fonts](%1).",STIXURL]] 160 ] 161 ]], 162 ["a",{href:"http://www.mathjax.org/"},["www.mathjax.org"]], 163 ["span",{id: "MathJax_HelpClose", onclick: HELP.Remove, 164 onkeydown: HELP.Keydown, tabIndex: 0, role: "button", 165 "aria-label": LOCALE._(["HelpDialog","CloseDialog"],"Close help dialog")}, 166 [["span",{},["\u00D7"]]] 167 ] 168 ])); 169 if (event.type === "mouseup") help.className += " MathJax_MousePost"; 170 help.focus(); 171 LOCALE.setCSS(help); 172 var doc = (document.documentElement||{}); 173 var H = window.innerHeight || doc.clientHeight || doc.scrollHeight || 0; 174 if (MENU.prototype.msieAboutBug) { 175 help.style.width = "20em"; help.style.position = "absolute"; 176 help.style.left = Math.floor((document.documentElement.scrollWidth - help.offsetWidth)/2)+"px"; 177 help.style.top = (Math.floor((H-help.offsetHeight)/3)+document.body.scrollTop)+"px"; 178 } else { 179 help.style.marginLeft = Math.floor(-help.offsetWidth/2)+"px"; 180 help.style.top = Math.floor((H-help.offsetHeight)/3)+"px"; 181 } 182 }; 183 HELP.Remove = function (event) { 184 if (HELP.div) {document.body.removeChild(HELP.div); delete HELP.div} 185 }; 186 HELP.Keydown = function(event) { 187 if (event.keyCode === KEY.ESCAPE || 188 (this.id === "MathJax_HelpClose" && 189 (event.keyCode === KEY.SPACE || event.keyCode === KEY.RETURN))) { 190 HELP.Remove(event); 191 MENU.CurrentNode().focus(); 192 FALSE(event); 193 } 194 }, 195 196 MathJax.Callback.Queue( 197 HUB.Register.StartupHook("End Config",{}), // wait until config is complete 198 ["Styles",AJAX,CONFIG.styles], 199 ["Post",HUB.Startup.signal,"HelpDialig Ready"], 200 ["loadComplete",AJAX,"[MathJax]/extensions/HelpDialog.js"] 201 ); 202 203 })(MathJax.Hub,MathJax.HTML,MathJax.Ajax,MathJax.OutputJax,MathJax.Localization);