HelpDialog.js 8.2 KB

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