AC7976 dont place runtime vars in model (#8807)

src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.controller.js

@@ -1,42 +1,38 @@
 function textAreaController($scope, validationMessageService) {
 
     // macro parameter editor doesn't contains a config object,
-    // so we create a new one to hold any properties 
+    // so we create a new one to hold any properties
     if (!$scope.model.config) {
         $scope.model.config = {};
     }
-    $scope.model.count = 0;
 
-    if (!$scope.model.config.maxChars) {
-        $scope.model.config.maxChars = false;
-    }
-
-    $scope.model.maxlength = false;
-    if ($scope.model.config && $scope.model.config.maxChars) {
-        $scope.model.maxlength = true;
-    }
+    $scope.maxChars = $scope.model.config.maxChars || 0;
+    $scope.maxCharsLimit = ($scope.model.config && $scope.model.config.maxChars > 0);
+    $scope.charsCount = 0;
+    $scope.nearMaxLimit = false;
+    $scope.validLength = true;
 
     $scope.$on("formSubmitting", function() {
-        if ($scope.isLengthValid()) {
+        if ($scope.validLength) {
             $scope.textareaFieldForm.textarea.$setValidity("maxChars", true);
         } else {
             $scope.textareaFieldForm.textarea.$setValidity("maxChars", false);
         }
     });
 
-    $scope.isLengthValid = function() {
-        if (!$scope.model.maxlength) {
-            return true;
-        } 
-        return $scope.model.config.maxChars >= $scope.model.count;
+    function checkLengthVadility() {
+        $scope.validLength = !($scope.maxCharsLimit === true && $scope.charsCount > $scope.maxChars);
     }
 
-    $scope.model.change = function () {
+    $scope.change = function () {
         if ($scope.model.value) {
-            $scope.model.count = $scope.model.value.length;
+            $scope.charsCount = $scope.model.value.length;
+            checkLengthVadility();
+            $scope.nearMaxLimit = $scope.maxCharsLimit === true && $scope.validLength === true && $scope.charsCount > Math.max($scope.maxChars*.8, $scope.maxChars-50);
         }
     }
-    $scope.model.change();
+    $scope.model.onValueChanged = $scope.change;
+    $scope.change();
 
     // Set the message to use for when a mandatory field isn't completed.
     // Will either use the one provided on the property type or a localised default.

src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html

@@ -1,17 +1,29 @@
 <div ng-controller="Umbraco.PropertyEditors.textAreaController">
     <ng-form name="textareaFieldForm">
-        <textarea ng-model="model.value" id="{{model.alias}}" name="textarea" rows="{{model.config.rows || 10}}" class="umb-property-editor umb-textarea textstring" val-server="value" ng-keyup="model.change()" ng-trim="false" ng-required="model.validation.mandatory" aria-required="{{model.validation.mandatory}}"></textarea>
+        <textarea ng-model="model.value"
+            id="{{model.alias}}"
+            name="textarea"
+            rows="{{model.config.rows || 10}}"
+            class="umb-property-editor umb-textarea textstring"
+            val-server="value"
+            ng-keyup="change()"
+            ng-trim="false"
+            ng-required="model.validation.mandatory"
+            aria-required="{{model.validation.mandatory}}">
+        </textarea>
 
         <span ng-messages="textareaFieldForm.textarea.$error" show-validation-on-submit >
             <span class="help-inline" ng-message="required">{{mandatoryMessage}}</span>
             <span class="help-inline" ng-message="valServer">{{textareaFieldForm.textarea.errorMsg}}</span>
         </span>
 
-        <div class="help" ng-if="model.maxlength === true && model.count >= (model.config.maxChars*.8) && model.count <= model.config.maxChars">
-            <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]" watch-tokens="true">%0% characters left.</localize>
+        <div class="help" ng-if="nearMaxLimit">
+            <p class="sr-only" tabindex="0">{{model.label}} <localize key="textbox_characters_left" tokens="[maxChars - charsCount]" watch-tokens="true">%0% characters left.</localize></p>
+            <p aria-hidden="true"><localize key="textbox_characters_left" tokens="[maxChars - charsCount]" watch-tokens="true">%0% characters left.</localize></p>
         </div>
-        <div class="help text-error" ng-if="!isLengthValid()">
-            <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]" watch-tokens="true">Maximum %0% characters, <strong>%1%</strong> too many.</localize>
+        <div class="help text-error" ng-if="validLength === false">
+            <p class="sr-only" tabindex="0">{{model.label}} <localize key="textbox_characters_exceed" tokens="[maxChars, charsCount - maxChars]" watch-tokens="true">Maximum %0% characters, <strong>%1%</strong> too many.</localize></p>
+            <p aria-hidden="true"><localize key="textbox_characters_exceed" tokens="[maxChars, charsCount - maxChars]" watch-tokens="true">Maximum %0% characters, <strong>%1%</strong> too many.</localize></p>
         </div>
 
     </ng-form>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.controller.js

@@ -4,37 +4,41 @@ function textboxController($scope, validationMessageService) {
     if (!$scope.model.config) {
         $scope.model.config = {};
     }
-    $scope.model.count = 0;
-    if (!$scope.model.config.maxChars) {
-        // 500 is the maximum number that can be stored
-        // in the database, so set it to the max, even
-        // if no max is specified in the config
-        $scope.model.config.maxChars = 500;
-    }
+
+    // 512 is the maximum number that can be stored
+    // in the database, so set it to the max, even
+    // if no max is specified in the config
+    $scope.maxChars = Math.min($scope.model.config.maxChars || 512, 512);
+    $scope.charsCount = 0;
+    $scope.nearMaxLimit = false;
+    $scope.validLength = true;
 
     $scope.$on("formSubmitting", function() {
-        if ($scope.isLengthValid()) {
+        if ($scope.validLength === true) {
             $scope.textboxFieldForm.textbox.$setValidity("maxChars", true);
         } else {
             $scope.textboxFieldForm.textbox.$setValidity("maxChars", false);
         }
     });
 
-    $scope.isLengthValid = function() {
-        return $scope.model.config.maxChars >= $scope.model.count;
+    function checkLengthVadility() {
+        $scope.validLength = $scope.charsCount <= $scope.maxChars;
     }
 
-    $scope.model.change = function () {
+    $scope.change = function () {
         if ($scope.model.value) {
-            $scope.model.count = $scope.model.value.length;
+            $scope.charsCount = $scope.model.value.length;
+            checkLengthVadility();
+            $scope.nearMaxLimit = $scope.validLength && $scope.charsCount > Math.max($scope.maxChars*.8, $scope.maxChars-25);
         }
     }
-    $scope.model.change();
+    $scope.model.onValueChanged = $scope.change;
+    $scope.change();
 
     // Set the message to use for when a mandatory field isn't completed.
     // Will either use the one provided on the property type or a localised default.
     validationMessageService.getMandatoryMessage($scope.model.validation).then(function(value) {
         $scope.mandatoryMessage = value;
-    });    
+    });
 }
 angular.module('umbraco').controller("Umbraco.PropertyEditors.textboxController", textboxController);

src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html

@@ -1,27 +1,30 @@
 <div ng-controller="Umbraco.PropertyEditors.textboxController">
     <ng-form name="textboxFieldForm">
-        <input type="text" name="textbox" ng-model="model.value" id="{{model.alias}}"
+        <input type="text"
+               id="{{model.alias}}"
+               name="textbox"
+               ng-model="model.value"
                class="umb-property-editor umb-textstring textstring"
                val-server="value"
                ng-required="model.validation.mandatory"
                aria-required="{{model.validation.mandatory}}"
                aria-invalid="False"
                ng-trim="false"
-               ng-keyup="model.change()" />
-        
+               ng-keyup="change()" />
+
         <div ng-messages="textboxFieldForm.textbox.$error" show-validation-on-submit>
             <p class="sr-only" ng-message="valServer" tabindex="0">{{model.label}} {{textboxFieldForm.textbox.errorMsg}}</p>
             <p class="help-inline" ng-message="valServer" tabindex="0" aria-hidden="true">{{textboxFieldForm.textbox.errorMsg}}</p>
             <p class="help-inline" ng-message="required">{{mandatoryMessage}}</p>
         </div>
 
-        <div class="help" ng-if="model.count >= (model.config.maxChars*.8) && model.count <= model.config.maxChars">
-            <p class="sr-only" tabindex="0">{{model.label}} <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]" watch-tokens="true">%0% characters left.</localize></p>
-            <p aria-hidden="True"><localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]" watch-tokens="true">%0% characters left.</localize></p>
+        <div class="help" ng-if="nearMaxLimit">
+            <p class="sr-only" tabindex="0">{{model.label}} <localize key="textbox_characters_left" tokens="[maxChars - charsCount]" watch-tokens="true">%0% characters left.</localize></p>
+            <p aria-hidden="true"><localize key="textbox_characters_left" tokens="[maxChars - charsCount]" watch-tokens="true">%0% characters left.</localize></p>
         </div>
-        <div class="help text-error" ng-if="!isLengthValid()">
-            <p class="sr-only" tabindex="0">{{model.label}} <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]" watch-tokens="true">Maximum %0% characters, <strong>%1%</strong> too many.</localize></p>
-            <p aria-hidden="true"><localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]" watch-tokens="true">Maximum %0% characters, <strong>%1%</strong> too many.</localize></p>
+        <div class="help text-error" ng-if="validLength === false">
+            <p class="sr-only" tabindex="0">{{model.label}} <localize key="textbox_characters_exceed" tokens="[maxChars, charsCount - maxChars]" watch-tokens="true">Maximum %0% characters, <strong>%1%</strong> too many.</localize></p>
+            <p aria-hidden="true"><localize key="textbox_characters_exceed" tokens="[maxChars, charsCount - maxChars]" watch-tokens="true">Maximum %0% characters, <strong>%1%</strong> too many.</localize></p>
         </div>
 
     </ng-form>