WIP: misc: add BEM classes on link-list-cell (#70837) #29
|
@ -6,7 +6,13 @@
|
||||||
|
|
||||||
|
|
||||||
{% block form-link-pre %}{% endblock %}
|
{% block form-link-pre %}{% endblock %}
|
||||||
<a href="{{ form_url }}{% if not request_is_a_bot %}tryauth?cancelurl={{ absolute_uri|urlencode|iriencode }}{% endif %}">{% block form-link-title %}{{ form_title }}{% endblock %}</a>
|
<a
|
||||||
|
{% if css_block %}
|
||||||
|
class="{{css_block}}--link"
|
||||||
|
{% endif %}
|
||||||
|
href="{{ form_url }}{% if not request_is_a_bot %}tryauth?cancelurl={{ absolute_uri|urlencode|iriencode }}{% endif %}">
|
||||||
|
{% block form-link-title %}{{ form_title }}{% endblock %}
|
||||||
|
</a>
|
||||||
{% if form_description %}
|
{% if form_description %}
|
||||||
<div class="description">{% block form-link-description %}{{ form_description|safe }}{% endblock %}</div>
|
<div class="description">{% block form-link-description %}{{ form_description|safe }}{% endblock %}</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
@ -2,33 +2,33 @@
|
||||||
{% block cell-content %}
|
{% block cell-content %}
|
||||||
{% spaceless %}
|
{% spaceless %}
|
||||||
{% block cell-header %}
|
{% block cell-header %}
|
||||||
{% if title %}<h2>{{ title }}</h2>{% endif %}
|
{% if title %}<h2 class="cell--title">{{ title }}</h2>{% endif %}
|
||||||
{% include "combo/asset_picture_fragment.html" %}
|
{% include "combo/asset_picture_fragment.html" %}
|
||||||
{% endblock cell-header %}
|
{% endblock cell-header %}
|
||||||
<div class="links-list">
|
<div class="links-list">
|
||||||
{% block cell-top-content %}{% endblock cell-top-content %}
|
{% block cell-top-content %}{% endblock cell-top-content %}
|
||||||
<ul>
|
<ul class="links-list--items">
|
||||||
{% for link in links %}
|
{% for link in links %}
|
||||||
<li class="{{ link.css_classes|default:""|join:" " }}{% if link.cell.extra_css_class %} {{ link.cell.extra_css_class }}{% endif %}">{% if link.is_form %}
|
<li class="links-list--item {{ link.css_classes|default:""|join:" " }}{% if link.cell.extra_css_class %} {{ link.cell.extra_css_class }}{% endif %}">{% if link.is_form %}
|
||||||
{% include "combo/wcs/form_link_fragment.html" with form=link %}
|
{% include "combo/wcs/form_link_fragment.html" with form=link css_block="links-list" %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<a href="{{ link.url }}">{{ link.title }}</a>
|
<a href="{{ link.url }}" class="links-list--link">{{ link.title }}</a>
|
||||||
{% endif %}</li>
|
{% endif %}</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% if more_links %}
|
{% if more_links %}
|
||||||
<li class="add-more-items">
|
<li class="add-more-items links-list--more-items">
|
||||||
<a role="button" tabindex="0" aria-expanded="false" aria-controls="more-items-{{ cell.get_reference }}" aria-label="{% trans 'More items' %}" id="btn-more-items-{{ cell.get_reference }}" class="add-more-items--button">{% block cell-more-items-btn-label %}+{% endblock %}</a>
|
<a role="button" tabindex="0" aria-expanded="false" aria-controls="more-items-{{ cell.get_reference }}" aria-label="{% trans 'More items' %}" id="btn-more-items-{{ cell.get_reference }}" class="add-more-items--button links-list--more-items-button">{% block cell-more-items-btn-label %}+{% endblock %}</a>
|
||||||
</li>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
{% if more_links %}
|
{% if more_links %}
|
||||||
<ul style="display: none" class="more-items" id="more-items-{{ cell.get_reference }}" aria-labelledby="btn-more-items-{{ cell.get_reference }}">
|
<ul style="display: none" class="more-items links-list--items" id="more-items-{{ cell.get_reference }}" aria-labelledby="btn-more-items-{{ cell.get_reference }}">
|
||||||
{% for link in more_links %}
|
{% for link in more_links %}
|
||||||
<li class="more-items--item {{ link.css_classes|default:""|join:" " }}">{% if link.is_form %}
|
<li class="more-items--item links-list--item {{ link.css_classes|default:""|join:" " }}">{% if link.is_form %}
|
||||||
{% include "combo/wcs/form_link_fragment.html" with form=link %}
|
{% include "combo/wcs/form_link_fragment.html" with form=link css_block="links-list"%}
|
||||||
{% else %}
|
{% else %}
|
||||||
<a href="{{ link.url }}">{{ link.title }}</a>
|
<a class="links-list--link" href="{{ link.url }}">{{ link.title }}</a>
|
||||||
{% endif %}</li>
|
{% endif %}</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
@ -20,6 +20,7 @@ from django.test.utils import CaptureQueriesContext
|
||||||
from django.urls import reverse
|
from django.urls import reverse
|
||||||
from django.utils.encoding import force_bytes, force_str
|
from django.utils.encoding import force_bytes, force_str
|
||||||
from django.utils.timezone import now
|
from django.utils.timezone import now
|
||||||
|
from pyquery import PyQuery
|
||||||
|
|
||||||
from combo.data.library import get_cell_classes
|
from combo.data.library import get_cell_classes
|
||||||
from combo.data.models import (
|
from combo.data.models import (
|
||||||
|
@ -292,29 +293,33 @@ def test_link_list_cell():
|
||||||
)
|
)
|
||||||
|
|
||||||
ctx = {'page_cells': [item]}
|
ctx = {'page_cells': [item]}
|
||||||
assert '<ul><li class=" foobar"><a href="http://example.net/">Example Site</a></li></ul>' in cell.render(
|
pq = PyQuery(cell.render(ctx))
|
||||||
ctx
|
assert pq("a").attr("href") == "http://example.net/"
|
||||||
)
|
assert pq("a").text() == "Example Site"
|
||||||
|
assert "foobar" in pq("li").attr("class")
|
||||||
|
|
||||||
item.title = ''
|
item.title = ''
|
||||||
item.extra_css_class = ''
|
item.extra_css_class = ''
|
||||||
assert '<ul><li class=""><a href="http://example.net/">http://example.net/</a></li></ul>' in cell.render(
|
pq = PyQuery(cell.render(ctx))
|
||||||
ctx
|
assert pq("a").text() == "http://example.net/"
|
||||||
)
|
assert "foobar" not in pq("li").attr("class")
|
||||||
|
|
||||||
item.link_page = page
|
item.link_page = page
|
||||||
assert '<ul><li class=""><a href="/example-page/">example page</a></li></ul>' in cell.render(ctx)
|
pq = PyQuery(cell.render(ctx))("a")
|
||||||
|
assert pq.attr("href") == "/example-page/"
|
||||||
|
assert pq.text() == "example page"
|
||||||
|
|
||||||
item.title = 'altertitle'
|
item.title = 'altertitle'
|
||||||
assert '<ul><li class=""><a href="/example-page/">altertitle</a></li></ul>' in cell.render(ctx)
|
pq = PyQuery(cell.render(ctx))("a")
|
||||||
|
assert pq.text() == "altertitle"
|
||||||
|
|
||||||
item.anchor = 'anchor'
|
item.anchor = 'anchor'
|
||||||
assert '<ul><li class=""><a href="/example-page/#anchor">altertitle</a></li></ul>' in cell.render(ctx)
|
pq = PyQuery(cell.render(ctx))("a")
|
||||||
|
assert pq.attr("href") == "/example-page/#anchor"
|
||||||
|
|
||||||
item.link_page = None
|
item.link_page = None
|
||||||
assert '<ul><li class=""><a href="http://example.net/#anchor">altertitle</a></li></ul>' in cell.render(
|
pq = PyQuery(cell.render(ctx))("a")
|
||||||
ctx
|
assert pq.attr("href") == "http://example.net/#anchor"
|
||||||
)
|
|
||||||
|
|
||||||
item2 = LinkCell.objects.create(
|
item2 = LinkCell.objects.create(
|
||||||
page=page,
|
page=page,
|
||||||
|
@ -324,9 +329,9 @@ def test_link_list_cell():
|
||||||
order=1,
|
order=1,
|
||||||
)
|
)
|
||||||
ctx = {'page_cells': [item, item2]}
|
ctx = {'page_cells': [item, item2]}
|
||||||
assert 'class="add-more-items--button">+</a>' not in cell.render(ctx)
|
assert 'class="add-more-items--button links-list--more-items-button">+</a>' not in cell.render(ctx)
|
||||||
cell.limit = 1
|
cell.limit = 1
|
||||||
assert 'class="add-more-items--button">+</a>' in cell.render(ctx)
|
assert 'class="add-more-items--button links-list--more-items-button">+</a>' in cell.render(ctx)
|
||||||
|
|
||||||
|
|
||||||
def test_link_list_cell_validity():
|
def test_link_list_cell_validity():
|
||||||
|
|
|
@ -1864,7 +1864,7 @@ def test_list_of_links_with_form_render(app):
|
||||||
|
|
||||||
resp = app.get('/test_list_of_links_with_form_render/')
|
resp = app.get('/test_list_of_links_with_form_render/')
|
||||||
assert PyQuery(resp.text).find('.links-list a').text() == 'A title'
|
assert PyQuery(resp.text).find('.links-list a').text() == 'A title'
|
||||||
assert PyQuery(resp.text).find('.links-list li').attr('class') == ' foobar'
|
assert 'foobar' in PyQuery(resp.text).find('.links-list li').attr('class')
|
||||||
assert (
|
assert (
|
||||||
PyQuery(resp.text).find('.links-list a').attr('href')
|
PyQuery(resp.text).find('.links-list a').attr('href')
|
||||||
== 'http://example.com/tryauth?cancelurl=http%3A//testserver/test_list_of_links_with_form_render/'
|
== 'http://example.com/tryauth?cancelurl=http%3A//testserver/test_list_of_links_with_form_render/'
|
||||||
|
@ -1873,12 +1873,12 @@ def test_list_of_links_with_form_render(app):
|
||||||
link.cached_json = {'keywords': ['bar']}
|
link.cached_json = {'keywords': ['bar']}
|
||||||
link.save()
|
link.save()
|
||||||
resp = app.get('/test_list_of_links_with_form_render/')
|
resp = app.get('/test_list_of_links_with_form_render/')
|
||||||
assert PyQuery(resp.text).find('.links-list li').attr('class') == 'keyword-bar foobar'
|
assert 'keyword-bar foobar' in PyQuery(resp.text).find('.links-list li').attr('class')
|
||||||
|
|
||||||
link.extra_css_class = ''
|
link.extra_css_class = ''
|
||||||
link.save()
|
link.save()
|
||||||
resp = app.get('/test_list_of_links_with_form_render/')
|
resp = app.get('/test_list_of_links_with_form_render/')
|
||||||
assert PyQuery(resp.text).find('.links-list li').attr('class') == 'keyword-bar'
|
assert 'keyword-bar' in PyQuery(resp.text).find('.links-list li').attr('class')
|
||||||
|
|
||||||
link.cached_json = {'description': 'en outre, on est des loutres'}
|
link.cached_json = {'description': 'en outre, on est des loutres'}
|
||||||
link.save()
|
link.save()
|
||||||
|
|
Loading…
Reference in New Issue