HelpDialog.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. /* -*- Mode: Javascript; indent-tabs-mode:nil; js-indent-level: 2 -*- */
  2. /* vim: set ts=2 et sw=2 tw=80: */
  3. /*************************************************************
  4. *
  5. * MathJax/extensions/HelpDialog.js
  6. *
  7. * Implements the MathJax Help dialog box.
  8. *
  9. * ---------------------------------------------------------------------
  10. *
  11. * Copyright (c) 2013 The MathJax Consortium
  12. *
  13. * Licensed under the Apache License, Version 2.0 (the "License");
  14. * you may not use this file except in compliance with the License.
  15. * You may obtain a copy of the License at
  16. *
  17. * http://www.apache.org/licenses/LICENSE-2.0
  18. *
  19. * Unless required by applicable law or agreed to in writing, software
  20. * distributed under the License is distributed on an "AS IS" BASIS,
  21. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  22. * See the License for the specific language governing permissions and
  23. * limitations under the License.
  24. */
  25. (function (HUB,HTML,AJAX,OUTPUT,LOCALE) {
  26. var HELP = MathJax.Extension.Help = {
  27. version: "2.2"
  28. };
  29. var STIXURL = "http://www.stixfonts.org/";
  30. var MENU = MathJax.Menu;
  31. var CONFIG = HUB.CombineConfig("HelpDialog",{
  32. closeImg: AJAX.fileURL(OUTPUT.imageDir+"/CloseX-31.png"), // image for close "X" for mobiles
  33. styles: {
  34. "#MathJax_Help": {
  35. position:"fixed", left:"50%", width:"auto", "max-width": "90%", "text-align":"center",
  36. border:"3px outset", padding:"1em 2em", "background-color":"#DDDDDD", color:"black",
  37. cursor: "default", "font-family":"message-box", "font-size":"120%",
  38. "font-style":"normal", "text-indent":0, "text-transform":"none",
  39. "line-height":"normal", "letter-spacing":"normal", "word-spacing":"normal",
  40. "word-wrap":"normal", "white-space":"wrap", "float":"none", "z-index":201,
  41. "border-radius": "15px", // Opera 10.5 and IE9
  42. "-webkit-border-radius": "15px", // Safari and Chrome
  43. "-moz-border-radius": "15px", // Firefox
  44. "-khtml-border-radius": "15px", // Konqueror
  45. "box-shadow":"0px 10px 20px #808080", // Opera 10.5 and IE9
  46. "-webkit-box-shadow":"0px 10px 20px #808080", // Safari 3 and Chrome
  47. "-moz-box-shadow":"0px 10px 20px #808080", // Forefox 3.5
  48. "-khtml-box-shadow":"0px 10px 20px #808080", // Konqueror
  49. filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')" // IE
  50. },
  51. "#MathJax_HelpContent": {
  52. overflow:"auto", "text-align":"left", "font-size":"80%",
  53. padding:".4em .6em", border:"1px inset", margin:"1em 0px",
  54. "max-height":"20em", "max-width":"30em", "background-color":"#EEEEEE"
  55. }
  56. }
  57. });
  58. /*
  59. * Handle the Help Dialog box
  60. */
  61. HELP.Dialog = function () {
  62. LOCALE.loadDomain("HelpDialog",["Post",HELP]);
  63. };
  64. HELP.Post = function () {
  65. this.div = MENU.Background(this);
  66. var help = HTML.addElement(this.div,"div",{
  67. id: "MathJax_Help"
  68. },LOCALE._("HelpDialog",[
  69. ["b",{style:{fontSize:"120%"}},[["Help","MathJax Help"]]],
  70. ["div",{id: "MathJax_HelpContent"},[
  71. ["p",{},[["MathJax",
  72. "*MathJax* is a JavaScript library that allows page authors to include " +
  73. "mathematics within their web pages. As a reader, you don't need to do " +
  74. "anything to make that happen."]]
  75. ],
  76. ["p",{},[["Browsers",
  77. "*Browsers*: MathJax works with all modern browsers including IE6+, Firefox 3+, " +
  78. "Chrome 0.2+, Safari 2+, Opera 9.6+ and most mobile browsers."]]
  79. ],
  80. ["p",{},[["Menu",
  81. "*Math Menu*: MathJax adds a contextual menu to equations. Right-click or " +
  82. "CTRL-click on any mathematics to access the menu."]]
  83. ],
  84. ["div",{style:{"margin-left":"1em"}},[
  85. ["p",{},[["ShowMath",
  86. "*Show Math As* allows you to view the formula's source markup " +
  87. "for copy & paste (as MathML or in its origianl format)."]]
  88. ],
  89. ["p",{},[["Settings",
  90. "*Settings* gives you control over features of MathJax, such as the " +
  91. "size of the mathematics, and the mechanism used to display equations."]]
  92. ],
  93. ["p",{},[["Language",
  94. "*Language* lets you select the language used by MathJax for its menus " +
  95. "and warning messages."]]
  96. ],
  97. ]],
  98. ["p",{},[["Zoom",
  99. "*Math Zoom*: If you are having difficulty reading an equation, MathJax can " +
  100. "enlarge it to help you see it better."]]
  101. ],
  102. ["p",{},[["Accessibilty",
  103. "*Accessibility*: MathJax will automatically work with screen readers to make " +
  104. "mathematics accessible to the visually impaired."]]
  105. ],
  106. ["p",{},[["Fonts",
  107. "*Fonts*: MathJax will use certain math fonts if they are installed on your " +
  108. "computer; otherwise, it will use web-based fonts. Although not required, " +
  109. "locally installed fonts will speed up typesetting. We suggest installing " +
  110. "the [STIX fonts](%1).",STIXURL]]
  111. ]
  112. ]],
  113. ["a",{href:"http://www.mathjax.org/"},["www.mathjax.org"]],
  114. ["img", {
  115. src: CONFIG.closeImg,
  116. style: {width:"21px", height:"21px", position:"absolute", top:".2em", right:".2em"},
  117. onclick: HELP.Remove
  118. }]
  119. ]));
  120. LOCALE.setCSS(help);
  121. var doc = (document.documentElement||{});
  122. var H = window.innerHeight || doc.clientHeight || doc.scrollHeight || 0;
  123. if (MENU.prototype.msieAboutBug) {
  124. help.style.width = "20em"; help.style.position = "absolute";
  125. help.style.left = Math.floor((document.documentElement.scrollWidth - help.offsetWidth)/2)+"px";
  126. help.style.top = (Math.floor((H-help.offsetHeight)/3)+document.body.scrollTop)+"px";
  127. } else {
  128. help.style.marginLeft = Math.floor(-help.offsetWidth/2)+"px";
  129. help.style.top = Math.floor((H-help.offsetHeight)/3)+"px";
  130. }
  131. };
  132. HELP.Remove = function (event) {
  133. if (HELP.div) {document.body.removeChild(HELP.div); delete HELP.div}
  134. };
  135. MathJax.Callback.Queue(
  136. HUB.Register.StartupHook("End Config",{}), // wait until config is complete
  137. ["Styles",AJAX,CONFIG.styles],
  138. ["Post",HUB.Startup.signal,"HelpDialig Ready"],
  139. ["loadComplete",AJAX,"[MathJax]/extensions/HelpDialog.js"]
  140. );
  141. })(MathJax.Hub,MathJax.HTML,MathJax.Ajax,MathJax.OutputJax,MathJax.Localization);