renamed js folder as common + moved hardcoded colors into global.js

src/common/data/copy.json

@@ -0,0 +1,172 @@
+{
+  "es-MX": {
+    "loading": "Cargando...",
+    "legend": {
+      "view2d": {
+        "paragraphs": [
+          "Seleccionando una serie de filtros verá aparecer eventos en el mapa y en la línea del tiempo.",
+          "Cada evento estará coloreado según la persona que dio el testimonio del evento."
+        ],
+        "colors": [
+          { "class": "category_group00", "label": "Category Group 00" },
+          { "class": "category_group01", "label": "Category Group 01" },
+          { "class": "category_group02", "label": "Category Group 02" },
+          { "class": "category_group03", "label": "Category Group 03" },
+          { "class": "other", "label": "Other categories" }
+        ]
+      }
+    },
+    "toolbar": {
+      "title": "TITLE",
+      "categories": "Categories",
+      "tags": "Tags",
+      "explore_by_tag__title": "Explore by tag or category",
+      "explore_by_tag__description": "Selecting tags or categories, you'll see only those events that are tagged accordingly. If you select nothing, as well as everything, all data will be displayed.",
+      "panels": {
+        "mentions": {
+          "title": "Personas",
+          "overview": "Seleccionar los nombres de personas mostrará eventos en los que esta persona o organización ha sido mencionada, incluyendo el propio testimonio. Entre paréntesis encontrará el número de menciones. Ej. (34)."
+        },
+        "categories": {
+          "title": "Testimonios",
+          "overview": "Seleccionar el nombre de una persona mostrará los eventos descritos por su testimonio. Entre paréntesis encontrará el número de eventos descritos. Ej. (34)."
+        },
+        "search": {
+          "title": "Directorio de etiquetas",
+          "placeholder": "Búsqueda"
+        }
+      }
+    },
+    "timeline": {
+      "zooms": [
+        "3 años",
+        "3 meses",
+        "3 días",
+        "12 horas",
+        "2 horas",
+        "30 min",
+        "10 min"
+      ],
+      "labels_title": "Testimonios",
+      "labels": [
+        "Testimony Group 00",
+        "Testimony Group 01",
+        "Testimony Group 02",
+        "Testimony Group 03",
+        "Other categories"
+      ],
+      "info": "Viendo eventos ocurridos entre"
+    },
+    "cardstack": {
+      "header": "eventos seleccionados",
+      "unknown_location": "Localización desconocida",
+      "unknown_time": "Día y hora desconocida",
+      "timestamp": "Día y hora",
+      "estimated": "aproximado",
+      "location": "Localización",
+      "incident_type": "Tipo de acción",
+      "description": "Hechos",
+      "people": "Personas en el evento",
+      "sources": "Fuentes",
+      "category": "Según el testimonio de",
+      "communication": "Comunicación",
+      "transmitter": "Transmisor",
+      "receiver": "Receptor",
+      "warning": "(!) HECHOS CUESTIONADOS"
+    }
+  },
+  "en-US": {
+    "loading": "Loading...",
+    "legend": {
+      "view2d": {
+        "paragraphs": [
+          "Selecting a series of tags, you will be able to explore events on the map of Iguala and on the timeline.",
+          "Each event is colored according the person that gave category of the event."
+        ],
+        "colors": [
+          { "class": "category_group00", "label": "Category Group 00" },
+          { "class": "category_group01", "label": "Category Group 01" },
+          { "class": "category_group02", "label": "Category Group 02" },
+          { "class": "category_group03", "label": "Category Group 03" },
+          { "class": "other", "label": "Other categories" }
+        ]
+      },
+      "default": {
+        "header": "Navigating the Platform",
+        "intro": [
+          "Each event represents an occurence that is distinct in either time, space, or both. An event is represented by a coloured circle on both the map and the timeline.",
+          "Select an event to reveal its content and sources. You can filter events by category or other specified filters in the top left toolbar.",
+          "Narratives compose events to reveal logical threads that emerge from them. Transition to narrative mode by selecting a narrative from the top left dashboard icon."
+        ],
+        "notation": "Combinations of colours indicate multiple events in a single location.",
+        "arrows": "Arrows indicate physical movement between events."
+      }
+    },
+    "toolbar": {
+      "title": "TITLE",
+      "panels": {
+        "mentions": {
+          "title": "Mentions",
+          "overview": "Selecting the names of people/organisation will show events in which these have been mentioned in their own testistimony and by others. The number in the parentheses shows how many events contain a mention of a person or organisation, e.g. (34)"
+        },
+        "categories": {
+          "title": "Testimonies",
+          "overview": "Selecting the name of a person will show the events only according to a person’s category or category. The number in the parentheses show how many events are contained in each category, e.g. (34)."
+        },
+        "search": {
+          "title": "Directory of tags",
+          "placeholder": "Search"
+        }
+      },
+      "narratives_label": "Narratives",
+      "narrative_summary": "Follow a path through the data, from one key event to the next.",
+      "categories": "Categories",
+      "tags": "Filters",
+      "tags_label": "Filters",
+      "explore_by_tag__title": "Explore by filter",
+      "explore_by_tag__description": "Selecting a filter will show you only those events that are annotated with the filter. If you select nothing, as well as everything, all data will be displayed.",
+      "explore_by_category__title": "Explore events by category",
+      "explore_by_category__description": ""
+
+    },
+    "timeline": {
+      "zooms": [
+        "3 years",
+        "3 months",
+        "3 days",
+        "12 hours",
+        "2 hours",
+        "30 min",
+        "10 min"
+      ],
+      "labels_title": "Testimonies",
+      "labels": [
+        "Testimony Group 00",
+        "Testimony Group 01",
+        "Testimony Group 02",
+        "Testimony Group 03",
+        "Other"
+      ],
+      "info": "Seeing events occurred between"
+    },
+    "cardstack": {
+      "header": "selected events",
+      "timestamp": "Day and time",
+      "unknown_location": "Unknown location",
+      "estimated": "estimated",
+      "unknown_time": "Unknown time",
+      "location": "Localization",
+      "incident_type": "Type of action",
+      "description": "Summary",
+      "tags": "Tags",
+      "notags": "No known tags for this event.",
+      "sources": "Sources",
+      "unknown_source": "The information for this source could not be retrieved.",
+      "category": "Category",
+      "communication": "Communication",
+      "transmitter": "Transmitter",
+      "receiver": "Receiver",
+      "warning": "(!) Highly questioned"
+    }
+  }
+}

src/common/data/es-MX.json

@@ -0,0 +1,10 @@
+{
+  "dateTime": "%x, %X",
+  "date": "%d/%m/%Y",
+  "time": "%-I:%M:%S %p",
+  "periods": ["AM", "PM"],
+  "days": ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"],
+  "shortDays": ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
+  "months": ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"],
+  "shortMonths": ["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"]
+}

src/common/global.js

@@ -0,0 +1,13 @@
+
+const colors = {
+  fa_red : '#eb443e',
+  yellow : '#ffd800',
+  black : '#000',
+  white : '#fff'
+}
+
+export default {
+  darkBackground : colors.black,
+  primaryHighlight : colors.yellow,
+  secondaryHighlight : colors.white
+}

src/common/utilities.js

@@ -0,0 +1,168 @@
+/* global d3 */
+/**
+  * Get URI params to start with predefined set of
+  * https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
+  * @param {string} name: name of paramater to search
+  * @param {string} url: url passed as variable, defaults to window.location.href
+  */
+export function getParameterByName (name, url) {
+  if (!url) url = window.location.href
+  name = name.replace(/[[\]]/g, `\\$&`)
+
+  const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`)
+  const results = regex.exec(url)
+
+  if (!results) return null
+  if (!results[2]) return ''
+
+  return decodeURIComponent(results[2].replace(/\+/g, ' '))
+}
+
+/**
+ * Compare two arrays of scalars
+ * @param {array} arr1: array of numbers
+ * @param {array} arr2: array of numbers
+ */
+export function areEqual (arr1, arr2) {
+  return ((arr1.length === arr2.length) && arr1.every((element, index) => {
+    return element === arr2[index]
+  }))
+}
+
+/**
+* Return whether the variable is neither null nor undefined
+* @param {object} variable
+*/
+export function isNotNullNorUndefined (variable) {
+  return (typeof variable !== 'undefined' && variable !== null)
+}
+
+/*
+* Capitalizes _only_ the first letter of a string
+* Taken from: https://stackoverflow.com/questions/1026069/how-do-i-make-the-first-letter-of-a-string-uppercase-in-javascript
+*/
+export function capitalizeFirstLetter (string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+export function trimAndEllipse (string, stringNum) {
+  if (string.length > stringNum) {
+    return string.substring(0, 120) + '...'
+  }
+  return string
+}
+
+/**
+* Return a Date object given a datetime string of the format: "2016-09-10T07:00:00"
+* @param {string} datetime
+*/
+export function parseDate (datetime) {
+  return new Date(datetime.slice(0, 4),
+    datetime.slice(5, 7) - 1,
+    datetime.slice(8, 10),
+    datetime.slice(11, 13),
+    datetime.slice(14, 16),
+    datetime.slice(17, 19)
+  )
+}
+
+export function formatterWithYear (datetime) {
+  return d3.timeFormat('%d %b %Y, %H:%M')(datetime)
+}
+
+export function formatter (datetime) {
+  return d3.timeFormat('%d %b, %H:%M')(datetime)
+}
+
+export const parseTimestamp = ts => d3.timeParse('%Y-%m-%dT%H:%M:%S')(ts)
+
+export function compareTimestamp (a, b) {
+  return (parseTimestamp(a.timestamp) > parseTimestamp(b.timestamp))
+}
+
+/**
+ * Inset the full source represenation from 'allSources' into an event. The
+ * function is 'curried' to allow easy use with maps. To use for a single
+ * source, call with two sets of parentheses:
+ *      const src = insetSourceFrom(sources)(anEvent)
+ */
+export function insetSourceFrom (allSources) {
+  return (event) => {
+    let sources
+    if (!event.sources) {
+      sources = []
+    } else {
+      sources = event.sources.map(id => (
+        allSources.hasOwnProperty(id) ? allSources[id] : null
+      ))
+    }
+    return {
+      ...event,
+      sources
+    }
+  }
+}
+
+/**
+ * Debugging function: put in place of a mapStateToProps function to
+ * view that source modal by default
+ */
+export function injectSource (id) {
+  return state => {
+    return {
+      ...state,
+      app: {
+        ...state.app,
+        source: state.domain.sources[id]
+      }
+    }
+  }
+}
+
+export function urlFromEnv (ext) {
+  if (process.env[ext]) {
+    return `${process.env.SERVER_ROOT}${process.env[ext]}`
+  } else {
+    return null
+  }
+}
+
+export function toggleFlagAC (flag) {
+  return (appState) => ({
+    ...appState,
+    flags: {
+      ...appState.flags,
+      [flag]: !appState.flags[flag]
+    }
+  })
+}
+
+export function selectTypeFromPath (path) {
+  let type
+  switch (true) {
+    case /\.(png|jpg)$/.test(path):
+      type = 'Image'; break
+    case /\.(mp4)$/.test(path):
+      type = 'Video'; break
+    case /\.(md)$/.test(path):
+      type = 'Text'; break
+    default:
+      type = 'Unknown'; break
+  }
+  return { type, path }
+}
+
+export function selectTypeFromPathWithPoster (path, poster) {
+  let type
+  switch (true) {
+    case /\.(png|jpg)$/.test(path):
+      type = 'Image'; break
+    case /\.(mp4)$/.test(path):
+      type = 'Video'; break
+    case /\.(md)$/.test(path):
+      type = 'Text'; break
+    default:
+      type = 'Unknown'; break
+  }
+  return { type, path, poster }
+}