Добавление поддержки Alpine.js в пакет Django
Я использую пакет, который добавляет тег шаблона SVG для вставки SVG в мои шаблоны Django. Я форкнул проект и добавил поддержку передачи атрибутов HTML в SVG. Так что сейчас я могу использовать его следующим образом:
{% load svg %}
<a class="font-semibold text-gray-850 href="#0">
{% svg 'icon-chevron-down' class="inline -mb-0.5 w-4 h-4 ml-0.5 transition-transform duration-200 transform fill-current text-gray-400" %}
</a>
Но я сталкиваюсь с проблемой, когда хочу использовать Alpine.js внутри svg. Я хотел бы иметь возможность сделать что-то вроде этого:
{% svg 'icon-chevron-down' :class="{'rotate-180': open, 'rotate-0': !open}" class="inline -mb-0.5 w-4 h-4 ml-0.5 transition-transform duration-200 transform fill-current text-gray-400" %}
Как я могу заставить его работать?
Репо для моего пакета: https://github.com/xshapira/django-simple-svg
svg.py
from __future__ import absolute_import
import logging
import os
from django import template
from django.conf import settings
from django.contrib.staticfiles import finders
from django.core.exceptions import ImproperlyConfigured
from django.utils.safestring import mark_safe
from simple_svg.exceptions import SVGNotFound
logger = logging.getLogger(__name__)
register = template.Library()
@register.simple_tag
def svg(filename, *args, **kwargs):
SVG_DIRS = getattr(settings, "SVG_DIRS", [])
if type(SVG_DIRS) != list:
raise ImproperlyConfigured("SVG_DIRS setting must be a list")
path = None
if SVG_DIRS:
for directory in SVG_DIRS:
svg_path = os.path.join(
directory, "{filename}.svg".format(filename=filename)
)
if os.path.isfile(svg_path):
path = svg_path
else:
path = finders.find(
os.path.join("svg", "{filename}.svg".format(filename=filename)), all=True
)
if not path:
message = "SVG '{filename}.svg' not found".format(filename=filename)
# Raise exception if DEBUG is True, else just log a warning.
if settings.DEBUG:
raise SVGNotFound(message)
else:
logger.warning(message)
return ""
# Sometimes path can be a list/tuple if there's more than one file found
if isinstance(path, (list, tuple)):
path = path[0]
with open(path) as svg_file:
svg = svg_file.read()
if kwargs:
attributes = " ".join(['{}="{}"'.format(k, v) for k, v in kwargs.items()])
svg = svg.replace("<svg", "<svg " + attributes)
svg = mark_safe(svg)
return svg
tests.py
import os
from django.conf import settings
from django.core.exceptions import ImproperlyConfigured
from django.template import Context, Template
from django.test.testcases import SimpleTestCase
from simple_svg.exceptions import SVGNotFound
def test_should_support_attributes(self):
svg_file = open(
os.path.join(settings.BASE_DIR, "static", "svg", "django.svg")
).read()
template = Template("{% load svg %}{% svg 'django' id='logo' class='large' %}")
self.assertNotEqual(svg_file, template.render(Context()))
self.assertIn('id="logo"', template.render(Context()))
self.assertIn('class="large"', template.render(Context()))
Простое решение
Я нашел лучший способ сделать это, ничего не меняя в пакете Django. Мы просто можем обернуть тег svg
тегом div
и применить к нему выражения class и Alpine.js. Вот пример:
<div :class="{'rotate-180': open, 'rotate-0': !open}" class="inline -mb-0.5 w-4 h-4 ml-0.5 transition-transform duration-200 transform fill-current text-gray-400">
{% svg 'icon-chevron-down' %}
</div>