sproutit-sproutcore 1.0.0.20090407205609 → 1.0.0.20090408130025

data/frameworks/sproutcore/frameworks/desktop/views/split_divider.js

@@ -0,0 +1,55 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple, Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+sc_require('views/split');
+
+/**
+  @class
+
+  A SplitDividerView displays a divider between two views within a SplitView.
+  Clicking and dragging the divider will change the thickness of each view
+  either to the top/left or bottom/right of the divider.
+
+  Double-clicking on the SplitDividerView will try to collapse the first
+  view within the SplitView that has property canCollapse set to true,
+  so it is not visible, unless you have canCollapse disabled on the SplitView.
+
+  This view must be a direct child of the split view it works with. It must
+  be surrounded by two other views.
+
+  @extends SC.View
+
+  @author Charles Jolley
+  @author Lawrence Pit
+  @author Erich Ocean
+  @test in split
+*/
+SC.SplitDividerView = SC.View.extend(
+/** @scope SC.SplitDividerView.prototype */ {
+
+  classNames: ['sc-split-divider-view'],
+  
+  /** @private */
+  prepareContext: function(context, firstTime) {
+    var splitView = this.get('splitView') ;
+    if (splitView) this.set('cursor', splitView.get('thumbViewCursor')) ;
+    return sc_super() ;
+  },
+  
+  mouseDown: function(evt) {
+    var splitView = this.get('splitView');
+    return (splitView) ? splitView.mouseDownInThumbView(evt, this) : sc_super();
+  },
+  
+  // FIXME: how does this work with event capture?
+  doubleClick: function(evt) {
+    console.log('doubleClick in split divider');
+    var splitView = this.get('splitView');
+    return (splitView) ? splitView.doubleClickInThumbView(evt, this) : sc_super();
+  }
+  
+});

data/frameworks/sproutcore/frameworks/desktop/views/tab.js

@@ -0,0 +1,190 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple, Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+sc_require('views/segmented');
+
+SC.TOP_LOCATION = 'top';
+SC.BOTTOM_LOCATION = 'bottom';
+
+/** 
+  @class
+
+  Incorporates a segmented view and a container view to display the selected
+  tab.  Provide an array of items, which will be passed onto the segmented
+  view.
+  
+  @extends SC.View
+  @since SproutCore 1.0
+*/
+SC.TabView = SC.View.extend(
+/** @scope SC.TabView.prototype */ {
+
+  classNames: ['sc-tab-view'],
+  
+  displayProperties: ['nowShowing'],
+
+  // ..........................................................
+  // PROPERTIES
+  // 
+  
+  nowShowing: null,
+  
+  items: [],
+  
+  isEnabled: YES,
+  
+  itemTitleKey: null,
+  itemValueKey: null,
+  itemIsEnabledKey: null,
+  itemIconKey: null,
+  itemWidthKey: null,
+  
+  tabLocation: SC.TOP_LOCATION,
+  
+  /** 
+    If set, then the tab location will be automatically saved in the user
+    defaults.  Browsers that support localStorage will automatically store
+    this information locally.
+  */
+  userDefaultKey: null,
+  
+  
+  // ..........................................................
+  // FORWARDING PROPERTIES
+  // 
+  
+  // forward important changes on to child views
+  _tab_nowShowingDidChange: function() {
+    var v = this.get('nowShowing');
+    this.get('containerView').set('nowShowing',v);
+    this.get('segmentedView').set('value',v);
+    return this ;
+  }.observes('nowShowing'),
+
+  _tab_saveUserDefault: function() {
+    // if user default is set, save also
+    var v = this.get('nowShowing');
+    var defaultKey = this.get('userDefaultKey');
+    if (defaultKey) {
+      SC.userDefaults.set([defaultKey,'nowShowing'].join(':'), v);
+    }
+  }.observes('nowShowing'),
+  
+  _tab_itemsDidChange: function() {
+    this.get('segmentedView').set('items', this.get('items'));
+    return this ;    
+  }.observes('items'),
+
+  /** @private
+    Restore userDefault key if set.
+  */
+  init: function() {
+    sc_super();
+    this._tab_nowShowingDidChange()._tab_itemsDidChange();
+  },
+
+  awake: function() {
+    sc_super();  
+    var defaultKey = this.get('userDefaultKey');
+    if (defaultKey) {
+      defaultKey = [defaultKey,'nowShowing'].join(':');
+      var nowShowing = SC.userDefaults.get(defaultKey);
+      if (!SC.none(nowShowing)) this.set('nowShowing', nowShowing);
+    }
+
+  },
+  
+  createChildViews: function() {
+    var childViews = [], view; 
+    view = this.containerView = this.createChildView(this.containerView, { 
+      rootElementPath: [0] 
+    }) ;
+    childViews.push(view);
+    
+    view = this.segmentedView = this.createChildView(this.segmentedView, { 
+      rootElementPath: [1] 
+    }) ;
+    childViews.push(view);
+
+    this.set('childViews', childViews);
+    return this; 
+  },
+  
+  // ..........................................................
+  // COMPONENT VIEWS
+  // 
+
+  /**
+    The containerView managed by this tab view.  Note that TabView uses a 
+    custom container view.  You can access this view but you cannot change 
+    it.
+  */
+  containerView: SC.ContainerView.extend({
+    
+    /** @private
+      When we need to actually create a container, look for the tab loc from
+      the parent view and adjust the internal frame accordingly.
+    */
+    render: function(context, firstTime) {
+      var pv = this.get('parentView');
+      var tabLoc = (pv) ? pv.get('tabLocation') : SC.TOP_LOCATION ;
+      if (tabLoc === SC.TOP_LOCATION) {
+        context.addStyle('top', '11px');
+      } else {
+        context.addStyle('bottom', '11px');
+      }
+      this.renderChildViews(context, firstTime);
+    }
+  }),
+  
+  /**
+    The segmentedView managed by this tab view.  Note that this TabView uses
+    a custom segmented view.  You can access this view but you cannot change
+    it.
+  */
+  segmentedView: SC.SegmentedView.extend({
+    layout: { left: 0, right: 0, height: 23 },
+
+    /** @private
+      When the value changes, update the parentView's value as well.
+    */
+    valueDidChange: function() {
+      var pv = this.get('parentView');
+      if (pv) pv.set('nowShowing', this.get('value'));
+    }.observes('value'),
+    
+    /** @private
+      When we need to actually create a container, look for the tab loc from
+      the parent view and adjust the internal frame accordingly.  Also copy
+      the item key settings from the tab view.
+    */
+    render: function(context, firstTime) {
+      sc_super();
+      // copy some useful properties from the parent view first
+      var pv = this.get('parentView');
+      var tabLoc = (pv) ? pv.get('tabLocation') : SC.TOP_LOCATION ;
+      if (tabLoc === SC.TOP_LOCATION) {
+        context.addStyle('top', '0px');
+      } else {
+        context.addStyle('bottom', '0px');
+      }
+    },
+    
+    init: function() {
+      // before we setup the rest of the view, copy key config properties 
+      // from the owner view...
+      var pv = this.get('parentView');
+      if (pv) {
+        SC._TAB_ITEM_KEYS.forEach(function(k) { this[k] = pv.get(k); }, this);
+      }
+      return sc_super();
+    }
+  })
+  
+}) ;
+
+SC._TAB_ITEM_KEYS = 'itemTitleKey itemValueKey itemIsEnabledKey itemIconKey itemWidthKey'.w();

data/frameworks/sproutcore/frameworks/desktop/views/text_field.js

@@ -0,0 +1,233 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple, Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  @class
+  
+  A text field is an input element with type "text".  This view adds support
+  for hinted values, etc.
+  
+  @extends SC.FieldView
+  @extends SC.Editable
+  @author Charles Jolley
+*/
+SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
+/** @scope SC.TextFieldView.prototype */ {
+  
+  tagName: 'label',
+  classNames: ['sc-text-field-view'],
+  
+  // ..........................................................
+  // PROPERTIES
+  // 
+  
+  /**
+    The hint to display while the field is not active.  Can be a loc key.
+  */  
+  hint: null,
+  
+  /**
+    If YES then the text field is currently editing. 
+  */
+  isEditing: NO,
+  
+  /** isEditable maps to isEnabled with a TextField. */
+  isEditable: function() {
+    return this.get('isEnabled') ;
+  }.property('isEnabled').cacheable(),
+    
+  // ..........................................................
+  // INTERNAL SUPPORT
+  // 
+  
+  displayProperties: 'hint fieldValue isEditing'.w(),
+  
+  render: function(context, firstTime) {
+    var disabled = this.get('isEnabled') ? '' : 'disabled="disabled"';
+    var name = SC.guidFor(this);
+    var hint = this.get('hint');
+
+    // always have at least an empty string
+    var v = this.get('fieldValue');
+    if (SC.none(v)) v = ''; 
+    
+    // update layer classes always
+    context.setClass('not-empty', v.length>0);
+    
+    if (firstTime) {
+      context.push('<span class="sc-hint">', hint, '</span>');
+      context.push('<input type="text" name="%@" %@ value="%@" />'.fmt(name, disabled, v));
+      
+    // if this is not first time rendering, update the hint itself since we
+    // can't just blow away the text field like we might most other controls
+    } else {
+      if (hint !== this._textField_currentHint) {
+        this._textField_currentHint = hint ;
+        this.$('.sc-hint').text(hint);
+      }          
+    }
+  },
+
+  // more efficient input
+  $input: function() { return this.$('input'); },
+  
+  // ..........................................................
+  // HANDLE NATIVE CONTROL EVENTS
+  // 
+  
+  didCreateLayer: function() {
+    sc_super();
+
+    var input = this.$input();
+    SC.Event.add(input, 'focus', this, this._textField_fieldDidFocus);
+    SC.Event.add(input, 'blur',  this, this._textField_fieldDidBlur);
+  },
+  
+  willDestroyLayer: function() {
+    sc_super();
+    
+    var input = this.$input();
+    SC.Event.remove(input, 'focus', this, this._textField_fieldDidFocus);
+    SC.Event.remove(input, 'blur',  this, this._textField_fieldDidBlur);
+  },
+  
+  _textField_fieldDidFocus: function(evt) {
+    SC.RunLoop.begin();
+    this.fieldDidFocus();
+    SC.RunLoop.end();
+  },
+
+  _textField_fieldDidBlur: function(evt) {
+    SC.RunLoop.begin();
+    this.fieldDidBlur();
+    SC.RunLoop.end();
+  },
+  
+  fieldDidFocus: function(evt) {
+    if (!this._isFocused) {
+      this._isFocused = YES ;
+      this._applyFirefoxCursorFix();
+      this.beginEditing();
+    }
+  },
+  
+  fieldDidBlur: function() {
+    if (this._isFocused) {
+      this._isFocused = NO ;
+      this._removeFirefoxCursorFix();
+      this.commitEditing();
+    }
+  },
+
+  _applyFirefoxCursorFix: function() {
+    if (SC.browser.mozilla) {
+      var layer = this.get('layer');
+      var p = SC.viewportOffset(this.get('layer')) ;
+      var top    = p.y, 
+          left   = p.x, 
+          width  = layer.offsetWidth, 
+          height = layer.offsetHeight ;
+
+      // brittle, but the layout is correct :(
+      top += 3; left += 3; width -= 6; height -= 6; 
+      
+      var style = 'position: fixed; top: %@px; left: %@px; width: %@px; height: %@px;'.fmt(top, left, width, height) ;
+      this.$input().attr('style', style) ;
+    }
+  },
+
+  _removeFirefoxCursorFix: function() {
+    if (SC.browser.mozilla) this.$input().attr('style', '') ;
+  },
+  
+  /** tied to the isEnabled state */
+  acceptsFirstResponder: function() {
+    return this.get('isEnabled');
+  }.property('isEnabled'),
+    
+  // ..........................................................
+  // FIRST RESPONDER SUPPORT
+  // 
+  // When we become first responder, make sure the field gets focus and
+  // the hint value is hidden if needed.
+
+  // when we become first responder, focus the text field if needed and
+  // hide the hint text.
+  /** @private */
+  willBecomeKeyResponderFrom: function(keyView) {
+    // focus the text field.
+    if (!this._isFocused) {
+      this._isFocused = YES ;
+      if (this.get('isVisibleInWindow')) {
+        this.$input().get(0).focus();
+        this.invokeOnce(this._selectRootElement) ;
+      }
+    }
+  },
+  
+  // In IE, you can't modify functions on DOM elements so we need to wrap the 
+  // call to select() like this.
+  _selectRootElement: function() {
+    this.$input().get(0).select() ;
+  },
+  
+  // when we lose first responder, blur the text field if needed and show
+  // the hint text if needed.
+  /** @private */
+  didLoseKeyResponderTo: function(keyView) {
+    if (this._isFocused) {
+      this._isFocused = NO ;
+      this.$input().get(0).blur() ;
+    } else {
+      this.fieldValueDidChange() ;
+    }
+  },
+  
+  _isFocused: false,
+  
+  /** @private
+    Simply allow keyDown & keyUp to pass through to the default web browser
+    implementation.
+  */
+  keyDown: function(evt) { 
+    
+    // validate keyDown...
+    if (this.performValidateKeyDown(evt)) {
+      this._isKeyDown = YES ;
+      evt.allowDefault(); 
+    } else {
+      evt.stop();
+    }
+    
+    return YES; 
+  },
+  
+  keyUp: function(evt) { 
+    if (this._isKeyDown) {
+      this.invokeLater(this.fieldValueDidChange, 1, YES); // notify change
+    }
+    this._isKeyDown = NO;
+    evt.allowDefault(); 
+    return YES; 
+  },
+  
+  mouseDown: function(evt) {
+    if (!this.get('isEnabled')) {
+      evt.stop();
+      return YES;
+    } else return sc_super();
+  },
+
+  mouseUp: function(evt) {
+    if (!this.get('isEnabled')) {
+      evt.stop();
+      return YES;
+    } else return sc_super();
+  }
+  
+
+}) ;

data/frameworks/sproutcore/frameworks/desktop/views/thumb.js

@@ -0,0 +1,49 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple, Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  @class
+
+  A ThumbView works in concert with SC.SplitView to adjust the divider 
+  position from an arbitrary subview of the SplitView. Simply make an
+  instance of ThumbView a child somewhere in the childViews (or 
+  descendants) of the split view and add the path to the ThumbView to the
+  SplitView's thumbViews array.
+  
+  SplitView will automatically set the splitView property of the views in
+  its thumbViews array.
+
+  @extends SC.View
+  @author Erich Ocean
+  @test in split
+*/
+SC.ThumbView = SC.View.extend(
+/** @scope SC.ThumbView.prototype */ {
+
+  classNames: ['sc-thumb-view'],
+  
+  /**
+    Enable this thumb view to control its parent split view.
+  */
+  isEnabled: YES,
+  isEnabledBindingDefault: SC.Binding.bool(),
+  
+  /** @private */
+  prepareContext: function(context, firstTime) {
+    var splitView = this.get('splitView') ;
+    if (splitView) this.set('cursor', splitView.get('thumbViewCursor')) ;
+    return sc_super() ;
+  },
+  
+  mouseDown: function(evt) {
+    if (!this.get('isEnabled')) return NO ;
+    
+    var splitView = this.get('splitView');
+    return (splitView) ? splitView.mouseDownInThumbView(evt, this) : sc_super();
+  }
+    
+});

data/frameworks/sproutcore/frameworks/desktop/views/toolbar.js

@@ -0,0 +1,49 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple, Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/** @class
+
+  A toolbar view can be anchored at the top or bottom of the window to contain
+  your main toolbar buttons.  The default implementation assumes you may have
+  a leftView, rightView, and centerView, which will be properly laid out.
+  
+  You can also override the layout property yourself or simply set the 
+  anchorLocation to SC.ANCHOR_TOP or SC.ANCHOR_BOTTOM.  This will configure
+  the layout of your toolbar automatically when it is created.
+
+  @extends SC.View
+  @since SproutCore 1.0
+*/
+SC.ToolbarView = SC.View.extend(
+  /** @scope SC.ToolbarView.prototype */ {
+
+  classNames: ['sc-toolbar-view'],
+  
+  /**
+    Default anchor location.  This will be applied automatically to the 
+    toolbar layout if you set it.
+  */
+  anchorLocation: null,
+
+  // ..........................................................
+  // INTERNAL SUPPORT
+  // 
+  
+  /** @private */
+  layout: { left: 0, height: 36, right: 0 },
+  
+  /** @private */
+  init: function() {
+    // apply anchor location before setting up the rest of the view.
+    if (this.anchorLocation) {
+      this.layout = SC.merge(this.layout, this.anchorLocation);
+    }
+    sc_super(); 
+  }
+
+});
+

data/frameworks/sproutcore/frameworks/desktop/views/web.js

@@ -0,0 +1,86 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple, Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+/** @class
+
+  Used to display an iframe. The source, (specified by the value property) of 
+  the iFrame should be from the same domain. (i.e. the src / value should be 
+  from the same domain) if you want to access the contents of the iframe.
+
+  @extends SC.View, SC.Control
+  @since SproutCore 1.0
+*/
+SC.WebView = SC.View.extend(SC.Control, {
+
+  classNames: 'sc-web-view',
+  displayProperties: ['value', 'shouldAutoResize'],
+
+  /**
+  The content of the iframe can be bigger than the size specifed when creating
+  the view. If you want the view to be auto-resized to the dimensions of the 
+  iframe, then set the value of this property to YES.
+  The web view can be auto resized only if the contents are from the same
+  domain as the parent domain.
+  @property{Boolean}
+  */
+  shouldAutoResize: NO,
+
+  render: function(context, firstTime) {
+    var src = this.get('value');
+    if (firstTime) {
+      context.push('<iframe src="' + src + 
+      '" style="position: absolute; width: 100%; height: 100%; border: 0px; margin: 0px; padding: 0p;"></iframe>');
+    } else {
+      var iframe = this.$('iframe');
+      // clear out the previous src, to force a reload
+      iframe.attr('src', 'javascript:;');
+      iframe.attr('src', src);
+    }
+  },
+
+  /**
+  Called when the layer gets created. 
+  */
+  didCreateLayer: function() {
+    var f = this.$('iframe');
+    // Attach an onload event to the iframe.
+    SC.Event.add(f, 'load', this, this.iframeDidLoad);
+  },
+
+
+  /** 
+  Called when iframe onload event is fired.
+  1. Resizes the view to fit the contents of the iframe using the 
+  scroll width and scroll height of the contents of the iframe
+  
+  The iframe contents can be accessed only when the src is from the same
+  domain as the parent document
+  @returns {void}
+  */
+  iframeDidLoad: function() {
+    //fit the iframe to size of the contents.
+    if (this.get('shouldAutoResize') === YES){
+      var contentWindow;
+      var iframeElt = this.$('iframe')[0];
+      if(iframeElt && iframeElt.contentWindow){
+        contentWindow = iframeElt.contentWindow;
+        if(contentWindow && contentWindow.document && contentWindow.document.documentElement){
+          var docElement = contentWindow.document.documentElement;
+          // setting the width before the height gives more accurate results.. 
+          // atleast for the test iframe content i'm using.
+          //TODO: try out document flows other than top to bottom.
+          if (!SC.browser.isIE){
+            this.$().width(docElement.scrollWidth);
+            this.$().height(docElement.scrollHeight);          
+          } else {
+            this.$().width(docElement.scrollWidth + 12);
+            this.$().height(docElement.scrollHeight + 5);          
+          }
+        }
+      }
+    }
+  }
+});