22 | 
28 |
29 |
30 | ## **Examples**
31 | - [A demo WWN web-page](https://jimyuill.com/software/www/WordWebNav/demo.html) was created from a Word-doc with typical features for recording technical info.
32 | - [The WWN author's web-site](https://jimyuill.com) is created mostly from Word documents and their WWN web-pages.
33 |
34 | ## **Description**
35 | Word is a powerful tool for recording technical info. Word can save a document in HTML format, but, for the web-page to be usable, additional features are needed, as well as fixes for bugs in Word's HTML.
36 |
37 | WWN can be used to create a personal web-site from Word documents. The WWN web-pages' user-interface is simple, and it provides the features needed for navigation and user-comments. And, of course, WWN web-pages can be used on any web-site, not just a personal web-site.
38 |
39 | WWN is relatively easy to use. First, a copy of the Word document is saved in Word HTML-format. Next, the user creates a parameter-file to specify the WWN web-page's files, header-bar contents, etc. WWN is then run to generate the WWN web-page.
40 |
41 | ## **Quality and support**
42 | WWN was created by a software professional, with over 25 years of R&D experience. Background research was performed to investigate Word's limitations and bugs, and to survey alternative solutions. The program code is heavily commented, to aid future development. Extensive testing was performed, including unit and function tests. System-tests were performed using a variety of technical Word-docs, downloaded from the Internet. The created web-pages were tested on the major desk-top browsers and OS's. The end-user documentation is intended to be complete and easy to use.
43 |
44 | WWN's author uses it to construct his personal web-site. He plans to fix the bugs he finds, and those reported by users, through 2023, and hopefully longer.
45 | - [Report bugs and ideas for improvement](https://github.com/jimyuill/word-web-nav/issues)
46 | - [Contact the WWN author](https://jimyuill.com/about.html)
--------------------------------------------------------------------------------
/assets/word_web_nav.css:
--------------------------------------------------------------------------------
1 | /*
2 | DESCRIPTION: CSS file for the WordWebNav web-page
3 |
4 | There are two parts to this file:
5 | * CSS IDs (e.g., #header-bar) for the web-page's 4 sections.
6 | * CSS classes for the text in these two web-page sections: header-bar and table-of-contents
7 |
8 | The CSS uses the jQuery and jQuery UI libraries.
9 | * https://jquery.com/
10 | * https://jqueryui.com/
11 |
12 | * The system documentation has additional info on its: installation, use, design
13 | and implementation (code).
14 |
15 | * Coding issue to look into:
16 | * See below, "Using CSS pixel-inches to size the screen:"
17 |
18 | MIT License, Copyright (c) 2021-present Jim Yuill
19 |
20 | */
21 |
22 | /******************************************************************
23 | This section specifies the CSS IDs (e.g., #header-bar) for the web-page's 4 sections:
24 | * header-bar, table-of-contents, splitter-bar, document
25 |
26 | Each section is defined in the HTML by a div.
27 | * The "header-bar" is the top section, and it's the width of the browser-window.
28 | * The bottom three sections are adjacent to each other:
29 | * table-of-contents, splitter-bar, document
30 | * The bottom three sections are within a "container" div
31 |
32 | * An HTML div is made-up of these 4 parts, in this order, from inside to outside:
33 | * Content-area : padding : border : margin
34 | https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
35 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model
36 | https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
37 |
38 | *******************************************************************/
39 |
40 | /* Specify the header-bar section
41 | * It contains the header-bar text, e.g., the bread-crumb links, and the comments link
42 | */
43 | #header-bar {
44 | /* calc()
45 | * In calc(), spaces are required around math-operators, e.g., "-"
46 | * calc() is not in older browsers
47 | https://stackoverflow.com/questions/16164736/height-calc100-not-working-correctly-in-css
48 | */
49 |
50 | /* Specify the header-bar div's position
51 | https://developer.mozilla.org/en-US/docs/Web/CSS/position
52 | https://www.internetingishard.com/html-and-css/advanced-positioning/
53 | https://www.w3schools.com/css/css_positioning.asp
54 | https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26/
55 | */
56 | position: absolute;
57 | left:0;
58 | top:0;
59 |
60 | /* The div's background-color is the same as the background-color
61 | for MS-Word's ribbon */
62 | background-color: #f3f2f1;
63 |
64 | /*
65 | Specify the header-bar div's parts and their sizes
66 |
67 | The header-bar div's size is:
68 | * Overall width: 100vw, the browswer's full width
69 | * Overall height: 42px =
70 | 20px (content-area height) +
71 | 20px (top and bottom padding's height) +
72 | 2px (bottom-border height)
73 | */
74 |
75 | /* Content area:
76 | * Contains the header-bar text
77 | * The content-area's size is specified by "height:" and "width:"
78 | */
79 | height: 20px; /* Use the height of the header-bar's font (specified below) */
80 | width: calc(100vw - 40px); /* The browser's full width, minus the width of the left and right padding*/
81 |
82 | /* Padding:
83 | * Space between the content area and the margin
84 | * Specified by the "padding-*" property/value pairs.
85 | */
86 | padding-top: 10px;
87 | padding-bottom: 10px;
88 | padding-left: 20px;
89 | padding-right: 20px;
90 |
91 | /* Only a bottom border is used. It's a thin black line. */
92 | border-width: 0px;
93 | border-bottom-width: 2px;
94 | border-bottom-style: solid;
95 | border-bottom-color: black;
96 |
97 | /* The margin isn't used */
98 | margin: 0px;
99 |
100 | }
101 |
102 | /* Specify the "container" section.
103 | * It contains three sub-sections: "table-of-contents", "splitter-bar", "document"
104 | */
105 | #container {
106 | position: absolute;
107 | /* The div's position
108 | * The container is just below the header-bar.
109 | * So, "top:" specifies the header-bar's total height.
110 | */
111 | top: 42px;
112 | left:0;
113 |
114 | width: 100vw; /* The browser's full width */
115 | height: calc(100vh - 42px); /* The browser's full height, minus the header-bar's height */
116 |
117 | /* The container does not have padding, margin, or a border */
118 | padding: 0px;
119 | margin: 0px;
120 | border-width: 0px;
121 |
122 | background-color: white;
123 | }
124 |
125 | /*
126 | Specify the table-of-contents section
127 | */
128 | #table-of-contents {
129 | /* The div's position within the container */
130 | position: absolute;
131 | top: 0px;
132 | left: 0;
133 |
134 | /* The alignment process for the lower 3 sections: table-of-contents, splitter-bar, document
135 |
136 | For the lower-sections' div's, specifying the width as a percentage can result in
137 | misalignment of the sections. For example, "width: calc(25% - 20px);"
138 |
139 | In particular, instead of two sections being adjacent, they can be separated by an
140 | unintended 1px vertical line.
141 | * For example, between the table-of-contents and splitter-bar
142 | * Although small, the line can be noticable, especially when it has a conspicuous color.
143 |
144 | The misalignment and how it can occur is described below.
145 | * It's not possible to fix the misalignment here in the CSS,
146 | unless an additional library is used, such as flexbox.
147 | https://cruft.io/posts/percentage-calculations-in-ie/
148 | https://stackoverflow.com/questions/49957813/percents-rounding-for-element-width-in-css
149 | * Instead, the misalignment is fixed in the web-page's javascript.
150 |
151 | The browser-window's lay-out is specified for each of its sections, e.g., table-of-contents.
152 | * For a section, its location is specified (e.g., "top: 0;", and "left: 40px;").
153 | Also, the section's width and height are specified.
154 | * Ultimately those specifications are in units of px's, e.g., 20px.
155 | * A px is the width of the narrowest line that can be displayed with clean edges.
156 |
157 | Instead of specifying px's, a percentage of the screen can be specified.
158 | * For example, "width: 25%;"
159 | * For the percentage calculation, the result can have a fractional part,
160 | * e.g., 250.125 px
161 | * For fractional results, info on how browsers perform rounding is not readily available.
162 | * Further, a browser is not necessarily consistent in how it performs rounding,
163 | for the various CSS property/value pairs,
164 | * e.g., in "width: %25;", the 25% might be rounded differently than in "left: 25%;"
165 | * Also, CSS provides no functions for rounding, e.g., no round or floor functions.
166 |
167 | * This section provides a hypothetical example of how px percentage-calculations can
168 | cause alignment problems.
169 | * In the present file, for the div "table-of-contents", its width is specified as:
170 | "width: 25%;"
171 | * In this example, the 25% is calculated as 100.250px, and the browser could round to
172 | either 100px or 101px.
173 | * The splitter-bar section is just to the right of the table-of-contents section.
174 | * The splitter-bar's left coordinate is specified as: "left: 25%;"
175 | * The 25% is calculated as 100.250 px, and the browswer could round to
176 | either 100px or 101px.
177 | * So, there could be a 1px gap between the table-of-contents and splitter-bar
178 | * For the table-of-contents', a width of 100px could be used, so the table-of-contents
179 | goes from 0px to 99px.
180 | * The splitter-bar could start at 101px
181 | * There would be a 1px gap at 100px, and it will have the default background-color.
182 | * If that color differs from the colors of table-of-contents and splitter-bar,
183 | then the gap can be noticeable, and look sloppy.
184 |
185 | * How this misalignment problem is solved here:
186 | * The CSS is written as if the px percentage-calculations always round to the same value.
187 | * Consequently, there could be 1px gaps between the lower three sections.
188 | * The sections' alignments are then fixed in the web-page's javascript code.
189 | * In particular, the alignment is fixed when the web-page is loaded in the browser.
190 | * Unlike CSS, Javascript has math functions that can be used to get proper alignment.
191 | * Also, in the CSS, some percentage calculations are for 100%, e.g., "height: calc(100% - 10px);"
192 | * When 100% is used, no rounding is performed, so there are no alignment problems
193 | */
194 |
195 | /* The div's size is:
196 | * Width:
197 | * 25% of the container's full width, minus the padding-left width.
198 | * This will be the width when the page is loaded.
199 | After the page is loaded, the width will be changed when the splitter-bar is moved.
200 | * A negative width is possible, for a browser window with width less than 80px.
201 | * If this occurs, the web-page's javascript will set this width to 0px.
202 | * Height: The container's full height, minus the padding-top width
203 | */
204 | width: calc(25% - 20px);
205 | height: calc(100% - 24px);
206 |
207 | /* The padding-area is used to create a space on the left and top */
208 | padding-top: 24px; /* Use 1/4" top margin, based on CSS pixel-inch of 96px. 96/4=24 */
209 | padding-left: 20px;
210 | padding-bottom: 0px;
211 | padding-right: 0px;
212 |
213 | /* The border and margin aren't used */
214 | border-width: 0px;
215 | margin: 0px;
216 |
217 | /* Specify the scroll-bars
218 | * auto: the scroll-bar is provided if needed
219 | */
220 | /* How the vertical scroll-bar is placed
221 | * This is what I could determine, from my experiments:
222 | * The scroll-bar is inserted between the right-border and the right-padding.
223 | * Space for the scroll-bar is obtained by reducing the content-area
224 | */
225 | overflow-y: auto;
226 | /* If the text is wider than the section's width:
227 | * The x-axis scroll-bar will be inserted, and
228 | the text will not wrap.
229 | * The overflowing text can be seen by scrolling to the right.
230 | https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
231 | https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
232 | */
233 | white-space: nowrap;
234 | overflow-x: auto;
235 |
236 | /* The div's background-color is the same as the background-color in MS-Word's
237 | table-of-contents */
238 | background-color: #e6e6e6;
239 |
240 | }
241 |
242 | /* Specify the splitter-bar section
243 | */
244 | #splitter-bar {
245 | /* The div's position within the container
246 | * This is the splitter-bar's position when the page is loaded, before being moved by the user
247 | */
248 | position: absolute;
249 | top: 0px;
250 | left: 25%;
251 |
252 | /* The splitter-bar's size */
253 | height: 100%;
254 | width: 12px;
255 |
256 | padding: 0px;
257 | margin: 0px;
258 | border-width: 0px;
259 |
260 | /* When the pointer is over the splitter-bar, use a move-type pointer */
261 | cursor: move;
262 |
263 | /* Specify the splitter-bar's appearance:
264 | * It's light black, with 2 white bars in the center.
265 | * The white bars are provided via word_web_nav_splitter_bar_icon.png
266 | */
267 | background: url("./word_web_nav_splitter_bar_icon.png") center center no-repeat #444444;
268 | }
269 |
270 | /* Specify the document section.
271 | * This section contains the document text.
272 | */
273 | #document {
274 | /* The div's position within the container */
275 | position: absolute;
276 | top: 0px;
277 |
278 | /* Make the left edge adjacent to the splitter-bar:
279 | * Total width of the table-of-contents: 25%
280 | * Total width of the splitter-bar: 12px
281 | */
282 | left: calc(25% + 12px);
283 |
284 | /* Specify the content-area's width:
285 | * 75%: the container's total-width minus the table-of-contents' total width.
286 | * 12px: the splitter-bar's total-width
287 | * 48px + 48px: the width of the document's padding-right and padding-left
288 | * 2px: the document's border-right-width
289 |
290 | A negative width is possible, for a very skinny browser window.
291 | * If this occurs, the web-page's javascript will set this width to 0px.
292 | */
293 | width: calc(75% - (12px + 48px + 48px + 2px));
294 |
295 | /* Specify the content-area's height. */
296 | height: calc(100% - 48px); /* 48px gives a half-inch (in CSS pixel-inches) top margin */
297 |
298 | padding-top: 48px;
299 | padding-right: 48px; /* 48px gives a half-inch (in CSS pixel-inches) margin */
300 | padding-bottom: 0px;
301 | padding-left: 48px;
302 |
303 | border-width: 0px;
304 | border-right-width: 2px; /* Thin black vertical line */
305 | border-right-style: solid;
306 | border-right-color: black;
307 |
308 | margin: 0;
309 |
310 | /* Limit the content-area's width to a reasonable length for reading text.
311 | * MS Word's HTML does not limit the text's line-length.
312 | * So, by default, text lines can be as wide as the whole content-area
313 | * For a wide browser-window, such long text-lines are difficult to read.
314 | * max-width is used here to limit the text's line-length to be no more than 720px.
315 | * For pictures, their displayed width is not limited by max-width.
316 | * However, if a picture is more than 720px, a horizontal scroll-bar is provided
317 | to see the whole image.
318 |
319 | * Use a width comparable to 8.5"-wide paper.
320 | * The calculations here are in CSS pixel-inches, which is 96px.
321 | * The side margins are 1/2" (see above).
322 | 8.5"-.5"-.5" = 7.5"
323 | 7.5 * 96 = 720px
324 |
325 | * Using CSS pixel-inches to size the screen:
326 | * I'm not sure if my use of CSS pixel-inches is the correct way to size the screen
327 | and this section.
328 | * Sources to look-into about this:
329 | * https://hacks.mozilla.org/2013/09/css-length-explained/
330 | * https://www.freecodecamp.org/news/css-unit-guide
331 | * https://stackoverflow.com/questions/3341485/how-to-make-a-html-page-in-a4-paper-size-pages
332 | * https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size
333 |
334 | */
335 | max-width: 720px;
336 |
337 | /* Sroll-bars
338 | */
339 | overflow-y: auto;
340 | overflow-x: auto;
341 |
342 | background-color: white;
343 | }
344 |
345 |
346 | /***********************************************************
347 | CSS classes for formatting text in the sections: header-bar, table-of-contents
348 |
349 | ************************************************************/
350 |
351 | /* For the header-bar's text, the font used is similar to typical h3 headings.
352 |
353 | ** font-size:
354 | * The font size is set to be similar to the typical h3.
355 | * Typical h3: font-size: 1.17em
356 | * Typical em: 16px
357 | * 1.17em = 1.17*16px = 18.72px
358 | * The font-size is specified here in px units.
359 | * This will also be the font height.
360 | * px units are used here because px units are used in positioning
361 | the div's, e.g., in specifying the div's height and width.
362 | https://www.w3schools.com/tags/tag_hn.asp
363 | https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
364 | https://stackoverflow.com/questions/5410066/what-are-the-default-font-sizes-in-pixels-for-the-html-heading-tags-h1-h2
365 |
366 | ** font-family:
367 | * A web-safe font-family is used.
368 | https://www.w3schools.com/w3css/w3css_fonts.asp
369 | https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
370 |
371 | ** line-height:
372 | * The line-height is set to be the same as the font-size.
373 | * The header-bar section includes top and bottom padding, and
374 | that padding provides spacing for the header-bar's text-line.
375 | https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
376 |
377 | */
378 |
379 | /* Declarations common to all text in the header-bar
380 | */
381 | .headerBarText {
382 | font-size: 20px;
383 | /* font-weight: 400 is the same as normal, and 700 is the same as bold
384 | https://www.w3schools.com/cssref/pr_font_weight.asp
385 | */
386 | font-weight: 450;
387 | font-family: Arial, Helvetica, sans-serif;
388 | line-height: 1;
389 | color: black; /* The default color, used for the breadcrumb "/" characters */
390 | }
391 |
392 | /* CSS declarations for tags in the header-bar
393 | */
394 | a.headerBarHref {
395 | color: blue; /* Link color does not change if it's been clicked on */
396 | text-decoration: none; /* Underlines are not specified on the links */
397 | }
398 |
399 | /* These classes are used for the links displayed in the table-of-contents.
400 | * Those links are formatted by MS Word, by using these MS-Word CSS classes:
401 | * a:link and span.MsoHyperlink
402 | * That formatting makes the links underlined,
403 | and the links turn purple after they've been clicked-on.
404 | * The following classes are used to format the links so that they are not
405 | underlined, and so that they are always blue.
406 | * In the HTML for the table-of-contents, the links need to be updated
407 | to reference these classes. How the links are updated is described
408 | in create_web_page.py.
409 |
410 | https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links
411 | https://www.w3schools.com/css/css_link.asp
412 | */
413 | a.tocAnchor, span.tocAnchor {
414 | color: blue; /* Link color does not change if it's been clicked on */
415 | text-decoration: none; /* Underlines are not specified on the links */
416 | }
417 |
--------------------------------------------------------------------------------
/assets/word_web_nav.js:
--------------------------------------------------------------------------------
1 | /*
2 | DESCRIPTION: Javascript functions for WordWebNav's web-page
3 |
4 | There are three functions. They are run, respectively, when:
5 | * The HTML file is loaded
6 | * The splitter-bar is dragged
7 | * The web-browser is resized
8 |
9 | The code uses the jQuery and jQuery UI libraries.
10 | * https://jquery.com/
11 | * https://jqueryui.com/
12 |
13 | The system documentation has additional info on its: installation, use, design
14 | and implementation (code).
15 |
16 | MIT License, Copyright (c) 2021-present Jim Yuill
17 |
18 | */
19 |
20 |
21 | /*
22 | This function runs when the HTML file is loaded.
23 |
24 | This script fixes possible alignment problems in the web-page's div's.
25 | * The div's sizing and alignment are specified in an accompanying CSS file.
26 | * There are limitations in CSS that can result in alignment problemsj for the div's.
27 | * Those limitations are described in the accompanying CSS file.
28 |
29 | The widths calculated here are the same amounts as those calculated in the CSS file.
30 | * There are accuracy limitations in CSS, and it may have calculated the
31 | widths inaccurately
32 |
33 | https://stackoverflow.com/questions/2926227/how-to-do-jquery-code-after-page-loading
34 | https://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load
35 | */
36 | $(window).on('load', function() {
37 |
38 | var // Width of the container div
39 |
40 | /*
41 | * parseInt(): second parameter is the radix (base) for the number returned, i.e., base 10
42 | * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
43 |
44 | * .width():
45 | * Does not include the margin nor border widths (confirmed).
46 | * It probably does not include the padding width (not confirmed; it is 0 in the container div).
47 | * It includes the content width (confirmed).
48 | * https://api.jquery.com/width/
49 | */
50 | totalWidth = parseInt($('#container').width(), 10),
51 |
52 | /* For the table-of-contents div, this is comparable to the CSS calculation in:
53 | * width: calc(25% - 20px);
54 | In addition, the amount is corrected to not be negative
55 | */
56 | tocWidth = Math.max(0, (Math.floor(totalWidth * .25) - 20)),
57 |
58 | /* For the table-of-contents div, its total-width is:
59 | * (content-area width) + (padding-left width)
60 | */
61 | tocTotalWidth = tocWidth + 20,
62 |
63 | /* For the splitter-bar div, this is comparable to the CSS calculation in:
64 | * left: 25%;
65 | */
66 | splitterBarLeft = tocTotalWidth,
67 |
68 | /* For the document div, this is comparable to the CSS calculation in:
69 | * left: calc(25% + 12px);
70 | */
71 | documentLeft = tocTotalWidth + 12,
72 |
73 | /* For the document div, this is comparable to the CSS calculation in:
74 | * width: calc(75% - (12px + 48px + 48px + 2px));
75 | In addition, the size is corrected to not be negative
76 | */
77 | documentWidth = Math.max(0, ((totalWidth - tocTotalWidth) - (12 + 48 + 48 + 2)));
78 |
79 | /* Set the new values, for the CSS IDs and declarations
80 | */
81 | $('#table-of-contents').css({width : tocWidth});
82 | $('#splitter-bar').css({left : tocTotalWidth});
83 | $('#document').css({left : documentLeft});
84 | $('#document').css({width : documentWidth});
85 | });
86 |
87 |
88 | /* This function enables the splitter-bar to be dragged, to resize the
89 | table-of-contents and document sections.
90 | */
91 | $(function(){
92 | var // Width of the container div
93 | totalWidth = parseInt($('#container').width(), 10),
94 |
95 | /* For the container div, gets the left and top positions
96 | */
97 | /* .offset():
98 | * From the API doc: "Gets the current coordinates of the first element in the set of
99 | matched elements, relative to the document."
100 | * Returns 2 values: .left, .top
101 | * These positions are relative to the whole browser window
102 | * offset.left is 0
103 | * offset.top is 42 (height of the header-bar div)
104 | * https://api.jquery.com/offset/
105 | */
106 | offset = $('#container').offset(),
107 |
108 | /* This function is called after the splitter-bar has been moved
109 | */
110 | splitter = function(event, ui){
111 | /* After the splitter-bar is moved, ui.position.left contains the location
112 | of the splitter-bar's left edge
113 | */
114 | var splitterBarLeft = parseInt(ui.position.left, 10),
115 |
116 | // The table-of-contents total-width is the same as splitterBarLeft
117 | tocTotalWidth = splitterBarLeft,
118 |
119 | /* For the table-of-contents div, its total-width is:
120 | * (content-area width) + (padding-left width)
121 | * The padding-left width is 20
122 | tocWidth is the content-area width
123 | * Math.max(0, ...) ensures the tocWidth is not negative
124 | */
125 | tocWidth = Math.max(0, (tocTotalWidth - 20)),
126 |
127 | /* For the document div, its left position is:
128 | * (table-of-contents total-width) + (splitter-bar width)
129 | * The splitter-bar width is 12
130 | */
131 | documentLeft = tocTotalWidth + 12,
132 |
133 | /* For the document div, its content-area width is specified
134 | in the CSS file
135 | * Math.max(0, ...) ensures the tocWidth is not negative
136 | */
137 | documentWidth = Math.max(0, ((totalWidth - tocTotalWidth) - (12 + 48 + 48 + 2)))
138 | ; // END OF: var section
139 |
140 | /* Set the new values, for the CSS IDs and declarations
141 | */
142 | $('#table-of-contents').css({width : tocWidth});
143 | $('#document').css({left : documentLeft});
144 | $('#document').css({width : documentWidth});
145 | } // END OF: function(event, ui)
146 | ; // END OF: var section
147 |
148 | // https://jqueryui.com/draggable/
149 | $('#splitter-bar').draggable({
150 | // Controlling the movement of the splitter-bar along the x-axis
151 | axis : 'x',
152 |
153 | // Specifies the left and right boundaries for the splitter-bar
154 | // * A boundary is specified for the splitter-bar's left-edge
155 | // * A boundary is specified by the pair: left-position and top-position
156 | containment : [
157 | // Left-side boundary for the splitter-bar
158 | 20, // Left-position. Prevent tocWidth from becoming negative
159 | offset.top,
160 |
161 | // Right-side boundary for the splitter-bar
162 | (totalWidth - (12 + 48 + 48 + 2)), // Left-position. Prevent documentWidth from becoming negative
163 | offset.top
164 | ],
165 |
166 | // Specifies the function called for dragging
167 | drag : splitter
168 | }); // END OF: ('#splitter-bar').draggable
169 |
170 | }); // END OF: $(function(){
171 |
172 |
173 | /* This function is run when the browser-window is resized.
174 | * It reloads the web-page.
175 | * Reloading resets the sizing and the alignment, for the web-page's sections.
176 |
177 | https://stackoverflow.com/questions/14915653/refresh-page-on-resize-with-javascript-or-jquery
178 | https://stackoverflow.com/questions/5836779/how-can-i-refresh-the-screen-on-browser-resize
179 | https://stackoverflow.com/questions/29546539/refresh-page-when-container-div-is-resized
180 | */
181 | $(window).bind('resize', function(e)
182 | {
183 | if (window.RT) clearTimeout(window.RT);
184 | window.RT = setTimeout(function()
185 | {
186 | this.location.reload(false); /* false to get page from cache */
187 | }, 100);
188 | });
--------------------------------------------------------------------------------
/assets/word_web_nav_splitter_bar_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jimyuill/word-web-nav/ea95972eeea4331b88a03badf2493219fee374d9/assets/word_web_nav_splitter_bar_icon.png
--------------------------------------------------------------------------------
/createwebpage/$package-contents.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jimyuill/word-web-nav/ea95972eeea4331b88a03badf2493219fee374d9/createwebpage/$package-contents.docx
--------------------------------------------------------------------------------
/createwebpage/__init__.py:
--------------------------------------------------------------------------------
1 | # This code is needed to import functions from another file in the same directory
2 | # * Example, from create_web_page.py:
3 | # > from load_input_parameter_file import load_input_parameter_file
4 | # * See: https://stackoverflow.com/a/49375740
5 | import os, sys; sys.path.append(os.path.dirname(os.path.realpath(__file__)))
--------------------------------------------------------------------------------
/createwebpage/construct_html_sections.py:
--------------------------------------------------------------------------------
1 | '''
2 | ################
3 | This file contains the function: construct_html_sections()
4 |
5 | The function is called by: create_web_page_core() in create_web_page.py
6 |
7 | MIT License, Copyright (c) 2021-present Jim Yuill
8 | ################
9 | '''
10 |
11 | import re
12 | import sys
13 | import os
14 | # Specifies the YAML keys for the input parameter-file
15 | from input_parameter_file_keys import *
16 |
17 | # This library needs to have been installed by the user
18 | try:
19 | # BeautifulSoup: pip install beautifulsoup4
20 | from bs4 import BeautifulSoup, NavigableString
21 | except ImportError as e:
22 | print("")
23 | print("ERROR. Could not import a required Python module.")
24 | print(" The installation instructions specify the required modules.")
25 | print(" Import-error description:")
26 | print("")
27 | print(e)
28 | print("")
29 | sys.exit()
30 |
31 | def construct_html_sections(loaded_parms, jinja_template_variables, head, body):
32 | '''
33 | Description:
34 | * For the WWN web-page, constructs these output HTML-sections:
35 | * The HTML -section's tags and attributes
36 | * The HTML for the web-page header-bar
37 | * The HTML for the document-text's trailer
38 | * The WWN table-of-contents (TOC), if the input HTML has a TOC
39 |
40 | Parameters:
41 | * loaded_parms : a dictionary with the input parameter-file's contents
42 | * jinja_template_variables : the jinja-template object
43 | * head : a BeautifulSoup object that holds the element from the input HTML-file
44 | * body : a BeautifulSoup object that holds the element from the input HTML-file
45 |
46 | Return:
47 | * 1, None : error
48 |
49 | * 0, body_inner_html : OK
50 | * The objects returned
51 | * Objects passed as parameters:
52 | * loaded_parms : not changed
53 | * jinja_template_variables : values added for about 11 keys
54 | * head : not changed
55 | * body : it just has the opening and closing tags.
56 | * The HTML between those tags is removed.
57 |
58 | * body_inner_html
59 | * The HTML from the section in Word's HTML,
60 | but with these parts removed:
61 | * opening and closing tags
62 | * The table-of-contents
63 | '''
64 |
65 | '''
66 | ##################
67 | Constants
68 | ##################
69 | '''
70 |
71 | # Text added to the generated HTML
72 | #
73 | # * For the web-page header-bar, specifies the separator between
74 | # breadcrumbs, e.g., the " / " in: Home / Topic-1 / Topic-1.1
75 | BREAD_CRUMB_SEPARATOR = " / "
76 | # For the document-text trailer, specifies the anchor name.
77 | # * The anchor name can be linked-to from the web-page header-bar.
78 | DOCUMENT_TEXT_TRAILER_ANCHOR_NAME = "word_web_nav_document_text_trailer"
79 |
80 | # Names of WordWebNav files that are opened or referenced
81 | PAGE_STRUCTURE_CSS_FILE_NAME = "word_web_nav.css"
82 | JS_FILE_NAME = "word_web_nav.js"
83 |
84 | '''
85 | CSS classes that are referenced in some of the HTML that is generated.
86 | * The classes are defined in the CSS-file whose name is specified above,
87 | in the variable: PAGE_STRUCTURE_CSS_FILE_NAME
88 | '''
89 | CSS_HEADER_BAR_TEXT = "headerBarText"
90 | CSS_HEADER_BAR_HREF = "headerBarHref"
91 |
92 | '''
93 | #############################
94 | For the WWN web-page, construct the HTML -section's tags and attributes
95 | * This data includes whole HTML-tags, and attributes used in HTML tags.
96 | * This data is put in the dictionary jinja_template_variables[]
97 | * The variables will be used later in the jinja-template, in its HTML -section.
98 |
99 | The WWN web-page's HTML -section is constructed from two sources:
100 | * The section in the input Word-HTML file
101 | * Data provided in the input parameter-file
102 | #############################
103 | '''
104 |
105 | '''
106 | Get the HTML within the section of the input Word-HTML
107 |
108 | The elements within that section include:
109 | * tags
110 | * An optional | ) 289 | # * The table-cell styles include "text-align". 290 | # * The "text-align" value is specified in the parameter-file, e.g., "left", "centered", etc. 291 | # * Table-cell style values that create table-cells with no margin nor padding: 292 | # * "padding:0;margin:0;" 293 | # * https://stackoverflow.com/questions/16427903/remove-all-padding-and-margin-table-html-and-css 294 | # * Table-cell style values needed to format over-flow text as hidden, with elipses displayed (...) 295 | # * "text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"" 296 | td_opening_tag = ' | \n" 364 | # Generate the closing-tags for the table-row and table 365 | header_bar_table += "
) 396 | 397 | The TOC entries are initially in the BeautifulSoup object "body_inner_html". 398 | * The TOC will be displayed in a different web-page frame than the document body. 399 | * So, the TOC entries are removed from "body_inner_html". 400 | 401 | For each TOC entry: 402 | * The TOC entry's HTML is edited to use WordWebNav's TOC style 403 | * The TOC entry's HTML is appended to a string variable that holds the TOC. 404 | * That string variable will be used later in the jinja template, to 405 | put the TOC HTML in the web-page section: