1+ import {
2+ TIP_CHANGE_INTERVAL ,
3+ BACKGROUND_CHANGE_INTERVAL ,
4+ BACKGROUND_IMAGES ,
5+ ENABLE_CURSOR
6+ } from '../config.js'
7+
8+ import { parsedMdTips } from "./markdown_parser.js" ;
9+
10+ /**
11+ * @typedef {Object } TooltipObject
12+ * @property {string } title - The title of the tooltip
13+ * @property {string } content - The HTML contents
14+ **/
15+
16+ const headerEl = $ ( '#tip-header' )
17+ const contentEl = $ ( '#tip-content' )
18+ const hintHelpTxtEl = $ ( '#hint-help-text' )
19+ const containerEL = $ ( '#container' )
20+ const bgImgEl = $ ( '#bgImg' )
21+ const spinnerEl = $ ( '#spinner' )
22+
23+
24+ // We store the current tipInterval if any here
25+ let tipInterval = null
26+
27+ // We store the current tipIndex here
28+ let currentTipIndex
29+
30+ /**
31+ * Set the current tooltip
32+ * @param tooltipObj {TooltipObject} - The tooltip object
33+ * @param index {number} - The array index for this particular tooltip object
34+ **/
35+ const setCurrentTip = ( { title, content} , index ) => {
36+ headerEl . fadeOut ( "fast" , ( ) => {
37+ headerEl . html ( title )
38+ headerEl . fadeIn ( "fast" )
39+ } )
40+ contentEl . fadeOut ( "fast" , ( ) => {
41+ contentEl . html ( content )
42+ contentEl . fadeIn ( "fast" )
43+ } )
44+ hintHelpTxtEl . text ( `Browse Tips ${ index + 1 } ${ parsedMdTips . length } )
45+ currentTipIndex = index
46+
47+ if ( tipInterval ) {
48+ clearInterval ( tipInterval )
49+ }
50+
51+ tipInterval = setInterval ( ( ) => showNextTip ( ) , TIP_CHANGE_INTERVAL )
52+ }
53+
54+ /**
55+ * Handle the left arrow "prev" tooltip
56+ **/
57+ const showPrevTip = ( ) => {
58+ const prevTipIdx = currentTipIndex - 1
59+ const finalTipIdx = parsedMdTips . length - 1
60+
61+ clearInterval ( tipInterval )
62+
63+ if ( prevTipIdx < 0 ) {
64+ const tipObj = parsedMdTips [ finalTipIdx ]
65+ setCurrentTip ( tipObj , finalTipIdx )
66+ } else {
67+ const tipObj = parsedMdTips [ prevTipIdx ]
68+ setCurrentTip ( tipObj , prevTipIdx )
69+ }
70+ }
71+
72+ /**
73+ * Handle the right arrow "next" tooltip
74+ **/
75+ const showNextTip = ( ) => {
76+ const nextTipIdx = currentTipIndex + 1
77+
78+ if ( nextTipIdx > parsedMdTips . length - 1 ) {
79+ const tipObj = parsedMdTips [ 0 ]
80+ setCurrentTip ( tipObj , 0 )
81+ } else {
82+ const tipObj = parsedMdTips [ nextTipIdx ]
83+ setCurrentTip ( tipObj , nextTipIdx )
84+ }
85+ }
86+
87+ /**
88+ * Find random tooltip and set it as current
89+ **/
90+ const setRandomTip = ( ) => {
91+ const randomTipIndex = Math . floor ( Math . random ( ) * parsedMdTips . length )
92+ const randomTipObj = parsedMdTips [ randomTipIndex ]
93+ setCurrentTip ( randomTipObj , randomTipIndex )
94+ }
95+
96+ /**
97+ * Fade out the whole loading screen container
98+ **/
99+ const fadeoutLoadingScreen = ( ) => {
100+ containerEL . fadeOut ( 'slow' )
101+ }
102+
103+ let currentBgIdx = 0
104+
105+ /**
106+ * Start the interval for background changes
107+ **/
108+ const startBackgroundInterval = ( ) => {
109+ setInterval ( ( ) => {
110+
111+ const nextImgIdx = currentBgIdx + 1
112+ const imgIdx = ( nextImgIdx > BACKGROUND_IMAGES . length - 1 ) ? 0 : nextImgIdx
113+
114+ const bgFileName = BACKGROUND_IMAGES [ imgIdx ]
115+
116+ bgImgEl . css ( "background-image" , `url(backgrounds/${ bgFileName } )
117+
118+ currentBgIdx = imgIdx
119+ } , BACKGROUND_CHANGE_INTERVAL )
120+ }
121+
122+ /* Listeners */
123+
124+ window . addEventListener ( 'DOMContentLoaded' , ( ) => {
125+ startBackgroundInterval ( )
126+ setRandomTip ( )
127+ spinnerEl . fadeIn ( )
128+ } )
129+
130+ window . addEventListener ( 'keydown' , ( e ) => {
131+ if ( e . code === 'ArrowLeft' ) {
132+ showPrevTip ( )
133+ } else if ( e . code === 'ArrowRight' ) {
134+ showNextTip ( )
135+ }
136+ } )
137+
138+ window . addEventListener ( 'message' , ( e ) => {
139+ // We get this from the client scripts
140+ if ( e . data . fullyLoaded ) {
141+ return fadeoutLoadingScreen ( )
142+ }
143+ } )
144+
145+ if ( ENABLE_CURSOR ) {
146+ const cursor = document . getElementById ( 'cursor' )
147+
148+ cursor . style . visibility = 'visible'
149+
150+ window . addEventListener ( "mousemove" , e => {
151+ // These offsets are related to the size of the SVG
152+ // for now this is fine
153+ const x = e . pageX - cursor . offsetWidth + 20
154+ const y = e . pageY - 2
155+
156+ cursor . style . left = `${ x }
157+ cursor . style . top = `${ y }
158+ } )
159+
160+ }
0 commit comments