Merge pull request #70 from ProjectMirador/add-window-close-button

extracts topbar to its own component and adds close button

minimal_redux_poc/__tests__/integration/mirador/window_actions.test.js

@@ -0,0 +1,15 @@
+describe('Window actions', () => {
+  beforeAll(async () => {
+    await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/');
+  });
+  it('opens a window and closes it', async () => {
+    await expect(page).toFill('#manifestURL', 'https://purl.stanford.edu/sn904cj3429/iiif/manifest');
+    await expect(page).toClick('#fetchBtn');
+    // TODO: Refactor the app so we get rid of the wait
+    await page.waitFor(1000);
+    await expect(page).toClick('li button');
+    await expect(page).toMatchElement('.mirador-window');
+    await expect(page).toClick('.mirador-window-close');
+    await expect(page).not.toMatchElement('.mirador-window');
+  });
+});

minimal_redux_poc/__tests__/src/components/Window.test.js

@@ -13,21 +13,23 @@ describe('Window', () => {
     [window] = store.getState().windows;
     wrapper = mount(
       <Window store={store} id={window.id} />,
-      // We need to attach this to something created by our JSDOM instance
-      { attachTo: document.getElementById('main') },
+      // We need to attach this to something created by our JSDOM instance.
+      // Also need to provide context of the store so that connected sub components
+      // can render effectively.
+      { attachTo: document.getElementById('main'), context: { store } },
     );
   });
 
   it('returns the width and height style attribute', () => {
-    expect(shallow(<Window store={store} id={window.id} />).dive().instance().styleAttributes())
+    wrapper = shallow(<Window store={store} id={window.id} />, { context: { store } });
+    expect(wrapper.dive().instance().styleAttributes())
       .toEqual({ width: '400px', height: '400px' });
   });
 
   it('renders without an error', () => {
     expect(wrapper.find('.mirador-window').prop('style')).toHaveProperty('width', '400px');
     expect(wrapper.find('.mirador-window').prop('style')).toHaveProperty('height', '400px');
     expect(wrapper.find('div.mirador-window').length).toBe(1);
-    expect(wrapper.find('div.mirador-window h3').text()).toBe('Test 24 Manifest: Image with IIIF Service - adapted with real image');
     expect(wrapper.find('div.mirador-window img').prop('src')).toBe('http://placekitten.com/200/300');
   });
 

minimal_redux_poc/__tests__/src/components/WindowTopBar.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { actions, store } from '../../../src/store';
+import WindowTopBar from '../../../src/components/WindowTopBar';
+import fixture from '../../fixtures/24.json';
+
+describe('Window', () => {
+  let wrapper;
+  let window;
+  beforeEach(() => {
+    store.dispatch(actions.receiveManifest('foo', fixture));
+    store.dispatch(actions.addWindow({ manifestId: 'foo' }));
+    const manifest = store.getState().manifests.foo;
+    [window] = store.getState().windows;
+    wrapper = shallow(<WindowTopBar store={store} manifest={manifest} windowId={window.id} />)
+      .dive();
+  });
+
+  it('renders without an error', () => {
+    expect(wrapper.find('div.mirador-window-top-bar h3').text()).toBe('Test 24 Manifest: Image with IIIF Service - adapted with real image');
+    expect(wrapper.find('button.mirador-window-close'));
+  });
+});

minimal_redux_poc/src/components/Window.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import fetch from 'node-fetch';
 import OpenSeaDragon from 'openseadragon';
 import ns from '../config/css-ns';
+import WindowTopBar from './WindowTopBar';
 
 /**
  * Represents a Window in the mirador workspace
@@ -78,9 +79,10 @@ class Window extends Component {
   render() {
     return (
       <div className={ns('window')} style={this.styleAttributes()}>
-        <div className={ns('window-heading')}>
-          <h3>{this.props.manifest.manifestation.getLabel().map(label => label.value)[0]}</h3>
-        </div>
+        <WindowTopBar
+          windowId={this.props.window.id}
+          manifest={this.props.manifest}
+        />
         <img src={this.thumbnail()} alt="" />
         <div
           className={ns('osd-container')}

minimal_redux_poc/src/components/WindowTopBar.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { actions } from '../store';
+import ns from '../config/css-ns';
+
+
+/**
+ * WindowTopBar
+ */
+class WindowTopBar extends Component {
+  /**
+   * render - description
+   * @return {type}  description
+   */
+  render() {
+    return (
+      <div className={ns('window-top-bar')}>
+        <h3>{this.props.manifest.manifestation.getLabel().map(label => label.value)[0]}</h3>
+        <button className={ns('window-close')} aria-label="Close Window" onClick={() => this.props.removeWindow(this.props.windowId)}>&times;</button>
+      </div>
+    );
+  }
+}
+//
+// /**
+//  * mapStateToProps - used to hook up connect to action creators
+//  * @memberof Window
+//  * @private
+//  */
+// const mapStateToProps = ({ windows, manifests }, props) => {
+//   const window = windows.find(win => props.windowId === win.id);
+//   return {
+//     window,
+//     //
+//     manifest: manifests[window.manifestId],
+//   };
+// };
+
+/**
+ * mapDispatchToProps - used to hook up connect to action creators
+ * @memberof ManifestListItem
+ * @private
+ */
+const mapDispatchToProps = dispatch => ({
+  removeWindow: windowId => (
+    dispatch(actions.removeWindow(windowId))
+  ),
+});
+
+WindowTopBar.propTypes = {
+  manifest: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  removeWindow: PropTypes.func.isRequired,
+  windowId: PropTypes.string.isRequired,
+};
+
+WindowTopBar.defaultProps = {
+  manifest: null,
+};
+
+
+export default connect(null, mapDispatchToProps)(WindowTopBar);

minimal_redux_poc/src/styles/index.scss

@@ -34,11 +34,15 @@ body {
     position: relative;
   }
 
-  &-window-heading {
+  &-window-top-bar {
     background: linear-gradient(to bottom, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 100%);
     color: white;
     position: absolute;
-    z-index: 10;  
+    z-index: 10;
+
+    h3 {
+      margin: 0;
+    }
   }
 
   &-osd-container {