update and add components for tester

ka215 · Jun 15, 2024 · db752a5 · db752a5
1 parent 1c75dc9
commit db752a5
Show file tree

Hide file tree

Showing 8 changed files with 591 additions and 100 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -12,8 +12,8 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Icons">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.2/css/all.css">
     <link rel="stylesheet" type="text/css" href="./assets/css/ress.css">
-    <link rel="stylesheet" type="text/css" href="./assets/css/sunorhc.timeline.css">
-    <link rel="stylesheet" type="text/css" href="./assets/css/custom-style.css">
+    <link rel="stylesheet" type="text/css" href="./assets/css/sunorhc.timeline.css?36b234d20e33bd16f588b1d07cad5ad8">
+    <link rel="stylesheet" type="text/css" href="./assets/css/custom-style.css?36b234d20e33bd16f588b1d07cad5ad8">
 </head>
 <body class="flex flex-col justify-between">
     <header role="banner" class="p-4 w-full bg-white text-center dark:bg-gray-950">
@@ -78,9 +78,12 @@ <h1 class="flex justify-center items-center mb-4 text-3xl font-extrabold trackin
         <div id="sunorhc-timeline-tester"></div>
 
     </main>
-    <footer role="contentinfo" class="p-4 w-full bg-white select-none _md:px-6 _md:py-8 dark:bg-gray-950">
-        <hr class="my-6 border-gray-400 sm:mx-auto dark:border-gray-600 lg:my-8" />
-        <span class="block text-sm text-gray-500 sm:text-center dark:text-gray-300 clear-font">2024 &copy; MAGIC METHODS</span>
+    <footer role="contentinfo" class="p-4 pb-8 w-full bg-white select-none dark:bg-gray-950">
+      <hr class="my-6 h-px border-t-0 bg-transparent bg-gradient-to-r from-transparent via-neutral-500 to-transparent opacity-25 dark:via-neutral-400" />
+      <span class="block text-sm text-gray-500 sm:text-center dark:text-gray-300 clear-font">
+        <a href="https://github.com/ka215/sunorhc.timeline" class="hover:underline hover:text-blue-600">Follow me on GitHub</a>, 
+        2024 &copy; MAGIC METHODS
+      </span>
     </footer>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
     <script>new Darkmode({ bottom: '20px', right: '20px', left: 'unset', time: '0.3s', mixColor: '#fff', backgroundColor: '#fff', buttonColorDark: '#3f3f46', buttonColorLight: '#f4f4f5', saveInCookies: false, label: '🌓', autoMatchOsTheme: true }).showWidget()</script>

diff --git a/index.html b/index.html
@@ -7,9 +7,8 @@
     <!-- meta name="color-scheme" content="light dark" -->
     <title>Sunorhc.Timeline</title>
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
-    <link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.4/dist/flowbite.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" />
     <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
-    <script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>
     <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
     <link href="https://use.fontawesome.com/releases/v6.5.2/css/all.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="/ress.css">
@@ -74,10 +73,41 @@ <h1 class="flex justify-center items-center mb-4 text-3xl font-extrabold trackin
       ></div>
       <div id="tester"></div>
     </main>
-    <footer role="contentinfo" class="p-4 w-full bg-white select-none _md:px-6 _md:py-8 dark:bg-gray-950">
-      <hr class="my-6 border-gray-400 sm:mx-auto dark:border-gray-600 lg:my-8" />
-      <span class="block text-sm text-gray-500 sm:text-center dark:text-gray-300 clear-font">2024 &copy; MAGIC METHODS</span>
+    <footer role="contentinfo" class="p-4 pb-8 w-full bg-white select-none dark:bg-gray-950">
+      <hr class="my-6 h-px border-t-0 bg-transparent bg-gradient-to-r from-transparent via-neutral-500 to-transparent opacity-25 dark:via-neutral-400" />
+      <span class="block text-sm text-gray-500 sm:text-center dark:text-gray-300 clear-font">
+        <a href="https://github.com/ka215/sunorhc.timeline" class="hover:underline hover:text-blue-600">Follow me on GitHub</a>, 
+        2024 &copy; MAGIC METHODS
+      </span>
     </footer>
+    <div id="tester-modal" data-modal-backdrop="static" tabindex="-1" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full opacity-0 transition-all">
+      <div class="relative w-full max-w-4xl max-h-full">
+        <div class="relative flex-col bg-white rounded-lg shadow dark:bg-gray-700">
+          <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
+            <h3 id="tester-modal-headline" class="text-xl font-medium text-gray-900 dark:text-white">
+              Current Timeline Options
+            </h3>
+            <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="tester-modal">
+              <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+              </svg>
+              <span class="sr-only">Close modal</span>
+            </button>
+          </div>
+          <div id="tester-modal-body" class="relative h-[calc(100vh-190px)] overflow-y-auto overflow-x-hidden p-4 md:p-5 space-y-4">
+            content
+          </div>
+          <div class="flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse border-t border-gray-200 rounded-b dark:border-gray-600">
+            <button id="download-json" type="button" 
+              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            >Download as JSON</button>
+            <button data-modal-hide="tester-modal" type="button" 
+              class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+            >Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
     <script>new Darkmode({
       bottom: '20px', // default: '32px'
@@ -92,6 +122,7 @@ <h1 class="flex justify-center items-center mb-4 text-3xl font-extrabold trackin
       label: '🌓', // default: ''
       autoMatchOsTheme: true // default: true
     }).showWidget()</script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
     <script type="module" src="/src/dispatcher.ts"></script>
     <script type="module" src="/src/tester.ts"></script>
   </body>

diff --git a/public/custom-style.css b/public/custom-style.css
@@ -99,7 +99,6 @@ body.darkmode--activated .dark\:bg-gray-700 {
     background-color: #374151;
 }
 
-
 body.darkmode--activated option {
     background-color: rgb(17 24 39 / 1);
     color: #fff;
@@ -111,6 +110,13 @@ body.darkmode--activated optgroup {
     font-weight: 400;
 }
 
+body:not(.darkmode--activated) .custom-duration {
+    transition-duration: 280ms;
+}
+
+body.darkmode--activated .custom-duration {
+    transition-duration: 75ms;
+}
 
 body.darkmode--activated .dark\:placeholder-gray-400::placeholder {
     color: #9CA3AF;

diff --git a/src/SunorhcTimeline.ts b/src/SunorhcTimeline.ts
@@ -8,7 +8,7 @@ import {
   fetchData, deserialize, parseDateTime, convertToPixels, isElement, getRect, getParticles, getStartDatetime, getEndDatetime, 
   createLandmarkElement, createSidebar, createSidebarItems, createRuler, createRulerItems, optimizeEventNode, placeEventNodes, 
   showPresentTimeMarker, getDuplicateValues, validatorEventNode, validateTimelineOptions, saveToStorage, loadFromStorage, 
-  watcher, dragScroll, doAlignment, wheelScroll, dblclickZoom, onHoverTooltip
+  watcher, dragScroll, doAlignment, wheelScroll, dblclickZoom, onHoverTooltip, clickOpener
 } from './utils'
 import { LoggerService } from './utils/logger'
 
@@ -65,7 +65,7 @@ const defaultOptions: TimelineOptions = {
     presentTime: false,
     defaultAlignment: 'latest',
     cacheExpiration: 'always',
-    hoverEvent: true,
+    hoverEvent: false,
     onClickEvent: 'normal',
   },
   theme: {
@@ -718,8 +718,13 @@ export class Timeline implements TimelineBaseClass {
 
     //Util.onStickyRulerItems(this.targetElement)
 
-    onHoverTooltip(this.targetElement, this.eventNodes as EventNode[])
+    if (this.options.effects.hoverEvent) {
+      onHoverTooltip(this.targetElement, this.eventNodes as EventNode[])
+    }
 
+    if (this.options.effects.onClickEvent !== 'none') {
+      clickOpener(this.targetElement, this.options, this.eventNodes as EventNode[])
+    }
   }
 
   // public methods

diff --git a/src/dispatcher.ts b/src/dispatcher.ts
@@ -176,7 +176,7 @@ switch(creationType) {
         },
         footer: {
           display: true,
-          label: '<a href="https://github.com/ka215/sunorhc.timeline">Follow me on GitHub</a>, powered by Sunorhc.Timeline v0.9.0',
+          label: 'powered by Sunorhc.Timeline v0.9.0',
           textColor: 'gray',
           textStyles: 'margin-top: 20px;',
           textClass: '',

diff --git a/src/styles/main.sass b/src/styles/main.sass
@@ -196,7 +196,7 @@
     background-color: var(--bg-color)
     border-style: none
     outline-style: none
-    z-index: 99
+    z-index: 40
 
     &[data-flex-direction="column"]
       flex-direction: column
@@ -250,7 +250,7 @@
     border-style: none
     outline-style: none
     user-select: none
-    z-index: 80
+    z-index: 40
 
     &[data-timeline-layout="rounded"],
     &[data-timeline-linestyle="rounded"]
@@ -675,6 +675,7 @@
           background-color: var(--event-node-bg-color)
           border: solid var(--event-node-border-width, 1px) var(--event-node-border-color)
           border-radius: var(--event-node-border-radius, 50%)
+          cursor: var(--event-node-cursor, default)
           z-index: var(--event-node-z-index, 25)
           opacity: 1
           transition: all 0.3s ease-out