biola_wcms_components 0.0.1 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3564d479c782c49da3714d46d516fbc535e40cfa
-  data.tar.gz: 19904bda0bb747bfd063e87683cdb12391ec7de3
+  metadata.gz: f4615d1bb2bee67a6f0a7457288fc2df6796045b
+  data.tar.gz: 4d1f46f67c613b239f3a940d062f494c954ec969
 SHA512:
-  metadata.gz: bea91bf31935f7321f8a5e2aadfa5e7eceef27781eb5abbc70bbb346e5dffafc03adc46a80c2d39932e93126222e495f1a70e3e54d7003e25d2068ae65c6c287
-  data.tar.gz: 3157ae4e247df688200788bfac820cec812a1199c5fbb43217c24e82893902b24bac5e94dba651d34369331fd93b02008e7bb77778b8fb8257b8594477203f17
+  metadata.gz: abc4d90dfbd41be28d68801f5d7cbcd446ac7380e70960bbb3696b0c9a381a794d0c55ed23c1a7ffd1232bdda40f070315deb83fb1ed172ff73ce77c67bdd5d4
+  data.tar.gz: 259e675f5fdbddb58a1ba88d4c474c0d4b00e0a98ef7e2f53f466df82248843af985c0b643a882c334afe4613f64237c11ad620b024567c430ef6da5d2efad21

data/app/assets/javascripts/biola-wcms-components.js.coffee

@@ -7,6 +7,8 @@
 #= require handlebars
 #= require typeahead
 #
+#= require bootstrap-tagsinput
+#
 #= require redactor
 #= require redactor_fullscreen
 #

data/app/assets/javascripts/components/forms/person_lookup.js.coffee

@@ -3,7 +3,7 @@ $(document).ready ->
     people_search_url = $('.person-lookup').first().data('lookup-url')
 
     peopleSearch = new Bloodhound(
-      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value')
+      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('id')
       queryTokenizer: Bloodhound.tokenizers.whitespace
       # The prefetch url returns a list of all the faculty
       prefetch: people_search_url

data/app/assets/javascripts/components/forms/tag_input.js.coffee

@@ -0,0 +1,42 @@
+initializeTaginput = (selector) ->
+  $(selector).each ->
+    tagsinput = $(this)
+    tagsinputOptions = {}
+
+
+    # If typeahead key is set, initialize typeahead. Otherwise just initialize a normal tagsinput
+    #   available parameters:
+    #     :url  => url to the remote json data
+    #     :key  => the key to use for each element in the json array
+    #     :query_param  => The parameter key we should use to append the search to the url
+    #                      Defaults to 'q'
+    #
+    if options = tagsinput.data('typeahead')
+      options.query_param ||= 'q'
+
+      typeaheadEngine = new Bloodhound
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace(options.key)
+        queryTokenizer: Bloodhound.tokenizers.whitespace
+        remote: "#{options.url}?#{options.query_param}=%QUERY"
+      typeaheadEngine.initialize()
+
+      tagsinputOptions.typeaheadjs =
+        displayKey: options.key
+        valueKey: options.key
+        highlight: true
+        source: typeaheadEngine.ttAdapter()
+
+    # Initialize tagsinput with options
+    tagsinput.tagsinput tagsinputOptions
+
+
+
+$(document).ready ->
+
+  # Initialize tagsinput on page load
+  initializeTaginput("input[data-role=tagsinput]")
+
+  $(".modal").on "shown.bs.modal", (e) ->
+    # Initialize tagsinputs underneath modal.
+    initializeTaginput("input[data-role=tagsinput]")
+

data/app/assets/stylesheets/{biola-wcms-components.scss → biola-wcms-components.css.scss}

@@ -1,5 +1,7 @@
 // External files
 @import "../../../vendor/assets/stylesheets/redactor";
+@import "../../../vendor/assets/stylesheets/bootstrap-tagsinput";
+@import "../../../vendor/assets/stylesheets/typeahead";
 
 // Mixins and settings
 @import "./settings";

data/app/assets/stylesheets/components/forms/_person_lookup.scss

@@ -1,48 +1,5 @@
 .person-lookup {
-  .typeahead, .tt-query, .tt-hint {
-    width: 396px;
-    height: 34px;
-    padding: 8px 12px;
-    font-size: 15px;
-    line-height: 15px;
-    border: 1px solid #ccc;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-    outline: none;
-  }
-
-  .tt-query {
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  }
-
-  .tt-hint {
-    color: #999
-  }
-
-  .tt-dropdown-menu {
-    text-align: left;
-    width: 422px;
-    margin-top: 12px;
-    padding: 8px 0;
-    background-color: #fff;
-    border: 1px solid #ccc;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-    box-shadow: 0 5px 10px rgba(0,0,0,.2);
-  }
-
   .tt-suggestion, .tt-empty-message {
-    padding: 3px 20px;
-    font-size: 16px;
-    line-height: 24px;
-
     .affiliations {
       color: #999;
       font-size: 12px;
@@ -61,10 +18,6 @@
   }
 
   .tt-suggestion.tt-cursor {
-    cursor: pointer;
-    color: #fff;
-    background-color: #0097cf;
-
     .affiliations {
       color: #fff;
     }

data/app/assets/stylesheets/components/forms/_tag_input.scss

@@ -0,0 +1,5 @@
+.bootstrap-tagsinput {
+
+  // Hide the hint with tagsinput, it doesn't show up correctly.
+  .tt-hint { display: none; }
+}

data/app/controllers/wcms_application_controller.rb

@@ -0,0 +1,37 @@
+# ApplicationController should inherit from this controller.
+class WcmsApplicationController < ActionController::Base
+  include Pundit
+
+  protect_from_forgery with: :exception
+
+  before_action :authenticate!
+  after_action :verify_authorized
+  after_action :verify_policy_scoped, only: :index
+  rescue_from Pundit::NotAuthorizedError, with: :user_not_authorized
+
+  layout -> { (@layout || :application).to_s }
+
+  helper_method :current_user
+  def current_user
+    authentication.user
+  end
+
+  protected
+
+  def authenticate!
+    authentication.perform or render_error_page(401)
+  end
+
+  def authentication
+    @authentication ||= CasAuthentication.new(session)
+  end
+
+  def render_error_page(status)
+    render file: "#{Rails.root}/public/#{status}", formats: [:html], status: status, layout: false
+  end
+
+  def user_not_authorized
+    render_error_page(403)
+  end
+
+end

data/app/controllers/wcms_components/embedded_images_controller.rb

@@ -0,0 +1,20 @@
+class WcmsComponents::EmbeddedImagesController < ApplicationController
+
+  skip_after_action :verify_authorized
+  skip_after_action :verify_policy_scoped
+
+  def create
+    # Anyone who is logged in should be able to access this.
+    @embedded_image = EmbeddedImage.new
+
+    file = params[:file]
+    @embedded_image.upload = file
+
+    if @embedded_image.save
+      render json: { filelink: @embedded_image.upload.url }
+    else
+      render json: { error: true, messages: @embedded_image.errors.full_messages}
+    end
+  end
+
+end

data/app/controllers/wcms_components/people_controller.rb

@@ -0,0 +1,30 @@
+class WcmsComponents::PeopleController < ApplicationController
+
+  skip_after_action :verify_authorized
+  skip_after_action :verify_policy_scoped
+
+  def index
+    # For security reasons, this should only be available to employees.
+    if current_user.admin? || current_user.has_role?(:employee)
+      if params[:q].present?
+        @people = permitted_people.custom_search(params[:q]).asc(:first_name, :last_name).limit(20)
+      else
+        # If no query string is present, return all faculty for pre-cached data.
+        @people = permitted_people.where(affiliations: 'faculty').custom_search(params[:q]).asc(:first_name, :last_name)
+      end
+
+      render json: @people.map{|p| {id: p.id.to_s, name: p.name, email: p.biola_email, affiliations: p.affiliations.to_a.join(', '), image: p.profile_photo_url} }.to_json
+    else
+      user_not_authorized
+    end
+  end
+
+
+  private
+
+  def permitted_people
+    # Return all people who are either employees or not private.
+    Person.where({'$or' => [{affiliations: ['employee'] }, {privacy: { '$ne' => true }}] })
+  end
+
+end

data/app/views/wcms_components/forms/_json_editor.html.slim

@@ -3,7 +3,7 @@ ruby:
   attribute ||= nil
   html_class ||= 'form-control json_editor'
   value ||= nil
-  embedded_image_url ||= nil  # should be the post url for creating new embedded images
+  embedded_image_url ||= wcms_components_embedded_images_url
 
 
 = wcms_component("shared/embedded_image_uploader", embedded_image_url: embedded_image_url)

data/app/views/wcms_components/forms/_person_lookup.html.slim

@@ -1,10 +1,19 @@
 ruby:
-  lookup_url ||= nil
+  form ||= nil
+  person_id_key ||= :person_id
+  lookup_url ||= wcms_components_people_url
+  placeholder ||= 'First or last name'
+  required ||= false
+
+  html_options = {placeholder: placeholder, required: required, class: 'form-control typeahead'}
 
 - if lookup_url
   .person-lookup data-lookup-url=lookup_url
-    = hidden_field_tag :person_id, '', class: 'hidden-person-id'
-    = text_field_tag :person_name, '', placeholder: 'First or last name', required: true, class: 'form-control typeahead'
+    - if form
+      = form.hidden_field person_id_key, class: 'hidden-person-id'
+    - else
+      = hidden_field_tag person_id_key, '', class: 'hidden-person-id'
+    = text_field_tag :person_name, '', html_options
 
 - else
   p

data/app/views/wcms_components/forms/_presentation_data_editor.html.slim

@@ -1,16 +1,15 @@
 / Example:
 / = wcms_component "forms/presentation_data_editor",
-/   schema: @generic_object.presentation_data_template.schema,
-/   data: @generic_object.presentation_data,
 /   form: f,
-/   embedded_image_url: create_embedded_images_url
+/   schema: @generic_object.presentation_data_template.schema,
+/   presentation_data: @generic_object.presentation_data
 /
 
 ruby:
   schema ||= []
   presentation_data ||= {}
   form ||= nil
-  embedded_image_url ||= nil  # should be the post url for creating new embedded images
+  embedded_image_url ||= wcms_components_embedded_images_url
 
 = wcms_component "shared/embedded_image_uploader",
   embedded_image_url: embedded_image_url

data/app/views/wcms_components/forms/_related_object_tags.html.slim

@@ -0,0 +1,12 @@
+ruby:
+  form ||= nil
+  attribute ||= nil
+  value ||= value
+  html_class ||= 'form-control'
+
+
+= wcms_component "forms/tag_input",
+  form: form,
+  attribute: :related_object_tags_string,
+  value: value,
+  html_class: html_class

data/app/views/wcms_components/forms/_tag_input.html.slim

@@ -0,0 +1,26 @@
+/ Example:
+/   = wcms_component "forms/tag_input",
+/     form: f,
+/     attribute: :courses_string,
+/     typeahead: { url: courses_path(format: :json), key: 'course_key'}
+/
+
+
+ruby:
+  form ||= nil
+  attribute ||= nil
+  value ||= value
+  html_class ||= 'form-control'
+  typeahead ||= nil  # for available options see tag_input.js.coffee
+  options ||= {}
+  html_options = options.merge({
+    class: html_class,
+    data: {role: 'tagsinput', typeahead: typeahead}
+  })
+  html_options[:value] = value unless value.nil?
+
+
+- if form
+  = form.text_field attribute, html_options
+- else
+  = text_field_tag attribute, value, html_options

data/app/views/wcms_components/forms/_yaml_editor.html.slim

@@ -3,7 +3,7 @@ ruby:
   attribute ||= nil
   html_class ||= 'form-control'
   value ||= nil
-  embedded_image_url ||= nil  # should be the post url for creating new embedded images
+  embedded_image_url ||= wcms_components_embedded_images_url
 
   # Set default value
   # We have to do it this way in case value is an empty string (as opposed to nil).

data/app/views/wcms_components/shared/_embedded_image_uploader.html.slim

@@ -1,5 +1,5 @@
 ruby:
-  embedded_image_url ||= nil  # should be the post url for creating new embedded images
+  embedded_image_url ||= wcms_components_embedded_images_url
 
 - if embedded_image_url
   javascript:

data/biola_wcms_components.gemspec

@@ -19,7 +19,9 @@ Gem::Specification.new do |spec|
   spec.require_paths = ["lib"]
 
   spec.add_dependency "ace-rails-ap",         "~> 3.0"
+  spec.add_dependency "buweb_content_models", ">= 0.82"
   spec.add_dependency "coffee-rails",         ">= 4.0"
+  spec.add_dependency "pundit",               "~> 0.3"
   spec.add_dependency "sass-rails",           ">= 4.0"
   spec.add_dependency "slim",                 ">= 2.0"
   spec.add_development_dependency "bundler",  "~> 1.3"

data/config/routes.rb

@@ -0,0 +1,13 @@
+Rails.application.routes.draw do
+
+  namespace :wcms_components do
+    resources :embedded_images, only: [:create], defaults: { format: 'json' }
+
+    # "people#index" is used for search purposes
+    resources :people, only: [:index], defaults: { format: 'json' }
+  end
+
+  # this is just a convenience to create a named route to rack-cas' logout
+  get '/logout' => -> env { [200, { 'Content-Type' => 'text/html' }, ['Rack::CAS should have caught this']] }, as: :logout
+
+end

data/lib/biola_wcms_components.rb

@@ -1,6 +1,8 @@
 require "biola_wcms_components/version"
 require "biola_wcms_components/engine" if defined?(::Rails)
 require "ace-rails-ap"
+require "buweb_content_models"
+require "pundit"
 require "coffee-rails"
 require "sass-rails"
 require "slim"
@@ -18,5 +20,6 @@ module BiolaWcmsComponents
 end
 
 
+autoload :CasAuthentication, 'components/cas_authentication'
 autoload :MenuBlock, 'components/menu_block'
 autoload :PresentationDataEditor, 'components/presentation_data_editor'

data/lib/biola_wcms_components/version.rb

@@ -1,3 +1,3 @@
 module BiolaWcmsComponents
-  VERSION = "0.0.1"
+  VERSION = "0.1.0"
 end

data/lib/components/cas_authentication.rb

@@ -0,0 +1,87 @@
+class CasAuthentication
+  def initialize(session)
+    @session = session
+  end
+
+  def user
+    if username.present?
+      @user ||= User.find_or_initialize_by(username: username)
+    end
+  end
+
+  def perform
+    if authenticated?
+      true
+    elsif present?
+      if new_user?
+        if create_user!
+          authenticate!
+        end
+      elsif unauthenticated?
+        authenticate!
+        update_extra_attributes!
+      end
+    end
+  end
+
+  private
+
+  attr_reader :session
+
+  def present?
+    session['cas'].present?
+  end
+
+  def new_user?
+    !!user.try(:new_record?)
+  end
+
+  def authenticated?
+    session[:username].present?
+  end
+
+  def unauthenticated?
+    !authenticated?
+  end
+
+  def authenticate!
+    session[:username] = username
+  end
+
+  def update_extra_attributes!
+    user.biola_id     = extra_attr(:employeeId)                     if extra_attr_has_key?(:employeeId)
+    user.first_name   = extra_attr(:eduPersonNickname)              if extra_attr_has_key?(:eduPersonNickname)
+    user.last_name    = extra_attr(:sn)                             if extra_attr_has_key?(:sn)
+    user.email        = extra_attr(:mail)                           if extra_attr_has_key?(:mail)
+    user.photo_url    = extra_attr(:url).gsub('.jpg', '_large.jpg') if extra_attr_has_key?(:url)
+    user.entitlements = extra_attrs(:eduPersonEntitlement)          if extra_attr_has_key?(:eduPersonEntitlement)
+    user.affiliations = extra_attrs(:eduPersonAffiliation)          if extra_attr_has_key?(:eduPersonAffiliation)
+    user.save
+  end
+  alias :create_user! :update_extra_attributes!
+
+  def username
+    session[:username] || attrs['user']
+  end
+
+  def attrs
+    @attrs ||= (session['cas'] || {}).with_indifferent_access
+  end
+
+  def extra_attributes
+    @extra_attributes ||= (attrs['extra_attributes'] || {}).with_indifferent_access
+  end
+
+  def extra_attr_has_key?(key)
+    extra_attributes.has_key? key
+  end
+
+  def extra_attr(key)
+    # Many values come back as arrays but don't really need to be
+    extra_attrs(key).first
+  end
+
+  def extra_attrs(key)
+    Array(extra_attributes[key]).map(&:to_s)
+  end
+end

data/vendor/assets/javascripts/bootstrap-tagsinput.js

@@ -0,0 +1,580 @@
+// NOTE: There are a few places I made changes to,
+//  so consider them when updating. Search this document for the key "CHANGED"
+//
+// https://github.com/timschlechter/bootstrap-tagsinput
+// Vesion: 0.4.2
+
+(function ($) {
+  "use strict";
+
+  var defaultOptions = {
+    tagClass: function(item) {
+      return 'label label-info';
+    },
+    itemValue: function(item) {
+      return item ? item.toString() : item;
+    },
+    itemText: function(item) {
+      return this.itemValue(item);
+    },
+    freeInput: true,
+    addOnBlur: true,
+    maxTags: undefined,
+    maxChars: undefined,
+    confirmKeys: [13, 44],
+    onTagExists: function(item, $tag) {
+      $tag.hide().fadeIn();
+    },
+    trimValue: false,
+    allowDuplicates: false
+  };
+
+  /**
+   * Constructor function
+   */
+  function TagsInput(element, options) {
+    this.itemsArray = [];
+
+    this.$element = $(element);
+    this.$element.hide();
+
+    this.isSelect = (element.tagName === 'SELECT');
+    this.multiple = (this.isSelect && element.hasAttribute('multiple'));
+    this.objectItems = options && options.itemValue;
+    this.placeholderText = element.hasAttribute('placeholder') ? this.$element.attr('placeholder') : '';
+    this.inputSize = Math.max(1, this.placeholderText.length);
+
+    this.$container = $('<div class="bootstrap-tagsinput"></div>');
+    this.$input = $('<input type="text" placeholder="' + this.placeholderText + '"/>').appendTo(this.$container);
+
+    this.$element.after(this.$container);
+
+    // CHANGED: (RH) This is keeping the input from resizing automatically.
+    // var inputWidth = (this.inputSize < 3 ? 3 : this.inputSize) + "em";
+    // this.$input.get(0).style.cssText = "min-width: " + inputWidth + "";
+    this.build(options);
+  }
+
+  TagsInput.prototype = {
+    constructor: TagsInput,
+
+    /**
+     * Adds the given item as a new tag. Pass true to dontPushVal to prevent
+     * updating the elements val()
+     */
+    add: function(item, dontPushVal, options) {
+      var self = this;
+
+      if (self.options.maxTags && self.itemsArray.length >= self.options.maxTags)
+        return;
+
+      // Ignore falsey values, except false
+      if (item !== false && !item)
+        return;
+
+      // Trim value
+      if (typeof item === "string" && self.options.trimValue) {
+        item = $.trim(item);
+      }
+
+      // Throw an error when trying to add an object while the itemValue option was not set
+      if (typeof item === "object" && !self.objectItems)
+        throw("Can't add objects when itemValue option is not set");
+
+      // Ignore strings only containg whitespace
+      if (item.toString().match(/^\s*$/))
+        return;
+
+      // If SELECT but not multiple, remove current tag
+      if (self.isSelect && !self.multiple && self.itemsArray.length > 0)
+        self.remove(self.itemsArray[0]);
+
+      if (typeof item === "string" && this.$element[0].tagName === 'INPUT') {
+        var items = item.split(',');
+        if (items.length > 1) {
+          for (var i = 0; i < items.length; i++) {
+            this.add(items[i], true);
+          }
+
+          if (!dontPushVal)
+            self.pushVal();
+          return;
+        }
+      }
+
+      var itemValue = self.options.itemValue(item),
+          itemText = self.options.itemText(item),
+          tagClass = self.options.tagClass(item);
+
+      // Ignore items allready added
+      var existing = $.grep(self.itemsArray, function(item) { return self.options.itemValue(item) === itemValue; } )[0];
+      if (existing && !self.options.allowDuplicates) {
+        // Invoke onTagExists
+        if (self.options.onTagExists) {
+          var $existingTag = $(".tag", self.$container).filter(function() { return $(this).data("item") === existing; });
+          self.options.onTagExists(item, $existingTag);
+        }
+        return;
+      }
+
+      // if length greater than limit
+      if (self.items().toString().length + item.length + 1 > self.options.maxInputLength)
+        return;
+
+      // raise beforeItemAdd arg
+      var beforeItemAddEvent = $.Event('beforeItemAdd', { item: item, cancel: false, options: options});
+      self.$element.trigger(beforeItemAddEvent);
+      if (beforeItemAddEvent.cancel)
+        return;
+
+      // register item in internal array and map
+      self.itemsArray.push(item);
+
+      // add a tag element
+      var $tag = $('<span class="tag ' + htmlEncode(tagClass) + '">' + htmlEncode(itemText) + '<span data-role="remove"></span></span>');
+      $tag.data('item', item);
+      self.findInputWrapper().before($tag);
+      $tag.after(' ');
+
+      // add <option /> if item represents a value not present in one of the <select />'s options
+      if (self.isSelect && !$('option[value="' + encodeURIComponent(itemValue) + '"]',self.$element)[0]) {
+        var $option = $('<option selected>' + htmlEncode(itemText) + '</option>');
+        $option.data('item', item);
+        $option.attr('value', itemValue);
+        self.$element.append($option);
+      }
+
+      if (!dontPushVal)
+        self.pushVal();
+
+      // Add class when reached maxTags
+      if (self.options.maxTags === self.itemsArray.length || self.items().toString().length === self.options.maxInputLength)
+        self.$container.addClass('bootstrap-tagsinput-max');
+
+      self.$element.trigger($.Event('itemAdded', { item: item, options: options }));
+    },
+
+    /**
+     * Removes the given item. Pass true to dontPushVal to prevent updating the
+     * elements val()
+     */
+    remove: function(item, dontPushVal, options) {
+      var self = this;
+
+      if (self.objectItems) {
+        if (typeof item === "object")
+          item = $.grep(self.itemsArray, function(other) { return self.options.itemValue(other) ==  self.options.itemValue(item); } );
+        else
+          item = $.grep(self.itemsArray, function(other) { return self.options.itemValue(other) ==  item; } );
+
+        item = item[item.length-1];
+      }
+
+      if (item) {
+        var beforeItemRemoveEvent = $.Event('beforeItemRemove', { item: item, cancel: false, options: options });
+        self.$element.trigger(beforeItemRemoveEvent);
+        if (beforeItemRemoveEvent.cancel)
+          return;
+
+        $('.tag', self.$container).filter(function() { return $(this).data('item') === item; }).remove();
+        $('option', self.$element).filter(function() { return $(this).data('item') === item; }).remove();
+        if($.inArray(item, self.itemsArray) !== -1)
+          self.itemsArray.splice($.inArray(item, self.itemsArray), 1);
+      }
+
+      if (!dontPushVal)
+        self.pushVal();
+
+      // Remove class when reached maxTags
+      if (self.options.maxTags > self.itemsArray.length)
+        self.$container.removeClass('bootstrap-tagsinput-max');
+
+      self.$element.trigger($.Event('itemRemoved',  { item: item, options: options }));
+    },
+
+    /**
+     * Removes all items
+     */
+    removeAll: function() {
+      var self = this;
+
+      $('.tag', self.$container).remove();
+      $('option', self.$element).remove();
+
+      while(self.itemsArray.length > 0)
+        self.itemsArray.pop();
+
+      self.pushVal();
+    },
+
+    /**
+     * Refreshes the tags so they match the text/value of their corresponding
+     * item.
+     */
+    refresh: function() {
+      var self = this;
+      $('.tag', self.$container).each(function() {
+        var $tag = $(this),
+            item = $tag.data('item'),
+            itemValue = self.options.itemValue(item),
+            itemText = self.options.itemText(item),
+            tagClass = self.options.tagClass(item);
+
+          // Update tag's class and inner text
+          $tag.attr('class', null);
+          $tag.addClass('tag ' + htmlEncode(tagClass));
+          $tag.contents().filter(function() {
+            return this.nodeType == 3;
+          })[0].nodeValue = htmlEncode(itemText);
+
+          if (self.isSelect) {
+            var option = $('option', self.$element).filter(function() { return $(this).data('item') === item; });
+            option.attr('value', itemValue);
+          }
+      });
+    },
+
+    /**
+     * Returns the items added as tags
+     */
+    items: function() {
+      return this.itemsArray;
+    },
+
+    /**
+     * Assembly value by retrieving the value of each item, and set it on the
+     * element.
+     */
+    pushVal: function() {
+      var self = this,
+          val = $.map(self.items(), function(item) {
+            return self.options.itemValue(item).toString();
+          });
+
+      self.$element.val(val, true).trigger('change');
+    },
+
+    /**
+     * Initializes the tags input behaviour on the element
+     */
+    build: function(options) {
+      var self = this;
+
+      self.options = $.extend({}, defaultOptions, options);
+      // When itemValue is set, freeInput should always be false
+      if (self.objectItems)
+        self.options.freeInput = false;
+
+      makeOptionItemFunction(self.options, 'itemValue');
+      makeOptionItemFunction(self.options, 'itemText');
+      makeOptionFunction(self.options, 'tagClass');
+
+      // CHANGED: (RH) Removed support for Typeahead Bootstrap version 2.3.2
+
+      // typeahead.js
+      if (self.options.typeaheadjs) {
+          var typeaheadjs = self.options.typeaheadjs || {};
+
+          self.$input.typeahead(null, typeaheadjs).on('typeahead:selected', $.proxy(function (obj, datum) {
+            if (typeaheadjs.valueKey)
+              self.add(datum[typeaheadjs.valueKey]);
+            else
+              self.add(datum);
+            self.$input.typeahead('val', '');
+          }, self));
+      }
+
+      self.$container.on('click', $.proxy(function(event) {
+        if (! self.$element.attr('disabled')) {
+          self.$input.removeAttr('disabled');
+        }
+        self.$input.focus();
+      }, self));
+
+        if (self.options.addOnBlur && self.options.freeInput) {
+          self.$input.on('focusout', $.proxy(function(event) {
+              // HACK: only process on focusout when no typeahead opened, to
+              //       avoid adding the typeahead text as tag
+              if ($('.typeahead, .twitter-typeahead', self.$container).length === 0) {
+                self.add(self.$input.val());
+                self.$input.val('');
+              }
+          }, self));
+        }
+
+
+      self.$container.on('keydown', 'input', $.proxy(function(event) {
+        var $input = $(event.target),
+            $inputWrapper = self.findInputWrapper();
+
+        if (self.$element.attr('disabled')) {
+          self.$input.attr('disabled', 'disabled');
+          return;
+        }
+
+        switch (event.which) {
+          // BACKSPACE
+          case 8:
+            if (doGetCaretPosition($input[0]) === 0) {
+              var prev = $inputWrapper.prev();
+              if (prev) {
+                self.remove(prev.data('item'));
+              }
+            }
+            break;
+
+          // DELETE
+          case 46:
+            if (doGetCaretPosition($input[0]) === 0) {
+              var next = $inputWrapper.next();
+              if (next) {
+                self.remove(next.data('item'));
+              }
+            }
+            break;
+
+          // LEFT ARROW
+          case 37:
+            // Try to move the input before the previous tag
+            var $prevTag = $inputWrapper.prev();
+            if ($input.val().length === 0 && $prevTag[0]) {
+              $prevTag.before($inputWrapper);
+              $input.focus();
+            }
+            break;
+          // RIGHT ARROW
+          case 39:
+            // Try to move the input after the next tag
+            var $nextTag = $inputWrapper.next();
+            if ($input.val().length === 0 && $nextTag[0]) {
+              $nextTag.after($inputWrapper);
+              $input.focus();
+            }
+            break;
+         default:
+             // ignore
+         }
+
+        // Reset internal input's size
+        var textLength = $input.val().length,
+            wordSpace = Math.ceil(textLength / 5),
+            size = textLength + wordSpace + 1;
+        $input.attr('size', Math.max(this.inputSize, $input.val().length));
+      }, self));
+
+      self.$container.on('keypress', 'input', $.proxy(function(event) {
+         var $input = $(event.target);
+
+         if (self.$element.attr('disabled')) {
+            self.$input.attr('disabled', 'disabled');
+            return;
+         }
+
+         var text = $input.val(),
+         maxLengthReached = self.options.maxChars && text.length >= self.options.maxChars;
+         if (self.options.freeInput && (keyCombinationInList(event, self.options.confirmKeys) || maxLengthReached)) {
+            self.add(maxLengthReached ? text.substr(0, self.options.maxChars) : text);
+            $input.val('');
+            event.preventDefault();
+         }
+
+         // Reset internal input's size
+         var textLength = $input.val().length,
+            wordSpace = Math.ceil(textLength / 5),
+            size = textLength + wordSpace + 1;
+         $input.attr('size', Math.max(this.inputSize, $input.val().length));
+      }, self));
+
+      // Remove icon clicked
+      self.$container.on('click', '[data-role=remove]', $.proxy(function(event) {
+        if (self.$element.attr('disabled')) {
+          return;
+        }
+        self.remove($(event.target).closest('.tag').data('item'));
+      }, self));
+
+      // Only add existing value as tags when using strings as tags
+      if (self.options.itemValue === defaultOptions.itemValue) {
+        if (self.$element[0].tagName === 'INPUT') {
+            self.add(self.$element.val());
+        } else {
+          $('option', self.$element).each(function() {
+            self.add($(this).attr('value'), true);
+          });
+        }
+      }
+    },
+
+    /**
+     * Removes all tagsinput behaviour and unregsiter all event handlers
+     */
+    destroy: function() {
+      var self = this;
+
+      // Unbind events
+      self.$container.off('keypress', 'input');
+      self.$container.off('click', '[role=remove]');
+
+      self.$container.remove();
+      self.$element.removeData('tagsinput');
+      self.$element.show();
+    },
+
+    /**
+     * Sets focus on the tagsinput
+     */
+    focus: function() {
+      this.$input.focus();
+    },
+
+    /**
+     * Returns the internal input element
+     */
+    input: function() {
+      return this.$input;
+    },
+
+    /**
+     * Returns the element which is wrapped around the internal input. This
+     * is normally the $container, but typeahead.js moves the $input element.
+     */
+    findInputWrapper: function() {
+      var elt = this.$input[0],
+          container = this.$container[0];
+      while(elt && elt.parentNode !== container)
+        elt = elt.parentNode;
+
+      return $(elt);
+    }
+  };
+
+  /**
+   * Register JQuery plugin
+   */
+  $.fn.tagsinput = function(arg1, arg2, arg3) {
+    var results = [];
+
+    this.each(function() {
+      var tagsinput = $(this).data('tagsinput');
+      // Initialize a new tags input
+      if (!tagsinput) {
+          tagsinput = new TagsInput(this, arg1);
+          $(this).data('tagsinput', tagsinput);
+          results.push(tagsinput);
+
+          if (this.tagName === 'SELECT') {
+              $('option', $(this)).attr('selected', 'selected');
+          }
+
+          // Init tags from $(this).val()
+          $(this).val($(this).val());
+      } else if (!arg1 && !arg2) {
+          // tagsinput already exists
+          // no function, trying to init
+          results.push(tagsinput);
+      } else if(tagsinput[arg1] !== undefined) {
+          // Invoke function on existing tags input
+          if(tagsinput[arg1].length === 3 && arg3 !== undefined){
+            var retVal = tagsinput[arg1](arg2, null, arg3);
+          }else{
+            var retVal = tagsinput[arg1](arg2);
+          }
+          if (retVal !== undefined)
+              results.push(retVal);
+      }
+    });
+
+    if ( typeof arg1 == 'string') {
+      // Return the results from the invoked function calls
+      return results.length > 1 ? results : results[0];
+    } else {
+      return results;
+    }
+  };
+
+  $.fn.tagsinput.Constructor = TagsInput;
+
+  /**
+   * Most options support both a string or number as well as a function as
+   * option value. This function makes sure that the option with the given
+   * key in the given options is wrapped in a function
+   */
+  function makeOptionItemFunction(options, key) {
+    if (typeof options[key] !== 'function') {
+      var propertyName = options[key];
+      options[key] = function(item) { return item[propertyName]; };
+    }
+  }
+  function makeOptionFunction(options, key) {
+    if (typeof options[key] !== 'function') {
+      var value = options[key];
+      options[key] = function() { return value; };
+    }
+  }
+  /**
+   * HtmlEncodes the given value
+   */
+  var htmlEncodeContainer = $('<div />');
+  function htmlEncode(value) {
+    if (value) {
+      return htmlEncodeContainer.text(value).html();
+    } else {
+      return '';
+    }
+  }
+
+  /**
+   * Returns the position of the caret in the given input field
+   * http://flightschool.acylt.com/devnotes/caret-position-woes/
+   */
+  function doGetCaretPosition(oField) {
+    var iCaretPos = 0;
+    if (document.selection) {
+      oField.focus ();
+      var oSel = document.selection.createRange();
+      oSel.moveStart ('character', -oField.value.length);
+      iCaretPos = oSel.text.length;
+    } else if (oField.selectionStart || oField.selectionStart == '0') {
+      iCaretPos = oField.selectionStart;
+    }
+    return (iCaretPos);
+  }
+
+  /**
+    * Returns boolean indicates whether user has pressed an expected key combination.
+    * @param object keyPressEvent: JavaScript event object, refer
+    *     http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
+    * @param object lookupList: expected key combinations, as in:
+    *     [13, {which: 188, shiftKey: true}]
+    */
+  function keyCombinationInList(keyPressEvent, lookupList) {
+      var found = false;
+      $.each(lookupList, function (index, keyCombination) {
+          if (typeof (keyCombination) === 'number' && keyPressEvent.which === keyCombination) {
+              found = true;
+              return false;
+          }
+
+          if (keyPressEvent.which === keyCombination.which) {
+              var alt = !keyCombination.hasOwnProperty('altKey') || keyPressEvent.altKey === keyCombination.altKey,
+                  shift = !keyCombination.hasOwnProperty('shiftKey') || keyPressEvent.shiftKey === keyCombination.shiftKey,
+                  ctrl = !keyCombination.hasOwnProperty('ctrlKey') || keyPressEvent.ctrlKey === keyCombination.ctrlKey;
+              if (alt && shift && ctrl) {
+                  found = true;
+                  return false;
+              }
+          }
+      });
+
+      return found;
+  }
+
+  /**
+   * Initialize tagsinput behaviour on inputs and selects which have
+   * data-role=tagsinput
+   */
+  // CHANGED: (RH) I do this myself... see tag_input.js.cofee
+  // $(function() {
+  //   $("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
+  // });
+})(window.jQuery);

data/vendor/assets/stylesheets/bootstrap-tagsinput.css

@@ -0,0 +1,55 @@
+.bootstrap-tagsinput {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  display: block;
+  padding: 4px 6px;
+  color: #555;
+  vertical-align: middle;
+  border-radius: 4px;
+  max-width: 100%;
+  line-height: 22px;
+  cursor: text;
+}
+.bootstrap-tagsinput input {
+  border: none;
+  box-shadow: none;
+  outline: none;
+  background-color: transparent;
+  padding: 0 6px;
+  margin: 0;
+  width: auto !important;
+  max-width: inherit;
+}
+.bootstrap-tagsinput.form-control input::-moz-placeholder {
+  color: #777;
+  opacity: 1;
+}
+.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
+  color: #777;
+}
+.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
+  color: #777;
+}
+.bootstrap-tagsinput input:focus {
+  border: none;
+  box-shadow: none;
+}
+.bootstrap-tagsinput .tag {
+  margin-right: 2px;
+  color: white;
+}
+.bootstrap-tagsinput .tag [data-role="remove"] {
+  margin-left: 8px;
+  cursor: pointer;
+}
+.bootstrap-tagsinput .tag [data-role="remove"]:after {
+  content: "x";
+  padding: 0px 2px;
+}
+.bootstrap-tagsinput .tag [data-role="remove"]:hover {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}

data/vendor/assets/stylesheets/typeahead.css

@@ -0,0 +1,50 @@
+.typeahead, .tt-query, .tt-hint {
+  width: 396px;
+  height: 34px;
+  padding: 8px 12px;
+  font-size: 15px;
+  line-height: 15px;
+  border: 1px solid #ccc;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  outline: none;
+}
+
+.tt-query {
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.tt-hint {
+  color: #999
+}
+
+.tt-dropdown-menu {
+  text-align: left;
+  width: 422px;
+  margin-top: 12px;
+  padding: 8px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  box-shadow: 0 5px 10px rgba(0,0,0,.2);
+}
+
+.tt-suggestion, .tt-empty-message {
+  padding: 3px 20px;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.tt-suggestion.tt-cursor {
+  cursor: pointer;
+  color: #fff;
+  background-color: #0097cf;
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: biola_wcms_components
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.1.0
 platform: ruby
 authors:
 - Ryan Hall
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-02-25 00:00:00.000000000 Z
+date: 2015-02-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: ace-rails-ap
@@ -24,6 +24,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: buweb_content_models
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0.82'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0.82'
 - !ruby/object:Gem::Dependency
   name: coffee-rails
   requirement: !ruby/object:Gem::Requirement
@@ -38,6 +52,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '4.0'
+- !ruby/object:Gem::Dependency
+  name: pundit
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.3'
 - !ruby/object:Gem::Dependency
   name: sass-rails
   requirement: !ruby/object:Gem::Requirement
@@ -112,16 +140,21 @@ files:
 - app/assets/javascripts/components/forms/json_editor.js.coffee
 - app/assets/javascripts/components/forms/person_lookup.js.coffee
 - app/assets/javascripts/components/forms/presentation_data_editor.js.coffee
+- app/assets/javascripts/components/forms/tag_input.js.coffee
 - app/assets/javascripts/components/forms/yaml_editor.js.coffee
 - app/assets/javascripts/configuration/file_uploader.js.coffee
 - app/assets/javascripts/configuration/setup_redactor.js.coffee
 - app/assets/stylesheets/_mixins.scss
 - app/assets/stylesheets/_settings.scss
-- app/assets/stylesheets/biola-wcms-components.scss
+- app/assets/stylesheets/biola-wcms-components.css.scss
 - app/assets/stylesheets/components/alerts/_message_list.scss
 - app/assets/stylesheets/components/forms/_person_lookup.scss
 - app/assets/stylesheets/components/forms/_presentation_data_editor.scss
+- app/assets/stylesheets/components/forms/_tag_input.scss
 - app/assets/stylesheets/components/navigation/_site_nav.scss
+- app/controllers/wcms_application_controller.rb
+- app/controllers/wcms_components/embedded_images_controller.rb
+- app/controllers/wcms_components/people_controller.rb
 - app/helpers/wcms_components/alerts_helper.rb
 - app/helpers/wcms_components/component_helper.rb
 - app/helpers/wcms_components/navigation_helper.rb
@@ -130,6 +163,8 @@ files:
 - app/views/wcms_components/forms/_person_lookup.html.slim
 - app/views/wcms_components/forms/_presentation_data_editor.html.slim
 - app/views/wcms_components/forms/_redactor_editor.html.slim
+- app/views/wcms_components/forms/_related_object_tags.html.slim
+- app/views/wcms_components/forms/_tag_input.html.slim
 - app/views/wcms_components/forms/_text_area.html.slim
 - app/views/wcms_components/forms/_yaml_editor.html.slim
 - app/views/wcms_components/navigation/_page_nav.html.slim
@@ -138,17 +173,22 @@ files:
 - app/views/wcms_components/shared/_embedded_image_uploader.html.slim
 - biola_wcms_components.gemspec
 - config/locales/en.yml
+- config/routes.rb
 - lib/biola_wcms_components.rb
 - lib/biola_wcms_components/configuration.rb
 - lib/biola_wcms_components/engine.rb
 - lib/biola_wcms_components/version.rb
+- lib/components/cas_authentication.rb
 - lib/components/menu_block.rb
 - lib/components/presentation_data_editor.rb
+- vendor/assets/javascripts/bootstrap-tagsinput.js
 - vendor/assets/javascripts/handlebars.js
 - vendor/assets/javascripts/redactor.js
 - vendor/assets/javascripts/redactor_fullscreen.js
 - vendor/assets/javascripts/typeahead.js
+- vendor/assets/stylesheets/bootstrap-tagsinput.css
 - vendor/assets/stylesheets/redactor.css
+- vendor/assets/stylesheets/typeahead.css
 homepage: https://github.com/biola/biola-wcms-components
 licenses:
 - MIT