data:text/html, <html>
<head lang="en">
<meta charset="UTF-8">
<title>Simple Kanban</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.25/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.19.0/sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.min.js"></script>
<style type="text/css">
body{background:#e9e9e9}ul{list-style-type:none;padding:0;margin-top:2em;margin-bottom:2em}li{position:relative;display:bl;margin-bottom:1em;padding:1em;border-radius:5px;background-color:#fff;box-shadow:rgba(50,50,50,0.0901961) 0 1px}textarea{display:inline;background-color:#fff;border:0;width:100%;resize:none;padding-right:20px;outline:none}.placeholder{height:100px;border:solid 1px #ccc;border-radius:5px;background:#ccc;box-shadow:inset rgba(102,102,102,0.50) 0 1px}.column{background:#f6f6f6;padding:25px;margin:2em;border:1px solid #e9e9e9;border-radius:5px}.ui-sortable-helper{transform:rotate(1deg) scale(1.08)}.btn{border-radius:5px;background-color:#fff;box-shadow:rgba(50,50,50,0.0901961) 0 1px;padding:4px 10px 4px 6px}.remove{right:10px;top:10px;position:absolute}
</style>
<script type="text/javascript">
angular.module('app', ['ui.sortable', 'ngStorage']);
var ColumnCtrl = (function () {
function ColumnCtrl($scope) {
var _this = this;
this.column = $scope.column;
$scope.$watch(function () {
return _this.column;
}, function () {
_this.assureOneEmptyItem();
}, true);
}
ColumnCtrl.prototype.assureOneEmptyItem = function () {
var last = this.column.items[this.column.items.length - 1];
if (last.content === undefined || last.content !== "") {
this.add();
}
};
ColumnCtrl.prototype.add = function () {
this.column.items.push({ content: '' });
};
ColumnCtrl.prototype.remove = function (idx) {
this.column.items.splice(idx, 1);
};
return ColumnCtrl;
})();
angular.module('app').controller('ColumnCtrl', ColumnCtrl);
var AppCtrl = (function () {
function AppCtrl($scope, $localStorage) {
var init = { columns: [
{
name: 'open',
items: [
{ content: 'drink beer' },
{ content: 'make good presentation' }
] },
{
name: 'progress',
items: [
{ content: 'learn CSS' }
] },
{
name: 'done',
items: [
{ content: 'eat pizza' }
] }
] };
this.vm = $localStorage.$default(init);
}
return AppCtrl;
})();
angular.module('app').controller('AppCtrl', AppCtrl);</script>
</head>
<body ng-app="app" ng-controller="AppCtrl as appCtrl">
<div class="container">
<div class="row">
<div class="col-md-3 column" ng-repeat="column in appCtrl.vm.columns track by $index">
<span ng-controller="ColumnCtrl as columnCtrl">
<h3>{{column.name}}</h3>
<ul ui-sortable='{connectWith: ".list", placeholder: "placeholder"}'
ng-model="column.items"
class="list">
<li ng-repeat="item in columnCtrl.column.items track by $index">
<textarea ng-model="item.content" rows="3"></textarea>
<span class="glyphicon glyphicon-remove remove"
ng-hide="$last"
ng-click="columnCtrl.remove($index)"></span>
</li>
</ul>
</span>
</div>
</div>
</div>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.