Angular obfuscation factory
A few silly text encryption functions encapsulated as factories.
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<body ng-app="myApp">
<section ng-controller="AppCtrl">
<h1><i class="icon-hand-right"></i> {{m.name}} <i class="icon-hand-left"></i></h1>
<div>
<label for="name">Hello, I'm</label>
<input size="35" name="name" ng-model="m.name" type="text"
/><button class='btn'
ng-hide="m.name==m.src" ng-click="set()"><i class='icon-ok'></i> Set as default</button>
</div>
<div class='transform-div'>
<button class='btn' ng-click="reverseName()">Reverse</button>
<button class='btn' ng-click="rot13Name()">Rot13</button>
<button class='btn' ng-click="rev26Name()">Rev26</button>
<button class='btn' ng-click="shuffleName()">Shuffle</button>
<button class='btn' ng-click="unshuffleName()">Unshuffle</button>
</div>
<div class='reset-div'>
<button class='btn' ng-hide="m.name==m.src" ng-click="reset()"> <i class='icon-refresh'></i> Reset</button>
</div>
<div class='history'>
<h2>History:</h2>
<div class='empty' ng-hide="m.history.length">--empty--</div>
<ol>
<li ng-repeat="item in m.history">{{item}}</li>
</ol>
</div>
</section>
</body>
CSS
h1, h2 {
font-size:14px;
line-height:21px;
font-weight:bold;
margin:5px;
padding:4px;
background-color: #ffc;
text-align:center;
}
h2 {
font-size:1.2em;
background-color:#bbb;
text-align:left;
color:white;
}
input[type="text"]{
float:left;
margin-right:12px;
}
.reset-div button {
background-color:#ccf;
}
.transform-div, .reset-div {
width:100%;
padding:5px;
clear:both;
}
.reset-div {
height:28px;
}
.empty {
color:#ccc;
}
.history {
background-color:#eee;
}
JavaScript
var app = angular.module('myApp', []);
app.controller('AppCtrl', function AppCFactory) {
$scope.m = {/*new model*/};
$scope.m.src = 'an Angular noob.';
$scope.m.name = '' + $scope.m.src;
$scope.m.shuffled = 0;
$scope.m.history = [];
$scope.set = function () {
$scope.m.src = $scope.m.name;
$scope.m.shuffled = 0;
$scope.m.history = [];
}
$scope.reset = function () {
$scope.m.name = $scope.m.src;
$scope.m.shuffled = 0;
$scope.m.history = [];
}
$scope.reverseName = function () {
$scope.m.name = nametrickFactory.reverse($scope.m.name);
$scope.m.history.push('reversed');
};
$scope.shuffleName = function () {
$scope.m.name = nametrickFactory.shuffle($scope.m.name);
$scope.m.shuffled++;
$scope.m.history.push('shuffle (shuffled:' + $scope.m.shuffled + ")");
};
$scope.unshuffleName = function () {
$scope.m.name = nametrickFactory.unshuffle($scope.m.name);
$scope.m.shuffled--;
$scope.m.history.push('unshuffle (shuffled:' + $scope.m.shuffled + ")");
};
$scope.rot13Name = function () {
$scope.m.name = nametrickFactory.rot13($scope.m.name);
$scope.m.history.push('rot13');
};
$scope.rev26Name = function () {
$scope.m.name = nametrickFactory.rev26($scope.m.name);
$scope.m.history.push('rev26');
};
});
app.factory('nametrickFactory', function () {
return {
reverse: function (name) {
return name.split("").reverse().join("");
},
unshuffle: function (name) {
var arr = name.split("");
var isA = true;
var a = [];
var b = [];
while (arr.length) {
isA ? a.push(arr.shift()) : b.unshift(arr.shift());
isA = !isA;
}
return a.concat(b).join('');
},
shuffle: function (name) {
var arr =...