Compare commits
No commits in common. "2cc0721b952b7144a6e6dc91e163f3b177cc85e5" and "ddebf832ee1ac332b7f33e027c98d2f60b4511cf" have entirely different histories.
2cc0721b95
...
ddebf832ee
|
|
@ -0,0 +1 @@
|
|||
frontend/vendor
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
# 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/)
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
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
|
||||
})
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
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 })
|
||||
}
|
||||
})
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
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;
|
||||
};
|
||||
})
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
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
|
||||
})
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"directory": "../frontend/vendor"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"name": "learn"
|
||||
, "description": "Learn some stuff"
|
||||
, "version": "0.0.0"
|
||||
, "dependencies": {
|
||||
"angular": "~1.5"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
.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; }
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!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>
|
||||
Loading…
Reference in New Issue