sproutit-sproutcore 1.0.20090721145236 → 1.0.20090721145251

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

@@ -0,0 +1,54 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+var iconURL= "http://www.freeiconsweb.com/Icons/16x16_people_icons/People_046.gif";
+
+module("SC.TabView", {
+  setup: function() {
+    SC.RunLoop.begin();
+    pane = SC.MainPane.create({
+      childViews: [
+        SC.TabView.extend({
+          nowShowing: 'tab2',
+
+          items: [
+            { title: "tab1", value: "tab1" , icon: iconURL},
+            { title: "tab2", value: "tab2" , icon: iconURL},
+            { title: "tab3", value: "tab3" , icon: iconURL}
+          ],
+
+          itemTitleKey: 'title',
+          itemValueKey: 'value',
+          itemIconKey: 'icon',
+          layout: { left:12, height: 200, right:12, top:12 }
+          
+        })]
+    });
+    pane.append(); // make sure there is a layer...
+    SC.RunLoop.end();
+    
+    view = pane.childViews[0];
+  }, 
+  
+  teardown: function() {
+    pane.remove();
+    pane = view = null ;
+  }
+});
+
+test("Check that all segmentedViews are visible", function() {
+   ok(true, 'hello');
+ });
+
+
+//_tab_nowShowingDidChange: function() {
+
+//_tab_saveUserDefault: function() {
+
+//_tab_itemsDidChange: function() {

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

@@ -0,0 +1,88 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+
+htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
+
+(function() {
+  var iconURL= "http://www.freeiconsweb.com/Icons/16x16_people_icons/People_046.gif";
+  
+  var pane = SC.ControlTestPane.design()
+    
+    .add("tabView1", SC.TabView, { 
+      nowShowing: 'tab2',
+
+      items: [
+        { title: "tab1", value: "tab1" , icon: iconURL},
+        { title: "tab2", value: "tab2" , icon: iconURL},
+        { title: "tab3", value: "tab3" , icon: iconURL}
+      ],
+      
+      itemTitleKey: 'title',
+      itemValueKey: 'value',
+      itemIconKey: 'icon',
+      layout: { left:12, height: 200, right:12, top:12 }
+      
+  })
+  
+  .add("tabView2", SC.TabView, { 
+    nowShowing: 'tab3',
+
+    items: [
+      { title: "tab1", value: "tab1" },
+      { title: "tab2", value: "tab2" },
+      { title: "tab3", value: "tab3" }
+    ],
+    
+    itemTitleKey: 'title',
+    itemValueKey: 'value',
+    layout: { left:12, height: 200, right:12, top:12 }
+    
+    })
+    .add("tabView3", SC.TabView, { 
+      
+      items: [
+        { title: "tab1", value: "tab1" },
+        { title: "tab2", value: "tab2" },
+        { title: "tab3", value: "tab3" }
+      ],
+      
+      itemTitleKey: 'title',
+      itemValueKey: 'value',
+      layout: { left:12, height: 200, right:12, top:12}
+    });
+    
+  pane.show(); // add a test to show the test pane
+
+  // ..........................................................
+  // TEST VIEWS
+  // 
+  module('SC.TabView ui', pane.standardSetup());
+  
+  test("Check that all tabViews are visible", function() {
+    ok(pane.view('tabView1').get('isVisibleInWindow'), 'tabView1.isVisibleInWindow should be YES');
+    ok(pane.view('tabView2').get('isVisibleInWindow'), 'tabView2.isVisibleInWindow should be YES');
+    ok(pane.view('tabView3').get('isVisibleInWindow'), 'tabView3.isVisibleInWindow should be YES');
+   });
+   
+   
+   test("Check that the tabView has the right classes set", function() {
+     var viewElem=pane.view('tabView1').$();
+     var views=pane.view('tabView1').$('div');
+     ok(viewElem.hasClass('sc-view'), 'tabView1.hasClass(sc-view) should be YES');
+     ok(viewElem.hasClass('sc-tab-view'), 'tabView1.hasClass(sc-tab-view) should be YES');
+     ok(views[1].className.indexOf('sc-segmented-view')>=0, 'tabView1 should contain a segmented view');
+     ok(views[0].className.indexOf('sc-container-view')>=0, 'tabView1 should contain a container view');
+     ok(views[1].childNodes.length==3, 'tabView1 should have 3 options');
+     
+
+   });
+  
+
+})();

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

@@ -0,0 +1,10 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+module("TODO: Test SC.WebView Methods");

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

@@ -0,0 +1,110 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+/*global module test htmlbody ok equals same stop start v*/
+
+(function() {
+  var pane = SC.ControlTestPane.design()
+
+  .add("basic", SC.WebView, {
+    value: "/clock",
+    layout: {
+      width: 250,
+      height: 150
+    }
+  }).add("change src/value", SC.WebView, {
+    value: "/clock",
+    layout: {
+      width: 250,
+      height: 150
+    }
+  }).add("auto resize", SC.WebView, {
+    value: sc_static('iframe'),
+    shouldAutoResize: YES,
+    layout: {
+      width: 250,
+      height: 150
+    }
+  }).add("don\'t auto resize", SC.WebView, {
+    shouldAutoResize: NO,
+    //set the value later when you need it
+    layout: {
+      width: 250,
+      height: 150
+    }
+  });
+
+  pane.show(); // add a test to show the test pane
+  // ..........................................................
+  // TEST VIEWS
+  // 
+  module('SC.WebView UI');
+
+  test("attributes tests",
+  function() {
+    var view = pane.view('basic');
+    var iframe = view.$('iframe');
+    var rootElement = view.$();
+    ok(view, 'view should exist');
+    ok(view.get('value'), 'should have value property');
+    equals(view.get('shouldAutoResize'), NO, 'should have autoresize off by default, shouldAutoResize');
+    ok(rootElement.hasClass('sc-view'), 'should have sc-view css class');
+    ok(rootElement.hasClass('sc-web-view'), 'should have sc-web-view css class');
+    equals(rootElement.height(), 150, 'should have height');
+    equals(rootElement.width(), 250, 'should have width');
+    ok(iframe, 'should have iframe element');
+    equals(iframe.attr('src'), "/clock", "should have source as /clock");
+    ok(iframe[0].contentWindow, 'should have content window if src is from the same domain');
+
+  });
+
+  test('change src/value',
+  function() {
+    var view = pane.view('change src/value');
+    var iframe = view.$('iframe');
+    equals(view.get('value'), "/clock", "should have value property in view as \'/clock\' before changing source");
+    SC.RunLoop.begin();
+    view.set('value', "/store_configurator");
+    SC.RunLoop.end();
+    equals(view.get('value'), "/store_configurator", "should have value property in view as \'/store_configurator\' after changing source");
+    equals(iframe.attr('src'), "/store_configurator", "should have source in the iframe as \'/store_configurator\'");
+  });
+
+  test('auto resize tests, shouldAutoResize:YES',
+  function() {
+    var view = pane.view('auto resize');
+    //set the test wrapper element's overflow to auto so that you can see the resize magic'
+    view.$()[0].parentNode.style.overflow = "auto";
+    equals(view.get('shouldAutoResize'), YES, 'should have auto resize flag as true');
+    stop();
+    SC.Event.add(view.$('iframe')[0], 'load', this,
+    function() {
+      ok(view.$().height() > 150, "height of view should change based on content");
+      ok(view.$().width() > 200, "width of view should change based on content");
+      start();
+    });
+  });
+
+  test('auto resize tests, shouldAutoResize:NO',
+  function() {
+    var view = pane.view('don\'t auto resize');
+    equals(view.get('shouldAutoResize'), NO, 'should have auto resize flag as false');
+    
+    /** set the src a bit late so that the following onload event get's hooked 
+    up before it actually loads
+    */
+    SC.RunLoop.begin();
+    view.set('value', sc_static('iframe'));
+    SC.RunLoop.end();
+    stop();
+    SC.Event.add(view.$('iframe')[0], 'load', this,
+    function() {
+      ok(view.$().height() === 150, "height of view should not change based on content");
+      ok(view.$().width() === 250, "width of view should not change based on content");
+      start();
+    });
+  });
+})();

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

@@ -0,0 +1,331 @@
+// ==========================================================================
+// 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)
+// ==========================================================================
+
+/*jslint evil:true */
+
+// Constants
+SC.TOGGLE_BEHAVIOR = 'toggle';
+SC.PUSH_BEHAVIOR =   'push';
+SC.TOGGLE_ON_BEHAVIOR = "on";
+SC.TOGGLE_OFF_BEHAVIOR = "off" ;  
+
+/** @class
+
+  Implements a push-button-style button.  This class is used to implement 
+  both standard push buttons and tab-style controls.  See also SC.CheckboxView
+  and SC.RadioView which are implemented as field views, but can also be 
+  treated as buttons.
+  
+  @extends SC.View
+  @extends SC.Control
+  @extends SC.Button
+  @since SproutCore 1.0  
+*/
+SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
+/** @scope SC.ButtonView.prototype */ {
+  
+  tagName: 'a',
+  classNames: ['sc-button-view'],
+  
+  /**
+    optionally set this to the theme you want this button to have.  
+    
+    This is used to determine the type of button this is.  You generally 
+    should set a class name on the HTML with the same value to allow CSS 
+    styling.
+    
+    The default SproutCore theme supports "regular", "checkbox", and "radio"
+  */
+  theme: 'square',
+  
+  /**
+    Optionally set the behavioral mode of this button.  
+  
+    Possible values are:
+
+    - *SC.PUSH_BEHAVIOR* Pressing the button will trigger an action tied to the button. Does not change the value of the button.
+    - *SC.TOGGLE_BEHAVIOR* Pressing the button will invert the current value of the button. If the button has a mixed value, it will be set to true.
+    - *SC.TOGGLE_ON_BEHAVIOR* Pressing the button will set the current state to true no matter the previous value.
+    - *SC.TOGGLE_OFF_BEHAVIOR* Pressing the button will set the current state to false no matter the previous value.
+  
+  */  
+  buttonBehavior: SC.PUSH_BEHAVIOR,
+
+  /**
+    If YES, then this button will be triggered when you hit return.
+    
+    This is the same as setting the keyEquivalent to 'return'.  This will also
+    apply the "def" classname to the button.
+  */
+  isDefault: NO,
+  isDefaultBindingDefault: SC.Binding.oneWay().bool(),
+  
+  /**
+    If YES, then this button will be triggered when you hit escape.
+    
+    This is the same as setting the keyEquivalent to 'escape'.
+  */  
+  isCancel: NO,
+  isCancelBindingDefault: SC.Binding.oneWay().bool(),
+
+  /**
+    The button href value.  This can be used to create localized button href values.  Setting an empty or null href will set it to javascript:;
+  */
+  href: '',
+
+  /**
+    The name of the action you want triggered when the button is pressed.  
+    
+    This property is used in conjunction with the target property to execute
+    a method when a regular button is pressed.  These properties are not 
+    relevant when the button is used in toggle mode.
+    
+    If you do not set a target, then pressing a button will cause the
+    responder chain to search for a view that implements the action you name
+    here.  If you set a target, then the button will try to call the method
+    on the target itself.
+    
+    For legacy support, you can also set the action property to a function.  
+    Doing so will cause the function itself to be called when the button is
+    clicked.  It is generally better to use the target/action approach and 
+    to implement your code in a controller of some type.
+    
+    @type String
+  */
+  action: null,
+  
+  /**
+    The target object to invoke the action on when the button is pressed.
+    
+    If you set this target, the action will be called on the target object
+    directly when the button is clicked.  If you leave this property set to
+    null, then the button will search the responder chain for a view that 
+    implements the action when the button is pressed instead.
+    
+    @type Object
+  */
+  target: null,
+  
+  /**
+    fakes a click... evt is optional.  
+    
+    Temporarily highlights the button to show that it is being triggered.  
+    Does nothing if the button is disabled. 
+    
+    @returns {bool} success/failure of the request
+  */  
+  triggerAction: function(evt) {  
+    if (!this.get('isEnabled')) return false;
+    this.set('isActive', YES);
+    this._action(evt);
+    this.didTriggerAction();
+    this.invokeLater('set', 200, 'isActive', NO);
+    return true;
+  },
+  
+  /**
+    This method is called anytime the button's action is triggered.  You can implement this method in your own subclass to perform any cleanup needed after an action is performed.
+  */
+  didTriggerAction: function() {},
+
+  /**
+    The minimum width the button title should consume.  This property is used
+    when generating the HTML styling for the title itself.  The default 
+    width of 80 usually provides a nice looking style, but you can set it to 0
+    if you want to disable minimum title width.
+    
+    Note that the title width does not exactly match the width of the button
+    itself.  Extra padding added by the theme can impact the final total
+    size.
+  */
+  titleMinWidth: 80,
+  
+  // ................................................................
+  // INTERNAL SUPPORT
+
+  /** @private - save keyEquivalent for later use */
+  init: function() {
+    sc_super();
+    
+    //cache the key equivalent
+    if(this.get("keyEquivalent")) this._defaultKeyEquivalent = this.get("keyEquivalent"); 
+  },
+
+  _TEMPORARY_CLASS_HASH: {},
+  
+  // display properties that should automatically cause a refresh.
+  // isCancel and isDefault also cause a refresh but this is implemented as 
+  // a separate observer (see below)
+  displayProperties: ['href', 'icon', 'title', 'value', 'toolTip'],
+
+  render: function(context, firstTime) {
+    // add href attr if tagName is anchor...
+    if (this.get('tagName') === 'a') {
+      var href = this.get('href');
+      if (!href || (href.length === 0)) href = "javascript"+":;";
+      context.attr('href', href);
+    }
+
+    // If there is a toolTip set, grab it and localize if necessary.
+    var toolTip = this.get('toolTip') ;
+    if(SC.typeOf(toolTip) === SC.T_STRING) {
+        context.attr('title', this.get('localize') ? toolTip.loc() : toolTip) ;
+        context.attr('alt', this.get('localize') ? toolTip.loc() : toolTip) ;
+    }
+    
+    // add some standard attributes & classes.
+    var classes = this._TEMPORARY_CLASS_HASH;
+    classes.def = this.get('isDefault');
+    classes.cancel = this.get('isCancel');
+    classes.icon = !!this.get('icon');
+    context.attr('role', 'button')
+      .setClass(classes).addClass(this.get('theme'));
+    // render inner html 
+    if(firstTime){
+      context = context.push("<span class='sc-button-inner' style = 'min-width:%@px'>"
+          .fmt(this.get('titleMinWidth')));
+      this.renderTitle(context, firstTime) ; // from button mixin
+      context.push("</span>") ;
+    }else{
+      this.renderTitle(context, firstTime) ;
+    }
+   },
+  
+  /** @private {String} used to store a previously defined key equiv */
+  _defaultKeyEquivalent: null,
+  
+  /** @private
+    Whenever the isDefault or isCancel property changes, update the display and change the keyEquivalent.
+  */  
+  _isDefaultOrCancelDidChange: function() {
+    var isDef = !!this.get('isDefault') ;
+    var isCancel = !isDef && this.get('isCancel') ;
+    
+    if(this.didChangeFor('defaultCancelChanged','isDefault','isCancel')) {
+      this.displayDidChange() ; // make sure to update the UI
+      if (isDef) {
+        this.set('keyEquivalent', 'return'); // change the key equivalent
+      } else if (isCancel) {
+        this.setIfChanged('keyEquivalent', 'escape') ;
+      } else {
+        //restore the default key equivalent
+        this.set("keyEquivalent",this._defaultKeyEquivalent);
+      }
+    }
+      
+  }.observes('isDefault', 'isCancel'),
+    
+  isMouseDown: false, 
+
+  /** @private 
+    On mouse down, set active only if enabled.
+  */    
+  mouseDown: function(evt) {
+    if (!this.get('isEnabled')) return YES ; // handled event, but do nothing
+    this.set('isActive', YES);
+    this._isMouseDown = YES;
+    return YES ;
+  },
+
+  /** @private
+    Remove the active class on mouseOut if mouse is down.
+  */  
+  mouseExited: function(evt) {
+    if (this._isMouseDown) this.set('isActive', NO);
+    return YES;
+  },
+
+  /** @private
+    If mouse was down and we renter the button area, set the active state again.
+  */  
+  mouseEntered: function(evt) {
+    this.set('isActive', this._isMouseDown);
+    return YES;
+  },
+
+  /** @private
+    ON mouse up, trigger the action only if we are enabled and the mouse was released inside of the view.
+  */  
+  mouseUp: function(evt) {
+    if (this._isMouseDown) this.set('isActive', NO); // track independently in case isEnabled has changed
+    this._isMouseDown = false;
+    var inside = this.$().within(evt.target) ;
+    if (inside && this.get('isEnabled')) this._action(evt) ;
+    return true ;
+  },
+
+  /** @private  Perform an action based on the behavior of the button.
+  
+   - toggle behavior: switch to on/off state
+   - on behavior: turn on.
+   - off behavior: turn off.
+   - otherwise: invoke target/action
+  */
+  _action: function(evt) {
+    switch(this.get('buttonBehavior')) {
+      
+    // When toggling, try to invert like values. i.e. 1 => 0, etc.
+    case SC.TOGGLE_BEHAVIOR:
+      var sel = this.get('isSelected') ;
+      if (sel) {
+        this.set('value', this.get('toggleOffValue')) ;
+      } else {
+        this.set('value', this.get('toggleOnValue')) ;
+      }
+      break ;
+      
+    // set value to on.  change 0 => 1.
+    case SC.TOGGLE_ON_BEHAVIOR:
+      this.set('value', this.get('toggleOnValue')) ;
+      break ;
+      
+    // set the value to false. change 1 => 0
+    case SC.TOGGLE_OFF_BEHAVIOR:
+      this.set('value', this.get('toggleOffValue')) ;
+      break ;
+      
+    // otherwise, just trigger an action if there is one.
+    default:
+      //if (this.action) this.action(evt);
+      var action = this.get('action');
+      var target = this.get('target') || null;
+      if (action) {
+        if (this._hasLegacyActionHandler()) {
+          // old school... 
+          this._triggerLegacyActionHandler(evt);
+        } else {
+          // newer action method + optional target syntax...
+          this.getPath('pane.rootResponder').sendAction(action, target, this, this.get('pane'));
+        }
+      }
+    }
+  },
+  
+  /** @private */
+  _hasLegacyActionHandler: function()
+  {
+    var action = this.get('action');
+    if (action && (SC.typeOf(action) == SC.T_FUNCTION)) return true;
+    if (action && (SC.typeOf(action) == SC.T_STRING) && (action.indexOf('.') != -1)) return true;
+    return false;
+  },
+
+  /** @private */
+  _triggerLegacyActionHandler: function( evt )
+  {
+    if (!this._hasLegacyActionHandler()) return false;
+    
+    var action = this.get('action');
+    if (SC.typeOf(action) == SC.T_FUNCTION) this.action(evt);
+    if (SC.typeOf(action) == SC.T_STRING) {
+      eval("this.action = function(e) { return "+ action +"(this, e); };");
+      this.action(evt);
+    }
+  }
+  
+}) ;
+