diff --git a/Assetfile b/Assetfile index e657b6b..a926a2c 100644 --- a/Assetfile +++ b/Assetfile @@ -67,7 +67,6 @@ input 'app' do vendor/jquery.js vendor/ember.js vendor/ember-data.js - vendor/sproutcore-routing.js ], 'app.js' end diff --git a/Gemfile.lock b/Gemfile.lock index 7637a87..9cff2f0 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,6 +1,6 @@ GIT remote: https://github.com/livingsocial/rake-pipeline.git - revision: b70ca6cad7655e58d13031f3e24df7dfc74f9030 + revision: 543f4322fe70facee9572d29ddabf7f090dad68a specs: rake-pipeline (0.6.0) rake (~> 0.9.0) @@ -8,7 +8,7 @@ GIT GIT remote: https://github.com/wycats/rake-pipeline-web-filters.git - revision: ba0b8a00356b4c854930a8e849b5629d51ffd70f + revision: 81a22fb0808dfdeab8ed92d5d8c898ad198b9938 specs: rake-pipeline-web-filters (0.6.0) rack @@ -27,23 +27,32 @@ GEM chunky_png (~> 1.2) fssm (>= 0.2.7) sass (~> 3.1) - execjs (1.3.0) + execjs (1.4.0) multi_json (~> 1.0) ffi (1.0.11) - fssm (0.2.8.1) - guard (1.0.1) - ffi (>= 0.5.0) - thor (~> 0.14.6) + fssm (0.2.9) + guard (1.1.1) + listen (>= 0.4.2) + thor (>= 0.14.6) guard-rake (0.0.5) guard rake - multi_json (1.2.0) + listen (0.4.3) + rb-fchange (~> 0.0.5) + rb-fsevent (~> 0.9.1) + rb-inotify (~> 0.8.8) + multi_json (1.3.6) open4 (1.3.0) rack (1.4.1) rack-rewrite (1.2.1) rake (0.9.2.2) - sass (3.1.15) - thor (0.14.6) + rb-fchange (0.0.5) + ffi + rb-fsevent (0.9.1) + rb-inotify (0.8.8) + ffi (>= 0.5.0) + sass (3.1.19) + thor (0.15.2) uglifier (1.2.4) execjs (>= 0.3.0) multi_json (>= 1.0.2) diff --git a/README.md b/README.md index 823d9c3..4e97ba0 100644 --- a/README.md +++ b/README.md @@ -24,11 +24,35 @@ App Structure │ │ └── loader.js - JS module loader │ ├── static - Static files, never touched, copied over during build │ ├── templates - Handlebars templates, *modularized during build* + │ ├── tests - QUnit application tests │ └── vendor - Vendor code, *modularized during build* ├── assets - Built out asset files, minified in production │ ├── app.css - Built out app CSS/SCSS - │ ├── loader.js - Built out JS module loader - │ └── app.js - Built out app JS + │ ├── app.js - Built out app JS + │ └── loader.js - Built out JS module loader ├── config.ru - Rack development web server configuration ├── index.html - The app entry point + ├── tests - QUnit testing files + │ ├── index.html - The testing entry point + │ ├── qunit - Testing support files + │ └── run-tests.js - The PhantomJS QUnit test runner └── tmp - Temporary build files used by rakep + +Testing +------- + +You can test the app by invoking: + + $ bundle exec rake test + +This executes the tests by using [PhantomJS](http://www.phantomjs.org/), +which you need to have installed. + +Or you can run the tests via: + + $ bundle exec rackup + $ open http://localhost:9292/tests/index.html + +If you want to continuously run the tests every time a file changes, invoke: + + $ bundle exec guard diff --git a/Rakefile b/Rakefile index a6891b5..62e45b4 100644 --- a/Rakefile +++ b/Rakefile @@ -14,7 +14,7 @@ task :test => :build do abort "PhantomJS is not installed. Download from http://phantomjs.org/" end - cmd = "phantomjs tests/qunit/run-qunit.js \"file://#{File.dirname(__FILE__)}/tests/index.html\"" + cmd = "phantomjs tests/run-tests.js \"file://#{File.dirname(__FILE__)}/tests/index.html\"" # Run the tests puts "Running #{APPNAME} tests" diff --git a/app/css/bootstrap.css b/app/css/bootstrap.css index 495188a..bb40c85 100644 --- a/app/css/bootstrap.css +++ b/app/css/bootstrap.css @@ -1,5 +1,5 @@ /*! - * Bootstrap v2.0.2 + * Bootstrap v2.0.4 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 @@ -7,6 +7,7 @@ * * Designed and built with all the love in the world @twitter by @mdo and @fat. */ + article, aside, details, @@ -19,6 +20,7 @@ nav, section { display: block; } + audio, canvas, video { @@ -26,23 +28,28 @@ video { *display: inline; *zoom: 1; } + audio:not([controls]) { display: none; } + html { font-size: 100%; -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } + a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } + a:hover, a:active { outline: 0; } + sub, sup { position: relative; @@ -50,18 +57,26 @@ sup { line-height: 0; vertical-align: baseline; } + sup { top: -0.5em; } + sub { bottom: -0.25em; } + img { - height: auto; + max-width: 100%; + vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; - vertical-align: middle; } + +#map_canvas img { + max-width: none; +} + button, input, select, @@ -70,16 +85,19 @@ textarea { font-size: 100%; vertical-align: middle; } + button, input { *overflow: visible; line-height: normal; } + button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } + button, input[type="button"], input[type="reset"], @@ -87,49 +105,56 @@ input[type="submit"] { cursor: pointer; -webkit-appearance: button; } + input[type="search"] { - -webkit-appearance: textfield; -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + -webkit-appearance: textfield; } + input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } + textarea { overflow: auto; vertical-align: top; } + .clearfix { *zoom: 1; } + .clearfix:before, .clearfix:after { display: table; content: ""; } + .clearfix:after { clear: both; } + .hide-text { - overflow: hidden; - text-indent: 100%; - white-space: nowrap; + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; } + .input-block-level { display: block; width: 100%; min-height: 28px; - /* Make inputs at least the height of their button counterpart */ - - /* Makes inputs behave like true block-level elements */ - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; } + body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -138,204 +163,279 @@ body { color: #333333; background-color: #ffffff; } + a { color: #0088cc; text-decoration: none; } + a:hover { color: #005580; text-decoration: underline; } + .row { margin-left: -20px; *zoom: 1; } + .row:before, .row:after { display: table; content: ""; } + .row:after { clear: both; } + [class*="span"] { float: left; margin-left: 20px; } + .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 940px; } + .span12 { width: 940px; } + .span11 { width: 860px; } + .span10 { width: 780px; } + .span9 { width: 700px; } + .span8 { width: 620px; } + .span7 { width: 540px; } + .span6 { width: 460px; } + .span5 { width: 380px; } + .span4 { width: 300px; } + .span3 { width: 220px; } + .span2 { width: 140px; } + .span1 { width: 60px; } + .offset12 { margin-left: 980px; } + .offset11 { margin-left: 900px; } + .offset10 { margin-left: 820px; } + .offset9 { margin-left: 740px; } + .offset8 { margin-left: 660px; } + .offset7 { margin-left: 580px; } + .offset6 { margin-left: 500px; } + .offset5 { margin-left: 420px; } + .offset4 { margin-left: 340px; } + .offset3 { margin-left: 260px; } + .offset2 { margin-left: 180px; } + .offset1 { margin-left: 100px; } + .row-fluid { width: 100%; *zoom: 1; } + .row-fluid:before, .row-fluid:after { display: table; content: ""; } + .row-fluid:after { clear: both; } -.row-fluid > [class*="span"] { + +.row-fluid [class*="span"] { + display: block; float: left; + width: 100%; + min-height: 28px; margin-left: 2.127659574%; + *margin-left: 2.0744680846382977%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; } -.row-fluid > [class*="span"]:first-child { + +.row-fluid [class*="span"]:first-child { margin-left: 0; } -.row-fluid > .span12 { + +.row-fluid .span12 { width: 99.99999998999999%; + *width: 99.94680850063828%; } -.row-fluid > .span11 { + +.row-fluid .span11 { width: 91.489361693%; + *width: 91.4361702036383%; } -.row-fluid > .span10 { + +.row-fluid .span10 { width: 82.97872339599999%; + *width: 82.92553190663828%; } -.row-fluid > .span9 { + +.row-fluid .span9 { width: 74.468085099%; + *width: 74.4148936096383%; } -.row-fluid > .span8 { + +.row-fluid .span8 { width: 65.95744680199999%; + *width: 65.90425531263828%; } -.row-fluid > .span7 { + +.row-fluid .span7 { width: 57.446808505%; + *width: 57.3936170156383%; } -.row-fluid > .span6 { + +.row-fluid .span6 { width: 48.93617020799999%; + *width: 48.88297871863829%; } -.row-fluid > .span5 { + +.row-fluid .span5 { width: 40.425531911%; + *width: 40.3723404216383%; } -.row-fluid > .span4 { + +.row-fluid .span4 { width: 31.914893614%; + *width: 31.8617021246383%; } -.row-fluid > .span3 { + +.row-fluid .span3 { width: 23.404255317%; + *width: 23.3510638276383%; } -.row-fluid > .span2 { + +.row-fluid .span2 { width: 14.89361702%; + *width: 14.8404255306383%; } -.row-fluid > .span1 { + +.row-fluid .span1 { width: 6.382978723%; + *width: 6.329787233638298%; } + .container { - margin-left: auto; margin-right: auto; + margin-left: auto; *zoom: 1; } + .container:before, .container:after { display: table; content: ""; } + .container:after { clear: both; } + .container-fluid { - padding-left: 20px; padding-right: 20px; + padding-left: 20px; *zoom: 1; } + .container-fluid:before, .container-fluid:after { display: table; content: ""; } + .container-fluid:after { clear: both; } + p { margin: 0 0 9px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - line-height: 18px; } + p small { font-size: 11px; color: #999999; } + .lead { margin-bottom: 18px; font-size: 20px; font-weight: 200; line-height: 27px; } + h1, h2, h3, @@ -348,6 +448,7 @@ h6 { color: inherit; text-rendering: optimizelegibility; } + h1 small, h2 small, h3 small, @@ -357,227 +458,280 @@ h6 small { font-weight: normal; color: #999999; } + h1 { font-size: 30px; line-height: 36px; } + h1 small { font-size: 18px; } + h2 { font-size: 24px; line-height: 36px; } + h2 small { font-size: 18px; } + h3 { - line-height: 27px; font-size: 18px; + line-height: 27px; } + h3 small { font-size: 14px; } + h4, h5, h6 { line-height: 18px; } + h4 { font-size: 14px; } + h4 small { font-size: 12px; } + h5 { font-size: 12px; } + h6 { font-size: 11px; color: #999999; text-transform: uppercase; } + .page-header { padding-bottom: 17px; margin: 18px 0; border-bottom: 1px solid #eeeeee; } + .page-header h1 { line-height: 1; } + ul, ol { padding: 0; margin: 0 0 9px 25px; } + ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; } + ul { list-style: disc; } + ol { list-style: decimal; } + li { line-height: 18px; } + ul.unstyled, ol.unstyled { margin-left: 0; list-style: none; } + dl { margin-bottom: 18px; } + dt, dd { line-height: 18px; } + dt { font-weight: bold; line-height: 17px; } + dd { margin-left: 9px; } + .dl-horizontal dt { float: left; - clear: left; width: 120px; + overflow: hidden; + clear: left; text-align: right; + text-overflow: ellipsis; + white-space: nowrap; } + .dl-horizontal dd { margin-left: 130px; } + hr { margin: 18px 0; border: 0; border-top: 1px solid #eeeeee; border-bottom: 1px solid #ffffff; } + strong { font-weight: bold; } + em { font-style: italic; } + .muted { color: #999999; } + abbr[title] { - border-bottom: 1px dotted #ddd; cursor: help; + border-bottom: 1px dotted #999999; } + abbr.initialism { font-size: 90%; text-transform: uppercase; } + blockquote { padding: 0 0 0 15px; margin: 0 0 18px; border-left: 5px solid #eeeeee; } + blockquote p { margin-bottom: 0; font-size: 16px; font-weight: 300; line-height: 22.5px; } + blockquote small { display: block; line-height: 18px; color: #999999; } + blockquote small:before { content: '\2014 \00A0'; } + blockquote.pull-right { float: right; - padding-left: 0; padding-right: 15px; - border-left: 0; + padding-left: 0; border-right: 5px solid #eeeeee; + border-left: 0; } + blockquote.pull-right p, blockquote.pull-right small { text-align: right; } + q:before, q:after, blockquote:before, blockquote:after { content: ""; } + address { display: block; margin-bottom: 18px; - line-height: 18px; font-style: normal; + line-height: 18px; } + small { font-size: 100%; } + cite { font-style: normal; } + code, pre { padding: 0 3px 2px; - font-family: Menlo, Monaco, "Courier New", monospace; + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: #333333; -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; } + code { padding: 2px 4px; color: #d14; background-color: #f7f7f9; border: 1px solid #e1e1e8; } + pre { display: block; padding: 8.5px; margin: 0 0 9px; font-size: 12.025px; line-height: 18px; + word-break: break-all; + word-wrap: break-word; + white-space: pre; + white-space: pre-wrap; background-color: #f5f5f5; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - white-space: pre; - white-space: pre-wrap; - word-break: break-all; - word-wrap: break-word; + -moz-border-radius: 4px; + border-radius: 4px; } + pre.prettyprint { margin-bottom: 18px; } + pre code { padding: 0; color: inherit; background-color: transparent; border: 0; } + .pre-scrollable { max-height: 340px; overflow-y: scroll; } + form { margin: 0 0 18px; } + fieldset { padding: 0; margin: 0; border: 0; } + legend { display: block; width: 100%; @@ -587,12 +741,14 @@ legend { line-height: 36px; color: #333333; border: 0; - border-bottom: 1px solid #eee; + border-bottom: 1px solid #e5e5e5; } + legend small { font-size: 13.5px; color: #999999; } + label, input, button, @@ -602,82 +758,134 @@ textarea { font-weight: normal; line-height: 18px; } + input, button, select, textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } + label { display: block; margin-bottom: 5px; - color: #333333; } -input, -textarea, + select, +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], .uneditable-input { display: inline-block; - width: 210px; height: 18px; padding: 4px; margin-bottom: 9px; font-size: 13px; line-height: 18px; color: #555555; - border: 1px solid #cccccc; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; } -.uneditable-textarea { - width: auto; + +input, +textarea { + width: 210px; +} + +textarea { height: auto; } -label input, -label textarea, -label select { - display: block; + +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + background-color: #ffffff; + border: 1px solid #cccccc; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + -ms-transition: border linear 0.2s, box-shadow linear 0.2s; + -o-transition: border linear 0.2s, box-shadow linear 0.2s; + transition: border linear 0.2s, box-shadow linear 0.2s; } -input[type="image"], -input[type="checkbox"], -input[type="radio"] { - width: auto; - height: auto; - padding: 0; + +textarea:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="time"]:focus, +input[type="week"]:focus, +input[type="number"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="color"]:focus, +.uneditable-input:focus { + border-color: rgba(82, 168, 236, 0.8); + outline: 0; + outline: thin dotted \9; + /* IE6-9 */ + + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); +} + +input[type="radio"], +input[type="checkbox"] { margin: 3px 0; *margin-top: 0; /* IE7 */ line-height: normal; cursor: pointer; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - border: 0 \9; - /* IE9 and down */ - -} -input[type="image"] { - border: 0; } -input[type="file"] { + +input[type="submit"], +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"] { width: auto; - padding: initial; - line-height: initial; - border: initial; - background-color: #ffffff; - background-color: initial; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; } -input[type="button"], -input[type="reset"], -input[type="submit"] { + +.uneditable-textarea { width: auto; height: auto; } + select, input[type="file"] { height: 28px; @@ -688,41 +896,43 @@ input[type="file"] { line-height: 28px; } -input[type="file"] { - line-height: 18px \9; -} + select { width: 220px; - background-color: #ffffff; + border: 1px solid #bbb; } + select[multiple], select[size] { height: auto; } -input[type="image"] { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -textarea { - height: auto; -} -input[type="hidden"] { - display: none; + +select:focus, +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; } + .radio, .checkbox { + min-height: 18px; padding-left: 18px; } + .radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; margin-left: -18px; } + .controls > .radio:first-child, .controls > .checkbox:first-child { padding-top: 5px; } + .radio.inline, .checkbox.inline { display: inline-block; @@ -730,290 +940,368 @@ input[type="hidden"] { margin-bottom: 0; vertical-align: middle; } + .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { margin-left: 10px; } -input, -textarea { - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; - -moz-transition: border linear 0.2s, box-shadow linear 0.2s; - -ms-transition: border linear 0.2s, box-shadow linear 0.2s; - -o-transition: border linear 0.2s, box-shadow linear 0.2s; - transition: border linear 0.2s, box-shadow linear 0.2s; -} -input:focus, -textarea:focus { - border-color: rgba(82, 168, 236, 0.8); - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); - outline: 0; - outline: thin dotted \9; - /* IE6-9 */ -} -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus, -select:focus { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - outline: thin dotted #333; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} .input-mini { width: 60px; } + .input-small { width: 90px; } + .input-medium { width: 150px; } + .input-large { width: 210px; } + .input-xlarge { width: 270px; } + .input-xxlarge { width: 530px; } + input[class*="span"], select[class*="span"], textarea[class*="span"], -.uneditable-input { +.uneditable-input[class*="span"], +.row-fluid input[class*="span"], +.row-fluid select[class*="span"], +.row-fluid textarea[class*="span"], +.row-fluid .uneditable-input[class*="span"] { float: none; margin-left: 0; } + +.input-append input[class*="span"], +.input-append .uneditable-input[class*="span"], +.input-prepend input[class*="span"], +.input-prepend .uneditable-input[class*="span"], +.row-fluid .input-prepend [class*="span"], +.row-fluid .input-append [class*="span"] { + display: inline-block; +} + input, textarea, .uneditable-input { margin-left: 0; } -input.span12, textarea.span12, .uneditable-input.span12 { + +input.span12, +textarea.span12, +.uneditable-input.span12 { width: 930px; } -input.span11, textarea.span11, .uneditable-input.span11 { + +input.span11, +textarea.span11, +.uneditable-input.span11 { width: 850px; } -input.span10, textarea.span10, .uneditable-input.span10 { + +input.span10, +textarea.span10, +.uneditable-input.span10 { width: 770px; } -input.span9, textarea.span9, .uneditable-input.span9 { + +input.span9, +textarea.span9, +.uneditable-input.span9 { width: 690px; } -input.span8, textarea.span8, .uneditable-input.span8 { + +input.span8, +textarea.span8, +.uneditable-input.span8 { width: 610px; } -input.span7, textarea.span7, .uneditable-input.span7 { + +input.span7, +textarea.span7, +.uneditable-input.span7 { width: 530px; } -input.span6, textarea.span6, .uneditable-input.span6 { + +input.span6, +textarea.span6, +.uneditable-input.span6 { width: 450px; } -input.span5, textarea.span5, .uneditable-input.span5 { + +input.span5, +textarea.span5, +.uneditable-input.span5 { width: 370px; } -input.span4, textarea.span4, .uneditable-input.span4 { + +input.span4, +textarea.span4, +.uneditable-input.span4 { width: 290px; } -input.span3, textarea.span3, .uneditable-input.span3 { + +input.span3, +textarea.span3, +.uneditable-input.span3 { width: 210px; } -input.span2, textarea.span2, .uneditable-input.span2 { + +input.span2, +textarea.span2, +.uneditable-input.span2 { width: 130px; } -input.span1, textarea.span1, .uneditable-input.span1 { + +input.span1, +textarea.span1, +.uneditable-input.span1 { width: 50px; } + input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { + cursor: not-allowed; background-color: #eeeeee; border-color: #ddd; - cursor: not-allowed; } + +input[type="radio"][disabled], +input[type="checkbox"][disabled], +input[type="radio"][readonly], +input[type="checkbox"][readonly] { + background-color: transparent; +} + .control-group.warning > label, .control-group.warning .help-block, .control-group.warning .help-inline { color: #c09853; } + +.control-group.warning .checkbox, +.control-group.warning .radio, .control-group.warning input, .control-group.warning select, .control-group.warning textarea { color: #c09853; border-color: #c09853; } + +.control-group.warning .checkbox:focus, +.control-group.warning .radio:focus, .control-group.warning input:focus, .control-group.warning select:focus, .control-group.warning textarea:focus { border-color: #a47e3c; -webkit-box-shadow: 0 0 6px #dbc59e; - -moz-box-shadow: 0 0 6px #dbc59e; - box-shadow: 0 0 6px #dbc59e; + -moz-box-shadow: 0 0 6px #dbc59e; + box-shadow: 0 0 6px #dbc59e; } + .control-group.warning .input-prepend .add-on, .control-group.warning .input-append .add-on { color: #c09853; background-color: #fcf8e3; border-color: #c09853; } + .control-group.error > label, .control-group.error .help-block, .control-group.error .help-inline { color: #b94a48; } + +.control-group.error .checkbox, +.control-group.error .radio, .control-group.error input, .control-group.error select, .control-group.error textarea { color: #b94a48; border-color: #b94a48; } + +.control-group.error .checkbox:focus, +.control-group.error .radio:focus, .control-group.error input:focus, .control-group.error select:focus, .control-group.error textarea:focus { border-color: #953b39; -webkit-box-shadow: 0 0 6px #d59392; - -moz-box-shadow: 0 0 6px #d59392; - box-shadow: 0 0 6px #d59392; + -moz-box-shadow: 0 0 6px #d59392; + box-shadow: 0 0 6px #d59392; } + .control-group.error .input-prepend .add-on, .control-group.error .input-append .add-on { color: #b94a48; background-color: #f2dede; border-color: #b94a48; } + .control-group.success > label, .control-group.success .help-block, .control-group.success .help-inline { color: #468847; } + +.control-group.success .checkbox, +.control-group.success .radio, .control-group.success input, .control-group.success select, .control-group.success textarea { color: #468847; border-color: #468847; } + +.control-group.success .checkbox:focus, +.control-group.success .radio:focus, .control-group.success input:focus, .control-group.success select:focus, .control-group.success textarea:focus { border-color: #356635; -webkit-box-shadow: 0 0 6px #7aba7b; - -moz-box-shadow: 0 0 6px #7aba7b; - box-shadow: 0 0 6px #7aba7b; + -moz-box-shadow: 0 0 6px #7aba7b; + box-shadow: 0 0 6px #7aba7b; } + .control-group.success .input-prepend .add-on, .control-group.success .input-append .add-on { color: #468847; background-color: #dff0d8; border-color: #468847; } + input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid { color: #b94a48; border-color: #ee5f5b; } + input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, select:focus:required:invalid:focus { border-color: #e9322d; -webkit-box-shadow: 0 0 6px #f8b9b7; - -moz-box-shadow: 0 0 6px #f8b9b7; - box-shadow: 0 0 6px #f8b9b7; + -moz-box-shadow: 0 0 6px #f8b9b7; + box-shadow: 0 0 6px #f8b9b7; } + .form-actions { padding: 17px 20px 18px; margin-top: 18px; margin-bottom: 18px; - background-color: #eeeeee; - border-top: 1px solid #ddd; + background-color: #f5f5f5; + border-top: 1px solid #e5e5e5; *zoom: 1; } + .form-actions:before, .form-actions:after { display: table; content: ""; } + .form-actions:after { clear: both; } + .uneditable-input { - display: block; + overflow: hidden; + white-space: nowrap; + cursor: not-allowed; background-color: #ffffff; border-color: #eee; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - cursor: not-allowed; + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); } + :-moz-placeholder { color: #999999; } + +:-ms-input-placeholder { + color: #999999; +} + ::-webkit-input-placeholder { color: #999999; } + .help-block, .help-inline { color: #555555; } + .help-block { display: block; margin-bottom: 9px; } + .help-inline { display: inline-block; *display: inline; - /* IE7 inline-block hack */ - - *zoom: 1; - vertical-align: middle; padding-left: 5px; + vertical-align: middle; + *zoom: 1; } + .input-prepend, .input-append { margin-bottom: 5px; } + .input-prepend input, .input-append input, .input-prepend select, .input-append select, .input-prepend .uneditable-input, .input-append .uneditable-input { + position: relative; + margin-bottom: 0; *margin-left: 0; + vertical-align: middle; -webkit-border-radius: 0 3px 3px 0; - -moz-border-radius: 0 3px 3px 0; - border-radius: 0 3px 3px 0; + -moz-border-radius: 0 3px 3px 0; + border-radius: 0 3px 3px 0; } + .input-prepend input:focus, .input-append input:focus, .input-prepend select:focus, .input-append select:focus, .input-prepend .uneditable-input:focus, .input-append .uneditable-input:focus { - position: relative; z-index: 2; } + .input-prepend .uneditable-input, .input-append .uneditable-input { border-left-color: #ccc; } + .input-prepend .add-on, .input-append .add-on { display: inline-block; width: auto; - min-width: 16px; height: 18px; + min-width: 16px; padding: 4px 5px; font-weight: normal; line-height: 18px; @@ -1023,69 +1311,92 @@ select:focus:required:invalid:focus { background-color: #eeeeee; border: 1px solid #ccc; } + .input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn { - -webkit-border-radius: 3px 0 0 3px; - -moz-border-radius: 3px 0 0 3px; - border-radius: 3px 0 0 3px; + margin-left: -1px; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; } + .input-prepend .active, .input-append .active { background-color: #a9dba9; border-color: #46a546; } + .input-prepend .add-on, .input-prepend .btn { margin-right: -1px; } + +.input-prepend .add-on:first-child, +.input-prepend .btn:first-child { + -webkit-border-radius: 3px 0 0 3px; + -moz-border-radius: 3px 0 0 3px; + border-radius: 3px 0 0 3px; +} + .input-append input, -.input-append select .uneditable-input { +.input-append select, +.input-append .uneditable-input { -webkit-border-radius: 3px 0 0 3px; - -moz-border-radius: 3px 0 0 3px; - border-radius: 3px 0 0 3px; + -moz-border-radius: 3px 0 0 3px; + border-radius: 3px 0 0 3px; } + .input-append .uneditable-input { - border-left-color: #eee; border-right-color: #ccc; + border-left-color: #eee; } -.input-append .add-on, -.input-append .btn { - margin-left: -1px; + +.input-append .add-on:last-child, +.input-append .btn:last-child { -webkit-border-radius: 0 3px 3px 0; - -moz-border-radius: 0 3px 3px 0; - border-radius: 0 3px 3px 0; + -moz-border-radius: 0 3px 3px 0; + border-radius: 0 3px 3px 0; } + .input-prepend.input-append input, .input-prepend.input-append select, .input-prepend.input-append .uneditable-input { -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; } + .input-prepend.input-append .add-on:first-child, .input-prepend.input-append .btn:first-child { margin-right: -1px; -webkit-border-radius: 3px 0 0 3px; - -moz-border-radius: 3px 0 0 3px; - border-radius: 3px 0 0 3px; + -moz-border-radius: 3px 0 0 3px; + border-radius: 3px 0 0 3px; } + .input-prepend.input-append .add-on:last-child, .input-prepend.input-append .btn:last-child { margin-left: -1px; -webkit-border-radius: 0 3px 3px 0; - -moz-border-radius: 0 3px 3px 0; - border-radius: 0 3px 3px 0; + -moz-border-radius: 0 3px 3px 0; + border-radius: 0 3px 3px 0; } + .search-query { - padding-left: 14px; padding-right: 14px; + padding-right: 4px \9; + padding-left: 14px; + padding-left: 4px \9; + /* IE7-8 doesn't have border-radius, so don't indent the padding */ + margin-bottom: 0; -webkit-border-radius: 14px; - -moz-border-radius: 14px; - border-radius: 14px; + -moz-border-radius: 14px; + border-radius: 14px; } + .form-search input, .form-inline input, .form-horizontal input, @@ -1108,23 +1419,29 @@ select:focus:required:invalid:focus { .form-inline .input-append, .form-horizontal .input-append { display: inline-block; + *display: inline; margin-bottom: 0; + *zoom: 1; } + .form-search .hide, .form-inline .hide, .form-horizontal .hide { display: none; } + .form-search label, .form-inline label { display: inline-block; } + .form-search .input-append, .form-inline .input-append, .form-search .input-prepend, .form-inline .input-prepend { margin-bottom: 0; } + .form-search .radio, .form-search .checkbox, .form-inline .radio, @@ -1133,64 +1450,79 @@ select:focus:required:invalid:focus { margin-bottom: 0; vertical-align: middle; } + .form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"], .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { float: left; - margin-left: 0; margin-right: 3px; + margin-left: 0; } + .control-group { margin-bottom: 9px; } + legend + .control-group { margin-top: 18px; -webkit-margin-top-collapse: separate; } + .form-horizontal .control-group { margin-bottom: 18px; *zoom: 1; } + .form-horizontal .control-group:before, .form-horizontal .control-group:after { display: table; content: ""; } + .form-horizontal .control-group:after { clear: both; } + .form-horizontal .control-label { float: left; width: 140px; padding-top: 5px; text-align: right; } -.form-horizontal .controls { - margin-left: 160px; - /* Super jank IE7 fix to ensure the inputs in .input-append and input-prepend don't inherit the margin of the parent, in this case .controls */ +.form-horizontal .controls { *display: inline-block; - *margin-left: 0; *padding-left: 20px; + margin-left: 160px; + *margin-left: 0; +} + +.form-horizontal .controls:first-child { + *padding-left: 160px; } + .form-horizontal .help-block { margin-top: 9px; margin-bottom: 0; } + .form-horizontal .form-actions { padding-left: 160px; } + table { max-width: 100%; + background-color: transparent; border-collapse: collapse; border-spacing: 0; - background-color: transparent; } + .table { width: 100%; margin-bottom: 18px; } + .table th, .table td { padding: 8px; @@ -1199,646 +1531,907 @@ table { vertical-align: top; border-top: 1px solid #dddddd; } + .table th { font-weight: bold; } + .table thead th { vertical-align: bottom; } + +.table caption + thead tr:first-child th, +.table caption + thead tr:first-child td, .table colgroup + thead tr:first-child th, .table colgroup + thead tr:first-child td, .table thead:first-child tr:first-child th, .table thead:first-child tr:first-child td { border-top: 0; } + .table tbody + tbody { border-top: 2px solid #dddddd; } + .table-condensed th, .table-condensed td { padding: 4px 5px; } + .table-bordered { border: 1px solid #dddddd; - border-left: 0; border-collapse: separate; *border-collapse: collapsed; + border-left: 0; -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } + .table-bordered th, .table-bordered td { border-left: 1px solid #dddddd; } + +.table-bordered caption + thead tr:first-child th, +.table-bordered caption + tbody tr:first-child th, +.table-bordered caption + tbody tr:first-child td, +.table-bordered colgroup + thead tr:first-child th, +.table-bordered colgroup + tbody tr:first-child th, +.table-bordered colgroup + tbody tr:first-child td, .table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td { border-top: 0; } + .table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child { - -webkit-border-radius: 4px 0 0 0; - -moz-border-radius: 4px 0 0 0; - border-radius: 4px 0 0 0; + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; } + .table-bordered thead:first-child tr:first-child th:last-child, .table-bordered tbody:first-child tr:first-child td:last-child { - -webkit-border-radius: 0 4px 0 0; - -moz-border-radius: 0 4px 0 0; - border-radius: 0 4px 0 0; + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; } + .table-bordered thead:last-child tr:last-child th:first-child, .table-bordered tbody:last-child tr:last-child td:first-child { -webkit-border-radius: 0 0 0 4px; - -moz-border-radius: 0 0 0 4px; - border-radius: 0 0 0 4px; + -moz-border-radius: 0 0 0 4px; + border-radius: 0 0 0 4px; + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; } + .table-bordered thead:last-child tr:last-child th:last-child, .table-bordered tbody:last-child tr:last-child td:last-child { - -webkit-border-radius: 0 0 4px 0; - -moz-border-radius: 0 0 4px 0; - border-radius: 0 0 4px 0; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; } + .table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th { background-color: #f9f9f9; } + .table tbody tr:hover td, .table tbody tr:hover th { background-color: #f5f5f5; } + table .span1 { float: none; width: 44px; margin-left: 0; } + table .span2 { float: none; width: 124px; margin-left: 0; } + table .span3 { float: none; width: 204px; margin-left: 0; } + table .span4 { float: none; width: 284px; margin-left: 0; } + table .span5 { float: none; width: 364px; margin-left: 0; } + table .span6 { float: none; width: 444px; margin-left: 0; } + table .span7 { float: none; width: 524px; margin-left: 0; } + table .span8 { float: none; width: 604px; margin-left: 0; } + table .span9 { float: none; width: 684px; margin-left: 0; } + table .span10 { float: none; width: 764px; margin-left: 0; } + table .span11 { float: none; width: 844px; margin-left: 0; } + table .span12 { float: none; width: 924px; margin-left: 0; } + table .span13 { float: none; width: 1004px; margin-left: 0; } + table .span14 { float: none; width: 1084px; margin-left: 0; } + table .span15 { float: none; width: 1164px; margin-left: 0; } + table .span16 { float: none; width: 1244px; margin-left: 0; } + table .span17 { float: none; width: 1324px; margin-left: 0; } + table .span18 { float: none; width: 1404px; margin-left: 0; } + table .span19 { float: none; width: 1484px; margin-left: 0; } + table .span20 { float: none; width: 1564px; margin-left: 0; } + table .span21 { float: none; width: 1644px; margin-left: 0; } + table .span22 { float: none; width: 1724px; margin-left: 0; } + table .span23 { float: none; width: 1804px; margin-left: 0; } + table .span24 { float: none; width: 1884px; margin-left: 0; } + [class^="icon-"], [class*=" icon-"] { display: inline-block; width: 14px; height: 14px; + *margin-right: .3em; line-height: 14px; vertical-align: text-top; background-image: url("../img/glyphicons-halflings.png"); background-position: 14px 14px; background-repeat: no-repeat; - *margin-right: .3em; } + [class^="icon-"]:last-child, [class*=" icon-"]:last-child { *margin-left: 0; } + .icon-white { background-image: url("../img/glyphicons-halflings-white.png"); } + .icon-glass { background-position: 0 0; } + .icon-music { background-position: -24px 0; } + .icon-search { background-position: -48px 0; } + .icon-envelope { background-position: -72px 0; } + .icon-heart { background-position: -96px 0; } + .icon-star { background-position: -120px 0; } + .icon-star-empty { background-position: -144px 0; } + .icon-user { background-position: -168px 0; } + .icon-film { background-position: -192px 0; } + .icon-th-large { background-position: -216px 0; } + .icon-th { background-position: -240px 0; } + .icon-th-list { background-position: -264px 0; } + .icon-ok { background-position: -288px 0; } + .icon-remove { background-position: -312px 0; } + .icon-zoom-in { background-position: -336px 0; } + .icon-zoom-out { background-position: -360px 0; } + .icon-off { background-position: -384px 0; } + .icon-signal { background-position: -408px 0; } + .icon-cog { background-position: -432px 0; } + .icon-trash { background-position: -456px 0; } + .icon-home { background-position: 0 -24px; } + .icon-file { background-position: -24px -24px; } + .icon-time { background-position: -48px -24px; } + .icon-road { background-position: -72px -24px; } + .icon-download-alt { background-position: -96px -24px; } + .icon-download { background-position: -120px -24px; } + .icon-upload { background-position: -144px -24px; } + .icon-inbox { background-position: -168px -24px; } + .icon-play-circle { background-position: -192px -24px; } + .icon-repeat { background-position: -216px -24px; } + .icon-refresh { background-position: -240px -24px; } + .icon-list-alt { background-position: -264px -24px; } + .icon-lock { background-position: -287px -24px; } + .icon-flag { background-position: -312px -24px; } + .icon-headphones { background-position: -336px -24px; } + .icon-volume-off { background-position: -360px -24px; } + .icon-volume-down { background-position: -384px -24px; } + .icon-volume-up { background-position: -408px -24px; } + .icon-qrcode { background-position: -432px -24px; } + .icon-barcode { background-position: -456px -24px; } + .icon-tag { background-position: 0 -48px; } + .icon-tags { background-position: -25px -48px; } + .icon-book { background-position: -48px -48px; } + .icon-bookmark { background-position: -72px -48px; } + .icon-print { background-position: -96px -48px; } + .icon-camera { background-position: -120px -48px; } + .icon-font { background-position: -144px -48px; } + .icon-bold { background-position: -167px -48px; } + .icon-italic { background-position: -192px -48px; } + .icon-text-height { background-position: -216px -48px; } + .icon-text-width { background-position: -240px -48px; } + .icon-align-left { background-position: -264px -48px; } + .icon-align-center { background-position: -288px -48px; } + .icon-align-right { background-position: -312px -48px; } + .icon-align-justify { background-position: -336px -48px; } + .icon-list { background-position: -360px -48px; } + .icon-indent-left { background-position: -384px -48px; } + .icon-indent-right { background-position: -408px -48px; } + .icon-facetime-video { background-position: -432px -48px; } + .icon-picture { background-position: -456px -48px; } + .icon-pencil { background-position: 0 -72px; } + .icon-map-marker { background-position: -24px -72px; } + .icon-adjust { background-position: -48px -72px; } + .icon-tint { background-position: -72px -72px; } + .icon-edit { background-position: -96px -72px; } + .icon-share { background-position: -120px -72px; } + .icon-check { background-position: -144px -72px; } + .icon-move { background-position: -168px -72px; } + .icon-step-backward { background-position: -192px -72px; } + .icon-fast-backward { background-position: -216px -72px; } + .icon-backward { background-position: -240px -72px; } + .icon-play { background-position: -264px -72px; } + .icon-pause { background-position: -288px -72px; } + .icon-stop { background-position: -312px -72px; } + .icon-forward { background-position: -336px -72px; } + .icon-fast-forward { background-position: -360px -72px; } + .icon-step-forward { background-position: -384px -72px; } + .icon-eject { background-position: -408px -72px; } + .icon-chevron-left { background-position: -432px -72px; } + .icon-chevron-right { background-position: -456px -72px; } + .icon-plus-sign { background-position: 0 -96px; } + .icon-minus-sign { background-position: -24px -96px; } + .icon-remove-sign { background-position: -48px -96px; } + .icon-ok-sign { background-position: -72px -96px; } + .icon-question-sign { background-position: -96px -96px; } + .icon-info-sign { background-position: -120px -96px; } + .icon-screenshot { background-position: -144px -96px; } + .icon-remove-circle { background-position: -168px -96px; } + .icon-ok-circle { background-position: -192px -96px; } + .icon-ban-circle { background-position: -216px -96px; } + .icon-arrow-left { background-position: -240px -96px; } + .icon-arrow-right { background-position: -264px -96px; } + .icon-arrow-up { background-position: -289px -96px; } + .icon-arrow-down { background-position: -312px -96px; } + .icon-share-alt { background-position: -336px -96px; } + .icon-resize-full { background-position: -360px -96px; } + .icon-resize-small { background-position: -384px -96px; } + .icon-plus { background-position: -408px -96px; } + .icon-minus { background-position: -433px -96px; } + .icon-asterisk { background-position: -456px -96px; } + .icon-exclamation-sign { background-position: 0 -120px; } + .icon-gift { background-position: -24px -120px; } + .icon-leaf { background-position: -48px -120px; } + .icon-fire { background-position: -72px -120px; } + .icon-eye-open { background-position: -96px -120px; } + .icon-eye-close { background-position: -120px -120px; } + .icon-warning-sign { background-position: -144px -120px; } + .icon-plane { background-position: -168px -120px; } + .icon-calendar { background-position: -192px -120px; } + .icon-random { background-position: -216px -120px; } + .icon-comment { background-position: -240px -120px; } + .icon-magnet { background-position: -264px -120px; } + .icon-chevron-up { background-position: -288px -120px; } + .icon-chevron-down { background-position: -313px -119px; } + .icon-retweet { background-position: -336px -120px; } + .icon-shopping-cart { background-position: -360px -120px; } + .icon-folder-close { background-position: -384px -120px; } + .icon-folder-open { background-position: -408px -120px; } + .icon-resize-vertical { background-position: -432px -119px; } + .icon-resize-horizontal { background-position: -456px -118px; } + +.icon-hdd { + background-position: 0 -144px; +} + +.icon-bullhorn { + background-position: -24px -144px; +} + +.icon-bell { + background-position: -48px -144px; +} + +.icon-certificate { + background-position: -72px -144px; +} + +.icon-thumbs-up { + background-position: -96px -144px; +} + +.icon-thumbs-down { + background-position: -120px -144px; +} + +.icon-hand-right { + background-position: -144px -144px; +} + +.icon-hand-left { + background-position: -168px -144px; +} + +.icon-hand-up { + background-position: -192px -144px; +} + +.icon-hand-down { + background-position: -216px -144px; +} + +.icon-circle-arrow-right { + background-position: -240px -144px; +} + +.icon-circle-arrow-left { + background-position: -264px -144px; +} + +.icon-circle-arrow-up { + background-position: -288px -144px; +} + +.icon-circle-arrow-down { + background-position: -312px -144px; +} + +.icon-globe { + background-position: -336px -144px; +} + +.icon-wrench { + background-position: -360px -144px; +} + +.icon-tasks { + background-position: -384px -144px; +} + +.icon-filter { + background-position: -408px -144px; +} + +.icon-briefcase { + background-position: -432px -144px; +} + +.icon-fullscreen { + background-position: -456px -144px; +} + +.dropup, .dropdown { position: relative; } + .dropdown-toggle { *margin-bottom: -3px; } + .dropdown-toggle:active, .open .dropdown-toggle { outline: 0; } + .caret { display: inline-block; width: 0; height: 0; vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; border-top: 4px solid #000000; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + content: ""; opacity: 0.3; filter: alpha(opacity=30); - content: ""; } + .dropdown .caret { margin-top: 8px; margin-left: 2px; } + .dropdown:hover .caret, -.open.dropdown .caret { +.open .caret { opacity: 1; filter: alpha(opacity=100); } + .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; - float: left; display: none; + float: left; min-width: 160px; padding: 4px 0; - margin: 0; + margin: 1px 0 0; list-style: none; background-color: #ffffff; - border-color: #ccc; - border-color: rgba(0, 0, 0, 0.2); - border-style: solid; - border-width: 1px; - -webkit-border-radius: 0 0 5px 5px; - -moz-border-radius: 0 0 5px 5px; - border-radius: 0 0 5px 5px; - -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); *border-right-width: 2px; *border-bottom-width: 2px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } + .dropdown-menu.pull-right { right: 0; left: auto; } + .dropdown-menu .divider { + *width: 100%; height: 1px; margin: 8px 1px; + *margin: -5px 0 5px; overflow: hidden; background-color: #e5e5e5; border-bottom: 1px solid #ffffff; - *width: 100%; - *margin: -5px 0 5px; } + .dropdown-menu a { display: block; padding: 3px 15px; @@ -1848,6 +2441,7 @@ table .span24 { color: #333333; white-space: nowrap; } + .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { @@ -1855,39 +2449,41 @@ table .span24 { text-decoration: none; background-color: #0088cc; } -.dropdown.open { + +.open { *z-index: 1000; } -.dropdown.open .dropdown-toggle { - color: #ffffff; - background: #ccc; - background: rgba(0, 0, 0, 0.3); -} -.dropdown.open .dropdown-menu { + +.open > .dropdown-menu { display: block; } -.pull-right .dropdown-menu { - left: auto; + +.pull-right > .dropdown-menu { right: 0; + left: auto; } + .dropup .caret, .navbar-fixed-bottom .dropdown .caret { border-top: 0; border-bottom: 4px solid #000000; content: "\2191"; } + .dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 1px; } + .typeahead { margin-top: 2px; -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } + .well { min-height: 20px; padding: 19px; @@ -1896,52 +2492,60 @@ table .span24 { border: 1px solid #eee; border: 1px solid rgba(0, 0, 0, 0.05); -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } + .well blockquote { border-color: #ddd; border-color: rgba(0, 0, 0, 0.15); } + .well-large { padding: 24px; -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; } + .well-small { padding: 9px; -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; } + .fade { - -webkit-transition: opacity 0.15s linear; - -moz-transition: opacity 0.15s linear; - -ms-transition: opacity 0.15s linear; - -o-transition: opacity 0.15s linear; - transition: opacity 0.15s linear; opacity: 0; + -webkit-transition: opacity 0.15s linear; + -moz-transition: opacity 0.15s linear; + -ms-transition: opacity 0.15s linear; + -o-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; } + .fade.in { opacity: 1; } + .collapse { - -webkit-transition: height 0.35s ease; - -moz-transition: height 0.35s ease; - -ms-transition: height 0.35s ease; - -o-transition: height 0.35s ease; - transition: height 0.35s ease; position: relative; - overflow: hidden; height: 0; + overflow: hidden; + -webkit-transition: height 0.35s ease; + -moz-transition: height 0.35s ease; + -ms-transition: height 0.35s ease; + -o-transition: height 0.35s ease; + transition: height 0.35s ease; } + .collapse.in { height: auto; } + .close { float: right; font-size: 20px; @@ -1952,125 +2556,153 @@ table .span24 { opacity: 0.2; filter: alpha(opacity=20); } + .close:hover { color: #000000; text-decoration: none; + cursor: pointer; opacity: 0.4; filter: alpha(opacity=40); +} + +button.close { + padding: 0; cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; } + .btn { display: inline-block; *display: inline; - /* IE7 inline-block hack */ - - *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; + *margin-left: .3em; font-size: 13px; line-height: 18px; + *line-height: 20px; color: #333333; text-align: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; + cursor: pointer; background-color: #f5f5f5; - background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); + *background-color: #e6e6e6; background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); + background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); - border-color: #e6e6e6 #e6e6e6 #bfbfbf; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(enabled=false); border: 1px solid #cccccc; + *border: 0; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-bottom-color: #b3b3b3; -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(enabled=false); + *zoom: 1; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - cursor: pointer; - *margin-left: .3em; + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } + .btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; + *background-color: #d9d9d9; } + .btn:active, .btn.active { background-color: #cccccc \9; } + .btn:first-child { *margin-left: 0; } + .btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; + *background-color: #d9d9d9; + /* Buttons in IE7 don't get borders, so darken on hover */ + background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; - -moz-transition: background-position 0.1s linear; - -ms-transition: background-position 0.1s linear; - -o-transition: background-position 0.1s linear; - transition: background-position 0.1s linear; + -moz-transition: background-position 0.1s linear; + -ms-transition: background-position 0.1s linear; + -o-transition: background-position 0.1s linear; + transition: background-position 0.1s linear; } + .btn:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } + .btn.active, .btn:active { - background-image: none; - -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); background-color: #e6e6e6; background-color: #d9d9d9 \9; + background-image: none; outline: 0; + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } + .btn.disabled, .btn[disabled] { cursor: default; - background-image: none; background-color: #e6e6e6; + background-image: none; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } + .btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; } + .btn-large [class^="icon-"] { margin-top: 1px; } + .btn-small { padding: 5px 9px; font-size: 11px; line-height: 16px; } + .btn-small [class^="icon-"] { margin-top: -1px; } + .btn-mini { padding: 2px 6px; font-size: 11px; line-height: 14px; } + .btn-primary, .btn-primary:hover, .btn-warning, @@ -2083,9 +2715,10 @@ table .span24 { .btn-info:hover, .btn-inverse, .btn-inverse:hover { - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } + .btn-primary.active, .btn-warning.active, .btn-danger.active, @@ -2094,204 +2727,251 @@ table .span24 { .btn-inverse.active { color: rgba(255, 255, 255, 0.75); } + +.btn { + border-color: #ccc; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} + .btn-primary { background-color: #0074cc; - background-image: -moz-linear-gradient(top, #0088cc, #0055cc); + *background-color: #0055cc; background-image: -ms-linear-gradient(top, #0088cc, #0055cc); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); background-image: -o-linear-gradient(top, #0088cc, #0055cc); + background-image: -moz-linear-gradient(top, #0088cc, #0055cc); background-image: linear-gradient(top, #0088cc, #0055cc); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0); border-color: #0055cc #0055cc #003580; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } + .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { background-color: #0055cc; + *background-color: #004ab3; } + .btn-primary:active, .btn-primary.active { background-color: #004099 \9; } + .btn-warning { background-color: #faa732; - background-image: -moz-linear-gradient(top, #fbb450, #f89406); + *background-color: #f89406; background-image: -ms-linear-gradient(top, #fbb450, #f89406); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #f89406); + background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-image: linear-gradient(top, #fbb450, #f89406); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0); border-color: #f89406 #f89406 #ad6704; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } + .btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] { background-color: #f89406; + *background-color: #df8505; } + .btn-warning:active, .btn-warning.active { background-color: #c67605 \9; } + .btn-danger { background-color: #da4f49; - background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); + *background-color: #bd362f; background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); + background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); background-image: linear-gradient(top, #ee5f5b, #bd362f); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0); border-color: #bd362f #bd362f #802420; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } + .btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] { background-color: #bd362f; + *background-color: #a9302a; } + .btn-danger:active, .btn-danger.active { background-color: #942a25 \9; } + .btn-success { background-color: #5bb75b; - background-image: -moz-linear-gradient(top, #62c462, #51a351); + *background-color: #51a351; background-image: -ms-linear-gradient(top, #62c462, #51a351); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); background-image: -webkit-linear-gradient(top, #62c462, #51a351); background-image: -o-linear-gradient(top, #62c462, #51a351); + background-image: -moz-linear-gradient(top, #62c462, #51a351); background-image: linear-gradient(top, #62c462, #51a351); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0); border-color: #51a351 #51a351 #387038; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } + .btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] { background-color: #51a351; + *background-color: #499249; } + .btn-success:active, .btn-success.active { background-color: #408140 \9; } + .btn-info { background-color: #49afcd; - background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); + *background-color: #2f96b4; background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4); background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); + background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); background-image: linear-gradient(top, #5bc0de, #2f96b4); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0); border-color: #2f96b4 #2f96b4 #1f6377; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } + .btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] { background-color: #2f96b4; + *background-color: #2a85a0; } + .btn-info:active, .btn-info.active { background-color: #24748c \9; } + .btn-inverse { background-color: #414141; - background-image: -moz-linear-gradient(top, #555555, #222222); + *background-color: #222222; background-image: -ms-linear-gradient(top, #555555, #222222); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222)); background-image: -webkit-linear-gradient(top, #555555, #222222); background-image: -o-linear-gradient(top, #555555, #222222); + background-image: -moz-linear-gradient(top, #555555, #222222); background-image: linear-gradient(top, #555555, #222222); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0); border-color: #222222 #222222 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } + .btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] { background-color: #222222; + *background-color: #151515; } + .btn-inverse:active, .btn-inverse.active { background-color: #080808 \9; } + button.btn, input[type="submit"].btn { *padding-top: 2px; *padding-bottom: 2px; } + button.btn::-moz-focus-inner, input[type="submit"].btn::-moz-focus-inner { padding: 0; border: 0; } + button.btn.btn-large, input[type="submit"].btn.btn-large { *padding-top: 7px; *padding-bottom: 7px; } + button.btn.btn-small, input[type="submit"].btn.btn-small { *padding-top: 3px; *padding-bottom: 3px; } + button.btn.btn-mini, input[type="submit"].btn.btn-mini { *padding-top: 1px; *padding-bottom: 1px; } + .btn-group { position: relative; - *zoom: 1; *margin-left: .3em; + *zoom: 1; } + .btn-group:before, .btn-group:after { display: table; content: ""; } + .btn-group:after { clear: both; } + .btn-group:first-child { *margin-left: 0; } + .btn-group + .btn-group { margin-left: 5px; } + .btn-toolbar { margin-top: 9px; margin-bottom: 9px; } + .btn-toolbar .btn-group { display: inline-block; *display: inline; @@ -2299,120 +2979,159 @@ input[type="submit"].btn.btn-mini { *zoom: 1; } -.btn-group .btn { + +.btn-group > .btn { position: relative; float: left; margin-left: -1px; -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; } -.btn-group .btn:first-child { + +.btn-group > .btn:first-child { margin-left: 0; - -webkit-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; - border-bottom-left-radius: 4px; + -moz-border-radius-topleft: 4px; } -.btn-group .btn:last-child, -.btn-group .dropdown-toggle { + +.btn-group > .btn:last-child, +.btn-group > .dropdown-toggle { -webkit-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - border-top-right-radius: 4px; + border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; - border-bottom-right-radius: 4px; } -.btn-group .btn.large:first-child { + +.btn-group > .btn.large:first-child { margin-left: 0; - -webkit-border-top-left-radius: 6px; - -moz-border-radius-topleft: 6px; - border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; + border-bottom-left-radius: 6px; + -webkit-border-top-left-radius: 6px; + border-top-left-radius: 6px; -moz-border-radius-bottomleft: 6px; - border-bottom-left-radius: 6px; + -moz-border-radius-topleft: 6px; } -.btn-group .btn.large:last-child, -.btn-group .large.dropdown-toggle { + +.btn-group > .btn.large:last-child, +.btn-group > .large.dropdown-toggle { -webkit-border-top-right-radius: 6px; - -moz-border-radius-topright: 6px; - border-top-right-radius: 6px; + border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; + border-bottom-right-radius: 6px; + -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; - border-bottom-right-radius: 6px; } -.btn-group .btn:hover, -.btn-group .btn:focus, -.btn-group .btn:active, -.btn-group .btn.active { + +.btn-group > .btn:hover, +.btn-group > .btn:focus, +.btn-group > .btn:active, +.btn-group > .btn.active { z-index: 2; } + .btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle { outline: 0; } -.btn-group .dropdown-toggle { - padding-left: 8px; + +.btn-group > .dropdown-toggle { + *padding-top: 4px; padding-right: 8px; + *padding-bottom: 4px; + padding-left: 8px; -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - *padding-top: 3px; - *padding-bottom: 3px; + -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } -.btn-group .btn-mini.dropdown-toggle { - padding-left: 5px; + +.btn-group > .btn-mini.dropdown-toggle { padding-right: 5px; - *padding-top: 1px; - *padding-bottom: 1px; + padding-left: 5px; } -.btn-group .btn-small.dropdown-toggle { + +.btn-group > .btn-small.dropdown-toggle { *padding-top: 4px; *padding-bottom: 4px; } -.btn-group .btn-large.dropdown-toggle { - padding-left: 12px; + +.btn-group > .btn-large.dropdown-toggle { padding-right: 12px; + padding-left: 12px; } -.btn-group.open { - *z-index: 1000; -} -.btn-group.open .dropdown-menu { - display: block; - margin-top: 1px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} + .btn-group.open .dropdown-toggle { background-image: none; - -webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.btn-group.open .btn.dropdown-toggle { + background-color: #e6e6e6; +} + +.btn-group.open .btn-primary.dropdown-toggle { + background-color: #0055cc; +} + +.btn-group.open .btn-warning.dropdown-toggle { + background-color: #f89406; } + +.btn-group.open .btn-danger.dropdown-toggle { + background-color: #bd362f; +} + +.btn-group.open .btn-success.dropdown-toggle { + background-color: #51a351; +} + +.btn-group.open .btn-info.dropdown-toggle { + background-color: #2f96b4; +} + +.btn-group.open .btn-inverse.dropdown-toggle { + background-color: #222222; +} + .btn .caret { margin-top: 7px; margin-left: 0; } + .btn:hover .caret, .open.btn-group .caret { opacity: 1; filter: alpha(opacity=100); } + .btn-mini .caret { margin-top: 5px; } + .btn-small .caret { margin-top: 6px; } + .btn-large .caret { margin-top: 6px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #000000; + border-top-width: 5px; + border-right-width: 5px; + border-left-width: 5px; } + +.dropup .btn-large .caret { + border-top: 0; + border-bottom: 5px solid #000000; +} + .btn-primary .caret, .btn-warning .caret, .btn-danger .caret, @@ -2424,65 +3143,82 @@ input[type="submit"].btn.btn-mini { opacity: 0.75; filter: alpha(opacity=75); } + .alert { padding: 8px 35px 8px 14px; margin-bottom: 18px; + color: #c09853; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - color: #c09853; + -moz-border-radius: 4px; + border-radius: 4px; } + .alert-heading { color: inherit; } + .alert .close { position: relative; top: -2px; right: -21px; line-height: 18px; } + .alert-success { + color: #468847; background-color: #dff0d8; border-color: #d6e9c6; - color: #468847; } + .alert-danger, .alert-error { + color: #b94a48; background-color: #f2dede; border-color: #eed3d7; - color: #b94a48; } + .alert-info { + color: #3a87ad; background-color: #d9edf7; border-color: #bce8f1; - color: #3a87ad; } + .alert-block { padding-top: 14px; padding-bottom: 14px; } + .alert-block > p, .alert-block > ul { margin-bottom: 0; } + .alert-block p + p { margin-top: 5px; } + .nav { - margin-left: 0; margin-bottom: 18px; + margin-left: 0; list-style: none; } + .nav > li > a { display: block; } + .nav > li > a:hover { text-decoration: none; background-color: #eeeeee; } + +.nav > .pull-right { + float: right; +} + .nav .nav-header { display: block; padding: 3px 15px; @@ -2493,45 +3229,54 @@ input[type="submit"].btn.btn-mini { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-transform: uppercase; } + .nav li + .nav-header { margin-top: 9px; } + .nav-list { - padding-left: 15px; padding-right: 15px; + padding-left: 15px; margin-bottom: 0; } + .nav-list > li > a, .nav-list .nav-header { - margin-left: -15px; margin-right: -15px; + margin-left: -15px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } + .nav-list > li > a { padding: 3px 15px; } + .nav-list > .active > a, .nav-list > .active > a:hover { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); background-color: #0088cc; } + .nav-list [class^="icon-"] { margin-right: 2px; } + .nav-list .divider { + *width: 100%; height: 1px; margin: 8px 1px; + *margin: -5px 0 5px; overflow: hidden; background-color: #e5e5e5; border-bottom: 1px solid #ffffff; - *width: 100%; - *margin: -5px 0 5px; } + .nav-tabs, .nav-pills { *zoom: 1; } + .nav-tabs:before, .nav-pills:before, .nav-tabs:after, @@ -2539,14 +3284,17 @@ input[type="submit"].btn.btn-mini { display: table; content: ""; } + .nav-tabs:after, .nav-pills:after { clear: both; } + .nav-tabs > li, .nav-pills > li { float: left; } + .nav-tabs > li > a, .nav-pills > li > a { padding-right: 12px; @@ -2554,234 +3302,283 @@ input[type="submit"].btn.btn-mini { margin-right: 2px; line-height: 14px; } + .nav-tabs { border-bottom: 1px solid #ddd; } + .nav-tabs > li { margin-bottom: -1px; } + .nav-tabs > li > a { padding-top: 8px; padding-bottom: 8px; line-height: 18px; border: 1px solid transparent; -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; } + .nav-tabs > li > a:hover { border-color: #eeeeee #eeeeee #dddddd; } + .nav-tabs > .active > a, .nav-tabs > .active > a:hover { color: #555555; + cursor: default; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; - cursor: default; } + .nav-pills > li > a { padding-top: 8px; padding-bottom: 8px; margin-top: 2px; margin-bottom: 2px; -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; } + .nav-pills > .active > a, .nav-pills > .active > a:hover { color: #ffffff; background-color: #0088cc; } + .nav-stacked > li { float: none; } + .nav-stacked > li > a { margin-right: 0; } + .nav-tabs.nav-stacked { border-bottom: 0; } + .nav-tabs.nav-stacked > li > a { border: 1px solid #ddd; -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; } + .nav-tabs.nav-stacked > li:first-child > a { -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; } + .nav-tabs.nav-stacked > li:last-child > a { -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; } + .nav-tabs.nav-stacked > li > a:hover { - border-color: #ddd; z-index: 2; + border-color: #ddd; } + .nav-pills.nav-stacked > li > a { margin-bottom: 3px; } + .nav-pills.nav-stacked > li:last-child > a { margin-bottom: 1px; } -.nav-tabs .dropdown-menu, -.nav-pills .dropdown-menu { - margin-top: 1px; - border-width: 1px; + +.nav-tabs .dropdown-menu { + -webkit-border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + border-radius: 0 0 5px 5px; } + .nav-pills .dropdown-menu { -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } + .nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret { + margin-top: 6px; border-top-color: #0088cc; border-bottom-color: #0088cc; - margin-top: 6px; } + .nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret { border-top-color: #005580; border-bottom-color: #005580; } + .nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret { border-top-color: #333333; border-bottom-color: #333333; } + .nav > .dropdown.active > a:hover { color: #000000; cursor: pointer; } + .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, -.nav > .open.active > a:hover { +.nav > li.dropdown.open.active > a:hover { color: #ffffff; background-color: #999999; border-color: #999999; } -.nav .open .caret, -.nav .open.active .caret, -.nav .open a:hover .caret { + +.nav li.dropdown.open .caret, +.nav li.dropdown.open.active .caret, +.nav li.dropdown.open a:hover .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; opacity: 1; filter: alpha(opacity=100); } + .tabs-stacked .open > a:hover { border-color: #999999; } + .tabbable { *zoom: 1; } + .tabbable:before, .tabbable:after { display: table; content: ""; } + .tabbable:after { clear: both; } + .tab-content { - display: table; - width: 100%; + overflow: auto; } -.tabs-below .nav-tabs, -.tabs-right .nav-tabs, -.tabs-left .nav-tabs { + +.tabs-below > .nav-tabs, +.tabs-right > .nav-tabs, +.tabs-left > .nav-tabs { border-bottom: 0; } + .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } + .tab-content > .active, .pill-content > .active { display: block; } -.tabs-below .nav-tabs { + +.tabs-below > .nav-tabs { border-top: 1px solid #ddd; } -.tabs-below .nav-tabs > li { + +.tabs-below > .nav-tabs > li { margin-top: -1px; margin-bottom: 0; } -.tabs-below .nav-tabs > li > a { + +.tabs-below > .nav-tabs > li > a { -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; } -.tabs-below .nav-tabs > li > a:hover { - border-bottom-color: transparent; + +.tabs-below > .nav-tabs > li > a:hover { border-top-color: #ddd; + border-bottom-color: transparent; } -.tabs-below .nav-tabs .active > a, -.tabs-below .nav-tabs .active > a:hover { + +.tabs-below > .nav-tabs > .active > a, +.tabs-below > .nav-tabs > .active > a:hover { border-color: transparent #ddd #ddd #ddd; } -.tabs-left .nav-tabs > li, -.tabs-right .nav-tabs > li { + +.tabs-left > .nav-tabs > li, +.tabs-right > .nav-tabs > li { float: none; } -.tabs-left .nav-tabs > li > a, -.tabs-right .nav-tabs > li > a { + +.tabs-left > .nav-tabs > li > a, +.tabs-right > .nav-tabs > li > a { min-width: 74px; margin-right: 0; margin-bottom: 3px; } -.tabs-left .nav-tabs { + +.tabs-left > .nav-tabs { float: left; margin-right: 19px; border-right: 1px solid #ddd; } -.tabs-left .nav-tabs > li > a { + +.tabs-left > .nav-tabs > li > a { margin-right: -1px; -webkit-border-radius: 4px 0 0 4px; - -moz-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; } -.tabs-left .nav-tabs > li > a:hover { + +.tabs-left > .nav-tabs > li > a:hover { border-color: #eeeeee #dddddd #eeeeee #eeeeee; } -.tabs-left .nav-tabs .active > a, -.tabs-left .nav-tabs .active > a:hover { + +.tabs-left > .nav-tabs .active > a, +.tabs-left > .nav-tabs .active > a:hover { border-color: #ddd transparent #ddd #ddd; *border-right-color: #ffffff; } -.tabs-right .nav-tabs { + +.tabs-right > .nav-tabs { float: right; margin-left: 19px; border-left: 1px solid #ddd; } -.tabs-right .nav-tabs > li > a { + +.tabs-right > .nav-tabs > li > a { margin-left: -1px; -webkit-border-radius: 0 4px 4px 0; - -moz-border-radius: 0 4px 4px 0; - border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; } -.tabs-right .nav-tabs > li > a:hover { + +.tabs-right > .nav-tabs > li > a:hover { border-color: #eeeeee #eeeeee #eeeeee #dddddd; } -.tabs-right .nav-tabs .active > a, -.tabs-right .nav-tabs .active > a:hover { + +.tabs-right > .nav-tabs .active > a, +.tabs-right > .nav-tabs .active > a:hover { border-color: #ddd #ddd #ddd transparent; *border-left-color: #ffffff; } + .navbar { *position: relative; *z-index: 2; - overflow: visible; margin-bottom: 18px; + overflow: visible; } + .navbar-inner { - padding-left: 20px; + min-height: 40px; padding-right: 20px; + padding-left: 20px; background-color: #2c2c2c; background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -ms-linear-gradient(top, #333333, #222222); @@ -2790,138 +3587,116 @@ input[type="submit"].btn.btn-mini { background-image: -o-linear-gradient(top, #333333, #222222); background-image: linear-gradient(top, #333333, #222222); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); } + .navbar .container { width: auto; } -.btn-navbar { - display: none; - float: right; - padding: 7px 10px; - margin-left: 5px; - margin-right: 5px; - background-color: #2c2c2c; - background-image: -moz-linear-gradient(top, #333333, #222222); - background-image: -ms-linear-gradient(top, #333333, #222222); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); - background-image: -webkit-linear-gradient(top, #333333, #222222); - background-image: -o-linear-gradient(top, #333333, #222222); - background-image: linear-gradient(top, #333333, #222222); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); - border-color: #222222 #222222 #000000; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(enabled=false); - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); -} -.btn-navbar:hover, -.btn-navbar:active, -.btn-navbar.active, -.btn-navbar.disabled, -.btn-navbar[disabled] { - background-color: #222222; -} -.btn-navbar:active, -.btn-navbar.active { - background-color: #080808 \9; -} -.btn-navbar .icon-bar { - display: block; - width: 18px; - height: 2px; - background-color: #f5f5f5; - -webkit-border-radius: 1px; - -moz-border-radius: 1px; - border-radius: 1px; - -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); - -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -} -.btn-navbar .icon-bar + .icon-bar { - margin-top: 3px; -} + .nav-collapse.collapse { height: auto; } + .navbar { color: #999999; } + .navbar .brand:hover { text-decoration: none; } + .navbar .brand { - float: left; display: block; + float: left; padding: 8px 20px 12px; margin-left: -20px; font-size: 20px; font-weight: 200; line-height: 1; - color: #ffffff; + color: #999999; } + .navbar .navbar-text { margin-bottom: 0; line-height: 40px; } + +.navbar .navbar-link { + color: #999999; +} + +.navbar .navbar-link:hover { + color: #ffffff; +} + .navbar .btn, .navbar .btn-group { margin-top: 5px; } + .navbar .btn-group .btn { - margin-top: 0; + margin: 0; } + .navbar-form { margin-bottom: 0; *zoom: 1; } + .navbar-form:before, .navbar-form:after { display: table; content: ""; } + .navbar-form:after { clear: both; } + .navbar-form input, .navbar-form select, .navbar-form .radio, .navbar-form .checkbox { margin-top: 5px; } + .navbar-form input, .navbar-form select { display: inline-block; margin-bottom: 0; } + .navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] { margin-top: 3px; } + .navbar-form .input-append, .navbar-form .input-prepend { margin-top: 6px; white-space: nowrap; } + .navbar-form .input-append input, .navbar-form .input-prepend input { margin-top: 0; } + .navbar-search { position: relative; float: left; margin-top: 6px; margin-bottom: 0; } + .navbar-search .search-query { padding: 4px 9px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -2931,21 +3706,28 @@ input[type="submit"].btn.btn-mini { color: #ffffff; background-color: #626262; border: 1px solid #151515; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); -webkit-transition: none; - -moz-transition: none; - -ms-transition: none; - -o-transition: none; - transition: none; + -moz-transition: none; + -ms-transition: none; + -o-transition: none; + transition: none; } + .navbar-search .search-query:-moz-placeholder { color: #cccccc; } + +.navbar-search .search-query:-ms-input-placeholder { + color: #cccccc; +} + .navbar-search .search-query::-webkit-input-placeholder { color: #cccccc; } + .navbar-search .search-query:focus, .navbar-search .search-query.focused { padding: 5px 10px; @@ -2953,11 +3735,12 @@ input[type="submit"].btn.btn-mini { text-shadow: 0 1px 0 #ffffff; background-color: #ffffff; border: 0; - -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); outline: 0; + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); } + .navbar-fixed-top, .navbar-fixed-bottom { position: fixed; @@ -2966,24 +3749,29 @@ input[type="submit"].btn.btn-mini { z-index: 1030; margin-bottom: 0; } + .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner { - padding-left: 0; padding-right: 0; + padding-left: 0; -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; } + .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 940px; } + .navbar-fixed-top { top: 0; } + .navbar-fixed-bottom { bottom: 0; } + .navbar .nav { position: relative; left: 0; @@ -2991,116 +3779,196 @@ input[type="submit"].btn.btn-mini { float: left; margin: 0 10px 0 0; } + .navbar .nav.pull-right { float: right; } + .navbar .nav > li { display: block; float: left; } + .navbar .nav > li > a { float: none; - padding: 10px 10px 11px; + padding: 9px 10px 11px; line-height: 19px; color: #999999; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } + +.navbar .btn { + display: inline-block; + padding: 4px 10px 4px; + margin: 5px 5px 6px; + line-height: 18px; +} + +.navbar .btn-group { + padding: 5px 5px 6px; + margin: 0; +} + .navbar .nav > li > a:hover { - background-color: transparent; color: #ffffff; text-decoration: none; + background-color: transparent; } + .navbar .nav .active > a, .navbar .nav .active > a:hover { color: #ffffff; text-decoration: none; background-color: #222222; } + .navbar .divider-vertical { - height: 40px; width: 1px; + height: 40px; margin: 0 9px; overflow: hidden; background-color: #222222; border-right: 1px solid #333333; } + .navbar .nav.pull-right { - margin-left: 10px; margin-right: 0; + margin-left: 10px; } -.navbar .dropdown-menu { - margin-top: 1px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + +.navbar .btn-navbar { + display: none; + float: right; + padding: 7px 10px; + margin-right: 5px; + margin-left: 5px; + background-color: #2c2c2c; + *background-color: #222222; + background-image: -ms-linear-gradient(top, #333333, #222222); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); + background-image: -webkit-linear-gradient(top, #333333, #222222); + background-image: -o-linear-gradient(top, #333333, #222222); + background-image: linear-gradient(top, #333333, #222222); + background-image: -moz-linear-gradient(top, #333333, #222222); + background-repeat: repeat-x; + border-color: #222222 #222222 #000000; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(enabled=false); + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); } + +.navbar .btn-navbar:hover, +.navbar .btn-navbar:active, +.navbar .btn-navbar.active, +.navbar .btn-navbar.disabled, +.navbar .btn-navbar[disabled] { + background-color: #222222; + *background-color: #151515; +} + +.navbar .btn-navbar:active, +.navbar .btn-navbar.active { + background-color: #080808 \9; +} + +.navbar .btn-navbar .icon-bar { + display: block; + width: 18px; + height: 2px; + background-color: #f5f5f5; + -webkit-border-radius: 1px; + -moz-border-radius: 1px; + border-radius: 1px; + -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); +} + +.btn-navbar .icon-bar + .icon-bar { + margin-top: 3px; +} + .navbar .dropdown-menu:before { - content: ''; + position: absolute; + top: -7px; + left: 9px; display: inline-block; - border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; + border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); - position: absolute; - top: -7px; - left: 9px; + content: ''; } + .navbar .dropdown-menu:after { - content: ''; - display: inline-block; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid #ffffff; position: absolute; top: -6px; left: 10px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid #ffffff; + border-left: 6px solid transparent; + content: ''; } + .navbar-fixed-bottom .dropdown-menu:before { + top: auto; + bottom: -7px; border-top: 7px solid #ccc; - border-top-color: rgba(0, 0, 0, 0.2); border-bottom: 0; - bottom: -7px; - top: auto; + border-top-color: rgba(0, 0, 0, 0.2); } + .navbar-fixed-bottom .dropdown-menu:after { + top: auto; + bottom: -6px; border-top: 6px solid #ffffff; border-bottom: 0; - bottom: -6px; - top: auto; } -.navbar .nav .dropdown-toggle .caret, -.navbar .nav .open.dropdown .caret { + +.navbar .nav li.dropdown .dropdown-toggle .caret, +.navbar .nav li.dropdown.open .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; } -.navbar .nav .active .caret { + +.navbar .nav li.dropdown.active .caret { opacity: 1; filter: alpha(opacity=100); } -.navbar .nav .open > .dropdown-toggle, -.navbar .nav .active > .dropdown-toggle, -.navbar .nav .open.active > .dropdown-toggle { + +.navbar .nav li.dropdown.open > .dropdown-toggle, +.navbar .nav li.dropdown.active > .dropdown-toggle, +.navbar .nav li.dropdown.open.active > .dropdown-toggle { background-color: transparent; } -.navbar .nav .active > .dropdown-toggle:hover { + +.navbar .nav li.dropdown.active > .dropdown-toggle:hover { color: #ffffff; } -.navbar .nav.pull-right .dropdown-menu, -.navbar .nav .dropdown-menu.pull-right { - left: auto; + +.navbar .pull-right .dropdown-menu, +.navbar .dropdown-menu.pull-right { right: 0; -} -.navbar .nav.pull-right .dropdown-menu:before, -.navbar .nav .dropdown-menu.pull-right:before { left: auto; - right: 12px; } -.navbar .nav.pull-right .dropdown-menu:after, -.navbar .nav .dropdown-menu.pull-right:after { + +.navbar .pull-right .dropdown-menu:before, +.navbar .dropdown-menu.pull-right:before { + right: 12px; left: auto; +} + +.navbar .pull-right .dropdown-menu:after, +.navbar .dropdown-menu.pull-right:after { right: 13px; + left: auto; } + .breadcrumb { padding: 7px 14px; margin: 0 0 18px; @@ -3113,52 +3981,55 @@ input[type="submit"].btn.btn-mini { background-image: -o-linear-gradient(top, #ffffff, #f5f5f5); background-image: linear-gradient(top, #ffffff, #f5f5f5); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); border: 1px solid #ddd; -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); -webkit-box-shadow: inset 0 1px 0 #ffffff; - -moz-box-shadow: inset 0 1px 0 #ffffff; - box-shadow: inset 0 1px 0 #ffffff; + -moz-box-shadow: inset 0 1px 0 #ffffff; + box-shadow: inset 0 1px 0 #ffffff; } + .breadcrumb li { display: inline-block; *display: inline; - /* IE7 inline-block hack */ - - *zoom: 1; text-shadow: 0 1px 0 #ffffff; + *zoom: 1; } + .breadcrumb .divider { padding: 0 5px; color: #999999; } + .breadcrumb .active a { color: #333333; } + .pagination { height: 36px; margin: 18px 0; } + .pagination ul { display: inline-block; *display: inline; - /* IE7 inline-block hack */ - - *zoom: 1; - margin-left: 0; margin-bottom: 0; + margin-left: 0; -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + *zoom: 1; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } + .pagination li { display: inline; } + .pagination a { float: left; padding: 0 14px; @@ -3167,93 +4038,114 @@ input[type="submit"].btn.btn-mini { border: 1px solid #ddd; border-left-width: 0; } + .pagination a:hover, .pagination .active a { background-color: #f5f5f5; } + .pagination .active a { color: #999999; cursor: default; } + .pagination .disabled span, .pagination .disabled a, .pagination .disabled a:hover { color: #999999; - background-color: transparent; cursor: default; + background-color: transparent; } + .pagination li:first-child a { border-left-width: 1px; -webkit-border-radius: 3px 0 0 3px; - -moz-border-radius: 3px 0 0 3px; - border-radius: 3px 0 0 3px; + -moz-border-radius: 3px 0 0 3px; + border-radius: 3px 0 0 3px; } + .pagination li:last-child a { -webkit-border-radius: 0 3px 3px 0; - -moz-border-radius: 0 3px 3px 0; - border-radius: 0 3px 3px 0; + -moz-border-radius: 0 3px 3px 0; + border-radius: 0 3px 3px 0; } + .pagination-centered { text-align: center; } + .pagination-right { text-align: right; } + .pager { - margin-left: 0; margin-bottom: 18px; - list-style: none; + margin-left: 0; text-align: center; + list-style: none; *zoom: 1; } + .pager:before, .pager:after { display: table; content: ""; } + .pager:after { clear: both; } + .pager li { display: inline; } + .pager a { display: inline-block; padding: 5px 14px; background-color: #fff; border: 1px solid #ddd; -webkit-border-radius: 15px; - -moz-border-radius: 15px; - border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; } + .pager a:hover { text-decoration: none; background-color: #f5f5f5; } + .pager .next a { float: right; } + .pager .previous a { float: left; } + .pager .disabled a, .pager .disabled a:hover { color: #999999; - background-color: #fff; cursor: default; + background-color: #fff; } + .modal-open .dropdown-menu { z-index: 2050; } + .modal-open .dropdown.open { *z-index: 2050; } + .modal-open .popover { z-index: 2060; } + .modal-open .tooltip { z-index: 2070; } + .modal-backdrop { position: fixed; top: 0; @@ -3263,64 +4155,72 @@ input[type="submit"].btn.btn-mini { z-index: 1040; background-color: #000000; } + .modal-backdrop.fade { opacity: 0; } + .modal-backdrop, .modal-backdrop.fade.in { opacity: 0.8; filter: alpha(opacity=80); } + .modal { position: fixed; top: 50%; left: 50%; z-index: 1050; - overflow: auto; width: 560px; margin: -250px 0 0 -280px; + overflow: auto; background-color: #ffffff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.3); *border: 1px solid #999; - /* IE6-7 */ - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; - background-clip: padding-box; + -moz-background-clip: padding-box; + background-clip: padding-box; } + .modal.fade { - -webkit-transition: opacity .3s linear, top .3s ease-out; - -moz-transition: opacity .3s linear, top .3s ease-out; - -ms-transition: opacity .3s linear, top .3s ease-out; - -o-transition: opacity .3s linear, top .3s ease-out; - transition: opacity .3s linear, top .3s ease-out; top: -25%; + -webkit-transition: opacity 0.3s linear, top 0.3s ease-out; + -moz-transition: opacity 0.3s linear, top 0.3s ease-out; + -ms-transition: opacity 0.3s linear, top 0.3s ease-out; + -o-transition: opacity 0.3s linear, top 0.3s ease-out; + transition: opacity 0.3s linear, top 0.3s ease-out; } + .modal.fade.in { top: 50%; } + .modal-header { padding: 9px 15px; border-bottom: 1px solid #eee; } + .modal-header .close { margin-top: 2px; } + .modal-body { - overflow-y: auto; max-height: 400px; padding: 15px; + overflow-y: auto; } + .modal-form { margin-bottom: 0; } + .modal-footer { padding: 14px 15px 15px; margin-bottom: 0; @@ -3328,62 +4228,74 @@ input[type="submit"].btn.btn-mini { background-color: #f5f5f5; border-top: 1px solid #ddd; -webkit-border-radius: 0 0 6px 6px; - -moz-border-radius: 0 0 6px 6px; - border-radius: 0 0 6px 6px; - -webkit-box-shadow: inset 0 1px 0 #ffffff; - -moz-box-shadow: inset 0 1px 0 #ffffff; - box-shadow: inset 0 1px 0 #ffffff; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; *zoom: 1; + -webkit-box-shadow: inset 0 1px 0 #ffffff; + -moz-box-shadow: inset 0 1px 0 #ffffff; + box-shadow: inset 0 1px 0 #ffffff; } + .modal-footer:before, .modal-footer:after { display: table; content: ""; } + .modal-footer:after { clear: both; } + .modal-footer .btn + .btn { - margin-left: 5px; margin-bottom: 0; + margin-left: 5px; } + .modal-footer .btn-group .btn + .btn { margin-left: -1px; } + .tooltip { position: absolute; z-index: 1020; display: block; - visibility: visible; padding: 5px; font-size: 11px; opacity: 0; filter: alpha(opacity=0); + visibility: visible; } + .tooltip.in { opacity: 0.8; filter: alpha(opacity=80); } + .tooltip.top { margin-top: -2px; } + .tooltip.right { margin-left: 2px; } + .tooltip.bottom { margin-top: 2px; } + .tooltip.left { margin-left: -2px; } + .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; border-top: 5px solid #000000; + border-right: 5px solid transparent; + border-left: 5px solid transparent; } + .tooltip.left .tooltip-arrow { top: 50%; right: 0; @@ -3392,22 +4304,25 @@ input[type="submit"].btn.btn-mini { border-bottom: 5px solid transparent; border-left: 5px solid #000000; } + .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; - border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #000000; + border-left: 5px solid transparent; } + .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-top: 5px solid transparent; - border-bottom: 5px solid transparent; border-right: 5px solid #000000; + border-bottom: 5px solid transparent; } + .tooltip-inner { max-width: 200px; padding: 3px 8px; @@ -3416,14 +4331,16 @@ input[type="submit"].btn.btn-mini { text-decoration: none; background-color: #000000; -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } + .tooltip-arrow { position: absolute; width: 0; height: 0; } + .popover { position: absolute; top: 0; @@ -3432,42 +4349,50 @@ input[type="submit"].btn.btn-mini { display: none; padding: 5px; } + .popover.top { margin-top: -5px; } + .popover.right { margin-left: 5px; } + .popover.bottom { margin-top: 5px; } + .popover.left { margin-left: -5px; } + .popover.top .arrow { bottom: 0; left: 50%; margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; border-top: 5px solid #000000; + border-right: 5px solid transparent; + border-left: 5px solid transparent; } + .popover.right .arrow { top: 50%; left: 0; margin-top: -5px; border-top: 5px solid transparent; - border-bottom: 5px solid transparent; border-right: 5px solid #000000; + border-bottom: 5px solid transparent; } + .popover.bottom .arrow { top: 0; left: 50%; margin-left: -5px; - border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #000000; + border-left: 5px solid transparent; } + .popover.left .arrow { top: 50%; right: 0; @@ -3476,203 +4401,222 @@ input[type="submit"].btn.btn-mini { border-bottom: 5px solid transparent; border-left: 5px solid #000000; } + .popover .arrow { position: absolute; width: 0; height: 0; } + .popover-inner { - padding: 3px; width: 280px; + padding: 3px; overflow: hidden; background: #000000; background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); } + .popover-title { padding: 9px 15px; line-height: 1; background-color: #f5f5f5; border-bottom: 1px solid #eee; -webkit-border-radius: 3px 3px 0 0; - -moz-border-radius: 3px 3px 0 0; - border-radius: 3px 3px 0 0; + -moz-border-radius: 3px 3px 0 0; + border-radius: 3px 3px 0 0; } + .popover-content { padding: 14px; background-color: #ffffff; -webkit-border-radius: 0 0 3px 3px; - -moz-border-radius: 0 0 3px 3px; - border-radius: 0 0 3px 3px; + -moz-border-radius: 0 0 3px 3px; + border-radius: 0 0 3px 3px; -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; - background-clip: padding-box; + -moz-background-clip: padding-box; + background-clip: padding-box; } + .popover-content p, .popover-content ul, .popover-content ol { margin-bottom: 0; } + .thumbnails { margin-left: -20px; list-style: none; *zoom: 1; } + .thumbnails:before, .thumbnails:after { display: table; content: ""; } + .thumbnails:after { clear: both; } + +.row-fluid .thumbnails { + margin-left: 0; +} + .thumbnails > li { float: left; - margin: 0 0 18px 20px; + margin-bottom: 18px; + margin-left: 20px; } + .thumbnail { display: block; padding: 4px; line-height: 1; border: 1px solid #ddd; -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } + a.thumbnail:hover { border-color: #0088cc; -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); - -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); - box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); + -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); + box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); } + .thumbnail > img { display: block; max-width: 100%; - margin-left: auto; margin-right: auto; + margin-left: auto; } + .thumbnail .caption { padding: 9px; } -.label { - padding: 1px 4px 2px; + +.label, +.badge { font-size: 10.998px; font-weight: bold; - line-height: 13px; + line-height: 14px; color: #ffffff; - vertical-align: middle; - white-space: nowrap; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + white-space: nowrap; + vertical-align: baseline; background-color: #999999; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -.label:hover { - color: #ffffff; - text-decoration: none; -} -.label-important { - background-color: #b94a48; -} -.label-important:hover { - background-color: #953b39; -} -.label-warning { - background-color: #f89406; } -.label-warning:hover { - background-color: #c67605; -} -.label-success { - background-color: #468847; -} -.label-success:hover { - background-color: #356635; -} -.label-info { - background-color: #3a87ad; -} -.label-info:hover { - background-color: #2d6987; -} -.label-inverse { - background-color: #333333; -} -.label-inverse:hover { - background-color: #1a1a1a; + +.label { + padding: 1px 4px 2px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; } + .badge { padding: 1px 9px 2px; - font-size: 12.025px; - font-weight: bold; - white-space: nowrap; - color: #ffffff; - background-color: #999999; -webkit-border-radius: 9px; - -moz-border-radius: 9px; - border-radius: 9px; + -moz-border-radius: 9px; + border-radius: 9px; } -.badge:hover { + +a.label:hover, +a.badge:hover { color: #ffffff; text-decoration: none; cursor: pointer; } -.badge-error { + +.label-important, +.badge-important { background-color: #b94a48; } -.badge-error:hover { + +.label-important[href], +.badge-important[href] { background-color: #953b39; } + +.label-warning, .badge-warning { background-color: #f89406; } -.badge-warning:hover { + +.label-warning[href], +.badge-warning[href] { background-color: #c67605; } + +.label-success, .badge-success { background-color: #468847; } -.badge-success:hover { + +.label-success[href], +.badge-success[href] { background-color: #356635; } + +.label-info, .badge-info { background-color: #3a87ad; } -.badge-info:hover { + +.label-info[href], +.badge-info[href] { background-color: #2d6987; } + +.label-inverse, .badge-inverse { background-color: #333333; } -.badge-inverse:hover { + +.label-inverse[href], +.badge-inverse[href] { background-color: #1a1a1a; } + @-webkit-keyframes progress-bar-stripes { from { - background-position: 0 0; + background-position: 40px 0; } to { - background-position: 40px 0; + background-position: 0 0; } } + @-moz-keyframes progress-bar-stripes { from { - background-position: 0 0; + background-position: 40px 0; } to { - background-position: 40px 0; + background-position: 0 0; } } + @-ms-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} + +@-o-keyframes progress-bar-stripes { from { background-position: 0 0; } @@ -3680,18 +4624,20 @@ a.thumbnail:hover { background-position: 40px 0; } } + @keyframes progress-bar-stripes { from { - background-position: 0 0; + background-position: 40px 0; } to { - background-position: 40px 0; + background-position: 0 0; } } + .progress { - overflow: hidden; height: 18px; margin-bottom: 18px; + overflow: hidden; background-color: #f7f7f7; background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9); @@ -3700,61 +4646,67 @@ a.thumbnail:hover { background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: linear-gradient(top, #f5f5f5, #f9f9f9); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0); - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0); + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } + .progress .bar { - width: 0%; + width: 0; height: 18px; - color: #ffffff; font-size: 12px; + color: #ffffff; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0e90d2; background-image: -moz-linear-gradient(top, #149bdf, #0480be); - background-image: -ms-linear-gradient(top, #149bdf, #0480be); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); background-image: -webkit-linear-gradient(top, #149bdf, #0480be); background-image: -o-linear-gradient(top, #149bdf, #0480be); background-image: linear-gradient(top, #149bdf, #0480be); + background-image: -ms-linear-gradient(top, #149bdf, #0480be); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; -webkit-transition: width 0.6s ease; - -moz-transition: width 0.6s ease; - -ms-transition: width 0.6s ease; - -o-transition: width 0.6s ease; - transition: width 0.6s ease; + -moz-transition: width 0.6s ease; + -ms-transition: width 0.6s ease; + -o-transition: width 0.6s ease; + transition: width 0.6s ease; } + .progress-striped .bar { background-color: #149bdf; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; - -moz-background-size: 40px 40px; - -o-background-size: 40px 40px; - background-size: 40px 40px; + -moz-background-size: 40px 40px; + -o-background-size: 40px 40px; + background-size: 40px 40px; } + .progress.active .bar { -webkit-animation: progress-bar-stripes 2s linear infinite; - -moz-animation: progress-bar-stripes 2s linear infinite; - animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + -ms-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; } + .progress-danger .bar { background-color: #dd514c; background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); @@ -3764,8 +4716,9 @@ a.thumbnail:hover { background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); background-image: linear-gradient(top, #ee5f5b, #c43c35); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); } + .progress-danger.progress-striped .bar { background-color: #ee5f5b; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); @@ -3775,6 +4728,7 @@ a.thumbnail:hover { background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } + .progress-success .bar { background-color: #5eb95e; background-image: -moz-linear-gradient(top, #62c462, #57a957); @@ -3784,8 +4738,9 @@ a.thumbnail:hover { background-image: -o-linear-gradient(top, #62c462, #57a957); background-image: linear-gradient(top, #62c462, #57a957); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); } + .progress-success.progress-striped .bar { background-color: #62c462; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); @@ -3795,6 +4750,7 @@ a.thumbnail:hover { background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } + .progress-info .bar { background-color: #4bb1cf; background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); @@ -3804,8 +4760,9 @@ a.thumbnail:hover { background-image: -o-linear-gradient(top, #5bc0de, #339bb9); background-image: linear-gradient(top, #5bc0de, #339bb9); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); } + .progress-info.progress-striped .bar { background-color: #5bc0de; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); @@ -3815,6 +4772,7 @@ a.thumbnail:hover { background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } + .progress-warning .bar { background-color: #faa732; background-image: -moz-linear-gradient(top, #fbb450, #f89406); @@ -3824,8 +4782,9 @@ a.thumbnail:hover { background-image: -o-linear-gradient(top, #fbb450, #f89406); background-image: linear-gradient(top, #fbb450, #f89406); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0); } + .progress-warning.progress-striped .bar { background-color: #fbb450; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); @@ -3835,80 +4794,102 @@ a.thumbnail:hover { background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } + .accordion { margin-bottom: 18px; } + .accordion-group { margin-bottom: 2px; border: 1px solid #e5e5e5; -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } + .accordion-heading { border-bottom: 0; } + .accordion-heading .accordion-toggle { display: block; padding: 8px 15px; } + +.accordion-toggle { + cursor: pointer; +} + .accordion-inner { padding: 9px 15px; border-top: 1px solid #e5e5e5; } + .carousel { position: relative; margin-bottom: 18px; line-height: 1; } + .carousel-inner { - overflow: hidden; - width: 100%; position: relative; + width: 100%; + overflow: hidden; } + .carousel .item { - display: none; position: relative; + display: none; -webkit-transition: 0.6s ease-in-out left; - -moz-transition: 0.6s ease-in-out left; - -ms-transition: 0.6s ease-in-out left; - -o-transition: 0.6s ease-in-out left; - transition: 0.6s ease-in-out left; + -moz-transition: 0.6s ease-in-out left; + -ms-transition: 0.6s ease-in-out left; + -o-transition: 0.6s ease-in-out left; + transition: 0.6s ease-in-out left; } + .carousel .item > img { display: block; line-height: 1; } + .carousel .active, .carousel .next, .carousel .prev { display: block; } + .carousel .active { left: 0; } + .carousel .next, .carousel .prev { position: absolute; top: 0; width: 100%; } + .carousel .next { left: 100%; } + .carousel .prev { left: -100%; } + .carousel .next.left, .carousel .prev.right { left: 0; } + .carousel .active.left { left: -100%; } + .carousel .active.right { left: 100%; } + .carousel-control { position: absolute; top: 40%; @@ -3924,67 +4905,79 @@ a.thumbnail:hover { background: #222222; border: 3px solid #ffffff; -webkit-border-radius: 23px; - -moz-border-radius: 23px; - border-radius: 23px; + -moz-border-radius: 23px; + border-radius: 23px; opacity: 0.5; filter: alpha(opacity=50); } + .carousel-control.right { - left: auto; right: 15px; + left: auto; } + .carousel-control:hover { color: #ffffff; text-decoration: none; opacity: 0.9; filter: alpha(opacity=90); } + .carousel-caption { position: absolute; - left: 0; right: 0; bottom: 0; + left: 0; padding: 10px 15px 5px; background: #333333; background: rgba(0, 0, 0, 0.75); } + .carousel-caption h4, .carousel-caption p { color: #ffffff; } + .hero-unit { padding: 60px; margin-bottom: 30px; background-color: #eeeeee; -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; } + .hero-unit h1 { margin-bottom: 0; font-size: 60px; line-height: 1; - color: inherit; letter-spacing: -1px; + color: inherit; } + .hero-unit p { font-size: 18px; font-weight: 200; line-height: 27px; color: inherit; } + .pull-right { float: right; } + .pull-left { float: left; } + .hide { display: none; } + .show { display: block; } + .invisible { visibility: hidden; } diff --git a/app/css/main.css b/app/css/main.css index fe9e615..0e2de6a 100644 --- a/app/css/main.css +++ b/app/css/main.css @@ -5,3 +5,7 @@ body { a { cursor: pointer; } + +.navbar .brand { + color: #fff; +} diff --git a/app/lib/core.js b/app/lib/core.js index 0ec17f3..d349d15 100644 --- a/app/lib/core.js +++ b/app/lib/core.js @@ -3,6 +3,9 @@ require('ember'); require('ember-data'); require('ember-skeleton/ext'); +Ember.ENV.CP_DEFAULT_CACHEABLE = true; +Ember.ENV.VIEW_PRESERVES_CONTEXT = true; + App = Ember.Application.create({ VERSION: '0.1' }); diff --git a/app/lib/ext.js b/app/lib/ext.js index 16ab59b..90b88a2 100644 --- a/app/lib/ext.js +++ b/app/lib/ext.js @@ -1,4 +1,4 @@ -var get = Ember.get; +var get = Ember.get, fmt = Ember.String.fmt; Ember.View.reopen({ templateForName: function(name, type) { @@ -8,8 +8,9 @@ Ember.View.reopen({ template = get(templates, name); if (!template) { - template = require(name); - if (!template) { + try { + template = require(name); + } catch (e) { throw new Ember.Error(fmt('%@ - Unable to find %@ "%@".', [this, type, name])); } } diff --git a/app/lib/main.js b/app/lib/main.js index de4b21b..1c75de6 100644 --- a/app/lib/main.js +++ b/app/lib/main.js @@ -1,7 +1,3 @@ require('ember-skeleton/core'); require('ember-skeleton/store'); require('ember-skeleton/state_manager'); -require('ember-skeleton/routes'); - -// SC.routes.wantsHistory = true; -SC.routes.add('', App, App.routes.mainRoute); diff --git a/app/lib/routes.js b/app/lib/routes.js deleted file mode 100644 index 9abc9ae..0000000 --- a/app/lib/routes.js +++ /dev/null @@ -1,10 +0,0 @@ -require('sproutcore-routing'); - -require('ember-skeleton/core'); - -App.routes = { - - mainRoute: function(params) { - } - -}; diff --git a/app/lib/store.js b/app/lib/store.js index ecd3113..48279b8 100644 --- a/app/lib/store.js +++ b/app/lib/store.js @@ -1,3 +1,5 @@ require('ember-skeleton/core'); -App.store = DS.Store.create(); +App.store = DS.Store.create({ + revision: 4 +}); diff --git a/app/plugins/loader.js b/app/plugins/loader.js index 85926ff..5e6f713 100644 --- a/app/plugins/loader.js +++ b/app/plugins/loader.js @@ -9,10 +9,6 @@ return require; } - var Context = function() { - return this; - }; - var Loader = function() { this.modules = {}; this.loaded = {}; @@ -26,7 +22,7 @@ if (module) { var require = requireWrapper(this); try { - this.exports[name] = module.call(new Context(), require); + this.exports[name] = module.call(window, require); return this.exports[name]; } finally { this.loaded[name] = true; @@ -40,7 +36,7 @@ Loader.prototype.register = function(name, module) { if (this.exists(name)) { - throw "The module '"+ "' has already been registered"; + throw "The module '" + name + "' has already been registered"; } this.modules[name] = module; return true; diff --git a/app/vendor/ember-data.js b/app/vendor/ember-data.js index d6b6df1..464f609 100644 --- a/app/vendor/ember-data.js +++ b/app/vendor/ember-data.js @@ -1,396 +1,90 @@ - -(function(exports) { -window.DS = Ember.Namespace.create(); - -})({}); - - -(function(exports) { -DS.Adapter = Ember.Object.extend({ - commit: function(store, commitDetails) { - commitDetails.updated.eachType(function(type, array) { - this.updateRecords(store, type, array.slice()); - }, this); - - commitDetails.created.eachType(function(type, array) { - this.createRecords(store, type, array.slice()); - }, this); - - commitDetails.deleted.eachType(function(type, array) { - this.deleteRecords(store, type, array.slice()); - }, this); - }, - - createRecords: function(store, type, models) { - models.forEach(function(model) { - this.createRecord(store, type, model); - }, this); - }, - - updateRecords: function(store, type, models) { - models.forEach(function(model) { - this.updateRecord(store, type, model); - }, this); - }, - - deleteRecords: function(store, type, models) { - models.forEach(function(model) { - this.deleteRecord(store, type, model); - }, this); - }, - - findMany: function(store, type, ids) { - ids.forEach(function(id) { - this.find(store, type, id); - }, this); - } -}); -})({}); - - -(function(exports) { -DS.fixtureAdapter = DS.Adapter.create({ - find: function(store, type, id) { - var fixtures = type.FIXTURES; - - ember_assert("Unable to find fixtures for model type "+type.toString(), !!fixtures); - if (fixtures.hasLoaded) { return; } - - setTimeout(function() { - store.loadMany(type, fixtures); - fixtures.hasLoaded = true; - }, 300); - }, - - findMany: function() { - this.find.apply(this, arguments); - }, - - findAll: function(store, type) { - var fixtures = type.FIXTURES; - - ember_assert("Unable to find fixtures for model type "+type.toString(), !!fixtures); - - var ids = fixtures.map(function(item, index, self){ return item.id; }); - store.loadMany(type, ids, fixtures); - } - -}); - -})({}); - - -(function(exports) { -/*global jQuery*/ -var get = Ember.get, set = Ember.set, getPath = Ember.getPath; - -DS.RESTAdapter = DS.Adapter.extend({ - createRecord: function(store, type, model) { - var root = this.rootForType(type); - - var data = {}; - data[root] = get(model, 'data'); - - this.ajax("/" + this.pluralize(root), "POST", { - data: data, - success: function(json) { - this.sideload(store, type, json, root); - store.didCreateRecord(model, json[root]); - } - }); - }, - - createRecords: function(store, type, models) { - if (get(this, 'bulkCommit') === false) { - return this._super(store, type, models); - } - - var root = this.rootForType(type), - plural = this.pluralize(root); - - var data = {}; - data[plural] = models.map(function(model) { - return get(model, 'data'); - }); - - this.ajax("/" + this.pluralize(root), "POST", { - data: data, - - success: function(json) { - this.sideload(store, type, json, plural); - store.didCreateRecords(type, models, json[plural]); - } - }); - }, - - updateRecord: function(store, type, model) { - var id = get(model, 'id'); - var root = this.rootForType(type); - - var data = {}; - data[root] = get(model, 'data'); - - var url = ["", this.pluralize(root), id].join("/"); - - this.ajax(url, "PUT", { - data: data, - success: function(json) { - this.sideload(store, type, json, root); - store.didUpdateRecord(model, json[root]); - } - }); - }, - - updateRecords: function(store, type, models) { - if (get(this, 'bulkCommit') === false) { - return this._super(store, type, models); - } - - var root = this.rootForType(type), - plural = this.pluralize(root); - - var data = {}; - data[plural] = models.map(function(model) { - return get(model, 'data'); - }); - - this.ajax("/" + this.pluralize(root) + "/bulk", "PUT", { - data: data, - success: function(json) { - this.sideload(store, type, json, plural); - store.didUpdateRecords(models, json[plural]); - } - }); - }, - - deleteRecord: function(store, type, model) { - var id = get(model, 'id'); - var root = this.rootForType(type); - - var url = ["", this.pluralize(root), id].join("/"); - - this.ajax(url, "DELETE", { - success: function(json) { - if (json) { this.sideload(store, type, json); } - store.didDeleteRecord(model); - } - }); - }, - - deleteRecords: function(store, type, models) { - if (get(this, 'bulkCommit') === false) { - return this._super(store, type, models); - } - - var root = this.rootForType(type), - plural = this.pluralize(root); - - var data = {}; - data[plural] = models.map(function(model) { - return get(model, 'id'); - }); - - this.ajax("/" + this.pluralize(root) + "/bulk", "DELETE", { - data: data, - success: function(json) { - if (json) { this.sideload(store, type, json); } - store.didDeleteRecords(models); - } - }); - }, - - find: function(store, type, id) { - var root = this.rootForType(type); - - var url = ["", this.pluralize(root), id].join("/"); - - this.ajax(url, "GET", { - success: function(json) { - store.load(type, json[root]); - this.sideload(store, type, json, root); - } - }); - }, - - findMany: function(store, type, ids) { - var root = this.rootForType(type), plural = this.pluralize(root); - - this.ajax("/" + plural, "GET", { - data: { ids: ids }, - success: function(json) { - store.loadMany(type, ids, json[plural]); - this.sideload(store, type, json, plural); - } - }); - }, - - findAll: function(store, type) { - var root = this.rootForType(type), plural = this.pluralize(root); - - this.ajax("/" + plural, "GET", { - success: function(json) { - store.loadMany(type, json[plural]); - this.sideload(store, type, json, plural); - } - }); - }, - - findQuery: function(store, type, query, modelArray) { - var root = this.rootForType(type), plural = this.pluralize(root); - - this.ajax("/" + plural, "GET", { - data: query, - success: function(json) { - modelArray.load(json[plural]); - this.sideload(store, type, json, plural); - } - }); - }, - - // HELPERS - - plurals: {}, - - // define a plurals hash in your subclass to define - // special-case pluralization - pluralize: function(name) { - return this.plurals[name] || name + "s"; - }, - - rootForType: function(type) { - if (type.url) { return type.url; } - - // use the last part of the name as the URL - var parts = type.toString().split("."); - var name = parts[parts.length - 1]; - return name.replace(/([A-Z])/g, '_$1').toLowerCase().slice(1); - }, - - ajax: function(url, type, hash) { - hash.url = url; - hash.type = type; - hash.dataType = 'json'; - hash.contentType = 'application/json'; - hash.context = this; - - if (hash.data) { - hash.data = JSON.stringify(hash.data); - } - - jQuery.ajax(hash); - }, - - sideload: function(store, type, json, root) { - var sideloadedType, mappings; - - for (var prop in json) { - if (!json.hasOwnProperty(prop)) { continue; } - if (prop === root) { continue; } - - sideloadedType = type.typeForAssociation(prop); - - if (!sideloadedType) { - mappings = get(this, 'mappings'); - - ember_assert("Your server returned a hash with the key " + prop + " but you have no mappings", !!mappings); - - sideloadedType = get(get(this, 'mappings'), prop); - - ember_assert("Your server returned a hash with the key " + prop + " but you have no mapping for it", !!sideloadedType); - } - - this.loadValue(store, sideloadedType, json[prop]); - } - }, - - loadValue: function(store, type, value) { - if (value instanceof Array) { - store.loadMany(type, value); - } else { - store.load(type, value); - } - } +(function() { +window.DS = Ember.Namespace.create({ + CURRENT_API_REVISION: 4 }); +})(); -})({}); -(function(exports) { +(function() { var get = Ember.get, set = Ember.set; /** - A model array is an array that contains records of a certain type. The model + A record array is an array that contains records of a certain type. The record array materializes records as needed when they are retrieved for the first - time. You should not create model arrays yourself. Instead, an instance of - DS.ModelArray or its subclasses will be returned by your application's store + time. You should not create record arrays yourself. Instead, an instance of + DS.RecordArray or its subclasses will be returned by your application's store in response to queries. */ -DS.ModelArray = Ember.ArrayProxy.extend({ +DS.RecordArray = Ember.ArrayProxy.extend({ /** - The model type contained by this model array. + The model type contained by this record array. @type DS.Model */ type: null, - // The array of client ids backing the model array. When a - // record is requested from the model array, the record + // The array of client ids backing the record array. When a + // record is requested from the record array, the record // for the client id at the same index is materialized, if // necessary, by the store. content: null, - // The store that created this model array. + // The store that created this record array. store: null, init: function() { - set(this, 'modelCache', Ember.A([])); + this.contentWillChange(); this._super(); }, - arrayDidChange: function(array, index, removed, added) { - var modelCache = get(this, 'modelCache'); - modelCache.replace(index, 0, new Array(added)); + contentWillChange: Ember.beforeObserver(function() { + set(this, 'recordCache', []); + }, 'content'), - this._super(array, index, removed, added); - }, + contentArrayDidChange: function(array, index, removed, added) { + var recordCache = get(this, 'recordCache'); + var args = [index, 0].concat(new Array(added)); - arrayWillChange: function(array, index, removed, added) { - this._super(array, index, removed, added); + recordCache.splice.apply(recordCache, args); + }, - var modelCache = get(this, 'modelCache'); - modelCache.replace(index, removed); + contentArrayWillChange: function(array, index, removed, added) { + var recordCache = get(this, 'recordCache'); + recordCache.splice(index, removed); }, objectAtContent: function(index) { - var modelCache = get(this, 'modelCache'); - var model = modelCache.objectAt(index); + var recordCache = get(this, 'recordCache'); + var record = recordCache[index]; - if (!model) { + if (!record) { var store = get(this, 'store'); var content = get(this, 'content'); var contentObject = content.objectAt(index); if (contentObject !== undefined) { - model = store.findByClientId(get(this, 'type'), contentObject); - modelCache.replace(index, 1, [model]); + record = store.findByClientId(get(this, 'type'), contentObject); + recordCache[index] = record; } } - return model; + return record; } }); -})({}); +})(); -(function(exports) { + +(function() { var get = Ember.get; -DS.FilteredModelArray = DS.ModelArray.extend({ +DS.FilteredRecordArray = DS.RecordArray.extend({ filterFunction: null, replace: function() { @@ -400,17 +94,18 @@ DS.FilteredModelArray = DS.ModelArray.extend({ updateFilter: Ember.observer(function() { var store = get(this, 'store'); - store.updateModelArrayFilter(this, get(this, 'type'), get(this, 'filterFunction')); + store.updateRecordArrayFilter(this, get(this, 'type'), get(this, 'filterFunction')); }, 'filterFunction') }); -})({}); +})(); + -(function(exports) { +(function() { var get = Ember.get, set = Ember.set; -DS.AdapterPopulatedModelArray = DS.ModelArray.extend({ +DS.AdapterPopulatedRecordArray = DS.RecordArray.extend({ query: null, isLoaded: false, @@ -432,1791 +127,3642 @@ DS.AdapterPopulatedModelArray = DS.ModelArray.extend({ }); -})({}); +})(); -(function(exports) { -var get = Ember.get, set = Ember.set; -DS.ManyArray = DS.ModelArray.extend({ - parentRecord: null, +(function() { +var get = Ember.get, set = Ember.set, guidFor = Ember.guidFor; - // Overrides Ember.Array's replace method to implement - replace: function(index, removed, added) { - var parentRecord = get(this, 'parentRecord'); - var pendingParent = parentRecord && !get(parentRecord, 'id'); +var Set = function() { + this.hash = {}; + this.list = []; +}; - added = added.map(function(item) { - ember_assert("You can only add items of " + (get(this, 'type') && get(this, 'type').toString()) + " to this association.", !get(this, 'type') || (get(this, 'type') === item.constructor)); +Set.prototype = { + add: function(item) { + var hash = this.hash, + guid = guidFor(item); - if (pendingParent) { item.send('waitingOn', parentRecord); } - return item.get('clientId'); - }); + if (hash.hasOwnProperty(guid)) { return; } - this._super(index, removed, added); - } -}); + hash[guid] = true; + this.list.push(item); + }, -})({}); + remove: function(item) { + var hash = this.hash, + guid = guidFor(item); + if (!hash.hasOwnProperty(guid)) { return; } -(function(exports) { -})({}); + delete hash[guid]; + var list = this.list, + index = Ember.ArrayUtils.indexOf(this, item); + list.splice(index, 1); + }, -(function(exports) { -var get = Ember.get, set = Ember.set, getPath = Ember.getPath, fmt = Ember.String.fmt; + isEmpty: function() { + return this.list.length === 0; + } +}; -DS.Transaction = Ember.Object.extend({ - init: function() { - set(this, 'buckets', { - clean: Ember.Map.create(), - created: Ember.Map.create(), - updated: Ember.Map.create(), - deleted: Ember.Map.create() - }); - }, +var ManyArrayState = Ember.State.extend({ + recordWasAdded: function(manager, record) { + var dirty = manager.dirty, observer; + dirty.add(record); - createRecord: function(type, hash) { - var store = get(this, 'store'); + observer = function() { + if (!get(record, 'isDirty')) { + record.removeObserver('isDirty', observer); + manager.send('childWasSaved', record); + } + }; - return store.createRecord(type, hash, this); + record.addObserver('isDirty', observer); }, - add: function(record) { - // we could probably make this work if someone has a valid use case. Do you? - ember_assert("Once a record has changed, you cannot move it into a different transaction", !get(record, 'isDirty')); - - var modelTransaction = get(record, 'transaction'), - defaultTransaction = getPath(this, 'store.defaultTransaction'); + recordWasRemoved: function(manager, record) { + var dirty = manager.dirty, observer; + dirty.add(record); - ember_assert("Models cannot belong to more than one transaction at a time.", modelTransaction === defaultTransaction); + observer = function() { + record.removeObserver('isDirty', observer); + if (!get(record, 'isDirty')) { manager.send('childWasSaved', record); } + }; - this.adoptRecord(record); - }, + record.addObserver('isDirty', observer); + } +}); - remove: function(record) { - var defaultTransaction = getPath(this, 'store.defaultTransaction'); +var states = { + clean: ManyArrayState.create({ + isDirty: false, - defaultTransaction.adoptRecord(record); - }, + recordWasAdded: function(manager, record) { + this._super(manager, record); + manager.goToState('dirty'); + }, - /** - @private + update: function(manager, clientIds) { + var manyArray = manager.manyArray; + set(manyArray, 'content', clientIds); + } + }), - This method moves a record into a different transaction without the normal - checks that ensure that the user is not doing something weird, like moving - a dirty record into a new transaction. + dirty: ManyArrayState.create({ + isDirty: true, - It is designed for internal use, such as when we are moving a clean record - into a new transaction when the transaction is committed. + childWasSaved: function(manager, child) { + var dirty = manager.dirty; + dirty.remove(child); - This method must not be called unless the record is clean. - */ - adoptRecord: function(record) { - var oldTransaction = get(record, 'transaction'); + if (dirty.isEmpty()) { manager.send('arrayBecameSaved'); } + }, - if (oldTransaction) { - oldTransaction.removeFromBucket('clean', record); + arrayBecameSaved: function(manager) { + manager.goToState('clean'); } + }) +}; - this.addToBucket('clean', record); - set(record, 'transaction', this); - }, +DS.ManyArrayStateManager = Ember.StateManager.extend({ + manyArray: null, + initialState: 'clean', + states: states, - modelBecameDirty: function(kind, record) { - this.removeFromBucket('clean', record); - this.addToBucket(kind, record); - }, + init: function() { + this._super(); + this.dirty = new Set(); + } +}); - /** @private */ - addToBucket: function(kind, record) { - var bucket = get(get(this, 'buckets'), kind), - type = record.constructor; +})(); - var records = bucket.get(type); - if (!records) { - records = Ember.OrderedSet.create(); - bucket.set(type, records); - } - records.add(record); - }, +(function() { +var get = Ember.get, set = Ember.set, getPath = Ember.getPath; - /** @private */ - removeFromBucket: function(kind, record) { - var bucket = get(get(this, 'buckets'), kind), - type = record.constructor; +DS.ManyArray = DS.RecordArray.extend({ + init: function() { + set(this, 'stateManager', DS.ManyArrayStateManager.create({ manyArray: this })); - var records = bucket.get(type); - records.remove(record); + return this._super(); }, - modelBecameClean: function(kind, record) { - this.removeFromBucket(kind, record); + parentRecord: null, - var defaultTransaction = getPath(this, 'store.defaultTransaction'); - defaultTransaction.adoptRecord(record); + isDirty: Ember.computed(function() { + return getPath(this, 'stateManager.currentState.isDirty'); + }).property('stateManager.currentState').cacheable(), + + fetch: function() { + var clientIds = get(this, 'content'), + store = get(this, 'store'), + type = get(this, 'type'); + + var ids = clientIds.map(function(clientId) { + return store.clientIdToId[clientId]; + }); + + store.fetchMany(type, ids); }, - commit: function() { - var buckets = get(this, 'buckets'); + // Overrides Ember.Array's replace method to implement + replace: function(index, removed, added) { + var parentRecord = get(this, 'parentRecord'); + var pendingParent = parentRecord && !get(parentRecord, 'id'); + var stateManager = get(this, 'stateManager'); + + // Map the array of record objects into an array of client ids. + added = added.map(function(record) { + Ember.assert("You can only add records of " + (get(this, 'type') && get(this, 'type').toString()) + " to this association.", !get(this, 'type') || (get(this, 'type') === record.constructor)); + + // If the record to which this many array belongs does not yet + // have an id, notify the newly-added record that it must wait + // for the parent to receive an id before the child can be + // saved. + if (pendingParent) { + record.send('waitingOn', parentRecord); + } - var iterate = function(kind, fn, binding) { - var dirty = get(buckets, kind); + this.assignInverse(record, parentRecord); - dirty.forEach(function(type, models) { - if (models.isEmpty()) { return; } + stateManager.send('recordWasAdded', record); - var array = []; + return record.get('clientId'); + }, this); - models.forEach(function(model) { - model.send('willCommit'); + var store = this.store; - if (get(model, 'isPending') === false) { - array.push(model); - } - }); + var len = index+removed, record; + for (var i = index; i < len; i++) { + // TODO: null out inverse FK + record = this.objectAt(i); + this.assignInverse(record, parentRecord, true); - fn.call(binding, type, array); - }); - }; + // If we put the child record into a pending state because + // we were waiting on the parent record to get an id, we + // can tell the child it no longer needs to wait. + if (pendingParent) { + record.send('doneWaitingOn', parentRecord); + } - var commitDetails = { - updated: { - eachType: function(fn, binding) { iterate('updated', fn, binding); } - }, + stateManager.send('recordWasAdded', record); + } - created: { - eachType: function(fn, binding) { iterate('created', fn, binding); } - }, + this._super(index, removed, added); + }, - deleted: { - eachType: function(fn, binding) { iterate('deleted', fn, binding); } + assignInverse: function(record, parentRecord, remove) { + var associationMap = get(record.constructor, 'associations'), + possibleAssociations = associationMap.get(parentRecord.constructor), + possible, actual; + + if (!possibleAssociations) { return; } + + for (var i = 0, l = possibleAssociations.length; i < l; i++) { + possible = possibleAssociations[i]; + + if (possible.kind === 'belongsTo') { + actual = possible; + break; } - }; + } - var store = get(this, 'store'); - var adapter = get(store, '_adapter'); + if (actual) { + set(record, actual.name, remove ? null : parentRecord); + } + }, - var clean = get(buckets, 'clean'); - var defaultTransaction = get(store, 'defaultTransaction'); + // Create a child record within the parentRecord + createRecord: function(hash, transaction) { + var parentRecord = get(this, 'parentRecord'), + store = get(parentRecord, 'store'), + type = get(this, 'type'), + record; - clean.forEach(function(type, records) { - records.forEach(function(record) { - this.remove(record); - }, this); - }, this); + transaction = transaction || get(parentRecord, 'transaction'); - if (adapter && adapter.commit) { adapter.commit(store, commitDetails); } - else { throw fmt("Adapter is either null or do not implement `commit` method", this); } + record = store.createRecord.call(store, type, hash, transaction); + this.pushObject(record); + + return record; } }); -})({}); +})(); -(function(exports) { -var get = Ember.get, set = Ember.set, getPath = Ember.getPath, fmt = Ember.String.fmt; -// Implementors Note: -// -// The variables in this file are consistently named according to the following -// scheme: -// -// * +id+ means an identifier managed by an external source, provided inside the -// data hash provided by that source. -// * +clientId+ means a transient numerical identifier generated at runtime by -// the data store. It is important primarily because newly created objects may -// not yet have an externally generated id. -// * +type+ means a subclass of DS.Model. +(function() { -/** - The store contains all of the hashes for data models loaded from the server. - It is also responsible for creating instances of DS.Model when you request one - of these data hashes, so that they can be bound to in your Handlebars templates. +})(); - Create a new store like this: - MyApp.store = DS.Store.create(); - You can retrieve DS.Model instances from the store in several ways. To retrieve - a model for a specific id, use the `find()` method: +(function() { +var get = Ember.get, set = Ember.set, getPath = Ember.getPath, fmt = Ember.String.fmt; - var model = MyApp.store.find(MyApp.Contact, 123); +/** + A transaction allows you to collect multiple records into a unit of work + that can be committed or rolled back as a group. - By default, the store will talk to your backend using a standard REST mechanism. - You can customize how the store talks to your backend by specifying a custom adapter: + For example, if a record has local modifications that have not yet + been saved, calling `commit()` on its transaction will cause those + modifications to be sent to the adapter to be saved. Calling + `rollback()` on its transaction would cause all of the modifications to + be discarded and the record to return to the last known state before + changes were made. - MyApp.store = DS.Store.create({ - adapter: 'MyApp.CustomAdapter' - }); + If a newly created record's transaction is rolled back, it will + immediately transition to the deleted state. - You can learn more about writing a custom adapter by reading the `DS.Adapter` - documentation. -*/ -DS.Store = Ember.Object.extend({ + If you do not explicitly create a transaction, a record is assigned to + an implicit transaction called the default transaction. In these cases, + you can treat your application's instance of `DS.Store` as a transaction + and call the `commit()` and `rollback()` methods on the store itself. - /** - Many methods can be invoked without specifying which store should be used. - In those cases, the first store created will be used as the default. If - an application has multiple stores, it should specify which store to use - when performing actions, such as finding records by id. + Once a record has been successfully committed or rolled back, it will + be moved back to the implicit transaction. Because it will now be in + a clean state, it can be moved to a new transaction if you wish. - The init method registers this store as the default if none is specified. - */ - init: function() { - if (!get(DS, 'defaultStore') || get(this, 'isDefaultStore')) { - set(DS, 'defaultStore', this); - } + ### Creating a Transaction - set(this, 'data', []); - set(this, '_typeMap', {}); - set(this, 'recordCache', []); - set(this, 'modelArrays', []); - set(this, 'modelArraysByClientId', {}); - set(this, 'defaultTransaction', this.transaction()); + To create a new transaction, call the `transaction()` method of your + application's `DS.Store` instance: - return this._super(); - }, + var transaction = App.store.transaction(); - transaction: function() { - return DS.Transaction.create({ store: this }); - }, + This will return a new instance of `DS.Transaction` with no records + yet assigned to it. - modelArraysForClientId: function(clientId) { - var modelArrays = get(this, 'modelArraysByClientId'); - var ret = modelArrays[clientId]; + ### Adding Existing Records - if (!ret) { - ret = modelArrays[clientId] = Ember.OrderedSet.create(); - } + Add records to a transaction using the `add()` method: - return ret; - }, + record = App.store.find(Person, 1); + transaction.add(record); - /** - The adapter to use to communicate to a backend server or other persistence layer. + Note that only records whose `isDirty` flag is `false` may be added + to a transaction. Once modifications to a record have been made + (its `isDirty` flag is `true`), it is not longer able to be added to + a transaction. - This can be specified as an instance, a class, or a property path that specifies - where the adapter can be located. + ### Creating New Records - @property {DS.Adapter|String} - */ - adapter: null, + Because newly created records are dirty from the time they are created, + and because dirty records can not be added to a transaction, you must + use the `createRecord()` method to assign new records to a transaction. - _adapter: Ember.computed(function() { - var adapter = get(this, 'adapter'); - if (typeof adapter === 'string') { - return getPath(this, adapter, false) || getPath(window, adapter); - } - return adapter; - }).property('adapter').cacheable(), + For example, instead of this: - clientIdCounter: -1, + var transaction = store.transaction(); + var person = Person.createRecord({ name: "Steve" }); - // .................... - // . CREATE NEW MODEL . - // .................... + // won't work because person is dirty + transaction.add(person); - createRecord: function(type, properties, transaction) { - properties = properties || {}; + Call `createRecord()` on the transaction directly: - // Create a new instance of the model `type` and put it - // into the specified `transaction`. If no transaction is - // specified, the default transaction will be used. - // - // NOTE: A `transaction` is specified when the - // `transaction.createRecord` API is used. - var record = type._create({ - store: this - }); + var transaction = store.transaction(); + transaction.createRecord(Person, { name: "Steve" }); - transaction = transaction || get(this, 'defaultTransaction'); - transaction.adoptRecord(record); + ### Asynchronous Commits - // Extract the primary key from the `properties` hash, - // based on the `primaryKey` for the model type. - var id = properties[get(record, 'primaryKey')] || null; + Typically, all of the records in a transaction will be committed + together. However, new records that have a dependency on other new + records need to wait for their parent record to be saved and assigned an + ID. In that case, the child record will continue to live in the + transaction until its parent is saved, at which time the transaction will + attempt to commit again. - var hash = {}, clientId; + For this reason, you should not re-use transactions once you have committed + them. Always make a new transaction and move the desired records to it before + calling commit. +*/ - // Push the hash into the store. If present, associate the - // extracted `id` with the hash. - clientId = this.pushHash(hash, id, type); +DS.Transaction = Ember.Object.extend({ + /** + @private + + Creates the bucket data structure used to segregate records by + type. + */ + init: function() { + set(this, 'buckets', { + clean: Ember.Map.create(), + created: Ember.Map.create(), + updated: Ember.Map.create(), + deleted: Ember.Map.create(), + inflight: Ember.Map.create() + }); + }, - record.send('setData', hash); + /** + Creates a new record of the given type and assigns it to the transaction + on which the method was called. - var recordCache = get(this, 'recordCache'); + This is useful as only clean records can be added to a transaction and + new records created using other methods immediately become dirty. - // Now that we have a clientId, attach it to the record we - // just created. - set(record, 'clientId', clientId); + @param {DS.Model} type the model type to create + @param {Object} hash the data hash to assign the new record + */ + createRecord: function(type, hash) { + var store = get(this, 'store'); - // Store the record we just created in the record cache for - // this clientId. - recordCache[clientId] = record; + return store.createRecord(type, hash, this); + }, - // Set the properties specified on the record. - record.setProperties(properties); + /** + Adds an existing record to this transaction. Only records without + modficiations (i.e., records whose `isDirty` property is `false`) + can be added to a transaction. - // Update any model arrays. Most notably, add this record to - // the model arrays returned by `find(type)` and add it to - // any filtered arrays for whom this model passes the filter. - this.updateModelArrays(type, clientId, hash); + @param {DS.Model} record the record to add to the transaction + */ + add: function(record) { + // we could probably make this work if someone has a valid use case. Do you? + Ember.assert("Once a record has changed, you cannot move it into a different transaction", !get(record, 'isDirty')); - return record; - }, + var recordTransaction = get(record, 'transaction'), + defaultTransaction = getPath(this, 'store.defaultTransaction'); - // ................ - // . DELETE MODEL . - // ................ + Ember.assert("Models cannot belong to more than one transaction at a time.", recordTransaction === defaultTransaction); - deleteRecord: function(model) { - model.send('deleteRecord'); + this.adoptRecord(record); }, - // ............... - // . FIND MODELS . - // ............... - /** - Finds a model by its id. If the data for that model has already been - loaded, an instance of DS.Model with that data will be returned - immediately. Otherwise, an empty DS.Model instance will be returned in - the loading state. As soon as the requested data is available, the model - will be moved into the loaded state and all of the information will be - available. + Commits the transaction, which causes all of the modified records that + belong to the transaction to be sent to the adapter to be saved. - Note that only one DS.Model instance is ever created per unique id for a - given type. + Once you call `commit()` on a transaction, you should not re-use it. - Example: + When a record is saved, it will be removed from this transaction and + moved back to the store's default transaction. + */ + commit: function() { + var self = this, + iterate; - var record = MyApp.store.find(MyApp.Person, 1234); + iterate = function(bucketType, fn, binding) { + var dirty = self.bucketForType(bucketType); - @param {DS.Model} type - @param {String|Number} id - */ - find: function(type, id, query) { - if (id === undefined) { - return this.findAll(type); - } - - if (query !== undefined) { - return this.findMany(type, id, query); - } else if (Ember.typeOf(id) === 'object') { - return this.findQuery(type, id); - } - - if (Ember.isArray(id)) { - return this.findMany(type, id); - } + dirty.forEach(function(type, records) { + if (records.isEmpty()) { return; } - var clientId = this.clientIdForId(type, id); + var array = []; - return this.findByClientId(type, clientId, id); - }, + records.forEach(function(record) { + record.send('willCommit'); - findByClientId: function(type, clientId, id) { - var model; + if (get(record, 'isPending') === false) { + array.push(record); + } + }); - var recordCache = get(this, 'recordCache'); - var data = this.clientIdToHashMap(type); + fn.call(binding, type, array); + }); + }; - // If there is already a clientId assigned for this - // type/id combination, try to find an existing - // model for that id and return. Otherwise, - // materialize a new model and set its data to the - // value we already have. - if (clientId !== undefined) { - model = recordCache[clientId]; + var commitDetails = { + updated: { + eachType: function(fn, binding) { iterate('updated', fn, binding); } + }, - if (!model) { - // create a new instance of the model in the - // 'isLoading' state - model = this.materializeRecord(type, clientId); + created: { + eachType: function(fn, binding) { iterate('created', fn, binding); } + }, - // immediately set its data - model.send('setData', data[clientId] || null); + deleted: { + eachType: function(fn, binding) { iterate('deleted', fn, binding); } } - } else { - clientId = this.pushHash(null, id, type); + }; - // create a new instance of the model in the - // 'isLoading' state - model = this.materializeRecord(type, clientId); + var store = get(this, 'store'); + var adapter = get(store, '_adapter'); - // let the adapter set the data, possibly async - var adapter = get(this, '_adapter'); - if (adapter && adapter.find) { adapter.find(this, type, id); } - else { throw fmt("Adapter is either null or does not implement `find` method", this); } - } + this.removeCleanRecords(); - return model; + if (adapter && adapter.commit) { adapter.commit(store, commitDetails); } + else { throw fmt("Adapter is either null or does not implement `commit` method", this); } }, - /** @private - */ - findMany: function(type, ids, query) { - var idToClientIdMap = this.idToClientIdMap(type); - var data = this.clientIdToHashMap(type), needed; + /** + Rolling back a transaction resets the records that belong to + that transaction. - var clientIds = Ember.A([]); + Updated records have their properties reset to the last known + value from the persistence layer. Deleted records are reverted + to a clean, non-deleted state. Newly created records immediately + become deleted, and are not sent to the adapter to be persisted. - if (ids) { - needed = []; + After the transaction is rolled back, any records that belong + to it will return to the store's default transaction, and the + current transaction should not be used again. + */ + rollback: function() { + var store = get(this, 'store'), + dirty; + + // Loop through all of the records in each of the dirty states + // and initiate a rollback on them. As a side effect of telling + // the record to roll back, it should also move itself out of + // the dirty bucket and into the clean bucket. + ['created', 'updated', 'deleted', 'inflight'].forEach(function(bucketType) { + dirty = this.bucketForType(bucketType); + + dirty.forEach(function(type, records) { + records.forEach(function(record) { + record.send('rollback'); + }); + }); + }, this); - ids.forEach(function(id) { - var clientId = idToClientIdMap[id]; - if (clientId === undefined || data[clientId] === undefined) { - clientId = this.pushHash(null, id, type); - needed.push(id); - } + // Now that all records in the transaction are guaranteed to be + // clean, migrate them all to the store's default transaction. + this.removeCleanRecords(); + }, - clientIds.push(clientId); - }, this); - } else { - needed = null; - } + /** + @private - if ((needed && get(needed, 'length') > 0) || query) { - var adapter = get(this, '_adapter'); - if (adapter && adapter.findMany) { adapter.findMany(this, type, needed, query); } - else { throw fmt("Adapter is either null or does not implement `findMany` method", this); } - } + Removes a record from this transaction and back to the store's + default transaction. - return this.createManyArray(type, clientIds); - }, + Note: This method is private for now, but should probably be exposed + in the future once we have stricter error checking (for example, in the + case of the record being dirty). - findQuery: function(type, query) { - var array = DS.AdapterPopulatedModelArray.create({ type: type, content: Ember.A([]), store: this }); - var adapter = get(this, '_adapter'); - if (adapter && adapter.findQuery) { adapter.findQuery(this, type, query, array); } - else { throw fmt("Adapter is either null or does not implement `findQuery` method", this); } - return array; + @param {DS.Model} record + */ + remove: function(record) { + var defaultTransaction = getPath(this, 'store.defaultTransaction'); + defaultTransaction.adoptRecord(record); }, - findAll: function(type) { + /** + @private - var typeMap = this.typeMapFor(type), - findAllCache = typeMap.findAllCache; + Removes all of the records in the transaction's clean bucket. + */ + removeCleanRecords: function() { + var clean = this.bucketForType('clean'), + self = this; - if (findAllCache) { return findAllCache; } + clean.forEach(function(type, records) { + records.forEach(function(record) { + self.remove(record); + }); + }); + }, + + /** + @private - var array = DS.ModelArray.create({ type: type, content: Ember.A([]), store: this }); - this.registerModelArray(array, type); + Returns the bucket for the given bucket type. For example, you might call + `this.bucketForType('updated')` to get the `Ember.Map` that contains all + of the records that have changes pending. - var adapter = get(this, '_adapter'); - if (adapter && adapter.findAll) { adapter.findAll(this, type); } + @param {String} bucketType the type of bucket + @returns Ember.Map + */ + bucketForType: function(bucketType) { + var buckets = get(this, 'buckets'); - typeMap.findAllCache = array; - return array; + return get(buckets, bucketType); }, - filter: function(type, filter) { - var array = DS.FilteredModelArray.create({ type: type, content: Ember.A([]), store: this, filterFunction: filter }); + /** + @private - this.registerModelArray(array, type, filter); + This method moves a record into a different transaction without the normal + checks that ensure that the user is not doing something weird, like moving + a dirty record into a new transaction. - return array; - }, + It is designed for internal use, such as when we are moving a clean record + into a new transaction when the transaction is committed. - // ............ - // . UPDATING . - // ............ + This method must not be called unless the record is clean. - hashWasUpdated: function(type, clientId) { - var clientIdToHashMap = this.clientIdToHashMap(type); - var hash = clientIdToHashMap[clientId]; + @param {DS.Model} record + */ + adoptRecord: function(record) { + var oldTransaction = get(record, 'transaction'); - this.updateModelArrays(type, clientId, hash); - }, + if (oldTransaction) { + oldTransaction.removeFromBucket('clean', record); + } - // .............. - // . PERSISTING . - // .............. + this.addToBucket('clean', record); + set(record, 'transaction', this); + }, - commit: function() { - var defaultTransaction = get(this, 'defaultTransaction'); - set(this, 'defaultTransaction', this.transaction()); + /** + @private - defaultTransaction.commit(); - }, + Adds a record to the named bucket. - didUpdateRecords: function(array, hashes) { - if (arguments.length === 2) { - array.forEach(function(model, idx) { - this.didUpdateRecord(model, hashes[idx]); - }, this); - } else { - array.forEach(function(model) { - this.didUpdateRecord(model); - }, this); - } - }, + @param {String} bucketType one of `clean`, `created`, `updated`, or `deleted` + */ + addToBucket: function(bucketType, record) { + var bucket = this.bucketForType(bucketType), + type = record.constructor; - didUpdateRecord: function(model, hash) { - if (arguments.length === 2) { - var clientId = get(model, 'clientId'); - var data = this.clientIdToHashMap(model.constructor); + var records = bucket.get(type); - data[clientId] = hash; - model.send('setData', hash); + if (!records) { + records = Ember.OrderedSet.create(); + bucket.set(type, records); } - model.send('didCommit'); + records.add(record); }, - didDeleteRecords: function(array) { - array.forEach(function(model) { - model.send('didCommit'); - }); - }, + /** + @private + + Removes a record from the named bucket. + + @param {String} bucketType one of `clean`, `created`, `updated`, or `deleted` + */ + removeFromBucket: function(bucketType, record) { + var bucket = this.bucketForType(bucketType), + type = record.constructor; - didDeleteRecord: function(model) { - model.send('didCommit'); + var records = bucket.get(type); + records.remove(record); }, - didCreateRecords: function(type, array, hashes) { - var id, clientId, primaryKey = getPath(type, 'proto.primaryKey'); + /** + @private - var idToClientIdMap = this.idToClientIdMap(type); - var data = this.clientIdToHashMap(type); - var idList = this.idList(type); + Called by a record's state manager to indicate that the record has entered + a dirty state. The record will be moved from the `clean` bucket and into + the appropriate dirty bucket. - for (var i=0, l=get(array, 'length'); i 0) || query) { + var adapter = get(this, '_adapter'); + if (adapter && adapter.findMany) { adapter.findMany(this, type, needed, query); } + else { throw fmt("Adapter is either null or does not implement `findMany` method", this); } + } - data[key] = value; + return clientIds; + }, - // At the end of the run loop, notify model arrays that - // this record has changed so they can re-evaluate its contents - // to determine membership. - Ember.run.once(model, model.notifyHashWasUpdated); -}; + /** @private + */ + findMany: function(type, ids, query) { + var clientIds = this.fetchMany(type, ids, query); -// The waitingOn event shares common functionality -// between the different dirty states, but each is + return this.createManyArray(type, clientIds); + }, + + findQuery: function(type, query) { + var array = DS.AdapterPopulatedRecordArray.create({ type: type, content: Ember.A([]), store: this }); + var adapter = get(this, '_adapter'); + if (adapter && adapter.findQuery) { adapter.findQuery(this, type, query, array); } + else { throw fmt("Adapter is either null or does not implement `findQuery` method", this); } + return array; + }, + + findAll: function(type) { + + var typeMap = this.typeMapFor(type), + findAllCache = typeMap.findAllCache; + + if (findAllCache) { return findAllCache; } + + var array = DS.RecordArray.create({ type: type, content: Ember.A([]), store: this }); + this.registerRecordArray(array, type); + + var adapter = get(this, '_adapter'); + if (adapter && adapter.findAll) { adapter.findAll(this, type); } + + typeMap.findAllCache = array; + return array; + }, + + filter: function(type, query, filter) { + // allow an optional server query + if (arguments.length === 3) { + this.findQuery(type, query); + } else if (arguments.length === 2) { + filter = query; + } + + var array = DS.FilteredRecordArray.create({ type: type, content: Ember.A([]), store: this, filterFunction: filter }); + + this.registerRecordArray(array, type, filter); + + return array; + }, + + // ............ + // . UPDATING . + // ............ + + hashWasUpdated: function(type, clientId, record) { + // Because hash updates are invoked at the end of the run loop, + // it is possible that a record might be deleted after its hash + // has been modified and this method was scheduled to be called. + // + // If that's the case, the record would have already been removed + // from all record arrays; calling updateRecordArrays would just + // add it back. If the record is deleted, just bail. It shouldn't + // give us any more trouble after this. + + if (get(record, 'isDeleted')) { return; } + this.updateRecordArrays(type, clientId, get(record, 'data')); + }, + + // .............. + // . PERSISTING . + // .............. + + commit: function() { + var defaultTransaction = get(this, 'defaultTransaction'); + set(this, 'defaultTransaction', this.transaction()); + + defaultTransaction.commit(); + }, + + didUpdateRecords: function(array, hashes) { + if (hashes) { + array.forEach(function(record, idx) { + this.didUpdateRecord(record, hashes[idx]); + }, this); + } else { + array.forEach(function(record) { + this.didUpdateRecord(record); + }, this); + } + }, + + didUpdateRecord: function(record, hash) { + if (hash) { + var clientId = get(record, 'clientId'), + dataCache = this.typeMapFor(record.constructor).cidToHash; + + dataCache[clientId] = hash; + record.send('didChangeData'); + record.hashWasUpdated(); + } else { + record.send('didSaveData'); + } + + record.send('didCommit'); + }, + + didDeleteRecords: function(array) { + array.forEach(function(record) { + record.send('didCommit'); + }); + }, + + didDeleteRecord: function(record) { + record.send('didCommit'); + }, + + _didCreateRecord: function(record, hash, typeMap, clientId, primaryKey) { + var recordData = get(record, 'data'), id, changes; + + if (hash) { + typeMap.cidToHash[clientId] = hash; + + // If the server returns a hash, we assume that the server's version + // of the data supercedes the local changes. + record.beginPropertyChanges(); + record.send('didChangeData'); + recordData.adapterDidUpdate(); + record.hashWasUpdated(); + record.endPropertyChanges(); + + id = hash[primaryKey]; + + typeMap.idToCid[id] = clientId; + this.clientIdToId[clientId] = id; + } else { + recordData.commit(); + } + + record.send('didCommit'); + }, + + + didCreateRecords: function(type, array, hashes) { + var primaryKey = type.proto().primaryKey, + typeMap = this.typeMapFor(type), + clientId; + + for (var i=0, l=get(array, 'length'); i "created.uncommitted" + + The `DS.Model` states are themselves stateless. What we mean is that, + though each instance of a record also has a unique instance of a + `DS.StateManager`, the hierarchical states that each of *those* points + to is a shared data structure. For performance reasons, instead of each + record getting its own copy of the hierarchy of states, each state + manager points to this global, immutable shared instance. How does a + state know which record it should be acting on? We pass a reference to + the current state manager as the first parameter to every method invoked + on a state. + + The state manager passed as the first parameter is where you should stash + state about the record if needed; you should never store data on the state + object itself. If you need access to the record being acted on, you can + retrieve the state manager's `record` property. For example, if you had + an event handler `myEvent`: + + myEvent: function(manager) { + var record = manager.get('record'); + record.doSomething(); + } + + For more information about state managers in general, see the Ember.js + documentation on `Ember.StateManager`. + + ### Events, Flags, and Transitions + + A state may implement zero or more events, flags, or transitions. + + #### Events + + Events are named functions that are invoked when sent to a record. The + state manager will first look for a method with the given name on the + current state. If no method is found, it will search the current state's + parent, and then its grandparent, and so on until reaching the top of + the hierarchy. If the root is reached without an event handler being found, + an exception will be raised. This can be very helpful when debugging new + features. + + Here's an example implementation of a state with a `myEvent` event handler: + + aState: DS.State.create({ + myEvent: function(manager, param) { + console.log("Received myEvent with "+param); + } + }) + + To trigger this event: + + record.send('myEvent', 'foo'); + //=> "Received myEvent with foo" + + Note that an optional parameter can be sent to a record's `send()` method, + which will be passed as the second parameter to the event handler. + + Events should transition to a different state if appropriate. This can be + done by calling the state manager's `goToState()` method with a path to the + desired state. The state manager will attempt to resolve the state path + relative to the current state. If no state is found at that path, it will + attempt to resolve it relative to the current state's parent, and then its + parent, and so on until the root is reached. For example, imagine a hierarchy + like this: + + * created + * start <-- currentState + * inFlight + * updated + * inFlight + + If we are currently in the `start` state, calling + `goToState('inFlight')` would transition to the `created.inFlight` state, + while calling `goToState('updated.inFlight')` would transition to + the `updated.inFlight` state. + + Remember that *only events* should ever cause a state transition. You should + never call `goToState()` from outside a state's event handler. If you are + tempted to do so, create a new event and send that to the state manager. + + #### Flags + + Flags are Boolean values that can be used to introspect a record's current + state in a more user-friendly way than examining its state path. For example, + instead of doing this: + + var statePath = record.getPath('stateManager.currentState.path'); + if (statePath === 'created.inFlight') { + doSomething(); + } + + You can say: + + if (record.get('isNew') && record.get('isSaving')) { + doSomething(); + } + + If your state does not set a value for a given flag, the value will + be inherited from its parent (or the first place in the state hierarchy + where it is defined). + + The current set of flags are defined below. If you want to add a new flag, + in addition to the area below, you will also need to declare it in the + `DS.Model` class. + + #### Transitions + + Transitions are like event handlers but are called automatically upon + entering or exiting a state. To implement a transition, just call a method + either `enter` or `exit`: + + myState: DS.State.create({ + // Gets called automatically when entering + // this state. + enter: function(manager) { + console.log("Entered myState"); + } + }) + + Note that enter and exit events are called once per transition. If the + current state changes, but changes to another child state of the parent, + the transition event on the parent will not be triggered. +*/ + +var stateProperty = Ember.computed(function(key) { + var parent = get(this, 'parentState'); + if (parent) { + return get(parent, key); + } +}).property(); + +var isEmptyObject = function(object) { + for (var name in object) { + if (object.hasOwnProperty(name)) { return false; } + } + + return true; +}; + +var hasDefinedProperties = function(object) { + for (var name in object) { + if (object.hasOwnProperty(name) && object[name]) { return true; } + } + + return false; +}; + +DS.State = Ember.State.extend({ + isLoaded: stateProperty, + isDirty: stateProperty, + isSaving: stateProperty, + isDeleted: stateProperty, + isError: stateProperty, + isNew: stateProperty, + isValid: stateProperty, + isPending: stateProperty, + + // For states that are substates of a + // DirtyState (updated or created), it is + // useful to be able to determine which + // type of dirty state it is. + dirtyType: stateProperty +}); + +var setProperty = function(manager, context) { + var key = context.key, value = context.value; + + var record = get(manager, 'record'), + data = get(record, 'data'); + + set(data, key, value); +}; + +var setAssociation = function(manager, context) { + var key = context.key, value = context.value; + + var record = get(manager, 'record'), + data = get(record, 'data'); + + data.setAssociation(key, value); +}; + +var didChangeData = function(manager) { + var record = get(manager, 'record'), + data = get(record, 'data'); + + data._savedData = null; + record.notifyPropertyChange('data'); +}; + +// The waitingOn event shares common functionality +// between the different dirty states, but each is // treated slightly differently. This method is exposed // so that each implementation can invoke the common // behavior, and then implement the behavior specific // to the state. var waitingOn = function(manager, object) { - var model = get(manager, 'model'), - pendingQueue = get(model, 'pendingQueue'), + var record = get(manager, 'record'), + pendingQueue = get(record, 'pendingQueue'), objectGuid = guidFor(object); - var observer = function() { - if (get(object, 'id')) { - manager.send('doneWaitingOn', object); - Ember.removeObserver(object, 'id', observer); + var observer = function() { + if (get(object, 'id')) { + manager.send('doneWaitingOn', object); + Ember.removeObserver(object, 'id', observer); + } + }; + + pendingQueue[objectGuid] = [object, observer]; + Ember.addObserver(object, 'id', observer); +}; + +// Implementation notes: +// +// Each state has a boolean value for all of the following flags: +// +// * isLoaded: The record has a populated `data` property. When a +// record is loaded via `store.find`, `isLoaded` is false +// until the adapter sets it. When a record is created locally, +// its `isLoaded` property is always true. +// * isDirty: The record has local changes that have not yet been +// saved by the adapter. This includes records that have been +// created (but not yet saved) or deleted. +// * isSaving: The record's transaction has been committed, but +// the adapter has not yet acknowledged that the changes have +// been persisted to the backend. +// * isDeleted: The record was marked for deletion. When `isDeleted` +// is true and `isDirty` is true, the record is deleted locally +// but the deletion was not yet persisted. When `isSaving` is +// true, the change is in-flight. When both `isDirty` and +// `isSaving` are false, the change has persisted. +// * isError: The adapter reported that it was unable to save +// local changes to the backend. This may also result in the +// record having its `isValid` property become false if the +// adapter reported that server-side validations failed. +// * isNew: The record was created on the client and the adapter +// did not yet report that it was successfully saved. +// * isValid: No client-side validations have failed and the +// adapter did not report any server-side validation failures. +// * isPending: A record `isPending` when it belongs to an +// association on another record and that record has not been +// saved. A record in this state cannot be saved because it +// lacks a "foreign key" that will be supplied by its parent +// association when the parent record has been created. When +// the adapter reports that the parent has saved, the +// `isPending` property on all children will become `false` +// and the transaction will try to commit the records. + +// This mixin is mixed into various uncommitted states. Make +// sure to mix it in *after* the class definition, so its +// super points to the class definition. +var Uncommitted = Ember.Mixin.create({ + setProperty: setProperty, + setAssociation: setAssociation, +}); + +// These mixins are mixed into substates of the concrete +// subclasses of DirtyState. + +var CreatedUncommitted = Ember.Mixin.create({ + deleteRecord: function(manager) { + var record = get(manager, 'record'); + this._super(manager); + + record.withTransaction(function(t) { + t.recordBecameClean('created', record); + }); + manager.goToState('deleted.saved'); + } +}); + +var UpdatedUncommitted = Ember.Mixin.create({ + deleteRecord: function(manager) { + this._super(manager); + + var record = get(manager, 'record'); + + record.withTransaction(function(t) { + t.recordBecameClean('updated', record); + }); + + manager.goToState('deleted'); + } +}); + +// The dirty state is a abstract state whose functionality is +// shared between the `created` and `updated` states. +// +// The deleted state shares the `isDirty` flag with the +// subclasses of `DirtyState`, but with a very different +// implementation. +var DirtyState = DS.State.extend({ + initialState: 'uncommitted', + + // FLAGS + isDirty: true, + + // SUBSTATES + + // When a record first becomes dirty, it is `uncommitted`. + // This means that there are local pending changes, + // but they have not yet begun to be saved. + uncommitted: DS.State.extend({ + // TRANSITIONS + enter: function(manager) { + var dirtyType = get(this, 'dirtyType'), + record = get(manager, 'record'); + + record.withTransaction(function (t) { + t.recordBecameDirty(dirtyType, record); + }); + }, + + // EVENTS + deleteRecord: Ember.K, + + waitingOn: function(manager, object) { + waitingOn(manager, object); + manager.goToState('pending'); + }, + + willCommit: function(manager) { + manager.goToState('inFlight'); + }, + + becameInvalid: function(manager) { + var dirtyType = get(this, 'dirtyType'), + record = get(manager, 'record'); + + record.withTransaction(function (t) { + t.recordBecameInFlight(dirtyType, record); + }); + + manager.goToState('invalid'); + }, + + rollback: function(manager) { + var record = get(manager, 'record'), + dirtyType = get(this, 'dirtyType'), + data = get(record, 'data'); + + data.rollback(); + + record.withTransaction(function(t) { + t.recordBecameClean(dirtyType, record); + }); + + manager.goToState('loaded'); + } + }, Uncommitted), + + // Once a record has been handed off to the adapter to be + // saved, it is in the 'in flight' state. Changes to the + // record cannot be made during this window. + inFlight: DS.State.extend({ + // FLAGS + isSaving: true, + + // TRANSITIONS + enter: function(manager) { + var dirtyType = get(this, 'dirtyType'), + record = get(manager, 'record'); + + record.withTransaction(function (t) { + t.recordBecameInFlight(dirtyType, record); + }); + }, + + // EVENTS + didCommit: function(manager) { + var dirtyType = get(this, 'dirtyType'), + record = get(manager, 'record'); + + record.withTransaction(function(t) { + t.recordBecameClean('inflight', record); + }); + + manager.goToState('loaded'); + manager.send('invokeLifecycleCallbacks', dirtyType); + }, + + becameInvalid: function(manager, errors) { + var record = get(manager, 'record'); + + set(record, 'errors', errors); + + manager.goToState('invalid'); + manager.send('invokeLifecycleCallbacks'); + }, + + becameError: function(manager) { + manager.goToState('error'); + manager.send('invokeLifecycleCallbacks'); + }, + + didChangeData: didChangeData + }), + + // If a record becomes associated with a newly created + // parent record, it will be `pending` until the parent + // record has successfully persisted. Once this happens, + // this record can use the parent's primary key as its + // foreign key. + // + // If the record's transaction had already started to + // commit, the record will transition to the `inFlight` + // state. If it had not, the record will transition to + // the `uncommitted` state. + pending: DS.State.extend({ + initialState: 'uncommitted', + + // FLAGS + isPending: true, + + // SUBSTATES + + // A pending record whose transaction has not yet + // started to commit is in this state. + uncommitted: DS.State.extend({ + // EVENTS + deleteRecord: function(manager) { + var record = get(manager, 'record'), + pendingQueue = get(record, 'pendingQueue'), + tuple; + + // since we are leaving the pending state, remove any + // observers we have registered on other records. + for (var prop in pendingQueue) { + if (!pendingQueue.hasOwnProperty(prop)) { continue; } + + tuple = pendingQueue[prop]; + Ember.removeObserver(tuple[0], 'id', tuple[1]); + } + }, + + willCommit: function(manager) { + manager.goToState('committing'); + }, + + doneWaitingOn: function(manager, object) { + var record = get(manager, 'record'), + pendingQueue = get(record, 'pendingQueue'), + objectGuid = guidFor(object); + + delete pendingQueue[objectGuid]; + + if (isEmptyObject(pendingQueue)) { + manager.send('doneWaiting'); + } + }, + + doneWaiting: function(manager) { + var dirtyType = get(this, 'dirtyType'); + manager.goToState(dirtyType + '.uncommitted'); + } + }, Uncommitted), + + // A pending record whose transaction has started + // to commit is in this state. Since it has not yet + // been sent to the adapter, it is not `inFlight` + // until all of its dependencies have been committed. + committing: DS.State.extend({ + // FLAGS + isSaving: true, + + // EVENTS + doneWaitingOn: function(manager, object) { + var record = get(manager, 'record'), + pendingQueue = get(record, 'pendingQueue'), + objectGuid = guidFor(object); + + delete pendingQueue[objectGuid]; + + if (isEmptyObject(pendingQueue)) { + manager.send('doneWaiting'); + } + }, + + doneWaiting: function(manager) { + var record = get(manager, 'record'), + transaction = get(record, 'transaction'); + + // Now that the record is no longer pending, schedule + // the transaction to commit. + Ember.run.once(transaction, transaction.commit); + }, + + willCommit: function(manager) { + var record = get(manager, 'record'), + pendingQueue = get(record, 'pendingQueue'); + + if (isEmptyObject(pendingQueue)) { + var dirtyType = get(this, 'dirtyType'); + manager.goToState(dirtyType + '.inFlight'); + } + } + }) + }), + + // A record is in the `invalid` state when its client-side + // invalidations have failed, or if the adapter has indicated + // the the record failed server-side invalidations. + invalid: DS.State.extend({ + // FLAGS + isValid: false, + + exit: function(manager) { + var record = get(manager, 'record'); + + record.withTransaction(function (t) { + t.recordBecameClean('inflight', record); + }); + }, + + // EVENTS + deleteRecord: function(manager) { + manager.goToState('deleted'); + }, + + setAssociation: setAssociation, + + setProperty: function(manager, context) { + setProperty(manager, context); + + var record = get(manager, 'record'), + errors = get(record, 'errors'), + key = context.key; + + delete errors[key]; + + if (!hasDefinedProperties(errors)) { + manager.send('becameValid'); + } + }, + + rollback: function(manager) { + manager.send('becameValid'); + manager.send('rollback'); + }, + + becameValid: function(manager) { + manager.goToState('uncommitted'); + }, + + invokeLifecycleCallbacks: function(manager) { + var record = get(manager, 'record'); + record.fire('becameInvalid', record); + } + }) +}); + +// The created and updated states are created outside the state +// chart so we can reopen their substates and add mixins as +// necessary. + +var createdState = DirtyState.create({ + dirtyType: 'created', + + // FLAGS + isNew: true +}); + +var updatedState = DirtyState.create({ + dirtyType: 'updated' +}); + +// The created.uncommitted state and created.pending.uncommitted share +// some logic defined in CreatedUncommitted. +createdState.states.uncommitted.reopen(CreatedUncommitted); +createdState.states.pending.states.uncommitted.reopen(CreatedUncommitted); + +// The created.uncommitted state needs to immediately transition to the +// deleted state if it is rolled back. +createdState.states.uncommitted.reopen({ + rollback: function(manager) { + this._super(manager); + manager.goToState('deleted.saved'); + } +}); + +// The updated.uncommitted state and updated.pending.uncommitted share +// some logic defined in UpdatedUncommitted. +updatedState.states.uncommitted.reopen(UpdatedUncommitted); +updatedState.states.pending.states.uncommitted.reopen(UpdatedUncommitted); +updatedState.states.inFlight.reopen({ + didSaveData: function(manager) { + var record = get(manager, 'record'), + data = get(record, 'data'); + + data.saveData(); + data.adapterDidUpdate(); + } +}); + +var states = { + rootState: Ember.State.create({ + // FLAGS + isLoaded: false, + isDirty: false, + isSaving: false, + isDeleted: false, + isError: false, + isNew: false, + isValid: true, + isPending: false, + + // SUBSTATES + + // A record begins its lifecycle in the `empty` state. + // If its data will come from the adapter, it will + // transition into the `loading` state. Otherwise, if + // the record is being created on the client, it will + // transition into the `created` state. + empty: DS.State.create({ + // EVENTS + loadingData: function(manager) { + manager.goToState('loading'); + }, + + didChangeData: function(manager) { + didChangeData(manager); + + manager.goToState('loaded.created'); + } + }), + + // A record enters this state when the store askes + // the adapter for its data. It remains in this state + // until the adapter provides the requested data. + // + // Usually, this process is asynchronous, using an + // XHR to retrieve the data. + loading: DS.State.create({ + // TRANSITIONS + exit: function(manager) { + var record = get(manager, 'record'); + record.fire('didLoad'); + }, + + // EVENTS + didChangeData: function(manager, data) { + didChangeData(manager); + manager.send('loadedData'); + }, + + loadedData: function(manager) { + manager.goToState('loaded'); + } + }), + + // A record enters this state when its data is populated. + // Most of a record's lifecycle is spent inside substates + // of the `loaded` state. + loaded: DS.State.create({ + initialState: 'saved', + + // FLAGS + isLoaded: true, + + // SUBSTATES + + // If there are no local changes to a record, it remains + // in the `saved` state. + saved: DS.State.create({ + + // EVENTS + setProperty: function(manager, context) { + setProperty(manager, context); + manager.goToState('updated'); + }, + + setAssociation: function(manager, context) { + setAssociation(manager, context); + manager.goToState('updated'); + }, + + didChangeData: didChangeData, + + deleteRecord: function(manager) { + manager.goToState('deleted'); + }, + + waitingOn: function(manager, object) { + waitingOn(manager, object); + manager.goToState('updated.pending'); + }, + + invokeLifecycleCallbacks: function(manager, dirtyType) { + var record = get(manager, 'record'); + if (dirtyType === 'created') { + record.fire('didCreate', record); + } else { + record.fire('didUpdate', record); + } + } + }), + + // A record is in this state after it has been locally + // created but before the adapter has indicated that + // it has been saved. + created: createdState, + + // A record is in this state if it has already been + // saved to the server, but there are new local changes + // that have not yet been saved. + updated: updatedState + }), + + // A record is in this state if it was deleted from the store. + deleted: DS.State.create({ + // FLAGS + isDeleted: true, + isLoaded: true, + isDirty: true, + + // TRANSITIONS + enter: function(manager) { + var record = get(manager, 'record'), + store = get(record, 'store'); + + store.removeFromRecordArrays(record); + }, + + // SUBSTATES + + // When a record is deleted, it enters the `start` + // state. It will exit this state when the record's + // transaction starts to commit. + start: DS.State.create({ + // TRANSITIONS + enter: function(manager) { + var record = get(manager, 'record'); + + record.withTransaction(function(t) { + t.recordBecameDirty('deleted', record); + }); + }, + + // EVENTS + willCommit: function(manager) { + manager.goToState('inFlight'); + }, + + rollback: function(manager) { + var record = get(manager, 'record'), + data = get(record, 'data'); + + data.rollback(); + record.withTransaction(function(t) { + t.recordBecameClean('deleted', record); + }); + manager.goToState('loaded'); + } + }), + + // After a record's transaction is committing, but + // before the adapter indicates that the deletion + // has saved to the server, a record is in the + // `inFlight` substate of `deleted`. + inFlight: DS.State.create({ + // FLAGS + isSaving: true, + + // TRANSITIONS + enter: function(manager) { + var record = get(manager, 'record'); + + record.withTransaction(function (t) { + t.recordBecameInFlight('deleted', record); + }); + }, + + // EVENTS + didCommit: function(manager) { + var record = get(manager, 'record'); + + record.withTransaction(function(t) { + t.recordBecameClean('inflight', record); + }); + + manager.goToState('saved'); + + manager.send('invokeLifecycleCallbacks'); + } + }), + + // Once the adapter indicates that the deletion has + // been saved, the record enters the `saved` substate + // of `deleted`. + saved: DS.State.create({ + // FLAGS + isDirty: false, + + invokeLifecycleCallbacks: function(manager) { + var record = get(manager, 'record'); + record.fire('didDelete', record); + } + }) + }), + + // If the adapter indicates that there was an unknown + // error saving a record, the record enters the `error` + // state. + error: DS.State.create({ + isError: true, + + // EVENTS + + invokeLifecycleCallbacks: function(manager) { + var record = get(manager, 'record'); + record.fire('becameError', record); + } + }) + }) +}; + +DS.StateManager = Ember.StateManager.extend({ + record: null, + initialState: 'rootState', + states: states +}); + +})(); + + + +(function() { +var get = Ember.get, set = Ember.set; + +// When a record is changed on the client, it is considered "dirty"--there are +// pending changes that need to be saved to a persistence layer, such as a +// server. +// +// If the record is rolled back, it re-enters a clean state, any changes are +// discarded, and its attributes are reset back to the last known good copy +// of the data that came from the server. +// +// If the record is committed, the changes are sent to the server to be saved, +// and once the server confirms that they are valid, the record's "canonical" +// data becomes the original canonical data plus the changes merged in. +// +// A DataProxy is an object that encapsulates this change tracking. It +// contains three buckets: +// +// * `savedData` - the last-known copy of the data from the server +// * `unsavedData` - a hash that contains any changes that have not yet +// been committed +// * `associations` - this is similar to `savedData`, but holds the client +// ids of associated records +// +// When setting a property on the object, the value is placed into the +// `unsavedData` bucket: +// +// proxy.set('key', 'value'); +// +// // unsavedData: +// { +// key: "value" +// } +// +// When retrieving a property from the object, it first looks to see +// if that value exists in the `unsavedData` bucket, and returns it if so. +// Otherwise, it returns the value from the `savedData` bucket. +// +// When the adapter notifies a record that it has been saved, it merges the +// `unsavedData` bucket into the `savedData` bucket. If the record's +// transaction is rolled back, the `unsavedData` hash is simply discarded. +// +// This object is a regular JS object for performance. It is only +// used internally for bookkeeping purposes. + +var DataProxy = DS._DataProxy = function(record) { + this.record = record; + + this.unsavedData = {}; + + this.associations = {}; +}; + +DataProxy.prototype = { + get: function(key) { return Ember.get(this, key); }, + set: function(key, value) { return Ember.set(this, key, value); }, + + setAssociation: function(key, value) { + this.associations[key] = value; + }, + + savedData: function() { + var savedData = this._savedData; + if (savedData) { return savedData; } + + var record = this.record, + clientId = get(record, 'clientId'), + store = get(record, 'store'); + + if (store) { + savedData = store.dataForRecord(record); + this._savedData = savedData; + return savedData; + } + }, + + unknownProperty: function(key) { + var unsavedData = this.unsavedData, + associations = this.associations, + savedData = this.savedData(), + store; + + var value = unsavedData[key], association; + + // if this is a belongsTo association, this will + // be a clientId. + association = associations[key]; + + if (association !== undefined) { + store = get(this.record, 'store'); + return store.clientIdToId[association]; + } + + if (savedData && value === undefined) { + value = savedData[key]; + } + + return value; + }, + + setUnknownProperty: function(key, value) { + var record = this.record, + unsavedData = this.unsavedData; + + unsavedData[key] = value; + + record.hashWasUpdated(); + + return value; + }, + + commit: function() { + this.saveData(); + + this.record.notifyPropertyChange('data'); + }, + + rollback: function() { + this.unsavedData = {}; + + this.record.notifyPropertyChange('data'); + }, + + saveData: function() { + var record = this.record; + + var unsavedData = this.unsavedData; + var savedData = this.savedData(); + + for (var prop in unsavedData) { + if (unsavedData.hasOwnProperty(prop)) { + savedData[prop] = unsavedData[prop]; + delete unsavedData[prop]; + } + } + }, + + adapterDidUpdate: function() { + this.unsavedData = {}; + } +}; + +})(); + + + +(function() { +var get = Ember.get, set = Ember.set, getPath = Ember.getPath, none = Ember.none; + +var retrieveFromCurrentState = Ember.computed(function(key) { + return get(getPath(this, 'stateManager.currentState'), key); +}).property('stateManager.currentState').cacheable(); + +DS.Model = Ember.Object.extend(Ember.Evented, { + isLoaded: retrieveFromCurrentState, + isDirty: retrieveFromCurrentState, + isSaving: retrieveFromCurrentState, + isDeleted: retrieveFromCurrentState, + isError: retrieveFromCurrentState, + isNew: retrieveFromCurrentState, + isPending: retrieveFromCurrentState, + isValid: retrieveFromCurrentState, + + clientId: null, + transaction: null, + stateManager: null, + pendingQueue: null, + errors: null, + + // because unknownProperty is used, any internal property + // must be initialized here. + primaryKey: 'id', + id: Ember.computed(function(key, value) { + var primaryKey = get(this, 'primaryKey'), + data = get(this, 'data'); + + if (arguments.length === 2) { + set(data, primaryKey, value); + return value; + } + + var id = get(data, primaryKey); + return id ? id : this._id; + }).property('primaryKey', 'data'), + + // The following methods are callbacks invoked by `toJSON`. You + // can override one of the callbacks to override specific behavior, + // or toJSON itself. + // + // If you override toJSON, you can invoke these callbacks manually + // to get the default behavior. + + /** + Add the record's primary key to the JSON hash. + + The default implementation uses the record's specified `primaryKey` + and the `id` computed property, which are passed in as parameters. + + @param {Object} json the JSON hash being built + @param {Number|String} id the record's id + @param {String} key the primaryKey for the record + */ + addIdToJSON: function(json, id, key) { + if (id) { json[key] = id; } + }, + + /** + Add the attributes' current values to the JSON hash. + + The default implementation gets the current value of each + attribute from the `data`, and uses a `defaultValue` if + specified in the `DS.attr` definition. + + @param {Object} json the JSON hash being build + @param {Ember.Map} attributes a Map of attributes + @param {DataProxy} data the record's data, accessed with `get` and `set`. + */ + addAttributesToJSON: function(json, attributes, data) { + attributes.forEach(function(name, meta) { + var key = meta.key(this.constructor), + value = get(data, key); + + if (value === undefined) { + value = meta.options.defaultValue; + } + + json[key] = value; + }, this); + }, + + /** + Add the value of a `hasMany` association to the JSON hash. + + The default implementation honors the `embedded` option + passed to `DS.hasMany`. If embedded, `toJSON` is recursively + called on the child records. If not, the `id` of each + record is added. + + Note that if a record is not embedded and does not + yet have an `id` (usually provided by the server), it + will not be included in the output. + + @param {Object} json the JSON hash being built + @param {DataProxy} data the record's data, accessed with `get` and `set`. + @param {Object} meta information about the association + @param {Object} options options passed to `toJSON` + */ + addHasManyToJSON: function(json, data, meta, options) { + var key = meta.key, + manyArray = get(this, key), + records = [], i, l, + clientId, id; + + if (meta.options.embedded) { + // TODO: Avoid materializing embedded hashes if possible + manyArray.forEach(function(record) { + records.push(record.toJSON(options)); + }); + } else { + var clientIds = get(manyArray, 'content'); + + for (i=0, l=clientIds.length; i 2) { - expected.push("'"+this.terminals_[p]+"'"); - } - var errStr = ''; + for (p in table[state]) + if (this.terminals_[p] && p > 2) { + expected.push("'" + this.terminals_[p] + "'"); + } + var errStr = ""; if (this.lexer.showPosition) { - errStr = 'Parse error on line '+(yylineno+1)+":\n"+this.lexer.showPosition()+'\nExpecting '+expected.join(', '); + errStr = "Parse error on line " + (yylineno + 1) + ":\n" + this.lexer.showPosition() + "\nExpecting " + expected.join(", ") + ", got '" + this.terminals_[symbol] + "'"; } else { - errStr = 'Parse error on line '+(yylineno+1)+": Unexpected " + - (symbol == 1 /*EOF*/ ? "end of input" : - ("'"+(this.terminals_[symbol] || symbol)+"'")); + errStr = "Parse error on line " + (yylineno + 1) + ": Unexpected " + (symbol == 1?"end of input":"'" + (this.terminals_[symbol] || symbol) + "'"); } - this.parseError(errStr, - {text: this.lexer.match, token: this.terminals_[symbol] || symbol, line: this.lexer.yylineno, loc: yyloc, expected: expected}); + this.parseError(errStr, {text: this.lexer.match, token: this.terminals_[symbol] || symbol, line: this.lexer.yylineno, loc: yyloc, expected: expected}); } - - // just recovered from another error - if (recovering == 3) { - if (symbol == EOF) { - throw new Error(errStr || 'Parsing halted.'); - } - - // discard current lookahead and grab another + } + if (action[0] instanceof Array && action.length > 1) { + throw new Error("Parse Error: multiple actions possible at state: " + state + ", token: " + symbol); + } + switch (action[0]) { + case 1: + stack.push(symbol); + vstack.push(this.lexer.yytext); + lstack.push(this.lexer.yylloc); + stack.push(action[1]); + symbol = null; + if (!preErrorSymbol) { yyleng = this.lexer.yyleng; yytext = this.lexer.yytext; yylineno = this.lexer.yylineno; yyloc = this.lexer.yylloc; - symbol = lex(); + if (recovering > 0) + recovering--; + } else { + symbol = preErrorSymbol; + preErrorSymbol = null; } - - // try to recover from error - while (1) { - // check for error recovery rule in this state - if ((TERROR.toString()) in table[state]) { - break; - } - if (state == 0) { - throw new Error(errStr || 'Parsing halted.'); - } - popStack(1); - state = stack[stack.length-1]; + break; + case 2: + len = this.productions_[action[1]][1]; + yyval.$ = vstack[vstack.length - len]; + yyval._$ = {first_line: lstack[lstack.length - (len || 1)].first_line, last_line: lstack[lstack.length - 1].last_line, first_column: lstack[lstack.length - (len || 1)].first_column, last_column: lstack[lstack.length - 1].last_column}; + r = this.performAction.call(yyval, yytext, yyleng, yylineno, this.yy, action[1], vstack, lstack); + if (typeof r !== "undefined") { + return r; } - - preErrorSymbol = symbol; // save the lookahead token - symbol = TERROR; // insert generic error symbol as new lookahead - state = stack[stack.length-1]; - action = table[state] && table[state][TERROR]; - recovering = 3; // allow 3 real symbols to be shifted before reporting a new error - } - - // this shouldn't happen, unless resolve defaults are off - if (action[0] instanceof Array && action.length > 1) { - throw new Error('Parse Error: multiple actions possible at state: '+state+', token: '+symbol); - } - - switch (action[0]) { - - case 1: // shift - //this.shiftCount++; - - stack.push(symbol); - vstack.push(this.lexer.yytext); - lstack.push(this.lexer.yylloc); - stack.push(action[1]); // push state - symbol = null; - if (!preErrorSymbol) { // normal execution/no error - yyleng = this.lexer.yyleng; - yytext = this.lexer.yytext; - yylineno = this.lexer.yylineno; - yyloc = this.lexer.yylloc; - if (recovering > 0) - recovering--; - } else { // error just occurred, resume old lookahead f/ before error - symbol = preErrorSymbol; - preErrorSymbol = null; - } - break; - - case 2: // reduce - //this.reductionCount++; - - len = this.productions_[action[1]][1]; - - // perform semantic action - yyval.$ = vstack[vstack.length-len]; // default to $$ = $1 - // default location, uses first token for firsts, last for lasts - yyval._$ = { - first_line: lstack[lstack.length-(len||1)].first_line, - last_line: lstack[lstack.length-1].last_line, - first_column: lstack[lstack.length-(len||1)].first_column, - last_column: lstack[lstack.length-1].last_column - }; - r = this.performAction.call(yyval, yytext, yyleng, yylineno, this.yy, action[1], vstack, lstack); - - if (typeof r !== 'undefined') { - return r; - } - - // pop off stack - if (len) { - stack = stack.slice(0,-1*len*2); - vstack = vstack.slice(0, -1*len); - lstack = lstack.slice(0, -1*len); - } - - stack.push(this.productions_[action[1]][0]); // push nonterminal (reduce) - vstack.push(yyval.$); - lstack.push(yyval._$); - // goto new state = table[STATE][NONTERMINAL] - newState = table[stack[stack.length-2]][stack[stack.length-1]]; - stack.push(newState); - break; - - case 3: // accept - return true; + if (len) { + stack = stack.slice(0, -1 * len * 2); + vstack = vstack.slice(0, -1 * len); + lstack = lstack.slice(0, -1 * len); + } + stack.push(this.productions_[action[1]][0]); + vstack.push(yyval.$); + lstack.push(yyval._$); + newState = table[stack[stack.length - 2]][stack[stack.length - 1]]; + stack.push(newState); + break; + case 3: + return true; } - } - return true; -}};/* Jison generated lexer */ +} +};/* Jison generated lexer */ var lexer = (function(){ var lexer = ({EOF:1, @@ -619,67 +555,79 @@ popState:function popState() { }, _currentRules:function _currentRules() { return this.conditions[this.conditionStack[this.conditionStack.length-1]].rules; + }, +topState:function () { + return this.conditionStack[this.conditionStack.length-2]; + }, +pushState:function begin(condition) { + this.begin(condition); }}); lexer.performAction = function anonymous(yy,yy_,$avoiding_name_collisions,YY_START) { var YYSTATE=YY_START switch($avoiding_name_collisions) { -case 0: this.begin("mu"); if (yy_.yytext) return 14; +case 0: + if(yy_.yytext.slice(-1) !== "\\") this.begin("mu"); + if(yy_.yytext.slice(-1) === "\\") yy_.yytext = yy_.yytext.substr(0,yy_.yyleng-1), this.begin("emu"); + if(yy_.yytext) return 14; + break; case 1: return 14; break; -case 2: return 24; +case 2: this.popState(); return 14; break; -case 3: return 16; +case 3: return 24; break; -case 4: return 20; +case 4: return 16; break; -case 5: return 19; +case 5: return 20; break; case 6: return 19; break; -case 7: return 23; +case 7: return 19; break; case 8: return 23; break; -case 9: yy_.yytext = yy_.yytext.substr(3,yy_.yyleng-5); this.begin("INITIAL"); return 15; +case 9: return 23; break; -case 10: return 22; +case 10: yy_.yytext = yy_.yytext.substr(3,yy_.yyleng-5); this.popState(); return 15; break; -case 11: return 34; +case 11: return 22; break; -case 12: return 33; +case 12: return 34; break; case 13: return 33; break; -case 14: return 36; +case 14: return 33; break; -case 15: /*ignore whitespace*/ +case 15: return 36; break; -case 16: this.begin("INITIAL"); return 18; +case 16: /*ignore whitespace*/ break; -case 17: this.begin("INITIAL"); return 18; +case 17: this.popState(); return 18; break; -case 18: yy_.yytext = yy_.yytext.substr(1,yy_.yyleng-2).replace(/\\"/g,'"'); return 28; +case 18: this.popState(); return 18; break; -case 19: return 30; +case 19: yy_.yytext = yy_.yytext.substr(1,yy_.yyleng-2).replace(/\\"/g,'"'); return 28; break; case 20: return 30; break; -case 21: return 29; +case 21: return 30; +break; +case 22: return 29; break; -case 22: return 33; +case 23: return 33; break; -case 23: yy_.yytext = yy_.yytext.substr(1, yy_.yyleng-2); return 33; +case 24: yy_.yytext = yy_.yytext.substr(1, yy_.yyleng-2); return 33; break; -case 24: return 'INVALID'; +case 25: return 'INVALID'; break; -case 25: return 5; +case 26: return 5; break; } }; -lexer.rules = [/^[^\x00]*?(?=(\{\{))/,/^[^\x00]+/,/^\{\{>/,/^\{\{#/,/^\{\{\//,/^\{\{\^/,/^\{\{\s*else\b/,/^\{\{\{/,/^\{\{&/,/^\{\{![\s\S]*?\}\}/,/^\{\{/,/^=/,/^\.(?=[} ])/,/^\.\./,/^[/.]/,/^\s+/,/^\}\}\}/,/^\}\}/,/^"(\\["]|[^"])*"/,/^true(?=[}\s])/,/^false(?=[}\s])/,/^[0-9]+(?=[}\s])/,/^[a-zA-Z0-9_$-]+(?=[=}\s/.])/,/^\[.*\]/,/^./,/^$/]; -lexer.conditions = {"mu":{"rules":[2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25],"inclusive":false},"INITIAL":{"rules":[0,1,25],"inclusive":true}};return lexer;})() +lexer.rules = [/^[^\x00]*?(?=(\{\{))/,/^[^\x00]+/,/^[^\x00]{2,}?(?=(\{\{))/,/^\{\{>/,/^\{\{#/,/^\{\{\//,/^\{\{\^/,/^\{\{\s*else\b/,/^\{\{\{/,/^\{\{&/,/^\{\{![\s\S]*?\}\}/,/^\{\{/,/^=/,/^\.(?=[} ])/,/^\.\./,/^[\/.]/,/^\s+/,/^\}\}\}/,/^\}\}/,/^"(\\["]|[^"])*"/,/^true(?=[}\s])/,/^false(?=[}\s])/,/^[0-9]+(?=[}\s])/,/^[a-zA-Z0-9_$-]+(?=[=}\s\/.])/,/^\[[^\]]*\]/,/^./,/^$/]; +lexer.conditions = {"mu":{"rules":[3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26],"inclusive":false},"emu":{"rules":[2],"inclusive":false},"INITIAL":{"rules":[0,1,26],"inclusive":true}};return lexer;})() parser.lexer = lexer; return parser; })(); @@ -829,6 +777,8 @@ Handlebars.Exception = function(message) { for (var p in tmp) { if (tmp.hasOwnProperty(p)) { this[p] = tmp[p]; } } + + this.message = tmp.message; }; Handlebars.Exception.prototype = new Error; @@ -1065,6 +1015,7 @@ Handlebars.JavaScriptCompiler = function() {}; this.declare('inverse', programGuid); this.opcode('invokeProgram', null, params.length, !!block.mustache.hash); + this.declare('inverse', null); this.opcode('append'); }, @@ -1105,7 +1056,7 @@ Handlebars.JavaScriptCompiler = function() {}; this.opcode('invokeMustache', params.length, mustache.id.original, !!mustache.hash); - if(mustache.escaped) { + if(mustache.escaped && !this.options.noEscape) { this.opcode('appendEscaped'); } else { this.opcode('append'); @@ -1291,6 +1242,12 @@ Handlebars.JavaScriptCompiler = function() {}; preamble: function() { var out = []; + // this register will disambiguate helper lookup from finding a function in + // a context. This is necessary for mustache compatibility, which requires + // that context functions in blocks are evaluated by blockHelperMissing, and + // then proceed as if the resulting value was provided to blockHelperMissing. + this.useRegister('foundHelper'); + if (!this.isChild) { var namespace = this.namespace; var copies = "helpers = helpers || " + namespace + ".helpers;"; @@ -1403,10 +1360,8 @@ Handlebars.JavaScriptCompiler = function() {}; } else if (isScoped || this.options.knownHelpersOnly) { toPush = topStack + " = " + this.nameLookup('depth' + this.lastContext, name, 'context'); } else { - toPush = topStack + " = " - + this.nameLookup('helpers', name, 'helper') - + " || " - + this.nameLookup('depth' + this.lastContext, name, 'context'); + this.register('foundHelper', this.nameLookup('helpers', name, 'helper')); + toPush = topStack + " = foundHelper || " + this.nameLookup('depth' + this.lastContext, name, 'context'); } toPush += ';'; @@ -1501,10 +1456,10 @@ Handlebars.JavaScriptCompiler = function() {}; params.push(stringOptions); - this.populateCall(params, id, helperId || id, fn); + this.populateCall(params, id, helperId || id, fn, program !== '{}'); }, - populateCall: function(params, id, helperId, fn) { + populateCall: function(params, id, helperId, fn, program) { var paramString = ["depth0"].concat(params).join(", "); var helperMissingString = ["depth0"].concat(helperId).concat(params).join(", "); @@ -1514,14 +1469,21 @@ Handlebars.JavaScriptCompiler = function() {}; this.source.push(nextStack + " = " + id + ".call(" + paramString + ");"); } else { this.context.aliases.functionType = '"function"'; - this.source.push("if(typeof " + id + " === functionType) { " + nextStack + " = " + id + ".call(" + paramString + "); }"); + var condition = program ? "foundHelper && " : "" + this.source.push("if(" + condition + "typeof " + id + " === functionType) { " + nextStack + " = " + id + ".call(" + paramString + "); }"); } fn.call(this, nextStack, helperMissingString, id); this.usingKnownHelper = false; }, invokePartial: function(context) { - this.pushStack("self.invokePartial(" + this.nameLookup('partials', context, 'partial') + ", '" + context + "', " + this.popStack() + ", helpers, partials);"); + params = [this.nameLookup('partials', context, 'partial'), "'" + context + "'", this.popStack(), "helpers", "partials"]; + + if (this.options.data) { + params.push("data"); + } + + this.pushStack("self.invokePartial(" + params.join(", ") + ");"); }, assignToHash: function(key) { @@ -1612,9 +1574,23 @@ Handlebars.JavaScriptCompiler = function() {}; } }; - var reservedWords = ("break case catch continue default delete do else finally " + - "for function if in instanceof new return switch this throw " + - "try typeof var void while with null true false").split(" "); + var reservedWords = ( + "break else new var" + + " case finally return void" + + " catch for switch while" + + " continue function this with" + + " default if throw" + + " delete in try" + + " do instanceof typeof" + + " abstract enum int short" + + " boolean export interface static" + + " byte extends long super" + + " char final native synchronized" + + " class float package throws" + + " const goto private transient" + + " debugger implements protected volatile" + + " double import public let yield" + ).split(" "); var compilerWords = JavaScriptCompiler.RESERVED_WORDS = {}; @@ -1659,7 +1635,7 @@ Handlebars.compile = function(string, options) { }; }; ; -// lib/handlebars/vm.js +// lib/handlebars/runtime.js Handlebars.VM = { template: function(templateSpec) { // Just add water @@ -1705,16 +1681,18 @@ Handlebars.VM = { }; }, noop: function() { return ""; }, - invokePartial: function(partial, name, context, helpers, partials) { + invokePartial: function(partial, name, context, helpers, partials, data) { + options = { helpers: helpers, partials: partials, data: data }; + if(partial === undefined) { throw new Handlebars.Exception("The partial " + name + " could not be found"); } else if(partial instanceof Function) { - return partial(context, {helpers: helpers, partials: partials}); + return partial(context, options); } else if (!Handlebars.compile) { - throw new Handlebars.Exception("The partial " + name + " could not be compiled when running in vm mode"); + throw new Handlebars.Exception("The partial " + name + " could not be compiled when running in runtime-only mode"); } else { partials[name] = Handlebars.compile(partial); - return partials[name](context, {helpers: helpers, partials: partials}); + return partials[name](context, options); } } }; @@ -1722,7 +1700,6 @@ Handlebars.VM = { Handlebars.template = Handlebars.VM.template; ; - })(); (function() { @@ -1737,7 +1714,7 @@ if ('undefined' === typeof Ember) { /** @namespace @name Ember - @version 0.9.6 + @version 0.9.8.1 All Ember methods and functions are defined inside of this namespace. You generally should not add new properties to this namespace as it may be @@ -1757,7 +1734,7 @@ if ('undefined' === typeof Ember) { // Create core object. Make it act like an instance of Ember.Namespace so that // objects assigned to it are given a sane string representation. -Ember = { isNamespace: true, toString: function() { return "Ember"; } }; +Ember = {}; // aliases needed to keep minifiers from removing the global context if ('undefined' !== typeof window) { @@ -1766,13 +1743,20 @@ if ('undefined' !== typeof window) { } +// Make sure these are set whether Ember was already defined or not + +Ember.isNamespace = true; + +Ember.toString = function() { return "Ember"; }; + + /** @static @type String - @default '0.9.6' + @default '0.9.8.1' @constant */ -Ember.VERSION = '0.9.6'; +Ember.VERSION = '0.9.8.1'; /** @static @@ -1819,6 +1803,56 @@ Ember.EXTEND_PROTOTYPES = (Ember.ENV.EXTEND_PROTOTYPES !== false); Ember.SHIM_ES5 = (Ember.ENV.SHIM_ES5 === false) ? false : Ember.EXTEND_PROTOTYPES; +/** + @static + @type Boolean + @default false + @constant + + Determines whether computed properties are cacheable by default. + In future releases this will default to `true`. For the 1.0 release, + the option to turn off caching by default will be removed entirely. + + When caching is enabled by default, you can use `volatile()` to disable + caching on individual computed properties. +*/ +Ember.CP_DEFAULT_CACHEABLE = !!Ember.ENV.CP_DEFAULT_CACHEABLE; + +/** + @static + @type Boolean + @default false + @constant + + Determines whether views render their templates using themselves + as the context, or whether it is inherited from the parent. In + future releases, this will default to `true`. For the 1.0 release, + the option to have views change context by default will be removed entirely. + + If you need to update your application to use the new context rules, simply + prefix property access with `view.`: + + // Before: + {{#each App.photosController}} + Photo Title: {{title}} + {{#view App.InfoView contentBinding="this"}} + {{content.date}} + {{content.cameraType}} + {{otherViewProperty}} + {{/view}} + {{/each}} + + // After: + {{#each App.photosController}} + Photo Title: {{title}} + {{#view App.InfoView}} + {{date}} + {{cameraType}} + {{view.otherViewProperty}} + {{/view}} + {{/each}} +*/ +Ember.VIEW_PRESERVES_CONTEXT = !!Ember.ENV.VIEW_PRESERVES_CONTEXT; /** Empty function. Useful for some operations. @@ -1837,18 +1871,24 @@ Ember.K = function() { return this; }; // Stub out the methods defined by the ember-debug package in case it's not loaded -if ('undefined' === typeof ember_assert) { - window.ember_assert = Ember.K; +if ('undefined' === typeof Ember.assert) { Ember.assert = Ember.K; } +if ('undefined' === typeof Ember.warn) { Ember.warn = Ember.K; } +if ('undefined' === typeof Ember.deprecate) { Ember.deprecate = Ember.K; } +if ('undefined' === typeof Ember.deprecateFunc) { + Ember.deprecateFunc = function(_, func) { return func; }; } -if ('undefined' === typeof ember_warn) { window.ember_warn = Ember.K; } +// These are deprecated but still supported +if ('undefined' === typeof ember_assert) { window.ember_assert = Ember.K; } +if ('undefined' === typeof ember_warn) { window.ember_warn = Ember.K; } if ('undefined' === typeof ember_deprecate) { window.ember_deprecate = Ember.K; } - if ('undefined' === typeof ember_deprecateFunc) { + /** @private */ window.ember_deprecateFunc = function(_, func) { return func; }; } + // .......................................................... // LOGGER // @@ -2010,7 +2050,7 @@ if (!platform.defineProperty) { platform.hasPropertyAccessors = false; platform.defineProperty = function(obj, keyName, desc) { - ember_assert("property descriptor cannot have `get` or `set` on this platform", !desc.get && !desc.set); + Ember.assert("property descriptor cannot have `get` or `set` on this platform", !desc.get && !desc.set); obj[keyName] = desc.value; }; @@ -2337,7 +2377,6 @@ Ember.wrap = function(func, superFunc) { Ember.isArray([]); // true Ember.isArray( Ember.ArrayProxy.create({ content: [] }) ); // true - @name Ember.isArray @param {Object} obj The object to test @returns {Boolean} */ @@ -2383,7 +2422,6 @@ Ember.makeArray = function(obj) { // Copyright: ©2011 Strobe Inc. and contributors. // License: Licensed under MIT license (see license.js) // ========================================================================== -/*globals ember_assert */ var USE_ACCESSORS = Ember.platform.hasPropertyAccessors && Ember.ENV.USE_ACCESSORS; Ember.USE_ACCESSORS = !!USE_ACCESSORS; @@ -2438,7 +2476,7 @@ if (!USE_ACCESSORS) { obj = Ember; } - ember_assert("You need to provide an object and key to `get`.", !!obj && keyName); + Ember.assert("You need to provide an object and key to `get`.", !!obj && keyName); if (!obj) return undefined; var desc = meta(obj, false).descs[keyName]; @@ -2448,7 +2486,7 @@ if (!USE_ACCESSORS) { /** @private */ set = function(obj, keyName, value) { - ember_assert("You need to provide an object and key to `set`.", !!obj && keyName !== undefined); + Ember.assert("You need to provide an object and key to `set`.", !!obj && keyName !== undefined); var desc = meta(obj, false).descs[keyName]; if (desc) desc.set(obj, keyName, value); else o_set(obj, keyName, value); @@ -2522,14 +2560,25 @@ Ember.set = set; // PATHS // +/** @private */ +function cleanupStars(path) { + if (path.indexOf('*') === -1 || path === '*') return path; + + Ember.deprecate('Star paths are now treated the same as normal paths', !/(^|[^\.])\*/.test(path)); + + return path.replace(/(^|.)\*/, function(match, char){ + return (char === '.') ? match : (char + '.'); + }); +} + /** @private */ function normalizePath(path) { - ember_assert('must pass non-empty string to normalizePath()', path && path!==''); + Ember.assert('must pass non-empty string to normalizePath()', path && path!==''); + path = cleanupStars(path); if (path==='*') return path; //special case... var first = path.charAt(0); if(first==='.') return 'this'+path; - if (first==='*' && path.charAt(1)!=='.') return 'this.'+path.slice(1); return path; } @@ -2538,10 +2587,7 @@ function normalizePath(path) { function getPath(target, path) { var len = path.length, idx, next, key; - idx = path.indexOf('*'); - if (idx>0 && path.charAt(idx-1)!=='.') { - return getPath(getPath(target, path.slice(0, idx)), path.slice(idx+1)); - } + path = cleanupStars(path); idx = 0; while(target && idx0 && path.charAt(idx-1)!=='.') { - - // should not do lookup on a prototype object because the object isn't - // really live yet. - if (target && meta(target,false).proto!==target) { - target = getPath(target, path.slice(0, idx)); - } else { - target = null; - } - path = path.slice(idx+1); + path = cleanupStars(path); - } else if (target === window) { + if (target === window) { key = firstKey(path); target = get(target, key); path = path.slice(key.length+1); @@ -2644,8 +2680,8 @@ Ember.getWithDefault = function(root, key, defaultValue) { return value; }; -Ember.getPath = function(root, path, _checkGlobal) { - var pathOnly, hasThis, hasStar, isGlobal, ret; +Ember.getPath = function(root, path) { + var hasThis, isGlobal, ret; // Helpers that operate with 'this' within an #each if (path === '') { @@ -2655,37 +2691,27 @@ Ember.getPath = function(root, path, _checkGlobal) { if (!path && 'string'===typeof root) { path = root; root = null; - pathOnly = true; } - hasStar = path.indexOf('*') > -1; + path = cleanupStars(path); // If there is no root and path is a key name, return that // property from the global object. // E.g. getPath('Ember') -> Ember - if (root === null && !hasStar && path.indexOf('.') < 0) { return get(window, path); } + if (root === null && path.indexOf('.') < 0) { return get(window, path); } // detect complicated paths and normalize them path = normalizePath(path); hasThis = HAS_THIS.test(path); - if (!root || hasThis || hasStar) { - ember_deprecate("Fetching globals with Ember.getPath is deprecated (root: "+root+", path: "+path+")", !root || root === window || !IS_GLOBAL.test(path)); - + if (!root || hasThis) { var tuple = normalizeTuple(root, path); root = tuple[0]; path = tuple[1]; tuple.length = 0; } - ret = getPath(root, path); - - if (ret === undefined && !pathOnly && !hasThis && root !== window && IS_GLOBAL.test(path) && _checkGlobal !== false) { - ember_deprecate("Fetching globals with Ember.getPath is deprecated (root: "+root+", path: "+path+")"); - return Ember.getPath(window, path); - } else { - return ret; - } + return getPath(root, path); }; Ember.setPath = function(root, path, value, tolerant) { @@ -2698,25 +2724,12 @@ Ember.setPath = function(root, path, value, tolerant) { } path = normalizePath(path); - if (path.indexOf('*')>0) { - ember_deprecate("Setting globals with Ember.setPath is deprecated (path: "+path+")", !root || root === window || !IS_GLOBAL.test(path)); - - var tuple = normalizeTuple(root, path); - root = tuple[0]; - path = tuple[1]; - tuple.length = 0; - } if (path.indexOf('.') > 0) { keyName = path.slice(path.lastIndexOf('.')+1); path = path.slice(0, path.length-(keyName.length+1)); if (path !== 'this') { - // Remove the `false` when we're done with this deprecation - root = Ember.getPath(root, path, false); - if (!root && IS_GLOBAL.test(path)) { - ember_deprecate("Setting globals with Ember.setPath is deprecated (path: "+path+")"); - root = Ember.getPath(window, path); - } + root = Ember.getPath(root, path); } } else { @@ -2774,7 +2787,6 @@ Ember.isGlobalPath = function(path) { // Copyright: ©2011 Strobe Inc. and contributors. // License: Licensed under MIT license (see license.js) // ========================================================================== -/*globals ember_assert */ var USE_ACCESSORS = Ember.USE_ACCESSORS; var GUID_KEY = Ember.GUID_KEY; var META_KEY = Ember.META_KEY; @@ -2913,16 +2925,16 @@ Dp.val = function(obj, keyName) { if (!USE_ACCESSORS) { Ember.Descriptor.MUST_USE_GETTER = function() { if (this instanceof Ember.Object) { - ember_assert('Must use Ember.get() to access this property', false); + Ember.assert('Must use Ember.get() to access this property', false); } }; Ember.Descriptor.MUST_USE_SETTER = function() { if (this instanceof Ember.Object) { if (this.isDestroyed) { - ember_assert('You cannot set observed properties on destroyed objects', false); + Ember.assert('You cannot set observed properties on destroyed objects', false); } else { - ember_assert('Must use Ember.set() to access this property', false); + Ember.assert('Must use Ember.set() to access this property', false); } } }; @@ -3128,7 +3140,7 @@ Ember.defineProperty = function(obj, keyName, desc, val) { that support it, this uses the built in Object.create method. Else one is simulated for you. - This method is a better choice thant Object.create() because it will make + This method is a better choice than Object.create() because it will make sure that any observers, event listeners, and computed properties are inherited from the parent as well. @@ -3187,7 +3199,9 @@ Ember.createPrototype = function(obj, props) { // Copyright: ©2011 Strobe Inc. and contributors. // License: Licensed under MIT license (see license.js) // ========================================================================== -/*globals ember_assert */ +Ember.warn("Computed properties will soon be cacheable by default. To enable this in your app, set `ENV.CP_DEFAULT_CACHEABLE = true`.", Ember.CP_DEFAULT_CACHEABLE); + + var meta = Ember.meta; var guidFor = Ember.guidFor; var USE_ACCESSORS = Ember.USE_ACCESSORS; @@ -3258,7 +3272,7 @@ function addDependentKeys(desc, obj, keyName) { /** @private */ function ComputedProperty(func, opts) { this.func = func; - this._cacheable = opts && opts.cacheable; + this._cacheable = (opts && opts.cacheable !== undefined) ? opts.cacheable : Ember.CP_DEFAULT_CACHEABLE; this._dependentKeys = opts && opts.dependentKeys; } @@ -3343,11 +3357,10 @@ var Cp = ComputedProperty.prototype; }.property('firstName', 'lastName').cacheable() }); - It is common to use `cacheable()` on nearly every computed property - you define. + Properties are cacheable by default. @name Ember.ComputedProperty.cacheable - @param {Boolean} aFlag optional set to false to disable cacheing + @param {Boolean} aFlag optional set to false to disable caching @returns {Ember.ComputedProperty} receiver */ Cp.cacheable = function(aFlag) { @@ -3355,6 +3368,23 @@ Cp.cacheable = function(aFlag) { return this; }; +/** + Call on a computed property to set it into non-cached mode. When in this + mode the computed property will not automatically cache the return value. + + MyApp.outsideService = Ember.Object.create({ + value: function() { + return OutsideService.getValue(); + }.property().volatile() + }); + + @name Ember.ComputedProperty.volatile + @returns {Ember.ComputedProperty} receiver +*/ +Cp.volatile = function() { + return this.cacheable(false); +}; + /** Sets the dependent keys on this computed property. Pass any number of arguments containing key paths that this computed property depends on. @@ -3535,7 +3565,7 @@ Ember.computed = function(func) { Ember.cacheFor = function(obj, key) { var cache = meta(obj, false).cache; - if (cache && cache[key]) { + if (cache && key in cache) { return cache[key]; } }; @@ -3932,7 +3962,6 @@ Ember.notifyBeforeObservers = function(obj, keyName) { // Copyright: ©2011 Strobe Inc. and contributors. // License: Licensed under MIT license (see license.js) // ========================================================================== -/*globals ember_assert */ var guidFor = Ember.guidFor; var meta = Ember.meta; var get = Ember.get, set = Ember.set; @@ -4041,16 +4070,15 @@ var pendingQueue = []; // back in the queue and reschedule is true, schedules a timeout to try // again. /** @private */ -function flushPendingChains(reschedule) { +function flushPendingChains() { if (pendingQueue.length===0) return ; // nothing to do var queue = pendingQueue; pendingQueue = []; forEach(queue, function(q) { q[0].add(q[1]); }); - if (reschedule!==false && pendingQueue.length>0) { - setTimeout(flushPendingChains, 1); - } + + Ember.warn('Watching an undefined global, Ember expects watched globals to be setup by the time the run loop is flushed, check for typos', pendingQueue.length > 0); } /** @private */ @@ -4420,14 +4448,6 @@ Ember.rewatch = function(obj) { // make sure any chained watchers update. if (chains && chains.value() !== obj) chainsFor(obj); - // if the object has bindings then sync them.. - if (bindings && m.proto!==obj) { - for (key in bindings) { - b = !DEP_SKIP[key] && obj[key]; - if (b && b instanceof Ember.Binding) b.fromDidChange(obj); - } - } - return this; }; @@ -4546,7 +4566,6 @@ Ember.destroy = function (obj) { // Copyright: ©2011 Strobe Inc. and contributors. // License: Licensed under MIT license (see license.js) // ========================================================================== -/*globals ember_assert */ var o_create = Ember.platform.create; var meta = Ember.meta; var guidFor = Ember.guidFor; @@ -4658,7 +4677,7 @@ function invokeAction(action, params) { @memberOf Ember */ function addListener(obj, eventName, target, method, xform) { - ember_assert("You must pass at least an object and event name to Ember.addListener", !!obj && !!eventName); + Ember.assert("You must pass at least an object and event name to Ember.addListener", !!obj && !!eventName); if (!method && 'function' === typeof target) { method = target; @@ -4666,7 +4685,7 @@ function addListener(obj, eventName, target, method, xform) { } var actionSet = actionSetFor(obj, eventName, target, true), - methodGuid = guidFor(method), ret; + methodGuid = guidFor(method); if (!actionSet[methodGuid]) { actionSet[methodGuid] = { target: target, method: method, xform: xform }; @@ -4677,8 +4696,6 @@ function addListener(obj, eventName, target, method, xform) { if ('function' === typeof obj.didAddListener) { obj.didAddListener(eventName, target, method); } - - return ret; // return true if this is the first listener. } /** @memberOf Ember */ @@ -4754,6 +4771,7 @@ function sendEvent(obj, eventName) { return true; } +/** @memberOf Ember */ function deferEvent(obj, eventName) { var targetSet = targetSetFor(obj, eventName), actions = [], params = arguments; iterateSet(targetSet, function (action) { @@ -4809,562 +4827,597 @@ Ember.deferEvent = deferEvent; (function() { // ========================================================================== // Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. and contributors. +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2010 Apple Inc. All rights reserved. // License: Licensed under MIT license (see license.js) // ========================================================================== -var Mixin, MixinDelegate, REQUIRED, Alias; -var classToString, superClassString; +// Ember.Logger +// Ember.watch.flushPending +// Ember.beginPropertyChanges, Ember.endPropertyChanges +// Ember.guidFor +// Ember.ArrayUtils -var a_map = Ember.ArrayUtils.map; -var a_indexOf = Ember.ArrayUtils.indexOf; -var a_forEach = Ember.ArrayUtils.forEach; -var a_slice = Array.prototype.slice; -var EMPTY_META = {}; // dummy for non-writable meta -var META_SKIP = { __emberproto__: true, __ember_count__: true }; +// .......................................................... +// HELPERS +// -var o_create = Ember.platform.create; +var slice = Array.prototype.slice; +var forEach = Ember.ArrayUtils.forEach; +// invokes passed params - normalizing so you can pass target/func, +// target/string or just func /** @private */ -function meta(obj, writable) { - var m = Ember.meta(obj, writable!==false), ret = m.mixins; - if (writable===false) return ret || EMPTY_META; +function invoke(target, method, args, ignore) { - if (!ret) { - ret = m.mixins = { __emberproto__: obj }; - } else if (ret.__emberproto__ !== obj) { - ret = m.mixins = o_create(ret); - ret.__emberproto__ = obj; + if (method===undefined) { + method = target; + target = undefined; } - return ret; -} -/** @private */ -function initMixin(mixin, args) { - if (args && args.length > 0) { - mixin.mixins = a_map(args, function(x) { - if (x instanceof Mixin) return x; + if ('string'===typeof method) method = target[method]; + if (args && ignore>0) { + args = args.length>ignore ? slice.call(args, ignore) : null; + } - // Note: Manually setup a primitive mixin here. This is the only - // way to actually get a primitive mixin. This way normal creation - // of mixins will give you combined mixins... - var mixin = new Mixin(); - mixin.properties = x; - return mixin; - }); + // Unfortunately in some browsers we lose the backtrace if we rethrow the existing error, + // so in the event that we don't have an `onerror` handler we don't wrap in a try/catch + if ('function' === typeof Ember.onerror) { + try { + // IE8's Function.prototype.apply doesn't accept undefined/null arguments. + return method.apply(target || this, args || []); + } catch (error) { + Ember.onerror(error); + } + } else { + // IE8's Function.prototype.apply doesn't accept undefined/null arguments. + return method.apply(target || this, args || []); } - return mixin; } -var NATIVES = [Boolean, Object, Number, Array, Date, String]; + +// .......................................................... +// RUNLOOP +// + +var timerMark; // used by timers... + /** @private */ -function isMethod(obj) { - if ('function' !== typeof obj || obj.isMethod===false) return false; - return a_indexOf(NATIVES, obj)<0; -} +var K = function() {}; /** @private */ -function mergeMixins(mixins, m, descs, values, base) { - var len = mixins.length, idx, mixin, guid, props, value, key, ovalue, concats; +var RunLoop = function(prev) { + var self; - /** @private */ - function removeKeys(keyName) { - delete descs[keyName]; - delete values[keyName]; + if (this instanceof RunLoop) { + self = this; + } else { + self = new K(); } - for(idx=0;idx=0) || key === 'concatenatedProperties') { - var baseValue = values[key] || base[key]; - value = baseValue ? baseValue.concat(value) : Ember.makeArray(value); - } + schedule: function(queueName, target, method) { + var queues = this._queues, queue; + if (!queues) queues = this._queues = {}; + queue = queues[queueName]; + if (!queue) queue = queues[queueName] = []; - descs[key] = Ember.SIMPLE_PROPERTY; - values[key] = value; - } - } + var args = arguments.length>3 ? slice.call(arguments, 3) : null; + queue.push({ target: target, method: method, args: args }); + return this; + }, - // manually copy toString() because some JS engines do not enumerate it - if (props.hasOwnProperty('toString')) { - base.toString = props.toString; - } + flush: function(queueName) { + var queues = this._queues, queueNames, idx, len, queue, log; - } else if (mixin.mixins) { - mergeMixins(mixin.mixins, m, descs, values, base); - if (mixin._without) a_forEach(mixin._without, removeKeys); + if (!queues) return this; // nothing to do + + function iter(item) { + invoke(item.target, item.method, item.args); } - } -} -/** @private */ -var defineProperty = Ember.defineProperty; + Ember.watch.flushPending(); // make sure all chained watchers are setup -/** @private */ -function writableReq(obj) { - var m = Ember.meta(obj), req = m.required; - if (!req || (req.__emberproto__ !== obj)) { - req = m.required = req ? o_create(req) : { __ember_count__: 0 }; - req.__emberproto__ = obj; - } - return req; -} + if (queueName) { + while (this._queues && (queue = this._queues[queueName])) { + this._queues[queueName] = null; -/** @private */ -function getObserverPaths(value) { - return ('function' === typeof value) && value.__ember_observes__; -} + // the sync phase is to allow property changes to propagate. don't + // invoke observers until that is finished. + if (queueName === 'sync') { + log = Ember.LOG_BINDINGS; + if (log) Ember.Logger.log('Begin: Flush Sync Queue'); -/** @private */ -function getBeforeObserverPaths(value) { - return ('function' === typeof value) && value.__ember_observesBefore__; -} + Ember.beginPropertyChanges(); + try { + forEach(queue, iter); + } finally { + Ember.endPropertyChanges(); + } -Ember._mixinBindings = function(obj, key, value, m) { - return value; -}; + if (log) Ember.Logger.log('End: Flush Sync Queue'); -/** @private */ -function applyMixin(obj, mixins, partial) { - var descs = {}, values = {}, m = Ember.meta(obj), req = m.required; - var key, willApply, didApply, value, desc; + } else { + forEach(queue, iter); + } + } - var mixinBindings = Ember._mixinBindings; + } else { + queueNames = Ember.run.queues; + len = queueNames.length; + do { + this._queues = null; + for(idx=0;idx0) { - var keys = []; - for(key in req) { - if (META_SKIP[key]) continue; - keys.push(key); - } - throw new Error('Required properties not defined: '+keys.join(',')); - } - return obj; -} -Ember.mixin = function(obj) { - var args = a_slice.call(arguments, 1); - return applyMixin(obj, args, false); + @returns {void} +*/ +Ember.run.begin = function() { + run.currentRunLoop = new RunLoop(run.currentRunLoop); }; - /** - @constructor -*/ -Ember.Mixin = function() { return initMixin(this, arguments); }; - -/** @private */ -Mixin = Ember.Mixin; + Ends a RunLoop. This must be called sometime after you call Ember.run.begin() + to flush any deferred actions. This is a lower-level way to use a RunLoop + instead of using Ember.run(). -/** @private */ -Mixin._apply = applyMixin; + Ember.run.begin(); + // code to be execute within a RunLoop + Ember.run.end(); -Mixin.applyPartial = function(obj) { - var args = a_slice.call(arguments, 1); - return applyMixin(obj, args, true); + @returns {void} +*/ +Ember.run.end = function() { + Ember.assert('must have a current run loop', run.currentRunLoop); + try { + run.currentRunLoop.end(); + } + finally { + run.currentRunLoop = run.currentRunLoop.prev(); + } }; -Mixin.create = function() { - classToString.processed = false; - var M = this; - return initMixin(new M(), arguments); -}; +/** + Array of named queues. This array determines the order in which queues + are flushed at the end of the RunLoop. You can define your own queues by + simply adding the queue name to this array. Normally you should not need + to inspect or modify this property. -Mixin.prototype.reopen = function() { + @property {String} + @default ['sync', 'actions', 'destroy', 'timers'] +*/ +Ember.run.queues = ['sync', 'actions', 'destroy', 'timers']; - var mixin, tmp; +/** + Adds the passed target/method and any optional arguments to the named + queue to be executed at the end of the RunLoop. If you have not already + started a RunLoop when calling this method one will be started for you + automatically. - if (this.properties) { - mixin = Mixin.create(); - mixin.properties = this.properties; - delete this.properties; - this.mixins = [mixin]; - } + At the end of a RunLoop, any methods scheduled in this way will be invoked. + Methods will be invoked in an order matching the named queues defined in + the run.queues property. - var len = arguments.length, mixins = this.mixins, idx; + Ember.run.schedule('timers', this, function(){ + // this will be executed at the end of the RunLoop, when timers are run + console.log("scheduled on timers queue"); + }); + Ember.run.schedule('sync', this, function(){ + // this will be executed at the end of the RunLoop, when bindings are synced + console.log("scheduled on sync queue"); + }); + // Note the functions will be run in order based on the run queues order. Output would be: + // scheduled on sync queue + // scheduled on timers queue - for(idx=0;idx= 0) { - if (_detect(mixins[loc], targetMixin, seen)) return true; + Ember.run.autorun(); + + @returns {Ember.RunLoop} the new current RunLoop +*/ +Ember.run.autorun = function() { + + if (!run.currentRunLoop) { + run.begin(); + + // TODO: throw during tests + if (Ember.testing) { + run.end(); + } else if (!autorunTimer) { + autorunTimer = setTimeout(autorun, 1); + } } - return false; -} -Mixin.prototype.detect = function(obj) { - if (!obj) return false; - if (obj instanceof Mixin) return _detect(obj, this, {}); - return !!meta(obj, false)[Ember.guidFor(this)]; + return run.currentRunLoop; }; -Mixin.prototype.without = function() { - var ret = new Mixin(this); - ret._without = a_slice.call(arguments); - return ret; -}; +/** + Immediately flushes any events scheduled in the 'sync' queue. Bindings + use this queue so this method is a useful way to immediately force all + bindings in the application to sync. -/** @private */ -function _keys(ret, mixin, seen) { - if (seen[Ember.guidFor(mixin)]) return; - seen[Ember.guidFor(mixin)] = true; + You should call this method anytime you need any changed state to propagate + throughout the app immediately without repainting the UI. - if (mixin.properties) { - var props = mixin.properties; - for(var key in props) { - if (props.hasOwnProperty(key)) ret[key] = true; - } - } else if (mixin.mixins) { - a_forEach(mixin.mixins, function(x) { _keys(ret, x, seen); }); - } -} + Ember.run.sync(); -Mixin.prototype.keys = function() { - var keys = {}, seen = {}, ret = []; - _keys(keys, this, seen); - for(var key in keys) { - if (keys.hasOwnProperty(key)) ret.push(key); - } - return ret; + @returns {void} +*/ +Ember.run.sync = function() { + run.autorun(); + run.currentRunLoop.flush('sync'); }; -/** @private - make Mixin's have nice displayNames */ +// .......................................................... +// TIMERS +// -var NAME_KEY = Ember.GUID_KEY+'_name'; -var get = Ember.get; +var timers = {}; // active timers... +var laterScheduled = false; /** @private */ -function processNames(paths, root, seen) { - var idx = paths.length; - for(var key in root) { - if (!root.hasOwnProperty || !root.hasOwnProperty(key)) continue; - var obj = root[key]; - paths[idx] = key; - - if (obj && obj.toString === classToString) { - obj[NAME_KEY] = paths.join('.'); - } else if (obj && get(obj, 'isNamespace')) { - if (seen[Ember.guidFor(obj)]) continue; - seen[Ember.guidFor(obj)] = true; - processNames(paths, obj, seen); +function invokeLaterTimers() { + var now = (+ new Date()), earliest = -1; + for(var key in timers) { + if (!timers.hasOwnProperty(key)) continue; + var timer = timers[key]; + if (timer && timer.expires) { + if (now >= timer.expires) { + delete timers[key]; + invoke(timer.target, timer.method, timer.args, 2); + } else { + if (earliest<0 || (timer.expires < earliest)) earliest=timer.expires; + } } - } - paths.length = idx; // cut out last item + + // schedule next timeout to fire... + if (earliest>0) setTimeout(invokeLaterTimers, earliest-(+ new Date())); } -/** @private */ -function findNamespaces() { - var Namespace = Ember.Namespace, obj; +/** + Invokes the passed target/method and optional arguments after a specified + period if time. The last parameter of this method must always be a number + of milliseconds. - if (Namespace.PROCESSED) { return; } + You should use this method whenever you need to run some action after a + period of time instead of using setTimeout(). This method will ensure that + items that expire during the same script execution cycle all execute + together, which is often more efficient than using a real setTimeout. - for (var prop in window) { - // get(window.globalStorage, 'isNamespace') would try to read the storage for domain isNamespace and cause exception in Firefox. - // globalStorage is a storage obsoleted by the WhatWG storage specification. See https://developer.mozilla.org/en/DOM/Storage#globalStorage - if (prop === "globalStorage" && window.StorageList && window.globalStorage instanceof window.StorageList) { continue; } - // Unfortunately, some versions of IE don't support window.hasOwnProperty - if (window.hasOwnProperty && !window.hasOwnProperty(prop)) { continue; } + Ember.run.later(myContext, function(){ + // code here will execute within a RunLoop in about 500ms with this == myContext + }, 500); - try { - obj = window[prop]; - } catch (e) { - continue; - } + @param {Object} target + (optional) target of method to invoke - if (obj && get(obj, 'isNamespace')) { - ember_deprecate("Namespaces should not begin with lowercase.", /^[A-Z]/.test(prop)); - obj[NAME_KEY] = prop; - } - } -} + @param {Function|String} method + The method to invoke. If you pass a string it will be resolved on the + target at the time the method is invoked. -Ember.identifyNamespaces = findNamespaces; + @param {Object...} args + Optional arguments to pass to the timeout. + + @param {Number} wait + Number of milliseconds to wait. + + @returns {Timer} an object you can use to cancel a timer at a later time. +*/ +Ember.run.later = function(target, method) { + var args, expires, timer, guid, wait; + + // setTimeout compatibility... + if (arguments.length===2 && 'function' === typeof target) { + wait = method; + method = target; + target = undefined; + args = [target, method]; -/** @private */ -superClassString = function(mixin) { - var superclass = mixin.superclass; - if (superclass) { - if (superclass[NAME_KEY]) { return superclass[NAME_KEY]; } - else { return superClassString(superclass); } } else { - return; + args = slice.call(arguments); + wait = args.pop(); } + + expires = (+ new Date())+wait; + timer = { target: target, method: method, expires: expires, args: args }; + guid = Ember.guidFor(timer); + timers[guid] = timer; + run.once(timers, invokeLaterTimers); + return guid; }; /** @private */ -classToString = function() { - var Namespace = Ember.Namespace, namespace; +function invokeOnceTimer(guid, onceTimers) { + if (onceTimers[this.tguid]) delete onceTimers[this.tguid][this.mguid]; + if (timers[guid]) invoke(this.target, this.method, this.args, 2); + delete timers[guid]; +} - // TODO: Namespace should really be in Metal - if (Namespace) { - if (!this[NAME_KEY] && !classToString.processed) { - if (!Namespace.PROCESSED) { - findNamespaces(); - Namespace.PROCESSED = true; - } +/** + Schedules an item to run one time during the current RunLoop. Calling + this method with the same target/method combination will have no effect. - classToString.processed = true; + Note that although you can pass optional arguments these will not be + considered when looking for duplicates. New arguments will replace previous + calls. - var namespaces = Namespace.NAMESPACES; - for (var i=0, l=namespaces.length; i0) { - args = args.length>ignore ? slice.call(args, ignore) : null; - } + Debug parameter you can turn on. This will log all bindings that fire to + the console. This should be disabled in production code. Note that you + can also enable this from the console or temporarily. - // Unfortunately in some browsers we lose the backtrace if we rethrow the existing error, - // so in the event that we don't have an `onerror` handler we don't wrap in a try/catch - if ('function' === typeof Ember.onerror) { - try { - // IE8's Function.prototype.apply doesn't accept undefined/null arguments. - return method.apply(target || this, args || []); - } catch (error) { - Ember.onerror(error); - } - } else { - // IE8's Function.prototype.apply doesn't accept undefined/null arguments. - return method.apply(target || this, args || []); - } -} + @type Boolean + @default false +*/ +Ember.LOG_BINDINGS = false || !!Ember.ENV.LOG_BINDINGS; +/** + @static -// .......................................................... -// RUNLOOP -// + Performance paramter. This will benchmark the time spent firing each + binding. -var timerMark; // used by timers... + @type Boolean +*/ +Ember.BENCHMARK_BINDING_NOTIFICATIONS = !!Ember.ENV.BENCHMARK_BINDING_NOTIFICATIONS; -/** @private */ -var K = function() {}; +/** + @static -/** @private */ -var RunLoop = function(prev) { - var self; - - if (this instanceof RunLoop) { - self = this; - } else { - self = new K(); - } + Performance parameter. This will benchmark the time spend configuring each + binding. - self._prev = prev || null; - self.onceTimers = {}; + @type Boolean +*/ +Ember.BENCHMARK_BINDING_SETUP = !!Ember.ENV.BENCHMARK_BINDING_SETUP; - return self; -}; -K.prototype = RunLoop.prototype; +/** + @static -RunLoop.prototype = { - end: function() { - this.flush(); - }, + Default placeholder for multiple values in bindings. - prev: function() { - return this._prev; - }, + @type String + @default '@@MULT@@' +*/ +Ember.MULTIPLE_PLACEHOLDER = '@@MULT@@'; - // .......................................................... - // Delayed Actions - // +/** + @static - schedule: function(queueName, target, method) { - var queues = this._queues, queue; - if (!queues) queues = this._queues = {}; - queue = queues[queueName]; - if (!queue) queue = queues[queueName] = []; + Default placeholder for empty values in bindings. Used by notEmpty() + helper unless you specify an alternative. - var args = arguments.length>3 ? slice.call(arguments, 3) : null; - queue.push({ target: target, method: method, args: args }); - return this; - }, + @type String + @default '@@EMPTY@@' +*/ +Ember.EMPTY_PLACEHOLDER = '@@EMPTY@@'; - flush: function(queueName) { - var queues = this._queues, queueNames, idx, len, queue, log; +// .......................................................... +// TYPE COERCION HELPERS +// - if (!queues) return this; // nothing to do +// Coerces a non-array value into an array. +/** @private */ +function MULTIPLE(val) { + if (val instanceof Array) return val; + if (val === undefined || val === null) return []; + return [val]; +} - function iter(item) { - invoke(item.target, item.method, item.args); - } +// Treats a single-element array as the element. Otherwise +// returns a placeholder. +/** @private */ +function SINGLE(val, placeholder) { + if (val instanceof Array) { + if (val.length>1) return placeholder; + else return val[0]; + } + return val; +} - Ember.watch.flushPending(); // make sure all chained watchers are setup +// Coerces the binding value into a Boolean. - if (queueName) { - while (this._queues && (queue = this._queues[queueName])) { - this._queues[queueName] = null; +var BOOL = { + to: function (val) { + return !!val; + } +}; - // the sync phase is to allow property changes to propogate. don't - // invoke observers until that is finished. - if (queueName === 'sync') { - log = Ember.LOG_BINDINGS; - if (log) Ember.Logger.log('Begin: Flush Sync Queue'); +// Returns the Boolean inverse of the value. +var NOT = { + to: function NOT(val) { + return !val; + } +}; - Ember.beginPropertyChanges(); - try { - forEach(queue, iter); - } finally { - Ember.endPropertyChanges(); - } +var get = Ember.get, + getPath = Ember.getPath, + setPath = Ember.setPath, + guidFor = Ember.guidFor, + isGlobalPath = Ember.isGlobalPath; - if (log) Ember.Logger.log('End: Flush Sync Queue'); +// Applies a binding's transformations against a value. +/** @private */ +function getTransformedValue(binding, val, obj, dir) { - } else { - forEach(queue, iter); - } - } + // First run a type transform, if it exists, that changes the fundamental + // type of the value. For example, some transforms convert an array to a + // single object. - } else { - queueNames = Ember.run.queues; - len = queueNames.length; - do { - this._queues = null; - for(idx=0;idx null + - [a] => a + - [a,b,c] => Multiple Placeholder + + You can pass in an optional multiple placeholder or it will use the + default. + + Note that this transform will only happen on forwarded valued. Reverse + values are send unchanged. + + @param {String} fromPath from path or null + @param {Object} [placeholder] Placeholder value. + @returns {Ember.Binding} this + */ + single: function(placeholder) { + if (placeholder===undefined) placeholder = Ember.MULTIPLE_PLACEHOLDER; + this._typeTransform = SINGLE; + this._placeholder = placeholder; + return this; + }, + + /** + Adds a transform that will convert the passed value to an array. If + the value is null or undefined, it will be converted to an empty array. + + @param {String} [fromPath] + @returns {Ember.Binding} this + */ + multiple: function() { + this._typeTransform = MULTIPLE; + this._placeholder = null; + return this; + }, + + /** + Adds a transform to convert the value to a bool value. If the value is + an array it will return true if array is not empty. If the value is a + string it will return true if the string is not empty. + + @returns {Ember.Binding} this + */ + bool: function() { + this.transform(BOOL); + return this; + }, + + /** + Adds a transform that will return the placeholder value if the value is + null, undefined, an empty array or an empty string. See also notNull(). + + @param {Object} [placeholder] Placeholder value. + @returns {Ember.Binding} this + */ + notEmpty: function(placeholder) { + if (placeholder === null || placeholder === undefined) { + placeholder = Ember.EMPTY_PLACEHOLDER; + } + + this.transform({ + to: function(val) { return empty(val) ? placeholder : val; } + }); + + return this; + }, + + /** + Adds a transform that will return the placeholder value if the value is + null or undefined. Otherwise it will passthrough untouched. See also notEmpty(). + + @param {String} fromPath from path or null + @param {Object} [placeholder] Placeholder value. + @returns {Ember.Binding} this + */ + notNull: function(placeholder) { + if (placeholder === null || placeholder === undefined) { + placeholder = Ember.EMPTY_PLACEHOLDER; + } + + this.transform({ + to: function(val) { return (val === null || val === undefined) ? placeholder : val; } + }); + + return this; + }, + + /** + Adds a transform to convert the value to the inverse of a bool value. This + uses the same transform as bool() but inverts it. + + @returns {Ember.Binding} this + */ + not: function() { + this.transform(NOT); + return this; + }, + + /** + Adds a transform that will return true if the value is null or undefined, false otherwise. + + @returns {Ember.Binding} this + */ + isNull: function() { + this.transform(function(val) { return val === null || val === undefined; }); + return this; + }, + + /** @private */ + toString: function() { + var oneWay = this._oneWay ? '[oneWay]' : ''; + return "Ember.Binding<" + guidFor(this) + ">(" + this._from + " -> " + this._to + ")" + oneWay; + }, + + // .......................................................... + // CONNECT AND SYNC + // + + /** + Attempts to connect this binding instance so that it can receive and relay + changes. This method will raise an exception if you have not set the + from/to properties yet. + + @param {Object} obj + The root object for this binding. + + @param {Boolean} preferFromParam + private: Normally, `connect` cannot take an object if `from` already set + an object. Internally, we would like to be able to provide a default object + to be used if no object was provided via `from`, so this parameter turns + off the assertion. + + @returns {Ember.Binding} this + */ + connect: function(obj) { + Ember.assert('Must pass a valid object to Ember.Binding.connect()', !!obj); + + var oneWay = this._oneWay, operand = this._operand; + + // add an observer on the object to be notified when the binding should be updated + Ember.addObserver(obj, this._from, this, this.fromDidChange); + + // if there is an operand, add an observer onto it as well + if (operand) { Ember.addObserver(obj, operand, this, this.fromDidChange); } + + // if the binding is a two-way binding, also set up an observer on the target + // object. + if (!oneWay) { Ember.addObserver(obj, this._to, this, this.toDidChange); } + + if (Ember.meta(obj,false).proto !== obj) { this._scheduleSync(obj, 'fwd'); } + + this._readyToSync = true; + return this; + }, + + /** + Disconnects the binding instance. Changes will no longer be relayed. You + will not usually need to call this method. + + @param {Object} obj + The root object you passed when connecting the binding. + + @returns {Ember.Binding} this + */ + disconnect: function(obj) { + Ember.assert('Must pass a valid object to Ember.Binding.disconnect()', !!obj); + + var oneWay = this._oneWay, operand = this._operand; + + // remove an observer on the object so we're no longer notified of + // changes that should update bindings. + Ember.removeObserver(obj, this._from, this, this.fromDidChange); + + // if there is an operand, remove the observer from it as well + if (operand) Ember.removeObserver(obj, operand, this, this.fromDidChange); + + // if the binding is two-way, remove the observer from the target as well + if (!oneWay) Ember.removeObserver(obj, this._to, this, this.toDidChange); + + this._readyToSync = false; // disable scheduled syncs... + return this; + }, + + // .......................................................... + // PRIVATE + // + + /** @private - called when the from side changes */ + fromDidChange: function(target) { + this._scheduleSync(target, 'fwd'); + }, + + /** @private - called when the to side changes */ + toDidChange: function(target) { + this._scheduleSync(target, 'back'); + }, + + /** @private */ + _scheduleSync: function(obj, dir) { + var guid = guidFor(obj), existingDir = this[guid]; + + // if we haven't scheduled the binding yet, schedule it + if (!existingDir) { + Ember.run.schedule('sync', this, this._sync, obj); + this[guid] = dir; + } + + // If both a 'back' and 'fwd' sync have been scheduled on the same object, + // default to a 'fwd' sync so that it remains deterministic. + if (existingDir === 'back' && dir === 'fwd') { + this[guid] = 'fwd'; + } + }, + + /** @private */ + _sync: function(obj) { + var log = Ember.LOG_BINDINGS; + + // don't synchronize destroyed objects or disconnected bindings + if (obj.isDestroyed || !this._readyToSync) { return; } + + // get the direction of the binding for the object we are + // synchronizing from + var guid = guidFor(obj), direction = this[guid]; + + var fromPath = this._from, toPath = this._to; + + delete this[guid]; + + // if we're synchronizing from the remote object... + if (direction === 'fwd') { + var fromValue = getTransformedFromValue(obj, this); + if (log) { + Ember.Logger.log(' ', this.toString(), '->', fromValue, obj); + } + if (this._oneWay) { + Ember.trySetPath(Ember.isGlobalPath(toPath) ? window : obj, toPath, fromValue); + } else { + Ember._suspendObserver(obj, toPath, this, this.toDidChange, function () { + Ember.trySetPath(Ember.isGlobalPath(toPath) ? window : obj, toPath, fromValue); + }); + } + // if we're synchronizing *to* the remote object + } else if (direction === 'back') {// && !this._oneWay) { + var toValue = getTransformedToValue(obj, this); + if (log) { + Ember.Logger.log(' ', this.toString(), '<-', toValue, obj); + } + Ember._suspendObserver(obj, fromPath, this, this.fromDidChange, function () { + Ember.trySetPath(Ember.isGlobalPath(fromPath) ? window : obj, fromPath, toValue); + }); + } + } + +}; + +/** @private */ +function mixinProperties(to, from) { + for (var key in from) { + if (from.hasOwnProperty(key)) { + to[key] = from[key]; + } + } +} + +mixinProperties(Binding, +/** @scope Ember.Binding */ { + + /** + @see Ember.Binding.prototype.from + */ + from: function() { + var C = this, binding = new C(); + return binding.from.apply(binding, arguments); + }, + + /** + @see Ember.Binding.prototype.to + */ + to: function() { + var C = this, binding = new C(); + return binding.to.apply(binding, arguments); + }, + + /** + @see Ember.Binding.prototype.oneWay + */ + oneWay: function(from, flag) { + var C = this, binding = new C(null, from); + return binding.oneWay(flag); + }, + + /** + @see Ember.Binding.prototype.single + */ + single: function(from, placeholder) { + var C = this, binding = new C(null, from); + return binding.single(placeholder); + }, + + /** + @see Ember.Binding.prototype.multiple + */ + multiple: function(from) { + var C = this, binding = new C(null, from); + return binding.multiple(); + }, + + /** + @see Ember.Binding.prototype.transform + */ + transform: function(from, func) { + if (!func) { + func = from; + from = null; + } + var C = this, binding = new C(null, from); + return binding.transform(func); + }, + + /** + @see Ember.Binding.prototype.notEmpty + */ + notEmpty: function(from, placeholder) { + var C = this, binding = new C(null, from); + return binding.notEmpty(placeholder); + }, + + /** + @see Ember.Binding.prototype.notNull + */ + notNull: function(from, placeholder) { + var C = this, binding = new C(null, from); + return binding.notNull(placeholder); + }, + + + /** + @see Ember.Binding.prototype.bool + */ + bool: function(from) { + var C = this, binding = new C(null, from); + return binding.bool(); + }, + + /** + @see Ember.Binding.prototype.not + */ + not: function(from) { + var C = this, binding = new C(null, from); + return binding.not(); + }, + + /** + @see Ember.Binding.prototype.isNull + */ + isNull: function(from) { + var C = this, binding = new C(null, from); + return binding.isNull(); + }, + + /** + Adds a transform that forwards the logical 'AND' of values at 'pathA' and + 'pathB' whenever either source changes. Note that the transform acts + strictly as a one-way binding, working only in the direction + + 'pathA' AND 'pathB' --> value (value returned is the result of ('pathA' && 'pathB')) + + Usage example where a delete button's `isEnabled` value is determined by + whether something is selected in a list and whether the current user is + allowed to delete: + + deleteButton: Ember.ButtonView.design({ + isEnabledBinding: Ember.Binding.and('MyApp.itemsController.hasSelection', 'MyApp.userController.canDelete') + }) + + @param {String} pathA The first part of the conditional + @param {String} pathB The second part of the conditional + */ + and: function(pathA, pathB) { + var C = this, binding = new C(null, pathA).oneWay(); + binding._operand = pathB; + binding._operation = AND_OPERATION; + return binding; + }, + + /** + Adds a transform that forwards the 'OR' of values at 'pathA' and + 'pathB' whenever either source changes. Note that the transform acts + strictly as a one-way binding, working only in the direction + + 'pathA' AND 'pathB' --> value (value returned is the result of ('pathA' || 'pathB')) + + @param {String} pathA The first part of the conditional + @param {String} pathB The second part of the conditional + */ + or: function(pathA, pathB) { + var C = this, binding = new C(null, pathA).oneWay(); + binding._operand = pathB; + binding._operation = OR_OPERATION; + return binding; + }, + + /** + Registers a custom transform for use in bindings. + + @param {String} name The name of the transform + @param {Function} transform The transformation function + */ + registerTransform: function(name, transform) { + this.prototype[name] = transform; + this[name] = function(from) { + var C = this, binding = new C(null, from), args; + args = Array.prototype.slice.call(arguments, 1); + return binding[name].apply(binding, args); + }; + } + +}); + +/** + @class + + A binding simply connects the properties of two objects so that whenever the + value of one property changes, the other property will be changed also. You + do not usually work with Binding objects directly but instead describe + bindings in your class definition using something like: + + valueBinding: "MyApp.someController.title" + + This will create a binding from `MyApp.someController.title` to the `value` + property of your object instance automatically. Now the two values will be + kept in sync. + + ## Customizing Your Bindings + + In addition to synchronizing values, bindings can also perform some basic + transforms on values. These transforms can help to make sure the data fed + into one object always meets the expectations of that object regardless of + what the other object outputs. + + To customize a binding, you can use one of the many helper methods defined + on Ember.Binding like so: + + valueBinding: Ember.Binding.single("MyApp.someController.title") + + This will create a binding just like the example above, except that now the + binding will convert the value of `MyApp.someController.title` to a single + object (removing any arrays) before applying it to the `value` property of + your object. + + You can also chain helper methods to build custom bindings like so: + + valueBinding: Ember.Binding.single("MyApp.someController.title").notEmpty("(EMPTY)") + + This will force the value of MyApp.someController.title to be a single value + and then check to see if the value is "empty" (null, undefined, empty array, + or an empty string). If it is empty, the value will be set to the string + "(EMPTY)". + + ## One Way Bindings + + One especially useful binding customization you can use is the `oneWay()` + helper. This helper tells Ember that you are only interested in + receiving changes on the object you are binding from. For example, if you + are binding to a preference and you want to be notified if the preference + has changed, but your object will not be changing the preference itself, you + could do: + + bigTitlesBinding: Ember.Binding.oneWay("MyApp.preferencesController.bigTitles") + + This way if the value of MyApp.preferencesController.bigTitles changes the + "bigTitles" property of your object will change also. However, if you + change the value of your "bigTitles" property, it will not update the + preferencesController. + + One way bindings are almost twice as fast to setup and twice as fast to + execute because the binding only has to worry about changes to one side. + + You should consider using one way bindings anytime you have an object that + may be created frequently and you do not intend to change a property; only + to monitor it for changes. (such as in the example above). + + ## Adding Custom Transforms + + In addition to using the standard helpers provided by Ember, you can + also defined your own custom transform functions which will be used to + convert the value. To do this, just define your transform function and add + it to the binding with the transform() helper. The following example will + not allow Integers less than ten. Note that it checks the value of the + bindings and allows all other values to pass: + + valueBinding: Ember.Binding.transform(function(value, binding) { + return ((Ember.typeOf(value) === 'number') && (value < 10)) ? 10 : value; + }).from("MyApp.someController.value") + + If you would like to instead use this transform on a number of bindings, + you can also optionally add your own helper method to Ember.Binding. This + method should simply return the value of `this.transform()`. The example + below adds a new helper called `notLessThan()` which will limit the value to + be not less than the passed minimum: + + Ember.Binding.registerTransform('notLessThan', function(minValue) { + return this.transform(function(value, binding) { + return ((Ember.typeOf(value) === 'number') && (value < minValue)) ? minValue : value; + }); + }); + + You could specify this in your core.js file, for example. Then anywhere in + your application you can use it to define bindings like so: + + valueBinding: Ember.Binding.from("MyApp.someController.value").notLessThan(10) + + Also, remember that helpers are chained so you can use your helper along + with any other helpers. The example below will create a one way binding that + does not allow empty values or values less than 10: + + valueBinding: Ember.Binding.oneWay("MyApp.someController.value").notEmpty().notLessThan(10) + + Finally, it's also possible to specify bi-directional transforms. To do this, + you can pass a hash to `transform` with `to` and `from`. In the following + example, we are expecting a lowercase string that we want to transform to + uppercase. + + valueBinding: Ember.Binding.transform({ + to: function(value, binding) { return value.toUpperCase(); }, + from: function(value, binding) { return value.toLowerCase(); } + + ## How to Manually Adding Binding + + All of the examples above show you how to configure a custom binding, but + the result of these customizations will be a binding template, not a fully + active binding. The binding will actually become active only when you + instantiate the object the binding belongs to. It is useful however, to + understand what actually happens when the binding is activated. + + For a binding to function it must have at least a "from" property and a "to" + property. The from property path points to the object/key that you want to + bind from while the to path points to the object/key you want to bind to. + + When you define a custom binding, you are usually describing the property + you want to bind from (such as "MyApp.someController.value" in the examples + above). When your object is created, it will automatically assign the value + you want to bind "to" based on the name of your binding key. In the + examples above, during init, Ember objects will effectively call + something like this on your binding: + + binding = Ember.Binding.from(this.valueBinding).to("value"); + + This creates a new binding instance based on the template you provide, and + sets the to path to the "value" property of the new object. Now that the + binding is fully configured with a "from" and a "to", it simply needs to be + connected to become active. This is done through the connect() method: + + binding.connect(this); + + Note that when you connect a binding you pass the object you want it to be + connected to. This object will be used as the root for both the from and + to side of the binding when inspecting relative paths. This allows the + binding to be automatically inherited by subclassed objects as well. + + Now that the binding is connected, it will observe both the from and to side + and relay changes. + + If you ever needed to do so (you almost never will, but it is useful to + understand this anyway), you could manually create an active binding by + using the Ember.bind() helper method. (This is the same method used by + to setup your bindings on objects): + + Ember.bind(MyApp.anotherObject, "value", "MyApp.someController.value"); + + Both of these code fragments have the same effect as doing the most friendly + form of binding creation like so: + + MyApp.anotherObject = Ember.Object.create({ + valueBinding: "MyApp.someController.value", + + // OTHER CODE FOR THIS OBJECT... + + }); + + Ember's built in binding creation method makes it easy to automatically + create bindings for you. You should always use the highest-level APIs + available, even if you understand how it works underneath. + + @since Ember 0.9 +*/ +Ember.Binding = Binding; + +/** + Global helper method to create a new binding. Just pass the root object + along with a to and from path to create and connect the binding. The new + binding object will be returned which you can further configure with + transforms and other conditions. + + @param {Object} obj + The root object of the transform. + + @param {String} to + The path to the 'to' side of the binding. Must be relative to obj. + + @param {String} from + The path to the 'from' side of the binding. Must be relative to obj or + a global path. + + @returns {Ember.Binding} binding instance +*/ +Ember.bind = function(obj, to, from) { + return new Ember.Binding(to, from).connect(obj); +}; + +Ember.oneWay = function(obj, to, from) { + return new Ember.Binding(to, from).oneWay().connect(obj); +}; + +})(); + + + +(function() { +// ========================================================================== +// Project: Ember Runtime +// Copyright: ©2011 Strobe Inc. and contributors. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +var Mixin, MixinDelegate, REQUIRED, Alias; +var classToString, superClassString; + +var a_map = Ember.ArrayUtils.map; +var a_indexOf = Ember.ArrayUtils.indexOf; +var a_forEach = Ember.ArrayUtils.forEach; +var a_slice = Array.prototype.slice; +var EMPTY_META = {}; // dummy for non-writable meta +var META_SKIP = { __emberproto__: true, __ember_count__: true }; + +var o_create = Ember.platform.create; + +/** @private */ +function meta(obj, writable) { + var m = Ember.meta(obj, writable!==false), ret = m.mixins; + if (writable===false) return ret || EMPTY_META; + + if (!ret) { + ret = m.mixins = { __emberproto__: obj }; + } else if (ret.__emberproto__ !== obj) { + ret = m.mixins = o_create(ret); + ret.__emberproto__ = obj; + } + return ret; +} + +/** @private */ +function initMixin(mixin, args) { + if (args && args.length > 0) { + mixin.mixins = a_map(args, function(x) { + if (x instanceof Mixin) return x; + + // Note: Manually setup a primitive mixin here. This is the only + // way to actually get a primitive mixin. This way normal creation + // of mixins will give you combined mixins... + var mixin = new Mixin(); + mixin.properties = x; + return mixin; + }); + } + return mixin; +} + +var NATIVES = [Boolean, Object, Number, Array, Date, String]; +/** @private */ +function isMethod(obj) { + if ('function' !== typeof obj || obj.isMethod===false) return false; + return a_indexOf(NATIVES, obj)<0; +} + +/** @private */ +function mergeMixins(mixins, m, descs, values, base) { + var len = mixins.length, idx, mixin, guid, props, value, key, ovalue, concats; + + /** @private */ + function removeKeys(keyName) { + delete descs[keyName]; + delete values[keyName]; + } + + for(idx=0;idx=0) || key === 'concatenatedProperties') { + var baseValue = values[key] || base[key]; + value = baseValue ? baseValue.concat(value) : Ember.makeArray(value); + } + + descs[key] = Ember.SIMPLE_PROPERTY; + values[key] = value; + } + } + + // manually copy toString() because some JS engines do not enumerate it + if (props.hasOwnProperty('toString')) { + base.toString = props.toString; + } + + } else if (mixin.mixins) { + mergeMixins(mixin.mixins, m, descs, values, base); + if (mixin._without) a_forEach(mixin._without, removeKeys); + } + } +} + +/** @private */ +var defineProperty = Ember.defineProperty; + +/** @private */ +function writableReq(obj) { + var m = Ember.meta(obj), req = m.required; + if (!req || (req.__emberproto__ !== obj)) { + req = m.required = req ? o_create(req) : { __ember_count__: 0 }; + req.__emberproto__ = obj; + } + return req; +} + +/** @private */ +function getObserverPaths(value) { + return ('function' === typeof value) && value.__ember_observes__; +} + +/** @private */ +function getBeforeObserverPaths(value) { + return ('function' === typeof value) && value.__ember_observesBefore__; +} + +var IS_BINDING = Ember.IS_BINDING = /^.+Binding$/; + +function detectBinding(obj, key, m) { + if (IS_BINDING.test(key)) { + var bindings = m.bindings; + if (!bindings) { + bindings = m.bindings = { __emberproto__: obj }; + } else if (bindings.__emberproto__ !== obj) { + bindings = m.bindings = o_create(m.bindings); + bindings.__emberproto__ = obj; + } + bindings[key] = true; + } +} + +function connectBindings(obj, m) { + if (m === undefined) { + m = Ember.meta(obj); + } + var bindings = m.bindings, key, binding; + if (bindings) { + for (key in bindings) { + binding = key !== '__emberproto__' && obj[key]; + if (binding) { + if (binding instanceof Ember.Binding) { + binding = binding.copy(); // copy prototypes' instance + binding.to(key.slice(0, -7)); + } else { + binding = new Ember.Binding(key.slice(0,-7), binding); + } + binding.connect(obj); + obj[key] = binding; + } + } + } +} + +/** @private */ +function applyMixin(obj, mixins, partial) { + var descs = {}, values = {}, m = Ember.meta(obj), req = m.required; + var key, willApply, didApply, value, desc; + + // Go through all mixins and hashes passed in, and: + // + // * Handle concatenated properties + // * Set up _super wrapping if necessary + // * Set up descriptors (simple, watched or computed properties) + // * Copying `toString` in broken browsers + mergeMixins(mixins, meta(obj), descs, values, obj); + + if (MixinDelegate.detect(obj)) { + willApply = values.willApplyProperty || obj.willApplyProperty; + didApply = values.didApplyProperty || obj.didApplyProperty; + } + + for(key in descs) { + if (!descs.hasOwnProperty(key)) continue; + + desc = descs[key]; + value = values[key]; + + if (desc === REQUIRED) { + if (!(key in obj)) { + if (!partial) throw new Error('Required property not defined: '+key); + + // for partial applies add to hash of required keys + req = writableReq(obj); + req.__ember_count__++; + req[key] = true; + } + + } else { + + while (desc instanceof Alias) { + + var altKey = desc.methodName; + if (descs[altKey]) { + value = values[altKey]; + desc = descs[altKey]; + } else if (m.descs[altKey]) { + desc = m.descs[altKey]; + value = desc.val(obj, altKey); + } else { + value = obj[altKey]; + desc = Ember.SIMPLE_PROPERTY; + } + } + + if (willApply) willApply.call(obj, key); + + var observerPaths = getObserverPaths(value), + curObserverPaths = observerPaths && getObserverPaths(obj[key]), + beforeObserverPaths = getBeforeObserverPaths(value), + curBeforeObserverPaths = beforeObserverPaths && getBeforeObserverPaths(obj[key]), + len, idx; + + if (curObserverPaths) { + len = curObserverPaths.length; + for(idx=0;idx0) { + var keys = []; + for(key in req) { + if (META_SKIP[key]) continue; + keys.push(key); + } + throw new Error('Required properties not defined: '+keys.join(',')); + } + return obj; +} + +Ember.mixin = function(obj) { + var args = a_slice.call(arguments, 1); + return applyMixin(obj, args, false); +}; + + +/** + @constructor */ -Ember.run.begin = function() { - run.currentRunLoop = new RunLoop(run.currentRunLoop); +Ember.Mixin = function() { return initMixin(this, arguments); }; + +/** @private */ +Mixin = Ember.Mixin; + +/** @private */ +Mixin._apply = applyMixin; + +Mixin.applyPartial = function(obj) { + var args = a_slice.call(arguments, 1); + return applyMixin(obj, args, true); +}; + +Mixin.finishPartial = function(obj) { + connectBindings(obj); + return obj; +}; + +Mixin.create = function() { + classToString.processed = false; + var M = this; + return initMixin(new M(), arguments); +}; + +Mixin.prototype.reopen = function() { + + var mixin, tmp; + + if (this.properties) { + mixin = Mixin.create(); + mixin.properties = this.properties; + delete this.properties; + this.mixins = [mixin]; + } + + var len = arguments.length, mixins = this.mixins, idx; + + for(idx=0;idx= 0) { + if (_detect(mixins[loc], targetMixin, seen)) return true; + } + return false; +} + +Mixin.prototype.detect = function(obj) { + if (!obj) return false; + if (obj instanceof Mixin) return _detect(obj, this, {}); + return !!meta(obj, false)[Ember.guidFor(this)]; }; +Mixin.prototype.without = function() { + var ret = new Mixin(this); + ret._without = a_slice.call(arguments); + return ret; +}; + +/** @private */ +function _keys(ret, mixin, seen) { + if (seen[Ember.guidFor(mixin)]) return; + seen[Ember.guidFor(mixin)] = true; + + if (mixin.properties) { + var props = mixin.properties; + for(var key in props) { + if (props.hasOwnProperty(key)) ret[key] = true; + } + } else if (mixin.mixins) { + a_forEach(mixin.mixins, function(x) { _keys(ret, x, seen); }); + } +} + +Mixin.prototype.keys = function() { + var keys = {}, seen = {}, ret = []; + _keys(keys, this, seen); + for(var key in keys) { + if (keys.hasOwnProperty(key)) ret.push(key); + } + return ret; +}; + +/** @private - make Mixin's have nice displayNames */ + +var NAME_KEY = Ember.GUID_KEY+'_name'; +var get = Ember.get; + +/** @private */ +function processNames(paths, root, seen) { + var idx = paths.length; + for(var key in root) { + if (!root.hasOwnProperty || !root.hasOwnProperty(key)) continue; + var obj = root[key]; + paths[idx] = key; + + if (obj && obj.toString === classToString) { + obj[NAME_KEY] = paths.join('.'); + } else if (obj && get(obj, 'isNamespace')) { + if (seen[Ember.guidFor(obj)]) continue; + seen[Ember.guidFor(obj)] = true; + processNames(paths, obj, seen); + } + + } + paths.length = idx; // cut out last item +} + +/** @private */ +function findNamespaces() { + var Namespace = Ember.Namespace, obj, isNamespace; + + if (Namespace.PROCESSED) { return; } + + for (var prop in window) { + // get(window.globalStorage, 'isNamespace') would try to read the storage for domain isNamespace and cause exception in Firefox. + // globalStorage is a storage obsoleted by the WhatWG storage specification. See https://developer.mozilla.org/en/DOM/Storage#globalStorage + if (prop === "globalStorage" && window.StorageList && window.globalStorage instanceof window.StorageList) { continue; } + // Unfortunately, some versions of IE don't support window.hasOwnProperty + if (window.hasOwnProperty && !window.hasOwnProperty(prop)) { continue; } + + // At times we are not allowed to access certain properties for security reasons. + // There are also times where even if we can access them, we are not allowed to access their properties. + try { + obj = window[prop]; + isNamespace = obj && get(obj, 'isNamespace'); + } catch (e) { + continue; + } + + if (isNamespace) { + Ember.deprecate("Namespaces should not begin with lowercase.", /^[A-Z]/.test(prop)); + obj[NAME_KEY] = prop; + } + } +} + +Ember.identifyNamespaces = findNamespaces; + +/** @private */ +superClassString = function(mixin) { + var superclass = mixin.superclass; + if (superclass) { + if (superclass[NAME_KEY]) { return superclass[NAME_KEY]; } + else { return superClassString(superclass); } + } else { + return; + } +}; + +/** @private */ +classToString = function() { + var Namespace = Ember.Namespace, namespace; + + // TODO: Namespace should really be in Metal + if (Namespace) { + if (!this[NAME_KEY] && !classToString.processed) { + if (!Namespace.PROCESSED) { + findNamespaces(); + Namespace.PROCESSED = true; + } + + classToString.processed = true; + + var namespaces = Namespace.NAMESPACES; + for (var i=0, l=namespaces.length; i 'undefined' + Ember.typeOf(null); => 'null' + Ember.typeOf(undefined); => 'undefined' + Ember.typeOf('michael'); => 'string' + Ember.typeOf(101); => 'number' + Ember.typeOf(true); => 'boolean' + Ember.typeOf(Ember.makeArray); => 'function' + Ember.typeOf([1,2,90]); => 'array' + Ember.typeOf(Ember.Object.extend()); => 'class' + Ember.typeOf(Ember.Object.create()); => 'instance' + Ember.typeOf(new Error('teamocil')); => 'error' + + // "normal" JavaScript object + Ember.typeOf({a: 'b'}); => 'object' + + @param item {Object} the item to check + @returns {String} the type */ -Ember.run.end = function() { - ember_assert('must have a current run loop', run.currentRunLoop); - try { - run.currentRunLoop.end(); - } - finally { - run.currentRunLoop = run.currentRunLoop.prev(); +Ember.typeOf = function(item) { + var ret; + + ret = (item === null || item === undefined) ? String(item) : TYPE_MAP[toString.call(item)] || 'object'; + + if (ret === 'function') { + if (Ember.Object && Ember.Object.detect(item)) ret = 'class'; + } else if (ret === 'object') { + if (item instanceof Error) ret = 'error'; + else if (Ember.Object && item instanceof Ember.Object) ret = 'instance'; + else ret = 'object'; } + + return ret; }; /** - Array of named queues. This array determines the order in which queues - are flushed at the end of the RunLoop. You can define your own queues by - simply adding the queue name to this array. Normally you should not need - to inspect or modify this property. + Returns true if the passed value is null or undefined. This avoids errors + from JSLint complaining about use of ==, which can be technically + confusing. - @property {String} + Ember.none(); => true + Ember.none(null); => true + Ember.none(undefined); => true + Ember.none(''); => false + Ember.none([]); => false + Ember.none(function(){}); => false + + @param {Object} obj Value to test + @returns {Boolean} */ -Ember.run.queues = ['sync', 'actions', 'destroy', 'timers']; +Ember.none = function(obj) { + return obj === null || obj === undefined; +}; /** - Adds the passed target/method and any optional arguments to the named - queue to be executed at the end of the RunLoop. If you have not already - started a RunLoop when calling this method one will be started for you - automatically. + Verifies that a value is null or an empty string | array | function. - At the end of a RunLoop, any methods scheduled in this way will be invoked. - Methods will be invoked in an order matching the named queues defined in - the run.queues property. + Constrains the rules on `Ember.none` by returning false for empty + string and empty arrays. - @param {String} queue - The name of the queue to schedule against. Default queues are 'sync' and - 'actions' + Ember.empty(); => true + Ember.empty(null); => true + Ember.empty(undefined); => true + Ember.empty(''); => true + Ember.empty([]); => true + Ember.empty('tobias fünke'); => false + Ember.empty([0,1,2]); => false - @param {Object} target - (Optional) target object to use as the context when invoking a method. + @param {Object} obj Value to test + @returns {Boolean} +*/ +Ember.empty = function(obj) { + return obj === null || obj === undefined || (obj.length === 0 && typeof obj !== 'function'); +}; - @param {String|Function} method - The method to invoke. If you pass a string it will be resolved on the - target object at the time the scheduled item is invoked allowing you to - change the target function. +/** + This will compare two javascript values of possibly different types. + It will tell you which one is greater than the other by returning: - @param {Object} arguments... - Optional arguments to be passed to the queued method. + - -1 if the first is smaller than the second, + - 0 if both are equal, + - 1 if the first is greater than the second. - @returns {void} + The order is calculated based on Ember.ORDER_DEFINITION, if types are different. + In case they have the same type an appropriate comparison for this type is made. + + Ember.compare('hello', 'hello'); => 0 + Ember.compare('abc', 'dfg'); => -1 + Ember.compare(2, 1); => 1 + + @param {Object} v First value to compare + @param {Object} w Second value to compare + @returns {Number} -1 if v < w, 0 if v = w and 1 if v > w. */ -Ember.run.schedule = function(queue, target, method) { - var loop = run.autorun(); - loop.schedule.apply(loop, arguments); -}; +Ember.compare = function compare(v, w) { + if (v === w) { return 0; } -var autorunTimer; + var type1 = Ember.typeOf(v); + var type2 = Ember.typeOf(w); + + var Comparable = Ember.Comparable; + if (Comparable) { + if (type1==='instance' && Comparable.detect(v.constructor)) { + return v.constructor.compare(v, w); + } + + if (type2 === 'instance' && Comparable.detect(w.constructor)) { + return 1-w.constructor.compare(w, v); + } + } + + // If we haven't yet generated a reverse-mapping of Ember.ORDER_DEFINITION, + // do so now. + var mapping = Ember.ORDER_DEFINITION_MAPPING; + if (!mapping) { + var order = Ember.ORDER_DEFINITION; + mapping = Ember.ORDER_DEFINITION_MAPPING = {}; + var idx, len; + for (idx = 0, len = order.length; idx < len; ++idx) { + mapping[order[idx]] = idx; + } + + // We no longer need Ember.ORDER_DEFINITION. + delete Ember.ORDER_DEFINITION; + } + + var type1Index = mapping[type1]; + var type2Index = mapping[type2]; + + if (type1Index < type2Index) { return -1; } + if (type1Index > type2Index) { return 1; } + + // types are equal - so we have to check values now + switch (type1) { + case 'boolean': + case 'number': + if (v < w) { return -1; } + if (v > w) { return 1; } + return 0; + + case 'string': + var comp = v.localeCompare(w); + if (comp < 0) { return -1; } + if (comp > 0) { return 1; } + return 0; + + case 'array': + var vLen = v.length; + var wLen = w.length; + var l = Math.min(vLen, wLen); + var r = 0; + var i = 0; + while (r === 0 && i < l) { + r = compare(v[i],w[i]); + i++; + } + if (r !== 0) { return r; } + + // all elements are equal now + // shorter array should be ordered first + if (vLen < wLen) { return -1; } + if (vLen > wLen) { return 1; } + // arrays are equal now + return 0; + + case 'instance': + if (Ember.Comparable && Ember.Comparable.detect(v)) { + return v.compare(v, w); + } + return 0; + + default: + return 0; + } +}; /** @private */ -function autorun() { - autorunTimer = null; - if (run.currentRunLoop) run.end(); -} +function _copy(obj, deep, seen, copies) { + var ret, loc, key; -/** - Begins a new RunLoop if necessary and schedules a timer to flush the - RunLoop at a later time. This method is used by parts of Ember to - ensure the RunLoop always finishes. You normally do not need to call this - method directly. Instead use Ember.run(). + // primitive data types are immutable, just return them. + if ('object' !== typeof obj || obj===null) return obj; - @returns {Ember.RunLoop} the new current RunLoop -*/ -Ember.run.autorun = function() { + // avoid cyclical loops + if (deep && (loc=indexOf(seen, obj))>=0) return copies[loc]; - if (!run.currentRunLoop) { - run.begin(); + Ember.assert('Cannot clone an Ember.Object that does not implement Ember.Copyable', !(obj instanceof Ember.Object) || (Ember.Copyable && Ember.Copyable.detect(obj))); - // TODO: throw during tests - if (Ember.testing) { - run.end(); - } else if (!autorunTimer) { - autorunTimer = setTimeout(autorun, 1); + // IMPORTANT: this specific test will detect a native array only. Any other + // object will need to implement Copyable. + if (Ember.typeOf(obj) === 'array') { + ret = obj.slice(); + if (deep) { + loc = ret.length; + while(--loc>=0) ret[loc] = _copy(ret[loc], deep, seen, copies); + } + } else if (Ember.Copyable && Ember.Copyable.detect(obj)) { + ret = obj.copy(deep, seen, copies); + } else { + ret = {}; + for(key in obj) { + if (!obj.hasOwnProperty(key)) continue; + ret[key] = deep ? _copy(obj[key], deep, seen, copies) : obj[key]; } } - return run.currentRunLoop; -}; + if (deep) { + seen.push(obj); + copies.push(ret); + } + + return ret; +} /** - Immediately flushes any events scheduled in the 'sync' queue. Bindings - use this queue so this method is a useful way to immediately force all - bindings in the application to sync. + Creates a clone of the passed object. This function can take just about + any type of object and create a clone of it, including primitive values + (which are not actually cloned because they are immutable). - You should call this method anytime you need any changed state to propogate - throughout the app immediately without repainting the UI. + If the passed object implements the clone() method, then this function + will simply call that method and return the result. - @returns {void} + @param {Object} object The object to clone + @param {Boolean} deep If true, a deep copy of the object is made + @returns {Object} The cloned object */ -Ember.run.sync = function() { - run.autorun(); - run.currentRunLoop.flush('sync'); +Ember.copy = function(obj, deep) { + // fast paths + if ('object' !== typeof obj || obj===null) return obj; // can't copy primitives + if (Ember.Copyable && Ember.Copyable.detect(obj)) return obj.copy(deep); + return _copy(obj, deep, deep ? [] : null, deep ? [] : null); }; -// .......................................................... -// TIMERS -// - -var timers = {}; // active timers... +/** + Convenience method to inspect an object. This method will attempt to + convert the object into a useful string description. -var laterScheduled = false; -/** @private */ -function invokeLaterTimers() { - var now = (+ new Date()), earliest = -1; - for(var key in timers) { - if (!timers.hasOwnProperty(key)) continue; - var timer = timers[key]; - if (timer && timer.expires) { - if (now >= timer.expires) { - delete timers[key]; - invoke(timer.target, timer.method, timer.args, 2); - } else { - if (earliest<0 || (timer.expires < earliest)) earliest=timer.expires; - } + @param {Object} obj The object you want to inspect. + @returns {String} A description of the object +*/ +Ember.inspect = function(obj) { + var v, ret = []; + for(var key in obj) { + if (obj.hasOwnProperty(key)) { + v = obj[key]; + if (v === 'toString') { continue; } // ignore useless items + if (Ember.typeOf(v) === 'function') { v = "function() { ... }"; } + ret.push(key + ": " + v); } } - - // schedule next timeout to fire... - if (earliest>0) setTimeout(invokeLaterTimers, earliest-(+ new Date())); -} + return "{" + ret.join(" , ") + "}"; +}; /** - Invokes the passed target/method and optional arguments after a specified - period if time. The last parameter of this method must always be a number - of milliseconds. - - You should use this method whenever you need to run some action after a - period of time inside of using setTimeout(). This method will ensure that - items that expire during the same script execution cycle all execute - together, which is often more efficient than using a real setTimeout. - - @param {Object} target - (optional) target of method to invoke - - @param {Function|String} method - The method to invoke. If you pass a string it will be resolved on the - target at the time the method is invoked. - - @param {Object...} args - Optional arguments to pass to the timeout. + Compares two objects, returning true if they are logically equal. This is + a deeper comparison than a simple triple equal. For sets it will compare the + internal objects. For any other object that implements `isEqual()` it will + respect that method. - @param {Number} wait - Number of milliseconds to wait. + Ember.isEqual('hello', 'hello'); => true + Ember.isEqual(1, 2); => false + Ember.isEqual([4,2], [4,2]); => false - @returns {Timer} an object you can use to cancel a timer at a later time. + @param {Object} a first object to compare + @param {Object} b second object to compare + @returns {Boolean} */ -Ember.run.later = function(target, method) { - var args, expires, timer, guid, wait; - - // setTimeout compatibility... - if (arguments.length===2 && 'function' === typeof target) { - wait = method; - method = target; - target = undefined; - args = [target, method]; - - } else { - args = slice.call(arguments); - wait = args.pop(); - } - - expires = (+ new Date())+wait; - timer = { target: target, method: method, expires: expires, args: args }; - guid = Ember.guidFor(timer); - timers[guid] = timer; - run.once(timers, invokeLaterTimers); - return guid; +Ember.isEqual = function(a, b) { + if (a && 'function'===typeof a.isEqual) return a.isEqual(b); + return a === b; }; -/** @private */ -function invokeOnceTimer(guid, onceTimers) { - if (onceTimers[this.tguid]) delete onceTimers[this.tguid][this.mguid]; - if (timers[guid]) invoke(this.target, this.method, this.args, 2); - delete timers[guid]; -} - /** - Schedules an item to run one time during the current RunLoop. Calling - this method with the same target/method combination will have no effect. + @private + Used by Ember.compare +*/ +Ember.ORDER_DEFINITION = Ember.ENV.ORDER_DEFINITION || [ + 'undefined', + 'null', + 'boolean', + 'number', + 'string', + 'array', + 'object', + 'instance', + 'function', + 'class' +]; - Note that although you can pass optional arguments these will not be - considered when looking for duplicates. New arguments will replace previous - calls. +/** + Returns all of the keys defined on an object or hash. This is useful + when inspecting objects for debugging. On browsers that support it, this + uses the native Object.keys implementation. - @param {Object} target - (optional) target of method to invoke + @function + @param {Object} obj + @returns {Array} Array containing keys of obj +*/ +Ember.keys = Object.keys; - @param {Function|String} method - The method to invoke. If you pass a string it will be resolved on the - target at the time the method is invoked. +if (!Ember.keys) { + Ember.keys = function(obj) { + var ret = []; + for(var key in obj) { + if (obj.hasOwnProperty(key)) { ret.push(key); } + } + return ret; + }; +} - @param {Object...} args - Optional arguments to pass to the timeout. +// .......................................................... +// ERROR +// +/** + @class - @returns {Object} timer + A subclass of the JavaScript Error object for use in Ember. */ -Ember.run.once = function(target, method) { - var tguid = Ember.guidFor(target), mguid = Ember.guidFor(method), guid, timer; - - var onceTimers = run.autorun().onceTimers; - guid = onceTimers[tguid] && onceTimers[tguid][mguid]; - if (guid && timers[guid]) { - timers[guid].args = slice.call(arguments); // replace args +Ember.Error = function() { + var tmp = Error.prototype.constructor.apply(this, arguments); - } else { - timer = { - target: target, - method: method, - args: slice.call(arguments), - tguid: tguid, - mguid: mguid - }; + for (var p in tmp) { + if (tmp.hasOwnProperty(p)) { this[p] = tmp[p]; } + } + this.message = tmp.message; +}; - guid = Ember.guidFor(timer); - timers[guid] = timer; - if (!onceTimers[tguid]) onceTimers[tguid] = {}; - onceTimers[tguid][mguid] = guid; // so it isn't scheduled more than once +Ember.Error.prototype = Ember.create(Error.prototype); - run.schedule('actions', timer, invokeOnceTimer, guid, onceTimers); - } +})(); - return guid; -}; -var scheduledNext = false; -/** @private */ -function invokeNextTimers() { - scheduledNext = null; - for(var key in timers) { - if (!timers.hasOwnProperty(key)) continue; - var timer = timers[key]; - if (timer.next) { - delete timers[key]; - invoke(timer.target, timer.method, timer.args, 2); - } - } -} -/** - Schedules an item to run after control has been returned to the system. - This is often equivalent to calling setTimeout(function...,1). +(function() { +// ========================================================================== +// Project: Ember Runtime +// Copyright: ©2011 Strobe Inc. +// License: Licensed under MIT license (see license.js) +// ========================================================================== - @param {Object} target - (optional) target of method to invoke +/** @private **/ +var STRING_DASHERIZE_REGEXP = (/[ _]/g); +var STRING_DASHERIZE_CACHE = {}; +var STRING_DECAMELIZE_REGEXP = (/([a-z])([A-Z])/g); +var STRING_CAMELIZE_REGEXP = (/(\-|_|\s)+(.)?/g); +var STRING_UNDERSCORE_REGEXP_1 = (/([a-z\d])([A-Z]+)/g); +var STRING_UNDERSCORE_REGEXP_2 = (/\-|\s+/g); - @param {Function|String} method - The method to invoke. If you pass a string it will be resolved on the - target at the time the method is invoked. +/** + Defines the hash of localized strings for the current language. Used by + the `Ember.String.loc()` helper. To localize, add string values to this + hash. - @param {Object...} args - Optional arguments to pass to the timeout. + @property {String} +*/ +Ember.STRINGS = {}; - @returns {Object} timer +/** + Defines string helper methods including string formatting and localization. + Unless Ember.EXTEND_PROTOTYPES = false these methods will also be added to the + String.prototype as well. + + @namespace */ -Ember.run.next = function(target, method) { - var timer, guid; +Ember.String = { - timer = { - target: target, - method: method, - args: slice.call(arguments), - next: true - }; + /** + Apply formatting options to the string. This will look for occurrences + of %@ in your string and substitute them with the arguments you pass into + this method. If you want to control the specific order of replacement, + you can add a number after the key as well to indicate which argument + you want to insert. - guid = Ember.guidFor(timer); - timers[guid] = timer; + Ordered insertions are most useful when building loc strings where values + you need to insert may appear in different orders. - if (!scheduledNext) scheduledNext = setTimeout(invokeNextTimers, 1); - return guid; -}; + "Hello %@ %@".fmt('John', 'Doe') => "Hello John Doe" + "Hello %@2, %@1".fmt('John', 'Doe') => "Hello Doe, John" -/** - Cancels a scheduled item. Must be a value returned by `Ember.run.later()`, - `Ember.run.once()`, or `Ember.run.next()`. + @param {Object...} [args] + @returns {String} formatted string + */ + fmt: function(str, formats) { + // first, replace any ORDERED replacements. + var idx = 0; // the current index for non-numerical replacements + return str.replace(/%@([0-9]+)?/g, function(s, argIndex) { + argIndex = (argIndex) ? parseInt(argIndex,0) - 1 : idx++ ; + s = formats[argIndex]; + return ((s === null) ? '(null)' : (s === undefined) ? '' : s).toString(); + }) ; + }, - @param {Object} timer - Timer object to cancel + /** + Formats the passed string, but first looks up the string in the localized + strings hash. This is a convenient way to localize text. See + `Ember.String.fmt()` for more information on formatting. - @returns {void} -*/ -Ember.run.cancel = function(timer) { - delete timers[timer]; -}; + Note that it is traditional but not required to prefix localized string + keys with an underscore or other character so you can easily identify + localized strings. -// .......................................................... -// DEPRECATED API -// + Ember.STRINGS = { + '_Hello World': 'Bonjour le monde', + '_Hello %@ %@': 'Bonjour %@ %@' + }; -/** - @namespace - @name Ember.RunLoop - @deprecated - @description Compatibility for Ember.run -*/ + Ember.String.loc("_Hello World"); + => 'Bonjour le monde'; -/** - @deprecated - @method + Ember.String.loc("_Hello %@ %@", ["John", "Smith"]); + => "Bonjour John Smith"; - Use `#js:Ember.run.begin()` instead -*/ -Ember.RunLoop.begin = ember_deprecateFunc("Use Ember.run.begin instead of Ember.RunLoop.begin.", Ember.run.begin); + @param {String} str + The string to format -/** - @deprecated - @method + @param {Array} formats + Optional array of parameters to interpolate into string. - Use `#js:Ember.run.end()` instead -*/ -Ember.RunLoop.end = ember_deprecateFunc("Use Ember.run.end instead of Ember.RunLoop.end.", Ember.run.end); + @returns {String} formatted string + */ + loc: function(str, formats) { + str = Ember.STRINGS[str] || str; + return Ember.String.fmt(str, formats) ; + }, + /** + Splits a string into separate units separated by spaces, eliminating any + empty strings in the process. This is a convenience method for split that + is mostly useful when applied to the String.prototype. + Ember.String.w("alpha beta gamma").forEach(function(key) { + console.log(key); + }); + > alpha + > beta + > gamma -})(); + @param {String} str + The string to split + @returns {String} split string + */ + w: function(str) { return str.split(/\s+/); }, + /** + Converts a camelized string into all lower case separated by underscores. + + 'innerHTML'.decamelize() => 'inner_html' + 'action_name'.decamelize() => 'action_name' + 'css-class-name'.decamelize() => 'css-class-name' + 'my favorite items'.decamelize() => 'my favorite items' -(function() { -// ========================================================================== -// Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. and contributors. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -/*globals ember_assert */ -// Ember.Logger -// get, getPath, setPath, trySetPath -// guidFor, isArray, meta -// addObserver, removeObserver -// Ember.run.schedule + @param {String} str + The string to decamelize. -// .......................................................... -// CONSTANTS -// + @returns {String} the decamelized string. + */ + decamelize: function(str) { + return str.replace(STRING_DECAMELIZE_REGEXP, '$1_$2').toLowerCase(); + }, + /** + Replaces underscores or spaces with dashes. + + 'innerHTML'.dasherize() => 'inner-html' + 'action_name'.dasherize() => 'action-name' + 'css-class-name'.dasherize() => 'css-class-name' + 'my favorite items'.dasherize() => 'my-favorite-items' -/** - @static + @param {String} str + The string to dasherize. - Debug parameter you can turn on. This will log all bindings that fire to - the console. This should be disabled in production code. Note that you - can also enable this from the console or temporarily. + @returns {String} the dasherized string. + */ + dasherize: function(str) { + var cache = STRING_DASHERIZE_CACHE, + ret = cache[str]; - @type Boolean - @default false -*/ -Ember.LOG_BINDINGS = false || !!Ember.ENV.LOG_BINDINGS; + if (ret) { + return ret; + } else { + ret = Ember.String.decamelize(str).replace(STRING_DASHERIZE_REGEXP,'-'); + cache[str] = ret; + } -/** - @static + return ret; + }, - Performance paramter. This will benchmark the time spent firing each - binding. + /** + Returns the lowerCaseCamel form of a string. + + 'innerHTML'.camelize() => 'innerHTML' + 'action_name'.camelize() => 'actionName' + 'css-class-name'.camelize() => 'cssClassName' + 'my favorite items'.camelize() => 'myFavoriteItems' - @type Boolean -*/ -Ember.BENCHMARK_BINDING_NOTIFICATIONS = !!Ember.ENV.BENCHMARK_BINDING_NOTIFICATIONS; + @param {String} str + The string to camelize. -/** - @static + @returns {String} the camelized string. + */ + camelize: function(str) { + return str.replace(STRING_CAMELIZE_REGEXP, function(match, separator, chr) { + return chr ? chr.toUpperCase() : ''; + }); + }, - Performance parameter. This will benchmark the time spend configuring each - binding. + /** + More general than decamelize. Returns the lower_case_and_underscored + form of a string. - @type Boolean -*/ -Ember.BENCHMARK_BINDING_SETUP = !!Ember.ENV.BENCHMARK_BINDING_SETUP; + 'innerHTML'.underscore() => 'inner_html' + 'action_name'.underscore() => 'action_name' + 'css-class-name'.underscore() => 'css_class_name' + 'my favorite items'.underscore() => 'my_favorite_items' + @param {String} str + The string to underscore. -/** - @static + @returns {String} the underscored string. + */ + underscore: function(str) { + return str.replace(STRING_UNDERSCORE_REGEXP_1, '$1_$2'). + replace(STRING_UNDERSCORE_REGEXP_2, '_').toLowerCase(); + } +}; +})(); - Default placeholder for multiple values in bindings. - @type String - @default '@@MULT@@' -*/ -Ember.MULTIPLE_PLACEHOLDER = '@@MULT@@'; -/** - @static +(function() { +// ========================================================================== +// Project: Ember Runtime +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2011 Apple Inc. All rights reserved. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +var fmt = Ember.String.fmt, + w = Ember.String.w, + loc = Ember.String.loc, + camelize = Ember.String.camelize, + decamelize = Ember.String.decamelize, + dasherize = Ember.String.dasherize, + underscore = Ember.String.underscore; - Default placeholder for empty values in bindings. Used by notEmpty() - helper unless you specify an alternative. +if (Ember.EXTEND_PROTOTYPES) { - @type String - @default '@@EMPTY@@' -*/ -Ember.EMPTY_PLACEHOLDER = '@@EMPTY@@'; + /** + @see Ember.String.fmt + */ + String.prototype.fmt = function() { + return fmt(this, arguments); + }; + + /** + @see Ember.String.w + */ + String.prototype.w = function() { + return w(this); + }; -// .......................................................... -// TYPE COERCION HELPERS -// + /** + @see Ember.String.loc + */ + String.prototype.loc = function() { + return loc(this, arguments); + }; -// Coerces a non-array value into an array. -/** @private */ -function MULTIPLE(val) { - if (val instanceof Array) return val; - if (val === undefined || val === null) return []; - return [val]; -} + /** + @see Ember.String.camelize + */ + String.prototype.camelize = function() { + return camelize(this); + }; -// Treats a single-element array as the element. Otherwise -// returns a placeholder. -/** @private */ -function SINGLE(val, placeholder) { - if (val instanceof Array) { - if (val.length>1) return placeholder; - else return val[0]; - } - return val; -} + /** + @see Ember.String.decamelize + */ + String.prototype.decamelize = function() { + return decamelize(this); + }; -// Coerces the binding value into a Boolean. + /** + @see Ember.String.dasherize + */ + String.prototype.dasherize = function() { + return dasherize(this); + }; -var BOOL = { - to: function (val) { - return !!val; - } -}; + /** + @see Ember.String.underscore + */ + String.prototype.underscore = function() { + return underscore(this); + }; -// Returns the Boolean inverse of the value. -var NOT = { - to: function NOT(val) { - return !val; - } -}; +} -var get = Ember.get, - getPath = Ember.getPath, - setPath = Ember.setPath, - guidFor = Ember.guidFor, - isGlobalPath = Ember.isGlobalPath; -// Applies a binding's transformations against a value. -/** @private */ -function getTransformedValue(binding, val, obj, dir) { +})(); - // First run a type transform, if it exists, that changes the fundamental - // type of the value. For example, some transforms convert an array to a - // single object. - var typeTransform = binding._typeTransform; - if (typeTransform) { val = typeTransform(val, binding._placeholder); } - // handle transforms - var transforms = binding._transforms, - len = transforms ? transforms.length : 0, - idx; +(function() { +// ========================================================================== +// Project: Ember Runtime +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2011 Apple Inc. All rights reserved. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +var a_slice = Array.prototype.slice; - for(idx=0;idx "Barack Obama" -// .......................................................... -// BINDING -// -/** @private */ -var K = function() {}; + Treating a function like a property is useful because they can work with + bindings, just like any other property. -/** @private */ -var Binding = function(toPath, fromPath) { - var self; + Many computed properties have dependencies on other properties. For + example, in the above example, the `fullName` property depends on + `firstName` and `lastName` to determine its value. You can tell Ember.js + about these dependencies like this: - if (this instanceof Binding) { - self = this; - } else { - self = new K(); - } + MyApp.president = Ember.Object.create({ + firstName: "Barack", + lastName: "Obama", - /** @private */ - self._direction = 'fwd'; + fullName: function() { + return this.get('firstName') + ' ' + this.get('lastName'); - /** @private */ - self._from = fromPath; - self._to = toPath; + // Tell Ember.js that this computed property depends on firstName + // and lastName + }.property('firstName', 'lastName') + }); - return self; -}; + Make sure you list these dependencies so Ember.js knows when to update + bindings that connect to a computed property. Changing a dependency + will not immediately trigger an update of the computed property, but + will instead clear the cache so that it is updated when the next `get` + is called on the property. -K.prototype = Binding.prototype; + Note: you will usually want to use `property(...)` with `cacheable()`. -Binding.prototype = /** @scope Ember.Binding.prototype */ { - // .......................................................... - // CONFIG - // + @see Ember.ComputedProperty + @see Ember.computed + */ + Function.prototype.property = function() { + var ret = Ember.computed(this); + return ret.property.apply(ret, arguments); + }; /** - This will set "from" property path to the specified value. It will not - attempt to resolve this property path to an actual object until you - connect the binding. + The `observes` extension of Javascript's Function prototype is available + when Ember.EXTEND_PROTOTYPES is true, which is the default. - The binding will search for the property path starting at the root object - you pass when you connect() the binding. It follows the same rules as - `getPath()` - see that method for more information. + You can observe property changes simply by adding the `observes` + call to the end of your method declarations in classes that you write. + For example: - @param {String} propertyPath the property path to connect to - @returns {Ember.Binding} receiver + Ember.Object.create({ + valueObserver: function() { + // Executes whenever the "value" property changes + }.observes('value') + }); + + @see Ember.Observable */ - from: function(path) { - this._from = path; + Function.prototype.observes = function() { + this.__ember_observes__ = a_slice.call(arguments); return this; - }, + }; /** - This will set the "to" property path to the specified value. It will not - attempt to reoslve this property path to an actual object until you - connect the binding. + The `observesBefore` extension of Javascript's Function prototype is + available when Ember.EXTEND_PROTOTYPES is true, which is the default. - The binding will search for the property path starting at the root object - you pass when you connect() the binding. It follows the same rules as - `getPath()` - see that method for more information. + You can get notified when a property changes is about to happen by + by adding the `observesBefore` call to the end of your method + declarations in classes that you write. For example: - @param {String|Tuple} propertyPath A property path or tuple - @param {Object} [root] Root object to use when resolving the path. - @returns {Ember.Binding} this + Ember.Object.create({ + valueObserver: function() { + // Executes whenever the "value" property is about to change + }.observesBefore('value') + }); + + @see Ember.Observable */ - to: function(path) { - this._to = path; + Function.prototype.observesBefore = function() { + this.__ember_observesBefore__ = a_slice.call(arguments); return this; - }, + }; + +} + + +})(); - /** - Configures the binding as one way. A one-way binding will relay changes - on the "from" side to the "to" side, but not the other way around. This - means that if you change the "to" side directly, the "from" side may have - a different value. - @param {Boolean} flag - (Optional) passing nothing here will make the binding oneWay. You can - instead pass false to disable oneWay, making the binding two way again. - @returns {Ember.Binding} receiver - */ - oneWay: function(flag) { - this._oneWay = flag===undefined ? true : !!flag; - return this; - }, +(function() { +// ========================================================================== +// Project: Ember Runtime +// Copyright: ©2011 Strobe Inc. and contributors. +// License: Licensed under MIT license (see license.js) +// ========================================================================== - /** - Adds the specified transform to the array of transform functions. +})(); - A transform is a hash with `to` and `from` properties. Each property - should be a function that performs a transformation in either the - forward or back direction. - The functions you pass must have the following signature: - function(value) {}; +(function() { +// ========================================================================== +// Project: Ember Runtime +// Copyright: ©2011 Strobe Inc. and contributors. +// License: Licensed under MIT license (see license.js) +// ========================================================================== - They must also return the transformed value. - Transforms are invoked in the order they were added. If you are - extending a binding and want to reset the transforms, you can call - `resetTransform()` first. - @param {Function} transformFunc the transform function. - @returns {Ember.Binding} this - */ - transform: function(transform) { - if ('function' === typeof transform) { - transform = { to: transform }; - } - if (!this._transforms) this._transforms = []; - this._transforms.push(transform); - return this; - }, - /** - Resets the transforms for the binding. After calling this method the - binding will no longer transform values. You can then add new transforms - as needed. +// .......................................................... +// HELPERS +// - @returns {Ember.Binding} this - */ - resetTransforms: function() { - this._transforms = null; - return this; - }, +var get = Ember.get, set = Ember.set; +var a_slice = Array.prototype.slice; +var a_indexOf = Ember.ArrayUtils.indexOf; - /** - Adds a transform to the chain that will allow only single values to pass. - This will allow single values and nulls to pass through. If you pass an - array, it will be mapped as so: +var contexts = []; +/** @private */ +function popCtx() { + return contexts.length===0 ? {} : contexts.pop(); +} - - [] => null - - [a] => a - - [a,b,c] => Multiple Placeholder +/** @private */ +function pushCtx(ctx) { + contexts.push(ctx); + return null; +} - You can pass in an optional multiple placeholder or it will use the - default. +/** @private */ +function iter(key, value) { + var valueProvided = arguments.length === 2; - Note that this transform will only happen on forwarded valued. Reverse - values are send unchanged. + function i(item) { + var cur = get(item, key); + return valueProvided ? value===cur : !!cur; + } + return i ; +} - @param {String} fromPath from path or null - @param {Object} [placeholder] Placeholder value. - @returns {Ember.Binding} this - */ - single: function(placeholder) { - if (placeholder===undefined) placeholder = Ember.MULTIPLE_PLACEHOLDER; - this._typeTransform = SINGLE; - this._placeholder = placeholder; - return this; - }, +/** @private */ +function xform(target, method, params) { + method.call(target, params[0], params[2], params[3]); +} - /** - Adds a transform that will convert the passed value to an array. If - the value is null or undefined, it will be converted to an empty array. +/** + @class - @param {String} [fromPath] - @returns {Ember.Binding} this - */ - multiple: function() { - this._typeTransform = MULTIPLE; - this._placeholder = null; - return this; - }, + This mixin defines the common interface implemented by enumerable objects + in Ember. Most of these methods follow the standard Array iteration + API defined up to JavaScript 1.8 (excluding language-specific features that + cannot be emulated in older versions of JavaScript). - /** - Adds a transform to convert the value to a bool value. If the value is - an array it will return true if array is not empty. If the value is a - string it will return true if the string is not empty. + This mixin is applied automatically to the Array class on page load, so you + can use any of these methods on simple arrays. If Array already implements + one of these methods, the mixin will not override them. - @returns {Ember.Binding} this - */ - bool: function() { - this.transform(BOOL); - return this; - }, + h3. Writing Your Own Enumerable - /** - Adds a transform that will return the placeholder value if the value is - null, undefined, an empty array or an empty string. See also notNull(). + To make your own custom class enumerable, you need two items: - @param {Object} [placeholder] Placeholder value. - @returns {Ember.Binding} this - */ - notEmpty: function(placeholder) { - if (placeholder === null || placeholder === undefined) { - placeholder = Ember.EMPTY_PLACEHOLDER; - } + 1. You must have a length property. This property should change whenever + the number of items in your enumerable object changes. If you using this + with an Ember.Object subclass, you should be sure to change the length + property using set(). - this.transform({ - to: function(val) { return empty(val) ? placeholder : val; } - }); + 2. If you must implement nextObject(). See documentation. - return this; - }, + Once you have these two methods implement, apply the Ember.Enumerable mixin + to your class and you will be able to enumerate the contents of your object + like any other collection. - /** - Adds a transform that will return the placeholder value if the value is - null or undefined. Otherwise it will passthrough untouched. See also notEmpty(). + h3. Using Ember Enumeration with Other Libraries - @param {String} fromPath from path or null - @param {Object} [placeholder] Placeholder value. - @returns {Ember.Binding} this - */ - notNull: function(placeholder) { - if (placeholder === null || placeholder === undefined) { - placeholder = Ember.EMPTY_PLACEHOLDER; - } + Many other libraries provide some kind of iterator or enumeration like + facility. This is often where the most common API conflicts occur. + Ember's API is designed to be as friendly as possible with other + libraries by implementing only methods that mostly correspond to the + JavaScript 1.8 API. - this.transform({ - to: function(val) { return (val === null || val === undefined) ? placeholder : val; } - }); + @since Ember 0.9 +*/ +Ember.Enumerable = Ember.Mixin.create( /** @lends Ember.Enumerable */ { - return this; - }, + /** @private - compatibility */ + isEnumerable: true, /** - Adds a transform to convert the value to the inverse of a bool value. This - uses the same transform as bool() but inverts it. + Implement this method to make your class enumerable. - @returns {Ember.Binding} this - */ - not: function() { - this.transform(NOT); - return this; - }, + This method will be call repeatedly during enumeration. The index value + will always begin with 0 and increment monotonically. You don't have to + rely on the index value to determine what object to return, but you should + always check the value and start from the beginning when you see the + requested index is 0. - /** - Adds a transform that will return true if the value is null or undefined, false otherwise. + The previousObject is the object that was returned from the last call + to nextObject for the current iteration. This is a useful way to + manage iteration if you are tracing a linked list, for example. - @returns {Ember.Binding} this - */ - isNull: function() { - this.transform(function(val) { return val === null || val === undefined; }); - return this; - }, + Finally the context parameter will always contain a hash you can use as + a "scratchpad" to maintain any other state you need in order to iterate + properly. The context object is reused and is not reset between + iterations so make sure you setup the context with a fresh state whenever + the index parameter is 0. - /** @private */ - toString: function() { - var oneWay = this._oneWay ? '[oneWay]' : ''; - return "Ember.Binding<" + guidFor(this) + ">(" + this._from + " -> " + this._to + ")" + oneWay; - }, + Generally iterators will continue to call nextObject until the index + reaches the your current length-1. If you run out of data before this + time for some reason, you should simply return undefined. - // .......................................................... - // CONNECT AND SYNC - // + The default implementation of this method simply looks up the index. + This works great on any Array-like objects. + + @param index {Number} the current index of the iteration + @param previousObject {Object} the value returned by the last call to nextObject. + @param context {Object} a context object you can use to maintain state. + @returns {Object} the next object in the iteration or undefined + */ + nextObject: Ember.required(Function), /** - Attempts to connect this binding instance so that it can receive and relay - changes. This method will raise an exception if you have not set the - from/to properties yet. + Helper method returns the first object from a collection. This is usually + used by bindings and other parts of the framework to extract a single + object if the enumerable contains only one item. - @param {Object} obj - The root object for this binding. + If you override this method, you should implement it so that it will + always return the same value each time it is called. If your enumerable + contains only one object, this method should always return that object. + If your enumerable is empty, this method should return undefined. - @param {Boolean} preferFromParam - private: Normally, `connect` cannot take an object if `from` already set - an object. Internally, we would like to be able to provide a default object - to be used if no object was provided via `from`, so this parameter turns - off the assertion. + var arr = ["a", "b", "c"]; + arr.firstObject(); => "a" + + var arr = []; + arr.firstObject(); => undefined - @returns {Ember.Binding} this + @returns {Object} the object or undefined */ - connect: function(obj) { - ember_assert('Must pass a valid object to Ember.Binding.connect()', !!obj); - - var oneWay = this._oneWay, operand = this._operand; + firstObject: Ember.computed(function() { + if (get(this, 'length')===0) return undefined ; - // add an observer on the object to be notified when the binding should be updated - Ember.addObserver(obj, this._from, this, this.fromDidChange); + // handle generic enumerables + var context = popCtx(), ret; + ret = this.nextObject(0, null, context); + pushCtx(context); + return ret ; + }).property('[]').cacheable(), - // if there is an operand, add an observer onto it as well - if (operand) { Ember.addObserver(obj, operand, this, this.fromDidChange); } + /** + Helper method returns the last object from a collection. If your enumerable + contains only one object, this method should always return that object. + If your enumerable is empty, this method should return undefined. - // if the binding is a two-way binding, also set up an observer on the target - // object. - if (!oneWay) { Ember.addObserver(obj, this._to, this, this.toDidChange); } + var arr = ["a", "b", "c"]; + arr.lastObject(); => "c" - if (Ember.meta(obj,false).proto !== obj) { this._scheduleSync(obj, 'fwd'); } + var arr = []; + arr.lastObject(); => undefined - this._readyToSync = true; - return this; - }, + @returns {Object} the last object or undefined + */ + lastObject: Ember.computed(function() { + var len = get(this, 'length'); + if (len===0) return undefined ; + var context = popCtx(), idx=0, cur, last = null; + do { + last = cur; + cur = this.nextObject(idx++, last, context); + } while (cur !== undefined); + pushCtx(context); + return last; + }).property('[]').cacheable(), /** - Disconnects the binding instance. Changes will no longer be relayed. You - will not usually need to call this method. + Returns true if the passed object can be found in the receiver. The + default version will iterate through the enumerable until the object + is found. You may want to override this with a more efficient version. + + var arr = ["a", "b", "c"]; + arr.contains("a"); => true + arr.contains("z"); => false @param {Object} obj - The root object you passed when connecting the binding. + The object to search for. - @returns {Ember.Binding} this + @returns {Boolean} true if object is found in enumerable. */ - disconnect: function(obj) { - ember_assert('Must pass a valid object to Ember.Binding.disconnect()', !!obj); + contains: function(obj) { + return this.find(function(item) { return item===obj; }) !== undefined; + }, - var oneWay = this._oneWay, operand = this._operand; + /** + Iterates through the enumerable, calling the passed function on each + item. This method corresponds to the forEach() method defined in + JavaScript 1.6. - // remove an observer on the object so we're no longer notified of - // changes that should update bindings. - Ember.removeObserver(obj, this._from, this, this.fromDidChange); + The callback method you provide should have the following signature (all + parameters are optional): - // if there is an operand, remove the observer from it as well - if (operand) Ember.removeObserver(obj, operand, this, this.fromDidChange); + function(item, index, enumerable); - // if the binding is two-way, remove the observer from the target as well - if (!oneWay) Ember.removeObserver(obj, this._to, this, this.toDidChange); + - *item* is the current item in the iteration. + - *index* is the current index in the iteration + - *enumerable* is the enumerable object itself. - this._readyToSync = false; // disable scheduled syncs... - return this; - }, + Note that in addition to a callback, you can also pass an optional target + object that will be set as "this" on the context. This is a good way + to give your iterator function access to the current object. - // .......................................................... - // PRIVATE - // + @param {Function} callback The callback to execute + @param {Object} target The target object to use + @returns {Object} receiver + */ + forEach: function(callback, target) { + if (typeof callback !== "function") throw new TypeError() ; + var len = get(this, 'length'), last = null, context = popCtx(); - /** @private - called when the from side changes */ - fromDidChange: function(target) { - this._scheduleSync(target, 'fwd'); - }, + if (target === undefined) target = null; - /** @private - called when the to side changes */ - toDidChange: function(target) { - this._scheduleSync(target, 'back'); + for(var idx=0;idx', fromValue, obj); - } - if (this._oneWay) { - Ember.trySetPath(Ember.isGlobalPath(toPath) ? window : obj, toPath, fromValue); - } else { - Ember._suspendObserver(obj, toPath, this, this.toDidChange, function () { - Ember.trySetPath(Ember.isGlobalPath(toPath) ? window : obj, toPath, fromValue); - }); - } - // if we're synchronizing *to* the remote object - } else if (direction === 'back') {// && !this._oneWay) { - var toValue = getTransformedToValue(obj, this); - if (log) { - Ember.Logger.log(' ', this.toString(), '<-', toValue, obj); - } - Ember._suspendObserver(obj, fromPath, this, this.fromDidChange, function () { - Ember.trySetPath(Ember.isGlobalPath(fromPath) ? window : obj, fromPath, toValue); - }); - } - } + - *item* is the current item in the iteration. + - *index* is the current index in the iteration + - *enumerable* is the enumerable object itself. -}; + It should return the mapped value. -/** @private */ -function mixinProperties(to, from) { - for (var key in from) { - if (from.hasOwnProperty(key)) { - to[key] = from[key]; - } - } -} + Note that in addition to a callback, you can also pass an optional target + object that will be set as "this" on the context. This is a good way + to give your iterator function access to the current object. -mixinProperties(Binding, -/** @scope Ember.Binding */ { + @param {Function} callback The callback to execute + @param {Object} target The target object to use + @returns {Array} The mapped array. + */ + map: function(callback, target) { + var ret = []; + this.forEach(function(x, idx, i) { + ret[idx] = callback.call(target, x, idx,i); + }); + return ret ; + }, /** - @see Ember.Binding.prototype.from + Similar to map, this specialized function returns the value of the named + property on all items in the enumeration. + + @params key {String} name of the property + @returns {Array} The mapped array. */ - from: function() { - var C = this, binding = new C(); - return binding.from.apply(binding, arguments); + mapProperty: function(key) { + return this.map(function(next) { + return get(next, key); + }); }, /** - @see Ember.Binding.prototype.to + Returns an array with all of the items in the enumeration that the passed + function returns true for. This method corresponds to filter() defined in + JavaScript 1.6. + + The callback method you provide should have the following signature (all + parameters are optional): + + function(item, index, enumerable); + + - *item* is the current item in the iteration. + - *index* is the current index in the iteration + - *enumerable* is the enumerable object itself. + + It should return the true to include the item in the results, false otherwise. + + Note that in addition to a callback, you can also pass an optional target + object that will be set as "this" on the context. This is a good way + to give your iterator function access to the current object. + + @param {Function} callback The callback to execute + @param {Object} target The target object to use + @returns {Array} A filtered array. */ - to: function() { - var C = this, binding = new C(); - return binding.to.apply(binding, arguments); + filter: function(callback, target) { + var ret = []; + this.forEach(function(x, idx, i) { + if (callback.call(target, x, idx, i)) ret.push(x); + }); + return ret ; }, /** - @see Ember.Binding.prototype.oneWay - */ - oneWay: function(from, flag) { - var C = this, binding = new C(null, from); - return binding.oneWay(flag); - }, + Returns an array with just the items with the matched property. You + can pass an optional second argument with the target value. Otherwise + this will match any property that evaluates to true. - /** - @see Ember.Binding.prototype.single + @params key {String} the property to test + @param value {String} optional value to test against. + @returns {Array} filtered array */ - single: function(from, placeholder) { - var C = this, binding = new C(null, from); - return binding.single(placeholder); + filterProperty: function(key, value) { + return this.filter(iter.apply(this, arguments)); }, /** - @see Ember.Binding.prototype.multiple - */ - multiple: function(from) { - var C = this, binding = new C(null, from); - return binding.multiple(); - }, + Returns the first item in the array for which the callback returns true. + This method works similar to the filter() method defined in JavaScript 1.6 + except that it will stop working on the array once a match is found. - /** - @see Ember.Binding.prototype.transform + The callback method you provide should have the following signature (all + parameters are optional): + + function(item, index, enumerable); + + - *item* is the current item in the iteration. + - *index* is the current index in the iteration + - *enumerable* is the enumerable object itself. + + It should return the true to include the item in the results, false otherwise. + + Note that in addition to a callback, you can also pass an optional target + object that will be set as "this" on the context. This is a good way + to give your iterator function access to the current object. + + @param {Function} callback The callback to execute + @param {Object} target The target object to use + @returns {Object} Found item or null. */ - transform: function(from, func) { - if (!func) { - func = from; - from = null; + find: function(callback, target) { + var len = get(this, 'length') ; + if (target === undefined) target = null; + + var last = null, next, found = false, ret ; + var context = popCtx(); + for(var idx=0;idx value (value returned is the result of ('pathA' && 'pathB')) + The callback method you provide should have the following signature (all + parameters are optional): - Usage example where a delete button's `isEnabled` value is determined by - whether something is selected in a list and whether the current user is - allowed to delete: + function(previousValue, item, index, enumerable); - deleteButton: Ember.ButtonView.design({ - isEnabledBinding: Ember.Binding.and('MyApp.itemsController.hasSelection', 'MyApp.userController.canDelete') - }) + - *previousValue* is the value returned by the last call to the iterator. + - *item* is the current item in the iteration. + - *index* is the current index in the iteration + - *enumerable* is the enumerable object itself. - @param {String} pathA The first part of the conditional - @param {String} pathB The second part of the conditional - */ - and: function(pathA, pathB) { - var C = this, binding = new C(null, pathA).oneWay(); - binding._operand = pathB; - binding._operation = AND_OPERATION; - return binding; - }, + Return the new cumulative value. - /** - Adds a transform that forwards the 'OR' of values at 'pathA' and - 'pathB' whenever either source changes. Note that the transform acts - strictly as a one-way binding, working only in the direction + In addition to the callback you can also pass an initialValue. An error + will be raised if you do not pass an initial value and the enumerator is + empty. - 'pathA' AND 'pathB' --> value (value returned is the result of ('pathA' || 'pathB')) + Note that unlike the other methods, this method does not allow you to + pass a target object to set as this for the callback. It's part of the + spec. Sorry. - @param {String} pathA The first part of the conditional - @param {String} pathB The second part of the conditional + @param {Function} callback The callback to execute + @param {Object} initialValue Initial value for the reduce + @param {String} reducerProperty internal use only. + @returns {Object} The reduced value. */ - or: function(pathA, pathB) { - var C = this, binding = new C(null, pathA).oneWay(); - binding._operand = pathB; - binding._operation = OR_OPERATION; - return binding; - } + reduce: function(callback, initialValue, reducerProperty) { + if (typeof callback !== "function") { throw new TypeError(); } -}); + var ret = initialValue; -/** - @class + this.forEach(function(item, i) { + ret = callback.call(null, ret, item, i, this, reducerProperty); + }, this); - A binding simply connects the properties of two objects so that whenever the - value of one property changes, the other property will be changed also. You - do not usually work with Binding objects directly but instead describe - bindings in your class definition using something like: + return ret; + }, - valueBinding: "MyApp.someController.title" + /** + Invokes the named method on every object in the receiver that + implements it. This method corresponds to the implementation in + Prototype 1.6. - This will create a binding from `MyApp.someController.title` to the `value` - property of your object instance automatically. Now the two values will be - kept in sync. + @param methodName {String} the name of the method + @param args {Object...} optional arguments to pass as well. + @returns {Array} return values from calling invoke. + */ + invoke: function(methodName) { + var args, ret = []; + if (arguments.length>1) args = a_slice.call(arguments, 1); - ## Customizing Your Bindings + this.forEach(function(x, idx) { + var method = x && x[methodName]; + if ('function' === typeof method) { + ret[idx] = args ? method.apply(x, args) : method.call(x); + } + }, this); - In addition to synchronizing values, bindings can also perform some basic - transforms on values. These transforms can help to make sure the data fed - into one object always meets the expectations of that object regardless of - what the other object outputs. + return ret; + }, - To customize a binding, you can use one of the many helper methods defined - on Ember.Binding like so: + /** + Simply converts the enumerable into a genuine array. The order is not + guaranteed. Corresponds to the method implemented by Prototype. - valueBinding: Ember.Binding.single("MyApp.someController.title") + @returns {Array} the enumerable as an array. + */ + toArray: function() { + var ret = []; + this.forEach(function(o, idx) { ret[idx] = o; }); + return ret ; + }, - This will create a binding just like the example above, except that now the - binding will convert the value of `MyApp.someController.title` to a single - object (removing any arrays) before applying it to the `value` property of - your object. + /** + Returns a copy of the array with all null elements removed. + + var arr = ["a", null, "c", null]; + arr.compact(); => ["a", "c"] - You can also chain helper methods to build custom bindings like so: + @returns {Array} the array without null elements. + */ + compact: function() { return this.without(null); }, - valueBinding: Ember.Binding.single("MyApp.someController.title").notEmpty("(EMPTY)") + /** + Returns a new enumerable that excludes the passed value. The default + implementation returns an array regardless of the receiver type unless + the receiver does not contain the value. - This will force the value of MyApp.someController.title to be a single value - and then check to see if the value is "empty" (null, undefined, empty array, - or an empty string). If it is empty, the value will be set to the string - "(EMPTY)". + var arr = ["a", "b", "a", "c"]; + arr.without("a"); => ["b", "c"] - ## One Way Bindings + @param {Object} value + @returns {Ember.Enumerable} + */ + without: function(value) { + if (!this.contains(value)) return this; // nothing to do + var ret = [] ; + this.forEach(function(k) { + if (k !== value) ret[ret.length] = k; + }) ; + return ret ; + }, - One especially useful binding customization you can use is the `oneWay()` - helper. This helper tells Ember that you are only interested in - receiving changes on the object you are binding from. For example, if you - are binding to a preference and you want to be notified if the preference - has changed, but your object will not be changing the preference itself, you - could do: + /** + Returns a new enumerable that contains only unique values. The default + implementation returns an array regardless of the receiver type. - bigTitlesBinding: Ember.Binding.oneWay("MyApp.preferencesController.bigTitles") + var arr = ["a", "a", "b", "b"]; + arr.uniq(); => ["a", "b"] - This way if the value of MyApp.preferencesController.bigTitles changes the - "bigTitles" property of your object will change also. However, if you - change the value of your "bigTitles" property, it will not update the - preferencesController. + @returns {Ember.Enumerable} + */ + uniq: function() { + var ret = []; + this.forEach(function(k){ + if (a_indexOf(ret, k)<0) ret.push(k); + }); + return ret; + }, - One way bindings are almost twice as fast to setup and twice as fast to - execute because the binding only has to worry about changes to one side. + /** + This property will trigger anytime the enumerable's content changes. + You can observe this property to be notified of changes to the enumerables + content. - You should consider using one way bindings anytime you have an object that - may be created frequently and you do not intend to change a property; only - to monitor it for changes. (such as in the example above). + For plain enumerables, this property is read only. Ember.Array overrides + this method. - ## Adding Custom Transforms + @property {Ember.Array} + */ + '[]': Ember.computed(function(key, value) { + return this; + }).property().cacheable(), - In addition to using the standard helpers provided by Ember, you can - also defined your own custom transform functions which will be used to - convert the value. To do this, just define your transform function and add - it to the binding with the transform() helper. The following example will - not allow Integers less than ten. Note that it checks the value of the - bindings and allows all other values to pass: + // .......................................................... + // ENUMERABLE OBSERVERS + // - valueBinding: Ember.Binding.transform(function(value, binding) { - return ((Ember.typeOf(value) === 'number') && (value < 10)) ? 10 : value; - }).from("MyApp.someController.value") + /** + Registers an enumerable observer. Must implement Ember.EnumerableObserver + mixin. + */ + addEnumerableObserver: function(target, opts) { + var willChange = (opts && opts.willChange) || 'enumerableWillChange', + didChange = (opts && opts.didChange) || 'enumerableDidChange'; - If you would like to instead use this transform on a number of bindings, - you can also optionally add your own helper method to Ember.Binding. This - method should simply return the value of `this.transform()`. The example - below adds a new helper called `notLessThan()` which will limit the value to - be not less than the passed minimum: + var hasObservers = get(this, 'hasEnumerableObservers'); + if (!hasObservers) Ember.propertyWillChange(this, 'hasEnumerableObservers'); + Ember.addListener(this, '@enumerable:before', target, willChange, xform); + Ember.addListener(this, '@enumerable:change', target, didChange, xform); + if (!hasObservers) Ember.propertyDidChange(this, 'hasEnumerableObservers'); + return this; + }, - Ember.Binding.reopen({ - notLessThan: function(minValue) { - return this.transform(function(value, binding) { - return ((Ember.typeOf(value) === 'number') && (value < minValue)) ? minValue : value; - }); - } - }); + /** + Removes a registered enumerable observer. + */ + removeEnumerableObserver: function(target, opts) { + var willChange = (opts && opts.willChange) || 'enumerableWillChange', + didChange = (opts && opts.didChange) || 'enumerableDidChange'; - You could specify this in your core.js file, for example. Then anywhere in - your application you can use it to define bindings like so: + var hasObservers = get(this, 'hasEnumerableObservers'); + if (hasObservers) Ember.propertyWillChange(this, 'hasEnumerableObservers'); + Ember.removeListener(this, '@enumerable:before', target, willChange); + Ember.removeListener(this, '@enumerable:change', target, didChange); + if (hasObservers) Ember.propertyDidChange(this, 'hasEnumerableObservers'); + return this; + }, - valueBinding: Ember.Binding.from("MyApp.someController.value").notLessThan(10) + /** + Becomes true whenever the array currently has observers watching changes + on the array. - Also, remember that helpers are chained so you can use your helper along - with any other helpers. The example below will create a one way binding that - does not allow empty values or values less than 10: + @property {Boolean} + */ + hasEnumerableObservers: Ember.computed(function() { + return Ember.hasListeners(this, '@enumerable:change') || Ember.hasListeners(this, '@enumerable:before'); + }).property().cacheable(), - valueBinding: Ember.Binding.oneWay("MyApp.someController.value").notEmpty().notLessThan(10) - Finally, it's also possible to specify bi-directional transforms. To do this, - you can pass a hash to `transform` with `to` and `from`. In the following - example, we are expecting a lowercase string that we want to transform to - uppercase. + /** + Invoke this method just before the contents of your enumerable will + change. You can either omit the parameters completely or pass the objects + to be removed or added if available or just a count. - valueBinding: Ember.Binding.transform({ - to: function(value, binding) { return value.toUpperCase(); }, - from: function(value, binding) { return value.toLowerCase(); } + @param {Ember.Enumerable|Number} removing + An enumerable of the objects to be removed or the number of items to + be removed. - ## How to Manually Adding Binding + @param {Ember.Enumerable|Number} adding + An enumerable of the objects to be added or the number of items to be + added. - All of the examples above show you how to configure a custom binding, but - the result of these customizations will be a binding template, not a fully - active binding. The binding will actually become active only when you - instantiate the object the binding belongs to. It is useful however, to - understand what actually happens when the binding is activated. + @returns {Ember.Enumerable} receiver + */ + enumerableContentWillChange: function(removing, adding) { - For a binding to function it must have at least a "from" property and a "to" - property. The from property path points to the object/key that you want to - bind from while the to path points to the object/key you want to bind to. + var removeCnt, addCnt, hasDelta; - When you define a custom binding, you are usually describing the property - you want to bind from (such as "MyApp.someController.value" in the examples - above). When your object is created, it will automatically assign the value - you want to bind "to" based on the name of your binding key. In the - examples above, during init, Ember objects will effectively call - something like this on your binding: + if ('number' === typeof removing) removeCnt = removing; + else if (removing) removeCnt = get(removing, 'length'); + else removeCnt = removing = -1; - binding = Ember.Binding.from(this.valueBinding).to("value"); + if ('number' === typeof adding) addCnt = adding; + else if (adding) addCnt = get(adding,'length'); + else addCnt = adding = -1; - This creates a new binding instance based on the template you provide, and - sets the to path to the "value" property of the new object. Now that the - binding is fully configured with a "from" and a "to", it simply needs to be - connected to become active. This is done through the connect() method: + hasDelta = addCnt<0 || removeCnt<0 || addCnt-removeCnt!==0; - binding.connect(this); + if (removing === -1) removing = null; + if (adding === -1) adding = null; - Note that when you connect a binding you pass the object you want it to be - connected to. This object will be used as the root for both the from and - to side of the binding when inspecting relative paths. This allows the - binding to be automatically inherited by subclassed objects as well. + Ember.propertyWillChange(this, '[]'); + if (hasDelta) Ember.propertyWillChange(this, 'length'); + Ember.sendEvent(this, '@enumerable:before', removing, adding); - Now that the binding is connected, it will observe both the from and to side - and relay changes. + return this; + }, - If you ever needed to do so (you almost never will, but it is useful to - understand this anyway), you could manually create an active binding by - using the Ember.bind() helper method. (This is the same method used by - to setup your bindings on objects): + /** + Invoke this method when the contents of your enumerable has changed. + This will notify any observers watching for content changes. If your are + implementing an ordered enumerable (such as an array), also pass the + start and end values where the content changed so that it can be used to + notify range observers. - Ember.bind(MyApp.anotherObject, "value", "MyApp.someController.value"); + @param {Number} start + optional start offset for the content change. For unordered + enumerables, you should always pass -1. - Both of these code fragments have the same effect as doing the most friendly - form of binding creation like so: + @param {Ember.Enumerable|Number} removing + An enumerable of the objects to be removed or the number of items to + be removed. - MyApp.anotherObject = Ember.Object.create({ - valueBinding: "MyApp.someController.value", + @param {Ember.Enumerable|Numbe} adding + An enumerable of the objects to be added or the number of items to be + added. - // OTHER CODE FOR THIS OBJECT... + @returns {Object} receiver + */ + enumerableContentDidChange: function(removing, adding) { + var notify = this.propertyDidChange, removeCnt, addCnt, hasDelta; + + if ('number' === typeof removing) removeCnt = removing; + else if (removing) removeCnt = get(removing, 'length'); + else removeCnt = removing = -1; - }); + if ('number' === typeof adding) addCnt = adding; + else if (adding) addCnt = get(adding, 'length'); + else addCnt = adding = -1; - Ember's built in binding creation method makes it easy to automatically - create bindings for you. You should always use the highest-level APIs - available, even if you understand how to it works underneath. + hasDelta = addCnt<0 || removeCnt<0 || addCnt-removeCnt!==0; - @since Ember 0.9 -*/ -Ember.Binding = Binding; + if (removing === -1) removing = null; + if (adding === -1) adding = null; -/** - Global helper method to create a new binding. Just pass the root object - along with a to and from path to create and connect the binding. The new - binding object will be returned which you can further configure with - transforms and other conditions. + Ember.sendEvent(this, '@enumerable:change', removing, adding); + if (hasDelta) Ember.propertyDidChange(this, 'length'); + Ember.propertyDidChange(this, '[]'); - @param {Object} obj - The root object of the transform. + return this ; + } - @param {String} to - The path to the 'to' side of the binding. Must be relative to obj. +}) ; - @param {String} from - The path to the 'from' side of the binding. Must be relative to obj or - a global path. - @returns {Ember.Binding} binding instance -*/ -Ember.bind = function(obj, to, from) { - return new Ember.Binding(to, from).connect(obj); -}; -Ember.oneWay = function(obj, to, from) { - return new Ember.Binding(to, from).oneWay().connect(obj); -}; })(); @@ -6848,431 +8564,397 @@ Ember.oneWay = function(obj, to, from) { (function() { // ========================================================================== -// Project: Ember Metal +// Project: Ember Runtime // Copyright: ©2011 Strobe Inc. and contributors. // License: Licensed under MIT license (see license.js) // ========================================================================== +// .......................................................... +// HELPERS +// -})(); +var get = Ember.get, set = Ember.set, meta = Ember.meta, map = Ember.ArrayUtils.map, cacheFor = Ember.cacheFor; -(function() { +/** @private */ +function none(obj) { return obj===null || obj===undefined; } + +/** @private */ +function xform(target, method, params) { + method.call(target, params[0], params[2], params[3], params[4]); +} + +// .......................................................... +// ARRAY +// /** - * @license - * ========================================================================== - * Ember - * Copyright ©2006-2011, Strobe Inc. and contributors. - * Portions copyright ©2008-2011 Apple Inc. All rights reserved. - * - * Permission is hereby granted, free of charge, to any person obtaining a - * copy of this software and associated documentation files (the "Software"), - * to deal in the Software without restriction, including without limitation - * the rights to use, copy, modify, merge, publish, distribute, sublicense, - * and/or sell copies of the Software, and to permit persons to whom the - * Software is furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in - * all copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING - * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER - * DEALINGS IN THE SOFTWARE. - * - * For more information about Ember, visit http://www.emberjs.com - * - * ========================================================================== - */ + @namespace -})(); + This module implements Observer-friendly Array-like behavior. This mixin is + picked up by the Array class as well as other controllers, etc. that want to + appear to be arrays. + Unlike Ember.Enumerable, this mixin defines methods specifically for + collections that provide index-ordered access to their contents. When you + are designing code that needs to accept any kind of Array-like object, you + should use these methods instead of Array primitives because these will + properly notify observers of changes to the array. + Although these methods are efficient, they do add a layer of indirection to + your application so it is a good idea to use them only when you need the + flexibility of using both true JavaScript arrays and "virtual" arrays such + as controllers and collections. -(function() { -// ========================================================================== -// Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. and contributors. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -/*globals ENV ember_assert */ -var indexOf = Ember.ArrayUtils.indexOf; + You can use the methods defined in this module to access and modify array + contents in a KVO-friendly way. You can also be notified whenever the + membership if an array changes by changing the syntax of the property to + .observes('*myProperty.[]') . -// ........................................ -// GLOBAL CONSTANTS -// + To support Ember.Array in your own class, you must override two + primitives to use it: replace() and objectAt(). -// ensure no undefined errors in browsers where console doesn't exist -if (typeof console === 'undefined') { - window.console = {}; - console.log = console.info = console.warn = console.error = function() {}; -} + Note that the Ember.Array mixin also incorporates the Ember.Enumerable mixin. All + Ember.Array-like objects are also enumerable. + @extends Ember.Enumerable + @since Ember 0.9.0 +*/ +Ember.Array = Ember.Mixin.create(Ember.Enumerable, /** @scope Ember.Array.prototype */ { -// ........................................ -// TYPING & ARRAY MESSAGING -// + /** @private - compatibility */ + isSCArray: true, -var TYPE_MAP = {}; -var t ="Boolean Number String Function Array Date RegExp Object".split(" "); -Ember.ArrayUtils.forEach(t, function(name) { - TYPE_MAP[ "[object " + name + "]" ] = name.toLowerCase(); -}); + /** + @field {Number} length -var toString = Object.prototype.toString; + Your array must support the length property. Your replace methods should + set this property whenever it changes. + */ + length: Ember.required(), -/** - Returns a consistent type for the passed item. + /** + This is one of the primitives you must implement to support Ember.Array. + Returns the object at the named index. If your object supports retrieving + the value of an array item using get() (i.e. myArray.get(0)), then you do + not need to implement this method yourself. - Use this instead of the built-in Ember.typeOf() to get the type of an item. - It will return the same result across all browsers and includes a bit - more detail. Here is what will be returned: + @param {Number} idx + The index of the item to return. If idx exceeds the current length, + return null. + */ + objectAt: function(idx) { + if ((idx < 0) || (idx>=get(this, 'length'))) return undefined ; + return get(this, idx); + }, - | Return Value | Meaning | - |---------------|------------------------------------------------------| - | 'string' | String primitive | - | 'number' | Number primitive | - | 'boolean' | Boolean primitive | - | 'null' | Null value | - | 'undefined' | Undefined value | - | 'function' | A function | - | 'array' | An instance of Array | - | 'class' | A Ember class (created using Ember.Object.extend()) | - | 'instance' | A Ember object instance | - | 'error' | An instance of the Error object | - | 'object' | A JavaScript object not inheriting from Ember.Object | + /** + This returns the objects at the specified indexes, using objectAt. - Examples: + @param {Array} indexes + An array of indexes of items to return. + */ + objectsAt: function(indexes) { + var self = this; + return map(indexes, function(idx){ return self.objectAt(idx); }); + }, - Ember.typeOf(); => 'undefined' - Ember.typeOf(null); => 'null' - Ember.typeOf(undefined); => 'undefined' - Ember.typeOf('michael'); => 'string' - Ember.typeOf(101); => 'number' - Ember.typeOf(true); => 'boolean' - Ember.typeOf(Ember.makeArray); => 'function' - Ember.typeOf([1,2,90]); => 'array' - Ember.typeOf(Ember.Object.extend()); => 'class' - Ember.typeOf(Ember.Object.create()); => 'instance' - Ember.typeOf(new Error('teamocil')); => 'error' + /** @private (nodoc) - overrides Ember.Enumerable version */ + nextObject: function(idx) { + return this.objectAt(idx); + }, - // "normal" JavaScript object - Ember.typeOf({a: 'b'}); => 'object' + /** + @field [] - @param item {Object} the item to check - @returns {String} the type -*/ -Ember.typeOf = function(item) { - var ret; + This is the handler for the special array content property. If you get + this property, it will return this. If you set this property it a new + array, it will replace the current content. - ret = (item === null || item === undefined) ? String(item) : TYPE_MAP[toString.call(item)] || 'object'; + This property overrides the default property defined in Ember.Enumerable. + */ + '[]': Ember.computed(function(key, value) { + if (value !== undefined) this.replace(0, get(this, 'length'), value) ; + return this ; + }).property().cacheable(), - if (ret === 'function') { - if (Ember.Object && Ember.Object.detect(item)) ret = 'class'; - } else if (ret === 'object') { - if (item instanceof Error) ret = 'error'; - else if (Ember.Object && item instanceof Ember.Object) ret = 'instance'; - else ret = 'object'; - } + firstObject: Ember.computed(function() { + return this.objectAt(0); + }).property().cacheable(), + + lastObject: Ember.computed(function() { + return this.objectAt(get(this, 'length')-1); + }).property().cacheable(), + + /** @private (nodoc) - optimized version from Enumerable */ + contains: function(obj){ + return this.indexOf(obj) >= 0; + }, + + // Add any extra methods to Ember.Array that are native to the built-in Array. + /** + Returns a new array that is a slice of the receiver. This implementation + uses the observable array methods to retrieve the objects for the new + slice. + + var arr = ['red', 'green', 'blue']; + arr.slice(0); => ['red', 'green', 'blue'] + arr.slice(0, 2); => ['red', 'green'] + arr.slice(1, 100); => ['green', 'blue'] + + @param beginIndex {Integer} (Optional) index to begin slicing from. + @param endIndex {Integer} (Optional) index to end the slice at. + @returns {Array} New array with specified slice + */ + slice: function(beginIndex, endIndex) { + var ret = []; + var length = get(this, 'length') ; + if (none(beginIndex)) beginIndex = 0 ; + if (none(endIndex) || (endIndex > length)) endIndex = length ; + while(beginIndex < endIndex) { + ret[ret.length] = this.objectAt(beginIndex++) ; + } + return ret ; + }, - return ret; -}; + /** + Returns the index of the given object's first occurrence. + If no startAt argument is given, the starting location to + search is 0. If it's negative, will count backward from + the end of the array. Returns -1 if no match is found. -/** - Returns true if the passed value is null or undefined. This avoids errors - from JSLint complaining about use of ==, which can be technically - confusing. + var arr = ["a", "b", "c", "d", "a"]; + arr.indexOf("a"); => 0 + arr.indexOf("z"); => -1 + arr.indexOf("a", 2); => 4 + arr.indexOf("a", -1); => 4 + arr.indexOf("b", 3); => -1 + arr.indexOf("a", 100); => -1 - Ember.none(); => true - Ember.none(null); => true - Ember.none(undefined); => true - Ember.none(''); => false - Ember.none([]); => false - Ember.none(function(){}); => false + @param {Object} object the item to search for + @param {Number} startAt optional starting location to search, default 0 + @returns {Number} index or -1 if not found + */ + indexOf: function(object, startAt) { + var idx, len = get(this, 'length'); - @param {Object} obj Value to test - @returns {Boolean} -*/ -Ember.none = function(obj) { - return obj === null || obj === undefined; -}; + if (startAt === undefined) startAt = 0; + if (startAt < 0) startAt += len; -/** - Verifies that a value is null or an empty string | array | function. + for(idx=startAt;idx true - Ember.empty(null); => true - Ember.empty(undefined); => true - Ember.empty(''); => true - Ember.empty([]); => true - Ember.empty('tobias fünke'); => false - Ember.empty([0,1,2]); => false + var arr = ["a", "b", "c", "d", "a"]; + arr.lastIndexOf("a"); => 4 + arr.lastIndexOf("z"); => -1 + arr.lastIndexOf("a", 2); => 0 + arr.lastIndexOf("a", -1); => 4 + arr.lastIndexOf("b", 3); => 1 + arr.lastIndexOf("a", 100); => 4 - @param {Object} obj Value to test - @returns {Boolean} -*/ -Ember.empty = function(obj) { - return obj === null || obj === undefined || (obj.length === 0 && typeof obj !== 'function'); -}; + @param {Object} object the item to search for + @param {Number} startAt optional starting location to search, default 0 + @returns {Number} index or -1 if not found + */ + lastIndexOf: function(object, startAt) { + var idx, len = get(this, 'length'); -/** - This will compare two javascript values of possibly different types. - It will tell you which one is greater than the other by returning: + if (startAt === undefined || startAt >= len) startAt = len-1; + if (startAt < 0) startAt += len; - - -1 if the first is smaller than the second, - - 0 if both are equal, - - 1 if the first is greater than the second. + for(idx=startAt;idx>=0;idx--) { + if (this.objectAt(idx) === object) return idx ; + } + return -1; + }, - The order is calculated based on Ember.ORDER_DEFINITION, if types are different. - In case they have the same type an appropriate comparison for this type is made. + // .......................................................... + // ARRAY OBSERVERS + // - Ember.compare('hello', 'hello'); => 0 - Ember.compare('abc', 'dfg'); => -1 - Ember.compare(2, 1); => 1 + /** + Adds an array observer to the receiving array. The array observer object + normally must implement two methods: - @param {Object} v First value to compare - @param {Object} w Second value to compare - @returns {Number} -1 if v < w, 0 if v = w and 1 if v > w. -*/ -Ember.compare = function compare(v, w) { - if (v === w) { return 0; } + * `arrayWillChange(start, removeCount, addCount)` - This method will be + called just before the array is modified. + * `arrayDidChange(start, removeCount, addCount)` - This method will be + called just after the array is modified. - var type1 = Ember.typeOf(v); - var type2 = Ember.typeOf(w); + Both callbacks will be passed the starting index of the change as well a + a count of the items to be removed and added. You can use these callbacks + to optionally inspect the array during the change, clear caches, or do + any other bookkeeping necessary. - var Comparable = Ember.Comparable; - if (Comparable) { - if (type1==='instance' && Comparable.detect(v.constructor)) { - return v.constructor.compare(v, w); - } + In addition to passing a target, you can also include an options hash + which you can use to override the method names that will be invoked on the + target. - if (type2 === 'instance' && Comparable.detect(w.constructor)) { - return 1-w.constructor.compare(w, v); - } - } + @param {Object} target + The observer object. - // If we haven't yet generated a reverse-mapping of Ember.ORDER_DEFINITION, - // do so now. - var mapping = Ember.ORDER_DEFINITION_MAPPING; - if (!mapping) { - var order = Ember.ORDER_DEFINITION; - mapping = Ember.ORDER_DEFINITION_MAPPING = {}; - var idx, len; - for (idx = 0, len = order.length; idx < len; ++idx) { - mapping[order[idx]] = idx; - } + @param {Hash} opts + Optional hash of configuration options including willChange, didChange, + and a context option. - // We no longer need Ember.ORDER_DEFINITION. - delete Ember.ORDER_DEFINITION; - } + @returns {Ember.Array} receiver + */ + addArrayObserver: function(target, opts) { + var willChange = (opts && opts.willChange) || 'arrayWillChange', + didChange = (opts && opts.didChange) || 'arrayDidChange'; - var type1Index = mapping[type1]; - var type2Index = mapping[type2]; + var hasObservers = get(this, 'hasArrayObservers'); + if (!hasObservers) Ember.propertyWillChange(this, 'hasArrayObservers'); + Ember.addListener(this, '@array:before', target, willChange, xform); + Ember.addListener(this, '@array:change', target, didChange, xform); + if (!hasObservers) Ember.propertyDidChange(this, 'hasArrayObservers'); + return this; + }, - if (type1Index < type2Index) { return -1; } - if (type1Index > type2Index) { return 1; } + /** + Removes an array observer from the object if the observer is current + registered. Calling this method multiple times with the same object will + have no effect. - // types are equal - so we have to check values now - switch (type1) { - case 'boolean': - case 'number': - if (v < w) { return -1; } - if (v > w) { return 1; } - return 0; + @param {Object} target + The object observing the array. - case 'string': - var comp = v.localeCompare(w); - if (comp < 0) { return -1; } - if (comp > 0) { return 1; } - return 0; + @returns {Ember.Array} receiver + */ + removeArrayObserver: function(target, opts) { + var willChange = (opts && opts.willChange) || 'arrayWillChange', + didChange = (opts && opts.didChange) || 'arrayDidChange'; - case 'array': - var vLen = v.length; - var wLen = w.length; - var l = Math.min(vLen, wLen); - var r = 0; - var i = 0; - while (r === 0 && i < l) { - r = compare(v[i],w[i]); - i++; - } - if (r !== 0) { return r; } + var hasObservers = get(this, 'hasArrayObservers'); + if (hasObservers) Ember.propertyWillChange(this, 'hasArrayObservers'); + Ember.removeListener(this, '@array:before', target, willChange, xform); + Ember.removeListener(this, '@array:change', target, didChange, xform); + if (hasObservers) Ember.propertyDidChange(this, 'hasArrayObservers'); + return this; + }, - // all elements are equal now - // shorter array should be ordered first - if (vLen < wLen) { return -1; } - if (vLen > wLen) { return 1; } - // arrays are equal now - return 0; + /** + Becomes true whenever the array currently has observers watching changes + on the array. - case 'instance': - if (Ember.Comparable && Ember.Comparable.detect(v)) { - return v.compare(v, w); - } - return 0; + @property {Boolean} + */ + hasArrayObservers: Ember.computed(function() { + return Ember.hasListeners(this, '@array:change') || Ember.hasListeners(this, '@array:before'); + }).property().cacheable(), - default: - return 0; - } -}; + /** + If you are implementing an object that supports Ember.Array, call this + method just before the array content changes to notify any observers and + invalidate any related properties. Pass the starting index of the change + as well as a delta of the amounts to change. -/** @private */ -function _copy(obj, deep, seen, copies) { - var ret, loc, key; + @param {Number} startIdx + The starting index in the array that will change. - // primitive data types are immutable, just return them. - if ('object' !== typeof obj || obj===null) return obj; + @param {Number} removeAmt + The number of items that will be removed. If you pass null assumes 0 - // avoid cyclical loops - if (deep && (loc=indexOf(seen, obj))>=0) return copies[loc]; + @param {Number} addAmt + The number of items that will be added. If you pass null assumes 0. - ember_assert('Cannot clone an Ember.Object that does not implement Ember.Copyable', !(obj instanceof Ember.Object) || (Ember.Copyable && Ember.Copyable.detect(obj))); + @returns {Ember.Array} receiver + */ + arrayContentWillChange: function(startIdx, removeAmt, addAmt) { - // IMPORTANT: this specific test will detect a native array only. Any other - // object will need to implement Copyable. - if (Ember.typeOf(obj) === 'array') { - ret = obj.slice(); - if (deep) { - loc = ret.length; - while(--loc>=0) ret[loc] = _copy(ret[loc], deep, seen, copies); - } - } else if (Ember.Copyable && Ember.Copyable.detect(obj)) { - ret = obj.copy(deep, seen, copies); - } else { - ret = {}; - for(key in obj) { - if (!obj.hasOwnProperty(key)) continue; - ret[key] = deep ? _copy(obj[key], deep, seen, copies) : obj[key]; + // if no args are passed assume everything changes + if (startIdx===undefined) { + startIdx = 0; + removeAmt = addAmt = -1; + } else { + if (removeAmt === undefined) removeAmt=-1; + if (addAmt === undefined) addAmt=-1; } - } - if (deep) { - seen.push(obj); - copies.push(ret); - } + Ember.sendEvent(this, '@array:before', startIdx, removeAmt, addAmt); - return ret; -} + var removing, lim; + if (startIdx>=0 && removeAmt>=0 && get(this, 'hasEnumerableObservers')) { + removing = []; + lim = startIdx+removeAmt; + for(var idx=startIdx;idx=0 && addAmt>=0 && get(this, 'hasEnumerableObservers')) { + adding = []; + lim = startIdx+addAmt; + for(var idx=startIdx;idx true - Ember.isEqual(1, 2); => false - Ember.isEqual([4,2], [4,2]); => false + this.enumerableContentDidChange(removeAmt, adding); + Ember.sendEvent(this, '@array:change', startIdx, removeAmt, addAmt); - @param {Object} a first object to compare - @param {Object} b second object to compare - @returns {Boolean} -*/ -Ember.isEqual = function(a, b) { - if (a && 'function'===typeof a.isEqual) return a.isEqual(b); - return a === b; -}; + var length = get(this, 'length'), + cachedFirst = cacheFor(this, 'firstObject'), + cachedLast = cacheFor(this, 'lastObject'); + if (this.objectAt(0) !== cachedFirst) { + Ember.propertyWillChange(this, 'firstObject'); + Ember.propertyDidChange(this, 'firstObject'); + } + if (this.objectAt(length-1) !== cachedLast) { + Ember.propertyWillChange(this, 'lastObject'); + Ember.propertyDidChange(this, 'lastObject'); + } -/** - @private - Used by Ember.compare -*/ -Ember.ORDER_DEFINITION = Ember.ENV.ORDER_DEFINITION || [ - 'undefined', - 'null', - 'boolean', - 'number', - 'string', - 'array', - 'object', - 'instance', - 'function', - 'class' -]; + return this; + }, -/** - Returns all of the keys defined on an object or hash. This is useful - when inspecting objects for debugging. On browsers that support it, this - uses the native Object.keys implementation. + // .......................................................... + // ENUMERATED PROPERTIES + // - @function - @param {Object} obj - @returns {Array} Array containing keys of obj -*/ -Ember.keys = Object.keys; + /** + Returns a special object that can be used to observe individual properties + on the array. Just get an equivalent property on this object and it will + return an enumerable that maps automatically to the named key on the + member objects. + */ + '@each': Ember.computed(function() { + if (!this.__each) this.__each = new Ember.EachProxy(this); + return this.__each; + }).property().cacheable() -if (!Ember.keys) { - Ember.keys = function(obj) { - var ret = []; - for(var key in obj) { - if (obj.hasOwnProperty(key)) { ret.push(key); } - } - return ret; - }; -} -// .......................................................... -// ERROR -// -/** - @class +}) ; - A subclass of the JavaScript Error object for use in Ember. -*/ -Ember.Error = function() { - var tmp = Error.prototype.constructor.apply(this, arguments); - for (var p in tmp) { - if (tmp.hasOwnProperty(p)) { this[p] = tmp[p]; } - } - this.message = tmp.message; -}; -Ember.Error.prototype = Ember.create(Error.prototype); })(); @@ -7281,196 +8963,114 @@ Ember.Error.prototype = Ember.create(Error.prototype); (function() { // ========================================================================== // Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2011 Apple Inc. All rights reserved. // License: Licensed under MIT license (see license.js) // ========================================================================== - -/** @private **/ -var STRING_DASHERIZE_REGEXP = (/[ _]/g); -var STRING_DASHERIZE_CACHE = {}; -var STRING_DECAMELIZE_REGEXP = (/([a-z])([A-Z])/g); -var STRING_CAMELIZE_REGEXP = (/(\-|_|\s)+(.)?/g); -var STRING_UNDERSCORE_REGEXP_1 = (/([a-z\d])([A-Z]+)/g); -var STRING_UNDERSCORE_REGEXP_2 = (/\-|\s+/g); - /** - Defines the hash of localized strings for the current language. Used by - the `Ember.String.loc()` helper. To localize, add string values to this - hash. + @namespace - @property {String} -*/ -Ember.STRINGS = {}; + Implements some standard methods for comparing objects. Add this mixin to + any class you create that can compare its instances. -/** - Defines string helper methods including string formatting and localization. - Unless Ember.EXTEND_PROTOTYPES = false these methods will also be added to the - String.prototype as well. + You should implement the compare() method. - @namespace + @since Ember 0.9 */ -Ember.String = { +Ember.Comparable = Ember.Mixin.create( /** @scope Ember.Comparable.prototype */{ /** - Apply formatting options to the string. This will look for occurrences - of %@ in your string and substitute them with the arguments you pass into - this method. If you want to control the specific order of replacement, - you can add a number after the key as well to indicate which argument - you want to insert. - - Ordered insertions are most useful when building loc strings where values - you need to insert may appear in different orders. - - "Hello %@ %@".fmt('John', 'Doe') => "Hello John Doe" - "Hello %@2, %@1".fmt('John', 'Doe') => "Hello Doe, John" + walk like a duck. Indicates that the object can be compared. - @param {Object...} [args] - @returns {String} formatted string + @type Boolean + @default true + @constant */ - fmt: function(str, formats) { - // first, replace any ORDERED replacements. - var idx = 0; // the current index for non-numerical replacements - return str.replace(/%@([0-9]+)?/g, function(s, argIndex) { - argIndex = (argIndex) ? parseInt(argIndex,0) - 1 : idx++ ; - s = formats[argIndex]; - return ((s === null) ? '(null)' : (s === undefined) ? '' : s).toString(); - }) ; - }, + isComparable: true, /** - Formats the passed string, but first looks up the string in the localized - strings hash. This is a convenient way to localize text. See - `Ember.String.fmt()` for more information on formatting. - - Note that it is traditional but not required to prefix localized string - keys with an underscore or other character so you can easily identify - localized strings. - - Ember.STRINGS = { - '_Hello World': 'Bonjour le monde', - '_Hello %@ %@': 'Bonjour %@ %@' - }; - - Ember.String.loc("_Hello World"); - => 'Bonjour le monde'; - - Ember.String.loc("_Hello %@ %@", ["John", "Smith"]); - => "Bonjour John Smith"; + Override to return the result of the comparison of the two parameters. The + compare method should return: - @param {String} str - The string to format + - `-1` if `a < b` + - `0` if `a == b` + - `1` if `a > b` - @param {Array} formats - Optional array of parameters to interpolate into string. + Default implementation raises an exception. - @returns {String} formatted string + @param a {Object} the first object to compare + @param b {Object} the second object to compare + @returns {Integer} the result of the comparison */ - loc: function(str, formats) { - str = Ember.STRINGS[str] || str; - return Ember.String.fmt(str, formats) ; - }, - - /** - Splits a string into separate units separated by spaces, eliminating any - empty strings in the process. This is a convenience method for split that - is mostly useful when applied to the String.prototype. + compare: Ember.required(Function) - Ember.String.w("alpha beta gamma").forEach(function(key) { - console.log(key); - }); - > alpha - > beta - > gamma +}); - @param {String} str - The string to split - @returns {String} split string - */ - w: function(str) { return str.split(/\s+/); }, +})(); - /** - Converts a camelized string into all lower case separated by underscores. - - 'innerHTML'.decamelize() => 'inner_html' - 'action_name'.decamelize() => 'action_name' - 'css-class-name'.decamelize() => 'css-class-name' - 'my favorite items'.decamelize() => 'my favorite items' - @param {String} str - The string to decamelize. - @returns {String} the decamelized string. - */ - decamelize: function(str) { - return str.replace(STRING_DECAMELIZE_REGEXP, '$1_$2').toLowerCase(); - }, +(function() { +// ========================================================================== +// Project: Ember Runtime +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2010 Apple Inc. All rights reserved. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +var get = Ember.get, set = Ember.set; - /** - Replaces underscores or spaces with dashes. - - 'innerHTML'.dasherize() => 'inner-html' - 'action_name'.dasherize() => 'action-name' - 'css-class-name'.dasherize() => 'css-class-name' - 'my favorite items'.dasherize() => 'my-favorite-items' +/** + @namespace - @param {String} str - The string to dasherize. + Implements some standard methods for copying an object. Add this mixin to + any object you create that can create a copy of itself. This mixin is + added automatically to the built-in array. - @returns {String} the dasherized string. - */ - dasherize: function(str) { - var cache = STRING_DASHERIZE_CACHE, - ret = cache[str]; + You should generally implement the copy() method to return a copy of the + receiver. - if (ret) { - return ret; - } else { - ret = Ember.String.decamelize(str).replace(STRING_DASHERIZE_REGEXP,'-'); - cache[str] = ret; - } + Note that frozenCopy() will only work if you also implement Ember.Freezable. - return ret; - }, + @since Ember 0.9 +*/ +Ember.Copyable = Ember.Mixin.create( +/** @scope Ember.Copyable.prototype */ { /** - Returns the lowerCaseCamel form of a string. - - 'innerHTML'.camelize() => 'innerHTML' - 'action_name'.camelize() => 'actionName' - 'css-class-name'.camelize() => 'cssClassName' - 'my favorite items'.camelize() => 'myFavoriteItems' - - @param {String} str - The string to camelize. + Override to return a copy of the receiver. Default implementation raises + an exception. - @returns {String} the camelized string. + @param deep {Boolean} if true, a deep copy of the object should be made + @returns {Object} copy of receiver */ - camelize: function(str) { - return str.replace(STRING_CAMELIZE_REGEXP, function(match, separator, chr) { - return chr ? chr.toUpperCase() : ''; - }); - }, + copy: Ember.required(Function), /** - More general than decamelize. Returns the lower_case_and_underscored - form of a string. + If the object implements Ember.Freezable, then this will return a new copy + if the object is not frozen and the receiver if the object is frozen. - 'innerHTML'.underscore() => 'inner_html' - 'action_name'.underscore() => 'action_name' - 'css-class-name'.underscore() => 'css_class_name' - 'my favorite items'.underscore() => 'my_favorite_items' + Raises an exception if you try to call this method on a object that does + not support freezing. - @param {String} str - The string to underscore. + You should use this method whenever you want a copy of a freezable object + since a freezable object can simply return itself without actually + consuming more memory. - @returns {String} the underscored string. + @returns {Object} copy of receiver or receiver */ - underscore: function(str) { - return str.replace(STRING_UNDERSCORE_REGEXP_1, '$1_$2'). - replace(STRING_UNDERSCORE_REGEXP_2, '_').toLowerCase(); + frozenCopy: function() { + if (Ember.Freezable && Ember.Freezable.detect(this)) { + return get(this, 'isFrozen') ? this : this.copy().freeze(); + } else { + throw new Error(Ember.String.fmt("%@ does not support freezing", [this])); + } } -}; +}); + + + + })(); @@ -7479,69 +9079,100 @@ Ember.String = { // ========================================================================== // Project: Ember Runtime // Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. +// Portions ©2008-2010 Apple Inc. All rights reserved. // License: Licensed under MIT license (see license.js) // ========================================================================== -var fmt = Ember.String.fmt, - w = Ember.String.w, - loc = Ember.String.loc, - camelize = Ember.String.camelize, - decamelize = Ember.String.decamelize, - dasherize = Ember.String.dasherize, - underscore = Ember.String.underscore; -if (Ember.EXTEND_PROTOTYPES) { - /** - @see Ember.String.fmt - */ - String.prototype.fmt = function() { - return fmt(this, arguments); - }; - /** - @see Ember.String.w - */ - String.prototype.w = function() { - return w(this); - }; - /** - @see Ember.String.loc - */ - String.prototype.loc = function() { - return loc(this, arguments); - }; - /** - @see Ember.String.camelize - */ - String.prototype.camelize = function() { - return camelize(this); - }; +var get = Ember.get, set = Ember.set; - /** - @see Ember.String.decamelize - */ - String.prototype.decamelize = function() { - return decamelize(this); - }; +/** + @namespace + + The Ember.Freezable mixin implements some basic methods for marking an object + as frozen. Once an object is frozen it should be read only. No changes + may be made the internal state of the object. + + ## Enforcement + + To fully support freezing in your subclass, you must include this mixin and + override any method that might alter any property on the object to instead + raise an exception. You can check the state of an object by checking the + isFrozen property. + + Although future versions of JavaScript may support language-level freezing + object objects, that is not the case today. Even if an object is freezable, + it is still technically possible to modify the object, even though it could + break other parts of your application that do not expect a frozen object to + change. It is, therefore, very important that you always respect the + isFrozen property on all freezable objects. + + ## Example Usage + + The example below shows a simple object that implement the Ember.Freezable + protocol. + + Contact = Ember.Object.extend(Ember.Freezable, { + + firstName: null, + + lastName: null, + + // swaps the names + swapNames: function() { + if (this.get('isFrozen')) throw Ember.FROZEN_ERROR; + var tmp = this.get('firstName'); + this.set('firstName', this.get('lastName')); + this.set('lastName', tmp); + return this; + } + + }); + + c = Context.create({ firstName: "John", lastName: "Doe" }); + c.swapNames(); => returns c + c.freeze(); + c.swapNames(); => EXCEPTION + + ## Copying + + Usually the Ember.Freezable protocol is implemented in cooperation with the + Ember.Copyable protocol, which defines a frozenCopy() method that will return + a frozen object, if the object implements this method as well. + + @since Ember 0.9 +*/ +Ember.Freezable = Ember.Mixin.create( +/** @scope Ember.Freezable.prototype */ { /** - @see Ember.String.dasherize + Set to true when the object is frozen. Use this property to detect whether + your object is frozen or not. + + @property {Boolean} */ - String.prototype.dasherize = function() { - return dasherize(this); - }; + isFrozen: false, /** - @see Ember.String.underscore + Freezes the object. Once this method has been called the object should + no longer allow any properties to be edited. + + @returns {Object} receiver */ - String.prototype.underscore = function() { - return underscore(this); - }; + freeze: function() { + if (get(this, 'isFrozen')) return this; + set(this, 'isFrozen', true); + return this; + } + +}); + +Ember.FROZEN_ERROR = "Frozen object cannot be modified."; + -} })(); @@ -7551,148 +9182,112 @@ if (Ember.EXTEND_PROTOTYPES) { (function() { // ========================================================================== // Project: Ember Runtime -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. +// Copyright: ©2011 Strobe Inc. and contributors. // License: Licensed under MIT license (see license.js) // ========================================================================== -var a_slice = Array.prototype.slice; - -if (Ember.EXTEND_PROTOTYPES) { - - /** - The `property` extension of Javascript's Function prototype is available - when Ember.EXTEND_PROTOTYPES is true, which is the default. - - Computed properties allow you to treat a function like a property: +var forEach = Ember.ArrayUtils.forEach; - MyApp.president = Ember.Object.create({ - firstName: "Barack", - lastName: "Obama", +/** + @class - fullName: function() { - return this.get('firstName') + ' ' + this.get('lastName'); + This mixin defines the API for modifying generic enumerables. These methods + can be applied to an object regardless of whether it is ordered or + unordered. - // Call this flag to mark the function as a property - }.property() - }); + Note that an Enumerable can change even if it does not implement this mixin. + For example, a MappedEnumerable cannot be directly modified but if its + underlying enumerable changes, it will change also. - MyApp.president.get('fullName'); => "Barack Obama" + ## Adding Objects - Treating a function like a property is useful because they can work with - bindings, just like any other property. + To add an object to an enumerable, use the addObject() method. This + method will only add the object to the enumerable if the object is not + already present and the object if of a type supported by the enumerable. - Many computed properties have dependencies on other properties. For - example, in the above example, the `fullName` property depends on - `firstName` and `lastName` to determine its value. You can tell Ember.js - about these dependencies like this: + set.addObject(contact); - MyApp.president = Ember.Object.create({ - firstName: "Barack", - lastName: "Obama", + ## Removing Objects - fullName: function() { - return this.get('firstName') + ' ' + this.get('lastName'); + To remove an object form an enumerable, use the removeObject() method. This + will only remove the object if it is already in the enumerable, otherwise + this method has no effect. - // Tell Ember.js that this computed property depends on firstName - // and lastName - }.property('firstName', 'lastName') - }); + set.removeObject(contact); - Make sure you list these dependencies so Ember.js knows when to update - bindings that connect to a computed property. + ## Implementing In Your Own Code - Note: you will usually want to use `property(...)` with `cacheable()`. + If you are implementing an object and want to support this API, just include + this mixin in your class and implement the required methods. In your unit + tests, be sure to apply the Ember.MutableEnumerableTests to your object. - @see Ember.ComputedProperty - @see Ember.computed - */ - Function.prototype.property = function() { - var ret = Ember.computed(this); - return ret.property.apply(ret, arguments); - }; + @extends Ember.Mixin + @extends Ember.Enumerable +*/ +Ember.MutableEnumerable = Ember.Mixin.create(Ember.Enumerable, + /** @scope Ember.MutableEnumerable.prototype */ { /** - The `observes` extension of Javascript's Function prototype is available - when Ember.EXTEND_PROTOTYPES is true, which is the default. + __Required.__ You must implement this method to apply this mixin. - You can observe property changes simply by adding the `observes` - call to the end of your method declarations in classes that you write. - For example: + Attempts to add the passed object to the receiver if the object is not + already present in the collection. If the object is present, this method + has no effect. - Ember.Object.create({ - valueObserver: function() { - // Executes whenever the "value" property changes - }.observes('value') - }); - - @see Ember.Observable + If the passed object is of a type not supported by the receiver + then this method should raise an exception. + + @param {Object} object + The object to add to the enumerable. + + @returns {Object} the passed object */ - Function.prototype.observes = function() { - this.__ember_observes__ = a_slice.call(arguments); - return this; - }; + addObject: Ember.required(Function), /** - The `observesBefore` extension of Javascript's Function prototype is - available when Ember.EXTEND_PROTOTYPES is true, which is the default. - - You can get notified when a property changes is about to happen by - by adding the `observesBefore` call to the end of your method - declarations in classes that you write. For example: + Adds each object in the passed enumerable to the receiver. - Ember.Object.create({ - valueObserver: function() { - // Executes whenever the "value" property is about to change - }.observesBefore('value') - }); - - @see Ember.Observable + @param {Ember.Enumerable} objects the objects to add. + @returns {Object} receiver */ - Function.prototype.observesBefore = function() { - this.__ember_observesBefore__ = a_slice.call(arguments); + addObjects: function(objects) { + Ember.beginPropertyChanges(this); + forEach(objects, function(obj) { this.addObject(obj); }, this); + Ember.endPropertyChanges(this); return this; - }; - -} + }, + /** + __Required.__ You must implement this method to apply this mixin. -})(); + Attempts to remove the passed object from the receiver collection if the + object is in present in the collection. If the object is not present, + this method has no effect. + If the passed object is of a type not supported by the receiver + then this method should raise an exception. + @param {Object} object + The object to remove from the enumerable. -(function() { -// ========================================================================== -// Project: Ember Runtime -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -var IS_BINDING = Ember.IS_BINDING = /^.+Binding$/; + @returns {Object} the passed object + */ + removeObject: Ember.required(Function), -Ember._mixinBindings = function(obj, key, value, m) { - if (IS_BINDING.test(key)) { - if (!(value instanceof Ember.Binding)) { - value = new Ember.Binding(key.slice(0,-7), value); // make binding - } else { - value.to(key.slice(0, -7)); - } - value.connect(obj); - // keep a set of bindings in the meta so that when we rewatch we can - // resync them... - var bindings = m.bindings; - if (!bindings) { - bindings = m.bindings = { __emberproto__: obj }; - } else if (bindings.__emberproto__ !== obj) { - bindings = m.bindings = Ember.create(m.bindings); - bindings.__emberproto__ = obj; - } + /** + Removes each objects in the passed enumerable from the receiver. - bindings[key] = true; + @param {Ember.Enumerable} objects the objects to remove + @returns {Object} receiver + */ + removeObjects: function(objects) { + Ember.beginPropertyChanges(this); + forEach(objects, function(obj) { this.removeObject(obj); }, this); + Ember.endPropertyChanges(this); + return this; } - return value; -}; +}); })(); @@ -7704,779 +9299,831 @@ Ember._mixinBindings = function(obj, key, value, m) { // Copyright: ©2011 Strobe Inc. and contributors. // License: Licensed under MIT license (see license.js) // ========================================================================== +// .......................................................... +// CONSTANTS +// -})(); +var OUT_OF_RANGE_EXCEPTION = "Index out of range" ; +var EMPTY = []; +// .......................................................... +// HELPERS +// +var get = Ember.get, set = Ember.set, forEach = Ember.ArrayUtils.forEach; -(function() { -// ========================================================================== -// Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. and contributors. -// License: Licensed under MIT license (see license.js) -// ========================================================================== +/** + @class + This mixin defines the API for modifying array-like objects. These methods + can be applied only to a collection that keeps its items in an ordered set. + Note that an Array can change even if it does not implement this mixin. + For example, one might implement a SparseArray that cannot be directly + modified, but if its underlying enumerable changes, it will change also. + @extends Ember.Mixin + @extends Ember.Array + @extends Ember.MutableEnumerable +*/ +Ember.MutableArray = Ember.Mixin.create(Ember.Array, Ember.MutableEnumerable, + /** @scope Ember.MutableArray.prototype */ { + /** + __Required.__ You must implement this method to apply this mixin. -// .......................................................... -// HELPERS -// + This is one of the primitives you must implement to support Ember.Array. You + should replace amt objects started at idx with the objects in the passed + array. You should also call this.enumerableContentDidChange() ; -var get = Ember.get, set = Ember.set; -var a_slice = Array.prototype.slice; -var a_indexOf = Ember.ArrayUtils.indexOf; + @param {Number} idx + Starting index in the array to replace. If idx >= length, then append + to the end of the array. -var contexts = []; -/** @private */ -function popCtx() { - return contexts.length===0 ? {} : contexts.pop(); -} + @param {Number} amt + Number of elements that should be removed from the array, starting at + *idx*. -/** @private */ -function pushCtx(ctx) { - contexts.push(ctx); - return null; -} + @param {Array} objects + An array of zero or more objects that should be inserted into the array + at *idx* + */ + replace: Ember.required(), -/** @private */ -function iter(key, value) { - var valueProvided = arguments.length === 2; + /** + Remove all elements from self. This is useful if you + want to reuse an existing array without having to recreate it. - function i(item) { - var cur = get(item, key); - return valueProvided ? value===cur : !!cur; - } - return i ; -} + var colors = ["red", "green", "blue"]; + color.length(); => 3 + colors.clear(); => [] + colors.length(); => 0 -/** @private */ -function xform(target, method, params) { - method.call(target, params[0], params[2], params[3]); -} + @returns {Ember.Array} An empty Array. + */ + clear: function () { + var len = get(this, 'length'); + if (len === 0) return this; + this.replace(0, len, EMPTY); + return this; + }, -/** - @class + /** + This will use the primitive replace() method to insert an object at the + specified index. - This mixin defines the common interface implemented by enumerable objects - in Ember. Most of these methods follow the standard Array iteration - API defined up to JavaScript 1.8 (excluding language-specific features that - cannot be emulated in older versions of JavaScript). + var colors = ["red", "green", "blue"]; + colors.insertAt(2, "yellow"); => ["red", "green", "yellow", "blue"] + colors.insertAt(5, "orange"); => Error: Index out of range - This mixin is applied automatically to the Array class on page load, so you - can use any of these methods on simple arrays. If Array already implements - one of these methods, the mixin will not override them. + @param {Number} idx index of insert the object at. + @param {Object} object object to insert + */ + insertAt: function(idx, object) { + if (idx > get(this, 'length')) throw new Error(OUT_OF_RANGE_EXCEPTION) ; + this.replace(idx, 0, [object]) ; + return this ; + }, - h3. Writing Your Own Enumerable + /** + Remove an object at the specified index using the replace() primitive + method. You can pass either a single index, or a start and a length. - To make your own custom class enumerable, you need two items: + If you pass a start and length that is beyond the + length this method will throw an Ember.OUT_OF_RANGE_EXCEPTION - 1. You must have a length property. This property should change whenever - the number of items in your enumerable object changes. If you using this - with an Ember.Object subclass, you should be sure to change the length - property using set(). + var colors = ["red", "green", "blue", "yellow", "orange"]; + colors.removeAt(0); => ["green", "blue", "yellow", "orange"] + colors.removeAt(2, 2); => ["green", "blue"] + colors.removeAt(4, 2); => Error: Index out of range - 2. If you must implement nextObject(). See documentation. + @param {Number} start index, start of range + @param {Number} len length of passing range + @returns {Object} receiver + */ + removeAt: function(start, len) { - Once you have these two methods implement, apply the Ember.Enumerable mixin - to your class and you will be able to enumerate the contents of your object - like any other collection. + var delta = 0; - h3. Using Ember Enumeration with Other Libraries + if ('number' === typeof start) { - Many other libraries provide some kind of iterator or enumeration like - facility. This is often where the most common API conflicts occur. - Ember's API is designed to be as friendly as possible with other - libraries by implementing only methods that mostly correspond to the - JavaScript 1.8 API. + if ((start < 0) || (start >= get(this, 'length'))) { + throw new Error(OUT_OF_RANGE_EXCEPTION); + } - @since Ember 0.9 -*/ -Ember.Enumerable = Ember.Mixin.create( /** @lends Ember.Enumerable */ { + // fast case + if (len === undefined) len = 1; + this.replace(start, len, EMPTY); + } - /** @private - compatibility */ - isEnumerable: true, + return this ; + }, /** - Implement this method to make your class enumerable. - - This method will be call repeatedly during enumeration. The index value - will always begin with 0 and increment monotonically. You don't have to - rely on the index value to determine what object to return, but you should - always check the value and start from the beginning when you see the - requested index is 0. + Push the object onto the end of the array. Works just like push() but it + is KVO-compliant. - The previousObject is the object that was returned from the last call - to nextObject for the current iteration. This is a useful way to - manage iteration if you are tracing a linked list, for example. + var colors = ["red", "green", "blue"]; + colors.pushObject("black"); => ["red", "green", "blue", "black"] + colors.pushObject(["yellow", "orange"]); => ["red", "green", "blue", "black", ["yellow", "orange"]] - Finally the context parameter will always contain a hash you can use as - a "scratchpad" to maintain any other state you need in order to iterate - properly. The context object is reused and is not reset between - iterations so make sure you setup the context with a fresh state whenever - the index parameter is 0. + */ + pushObject: function(obj) { + this.insertAt(get(this, 'length'), obj) ; + return obj ; + }, - Generally iterators will continue to call nextObject until the index - reaches the your current length-1. If you run out of data before this - time for some reason, you should simply return undefined. + /** + Add the objects in the passed numerable to the end of the array. Defers + notifying observers of the change until all objects are added. - The default impementation of this method simply looks up the index. - This works great on any Array-like objects. + var colors = ["red", "green", "blue"]; + colors.pushObjects("black"); => ["red", "green", "blue", "black"] + colors.pushObjects(["yellow", "orange"]); => ["red", "green", "blue", "black", "yellow", "orange"] - @param index {Number} the current index of the iteration - @param previousObject {Object} the value returned by the last call to nextObject. - @param context {Object} a context object you can use to maintain state. - @returns {Object} the next object in the iteration or undefined + @param {Ember.Enumerable} objects the objects to add + @returns {Ember.Array} receiver */ - nextObject: Ember.required(Function), + pushObjects: function(objects) { + this.replace(get(this, 'length'), 0, objects); + return this; + }, /** - Helper method returns the first object from a collection. This is usually - used by bindings and other parts of the framework to extract a single - object if the enumerable contains only one item. - - If you override this method, you should implement it so that it will - always return the same value each time it is called. If your enumerable - contains only one object, this method should always return that object. - If your enumerable is empty, this method should return undefined. - - var arr = ["a", "b", "c"]; - arr.firstObject(); => "a" + Pop object from array or nil if none are left. Works just like pop() but + it is KVO-compliant. - var arr = []; - arr.firstObject(); => undefined + var colors = ["red", "green", "blue"]; + colors.popObject(); => "blue" + console.log(colors); => ["red", "green"] - @returns {Object} the object or undefined */ - firstObject: Ember.computed(function() { - if (get(this, 'length')===0) return undefined ; - if (Ember.Array && Ember.Array.detect(this)) return this.objectAt(0); + popObject: function() { + var len = get(this, 'length') ; + if (len === 0) return null ; - // handle generic enumerables - var context = popCtx(), ret; - ret = this.nextObject(0, null, context); - pushCtx(context); + var ret = this.objectAt(len-1) ; + this.removeAt(len-1, 1) ; return ret ; - }).property(), + }, /** - Helper method returns the last object from a collection. If your enumerable - contains only one object, this method should always return that object. - If your enumerable is empty, this method should return undefined. - - var arr = ["a", "b", "c"]; - arr.lastObject(); => "c" + Shift an object from start of array or nil if none are left. Works just + like shift() but it is KVO-compliant. - var arr = []; - arr.lastObject(); => undefined + var colors = ["red", "green", "blue"]; + colors.shiftObject(); => "red" + console.log(colors); => ["green", "blue"] - @returns {Object} the last object or undefined */ - lastObject: Ember.computed(function() { - var len = get(this, 'length'); - if (len===0) return undefined ; - if (Ember.Array && Ember.Array.detect(this)) { - return this.objectAt(len-1); - } else { - var context = popCtx(), idx=0, cur, last = null; - do { - last = cur; - cur = this.nextObject(idx++, last, context); - } while (cur !== undefined); - pushCtx(context); - return last; - } - }).property(), + shiftObject: function() { + if (get(this, 'length') === 0) return null ; + var ret = this.objectAt(0) ; + this.removeAt(0) ; + return ret ; + }, /** - Returns true if the passed object can be found in the receiver. The - default version will iterate through the enumerable until the object - is found. You may want to override this with a more efficient version. - - var arr = ["a", "b", "c"]; - arr.contains("a"); => true - arr.contains("z"); => false + Unshift an object to start of array. Works just like unshift() but it is + KVO-compliant. - @param {Object} obj - The object to search for. + var colors = ["red", "green", "blue"]; + colors.unshiftObject("yellow"); => ["yellow", "red", "green", "blue"] + colors.unshiftObject(["black", "white"]); => [["black", "white"], "yellow", "red", "green", "blue"] - @returns {Boolean} true if object is found in enumerable. */ - contains: function(obj) { - return this.find(function(item) { return item===obj; }) !== undefined; + unshiftObject: function(obj) { + this.insertAt(0, obj) ; + return obj ; }, /** - Iterates through the enumerable, calling the passed function on each - item. This method corresponds to the forEach() method defined in - JavaScript 1.6. + Adds the named objects to the beginning of the array. Defers notifying + observers until all objects have been added. - The callback method you provide should have the following signature (all - parameters are optional): + var colors = ["red", "green", "blue"]; + colors.unshiftObjects(["black", "white"]); => ["black", "white", "red", "green", "blue"] + colors.unshiftObjects("yellow"); => Type Error: 'undefined' is not a function - function(item, index, enumerable); + @param {Ember.Enumerable} objects the objects to add + @returns {Ember.Array} receiver + */ + unshiftObjects: function(objects) { + this.replace(0, 0, objects); + return this; + }, - - *item* is the current item in the iteration. - - *index* is the current index in the iteration - - *enumerable* is the enumerable object itself. + // .......................................................... + // IMPLEMENT Ember.MutableEnumerable + // - Note that in addition to a callback, you can also pass an optional target - object that will be set as "this" on the context. This is a good way - to give your iterator function access to the current object. + /** @private (nodoc) */ + removeObject: function(obj) { + var loc = get(this, 'length') || 0; + while(--loc >= 0) { + var curObject = this.objectAt(loc) ; + if (curObject === obj) this.removeAt(loc) ; + } + return this ; + }, - @param {Function} callback The callback to execute - @param {Object} target The target object to use - @returns {Object} receiver - */ - forEach: function(callback, target) { - if (typeof callback !== "function") throw new TypeError() ; - var len = get(this, 'length'), last = null, context = popCtx(); + /** @private (nodoc) */ + addObject: function(obj) { + if (!this.contains(obj)) this.pushObject(obj); + return this ; + } + +}); + + +})(); + + + +(function() { +// ========================================================================== +// Project: Ember Runtime +// Copyright: ©2011 Strobe Inc. and contributors. +// License: Licensed under MIT license (see license.js) +// ========================================================================== + +var get = Ember.get, set = Ember.set; + +/** + @class + + ## Overview + + This mixin provides properties and property observing functionality, core + features of the Ember object model. + + Properties and observers allow one object to observe changes to a + property on another object. This is one of the fundamental ways that + models, controllers and views communicate with each other in an Ember + application. + + Any object that has this mixin applied can be used in observer + operations. That includes Ember.Object and most objects you will + interact with as you write your Ember application. + + Note that you will not generally apply this mixin to classes yourself, + but you will use the features provided by this module frequently, so it + is important to understand how to use it. + + ## Using get() and set() + + Because of Ember's support for bindings and observers, you will always + access properties using the get method, and set properties using the + set method. This allows the observing objects to be notified and + computed properties to be handled properly. + + More documentation about `get` and `set` are below. + + ## Observing Property Changes - if (target === undefined) target = null; + You typically observe property changes simply by adding the `observes` + call to the end of your method declarations in classes that you write. + For example: - for(var idx=0;idx { firstName: 'John', lastName: 'Doe', zipCode: '10011' } - It should return the true to include the item in the results, false otherwise. + is equivalent to: - Note that in addition to a callback, you can also pass an optional target - object that will be set as "this" on the context. This is a good way - to give your iterator function access to the current object. + record.getProperties(['firstName', 'lastName', 'zipCode']); // => { firstName: 'John', lastName: 'Doe', zipCode: '10011' } - @param {Function} callback The callback to execute - @param {Object} target The target object to use - @returns {Array} A filtered array. + @param {String...|Array} list of keys to get + @returns {Hash} */ - filter: function(callback, target) { - var ret = []; - this.forEach(function(x, idx, i) { - if (callback.call(target, x, idx, i)) ret.push(x); - }); - return ret ; + getProperties: function() { + var ret = {}; + var propertyNames = arguments; + if (arguments.length === 1 && Ember.typeOf(arguments[0]) === 'array') { + propertyNames = arguments[0]; + } + for(var i = 0; i < propertyNames.length; i++) { + ret[propertyNames[i]] = get(this, propertyNames[i]); + } + return ret; }, /** - Returns an array with just the items with the matched property. You - can pass an optional second argument with the target value. Otherwise - this will match any property that evaluates to true. - - @params key {String} the property to test - @param value {String} optional value to test against. - @returns {Array} filtered array - */ - filterProperty: function(key, value) { - return this.filter(iter.apply(this, arguments)); - }, + Sets the key equal to value. - /** - Returns the first item in the array for which the callback returns true. - This method works similar to the filter() method defined in JavaScript 1.6 - except that it will stop working on the array once a match is found. + This method is generally very similar to calling object[key] = value or + object.key = value, except that it provides support for computed + properties, the unknownProperty() method and property observers. - The callback method you provide should have the following signature (all - parameters are optional): + ### Computed Properties - function(item, index, enumerable); + If you try to set a value on a key that has a computed property handler + defined (see the get() method for an example), then set() will call + that method, passing both the value and key instead of simply changing + the value itself. This is useful for those times when you need to + implement a property that is composed of one or more member + properties. - - *item* is the current item in the iteration. - - *index* is the current index in the iteration - - *enumerable* is the enumerable object itself. + ### Unknown Properties - It should return the true to include the item in the results, false otherwise. + If you try to set a value on a key that is undefined in the target + object, then the unknownProperty() handler will be called instead. This + gives you an opportunity to implement complex "virtual" properties that + are not predefined on the object. If unknownProperty() returns + undefined, then set() will simply set the value on the object. - Note that in addition to a callback, you can also pass an optional target - object that will be set as "this" on the context. This is a good way - to give your iterator function access to the current object. + ### Property Observers - @param {Function} callback The callback to execute - @param {Object} target The target object to use - @returns {Object} Found item or null. - */ - find: function(callback, target) { - var len = get(this, 'length') ; - if (target === undefined) target = null; + In addition to changing the property, set() will also register a + property change with the object. Unless you have placed this call + inside of a beginPropertyChanges() and endPropertyChanges(), any "local" + observers (i.e. observer methods declared on the same object), will be + called immediately. Any "remote" observers (i.e. observer methods + declared on another object) will be placed in a queue and called at a + later time in a coalesced manner. - var last = null, next, found = false, ret ; - var context = popCtx(); - for(var idx=0;idx1) args = a_slice.call(arguments, 1); - - this.forEach(function(x, idx) { - var method = x && x[methodName]; - if ('function' === typeof method) { - ret[idx] = args ? method.apply(x, args) : method.call(x); - } - }, this); - - return ret; + removeObserver: function(key, target, method) { + Ember.removeObserver(this, key, target, method); }, /** - Simply converts the enumerable into a genuine array. The order is not - guaranteed. Corresponds to the method implemented by Prototype. + Returns true if the object currently has observers registered for a + particular key. You can use this method to potentially defer performing + an expensive action until someone begins observing a particular property + on the object. - @returns {Array} the enumerable as an array. + @param {String} key Key to check + @returns {Boolean} */ - toArray: function() { - var ret = []; - this.forEach(function(o, idx) { ret[idx] = o; }); - return ret ; + hasObserverFor: function(key) { + return Ember.hasListeners(this, key+':change'); }, /** - Returns a copy of the array with all null elements removed. + This method will be called when a client attempts to get the value of a + property that has not been defined in one of the typical ways. Override + this method to create "virtual" properties. - var arr = ["a", null, "c", null]; - arr.compact(); => ["a", "c"] - - @returns {Array} the array without null elements. + @param {String} key The name of the unknown property that was requested. + @returns {Object} The property value or undefined. Default is undefined. */ - compact: function() { return this.without(null); }, + unknownProperty: function(key) { + return undefined; + }, /** - Returns a new enumerable that excludes the passed value. The default - implementation returns an array regardless of the receiver type unless - the receiver does not contain the value. - - var arr = ["a", "b", "a", "c"]; - arr.without("a"); => ["b", "c"] - - @param {Object} value - @returns {Ember.Enumerable} + This method will be called when a client attempts to set the value of a + property that has not been defined in one of the typical ways. Override + this method to create "virtual" properties. + + @param {String} key The name of the unknown property to be set. + @param {Object} value The value the unknown property is to be set to. */ - without: function(value) { - if (!this.contains(value)) return this; // nothing to do - var ret = [] ; - this.forEach(function(k) { - if (k !== value) ret[ret.length] = k; - }) ; - return ret ; + setUnknownProperty: function(key, value) { + this[key] = value; }, /** - Returns a new enumerable that contains only unique values. The default - implementation returns an array regardless of the receiver type. + This is like `get`, but allows you to pass in a dot-separated property + path. + + person.getPath('address.zip'); // return the zip + person.getPath('children.firstObject.age'); // return the first kid's age - var arr = ["a", "a", "b", "b"]; - arr.uniq(); => ["a", "b"] + This reads much better than chained `get` calls. - @returns {Ember.Enumerable} + @param {String} path The property path to retrieve + @returns {Object} The property value or undefined. */ - uniq: function() { - var ret = []; - this.forEach(function(k){ - if (a_indexOf(ret, k)<0) ret.push(k); - }); - return ret; + getPath: function(path) { + return Ember.getPath(this, path); }, /** - This property will trigger anytime the enumerable's content changes. - You can observe this property to be notified of changes to the enumerables - content. + This is like `set`, but allows you to specify the property you want to + set as a dot-separated property path. + + person.setPath('address.zip', 10011); // set the zip to 10011 + person.setPath('children.firstObject.age', 6); // set the first kid's age to 6 - For plain enumerables, this property is read only. Ember.Array overrides - this method. + This is not as commonly used as `getPath`, but it can be useful. - @property {Ember.Array} + @param {String} path The path to the property that will be set + @param {Object} value The value to set or null. + @returns {Ember.Observable} */ - '[]': Ember.computed(function(key, value) { + setPath: function(path, value) { + Ember.setPath(this, path, value); return this; - }).property().cacheable(), - - // .......................................................... - // ENUMERABLE OBSERVERS - // + }, /** - Registers an enumerable observer. Must implement Ember.EnumerableObserver - mixin. + Retrieves the value of a property, or a default value in the case that the property + returns undefined. + + person.getWithDefault('lastName', 'Doe'); + + @param {String} keyName The name of the property to retrieve + @param {Object} defaultValue The value to return if the property value is undefined + @returns {Object} The property value or the defaultValue. */ - addEnumerableObserver: function(target, opts) { - var willChange = (opts && opts.willChange) || 'enumerableWillChange', - didChange = (opts && opts.didChange) || 'enumerableDidChange'; - - var hasObservers = get(this, 'hasEnumerableObservers'); - if (!hasObservers) Ember.propertyWillChange(this, 'hasEnumerableObservers'); - Ember.addListener(this, '@enumerable:before', target, willChange, xform); - Ember.addListener(this, '@enumerable:change', target, didChange, xform); - if (!hasObservers) Ember.propertyDidChange(this, 'hasEnumerableObservers'); - return this; + getWithDefault: function(keyName, defaultValue) { + return Ember.getWithDefault(this, keyName, defaultValue); }, /** - Removes a registered enumerable observer. + Set the value of a property to the current value plus some amount. + + person.incrementProperty('age'); + team.incrementProperty('score', 2); + + @param {String} keyName The name of the property to increment + @param {Object} increment The amount to increment by. Defaults to 1 + @returns {Object} The new property value */ - removeEnumerableObserver: function(target, opts) { - var willChange = (opts && opts.willChange) || 'enumerableWillChange', - didChange = (opts && opts.didChange) || 'enumerableDidChange'; - - var hasObservers = get(this, 'hasEnumerableObservers'); - if (hasObservers) Ember.propertyWillChange(this, 'hasEnumerableObservers'); - Ember.removeListener(this, '@enumerable:before', target, willChange); - Ember.removeListener(this, '@enumerable:change', target, didChange); - if (hasObservers) Ember.propertyDidChange(this, 'hasEnumerableObservers'); - return this; + incrementProperty: function(keyName, increment) { + if (!increment) { increment = 1; } + set(this, keyName, (get(this, keyName) || 0)+increment); + return get(this, keyName); }, - + /** - Becomes true whenever the array currently has observers watching changes - on the array. - - @property {Boolean} + Set the value of a property to the current value minus some amount. + + player.decrementProperty('lives'); + orc.decrementProperty('health', 5); + + @param {String} keyName The name of the property to decrement + @param {Object} increment The amount to decrement by. Defaults to 1 + @returns {Object} The new property value */ - hasEnumerableObservers: Ember.computed(function() { - return Ember.hasListeners(this, '@enumerable:change') || Ember.hasListeners(this, '@enumerable:before'); - }).property().cacheable(), + decrementProperty: function(keyName, increment) { + if (!increment) { increment = 1; } + set(this, keyName, (get(this, keyName) || 0)-increment); + return get(this, keyName); + }, + /** + Set the value of a boolean property to the opposite of it's + current value. + + starship.toggleProperty('warpDriveEnaged'); + + @param {String} keyName The name of the property to toggle + @returns {Object} The new property value + */ + toggleProperty: function(keyName) { + set(this, keyName, !get(this, keyName)); + return get(this, keyName); + }, /** - Invoke this method just before the contents of your enumerable will - change. You can either omit the parameters completely or pass the objects - to be removed or added if available or just a count. + Returns the cached value of a computed property, if it exists. + This allows you to inspect the value of a computed property + without accidentally invoking it if it is intended to be + generated lazily. - @param {Ember.Enumerable|Number} removing - An enumerable of the objects to be removed or the number of items to - be removed. + @param {String} keyName + @returns {Object} The cached value of the computed property, if any + */ + cacheFor: function(keyName) { + return Ember.cacheFor(this, keyName); + }, - @param {Ember.Enumerable|Number} adding - An enumerable of the objects to be added or the number of items to be - added. + /** @private - intended for debugging purposes */ + observersForKey: function(keyName) { + return Ember.observersFor(this, keyName); + } +}); - @returns {Ember.Enumerable} receiver - */ - enumerableContentWillChange: function(removing, adding) { - var removeCnt, addCnt, hasDelta; - if ('number' === typeof removing) removeCnt = removing; - else if (removing) removeCnt = get(removing, 'length'); - else removeCnt = removing = -1; - if ('number' === typeof adding) addCnt = adding; - else if (adding) addCnt = get(adding,'length'); - else addCnt = adding = -1; +})(); - hasDelta = addCnt<0 || removeCnt<0 || addCnt-removeCnt!==0; - if (removing === -1) removing = null; - if (adding === -1) adding = null; - if (hasDelta) Ember.propertyWillChange(this, 'length'); - Ember.sendEvent(this, '@enumerable:before', removing, adding); +(function() { +var get = Ember.get, set = Ember.set, getPath = Ember.getPath; - return this; - }, +Ember.TargetActionSupport = Ember.Mixin.create({ + target: null, + action: null, - /** - Invoke this method when the contents of your enumerable has changed. - This will notify any observers watching for content changes. If your are - implementing an ordered enumerable (such as an array), also pass the - start and end values where the content changed so that it can be used to - notify range observers. + targetObject: Ember.computed(function() { + var target = get(this, 'target'); - @param {Number} start - optional start offset for the content change. For unordered - enumerables, you should always pass -1. + if (Ember.typeOf(target) === "string") { + var value = getPath(this, target); + if (value === undefined) { value = getPath(window, target); } + return value; + } else { + return target; + } + }).property('target').cacheable(), - @param {Enumerable} added - optional enumerable containing items that were added to the set. For - ordered enumerables, this should be an ordered array of items. If no - items were added you can pass null. + triggerAction: function() { + var action = get(this, 'action'), + target = get(this, 'targetObject'); - @param {Enumerable} removes - optional enumerable containing items that were removed from the set. - For ordered enumerables, this hsould be an ordered array of items. If - no items were removed you can pass null. + if (target && action) { + var ret; - @returns {Object} receiver - */ - enumerableContentDidChange: function(removing, adding) { - var notify = this.propertyDidChange, removeCnt, addCnt, hasDelta; + if (typeof target.send === 'function') { + ret = target.send(action, this); + } else { + if (typeof action === 'string') { + action = target[action]; + } + ret = action.call(target, this); + } + if (ret !== false) ret = true; - if ('number' === typeof removing) removeCnt = removing; - else if (removing) removeCnt = get(removing, 'length'); - else removeCnt = removing = -1; + return ret; + } else { + return false; + } + } +}); - if ('number' === typeof adding) addCnt = adding; - else if (adding) addCnt = get(adding, 'length'); - else addCnt = adding = -1; +})(); - hasDelta = addCnt<0 || removeCnt<0 || addCnt-removeCnt!==0; - if (removing === -1) removing = null; - if (adding === -1) adding = null; - Ember.sendEvent(this, '@enumerable:change', removing, adding); - if (hasDelta) Ember.propertyDidChange(this, 'length'); +(function() { +var get = Ember.get, set = Ember.set, a_slice = Array.prototype.slice; - return this ; - } +/** @private */ +function xform(target, method, params) { + var args = a_slice.call(params, 2); + method.apply(target, args); +} -}) ; +Ember.Evented = Ember.Mixin.create({ + on: function(name, target, method) { + if (!method) { + method = target; + target = null; + } + Ember.addListener(this, name, target, method, xform); + }, + fire: function(name) { + Ember.sendEvent.apply(null, [this, name].concat(a_slice.call(arguments, 1))); + }, + off: function(name, target, method) { + Ember.removeListener(this, name, target, method); + } +}); })(); @@ -8488,423 +10135,289 @@ Ember.Enumerable = Ember.Mixin.create( /** @lends Ember.Enumerable */ { // Copyright: ©2011 Strobe Inc. and contributors. // License: Licensed under MIT license (see license.js) // ========================================================================== -// .......................................................... -// HELPERS -// - -var get = Ember.get, set = Ember.set, meta = Ember.meta, map = Ember.ArrayUtils.map; - -/** @private */ -function none(obj) { return obj===null || obj===undefined; } - -/** @private */ -function xform(target, method, params) { - method.call(target, params[0], params[2], params[3], params[4]); -} - -// .......................................................... -// ARRAY -// -/** - @namespace - - This module implements Observer-friendly Array-like behavior. This mixin is - picked up by the Array class as well as other controllers, etc. that want to - appear to be arrays. - - Unlike Ember.Enumerable, this mixin defines methods specifically for - collections that provide index-ordered access to their contents. When you - are designing code that needs to accept any kind of Array-like object, you - should use these methods instead of Array primitives because these will - properly notify observers of changes to the array. - - Although these methods are efficient, they do add a layer of indirection to - your application so it is a good idea to use them only when you need the - flexibility of using both true JavaScript arrays and "virtual" arrays such - as controllers and collections. - - You can use the methods defined in this module to access and modify array - contents in a KVO-friendly way. You can also be notified whenever the - membership if an array changes by changing the syntax of the property to - .observes('*myProperty.[]') . - - To support Ember.Array in your own class, you must override two - primitives to use it: replace() and objectAt(). - - Note that the Ember.Array mixin also incorporates the Ember.Enumerable mixin. All - Ember.Array-like objects are also enumerable. - @extends Ember.Enumerable - @since Ember 0.9.0 -*/ -Ember.Array = Ember.Mixin.create(Ember.Enumerable, /** @scope Ember.Array.prototype */ { +})(); - /** @private - compatibility */ - isSCArray: true, - - /** - @field {Number} length - Your array must support the length property. Your replace methods should - set this property whenever it changes. - */ - length: Ember.required(), - /** - This is one of the primitives you must implement to support Ember.Array. - Returns the object at the named index. If your object supports retrieving - the value of an array item using get() (i.e. myArray.get(0)), then you do - not need to implement this method yourself. +(function() { +// ========================================================================== +// Project: Ember Runtime +// Copyright: ©2011 Strobe Inc. and contributors. +// License: Licensed under MIT license (see license.js) +// ========================================================================== - @param {Number} idx - The index of the item to return. If idx exceeds the current length, - return null. - */ - objectAt: function(idx) { - if ((idx < 0) || (idx>=get(this, 'length'))) return undefined ; - return get(this, idx); - }, - /** - This returns the objects at the specified indexes, using objectAt. - @param {Array} indexes - An array of indexes of items to return. - */ - objectsAt: function(indexes) { - var self = this; - return map(indexes, function(value,idx){ return self.objectAt(idx); }); - }, +// NOTE: this object should never be included directly. Instead use Ember. +// Ember.Object. We only define this separately so that Ember.Set can depend on it - /** @private (nodoc) - overrides Ember.Enumerable version */ - nextObject: function(idx) { - return this.objectAt(idx); - }, - - /** - @field [] - This is the handler for the special array content property. If you get - this property, it will return this. If you set this property it a new - array, it will replace the current content. - This property overrides the default property defined in Ember.Enumerable. - */ - '[]': Ember.computed(function(key, value) { - if (value !== undefined) this.replace(0, get(this, 'length'), value) ; - return this ; - }).property().cacheable(), +var rewatch = Ember.rewatch; +var classToString = Ember.Mixin.prototype.toString; +var set = Ember.set, get = Ember.get; +var o_create = Ember.platform.create, + o_defineProperty = Ember.platform.defineProperty, + a_slice = Array.prototype.slice, + meta = Ember.meta; - /** @private (nodoc) - optimized version from Enumerable */ - contains: function(obj){ - return this.indexOf(obj) >= 0; - }, +/** @private */ +function makeCtor() { - // Add any extra methods to Ember.Array that are native to the built-in Array. - /** - Returns a new array that is a slice of the receiver. This implementation - uses the observable array methods to retrieve the objects for the new - slice. + // Note: avoid accessing any properties on the object since it makes the + // method a lot faster. This is glue code so we want it to be as fast as + // possible. - var arr = ['red', 'green', 'blue']; - arr.slice(0); => ['red', 'green', 'blue'] - arr.slice(0, 2); => ['red', 'green'] - arr.slice(1, 100); => ['green', 'blue'] + var wasApplied = false, initMixins, init = false, hasChains = false; - @param beginIndex {Integer} (Optional) index to begin slicing from. - @param endIndex {Integer} (Optional) index to end the slice at. - @returns {Array} New array with specified slice - */ - slice: function(beginIndex, endIndex) { - var ret = []; - var length = get(this, 'length') ; - if (none(beginIndex)) beginIndex = 0 ; - if (none(endIndex) || (endIndex > length)) endIndex = length ; - while(beginIndex < endIndex) { - ret[ret.length] = this.objectAt(beginIndex++) ; + var Class = function() { + if (!wasApplied) { Class.proto(); } // prepare prototype... + if (initMixins) { + this.reopen.apply(this, initMixins); + initMixins = null; + rewatch(this); // always rewatch just in case + Ember.Mixin.finishPartial(this); + this.init.apply(this, arguments); + } else { + if (hasChains) { + rewatch(this); + } else { + Ember.GUID_DESC.value = undefined; + o_defineProperty(this, Ember.GUID_KEY, Ember.GUID_DESC); + } + if (init===false) { init = this.init; } // cache for later instantiations + Ember.GUID_DESC.value = undefined; + o_defineProperty(this, '_super', Ember.GUID_DESC); + Ember.Mixin.finishPartial(this); + init.apply(this, arguments); } - return ret ; - }, - - /** - Returns the index of the given object's first occurrence. - If no startAt argument is given, the starting location to - search is 0. If it's negative, will count backward from - the end of the array. Returns -1 if no match is found. + }; - @param {Object} object the item to search for - @param {Number} startAt optional starting location to search, default 0 - @returns {Number} index or -1 if not found + Class.toString = classToString; + Class.willReopen = function() { + if (wasApplied) { + Class.PrototypeMixin = Ember.Mixin.create(Class.PrototypeMixin); + } - @example - var arr = ["a", "b", "c", "d", "a"]; - arr.indexOf("a"); => 0 - arr.indexOf("z"); => -1 - arr.indexOf("a", 2); => 4 - arr.indexOf("a", -1); => 4 - arr.indexOf("b", 3); => -1 - arr.indexOf("a", 100); => -1 - */ - indexOf: function(object, startAt) { - var idx, len = get(this, 'length'); + wasApplied = false; + }; + Class._initMixins = function(args) { initMixins = args; }; - if (startAt === undefined) startAt = 0; - if (startAt < 0) startAt += len; + Class.proto = function() { + var superclass = Class.superclass; + if (superclass) { superclass.proto(); } - for(idx=startAt;idx 4 - arr.lastIndexOf("z"); => -1 - arr.lastIndexOf("a", 2); => 0 - arr.lastIndexOf("a", -1); => 4 - arr.lastIndexOf("b", 3); => 1 - arr.lastIndexOf("a", 100); => 4 - */ - lastIndexOf: function(object, startAt) { - var idx, len = get(this, 'length'); + return Class; - if (startAt === undefined || startAt >= len) startAt = len-1; - if (startAt < 0) startAt += len; +} - for(idx=startAt;idx>=0;idx--) { - if (this.objectAt(idx) === object) return idx ; - } - return -1; - }, - - // .......................................................... - // ARRAY OBSERVERS - // - - /** - Adds an array observer to the receiving array. The array observer object - normally must implement two methods: - - * `arrayWillChange(start, removeCount, addCount)` - This method will be - called just before the array is modified. - * `arrayDidChange(start, removeCount, addCount)` - This method will be - called just after the array is modified. - - Both callbacks will be passed the starting index of the change as well a - a count of the items to be removed and added. You can use these callbacks - to optionally inspect the array during the change, clear caches, or do - any other bookkeeping necessary. - - In addition to passing a target, you can also include an options hash - which you can use to override the method names that will be invoked on the - target. - - @param {Object} target - The observer object. - - @param {Hash} opts - Optional hash of configuration options including willChange, didChange, - and a context option. - - @returns {Ember.Array} receiver - */ - addArrayObserver: function(target, opts) { - var willChange = (opts && opts.willChange) || 'arrayWillChange', - didChange = (opts && opts.didChange) || 'arrayDidChange'; +var CoreObject = makeCtor(); - var hasObservers = get(this, 'hasArrayObservers'); - if (!hasObservers) Ember.propertyWillChange(this, 'hasArrayObservers'); - Ember.addListener(this, '@array:before', target, willChange, xform); - Ember.addListener(this, '@array:change', target, didChange, xform); - if (!hasObservers) Ember.propertyDidChange(this, 'hasArrayObservers'); +CoreObject.PrototypeMixin = Ember.Mixin.create( +/** @scope Ember.CoreObject */ { + + reopen: function() { + Ember.Mixin._apply(this, arguments, true); return this; }, - + + isInstance: true, + + /** @private */ + init: function() {}, + + /** @field */ + isDestroyed: false, + + /** @field */ + isDestroying: false, + /** - Removes an array observer from the object if the observer is current - registered. Calling this method multiple times with the same object will - have no effect. - - @param {Object} target - The object observing the array. - - @returns {Ember.Array} receiver + Destroys an object by setting the isDestroyed flag and removing its + metadata, which effectively destroys observers and bindings. + + If you try to set a property on a destroyed object, an exception will be + raised. + + Note that destruction is scheduled for the end of the run loop and does not + happen immediately. + + @returns {Ember.Object} receiver */ - removeArrayObserver: function(target, opts) { - var willChange = (opts && opts.willChange) || 'arrayWillChange', - didChange = (opts && opts.didChange) || 'arrayDidChange'; + destroy: function() { + if (this.isDestroying) { return; } - var hasObservers = get(this, 'hasArrayObservers'); - if (hasObservers) Ember.propertyWillChange(this, 'hasArrayObservers'); - Ember.removeListener(this, '@array:before', target, willChange, xform); - Ember.removeListener(this, '@array:change', target, didChange, xform); - if (hasObservers) Ember.propertyDidChange(this, 'hasArrayObservers'); + this.isDestroying = true; + + if (this.willDestroy) { this.willDestroy(); } + + set(this, 'isDestroyed', true); + Ember.run.schedule('destroy', this, this._scheduledDestroy); return this; }, - - /** - Becomes true whenever the array currently has observers watching changes - on the array. - - @property {Boolean} - */ - hasArrayObservers: Ember.computed(function() { - return Ember.hasListeners(this, '@array:change') || Ember.hasListeners(this, '@array:before'); - }).property().cacheable(), - + /** - If you are implementing an object that supports Ember.Array, call this - method just before the array content changes to notify any observers and - invalidate any related properties. Pass the starting index of the change - as well as a delta of the amounts to change. - - @param {Number} startIdx - The starting index in the array that will change. - - @param {Number} removeAmt - The number of items that will be removed. If you pass null assumes 0 - - @param {Number} addAmt - The number of items that will be added. If you pass null assumes 0. - - @returns {Ember.Array} receiver + Invoked by the run loop to actually destroy the object. This is + scheduled for execution by the `destroy` method. + + @private */ - arrayContentWillChange: function(startIdx, removeAmt, addAmt) { + _scheduledDestroy: function() { + Ember.destroy(this); + if (this.didDestroy) { this.didDestroy(); } + }, - // if no args are passed assume everything changes - if (startIdx===undefined) { - startIdx = 0; - removeAmt = addAmt = -1; - } else { - if (!removeAmt) removeAmt=0; - if (!addAmt) addAmt=0; - } + bind: function(to, from) { + if (!(from instanceof Ember.Binding)) { from = Ember.Binding.from(from); } + from.to(to).connect(this); + return from; + }, - Ember.sendEvent(this, '@array:before', startIdx, removeAmt, addAmt); + toString: function() { + return '<'+this.constructor.toString()+':'+Ember.guidFor(this)+'>'; + } +}); - var removing, lim; - if (startIdx>=0 && removeAmt>=0 && get(this, 'hasEnumerableObservers')) { - removing = []; - lim = startIdx+removeAmt; - for(var idx=startIdx;idx=0 && addAmt>=0 && get(this, 'hasEnumerableObservers')) { - adding = []; - lim = startIdx+addAmt; - for(var idx=startIdx;idx0) { this._initMixins(arguments); } + return new C(); + }, - You should implement the compare() method. + reopen: function() { + this.willReopen(); + var PrototypeMixin = this.PrototypeMixin; + PrototypeMixin.reopen.apply(PrototypeMixin, arguments); + return this; + }, - @since Ember 0.9 -*/ -Ember.Comparable = Ember.Mixin.create( /** @scope Ember.Comparable.prototype */{ + reopenClass: function() { + var ClassMixin = this.ClassMixin; + ClassMixin.reopen.apply(ClassMixin, arguments); + Ember.Mixin._apply(this, arguments, false); + return this; + }, + + detect: function(obj) { + if ('function' !== typeof obj) { return false; } + while(obj) { + if (obj===this) { return true; } + obj = obj.superclass; + } + return false; + }, + + detectInstance: function(obj) { + return obj instanceof this; + }, /** - walk like a duck. Indicates that the object can be compared. + In some cases, you may want to annotate computed properties with additional + metadata about how they function or what values they operate on. For example, + computed property functions may close over variables that are then no longer + available for introspection. - @type Boolean - @default true - @constant + You can pass a hash of these values to a computed property like this: + + person: function() { + var personId = this.get('personId'); + return App.Person.create({ id: personId }); + }.property().meta({ type: App.Person }) + + Once you've done this, you can retrieve the values saved to the computed + property from your class like this: + + MyClass.metaForProperty('person'); + + This will return the original hash that was passed to `meta()`. */ - isComparable: true, + metaForProperty: function(key) { + var desc = meta(this.proto(), false).descs[key]; + + Ember.assert("metaForProperty() could not find a computed property with key '"+key+"'.", !!desc && desc instanceof Ember.ComputedProperty); + return desc._meta || {}; + }, + + /** + Iterate over each computed property for the class, passing its name + and any associated metadata (see `metaForProperty`) to the callback. + */ + eachComputedProperty: function(callback, binding) { + var proto = this.proto(), + descs = meta(proto).descs, + empty = {}, + property; + + for (var name in descs) { + property = descs[name]; - /** - Override to return the result of the comparison of the two parameters. The - compare method should return: + if (property instanceof Ember.ComputedProperty) { + callback.call(binding || this, name, property._meta || empty); + } + } + } - - `-1` if `a < b` - - `0` if `a == b` - - `1` if `a > b` +}); - Default implementation raises an exception. +CoreObject.ClassMixin = ClassMixin; +ClassMixin.apply(CoreObject); + +/** + @class +*/ +Ember.CoreObject = CoreObject; - @param a {Object} the first object to compare - @param b {Object} the second object to compare - @returns {Integer} the result of the comparison - */ - compare: Ember.required(Function) -}); })(); @@ -8914,530 +10427,539 @@ Ember.Comparable = Ember.Mixin.create( /** @scope Ember.Comparable.prototype */{ (function() { // ========================================================================== // Project: Ember Runtime -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2010 Apple Inc. All rights reserved. +// Copyright: ©2011 Strobe Inc. and contributors. // License: Licensed under MIT license (see license.js) // ========================================================================== -var get = Ember.get, set = Ember.set; +var get = Ember.get, set = Ember.set, guidFor = Ember.guidFor, none = Ember.none; /** - @namespace + @class - Implements some standard methods for copying an object. Add this mixin to - any object you create that can create a copy of itself. This mixin is - added automatically to the built-in array. + An unordered collection of objects. - You should generally implement the copy() method to return a copy of the - receiver. + A Set works a bit like an array except that its items are not ordered. + You can create a set to efficiently test for membership for an object. You + can also iterate through a set just like an array, even accessing objects + by index, however there is no guarantee as to their order. - Note that frozenCopy() will only work if you also implement Ember.Freezable. + All Sets are observable via the Enumerable Observer API - which works + on any enumerable object including both Sets and Arrays. - @since Ember 0.9 -*/ -Ember.Copyable = Ember.Mixin.create( -/** @scope Ember.Copyable.prototype */ { + ## Creating a Set - /** - Override to return a copy of the receiver. Default implementation raises - an exception. + You can create a set like you would most objects using + `new Ember.Set()`. Most new sets you create will be empty, but you can + also initialize the set with some content by passing an array or other + enumerable of objects to the constructor. - @param deep {Boolean} if true, a deep copy of the object should be made - @returns {Object} copy of receiver - */ - copy: Ember.required(Function), + Finally, you can pass in an existing set and the set will be copied. You + can also create a copy of a set by calling `Ember.Set#copy()`. - /** - If the object implements Ember.Freezable, then this will return a new copy - if the object is not frozen and the receiver if the object is frozen. + #js + // creates a new empty set + var foundNames = new Ember.Set(); - Raises an exception if you try to call this method on a object that does - not support freezing. + // creates a set with four names in it. + var names = new Ember.Set(["Charles", "Tom", "Juan", "Alex"]); // :P - You should use this method whenever you want a copy of a freezable object - since a freezable object can simply return itself without actually - consuming more memory. + // creates a copy of the names set. + var namesCopy = new Ember.Set(names); - @returns {Object} copy of receiver or receiver - */ - frozenCopy: function() { - if (Ember.Freezable && Ember.Freezable.detect(this)) { - return get(this, 'isFrozen') ? this : this.copy().freeze(); - } else { - throw new Error(Ember.String.fmt("%@ does not support freezing", [this])); - } - } -}); + // same as above. + var anotherNamesCopy = names.copy(); + ## Adding/Removing Objects + You generally add or remove objects from a set using `add()` or + `remove()`. You can add any type of object including primitives such as + numbers, strings, and booleans. + Unlike arrays, objects can only exist one time in a set. If you call `add()` + on a set with the same object multiple times, the object will only be added + once. Likewise, calling `remove()` with the same object multiple times will + remove the object the first time and have no effect on future calls until + you add the object to the set again. -})(); + NOTE: You cannot add/remove null or undefined to a set. Any attempt to do so + will be ignored. + In addition to add/remove you can also call `push()`/`pop()`. Push behaves + just like `add()` but `pop()`, unlike `remove()` will pick an arbitrary + object, remove it and return it. This is a good way to use a set as a job + queue when you don't care which order the jobs are executed in. + ## Testing for an Object -(function() { -// ========================================================================== -// Project: Ember Runtime -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2010 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== + To test for an object's presence in a set you simply call + `Ember.Set#contains()`. + ## Observing changes + When using `Ember.Set`, you can observe the `"[]"` property to be + alerted whenever the content changes. You can also add an enumerable + observer to the set to be notified of specific objects that are added and + removed from the set. See `Ember.Enumerable` for more information on + enumerables. + This is often unhelpful. If you are filtering sets of objects, for instance, + it is very inefficient to re-filter all of the items each time the set + changes. It would be better if you could just adjust the filtered set based + on what was changed on the original set. The same issue applies to merging + sets, as well. + ## Other Methods -var get = Ember.get, set = Ember.set; + `Ember.Set` primary implements other mixin APIs. For a complete reference + on the methods you will use with `Ember.Set`, please consult these mixins. + The most useful ones will be `Ember.Enumerable` and + `Ember.MutableEnumerable` which implement most of the common iterator + methods you are used to on Array. -/** - @namespace + Note that you can also use the `Ember.Copyable` and `Ember.Freezable` + APIs on `Ember.Set` as well. Once a set is frozen it can no longer be + modified. The benefit of this is that when you call frozenCopy() on it, + Ember will avoid making copies of the set. This allows you to write + code that can know with certainty when the underlying set data will or + will not be modified. - The Ember.Freezable mixin implements some basic methods for marking an object - as frozen. Once an object is frozen it should be read only. No changes - may be made the internal state of the object. + @extends Ember.Enumerable + @extends Ember.MutableEnumerable + @extends Ember.Copyable + @extends Ember.Freezable - ## Enforcement + @since Ember 0.9 +*/ +Ember.Set = Ember.CoreObject.extend(Ember.MutableEnumerable, Ember.Copyable, Ember.Freezable, + /** @scope Ember.Set.prototype */ { - To fully support freezing in your subclass, you must include this mixin and - override any method that might alter any property on the object to instead - raise an exception. You can check the state of an object by checking the - isFrozen property. + // .......................................................... + // IMPLEMENT ENUMERABLE APIS + // - Although future versions of JavaScript may support language-level freezing - object objects, that is not the case today. Even if an object is freezable, - it is still technically possible to modify the object, even though it could - break other parts of your application that do not expect a frozen object to - change. It is, therefore, very important that you always respect the - isFrozen property on all freezable objects. + /** + This property will change as the number of objects in the set changes. - ## Example Usage + @property Number + @default 0 + */ + length: 0, - The example below shows a simple object that implement the Ember.Freezable - protocol. + /** + Clears the set. This is useful if you want to reuse an existing set + without having to recreate it. - Contact = Ember.Object.extend(Ember.Freezable, { + var colors = new Ember.Set(["red", "green", "blue"]); + colors.length; => 3 + colors.clear(); + colors.length; => 0 - firstName: null, + @returns {Ember.Set} An empty Set + */ + clear: function() { + if (this.isFrozen) { throw new Error(Ember.FROZEN_ERROR); } - lastName: null, + var len = get(this, 'length'); + if (len === 0) { return this; } - // swaps the names - swapNames: function() { - if (this.get('isFrozen')) throw Ember.FROZEN_ERROR; - var tmp = this.get('firstName'); - this.set('firstName', this.get('lastName')); - this.set('lastName', tmp); - return this; - } + var guid; - }); + this.enumerableContentWillChange(len, 0); + Ember.propertyWillChange(this, 'firstObject'); + Ember.propertyWillChange(this, 'lastObject'); - c = Context.create({ firstName: "John", lastName: "Doe" }); - c.swapNames(); => returns c - c.freeze(); - c.swapNames(); => EXCEPTION + for (var i=0; i < len; i++){ + guid = guidFor(this[i]); + delete this[guid]; + delete this[i]; + } - ## Copying + set(this, 'length', 0); - Usually the Ember.Freezable protocol is implemented in cooperation with the - Ember.Copyable protocol, which defines a frozenCopy() method that will return - a frozen object, if the object implements this method as well. + Ember.propertyDidChange(this, 'firstObject'); + Ember.propertyDidChange(this, 'lastObject'); + this.enumerableContentDidChange(len, 0); - @since Ember 0.9 -*/ -Ember.Freezable = Ember.Mixin.create( -/** @scope Ember.Freezable.prototype */ { + return this; + }, /** - Set to true when the object is frozen. Use this property to detect whether - your object is frozen or not. - - @property {Boolean} - */ - isFrozen: false, + Returns true if the passed object is also an enumerable that contains the + same objects as the receiver. - /** - Freezes the object. Once this method has been called the object should - no longer allow any properties to be edited. + var colors = ["red", "green", "blue"], + same_colors = new Ember.Set(colors); + same_colors.isEqual(colors); => true + same_colors.isEqual(["purple", "brown"]); => false - @returns {Object} reciever + @param {Ember.Set} obj the other object. + @returns {Boolean} */ - freeze: function() { - if (get(this, 'isFrozen')) return this; - set(this, 'isFrozen', true); - return this; - } + isEqual: function(obj) { + // fail fast + if (!Ember.Enumerable.detect(obj)) return false; -}); + var loc = get(this, 'length'); + if (get(obj, 'length') !== loc) return false; -Ember.FROZEN_ERROR = "Frozen object cannot be modified."; + while(--loc >= 0) { + if (!obj.contains(this[loc])) return false; + } + return true; + }, + /** + Adds an object to the set. Only non-null objects can be added to a set + and those can only be added once. If the object is already in the set or + the passed value is null this method will have no effect. + This is an alias for `Ember.MutableEnumerable.addObject()`. -})(); + var colors = new Ember.Set(); + colors.add("blue"); => ["blue"] + colors.add("blue"); => ["blue"] + colors.add("red"); => ["blue", "red"] + colors.add(null); => ["blue", "red"] + colors.add(undefined); => ["blue", "red"] + @function + @param {Object} obj The object to add. + @returns {Ember.Set} The set itself. + */ + add: Ember.alias('addObject'), + /** + Removes the object from the set if it is found. If you pass a null value + or an object that is already not in the set, this method will have no + effect. This is an alias for `Ember.MutableEnumerable.removeObject()`. -(function() { -// ========================================================================== -// Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. and contributors. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -var forEach = Ember.ArrayUtils.forEach; + var colors = new Ember.Set(["red", "green", "blue"]); + colors.remove("red"); => ["blue", "green"] + colors.remove("purple"); => ["blue", "green"] + colors.remove(null); => ["blue", "green"] -/** - @class + @function + @param {Object} obj The object to remove + @returns {Ember.Set} The set itself. + */ + remove: Ember.alias('removeObject'), - This mixin defines the API for modifying generic enumerables. These methods - can be applied to an object regardless of whether it is ordered or - unordered. + /** + Removes the last element from the set and returns it, or null if it's empty. - Note that an Enumerable can change even if it does not implement this mixin. - For example, a MappedEnumerable cannot be directly modified but if its - underlying enumerable changes, it will change also. + var colors = new Ember.Set(["green", "blue"]); + colors.pop(); => "blue" + colors.pop(); => "green" + colors.pop(); => null - ## Adding Objects + @returns {Object} The removed object from the set or null. + */ + pop: function() { + if (get(this, 'isFrozen')) throw new Error(Ember.FROZEN_ERROR); + var obj = this.length > 0 ? this[this.length-1] : null; + this.remove(obj); + return obj; + }, - To add an object to an enumerable, use the addObject() method. This - method will only add the object to the enumerable if the object is not - already present and the object if of a type supported by the enumerable. + /** + Inserts the given object on to the end of the set. It returns + the set itself. - javascript: - set.addObject(contact); + This is an alias for `Ember.MutableEnumerable.addObject()`. - ## Removing Objects + var colors = new Ember.Set(); + colors.push("red"); => ["red"] + colors.push("green"); => ["red", "green"] + colors.push("blue"); => ["red", "green", "blue"] - To remove an object form an enumerable, use the removeObject() method. This - will only remove the object if it is already in the enumerable, otherwise - this method has no effect. + @function + @returns {Ember.Set} The set itself. + */ + push: Ember.alias('addObject'), - javascript: - set.removeObject(contact); + /** + Removes the last element from the set and returns it, or null if it's empty. - ## Implementing In Your Own Code + This is an alias for `Ember.Set.pop()`. - If you are implementing an object and want to support this API, just include - this mixin in your class and implement the required methods. In your unit - tests, be sure to apply the Ember.MutableEnumerableTests to your object. + var colors = new Ember.Set(["green", "blue"]); + colors.shift(); => "blue" + colors.shift(); => "green" + colors.shift(); => null - @extends Ember.Mixin - @extends Ember.Enumerable -*/ -Ember.MutableEnumerable = Ember.Mixin.create(Ember.Enumerable, - /** @scope Ember.MutableEnumerable.prototype */ { + @function + @returns {Object} The removed object from the set or null. + */ + shift: Ember.alias('pop'), /** - __Required.__ You must implement this method to apply this mixin. - - Attempts to add the passed object to the receiver if the object is not - already present in the collection. If the object is present, this method - has no effect. + Inserts the given object on to the end of the set. It returns + the set itself. - If the passed object is of a type not supported by the receiver - then this method should raise an exception. + This is an alias of `Ember.Set.push()` - @param {Object} object - The object to add to the enumerable. + var colors = new Ember.Set(); + colors.unshift("red"); => ["red"] + colors.unshift("green"); => ["red", "green"] + colors.unshift("blue"); => ["red", "green", "blue"] - @returns {Object} the passed object + @function + @returns {Ember.Set} The set itself. */ - addObject: Ember.required(Function), + unshift: Ember.alias('push'), /** - Adds each object in the passed enumerable to the receiver. + Adds each object in the passed enumerable to the set. + + This is an alias of `Ember.MutableEnumerable.addObjects()` + var colors = new Ember.Set(); + colors.addEach(["red", "green", "blue"]); => ["red", "green", "blue"] + + @function @param {Ember.Enumerable} objects the objects to add. - @returns {Object} receiver + @returns {Ember.Set} The set itself. */ - addObjects: function(objects) { - Ember.beginPropertyChanges(this); - forEach(objects, function(obj) { this.addObject(obj); }, this); - Ember.endPropertyChanges(this); - return this; - }, + addEach: Ember.alias('addObjects'), /** - __Required.__ You must implement this method to apply this mixin. - - Attempts to remove the passed object from the receiver collection if the - object is in present in the collection. If the object is not present, - this method has no effect. - - If the passed object is of a type not supported by the receiver - then this method should raise an exception. - - @param {Object} object - The object to remove from the enumerable. - - @returns {Object} the passed object - */ - removeObject: Ember.required(Function), + Removes each object in the passed enumerable to the set. + This is an alias of `Ember.MutableEnumerable.removeObjects()` - /** - Removes each objects in the passed enumerable from the receiver. + var colors = new Ember.Set(["red", "green", "blue"]); + colors.removeEach(["red", "blue"]); => ["green"] - @param {Ember.Enumerable} objects the objects to remove - @returns {Object} receiver + @function + @param {Ember.Enumerable} objects the objects to remove. + @returns {Ember.Set} The set itself. */ - removeObjects: function(objects) { - Ember.beginPropertyChanges(this); - forEach(objects, function(obj) { this.removeObject(obj); }, this); - Ember.endPropertyChanges(this); - return this; - } + removeEach: Ember.alias('removeObjects'), -}); + // .......................................................... + // PRIVATE ENUMERABLE SUPPORT + // -})(); + /** @private */ + init: function(items) { + this._super(); + if (items) this.addObjects(items); + }, + /** @private (nodoc) - implement Ember.Enumerable */ + nextObject: function(idx) { + return this[idx]; + }, + /** @private - more optimized version */ + firstObject: Ember.computed(function() { + return this.length > 0 ? this[0] : undefined; + }).property().cacheable(), -(function() { -// ========================================================================== -// Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. and contributors. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -// .......................................................... -// CONSTANTS -// + /** @private - more optimized version */ + lastObject: Ember.computed(function() { + return this.length > 0 ? this[this.length-1] : undefined; + }).property().cacheable(), -var OUT_OF_RANGE_EXCEPTION = "Index out of range" ; -var EMPTY = []; + /** @private (nodoc) - implements Ember.MutableEnumerable */ + addObject: function(obj) { + if (get(this, 'isFrozen')) throw new Error(Ember.FROZEN_ERROR); + if (none(obj)) return this; // nothing to do -// .......................................................... -// HELPERS -// + var guid = guidFor(obj), + idx = this[guid], + len = get(this, 'length'), + added ; -var get = Ember.get, set = Ember.set, forEach = Ember.ArrayUtils.forEach; + if (idx>=0 && idx= length, then append - to the end of the array. + var guid = guidFor(obj), + idx = this[guid], + len = get(this, 'length'), + isFirst = idx === 0, + isLast = idx === len-1, + last, removed; - @param {Number} amt - Number of elements that should be removed from the array, starting at - *idx*. - @param {Array} objects - An array of zero or more objects that should be inserted into the array - at *idx* - */ - replace: Ember.required(), + if (idx>=0 && idx 3 - colors.clear(); => [] - colors.length(); => 0 + // swap items - basically move the item to the end so it can be removed + if (idx < len-1) { + last = this[len-1]; + this[idx] = last; + this[guidFor(last)] = idx; + } + + delete this[guid]; + delete this[len-1]; + set(this, 'length', len-1); + + if (isFirst) { Ember.propertyDidChange(this, 'firstObject'); } + if (isLast) { Ember.propertyDidChange(this, 'lastObject'); } + this.enumerableContentDidChange(removed, null); + } - @returns {Ember.Array} An empty Array. - */ - clear: function () { - var len = get(this, 'length'); - if (len === 0) return this; - this.replace(0, len, EMPTY); return this; }, - /** - This will use the primitive replace() method to insert an object at the - specified index. - - var colors = ["red", "green", "blue"]; - colors.insertAt(2, "yellow"); => ["red", "green", "yellow", "blue"] - colors.insertAt(5, "orange"); => Error: Index out of range + /** @private (nodoc) - optimized version */ + contains: function(obj) { + return this[guidFor(obj)]>=0; + }, - @param {Number} idx index of insert the object at. - @param {Object} object object to insert - */ - insertAt: function(idx, object) { - if (idx > get(this, 'length')) throw new Error(OUT_OF_RANGE_EXCEPTION) ; - this.replace(idx, 0, [object]) ; - return this ; + /** @private (nodoc) */ + copy: function() { + var C = this.constructor, ret = new C(), loc = get(this, 'length'); + set(ret, 'length', loc); + while(--loc>=0) { + ret[loc] = this[loc]; + ret[guidFor(this[loc])] = loc; + } + return ret; }, - /** - Remove an object at the specified index using the replace() primitive - method. You can pass either a single index, or a start and a length. + /** @private */ + toString: function() { + var len = this.length, idx, array = []; + for(idx = 0; idx < len; idx++) { + array[idx] = this[idx]; + } + return "Ember.Set<%@>".fmt(array.join(',')); + } - If you pass a start and length that is beyond the - length this method will throw an Ember.OUT_OF_RANGE_EXCEPTION +}); - var colors = ["red", "green", "blue", "yellow", "orange"]; - colors.removeAt(0); => ["green", "blue", "yellow", "orange"] - colors.removeAt(2, 2); => ["green", "blue"] - colors.removeAt(4, 2); => Error: Index out of range +})(); - @param {Number|Ember.IndexSet} start index, start of range, or index set - @param {Number} len length of passing range - @returns {Object} receiver - */ - removeAt: function(start, len) { - var delta = 0; - if ('number' === typeof start) { +(function() { +// ========================================================================== +// Project: Ember Runtime +// Copyright: ©2011 Strobe Inc. and contributors. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +Ember.CoreObject.subclasses = new Ember.Set(); - if ((start < 0) || (start >= get(this, 'length'))) { - throw new Error(OUT_OF_RANGE_EXCEPTION); - } +/** + @class + @extends Ember.CoreObject + @extends Ember.Observable +*/ +Ember.Object = Ember.CoreObject.extend(Ember.Observable); - // fast case - if (len === undefined) len = 1; - this.replace(start, len, EMPTY); - } - return this ; - }, - /** - Push the object onto the end of the array. Works just like push() but it - is KVO-compliant. - var colors = ["red", "green", "blue"]; - colors.pushObject("black"); => ["red", "green", "blue", "black"] - colors.pushObject(["yellow", "orange"]); => ["red", "green", "blue", "black", ["yellow", "orange"]] +})(); - */ - pushObject: function(obj) { - this.insertAt(get(this, 'length'), obj) ; - return obj ; - }, - /** - Add the objects in the passed numerable to the end of the array. Defers - notifying observers of the change until all objects are added. - var colors = ["red", "green", "blue"]; - colors.pushObjects("black"); => ["red", "green", "blue", "black"] - colors.pushObjects(["yellow", "orange"]); => ["red", "green", "blue", "black", "yellow", "orange"] +(function() { +// ========================================================================== +// Project: Ember Runtime +// Copyright: ©2011 Strobe Inc. and contributors. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +var indexOf = Ember.ArrayUtils.indexOf; - @param {Ember.Enumerable} objects the objects to add - @returns {Ember.Array} receiver - */ - pushObjects: function(objects) { - this.replace(get(this, 'length'), 0, objects); - return this; - }, +/** + @private + A Namespace is an object usually used to contain other objects or methods + such as an application or framework. Create a namespace anytime you want + to define one of these new containers. - /** - Pop object from array or nil if none are left. Works just like pop() but - it is KVO-compliant. + # Example Usage - var colors = ["red", "green", "blue"]; - colors.popObject(); => "blue" - console.log(colors); => ["red", "green"] + MyFramework = Ember.Namespace.create({ + VERSION: '1.0.0' + }); - */ - popObject: function() { - var len = get(this, 'length') ; - if (len === 0) return null ; +*/ +Ember.Namespace = Ember.Object.extend({ + isNamespace: true, - var ret = this.objectAt(len-1) ; - this.removeAt(len-1, 1) ; - return ret ; + init: function() { + Ember.Namespace.NAMESPACES.push(this); + Ember.Namespace.PROCESSED = false; }, - /** - Shift an object from start of array or nil if none are left. Works just - like shift() but it is KVO-compliant. - - var colors = ["red", "green", "blue"]; - colors.shiftObject(); => "red" - console.log(colors); => ["green", "blue"] - - */ - shiftObject: function() { - if (get(this, 'length') === 0) return null ; - var ret = this.objectAt(0) ; - this.removeAt(0) ; - return ret ; + toString: function() { + Ember.identifyNamespaces(); + return this[Ember.GUID_KEY+'_name']; }, - /** - Unshift an object to start of array. Works just like unshift() but it is - KVO-compliant. + destroy: function() { + var namespaces = Ember.Namespace.NAMESPACES; + window[this.toString()] = undefined; + namespaces.splice(indexOf(namespaces, this), 1); + this._super(); + } +}); - var colors = ["red", "green", "blue"]; - colors.unshiftObject("yellow"); => ["yellow", "red", "green", "blue"] - colors.unshiftObject(["black", "white"]); => [["black", "white"], "yellow", "red", "green", "blue"] +Ember.Namespace.NAMESPACES = [Ember]; +Ember.Namespace.PROCESSED = false; - */ - unshiftObject: function(obj) { - this.insertAt(0, obj) ; - return obj ; - }, +})(); - /** - Adds the named objects to the beginning of the array. Defers notifying - observers until all objects have been added. - var colors = ["red", "green", "blue"]; - colors.unshiftObjects(["black", "white"]); => ["black", "white", "red", "green", "blue"] - colors.unshiftObjects("yellow"); => Type Error: 'undefined' is not a function - @param {Ember.Enumerable} objects the objects to add - @returns {Ember.Array} receiver - */ - unshiftObjects: function(objects) { - this.beginPropertyChanges(); - forEach(objects, function(obj) { this.unshiftObject(obj); }, this); - this.endPropertyChanges(); - return this; - }, +(function() { +// ========================================================================== +// Project: Ember Runtime +// Copyright: ©2011 Strobe Inc. and contributors. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +/** + @private - // .......................................................... - // IMPLEMENT Ember.MutableEnumerable - // + Defines a namespace that will contain an executable application. This is + very similar to a normal namespace except that it is expected to include at + least a 'ready' function which can be run to initialize the application. - /** @private (nodoc) */ - removeObject: function(obj) { - var loc = get(this, 'length') || 0; - while(--loc >= 0) { - var curObject = this.objectAt(loc) ; - if (curObject === obj) this.removeAt(loc) ; - } - return this ; - }, + Currently Ember.Application is very similar to Ember.Namespace. However, this + class may be augmented by additional frameworks so it is important to use + this instance when building new applications. - /** @private (nodoc) */ - addObject: function(obj) { - if (!this.contains(obj)) this.pushObject(obj); - return this ; - } + # Example Usage + + MyApp = Ember.Application.create({ + VERSION: '1.0.0', + store: Ember.Store.create().from(Ember.fixtures) + }); -}); + MyApp.ready = function() { + //..init code goes here... + } + +*/ +Ember.Application = Ember.Namespace.extend(); })(); @@ -9450,490 +10972,355 @@ Ember.MutableArray = Ember.Mixin.create(Ember.Array, Ember.MutableEnumerable, // Copyright: ©2011 Strobe Inc. and contributors. // License: Licensed under MIT license (see license.js) // ========================================================================== - var get = Ember.get, set = Ember.set; /** @class - ## Overview - - This mixin provides properties and property observing functionality, core - features of the Ember object model. - - Properties and observers allow one object to observe changes to a - property on another object. This is one of the fundamental ways that - models, controllers and views communicate with each other in an Ember - application. - - Any object that has this mixin applied can be used in observer - operations. That includes Ember.Object and most objects you will - interact with as you write your Ember application. + An ArrayProxy wraps any other object that implements Ember.Array and/or + Ember.MutableArray, forwarding all requests. This makes it very useful for + a number of binding use cases or other cases where being able to swap + out the underlying array is useful. - Note that you will not generally apply this mixin to classes yourself, - but you will use the features provided by this module frequently, so it - is important to understand how to use it. - - ## Using get() and set() - - Because of Ember's support for bindings and observers, you will always - access properties using the get method, and set properties using the - set method. This allows the observing objects to be notified and - computed properties to be handled properly. - - More documentation about `get` and `set` are below. - - ## Observing Property Changes + A simple example of usage: - You typically observe property changes simply by adding the `observes` - call to the end of your method declarations in classes that you write. - For example: + var pets = ['dog', 'cat', 'fish']; + var ap = Ember.ArrayProxy.create({ content: Ember.A(pets) }); + ap.get('firstObject'); // => 'dog' + ap.set('content', ['amoeba', 'paramecium']); + ap.get('firstObject'); // => 'amoeba' - Ember.Object.create({ - valueObserver: function() { - // Executes whenever the "value" property changes - }.observes('value') - }); - - Although this is the most common way to add an observer, this capability - is actually built into the Ember.Object class on top of two methods - defined in this mixin: `addObserver` and `removeObserver`. You can use - these two methods to add and remove observers yourself if you need to - do so at runtime. + This class can also be useful as a layer to transform the contents of + an array, as they are accessed. This can be done by overriding + `objectAtContent`: - To add an observer for a property, call: + var pets = ['dog', 'cat', 'fish']; + var ap = Ember.ArrayProxy.create({ + content: Ember.A(pets), + objectAtContent: function(idx) { + return this.get('content').objectAt(idx).toUpperCase(); + } + }); + ap.get('firstObject'); // => 'DOG' - object.addObserver('propertyKey', targetObject, targetAction) - This will call the `targetAction` method on the `targetObject` to be called - whenever the value of the `propertyKey` changes. - - @extends Ember.Mixin + @extends Ember.Object + @extends Ember.Array + @extends Ember.MutableArray */ -Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ { - - /** @private - compatibility */ - isObserverable: true, +Ember.ArrayProxy = Ember.Object.extend(Ember.MutableArray, +/** @scope Ember.ArrayProxy.prototype */ { /** - Retrieves the value of a property from the object. - - This method is usually similar to using object[keyName] or object.keyName, - however it supports both computed properties and the unknownProperty - handler. - - Because `get` unifies the syntax for accessing all these kinds - of properties, it can make many refactorings easier, such as replacing a - simple property with a computed property, or vice versa. - - ### Computed Properties - - Computed properties are methods defined with the `property` modifier - declared at the end, such as: - - fullName: function() { - return this.getEach('firstName', 'lastName').compact().join(' '); - }.property('firstName', 'lastName') - - When you call `get` on a computed property, the function will be - called and the return value will be returned instead of the function - itself. - - ### Unknown Properties - - Likewise, if you try to call `get` on a property whose value is - undefined, the unknownProperty() method will be called on the object. - If this method returns any value other than undefined, it will be returned - instead. This allows you to implement "virtual" properties that are - not defined upfront. + The content array. Must be an object that implements Ember.Array and/or + Ember.MutableArray. - @param {String} key The property to retrieve - @returns {Object} The property value or undefined. + @property {Ember.Array} */ - get: function(keyName) { - return get(this, keyName); - }, + content: null, /** - To get multiple properties at once, call getProperties - with a list of strings: + Should actually retrieve the object at the specified index from the + content. You can override this method in subclasses to transform the + content item to something new. - record.getProperties('firstName', 'lastName', 'zipCode'); // => { firstName: 'John', lastName: 'Doe', zipCode: '10011' } + This method will only be called if content is non-null. - @param {String...} list of keys to get - @returns {Hash} + @param {Number} idx + The index to retrieve. + + @returns {Object} the value or undefined if none found */ - getProperties: function() { - var ret = {}; - for(var i = 0; i < arguments.length; i++) { - ret[arguments[i]] = get(this, arguments[i]); - } - return ret; + objectAtContent: function(idx) { + return get(this, 'content').objectAt(idx); }, /** - Sets the key equal to value. - - This method is generally very similar to calling object[key] = value or - object.key = value, except that it provides support for computed - properties, the unknownProperty() method and property observers. - - ### Computed Properties - - If you try to set a value on a key that has a computed property handler - defined (see the get() method for an example), then set() will call - that method, passing both the value and key instead of simply changing - the value itself. This is useful for those times when you need to - implement a property that is composed of one or more member - properties. - - ### Unknown Properties - - If you try to set a value on a key that is undefined in the target - object, then the unknownProperty() handler will be called instead. This - gives you an opportunity to implement complex "virtual" properties that - are not predefined on the obejct. If unknownProperty() returns - undefined, then set() will simply set the value on the object. - - ### Property Observers + Should actually replace the specified objects on the content array. + You can override this method in subclasses to transform the content item + into something new. - In addition to changing the property, set() will also register a - property change with the object. Unless you have placed this call - inside of a beginPropertyChanges() and endPropertyChanges(), any "local" - observers (i.e. observer methods declared on the same object), will be - called immediately. Any "remote" observers (i.e. observer methods - declared on another object) will be placed in a queue and called at a - later time in a coelesced manner. + This method will only be called if content is non-null. - ### Chaining + @param {Number} idx + The starting index - In addition to property changes, set() returns the value of the object - itself so you can do chaining like this: + @param {Number} amt + The number of items to remove from the content. - record.set('firstName', 'Charles').set('lastName', 'Jolley'); + @param {Array} objects + Optional array of objects to insert or null if no objects. - @param {String} key The property to set - @param {Object} value The value to set or null. - @returns {Ember.Observable} + @returns {void} */ - set: function(keyName, value) { - set(this, keyName, value); - return this; + replaceContent: function(idx, amt, objects) { + get(this, 'content').replace(idx, amt, objects); }, /** - To set multiple properties at once, call setProperties - with a Hash: - - record.setProperties({ firstName: 'Charles', lastName: 'Jolley' }); - - @param {Hash} hash the hash of keys and values to set - @returns {Ember.Observable} + Invoked when the content property is about to change. Notifies observers that the + entire array content will change. */ - setProperties: function(hash) { - return Ember.setProperties(this, hash); - }, + contentWillChange: Ember.beforeObserver(function() { + var content = get(this, 'content'), + len = content ? get(content, 'length') : 0; + this.arrayWillChange(content, 0, len, undefined); + if (content) content.removeArrayObserver(this); + }, 'content'), /** - Begins a grouping of property changes. + Invoked when the content property changes. Notifies observers that the + entire array content has changed. + */ + contentDidChange: Ember.observer(function() { + var content = get(this, 'content'), + len = content ? get(content, 'length') : 0; + if (content) content.addArrayObserver(this); + this.arrayDidChange(content, 0, undefined, len); + }, 'content'), - You can use this method to group property changes so that notifications - will not be sent until the changes are finished. If you plan to make a - large number of changes to an object at one time, you should call this - method at the beginning of the changes to begin deferring change - notifications. When you are done making changes, call endPropertyChanges() - to deliver the deferred change notifications and end deferring. + /** @private (nodoc) */ + objectAt: function(idx) { + return get(this, 'content') && this.objectAtContent(idx); + }, - @returns {Ember.Observable} - */ - beginPropertyChanges: function() { - Ember.beginPropertyChanges(); + /** @private (nodoc) */ + length: Ember.computed(function() { + var content = get(this, 'content'); + return content ? get(content, 'length') : 0; + // No dependencies since Enumerable notifies length of change + }).property().cacheable(), + + /** @private (nodoc) */ + replace: function(idx, amt, objects) { + if (get(this, 'content')) this.replaceContent(idx, amt, objects); return this; }, - /** - Ends a grouping of property changes. - - You can use this method to group property changes so that notifications - will not be sent until the changes are finished. If you plan to make a - large number of changes to an object at one time, you should call - beginPropertyChanges() at the beginning of the changes to defer change - notifications. When you are done making changes, call this method to - deliver the deferred change notifications and end deferring. + /** @private (nodoc) */ + arrayWillChange: function(item, idx, removedCnt, addedCnt) { + this.arrayContentWillChange(idx, removedCnt, addedCnt); + }, - @returns {Ember.Observable} - */ - endPropertyChanges: function() { - Ember.endPropertyChanges(); - return this; + /** @private (nodoc) */ + arrayDidChange: function(item, idx, removedCnt, addedCnt) { + this.arrayContentDidChange(idx, removedCnt, addedCnt); }, - /** - Notify the observer system that a property is about to change. + /** @private (nodoc) */ + init: function() { + this._super(); + this.contentWillChange(); + this.contentDidChange(); + } - Sometimes you need to change a value directly or indirectly without - actually calling get() or set() on it. In this case, you can use this - method and propertyDidChange() instead. Calling these two methods - together will notify all observers that the property has potentially - changed value. +}); - Note that you must always call propertyWillChange and propertyDidChange as - a pair. If you do not, it may get the property change groups out of order - and cause notifications to be delivered more often than you would like. - @param {String} key The property key that is about to change. - @returns {Ember.Observable} - */ - propertyWillChange: function(keyName){ - Ember.propertyWillChange(this, keyName); - return this; - }, - /** - Notify the observer system that a property has just changed. - Sometimes you need to change a value directly or indirectly without - actually calling get() or set() on it. In this case, you can use this - method and propertyWillChange() instead. Calling these two methods - together will notify all observers that the property has potentially - changed value. +})(); - Note that you must always call propertyWillChange and propertyDidChange as - a pair. If you do not, it may get the property change groups out of order - and cause notifications to be delivered more often than you would like. - @param {String} keyName The property key that has just changed. - @returns {Ember.Observable} - */ - propertyDidChange: function(keyName) { - Ember.propertyDidChange(this, keyName); - return this; + +(function() { +// ========================================================================== +// Project: Ember Runtime +// Copyright: ©2011 Strobe Inc. and contributors. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +var set = Ember.set, get = Ember.get, guidFor = Ember.guidFor; +var forEach = Ember.ArrayUtils.forEach; + +var EachArray = Ember.Object.extend(Ember.Array, { + + init: function(content, keyName, owner) { + this._super(); + this._keyName = keyName; + this._owner = owner; + this._content = content; }, - - /** - Convenience method to call `propertyWillChange` and `propertyDidChange` in - succession. - - @param {String} keyName The property key to be notified about. - @returns {Ember.Observable} - */ - notifyPropertyChange: function(keyName) { - this.propertyWillChange(keyName); - this.propertyDidChange(keyName); - return this; + + objectAt: function(idx) { + var item = this._content.objectAt(idx); + return item && get(item, this._keyName); }, - /** - Adds an observer on a property. + length: Ember.computed(function() { + var content = this._content; + return content ? get(content, 'length') : 0; + }).property().cacheable() - This is the core method used to register an observer for a property. +}); - Once you call this method, anytime the key's value is set, your observer - will be notified. Note that the observers are triggered anytime the - value is set, regardless of whether it has actually changed. Your - observer should be prepared to handle that. +var IS_OBSERVER = /^.+:(before|change)$/; - You can also pass an optional context parameter to this method. The - context will be passed to your observer method whenever it is triggered. - Note that if you add the same target/method pair on a key multiple times - with different context parameters, your observer will only be called once - with the last context you passed. +/** @private */ +function addObserverForContentKey(content, keyName, proxy, idx, loc) { + var objects = proxy._objects, guid; + if (!objects) objects = proxy._objects = {}; - ### Observer Methods + while(--loc>=idx) { + var item = content.objectAt(loc); + if (item) { + Ember.addBeforeObserver(item, keyName, proxy, 'contentKeyWillChange'); + Ember.addObserver(item, keyName, proxy, 'contentKeyDidChange'); - Observer methods you pass should generally have the following signature if - you do not pass a "context" parameter: + // keep track of the indicies each item was found at so we can map + // it back when the obj changes. + guid = guidFor(item); + if (!objects[guid]) objects[guid] = []; + objects[guid].push(loc); + } + } +} - fooDidChange: function(sender, key, value, rev); +/** @private */ +function removeObserverForContentKey(content, keyName, proxy, idx, loc) { + var objects = proxy._objects; + if (!objects) objects = proxy._objects = {}; + var indicies, guid; - The sender is the object that changed. The key is the property that - changes. The value property is currently reserved and unused. The rev - is the last property revision of the object when it changed, which you can - use to detect if the key value has really changed or not. + while(--loc>=idx) { + var item = content.objectAt(loc); + if (item) { + Ember.removeBeforeObserver(item, keyName, proxy, 'contentKeyWillChange'); + Ember.removeObserver(item, keyName, proxy, 'contentKeyDidChange'); - If you pass a "context" parameter, the context will be passed before the - revision like so: + guid = guidFor(item); + indicies = objects[guid]; + indicies[indicies.indexOf(loc)] = null; + } + } +} - fooDidChange: function(sender, key, value, context, rev); +/** + @private + @class - Usually you will not need the value, context or revision parameters at - the end. In this case, it is common to write observer methods that take - only a sender and key value as parameters or, if you aren't interested in - any of these values, to write an observer that has no parameters at all. + This is the object instance returned when you get the @each property on an + array. It uses the unknownProperty handler to automatically create + EachArray instances for property names. - @param {String} key The key to observer - @param {Object} target The target object to invoke - @param {String|Function} method The method to invoke. - @returns {Ember.Object} self - */ - addObserver: function(key, target, method) { - Ember.addObserver(this, key, target, method); - }, + @extends Ember.Object +*/ +Ember.EachProxy = Ember.Object.extend({ - /** - Remove an observer you have previously registered on this object. Pass - the same key, target, and method you passed to addObserver() and your - target will no longer receive notifications. + init: function(content) { + this._super(); + this._content = content; + content.addArrayObserver(this); - @param {String} key The key to observer - @param {Object} target The target object to invoke - @param {String|Function} method The method to invoke. - @returns {Ember.Observable} reciever - */ - removeObserver: function(key, target, method) { - Ember.removeObserver(this, key, target, method); + // in case someone is already observing some keys make sure they are + // added + forEach(Ember.watchedEvents(this), function(eventName) { + this.didAddListener(eventName); + }, this); }, /** - Returns true if the object currently has observers registered for a - particular key. You can use this method to potentially defer performing - an expensive action until someone begins observing a particular property - on the object. - - @param {String} key Key to check - @returns {Boolean} + You can directly access mapped properties by simply requesting them. + The unknownProperty handler will generate an EachArray of each item. */ - hasObserverFor: function(key) { - return Ember.hasListeners(this, key+':change'); + unknownProperty: function(keyName, value) { + var ret; + ret = new EachArray(this._content, keyName, this); + new Ember.Descriptor().setup(this, keyName, ret); + this.beginObservingContentKey(keyName); + return ret; }, - /** - This method will be called when a client attempts to get the value of a - property that has not been defined in one of the typical ways. Override - this method to create "virtual" properties. - - @param {String} key The name of the unknown property that was requested. - @returns {Object} The property value or undefined. Default is undefined. - */ - unknownProperty: function(key) { - return undefined; - }, + // .......................................................... + // ARRAY CHANGES + // Invokes whenever the content array itself changes. - /** - This method will be called when a client attempts to set the value of a - property that has not been defined in one of the typical ways. Override - this method to create "virtual" properties. - - @param {String} key The name of the unknown property to be set. - @param {Object} value The value the unknown property is to be set to. - */ - setUnknownProperty: function(key, value) { - this[key] = value; - }, + arrayWillChange: function(content, idx, removedCnt, addedCnt) { + var keys = this._keys, key, array, lim; - /** - This is like `get`, but allows you to pass in a dot-separated property - path. - - person.getPath('address.zip'); // return the zip - person.getPath('children.firstObject.age'); // return the first kid's age + lim = removedCnt>0 ? idx+removedCnt : -1; + Ember.beginPropertyChanges(this); - This reads much better than chained `get` calls. + for(key in keys) { + if (!keys.hasOwnProperty(key)) { continue; } - @param {String} path The property path to retrieve - @returns {Object} The property value or undefined. - */ - getPath: function(path) { - return Ember.getPath(this, path); + if (lim>0) removeObserverForContentKey(content, key, this, idx, lim); + + Ember.propertyWillChange(this, key); + } + + Ember.propertyWillChange(this._content, '@each'); + Ember.endPropertyChanges(this); }, - /** - This is like `set`, but allows you to specify the property you want to - set as a dot-separated property path. - - person.setPath('address.zip', 10011); // set the zip to 10011 - person.setPath('children.firstObject.age', 6); // set the first kid's age to 6 + arrayDidChange: function(content, idx, removedCnt, addedCnt) { + var keys = this._keys, key, array, lim; + + lim = addedCnt>0 ? idx+addedCnt : -1; + Ember.beginPropertyChanges(this); + + for(key in keys) { + if (!keys.hasOwnProperty(key)) { continue; } - This is not as commonly used as `getPath`, but it can be useful. + if (lim>0) addObserverForContentKey(content, key, this, idx, lim); - @param {String} path The path to the property that will be set - @param {Object} value The value to set or null. - @returns {Ember.Observable} - */ - setPath: function(path, value) { - Ember.setPath(this, path, value); - return this; - }, + Ember.propertyDidChange(this, key); + } - /** - Retrieves the value of a property, or a default value in the case that the property - returns undefined. - - person.getWithDefault('lastName', 'Doe'); - - @param {String} keyName The name of the property to retrieve - @param {Object} defaultValue The value to return if the property value is undefined - @returns {Object} The property value or the defaultValue. - */ - getWithDefault: function(keyName, defaultValue) { - return Ember.getWithDefault(this, keyName, defaultValue); + Ember.propertyDidChange(this._content, '@each'); + Ember.endPropertyChanges(this); }, - /** - Set the value of a property to the current value plus some amount. - - person.incrementProperty('age'); - team.incrementProperty('score', 2); - - @param {String} keyName The name of the property to increment - @param {Object} increment The amount to increment by. Defaults to 1 - @returns {Object} The new property value - */ - incrementProperty: function(keyName, increment) { - if (!increment) { increment = 1; } - set(this, keyName, (get(this, keyName) || 0)+increment); - return get(this, keyName); + // .......................................................... + // LISTEN FOR NEW OBSERVERS AND OTHER EVENT LISTENERS + // Start monitoring keys based on who is listening... + + didAddListener: function(eventName) { + if (IS_OBSERVER.test(eventName)) { + this.beginObservingContentKey(eventName.slice(0, -7)); + } }, - - /** - Set the value of a property to the current value minus some amount. - - player.decrementProperty('lives'); - orc.decrementProperty('health', 5); - - @param {String} keyName The name of the property to decrement - @param {Object} increment The amount to decrement by. Defaults to 1 - @returns {Object} The new property value - */ - decrementProperty: function(keyName, increment) { - if (!increment) { increment = 1; } - set(this, keyName, (get(this, keyName) || 0)-increment); - return get(this, keyName); + + didRemoveListener: function(eventName) { + if (IS_OBSERVER.test(eventName)) { + this.stopObservingContentKey(eventName.slice(0, -7)); + } }, - /** - Set the value of a boolean property to the opposite of it's - current value. - - starship.toggleProperty('warpDriveEnaged'); - - @param {String} keyName The name of the property to toggle - @returns {Object} The new property value - */ - toggleProperty: function(keyName) { - set(this, keyName, !get(this, keyName)); - return get(this, keyName); + // .......................................................... + // CONTENT KEY OBSERVING + // Actual watch keys on the source content. + + beginObservingContentKey: function(keyName) { + var keys = this._keys; + if (!keys) keys = this._keys = {}; + if (!keys[keyName]) { + keys[keyName] = 1; + var content = this._content, + len = get(content, 'length'); + addObserverForContentKey(content, keyName, this, 0, len); + } else { + keys[keyName]++; + } }, - /** - Returns the cached value of a computed property, if it exists. - This allows you to inspect the value of a computed property - without accidentally invoking it if it is intended to be - generated lazily. + stopObservingContentKey: function(keyName) { + var keys = this._keys; + if (keys && (keys[keyName]>0) && (--keys[keyName]<=0)) { + var content = this._content, + len = get(content, 'length'); + removeObserverForContentKey(content, keyName, this, 0, len); + } + }, - @param {String} keyName - @returns {Object} The cached value of the computed property, if any - */ - cacheFor: function(keyName) { - return Ember.cacheFor(this, keyName); + contentKeyWillChange: function(obj, keyName) { + Ember.propertyWillChange(this, keyName); }, - /** @private - intended for debugging purposes */ - observersForKey: function(keyName) { - return Ember.observersFor(this, keyName); + contentKeyDidChange: function(obj, keyName) { + Ember.propertyDidChange(this, keyName); } -}); +}); @@ -9942,369 +11329,450 @@ Ember.Observable = Ember.Mixin.create(/** @scope Ember.Observable.prototype */ { (function() { -var get = Ember.get, set = Ember.set, getPath = Ember.getPath; +// ========================================================================== +// Project: Ember Runtime +// Copyright: ©2011 Strobe Inc. and contributors. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +var get = Ember.get, set = Ember.set; -Ember.TargetActionSupport = Ember.Mixin.create({ - target: null, - action: null, +// Add Ember.Array to Array.prototype. Remove methods with native +// implementations and supply some more optimized versions of generic methods +// because they are so common. +var NativeArray = Ember.Mixin.create(Ember.MutableArray, Ember.Observable, Ember.Copyable, { - targetObject: Ember.computed(function() { - var target = get(this, 'target'); + // because length is a built-in property we need to know to just get the + // original property. + get: function(key) { + if (key==='length') return this.length; + else if ('number' === typeof key) return this[key]; + else return this._super(key); + }, - if (Ember.typeOf(target) === "string") { - // TODO: Remove the false when deprecation is done - var value = getPath(this, target, false); - if (value === undefined) { value = getPath(window, target); } - return value; + objectAt: function(idx) { + return this[idx]; + }, + + // primitive for array support. + replace: function(idx, amt, objects) { + + if (this.isFrozen) throw Ember.FROZEN_ERROR ; + + // if we replaced exactly the same number of items, then pass only the + // replaced range. Otherwise, pass the full remaining array length + // since everything has shifted + var len = objects ? get(objects, 'length') : 0; + this.arrayContentWillChange(idx, amt, len); + + if (!objects || objects.length === 0) { + this.splice(idx, amt) ; } else { - return target; + var args = [idx, amt].concat(objects) ; + this.splice.apply(this,args) ; } - }).property('target').cacheable(), - triggerAction: function() { - var action = get(this, 'action'), - target = get(this, 'targetObject'); + this.arrayContentDidChange(idx, amt, len); + return this ; + }, - if (target && action) { - var ret; + // If you ask for an unknown property, then try to collect the value + // from member items. + unknownProperty: function(key, value) { + var ret;// = this.reducedProperty(key, value) ; + if ((value !== undefined) && ret === undefined) { + ret = this[key] = value; + } + return ret ; + }, - if (typeof target.send === 'function') { - ret = target.send(action, this); - } else { - if (typeof action === 'string') { - action = target[action]; - } - ret = action.call(target, this); - } - if (ret !== false) ret = true; + // If browser did not implement indexOf natively, then override with + // specialized version + indexOf: function(object, startAt) { + var idx, len = this.length; - return ret; - } else { - return false; + if (startAt === undefined) startAt = 0; + else startAt = (startAt < 0) ? Math.ceil(startAt) : Math.floor(startAt); + if (startAt < 0) startAt += len; + + for(idx=startAt;idx=0;idx--) { + if (this[idx] === object) return idx ; } + return -1; + }, + + copy: function() { + return this.slice(); } }); -})(); +// Remove any methods implemented natively so we don't override them +var ignore = ['length']; +Ember.ArrayUtils.forEach(NativeArray.keys(), function(methodName) { + if (Array.prototype[methodName]) ignore.push(methodName); +}); + +if (ignore.length>0) { + NativeArray = NativeArray.without.apply(NativeArray, ignore); +} + +/** + The NativeArray mixin contains the properties needed to to make the native + Array support Ember.MutableArray and all of its dependent APIs. Unless you + have Ember.EXTEND_PROTOTYPES set to false, this will be applied automatically. + Otherwise you can apply the mixin at anytime by calling + `Ember.NativeArray.activate`. + + @namespace + @extends Ember.MutableArray + @extends Ember.Array + @extends Ember.Enumerable + @extends Ember.MutableEnumerable + @extends Ember.Copyable + @extends Ember.Freezable +*/ +Ember.NativeArray = NativeArray; +/** + Creates an Ember.NativeArray from an Array like object. + Does not modify the original object. + @returns {Ember.NativeArray} +*/ +Ember.A = function(arr){ + if (arr === undefined) { arr = []; } + return Ember.NativeArray.apply(arr); +}; -(function() { -var get = Ember.get, set = Ember.set, a_slice = Array.prototype.slice; +/** + Activates the mixin on the Array.prototype if not already applied. Calling + this method more than once is safe. -/** @private */ -function xform(target, method, params) { - var args = a_slice.call(params, 2); - method.apply(target, args); -} + @returns {void} +*/ +Ember.NativeArray.activate = function() { + NativeArray.apply(Array.prototype); -Ember.Evented = Ember.Mixin.create({ - on: function(name, target, method) { - if (!method) { - method = target; - target = null; - } + Ember.A = function(arr) { return arr || []; }; +}; - Ember.addListener(this, name, target, method, xform); - }, +if (Ember.EXTEND_PROTOTYPES) Ember.NativeArray.activate(); - fire: function(name) { - Ember.sendEvent.apply(null, [this, name].concat(a_slice.call(arguments, 1))); - }, - off: function(name, target, method) { - Ember.removeListener(this, name, target, method); - } -}); })(); (function() { -// ========================================================================== -// Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. and contributors. -// License: Licensed under MIT license (see license.js) -// ========================================================================== - -})(); +/** + JavaScript (before ES6) does not have a Map implementation. Objects, + which are often used as dictionaries, may only have Strings as keys. + Because Ember has a way to get a unique identifier for every object + via `Ember.guidFor`, we can implement a performant Map with arbitrary + keys. Because it is commonly used in low-level bookkeeping, Map is + implemented as a pure JavaScript object for performance. + This implementation follows the current iteration of the ES6 proposal + for maps (http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets), + with two exceptions. First, because we need our implementation to be + pleasant on older browsers, we do not use the `delete` name (using + `remove` instead). Second, as we do not have the luxury of in-VM + iteration, we implement a forEach method for iteration. -(function() { -// ========================================================================== -// Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. and contributors. -// License: Licensed under MIT license (see license.js) -// ========================================================================== + Map is mocked out to look like an Ember object, so you can do + `Ember.Map.create()` for symmetry with other Ember classes. +*/ +/** @private */ +var guidFor = Ember.guidFor; +var indexOf = Ember.ArrayUtils.indexOf; +// This class is used internally by Ember.js and Ember Data. +// Please do not use it at this time. We plan to clean it up +// and add many tests soon. +var OrderedSet = Ember.OrderedSet = function() { + this.clear(); +}; -// NOTE: this object should never be included directly. Instead use Ember. -// Ember.Object. We only define this separately so that Ember.Set can depend on it +OrderedSet.create = function() { + return new OrderedSet(); +}; +OrderedSet.prototype = { + clear: function() { + this.presenceSet = {}; + this.list = []; + }, + add: function(obj) { + var guid = guidFor(obj), + presenceSet = this.presenceSet, + list = this.list; -var rewatch = Ember.rewatch; -var classToString = Ember.Mixin.prototype.toString; -var set = Ember.set, get = Ember.get; -var o_create = Ember.platform.create, - o_defineProperty = Ember.platform.defineProperty, - a_slice = Array.prototype.slice, - meta = Ember.meta; + if (guid in presenceSet) { return; } -/** @private */ -function makeCtor() { + presenceSet[guid] = true; + list.push(obj); + }, - // Note: avoid accessing any properties on the object since it makes the - // method a lot faster. This is glue code so we want it to be as fast as - // possible. + remove: function(obj) { + var guid = guidFor(obj), + presenceSet = this.presenceSet, + list = this.list; - var wasApplied = false, initMixins, init = false, hasChains = false; + delete presenceSet[guid]; - var Class = function() { - if (!wasApplied) { Class.proto(); } // prepare prototype... - if (initMixins) { - this.reopen.apply(this, initMixins); - initMixins = null; - rewatch(this); // always rewatch just in case - this.init.apply(this, arguments); - } else { - if (hasChains) { - rewatch(this); - } else { - Ember.GUID_DESC.value = undefined; - o_defineProperty(this, Ember.GUID_KEY, Ember.GUID_DESC); - } - if (init===false) { init = this.init; } // cache for later instantiations - Ember.GUID_DESC.value = undefined; - o_defineProperty(this, '_super', Ember.GUID_DESC); - init.apply(this, arguments); + var index = indexOf(list, obj); + if (index > -1) { + list.splice(index, 1); } - }; + }, - Class.toString = classToString; - Class.willReopen = function() { - if (wasApplied) { - Class.PrototypeMixin = Ember.Mixin.create(Class.PrototypeMixin); + isEmpty: function() { + return this.list.length === 0; + }, + + forEach: function(fn, self) { + // allow mutation during iteration + var list = this.list.slice(); + + for (var i = 0, j = list.length; i < j; i++) { + fn.call(self, list[i]); } + }, - wasApplied = false; - }; - Class._initMixins = function(args) { initMixins = args; }; + toArray: function() { + return this.list.slice(); + } +}; - Class.proto = function() { - var superclass = Class.superclass; - if (superclass) { superclass.proto(); } +/** + A Map stores values indexed by keys. Unlike JavaScript's + default Objects, the keys of a Map can be any JavaScript + object. - if (!wasApplied) { - wasApplied = true; - Class.PrototypeMixin.applyPartial(Class.prototype); - Ember.rewatch(Class.prototype); // setup watch chains if needed. - hasChains = !!meta(Class.prototype, false).chains; // avoid rewatch - } + Internally, a Map has two data structures: - return this.prototype; - }; + `keys`: an OrderedSet of all of the existing keys + `values`: a JavaScript Object indexed by the + Ember.guidFor(key) - return Class; + When a key/value pair is added for the first time, we + add the key to the `keys` OrderedSet, and create or + replace an entry in `values`. When an entry is deleted, + we delete its entry in `keys` and `values`. +*/ -} +/** @private */ +var Map = Ember.Map = function() { + this.keys = Ember.OrderedSet.create(); + this.values = {}; +}; -var CoreObject = makeCtor(); +Map.create = function() { + return new Map(); +}; -CoreObject.PrototypeMixin = Ember.Mixin.create( -/** @scope Ember.CoreObject */ { +Map.prototype = { + /** + Retrieve the value associated with a given key. - reopen: function() { - Ember.Mixin._apply(this, arguments, true); - return this; + @param {anything} key + @return {anything} the value associated with the key, or undefined + */ + get: function(key) { + var values = this.values, + guid = guidFor(key); + + return values[guid]; }, - isInstance: true, + /** + Adds a value to the map. If a value for the given key has already been + provided, the new value will replace the old value. - init: function() {}, + @param {anything} key + @param {anything} value + */ + set: function(key, value) { + var keys = this.keys, + values = this.values, + guid = guidFor(key); - isDestroyed: false, - isDestroying: false, + keys.add(key); + values[guid] = value; + }, + + /** + Removes a value from the map for an associated key. + + @param {anything} key + @returns {Boolean} true if an item was removed, false otherwise + */ + remove: function(key) { + // don't use ES6 "delete" because it will be annoying + // to use in browsers that are not ES6 friendly; + var keys = this.keys, + values = this.values, + guid = guidFor(key), + value; + + if (values.hasOwnProperty(guid)) { + keys.remove(key); + value = values[guid]; + delete values[guid]; + return true; + } else { + return false; + } + }, /** - Destroys an object by setting the isDestroyed flag and removing its - metadata, which effectively destroys observers and bindings. - - If you try to set a property on a destroyed object, an exception will be - raised. - - Note that destruction is scheduled for the end of the run loop and does not - happen immediately. + Check whether a key is present. - @returns {Ember.Object} receiver + @param {anything} key + @returns {Boolean} true if the item was present, false otherwise */ - destroy: function() { - if (this.isDestroying) { return; } - - this.isDestroying = true; - - if (this.willDestroy) { this.willDestroy(); } + has: function(key) { + var values = this.values, + guid = guidFor(key); - set(this, 'isDestroyed', true); - Ember.run.schedule('destroy', this, this._scheduledDestroy); - return this; + return values.hasOwnProperty(guid); }, /** - Invoked by the run loop to actually destroy the object. This is - scheduled for execution by the `destroy` method. + Iterate over all the keys and values. Calls the function once + for each key, passing in the key and value, in that order. - @private - */ - _scheduledDestroy: function() { - Ember.destroy(this); - if (this.didDestroy) { this.didDestroy(); } - }, + The keys are guaranteed to be iterated over in insertion order. - bind: function(to, from) { - if (!(from instanceof Ember.Binding)) { from = Ember.Binding.from(from); } - from.to(to).connect(this); - return from; - }, + @param {Function} callback + @param {anything} self if passed, the `this` value inside the + callback. By default, `this` is the map. + */ + forEach: function(callback, self) { + var keys = this.keys, + values = this.values; - toString: function() { - return '<'+this.constructor.toString()+':'+Ember.guidFor(this)+'>'; + keys.forEach(function(key) { + var guid = guidFor(key); + callback.call(self, key, values[guid]); + }); } -}); - -CoreObject.__super__ = null; - -var ClassMixin = Ember.Mixin.create({ +}; - ClassMixin: Ember.required(), +})(); - PrototypeMixin: Ember.required(), - isClass: true, - isMethod: false, +(function() { +var loadHooks = {}; +var loaded = {}; - extend: function() { - var Class = makeCtor(), proto; - Class.ClassMixin = Ember.Mixin.create(this.ClassMixin); - Class.PrototypeMixin = Ember.Mixin.create(this.PrototypeMixin); +Ember.onLoad = function(name, callback) { + var object; - Class.ClassMixin.ownerConstructor = Class; - Class.PrototypeMixin.ownerConstructor = Class; + loadHooks[name] = loadHooks[name] || Ember.A(); + loadHooks[name].pushObject(callback); - var PrototypeMixin = Class.PrototypeMixin; - PrototypeMixin.reopen.apply(PrototypeMixin, arguments); + if (object = loaded[name]) { + callback(object); + } +}; - Class.superclass = this; - Class.__super__ = this.prototype; +Ember.runLoadHooks = function(name, object) { + var hooks; - proto = Class.prototype = o_create(this.prototype); - proto.constructor = Class; - Ember.generateGuid(proto, 'ember'); - meta(proto).proto = proto; // this will disable observers on prototype + loaded[name] = object; + if (hooks = loadHooks[name]) { + loadHooks[name].forEach(function(callback) { + callback(object); + }); + } +}; - Class.subclasses = Ember.Set ? new Ember.Set() : null; - if (this.subclasses) { this.subclasses.add(Class); } +})(); - Class.ClassMixin.apply(Class); - return Class; - }, - create: function() { - var C = this; - if (arguments.length>0) { this._initMixins(arguments); } - return new C(); - }, - reopen: function() { - this.willReopen(); - var PrototypeMixin = this.PrototypeMixin; - PrototypeMixin.reopen.apply(PrototypeMixin, arguments); - return this; - }, +(function() { +// ========================================================================== +// Project: Ember Runtime +// Copyright: ©2011 Strobe Inc. and contributors. +// License: Licensed under MIT license (see license.js) +// ========================================================================== - reopenClass: function() { - var ClassMixin = this.ClassMixin; - ClassMixin.reopen.apply(ClassMixin, arguments); - Ember.Mixin._apply(this, arguments, false); - return this; - }, +})(); - detect: function(obj) { - if ('function' !== typeof obj) { return false; } - while(obj) { - if (obj===this) { return true; } - obj = obj.superclass; - } - return false; - }, - detectInstance: function(obj) { - return obj instanceof this; - }, - /** - In some cases, you may want to annotate computed properties with additional - metadata about how they function or what values they operate on. For example, - computed property functions may close over variables that are then no longer - available for introspection. +(function() { +// ========================================================================== +// Project: Ember Runtime +// Copyright: ©2011 Strobe Inc. and contributors. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +/** + @class - You can pass a hash of these values to a computed property like this: + Ember.ArrayController provides a way for you to publish a collection of objects + so that you can easily bind to the collection from a Handlebars #each helper, + an Ember.CollectionView, or other controllers. - person: function() { - var personId = this.get('personId'); - return App.Person.create({ id: personId }); - }.property().meta({ type: App.Person }) + The advantage of using an ArrayController is that you only have to set up + your view bindings once; to change what's displayed, simply swap out the + `content` property on the controller. - Once you've done this, you can retrieve the values saved to the computed - property from your class like this: + For example, imagine you wanted to display a list of items fetched via an XHR + request. Create an Ember.ArrayController and set its `content` property: - MyClass.metaForProperty('person'); + MyApp.listController = Ember.ArrayController.create(); - This will return the original hash that was passed to `meta()`. - */ - metaForProperty: function(key) { - var desc = meta(this.proto(), false).descs[key]; + $.get('people.json', function(data) { + MyApp.listController.set('content', data); + }); - ember_assert("metaForProperty() could not find a computed property with key '"+key+"'.", !!desc && desc instanceof Ember.ComputedProperty); - return desc._meta || {}; - }, + Then, create a view that binds to your new controller: - /** - Iterate over each computed property for the class, passing its name - and any associated metadata (see `metaForProperty`) to the callback. - */ - eachComputedProperty: function(callback, binding) { - var proto = this.proto(), - descs = meta(proto).descs, - empty = {}, - property; + {{#each MyApp.listController}} + {{firstName}} {{lastName}} + {{/each}} - for (var name in descs) { - property = descs[name]; + Although you are binding to the controller, the behavior of this controller + is to pass through any methods or properties to the underlying array. This + capability comes from `Ember.ArrayProxy`, which this class inherits from. - if (property instanceof Ember.ComputedProperty) { - callback.call(binding || this, name, property._meta || empty); - } - } - } + Note: As of this writing, `ArrayController` does not add any functionality + to its superclass, `ArrayProxy`. The Ember team plans to add additional + controller-specific functionality in the future, e.g. single or multiple + selection support. If you are creating something that is conceptually a + controller, use this class. -}); + @extends Ember.ArrayProxy +*/ -CoreObject.ClassMixin = ClassMixin; -ClassMixin.apply(CoreObject); +Ember.ArrayController = Ember.ArrayProxy.extend(); -/** - @class -*/ -Ember.CoreObject = CoreObject; +})(); +(function() { })(); @@ -10316,704 +11784,735 @@ Ember.CoreObject = CoreObject; // Copyright: ©2011 Strobe Inc. and contributors. // License: Licensed under MIT license (see license.js) // ========================================================================== -var get = Ember.get, set = Ember.set, guidFor = Ember.guidFor, none = Ember.none; -/** - @class +})(); - An unordered collection of objects. +(function() { +// ========================================================================== +// Project: Ember - JavaScript Application Framework +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2011 Apple Inc. All rights reserved. +// License: Licensed under MIT license (see license.js) +// ========================================================================== - A Set works a bit like an array except that its items are not ordered. - You can create a set to efficiently test for membership for an object. You - can also iterate through a set just like an array, even accessing objects - by index, however there is no guarantee as to their order. +var get = Ember.get, set = Ember.set; - Starting with Ember 2.0 all Sets are now observable since there is no - added cost to providing this support. Sets also do away with the more - specialized Set Observer API in favor of the more generic Enumerable - Observer API - which works on any enumerable object including both Sets and - Arrays. +/** + @class - ## Creating a Set + An Ember.Application instance serves as the namespace in which you define your + application's classes. You can also override the configuration of your + application. - You can create a set like you would most objects using - `new Ember.Set()`. Most new sets you create will be empty, but you can - also initialize the set with some content by passing an array or other - enumerable of objects to the constructor. + By default, Ember.Application will begin listening for events on the document. + If your application is embedded inside a page, instead of controlling the + entire document, you can specify which DOM element to attach to by setting + the `rootElement` property: - Finally, you can pass in an existing set and the set will be copied. You - can also create a copy of a set by calling `Ember.Set#copy()`. + MyApp = Ember.Application.create({ + rootElement: $('#my-app') + }); - #js - // creates a new empty set - var foundNames = new Ember.Set(); + The root of an Ember.Application must not be removed during the course of the + page's lifetime. If you have only a single conceptual application for the + entire page, and are not embedding any third-party Ember applications + in your page, use the default document root for your application. - // creates a set with four names in it. - var names = new Ember.Set(["Charles", "Tom", "Juan", "Alex"]); // :P + You only need to specify the root if your page contains multiple instances + of Ember.Application. - // creates a copy of the names set. - var namesCopy = new Ember.Set(names); + @extends Ember.Object +*/ +Ember.Application = Ember.Namespace.extend( +/** @scope Ember.Application.prototype */{ - // same as above. - var anotherNamesCopy = names.copy(); + /** + The root DOM element of the Application. - ## Adding/Removing Objects + Can be specified as DOMElement or a selector string. - You generally add or remove objects from a set using `add()` or - `remove()`. You can add any type of object including primitives such as - numbers, strings, and booleans. + @type DOMElement + @default 'body' + */ + rootElement: 'body', - Unlike arrays, objects can only exist one time in a set. If you call `add()` - on a set with the same object multiple times, the object will only be added - once. Likewise, calling `remove()` with the same object multiple times will - remove the object the first time and have no effect on future calls until - you add the object to the set again. + /** + @type Ember.EventDispatcher + @default null + */ + eventDispatcher: null, - NOTE: You cannot add/remove null or undefined to a set. Any attempt to do so - will be ignored. + /** + @type Object + @default null + */ + customEvents: null, - In addition to add/remove you can also call `push()`/`pop()`. Push behaves - just like `add()` but `pop()`, unlike `remove()` will pick an arbitrary - object, remove it and return it. This is a good way to use a set as a job - queue when you don't care which order the jobs are executed in. + /** @private */ + init: function() { + var eventDispatcher, + rootElement = get(this, 'rootElement'); + this._super(); - ## Testing for an Object + eventDispatcher = Ember.EventDispatcher.create({ + rootElement: rootElement + }); - To test for an object's presence in a set you simply call - `Ember.Set#contains()`. + set(this, 'eventDispatcher', eventDispatcher); - ## Observing changes + // jQuery 1.7 doesn't call the ready callback if already ready + if (Ember.$.isReady) { + Ember.run.once(this, this.didBecomeReady); + } else { + var self = this; + Ember.$(document).ready(function() { + Ember.run.once(self, self.didBecomeReady); + }); + } + }, - When using `Ember.Set`, you can observe the `"[]"` property to be - alerted whenever the content changes. You can also add an enumerable - observer to the set to be notified of specific objects that are added and - removed from the set. See `Ember.Enumerable` for more information on - enumerables. + /** + Instantiate all controllers currently available on the namespace + and inject them onto a state manager. - This is often unhelpful. If you are filtering sets of objects, for instance, - it is very inefficient to re-filter all of the items each time the set - changes. It would be better if you could just adjust the filtered set based - on what was changed on the original set. The same issue applies to merging - sets, as well. + Example: - ## Other Methods + App.PostsController = Ember.ArrayController.extend(); + App.CommentsController = Ember.ArrayController.extend(); - `Ember.Set` primary implements other mixin APIs. For a complete reference - on the methods you will use with `Ember.Set`, please consult these mixins. - The most useful ones will be `Ember.Enumerable` and - `Ember.MutableEnumerable` which implement most of the common iterator - methods you are used to on Array. + var stateManager = Ember.StateManager.create({ + ... + }); - Note that you can also use the `Ember.Copyable` and `Ember.Freezable` - APIs on `Ember.Set` as well. Once a set is frozen it can no longer be - modified. The benefit of this is that when you call frozenCopy() on it, - Ember will avoid making copies of the set. This allows you to write - code that can know with certainty when the underlying set data will or - will not be modified. + App.initialize(stateManager); - @extends Ember.Enumerable - @extends Ember.MutableEnumerable - @extends Ember.Copyable - @extends Ember.Freezable + stateManager.get('postsController') // + stateManager.get('commentsController') // - @since Ember 0.9 -*/ -Ember.Set = Ember.CoreObject.extend(Ember.MutableEnumerable, Ember.Copyable, Ember.Freezable, - /** @scope Ember.Set.prototype */ { + stateManager.getPath('postsController.stateManager') // stateManager + */ + initialize: function(stateManager) { + var properties = Ember.A(Ember.keys(this)), + injections = get(this.constructor, 'injections'), + namespace = this, controller, name; - // .......................................................... - // IMPLEMENT ENUMERABLE APIS - // + Ember.runLoadHooks('application', this); - /** - This property will change as the number of objects in the set changes. + properties.forEach(function(property) { + injections.forEach(function(injection) { + injection(namespace, stateManager, property); + }); + }); + }, - @property Number - @default 0 - */ - length: 0, + /** @private */ + didBecomeReady: function() { + var eventDispatcher = get(this, 'eventDispatcher'), + stateManager = get(this, 'stateManager'), + customEvents = get(this, 'customEvents'); - /** - Clears the set. This is useful if you want to reuse an existing set - without having to recreate it. + eventDispatcher.setup(customEvents); - var colors = new Ember.Set(["red", "green", "blue"]); - colors.length; => 3 - colors.clear(); - colors.length; => 0 + this.ready(); - @returns {Ember.Set} An empty Set - */ - clear: function() { - if (this.isFrozen) { throw new Error(Ember.FROZEN_ERROR); } - var len = get(this, 'length'); - var guid; - this.enumerableContentWillChange(len, 0); - for (var i=0; i < len; i++){ - guid = guidFor(this[i]); - delete this[guid]; - delete this[i]; + if (stateManager && stateManager instanceof Ember.Router) { + this.setupStateManager(stateManager); } - set(this, 'length', 0); - this.enumerableContentDidChange(len, 0); - return this; }, /** - Returns true if the passed object is also an enumerable that contains the - same objects as the receiver. - - var colors = ["red", "green", "blue"], - same_colors = new Ember.Set(colors); - same_colors.isEqual(colors); => true - same_colors.isEqual(["purple", "brown"]); => false + @private - @param {Ember.Set} obj the other object. - @returns {Boolean} + If the application has a state manager, use it to route + to the current URL, and trigger a new call to `route` + whenever the URL changes. */ - isEqual: function(obj) { - // fail fast - if (!Ember.Enumerable.detect(obj)) return false; + setupStateManager: function(stateManager) { + var location = get(stateManager, 'location'); - var loc = get(this, 'length'); - if (get(obj, 'length') !== loc) return false; - - while(--loc >= 0) { - if (!obj.contains(this[loc])) return false; - } - - return true; + stateManager.route(location.getURL()); + location.onUpdateURL(function(url) { + stateManager.route(url); + }); }, /** - Adds an object to the set. Only non-null objects can be added to a set - and those can only be added once. If the object is already in the set or - the passed value is null this method will have no effect. + Called when the Application has become ready. + The call will be delayed until the DOM has become ready. + */ + ready: Ember.K, - This is an alias for `Ember.MutableEnumerable.addObject()`. + /** @private */ + destroy: function() { + get(this, 'eventDispatcher').destroy(); + return this._super(); + }, - var colors = new Ember.Set(); - colors.add("blue"); => ["blue"] - colors.add("blue"); => ["blue"] - colors.add("red"); => ["blue", "red"] - colors.add(null); => ["blue", "red"] - colors.add(undefined); => ["blue", "red"] + registerInjection: function(callback) { + this.constructor.registerInjection(callback); + } +}); - @function - @param {Object} obj The object to add. - @returns {Ember.Set} The set itself. - */ - add: Ember.alias('addObject'), +Ember.Application.reopenClass({ + concatenatedProperties: ['injections'], + injections: Ember.A(), + registerInjection: function(callback) { + get(this, 'injections').pushObject(callback); + } +}); - /** - Removes the object from the set if it is found. If you pass a null value - or an object that is already not in the set, this method will have no - effect. This is an alias for `Ember.MutableEnumerable.removeObject()`. +Ember.Application.registerInjection(function(app, stateManager, property) { + if (!/^[A-Z].*Controller$/.test(property)) { return; } - var colors = new Ember.Set(["red", "green", "blue"]); - colors.remove("red"); => ["blue", "green"] - colors.remove("purple"); => ["blue", "green"] - colors.remove(null); => ["blue", "green"] + var name = property[0].toLowerCase() + property.substr(1), + controller = app[property].create(); - @function - @param {Object} obj The object to remove - @returns {Ember.Set} The set itself. - */ - remove: Ember.alias('removeObject'), + stateManager.set(name, controller); + controller.set('target', stateManager); +}); - /** - Removes the last element from the set and returns it, or null if it's empty. - - var colors = new Ember.Set(["green", "blue"]); - colors.pop(); => "blue" - colors.pop(); => "green" - colors.pop(); => null +})(); - @returns {Object} The removed object from the set or null. - */ - pop: function() { - if (get(this, 'isFrozen')) throw new Error(Ember.FROZEN_ERROR); - var obj = this.length > 0 ? this[this.length-1] : null; - this.remove(obj); - return obj; - }, - /** - Inserts the given object on to the end of the set. It returns - the set itself. - This is an alias for `Ember.MutableEnumerable.addObject()`. +(function() { +var get = Ember.get, set = Ember.set; - var colors = new Ember.Set(); - colors.push("red"); => ["red"] - colors.push("green"); => ["red", "green"] - colors.push("blue"); => ["red", "green", "blue"] +/** + This file implements the `location` API used by Ember's router. - @function - @returns {Ember.Set} The set itself. - */ - push: Ember.alias('addObject'), + That API is: - /** - Removes the last element from the set and returns it, or null if it's empty. + getURL: returns the current URL + setURL(path): sets the current URL + onUpdateURL(callback): triggers the callback when the URL changes - This is an alias for `Ember.Set.pop()`. + Calling setURL will not trigger onUpdateURL callbacks. +*/ - var colors = new Ember.Set(["green", "blue"]); - colors.shift(); => "blue" - colors.shift(); => "green" - colors.shift(); => null +/** + Ember.HashLocation implements the location API using the browser's + hash. At present, it relies on a hashchange event existing in the + browser. +*/ +Ember.HashLocation = Ember.Object.extend({ + init: function() { + set(this, 'location', get(this, 'location') || window.location); + set(this, 'callbacks', Ember.A()); + }, - @function - @returns {Object} The removed object from the set or null. + /** + @private + + Returns the current `location.hash`, minus the '#' at the front. */ - shift: Ember.alias('pop'), + getURL: function() { + return get(this, 'location').hash.substr(1); + }, /** - Inserts the given object on to the end of the set. It returns - the set itself. + @private - This is an alias of `Ember.Set.push()` + Set the `location.hash` and remembers what was set. This prevents + `onUpdateURL` callbacks from triggering when the hash was set by + `HashLocation`. + */ + setURL: function(path) { + get(this, 'location').hash = path; + set(this, 'lastSetURL', path); + }, - var colors = new Ember.Set(); - colors.unshift("red"); => ["red"] - colors.unshift("green"); => ["red", "green"] - colors.unshift("blue"); => ["red", "green", "blue"] + /** + @private - @function - @returns {Ember.Set} The set itself. + Register a callback to be invoked when the hash changes. These + callbacks will execute when the user presses the back or forward + button, but not after `setURL` is invoked. */ - unshift: Ember.alias('push'), + onUpdateURL: function(callback) { + var self = this; - /** - Adds each object in the passed enumerable to the set. + var hashchange = function() { + var path = location.hash.substr(1); + if (get(self, 'lastSetURL') === path) { return; } - This is an alias of `Ember.MutableEnumerable.addObjects()` + set(self, 'lastSetURL', null); - var colors = new Ember.Set(); - colors.addEach(["red", "green", "blue"]); => ["red", "green", "blue"] + callback(location.hash.substr(1)); + }; - @function - @param {Ember.Enumerable} objects the objects to add. - @returns {Ember.Set} The set itself. - */ - addEach: Ember.alias('addObjects'), + get(this, 'callbacks').pushObject(hashchange); + window.addEventListener('hashchange', hashchange); + }, - /** - Removes each object in the passed enumerable to the set. + willDestroy: function() { + get(this, 'callbacks').forEach(function(callback) { + window.removeEventListener('hashchange', callback); + }); + set(this, 'callbacks', null); + } +}); - This is an alias of `Ember.MutableEnumerable.removeObjects()` +/** + Ember.Location returns an instance of the correct implementation of + the `location` API. - var colors = new Ember.Set(["red", "green", "blue"]); - colors.removeEach(["red", "blue"]); => ["green"] + You can pass it a `style` ('hash', 'html5', 'none') to force a + particular implementation. +*/ +Ember.Location = { + create: function(options) { + var style = options && options.style; + Ember.assert("you must provide a style to Ember.Location.create", !!style); - @function - @param {Ember.Enumerable} objects the objects to remove. - @returns {Ember.Set} The set itself. - */ - removeEach: Ember.alias('removeObjects'), + if (style === "hash") { + return Ember.HashLocation.create.apply(Ember.HashLocation, arguments); + } + } +}; - // .......................................................... - // PRIVATE ENUMERABLE SUPPORT - // +})(); - /** @private */ - init: function(items) { - this._super(); - if (items) this.addObjects(items); - }, - /** @private (nodoc) - implement Ember.Enumerable */ - nextObject: function(idx) { - return this[idx]; - }, - /** @private - more optimized version */ - firstObject: Ember.computed(function() { - return this.length > 0 ? this[0] : undefined; - }).property('[]').cacheable(), +(function() { - /** @private - more optimized version */ - lastObject: Ember.computed(function() { - return this.length > 0 ? this[this.length-1] : undefined; - }).property('[]').cacheable(), +})(); - /** @private (nodoc) - implements Ember.MutableEnumerable */ - addObject: function(obj) { - if (get(this, 'isFrozen')) throw new Error(Ember.FROZEN_ERROR); - if (none(obj)) return this; // nothing to do - var guid = guidFor(obj), - idx = this[guid], - len = get(this, 'length'), - added ; - if (idx>=0 && idx=0 && idx=0; - }, + toDOM: function() { + return this.list.join(" "); + } +}; - /** @private (nodoc) */ - copy: function() { - var C = this.constructor, ret = new C(), loc = get(this, 'length'); - set(ret, 'length', loc); - while(--loc>=0) { - ret[loc] = this[loc]; - ret[guidFor(this[loc])] = loc; - } - return ret; - }, +/** + @class - /** @private */ - toString: function() { - var len = this.length, idx, array = []; - for(idx = 0; idx < len; idx++) { - array[idx] = this[idx]; - } - return "Ember.Set<%@>".fmt(array.join(',')); - }, + Ember.RenderBuffer gathers information regarding the a view and generates the + final representation. Ember.RenderBuffer will generate HTML which can be pushed + to the DOM. - // .......................................................... - // DEPRECATED - // + @extends Ember.Object +*/ +Ember.RenderBuffer = function(tagName) { + return new Ember._RenderBuffer(tagName); +}; - /** @deprecated +Ember._RenderBuffer = function(tagName) { + this.elementTag = tagName; + this.childBuffers = []; +}; - This property is often used to determine that a given object is a set. - Instead you should use instanceof: +Ember._RenderBuffer.prototype = +/** @scope Ember.RenderBuffer.prototype */ { - #js: - // SproutCore 1.x: - isSet = myobject && myobject.isSet; + /** + Array of class-names which will be applied in the class="" attribute - // Ember: - isSet = myobject instanceof Ember.Set + You should not maintain this array yourself, rather, you should use + the addClass() method of Ember.RenderBuffer. - @type Boolean - @default true + @type Array + @default [] */ - isSet: true + elementClasses: null, -}); + /** + The id in of the element, to be applied in the id="" attribute -// Support the older API -var o_create = Ember.Set.create; -Ember.Set.create = function(items) { - if (items && Ember.Enumerable.detect(items)) { - ember_deprecate('Passing an enumerable to Ember.Set.create() is deprecated and will be removed in a future version of Ember. Use new Ember.Set(items) instead.'); - return new Ember.Set(items); - } else { - return o_create.apply(this, arguments); - } -}; + You should not set this property yourself, rather, you should use + the id() method of Ember.RenderBuffer. -})(); + @type String + @default null + */ + elementId: null, + /** + A hash keyed on the name of the attribute and whose value will be + applied to that attribute. For example, if you wanted to apply a + data-view="Foo.bar" property to an element, you would set the + elementAttributes hash to {'data-view':'Foo.bar'} + You should not maintain this hash yourself, rather, you should use + the attr() method of Ember.RenderBuffer. -(function() { -// ========================================================================== -// Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. and contributors. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -Ember.CoreObject.subclasses = new Ember.Set(); + @type Hash + @default {} + */ + elementAttributes: null, -/** - @class - @extends Ember.CoreObject - @extends Ember.Observable -*/ -Ember.Object = Ember.CoreObject.extend(Ember.Observable); + /** + The tagname of the element an instance of Ember.RenderBuffer represents. + + Usually, this gets set as the first parameter to Ember.RenderBuffer. For + example, if you wanted to create a `p` tag, then you would call + + Ember.RenderBuffer('p') + + @type String + @default null + */ + elementTag: null, + + /** + A hash keyed on the name of the style attribute and whose value will + be applied to that attribute. For example, if you wanted to apply a + background-color:black;" style to an element, you would set the + elementStyle hash to {'background-color':'black'} + + You should not maintain this hash yourself, rather, you should use + the style() method of Ember.RenderBuffer. + + @type Hash + @default {} + */ + elementStyle: null, + + /** + Nested RenderBuffers will set this to their parent RenderBuffer + instance. + @type Ember._RenderBuffer + */ + parentBuffer: null, + /** + Adds a string of HTML to the RenderBuffer. + @param {String} string HTML to push into the buffer + @returns {Ember.RenderBuffer} this + */ + push: function(string) { + this.childBuffers.push(String(string)); + return this; + }, -})(); + /** + Adds a class to the buffer, which will be rendered to the class attribute. + @param {String} className Class name to add to the buffer + @returns {Ember.RenderBuffer} this + */ + addClass: function(className) { + // lazily create elementClasses + var elementClasses = this.elementClasses = (this.elementClasses || new ClassSet()); + this.elementClasses.add(className); + return this; + }, -(function() { -// ========================================================================== -// Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. and contributors. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -var indexOf = Ember.ArrayUtils.indexOf; + /** + Sets the elementID to be used for the element. -/** - @private - A Namespace is an object usually used to contain other objects or methods - such as an application or framework. Create a namespace anytime you want - to define one of these new containers. + @param {String} id + @returns {Ember.RenderBuffer} this + */ + id: function(id) { + this.elementId = id; + return this; + }, - # Example Usage + // duck type attribute functionality like jQuery so a render buffer + // can be used like a jQuery object in attribute binding scenarios. - MyFramework = Ember.Namespace.create({ - VERSION: '1.0.0' - }); + /** + Adds an attribute which will be rendered to the element. -*/ -Ember.Namespace = Ember.Object.extend({ - isNamespace: true, + @param {String} name The name of the attribute + @param {String} value The value to add to the attribute + @returns {Ember.RenderBuffer|String} this or the current attribute value + */ + attr: function(name, value) { + var attributes = this.elementAttributes = (this.elementAttributes || {}); - init: function() { - Ember.Namespace.NAMESPACES.push(this); - Ember.Namespace.PROCESSED = false; - }, + if (arguments.length === 1) { + return attributes[name]; + } else { + attributes[name] = value; + } - toString: function() { - Ember.identifyNamespaces(); - return this[Ember.GUID_KEY+'_name']; + return this; }, - destroy: function() { - var namespaces = Ember.Namespace.NAMESPACES; - window[this.toString()] = undefined; - namespaces.splice(indexOf(namespaces, this), 1); - this._super(); - } -}); - -Ember.Namespace.NAMESPACES = [Ember]; -Ember.Namespace.PROCESSED = false; - -})(); + /** + Remove an attribute from the list of attributes to render. + @param {String} name The name of the attribute + @returns {Ember.RenderBuffer} this + */ + removeAttr: function(name) { + var attributes = this.elementAttributes; + if (attributes) { delete attributes[name]; } + return this; + }, -(function() { -// ========================================================================== -// Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. and contributors. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -/** - @private + /** + Adds a style to the style attribute which will be rendered to the element. - Defines a namespace that will contain an executable application. This is - very similar to a normal namespace except that it is expected to include at - least a 'ready' function which can be run to initialize the application. + @param {String} name Name of the style + @param {String} value + @returns {Ember.RenderBuffer} this + */ + style: function(name, value) { + var style = this.elementStyle = (this.elementStyle || {}); - Currently Ember.Application is very similar to Ember.Namespace. However, this - class may be augmented by additional frameworks so it is important to use - this instance when building new applications. + this.elementStyle[name] = value; + return this; + }, - # Example Usage + /** + Create a new child render buffer from a parent buffer. Optionally set + additional properties on the buffer. Optionally invoke a callback + with the newly created buffer. - MyApp = Ember.Application.create({ - VERSION: '1.0.0', - store: Ember.Store.create().from(Ember.fixtures) - }); + This is a primitive method used by other public methods: `begin`, + `prepend`, `replaceWith`, `insertAfter`. - MyApp.ready = function() { - //..init code goes here... - } + @private + @param {String} tagName Tag name to use for the child buffer's element + @param {Ember._RenderBuffer} parent The parent render buffer that this + buffer should be appended to. + @param {Function} fn A callback to invoke with the newly created buffer. + @param {Object} other Additional properties to add to the newly created + buffer. + */ + newBuffer: function(tagName, parent, fn, other) { + var buffer = new Ember._RenderBuffer(tagName); + buffer.parentBuffer = parent; -*/ -Ember.Application = Ember.Namespace.extend(); + if (other) { buffer.setProperties(other); } + if (fn) { fn.call(this, buffer); } + return buffer; + }, -})(); + /** + Replace the current buffer with a new buffer. This is a primitive + used by `remove`, which passes `null` for `newBuffer`, and `replaceWith`, + which passes the new buffer it created. + @private + @param {Ember._RenderBuffer} buffer The buffer to insert in place of + the existing buffer. + */ + replaceWithBuffer: function(newBuffer) { + var parent = this.parentBuffer; + if (!parent) { return; } + var childBuffers = parent.childBuffers; -(function() { -// ========================================================================== -// Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. and contributors. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -var get = Ember.get, set = Ember.set; + var index = indexOf(childBuffers, this); -/** - @class + if (newBuffer) { + childBuffers.splice(index, 1, newBuffer); + } else { + childBuffers.splice(index, 1); + } + }, - An ArrayProxy wraps any other object that implements Ember.Array and/or - Ember.MutableArray, forwarding all requests. This makes it very useful for - a number of binding use cases or other cases where being able to swap - out the underlying array is useful. + /** + Creates a new Ember.RenderBuffer object with the provided tagName as + the element tag and with its parentBuffer property set to the current + Ember.RenderBuffer. - A simple example of usage: + @param {String} tagName Tag name to use for the child buffer's element + @returns {Ember.RenderBuffer} A new RenderBuffer object + */ + begin: function(tagName) { + return this.newBuffer(tagName, this, function(buffer) { + this.childBuffers.push(buffer); + }); + }, - var pets = ['dog', 'cat', 'fish']; - var arrayProxy = Ember.ArrayProxy.create({ content: Ember.A(pets) }); - ap.get('firstObject'); // => 'dog' - ap.set('content', ['amoeba', 'paramecium']); - ap.get('firstObject'); // => 'amoeba' + /** + Prepend a new child buffer to the current render buffer. - This class can also be useful as a layer to transform the contents of - an array, as they are accessed. This can be done by overriding - `objectAtContent`: + @param {String} tagName Tag name to use for the child buffer's element + */ + prepend: function(tagName) { + return this.newBuffer(tagName, this, function(buffer) { + this.childBuffers.splice(0, 0, buffer); + }); + }, - var pets = ['dog', 'cat', 'fish']; - var ap = Ember.ArrayProxy.create({ - content: Ember.A(pets), - objectAtContent: function(idx) { - return this.get('content').objectAt(idx).toUpperCase(); - } - }); - ap.get('firstObject'); // => 'DOG' + /** + Replace the current buffer with a new render buffer. + @param {String} tagName Tag name to use for the new buffer's element + */ + replaceWith: function(tagName) { + var parentBuffer = this.parentBuffer; - @extends Ember.Object - @extends Ember.Array - @extends Ember.MutableArray -*/ -Ember.ArrayProxy = Ember.Object.extend(Ember.MutableArray, -/** @scope Ember.ArrayProxy.prototype */ { + return this.newBuffer(tagName, parentBuffer, function(buffer) { + this.replaceWithBuffer(buffer); + }); + }, /** - The content array. Must be an object that implements Ember.Array and/or - Ember.MutableArray. + Insert a new render buffer after the current render buffer. - @property {Ember.Array} + @param {String} tagName Tag name to use for the new buffer's element */ - content: null, + insertAfter: function(tagName) { + var parentBuffer = get(this, 'parentBuffer'); + + return this.newBuffer(tagName, parentBuffer, function(buffer) { + var siblings = parentBuffer.childBuffers; + var index = indexOf(siblings, this); + siblings.splice(index + 1, 0, buffer); + }); + }, /** - Should actually retrieve the object at the specified index from the - content. You can override this method in subclasses to transform the - content item to something new. + Closes the current buffer and adds its content to the parentBuffer. - This method will only be called if content is non-null. + @returns {Ember.RenderBuffer} The parentBuffer, if one exists. Otherwise, this + */ + end: function() { + var parent = this.parentBuffer; + return parent || this; + }, - @param {Number} idx - The index to retreive. + remove: function() { + this.replaceWithBuffer(null); + }, - @returns {Object} the value or undefined if none found + /** + @returns {DOMElement} The element corresponding to the generated HTML + of this buffer */ - objectAtContent: function(idx) { - return get(this, 'content').objectAt(idx); + element: function() { + return Ember.$(this.string())[0]; }, /** - Should actually replace the specified objects on the content array. - You can override this method in subclasses to transform the content item - into something new. + Generates the HTML content for this buffer. - This method will only be called if content is non-null. + @returns {String} The generated HTMl + */ + string: function() { + var content = '', tag = this.elementTag, openTag; - @param {Number} idx - The starting index + if (tag) { + var id = this.elementId, + classes = this.elementClasses, + attrs = this.elementAttributes, + style = this.elementStyle, + styleBuffer = '', prop; - @param {Number} amt - The number of items to remove from the content. + openTag = ["<" + tag]; - @param {Array} objects - Optional array of objects to insert or null if no objects. + if (id) { openTag.push('id="' + this._escapeAttribute(id) + '"'); } + if (classes) { openTag.push('class="' + this._escapeAttribute(classes.toDOM()) + '"'); } - @returns {void} - */ - replaceContent: function(idx, amt, objects) { - get(this, 'content').replace(idx, amt, objects); - }, + if (style) { + for (prop in style) { + if (style.hasOwnProperty(prop)) { + styleBuffer += (prop + ':' + this._escapeAttribute(style[prop]) + ';'); + } + } - /** - Invoked when the content property is about to change. Notifies observers that the - entire array content will change. - */ - contentWillChange: Ember.beforeObserver(function() { - var content = get(this, 'content'), - len = content ? get(content, 'length') : 0; - this.arrayWillChange(content, 0, len, undefined); - if (content) content.removeArrayObserver(this); - }, 'content'), + openTag.push('style="' + styleBuffer + '"'); + } - /** - Invoked when the content property changes. Notifies observers that the - entire array content has changed. - */ - contentDidChange: Ember.observer(function() { - var content = get(this, 'content'), - len = content ? get(content, 'length') : 0; - if (content) content.addArrayObserver(this); - this.arrayDidChange(content, 0, undefined, len); - }, 'content'), + if (attrs) { + for (prop in attrs) { + if (attrs.hasOwnProperty(prop)) { + openTag.push(prop + '="' + this._escapeAttribute(attrs[prop]) + '"'); + } + } + } - /** @private (nodoc) */ - objectAt: function(idx) { - return get(this, 'content') && this.objectAtContent(idx); - }, + openTag = openTag.join(" ") + '>'; + } - /** @private (nodoc) */ - length: Ember.computed(function() { - var content = get(this, 'content'); - return content ? get(content, 'length') : 0; - }).property('content.length').cacheable(), + var childBuffers = this.childBuffers; - /** @private (nodoc) */ - replace: function(idx, amt, objects) { - if (get(this, 'content')) this.replaceContent(idx, amt, objects); - return this; - }, + forEach(childBuffers, function(buffer) { + var stringy = typeof buffer === 'string'; + content += (stringy ? buffer : buffer.string()); + }); - /** @private (nodoc) */ - arrayWillChange: function(item, idx, removedCnt, addedCnt) { - this.arrayContentWillChange(idx, removedCnt, addedCnt); + if (tag) { + return openTag + content + ""; + } else { + return content; + } }, - /** @private (nodoc) */ - arrayDidChange: function(item, idx, removedCnt, addedCnt) { - this.arrayContentDidChange(idx, removedCnt, addedCnt); - }, + _escapeAttribute: function(value) { + // Stolen shamelessly from Handlebars - /** @private (nodoc) */ - init: function() { - this._super(); - this.contentDidChange(); - } + var escape = { + "<": "<", + ">": ">", + '"': """, + "'": "'", + "`": "`" + }; -}); + var badChars = /&(?!\w+;)|[<>"'`]/g; + var possible = /[&<>"'`]/; + + var escapeChar = function(chr) { + return escape[chr] || "&"; + }; + var string = value.toString(); + if(!possible.test(string)) { return string; } + return string.replace(badChars, escapeChar); + } +}; })(); @@ -11021,204 +12520,212 @@ Ember.ArrayProxy = Ember.Object.extend(Ember.MutableArray, (function() { // ========================================================================== -// Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. and contributors. +// Project: Ember - JavaScript Application Framework +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2011 Apple Inc. All rights reserved. // License: Licensed under MIT license (see license.js) // ========================================================================== -var set = Ember.set, get = Ember.get, guidFor = Ember.guidFor; -var forEach = Ember.ArrayUtils.forEach; - -var EachArray = Ember.Object.extend(Ember.Array, { - init: function(content, keyName, owner) { - this._super(); - this._keyName = keyName; - this._owner = owner; - this._content = content; - }, - - objectAt: function(idx) { - var item = this._content.objectAt(idx); - return item && get(item, this._keyName); - }, +var get = Ember.get, set = Ember.set, fmt = Ember.String.fmt; - length: Ember.computed(function() { - var content = this._content; - return content ? get(content, 'length') : 0; - }).property('[]').cacheable() +/** + @ignore -}); + Ember.EventDispatcher handles delegating browser events to their corresponding + Ember.Views. For example, when you click on a view, Ember.EventDispatcher ensures + that that view's `mouseDown` method gets called. +*/ +Ember.EventDispatcher = Ember.Object.extend( +/** @scope Ember.EventDispatcher.prototype */{ -var IS_OBSERVER = /^.+:(before|change)$/; + /** + @private -/** @private */ -function addObserverForContentKey(content, keyName, proxy, idx, loc) { - var objects = proxy._objects, guid; - if (!objects) objects = proxy._objects = {}; + The root DOM element to which event listeners should be attached. Event + listeners will be attached to the document unless this is overridden. - while(--loc>=idx) { - var item = content.objectAt(loc); - if (item) { - Ember.addBeforeObserver(item, keyName, proxy, 'contentKeyWillChange'); - Ember.addObserver(item, keyName, proxy, 'contentKeyDidChange'); + Can be specified as a DOMElement or a selector string. - // keep track of the indicies each item was found at so we can map - // it back when the obj changes. - guid = guidFor(item); - if (!objects[guid]) objects[guid] = []; - objects[guid].push(loc); - } - } -} + The default body is a string since this may be evaluated before document.body + exists in the DOM. -/** @private */ -function removeObserverForContentKey(content, keyName, proxy, idx, loc) { - var objects = proxy._objects; - if (!objects) objects = proxy._objects = {}; - var indicies, guid; + @type DOMElement + @default 'body' + */ + rootElement: 'body', - while(--loc>=idx) { - var item = content.objectAt(loc); - if (item) { - Ember.removeBeforeObserver(item, keyName, proxy, 'contentKeyWillChange'); - Ember.removeObserver(item, keyName, proxy, 'contentKeyDidChange'); + /** + @private - guid = guidFor(item); - indicies = objects[guid]; - indicies[indicies.indexOf(loc)] = null; - } - } -} + Sets up event listeners for standard browser events. -/** - @private - @class + This will be called after the browser sends a DOMContentReady event. By + default, it will set up all of the listeners on the document body. If you + would like to register the listeners on a different element, set the event + dispatcher's `root` property. + */ + setup: function(addedEvents) { + var event, events = { + touchstart : 'touchStart', + touchmove : 'touchMove', + touchend : 'touchEnd', + touchcancel : 'touchCancel', + keydown : 'keyDown', + keyup : 'keyUp', + keypress : 'keyPress', + mousedown : 'mouseDown', + mouseup : 'mouseUp', + contextmenu : 'contextMenu', + click : 'click', + dblclick : 'doubleClick', + mousemove : 'mouseMove', + focusin : 'focusIn', + focusout : 'focusOut', + mouseenter : 'mouseEnter', + mouseleave : 'mouseLeave', + submit : 'submit', + input : 'input', + change : 'change', + dragstart : 'dragStart', + drag : 'drag', + dragenter : 'dragEnter', + dragleave : 'dragLeave', + dragover : 'dragOver', + drop : 'drop', + dragend : 'dragEnd' + }; - This is the object instance returned when you get the @each property on an - array. It uses the unknownProperty handler to automatically create - EachArray instances for property names. + Ember.$.extend(events, addedEvents || {}); - @extends Ember.Object -*/ -Ember.EachProxy = Ember.Object.extend({ + var rootElement = Ember.$(get(this, 'rootElement')); - init: function(content) { - this._super(); - this._content = content; - content.addArrayObserver(this); + Ember.assert(fmt('You cannot use the same root element (%@) multiple times in an Ember.Application', [rootElement.selector || rootElement[0].tagName]), !rootElement.is('.ember-application')); + Ember.assert('You cannot make a new Ember.Application using a root element that is a descendent of an existing Ember.Application', !rootElement.closest('.ember-application').length); + Ember.assert('You cannot make a new Ember.Application using a root element that is an ancestor of an existing Ember.Application', !rootElement.find('.ember-application').length); - // in case someone is already observing some keys make sure they are - // added - forEach(Ember.watchedEvents(this), function(eventName) { - this.didAddListener(eventName); - }, this); - }, + rootElement.addClass('ember-application'); - /** - You can directly access mapped properties by simply requesting them. - The unknownProperty handler will generate an EachArray of each item. - */ - unknownProperty: function(keyName, value) { - var ret; - ret = new EachArray(this._content, keyName, this); - new Ember.Descriptor().setup(this, keyName, ret); - this.beginObservingContentKey(keyName); - return ret; + Ember.assert('Unable to add "ember-application" class to rootElement. Make sure you set rootElement to the body or an element in the body.', rootElement.is('.ember-application')); + + for (event in events) { + if (events.hasOwnProperty(event)) { + this.setupHandler(rootElement, event, events[event]); + } + } }, - // .......................................................... - // ARRAY CHANGES - // Invokes whenever the content array itself changes. + /** + @private - arrayWillChange: function(content, idx, removedCnt, addedCnt) { - var keys = this._keys, key, array, lim; + Registers an event listener on the document. If the given event is + triggered, the provided event handler will be triggered on the target + view. - lim = removedCnt>0 ? idx+removedCnt : -1; - Ember.beginPropertyChanges(this); + If the target view does not implement the event handler, or if the handler + returns false, the parent view will be called. The event will continue to + bubble to each successive parent view until it reaches the top. - for(key in keys) { - if (!keys.hasOwnProperty(key)) { continue; } + For example, to have the `mouseDown` method called on the target view when + a `mousedown` event is received from the browser, do the following: - if (lim>0) removeObserverForContentKey(content, key, this, idx, lim); + setupHandler('mousedown', 'mouseDown'); - Ember.propertyWillChange(this, key); - } + @param {String} event the browser-originated event to listen to + @param {String} eventName the name of the method to call on the view + */ + setupHandler: function(rootElement, event, eventName) { + var self = this; - Ember.propertyWillChange(this._content, '@each'); - Ember.endPropertyChanges(this); - }, + rootElement.delegate('.ember-view', event + '.ember', function(evt, triggeringManager) { - arrayDidChange: function(content, idx, removedCnt, addedCnt) { - var keys = this._keys, key, array, lim; + var view = Ember.View.views[this.id], + result = true, manager = null; - lim = addedCnt>0 ? idx+addedCnt : -1; - Ember.beginPropertyChanges(this); + manager = self._findNearestEventManager(view,eventName); - for(key in keys) { - if (!keys.hasOwnProperty(key)) { continue; } + if (manager && manager !== triggeringManager) { + result = self._dispatchEvent(manager, evt, eventName, view); + } else if (view) { + result = self._bubbleEvent(view,evt,eventName); + } else { + evt.stopPropagation(); + } - if (lim>0) addObserverForContentKey(content, key, this, idx, lim); + return result; + }); - Ember.propertyDidChange(this, key); - } + rootElement.delegate('[data-ember-action]', event + '.ember', function(evt) { + var actionId = Ember.$(evt.currentTarget).attr('data-ember-action'), + action = Ember.Handlebars.ActionHelper.registeredActions[actionId], + handler = action.handler; - Ember.propertyDidChange(this._content, '@each'); - Ember.endPropertyChanges(this); + if (action.eventName === eventName) { + return handler(evt); + } + }); }, - // .......................................................... - // LISTEN FOR NEW OBSERVERS AND OTHER EVENT LISTENERS - // Start monitoring keys based on who is listening... + /** @private */ + _findNearestEventManager: function(view, eventName) { + var manager = null; - didAddListener: function(eventName) { - if (IS_OBSERVER.test(eventName)) { - this.beginObservingContentKey(eventName.slice(0, -7)); - } - }, + while (view) { + manager = get(view, 'eventManager'); + if (manager && manager[eventName]) { break; } - didRemoveListener: function(eventName) { - if (IS_OBSERVER.test(eventName)) { - this.stopObservingContentKey(eventName.slice(0, -7)); + view = get(view, 'parentView'); } + + return manager; }, - // .......................................................... - // CONTENT KEY OBSERVING - // Actual watch keys on the source content. + /** @private */ + _dispatchEvent: function(object, evt, eventName, view) { + var result = true; - beginObservingContentKey: function(keyName) { - var keys = this._keys; - if (!keys) keys = this._keys = {}; - if (!keys[keyName]) { - keys[keyName] = 1; - var content = this._content, - len = get(content, 'length'); - addObserverForContentKey(content, keyName, this, 0, len); - } else { - keys[keyName]++; + var handler = object[eventName]; + if (Ember.typeOf(handler) === 'function') { + result = handler.call(object, evt, view); + evt.stopPropagation(); } - }, - - stopObservingContentKey: function(keyName) { - var keys = this._keys; - if (keys && (keys[keyName]>0) && (--keys[keyName]<=0)) { - var content = this._content, - len = get(content, 'length'); - removeObserverForContentKey(content, keyName, this, 0, len); + else { + result = this._bubbleEvent(view, evt, eventName); } + + return result; }, - contentKeyWillChange: function(obj, keyName) { - Ember.propertyWillChange(this, keyName); + /** @private */ + _bubbleEvent: function(view, evt, eventName) { + return Ember.run(function() { + return view.handleEvent(eventName, evt); + }); }, - contentKeyDidChange: function(obj, keyName) { - Ember.propertyDidChange(this, keyName); + /** @private */ + destroy: function() { + var rootElement = get(this, 'rootElement'); + Ember.$(rootElement).undelegate('.ember').removeClass('ember-application'); + return this._super(); } - }); +})(); + + + +(function() { +// ========================================================================== +// Project: Ember - JavaScript Application Framework +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2011 Apple Inc. All rights reserved. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +// Add a new named queue for rendering views that happens +// after bindings have synced. +var queues = Ember.run.queues; +queues.splice(Ember.$.inArray('actions', queues)+1, 0, 'render'); })(); @@ -11226,2721 +12733,2768 @@ Ember.EachProxy = Ember.Object.extend({ (function() { // ========================================================================== -// Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. and contributors. +// Project: Ember - JavaScript Application Framework +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2011 Apple Inc. All rights reserved. // License: Licensed under MIT license (see license.js) // ========================================================================== -var get = Ember.get, set = Ember.set; -// Add Ember.Array to Array.prototype. Remove methods with native -// implementations and supply some more optimized versions of generic methods -// because they are so common. -var NativeArray = Ember.Mixin.create(Ember.MutableArray, Ember.Observable, Ember.Copyable, { +})(); - // because length is a built-in property we need to know to just get the - // original property. - get: function(key) { - if (key==='length') return this.length; - else if ('number' === typeof key) return this[key]; - else return this._super(key); - }, - objectAt: function(idx) { - return this[idx]; - }, - // primitive for array support. - replace: function(idx, amt, objects) { +(function() { +// ========================================================================== +// Project: Ember - JavaScript Application Framework +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2011 Apple Inc. All rights reserved. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +var get = Ember.get, set = Ember.set, addObserver = Ember.addObserver; +var getPath = Ember.getPath, meta = Ember.meta, fmt = Ember.String.fmt; +var a_slice = Array.prototype.slice; +var a_forEach = Ember.ArrayUtils.forEach; - if (this.isFrozen) throw Ember.FROZEN_ERROR ; +var childViewsProperty = Ember.computed(function() { + var childViews = get(this, '_childViews'); - // if we replaced exactly the same number of items, then pass only the - // replaced range. Otherwise, pass the full remaining array length - // since everything has shifted - var len = objects ? get(objects, 'length') : 0; - this.arrayContentWillChange(idx, amt, len); + var ret = Ember.A(); - if (!objects || objects.length === 0) { - this.splice(idx, amt) ; + a_forEach(childViews, function(view) { + if (view.isVirtual) { + ret.pushObjects(get(view, 'childViews')); } else { - var args = [idx, amt].concat(objects) ; - this.splice.apply(this,args) ; + ret.push(view); } + }); + + return ret; +}).property().cacheable(); + +var VIEW_PRESERVES_CONTEXT = Ember.VIEW_PRESERVES_CONTEXT; +Ember.warn("The way that the {{view}} helper affects templates is about to change. Previously, templates inside child views would use the new view as the context. Soon, views will preserve their parent context when rendering their template. You can opt-in early to the new behavior by setting `ENV.VIEW_PRESERVES_CONTEXT = true`. For more information, see https://gist.github.com/2494968. You should update your templates as soon as possible; this default will change soon, and the option will be eliminated entirely before the 1.0 release.", VIEW_PRESERVES_CONTEXT); + +/** + @static + + Global hash of shared templates. This will automatically be populated + by the build tools so that you can store your Handlebars templates in + separate files that get loaded into JavaScript at buildtime. + + @type Hash +*/ +Ember.TEMPLATES = {}; + +var invokeForState = { + preRender: {}, + inBuffer: {}, + hasElement: {}, + inDOM: {}, + destroyed: {} +}; + +/** + @class + + `Ember.View` is the class in Ember responsible for encapsulating templates of HTML + content, combining templates with data to render as sections of a page's DOM, and + registering and responding to user-initiated events. + + ## HTML Tag + The default HTML tag name used for a view's DOM representation is `div`. This can be + customized by setting the `tagName` property. The following view class: + + ParagraphView = Ember.View.extend({ + tagName: 'em' + }) + + Would result in instances with the following HTML: + + + + ## HTML `class` Attribute + The HTML `class` attribute of a view's tag can be set by providing a `classNames` property + that is set to an array of strings: + + MyView = Ember.View.extend({ + classNames: ['my-class', 'my-other-class'] + }) + + Will result in view instances with an HTML representation of: + +
+ + `class` attribute values can also be set by providing a `classNameBindings` property + set to an array of properties names for the view. The return value of these properties + will be added as part of the value for the view's `class` attribute. These properties + can be computed properties: + + MyView = Ember.View.extend({ + classNameBindings: ['propertyA', 'propertyB'], + propertyA: 'from-a', + propertyB: function(){ + if(someLogic){ return 'from-b'; } + }.property() + }) + + Will result in view instances with an HTML representation of: + +
+ + If the value of a class name binding returns a boolean the property name itself + will be used as the class name if the property is true. The class name will + not be added if the value is `false` or `undefined`. + + MyView = Ember.View.extend({ + classNameBindings: ['hovered'], + hovered: true + }) + + Will result in view instances with an HTML representation of: + +
- this.arrayContentDidChange(idx, amt, len); - return this ; - }, + When using boolean class name bindings you can supply a string value other than the + property name for use as the `class` HTML attribute by appending the preferred value after + a ":" character when defining the binding: - // If you ask for an unknown property, then try to collect the value - // from member items. - unknownProperty: function(key, value) { - var ret;// = this.reducedProperty(key, value) ; - if ((value !== undefined) && ret === undefined) { - ret = this[key] = value; - } - return ret ; - }, + MyView = Ember.View.extend({ + classNameBindings: ['awesome:so-very-cool'], + awesome: true + }) - // If browser did not implement indexOf natively, then override with - // specialized version - indexOf: function(object, startAt) { - var idx, len = this.length; + Will result in view instances with an HTML representation of: - if (startAt === undefined) startAt = 0; - else startAt = (startAt < 0) ? Math.ceil(startAt) : Math.floor(startAt); - if (startAt < 0) startAt += len; +
- for(idx=startAt;idx=0;idx--) { - if (this[idx] === object) return idx ; - } - return -1; - }, + Will result in view instances with an HTML representation of: - copy: function() { - return this.slice(); - } -}); +
-// Remove any methods implemented natively so we don't override them -var ignore = ['length']; -Ember.ArrayUtils.forEach(NativeArray.keys(), function(methodName) { - if (Array.prototype[methodName]) ignore.push(methodName); -}); -if (ignore.length>0) { - NativeArray = NativeArray.without.apply(NativeArray, ignore); -} + Class name bindings can also refer to object values that are found by + traversing a path relative to the view itself: -/** - The NativeArray mixin contains the properties needed to to make the native - Array support Ember.MutableArray and all of its dependent APIs. Unless you - have Ember.EXTEND_PROTOTYPES set to false, this will be applied automatically. - Otherwise you can apply the mixin at anytime by calling - `Ember.NativeArray.activate`. + MyView = Ember.View.extend({ + classNameBindings: ['messages.empty'] + messages: Ember.Object.create({ + empty: true + }) + }) - @namespace - @extends Ember.MutableArray - @extends Ember.Array - @extends Ember.Enumerable - @extends Ember.MutableEnumerable - @extends Ember.Copyable - @extends Ember.Freezable -*/ -Ember.NativeArray = NativeArray; + Will result in view instances with an HTML representation of: -/** - Creates an Ember.NativeArray from an Array like object. - Does not modify the original object. +
- @returns {Ember.NativeArray} -*/ -Ember.A = function(arr){ - if (arr === undefined) { arr = []; } - return Ember.NativeArray.apply(arr); -}; + Updates to the the value of a class name binding will result in automatic update + of the HTML `class` attribute in the view's rendered HTML representation. + If the value becomes `false` or `undefined` the class name will be removed. -/** - Activates the mixin on the Array.prototype if not already applied. Calling - this method more than once is safe. + Both `classNames` and `classNameBindings` are concatenated properties. + See `Ember.Object` documentation for more information about concatenated properties. - @returns {void} -*/ -Ember.NativeArray.activate = function() { - NativeArray.apply(Array.prototype); + ## HTML Attributes + The HTML attribute section of a view's tag can be set by providing an `attributeBindings` + property set to an array of property names on the view. The return value of these properties + will be used as the value of the view's HTML associated attribute: - Ember.A = function(arr) { return arr || []; }; -}; + AnchorView = Ember.View.extend({ + tagName: 'a', + attributeBindings: ['href'], + href: 'http://google.com' + }) -if (Ember.EXTEND_PROTOTYPES) Ember.NativeArray.activate(); + Will result in view instances with an HTML representation of: + + If the return value of an `attributeBindings` monitored property is a boolean + the property will follow HTML's pattern of repeating the attribute's name as + its value: -})(); + MyTextInput = Ember.View.extend({ + tagName: 'input', + attributeBindings: ['disabled'], + disabled: true + }) + Will result in view instances with an HTML representation of: + -(function() { -/** - JavaScript (before ES6) does not have a Map implementation. Objects, - which are often used as dictionaries, may only have Strings as keys. + `attributeBindings` can refer to computed properties: - Because Ember has a way to get a unique identifier for every object - via `Ember.guidFor`, we can implement a performant Map with arbitrary - keys. Because it is commonly used in low-level bookkeeping, Map is - implemented as a pure JavaScript object for performance. + MyTextInput = Ember.View.extend({ + tagName: 'input', + attributeBindings: ['disabled'], + disabled: function(){ + if (someLogic) { + return true; + } else { + return false; + } + }.property() + }) - This implementation follows the current iteration of the ES6 proposal - for maps (http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets), - with two exceptions. First, because we need our implementation to be - pleasant on older browsers, we do not use the `delete` name (using - `remove` instead). Second, as we do not have the luxury of in-VM - iteration, we implement a forEach method for iteration. + Updates to the the property of an attribute binding will result in automatic update + of the HTML attribute in the view's rendered HTML representation. - Map is mocked out to look like an Ember object, so you can do - `Ember.Map.create()` for symmetry with other Ember classes. -*/ + `attributeBindings` is a concatenated property. See `Ember.Object` documentation + for more information about concatenated properties. -/** @private */ -var guidFor = Ember.guidFor; -var indexOf = Ember.ArrayUtils.indexOf; + ## Templates + The HTML contents of a view's rendered representation are determined by its template. + Templates can be any function that accepts an optional context parameter and returns + a string of HTML that will be inserted within the view's tag. Most + typically in Ember this function will be a compiled Ember.Handlebars template. -// This class is used internally by Ember.js and Ember Data. -// Please do not use it at this time. We plan to clean it up -// and add many tests soon. -var OrderedSet = Ember.OrderedSet = function() { - this.clear(); -}; + AView = Ember.View.extend({ + template: Ember.Handlebars.compile('I am the template') + }) -OrderedSet.create = function() { - return new OrderedSet(); -}; + Will result in view instances with an HTML representation of: -OrderedSet.prototype = { - clear: function() { - this.presenceSet = {}; - this.list = []; - }, +
I am the template
- add: function(obj) { - var guid = guidFor(obj), - presenceSet = this.presenceSet, - list = this.list; + The default context of the compiled template will be the view instance itself: - if (guid in presenceSet) { return; } + AView = Ember.View.extend({ + template: Ember.Handlebars.compile('Hello {{excitedGreeting}}') + }) - presenceSet[guid] = true; - list.push(obj); - }, + aView = AView.create({ + content: Ember.Object.create({ + firstName: 'Barry' + }) + excitedGreeting: function(){ + return this.getPath("content.firstName") + "!!!" + } + }) - remove: function(obj) { - var guid = guidFor(obj), - presenceSet = this.presenceSet, - list = this.list; + Will result in an HTML representation of: - delete presenceSet[guid]; +
Hello Barry!!!
- var index = indexOf(list, obj); - if (index > -1) { - list.splice(index, 1); - } - }, + Within an Ember application is more common to define a Handlebars templates as + part of a page: - isEmpty: function() { - return this.list.length === 0; - }, + - forEach: function(fn, self) { - // allow mutation during iteration - var list = this.list.slice(); + And associate it by name using a view's `templateName` property: - for (var i = 0, j = list.length; i < j; i++) { - fn.call(self, list[i]); - } - }, + AView = Ember.View.extend({ + templateName: 'some-template' + }) - toArray: function() { - return this.list.slice(); - } -}; + Using a value for `templateName` that does not have a Handlebars template with a + matching `data-template-name` attribute will throw an error. -/** - A Map stores values indexed by keys. Unlike JavaScript's - default Objects, the keys of a Map can be any JavaScript - object. + Assigning a value to both `template` and `templateName` properties will throw an error. - Internally, a Map has two data structures: + For views classes that may have a template later defined (e.g. as the block portion of a `{{view}}` + Handlebars helper call in another template or in a subclass), you can provide a `defaultTemplate` + property set to compiled template function. If a template is not later provided for the view + instance the `defaultTemplate` value will be used: - `keys`: an OrderedSet of all of the existing keys - `values`: a JavaScript Object indexed by the - Ember.guidFor(key) + AView = Ember.View.extend({ + defaultTemplate: Ember.Handlebars.compile('I was the default'), + template: null, + templateName: null + }) - When a key/value pair is added for the first time, we - add the key to the `keys` OrderedSet, and create or - replace an entry in `values`. When an entry is deleted, - we delete its entry in `keys` and `values`. -*/ + Will result in instances with an HTML representation of: -/** @private */ -var Map = Ember.Map = function() { - this.keys = Ember.OrderedSet.create(); - this.values = {}; -}; +
I was the default
-Map.create = function() { - return new Map(); -}; + If a `template` or `templateName` is provided it will take precedence over `defaultTemplate`: -Map.prototype = { - /** - Retrieve the value associated with a given key. + AView = Ember.View.extend({ + defaultTemplate: Ember.Handlebars.compile('I was the default') + }) - @param {anything} key - @return {anything} the value associated with the key, or undefined - */ - get: function(key) { - var values = this.values, - guid = guidFor(key); + aView = AView.create({ + template: Ember.Handlebars.compile('I was the template, not default') + }) - return values[guid]; - }, + Will result in the following HTML representation when rendered: - /** - Adds a value to the map. If a value for the given key has already been - provided, the new value will replace the old value. +
I was the template, not default
- @param {anything} key - @param {anything} value - */ - set: function(key, value) { - var keys = this.keys, - values = this.values, - guid = guidFor(key); + ## Layouts + Views can have a secondary outer template that wraps their main template. Like + primary templates, layouts can be any function that accepts an optional context + parameter and returns a string of HTML that will be inserted a view's tag. + Most typically in Ember this function will be a compiled Ember.Handlebars template. - keys.add(key); - values[guid] = value; - }, + A view's layout can be set directly with the `layout` property or reference an + existing Handlebars template by name with the `layoutName` property. - /** - Removes a value from the map for an associated key. + A template used as a layout must contain a single use of the Handlebars `{{yield}}` + helper. The HTML contents of a view's rendered `template` will be inserted at this location: - @param {anything} key - @returns {Boolean} true if an item was removed, false otherwise - */ - remove: function(key) { - // don't use ES6 "delete" because it will be annoying - // to use in browsers that are not ES6 friendly; - var keys = this.keys, - values = this.values, - guid = guidFor(key), - value; + AViewWithLayout = Ember.View.extend({ + layout: Ember.Handlebars.compile("
{{yield}}
") + template: Ember.Handlebars.compile("I got wrapped"), + }) - if (values.hasOwnProperty(guid)) { - keys.remove(key); - value = values[guid]; - delete values[guid]; - return true; - } else { - return false; - } - }, + Will result in view instances with an HTML representation of: - /** - Check whether a key is present. +
+
+ I got wrapped +
+
- @param {anything} key - @returns {Boolean} true if the item was present, false otherwise - */ - has: function(key) { - var values = this.values, - guid = guidFor(key); + See `Handlebars.helpers.yield` for more information. - return values.hasOwnProperty(guid); - }, + ## Responding to Browser Events + Views can respond to user-initiated events in one of three ways: method implementation, + through an event manager, and through `{{action}}` helper use in their template or layout. - /** - Iterate over all the keys and values. Calls the function once - for each key, passing in the key and value, in that order. + ### Method Implementation + Views can respond to user-initiated events by implementing a method that matches the + event name. A `jQuery.Event` object will be passed as the argument to this method. - The keys are guaranteed to be iterated over in insertion order. + AView = Ember.View.extend({ + click: function(event){ + // will be called when when an instance's + // rendered element is clicked + } + }) + + ### Event Managers + Views can define an object as their `eventManager` property. This object can then + implement methods that match the desired event names. Matching events that occur + on the view's rendered HTML or the rendered HTML of any of its DOM descendants + will trigger this method. A `jQuery.Event` object will be passed as the first + argument to the method and an `Ember.View` object as the second. The `Ember.View` + will be the view whose rendered HTML was interacted with. This may be the view with + the `eventManager` property or one of its descendent views. + + AView = Ember.View.extend({ + eventManager: Ember.Object.create({ + doubleClick: function(event, view){ + // will be called when when an instance's + // rendered element or any rendering + // of this views's descendent + // elements is clicked + } + }) + }) - @param {Function} callback - @param {anything} self if passed, the `this` value inside the - callback. By default, `this` is the map. - */ - forEach: function(callback, self) { - var keys = this.keys, - values = this.values; - keys.forEach(function(key) { - var guid = guidFor(key); - callback.call(self, key, values[guid]); - }); - } -}; + An event defined for an event manager takes precedence over events of the same + name handled through methods on the view. + + + AView = Ember.View.extend({ + mouseEnter: function(event){ + // will never trigger. + }, + eventManager: Ember.Object.create({ + mouseEnter: function(event, view){ + // takes presedence over AView#mouseEnter + } + }) + }) + + Similarly a view's event manager will take precedence for events of any views + rendered as a descendent. A method name that matches an event name will not be called + if the view instance was rendered inside the HTML representation of a view that has + an `eventManager` property defined that handles events of the name. Events not handled + by the event manager will still trigger method calls on the descendent. + + OuterView = Ember.View.extend({ + eventManager: Ember.Object.create({ + template: Ember.Handlebars.compile("outer {{#view InnerView}}inner{{/view}} outer"), + mouseEnter: function(event, view){ + // view might be instance of either + // OutsideView or InnerView depending on + // where on the page the user interaction occured + } + }) + }) + + InnerView = Ember.View.extend({ + click: function(event){ + // will be called if rendered inside + // an OuterView because OuterView's + // eventManager doesn't handle click events + }, + mouseEnter: function(event){ + // will never be called if rendered inside + // an OuterView. + } + }) -})(); + ### Handlebars `{{action}}` Helper + See `Handlebars.helpers.action`. + ### Event Names + Possible events names for any of the responding approaches described above are: + Touch events: 'touchStart', 'touchMove', 'touchEnd', 'touchCancel' -(function() { -// ========================================================================== -// Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. and contributors. -// License: Licensed under MIT license (see license.js) -// ========================================================================== + Keyboard events: 'keyDown', 'keyUp', 'keyPress' -})(); + Mouse events: 'mouseDown', 'mouseUp', 'contextMenu', 'click', 'doubleClick', 'mouseMove', + 'focusIn', 'focusOut', 'mouseEnter', 'mouseLeave' + Form events: 'submit', 'change', 'focusIn', 'focusOut', 'input' + HTML5 drag and drop events: 'dragStart', 'drag', 'dragEnter', 'dragLeave', 'drop', 'dragEnd' + + ## Handlebars `{{view}}` Helper + Other `Ember.View` instances can be included as part of a view's template by using the `{{view}}` + Handlebars helper. See `Handlebars.helpers.view` for additional information. -(function() { -// ========================================================================== -// Project: Ember Metal -// Copyright: ©2011 Strobe Inc. and contributors. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -/** - @class + @extends Ember.Object +*/ +Ember.View = Ember.Object.extend(Ember.Evented, +/** @scope Ember.View.prototype */ { - Ember.ArrayController provides a way for you to publish a collection of objects - so that you can easily bind to the collection from a Handlebars #each helper, - an Ember.CollectionView, or other controllers. + /** @private */ + concatenatedProperties: ['classNames', 'classNameBindings', 'attributeBindings'], - The advantage of using an ArrayController is that you only have to set up - your view bindings once; to change what's displayed, simply swap out the - `content` property on the controller. + /** + @type Boolean + @default true + @constant + */ + isView: true, - For example, imagine you wanted to display a list of items fetched via an XHR - request. Create an Ember.ArrayController and set its `content` property: + // .......................................................... + // TEMPLATE SUPPORT + // - MyApp.listController = Ember.ArrayController.create(); + /** + The name of the template to lookup if no template is provided. - $.get('people.json', function(data) { - MyApp.listController.set('content', data); - }); + Ember.View will look for a template with this name in this view's + `templates` object. By default, this will be a global object + shared in `Ember.TEMPLATES`. - Then, create a view that binds to your new controller: + @type String + @default null + */ + templateName: null, - {{#each MyApp.listController}} - {{firstName}} {{lastName}} - {{/each}} + /** + The name of the layout to lookup if no layout is provided. - Although you are binding to the controller, the behavior of this controller - is to pass through any methods or properties to the underlying array. This - capability comes from `Ember.ArrayProxy`, which this class inherits from. + Ember.View will look for a template with this name in this view's + `templates` object. By default, this will be a global object + shared in `Ember.TEMPLATES`. - Note: As of this writing, `ArrayController` does not add any functionality - to its superclass, `ArrayProxy`. The Ember team plans to add additional - controller-specific functionality in the future, e.g. single or multiple - selection support. If you are creating something that is conceptually a - controller, use this class. + @type String + @default null + */ + layoutName: null, - @extends Ember.ArrayProxy -*/ + /** + The hash in which to look for `templateName`. -Ember.ArrayController = Ember.ArrayProxy.extend(); + @type Ember.Object + @default Ember.TEMPLATES + */ + templates: Ember.TEMPLATES, -})(); + /** + The template used to render the view. This should be a function that + accepts an optional context parameter and returns a string of HTML that + will be inserted into the DOM relative to its parent view. + In general, you should set the `templateName` property instead of setting + the template yourself. + @field + @type Function + */ + template: Ember.computed(function(key, value) { + if (value !== undefined) { return value; } -(function() { + var templateName = get(this, 'templateName'), + template = this.templateForName(templateName, 'template'); -})(); + return template || get(this, 'defaultTemplate'); + }).property('templateName').cacheable(), + /** + The controller managing this view. If this property is set, it will be + made available for use by the template. + @type Object + */ + controller: null, -(function() { -// ========================================================================== -// Project: Ember Runtime -// Copyright: ©2011 Strobe Inc. and contributors. -// License: Licensed under MIT license (see license.js) -// ========================================================================== + /** + A view may contain a layout. A layout is a regular template but + supersedes the `template` property during rendering. It is the + responsibility of the layout template to retrieve the `template` + property from the view and render it in the correct location. -})(); + This is useful for a view that has a shared wrapper, but which delegates + the rendering of the contents of the wrapper to the `template` property + on a subclass. -(function() { -// ========================================================================== -// Project: Ember - JavaScript Application Framework -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== + @field + @type Function + */ + layout: Ember.computed(function(key, value) { + if (arguments.length === 2) { return value; } -ember_assert("Ember requires jQuery 1.6 or 1.7", window.jQuery && window.jQuery().jquery.match(/^1\.[67](.\d+)?$/)); -Ember.$ = window.jQuery; + var layoutName = get(this, 'layoutName'), + layout = this.templateForName(layoutName, 'layout'); -})(); + return layout || get(this, 'defaultLayout'); + }).property('layoutName').cacheable(), + templateForName: function(name, type) { + if (!name) { return; } + var templates = get(this, 'templates'), + template = get(templates, name); -(function() { -// ========================================================================== -// Project: Ember - JavaScript Application Framework -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== + if (!template) { + throw new Ember.Error(fmt('%@ - Unable to find %@ "%@".', [this, type, name])); + } -var get = Ember.get, set = Ember.set; -var forEach = Ember.ArrayUtils.forEach; -var indexOf = Ember.ArrayUtils.indexOf; + return template; + }, -var ClassSet = function() { - this.seen = {}; - this.list = []; -}; + /** + The object from which templates should access properties. -ClassSet.prototype = { - add: function(string) { - if (string in this.seen) { return; } - this.seen[string] = true; + This object will be passed to the template function each time the render + method is called, but it is up to the individual function to decide what + to do with it. - this.list.push(string); - }, + By default, this will be the view itself. - toDOM: function() { - return this.list.join(" "); - } -}; + @type Object + */ + templateContext: Ember.computed(function(key, value) { + if (arguments.length === 2) { + set(this, '_templateContext', value); + return value; + } else { + return get(this, '_templateContext'); + } + }).cacheable(), -/** - @class + /** + @private - Ember.RenderBuffer gathers information regarding the a view and generates the - final representation. Ember.RenderBuffer will generate HTML which can be pushed - to the DOM. + Private copy of the view's template context. This can be set directly + by Handlebars without triggering the observer that causes the view + to be re-rendered. + */ + _templateContext: Ember.computed(function(key, value) { + var parentView; - @extends Ember.Object -*/ -Ember.RenderBuffer = function(tagName) { - return new Ember._RenderBuffer(tagName); -}; + if (arguments.length === 2) { + return value; + } -Ember._RenderBuffer = function(tagName) { - this.elementTag = tagName; - this.childBuffers = []; -}; + if (VIEW_PRESERVES_CONTEXT) { + parentView = get(this, '_parentView'); + if (parentView) { + return get(parentView, '_templateContext'); + } + } -Ember._RenderBuffer.prototype = -/** @scope Ember.RenderBuffer.prototype */ { + return this; + }).cacheable(), /** - Array of class-names which will be applied in the class="" attribute - - You should not maintain this array yourself, rather, you should use - the addClass() method of Ember.RenderBuffer. + If a value that affects template rendering changes, the view should be + re-rendered to reflect the new value. - @type Array - @default [] + @private */ - elementClasses: null, + _displayPropertyDidChange: Ember.observer(function() { + this.rerender(); + }, 'templateContext', 'controller'), /** - The id in of the element, to be applied in the id="" attribute - - You should not set this property yourself, rather, you should use - the id() method of Ember.RenderBuffer. + If the view is currently inserted into the DOM of a parent view, this + property will point to the parent of the view. - @type String + @type Ember.View @default null */ - elementId: null, + parentView: Ember.computed(function() { + var parent = get(this, '_parentView'); - /** - A hash keyed on the name of the attribute and whose value will be - applied to that attribute. For example, if you wanted to apply a - data-view="Foo.bar" property to an element, you would set the - elementAttributes hash to {'data-view':'Foo.bar'} + if (parent && parent.isVirtual) { + return get(parent, 'parentView'); + } else { + return parent; + } + }).property('_parentView').volatile(), - You should not maintain this hash yourself, rather, you should use - the attr() method of Ember.RenderBuffer. + _parentView: null, - @type Hash - @default {} - */ - elementAttributes: null, + // return the current view, not including virtual views + concreteView: Ember.computed(function() { + if (!this.isVirtual) { return this; } + else { return get(this, 'parentView'); } + }).property('_parentView').volatile(), /** - The tagname of the element an instance of Ember.RenderBuffer represents. - - Usually, this gets set as the first parameter to Ember.RenderBuffer. For - example, if you wanted to create a `p` tag, then you would call - - Ember.RenderBuffer('p') + If false, the view will appear hidden in DOM. - @type String + @type Boolean @default null */ - elementTag: null, + isVisible: true, /** - A hash keyed on the name of the style attribute and whose value will - be applied to that attribute. For example, if you wanted to apply a - background-color:black;" style to an element, you would set the - elementStyle hash to {'background-color':'black'} - - You should not maintain this hash yourself, rather, you should use - the style() method of Ember.RenderBuffer. + Array of child views. You should never edit this array directly. + Instead, use appendChild and removeFromParent. - @type Hash - @default {} + @private + @type Array + @default [] */ - elementStyle: null, + childViews: childViewsProperty, - /** - Nested RenderBuffers will set this to their parent RenderBuffer - instance. + _childViews: [], - @type Ember._RenderBuffer + /** + When it's a virtual view, we need to notify the parent that their + childViews will change. */ - parentBuffer: null, + _childViewsWillChange: Ember.beforeObserver(function() { + if (this.isVirtual) { + var parentView = get(this, 'parentView'); + if (parentView) { Ember.propertyWillChange(parentView, 'childViews'); } + } + }, 'childViews'), /** - Adds a string of HTML to the RenderBuffer. - - @param {String} string HTML to push into the buffer - @returns {Ember.RenderBuffer} this + When it's a virtual view, we need to notify the parent that their + childViews did change. */ - push: function(string) { - this.childBuffers.push(String(string)); - return this; - }, + _childViewsDidChange: Ember.observer(function() { + if (this.isVirtual) { + var parentView = get(this, 'parentView'); + if (parentView) { Ember.propertyDidChange(parentView, 'childViews'); } + } + }, 'childViews'), /** - Adds a class to the buffer, which will be rendered to the class attribute. + Return the nearest ancestor that is an instance of the provided + class. - @param {String} className Class name to add to the buffer - @returns {Ember.RenderBuffer} this + @param {Class} klass Subclass of Ember.View (or Ember.View itself) + @returns Ember.View */ - addClass: function(className) { - // lazily create elementClasses - var elementClasses = this.elementClasses = (this.elementClasses || new ClassSet()); - this.elementClasses.add(className); + nearestInstanceOf: function(klass) { + var view = get(this, 'parentView'); - return this; + while (view) { + if(view instanceof klass) { return view; } + view = get(view, 'parentView'); + } }, /** - Sets the elementID to be used for the element. + Return the nearest ancestor that has a given property. - @param {String} id - @returns {Ember.RenderBuffer} this + @param {String} property A property name + @returns Ember.View */ - id: function(id) { - this.elementId = id; - return this; - }, + nearestWithProperty: function(property) { + var view = get(this, 'parentView'); - // duck type attribute functionality like jQuery so a render buffer - // can be used like a jQuery object in attribute binding scenarios. + while (view) { + if (property in view) { return view; } + view = get(view, 'parentView'); + } + }, /** - Adds an attribute which will be rendered to the element. + Return the nearest ancestor whose parent is an instance of + `klass`. - @param {String} name The name of the attribute - @param {String} value The value to add to the attribute - @returns {Ember.RenderBuffer|String} this or the current attribute value + @param {Class} klass Subclass of Ember.View (or Ember.View itself) + @returns Ember.View */ - attr: function(name, value) { - var attributes = this.elementAttributes = (this.elementAttributes || {}); + nearestChildOf: function(klass) { + var view = get(this, 'parentView'); - if (arguments.length === 1) { - return attributes[name]; - } else { - attributes[name] = value; + while (view) { + if(get(view, 'parentView') instanceof klass) { return view; } + view = get(view, 'parentView'); } - - return this; }, /** - Remove an attribute from the list of attributes to render. + Return the nearest ancestor that is an Ember.CollectionView - @param {String} name The name of the attribute - @returns {Ember.RenderBuffer} this + @returns Ember.CollectionView */ - removeAttr: function(name) { - var attributes = this.elementAttributes; - if (attributes) { delete attributes[name]; } - - return this; - }, + collectionView: Ember.computed(function() { + return this.nearestInstanceOf(Ember.CollectionView); + }).cacheable(), /** - Adds a style to the style attribute which will be rendered to the element. + Return the nearest ancestor that is a direct child of + an Ember.CollectionView - @param {String} name Name of the style - @param {String} value - @returns {Ember.RenderBuffer} this + @returns Ember.View */ - style: function(name, value) { - var style = this.elementStyle = (this.elementStyle || {}); - - this.elementStyle[name] = value; - return this; - }, + itemView: Ember.computed(function() { + return this.nearestChildOf(Ember.CollectionView); + }).cacheable(), /** - Create a new child render buffer from a parent buffer. Optionally set - additional properties on the buffer. Optionally invoke a callback - with the newly created buffer. + Return the nearest ancestor that has the property + `content`. - This is a primitive method used by other public methods: `begin`, - `prepend`, `replaceWith`, `insertAfter`. + @returns Ember.View + */ + contentView: Ember.computed(function() { + return this.nearestWithProperty('content'); + }).cacheable(), + /** @private - @param {String} tagName Tag name to use for the child buffer's element - @param {Ember._RenderBuffer} parent The parent render buffer that this - buffer should be appended to. - @param {Function} fn A callback to invoke with the newly created buffer. - @param {Object} other Additional properties to add to the newly created - buffer. + + When the parent view changes, recursively invalidate + collectionView, itemView, and contentView */ - newBuffer: function(tagName, parent, fn, other) { - var buffer = new Ember._RenderBuffer(tagName); - buffer.parentBuffer = parent; + _parentViewDidChange: Ember.observer(function() { + if (this.isDestroying) { return; } - if (other) { buffer.setProperties(other); } - if (fn) { fn.call(this, buffer); } + this.invokeRecursively(function(view) { + view.propertyDidChange('collectionView'); + view.propertyDidChange('itemView'); + view.propertyDidChange('contentView'); + }); + }, '_parentView'), - return buffer; + cloneKeywords: function() { + var templateData = get(this, 'templateData'), + controller = get(this, 'controller'); + + var keywords = templateData ? Ember.copy(templateData.keywords) : {}; + keywords.view = get(this, 'concreteView'); + + // If the view has a controller specified, make it available to the + // template. If not, pass along the parent template's controller, + // if it exists. + if (controller) { + keywords.controller = controller; + } + + return keywords; }, /** - Replace the current buffer with a new buffer. This is a primitive - used by `remove`, which passes `null` for `newBuffer`, and `replaceWith`, - which passes the new buffer it created. + Called on your view when it should push strings of HTML into a + Ember.RenderBuffer. Most users will want to override the `template` + or `templateName` properties instead of this method. - @private - @param {Ember._RenderBuffer} buffer The buffer to insert in place of - the existing buffer. + By default, Ember.View will look for a function in the `template` + property and invoke it with the value of `templateContext`. The value of + `templateContext` will be the view itself unless you override it. + + @param {Ember.RenderBuffer} buffer The render buffer */ - replaceWithBuffer: function(newBuffer) { - var parent = this.parentBuffer; - if (!parent) { return; } + render: function(buffer) { + // If this view has a layout, it is the responsibility of the + // the layout to render the view's template. Otherwise, render the template + // directly. + var template = get(this, 'layout') || get(this, 'template'); - var childBuffers = parent.childBuffers; + if (template) { + var context = get(this, '_templateContext'); + var keywords = this.cloneKeywords(); + + var data = { + view: this, + buffer: buffer, + isRenderData: true, + keywords: keywords + }; - var index = indexOf(childBuffers, this); + // Invoke the template with the provided template context, which + // is the view by default. A hash of data is also passed that provides + // the template with access to the view and render buffer. - if (newBuffer) { - childBuffers.splice(index, 1, newBuffer); - } else { - childBuffers.splice(index, 1); + Ember.assert('template must be a function. Did you mean to specify templateName instead?', typeof template === 'function'); + // The template should write directly to the render buffer instead + // of returning a string. + var output = template(context, { data: data }); + + // If the template returned a string instead of writing to the buffer, + // push the string onto the buffer. + if (output !== undefined) { buffer.push(output); } } }, - /** - Creates a new Ember.RenderBuffer object with the provided tagName as - the element tag and with its parentBuffer property set to the current - Ember.RenderBuffer. + invokeForState: function(name) { + var stateName = this.state, args; - @param {String} tagName Tag name to use for the child buffer's element - @returns {Ember.RenderBuffer} A new RenderBuffer object - */ - begin: function(tagName) { - return this.newBuffer(tagName, this, function(buffer) { - this.childBuffers.push(buffer); - }); - }, + // try to find the function for the state in the cache + if (fn = invokeForState[stateName][name]) { + args = a_slice.call(arguments); + args[0] = this; - /** - Prepend a new child buffer to the current render buffer. + return fn.apply(this, args); + } - @param {String} tagName Tag name to use for the child buffer's element - */ - prepend: function(tagName) { - return this.newBuffer(tagName, this, function(buffer) { - this.childBuffers.splice(0, 0, buffer); - }); - }, + // otherwise, find and cache the function for this state + var parent = this, states = parent.states, state; - /** - Replace the current buffer with a new render buffer. + while (states) { + state = states[stateName]; - @param {String} tagName Tag name to use for the new buffer's element - */ - replaceWith: function(tagName) { - var parentBuffer = this.parentBuffer; + while (state) { + var fn = state[name]; - return this.newBuffer(tagName, parentBuffer, function(buffer) { - this.replaceWithBuffer(buffer); - }); - }, + if (fn) { + invokeForState[stateName][name] = fn; - /** - Insert a new render buffer after the current render buffer. + args = a_slice.call(arguments, 1); + args.unshift(this); - @param {String} tagName Tag name to use for the new buffer's element - */ - insertAfter: function(tagName) { - var parentBuffer = get(this, 'parentBuffer'); + return fn.apply(this, args); + } - return this.newBuffer(tagName, parentBuffer, function(buffer) { - var siblings = parentBuffer.childBuffers; - var index = indexOf(siblings, this); - siblings.splice(index + 1, 0, buffer); - }); + state = state.parentState; + } + + states = states.parent; + } }, /** - Closes the current buffer and adds its content to the parentBuffer. + Renders the view again. This will work regardless of whether the + view is already in the DOM or not. If the view is in the DOM, the + rendering process will be deferred to give bindings a chance + to synchronize. - @returns {Ember.RenderBuffer} The parentBuffer, if one exists. Otherwise, this + If children were added during the rendering process using `appendChild`, + `rerender` will remove them, because they will be added again + if needed by the next `render`. + + In general, if the display of your view changes, you should modify + the DOM element directly instead of manually calling `rerender`, which can + be slow. */ - end: function() { - var parent = this.parentBuffer; - return parent || this; + rerender: function() { + return this.invokeForState('rerender'); }, - remove: function() { - this.replaceWithBuffer(null); - }, + clearRenderedChildren: function() { + var lengthBefore = this.lengthBeforeRender, + lengthAfter = this.lengthAfterRender; - /** - @returns {DOMElement} The element corresponding to the generated HTML - of this buffer - */ - element: function() { - return Ember.$(this.string())[0]; + // If there were child views created during the last call to render(), + // remove them under the assumption that they will be re-created when + // we re-render. + + // VIEW-TODO: Unit test this path. + var childViews = get(this, '_childViews'); + for (var i=lengthAfter-1; i>=lengthBefore; i--) { + if (childViews[i]) { childViews[i].destroy(); } + } }, /** - Generates the HTML content for this buffer. + @private - @returns {String} The generated HTMl + Iterates over the view's `classNameBindings` array, inserts the value + of the specified property into the `classNames` array, then creates an + observer to update the view's element if the bound property ever changes + in the future. */ - string: function() { - var content = '', tag = this.elementTag, openTag; - - if (tag) { - var id = this.elementId, - classes = this.elementClasses, - attrs = this.elementAttributes, - style = this.elementStyle, - styleBuffer = '', prop; + _applyClassNameBindings: function() { + var classBindings = get(this, 'classNameBindings'), + classNames = get(this, 'classNames'), + elem, newClass, dasherizedClass; - openTag = ["<" + tag]; + if (!classBindings) { return; } - if (id) { openTag.push('id="' + id + '"'); } - if (classes) { openTag.push('class="' + classes.toDOM() + '"'); } + // Loop through all of the configured bindings. These will be either + // property names ('isUrgent') or property paths relative to the view + // ('content.isUrgent') + a_forEach(classBindings, function(binding) { - if (style) { - for (prop in style) { - if (style.hasOwnProperty(prop)) { - styleBuffer += (prop + ':' + style[prop] + ';'); - } - } + // Variable in which the old class value is saved. The observer function + // closes over this variable, so it knows which string to remove when + // the property changes. + var oldClass, property; - openTag.push('style="' + styleBuffer + '"'); - } + // Set up an observer on the context. If the property changes, toggle the + // class name. + var observer = function() { + // Get the current value of the property + newClass = this._classStringForProperty(binding); + elem = this.$(); - if (attrs) { - for (prop in attrs) { - if (attrs.hasOwnProperty(prop)) { - openTag.push(prop + '="' + attrs[prop] + '"'); - } + // If we had previously added a class to the element, remove it. + if (oldClass) { + elem.removeClass(oldClass); + // Also remove from classNames so that if the view gets rerendered, + // the class doesn't get added back to the DOM. + classNames.removeObject(oldClass); } - } - - openTag = openTag.join(" ") + '>'; - } - - var childBuffers = this.childBuffers; - - forEach(childBuffers, function(buffer) { - var stringy = typeof buffer === 'string'; - content += (stringy ? buffer : buffer.string()); - }); - - if (tag) { - return openTag + content + ""; - } else { - return content; - } - } -}; + // If necessary, add a new class. Make sure we keep track of it so + // it can be removed in the future. + if (newClass) { + elem.addClass(newClass); + oldClass = newClass; + } else { + oldClass = null; + } + }; -})(); + // Get the class name for the property at its current value + dasherizedClass = this._classStringForProperty(binding); + if (dasherizedClass) { + // Ensure that it gets into the classNames array + // so it is displayed when we render. + classNames.push(dasherizedClass); + // Save a reference to the class name so we can remove it + // if the observer fires. Remember that this variable has + // been closed over by the observer. + oldClass = dasherizedClass; + } -(function() { -// ========================================================================== -// Project: Ember - JavaScript Application Framework -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== + // Extract just the property name from bindings like 'foo:bar' + property = binding.split(':')[0]; + addObserver(this, property, observer); + }, this); + }, -var get = Ember.get, set = Ember.set, fmt = Ember.String.fmt; + /** + Iterates through the view's attribute bindings, sets up observers for each, + then applies the current value of the attributes to the passed render buffer. -/** - @ignore + @param {Ember.RenderBuffer} buffer + */ + _applyAttributeBindings: function(buffer) { + var attributeBindings = get(this, 'attributeBindings'), + attributeValue, elem, type; - Ember.EventDispatcher handles delegating browser events to their corresponding - Ember.Views. For example, when you click on a view, Ember.EventDispatcher ensures - that that view's `mouseDown` method gets called. -*/ -Ember.EventDispatcher = Ember.Object.extend( -/** @scope Ember.EventDispatcher.prototype */{ + if (!attributeBindings) { return; } - /** - @private + a_forEach(attributeBindings, function(binding) { + var split = binding.split(':'), + property = split[0], + attributeName = split[1] || property; - The root DOM element to which event listeners should be attached. Event - listeners will be attached to the document unless this is overridden. + // Create an observer to add/remove/change the attribute if the + // JavaScript property changes. + var observer = function() { + elem = this.$(); + attributeValue = get(this, property); - Can be specified as a DOMElement or a selector string. + Ember.View.applyAttributeBindings(elem, attributeName, attributeValue); + }; - The default body is a string since this may be evaluated before document.body - exists in the DOM. + addObserver(this, property, observer); - @type DOMElement - @default 'body' - */ - rootElement: 'body', + // Determine the current value and add it to the render buffer + // if necessary. + attributeValue = get(this, property); + Ember.View.applyAttributeBindings(buffer, attributeName, attributeValue); + }, this); + }, /** @private - Sets up event listeners for standard browser events. + Given a property name, returns a dasherized version of that + property name if the property evaluates to a non-falsy value. - This will be called after the browser sends a DOMContentReady event. By - default, it will set up all of the listeners on the document body. If you - would like to register the listeners on a different element, set the event - dispatcher's `root` property. + For example, if the view has property `isUrgent` that evaluates to true, + passing `isUrgent` to this method will return `"is-urgent"`. */ - setup: function(addedEvents) { - var event, events = { - touchstart : 'touchStart', - touchmove : 'touchMove', - touchend : 'touchEnd', - touchcancel : 'touchCancel', - keydown : 'keyDown', - keyup : 'keyUp', - keypress : 'keyPress', - mousedown : 'mouseDown', - mouseup : 'mouseUp', - contextmenu : 'contextMenu', - click : 'click', - dblclick : 'doubleClick', - mousemove : 'mouseMove', - focusin : 'focusIn', - focusout : 'focusOut', - mouseenter : 'mouseEnter', - mouseleave : 'mouseLeave', - submit : 'submit', - change : 'change', - dragstart : 'dragStart', - drag : 'drag', - dragenter : 'dragEnter', - dragleave : 'dragLeave', - dragover : 'dragOver', - drop : 'drop', - dragend : 'dragEnd' - }; + _classStringForProperty: function(property) { + var split = property.split(':'), + className = split[1]; - Ember.$.extend(events, addedEvents || {}); + property = split[0]; - var rootElement = Ember.$(get(this, 'rootElement')); + // TODO: Remove this `false` when the `getPath` globals support is removed + var val = Ember.getPath(this, property, false); + if (val === undefined && Ember.isGlobalPath(property)) { + val = Ember.getPath(window, property); + } - ember_assert(fmt('You cannot use the same root element (%@) multiple times in an Ember.Application', [rootElement.selector || rootElement[0].tagName]), !rootElement.is('.ember-application')); - ember_assert('You cannot make a new Ember.Application using a root element that is a descendent of an existing Ember.Application', !rootElement.closest('.ember-application').length); - ember_assert('You cannot make a new Ember.Application using a root element that is an ancestor of an existing Ember.Application', !rootElement.find('.ember-application').length); + // If the value is truthy and we're using the colon syntax, + // we should return the className directly + if (!!val && className) { + return className; - rootElement.addClass('ember-application'); + // If value is a Boolean and true, return the dasherized property + // name. + } else if (val === true) { + // Normalize property path to be suitable for use + // as a class name. For exaple, content.foo.barBaz + // becomes bar-baz. + var parts = property.split('.'); + return Ember.String.dasherize(parts[parts.length-1]); - ember_assert('Unable to add "ember-application" class to rootElement. Make sure you set rootElement to the body or an element in the body.', rootElement.is('.ember-application')); + // If the value is not false, undefined, or null, return the current + // value of the property. + } else if (val !== false && val !== undefined && val !== null) { + return val; - for (event in events) { - if (events.hasOwnProperty(event)) { - this.setupHandler(rootElement, event, events[event]); - } + // Nothing to display. Return null so that the old class is removed + // but no new class is added. + } else { + return null; } }, - /** - @private + // .......................................................... + // ELEMENT SUPPORT + // - Registers an event listener on the document. If the given event is - triggered, the provided event handler will be triggered on the target - view. + /** + Returns the current DOM element for the view. - If the target view does not implement the event handler, or if the handler - returns false, the parent view will be called. The event will continue to - bubble to each successive parent view until it reaches the top. + @field + @type DOMElement + */ + element: Ember.computed(function(key, value) { + if (value !== undefined) { + return this.invokeForState('setElement', value); + } else { + return this.invokeForState('getElement'); + } + }).property('_parentView').cacheable(), - For example, to have the `mouseDown` method called on the target view when - a `mousedown` event is received from the browser, do the following: + /** + Returns a jQuery object for this view's element. If you pass in a selector + string, this method will return a jQuery object, using the current element + as its buffer. - setupHandler('mousedown', 'mouseDown'); + For example, calling `view.$('li')` will return a jQuery object containing + all of the `li` elements inside the DOM element of this view. - @param {String} event the browser-originated event to listen to - @param {String} eventName the name of the method to call on the view + @param {String} [selector] a jQuery-compatible selector string + @returns {Ember.CoreQuery} the CoreQuery object for the DOM node */ - setupHandler: function(rootElement, event, eventName) { - var self = this; + $: function(sel) { + return this.invokeForState('$', sel); + }, - rootElement.delegate('.ember-view', event + '.ember', function(evt, triggeringManager) { + /** @private */ + mutateChildViews: function(callback) { + var childViews = get(this, '_childViews'), + idx = get(childViews, 'length'), + view; - var view = Ember.View.views[this.id], - result = true, manager = null; + while(--idx >= 0) { + view = childViews[idx]; + callback.call(this, view, idx); + } - manager = self._findNearestEventManager(view,eventName); + return this; + }, - if (manager && manager !== triggeringManager) { - result = self._dispatchEvent(manager, evt, eventName, view); - } else if (view) { - result = self._bubbleEvent(view,evt,eventName); - } else { - evt.stopPropagation(); - } + /** @private */ + forEachChildView: function(callback) { + var childViews = get(this, '_childViews'); - return result; - }); + if (!childViews) { return this; } - rootElement.delegate('[data-ember-action]', event + '.ember', function(evt) { - var actionId = Ember.$(evt.currentTarget).attr('data-ember-action'), - action = Ember.Handlebars.ActionHelper.registeredActions[actionId], - handler = action.handler; + var len = get(childViews, 'length'), + view, idx; - if (action.eventName === eventName) { - return handler(evt); - } - }); + for(idx = 0; idx < len; idx++) { + view = childViews[idx]; + callback.call(this, view); + } + + return this; }, - /** @private */ - _findNearestEventManager: function(view, eventName) { - var manager = null; + /** + Appends the view's element to the specified parent element. - while (view) { - manager = get(view, 'eventManager'); - if (manager && manager[eventName]) { break; } + If the view does not have an HTML representation yet, `createElement()` + will be called automatically. - view = get(view, 'parentView'); - } + Note that this method just schedules the view to be appended; the DOM + element will not be appended to the given element until all bindings have + finished synchronizing. - return manager; - }, + This is not typically a function that you will need to call directly + when building your application. You might consider using Ember.ContainerView + instead. If you do need to use appendTo, be sure that the target element you + are providing is associated with an Ember.Application and does not have an + ancestor element that is associated with an Ember view. - /** @private */ - _dispatchEvent: function(object, evt, eventName, view) { - var result = true; + @param {String|DOMElement|jQuery} A selector, element, HTML string, or jQuery object + @returns {Ember.View} receiver + */ + appendTo: function(target) { + Ember.assert("You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead.", !Ember.$(target).is('.ember-view') && !Ember.$(target).parents().is('.ember-view')); - var handler = object[eventName]; - if (Ember.typeOf(handler) === 'function') { - result = handler.call(object, evt, view); - evt.stopPropagation(); - } - else { - result = this._bubbleEvent(view, evt, eventName); - } + // Schedule the DOM element to be created and appended to the given + // element after bindings have synchronized. + this._insertElementLater(function() { + this.$().appendTo(target); + }); - return result; + return this; }, - /** @private */ - _bubbleEvent: function(view, evt, eventName) { - return Ember.run(function() { - return view.handleEvent(eventName, evt); + /** + Replaces the content of the specified parent element with this view's element. + If the view does not have an HTML representation yet, `createElement()` + will be called automatically. + + Note that this method just schedules the view to be appended; the DOM + element will not be appended to the given element until all bindings have + finished synchronizing + + @param {String|DOMElement|jQuery} A selector, element, HTML string, or jQuery object + @returns {Ember.View} received + */ + replaceIn: function(target) { + Ember.assert("You cannot replace an existing Ember.View. Consider using Ember.ContainerView instead.", !Ember.$(target).is('.ember-view') && !Ember.$(target).parents().is('.ember-view')); + + this._insertElementLater(function() { + Ember.$(target).empty(); + this.$().appendTo(target); }); - }, - /** @private */ - destroy: function() { - var rootElement = get(this, 'rootElement'); - Ember.$(rootElement).undelegate('.ember').removeClass('ember-application'); - return this._super(); - } -}); + return this; + }, -})(); + /** + @private + Schedules a DOM operation to occur during the next render phase. This + ensures that all bindings have finished synchronizing before the view is + rendered. + To use, pass a function that performs a DOM operation.. -(function() { -// ========================================================================== -// Project: Ember - JavaScript Application Framework -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -var get = Ember.get, set = Ember.set; + Before your function is called, this view and all child views will receive + the `willInsertElement` event. After your function is invoked, this view + and all of its child views will receive the `didInsertElement` event. -/** - @class + view._insertElementLater(function() { + this.createElement(); + this.$().appendTo('body'); + }); - An Ember.Application instance serves as the namespace in which you define your - application's classes. You can also override the configuration of your - application. + @param {Function} fn the function that inserts the element into the DOM + */ + _insertElementLater: function(fn) { + this._lastInsert = Ember.guidFor(fn); + Ember.run.schedule('render', this, this.invokeForState, 'insertElement', fn); + }, - By default, Ember.Application will begin listening for events on the document. - If your application is embedded inside a page, instead of controlling the - entire document, you can specify which DOM element to attach to by setting - the `rootElement` property: + /** + Appends the view's element to the document body. If the view does + not have an HTML representation yet, `createElement()` will be called + automatically. - MyApp = Ember.Application.create({ - rootElement: $('#my-app') - }); + Note that this method just schedules the view to be appended; the DOM + element will not be appended to the document body until all bindings have + finished synchronizing. - The root of an Ember.Application must not be removed during the course of the - page's lifetime. If you have only a single conceptual application for the - entire page, and are not embedding any third-party Ember applications - in your page, use the default document root for your application. + @returns {Ember.View} receiver + */ + append: function() { + return this.appendTo(document.body); + }, - You only need to specify the root if your page contains multiple instances - of Ember.Application. + /** + Removes the view's element from the element to which it is attached. - @since Ember 2.0 - @extends Ember.Object -*/ -Ember.Application = Ember.Namespace.extend( -/** @scope Ember.Application.prototype */{ + @returns {Ember.View} receiver + */ + remove: function() { + // What we should really do here is wait until the end of the run loop + // to determine if the element has been re-appended to a different + // element. + // In the interim, we will just re-render if that happens. It is more + // important than elements get garbage collected. + this.destroyElement(); + this.invokeRecursively(function(view) { + view.clearRenderedChildren(); + }); + }, /** - The root DOM element of the Application. - - Can be specified as DOMElement or a selector string. + The ID to use when trying to locate the element in the DOM. If you do not + set the elementId explicitly, then the view's GUID will be used instead. + This ID must be set at the time the view is created. - @type DOMElement - @default 'body' + @type String + @readOnly */ - rootElement: 'body', + elementId: Ember.computed(function(key, value) { + return value !== undefined ? value : Ember.guidFor(this); + }).cacheable(), /** - @type Ember.EventDispatcher - @default null + @private + + TODO: Perhaps this should be removed from the production build somehow. */ - eventDispatcher: null, + _elementIdDidChange: Ember.beforeObserver(function() { + throw "Changing a view's elementId after creation is not allowed."; + }, 'elementId'), /** - @type Object - @default null - */ - customEvents: null, + Attempts to discover the element in the parent element. The default + implementation looks for an element with an ID of elementId (or the view's + guid if elementId is null). You can override this method to provide your + own form of lookup. For example, if you want to discover your element + using a CSS class name instead of an ID. - /** @private */ - init: function() { - var eventDispatcher, - rootElement = get(this, 'rootElement'); - this._super(); + @param {DOMElement} parentElement The parent's DOM element + @returns {DOMElement} The discovered element + */ + findElementInParentElement: function(parentElem) { + var id = "#" + get(this, 'elementId'); + return Ember.$(id)[0] || Ember.$(id, parentElem)[0]; + }, - eventDispatcher = Ember.EventDispatcher.create({ - rootElement: rootElement - }); + /** + Creates a new renderBuffer with the passed tagName. You can override this + method to provide further customization to the buffer if needed. Normally + you will not need to call or override this method. - set(this, 'eventDispatcher', eventDispatcher); + @returns {Ember.RenderBuffer} + */ + renderBuffer: function(tagName) { + tagName = tagName || get(this, 'tagName'); - // jQuery 1.7 doesn't call the ready callback if already ready - if (Ember.$.isReady) { - this.didBecomeReady(); - } else { - var self = this; - Ember.$(document).ready(function() { - self.didBecomeReady(); - }); + // Explicitly check for null or undefined, as tagName + // may be an empty string, which would evaluate to false. + if (tagName === null || tagName === undefined) { + tagName = 'div'; } - }, - - /** @private */ - didBecomeReady: function() { - var eventDispatcher = get(this, 'eventDispatcher'), - customEvents = get(this, 'customEvents'); - - eventDispatcher.setup(customEvents); - this.ready(); + return Ember.RenderBuffer(tagName); }, /** - Called when the Application has become ready. - The call will be delayed until the DOM has become ready. - */ - ready: Ember.K, - - /** @private */ - destroy: function() { - get(this, 'eventDispatcher').destroy(); - return this._super(); - } -}); - - - -})(); - - - -(function() { -// ========================================================================== -// Project: Ember - JavaScript Application Framework -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== - -// Add a new named queue for rendering views that happens -// after bindings have synced. -var queues = Ember.run.queues; -queues.splice(Ember.$.inArray('actions', queues)+1, 0, 'render'); + Creates a DOM representation of the view and all of its + child views by recursively calling the `render()` method. -})(); + After the element has been created, `didInsertElement` will + be called on this view and all of its child views. + @returns {Ember.View} receiver + */ + createElement: function() { + if (get(this, 'element')) { return this; } + var buffer = this.renderToBuffer(); + set(this, 'element', buffer.element()); -(function() { -// ========================================================================== -// Project: Ember - JavaScript Application Framework -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== + return this; + }, -})(); + /** + Called when a view is going to insert an element into the DOM. + */ + willInsertElement: Ember.K, + /** + Called when the element of the view has been inserted into the DOM. + Override this function to do any set up that requires an element in the + document body. + */ + didInsertElement: Ember.K, + /** + Called when the view is about to rerender, but before anything has + been torn down. This is a good opportunity to tear down any manual + observers you have installed based on the DOM state + */ + willRerender: Ember.K, -(function() { -// ========================================================================== -// Project: Ember - JavaScript Application Framework -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -/*globals ember_assert */ -var get = Ember.get, set = Ember.set, addObserver = Ember.addObserver; -var getPath = Ember.getPath, meta = Ember.meta, fmt = Ember.String.fmt; -var a_slice = Array.prototype.slice; -var a_forEach = Ember.ArrayUtils.forEach; + /** + Run this callback on the current view and recursively on child views. -var childViewsProperty = Ember.computed(function() { - var childViews = get(this, '_childViews'); + @private + */ + invokeRecursively: function(fn) { + fn.call(this, this); - var ret = Ember.A(); + this.forEachChildView(function(view) { + view.invokeRecursively(fn); + }); + }, - a_forEach(childViews, function(view) { - if (view.isVirtual) { - ret.pushObjects(get(view, 'childViews')); - } else { - ret.push(view); - } - }); + /** + Invalidates the cache for a property on all child views. + */ + invalidateRecursively: function(key) { + this.forEachChildView(function(view) { + view.propertyDidChange(key); + }); + }, - return ret; -}).property().cacheable(); + /** + @private -/** - @static + Invokes the receiver's willInsertElement() method if it exists and then + invokes the same on all child views. - Global hash of shared templates. This will automatically be populated - by the build tools so that you can store your Handlebars templates in - separate files that get loaded into JavaScript at buildtime. + NOTE: In some cases this was called when the element existed. This no longer + works so we let people know. We can remove this warning code later. + */ + _notifyWillInsertElement: function() { + this.invokeRecursively(function(view) { + view.fire('willInsertElement'); + }); + }, - @type Hash -*/ -Ember.TEMPLATES = {}; + /** + @private -var invokeForState = { - preRender: {}, - inBuffer: {}, - hasElement: {}, - inDOM: {}, - destroyed: {} -}; + Invokes the receiver's didInsertElement() method if it exists and then + invokes the same on all child views. + */ + _notifyDidInsertElement: function() { + this.invokeRecursively(function(view) { + view.fire('didInsertElement'); + }); + }, -/** - @class - @since Ember 0.9 - @extends Ember.Object -*/ -Ember.View = Ember.Object.extend(Ember.Evented, -/** @scope Ember.View.prototype */ { + /** + @private - /** @private */ - concatenatedProperties: ['classNames', 'classNameBindings', 'attributeBindings'], + Invokes the receiver's willRerender() method if it exists and then + invokes the same on all child views. + */ + _notifyWillRerender: function() { + this.invokeRecursively(function(view) { + view.fire('willRerender'); + }); + }, /** - @type Boolean - @default true - @constant - */ - isView: true, + Destroys any existing element along with the element for any child views + as well. If the view does not currently have a element, then this method + will do nothing. - // .......................................................... - // TEMPLATE SUPPORT - // + If you implement willDestroyElement() on your view, then this method will + be invoked on your view before your element is destroyed to give you a + chance to clean up any event handlers, etc. - /** - The name of the template to lookup if no template is provided. + If you write a willDestroyElement() handler, you can assume that your + didInsertElement() handler was called earlier for the same element. - Ember.View will look for a template with this name in this view's - `templates` object. By default, this will be a global object - shared in `Ember.TEMPLATES`. + Normally you will not call or override this method yourself, but you may + want to implement the above callbacks when it is run. - @type String - @default null + @returns {Ember.View} receiver */ - templateName: null, + destroyElement: function() { + return this.invokeForState('destroyElement'); + }, /** - The name of the layout to lookup if no layout is provided. - - Ember.View will look for a template with this name in this view's - `templates` object. By default, this will be a global object - shared in `Ember.TEMPLATES`. - - @type String - @default null + Called when the element of the view is going to be destroyed. Override + this function to do any teardown that requires an element, like removing + event listeners. */ - layoutName: null, + willDestroyElement: function() {}, /** - The hash in which to look for `templateName`. + @private - @type Ember.Object - @default Ember.TEMPLATES + Invokes the `willDestroyElement` callback on the view and child views. */ - templates: Ember.TEMPLATES, + _notifyWillDestroyElement: function() { + this.invokeRecursively(function(view) { + view.fire('willDestroyElement'); + }); + }, + + /** @private (nodoc) */ + _elementWillChange: Ember.beforeObserver(function() { + this.forEachChildView(function(view) { + Ember.propertyWillChange(view, 'element'); + }); + }, 'element'), /** - The template used to render the view. This should be a function that - accepts an optional context parameter and returns a string of HTML that - will be inserted into the DOM relative to its parent view. + @private - In general, you should set the `templateName` property instead of setting - the template yourself. + If this view's element changes, we need to invalidate the caches of our + child views so that we do not retain references to DOM elements that are + no longer needed. - @field - @type Function + @observes element */ - template: Ember.computed(function(key, value) { - if (value !== undefined) { return value; } + _elementDidChange: Ember.observer(function() { + this.forEachChildView(function(view) { + Ember.propertyDidChange(view, 'element'); + }); + }, 'element'), - var templateName = get(this, 'templateName'), - template = this.templateForName(templateName, 'template'); + /** + Called when the parentView property has changed. - return template || get(this, 'defaultTemplate'); - }).property('templateName').cacheable(), + @function + */ + parentViewDidChange: Ember.K, /** - A view may contain a layout. A layout is a regular template but - supercedes the `template` property during rendering. It is the - responsibility of the layout template to retrieve the `template` - property from the view and render it in the correct location. + @private - This is useful for a view that has a shared wrapper, but which delegates - the rendering of the contents of the wrapper to the `template` property - on a subclass. + Invoked by the view system when this view needs to produce an HTML + representation. This method will create a new render buffer, if needed, + then apply any default attributes, such as class names and visibility. + Finally, the `render()` method is invoked, which is responsible for + doing the bulk of the rendering. - @field - @type Function - */ - layout: Ember.computed(function(key, value) { - if (arguments.length === 2) { return value; } + You should not need to override this method; instead, implement the + `template` property, or if you need more control, override the `render` + method. - var layoutName = get(this, 'layoutName'), - layout = this.templateForName(layoutName, 'layout'); + @param {Ember.RenderBuffer} buffer the render buffer. If no buffer is + passed, a default buffer, using the current view's `tagName`, will + be used. + */ + renderToBuffer: function(parentBuffer, bufferOperation) { + var buffer; - return layout || get(this, 'defaultLayout'); - }).property('layoutName').cacheable(), + Ember.run.sync(); - templateForName: function(name, type) { - if (!name) { return; } + // Determine where in the parent buffer to start the new buffer. + // By default, a new buffer will be appended to the parent buffer. + // The buffer operation may be changed if the child views array is + // mutated by Ember.ContainerView. + bufferOperation = bufferOperation || 'begin'; - var templates = get(this, 'templates'), - template = get(templates, name); + // If this is the top-most view, start a new buffer. Otherwise, + // create a new buffer relative to the original using the + // provided buffer operation (for example, `insertAfter` will + // insert a new buffer after the "parent buffer"). + if (parentBuffer) { + var tagName = get(this, 'tagName'); + if (tagName === null || tagName === undefined) { + tagName = 'div'; + } - if (!template) { - throw new Ember.Error(fmt('%@ - Unable to find %@ "%@".', [this, type, name])); + buffer = parentBuffer[bufferOperation](tagName); + } else { + buffer = this.renderBuffer(); } - return template; - }, + this.buffer = buffer; + this.transitionTo('inBuffer', false); - /** - The object from which templates should access properties. + this.lengthBeforeRender = get(get(this, '_childViews'), 'length'); - This object will be passed to the template function each time the render - method is called, but it is up to the individual function to decide what - to do with it. + this.beforeRender(buffer); + this.render(buffer); + this.afterRender(buffer); - By default, this will be the view itself. + this.lengthAfterRender = get(get(this, '_childViews'), 'length'); - @type Object - */ - templateContext: Ember.computed(function(key, value) { - if (arguments.length === 2) { - set(this, '_templateContext', value); - return value; - } else { - return get(this, '_templateContext'); - } - }).cacheable(), + return buffer; + }, - /** - @private + beforeRender: function(buffer) { + this.applyAttributesToBuffer(buffer); + }, - Private copy of the view's template context. This can be set directly - by Handlebars without triggering the observer that causes the view - to be re-rendered. - */ - _templateContext: Ember.computed(function(key, value) { - if (arguments.length === 2) { - return value; - } else { - return this; - } - }).cacheable(), + afterRender: Ember.K, /** - If the template context changes, the view should be re-rendered to display - the new value. - @private */ - templateContextDidChange: Ember.observer(function() { - this.rerender(); - }, 'templateContext'), + applyAttributesToBuffer: function(buffer) { + // Creates observers for all registered class name and attribute bindings, + // then adds them to the element. + this._applyClassNameBindings(); - /** - If the view is currently inserted into the DOM of a parent view, this - property will point to the parent of the view. + // Pass the render buffer so the method can apply attributes directly. + // This isn't needed for class name bindings because they use the + // existing classNames infrastructure. + this._applyAttributeBindings(buffer); - @type Ember.View - @default null - */ - _parentView: null, - parentView: Ember.computed(function() { - var parent = get(this, '_parentView'); + a_forEach(get(this, 'classNames'), function(name){ buffer.addClass(name); }); + buffer.id(get(this, 'elementId')); - if (parent && parent.isVirtual) { - return get(parent, 'parentView'); - } else { - return parent; + var role = get(this, 'ariaRole'); + if (role) { + buffer.attr('role', role); } - }).property('_parentView'), - // return the current view, not including virtual views - concreteView: Ember.computed(function() { - if (!this.isVirtual) { return this; } - else { return get(this, 'parentView'); } - }).property('_parentView'), + if (get(this, 'isVisible') === false) { + buffer.style('display', 'none'); + } + }, + + // .......................................................... + // STANDARD RENDER PROPERTIES + // /** - If false, the view will appear hidden in DOM. + Tag name for the view's outer element. The tag name is only used when + an element is first created. If you change the tagName for an element, you + must destroy and recreate the view element. - @type Boolean + By default, the render buffer will use a `
` tag for views. + + @type String @default null */ - isVisible: true, + + // We leave this null by default so we can tell the difference between + // the default case and a user-specified tag. + tagName: null, /** - Array of child views. You should never edit this array directly. - Instead, use appendChild and removeFromParent. + The WAI-ARIA role of the control represented by this view. For example, a + button may have a role of type 'button', or a pane may have a role of + type 'alertdialog'. This property is used by assistive software to help + visually challenged users navigate rich web applications. - @private - @type Array - @default [] - */ - childViews: childViewsProperty, + The full list of valid WAI-ARIA roles is available at: + http://www.w3.org/TR/wai-aria/roles#roles_categorization - _childViews: [], + @type String + @default null + */ + ariaRole: null, /** - Return the nearest ancestor that is an instance of the provided - class. - - @param {Class} klass Subclass of Ember.View (or Ember.View itself) - @returns Ember.View - */ - nearestInstanceOf: function(klass) { - var view = get(this, 'parentView'); + Standard CSS class names to apply to the view's outer element. This + property automatically inherits any class names defined by the view's + superclasses as well. - while (view) { - if(view instanceof klass) { return view; } - view = get(view, 'parentView'); - } - }, + @type Array + @default ['ember-view'] + */ + classNames: ['ember-view'], /** - Return the nearest ancestor that has a given property. + A list of properties of the view to apply as class names. If the property + is a string value, the value of that string will be applied as a class + name. - @param {String} property A property name - @returns Ember.View - */ - nearestWithProperty: function(property) { - var view = get(this, 'parentView'); + // Applies the 'high' class to the view element + Ember.View.create({ + classNameBindings: ['priority'] + priority: 'high' + }); - while (view) { - if (property in view) { return view; } - view = get(view, 'parentView'); - } - }, + If the value of the property is a Boolean, the name of that property is + added as a dasherized class name. - /** - Return the nearest ancestor that is a direct child of a - view of. + // Applies the 'is-urgent' class to the view element + Ember.View.create({ + classNameBindings: ['isUrgent'] + isUrgent: true + }); - @param {Class} klass Subclass of Ember.View (or Ember.View itself) - @returns Ember.View - */ - nearestChildOf: function(klass) { - var view = get(this, 'parentView'); + If you would prefer to use a custom value instead of the dasherized + property name, you can pass a binding like this: - while (view) { - if(get(view, 'parentView') instanceof klass) { return view; } - view = get(view, 'parentView'); - } - }, + // Applies the 'urgent' class to the view element + Ember.View.create({ + classNameBindings: ['isUrgent:urgent'] + isUrgent: true + }); - /** - Return the nearest ancestor that is an Ember.CollectionView + This list of properties is inherited from the view's superclasses as well. - @returns Ember.CollectionView + @type Array + @default [] */ - collectionView: Ember.computed(function() { - return this.nearestInstanceOf(Ember.CollectionView); - }).cacheable(), + classNameBindings: [], /** - Return the nearest ancestor that is a direct child of - an Ember.CollectionView + A list of properties of the view to apply as attributes. If the property is + a string value, the value of that string will be applied as the attribute. - @returns Ember.View - */ - itemView: Ember.computed(function() { - return this.nearestChildOf(Ember.CollectionView); - }).cacheable(), + // Applies the type attribute to the element + // with the value "button", like
+ Ember.View.create({ + attributeBindings: ['type'], + type: 'button' + }); - /** - Return the nearest ancestor that has the property - `content`. + If the value of the property is a Boolean, the name of that property is + added as an attribute. - @returns Ember.View + // Renders something like
+ Ember.View.create({ + attributeBindings: ['enabled'], + enabled: true + }); */ - contentView: Ember.computed(function() { - return this.nearestWithProperty('content'); - }).cacheable(), + attributeBindings: [], + + state: 'preRender', + + // ....................................................... + // CORE DISPLAY METHODS + // /** @private - When the parent view changes, recursively invalidate - collectionView, itemView, and contentView + Setup a view, but do not finish waking it up. + - configure childViews + - register the view with the global views hash, which is used for event + dispatch */ - _parentViewDidChange: Ember.observer(function() { - if (this.isDestroying) { return; } + init: function() { + this._super(); - this.invokeRecursively(function(view) { - view.propertyDidChange('collectionView'); - view.propertyDidChange('itemView'); - view.propertyDidChange('contentView'); - }); - }, '_parentView'), + // Register the view for event handling. This hash is used by + // Ember.RootResponder to dispatch incoming events. + Ember.View.views[get(this, 'elementId')] = this; - /** - Called on your view when it should push strings of HTML into a - Ember.RenderBuffer. Most users will want to override the `template` - or `templateName` properties instead of this method. + var childViews = get(this, '_childViews').slice(); - By default, Ember.View will look for a function in the `template` - property and invoke it with the value of `templateContext`. The value of - `templateContext` will be the view itself unless you override it. + // setup child views. be sure to clone the child views array first + set(this, '_childViews', childViews); - @param {Ember.RenderBuffer} buffer The render buffer - */ - render: function(buffer) { - // If this view has a layout, it is the responsibility of the - // the layout to render the view's template. Otherwise, render the template - // directly. - var template = get(this, 'layout') || get(this, 'template'); + Ember.assert("Only arrays are allowed for 'classNameBindings'", Ember.typeOf(this.classNameBindings) === 'array'); + this.classNameBindings = Ember.A(this.classNameBindings.slice()); - if (template) { - var context = get(this, '_templateContext'), - templateData = this.get('templateData'), - controller = this.get('controller'), - data = { view: this, buffer: buffer, isRenderData: true }; + Ember.assert("Only arrays are allowed for 'classNames'", Ember.typeOf(this.classNames) === 'array'); + this.classNames = Ember.A(this.classNames.slice()); - // If the view has a controller specified, make it available to the - // template. If not, pass along the parent template's controller, - // if it exists. - data.controller = controller || (templateData && templateData.controller); + var viewController = get(this, 'viewController'); + if (viewController) { + viewController = Ember.getPath(viewController); + if (viewController) { + set(viewController, 'view', this); + } + } + }, - // Invoke the template with the provided template context, which - // is the view by default. A hash of data is also passed that provides - // the template with access to the view and render buffer. + appendChild: function(view, options) { + return this.invokeForState('appendChild', view, options); + }, - // The template should write directly to the render buffer instead - // of returning a string. - var output = template(context, { data: data }); + /** + Removes the child view from the parent view. - // If the template returned a string instead of writing to the buffer, - // push the string onto the buffer. - if (output !== undefined) { buffer.push(output); } - } - }, + @param {Ember.View} view + @returns {Ember.View} receiver + */ + removeChild: function(view) { + // If we're destroying, the entire subtree will be + // freed, and the DOM will be handled separately, + // so no need to mess with childViews. + if (this.isDestroying) { return; } - invokeForState: function(name) { - var stateName = this.state, args; + // update parent node + set(view, '_parentView', null); - // try to find the function for the state in the cache - if (fn = invokeForState[stateName][name]) { - args = a_slice.call(arguments); - args[0] = this; + // remove view from childViews array. + var childViews = get(this, '_childViews'); + Ember.ArrayUtils.removeObject(childViews, view); - return fn.apply(this, args); - } + this.propertyDidChange('childViews'); - // otherwise, find and cache the function for this state - var parent = this, states = parent.states, state; + return this; + }, - while (states) { - state = states[stateName]; + /** + Removes all children from the parentView. - while (state) { - var fn = state[name]; + @returns {Ember.View} receiver + */ + removeAllChildren: function() { + return this.mutateChildViews(function(view) { + this.removeChild(view); + }); + }, - if (fn) { - invokeForState[stateName][name] = fn; + destroyAllChildren: function() { + return this.mutateChildViews(function(view) { + view.destroy(); + }); + }, - args = a_slice.call(arguments, 1); - args.unshift(this); + /** + Removes the view from its parentView, if one is found. Otherwise + does nothing. - return fn.apply(this, args); - } + @returns {Ember.View} receiver + */ + removeFromParent: function() { + var parent = get(this, '_parentView'); - state = state.parentState; - } + // Remove DOM element from parent + this.remove(); - states = states.parent; - } + if (parent) { parent.removeChild(this); } + return this; }, /** - Renders the view again. This will work regardless of whether the - view is already in the DOM or not. If the view is in the DOM, the - rendering process will be deferred to give bindings a chance - to synchronize. + You must call `destroy` on a view to destroy the view (and all of its + child views). This will remove the view from any parent node, then make + sure that the DOM element managed by the view can be released by the + memory manager. + */ + willDestroy: function() { + // calling this._super() will nuke computed properties and observers, + // so collect any information we need before calling super. + var childViews = get(this, '_childViews'), + parent = get(this, '_parentView'), + elementId = get(this, 'elementId'), + childLen; - If children were added during the rendering process using `appendChild`, - `rerender` will remove them, because they will be added again - if needed by the next `render`. + // destroy the element -- this will avoid each child view destroying + // the element over and over again... + if (!this.removedFromDOM) { this.destroyElement(); } - In general, if the display of your view changes, you should modify - the DOM element directly instead of manually calling `rerender`, which can - be slow. - */ - rerender: function() { - return this.invokeForState('rerender'); - }, + // remove from non-virtual parent view if viewName was specified + if (this.viewName) { + var nonVirtualParentView = get(this, 'parentView'); + if (nonVirtualParentView) { + set(nonVirtualParentView, this.viewName, null); + } + } - clearRenderedChildren: function() { - var lengthBefore = this.lengthBeforeRender, - lengthAfter = this.lengthAfterRender; + // remove from parent if found. Don't call removeFromParent, + // as removeFromParent will try to remove the element from + // the DOM again. + if (parent) { parent.removeChild(this); } - // If there were child views created during the last call to render(), - // remove them under the assumption that they will be re-created when - // we re-render. + this.state = 'destroyed'; - // VIEW-TODO: Unit test this path. - var childViews = get(this, '_childViews'); - for (var i=lengthAfter-1; i>=lengthBefore; i--) { - if (childViews[i]) { childViews[i].destroy(); } + childLen = get(childViews, 'length'); + for (var i=childLen-1; i>=0; i--) { + childViews[i].removedFromDOM = true; + childViews[i].destroy(); } + + // next remove view from global hash + delete Ember.View.views[get(this, 'elementId')]; }, /** - @private + Instantiates a view to be added to the childViews array during view + initialization. You generally will not call this method directly unless + you are overriding createChildViews(). Note that this method will + automatically configure the correct settings on the new view instance to + act as a child of the parent. - Iterates over the view's `classNameBindings` array, inserts the value - of the specified property into the `classNames` array, then creates an - observer to update the view's element if the bound property ever changes - in the future. + @param {Class} viewClass + @param {Hash} [attrs] Attributes to add + @returns {Ember.View} new instance + @test in createChildViews */ - _applyClassNameBindings: function() { - var classBindings = get(this, 'classNameBindings'), - classNames = get(this, 'classNames'), - elem, newClass, dasherizedClass; - - if (!classBindings) { return; } - - // Loop through all of the configured bindings. These will be either - // property names ('isUrgent') or property paths relative to the view - // ('content.isUrgent') - a_forEach(classBindings, function(binding) { - - // Variable in which the old class value is saved. The observer function - // closes over this variable, so it knows which string to remove when - // the property changes. - var oldClass, property; - - // Set up an observer on the context. If the property changes, toggle the - // class name. - var observer = function() { - // Get the current value of the property - newClass = this._classStringForProperty(binding); - elem = this.$(); + createChildView: function(view, attrs) { + var coreAttrs, templateData; - // If we had previously added a class to the element, remove it. - if (oldClass) { - elem.removeClass(oldClass); - // Also remove from classNames so that if the view gets rerendered, - // the class doesn't get added back to the DOM. - classNames.removeObject(oldClass); - } + if (Ember.View.detect(view)) { + coreAttrs = { _parentView: this, templateData: get(this, 'templateData') }; - // If necessary, add a new class. Make sure we keep track of it so - // it can be removed in the future. - if (newClass) { - elem.addClass(newClass); - oldClass = newClass; - } else { - oldClass = null; - } - }; + if (attrs) { + view = view.create(coreAttrs, attrs); + } else { + view = view.create(coreAttrs); + } - // Get the class name for the property at its current value - dasherizedClass = this._classStringForProperty(binding); + var viewName = view.viewName; - if (dasherizedClass) { - // Ensure that it gets into the classNames array - // so it is displayed when we render. - classNames.push(dasherizedClass); + // don't set the property on a virtual view, as they are invisible to + // consumers of the view API + if (viewName) { set(get(this, 'concreteView'), viewName, view); } + } else { + Ember.assert('You must pass instance or subclass of View', view instanceof Ember.View); + Ember.assert("You can only pass attributes when a class is provided", !attrs); - // Save a reference to the class name so we can remove it - // if the observer fires. Remember that this variable has - // been closed over by the observer. - oldClass = dasherizedClass; + if (!get(view, 'templateData')) { + set(view, 'templateData', get(this, 'templateData')); } - // Extract just the property name from bindings like 'foo:bar' - property = binding.split(':')[0]; - addObserver(this, property, observer); - }, this); + set(view, '_parentView', this); + } + + return view; }, + becameVisible: Ember.K, + becameHidden: Ember.K, + /** - Iterates through the view's attribute bindings, sets up observers for each, - then applies the current value of the attributes to the passed render buffer. + @private - @param {Ember.RenderBuffer} buffer + When the view's `isVisible` property changes, toggle the visibility + element of the actual DOM element. */ - _applyAttributeBindings: function(buffer) { - var attributeBindings = get(this, 'attributeBindings'), - attributeValue, elem, type; + _isVisibleDidChange: Ember.observer(function() { + var isVisible = get(this, 'isVisible'); - if (!attributeBindings) { return; } + this.$().toggle(isVisible); - a_forEach(attributeBindings, function(binding) { - var split = binding.split(':'), - property = split[0], - attributeName = split[1] || property; + if (this._isAncestorHidden()) { return; } - // Create an observer to add/remove/change the attribute if the - // JavaScript property changes. - var observer = function() { - elem = this.$(); - attributeValue = get(this, property); + if (isVisible) { + this._notifyBecameVisible(); + } else { + this._notifyBecameHidden(); + } + }, 'isVisible'), - Ember.View.applyAttributeBindings(elem, attributeName, attributeValue); - }; + _notifyBecameVisible: function() { + this.fire('becameVisible'); - addObserver(this, property, observer); + this.forEachChildView(function(view) { + var isVisible = get(view, 'isVisible'); - // Determine the current value and add it to the render buffer - // if necessary. - attributeValue = get(this, property); - Ember.View.applyAttributeBindings(buffer, attributeName, attributeValue); - }, this); + if (isVisible || isVisible === null) { + view._notifyBecameVisible(); + } + }); }, - /** - @private + _notifyBecameHidden: function() { + this.fire('becameHidden'); + this.forEachChildView(function(view) { + var isVisible = get(view, 'isVisible'); - Given a property name, returns a dasherized version of that - property name if the property evaluates to a non-falsy value. + if (isVisible || isVisible === null) { + view._notifyBecameHidden(); + } + }); + }, - For example, if the view has property `isUrgent` that evaluates to true, - passing `isUrgent` to this method will return `"is-urgent"`. - */ - _classStringForProperty: function(property) { - var split = property.split(':'), - className = split[1]; + _isAncestorHidden: function() { + var parent = get(this, 'parentView'); - property = split[0]; + while (parent) { + if (get(parent, 'isVisible') === false) { return true; } - // TODO: Remove this `false` when the `getPath` globals support is removed - var val = Ember.getPath(this, property, false); - if (val === undefined && Ember.isGlobalPath(property)) { - val = Ember.getPath(window, property); + parent = get(parent, 'parentView'); } - // If value is a Boolean and true, return the dasherized property - // name. - if (val === true) { - if (className) { return className; } - - // Normalize property path to be suitable for use - // as a class name. For exaple, content.foo.barBaz - // becomes bar-baz. - var parts = property.split('.'); - return Ember.String.dasherize(parts[parts.length-1]); - - // If the value is not false, undefined, or null, return the current - // value of the property. - } else if (val !== false && val !== undefined && val !== null) { - return val; - - // Nothing to display. Return null so that the old class is removed - // but no new class is added. - } else { - return null; - } + return false; }, - // .......................................................... - // ELEMENT SUPPORT - // + clearBuffer: function() { + this.invokeRecursively(function(view) { + this.buffer = null; + }); + }, - /** - Returns the current DOM element for the view. + transitionTo: function(state, children) { + this.state = state; - @field - @type DOMElement - */ - element: Ember.computed(function(key, value) { - if (value !== undefined) { - return this.invokeForState('setElement', value); - } else { - return this.invokeForState('getElement'); + if (children !== false) { + this.forEachChildView(function(view) { + view.transitionTo(state); + }); } - }).property('_parentView').cacheable(), + }, /** - Returns a jQuery object for this view's element. If you pass in a selector - string, this method will return a jQuery object, using the current element - as its buffer. - - For example, calling `view.$('li')` will return a jQuery object containing - all of the `li` elements inside the DOM element of this view. + @private - @param {String} [selector] a jQuery-compatible selector string - @returns {Ember.CoreQuery} the CoreQuery object for the DOM node + Override the default event firing from Ember.Evented to + also call methods with the given name. */ - $: function(sel) { - return this.invokeForState('$', sel); - }, - - /** @private */ - mutateChildViews: function(callback) { - var childViews = get(this, '_childViews'), - idx = get(childViews, 'length'), - view; - - while(--idx >= 0) { - view = childViews[idx]; - callback.call(this, view, idx); + fire: function(name) { + if (this[name]) { + this[name].apply(this, [].slice.call(arguments, 1)); } - - return this; + this._super.apply(this, arguments); }, - /** @private */ - forEachChildView: function(callback) { - var childViews = get(this, '_childViews'); + // ....................................................... + // EVENT HANDLING + // - if (!childViews) { return this; } + /** + @private - var len = get(childViews, 'length'), - view, idx; + Handle events from `Ember.EventDispatcher` + */ + handleEvent: function(eventName, evt) { + return this.invokeForState('handleEvent', eventName, evt); + } - for(idx = 0; idx < len; idx++) { - view = childViews[idx]; - callback.call(this, view); - } +}); - return this; - }, +/** + Describe how the specified actions should behave in the various + states that a view can exist in. Possible states: - /** - Appends the view's element to the specified parent element. + * preRender: when a view is first instantiated, and after its + element was destroyed, it is in the preRender state + * inBuffer: once a view has been rendered, but before it has + been inserted into the DOM, it is in the inBuffer state + * inDOM: once a view has been inserted into the DOM it is in + the inDOM state. A view spends the vast majority of its + existence in this state. + * destroyed: once a view has been destroyed (using the destroy + method), it is in this state. No further actions can be invoked + on a destroyed view. +*/ - If the view does not have an HTML representation yet, `createElement()` - will be called automatically. + // in the destroyed state, everything is illegal - Note that this method just schedules the view to be appended; the DOM - element will not be appended to the given element until all bindings have - finished synchronizing. + // before rendering has begun, all legal manipulations are noops. - @param {String|DOMElement|jQuery} A selector, element, HTML string, or jQuery object - @returns {Ember.View} receiver - */ - appendTo: function(target) { - // Schedule the DOM element to be created and appended to the given - // element after bindings have synchronized. - this._insertElementLater(function() { - this.$().appendTo(target); + // inside the buffer, legal manipulations are done on the buffer + + // once the view has been inserted into the DOM, legal manipulations + // are done on the DOM element. + +/** @private */ +var DOMManager = { + prepend: function(view, childView) { + childView._insertElementLater(function() { + var element = view.$(); + element.prepend(childView.$()); }); + }, - return this; + after: function(view, nextView) { + nextView._insertElementLater(function() { + var element = view.$(); + element.after(nextView.$()); + }); }, - /** - Replaces the view's element to the specified parent element. - If the view does not have an HTML representation yet, `createElement()` - will be called automatically. - If the parent element already has some content, it will be removed. + replace: function(view) { + var element = get(view, 'element'); - Note that this method just schedules the view to be appended; the DOM - element will not be appended to the given element until all bindings have - finished synchronizing + set(view, 'element', null); - @param {String|DOMElement|jQuery} A selector, element, HTML string, or jQuery object - @returns {Ember.View} received - */ - replaceIn: function(target) { - this._insertElementLater(function() { - Ember.$(target).empty(); - this.$().appendTo(target); + view._insertElementLater(function() { + Ember.$(element).replaceWith(get(view, 'element')); }); - - return this; }, - /** - @private - - Schedules a DOM operation to occur during the next render phase. This - ensures that all bindings have finished synchronizing before the view is - rendered. + remove: function(view) { + var elem = get(view, 'element'); - To use, pass a function that performs a DOM operation.. + set(view, 'element', null); + view._lastInsert = null; - Before your function is called, this view and all child views will receive - the `willInsertElement` event. After your function is invoked, this view - and all of its child views will receive the `didInsertElement` event. + Ember.$(elem).remove(); + }, - view._insertElementLater(function() { - this.createElement(); - this.$().appendTo('body'); - }); + empty: function(view) { + view.$().empty(); + } +}; - @param {Function} fn the function that inserts the element into the DOM - */ - _insertElementLater: function(fn) { - Ember.run.schedule('render', this, this.invokeForState, 'insertElement', fn); - }, +Ember.View.reopen({ + states: Ember.View.states, + domManager: DOMManager +}); - /** - Appends the view's element to the document body. If the view does - not have an HTML representation yet, `createElement()` will be called - automatically. +// Create a global view hash. +Ember.View.views = {}; - Note that this method just schedules the view to be appended; the DOM - element will not be appended to the document body until all bindings have - finished synchronizing. +// If someone overrides the child views computed property when +// defining their class, we want to be able to process the user's +// supplied childViews and then restore the original computed property +// at view initialization time. This happens in Ember.ContainerView's init +// method. +Ember.View.childViewsProperty = childViewsProperty; - @returns {Ember.View} receiver - */ - append: function() { - return this.appendTo(document.body); - }, +Ember.View.applyAttributeBindings = function(elem, name, value) { + var type = Ember.typeOf(value); + var currentValue = elem.attr(name); - /** - Removes the view's element from the element to which it is attached. + // if this changes, also change the logic in ember-handlebars/lib/helpers/binding.js + if ((type === 'string' || (type === 'number' && !isNaN(value))) && value !== currentValue) { + elem.attr(name, value); + } else if (value && type === 'boolean') { + elem.attr(name, name); + } else if (!value) { + elem.removeAttr(name); + } +}; - @returns {Ember.View} receiver - */ - remove: function() { - // What we should really do here is wait until the end of the run loop - // to determine if the element has been re-appended to a different - // element. - // In the interim, we will just re-render if that happens. It is more - // important than elements get garbage collected. - this.destroyElement(); - this.invokeRecursively(function(view) { - view.clearRenderedChildren(); - }); - }, +})(); - /** - The ID to use when trying to locate the element in the DOM. If you do not - set the elementId explicitly, then the view's GUID will be used instead. - This ID must be set at the time the view is created. - @type String - @readOnly - */ - elementId: Ember.computed(function(key, value) { - return value !== undefined ? value : Ember.guidFor(this); - }).cacheable(), - /** @private */ - _elementIdDidChange: Ember.beforeObserver(function() { - throw "Changing a view's elementId after creation is not allowed."; - }, 'elementId'), +(function() { +// ========================================================================== +// Project: Ember - JavaScript Application Framework +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2011 Apple Inc. All rights reserved. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +var get = Ember.get, set = Ember.set; - /** - Attempts to discover the element in the parent element. The default - implementation looks for an element with an ID of elementId (or the view's - guid if elementId is null). You can override this method to provide your - own form of lookup. For example, if you want to discover your element - using a CSS class name instead of an ID. +Ember.View.states = { + _default: { + // appendChild is only legal while rendering the buffer. + appendChild: function() { + throw "You can't use appendChild outside of the rendering process"; + }, - @param {DOMElement} parentElement The parent's DOM element - @returns {DOMElement} The discovered element - */ - findElementInParentElement: function(parentElem) { - var id = "#" + get(this, 'elementId'); - return Ember.$(id)[0] || Ember.$(id, parentElem)[0]; - }, + $: function() { + return Ember.$(); + }, - /** - Creates a new renderBuffer with the passed tagName. You can override this - method to provide further customization to the buffer if needed. Normally - you will not need to call or override this method. + getElement: function() { + return null; + }, - @returns {Ember.RenderBuffer} - */ - renderBuffer: function(tagName) { - tagName = tagName || get(this, 'tagName'); + // Handle events from `Ember.EventDispatcher` + handleEvent: function() { + return true; // continue event propagation + }, - // Explicitly check for null or undefined, as tagName - // may be an empty string, which would evaluate to false. - if (tagName === null || tagName === undefined) { - tagName = 'div'; + destroyElement: function(view) { + set(view, 'element', null); + view._lastInsert = null; + return view; } + } +}; - return Ember.RenderBuffer(tagName); - }, +Ember.View.reopen({ + states: Ember.View.states +}); - /** - Creates a DOM representation of the view and all of its - child views by recursively calling the `render()` method. +})(); - After the element has been created, `didInsertElement` will - be called on this view and all of its child views. - @returns {Ember.View} receiver - */ - createElement: function() { - if (get(this, 'element')) { return this; } - var buffer = this.renderToBuffer(); - set(this, 'element', buffer.element()); +(function() { +// ========================================================================== +// Project: Ember - JavaScript Application Framework +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2011 Apple Inc. All rights reserved. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +Ember.View.states.preRender = { + parentState: Ember.View.states._default, - return this; + // a view leaves the preRender state once its element has been + // created (createElement). + insertElement: function(view, fn) { + if (view._lastInsert !== Ember.guidFor(fn)){ + return; + } + view.createElement(); + view._notifyWillInsertElement(); + // after createElement, the view will be in the hasElement state. + fn.call(view); + view.transitionTo('inDOM'); + view._notifyDidInsertElement(); }, - /** - Called when a view is going to insert an element into the DOM. - */ - willInsertElement: Ember.K, - - /** - Called when the element of the view has been inserted into the DOM. - Override this function to do any set up that requires an element in the - document body. - */ - didInsertElement: Ember.K, + empty: Ember.K, - /** - Called when the view is about to rerender, but before anything has - been torn down. This is a good opportunity to tear down any manual - observers you have installed based on the DOM state - */ - willRerender: Ember.K, + setElement: function(view, value) { + view.beginPropertyChanges(); + view.invalidateRecursively('element'); - /** - Run this callback on the current view and recursively on child views. + if (value !== null) { + view.transitionTo('hasElement'); + } - @private - */ - invokeRecursively: function(fn) { - fn.call(this, this); + view.endPropertyChanges(); - this.forEachChildView(function(view) { - view.invokeRecursively(fn); - }); - }, + return value; + } +}; - /** - Invalidates the cache for a property on all child views. - */ - invalidateRecursively: function(key) { - this.forEachChildView(function(view) { - view.propertyDidChange(key); - }); - }, +})(); - /** - @private - Invokes the receiver's willInsertElement() method if it exists and then - invokes the same on all child views. - NOTE: In some cases this was called when the element existed. This no longer - works so we let people know. We can remove this warning code later. - */ - _notifyWillInsertElement: function(fromPreRender) { - this.invokeRecursively(function(view) { - if (fromPreRender) { view._willInsertElementAccessUnsupported = true; } - view.fire('willInsertElement'); - view._willInsertElementAccessUnsupported = false; - }); - }, +(function() { +// ========================================================================== +// Project: Ember - JavaScript Application Framework +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2011 Apple Inc. All rights reserved. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +var get = Ember.get, set = Ember.set, meta = Ember.meta; - /** - @private +Ember.View.states.inBuffer = { + parentState: Ember.View.states._default, - Invokes the receiver's didInsertElement() method if it exists and then - invokes the same on all child views. - */ - _notifyDidInsertElement: function() { - this.invokeRecursively(function(view) { - view.fire('didInsertElement'); - }); + $: function(view, sel) { + // if we don't have an element yet, someone calling this.$() is + // trying to update an element that isn't in the DOM. Instead, + // rerender the view to allow the render method to reflect the + // changes. + view.rerender(); + return Ember.$(); }, - /** - @private + // when a view is rendered in a buffer, rerendering it simply + // replaces the existing buffer with a new one + rerender: function(view) { + Ember.deprecate("Something you did caused a view to re-render after it rendered but before it was inserted into the DOM. Because this is avoidable and the cause of significant performance issues in applications, this behavior is deprecated. If you want to use the debugger to find out what caused this, you can set ENV.RAISE_ON_DEPRECATION to true."); - Invokes the receiver's willRerender() method if it exists and then - invokes the same on all child views. - */ - _notifyWillRerender: function() { - this.invokeRecursively(function(view) { - view.fire('willRerender'); - }); + view._notifyWillRerender(); + + view.clearRenderedChildren(); + view.renderToBuffer(view.buffer, 'replaceWith'); }, - /** - Destroys any existing element along with the element for any child views - as well. If the view does not currently have a element, then this method - will do nothing. + // when a view is rendered in a buffer, appending a child + // view will render that view and append the resulting + // buffer into its buffer. + appendChild: function(view, childView, options) { + var buffer = view.buffer; - If you implement willDestroyElement() on your view, then this method will - be invoked on your view before your element is destroyed to give you a - chance to clean up any event handlers, etc. + childView = this.createChildView(childView, options); + get(view, '_childViews').push(childView); - If you write a willDestroyElement() handler, you can assume that your - didInsertElement() handler was called earlier for the same element. + childView.renderToBuffer(buffer); - Normally you will not call or override this method yourself, but you may - want to implement the above callbacks when it is run. + view.propertyDidChange('childViews'); - @returns {Ember.View} receiver - */ - destroyElement: function() { - return this.invokeForState('destroyElement'); + return childView; }, - /** - Called when the element of the view is going to be destroyed. Override - this function to do any teardown that requires an element, like removing - event listeners. - */ - willDestroyElement: function() {}, - - /** - @private + // when a view is rendered in a buffer, destroying the + // element will simply destroy the buffer and put the + // state back into the preRender state. + destroyElement: function(view) { + view.clearBuffer(); + view._notifyWillDestroyElement(); + view.transitionTo('preRender'); - Invokes the `willDestroyElement` callback on the view and child views. - */ - _notifyWillDestroyElement: function() { - this.invokeRecursively(function(view) { - view.fire('willDestroyElement'); - }); + return view; }, - /** @private (nodoc) */ - _elementWillChange: Ember.beforeObserver(function() { - this.forEachChildView(function(view) { - Ember.propertyWillChange(view, 'element'); - }); - }, 'element'), + empty: function() { + Ember.assert("Emptying a view in the inBuffer state is not allowed and should not happen under normal circumstances. Most likely there is a bug in your application. This may be due to excessive property change notifications."); + }, - /** - @private + // It should be impossible for a rendered view to be scheduled for + // insertion. + insertElement: function() { + throw "You can't insert an element that has already been rendered"; + }, - If this view's element changes, we need to invalidate the caches of our - child views so that we do not retain references to DOM elements that are - no longer needed. + setElement: function(view, value) { + view.invalidateRecursively('element'); - @observes element - */ - _elementDidChange: Ember.observer(function() { - this.forEachChildView(function(view) { - Ember.propertyDidChange(view, 'element'); - }); - }, 'element'), + if (value === null) { + view.transitionTo('preRender'); + } else { + view.clearBuffer(); + view.transitionTo('hasElement'); + } - /** - Called when the parentView property has changed. + return value; + } +}; - @function - */ - parentViewDidChange: Ember.K, - /** - @private +})(); - Invoked by the view system when this view needs to produce an HTML - representation. This method will create a new render buffer, if needed, - then apply any default attributes, such as class names and visibility. - Finally, the `render()` method is invoked, which is responsible for - doing the bulk of the rendering. - You should not need to override this method; instead, implement the - `template` property, or if you need more control, override the `render` - method. - @param {Ember.RenderBuffer} buffer the render buffer. If no buffer is - passed, a default buffer, using the current view's `tagName`, will - be used. - */ - renderToBuffer: function(parentBuffer, bufferOperation) { - var buffer; +(function() { +// ========================================================================== +// Project: Ember - JavaScript Application Framework +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2011 Apple Inc. All rights reserved. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +var get = Ember.get, set = Ember.set, meta = Ember.meta; - Ember.run.sync(); +Ember.View.states.hasElement = { + parentState: Ember.View.states._default, - // Determine where in the parent buffer to start the new buffer. - // By default, a new buffer will be appended to the parent buffer. - // The buffer operation may be changed if the child views array is - // mutated by Ember.ContainerView. - bufferOperation = bufferOperation || 'begin'; + $: function(view, sel) { + var elem = get(view, 'element'); + return sel ? Ember.$(sel, elem) : Ember.$(elem); + }, - // If this is the top-most view, start a new buffer. Otherwise, - // create a new buffer relative to the original using the - // provided buffer operation (for example, `insertAfter` will - // insert a new buffer after the "parent buffer"). - if (parentBuffer) { - var tagName = get(this, 'tagName'); - if (tagName === null || tagName === undefined) { - tagName = 'div'; - } + getElement: function(view) { + var parent = get(view, 'parentView'); + if (parent) { parent = get(parent, 'element'); } + if (parent) { return view.findElementInParentElement(parent); } + return Ember.$("#" + get(view, 'elementId'))[0]; + }, - buffer = parentBuffer[bufferOperation](tagName); + setElement: function(view, value) { + if (value === null) { + view.invalidateRecursively('element'); + + view.transitionTo('preRender'); } else { - buffer = this.renderBuffer(); + throw "You cannot set an element to a non-null value when the element is already in the DOM."; } - this.buffer = buffer; - this.transitionTo('inBuffer', false); + return value; + }, - this.lengthBeforeRender = get(get(this, '_childViews'), 'length'); + // once the view has been inserted into the DOM, rerendering is + // deferred to allow bindings to synchronize. + rerender: function(view) { + view._notifyWillRerender(); - this.beforeRender(buffer); - this.render(buffer); - this.afterRender(buffer); + view.clearRenderedChildren(); - this.lengthAfterRender = get(get(this, '_childViews'), 'length'); + view.domManager.replace(view); + return view; + }, - return buffer; + // once the view is already in the DOM, destroying it removes it + // from the DOM, nukes its element, and puts it back into the + // preRender state if inDOM. + + destroyElement: function(view) { + view._notifyWillDestroyElement(); + view.domManager.remove(view); + return view; }, - beforeRender: function(buffer) { - this.applyAttributesToBuffer(buffer); + empty: function(view) { + var _childViews = get(view, '_childViews'), len, idx; + if (_childViews) { + len = get(_childViews, 'length'); + for (idx = 0; idx < len; idx++) { + _childViews[idx]._notifyWillDestroyElement(); + } + } + view.domManager.empty(view); }, - afterRender: Ember.K, + // Handle events from `Ember.EventDispatcher` + handleEvent: function(view, eventName, evt) { + var handler = view[eventName]; + if (Ember.typeOf(handler) === 'function') { + return handler.call(view, evt); + } else { + return true; // continue event propagation + } + } +}; - /** - @private - */ - applyAttributesToBuffer: function(buffer) { - // Creates observers for all registered class name and attribute bindings, - // then adds them to the element. - this._applyClassNameBindings(); +Ember.View.states.inDOM = { + parentState: Ember.View.states.hasElement, - // Pass the render buffer so the method can apply attributes directly. - // This isn't needed for class name bindings because they use the - // existing classNames infrastructure. - this._applyAttributeBindings(buffer); + insertElement: function(view, fn) { + if (view._lastInsert !== Ember.guidFor(fn)){ + return; + } + throw "You can't insert an element into the DOM that has already been inserted"; + } +}; +})(); - a_forEach(get(this, 'classNames'), function(name){ buffer.addClass(name); }); - buffer.id(get(this, 'elementId')); - var role = get(this, 'ariaRole'); - if (role) { - buffer.attr('role', role); - } - if (get(this, 'isVisible') === false) { - buffer.style('display', 'none'); - } - }, +(function() { +// ========================================================================== +// Project: Ember - JavaScript Application Framework +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2011 Apple Inc. All rights reserved. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +var destroyedError = "You can't call %@ on a destroyed view", fmt = Ember.String.fmt; - // .......................................................... - // STANDARD RENDER PROPERTIES - // +Ember.View.states.destroyed = { + parentState: Ember.View.states._default, - /** - Tag name for the view's outer element. The tag name is only used when - an element is first created. If you change the tagName for an element, you - must destroy and recreate the view element. + appendChild: function() { + throw fmt(destroyedError, ['appendChild']); + }, + rerender: function() { + throw fmt(destroyedError, ['rerender']); + }, + destroyElement: function() { + throw fmt(destroyedError, ['destroyElement']); + }, + empty: function() { + throw fmt(destroyedError, ['empty']); + }, - By default, the render buffer will use a `
` tag for views. + setElement: function() { + throw fmt(destroyedError, ["set('element', ...)"]); + }, - @type String - @default null - */ + // Since element insertion is scheduled, don't do anything if + // the view has been destroyed between scheduling and execution + insertElement: Ember.K +}; - // We leave this null by default so we can tell the difference between - // the default case and a user-specified tag. - tagName: null, - /** - The WAI-ARIA role of the control represented by this view. For example, a - button may have a role of type 'button', or a pane may have a role of - type 'alertdialog'. This property is used by assistive software to help - visually challenged users navigate rich web applications. +})(); - The full list of valid WAI-ARIA roles is available at: - http://www.w3.org/TR/wai-aria/roles#roles_categorization - @type String - @default null - */ - ariaRole: null, - /** - Standard CSS class names to apply to the view's outer element. This - property automatically inherits any class names defined by the view's - superclasses as well. +(function() { +// ========================================================================== +// Project: Ember - JavaScript Application Framework +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2011 Apple Inc. All rights reserved. +// License: Licensed under MIT license (see license.js) +// ========================================================================== - @type Array - @default ['ember-view'] - */ - classNames: ['ember-view'], +})(); - /** - A list of properties of the view to apply as class names. If the property - is a string value, the value of that string will be applied as a class - name. - // Applies the 'high' class to the view element - Ember.View.create({ - classNameBindings: ['priority'] - priority: 'high' - }); - If the value of the property is a Boolean, the name of that property is - added as a dasherized class name. +(function() { +// ========================================================================== +// Project: Ember - JavaScript Application Framework +// Copyright: ©2006-2011 Strobe Inc. and contributors. +// Portions ©2008-2011 Apple Inc. All rights reserved. +// License: Licensed under MIT license (see license.js) +// ========================================================================== +var get = Ember.get, set = Ember.set, meta = Ember.meta; +var forEach = Ember.ArrayUtils.forEach; - // Applies the 'is-urgent' class to the view element - Ember.View.create({ - classNameBindings: ['isUrgent'] - isUrgent: true - }); +var childViewsProperty = Ember.computed(function() { + return get(this, '_childViews'); +}).property('_childViews').cacheable(); - If you would prefer to use a custom value instead of the dasherized - property name, you can pass a binding like this: +/** + @class - // Applies the 'urgent' class to the view element - Ember.View.create({ - classNameBindings: ['isUrgent:urgent'] - isUrgent: true - }); + A `ContainerView` is an `Ember.View` subclass that allows for manual or programatic + management of a view's `childViews` array that will correctly update the `ContainerView` + instance's rendered DOM representation. - This list of properties is inherited from the view's superclasses as well. + ## Setting Initial Child Views + The initial array of child views can be set in one of two ways. You can provide + a `childViews` property at creation time that contains instance of `Ember.View`: - @type Array - @default [] - */ - classNameBindings: [], - /** - A list of properties of the view to apply as attributes. If the property is - a string value, the value of that string will be applied as the attribute. + aContainer = Ember.ContainerView.create({ + childViews: [Ember.View.create(), Ember.View.create()] + }) - // Applies the type attribute to the element - // with the value "button", like
- Ember.View.create({ - attributeBindings: ['type'], - type: 'button' - }); + You can also provide a list of property names whose values are instances of `Ember.View`: - If the value of the property is a Boolean, the name of that property is - added as an attribute. + aContainer = Ember.ContainerView.create({ + childViews: ['aView', 'bView', 'cView'], + aView: Ember.View.create(), + bView: Ember.View.create() + cView: Ember.View.create() + }) - // Renders something like
- Ember.View.create({ - attributeBindings: ['enabled'], - enabled: true - }); - */ - attributeBindings: [], + The two strategies can be combined: - state: 'preRender', + aContainer = Ember.ContainerView.create({ + childViews: ['aView', Ember.View.create()], + aView: Ember.View.create() + }) - // ....................................................... - // CORE DISPLAY METHODS - // + Each child view's rendering will be inserted into the container's rendered HTML in the same + order as its position in the `childViews` property. - /** - @private + ## Adding and Removing Child Views + The views in a container's `childViews` array should be added and removed by manipulating + the `childViews` property directly. - Setup a view, but do not finish waking it up. - - configure childViews - - register the view with the global views hash, which is used for event - dispatch - */ - init: function() { - this._super(); + To remove a view pass that view into a `removeObject` call on the container's `childViews` property. - // Register the view for event handling. This hash is used by - // Ember.RootResponder to dispatch incoming events. - Ember.View.views[get(this, 'elementId')] = this; + Given an empty `` the following code - var childViews = get(this, '_childViews').slice(); + aContainer = Ember.ContainerView.create({ + classNames: ['the-container'], + childViews: ['aView', 'bView'], + aView: Ember.View.create({ + template: Ember.Handlebars.compile("A") + }), + bView: Ember.View.create({ + template: Ember.Handlebars.compile("B") + }) + }) - // setup child views. be sure to clone the child views array first - set(this, '_childViews', childViews); + aContainer.appendTo('body') - ember_assert("Only arrays are allowed for 'classNameBindings'", Ember.typeOf(this.classNameBindings) === 'array'); - this.classNameBindings = Ember.A(this.classNameBindings.slice()); + Results in the HTML - ember_assert("Only arrays are allowed for 'classNames'", Ember.typeOf(this.classNames) === 'array'); - this.classNames = Ember.A(this.classNames.slice()); +
+
A
+
B
+
- var viewController = get(this, 'viewController'); - if (viewController) { - viewController = Ember.getPath(viewController); - if (viewController) { - set(viewController, 'view', this); - } - } - }, + Removing a view - appendChild: function(view, options) { - return this.invokeForState('appendChild', view, options); - }, + aContainer.get('childViews') // [aContainer.aView, aContainer.bView] + aContainer.get('childViews').removeObject(aContainer.get('bView')) + aContainer.get('childViews') // [aContainer.aView] + + Will result in the following HTML - /** - Removes the child view from the parent view. +
+
A
+
- @param {Ember.View} view - @returns {Ember.View} receiver - */ - removeChild: function(view) { - // If we're destroying, the entire subtree will be - // freed, and the DOM will be handled separately, - // so no need to mess with childViews. - if (this.isDestroying) { return; } - // update parent node - set(view, '_parentView', null); + Similarly, adding a child view is accomplished by adding `Ember.View` instances to the + container's `childViews` property. - // remove view from childViews array. - var childViews = get(this, '_childViews'); - Ember.ArrayUtils.removeObject(childViews, view); + Given an empty `` the following code - this.propertyDidChange('childViews'); + aContainer = Ember.ContainerView.create({ + classNames: ['the-container'], + childViews: ['aView', 'bView'], + aView: Ember.View.create({ + template: Ember.Handlebars.compile("A") + }), + bView: Ember.View.create({ + template: Ember.Handlebars.compile("B") + }) + }) - return this; - }, + aContainer.appendTo('body') - /** - Removes all children from the parentView. + Results in the HTML - @returns {Ember.View} receiver - */ - removeAllChildren: function() { - return this.mutateChildViews(function(view) { - this.removeChild(view); - }); - }, +
+
A
+
B
+
- destroyAllChildren: function() { - return this.mutateChildViews(function(view) { - view.destroy(); - }); - }, + Adding a view - /** - Removes the view from its parentView, if one is found. Otherwise - does nothing. + AnotherViewClass = Ember.View.extend({ + template: Ember.Handlebars.compile("Another view") + }) - @returns {Ember.View} receiver - */ - removeFromParent: function() { - var parent = get(this, '_parentView'); + aContainer.get('childViews') // [aContainer.aView, aContainer.bView] + aContainer.get('childViews').pushObject(AnotherViewClass.create()) + aContainer.get('childViews') // [aContainer.aView, ] - // Remove DOM element from parent - this.remove(); + Will result in the following HTML - if (parent) { parent.removeChild(this); } - return this; - }, +
+
A
+
Another view
+
- /** - You must call `destroy` on a view to destroy the view (and all of its - child views). This will remove the view from any parent node, then make - sure that the DOM element managed by the view can be released by the - memory manager. - */ - willDestroy: function() { - // calling this._super() will nuke computed properties and observers, - // so collect any information we need before calling super. - var childViews = get(this, '_childViews'), - parent = get(this, '_parentView'), - elementId = get(this, 'elementId'), - childLen; - // destroy the element -- this will avoid each child view destroying - // the element over and over again... - if (!this.removedFromDOM) { this.destroyElement(); } + Direct manipulation of childViews presence or absence in the DOM via calls to + `remove` or `removeFromParent` or calls to a container's `removeChild` may not behave + correctly. - // remove from non-virtual parent view if viewName was specified - if (this.viewName) { - var nonVirtualParentView = get(this, 'parentView'); - if (nonVirtualParentView) { - set(nonVirtualParentView, this.viewName, null); - } - } + Calling `remove()` on a child view will remove the view's HTML, but it will remain as part of its + container's `childView`s property. - // remove from parent if found. Don't call removeFromParent, - // as removeFromParent will try to remove the element from - // the DOM again. - if (parent) { parent.removeChild(this); } + Calling `removeChild()` on the container will remove the passed view instance from the container's + `childView`s but keep its HTML within the container's rendered view. - this.state = 'destroyed'; + Calling `removeFromParent()` behaves as expected but should be avoided in favor of direct + manipulation of a container's `childViews` property. - childLen = get(childViews, 'length'); - for (var i=childLen-1; i>=0; i--) { - childViews[i].removedFromDOM = true; - childViews[i].destroy(); - } + aContainer = Ember.ContainerView.create({ + classNames: ['the-container'], + childViews: ['aView', 'bView'], + aView: Ember.View.create({ + template: Ember.Handlebars.compile("A") + }), + bView: Ember.View.create({ + template: Ember.Handlebars.compile("B") + }) + }) - // next remove view from global hash - delete Ember.View.views[get(this, 'elementId')]; - }, + aContainer.appendTo('body') - /** - Instantiates a view to be added to the childViews array during view - initialization. You generally will not call this method directly unless - you are overriding createChildViews(). Note that this method will - automatically configure the correct settings on the new view instance to - act as a child of the parent. + Results in the HTML - @param {Class} viewClass - @param {Hash} [attrs] Attributes to add - @returns {Ember.View} new instance - @test in createChildViews - */ - createChildView: function(view, attrs) { - if (Ember.View.detect(view)) { - if (attrs) { - view = view.create({ _parentView: this }, attrs); - } else { - view = view.create({ _parentView: this }); - } +
+
A
+
B
+
- var viewName = view.viewName; + Calling `aContainer.get('aView').removeFromParent()` will result in the following HTML - // don't set the property on a virtual view, as they are invisible to - // consumers of the view API - if (viewName) { set(get(this, 'concreteView'), viewName, view); } - } else { - ember_assert('must pass instance of View', view instanceof Ember.View); - set(view, '_parentView', this); - } - return view; - }, +
+
B
+
- becameVisible: Ember.K, - becameHidden: Ember.K, + And the `Ember.View` instance stored in `aContainer.aView` will be removed from `aContainer`'s + `childViews` array. - /** - @private + ## Templates and Layout + A `template`, `templateName`, `defaultTemplate`, `layout`, `layoutName` or `defaultLayout` + property on a container view will not result in the template or layout being rendered. + The HTML contents of a `Ember.ContainerView`'s DOM representation will only be the rendered HTML + of its child views. - When the view's `isVisible` property changes, toggle the visibility - element of the actual DOM element. - */ - _isVisibleDidChange: Ember.observer(function() { - var isVisible = get(this, 'isVisible'); + ## Binding a View to Display - this.$().toggle(isVisible); + If you would like to display a single view in your ContainerView, you can set its `currentView` + property. When the `currentView` property is set to a view instance, it will be added to the + ContainerView's `childViews` array. If the `currentView` property is later changed to a + different view, the new view will replace the old view. If `currentView` is set to `null`, the + last `currentView` will be removed. - if (this._isAncestorHidden()) { return; } + This functionality is useful for cases where you want to bind the display of a ContainerView to + a controller or state manager. For example, you can bind the `currentView` of a container to + a controller like this: - if (isVisible) { - this._notifyBecameVisible(); - } else { - this._notifyBecameHidden(); - } - }, 'isVisible'), + // Controller + App.appController = Ember.Object.create({ + view: Ember.View.create({ + templateName: 'person_template' + }) + }); - _notifyBecameVisible: function() { - this.fire('becameVisible'); + // Handlebars template + {{view Ember.ContainerView currentViewBinding="App.appController.view"}} - this.forEachChildView(function(view) { - var isVisible = get(view, 'isVisible'); + @extends Ember.View +*/ - if (isVisible || isVisible === null) { - view._notifyBecameVisible(); - } - }); - }, +Ember.ContainerView = Ember.View.extend({ - _notifyBecameHidden: function() { - this.fire('becameHidden'); - this.forEachChildView(function(view) { - var isVisible = get(view, 'isVisible'); + init: function() { + var childViews = get(this, 'childViews'); + Ember.defineProperty(this, 'childViews', childViewsProperty); - if (isVisible || isVisible === null) { - view._notifyBecameHidden(); - } - }); - }, + this._super(); - _isAncestorHidden: function() { - var parent = get(this, 'parentView'); + var _childViews = get(this, '_childViews'); - while (parent) { - if (get(parent, 'isVisible') === false) { return true; } + forEach(childViews, function(viewName, idx) { + var view; - parent = get(parent, 'parentView'); - } + if ('string' === typeof viewName) { + view = get(this, viewName); + view = this.createChildView(view); + set(this, viewName, view); + } else { + view = this.createChildView(viewName); + } - return false; - }, + _childViews[idx] = view; + }, this); - clearBuffer: function() { - this.invokeRecursively(function(view) { - this.buffer = null; + // Make the _childViews array observable + Ember.A(_childViews); + + // Sets up an array observer on the child views array. This + // observer will detect when child views are added or removed + // and update the DOM to reflect the mutation. + get(this, 'childViews').addArrayObserver(this, { + willChange: 'childViewsWillChange', + didChange: 'childViewsDidChange' }); }, - transitionTo: function(state, children) { - this.state = state; + /** + Instructs each child view to render to the passed render buffer. - if (children !== false) { - this.forEachChildView(function(view) { - view.transitionTo(state); - }); - } + @param {Ember.RenderBuffer} buffer the buffer to render to + @private + */ + render: function(buffer) { + this.forEachChildView(function(view) { + view.renderToBuffer(buffer); + }); }, /** - @private + When the container view is destroyed, tear down the child views + array observer. - Override the default event firing from Ember.Evented to - also call methods with the given name. + @private */ - fire: function(name) { - this[name].apply(this, [].slice.call(arguments, 1)); - this._super.apply(this, arguments); - }, + willDestroy: function() { + get(this, 'childViews').removeArrayObserver(this, { + willChange: 'childViewsWillChange', + didChange: 'childViewsDidChange' + }); - // ....................................................... - // EVENT HANDLING - // + this._super(); + }, /** - @private + When a child view is removed, destroy its element so that + it is removed from the DOM. - Handle events from `Ember.EventDispatcher` - */ - handleEvent: function(eventName, evt) { - return this.invokeForState('handleEvent', eventName, evt); - } + The array observer that triggers this action is set up in the + `renderToBuffer` method. -}); + @private + @param {Ember.Array} views the child views array before mutation + @param {Number} start the start position of the mutation + @param {Number} removed the number of child views removed + **/ + childViewsWillChange: function(views, start, removed) { + if (removed === 0) { return; } -/** - Describe how the specified actions should behave in the various - states that a view can exist in. Possible states: + var changedViews = views.slice(start, start+removed); + this.initializeViews(changedViews, null, null); - * preRender: when a view is first instantiated, and after its - element was destroyed, it is in the preRender state - * inBuffer: once a view has been rendered, but before it has - been inserted into the DOM, it is in the inBuffer state - * inDOM: once a view has been inserted into the DOM it is in - the inDOM state. A view spends the vast majority of its - existence in this state. - * destroyed: once a view has been destroyed (using the destroy - method), it is in this state. No further actions can be invoked - on a destroyed view. -*/ + this.invokeForState('childViewsWillChange', views, start, removed); + }, + + /** + When a child view is added, make sure the DOM gets updated appropriately. - // in the destroyed state, everything is illegal + If the view has already rendered an element, we tell the child view to + create an element and insert it into the DOM. If the enclosing container view + has already written to a buffer, but not yet converted that buffer into an + element, we insert the string representation of the child into the appropriate + place in the buffer. - // before rendering has begun, all legal manipulations are noops. + @private + @param {Ember.Array} views the array of child views afte the mutation has occurred + @param {Number} start the start position of the mutation + @param {Number} removed the number of child views removed + @param {Number} the number of child views added + */ + childViewsDidChange: function(views, start, removed, added) { + var len = get(views, 'length'); - // inside the buffer, legal manipulations are done on the buffer + // No new child views were added; bail out. + if (added === 0) return; - // once the view has been inserted into the DOM, legal manipulations - // are done on the DOM element. + var changedViews = views.slice(start, start+added); + this.initializeViews(changedViews, this, get(this, 'templateData')); -/** @private */ -var DOMManager = { - prepend: function(view, childView) { - childView._insertElementLater(function() { - var element = view.$(); - element.prepend(childView.$()); - }); + // Let the current state handle the changes + this.invokeForState('childViewsDidChange', views, start, added); }, - after: function(view, nextView) { - nextView._insertElementLater(function() { - var element = view.$(); - element.after(nextView.$()); + initializeViews: function(views, parentView, templateData) { + forEach(views, function(view) { + set(view, '_parentView', parentView); + + if (!get(view, 'templateData')) { + set(view, 'templateData', templateData); + } }); }, - replace: function(view) { - var element = get(view, 'element'); - - set(view, 'element', null); + /** + Schedules a child view to be inserted into the DOM after bindings have + finished syncing for this run loop. - view._insertElementLater(function() { - Ember.$(element).replaceWith(get(view, 'element')); - }); + @param {Ember.View} view the child view to insert + @param {Ember.View} prev the child view after which the specified view should + be inserted + @private + */ + _scheduleInsertion: function(view, prev) { + if (prev) { + prev.domManager.after(prev, view); + } else { + this.domManager.prepend(this, view); + } }, - remove: function(view) { - var elem = get(view, 'element'); + currentView: null, - set(view, 'element', null); + _currentViewWillChange: Ember.beforeObserver(function() { + var childViews = get(this, 'childViews'), + currentView = get(this, 'currentView'); - Ember.$(elem).remove(); - }, + if (currentView) { + childViews.removeObject(currentView); + } + }, 'currentView'), - empty: function(view) { - view.$().empty(); - } -}; + _currentViewDidChange: Ember.observer(function() { + var childViews = get(this, 'childViews'), + currentView = get(this, 'currentView'); -Ember.View.reopen({ - states: Ember.View.states, - domManager: DOMManager + if (currentView) { + childViews.pushObject(currentView); + } + }, 'currentView') }); -// Create a global view hash. -Ember.View.views = {}; +// Ember.ContainerView extends the default view states to provide different +// behavior for childViewsWillChange and childViewsDidChange. +Ember.ContainerView.states = { + parent: Ember.View.states, -// If someone overrides the child views computed property when -// defining their class, we want to be able to process the user's -// supplied childViews and then restore the original computed property -// at view initialization time. This happens in Ember.ContainerView's init -// method. -Ember.View.childViewsProperty = childViewsProperty; + inBuffer: { + childViewsDidChange: function(parentView, views, start, added) { + var buffer = parentView.buffer, + startWith, prev, prevBuffer, view; -Ember.View.applyAttributeBindings = function(elem, name, value) { - var type = Ember.typeOf(value); - var currentValue = elem.attr(name); + // Determine where to begin inserting the child view(s) in the + // render buffer. + if (start === 0) { + // If views were inserted at the beginning, prepend the first + // view to the render buffer, then begin inserting any + // additional views at the beginning. + view = views[start]; + startWith = start + 1; + view.renderToBuffer(buffer, 'prepend'); + } else { + // Otherwise, just insert them at the same place as the child + // views mutation. + view = views[start - 1]; + startWith = start; + } - // if this changes, also change the logic in ember-handlebars/lib/helpers/binding.js - if ((type === 'string' || (type === 'number' && !isNaN(value))) && value !== currentValue) { - elem.attr(name, value); - } else if (value && type === 'boolean') { - elem.attr(name, name); - } else if (!value) { - elem.removeAttr(name); + for (var i=startWith; i` and the following code: -(function() { -// ========================================================================== -// Project: Ember - JavaScript Application Framework -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -Ember.View.states.preRender = { - parentState: Ember.View.states._default, + someItemsView = Ember.CollectionView.create({ + classNames: ['a-collection'], + content: ['A','B','C'], + itemViewClass: Ember.View.extend({ + template: Ember.Handlebars.compile("the letter: {{content}}") + }) + }) - // a view leaves the preRender state once its element has been - // created (createElement). - insertElement: function(view, fn) { - view.createElement(); - view._notifyWillInsertElement(true); - // after createElement, the view will be in the hasElement state. - fn.call(view); - view.transitionTo('inDOM'); - view._notifyDidInsertElement(); - }, + someItemsView.appendTo('body') - // This exists for the removal warning, remove later - $: function(view){ - if (view._willInsertElementAccessUnsupported) { - console.error("Getting element from willInsertElement is unreliable and no longer supported."); - } - return Ember.$(); - }, + Will result in the following HTML structure - empty: Ember.K, +
+
the letter: A
+
the letter: B
+
the letter: C
+
- // This exists for the removal warning, remove later - getElement: function(view){ - if (view._willInsertElementAccessUnsupported) { - console.error("Getting element from willInsertElement is unreliable and no longer supported."); - } - return null; - }, - setElement: function(view, value) { - view.beginPropertyChanges(); - view.invalidateRecursively('element'); + ## Automatic matching of parent/child tagNames + Setting the `tagName` property of a `CollectionView` to any of + "ul", "ol", "table", "thead", "tbody", "tfoot", "tr", or "select" will result + in the item views receiving an appropriately matched `tagName` property. - if (value !== null) { - view.transitionTo('hasElement'); - } - view.endPropertyChanges(); + Given an empty `` and the following code: - return value; - } -}; + anUndorderedListView = Ember.CollectionView.create({ + tagName: 'ul', + content: ['A','B','C'], + itemViewClass: Ember.View.extend({ + template: Ember.Handlebars.compile("the letter: {{content}}") + }) + }) -})(); + anUndorderedListView.appendTo('body') + Will result in the following HTML structure +
    +
  • the letter: A
    • +
  • the letter: B
    • +
  • the letter: C
    • +
-(function() { -// ========================================================================== -// Project: Ember - JavaScript Application Framework -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -var get = Ember.get, set = Ember.set, meta = Ember.meta; + Additional tagName pairs can be provided by adding to `Ember.CollectionView.CONTAINER_MAP ` -Ember.View.states.inBuffer = { - parentState: Ember.View.states._default, + Ember.CollectionView.CONTAINER_MAP['article'] = 'section' - $: function(view, sel) { - // if we don't have an element yet, someone calling this.$() is - // trying to update an element that isn't in the DOM. Instead, - // rerender the view to allow the render method to reflect the - // changes. - view.rerender(); - return Ember.$(); - }, - // when a view is rendered in a buffer, rerendering it simply - // replaces the existing buffer with a new one - rerender: function(view) { - ember_deprecate("Something you did caused a view to re-render after it rendered but before it was inserted into the DOM. Because this is avoidable and the cause of significant performance issues in applications, this behavior is deprecated. If you want to use the debugger to find out what caused this, you can set ENV.RAISE_ON_DEPRECATION to true."); + ## Empty View + You can provide an `Ember.View` subclass to the `Ember.CollectionView` instance as its + `emptyView` property. If the `content` property of a `CollectionView` is set to `null` + or an empty array, an instance of this view will be the `CollectionView`s only child. - view._notifyWillRerender(); + aListWithNothing = Ember.CollectionView.create({ + classNames: ['nothing'] + content: null, + emptyView: Ember.View.extend({ + template: Ember.Handlebars.compile("The collection is empty") + }) + }) - view.clearRenderedChildren(); - view.renderToBuffer(view.buffer, 'replaceWith'); - }, + aListWithNothing.appendTo('body') - // when a view is rendered in a buffer, appending a child - // view will render that view and append the resulting - // buffer into its buffer. - appendChild: function(view, childView, options) { - var buffer = view.buffer; + Will result in the following HTML structure + +
+
+ The collection is empty +
+
+ + ## Adding and Removing items + The `childViews` property of a `CollectionView` should not be directly manipulated. Instead, + add, remove, replace items from its `content` property. This will trigger + appropriate changes to its rendered HTML. + + ## Use in templates via the `{{collection}}` Ember.Handlebars helper + Ember.Handlebars provides a helper specifically for adding `CollectionView`s to templates. + See `Ember.Handlebars.collection` for more details + + @since Ember 0.9 + @extends Ember.ContainerView +*/ +Ember.CollectionView = Ember.ContainerView.extend( +/** @scope Ember.CollectionView.prototype */ { + + /** + A list of items to be displayed by the Ember.CollectionView. - childView = this.createChildView(childView, options); - get(view, '_childViews').push(childView); + @type Ember.Array + @default null + */ + content: null, - childView.renderToBuffer(buffer); + /** + @private - view.propertyDidChange('childViews'); + This provides metadata about what kind of empty view class this + collection would like if it is being instantiated from another + system (like Handlebars) + */ + emptyViewClass: Ember.View, - return childView; - }, + /** + An optional view to display if content is set to an empty array. - // when a view is rendered in a buffer, destroying the - // element will simply destroy the buffer and put the - // state back into the preRender state. - destroyElement: function(view) { - view.clearBuffer(); - view._notifyWillDestroyElement(); - view.transitionTo('preRender'); + @type Ember.View + @default null + */ + emptyView: null, - return view; - }, + /** + @type Ember.View + @default Ember.View + */ + itemViewClass: Ember.View, - empty: function() { - throw "EWOT"; + /** @private */ + init: function() { + var ret = this._super(); + this._contentDidChange(); + return ret; }, - // It should be impossible for a rendered view to be scheduled for - // insertion. - insertElement: function() { - throw "You can't insert an element that has already been rendered"; - }, + _contentWillChange: Ember.beforeObserver(function() { + var content = this.get('content'); - setElement: function(view, value) { - view.invalidateRecursively('element'); + if (content) { content.removeArrayObserver(this); } + var len = content ? get(content, 'length') : 0; + this.arrayWillChange(content, 0, len); + }, 'content'), - if (value === null) { - view.transitionTo('preRender'); - } else { - view.clearBuffer(); - view.transitionTo('hasElement'); - } + /** + @private - return value; - } -}; + Check to make sure that the content has changed, and if so, + update the children directly. This is always scheduled + asynchronously, to allow the element to be created before + bindings have synchronized and vice versa. + */ + _contentDidChange: Ember.observer(function() { + var content = get(this, 'content'); + if (content) { + Ember.assert(fmt("an Ember.CollectionView's content must implement Ember.Array. You passed %@", [content]), Ember.Array.detect(content)); + content.addArrayObserver(this); + } -})(); + var len = content ? get(content, 'length') : 0; + this.arrayDidChange(content, 0, null, len); + }, 'content'), + willDestroy: function() { + var content = get(this, 'content'); + if (content) { content.removeArrayObserver(this); } + this._super(); + }, -(function() { -// ========================================================================== -// Project: Ember - JavaScript Application Framework -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -var get = Ember.get, set = Ember.set, meta = Ember.meta; + arrayWillChange: function(content, start, removedCount) { + // If the contents were empty before and this template collection has an + // empty view remove it now. + var emptyView = get(this, 'emptyView'); + if (emptyView && emptyView instanceof Ember.View) { + emptyView.removeFromParent(); + } -Ember.View.states.hasElement = { - parentState: Ember.View.states._default, + // Loop through child views that correspond with the removed items. + // Note that we loop from the end of the array to the beginning because + // we are mutating it as we go. + var childViews = get(this, 'childViews'), childView, idx, len; - $: function(view, sel) { - var elem = get(view, 'element'); - return sel ? Ember.$(sel, elem) : Ember.$(elem); - }, + len = get(childViews, 'length'); - getElement: function(view) { - var parent = get(view, 'parentView'); - if (parent) { parent = get(parent, 'element'); } - if (parent) { return view.findElementInParentElement(parent); } - return Ember.$("#" + get(view, 'elementId'))[0]; - }, + var removingAll = removedCount === len; - setElement: function(view, value) { - if (value === null) { - view.invalidateRecursively('element'); - view.transitionTo('preRender'); - } else { - throw "You cannot set an element to a non-null value when the element is already in the DOM."; + if (removingAll) { + this.invokeForState('empty'); } - return value; + for (idx = start + removedCount - 1; idx >= start; idx--) { + childView = childViews[idx]; + if (removingAll) { childView.removedFromDOM = true; } + childView.destroy(); + } }, - // once the view has been inserted into the DOM, rerendering is - // deferred to allow bindings to synchronize. - rerender: function(view) { - view._notifyWillRerender(); + /** + Called when a mutation to the underlying content array occurs. - view.clearRenderedChildren(); + This method will replay that mutation against the views that compose the + Ember.CollectionView, ensuring that the view reflects the model. - view.domManager.replace(view); - return view; - }, + This array observer is added in contentDidChange. - // once the view is already in the DOM, destroying it removes it - // from the DOM, nukes its element, and puts it back into the - // preRender state. - destroyElement: function(view) { - view._notifyWillDestroyElement(); + @param {Array} addedObjects + the objects that were added to the content - view.domManager.remove(view); - return view; - }, + @param {Array} removedObjects + the objects that were removed from the content - empty: function(view) { - var _childViews = get(view, '_childViews'), len, idx; - if (_childViews) { - len = get(_childViews, 'length'); - for (idx = 0; idx < len; idx++) { - _childViews[idx]._notifyWillDestroyElement(); - } - } - view.domManager.empty(view); - }, + @param {Number} changeIndex + the index at which the changes occurred + */ + arrayDidChange: function(content, start, removed, added) { + var itemViewClass = get(this, 'itemViewClass'), + childViews = get(this, 'childViews'), + addedViews = [], view, item, idx, len, itemTagName; - // Handle events from `Ember.EventDispatcher` - handleEvent: function(view, eventName, evt) { - var handler = view[eventName]; - if (Ember.typeOf(handler) === 'function') { - return handler.call(view, evt); - } else { - return true; // continue event propagation + if ('string' === typeof itemViewClass) { + itemViewClass = Ember.getPath(itemViewClass); } - } -}; -Ember.View.states.inDOM = { - parentState: Ember.View.states.hasElement, + Ember.assert(fmt("itemViewClass must be a subclass of Ember.View, not %@", [itemViewClass]), Ember.View.detect(itemViewClass)); - insertElement: function() { - throw "You can't insert an element into the DOM that has already been inserted"; - } -}; + len = content ? get(content, 'length') : 0; + if (len) { + for (idx = start; idx < start+added; idx++) { + item = content.objectAt(idx); -})(); + view = this.createChildView(itemViewClass, { + content: item, + contentIndex: idx + }); + addedViews.push(view); + } + } else { + var emptyView = get(this, 'emptyView'); + if (!emptyView) { return; } + emptyView = this.createChildView(emptyView); + addedViews.push(emptyView); + set(this, 'emptyView', emptyView); + } + childViews.replace(start, 0, addedViews); + }, -(function() { -// ========================================================================== -// Project: Ember - JavaScript Application Framework -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -var destroyedError = "You can't call %@ on a destroyed view", fmt = Ember.String.fmt; + createChildView: function(view, attrs) { + view = this._super(view, attrs); -Ember.View.states.destroyed = { - parentState: Ember.View.states._default, + var itemTagName = get(view, 'tagName'); + var tagName = (itemTagName === null || itemTagName === undefined) ? Ember.CollectionView.CONTAINER_MAP[get(this, 'tagName')] : itemTagName; - appendChild: function() { - throw fmt(destroyedError, ['appendChild']); - }, - rerender: function() { - throw fmt(destroyedError, ['rerender']); - }, - destroyElement: function() { - throw fmt(destroyedError, ['destroyElement']); - }, - empty: function() { - throw fmt(destroyedError, ['empty']); - }, + set(view, 'tagName', tagName); - setElement: function() { - throw fmt(destroyedError, ["set('element', ...)"]); - }, + return view; + } +}); - // Since element insertion is scheduled, don't do anything if - // the view has been destroyed between scheduling and execution - insertElement: Ember.K +/** + @static + + A map of parent tags to their default child tags. You can add + additional parent tags if you want collection views that use + a particular parent tag to default to a child tag. + + @type Hash + @constant +*/ +Ember.CollectionView.CONTAINER_MAP = { + ul: 'li', + ol: 'li', + table: 'tr', + thead: 'tr', + tbody: 'tr', + tfoot: 'tr', + tr: 'td', + select: 'option' }; - })(); @@ -14277,736 +15832,1177 @@ Ember.View.states.destroyed = { // Portions ©2008-2011 Apple Inc. All rights reserved. // License: Licensed under MIT license (see license.js) // ========================================================================== -var get = Ember.get, set = Ember.set, meta = Ember.meta; -var forEach = Ember.ArrayUtils.forEach; -var childViewsProperty = Ember.computed(function() { - return get(this, '_childViews'); -}).property('_childViews').cacheable(); +/*globals jQuery*/ -Ember.ContainerView = Ember.View.extend({ +})(); + +(function() { +var get = Ember.get, set = Ember.set, getPath = Ember.getPath; + +Ember.State = Ember.Object.extend(Ember.Evented, { + isState: true, + parentState: null, + start: null, + name: null, + path: Ember.computed(function() { + var parentPath = getPath(this, 'parentState.path'), + path = get(this, 'name'); + + if (parentPath) { + path = parentPath + '.' + path; + } + + return path; + }).property().cacheable(), + + /** + @private + + Override the default event firing from Ember.Evented to + also call methods with the given name. + */ + fire: function(name) { + if (this[name]) { + this[name].apply(this, [].slice.call(arguments, 1)); + } + this._super.apply(this, arguments); + }, init: function() { - var childViews = get(this, 'childViews'); - Ember.defineProperty(this, 'childViews', childViewsProperty); + var states = get(this, 'states'), foundStates; + set(this, 'childStates', Ember.A()); - this._super(); + var name; - var _childViews = get(this, '_childViews'); + // As a convenience, loop over the properties + // of this state and look for any that are other + // Ember.State instances or classes, and move them + // to the `states` hash. This avoids having to + // create an explicit separate hash. - forEach(childViews, function(viewName, idx) { - var view; + if (!states) { + states = {}; - if ('string' === typeof viewName) { - view = get(this, viewName); - view = this.createChildView(view); - set(this, viewName, view); - } else { - view = this.createChildView(viewName); + for (name in this) { + if (name === "constructor") { continue; } + this.setupChild(states, name, this[name]); } - _childViews[idx] = view; - }, this); - - // Make the _childViews array observable - Ember.A(_childViews); + set(this, 'states', states); + } else { + for (name in states) { + this.setupChild(states, name, states[name]); + } + } - // Sets up an array observer on the child views array. This - // observer will detect when child views are added or removed - // and update the DOM to reflect the mutation. - get(this, 'childViews').addArrayObserver(this, { - willChange: 'childViewsWillChange', - didChange: 'childViewsDidChange' - }); + set(this, 'routes', {}); }, - /** - Instructs each child view to render to the passed render buffer. + setupChild: function(states, name, value) { + if (!value) { return false; } - @param {Ember.RenderBuffer} buffer the buffer to render to - @private - */ - render: function(buffer) { - this.forEachChildView(function(view) { - view.renderToBuffer(buffer); - }); + if (Ember.State.detect(value)) { + value = value.create({ + name: name + }); + } else if (value.isState) { + set(value, 'name', name); + } + + if (value.isState) { + set(value, 'parentState', this); + get(this, 'childStates').pushObject(value); + states[name] = value; + } }, /** - When the container view is destroyed, tear down the child views - array observer. + A Boolean value indicating whether the state is a leaf state + in the state hierarchy. This is false if the state has child + states; otherwise it is true. - @private + @property {Boolean} */ - willDestroy: function() { - get(this, 'childViews').removeArrayObserver(this, { - willChange: 'childViewsWillChange', - didChange: 'childViewsDidChange' - }); + isLeaf: Ember.computed(function() { + return !get(this, 'childStates').length; + }).cacheable(), - this._super(); - }, + setupControllers: Ember.K, + enter: Ember.K, + exit: Ember.K +}); - /** - When a child view is removed, destroy its element so that - it is removed from the DOM. +})(); - The array observer that triggers this action is set up in the - `renderToBuffer` method. - @private - @param {Ember.Array} views the child views array before mutation - @param {Number} start the start position of the mutation - @param {Number} removed the number of child views removed - **/ - childViewsWillChange: function(views, start, removed) { - if (removed === 0) { return; } - var changedViews = views.slice(start, start+removed); - this.setParentView(changedViews, null); +(function() { +var get = Ember.get, set = Ember.set, getPath = Ember.getPath, fmt = Ember.String.fmt; +/** + @class + + StateManager is part of Ember's implementation of a finite state machine. A StateManager + instance manages a number of properties that are instances of `Ember.State`, + tracks the current active state, and triggers callbacks when states have changed. - this.invokeForState('childViewsWillChange', views, start, removed); - }, + ## Defining States - /** - When a child view is added, make sure the DOM gets updated appropriately. + The states of StateManager can be declared in one of two ways. First, you can define + a `states` property that contains all the states: - If the view has already rendered an element, we tell the child view to - create an element and insert it into the DOM. If the enclosing container view - has already written to a buffer, but not yet converted that buffer into an - element, we insert the string representation of the child into the appropriate - place in the buffer. + managerA = Ember.StateManager.create({ + states: { + stateOne: Ember.State.create(), + stateTwo: Ember.State.create() + } + }) - @private - @param {Ember.Array} views the array of child views afte the mutation has occurred - @param {Number} start the start position of the mutation - @param {Number} removed the number of child views removed - @param {Number} the number of child views added - */ - childViewsDidChange: function(views, start, removed, added) { - var len = get(views, 'length'); + managerA.get('states') + // { + // stateOne: Ember.State.create(), + // stateTwo: Ember.State.create() + // } - // No new child views were added; bail out. - if (added === 0) return; + You can also add instances of `Ember.State` (or an `Ember.State` subclass) directly as properties + of a StateManager. These states will be collected into the `states` property for you. - var changedViews = views.slice(start, start+added); - this.setParentView(changedViews, this); + managerA = Ember.StateManager.create({ + stateOne: Ember.State.create(), + stateTwo: Ember.State.create() + }) - // Let the current state handle the changes - this.invokeForState('childViewsDidChange', views, start, added); - }, + managerA.get('states') + // { + // stateOne: Ember.State.create(), + // stateTwo: Ember.State.create() + // } - setParentView: function(views, parentView) { - forEach(views, function(view) { - set(view, '_parentView', parentView); - }); - }, + ## The Initial State + When created a StateManager instance will immediately enter into the state + defined as its `start` property or the state referenced by name in its + `initialState` property: - /** - Schedules a child view to be inserted into the DOM after bindings have - finished syncing for this run loop. + managerA = Ember.StateManager.create({ + start: Ember.State.create({}) + }) - @param {Ember.View} view the child view to insert - @param {Ember.View} prev the child view after which the specified view should - be inserted - @private - */ - _scheduleInsertion: function(view, prev) { - if (prev) { - prev.domManager.after(prev, view); - } else { - this.domManager.prepend(this, view); - } - } -}); + managerA.getPath('currentState.name') // 'start' -// Ember.ContainerView extends the default view states to provide different -// behavior for childViewsWillChange and childViewsDidChange. -Ember.ContainerView.states = { - parent: Ember.View.states, + managerB = Ember.StateManager.create({ + initialState: 'beginHere', + beginHere: Ember.State.create({}) + }) - inBuffer: { - childViewsDidChange: function(parentView, views, start, added) { - var buffer = parentView.buffer, - startWith, prev, prevBuffer, view; + managerB.getPath('currentState.name') // 'beginHere' - // Determine where to begin inserting the child view(s) in the - // render buffer. - if (start === 0) { - // If views were inserted at the beginning, prepend the first - // view to the render buffer, then begin inserting any - // additional views at the beginning. - view = views[start]; - startWith = start + 1; - view.renderToBuffer(buffer, 'prepend'); - } else { - // Otherwise, just insert them at the same place as the child - // views mutation. - view = views[start - 1]; - startWith = start; - } + Because it is a property you may also provided a computed function if you wish to derive + an `initialState` programmatically: - for (var i=startWith; i could not + // respond to event anAction in state stateOne.substateOne.subsubstateOne. + + Inside of an action method the given state should delegate `goToState` calls on its + StateManager. + + robotManager = Ember.StateManager.create({ + initialState: 'poweredDown.charging', + poweredDown: Ember.State.create({ + charging: Ember.State.create({ + chargeComplete: function(manager, context){ + manager.goToState('charged') + } + }), + charged: Ember.State.create({ + boot: function(manager, context){ + manager.goToState('poweredUp') + } + }) + }), + poweredUp: Ember.State.create({ + beginExtermination: function(manager, context){ + manager.goToState('rampaging') + }, + rampaging: Ember.State.create() + }) + }) -Ember.ContainerView.reopen({ - states: Ember.ContainerView.states -}); + robotManager.getPath('currentState.name') // 'charging' + robotManager.send('boot') // throws error, no boot action + // in current hierarchy + robotManager.getPath('currentState.name') // remains 'charging' -})(); + robotManager.send('beginExtermination') // throws error, no beginExtermination + // action in current hierarchy + robotManager.getPath('currentState.name') // remains 'charging' + robotManager.send('chargeComplete') + robotManager.getPath('currentState.name') // 'charged' + robotManager.send('boot') + robotManager.getPath('currentState.name') // 'poweredUp' -(function() { -// ========================================================================== -// Project: Ember - JavaScript Application Framework -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== -var get = Ember.get, set = Ember.set, fmt = Ember.String.fmt; + robotManager.send('beginExtermination', allHumans) + robotManager.getPath('currentState.name') // 'rampaging' -/** - @class - @since Ember 0.9 - @extends Ember.View -*/ -Ember.CollectionView = Ember.ContainerView.extend( -/** @scope Ember.CollectionView.prototype */ { +**/ +Ember.StateManager = Ember.State.extend( +/** @scope Ember.StateManager.prototype */ { /** - A list of items to be displayed by the Ember.CollectionView. - - @type Ember.Array - @default null + When creating a new statemanager, look for a default state to transition + into. This state can either be named `start`, or can be specified using the + `initialState` property. */ - content: null, + init: function() { + this._super(); - /** - An optional view to display if content is set to an empty array. + set(this, 'stateMeta', Ember.Map.create()); - @type Ember.View - @default null - */ - emptyView: null, + var initialState = get(this, 'initialState'); + + if (!initialState && getPath(this, 'states.start')) { + initialState = 'start'; + } + + if (initialState) { + this.goToState(initialState); + } + }, + + currentState: null, /** - @type Ember.View - @default Ember.View + If set to true, `errorOnUnhandledEvents` will cause an exception to be + raised if you attempt to send an event to a state manager that is not + handled by the current state or any of its parent states. + + @property {Boolean} */ - itemViewClass: Ember.View, + errorOnUnhandledEvent: true, - init: function() { - var ret = this._super(); - this._contentDidChange(); - return ret; + send: function(event, context) { + this.sendRecursively(event, get(this, 'currentState'), context); }, - _contentWillChange: Ember.beforeObserver(function() { - var content = this.get('content'); + sendRecursively: function(event, currentState, context) { + var log = this.enableLogging; - if (content) { content.removeArrayObserver(this); } - var len = content ? get(content, 'length') : 0; - this.arrayWillChange(content, 0, len); - }, 'content'), + var action = currentState[event]; - /** - @private + // Test to see if the action is a method that + // can be invoked. Don't blindly check just for + // existence, because it is possible the state + // manager has a child state of the given name, + // and we should still raise an exception in that + // case. + if (typeof action === 'function') { + if (log) { Ember.Logger.log(fmt("STATEMANAGER: Sending event '%@' to state %@.", [event, get(currentState, 'path')])); } + action.call(currentState, this, context); + } else { + var parentState = get(currentState, 'parentState'); + if (parentState) { + this.sendRecursively(event, parentState, context); + } else if (get(this, 'errorOnUnhandledEvent')) { + throw new Ember.Error(this.toString() + " could not respond to event " + event + " in state " + getPath(this, 'currentState.path') + "."); + } + } + }, - Check to make sure that the content has changed, and if so, - update the children directly. This is always scheduled - asynchronously, to allow the element to be created before - bindings have synchronized and vice versa. - */ - _contentDidChange: Ember.observer(function() { - var content = get(this, 'content'); + findStatesByRoute: function(state, route) { + if (!route || route === "") { return undefined; } + var r = route.split('.'), ret = []; - if (content) { - ember_assert(fmt("an Ember.CollectionView's content must implement Ember.Array. You passed %@", [content]), Ember.Array.detect(content)); - content.addArrayObserver(this); + for (var i=0, len = r.length; i < len; i += 1) { + var states = get(state, 'states') ; + + if (!states) { return undefined; } + + var s = get(states, r[i]); + if (s) { state = s; ret.push(s); } + else { return undefined; } } - var len = content ? get(content, 'length') : 0; - this.arrayDidChange(content, 0, null, len); - }, 'content'), + return ret; + }, - willDestroy: function() { - var content = get(this, 'content'); - if (content) { content.removeArrayObserver(this); } + goToState: function() { + // not deprecating this yet so people don't constantly need to + // make trivial changes for little reason. + return this.transitionTo.apply(this, arguments); + }, - this._super(); + pathForSegments: function(array) { + return Ember.ArrayUtils.map(array, function(tuple) { + Ember.assert("A segment passed to transitionTo must be an Array", Ember.typeOf(tuple) === "array"); + return tuple[0]; + }).join("."); }, - arrayWillChange: function(content, start, removedCount) { - // If the contents were empty before and this template collection has an - // empty view remove it now. - var emptyView = get(this, 'emptyView'); - if (emptyView && emptyView instanceof Ember.View) { - emptyView.removeFromParent(); + transitionTo: function(name, context) { + // 1. Normalize arguments + // 2. Ensure that we are in the correct state + // 3. Map provided path to context objects and send + // appropriate setupControllers events + + if (Ember.empty(name)) { return; } + + var segments; + + if (Ember.typeOf(name) === "array") { + segments = Array.prototype.slice.call(arguments); + } else { + segments = [[name, context]]; } - // Loop through child views that correspond with the removed items. - // Note that we loop from the end of the array to the beginning because - // we are mutating it as we go. - var childViews = get(this, 'childViews'), childView, idx, len; + var path = this.pathForSegments(segments); - len = get(childViews, 'length'); + var currentState = get(this, 'currentState') || this, state, newState; - var removingAll = removedCount === len; + var exitStates = [], enterStates, resolveState; - if (removingAll) { - this.invokeForState('empty'); - } + state = currentState; - for (idx = start + removedCount - 1; idx >= start; idx--) { - childView = childViews[idx]; - if (removingAll) { childView.removedFromDOM = true; } - childView.destroy(); + if (state.routes[path]) { + // cache hit + + var route = state.routes[path]; + exitStates = route.exitStates; + enterStates = route.enterStates; + state = route.futureState; + resolveState = route.resolveState; + } else { + // cache miss + + newState = this.findStatesByRoute(currentState, path); + + while (state && !newState) { + exitStates.unshift(state); + + state = get(state, 'parentState'); + if (!state) { + newState = this.findStatesByRoute(this, path); + if (!newState) { return; } + } + newState = this.findStatesByRoute(state, path); + } + + resolveState = state; + + enterStates = newState.slice(0); + exitStates = exitStates.slice(0); + + if (enterStates.length > 0) { + state = enterStates[enterStates.length - 1]; + + while (enterStates.length > 0 && enterStates[0] === exitStates[0]) { + enterStates.shift(); + exitStates.shift(); + } + } + + currentState.routes[path] = { + exitStates: exitStates, + enterStates: enterStates, + futureState: state, + resolveState: resolveState + }; } - }, - /** - Called when a mutation to the underlying content array occurs. + this.enterState(exitStates, enterStates, state); + this.triggerSetupContext(resolveState, segments); + }, - This method will replay that mutation against the views that compose the - Ember.CollectionView, ensuring that the view reflects the model. + triggerSetupContext: function(root, segments) { + var state = root; - This array observer is added in contentDidChange. + Ember.ArrayUtils.forEach(segments, function(tuple) { + var path = tuple[0], context = tuple[1]; - @param {Array} addedObjects - the objects that were added to the content + state = this.findStatesByRoute(state, path); + state = state[state.length-1]; - @param {Array} removedObjects - the objects that were removed from the content + state.fire('setupControllers', this, context); + }, this); + //getPath(root, path).setupControllers(this, context); + }, - @param {Number} changeIndex - the index at which the changes occurred - */ - arrayDidChange: function(content, start, removed, added) { - var itemViewClass = get(this, 'itemViewClass'), - childViews = get(this, 'childViews'), - addedViews = [], view, item, idx, len, itemTagName; + getState: function(name) { + var state = get(this, name), + parentState = get(this, 'parentState'); - if ('string' === typeof itemViewClass) { - itemViewClass = Ember.getPath(itemViewClass); + if (state) { + return state; + } else if (parentState) { + return parentState.getState(name); } + }, - ember_assert(fmt("itemViewClass must be a subclass of Ember.View, not %@", [itemViewClass]), Ember.View.detect(itemViewClass)); + asyncEach: function(list, callback, doneCallback) { + var async = false, self = this; - len = content ? get(content, 'length') : 0; - if (len) { - for (idx = start; idx < start+added; idx++) { - item = content.objectAt(idx); + if (!list.length) { + if (doneCallback) { doneCallback.call(this); } + return; + } - view = this.createChildView(itemViewClass, { - content: item, - contentIndex: idx - }); + var head = list[0]; + var tail = list.slice(1); - addedViews.push(view); + var transition = { + async: function() { async = true; }, + resume: function() { + self.asyncEach(tail, callback, doneCallback); } - } else { - var emptyView = get(this, 'emptyView'); - if (!emptyView) { return; } + }; - emptyView = this.createChildView(emptyView); - addedViews.push(emptyView); - set(this, 'emptyView', emptyView); - } + callback.call(this, head, transition); - childViews.replace(start, 0, addedViews); + if (!async) { transition.resume(); } }, - createChildView: function(view, attrs) { - view = this._super(view, attrs); + enterState: function(exitStates, enterStates, state) { + var log = this.enableLogging; + + var stateManager = this; + + exitStates = exitStates.slice(0).reverse(); + this.asyncEach(exitStates, function(state, transition) { + state.fire('exit', stateManager, transition); + }, function() { + this.asyncEach(enterStates, function(state, transition) { + if (log) { Ember.Logger.log("STATEMANAGER: Entering " + get(state, 'path')); } + state.fire('enter', stateManager, transition); + }, function() { + var startState = state, enteredState, initialState; + + initialState = get(startState, 'initialState'); + + if (!initialState) { + initialState = 'start'; + } + + // right now, start states cannot be entered asynchronously + while (startState = get(get(startState, 'states'), initialState)) { + enteredState = startState; + + if (log) { Ember.Logger.log("STATEMANAGER: Entering " + get(startState, 'path')); } + startState.fire('enter', stateManager); - var itemTagName = get(view, 'tagName'); - var tagName = (itemTagName === null || itemTagName === undefined) ? Ember.CollectionView.CONTAINER_MAP[get(this, 'tagName')] : itemTagName; + initialState = get(startState, 'initialState'); - set(view, 'tagName', tagName); + if (!initialState) { + initialState = 'start'; + } + } - return view; + set(this, 'currentState', enteredState || state); + }); + }); } }); -/** - @static +})(); - A map of parent tags to their default child tags. You can add - additional parent tags if you want collection views that use - a particular parent tag to default to a child tag. - @type Hash - @constant -*/ -Ember.CollectionView.CONTAINER_MAP = { - ul: 'li', - ol: 'li', - table: 'tr', - thead: 'tr', - tbody: 'tr', - tfoot: 'tr', - tr: 'td', - select: 'option' + +(function() { +var escapeForRegex = function(text) { + return text.replace(/[\-\[\]{}()*+?.,\\\^\$|#\s]/g, "\\$&"); }; -})(); +Ember._RouteMatcher = Ember.Object.extend({ + state: null, + init: function() { + var route = this.route, + identifiers = [], + count = 1, + escaped; + + // Strip off leading slash if present + if (route.charAt(0) === '/') { + route = this.route = route.substr(1); + } + escaped = escapeForRegex(route); -(function() { -// ========================================================================== -// Project: Ember - JavaScript Application Framework -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== + var regex = escaped.replace(/:([a-z_]+)(?=$|\/)/gi, function(match, id) { + identifiers[count++] = id; + return "([^/]+)"; + }); -})(); + this.identifiers = identifiers; + this.regex = new RegExp("^/?" + regex); + }, + match: function(path) { + var match = path.match(this.regex); + if (match) { + var identifiers = this.identifiers, + hash = {}; -(function() { -// ========================================================================== -// Project: Ember - JavaScript Application Framework -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== + for (var i=1, l=identifiers.length; iPeople') + }) - currentState = get(currentState, 'parentState'); - } + PhotoListView = Ember.View.extend({ + classNames: ['my-photos-css-class'], + template: Ember.Handlebars.compile('

Photos

') + }) - return null; - }).property('currentState').cacheable(), + viewStates = Ember.StateManager.create({ + showingPeople: Ember.ViewState.create({ + view: ContactListView + }), + showingPhotos: Ember.ViewState.create({ + view: PhotoListView + }) + }) - send: function(event, context) { - this.sendRecursively(event, get(this, 'currentState'), context); - }, + viewStates.goToState('showingPeople') - sendRecursively: function(event, currentState, context) { - var log = this.enableLogging; + The above code will change the rendered HTML from - var action = currentState[event]; + - if (action) { - if (log) { console.log(fmt("STATEMANAGER: Sending event '%@' to state %@.", [event, get(currentState, 'path')])); } - action.call(currentState, this, context); - } else { - var parentState = get(currentState, 'parentState'); - if (parentState) { - this.sendRecursively(event, parentState, context); - } else if (get(this, 'errorOnUnhandledEvent')) { - throw new Ember.Error(this.toString() + " could not respond to event " + event + " in state " + getPath(this, 'currentState.path') + "."); - } - } - }, + to - findStatesByRoute: function(state, route) { - if (!route || route === "") { return undefined; } - var r = route.split('.'), ret = []; + +
+

People

+
+ - for (var i=0, len = r.length; i < len; i += 1) { - var states = get(state, 'states') ; + Changing the current state via `goToState` from `showingPeople` to + `showingPhotos` will remove the `showingPeople` view and add the `showingPhotos` view: - if (!states) { return undefined; } + viewStates.goToState('showingPhotos') - var s = get(states, r[i]); - if (s) { state = s; ret.push(s); } - else { return undefined; } - } + will change the rendered HTML to - return ret; - }, + +
+

Photos

+
+ - goToState: function(name) { - if (Ember.empty(name)) { return; } - var currentState = get(this, 'currentState') || this, state, newState; + When entering nested `ViewState`s, each state's view will be draw into the the StateManager's + `rootView` or `rootElement` as siblings. - var exitStates = [], enterStates; - state = currentState; + ContactListView = Ember.View.extend({ + classNames: ['my-contacts-css-class'], + template: Ember.Handlebars.compile('

People

') + }) - if (state.routes[name]) { - // cache hit - exitStates = state.routes[name].exitStates; - enterStates = state.routes[name].enterStates; - state = state.routes[name].futureState; - } else { - // cache miss + EditAContactView = Ember.View.extend({ + classNames: ['editing-a-contact-css-class'], + template: Ember.Handlebars.compile('Editing...') + }) - newState = this.findStatesByRoute(currentState, name); + viewStates = Ember.StateManager.create({ + showingPeople: Ember.ViewState.create({ + view: ContactListView, - while (state && !newState) { - exitStates.unshift(state); + withEditingPanel: Ember.ViewState.create({ + view: EditAContactView + }) + }) + }) - state = get(state, 'parentState'); - if (!state) { - newState = this.findStatesByRoute(this, name); - if (!newState) { return; } - } - newState = this.findStatesByRoute(state, name); - } - enterStates = newState.slice(0); - exitStates = exitStates.slice(0); + viewStates.goToState('showingPeople.withEditingPanel') - if (enterStates.length > 0) { - state = enterStates[enterStates.length - 1]; - while (enterStates.length > 0 && enterStates[0] === exitStates[0]) { - enterStates.shift(); - exitStates.shift(); - } - } + Will result in the following rendered HTML: + + +
+

People

+
+ +
+ Editing... +
+ + - currentState.routes[name] = { - exitStates: exitStates, - enterStates: enterStates, - futureState: state - }; - } + ViewState views are added and removed from their StateManager's view via their + `enter` and `exit` methods. If you need to override these methods, be sure to call + `_super` to maintain the adding and removing behavior: - this.enterState(exitStates, enterStates, state); - }, + viewStates = Ember.StateManager.create({ + aState: Ember.ViewState.create({ + view: Ember.View.extend({}), + enter: function(manager, transition){ + // calling _super ensures this view will be + // properly inserted + this._super(manager, transition); - getState: function(name) { - var state = get(this, name), - parentState = get(this, 'parentState'); + // now you can do other things + } + }) + }) + + ## Managing Multiple Sections of A Page With States + Multiple StateManagers can be combined to control multiple areas of an application's rendered views. + Given the following HTML body: + + + +
+
+ + + You could separately manage view state for each section with two StateManagers + + navigationStates = Ember.StateManager.create({ + rootElement: '#sidebar-nav', + userAuthenticated: Em.ViewState.create({ + view: Ember.View.extend({}) + }), + userNotAuthenticated: Em.ViewState.create({ + view: Ember.View.extend({}) + }) + }) + + contentStates = Ember.StateManager.create({ + rootElement: '#content-area', + books: Em.ViewState.create({ + view: Ember.View.extend({}) + }), + music: Em.ViewState.create({ + view: Ember.View.extend({}) + }) + }) - if (state) { - return state; - } else if (parentState) { - return parentState.getState(name); - } - }, - asyncEach: function(list, callback, doneCallback) { - var async = false, self = this; + If you prefer to start with an empty body and manage state programmatically you + can also take advantage of StateManager's `rootView` property and the ability of + `Ember.ContainerView`s to manually manage their child views. - if (!list.length) { - if (doneCallback) { doneCallback.call(this); } - return; - } - var head = list[0]; - var tail = list.slice(1); + dashboard = Ember.ContainerView.create({ + childViews: ['navigationAreaView', 'contentAreaView'], + navigationAreaView: Ember.ContainerView.create({}), + contentAreaView: Ember.ContainerView.create({}) + }) - var transition = { - async: function() { async = true; }, - resume: function() { - self.asyncEach(tail, callback, doneCallback); - } - }; + navigationStates = Ember.StateManager.create({ + rootView: dashboard.get('navigationAreaView'), + userAuthenticated: Em.ViewState.create({ + view: Ember.View.extend({}) + }), + userNotAuthenticated: Em.ViewState.create({ + view: Ember.View.extend({}) + }) + }) + + contentStates = Ember.StateManager.create({ + rootView: dashboard.get('contentAreaView'), + books: Em.ViewState.create({ + view: Ember.View.extend({}) + }), + music: Em.ViewState.create({ + view: Ember.View.extend({}) + }) + }) - callback.call(this, head, transition); + dashboard.appendTo('body') - if (!async) { transition.resume(); } - }, + ## User Manipulation of State via `{{action}}` Helpers + The Handlebars `{{action}}` helper is StateManager-aware and will use StateManager action sending + to connect user interaction to action-based state transitions. - enterState: function(exitStates, enterStates, state) { - var log = this.enableLogging; + Given the following body and handlebars template - var stateManager = this; + + + - exitStates = exitStates.slice(0).reverse(); - this.asyncEach(exitStates, function(state, transition) { - state.exit(stateManager, transition); - }, function() { - this.asyncEach(enterStates, function(state, transition) { - if (log) { console.log("STATEMANAGER: Entering " + get(state, 'path')); } - state.enter(stateManager, transition); - }, function() { - var startState = state, enteredState, initialState; + And application code - initialState = get(startState, 'initialState'); + App = Ember.Application.create() + App.appStates = Ember.StateManager.create({ + initialState: 'aState', + aState: Ember.State.create({ + anAction: function(manager, context){} + }), + bState: Ember.State.create({}) + }) - if (!initialState) { - initialState = 'start'; - } + A user initiated click or touch event on "Go" will trigger the 'anAction' method of + `App.appStates.aState` with `App.appStates` as the first argument and a + `jQuery.Event` object as the second object. The `jQuery.Event` will include a property + `view` that references the `Ember.View` object that was interacted with. + +**/ +Ember.StateManager.reopen( +/** @scope Ember.StateManager.prototype */ { - // right now, start states cannot be entered asynchronously - while (startState = get(get(startState, 'states'), initialState)) { - enteredState = startState; + /** + If the current state is a view state or the descendent of a view state, + this property will be the view associated with it. If there is no + view state active in this state manager, this value will be null. + + @property + */ + currentView: Ember.computed(function() { + var currentState = get(this, 'currentState'), + view; - if (log) { console.log("STATEMANAGER: Entering " + get(startState, 'path')); } - startState.enter(stateManager); + while (currentState) { + if (get(currentState, 'isViewState')) { + view = get(currentState, 'view'); + if (view) { return view; } + } - initialState = get(startState, 'initialState'); + currentState = get(currentState, 'parentState'); + } - if (!initialState) { - initialState = 'start'; - } - } + return null; + }).property('currentState').cacheable() - set(this, 'currentState', enteredState || state); - }); - }); - } }); })(); @@ -15028,7 +17024,7 @@ Ember.ViewState = Ember.State.extend({ set(this, 'view', view); } - ember_assert('view must be an Ember.View', view instanceof Ember.View); + Ember.assert('view must be an Ember.View', view instanceof Ember.View); root = stateManager.get('rootView'); @@ -15256,7 +17252,7 @@ Ember.ViewState = Ember.State.extend({ var shyElement = element; // Sometimes we get nameless elements with the shy inside - while (shyElement.nodeType === 1 && !shyElement.nodeName && shyElement.childNodes.length === 1) { + while (shyElement.nodeType === 1 && !shyElement.nodeName) { shyElement = shyElement.firstChild; } @@ -15506,19 +17502,8 @@ Ember.ViewState = Ember.State.extend({ Ember's get() method instead of direct property access, which allows computed properties to be used inside templates. - To use Ember.Handlebars, call Ember.Handlebars.compile(). This will return a - function that you can call multiple times, with a context object as the first - parameter: - - var template = Ember.Handlebars.compile("my {{cool}} template"); - var result = template({ - cool: "awesome" - }); - - console.log(result); // prints "my awesome template" - - Note that you won't usually need to use Ember.Handlebars yourself. Instead, use - Ember.View, which takes care of integration into the view layer for you. + To create an Ember.Handlebars template, call Ember.Handlebars.compile(). This will + return a function that can be used by Ember.View for rendering. */ Ember.Handlebars = Ember.create(Handlebars); @@ -15606,14 +17591,63 @@ Ember.Handlebars.compile = function(string) { }; /** - Lookup both on root and on window + If a path starts with a reserved keyword, returns the root + that should be used. + + @private +*/ +var normalizePath = Ember.Handlebars.normalizePath = function(root, path, data) { + var keywords = (data && data.keywords) || {}, + keyword, isKeyword; + + // Get the first segment of the path. For example, if the + // path is "foo.bar.baz", returns "foo". + keyword = path.split('.', 1)[0]; + + // Test to see if the first path is a keyword that has been + // passed along in the view's data hash. If so, we will treat + // that object as the new root. + if (keywords.hasOwnProperty(keyword)) { + // Look up the value in the template's data hash. + root = keywords[keyword]; + isKeyword = true; + + // Handle cases where the entire path is the reserved + // word. In that case, return the object itself. + if (path === keyword) { + path = ''; + } else { + // Strip the keyword from the path and look up + // the remainder from the newly found root. + path = path.substr(keyword.length); + } + } + + return { root: root, path: path, isKeyword: isKeyword }; +}; +/** + Lookup both on root and on window. If the path starts with + a keyword, the corresponding object will be looked up in the + template's data hash and used to resolve the path. @param {Object} root The object to look up the property on @param {String} path The path to be lookedup + @param {Object} options The template's option hash */ -Ember.Handlebars.getPath = function(root, path) { - // TODO: Remove this `false` when the `getPath` globals support is removed - var value = Ember.getPath(root, path, false); + +Ember.Handlebars.getPath = function(root, path, options) { + var data = options && options.data, + normalizedPath = normalizePath(root, path, data), + value; + + // In cases where the path begins with a keyword, change the + // root to the value represented by that keyword, and ensure + // the path is relative to it. + root = normalizedPath.root; + path = normalizedPath.path; + + value = Ember.getPath(root, path); + if (value === undefined && root !== window && Ember.isGlobalPath(path)) { value = Ember.getPath(window, path); } @@ -15647,6 +17681,29 @@ Ember.Handlebars.registerHelper('helperMissing', function(path, options) { +(function() { + +Ember.String.htmlSafe = function(str) { + return new Handlebars.SafeString(str); +}; + +var htmlSafe = Ember.String.htmlSafe; + +if (Ember.EXTEND_PROTOTYPES) { + + /** + @see Ember.String.htmlSafe + */ + String.prototype.htmlSafe = function() { + return htmlSafe(this); + }; + +} + +})(); + + + (function() { /*jshint newcap:false*/ var set = Ember.set, get = Ember.get, getPath = Ember.getPath; @@ -15655,6 +17712,8 @@ var DOMManager = { remove: function(view) { var morph = view.morph; if (morph.isRemoved()) { return; } + set(view, 'element', null); + view._lastInsert = null; morph.remove(); }, @@ -15699,7 +17758,7 @@ var DOMManager = { // The `morph` and `outerHTML` properties are internal only // and not observable. -Ember.Metamorph = Ember.Mixin.create({ +Ember._Metamorph = Ember.Mixin.create({ isVirtual: true, tagName: '', @@ -15725,6 +17784,8 @@ Ember.Metamorph = Ember.Mixin.create({ domManager: DOMManager }); +Ember._MetamorphView = Ember.View.extend(Ember._Metamorph); + })(); @@ -15744,16 +17805,16 @@ var get = Ember.get, set = Ember.set, getPath = Ember.Handlebars.getPath; @private @class - Ember._BindableSpanView is a private view created by the Handlebars `{{bind}}` + Ember._HandlebarsBoundView is a private view created by the Handlebars `{{bind}}` helpers that is used to keep track of bound properties. Every time a property is bound using a `{{mustache}}`, an anonymous subclass - of Ember._BindableSpanView is created with the appropriate sub-template and + of Ember._HandlebarsBoundView is created with the appropriate sub-template and context set up. When the associated property changes, just the template for this view will re-render. */ -Ember._BindableSpanView = Ember.View.extend(Ember.Metamorph, -/** @scope Ember._BindableSpanView.prototype */{ +Ember._HandlebarsBoundView = Ember._MetamorphView.extend({ +/** @scope Ember._HandlebarsBoundView.prototype */ /** The function used to determine if the `displayTemplate` or @@ -15767,8 +17828,8 @@ Ember._BindableSpanView = Ember.View.extend(Ember.Metamorph, /** Whether the template rendered by this view gets passed the context object - of its parent template, or gets passed the value of retrieving `property` - from the previous context. + of its parent template, or gets passed the value of retrieving `path` + from the `pathRoot`. For example, this is true when using the `{{#if}}` helper, because the template inside the helper should look up properties relative to the same @@ -15781,6 +17842,14 @@ Ember._BindableSpanView = Ember.View.extend(Ember.Metamorph, */ preserveContext: false, + /** + If `preserveContext` is true, this is the object that will be used + to render the template. + + @type Object + */ + previousContext: null, + /** The template to render when `shouldDisplayFunc` evaluates to true. @@ -15797,34 +17866,48 @@ Ember._BindableSpanView = Ember.View.extend(Ember.Metamorph, */ inverseTemplate: null, + /** - The key to look up on `previousContext` that is passed to + The path to look up on `pathRoot` that is passed to `shouldDisplayFunc` to determine which template to render. - In addition, if `preserveContext` is false, this object will be passed to - the template when rendering. + In addition, if `preserveContext` is false, the object at this path will + be passed to the template when rendering. @type String @default null */ - property: null, + path: null, + + /** + The object from which the `path` will be looked up. Sometimes this is the + same as the `previousContext`, but in cases where this view has been generated + for paths that start with a keyword such as `view` or `controller`, the + path root will be that resolved object. + + @type Object + */ + pathRoot: null, normalizedValue: Ember.computed(function() { - var property = get(this, 'property'), - context = get(this, 'previousContext'), + var path = get(this, 'path'), + pathRoot = get(this, 'pathRoot'), valueNormalizer = get(this, 'valueNormalizerFunc'), - result; - - // Use the current context as the result if no - // property is provided. - if (property === '') { - result = context; + result, templateData; + + // Use the pathRoot as the result if no path is provided. This + // happens if the path is `this`, which gets normalized into + // a `pathRoot` of the current Handlebars context and a path + // of `''`. + if (path === '') { + result = pathRoot; } else { - result = getPath(context, property); + templateData = get(this, 'templateData'); + result = getPath(pathRoot, path, { data: templateData }); } return valueNormalizer ? valueNormalizer(result) : result; - }).property('property', 'previousContext', 'valueNormalizerFunc'), + }).property('path', 'pathRoot', 'valueNormalizerFunc').volatile(), rerenderIfNeeded: function() { if (!get(this, 'isDestroyed') && get(this, 'normalizedValue') !== this._lastNormalizedValue) { @@ -15836,7 +17919,7 @@ Ember._BindableSpanView = Ember.View.extend(Ember.Metamorph, Determines which template to invoke, sets up the correct state based on that logic, then invokes the default Ember.View `render` implementation. - This method will first look up the `property` key on `previousContext`, + This method will first look up the `path` key on `pathRoot`, then pass that value to the `shouldDisplayFunc` function. If that returns true, the `displayTemplate` function will be rendered to DOM. Otherwise, `inverseTemplate`, if specified, will be rendered. @@ -15882,7 +17965,7 @@ Ember._BindableSpanView = Ember.View.extend(Ember.Metamorph, // expression to the render context and return. if (result === null || result === undefined) { result = ""; - } else { + } else if (!(result instanceof Handlebars.SafeString)) { result = String(result); } @@ -15917,139 +18000,147 @@ Ember._BindableSpanView = Ember.View.extend(Ember.Metamorph, // Copyright: ©2011 Strobe Inc. and contributors. // License: Licensed under MIT license (see license.js) // ========================================================================== -var get = Ember.get, getPath = Ember.Handlebars.getPath, set = Ember.set, fmt = Ember.String.fmt; +var get = Ember.get, set = Ember.set, fmt = Ember.String.fmt; +var getPath = Ember.Handlebars.getPath, normalizePath = Ember.Handlebars.normalizePath; var forEach = Ember.ArrayUtils.forEach; var EmberHandlebars = Ember.Handlebars, helpers = EmberHandlebars.helpers; -(function() { - // Binds a property into the DOM. This will create a hook in DOM that the - // KVO system will look for and update if the property changes. - var bind = function(property, options, preserveContext, shouldDisplay, valueNormalizer) { - var data = options.data, - fn = options.fn, - inverse = options.inverse, - view = data.view, - ctx = this; - - // Set up observers for observable objects - if ('object' === typeof this) { - // Create the view that will wrap the output of this template/property - // and add it to the nearest view's childViews array. - // See the documentation of Ember._BindableSpanView for more. - var bindView = view.createChildView(Ember._BindableSpanView, { - preserveContext: preserveContext, - shouldDisplayFunc: shouldDisplay, - valueNormalizerFunc: valueNormalizer, - displayTemplate: fn, - inverseTemplate: inverse, - property: property, - previousContext: ctx, - isEscaped: options.hash.escaped - }); +// Binds a property into the DOM. This will create a hook in DOM that the +// KVO system will look for and update if the property changes. +/** @private */ +var bind = function(property, options, preserveContext, shouldDisplay, valueNormalizer) { + var data = options.data, + fn = options.fn, + inverse = options.inverse, + view = data.view, + currentContext = this, + pathRoot, path, normalized; + + normalized = normalizePath(currentContext, property, data); + + pathRoot = normalized.root; + path = normalized.path; + + // Set up observers for observable objects + if ('object' === typeof this) { + // Create the view that will wrap the output of this template/property + // and add it to the nearest view's childViews array. + // See the documentation of Ember._HandlebarsBoundView for more. + var bindView = view.createChildView(Ember._HandlebarsBoundView, { + preserveContext: preserveContext, + shouldDisplayFunc: shouldDisplay, + valueNormalizerFunc: valueNormalizer, + displayTemplate: fn, + inverseTemplate: inverse, + path: path, + pathRoot: pathRoot, + previousContext: currentContext, + isEscaped: options.hash.escaped, + templateData: options.data + }); - view.appendChild(bindView); + view.appendChild(bindView); - /** @private */ - var observer = function() { - Ember.run.once(bindView, 'rerenderIfNeeded'); - }; + /** @private */ + var observer = function() { + Ember.run.once(bindView, 'rerenderIfNeeded'); + }; - // Observes the given property on the context and - // tells the Ember._BindableSpan to re-render. If property - // is an empty string, we are printing the current context - // object ({{this}}) so updating it is not our responsibility. - if (property !== '') { - Ember.addObserver(ctx, property, observer); - } - } else { - // The object is not observable, so just render it out and - // be done with it. - data.buffer.push(getPath(this, property)); + // Observes the given property on the context and + // tells the Ember._BindableSpan to re-render. If property + // is an empty string, we are printing the current context + // object ({{this}}) so updating it is not our responsibility. + if (path !== '') { + Ember.addObserver(pathRoot, path, observer); } - }; + } else { + // The object is not observable, so just render it out and + // be done with it. + data.buffer.push(getPath(pathRoot, path, options)); + } +}; - /** - '_triageMustache' is used internally select between a binding and helper for - the given context. Until this point, it would be hard to determine if the - mustache is a property reference or a regular helper reference. This triage - helper resolves that. +/** + '_triageMustache' is used internally select between a binding and helper for + the given context. Until this point, it would be hard to determine if the + mustache is a property reference or a regular helper reference. This triage + helper resolves that. - This would not be typically invoked by directly. + This would not be typically invoked by directly. - @private - @name Handlebars.helpers._triageMustache - @param {String} property Property/helperID to triage - @param {Function} fn Context to provide for rendering - @returns {String} HTML string - */ - EmberHandlebars.registerHelper('_triageMustache', function(property, fn) { - ember_assert("You cannot pass more than one argument to the _triageMustache helper", arguments.length <= 2); - if (helpers[property]) { - return helpers[property].call(this, fn); - } - else { - return helpers.bind.apply(this, arguments); - } - }); + @private + @name Handlebars.helpers._triageMustache + @param {String} property Property/helperID to triage + @param {Function} fn Context to provide for rendering + @returns {String} HTML string +*/ +EmberHandlebars.registerHelper('_triageMustache', function(property, fn) { + Ember.assert("You cannot pass more than one argument to the _triageMustache helper", arguments.length <= 2); + if (helpers[property]) { + return helpers[property].call(this, fn); + } + else { + return helpers.bind.apply(this, arguments); + } +}); - /** - `bind` can be used to display a value, then update that value if it - changes. For example, if you wanted to print the `title` property of - `content`: +/** + `bind` can be used to display a value, then update that value if it + changes. For example, if you wanted to print the `title` property of + `content`: - {{bind "content.title"}} + {{bind "content.title"}} - This will return the `title` property as a string, then create a new - observer at the specified path. If it changes, it will update the value in - DOM. Note that if you need to support IE7 and IE8 you must modify the - model objects properties using Ember.get() and Ember.set() for this to work as - it relies on Ember's KVO system. For all other browsers this will be handled - for you automatically. + This will return the `title` property as a string, then create a new + observer at the specified path. If it changes, it will update the value in + DOM. Note that if you need to support IE7 and IE8 you must modify the + model objects properties using Ember.get() and Ember.set() for this to work as + it relies on Ember's KVO system. For all other browsers this will be handled + for you automatically. - @private - @name Handlebars.helpers.bind - @param {String} property Property to bind - @param {Function} fn Context to provide for rendering - @returns {String} HTML string - */ - EmberHandlebars.registerHelper('bind', function(property, fn) { - ember_assert("You cannot pass more than one argument to the bind helper", arguments.length <= 2); + @private + @name Handlebars.helpers.bind + @param {String} property Property to bind + @param {Function} fn Context to provide for rendering + @returns {String} HTML string +*/ +EmberHandlebars.registerHelper('bind', function(property, fn) { + Ember.assert("You cannot pass more than one argument to the bind helper", arguments.length <= 2); - var context = (fn.contexts && fn.contexts[0]) || this; + var context = (fn.contexts && fn.contexts[0]) || this; - return bind.call(context, property, fn, false, function(result) { - return !Ember.none(result); - }); + return bind.call(context, property, fn, false, function(result) { + return !Ember.none(result); }); +}); - /** - Use the `boundIf` helper to create a conditional that re-evaluates - whenever the bound value changes. +/** + Use the `boundIf` helper to create a conditional that re-evaluates + whenever the bound value changes. - {{#boundIf "content.shouldDisplayTitle"}} - {{content.title}} - {{/boundIf}} + {{#boundIf "content.shouldDisplayTitle"}} + {{content.title}} + {{/boundIf}} - @private - @name Handlebars.helpers.boundIf - @param {String} property Property to bind - @param {Function} fn Context to provide for rendering - @returns {String} HTML string - */ - EmberHandlebars.registerHelper('boundIf', function(property, fn) { - var context = (fn.contexts && fn.contexts[0]) || this; - var func = function(result) { - if (Ember.typeOf(result) === 'array') { - return get(result, 'length') !== 0; - } else { - return !!result; - } - }; + @private + @name Handlebars.helpers.boundIf + @param {String} property Property to bind + @param {Function} fn Context to provide for rendering + @returns {String} HTML string +*/ +EmberHandlebars.registerHelper('boundIf', function(property, fn) { + var context = (fn.contexts && fn.contexts[0]) || this; + var func = function(result) { + if (Ember.typeOf(result) === 'array') { + return get(result, 'length') !== 0; + } else { + return !!result; + } + }; - return bind.call(context, property, fn, true, func, func); - }); -})(); + return bind.call(context, property, fn, true, func, func); +}); /** @name Handlebars.helpers.with @@ -16058,10 +18149,30 @@ var EmberHandlebars = Ember.Handlebars, helpers = EmberHandlebars.helpers; @returns {String} HTML string */ EmberHandlebars.registerHelper('with', function(context, options) { - ember_assert("You must pass exactly one argument to the with helper", arguments.length === 2); - ember_assert("You must pass a block to the with helper", options.fn && options.fn !== Handlebars.VM.noop); + if (arguments.length === 4) { + var keywordName, path; - return helpers.bind.call(options.contexts[0], context, options); + Ember.assert("If you pass more than one argument to the with helper, it must be in the form #with foo as bar", arguments[1] === "as"); + options = arguments[3]; + keywordName = arguments[2]; + path = arguments[0]; + + Ember.assert("You must pass a block to the with helper", options.fn && options.fn !== Handlebars.VM.noop); + + // This is a workaround for the fact that you cannot bind separate objects + // together. When we implement that functionality, we should use it here. + var contextKey = Ember.$.expando + Ember.guidFor(this); + options.data.keywords[contextKey] = this; + Ember.bind(options.data.keywords, keywordName, contextKey + '.' + path); + + return bind.call(this, path, options.fn, true, function(result) { + return !Ember.none(result); + }); + } else { + Ember.assert("You must pass exactly one argument to the with helper", arguments.length === 2); + Ember.assert("You must pass a block to the with helper", options.fn && options.fn !== Handlebars.VM.noop); + return helpers.bind.call(options.contexts[0], context, options); + } }); @@ -16072,8 +18183,8 @@ EmberHandlebars.registerHelper('with', function(context, options) { @returns {String} HTML string */ EmberHandlebars.registerHelper('if', function(context, options) { - ember_assert("You must pass exactly one argument to the if helper", arguments.length === 2); - ember_assert("You must pass a block to the if helper", options.fn && options.fn !== Handlebars.VM.noop); + Ember.assert("You must pass exactly one argument to the if helper", arguments.length === 2); + Ember.assert("You must pass a block to the if helper", options.fn && options.fn !== Handlebars.VM.noop); return helpers.boundIf.call(options.contexts[0], context, options); }); @@ -16085,8 +18196,8 @@ EmberHandlebars.registerHelper('if', function(context, options) { @returns {String} HTML string */ EmberHandlebars.registerHelper('unless', function(context, options) { - ember_assert("You must pass exactly one argument to the unless helper", arguments.length === 2); - ember_assert("You must pass a block to the unless helper", options.fn && options.fn !== Handlebars.VM.noop); + Ember.assert("You must pass exactly one argument to the unless helper", arguments.length === 2); + Ember.assert("You must pass a block to the unless helper", options.fn && options.fn !== Handlebars.VM.noop); var fn = options.fn, inverse = options.inverse; @@ -16110,7 +18221,7 @@ EmberHandlebars.registerHelper('bindAttr', function(options) { var attrs = options.hash; - ember_assert("You must specify at least one hash argument to bindAttr", !!Ember.keys(attrs).length); + Ember.assert("You must specify at least one hash argument to bindAttr", !!Ember.keys(attrs).length); var view = options.data.view; var ret = []; @@ -16124,8 +18235,8 @@ EmberHandlebars.registerHelper('bindAttr', function(options) { // Handle classes differently, as we can bind multiple classes var classBindings = attrs['class']; if (classBindings !== null && classBindings !== undefined) { - var classResults = EmberHandlebars.bindClasses(this, classBindings, view, dataId); - ret.push('class="' + classResults.join(' ') + '"'); + var classResults = EmberHandlebars.bindClasses(this, classBindings, view, dataId, options); + ret.push('class="' + Handlebars.Utils.escapeExpression(classResults.join(' ')) + '"'); delete attrs['class']; } @@ -16134,22 +18245,28 @@ EmberHandlebars.registerHelper('bindAttr', function(options) { // For each attribute passed, create an observer and emit the // current value of the property as an attribute. forEach(attrKeys, function(attr) { - var property = attrs[attr]; + var path = attrs[attr], + pathRoot, normalized; + + Ember.assert(fmt("You must provide a String for a bound attribute, not %@", [path]), typeof path === 'string'); - ember_assert(fmt("You must provide a String for a bound attribute, not %@", [property]), typeof property === 'string'); + normalized = normalizePath(ctx, path, options.data); - var value = (property === 'this') ? ctx : getPath(ctx, property), + pathRoot = normalized.root; + path = normalized.path; + + var value = (path === 'this') ? pathRoot : getPath(pathRoot, path, options), type = Ember.typeOf(value); - ember_assert(fmt("Attributes must be numbers, strings or booleans, not %@", [value]), value === null || value === undefined || type === 'number' || type === 'string' || type === 'boolean'); + Ember.assert(fmt("Attributes must be numbers, strings or booleans, not %@", [value]), value === null || value === undefined || type === 'number' || type === 'string' || type === 'boolean'); var observer, invoker; /** @private */ observer = function observer() { - var result = getPath(ctx, property); + var result = getPath(pathRoot, path, options); - ember_assert(fmt("Attributes must be numbers, strings or booleans, not %@", [result]), result === null || result === undefined || typeof result === 'number' || typeof result === 'string' || typeof result === 'boolean'); + Ember.assert(fmt("Attributes must be numbers, strings or booleans, not %@", [result]), result === null || result === undefined || typeof result === 'number' || typeof result === 'string' || typeof result === 'boolean'); var elem = view.$("[data-bindattr-" + dataId + "='" + dataId + "']"); @@ -16158,7 +18275,7 @@ EmberHandlebars.registerHelper('bindAttr', function(options) { // In that case, we can assume the template has been re-rendered // and we need to clean up the observer. if (elem.length === 0) { - Ember.removeObserver(ctx, property, invoker); + Ember.removeObserver(pathRoot, path, invoker); return; } @@ -16173,14 +18290,15 @@ EmberHandlebars.registerHelper('bindAttr', function(options) { // Add an observer to the view for when the property changes. // When the observer fires, find the element using the // unique data id and update the attribute to the new value. - if (property !== 'this') { - Ember.addObserver(ctx, property, invoker); + if (path !== 'this') { + Ember.addObserver(pathRoot, path, invoker); } // if this changes, also change the logic in ember-views/lib/views/view.js if ((type === 'string' || (type === 'number' && !isNaN(value)))) { - ret.push(attr + '="' + value + '"'); + ret.push(attr + '="' + Handlebars.Utils.escapeExpression(value) + '"'); } else if (value && type === 'boolean') { + // The developer controls the attr name, so it should always be safe ret.push(attr + '="' + attr + '"'); } }, this); @@ -16217,29 +18335,27 @@ EmberHandlebars.registerHelper('bindAttr', function(options) { @returns {Array} An array of class names to add */ -EmberHandlebars.bindClasses = function(context, classBindings, view, bindAttrId) { +EmberHandlebars.bindClasses = function(context, classBindings, view, bindAttrId, options) { var ret = [], newClass, value, elem; // Helper method to retrieve the property from the context and // determine which class string to return, based on whether it is // a Boolean or not. - var classStringForProperty = function(property) { - var split = property.split(':'), - className = split[1]; + var classStringForPath = function(root, path, className, options) { + var val = path !== '' ? getPath(root, path, options) : true; - property = split[0]; - - var val = property !== '' ? getPath(context, property) : true; + // If the value is truthy and we're using the colon syntax, + // we should return the className directly + if (!!val && className) { + return className; // If value is a Boolean and true, return the dasherized property // name. - if (val === true) { - if (className) { return className; } - + } else if (val === true) { // Normalize property path to be suitable for use // as a class name. For exaple, content.foo.barBaz // becomes bar-baz. - var parts = property.split('.'); + var parts = path.split('.'); return Ember.String.dasherize(parts[parts.length-1]); // If the value is not false, undefined, or null, return the current @@ -16265,18 +18381,31 @@ EmberHandlebars.bindClasses = function(context, classBindings, view, bindAttrId) var observer, invoker; + var split = binding.split(':'), + path = split[0], + className = split[1], + pathRoot = context, + normalized; + + if (path !== '') { + normalized = normalizePath(context, path, options.data); + + pathRoot = normalized.root; + path = normalized.path; + } + // Set up an observer on the context. If the property changes, toggle the // class name. /** @private */ observer = function() { // Get the current value of the property - newClass = classStringForProperty(binding); + newClass = classStringForPath(pathRoot, path, className, options); elem = bindAttrId ? view.$("[data-bindattr-" + bindAttrId + "='" + bindAttrId + "']") : view.$(); // If we can't find the element anymore, a parent template has been // re-rendered and we've been nuked. Remove the observer. if (elem.length === 0) { - Ember.removeObserver(context, binding, invoker); + Ember.removeObserver(pathRoot, path, invoker); } else { // If we had previously added a class to the element, remove it. if (oldClass) { @@ -16299,14 +18428,13 @@ EmberHandlebars.bindClasses = function(context, classBindings, view, bindAttrId) Ember.run.once(observer); }; - var property = binding.split(':')[0]; - if (property !== '') { - Ember.addObserver(context, property, invoker); + if (path !== '') { + Ember.addObserver(pathRoot, path, invoker); } // We've already setup the observer; now we just need to figure out the // correct behavior right now on the first pass through. - value = classStringForProperty(binding); + value = classStringForPath(pathRoot, path, className, options); if (value) { ret.push(value); @@ -16331,23 +18459,25 @@ EmberHandlebars.bindClasses = function(context, classBindings, view, bindAttrId) // Copyright: ©2011 Strobe Inc. and contributors. // License: Licensed under MIT license (see license.js) // ========================================================================== -/*globals Handlebars ember_assert */ +/*globals Handlebars */ // TODO: Don't require the entire module var get = Ember.get, set = Ember.set; var indexOf = Ember.ArrayUtils.indexOf; var PARENT_VIEW_PATH = /^parentView\./; +var EmberHandlebars = Ember.Handlebars; /** @private */ -Ember.Handlebars.ViewHelper = Ember.Object.create({ +EmberHandlebars.ViewHelper = Ember.Object.create({ viewClassFromHTMLOptions: function(viewClass, options, thisContext) { + var hash = options.hash, data = options.data; var extensions = {}, - classes = options['class'], + classes = hash['class'], dup = false; - if (options.id) { - extensions.elementId = options.id; + if (hash.id) { + extensions.elementId = hash.id; dup = true; } @@ -16357,45 +18487,49 @@ Ember.Handlebars.ViewHelper = Ember.Object.create({ dup = true; } - if (options.classBinding) { - extensions.classNameBindings = options.classBinding.split(' '); + if (hash.classBinding) { + extensions.classNameBindings = hash.classBinding.split(' '); dup = true; } - if (options.classNameBindings) { - extensions.classNameBindings = options.classNameBindings.split(' '); + if (hash.classNameBindings) { + extensions.classNameBindings = hash.classNameBindings.split(' '); dup = true; } - if (options.attributeBindings) { - ember_assert("Setting 'attributeBindings' via Handlebars is not allowed. Please subclass Ember.View and set it there instead."); + if (hash.attributeBindings) { + Ember.assert("Setting 'attributeBindings' via Handlebars is not allowed. Please subclass Ember.View and set it there instead."); extensions.attributeBindings = null; dup = true; } if (dup) { - options = Ember.$.extend({}, options); - delete options.id; - delete options['class']; - delete options.classBinding; + hash = Ember.$.extend({}, hash); + delete hash.id; + delete hash['class']; + delete hash.classBinding; } // Look for bindings passed to the helper and, if they are // local, make them relative to the current context instead of the // view. - var path; + var path, normalized; - for (var prop in options) { - if (!options.hasOwnProperty(prop)) { continue; } + for (var prop in hash) { + if (!hash.hasOwnProperty(prop)) { continue; } // Test if the property ends in "Binding" if (Ember.IS_BINDING.test(prop)) { - path = options[prop]; - if (!Ember.isGlobalPath(path)) { + path = hash[prop]; + + normalized = Ember.Handlebars.normalizePath(null, path, data); + if (normalized.isKeyword) { + hash[prop] = 'templateData.keywords.'+path; + } else if (!Ember.isGlobalPath(path)) { if (path === 'this') { - options[prop] = 'bindingContext'; + hash[prop] = 'bindingContext'; } else { - options[prop] = 'bindingContext.'+path; + hash[prop] = 'bindingContext.'+path; } } } @@ -16405,7 +18539,7 @@ Ember.Handlebars.ViewHelper = Ember.Object.create({ // for the bindings set up above. extensions.bindingContext = thisContext; - return viewClass.extend(options, extensions); + return viewClass.extend(hash, extensions); }, helper: function(thisContext, path, options) { @@ -16417,20 +18551,22 @@ Ember.Handlebars.ViewHelper = Ember.Object.create({ newView; if ('string' === typeof path) { - newView = Ember.Handlebars.getPath(thisContext, path); - ember_assert("Unable to find view at path '" + path + "'", !!newView); + newView = EmberHandlebars.getPath(thisContext, path, options); + Ember.assert("Unable to find view at path '" + path + "'", !!newView); } else { newView = path; } - ember_assert(Ember.String.fmt('You must pass a view class to the #view helper, not %@ (%@)', [path, newView]), Ember.View.detect(newView)); + Ember.assert(Ember.String.fmt('You must pass a view class to the #view helper, not %@ (%@)', [path, newView]), Ember.View.detect(newView)); - newView = this.viewClassFromHTMLOptions(newView, hash, thisContext); + newView = this.viewClassFromHTMLOptions(newView, options, thisContext); var currentView = data.view; - var viewOptions = {}; + var viewOptions = { + templateData: options.data + }; if (fn) { - ember_assert("You cannot provide a template block if you also specified a templateName", !(get(viewOptions, 'templateName')) && (indexOf(newView.PrototypeMixin.keys(), 'templateName') >= 0)); + Ember.assert("You cannot provide a template block if you also specified a templateName", !get(viewOptions, 'templateName') && !get(newView.proto(), 'templateName')); viewOptions.template = fn; } @@ -16439,13 +18575,151 @@ Ember.Handlebars.ViewHelper = Ember.Object.create({ }); /** + `{{view}}` inserts a new instance of `Ember.View` into a template passing its options + to the `Ember.View`'s `create` method and using the supplied block as the view's own template. + + An empty `` and the following template: + + + + Will result in HTML structure: + + + + +
+ A span: + + Hello. + +
+ + + ### parentView setting + + The `parentView` property of the new `Ember.View` instance created through `{{view}}` + will be set to the `Ember.View` instance of the template where `{{view}}` was called. + + aView = Ember.View.create({ + template: Ember.Handlebars.compile("{{#view}} my parent: {{parentView.elementId}} {{/view}}") + }) + + aView.appendTo('body') + + Will result in HTML structure: + +
+
+ my parent: ember1 +
+
+ + ### Setting CSS id and class attributes + + The HTML `id` attribute can be set on the `{{view}}`'s resulting element with the `id` option. + This option will _not_ be passed to `Ember.View.create`. + + + + Results in the following HTML structure: + +
+ + hello. + +
+ + The HTML `class` attribute can be set on the `{{view}}`'s resulting element with + the `class` or `classNameBindings` options. The `class` option + will directly set the CSS `class` attribute and will not be passed to + `Ember.View.create`. `classNameBindings` will be passed to `create` and use + `Ember.View`'s class name binding functionality: + + + + Results in the following HTML structure: + +
+ + hello. + +
+ + ### Supplying a different view class + `{{view}}` can take an optional first argument before its supplied options to specify a + path to a custom view class. + + + + The first argument can also be a relative path. Ember will search for the view class + starting at the `Ember.View` of the template where `{{view}}` was used as the root object: + + MyApp = Ember.Application.create({}) + MyApp.OuterView = Ember.View.extend({ + innerViewClass: Ember.View.extend({ + classNames: ['a-custom-view-class-as-property'] + }), + template: Ember.Handlebars.compile('{{#view "innerViewClass"}} hi {{/view}}') + }) + + MyApp.OuterView.create().appendTo('body') + +Will result in the following HTML: + +
+
+ hi +
+
+ + ### Blockless use + + If you supply a custom `Ember.View` subclass that specifies its own template + or provide a `templateName` option to `{{view}}` it can be used without supplying a block. + Attempts to use both a `templateName` option and supply a block will throw an error. + + + + ### viewName property + + You can supply a `viewName` option to `{{view}}`. The `Ember.View` instance will + be referenced as a property of its parent view by this name. + + aView = Ember.View.create({ + template: Ember.Handlebars.compile('{{#view viewName="aChildByName"}} hi {{/view}}') + }) + + aView.appendTo('body') + aView.get('aChildByName') // the instance of Ember.View created by {{view}} helper + @name Handlebars.helpers.view @param {String} path @param {Hash} options @returns {String} HTML string */ -Ember.Handlebars.registerHelper('view', function(path, options) { - ember_assert("The view helper only takes a single argument", arguments.length <= 2); +EmberHandlebars.registerHelper('view', function(path, options) { + Ember.assert("The view helper only takes a single argument", arguments.length <= 2); // If no path is provided, treat path param as options. if (path && path.data && path.data.isRenderData) { @@ -16453,7 +18727,7 @@ Ember.Handlebars.registerHelper('view', function(path, options) { path = "Ember.View"; } - return Ember.Handlebars.ViewHelper.helper(this, path, options); + return EmberHandlebars.ViewHelper.helper(this, path, options); }); @@ -16467,12 +18741,112 @@ Ember.Handlebars.registerHelper('view', function(path, options) { // Copyright: ©2011 Strobe Inc. and contributors. // License: Licensed under MIT license (see license.js) // ========================================================================== -/*globals Handlebars ember_assert */ +/*globals Handlebars */ // TODO: Don't require all of this module var get = Ember.get, getPath = Ember.Handlebars.getPath, fmt = Ember.String.fmt; /** + `{{collection}}` is a `Ember.Handlebars` helper for adding instances of + `Ember.CollectionView` to a template. See `Ember.CollectionView` for additional + information on how a `CollectionView` functions. + + `{{collection}}`'s primary use is as a block helper with a `contentBinding` option + pointing towards an `Ember.Array`-compatible object. An `Ember.View` instance will + be created for each item in its `content` property. Each view will have its own + `content` property set to the appropriate item in the collection. + + The provided block will be applied as the template for each item's view. + + Given an empty `` the following template: + + + + And the following application code + + App = Ember.Application.create() + App.items = [ + Ember.Object.create({name: 'Dave'}), + Ember.Object.create({name: 'Mary'}), + Ember.Object.create({name: 'Sara'}) + ] + + Will result in the HTML structure below + +
+
Hi Dave
+
Hi Mary
+
Hi Sara
+
+ + ### Blockless Use + If you provide an `itemViewClass` option that has its own `template` you can omit + the block. + + The following template: + + + + And application code + + App = Ember.Application.create() + App.items = [ + Ember.Object.create({name: 'Dave'}), + Ember.Object.create({name: 'Mary'}), + Ember.Object.create({name: 'Sara'}) + ] + + App.AnItemView = Ember.View.extend({ + template: Ember.Handlebars.compile("Greetings {{content.name}}") + }) + + Will result in the HTML structure below + +
+
Greetings Dave
+
Greetings Mary
+
Greetings Sara
+
+ + ### Specifying a CollectionView subclass + By default the `{{collection}}` helper will create an instance of `Ember.CollectionView`. + You can supply a `Ember.CollectionView` subclass to the helper by passing it + as the first argument: + + + + + ### Forwarded `item.*`-named Options + As with the `{{view}}`, helper options passed to the `{{collection}}` will be set on + the resulting `Ember.CollectionView` as properties. Additionally, options prefixed with + `item` will be applied to the views rendered for each item (note the camelcasing): + + + + Will result in the following HTML structure: + +
+

Howdy Dave

+

Howdy Mary

+

Howdy Sara

+
+ @name Handlebars.helpers.collection @param {String} path @param {Hash} options @@ -16483,9 +18857,9 @@ Ember.Handlebars.registerHelper('collection', function(path, options) { if (path && path.data && path.data.isRenderData) { options = path; path = undefined; - ember_assert("You cannot pass more than one argument to the collection helper", arguments.length === 1); + Ember.assert("You cannot pass more than one argument to the collection helper", arguments.length === 1); } else { - ember_assert("You cannot pass more than one argument to the collection helper", arguments.length === 2); + Ember.assert("You cannot pass more than one argument to the collection helper", arguments.length === 2); } var fn = options.fn; @@ -16495,8 +18869,8 @@ Ember.Handlebars.registerHelper('collection', function(path, options) { // If passed a path string, convert that into an object. // Otherwise, just default to the standard class. var collectionClass; - collectionClass = path ? getPath(this, path) : Ember.CollectionView; - ember_assert(fmt("%@ #collection: Could not find %@", data.view, path), !!collectionClass); + collectionClass = path ? getPath(this, path, options) : Ember.CollectionView; + Ember.assert(fmt("%@ #collection: Could not find %@", data.view, path), !!collectionClass); var hash = options.hash, itemHash = {}, match; @@ -16504,8 +18878,8 @@ Ember.Handlebars.registerHelper('collection', function(path, options) { var itemViewClass, itemViewPath = hash.itemViewClass; var collectionPrototype = collectionClass.proto(); delete hash.itemViewClass; - itemViewClass = itemViewPath ? getPath(collectionPrototype, itemViewPath) : collectionPrototype.itemViewClass; - ember_assert(fmt("%@ #collection: Could not find %@", data.view, itemViewPath), !!itemViewClass); + itemViewClass = itemViewPath ? getPath(collectionPrototype, itemViewPath, options) : collectionPrototype.itemViewClass; + Ember.assert(fmt("%@ #collection: Could not find %@", data.view, itemViewPath), !!itemViewClass); // Go through options passed to the {{collection}} helper and extract options // that configure item views instead of the collection itself. @@ -16531,12 +18905,7 @@ Ember.Handlebars.registerHelper('collection', function(path, options) { } if (inverse && inverse !== Handlebars.VM.noop) { - var emptyViewClass = Ember.View; - - if (hash.emptyViewClass) { - emptyViewClass = Ember.View.detect(hash.emptyViewClass) ? - hash.emptyViewClass : getPath(this, hash.emptyViewClass); - } + var emptyViewClass = get(collectionPrototype, 'emptyViewClass'); hash.emptyView = emptyViewClass.extend({ template: inverse, @@ -16544,14 +18913,14 @@ Ember.Handlebars.registerHelper('collection', function(path, options) { }); } - if (hash.preserveContext) { + if (hash.eachHelper === 'each') { itemHash._templateContext = Ember.computed(function() { return get(this, 'content'); }).property('content'); - delete hash.preserveContext; + delete hash.eachHelper; } - hash.itemViewClass = Ember.Handlebars.ViewHelper.viewClassFromHTMLOptions(itemViewClass, itemHash, this); + hash.itemViewClass = Ember.Handlebars.ViewHelper.viewClassFromHTMLOptions(itemViewClass, { data: data, hash: itemHash }, this); return Ember.Handlebars.helpers.view.call(this, collectionClass, options); }); @@ -16584,7 +18953,7 @@ var getPath = Ember.Handlebars.getPath; */ Ember.Handlebars.registerHelper('unbound', function(property, fn) { var context = (fn.contexts && fn.contexts[0]) || this; - return getPath(context, property); + return getPath(context, property, fn); }); })(); @@ -16633,17 +19002,57 @@ Ember.Handlebars.registerHelper('debugger', function() { (function() { -Ember.Handlebars.EachView = Ember.CollectionView.extend(Ember.Metamorph, { - itemViewClass: Ember.View.extend(Ember.Metamorph) +var get = Ember.get, set = Ember.set; + +Ember.Handlebars.EachView = Ember.CollectionView.extend(Ember._Metamorph, { + itemViewClass: Ember._MetamorphView, + emptyViewClass: Ember._MetamorphView, + + createChildView: function(view, attrs) { + view = this._super(view, attrs); + + // At the moment, if a container view subclass wants + // to insert keywords, it is responsible for cloning + // the keywords hash. This will be fixed momentarily. + var keyword = get(this, 'keyword'); + + if (keyword) { + var data = get(view, 'templateData'); + + data = Ember.copy(data); + data.keywords = view.cloneKeywords(); + set(view, 'templateData', data); + + var content = get(view, 'content'); + + // In this case, we do not bind, because the `content` of + // a #each item cannot change. + data.keywords[keyword] = content; + } + + return view; + } }); Ember.Handlebars.registerHelper('each', function(path, options) { - options.hash.contentBinding = path; - options.hash.preserveContext = true; + if (arguments.length === 4) { + Ember.assert("If you pass more than one argument to the each helper, it must be in the form #each foo in bar", arguments[1] === "in"); + var keywordName = arguments[0]; + + options = arguments[3]; + path = arguments[2]; + + options.hash.keyword = keywordName; + } else { + options.hash.eachHelper = 'each'; + } + + Ember.assert("You must pass a block to the each helper", options.fn && options.fn !== Handlebars.VM.noop); + + options.hash.contentBinding = path; // Set up emptyView as a metamorph with no tag - options.hash.itemTagName = ''; - options.hash.emptyViewClass = Ember.View.extend(Ember.Metamorph); + //options.hash.emptyViewClass = Ember._MetamorphView; return Ember.Handlebars.helpers.collection.call(this, 'Ember.Handlebars.EachView', options); }); @@ -16684,7 +19093,7 @@ Ember.Handlebars.registerHelper('each', function(path, options) { Ember.Handlebars.registerHelper('template', function(name, options) { var template = Ember.TEMPLATES[name]; - ember_assert("Unable to find template with name '"+name+"'.", !!template); + Ember.assert("Unable to find template with name '"+name+"'.", !!template); Ember.TEMPLATES[name](this, { data: options.data }); }); @@ -16694,7 +19103,7 @@ Ember.Handlebars.registerHelper('template', function(name, options) { (function() { -var EmberHandlebars = Ember.Handlebars, getPath = Ember.Handlebars.getPath; +var EmberHandlebars = Ember.Handlebars, getPath = EmberHandlebars.getPath, get = Ember.get; var ActionHelper = EmberHandlebars.ActionHelper = { registeredActions: {} @@ -16725,15 +19134,148 @@ ActionHelper.registerAction = function(actionName, eventName, target, view, cont return actionId; }; +/** + The `{{action}}` helper registers an HTML element within a template for + DOM event handling. User interaction with that element will call the method + on the template's associated `Ember.View` instance that has the same name + as the first provided argument to `{{action}}`: + + Given the following Handlebars template on the page + + + + And application code + + AView = Ember.View.extend({ + templateName; 'a-template', + anActionName: function(event){} + }) + + aView = AView.create() + aView.appendTo('body') + + Will results in the following rendered HTML + +
+
+ click me +
+
+ + Clicking "click me" will trigger the `anActionName` method of the `aView` object with a + `jQuery.Event` object as its argument. The `jQuery.Event` object will be extended to include + a `view` property that is set to the original view interacted with (in this case the `aView` object). + + + ### Specifying an Action Target + A `target` option can be provided to change which object will receive the method call. This option must be + a string representing a path to an object: + + + + Clicking "click me" in the rendered HTML of the above template will trigger the + `anActionName` method of the object at `MyApplication.someObject`. The first argument + to this method will be a `jQuery.Event` extended to include a `view` property that is + set to the original view interacted with. + + A path relative to the template's `Ember.View` instance can also be used as a target: + + + + Clicking "click me" in the rendered HTML of the above template will trigger the + `anActionName` method of the view's parent view. + + The `{{action}}` helper is `Ember.StateManager` aware. If the target of + the action is an `Ember.StateManager` instance `{{action}}` will use the `send` + functionality of StateManagers. The documentation for `Ember.StateManager` has additional + information about this use. + + If an action's target does not implement a method that matches the supplied action name + an error will be thrown. + + + + With the following application code + + AView = Ember.View.extend({ + templateName; 'a-template', + // note: no method 'aMethodNameThatIsMissing' + anActionName: function(event){} + }) + + aView = AView.create() + aView.appendTo('body') + + Will throw `Uncaught TypeError: Cannot call method 'call' of undefined` when "click me" is clicked. + + + ### Specifying DOM event type + By default the `{{action}}` helper registers for DOM `click` events. You can supply an + `on` option to the helper to specify a different DOM event name: + + + + See `Ember.EventDispatcher` for a list of acceptable DOM event names. + + Because `{{action}}` depends on Ember's event dispatch system it will only function if + an `Ember.EventDispatcher` instance is available. An `Ember.EventDispatcher` instance + will be created when a new `Ember.Application` is created. Having an instance of + `Ember.Application` will satisfy this requirement. + + ### Specifying a context + By default the `{{action}}` helper passes the current Handlebars context along in the + `jQuery.Event` object. You may specify an alternative object to pass as the context by + providing a property path: + + + + @name Handlebars.helpers.action + @param {String} actionName + @param {Hash} options +*/ EmberHandlebars.registerHelper('action', function(actionName, options) { var hash = options.hash || {}, eventName = hash.on || "click", view = options.data.view, - target, context; + target, context, controller; if (view.isVirtual) { view = view.get('parentView'); } - target = hash.target ? getPath(this, hash.target) : view; - context = options.contexts[0]; + + if (hash.target) { + target = getPath(this, hash.target, options); + } else if (controller = options.data.keywords.controller) { + target = get(controller, 'target'); + } + + target = target || view; + + context = hash.context ? getPath(this, hash.context, options) : options.contexts[0]; var actionId = ActionHelper.registerAction(actionName, eventName, target, view, context); return new EmberHandlebars.SafeString('data-ember-action="' + actionId + '"'); @@ -16746,6 +19288,51 @@ EmberHandlebars.registerHelper('action', function(actionName, options) { (function() { var get = Ember.get, set = Ember.set; +/** + + When used in a Handlebars template that is assigned to an `Ember.View` instance's + `layout` property Ember will render the layout template first, inserting the view's + own rendered output at the `{{ yield }}` location. + + An empty `` and the following application code: + + AView = Ember.View.extend({ + classNames: ['a-view-with-layout'], + layout: Ember.Handlebars.compile('
{{ yield }}
'), + template: Ember.Handlebars.compile('I am wrapped') + }) + + aView = AView.create() + aView.appendTo('body') + + Will result in the following HTML output: + + +
+
+ I am wrapped +
+
+ + + The yield helper cannot be used outside of a template assigned to an `Ember.View`'s `layout` property + and will throw an error if attempted. + + BView = Ember.View.extend({ + classNames: ['a-view-with-layout'], + template: Ember.Handlebars.compile('{{yield}}') + }) + + bView = BView.create() + bView.appendTo('body') + + // throws + // Uncaught Error: assertion failed: You called yield in a template that was not a layout + + @name Handlebars.helpers.yield + @param {Hash} options + @returns {String} HTML string +*/ Ember.Handlebars.registerHelper('yield', function(options) { var view = options.data.view, template; @@ -16753,12 +19340,11 @@ Ember.Handlebars.registerHelper('yield', function(options) { view = get(view, 'parentView'); } - ember_assert("You called yield in a template that was not a layout", !!view); + Ember.assert("You called yield in a template that was not a layout", !!view); template = get(view, 'template'); - ember_assert("You called yield on " + view.toString() + " without supplying a template", !!template); - template(this, options); + if (template) { template(this, options); } }); })(); @@ -16795,32 +19381,92 @@ Ember.Handlebars.registerHelper('yield', function(options) { // ========================================================================== var set = Ember.set, get = Ember.get; -// TODO: Be explicit in the class documentation that you -// *MUST* set the value of a checkbox through Ember. -// Updating the value of a checkbox directly via jQuery objects -// will not work. +/** + @class + + Creates an HTML input view in one of two formats. + + If a `title` property or binding is provided the input will be wrapped in + a `div` and `label` tag. View properties like `classNames` will be applied to + the outermost `div`. This behavior is deprecated and will issue a warning in development. + + + {{view Ember.Checkbox classNames="applicaton-specific-checkbox" title="Some title"}} + + +
+ +
+ + If `title` isn't provided the view will render as an input element of the 'checkbox' type and HTML + related properties will be applied directly to the input. + + {{view Ember.Checkbox classNames="applicaton-specific-checkbox"}} + + + + You can add a `label` tag yourself in the template where the Ember.Checkbox is being used. + + + + + The `checked` attribute of an Ember.Checkbox object should always be set + through the Ember object or by interacting with its rendered element representation + via the mouse, keyboard, or touch. Updating the value of the checkbox via jQuery will + result in the checked value of the object and its element losing synchronization. +*/ Ember.Checkbox = Ember.View.extend({ - title: null, - value: false, + classNames: ['ember-checkbox'], + + tagName: 'input', + + attributeBindings: ['type', 'checked', 'disabled'], + + type: "checkbox", + checked: false, disabled: false, - classNames: ['ember-checkbox'], + /** @deprecated */ + title: null, - defaultTemplate: Ember.Handlebars.compile(''), + value: Ember.computed(function(propName, value){ + Ember.deprecate("Ember.Checkbox's 'value' property has been renamed to 'checked' to match the html element attribute name"); + if (value !== undefined) { + return set(this, 'checked', value); + } else { + return get(this, 'checked'); + } + }).property('checked').volatile(), change: function() { Ember.run.once(this, this._updateElementValue); // returning false will cause IE to not change checkbox state }, + /** + @private + */ _updateElementValue: function() { - var input = this.$('input:checkbox'); - set(this, 'value', input.prop('checked')); + var input = get(this, 'title') ? this.$('input:checkbox') : this.$(); + set(this, 'checked', input.prop('checked')); + }, + + init: function() { + if (get(this, 'title') || get(this, 'titleBinding')) { + Ember.deprecate("Automatically surrounding Ember.Checkbox inputs with a label by providing a 'title' property is deprecated"); + this.tagName = undefined; + this.attributeBindings = []; + this.defaultTemplate = Ember.Handlebars.compile(''); + } + + this._super(); } }); - })(); @@ -16895,16 +19541,48 @@ var get = Ember.get, set = Ember.set; /** @class + + The `Ember.TextField` view class renders a text + [input](https://developer.mozilla.org/en/HTML/Element/Input) element. It + allows for binding Ember properties to the text field contents (`value`), + live-updating as the user inputs text. + + Example: + + {{view Ember.TextField valueBinding="firstName"}} + @extends Ember.TextSupport */ Ember.TextField = Ember.View.extend(Ember.TextSupport, /** @scope Ember.TextField.prototype */ { classNames: ['ember-text-field'], - tagName: "input", attributeBindings: ['type', 'value', 'size'], + + /** + The value attribute of the input element. As the user inputs text, this + property is updated live. + + @type String + @default "" + */ + value: "", + + /** + The type attribute of the input element. + + @type String + @default "text" + */ type: "text", + + /** + The size of the text field in characters. + + @type String + @default null + */ size: null }); @@ -16930,6 +19608,20 @@ Ember.Button = Ember.View.extend(Ember.TargetActionSupport, { attributeBindings: ['type', 'disabled', 'href'], + /** @private + Overrides TargetActionSupport's targetObject computed + property to use Handlebars-specific path resolution. + */ + targetObject: Ember.computed(function() { + var target = get(this, 'target'), + root = get(this, 'templateContext'), + data = get(this, 'templateData'); + + if (typeof target !== 'string') { return target; } + + return Ember.Handlebars.getPath(root, target, { data: data }); + }).property('target').cacheable(), + // Defaults to 'button' if tagName is 'input' or 'button' type: Ember.computed(function(key, value) { var tagName = this.get('tagName'); @@ -17005,6 +19697,11 @@ Ember.Button = Ember.View.extend(Ember.TargetActionSupport, { touchEnd: function(touch) { return this.mouseUp(touch); + }, + + init: function() { + Ember.deprecate("Ember.Button is deprecated and will be removed from future releases. Consider using the `{{action}}` helper."); + this._super(); } }); @@ -17034,16 +19731,14 @@ Ember.TextArea = Ember.View.extend(Ember.TextSupport, rows: null, cols: null, - /** - @private - */ - didInsertElement: function() { - this._updateElementValue(); - }, - _updateElementValue: Ember.observer(function() { this.$().val(get(this, 'value')); - }, 'value') + }, 'value'), + + init: function() { + this._super(); + this.on("didInsertElement", this, this._updateElementValue); + } }); @@ -17064,11 +19759,11 @@ var get = Ember.get, getPath = Ember.getPath; Ember.TabPaneView = Ember.View.extend({ tabsContainer: Ember.computed(function() { return this.nearestInstanceOf(Ember.TabContainerView); - }).property(), + }).property().volatile(), isVisible: Ember.computed(function() { return get(this, 'viewName') === getPath(this, 'tabsContainer.currentView'); - }).property('tabsContainer.currentView') + }).property('tabsContainer.currentView').volatile() }); })(); @@ -17081,7 +19776,7 @@ var get = Ember.get, setPath = Ember.setPath; Ember.TabView = Ember.View.extend({ tabsContainer: Ember.computed(function() { return this.nearestInstanceOf(Ember.TabContainerView); - }).property(), + }).property().volatile(), mouseUp: function() { setPath(this, 'tabsContainer.currentView', get(this, 'value')); @@ -17104,29 +19799,87 @@ Ember.TabView = Ember.View.extend({ var set = Ember.set, get = Ember.get, getPath = Ember.getPath; var indexOf = Ember.ArrayUtils.indexOf, indexesOf = Ember.ArrayUtils.indexesOf; -Ember.Select = Ember.View.extend({ +/** + @class + + The Ember.Select view class renders a + [select](https://developer.mozilla.org/en/HTML/Element/select) HTML element, + allowing the user to choose from a list of options. The selected option(s) + are updated live in the `selection` property. + + @extends Ember.View +*/ +Ember.Select = Ember.View.extend( + /** @scope Ember.Select.prototype */ { + tagName: 'select', - template: Ember.Handlebars.compile( - '{{#if prompt}}{{/if}}' + - '{{#each content}}{{view Ember.SelectOption contentBinding="this"}}{{/each}}' - ), + defaultTemplate: Ember.Handlebars.compile('{{#if view.prompt}}{{/if}}{{#each view.content}}{{view Ember.SelectOption contentBinding="this"}}{{/each}}'), attributeBindings: ['multiple'], + /** + The `multiple` attribute of the select element. Indicates whether multiple + options can be selected. + + @type Boolean + @default false + */ multiple: false, + + /** + The list of options. + + If `optionLabelPath` and `optionValuePath` are not overridden, this should + be a list of strings, which will serve simultaneously as labels and values. + + Otherwise, this should be a list of objects. For instance: + + content: Ember.A([ + { id: 1, firstName: 'Yehuda' }, + { id: 2, firstName: 'Tom' } + ])), + optionLabelPath: 'content.firstName', + optionValuePath: 'content.id' + + @type Array + @default null + */ content: null, + + /** + When `multiple` is false, the element of `content` that is currently + selected, if any. + + When `multiple` is true, an array of such elements. + + @type Object or Array + @default null + */ selection: null, + + /** + If given, a top-most dummy option will be rendered to serve as a user + prompt. + + @type String + @default null + */ prompt: null, - optionLabelPath: 'content', - optionValuePath: 'content', + /** + The path of the option labels. See `content`. - didInsertElement: function() { - var selection = get(this, 'selection'); + @type String + @default 'content' + */ + optionLabelPath: 'content', - if (selection) { this.selectionDidChange(); } + /** + The path of the option values. See `content`. - this.change(); - }, + @type String + @default 'content' + */ + optionValuePath: 'content', change: function() { if (get(this, 'multiple')) { @@ -17146,11 +19899,17 @@ Ember.Select = Ember.View.extend({ } this._selectionDidChangeMultiple(); } else { - ember_assert("Select multiple is false, but you have specified an Array selection.", !isArray); this._selectionDidChangeSingle(); } }, 'selection'), + _triggerChange: function() { + var selection = get(this, 'selection'); + + if (selection) { this.selectionDidChange(); } + + this.change(); + }, _changeSingle: function() { var selectedIndex = this.$()[0].selectedIndex, @@ -17174,7 +19933,7 @@ Ember.Select = Ember.View.extend({ if (options) { var selectedIndexes = options.map(function(){ return this.index - offset; - }); + }).toArray(); set(this, 'selection', content.objectsAt(selectedIndexes)); } }, @@ -17183,33 +19942,40 @@ Ember.Select = Ember.View.extend({ var el = this.$()[0], content = get(this, 'content'), selection = get(this, 'selection'), - selectionIndex = indexOf(content, selection), + selectionIndex = content ? indexOf(content, selection) : -1, prompt = get(this, 'prompt'); - if (prompt) { selectionIndex += 1; } + if (prompt && selectionIndex > -1) { selectionIndex += 1; } if (el) { el.selectedIndex = selectionIndex; } }, _selectionDidChangeMultiple: function() { var content = get(this, 'content'), selection = get(this, 'selection'), - selectedIndexes = indexesOf(content, selection), + selectedIndexes = content ? indexesOf(content, selection) : [-1], prompt = get(this, 'prompt'), offset = prompt ? 1 : 0, - options = this.$('option'); + options = this.$('option'), + adjusted; if (options) { options.each(function() { - this.selected = indexOf(selectedIndexes, this.index + offset) > -1; + adjusted = this.index > -1 ? this.index + offset : -1; + this.selected = indexOf(selectedIndexes, adjusted) > -1; }); } + }, + + init: function() { + this._super(); + this.on("didInsertElement", this, this._triggerChange); } }); Ember.SelectOption = Ember.View.extend({ tagName: 'option', - template: Ember.Handlebars.compile("{{label}}"), + defaultTemplate: Ember.Handlebars.compile("{{view.label}}"), attributeBindings: ['value', 'selected'], init: function() { @@ -17229,7 +19995,7 @@ Ember.SelectOption = Ember.View.extend({ // `new Number(4) !== 4`, we use `==` below return content == selection; } - }).property('content', 'parentView.selection'), + }).property('content', 'parentView.selection').volatile(), labelPathDidChange: Ember.observer(function() { var labelPath = getPath(this, 'parentView.optionLabelPath'); @@ -17288,7 +20054,7 @@ Ember.Handlebars.bootstrap = function(ctx) { if (Ember.ENV.LEGACY_HANDLEBARS_TAGS) { selectors += ', script[type="text/html"]'; } - ember_warn("Ember no longer parses text/html script tags by default. Set ENV.LEGACY_HANDLEBARS_TAGS = true to restore this functionality.", Ember.ENV.LEGACY_HANDLEBARS_TAGS || Ember.$('script[type="text/html"]').length === 0); + Ember.warn("Ember no longer parses text/html script tags by default. Set ENV.LEGACY_HANDLEBARS_TAGS = true to restore this functionality.", Ember.ENV.LEGACY_HANDLEBARS_TAGS || Ember.$('script[type="text/html"]').length === 0); Ember.$(selectors, ctx) .each(function() { @@ -17296,20 +20062,15 @@ Ember.Handlebars.bootstrap = function(ctx) { var script = Ember.$(this), type = script.attr('type'); - if (type === 'text/html' && !Ember.ENV.LEGACY_HANDLEBARS_TAGS) { return; } - var compile = (script.attr('type') === 'text/x-raw-handlebars') ? Ember.$.proxy(Handlebars.compile, Handlebars) : Ember.$.proxy(Ember.Handlebars.compile, Ember.Handlebars), - // Get the id of the script, used by Ember.View's elementId property, - // Look for data-element-id attribute. - elementId = script.attr('data-element-id'), // Get the name of the script, used by Ember.View's templateName property. // First look for data-template-name attribute, then fall back to its // id if no name is found. templateName = script.attr('data-template-name') || script.attr('id'), template = compile(script.html()), - view, viewPath, tagName; + view, viewPath, elementId, tagName, options; if (templateName) { // For templates which have a name, we save them and then remove them from the DOM @@ -17334,15 +20095,19 @@ Ember.Handlebars.bootstrap = function(ctx) { viewPath = script.attr('data-view'); view = viewPath ? Ember.getPath(viewPath) : Ember.View; + // Get the id of the script, used by Ember.View's elementId property, + // Look for data-element-id attribute. + elementId = script.attr('data-element-id'); + // Users can optionally specify a custom tag name to use by setting the // data-tag-name attribute on the script tag. tagName = script.attr('data-tag-name'); - view = view.create({ - elementId: elementId, - template: template, - tagName: (tagName) ? tagName : undefined - }); + options = { template: template }; + if (elementId) { options.elementId = elementId; } + if (tagName) { options.tagName = tagName; } + + view = view.create(options); view._insertElementLater(function() { script.replaceWith(this.$()); diff --git a/app/vendor/sproutcore-routing.js b/app/vendor/sproutcore-routing.js deleted file mode 100644 index e49153d..0000000 --- a/app/vendor/sproutcore-routing.js +++ /dev/null @@ -1,575 +0,0 @@ -// ========================================================================== -// Project: SproutCore - JavaScript Application Framework -// Copyright: ©2006-2011 Strobe Inc. and contributors. -// Portions ©2008-2011 Apple Inc. All rights reserved. -// License: Licensed under MIT license (see license.js) -// ========================================================================== - -// Ember no longer aliases SC -window.SC = window.SC || Ember.Namespace.create(); - -var get = Ember.get, set = Ember.set; - -/** - Wether the browser supports HTML5 history. -*/ -var supportsHistory = !!(window.history && window.history.pushState); - -/** - Wether the browser supports the hashchange event. -*/ -var supportsHashChange = ('onhashchange' in window) && (document.documentMode === undefined || document.documentMode > 7); - -/** - @class - - Route is a class used internally by SC.routes. The routes defined by your - application are stored in a tree structure, and this is the class for the - nodes. -*/ -var Route = Ember.Object.extend( -/** @scope Route.prototype */ { - - target: null, - - method: null, - - staticRoutes: null, - - dynamicRoutes: null, - - wildcardRoutes: null, - - add: function(parts, target, method) { - var part, nextRoute; - - // clone the parts array because we are going to alter it - parts = Ember.copy(parts); - - if (!parts || parts.length === 0) { - this.target = target; - this.method = method; - - } else { - part = parts.shift(); - - // there are 3 types of routes - switch (part.slice(0, 1)) { - - // 1. dynamic routes - case ':': - part = part.slice(1, part.length); - if (!this.dynamicRoutes) this.dynamicRoutes = {}; - if (!this.dynamicRoutes[part]) this.dynamicRoutes[part] = this.constructor.create(); - nextRoute = this.dynamicRoutes[part]; - break; - - // 2. wildcard routes - case '*': - part = part.slice(1, part.length); - if (!this.wildcardRoutes) this.wildcardRoutes = {}; - nextRoute = this.wildcardRoutes[part] = this.constructor.create(); - break; - - // 3. static routes - default: - if (!this.staticRoutes) this.staticRoutes = {}; - if (!this.staticRoutes[part]) this.staticRoutes[part] = this.constructor.create(); - nextRoute = this.staticRoutes[part]; - } - - // recursively add the rest of the route - if (nextRoute) nextRoute.add(parts, target, method); - } - }, - - routeForParts: function(parts, params) { - var part, key, route; - - // clone the parts array because we are going to alter it - parts = Ember.copy(parts); - - // if parts is empty, we are done - if (!parts || parts.length === 0) { - return this.method ? this : null; - - } else { - part = parts.shift(); - - // try to match a static route - if (this.staticRoutes && this.staticRoutes[part]) { - route = this.staticRoutes[part].routeForParts(parts, params); - if (route) { - return route; - } - } - - // else, try to match a dynamic route - for (key in this.dynamicRoutes) { - route = this.dynamicRoutes[key].routeForParts(parts, params); - if (route) { - params[key] = part; - return route; - } - } - - // else, try to match a wilcard route - for (key in this.wildcardRoutes) { - parts.unshift(part); - params[key] = parts.join('/'); - return this.wildcardRoutes[key].routeForParts(null, params); - } - - // if nothing was found, it means that there is no match - return null; - } - } - -}); - -/** - @class - - SC.routes manages the browser location. You can change the hash part of the - current location. The following code - - SC.routes.set('location', 'notes/edit/4'); - - will change the location to http://domain.tld/my_app#notes/edit/4. Adding - routes will register a handler that will be called whenever the location - changes and matches the route: - - SC.routes.add(':controller/:action/:id', MyApp, MyApp.route); - - You can pass additional parameters in the location hash that will be relayed - to the route handler: - - SC.routes.set('location', 'notes/show/4?format=xml&language=fr'); - - The syntax for the location hash is described in the location property - documentation, and the syntax for adding handlers is described in the - add method documentation. - - Browsers keep track of the locations in their history, so when the user - presses the 'back' or 'forward' button, the location is changed, SC.route - catches it and calls your handler. Except for Internet Explorer versions 7 - and earlier, which do not modify the history stack when the location hash - changes. - - SC.routes also supports HTML5 history, which uses a '/' instead of a '#' - in the URLs, so that all your website's URLs are consistent. -*/ -var routes = SC.routes = Ember.Object.create( - /** @scope SC.routes.prototype */{ - - /** - Set this property to true if you want to use HTML5 history, if available on - the browser, instead of the location hash. - - HTML 5 history uses the history.pushState method and the window's popstate - event. - - By default it is false, so your URLs will look like: - - http://domain.tld/my_app#notes/edit/4 - - If set to true and the browser supports pushState(), your URLs will look - like: - - http://domain.tld/my_app/notes/edit/4 - - You will also need to make sure that baseURI is properly configured, as - well as your server so that your routes are properly pointing to your - SproutCore application. - - @see http://dev.w3.org/html5/spec/history.html#the-history-interface - @property - @type {Boolean} - */ - wantsHistory: false, - - /** - A read-only boolean indicating whether or not HTML5 history is used. Based - on the value of wantsHistory and the browser's support for pushState. - - @see wantsHistory - @property - @type {Boolean} - */ - usesHistory: null, - - /** - The base URI used to resolve routes (which are relative URLs). Only used - when usesHistory is equal to true. - - The build tools automatically configure this value if you have the - html5_history option activated in the Buildfile: - - config :my_app, :html5_history => true - - Alternatively, it uses by default the value of the href attribute of the - tag of the HTML document. For example: - - - - The value can also be customized before or during the exectution of the - main() method. - - @see http://www.w3.org/TR/html5/semantics.html#the-base-element - @property - @type {String} - */ - baseURI: document.baseURI, - - /** @private - A boolean value indicating whether or not the ping method has been called - to setup the SC.routes. - - @property - @type {Boolean} - */ - _didSetup: false, - - /** @private - Internal representation of the current location hash. - - @property - @type {String} - */ - _location: null, - - /** @private - Routes are stored in a tree structure, this is the root node. - - @property - @type {Route} - */ - _firstRoute: null, - - /** @private - An internal reference to the Route class. - - @property - */ - _Route: Route, - - /** @private - Internal method used to extract and merge the parameters of a URL. - - @returns {Hash} - */ - _extractParametersAndRoute: function(obj) { - var params = {}, - route = obj.route || '', - separator, parts, i, len, crumbs, key; - - separator = (route.indexOf('?') < 0 && route.indexOf('&') >= 0) ? '&' : '?'; - parts = route.split(separator); - route = parts[0]; - if (parts.length === 1) { - parts = []; - } else if (parts.length === 2) { - parts = parts[1].split('&'); - } else if (parts.length > 2) { - parts.shift(); - } - - // extract the parameters from the route string - len = parts.length; - for (i = 0; i < len; ++i) { - crumbs = parts[i].split('='); - params[crumbs[0]] = crumbs[1]; - } - - // overlay any parameter passed in obj - for (key in obj) { - if (obj.hasOwnProperty(key) && key !== 'route') { - params[key] = '' + obj[key]; - } - } - - // build the route - parts = []; - for (key in params) { - parts.push([key, params[key]].join('=')); - } - params.params = separator + parts.join('&'); - params.route = route; - - return params; - }, - - /** - The current location hash. It is the part in the browser's location after - the '#' mark. - - The following code - - SC.routes.set('location', 'notes/edit/4'); - - will change the location to http://domain.tld/my_app#notes/edit/4 and call - the correct route handler if it has been registered with the add method. - - You can also pass additional parameters. They will be relayed to the route - handler. For example, the following code - - SC.routes.add(':controller/:action/:id', MyApp, MyApp.route); - SC.routes.set('location', 'notes/show/4?format=xml&language=fr'); - - will change the location to - http://domain.tld/my_app#notes/show/4?format=xml&language=fr and call the - MyApp.route method with the following argument: - - { route: 'notes/show/4', - params: '?format=xml&language=fr', - controller: 'notes', - action: 'show', - id: '4', - format: 'xml', - language: 'fr' } - - The location can also be set with a hash, the following code - - SC.routes.set('location', - { route: 'notes/edit/4', format: 'xml', language: 'fr' }); - - will change the location to - http://domain.tld/my_app#notes/show/4?format=xml&language=fr. - - The 'notes/show/4&format=xml&language=fr' syntax for passing parameters, - using a '&' instead of a '?', as used in SproutCore 1.0 is still supported. - - @property - @type {String} - */ - location: Ember.computed(function(key, value) { - this._skipRoute = false; - return this._extractLocation(key, value); - }).property(), - - _extractLocation: function(key, value) { - var crumbs, encodedValue; - - if (value !== undefined) { - if (value === null) { - value = ''; - } - - if (typeof(value) === 'object') { - crumbs = this._extractParametersAndRoute(value); - value = crumbs.route + crumbs.params; - } - - if (!this._skipPush && (!Ember.empty(value) || (this._location && this._location !== value))) { - encodedValue = encodeURI(value); - - if (this.usesHistory) { - if (encodedValue.length > 0) { - encodedValue = '/' + encodedValue; - } - window.history.pushState(null, null, get(this, 'baseURI') + encodedValue); - } else if (encodedValue.length > 0 || window.location.hash.length > 0) { - window.location.hash = encodedValue; - } - } - - this._location = value; - } - - return this._location; - }, - - updateLocation: function(loc){ - this._skipRoute = true; - return this._extractLocation('location', loc); - }, - - /** - You usually don't need to call this method. It is done automatically after - the application has been initialized. - - It registers for the hashchange event if available. If not, it creates a - timer that looks for location changes every 150ms. - */ - ping: function() { - if (!this._didSetup) { - this._didSetup = true; - var state; - - if (get(this, 'wantsHistory') && supportsHistory) { - this.usesHistory = true; - - // Move any hash state to url state - // TODO: Make sure we have a hash before adding slash - state = window.location.hash.slice(1); - if (state.length > 0) { - state = '/' + state; - window.history.replaceState(null, null, get(this, 'baseURI')+state); - } - - popState(); - jQuery(window).bind('popstate', popState); - - } else { - this.usesHistory = false; - - if (get(this, 'wantsHistory')) { - // Move any url state to hash - var base = get(this, 'baseURI'); - var loc = (base.charAt(0) === '/') ? document.location.pathname : document.location.href.replace(document.location.hash, ''); - state = loc.slice(base.length+1); - if (state.length > 0) { - window.location.href = base+'#'+state; - } - } - - if (supportsHashChange) { - hashChange(); - jQuery(window).bind('hashchange', hashChange); - - } else { - var invokeHashChange = function() { - hashChange(); - setTimeout(invokeHashChange, 100); - }; - invokeHashChange(); - } - } - } - }, - - /** - Adds a route handler. Routes have the following format: - - - 'users/show/5' is a static route and only matches this exact string, - - ':action/:controller/:id' is a dynamic route and the handler will be - called with the 'action', 'controller' and 'id' parameters passed in a - hash, - - '*url' is a wildcard route, it matches the whole route and the handler - will be called with the 'url' parameter passed in a hash. - - Route types can be combined, the following are valid routes: - - - 'users/:action/:id' - - ':controller/show/:id' - - ':controller/ *url' (ignore the space, because of jslint) - - @param {String} route the route to be registered - @param {Object} target the object on which the method will be called, or - directly the function to be called to handle the route - @param {Function} method the method to be called on target to handle the - route, can be a function or a string - */ - add: function(route, target, method) { - if (!this._didSetup) { - Ember.run.once(this, 'ping'); - } - - if (method === undefined && Ember.typeOf(target) === 'function') { - method = target; - target = null; - } else if (Ember.typeOf(method) === 'string') { - method = target[method]; - } - - if (!this._firstRoute) this._firstRoute = Route.create(); - this._firstRoute.add(route.split('/'), target, method); - - return this; - }, - - /** - Observer of the 'location' property that calls the correct route handler - when the location changes. - */ - locationDidChange: Ember.observer(function() { - this.trigger(); - }, 'location'), - - /** - Triggers a route even if already in that route (does change the location, if it - is not already changed, as well). - - If the location is not the same as the supplied location, this simply lets "location" - handle it (which ends up coming back to here). - */ - trigger: function() { - var location = get(this, 'location'), - params, route; - - if (this._firstRoute) { - params = this._extractParametersAndRoute({ route: location }); - location = params.route; - delete params.route; - delete params.params; - - route = this.getRoute(location, params); - if (route && route.method) { - route.method.call(route.target || this, params); - } - } - }, - - getRoute: function(route, params) { - var firstRoute = this._firstRoute; - if (firstRoute == null) { - return null; - } - - if (params == null) { - params = {}; - } - - return firstRoute.routeForParts(route.split('/'), params); - }, - - exists: function(route, params) { - route = this.getRoute(route, params); - return route !== null && route.method !== null; - } - -}); - -/** - Event handler for the hashchange event. Called automatically by the browser - if it supports the hashchange event, or by our timer if not. -*/ -function hashChange(event) { - var loc = window.location.hash; - - // Remove the '#' prefix - loc = (loc && loc.length > 0) ? loc.slice(1, loc.length) : ''; - - if (!jQuery.browser.mozilla) { - // because of bug https://bugzilla.mozilla.org/show_bug.cgi?id=483304 - loc = decodeURI(loc); - } - - if (get(routes, 'location') !== loc && !routes._skipRoute) { - Ember.run.once(function() { - routes._skipPush = true; - set(routes, 'location', loc); - routes._skipPush = false; - }); - } - routes._skipRoute = false; -} - -function popState(event) { - var base = get(routes, 'baseURI'), - loc = (base.charAt(0) === '/') ? document.location.pathname : document.location.href; - - if (loc.slice(0, base.length) === base) { - // Remove the base prefix and the extra '/' - loc = loc.slice(base.length + 1, loc.length); - - if (get(routes, 'location') !== loc && !routes._skipRoute) { - Ember.run.once(function() { - routes._skipPush = true; - set(routes, 'location', loc); - routes._skipPush = false; - }); - } - } - routes._skipRoute = false; -} \ No newline at end of file diff --git a/index.html b/index.html index 7c61a99..8c91095 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ + Ember Skeleton @@ -14,10 +15,10 @@
+ + + - - - diff --git a/tests/qunit/qunit.css b/tests/qunit/qunit.css index 4be7e36..2835a8d 100644 --- a/tests/qunit/qunit.css +++ b/tests/qunit/qunit.css @@ -1,5 +1,5 @@ /** - * QUnit v1.4.0 - A JavaScript Unit Testing Framework + * QUnit v1.5.0 - A JavaScript Unit Testing Framework * * http://docs.jquery.com/QUnit * @@ -220,6 +220,9 @@ border-bottom: 1px solid white; } +#qunit-testresult .module-name { + font-weight: bold; +} /** Fixture */ @@ -229,4 +232,4 @@ left: -10000px; width: 1000px; height: 1000px; -} +} \ No newline at end of file diff --git a/tests/qunit/qunit.js b/tests/qunit/qunit.js index f50407a..f3ef1cc 100644 --- a/tests/qunit/qunit.js +++ b/tests/qunit/qunit.js @@ -1,5 +1,5 @@ /** - * QUnit v1.4.0 - A JavaScript Unit Testing Framework + * QUnit v1.5.0 - A JavaScript Unit Testing Framework * * http://docs.jquery.com/QUnit * @@ -100,6 +100,13 @@ Test.prototype = { }, run: function() { config.current = this; + + var running = id("qunit-testresult"); + + if ( running ) { + running.innerHTML = "Running:
" + this.name; + } + if ( this.async ) { QUnit.stop(); } @@ -370,7 +377,7 @@ var QUnit = { } try { - block(); + block.call(config.current.testEnvironment); } catch (e) { actual = e; } @@ -873,9 +880,11 @@ function done() { // clear own sessionStorage items if all tests passed if ( config.reorder && defined.sessionStorage && config.stats.bad === 0 ) { - for (var key in sessionStorage) { - if (sessionStorage.hasOwnProperty(key) && key.indexOf("qunit-test-") === 0 ) { - sessionStorage.removeItem(key); + var key; + for ( var i = 0; i < sessionStorage.length; i++ ) { + key = sessionStorage.key( i++ ); + if ( key.indexOf("qunit-test-") === 0 ) { + sessionStorage.removeItem( key ); } } } @@ -912,8 +921,9 @@ function validTest( name ) { return run; } -// so far supports only Firefox, Chrome and Opera (buggy) -// could be extended in the future to use something like https://github.com/csnover/TraceKit +// so far supports only Firefox, Chrome and Opera (buggy), Safari (for real exceptions) +// Later Safari and IE10 are supposed to support error.stack as well +// See also https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Error/Stack function extractStacktrace( e, offset ) { offset = offset || 3; if (e.stacktrace) { @@ -1656,4 +1666,4 @@ if ( typeof exports !== "undefined" || typeof require !== "undefined" ) { } // get at whatever the global object is, like window in browsers -}( (function() {return this;}.call()) )); +}( (function() {return this;}.call()) )); \ No newline at end of file diff --git a/tests/qunit/run-qunit.js b/tests/run-tests.js similarity index 91% rename from tests/qunit/run-qunit.js rename to tests/run-tests.js index 0e6b420..236bb2d 100644 --- a/tests/qunit/run-qunit.js +++ b/tests/run-tests.js @@ -2,7 +2,7 @@ var args = phantom.args; if (args.length < 1 || args.length > 2) { - console.log("Usage: " + phantom.scriptName + " "); + console.log("Usage: " + phantom.scriptName + " "); phantom.exit(1); } @@ -13,9 +13,10 @@ page.onConsoleMessage = function(msg) { if (!depRe.test(msg)) console.log(msg); }; -page.open(args[0], function(status) { +var uri = args[0]; +page.open(uri, function(status) { if (status !== 'success') { - console.error("Unable to access network"); + console.error("Unable to access: " + uri + " [" + status + "]"); phantom.exit(1); } else { page.evaluate(addLogging);