hyrax 2.0.3 → 2.1.0.beta1

data/app/assets/javascripts/hyrax/relationships/registry.es6

@@ -2,7 +2,8 @@ import RegistryEntry from './registry_entry'
 export default class Registry {
   /**
    * Initialize the registry
-   * @param {jQuery} element the jquery selector for the permissions container
+   * @param {jQuery} element the jquery selector for the permissions container.
+   *                         must be a table with a tbody element.
    * @param {String} object_name the name of the object, for constructing form fields (e.g. 'generic_work')
    * @param {String} templateId the the identifier of the template for the added elements
    */
@@ -13,40 +14,43 @@ export default class Registry {
     this.templateId = templateId
     this.items = []
     this.element = element
-
-    // the remove button is only on preexisting grants
-    element.find('[data-behavior="remove-relationship"]').on('click', (evt) => this.removeWork(evt))
+    element.closest('form').on('submit', (evt) => {
+        this.serializeToForm()
+    });
   }
 
   // Return an index for the hidden field when adding a new row.
-  // This makes the assumption that all the tr elements represent a work except
-  // for the final one, which is the "add another" form
+  // A large random will probably avoid collisions.
   nextIndex() {
-      return this.element.find('tbody').children('tr').length - 1;
+      return Math.floor(Math.random() * 1000000000000000)
   }
 
-  addWork(work) {
-    work.index = this.nextIndex()
-    this.items.push(new RegistryEntry(work, this, this.element.find('tr:last'), this.templateId))
-    this.showSaveNote();
+  export() {
+      return this.items.map(item => item.export())
   }
 
-  // removes a row that has been persisted
-  removeWork(evt) {
-     evt.preventDefault();
-     let button = $(evt.target);
-     let container = button.closest('tr');
-     container.addClass('hidden'); // do not show the block
-     this.addDestroyField(container, button.attr('data-index'));
-     this.showSaveNote();
+  serializeToForm() {
+      this.export().forEach((item, index) => {
+          this.addHiddenField(index, 'id', item.id)
+          this.addHiddenField(index, '_destroy', item['_destroy'])
+      })
   }
 
-  addDestroyField(element, index) {
+  addHiddenField(index, key, value) {
       $('<input>').attr({
           type: 'hidden',
-          name: `${this.fieldPrefix(index)}[_destroy]`,
-          value: 'true'
-      }).appendTo(element);
+          name: `${this.fieldPrefix(index)}[${key}]`,
+          value: value
+      }).appendTo(this.element);
+  }
+
+  // Adds the resource to the first row of the tbody
+  addResource(resource) {
+      resource.index = this.nextIndex()
+      let entry = new RegistryEntry(resource, this, this.templateId)
+      this.items.push(entry)
+      this.element.prepend(entry.view)
+      this.showSaveNote()
   }
 
   fieldPrefix(counter) {
@@ -54,7 +58,6 @@ export default class Registry {
   }
 
   showSaveNote() {
-    // TODO: we may want to reveal a note that changes aren't active until the work is saved
+    // TODO: we may want to reveal a note that changes aren't active until the resource is saved
   }
-
 }

data/app/assets/javascripts/hyrax/relationships/registry_entry.es6

@@ -1,38 +1,45 @@
-export default class RegistryEntry {
-  /**
-   * Initialize the registry entry
-   * @param {Work} work the work to display on the form
-   * @param {Registry} registry the registry that holds this registry entry.
-   * @param {jQuery} element a place to insert the new row
-   * @param {String} template identifer of the new row template.
-   */
-  constructor(work, registry, element, template) {
-    this.work = work
-    this.registry = registry
-    this.element = element
+import ConfirmRemoveDialog from 'hyrax/relationships/confirm_remove_dialog'
 
-    let row = this.createRow(work, template);
-    this.addHiddenField(row, work);
-    row.effect("highlight", {}, 3000);
-  }
+export default class RegistryEntry {
+    /**
+     * Initialize the registry entry
+     * @param {Resource} resource the resource to display on the form
+     * @param {Registry} registry the registry that holds this registry entry.
+     * @param {String} template identifer of the new row template.
+     */
+    constructor(resource, registry, template) {
+        this.resource = resource
+        this.registry = registry
+        this.view = this.createView(resource, template);
+        this.destroyed = false
+        //this.view.effect("highlight", {}, 3000);
+    }
 
-  // Remove a row that has not been persisted
-  createRow(work, templateId) {
-    let row = $(tmpl(templateId, work));
-    this.element.before(row);
-    row.find('[data-behavior="remove-relationship"]').click(function () {
-      row.remove();
-    });
+    export() {
+      return { 'id': this.resource.id, '_destroy': this.destroyed }
+    }
 
-    return row;
-  }
+    // Add a row that has not been persisted
+    createView(resource, templateId) {
+        let row = $(tmpl(templateId, resource))
+        let removeButton = row.find('[data-behavior="remove-relationship"]')
+        removeButton.click((e) => {
+          e.preventDefault()
+          var dialog = new ConfirmRemoveDialog(removeButton.data('confirmText'),
+                                               removeButton.data('confirmCancel'),
+                                               removeButton.data('confirmRemove'),
+                                               () => this.removeResource(e));
+          dialog.launch();
+        });
+        return row;
+    }
 
-  addHiddenField(element, work) {
-      var prefix = this.registry.fieldPrefix(work.index);
-      $('<input>').attr({
-          type: 'hidden',
-          name: prefix + '[id]',
-          value: work.id
-      }).appendTo(element);
-  }
+    // Hides the row and adds a _destroy=true field to the form
+    removeResource(evt) {
+       evt.preventDefault();
+       let button = $(evt.target);
+       this.view.addClass('hidden'); // do not show the block
+       this.destroyed = true
+       this.registry.showSaveNote();
+    }
 }

data/app/assets/javascripts/hyrax/relationships/resource.es6

@@ -0,0 +1,10 @@
+/*
+ * Represents a Child work or related Collection
+ */
+export default class Resource {
+    constructor(id, title) {
+        this.id = id
+        this.title = title
+        this.index = 0
+    }
+}

data/app/assets/javascripts/hyrax/select_collection_type.es6

@@ -0,0 +1,39 @@
+export default class SelectCollectionType {
+  /**
+   * Initializes the class in the context of an individual table element
+   * @param {jQuery} element the table element that this class represents
+   */
+  constructor(element) {
+      this.$element = element;
+      this.target = element.data('target')
+      this.modal = $(this.target)
+      this.form = this.modal.find('form.new-collection-select')
+
+      // launch the modal.
+      element.on('click', (e) => {
+          e.preventDefault()
+          this.form.on('submit', this.routingLogic.bind(this))
+      });
+
+      // remove the routing logic when the modal is hidden
+      this.modal.on('hide.bs.modal', (e) => {
+          this.form.unbind('submit')
+      });
+  }
+
+  // when the form is submitted route to the correct location
+  routingLogic(e) {
+      e.preventDefault()
+      if (this.destination() === undefined)
+        return false
+      // get the destination from the data attribute of the selected radio button
+      window.location.href = this.destination()
+  }
+
+  // Each input has two attributes that contain paths, one for the batch and one
+  // for a single work.  So, given the value of 'this.type', return the appropriate
+  // path.
+  destination() {
+      return this.form.find('input[type="radio"]:checked').data("path")
+  }
+}

data/app/assets/javascripts/hyrax/{per_page.es6 → sort_and_per_page.es6}

@@ -1,4 +1,4 @@
-export default class PerPage {
+export default class SortAndPerPage {
   /**
    * Initializes the class in the context of an individual select element,
    * and bind its change event to submit the form it is contained within.

data/app/assets/javascripts/hyrax/tabbed_form.es6

@@ -0,0 +1,35 @@
+class TabbedForm {
+  /**
+   * Bootstrap Tabs use anchors to identify tabs. Anchor of active tab is added as hidden input to given form 
+   * so that active tab state can be maintained after Post.
+   * @param {form} form element that includes tabs and to which tab anchor will be added as an input
+   */
+  constructor(form) {
+    this.form = form;
+  }
+
+  setup() {
+    this.refererAnchor = this.addRefererAnchor()
+    this.watchActiveTab()
+    this.setRefererAnchor($('.nav-tabs li.active a').attr('href'))
+  }
+
+  addRefererAnchor() {
+    let referer_anchor_input = $('<input>').attr({type: 'hidden', id: 'referer_anchor', name: 'referer_anchor'}) 
+    this.form.append(referer_anchor_input)
+    return referer_anchor_input
+  }
+
+  setRefererAnchor(id) {
+    this.refererAnchor.val(id)
+  }
+
+  watchActiveTab() {
+    $('.nav-tabs a').on('shown.bs.tab', (e) => this.setRefererAnchor($(e.target).attr('href')))
+  }
+}
+
+export default function tabifyForm(form) {
+  let formTabifier = new TabbedForm(form)
+  formTabifier.setup()
+}

data/app/assets/stylesheets/_bootstrap-default-overrides.scss

@@ -3,3 +3,18 @@ $brand-danger: #d33a35 !default;
 $brand-success: #387f38 !default;
 $brand-info: #2c76c7 !default;
 $brand-warning: #565653 !default;
+
+// Overrides for accessibility compliance
+// Testing: WAVE evaluation tool: http://wave.webaim.org/
+// Chrome has a WAVE extension that you can toggle on/off for testing
+
+// Bootsrap upto v4.0 has poor styling for color-contrast that causes the WAVE
+// tool to throw contrast errors
+// Read more: https://getbootstrap.com/docs/4.0/getting-started/accessibility/#color-contrast
+// These changes meet WCAG AA and AAA compliance standard
+// I'm passing values to bootstrap variables as listed here:
+// https://getbootstrap.com/docs/3.3/customize/#less-variables
+// * Darkens the text for active breadcrumb on every page. Meets WCAG AA and AAA
+// * Darkens the text for disabled pagination buttons on every page.
+$breadcrumb-active-color: #4c4c4c;
+$pagination-disabled-color: #4c4c4c;

data/app/assets/stylesheets/fileupload/jquery.fileupload-ui.scss

@@ -36,6 +36,12 @@
   }
 }
 
+// Global progress bar
+.fileupload-progress {
+  margin-top: 10px;
+}
+
+// Individual file progress bar
 .files .progress {
   width: 200px;
 }

data/app/assets/stylesheets/hyrax/_accessibility.scss

@@ -0,0 +1,16 @@
+// This stylesheet is a place to apply styling changes for improving the
+// accessibility of Hyrax vanilla
+// Use https://github.com/samvera/hyrax/blob/master/app/assets/stylesheets/_bootstrap-default-overrides.scss
+// for overriding bootstrap variables
+
+// NOTE: This isn't an ideal fix. We're using select2-rails v3.5
+// for styling dropdowns. This can be fixed by updating to select2-rails
+// v4.0.3 but it throws an uncaught error and fails to
+// display the dropdown at all.
+// TODO: I opened an issue that we should follow up on later
+// https://github.com/argerim/select2-rails/issues/176
+// Darkens the 'Search for a user' text in dropdown on 'Dashboard page'
+// Meets WCAG AA and AAA compliance standard
+.select2-default {
+  color: #4c4c4c !important;
+}

data/app/assets/stylesheets/hyrax/_catalog.scss

@@ -1,7 +1,7 @@
 // makes it so images don't bleed into the content on the right
 .catalog img {
   max-width: 100%;
-  max-height: auto;
+  height: auto;
 }
 
 .document-thumbnail {
@@ -15,8 +15,95 @@
     width: 30%;
     float: left;
   }
+
   .metadata {
     width: 70%;
     display: inline-block;
   }
 }
+
+// Styles added to help with newly implemented
+// Bootstrap row / column setup for search results
+.search-result-wrapper {
+  padding-bottom: 30px;
+
+  .search-results-title-row {
+    align-items: center;
+    display: flex;
+    padding: 0 0 10px;
+
+    .search-result-title {
+      display: inline-block;
+      margin: 0 15px;
+    }
+
+    @media (max-width: 768px) {
+      display: block;
+
+      > .search-result-title {
+        display: block;
+        padding-bottom: 5px;
+      }
+
+      .label {
+        margin-left: 15px;
+      }
+    }
+  }
+
+  .list-thumbnail {
+    float: none;
+    width: 100%;
+  }
+
+  .metadata {
+    width: 100%;
+  }
+
+  .metadata-row {
+
+    > div:first-child {
+      font-weight: bold;
+      padding-right: 0;
+      text-align: right;
+
+      @media (max-width: 768px) {
+        text-align: left;
+      }
+    }
+  }
+
+  .collection-counts-wrapper {
+    text-align: right;
+
+    @media (max-width: 768px) {
+      text-align: left;
+    }
+
+    .collection-counts-item {
+      background-color: #f5f5f5;
+      display: inline-block;
+      margin-left: 10px;
+      padding: 8px;
+      text-align: center;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      span {
+        display: block;
+        font-size: 18px;
+        line-height: 1;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    padding-bottom: 20px;
+
+    > div {
+      padding-bottom: 10px;
+    }
+  }
+}

data/app/assets/stylesheets/hyrax/_collection_types.scss

@@ -0,0 +1,53 @@
+@mixin toggle-arrow($content) {
+  content: $content;
+  display: inline-block;
+  font-family: 'FontAwesome';
+  margin-left: 5px;
+  text-decoration: none;
+}
+
+.collection-types-wrapper {
+  @media (min-width: 900px) {
+    .collection-types-table {
+      th:last-child,
+      td:last-child {
+        width: 20%;
+      }
+    }
+  }
+
+  .screen-hidden {
+    height: 1px;
+    left: -10000px;
+    overflow: hidden;
+    position: absolute;
+    top: auto;
+    width: 1px;
+  }
+
+  .panel-heading {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .collapse-header {
+    &:focus {
+      text-decoration: none;
+    }
+
+    &::after {
+      @include toggle-arrow('\f0da');
+    }
+
+    &.open {
+      &::after {
+        @include toggle-arrow('\f0d7');
+      }
+    }
+  }
+}
+
+.collection-type-share-applies-to {
+  margin-left: 3em;
+}