mirror of
https://github.com/HDInnovations/UNIT3D-Community-Edition.git
synced 2026-04-20 00:11:57 -05:00
05ea224fd6
Form input labels rely on the :place-holder-shown css property to float the label whenever the placeholder disappears (i.e. any time there's text inside) that way a user can click outside of the form input and the label will stay floating. Unfortunately, it seems that because only `placeholder=""` is used with the placeholder attribute being empty, Chrome interprets this as no place-holder being shown even if no text has been entered in the form input, triggering the label to float automatically. To fix this, we must add a space to every placeholder attribute (`placeholder=" "`)
215 lines
9.3 KiB
PHP
215 lines
9.3 KiB
PHP
|
|
<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,
|
|
}"
|
|
>
|
|
<p class="bbcode-input__tabs">
|
|
<input class="bbcode-input__tab-input" type="radio" id="{{ $name }}-bbcode-preview-disabled" name="isPreviewEnabled" value="0" wire:model="isPreviewEnabled" />
|
|
<label class="bbcode-input__tab-label" for="{{ $name }}-bbcode-preview-disabled">Write</label>
|
|
<input class="bbcode-input__tab-input" type="radio" id="{{ $name }}-bbcode-preview-enabled" name="isPreviewEnabled" value="1" wire:model="isPreviewEnabled" />
|
|
<label class="bbcode-input__tab-label" for="{{ $name }}-bbcode-preview-enabled">{{ __('common.preview') }}</label>
|
|
</p>
|
|
<p class="bbcode-input__icon-bar-toggle">
|
|
<button type="button" class="form__button form__button--text" x-on:click="showButtons = ! showButtons">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]')">
|
|
<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]')">
|
|
<abbr title="Italics">
|
|
<i class="{{ config('other.font-awesome') }} fa-italic"></i>
|
|
</abbr>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="form__standard-icon-button" x-on:click="insert('[u]', '[/u]')">
|
|
<abbr title="Underline">
|
|
<i class="{{ config('other.font-awesome') }} fa-underline"></i>
|
|
</abbr>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="form__standard-icon-button" x-on:click="insert('[s]', '[/s]')">
|
|
<abbr title="Strikethrough">
|
|
<i class="{{ config('other.font-awesome') }} fa-strikethrough"></i>
|
|
</abbr>
|
|
</button>
|
|
</li>
|
|
<hr class="bbcode-input__icon-separator">
|
|
<li>
|
|
<button type="button" class="form__standard-icon-button" x-on:click="insert('[img=350]', '[/img]')">
|
|
<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]')">
|
|
<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]')">
|
|
<abbr title="Link">
|
|
<i class="{{ config('other.font-awesome') }} fa-link"></i>
|
|
</abbr>
|
|
</button>
|
|
</li>
|
|
<hr class="bbcode-input__icon-separator">
|
|
<li>
|
|
<button type="button" class="form__standard-icon-button" x-on:click="insert('\n[list]\n[*]', '\n[/list]\n')">
|
|
<abbr title="Unordered List">
|
|
<i class="{{ config('other.font-awesome') }} fa-list"></i>
|
|
</abbr>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="form__standard-icon-button" x-on:click="insert('\n[list=1]\n[*]', '\n[/list]\n')">
|
|
<abbr title="Ordered List">
|
|
<i class="{{ config('other.font-awesome') }} fa-list-ol"></i>
|
|
</abbr>
|
|
</button>
|
|
</li>
|
|
<hr class="bbcode-input__icon-separator">
|
|
<li>
|
|
<button type="button" class="form__standard-icon-button" x-on:click="insert('[color=]', '[/color]')">
|
|
<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]')">
|
|
<abbr title="Font Size">
|
|
<i class="{{ config('other.font-awesome') }} fa-text-size"></i>
|
|
</abbr>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="form__button form__button--text" x-on:click="insert('[font=]', '[/font]')">
|
|
<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')">
|
|
<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')">
|
|
<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')">
|
|
<abbr title="Align right">
|
|
<i class="{{ config('other.font-awesome') }} fa-align-right"></i>
|
|
</abbr>
|
|
</button>
|
|
</li>
|
|
<hr class="bbcode-input__icon-separator">
|
|
<li>
|
|
<button type="button" class="form__standard-icon-button" x-on:click="insert('[quote]', '[/quote]')">
|
|
<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]')">
|
|
<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]')">
|
|
<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]')">
|
|
<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]')">
|
|
<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]')">
|
|
<abbr title="Table">
|
|
<i class="{{ config('other.font-awesome') }} fa-table"></i>
|
|
</abbr>
|
|
</button>
|
|
</li>
|
|
</menu>
|
|
<div class="bbcode-input__tab-pane">
|
|
@if ($isPreviewEnabled)
|
|
<div class="bbcode-input__preview bbcode-rendered">
|
|
@joypixels($contentHtml)
|
|
</div>
|
|
<input type="hidden" name="{{ $name }}" wire:model.defer="contentBbcode">
|
|
@else
|
|
<p class="form__group">
|
|
<textarea
|
|
id="bbcode-{{ $name }}"
|
|
name="{{ $name }}"
|
|
class="form__textarea bbcode-input__input"
|
|
placeholder=" "
|
|
x-ref="bbcode"
|
|
wire:model.defer="contentBbcode"
|
|
@if ($isRequired)
|
|
required
|
|
@endif
|
|
></textarea>
|
|
<label class="form__label form__label--floating" for="{{ $name }}">
|
|
{{ $label }}
|
|
</label>
|
|
</p>
|
|
@endif
|
|
</div>
|
|
</div> |