yafowil.widget.ace 2.0.0__py2.py3-none-any.whl

yafowil/widget/ace/__init__.py

@@ -0,0 +1,150 @@
+from yafowil.base import factory
+from yafowil.utils import entry_point
+import os
+import webresource as wr
+
+
+resources_dir = os.path.join(os.path.dirname(__file__), 'resources')
+
+
+##############################################################################
+# Default
+##############################################################################
+
+# webresource ################################################################
+
+resources = wr.ResourceGroup(
+    name='yafowil.widget.ace',
+    directory=resources_dir,
+    path='yafowil-ace'
+)
+resources.add(wr.ScriptResource(
+    name='ace-js',
+    directory=os.path.join(resources_dir, 'ace'),
+    path='yafowil-ace/ace',
+    resource='ace.js'
+))
+resources.add(wr.ScriptResource(
+    name='yafowil-ace-js',
+    directory=os.path.join(resources_dir, 'default'),
+    path='yafowil-ace/default',
+    depends=[
+        'jquery-js',
+        'ace-js'
+    ],
+    resource='widget.js',
+    compressed='widget.min.js'
+))
+resources.add(wr.StyleResource(
+    name='yafowil-ace-css',
+    directory=os.path.join(resources_dir, 'default'),
+    path='yafowil-ace/default',
+    resource='widget.min.css'
+))
+
+# B/C resources ##############################################################
+
+js = [{
+    'group': 'yafowil.widget.ace.dependencies',
+    'resource': 'ace/ace.js',
+    'order': 20,
+}, {
+    'group': 'yafowil.widget.ace.common',
+    'resource': 'default/widget.js',
+    'order': 21,
+}]
+css = [{
+    'group': 'yafowil.widget.ace.common',
+    'resource': 'default/widget.min.css',
+    'order': 20,
+}]
+
+
+##############################################################################
+# Bootstrap 5
+##############################################################################
+
+# webresource ################################################################
+
+bootstrap5_resources = wr.ResourceGroup(
+    name='yafowil.widget.ace',
+    directory=resources_dir,
+    path='yafowil-ace'
+)
+bootstrap5_resources.add(wr.ScriptResource(
+    name='ace-js',
+    directory=os.path.join(resources_dir, 'ace'),
+    path='yafowil-ace/ace',
+    resource='ace.js'
+))
+bootstrap5_resources.add(wr.ScriptResource(
+    name='yafowil-ace-js',
+    directory=os.path.join(resources_dir, 'bootstrap5'),
+    path='yafowil-ace/bootstrap5',
+    depends=[
+        'jquery-js',
+        'ace-js'
+    ],
+    resource='widget.js',
+    compressed='widget.min.js'
+))
+bootstrap5_resources.add(wr.StyleResource(
+    name='yafowil-ace-css',
+    directory=os.path.join(resources_dir, 'bootstrap5'),
+    path='yafowil-ace/bootstrap5',
+    resource='widget.min.css'
+))
+
+# B/C resources ##############################################################
+
+bootstrap5_js = [{
+    'group': 'yafowil.widget.ace.dependencies',
+    'resource': 'ace/ace.js',
+    'order': 20,
+}, {
+    'group': 'yafowil.widget.ace.common',
+    'resource': 'bootstrap5/widget.js',
+    'order': 21,
+}]
+bootstrap5_css = [{
+    'group': 'yafowil.widget.ace.common',
+    'resource': 'bootstrap5/widget.min.css',
+    'order': 20,
+}]
+
+
+
+##############################################################################
+# Registration
+##############################################################################
+
+@entry_point(order=10)
+def register():
+    from yafowil.widget.ace import widget  # noqa
+
+    widget_name = 'yafowil.widget.ace'
+
+    # Default
+    factory.register_theme(
+        'default',
+        widget_name,
+        resources_dir,
+        js=js,
+        css=css
+    )
+    factory.register_resources('default', widget_name, resources)
+
+    # Bootstrap 5
+    factory.register_theme(
+        ['bootstrap5'],
+        widget_name,
+        resources_dir,
+        js=bootstrap5_js,
+        css=bootstrap5_css
+    )
+
+    factory.register_resources(
+        ['bootstrap5'],
+        widget_name,
+        bootstrap5_resources
+    )

yafowil/widget/ace/example.py

@@ -0,0 +1,238 @@
+from yafowil.base import factory
+
+
+DOC_ACE_PYTHON = """
+ACE in Python mode
+------------------
+
+Set the 'mode' option to 'python' to create a Python Ace widget.
+
+.. code-block:: python
+
+    value = '''
+    def foo():
+        return 'foo'
+    '''
+    ace = factory('#field:ace', value=value, props={
+        'label': 'Python source',
+        'required': 'Code is required',
+        'theme': 'github',
+        'mode': 'python',
+    })
+"""
+
+ace_py_value = """\
+def foo():
+    return 'foo'
+"""
+
+
+def ace_python():
+    part = factory(u'fieldset', name='yafowil.widget.ace.python')
+    part['ace'] = factory('#field:ace', value=ace_py_value, props={
+        'label': 'Python source',
+        'required': 'Code is required',
+        'theme': 'github',
+        'mode': 'python',
+    })
+    return {
+        'widget': part,
+        'doc': DOC_ACE_PYTHON,
+        'title': 'Python',
+    }
+
+
+DOC_ACE_JS = """
+ACE in Javascript mode
+----------------------
+
+Set the 'mode' option to 'javascript' to create a JavaScript Ace widget.
+
+.. code-block:: python
+
+    value = '''
+    var foo = function() {
+        return 'foo';
+    };
+    '''
+    ace = factory('#field:ace', value=value, props={
+        'label': 'Javascript Source',
+        'required': 'Code is required',
+        'theme': 'github',
+        'mode': 'javascript',
+    })
+"""
+
+ace_js_value = """\
+var foo = function() {
+    return 'foo';
+};
+"""
+
+
+def ace_js():
+    part = factory(u'fieldset', name='yafowil.widget.ace.js')
+    part['ace'] = factory('#field:ace', value=ace_js_value, props={
+        'label': 'Javascript Source',
+        'required': 'Code is required',
+        'theme': 'github',
+        'mode': 'javascript',
+    })
+    return {
+        'widget': part,
+        'doc': DOC_ACE_JS,
+        'title': 'Javascript',
+    }
+
+
+DOC_ACE_THEMES = """
+Themes
+------
+
+Customize syntax highlighting and appearance with one of the available ACE themes.
+
+.. code-block:: python
+
+    value = '''
+    function foo(items) {
+        for (var i=0; i<=items.length; i++) {
+            alert(items[i]);
+        }
+    }
+    '''
+    ace = factory('#field:ace', value=value, props={
+        'label': 'Solarized Theme',
+        'required': 'Code is required',
+        'theme': 'solarized_light',
+        'mode': 'javascript'
+    })
+"""
+
+ace_theme_value = """\
+function foo(items) {
+    for (var i=0; i<=items.length; i++) {
+        alert(items[i]);
+    }
+}
+"""
+
+
+def ace_themes():
+    part = factory(u'fieldset', name='yafowil.widget.ace.themes')
+    part['ace'] = factory('#field:ace', value=ace_theme_value, props={
+        'label': 'Solarized Theme',
+        'required': 'Code is required',
+        'theme': 'solarized_light',
+        'mode': 'javascript'
+    })
+    return {
+        'widget': part,
+        'doc': DOC_ACE_THEMES,
+        'title': 'Themes',
+    }
+
+
+DOC_ACE_DARKMODE = """
+Dark Mode
+---------
+
+Customize syntax highlighting and appearance for dark mode with one of the
+available ACE themes.
+The current ACE theme corresponds to the theme set in Bootstrap5 HTML
+data-bs-theme attribute ('light' | 'dark').
+
+Try it out using the color switch above!
+
+.. code-block:: python
+
+    value = '''
+    function foo(items) {
+        for (var i=0; i<=items.length; i++) {
+            alert(items[i]);
+        }
+    }
+    '''
+    ace = factory('#field:ace', value=value, props={
+        'label': 'Light and Dark Theme',
+        'required': 'Code is required',
+        'theme': 'chrome',
+        'dark_theme': 'tomorrow_night',
+        'mode': 'javascript'
+    })
+"""
+
+ace_darkmode_value = """\
+function foo(items) {
+    for (var i=0; i<=items.length; i++) {
+        alert(items[i]);
+    }
+}
+"""
+
+
+def ace_darkmode():
+    part = factory(u'fieldset', name='yafowil.widget.ace.darkmode')
+    part['ace'] = factory('#field:ace', value=ace_theme_value, props={
+        'label': 'Light and Dark Theme',
+        'required': 'Code is required',
+        'theme': 'chrome',
+        'dark_theme': 'tomorrow_night',
+        'mode': 'javascript'
+    })
+    return {
+        'widget': part,
+        'doc': DOC_ACE_DARKMODE,
+        'title': 'Dark Theme',
+    }
+
+
+DOC_ACE_DISPLAY = """
+Display Mode / Read-only Mode
+-----------------------------
+
+The widget attribute ``read_only`` can be used to render the widget in read-only mode.
+
+The widget's display renderer automatically sets the ``read_only`` attribute to ``True``.
+
+.. code-block:: python
+
+    value = '''
+    function foo(items) {
+        for (var i=0; i<=items.length; i++) {
+            alert(items[i]);
+        }
+    }
+    '''
+    ace = factory('#field:ace', value=value, mode='display', props={
+        'label': 'Light and Dark Theme',
+        'required': 'Code is required',
+        'theme': 'chrome',
+        'dark_theme': 'tomorrow_night',
+        'mode': 'javascript',
+        # 'read_only': True # manually render in read-only mode
+    })
+"""
+
+
+def ace_display():
+    part = factory(u'fieldset', name='yafowil.widget.ace.display')
+    part['ace'] = factory('#field:ace', value=ace_theme_value, mode='display', props={
+        'label': 'Display Mode',
+        'required': 'Code is required',
+        'theme': 'chrome',
+        'dark_theme': 'tomorrow_night',
+        'mode': 'javascript'
+    })
+    return {
+        'widget': part,
+        'doc': DOC_ACE_DISPLAY,
+        'title': 'Display Mode',
+    }
+
+
+def get_example():
+    themes = []
+    if factory.theme == 'bootstrap5':
+        themes.append(ace_darkmode())
+    themes += [ace_python(), ace_js(), ace_themes(), ace_display()]
+    return themes