diff --git a/Rakefile b/Rakefile index c8de5b78..4eb22ade 100644 --- a/Rakefile +++ b/Rakefile @@ -36,6 +36,7 @@ task :compile_scenario do lib/jquery/jquery-1.4.2.js \ src/scenario/angular.prefix \ src/Angular.js \ + src/jqLite.js \ src/JSON.js \ src/Scope.js \ src/Parser.js \ diff --git a/example/buzz/buzz.css b/example/buzz/buzz.css new file mode 100644 index 00000000..5fd5763d --- /dev/null +++ b/example/buzz/buzz.css @@ -0,0 +1,89 @@ +body { + background: -webkit-gradient(linear, left top, left 100, from(#bbb), to(#fff)); + background-repeat: no-repeat; + margin: 0px; + font-family: sans-serif; + font-size: 12px; +} + +body > div { + border-top: 1px solid white; + border-bottom: 1px solid black; + text-align: center; + background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#888)); + -webkit-background-origin: padding; -webkit-background-clip: content; +} +body > div button { + margin: 5px; +} + +body > div span:FIRST-CHILD { + float: left; + font-family: monospace; + font-size: 1.5em; + color: black; + padding: 2px 5px; +} + +body > div span:last-child { + float: right; +} + +ul { + list-style: none; + padding: 10px; + margin: 0; +} + +body > ul > li { + border: 1px solid black; + margin: 15px 5px; + padding: 0; + -webkit-box-shadow: 5px 5px 5px #888; +} + +body > ul > li > h1 { + margin: 0; + background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#999)); + font-size: 13px; + border-bottom: 1px solid black; +} + +h1 > img, +li > img { + max-height: 30px; + max-width: 30px; + vertical-align: middle; + padding: 3px; +} + +a > img { + margin-right: 5px; + margin-top: 5px; +} + +body > ul > li > h1 > a:last-child { + float: right; + margin: 10px; +} + +body > ul > li > div { + background-color: white; + background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); + margin: 0; + padding: 10px; +} + +body > ul > li ul { + margin: 0; + padding: 0; + margin-left: 5px; + border-left: 5px solid lightgray; +} + +body > ul > li ul > li { + margin: 0; + padding: 10px; + background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); +} + diff --git a/example/buzz/buzz.html b/example/buzz/buzz.html new file mode 100644 index 00000000..a6777ff8 --- /dev/null +++ b/example/buzz/buzz.html @@ -0,0 +1,50 @@ + + + + + + + + + + +
+ <angular/> Buzz + + filter: + + + + user: + + + +
+ + + diff --git a/example/buzz/buzz.js b/example/buzz/buzz.js new file mode 100644 index 00000000..40813d16 --- /dev/null +++ b/example/buzz/buzz.js @@ -0,0 +1,46 @@ +angular.service('myApplication', function($resource){ + this.Activity = $resource( + 'https://www.googleapis.com/buzz/v1/activities/:userId/:visibility/:activityId/:comments', + {alt:'json', callback:'JSON_CALLBACK'}, + { + get: {method:'JSON', params:{visibility:'@self'}}, + replies: {method:'JSON', params:{visibility:'@self', comments:'@comments'}} + }); +}, {inject:['$resource']}); + +function BuzzController(){ + this.$watch('$location.hashPath', this.userChange); +} +BuzzController.prototype = { + userChange: function(){ + this.userId = this.$location.hashPath; + this.activities = this.Activity.get({userId:this.userId}); + }, + + expandReplies: function(activity) { + var self = this; + if (activity.replies) { + activity.replies.show = !activity.replies.show; + } else { + activity.replies = this.Activity.replies({userId:this.userId, activityId:activity.id}, function(){ + activity.replies.show = true; + }); + } + } +}; + +angular.widget('my:expand', function(element){ + element.css('display', 'block'); + this.descend(true); + return function(element) { + element.hide(); + var watch = element.attr('expand'); + this.$watch(watch, function(value){ + if (value) { + element.delay(0).slideDown('slow'); + } else { + element.slideUp('slow'); + } + }); + }; +}); diff --git a/example/memoryLeak.html b/example/memoryLeak.html index 9e5f512d..19b0d45d 100644 --- a/example/memoryLeak.html +++ b/example/memoryLeak.html @@ -48,8 +48,8 @@ - - + +
diff --git a/example/temp.html b/example/temp.html index d07a6948..337f7fba 100644 --- a/example/temp.html +++ b/example/temp.html @@ -1,13 +1,10 @@ - - + + - + - - {{$location.hashSearch.order}}
- A
- B
- C
- {{$location.hashSearch.order}}
+ + Hello {{'World'}}! diff --git a/example/tweeter/tweeter_addressbook.html b/example/tweeter/tweeter_addressbook.html index 4844c035..ba915cb1 100644 --- a/example/tweeter/tweeter_addressbook.html +++ b/example/tweeter/tweeter_addressbook.html @@ -8,25 +8,25 @@ - +

Address Book

[ Filter: ]
-
+
@@ -37,7 +37,7 @@ - +
@@ -58,16 +58,16 @@ tweets={{tweets}}

Tweets: {{$anchor.user}}

[ Filter: - | << All + | << All ]
Loading...
    -
  • +
  • - [ {{user.nickname || user.name || user.screen_name }} - | + + [ {{user.nickname || user.name || user.screen_name }} + | + ]: {{tweet.text | linky}} {{tweet.created_at}} diff --git a/example/tweeter/tweeter_demo.html b/example/tweeter/tweeter_demo.html index 138d4e2b..a5ba95ba 100644 --- a/example/tweeter/tweeter_demo.html +++ b/example/tweeter/tweeter_demo.html @@ -8,19 +8,19 @@ - + (TODO: I should fetch current tweets)

    Tweets: {{$anchor.user}}

    [ Filter: (TODO: this should act as search box) - | << All + | << All ]
    Loading...
      -
    • +
    • - [ {{tweet.user.nickname || tweet.user.name || tweet.user.screen_name }} + [ {{tweet.user.nickname || tweet.user.name || tweet.user.screen_name }} ]: {{tweet.text}} (TODO: I want urls as links) {{tweet.created_at}} diff --git a/java b/java new file mode 100755 index 00000000..da0e133b --- /dev/null +++ b/java @@ -0,0 +1,2 @@ +#!/bin/sh +/System/Library/Frameworks/JavaVM.framework/Versions/1.6/Commands/java $@ diff --git a/scenario/application-account.html b/scenario/application-account.html index a43deffc..81176df7 100644 --- a/scenario/application-account.html +++ b/scenario/application-account.html @@ -1,6 +1,6 @@ -
      +
      account page goes here! - +
      diff --git a/scenario/application.html b/scenario/application.html index 6b6ced69..5d5bb809 100644 --- a/scenario/application.html +++ b/scenario/application.html @@ -16,14 +16,14 @@ - + [ login | account ] -
      login screen
      - +
      login screen
      +       diff --git a/scenario/cross-site-post/index.html b/scenario/cross-site-post/index.html index 3ff6af85..d7a87d3b 100644 --- a/scenario/cross-site-post/index.html +++ b/scenario/cross-site-post/index.html @@ -4,7 +4,7 @@ - + 
      people = {{people}}
      diff --git a/scenario/datastore.html b/scenario/datastore.html index 525d3636..1720b3bc 100644 --- a/scenario/datastore.html +++ b/scenario/datastore.html @@ -8,9 +8,9 @@ $(document).ready(function(){angular.compile(document).init();}); - +

      {{book.$id}}

      -
    • +
    • {{book.name}}
      • diff --git a/scenario/perf.html b/scenario/perf.html index 50a8d28f..94af8b69 100644 --- a/scenario/perf.html +++ b/scenario/perf.html @@ -20,12 +20,12 @@ }; - +
      diff --git a/scenario/widgets.html b/scenario/widgets.html index 86269e86..2626843d 100644 --- a/scenario/widgets.html +++ b/scenario/widgets.html @@ -72,7 +72,7 @@ Buttons - ng-change
      ng-click + ng-change
      ng:click

      @@ -85,10 +85,10 @@ Repeaters - ng-repeat + ng:repeat
        -
      • {{name}}
        • +
      • {{name}}
      diff --git a/src/Angular.js b/src/Angular.js index 2b26c88d..850fe34c 100644 --- a/src/Angular.js +++ b/src/Angular.js @@ -3,8 +3,6 @@ if (typeof document.getAttribute == 'undefined') document.getAttribute = function() {}; -if (!window['console']) window['console']={'log':noop, 'error':noop}; - var consoleNode, PRIORITY_FIRST = -99999, PRIORITY_WATCH = -1000, @@ -18,11 +16,12 @@ var consoleNode, msie = !!/(msie) ([\w.]+)/.exec(lowercase(navigator.userAgent)), jqLite = jQuery || jqLiteWrap, slice = Array.prototype.slice, + error = window['console'] ? bind(window['console'], window['console']['error'] || noop) : noop, angular = window['angular'] || (window['angular'] = {}), angularTextMarkup = extensionMap(angular, 'textMarkup'), angularAttrMarkup = extensionMap(angular, 'attrMarkup'), angularDirective = extensionMap(angular, 'directive'), - angularWidget = extensionMap(angular, 'widget'), + angularWidget = extensionMap(angular, 'widget', lowercase), angularValidator = extensionMap(angular, 'validator'), angularFilter = extensionMap(angular, 'filter'), angularFormatter = extensionMap(angular, 'formatter'), @@ -30,10 +29,6 @@ var consoleNode, angularCallbacks = extensionMap(angular, 'callbacks'), nodeName; -function angularAlert(){ - log(arguments); window.alert.apply(window, arguments); -} - function foreach(obj, iterator, context) { var key; if (obj) { @@ -78,11 +73,16 @@ function extend(dst) { return dst; } +function inherit(parent, extra) { + return extend(new (extend(function(){}, {prototype:parent}))(), extra); +}; + function noop() {} function identity($) {return $;} -function extensionMap(angular, name) { +function extensionMap(angular, name, transform) { var extPoint; return angular[name] || (extPoint = angular[name] = function (name, fn, prop){ + name = (transform || identity)(name); if (isDefined(fn)) { extPoint[name] = extend(fn, prop || {}); } @@ -173,50 +173,6 @@ function indexOf(array, obj) { return -1; } -function log(a, b, c){ - var console = window['console']; - switch(arguments.length) { - case 1: - console['log'](a); - break; - case 2: - console['log'](a, b); - break; - default: - console['log'](a, b, c); - break; - } -} - -function error(a, b, c){ - var console = window['console']; - switch(arguments.length) { - case 1: - console['error'](a); - break; - case 2: - console['error'](a, b); - break; - default: - console['error'](a, b, c); - break; - } -} - -function consoleLog(level, objs) { - var log = document.createElement("div"); - log.className = level; - var msg = ""; - var sep = ""; - for ( var i = 0; i < objs.length; i++) { - var obj = objs[i]; - msg += sep + (typeof obj == 'string' ? obj : toJson(obj)); - sep = " "; - } - log.appendChild(document.createTextNode(msg)); - consoleNode.appendChild(log); -} - function isLeafNode (node) { if (node) { switch (node.nodeName) { @@ -259,6 +215,32 @@ function copy(source, destination){ } } +function equals(o1, o2) { + if (o1 == o2) return true; + var t1 = typeof o1, t2 = typeof o2, length, key, keySet; + if (t1 == t2 && t1 == 'object') { + if (o1 instanceof Array) { + if ((length = o1.length) == o2.length) { + for(key=0; key -1) { - if (lastIndex < index) - results.push(string.substr(lastIndex, index - lastIndex)); - lastIndex = index; - - index = string.indexOf('}}', index); - index = index < 0 ? string.length : index + 2; - - results.push(string.substr(lastIndex, index - lastIndex)); - lastIndex = index; - } - if (lastIndex != string.length) - results.push(string.substr(lastIndex, string.length - lastIndex)); - return results.length === 0 ? [ string ] : results; -}; - -Binder.hasBinding = function(string) { - var bindings = Binder.parseBindings(string); - return bindings.length > 1 || Binder.binding(bindings[0]) !== null; -}; - -Binder.binding = function(string) { - var binding = string.replace(/\n/gm, ' ').match(/^\{\{(.*)\}\}$/); - return binding ? binding[1] : null; -}; - - -Binder.prototype = { - parseQueryString: function(query) { - var params = {}; - query.replace(/(?:^|&)([^&=]*)=?([^&]*)/g, - function (match, left, right) { - if (left) params[decodeURIComponent(left)] = decodeURIComponent(right); - }); - return params; - }, - - parseAnchor: function() { - var self = this, url = this.location['get']() || ""; - - var anchorIndex = url.indexOf('#'); - if (anchorIndex < 0) return; - var anchor = url.substring(anchorIndex + 1); - - var anchorQuery = this.parseQueryString(anchor); - foreach(self.anchor, function(newValue, key) { - delete self.anchor[key]; - }); - foreach(anchorQuery, function(newValue, key) { - self.anchor[key] = newValue; - }); - }, - - onUrlChange: function() { - this.parseAnchor(); - this.updateView(); - }, - - updateAnchor: function() { - var url = this.location['get']() || ""; - var anchorIndex = url.indexOf('#'); - if (anchorIndex > -1) - url = url.substring(0, anchorIndex); - url += "#"; - var sep = ''; - for (var key in this.anchor) { - var value = this.anchor[key]; - if (typeof value === 'undefined' || value === null) { - delete this.anchor[key]; - } else { - url += sep + encodeURIComponent(key); - if (value !== true) - url += "=" + encodeURIComponent(value); - sep = '&'; - } - } - this.location['set'](url); - return url; - }, - - updateView: function() { - var start = new Date().getTime(); - var scope = jQuery(this.doc).scope(); - scope.clearInvalid(); - scope.updateView(); - var end = new Date().getTime(); - this.updateAnchor(); - foreach(this.updateListeners, function(fn) {fn();}); - }, - - docFindWithSelf: function(exp){ - var doc = jQuery(this.doc); - var selection = doc.find(exp); - if (doc.is(exp)){ - selection = selection.andSelf(); - } - return selection; - }, - - executeInit: function() { - this.docFindWithSelf("[ng-init]").each(function() { - var jThis = jQuery(this); - var scope = jThis.scope(); - try { - scope.eval(jThis.attr('ng-init')); - } catch (e) { - alert("EVAL ERROR:\n" + jThis.attr('ng-init') + '\n' + toJson(e, true)); - } - }); - }, - - entity: function (scope) { - var self = this; - this.docFindWithSelf("[ng-entity]").attr("ng-watch", function() { - try { - var jNode = jQuery(this); - var decl = scope.entity(jNode.attr("ng-entity"), self.datastore); - return decl + (jNode.attr('ng-watch') || ""); - } catch (e) { - log(e); - alert(e); - } - }); - }, - - compile: function() { - var jNode = jQuery(this.doc); - if (this.config['autoSubmit']) { - var submits = this.docFindWithSelf(":submit").not("[ng-action]"); - submits.attr("ng-action", "$save()"); - submits.not(":disabled").not("ng-bind-attr").attr("ng-bind-attr", '{disabled:"{{$invalidWidgets}}"}'); - } - this.precompile(this.doc)(this.doc, jNode.scope(), ""); - this.docFindWithSelf("a[ng-action]").live('click', function (event) { - var jNode = jQuery(this); - var scope = jNode.scope(); - try { - scope.eval(jNode.attr('ng-action')); - jNode.removeAttr('ng-error'); - jNode.removeClass("ng-exception"); - } catch (e) { - jNode.addClass("ng-exception"); - jNode.attr('ng-error', toJson(e, true)); - } - scope.get('$updateView')(); - return false; - }); - }, - - translateBinding: function(node, parentPath, factories) { - var path = parentPath.concat(); - var offset = path.pop(); - var parts = Binder.parseBindings(node.nodeValue); - if (parts.length > 1 || Binder.binding(parts[0])) { - var parent = node.parentNode; - if (isLeafNode(parent)) { - parent.setAttribute('ng-bind-template', node.nodeValue); - factories.push({path:path, fn:function(node, scope, prefix) { - return new BindUpdater(node, node.getAttribute('ng-bind-template')); - }}); - } else { - for (var i = 0; i < parts.length; i++) { - var part = parts[i]; - var binding = Binder.binding(part); - var newNode; - if (binding) { - newNode = document.createElement("span"); - var jNewNode = jQuery(newNode); - jNewNode.attr("ng-bind", binding); - if (i === 0) { - factories.push({path:path.concat(offset + i), fn:this.ng_bind}); - } - } else if (msie && part.charAt(0) == ' ') { - newNode = document.createElement("span"); - newNode.innerHTML = ' ' + part.substring(1); - } else { - newNode = document.createTextNode(part); - } - parent.insertBefore(newNode, node); - } - } - parent.removeChild(node); - } - }, - - precompile: function(root) { - var factories = []; - this.precompileNode(root, [], factories); - return function (template, scope, prefix) { - var len = factories.length; - for (var i = 0; i < len; i++) { - var factory = factories[i]; - var node = template; - var path = factory.path; - for (var j = 0; j < path.length; j++) { - node = node.childNodes[path[j]]; - } - try { - scope.addWidget(factory.fn(node, scope, prefix)); - } catch (e) { - alert(e); - } - } - }; - }, - - precompileNode: function(node, path, factories) { - var nodeType = node.nodeType; - if (nodeType == Node.TEXT_NODE) { - this.translateBinding(node, path, factories); - return; - } else if (nodeType != Node.ELEMENT_NODE && nodeType != Node.DOCUMENT_NODE) { - return; - } - - if (!node.getAttribute) return; - var nonBindable = node.getAttribute('ng-non-bindable'); - if (nonBindable || nonBindable === "") return; - - var attributes = node.attributes; - if (attributes) { - var bindings = node.getAttribute('ng-bind-attr'); - node.removeAttribute('ng-bind-attr'); - bindings = bindings ? fromJson(bindings) : {}; - var attrLen = attributes.length; - for (var i = 0; i < attrLen; i++) { - var attr = attributes[i]; - var attrName = attr.name; - // http://www.glennjones.net/Post/809/getAttributehrefbug.htm - var attrValue = msie && attrName == 'href' ? - decodeURI(node.getAttribute(attrName, 2)) : attr.value; - if (Binder.hasBinding(attrValue)) { - bindings[attrName] = attrValue; - } - } - var json = toJson(bindings); - if (json.length > 2) { - node.setAttribute("ng-bind-attr", json); - } - } - - if (!node.getAttribute) log(node); - var repeaterExpression = node.getAttribute('ng-repeat'); - if (repeaterExpression) { - node.removeAttribute('ng-repeat'); - var precompiled = this.precompile(node); - var view = document.createComment("ng-repeat: " + repeaterExpression); - var parentNode = node.parentNode; - parentNode.insertBefore(view, node); - parentNode.removeChild(node); - function template(childScope, prefix, i) { - var clone = jQuery(node).clone(); - clone.css('display', ''); - clone.attr('ng-repeat-index', "" + i); - clone.data('scope', childScope); - precompiled(clone[0], childScope, prefix + i + ":"); - return clone; - } - factories.push({path:path, fn:function(node, scope, prefix) { - return new RepeaterUpdater(jQuery(node), repeaterExpression, template, prefix); - }}); - return; - } - - if (node.getAttribute('ng-eval')) factories.push({path:path, fn:this.ng_eval}); - if (node.getAttribute('ng-bind')) factories.push({path:path, fn:this.ng_bind}); - if (node.getAttribute('ng-bind-attr')) factories.push({path:path, fn:this.ng_bind_attr}); - if (node.getAttribute('ng-hide')) factories.push({path:path, fn:this.ng_hide}); - if (node.getAttribute('ng-show')) factories.push({path:path, fn:this.ng_show}); - if (node.getAttribute('ng-class')) factories.push({path:path, fn:this.ng_class}); - if (node.getAttribute('ng-class-odd')) factories.push({path:path, fn:this.ng_class_odd}); - if (node.getAttribute('ng-class-even')) factories.push({path:path, fn:this.ng_class_even}); - if (node.getAttribute('ng-style')) factories.push({path:path, fn:this.ng_style}); - if (node.getAttribute('ng-watch')) factories.push({path:path, fn:this.ng_watch}); - var nodeName = node.nodeName; - if ((nodeName == 'INPUT' ) || - nodeName == 'TEXTAREA' || - nodeName == 'SELECT' || - nodeName == 'BUTTON') { - var self = this; - factories.push({path:path, fn:function(node, scope, prefix) { - node.name = prefix + node.name.split(":").pop(); - return self.widgetFactory.createController(jQuery(node), scope); - }}); - } - if (nodeName == 'OPTION') { - var html = jQuery('' + - '' + - '' + - '' + - ''); -}; - -extend(FileController.prototype, { - 'cancel': noop, - 'complete': noop, - 'httpStatus': function(status) { - alert("httpStatus:" + this.scopeName + " status:" + status); - }, - 'ioError': function() { - alert("ioError:" + this.scopeName); - }, - 'open': function() { - alert("open:" + this.scopeName); - }, - 'progress':noop, - 'securityError': function() { - alert("securityError:" + this.scopeName); - }, - 'uploadCompleteData': function(data) { - var value = fromJson(data); - value.url = this.attachmentsPath + '/' + value.id + '/' + value.text; - this.view.find("input").attr('checked', true); - var scope = this.view.scope(); - this.value = value; - this.updateModel(scope); - this.value = null; - }, - 'select': function(name, size, type) { - this.name = name; - this.view.find("a").text(name).attr('href', name); - this.view.find("span").text(angular['filter']['bytes'](size)); - this.upload(); - }, - - updateModel: function(scope) { - var isChecked = this.view.find("input").attr('checked'); - var value = isChecked ? this.value : null; - if (this.lastValue === value) { - return false; - } else { - scope.set(this.scopeName, value); - return true; - } - }, - - updateView: function(scope) { - var modelValue = scope.get(this.scopeName); - if (modelValue && this.value !== modelValue) { - this.value = modelValue; - this.view.find("a"). - attr("href", this.value.url). - text(this.value.text); - this.view.find("span").text(angular['filter']['bytes'](this.value.size)); - } - this.view.find("input").attr('checked', !!modelValue); - }, - - upload: function() { - if (this.name) { - this.uploader['uploadFile'](this.attachmentsPath); - } - } -}); - -/////////////////////// -// NullController -/////////////////////// -function NullController(view) {this.view = view;}; -NullController.prototype = { - updateModel: function() { return true; }, - updateView: noop -}; -NullController.instance = new NullController(); - - -/////////////////////// -// ButtonController -/////////////////////// -var ButtonController = NullController; - -/////////////////////// -// TextController -/////////////////////// -function TextController(view, exp, formatter) { - this.view = view; - this.formatter = formatter; - this.exp = exp; - this.validator = view.getAttribute('ng-validate'); - this.required = typeof view.attributes['ng-required'] != "undefined"; - this.lastErrorText = null; - this.lastValue = undefined; - this.initialValue = this.formatter['parse'](view.value); - var widget = view.getAttribute('ng-widget'); - if (widget === 'datepicker') { - jQuery(view).datepicker(); - } -}; - -TextController.prototype = { - updateModel: function(scope) { - var value = this.formatter['parse'](this.view.value); - if (this.lastValue === value) { - return false; - } else { - scope.setEval(this.exp, value); - this.lastValue = value; - return true; - } - }, - - updateView: function(scope) { - var view = this.view; - var value = scope.get(this.exp); - if (typeof value === "undefined") { - value = this.initialValue; - scope.setEval(this.exp, value); - } - value = value ? value : ''; - if (!_(this.lastValue).isEqual(value)) { - view.value = this.formatter['format'](value); - this.lastValue = value; - } - - var isValidationError = false; - view.removeAttribute('ng-error'); - if (this.required) { - isValidationError = !(value && $.trim("" + value).length > 0); - } - var errorText = isValidationError ? "Required Value" : null; - if (!isValidationError && this.validator && value) { - errorText = scope.validate(this.validator, value, view); - isValidationError = !!errorText; - } - if (this.lastErrorText !== errorText) { - this.lastErrorText = isValidationError; - if (errorText && isVisible(view)) { - view.setAttribute('ng-error', errorText); - scope.markInvalid(this); - } - jQuery(view).toggleClass('ng-validation-error', isValidationError); - } - } -}; - -/////////////////////// -// CheckboxController -/////////////////////// -function CheckboxController(view, exp, formatter) { - this.view = view; - this.exp = exp; - this.lastValue = undefined; - this.formatter = formatter; - this.initialValue = this.formatter['parse'](view.checked ? view.value : ""); -}; - -CheckboxController.prototype = { - updateModel: function(scope) { - var input = this.view; - var value = input.checked ? input.value : ''; - value = this.formatter['parse'](value); - value = this.formatter['format'](value); - if (this.lastValue === value) { - return false; - } else { - scope.setEval(this.exp, this.formatter['parse'](value)); - this.lastValue = value; - return true; - } - }, - - updateView: function(scope) { - var input = this.view; - var value = scope.eval(this.exp); - if (typeof value === "undefined") { - value = this.initialValue; - scope.setEval(this.exp, value); - } - input.checked = this.formatter['parse'](input.value) == value; - } -}; - -/////////////////////// -// SelectController -/////////////////////// -function SelectController(view, exp) { - this.view = view; - this.exp = exp; - this.lastValue = undefined; - this.initialValue = view.value; -}; - -SelectController.prototype = { - updateModel: function(scope) { - var input = this.view; - if (input.selectedIndex < 0) { - scope.setEval(this.exp, null); - } else { - var value = this.view.value; - if (this.lastValue === value) { - return false; - } else { - scope.setEval(this.exp, value); - this.lastValue = value; - return true; - } - } - }, - - updateView: function(scope) { - var input = this.view; - var value = scope.get(this.exp); - if (typeof value === 'undefined') { - value = this.initialValue; - scope.setEval(this.exp, value); - } - if (value !== this.lastValue) { - input.value = value ? value : ""; - this.lastValue = value; - } - } -}; - -/////////////////////// -// MultiSelectController -/////////////////////// -function MultiSelectController(view, exp) { - this.view = view; - this.exp = exp; - this.lastValue = undefined; - this.initialValue = this.selected(); -}; - -MultiSelectController.prototype = { - selected: function () { - var value = []; - var options = this.view.options; - for ( var i = 0; i < options.length; i++) { - var option = options[i]; - if (option.selected) { - value.push(option.value); - } - } - return value; - }, - - updateModel: function(scope) { - var value = this.selected(); - // TODO: This is wrong! no caching going on here as we are always comparing arrays - if (this.lastValue === value) { - return false; - } else { - scope.setEval(this.exp, value); - this.lastValue = value; - return true; - } - }, - - updateView: function(scope) { - var input = this.view; - var selected = scope.get(this.exp); - if (typeof selected === "undefined") { - selected = this.initialValue; - scope.setEval(this.exp, selected); - } - if (selected !== this.lastValue) { - var options = input.options; - for ( var i = 0; i < options.length; i++) { - var option = options[i]; - option.selected = _.include(selected, option.value); - } - this.lastValue = selected; - } - } -}; - -/////////////////////// -// RadioController -/////////////////////// -function RadioController(view, exp) { - this.view = view; - this.exp = exp; - this.lastChecked = undefined; - this.lastValue = undefined; - this.inputValue = view.value; - this.initialValue = view.checked ? view.value : null; -}; - -RadioController.prototype = { - updateModel: function(scope) { - var input = this.view; - if (this.lastChecked) { - return false; - } else { - input.checked = true; - this.lastValue = scope.setEval(this.exp, this.inputValue); - this.lastChecked = true; - return true; - } - }, - - updateView: function(scope) { - var input = this.view; - var value = scope.get(this.exp); - if (this.initialValue && typeof value === "undefined") { - value = this.initialValue; - scope.setEval(this.exp, value); - } - if (this.lastValue != value) { - this.lastChecked = input.checked = this.inputValue == (''+value); - this.lastValue = value; - } - } -}; - -/////////////////////// -//ElementController -/////////////////////// -function BindUpdater(view, exp) { - this.view = view; - this.exp = Binder.parseBindings(exp); - this.hasError = false; -}; - -BindUpdater.toText = function(obj) { - var e = escapeHtml; - switch(typeof obj) { - case "string": - case "boolean": - case "number": - return e(obj); - case "function": - return BindUpdater.toText(obj()); - case "object": - if (isNode(obj)) { - return outerHTML(obj); - } else if (obj instanceof angular.filter.Meta) { - switch(typeof obj.html) { - case "string": - case "number": - return obj.html; - case "function": - return obj.html(); - case "object": - if (isNode(obj.html)) - return outerHTML(obj.html); - default: - break; - } - switch(typeof obj.text) { - case "string": - case "number": - return e(obj.text); - case "function": - return e(obj.text()); - default: - break; - } - } - if (obj === null) - return ""; - return e(toJson(obj, true)); - default: - return ""; - } -}; - -BindUpdater.prototype = { - updateModel: noop, - updateView: function(scope) { - var html = []; - var parts = this.exp; - var length = parts.length; - for(var i=0; i iteratorCounter; --r) { - this.children.pop().element.remove(); - } - // Special case for option in select - if (child && child.element[0].nodeName === "OPTION") { - var select = jQuery(child.element[0].parentNode); - var cntl = select.data('controller'); - if (cntl) { - cntl.lastValue = undefined; - cntl.updateView(scope); - } - } - }); - } -}; - -////////////////////////////////// -// PopUp -////////////////////////////////// - -function PopUp(doc) { - this.doc = doc; -}; - -PopUp.OUT_EVENT = "mouseleave mouseout click dblclick keypress keyup"; - -PopUp.onOver = function(e) { - PopUp.onOut(); - var jNode = jQuery(this); - jNode.bind(PopUp.OUT_EVENT, PopUp.onOut); - var position = jNode.position(); - var de = document.documentElement; - var w = self.innerWidth || (de && de.clientWidth) || document.body.clientWidth; - var hasArea = w - position.left; - var width = 300; - var title = jNode.hasClass("ng-exception") ? "EXCEPTION:" : "Validation error..."; - var msg = jNode.attr("ng-error"); - - var x; - var arrowPos = hasArea>(width+75) ? "left" : "right"; - var tip = jQuery( - "
      " + - "
      " + - "
      "+title+"
      " + - "
      "+msg+"
      " + - "
      "); - jQuery("body").append(tip); - if(arrowPos === 'left'){ - x = position.left + this.offsetWidth + 11; - }else{ - x = position.left - (width + 15); - tip.find('.ng-arrow-right').css({left:width+1}); - } - - tip.css({left: x+"px", top: (position.top - 3)+"px"}); - return true; -}; - -PopUp.onOut = function() { - jQuery('#ng-callout'). - unbind(PopUp.OUT_EVENT, PopUp.onOut). - remove(); - return true; -}; - -PopUp.prototype = { - bind: function () { - var self = this; - this.doc.find('.ng-validation-error,.ng-exception'). - live("mouseover", PopUp.onOver); - } -}; - -////////////////////////////////// -// Status -////////////////////////////////// - -function NullStatus(body) { -}; - -NullStatus.prototype = { - beginRequest:function(){}, - endRequest:function(){} -}; - -function Status(body) { - this.requestCount = 0; - this.body = body; -}; - -Status.DOM ='
      loading....
      '; - -Status.prototype = { - beginRequest: function () { - if (this.requestCount === 0) { - (this.loader = this.loader || this.body.append(Status.DOM).find("#ng-loading")).show(); - } - this.requestCount++; - }, - - endRequest: function () { - this.requestCount--; - if (this.requestCount === 0) { - this.loader.hide("fold"); - } - } -}; diff --git a/src/directives.js b/src/directives.js index cabf0c23..ffe37890 100644 --- a/src/directives.js +++ b/src/directives.js @@ -1,10 +1,10 @@ -angularDirective("ng-init", function(expression){ +angularDirective("ng:init", function(expression){ return function(element){ this.$tryEval(expression, element); }; }); -angularDirective("ng-controller", function(expression){ +angularDirective("ng:controller", function(expression){ return function(element){ var controller = getter(window, expression, true) || getter(this, expression, true); if (!controller) @@ -16,22 +16,23 @@ angularDirective("ng-controller", function(expression){ }; }); -angularDirective("ng-eval", function(expression){ +angularDirective("ng:eval", function(expression){ return function(element){ this.$onEval(expression, element); }; }); -angularDirective("ng-bind", function(expression){ +angularDirective("ng:bind", function(expression){ return function(element) { var lastValue = noop, lastError = noop; this.$onEval(function() { - var error, - value = this.$tryEval(expression, function(e){ - error = toJson(e); - }), - isHtml, - isDomElement; + var error, value, isHtml, isDomElement, + oldElement = this.hasOwnProperty('$element') ? this.$element : undefined; + this.$element = element; + value = this.$tryEval(expression, function(e){ + error = toJson(e); + }); + this.$element = oldElement; if (lastValue === value && lastError == error) return; isHtml = value instanceof HTML, isDomElement = isElement(value); @@ -74,7 +75,9 @@ function compileBindTemplate(template){ }); }); bindTemplateCache[template] = fn = function(element){ - var parts = [], self = this; + var parts = [], self = this, + oldElement = this.hasOwnProperty('$element') ? self.$element : undefined; + self.$element = element; for ( var i = 0; i < bindings.length; i++) { var value = bindings[i].call(self, element); if (isElement(value)) @@ -83,13 +86,14 @@ function compileBindTemplate(template){ value = toJson(value, true); parts.push(value); }; + self.$element = oldElement; return parts.join(''); }; } return fn; } -angularDirective("ng-bind-template", function(expression){ +angularDirective("ng:bind-template", function(expression){ var templateFn = compileBindTemplate(expression); return function(element) { var lastValue; @@ -108,7 +112,7 @@ var REMOVE_ATTRIBUTES = { 'readonly':'readOnly', 'checked':'checked' }; -angularDirective("ng-bind-attr", function(expression){ +angularDirective("ng:bind-attr", function(expression){ return function(element){ var lastValue = {}; this.$onEval(function(){ @@ -134,17 +138,17 @@ angularDirective("ng-bind-attr", function(expression){ }; }); -angularWidget("@ng-non-bindable", noop); +angularWidget("@ng:non-bindable", noop); -angularWidget("@ng-repeat", function(expression, element){ - element.removeAttr('ng-repeat'); - element.replaceWith(this.comment("ng-repeat: " + expression)); +angularWidget("@ng:repeat", function(expression, element){ + element.removeAttr('ng:repeat'); + element.replaceWith(this.comment("ng:repeat: " + expression)); var template = this.compile(element); return function(reference){ var match = expression.match(/^\s*(.+)\s+in\s+(.*)\s*$/), lhs, rhs, valueIdent, keyIdent; if (! match) { - throw "Expected ng-repeat in form of 'item in collection' but got '" + + throw "Expected ng:repeat in form of 'item in collection' but got '" + expression + "'."; } lhs = match[1]; @@ -157,32 +161,32 @@ angularWidget("@ng-repeat", function(expression, element){ valueIdent = match[3] || match[1]; keyIdent = match[2]; - if (isUndefined(this.$eval(rhs))) this.$set(rhs, []); - var children = [], currentScope = this; this.$onEval(function(){ var index = 0, childCount = children.length, childScope, lastElement = reference, - collection = this.$tryEval(rhs, reference); + collection = this.$tryEval(rhs, reference), is_array = isArray(collection); for ( var key in collection) { - if (index < childCount) { - // reuse existing child - childScope = children[index]; - childScope[valueIdent] = collection[key]; - if (keyIdent) childScope[keyIdent] = key; - } else { - // grow children - childScope = template(element.clone(), createScope(currentScope)); - childScope[valueIdent] = collection[key]; - if (keyIdent) childScope[keyIdent] = key; - lastElement.after(childScope.$element); - childScope.$index = index; - childScope.$element.attr('ng-repeat-index', index); - childScope.$init(); - children.push(childScope); + if (!is_array || collection.hasOwnProperty(key)) { + if (index < childCount) { + // reuse existing child + childScope = children[index]; + childScope[valueIdent] = collection[key]; + if (keyIdent) childScope[keyIdent] = key; + } else { + // grow children + childScope = template(element.clone(), createScope(currentScope)); + childScope[valueIdent] = collection[key]; + if (keyIdent) childScope[keyIdent] = key; + lastElement.after(childScope.$element); + childScope.$index = index; + childScope.$element.attr('ng:repeat-index', index); + childScope.$init(); + children.push(childScope); + } + childScope.$eval(); + lastElement = childScope.$element; + index ++; } - childScope.$eval(); - lastElement = childScope.$element; - index ++; }; // shrink children while(children.length > index) { @@ -192,7 +196,7 @@ angularWidget("@ng-repeat", function(expression, element){ }; }); -angularDirective("ng-click", function(expression, element){ +angularDirective("ng:click", function(expression, element){ return function(element){ var self = this; element.bind('click', function(){ @@ -203,7 +207,7 @@ angularDirective("ng-click", function(expression, element){ }; }); -angularDirective("ng-watch", function(expression, element){ +angularDirective("ng:watch", function(expression, element){ return function(element){ var self = this; new Parser(expression).watch()({ @@ -221,8 +225,8 @@ function ngClass(selector) { var existing = element[0].className + ' '; return function(element){ this.$onEval(function(){ - var value = this.$eval(expression); if (selector(this.$index)) { + var value = this.$eval(expression); if (isArray(value)) value = value.join(' '); element[0].className = trim(existing + value); } @@ -231,11 +235,11 @@ function ngClass(selector) { }; } -angularDirective("ng-class", ngClass(function(){return true;})); -angularDirective("ng-class-odd", ngClass(function(i){return i % 2 === 0;})); -angularDirective("ng-class-even", ngClass(function(i){return i % 2 === 1;})); +angularDirective("ng:class", ngClass(function(){return true;})); +angularDirective("ng:class-odd", ngClass(function(i){return i % 2 === 0;})); +angularDirective("ng:class-even", ngClass(function(i){return i % 2 === 1;})); -angularDirective("ng-show", function(expression, element){ +angularDirective("ng:show", function(expression, element){ return function(element){ this.$onEval(function(){ element.css('display', toBoolean(this.$eval(expression)) ? '' : 'none'); @@ -243,7 +247,7 @@ angularDirective("ng-show", function(expression, element){ }; }); -angularDirective("ng-hide", function(expression, element){ +angularDirective("ng:hide", function(expression, element){ return function(element){ this.$onEval(function(){ element.css('display', toBoolean(this.$eval(expression)) ? 'none' : ''); @@ -251,10 +255,19 @@ angularDirective("ng-hide", function(expression, element){ }; }); -angularDirective("ng-style", function(expression, element){ +angularDirective("ng:style", function(expression, element){ return function(element){ + var resetStyle = getStyle(element); this.$onEval(function(){ - element.css(this.$eval(expression)); + var style = this.$eval(expression) || {}, key, mergedStyle = {}; + for(key in style) { + if (resetStyle[key] === undefined) resetStyle[key] = ''; + mergedStyle[key] = style[key]; + } + for(key in resetStyle) { + mergedStyle[key] = mergedStyle[key] || resetStyle[key]; + } + element.css(mergedStyle); }, element); }; }); diff --git a/src/filters.js b/src/filters.js index a911b935..99d17405 100644 --- a/src/filters.js +++ b/src/filters.js @@ -2,7 +2,7 @@ var angularFilterGoogleChartApi; foreach({ 'currency': function(amount){ - this.$element.toggleClass('ng-format-negative', amount < 0); + this.$element.toggleClass('ng:format-negative', amount < 0); return '$' + angularFilter['number'].apply(this, [amount, 2]); }, @@ -34,7 +34,11 @@ foreach({ return text; }, - 'date': function(amount) { + 'date': function(date) { + if (date instanceof Date) + return date.toLocaleDateString(); + else + return date; }, 'json': function(object) { diff --git a/src/jqLite.js b/src/jqLite.js index 68172fd8..cff9ae00 100644 --- a/src/jqLite.js +++ b/src/jqLite.js @@ -36,6 +36,23 @@ function jqClearData(element) { } } +function getStyle(element) { + var current = {}, style = element[0].style, value, name, i; + if (typeof style.length == 'number') { + for(i = 0; i < style.length; i++) { + name = style[i]; + current[name] = style[name]; + } + } else { + for (name in style) { + value = style[name]; + if (1*name != name && name != 'cssText' && value && typeof value == 'string' && value !='false') + current[name] = value; + } + } + return current; +} + function JQLite(element) { if (isElement(element)) { this[0] = element; diff --git a/src/markups.js b/src/markups.js index 74b293b8..ac2b5636 100644 --- a/src/markups.js +++ b/src/markups.js @@ -32,14 +32,14 @@ angularTextMarkup('{{}}', function(text, textNode, parentElement) { self = this; if (hasBindings(bindings)) { if (isLeafNode(parentElement[0])) { - parentElement.attr('ng-bind-template', text); + parentElement.attr('ng:bind-template', text); } else { var cursor = textNode, newElement; foreach(parseBindings(text), function(text){ var exp = binding(text); if (exp) { newElement = self.element('span'); - newElement.attr('ng-bind', exp); + newElement.attr('ng:bind', exp); } else { newElement = self.text(text); } @@ -68,18 +68,18 @@ angularTextMarkup('OPTION', function(text, textNode, parentElement){ } }); -var NG_BIND_ATTR = 'ng-bind-attr'; +var NG_BIND_ATTR = 'ng:bind-attr'; angularAttrMarkup('{{}}', function(value, name, element){ - if (name.substr(0, 3) != 'ng-') { - if (msie && name == 'src') - value = decodeURI(value); - var bindings = parseBindings(value), - bindAttr; - if (hasBindings(bindings)) { - element.removeAttr(name); - bindAttr = fromJson(element.attr(NG_BIND_ATTR) || "{}"); - bindAttr[name] = value; - element.attr(NG_BIND_ATTR, toJson(bindAttr)); - } + // don't process existing attribute markup + if (angularDirective(name) || angularDirective("@" + name)) return; + if (msie && name == 'src') + value = decodeURI(value); + var bindings = parseBindings(value), + bindAttr; + if (hasBindings(bindings)) { + element.removeAttr(name); + bindAttr = fromJson(element.attr(NG_BIND_ATTR) || "{}"); + bindAttr[name] = value; + element.attr(NG_BIND_ATTR, toJson(bindAttr)); } }); diff --git a/src/moveToAngularCom/ControlBar.js b/src/moveToAngularCom/ControlBar.js deleted file mode 100644 index 685beeb2..00000000 --- a/src/moveToAngularCom/ControlBar.js +++ /dev/null @@ -1,72 +0,0 @@ -function ControlBar(document, serverUrl, database) { - this._document = document; - this.serverUrl = serverUrl; - this.database = database; - this._window = window; - this.callbacks = []; -}; - -ControlBar.HTML = - '
      ' + - '
      ' + - '
      ' + - '' + - '
      ' + - '
      '; - - -ControlBar.FORBIDEN = - '
      ' + - 'Sorry, you do not have permission for this!'+ - '
      '; - -ControlBar.prototype = { - bind: function () { - }, - - login: function (loginSubmitFn) { - this.callbacks.push(loginSubmitFn); - if (this.callbacks.length == 1) { - this.doTemplate("/user_session/new.mini?database="+encodeURIComponent(this.database)+"&return_url=" + encodeURIComponent(this.urlWithoutAnchor())); - } - }, - - logout: function (loginSubmitFn) { - this.callbacks.push(loginSubmitFn); - if (this.callbacks.length == 1) { - this.doTemplate("/user_session/do_destroy.mini"); - } - }, - - urlWithoutAnchor: function (path) { - return this._window['location']['href'].split("#")[0]; - }, - - doTemplate: function (path) { - var self = this; - var id = new Date().getTime(); - var url = this.urlWithoutAnchor() + "#$iframe_notify=" + id; - var iframeHeight = 330; - var loginView = jQuery('