More work around class and identifier generation for html tags

Author: Mark Gibbs

django_plotly_dash/dash_wrapper.py

@@ -414,14 +414,26 @@ def dispatch_with_args(self, body, argMap):
 
         return res
 
-    def extra_html_properties(self):
+    def slugified_id(self):
+        pre_slugified_id = self._uid
+        return slugify(pre_slugified_id)
+
+    def extra_html_properties(self, prefix=None, posfix=None, template_type=None):
         '''
         Return extra html properties to allow individual apps to be styled separately.
 
         The content returned from this function is injected unescaped into templates.
         '''
 
-        pre_slugified_id = self._uid
-        slugified_id = slugify(pre_slugified_id)
+        prefix = prefix if prefix else "django-plotly-dash"
+
+        post_part = "-%s" % posfix if posfix else ""
+        template_type = template_type if template_type else "iframe"
+
+        slugified_id = self.slugified_id()
 
-        return 'class="django-plotly-dash django-plotly-dash-iframe django-plotly-dash-app-%s"' % slugified_id
+        return "%(prefix)s %(prefix)s-%(template_type)s %(prefix)s-app-%(slugified_id)s%(post_part)s" % {'slugified_id':slugified_id,
+                                                                                                         'post_part':post_part,
+                                                                                                         'template_type':template_type,
+                                                                                                         'prefix':prefix,
+                                                                                                         }

django_plotly_dash/templates/django_plotly_dash/plotly_app.html

@@ -1,3 +1,3 @@
-<div style="{{dstyle}}" {%autoescape off%}{{app.extra_html_properties}}{%endautoescape%}>
+<div style="{{dstyle}}">
   <iframe src="{{app.base_url}}" style="{{istyle}}"frameborder="{{fbs}}"></iframe>
 </div>

django_plotly_dash/templatetags/plotly_dash.py

@@ -72,3 +72,36 @@ def plotly_message_pipe(context, url=None):
     'Insert script for providing background websocket connection'
     url = url if url else ws_default_url
     return locals()
+
+@register.simple_tag()
+def plotly_app_identifier(name=None, slug=None, da=None, postfix=None):
+    if name is not None:
+        da, app = DashApp.locate_item(name, stateless=True)
+
+    if slug is not None:
+        da, app = DashApp.locate_item(slug, stateless=False)
+
+    if not app:
+        app = da.as_dash_instance()
+
+    slugified_id = app.slugified_id()
+
+    if postfix:
+        return "%s-%s" %(slugified_id, postfix)
+    return slugified_id
+
+@register.simple_tag()
+def plotly_class(name=None, slug=None, da=None, prefix=None, postfix=None, template_type=None):
+
+    if name is not None:
+        da, app = DashApp.locate_item(name, stateless=True)
+
+    if slug is not None:
+        da, app = DashApp.locate_item(slug, stateless=False)
+
+    if not app:
+        app = da.as_dash_instance()
+
+    return app.extra_html_properties(prefix=prefix,
+                                     postfix=postfix,
+                                     template_type=template_type)

docs/template_tags.rst

@@ -54,3 +54,59 @@ on the page, and its ordering relative to the ``Dash`` instances using updating
 the page footer - to avoid delaying the main page load - along
 with other scripts is generally advisable.
 
+The ``plotly_app_identifier`` template tag
+-----------------------------------------
+
+This tag provides an identifier for an app, in a form that is suitable for use as a classname or identifier
+in HTML:
+
+.. code-block:: jinja
+
+  {%load plotly_dash%}
+
+  {%plotly_app_identifier name="SimpleExample"%}
+
+  {%plotly_app_identifier slug="liveoutput-2" postfix="A"%}
+
+The identifier, if the tag is not passed a ``slug``, is the result of passing the identifier of the app through
+the ``django.utils.text.slugify`` function.
+
+The tag arguments are:
+
+:name = None: The name of the application, as passed to a ``DjangoDash`` constructor.
+:slug = None: The slug of an existing ``DashApp`` instance.
+:da = None: An existing ``django_plotly_dash.models.DashApp`` model instance.
+:postfix = None: An optional string; if specified it is appended to the identifier with a hyphen.
+
+The validity rules for these arguments are the same as those for the ``plotly_app`` template tag.
+
+The ``plotly_class`` template tag
+-----------------------------------------
+
+Generate a string of class names, suitable for a ``div`` or other element that wraps around ``django-plotly-dash`` template content.
+
+.. code-block:: jinja
+
+  {%load plotly_dash%}
+
+  <div class="{%plotly_class slug="liveoutput-2" postfix="A"%}">
+    {%plotly_app slug="liveoutput-2" ratio="0.5" %}
+  </div>
+
+The identifier, if the tag is not passed a ``slug``, is the result of passing the identifier of the app through
+the ``django.utils.text.slugify`` function.
+
+The tag arguments are:
+
+:name = None: The name of the application, as passed to a ``DjangoDash`` constructor.
+:slug = None: The slug of an existing ``DashApp`` instance.
+:da = None: An existing ``django_plotly_dash.models.DashApp`` model instance.
+:prefix = None: Optional prefix to use in place of the text ``django-plotly-dash`` in each class name
+:postfix = None: An optional string; if specified it is appended to the app-specific identifier with a hyphen.
+:template_type = None: Optional text to use in place of ``iframe`` in the template-specific class name
+
+The tag inserts a string with three class names in it. One is just the ``prefix`` argument, one
+has the ``template_type`` appended, and the final one has the app identifier (as generated
+by the ``plotly_app_identifier`` tag) and any ``postfix`` appended.
+
+The validity rules for these arguments are the same as those for the ``plotly_app`` template tag.