cartilage 0.1.1

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

@@ -0,0 +1,69 @@
+#
+# Source List View
+#
+# As the name implies, the source list view is a subclass of ListView that
+# attempts to emulate the common source list master/detail pattern. It applies
+# some default styling to the list view and allows for header and footer views
+# to be used.
+#
+
+#= require cartilage/views/source_list_view_item
+
+class window.Cartilage.Views.SourceListView extends Cartilage.Views.ListView
+
+  # Properties ---------------------------------------------------------------
+
+  #
+  # If defined, displays the specified view above the list view. Dimensions of
+  # the view are automatically determined, so be sure that the passed view has
+  # height or is relatively positioned so that height may be determined.
+  #
+  @property "headerView"
+
+  #
+  # If defined, displays the specified view below the list view. Dimensions of
+  # the view are automatically determined, so be sure that the passed view has
+  # height or is relatively positioned so that height may be determined.
+  #
+  @property "footerView"
+
+  #
+  # Override the default itemView to SourceListViewItem.
+  #
+  @property "itemView", default: Cartilage.Views.SourceListViewItem
+
+  # --------------------------------------------------------------------------
+
+  initialize: (options = {}) ->
+
+    # Initialize the List View
+    super(options)
+
+    # Initialize Header View Container
+    if @headerView
+      ($ @el).append @_headerViewContainer = @make "div",
+        class: "header-view"
+
+    # Initialize Footer View Container
+    if @footerView
+      ($ @el).append @_footerViewContainer = @make "div",
+        class: "footer-view"
+
+  prepare: ->
+
+    # Prepare the List View
+    super()
+
+    # Add the header view as a subview and reposition the list view to account
+    # for the height of the header view.
+    if @headerView
+      @addSubview @headerView, @_headerViewContainer
+      ($ @_listViewItemsContainer).css("top", ($ @headerView.el).outerHeight())
+      ($ @_headerViewContainer).css("height", ($ @headerView.el).outerHeight())
+
+    # Add the footer view as a subview and reposition the list view to account
+    # for the height of the footer view.
+    if @footerView
+      @addSubview @footerView, @_footerViewContainer
+      ($ @_listViewItemsContainer).css("bottom", ($ @footerView.el).outerHeight())
+      ($ @_footerViewContainer).css("height", ($ @footerView.el).outerHeight())

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

@@ -0,0 +1,5 @@
+#
+# Source List View Item
+#
+
+class window.Cartilage.Views.SourceListViewItem extends Cartilage.Views.ListViewItem

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

@@ -0,0 +1,175 @@
+#
+# Split View
+#
+# Manages a split view layout with either two side-by-side views or views
+# stacked on top and bottom.
+#
+
+class window.Cartilage.Views.SplitView extends Cartilage.View
+
+  # Properties ---------------------------------------------------------------
+
+  #
+  # The first view in split view. This is the view on the left when the
+  # orientation is set to vertical or the view on the top when set to
+  # horizontal.
+  #
+  @property "firstView", default: null
+
+  #
+  # The second view in split view. This is the view on the right when the
+  # orientation is set to vertical or the view on the bottom when set to
+  # horizontal.
+  #
+  @property "secondView", default: null
+
+  #
+  # The orientation of the split view, either "horizontal" or "vertical".
+  # Defaults to "vertical".
+  #
+  @property "orientation", default: "vertical"
+
+  #
+  # Whether or not the split view is resizable. Defaults to true.
+  #
+  @property "isResizable", default: yes
+
+  # Internal Properties ------------------------------------------------------
+
+  # Events -------------------------------------------------------------------
+
+  events:
+    "mousedown .drag-handle": "onMouseDown"
+    "mouseup": "onMouseUp",
+    "mousemove": "onMouseMove"
+
+  # --------------------------------------------------------------------------
+
+  #
+  # Initializes a new instance of the split view. Pass firstView and
+  # secondView as options, at a minimum, to specify the view setup.
+  #
+  initialize: (options = {}) ->
+
+    # Initialize View Containers
+    ($ @el).append @_firstViewContainer = @make "div",
+      class: "first-view"
+    ($ @el).append @_secondViewContainer = @make "div",
+      class: "second-view"
+
+    # Initialize Drag Handle
+    if @isResizable
+      ($ @el).append @dragElement = @make "div",
+        class: "drag-handle"
+
+    # Set Orientation
+    ($ @el).addClass @orientation
+
+    # Observe for window resize events and re-render the view when it occurs...
+    ($ window).on "resize", @handleWindowResize
+
+    super(options)
+
+  prepare: ->
+
+    super()
+
+    @addSubview @firstView, @_firstViewContainer
+    @addSubview @secondView, @_secondViewContainer
+
+    if @orientation is "vertical"
+      @position(($ @_firstViewContainer).width())
+    else
+      @position(0)
+
+  cleanup: ->
+    ($ window).off "resize", @handleWindowResize
+    @firstView.cleanup() if @firstView and @firstView.cleanup
+    @secondView.cleanup() if @secondView and @secondView.cleanup
+    super()
+
+  #
+  # Sets the position of the divider that separates the two views. In the case
+  # of a horizontal split view, this is the height of the secondView. For
+  # vertical split views, this is the width of the firstView.
+  #
+  position: (newPosition, options = {}) =>
+    return @_currentPosition unless newPosition?
+
+    if @orientation is "vertical"
+      minWidth = parseInt ($ @_firstViewContainer).css("min-width")
+      maxWidth = parseInt ($ @_firstViewContainer).css("max-width")
+
+      if newPosition < minWidth
+        newPosition = minWidth
+      else if newPosition > maxWidth
+        newPosition = maxWidth
+
+      if options["animated"]
+        ($ @_firstViewContainer).css { left: '' }
+        ($ @_firstViewContainer).animate { width: newPosition + 'px' }, 250
+        ($ @_secondViewContainer).css { width: '' }
+        ($ @_secondViewContainer).animate { left: newPosition + 'px' }, 250
+      else
+        ($ @_firstViewContainer).css { width: newPosition + 'px', left: '' }
+        ($ @_secondViewContainer).css { left: newPosition + 'px', width: '' }
+
+      ($ @dragElement).css("left", (newPosition - ($ @dragElement).width() / 2) + "px")
+
+    else
+      minHeight = parseInt ($ @_secondViewContainer).css("min-height")
+      maxHeight = parseInt ($ @_secondViewContainer).css("max-height")
+
+      if newPosition < minHeight
+        newPosition = minHeight
+      else if newPosition > maxHeight
+        newPosition = maxHeight
+
+      bottom = ($ @el).height() - newPosition
+
+      if options["animated"]
+        ($ @_firstViewContainer).css { bottom: '' }
+        ($ @_firstViewContainer).animate { height: bottom + 'px' }, 250
+        ($ @_secondViewContainer).css { height: '' }
+        ($ @_secondViewContainer).animate { top: bottom + "px" }, 250
+      else
+        ($ @_firstViewContainer).css { height: bottom + 'px', bottom: '' }
+        ($ @_secondViewContainer).css { top: bottom + 'px', height: newPosition + 'px' }
+
+      ($ @dragElement).css("top", (newPosition - ($ @dragElement).height() / 2) + "px")
+
+    @_currentPosition = newPosition
+    @trigger("resize")
+
+  handleWindowResize: (event) =>
+    @position(@_currentPosition) if @_currentPosition?
+
+  setFirstView: (view) ->
+    @firstView.removeFromSuperview() if @firstView
+    @firstView = view
+    @addSubview view, @_firstViewContainer
+
+  setSecondView: (view) ->
+    @secondView.removeFromSuperview() if @secondView
+    @secondView = view
+    @addSubview view, @_secondViewContainer
+
+  onMouseDown: (event) =>
+    return unless @isResizable
+    @isResizing = true
+
+  onMouseUp: (event) =>
+    return unless @isResizable
+    @isResizing = false
+
+  onMouseMove: (event) =>
+    return unless @isResizable and @isResizing
+
+    event.preventDefault()
+
+    if @orientation is "vertical"
+      offset = ($ @el).offset().left
+      @position((event.pageX - (($ @dragElement).width() / 2)) - offset)
+    else
+      offset = ($ @el).offset().top
+      @position((event.pageY - (($ @dragElement).height() / 2)) - offset)

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

@@ -0,0 +1,5 @@
+#
+# Usage Bar View
+#
+
+class window.Cartilage.Views.UsageBarView extends Cartilage.Views.BarView

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

@@ -0,0 +1,232 @@
+#
+# Cartilage "Base" View
+#
+
+class window.Cartilage.View extends Backbone.View
+
+  # Properties ---------------------------------------------------------------
+
+  #
+  # The superview that considers this view to be a subview. This will be set
+  # automatically on the view that has been added by using addSubview.
+  #
+  @property "superview", access: READONLY
+
+  #
+  # An array containing a reference to each of the views subviews. Views that
+  # are added as subviews (with addSubview) will be added here automatically.
+  #
+  @property "subviews", access: READONLY, default: []
+
+  #
+  # A reference to all observers currently assigned to this view. This is
+  # needed for cleanup.
+  #
+  @property "observers", access: READONLY, default: []
+
+  # --------------------------------------------------------------------------
+
+  #
+  # Attempt to determine the name of the template (which, by default, should
+  # be the underscored-version of a class name in the templates folder (i.e.
+  # for MyAwesomeView, the template my_awesome_view.jst.ejs should exist in
+  # templates).
+  #
+  template: (options) ->
+    try
+      if JST[_.underscore(@constructor.name)]
+        JST[_.underscore(@constructor.name)](options)
+      else
+        if console
+          console.info "Missing template #{_.underscore(@constructor.name)}.jst.[eco|ejs] for #{@constructor.name}"
+    catch error
+      if console
+        console.error "Template error in #{_.underscore(@constructor.name)}.jst.[eco|ejs]: \"#{error.message}\"", error
+
+  #
+  # Override the standard constructor so that we can extend each view with any
+  # of the options passed, instead of simply @collection, @model and others
+  # that are baked into Backbone.js.
+  #
+  constructor: (options = {}) ->
+    _.extend(@, options)
+    Backbone.View.apply(@, arguments)
+
+  initialize: (options = {}) ->
+    _.extend(@, options)
+
+  prepare: ->
+    # Empty implementation
+
+  render: ->
+
+    # Determine CSS class names from the view class hierarchy and any other
+    # custom classes defined by a subclass.
+    ($ @el).addClass @determineClassName()
+
+    # Automatically assign collections and models to the template, as their
+    # respective class names.
+    @templateVariables ?= {}
+    if @collection
+      @templateVariables[_.camelize(@collection.constructor.name)] = @collection
+    if @model
+      @templateVariables[_.camelize(@model.constructor.name)] = @model
+    ($ @el).html @template(@templateVariables)
+
+    @
+
+  cleanup: ->
+    @off()
+    @removeObservers()
+    $(@el).remove()
+
+  observe: (source, event, callback) ->
+    source.on(event, callback, @)
+    @_observers.push { source: source, event: event, callback: callback }
+
+  removeObservers: ->
+    _.each @observers, (observer) ->
+      observer.source.off(observer.event, observer.callback, @)
+    @_observers = []
+
+  #
+  # Adds the provided view instance as a subclass of the current view. If a
+  # container element is specified, it will be added within that element of
+  # the view's element.
+  #
+  addSubview: (view, container = @el, animated = false) ->
+    # Don't allow nil objects to be passed...
+    return unless view
+
+    # Set a reference to this view as the added view's superview
+    view._superview = @
+
+    # Maintain a reference to the added subview for later cleanup, or other
+    # operations
+    @storeSubview(view)
+
+    # Render the View, if necessary
+    unless view.isRendered
+      view.render()
+      view.isRendered = true
+      view.trigger("rendered")
+
+    # Make the View's Element invisible
+    ($ view.el).css("visibility", "hidden").show()
+
+    # Add the View's Element to the DOM
+    @insertSubviewElement(view, container)
+
+    # Prepare the View for display, if necessary
+    unless view.isPrepared
+      view.prepare() if view.prepare
+      view.isPrepared = true
+      view.trigger("prepared")
+
+    # Trigger the "willPresent" event so that views have a chance to
+    # manipulate their state before being presented to the user
+    view.trigger("willPresent")
+
+    # Make the View's Element visible and trigger the "presented" event so
+    # views have a chance to manipulate their state after being presented
+    # to the user
+    if animated
+      ($ view.el).hide()
+      ($ view.el).css("visibility", "visible")
+      ($ view.el).fadeIn 750, -> view.trigger("presented")
+
+    else
+      ($ view.el).css("visibility", "visible")
+      view.trigger("presented")
+
+  addSubviewAnimated: (view, container = @el) ->
+    @addSubview(view, container, true)
+
+  insertSubviewElement: (view, container) ->
+    ($ container).append(view.el)
+
+  storeSubview: (view) ->
+    @_subviews.push(view)
+
+  #
+  # Removes the view from its superview, if it currently belongs to another
+  # view as a subview.
+  #
+  removeFromSuperview: (animated = false) ->
+
+    # Trigger the "willRemove" event so that views have a chance to
+    # manipulate their state before being removed from view
+    @trigger("willRemove")
+
+    # Remove observers for all DOM events
+    @off()
+
+    # Remove all other event observers
+    @removeObservers()
+
+    # Remove the View's Element from the DOM and trigger the "removed" event
+    # so views have a chance to manipulate their state after being removed
+    if animated
+      ($ @el).fadeOut 750, =>
+        @trigger("removed")
+        ($ @el).detach()
+
+    else
+      ($ @el).hide()
+      @trigger("removed")
+      ($ @el).detach()
+
+    # Remove the reference to this view from its superview's subviews
+    # array
+    _.remove @_superview._subviews, @
+
+    # Clear the superview reference
+    @_superview = null
+
+  removeFromSuperviewAnimated: ->
+    @removeFromSuperview(true)
+
+  #
+  # Attempts to determine the class name(s) of the view by iterating and
+  # assigning the dasherized name of each of the class in the hierarchy.
+  #
+  determineClassName: ->
+    classNames = [ _.dasherize(@constructor.name) ]
+
+    # Get class names for each view in the class heirarchy
+    # TODO Update this to use @superclasses()
+    superklass = @constructor.__super__
+    while superklass
+      classNames.push _.dasherize(superklass.constructor.name)
+      superklass = superklass.constructor.__super__
+
+    # Reverse the order of the class names
+    classNames = classNames.reverse()
+
+    # Merge in custom class name(s)
+    if _.isFunction(@className)
+      classNames.push @className().split(" ")
+    else if @className
+      classNames.push @className.split(" ")
+
+    # Flatten the Array
+    classNames = _.flatten(classNames)
+
+    # Compact the Array to remove any empty values
+    classNames = _.compact(classNames)
+
+    # Remove any duplicate class names
+    classNames = _.unique(classNames)
+
+    # Convert the class names array to a string
+    classNames.join(" ")
+
+  #
+  # Returns an array containing each of the superclasses that this class
+  # derives from.
+  #
+  @superclasses: ->
+    classes = [ superklass = @.__super__ ]
+    while superklass = superklass.constructor.__super__
+      classes.push superklass
+    classes.reverse()

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

@@ -0,0 +1,18 @@
+#
+#= require_tree ./extensions
+#
+#= require jquery-points
+#
+#= require cartilage/core
+#
+#= require cartilage/models/model
+#= require cartilage/views/view
+#
+#= require_tree ./cartilage/models
+#= require_tree ./cartilage/collections
+#= require_tree ./cartilage/views
+#
+#= require cartilage/application
+#
+#= require_self
+#

data/app/assets/javascripts/extensions/console.js.coffee

@@ -0,0 +1,9 @@
+# Add a no-op version of the console object so calls to
+# console won't raise errors in IE < 10.
+if typeof(console) == "undefined"
+  window.console = 
+    log: () ->
+    debug: () ->
+    info: () ->
+    warn: () ->
+    error: () ->

data/app/assets/javascripts/extensions/constructor_name.js.coffee

@@ -0,0 +1,10 @@
+# Hack in support for constructor.name for IE >= 9
+# http://matt.scharley.me/2012/03/09/monkey-patch-name-ie.html
+# http://stackoverflow.com/questions/332422/how-do-i-get-the-name-of-an-objects-type-in-javascript
+if Function.prototype.name == undefined and Object.defineProperty != undefined
+  Object.defineProperty( Function.prototype,'name',
+    get: () ->
+      funcNameRegex = /function\s([^(]{1,})\(/
+      results = (funcNameRegex).exec(@toString())
+      return if results and results.length > 1 then results[1].trim() else ""
+    set: (value) -> {} )

data/app/assets/javascripts/extensions/properties.js.coffee

@@ -0,0 +1,45 @@
+
+@READONLY  = 1
+@READWRITE = 2
+
+Function::property = (name, options = {}) ->
+  
+  options.access ?= (READONLY | READWRITE)
+  options.default ?= null
+  options.internal_accessor ?= "_#{name}"
+  options.variable ?= "__#{name}"
+  options.get ?= null
+  options.set ?= null
+
+  readable  = options.access & READONLY
+  writeable = options.access & READWRITE
+
+  getter = options.get or ->
+    if !_.has(@, options.variable) and _.isObject(@[options.variable]) and !_.isFunction(@[options.variable])
+      @[options.variable] = _.clone(@[options.variable])
+    @[options.variable]
+
+  setter = options.set or (value) ->
+    @[options.variable] = value
+
+  public_config =
+    writeable: writeable
+    get: getter if readable
+    set: if writeable then setter else ()->
+    configurable: no
+    enumerable: yes
+
+  internal_config = 
+    writeable: true
+    get: getter
+    set: setter
+    configurable: no
+    enumerable: yes
+
+  # Create the public accessor
+  Object.defineProperty @prototype, name, public_config
+
+  # Create the internal accessor
+  Object.defineProperty @prototype, options.internal_accessor, internal_config
+
+  @prototype[options.variable] = options.default

data/app/assets/javascripts/extensions/underscore.js.coffee

@@ -0,0 +1,71 @@
+
+#
+# Iterates over an array of numbers and returns the sum. Example:
+#
+#    _.sum([1, 2, 3]) => 6
+#
+_.sum = (obj) ->
+  return 0 if !_.isArray(obj) or obj.length is 0
+  _.reduce obj, (sum, n) -> sum += parseInt(n, 10)
+
+#
+# Converts underscored or camel-cased strings to dashes. Example:
+#
+#    _.dasherize("FooBarView") => "foo-bar-view"
+#    _.dasherize("foo_bar_view") => "foo-bar-view"
+#
+_.dasherize = (string) ->
+  return unless string
+
+  # Remove Camelization
+  string = string.replace /([A-Z])/g, (match) -> "-#{match.toLowerCase()}"
+
+  # Convert Underscores to Dashes
+  string = string.replace /_/g, "-"
+
+  # Remove Leading Dash
+  string.replace /^-/, ""
+
+#
+# Converts title-cased, underscored or dashed strings to camel-case. Example:
+#
+#    _.camelize("FooBarView") => "fooBarView"
+#    _.camelize("foo-bar-view") => "fooBarView"
+#    _.camelize("foo_bar_view") => "fooBarView"
+#
+_.camelize = (string) ->
+  return unless string
+
+  # Remove Camelization
+  string = string.replace /((_|-)([a-z]))/g, (match) -> match[1].toUpperCase()
+
+  # Convert First Letter to Lowercase
+  string = string.replace /^([A-Z])/g, (match) -> match.toLowerCase()
+
+#
+# Converts dashed, title-cased or camel-cased strings underscores. Example:
+#
+#    _.underscore("FooBarView") => "foo_bar_view"
+#    _.underscore("foo-bar-view") => "foo_bar_view"
+#
+_.underscore = (string) ->
+  return unless string
+
+  # Remove Camelization
+  string = string.replace /([A-Z])/g, (match) -> "_#{match.toLowerCase()}"
+
+  # Convert Dashes to Underscores
+  string = string.replace /-/g, "_"
+
+  # Remove Leading Underscore
+  string.replace /^_/, ""
+
+#
+# Removes the specified value from the given array by altering the array
+# in place, without making a copy.
+#
+#    _.remove([ "A", "B", "C" ], "B") => [ "A", "C" ]
+#
+_.remove = (array, value) ->
+  index = array.indexOf(value)
+  array.splice(index, 1) unless index is -1