@@ -149,11 +149,71 @@ var tryExamplesGlobalMinHeight = 0;
149
149
*/
150
150
var tryExamplesConfigLoaded = false ;
151
151
152
+ // This function is used to check if the current device is a mobile device.
153
+ // We assume the authenticity of the user agent string is enough to
154
+ // determine that, and we also check the window size as a fallback.
155
+ window . isMobileDevice = ( ( ) => {
156
+ let cachedUAResult = null ;
157
+ let hasLogged = false ;
158
+
159
+ const checkUserAgent = ( ) => {
160
+ if ( cachedUAResult !== null ) {
161
+ return cachedUAResult ;
162
+ }
163
+
164
+ const mobilePatterns = [
165
+ / A n d r o i d / i,
166
+ / w e b O S / i,
167
+ / i P h o n e / i,
168
+ / i P a d / i,
169
+ / i P o d / i,
170
+ / B l a c k B e r r y / i,
171
+ / I E M o b i l e / i,
172
+ / W i n d o w s P h o n e / i,
173
+ / O p e r a M i n i / i,
174
+ / S a m s u n g B r o w s e r / i,
175
+ / U C .* B r o w s e r | U C W E B / i,
176
+ / M i u i B r o w s e r / i,
177
+ / M o b i l e / i,
178
+ / T a b l e t / i,
179
+ ] ;
180
+
181
+ cachedUAResult = mobilePatterns . some ( ( pattern ) =>
182
+ pattern . test ( navigator . userAgent ) ,
183
+ ) ;
184
+ return cachedUAResult ;
185
+ } ;
186
+
187
+ return ( ) => {
188
+ const isMobileBySize =
189
+ window . innerWidth <= 480 || window . innerHeight <= 480 ;
190
+ const isLikelyMobile = checkUserAgent ( ) || isMobileBySize ;
191
+
192
+ if ( isLikelyMobile && ! hasLogged ) {
193
+ console . log (
194
+ "Either a mobile device detected or the screen was resized. Disabling interactive example buttons to conserve bandwidth." ,
195
+ ) ;
196
+ hasLogged = true ;
197
+ }
198
+
199
+ return isLikelyMobile ;
200
+ } ;
201
+ } ) ( ) ;
202
+
152
203
// A config loader with request deduplication + permanent caching
153
204
const ConfigLoader = ( ( ) => {
154
205
let configLoadPromise = null ;
155
206
156
207
const loadConfig = async ( configFilePath ) => {
208
+ if ( window . isMobileDevice ( ) ) {
209
+ const buttons = document . getElementsByClassName ( "try_examples_button" ) ;
210
+ for ( let i = 0 ; i < buttons . length ; i ++ ) {
211
+ buttons [ i ] . classList . add ( "hidden" ) ;
212
+ }
213
+ tryExamplesConfigLoaded = true ; // mock it
214
+ return ;
215
+ }
216
+
157
217
if ( tryExamplesConfigLoaded ) {
158
218
return ;
159
219
}
@@ -229,6 +289,27 @@ const ConfigLoader = (() => {
229
289
} ;
230
290
} ) ( ) ;
231
291
292
+ // Add a resize handler that will update the buttons' visibility on
293
+ // orientation changes
294
+ let resizeTimeout ;
295
+ window . addEventListener ( "resize" , ( ) => {
296
+ clearTimeout ( resizeTimeout ) ;
297
+ resizeTimeout = setTimeout ( ( ) => {
298
+ if ( ! tryExamplesConfigLoaded ) return ; // since we won't interfere if the config isn't loaded
299
+
300
+ const buttons = document . getElementsByClassName ( "try_examples_button" ) ;
301
+ const shouldHide = window . isMobileDevice ( ) ;
302
+
303
+ for ( let i = 0 ; i < buttons . length ; i ++ ) {
304
+ if ( shouldHide ) {
305
+ buttons [ i ] . classList . add ( "hidden" ) ;
306
+ } else {
307
+ buttons [ i ] . classList . remove ( "hidden" ) ;
308
+ }
309
+ }
310
+ } , 250 ) ;
311
+ } ) ;
312
+
232
313
window . loadTryExamplesConfig = ConfigLoader . loadConfig ;
233
314
234
315
window . toggleTryExamplesButtons = ( ) => {
0 commit comments