Internal Interface

Relevant source files

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

• inside/interface.php
• apps/js/iite_components.js
• themes/css/design.css
• inside/overview.php
• apps/pages.php
• login.php

The Internal Interface is a front-end module that provides a dynamic, tab-based content switching system. It allows users to navigate between different content panes on a single page without a full page reload. The system is built using a combination of PHP for server-side rendering of the initial page structure, JavaScript for handling user interactions and dynamic content visibility, and CSS for layout and styling.

This component is primarily client-side, with the core logic residing in a JavaScript function that manipulates CSS classes to show and hide content sections based on user clicks. The initial HTML structure is rendered via a PHP script that includes a specific template file.

Architecture

The architecture of the Internal Interface follows a simple server-rendered pattern augmented with client-side interactivity. The process begins with a PHP script that sets up the page and includes the necessary HTML template. Once the page is loaded in the browser, a global JavaScript file takes over to manage the tabbed interface's state and behavior.

Sources: inside/interface.php, apps/js/iite_components.js, themes/css/design.css

Component Flow

The diagram below illustrates how the different parts of the system interact to render and manage the interface.

PHP Backend Setup

The server-side component of the interface is handled by inside/interface.php. Its responsibilities are minimal and focused on bootstrapping the page.

1. Set Page Title: It defines the <title> tag for the HTML document.
2. Render Template: It uses an output buffer (ob_start, ob_get_clean) to capture the rendered HTML from a template file (themes/apps/inside/interface.phtml).
3. Apply Layout: The captured HTML is then injected into a global site layout file (themes/components/statics/layout.phtml), which provides the common header, footer, and asset includes.

<?php
    // inside/interface.php

    $title = "Interface - Institute Itech™"; // Sets the page title

    ob_start();

    // Includes the specific HTML structure for the interface
    include __DIR__ . '/../themes/apps/inside/interface.phtml';

    $output_page = ob_get_clean();

    // Wraps the page content in the main site layout
    include __DIR__ . '/../themes/components/statics/layout.phtml';
?>

Sources: inside/interface.php:3-11

This pattern is common across other pages in the application, such as inside/overview.php and login.php, establishing a consistent server-side rendering approach.

Sources: inside/overview.php:18-21, login.php:26-31

Frontend JavaScript Logic

The interactive behavior of the tabbed interface is controlled entirely by the interface() function within apps/js/iite_components.js. This function is called globally, ensuring it runs on any page that includes the main component script.

Sources: apps/js/iite_components.js:140-161

Core Functionality

The interface() function performs the following steps:

1. Selects all clickable tab elements using the attribute selector [menu-interface].
2. Selects all corresponding content panes using the class selector .w-interface.
3. Iterates over each tab button and attaches a click event listener.
4. When a tab is clicked:
   a. It first removes the .interface-active class from all content panes, hiding them.
   b. It then removes the .btn-interface-active class from all tab buttons, resetting their state.
   c. Finally, it adds .interface-active to the content pane that corresponds to the clicked tab (by index) and .btn-interface-active to the clicked tab itself.

Logic Flowchart

This flowchart visualizes the logic executed when a user clicks on a tab button.

User Interaction Sequence

The following sequence diagram shows the interaction between the user, the JavaScript function, and the DOM.

CSS Styling and Layout

The visual appearance, layout, and state transitions of the interface are defined in themes/css/design.css. A set of specific classes controls the structure and the active/inactive states of the tabs and content panes.

Sources: themes/css/design.css:1107-1196

Key CSS Classes

Class/Selector	Description	Source File & Lines
.background-userinterface	The main container for the entire interface page, setting background color and padding.	themes/css/design.css:1107-1115
.box-userinterface	A CSS grid container that structures the main layout into columns for the menu, content, and other panels.	themes/css/design.css:1125-1132
.userinterface-1	The grid column that holds the tab navigation buttons.	themes/css/design.css:1133-1140
.userinterface-2	The grid column that holds the content panes (.w-interface elements).	themes/css/design.css:1198-1205
.btn-interface	The base style for a tab button.	themes/css/design.css:1152-1160
.btn-interface:hover	The hover style for a tab button, providing visual feedback.	themes/css/design.css:1161-1165
.btn-interface-active	The style for the currently active tab button, indicating the selected pane.	themes/css/design.css:1166-1170
.w-interface	The base class for a content pane. It is hidden by default (display: none).	themes/css/design.css:1171-1176
.interface-active	The class applied to the visible content pane. It overrides the default style to be display: block.	themes/css/design.css:1195-1197

Conclusion

The Internal Interface is a straightforward and effective implementation of a client-side tabbed content system. It relies on a clear separation of concerns: PHP for initial structure, CSS for presentation and state styling, and a concise JavaScript function for handling all user-driven interactivity. This modular approach makes it a reusable and maintainable component within the website's architecture.