form.blade.php 5.68 KB
<script>
    function translit(word){
        var answer = '';
        var converter = {
            'а': 'a',    'б': 'b',    'в': 'v',    'г': 'g',    'д': 'd',
            'е': 'e',    'ё': 'e',    'ж': 'zh',   'з': 'z',    'и': 'i',
            'й': 'y',    'к': 'k',    'л': 'l',    'м': 'm',    'н': 'n',
            'о': 'o',    'п': 'p',    'р': 'r',    'с': 's',    'т': 't',
            'у': 'u',    'ф': 'f',    'х': 'h',    'ц': 'c',    'ч': 'ch',
            'ш': 'sh',   'щ': 'sch',  'ь': '',     'ы': 'y',    'ъ': '',
            'э': 'e',    'ю': 'yu',   'я': 'ya',

            'А': 'A',    'Б': 'B',    'В': 'V',    'Г': 'G',    'Д': 'D',
            'Е': 'E',    'Ё': 'E',    'Ж': 'Zh',   'З': 'Z',    'И': 'I',
            'Й': 'Y',    'К': 'K',    'Л': 'L',    'М': 'M',    'Н': 'N',
            'О': 'O',    'П': 'P',    'Р': 'R',    'С': 'S',    'Т': 'T',
            'У': 'U',    'Ф': 'F',    'Х': 'H',    'Ц': 'C',    'Ч': 'Ch',
            'Ш': 'Sh',   'Щ': 'Sch',  'Ь': '',     'Ы': 'Y',    'Ъ': '',
            'Э': 'E',    'Ю': 'Yu',   'Я': 'Ya',   ' ': '-'
        };

        for (var i = 0; i < word.length; ++i ) {
            if (converter[word[i]] == undefined){
                answer += word[i];
            } else {
                answer += converter[word[i]];
            }
        }

        return answer;
    }

    window.addEventListener("DOMContentLoaded", (event) => {
        let title = document.querySelector('#title');
        let text = document.querySelector('#slug');

        title.addEventListener('input', function() {
            text.value = translit(this.value);
        });
    });

</script>

<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <label class="block text-sm">
        <span class="text-gray-700 dark:text-gray-400">Заголовой новости</span>
        <input name="title" id="title"
               class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
               placeholder="Заголовой новости" value="{{ old('title') ?? ((isset($new->title)) ? $new->title : '') }}"
        />
        @error('title')
        <span class="text-xs text-red-600 dark:text-red-400">
                      {{ $message }}
                </span>
        @enderror
    </label><br>

    <label class="block text-sm">
        <span class="text-gray-700 dark:text-gray-400">Код в URL-строке</span>
        <input name="slug" id="slug"
               class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
               placeholder="Код в URL-строке" value="{{ old('slug') ?? '' }}"
        />
        @error('slug')
        <span class="text-xs text-red-600 dark:text-red-400">
                  {{ $message }}
            </span>
        @enderror
    </label><br>

    <label class="block text-sm">
        <span class="text-gray-700 dark:text-gray-400">Текст</span>
        <textarea class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-textarea focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray  ckeditor" name="text" id="text" placeholder="Текст (html)" required
                  rows="10">{{ old('text') ?? $new->text ?? '' }}</textarea>
        @error('text')
        <span class="text-xs text-red-600 dark:text-red-400">
                  {{ $message }}
            </span>
        @enderror
    </label><br>

    <label class="block text-sm">
        <span class="text-gray-700 dark:text-gray-400">Картинка</span>
        <input type="file" class="block w-full mt-1 text-sm dark:border-gray-600
                                      dark:bg-gray-700 focus:border-purple-400
                                      focus:outline-none focus:shadow-outline-purple
                                      dark:text-gray-300 dark:focus:shadow-outline-gray
                                      form-input"
               id="image" name="image" accept="image/png, image/jpeg">
        @error('image')
        <span class="text-xs text-red-600 dark:text-red-400">
                  {{ $message }}
            </span>
        @enderror
        @isset($new->image)
            <img src="{{asset(Storage::url($new->image))}}" width="100px"/>
        @endisset

    </label><br>

    <div class="flex flex-col flex-wrap mb-4 space-y-4 md:flex-row md:items-end md:space-x-4">
        <div>
            <button type="submit" class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
                Сохранить
            </button>
            <a href="{{ route('admin.news_admin') }}"
               class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
               style="display: -webkit-inline-box; height: 30px!important;"
            >Назад</a>
        </div>
    </div>
</div>
<script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script>
    CKEDITOR.replace( 'text', {
        filebrowserUploadUrl: "{{route('ckeditor.image-upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'
    });
</script>