From 01d5cdf3f2defe60561051ff8f7805831b40cc27 Mon Sep 17 00:00:00 2001 From: Grant Shangreaux Date: Fri, 24 Feb 2023 20:59:55 -0600 Subject: Add: working version of track info editing caution, this is not set up to work across connections --- playlist.lisp | 54 ++++++++++++++++++++++++++++++++++----------------- static/css/main-4.css | 6 ++++++ 2 files changed, 42 insertions(+), 18 deletions(-) diff --git a/playlist.lisp b/playlist.lisp index 88da89e..5d0dc24 100644 --- a/playlist.lisp +++ b/playlist.lisp @@ -17,7 +17,7 @@ (:documentation "Holds the complete state for this session's viewing of a particular playlist.")) (defclass/std track-ctl () - ((track audio container info-edit-ctl edit-save-btn editing? :std nil)) + ((track listing-line audio container info-edit-ctl edit-save-btn editing? :std nil)) (:documentation "The state of a particular track in this session's viewing of a playlist.")) (defun audio-for-track (ctl track) @@ -227,23 +227,39 @@ ;; swap list items in the dom (place-after (container cur) (container next))))))) +(defun open-track-editor (track-ctl) + (setf (text (edit-save-btn track-ctl)) "save ") + (with-slots (artist album title) (track track-ctl) + (with-clog-create (info-edit-ctl track-ctl) + (div (:class "track-edit-inputs column") + ;; (label (:content "Artist" :bind artist-label)) + (form-element (:text :bind artist-input)) + ;; (label (:content "Album" :bind album-label)) + (form-element (:text :bind album-input)) + ;; (label (:content "Title" :bind title-label)) + (form-element (:text :bind title-input))) + (setf (place-holder artist-input) (or artist "Artist") + (place-holder album-input) (or album "Album") + (place-holder title-input) (or title "Title")) + ;; (label-for artist-input artist-label) + ;; (label-for album-input album-label) + ;; (label-for title-input title-label) + + (set-on-click + (edit-save-btn track-ctl) + (thunk* (update-track-info + (track track-ctl) (value artist-input) (value album-input) (value title-input)) + (toggle-track-editor track-ctl)))))) + +(defun close-track-editor (track-ctl) + (setf (display (info-edit-ctl track-ctl)) "none" + (text (listing-line track-ctl)) (track-listing-line (track track-ctl)) + (text (edit-save-btn track-ctl)) "edit ")) + (defun toggle-track-editor (track-ctl) (setf (editing? track-ctl) (not (editing? track-ctl))) - (if (editing? track-ctl) - (progn - (setf (text (edit-save-btn track-ctl)) "save ") - (with-clog-create (info-edit-ctl track-ctl) - (div (:class "track-edit-inputs") - (form-element (:text :bind artist-input)) - (form-element (:text :bind album-input)) - (form-element (:text :bind title-input))) - (set-on-click - (edit-save-btn track-ctl) - (thunk* (update-track-info - (track track-ctl) (value artist-input) (value album-input) (value title-input)) - (toggle-track-editor track-ctl))))) - (setf (display (info-edit-ctl track-ctl)) "none" - (text (print (edit-save-btn track-ctl))) "edit "))) + (if (editing? track-ctl) (open-track-editor track-ctl) + (close-track-editor track-ctl))) (defun add-zipped-playlist-link (pl-ctl playlist) "Adds the link to a zipped playlist to the DOM." @@ -308,7 +324,7 @@ (list-item (:bind container) (div (:bind item :class "track-list-item") - (section (:pre :content (track-listing-line track)))) + (section (:pre :bind listing-line))) (div (:bind info-edit-ctl :class "track-list-edit")) (div (:bind edit-controls) (button (:content "edit " :bind edit-save-btn)) @@ -319,13 +335,15 @@ (let ((track-ctl (make-instance 'track-ctl :container container + :listing-line listing-line :audio audio :track track :info-edit-ctl info-edit-ctl :edit-save-btn edit-save-btn :editing? nil))) (setf (tracks ctl) - (insert-nth track-ctl -1 (tracks ctl) t)) + (insert-nth track-ctl -1 (tracks ctl) t) + (text listing-line) (track-listing-line track)) (cond ((editorp ctl) (setf (attribute downbtn "title") "move track down" diff --git a/static/css/main-4.css b/static/css/main-4.css index aa2463a..49de839 100644 --- a/static/css/main-4.css +++ b/static/css/main-4.css @@ -104,6 +104,12 @@ button:disabled:hover { justify-content: space-between; } +.track-edit-inputs { + display: flex; + flex-direction: column; + justify-content: space-between; +} + .controls button { font-size: 2em; width: -moz-available; -- cgit v1.2.3