Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@ludoguenet
ludoguenet committed Mar 9, 2024
1 parent 55afa15 commit 9959efa
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 81 deletions.
5 changes: 2 additions & 3 deletions resources/views/components/nudge-search.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<div class="flex-1 px-4 flex items-center justify-center">
<div x-data="dropdownSearch({{ Js::from($nudges) }})" x-init="$watch('query', () => selectedNudgeIndex=null)" class="relative w-full">
<input x-model="query" x-on:click.outside="reset()" x-on:keyup.escape="reset()" x-on:keyup.down="selectNextNudge" x-on:keyup.up="selectPreviousNudge" x-on:keyup.enter="goToUrl()" id="combobox" type="text" class="w-full rounded-md border-0 bg-white py-1.5 pl-3 pr-12 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-green-400 sm:text-sm sm:leading-6" role="combobox" aria-controls="options" aria-expanded="false">
<input x-model="query" x-ref="queryInput" x-on:click.outside="reset()" x-on:keyup.escape="reset()" x-on:keyup.down="selectNextNudge" x-on:keyup.up="selectPreviousNudge" x-on:keyup.enter="goToUrl()" id="combobox" type="text" class="w-full rounded-md border-0 bg-white py-1.5 pl-3 pr-12 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-green-400 sm:text-sm sm:leading-6" role="combobox" aria-controls="options" aria-expanded="false">
<button type="button" class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-gray-400">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 3.75H6A2.25 2.25 0 0 0 3.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0 1 20.25 6v1.5m0 9V18A2.25 2.25 0 0 1 18 20.25h-1.5m-9 0H6A2.25 2.25 0 0 1 3.75 18v-1.5M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
Expand Down Expand Up @@ -52,12 +52,12 @@
reset() {
this.selectedNudgeIndex = null;
this.query = "";
this.$refs.queryInput.blur();
},
selectNextNudge() {
if (this.filteredNudges.length === 0) return;
if (this.selectedNudgeIndex === null) {
this.selectedNudgeIndex = 0;
} else {
Expand Down Expand Up @@ -98,7 +98,6 @@
if (currentNudge == null) return;
window.location = `/nudges/${currentNudge.slug}`;
},
Expand Down
179 changes: 101 additions & 78 deletions resources/views/nudges/create.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<x-app-layout>
@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/tokyo-night-dark.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/tokyo-night-dark.min.css">
@endpush

<x-slot name="header">
Expand Down Expand Up @@ -46,24 +46,34 @@
<div class="flex items-center">
<button @click.stop="parseToHeadingMarkdown()" type="button" class="-m-2.5 inline-flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500">
<span class="sr-only">Insert heading markdown</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
<path d="M2.007,12.526l3.156,0l0,7.363l3.155,0l0,-7.363l3.156,0l0,-3.156l-9.467,0m6.311,-5.259l0,3.155l5.26,0l0,12.623l3.156,0l0,-12.623l5.259,0l0,-3.155l-13.675,0Z" style="fill-rule: nonzero;"></path>
</svg>
</button>
</div>

<div class="flex items-center">
<button @click.stop="parseToItalicMarkdown()" type="button" class="-m-2.5 inline-flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500">
<span class="sr-only">Insert bold markdown</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
<path d="M8.617,3.658l0,3.575l2.633,0l-2.075,9.534l-3.325,0l0,3.575l9.533,0l0,-3.575l-2.633,0l2.075,-9.534l3.325,0l0,-3.575l-9.533,0Z" style="fill-rule: nonzero;"></path>
</svg>
</button>
</div>

<div class="flex items-center">
<button @click.stop="parseToBoldMarkdown()" type="button" class="-m-2.5 inline-flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500">
<span class="sr-only">Insert bold markdown</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M13.35,17.401l-4.201,0l0,-3.601l4.201,0c0.997,0 1.801,0.805 1.801,1.801c0,0.996 -0.804,1.8 -1.801,1.8m-4.201,-10.802l3.601,0c0.996,0 1.801,0.804 1.801,1.8c0,0.996 -0.805,1.801 -1.801,1.801l-3.601,0m6.722,1.548c1.164,-0.816 1.98,-2.149 1.98,-3.349c0,-2.712 -2.1,-4.801 -4.801,-4.801l-7.502,0l0,16.804l8.45,0c2.521,0 4.454,-2.04 4.454,-4.549c0,-1.825 -1.033,-3.385 -2.581,-4.105Z" style="fill-rule: nonzero;"></path>
</svg>
</button>
</div>
<div class="flex items-center">
<button @click.stop="parseToLinkMarkdown()" type="button" class="-m-2.5 inline-flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500">
<span class="sr-only">Insert link markdown</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
<path d="M 10.5858,13.4142C 10.9763,13.8047 10.9763,14.4379 10.5858,14.8284C 10.1952,15.2189 9.56207,15.2189 9.17154,14.8284C 7.21892,12.8758 7.21892,9.70995 9.17154,7.75733L 9.17157,7.75736L 12.707,4.2219C 14.6596,2.26928 17.8255,2.26929 19.7781,4.2219C 21.7307,6.17452 21.7307,9.34034 19.7781,11.293L 18.2925,12.7785C 18.3008,11.9583 18.1659,11.1368 17.8876,10.355L 18.3639,9.87865C 19.5355,8.70708 19.5355,6.80759 18.3639,5.63602C 17.1923,4.46445 15.2929,4.46445 14.1213,5.63602L 10.5858,9.17155C 9.41419,10.3431 9.41419,12.2426 10.5858,13.4142 Z M 13.4142,9.17155C 13.8047,8.78103 14.4379,8.78103 14.8284,9.17155C 16.781,11.1242 16.781,14.29 14.8284,16.2426L 14.8284,16.2426L 11.2929,19.7782C 9.34026,21.7308 6.17444,21.7308 4.22182,19.7782C 2.26921,17.8255 2.2692,14.6597 4.22182,12.7071L 5.70744,11.2215C 5.69913,12.0417 5.8341,12.8631 6.11234,13.645L 5.63601,14.1213C 4.46444,15.2929 4.46444,17.1924 5.63601,18.3639C 6.80758,19.5355 8.70708,19.5355 9.87865,18.3639L 13.4142,14.8284C 14.5858,13.6568 14.5858,11.7573 13.4142,10.5858C 13.0237,10.1952 13.0237,9.56207 13.4142,9.17155 Z "></path>
</svg>

</button>
Expand Down Expand Up @@ -103,13 +113,13 @@
<x-primary-button>{{ __('Submit') }}</x-primary-button>

@isset($nudge)
@if (session('status') === 'nudge-edited')
<p x-data="{ show: true }" x-show="show" x-transition x-init="setTimeout(() => show = false, 4000)" class="text-sm text-gray-600">{{ __('Nudge edited! Awaiting validation. Almost there again!') }}</p>
@endif
@if (session('status') === 'nudge-edited')
<p x-data="{ show: true }" x-show="show" x-transition x-init="setTimeout(() => show = false, 4000)" class="text-sm text-gray-600">{{ __('Nudge edited! Awaiting validation. Almost there again!') }}</p>
@endif
@else
@if (session('status') === 'nudge-created')
<p x-data="{ show: true }" x-show="show" x-transition x-init="setTimeout(() => show = false, 4000)" class="text-sm text-gray-600">{{ __('Nudge ready! Awaiting validation. Almost there!') }}</p>
@endif
@if (session('status') === 'nudge-created')
<p x-data="{ show: true }" x-show="show" x-transition x-init="setTimeout(() => show = false, 4000)" class="text-sm text-gray-600">{{ __('Nudge ready! Awaiting validation. Almost there!') }}</p>
@endif
@endisset
</div>
</form>
Expand All @@ -121,81 +131,94 @@
</div>

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('tabs', () => ({
currentTab: 1,
resetHighlight(previewElement) {
delete previewElement.dataset.highlighted;
},
previewCode() {
const preview = document.querySelector('.language-php');
const textArea = document.querySelector('#code');
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('tabs', () => ({
currentTab: 1,
this.resetHighlight(preview);
resetHighlight(previewElement) {
delete previewElement.dataset.highlighted;
},
preview.innerHTML = textArea.value;
hljs.highlightElement(preview);
},
previewCode() {
const preview = document.querySelector('.language-php');
const textArea = document.querySelector('#code');
showFirstTab() {
this.currentTab = 1;
},
this.resetHighlight(preview);
showSecondTab() {
this.currentTab = 2;
preview.innerHTML = textArea.value;
hljs.highlightElement(preview);
},
this.previewCode();
}
}));
});
showFirstTab() {
this.currentTab = 1;
},
const parseToHeadingMarkdown = () => {
const textarea = document.getElementById('content');
const startSelection = textarea.selectionStart;
const endSelection = textarea.selectionEnd;
const textareaValue = textarea.value;
const selectedText = textareaValue.substring(startSelection, endSelection);
const parsedText = textareaValue.substring(0, startSelection) + '## ' + selectedText + textareaValue.substring(endSelection);
textarea.value = parsedText;
textarea.focus();
}
const parseToBoldMarkdown = () => {
const textarea = document.getElementById('content');
const startSelection = textarea.selectionStart;
const endSelection = textarea.selectionEnd;
const textareaValue = textarea.value;
const selectedText = textareaValue.substring(startSelection, endSelection);
const parsedText = textareaValue.substring(0, startSelection) + '**' + selectedText + '**' + textareaValue.substring(endSelection);
showSecondTab() {
this.currentTab = 2;
this.previewCode();
}
}));
});
const parseToHeadingMarkdown = () => {
const textarea = document.getElementById('content');
const startSelection = textarea.selectionStart;
const endSelection = textarea.selectionEnd;
const textareaValue = textarea.value;
const selectedText = textareaValue.substring(startSelection, endSelection);
const parsedText = textareaValue.substring(0, startSelection) + '## ' + selectedText + textareaValue.substring(endSelection);
textarea.value = parsedText;
textarea.focus();
}
const parseToBoldMarkdown = () => {
const textarea = document.getElementById('content');
const startSelection = textarea.selectionStart;
const endSelection = textarea.selectionEnd;
const textareaValue = textarea.value;
const selectedText = textareaValue.substring(startSelection, endSelection);
const parsedText = textareaValue.substring(0, startSelection) + '**' + selectedText + '**' + textareaValue.substring(endSelection);
textarea.value = parsedText;
textarea.focus();
}
const parseToItalicMarkdown = () => {
const textarea = document.getElementById('content');
const startSelection = textarea.selectionStart;
const endSelection = textarea.selectionEnd;
const textareaValue = textarea.value;
const selectedText = textareaValue.substring(startSelection, endSelection);
const parsedText = textareaValue.substring(0, startSelection) + '*' + selectedText + '*' + textareaValue.substring(endSelection);
textarea.value = parsedText;
textarea.focus();
}
const parseToLinkMarkdown = () => {
const textarea = document.getElementById('content');
const startSelection = textarea.selectionStart;
const endSelection = textarea.selectionEnd;
const textareaValue = textarea.value;
const selectedText = textareaValue.substring(startSelection, endSelection);
const linkURL = prompt('Submit your link please.');
if (linkURL) {
const parsedText = textareaValue.substring(0, startSelection) + '[' + selectedText + '](' + linkURL + ')' + textareaValue.substring(endSelection);
textarea.value = parsedText;
textarea.focus();
}
const parseToLinkMarkdown = () => {
const textarea = document.getElementById('content');
const startSelection = textarea.selectionStart;
const endSelection = textarea.selectionEnd;
const textareaValue = textarea.value;
const selectedText = textareaValue.substring(startSelection, endSelection);
const linkURL = prompt('Submit your link please.');
if (linkURL) {
const parsedText = textareaValue.substring(0, startSelection) + '[' + selectedText + '](' + linkURL + ')' + textareaValue.substring(endSelection);
textarea.value = parsedText;
}
textarea.focus();
}
textarea.focus();
}
</script>
</script>
@endpush
</x-app-layout>

0 comments on commit 9959efa

Please sign in to comment.