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 /**
  9   Layout properties needed to anchor a view to the top.
 10 
 11   @static
 12   @constant
 13   @type Hash
 14   @default `{ top: 0 }`
 15 */
 16 SC.ANCHOR_TOP = { top: 0 };
 17 
 18 /**
 19   Layout properties needed to anchor a view to the left.
 20 
 21   @static
 22   @constant
 23   @type Hash
 24   @default `{ left: 0 }`
 25 */
 26 SC.ANCHOR_LEFT = { left: 0 };
 27 
 28 /*
 29   Layout properties to anchor a view to the top left
 30 
 31   @static
 32   @constant
 33   @type Hash
 34   @default `{ top: 0, left: 0 }`
 35 */
 36 SC.ANCHOR_TOP_LEFT = { top: 0, left: 0 };
 37 
 38 /**
 39   Layout properties to anchoe view to the bottom.
 40 
 41   @static
 42   @constant
 43   @type Hash
 44   @default `{ bottom: 0 }`
 45 */
 46 SC.ANCHOR_BOTTOM = { bottom: 0 };
 47 
 48 /**
 49   Layout properties to anchor a view to the right.
 50 
 51   @static
 52   @constant
 53   @type Hash
 54   @default `{ right: 0 }`
 55 */
 56 SC.ANCHOR_RIGHT = { right: 0 };
 57 
 58 /**
 59   Layout properties to anchor a view to the bottom right.
 60 
 61   @static
 62   @constant
 63   @type Hash
 64   @default `{ top: 0, right: 0 }`
 65 */
 66 SC.ANCHOR_BOTTOM_RIGHT = { bottom: 0, right: 0 };
 67 
 68 /** @class
 69 
 70   SC.ToolbarView is a simple horizontal view that has been styled like a
 71   toolbar and can be easily anchored at the top or bottom of a parent view.
 72 
 73   To anchor to the top of the parent view, set `anchorLocation` to
 74   `SC.ANCHOR_TOP` or to anchor to the bottom, set `anchorLocation` to
 75   `SC.ANCHOR_BOTTOM`.  The default layout of SC.Toolbar is
 76   `{ left: 0, right: 0, height: 32, zIndex: 10 }` and so by setting the value of
 77   `anchorLocation`, the layout will be modified to either:
 78 
 79   `SC.ANCHOR_TOP:`
 80       { borderBottom: 1, top: 0, left: 0, right: 0, height: 32, zIndex: 10 }
 81 
 82   `SC.ANCHOR_BOTTOM:`
 83       { borderTop: 1, bottom: 0, left: 0, right: 0, height: 32, zIndex: 10 }
 84 
 85   Of course, you can always override the layout property yourself in order to
 86   adjust the height, border and zIndex values.
 87 
 88   @extends SC.View
 89   @since SproutCore 1.0
 90 */
 91 SC.ToolbarView = SC.View.extend(
 92 /** @scope SC.ToolbarView.prototype */ {
 93 
 94   /**
 95     @type Array
 96     @default ['sc-toolbar-view']
 97     @see SC.View#classNames
 98   */
 99   classNames: ['sc-toolbar-view'],
100 
101   /**
102     The WAI-ARIA role for toolbar view.
103 
104     @type String
105     @default 'toolbar'
106     @readOnly
107   */
108   ariaRole: 'toolbar',
109 
110   /**
111     @type String
112     @default 'toolbarRenderDelegate'
113   */
114   renderDelegateName: 'toolbarRenderDelegate',
115 
116   /**
117     Default anchor location.  This will be applied automatically to the
118     toolbar layout if you set it. Possible values:
119 
120       - SC.ANCHOR_TOP
121       - SC.ANCHOR_LEFT
122       - SC.ANCHOR_TOP_LEFT
123       - SC.ANCHOR_BOTTOM
124       - SC.ANCHOR_RIGHT
125       - SC.ANCHOR_BOTTOM_RIGHT
126 
127     @type String
128     @default null
129   */
130   anchorLocation: null,
131 
132   // ..........................................................
133   // INTERNAL SUPPORT
134   //
135 
136   /** @private */
137   layout: { left: 0, right: 0, height: 32, zIndex: 10 },
138 
139   /** @private */
140   init: function () {
141     // apply anchor location before setting up the rest of the view.
142     if (this.anchorLocation) {
143       this.layout = SC.merge(this.layout, this.anchorLocation);
144 
145       switch (this.anchorLocation) {
146       case SC.ANCHOR_TOP:
147       case SC.ANCHOR_TOP_LEFT:
148         this.layout.borderBottom = 1;
149         break;
150       case SC.ANCHOR_BOTTOM:
151       case SC.ANCHOR_BOTTOM_RIGHT:
152         this.layout.borderTop = 1;
153         break;
154       default:
155       }
156     }
157 
158     sc_super();
159   }
160 
161 });
162 
163