solarai/resources/views/admin/board/create.blade.php

@extends('layouts.admin')

@section('content')
    <form id="writeForm" method="post" accept-charset="utf-8" enctype="multipart/form-data" action="{{ route('cms.board.store', null, false) }}" onsubmit="return false;">
    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
    <input type="hidden" name="mode" value="{{ $data->mode }}" />
    <input type="hidden" name="code" value="{{ $data->code }}" />
    <input type="hidden" name="board_id" value="{{ $data->board_id }}" />
    <input type="hidden" name="uid" value="{{ $data->uid }}" />
    <input type="hidden" name="category" value="{{ $data->category }}" />
    <div class="card card-default">
        <div class="card-body">
            <div class="form-group">
                <label for="input-subject">제목</label>
                <input type="text" class="form-control" name="subject" id="input-subject" required value="{{ $data->subject }}" />
            </div>
            <div class="form-group">
                <label for="input-content">내용</label>
                <div id="editor"></div>
                <textarea class="form-control autosize" name="content" id="input-content" rows="8" placeholder="내용을 입력해 주세요." style="display:none;">{{ $data->content }}</textarea>
            </div>
            @if($data->code == 'news')
            <div class="form-group">
                <label for="input-image">목록 이미지</label>
                <div class="custom-file">
                    <input type="file" name="image" id="input-image" class="custom-file-input" accept="image/gif,image/jpeg,image/png">
                    <label class="custom-file-label" for="input-image">이미지 선택</label>
                </div>
            </div>
            @if ($data->image)
            <div class="form-group">
                <div class="form-group-box list-image-del">
                    <i class="fas fa-trash" title="삭제"></i>
                    <a href="/image/{{ $data->image }}" data-fancybox="gallery-list"><span class="prev-image">{{ $data->asset->orgin_name }}</span></a>
                </div>
            </div>
            @endif
            @endif
            <div class="form-group" style="position:relative;">
                <label for="form-control" id="fileBtn">첨부파일</label>
                <span class="fileSize mobileNone">(<em id="fileSize">0</em>)</span>
                <div id="dropzone" class="frame-wrap clearfix">
                    <div id="dropzoneDesc" class="dropzone-desc">여기를 클릭하거나 파일을 마우스로 드래그하여 업로드할 수 있습니다.</div>
                    <input type="file" name="selectFiles[]" id="selectFiles" class="dropzone-file" multiple="multiple" />
                    <div id="dropzoneList" class="dropzone-list">
                        <ul id="previewFiles" class="preview-files">
                            @if ($data->assets)
                                @foreach ($data->assets as $i => $asset)
                                    <li class="old-file" data-uid="{{ $asset->uid }}" data-size="{{ $asset->asset->size }}">
                                        <i class="fas fa-trash" title="삭제"></i>
                                        @if($asset->asset->width && $asset->asset->height)
                                            <a href="{{ route('download', [$asset->uid], false) }}" class="file-item" data-fancybox="gallery">{{ $asset->asset->orgin_name }} ({{ human_filesize($asset->asset->size) }})</a>
                                        @else
                                            <a href="{{ route('image', [$asset->uid], false) }}" class="file-item">{{ $asset->asset->orgin_name }} ({{ human_filesize($asset->asset->size) }})</a>
                                        @endif
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="notice">옵션 설정</label>
                <div class="form-group-box">
                    <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" id="notice" class="custom-control-input" name="notice" value="1" {{ $data->notice ? 'checked="checked "' : '' }}/>
                        <label for="notice" class="custom-control-label">공지글</label>
                    </div>
                </div>
            </div>
            @if($data->uid)
            <div class="form-group">
                <label for="view_count">조회수</label>
                <input type="text" class="form-control" id="view_count" disabled="disabled" value="{{ $data->view_count }}" />
            </div>
            <div class="form-group">
                <label for="input-name">작성자</label>
                <input type="text" class="form-control" name="name" id="input-name" disabled="disabled" value="{{ $data->name }}" />
            </div>
            <div class="form-group">
                <label for="created_at">작성일시</label>
                <input type="text" class="form-control" id="created_at" disabled="disabled" value="{{ $data->created_at }}" />
            </div>
            @endif
        </div>
        <div class="card-footer">
            <div class="row">
                <span>
                    <button type="submit" class="btn btn-success">@if($data->mode == 'modify') 수정 @else 등록 @endif</button>
                    @if($data->mode == 'modify')
                        <a href="{{ route('cms.board.delete', null, false) }}" class="btn btn-secondary ml-2 btn-delete">삭제</a>
                    @endif
                </span>
                <span><a href="javascript:;" onclick="gotoList();" class="btn btn-primary btn-list ml-2"> 목록 </a></span>
            </div>
        </div>
    </div>
    </form>
@stop

@push('styles')
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-bs4.min.css">
@endpush

@push('scripts')
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-bs4.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/summernote@0.8.20/dist/lang/summernote-ko-KR.min.js"></script>
    <script type="text/javascript">
        function gotoList() {
            window.location.href = '{{ route('cms.board.list', [$data->code], false) }}';
        }

        var fileIndex = 0; // 파일 번호
        var totalSize = 0; // 전체 파일용량
        var fileList = []; // 파일 목록
        var sizeList = []; // 파일용량 목록

        // 드래그앤드롭 파일 첨부
        function fileDropDown() {
            var dropzone = $("#dropzone");
            dropzone.on('dragenter', function (e) {
                e.stopPropagation();
                e.preventDefault();
                dropzone.css({'background-color': '#FFEFEE', 'border': '1px dashed #999'});
            });
            dropzone.on('dragleave', function (e) {
                e.stopPropagation();
                e.preventDefault();
                dropzone.css({'background-color': '#F3F3F3', 'border': '1px solid #e5e5e5'});
            });
            dropzone.on('dragover', function (e) {
                e.stopPropagation();
                e.preventDefault();
                dropzone.css({'background-color': '#FFEFEE', 'border': '1px dashed #999'});
            });
            dropzone.on('drop', function (e) {
                e.preventDefault();
                dropzone.css({'background-color': '#F3F3F3', 'border': '1px solid #e5e5e5'});

                var files = e.originalEvent.dataTransfer.files;
                if (files != null) {
                    if (files.length < 1) {
                        console.log("파일이 선택되지 않았습니다.");
                        return false;
                    } else {
                        selectFiles(files);
                    }
                } else {
                    console.log("ERROR!!");
                }
            });
        }

        function toggleFileBox() {
            if ($('#previewFiles li').length > 0) {
                $('.dropzone-desc').hide();
                $('.dropzone-list').show();
            } else {
                $('.dropzone-desc').show();
                $('.dropzone-list').hide();
            }
        }

        function setFileSize() {
            var strSize = getFileSize(totalSize);

            $('#fileSize').html(strSize);
        }

        // 첨부파일 추가
        function addFile(fSource, fName, fSize, isImage) {
            var appendHtml = $('<li class="new-file" data-index="'+ fileIndex +'"><i class="fas fa-trash"></i></li>');

            if (isImage !== -1) {
                appendHtml.append('<a href="#" class="file-item" data-fancybox="gallery">'+ fName +' ('+ getFileSize(fSize) +')</a>');
                $('#previewFiles').append(appendHtml);

                var reader = new FileReader();
                reader.onload = function(e) {
                    appendHtml.find('a').attr('href', e.target.result);
                };
                reader.readAsDataURL(fSource);
            } else {
                appendHtml.append('<span class="file-item">'+ fName +' ('+ getFileSize(fSize) +')</span>');
                $('#previewFiles').append(appendHtml);
            }

            totalSize += fSize;

            sizeList[fileIndex] = fSize;
            fileList[fileIndex] = fSource;

            fileIndex++;

            setFileSize();
            toggleFileBox();
        }

        // 첨부파일 션택 완료
        function selectFiles(files) {
            if (files == null) {
                console.log('파일이 선택되지 않았습니다.');
                return false;
            }

            for (var i = 0; i < files.length; i++) {
                var fileName = files[i].name;
                var fileNameArr = fileName.split('\.');
                var fileExtension = fileNameArr[fileNameArr.length - 1];
                var fileSize = files[i].size;

                if (fileSize <= 0) {
                    alert('비어 있는 파일입니다.');
                    return;
                } else if ($.inArray(fileExtension, extExecutes.split(',')) !== -1) {
                    alert('업로드가 허용되지 않는 파일입니다.');
                } else {
                    addFile(files[i], fileName, fileSize, $.inArray(fileExtension, extImages.split(',')));
                }
            }
        }

        $(document).ready(function() {
            fileDropDown();

            $('#selectFiles').bind('change', function() {
                selectFiles(this.files);
                $(this).val('');
            });

            $('#fileBtn').click(function() {
                $('#selectFiles').click();
            });

            if ($('.old-file').length) {
                $('.old-file').each(function() {
                    totalSize += parseInt($(this).data('size'));
                });
            }

            setFileSize();
            toggleFileBox();

            // 드래그존 클릭시 파일 선택
            $('#dropzone').on('click', function(e) {
                var targetID = e.target.id;
                console.log(e.target);
                if (targetID == 'dropzone' || targetID == 'dropzoneDesc' || targetID == 'dropzoneList' || targetID == 'previewFiles') {
                    $('#selectFiles').click();
                }
            });

            // 파일 삭제
            $('.list-image-del').on('click', '.fa-trash', function(e) {
                var objItem = $(this).parent();

                objItem.remove();

                $('#writeForm').append('<input type="hidden" name="delImage" value="1" />');
            });

            // 파일 삭제
            $('#previewFiles').on('click', '.fa-trash', function(e) {
                var objItem = $(this).parent();

                objItem.remove();

                if (objItem.hasClass('old-file')) {
                    $('#writeForm').append('<input type="hidden" name="delFiles[]" value="'+ objItem.data('uid') +'" />');
                    totalSize -= parseInt(objItem.data('size'));
                } else {
                    var fIndex = objItem.data('index');

                    totalSize -= parseInt(sizeList[fIndex]);

                    delete fileList[fIndex];
                    delete sizeList[fIndex];
                }

                setFileSize();
                toggleFileBox();
            });

            $('#editor').html($('textarea[name=content]').val());
            var $editor = $('#editor').summernote({
                height: 300,
                placeholder: '내용을 입력해 주세요.',
                dialogsInBody: true,
                dialogsFade: true,
                codeviewFilter: false,
                codeviewIframeFilter: true,
                lang: 'ko-KR',
                toolbar: [
                    ['fontsize', ['fontsize']],
                    ['font', ['bold', 'italic', 'underline']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph', 'height']],
                    ['insert', ['table', 'picture', 'video', 'link', 'hr']],
                    ['font', ['undo', 'redo', 'clear']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ],
                callbacks: {
                    onImageUpload: function (files) {
                        for (var i = 0; i < files.length; i++) {
                            //if (i > 10) {
                            //    alert('Only 10 images can be registered.');
                            //    return;
                            //}
                            sendEditorImage(this, files[i]);
                        }
                    },
                    onPaste: function (e) {
                        var clipboardData = e.originalEvent.clipboardData;
                        if (clipboardData && clipboardData.items && clipboardData.items.length) {
                            var item = clipboardData.items[0];
                            if (item.kind === 'file' && item.type.indexOf('image/') !== -1) {
                                e.preventDefault();
                            }
                        }
                    }
                }
            });

            if ($('input[name=subject]').length) {
                $('input[name=subject]').focus();
            } else if ($('#editor').length) {
                $('#editor').summernote('focus');
            } else if ($('textarea[name=content]').length) {
                $('textarea[name=content]').focus();
            }

            $('#writeForm').submit(function (e) {
                e.preventDefault();

                if ($('#input-subject').length) {
                    if (!$('#input-subject').checkEmpty('제목을 입력해 주세요.')) return false;
                }

                if ($('#editor').length) {
                    $('#input-content').val($('#editor').summernote('code'));
                    if ($('#editor').summernote('isEmpty')) {
                        alert('내용을 입력해 주세요.');
                        $('#editor').summernote('focus');
                        return false;
                    }
                } else if (!$('#input-content').checkEmpty('내용을 입력해 주세요.')) {
                    return false;
                }

                var formData = new FormData(this);
                var uploadFiles = Object.keys(fileList);
                for (var i = 0; i < uploadFiles.length; i++) {
                    formData.append('files[]', fileList[uploadFiles[i]]);
                }

                $.ajax({
                    url   : $(this).attr('action'),
                    type  : 'POST',
                    data : formData,
                    enctype : 'multipart/form-data',
                    processData : false,
                    contentType : false,
                    dataType : 'json',
                    cache : false,
                    async : false,
                    success: function(result) {
                        if (result.code == 'success') {
                            if ($(this).find("input[name='uid']").val()) {
                                window.location.reload();
                            } else {
                                gotoList();
                            }
                        } else {
                            alert(result.message);
                        }
                    }
                });
            });

            $('.btn-delete').click(function() {
                if(confirm('게시글을 삭제하시겠습니까?')) {
                    $.post($(this).attr('href'), {'uid': $('#writeForm input[name=uid]').val() }, function (result) {
                        if (result.code = 'success') {
                            gotoList();
                        } else {
                            alert(result.message);
                        }
                    }).fail(function(result) {
                        var data = result.responseJSON;
                        if (!data.success) {
                            alert(data.message);
                        }
                    });
                }

                return false;
            });
        });
    </script>
@endpush