sproutcore 0.9.1 → 0.9.2

data/frameworks/sproutcore/lib/core_views.rb

@@ -0,0 +1,281 @@
+############################################################
+# 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.View.  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
+  property :max_thickness
+  property :min_thickness
+  property :can_collapse
+  property :collapsed, :key => 'isCollapsed'
+  
+
+  # 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.View') { 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]
+  
+  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 { (@tag == 'img') ? ot : %(#{ot}#{@inner_html}#{ct}) }
+  
+end
+
+# Render an SC.LabelView.  Inherits from SC.View
+#
+# :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 :escape_html, true, :key => 'escapeHTML'
+  
+  var      :label, nil
+  view     'SC.LabelView'
+  
+  css_class_names << 'sc-label-view'
+  @inner_html = @label unless @label.nil?
+end
+
+# Render an SC.SpinnerView. Inherits from SC.View. 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
+  
+  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'
+  css_class_names << 'sc-split-view'
+  css_class_names << @direction
+end
+
+view_helper :split_divider_view do
+  view 'SC.SplitDividerView'
+  css_class_names << 'sc-split-divider-view'
+end
+

data/frameworks/sproutcore/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
+  attribute :rows
+  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