Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor : Removing JQuery form themer.js file #229

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+47 −74
Open

Refactor : Removing JQuery form themer.js file #229

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0a3d45e
merge
DhairyaMajmudar Dec 28, 2023
d3efe29
Merge branch 'CircuitVerse:main' into themer.js
DhairyaMajmudar Jan 4, 2024
f03fdf7
fix
DhairyaMajmudar Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 47 additions & 74 deletions src/simulator/src/themer/themer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,24 +100,41 @@ export function updateThemeForStyle(themeName) {
*/
export const getThemeCardSvg = (themeName) => {
const colors = themeOptions[themeName]
let svgIcon = $(themeCardSvg)
let svgIcon = document.querySelector(themeCardSvg)

// Dynamically set the colors according to the theme
$('.svgText', svgIcon).attr('fill', colors['--text-panel'])
svgIcon.querySelectorAll('.svgText').forEach(element => {
element.setAttribute('fill', colors['--text-panel']);
});

$('.svgNav', svgIcon).attr('fill', colors['--bg-tab'])
$('.svgNav', svgIcon).attr('stroke', colors['--br-primary'])
svgIcon.querySelectorAll('.svgNav').forEach(element => {
element.setAttribute('fill', colors['--bg-tab']);
element.setAttribute('stroke', colors['--br-primary']);
});

$('.svgGridBG', svgIcon).attr('fill', colors['--canvas-fill'])
$('.svgGrid', svgIcon).attr('fill', colors['--canvas-stroke'])
svgIcon.querySelectorAll('.svgGridBG').forEach(element => {
element.setAttribute('fill', colors['--canvas-fill']);
});

$('.svgPanel', svgIcon).attr('fill', colors['--primary'])
$('.svgPanel', svgIcon).attr('stroke', colors['--br-primary'])
svgIcon.querySelectorAll('.svgGrid').forEach(element => {
element.setAttribute('fill', colors['--canvas-stroke']);
});

$('.svgChev', svgIcon).attr('stroke', colors['--br-secondary'])
svgIcon.querySelectorAll('.svgPanel').forEach(element => {
element.setAttribute('fill', colors['--primary']);
element.setAttribute('stroke', colors['--br-primary']);
});

svgIcon.querySelectorAll('.svgChev').forEach(element => {
element.setAttribute('stroke', colors['--br-secondary']);
});

svgIcon.querySelectorAll('.svgHeader').forEach(element => {
element.setAttribute('fill', colors['--primary']);
});

let temp = svgIcon.outerHTML;

$('.svgHeader', svgIcon).attr('fill', colors['--primary'])
let temp = svgIcon.prop('outerHTML')
console.log('----------')
console.log('===OKK===')
console.log(temp)
Expand Down Expand Up @@ -156,72 +173,28 @@ export const colorThemes = () => {
const simulatorStore = SimulatorStore()
simulatorStore.dialogBox.theme_dialog = true

// const selectedTheme = localStorage.getItem('theme')
// $('#colorThemesDialog').empty()
// const themes = Object.keys(themeOptions)
// themes.forEach((theme) => {
// if (theme === selectedTheme) {
// $('#colorThemesDialog').append(getThemeCard(theme, true))
// } else {
// $('#colorThemesDialog').append(getThemeCard(theme, false))
// }
// })

// $('.selected label').trigger('click')
// $('#colorThemesDialog').dialog({
// resizable: false,
// close() {
// // Rollback to previous theme
// updateThemeForStyle(localStorage.getItem('theme'))
// updateBG()
// },
// buttons: [
// {
// text: 'Apply Theme',
// click() {
// // check if any theme is selected or not
// if ($('.selected label').text()) {
// localStorage.removeItem('Custom Theme')
// localStorage.setItem(
// 'theme',
// $('.selected label').text()
// )
// }
// $('.set').removeClass('set')
// $('.selected').addClass('set')
// $(this).dialog('close')
// },
// },
// {
// text: 'Custom Theme',
// click() {
// CustomColorThemes()
// $(this).dialog('close')
// },
// },
// ],
// })

$('#colorThemesDialog').focus()
$('.ui-dialog[aria-describedby="colorThemesDialog"]').on('click', () =>
$('#colorThemesDialog').focus()
) //hack for losing focus

$('.themeSel').on('mousedown', (e) => {
e.preventDefault()
$('.selected').removeClass('selected')
let themeCard = $(e.target.parentElement)
themeCard.addClass('selected')
// Extract radio button
var radioButton = themeCard.find('input[type=radio]')
radioButton.trigger('click') // Mark as selected
updateThemeForStyle(themeCard.find('label').text()) // Extract theme name and set
updateBG()
})
document.getElementById('#colorThemesDialog').focus()
document.querySelector('.ui-dialog[aria-describedby="colorThemesDialog"]').addEventListener('click', () => document.getElementById('#colorThemesDialog').focus()) //hack for losing focus

Array.from(document.getElementsByClassName('themeSel')).forEach(themeSel => {
themeSel.addEventListener('mousedown', (e) => {
e.preventDefault();
Array.from(document.getElementsByClassName('selected')).forEach(selected => {
selected.classList.remove('selected');
});
let themeCard = e.target.parentElement;
themeCard.classList.add('selected');
// Extract radio button
var radioButton = themeCard.querySelector('input[type=radio]');
radioButton.click(); // Mark as selected
updateThemeForStyle(themeCard.querySelector('label').textContent); // Extract theme name and set
updateBG();
});
});
}

export const updateBG = () => dots(true, false, true)
;(() => {
; (() => {
if (!localStorage.getItem('theme'))
localStorage.setItem('theme', 'Default Theme')
updateThemeForStyle(localStorage.getItem('theme'))
Expand Down
Loading