Skip to content

Instantly share code, notes, and snippets.

@markadrake
Created December 1, 2022 02:37
Show Gist options
  • Save markadrake/ab2ab70b39aac1be53baf748991e2d85 to your computer and use it in GitHub Desktop.
Save markadrake/ab2ab70b39aac1be53baf748991e2d85 to your computer and use it in GitHub Desktop.
Custom Umbraco Property Editor Tutorial: Character Counts
{
propertyEditors: [{
alias: "Scylla.TextboxWithCharacterCount",
name: "Textbox with Character Count",
editor: {
view: "~/App_Plugins/TextboxWithCharacterCount/TextboxWithCharacterCount.html"
},
prevalues: {
fields: [{
label: "Maximum",
description: "Maximum number of characters for validation.",
key: "maxCount",
view: "number"
}]
},
}],
javascript: [
'~/App_Plugins/TextboxWithCharacterCount/TextboxWithCharacterCount.controller.js'
]
}
angular.module("umbraco").controller("Scylla.TextboxWithCharacterCount", function ($scope)
{
// Loads Default Max Count
$scope.model.maxCount = $scope.model.config.maxCount;
// Attempts to re-define Max Count by description text
if ($scope.model.description)
{
var maxSetInDescription = $scope.model.description.match(/\d+/);
if (maxSetInDescription)
{
var newMax = parseInt(maxSetInDescription[0]);
if (newMax > 0)
$scope.model.maxCount = $scope.model.description.match(/\d+/)[0];
}
}
// Calculate a low and medium range so we can set the CSS appropriately
var low = Math.ceil($scope.model.maxCount * 0.25);
var med = Math.ceil($scope.model.maxCount * 0.5);
// Called when changes are detected within the textbox
$scope.update = function()
{
// Calculate the remaining characters
$scope.model.remainingCount = $scope.model.maxCount - $scope.model.value.length
// Is our maximum limit reached?
if ($scope.model.remainingCount <= 0)
{
$scope.model.remainingCount = 0;
$scope.model.value = $scope.model.value.substr(0, $scope.model.maxCount)
return;
}
// Set the correct CSS class
if ($scope.model.remainingCount <= low)
$scope.model.className = "red";
else if ($scope.model.remainingCount <= med)
$scope.model.className = "orange";
else
$scope.model.className = "green";
}
// Run the update method at start
$scope.update();
});
<div ng-controller="Scylla.TextboxWithCharacterCount" id="Scylla_TextboxWithCharacterCount">
<input ng-model="model.value"
ng-change="update()"
class="umb-editor umb-Textbox Textbox"
type="text" /><br />
<small ng-class="model.className">{{model.remainingCount}} chars remaining</small>
</div>
<style>
#Scylla_TextboxWithCharacterCount
.red {
color: red;
}
#Scylla_TextboxWithCharacterCount
.yellow {
color: yellow;
}
#Scylla_TextboxWithCharacterCount
.orange {
color: orange;
}
#Scylla_TextboxWithCharacterCount
.green {
color: green;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment