-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
157 lines (143 loc) · 6.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<!-- Note: Under normal circumstances, assets would be concatenated and minified
by a build step. LESS/SASS/Styl for CSS, RequireJS/Browserify/Webpack for JS.
This is a purely static demo app, however, using traditional Javascript
modules, namespaces, and limited browser globals. -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Day Calendar</title>
<link rel="stylesheet" href="calendar/vendor/css/normalize.css">
<link rel="stylesheet" href="calendar/css/global.css">
<link rel="stylesheet" href="calendar/css/main.css">
<link rel="stylesheet" href="calendar/css/day.css">
<link rel="stylesheet" href="calendar/css/event.css">
<link rel="stylesheet" href="calendar/css/ruler.css">
<link rel="stylesheet" href="calendar/css/form.css">
<link rel="stylesheet" href="calendar/css/alert.css">
</head>
<body>
<!-- Target render region for widget; see index.js -->
<div class="main-container">
<div id="alert-region"></div>
<main id="calendar-region" class="clearfix"></main>
</div>
<!-- Prefer templates to reside in view folder, e.g., views/entry/entry.view.tpl,
except that requires an async text loader like require.js or a build step.
Both are too heavy for this demo; hence, templates are inlined below.
They are, however, compiled only once - at script load time. -->
<!-- Day template -->
<script id="day-view" type="text/html">
<div class="calendar-container">
<div class="ruler-container js-ruler"></div>
<div class="events-container js-events"></div>
</div><div class="form-container js-form"></div>
</script>
<!-- Entry template -->
<script id="event-view" type="text/html">
<div class="event-inner">
<a class="event-remove js-remove" tabindex="0">×</a>
<div class="event-title"><%- title %></div>
<div class="event-location"><%- location %></div>
</div>
</script>
<!-- Ruler template -->
<script id="ruler-view" type="text/html">
<% _.each(times, function (time) { %>
<div class="time <% if (time.majorTick) { %>time-major<% } else { %>time-minor<% } %>"
style="height: <%- timeHeight %>px; line-height: <%- timeHeight %>px">
<span class="time-hour-min"><%- time.timeStr %></span>
<span class="time-am-pm"><%- time.amPm %></span>
</div>
<% }); %>
</script>
<!-- Form template -->
<script id="forms-view" type="text/html">
<form class="form-ruler">
<fieldset>
<legend>Ruler Increment</legend>
<label><input type="radio" name="ruler-increment" value="15">15 Minutes</label>
<label><input type="radio" name="ruler-increment" value="30">30 Minutes</label>
<label><input type="radio" name="ruler-increment" value="60">60 Minutes</label>
</fieldset>
</form>
<form class="form-event js-form-event">
<fieldset>
<legend>New Event</legend>
<label><input type="text" name="title">Title</label>
<label><input type="text" name="location">Location</label>
<label><input type="text" name="start-time" placeholder="Mins from 9:00am">Start Time</label>
<label><input type="text" name="end-time" placeholder="Mins from 9:00am">End Time</label>
<button name="add-event">Add Event</button>
</fieldset>
</form>
<form class="form-clear js-form-clear">
<button name="clear-events">Clear Events</button>
</form>
</script>
<!-- Alert template -->
<script id="alert-view" type="text/html">
<a class="alert-remove js-remove" tabindex="0">×</a>
<div class="alert-message"><%- message %></div>
</script>
<!-- While Backbone is sufficient for this small demo, were the app to grow any
larger an additional framework like Backbone.Marionette would be beneficial.
In fact, this widget's view classes have a good bit of boilerplate that could
be avoided with the addition of Backbone.Marionette. I chose pure Backbone to
demonstrate my grasp of the issues surrounding low level view management. -->
<!-- Libraries -->
<script src="calendar/vendor/js/jquery.js"></script>
<script src="calendar/vendor/js/underscore.js"></script>
<script src="calendar/vendor/js/backbone.js"></script>
<script src="calendar/vendor/js/backbone.radio.js"></script>
<!-- Custom classes -->
<script src="calendar/lib/classes/backbone.widget.js"></script>
<script src="calendar/lib/classes/backbone.presenter.js"></script>
<!-- Widget -->
<script src="calendar/calendar.js"></script>
<script src="calendar/calendar.entities.js"></script>
<script src="calendar/presenters/day.presenter.js"></script>
<script src="calendar/presenters/error.presenter.js"></script>
<script src="calendar/entities/alert.model.js"></script>
<script src="calendar/entities/ruler.model.js"></script>
<script src="calendar/entities/event.model.js"></script>
<script src="calendar/entities/events.collection.js"></script>
<script src="calendar/views/day.view.js"></script>
<script src="calendar/views/ruler.view.js"></script>
<script src="calendar/views/form.view.js"></script>
<script src="calendar/views/events.view.js"></script>
<script src="calendar/views/event.view.js"></script>
<script src="calendar/views/alert.view.js"></script>
<script src="calendar/lib/util/time.js"></script>
<script src="calendar/lib/sort/sorter.js"></script>
<script src="calendar/lib/sort/group.js"></script>
<script src="calendar/lib/sort/groups.js"></script>
<!-- Day Calendar demo driver -->
<script src="index.js"></script>
<!-- Show demo events on startup -->
<script>
var count = 0;
var howMany = 7;
var events = [];
var start;
var end;
var title;
var loc;
var height;
while (count++ < howMany) {
height = (Math.random() * 0.25 + 0.07) * 720;
start = parseInt(Math.random() * (720 - height));
end = start + height;
title = "Title " + count;
loc = "Location " + count;
events.push({
start: start,
end: end,
title: title,
location: loc
});
}
layOutDay(events);
</script>
</body>
</html>