home *** CD-ROM | disk | FTP | other *** search
/ CD Actual Thematic 25: Programming / pc_actual_25.iso / Javascript / InteractiveWebDesignJavascript / Scripting / cgi1 / perl / style.js < prev    next >
Encoding:
JavaScript  |  2001-07-18  |  11.6 KB  |  311 lines
  1. // style.js: JavaScript file which uses Document Object Model
  2. // to set style of text in htmlpres HTML presentation template.
  3. // Created by Eric Krock, Netscape Communications.
  4. // Permission is granted to freely reuse and distribute this file.
  5. // Changes:
  6. // - 30 July 1997 backward compatibility with Nav3.0.
  7. // - 11 Sept 1997 font scaling in speakerNotes and tutorial modes
  8.  
  9.  
  10. // Calculates font size to be used for element, which is
  11. // the maximum of specified*sizeMultiplier and minAllowed.
  12. // Returns as string for storage in data structure fontSizeOf.
  13. function calcSize (specified, sizeMult, minOK)
  14. {  return ( Math.max (Math.round(specified*sizeMult), minOK) + "pt" )
  15. }
  16.  
  17.  
  18. // Constructor function for object type fontSizeOf.
  19. // This object type holds the per-element size data
  20. // for the current screen size.  A global variable,
  21. // fontSizeOf, is set to this object so that style
  22. // sheets in individual HTML pages can retrieve and 
  23. // use this data. 
  24.  
  25. function constructFontSizeOf (h1, h2, h3, h4, h5, h6, titlepage, p, li, ul, ol, dl, dt, dd, blockquote, th, td, pre, tt, small, medium, large, sizeMult, minOK)
  26. {  this.h1 = calcSize(h1, sizeMult, minOK) 
  27.    this.h2 = calcSize(h2, sizeMult, minOK)
  28.    this.h3 = calcSize(h3, sizeMult, minOK)
  29.    this.h4 = calcSize(h4, sizeMult, minOK)
  30.    this.h5 = calcSize(h5, sizeMult, minOK)
  31.    this.h6 = calcSize(h6, sizeMult, minOK)
  32.    this.titlepage = calcSize(titlepage, sizeMult, minOK)
  33.    this.p  = calcSize(p, sizeMult, minOK)
  34.    this.li = calcSize(li, sizeMult, minOK)
  35.    /* BUG WORKAROUND: Shouldn't be necessary to set fontSize on UL and OL as
  36.       well as LI, but setting LI fontSize doesn't work now.  Setting on UL and OL
  37.       is the workaround. */ 
  38.    this.ul = calcSize(ul, sizeMult, minOK)
  39.    this.ol = calcSize(ol, sizeMult, minOK)
  40.    this.dl = calcSize(dl, sizeMult, minOK)
  41.    this.dt = calcSize(dt, sizeMult, minOK)
  42.    this.dd = calcSize(dd, sizeMult, minOK)
  43.    this.blockquote = calcSize(blockquote, sizeMult, minOK)
  44.    this.th = calcSize(th, sizeMult, minOK)
  45.    this.td = calcSize(td, sizeMult, minOK)
  46.    this.pre = calcSize(pre, sizeMult, minOK)
  47.    this.tt  = calcSize(tt, sizeMult, minOK)
  48.    this.small = calcSize(small, sizeMult, minOK)
  49.    this.medium = calcSize(medium, sizeMult, minOK)
  50.    this.large = calcSize(large, sizeMult, minOK)
  51. }
  52.  
  53.  
  54. function setFontSizes (h1, h2, h3, h4, h5, h6, titlepage, p, li, ul, ol, dl, dt, dd, blockquote, th, td, pre, tt, small, medium, large, sizeMultiplier, minFontSize)
  55. {  var fontSizeOf = new constructFontSizeOf (h1, h2, h3, h4, h5, h6, titlepage, p, li, ul, ol, dl, dt, dd, blockquote, th, td, pre, tt, small, medium, large, sizeMultiplier, minFontSize)
  56.  
  57.    document.tags.H1.fontSize = fontSizeOf.h1
  58.    document.tags.H2.fontSize = fontSizeOf.h2
  59.    document.tags.H3.fontSize = fontSizeOf.h3
  60.    document.tags.H4.fontSize = fontSizeOf.h4
  61.    document.tags.H5.fontSize = fontSizeOf.h5
  62.    document.tags.H6.fontSize = fontSizeOf.h6
  63.  
  64.    document.tags.PRE.fontSize = fontSizeOf.pre
  65.  
  66.    document.tags.P.fontSize = fontSizeOf.p
  67.  
  68.    /* BUG WORKAROUND: Shouldn't be necessary to set fontSize on UL and OL as
  69.       well as LI, but setting LI fontSize doesn't work now.  Setting on UL and OL
  70.       is the workaround. */ 
  71.    document.tags.LI.fontSize = fontSizeOf.li
  72.    document.tags.UL.fontSize = fontSizeOf.ul
  73.    document.tags.OL.fontSize = fontSizeOf.ol
  74.    document.tags.DL.fontSize = fontSizeOf.dl
  75.    document.tags.DT.fontSize = fontSizeOf.dt
  76.    document.tags.DD.fontSize = fontSizeOf.dd
  77.    document.tags.BLOCKQUOTE.fontSize = fontSizeOf.blockquote
  78.    document.tags.TH.fontSize = fontSizeOf.th
  79.    document.tags.TD.fontSize = fontSizeOf.td
  80.  
  81.    document.classes.titlepage.all.fontSize = fontSizeOf.titlepage
  82.  
  83.    document.classes.small.all.fontSize = fontSizeOf.small
  84.    document.classes.medium.all.fontSize = fontSizeOf.medium
  85.    document.classes.large.all.fontSize = fontSizeOf.large
  86.  
  87.    document.classes.footnote.all.fontSize = fontSizeOf.small
  88.  
  89.    return fontSizeOf
  90. }
  91.  
  92.  
  93. // Global variables speakerNotesMode and tutorialMode determines 
  94. // whether we are in:
  95. //
  96. // * speaker notes display mode (speaker mode text visible, all
  97. //   text in smaller fonts so speaker notes fit on screen)
  98. // * tutorial mode (tutorial mode text visible, text in slightly
  99. //   larger fonts for online viewing)
  100. // * normal mode (speaker mode text invisible because color is same
  101. //   as backgroundcolor, all text in large fonts appropriate
  102. //   for overhead display).
  103.  
  104. var speakerNotesMode = false
  105. var tutorialMode = false
  106.  
  107.  
  108. // Adjust font sizes downward in speakerNotes and tutorial modes.
  109. var sizeMultiplier = 1.0                      // default
  110. if (tutorialMode) sizeMultiplier = 0.79       // online viewing
  111. if (speakerNotesMode) sizeMultiplier = 0.55   // speaker preparation with notes
  112. var minFontSize = 12                          // smallest ever displayed
  113.  
  114.  
  115. // Global variable fontSizeOf will store the per-element size data
  116. // for the current screen size so that style
  117. // sheets in individual HTML pages can retrieve and 
  118. // use this data. 
  119.  
  120. var fontSizeOf
  121.  
  122.  
  123. // onLoad method 
  124. function moveSpeakerNotes ()
  125. {   if (speakerNotesMode && !tutorialMode && document.speakernotessection) 
  126.     {   if (document.tutorialsection)
  127.         {   document.speakernotessection.moveToAbsolute(document.tutorialsection.pageX, 
  128.           document.tutorialsection.pageY)    }
  129.         document.speakernotessection.visibility="visible"
  130.     }
  131. }
  132.  
  133.  
  134. // Workaround for Nav3.x bug in which JavaScript files
  135. // with <SCRIPT LANGUAGE="JavaScript1.2" SRC=...> are
  136. // loaded, even though they should be ignored.
  137. // Make sure this code is only executed by 4.x and later.
  138. if (parseInt(navigator.appVersion) > 3) {
  139.  
  140.  
  141. var screenWidth = screen.width
  142.  
  143.  
  144. /* 640x480 is 0.8 times the size of 800x600, so scale down by 20%. */
  145. if (screenWidth < 700) {
  146.      fontSizeOf = setFontSizes (27, 27, 27, 27, 27, 27, 27, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 10, 14, 17, sizeMultiplier, minFontSize) }
  147.  
  148. /* 12" monitor of 800x600 pixels is the size which we consider "base"; 
  149.    all other sizes are designed to scale so that their content will fit
  150.    within an 800x600 pixel size area.  This is the pixel size used by 12"
  151.    laptop monitors as well as many overhead display systems. */
  152. else if (screenWidth < 900) {
  153.      fontSizeOf = setFontSizes (34, 34, 34, 34, 34, 34, 34, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 12, 18, 21, sizeMultiplier, minFontSize) }
  154.  
  155. /* 17" monitor of 1024x768 pixels is 1.28 times larger than 12",
  156.    so scale up by 28% to make sure HTML still fits on smaller page. */
  157. else if (screenWidth < 1050) {
  158.      fontSizeOf = setFontSizes (44, 44, 44, 44, 44, 44, 44, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 18, 23, 27, sizeMultiplier, minFontSize) }
  159.  
  160. /* 20" monitor of 1280x1024 pixels is 1.7 times larger than 800x600,
  161.    so scale up by 70% to make sure HTML still fits on smaller page. */
  162. else if (screenWidth < 1300) {
  163.      fontSizeOf = setFontSizes (58, 58, 58, 58, 58, 58, 58, 48, 48, 48, 48, 48, 48, 48, 48, 48, 48, 48, 48, 21, 31, 36, sizeMultiplier, minFontSize) }
  164.  
  165. /* 21" monitor of 1600x1200 pixels is 2.0 times larger than 800x600,
  166.    so scale up by 100% to make sure HTML still fits on smaller page. */
  167. else {
  168.      fontSizeOf = setFontSizes (68, 68, 68, 68, 68, 68, 68, 56, 56, 56, 56, 56, 56, 56, 56, 56, 56, 56, 56, 24, 36, 42, sizeMultiplier, minFontSize) }
  169.  
  170.  
  171. // properties which don't depend on current screen size
  172.  
  173. // global variables used to set text and background color
  174. var presentationTextColor = "black"
  175. var presentationBackgroundColor = "white"
  176.  
  177.  
  178. document.tags.BODY.color = presentationTextColor
  179. document.tags.BODY.backgroundColor = presentationBackgroundColor
  180.  
  181.  
  182. if (speakerNotesMode) {     
  183.    document.contextual(document.ids.speakernotessection, document.tags.H1).textDecoration = "underline"
  184.    document.contextual(document.ids.speakernotessection, document.tags.H1).marginTop = "1em"
  185.    self.onLoad = moveSpeakerNotes;
  186. }
  187.  
  188.  
  189. if (tutorialMode) {
  190. // properties added for tutorial
  191. // document.ids.tutorialsection.marginTop = "3em"
  192. document.ids.tutorialsection.marginRight = "40px"
  193. document.ids.tutorialsection.borderStyle = "solid"
  194. document.ids.tutorialsection.borderColor = "gray"
  195. document.ids.tutorialsection.borderWidths("2px")
  196. document.ids.tutorialsection.paddings("1em")
  197. }
  198.  
  199. document.tags.H1.fontWeight = "bold"
  200.  
  201. // enhance readability of source code by making it bold
  202. document.tags.PRE.fontWeight = "bold"
  203.  
  204. document.classes.titlepage.all.fontWeight = "bold"
  205. document.classes.titlepage.all.textAlign = "center"
  206.  
  207. document.classes.footnote.all.textAlign = "right"
  208.  
  209. // An example of defining classes to create a visual effect
  210. // which can be used across many slides.  All elements which have
  211. // CLASS="agendahilite" in their start tag will display in red
  212. // text on a yellow background.
  213. document.classes.agendahilite.all.color = "red"
  214. document.classes.agendahilite.all.backgroundColor = "yellow"
  215.  
  216.  
  217. // Hack to keep backward compatibility with pages which have
  218. // per-page style settings (setting inside a STYLE element
  219. // in the page's HEAD) made using older version (1.0) of template.
  220. // Set variable v1CompatibilityMode to true to use v1.0 pages
  221. // with this version without having to update those per-page settings.
  222.  
  223. var v1CompatibilityMode = false
  224. if (v1CompatibilityMode) {
  225. var currentScreen = 0
  226. var theFontSizes = new Array(1)
  227. theFontSizes[currentScreen] = fontSizeOf
  228. }
  229.  
  230.  
  231. } // end of Nav4+ only if for style sheet code
  232.  
  233.  
  234.  
  235. // SLIDE PAGE CHANGE CODE (copied from basefile\navbar.js)
  236. // to enable keyboard-triggered page changes in Nav4+
  237.  
  238. function
  239. goto_slide(slide_num, caller_in_main_directory)
  240. {       var filename_prefix = ""
  241.     if (caller_in_main_directory == null) { filename_prefix = "../" }
  242.     if(slide_num < 1 || slide_num > top.last_slide){
  243.         alert("Please enter number between 1 and " + top.last_slide);
  244.     }
  245.     else {
  246.         top.current_slide = Math.abs(slide_num);
  247.         top.frames["slide"].location = filename_prefix + top.filename[slide_num];
  248.                 // update displayed page count in goto field
  249.                 top.frames["next"].document.forms["gotoform"].slidenum.value = top.current_slide;
  250.     }
  251. }
  252.  
  253. function
  254. prev_slide(caller_in_main_directory)
  255. {
  256.     if(top.current_slide == 1){
  257.         alert("You are already at the first slide.\nThere is no previous slide.");
  258.     } 
  259.         else goto_slide(top.current_slide - 1, caller_in_main_directory);
  260. }
  261.  
  262.  
  263. // Display next slide in sequence.
  264. function
  265. next_slide(caller_in_main_directory)
  266. {
  267.     
  268.     if (top.current_slide == top.last_slide){
  269.         alert("You are already at the last slide.\nThere is no next slide.");
  270.     } else goto_slide(top.current_slide + 1, caller_in_main_directory);
  271. }
  272.  
  273.  
  274.  
  275.  
  276. // KEYBOARD CONTROL IN NAV4
  277.  
  278. // support SPACE key codes (*not* RETURN because of Goto field!)
  279. var nextKeys = new String("nN ")
  280. var prevKeys = new String("pP")
  281.  
  282. function handleKeys(e) {
  283.     var keyChar = String.fromCharCode(e.which);
  284.     if (prevKeys.indexOf(keyChar) != -1)
  285.     {  prev_slide(true); return false  }
  286.     else if(nextKeys.indexOf(keyChar) != -1)
  287.     {  next_slide(true); return false  }
  288.     else return true;
  289. }
  290.  
  291.  
  292.  
  293. // Workaround for Nav3.x bug in which JavaScript files
  294. // with <SCRIPT LANGUAGE="JavaScript1.2" SRC=...> are
  295. // loaded, even though they should be ignored.
  296. // Make sure this code is only executed by 4.x and later.
  297. if (parseInt(navigator.appVersion) > 3) {
  298.  
  299.    // support ESC key code  (*not* BS because of Goto field!)
  300.    prevKeys.concat(String.fromCharCode(27))
  301.    document.captureEvents(Event.KEYPRESS);
  302.    document.onkeypress = handleKeys;
  303.  
  304. } // end of Nav4+ only if
  305.  
  306.  
  307.  
  308. // end of file
  309.  
  310.  
  311.