-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e90ab48
commit b5201d8
Showing
6 changed files
with
147 additions
and
86 deletions.
There are no files selected for viewing
This file contains 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 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,110 @@ | ||
| import { | ||
| COLOR | ||
| } from "./style.js"; | ||
|
|
||
| class CardScroll extends HTMLElement { | ||
| constructor(items = [], SPEED = 500) { | ||
| if(!Array.isArray(items)) items = [items]; | ||
| super(); | ||
| this._ITEMS = new Binder([]); | ||
| this._SELECTED = new Binder(-1); | ||
| this.set({ | ||
| content: this._ITEMS.as(items => ({ | ||
| margin: "6em auto", | ||
| position: "relative", | ||
| width: "20em", | ||
| height: "30em", | ||
| section: items.map((item, i) => { | ||
| const diff = val => i - val; | ||
| const dist = val => items.length - Math.abs(diff(val)); | ||
| const shade = val => Math.abs(diff(val)) / (items.length + 2); | ||
| return { | ||
| position: 'absolute', | ||
| width: "20em", | ||
| height: "30em", | ||
| backgroundColor: "white", | ||
| borderRadius: "2em", | ||
| boxShadow: "1px 1px 3px black", | ||
| overflow: "hidden", | ||
| border: "solid 1em white", | ||
| transition: SPEED + "ms", | ||
| borderColor: this._SELECTED.as(val => val === i ? 'white' : `rgba(34,64,64,${shade(val)})`), | ||
| cursor: this._SELECTED.as(val => val === i ? 'auto' : 'pointer'), | ||
| zIndex: this._SELECTED.as(dist), | ||
| transform: this._SELECTED.as(val => `rotate(${ 30 * items.length * (1-shade(val)) * diff(val)/items.length}deg)`), | ||
| left: this._SELECTED.as(val => val === i ? 0 : val > i ? '-20em' : '33.3em'), | ||
| top: this._SELECTED.as(val => val === i ? 0 : '25%'), | ||
| fontSize: this._SELECTED.as(val => val === i ? '1em' : `0.6em`), | ||
| main: { | ||
| pointerEvents: this._SELECTED.as(val => val === i ? 'auto' : 'none'), | ||
| content: item, | ||
| }, | ||
| div: { | ||
| top: 0, | ||
| left: 0, | ||
| position: 'absolute', | ||
| opacity: this._SELECTED.as(val => val === i ? 0 : shade(val)), | ||
| backgroundColor: COLOR.LINK_DARK, | ||
| transition: SPEED + "ms", | ||
| width: "100%", | ||
| height: "100%", | ||
| pointerEvents: "none", | ||
| }, | ||
| onclick: e => this._SELECTED.value != i ? this.selected += i > this.selected ? 1 : -1 : null, | ||
| } | ||
| }), | ||
| b: { | ||
| color: "black", | ||
| backgroundColor: "white", | ||
| borderRadius: "1.5em", | ||
| lineHeight: "1em", | ||
| width: "3em", | ||
| height: "3em", | ||
| padding: "1em", | ||
| textAlign: "center", | ||
| position: "absolute", | ||
| top: "50%", | ||
| zIndex: items.length, | ||
| pointerEvents: "none", | ||
| transition: SPEED + "ms", | ||
| content: [{ | ||
| left: "-20%", | ||
| text: "◀", | ||
| opacity: this._SELECTED.as(val => val > 0 ? 1 : 0), | ||
| }, { | ||
| text: "▶", | ||
| right: "-20%", | ||
| opacity: this._SELECTED.as(val => val > -1 && items.length > 1 && val < items.length - 1 ? 1 : 0), | ||
| }], | ||
| onready: me => setTimeout(() => this.selected = 0, 2 * SPEED), | ||
| }, | ||
| })) | ||
| }); | ||
| this.items = items; | ||
| } | ||
|
|
||
| get selected() { | ||
| return this._SELECTED.value; | ||
| } | ||
|
|
||
| set selected(n) { | ||
| this._SELECTED.value = n; | ||
| } | ||
|
|
||
| get items() { | ||
| return this._ITEMS.value; | ||
| } | ||
|
|
||
| set items(items) { | ||
| if(!Array.isArray(items)) items = [items]; | ||
| this._ITEMS.value = items; | ||
| } | ||
|
|
||
| clear() { | ||
| this.selected = -1; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| customElements.define('card-scroll', CardScroll); | ||
| export default CardScroll; |
This file contains 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 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,84 +1,30 @@ | ||
| import Copy from "./Copy.js"; | ||
| import { | ||
| COLOR | ||
| } from "./style.js"; | ||
|
|
||
| const _SELECTED_NEWS = new Binder(-1); | ||
|
|
||
| const news = [{ | ||
| title: Copy.pick({ | ||
| es: "¡Noticias!", | ||
| en: "News!", | ||
| }), | ||
| img: "assets/poster.jpg", | ||
| desc: Copy.pick({ | ||
| es: 'Es Octubre y Lenino sale de su madriguera a cantarle cuentos a las brujas, ogros, duendes y hadas que se manifiesten la noche del 3 de Noviembre en ', | ||
| en: `It is October and Lenino comes out of his burrow to sing stories to the witches, ogres, goblins and fairies that appear on the night of November 3 at `, | ||
| }), | ||
| link: { | ||
| target: "_blank", | ||
| href: "https://www.google.com/maps/place/Ca%C3%B1ave/@40.8644495,-73.9289111,15z/data=!4m6!3m5!1s0x89c2f559184229cb:0x994c7ec6855fdb5!8m2!3d40.8644495!4d-73.9289111!16s%2Fg%2F11g0hldvl4?entry=ttu&g_ep=EgoyMDI0MTAyMC4xIKXMDSoASAFQAw%3D%3D", | ||
| text: "Cañave", | ||
| let news = [{ | ||
| href: "https://www.google.com/maps/place/Ca%C3%B1ave/@40.8644495,-73.9289111,15z/data=!4m6!3m5!1s0x89c2f559184229cb:0x994c7ec6855fdb5!8m2!3d40.8644495!4d-73.9289111!16s%2Fg%2F11g0hldvl4?entry=ttu&g_ep=EgoyMDI0MTAyMC4xIKXMDSoASAFQAw%3D%3D", | ||
| get a() { | ||
| return ({ | ||
| href: this.href, | ||
| target: "_blank", | ||
| img: { | ||
| width: "100%", | ||
| alt: Copy.text({ | ||
| es: "desCONCIERTO de Jalogüín", | ||
| en: "A Halloween disCONCERT", | ||
| }), | ||
| src: "assets/poster.jpg", | ||
| }, | ||
| }) | ||
| }, | ||
| }]; | ||
|
|
||
| const newsSection = DOM.element({ | ||
| margin: "6em auto", | ||
| position: "relative", | ||
| width: "20em", | ||
| section: news.map((n, i) => ({ | ||
| position: 'absolute', | ||
| width: "20em", | ||
| left: _SELECTED_NEWS.as(val => val === i ? 0 : val > i ? '-20em' : '20em'), | ||
| right: 0, | ||
| backgroundColor: "white", | ||
| borderRadius: "1.5em", | ||
| boxShadow: "1px 1px 3px black", | ||
| padding: "1em", | ||
| transform: _SELECTED_NEWS.as(val => val === i ? `rotate(${-5+i}deg)` : val > i ? "rotate(-45deg)" : "rotate(40deg)"), | ||
| transition: "1000ms", | ||
| opacity: _SELECTED_NEWS.as(val => val === i ? 1 : 0), | ||
| h2: { | ||
| textAlign: "center", | ||
| text: n.title, | ||
| }, | ||
| img: { | ||
| width: "100%", | ||
| src: n.img, | ||
| }, | ||
| p: { | ||
| text: n.desc, | ||
| a: n.link, | ||
| span: '.', | ||
| }, | ||
| onready: me => setTimeout(() => i === 0 ? _SELECTED_NEWS.value = i : null, 1000), | ||
| })), | ||
| a: { | ||
| hover: { | ||
| backgroundColor: COLOR.LINK + "! important", | ||
| color: "white", | ||
| }, | ||
| backgroundColor: "white", | ||
| padding: "1em", | ||
| borderRadius: "1.5em", | ||
| lineHeight: "1em", | ||
| width: "3em", | ||
| textAlign: "center", | ||
| boxShadow: "1px 1px 3px black", | ||
| position: "absolute", | ||
| top: "10em", | ||
| content: [{ | ||
| left: "-4em", | ||
| text: "◀", | ||
| display: _SELECTED_NEWS.as(val => val > 0 ? "block" : "none"), | ||
| click: () => _SELECTED_NEWS.value = _SELECTED_NEWS.value - 1, | ||
| }, { | ||
| text: "▶", | ||
| right: "-4em", | ||
| display: _SELECTED_NEWS.as(val => news.length > 1 && val < news.length - 1 ? "block" : "none"), | ||
| click: () => _SELECTED_NEWS.value = _SELECTED_NEWS.value + 1, | ||
| }], | ||
| get div() { | ||
| return ({ | ||
| marginBottom: "1em", | ||
| markdown: Copy.text({ | ||
| es: `Es Octubre y Lenino sale de su madriguera a cantarle cuentos a las brujas, ogros, duendes y hadas que se manifiesten la noche del **3 de Noviembre** en [Cañave](${this.href}).`, | ||
| en: `It is October and Lenino comes out of his burrow to sing stories to the witches, ogres, goblins and fairies that appear on the night of **November 3** at [Cañave](${this.href}).`, | ||
| }), | ||
| }) | ||
| } | ||
| }, 'aside'); | ||
| }]; | ||
|
|
||
| export default newsSection; | ||
| export default news; |
This file contains 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 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