<div class="notification notification--info" role="alert">
<span>
Votre magasin favori JMT Abbeville est actuellement ouvert.
<a href="#">Voir les horaires</a>
</span>
</div>
<div id="testNotification"></div>
<div class="notification notification--{{notification.type}}{{#if notification_alt}} notification--alt{{/if}}" role="alert">
<span>
{{notification.content}}
{{#if notification.link }}
<a href="{{notification.link}}">{{notification.link_title}}</a>
{{/if}}
</span>
</div>
<div id="testNotification"></div>
{
"notification": {
"content": "Votre magasin favori JMT Abbeville est actuellement ouvert.",
"link": "#",
"link_title": "Voir les horaires",
"type": "info"
}
}
.notification, .wpcf7-response-output {
display: flex!important;
align-items: center;
background: $c-notification;
padding: $margin-m $margin-m*1.5;
border-radius: 16px;
font-weight: 700;
width: 100%;
margin: $margin-m auto;
color: $c-font-color!important;
span, a { color: $c-font-color!important }
a {
color: $c-font-color;
&:hover, &:focus {
text-decoration-color: transparent;
}
}
&::before {
content: '';
display: block;
min-width: 32px;
min-height: 32px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='info-circle' class='svg-inline--fa fa-info-circle fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23332D2D' d='M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254a12 12 0 01-12 12h-88a12 12 0 01-12-12v-24a12 12 0 0112-12h12v-64h-12a12 12 0 01-12-12v-24a12 12 0 0112-12h64a12 12 0 0112 12v100h12a12 12 0 0112 12v24z'/%3E%3C/svg%3E");
margin-right: $margin-m;
}
&--valid, &.wpcf7-mail-sent-ok {
background-color: $c-notification-valid;
&::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='check-circle' class='svg-inline--fa fa-check-circle fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23332D2D' d='M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227.3 387.3l184-184a16 16 0 000-22.6L388.7 158a16 16 0 00-22.6 0L216 308l-70-70a16 16 0 00-22.7 0l-22.6 22.6a16 16 0 000 22.6l104 104a16 16 0 0022.6 0z'/%3E%3C/svg%3E");
}
}
&--error, &.wpcf7-validation-errors {
background-color: $c-notification-error;
&::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='times-circle' class='svg-inline--fa fa-times-circle fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23332D2D' d='M256 8a248 248 0 100 496 248 248 0 000-496zm121.6 313.1a12 12 0 010 17L338 377.6a12 12 0 01-17 0L256 312l-65.1 65.6a12 12 0 01-17 0L134.4 338a12 12 0 010-17l65.6-65-65.6-65.1a12 12 0 010-17l39.6-39.6a12 12 0 0117 0l65 65.7 65.1-65.6a12 12 0 0117 0l39.6 39.6a12 12 0 010 17L312 256l65.6 65.1z'/%3E%3C/svg%3E");
}
}
&--alt {
background: $c-notification--alt;
span, a {
color: $c-white!important;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
&::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='info-circle' class='svg-inline--fa fa-info-circle fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254a12 12 0 01-12 12h-88a12 12 0 01-12-12v-24a12 12 0 0112-12h12v-64h-12a12 12 0 01-12-12v-24a12 12 0 0112-12h64a12 12 0 0112 12v100h12a12 12 0 0112 12v24z'/%3E%3C/svg%3E");
border-radius: 100%;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5);
}
&.notification--valid {
background: $c-notification-valid--alt;
&::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='check-circle' class='svg-inline--fa fa-check-circle fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227.3 387.3l184-184a16 16 0 000-22.6L388.7 158a16 16 0 00-22.6 0L216 308l-70-70a16 16 0 00-22.7 0l-22.6 22.6a16 16 0 000 22.6l104 104a16 16 0 0022.6 0z'/%3E%3C/svg%3E");
}
}
&.notification--error {
background: $c-notification-error--alt;
&::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='times-circle' class='svg-inline--fa fa-times-circle fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M256 8a248 248 0 100 496 248 248 0 000-496zm121.6 313.1a12 12 0 010 17L338 377.6a12 12 0 01-17 0L256 312l-65.1 65.6a12 12 0 01-17 0L134.4 338a12 12 0 010-17l65.6-65-65.6-65.1a12 12 0 010-17l39.6-39.6a12 12 0 0117 0l65 65.7 65.1-65.6a12 12 0 0117 0l39.6 39.6a12 12 0 010 17L312 256l65.6 65.1z'/%3E%3C/svg%3E");
}
}
}
}
.wpcf7-display-none { display: none !important }
/** Class to create notification */
class Notification {
/**
* Create the notification options.
* @param {Object} options - The notification attribute and content.
* @param {string} options.type - The type of notification [info (default) - valid - error]
* @param {string} options.content - The text content of the notification
* @param {string} options.link - The link of the text link. If empty, link doesn't appear
* @param {string} options.linkTitle - The text of the link
* @param {boolean} options.alt - Display the notification in a darker color background with color in white
*
*/
constructor(options) {
this.type = options.type || 'info';
this.content = options.content || '';
this.link = options.link || '';
this.linkTitle = options.linkTitle || '';
this.alt = options.alt || false;
}
getHTMLPart(type = this.type) {
return document.createRange().createContextualFragment(`<div class="notification notification--${type}${this.alt ? ` notification--alt` : ``}" role="alert">
<span>
${this.content}
${this.link ? `<a href="${this.link}">${this.linkTitle}</a>` : ``}
</span>
</div>`);
}
/**
* Create a notification.
*
* @return {node} The notification in node.
*/
createNotification(alt) {
return this.getHTMLPart(this.type)
}
/**
* Create a valid notification.
*
* @return {node} The notification in node.
*/
createValidNotification(alt) {
return this.getHTMLPart('valid');
}
/**
* Create an error notification.
*
* @return {node} The notification in node.
*/
createErrorNotification(alt) {
return this.getHTMLPart('error');
}
}
// let notification = new Notification({
// type: 'informations',
// content: 'content of my notification',
// link: 'test',
// linkTitle: ''
// });
There are no notes for this item.