diff --git a/DOM.js b/DOM.js index 5af75ca..60cb23b 100644 --- a/DOM.js +++ b/DOM.js @@ -1,7 +1,7 @@ /** * Creates DOM structures from a JS object (structure) * @author Lenin Compres - * @version 1.1.3 + * @version 1.1.4 * @repository https://github.com/lenincompres/DOM.js */ @@ -85,7 +85,7 @@ Element.prototype.set = function (model, ...args) { } if (model._bonds) model = model.bind(); if (model.binders) { - if(DOM.tags.includes(STATION) && !DOM.attributes.includes(STATION)) return this.set({ + if (DOM.tags.includes(STATION) && !DOM.attributes.includes(STATION)) return this.set({ content: model, }, STATION); model.binders.forEach(binder => binder.bind(this, STATION, model.onvalue, model.listener, ["attribute", "attributes"].includes(station) ? station : undefined)); @@ -110,6 +110,10 @@ Element.prototype.set = function (model, ...args) { this.innerText = model; return this; } + if (["markdown", "md"].includes(station)) { + this.innerHTML = model.replace(/^###### (.*$)/gim, '
$1
').replace(/^##### (.*$)/gim, '
$1
').replace(/^#### (.*$)/gim, '

$1

').replace(/^### (.*$)/gim, '

$1

').replace(/^## (.*$)/gim, '

$1

').replace(/^# (.*$)/gim, '

$1

').replace(/\*\*(.*?)\*\*/g, '$1').replace(/__(.*?)__/g, '$1').replace(/\*(.*?)\*/g, '$1').replace(/_(.*?)_/g, '$1').replace(/\[(.*?)\]\((.*?)\)/g, '$1').replace(/^\> (.*$)/gim, '
$1
').replace(/^\* (.*$)/gim, '').replace(/^\d+\. (.*$)/gim, '
  1. $1
').replace(/^\s*([^\n]+)\s*$/gim, '

$1

').replace(/\n{2,}/g, '
').trim(); + return this; + } if (["html", "innerhtml"].includes(station)) { this.innerHTML = model; return this; diff --git a/src/CardScroll.js b/src/CardScroll.js new file mode 100644 index 0000000..04df3f4 --- /dev/null +++ b/src/CardScroll.js @@ -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; \ No newline at end of file diff --git a/src/Copy.js b/src/Copy.js index 323def1..404728d 100644 --- a/src/Copy.js +++ b/src/Copy.js @@ -96,7 +96,7 @@ class Copy { return Copy.copy.next(); } - static pick(map){ + static text(map){ return map[Copy.lang]; } diff --git a/src/news.js b/src/news.js index 9f6dae8..9d722ad 100644 --- a/src/news.js +++ b/src/news.js @@ -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; \ No newline at end of file +export default news; \ No newline at end of file diff --git a/src/pages.js b/src/pages.js index 72de00c..7b35cf0 100755 --- a/src/pages.js +++ b/src/pages.js @@ -3,7 +3,8 @@ import allProjects from "./projects.js" import * as STYLE from "./style.js"; import SOCIAL_LINKS from "./social.js"; import Copy from "./Copy.js"; -import newsSection from "./news.js"; +import CardScroll from "./CardScroll.js"; +import news from "./news.js"; const projects = allProjects.filter(p => !p.hidden); const activeProject = new Binder(); @@ -34,14 +35,14 @@ Copy.add({ export const PAGES = { [Copy.KEY.home]: { - section: newsSection, + section: new CardScroll(news), }, [Copy.KEY.bio]: { section: { style: STYLE.PAGE, lineHeight: "1.5em", content: { - p: Copy.pick({ + p: Copy.text({ es: `Lenin Comprés (también conocido como Prof. Lenino) es un profesional en medios interactivos, ciencias de la educación y artes escénicas. Se desempeña como profesor y tecnólogo creativo en la Escuela de Artes TISCH de la Universidad de Nueva York y es graduado de Teachers College de la Universidad de Columbia. Lenin es coautor del guion galardonado de Mis 500 locos, que representó a la República Dominicana en los Óscares de 2021. También es el creador de Lenino’s JACK RABBITS, el primer juego de mesa original escrito por un dominicano, que cuenta con un manual de instrucciones completamente en verso y rima. Como artista, se presenta bajo su seudónimo Lenino como un cuentacuentos musicómico.`, en: `Lenin Comprés (also known as Prof. Lenino) is a professional in interactive media, educational sciences, and performing arts. He serves as a professor and creative technologist at New York University's TISCH School of the Arts and holds a degree from Columbia University's Teachers College. Lenin is the co-writer of the award-winning script for A State of Madness, which represented the Dominican Republic at the 2021 Oscars. He is also the creator of Lenino’s JACK RABBITS, the first original Dominican-authored board game featuring an instructional booklet written entirely in verse and rhyme. As an artist, he performs as a quirky musical storyteller under his Lenino moniker.` }), diff --git a/src/style.js b/src/style.js index 0485a9b..c4ced45 100755 --- a/src/style.js +++ b/src/style.js @@ -1,6 +1,6 @@ export const COLOR = { LINK: '#055', - LINK_DARK: '#033', + LINK_DARK: '#003333', BACKGROUND: 'rgb(68, 85, 51)', HIGHLIGHT: 'rgb(0, 180, 180)', PAGE: '#F5DC9A',