charles texts

11 files changed, 200 insertions, 54 deletions

diff --git a/frontend/app/views/tile/forms/tile.constants.js b/frontend/app/views/tile/forms/tile.constants.js
index d7dea31..273085c 100644
--- a/frontend/app/views/tile/forms/tile.constants.js
+++ b/frontend/app/views/tile/forms/tile.constants.js
@@ -64,6 +64,8 @@ export const CURSORS = [
 export const MARQUEE_DIRECTIONS = [
   { name: 'left', label: 'Left', },
   { name: 'right', label: 'Right', },
+  // { name: 'up', label: 'Up', },
+  // { name: 'down', label: 'Down', },
 ]
 
 export const UNITS = [
diff --git a/frontend/app/views/tile/forms/tile.form.hyperlink.js b/frontend/app/views/tile/forms/tile.form.hyperlink.js
index b9fb038..b536e1c 100644
--- a/frontend/app/views/tile/forms/tile.form.hyperlink.js
+++ b/frontend/app/views/tile/forms/tile.form.hyperlink.js
@@ -21,10 +21,10 @@ export default function TileHyperlinkForm({ tile, pageList, popupList, cursors,
   //   tile.target_page_id === CLOSE_POPUP_LINK
   // )
   let cursor
-  console.log(tile.settings.cursor, tile.settings.custom_cursor_id)
+  // console.log(tile.settings.cursor, tile.settings.custom_cursor_id)
   if (tile.settings.cursor === 'custom' && tile.settings.custom_cursor_id) {
     cursor = cursors[tile.settings.custom_cursor_id]
-    console.log(cursor)
+    // console.log(cursor)
   }
   return (
     <div>
diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js
index cfd4b30..373dca0 100644
--- a/frontend/app/views/tile/handles/tile.text.js
+++ b/frontend/app/views/tile/handles/tile.text.js
@@ -2,6 +2,11 @@ import React from 'react'
 import { generateTransform, unitsDimension, hexToRgb, pickCursor } from 'app/views/tile/tile.utils'
 import Marquee from "react-fast-marquee"
 
+const VERTICAL_MARQUEE_DIRECTION = {
+  up: "left",
+  down: "right",
+}
+
 export default function TileText({ tile, box, bounds, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
   if (!tile.settings.content) {
     return null
@@ -37,20 +42,32 @@ export default function TileText({ tile, box, bounds, videoBounds, cursors, view
   style.color = tile.settings.font_color || '#dddddd!important'
 
   if (tile.settings.is_marquee) {
+    const verticalDirection = VERTICAL_MARQUEE_DIRECTION[tile.settings.marquee_direction]
+    const direction = verticalDirection || tile.settings.marquee_direction || "left"
     const gradientColor = hexToRgb(tile.settings.marquee_gradient_color)
-    style.width = "100vw"
-    style.height = style.fontSize + "px"
+    let contentStyle = {}
+    if (verticalDirection) {
+      // style.top = 0
+      style.width = "100vh"
+      style.height = tile.settings.marquee_content_width + "px"
+      style.transform += " rotate(90deg)"
+      contentStyle.transform = "rotate(-90deg)"
+      contentStyle.width = tile.settings.marquee_content_width + "px"
+      // contentStyle.height = "100vh"
+    } else {
+      style.width = "100vw"
+      style.height = style.fontSize + "px"
+      contentStyle.width = (tile.settings.marquee_content_width || 200) + "px"
+      contentStyle.height = (tile.settings.marquee_content_height || (parseInt(tile.settings.font_size) + 20)) + "px"
+    }
     content = (
       <Marquee
-        direction={tile.settings.marquee_direction || "left"}
+        direction={direction}
         speed={tile.settings.marquee_speed || 1}
         gradient={!!tile.settings.marquee_gradient}
         gradientColor={gradientColor ? [gradientColor.r, gradientColor.g, gradientColor.b] : [0,0,0]}
       >
-        <div style={{
-          width: (tile.settings.marquee_content_width || 200) + "px",
-          height: (tile.settings.marquee_content_height || (parseInt(tile.settings.font_size) + 20)) + "px",
-        }}>
+        <div style={contentStyle}>
           {content}
         </div>
       </Marquee>
diff --git a/frontend/site/projects/museum/text-overlays.js b/frontend/site/projects/museum/text-overlays.js
index 10978cc..dc15f50 100644
--- a/frontend/site/projects/museum/text-overlays.js
+++ b/frontend/site/projects/museum/text-overlays.js
@@ -1,15 +1,22 @@
 export const DEFAULT_ICON = "/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-33.png"
 
 export const TEXT_OVERLAYS = {
+  /* nora al-badri */
+
   'nora-2': {
     style: {
-      top: "1rem",
+      top: "4rem",
       right: "1rem",
+      color: "#fff",
+      width: "43vw",
+    },
+    textStyle: {
+      top: "1rem",
+      right: "3vw",
+      background: "rgba(0,0,0,0.7)",
     },
     text: `
-      <p>
-        <b>AFU. This is not a hackerspace.</b>
-      </p>
+      <h2>AFU. This is not a hackerspace.</h2>
       <p>
         Welcome to some savage archaeology in outta space! Occupy Archaeology! Occupy hackerspaces!
       </p>
@@ -33,9 +40,7 @@ export const TEXT_OVERLAYS = {
       right: "1rem",
     },
     text: `
-      <p>
-        <b>Nature/Nefertiti</b>
-      </p>
+      <h2>Nature/Nefertiti</h2>
       <p>
         In another time and space Nefertiti comes back to us replanted as a spirit on our ship. A vigorous leader at the Nile by nature rejecting domination. Her eco feminism started with the sun, Aton, as source of energy and leaves her in a body of plants along the Nile waters to be found. Worshipping non-invasive technologies as well as all lifeforms and plants of the planetary realm. She is the brown divine eco-cyberfeminist. She changed and went on to be the 3D printed casted icon and  is the spirit in the domain of tinkering. Tinkering that is happening in a political context in a more equal society. Not the tinkering that is reserved to the privileged classes. 
       </p>
@@ -48,9 +53,7 @@ export const TEXT_OVERLAYS = {
       right: "1rem",
     },
     text: `
-      <p>
-        <b>Horus/Her</b>
-      </p>
+      <h2>Horus/Her</h2>
       <p>
         Horus is a multilayered sky spirit and shapeshifter reflecting our many existing realities. Her is diasporic roaming the planets without borders nowhere in exile but belonging everywhere. A secret feathered daughter of Isis she will provide safety for the marginalised and disenfranchised. She is the protective spirit of our hackerspaces that are not just open, but also safe and that add a layer of care, love and compassion to the space.Her domain is the dream, our dreams in which we are also flying. A bird of prey she will fight her enemies with no mercy.  
       </p>
@@ -62,9 +65,7 @@ export const TEXT_OVERLAYS = {
       right: "1rem",
     },
     text: `
-      <p>
-        <b>Foundation Peg/Nin</b>
-      </p>
+      <h2>Foundation Peg/Nin</h2>
       <p>
         The many pegs are placed within the chaotic structure of the spaceship. They are part of the infrastructure and mark the inner world of the mothership. The ritualistic pegs with their hieroglyphic encryption are not meant to be seen by the public once the spaceship is on its way. She is the material commemoration and dedication to our female spirits that is a marker of the gender fluidity and syncretism over time.
       </p>
@@ -76,9 +77,7 @@ export const TEXT_OVERLAYS = {
       right: "1rem",
     },
     text: `
-      <p>
-        <b>Lamma</b>
-      </p>
+      <h2>Lamma</h2>
       <p>
         She, the powerful who protects you. A hybrid microcosm herself, her powers go beyond this cosmos and our understanding of bodies. She switched gender many times. One of the most popular spirits, the most numerous on seals. Protectress, intercessor, and guardian. The protector of our divine places, for mothers and non-mothers for spouses and non-spouses. She will talk in your name to other spirits no matter their ranks and she can mediate between you, the divine, other species and the machine.
       </p>
@@ -90,12 +89,122 @@ export const TEXT_OVERLAYS = {
       left: "1rem",
     },
     text: `
+      <h2>Queen of the Hacker Night</h2>
       <p>
-        <b>Queen of the Hacker Night</b>
+        Sister Ishtar. Around her it was dark and noisy in the server room and her body red and glowing in that windowless nights of computation. She is gracefully watching over our multiplying feminist servers. Caressing our creatures. A creature herself. Caressing also the machines that she built with her body and mind. She has many superpowers one of which is to rule the underworld and to break meritocratic assertiveness. She laughs at the hackers stupidity who believe in skills and meritocracy, a term coined by a poor fella who meant it satirical. She rewards practices in free software production that are outside of coding such as building a compassionate community.
       </p>
+    `
+  },
+
+  /* charles stankievech */
+
+  'stankievech-1': {
+    popup: "stars",
+    style: {
+      width: "40vw",
+      left: "5vw",
+      top: "42vh",
+      height: "auto",
+      transform: "translateY(-50%)",
+      cursor: "none",
+    },
+    text: `
+      <h2>Mountain of the Sun, Cosmic Cave</h2>
       <p>
-        Sister Ishtar. Around her it was dark and noisy in the server room and her body red and glowing in that windowless nights of computation. She is gracefully watching over our multiplying feminist servers. Caressing our creatures. A creature herself. Caressing also the machines that she built with her body and mind. She has many superpowers one of which is to rule the underworld and to break meritocratic assertiveness. She laughs at the hackers stupidity who believe in skills and meritocracy, a term coined by a poor fella who meant it satirical. She rewards practices in free software production that are outside of coding such as building a compassionate community.
+        This 'mountain of the sun', as it is also called, is the equivalent of Meru, also entitled 'white mountain'. Meru is encircled by a green belt, by the fact of being situated in the middle of the sea, and a triangle of light radiates at its peak. / We have said that the zodiac’s two gates which are respectively the entry to and exit from the ‘cosmic cave’, and which certain traditions designate as the ‘gate of men’ and the ‘gate of the gods’, inevitably must correspond to the two solstices.
+      </p>
+      <div style="text-align: right">Rene Guenon, <i>Lord of the World</i>, 1927 / <i>Etudes Traditionnelles</i>, 1938</div>
+    `
+  },
+  'stankievech-2': {
+    popup: "temple",
+    style: {
+      width: "40vw",
+      left: "3vw",
+      top: "2vh",
+      height: "auto",
+      cursor: "none",
+    },
+    text: `
+      <h2>An Exhibition of Clammy Solitude</h2>
+      <p>
+        If an artist could see the world through the eyes of a caterpillar he might be able to make some fascinating art. Each one of these secret dens was also the entrance to the abyss. Dungeons that dropped away from the eyes into a damp cosmos of fungus and mold-an exhibition of clammy solitude. The double aspect of Quetzalcoatl is less a person than an operation of totemic perception. Quetzalcoatl becomes one half of an enantiomorph (coatl means twin) in search of the other half. A mirror looking for its reflection but never quite finding it. The morning star of Quetzal is apt to be polarized in the shadowy reflection of the evening star. 
+      </p>
+      <div style="text-align: right">Robert Smithson, <i>Incidents of Mirror-Travel in the Yucatan</i>, 1969</div>
+    `
+  },
+  'stankievech-3': {
+    popup: "hypercard",
+    style: {
+      width: "40vw",
+      right: "5vw",
+      top: "50%",
+      transform: "translateY(-50%)",
+      height: "auto",
+      cursor: "none",
+    },
+    text: `
+      <h2>Superpositionality of the Hidden People</h2>
+      <p>
+        Down where the “Hidden People” live, inside their private rock dwellings, where humans who visit them can be closed in and never find a way out again. Iceland spar is what hides the Hidden People, makes it possible for them to move through the world that thinks of itself as “era,” provides that all-important ninety-degree twist to their light, so they can exist alongside our own world but not be seen. They and others as well, visitors from elsewhere, of non-human aspect.
+      </p>
+      <div style="text-align: right">Thomas Pynchon, <i>Against the Day</i>, 2006</div>
+    `
+  },
+  'stankievech-4': {
+    popup: "vr",
+    style: {
+      width: "40vw",
+      left: "5vw",
+      top: "50%",
+      transform: "translateY(-50%)",
+      height: "auto",
+      cursor: "none",
+      background: "rgba(255,255,255,0.5)",
+    },
+    text: `
+      <h2>They Simply Pointed to the Sky</h2>
+      <p>
+        The Sumerian word AN.BAR, the oldest word designating iron, is made up of the pictograms ‘sky’ and ‘fire.’... <i>We</i> shall do well to bear in mind the early religious significance attaching to aeroliths. They fall to earth charged with celestial sanctity; in a way, they represent heaven. This suggests why so many meteorites were worshipped or identified with a deity. ... peoples worked with meteoric iron for a long time before learning how to use ferrous ores. ...When Cortez enquired of the Aztec chiefs whence they obtained their knives they simply pointed to the sky.
+      </p>
+      <div style="text-align: right">Mircea Eliade, <i>The Forge and the Crucible</i>, 1956</div>
+    `
+  },
+  'stankievech-5': {
+    popup: "magritte",
+    style: {
+      width: "40vw",
+      right: "5vw",
+      top: "50%",
+      transform: "translateY(-50%)",
+      height: "auto",
+      cursor: "none",
+      background: "rgba(255,255,255,0.5)",
+    },
+    text: `
+      <h2>The Glass Key</h2>
+      <p>
+        Seeing the egg is impossible: the egg is supervisible just as there are supersonic sounds. No one can see the egg. Does the dog see the egg? Only machines see the egg. —The egg is invisible to the naked eye. From one egg to another one arrives at God, who is invisible to the naked eye. —The egg could have been a triangle that rolled for so long in space that it became oval. —Is the egg basically a vessel? Could it have been the first vessel sculpted by the Etruscans? No. The egg originated in Macedonia. There it was calculated, fruit of the most arduous spontaneity. In the sands of Macedonia a man holding a stick drew it. And then erased it with his bare foot.
+      </p>
+      <div style="text-align: right">Clarice Lispector, <i>The Egg and the Chicken</i>, 1964</div>
+    `
+  },
+  'stankievech-6': {
+    popup: "trinity",
+    style: {
+      width: "40vw",
+      left: "5vw",
+      top: "50%",
+      transform: "translateY(-50%)",
+      height: "auto",
+      cursor: "none",
+    },
+    text: `
+      <h2>The Desert Turned to Glass</h2>
+      <p>
+        My anarchy obeys subterraneously a law in which I deal occultly with astronomy, mathematics and mechanics. And my hunger is fed by these putrefying beings in decomposition. My rite is a purifier of forces. But malignancy exists in the jungle. I swallow a mouthful of blood that fills me entirely. I hear cymbals and trumpets and tambourines that fill the air with noise and uproar drowning out the silence of the disc of the sun and its marvel. I want a cloak woven from threads of solar gold. The sun is the magical tension of the silence. On my journey to the mysteries I hear the carnivorous plant that laments times immemorial: and I have obscene nightmares beneath the sick winds. I am enchanted, seduced, transfixed by furtive voices. The almost unintelligible cuneiform inscriptions speak of how to conceive and give formulae about how to feed from the force of darkness. They speak of naked and crawling females. And the solar eclipse causes secret terror that nonetheless announces a splendor of heart.
       </p>
+      <div style="text-align: right">Clarice Lispector, <i>Agua Viva</i>, 1973</div>
     `
   },
-}
\ No newline at end of file
+}
diff --git a/frontend/site/projects/museum/views/nav.css b/frontend/site/projects/museum/views/nav.css
index cb21046..27b9190 100644
--- a/frontend/site/projects/museum/views/nav.css
+++ b/frontend/site/projects/museum/views/nav.css
@@ -51,6 +51,9 @@
   stroke: rgba(255, 121, 13, 1.0);
   stroke-width: 2px;
 }
+.nav-arrow:hover path {
+  stroke: rgba(255, 255, 255, 1.0);
+}
 .nav-arrow.arrow-left {
   left: 0;
 }
diff --git a/frontend/site/projects/museum/views/overlay.css b/frontend/site/projects/museum/views/overlay.css
index 1a00b95..6483b28 100644
--- a/frontend/site/projects/museum/views/overlay.css
+++ b/frontend/site/projects/museum/views/overlay.css
@@ -5,16 +5,11 @@
 }
 .text-overlay {
   position: fixed;
-  background: black;
-  border: 2px solid;
   padding: 1rem;
   font-size: 1rem;
   font-family: 'Helvetica', sans-serif;
   cursor: url(/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-33.png) 50 50, pointer;
-  color: #FF790D;
-  max-width: 400px;
-  max-height: 400px;
-  overflow: auto;
+  color: #000;
 }
 .text-overlay::-webkit-scrollbar {
   background: transparent;
@@ -25,5 +20,9 @@
 }
 .text-overlay p {
   margin: 0 0 1rem 0;
-  line-height: 1.3;
+  line-height: 1.7;
+}
+.text-overlay h2 {
+  font-family: 'Druk Wide', sans-serif;
+  font-size: 22px;
 }
diff --git a/frontend/site/projects/museum/views/text.overlay.js b/frontend/site/projects/museum/views/text.overlay.js
index 65fc3b2..9627901 100644
--- a/frontend/site/projects/museum/views/text.overlay.js
+++ b/frontend/site/projects/museum/views/text.overlay.js
@@ -48,8 +48,10 @@ class TextOverlay extends Component {
 
   render() {
     const { open, content } = this.state
-    if (!this.props.interactive || !content) return null
-    if (!open) {
+    const { popups, interactive } = this.props
+    if (!interactive || !content) return null
+    if (content.popup && !popups[content.popup]) return null
+    if (!content.popup && !open) {
       return (
         <div
           className="text-overlay-icon"
@@ -64,7 +66,10 @@ class TextOverlay extends Component {
     return (
       <div
         className="text-overlay"
-        style={content.style}
+        style={{
+          ...content.style,
+          ...(content.textStyle || {}),
+        }}
         onClick={this.toggle}
         dangerouslySetInnerHTML={{ __html: content.text }}
       />
@@ -73,6 +78,7 @@ class TextOverlay extends Component {
 }
 
 const mapStateToProps = state => ({
+  popups: state.site.popups,
   interactive: state.site.interactive,
 })
 
diff --git a/frontend/site/site/site.actions.js b/frontend/site/site/site.actions.js
index f0eeebc..6854414 100644
--- a/frontend/site/site/site.actions.js
+++ b/frontend/site/site/site.actions.js
@@ -19,4 +19,8 @@ export const loadGraph = graph_name => dispatch => (
 
 export const interact = () => dispatch => {
   dispatch({ type: types.site.interact })
-}
\ No newline at end of file
+}
+
+export const setPopups = popups => dispatch => (
+  dispatch({ type: types.site.set_popups, popups })
+)
diff --git a/frontend/site/site/site.reducer.js b/frontend/site/site/site.reducer.js
index 8b7175c..5eabc80 100644
--- a/frontend/site/site/site.reducer.js
+++ b/frontend/site/site/site.reducer.js
@@ -8,6 +8,7 @@ const initialState = {
     loading: true,
   },
   cursors: {},
+  popups: {},
 }
 
 export default function siteReducer(state = initialState, action) {
@@ -38,6 +39,12 @@ export default function siteReducer(state = initialState, action) {
         interactive: true,
       }
 
+    case types.site.set_popups:
+      return {
+        ...state,
+        popups: action.popups,
+      }
+
     case '@@router/LOCATION_CHANGE':
       return {
         ...state,
diff --git a/frontend/site/types.js b/frontend/site/types.js
index a83febe..3a49485 100644
--- a/frontend/site/types.js
+++ b/frontend/site/types.js
@@ -2,7 +2,7 @@ import { with_type } from 'app/api/crud.types'
 
 export const site = with_type('site', [
   'set_site_title', 'loading', 'loaded', 'error',
-  'load_site', 'interact',
+  'load_site', 'interact', 'set_popups',
 ])
 
 export const init = '@@INIT'
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index d8279e8..10ce093 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -16,7 +16,6 @@ class ViewerContainer extends Component {
     bounds: { width: window.innerWidth, height: window.innerHeight },
     roadblock: false,
     unloaded: false,
-    popups: {},
     hidden: {},
     time: 0,
     maxDeferTime: 0,
@@ -74,9 +73,11 @@ class ViewerContainer extends Component {
     // console.log(pages, page)
     // console.log("show page", page.id)
     if (!this.props.interactive && hasAutoplay(page)) {
-      this.setState({ page, popups: {}, hidden: {}, roadblock: true, unloaded: false })
+      this.setState({ page, hidden: {}, roadblock: true, unloaded: false })
+      actions.site.setPopups({})
     } else {
-      this.setState({ page, popups: {}, hidden: {}, roadblock: false, unloaded: false })
+      this.setState({ page, hidden: {}, roadblock: false, unloaded: false })
+      actions.site.setPopups({})
       actions.site.interact()
       this.props.audio.player.playPage(page)
       this.resetTimer(page)
@@ -116,19 +117,15 @@ class ViewerContainer extends Component {
         return
       }
       else if (tile.href === '__open_popup') {
-        this.setState({
-          popups: {
-            ...this.state.popups,
-            [tile.settings.target_popup]: true,
-          },
+        actions.site.setPopups({
+          ...this.props.popups,
+          [tile.settings.target_popup]: true,
         })
       }
       else if (tile.href === '__close_popup') {
-        this.setState({
-          popups: {
-            ...this.state.popups,
-            [tile.settings.target_popup]: false,
-          },
+        actions.site.setPopups({
+          ...this.props.popups,
+          [tile.settings.target_popup]: false,
         })
       }
       else if (!tile.settings.navigate_when_audio_finishes) {
@@ -168,7 +165,8 @@ class ViewerContainer extends Component {
   }
 
   render() {
-    const { page, audio, popups, hidden, time } = this.state
+    const { page, audio, hidden, time } = this.state
+    const { popups } = this.props
     if (this.state.unloaded) {
       return null
     }
@@ -251,6 +249,7 @@ const mapStateToProps = state => ({
   audio: state.audio,
   graph: state.site.graph,
   cursors: state.site.cursors,
+  popups: state.site.popups,
   interactive: state.site.interactive,
 })