11import { ExampleModule } from '@/modules/example' ;
22import { DOMUtils } from '@/utils/dom' ;
33import { EventEmitter } from '@/utils/events' ;
4+ import { MobileUtils } from '@/utils/mobile' ;
45import { Storage } from '@/utils/storage' ;
56
67/**
@@ -60,6 +61,14 @@ class App extends EventEmitter<AppEvents> {
6061 protected async main ( ) : Promise < void > {
6162 console . log ( '👋 Hello from UserScript Template!' ) ;
6263
64+ // Mobile detection and setup
65+ const mobileInfo = MobileUtils . detect ( ) ;
66+ if ( mobileInfo . isMobile ) {
67+ console . log ( '📱 Mobile browser detected:' , mobileInfo . browser ) ;
68+ MobileUtils . addMobileStyles ( ) ;
69+ MobileUtils . logMobileInfo ( ) ;
70+ }
71+
6372 // Example: Add some basic functionality
6473 this . addExampleFeatures ( ) ;
6574
@@ -75,11 +84,27 @@ class App extends EventEmitter<AppEvents> {
7584 // Initialize example module
7685 const exampleModule = new ExampleModule ( ) ;
7786 await exampleModule . initialize ( ) ;
78-
79- // Register the module
8087 this . registerModule ( 'example' , exampleModule ) ;
8188
82- // Listen to module events
89+ // Initialize mobile module if on mobile device
90+ const mobileInfo = MobileUtils . detect ( ) ;
91+ if ( mobileInfo . isMobile || mobileInfo . hasTouch ) {
92+ const { MobileModule } = await import ( '@/modules/mobile' ) ;
93+ const mobileModule = new MobileModule ( ) ;
94+ await mobileModule . initialize ( ) ;
95+ this . registerModule ( 'mobile' , mobileModule ) ;
96+
97+ // Listen to mobile module events
98+ mobileModule . on ( 'gestureDetected' , ( { type, position } ) => {
99+ console . log ( `📱 Gesture detected: ${ type } ${ position . x } ${ position . y } ) ;
100+ } ) ;
101+
102+ mobileModule . on ( 'orientationChanged' , ( { orientation } ) => {
103+ console . log ( `📱 Orientation changed to: ${ orientation } ) ;
104+ } ) ;
105+ }
106+
107+ // Listen to example module events
83108 exampleModule . on ( 'actionPerformed' , ( { action, timestamp } ) => {
84109 console . log (
85110 `📡 Module action received: ${ action } ${ new Date ( timestamp ) . toLocaleString ( ) }
@@ -94,28 +119,72 @@ class App extends EventEmitter<AppEvents> {
94119 * Example features to demonstrate the template
95120 */
96121 private addExampleFeatures ( ) : void {
97- // Example: Add custom styles
98- DOMUtils . addStyles (
99- `
122+ // Add mobile-optimized styles
123+ const mobileInfo = MobileUtils . detect ( ) ;
124+ const baseCss = `
100125 .userscript-highlight {
101126 background-color: yellow !important;
102127 border: 2px solid red !important;
103128 }
104- ` ,
105- 'userscript-styles'
106- ) ;
129+ ` ;
130+
131+ // Add mobile-specific styles if on mobile
132+ const mobileCss = mobileInfo . isMobile
133+ ? `
134+ .userscript-highlight {
135+ padding: 8px !important;
136+ border-radius: 4px !important;
137+ font-size: 16px !important; /* Prevent zoom on iOS */
138+ }
139+ `
140+ : '' ;
141+
142+ DOMUtils . addStyles ( baseCss + mobileCss , 'userscript-styles' ) ;
107143
108144 // Example: Storage usage
109145 const visitCount = ( Storage . get < number > ( 'visitCount' , 0 ) || 0 ) + 1 ;
110146 Storage . set ( 'visitCount' , visitCount ) ;
111147 console . log ( `📊 This is visit #${ visitCount } ) ;
112148
113- // Example: Add menu command
149+ // Example: Add menu command (with mobile detection)
114150 if ( typeof GM_registerMenuCommand !== 'undefined' ) {
115151 GM_registerMenuCommand ( 'Show Visit Count' , ( ) => {
116152 const count = Storage . get < number > ( 'visitCount' , 0 ) ;
117- alert ( `You have visited this page ${ count } ) ;
153+
154+ if ( mobileInfo . isMobile ) {
155+ // Mobile-friendly notification
156+ if ( typeof GM_notification !== 'undefined' ) {
157+ GM_notification ( `Visit Count: ${ count } , 'UserScript Info' , undefined , ( ) => {
158+ console . log ( 'Notification clicked' ) ;
159+ } ) ;
160+ } else {
161+ alert ( `You have visited this page ${ count } ) ;
162+ }
163+ } else {
164+ // Desktop alert
165+ alert ( `You have visited this page ${ count } ) ;
166+ }
118167 } ) ;
168+
169+ // Add mobile-specific menu command
170+ if ( mobileInfo . isMobile ) {
171+ GM_registerMenuCommand ( 'Mobile Info' , ( ) => {
172+ MobileUtils . logMobileInfo ( ) ;
173+
174+ const info = `
175+ Device: ${ mobileInfo . isAndroid ? 'Android' : mobileInfo . isIOS ? 'iOS' : 'Other' }
176+ Touch Support: ${ mobileInfo . hasTouch ? 'Yes' : 'No' }
177+ UserScript Support: ${ MobileUtils . supportsUserScripts ( ) ? 'Yes' : 'No' }
178+ Recommended Manager: ${ MobileUtils . getRecommendedUserScriptManager ( ) }
179+ ` ;
180+
181+ if ( typeof GM_notification !== 'undefined' ) {
182+ GM_notification ( info , 'Mobile Device Info' ) ;
183+ } else {
184+ alert ( info ) ;
185+ }
186+ } ) ;
187+ }
119188 }
120189 }
121190
0 commit comments