Kod ot saita teatra im. Alekhandro Valensio https://valensio.com.

• formirovat' afishu dzhoinom dvukh tablits iz BD: s opisaniem meropriiatii i s blizhaishimi datami
• generirovat' posty dlia sotssetei s afishei na mesiats
• rasstavliat' utm-metki dlia sotssetei
• sokrashchat' ssylki s metkami vstroennym sokrashchatelem valensio.com/s/...
• perenosit' utm-metki na vidzhet s pokupkoi biletov -- marketolog uznaet otkuda prishiol pokupatel', dazhe pri razryve sessii

• avtomaticheski vkliuchaet tiomnuiu temu na osnove predpochtenii pol'zovatelia. Izbegaet <>.
• gibkaia nastroika tsvetovykh tem

Sait napisan pod CMS Modx. V etom repozitorii khranitsia soderzhimoe pol'zovatel'skoi papki assets.

Ispol'zuetsia standartnoe modeksovskoe razdelenie na elementy:

• chanki (pereispol'zuemye kuski HTML)
• snippety (kod na PHP)
• resursy (stranitsy saita)
• shablony (stranitsy saita).

Kazhdyi element -- staticheskii.

Kod napisan s ispol'zovaniem BEM. Po krainei mere, v otnoshenii imenovaniia klassov i nezavisimosti blokov.

Takzhe chastichno ispol'zuiu Google HTML/CSS Style Guide, Code Guide i Sass Guidelines. Kogda-nibud' u menia doidut ruki privesti kod v maksimal'noe sootvetstvie etim gaidam.

V baze dannykh lezhat dve tablitsy: repertoire i tickets.

• repertoire soderzhit v sebe informatsiiu o spektakliakh: identifikator, nazvanie, opisanie, emodzi, vozrast, tegi i t.d.
• tickets soderzhit informatsiiu o datakh meropriiatii: identifikator meropriiatiia, data, mesto, ssylka na bilety i t.d.

Dlia generatsii afishi na glavnoi stranitse ispol'zuetsia join dvukh etikh tablits: informatsiia o konkretnoi date soediniaetsia s informatsiei o meropriiatii v tselom.

Na stranitse so vsemi spektakliami vyvoditsia informatsiia tol'ko iz repertoire. No est' osobennost' sortirovki: meropriiatiia, na kotorye bilety est', idut vyshe ostal'nykh. Poetomu dlia sortirovki meropriiatii takzhe ispol'zuetsia tablitsa tickets.

Za upravlenie tsvetom otvechaiut faily:

• ./scss/_color-theme.scss
• ./scripts/color-theme.js
• ./snippets/color-theme_names.snippet.php

K elementu prikruchivaetsia klass color-theme, soderzhashchii defoltnuiu beluiu temu. Izmeniaetsia tema s pomoshch'iu klassov-modifikatorov tipa color-theme_name_***, gde *** -- eto nazvanie temy. Ono zadaiotsia s pomoshch'iu TV, kotoroe tak i nazyvaetsia -- solor-theme_name.

Modifikatorov net, ispol'zuetsia defoltnaia belaia tema:

Est' modifikator, ispol'zuetsia zelionaia tema:

Spisok vsekh tem est' v ./scss/_color-theme.scss.

Chtoby aktivirovat' tiomnuiu temu nado dobavit' klass color-theme_name_dark. Pri etom udaliat' klassy-modifikatory, kotorye byli iznachal'no, ne nuzhno: eto pozvolit vosstanovit' temu, pri perekliuchenii s tiomnoi obratno na svetluiu. Dostatochno budet prosto udalit' klass color-theme_name_dark i iznachal'naia tema primenitsia avtomaticheski.

Ispol'zuiutsia dva modifikatora: zelionoi i tiomnoi temy. Tiomnaia -- prioritetnee.

Tsvetovaia tema (color theme) i tsvetovoi rezhim (color mode) -- raznye poniatiia.

• Tema mozhet byt' beloi, tiomnoi, krasnoi, zelionoi, kakoi ugodno. My govorili o nei vyshe.
• Rezhim mozhet prinimat' tol'ko tri znacheniia: light, darkAndColors i dark. O niom popodrobnee

Pol'zovatel' zagruzhaet stranitsu. Aktiviruetsia li tiomnaia tema? Na etot vopros otvechaet tsvetovoi rezhim.

• Kogda ispol'zuetsia rezhim light, tiomnaia tema ne ispol'zuetsia voobshche, klass color-theme_name_dark ne dobavliaetsia.
• Kogda ispol'zuetsia rezhim dark, na vsekh stranitsakh ispol'zuetsia tiomnaia tema, klass color-theme_name_dark vsegda dobavliaetsia.
• Kogda ispol'zuetsia rezhim darkAndColors, vse tsvetnye stranitsy ostaiutsia tsvetnymi, a stranitsy s defoltnoi beloi temoi stanoviatsia tiomnymi. Klass color-theme_name_dark dobavliaetsia tol'ko kogda net modifikatorov tsvetovoi temy (to est' ona belaia, defoltnaia).

Tsvetovoi rezhim zapisyvaetsia v cookie s nazvaniem color-mode.

Kogda pol'zovatel' prikhodit na sait pervyi raz, color-mode u nego ne ustanovlen. On ustanavlivaetsia na frontende failom color-theme.js na osnove media-zaprosa o predpochteniiakh pol'zovatelia (prefers-color-scheme: ):

• Esli pol'zovatel' predpochitaet svetluiu temu, to stavim rezhim light.
• Esli pol'zovatel' predpochitaet tiomnuiu temu, to stavim emu rezhim darkAndColors. Tak on ne oslepnet ot belykh stranits, no uvidit potriasaiushchie tsveta na tsvetnykh stranitsakh.

Na saite est' knopka, perekliuchaiushchaia tsvetovye rezhimy. Ona rabotaet s tem zhe failom color-theme.js. S pomoshch'iu neio mozhno perekliuchit'sia na rezhimy light i dark. Na darkAndColors perekliuchit'sia nel'zia, ego mozhno tol'ko poluchit' po defoltu. Tak sdelano, chtoby ne uslozhniat' interfeis. Pust' pol'zovateli dumaiut, chto est' tol'ko svetlyi rezhim i tiomnyi rezhim.

Chtoby izbezhat' mertsaniia tiomnoi temy (dark mode flash), tiomnaia tema ustanavlivaetsia na bekende. Pri generatsii stranitsy, server na osnove tekushchego tsvetovogo rezhima reshaet dobavliat' emu klass color-theme_name_dark ili net. Otvetstvennyi za eto kod propisan v snippete color-theme_names.