def __init__(self, is_editing): style = {'text-align': 'center'} elt = html.DIV(style=style, **{'class': 'ui_placehoder'}) elt.draggable = False super(UI_Placehoder, self).__init__(elt, False) self.config = {} self.is_editing = is_editing if not self.is_editing: return elt_img = html.maketag('img')(**{ 'src': 'web/lib/icons/true/ios-add-circle-outline.svg', 'width': '28', 'height': '28' }) elt_img.draggable = False elt <= elt_img def dragover(ev): if UI_Component.dragging is not None: if not UI_Component.dragging.ancestor_of(self): if UI_Placehoder.drag_over is None or UI_Placehoder.drag_over is not self: if UI_Placehoder.drag_over is not None: remove_class(UI_Placehoder.drag_over.elt, 'drop_target') if not isinstance(self.parent, UI_Source): add_class(self.elt, 'drop_target') UI_Placehoder.drag_over = self ev.preventDefault() # needed def dragleave(ev): if UI_Component.dragging is not None: if not UI_Component.dragging.ancestor_of(self): remove_class(self.elt, 'drop_target') UI_Placehoder.drag_over = None ev.preventDefault() def drop(ev): if UI_Placehoder.drag_over is not None: if self.parent is not None and ( UI_Placehoder.dragging.parent.is_editing or isinstance( UI_Placehoder.dragging.parent, UI_Editor)): self.parent.child_drop(self) if UI_Placehoder.drag_over is not None: remove_class(UI_Placehoder.drag_over.elt, 'drop_target') UI_Placehoder.drag_over = None if UI_Component.dragging is not None: remove_class(UI_Component.dragging.elt, 'drop_source') UI_Component.dragging = None ev.preventDefault() self.elt.bind('drop', drop) self.elt.bind('dragover', dragover) self.elt.bind('dragleave', dragleave)
def test_browser_webcomponent(): from browser import webcomponent class BoldItalic: def __init__(self): # Create a shadow root shadow = self.attachShadow({'mode': 'open'}) # Insert the value of attribute "data-val" in bold italic # in the shadow root shadow <= html.B(html.I(self.attrs['data-val'])) # Tell the browser to manage <bold-italic> tags with the class BoldItalic webcomponent.define("bold-italic", BoldItalic) from browser import document import browser.webcomponent class BoldItalic: def __init__(self): # Create a shadow root shadow = self.attachShadow({'mode': 'open'}) # Insert the value of attribute "data-val" in bold italic # in the shadow root shadow <= html.B(html.I(self.attrs['data-val'])) def connectedCallback(self): print("connected callback", self) webcomponent.define("bold-italic", BoldItalic) observed_tag = html.maketag("observed-element") class Observed: def observedAttributes(self): return ["data"] def attributeChangedCallback(self, name, old, new, ns): print(f"attribute {name} changed from {old} to {new}") webcomponent.define("observed-element", Observed) elt = observed_tag() document <= elt elt.attrs["data"] = "info"
def setup(): import app_main real_app_elm = html.maketag("main-app")() document.body.removeChild(document.select("App")[0]) document.body <= real_app_elm app_main.setup() import views import components from App import App as main_app Mapsi.render(main_app) may_router_view = document.select("router-view") if len(may_router_view) > 0: may_router_view[0].render()
def __init__(self, config, is_editing): self.event_listener = None assert 'js_css_files' not in config, config files = [] if 'files' in config: files = config['files'] for file in files: if file.endswith('.js') or file.endswith('.css'): window.load_js_css_file(file) else: load_py_file(file) assert 'tag' in config or 'init' in config, config if 'tag' in config: self.obj = None elt = html.maketag(config['tag'])() def handle_event(event): if self.event_listener is not None: self.event_listener(event, None) for event in config['events']: elt.bind(event, lambda ev: handle_event(event)) else: obj = None if config['init'] in globals(): exec('obj = %s()' % config['init'], locals=locals()) elif config['init'] in window: exec('from browser import self as window\nobj = window.%s()' % config['init'], locals=locals()) if obj is not None: self.obj = obj elt = obj.elt else: self.obj = None elt = html.DIV( '错误: 无控件', **{ 'class': 'alert alert-info', 'role': 'alert' }) super(Custom_Component, self).__init__(elt, is_editing) self.set_config(config, False) if is_editing: self.use_example_data()