mirror of https://github.com/logos-co/open-law.git
parent
0946a73129
commit
0666a29de6
File diff suppressed because one or more lines are too long
|
@ -18,7 +18,7 @@
|
||||||
<label for="label" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" >Label</label >
|
<label for="label" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" >Label</label >
|
||||||
<input type="text" name="label" id="label" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Name" required />
|
<input type="text" name="label" id="label" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Name" required />
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-6">
|
<div class="multiple-input-block mb-6">
|
||||||
<label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
<label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||||
Tags
|
Tags
|
||||||
</label>
|
</label>
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="multiple-input-block">
|
||||||
<label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
<label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||||
Tags
|
Tags
|
||||||
</label>
|
</label>
|
||||||
|
|
|
@ -90,7 +90,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-6 pt-0 space-y-6">
|
<div class="multiple-input-block p-6 pt-0 space-y-6">
|
||||||
<div class="w-full max-w-6xl mx-auto rounded-xl bg-gray-50 dark:bg-gray-600 shadow-lg text-white-900">
|
<div class="w-full max-w-6xl mx-auto rounded-xl bg-gray-50 dark:bg-gray-600 shadow-lg text-white-900">
|
||||||
<div class="overflow-hidden rounded-md bg-gray-50 [&>*]:dark:bg-gray-600 text-black [&>*]:!border-none [&>*]:!stroke-black dark:text-white dark:[&>*]:!stroke-white">
|
<div class="overflow-hidden rounded-md bg-gray-50 [&>*]:dark:bg-gray-600 text-black [&>*]:!border-none [&>*]:!stroke-black dark:text-white dark:[&>*]:!stroke-white">
|
||||||
<div id="interpretation-text" class="quill-editor dark:text-white h-64"></div>
|
<div id="interpretation-text" class="quill-editor dark:text-white h-64"></div>
|
||||||
|
|
|
@ -29,14 +29,17 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="p-1">
|
<div class="p-1">
|
||||||
<!-- prettier-ignore -->
|
<!-- prettier-ignore -->
|
||||||
<form {% if sub_collection %}
|
<form
|
||||||
|
{% if sub_collection %}
|
||||||
action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
|
action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
|
||||||
{% else %}
|
{% else %}
|
||||||
action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
|
action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
|
||||||
{% endif %}
|
{% endif %}
|
||||||
method="post" class="prevent-submit-on-enter flex flex-col bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
|
method="post"
|
||||||
|
class="prevent-submit-on-enter flex flex-col bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700"
|
||||||
|
>
|
||||||
{{ form_hidden_tag() }}
|
{{ form_hidden_tag() }}
|
||||||
<div class="relative z-0 w-full mb-6 group">
|
<div class="relative z-0 w-full group">
|
||||||
<div class="mb-2">
|
<div class="mb-2">
|
||||||
<label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
<label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||||
Comment
|
Comment
|
||||||
|
@ -52,7 +55,7 @@
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mb-6">
|
<div class="multiple-input-block mb-6">
|
||||||
<label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
<label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||||
Tags
|
Tags
|
||||||
</label>
|
</label>
|
||||||
|
@ -199,23 +202,26 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="accordion-collapse-body-{{loop.index}}" class="hidden" aria-labelledby="accordion-collapse-heading-1">
|
<div id="accordion-collapse-body-{{loop.index}}" class="hidden" aria-labelledby="accordion-collapse-heading-1">
|
||||||
<div class="p-5 border-t border-gray-200 dark:border-gray-700 dark:bg-gray-900">
|
<div class="p-5 border-t border-gray-200 dark:border-gray-700 dark:bg-gray-900">
|
||||||
<form {% if sub_collection %}
|
<form
|
||||||
action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
|
{% if sub_collection %}
|
||||||
{% else %}
|
action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
|
||||||
action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
|
{% else %}
|
||||||
{% endif %}
|
action="{{ url_for('book.create_comment', book_id=book.id, collection_id=collection.id,section_id=section.id,interpretation_id=interpretation.id) }}"
|
||||||
method="post" class="flex flex-col bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
|
{% endif %}
|
||||||
{{ form_hidden_tag() }}
|
method="post"
|
||||||
<input type="hidden" name="parent_id" id="parent_id" value="{{comment.id}}" />
|
class="prevent-submit-on-enter flex flex-col bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700"
|
||||||
<div class="relative z-0 w-full mb-6 group">
|
>
|
||||||
<!-- prettier-ignore -->
|
{{ form_hidden_tag() }}
|
||||||
<input autocomplete="off" maxlength="256" type="text" name="text" id="floating_email" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
|
<input type="hidden" name="parent_id" id="parent_id" value="{{comment.id}}" />
|
||||||
<!-- prettier-ignore -->
|
<div class="relative z-0 w-full mb-6 group">
|
||||||
<label for="floating_email" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6" >Comment</label >
|
|
||||||
</div>
|
|
||||||
<!-- prettier-ignore -->
|
<!-- prettier-ignore -->
|
||||||
<button type="submit" class="ml-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> Leave comment </button>
|
<input autocomplete="off" maxlength="256" type="text" name="text" id="floating_email" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
|
||||||
</form>
|
<!-- prettier-ignore -->
|
||||||
|
<label for="floating_email" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6" >Comment</label >
|
||||||
|
</div>
|
||||||
|
<!-- prettier-ignore -->
|
||||||
|
<button type="submit" class="ml-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> Leave comment </button>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</dl>
|
</dl>
|
||||||
|
|
|
@ -51,7 +51,7 @@
|
||||||
{{book.about if not book.about==None}}
|
{{book.about if not book.about==None}}
|
||||||
</textarea>
|
</textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-6">
|
<div class="multiple-input-block mb-6">
|
||||||
<label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
<label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||||
Tags
|
Tags
|
||||||
</label>
|
</label>
|
||||||
|
|
|
@ -18,113 +18,118 @@ const handleClickOnTag = (
|
||||||
};
|
};
|
||||||
|
|
||||||
const multipleInputJs = () => {
|
const multipleInputJs = () => {
|
||||||
const form = document.querySelector('.prevent-submit-on-enter');
|
const forms = document.querySelectorAll('.prevent-submit-on-enter');
|
||||||
if (!form) {
|
if (!forms.length) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
form.addEventListener('keypress', (e: any) => {
|
forms.forEach(form => {
|
||||||
if (e.keyCode === 13) {
|
form.addEventListener('keypress', (e: any) => {
|
||||||
e.preventDefault();
|
if (e.keyCode === 13) {
|
||||||
}
|
e.preventDefault();
|
||||||
});
|
}
|
||||||
|
|
||||||
// prettier-ignore
|
|
||||||
const multipleInput: any = document.querySelector('.multiple-input');
|
|
||||||
const tagsToSubmitInputClassName = multipleInput.getAttribute(
|
|
||||||
'data-save-results-to',
|
|
||||||
);
|
|
||||||
if (!tagsToSubmitInputClassName) {
|
|
||||||
console.error(
|
|
||||||
'Please set data-save-results-to attribute to .multiple-input element',
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const tagsToSubmitInput: HTMLInputElement = document.querySelector(
|
|
||||||
'.' + tagsToSubmitInputClassName,
|
|
||||||
);
|
|
||||||
|
|
||||||
const wordsBlock: HTMLDivElement = document.querySelector(
|
|
||||||
'.multiple-input-items',
|
|
||||||
);
|
|
||||||
const wordDivs = wordsBlock.querySelectorAll('.multiple-input-word');
|
|
||||||
let addedWords: string[] = [];
|
|
||||||
wordDivs.forEach(el => {
|
|
||||||
addedWords.push(el.innerHTML);
|
|
||||||
el.addEventListener('click', () => {
|
|
||||||
addedWords = handleClickOnTag(el, addedWords, tagsToSubmitInput);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
tagsToSubmitInput.value = addedWords.join();
|
const multipleInputBlock = document.querySelectorAll('.multiple-input-block');
|
||||||
|
|
||||||
multipleInput.addEventListener('input', () => {
|
multipleInputBlock.forEach((multipleInputBlock: any) => {
|
||||||
let inputValue = multipleInput.value.trim();
|
// prettier-ignore
|
||||||
if (inputValue.length > 32) {
|
const multipleInput: any = multipleInputBlock.querySelector('.multiple-input');
|
||||||
multipleInput.value = inputValue.slice(0, 32);
|
const tagsToSubmitInputClassName = multipleInput.getAttribute(
|
||||||
|
'data-save-results-to',
|
||||||
|
);
|
||||||
|
if (!tagsToSubmitInputClassName) {
|
||||||
|
console.error(
|
||||||
|
'Please set data-save-results-to attribute to .multiple-input element',
|
||||||
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
multipleInput.addEventListener('keyup', (event: any) => {
|
const tagsToSubmitInput: HTMLInputElement =
|
||||||
if (event.keyCode === 13 || event.keyCode === 188) {
|
multipleInputBlock.querySelector('.' + tagsToSubmitInputClassName);
|
||||||
if (!multipleInput.value) {
|
|
||||||
return;
|
const wordsBlock: HTMLDivElement = multipleInputBlock.querySelector(
|
||||||
}
|
'.multiple-input-items',
|
||||||
|
);
|
||||||
|
const wordDivs = wordsBlock.querySelectorAll('.multiple-input-word');
|
||||||
|
let addedWords: string[] = [];
|
||||||
|
wordDivs.forEach(el => {
|
||||||
|
addedWords.push(el.innerHTML);
|
||||||
|
el.addEventListener('click', () => {
|
||||||
|
addedWords = handleClickOnTag(el, addedWords, tagsToSubmitInput);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
tagsToSubmitInput.value = addedWords.join();
|
||||||
|
|
||||||
|
multipleInput.addEventListener('input', () => {
|
||||||
let inputValue = multipleInput.value.trim();
|
let inputValue = multipleInput.value.trim();
|
||||||
if (!inputValue) {
|
if (inputValue.length > 32) {
|
||||||
return;
|
|
||||||
} else if (inputValue.length > 32) {
|
|
||||||
multipleInput.value = inputValue.slice(0, 32);
|
multipleInput.value = inputValue.slice(0, 32);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// prettier-ignore
|
multipleInput.addEventListener('keyup', (event: any) => {
|
||||||
inputValue = inputValue.charAt(0).toUpperCase() + inputValue.substr(1).toLowerCase();
|
if (event.keyCode === 13 || event.keyCode === 188) {
|
||||||
if (
|
if (!multipleInput.value) {
|
||||||
inputValue.substring(inputValue.length - 1, inputValue.length) == ','
|
return;
|
||||||
) {
|
}
|
||||||
inputValue = inputValue.substring(0, inputValue.length - 1);
|
let inputValue = multipleInput.value.trim();
|
||||||
event.target.value = inputValue;
|
if (!inputValue) {
|
||||||
}
|
return;
|
||||||
inputValue = inputValue.replaceAll(',', '');
|
} else if (inputValue.length > 32) {
|
||||||
|
multipleInput.value = inputValue.slice(0, 32);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (addedWords.includes(inputValue)) {
|
// prettier-ignore
|
||||||
return;
|
inputValue = inputValue.charAt(0).toUpperCase() + inputValue.substr(1).toLowerCase();
|
||||||
|
if (
|
||||||
|
inputValue.substring(inputValue.length - 1, inputValue.length) == ','
|
||||||
|
) {
|
||||||
|
inputValue = inputValue.substring(0, inputValue.length - 1);
|
||||||
|
event.target.value = inputValue;
|
||||||
|
}
|
||||||
|
inputValue = inputValue.replaceAll(',', '');
|
||||||
|
|
||||||
|
if (addedWords.includes(inputValue)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const wordDiv = document.createElement('div');
|
||||||
|
// prettier-ignore
|
||||||
|
wordDiv.className = 'cursor-pointer multiple-input-word bg-sky-300 hover:bg-sky-400 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white rounded text-center py-1/2 px-2';
|
||||||
|
wordDiv.innerHTML = inputValue;
|
||||||
|
addedWords.push(inputValue);
|
||||||
|
wordDiv.addEventListener('click', () => {
|
||||||
|
addedWords = handleClickOnTag(wordDiv, addedWords, tagsToSubmitInput);
|
||||||
|
});
|
||||||
|
|
||||||
|
wordsBlock.appendChild(wordDiv);
|
||||||
|
multipleInput.value = '';
|
||||||
|
tagsToSubmitInput.value = addedWords.join();
|
||||||
}
|
}
|
||||||
|
|
||||||
const wordDiv = document.createElement('div');
|
// Edit last tag on click "backspace"
|
||||||
// prettier-ignore
|
// Will be removed after demo
|
||||||
wordDiv.className = 'cursor-pointer multiple-input-word bg-sky-300 hover:bg-sky-400 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white rounded text-center py-1/2 px-2';
|
// TODO Remove after demo
|
||||||
wordDiv.innerHTML = inputValue;
|
// else if (event.keyCode === 8 && multipleInput.value.length === 0) {
|
||||||
addedWords.push(inputValue);
|
// const addedWordsDivs = document.querySelectorAll('.multiple-input-word');
|
||||||
wordDiv.addEventListener('click', () => {
|
// const lastAdded = addedWordsDivs[addedWordsDivs.length - 1];
|
||||||
addedWords = handleClickOnTag(wordDiv, addedWords, tagsToSubmitInput);
|
// if (!lastAdded) {
|
||||||
});
|
// return;
|
||||||
|
// }
|
||||||
|
// const word = lastAdded.innerHTML;
|
||||||
|
// if (word || word != '') {
|
||||||
|
// multipleInput.value = word;
|
||||||
|
// lastAdded.remove();
|
||||||
|
|
||||||
wordsBlock.appendChild(wordDiv);
|
// addedWords.slice(0, addedWords.length - 1);
|
||||||
multipleInput.value = '';
|
// tagsToSubmitInput.value = addedWords.join();
|
||||||
tagsToSubmitInput.value = addedWords.join();
|
// }
|
||||||
}
|
// }
|
||||||
|
});
|
||||||
// Edit last tag on click "backspace"
|
|
||||||
// Will be removed after demo
|
|
||||||
// TODO Remove after demo
|
|
||||||
// else if (event.keyCode === 8 && multipleInput.value.length === 0) {
|
|
||||||
// const addedWordsDivs = document.querySelectorAll('.multiple-input-word');
|
|
||||||
// const lastAdded = addedWordsDivs[addedWordsDivs.length - 1];
|
|
||||||
// if (!lastAdded) {
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// const word = lastAdded.innerHTML;
|
|
||||||
// if (word || word != '') {
|
|
||||||
// multipleInput.value = word;
|
|
||||||
// lastAdded.remove();
|
|
||||||
|
|
||||||
// addedWords.slice(0, addedWords.length - 1);
|
|
||||||
// tagsToSubmitInput.value = addedWords.join();
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue