mirror of
https://github.com/HDInnovations/UNIT3D-Community-Edition.git
synced 2026-04-30 07:20:25 -05:00
update: move all swal popups inside script tags
In preparation for using the CSP version of AlpineJS.
This commit is contained in:
Roardom
@@ -1,42 +1,4 @@
|
||||
<div
|
||||
class="bbcode-input"
|
||||
x-data="{
|
||||
insert(openTag, closeTag) {
|
||||
input = $refs.bbcode;
|
||||
start = input.selectionStart;
|
||||
end = input.selectionEnd;
|
||||
input.value =
|
||||
input.value.substring(0, start) +
|
||||
openTag +
|
||||
input.value.substring(start, end) +
|
||||
closeTag +
|
||||
input.value.substring(end);
|
||||
input.dispatchEvent(new Event('input'));
|
||||
input.focus();
|
||||
if (openTag.charAt(openTag.length - 2) === '=') {
|
||||
input.setSelectionRange(
|
||||
start + openTag.length - 1,
|
||||
start + openTag.length - 1
|
||||
);
|
||||
} else if (start == end) {
|
||||
input.setSelectionRange(
|
||||
start + openTag.length,
|
||||
end + openTag.length
|
||||
);
|
||||
} else {
|
||||
input.setSelectionRange(
|
||||
start,
|
||||
end + openTag.length + closeTag.length
|
||||
);
|
||||
}
|
||||
},
|
||||
showButtons: false,
|
||||
bbcodePreviewHeight: null,
|
||||
isPreviewEnabled: @entangle('isPreviewEnabled'),
|
||||
isOverInput: false,
|
||||
previousActiveElement: document.activeElement,
|
||||
}"
|
||||
>
|
||||
<div class="bbcode-input" x-data="bbcodeInput">
|
||||
<p class="bbcode-input__tabs">
|
||||
<input
|
||||
class="bbcode-input__tab-input"
|
||||
@@ -65,29 +27,21 @@
|
||||
<button
|
||||
type="button"
|
||||
class="form__button form__button--text"
|
||||
x-on:click="showButtons = ! showButtons"
|
||||
x-on:click="toggleButtonVisibility"
|
||||
>
|
||||
BBCode
|
||||
</button>
|
||||
</p>
|
||||
<menu class="bbcode-input__icon-bar" x-cloak x-show="showButtons">
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('[b]', '[/b]')"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="insertBold">
|
||||
<abbr title="Bold">
|
||||
<i class="{{ config('other.font-awesome') }} fa-bold"></i>
|
||||
</abbr>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('[i]', '[/i]')"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="insertItalic">
|
||||
<abbr title="Italics">
|
||||
<i class="{{ config('other.font-awesome') }} fa-italic"></i>
|
||||
</abbr>
|
||||
@@ -97,7 +51,7 @@
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('[u]', '[/u]')"
|
||||
x-on:click="insertUnderline"
|
||||
>
|
||||
<abbr title="Underline">
|
||||
<i class="{{ config('other.font-awesome') }} fa-underline"></i>
|
||||
@@ -108,7 +62,7 @@
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('[s]', '[/s]')"
|
||||
x-on:click="insertStrikethrough"
|
||||
>
|
||||
<abbr title="Strikethrough">
|
||||
<i class="{{ config('other.font-awesome') }} fa-strikethrough"></i>
|
||||
@@ -117,33 +71,21 @@
|
||||
</li>
|
||||
<hr class="bbcode-input__icon-separator" />
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('[img=350]', '[/img]')"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="InsertImage">
|
||||
<abbr title="Insert Image">
|
||||
<i class="{{ config('other.font-awesome') }} fa-image"></i>
|
||||
</abbr>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('[video="youtube"]', '[/video]')"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="insertYoutube">
|
||||
<abbr title="Insert YouTube">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</abbr>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('[url]', '[/url]')"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="insertUrl">
|
||||
<abbr title="Link">
|
||||
<i class="{{ config('other.font-awesome') }} fa-link"></i>
|
||||
</abbr>
|
||||
@@ -154,7 +96,7 @@
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('\n[list]\n[*]', '\n[/list]\n')"
|
||||
x-on:click="insertUnorderedList"
|
||||
>
|
||||
<abbr title="Unordered List">
|
||||
<i class="{{ config('other.font-awesome') }} fa-list"></i>
|
||||
@@ -165,7 +107,7 @@
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('\n[list=1]\n[*]', '\n[/list]\n')"
|
||||
x-on:click="insertOrderedList"
|
||||
>
|
||||
<abbr title="Ordered List">
|
||||
<i class="{{ config('other.font-awesome') }} fa-list-ol"></i>
|
||||
@@ -174,22 +116,14 @@
|
||||
</li>
|
||||
<hr class="bbcode-input__icon-separator" />
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('[color=]', '[/color]')"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="insertColor">
|
||||
<abbr title="Font Color">
|
||||
<i class="{{ config('other.font-awesome') }} fa-palette"></i>
|
||||
</abbr>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('[size=]', '[/size]')"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="insertSize">
|
||||
<abbr title="Font Size">
|
||||
<i class="{{ config('other.font-awesome') }} fa-text-size"></i>
|
||||
</abbr>
|
||||
@@ -199,40 +133,28 @@
|
||||
<button
|
||||
type="button"
|
||||
class="form__button form__button--text"
|
||||
x-on:click="insert('[font=]', '[/font]')"
|
||||
x-on:click="insertFont"
|
||||
>
|
||||
<abbr title="Font Family">Font</abbr>
|
||||
</button>
|
||||
</li>
|
||||
<hr class="bbcode-input__icon-separator" />
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('\n[left]\n', '\n[/left]\n')"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="insertLeft">
|
||||
<abbr title="Align left">
|
||||
<i class="{{ config('other.font-awesome') }} fa-align-left"></i>
|
||||
</abbr>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('\n[center]\n', '\n[/center]\n')"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="insertCenter">
|
||||
<abbr title="Align center">
|
||||
<i class="{{ config('other.font-awesome') }} fa-align-center"></i>
|
||||
</abbr>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('\n[right]\n', '\n[/right]\n')"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="insertRight">
|
||||
<abbr title="Align right">
|
||||
<i class="{{ config('other.font-awesome') }} fa-align-right"></i>
|
||||
</abbr>
|
||||
@@ -240,84 +162,49 @@
|
||||
</li>
|
||||
<hr class="bbcode-input__icon-separator" />
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('[quote]', '[/quote]')"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="insertQuote">
|
||||
<abbr title="Quote">
|
||||
<i class="{{ config('other.font-awesome') }} fa-quote-right"></i>
|
||||
</abbr>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('[code]', '[/code]')"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="insertCode">
|
||||
<abbr title="Code">
|
||||
<i class="{{ config('other.font-awesome') }} fa-code"></i>
|
||||
</abbr>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('[spoiler]', '[/spoiler]')"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="insertSpoiler">
|
||||
<abbr title="Spoiler">
|
||||
<i class="{{ config('other.font-awesome') }} fa-eye-slash"></i>
|
||||
</abbr>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('[note]', '[/note]')"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="insertNote">
|
||||
<abbr title="Note">
|
||||
<i class="{{ config('other.font-awesome') }} fa-sticky-note"></i>
|
||||
</abbr>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('[alert]', '[/alert]')"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="insertAlert">
|
||||
<abbr title="Alert">
|
||||
<i class="{{ config('other.font-awesome') }} fa-file-exclamation"></i>
|
||||
</abbr>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="insert('[table]\n[tr]\n[td]', '[/td]\n[/tr]\n[/table]')"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="insertTable">
|
||||
<abbr title="Table">
|
||||
<i class="{{ config('other.font-awesome') }} fa-table"></i>
|
||||
</abbr>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="form__standard-icon-button"
|
||||
x-on:click="
|
||||
Swal.fire({
|
||||
title: 'Emoji Picker',
|
||||
html: 'If using MacOS, press Ctrl + Cmd + Space bar<br>If using Windows or Linux, press Windows logo key + .',
|
||||
icon: 'info',
|
||||
showConfirmButton: true,
|
||||
})
|
||||
"
|
||||
>
|
||||
<button type="button" class="form__standard-icon-button" x-on:click="InsertEmoji">
|
||||
<abbr
|
||||
title="If using MacOS, press Ctrl + Cmd + Space bar
If using Windows or Linux, press Windows logo key + ."
|
||||
>
|
||||
@@ -330,36 +217,156 @@
|
||||
<div class="bbcode-input__preview bbcode-rendered" x-show="isPreviewEnabled">
|
||||
@joypixels($contentHtml)
|
||||
</div>
|
||||
<p class="form__group" x-show="! isPreviewEnabled">
|
||||
<p class="form__group" x-show="isPreviewDisabled">
|
||||
<textarea
|
||||
id="bbcode-{{ $name }}"
|
||||
name="{{ $name }}"
|
||||
class="form__textarea bbcode-input__input"
|
||||
placeholder=" "
|
||||
x-ref="bbcode"
|
||||
x-on:mouseup="
|
||||
if (isOverInput) {
|
||||
bbcodePreviewHeight = $el.style.height;
|
||||
}
|
||||
"
|
||||
x-on:mousedown="previousActiveElement = document.activeElement;"
|
||||
x-on:mouseover="isOverInput = true"
|
||||
x-on:mouseleave="isOverInput = false"
|
||||
x-bind="textarea"
|
||||
wire:model.defer="contentBbcode"
|
||||
x-bind:style="{
|
||||
height: bbcodePreviewHeight !== null && bbcodePreviewHeight,
|
||||
transition:
|
||||
previousActiveElement === $el
|
||||
? 'none'
|
||||
: 'border-color 600ms cubic-bezier(0.25, 0.8, 0.25, 1), height 600ms cubic-bezier(0.25, 0.8, 0.25, 1)',
|
||||
}"
|
||||
@if ($isRequired)
|
||||
required
|
||||
@endif
|
||||
@required($isRequired)
|
||||
></textarea>
|
||||
<label class="form__label form__label--floating" for="bbcode-{{ $name }}">
|
||||
{{ $label }}
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
<script nonce="{{ HDVinnie\SecureHeaders\SecureHeaders::nonce('script') }}">
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('bbcodeInput', () => ({
|
||||
showButtons: false,
|
||||
bbcodePreviewHeight: null,
|
||||
isPreviewEnabled: @entangle('isPreviewEnabled'),
|
||||
isOverInput: false,
|
||||
previousActiveElement: document.activeElement,
|
||||
toggleButtonVisibility() {
|
||||
this.showButtons = !this.showButtons;
|
||||
},
|
||||
isPreviewDisabled() {
|
||||
return !this.isPreviewEnabled;
|
||||
},
|
||||
textarea: {
|
||||
['x-ref']: 'bbcode',
|
||||
['x-on:mouseup']() {
|
||||
if (this.isOverInput) {
|
||||
this.bbcodePreviewHeight = this.$el.style.height;
|
||||
}
|
||||
},
|
||||
['x-on:mousedown']() {
|
||||
this.previousActiveElement = document.activeElement;
|
||||
},
|
||||
['x-on:mouseover']() {
|
||||
this.isOverInput = true;
|
||||
},
|
||||
['x-on:mouseleave']() {
|
||||
this.isOverInput = false;
|
||||
},
|
||||
['x-bind:style']() {
|
||||
return {
|
||||
height: this.bbcodePreviewHeight !== null && this.bbcodePreviewHeight,
|
||||
transition:
|
||||
this.previousActiveElement === this.$el
|
||||
? 'none'
|
||||
: 'border-color 600ms cubic-bezier(0.25, 0.8, 0.25, 1), height 600ms cubic-bezier(0.25, 0.8, 0.25, 1)',
|
||||
};
|
||||
},
|
||||
},
|
||||
insertBold() {
|
||||
this.insert('[b]', '[/b]');
|
||||
},
|
||||
insertItalic() {
|
||||
this.insert('[i]', '[/i]');
|
||||
},
|
||||
insertUnderline() {
|
||||
this.insert('[u]', '[/u]');
|
||||
},
|
||||
insertStrikethrough() {
|
||||
this.insert('[s]', '[/s]');
|
||||
},
|
||||
insertImage() {
|
||||
this.insert('[img=350]', '[/img]');
|
||||
},
|
||||
insertYoutube() {
|
||||
this.insert('[video="youtube"]', '[/video]');
|
||||
},
|
||||
insertUrl() {
|
||||
this.insert('[url]', '[/url]');
|
||||
},
|
||||
insertUnorderedList() {
|
||||
this.insert('\n[list]\n[*]', '\n[/list]\n');
|
||||
},
|
||||
insertOrderedList() {
|
||||
this.insert('\n[list=1]\n[*]', '\n[/list]\n');
|
||||
},
|
||||
insertColor() {
|
||||
this.insert('[color=]', '[/color]');
|
||||
},
|
||||
insertsize() {
|
||||
this.insert('[size=]', '[/size]');
|
||||
},
|
||||
insertFont() {
|
||||
this.insert('[font=]', '[/font]');
|
||||
},
|
||||
insertLeft() {
|
||||
this.insert('\n[left]\n', '\n[/left]\n');
|
||||
},
|
||||
insertCenter() {
|
||||
this.insert('\n[center]\n', '\n[/center]\n');
|
||||
},
|
||||
insertRight() {
|
||||
this.insert('\n[right]\n', '\n[/right]\n');
|
||||
},
|
||||
insertQuote() {
|
||||
this.insert('[quote]', '[/quote]');
|
||||
},
|
||||
insertCode() {
|
||||
this.insert('[code]', '[/code]');
|
||||
},
|
||||
insertSpoiler() {
|
||||
this.insert('[spoiler]', '[/spoiler]');
|
||||
},
|
||||
insertNote() {
|
||||
this.insert('[note]', '[/note]');
|
||||
},
|
||||
insertAlert() {
|
||||
this.insert('[alert]', '[/alert]');
|
||||
},
|
||||
insertTable() {
|
||||
this.insert('[table]\n[tr]\n[td]', '[/td]\n[/tr]\n[/table]');
|
||||
},
|
||||
insertEmoji() {
|
||||
this.Swal.fire({
|
||||
title: 'Emoji Picker',
|
||||
html: 'If using macOS, press Ctrl + Cmd + Space bar<br>If using Windows or Linux, press Windows logo key + .',
|
||||
icon: 'info',
|
||||
showConfirmButton: true,
|
||||
});
|
||||
},
|
||||
insert(openTag, closeTag) {
|
||||
input = this.$refs.bbcode;
|
||||
start = input.selectionStart;
|
||||
end = input.selectionEnd;
|
||||
input.value =
|
||||
input.value.substring(0, start) +
|
||||
openTag +
|
||||
input.value.substring(start, end) +
|
||||
closeTag +
|
||||
input.value.substring(end);
|
||||
input.dispatchEvent(new Event('input'));
|
||||
input.focus();
|
||||
if (openTag.charAt(openTag.length - 2) === '=') {
|
||||
input.setSelectionRange(
|
||||
start + openTag.length - 1,
|
||||
start + openTag.length - 1,
|
||||
);
|
||||
} else if (start == end) {
|
||||
input.setSelectionRange(start + openTag.length, end + openTag.length);
|
||||
} else {
|
||||
input.setSelectionRange(start, end + openTag.length + closeTag.length);
|
||||
}
|
||||
},
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user