cartilage 0.1.1

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2010-2012 ActiveProspect, Inc
+
+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.markdown

@@ -0,0 +1,57 @@
+# Cartilage for Backbone.js
+
+[![Build Status](https://secure.travis-ci.org/Cartilage/cartilage.png)](http://travis-ci.org/Cartilage/cartilage)
+
+Cartilage is a standardized set of layouts and user interface elements that
+are bundled as a Rails Engine. It is build on top of Backbone.js (for
+interactivity) and Bootstrap (for visual styling).
+
+## Example
+
+An example project is available at http://github.com/Cartilage/cartilage-example which
+is available as a demo here http://example.cartilagejs.org/
+## Requirements
+
+* Ruby on Rails 3.2+
+* Asset Pipeline
+* jQuery
+
+## Usage
+
+Include the Cartilage library in your project by adding the following to your
+Gemfile:
+
+    gem 'cartilage', :git => 'git@github.com:Cartilage/cartilage.git'
+
+Cartilage depends on Twitter Bootstrap and we prefer the bootstrap-sass gem
+for this, so also add this line while you're at it:
+
+    gem 'bootstrap-sass'
+
+Be sure to perform a `bundle install` to bring these new dependencies into
+your project.
+
+### Including Cartilage in the Asset Pipeline
+
+You will also need to edit your manifest files (i.e. application.css and
+application.js) to include Cartilage:
+
+    //= require cartilage
+
+
+### Working With Windows
+
+If you need to work with IE on Windows it is recommend that you continue development
+on Mac or *nix environment.  If you're using Pow, run "rake pow:prepare" which will
+create a "public" symlink to the test directory.  Once the cartilage repo is linked 
+it'll automatically pick up the public folder and start serving the static files there.
+With Pow, you'll be able to use xip.io to access the tests from browsers through a VM
+or beyond your own computer.
+
+Alternatively, if you're not using Pow you can also simply call 'rackup' from the repo 
+root which will start the default server and point directly to the test directory.  
+
+## License
+
+Cartilage is licensed under the terms of the MIT license (see MIT-LICENSE for
+more details).

data/Rakefile

@@ -0,0 +1,84 @@
+#!/usr/bin/env rake
+
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Cartilage'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+desc "Run tests for both engine and framework"
+task :test => [ "test:framework" ] do
+  # ...
+end
+
+namespace :pow do
+  task :prepare do
+    File.symlink("test/framework", "public")
+  end
+end
+
+namespace :test do
+  desc "Run tests for framework"
+  task :framework => [ :compile ] do
+    `which phantomjs`
+    if $?.success? 
+      system "phantomjs --debug=no --local-to-remote-url-access=yes #{File.dirname(__FILE__)}/test/framework/vendor/run-qunit.js #{File.dirname(__FILE__)}/test/framework/index.html"
+    else
+      raise "PhantomJS is not installed.  On Mac OS X please make sure you have the latest homebrew and try 'brew install phantomjs'"
+    end
+  end
+
+  task :browser => [ :compile ] do
+    system "open #{File.dirname(__FILE__)}/test/framework/index.html"
+  end
+
+  namespace :browser do
+    # Having trouble running this in Chrome due to cross-origin issues due to file://? 
+    # Quit Chrome and let open start it up with the -allow-file-access-from-files flag 
+    # which should make things work again. FF and Safari work fine with the default 'open'.    
+    task :chrome => [ :compile ] do
+      system "open -a \"Google Chrome.app\" --args -allow-file-access-from-files #{File.dirname(__FILE__)}/test/framework/index.html"
+    end
+  end
+end
+
+# task :default => :test
+
+desc "Compiles the framework into standalone JavaScript and CSS files"
+task :compile do
+  require 'sprockets'
+  require 'uglifier'
+
+  environment = Sprockets::Environment.new(File.dirname(__FILE__))
+  environment.append_path 'app/assets/javascripts'
+  environment.append_path 'app/assets/stylesheets'
+  environment.append_path 'vendor/assets/javascripts'
+  environment.append_path 'vendor/assets/stylesheets'
+
+  cartilage_js  = environment.find_asset('cartilage.js.coffee').to_s
+  compressed_js = Uglifier.compile(cartilage_js, :mangle => false)
+  File.open("#{File.dirname(__FILE__)}/test/framework/cartilage.js", 'w') { |f| f.write(compressed_js) }
+
+  # cartilage_css  = environment.find_asset('cartilage.css.scss').to_s
+  # compressed_css = Uglifier.compile(cartilage_css)
+  # File.open('cartilage.css', 'w') { |f| f.write(compressed_js) }
+end

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

@@ -0,0 +1,45 @@
+
+class window.Cartilage.Application
+
+  @Collections: {}
+  @Models: {}
+  @Routers: {}
+  @Views: {}
+
+  @sharedInstance: null
+  @contentView: null
+
+  @launch: ->
+    @sharedInstance = new @
+    @sharedInstance.initialize()
+    @hijackLinks()
+
+  @show: (view) ->
+    @contentView = new Cartilage.Views.ContentView unless @contentView?
+    @contentView.show(view)
+
+  @hijackLinks: ->
+    if Backbone.history and Backbone.history._hasPushState
+      $(document).delegate "a", "click", (event) ->
+        href = $(this).attr("href")
+        protocol = this.protocol + "//"
+
+        # Ignore anchors without hrefs.
+        return unless href
+
+        # Ensure that the link element does not define data-passthrough="true",
+        # which denotes that the link should be passed through to the backend
+        # application.
+        return if $(this).attr("data-passthrough") is "true"
+
+        # Ensure the protocol is not part of URL, meaning its relative.
+        return if href.match(/\:\/\//)
+
+        # Stop the event bubbling to ensure the link will not cause a page
+        # refresh.
+        event.preventDefault()
+
+        # Note by using Backbone.history.navigate, router events will not be
+        # triggered. If this is a problem, change this to navigate on your
+        # router.
+        Backbone.history.navigate(href, true)

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

@@ -0,0 +1,4 @@
+
+class window.Cartilage.Collections.Segments extends Backbone.Collection
+
+  model: Cartilage.Models.Segment

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

@@ -0,0 +1,8 @@
+
+window.Cartilage =
+
+  Version: 2.0
+
+  Collections: []
+  Models: []
+  Views: []

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

@@ -0,0 +1,2 @@
+
+class window.Cartilage.Model extends Backbone.Model

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

@@ -0,0 +1,2 @@
+
+class window.Cartilage.Models.Segment extends Cartilage.Model

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

@@ -0,0 +1,58 @@
+#
+# Bar Segment View
+#
+
+class window.Cartilage.Views.BarSegmentView extends Cartilage.View
+
+  # View Configuration -------------------------------------------------------
+
+  tagName: "li"
+
+  # Properties ---------------------------------------------------------------
+
+  #
+  # The BarView instance that this segment belongs to.
+  #
+  @property "barView", access: READONLY
+
+  #
+  # The background color of the segment.
+  #
+  @property "color", default: "#eeeeee"
+
+  #
+  # The fill width specified as a float from 0 to 1 that represents the
+  # percentage of the segment to occupy.
+  #
+  @property "fillWidth", default: 0
+
+  #
+  # The width specified as a float from 0 to 1 that represents the percentage
+  # of the barView to occupy.
+  #
+  @property "width", default: 0
+
+  # Internal Properties ------------------------------------------------------
+
+  # --------------------------------------------------------------------------
+
+  initialize: (options = {}) ->
+
+    # Initialize the View
+    super(options)
+
+    # Initialize the Bar Element
+    @_barElement = ($ "<div />").addClass("bar")
+    ($ @_barElement).css
+      width: (@fillWidth * 100) + "%"
+      backgroundColor: @color
+
+  prepare: ->
+
+    # Prepare the View
+    super()
+
+    ($ @el).html @_barElement
+    ($ @_barElement).css { display: "block" } if @fillWidth > 0
+
+    ($ @el).css { width: (@width * 100) + "%" }

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

@@ -0,0 +1,85 @@
+#
+# Bar View
+#
+
+class window.Cartilage.Views.BarView extends Cartilage.View
+
+  # View Configuration -------------------------------------------------------
+
+  tagName: "ul"
+
+  # Properties ---------------------------------------------------------------
+
+  #
+  # The segments of the bar view.
+  #
+  @property "segments", default: new Cartilage.Collections.Segments
+
+  #
+  # The value of the bar view.
+  #
+  @property "value", default: 0
+
+  #
+  # The default colors for the segments that comprise the bar view.
+  #
+  @property "colors", default: [ '#6ba2d4', '#a765a2', '#f69062', '#8ccc64', '#c26bb4', '#e9d243' ]
+
+  # Internal Properties ------------------------------------------------------
+
+  _cumulativeWidth: 0
+
+  # --------------------------------------------------------------------------
+
+  prepare: ->
+
+    # Prepare the View
+    super()
+
+    # Create segment views for each segment of the bar view.
+    _.each @segments.models, (segment, index) =>
+      segmentWidth = @_percentageWidthForSegmentAtIndex(index)
+      barWidth     = @_percentageWidthForBarInSegmentAtIndex(index)
+      segmentView  = new Cartilage.Views.BarSegmentView {
+        barView: @,
+        model: segment,
+        width: segmentWidth,
+        fillWidth: barWidth,
+        color: @colors[index]
+      }
+      @addSubview segmentView
+
+  # TODO Move this to BarSegmentView
+  _percentageWidthForSegmentAtIndex: (index) =>
+    segment       = @segments.models[index]
+    segmentWidth  = segment.get("maximum") - @segments.models[index - 1]?.get("maximum") || segment.get("maximum")
+    totalWidth    = _.last(@segments.models).get("maximum")
+    computedWidth = segmentWidth / totalWidth
+
+    computedWidth = 0.02 unless computedWidth > 0.02
+    computedWidth = 1.0 - @_cumulativeWidth unless @segments.models[index + 1]?
+
+    @_cumulativeWidth += computedWidth
+
+    # console.log "Segment: ", segment, "Width: ", segmentWidth, "Computed Width: ", computedWidth, "Total Width: ", totalWidth, "Cumulative Width: ", @_cumulativeWidth
+
+    computedWidth
+
+  # TODO Move this to BarSegmentView
+  _percentageWidthForBarInSegmentAtIndex: (index) ->
+    segment      = @segments.models[index]
+    maximumSoFar = @segments.models[index - 1]?.get("maximum") || 0
+    segmentWidth = segment.get("maximum") - maximumSoFar
+    fooWidth     = @value - maximumSoFar
+    barWidth     = 0
+
+    return 0 if fooWidth <= 0
+
+    if @value > segment.get("maximum")
+      barWidth = 1.0
+    else
+      barWidth = fooWidth / segmentWidth
+
+    # console.log "Bar for Segment: ", segment, "Width: ", segmentWidth, "Bar Width: ", barWidth, "Value: ", @value, "Foo Width: ", fooWidth
+
+    barWidth

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

@@ -0,0 +1,16 @@
+class window.Cartilage.Views.ContentView extends Cartilage.View
+
+  el: "#content"
+
+  initialize: (options = {}) ->
+    @currentView = null
+    super(options)
+
+  show: (view) ->
+    if @currentView 
+      @currentView.cleanup() if @currentView.cleanup
+    else if @currentView
+      console.warn "This view does not implement a cleanup method. Please extend all of your views from Cartilage.View to ensure compatibility."
+
+    @currentView = view
+    @addSubview @currentView

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

@@ -0,0 +1,76 @@
+#
+# Image View
+#
+# Wraps an HTML <img/> element and observes for load and error events,
+# dispatching those events to callbacks defined on a subclass or methods on
+# the delegate.
+#
+# Events
+# ------
+#
+#  * "loaded"
+#  * "error"
+#  * "cleared"
+#
+
+class window.Cartilage.Views.ImageView extends Cartilage.View
+
+  # Properties ---------------------------------------------------------------
+
+  #
+  # The URL to the image.
+  #
+  @property "imageAddress", set: (url) ->
+    @__imageAddress = url
+    @__imageElement = ($ "<img />").attr('src', @imageAddress)
+
+    # Bind to Events manually because event delegation will not work for
+    # image load and error events...
+    ($ @__imageElement).load @handleLoadEvent
+    ($ @__imageElement).error @handleErrorEvent
+  
+  #
+  # Denotes whether or not the image has finished loading.
+  #
+  @property "isLoaded", access: READONLY, default: no
+
+  #
+  # Denotes whether or not an error occurred while loading.
+  #
+  @property "isError", access: READONLY, default: no
+
+  #
+  # The image element that this view manages.
+  #
+  @property "imageElement", access: READONLY
+
+  # --------------------------------------------------------------------------
+
+  render: ->
+    super()
+    ($ @el).html @_imageElement
+
+    @
+
+  cleanup: ->
+    @clear { silent: true }
+    super()
+
+  clear: (options = {}) ->
+    @_isLoaded = false
+    @_imageAddress = null
+    ($ @_imageElement).off().hide().attr("src", null)
+    @trigger "cleared" unless options.silent
+
+  # Event Handlers -----------------------------------------------------------
+
+  handleLoadEvent: (event) =>
+    @_isLoaded = true
+    @_isError = false
+    @imageElement.fadeIn() unless @imageElement.is ":visible"
+    @trigger "load", event
+
+  handleErrorEvent: (event) =>
+    @clear()
+    @_isError = true
+    @trigger "error", event