Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

blur logic implemented on view.html.twig of Person by means of example

Browse Source
This commit is contained in:
Julie Lenaerts 2021-10-08 22:21:40 +02:00
parent b40ed48776
commit f09329daee
4 changed files with 57 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js
View File

@ -1,13 +1,19 @@
var infos = document.querySelectorAll("confidential");
var toggles = document.querySelectorAll("confidential-toggle");
var toggleBlur = function(e){
var toggleBlur = function(){
var isBlurred = true;
if(isBlurred === true){
var btn = e.target;
btn.previousElementSibling.classList.toggle("blur");
btn.classList.toggle("fa-eye");
btn.classList.toggle("fa-eye-slash");
}
}
var infos = document.getElementsByClassName("confidential");
for(var i=0; i < infos.length; i++){
infos[i].insertAdjacentHTML('beforeend', '<i class="fa fa-eye toggle" aria-hidden="true"></i>');
}
var toggles = document.getElementsByClassName("toggle");
for(var i=0; i < toggles.length; i++){
toggles[i].addEventListener("click", toggleBlur)
toggles[i].addEventListener("click", toggleBlur);
}

17
src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
View File

@ -12,7 +12,22 @@
{{ encore_entry_link_tags('mod_forkawesome') }}
{{ encore_entry_link_tags('mod_ckeditor5') }}
{{ encore_entry_link_tags('chill') }}
{% block css%}<!-- nothing added to css -->{% endblock %}
{% block css%}<!-- nothing added to css -->
<style>
.confidential{
display: flex;
}
.toggle{
margin-left: auto;
margin-right: 100px;
}
.blur {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
filter: blur(5px);
}
</style>
{% endblock %}
</head>
<body>

1
src/Bundle/ChillMainBundle/chill.webpack.config.js
View File

@ -59,6 +59,7 @@ module.exports = function(encore, entries)
encore.addEntry('mod_bootstrap', __dirname + '/Resources/public/module/bootstrap/index.js');
encore.addEntry('mod_ckeditor5', __dirname + '/Resources/public/module/ckeditor5/index.js');
encore.addEntry('mod_disablebuttons', __dirname + '/Resources/public/module/disable-buttons/index.js');
encore.addEntry('mod_blur', __dirname + '/Resources/public/module/blur/index.js');
encore.addEntry('mod_input_address', __dirname + '/Resources/public/vuejs/Address/mod_input_address_index.js');
// Vue entrypoints

14
src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig
View File

@ -93,6 +93,8 @@ This view should receive those arguments:
{%- endif -%}
{%- if chill_person.fields.country_of_birth == 'visible' -%}
<div class="confidential">
<div class="confidential-content blur">
<dt>{{ 'Country of birth'|trans }}&nbsp;:</dt>
<dd>{% apply spaceless %}
{% if person.countryOfBirth is not null %}
@ -101,6 +103,8 @@ This view should receive those arguments:
<span class="chill-no-data-statement">{{ 'Unknown country of birth'|trans }}</span>
{% endif %}
{% endapply %}</dd>
</div>
</div>
{%- endif -%}
</dl>
</figure>
@ -198,10 +202,14 @@ This view should receive those arguments:
{%- endif -%}
{%- if chill_person.fields.phonenumber == 'visible' -%}
<div class="confidential">
<div class="confidential-content blur">
<dl>
<dt>{{ 'Phonenumber'|trans }}&nbsp;:</dt>
<dd>{% if person.phonenumber is not empty %}<a href="tel:{{ person.phonenumber }}"><pre>{{ person.phonenumber|chill_format_phonenumber }}</pre></a>{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}{% endif %}</dd>
</dl>
</div>
</div>
{% endif %}
{%- if chill_person.fields.mobilenumber == 'visible' -%}
@ -262,3 +270,9 @@ This view should receive those arguments:
</div>
{% endblock %}
{% block js %}
{{ encore_entry_script_tags('mod_blur') }}
{% endblock js %}