jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2025-12-19 18:27:29 -05:00
Code Issues Projects Releases Wiki Activity

made py-button styling dynamic (#227)

Browse Source 
* made py-button styling dynamic

* added comments

* removed debugging logs

* fixed linting issue with variables
This commit is contained in:
Bruno Odinukweze
2022-05-06 20:40:03 +01:00
committed by GitHub
parent cc6d6247a8
commit 20a70ed3a7
2 changed files with 3956 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3941
pyscriptjs/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

22
pyscriptjs/src/components/pybutton.ts
View File

@@ -7,13 +7,31 @@ export class PyButton extends BaseEvalElement {
theme: string;
widths: Array<string>;
label: string;
class: Array<string>;
defaultClass: Array<string>;
mount_name: string;
constructor() {
super();
this.defaultClass = ['p-2', 'text-white', 'bg-blue-600', 'border', 'border-blue-600','rounded']
if (this.hasAttribute('label')) {
this.label = this.getAttribute('label');
}
// Styling does the same thing as class in normal HTML. Using the name "class" makes the style to malfunction
if (this.hasAttribute('styling')) {
let klass = this.getAttribute('styling');
if (klass.trim() == ''){
this.class = this.defaultClass
}else{
klass = klass.trim()
const newClassArray = klass.split(' ');
// trim each element to remove unecessary spaces which makes the button style to malfunction
this.class = (() => {const concatenatedString = []; for (let i = 0; i < newClassArray.length; i++) {if (newClassArray[i].trim() !== '')(concatenatedString.push(newClassArray[i].trim()));} return concatenatedString;})();
}
}
else {
this.class = this.defaultClass
}
}
connectedCallback() {
@@ -23,7 +41,7 @@ export class PyButton extends BaseEvalElement {
const mainDiv = document.createElement('button');
mainDiv.innerHTML = this.label;
addClasses(mainDiv, ['p-2', 'text-white', 'bg-blue-600', 'border', 'border-blue-600', 'rounded']);
addClasses(mainDiv, this.class);
mainDiv.id = this.id;
this.id = `${this.id}-container`;