makki-toast 1.0.0

package/README.md

@@ -0,0 +1,5 @@
+# Makki Toast 
+
+Fancy makki toast
+
+Create by Daniel Jimenez

package/index.js

@@ -0,0 +1,287 @@
+"use strict";
+
+import './style.css'
+
+const DEFAULT_VALUES = {
+  autoClose: 5000,
+  darkMode: false,
+  status: 'success',
+  backgroundColor: null,
+  canClose: true,
+  icon: null,
+  message: 'Example message',
+  position: 'top-right',
+  showProgress: true,
+}
+
+export class Toast {
+  show(options) {
+    new ToastAlert(options);
+  }
+}
+
+class ToastAlert {
+  #toastElement
+  #removeBinded
+  #statusValue
+  #darkModeValue
+  #noHaveError
+  #iconElement
+  #visibleTimeSince
+  #autoClose
+  #progressInterval
+  #autoCloseInterval
+
+  constructor(options) { 
+    this.#toastElement = document.createElement('div')
+    this.#noHaveError = true
+    this.#visibleTimeSince = new Date()
+    this.#toastElement.classList.add('makki-toast')
+    requestAnimationFrame(() => { this.#toastElement.classList.add('makki-show') })
+    this.#removeBinded = () => this.#remove()
+    Object.entries({ ...DEFAULT_VALUES, ...options }).forEach(([key, value]) => {
+      this[key] = value
+    })
+  }
+
+  set autoClose(value) {
+    this.#autoClose = value
+    if (value === false) return
+    if (this.#autoCloseInterval != null) clearTimeout(this.#autoCloseInterval)
+    this.#autoCloseInterval = setTimeout(() => { this.#remove() }, value)
+  }
+
+  set darkMode(value) {
+    this.#darkModeValue = value
+    if (value)
+      this.#toastElement.classList.add('makki-dark-toast')
+    else 
+      this.#toastElement.classList.add('makki-light-toast')
+  }
+
+  set status(value) {
+    try {
+      this.#statusValue = value
+      validateStatus(value)
+      if (value === 'success')
+        this.#toastElement.classList.add('makki-success')
+      else if (value === 'warning')
+        this.#toastElement.classList.add('makki-warning')
+      else if (value === 'danger')
+        this.#toastElement.classList.add('makki-danger')
+      else if (value === 'none')
+        this.#toastElement.classList.add('makki-none')
+    } catch (error) {
+      console.error(error)
+      this.#noHaveError = false
+    }
+  }
+
+  set backgroundColor(value) {
+    let hexColor
+    try {
+      if(value == null || value == '' || this.#statusValue != 'none')
+        return
+      validateBackgroundColor(value)
+      let root = document.querySelector(':root')
+      root.style.setProperty('--makki-toast-bg-color-hover', value)
+
+      if (this.#darkModeValue)
+        hexColor = calcHexColor(value, true)
+      else
+        hexColor = calcHexColor(value, false)
+      
+      root.style.setProperty('--makki-toast-bg-color', hexColor)
+      let textColor = getTextColor(hexColor)
+      this.#toastElement.style.color = textColor
+
+      const textColorHover = getTextColor(value)
+      console.log(textColorHover)
+      this.#toastElement.style.setProperty('--makki-toast-bg-color-text', textColorHover)
+
+    } catch (error) {
+      console.error(error)
+      this.#noHaveError = false
+    }
+  }
+
+  set canClose(value) {
+    this.#toastElement.classList.toggle('makki-can-close', value)
+    if (value)
+      this.#toastElement.addEventListener('click', this.#removeBinded)
+    else 
+      this.#toastElement.removeEventListener('click', this.#removeBinded)
+  }
+  
+  set icon(value) {
+    let iconToast = document.createElement('i')
+    iconToast.classList.add('makki-toast-icon')
+    if (this.#statusValue === 'success') {
+      iconToast.classList.add('bx')
+      iconToast.classList.add('bx-check')
+      this.#iconElement = iconToast
+    }
+    else if (this.#statusValue === 'warning') {
+      iconToast.classList.add('bx')
+      iconToast.classList.add('bx-error')
+      this.#iconElement = iconToast
+    }
+    else if (this.#statusValue === 'danger') {
+      iconToast.classList.add('bx')
+      iconToast.classList.add('bx-error-alt')
+      this.#iconElement = iconToast
+    }
+    else if (this.#statusValue === 'none') {
+      if(value) {
+        let arrayClases = value.split(' ')
+        for(let i = 0; i < arrayClases.length; i++){
+          iconToast.classList.add(arrayClases[i])
+        }
+        this.#iconElement = iconToast
+      }
+    }
+  }
+
+  set message(value) {
+    this.#toastElement.textContent = value
+  }
+
+  set position(value) {
+    validatePosition(value)
+    const selector = `.makki-toast-container[data-position='${value}']`
+    const toastContainer = document.querySelector(selector) || createContainer(value)
+    if (this.#noHaveError) {
+      if (this.#iconElement)
+        this.#toastElement.prepend(this.#iconElement)
+      toastContainer.append(this.#toastElement)
+    }
+  }
+
+  set showProgress(value) {
+    let bgColor
+    this.#toastElement.classList.toggle('makki-progress', value)
+    this.#toastElement.style.setProperty('--makki-progress', 1)
+    
+    if (this.#statusValue === 'none')
+      bgColor = getComputedStyle(this.#toastElement).getPropertyValue('--makki-toast-bg-color-hover');
+    else if (this.#statusValue === 'success')
+      bgColor = '#38A95C'
+    else if (this.#statusValue === 'warning')
+      bgColor = '#ECC94B'
+    else if (this.#statusValue === 'danger')
+      bgColor = '#D74B4B'
+
+    this.#toastElement.style.setProperty('--makki-progress-bg', bgColor)
+    if (value) {
+      this.#progressInterval = setInterval(() => {
+        const timeVisible = new Date() - this.#visibleTimeSince
+        this.#toastElement.style.setProperty('--makki-progress', 1 - timeVisible / this.#autoClose)
+      }, 10)
+    }
+  }
+
+  #remove() {
+    clearTimeout(this.#autoCloseInterval)
+    clearInterval(this.#progressInterval)
+    const toastContainer = this.#toastElement.parentElement
+    this.#toastElement.classList.add('makki-close')
+    this.#toastElement.addEventListener('transitionend', () => {
+      this.#toastElement.remove()
+      if (toastContainer.hasChildNodes()) return
+        toastContainer.remove()
+    })
+  }
+}
+
+function createContainer(position) {
+  validatePosition(position)
+  const container = document.createElement('div')
+  container.classList.add('makki-toast-container')
+  container.dataset.position = position
+  document.body.append(container)
+  return container
+}
+
+function getHex(or, og, ob) {
+  let r = or.toString(16)
+  let g = og.toString(16)
+  let b = ob.toString(16)
+
+  if (r.length == 1)
+    r = "0" + r
+  if (g.length == 1)
+    g = "0" + g
+  if (b.length == 1)
+    b = "0" + b
+
+  return "#" + r + g + b
+}
+
+function getRBGColor(color) {
+  var color_hex = color.substring(1, 7)
+  var r = parseInt(color_hex.substring(0, 2), 16)
+  var g = parseInt(color_hex.substring(2, 4), 16)
+  var b = parseInt(color_hex.substring(4, 6), 16)
+  return { r, g, b }
+}
+
+function getTextColor(bgColor) {
+  let color = getRBGColor(bgColor)
+  let uiColors = [ color.r / 255, color.g / 255, color.b / 255 ]
+  let c = uiColors.map((col) => {
+    if (col <= 0.03928) {
+      return col / 12.92
+    }
+    return Math.pow((col + 0.055) / 1.055, 2.4)
+  })
+  let l = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2])
+  return (l > 0.279) ? '#050505' : '#EDF2F7'
+}
+
+function calcTintColor(or,og,ob) {
+  const r = or + Math.round((255 - or) * 0.25)
+  const g = og + Math.round((255 - og) * 0.25)
+  const b = ob + Math.round((255 - ob) * 0.25)
+  return { r, g, b }
+}
+
+function calcShadeColor(or,og,ob) {
+  const r = Math.round(or * 0.8)
+  const g = Math.round(og * 0.8)
+  const b = Math.round(ob * 0.8)
+  return { r, g, b }
+}
+
+function calcHexColor(bgColor, darkMode) {
+  let color = getRBGColor(bgColor)
+  
+  if (darkMode)
+    Object.assign(color, calcShadeColor(color.r, color.g, color.b));
+  else 
+    Object.assign(color, calcTintColor(color.r, color.g, color.b));
+  
+  return getHex(color.r, color.g, color.b)
+}
+
+function validateBackgroundColor(value) {
+  if (value.length > 7 || value.charAt(0) != '#')
+    throw new Error('toast background color hex format is wrong')
+  if (!/^#[0-9A-F]{6}$/i.test(value))
+    throw new Error('toast background color hex code is wrong')
+  return
+}
+
+function validatePosition(position) {
+  const positions = ['top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center']
+  if (!positions.includes(position))
+    throw new Error('toast position is wrong')
+  return
+}
+
+function validateStatus(status) {
+  const styles = ['success', 'warning', 'danger', 'none']
+  if (!styles.includes(status.toLowerCase()))
+    throw new Error('toast status is wrong')
+  return
+}
+

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "makki-toast",
+  "version": "1.0.0",
+  "description": "Fancy makki toast",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "Toast"
+  ],
+  "author": "Daniel Jimenez",
+  "license": "ISC"
+}

package/style.css

@@ -0,0 +1,168 @@
+@import url(https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css);
+
+:root {
+  --makki-toast-bg-color: #FFFFFF;
+  --makki-toast-bg-color-hover: #FFFFFF;
+}
+
+.makki-toast-container {
+  position: fixed;
+  margin: 10px;
+  width: 250px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.makki-toast-container[data-position^="top-"] {
+  top: 0;
+}
+
+.makki-toast-container[data-position^="bottom-"] {
+  bottom: 0;
+}
+
+.makki-toast-container[data-position$="-right"] {
+  right: 0;
+}
+
+.makki-toast-container[data-position$="-left"] {
+  left: 0;
+}
+
+.makki-toast-container[data-position$="-center"] {
+  left: 50%;
+  transform: translate(-50%);
+}
+
+.makki-toast {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0.75rem 1.5rem 1rem 0.75rem;
+  background-color: white;
+  border-radius: .25em;
+  position: relative;
+  cursor: pointer;
+  opacity: 0;
+  font-size: 14px;
+  font-weight: 500;
+  transition: 200ms ease-in-out;
+  overflow: hidden;
+}
+
+.makki-toast-container[data-position$="-right"] .makki-toast {
+  transform: translateX(50px);
+}
+
+.makki-toast-container[data-position$="-left"] .makki-toast {
+  transform: translateX(-50px);
+}
+
+.makki-toast-container[data-position="top-center"] .makki-toast {
+  transform: translateY(-50px);
+}
+
+.makki-toast-container[data-position="bottom-center"] .makki-toast {
+  transform: translateY(50px);
+}
+
+.makki-toast-container .makki-toast.makki-show {
+  opacity: 0.9;
+  transform: translate(0, 0);
+}
+
+.makki-toast-container .makki-toast.makki-show.makki-close {
+  opacity: 0;
+  transform: translate(0, 0) scale(0.75);
+  transition: 250ms ease-in-out;
+}
+
+.makki-toast.makki-progress::before {
+  content: '';
+  position: absolute;
+  height: 5px;
+  width: calc(100% * var(--makki-progress));
+  background-color: var(--makki-progress-bg);
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.makki-toast.makki-can-close::after {
+  content: "\00D7";
+  position: absolute;
+  top: 4px;
+  right: 8px;
+}
+
+.makki-toast-icon {
+  margin-right: 0.5rem;
+  font-size: 20px;
+}
+
+.makki-success.makki-light-toast {
+  background-color: #328E4F;
+  color: #EDF2F7;
+}
+
+.makki-success.makki-dark-toast {
+  background-color: #68CA87;
+  color: #2D3748;;
+}
+
+.makki-success.makki-light-toast:hover,
+.makki-success.makki-dark-toast:hover {
+  background-color: #38A95C;
+  opacity: 1;
+}
+
+.makki-warning.makki-light-toast {
+  background-color: #d8b73d;
+  color: #2D3748;
+}
+
+.makki-warning.makki-dark-toast {
+  background-color: #fde692;
+  color: #2D3748;
+}
+
+.makki-warning.makki-dark-toast:hover,
+.makki-warning.makki-light-toast:hover {
+  background-color: #ECC94B;
+  opacity: 1;
+  color: #2D3748;
+}
+
+.makki-danger.makki-light-toast {
+  background-color: #9C3030;
+  color: #EDF2F7;
+}
+
+.makki-danger.makki-dark-toast {
+  background-color: #e76f6f;
+  color: #EDF2F7;
+}
+
+.makki-danger.makki-light-toast:hover,
+.makki-danger.makki-dark-toast:hover {
+  background-color: #D74B4B;
+  opacity: 1;
+}
+
+.makki-light-toast.makki-none,
+.makki-dark-toast.makki-none {
+  background-color: var(--makki-toast-bg-color);
+  opacity: 0.9;
+}
+
+.makki-light-toast.makki-none:hover,
+.makki-dark-toast.makki-none:hover {
+  background-color: var(--makki-toast-bg-color-hover);
+  color: var(--makki-toast-bg-color-text) !important;
+  opacity: 1;
+}
+
+.makki-background {
+  background-color: #1b1b1b;
+}