blacklight-spotlight 0.3.1 → 0.4.1

data/app/assets/javascripts/spotlight/block_mixins/textable.js

@@ -0,0 +1,57 @@
+(function ($){
+  SirTrevor.BlockMixins.Textable = {
+    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="control-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="control-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("textable");
+})(jQuery);

data/app/assets/javascripts/spotlight/block_mixins/titleable.js

@@ -0,0 +1,12 @@
+(function ($){
+  SirTrevor.BlockMixins.Titleable = {
+    mixinName: "Titleable",
+
+    initializeTitleable: function() {
+      this.$inner.append("<div class='st-title'>" + this.title() + "</div>");
+    },
+  }
+  
+  SirTrevor.Block.prototype.availableMixins.push("titleable");
+  SirTrevor.Block.prototype.titleable = true;
+})(jQuery);

data/app/assets/javascripts/spotlight/blocks/block.js

@@ -1,129 +1,16 @@
 (function ($){
   Spotlight.Block = SirTrevor.Block.extend({
+    formable: true,
     editorHTML: function() {
       return _.template(this.template)(this);
     },
-    formId: function(id) {
-      return this.blockID + "_" + id;
-    },
-    onBlockRender: function() {
-      addAutocompletetoSirTrevorForm();
-    },
-    _serializeData: function() {
-      var data = {};
-      
-      /* Simple to start. Add conditions later */
-      if (this.hasTextBlock()) {
-        data.text = this.getTextBlockHTML();
-        if (data.text.length > 0 && this.options.convertToMarkdown) {
-          data.text = stToMarkdown(data.text, this.type);
-        }
-      }
-
-      // Add any inputs to the data attr
-      var inputs = this.$(':input').
-          not('.st-paste-block').
-          not('button').
-          not(':input:checkbox,:input:radio').
-          add(this.$(':input:checkbox:checked')).
-          add(this.$(':input:radio:checked')).
-          add(this.$('select'))
-
-      // unchecked checkboxes
-      this.$(':input:checkbox,:input:radio').not(':input:checkbox:checked').not(':input:radio:checked').each(function(index,input) {
-        var key = $(input).data('key') || input.getAttribute('name');
-        if (key) {
-          data[key] = null;
-        }
-      });
-
-      if(inputs.length > 0) {
-        inputs.each(function(index,input){
-          var key = $(input).data('key') || input.getAttribute('name');
-          if (key) {
-            if($(input).is(':checkbox') && $(input).val() == "true") {
-              data[key] = true;
-            } else {
-              data[key] = $(input).val();
-            }
-          }
-        });
-      }
-
-      return data;
-    },
-
-    loadFormDataByKey: function(data) {
-      this.$(':input').not('button').each(function(index, input) {
-        var key = $(input).data('key') || input.getAttribute('name');
-        // by wrapping it in an array, it'll "just work" for radio and checkbox fields too
-        $(this).val([data[key]]);
-      });
-    },
-
-    loadData: function(data){
-      if (this.hasTextBlock()) {
-        this.getTextBlock().html(SirTrevor.toHTML(data.text, this.type));
-      }
-      this.loadFormDataByKey(data);
-      this.afterLoadData(data);
-    },
-
-    afterLoadData: function(data) { },
-
-    caption_field_template: ['<option value="<%= field %>"><%= label %></option>'].join("\n"),
-
-    loadCaptionField: function(){
-      var block = this;
-      var metadata_url = $('form[data-metadata-url]').data('metadata-url');
-      var primary_caption_field = $('#' + this.formId(this.primary_field_key));
-      var secondary_caption_field = $('#' + this.formId(this.secondary_field_key));
-      var primary_caption_selected_value = primary_caption_field.data("select-after-ajax");
-      var secondary_caption_selected_value = secondary_caption_field.data("select-after-ajax");
-      $.ajax({
-        accepts: "json",
-        url: metadata_url
-      }).success(function(data){
-        // Only checking the primary caption field
-        // Could check both but I'm not sure it's necessary
-        if($("option", primary_caption_field).length == 2){
-          var options = "";
-          $.each(data, function(i, field){
-            options += _.template(block.caption_field_template)(field);
-          });
-
-          primary_caption_field.append(options);
-          secondary_caption_field.append(options);
-
-          primary_caption_field.val([primary_caption_selected_value]);
-          secondary_caption_field.val([secondary_caption_selected_value]);
-          // re-serialize the form so the form observer
-          // knows about the new drop down options.
-          serializeFormStatus($('form[data-metadata-url]'));
+    beforeBlockRender: function() {
+      this.availableMixins.forEach(function(mixin) {
+        if (this[mixin] && SirTrevor.BlockMixins[_.capitalize(mixin)].preload) {
+          this.withMixin(SirTrevor.BlockMixins[_.capitalize(mixin)]);
         }
-      });
+      }, this);
     },
-
-    addCaptionSelectFocus: function(){
-      $("[data-behavior='item-caption-admin']").each(function(){
-        var checkbox = $('input[type="checkbox"]', $(this));
-        var select = $('select', $(this));
-        checkbox.on('change', function(){
-          if ( $(this).is(':checked') ) {
-            select.focus();
-          }
-        });
-        select.on('change', function(){
-          checkbox.prop('checked', !($(this).val() == ""))
-        });
-      });
-    }
-
-  });
-
-
-  SirTrevor.BlockControl.prototype.render = function() {
-    this.$el.html('<span class="st-icon st-icon-'+ _.result(this.block_type, "type") + '">'+ _.result(this.block_type, 'icon_name') +'</span>' + _.result(this.block_type, 'title'));
-    return this;
-  };
+    $instance: function() { return $('#' + this.instanceID); }
+  })
 })(jQuery);

data/app/assets/javascripts/spotlight/blocks/browse_block.js

@@ -0,0 +1,21 @@
+//= require spotlight/blocks/resources_block
+
+SirTrevor.Blocks.Browse = (function(){
+
+  return Spotlight.Block.Resources.extend({
+    type: "browse",
+
+    icon_name: "pages",
+
+    autocomplete_url: function() { return this.$el.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 thumbnail"><img src="{{thumbnail_image_url}}" /></div>{{/if}}<span class="autocomplete-title">{{title}}</span><br/><small>&nbsp;&nbsp;{{description}}</small></div>' },
+
+    item_options: function() { return [
+      '<label>',
+        '<input type="checkbox" name="display-item-counts" value="true" checked />',
+        '<%= i18n.t("blocks:browse:item_counts") %>',
+      '</label>'
+    ].join("\n") },
+  });
+
+})();

data/app/assets/javascripts/spotlight/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"),
+  });
+})();

data/app/assets/javascripts/spotlight/blocks/oembed_block.js

@@ -10,46 +10,30 @@
 SirTrevor.Blocks.Oembed =  (function(){
 
   return Spotlight.Block.extend({
+    textable: true,
 
     id_key:"url",
-    text_key:"item-text",
-    align_key:"text-align",
 
     type: "oembed",
-
-    title: function() { return "Embed + Text"; },
+    
+    title: function() { return i18n.t('blocks:oembed:title'); },
+    description: function() { return i18n.t('blocks:oembed:description'); },
 
     icon_name: "oembed",
+    show_heading: false,
 
     template: [
-    '<div class="form-horizontal oembed-text-admin clearfix">',
+    '<div class="form oembed-text-admin clearfix">',
       '<div class="widget-header">',
-        'This widget embeds a web resource and a text block to the left or right of it.',
-      '</div>',
-      '<div class="col-sm-9">',
-        '<div class="form-group">',
-          '<label for="<%= formId(id_key) %>" class="col-sm-2 control-label">URL</label>',
-          '<div class="col-sm-6 field">',
-            '<input name="<%= id_key %>" class="st-input-string form-control <%= type %>" type="text" id="<%= formId(id_key) %>" />',
-          '</div>',
-        '</div>',
-        '<div class="form-group">',
-          '<label for="<%= formId(text_key) %>" class="col-sm-2 control-label">Text</label>',
-          '<div class="col-sm-6 field">',
-          '<div id="<%= formId(text_key) %>" class="st-text-block" contenteditable="true"></div>',
-          '</div>',
-        '</div>',
+        '<%= description() %>',
       '</div>',
-      '<div class="col-sm-3">',
-        '<div class="text-align">',
-          '<p>Display text on:</p>',
-          '<input data-key="<%= align_key %>" type="radio" name="<%= formId(align_key) %>" id="<%= formId(align_key + "-right") %>" value="right" checked="true">',
-          '<label for="<%= formId(align_key + "-right") %>">Left</label>',
-          '<input data-key="<%= align_key %>" type="radio" name="<%= formId(align_key) %>" id="<%= formId(align_key + "-left") %>" value="left">',
-          '<label for="<%= formId(align_key + "-left") %>">Right</label>',
+      '<div class="row">',
+        '<div class="form-group col-md-8">',
+          '<label for="<%= formId(id_key) %>"><%= i18n.t("blocks:oembed:url") %></label>',
+          '<input name="<%= id_key %>" class="form-control col-md-6" type="text" id="<%= formId(id_key) %>" />',
         '</div>',
       '</div>',
-      '<div class="clearFix"></div>',
+      '<%= text_area() %>',
     '</div>'
   ].join("\n")
   });

data/app/assets/javascripts/spotlight/blocks/pages_block.js

@@ -0,0 +1,14 @@
+//= require spotlight/blocks/resources_block
+
+SirTrevor.Blocks.FeaturedPages = (function(){
+
+  return Spotlight.Block.Resources.extend({
+    type: "featured_pages",
+
+    icon_name: "pages",
+
+    autocomplete_url: function() { return this.$el.closest('form[data-autocomplete-exhibit-feature-pages-path]').data('autocomplete-exhibit-feature-pages-path').replace("%25QUERY", "%QUERY"); },
+    autocomplete_template: function() { return '<div class="autocomplete-item{{#unless published}} blacklight-private{{/unless}}">{{log "Look at me"}}{{log thumbnail_image_url}}{{#if thumbnail_image_url}}<div class="document-thumbnail thumbnail"><img src="{{thumbnail_image_url}}" /></div>{{/if}}<span class="autocomplete-title">{{title}}</span><br/><small>&nbsp;&nbsp;{{description}}</small></div>' },
+  });
+
+})();

data/app/assets/javascripts/spotlight/blocks/resources_block.js

@@ -0,0 +1,136 @@
+Spotlight.Block.Resources = (function(){
+
+  return Spotlight.Block.extend({
+    type: "resources",
+    formable: true,
+    autocompleteable: true,
+    show_heading: true,
+    
+    title: function() { return i18n.t("blocks:" + this.type + ":title"); },
+    description: function() { return i18n.t("blocks:" + this.type + ":description"); },
+
+    icon_name: "resources",
+    blockGroup: function() { return i18n.t("blocks:group:items") },
+    
+    primary_field_key: "primary-caption-field",
+    show_primary_field_key: "show-primary-caption",
+    secondary_field_key: "secondary-caption-field",
+    show_secondary_field_key: "show-secondary-caption",
+
+    display_checkbox: "display-checkbox",
+
+    _itemPanel: function(data) {
+      var index = data.id || this.$('.field').length;
+      var checked;
+      if (data.display == "true") {
+        checked = "checked='checked'"
+      } else {
+        checked = "";
+      }
+      var markup = [
+          '<li class="field form-inline dd-item dd3-item" data-id="' + index + '" id="' + this.formId("item_" + data.id) + '">',
+            '<input type="hidden" name="item[' + index + '][id]" value="' + (data.slug || data.id) + '" />',
+            '<input type="hidden" name="item[' + index + '][title]" value="' + data.title + '" />',
+            '<input type="hidden" name="item[' + index + '][full_image_url]" data-item-grid-full-image="true"  value="' + (data.full_image_url || data.thumbnail_image_url || data.thumbnail) + '"/>',
+            '<input type="hidden" name="item[' + index + '][thumbnail_image_url]" data-item-grid-thumbnail="true"  value="' + (data.thumbnail_image_url || data.thumbnail) + '"/>',
+            '<input data-property="weight" type="hidden" name="item[' + index + '][weight]" value="' + data.weight + '" />',
+            '<div class="dd-handle dd3-handle"><%= i18n.t("blocks:resources:panel:drag") %></div>',
+              '<div class="dd3-content panel panel-default">',
+                '<div class="panel-heading 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 + '_' + 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 thumbnail">',
+                    '<img src="' + (data.thumbnail_image_url || data.thumbnail) + '" />',
+                  '</div>',
+                  '<div class="main">',
+                    '<div class="title panel-title">' + data.title + '</div>',
+                    '<div>' + (data.slug || data.id) + '</div>',
+                    '<div data-panel-image-pagination="true"></div>',
+                  '</div>',
+                  '<div class="remove pull-right">',
+                    '<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;
+
+      $('.remove a', panel).on('click', function(e) { 
+        e.preventDefault(); 
+        $(this).closest('.field').remove();
+        context.afterPanelDelete();
+        
+      });
+
+      this.afterPanelRender(data, panel);
+
+      return panel;
+    },
+
+    afterPanelRender: function(data, panel) {
+
+    },
+    
+    afterPanelDelete: function() {
+
+    },
+
+    createItemPanel: function(data) { 
+      var panel = this._itemPanel(data);
+      $(panel).appendTo(this.$el.find('.panels > ol'));
+    },
+
+    item_options: function() { return ""; },
+
+    content: function() {
+      var templates = [this.items_selector()];
+      if (this.textable) {
+        templates.push(this.text_area());
+      }
+      return _.template(templates.join("<hr />\n"))(this);
+    },
+
+    items_selector: function() { return [
+    '<div class="row">',
+      '<div class="col-md-8">',
+        '<div class="form-group">',
+        '<div class="panels dd nestable-item-grid" data-behavior="nestable" data-max-depth="1"><ol class="dd-list"></ol></div>',
+          this.autocomplete_control(),
+        '</div>',
+      '</div>',
+      '<div class="col-md-4">',
+        this.item_options(),
+      '</div>',
+    '</div>'].join("\n")
+    },
+
+    template: [
+      '<div class="form resources-admin clearfix">',
+        '<div class="widget-header">',
+          '<%= description() %>',
+        '</div>',
+        '<%= content() %>',
+      '</div>'
+    ].join("\n"),
+
+    onBlockRender: function() {
+      SpotlightNestable.init(this.$el.find('[data-behavior="nestable"]'));
+
+      this.$el.find('[data-input-select-target]').selectRelatedInput();
+    },
+    
+    afterLoadData: function(data) {
+      var context = this;
+      $.each(Object.keys(data.item || {}).map(function(k) { return data.item[k]}).sort(function(a,b) { return a.weight - b.weight; }), function(index, item) {
+        context.createItemPanel(item);
+      });
+    },
+  });
+
+})();