Added support for localized placeholder values

+ rewrote Angular controller to use view model

src/Skybrud.Umbraco.TextBox/App_Plugins/Skybrud.TextBox/Scripts/Controllers/TextBox.js

@@ -1,45 +1,64 @@
 angular.module("umbraco").controller("Skybrud.TextBox.Controller", function ($scope, localizationService) {
 
-    if (!$scope.model.value) $scope.model.value = "";
+    const vm = this;
 
-    // Initialize the configuration
-    var limit = parseInt($scope.model.config.maxChars) || 0;
-    var enforce = Object.toBoolean($scope.model.config.enforce);
+    vm.update = function () {
 
-    $scope.update = function () {
-
-        if (limit < 1) {
-            $scope.info = null;
+        if (vm.limit < 1) {
+            vm.info = null;
             return;
         }
 
-        if ($scope.model.value.length > limit && enforce) {
-            $scope.info = `You cannot write more than <strong class="negative">${limit}</strong> characters!`;
+        if ($scope.model.value.length > vm.limit && vm.enforce) {
+
+            vm.info = `You cannot write more than <strong class="negative">${vm.limit}</strong> characters!`;
 
-            localizationService.localize("skyTextBox_info3", [limit]).then(function (value) {
-                $scope.info = value;
+            localizationService.localize("skyTextBox_info3", [vm.limit]).then(function (value) {
+                vm.info = value;
             });
 
-            $scope.model.value = $scope.model.value.substr(0, limit);
+            $scope.model.value = $scope.model.value.substr(0, vm.limit);
 
         } else {
 
-            const remaining = (limit - $scope.model.value.length);
+            const remaining = (vm.limit - $scope.model.value.length);
 
-            if ($scope.model.value.length > limit) {
+            if ($scope.model.value.length > vm.limit) {
                 localizationService.localize("skyTextBox_info2", [remaining]).then(function (value) {
-                    $scope.info = value;
+                    vm.info = value;
                 });
             } else {
                 localizationService.localize("skyTextBox_info1", [remaining]).then(function (value) {
-                    $scope.info = value;
+                    vm.info = value;
                 });
             }
 
         }
 
     };
 
-    $scope.update();
+    function init() {
+
+        if (!$scope.model.value) $scope.model.value = "";
+        if (!$scope.model.config) $scope.model.config = {};
+
+        // Initialize the configuration
+        vm.limit = parseInt($scope.model.config.maxChars) || 0;
+        vm.enforce = Object.toBoolean($scope.model.config.enforce);
+        vm.placeholder = $scope.model.config.placeholder;
+
+        // If the placeholder starts with a hash, it's most likely a translation
+        if (vm.placeholder && vm.placeholder.indexOf("#") === 0) {
+            localizationService.localize(vm.placeholder.substr(1)).then(function (value) {
+                if (value.indexOf("[") === 0) return;
+                vm.placeholder = value;
+            });
+        }
+
+        vm.update();
+
+    };
+
+    init();
 
 });

src/Skybrud.Umbraco.TextBox/App_Plugins/Skybrud.TextBox/Views/TextArea.html

@@ -1,4 +1,4 @@
-<div class="SkybrudTextBox SkybrudTextArea" ng-controller="Skybrud.TextBox.Controller">
-    <textarea id="{{model.alias}}" ng-model="model.value" ng-change="update()" class="umb-property-editor umb-textarea textstring" rows="{{model.config.rows || 10}}" placeholder="{{model.config.placeholder}}"></textarea>
-    <div ng-if="info" class="info" ng-bind-html="info"></div>
+<div class="SkybrudTextBox SkybrudTextArea" ng-controller="Skybrud.TextBox.Controller as vm">
+    <textarea id="{{model.alias}}" ng-model="model.value" ng-change="vm.update()" class="umb-property-editor umb-textarea textstring" rows="{{model.config.rows || 10}}" placeholder="{{vm.placeholder}}"></textarea>
+    <div ng-if="vm.info" class="info" ng-bind-html="vm.info"></div>
 </div>

src/Skybrud.Umbraco.TextBox/App_Plugins/Skybrud.TextBox/Views/TextBox.html

@@ -1,4 +1,4 @@
-<div class="SkybrudTextBox" ng-controller="Skybrud.TextBox.Controller">
-    <input id="{{model.alias}}" ng-model="model.value" ng-change="update()" type="text" class="umb-property-editor umb-textstring textstring" placeholder="{{model.config.placeholder}}"/>
-    <div ng-if="info" class="info" ng-bind-html="info"></div>
+<div class="SkybrudTextBox" ng-controller="Skybrud.TextBox.Controller as vm">
+    <input id="{{model.alias}}" ng-model="model.value" ng-change="vm.update()" type="text" class="umb-property-editor umb-textstring textstring" placeholder="{{vm.placeholder}}"/>
+    <div ng-if="vm.info" class="info" ng-bind-html="vm.info"></div>
 </div>