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 {
throw new Error(
`<outfit-layer> got unexpected status: ` +
JSON.stringify(data.status),
JSON.stringify(data.status),
);
}
} else {
@ -196,7 +196,7 @@ function morphWithOutfitLayers(currentElement, newElement) {
if (
newNode.tagName === "OUTFIT-LAYER" &&
newNode.getAttribute("data-asset-id") !==
currentNode.getAttribute("data-asset-id")
currentNode.getAttribute("data-asset-id")
) {
currentNode.replaceWith(newNode);
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
// and only bother if we have it. (Replacing content is not *that* bad!)
if (typeof Idiomorph !== "undefined") {
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/outfit-viewer"
= page_stylesheet_link_tag "outfits/new_v2"
= csrf_meta_tags
= javascript_include_tag "application", async: true
= javascript_include_tag "idiomorph", async: true
= javascript_include_tag "outfit-viewer", async: true
= javascript_include_tag "species-color-picker", 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
= turbo_frame_tag "outfit-editor" do
.wardrobe-container
.outfit-preview-section
- if @pet_type.nil?
.no-preview-message
%p
We haven't seen this kind of pet before! Try a different species/color
combination.
- else
= outfit_viewer @outfit
.wardrobe-container
.outfit-preview-section
- if @pet_type.nil?
.no-preview-message
%p
We haven't seen this kind of pet before! Try a different species/color
combination.
- else
= outfit_viewer @outfit
%species-color-picker
= form_with url: wardrobe_v2_path, method: :get do |f|
= select_tag :color,
options_from_collection_for_select(@colors, "id", "human_name",
@selected_color&.id),
"aria-label": "Pet color"
= select_tag :species,
options_from_collection_for_select(@species, "id", "human_name",
@selected_species&.id),
"aria-label": "Pet species"
= submit_tag "Go", name: nil
%species-color-picker
= form_with url: wardrobe_v2_path, method: :get do |f|
= select_tag :color,
options_from_collection_for_select(@colors, "id", "human_name",
@selected_color&.id),
"aria-label": "Pet color"
= select_tag :species,
options_from_collection_for_select(@species, "id", "human_name",
@selected_species&.id),
"aria-label": "Pet species"
= submit_tag "Go", name: nil
-# Preserve item IDs in the URL
- if params[:objects].present?
- params[:objects].each do |item_id|
= hidden_field_tag "objects[]", item_id
-# Preserve item IDs in the URL
- if params[:objects].present?
- params[:objects].each do |item_id|
= hidden_field_tag "objects[]", item_id
.outfit-controls-section
%h1 Customize your pet
.outfit-controls-section
%h1 Customize your pet
- if @outfit.worn_items.any?
.worn-items
%h2 Items (#{@outfit.worn_items.size})
%ul
- @outfit.worn_items.each do |item|
%li= item.name
- if @outfit.worn_items.any?
.worn-items
%h2 Items (#{@outfit.worn_items.size})
%ul
- @outfit.worn_items.each do |item|
%li= item.name