News widget

index.js

@@ -1,29 +1,21 @@
-import * as STYLE from "./modules/style.js";
-import PAGES from "./modules/pages.js";
-import INSTAGRAM from "./modules/widgets/instagram.js";
-import TWITTER from "./modules/widgets/twitter.js";
-import MUSICPLAYER from "./modules/widgets/musicplayer.js";
-import SOCIAL_LINKS from "./modules/widgets/social.js";
-import slideDown from "./modules/animations.js";
-import Copy from "./classes/Copy.js";
-
-window.THIS_URL = window.location.href.split('#')[0].split('?')[0];
-const QS = DOM.querystring();
-window.LANG = QS.lang ? QS.lang : "en";
+import * as STYLE from "./src/style.js";
+import PAGES from "./src/pages.js";
+import SOCIAL_LINKS from "./src/social.js";
+import slideDown from "./src/animations.js";
+import Copy from "./src/Copy.js";
 
 const _IS_MOBILE = new Binder();
 const _IS_WIDE = new Binder();
-const _CURRENT_PAGE = new Binder(0);
+const _CURRENT_PAGE = new Binder(window.location.hash.split("#")[1]);
 const _HOVER_PAGE = new Binder();
-
-const pageNames = Object.keys(PAGES);
-
 function setSize(e) {
   _IS_MOBILE.value = window.innerWidth < 780;
   _IS_WIDE.value = window.innerWidth > 1050;
 };
 
-if (window.location.hash) _CURRENT_PAGE.value = window.location.hash.split("#")[1];
+const PAGE_NAMES = Object.keys(PAGES);
+
+if(!_CURRENT_PAGE.value) _CURRENT_PAGE.value = Copy.KEY.home;
 
 Copy.add({
   storyteller: {
@@ -127,7 +119,7 @@ DOM.set({
               fontFamily: "title, Georgia, \"Times New Roman\", Times, serif",
               text: "Lenino",
             },
-            click: e => _CURRENT_PAGE.value = pageNames[0],
+            click: e => _CURRENT_PAGE.value = PAGE_NAMES[0],
           }
         },
         tagline: {
@@ -168,12 +160,12 @@ DOM.set({
           whiteSpace: "nowrap",
           overflow: "hidden",
           textOverflow: "ellipsis",
-          content: pageNames.map(name => ({
+          content: PAGE_NAMES.map(name => ({
             backgroundColor: _CURRENT_PAGE.as({
               [name]: STYLE.COLOR.LINK_DARK,
               default: STYLE.COLOR.LINK,
             }),
-            display: _IS_MOBILE.as(val => (val || name !== pageNames.slice(-1)[0]) && name !== pageNames[0], "none", "block"),
+            display: _IS_MOBILE.as(val => (val || name !== PAGE_NAMES.slice(-1)[0]) && name !== PAGE_NAMES[0], "none", "block"),
             boxShadow: bind([_HOVER_PAGE, _CURRENT_PAGE], (over, current) =>
               current === name ?
               STYLE.SHADOW.INSET :

classes/Copy.js → src/Copy.js

@@ -25,6 +25,7 @@ class Copy {
     this.lang = Copy.lang;
     this.key = Object.keys(this.map)[0];
     this.counter = {};
+    this.KEY = {};
   }
 
   add(key, val) {
@@ -33,9 +34,10 @@ class Copy {
     }
     if (this.map[key]) {
       console.error(`Key "${key}" already exists in copy.`);
-      return "sd"; 
+      return "sd";
     }
     this.map[key] = val;
+    this.KEY[key] = key;
     return this.get(key);
   }
 
@@ -67,11 +69,11 @@ class Copy {
     return Copy.treat(val[Object.keys(val)[0]]);
   }
 
-  static treat(s){
-    if(!s) return s;
-    if(Array.isArray(s)) return s.map(i => Copy.treat(i));
-    //if(s.includes('\n')) return Copy.treat(s.split('\n'));
-    return s.replaceAll('—', '<em class="em-dash">--</em>');
+  static treat(s) {
+    if (!s) return s;
+    if (Array.isArray(s)) return s.map(i => Copy.treat(i));
+    //if(s.includes("\n")) return Copy.treat(s.split("\n"));
+    return s.replaceAll("—", '<em class="em-dash">--</em>');
   }
 
   next() {
@@ -84,7 +86,7 @@ class Copy {
 
   static add(...args) {
     return Copy.copy.add(...args);
-  } 
+  }
 
   static get(...args) {
     return Copy.copy.get(...args);
@@ -94,8 +96,12 @@ class Copy {
     return Copy.copy.next();
   }
 
+  static pick(map){
+    return map[Copy.lang];
+  }
+
   static set lang(val) {
-    localStorage.setItem('copy-lang', val);
+    localStorage.setItem("copy-lang", val);
     location.reload();
   }
 
@@ -110,19 +116,30 @@ class Copy {
     },
   }
 
+  static get KEY(){
+    return Copy.copy.KEY;
+  }
+
+  static addKey(...keys) {
+    keys.forEach(key => {
+      if(Copy.KEY[key]) console.error(`Copy KEY ${key} already exists.`);
+      else Copy.copy.KEY[key] = key;
+    });
+  }
+
   static get lang() {
-    let lang = "en";//Copy.LANG.EN.code;
+    let lang = "en"; //Copy.LANG.EN.code;
     if (navigator && navigator.language) {
       lang = navigator.language.split("-")[0];
     }
-    let savedLang = localStorage.getItem('copy-lang');;
+    let savedLang = localStorage.getItem("copy-lang");;
     if (savedLang) {
       lang = savedLang;
     }
     return lang;
   }
 
-  static getToggleLink(...langs){
+  static getToggleLink(...langs) {
     return langs.map(lang => ({
       display: Copy.lang !== lang.code ? "block" : "none",
       text: lang.name,

src/news.js

@@ -0,0 +1,84 @@
+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",
+  },
+}];
+
+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,
+    }],
+  }
+}, 'aside');
+
+export default newsSection;