sproutcore 1.10.2 → 1.10.3.1

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

@@ -392,8 +392,8 @@ SC.SelectView = SC.ButtonView.extend(
   */
   itemsDidChange: function() {
     var escapeHTML, items, len, nameKey, iconKey, valueKey, separatorKey, showCheckbox,
-        currentSelectedVal, shouldLocalize, isSeparator, itemList, isChecked,
-        idx, name, icon, value, item, itemEnabled, isEnabledKey, emptyName, isSameRecord;
+      currentSelectedVal, shouldLocalize, isSeparator, itemList, isChecked,
+      idx, name, icon, value, item, itemEnabled, isEnabledKey, emptyName, isSameRecord;
 
     items = this.get('items') || [];
     items = this.sortObjects(items);
@@ -468,7 +468,12 @@ SC.SelectView = SC.ButtonView.extend(
         // get the separator
         isSeparator = separatorKey ? (object.get ? object.get(separatorKey) : object[separatorKey]) : NO;
 
-          if (!isSeparator) {
+        if (isSeparator) {
+          item = SC.Object.create({
+            isSeparator: true,
+            value: '_sc_separator_item'
+          });
+        } else {
           //Get the name value. If value key is not specified convert obj
           //to string
           name = nameKey ? (object.get ?
@@ -514,8 +519,7 @@ SC.SelectView = SC.ButtonView.extend(
             //set the _itemIdx - To change the prefMatrix accordingly.
             this.set('_itemIdx', idx);
             isChecked = !showCheckbox ? NO : YES;
-          }
-          else {
+          } else {
             isChecked = NO;
           }
 
@@ -530,18 +534,17 @@ SC.SelectView = SC.ButtonView.extend(
             this._defaultTitle = name;
             this._defaultIcon = icon;
           }
-        }
 
-        item = SC.Object.create({
-          isSeparator: isSeparator,
-          title: name,
-          icon: icon,
-          value: value,
-          isEnabled: itemEnabled,
-          checkbox: isChecked,
-          target: this,
-          action: 'displaySelectedItem'
-        });
+          item = SC.Object.create({
+            action: 'displaySelectedItem',
+            title: name,
+            icon: icon,
+            value: value,
+            isEnabled: itemEnabled,
+            checkbox: isChecked,
+            target: this
+          });
+        }
 
         //Set the items in the itemList array
         itemList.push(item);
@@ -718,10 +721,31 @@ SC.SelectView = SC.ButtonView.extend(
     var currentItem = menuView.get("selectedItem");
 
     this.set("value", currentItem.get("value"));
-    this.set("title", currentItem.get("title"));
-    this.set("_itemIdx", currentItem.get("contentIndex"));
   },
 
+  /** @private Each time the value changes, update each item's checkbox property and update our display properties. */
+  valueDidChange: function () {
+    var itemList = this._itemList,
+      showCheckbox = this.get('showCheckbox'),
+      value = this.get('value');
+
+    // Find the newly selected item (if any).
+    for (var i = 0, len = itemList.length; i < len; i++) {
+      var item = itemList[i],
+        isChecked = false;
+
+      if (value === item.get('value')) {
+        isChecked = showCheckbox;
+        this.set("title", item.get("title"));
+        this.set("icon", item.get("icon"));
+        this.set("_itemIdx", item.get("contentIndex"));
+      }
+
+      item.set('checkbox', isChecked);
+    }
+
+  }.observes('value'),
+
   /** @private
      Set the "top" attribute in the prefer matrix property which will
      position menu such that the selected item in the menu will be

data/lib/frameworks/sproutcore/frameworks/foundation/mixins/editable.js

@@ -8,145 +8,145 @@
 /**
   @namespace
 
-  The Editable mixin is a standard protocol used to activate keyboard editing 
+  The Editable mixin is a standard protocol used to activate keyboard editing
   on views that are editable such as text fields, label views and item views.
-  
+
   You should apply this mixin, or implement the methods, if you are
   designing an item view for a collection and you want to automatically
   trigger editing.
-  
+
   ## Using Editable Views
-  
+
   To use a view that includes the Editable mixin, you simply call three
   methods on the view:
-  
+
     - To begin editing, call beginEditing().  This will make the view first responder and allow the user to make changes to it.  If the view cannot begin editing for some reason, it will return NO.
     - If you want to cancel editing, you should try calling discardEditing().  This will cause the editor to discard its changed value and resign first responder.  Some editors do not support cancelling editing and will return NO.  If this is the case, you may optionally try calling commitEditing() instead to force the view to resign first responder, even though this will commit the changes.
     - If you want to end editing, while saving any changes that were made, try calling commitEditing().  This will cause the editor to validate and apply its changed value and resign first responder.  If the editor cannot validate its contents for some reason, it will return NO.  In this case you may optionally try calling discardEditing() instead to force the view to resign first responder, even though this will discard the changes.
-  
+
   ## Implementing an Editable View
-  
+
   To implement a new view that is editable, you should implement the three
   methods defined below: beginEditing(), discardEditing(), and
   commitEditing().  If you already allow editing when your view becomes first
   responder and commit your changes when the view loses first responder status
   then you can simply apply this mixin and not override any methods.
-  
-  
+
+
   @since SproutCore 1.0
 */
 SC.Editable = {
 
   /**
-    Indicates whether a view is editable or not.  You can optionally 
+    Indicates whether a view is editable or not.  You can optionally
     implement the methods in this mixin to disallow editing is isEditable is
     NO.
-    
+
     @type Boolean
     @default NO
   */
   isEditable: NO,
-  
+
   /**
     Indicates whether editing is currently in progress.  The methods you
-    implement should generally up this property as appropriate when you 
+    implement should generally up this property as appropriate when you
     begin and end editing.
-    
+
     @type Boolean
     @default NO
   */
   isEditing: NO,
-  
+
   /**
     Begins editing on the view.
-    
+
     This method is called by other views when they want you to begin editing.
-    You should write this method to become first responder, perform any 
+    You should write this method to become first responder, perform any
     additional setup needed to begin editing and then return YES.
-    
+
     If for some reason you do not want to allow editing right now, you can
     also return NO.  If your view is already editing, then you should not
     restart editing again but just return YES.
 
     The default implementation checks to see if editing is allowed, then
     becomes first responder and updates the isEditing property if appropriate.
-    Generally you will want to replace this method with your own 
+    Generally you will want to replace this method with your own
     implementation and not call the default.
-    
+
     @returns {Boolean} YES if editing began or is in progress, NO otherwise
   */
   beginEditing: function() {
     if (!this.get('isEditable')) return NO ;
     if (this.get('isEditing')) return YES ;
-    
+
     // begin editing
     this.beginPropertyChanges();
     this.set('isEditing', YES) ;
     this.becomeFirstResponder();
     this.endPropertyChanges();
-    
+
     return YES ;
   },
-  
+
   /**
     Ends editing on the view, discarding any changes that were made to the
     view value in the meantime.
-    
+
     This method is called by other views when they want to cancel editing
     that began earlier.  When this method is called you should resign first
     responder, restore the original value of the view and return YES.
-    
+
     If your view cannot revert back to its original state before editing began
     then you can implement this method to simply return NO.  A properly
     implemented client may try to call commitEditing() instead to force your
     view to end editing anyway.
-    
+
     If this method is called on a view that is not currently editing, you
     should always just return YES.
-    
+
     The default implementation does not support discarding changes and always
     returns NO.
-    
+
     @returns {Boolean} YES if changes were discarded and editing ended.
   */
   discardEditing: function() {
     // if we are not editing, return YES, otherwise NO.
-    
+
     return !this.get('isEditing') ;
   },
-  
+
   /**
-    Ends editing on the view, committing any changes that were made to the 
+    Ends editing on the view, committing any changes that were made to the
     view value in the meantime.
-    
-    This method is called by other views when they want to end editing, 
+
+    This method is called by other views when they want to end editing,
     saving any changes that were made to the view in the meantime.  When this
     method is called you should resign first responder, save the latest
     value of the view and return YES.
-    
-    If your view cannot save the current state of the view for some reason 
+
+    If your view cannot save the current state of the view for some reason
     (for example if validation fails), then you should return NO.  Properly
     implemented clients may then try to call discardEditing() to force your
     view to resign first responder anyway.
-    
+
     Some views apply changes to their value immediately during an edit instead
     of waiting for the view to end editing.  If this is the case, you should
-    still implement commitEditing but you simply may not save any value 
+    still implement commitEditing but you simply may not save any value
     changes.
-  
+
     If this method is called on a view that is not currently editing, you
     should always just return YES.
-    
+
     The default implementation sets isEditing to NO, resigns first responder
     and returns YES.
-    
+
     @returns {Boolean} YES if changes were discarded and editing ended.
   */
   commitEditing: function() {
     if (!this.get('isEditing')) return YES;
     this.set('isEditing', NO) ;
     this.resignFirstResponder();
-    
+
     return YES ;
   }
 

data/lib/frameworks/sproutcore/frameworks/foundation/tests/transitions/view_transitions_test.js

@@ -0,0 +1,235 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2013 7x7 Software, Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*global module, test, equals, ok, start, stop */
+
+var view,
+  pane;
+
+/** Test the SC.View states. */
+module("SC.View Transition States", {
+
+  setup: function () {
+    view = SC.View.create();
+    pane = SC.Pane.create({
+      layout: { width: 400, height: 400 }
+    });
+  },
+
+  teardown: function () {
+    view.destroy();
+    pane.destroy();
+    view = pane = null;
+  }
+
+});
+
+/** */
+// test("Reversing SHOWING to HIDDEN: FADE_IN", function () {
+//   stop(2000);
+
+//   view.set('isVisible', false);
+//   SC.run(function () {
+//     pane.appendChild(view);
+//     pane.append();
+//   });
+
+//   // Test assumption.
+//   equals(view.get('isVisible'), false, "The isVisible property of the view is");
+//   ok(view.$().hasClass('sc-hidden'), "The view has sc-hidden class name.");
+//   equals(view.$().css('opacity'), '1', "The view's opacity is");
+
+//   view.set('transitionShow', SC.View.FADE_IN);
+//   SC.run(function () {
+//     view.set('isVisible', true);
+//   });
+//   equals(view.$().css('opacity'), '0', "The view's opacity is");
+
+//   setTimeout(function () {
+//     var jqEl = view.$();
+
+//     // Test assumption.
+//     equals(view.get('isVisible'), true, "The isVisible property of the view is");
+//     ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name.");
+//     ok(jqEl.css('opacity') > 0, "The view's opacity is not 0.");
+//     ok(jqEl.css('opacity') < 1, "The view's opacity is not 1.");
+
+//     SC.run(function () {
+//       view.set('isVisible', false);
+//     });
+
+//     jqEl = view.$();
+//     equals(view.get('isVisible'), false, "The isVisible property of the view is");
+//     ok(jqEl.hasClass('sc-hidden'), "The view has sc-hidden class name.");
+//     equals(jqEl.css('opacity'), '1', "The view's opacity is");
+
+//     start();
+//   }, 200);
+// });
+
+/** */
+test("Reversing SHOWING to HIDING: FADE_IN & FADE_OUT", function () {
+  stop(2000);
+
+  view.set('isVisible', false);
+  SC.run(function () {
+    pane.appendChild(view);
+    pane.append();
+  });
+
+  // Test assumption.
+  equals(view.get('isVisible'), false, "The isVisible property of the view is");
+  ok(view.$().hasClass('sc-hidden'), "The view has sc-hidden class name.");
+  equals(view.$().css('opacity'), '1', "The view's opacity is");
+
+  view.set('transitionShow', SC.View.FADE_IN);
+  view.set('transitionHide', SC.View.FADE_OUT);
+  SC.run(function () {
+    view.set('isVisible', true);
+  });
+  equals(view.$().css('opacity'), '0', "The view's opacity is");
+
+  setTimeout(function () {
+    var jqEl = view.$();
+
+    // Test assumption.
+    equals(view.get('isVisible'), true, "The isVisible property of the view is");
+    ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name.");
+    ok(jqEl.css('opacity') > 0, "The view's opacity is not 0.");
+    ok(jqEl.css('opacity') < 1, "The view's opacity is not 1.");
+
+    SC.run(function () {
+      view.set('isVisible', false);
+    });
+
+    jqEl = view.$();
+    equals(view.get('isVisible'), false, "The isVisible property of the view is");
+    ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name.");
+    ok(jqEl.css('opacity') > 0, "The view's opacity is not 0 still.");
+    equals(view.$().css('opacity'), '1', "The view's opacity is");
+  }, 200);
+
+  setTimeout(function () {
+    var jqEl = view.$();
+
+    // Test assumption.
+    equals(view.get('isVisible'), false, "The isVisible property of the view is");
+    ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name.");
+    ok(jqEl.css('opacity') > 0, "The view's opacity is not 0.");
+    ok(jqEl.css('opacity') < 1, "The view's opacity is not 1.");
+  }, 400);
+
+  setTimeout(function () {
+    var jqEl = view.$();
+
+    SC.RunLoop.begin().end();
+    // Test assumption.
+    equals(view.get('isVisible'), false, "The isVisible property of the view is");
+    ok(jqEl.hasClass('sc-hidden'), "The view has sc-hidden class name.");
+    ok(view._layoutStyleNeedsUpdate, "The view's layout needs update");
+
+    start();
+  }, 1500);
+});
+
+
+/** */
+test("Reversing HIDING to SHOWN: FADE_OUT", function () {
+  stop(2000);
+
+  SC.run(function () {
+    pane.appendChild(view);
+    pane.append();
+  });
+
+  // Test assumption.
+  equals(view.get('isVisible'), true, "The isVisible property of the view is");
+  ok(!view.$().hasClass('sc-hidden'), "The view doesn't have sc-hidden class name.");
+  equals(view.$().css('opacity'), '1', "The view's opacity is");
+
+  view.set('transitionHide', SC.View.FADE_OUT);
+  SC.run(function () {
+    view.set('isVisible', false);
+  });
+  equals(view.$().css('opacity'), '1', "The view's opacity is");
+
+  // Fading out.
+  setTimeout(function () {
+    var jqEl = view.$();
+
+    // Test assumption.
+    equals(view.get('isVisible'), false, "The isVisible property of the view is");
+    ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name.");
+    ok(jqEl.css('opacity') > 0, "The view's opacity is not 0.");
+    ok(jqEl.css('opacity') < 1, "The view's opacity is not 1.");
+
+    // Cancel fading out.
+    SC.run(function () {
+      view.set('isVisible', true);
+    });
+
+    jqEl = view.$();
+    equals(view.get('isVisible'), true, "The isVisible property of the view is");
+    ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name.");
+    equals(jqEl.css('opacity'), '1', "The view's opacity is now");
+
+    start();
+  }, 200);
+});
+
+
+/** */
+test("Reversing HIDING to SHOWING: FADE_IN & FADE_OUT", function () {
+  stop(2000);
+
+  SC.run(function () {
+    pane.appendChild(view);
+    pane.append();
+  });
+
+  // Test assumption.
+  equals(view.get('isVisible'), true, "The isVisible property of the view is");
+  ok(!view.$().hasClass('sc-hidden'), "The view doesn't have sc-hidden class name.");
+  equals(view.$().css('opacity'), '1', "The view's opacity is");
+
+  view.set('transitionShow', SC.View.FADE_IN);
+  view.set('transitionHide', SC.View.FADE_OUT);
+  SC.run(function () {
+    view.set('isVisible', false);
+  });
+  equals(view.$().css('opacity'), '1', "The view's opacity is");
+
+  setTimeout(function () {
+    var jqEl = view.$();
+
+    // Test assumption.
+    equals(view.get('isVisible'), false, "The isVisible property of the view is");
+    ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name.");
+    ok(jqEl.css('opacity') > 0, "The view's opacity is not 0.");
+    ok(jqEl.css('opacity') < 1, "The view's opacity is not 1.");
+
+    // Cancel fading out.
+    SC.run(function () {
+      view.set('isVisible', true);
+    });
+
+    jqEl = view.$();
+    equals(view.get('isVisible'), true, "The isVisible property of the view is");
+    ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name.");
+    equals(view.$().css('opacity'), '0', "The view's opacity is");
+  }, 200);
+
+  setTimeout(function () {
+    var jqEl = view.$();
+
+    // Test assumption.
+    equals(view.get('isVisible'), true, "The isVisible property of the view is");
+    ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name.");
+    equals(jqEl.css('opacity'), '1', "The view's opacity is now");
+
+    start();
+  }, 1000);
+});