sproutcore 1.4.5 → 1.5.0.pre.3

data/lib/frameworks/sproutcore/apps/test_controls/controllers/category.js

@@ -0,0 +1,36 @@
+// ==========================================================================
+// 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)
+// ==========================================================================
+/*globals TestControls */
+
+/** @class
+
+  (Document Your Controller Here)
+
+  @extends SC.Object
+*/
+TestControls.categoryController = SC.ObjectController.create(
+/** @scope SampleControls.categoryController.prototype */ {
+  contentBinding: "TestControls.categoriesController.selection",
+  contentBindingDefault: SC.Binding.single(),
+  
+  nowShowing: "welcome",
+  
+  delayShow: function() {
+    // wait a moment before loading to let things finish...
+    this.set("nowShowing", this.get("show") || "welcome");
+    this.hideMasterPicker();
+  }.observes("show"),
+  
+  hideMasterPicker: function() {
+    TestControls.mainPage.mainPane.split.hideMasterPicker();
+  },
+  
+  useDarkTheme: NO,
+  themeName: function() {
+    return this.get('useDarkTheme') ? 'dark' : 'ace';
+  }.property('useDarkTheme').cacheable()
+}) ;

data/lib/frameworks/sproutcore/apps/test_controls/core.js

@@ -0,0 +1,29 @@
+// ==========================================================================
+// 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)
+// ==========================================================================
+/*globals TestControls */
+
+/** @namespace
+
+  My cool new app.  Describe your application.
+  
+  @extends SC.Object
+*/
+TestControls = SC.Application.create(
+  /** @scope TestControls.prototype */ {
+
+  NAMESPACE: 'TestControls',
+  VERSION: '0.1.0',
+
+  // This is your application store.  You will use this store to access all
+  // of your model data.  You can also set a data source on this store to
+  // connect to a backend server.  The default setup below connects the store
+  // to any fixtures you define.
+  store: SC.Store.create().from(SC.Record.fixtures)
+  
+  // TODO: Add global constants or singleton objects needed by your app here.
+
+}) ;

data/lib/frameworks/sproutcore/apps/test_controls/main.js

@@ -0,0 +1,14 @@
+// ==========================================================================
+// 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)
+// ==========================================================================
+/*globals TestControls */
+
+TestControls.main = function main() {
+  TestControls.getPath('mainPage.mainPane').append() ;
+  TestControls.categoriesController.set("content", TestControls.rootCategory);
+} ;
+
+function main() { TestControls.main(); }

data/lib/frameworks/sproutcore/apps/test_controls/resources/buttons_page.js

@@ -0,0 +1,142 @@
+// ==========================================================================
+// 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)
+// ==========================================================================
+
+/*globals TestControls Forms*/
+TestControls.buttonsPage = SC.View.design({
+  childViews: "scroll".w(),
+  scroll: SC.ScrollView.design({
+    delaysContentTouches: NO,
+    
+    contentView: SC.FormView.design({
+      labelWidth: 100,
+      flowPadding: { left: 20, top: 30, bottom: 40, right: 20 },
+      classNames: ["sample_controls"],
+      childViews: "header style flags small normal huge jumbo space disclosureHeader disclosureClosed disclosureOpen".w(),
+      header: SC.LabelView.design({
+        flowSize: { widthPercentage: 1 },
+        layout: {width: 200, height: 24 },
+        
+        classNames: "header".w(),
+        value: "Buttons"
+      }),
+      
+      style: SC.FormView.row("Theme", SC.SegmentedView.design({
+        align: 'left',
+        layout: { width: 300, height: 30 },
+        items: [
+          {name: 'Normal', 'value': 'square'},
+          {name: 'Point Left', value: 'point-left'},
+          {name: 'Point Right', value: 'point-right'},
+          {name: 'Capsule', value: 'capsule'}
+        ],
+        
+        itemTitleKey: 'name',
+        itemValueKey: 'value',
+        
+        valueBinding: 'TestControls.buttonsController.theme'
+      })),
+      
+      flags: SC.FormView.row(SC.View.design(SC.FlowedLayout, {
+        childViews: 'shouldToggle shouldDisable shouldBeDefault shouldBeCancel'.w(),
+        
+        isSpacer: YES,
+        
+        shouldToggle: SC.CheckboxView.design({
+          layout: { width: 100, height: 24 },
+          title: "Toggleable",
+          valueBinding: 'TestControls.buttonsController.toggleable'
+        }),
+
+        shouldDisable: SC.CheckboxView.design({
+          layout: { width: 100, height: 24 },
+          title: "Disable",
+          valueBinding: 'TestControls.buttonsController.disabled'
+        }),
+
+        shouldBeDefault: SC.CheckboxView.design({
+          layout: { width: 100, height: 24 },
+          title: "Default",
+          valueBinding: 'TestControls.buttonsController.default'
+        }),
+
+        shouldBeCancel: SC.CheckboxView.design({
+          layout: { width: 100, height: 24 },
+          title: "Cancel",
+          valueBinding: 'TestControls.buttonsController.cancel'
+        })
+      })),
+      
+      normal: SC.FormView.row(SC.ButtonView.design({
+        controlSize: SC.REGULAR_CONTROL_SIZE,
+        layout: { height: 24, width: 100 },
+        title: "Click Me",
+        
+        themeNameBinding: 'TestControls.buttonsController.theme',
+        buttonBehaviorBinding: 'TestControls.buttonsController.buttonBehavior',
+        isEnabledBinding: SC.Binding.not('TestControls.buttonsController.disabled'),
+        isDefaultBinding: 'TestControls.buttonsController.default',
+        isCancelBinding: 'TestControls.buttonsController.cancel'
+      })),
+
+      small: SC.FormView.row(SC.ButtonView.design({
+        controlSize: SC.SMALL_CONTROL_SIZE,
+        layout: { height: 18, width: 100 },
+        title: "Click Me",
+        
+        themeNameBinding: 'TestControls.buttonsController.theme',
+        buttonBehaviorBinding: 'TestControls.buttonsController.buttonBehavior',
+        isEnabledBinding: SC.Binding.not('TestControls.buttonsController.disabled'),
+        isDefaultBinding: 'TestControls.buttonsController.default',
+        isCancelBinding: 'TestControls.buttonsController.cancel'
+      })),
+
+      huge: SC.FormView.row(SC.ButtonView.design({
+        controlSize: SC.HUGE_CONTROL_SIZE,
+        layout: { height: 30, width: 100 },
+        title: "Click Me",
+        
+        themeNameBinding: 'TestControls.buttonsController.theme',
+        buttonBehaviorBinding: 'TestControls.buttonsController.buttonBehavior',
+        isEnabledBinding: SC.Binding.not('TestControls.buttonsController.disabled'),
+        isDefaultBinding: 'TestControls.buttonsController.default',
+        isCancelBinding: 'TestControls.buttonsController.cancel'
+      })),
+
+      jumbo: SC.FormView.row(SC.ButtonView.design({
+        controlSize: SC.JUMBO_CONTROL_SIZE,
+        layout: { height: 44, width: 100 },
+        title: "Click Me",
+        
+        themeNameBinding: 'TestControls.buttonsController.theme',
+        buttonBehaviorBinding: 'TestControls.buttonsController.buttonBehavior',
+        isEnabledBinding: SC.Binding.not('TestControls.buttonsController.disabled'),
+        isDefaultBinding: 'TestControls.buttonsController.default',
+        isCancelBinding: 'TestControls.buttonsController.cancel'
+      })),
+      
+      space: SC.View.design({
+        isSpacer: YES,
+        fillWidth: YES
+      }),
+      disclosureHeader: SC.LabelView.design({
+        layout: { width: 400, height: 24 },
+        classNames: "header".w(),
+        value: "Disclosure Buttons"
+      }),
+      disclosureClosed: SC.FormView.row(SC.DisclosureView.design({
+        layout: { height: 24, width: 100 },
+        title: "Disclosure Closed",
+        value: NO
+      })),
+      disclosureOpen: SC.FormView.row(SC.DisclosureView.design({
+        layout: { height: 24, width: 150 },
+        title: "Disclosure Open",
+        value: YES
+      }))
+    })
+  })
+});

data/lib/frameworks/sproutcore/apps/test_controls/resources/checkboxes_page.js

@@ -0,0 +1,45 @@
+// ==========================================================================
+// 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)
+// ==========================================================================
+
+/*globals TestControls Forms*/
+TestControls.checkboxesPage = SC.View.design({
+  childViews: "form".w(),
+  form: SC.FormView.design({
+    classNames: ["sample_controls"],
+    layout: { left: 20, top: 40, right: 20, bottom: 40 },
+    childViews: "header small normal disabled multiple".w(),
+    
+    header: SC.LabelView.design({
+      layout: { width: 200, height: 24 },
+      classNames: "header".w(),
+      value: "Checkboxes"
+    }),
+    
+    small: SC.FormView.row(SC.CheckboxView.design({
+      layout: {width: 150, height: 24},
+      title: "Check Me",
+      controlSize: SC.SMALL_CONTROL_SIZE
+    })),
+    
+    normal: SC.FormView.row(SC.CheckboxView.design({
+      layout: { width: 150, height: 24 },
+      title: "Check Me"
+    })),
+    
+    disabled: SC.FormView.row(SC.CheckboxView.design({
+      layout: { width: 150, height: 24 },
+      isEnabled: NO,
+      title: "Don't Check Me"
+    })),
+    
+    multiple: SC.FormView.row(SC.CheckboxView.design({
+      layout: { width: 150, height: 24 },
+      value: [YES, NO],
+      title: "Multiple? Really?"
+    }))
+  })
+});

data/lib/frameworks/sproutcore/apps/test_controls/resources/flow_layout_page.js

@@ -0,0 +1,84 @@
+// ==========================================================================
+// 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)
+// ==========================================================================
+
+/*globals TestControls Forms*/
+TestControls.flowLayoutPage = SC.View.design({
+  childViews: "form".w(),
+  form: SC.FormView.design({
+    classNames: ["sample_controls"],
+    layout: { left: 20, top: 40, right: 20, bottom: 40 },
+    childViews: "header normal vertical".w(),
+    header: SC.LabelView.design({
+      layout: { width: 300, height: 24 },
+      classNames: "header".w(),
+      value: "Flow Layout"
+    }),
+    normal: SC.FormView.row(SC.View.extend(SC.Animatable, SC.FlowedLayout, SC.AutoMixin, {
+      isSpacer: YES,
+      
+      init: function() {
+        sc_super();
+        this.style.overflow = "visible";
+        SC.Timer.schedule({
+          target: this,
+          action: "hideOne",
+          interval: 1000,
+          repeats: YES
+        });
+      },
+      
+      hideOne: function() {
+        if (this._hasHidden) this.b.set("isHidden", NO);
+        else this.b.set("isHidden", YES);
+        this._hasHidden = !this._hasHidden;
+      },
+      
+      autoMixins: [SC.Animatable, {
+        transitions: { left: 0.25, top: 0.25, width: 0.25, opacity: 0.25 }
+      }],
+      
+      childViews: "a s b s2 c d".w(),
+      layout: { width: 600 },
+      align: SC.ALIGN_RIGHT,
+      layoutDirection: SC.LAYOUT_HORIZONTAL,
+      defaultFlowSpacing: {
+        left: 10, top: 10, right: 10, bottom: 0
+      },
+      a: SC.ButtonView.design({ flowSpacing: { top: 5, left: 4, right: 3, bottom: 2 }, layout: {width: 150, height: 24}, title: "a" }),
+      s: SC.View.design({ isSpacer: YES, spaceUnits: 2, backgroundColor: "gray", layout: {width: 0, height: 24} }),
+      b: SC.ButtonView.design({ 
+        layout: {width: 190, height: 24}, 
+        title: "b",
+        isHiddenDidChange: function() {
+          this.adjust("opacity", this.get("isHidden") ? 0 : 1);
+          this.set('useAbsoluteLayout', this.get('isHidden'));
+        }.observes("isHidden")
+      }),
+      s2: SC.View.design({ isSpacer: YES, spaceUnits: 1, backgroundColor: "gray", layout: {width: 0, height: 24} }),
+      c: SC.ButtonView.design({ layout: {width: 120, height: 24 }, title: "c" }),
+      d: SC.ButtonView.design({ layout: {width: 200, height: 24 }, title: "d" })
+    })),
+    
+    vertical: SC.FormView.row(SC.View.extend(SC.FlowedLayout, {
+      layout: { height: 100 },
+      childViews: "a s b s2 c d".w(),
+      isSpacer: YES,
+      
+      layoutDirection: SC.LAYOUT_VERTICAL,
+      align: SC.ALIGN_CENTER,
+      defaultFlowSpacing: {
+        left: 10, top: 10, right: 10, bottom: 0
+      },
+      a: SC.ButtonView.design({ flowSpacing: { top: 5, left: 4, right: 3, bottom: 2 }, layout: {width: 150, height: 24}, title: "a" }),
+      s: SC.View.design({ fillWidth: YES, isSpacer: YES, spaceUnits: 2 }),
+      b: SC.ButtonView.design({ layout: {width: 190, height: 24}, title: "b" }),
+      s2: SC.View.design({ fillWidth: YES, isSpacer: YES, spaceUnits: 1 }),
+      c: SC.ButtonView.design({ layout: {width: 120, height: 24 }, title: "c" }),
+      d: SC.ButtonView.design({ layout: {width: 200, height: 24 }, title: "d" })
+    }))
+  })
+});

data/lib/frameworks/sproutcore/apps/test_controls/resources/list_page.js

@@ -0,0 +1,40 @@
+// ==========================================================================
+// 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)
+// ==========================================================================
+
+/*globals TestControls Forms*/
+TestControls.listPage = SC.View.design({
+  childViews: "scroll".w(),
+  scroll: SC.ScrollView.design({
+    backgroundColor: "white",
+    contentView: SC.ListView.design({
+      hasContentIcon: YES,
+      hasContentRightIcon: YES,
+      contentIconKey: "icon",
+      contentRightIconKey: "rightIcon",
+      contentCheckboxKey: "isChecked",
+      contentUnreadCountKey: "unread",
+      
+      
+      classNames: ['big-list'],
+      rowHeight: 44,
+      content: function() {
+        var idx = 0, ret = [];
+        for (idx = 0; idx < 1000; idx++) {
+          ret.push(SC.Object.create({
+            "title": "Item " + idx,
+            "icon": "sc-icon-document-16",
+            "unread": idx,
+            rightIcon: "sc-icon-info-16",
+            isChecked: YES
+          }));
+        }
+        return ret;
+      }.property().cacheable(),
+      contentValueKey: "title"
+    })
+  })
+});

data/lib/frameworks/sproutcore/apps/test_controls/resources/loading.rhtml

@@ -0,0 +1,9 @@
+<% content_for :loading do %>
+<% # Any HTML in this file will be visible on screen while your page loads
+   # its application JavaScript.  SproutCore applications are optimized for 
+   # caching and startup very fast, so your users will often only see this 
+   # content for a brief moment on their first app load, if at all.
+%>
+<p class="loading">Loading<p>
+
+<% end %>

data/lib/frameworks/sproutcore/apps/test_controls/resources/main_page.css

@@ -0,0 +1,60 @@
+/* @group Welcome */
+.sc-view {
+  
+}
+.sc-theme .sc-view.sc-toolbar-view.ace.light {
+  -webkit-transform: translate3d(0px, 0px, 10px);
+  -webkit-box-shadow: none;
+}
+
+.sc-theme .sc-view.sc-label-view.list-item {
+	font-size: 32px;
+	font-weight: bold;
+	border-bottom: 1px solid #999;
+}
+
+.sc-toolbar-view .embossed {
+  font-size: 22px;
+}
+
+.sample_controls .sc-form-row-view .sc-form-label {
+  -webkit-transform: translate3d(0px, 0px, 1px);
+  font-weight: bold;
+  color: #555;
+  text-shadow: 0px 1px 1px white;
+}
+
+.sc-label-view.header {
+  font-size: 24px;
+  color:#555;
+  text-shadow:0px 1px 1px white;
+  padding-bottom:10px;
+}
+
+.sc-label-view.welcome-tab {
+ padding: 30px;
+ background-color: white ;
+}
+
+.welcome-tab h1 {
+ font-size: 48px;
+ line-height: 1;
+ margin-top: 30px;
+ font-weight: normal ;
+ letter-spacing: -2px;
+ color: black;
+}
+
+.welcome-tab p {
+ color: #333;
+ font-size: 14px;
+}
+
+@theme(dark) {
+  $theme.workspace {
+    background: black;
+  }
+}
+
+/* @end */
+