sproutit-sproutcore 1.0.20090721145236 → 1.0.20090721145251

data/frameworks/sproutcore/frameworks/designer/controllers/page_design.js

@@ -0,0 +1,102 @@
+// ========================================================================
+// SproutCore -- JavaScript Application Framework
+// Copyright ©2006-2008, Sprout Systems, Inc. and contributors.
+// Portions copyright ©2008 Apple, Inc.  All rights reserved.
+// ========================================================================
+
+/** @class
+  An instance of this controller is created for every page where designers 
+  are involved.  The Designer's themselves will register with the 
+  controller so that you can hook to the controller to manage the views and
+  their editors.
+  
+  Among other things, this controller implements global selection support for
+  the designers.
+  
+  @extends SC.Object
+  @since SproutCore 1.0
+*/
+SC.PageDesignController = SC.Object.extend({
+  
+  /** The current view builder selection. */
+  selection: null,
+  
+  /** 
+    Updates the selection either by adding the item or by reseting the 
+    selection.  Calling this method with no parameters will reset the 
+    selection.
+    
+    The passed selection must be a Designer object.
+  */
+  select: function(sel, extend) {
+    var base = (extend ? this.get('selection') : []) || [];
+    sel = base.concat(sel||[]).compact().uniq();
+    this.set('selection', sel) ;
+  },
+  
+  /**
+    Removes the passed items from the current selection.
+    
+    The passed selection must be a Designer object.
+  */
+  deselect: function(sel) {
+    
+    // build new selection without passed elements
+    var newSel = [], cur = this.get('selection')||[];
+    if (!sel) sel = []; 
+    cur.forEach(function(s) {
+      if (sel.indexOf(s)<0) newSel.push(s)
+    },this);
+    
+    this.set('selection', newSel) ;
+  },
+  
+  /**
+    Invoked whenever the selection changes.  Updates the selection states 
+    on the old and new views.
+  */
+  selectionDidChange: function() {
+    // get new and old selection. step through both and update states
+    var sel = this.get('selection')||[], oldSel = this._selection||[];
+    var set = SC.Set.create(sel);
+
+    // save old selection for next time
+    this._selection = sel ;
+    
+    // set the isSelected state on new selection.
+    sel.invoke('set', 'designIsSelected', YES);
+    
+    // remove the isSelected state for old selection not in new selection.
+    oldSel.forEach(function(s){ 
+      if (!set.contains(s)) s.set('designIsSelected', NO);
+    }, this);
+    
+  }.observes('selection'),
+  
+  
+  // ..........................................................
+  // DESIGNERS
+  // 
+  
+  /** All of the designers on the current page. */
+  designers: null,
+
+  /**  
+    Called by each designer when it is created to register itself with the
+    controller.  You can use this to know which designers are currently in 
+    the document to delete them as needed.
+  */
+  registerDesigner: function(designer) {
+    this.get('designers').add(designer);
+  },
+  
+  // ..........................................................
+  // INTERNAL SUPPORT
+  // 
+  init: function() {
+    this.designers = SC.Set.create();
+    this.sel = [];
+    sc_super();
+  }
+  
+}) ;

data/frameworks/sproutcore/frameworks/designer/css/css_rule.js

@@ -0,0 +1,22 @@
+// ==========================================================================
+// 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)
+// ==========================================================================
+
+sc_require('css/css_style') ;
+
+/**
+  @class SC.CSSRule
+
+  A css rule object represents a css rule that is part of a style sheet 
+  object. You can create your own rules and add insert them in style sheets at
+  runtime.
+  
+  @extends SC.Object
+*/
+SC.CSSRule = SC.Object.extend(
+/** @scope SC.CSSRule.prototype */ {
+  
+});

data/frameworks/sproutcore/frameworks/designer/css/css_style.js

@@ -0,0 +1,29 @@
+// ==========================================================================
+// 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)
+// ==========================================================================
+
+/**
+  @class SC.CSSStyle
+
+  A css style object represents a css style that is part of a single css rule 
+  in a single css style sheet.
+  
+  @extends SC.Object
+*/
+SC.CSSStyle = SC.Object.extend(
+/** @scope SC.CSSStyle.prototype */ {
+  
+  /**
+    @property {String} a css string representing the style property
+  */
+  style: '',
+  
+  /**
+    @property {SC.CSSRule} the rule this style is part of
+  */
+  rule: null
+  
+});

data/frameworks/sproutcore/frameworks/designer/css/css_style_sheet.js

@@ -0,0 +1,201 @@
+// ==========================================================================
+// 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)
+// ==========================================================================
+
+sc_require('css/css_rule') ;
+
+/**
+  @class SC.CSSStyleSheet
+
+  A style sheet object wraps a document style sheet object. SC.CSSStyleSheet will
+  re-use stylesheet objects as needed.
+  
+  @extends SC.Object
+*/
+SC.CSSStyleSheet = SC.Object.extend(
+/** @scope SC.CSSStyleSheet.prototype */ {
+  
+  init: function() {
+    sc_super() ;
+    
+    var ss = this.styleSheet ;
+    if (!ss) {
+      // create the stylesheet object the hard way (works everywhere)
+      ss = this.styleSheet = document.createElement('style') ;
+      ss.type = 'text/css' ;
+      var head = document.getElementsByTagName('head')[0] ;
+      if (!head) head = document.documentElement ; // fix for Opera
+      head.appendChild(ss) ;
+    }
+    
+    // cache this object for later
+    var ssObjects = this.constructor.styleSheets ;
+    if (!ssObjects) ssObjects = this.constructor.styleSheets = {} ;
+    ssObjects[SC.guidFor(ss)] ;
+    
+    // create rules array
+    var rules = ss.rules || SC.EMPTY_ARRAY ;
+    var array = SC.SparseArray.create(rules.length) ;
+    array.delegate = this ;
+    this.rules = array ;
+    
+    return this ;
+  },
+  
+  /**
+    @property {Boolean} YES if the stylsheet is enabled.
+  */
+  isEnabled: function(key, val) {
+    if (val !== undefined) {
+      this.styleSheet.disabled = !val ;
+    }
+    return !this.styleSheet.disabled ;
+  }.property(),
+  isEnabledBindingDefault: SC.Binding.bool(),
+  
+  /**
+    DO NOT MODIFY THIS OBJECT DIRECTLY!!!! Use the methods defined on this
+    object to update properties of the style sheet; otherwise, your changes 
+    will not be reflected.
+    
+    @property {CSSStyleSheet} RO
+  */
+  styleSheet: null,
+  
+  /**
+    @property {String}
+  */
+  href: function(key, val) {
+    if (val !== undefined) {
+      this.styleSheet.href = val ;
+    }
+    else return this.styleSheet.href ;
+  }.property(),
+  
+  /**
+    @property {String}
+  */
+  title: function(key, val) {
+    if (val !== undefined) {
+      this.styleSheet.title = val ;
+    }
+    else return this.styleSheet.title ;
+  }.property(),
+  
+  /**
+    @property {SC.Array} contains SC.CSSRule objects
+  */
+  rules: null,
+  
+  /**
+    You can also insert and remove rules on the rules property array.
+  */
+  insertRule: function(rule) {
+    var rules = this.get('rules') ;
+  },
+  
+  /**
+    You can also insert and remove rules on the rules property array.
+  */
+  deleteRule: function(rule) {
+    var rules = this.get('rules') ;
+    rules.removeObject(rule) ;
+  },
+  
+  // TODO: implement a destroy method
+  
+  /**
+    @private
+    
+    Invoked by the sparse array whenever it needs a particular index 
+    provided.  Provide the content for the index.
+  */
+  sparseArrayDidRequestIndex: function(array, idx) {
+    // sc_assert(this.rules === array) ;
+    var rules = this.styleSheet.rules || SC.EMPTY_ARRAY ;
+    var rule = rules[idx] ;
+    if (rule) {
+      array.provideContentAtIndex(idx, SC.CSSRule.create({ 
+        rule: rule,
+        styleSheet: this
+      })); 
+    }
+  },
+  
+  /** @private synchronize the browser's rules array with our own */
+  sparseArrayDidReplace: function(array, idx, amt, objects) {
+    var cssRules = objects.collect(function(obj) { return obj.rule; }) ;
+    this.styleSheet.rules.replace(idx, amt, cssRules) ;
+  }
+  
+});
+
+SC.mixin(SC.CSSStyleSheet,
+/** SC.CSSStyleSheet */{
+  
+  /**
+    Find a stylesheet object by name or href. If by name, .css will be 
+    appended automatically.
+    
+    {{{
+      var ss = SC.CSSStyleSheet.find('style.css') ;
+      var ss2 = SC.CSSStyleSheet.find('style') ; // same thing
+      sc_assert(ss === ss2) ; // SC.CSSStyleSheet objects are stable
+    }}}
+    
+    @param {String} nameOrUrl a stylsheet name or href to find
+    @returns {SC.CSSStyleSheet} null if not found
+  */
+  find: function(nameOrUrl) {
+    var isUrl = nameOrUrl ? nameOrUrl.indexOf('/') >= 0 : NO ;
+    
+    if (!nameOrUrl) return null ; // no name or url? fail!
+    
+    if (!isUrl && nameOrUrl.indexOf('.css') == -1) {
+      nameOrUrl = nameOrUrl + '.css' ;
+    }
+    
+    // initialize styleSheet cache
+    var ssObjects = this.styleSheets ;
+    if (!ssObjects) ssObjects = this.styleSheets = {} ;
+    
+    var styleSheets = document.styleSheets ;
+    var ss, ssName, ssObject, guid ;
+    for (var idx=0, len=styleSheets.length; idx < len; ++idx) {
+      ss = styleSheets[idx] ;
+      if (isUrl) {
+        if (ss.href === nameOrUrl) {
+          guid = SC.guidFor(ss) ;
+          ssObject = ssObjects[guid] ;
+          if (!ssObject) {
+            // cache for later
+            ssObject = ssObjects[guid] = this.create({ styleSheet: ss }) ;
+          }
+          return ssObject ;
+        }
+      }
+      else {
+        if (ssName = ss.href) {
+          ssName = ssName.split('/') ; // break up URL
+          ssName = ssName[ssName.length-1] ; // get last component
+          if (ssName == nameOrUrl) {
+            guid = SC.guidFor(ss) ;
+            ssObject = ssObjects[guid] ;
+            if (!ssObject) {
+              // cache for later
+              ssObject = ssObjects[guid] = this.create({ styleSheet: ss }) ;
+            }
+            return ssObject ;
+          }
+        }
+      }
+    }
+    return null ; // stylesheet not found
+  },
+  
+  styleSheets: null
+  
+});

data/frameworks/sproutcore/frameworks/designer/ext/page.js

@@ -0,0 +1,86 @@
+// ========================================================================
+// SproutCore -- JavaScript Application Framework
+// Copyright ©2006-2008, Sprout Systems, Inc. and contributors.
+// Portions copyright ©2008 Apple, Inc.  All rights reserved.
+// ========================================================================
+
+/** 
+  Extend SC.Page to emit a design document for the entire page.
+*/
+SC.Page.prototype.emitDesign = function() {
+
+  // awake all views.  this is needed to emit the design for them.
+  this.awake();
+
+  // the pageName must be set on the page so we can emit properly
+  var pageName = this.get('pageName');
+  
+  // now encode the page.
+  var ret = SC.DesignCoder.encode(this);
+  
+  // and add some wrapper
+  ret = ['// SproutCore ViewBuilder Design Format v1.0',
+    '// WARNING: This file is automatically generated.  DO NOT EDIT.  Changes you',
+    '// make to this file will be lost.', '',
+    '%@ = %@;'.fmt(pageName, ret),''].join("\n");
+  
+  return ret ;
+};
+
+/**
+  Extend SC.Page to create a PageDesignController on demand.
+  
+  @property {SC.PageDesignController}
+*/
+SC.Page.prototype.designController = function() {
+  if (!this._designController) {
+    this._designController = SC.PageDesignController.create({ page: this });
+  }
+  return this._designController ;
+}.property().cacheable();
+
+/**
+  Extend SC.Page to emit the localization for the current configuration of the
+  view and all of its subviews.
+*/
+SC.Page.prototype.emitLocalization = function(design) {
+
+  // awake all views.  this is needed to emit the design for them.
+  this.awake();
+
+  // the pageName must be set on the page so we can emit properly
+  var pageName = this.get('pageName');
+  
+  // now encode the page.
+  var ret = SC.LocalizationCoder.encode(this);
+
+  // and add some wrapper
+  ret = ['// SproutCore ViewBuilder Localization Format v1.0',
+    '// WARNING: This file is automatically generated.  DO NOT EDIT.  Changes you',
+    '// make to this file will be lost.', '',
+    '%@.loc(%@);'.fmt(pageName, ret),''].join("\n");
+  return ret ;
+} ;
+
+/** @private implement support for encoders */
+SC.Page.prototype.encodeDesign = function(c) {
+  // step through and find all views.  encode them.
+  for(var key in this) {
+    var view = this[key];
+    if (view instanceof SC.View) c.js(key, view.emitDesign());
+  }
+  
+  // save page name;
+  c.string('pageName', this.get('pageName'));
+};
+
+SC.Page.prototype.encodeLoc = function(c) {
+  // step through and find all views.  encode them.
+  for(var key in this) {
+    var view = this[key];
+    if (view instanceof SC.View) c.js(key, view.emitLocalization());
+  }
+};
+
+  
+

data/frameworks/sproutcore/frameworks/designer/ext/view.js

@@ -0,0 +1,38 @@
+// ========================================================================
+// SproutCore -- JavaScript Application Framework
+// Copyright ©2006-2008, Sprout Systems, Inc. and contributors.
+// Portions copyright ©2008 Apple, Inc.  All rights reserved.
+// ========================================================================
+
+/*jslint evil:true */
+
+/** 
+  Extend SC.View with emitDesign() which will encode the view and all of its
+  subviews then computes an empty element to attach to the design.
+*/
+SC.View.prototype.emitDesign = function() {
+  
+  // get design...
+  var ret = SC.DesignCoder.encode(this);
+  
+  return ret ;
+};
+
+/**
+  Extend SC.View to emit the localization for the current configuration of the
+  view and all of its subviews.
+*/
+SC.View.prototype.emitLocalization = function(design) {
+  var ret = SC.LocalizationCoder.encode(this);
+  
+  // prepare rootElement HTML.  Get the design, apply loc and generate the
+  // emptyElement HTML...
+  if (!design) design = this.emitDesign();
+  var views = eval(design).loc(eval(ret)).create() ;
+  var emptyElement = views.computeEmptyElement().replace(/\'/g,"\'");
+  views.destroy();
+  
+  // now insert as extra param at end...
+  ret = ret.replace(/\)$/, ", '%@')".fmt(emptyElement)) ;
+  return ret ;
+} ;