JSFiddle - React, Tailwind, and code Playground

by ipeshev

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div ng-controller="SampleCtrl" >
    <div protected-button ng-model="protected">
      <button class="dangerous-trigger" ng-disabled="locked" ng-click="somethingDangerous()"><i class="fa fa-trash" aria-hidden="true"></i></button>
    </div>
    Click me 
</div>

CSS

button {

  font-size:1rem;

}

.protected-button {

  height:30px;
  width:80px;
  overflow:hidden;
  position:relative;
  border:1px solid black;
  border-radius:3px;
}
.protected-button button {
  outline:none;
}
.unlock {
  width:80px;
  height:30px;
  background:blue;
  color:white;
  border:none;
}
.container {
  position:absolute;
  left:0px;
  right:0px;
  transition:all 0.5s;
}
.container.unlocked {
  left:-40px;
}
.container.unlocked button.unlock i {
  margin-left: 40px;
}
.transcluded {
  position: absolute;
}
.dangerous-trigger {
  width:40px;
  height:30px;
  background:red;
  color:white;
  border:none;
}

JavaScript

/*
Example of protected button, it is tripple protected with ng-disabled but also provides to caller locked property as ng-model, and also it is not visible ( but that can be broken with some CSS regression) so we have to tripple the protection.
*/
angular.module('ui.directives', []).directive('protectedButton', 
    function() {
      return {
        restrict: 'EAC',
        require: '?ngModel',
        transclude:true,
        link: function($scope, element, attrs, controller) {
          element.addClass("protected-button");
          $scope.toggleLock = function(){
          	$scope.locked = !$scope.locked;
            controller.$setViewValue($scope.locked);
          }
          $scope.locked = true;
        },
        template: "<div class='container'  ng-class='{unlocked:!locked}'><button class='unlock' ng-click='toggleLock()' ><i class='fa' ng-class='{\"fa-lock\":locked,\"fa-unlock\":!locked,}'aria-hidden='true'></i></button>"+
        					"<ng-transclude class='transcluded'></ng-transclude></div>"
      };
    }
  );

angular.module('test', ['ui.directives']).controller("SampleCtrl", function($scope){
		$scope.somethingDangerous = function(){
    	if(!$scope.protected){
      	alert("Opss, data gone to trash");
      } else {
      	alert("Trash bin is locked");
      }
    };
    $scope.protected = true;
    
});