forked from OpenNeo/impress
Save playing state to a cookie for the new item page preview
This commit is contained in:
parent
1aba4f405e
commit
b03fee8c7e
3 changed files with 27 additions and 13 deletions
|
@ -4,7 +4,6 @@ class OutfitViewer extends HTMLElement {
|
|||
constructor() {
|
||||
super();
|
||||
this.#internals = this.attachInternals();
|
||||
this.#setIsPlaying(false);
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
|
@ -18,28 +17,35 @@ class OutfitViewer extends HTMLElement {
|
|||
this.#setIsPlaying(playPauseToggle.checked);
|
||||
playPauseToggle.addEventListener("change", () => {
|
||||
this.#setIsPlaying(playPauseToggle.checked);
|
||||
this.#setIsPlayingCookie(playPauseToggle.checked);
|
||||
});
|
||||
}
|
||||
|
||||
#setIsPlaying(isPlaying) {
|
||||
// TODO: Listen for changes to the child list, and add `playing` when new
|
||||
// nodes arrive, if playing.
|
||||
const thirtyDays = 60 * 60 * 24 * 30;
|
||||
if (isPlaying) {
|
||||
this.#internals.states.add("playing");
|
||||
for (const child of this.children) {
|
||||
child.setAttribute("playing", "");
|
||||
for (const layer of this.querySelectorAll("outfit-layer")) {
|
||||
layer.play();
|
||||
}
|
||||
} else {
|
||||
this.#internals.states.delete("playing");
|
||||
for (const child of this.children) {
|
||||
child.removeAttribute("playing");
|
||||
for (const layer of this.querySelectorAll("outfit-layer")) {
|
||||
layer.pause();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#setIsPlayingCookie(isPlaying) {
|
||||
const thirtyDays = 60 * 60 * 24 * 30;
|
||||
const value = isPlaying ? "true" : "false";
|
||||
document.cookie = `DTIOutfitViewerIsPlaying=${value};max-age=${thirtyDays}`;
|
||||
}
|
||||
}
|
||||
|
||||
class OutfitLayer extends HTMLElement {
|
||||
static observedAttributes = ["playing"];
|
||||
#internals;
|
||||
|
||||
constructor() {
|
||||
|
@ -64,11 +70,12 @@ class OutfitLayer extends HTMLElement {
|
|||
window.removeEventListener("message", this.#onMessage);
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
if (name === "playing") {
|
||||
const isPlaying = newValue != null;
|
||||
this.#forwardIsPlaying(isPlaying);
|
||||
}
|
||||
play() {
|
||||
this.#forwardIsPlaying(true);
|
||||
}
|
||||
|
||||
pause() {
|
||||
this.#forwardIsPlaying(false);
|
||||
}
|
||||
|
||||
#connectToChildren() {
|
||||
|
|
|
@ -224,6 +224,10 @@ module ItemsHelper
|
|||
end
|
||||
end
|
||||
|
||||
def outfit_viewer_is_playing
|
||||
cookies["DTIOutfitViewerIsPlaying"] == "true"
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def build_on_pet_types(species, special_color=nil, &block)
|
||||
|
|
|
@ -2,7 +2,10 @@
|
|||
.loading-indicator= render partial: "hanger_spinner"
|
||||
|
||||
%label.play-pause-button
|
||||
%input.play-pause-toggle{type: "checkbox"}
|
||||
%input.play-pause-toggle{
|
||||
type: "checkbox",
|
||||
checked: outfit_viewer_is_playing,
|
||||
}
|
||||
Play/pause
|
||||
|
||||
- outfit.visible_layers.each do |swf_asset|
|
||||
|
@ -13,6 +16,6 @@
|
|||
},
|
||||
}
|
||||
- if swf_asset.canvas_movie?
|
||||
%iframe{src: swf_asset_path(swf_asset)}
|
||||
%iframe{src: swf_asset_path(swf_asset, playing: outfit_viewer_is_playing ? true : nil)}
|
||||
- else
|
||||
= image_tag swf_asset.image_url, alt: ""
|
Loading…
Reference in a new issue