Skip to content

Instantly share code, notes, and snippets.

@dunossauro

dunossauro/bryhton_webcomponent.html

Last active September 22, 2021 16:06
Show Gist options
  • Save dunossauro/824efc96cd2a400a177d1ae2620c1d44 to your computer and use it in GitHub Desktop.
Save dunossauro/824efc96cd2a400a177d1ae2620c1d44 to your computer and use it in GitHub Desktop.
Download ZIP
Simple example using brython webcomponents
Raw
bryhton_webcomponent.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>LT</title>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js">
</script>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/[email protected]/brython_stdlib.min.js">
</script>
<script type="text/python">
from browser import webcomponent, html, bind, document
names = [
'Eduardo',
'Eduarda',
'Eduardu',
'Eduards',
'Maria',
'Will'
]
class SimpleListComponent:
def __init__(self):
self.shadow = self.attachShadow({'mode': 'open'})
self.names = names
def name_list(self):
node = self.shadow.select_one('ul')
if node:
self.shadow.removeChild(node)
ul = html.UL(html.B('Names'))
for x in self.names:
ul <= html.LI(x)
self.shadow <= ul
def attributeChangedCallback(self, attr, old_value, new_value, *_):
if not new_value:
self.names = names
else:
self.names = filter(
lambda name: new_value.lower() in name.lower(), names
)
self.name_list()
def observedAttributes(self):
return ['data-contains']
webcomponent.define(
'simple-component', SimpleListComponent
)
@bind('input[name="contains"]', 'keyup')
def change(event):
document.select_one(
'simple-component'
).attrs['data-contains'] = event.currentTarget.value
</script>
</head>
<body onload="brython()">
<label for="contains">Contains: </label>
<input type="text" name="contains">
<simple-component data-contains=""></simple-component>
</body>
</html>
@manatlan
Copy link

manatlan commented Sep 22, 2021 •
edited
Loading

thanks, here is a simpler version

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>LT</title>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js">
    </script>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/[email protected]/brython_stdlib.min.js">
    </script>
    <script type="text/python">
    from browser import webcomponent, html, bind, document

    NAMES = [
        'Eduardo',
        'Eduarda',
        'Eduardu',
        'Eduards',
        'Maria',
        'Will'
    ]

    class SimpleListComponent:
        def __init__(self):
            self.shadow = self.attachShadow({'mode': 'open'})

        def render(self, ll):
            ul = html.UL(html.B('Names'))
            ul <= [html.LI(x) for x in ll]
            
            self.shadow.clear()
            self.shadow <= ul

        def attributeChangedCallback(self, attr, old_value, new_value, *_):
            self.render([i for i in NAMES if new_value.lower() in i.lower()])

        def observedAttributes(self):
            return ['data-contains']

    webcomponent.define(
        'simple-component', SimpleListComponent
    )

    @bind('input[name="contains"]', 'keyup')
    def change(e):
        document.select_one('simple-component').attrs['data-contains'] = e.currentTarget.value
        
    </script>
  </head>
  <body onload="brython()">
  
    <input type="text" name="contains" placeholder="contains?">
    <simple-component data-contains=""></simple-component>
    
  </body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment