fustrate-rails 0.3.3

data/vendor/assets/javascripts/fustrate/components/_module.coffee

@@ -0,0 +1,3 @@
+class Fustrate.Components
+  class @Base extends Fustrate.Listenable
+    @initialize: ->

data/vendor/assets/javascripts/fustrate/components/alert_box.coffee

@@ -0,0 +1,10 @@
+class Fustrate.Components.AlertBox extends Fustrate.Components.Base
+  @fadeSpeed: 300
+
+  @initialize: ->
+    $('.alert-box').on 'click', '.close', (e) ->
+      alert_box = $(e.currentTarget).closest('.alert-box')
+
+      alert_box.fadeOut @constructor.fadeSpeed, alert_box.remove
+
+      false

data/vendor/assets/javascripts/fustrate/components/autocomplete.coffee

@@ -0,0 +1,161 @@
+class Fustrate.Components.Autocomplete extends Fustrate.Components.Base
+  @types:
+    plain:
+      displayKey: 'value'
+      item: (object, userInput) -> "<li>#{@highlight object.value}</li>"
+      filter: (object, userInput) -> object.value.indexOf(userInput) >= 0
+
+  @initialize: ->
+    # Override the default sort
+    Awesomplete.SORT_BYLENGTH = ->
+
+  constructor: (@input, types) ->
+    if $.isArray types
+      types = {
+        plain:
+          list: types.map (value) -> { value: value }
+      }
+
+    @sources = for own type, options of types
+      $.extend({}, @constructor.types[type], options)
+
+    @sources = [@sources] if $.isPlainObject @sources
+
+    existing = @input.data('awesomplete')
+
+    if existing
+      existing.sources = @sources
+      return
+
+    @awesomplete = new Awesomplete(
+      @input[0]
+      minChars: 0
+      maxItems: 25
+      filter: -> true
+      item: (option, userInput) -> option # Items are pre-rendered
+    )
+
+    @input
+      .data 'awesomplete', @
+      .on 'awesomplete-highlight', @onHighlight
+      .on 'awesomplete-select', @onSelect
+      .on 'keyup', @constructor.debounce(@onKeyup)
+      .on 'focus', @onFocus
+
+  blanked: =>
+    return unless @input.val().trim() == ''
+
+    @awesomplete.close()
+
+    $("~ input:hidden##{@input.attr('id')}_id", @awesomplete.container)
+      .val null
+    $("~ input:hidden##{@input.attr('id')}_type", @awesomplete.container)
+      .val null
+
+    @input.trigger 'blanked.autocomplete'
+
+  onFocus: =>
+    @items = []
+    @value = @input.val().trim() ? ''
+
+    for source in @sources when source.list?.length
+      for datum in source.list when source.filter(datum, @value)
+        @items.push @createListItem(datum, source)
+
+    @awesomplete.list = @items
+
+  onHighlight: =>
+    item = $('+ ul li[aria-selected="true"]', @input)
+
+    return unless item[0]
+
+    item[0].scrollIntoView false
+    @replace item.data('datum')._displayValue
+
+  onSelect: (e) =>
+    # aria-selected isn't set on click
+    item = $(e.originalEvent.origin).closest('li')
+    datum = item.data('datum')
+
+    @replace datum._displayValue
+    @awesomplete.close()
+
+    $("~ input:hidden##{@input.attr('id')}_id", @awesomplete.container)
+      .val datum.id
+    $("~ input:hidden##{@input.attr('id')}_type", @awesomplete.container)
+      .val datum._type
+
+    @input.data(datum: datum).trigger('finished.autocomplete')
+
+    false
+
+  onKeyup: (e) =>
+    keyCode = e.which || e.keyCode
+
+    value = @input.val().trim()
+
+    return @blanked() if value == ''
+
+    # Ignore: Tab, Enter, Esc, Left, Up, Right, Down
+    return if keyCode in [9, 13, 27, 37, 38, 39, 40]
+
+    # Don't perform the same search twice in a row
+    return unless value != @value && value.length >= 2
+
+    @value = value
+    @items = []
+
+    for source in @sources
+      if source.url?
+        @performSearch(source)
+      else if source.list?
+        for datum in source.list when source.filter(datum, @value)
+          @items.push @createListItem(datum, source)
+
+        @awesomplete.list = @items
+
+  performSearch: (source) =>
+    $.get source.url(search: @value, commit: 1, format: 'json')
+    .done (response) =>
+      for datum in response
+        @items.push @createListItem(datum, source)
+
+      @awesomplete.list = @items
+
+  createListItem: (datum, source) ->
+    datum._displayValue = datum[source.displayKey]
+    datum._type = source.type
+
+    $ source.item.call(@, datum, @value)
+      .data datum: datum
+      .get(0)
+
+  highlight: (text) =>
+    return '' unless text
+
+    text.replace RegExp("(#{@value.split(/\s+/).join('|')})", 'gi'),
+                 '<mark>$&</mark>'
+
+  replace: (text) =>
+    @awesomplete.replace(text)
+
+  @debounce: (func, milliseconds = 300, immediate = false) ->
+    timeout = null
+
+    (args...) ->
+      delayed = =>
+        func.apply(@, args) unless immediate
+        timeout = null
+
+      if timeout
+        clearTimeout(timeout)
+      else if immediate
+        func.apply(@, args)
+
+      timeout = setTimeout delayed, milliseconds
+
+  @addType: (name, func) =>
+    @types[name] = func
+
+  @addTypes: (types) ->
+    @addType(name, func) for own name, func of types

data/vendor/assets/javascripts/fustrate/components/disclosure.coffee

@@ -0,0 +1,12 @@
+class Fustrate.Components.Disclosure extends Fustrate.Components.Base
+  @initialize: ->
+    $('body').on 'click', '.disclosure-title', (event) ->
+      disclosure = $(event.currentTarget).closest('.disclosure')
+
+      isOpen = disclosure.hasClass 'open'
+
+      disclosure
+        .toggleClass 'open'
+        .trigger "#{if isOpen then 'closed' else 'opened'}.disclosure"
+
+      false

data/vendor/assets/javascripts/fustrate/components/drop_zone.coffee

@@ -0,0 +1,9 @@
+class Fustrate.Components.DropZone extends Fustrate.Components.Base
+  constructor: (target, callback) ->
+    $(target)
+      .off '.drop_zone'
+      .on 'dragover.drop_zone dragenter.drop_zone', false
+      .on 'drop.drop_zone', (event) ->
+        callback event.originalEvent.dataTransfer.files
+
+        false

data/vendor/assets/javascripts/fustrate/components/dropdown.coffee

@@ -0,0 +1,48 @@
+class Fustrate.Components.Dropdown extends Fustrate.Components.Base
+  @locked: false
+
+  @initialize: ->
+    @body = $ 'body'
+
+    @body.on 'click.dropdowns', '.has-dropdown', @open
+
+  @open: (event) =>
+    @hide()
+
+    button = $ event.currentTarget
+    dropdown = $ '+ .dropdown', button
+
+    @locked = true
+
+    if button.position().top > (@body.height() / 2)
+      top = button.position().top - dropdown.outerHeight() - 2
+    else
+      top = button.position().top + button.outerHeight() + 2
+
+    if button.position().left > (@body.width() / 2)
+      left = 'inherit'
+      right = @body.width() - button.position().left - button.outerWidth()
+    else
+      right = 'inherit'
+      left = button.position().left
+
+    @showDropdown dropdown, left: left, top: top, right: right
+
+    false
+
+  @showDropdown: (dropdown, css) ->
+    dropdown
+      .addClass 'visible'
+      .hide()
+      .css css
+      .fadeIn 200, =>
+        @locked = false
+
+        @body.one 'click', @hide
+
+  @hide: =>
+    return if @locked
+
+    $('.dropdown.visible')
+      .removeClass 'visible'
+      .fadeOut 200

data/vendor/assets/javascripts/fustrate/components/file_picker.coffee

@@ -0,0 +1,10 @@
+class Fustrate.Components.FilePicker extends Fustrate.Components.Base
+  constructor: (callback) ->
+    input = $ '<input type="file">'
+
+    input
+      .change ->
+        callback input[0].files
+
+        input.remove()
+      .click()

data/vendor/assets/javascripts/fustrate/components/flash.coffee

@@ -0,0 +1,31 @@
+class Fustrate.Components.Flash extends Fustrate.Components.Base
+  @fadeInSpeed: 500
+  @fadeOutSpeed: 2000
+  @displayTime: 4000
+
+  constructor: (message, {type, icon} = {}) ->
+    message = "#{Fustrate.icon(icon)} #{message}" if icon
+
+    bar = $ "<div class=\"flash #{type ? 'info'}\"></div>"
+      .html message
+      .hide()
+      .prependTo $('#flashes')
+      .fadeIn @constructor.fadeInSpeed
+      .delay @constructor.displayTime
+      .fadeOut @constructor.fadeOutSpeed, ->
+        bar.remove()
+
+  @initialize: ->
+    $('body').append '<div id="flashes">'
+
+  class @Error
+    constructor: (message, {icon} = {}) ->
+      new Fustrate.Components.Flash message, type: 'error', icon: icon
+
+  class @Info
+    constructor: (message, {icon} = {}) ->
+      new Fustrate.Components.Flash message, type: 'info', icon: icon
+
+  class @Success
+    constructor: (message, {icon} = {}) ->
+      new Fustrate.Components.Flash message, type: 'success', icon: icon

data/vendor/assets/javascripts/fustrate/components/modal.coffee

@@ -0,0 +1,213 @@
+class Fustrate.Components.Modal extends Fustrate.Components.Base
+  @fadeSpeed: 250
+
+  @settings:
+    closeOnBackgroundClick: true
+    distanceFromTop: 25
+    appendTo: 'body'
+    css:
+      open:
+        opacity: 0
+        visibility: 'visible'
+        display: 'block'
+      close:
+        opacity: 1
+        visibility: 'hidden'
+        display: 'none'
+    _cachedHeight: undefined
+
+  constructor: ({title, content, size, settings}) ->
+    @modal = @constructor.createModal size: size
+    @settings = $.extend true, @constructor.settings, (settings ? {})
+    @settings.previousModal = $()
+
+    @setTitle title
+    @setContent content
+
+    @_reloadUIElements()
+    @addEventListeners()
+    @initialize()
+
+    super
+
+  initialize: ->
+
+  _reloadUIElements: =>
+    @fields = {}
+    @buttons = {}
+
+    $('[data-field]', @modal).each (index, element) =>
+      field = $ element
+      @fields[field.data('field')] = field
+
+    $('[data-button]', @modal).each (index, element) =>
+      button = $ element
+      @buttons[button.data('button')] = button
+
+  setTitle: (title) =>
+    $('.modal-title span', @modal).html title
+
+  setContent: (content) =>
+    $('.modal-content', @modal).html content
+
+    @settings._cachedHeight = undefined
+
+    @_reloadUIElements()
+
+  addEventListeners: =>
+    @modal
+      .off '.modal'
+      .on 'close.modal', @close
+      .on 'open.modal', @open
+      .on 'hide.modal', @hide
+      .on 'opened.modal', @focusFirstInput
+      .on 'click.modal', '.modal-close', @constructor.closeButtonClicked
+
+    # TODO: Re-enable when modals are fully converted
+    #   .off '.modal'
+    $(document).on 'click.modal touchstart.modal',
+                   '.modal-overlay',
+                   @constructor.backgroundClicked
+
+  focusFirstInput: =>
+    # Focus requires a slight physical scroll on iOS 8.4
+    return true if /iPad|iPhone|iPod/g.test navigator.userAgent
+
+    $('input, select', @modal)
+      .filter(':visible:not(:disabled):not([readonly])')
+      .first()
+      .focus()
+
+  open: =>
+    return if @modal.hasClass('locked') || @modal.hasClass('open')
+
+    @modal.addClass('locked')
+
+    # If there is currently a modal being shown, store it and re-open it when
+    # this modal closes.
+    @settings.previousModal = $('.modal.open')
+
+    # These events only matter when the modal is visible
+    $('body')
+      .off 'keyup.modal'
+      .on 'keyup.modal', (e) =>
+        return if @modal.hasClass('locked') || e.which != 27
+
+        @close()
+
+    @modal.trigger 'opening.modal'
+
+    @_cacheHeight() if typeof @settings._cachedHeight == 'undefined'
+
+    if @settings.previousModal.length
+      @settings.previousModal.trigger('hide.modal')
+    else
+      # There are no open modals - show the background overlay
+      @constructor.toggleBackground true
+
+    css = @settings.css.open
+    # css.top = parseInt @modal.css('top'), 10
+
+    css.top = $(window).scrollTop() - @settings._cachedHeight + 'px'
+
+    end_css =
+      top: $(window).scrollTop() + @settings.distanceFromTop + 'px',
+      opacity: 1
+
+    setTimeout (=>
+      @modal
+        .css css
+        .addClass('open')
+        .animate end_css, 250, 'linear', =>
+          @modal.removeClass('locked').trigger('opened.modal')
+    ), 125
+
+  close: (openPrevious = true) =>
+    return if @modal.hasClass('locked') || !@modal.hasClass('open')
+
+    @modal.addClass 'locked'
+
+    $('body').off 'keyup.modal'
+
+    unless @settings.previousModal.length && openPrevious
+      @constructor.toggleBackground(false)
+
+    end_css =
+      top: - $(window).scrollTop() - @settings._cachedHeight + 'px',
+      opacity: 0
+
+    setTimeout (=>
+      @modal
+        .animate end_css, 250, 'linear', =>
+          @modal
+            .css @settings.css.close
+            .removeClass 'locked'
+            .trigger 'closed.modal'
+
+          if openPrevious
+            @openPreviousModal()
+          else
+            @settings.previousModal = $()
+
+        .removeClass('open')
+    ), 125
+
+  # Just hide the modal immediately and don't bother with an overlay
+  hide: =>
+    @modal.removeClass('open locked').css @settings.css.close
+
+  openPreviousModal: =>
+    @settings.previousModal.trigger 'open.modal'
+
+    @settings.previousModal = $()
+
+  _cacheHeight: =>
+    @settings._cachedHeight = @modal.show().height()
+
+    @modal.hide()
+
+  @createModal: ({size}) ->
+    $("""
+      <div class="modal #{size ? 'tiny'}">
+        <div class="modal-title">
+          <span></span>
+          <a href="#" class="modal-close">&#215;</a>
+        </div>
+        <div class="modal-content"></div>
+      </div>""").appendTo(@settings.appendTo)
+
+  @toggleBackground: (visible = true) =>
+    @overlay = $ '<div class="modal-overlay">' unless @overlay
+
+    if visible
+      return if @overlay.is(':visible')
+
+      @overlay
+        .hide()
+        .appendTo('body')
+        .fadeIn @fadeSpeed
+    else
+      @overlay
+        .fadeOut @fadeSpeed, ->
+          $(@).detach()
+
+  @backgroundClicked: ->
+    modal = $ '.modal.open'
+
+    return if !modal || modal.hasClass('locked')
+
+    # Don't continue to close if we're not supposed to
+    return unless Fustrate.Components.Modal.settings.closeOnBackgroundClick
+
+    modal.trigger 'close.modal'
+
+    false
+
+  @closeButtonClicked: ->
+    modal = $ '.modal.open'
+
+    return if !modal || modal.hasClass('locked')
+
+    modal.trigger 'close.modal'
+
+    false