sproutcore 0.9.0

data/frameworks/sproutcore/views/image.js

@@ -0,0 +1,141 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/view') ;
+
+lc_cnt = 0 ;
+
+SC.ImageView = SC.View.extend({
+  emptyElement: '<img />',
+  
+  status: 'unknown',
+  
+  content: null, // becomes the url.
+  contentBindingDefault: SC.Binding.Single,
+  
+  // override with your own function to transform content into a URL.
+  transform: function(content) { return content; },
+  
+  contentObserver: function() {
+    var prop = this.get('content') || '' ;
+    var url = this.transform(prop) ;
+    
+    if (url && url.length > 0) {
+      this.beginPropertyChanges() ;
+      this.set('status','loading') ;
+      SC.imageCache.loadImage(url, this, this._onLoadComplete) ;
+      this.endPropertyChanges() ;
+    } else {
+      this.rootElement.src = '' ;
+      this.set('status','unknown') ;
+    }
+  }.observes('content') ,
+  
+  _onLoadComplete: function(url, status, img) {  
+    this.beginPropertyChanges() ;
+    this.set('imageWidth', parseInt(img.width,0)) ;
+    this.set('imageHeight', parseInt(img.height,0)) ;
+    this.set('status',status) ;
+    this.endPropertyChanges() ;
+    
+    if (status == 'loaded') {
+      if (this.imageDidLoad) this.imageDidLoad(url) ;
+      this.rootElement.src =  url ;
+    } else {
+      if (this.imageDidFail) this.imageDidFail(url, status) ;
+    }
+  },
+  
+  init: function() {
+    arguments.callee.base.apply(this,arguments) ;
+    if (this.rootElement.src) {
+      this.set('imageWidth',parseInt(this.rootElement.width,0)) ;
+      this.set('imageHeight',parseInt(this.rootElement.height,0)) ;
+    }
+  }
+  
+}) ;
+
+// The image cache will create Image objects to preload a set of 
+// images.  This will control the number of images being loaded to maximize
+// browser throughput.
+SC.imageCache = SC.Object.create({  
+  
+  // this restricts the maximum number of images that can load in.
+  loadLimit: 4,
+  
+  // this is the primary entry point for the imageCache.  Use this method to
+  // ask the cache to load an image and then invoke the callback when its
+  // available.  You can pass either a function or an object + a function.
+  // Your callback should have this pattern:
+  //
+  // method(url, status, imgObject)
+  // url: the original URL you passed in.
+  // status: loaded | error | aborted
+  // imgObject: the image object.  This parameter is optional.
+  //
+  loadImage: function(url, objOrFunc, method) {
+    var dta = this._images[url] = (this._images[url] || { url: url,
+      img: null, handlers: [], status: 'unknown' }) ;
+
+    if (dta.img == null) {
+      this._queue.push(dta) ;
+      if (!this._imgTimeout) {
+        this._imgTimeout = setTimeout(this.loadNextImage.bind(this),100) ;
+      }
+    }
+
+    // you can pass either just a function or an object + a method.  This will
+    // handle both.
+    var handler = (method) ? [objOrFunc, method] : [this, objOrFunc] ;
+    if (dta.status == 'unknown') {
+      dta.handlers.push(handler) ;
+    } else if (handler[1]) {
+      handler[1].call(handler[0], url, dta.status, dta.img) ;
+    }
+  },
+  
+  // this is called to load images that need 
+  loadNextImage: function() {
+    this._imgTimeout = null ;
+    while((this._queue.length > 0) && (this._loading.length < this.loadLimit)) {   
+      var dta = this._queue.pop() ;
+      var url = dta.url ;
+      dta.img = new Image() ;
+      dta.img.onabort = this._onAbort.bind(this,url) ;
+      dta.img.onerror = this._onError.bind(this,url) ;
+      dta.img.onload = this._onLoad.bind(this, url) ;
+      dta.img.src = dta.url ;
+
+      // add to loading queue.
+      this._loading.push(dta.url) ;
+    }
+  },
+  
+  _onAbort: function(url) { this._changeStatus(url, 'aborted') ; },
+  _onError: function(url) { this._changeStatus(url, 'error'); },
+  _onLoad: function(url) { this._changeStatus(url, 'loaded'); },
+
+  // update the status in the queue and call any queued handlers.
+  _changeStatus: function(url, status) {
+    var dta = this._images[url] ;
+    if (!dta) return ;
+    dta.status = status ;
+    
+    var handler ;
+    while(handler = dta.handlers.pop()) {
+      if (handler[1]) handler[1].call(handler[0], url, dta.status, dta.img) ;
+    }
+    
+    // get the next image, if needed.
+    this._loading = this._loading.without(dta.url) ;
+    this.loadNextImage() ;
+  },
+  
+  _images: {},
+  _loading: [],
+  _queue: []
+    
+}); 

data/frameworks/sproutcore/views/inline_text_editor.js

@@ -0,0 +1,96 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+SC.inlineTextEditor = SC.View.extend({
+
+  multiline: true,
+
+  emptyElement: [
+    '<div class="inline_editor">',
+      '<div class="inline_editor_sizer"></div>',
+      '<textarea class="inline_editor_field" wrap="off"></textarea>',
+      //'<input type="text" class="inline_editor_field" />',
+    '</div>'
+  ].join(''),
+
+  /**
+  * Set the size of the textarea to the width and height of the text value
+  */
+  render: function()
+  {
+    var editor = this.get('rootElement');
+    var sizer  = editor.childNodes[0];
+    var field  = editor.childNodes[1];
+
+    // XSS attack waiting to happen... escape the form input;
+    var text = (this.field.get('value') || '').escapeHTML();
+    // we don't want the text to wrap inside of the sizer...
+    text = text.replace(/ /g, "&nbsp;");
+    // convert the textarea's newlines into something comparable for the sizer div
+    // appending a space to give a line with no text a visible height.
+    text = text.replace(/\n/g, "<br />&nbsp;");
+
+    // get the text size
+    sizer.innerHTML = text || "&nbsp;";
+    var w = sizer.offsetWidth;
+    var h = sizer.offsetHeight;
+
+    // add it to the editor w/ some wiggle room to prevent 
+    // the textarea's scrollbars from fickering
+    field.style.width  = (w + 20) + "px";
+    field.style.height = (h + 5) + "px";
+  },
+  
+  
+  outlets: ['field'],
+  field: SC.TextFieldView.extend({
+    
+    mouseDown: function(e)
+    {
+      e._stopWhenHandled = false;
+      return this.owner.get('parentNode').get('isEditing');
+    },
+
+    /**
+    * resize the editor whenever the field value changes
+    * @private
+    * @observes value
+    */
+    valueObserver: function()
+    {
+      this.owner.render();
+    }.observes('value'),
+
+    willRemoveFromParent: function()
+    {
+      // [Safari] if you don't take key focus away from an element before you remove it from the DOM
+      //  key events are no longer sent to the browser.
+      this.get('rootElement').blur();
+    },
+    willLoseFirstResponder: function()
+    {
+      // should have been covered by willRemoveFromParent, but this was needed too.
+      this.get('rootElement').blur();
+      var parentNode = this.owner.get('parentNode');
+      if ( parentNode )
+      {
+        if (parentNode.get('isEditing')) parentNode.endInlineEdit();
+      }
+    },
+
+    cancel: function()
+    {
+      var parentNode = this.owner.get('parentNode');
+      if (parentNode && parentNode.cancel) parentNode.cancel();
+    },
+    insertNewline: function()
+    {
+      var parentNode = this.owner.get('parentNode');
+      if (parentNode && parentNode.insertNewline) parentNode.insertNewline();
+    }
+
+  }).outletFor('.inline_editor_field?')
+
+}).viewFor(null);

data/frameworks/sproutcore/views/label.js

@@ -0,0 +1,176 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/view') ;
+
+SC.LabelView = SC.View.extend({
+
+  /**
+  * Can the label be edited using the inline editor?
+  * @type Boolean
+  **/
+  isEditable: false,
+  /**
+  * Is the editor open?
+  * @type Boolean
+  **/
+  isEditing: false,
+
+
+  // set to true to have any markup in the content escaped.
+  escapeHTML: true,
+
+  // set to true to have the value you set automatically localized.
+  localize: false,
+  
+  
+  /**
+  * @constructor
+  */
+  init: function()
+  {
+    arguments.callee.base.call(this) ;
+    if (this.get("localize"))
+    {
+      var inner = this.get("asHTML");
+      if (inner !== "") this.set("content", inner);
+    }
+  },
+
+  /**
+  * Event dispatcher callback.
+  * If isEditable is set to true, opens the inline text editor view.
+  * @param {DOMMouseEvent} evt DOM event
+  */
+  doubleClick: function( evt )
+  {
+    this.beginInlineEdit();
+  },
+  
+  
+  /**
+  * Opens the inline text editor (closing it if it was already open for another view).
+  * @return void
+  **/
+  beginInlineEdit: function()
+  {
+    if ( !this.get('isEditable') ) return;
+    if ( this.get('isEditing') ) return;
+    
+    this.set('isEditing', true);
+    this.set("asHTML", ''); // blank out the label contents
+    this.appendChild( SC.inlineTextEditor );
+    SC.inlineTextEditor.field.set('value', this.get('content'));
+    SC.inlineTextEditor.field.becomeFirstResponder();
+  },
+  /**
+  * Closes the inline text editor.
+  * @return void
+  **/
+  endInlineEdit: function()
+  {
+    if ( !this.get('isEditing') ) return;
+
+    // if there were changes, then commit them... 
+    if ( SC.inlineTextEditor.field.get('value') != this.get('content') )
+    {
+      this._inlineEditValue = SC.inlineTextEditor.field.get('value') ;
+      this._closeInlineEditor(false) ;
+    }
+    else
+    {
+      this.cancelInlineEdit() ;
+    }
+  },
+  
+  _inlineEditValue: '', 
+  
+  cancelInlineEdit: function()
+  {
+    if ( !this.get('isEditing') ) return;
+    this._closeInlineEditor(true);
+  },
+  
+  _closeInlineEditor: function(canceled)
+  {
+    this.set('isEditing', false);
+    this.removeChild( SC.inlineTextEditor );
+    if(!canceled)
+    {
+      this.set('content',this._inlineEditValue) ;
+      this.commitInlineEdit();
+    }  
+    else
+    {
+      this._updateValue() ; // restore value.
+    }  
+  },
+  
+  // abstract method... implement to persist changes made in the editor.
+  commitInlineEdit: function() {},
+
+
+  // setting this to a non-null value will cause the label to get the
+  // property value and use that for display.
+  property: function(key, value) {
+    if ((value !== undefined) && (value != this._property)) {
+      if (this._content) {
+        var func = this._boundObserver() ;
+        if (this._property && this._content && this._content.removeObserver) this._content.removeObserver(this._property,func);
+        this._property = value ;
+        if (this._property && this._content && this._content.addObserver) this._content.addObserver(this._property,func) ;
+      } else this._property = value ;
+    }
+    return this._property ;
+  }.property(),
+  
+  // set to a validator object to have your content converted using the
+  // validator.  The formatter will be applied before localization.
+  formatter: null,
+  
+  // change this property value to update the content.
+  content: function(key,value) {
+    if ((value !== undefined) && (this._content != value)) {
+      var prop = this.get('property') ;
+      var func = this._boundObserver() ;
+      if (prop && this._content && this._content.removeObserver) this._content.removeObserver(prop, func) ;
+      this._content = value ;
+      if (prop && this._content && this._content.addObserver) this._content.addObserver(prop, func) ;
+      this._updateValue() ;      
+    } 
+    return this._content ;
+  }.property(),
+
+  contentBindingDefault: SC.Binding.Single,
+
+  _updateValue: function() {
+    var value = this._content ;
+    var prop = this.get('property') ;
+    if (prop && value && value.get) value = value.get(prop) ;
+
+    // apply formatter
+    var formatter = this.get('formatter') ;
+    if (formatter) {
+      var formattedValue = (SC.typeOf(formatter) == "function") ? formatter(value,this) : formatter.fieldValueForObject(value) ;
+      if (formattedValue) value = formattedValue ;
+    }
+
+    if ($type(value) == 'number') value = value.toString() ; // handle 0
+    
+    // localize
+    if (value && this.get('localize')) value = value.loc() ;
+    if (value && this.get('escapeHTML') && value.escapeHTML) value = value.escapeHTML() ;
+    
+    // set
+    this.set('asHTML',value || '') ;
+
+  },
+  
+  _boundObserver: function() {
+    if (!this._observer) this._observer = this._updateValue.bind(this) ;
+    return this._observer ;
+  }
+
+});

data/frameworks/sproutcore/views/menu_item.js

@@ -0,0 +1,90 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/view') ;
+
+// This is a basic menu item for inclusion in a popup menu.  This is a type
+// of button that will automatically close the popup menu when it is
+// pressed.
+SC.MenuItemView = SC.ButtonView.extend({
+
+  emptyElement: [
+  '<li class="button menu-item">',
+    '<a href="javascript:;">',
+      '<span class="sel">&#x2713;</span>',
+      '<span class="mixed">-</span>',
+      '<span class="inner">',
+      '<span class="label"></span>',
+      '</span>',
+      '<span class="shortcut"></span>',
+    '</a>',
+  '</li>'].join(''),
+  
+  // this method returns the computed required width.  This is potentially
+  // expensive, so don't call it often.  It is intended to be used with the
+  // wrapper MenuView that will decide how wide to make the menu.
+  computedRequiredWidth: function() {
+    
+    var ret = 0;
+    
+    // first, get the left edge offset for the .inner span.
+    // we expect this to make room for any checkboxes that might appear on 
+    // the left and required spacing on the right.
+    var el = this.$sel('.inner') ;
+    if (el) {
+      ret = el.offsetLeft ;
+      ret += parseInt(Element.getStyle(el, 'padding-left'),0) ;
+      ret += parseInt(Element.getStyle(el, 'padding-right'),0) ;
+    }
+    
+    // next, add in the width of any img tag.
+    var img = Element.$sel(el,'img') ;
+    if (img) {
+      ret += Element.getDimensions(img).width ;
+    }
+    
+    // next add in the width of any label.  We assume this includes the width
+    // of the label text itself.
+    el = Element.$sel(el, '.label') ;
+    if (el) {
+      ret += Element.getDimensions(el).width ;
+    }
+    
+    // finally, add the width of any shortcut.  We assume this includes any
+    // padding required to go between the label and the shortcut.
+    el = this.$sel('.shortcut') ;
+    if (el) {
+      ret += Element.getDimensions(el).width ;
+    }
+    
+    // that should do it...
+    return ret ;
+  },
+  
+  mouseMoved: function(evt)
+  {
+    if (!this.get('isDefault')) this.get('parentNode').set('currentSelectedMenuItem', this);
+  },
+  mouseOut: function(evt)
+  {
+    this.set('isDefault', false);
+  },
+  
+  mouseUp: function(evt)
+  {
+    arguments.callee.base.apply(this, arguments);
+    this._closeParentMenu();
+  },
+  didTriggerAction: function()
+  {
+    this._closeParentMenu();
+  },
+  _closeParentMenu: function()
+  {
+    var menu = this.get('parentNode');
+    if (menu) menu.set('isVisible', false);
+  }
+  
+});

data/frameworks/sproutcore/views/pagination.js

@@ -0,0 +1,54 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/view') ;
+require('controllers/collection') ;
+
+// A pagination view renders a widget for showing the total number of pages and
+// for switching between them.  It includes a forward arrow, back arrow, and
+// a popup.
+SC.PaginationView = SC.View.extend({
+
+  // ......................................
+  // PROPERTIES
+  
+  // Bind these to the controller properties to support pagination.
+  pageSize: 0,
+  pageCount: 0,
+  currentPage: 0,
+
+  // This is the format string used for the page count.  Will be localized.
+  currentPageString: "_%@-%@ of %@",
+  
+  // This is the format string used for the page popup.
+  pageOptionString: "_Page %@: %@-%@",
+
+  hasPreviousPage: function() {
+    return this.get('currentPage') > 0 ;
+  }.property(),
+  
+  hasNextPage: function() {
+    return this.get('currentPage') < this.get('pageCount') ;
+  }.property(),
+   
+  // ......................................
+  // STRUCTURE
+
+  // This is the generated element.
+  emptyElement: '<div class="pagination">\
+    <button class="prev">«</button>\
+    <button class="page"></button>\
+    <button class="next">»</button>\
+  </div>',
+
+  outlets: ['prevButton','nextButton','pageButton'],
+  
+  prevButton: SC.ButtonView.extend({
+    action: function() { this.owner.decrementProperty('currentPage'); },
+    isEnabledBinding: "*owner.hasPreviousPage"
+  })
+  
+}) ;
+

data/frameworks/sproutcore/views/popup_button.js

@@ -0,0 +1,86 @@
+require('views/button') ;
+
+/**
+* @class
+* @constructor
+* @extends SC.ButtonView
+* @author Skip Baney
+* @copyright 2006-2007, Sprout Systems, Inc. and contributors.
+* @version 0.1
+*/
+SC.PopupButtonView = SC.ButtonView.extend({
+
+  /**
+  * Overriding the default SC.ButtonView#performKeyEquivalent method to pass it onto the menu
+  * @param {string} keystring method name corresponding to the keys pressed (i.e alt_shift_z)
+  * @param {DOMMouseEvent} evt mousedown event
+  */
+  performKeyEquivalent: function( keystring, evt )
+  {
+    if (!this.get('isEnabled')) return false;
+    
+    // is it our own keyEquivalent? 
+    if (arguments.callee.base.apply(this,arguments)) return true;
+
+    // is it any of our menu items keyEquivalent?
+    var menu = this.get('menu');
+    return (!!menu && menu.performKeyEquivalent(keystring, evt));
+  },
+  
+  /**
+  * Name of the menu view to use.
+  * @type {string}
+  */
+  menuName: null,
+
+  /**
+  * PopupMenu reference. Will be lazy-loaded from the 'menuName' string.
+  * @type {SC.PopupMenu}
+  */
+  menu: function( key, value )
+  {
+    if ( value !== undefined ) 
+    {
+      value.set('isVisible', false);
+      this.set('_menu', value);
+    }
+    if ( !this._menu )
+    {
+      var menu = SC.page.get(this.get('menuName'));
+      if (menu) menu.set('isVisible', false);
+      // calling set so that the isSelectedBinding is triggered
+      this.set('_menu', menu);
+    }
+    return this._menu;
+  }.property(),
+  /**
+  * Binds the button's selection state to the menu's visibility.
+  * @private
+  */
+  isSelectedBinding: '*_menu.isVisible',
+  
+  /**
+  * Button action handler
+  * @param {DOMMouseEvent} evt mouseup event that triggered the action
+  */
+  action: function( evt )
+  {
+    var menu = this.get('menu');
+    // no menu to toggle... bail...
+    if (!menu) return false;
+    
+    if (!this._didFirstRun) {
+      // for some reason the menu#isVisible is true the first time we get it...
+      // and since this#isSelected is bound to it... we get an incorrect conditional check.
+      // hacking it here to keep moving.
+      menu.popup(this, evt);
+      this._didFirstRun = true;
+    } else {
+      // toggle the menu...
+      this.get('isSelected') ? menu.set('isVisible', false) : menu.popup(this, evt);
+    }
+    
+    return true;
+  }
+
+});