This Configuration Window supports adding or modifying Link- and Language-Buttons for the navigation bar and burger menu.

Positioning

The navigation bar is split into 3 position blocks

Left center right

The center position block is centered in the middle of the window, whereas left and right position blocks are at the left respectively right side of the window.
This allows very flexible but still easy positioning.
Within each block, the symbols (link- or language-symbols) can be put into any order/sequence.

Move the symbols with these buttons.

This arrow buttons (and all other symbol specific configuration buttons and fields) are shown as soon as a row with a symbol is selected (mouse click inside a row).
Clicking the arrow buttons moves the selected row up or down and with it the symbol (this corresponds to a left or right move in the navigation bar, and an up or down move in the burger menu).

First, the row/symbol is moved within the same position block. Once the edge of a position block is reached, the next click will move the symbol to the adjacent position block.

Example:
The first symbol in a center block becomes the last symbol in the left position block after an arrow-up click.

The position block related to a symbol is shown in the column Position.
A change of position is only possible via moving the rows; the position cells are not editable.



Link Symbols

Link Symbols either are Icons or Names (text), that are shown in the navigation bar or burger menu.
A click on such icon results in an action.

Adding a Link-Symbol

A new link symbol can be added to the table (and with it to the navigation bar/burger menu) clicking the Add new Row button.
A new row is inserted, with a dummy name, positioned in the center block.
All parameters must be adjusted using the available buttons and fields.



Deleting a Link-Symbol

Link-Symbols can be deleted if instead of the symbol the name should be shown. A click of this button takes the selected row off the table and with the removes the link symbol.

Name

Each Link-Symbol should be named accordingly. That name is used if no icon is selected, and also shows up as a tooltip when hovering over the link-symbols.


The name of the link symbol is entered in this name field.

Special characters like ü ä ö è are not supported!
The length of the name must not exceed 16 characters!

Action (URL)


An action is entered in the URL field. These actions actually are supported:

  • Open another web site: Enter the URL of that site like https://megazine3.de
  • Jump to a specific page: Enter the page number
  • Prepare an email: Enter the Email-Adress, e.g. mailto:ingo@megazine3.de
  • Jump to a specific _anchor: enter the anchor name after a leading ‘#’ character, like #ToC

Add a Link-Icon

Each Link-Symbol can be represented by a dedicated icon. Clicking the “Browse” Icon opens the File-Explorer / File-Finder.
The first time the special folder
./Documents/mz3Tool/mz3ToolAssets/jsIcons is opened.
Here you’ll find some sample icons. Feel free to use them for your Mz3 Projects
Or select your own icons
The last folder used will be opened again next time you browse for an icon.

Once an icon is selected, that icon is copied to the project folder for use in the book and loaded. It will show up in the table:

Once an icon is selected, this icon will be used instead of the symbol name.

To indicate what is used for the link symbol, either this indicator (in case an icon is used) or this one is shown (in case a name/text is used),

Remove a Link Icon

A Link-Icon can be removed, if instead of showing an icon the name should be used as text.instead.

Language Symbols

In case of a multilingual book with more than one language added to the book, an interactive language switch must be supported.
That’s the purpose of the language symbols.
Every language used in the book is represented by a row in the table.

To remove a language, use the Settings – Language Selection command.
Changes there are immediately reflected in this table also: Rows are added or deleted respectively;

Language symbols can be shown as text (the fix language code, also used as name) or an icon.

Als the action cannot be changed: A click on a language symbol (icon or language code) always changes the language.

Add or modify a Language Icon

You can assign a special icon to each language. After a click on the Browse button, the File-Explorer / File-Finder opens and presents the last used folder.
The first time, this folder is opened:
./Documents/mz3Tool/mz3ToolAssets/jsIcons
In the subfolder ./languageIcons/ you find 3 subfolders with small and bigger flags as well as examples for text language icons; partially usable as on/off icons.

The selected icon is loaded and shown in the table.

Depending on the state (active or inactive language) language symbols look different

  • active: The language is selected and the language used for the opened book
    Icon or language code is shown in full size without any transparency.
    The active symbol is the first symbol after the “type indicator” ( or )
  • inactive: An inactive language is prepared but not selected. It can be selected via a click on the language symbol and then becomes the active language.
    An inactive icon is rendered smaller with some transparency
    The last icon in the icon column (the one right of the active language icon) is the inactive icon.

Remove a Language Icon

To show the language code again, a language icon can be removed.

Spcial use case: Different active/inactive Icons

If the file name of a language icon ends with “_on”, mz3Tool looks for the corresponding “*_off” icon.
If that is available, it will be used. As “inactive” icon it always will be rendered smaller wit transparency

This way you can use colored Icons, e.g. a red or green one for the active language and a grey or read one for the inactive language.

Example: Pair of different Language Icons

  • DE Icons: de_on.png / de_off.png
  • EN Icons: flags.en_on.gif/flags.en_off.gif

In this case, we used a trick to highlight and show that different icons are used and make use of a GB Flag for the active and a US flag for the inactive language.

In a real project, this does not really make sense but will clarify the logic.

Background information:
The file name of the inactive icon is built automatically from the file name of the active icon.
If no file exists under that path, the active icon will be used and as usually rendered smaller with transparency in the inactive case.

Often a single language icon is sufficient because thanks to the different rendering active and inactive symbols can be differentiated anyhow.

If you intend using differently colored icons, you’ll have to follow the _on/_off approach.

Revision: 13
Last modified: 2019/08/19

Feedback

Was this helpful?

Yes No
You indicated this topic was not helpful to you ...
Could you please leave a comment telling us why? Thank you!
Thanks for your feedback.

Post your comment on this topic.

Post Comment