.gitignore

@@ -1 +0,0 @@
-frontend/vendor

README.md

@@ -1,22 +0,0 @@
-# Objective
-
-I want to learn the following technologies:
-
-* [Bower](http://bower.io)
-* [AngularJS](http://angularjs.org)
-
-Later:
-
-* [Go](http://golang.org)
-* [Grunt](http://gruntjs.com)
-* [Sass](http://sass-lang.com)
-* [Slim Framework](http://www.slimframework.com/)
-* [W3.CSS](http://www.w3schools.com/w3css/) / [Bootstrap](http://getbootstrap.com)
-
-This repository is used to keep track of the progress.
-
-# Tutorials
-
-* [AngularJS Tutorial Step 0](https://docs.angularjs.org/tutorial/step_00)
-* [Managing Frontend Dependencies & Deployment Part 1: Bower](https://blog.engineyard.com/2014/frontend-dependencies-management-part-1)
-* [Node, Grunt, Bower and Yeoman -- A Modern web dev's Toolkit](http://juristr.com/blog/2014/08/node-grunt-yeoman-bower/)

angular/assets/js/EditorDirective.js

@@ -0,0 +1,40 @@
+angular.module('MyApp')
+
+.directive('edit', function ($parse) {
+	var directive = {}
+
+	directive.scope = true
+	directive.link = function (scope, element, attrs) {
+		scope.editor = {}
+		scope.item = {}
+
+		var callback = function (item) {}
+		var model = $parse(attrs.edit)
+		var editor = scope.editor
+
+		if (attrs.callback != null)
+			callback = $parse(attrs.callback)(scope)
+
+		editor.save = function () {
+			var data = model(scope)
+			callback(scope.item)
+			data[editor.key] = scope.item
+			editor.key = null
+		}
+
+		editor.revert = function () {
+			editor.key = null
+		}
+
+		scope.$watch('editor.key', function (value) {
+			if (value == null) {
+				scope.item = {}
+			} else {
+				var data = model(scope)
+				scope.item = angular.copy(data[value] || {})
+			}
+		})
+	}
+
+	return directive
+})

angular/assets/js/MyApp.js

@@ -0,0 +1,30 @@
+angular.module('MyApp', [])
+
+.controller('Demo', function ($scope) {
+	$scope.string1 = "Hello"
+	$scope.string2 = "World"
+
+	$scope.pagination = { limit: 5 }
+
+	$scope.demodata = [
+		{ Name: "Answer", Number: 42 },
+		{ Name: "Trek", Number: 47 },
+		{ Name: "Eight", Number: 8 },
+	]
+
+	$scope.moredata = []
+
+	$scope.remove = function (editor, array, index) {
+		array.splice(index, 1)
+		editor.key = null
+	}
+
+	$scope.log = function (x) {
+		console.log(x)
+	}
+
+	for (var i = 0; i < 100; i++) {
+		var x = Math.random().toString().substr(2, 8)
+		$scope.moredata.push({ Name: x, Number: x })
+	}
+})

angular/assets/js/PaginationDirective.js

@@ -0,0 +1,115 @@
+angular.module('MyApp')
+
+.directive('pagination', function ($parse) {
+	var util = {}
+	var directive = {}
+
+	directive.restrict = 'A'
+	directive.scope = true
+	directive.link = function (scope, element, attrs) {
+		scope.pages = []
+		if (scope.pagination == null)
+			scope.pagination = {}
+
+		var params = scope.pagination
+
+		if (params.page == null)
+			params.page = util.init.page
+		if (params.limit == null)
+			params.limit = util.init.limit
+		if (params.buttons == null)
+			params.buttons = util.init.buttons
+
+		var recalc = function() {
+			scope.pages = util.calculate(params);
+		}
+
+		scope.$watch('pagination.total', recalc);
+		scope.$watch('pagination.page', recalc);
+		scope.$watch('pagination.limit', recalc);
+	}
+
+	util.init = {
+		page: 1,
+		limit: 10,
+		buttons: [
+			// Arrow indices
+			{pos: 'arrows', current: 4, prev: 3, next: 5},
+			{pos: 4, diff: 0},
+			{pos: 5, diff: 1},
+			{pos: 6, diff: 2},
+			{pos: 7, diff: 5},
+			{pos: 8, diff: 'max'},
+			{pos: 3, diff: -1},
+			{pos: 2, diff: -2},
+			{pos: 1, diff: -5},
+			{pos: 0, diff: 'min'},
+		],
+	}
+
+	util.clamp = function (x, min, max) {
+		if (x < min) return min;
+		if (x > max) return max;
+		return x;
+	}
+
+	util.calculate = function (params) {
+		var result = [];
+		var pos = [];
+
+		params.buttons.forEach(function (button) {
+			if (button.pos === 'arrows') {
+				result.current = button.current
+				result.prev = button.prev
+				result.next = button.next
+				return
+			}
+
+			var page = 0
+
+			if (button.diff === 'min')
+				page = params.min
+			else if (button.diff === 'max')
+				page = params.max
+			else
+				page = util.clamp(params.page + button.diff, params.min, params.max)
+
+			if (pos.indexOf(page) !== -1)
+				page = 'hide'
+
+			pos.push(page)
+			result[button.pos] = page
+		})
+
+		return result;
+	}
+
+	return directive
+})
+
+.filter('paginate', function() {
+	return function(data, params) {
+		var result = data
+		var start = 0
+
+		var limit = params.limit
+		var page = params.page
+
+		var max = Math.max(1, Math.ceil(data.length / limit))
+		var page = Math.min(page, max)
+
+		if (limit !== -1) {
+			start = (page - 1) * limit
+			result = data.slice(start, start + limit)
+		}
+
+		params.total = data.length
+		params.start = start + 1
+		params.end = start + result.length
+		params.page = page
+		params.min = 1
+		params.max = max
+
+		return result;
+	};
+})

angular/assets/js/SubScopeDirective.js

@@ -0,0 +1,53 @@
+angular.module('MyApp')
+
+.directive('subScope', ['subScopeUtils', function (util) {
+	var directive = util.directive()
+
+	directive.link = function (scope, element, attrs, controller, transclude) {
+		var key = attrs.subScope
+		var model = util.model(key)
+
+		scope.$watch('string', function(value) {
+			if (value.indexOf('Got in:') === 0)
+				return // prevent infinite calls
+			model.assign(scope.$parent, 'Got out: ' + value)
+		})
+
+		scope.$parent.$watch(key, function(value) {
+			if (value.indexOf('Got out:') === 0)
+				return // prevent infinite calls
+			scope.string = 'Got in: ' + value
+		})
+
+		util.transcluder(scope, element, transclude)
+	}
+
+	return directive
+}])
+
+.factory('subScopeUtils', function ($parse) {
+	var util = {}
+
+	util.model = function (expression) {
+		return $parse(expression)
+	}
+
+	util.directive = function () {
+		var result = {}
+		result.scope = true
+		result.transclude = true
+		result.template = '<input style="color: red" ng-model="string">'
+		return result
+	}
+
+	util.transcluder = function (scope, element, transclude) {
+		var cloneLinker = function (clone) {
+			if (clone.length !== 0) // If transcluded element is non-empty,
+				element.empty() // Remove already appended template
+			element.append(clone)
+		}
+		transclude(scope, cloneLinker)
+	}
+
+	return util
+})

angular/index.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<title>Angular Tests</title>
+</head>
+
+<body ng-app="MyApp" ng-controller="Demo">
+
+<h1>Scoping</h1>
+
+<div>
+	<div style="background:#eee">
+		<input ng-model="string1"><br>
+		<input ng-model="string2">
+	</div>
+
+	<div sub-scope="string1">
+		<input style="color: blue" ng-model="string">
+		Scope {{ ok }} (Scope ok)
+	</div>
+	<div sub-scope="string2"></div>
+</div>
+
+<h1>Editor</h1>
+
+<div>
+
+	<button ng-click="log(demodata)">Print</button>
+
+	<table edit="demodata" callback="log">
+		<thead>
+			<th><button ng-click="editor.key = demodata.length">➕ New</button></th>
+		</thead>
+		<tbody>
+			<tr ng-repeat-start="row in demodata">
+				<td><button ng-click="editor.key = $index">✏</button></td>
+				<td><button ng-click="remove(editor, demodata, $index)">🚫</button></td>
+				<td colspan="2">{{ row.Name }}</td>
+			</tr>
+			<tr ng-repeat-end ng-if="editor.key === $index || $last && editor.key === $index + 1">
+				<td><button ng-click="editor.save()">✔️</button></td>
+				<td><button ng-click="editor.revert()">❌</button></td>
+				<td><input ng-model="item.Name"></td>
+				<td><input ng-model="item.Number"></td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+
+<h1>Pagination</h1>
+
+<div pagination>
+	<style>
+		.pagination button { width: 40px; }
+		.pagination .disabled { color: gray; }
+		.pagination .current { font-weight: bold; color: green; }
+	</style>
+
+	<button ng-click="log(pages)">Print</button>
+
+	<table>
+		<thead>
+			<th>Name</th>
+			<th>Number</th>
+		</thead>
+		<tbody>
+			<tr ng-repeat="row in moredata | paginate: pagination">
+				<td>{{ row.Name }}</td>
+				<td>{{ row.Number }}</td>
+			</tr>
+		</tbody>
+	</table>
+
+	<span class="pagination" ng-repeat="p in pages track by $index">
+		<button ng-class="{disabled: p === 'hide', current: $index === pages.current}" ng-click="pagination.page = p">{{ p }}</button>
+	</span>
+</div>
+
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>
+<script src="assets/js/MyApp.js"></script>
+<script src="assets/js/SubScopeDirective.js"></script>
+<script src="assets/js/EditorDirective.js"></script>
+<script src="assets/js/PaginationDirective.js"></script>
+</body>
+
+</html>

deploy/.bowerrc

@@ -1,3 +0,0 @@
-{
-  "directory": "../frontend/vendor"
-}

deploy/bower.json

@@ -1,8 +0,0 @@
-{
-	"name": "learn"
-	, "description": "Learn some stuff"
-	, "version": "0.0.0"
-	, "dependencies": {
-		"angular": "~1.5"
-	}
-}

frontend/assets/css/arterop.css

@@ -1,7 +0,0 @@
-.arterop-color-1 { background-color: #f81; }
-.arterop-color-2 { background-color: #f42; }
-.arterop-color-3 { background-color: #e22; }
-.arterop-color-4 { background-color: #b23; }
-.arterop-color-5 { background-color: #e08; }
-.arterop-color-6 { background-color: #916; }
-.arterop-gray { background-color: #666; }

frontend/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en" ng-app>
-<head>
-	<meta charset="utf-8">
-	<title>Angular tutorial</title>
-	<script src="vendor/angular/angular.min.js"></script>
-</head>
-<body>
-
-	<p>Nothing here {{'yet' + '!'}}</p>
-
-</body>
-</html>