Creating a New Page Widget - UVicLibrary/Spotlight2_custom GitHub Wiki

As an example, we will create an "audio with image" page widget that pairs an audio file with a descriptive or related image. Both the audio and image files must be uploaded or imported items in the relevant exhibit.

Replace [block_name] with the name of the block in snake case.

Replace [BlockName] with the name of the block in pascal case.

See this article on different cases. The name of the block is arbitrary (meaning you can name it whatever you want), but it must be consistent across files.

REMEMBER TO CLEAN AND RECOMPILE ASSETS or else changes in JS and CSS won't show.

For the "Audio With Image" example, [block_name] would be audio_with_image and [Block_Name] would be AudioWithImage.

Create a new file, app/assets/javascript/sir_trevor_blocks/[block_name].js and add the following code:

SirTrevor.Blocks.[BlockName] = (function(){

}

Because our example block embeds Solr Documents, we will extend the SolrDocumentsEmbed block so that we can make use of its functions. Inside the brackets from the previous step, i.e. SirTrevor.Blocks.[BlockName] = (function(){}, we add this:

    return SirTrevor.Blocks.SolrDocumentsEmbed.extend({

        toolbarEnabled: true,
        type: "[block_name]",

        icon_name: "[block_name]",

Here, type and icon_name refer to the locales.js and sir-trevor-icons.svg files. We will edit those later.

To

Here's a list of pre-built methods that you can override in your block:

• content() - returns a list of joined sub-elements from other methods below
• items_selector() - returns the autocomplete form and item panel(s) used in the item embed block
• autocomplete_control() - returns the actual autocomplete form. This is called inside items_selector() as this.autocomplete_control().
• item_options() - returns additional options for each selected item. This is called inside items_selector() as this.item_options().

To add an option for text, include this inside content: function(){}:

            var templates = [
                this.items_selector()
            ];
            if (this.plustextable) {
                templates.push('<hr/>' + this.text_area());
            }
            return _.template(templates.join("\n"))(this); //<hr/>

• sir_trevor_blocks/[block_name].js - the interface for adding/selecting your block in the "Edit page" view, and the form
• spotlight/admin/locales.js - the name and icon for your block.

• spotlight/blocks/sir-trevor-icons.svg - add a custom icon to your block.

• initializers/spotlight_initializer.rb - Configure the page widget in Spotlight.

• sir_trevor_rails/blocks/[block_name].rb - Add methods and variables used when rendering the resulting page.

• spotlight/sir_trevor_rails/blocks/[block_name].html.erb - The view for the resulting page.