blacklight-spotlight 3.5.0.4 → 3.6.0.beta1

data/app/javascript/spotlight/admin/blocks/browse_group_categories_block.js

@@ -0,0 +1,88 @@
+/*
+  Sir Trevor BrowseGroupCategories
+*/
+import Spotlight from 'spotlight'
+
+SirTrevor.Blocks.BrowseGroupCategories = (function(){
+
+  return Spotlight.Block.Resources.extend({
+    type: "browse_group_categories",
+    icon_name: "browse",
+    bloodhoundOptions: function() {
+      var that = this;
+      return {
+        prefetch: {
+          url: this.autocomplete_url(),
+          ttl: 0,
+          filter: function(response) {
+            // Let the dom know that the response has been returned
+            $(that.inner).attr('data-browse-groups-fetched', true);
+            return response;
+          }
+        }
+      };
+    },
+
+    autocomplete_control: function() {
+      return `<input type="text" class="st-input-string form-control item-input-field" data-twitter-typeahead="true" placeholder="${i18n.t("blocks:browse_group_categories:autocomplete")}"/>`
+    },
+    autocomplete_template: function() { return '<div class="autocomplete-item{{#unless published}} blacklight-private{{/unless}}"><span class="autocomplete-title">{{title}}</span><br/></div>' },
+    autocomplete_url: function() { return $(this.inner).closest('form[data-autocomplete-exhibit-browse-groups-path]').data('autocomplete-exhibit-browse-groups-path').replace("%25QUERY", "%QUERY"); },
+    _itemPanel: function(data) {
+      var index = "item_" + this.globalIndex++;
+      var checked;
+      if (data.display == "true") {
+        checked = "checked='checked'"
+      } else {
+        checked = "";
+      }
+      var resource_id = data.slug || data.id;
+      var markup = `
+        <li class="field form-inline dd-item dd3-item" data-resource-id="${resource_id}" data-id="${index}" id="${this.formId("item_" + data.id)}">
+          <input type="hidden" name="item[${index}][id]" value="${resource_id}" />
+          <input type="hidden" name="item[${index}][title]" value="${data.title}" />
+          <input data-property="weight" type="hidden" name="item[${index}][weight]" value="${data.weight}" />
+            <div class="card d-flex dd3-content">
+              <div class="dd-handle dd3-handle">${i18n.t("blocks:resources:panel:drag")}</div>
+              <div class="d-flex card-header item-grid justify-content-between">
+                <div class="d-flex flex-grow-1">
+                  <div class="checkbox">
+                    <input name="item[${index}][display]" type="hidden" value="false" />
+                    <input name="item[${index}][display]" id="${this.formId(this.display_checkbox + '_' + data.id)}" type="checkbox" ${checked} class="item-grid-checkbox" value="true"  />
+                    <label class="sr-only" for="${this.formId(this.display_checkbox + '_' + data.id)}">${i18n.t("blocks:resources:panel:display")}</label>
+                  </div>
+                  <div class="main">
+                    <div class="title card-title">${data.title}</div>
+                  </div>
+                </div>
+                <div class="d-flex">
+                  <a data-item-grid-panel-remove="true" href="#">${i18n.t("blocks:resources:panel:remove")}</a>
+                </div>
+              </div>
+            </div>
+          </li>`
+
+      const panel = $(markup);
+      var context = this;
+
+      $('a[data-item-grid-panel-remove]', panel).on('click', function(e) {
+        e.preventDefault();
+        $(this).closest('.field').remove();
+        context.afterPanelDelete();
+
+      });
+
+      this.afterPanelRender(data, panel);
+
+      return panel;
+    },
+
+    item_options: function() { return `
+      '<label>
+        <input type="hidden" name="display-item-counts" value="false" />
+        <input type="checkbox" name="display-item-counts" value="true" checked />
+        ${i18n.t("blocks:browse_group_categories:item_counts")}
+      </label>`
+    },
+  });
+})();

data/app/{assets/javascripts → javascript}/spotlight/admin/blocks/iframe_block.js

@@ -19,16 +19,12 @@ SirTrevor.Blocks.Iframe = (function(){
     icon_name: "iframe",
     
     editorHTML: function() {
-      return _.template(this.template, this)(this);
-    },
-
-    template: [
-      '<div class="clearfix">',
-        '<div class="widget-header">',
-          '<%= description() %>',
-        '</div>',
-        '<textarea name="code" class="form-control" rows="5" placeholder="<%= i18n.t("blocks:iframe:placeholder") %>"></textarea>',
-      '</div>'
-    ].join("\n"),
+      return `<div class="clearfix">
+        <div class="widget-header">
+          ${this.description()}
+        </div>
+        <textarea name="code" class="form-control" rows="5" placeholder="${i18n.t("blocks:iframe:placeholder")}"></textarea>
+      </div>`;
+    }
   });
 })();

data/app/{assets/javascripts → javascript}/spotlight/admin/blocks/link_to_search_block.js

@@ -1,5 +1,3 @@
-//= require spotlight/admin/blocks/browse_block
-
 SirTrevor.Blocks.LinkToSearch = (function(){
 
   return SirTrevor.Blocks.Browse.extend({

data/app/javascript/spotlight/admin/blocks/oembed_block.js

@@ -0,0 +1,41 @@
+/*
+  Sir Trevor ItemText Block.
+  This block takes an ID,
+  fetches the record from solr,
+  displays the image, title, 
+  and any provided text
+  and displays them.
+*/
+import Spotlight from 'spotlight'
+
+SirTrevor.Blocks.Oembed =  (function(){
+
+  return Spotlight.Block.extend({
+    plustextable: true,
+
+    id_key:"url",
+
+    type: "oembed",
+    
+    title: function() { return i18n.t('blocks:oembed:title'); },
+    description: function() { return i18n.t('blocks:oembed:description'); },
+
+    icon_name: "oembed",
+    show_heading: false,
+
+    editorHTML: function () {
+      return `<div class="form oembed-text-admin clearfix">
+      <div class="widget-header">
+        ${this.description()}
+      </div>
+      <div class="row">
+        <div class="form-group col-md-8">
+          <label for="${this.formId(id_key)}">${i18n.t("blocks:oembed:url")}</label>
+          <input name="${id_key}" class="form-control col-md-6" type="text" id="${this.formId(id_key)}" />
+        </div>
+      </div>
+      ${this.text_area()}
+    </div>`
+    }
+  });
+})();

data/app/{assets/javascripts → javascript}/spotlight/admin/blocks/pages_block.js

@@ -1,4 +1,4 @@
-//= require spotlight/admin/blocks/resources_block
+import Spotlight from 'spotlight'
 
 SirTrevor.Blocks.FeaturedPages = (function(){
 

data/app/{assets/javascripts → javascript}/spotlight/admin/blocks/resources_block.js

@@ -1,3 +1,6 @@
+import Spotlight from 'spotlight'
+import SpotlightNestable from 'spotlight_nestable'
+
 Spotlight.Block.Resources = (function(){
 
   return Spotlight.Block.extend({
@@ -34,39 +37,39 @@ Spotlight.Block.Resources = (function(){
         checked = "";
       }
       var resource_id = data.slug || data.id;
-      var markup = [
-          '<li class="field form-inline dd-item dd3-item" data-resource-id="' + resource_id + '" data-id="' + index + '" id="' + this.formId("item_" + data.id) + '">',
-            '<input type="hidden" name="item[' + index + '][id]" value="' + resource_id + '" />',
-            '<input type="hidden" name="item[' + index + '][title]" value="' + data.title + '" />',
-            this._itemPanelIiifFields(index, data),
-            '<input data-property="weight" type="hidden" name="item[' + index + '][weight]" value="' + data.weight + '" />',
-              '<div class="card d-flex dd3-content">',
-                '<div class="dd-handle dd3-handle"><%= i18n.t("blocks:resources:panel:drag") %></div>',
-                '<div class="card-header item-grid">',
-                  '<div class="d-flex">',
-                    '<div class="checkbox">',
-                      '<input name="item[' + index + '][display]" type="hidden" value="false" />',
-                      '<input name="item[' + index + '][display]" id="'+ this.formId(this.display_checkbox + '_' + data.id) + '" type="checkbox" ' + checked + ' class="item-grid-checkbox" value="true"  />',
-                      '<label class="sr-only" for="'+ this.formId(this.display_checkbox + '_' + data.id) +'"><%= i18n.t("blocks:resources:panel:display") %></label>',
-                    '</div>',
-                    '<div class="pic">',
-                      '<img class="img-thumbnail" src="' + (data.thumbnail_image_url || ((data.iiif_tilesource || "").replace("/info.json", "/full/!100,100/0/default.jpg"))) + '" />',
-                    '</div>',
-                    '<div class="main">',
-                      '<div class="title card-title">' + data.title + '</div>',
-                      '<div>' + (data.slug || data.id) + '</div>',
-                    '</div>',
-                    '<div class="remove float-right">',
-                      '<a data-item-grid-panel-remove="true" href="#"><%= i18n.t("blocks:resources:panel:remove") %></a>',
-                    '</div>',
-                  '</div>',
-                  '<div data-panel-image-pagination="true"></div>',
-                '</div>',
-              '</div>',
-            '</li>'
-      ].join("\n");
-
-      var panel = $(_.template(markup)(this));
+      var markup = `
+          <li class="field form-inline dd-item dd3-item" data-resource-id="${resource_id}" data-id="${index}" id="${this.formId("item_" + data.id)}">
+            <input type="hidden" name="item[${index}][id]" value="${resource_id}" />
+            <input type="hidden" name="item[${index}][title]" value="${data.title}" />
+            ${this._itemPanelIiifFields(index, data)}
+            <input data-property="weight" type="hidden" name="item[${index}][weight]" value="${data.weight}" />
+              <div class="card d-flex dd3-content">
+                <div class="dd-handle dd3-handle">${i18n.t("blocks:resources:panel:drag")}</div>
+                <div class="card-header item-grid">
+                  <div class="d-flex">
+                    <div class="checkbox">
+                      <input name="item[${index}][display]" type="hidden" value="false" />
+                      <input name="item[${index}][display]" id="${this.formId(this.display_checkbox + '_' + data.id)}" type="checkbox" ${checked} class="item-grid-checkbox" value="true"  />
+                      <label class="sr-only" for="${this.formId(this.display_checkbox + '_' + data.id)}">${i18n.t("blocks:resources:panel:display")}</label>
+                    </div>
+                    <div class="pic">
+                      <img class="img-thumbnail" src="${(data.thumbnail_image_url || ((data.iiif_tilesource || "").replace("/info.json", "/full/!100,100/0/default.jpg")))}" />
+                    </div>
+                    <div class="main">
+                      <div class="title card-title">${data.title}</div>
+                      <div>${(data.slug || data.id)}</div>
+                    </div>
+                    <div class="remove float-right">
+                      <a data-item-grid-panel-remove="true" href="#">${i18n.t("blocks:resources:panel:remove")}</a>
+                    </div>
+                  </div>
+                  <div data-panel-image-pagination="true"></div>
+                </div>
+              </div>
+            </li>
+      `
+
+      const panel = $(markup);
       var context = this;
 
       $('.remove a', panel).on('click', function(e) {
@@ -102,7 +105,7 @@ Spotlight.Block.Resources = (function(){
       if (this.plustextable) {
         templates.push(this.text_area());
       }
-      return _.template(templates.join("<hr />\n"))(this);
+      return templates.join("<hr />\n");
     },
 
     items_selector: function() { return [
@@ -119,14 +122,14 @@ Spotlight.Block.Resources = (function(){
     '</div>'].join("\n")
     },
 
-    template: [
-      '<div class="form resources-admin clearfix">',
-        '<div class="widget-header">',
-          '<%= description() %>',
-        '</div>',
-        '<%= content() %>',
-      '</div>'
-    ].join("\n"),
+    editorHTML: function() {
+      return `<div class="form resources-admin clearfix">
+        <div class="widget-header">
+          ${this.description()}
+        </div>
+        ${this.content()}
+      </div>`
+    },
 
     onBlockRender: function() {
       SpotlightNestable.init($('[data-behavior="nestable"]', this.inner));

data/app/{assets/javascripts → javascript}/spotlight/admin/blocks/rule_block.js

@@ -17,9 +17,7 @@ SirTrevor.Blocks.Rule = (function(){
     icon_name: "rule",
     
     editorHTML: function() {
-      return _.template(this.template, this)(this);
-    },
-
-    template: '<hr />'
+      return '<hr />'
+    }
   });
 })();

data/app/{assets/javascripts → javascript}/spotlight/admin/blocks/search_result_block.js

@@ -13,7 +13,7 @@ SirTrevor.Blocks.SearchResults =  (function(){
     plustextable: false,
 
     content: function() {
-      return _.template([this.items_selector()].join("<hr />\n"))(this);
+      return this.items_selector()
     },
 
     item_options: function() {
@@ -21,14 +21,12 @@ SirTrevor.Blocks.SearchResults =  (function(){
       var fields = $('[data-blacklight-configuration-search-views]').data('blacklight-configuration-search-views');
 
       return $.map(fields, function(field) {
-        checkbox = ""
-        checkbox += "<div>";
-        checkbox += "<label for='" + block.formId(block.view_key + field.key) + "'>";
-          checkbox += "<input id='" + block.formId(block.view_key + field.key) + "' name='" + block.view_key + "[]' type='checkbox' value='" + field.key + "' /> ";
-            checkbox += field.label;
-            checkbox += "</label>";
-          checkbox += "</div>";
-        return checkbox;
+        return `<div>
+          <label for='${block.formId(block.view_key + field.key)}'>
+            <input id='${block.formId(block.view_key + field.key)}' name='${block.view_key}[]' type='checkbox' value='${field.key}' />
+          ${field.label}
+          </label>
+        </div>`
       }).join("\n");
     },
 

data/app/{assets/javascripts → javascript}/spotlight/admin/blocks/solr_documents_base_block.js

@@ -1,4 +1,5 @@
-//= require spotlight/admin/blocks/resources_block
+import Iiif from '../iiif'
+import Spotlight from 'spotlight'
 
 SirTrevor.Blocks.SolrDocumentsBase = (function(){
 
@@ -23,26 +24,26 @@ SirTrevor.Blocks.SolrDocumentsBase = (function(){
 
     item_options: function() { return this.caption_options(); },
 
-    caption_options: function() { return [
-      '<div class="field-select primary-caption" data-behavior="item-caption-admin">',
-        '<input name="<%= show_primary_field_key %>" type="hidden" value="false" />',
-        '<input data-input-select-target="#<%= formId(primary_field_key) %>" name="<%= show_primary_field_key %>" id="<%= formId(show_primary_field_key) %>" type="checkbox" value="true" />',
-        '<label for="<%= formId(show_primary_field_key) %>"><%= i18n.t("blocks:solr_documents:caption:primary") %></label>',
-        '<select data-input-select-target="#<%= formId(show_primary_field_key) %>" name="<%= primary_field_key %>" id="<%= formId(primary_field_key) %>">',
-          '<option value=""><%= i18n.t("blocks:solr_documents:caption:placeholder") %></option>',
-          '<%= caption_option_values() %>',
-        '</select>',
-      '</div>',
-      '<div class="field-select secondary-caption" data-behavior="item-caption-admin">',
-        '<input name="<%= show_secondary_field_key %>" type="hidden" value="false" />',
-        '<input data-input-select-target="#<%= formId(secondary_field_key) %>" name="<%= show_secondary_field_key %>" id="<%= formId(show_secondary_field_key) %>" type="checkbox" value="true" />',
-        '<label for="<%= formId(show_secondary_field_key) %>"><%= i18n.t("blocks:solr_documents:caption:secondary") %></label>',
-        '<select data-input-select-target="#<%= formId(show_secondary_field_key) %>" name="<%= secondary_field_key %>" id="<%= formId(secondary_field_key) %>">',
-        '<option value=""><%= i18n.t("blocks:solr_documents:caption:placeholder") %></option>',
-          '<%= caption_option_values() %>',
-        '</select>',
-      '</div>',
-    ].join("\n") },
+    caption_options: function() { return `
+      <div class="field-select primary-caption" data-behavior="item-caption-admin">
+        <input name="${this.show_primary_field_key}" type="hidden" value="false" />
+        <input data-input-select-target="#${this.formId(this.primary_field_key)}" name="${this.show_primary_field_key}" id="${this.formId(this.show_primary_field_key)}" type="checkbox" value="true" />
+        <label for="${this.formId(this.show_primary_field_key)}">${i18n.t("blocks:solr_documents:caption:primary")}</label>
+        <select data-input-select-target="#${this.formId(this.show_primary_field_key)}" name="${this.primary_field_key}" id="${this.formId(this.primary_field_key)}">
+          <option value="">${i18n.t("blocks:solr_documents:caption:placeholder")}</option>
+          ${this.caption_option_values()}
+        </select>
+      </div>
+      <div class="field-select secondary-caption" data-behavior="item-caption-admin">
+        <input name="${this.show_secondary_field_key}" type="hidden" value="false" />
+        <input data-input-select-target="#${this.formId(this.secondary_field_key)}" name="${this.show_secondary_field_key}" id="${this.formId(this.show_secondary_field_key)}" type="checkbox" value="true" />
+        <label for="${this.formId(this.show_secondary_field_key)}">${i18n.t("blocks:solr_documents:caption:secondary")}</label>
+        <select data-input-select-target="#${this.formId(this.show_secondary_field_key)}" name="${this.secondary_field_key}" id="${this.formId(this.secondary_field_key)}">
+        <option value="">${i18n.t("blocks:solr_documents:caption:placeholder")}</option>
+          ${this.caption_option_values()}
+        </select>
+      </div>
+    `},
 
     _itemPanelIiifFields: function(index, data) {
       return [
@@ -85,7 +86,6 @@ SirTrevor.Blocks.SolrDocumentsBase = (function(){
 
       $.ajax(manifestUrl).done(
         function(manifest) {
-          var Iiif = spotlightAdminIiif;
           var iiifManifest = new Iiif(manifestUrl, manifest);
 
           var thumbs = iiifManifest.imagesArray();

data/app/{assets/javascripts → javascript}/spotlight/admin/blocks/solr_documents_block.js

@@ -10,13 +10,13 @@ SirTrevor.Blocks.SolrDocuments = (function(){
     item_options: function() { return this.caption_options() + this.zpr_option(); },
 
     zpr_option: function() {
-      return [
-        '<div>',
-        '<input name="<%= zpr_key %>" type="hidden" value="false" />',
-        '<input name="<%= zpr_key %>" id="<%= formId(zpr_key) %>" data-key="<%= zpr_key %>" type="checkbox" value="true" />',
-        '<label for="<%= formId(zpr_key) %>"><%= i18n.t("blocks:solr_documents:zpr:title") %></label>',
-        '</div>'
-      ].join("\n");
+      return `
+        <div>
+        <input name="${this.zpr_key}" type="hidden" value="false" />
+        <input name="${this.zpr_key}" id="${this.formId(this.zpr_key)}" data-key="${this.zpr_key}" type="checkbox" value="true" />
+        <label for="${this.formId(this.zpr_key)}">${i18n.t("blocks:solr_documents:zpr:title")}</label>
+        </div>
+      `
     },
 
     zpr_key: 'zpr_link'

data/app/{assets/javascripts → javascript}/spotlight/admin/blocks/solr_documents_carousel_block.js

@@ -25,21 +25,20 @@ SirTrevor.Blocks.SolrDocumentsCarousel = (function(){
     },
 
     item_options: function() {
-      return [this.caption_options(),
-        '<div class="field-select auto-cycle-images" data-behavior="auto-cycle-images">',
-          '<input name="<%= auto_play_images_key %>" type="hidden" value="false" />',
-          '<input name="<%= auto_play_images_key %>" id="<%= formId(auto_play_images_key) %>" data-key="<%= auto_play_images_key %>" type="checkbox" value="true" checked/>',
-          '<label for="<%= formId(auto_play_images_key) %>"><%= i18n.t("blocks:solr_documents_carousel:interval:title") %></label>',
-          '<select name="<%= auto_play_images_interval_key %>" id="<%= formId(auto_play_images_interval_key) %>" data=key="<%= auto_play_images_interval_key %>">',
-            '<option value=""><%= i18n.t("blocks:solr_documents_carousel:interval:placeholder") %></option>',
-            '<%= addCarouselCycleOptions(carouselCycleTimesInSeconds) %>',
-          '</select>',
-        '</div>',
-        '<div class="field-select max-heights" data-behavior="max-heights">',
-          '<label for="<%= formId(max_height_key) %>"><%= i18n.t("blocks:solr_documents_carousel:height:title") %></label><br/>',
-          '<%= addCarouselMaxHeightOptions(carouselMaxHeights) %>',
-        '</div>',
-      ].join("\n");
+      return `${this.caption_options()}
+        <div class="field-select auto-cycle-images" data-behavior="auto-cycle-images">
+          <input name="${this.auto_play_images_key}" type="hidden" value="false" />
+          <input name="${this.auto_play_images_key}" id="${this.formId(this.auto_play_images_key)}" data-key="${this.auto_play_images_key}" type="checkbox" value="true" checked/>
+          <label for="${this.formId(this.auto_play_images_key)}">${i18n.t("blocks:solr_documents_carousel:interval:title")}</label>
+          <select name="${this.auto_play_images_interval_key}" id="${this.formId(this.auto_play_images_interval_key)}" data=key="${this.auto_play_images_interval_key}">
+            <option value="">${i18n.t("blocks:solr_documents_carousel:interval:placeholder")}</option>
+            ${this.addCarouselCycleOptions(this.carouselCycleTimesInSeconds)}
+          </select>
+        </div>
+        <div class="field-select max-heights" data-behavior="max-heights">
+          <label for="${this.formId(this.max_height_key)}">${i18n.t("blocks:solr_documents_carousel:height:title")}</label><br/>
+          ${this.addCarouselMaxHeightOptions(this.carouselMaxHeights)}
+        </div>`
     },
 
     addCarouselCycleOptions: function(options) {

data/app/javascript/spotlight/admin/blocks/uploaded_items_block.js

@@ -0,0 +1,147 @@
+import SpotlightNestable from 'spotlight_nestable'
+import Spotlight from 'spotlight'
+
+SirTrevor.Blocks.UploadedItems = (function(){
+  return Spotlight.Block.Resources.extend({
+    plustextable: true,
+    uploadable: true,
+    autocompleteable: false,
+
+    id_key: 'file',
+
+    type: 'uploaded_items',
+
+    icon_name: 'items',
+
+    blockGroup: 'undefined',
+
+    // Clear out the default Uploadable upload options
+    // since we will be using our own custom controls
+    upload_options: { html: '' },
+
+    fileInput: function() { return $(this.inner).find('input[type="file"]'); },
+
+    onBlockRender: function(){
+      SpotlightNestable.init($(this.inner).find('[data-behavior="nestable"]'));
+
+      this.fileInput().on('change', (function(ev) {
+        this.onDrop(ev.currentTarget);
+      }).bind(this));
+    },
+
+    onDrop: function(transferData){
+      var file = transferData.files[0],
+          urlAPI = (typeof URL !== "undefined") ? URL : (typeof webkitURL !== "undefined") ? webkitURL : null;
+
+      // Handle one upload at a time
+      if (/image/.test(file.type)) {
+        this.loading();
+
+        this.uploader(
+          file,
+          function(data) {
+            this.createItemPanel(data);
+            this.fileInput().val('');
+            this.ready();
+          },
+          function(error) {
+            this.addMessage(i18n.t('blocks:image:upload_error'));
+            this.ready();
+          }
+        );
+      }
+    },
+
+    title: function() { return i18n.t('blocks:uploaded_items:title'); },
+    description: function() { return i18n.t('blocks:uploaded_items:description'); },
+
+    globalIndex: 0,
+
+    _itemPanel: function(data) {
+      var index = "file_" + this.globalIndex++;
+      var checked = 'checked="checked"';
+
+      if (data.display == 'false') {
+        checked = '';
+      }
+
+      var dataId = data.id || data.uid;
+      var dataTitle = data.title || data.name;
+      var dataUrl = data.url || data.file.url;
+
+      var markup = `
+          <li class="field form-inline dd-item dd3-item" data-id="${index}" id="${this.formId("item_" + dataId)}">
+            <input type="hidden" name="item[${index}][id]" value="${dataId}" />
+            <input type="hidden" name="item[${index}][title]" value="${dataTitle}" />
+            <input type="hidden" name="item[${index}][url]" data-item-grid-thumbnail="true"  value="${dataUrl}"/>
+            <input data-property="weight" type="hidden" name="item[${index}][weight]" value="${data.weight}" />
+            <div class="card d-flex dd3-content">
+              <div class="dd-handle dd3-handle">${i18n.t("blocks:resources:panel:drag")}</div>
+              <div class="card-header d-flex item-grid">
+                <div class="checkbox">
+                  <input name="item[${index}][display]" type="hidden" value="false" />
+                  <input name="item[${index}][display]" id="${this.formId(this.display_checkbox + '_' + dataId)}" type="checkbox" ${checked} class="item-grid-checkbox" value="true"  />
+                  <label class="sr-only" for="${this.formId(this.display_checkbox + '_' + dataId)}">${i18n.t("blocks:resources:panel:display")}</label>
+                </div>
+                <div class="pic">
+                  <img class="img-thumbnail" src="${dataUrl}" />
+                </div>
+                <div class="main form-horizontal">
+                  <div class="title card-title">${dataTitle}</div>
+                  <div class="field row mr-3">
+                    <label for="${this.formId('caption_' + dataId)}" class="col-form-label col-md-3">${i18n.t("blocks:uploaded_items:caption")}</label>
+                    <input type="text" class="form-control col" id="${this.formId('caption_' + dataId)}" name="item[${index}][caption]" data-field="caption"/>
+                  </div>
+                  <div class="field row mr-3">
+                    <label for="${this.formId('link_' + dataId)}" class="col-form-label col-md-3">${i18n.t("blocks:uploaded_items:link")}</label>
+                    <input type="text" class="form-control col" id="${this.formId('link_' + dataId)}" name="item[${index}][link]" data-field="link"/>
+                  </div>
+                </div>
+                <div class="remove float-right">
+                  <a data-item-grid-panel-remove="true" href="#">${i18n.t("blocks:resources:panel:remove")}</a>
+                </div>
+              </div>
+            </li>`
+
+      const panel = $(markup);
+      panel.find('[data-field="caption"]').val(data.caption);
+      panel.find('[data-field="link"]').val(data.link);
+      var context = this;
+
+      $('.remove a', panel).on('click', function(e) {
+        e.preventDefault();
+        $(this).closest('.field').remove();
+        context.afterPanelDelete();
+      });
+
+      this.afterPanelRender(data, panel);
+
+      return panel;
+    },
+
+    editorHTML: function() {
+      return `<div class="form oembed-text-admin clearfix">
+        <div class="widget-header">
+          ${this.description()}
+        </div>
+        <div class="row">
+          <div class="form-group col-md-8">
+            <div class="panels dd nestable-item-grid" data-behavior="nestable" data-max-depth="1">
+              <ol class="dd-list">
+              </ol>
+            </div>,
+            <input type="file" id="uploaded_item_url" name="file[file_0][file_data]" />
+          </div>'
+          <div class="col-md-4">
+            <input name="${this.zpr_key}" type="hidden" value="false" />
+            <input name="${this.zpr_key}" id="${this.formId(this.zpr_key)}" data-key=${this.zpr_key}" type="checkbox" value="true" />
+            <label for="${this.formId(this.zpr_key)}">${ i18n.t("blocks:solr_documents:zpr:title")}</label>
+          </div>
+        </div>
+        ${this.text_area()}
+      </div>`
+    },
+
+    zpr_key: 'zpr_link'
+  });
+})();