vendor/oojs/oojs-ui/demos/index.html

   1 <!DOCTYPE html>
   2 <html lang="en" dir="ltr">
   3 <head>
   4         <meta charset="UTF-8">
   5         <title>OOjs UI Demos</title>
   6         <meta name="viewport" content="width=device-width, initial-scale=1">
   7         <link rel="stylesheet" href="classes/ButtonStyleShowcaseWidget.css">
   8         <link rel="stylesheet" href="classes/SimpleWidget.css">
   9         <link rel="stylesheet" href="classes/FloatableTest.css">
  10         <link rel="stylesheet" href="classes/PositionSelectWidget.css">
  11         <link rel="stylesheet" href="node_modules/prismjs/themes/prism.css">
  12 </head>
  13 <body>
  14         <script src="node_modules/jquery/dist/jquery.js"></script>
  15         <script src="node_modules/oojs/dist/oojs.jquery.js"></script>
  16         <script src="node_modules/prismjs/prism.js"></script>
  17         <script src="node_modules/prismjs/plugins/autolinker/prism-autolinker.js"></script>
  18         <script src="node_modules/javascript-stringify/javascript-stringify.js"></script>
  19         <script src="dist/oojs-ui.js"></script>
  20         <script src="dist/oojs-ui-wikimediaui.js"></script> <!-- Do not change this line or you'll break `grunt add-theme` -->
  21         <script src="dist/oojs-ui-apex.js"></script>
  22         <script src="demo.js"></script>
  23         <script src="classes/ButtonStyleShowcaseWidget.js"></script>
  24         <script src="classes/CapsuleNumberPopupMultiselectWidget.js"></script>
  25         <script src="classes/SimpleWidget.js"></script>
  26         <script src="classes/DraggableGroupWidget.js"></script>
  27         <script src="classes/DraggableItemWidget.js"></script>
  28         <script src="classes/DraggableHandledItemWidget.js"></script>
  29         <script src="classes/DynamicLabelTextInputWidget.js"></script>
  30         <script src="classes/NumberLookupTextInputWidget.js"></script>
  31         <script src="classes/UnsupportedSelectFileWidget.js"></script>
  32         <script src="classes/BookletDialog.js"></script>
  33         <script src="classes/BrokenDialog.js"></script>
  34         <script src="classes/ContinuousOutlinedBookletDialog.js"></script>
  35         <script src="classes/DialogWithDropdowns.js"></script>
  36         <script src="classes/DialogWithPopupAndDropdown.js"></script>
  37         <script src="classes/FloatableTest.js"></script>
  38         <script src="classes/FloatableWidget.js"></script>
  39         <script src="classes/IndexedDialog.js"></script>
  40         <script src="classes/LongProcessDialog.js"></script>
  41         <script src="classes/MenuDialog.js"></script>
  42         <script src="classes/OutlinedBookletDialog.js"></script>
  43         <script src="classes/PopupButtonWidgetTest.js"></script>
  44         <script src="classes/PositionSelectWidget.js"></script>
  45         <script src="classes/ProcessDialog.js"></script>
  46         <script src="classes/SampleTabPanel.js"></script>
  47         <script src="classes/SamplePage.js"></script>
  48         <script src="classes/SearchWidgetDialog.js"></script>
  49         <script src="classes/SimpleDialog.js"></script>
  50         <script src="classes/DelayedReadyProcessDialog.js"></script>
  51         <script src="classes/FailedReadyProcessDialog.js"></script>
  52         <script src="classes/FailedSetupProcessDialog.js"></script>
  53         <script src="pages/dialogs.js"></script>
  54         <script src="pages/icons.js"></script>
  55         <script src="pages/widgets.js"></script>
  56         <script src="pages/toolbars.js"></script>
  57         <script>
  58                 $( function () {
  59                         var demo, lastQuery = location.search;
  60
  61                         function setup() {
  62                                 var
  63                                         prevPage = demo ? demo.mode.page : null,
  64                                         scrollPos = $( window ).scrollTop();
  65                                 if ( demo ) {
  66                                         if ( lastQuery === location.search ) {
  67                                                 return false;
  68                                         }
  69                                         demo.destroy();
  70                                 }
  71                                 lastQuery = location.search;
  72                                 demo = new Demo();
  73                                 $( 'body' ).append( demo.$element );
  74                                 demo.initialize().done( function () {
  75                                         if ( prevPage === demo.mode.page && scrollPos ) {
  76                                                 // Restore scroll position from before we destroyed the demo
  77                                                 $( window ).scrollTop( scrollPos );
  78                                         } else {
  79                                                 Demo.static.scrollToFragment();
  80                                         }
  81                                 } );
  82                         }
  83
  84                         setup();
  85
  86                         $( window ).on( 'popstate', setup );
  87                         $( window ).on( 'hashchange', Demo.static.scrollToFragment );
  88                 } )
  89         </script>
  90 </body>
  91 </html>