Compare commits

...

No commits in common. "ddebf832ee1ac332b7f33e027c98d2f60b4511cf" and "2cc0721b952b7144a6e6dc91e163f3b177cc85e5" have entirely different histories.

11 changed files with 325 additions and 54 deletions

1
.gitignore vendored
View File

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

View File

@ -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/)

View File

@ -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
})

30
angular/assets/js/MyApp.js vendored 100644
View File

@ -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 })
}
})

View File

@ -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;
};
})

View File

@ -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
})

87
angular/index.html 100644
View File

@ -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>

View File

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

View File

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

View File

@ -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; }

View File

@ -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>