1+ /* Helper script for resolving relative paths */
2+ function relativeToScript ( path ) {
3+ return new URL ( path , new URL ( '.' , document . currentScript . src ) ) . toString ( ) ;
4+ }
5+
6+ /* Helper script for loading an HTML file into an existing element */
7+ async function loadInto ( element , path ) {
8+ return new Promise ( ( resolve , reject ) => {
9+ $ . ajax ( {
10+ url : path ,
11+ method : 'GET' ,
12+ dataType : 'html' ,
13+ timeout : 5000 ,
14+ success : function ( data ) {
15+ const $orig = $ ( element ) ;
16+ const $new = $ ( data ) ;
17+ const id = $orig . attr ( 'id' ) ;
18+ $orig . replaceWith ( $new ) ;
19+ $new . attr ( 'id' , id ) ; // restore the ID
20+ resolve ( ) ;
21+ } ,
22+ error : function ( xhr , status , exception ) {
23+ reject ( `Error when attempting to load HTML file: ${ xhr . status } ${ xhr . statusText } ) ;
24+ }
25+ } ) ;
26+ } ) ;
27+ }
28+
29+ /* Global app reference */
30+ class InteractiveUML {
31+ constructor ( ) {
32+ // Elements
33+ this . elements = {
34+ navbar : null ,
35+ appcontent : null
36+ } ;
37+
38+ // Vue apps
39+ this . vueapps = {
40+ navbar : null ,
41+ appcontent : null
42+ } ;
43+ }
44+ }
45+ globalThis . app = new InteractiveUML ( ) ;
46+
47+ /* Main script for Vue functionality */
48+ 'use strict' ;
49+ ( async function ( ) {
50+ // Global variables
51+ const home_loc = relativeToScript ( '../../' ) ;
52+ const idesigner_loc = relativeToScript ( '../../idesigner/' ) ;
53+ const navbar_id = 'vjs-navbar' ;
54+ const navbar_loc = relativeToScript ( '../../components/navbar.html' ) ;
55+ const appcontent_id = 'vjs-appcontent' ;
56+
57+ // Find and verify HTML elements
58+ const html_navbar = document . querySelector ( `#${ navbar_id } ) ;
59+ if ( html_navbar == undefined ) {
60+ console . error ( "Unable to load navbar, #vjs-navbar not found!" ) ;
61+ return ;
62+ }
63+ if ( html_navbar . tagName . localeCompare ( 'nav' , undefined , { sensitivity : 'base' } ) != 0 ) {
64+ console . error ( "Navbar element is not a <nav> tag, please check your HTML!" ) ;
65+ return ;
66+ }
67+ const jq_navbar = $ ( html_navbar ) ;
68+ app . elements . navbar = jq_navbar ;
69+ const html_appcontent = document . querySelector ( `#${ appcontent_id } ) ;
70+ if ( html_appcontent == undefined ) {
71+ console . error ( "Unable to load content, #vjs-appcontent not found!" ) ;
72+ return ;
73+ }
74+ const jq_appcontent = $ ( html_appcontent ) ;
75+ app . elements . appcontent = jq_appcontent ;
76+
77+ // Load navigation bar
78+ await loadInto ( jq_navbar , navbar_loc , navbar_id ) ;
79+
80+ // Initialize Vue app for the navbar
81+ const vue_navbar = Vue . createApp ( {
82+ setup ( ) {
83+ const navItems = Vue . ref ( [
84+ { name : 'Home' , href : home_loc , active : false } ,
85+ { name : 'IInterface Designer' , href : idesigner_loc , active : false }
86+ ] ) ;
87+ const currentUrl = new URL ( window . location . href ) ;
88+ for ( const item of navItems . value ) {
89+ const itemUrl = new URL ( item . href , document . baseURI ) ;
90+ if ( itemUrl . pathname . localeCompare ( currentUrl . pathname , undefined , { sensitivity : 'base' } ) === 0 ) {
91+ item . active = true ;
92+ }
93+ }
94+ return { navItems } ;
95+ }
96+ } ) ;
97+ vue_navbar . mount ( '#' + navbar_id ) ;
98+ app . vueapps . navbar = vue_navbar ;
99+
100+ // Done! ^-^
101+ console . log ( "Vue.js script loaded successfully!" , app ) ;
102+ } ) ( ) ;
0 commit comments