Add conditional placeholder detection

Implements: https://github.com/alphagov/notifications-utils/pull/51

Copies the same regex.

Adds some CSS to display conditional placeholders differently to
normal placeholders (vertical rather that curved right-hand edge).
This commit is contained in:
Chris Hill-Scott
2016-07-12 12:48:09 +01:00
parent d380eaf060
commit c006b8748c
4 changed files with 23 additions and 5 deletions

View File

@@ -5,7 +5,7 @@
!('oninput' in document.createElement('input'))
) return;
const tagPattern = /\(\([^\)\(]+\)\)/g;
const tagPattern = /\(\(([^\)\((\?)]+)(\?\?)?([^\)\(]*)\)\)/g;
Modules.HighlightTags = function() {
@@ -43,7 +43,9 @@
this.replacePlaceholders = () => this.$background.html(
this.escapedMessage().replace(
tagPattern, match => `<span class='placeholder'>${match}</span>`
tagPattern, (match, name, separator, value) => value && separator ?
`<span class='placeholder-conditional'>((${name}??</span>${value}))` :
`<span class='placeholder'>((${name}${value}))</span>`
)
);

View File

@@ -22,3 +22,19 @@
border-radius: 1px;
box-shadow: inset 0 -2px 0 0 $white, inset 0 2px 0 0 $white;
}
.placeholder-conditional {
@extend %placeholder;
border-radius: 0;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
box-shadow: inset 9px 0 0 0 $white, inset -17px 0 0 0 $white, inset 0 -3px 0 0 $white, inset 0 3px 0 0 $white;
.sms-message-wrapper & {
box-shadow: inset 9px 0 0 0 $panel-colour, inset -17px 0 0 0 $panel-colour, inset 0 -3.5px 0 0 $panel-colour, inset 0 3.5px 0 0 $panel-colour;
}
}

View File

@@ -144,7 +144,7 @@
{% if 'email' == template.template_type %}
{{ email_message(
template.formatted_subject_as_markup if errors else template.replaced_subject,
template.formatted_as_markup if errors else template.replaced,
template.formatted_as_markup if errors else template.replaced|safe,
from_address='{}@notifications.service.gov.uk'.format(current_service.email_from),
from_name=current_service.name,
recipient=first_recipient,
@@ -154,7 +154,7 @@
<div class="grid-row">
<div class="column-two-thirds">
{{ sms_message(
template.formatted_as_markup if errors else template.replaced,
template.formatted_as_markup if errors else template.replaced|safe,
recipient=first_recipient,
show_placeholder_for_recipient=errors
)}}

View File

@@ -18,4 +18,4 @@ pytz==2016.4
git+https://github.com/alphagov/notifications-python-client.git@1.0.0#egg=notifications-python-client==1.0.0
git+https://github.com/alphagov/notifications-utils.git@8.3.0#egg=notifications-utils==8.3.0
git+https://github.com/alphagov/notifications-utils.git@8.4.1#egg=notifications-utils==8.4.1