General Interactivity

Relevant source files

The following files were used as context for generating this wiki page:

• apps/js/iite_components.js
• themes/css/design.css
• themes/css/iite.css
• inside/interface.php
• apps/translations.json

The general interactivity of the website is managed primarily through client-side JavaScript, which handles navigation, component state, and user-driven UI changes. This system is responsible for creating a dynamic and responsive user experience, from main page routing to the behavior of smaller components like menus and cookie banners.

Core functionality is centralized in iite_components.js, which adds event listeners to various DOM elements. Styling for interactive states (e.g., hover, active) and component visibility is defined in design.css and iite.css. Text content for interactive elements like the cookie banner is sourced from apps/translations.json, allowing for multi-language support.

Page Navigation

Client-side routing for primary navigation links is handled by attaching click event listeners to elements with a data-page attribute. Based on the attribute's value, the script redirects the user to the corresponding URL.

Sources: apps/js/iite_components.js:3-23

Navigation Routes

The following table outlines the navigation mappings defined in the script.

data-page Value	Destination URL
iite	http://localhost
insideiite	/inside/overview.php
research	#
departments	/departments/overview.php
news	#
inside	#

Sources: apps/js/iite_components.js:8-19

This diagram illustrates the client-side navigation flow.

Dynamic Styling

The UI adapts based on the current page URL. A notable example is the color of the main logo.

Logo Color Change

The IITE logo's color is dynamically set to black on specific pages to ensure visibility against a light background. On all other pages, it defaults to white. This logic checks if the current window.location.pathname includes any of the predefined "white" page paths.

The pages that trigger a black logo are:

• /iite/company
• /iite/wep
• /iite/relationship
• /departments/overview
• /inside/overview
• /inside/ets.php

Sources: apps/js/iite_components.js:26-39

Cookie Consent Management

The website features a cookie consent banner whose visibility is controlled using localStorage to remember the user's choice.

The banner UI consists of a container (#cookies), an accept button (#btn-cookies), and a decline button (#btn-cookies-decline). The text for the banner is provided via apps/translations.json.

Translation Key	Purpose
translate_title	Title of the cookie banner
translate_description	Explanatory text about cookies and User Protect
translate_button_accept	Text for the accept button
translate_button_decline	Text for the decline button

Sources: apps/translations.json:22-45, themes/css/iite.css:139-189

Interaction Flow

The following diagram shows the process for handling the cookie banner's visibility.

Mobile Navigation Menu

For smaller viewports, a mobile navigation menu is provided. The menunavmobile function controls its behavior.

Functionality

• Trigger: A click event on the menu icon (#menu-nav-mobile).
• Action: Toggles the display of the menu container (#container-menu-nav) between flex and none.
• Animation: When opening, the hamburger icon's spans are animated to form an 'X'. When closing, the page is reloaded to reset the state.

The following state diagram illustrates the menu's open/close mechanism.

Tabbed Interface System

A generic tabbed interface system is implemented on pages like the one loaded by inside/interface.php. This allows users to switch between different content panes without reloading the page.

Implementation

• Tabs: Elements with a [menu-interface] attribute.
• Panes: Elements with a .w-interface class.

The interface() function in JavaScript synchronizes the tabs and panes. When a tab is clicked, the script adds an interface-active class to the corresponding content pane and a btn-interface-active class to the clicked tab, making them visible while hiding the others.

Sources: apps/js/iite_components.js:134-152, themes/css/design.css:1113-1144, inside/interface.php

Sequence Diagram

This diagram shows the sequence of events when a user interacts with the tabbed interface.

Hover Effects and Visual Feedback

The website uses CSS to provide extensive visual feedback on user interaction, primarily through hover effects. These effects are applied to various elements to indicate they are interactive.

Element/Class	Hover Behavior	CSS Effect
.grid-company-hover	Card lifts and gains a shadow.	transform: translateY(-5px) scale(1.02); box-shadow: ...;
.swapmove-1, .swapmove-2, etc.	Card scales up.	transform: scale(105%);
.btn-interface	Background color changes, blue left border appears.	background-color: rgb(202, 202, 202); border-left: 5px solid var(--w-blue);
.dropdown-list	Text color changes to blue.	color: var(--w-blue);
.container-translate > span	Icon background and text color swap.	color: var(--w-white); background-color: var(--w-blue);

Sources: themes/css/design.css:654-662, 808-815, 1130-1133, themes/css/iite.css:108-111