├── README.md
├── .gitignore
├── fonts
    ├── Beethoven.ttf
    ├── FC-Flower.ttf
    ├── XtreemFat.ttf
    ├── GN-KillGothic-U-KanaNA.ttf
    ├── GN-KillGothic-U-KanaNB.ttf
    ├── GN-KillGothic-U-KanaO.ttf
    ├── 851CHIKARA-DZUYOKU_kanaA_004.ttf
    └── 851CHIKARA-DZUYOKU_kanaB_004.ttf
├── package.json
├── index.html
├── main.css
└── main.js


/README.md:
--------------------------------------------------------------------------------
1 | # promare-image-generator


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .cache
2 | node_modules
3 | dist
4 | 


--------------------------------------------------------------------------------
/fonts/Beethoven.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evanminto/promare-image-generator/HEAD/fonts/Beethoven.ttf


--------------------------------------------------------------------------------
/fonts/FC-Flower.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evanminto/promare-image-generator/HEAD/fonts/FC-Flower.ttf


--------------------------------------------------------------------------------
/fonts/XtreemFat.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evanminto/promare-image-generator/HEAD/fonts/XtreemFat.ttf


--------------------------------------------------------------------------------
/fonts/GN-KillGothic-U-KanaNA.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evanminto/promare-image-generator/HEAD/fonts/GN-KillGothic-U-KanaNA.ttf


--------------------------------------------------------------------------------
/fonts/GN-KillGothic-U-KanaNB.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evanminto/promare-image-generator/HEAD/fonts/GN-KillGothic-U-KanaNB.ttf


--------------------------------------------------------------------------------
/fonts/GN-KillGothic-U-KanaO.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evanminto/promare-image-generator/HEAD/fonts/GN-KillGothic-U-KanaO.ttf


--------------------------------------------------------------------------------
/fonts/851CHIKARA-DZUYOKU_kanaA_004.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evanminto/promare-image-generator/HEAD/fonts/851CHIKARA-DZUYOKU_kanaA_004.ttf


--------------------------------------------------------------------------------
/fonts/851CHIKARA-DZUYOKU_kanaB_004.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evanminto/promare-image-generator/HEAD/fonts/851CHIKARA-DZUYOKU_kanaB_004.ttf


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "promare-image-generator",
 3 |   "version": "0.0.1",
 4 |   "main": "index.js",
 5 |   "repository": "git@github.com:evanminto/promare-image-generator.git",
 6 |   "author": "Evan Minto <evan.minto@gmail.com>",
 7 |   "license": "MIT",
 8 |   "scripts": {
 9 |     "build": "parcel build index.html --out-dir dist",
10 |     "serve": "parcel serve index.html --out-dir dist",
11 |     "start": "yarn run watch"
12 |   },
13 |   "browserslist": [
14 |     "cover 78%"
15 |   ],
16 |   "devDependencies": {
17 |     "lit-element": "^2.2.1",
18 |     "parcel-bundler": "^1.12.3",
19 |     "resize-observer-polyfill": "^1.5.1"
20 |   },
21 |   "dependencies": {
22 |     "dom-to-image": "^2.6.0",
23 |     "focus-visible": "^5.0.2",
24 |     "html2canvas": "^1.0.0-rc.3"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <head>
  4 |   <title>Promare Title Generator</title>
  5 | 
  6 |   <!-- Global site tag (gtag.js) - Google Analytics -->
  7 |   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-146605495-2"></script>
  8 |   <script>
  9 |     window.dataLayer = window.dataLayer || [];
 10 |     function gtag(){dataLayer.push(arguments);}
 11 |     gtag('js', new Date());
 12 | 
 13 |     gtag('config', 'UA-146605495-2');
 14 |   </script>
 15 | 
 16 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 17 | 
 18 |   <link rel="stylesheet" href="main.css">
 19 | 
 20 |   <script src="main.js" defer></script>
 21 | </head>
 22 | 
 23 | <div class="wrapper">
 24 |   <header>
 25 |     <h1>Promare Title Generator</h1>
 26 |   </header>
 27 | 
 28 |   <div class="main-content">
 29 |     <title-text-form aria-controls="title_output">
 30 |       <form>
 31 |         <p class="m-form-field">
 32 |           <label for="line1">First Line</label>
 33 |           <input id="line1" class="line-input" name="line1" value="The World's">
 34 |         </p>
 35 | 
 36 |         <p class="m-form-field">
 37 |           <label for="line2">Second Line</label>
 38 |           <input id="line2" class="line-input" name="line2" value="Number One">
 39 |         </p>
 40 | 
 41 |         <p class="m-form-field">
 42 |           <label for="line3">Third Line</label>
 43 |           <input id="line3" class="line-input" name="line3" value="Firefighting Idiot">
 44 |         </p>
 45 | 
 46 |         <p class="m-form-field">
 47 |           <label for="script">Script Overlay</label>
 48 |           <input id="script" name="script" value="Galo Thymos">
 49 |         </p>
 50 | 
 51 |         <details>
 52 |           <summary>Colors</summary>
 53 | 
 54 |           <color-select name="color_bg" label="Background Color">
 55 |             <color-option name="Pink" value="#EC164C" contrast-value="white" selected></color-option>
 56 |             <color-option name="Blue" value="#3098A5"></color-option>
 57 |             <color-option name="White" value="white"></color-option>
 58 |           </color-select>
 59 | 
 60 |           <color-select name="color_text" label="Text Color">
 61 |             <color-option name="Black &amp; Purple" value="linear-gradient(to top, #780967, #000 60%, #000)" contrast-value="white" selected></color-option>
 62 |             <color-option name="Black &amp; Blue" value="linear-gradient(to top, #126367, #000 60%, #000)" contrast-value="white"></color-option>
 63 |             <color-option name="Black" value="black" contrast-value="white"></color-option>
 64 |             <color-option name="White" value="white"></color-option>
 65 |           </color-select>
 66 | 
 67 |           <color-select name="color_shadow" label="Shadow Color">
 68 |             <color-option name="Yellow" value="#FBF41A" selected></color-option>
 69 |             <color-option name="Black" value="black" contrast-value="white"></color-option>
 70 |             <color-option name="None" value="_" placeholder-value="hsla(0, 0%, 100%, 0.5)"></color-option>
 71 |           </color-select>
 72 |         </details>
 73 | 
 74 |         <button>Generate</button>
 75 |       </form>
 76 |     </title-text-form>
 77 | 
 78 |     <output id="title_output">
 79 |       <title-text-frame>
 80 |         <div class="fallback-message">
 81 |           <p>Sorry, this site doesn’t work with your current browser and/or browser settings. Please try another browser, turning on JavaScript, or turning off ad-blocking/tracking protection.</p>
 82 |         </div>
 83 |       </title-text-frame>
 84 |     </output>
 85 |   </div>
 86 | 
 87 |   <div class="center">
 88 |     <section class="box">
 89 |       <h2>How to Save the Image</h2>
 90 |       <p>The text isn’t actually rendered as an image, so to get an image version you’ll need to <strong>take a screenshot</strong> of the page and crop it down.</p>
 91 |     </section>
 92 |   </div>
 93 | 
 94 |   <footer>
 95 |     <p><a href="https://gkids.com/films/promare/">Watch Promare in theaters!</a></p>
 96 |     <p>Created by <a href="https://evanminto.com">Evan Minto</a></p>
 97 |     <p><a href="https://twitter.com/VamptVo">Twitter</a> | <a href="https://github.com/evanminto/">GitHub</a></p>
 98 |   </footer>
 99 | </div>
100 | 
101 | <aria-status></aria-status>
102 | 


--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |   font-family: 'Beethoven';
  3 |   src: url('./fonts/Beethoven.ttf') format("truetype");
  4 |   font-weight: 100 900;
  5 | }
  6 | 
  7 | @font-face {
  8 |   font-family: 'Xtreem';
  9 |   src: url('./fonts/XtreemFat.ttf') format('truetype');
 10 |   font-weight: 500 900;
 11 | }
 12 | 
 13 | @font-face {
 14 |   font-family: '851 Chikara';
 15 |   src: url('./fonts/851CHIKARA-DZUYOKU_kanaA_004.ttf') format('truetype'),
 16 |        url('./fonts/851CHIKARA-DZUYOKU_kanaB_004.ttf') format('truetype');
 17 |   font-weight: 100 900;
 18 | }
 19 | 
 20 | @font-face {
 21 |   font-family: 'GN Kill Gothic U';
 22 |   src: url('./fonts/GN-KillGothic-U-KanaNA.ttf') format('truetype'),
 23 |        url('./fonts/GN-KillGothic-U-KanaNB.ttf') format('truetype'),
 24 |        url('./fonts/GN-KillGothic-U-KanaO.ttf') format('truetype');
 25 |   font-weight: 100 900;
 26 | }
 27 | 
 28 | /* Yellow: #E0F4BE */
 29 | 
 30 | * {
 31 |   box-sizing: border-box;
 32 |   margin: 0;
 33 | }
 34 | 
 35 | * + * {
 36 |   margin-top: 1.5rem;
 37 | }
 38 | 
 39 | html,
 40 | body {
 41 |   min-height: 100%;
 42 | }
 43 | 
 44 | body {
 45 |   background: #D9E3DE linear-gradient(to top, #EE7CE3, #D9E3DE);
 46 |   font-family: sans-serif;
 47 |   text-transform: uppercase;
 48 |   line-height: 1.5;
 49 |   margin: 0;
 50 | }
 51 | 
 52 | a {
 53 |   color: #D41A1A;
 54 | }
 55 | 
 56 | h1 {
 57 |   font-family: 'Beethoven', sans-serif;
 58 |   font-size: 4rem;
 59 |   font-weight: bold;
 60 |   text-transform: uppercase;
 61 |   color: #000;
 62 |   line-height: 1;
 63 | }
 64 | 
 65 | h2 {
 66 |   text-align: center;
 67 | }
 68 | 
 69 | h1 + p,
 70 | h2 + p {
 71 |   margin-top: 0.375rem;
 72 | }
 73 | 
 74 | label {
 75 |   display: block;
 76 |   font-weight: bold;
 77 |   letter-spacing: 0.0625ch;
 78 | }
 79 | 
 80 | input {
 81 |   font: inherit;
 82 |   padding: 0.75rem;
 83 |   width: 100%;
 84 |   border: 0.125em solid #000;
 85 |   color: #D41A1A;
 86 | }
 87 | 
 88 | input:focus {
 89 |   border-color: currentColor;
 90 | }
 91 | 
 92 | label + input {
 93 |   margin-top: 0.1875rem;
 94 | }
 95 | 
 96 | summary {
 97 |   cursor: default;
 98 | }
 99 | 
100 | button {
101 |   font: inherit;
102 |   font-weight: bold;
103 |   padding: 0.75rem 1.5rem;
104 |   background: #D41A1A;
105 |   color: white;
106 |   width: 100%;
107 |   text-transform: uppercase;
108 |   letter-spacing: 0.0625ch;
109 |   border: 0;
110 | }
111 | 
112 | * + button {
113 |   margin-top: 3rem;
114 | }
115 | 
116 | title-text-frame:defined {
117 |   transition: opacity 250ms ease-out;
118 | }
119 | 
120 | title-text-frame:defined[hidden] {
121 |   opacity: 0;
122 | }
123 | 
124 | title-text-form {
125 |   background: #B7F0C2;
126 |   border: 0.75rem solid #D969E7;
127 |   position: relative;
128 |   padding: 1.5rem;
129 | }
130 | 
131 | aria-status {
132 |   position: absolute !important;
133 |   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
134 |   clip: rect(1px, 1px, 1px, 1px);
135 |   padding:0 !important;
136 |   border:0 !important;
137 |   height: 1px !important;
138 |   width: 1px !important;
139 |   overflow: hidden;
140 |   margin: 0 !important;
141 | }
142 | 
143 | @supports (clip-path: polygon(0% 0%, 100% 0%, 100% 100%)) or (-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%)) {
144 |   title-text-form {
145 |     background: none;
146 |     border: none;
147 |     padding: calc(3rem + 5%);
148 |   }
149 | 
150 |   title-text-form::before {
151 |     background: #D969E7;
152 |     content: '';
153 |     display: block;
154 |     position: absolute;
155 |     left: 0;
156 |     right: 0;
157 |     top: 0;
158 |     bottom: 0;
159 |     -webkit-clip-path: polygon(4.01% 33.72%, 1.35% 15.38%, 51.08% 6.18%, 90.63% 11.58%, 88.67% 35.07%, 92.34% 58.26%, 86.53% 96.39%, 38.6% 92.6%, 22.23% 99.16%, 7.31% 85.06%);
160 |     clip-path: polygon(4.01% 33.72%, 1.35% 15.38%, 51.08% 6.18%, 90.63% 11.58%, 88.67% 35.07%, 92.34% 58.26%, 86.53% 96.39%, 38.6% 92.6%, 22.23% 99.16%, 7.31% 85.06%);
161 |   }
162 | 
163 |   title-text-form::after {
164 |     background: #B7F0C2;
165 |     content: '';
166 |     display: block;
167 |     position: absolute;
168 |     left: 0;
169 |     right: 0;
170 |     top: 0;
171 |     bottom: 0;
172 |     -webkit-clip-path: polygon(10.36% 5.68%, 97.23% 16.96%, 71.94% 98.42%, 3.29% 80.92%);
173 |     clip-path: polygon(10.36% 5.68%, 97.23% 16.96%, 71.94% 98.42%, 3.29% 80.92%);
174 |   }
175 | }
176 | 
177 | title-text-form > * {
178 |   position: relative;
179 |   z-index: 1;
180 | }
181 | 
182 | .wrapper {
183 |   margin: 0 auto;
184 |   padding-top: 3rem;
185 |   max-width: 100rem;
186 |   padding-bottom: 3rem;
187 | }
188 | 
189 | .wrapper > header {
190 |   text-align: center;
191 | }
192 | 
193 | .wrapper > footer {
194 |   font-weight: bold;
195 |   text-align: center;
196 |   background: white;
197 |   padding: 3rem;
198 |   -webkit-clip-path: polygon(calc(50% - 12em) 0%, calc(50% + 12em) 0%, 50% 100%);
199 |   clip-path: polygon(calc(50% - 12em) 0%, calc(50% + 12em) 0%, 50% 100%);
200 | }
201 | 
202 | @supports (clip-path: polygon(0% 0%, 0% 100%, 100% 100%)) or (-webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%)) {
203 |   .wrapper > footer {
204 |     padding: 3rem 3rem 12rem;
205 |   }
206 | }
207 | 
208 | .main-content {
209 |   display: flex;
210 |   flex-wrap: wrap;
211 |   margin-left: -1.5rem;
212 |   margin-bottom: -1.5rem;
213 |   align-items: center;
214 | }
215 | 
216 | .main-content > * {
217 |   flex: 3 1 calc((80rem - 100%) * 9999);
218 |   margin: 0;
219 |   margin-left: 1.5rem;
220 |   margin-bottom: 1.5rem;
221 |   min-width: 0;
222 | }
223 | 
224 | .main-content > * + * {
225 |   flex-grow: 7;
226 | }
227 | 
228 | .main-content ~ * {
229 |   margin-top: 3rem;
230 | }
231 | 
232 | .line-input {
233 |   text-transform: uppercase;
234 | }
235 | 
236 | .center {
237 |   padding-left: 1.5rem;
238 |   padding-right: 1.5rem;
239 | }
240 | 
241 | .center > * {
242 |   margin-left: auto;
243 |   margin-right: auto;
244 |   max-width: 38rem;
245 | }
246 | 
247 | .box {
248 |   background: white;
249 |   padding: 1.5rem;
250 |   -webkit-clip-path: polygon(-3.3% 10.63%, 94.88% -12.31%, 102.73% 90.76%, 2.35% 108.70%);
251 |   clip-path: polygon(-3.3% 10.63%, 94.88% -12.31%, 102.73% 90.76%, 2.35% 108.70%);
252 |   filter: drop-shadow(0, 0.25em, 0, 0.25em black);
253 | }
254 | 
255 | .fallback-message {
256 |   padding: 1.5rem;
257 |   background: black;
258 |   color: white;
259 | }
260 | 
261 | :focus {
262 |   outline: 0.25rem solid;
263 | }
264 | 
265 | /*
266 |   This will hide the focus indicator if the element receives focus via the mouse,
267 |   but it will still show up on keyboard focus.
268 | */
269 | .js-focus-visible :focus:not(.focus-visible) {
270 |   outline: none;
271 | }
272 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
  1 | import { LitElement, html, css } from 'lit-element';
  2 | import 'focus-visible';
  3 | import ResizeObserver from 'resize-observer-polyfill';
  4 | 
  5 | if ('customElements' in window && 'attachShadow' in document.createElement('div')) {
  6 |   function isElementInViewport(el) {
  7 |     const rect = el.getBoundingClientRect();
  8 | 
  9 |     return (
 10 |       rect.top >= 0 &&
 11 |       rect.left >= 0 &&
 12 |       rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
 13 |       rect.right <= (window.innerWidth || document.documentElement.clientWidth)
 14 |     );
 15 |   }
 16 | 
 17 |   function isJapanese(str) {
 18 |     return Boolean(str.match(/[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/));
 19 |   }
 20 | 
 21 |   function fitText(el, styles, width, constrainSize = false, replaceSpecialChars = false) {
 22 |     const testEl = document.createElement('span');
 23 |     document.body.appendChild(testEl);
 24 | 
 25 |     const jp = isJapanese(el.textContent);
 26 | 
 27 |     function getFontSize(val) {
 28 |       return `${val}em`;
 29 |     }
 30 | 
 31 |     const targetWidth = width * 0.85;
 32 | 
 33 |     let i = targetWidth / 32;
 34 | 
 35 |     testEl.style.position = 'absolute';
 36 |     testEl.style.visibility = 'hidden';
 37 |     testEl.style.whiteSpace = 'nowrap';
 38 |     Object.keys(styles).forEach(prop => {
 39 |       testEl.style[prop] = styles[prop];
 40 |     });
 41 |     testEl.style.fontSize = getFontSize(i);
 42 | 
 43 |     let textContent = el.textContent
 44 | 
 45 |     if (replaceSpecialChars　&& !jp) {
 46 |       textContent = textContent.replace(/([^a-zA-Z'"!@\(\)_\-\^\n ])/g, 'xx');
 47 |     }
 48 | 
 49 |     if (constrainSize) {
 50 |       while (textContent.length < 8) {
 51 |         if (jp) {
 52 |           textContent += 'ア';
 53 |         } else {
 54 |           textContent += 'x';
 55 |         }
 56 |       }
 57 |     }
 58 | 
 59 |     testEl.textContent = textContent;
 60 | 
 61 |     if (parseInt(window.getComputedStyle(testEl).width.replace('px', '')) < targetWidth) {
 62 |       while (parseInt(window.getComputedStyle(testEl).width.replace('px', '')) < targetWidth) {
 63 |         i += 0.125;
 64 |         testEl.style.fontSize = getFontSize(i);
 65 |       }
 66 |     } else {
 67 |       while (parseInt(window.getComputedStyle(testEl).width.replace('px', '')) > targetWidth) {
 68 |         i -= 0.125;
 69 |         testEl.style.fontSize = getFontSize(i);
 70 |       }
 71 |     }
 72 | 
 73 |     testEl.remove();
 74 | 
 75 |     return getFontSize(i);
 76 |   }
 77 | 
 78 |   class TitleTextElement extends LitElement {
 79 |     connectedCallback() {
 80 |       super.connectedCallback();
 81 | 
 82 |       let width = 0;
 83 | 
 84 |       this.resizeObserver = new ResizeObserver(entries => {
 85 |         if (entries[0].contentRect.width !== width) {
 86 |           width = entries[0].contentRect.width;
 87 |           this.init();
 88 |         }
 89 |       });
 90 | 
 91 |       this.resizeObserver.observe(this);
 92 |     }
 93 | 
 94 |     init() {
 95 |       const rect = this.getBoundingClientRect();
 96 | 
 97 |       this.targetWidthBlock = rect.width;
 98 |       this.targetWidthScript = rect.width * 0.75;
 99 | 
100 |       Array.from(this.querySelectorAll('title-text-line, title-text-script')).forEach(el => el.init());
101 |     }
102 | 
103 |     render() {
104 |       return html`
105 |         <div>
106 |           <slot></slot>
107 |         </div>
108 |       `;
109 |     }
110 | 
111 |     static get styles() {
112 |       return css`
113 |         :host {
114 |           display: block;
115 |           position: relative;
116 |           line-height: 0.9;
117 |         }
118 | 
119 |         ::slotted(title-text-script) {
120 |           transform: translate(-50%, calc(50% + 0.125em)) rotate(-7.5deg);
121 |           position: absolute;
122 |           left: 50%;
123 |           bottom: 50%;
124 |         }
125 | 
126 |         div {
127 |           transform: perspective(36em) rotate3d(1, 0, 0, 12deg) scale(0.85);
128 |         }
129 |       `;
130 |     }
131 |   }
132 | 
133 |   customElements.define('title-text', TitleTextElement);
134 | 
135 |   class TitleTextLineElement extends LitElement {
136 |     constructor() {
137 |       super();
138 |     }
139 | 
140 |     init() {
141 |       const targetWidth = this.closest('title-text').targetWidthBlock;
142 |       const fontSize = fitText(this, {
143 |         fontFamily: "'Beethoven', 'GN Kill Gothic U', sans-serif",
144 |       }, targetWidth);
145 |       this.style.setProperty('--font-size-fit', fontSize);
146 |     }
147 | 
148 |     connectedCallback() {
149 |       super.connectedCallback();
150 | 
151 |       this.init();
152 | 
153 |       this.observer = new MutationObserver(() => {
154 |         this.init();
155 |       });
156 | 
157 |       this.observer.observe(this, {
158 |         characterData: true,
159 |         childList: true,
160 |         subtree: true,
161 |       });
162 |     }
163 | 
164 |     render() {
165 |       return html`<span><slot></slot></span>`;
166 |     }
167 | 
168 |     static get styles() {
169 |       return css`
170 |         :host {
171 |           display: block;
172 |           font-family: 'Beethoven', 'GN Kill Gothic U', sans-serif;
173 |           font-size: var(--font-size-fit);
174 |           font-weight: bold;
175 |           text-transform: uppercase;
176 |           filter: drop-shadow(0 var(--shadow-size) var(--color-shadow));
177 |           margin: auto;
178 |           text-align: center;
179 |         }
180 | 
181 |         span {
182 |           -webkit-background-clip: text;
183 |           background-clip: text;
184 |           background-color: var(--color-text);
185 |           background-image: var(--color-text);
186 |           -webkit-text-stroke: 0.025em var(--color-stroke);
187 |           text-stroke: 0.025em var(--color-stroke);
188 |           color: transparent;
189 |         }
190 |       `;
191 |     }
192 |   }
193 | 
194 |   customElements.define('title-text-line', TitleTextLineElement);
195 | 
196 |   class TitleTextScriptElement extends LitElement {
197 |     constructor() {
198 |       super();
199 |     }
200 | 
201 |     render() {
202 |       return html`<span><slot></slot></span>`;
203 |     }
204 | 
205 |     init() {
206 |       const targetWidth = this.closest('title-text').targetWidthScript;
207 |       const fontSize = fitText(this, {
208 |         fontFamily: "'Xtreem', '851 Chikara', fantasy",
209 |         textTransform: 'none',
210 |         wordSpacing: '-0.05ch',
211 |       }, targetWidth, true, true);
212 |       this.style.setProperty('--font-size-fit', fontSize);
213 |     }
214 | 
215 |     connectedCallback() {
216 |       super.connectedCallback();
217 | 
218 |       this.init();
219 | 
220 |       this.observer = new MutationObserver(() => {
221 |         this.init();
222 |       });
223 | 
224 |       this.observer.observe(this, {
225 |         characterData: true,
226 |         childList: true,
227 |         subtree: true,
228 |       });
229 |     }
230 | 
231 |     static get styles() {
232 |       return css`
233 |         :host {
234 |           display: block;
235 |           font-family: 'Xtreem', '851 Chikara', fantasy;
236 |           font-weight: bold;
237 |           color: #D41A1A;
238 |           font-size: var(--font-size-fit);
239 |           filter: drop-shadow(0 0.035em #000000);
240 |           width: 100%;
241 |           text-align: center;
242 |           text-transform: none;
243 |           word-spacing: -0.05ch;
244 |         }
245 | 
246 |         :host([lang='ja']) {
247 |           font-size: calc(1.125 * var(--font-size-fit));
248 |           font-style: italic;
249 |         }
250 | 
251 |         ::slotted(span.special-chars) {
252 |           font-family: '851 Chikara', fantasy;
253 |           font-size: 0.5em;
254 |         }
255 | 
256 |         span {
257 |           -webkit-background-clip: text;
258 |           background-clip: text;
259 |           background-color: #D41A1A;
260 |           background-image: linear-gradient(
261 |             to top,
262 |             #C74816,
263 |             #C74816 30%,
264 |             #D41A1A 50%,
265 |             #D41A1A
266 |           );
267 |           color: transparent;
268 |           padding: 0.25em;
269 |         }
270 |       `;
271 |     }
272 |   }
273 | 
274 |   customElements.define('title-text-script', TitleTextScriptElement);
275 | 
276 |   class TitleTextFrameElement extends LitElement {
277 |     constructor() {
278 |       super();
279 |     }
280 | 
281 |     static get properties() {
282 |       return {
283 |         line1: {
284 |           type: String,
285 |           attribute: true,
286 |         },
287 |         line2: {
288 |           type: String,
289 |           attribute: true,
290 |         },
291 |         line3: {
292 |           type: String,
293 |           attribute: true,
294 |         },
295 |         script: {
296 |           type: String,
297 |           attribute: true,
298 |         },
299 |         colorBg: {
300 |           type: String,
301 |           attribute: true,
302 |         },
303 |         colorText: {
304 |           type: String,
305 |           attribute: true,
306 |         },
307 |         colorShadow: {
308 |           type: String,
309 |           attribute: true,
310 |         },
311 |       }
312 |     }
313 | 
314 |     init() {
315 |       this.renderRoot.querySelector('title-text').init();
316 |     }
317 | 
318 |     get isScriptJapanese() {
319 |       return isJapanese(this.script);
320 |     }
321 | 
322 |     get safeScript() {
323 |       const html = this.script.replace(/([^a-zA-Z'"!@\(\)_\-\^ ]+)/g, '<span class="special-chars">$1</span>');
324 |       const template = document.createElement('template');
325 |       template.innerHTML = html;
326 | 
327 |       return template.content;
328 |     }
329 | 
330 |     get colorStroke() {
331 |       if (this.colorText === 'white') {
332 |         return this.colorShadow;
333 |       }
334 | 
335 |       return '_';
336 |     }
337 | 
338 |     get shadowSize() {
339 |       if (this.colorText === 'white' && this.colorShadow === 'black') {
340 |         return '0.2em';
341 |       }
342 | 
343 |       return '0.025em';
344 |     }
345 | 
346 |     render() {
347 |       return html`
348 |         <div class="wrapper" style="
349 |           --color-bg: ${this.colorBg};
350 |           --color-text: ${this.colorText};
351 |           --color-shadow: ${this.colorShadow};
352 |           --color-stroke: ${this.colorStroke};
353 |           --shadow-size: ${this.shadowSize};
354 |         ">
355 |           <title-text>
356 |             ${this.line1 ? html`<title-text-line>${this.line1}</title-text-line>` : ''}
357 |             ${this.line2 ? html`<title-text-line>${this.line2}</title-text-line>` : ''}
358 |             ${this.line3 ? html`<title-text-line>${this.line3}</title-text-line>` : ''}
359 |             ${this.script ? html`
360 |               <title-text-script lang="${this.isScriptJapanese ? 'ja' : undefined}">
361 |                 ${this.safeScript}
362 |               </title-text-script>
363 |             ` : ''}
364 |           </title-text>
365 |         </div>
366 |       `;
367 |     }
368 | 
369 |     static get styles() {
370 |       return css`
371 |         :host {
372 |           display: block;
373 |         }
374 | 
375 |         .wrapper {
376 |           background: #EC164C;
377 |           background: var(--color-bg);
378 |           padding: 20% calc(0.5em + 1vw);
379 |         }
380 |       `;
381 |     }
382 |   }
383 | 
384 |   customElements.define('title-text-frame', TitleTextFrameElement);
385 | 
386 |   class TitleTextFormElement extends LitElement {
387 |     constructor() {
388 |       super();
389 |     }
390 | 
391 |     connectedCallback() {
392 |       super.connectedCallback();
393 | 
394 |       const handleSubmit = async form => {
395 |         await Promise.all([
396 |           customElements.whenDefined('title-text-frame'),
397 |           customElements.whenDefined('aria-status'),
398 |         ]);
399 | 
400 |         const data = new FormData(form);
401 | 
402 |         const frame = this.output.querySelector('title-text-frame');
403 |         frame.hidden = true;
404 | 
405 |         frame.line1 = '';
406 |         frame.line1 = data.get('line1').trim();
407 |         frame.line2 = '';
408 |         frame.line2 = data.get('line2').trim();
409 |         frame.line3 = '';
410 |         frame.line3 = data.get('line3').trim();
411 |         frame.script = '';
412 |         frame.script = data.get('script').trim();
413 |         frame.colorBg = data.get('color_bg');
414 |         frame.colorText = data.get('color_text');
415 |         frame.colorShadow = data.get('color_shadow');
416 | 
417 |         frame.hidden = false;
418 | 
419 |         const status = document.querySelector('aria-status');
420 |         status.message = 'Title generated!';
421 |       };
422 | 
423 |       setTimeout(() => {
424 |         handleSubmit(this.querySelector('form'));
425 |       }, 500);
426 | 
427 |       this.addEventListener('submit', event => {
428 |         event.preventDefault();
429 |         handleSubmit(event.target);
430 | 
431 |         const frame = this.output.querySelector('title-text-frame');
432 |         if ('scrollIntoView' in frame && !isElementInViewport(frame)) {
433 |           frame.scrollIntoView({
434 |             behavior: 'smooth',
435 |             block: 'center',
436 |           });
437 |         }
438 |       });
439 |     }
440 | 
441 |     get output() {
442 |       const controlsId = this.getAttribute('aria-controls');
443 | 
444 |       return document.getElementById(controlsId);
445 |     }
446 | 
447 |     render() {
448 |       return html`<slot></slot>`;
449 |     }
450 | 
451 |     static get styles() {
452 |       return css`
453 |         :host {
454 |           display: block;
455 |         }
456 |       `;
457 |     }
458 |   }
459 | 
460 |   customElements.define('title-text-form', TitleTextFormElement);
461 | 
462 |   class AriaStatusElement extends HTMLElement {
463 |     constructor() {
464 |       super();
465 | 
466 |       this.setAttribute('role', 'alert');
467 |       this.setAttribute('aria-live', 'assertive');
468 |     }
469 | 
470 |     set message(value) {
471 |       this.textContent = '';
472 |       setTimeout(() => {
473 |         this.textContent = value;
474 |       }, 250);
475 |     }
476 |   }
477 | 
478 |   customElements.define('aria-status', AriaStatusElement);
479 | 
480 |   class ColorSelectElement extends LitElement {
481 |     // createRenderRoot() {
482 |     //   return this;
483 |     // }
484 | 
485 |     static get properties() {
486 |       return {
487 |         name: {
488 |           type: String,
489 |           attribute: true,
490 |         },
491 |         label: {
492 |           type: String,
493 |           attribute: true,
494 |         },
495 |       };
496 |     }
497 | 
498 |     connectedCallback() {
499 |       super.connectedCallback();
500 | 
501 |       const input = document.createElement('input');
502 |       input.type = 'hidden';
503 |       input.name = this.name;
504 | 
505 |       this.appendChild(input);
506 |     }
507 | 
508 |     firstUpdated() {
509 |       this.handleChange();
510 |     }
511 | 
512 |     handleChange() {
513 |       this.querySelector('input').value = this.renderRoot.querySelector('input:checked').dataset.value;
514 |     }
515 | 
516 |     render() {
517 |       return html`
518 |         <fieldset @change="${this.handleChange}">
519 |           <legend>${this.label}</legend>
520 | 
521 |           <ul>
522 |             ${Array.from(this.children).map((child, index) => {
523 |               if (!child.matches('color-option')) {
524 |                 return undefined;
525 |               }
526 | 
527 |               const option = child;
528 |               const id = `color${index}`;
529 | 
530 |               return html`
531 |                 <li>
532 |                   <input id="${id}" name="${this.name}" type="radio" ?checked="${option.selected}" data-value="${option.value}">
533 |                   <label for="${id}" style="--bg: ${option.value === '_' ? option.placeholderValue : option.value}; --text: ${option.contrastValue}">
534 |                     ${option.name}
535 |                   </label>
536 |                 </li>
537 |               `;
538 |             })}
539 |           </ul>
540 |         </fieldset>
541 |       `;
542 |     }
543 | 
544 |     static get styles() {
545 |       return css`
546 |         * {
547 |           box-sizing: border-box;
548 |         }
549 | 
550 |         :host {
551 |           display: block;
552 |           text-align: center;
553 |         }
554 | 
555 |         fieldset {
556 |           padding: 0;
557 |           border: 0;
558 |         }
559 | 
560 |         legend {
561 |           display: block;
562 |           font-weight: bold;
563 |           letter-spacing: 0.0625ch;
564 |         }
565 | 
566 |         legend + * {
567 |           margin-top: 0.1875rem;
568 |         }
569 | 
570 |         ul {
571 |           list-style: none;
572 |           padding: 0;
573 | 
574 |           display: flex;
575 |           flex-wrap: wrap;
576 |           margin-left: -0.75rem;
577 |           margin-bottom: -0.75rem;
578 |         }
579 | 
580 |         ul > * {
581 |           flex: 1 1 calc((var(--breakpoint, 15rem) - 100%) * 9999);
582 |           margin: 0 0 0.75rem 0.75rem;
583 |         }
584 | 
585 |         ul > :first-child:nth-last-child(3),
586 |         ul > :first-child:nth-last-child(3) ~ * {
587 |           --breakpoint: 20rem;
588 |         }
589 | 
590 |         ul > :first-child:nth-last-child(4),
591 |         ul > :first-child:nth-last-child(4) ~ * {
592 |           --breakpoint: 30rem;
593 |         }
594 | 
595 |         li {
596 |           position: relative;
597 |         }
598 | 
599 |         input {
600 |           opacity: 0;
601 |           position: absolute;
602 |         }
603 | 
604 |         label {
605 |           display: flex;
606 |           align-items: center;
607 |           justify-content: center;
608 |           background: var(--bg);
609 |           color: var(--text);
610 |           padding: 0.75rem 1.5rem;
611 |           width: 100%;
612 |           font-size: 0.75rem;
613 |           height: 100%;
614 |         }
615 | 
616 |         input:checked ~ label {
617 |           outline: 0.125rem solid currentColor;
618 |           outline-offset: -0.375rem;
619 |         }
620 | 
621 |         input:focus ~ label {
622 |           box-shadow: 0 0 0 0.25rem currentColor;
623 |         }
624 |       `;
625 |     }
626 |   }
627 | 
628 |   customElements.define('color-select', ColorSelectElement);
629 | 
630 |   class ColorOptionElement extends LitElement {
631 |     constructor() {
632 |       super();
633 | 
634 |       this.contrastValue = this.contrastValue ? this.contrastValue : 'black';
635 |     }
636 | 
637 |     static get properties() {
638 |       return {
639 |         name: {
640 |           type: String,
641 |           attribute: true,
642 |         },
643 |         value: {
644 |           type: String,
645 |           attribute: true,
646 |         },
647 |         contrastValue: {
648 |           type: String,
649 |           attribute: 'contrast-value',
650 |         },
651 |         placeholderValue: {
652 |           type: String,
653 |           attribute: 'placeholder-value',
654 |         },
655 |         selected: {
656 |           type: Boolean,
657 |           attribute: true,
658 |         },
659 |       }
660 |     }
661 |   }
662 | 
663 |   customElements.define('color-option', ColorOptionElement);
664 | }
665 | 


--------------------------------------------------------------------------------