@angular-wave/angular.ts 0.0.71 → 0.0.73

package/src/directive/messages/messages.js

@@ -1,198 +1,203 @@
-import { forEach, isString } from "../../shared/utils";
-
-ngMessagesDirective.$inject = ["$animate"];
-export function ngMessagesDirective($animate) {
-  const ACTIVE_CLASS = "ng-active";
-  const INACTIVE_CLASS = "ng-inactive";
-  return {
-    require: "ngMessages",
-    restrict: "AE",
-    controller: function ($element, $scope, $attrs) {
-      const ctrl = this;
-      let latestKey = 0;
-      let nextAttachId = 0;
-      const messages = {};
-      let renderLater;
-      let cachedCollection;
-
-      this.head = undefined;
-      this.default = undefined;
-      this.messages = messages;
-
-      this.getAttachId = function getAttachId() {
-        return nextAttachId++;
-      };
+import { isString } from "../../shared/utils";
+
+const ACTIVE_CLASS = "ng-active";
+const INACTIVE_CLASS = "ng-inactive";
+
+class NgMessageCtrl {
+  /**
+   * @param {import('../../shared/jqlite/jqlite').JQLite} $element
+   * @param {import('../../core/scope/scope').Scope} $scope
+   * @param {import('../../core/compile/attributes').Attributes} $attrs
+   * @param {*} $animate
+   */
+  constructor($element, $scope, $attrs, $animate) {
+    this.$element = $element;
+    this.$scope = $scope;
+    this.$attrs = $attrs;
+    this.$animate = $animate;
+
+    this.latestKey = 0;
+    this.nextAttachId = 0;
+    this.messages = {};
+    this.renderLater = false;
+    this.cachedCollection = null;
+
+    this.head = undefined;
+    this.default = undefined;
+
+    this.$scope.$watchCollection(
+      this.$attrs["ngMessages"] || this.$attrs["for"],
+      this.render.bind(this),
+    );
+  }
 
-      this.render = function (collection) {
-        collection = collection || {};
-
-        renderLater = false;
-        cachedCollection = collection;
-
-        // this is true if the attribute is empty or if the attribute value is truthy
-        const multiple =
-          isAttrTruthy($scope, $attrs.ngMessagesMultiple) ||
-          isAttrTruthy($scope, $attrs.multiple);
-
-        const unmatchedMessages = [];
-        const matchedKeys = {};
-        let truthyKeys = 0;
-        let messageItem = ctrl.head;
-        let messageFound = false;
-        let totalMessages = 0;
-
-        // we use != instead of !== to allow for both undefined and null values
-        while (messageItem != null) {
-          totalMessages++;
-          const messageCtrl = messageItem.message;
-
-          let messageUsed = false;
-          if (!messageFound) {
-            forEach(collection, (value, key) => {
-              if (truthy(value) && !messageUsed) {
-                truthyKeys++;
-
-                if (messageCtrl.test(key)) {
-                  // this is to prevent the same error name from showing up twice
-                  if (matchedKeys[key]) return;
-                  matchedKeys[key] = true;
-
-                  messageUsed = true;
-                  messageCtrl.attach();
-                }
-              }
-            });
-          }
+  getAttachId() {
+    return this.nextAttachId++;
+  }
 
-          if (messageUsed) {
-            // unless we want to display multiple messages then we should
-            // set a flag here to avoid displaying the next message in the list
-            messageFound = !multiple;
-          } else {
-            unmatchedMessages.push(messageCtrl);
+  render(collection = {}) {
+    this.renderLater = false;
+    this.cachedCollection = collection;
+
+    const multiple =
+      isAttrTruthy(this.$scope, this.$attrs["ngMessagesMultiple"]) ||
+      isAttrTruthy(this.$scope, this.$attrs["multiple"]);
+
+    const unmatchedMessages = [];
+    const matchedKeys = {};
+    let truthyKeys = 0;
+    let messageItem = this.head;
+    let messageFound = false;
+    let totalMessages = 0;
+
+    while (messageItem != null) {
+      totalMessages++;
+      const messageCtrl = messageItem.message;
+      let messageUsed = false;
+
+      if (!messageFound) {
+        Object.entries(collection).forEach(([key, value]) => {
+          if (truthy(value) && !messageUsed) {
+            truthyKeys++;
+
+            if (messageCtrl.test(key)) {
+              if (matchedKeys[key]) return;
+              matchedKeys[key] = true;
+
+              messageUsed = true;
+              messageCtrl.attach();
+            }
           }
-
-          messageItem = messageItem.next;
-        }
-
-        forEach(unmatchedMessages, (messageCtrl) => {
-          messageCtrl.detach();
         });
+      }
 
-        const messageMatched = unmatchedMessages.length !== totalMessages;
-        const attachDefault = ctrl.default && !messageMatched && truthyKeys > 0;
+      if (messageUsed) {
+        messageFound = !multiple;
+      } else {
+        unmatchedMessages.push(messageCtrl);
+      }
 
-        if (attachDefault) {
-          ctrl.default.attach();
-        } else if (ctrl.default) {
-          ctrl.default.detach();
-        }
+      messageItem = messageItem.next;
+    }
 
-        if (messageMatched || attachDefault) {
-          $animate.setClass($element, ACTIVE_CLASS, INACTIVE_CLASS);
-        } else {
-          $animate.setClass($element, INACTIVE_CLASS, ACTIVE_CLASS);
-        }
-      };
+    unmatchedMessages.forEach((messageCtrl) => {
+      messageCtrl.detach();
+    });
 
-      $scope.$watchCollection($attrs.ngMessages || $attrs.for, ctrl.render);
+    const messageMatched = unmatchedMessages.length !== totalMessages;
+    const attachDefault = this.default && !messageMatched && truthyKeys > 0;
 
-      this.reRender = function () {
-        if (!renderLater) {
-          renderLater = true;
-          $scope.$evalAsync(() => {
-            if (renderLater && cachedCollection) {
-              ctrl.render(cachedCollection);
-            }
-          });
-        }
-      };
+    if (attachDefault) {
+      this.default.attach();
+    } else if (this.default) {
+      this.default.detach();
+    }
 
-      this.register = function (comment, messageCtrl, isDefault) {
-        if (isDefault) {
-          ctrl.default = messageCtrl;
-        } else {
-          const nextKey = latestKey.toString();
-          messages[nextKey] = {
-            message: messageCtrl,
-          };
-          insertMessageNode($element[0], comment, nextKey);
-          comment.$$ngMessageNode = nextKey;
-          latestKey++;
+    if (messageMatched || attachDefault) {
+      this.$animate.setClass(this.$element, ACTIVE_CLASS, INACTIVE_CLASS);
+    } else {
+      this.$animate.setClass(this.$element, INACTIVE_CLASS, ACTIVE_CLASS);
+    }
+  }
+
+  reRender() {
+    if (!this.renderLater) {
+      this.renderLater = true;
+      this.$scope.$evalAsync(() => {
+        if (this.renderLater && this.cachedCollection) {
+          this.render(this.cachedCollection);
         }
+      });
+    }
+  }
 
-        ctrl.reRender();
+  register(comment, messageCtrl, isDefault) {
+    if (isDefault) {
+      this.default = messageCtrl;
+    } else {
+      const nextKey = this.latestKey.toString();
+      this.messages[nextKey] = {
+        message: messageCtrl,
       };
+      this.insertMessageNode(this.$element[0], comment, nextKey);
+      comment.$$ngMessageNode = nextKey;
+      this.latestKey++;
+    }
 
-      this.deregister = function (comment, isDefault) {
-        if (isDefault) {
-          delete ctrl.default;
-        } else {
-          const key = comment.$$ngMessageNode;
-          delete comment.$$ngMessageNode;
-          removeMessageNode($element[0], comment, key);
-          delete messages[key];
-        }
-        ctrl.reRender();
-      };
+    this.reRender();
+  }
 
-      function findPreviousMessage(parent, comment) {
-        let prevNode = comment;
-        const parentLookup = [];
+  deregister(comment, isDefault) {
+    if (isDefault) {
+      delete this.default;
+    } else {
+      const key = comment.$$ngMessageNode;
+      delete comment.$$ngMessageNode;
+      this.removeMessageNode(this.$element[0], comment, key);
+      delete this.messages[key];
+    }
+    this.reRender();
+  }
 
-        while (prevNode && prevNode !== parent) {
-          const prevKey = prevNode.$$ngMessageNode;
-          if (prevKey && prevKey.length) {
-            return messages[prevKey];
-          }
+  findPreviousMessage(parent, comment) {
+    let prevNode = comment;
+    const parentLookup = [];
 
-          // dive deeper into the DOM and examine its children for any ngMessage
-          // comments that may be in an element that appears deeper in the list
-          if (
-            prevNode.childNodes.length &&
-            parentLookup.indexOf(prevNode) === -1
-          ) {
-            parentLookup.push(prevNode);
-            prevNode = prevNode.childNodes[prevNode.childNodes.length - 1];
-          } else if (prevNode.previousSibling) {
-            prevNode = prevNode.previousSibling;
-          } else {
-            prevNode = prevNode.parentNode;
-            parentLookup.push(prevNode);
-          }
-        }
+    while (prevNode && prevNode !== parent) {
+      const prevKey = prevNode.$$ngMessageNode;
+      if (prevKey && prevKey.length) {
+        return this.messages[prevKey];
       }
 
-      function insertMessageNode(parent, comment, key) {
-        const messageNode = messages[key];
-        if (!ctrl.head) {
-          ctrl.head = messageNode;
-        } else {
-          const match = findPreviousMessage(parent, comment);
-          if (match) {
-            messageNode.next = match.next;
-            match.next = messageNode;
-          } else {
-            messageNode.next = ctrl.head;
-            ctrl.head = messageNode;
-          }
-        }
+      if (prevNode.childNodes.length && parentLookup.indexOf(prevNode) === -1) {
+        parentLookup.push(prevNode);
+        prevNode = prevNode.childNodes[prevNode.childNodes.length - 1];
+      } else if (prevNode.previousSibling) {
+        prevNode = prevNode.previousSibling;
+      } else {
+        prevNode = prevNode.parentNode;
+        parentLookup.push(prevNode);
+      }
+    }
+  }
+
+  insertMessageNode(parent, comment, key) {
+    const messageNode = this.messages[key];
+    if (!this.head) {
+      this.head = messageNode;
+    } else {
+      const match = this.findPreviousMessage(parent, comment);
+      if (match) {
+        messageNode.next = match.next;
+        match.next = messageNode;
+      } else {
+        messageNode.next = this.head;
+        this.head = messageNode;
       }
+    }
+  }
 
-      function removeMessageNode(parent, comment, key) {
-        const messageNode = messages[key];
+  removeMessageNode(parent, comment, key) {
+    const messageNode = this.messages[key];
 
-        // This message node may have already been removed by a call to deregister()
-        if (!messageNode) return;
+    if (!messageNode) return;
 
-        const match = findPreviousMessage(parent, comment);
-        if (match) {
-          match.next = messageNode.next;
-        } else {
-          ctrl.head = messageNode.next;
-        }
-      }
-    },
+    const match = this.findPreviousMessage(parent, comment);
+    if (match) {
+      match.next = messageNode.next;
+    } else {
+      this.head = messageNode.next;
+    }
+  }
+}
+
+ngMessagesDirective.$inject = ["$animate"];
+export function ngMessagesDirective($animate) {
+  return {
+    require: "ngMessages",
+    restrict: "AE",
+    controller: ($element, $scope, $attrs) =>
+      new NgMessageCtrl($element, $scope, $attrs, $animate),
   };
 }
 

package/src/directive/messages/messages.spec.js

@@ -17,13 +17,13 @@ describe("ngMessages", () => {
       template: '<div ng-messages="col"><ng-transclude></ng-transclude></div>',
     }));
 
-    createInjector(["app"]).invoke(
-      (_$rootScope_, _$compile_, _$templateCache_) => {
+    window.angular
+      .bootstrap(document.getElementById("dummy"), ["app"])
+      .invoke((_$rootScope_, _$compile_, _$templateCache_) => {
         $rootScope = _$rootScope_;
         $compile = _$compile_;
         $templateCache = _$templateCache_;
-      },
-    );
+      });
   });
 
   function messageChildren(element) {