- {renderFlashMessages}
+ {renderFlashMessages |> wrapContainerWide}
{inner}
diff --git a/Web/View/ParagraphQuotes/Edit.hs b/Web/View/ParagraphQuotes/Edit.hs
index 0e79457..690d85b 100644
--- a/Web/View/ParagraphQuotes/Edit.hs
+++ b/Web/View/ParagraphQuotes/Edit.hs
@@ -2,13 +2,16 @@ module Web.View.ParagraphQuotes.Edit where
import Web.View.Prelude
import Web.View.ParagraphQuotes.Form
-data EditView = EditView { paragraphQuote :: ParagraphQuote }
+data EditView = EditView
+ { paragraphQuote :: ParagraphQuote
+ , formStatus :: FormStatus
+ }
instance View EditView where
html EditView { .. } = [hsx|
{breadcrumb}
Edit ParagraphQuote
- {renderForm paragraphQuote False}
+ {renderForm paragraphQuote False formStatus}
|]
where
breadcrumb = renderBreadcrumb
diff --git a/Web/View/ParagraphQuotes/Form.hs b/Web/View/ParagraphQuotes/Form.hs
index 635aeea..2d3bc15 100644
--- a/Web/View/ParagraphQuotes/Form.hs
+++ b/Web/View/ParagraphQuotes/Form.hs
@@ -3,30 +3,35 @@ module Web.View.ParagraphQuotes.Form where
import Web.View.Prelude
import Web.Element.Types
import Web.Element.ElementWrap
-
-renderForm :: ParagraphQuote -> Bool -> Html
-renderForm paragraphQuote isImageRequired = formFor paragraphQuote [hsx|
+import Web.Element.SubmitButton
+
+{-| When editing the form, the image input field isn't required.
+That is, the image itself is required, but since we've already uploaded one,
+when editing, we don't require re-uploading the same image.
+-}
+renderForm :: ParagraphQuote -> Bool -> FormStatus -> Html
+renderForm paragraphQuote isImageRequired formStatus = formFor paragraphQuote [hsx|
{(hiddenField #landingPageId)}
{(hiddenField #weight)}
{visibleForm paragraphQuote}
|]
where
- visibleForm :: (?formContext :: FormContext ParagraphQuote) => ParagraphQuote -> Html
- visibleForm paragraphQuote =
- [hsx|
- {(textareaField #body) {required = True}}
- {(textField #subtitle) {required = True}}
-
-
- {(fileField #imageUrl) {required = isImageRequired, additionalAttributes = [("accept", "image/*"), ("data-preview", "#imageUrlPreview")]}}
-
-
-
-
- {submitButton}
- |]
- |> wrapVerticalSpacing AlignNone
- |> wrapContainerWide
+ visibleForm :: (?formContext :: FormContext ParagraphQuote) => ParagraphQuote -> Html
+ visibleForm paragraphQuote =
+ [hsx|
+ {(textareaField #body) {required = True}}
+ {(textField #subtitle) {required = True}}
+
+
+ {(fileField #imageUrl) {required = isImageRequired, additionalAttributes = [("accept", "image/*"), ("data-preview", "#imageUrlPreview")]}}
+
+
+
+
+ {renderSubmitButtonwithFormStatus submitButton formStatus}
+ |]
+ |> wrapVerticalSpacing AlignNone
+ |> wrapContainerWide
diff --git a/Web/View/ParagraphQuotes/New.hs b/Web/View/ParagraphQuotes/New.hs
index aa10b02..a88907b 100644
--- a/Web/View/ParagraphQuotes/New.hs
+++ b/Web/View/ParagraphQuotes/New.hs
@@ -3,13 +3,16 @@ import Web.View.Prelude
import Web.View.ParagraphQuotes.Form
-data NewView = NewView { paragraphQuote :: ParagraphQuote }
+data NewView = NewView
+ { paragraphQuote :: ParagraphQuote
+ , formStatus :: FormStatus
+ }
instance View NewView where
html NewView { .. } = [hsx|
{breadcrumb}
New ParagraphQuote
- {renderForm paragraphQuote False}
+ {renderForm paragraphQuote True formStatus}
|]
where
breadcrumb = renderBreadcrumb
diff --git a/static/app.js b/static/app.js
index dd365d5..8c6681c 100644
--- a/static/app.js
+++ b/static/app.js
@@ -1,13 +1,133 @@
-$(document).on('ready turbolinks:load', () => {
+$(document).on('ihp:unload', () => {
+ // Unload bindings.
+ $('form:not([data-disable-form-submit-observe-change])').each(function () {
+ this.initDisableSubmitButtonIfFormNotChanged = false;
+ });
+
+ $('.js-sortable').each(function () {
+ this.initSortable = false;
+ });
+});
+
+
+$(document).on('ihp:load', () => {
+ initDisableSubmitButtonIfFormNotChanged();
+ initSortable();
+});
+
+const initDisableSubmitButtonIfFormNotChanged = function () {
+ // Disable submit button if form has not changed.
+ $('form[data-disable-form-submit-observe-change]').each(function () {
+ // Mark submit button as enabled.
+ $(this).find('button[type=submit]')
+ .toggleClass('disabled', false)
+ .toggleClass('enabled', true);
+ });
+
+ $('form:not([data-disable-form-submit-observe-change])').each(function () {
+ if (Boolean(this.initDisableSubmitButtonIfFormNotChanged) === true) {
+ // Already binded.
+ return;
+ }
+ this.initDisableSubmitButtonIfFormNotChanged = true;
+ const $this = $(this);
+
+ const formData = new FormData(this);
+
+ // Helper function to convert a value to a string representation.
+ // File objects are converted to a string like "FILE:filename-size-type".
+ function serializeValue(value) {
+ if (value instanceof File && value.name) {
+ return `FILE:${value.name}-${value.size}-${value.type}`;
+ }
+ return value;
+ }
+
+ // Helper function to convert form data to an array of key-value pairs
+ function formDataToArray(formData) {
+ const formDataEntries = [];
+ for (let pair of formData.entries()) {
+ const key = pair[0];
+ const value = pair[1];
+ formDataEntries.push({ [key]: serializeValue(value) });
+ }
+ return formDataEntries;
+ }
+
+ const formDataEntries = formDataToArray(formData);
+ $this.data('formDataSerialized', JSON.stringify(formDataEntries));
+ $this.find('button[type=submit]').prop('disabled', true);
+
+ $this.on('change input', function () {
+ const $this = $(this);
+ const formData = new FormData(this);
+ const formDataEntries = formDataToArray(formData);
+ const changed = $this.data('formDataSerialized') !== JSON.stringify(formDataEntries);
+ $this.find('button[type=submit]')
+ .prop('disabled', !changed)
+ .toggleClass('disabled', !changed)
+ .toggleClass('enabled', changed);
+
+ $this.find('.form-status-wrapper').remove();
+ });
+ });
+
+ // Show the remove file checkbox if a file is uploaded.
+ $('form .file-upload-wrapper :file').on('change', function () {
+ const $this = $(this);
+
+ const $wrapper = $this.closest('.file-upload-wrapper');
+ $wrapper
+ .find('.remove-file-wrapper')
+ .toggleClass('hidden', !$this.val());
+
+ if (!!$this.val()) {
+ // A file is uploaded, uncheck the "Remove file" checkbox,
+ // in case it was previously checked.
+ $wrapper
+ .find(':checkbox')
+ .prop('checked', false);
+ }
+ });
+
+ // Hide the file upload wrapper if the remove file checkbox is checked.
+ $('form .remove-file-checkbox:checkbox').on('change', function () {
+ const $wrapper = $(this).closest('.file-upload-wrapper');
+ $wrapper
+ .find(':file')
+ .val(null);
+
+ $wrapper
+ .find('img')
+ // We don't null the src, so we we don't get a broken image icon.
+ // from https://stackoverflow.com/a/9967193/750039
+ .attr('src', 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
+
+ $wrapper
+ .find('a.download-link')
+ .hide();
+
+ // Hide the remove file checkbox.
+ $wrapper.find('.remove-file-wrapper')
+ .addClass('hidden');
+
+ });
+}
+
+
+const initSortable = function () {
// Init sortable.
- document.querySelectorAll('.js-sortable').forEach(function (elem) {
- if (Boolean(elem.jsSortableInitialized) === false) {
- Sortable.create(elem, {
- handle: '.sortable-handle',
- animation: 150,
- });
- elem.jsSortableInitialized = true;
+ $('.js-sortable').each(function () {
+ if (Boolean(this.initSortable) === true) {
+ // Already binded.
+ return;
}
+
+ this.initSortable = true;
+ Sortable.create(this, {
+ handle: '.sortable-handle',
+ animation: 150,
+ });
});
-});
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/tailwind/app.css b/tailwind/app.css
index 1917a9a..1e2caca 100644
--- a/tailwind/app.css
+++ b/tailwind/app.css
@@ -6,9 +6,13 @@
.container-wide {
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 xl:px-20;
- }
+ }
- .container-narrow {
+ .container-narrow {
@apply max-w-3xl mx-auto px-4 md:px-10 lg:px-8 xl:px-20;
- }
+ }
+
+ .btn {
+ @apply flex flex-row gap-x-2 enabled:bg-blue-500 enabled:text-white disabled:bg-gray-100 disabled:text-gray-500 enabled:hover:text-gray-200 enabled:hover:bg-blue-500 py-2 px-4 rounded;
+ }
}
\ No newline at end of file