Subversion Repositories oidplus

Rev

Blame | Last modification | View Log | RSS feed

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.  
  7.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
  8.           integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  9.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
  10.           integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
  11.           crossorigin="anonymous" referrerpolicy="no-referrer"/>
  12.     <link rel="stylesheet"
  13.           href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-solarizedlight.min.css"
  14.           integrity="sha512-fibfhB71IpdEKqLKXP/96WuX1cTMmvZioYp7T6I+lTbvJrrjEGeyYdAf09GHpFptF8toQ32woGZ8bw9+HjZc0A=="
  15.           crossorigin="anonymous" referrerpolicy="no-referrer"/>
  16.     <style>
  17.         .bg-pink {
  18.             background-color: pink;
  19.         }
  20.  
  21.         .text-purple {
  22.             color: purple;
  23.         }
  24.  
  25.         .border-pink {
  26.             border-color: pink !important;
  27.         }
  28.     </style>
  29.  
  30.     <title>Hello, world!</title>
  31. </head>
  32. <body>
  33.  
  34. <div class="container-fluid text-center text-white bg-dark shadow-lg py-5 mb-5">
  35.     <h1 class="fw-bold">bs5-utils</h1>
  36. </div>
  37.  
  38. <div class="container text-center">
  39.     <div class="row justify-content-center">
  40.         <div class="col-md-8">
  41.             <div class="card mb-2">
  42.                 <div class="card-header bg-dark fw-bolder"><code>Bs5Utils.Snack.show</code></div>
  43.                 <div class="card-body p-0">
  44.                     <pre class="m-0"><code id="snack-code" class="language-javascript">bs5Utils.Snack.show(
  45.     type,
  46.     title,
  47.     delay = 0,
  48.     dismissible = true
  49. );</code></pre>
  50.                 </div>
  51.                 <div class="card-footer p-0">
  52.                     <button id="show-snack-btn" class="btn d-block btn-dark rounded-0 w-100">Show Snack</button>
  53.                 </div>
  54.             </div>
  55.  
  56.             <div class="card mb-2">
  57.                 <div class="card-header bg-dark fw-bolder"><code>Bs5Utils.Toast.show</code></div>
  58.                 <div class="card-body p-0">
  59.                     <pre class="m-0"><code id="toast-code" class="language-javascript">bs5Utils.Toast.show({
  60.      type,
  61.      icon = '',
  62.      title,
  63.      subtitle = '',
  64.      content = '',
  65.      buttons = [],
  66.      delay = 0,
  67.      dismissible = true
  68. });</code></pre>
  69.                 </div>
  70.                 <div class="card-footer p-0">
  71.                     <button id="show-toast-btn" class="btn d-block btn-dark rounded-0 w-100">Show Toast</button>
  72.                 </div>
  73.             </div>
  74.  
  75.             <div class="card mb-2">
  76.                 <div class="card-header bg-dark fw-bolder"><code>Bs5Utils.Modal.show</code></div>
  77.                 <div class="card-body p-0">
  78.                     <pre class="m-0"><code id="modal-code" class="language-javascript">bs5Utils.Modal.show({
  79.      type,
  80.      title = '',
  81.      content = '',
  82.      buttons = [],
  83.      centered = false,
  84.      dismissible = true,
  85.      backdrop = dismissible ? true : 'static',
  86.      keyboard = dismissible,
  87.      focus = true,
  88.      fullscreen = false,
  89.      size = ''
  90. });</code></pre>
  91.                 </div>
  92.                 <div class="card-footer p-0">
  93.                     <button id="show-modal-btn" class="btn d-block btn-dark rounded-0 w-100">Show Modal</button>
  94.                 </div>
  95.             </div>
  96.         </div>
  97.     </div>
  98. </div>
  99.  
  100. <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"
  101.         integrity="sha512-axJX7DJduStuBB8ePC8ryGzacZPr3rdLaIDZitiEgWWk2gsXxEFlm4UW0iNzj2h3wp5mOylgHAzBzM4nRSvTZA=="
  102.         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  103. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
  104.         integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
  105.         crossorigin="anonymous"></script>
  106. <!--<script src="../src/js/components/Toast.js"></script>-->
  107. <!--<script src="../src/js/components/Snack.js"></script>-->
  108. <!--<script src="../src/js/components/Modal.js"></script>-->
  109. <!--<script src="../src/js/Bs5Utils.js"></script>-->
  110. <script src="../dist/js/Bs5Utils.js"></script>
  111. <script>
  112.     window.Prism = window.Prism || {};
  113.     window.Prism.manual = true;
  114.  
  115.     function getRandomInt(min, max) {
  116.         min = Math.ceil(min);
  117.         max = Math.floor(max);
  118.         return Math.floor(Math.random() * (max - min + 1)) + min;
  119.     }
  120.  
  121.     function randFromArray(arr) {
  122.         return arr[getRandomInt(0, arr.length - 1)];
  123.     }
  124.  
  125.     /***
  126.      * Overridable globals
  127.      ***/
  128.     Bs5Utils.defaults.toasts.position = 'top-right';
  129.     Bs5Utils.defaults.toasts.container = 'toast-container';
  130.     Bs5Utils.defaults.toasts.stacking = true;
  131.  
  132.     const bs5Utils = new Bs5Utils();
  133.     const types = ['secondary', 'light', 'white', 'dark', 'info', 'primary', 'success', 'warning', 'danger'];
  134.  
  135.     const snackCode = document.getElementById('snack-code'),
  136.         toastCode = document.getElementById('toast-code'),
  137.         modalCode = document.getElementById('modal-code');
  138.  
  139.     Prism.highlightElement(snackCode);
  140.     Prism.highlightElement(toastCode);
  141.     Prism.highlightElement(modalCode);
  142.  
  143.     document.querySelector('#show-snack-btn').addEventListener('click', function () {
  144.         const type = randFromArray(types);
  145.         let delay = 0;
  146.  
  147.         if (getRandomInt(0, 1) === 1) {
  148.             delay = 5000;
  149.         }
  150.  
  151.         bs5Utils.Snack.show(type, 'Hello World!', delay, true);
  152.         snackCode.innerHTML = `bs5Utils.Snack.show(
  153.     '${type}',
  154.     'Hello World!',
  155.     ${delay},
  156.     true
  157. );`;
  158.  
  159.         Prism.highlightElement(snackCode);
  160.     });
  161.  
  162.     document.querySelector('#show-toast-btn').addEventListener('click', function () {
  163.         const type = randFromArray(types),
  164.             buttons = getRandomInt(0, 1) === 1 ? [
  165.                 {
  166.                     text: 'Click Me!',
  167.                     class: 'btn btn-sm btn-primary',
  168.                     handler: () => {
  169.                         alert(`${type} has been clicked!`);
  170.                     }
  171.                 },
  172.                 {
  173.                     text: 'Click Me Too!',
  174.                     class: 'btn btn-sm btn-warning',
  175.                     handler: () => {
  176.                         alert(`You clicked me too!`);
  177.                     }
  178.                 },
  179.                 {
  180.                     type: 'dismiss',
  181.                     text: 'Hide',
  182.                     class: 'btn btn-sm btn-secondary'
  183.                 }
  184.             ] : [];
  185.  
  186.         let icon = ``;
  187.  
  188.         switch (getRandomInt(0, 2)) {
  189.             case 0:
  190.                 icon = `<i class="far fa-check-circle fa-lg me-2"></i>`;
  191.                 break;
  192.  
  193.             case 1:
  194.                 icon = `<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>`;
  195.                 break;
  196.  
  197.             case 2:
  198.                 icon = ``
  199.                 break;
  200.         }
  201.  
  202.         let delay = 0;
  203.  
  204.         if (getRandomInt(0, 1) === 1) {
  205.             delay = 5000;
  206.         }
  207.  
  208.         bs5Utils.Toast.show({
  209.             type,
  210.             icon,
  211.             title: `Notification!`,
  212.             subtitle: '23 secs ago',
  213.             content: `Hello World!`,
  214.             buttons,
  215.             delay
  216.         });
  217.  
  218.         toastCode.innerHTML = `bs5Utils.Toast.show({
  219.     type: '${type}',
  220.     icon: '${icon}',
  221.     title: 'Notification!',
  222.     subtitle: '23 secs ago',
  223.     content: 'Hello World!',
  224.     buttons: ${JSON.stringify(buttons)},
  225.     delay: ${delay}
  226. });`;
  227.         Prism.highlightElement(toastCode);
  228.     });
  229.  
  230.     document.querySelector('#show-modal-btn').addEventListener('click', function () {
  231.         const type = randFromArray(types),
  232.             buttons = getRandomInt(0, 1) === 1 ? [
  233.                 {
  234.                     text: 'Click Me!',
  235.                     class: 'btn btn-sm btn-primary',
  236.                     handler: () => {
  237.                         alert(`${type} has been clicked!`);
  238.                     }
  239.                 },
  240.                 {
  241.                     text: 'Click Me Too!',
  242.                     class: 'btn btn-sm btn-warning',
  243.                     handler: () => {
  244.                         alert(`You clicked me too!`);
  245.                     }
  246.                 },
  247.                 {
  248.                     type: 'dismiss',
  249.                     text: 'Hide',
  250.                     class: 'btn btn-sm btn-secondary'
  251.                 }
  252.             ] : [],
  253.             centered = randFromArray([false, true]),
  254.             keyboard = randFromArray([false, true]),
  255.             focus = randFromArray([false, true]);
  256.  
  257.         bs5Utils.Modal.show({
  258.             type: type,
  259.             title: `Hello World!`,
  260.             content: `<p class="text-center fw-bold">Hello World!</p>`,
  261.             buttons,
  262.             centered,
  263.             backdrop: 'static',
  264.             keyboard,
  265.             focus,
  266.         });
  267.  
  268.         modalCode.innerHTML = `bs5Utils.Modal.show({
  269.     type: '${type}',
  270.     title: 'Hello World!',
  271.     content: '<p class="text-center fw-bold">Hello World!</p>',
  272.     buttons: ${JSON.stringify(buttons)},
  273.     centered: ${centered},
  274.     dismissible: true,
  275.     backdrop: 'static',
  276.     keyboard: ${keyboard},
  277.     focus: ${focus},
  278. });`;
  279.  
  280.         Prism.highlightElement(modalCode);
  281.     });
  282. </script>
  283. </body>
  284. </html>
  285.