feat(arts-page): add arts page and fix hero frame #27
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Contributor
There was a problem hiding this comment. В новой схеме вообще нет смысла в отдельном шаблоне. Это ведь не универсальная модалка, а только для артов
Contributor
There was a problem hiding this comment. И сейчас стили модалки не упорядочены. Некоторые арты залезают под кнопки |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <div class="art-modal-overlay Ps-f T0 L0 W100vw H100vh Bgc-$overlay Zi20 O0 Pne -Ts"> | ||
| <div class="Ps-a T15p L50p Tf -Tr-50p;0 W85p md_W60p xl_W50p Apcr3/2 Bdrd8 Ov-h Bd0.5u;s;$brand D-f Fld-c @:o-l:w<768_H80vh"> | ||
| <button class="art-modal-close btn Ps-a Zi20 T4u R4u C-$white100 md_C-$brand_h C-$brand_a -Ts"> | ||
| <svg class="xxl_-Sz24" width="16" height="16"> | ||
| <use href="/assets/img/icons.svg#close-menu"></use> | ||
| </svg> | ||
| </button> | ||
| <div class="art-modal-content -Sz100p <%= it.artBgc %>"> | ||
|
|
||
| </div> | ||
| <div class="Ps-a Zi10 L0 B3u D-f Ai-c Jc-c Gap8u W100p H50 sm_H40 P0;3u"> | ||
| <div class="art-modal-sandbox W100p Mxw240 H100p"> | ||
| <%- include('../link-button.ejs',{ | ||
| url: `http://play.mlut.style/?art=${it.artId}`, | ||
| text: "Open in sandbox", | ||
| variant: "brand" | ||
| }) | ||
| %> | ||
| </div> | ||
| <div class="art-modal-share W100p Mxw240 H100p"> | ||
| <%- include('../link-button.ejs',{ | ||
| text: "Share", | ||
| variant: "white", | ||
| icon: "share", | ||
| iconClass: "C-$brand W20 H20" | ||
| }) | ||
| %> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| export class ArtModal { | ||
|
Contributor
There was a problem hiding this comment. Переделываем на кастомный элемент, как писал ниже |
||
|
|
||
| constructor() { | ||
| this.template = document.getElementById("art-card"); | ||
| if (!this.template) return; | ||
|
|
||
| const clone = this.template.content.cloneNode(true); | ||
| this.overlay = clone.querySelector(".art-modal-overlay"); | ||
| this.contentContainer = clone.querySelector(".art-modal-content"); | ||
| this.closeBtn = clone.querySelector(".art-modal-close"); | ||
| this.sandboxLink = clone.querySelector(".art-modal-sandbox a"); | ||
| this.shareBtn = clone.querySelector(".art-modal-share"); | ||
|
|
||
| this.overlay.addEventListener("click", (e) => { | ||
|
Contributor
There was a problem hiding this comment. закрытие должно быть и по нажатию Esc на клаве |
||
| if (e.target === this.overlay) this.close(); | ||
| }); | ||
| this.closeBtn.addEventListener("click", () => this.close()); | ||
| this.shareBtn.addEventListener("click", () => this.copyArtLink()); | ||
|
|
||
| document.body.appendChild(clone); | ||
| } | ||
|
|
||
| copyArtLink() { | ||
|
Contributor
There was a problem hiding this comment. Вместо дублирования логики надо модалке передавать колбэки из art-panel |
||
| if (!this.currentArtId) return; | ||
|
|
||
| const link = window.location.href.split("#")[0] + "#" + this.currentArtId; | ||
| navigator.clipboard | ||
| .writeText(link) | ||
| .then(() => { | ||
| const span = this.shareBtn.querySelector(".button-text"); | ||
| const svg = this.shareBtn.querySelector("svg"); | ||
|
|
||
| if (span) span.textContent = "Copied!"; | ||
| if (svg) svg.classList.add("D-n"); | ||
|
|
||
| setTimeout(() => { | ||
| if (span) span.textContent = "Share"; | ||
| if (svg) svg.classList.remove("D-n"); | ||
| }, 2000); | ||
| }) | ||
| .catch((err) => console.error("Copy failed", err)); | ||
| } | ||
|
|
||
| open(artElement, artId) { | ||
| if (!this.contentContainer) return; | ||
| this.currentArtId = artId; | ||
| if (this.sandboxLink) { | ||
| this.sandboxLink.href = `http://play.mlut.style/?art=${artId}`; | ||
| } | ||
| const artClone = artElement.querySelector(".art").cloneNode(true); | ||
|
Contributor
There was a problem hiding this comment. Модалка клонированием не занимается - туда уже готовый к отображению контент передаем |
||
| this.contentContainer.textContent = ""; | ||
|
Contributor
There was a problem hiding this comment. Почему так очищается контент, а не через innerHTML? |
||
| this.contentContainer.appendChild(artClone); | ||
| this.overlay.classList.remove("O0", "Pne"); | ||
| this.overlay.classList.add("O1", "Pne-a"); | ||
| } | ||
|
|
||
| close() { | ||
| if (this.overlay) { | ||
| this.overlay.classList.remove("O1", "Pne-a"); | ||
| this.overlay.classList.add("O0", "Pne"); | ||
| if (this.contentContainer) this.contentContainer.textContent = ""; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export const artModal = new ArtModal(); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,48 @@ | ||
| import { artModal } from "./art-modal.js"; | ||
|
|
||
| const hightlightCss = "Bxsd1;1;10;2;$brand"; | ||
|
|
||
| export class ArtPanel extends HTMLElement { | ||
| constructor() { | ||
| super(); | ||
| this.link = window.location.href; | ||
| } | ||
|
|
||
| connectedCallback() { | ||
| if (location.hash.slice(1) === this.id) { | ||
| this.highlightTargetArt(); | ||
| } | ||
| this.button = this.querySelector(`.link-button`); | ||
| this.button.addEventListener("click", () => this.copyArtLink()); | ||
| this.addEventListener("click", (e) => { | ||
| if (e.target.closest(".link-button, a")) return; | ||
|
Contributor
There was a problem hiding this comment. На |
||
| artModal.open(this, this.id); | ||
| }); | ||
| } | ||
|
|
||
| copyArtLink() { | ||
| const icon = this.button.querySelector(".copy-icon"); | ||
| const text = this.button.querySelector(".copy-text"); | ||
| if (!icon || !text) return; | ||
|
|
||
| this.link = this.link.split("#")[0] + `#${this.id}`; | ||
| navigator.clipboard.writeText(this.link); | ||
|
|
||
| icon.classList.add("D-n"); | ||
| text.classList.remove("D-n"); | ||
|
|
||
| setTimeout(() => { | ||
| icon.classList.remove("D-n"); | ||
| text.classList.add("D-n"); | ||
| }, 2000); | ||
| } | ||
|
|
||
| highlightTargetArt() { | ||
| this.classList.add(hightlightCss); | ||
| setTimeout(() => { | ||
| this.classList.remove(hightlightCss); | ||
| }, 5000); | ||
| } | ||
| } | ||
|
|
||
| customElements.define("art-panel", ArtPanel); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Тут было бы неплохо сделать рефакторинг. Пусть название css переменной с цветом фона будет формироваться по схеме:
$art${artId}. Только id надо будет перевести из cebab-case в camelCaseThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Привет. Небольшой вопрос:
Если я переведу id в camelCase, то мне нужно будет переименовывать все файлы в папке arts (например: robotHare.ejs) и переименовать все переменные цвета (например: --ml-artrobotHare: #........). Делать так?
Пока не исправлял.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Существующий id не меняем. Переводим его только для получения названия CSS переменной. В шаблоне, вместо
art.bgColor, будет что-то типаBgc-$art${cebab2Camel(art.artId)}. CSS переменные с цветами тоже вроде должны быть уже с подходящими названиями. Если какие-то отдельные не будут подходить - поправь