biola_wcms_components 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 3564d479c782c49da3714d46d516fbc535e40cfa
+  data.tar.gz: 19904bda0bb747bfd063e87683cdb12391ec7de3
+SHA512:
+  metadata.gz: bea91bf31935f7321f8a5e2aadfa5e7eceef27781eb5abbc70bbb346e5dffafc03adc46a80c2d39932e93126222e495f1a70e3e54d7003e25d2068ae65c6c287
+  data.tar.gz: 3157ae4e247df688200788bfac820cec812a1199c5fbb43217c24e82893902b24bac5e94dba651d34369331fd93b02008e7bb77778b8fb8257b8594477203f17

data/.gitignore

@@ -0,0 +1,4 @@
+*.gem
+.bundle
+.rspec
+Gemfile.lock

data/.ruby-version

@@ -0,0 +1 @@
+2.1.4

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in biola_wcms_components.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2014 Ryan Hall
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,74 @@
+# Biola WCMS Components
+
+This provides reusable UX components for our differnet WCMS projects
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'biola_wcms_components'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install biola_wcms_components
+
+#### Dependencies
+
+* ace-rails-ap
+* coffee-rails
+* sass-rails
+* slim
+* rails (this is not an explicit dependency but I haven't tested it using anything else)
+
+## Usage
+
+### Rails > 3.1
+
+Include the following in `application.css.scss`.
+
+    @import "biola-wcms-components";
+
+Include the following in `application.js.coffee`.
+
+    #= require biola-wcms-components
+
+
+### Components
+
+In your view file, you will render `wcms_component("path/to/component", options)`
+
+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
+
+Currently, look in `app/views/wcms_components` for available components.
+
+
+#### Other requirements
+
+* `current_user` - should be defined an ApplicationController. Should return user when logged in
+
+#### Configuration
+
+Create a new file called `/config/initializers/biola_wcms_components.rb`
+
+    BiolaWcmsComponents.configure do |config|
+      config.default_redactor_buttons = ['bold', 'italic', 'orderedlist', 'unorderedlist']
+    end
+
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

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

@@ -0,0 +1,15 @@
+#= require ace/ace
+#= require ace/mode-yaml
+#= require ace/mode-json
+#= require ace/worker-json
+#
+#  Handlebars and typeahead are needed for the person-lookup component
+#= require handlebars
+#= require typeahead
+#
+#= require redactor
+#= require redactor_fullscreen
+#
+#= require_tree ./configuration
+#= require_tree ./components
+#= require_self

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

@@ -0,0 +1,20 @@
+$(document).ready ->
+  $('.ace_json_editor').each ->
+    editor_area = document.createElement('div')
+    this.appendChild(editor_area)
+
+    # Initialize Ace Editor
+    editor = ace.edit(editor_area)
+    editor.getSession().setMode("ace/mode/json")
+    editor.getSession().setTabSize(2)
+    editor.getSession().setUseWrapMode(true);
+    editor.setPrintMarginColumn(800)
+    editor.setOptions({
+      minLines: 8,
+      maxLines: Infinity
+    });
+
+    textarea = $(this).children('textarea').hide()
+    editor.getSession().setValue textarea.val()
+    editor.getSession().on "change", ->
+      textarea.val editor.getSession().getValue()

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

@@ -0,0 +1,29 @@
+$(document).ready ->
+  if $('.person-lookup').length > 0
+    people_search_url = $('.person-lookup').first().data('lookup-url')
+
+    peopleSearch = new Bloodhound(
+      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value')
+      queryTokenizer: Bloodhound.tokenizers.whitespace
+      # The prefetch url returns a list of all the faculty
+      prefetch: people_search_url
+      remote: people_search_url + '?q=%QUERY'
+    )
+
+    peopleSearch.initialize()
+    $('.person-lookup .typeahead').typeahead null,
+      name: 'people-search'
+      displayKey: (person) ->
+        person.name + " <#{person.email || person.id}>"
+      highlight: true
+      source: peopleSearch.ttAdapter()
+      templates:
+        empty: '<div class="tt-empty-message">No one found with that name</div>'
+        suggestion: Handlebars.compile(
+          '<span class="image" style="background-image: url({{image}})" ></span>' +
+          '<span class="name">{{name}}</span> <span class="affiliations">{{affiliations}}</span>'
+        )
+
+    # We need to submit the ID through a hidden input for improved lookup.
+    $('.person-lookup .typeahead').on "typeahead:selected typeahead:autocompleted", (e,datum) ->
+      $('.person-lookup .hidden-person-id').val datum.id

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

@@ -0,0 +1,69 @@
+$(document).ready ->
+  if $('#presentation_data_editor').length > 0
+
+    # Disable all framework fields, otherwise they will save on submit
+    $('.array_wrapper .framework').find('input, textarea').each ->
+      this.disabled = true
+
+    # Delete an array item when you click the delete button
+    $('.array_wrapper').on 'click', '.delete_array_item', ->
+      $(this).parents('.array_item').remove()
+      false
+
+    # Add an new array item from the last array_item
+    $('.array_wrapper .add_array_item').click ->
+      last_item = $(this).siblings('.array_item').last()
+      framework = $(this).siblings('.array_item.framework').last()
+      new_item = framework.clone()
+      new_item.removeClass("framework")
+
+      # Get array number for last item
+      last_number = last_item.find('input, textarea').first().attr('id').match(/\d+/)
+      new_number = +last_number[0] + 1
+
+      # Loop through each element and enable it.
+      # They have to be disabled in the framework form so they don't get submitted
+      new_item.find('input, textarea').each ->
+        this.id = this.id.replace(/\d+/, new_number)
+        this.disabled = false
+        this.value = ""
+
+      # Append to DOM after last item
+      last_item.after(new_item)
+
+      # Setup redactor for new item
+      #   NOTE: This is the reason I am copying the 'framework' item above,
+      #    because redactor is already setup for the other items.
+      #    I explicitly exclude redactor setup from items nested under 'framework'
+      setupRedactorEditorsUnder(new_item)
+
+      false
+
+
+
+
+
+    ##############################
+    # Setup drag-drop image upload
+    ##############################
+    uploadImage = (file, input) ->
+      fileUploader.sendFileToServer file, 'embedded_image', ((url) ->
+        input.value = url
+      ), ->
+        alert('There was a problem uploading the image')
+
+    $('#presentation_data_editor').on 'dragover', 'input.drop-image-uploader', (e) ->
+      event.preventDefault()
+      event.stopPropagation()
+      $(this).addClass('dragging')
+
+    $('#presentation_data_editor').on 'dragleave', 'input.drop-image-uploader', (e) ->
+      event.preventDefault()
+      event.stopPropagation()
+      $(this).removeClass('dragging')
+
+    $('#presentation_data_editor').on 'drop', 'input.drop-image-uploader', (e) ->
+      event.preventDefault()
+      event.stopPropagation()
+      uploadImage(e.originalEvent.dataTransfer.files[0], this)
+      $(this).removeClass('dragging')

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

@@ -0,0 +1,39 @@
+# This is depricated. We will keep this around until we have moved everything over to the new
+#  plain data form editor.
+
+$(document).ready ->
+  $('.ace_yaml_editor').each ->
+    editor_area = document.createElement('div')
+    this.appendChild(editor_area)
+
+    # Initialize Ace Editor
+    editor = ace.edit(editor_area)
+    editor.getSession().setMode("ace/mode/yaml")
+    editor.getSession().setTabSize(2)
+    editor.setPrintMarginColumn(800)
+    editor.setOptions({
+      minLines: 8,
+      maxLines: Infinity
+    });
+
+    textarea = $(this).children('textarea').hide()
+    editor.getSession().setValue textarea.val()
+    editor.getSession().on "change", ->
+      textarea.val editor.getSession().getValue()
+
+
+    # Setup drag-drop image upload
+    editor.container.addEventListener 'dragover', (e) =>
+      e.preventDefault()
+      e.stopPropagation()
+
+    editor.container.addEventListener 'dragleave', (e) =>
+      e.preventDefault()
+      e.stopPropagation()
+
+    editor.container.addEventListener 'drop', (e) =>
+      e.preventDefault()
+      e.stopPropagation()
+      fileUploader.sendFileToServer e.dataTransfer.files[0], 'embedded_image', (url) ->
+        editor.insert('"' + url + '"')
+

data/app/assets/javascripts/configuration/file_uploader.js.coffee

@@ -0,0 +1,55 @@
+# In order to use you must first set up an uploader
+#  Example:
+#    fileUploader.addUploader('embedded_image', "http://api.example.com/uploader");
+#
+# Then you can send a file to that uploader whenever you are ready.
+#  Example:
+#     fileUploader.sendFileToServer file, 'embedded_image', ((url) ->
+#       alert 'success!'
+#     ), ->
+#       alert 'error :('
+#
+
+
+window.fileUploader ||= {
+  uploaders: {}
+}
+
+fileUploader.addUploader = (key, url) ->
+  fileUploader.uploaders[key] = url
+
+fileUploader.sendFileToServer = (file, urlKey, successCallback, errorCallback) ->
+  if fileUploader.uploaders[urlKey]
+    form_data = new FormData()
+    form_data.append('file', file)
+    form_data.append('authenticity_token', $('[name=csrf-token').attr('content'))
+
+    xhr = new XMLHttpRequest()
+    xhr.open "POST", fileUploader.uploaders[urlKey]
+
+    # complete
+    xhr.onreadystatechange = $.proxy(->
+      if xhr.readyState is 4
+        data = xhr.responseText
+        data = data.replace(/^\[/, "")
+        data = data.replace(/\]$/, "")
+        json = undefined
+        try
+          json = ((if typeof data is "string" then $.parseJSON(data) else data))
+        catch err
+          json = error: true
+
+        if json.error
+          if errorCallback
+            errorCallback()
+          else
+            alert('There was a problem uploading the file')
+        else
+          successCallback(json.filelink)
+      return
+    , this)
+    xhr.send form_data
+
+  else
+    alert('Uploader is not configured.')
+

data/app/assets/javascripts/configuration/setup_redactor.js.coffee

@@ -0,0 +1,65 @@
+setupRedactor = (obj) ->
+  # Default Options
+  options =
+    minHeight: 200
+    allowedTags: ['p', 'br']
+    buttons: []
+
+  # Add any custom data attributes to the default options
+  if obj.data('linkable')  # in case you want to support links without explicitly giving a link button.
+    options.allowedTags = $.merge(options.allowedTags, 'a')
+  if data = obj.data('buttons')
+    buttons = data.split(' ')
+    options.buttons = $.merge(options.buttons, buttons)
+    options.allowedTags = $.merge(options.allowedTags, buttonsToTags(buttons))
+  if tuned_data = obj.data('formatting')
+    formatting = tuned_data.split (' ')
+    options.formatting = tuned_data.split (' ')
+  if options.allowedTags.indexOf('a') >= 0
+    options.convertLinks = true;
+  if options.buttons.indexOf('fullscreen') >= 0
+    options.plugins = ['fullscreen']
+
+  # Uniq all arrays
+  options.buttons = $.unique(options.buttons)
+  if formatting
+    options.formatting = $.unique(options.formatting)
+  options.allowedTags = $.unique(options.allowedTags)
+
+  # Initialize redactor
+  obj.redactor(options)
+
+
+button_to_tag_mapping =
+  bold: ['b', 'strong']
+  italic: ['i', 'em']
+  link: ['a']
+  orderedlist: ['ol', 'li']
+  table: ['table', 'tr', 'tbody', 'td']
+  unorderedlist: ['ul', 'li']
+
+buttonsToTags = (buttons) ->
+  tags = []
+  $.each buttons, (index, value) ->
+    if mapping = button_to_tag_mapping[value]
+      tags = $.merge(tags, mapping)
+  tags
+
+
+window.setupRedactorEditorsUnder = (obj) ->
+  # Initialize redactor on items with the class 'redactor'
+  $(obj).find("textarea.redactor:enabled").each (i) ->
+    # Don't setup redactor if the textarea inherits from a "framework" item.
+    #   framework items are hidden and are used to add new items to a form array.
+    # If it inherits from .redactor-box that means it has already been initialized.
+    unless $(this).parents('.framework, .redactor-box').length > 0
+      setupRedactor($(this))
+
+
+$(document).ready ->
+  # Run on startup
+  setupRedactorEditorsUnder('body')
+
+  # Run when modals open
+  $(".modal").on "shown.bs.modal", (e) ->
+    setupRedactorEditorsUnder('.modal')

data/app/assets/stylesheets/_mixins.scss

@@ -0,0 +1,43 @@
+//===============================================
+// Toggle-able media queries and old IE helper
+// See: http://jakearchibald.github.io/sass-ie/
+//===============================================
+$fix-mqs: false !default;
+$old-ie: false !default;
+$max-width-extreme:9999px;
+
+@mixin respond($min-width:0, $max-width:$max-width-extreme, $orientation:null) {
+  // If we're outputting for a fixed media query set...
+  @if $fix-mqs {
+    // ...and if we should apply these rules...
+    @if $fix-mqs >= $min-width and $fix-mqs <= $max-width {
+      // ...output the content the user gave us.
+      @content;
+    }
+  }
+  @else {
+    // Otherwise, output it using a regular media query
+    $query:'screen';
+
+    @if $min-width > 0 {
+      $query:$query + " and (min-width:#{$min-width})";
+    }
+    @if $max-width < $max-width-extreme {
+      $query:$query + " and (max-width:#{$max-width})";
+    }
+    @if $orientation {
+      $query:$query + " and (orientation:#{$orientation})";
+    }
+
+    @media #{$query} {
+      @content;
+    }
+  }
+}
+
+@mixin old-ie {
+  // Only use this content if we're dealing with old IE
+  @if $old-ie {
+    @content;
+  }
+}