Skip to content

Commit

Permalink
Merge pull request #26 from itsmartashub/feat/custom-fonts
Browse files Browse the repository at this point in the history 
Closes #22
  • Loading branch information
@itsmartashub
itsmartashub authored Jun 5, 2024
2 parents 413512b + 99dc5ea commit cf31d90
Show file tree
Hide file tree
Showing 18 changed files with 968 additions and 167 deletions.
0 src/js/app/icons.js → src/js/app/components/icons.js
View file
File renamed without changes.
101 changes: 101 additions & 0 deletions src/js/app/components/renderFonts.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
export function renderFontSmallCard({
name,
className,
inputId,
inputType,
inputValue,
inputPlaceholder,
min = 16,
max = 24,
unit = 'px',
}) {
return `
<div class="${className} card card--small" data-gpth-err="${min}${unit} &hArr; ${max}${unit}">
<label for="${inputId}" class="rounded-full flex items-center gap-2 h-full w-full">
<input type="${inputType}" id="${inputId}" value="${inputValue}" placeholder="${inputPlaceholder}" class="rounded-full outline-none border-none font-bold" minlength="${min}" maxlength="${max}">
<div class="card__unitname-wrapper">
<p class="card__unit rounded-full flex items-center justify-center">pixels</p>
<p class="card__name uppercase font-semibold">${name}</p>
</div>
</label>
</div>`
}

export function renderFontBigCard({
name,
className,
inputId,
inputType,
inputValue,
inputPlaceholder,
min = 0,
max = 20,
unit = 'px',
}) {
return `
<div class="${className} fonts__group card card--big h-full" data-gpth-err="${min}${unit} &hArr; ${max}${unit}">
<label for="${inputId}" class="grid gap-1 h-full w-full">
<div>
<p class="card__unit card__icon">PX</p>
<p class="card__name uppercase font-semibold">${name}</p>
</div>
<input type="${inputType}" id="${inputId}" value="${inputValue}" placeholder="${inputPlaceholder}" class="outline-none border-none focus:outline-none focus:border-none font-bold" minlength="${min}" maxlength="${max}">
</label>
</div>`
}

// export function renderFontCard({ data, cardType = 'small', includeFields = [] }) {
// const { name, className, inputId, inputType, inputValue, inputPlaceholder, min = 0, max = 24, unit = 'px' } = data

// let cardHtml

// if (cardType === 'small') {
// cardHtml = `
// <div class="${className} card card--small" data-gpth-err="${min}${unit} &hArr; ${max}${unit}">
// <label for="${inputId}" class="rounded-full flex items-center gap-2 h-full w-full">
// ${
// includeFields.includes('input')
// ? `<input type="${inputType}" id="${inputId}" value="${inputValue}" placeholder="${inputPlaceholder}" class="rounded-full outline-none border-none font-bold" minlength="${min}" maxlength="${max}">`
// : ''
// }

// <div class="card__unitname-wrapper">
// <p class="card__unit rounded-full flex items-center justify-center">${unit}</p>
// <p class="card__name uppercase font-semibold">${name}</p>
// </div>
// </label>
// </div>
// `
// } else if (cardType === 'big') {
// cardHtml = `
// <div class="${className} fonts__group card card--big h-full" data-gpth-err="${min}${unit} &hArr; ${max}${unit}">
// <label for="${inputId}" class="grid gap-1 h-full w-full">
// <div>
// <p class="card__unit card__icon">${unit.toUpperCase()}</p>
// <p class="card__name uppercase font-semibold">${name}</p>
// </div>

// ${
// includeFields.includes('input')
// ? `<input type="${inputType}" id="${inputId}" value="${inputValue}" placeholder="${inputPlaceholder}" class="outline-none border-none focus:outline-none focus:border-none font-bold" minlength="${min}" maxlength="${max}">`
// : ''
// }
// </label>
// </div>
// `
// } else {
// throw new Error('Invalid card type specified.')
// }

// return cardHtml
// }

export function renderButton({ name, className, id, content, disabled = false }) {
return `
<button id="${id}" class="btn block relative text-center ${className}" ${disabled ? 'disabled' : ''}>
${content}
</button>
`
}
108 changes: 79 additions & 29 deletions src/js/app/floatingBtn.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
// Use a cross-browser storage API:
import browser from 'webextension-polyfill'

// import { icon_sun, icon_moon, icon_moon_full, icon_settings, icon_paint, icon_palette } from './icons.js'
import { icon_sun, icon_moon, icon_moon_full, icon_settings, icon_paint } from './icons.js'
// import gpthToggleImg from '../../img/gpth-toggle-circled.webp'
import { icon_sun, icon_moon, icon_moon_full, icon_settings, icon_paint } from './components/icons.js'
import { hexToHSL } from '../utils/hexToHSL'

// import { fontHtmlCode, addFontsEventHandlers } from './customFonts'
import { fontHtmlCode, handleFontsListeners } from './mainFonts'
// console.log(fontHtmlCode)

// let isOptionsShown = false

// Global Variables
Expand All @@ -24,9 +26,42 @@ let defaultColorLight = '#6b4dfe'
let defaultColorDark = '#ca93fb'
// let isDisabledResetAll = true

const renderColorsTab = `
<section>
<div class="colorpicker-container">
<div class="colorpicker">
<input type="color" id="accentLight" value="#6b4dfe" />
<label for="accentLight">Accent <span>Light</span></label>
</div>
<div class="colorpicker">
<input type="color" id="accentDark" value="#ca93fb" />
<label for="accentDark">Accent <span>Dark</span></label>
</div>
</div>
<footer class="grid mt-10">
<button id="resetAllSettings" class="btn block relative btn-primary text-center" as="button">Reset Accents</button>
</footer>
</section>
`

// Initialization
init()

function tabsSwitching() {
const tabs = document.querySelectorAll('.gpth-settings .tab-button')
const panes = document.querySelectorAll('.gpth-settings .tab-pane')

tabs.forEach((tab, index) => {
tab.addEventListener('click', () => {
document.querySelector('.tab-button.active').classList.remove('active')
document.querySelector('.tab-pane:not(.hidden)').classList.add('hidden')

tab.classList.add('active')
panes[index].classList.remove('hidden')
})
})
}

async function initTheme() {
try {
const { gptheme: storedTheme } = await browser.storage.sync.get('gptheme')
Expand Down Expand Up @@ -133,50 +168,65 @@ function decreiseFloatingBtnSize() {
/* ______________ THEME CUSTOMIZATION - ACCENT THEME ______________ */
function renderSettings() {
const gpthSettings = document.createElement('div')
gpthSettings.className = `gpth-settings fixed grid items-center gap-4`
gpthSettings.className = `gpth-settings fixed flex flex-col`

let htmlCode = `
<header class="mb-5">
<h2 class="mt-5 text-center font-medium gpth-settings__title"><span class="font-semibold">GPThemes</span> Customization</h2>
<h3 class="mt-6 text-center font-medium text-xl">Theme Customization</h3>
<button class="text-token-text-tertiary hover:text-token-text-secondary absolute top-4 right-4" id="gpth-settings-close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.34315 6.34338L17.6569 17.6571M17.6569 6.34338L6.34315 17.6571" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</button>
<button class="text-token-text-tertiary hover:text-token-text-primary absolute top-4 right-4" id="gpth-settings-close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.34315 6.34338L17.6569 17.6571M17.6569 6.34338L6.34315 17.6571" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</button>
</header>
<main class="mb-10">
<section class="colorpicker-container">
<div class="colorpicker">
<input type="color" id="accentLight" value="#6b4dfe" />
<label for="accentLight">Accent <span>Light</span></label>
<main >
<div class="tabs">
<div class="tab-buttons flex items-center rounded-full p-1 font-semibold mb-10">
<button class="tab-button py-2 px-4 focus:outline-none text-center rounded-full active">
Color
</button>
<button class="tab-button py-2 px-4 focus:outline-none text-center rounded-full">
Font
</button>
<button class="tab-button py-2 px-4 focus:outline-none text-center rounded-full">
Assets
</button>
</div>
<div class="colorpicker">
<input type="color" id="accentDark" value="#ca93fb" />
<label for="accentDark">Accent <span>Dark</span></label>
<div class="tab-content">
<div class="tab-pane active" id="tab-colors">
${renderColorsTab}
</div>
<div class="tab-pane hidden" id="tab-fonts">
${fontHtmlCode}
</div>
<div class="tab-pane hidden" id="tab-assets">
<p class="text-center text-token-text-tertiary text-sm mb-2 font-weight-200">ooops, such empty</p>
<p class="text-center text-token-text-secondary text-md font-semibold">Coming Soon</p>
</div>
</div>
</section>
</div>
</main>
<footer class="grid">
<button id="resetAllSettings" class="btn block relative btn-primary text-center" as="button">Reset All</button>
</footer>
`
// <div div div class="blur-box" ></div >
// <div class="blur-box"></div>
// <div class="blur-box"></div>

// gpthFloatingBtn.innerHTML = htmlCode

gpthSettings.insertAdjacentHTML('beforeend', htmlCode)
document.body.appendChild(gpthSettings)

document.getElementById('gpth-settings-close').addEventListener('click', closeSettings)

$settings = gpthSettings

tabsSwitching()

$resetAllBtn = $settings.querySelector('#resetAllSettings')
$resetAllBtn.disabled = true

$settings.querySelector('#resetAllSettings').addEventListener('click', resetAllSettings)

// addFontsEventHandlers()
handleFontsListeners()
}

function openSettings() {
Expand Down Expand Up @@ -261,7 +311,7 @@ function updateCSSVars(lightColor, darkColor) {
}
`

console.log(cssVars)
// console.log(cssVars)

styleElement.textContent = cssVars
}
Expand Down
Loading

0 comments on commit cf31d90

Please sign in to comment.