sproutcore 1.4.5 → 1.5.0.pre.3

data/lib/frameworks/sproutcore/frameworks/desktop/views/static_content.js

@@ -103,7 +103,7 @@ SC.StaticContentView = SC.View.extend(SC.StaticLayout, {
   /** @private
     If the layer changes, make sure we recalculate the frame.
   */
-  didCreateLayer: function() {
+  didUpdateLayer: function() {
     this.contentLayoutDidChange();
   },
 

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

@@ -175,7 +175,7 @@ SC.TabView = SC.View.extend(
     custom container view.  You can access this view but you cannot change 
     it.
   */
-  containerView: SC.ContainerView,
+  containerView: SC.ContainerView.extend({ theme: 'well' }),
   
   segmentedView: SC.SegmentedView
   

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

@@ -5,13 +5,43 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
+/**
+  Layout properties needed to anchor a view to the top.
+*/
+SC.ANCHOR_TOP = { top: 0 };
+
+/**
+  Layout properties needed to anchor a view to the left.
+*/
+SC.ANCHOR_LEFT = { left: 0 };
+
+/*
+  Layout properties to anchor a view to the top left
+*/
+SC.ANCHOR_TOP_LEFT = { top: 0, left: 0 };
+
+/**
+  Layout properties to anchoe view to the bottom.
+*/
+SC.ANCHOR_BOTTOM = { bottom: 0 };
+
+/**
+  Layout properties to anchor a view to the right.
+*/
+SC.ANCHOR_RIGHT = { right: 0 } ;
+
+/**
+  Layout properties to anchor a view to the bottom right.
+*/
+SC.ANCHOR_BOTTOM_RIGHT = { bottom: 0, right: 0 };
+
 /** @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 
+
+  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.
 
@@ -22,28 +52,30 @@ SC.ToolbarView = SC.View.extend(
   /** @scope SC.ToolbarView.prototype */ {
 
   classNames: ['sc-toolbar-view'],
-  
+
   /**
-    Default anchor location.  This will be applied automatically to the 
+    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: 32, 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(); 
-  }
+    sc_super();
+  },
+
+  renderDelegateName: 'toolbarRenderDelegate'
 
 });
 

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

@@ -33,7 +33,7 @@ SC.WebView = SC.View.extend(SC.Control, {
     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>');
+      '" style="position: absolute; width: 100%; height: 100%; border: 0px; margin: 0px; padding: 0px;"></iframe>');
     } else {
       var iframe = this.$('iframe');
       // clear out the previous src, to force a reload

data/lib/frameworks/sproutcore/frameworks/desktop/views/well.js

@@ -47,27 +47,8 @@ SC.WellView = SC.ContainerView.extend(
       this.childViews = [view] ;
     } 
   },
-  
-  /**
-     The render method for the WellView simply add the html necessary for
-     the border.
-     
-   */
-  
-  render: function(context, firstTime) {
-    if(firstTime){
-     context.push("<div class='top-left-edge'></div>",
-       "<div class='top-edge'></div>",
-       "<div class='top-right-edge'></div>",
-       "<div class='right-edge'></div>",
-       "<div class='bottom-right-edge'></div>",
-       "<div class='bottom-edge'></div>",
-       "<div class='bottom-left-edge'></div>",
-       "<div class='left-edge'></div>",
-       "<div class='content-background'></div>");
-     }    
-     sc_super();
-  },
+
+  theme: 'well',
   
   /**
      Invoked whenever the content property changes.  This method will simply

data/lib/frameworks/sproutcore/frameworks/desktop/views/workspace.js

@@ -0,0 +1,251 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/** @class
+  WorkspaceView manages a content view and two optional toolbars (top and bottom).
+  You want to use WorkspaceView in one of two situations: iPhone apps where the toolbars
+  need to change size automatically based on orientation (this does that, isn't that
+  handy!) and iPad apps where you would like the masterIsHidden property to pass through.
+  
+  @since SproutCore 1.2
+*/
+
+require("views/toolbar");
+
+SC.VERTICAL_ORIENTATION = "vertical";
+SC.HORIZONTAL_ORIENTATION = "horizontal";
+
+SC.WorkspaceView = SC.View.extend({
+  classNames: ["sc-workspace-view"],
+  /**
+    The top toolbar. This defaults to an empty toolbar.
+  */
+  topToolbar: SC.ToolbarView.extend(),
+  
+  /**
+    The bottom toolbar. Defaults to null (no toolbar).
+  */
+  bottomToolbar: null,
+  
+  /**
+    The content. Must NOT be null. Defaults to an empty view.
+  */
+  contentView: SC.View.extend(),
+  
+  /**
+    Whether to automatically resize toolbars.
+    
+    By default, this property is NO. If you want to automatically resize like iPhone
+    apps should, set to YES.
+  */
+  autoResizeToolbars: NO,
+  
+  /**
+    The default toolbar size. The default is 44, as that looks
+    great on higher-resolution devices.
+    
+    TODO: move into a renderer or something.
+  */
+  defaultToolbarSize: 44,
+  
+  /**
+    The large toolbar size.
+  */
+  largeToolbarSize: 44,
+  
+  /**
+    The small toolbar size.
+  */
+  smallToolbarSize: 30,
+  
+  /**
+    A property (computed) that says what size the toolbars are.
+  */
+  toolbarSize: function() {
+    if (!this.get("autoResizeToolbars")) return this.get("defaultToolbarSize");
+    if (this.get("orientation") === SC.HORIZONTAL_ORIENTATION) return this.get("smallToolbarSize");
+    return this.get("largeToolbarSize");
+  }.property("autoHideMaster", "orientation"),
+  
+  /**
+    Tracks the orientation of the view. Is a computed property. Property, people, not a method.
+  */
+  orientation: function() {
+    var f = this.get("frame");
+    if (f.width > f.height) return SC.HORIZONTAL_ORIENTATION;
+    else return SC.VERTICAL_ORIENTATION;
+  }.property("frame").cacheable(),
+  
+  /**
+    Thees property es passed throo too make eet zeemple for zee toolbar buttonz
+    to hide and show theemselves.
+  */
+  masterIsHidden: NO,
+  
+  masterIsHiddenDidChange: function() {
+    var t, mih = this.get("masterIsHidden");
+    if (t = this.get("topToolbar")) t.set("masterIsHidden", mih);
+    if (t = this.get("bottomToolbar")) t.set("masterIsHidden", mih);
+  }.observes("masterIsHidden"),
+  
+  /// INTERNAL CODE. HERE, THERE BE MONSTERS!
+  
+  /**
+    @private
+    Whenever something that affects the tiling changes (for now, just toolbarSize, but if
+    we allow dynamic changing of toolbars in future, this could include toolbars themselves),
+    we need to update the tiling.
+  */
+  _scmd_tilePropertyDidChange: function() {
+    this.invokeOnce("_scws_tile");
+  }.observes("toolbarSize"),
+  
+  /**
+    Creates the child views. Specifically, instantiates master and detail views.
+  */
+  createChildViews: function() {
+    sc_super();
+    
+    var topToolbar = this.get("topToolbar");
+    if (topToolbar) {
+      topToolbar = this.topToolbar = this.activeTopToolbar = this.createChildView(topToolbar);
+      this.appendChild(topToolbar); 
+    }
+    
+    var bottomToolbar = this.get("bottomToolbar");
+    if (bottomToolbar) {
+      bottomToolbar = this.bottomToolbar = this.activeBottomToolbar = this.createChildView(bottomToolbar);
+      this.appendChild(bottomToolbar); 
+    }
+    
+    var content = this.get("contentView");
+    content = this.contentView = this.activeContentView = this.createChildView(content);
+    this.appendChild(content); 
+    
+    this.invokeOnce("_scws_tile");
+  },
+  
+  /**
+    @private
+    Tiles the views as necessary.
+  */
+  _scws_tile: function() {
+    var contentTop = 0, contentBottom = 0, 
+        topToolbar = this.get("topToolbar"),
+        bottomToolbar = this.get("bottomToolbar"),
+        content = this.get("contentView"),
+        toolbarSize = this.get("toolbarSize");
+      
+      // basically, if there is a top toolbar, we position it and change contentTop.
+    if (topToolbar) {
+      topToolbar.set("layout", {
+        left: 0, right: 0, top: 0, height: toolbarSize
+      });
+      contentTop += toolbarSize;
+    }
+    
+    // same for bottom
+    if (bottomToolbar) {
+      bottomToolbar.set("layout", {
+        left: 0, right: 0, bottom: 0, height: toolbarSize
+      });
+      contentBottom += toolbarSize;
+    }
+    
+    // finally, position content
+    this.contentView.set("layout", {
+      left: 0, right: 0, top: contentTop, bottom: contentBottom
+    });
+  },
+  
+  /**
+    Returns YES if a top toolbar is present.
+  */
+  hasTopToolbar: function() {
+    if (this.get("topToolbar")) return YES;
+    return NO;    
+  }.property("topToolbar").cacheable(),
+  
+  /**
+    Returns YES if a bottom toolbar is present.
+  */
+  hasBottomToolbar: function() {
+    if (this.get("bottomToolbar")) return YES;
+    return NO;
+  }.property("bottomToolbar").cacheable(),
+  
+  /**
+    Called by the individual toolbar/contentView observers at runloop end when the toolbars change.
+  */
+  childDidChange: function() {
+    this._scws_tile();
+  },
+  
+  /**
+    For subclassing, this is the currently displaying top toolbar.
+  */
+  activeTopToolbar: null,
+  
+  /**
+    For subclassing, this is the currently displaying bottom toolbar.
+  */
+  activeBottomToolbar: null,
+  
+  /**
+    For subclassing, this is the currently displaying content view.
+  */
+  activeContentView: null,
+  
+  /**
+    Called when the top toolbar changes. It appends it, removes any old ones, and calls toolbarsDidChange. 
+    
+    You may want to override this if, for instance, you want to add transitions of some sort (should be trivial).
+  */
+  topToolbarDidChange: function() {
+    var active = this.activeTopToolbar, replacement = this.get("topToolbar");
+    if (active) {
+      this.removeChild(active);
+    }
+    if (replacement) {
+      this.appendChild(replacement);
+    }
+    
+    this.activeTopToolbar = replacement;
+    this.invokeLast("childDidChange");
+  }.observes("topToolbar"),
+  
+  bottomToolbarDidChange: function() {
+    var active = this.activeBottomToolbar, replacement = this.get("bottomToolbar");
+    if (active) {
+      this.removeChild(active);
+    }
+    if (replacement) {
+      this.appendChild(replacement);
+    }
+    
+    this.activeBottomToolbar = replacement;
+    this.invokeLast("childDidChange");
+  }.observes("bottomToolbar"),
+  
+  contentViewDidChange: function() {
+    var active = this.activeContentView, replacement = this.get("contentView");
+    if (active) {
+      this.removeChild(active);
+    }
+    if (replacement) {
+      this.appendChild(replacement);
+    }
+    
+    this.activeContentView = replacement;
+    this.invokeLast("childDidChange");
+  }.observes("contentView"),
+  
+  
+  displayProperties: "hasTopToolbar hasBottomToolbar".w(),
+  
+  renderDelegateName: 'workspaceRenderDelegate'
+});

data/lib/frameworks/sproutcore/frameworks/forms/english.lproj/default_styles.css

@@ -0,0 +1,5 @@
+/* This default stylesheet for forms maximizes fluidity. */
+.sc-label-view.sc-form-label { white-space:pre; text-align: right; }
+
+/* Some fields have some... well, extra (think TextField's glow) */
+.sc-view.sc-form-view .sc-view.sc-form-row-view { overflow:visible; }

data/lib/frameworks/sproutcore/frameworks/forms/english.lproj/strings.js

@@ -0,0 +1,15 @@
+// ==========================================================================
+// Project:   Forms Strings
+// Copyright: ©2009 My Company, Inc.
+// ==========================================================================
+/*globals Forms */
+
+// Place strings you want to localize here.  In your app, use the key and
+// localize it using "key string".loc().  HINT: For your key names, use the
+// english string with an underscore in front.  This way you can still see
+// how your UI will look and you'll notice right away when something needs a
+// localized string added to this file!
+//
+SC.stringsFor('English', {
+  // "_String Key": "Localized String"
+}) ;

data/lib/frameworks/sproutcore/frameworks/forms/mixins/edit_mode.js

@@ -0,0 +1,43 @@
+/**
+  Handles propagation of a property inEditMode to all child views.
+*/
+SC.FormsEditMode = {
+  
+  /**
+    Walks like a duck.
+  */
+  hasEditMode: YES,
+  
+  /**
+    Whether we are in edit mode.
+  */
+  isEditing: NO,
+  
+  /**
+    Handles changes to edit state. Alerts children.
+  */
+  editModeDidChange: function(){
+    this._propagateEditMode();    
+  }.observes("isEditing"),
+  
+  /**
+    Ensures that edit mode is passed to all children.
+  */
+  _scfem_childViewsDidChange: function() {
+    this._propagateEditMode();
+  }.observes("childViews"),
+  
+  /**
+    Propagates edit mode.
+  */
+  _propagateEditMode: function() {
+    var isEditing = this.get("isEditing");
+    var cv = this.get("childViews"), idx, len = cv.length, v;
+    for (idx = 0; idx < len; idx++) {
+      v = cv[idx];
+      if (SC.typeOf(v) === SC.T_STRING || v.isClass) return;
+      if (v.get("hasEditMode")) v.set("isEditing", isEditing);
+    }
+  }
+  
+};