Ronbun/ui/html/pages/create.tmpl

{{define "body"}}
    <main>
        <h1>New page</h1>
        <div class="edit-footer">
            <div>
                <form data-naked action='/files/upload' method='POST' class="media-form">
                    <div>
                        <input type="file" multiple="multiple" id="fileUpload" value="Upload file" />
                    </div>
                    <div>
                        <button data-small type='submit' data-size="20" id="uploadMediaBtn" >
                            Upload file
                        </button>
                    </div>
                </form>
            </div>
            <div id="upload-message"></div>
        </div>
        <div class="edit-page">
        <form action='/page/create' method='POST'>
            <input type='hidden' id="csrf_token" name='csrf_token' value='{{.CSRFToken}}'>

            <label for="bodyError">Content:</label>
            <textarea id="body" name='body' {{with .Form.FieldErrors.body}} aria-invalid aria-describedby="bodyError" {{end}}>{{.Form.Body}}</textarea>
            {{with .Form.FieldErrors.body}}
                <span id="summaryError">{{.}}</span>
            {{end}}
            {{template "mediaselector" .}}


            <label for="name">Title:</label>
            <input autofocus type='text' id="name" name='name' value="{{.Form.Name}}" {{with .Form.FieldErrors.name}} aria-invalid
            aria-describedby="nameError" {{end}}>
            {{with .Form.FieldErrors.name}}
                <span id="nameError">{{.}}</span>
            {{end}}

            <label for="summary">Summary:</label>
            <input type='text' id="summary" name='summary' value="{{.Form.Summary}}" {{with .Form.FieldErrors.summary}}
            aria-invalid aria-describedby="summaryError" {{end}}>
            {{with .Form.FieldErrors.summary}}
                <span id="summaryError">{{.}}</span>
            {{end}}


            <div class="grouped">
                <div>
                    {{ $host := .Form.Host }}
                    <label for="host">Parent Page:</label>
                    <select id="host" name="host" {{with .Form.FieldErrors.host}} aria-invalid aria-describedby="hostError" {{end}}>
                        <option value="0">Home</option>
                        {{range $index, $page := .Pages}}
                            <option value="{{$page.ID}}"
                                {{if eq $page.ID $host}}selected{{end}}
                            >{{$page.Name}}</option>
                        {{end}}
                    </select>
                    {{with .Form.FieldErrors.host}}
                        <span id="hostError">{{.}}</span>
                    {{end}}

                </div>
                <div>
                    <label data- for="category">Category:</label>
                    <select name="category" id="category" {{with .Form.FieldErrors.category}} aria-invalid
                    aria-describedby="categoryError" {{end}}>
                        <option value="">-</option>
                        <option value="projects" {{if (eq .Form.Category "projects" )}}selected{{end}}>Projects</option>
                        <option value="knowledge" {{if (eq .Form.Category "knowledge" )}}selected{{end}}>Knowledge</option>
                        <option value="portfolio" {{if (eq .Form.Category "portfolio" )}}selected{{end}}>Portfolio</option>
                        <option value="journal" {{if (eq .Form.Category "journal" )}}selected{{end}}>Journal</option>
                        <option value="about" {{if (eq .Form.Category "about" )}}selected{{end}}>About</option>
                        <option value="hire" {{if (eq .Form.Category "hire" )}}selected{{end}}>Hire</option>
                        <option value="none" {{if (eq .Form.Category "none" )}}selected{{end}}>None</option>
                    </select>
                    {{with .Form.FieldErrors.category}}
                        <span id="categoryError">{{.}}</span>
                    {{end}}
                </div>
                <div>
                    <label for="private">Visibility</label>
                    <select id="private" name="private"
                        {{with .Form.FieldErrors.private}} aria-invalid aria-describedby="privateError" {{end}}>
                            <option value="0" {{if (eq .Form.Private 0 )}}selected{{end}}>Public</option>
                            <option value="1" {{if (eq .Form.Private 1 )}}selected{{end}}>Unlisted</option>
                            <option value="2" {{if (eq .Form.Private 2 )}}selected{{end}}>Private</option>
                    </select>
                    {{with .Form.FieldErrors.private}}
                        <span id="privateError">{{.}}</span>
                    {{end}}
                </div>
                <div>
                    <label for="created">First published:</label>
                    <input type='datetime-local' id="created" name='created' value="{{.Form.Created}}" {{with .Form.FieldErrors.created}}
                    aria-invalid aria-describedby="summaryError" {{end}}>
                    {{with .Form.FieldErrors.created}}
                    <span id="createdError">{{.}}</span>
                    {{end}}
                </div>
            </div>

            <fieldset>
                <legend>Options</legend>
                <input id="feed" type="checkbox" name="feed" {{if (eq .Form.Feed true)}}checked{{end}}>
                <label for="feed">In RSS Feed</label>
                <input id="menu" type="checkbox" name="menu" {{if (eq .Form.Menu true)}}checked{{end}}>
                <label for="menu">Show Sub Pages Menu</label>
            </fieldset>

            <div>
                <input type='submit' value='Publish page' data-size="20">
            </div>
        </form>
        <article class="page-preview {{.Form.Category}}"></article>
        </div>
        </div>
    </main>
    <script>

    const formated = document.querySelector('article');
    const textarea = document.querySelector('textarea');
    const uploadMediaInput = document.querySelector('#fileUpload')
    const uploadMediaButton = document.querySelector('#uploadMediaBtn')
    const categorySelector = document.querySelector("#category")
    const previewArea = document.querySelector(".page-preview")
    const messageDiv = document.querySelector('#upload-message')

    document.addEventListener('keyup', function () {
        setTimeout(() => {
            triggerDemo()
        }, 300);
    });

    textarea.addEventListener('keyup', triggerDemo())

    let savedCursor = 0;
    textarea.addEventListener('blur', function () {
        savedCursor = this.selectionStart;
    });

    // Restore cursor position when clicking back in
    textarea.addEventListener('focus', function () {
        setTimeout(() => {
            this.setSelectionRange(savedCursor, savedCursor);
        }, 0);
    });

    uploadMediaInput.addEventListener('change', function (e) {
      if(e.target.files.length > 0) {
        uploadMediaButton.disabled = false
      } else {
        uploadMediaButton.disabled = true
      }
    });

    uploadMediaButton.addEventListener('click', function (e) {
      e.preventDefault()

      const files = uploadMediaInput.files
      if (files.length === 0) return

      const formData = new FormData()
      for (let file of files) {
        formData.append('files', file)
      }

      const csrfToken = document.querySelector('#csrf_token').value
      formData.append('csrf_token', csrfToken)

      fetch('/files/upload', {
        method: 'POST',
        body: formData
      })
      .then(async response => {
        if (response.ok) {
          const result = await response.json()
          const filenames = result.filenames
          messageDiv.textContent = `Upload successful! Files: ${filenames.join(', ')}`

          // Automatically insert each uploaded file into the textarea
          filenames.forEach(filename => {
            const extension = filename.substring(filename.lastIndexOf('.')).toLowerCase()
            insertMedia(filename, extension, filenames.length > 1 ? false : true)
          })

          uploadMediaInput.value = ''
          uploadMediaButton.disabled = true
        } else {
          const errorText = await response.text()
          messageDiv.textContent = `Upload failed! ${errorText}`
        }

        setTimeout(() => {
          messageDiv.textContent = ''
        }, 3000)
      })
      .catch(error => {
        messageDiv.textContent = `Upload failed! ${error.message}`

        setTimeout(() => {
          messageDiv.textContent = ''
        }, 3000)
      })
    });

    categorySelector.addEventListener('change', function (e) {
      previewArea.className = `page-preview ${e.target.value}`
    })
    </script>

{{end}}