@collectionspace/cspace-public-browser 1.5.1

package/src/index.jsx

@@ -0,0 +1,59 @@
+/* global document, window */
+
+import React from 'react';
+import { render } from 'react-dom';
+import { RawIntlProvider } from 'react-intl';
+import { applyMiddleware, compose, createStore } from 'redux';
+import { Provider as StoreProvider } from 'react-redux';
+import thunk from 'redux-thunk';
+import warning from 'warning';
+import { loadPrefs } from './actions/prefsActions';
+import config from './config';
+import App from './components/App';
+import { createIntl } from './intl';
+import reducer from './reducers';
+import * as formatters from './helpers/formatHelpers';
+
+const cspacePublicBrowser = (...customConfigs) => {
+  config.merge(...customConfigs);
+
+  const container = config.get('container');
+  const mountNode = document.querySelector(container);
+
+  warning(
+    mountNode,
+    `No container element was found using the selector '${container}'. The CollectionSpace collection browser will not be rendered.`,
+  );
+
+  if (!mountNode) {
+    return;
+  }
+
+  // eslint-disable-next-line no-underscore-dangle
+  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+  const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)));
+
+  store.dispatch(loadPrefs());
+
+  const locale = config.get('locale');
+  const messages = config.get('messages');
+
+  const intl = createIntl({
+    locale,
+    messages,
+    defaultLocale: 'en-US',
+  });
+
+  render(
+    <RawIntlProvider value={intl}>
+      <StoreProvider store={store}>
+        <App />
+      </StoreProvider>
+    </RawIntlProvider>,
+    mountNode,
+  );
+};
+
+cspacePublicBrowser.formatters = formatters;
+
+export default cspacePublicBrowser;

package/src/intl/index.js

@@ -0,0 +1,16 @@
+import {
+  createIntl as baseCreateIntl,
+  createIntlCache,
+} from 'react-intl';
+
+const intlCache = createIntlCache();
+
+let intl;
+
+export const createIntl = (config) => {
+  intl = baseCreateIntl(config, intlCache);
+
+  return intl;
+};
+
+export const getIntl = () => intl;

package/src/reducers/detailReducer.js

@@ -0,0 +1,201 @@
+import Immutable from 'immutable';
+import get from 'lodash/get';
+
+import {
+  CLEAR_DETAIL,
+  DETAIL_READ_FULFILLED,
+  DETAIL_READ_REJECTED,
+  DETAIL_READ_STARTED,
+  INST_SEARCH_FULFILLED,
+  INST_SEARCH_REJECTED,
+  INST_SEARCH_STARTED,
+  SET_DETAIL_PARAMS,
+} from '../constants/actionCodes';
+
+const findAdjacents = (csid, hits) => {
+  // eslint-disable-next-line no-underscore-dangle
+  const csidIndex = hits ? hits.findIndex((hit) => hit._source['ecm:name'] === csid) : -1;
+
+  if (csidIndex < 0) {
+    return {
+      prev: undefined,
+      next: undefined,
+    };
+  }
+
+  return {
+    // eslint-disable-next-line no-underscore-dangle
+    prev: (csidIndex > 0) ? hits[csidIndex - 1]._source : undefined,
+    // eslint-disable-next-line no-underscore-dangle
+    next: (csidIndex < hits.length - 1) ? hits[csidIndex + 1]._source : undefined,
+  };
+};
+
+const handleDetailReadStarted = (state, action) => {
+  const {
+    params: readParams,
+  } = action.meta;
+
+  const currentParams = state.get('params');
+
+  if (readParams !== currentParams) {
+    return state;
+  }
+
+  return state
+    .set('pending', true)
+    .delete('error');
+};
+
+const handleDetailReadFulfilled = (state, action) => {
+  const {
+    params: readParams,
+  } = action.meta;
+
+  const currentParams = state.get('params');
+
+  if (readParams !== currentParams) {
+    return state;
+  }
+
+  const response = action.payload;
+
+  const data = get(response, ['responses', 0, 'hits', 'hits', 0, '_source']);
+
+  const adjacents = findAdjacents(
+    readParams.get('csid'),
+    get(response, ['responses', 1, 'hits', 'hits']),
+  );
+
+  return state
+    .set('adjacents', adjacents)
+    .delete('pending')
+    .set('data', data)
+    .delete('error');
+};
+
+const handleDetailReadRejected = (state, action) => {
+  const {
+    params: readParams,
+  } = action.meta;
+
+  const currentParams = state.get('params');
+
+  if (readParams !== currentParams) {
+    return state;
+  }
+
+  return state
+    .delete('pending')
+    .set('error', action.payload);
+};
+
+const handleInstSearchStarted = (state, action) => {
+  const {
+    institutionId,
+    params: readParams,
+  } = action.meta;
+
+  const currentParams = state.get('params');
+
+  if (readParams !== currentParams) {
+    return state;
+  }
+
+  return state
+    .setIn(['inst', institutionId, 'pending'], true)
+    .deleteIn(['inst', institutionId, 'error']);
+};
+
+const handleInstSearchFulfilled = (state, action) => {
+  const {
+    institutionId,
+    params: readParams,
+  } = action.meta;
+
+  const currentParams = state.get('params');
+
+  if (readParams !== currentParams) {
+    return state;
+  }
+
+  const response = action.payload;
+
+  const hits = get(response, ['hits', 'hits']);
+
+  return state
+    .deleteIn(['inst', institutionId, 'pending'])
+    .setIn(['inst', institutionId, 'hits'], hits)
+    .deleteIn(['inst', institutionId, 'error']);
+};
+
+const handleInstSearchRejected = (state, action) => {
+  const {
+    institutionId,
+    params: readParams,
+  } = action.meta;
+
+  const currentParams = state.get('params');
+
+  if (readParams !== currentParams) {
+    return state;
+  }
+
+  return state
+    .deleteIn(['inst', institutionId, 'pending'])
+    .setIn(['inst', institutionId, 'error'], action.payload);
+};
+
+export default (state = Immutable.Map(), action) => {
+  switch (action.type) {
+    case CLEAR_DETAIL:
+      return state.clear();
+    case DETAIL_READ_STARTED:
+      return handleDetailReadStarted(state, action);
+    case DETAIL_READ_FULFILLED:
+      return handleDetailReadFulfilled(state, action);
+    case DETAIL_READ_REJECTED:
+      return handleDetailReadRejected(state, action);
+    case INST_SEARCH_STARTED:
+      return handleInstSearchStarted(state, action);
+    case INST_SEARCH_FULFILLED:
+      return handleInstSearchFulfilled(state, action);
+    case INST_SEARCH_REJECTED:
+      return handleInstSearchRejected(state, action);
+    case SET_DETAIL_PARAMS:
+      return state
+        .set('params', action.payload);
+    default:
+      return state;
+  }
+};
+
+export const getAdjacents = (state) => state.get('adjacents');
+export const getError = (state) => state.get('error');
+export const getParams = (state) => state.get('params');
+export const getData = (state) => state.get('data');
+export const isPending = (state) => !!state.get('pending');
+
+export const getHoldingInstitutions = (state) => {
+  const inst = state.get('inst');
+
+  if (!inst) {
+    return Immutable.Set();
+  }
+
+  const institutionIds = inst.keySeq().filter((institutionId) => {
+    const hits = inst.getIn([institutionId, 'hits']);
+
+    return (hits && hits.length > 0);
+  });
+
+  return Immutable.Set(institutionIds);
+};
+
+export const getInstitutionHits = (state, institutionId) => (
+  state.getIn(['inst', institutionId, 'hits'])
+);
+
+export const isInstSearchPending = (state, institutionId) => (
+  state.getIn(['inst', institutionId, 'pending'])
+);

package/src/reducers/filterReducer.js

@@ -0,0 +1,16 @@
+import Immutable from 'immutable';
+
+import {
+  SET_FILTER_SEARCH_VALUE,
+} from '../constants/actionCodes';
+
+export default (state = Immutable.Map(), action) => {
+  switch (action.type) {
+    case SET_FILTER_SEARCH_VALUE:
+      return state.setIn([action.meta.id, 'searchValue'], action.payload);
+    default:
+      return state;
+  }
+};
+
+export const getSearchValue = (state, id) => state.getIn([id, 'searchValue']);

package/src/reducers/index.js

@@ -0,0 +1,56 @@
+import { combineReducers } from 'redux';
+import detail, * as fromDetail from './detailReducer';
+import filter, * as fromFilter from './filterReducer';
+import media, * as fromMedia from './mediaReducer';
+import prefs, * as fromPrefs from './prefsReducer';
+import search, * as fromSearch from './searchReducer';
+import searchEntryForm, * as fromSearchEntryForm from './searchEntryFormReducer';
+
+export default combineReducers({
+  detail,
+  filter,
+  media,
+  prefs,
+  search,
+  searchEntryForm,
+});
+
+export const getDetailAdjacents = (state) => fromDetail.getAdjacents(state.detail);
+export const getDetailError = (state) => fromDetail.getError(state.detail);
+export const getDetailParams = (state) => fromDetail.getParams(state.detail);
+export const getDetailData = (state) => fromDetail.getData(state.detail);
+export const isDetailPending = (state) => fromDetail.isPending(state.detail);
+
+export const getDetailHoldingInstitutions = (state) => (
+  fromDetail.getHoldingInstitutions(state.detail)
+);
+
+export const getDetailInstitutionHits = (state, institutionId) => (
+  fromDetail.getInstitutionHits(state.detail, institutionId)
+);
+
+export const isDetailInstSearchPending = (state, institutionId) => (
+  fromDetail.isInstSearchPending(state.detail, institutionId)
+);
+
+export const getFilterSearchValue = (state, id) => fromFilter.getSearchValue(state.filter, id);
+
+export const getMedia = (state, referenceValue, institutionId) => (
+  fromMedia.get(state.media, referenceValue, institutionId)
+);
+
+export const getPrefs = (state) => state.prefs;
+export const isPanelExpanded = (state, id) => fromPrefs.isPanelExpanded(state.prefs, id);
+
+export const getSearchError = (state) => fromSearch.getError(state.search);
+export const getSearchOffset = (state) => fromSearch.getOffset(state.search);
+export const getSearchNextOffset = (state) => fromSearch.getNextOffset(state.search);
+export const getSearchPageSize = (state) => fromSearch.getPageSize(state.search);
+export const getSearchParams = (state) => fromSearch.getParams(state.search);
+export const getSearchResult = (state) => fromSearch.getResult(state.search);
+export const isSearchPending = (state) => fromSearch.isPending(state.search);
+export const searchHasMore = (state) => fromSearch.hasMore(state.search);
+
+export const getSearchEntryFormParams = (state) => (
+  fromSearchEntryForm.getParams(state.searchEntryForm)
+);

package/src/reducers/mediaReducer.js

@@ -0,0 +1,44 @@
+import Immutable from 'immutable';
+
+import {
+  SET_MEDIA,
+} from '../constants/actionCodes';
+
+const setMedia = (state, action) => {
+  const {
+    csids,
+    altTexts,
+    title,
+  } = action.payload;
+
+  const {
+    institutionId,
+    referenceValue,
+  } = action.meta;
+
+  return state.setIn(
+    [referenceValue, 'media', institutionId],
+    Immutable.fromJS({
+      csids,
+      altTexts,
+      title,
+    }),
+  );
+};
+
+export default (state = Immutable.Map(), action) => {
+  switch (action.type) {
+    case SET_MEDIA:
+      return setMedia(state, action);
+    default:
+      return state;
+  }
+};
+
+export const get = (state, referenceValue, institutionId) => {
+  if (typeof institutionId === 'undefined') {
+    return state.getIn([referenceValue, 'media']);
+  }
+
+  return state.getIn([referenceValue, 'media', institutionId]);
+};

package/src/reducers/prefsReducer.js

@@ -0,0 +1,24 @@
+import Immutable from 'immutable';
+
+import {
+  PREFS_LOADED,
+  EXPAND_PANEL,
+  TOGGLE_PANEL,
+} from '../constants/actionCodes';
+
+const setPanelExpanded = (state, id, expanded) => state.setIn(['panels', id, 'expand'], expanded);
+
+export const isPanelExpanded = (state, id) => state.getIn(['panels', id, 'expand']);
+
+export default (state = Immutable.Map(), action) => {
+  switch (action.type) {
+    case PREFS_LOADED:
+      return (action.payload ? Immutable.fromJS(action.payload) : Immutable.Map());
+    case EXPAND_PANEL:
+      return setPanelExpanded(state, action.meta.id, action.payload);
+    case TOGGLE_PANEL:
+      return setPanelExpanded(state, action.meta.id, !isPanelExpanded(state, action.meta.id));
+    default:
+      return state;
+  }
+};

package/src/reducers/searchEntryFormReducer.js

@@ -0,0 +1,19 @@
+import Immutable from 'immutable';
+
+import {
+  SET_SEARCH_ENTRY_FORM_PARAM,
+  SET_SEARCH_PARAMS,
+} from '../constants/actionCodes';
+
+export default (state = Immutable.Map(), action) => {
+  switch (action.type) {
+    case SET_SEARCH_PARAMS:
+      return state.set('params', action.payload);
+    case SET_SEARCH_ENTRY_FORM_PARAM:
+      return state.setIn(['params', action.meta.id], action.payload);
+    default:
+      return state;
+  }
+};
+
+export const getParams = (state) => state.get('params');

package/src/reducers/searchReducer.js

@@ -0,0 +1,118 @@
+import Immutable from 'immutable';
+
+import {
+  SEARCH_STARTED,
+  SEARCH_FULFILLED,
+  SEARCH_REJECTED,
+  SET_SEARCH_PAGE_SIZE,
+  SET_SEARCH_PARAMS,
+} from '../constants/actionCodes';
+
+const handleSearchFulfilled = (state, action) => {
+  const {
+    offset,
+    pageSize,
+    params: searchParams,
+  } = action.meta;
+
+  const currentParams = state.get('params');
+
+  if (searchParams !== currentParams) {
+    return state;
+  }
+
+  const {
+    responses,
+  } = action.payload;
+
+  const [
+    resultResponse,
+    ...filterResponses
+  ] = responses;
+
+  const {
+    aggregations,
+    hits,
+  } = resultResponse;
+
+  const currentResult = state.get('result') || Immutable.Map();
+  const currentHits = currentResult.get('hits') || Immutable.List();
+
+  const nextHits = currentHits.setSize(offset).concat(Immutable.fromJS(hits.hits));
+
+  let nextResult = currentResult
+    .set('params', searchParams)
+    .set('total', hits.total)
+    .set('hits', nextHits);
+
+  if (offset === 0) {
+    let nextAggregations = Immutable.fromJS(aggregations);
+
+    filterResponses.forEach((filterResponse) => {
+      nextAggregations = nextAggregations.merge(Immutable.fromJS(filterResponse.aggregations));
+    });
+
+    nextResult = nextResult.set('aggregations', nextAggregations);
+  }
+
+  return state
+    .set('offset', offset)
+    .set('nextOffset', offset + pageSize)
+    .delete('pending')
+    .set('result', nextResult)
+    .delete('error');
+};
+
+export default (state = Immutable.Map(), action) => {
+  switch (action.type) {
+    case SEARCH_STARTED:
+      return state
+        .set('pending', true)
+        .delete('error');
+    case SEARCH_FULFILLED:
+      return handleSearchFulfilled(state, action);
+    case SEARCH_REJECTED:
+      return state
+        .delete('pending')
+        .set('error', action.payload);
+    case SET_SEARCH_PAGE_SIZE:
+      return state.set('pageSize', action.payload);
+    case SET_SEARCH_PARAMS:
+      return state
+        .delete('error')
+        .delete('nextOffset')
+        .set('params', action.payload)
+        .delete('pending');
+    default:
+      return state;
+  }
+};
+
+export const getError = (state) => state.get('error');
+export const getOffset = (state) => state.get('offset') || 0;
+export const getNextOffset = (state) => state.get('nextOffset') || 0;
+export const getPageSize = (state) => state.get('pageSize');
+export const getParams = (state) => state.get('params');
+export const getResult = (state) => state.get('result');
+
+export const hasMore = (state) => {
+  const result = getResult(state);
+
+  if (!result) {
+    return true;
+  }
+
+  const currentParams = getParams(state);
+  const resultParams = result.get('params');
+
+  if (currentParams !== resultParams) {
+    return true;
+  }
+
+  const total = result.get('total');
+  const nextOffset = getNextOffset(state);
+
+  return (nextOffset < total);
+};
+
+export const isPending = (state) => !!state.get('pending');

package/styles/colors.css

@@ -0,0 +1,7 @@
+@value buttonBgColor: #3D77C2;
+@value buttonBgHoverColor: rgba(51, 122, 183, .2);
+@value highlightColor: rgb(51, 122, 183);
+@value inputBgColor: white;
+@value inputBorderColor: #8C8C8C;
+@value noteColor: inherit;
+@value panelBorderColor: rgba(160, 160, 160, .3);

package/styles/cspace/DetailNavBar.css

@@ -0,0 +1,17 @@
+.common {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.common > div:first-of-type {
+  flex: 1 1 auto;
+}
+
+.common > div > span + span {
+  margin-left: 8px;
+}
+
+.common > div > span + span::before {
+  margin-right: 8px;
+  content: '|';
+}

package/styles/cspace/DetailPage.css

@@ -0,0 +1,3 @@
+.common {
+  padding: 32px;
+}

package/styles/cspace/DetailPanel.css

@@ -0,0 +1,69 @@
+@value highlightColor from '../colors.css';
+
+.common {
+  display: grid;
+  grid-template-columns: auto 400px;
+  grid-template-rows: auto auto minmax(0, auto) minmax(0, auto) 1fr;
+  grid-column-gap: 16px;
+  grid-template-areas:
+    "header header"
+    "desc desc"
+    "fields1 gallery"
+    "fields1 fields2"
+    "inst inst";
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 840px;
+  box-sizing: border-box;
+  padding-bottom: 64px;
+  font-size: 1rem;
+  line-height: normal;
+  grid-auto-flow: row dense;
+}
+
+.common > header {
+  grid-area: header;
+}
+
+.common > p {
+  grid-area: desc;
+}
+
+.common :global(.cspace-ImageGallery--common) {
+  grid-area: gallery;
+}
+
+.common h1,
+.common h2 {
+  margin: 0;
+  padding: 0;
+}
+
+.common h1 {
+  font-size: 2rem;
+}
+
+.common h2 {
+  font-size: 1.5rem;
+}
+
+.common button:hover {
+  background-color: inherit;
+}
+
+@media only screen
+and (max-width: 719px) {
+  .common {
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen
+and (min-width: 720px)
+and (max-width: 839px) {
+  .common {
+    max-width: 100%;
+    grid-template-columns: auto 360px;
+  }
+}

package/styles/cspace/ExhibitionSection.css

@@ -0,0 +1,9 @@
+.common {
+  grid-column: 1 / span 3;
+  margin-top: 30px;
+}
+
+.common div {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}

package/styles/cspace/FieldList.css

@@ -0,0 +1,15 @@
+@value highlightColor, panelBorderColor from '../colors.css';
+
+.common h3 {
+  margin: 0 0 6px 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 600;
+}
+
+@media only screen
+and (max-width: 719px) {
+  .common {
+    margin-top: 16px;
+  }
+}

package/styles/cspace/FieldListField.css

@@ -0,0 +1,7 @@
+.unlabeled {
+  grid-column: 1 / span 2;
+}
+
+.title {
+  font-weight: 600;
+}