cartilage 0.1.1

data/app/assets/javascripts/cartilage/views/loading_indicator_view.js.coffee

@@ -0,0 +1,147 @@
+#
+# Loading Indicator View
+#
+# Manages the display of a canvas-based spinning loading indicator.
+#
+
+class window.Cartilage.Views.LoadingIndicatorView extends Cartilage.View
+
+  # Properties ---------------------------------------------------------------
+
+  #
+  # The number of bars that should be drawn in the spinner. Defaults to 10.
+  #
+  @property "barCount", default: 10
+
+  #
+  # The width and height of the bars. Defaults to `{ width: 4, height: 12 }`.
+  #
+  @property "barSize", default: { width: 4, height: 12 }
+
+  #
+  # The color of the bars.
+  #
+  @property "barColor", default: { red: 85, green: 85, blue: 85 }
+
+  #
+  # The x and y coordinates for the center point of the loading indicator
+  # within the canvas. This should typically be the canvas width and height
+  # divided by 2.
+  #
+  @property "centerPosition", default: { x: 48, y: 48 }
+
+  #
+  # The inner radius of the spinning indicator. Each bar will be drawn from
+  # this point, outward.
+  #
+  @property "innerRadius", default: 10
+
+  #
+  # Whether or not the loading indicator is currently animating.
+  #
+  @property "isAnimating", access: READONLY, default: no
+
+  # Internal Properties ------------------------------------------------------
+
+  # --------------------------------------------------------------------------
+
+  initialize: (options = {}) ->
+
+    # Initialize the View
+    super(options)
+
+    # Initialize Canvas Element
+    ($ @el).html @_canvasElement = @make "canvas",
+      width: 96,
+      height: 96
+
+    # Initialize Canvas Context
+    @_canvasContext = @_canvasElement.getContext("2d")
+
+    # Observe for view events so that we can start or stop the indicator
+    # when appropriate.
+    @observe @, "willPresent", @start
+    @observe @, "removed", @stop
+
+  prepare: ->
+
+    # Prepare the View
+    super()
+
+    # Determine the bar color from CSS, if present
+    if color = ($ @el).css("color")
+      colors = color.split(',')
+      red    = parseInt(colors[0].substr(4, 3), 10)
+      green  = parseInt(colors[1], 10)
+      blue   = parseInt(colors[2], 10)
+      @barColor = { red: red, green: green, blue: blue }
+
+  #
+  # Starts the loading indicator animation.
+  #
+  start: =>
+    return if @isAnimating
+    @_isAnimating = true
+    @_animateNextFrame()
+    @isAnimating
+
+  #
+  # Stops drawing the loading indicator and clears its context state.
+  #
+  stop: ->
+    return unless @isAnimating
+    @_clearFrame(@_canvasContext)
+    @_isAnimating = false
+
+  cleanup: ->
+    @stop()
+    super()
+
+  #
+  # Draw a frame.
+  #
+  _draw: (context, offset) ->
+    @_clearFrame(context)
+    context.save()
+    context.translate(@centerPosition.x, @centerPosition.y)
+
+    for i in [0..@barCount]
+      currentBar = (offset + i) % @barCount
+      pos        = @_calculatePosition(currentBar)
+
+      context.save()
+      context.translate(pos.x, pos.y)
+      context.rotate(pos.angle)
+
+      @_drawBlock(@_canvasContext, i)
+
+      context.restore()
+
+    context.restore()
+
+  _drawBlock: (context, barNumber) ->
+    context.fillStyle = @._makeRGBA(@barColor.red, @barColor.green, @barColor.blue, (@barCount + 1 - barNumber) / (@barCount + 1))
+    context.fillRect(-@barSize.width / 2, 0, @barSize.width, @barSize.height)
+
+  _animateNextFrame: =>
+    return unless @isAnimating
+    @_currentOffset = if _.isUndefined(@_currentOffset) then 1 else (@_currentOffset + 1) % @barCount
+    @_draw(@_canvasContext, @_currentOffset)
+    _.delay @_animateNextFrame, 50
+
+  _clearFrame: (context) ->
+    context.clearRect(0, 0, @_canvasElement.clientWidth, @_canvasElement.clientHeight)
+
+  _calculateAngle: (barNumber) ->
+    2 * barNumber * Math.PI / @barCount
+
+  _calculatePosition: (barNumber) ->
+    angle = @_calculateAngle(barNumber)
+    {
+      y: (@innerRadius * Math.cos(-angle)),
+      x: (@innerRadius * Math.sin(-angle)),
+      angle: angle
+    }
+
+  _makeRGBA: ->
+    "rgba(#{arguments[0]}, #{arguments[1]}, #{arguments[2]}, #{arguments[3]})"

data/app/assets/javascripts/cartilage/views/matrix_view.js.coffee

@@ -0,0 +1,253 @@
+#
+# Matrix View
+#
+
+class window.Cartilage.Views.MatrixView extends Cartilage.Views.ListView
+
+  events: _.extend {
+    "mouseup": "onMouseUp",
+    "mousemove": "onMouseMove"
+    "mousedown": "onMouseDown"
+  }, Cartilage.Views.ListView.prototype.events
+
+  # Properties ---------------------------------------------------------------
+
+  #
+  # Whether or not drag-selection should be enabled.
+  #
+  @property "allowsDragSelection", default: no
+
+  # Internal Properties ------------------------------------------------------
+
+  # --------------------------------------------------------------------------
+
+  initialize: (options = {}) ->
+
+    # Initialize the List View
+    super(options)
+
+    # Add the Drag Selection Overlay
+    if @allowsDragSelection
+      ($ @el).append ($ "<div/>").addClass("overlay").hide()
+
+  #
+  # Handles click events for the entire list elements, including the list
+  # container.
+  #
+  onMouseDown: (event) =>
+    super(event)
+
+    # Only process mouse down events if drag-selection is allowed...
+    return unless @allowsDragSelection
+
+    # Only handle this event if the primary mouse button was pressed...
+    return unless event.button is 0
+
+    @isDragging = true
+    @originX = event.pageX - ($ @el).offset().left
+    @originY = event.pageY - ($ @el).offset().top
+    @originScrollTop = ($ @el).scrollTop()
+    @originScrollLeft = ($ @el).scrollLeft()
+    (@$ ".overlay").css {
+      "width": "0px",
+      "height": "0px",
+      "left": event.pageX,
+      "top": event.pageY
+    }
+
+  onMouseUp: (event) =>
+    @isDragging = false
+    (@$ ".overlay").hide().css {
+      width: "0px",
+      height: "0px"
+    }
+
+  onMouseMove: (event) =>
+    return unless @isDragging
+
+    overlayElement = (@$ ".overlay")
+    overlayElement.show()
+
+    left   = @originX
+    top    = @originY
+    width  = (event.pageX - ($ @el).offset().left) - @originX
+    height = (event.pageY - ($ @el).offset().top) - @originY
+
+    if width < 0
+      width = -width
+      left = (event.pageX - ($ @el).offset().left)
+    else
+      left = @originX
+
+    if height < 0
+      height = -height
+      top = (event.pageY - ($ @el).offset().top)
+    else
+      top = @originY
+
+    if ($ @el).scrollTop() == @originScrollTop
+      top = top + @originScrollTop
+    else if ($ @el).scrollTop() > @originScrollTop
+      top = top + @originScrollTop
+      height = height + (($ @el).scrollTop() - @originScrollTop)
+    else if ($ @el).scrollTop() < @originScrollTop
+      top = top + ($ @el).scrollTop()
+      height = height + (($ @el).scrollTop() + @originScrollTop)
+
+    overlayElement.css {
+      left: left + 'px',
+      top: top + 'px',
+      width: width + 'px',
+      height: height + 'px'
+    }
+
+    _.each (@$ "li"), (element) =>
+      if ($ element).overlapped left, (top - ($ @el).scrollTop()), width, height
+        @selectAnother element
+      else
+        @deselect element
+
+  #
+  # Handles key down events while the view is focused.
+  #
+  onKeyDown: (event) =>
+    keyCode = event.keyCode
+
+    # Arrow Keys
+    if keyCode in [ 37..40 ] or keyCode in [ 63232..63235 ]
+
+      event.preventDefault()
+
+      # Select the first item if there is no selection when the first key press
+      # occurs.
+      return @selectFirst() unless @selected.length > 0
+
+      # Route the key event to the proper handler based on the combination of
+      # keys that were pressed.
+      if event.shiftKey or event.metaKey
+        return @expandSelectionLeft  event if keyCode in [ 37, 63234 ]
+        return @expandSelectionUp    event if keyCode in [ 38, 63232 ]
+        return @expandSelectionRight event if keyCode in [ 39, 63235 ]
+        return @expandSelectionDown  event if keyCode in [ 40, 63233 ]
+      else
+        return @moveSelectionLeft    event if keyCode in [ 37, 63234 ]
+        return @moveSelectionUp      event if keyCode in [ 38, 63232 ]
+        return @moveSelectionRight   event if keyCode in [ 39, 63235 ]
+        return @moveSelectionDown    event if keyCode in [ 40, 63233 ]
+
+    # Command-A
+    if keyCode == 65 and event.metaKey
+      event.preventDefault()
+      return @selectAll()
+
+    # Enter Key
+    if keyCode == 13
+      event.preventDefault()
+      return @open event.target
+
+    # Delete Key
+    if keyCode in [ 8, 46 ]
+      event.preventDefault()
+      return @remove event.target
+
+    # Space Key
+    return event.preventDefault() if keyCode == 32
+
+  #
+  # Moves the selection to the left. If there is no selection or the selection
+  # is already at the first-most element, the first element will become or
+  # remain selected.
+  #
+  moveSelectionLeft: (e) =>
+    element = ($ @focusedElement).prev "li"
+    if element.length > 0
+      @clearSelection() and @select element
+      @focusedElement = ($ element).focus()
+
+  #
+  # Moves the selection to the right. If there is no selection the first
+  # item will be selected.
+  #
+  moveSelectionRight: (e) =>
+    element = ($ @focusedElement).next "li"
+    if element.length > 0
+      @clearSelection() and @select element
+      @focusedElement = ($ element).focus()
+
+  #
+  # Moves the selection to the item visually below the selected item. If there
+  # is no selection the first item will be selected.
+  #
+  moveSelectionDown: (e) ->
+    centerPoint    = ($ @focusedElement).centerPoint()
+    centerPoint.y += ($ @focusedElement).outerHeight(true)
+
+    elements = ($ @focusedElement).nextAll "li"
+    element  = elements.filter (idx, element) ->
+      ($ element).containsPoint(centerPoint)
+
+    if element.length > 0
+      @clearSelection() and @select element
+      @focusedElement = ($ element).focus()
+
+  #
+  # Moves the selection to the item visually above the selected item. If there
+  # is no selection the first item will be selected.
+  #
+  moveSelectionUp: (e) ->
+    centerPoint    = ($ @focusedElement).centerPoint()
+    centerPoint.y -= ($ @focusedElement).outerHeight(true)
+
+    elements = ($ @focusedElement).prevAll "li"
+    element  = elements.filter (idx, element) ->
+      ($ element).containsPoint(centerPoint)
+
+    if element.length > 0
+      @clearSelection() and @select element
+      @focusedElement = ($ element).focus()
+
+  #
+  # Expands the selection leftward from the currently selected element.
+  #
+  expandSelectionLeft: (e) ->
+    element = ($ @focusedElement).prev "li"
+    if element.length > 0
+      @selectAnother element
+      @focusedElement = ($ element).focus()
+
+  #
+  # Expands the selection rightward from the currently selected element.
+  #
+  expandSelectionRight: (e) ->
+    element = ($ @focusedElement).next "li"
+    if element.length > 0
+      @selectAnother element
+      @focusedElement = ($ element).focus()
+
+  #
+  # Expands the selection downward from the currently selected element.
+  #
+  expandSelectionDown: (e) ->
+    centerPoint    = ($ @focusedElement).centerPoint()
+    centerPoint.y += ($ @focusedElement).outerHeight(true)
+
+    elements = ($ @focusedElement).nextAll "li"
+    element  = elements.filter (idx, element) ->
+      ($ element).containsPoint(centerPoint)
+
+    @selectAnother element if element.length > 0
+    @focusedElement = ($ element).focus()
+
+  #
+  # Expands the selection upward from the currently selected element.
+  #
+  expandSelectionUp: (e) ->
+    centerPoint    = ($ @focusedElement).centerPoint()
+    centerPoint.y -= ($ @focusedElement).outerHeight(true)
+
+    elements = ($ @focusedElement).prevAll "li"
+    element  = elements.filter (idx, element) ->
+      ($ element).containsPoint(centerPoint)
+
+    @selectAnother element if element.length > 0
+    @focusedElement = ($ element).focus()

data/app/assets/javascripts/cartilage/views/matrix_view_item.js.coffee

@@ -0,0 +1,5 @@
+#
+# Matrix View Item
+#
+
+class window.Cartilage.Views.MatrixViewItem extends Cartilage.Views.ListViewItem

data/app/assets/javascripts/cartilage/views/modal_view.js.coffee

@@ -0,0 +1,26 @@
+#
+# Modal View
+#
+# This is a thin wrapper around Bootstrap's Modal plugin that allows you
+# to contain your modal view logic in its own class.
+#
+
+class window.Cartilage.Views.ModalView extends Cartilage.View
+
+  className: "modal fade"
+
+  render: ->
+    ($ @el).html @template { model: @model }
+    @
+
+  show: ->
+    ($ document.body).append @render().el
+    ($ @el).modal('show')
+    ($ @el).on 'hidden', @cleanup
+
+  hide: =>
+    ($ @el).modal('hide')
+
+  cleanup: =>
+    ($ @el).off 'hidden'
+    super()

data/app/assets/javascripts/cartilage/views/popover_view.js.coffee

@@ -0,0 +1,212 @@
+#
+# Popover View
+#
+
+class window.Cartilage.Views.PopoverView extends Cartilage.View
+
+  # Properties ---------------------------------------------------------------
+
+  #
+  # The view that the popover instance is attached to. This is used for
+  # calculating where the popover should be displayed.
+  #
+  @property "attachedView"
+
+  #
+  # Where the popover should be positioned relative to the attached view.
+  # Valid options are top, bottom, left and right.
+  #
+  @property "position", default: "top"
+
+  # Internal Properties ------------------------------------------------------
+
+  # TODO Make this @contentView, an actual read-only view
+  _contentElement: null
+  _triangleElement: null
+
+  # --------------------------------------------------------------------------
+
+  initialize: (options = {}) ->
+
+    # Initialize the View
+    super(options)
+
+    # Initialize the Triange Element
+    ($ @el).append @_triangleElement = @make "div",
+      class: "triangle"
+
+    # Initialize the Content Element
+    # TODO Should be an instance of View...
+    ($ @el).append @_contentElement = @make "div",
+      class: "content-view"
+
+  prepare: ->
+
+    # Prepare the View
+    super()
+
+    # Calculate Position
+    @_calculatePosition()
+
+  _calculatePosition: () ->
+    return unless @attachedElement
+
+    @resizeToFitContents()
+
+    offset = ($ @attachedElement).offset()
+    width  = ($ @attachedElement).outerWidth()
+    height = ($ @attachedElement).outerHeight()
+    top    = null
+    left   = null
+
+    switch @position
+
+      when "top"
+        top = offset.top - ($ @el).outerHeight(true)
+        left = (offset.left + (width / 2)) - (($ @el).outerWidth(true) / 2)
+        if offset.top - ($ @el).outerHeight(true) < 0
+          top = offset.top + height
+          @position = "bottom"
+
+      when "bottom"
+        top = offset.top + height
+        left = (offset.left + (width / 2)) - (($ @el).outerWidth(true) / 2)
+        maxHeight = ($ document).height()
+        if offset.top + height + ($ @el).outerHeight(true) > maxHeight
+          top = offset.top - ($ @el).outerHeight(true)
+          @position = "top"
+
+      when "left"
+        top = (offset.top + (height / 2)) - (($ @el).outerHeight(true) / 2)
+        left = offset.left - ($ @el).outerWidth(true)
+        if offset.left - ($ @el).outerWidth(true) < 0
+          left = offset.left + width
+          @position = "right"
+
+      when "right"
+        top = (offset.top + (height / 2)) - (($ @el).outerHeight(true) / 2)
+        left = offset.left + width
+        maxWidth = ($ document).width()
+        if offset.left + width + ($ @el).outerWidth(true) > maxWidth
+          left = offset.left - ($ @el).outerWidth(true)
+          @position = "left"
+
+    ($ @el).removeClass("top")
+    ($ @el).removeClass("right")
+    ($ @el).removeClass("bottom")
+    ($ @el).removeClass("left")
+    ($ @el).addClass(@position)
+
+    # Adjust for Screen
+    # adjustment = 0
+    # marginLeft = (($ @triangleElement).width() / 2) * -1
+    #
+    # if (left < 0)
+    #   adjustment = (left * -1) * -1
+    #   left = 0
+    #
+    # else if left > (($ document).width() - ($ @el).outerWidth(true))
+    #   adjustment = left - (($ document).width() - ($ @el).outerWidth(true))
+    #   left = (($ document).width() - ($ @el).outerWidth(true))
+    #
+    # console.log "Adjusting triangle position by " + (marginLeft + adjustment) + " pixels"
+    #
+    # ($ @triangleElement).css {
+    #   marginLeft: "#{marginLeft + adjustment}px"
+    # }
+
+    ($ @el).css {
+      top: "#{top}px",
+      left: "#{left}px"
+    }
+
+  presentRelativeToElement: (element, position) ->
+    @attachedElement = element
+    @position = (position ?= "top")
+    ($ @el).css { visibility: "hidden" }
+    ($ @_contentElement).children().css("display", "block")
+    ($ document.body).append @render().el
+    @_calculatePosition()
+    ($ @el).hide().css { visibility: "visible" }
+    ($ @el).fadeIn()
+
+    ($ document).unbind("click", @handleDocumentClickEvent).click @handleDocumentClickEvent
+
+  resizeToFitContents: ->
+    element = ($ @_contentElement).children()[0]
+    width = ($ element).outerWidth()
+    height = ($ element).outerHeight()
+
+    ($ @_contentElement).css {
+      width: "#{width}px",
+      height: "#{height}px"
+    }
+
+    ($ @el).css {
+      width: "#{width}px",
+      height: "#{height}px"
+    }
+
+  handleDocumentClickEvent: (event) =>
+
+    return if event.target == @attachedElement
+
+    ($ document).unbind("click", @handleDocumentClickEvent)
+
+    ($ @el).fadeOut "fast", =>
+      ($ @el).remove()
+
+#   // Event Handlers ----------------------------------------------------------
+#
+#   _startObserving: function($super)
+#   {
+#     $super();
+#
+#     // Document Click Events
+#     if (this.handleDocumentClickEvent && !this._handleDocumentClickEventListener)
+#     {
+#       $L.debug("Observing for Document Click Events", this);
+#       this._handleDocumentClickEventListener = this.handleDocumentClickEvent.bindAsEventListener(this);
+#       Event.observe(document, "click", this._handleDocumentClickEventListener);
+#     }
+#   },
+#
+#   _stopObserving: function($super)
+#   {
+#     $super();
+#
+#     // Document Click Events
+#     if (this._handleDocumentClickEventListener)
+#     {
+#       Event.stopObserving(document, "click", this._handleDocumentClickEventListener);
+#       this._handleDocumentClickEventListener = false;
+#     }
+#
+#     // Handle Scroll Notifications
+#     this.addObserver(this.handleViewDidScrollNotification, "ViewDidScrollNotification");
+#   },
+#
+#   handleDocumentClickEvent: function(event)
+#   {
+#     var element = event.element();
+#
+#     // Ignore Clicks in PopoverView
+#     if (element == this.get("element") || (element != this.get("element") && element.descendantOf(this.get("element"))))
+#       return;
+#
+#     // Ignore clicks in Attached View
+#     if (this.get("attachedView") && (element == this.get("attachedView.element") || (element != this.get("attachedView.element") && element.descendantOf(this.get("attachedView.element")))))
+#       return;
+#
+#     $L.info("handleDocumentClickEvent", this);
+#
+#     this.removeFromSuperviewAnimated();
+#   },
+#
+#   handleViewDidScrollNotification: function(view)
+#   {
+#     if (this.get("superview"))
+#       this.calculatePosition();
+#   }
+#
+# });