Allow to create a new resource when editing another one for a smoother workflow with linked resources

application/asset/js/resource-form.js

@@ -183,6 +183,7 @@
                     errors.push('The following field is required: ' + propLabel);
                 }
             });
+            thisForm.data('has-error', errors.length > 0);
             if (errors.length) {
                 e.preventDefault();
                 alert(errors.join("\n"));

application/asset/js/resource-selector.js

@@ -71,6 +71,55 @@
             $('#filter-item-set').chosen(newOptions);
         });
 
+        // Allow to create a new resource in a modal window during edition of another resource.
+        var modal;
+        $(document).on('click', '.quick-add-resource', function(e) {
+            e.preventDefault();
+            // Save the modal in local storage to allow recursive new resources.
+            var d = new Date();
+            var windowName = 'new resource ' + d.getTime();
+            var windowFeatures = 'titlebar=no,menubar=no,location=no,resizable=yes,scrollbars=yes,status=yes,directories=no,fullscreen=no,top=90,left=120,width=830,height=700';
+            modal = window.open(e.target.href, windowName, windowFeatures);
+            window.localStorage.setItem('modal', modal);
+            // Check if the modal is closed, then refresh the list of resources.
+            var checkSidebarModal = setInterval(function() {
+                if (modal && modal.closed) {
+                    clearInterval(checkSidebarModal);
+                    // Wait to let Omeka saves the new resource, if any.
+                    setTimeout(function() {
+                        var s = $('#sidebar-resource-search');
+                        Omeka.populateSidebarContent(s.closest('.sidebar'), s.data('search-url'), '');
+                    }, 2000);
+                }
+            }, 100);
+            return false;
+        });
+        // Add a new resource on modal window.
+        $(document).on('click', '.modal form.resource-form #page-actions button[type=submit]', function(e) {
+            // Warning: the submit may not occur when the modal is not focus.
+            $('form.resource-form').submit();
+            // TODO Manage error after submission (via ajax post?).
+            // To avoid most issues for now, tab "Media" and "Thumbnail" are hidden.
+            // Anyway, the user is working on the main resource.
+            if ($('form.resource-form').data('has-error') == 1) {
+                e.preventDefault();
+            } else {
+                window.localStorage.removeItem('modal');
+                // Leave time to submit the form before closing form.
+                setTimeout(function() {
+                    window.close();
+                }, 1000);
+            }
+            $('form.resource-form').removeData('has-error');
+            return false;
+        });
+        // Cancel modal window.
+        $(document).on('click', '.modal form.resource-form #page-actions a.cancel', function(e) {
+            e.preventDefault();
+            window.localStorage.removeItem('modal');
+            window.close();
+            return false;
+        });
+
     });
 })(jQuery);
-

application/asset/sass/_screen.scss

@@ -835,6 +835,10 @@ div[role="main"] > h1:first-of-type {
     line-height: 1.5 * $base-line-height;
 }
 
+body.modal div[role="main"] > h1:first-of-type {
+    width: 100%;
+}
+
 div[role="main"] > h1:first-of-type .title {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -875,6 +879,15 @@ div[role="main"] > h1:first-of-type .title {
     margin: 0 $spacing-medium;
 }
 
+body.modal header,
+body.modal footer {
+    display: none !important;
+}
+body.modal .resource-form .section-nav #item-media-label,
+body.modal .resource-form .section-nav #thumbnail-label {
+    display: none !important;
+}
+
 /* @end */
 
 /* @group ----- Footer ----- */
@@ -2724,6 +2737,35 @@ input[type="text"].value-language,
     }
 }
 
+.quick-add-resource {
+    min-height: 0 !important;
+    background-color: rgba(0,0,0,.08) !important;
+    color: $copy-gray !important;
+    border-radius: 3px;
+    border: 0;
+    box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset !important;
+    padding: $spacing-small 10px;
+    margin: .75 * $spacing-medium 0 $spacing-small $spacing-small !important;
+    text-align: center;
+    cursor: pointer;
+    float: right;
+
+    &:before {
+        margin-right: $spacing-small;
+    }
+
+    &:hover:not(.inactive) {
+        box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset !important;
+    }
+
+    &.inactive {
+        box-shadow: none !important;
+        background-color: #d2d2d2 !important;
+        cursor: default;
+        border: 0;
+    }
+}
+
 .sidebar button.quick-select-toggle {
     background-color: transparent;
     color: $copy-gray;
@@ -3185,6 +3227,12 @@ input[type="text"].value-language,
 body.sidebar-open #content {
     width: span(9 of 16);
 }
+body.modal.sidebar-open header {
+    width: 0;
+}
+body.modal.sidebar-open #content {
+    width: span(12 of 16);
+}
 
 .sidebar .meta-group {
     margin-bottom: $spacing-medium;

application/asset/sass/_tablet.scss

@@ -299,6 +299,7 @@ div[role="main"] {
     }
 }
 
+body.modal.sidebar-open #content,
 body.sidebar-open #content {
     width: 100%;
 }

application/view/omeka/admin/item-set/add.phtml

@@ -1,6 +1,7 @@
 <?php
 $translate = $this->plugin('translate');
-$this->htmlElement('body')->appendAttribute('class', 'add item-sets');
+$isModal = $this->params()->fromQuery('window') === 'modal';
+$this->htmlElement('body')->appendAttribute('class', ($isModal ? 'modal ' : '') . 'add item-sets');
 ?>
 
 <?php echo $this->pageTitle($translate('New item set'), 1, $translate('Item sets')); ?>
@@ -9,6 +10,7 @@ $this->htmlElement('body')->appendAttribute('class', 'add item-sets');
 echo $this->partial('omeka/admin/item-set/form.phtml', [
     'form' => $form,
     'itemSet' => null,
+    'submitLabel' => $translate('Add'),
     'sectionNavEvent' => 'view.add.section_nav',
     'action' => 'add',
 ]);

application/view/omeka/admin/item-set/form.phtml

@@ -51,7 +51,7 @@ $form->prepare();
 
     <?php echo (isset($deleteButton)) ? $deleteButton : ''; ?>
     <?php echo $this->cancelButton(); ?>
-    <input type="submit" name="add-item-set-submit" value="<?php echo $translate('Save'); ?>">
+    <button type="submit" name="add-item-set-submit"><?php echo $escape($submitLabel); ?></button>
 </div>
 
 <?php $this->trigger("view.$action.form.after", ['form' => $form]); ?>

application/view/omeka/admin/item-set/sidebar-select.phtml

@@ -16,6 +16,10 @@ $itemSetsFound = count($itemSets) > 0;
     <?php endif; ?>
 </div>
 
+<div data-data-type="resource:itemset">
+    <a class="o-icon-item-sets button quick-add-resource" href="<?php echo $this->url(null, ['action' => 'add'], ['query' => ['window' => 'modal']], true) ?>" target="_blank"> <?php echo $translate('New item set') ?></a>
+</div>
+
 <div class="resource-list">
     <?php if ($itemSetsFound): ?>
         <?php

application/view/omeka/admin/item/add.phtml

@@ -1,6 +1,7 @@
 <?php
 $translate = $this->plugin('translate');
-$this->htmlElement('body')->appendAttribute('class', 'add items');
+$isModal = $this->params()->fromQuery('window') === 'modal';
+$this->htmlElement('body')->appendAttribute('class', ($isModal ? 'modal ' : '') . 'add items');
 ?>
 
 <?php echo $this->pageTitle($translate('New item'), 1, $translate('Items')); ?>

application/view/omeka/admin/item/sidebar-select.phtml

@@ -63,6 +63,10 @@ $expanded = $resourceClassId || $itemSetId || $id;
         <?php endif; ?>
     </div>
 
+    <div data-data-type="resource:item">
+        <a class="o-icon-items button quick-add-resource" href="<?php echo $this->url(null, ['action' => 'add'], ['query' => ['window' => 'modal']], true) ?>" target="_blank"> <?php echo $translate('New item') ?></a>
+    </div>
+
     <?php if ($itemsFound): ?>
     <button type="button" class="quick-select-toggle"><?php echo $translate('Quick add'); ?></button>