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

This commit is contained in:
2021-10-08 22:21:40 +02:00
parent b40ed48776
commit f09329daee
4 changed files with 57 additions and 21 deletions

View File

@@ -1,13 +1,19 @@
var infos = document.querySelectorAll("confidential");
var toggles = document.querySelectorAll("confidential-toggle");
var toggleBlur = function(e){
var btn = e.target;
btn.previousElementSibling.classList.toggle("blur");
btn.classList.toggle("fa-eye");
btn.classList.toggle("fa-eye-slash");
var toggleBlur = function(){
var isBlurred = true;
if(isBlurred === true){
}
}
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);
}

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>

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