Emi Matchu
4c44f8d6a4
Here, I remember the trick I learned when building the outfit viewer: web components are great for making sure stuff stays initialized well in a Turbo environment! The problem was, after submitting the form and getting a new preview loaded via Turbo, the part where we remove `inert` would get undone. Additionally, this script only loads *once* per session, so if you Turbo-nav to a different item then that part of the page never ran. Instead, we use web components to remove the attributes on mount, then again if they're ever reapplied by Idiomorph.
92 lines
3.4 KiB
Text
92 lines
3.4 KiB
Text
- title @item.name
|
|
- canonical_path @item
|
|
|
|
= render partial: "item_header",
|
|
locals: {item: @item, trades: @trades, current_subpage: "preview",
|
|
current_user_lists: @current_user_lists,
|
|
current_user_quantities: @current_user_quantities}
|
|
|
|
- if @item.name.include? "Baby Body Paint"
|
|
%p.warning
|
|
The Baby Body Paint items seem to have new zone restriction rules that our
|
|
system doesn't support yet, whuh oh! This might require major changes to
|
|
how we handle zones. Until then, these items will be <em>very</em> buggy,
|
|
sorry!
|
|
|
|
= turbo_frame_tag "item-preview" do
|
|
= render partial: "outfit_viewer", locals: {outfit: @preview_outfit}
|
|
.error-indicator
|
|
💥 We couldn't load all of this outfit. Try again?
|
|
|
|
= form_for item_path(@item), method: :get, class: "species-color-picker",
|
|
data: {"is-valid": @preview_error.nil?} do |f|
|
|
- if @preview_error == :pet_type_does_not_exist
|
|
%span.error-icon{title: "We haven't seen this kind of pet before."} ⚠️
|
|
- elsif @preview_error == :no_item_data
|
|
%span.error-icon{title: "We haven't seen this item on this pet before."} ⚠️
|
|
|
|
= select_tag "preview[color_id]",
|
|
options_from_collection_for_select(Color.funny.alphabetical,
|
|
"id", "human_name", @selected_preview_pet_type.color_id)
|
|
= select_tag "preview[species_id]",
|
|
options_from_collection_for_select(Species.alphabetical,
|
|
"id", "human_name", @selected_preview_pet_type.species_id)
|
|
= submit_tag "Go", name: nil
|
|
|
|
%species-face-picker
|
|
%noscript
|
|
This fancy species picker requires Javascript, but you can still use the
|
|
dropdowns instead!
|
|
%species-face-picker-options{
|
|
inert: true, # waits for JS to remove
|
|
"aria-hidden": true, # waits for JS to remove
|
|
}
|
|
- @preview_pet_type_options.each do |pet_type|
|
|
%label
|
|
= radio_button_tag "species_face_id", pet_type.species_id,
|
|
checked: pet_type == @preview_outfit.pet_type,
|
|
disabled: !item_fits?(pet_type, @all_appearances)
|
|
= pet_type_image pet_type,
|
|
item_fits?(pet_type, @all_appearances) ? :happy : :sad,
|
|
:face
|
|
|
|
.item-zones-info
|
|
%section
|
|
%h3 Occupies
|
|
- if @appearances_by_occupied_zone.present?
|
|
%ul
|
|
- @appearances_by_occupied_zone.each do |zone, appearances_in_zone|
|
|
%li
|
|
= zone.label
|
|
- if item_zone_partial_fit? appearances_in_zone, @all_appearances
|
|
%span.zone-species-info{
|
|
title: item_zone_species_list(appearances_in_zone)
|
|
}
|
|
(#{appearances_in_zone.size} species)
|
|
- else
|
|
%span.no-zones (None)
|
|
|
|
%section
|
|
%h3 Restricts
|
|
- if @item.restricted_zones.present?
|
|
%ul
|
|
- @item.restricted_zones.sort_by(&:label).each do |zone|
|
|
%li= zone.label
|
|
- else
|
|
%span.no-zones (None)
|
|
|
|
- unless @contributors_with_counts.empty?
|
|
#item-contributors
|
|
%header #{t '.contributors.header'}:
|
|
%ul
|
|
- @contributors_with_counts.each do |contributor, count|
|
|
%li= link_to(contributor.name, user_contributions_path(contributor)) + format_contribution_count(count)
|
|
%footer= t '.contributors.footer'
|
|
|
|
- content_for :stylesheets do
|
|
= stylesheet_link_tag "application/hanger-spinner"
|
|
|
|
- content_for :javascripts do
|
|
= javascript_include_tag "lib/idiomorph", async: true
|
|
= javascript_include_tag "outfit-viewer", async: true
|
|
= javascript_include_tag "items/show", async: true
|