Merge branch 'main' of https://github.com/Igorcbraz/Calculadora

Igorcbraz · Sep 5, 2024 · 98691fc · 98691fc
2 parents 384efd8 + bf9bb36
commit 98691fc
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -13,22 +13,24 @@
     <title>Calculator</title>
     <link rel="shortcut icon" href="images/favicon-32x32.png" type="image/x-icon">
     <link rel="canonical" href="https://github.com/Igorcbraz/Calculadora">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">    
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js@8.0.0-beta.1/minified/introjs.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="./src/css/index.css">
   </head>
   <body>
     <div class="calc container-fluid">
       <div class="row calc-content justify-content-center w-100 mx-auto">
         <div class="col-12 col-md-8 col-lg-6 col-xl-4 ">
           <div class="container calc-top">
-            <div class="row justify-content-end">
+            <div class="row justify-content-end" id="key-selector-container">
               <span class="col-1 key-selector" data-key="1">1</span>
               <span class="col-1 key-selector" data-key="2">2</span>
               <span class="col-1 key-selector" data-key="3">3</span>
             </div>
 
             <div class="calc-top row">
-              <h3 class="col-6">calc</h3>
+              <h3 class="col-6" id="calc-title">calc</h3>
               <h4 class="col-3" id="reset-theme">theme</h4>
 
               <div class="col-3 toggle">
@@ -78,6 +80,7 @@ <h4 class="col-3" id="reset-theme">theme</h4>
       </div>
     </div>
 
+    <script src="https://cdn.jsdelivr.net/npm/intro.js@8.0.0-beta.1/minified/intro.min.js"></script>
     <script type="module" src="./src/js/main.js"></script>
     <script type="module" src="./src/constants/index.js"></script>
   </body>

diff --git a/src/constants/themes.js b/src/constants/themes.js
@@ -31,6 +31,9 @@ export const themes = {
       { name: '--key-blue-shadow', value: '#1c6166' },
       { name: '--key-red-background', value: '#d03f2f' },
       { name: '--key-red-shadow', value: '#93261a' },
+      { name: '--guide-text', value: '#3d3d33' },
+      { name: '--guide-button', value: '#182034' },
+      { name: '--guide-button-disabled', value: '#b4a597' },
     ]
   },
   'Dark': {
@@ -47,6 +50,9 @@ export const themes = {
       { name: '--key-blue-shadow', value: '#851c9c' },
       { name: '--key-red-background', value: '#00decf' },
       { name: '--key-red-shadow', value: '#00decf' },
+      { name: '--guide-text', value: '#d3cdcd' },
+      { name: '--guide-button', value: '#f7de43' },
+      { name: '--guide-button-disabled', value: '#b4a597' },
     ]
   }
 }
diff --git a/src/css/index.css b/src/css/index.css
@@ -25,7 +25,7 @@
   --key-red-background  : #d03f2f;
   --key-red-shadow      : #93261a;
 
-  --transition: 1s;
+  --transition: 0.5s;
 }
 
 /* Background settings */
@@ -225,3 +225,52 @@ input[type=range]::-ms-thumb {
 .toggle input{
     width: 100%;
 }
+
+
+/* Estilo personalizado para o tooltip */
+.custom-tooltip {
+  background-color: var(--background);
+  color: var(--guide-text);
+  border-radius: 10px;
+  padding: 15px;
+  font-size: 16px;
+}
+
+/* Estilo personalizado para o destaque */
+.custom-highlight {
+  border: 2px solid var(--key-red-background);
+}
+
+.introjs-button {
+  background-color: var(--key-background);
+  color: var(--guide-button);
+  border: 1px solid var(--key-background);
+  border-radius: 5px;
+  box-shadow: 1px 1.5px 1px var(--key-shadow);
+  transition: var(--transition);
+  text-shadow: none;
+}
+
+.introjs-button:focus {
+  box-shadow: 1px 1.5px 1px var(--key-shadow);
+  border: 1px solid var(--guide-button);
+  background-color: var(--key-background);
+  color: var(--guide-button);
+}
+
+.introjs-button:hover {
+  background-color: var(--key-background);
+  color: var(--guide-button);
+  border: 1px solid var(--key-background);
+}
+
+.introjs-disabled, .introjs-disabled:hover {
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--guide-button-disabled);
+}
+
+.introjs-dontShowAgain label {
+  background-color: transparent;
+  color: var(--guide-text)
+}
diff --git a/src/js/guide.js b/src/js/guide.js
@@ -0,0 +1,57 @@
+export class Guide {
+  #intro
+  #config
+
+  constructor() {
+    this.#intro = introJs.tour()
+    this.#config = {
+      steps: [],
+      dontShowAgain: true,
+      dontShowAgainLabel: 'Não mostrar novamente',
+      nextLabel: 'Próximo',
+      prevLabel: 'Anterior',
+      doneLabel: 'Finalizar',
+    }
+  }
+
+  loadSteps() {
+    this.#config.steps = [
+      {
+        title: 'Bem-vindo(a)!',
+        intro: 'Este é um guia rápido para ajudar a configurar o aplicativo.',
+        tooltipClass: 'custom-tooltip',
+        highlightClass: 'custom-highlight'
+      },
+      {
+        element: document.querySelector('#key-selector-container'),
+        title: 'Temas favoritos',
+        intro: 'É possível associar um tema a uma tecla do teclado. Clique em um dos temas abaixo e pressione uma tecla para associar.',
+        position: 'right',
+        tooltipClass: 'custom-tooltip',
+        highlightClass: 'custom-highlight'
+      },
+      {
+        element: document.querySelector('#reset-theme'),
+        title: 'Voltar ao padrão',
+        intro: 'Caso deseje voltar para configuração padrão, clique aqui.',
+        tooltipClass: 'custom-tooltip',
+        highlightClass: 'custom-highlight'
+      },
+      {
+        element: document.querySelector('#btnTheme'),
+        title: 'Escolher tema',
+        intro: 'Altere o tema do aplicativo com um clique.',
+        tooltipClass: 'custom-tooltip',
+        highlightClass: 'custom-highlight'
+      }
+    ]
+  }
+
+  loadConfig () {
+    this.#intro.setOptions(this.#config)
+  }
+
+  start () {
+    this.#intro.start()
+  }
+}
diff --git a/src/js/main.js b/src/js/main.js
@@ -1,19 +1,25 @@
 import { Calculator } from './calculator.js'
 import { ThemeManager } from './themeManager.js'
+import { Guide } from './guide.js'
 
 import { themes } from '../constants/index.js'
 
-const display = document.getElementById('display')
-const calculator = new Calculator(display)
-
-const btnTheme = document.getElementById('btnTheme')
-const keySelectors = document.querySelectorAll('.key-selector')
-const themeManager = new ThemeManager(themes, btnTheme, keySelectors) 
-
 document.addEventListener('DOMContentLoaded', () => {
+  const display = document.getElementById('display')
+  const calculator = new Calculator(display)
+
+  const btnTheme = document.getElementById('btnTheme')
+  const keySelectors = document.querySelectorAll('.key-selector')
+  const themeManager = new ThemeManager(themes, btnTheme, keySelectors) 
+
   themeManager.setPreferColorSchemeTheme()
   themeManager.applyStoredKeys()
 
+  const guide = new Guide()
+  guide.loadSteps()
+  guide.loadConfig()
+  guide.start()
+
   document.querySelectorAll('.add-input').forEach(button => {
     button.addEventListener('click', () => {
       const value = button.dataset.operation || button.value