silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Add simple wrapper content for condition

This commit is contained in:
philipp lang 2024-04-25 22:37:46 +02:00
parent 36b195b78a
commit 38ac195924
1 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
resources/js/components/form/Editor.vue
View File

@ -107,8 +107,20 @@ class ConditionTune {
wrap(blockContent) { wrap(blockContent) {
this.wrapper = document.createElement('div'); this.wrapper = document.createElement('div');
this.wrapper.appendChild(blockContent);
var tooltip = document.createElement('div');
tooltip.setAttribute('data-tooltip', '');
var content = document.createElement('div');
content.setAttribute('data-content', '');
content.appendChild(blockContent);
this.wrapper.appendChild(tooltip);
this.wrapper.appendChild(content);
this.styleWrapper(); this.styleWrapper();
return this.wrapper; return this.wrapper;
} }
@ -118,18 +130,13 @@ class ConditionTune {
styleWrapper() { styleWrapper() {
if (this.hasData()) { if (this.hasData()) {
this.wrapper.className = 'relative mt-6 mb-6 p-1 border border-blue-200 rounded'; this.wrapper.querySelector('[data-content]').className = 'p-1 border border-blue-200 rounded';
if (!this.wrapper.querySelector('.condition-description')) { this.wrapper.querySelector('[data-tooltip]').className = 'inline-block ml-2 px-2 py-1 items-center text-xs leading-none bg-blue-200 text-blue-900 rounded-t-lg';
var tooltip = document.createElement('div'); this.wrapper.querySelector('[data-tooltip]').innerHTML = 'Bedingung';
tooltip.className = 'condition-description absolute top-0 left-0 -mt-4 ml-1 h-4 flex px-2 items-center text-xs leading-none bg-blue-200 text-blue-900 rounded-t-lg';
tooltip.innerHTML = 'Bedingung';
this.wrapper.appendChild(tooltip);
}
} else { } else {
this.wrapper.className = ''; this.wrapper.querySelector('[data-content]').className = '';
if (this.wrapper.querySelector('.condition-description')) { this.wrapper.querySelector('[data-tooltip]').className = '';
this.wrapper.removeChild(this.wrapper.querySelector('.condition-description')); this.wrapper.querySelector('[data-tooltip]').innerHTML = '';
}
} }
} }