Skip to content

Commit 63ec336

Browse files
rolandboonrolandboon
committed
add boilerplate, bower and update readme/demo's
1 parent 36b2081 commit 63ec336

15 files changed

+475
-57
lines changed

‎.gitignore

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# jetbrains
2+
idea/
3+
/*.iml
4+
5+
# osx
6+
.DS_Store
7+
.AppleDouble
8+
.LSOverride
9+
10+
# windows
11+
Thumbs.db
12+
ehthumbs.db
13+
Desktop.ini
14+
15+
# node
16+
logs
17+
*.log
18+
pids
19+
*.pid
20+
*.seed
21+
lib-cov
22+
coverage
23+
.grunt
24+
build/Release
25+
node_modules
26+
.lock-wscript
27+
28+
# sass
29+
.sass-cache
30+
31+
# bower
32+
bower_components/
33+
build/
34+
dist/

‎CNAME

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
angular-clndr.10kb.nl

‎Gruntfile.coffee

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
module.exports = (grunt) ->
2+
require('load-grunt-tasks')(grunt)
3+
4+
grunt.initConfig
5+
pkg: grunt.file.readJSON('package.json')
6+
7+
connect:
8+
server:
9+
options:
10+
keepalive: true
11+
12+
coffee:
13+
dist:
14+
src: './src/angular-clndr.coffee'
15+
dest: './angular-clndr.js'
16+
17+
sass:
18+
dist:
19+
src: './src/angular-clndr.sass'
20+
dest: './angular-clndr.css'
21+
22+
ngAnnotate:
23+
dist:
24+
src: './angular-clndr.js'
25+
dest: './angular-clndr.js'
26+
27+
uglify:
28+
options:
29+
preserveComments: 'some'
30+
dist:
31+
src: './angular-clndr.js'
32+
dest: './angular-clndr.min.js'
33+
34+
watch:
35+
coffee:
36+
files: './src/angular-clndr.coffee'
37+
tasks: ['coffee']
38+
sass:
39+
files: './src/angular-clndr.sass'
40+
tasks: ['sass']
41+
42+
grunt.registerTask('default', ['ngAnnotate', 'uglify'])
43+
grunt.registerTask('server', ['default', 'connect', 'watch'])

‎LICENSE

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎README.md

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎angular-clndr.css

Lines changed: 50 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎angular-clndr.css.map

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎angular-clndr.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
clndr: '=tienClndrObject',
2020
events: '=tienClndrEvents'
2121
},
22-
controller: function($scope, $element, $attrs, $transclude) {
22+
controller: ["$scope", "$element", "$attrs", "$transclude", function($scope, $element, $attrs, $transclude) {
2323
return $transclude(function(clone, scope) {
2424
var render;
2525
$element.append(clone);
@@ -35,7 +35,7 @@
3535
render: render
3636
});
3737
});
38-
}
38+
}]
3939
};
4040
});
4141

‎angular-clndr.min.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/*!
2+
* angular-clndr 0.2.0
3+
* 10KB, http://10kb.nl/
4+
* License: MIT
5+
*/
6+
(function(){var a;a=angular.module("tien.clndr",[]),a.directive("tienClndr",function(){return{restrict:"E",replace:!0,transclude:!0,scope:{clndr:"=tienClndrObject",events:"=tienClndrEvents"},controller:["$scope","$element","$attrs","$transclude",function(a,b,c,d){return d(function(c,d){var e;return b.append(c),a.$watch("events",function(b){return(null!=b?b.length:void 0)?a.clndr.setEvents(angular.copy(b)):void 0}),e=function(a){return angular.extend(d,a)},a.clndr=angular.element("<div/>").clndr({render:e})})}]}})}).call(this);

‎bower.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "angular-clndr",
3+
"description": "Angular directive for the CLNDR.js package.",
4+
"version": "0.2.0",
5+
"author": "10KB",
6+
"main": "./angular-clndr.js",
7+
"ignore": [
8+
"src",
9+
"Gruntfile.coffee",
10+
"package.json",
11+
"CNAME"
12+
],
13+
"dependencies": {
14+
"angular": ">=1",
15+
"clndr": ">=1.2"
16+
}
17+
}

‎index.html

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>AngularJS Clndr Directive</title>
6+
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
7+
<link href="angular-clndr.css" rel="stylesheet">
8+
<style>
9+
body {
10+
margin-top: 1em;
11+
}
12+
p {
13+
line-height: 24px;
14+
}
15+
</style>
16+
</head>
17+
<body class="container">
18+
<div class="row">
19+
<div class="col-lg-10 col-lg-offset-1 col-md-12">
20+
<div class="jumbotron">
21+
<h1>angular-clndr</h1>
22+
23+
<p>Angular directive for CLNDR.js</p>
24+
</div>
25+
<div class="row">
26+
<div class="col-md-12">
27+
<h2>Getting Started</h2>
28+
<ol>
29+
<li>Install with bower: <code>bower install --save angular-clndr</code></li>
30+
<li>Include <code>angular-clndr.js</code>.</li>
31+
<li>Make sure to include all CLNDR.js dependencies.</li>
32+
<li>Add <code>tien.clndr</code> to you app modules.</li>
33+
<li>Use the <code>tien-clndr</code> directive.</li>
34+
</ol>
35+
36+
If you don't like package managers, you can also directly download
37+
<a href="./angular-clndr.js">angular-clndr.js</a> or
38+
<a href="./angular-clndr.min.js">angular-clndr.min.js</a>.
39+
</div>
40+
</div>
41+
<hr>
42+
<div class="row" ng-app="clndrApp">
43+
<div class="col-md-12" ng-controller="DemoCtrl">
44+
<h2>Demo</h2>
45+
46+
<tien-clndr class="clndr" tien-clndr-object="clndr" tien-clndr-events="events">
47+
<div class="clndr-controls">
48+
<div class="clndr-previous-button" ng-click="clndr.back()">
49+
&lsaquo;
50+
</div>
51+
<div class="month">
52+
{{month}}
53+
</div>
54+
<div class="clndr-next-button" ng-click="clndr.forward()">
55+
&rsaquo;
56+
</div>
57+
</div>
58+
<div class="clndr-grid">
59+
<div class="days-of-the-week">
60+
<div class="header-day" ng-repeat="day in daysOfTheWeek track by $index">
61+
{{day}}
62+
</div>
63+
</div>
64+
<div class="days">
65+
<div class="{{day.classes}}" ng-repeat="day in days">
66+
<div class="event-indicator" ng-show="day.events" ng-click="showEvents(day.events)">{{day.events.length}}</div>
67+
{{day.day}}
68+
</div>
69+
</div>
70+
</div>
71+
</tien-clndr>
72+
</div>
73+
</div>
74+
75+
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
76+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
77+
<script src="//kylestetz.github.io/CLNDR/js/moment.js"></script>
78+
<script src="//kylestetz.github.io/CLNDR/js/clndr.js"></script>
79+
<script src="angular-clndr.js"></script>
80+
<script>
81+
app = angular.module('clndrApp', ['tien.clndr']);
82+
app.controller('DemoCtrl', function ($scope) {
83+
$scope.events = [
84+
{ date: moment().add(3, 'days').format(), title: "Happy days" },
85+
{ date: moment().subtract(5, 'days').format(), title: "Good old days" },
86+
{ date: moment().subtract(5, 'days').format(), title: "And some more" }
87+
];
88+
$scope.showEvents = function(events) {
89+
alert(events.map(function(e) { return e.title }).join("\n"));
90+
};
91+
});
92+
</script>
93+
94+
<hr>
95+
<div class="row">
96+
<div class="col-md-12">
97+
<h2>Usage</h2>
98+
<p>
99+
Use the <code>tien-clndr</code> directive as element, all childs of this element have
100+
CLNDR.js data available on the object provided with the <code>tien-clndr-object</code>
101+
attributes. With this object on the child's scope, you can for example ng-repeat over the
102+
days and render the template Angular-style.
103+
</p>
104+
<p>
105+
Optionally pass an <a href="https://github.com/kylestetz/CLNDR#pass-in-your-events">array of events</a>
106+
to the directive with the <code>tien-clndr-events</code> attribute. Events are available
107+
on the scope at <code>day.events</code>, as shown in the example below:
108+
</p>
109+
<pre><code>&lt;tien-clndr class=&quot;clndr&quot; tien-clndr-object=&quot;clndr&quot; tien-clndr-events=&quot;events&quot;&gt;
110+
&lt;div class=&quot;clndr-controls&quot;&gt;
111+
&lt;div class=&quot;clndr-previous-button&quot; ng-click=&quot;clndr.back()&quot;&gt;
112+
&amp;lsaquo;
113+
&lt;/div&gt;
114+
&lt;div class=&quot;month&quot;&gt;
115+
{{month}}
116+
&lt;/div&gt;
117+
&lt;div class=&quot;clndr-next-button&quot; ng-click=&quot;clndr.forward()&quot;&gt;
118+
&amp;rsaquo;
119+
&lt;/div&gt;
120+
&lt;/div&gt;
121+
&lt;div class=&quot;clndr-grid&quot;&gt;
122+
&lt;div class=&quot;days-of-the-week&quot;&gt;
123+
&lt;div class=&quot;header-day&quot; ng-repeat=&quot;day in daysOfTheWeek track by $index&quot;&gt;
124+
{{day}}
125+
&lt;/div&gt;
126+
&lt;/div&gt;
127+
&lt;div class=&quot;days&quot;&gt;
128+
&lt;div class=&quot;{{day.classes}}&quot; ng-repeat=&quot;day in days&quot;&gt;
129+
&lt;div class=&quot;event-indicator&quot; ng-show=&quot;day.events&quot; ng-click=&quot;showEvents(day.events)&quot;&gt;{{day.events.length}}&lt;/div&gt;
130+
{{day.day}}
131+
&lt;/div&gt;
132+
&lt;/div&gt;
133+
&lt;/div&gt;
134+
&lt;/tien-clndr&gt;</code></pre>
135+
</div>
136+
</div>
137+
<hr>
138+
<div class="row">
139+
<div class="col-md-12">
140+
<p class="text-center">
141+
angular-clndr 0.1.0 &middot; Created by <a href="http://10kb.nl/">10KB</a><br>
142+
Based on <a href="http://kylestetz.github.io/CLNDR/">CLNDR.js</a>.
143+
</p>
144+
<p class="text-center">
145+
<a href="https://github.com/10KB/angular-clndr">GitHub Project</a>
146+
</p>
147+
</div>
148+
</div>
149+
</div>
150+
</div>
151+
</body>
152+
</html>

0 commit comments

Comments
 (0)