FontWarnings.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  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/FontWarnings.js
  6. *
  7. * Implements a font warning message window that appears when
  8. * the image fonts, no fonts, or web fonts are used, informing
  9. * the user where to download the fonts, or to update to a more
  10. * modern browser. The window will fade out automatically after
  11. * a time, and the user can dismiss it by a close box.
  12. *
  13. * To include font warning messages, add "FontWarnings.js" to the
  14. * extensions array in your MathJax configuration.
  15. *
  16. * You can customize the warning messages in a number of ways. Use the
  17. * FontWarnings section of the configuration to specify any of the items
  18. * shown in the CONFIG variable below. These include
  19. *
  20. * messageStyle the style to apply to the warning box that is
  21. * displayed when MathJax uses one of its fallback
  22. * methods.
  23. *
  24. * removeAfter the amount of time to show the warning message (in ms)
  25. * fadeoutTime how long the message should take to fade out
  26. * fadeoutSteps how many separate steps to use during the fade out
  27. * (set to 0 to use no fadeout and simply remove the window)
  28. *
  29. * Messages stores the descriptions of the messages to use for the
  30. * various warnings (webFonts, imageFonts, and noFonts).
  31. * These are arrays of strings to be inserted into the window,
  32. * or identifiers within brackets, which refer to the HTML
  33. * snippets in the HTML section described below. To disable a
  34. * specific message, set its value to null (see example below).
  35. *
  36. * HTML stores snippets of HTML descriptions for various
  37. * common parts of the error messages. These include
  38. * the closeBox, the message about web fonts being available
  39. * in modern browser, and messages about downloadable fonts.
  40. * The STIX and TeX font messages are used when only one
  41. * of these is in the availableFonts list. The data for these
  42. * are arrays of either strings to include or a description of
  43. * an HTML item enclosed in square brackets. That description
  44. * has (up to) three parts: the name of the tag to be included,
  45. * a list (enclosed in braces) of attributes and their values
  46. * to be set on the tag (optional), and an array of the contents
  47. * of the tag (optional). See the definitions below for examples.
  48. *
  49. * For example,
  50. *
  51. * MathJax.Hub.Config({
  52. * ...
  53. * extensions: ["FontWarnings.js"],
  54. * FontWarnings: {
  55. * removeAfter: 20*1000, // 20 seconds
  56. * messageStyle: {
  57. * border: "2px solid black",
  58. * padding: "2em"
  59. * },
  60. * Message: {
  61. * webFont: null // no webfont messages (only image and no fonts)
  62. * }
  63. * }
  64. * });
  65. *
  66. * would extend the time the message is displayed from 12 seconds to 20,
  67. * and changes the border to a solid black one, with 2em of padding
  68. * rather than the default of 1em.
  69. *
  70. * ---------------------------------------------------------------------
  71. *
  72. * Copyright (c) 2010-2013 The MathJax Consortium
  73. *
  74. * Licensed under the Apache License, Version 2.0 (the "License");
  75. * you may not use this file except in compliance with the License.
  76. * You may obtain a copy of the License at
  77. *
  78. * http://www.apache.org/licenses/LICENSE-2.0
  79. *
  80. * Unless required by applicable law or agreed to in writing, software
  81. * distributed under the License is distributed on an "AS IS" BASIS,
  82. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  83. * See the License for the specific language governing permissions and
  84. * limitations under the License.
  85. */
  86. (function (HUB,HTML) {
  87. var VERSION = "2.2";
  88. var STIXURL = "http://www.stixfonts.org/";
  89. var MATHJAXURL = "https://github.com/mathjax/MathJax/tree/master/fonts/HTML-CSS/TeX/otf";
  90. var CONFIG = HUB.CombineConfig("FontWarnings",{
  91. //
  92. // The CSS for the message window
  93. //
  94. messageStyle: {
  95. position:"fixed", bottom:"4em", left:"3em", width:"40em",
  96. border: "3px solid #880000", "background-color": "#E0E0E0", color: "black",
  97. padding: "1em", "font-size":"small", "white-space":"normal",
  98. "border-radius": ".75em", // Opera 10.5 and IE9
  99. "-webkit-border-radius": ".75em", // Safari and Chrome
  100. "-moz-border-radius": ".75em", // Firefox
  101. "-khtml-border-radius": ".75em", // Konqueror
  102. "box-shadow": "4px 4px 10px #AAAAAA", // Opera 10.5 and IE9
  103. "-webkit-box-shadow": "4px 4px 10px #AAAAAA", // Safari 3 and Chrome
  104. "-moz-box-shadow": "4px 4px 10px #AAAAAA", // Forefox 3.5
  105. "-khtml-box-shadow": "4px 4px 10px #AAAAAA", // Konqueror
  106. filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3, OffY=3, Color='gray', Positive='true')" // IE
  107. },
  108. //
  109. // The messages for the various situations
  110. //
  111. Message: {
  112. webFont: [
  113. ["closeBox"],
  114. ["webFont",
  115. "MathJax is using web-based fonts to display the mathematics "+
  116. "on this page. These take time to download, so the page would "+
  117. "render faster if you installed math fonts directly in your "+
  118. "system's font folder."],
  119. ["fonts"]
  120. ],
  121. imageFonts: [
  122. ["closeBox"],
  123. ["imageFonts",
  124. "MathJax is using its image fonts rather than local or web-based fonts. "+
  125. "This will render slower than usual, and the mathematics may not print "+
  126. "at the full resolution of your printer."],
  127. ["fonts"],
  128. ["webfonts"]
  129. ],
  130. noFonts: [
  131. ["closeBox"],
  132. ["noFonts",
  133. "MathJax is unable to locate a font to use to display "+
  134. "its mathematics, and image fonts are not available, so it "+
  135. "is falling back on generic unicode characters in hopes that "+
  136. "your browser will be able to display them. Some characters "+
  137. "may not show up properly, or possibly not at all."],
  138. ["fonts"],
  139. ["webfonts"]
  140. ]
  141. },
  142. //
  143. // HTML objects that can be referred to in the message definitions
  144. //
  145. HTML: {
  146. //
  147. // The definition of the close box
  148. //
  149. closeBox: [[
  150. "div",{
  151. style: {
  152. position:"absolute", overflow:"hidden", top:".1em", right:".1em",
  153. border: "1px outset", width:"1em", height:"1em",
  154. "text-align": "center", cursor: "pointer",
  155. "background-color": "#EEEEEE", color:"#606060",
  156. "border-radius": ".5em", // Opera 10.5
  157. "-webkit-border-radius": ".5em", // Safari and Chrome
  158. "-moz-border-radius": ".5em", // Firefox
  159. "-khtml-border-radius": ".5em" // Konqueror
  160. },
  161. onclick: function () {
  162. if (DATA.div && DATA.fade === 0)
  163. {if (DATA.timer) {clearTimeout(DATA.timer)}; DATA.div.style.display = "none"}
  164. }
  165. },
  166. [["span",{style:{position:"relative", bottom:".2em"}},["x"]]]
  167. ]],
  168. webfonts: [
  169. ["p"],
  170. ["webfonts",
  171. "Most modern browsers allow for fonts to be downloaded over the web. "+
  172. "Updating to a more recent version of your browser (or changing "+
  173. "browsers) could improve the quality of the mathematics on this page."
  174. ]
  175. ],
  176. fonts: [
  177. ["p"],
  178. ["fonts",
  179. "MathJax can use either the [STIX fonts](%1) or the [MathJax TeX fonts](%2). " +
  180. "Download and install one of those fonts to improve your MathJax experience.",
  181. STIXURL,MATHJAXURL
  182. ]
  183. ],
  184. STIXfonts: [
  185. ["p"],
  186. ["STIXPage",
  187. "This page is designed to use the [STIX fonts](%1). " +
  188. "Download and install those fonts to improve your MathJax experience.",
  189. STIXURL
  190. ]
  191. ],
  192. TeXfonts: [
  193. ["p"],
  194. ["TeXPage",
  195. "This page is designed to use the [MathJax TeX fonts](%1). " +
  196. "Download and install those fonts to improve your MathJax experience.",
  197. MATHJAXURL
  198. ]
  199. ]
  200. },
  201. removeAfter: 12*1000, // time to show message (in ms)
  202. fadeoutSteps: 10, // fade-out steps
  203. fadeoutTime: 1.5*1000 // fadeout over this amount of time (in ms)
  204. });
  205. if (MathJax.Hub.Browser.isIE9 && document.documentMode >= 9)
  206. {delete CONFIG.messageStyle.filter}
  207. //
  208. // Data for the window
  209. //
  210. var DATA = {
  211. div: null, // the message window, when displayed
  212. fade: 0 // number of fade-out steps so far
  213. };
  214. //
  215. // Create the message window and start the fade-out timer
  216. //
  217. var CREATEMESSAGE = function (data) {
  218. if (DATA.div) return;
  219. var HTMLCSS = MathJax.OutputJax["HTML-CSS"], frame = document.body;
  220. if (HUB.Browser.isMSIE) {
  221. if (CONFIG.messageStyle.position === "fixed") {
  222. MathJax.Message.Init(); // make sure MathJax_MSIE_frame exists
  223. frame = document.getElementById("MathJax_MSIE_Frame");
  224. CONFIG.messageStyle.position = "absolute";
  225. }
  226. } else {delete CONFIG.messageStyle.filter}
  227. CONFIG.messageStyle.maxWidth = (document.body.clientWidth-75) + "px";
  228. var i = 0; while (i < data.length) {
  229. if (data[i] instanceof Array) {
  230. if (data[i].length === 1 && CONFIG.HTML[data[i][0]]) {
  231. data.splice.apply(data,[i,1].concat(CONFIG.HTML[data[i][0]]));
  232. } else if (typeof data[i][1] === "string") {
  233. var message = MathJax.Localization.lookupPhrase(["FontWarnings",data[i][0]],data[i][1]);
  234. message = MathJax.Localization.processString(message,data[i].slice(2),"FontWarnings");
  235. data.splice.apply(data,[i,1].concat(message));
  236. i += message.length;
  237. } else {i++}
  238. } else {i++}
  239. }
  240. DATA.div = HTMLCSS.addElement(frame,"div",
  241. {id:"MathJax_FontWarning",style:CONFIG.messageStyle},data);
  242. MathJax.Localization.setCSS(DATA.div);
  243. if (CONFIG.removeAfter) {
  244. HUB.Register.StartupHook("End",function ()
  245. {DATA.timer = setTimeout(FADEOUT,CONFIG.removeAfter)});
  246. }
  247. HTML.Cookie.Set("fontWarn",{warned:true});
  248. };
  249. //
  250. // Set the opacity based on the number of steps taken so far
  251. // and remove the window when it gets to 0
  252. //
  253. var FADEOUT = function () {
  254. DATA.fade++; if (DATA.timer) {delete DATA.timer}
  255. if (DATA.fade < CONFIG.fadeoutSteps) {
  256. var opacity = 1 - DATA.fade/CONFIG.fadeoutSteps;
  257. DATA.div.style.opacity = opacity;
  258. DATA.div.style.filter = "alpha(opacity="+Math.floor(100*opacity)+")";
  259. setTimeout(FADEOUT,CONFIG.fadeoutTime/CONFIG.fadeoutSteps);
  260. } else {
  261. DATA.div.style.display = "none";
  262. }
  263. };
  264. //
  265. // Check that we haven't already issued a warning
  266. //
  267. if (!HTML.Cookie.Get("fontWarn").warned) {
  268. //
  269. // Hook into the Startup signal and look for font warning messages.
  270. // When one comes, issue the correct message.
  271. //
  272. HUB.Startup.signal.Interest(function (message) {
  273. if (message.match(/HTML-CSS Jax - /) && !DATA.div) {
  274. var HTMLCSS = MathJax.OutputJax["HTML-CSS"], FONTS = HTMLCSS.config.availableFonts, MSG;
  275. var localFonts = (FONTS && FONTS.length);
  276. if (!localFonts) {CONFIG.HTML.fonts = [""]}
  277. else if (FONTS.length === 1) {CONFIG.HTML.fonts = CONFIG.HTML[FONTS[0]+"fonts"]}
  278. if (HTMLCSS.allowWebFonts) {CONFIG.HTML.webfonts = [""]}
  279. if (message.match(/- Web-Font/)) {if (localFonts) {MSG = "webFont"}}
  280. else if (message.match(/- using image fonts/)) {MSG = "imageFonts"}
  281. else if (message.match(/- no valid font/)) {MSG = "noFonts"}
  282. if (MSG && CONFIG.Message[MSG])
  283. {MathJax.Localization.loadDomain("FontWarnings",[CREATEMESSAGE,CONFIG.Message[MSG]])}
  284. }
  285. });
  286. }
  287. })(MathJax.Hub,MathJax.HTML);
  288. MathJax.Ajax.loadComplete("[MathJax]/extensions/FontWarnings.js");