spotlight-frontend 3.5.0-beta.1

package/app/assets/javascripts/spotlight/admin/add_new_button.js

@@ -0,0 +1,81 @@
+(function($){
+  $.fn.addNewPageButton = function( options ) {
+    $.each(this, function(){
+      addExpandBehaviorToButton($(this));
+    });
+    function addExpandBehaviorToButton(button){
+      var settings = $.extend({
+        speed: (button.data('speed') || 450),
+        animate_width: (button.data('animate_width') || 425)
+      }, options);
+      var target = $(button.data('field-target'));
+      var save   = $("input[data-behavior='save']", target);
+      var cancel = $("input[data-behavior='cancel']", target);
+      var input  = $("input[type='text']", target);
+      var original_width  = button.outerWidth();
+      var expanded = false;
+
+      // Animate button open when the mouse enters or
+      // the button is given focus (i.e. clicked/tabbed)
+      button.on("mouseenter focus", function(){
+        expandButton();
+      });
+
+      // Don't allow blank titles
+      save.on('click', function(){
+        if ( inputEmpty() ) {
+          return false;
+        }
+      });
+
+      // Empty input and collapse
+      // button on cancel click
+      cancel.on('click', function(e){
+        e.preventDefault();
+        input.val('');
+        collapseButton();
+      });
+
+      // Collapse the button on when
+      // an empty input loses focus
+      input.on("blur", function(){
+        if ( inputEmpty() ) {
+          collapseButton();
+        }
+      });
+      function expandButton(){
+        // If this has not yet been expanded, recalculate original_width to 
+        // handle things that may have been originally hidden.
+        if (!expanded) {
+          original_width  = button.outerWidth();
+        }
+        if(button.outerWidth() <= (original_width + 5)) {
+          expanded = true;
+          button.animate(
+            {width: settings.animate_width + 'px'}, settings.speed, function(){
+              target.show(0, function(){
+                input.focus();
+                // Set the button to auto width to make
+                // sure it has room for any inputs
+                button.width("auto");
+                // Explicitly set the width of the button
+                // so the close animation works properly
+                button.width(button.width());
+              });
+            }
+          )
+        }
+      }
+      function collapseButton(){
+        target.hide();
+        button.animate({width: original_width + 'px'}, settings.speed);
+      }
+      function inputEmpty(){
+        return $.trim(input.val()) == "";
+      }
+    }
+  }
+})( jQuery );
+Spotlight.onLoad(function() {
+  $("[data-expanded-add-button]").addNewPageButton();
+});

package/app/assets/javascripts/spotlight/admin/appearance.js

@@ -0,0 +1,24 @@
+Spotlight.onLoad(function(){
+  addRestoreDefaultBehavior();
+});
+
+function addRestoreDefaultBehavior(){
+  $("[data-behavior='restore-default']").each(function(){
+    var hidden = $("[data-default-value]", $(this));
+    var value = $($("[data-in-place-edit-target]", $(this)).data('in-place-edit-target'), $(this));
+    var button = $("[data-restore-default]", $(this));
+    hidden.on('blur', function(){
+      if( $(this).val() == $(this).data('default-value') ) {
+        button.addClass('d-none');
+      } else {
+        button.removeClass('d-none');
+      }
+    });
+    button.on('click', function(e){
+      e.preventDefault();
+      hidden.val(hidden.data('default-value'));
+      value.text(hidden.data('default-value'));
+      button.hide();
+    });
+  });
+}

package/app/assets/javascripts/spotlight/admin/attachments.js

@@ -0,0 +1,2 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.

package/app/assets/javascripts/spotlight/admin/blacklight_configuration.js

@@ -0,0 +1,63 @@
+Spotlight.onLoad(function() {
+  // Add Select/Deselect all button behavior
+  addCheckboxToggleBehavior();
+  addEnableToggleBehavior();
+});
+
+// Add Select/Deselect all button behavior
+function addCheckboxToggleBehavior() {
+  $("[data-behavior='metadata-select']").each(function(){
+    var button = $(this)
+    var parentCell = button.parents("th");
+    var table = parentCell.closest("table");
+    var columnRows = $("tr td:nth-child(" + (parentCell.index() + 1) + ")", table);
+    var checkboxes = $("input[type='checkbox']", columnRows);
+    swapSelectAllButtonText(button, columnRows);
+    // Add the check/uncheck behavior to the button
+    // and swap the button text if necessary
+    button.on('click', function(e){
+      e.preventDefault();
+      var allChecked = allCheckboxesChecked(columnRows);
+      columnRows.each(function(){
+        $("input[type='checkbox']", $(this)).prop('checked', !allChecked);
+        swapSelectAllButtonText(button, columnRows);
+      });
+    });
+    // Swap button text when a checkbox value changes
+    checkboxes.each(function(){
+      $(this).on('change', function(){
+        swapSelectAllButtonText(button, columnRows);
+      });
+    });
+  });
+  // Check number of checkboxes against the number of checked
+  // checkboxes to determine if all of them are checked or not
+  function allCheckboxesChecked(elements) {
+    return ($("input[type='checkbox']", elements).length == $("input[type='checkbox']:checked", elements).length)
+  }
+  // Swap the button text to "Deselect all"
+  // when all the checkboxes are checked and
+  // "Select all" when any are unchecked
+  function swapSelectAllButtonText(button, elements) {
+    if ( allCheckboxesChecked(elements) ) {
+      button.text(button.data('deselect-text'));
+    } else {
+      button.text(button.data('select-text'));
+    }
+  }
+}
+
+function addEnableToggleBehavior() {
+  $("[data-behavior='enable-feature']").each(function(){
+    var checkbox = $(this);
+    var target = $($(this).data('target'));
+
+    checkbox.on('change', function() {
+      if ($(this).is(':checked')) {
+        target.find('input:checkbox').not("[data-behavior='enable-feature']").prop('checked', true).attr('disabled', false);
+      } else {
+        target.find('input:checkbox').not("[data-behavior='enable-feature']").prop('checked', false).attr('disabled', true);
+      }
+    });
+  });
+}

package/app/assets/javascripts/spotlight/admin/block_mixins/autocompleteable.js

@@ -0,0 +1,72 @@
+(function ($){
+  SirTrevor.BlockMixins.Autocompleteable = {
+    mixinName: "Autocompleteable",
+    preload: true,
+
+    initializeAutocompleteable: function() {
+      this.on("onRender", this.addAutocompletetoSirTrevorForm);
+
+      if (_.isUndefined(this['autocomplete_url'])) {
+        this.autocomplete_url = function() { return $('form[data-autocomplete-url]').data('autocomplete-url').replace("%25QUERY", "%QUERY"); };
+      }
+
+      if (_.isUndefined(this['autocomplete_template'])) {
+        this.autocomplete_url = function() { return '<div class="autocomplete-item{{#if private}} blacklight-private{{/if}}">{{#if thumbnail}}<div class="document-thumbnail"><img class="img-thumbnail" src="{{thumbnail}}" /></div>{{/if}}<span class="autocomplete-title">{{title}}</span><br/><small>&nbsp;&nbsp;{{description}}</small></div>' };
+      }
+
+      if (_.isUndefined(this['transform_autocomplete_results'])) {
+        this.transform_autocomplete_results = _.identity;
+      }
+
+      if (_.isUndefined(this['autocomplete_control'])) {
+        this.autocomplete_control = function() { return '<input type="text" class="st-input-string form-control item-input-field" data-twitter-typeahead="true" placeholder="<%= i18n.t("blocks:autocompleteable:placeholder")%>"/>' };
+      }
+
+      if (_.isUndefined(this['bloodhoundOptions'])) {
+        this.bloodhoundOptions = function() {
+          return {
+            remote: {
+              url: this.autocomplete_url(),
+              filter: this.transform_autocomplete_results
+            }
+          };
+        };
+      }
+    },
+
+    addAutocompletetoSirTrevorForm: function() {
+      $('[data-twitter-typeahead]', this.inner).spotlightSearchTypeAhead({bloodhound: this.bloodhound(), template: this.autocomplete_template()}).on('typeahead:selected typeahead:autocompleted', this.autocompletedHandler()).on( 'focus', function() {
+        if($(this).val() === '') {
+          $(this).data().ttTypeahead.input.trigger('queryChanged', '');
+        }
+      });
+    },
+
+    autocompletedHandler: function(e, data) {
+      var context = this;
+
+      return function(e, data) {
+        $(this).typeahead("val", "");
+        $(this).val("");
+
+        context.createItemPanel($.extend(data, {display: "true"}));
+      }
+    },
+
+    bloodhound: function() {
+      var block = this;
+      var results = new Bloodhound(_.extend({
+        datumTokenizer: function(d) {
+          return Bloodhound.tokenizers.whitespace(d.title);
+        },
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+        limit: 100,
+      }, block.bloodhoundOptions()));
+      results.initialize();
+      return results;
+    },
+  },
+
+
+  SirTrevor.Block.prototype.availableMixins.push("autocompleteable");
+})(jQuery);

package/app/assets/javascripts/spotlight/admin/block_mixins/formable.js

@@ -0,0 +1,78 @@
+(function ($){
+  SirTrevor.BlockMixins.Formable = {
+    mixinName: "Formable",
+    preload: true,
+
+    initializeFormable: function() {
+
+      if (_.isUndefined(this['afterLoadData'])) {
+        this['afterLoadData'] = function(data) { };
+      }
+    },
+
+    formId: function(id) {
+      return this.blockID + "_" + id;
+    },
+
+    _serializeData: function() {
+
+      var data = $(":input,textarea,select", this.inner).not(':input:radio').serializeJSON();
+
+      $(':input:radio:checked', this.inner).each(function(index, input) {
+        var key = $(input).data('key') || input.getAttribute('name');
+
+        if (!key.match("\\[")) {
+          data[key] = $(input).val();
+        }
+      });
+
+      /* Simple to start. Add conditions later */
+      if (this.hasTextBlock()) {
+        data.text = this.getTextBlockHTML();
+        data.format = 'html';
+        if (data.text && data.text.length > 0 && this.options.convertToMarkdown) {
+          data.text = stToMarkdown(data.text, this.type);
+          data.format = 'markdown';
+        }
+      }
+
+      return data;
+    },
+
+    loadData: function(data){
+      if (this.hasTextBlock()) {
+        if (data.text && data.text.length > 0 && this.options.convertFromMarkdown && data.format !== "html") {
+          this.setTextBlockHTML(SirTrevor.toHTML(data.text, this.type));
+        } else {
+          this.setTextBlockHTML(data.text);
+        }
+      }
+      this.loadFormDataByKey(data);
+      this.afterLoadData(data);
+    },
+
+    loadFormDataByKey: function(data) {
+      $(':input', this.inner).not('button,:input[type=hidden]').each(function(index, input) {
+        var key = $(input).data('key') || input.getAttribute('name');
+
+        if (key) {
+
+          if (key.match("\\[\\]$")) {
+            key = key.replace("[]", "");
+          }
+
+          // by wrapping it in an array, this'll "just work" for radio and checkbox fields too
+          var input_data = data[key];
+
+          if (!(input_data instanceof Array)) {
+            input_data = [input_data];
+          }
+          $(this).val(input_data);
+        }
+      });
+    },
+  },
+
+
+  SirTrevor.Block.prototype.availableMixins.push("formable");
+})(jQuery);

package/app/assets/javascripts/spotlight/admin/block_mixins/plustextable.js

@@ -0,0 +1,57 @@
+(function ($){
+  SirTrevor.BlockMixins.Plustextable = {
+    mixinName: "Textable",
+    preload: true,
+
+    initializeTextable: function() {
+      if (_.isUndefined(this['formId'])) {
+        this.withMixin(SirTrevor.BlockMixins.Formable);
+      }
+      
+      if (_.isUndefined(this['show_heading'])) {
+        this.show_heading = true;
+      }
+    },
+    
+    align_key:"text-align",
+    text_key:"item-text",
+    heading_key: "title",
+    
+    text_area: function() { 
+      return _.template([
+    '<div class="row">',
+      '<div class="col-md-8">',
+        '<div class="form-group">',
+          this.heading(),
+          '<div class="field">',
+            '<label for="<%= formId(text_key) %>" class="col-form-label"><%= i18n.t("blocks:textable:text") %></label>',
+            '<div id="<%= formId(text_key) %>" class="st-text-block form-control" contenteditable="true"></div>',
+          '</div>',
+        '</div>',
+      '</div>',
+      '<div class="col-md-4">',
+        '<div class="text-align">',
+          '<p><%= i18n.t("blocks:textable:align:title") %></p>',
+          '<input data-key="<%= align_key %>" type="radio" name="<%= formId(align_key) %>" id="<%= formId(align_key + "-left") %>" value="left" checked="true">',
+          '<label for="<%= formId(align_key + "-left") %>"><%= i18n.t("blocks:textable:align:left") %></label>',
+          '<input data-key="<%= align_key %>" type="radio" name="<%= formId(align_key) %>" id="<%= formId(align_key + "-right") %>" value="right">',
+          '<label for="<%= formId(align_key + "-right") %>"><%= i18n.t("blocks:textable:align:right") %></label>',
+        '</div>',
+      '</div>',
+    '</div>'].join("\n"))(this); },
+    
+    heading: function() {
+      if(this.show_heading) {
+        return ['<div class="field">',
+          '<label for="<%= formId(heading_key) %>" class="col-form-label"><%= i18n.t("blocks:textable:heading") %></label>',
+          '<input type="text" class="form-control" id="<%= formId(heading_key) %>" name="<%= heading_key %>" />',
+        '</div>'].join("\n");
+      } else {
+        return "";
+      }
+    },
+  };
+  
+
+  SirTrevor.Block.prototype.availableMixins.push("plustextable");
+})(jQuery);

package/app/assets/javascripts/spotlight/admin/blocks/block.js

@@ -0,0 +1,23 @@
+(function ($){
+  Spotlight.Block = SirTrevor.Block.extend({
+    scribeOptions: {
+      allowBlockElements: true,
+      tags: { p: true }
+    },
+    formable: true,
+    editorHTML: function() {
+      return _.template(this.template)(this);
+    },
+    beforeBlockRender: function() {
+      this.availableMixins.forEach(function(mixin) {
+        if (this[mixin] && SirTrevor.BlockMixins[this.capitalize(mixin)].preload) {
+          this.withMixin(SirTrevor.BlockMixins[this.capitalize(mixin)]);
+        }
+      }, this);
+    },
+    $instance: function() { return $('#' + this.instanceID); },
+    capitalize: function(string) {
+      return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
+    }
+  })
+})(jQuery);

package/app/assets/javascripts/spotlight/admin/blocks/browse_block.js

@@ -0,0 +1,87 @@
+//= require spotlight/admin/blocks/resources_block
+
+SirTrevor.Blocks.Browse = (function(){
+
+  return Spotlight.Block.Resources.extend({
+    type: "browse",
+
+    icon_name: "browse",
+
+    autocomplete_url: function() {
+      return $(this.inner).closest('form[data-autocomplete-exhibit-searches-path]').data('autocomplete-exhibit-searches-path').replace("%25QUERY", "%QUERY");
+    },
+    autocomplete_template: function() { return '<div class="autocomplete-item{{#unless published}} blacklight-private{{/unless}}">{{#if thumbnail_image_url}}<div class="document-thumbnail"><img class="img-thumbnail" src="{{thumbnail_image_url}}" /></div>{{/if}}<span class="autocomplete-title">{{full_title}}</span><br/><small>&nbsp;&nbsp;{{description}}</small></div>' },
+
+    bloodhoundOptions: function() {
+      return {
+        prefetch: {
+          url: this.autocomplete_url(),
+          ttl: 0
+        }
+      };
+    },
+
+    _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 + '][full_title]" value="' + (data.full_title || 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="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.full_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>',
+              '</div>',
+            '</li>'
+      ].join("\n");
+
+      var panel = $(_.template(markup)(this));
+      var context = this;
+
+      $('.remove a', 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:item_counts") %>',
+      '</label>'
+    ].join("\n") },
+  });
+
+})();

package/app/assets/javascripts/spotlight/admin/blocks/browse_group_categories_block.js

@@ -0,0 +1,88 @@
+/*
+  Sir Trevor BrowseGroupCategories
+*/
+
+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>'
+      ].join("\n");
+
+      var panel = $(_.template(markup)(this));
+      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>'
+    ].join("\n") },
+  });
+})();

package/app/assets/javascripts/spotlight/admin/blocks/iframe_block.js

@@ -0,0 +1,34 @@
+/*
+  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.
+*/
+
+SirTrevor.Blocks.Iframe = (function(){
+
+  return SirTrevor.Block.extend({
+    type: "Iframe",
+    formable: true,
+    
+    title: function() { return i18n.t('blocks:iframe:title'); },
+    description: function() { return i18n.t('blocks:iframe:description'); },
+
+    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"),
+  });
+})();

package/app/assets/javascripts/spotlight/admin/blocks/link_to_search_block.js

@@ -0,0 +1,16 @@
+//= require spotlight/admin/blocks/browse_block
+
+SirTrevor.Blocks.LinkToSearch = (function(){
+
+  return SirTrevor.Blocks.Browse.extend({
+
+    type: "link_to_search",
+
+    icon_name: 'search_results',
+
+    searches_key: "slug",
+    view_key: "view",
+    plustextable: false,
+
+  });
+})();