1 // ==========================================================================
  2 // Project:   SproutCore - JavaScript Application Framework
  3 // Copyright: ©2006-2011 Strobe Inc. and contributors.
  4 //            Portions ©2008-2011 Apple Inc. All rights reserved.
  5 // License:   Licensed under MIT license (see license.js)
  6 // ==========================================================================
  7 
  8 /** @class
  9 
 10   StaticContentView allows you to display arbitrary HTML content inside your
 11   view hierarchy.
 12 
 13   Normally, views in SproutCore are absolutely positioned. Their width and
 14   height are either pre-determined, or specified relative to their enclosing
 15   view. Occasionally, you may want to display content that is laid out by
 16   the browser. For example, if you were writing a documentation browser, you
 17   may want to display the table of contents as an SC.ListView, but the actual
 18   pages as HTML content.
 19 
 20   This class is most useful when placed inside a ScrollView.
 21 
 22   To use it, simply set the `content` property to a string of the HTML you
 23   would like to display.
 24 
 25   @extends SC.View
 26   @since SproutCore 1.2
 27   @author Tom Dale
 28 */
 29 SC.StaticContentView = SC.View.extend(
 30 /** @scope SC.StaticContentView.prototype */ {
 31 
 32   /**
 33     @type Array
 34     @default ['sc-static-content-view']
 35     @see SC.View#classNames
 36   */
 37   classNames: ['sc-static-content-view'],
 38 
 39   /**
 40     @type Array
 41     @default ['content']
 42     @see SC.View#displayProperties
 43   */
 44   displayProperties: ['content'],
 45 
 46 
 47   // ..........................................................
 48   // PROPERTIES
 49   //
 50 
 51   /**
 52     The HTML content you wish to display. This will be inserted directly into
 53     the DOM, so ensure that any user-generated content has been escaped.
 54 
 55     @type String
 56     @default null
 57   */
 58   content: null,
 59 
 60   // ..........................................................
 61   // METHODS
 62   //
 63 
 64   /**
 65     Because SproutCore has no way of knowing when the size of the content
 66     inside a StaticContentView has changed, you should call this method
 67     whenever an event that may change the size of the content occurs.
 68 
 69     Note that if you change the content property, this will be recalculated
 70     automatically.
 71   */
 72   contentLayoutDidChange: function() {
 73     this._sc_viewFrameDidChange();
 74   },
 75 
 76   // ..........................................................
 77   // INTERNAL SUPPORT
 78   //
 79 
 80   /** @private
 81     Disable SproutCore management of view positioning.
 82   */
 83   useStaticLayout: YES,
 84 
 85   /** @private
 86     Overrides SC.View's frame computed property, and returns a value from the
 87     DOM. This value is cached to improve performance.
 88 
 89     If the size of the content inside the view changes, you should call
 90     contentLayoutDidChange().
 91 
 92     @property
 93   */
 94   frame: function() {
 95     var layer = this.get('layer'), rect;
 96 
 97     if (!layer) return { x: 0, y: 0, width: 0, height: 0 };
 98 
 99     if (layer.getBoundingClientRect && !SC.browser.isIE8OrLower) {
100       rect = layer.getBoundingClientRect();
101 
102       return {
103         x: 0,
104         y: 0,
105         width: rect.width,
106         height: rect.height
107       };
108     } else {
109       return {
110         x: 0,
111         y: 0,
112         width: layer.clientWidth,
113         height: layer.clientHeight
114       };
115     }
116   }.property('content').cacheable(),
117 
118   /** @private
119     Recalculate content frame if our parent view resizes.
120   */
121   parentViewDidResize: function() {
122     this.contentLayoutDidChange();
123   },
124 
125   /** @private
126     If the layer changes, make sure we recalculate the frame.
127   */
128   didUpdateLayer: function() {
129     this.contentLayoutDidChange();
130   },
131 
132   /** @private
133     Outputs the content property to the DOM.
134 
135     @param {SC.RenderContext} context
136     @param {Boolean} firstTime
137   */
138   render: function(context, firstTime) {
139     var content = this.get('content');
140 
141     context.push(content || '');
142   },
143 
144   /** @private */
145   touchStart: function(evt){
146     evt.allowDefault();
147     return YES;
148   },
149 
150   /** @private */
151   touchEnd: function(evt){
152     evt.allowDefault();
153     return YES;
154   }
155 
156 });
157