OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

[WV2] Persist state in URL

Browse source
This commit is contained in:
Emi Matchu 2025-11-02 08:55:17 +00:00
parent 58fabad3c2
commit f96569b2bf
2 changed files with 47 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
app/assets/javascripts/outfit-viewer.js
View file

@ -126,7 +126,7 @@ class OutfitLayer extends HTMLElement {
} else { } else {
throw new Error( throw new Error(
`<outfit-layer> got unexpected status: ` + `<outfit-layer> got unexpected status: ` +
JSON.stringify(data.status), JSON.stringify(data.status),
); );
} }
} else { } else {
@ -196,7 +196,7 @@ function morphWithOutfitLayers(currentElement, newElement) {
if ( if (
newNode.tagName === "OUTFIT-LAYER" && newNode.tagName === "OUTFIT-LAYER" &&
newNode.getAttribute("data-asset-id") !== newNode.getAttribute("data-asset-id") !==
currentNode.getAttribute("data-asset-id") currentNode.getAttribute("data-asset-id")
) { ) {
currentNode.replaceWith(newNode); currentNode.replaceWith(newNode);
return false; return false;
@ -205,10 +205,19 @@ function morphWithOutfitLayers(currentElement, newElement) {
}, },
}); });
} }
addEventListener("turbo:before-frame-render", (event) => {
function onTurboRender(event) {
// Rather than enforce Idiomorph must be loaded, let's just be resilient // Rather than enforce Idiomorph must be loaded, let's just be resilient
// and only bother if we have it. (Replacing content is not *that* bad!) // and only bother if we have it. (Replacing content is not *that* bad!)
if (typeof Idiomorph !== "undefined") { if (typeof Idiomorph !== "undefined") {
event.detail.render = (a, b) => morphWithOutfitLayers(a, b); event.detail.render = (a, b) => morphWithOutfitLayers(a, b);
} }
}); }
// On most pages, we only apply this to Turbo frames, to be conservative. (Morphing the whole page is hard!)
addEventListener("turbo:before-frame-render", onTurboRender);
// But on pages that opt into it (namely the wardrobe), we do it for the full page too.
if (document.querySelector('meta[name=outfit-viewer-morph-mode][value=full-page]') !== null) {
addEventListener("turbo:before-render", onTurboRender);
}

68
app/views/outfits/new_v2.html.haml
View file

@ -10,47 +10,47 @@
= stylesheet_link_tag "application/hanger-spinner" = stylesheet_link_tag "application/hanger-spinner"
= stylesheet_link_tag "application/outfit-viewer" = stylesheet_link_tag "application/outfit-viewer"
= page_stylesheet_link_tag "outfits/new_v2" = page_stylesheet_link_tag "outfits/new_v2"
= csrf_meta_tags
= javascript_include_tag "application", async: true = javascript_include_tag "application", async: true
= javascript_include_tag "idiomorph", async: true = javascript_include_tag "idiomorph", async: true
= javascript_include_tag "outfit-viewer", async: true = javascript_include_tag "outfit-viewer", async: true
= javascript_include_tag "species-color-picker", async: true = javascript_include_tag "species-color-picker", async: true
= javascript_include_tag "outfits/new_v2", async: true = javascript_include_tag "outfits/new_v2", async: true
= csrf_meta_tags
%meta{name: 'outfit-viewer-morph-mode', value: 'full-page'}
%body.wardrobe-v2 %body.wardrobe-v2
= turbo_frame_tag "outfit-editor" do .wardrobe-container
.wardrobe-container .outfit-preview-section
.outfit-preview-section - if @pet_type.nil?
- if @pet_type.nil? .no-preview-message
.no-preview-message %p
%p We haven't seen this kind of pet before! Try a different species/color
We haven't seen this kind of pet before! Try a different species/color combination.
combination. - else
- else = outfit_viewer @outfit
= outfit_viewer @outfit
%species-color-picker %species-color-picker
= form_with url: wardrobe_v2_path, method: :get do |f| = form_with url: wardrobe_v2_path, method: :get do |f|
= select_tag :color, = select_tag :color,
options_from_collection_for_select(@colors, "id", "human_name", options_from_collection_for_select(@colors, "id", "human_name",
@selected_color&.id), @selected_color&.id),
"aria-label": "Pet color" "aria-label": "Pet color"
= select_tag :species, = select_tag :species,
options_from_collection_for_select(@species, "id", "human_name", options_from_collection_for_select(@species, "id", "human_name",
@selected_species&.id), @selected_species&.id),
"aria-label": "Pet species" "aria-label": "Pet species"
= submit_tag "Go", name: nil = submit_tag "Go", name: nil
-# Preserve item IDs in the URL -# Preserve item IDs in the URL
- if params[:objects].present? - if params[:objects].present?
- params[:objects].each do |item_id| - params[:objects].each do |item_id|
= hidden_field_tag "objects[]", item_id = hidden_field_tag "objects[]", item_id
.outfit-controls-section .outfit-controls-section
%h1 Customize your pet %h1 Customize your pet
- if @outfit.worn_items.any? - if @outfit.worn_items.any?
.worn-items .worn-items
%h2 Items (#{@outfit.worn_items.size}) %h2 Items (#{@outfit.worn_items.size})
%ul %ul
- @outfit.worn_items.each do |item| - @outfit.worn_items.each do |item|
%li= item.name %li= item.name