sproutit-sproutcore 1.0.0.20090407205609 → 1.0.0.20090408130025

data/frameworks/sproutcore/frameworks/deprecated/lib/core_views.rb

@@ -0,0 +1,326 @@
+############################################################
+# CORE VIEW HELPERS
+# These view helpers create simple views based on the options
+# you pass in.  More complex components can be found in the 
+# view_kit.
+
+# Render an SC.ClassicView.  This is also the base for all other view helpers.
+#
+# :tag      the wrapper tag. default: 'div'
+# :class    css class names. maybe a string or array.
+# :panel    if true, view will display as a panel. default: false
+# :visible  (bindable) if false, view will be hidden on page load. 
+#           default: true
+#
+view_helper :view do
+  var :inner_html
+  var :tag, 'div'
+  var :panel, false
+  var :animate
+  
+  # passing in :field is like passing in :outlet but it also adds a 
+  # property called fieldType
+  var :field
+  if @field
+    @outlet = "#{@field.to_s}_field"
+    property :field_key, @field.to_s.camelize(:lower), :constant => true
+  end
+  
+  attribute :title
+
+  # there are some standard JS properties
+  bind :enabled, :key => 'isEnabled'
+  bind :visible, :key => 'isVisible'
+
+  property :enabled, :key => 'isEnabled'
+  property :modal,   :key => 'isModal'
+  property :custom_panel, :key => 'hasCustomPanelWrapper'
+  property :localize 
+  property :validator    
+  property :field_label 
+  property :accepts_first_responder
+  property :content
+  property :value
+  property :content_value_key
+  
+  # For SC.SplitView support
+  if parent_context && parent_context.view_helper_id == :split_view
+    property :max_thickness
+    property :min_thickness
+    property :collapse_at_thickness
+    property :can_collapse
+    property :collapsed, :key => 'isCollapsed'
+  end
+  
+  # General delegate support
+  property(:delegate) { |x| x }
+  property :drop_target, :key => 'isDropTarget'
+
+  # set panel type
+  var :panel
+  var :dialog
+  var :picker
+  pane_def = (@panel) ? 'panel' : (@dialog ? 'dialog' : (@picker ? 'picker' : nil))
+  if pane_def.nil?
+    property :pane, :key => 'paneType'
+  else
+    property :pane, pane_def, :key => 'paneType'
+  end
+
+  # pass in a hash of properties and they will be added to the JS:
+  # :properties => { :prop_a => '1', :prop_b => '2' }
+  var :properties
+  if @properties
+    @properties.each { | k, v | property(k,v) { |b| b } }
+  end
+  
+  if @animate
+    property :visible_animation, '', :constant => true do
+      key_map = { 'complete' => 'onComplete' }
+      animation_values = @animate.map do | k,v |
+        normalized_key = k.to_s.downcase
+        unless ['complete'].include?(normalized_key)
+          v = prepare_for_javascript(v)
+        end
+        k = key_map[normalized_key] || k
+        "#{k}: #{v}"
+      end 
+      %({ #{ animation_values * ',' } })
+    end
+  end
+        
+  view('SC.ClassicView') { properties }
+
+  # deal with css classnames and styles.
+  # Note that you can append either arrays or single strings or symbols 
+  # here.  When the class names and styles are combined the ary will be
+  # flattened
+  var :class, :key => :class_names
+  css_class_names << @class_names if @class_names
+  
+  var :enabled, true
+  css_class_names << 'disabled' if @enabled == false
+  
+  var :style
+  css_styles << @style unless @style.nil?
+  
+  # Standard CSS attributes you can pass as attributes to standard view helpers.
+  common_css_keys = [:width, :height, :min_height, :max_height, :min_width, :max_width, :top, :bottom, :right, :left]
+  
+  common_css_keys.each do | key |
+    value = var key
+    if value
+      value = "#{value.to_i}px" if value.kind_of?(Numeric)
+      key = key.to_s.gsub('_','-')
+      css_styles << "#{key}: #{value};"
+    end
+  end
+
+  # render the basic content
+  content do
+    ret = ""
+
+    if parent_context  && parent_context.view_helper_id == :split_view
+      if parent_context.child_contexts.size == 2 && view_helper_id != :split_divider_view
+        # insert split divider view
+        ret << parent_context.render_source.split_divider_view(:current_context => parent_context)
+      end
+    end
+
+    ret << ((@tag == 'img') ? %(<#{@tag} #{attributes} />) : %(#{ot}#{@inner_html}#{ct}))
+  end
+end
+
+# Render an SC.LabelView.  Inherits from SC.ClassicView
+#
+# :formatter    Name of a formatter.
+# :localize     (bindable) localize string
+# :escape_html  (bindable) escapeHTML property
+view_helper :label_view do
+  property(:formatter) { |v| v }
+  property :localize,   false
+  property :editable, :key => 'isEditable'
+  property :escape_html, true, :key => 'escapeHTML'
+  property :value
+  
+  var      :label, nil
+  var      :value, nil
+  var      :tag, 'span'
+  view     'SC.LabelView'
+  
+  css_class_names << 'sc-label-view'
+  @inner_html = @label unless @label.nil?
+  @inner_html = @value unless @value.nil?
+end
+
+# Render an SC.SpinnerView. Inherits from SC.ClassicView. You should bind 
+# :visible usually.
+#
+# :src        Set the src of the spinner img. Defaults to 
+#             "/images/spinner.gif"
+view_helper :spinner_view do
+  var :form, false
+  var :src, '/images/spinner.gif'
+
+  view 'SC.SpinnerView'
+  if @form
+    bind(:visible, ".owner.isCommitting", :key => 'isVisible') 
+    self.outlet = 'commitSpinner'
+  end
+  
+  unless @inner_html
+    @inner_html = %(<img src="#{@src}" />)
+  end
+  attribute :class, 'spinner'
+  
+end
+
+# Renders an SC.ProgressView.  Includes the default HTML structure.
+#
+# :enabled        (bindable) isEnabled property
+# :indeterminate  (bindable) isIndeterminate property
+# :value          (bindable) default value - float
+# :maximum        (bindable) maximum value - float
+# :minimum        (bindable) minimum value - float
+view_helper :progress_view do
+  property :enabled, :key => 'isEnabled'
+  property :indeterminate, :key => 'isIndeterminate'
+  property :value
+  property :maximum
+  property :minimum
+  view 'SC.ProgressView'
+  
+  attribute :class, 'progress outer'
+  unless @inner_html
+    @inner_html = <<EOF
+<div class="outer-head"></div>
+<div class="inner">
+<div class="inner-head"></div>
+<div class="inner-tail"></div>
+</div>
+<div class="outer-tail"></div>
+EOF
+  end
+end
+  
+view_helper :image_view do
+  view 'SC.ImageView'
+  property :content
+  property :value
+  
+  attribute :src, static_url('blank')
+  attribute :alt, ''
+  var :tag, 'img'
+  css_class_names << 'sc-image-view'
+end
+
+view_helper :container_view do
+  view 'SC.ContainerView'
+  property :content
+end
+
+view_helper :scroll_view do
+  view 'SC.ScrollView'
+  css_class_names << 'sc-scroll-view'
+end
+
+view_helper :segmented_view do
+  property :value
+  property :selection, :key => 'value'
+  property :enabled, :key => 'isEnabled'
+  property :allows_empty_selection
+
+  # :segments should contains an array of symbols or a hash of
+  # key => name pairs to be used to render the segment. Or you can
+  # just create your own button views.
+  var :segments
+  var :theme, 'regular'
+  if @segments
+    @segments = [@segments].flatten unless @segments.instance_of?(Array)
+    result = []
+    first = true
+    while seg = @segments.shift
+      class_names = [@theme,'segment']
+      class_names << ((first) ? 'segment-left' : ((@segments.size == 0) ? 'segment-right' : 'segment-inner'))
+      first = false
+
+      seg = [seg].flatten
+      key = seg.first || ''
+      label = seg.size > 1 ? seg.last : key.to_s.humanize.split.map { |x| x.capitalize }.join(' ')
+      
+      result << render_source.button_view(:outlet => "#{key}_button", :label => label, :tag => 'a', :class => class_names )
+    end
+    @inner_html = result * ''
+  end
+  
+  view 'SC.SegmentedView'
+  css_class_names << 'segments'
+  
+end
+
+# Renders an SC.TabView.  Name outlets you want flipped *_tab
+# If you want, you can also pass a set of segments to be displayed
+# above the tab view 
+view_helper :tab_view do
+  var :segments
+  
+  property :now_showing
+  property :lazy_tabs
+  
+  view 'SC.TabView'
+  css_class_names << "tab"
+  
+  if @segments
+    # if this tab view has segments automatically  attached, add class
+    # name.
+    css_class_names << 'segmented' 
+    result = []
+    result << render_source.segmented_view(:outlet => :segmented_view, :segments => @segments, :bind => { :value => '*owner.nowShowing' })
+    result << render_source.view({:outlet => :root_view, :class => 'root'})
+    @inner_html = [(result * ""), %(<div style="display:none;">), (@inner_html || ''), %(</div>)] * ""
+  end
+    
+end
+
+view_helper :scroll_view do
+  view 'SC.ScrollView'
+  css_class_names << 'sc-scroll-view'
+end
+
+view_helper :split_view do
+  view 'SC.SplitView'
+  property :direction, :key => 'layoutDirection'
+  property :can_collapse_views
+  
+  var :direction, :horizontal
+  var :splitter, :default
+  css_class_names << 'sc-split-view'
+  css_class_names << @direction
+  css_class_names << @splitter
+end
+
+view_helper :split_divider_view do
+  if pc = options[:current_context]
+    # pc == render_context of split_view
+
+    var :splitter_thickness, case pc.var(:splitter, :default)
+    when :thin : 1
+    when :thick : 9
+    else 5
+    end
+
+    if pc.var(:direction, :horizontal) == :horizontal
+      var :left, pc.child_contexts[0].var(:width, 150)
+      css_styles << "left: #{@left}px"
+      pc.child_contexts[1].css_styles << "left: #{@left + @splitter_thickness}px;"
+    else
+      var :top, pc.child_contexts[0].var(:height, 150)
+      css_styles << "top: #{@top}px"
+      pc.child_contexts[1].css_styles << "top: #{@top + @splitter_thickness}px;"
+    end
+  end
+
+  view 'SC.SplitDividerView'
+  css_class_names << 'sc-split-divider-view'
+end
+

data/frameworks/sproutcore/frameworks/deprecated/lib/form_views.rb

@@ -0,0 +1,253 @@
+############################################################
+# FORM VIEW HELPERS
+#
+# These view helpers make it easy to create input forms.  You should wrap
+# your form in the form_view tag and include your fields inside.
+#
+
+require_helpers 'core_views'
+
+# Defines a form view.  Note that you can make this form into a panel
+# by passing :panel => true
+view_helper :form_view do
+
+  property :content
+  property :enabled, :key => 'isEnabled'
+  property :valid, :key => 'isValid'
+  property :commiting, :key => 'isCommitting'
+  property :dirty, :key => 'isDirty'
+  property :errors
+  property :error_count, :key => 'errorCount'
+  property :autocommit
+  property :prompt, :key => 'commitPrompt'
+  view 'SC.FormView'
+  
+  attribute :action, ''
+  attribute :method, 'post'
+  var :tag, 'form'
+end
+
+view_helper :error_explanation_view do
+  
+  # JavaScript
+  view 'SC.ErrorExplanationView'
+  
+  # HTML
+  var :tag,  'ul'
+  css_class_names << 'errors'
+end
+
+view_helper :checkbox_field_view do
+
+  # JavaScript
+  property :value
+  property :enabled, :key => 'isEnabled'
+  view 'SC.CheckboxFieldView'
+
+  # HTML
+  var :tag, 'input'
+  var :label
+
+  attribute :type, 'checkbox'
+  attribute :name, @item_id
+  
+  # if a label is passed, then wrap the checkbox in a label tag and 
+  # place the label text next to it.
+  if @label
+    content { %(<label><#{@tag} #{attributes} /> <span class="label">#{@label}</span></label>) }
+  else
+    content { "<#{@tag} #{attributes} />" }
+  end
+end 
+
+# This renders a list of radio buttons.
+#
+# :values => [REQ]
+#   Set this to the values you want displayed in the radio buttons. You
+#   can pass an array here of strings or symbols, in which case these will
+#   be used as the values for the buttons and the names will be created
+#   from them.  Or you can pass an array of arrays.  The first items is
+#   the key value, the second item is the human readable value.
+#
+# :layout => :horizontal | :vertical 
+#   This will write out horizontal or vertical to the CSS class names so
+#   you can control the layout of your radio buttons.
+#
+# :width  =>
+#   This will set the width of each item in the view.
+#
+# BINDABLE OPTIONS
+#
+# :objects =>
+#   This can point to a hash of objects which will be used to convert the
+#   key values you set into JS objects.
+# 
+# :value =>
+#   The current value of the radio buttons.
+#
+view_helper :radio_field_view do
+  
+  #JavaScript
+  bind :objects
+  property :value
+  view 'SC.RadioFieldView'
+  
+  # HTML
+
+  # Get the width styles out of the main style to put into the individual
+  # radio items.
+  css_styles.flatten!
+  @label_styles = css_styles.reject { |p| !(p =~ /width:/) }
+  css_styles.reject! { |p| @label_styles.include?(p) }
+  
+  if @label_styles.size > 0
+    @label_styles = %( style="#{@label_styles * ' '}" )
+  else
+    @label_styles = ''
+  end
+  
+  # get the layout mode.
+  var :layout, :vertical
+  css_class_names << 'radio' # default class
+  css_class_names << @layout if @layout
+  
+  var :tag, 'div'
+  
+  # generate the inner-html
+  var :values
+  html = @values.map do | v |
+    v = [v].flatten
+    key = v.first
+    label = (v.size > 1) ? v[1] : key.to_s.humanize
+    %(<label><input type="radio" name="#{item_id}" value="#{key}" #{@label_styles} /><span class="label">#{label}</span></label>)
+  end
+  @inner_html = html * "\n"
+   
+end
+
+
+  
+view_helper :text_field_view do
+  var :tag, 'input'
+
+  view 'SC.TextFieldView'
+  property :field_value
+  property :value, :key => :field_value
+  property :hint
+  property :validate, :key => :validator
+  property :label, :key => 'fieldLabel'
+  
+  attribute :size
+  attribute :type, 'text'
+  attribute :label
+  attribute :name
+  content { "<#{@tag} #{attributes} />" }
+end
+
+view_helper :password_field_view, :extends => :text_field_view do
+  attribute :type, 'password'
+end
+
+view_helper :text_area_view do
+  var :form, false
+  var :tag, 'textarea'
+  var :value, @inner_html
+  
+  if @form
+    view nil
+  else
+    view 'SC.TextareaFieldView'
+    property :hint
+    property :field_value
+    property :value
+  end
+  
+  attribute :cols, 72
+  attribute :rows, 10
+  attribute :validate
+  attribute :label
+  attribute :name
+  attribute :form, :key => :name
+  content { "#{ot}#{@value}#{ct}" }
+end
+
+# This view renders a browser-native popup menu.
+#
+# :field =>
+#   pass a name to make this part of the enclosing form.
+#
+# :options => 
+#   This will statically generate the HTML for the options menu.  The 
+#   value of this property should be an array of items containing strings
+#   or symbols, which will form both the item names and values or you can 
+#   pass an array of arrays.  The first item should be the value of the 
+#   object, then second item should be the name of the menu.
+# 
+#   Note that if you bind to the :objects property, then that binding 
+#   will override this code.      
+#
+# :name_key =>
+#   Specifies the key to use to get the name of a menu item from the 
+#   array of objects.  This is only used if the menu items are generated
+#   dynamically.
+#
+# :sort_key =>
+#   Optional sort key to use to order the menu.  If the sort key is not
+#   passed, the name of the menu items will be used.  This is only used
+#   if the menu items are generated dynamically.
+#
+# :value_key =>
+#   Optional key used to get the value for each menu item from the
+#   array of objects.  Only used if the menu items are generated 
+#   dynamically.
+#
+# :empty =>
+#   Optional.  Pass the string name of the "Empty" menu item.  This item
+#   will appear at the top of the menu and its value will be a null
+#   object.  The value you pass here will be localized by default.  Only
+#   used if the menu items are generated dynamically.
+#
+# :localize =>
+#   Optional.  If true, the names of the menu items and the empty menu
+#   item will be passed through the localization system.  Defaults to 
+#   false.
+#
+# :validator =>
+#   Optional. Pass the name of a validator and it will be used for this
+#   control.
+#
+# BINDABLE PROPERTIES
+#
+# :objects =>
+#   bind to an array of objects used to generate the menu item.  This will
+#   override any hard-coded options you pass through the :options param.
+#
+# :value =>
+#   bind to the current value to show in the pop-up menu.  
+#
+# :enabled =>
+#   bind or pass to set the control to enabled or disabled.
+# 
+view_helper :select_field_view do
+  # JavaScript
+  property :name_key
+  property :sort_key
+  property :value_key
+  property :empty, :key => 'emptyName'
+  property :enabled, :key => 'isEnabled'
+  bind     :objects
+  view     'SC.SelectFieldView'
+  
+  # HTML
+  var :tag, 'select'
+  var :options
+  if @options
+    html = @options.map do |opt|
+      opt = [opt].flatten
+      key = opt.first
+      name = (opt.size > 1) ? opt[1] : key.to_s.titleize
+      %(<option value="#{key}">#{name}</option>)
+    end
+    @inner_html = html * "\n"
+  end
+end

data/frameworks/sproutcore/frameworks/deprecated/lib/index.rhtml

@@ -0,0 +1,75 @@
+<% # SPROUTCORE DEFAULT INDEX TEMPLATE 
+   # This template provide provides a basic wrapper for a SproutCore client.
+   # Most of the time, it will be sufficient for your own needs.  However, if
+   # you need to create your own template, you can do so by copying this file
+   # into your client, naming it 'index.rhtml' and then adding the options
+   # :index => 'index' to your client declaration in routes.rb.
+   #
+   # See the comments in this file for more information on what you can
+   # change.
+-%>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+<%  # @title will be defined if you passed :title in routes.rb -%>
+    <title><%= (@title.to_s || bundle_name.to_s || '').capitalize %></title>
+<% # 
+	 # This line should appear in your head area to include the stylesheets
+	 # generated by your client.  If you need to include your own
+	 # stylesheets, you don't need to change it here.  Instead, use the
+	 # :requires option in routes.rb. 
+-%>
+    <script src="<%= static_url('detect-browser') %>" type="text/javascript"></script>
+    
+    <%= stylesheets_for_client %>
+<%= @content_for_page_styles %>
+  </head>
+  <body class="<%= @theme || 'sc-theme' %> focus">  
+    <script type="text/javascript">
+    var SC; if (!SC) SC = {} ;
+    if (SC.setupBodyClassNames) SC.setupBodyClassNames() ;
+    </script>
+      
+<% #
+   # This is where you root body element will appear.  To cause your 
+   # content to appear here, just declare content_for('body') in one of
+   # your partials.
+-%>
+    <!-- Main Page Body -->
+    <%= @content_for_body %>
+
+<% # 
+   # This is where the resources you delcare will appear.  You must
+   # include the following three lines verbatim for the resources you
+   # declare to be properly used.
+-%>
+    <!-- Resources to be removed from DOM on page load -->
+    <div id="resources" style="display:none; visibility: hidden;">
+      <%= @content_for_resources -%>
+    </div>
+
+<% #
+   # This line should appear at the bottom of your page to include your
+   # generated JavaScript and any libraries you reference.  If you need
+   # to include other javascripts, add them to the :requires option of
+   # your client in routes.rb instead of changing it here.
+-%>
+    <!-- Include Site Javascript -->
+    <%= javascripts_for_client %>
+<%= @content_for_page_javascript %>
+
+<% #
+   # The following lines to the closing body tag must be included at the
+   # very end of your file.  This will actually setup the JavaScript 
+   # views on your page and register SproutCore to start on page load.
+-%>
+<!-- Render Page Views -->
+<%= render_page_views %>
+
+    <!-- Start SproutCore on Page Load -->
+    <script type="text/javascript">window.onload = SC.didLoad;</script>
+<%= @content_for_final %>
+	</body>
+</html>