| 1 | <% content_for :meta_head do %> |
| 2 | <title><%= @meta_title %></title> |
| 3 | <meta name="description" content="<%= @meta_description %>"> |
| 4 | <meta property="og:title" content="<%= @meta_title %>" /> |
| 5 | <meta property="og:description" content="<%= @meta_description %>" /> |
| 6 | <meta property="og:url" content="<%= @meta_url %>" /> |
| 7 | <% end %> |
| 8 | <main> |
| 9 | <div class="row g-5"> |
| 10 | <div class="col-md-12"> |
| 11 | <h1><%= @page_title %></h1> |
| 12 | <%= render "shared/flash_message", object: flash %> |
| 13 | </div> |
| 14 | </div> |
| 15 | <div class="row g-5"> |
| 16 | <div class="col-sm-11"> |
| 17 | <%= form_with model: @chord, url: { action: "add" }, html: { :class=> "row g-3" } do |form| %> |
| 18 | <div class="col-md-6"> |
| 19 | <%= form.text_field :title, class: "form-control song-title", autocomplete: "off", placeholder: t('add_chord_placeholder_title') %> |
| 20 | <div class="valid-feedback mt-3 mb-3 add-song"> |
| 21 | Cannot find the song? <a href="javascript:void(0)" class="add-song-button" data-bs-toggle="modal" data-bs-target="#add-song-modal"><i class="bi bi-file-plus"></i> Click to add it</a> |
| 22 | </div> |
| 23 | <div class="list-group song-list" style="display:none"></div> |
| 24 | <%= form.hidden_field :song_id, class: 'song-id' %> |
| 25 | <%= form.hidden_field :user_id, value: @user.id if @user.present? %> |
| 26 | </div> |
| 27 | <div class="col-md-6"> |
| 28 | <p class="song-songwriters"><%= @chord_artists %></p> |
| 29 | </div> |
| 30 | <div class="col-12"> |
| 31 | <label for="inputAddress2" class="form-label"><%= t('add_chord_label_chord') %></label> |
| 32 | <%= form.hidden_field :chord, class: 'chord-content' %> |
| 33 | <div id="editor" style="height: 20rem; width: 100%;"> |
| 34 | <%= raw(@chord.chord) %> |
| 35 | </div> |
| 36 | </div> |
| 37 | <div class="col-12"> |
| 38 | <%= |
| 39 | "<div class='alert alert-danger' role='alert'> |
| 40 | #{t('add_chord_warning', href_login: link_to(t('login'), login_path(redirect_to: guitar_chord_add_path)), href: link_to('@nowhereman', profile_path('nowhereman')))} |
| 41 | </div>".html_safe unless user_signed_in? |
| 42 | %> |
| 43 | <%= form.submit(t('add_chord_share'), class: "btn btn-primary") %> |
| 44 | </div> |
| 45 | <% end %> |
| 46 | </div> |
| 47 | <div class="col-sm-1"> |
| 48 | <div class="position-sticky" style="top: 1rem;"> |
| 49 | <div class="text-center mt-4" data-bs-toggle="modal" data-bs-target="#how-to-modal"> |
| 50 | <a href="javascript:void(0)"> |
| 51 | <i class='bi bi-journal-check' style='font-size: 1.5rem;' title="<%= t('add_chord_how_to') %>"></i> |
| 52 | </a> |
| 53 | </div> |
| 54 | </div> |
| 55 | </div> |
| 56 | </div> |
| 57 | <div class="modal fade" id="how-to-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> |
| 58 | <div class="modal-dialog"> |
| 59 | <div class="modal-content"> |
| 60 | <div class="modal-header"> |
| 61 | <h5 class="modal-title" id="exampleModalLabel"><%= t('add_chord_how_to') %></h5> |
| 62 | <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
| 63 | </div> |
| 64 | <div class="modal-body"> |
| 65 | <%= t('add_chord_how_to_content') %> |
| 66 | </div> |
| 67 | </div> |
| 68 | </div> |
| 69 | </div> |
| 70 | <div class="modal fade" id="add-song-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> |
| 71 | <div class="modal-dialog"> |
| 72 | <div class="modal-content"> |
| 73 | <div class="modal-header"> |
| 74 | <h5 class="modal-title" id="exampleModalLabel"><%= t('add_chord_how_to') %></h5> |
| 75 | <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
| 76 | </div> |
| 77 | <div class="modal-body"> |
| 78 | <%= t('add_chord_how_to_content') %> |
| 79 | </div> |
| 80 | </div> |
| 81 | </div> |
| 82 | </div> |
| 83 | <%= render 'shared/partial_breadcrumbs' do %> |
| 84 | <li class="breadcrumb-item"> |
| 85 | <%= link_to(t('add_chord_title'), guitar_chord_add_path) %> |
| 86 | </li> |
| 87 | <% end %> |
| 88 | </main> |
| 89 | <script> |
| 90 | $.getScript("https://cdn.quilljs.com/1.3.6/quill.js", function() { |
| 91 | if ($(".ql-toolbar").length) return; |
| 92 | |
| 93 | var quill = new Quill('#editor', { |
| 94 | modules: { |
| 95 | toolbar: [ |
| 96 | [{ header: [2, 3, 4, 5, 6, false] }], |
| 97 | [{ color: [] }], |
| 98 | [ |
| 99 | 'bold', 'italic', 'underline', 'strike', |
| 100 | { 'script': 'super'}, |
| 101 | { 'script': 'sub' }, |
| 102 | 'code', 'link' |
| 103 | ], |
| 104 | ['blockquote', 'code-block', 'image'], |
| 105 | [{ list: 'ordered' }, { list: 'bullet' }], |
| 106 | [{ align: ['center', 'right', 'justify', false] }], |
| 107 | [{ indent: '-1'}, { indent: '+1' }] |
| 108 | ] |
| 109 | }, |
| 110 | theme: 'snow' |
| 111 | }); |
| 112 | window.quill = quill; |
| 113 | quill.on('text-change', function(delta, oldDelta, source) { |
| 114 | if (source == 'user') { |
| 115 | $('input[class=chord-content]').val(quill.root.innerHTML) |
| 116 | } |
| 117 | }); |
| 118 | }) |
| 119 | |
| 120 | $(document).on('turbolinks:load', function() { |
| 121 | |
| 122 | $('input.song-title').on('input',function(e) { |
| 123 | |
| 124 | $('.song-songwriters').hide() |
| 125 | |
| 126 | if ($(this).val().length < 3) |
| 127 | return |
| 128 | |
| 129 | var url = "<%= guitar_chord_add_song_search_path %>?s=" + $(this).val() |
| 130 | $.ajax({ |
| 131 | type: "GET", |
| 132 | url: url, |
| 133 | success: function(res) { |
| 134 | |
| 135 | console.log(res); |
| 136 | var ins = "" |
| 137 | for (var i = 0; i < res.length; i++) { |
| 138 | const song = res[i] |
| 139 | var songwriters = "" |
| 140 | for (var j = 0; j < song.songwriters.length; j++) { |
| 141 | const songwriter = song.songwriters[j] |
| 142 | songwriters += `<a href="${songwriter.path}" target="__blank">${songwriter.name}</a> ` |
| 143 | } |
| 144 | |
| 145 | ins += `<div |
| 146 | class="song list-group-item list-group-item-action flex-column align-items-start" |
| 147 | data-id="${song.id}" |
| 148 | data-title="${song.name}" |
| 149 | style="cursor: pointer;">` |
| 150 | ins += "<div class='d-flex w-100 justify-content-between'>" |
| 151 | ins += "<h5 class='mb-1'>" + song.name + "</h5>" |
| 152 | ins += "<small class='text-muted'>" + song.created + "</small>" |
| 153 | ins += "</div>" |
| 154 | ins += "<p class='mb-1 songwriters-links'>" |
| 155 | ins += songwriters |
| 156 | ins += "</p>" |
| 157 | ins += "</div>" |
| 158 | }; |
| 159 | $('.song-list').html(ins).show(); |
| 160 | } |
| 161 | }); |
| 162 | }); |
| 163 | |
| 164 | $('body').on('click', 'div.song', function() { |
| 165 | //console.log($(this).attr('data-title')) |
| 166 | $('.song-songwriters').show() |
| 167 | $('input.song-title').val($(this).attr('data-title')) |
| 168 | $('input.song-id').val($(this).attr('data-id')) |
| 169 | $('.song-songwriters').html($(this).find('.songwriters-links').clone()) |
| 170 | $('.song-list').html("").hide() |
| 171 | }); |
| 172 | }) |
| 173 | </script> |