Skip to content

Commit bdfea8f

Browse files
geekbritgeekbrit
committed
Reworked doT template location to be inside <script> tags instead of inside javascript functions.
The primary reason for this was because of warnings that function.toString may strip comments in some browsers. This should be more robust. A side benefit is that syntax-highlighting editors now colour the template html, since it is no longer inside a JS comment. A downside is that the templates are now in the page html file, since html does not have a client-side #include.
1 parent 2e1aa41 commit bdfea8f

File tree

5 files changed

+103
-98
lines changed

5 files changed

+103
-98
lines changed

‎js/rc_calendar.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -245,10 +245,8 @@ function Calendar( element, options )
245245
evt.attr.t_prepad = ~~((evt.attr.prep_time / t.options.interval) * t.options.intervalpixels);
246246
evt.attr.t_postpad= ~~((evt.attr.cleanup_time / t.options.interval) * t.options.intervalpixels);
247247

248-
var eventdiv = $( render_week_event(evt) );
249-
var newev = $(eventdiv);
250-
251-
$('#'+evt.attr.parent).append( newev );
248+
$('#'+evt.attr.parent).append( render_week_event(evt) );
249+
var newev = $('#'+evt.attr.id);
252250

253251
newev.find('.deleteevent').click(function(event){
254252
event.stopPropagation();

‎sass/test.scss‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
h1{ margin-left:180px; }
1+
.header{ margin-left:180px; width:640px;}
22

33
.rc_bodyweek{
44
height: 400px;
@@ -12,18 +12,20 @@ h1{ margin-left:180px; }
1212
}
1313

1414
.event_palette {
15+
border-right:1px solid #888;
1516
position: fixed;
16-
top: 50px;
17+
top: 10px;
1718
left: 10px;
19+
width:160px;
1820
}
1921

2022
.unassigned {
21-
top: 300px;
23+
top: 330px;
2224
h2 { font-size:18px; margin:0; padding:0; }
2325
background: #FFD;
2426
width:160px;
2527
min-height:180px;
26-
border: 1px solid #880;
28+
border-right: 1px solid #880;
2729
text-align:center;
2830
}
2931

@@ -32,6 +34,8 @@ h1{ margin-left:180px; }
3234
.in_palette {
3335
-webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
3436
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
37+
margin-left:auto;
38+
margin-right:auto;
3539
}
3640

3741
.event {

‎templates/week.template.html‎

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

‎templates/week.template.js‎

Lines changed: 21 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,4 @@
11

2-
// [TODO] Add support for per-day opening/closing times
3-
4-
//
5-
// Template for a calendar for a single resource
6-
//
7-
var render_week = doT.template((function(){/*
8-
<div class="rc_week clearfix">
9-
<div class="rc_headerweek clearfix">
10-
<span class='rc_name'>{{=it.resource_name}}</span>
11-
<span class='rc_location'>{{=it.resource_location}}</span>
12-
</div>
13-
<div class="rc_headerweek"><div class="rc_gutter" style='relative'>
14-
<img src='img/CalendarIcon.gif' alt='click here to change date range' class='calimg'/>
15-
</div>
16-
{{ for(var i = 0; i < it.col_count; i++ ) { }}
17-
<div class="{{=it.col_class}}">{{=it.dows[i]+' '+it.months[i]+'/'+it.days[i]}}</div>
18-
{{ } }}
19-
</div>
20-
<div class="rc_bodyweek clearfix" id='{{=it.resource_id}}'>
21-
<div class="rc_gutter">
22-
{{var hrcount =0; var t = it.min_time; do { }}
23-
<div class='rc_hour_slot'>{{=t}}</div>
24-
{{ var r = addMinutes_timeOfDay(t,60,it.max_time); }}
25-
{{ t = r.newtime; hrcount += 1;}}
26-
{{ } while(!r.over);}}
27-
</div>
28-
29-
{{ for(var i = 0; i < it.col_count; i++ ) { }}
30-
<div class="rc_day_target {{=it.col_class}}" id="{{= it.resource_name+'_'+it.months[i]+'_'+it.days[i] }}" data-date="{{=it.dates[i]}}">
31-
{{ for(var j = 0; j < hrcount; j++ ) { }}
32-
{{? it.inc_time == 15 }}
33-
<div class="rc_quarters_slot"></div>
34-
<div class="rc_quarters_slot"></div>
35-
<div class="rc_quarters_slot"></div>
36-
<div class="rc_quarters_slot"></div>
37-
{{?? it.inc_time == 20 }}
38-
<div class="rc_thirds_slot"></div>
39-
<div class="rc_thirds_slot"></div>
40-
<div class="rc_thirds_slot"></div>
41-
{{?? it.inc_time == 30 }}
42-
<div class="rc_halves_slot"></div>
43-
<div class="rc_halves_slot"></div>
44-
{{?? it.inc_time == 60 }}
45-
<div class="rc_hour_slot"></div>
46-
{{??}}
47-
{{?}}
48-
{{ } }}
49-
</div>
50-
{{ } }}
51-
</div>
52-
</div>
53-
{{
54-
$('.calimg').click(function(){ $(this).datepicker( "dialog", {{= it.baseDate }}, dateSelect ) });
55-
}}
56-
57-
*/}).toString().replace(/.*\/\*\n([\s\S]*)\n\*\/.*/m, "$1"));
58-
59-
602
//
613
// This function is registered as "postcalrender", a callback to be executed
624
// after every rerender of the calendars
@@ -78,25 +20,26 @@ function adjust_calendar_width( calendar_state )
7820
}
7921
}
8022

23+
8124
//
82-
// Template for an event in the calendar
25+
// Compile Render Functions
8326
//
84-
var render_week_event = doT.template((function(){/*
85-
<div class="rc_event event {{=it.attr.ev_type}}" id="{{=it.attr.id}}"
86-
{{? it.attr.resource == "unassigned_event_resource"}}
87-
style="height:40px;margin:4px auto;">
88-
<div class="rc_event_head">Unassigned
89-
{{??}}
90-
style="top:{{=it.attr.t_offset}}px;height:{{=it.attr.t_height}}px;">
91-
<div class="rc_event_prepad" style="height:{{=it.attr.t_prepad}}px;"></div>
92-
<div class="rc_event_head">{{=it.attr.start}} - {{=it.attr.end}}
93-
{{?}}
94-
<div class='deleteevent'>X</div></div>
95-
<div class="rc_event_body">{{=it.attr.ev_text}}
96-
{{? it.attr.locked }}<img class='lockedevent' alt='locked' src='img/padlock.png'></img>{{?}}
97-
</div>
98-
{{? it.attr.resource != "unassigned_event_resource"}}
99-
<div class="rc_event_postpad" style="height:{{=it.attr.t_postpad}}px;"></div>
100-
{{?}}
101-
</div>
102-
*/}).toString().replace(/.*\/\*\n([\s\S]*)\n\*\/.*/m, "$1"));
27+
function compileTemplate( id )
28+
{
29+
var entities = [
30+
['apos', '\''],
31+
['amp', '&'],
32+
['lt', '<'],
33+
['gt', '>']
34+
];
35+
var text = $('#'+id).html();
36+
for (var i = 0, max = entities.length; i < max; ++i) {
37+
text = text.replace(new RegExp('&'+entities[i][0]+';', 'g'), entities[i][1]);
38+
}
39+
return doT.template(text);
40+
}
41+
42+
var render_week = compileTemplate( 'render_week' );
43+
var render_week_event = compileTemplate( 'render_week_event' );
44+
45+

‎test.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,78 @@ <h3>Resource Calendar</h3>
117117
</form>
118118
</div>
119119

120+
<!-- TEMPLATES - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
121+
122+
<script id='render_week' type='text/plain'>
123+
<div class="rc_week clearfix">
124+
<div class="rc_headerweek clearfix">
125+
<span class='rc_name'>{{=it.resource_name}}</span>
126+
<span class='rc_location'>{{=it.resource_location}}</span>
127+
</div>
128+
<div class="rc_headerweek"><div class="rc_gutter" style='relative'>
129+
<img src='img/CalendarIcon.gif' alt='click here to change date range' class='calimg'/>
130+
</div>
131+
{{ for(var i = 0; i < it.col_count; i++ ) { }}
132+
<div class="{{=it.col_class}}">{{=it.dows[i]+' '+it.months[i]+'/'+it.days[i]}}</div>
133+
{{ } }}
134+
</div>
135+
<div class="rc_bodyweek clearfix" id='{{=it.resource_id}}'>
136+
<div class="rc_gutter">
137+
{{var hrcount =0; var t = it.min_time; do { }}
138+
<div class='rc_hour_slot'>{{=t}}</div>
139+
{{ var r = addMinutes_timeOfDay(t,60,it.max_time); }}
140+
{{ t = r.newtime; hrcount += 1;}}
141+
{{ } while(!r.over);}}
142+
</div>
143+
144+
{{ for(var i = 0; i < it.col_count; i++ ) { }}
145+
<div class="rc_day_target {{=it.col_class}}" id="{{= it.resource_name+'_'+it.months[i]+'_'+it.days[i] }}" data-date="{{=it.dates[i]}}">
146+
{{ for(var j = 0; j < hrcount; j++ ) { }}
147+
{{? it.inc_time == 15 }}
148+
<div class="rc_quarters_slot"></div>
149+
<div class="rc_quarters_slot"></div>
150+
<div class="rc_quarters_slot"></div>
151+
<div class="rc_quarters_slot"></div>
152+
{{?? it.inc_time == 20 }}
153+
<div class="rc_thirds_slot"></div>
154+
<div class="rc_thirds_slot"></div>
155+
<div class="rc_thirds_slot"></div>
156+
{{?? it.inc_time == 30 }}
157+
<div class="rc_halves_slot"></div>
158+
<div class="rc_halves_slot"></div>
159+
{{?? it.inc_time == 60 }}
160+
<div class="rc_hour_slot"></div>
161+
{{??}}
162+
{{?}}
163+
{{ } }}
164+
</div>
165+
{{ } }}
166+
</div>
167+
</div>
168+
</script>
169+
170+
<script id='render_week_event' type='text/plain'>
171+
{{? it.attr.resource == "unassigned_event_resource"}}
172+
<div class="rc_event event {{=it.attr.ev_type}}" id="{{=it.attr.id}}"
173+
style="height:40px;margin:4px auto;">
174+
<div class="rc_event_head">Unassigned<div class='deleteevent'>X</div></div>
175+
<div class="rc_event_body">{{=it.attr.ev_text}}</div>
176+
</div>
177+
{{??}}
178+
<div class="rc_event event {{=it.attr.ev_type}}" id="{{=it.attr.id}}"
179+
style="top:{{=it.attr.t_offset}}px;height:{{=it.attr.t_height}}px;">
180+
<div class="rc_event_prepad" style="height:{{=it.attr.t_prepad}}px;"></div>
181+
<div class="rc_event_head">{{=it.attr.start}} - {{=it.attr.end}}<div class='deleteevent'>X</div></div>
182+
<div class="rc_event_body">{{=it.attr.ev_text}}
183+
{{? it.attr.locked }}<img class='lockedevent' alt='locked' src='img/padlock.png'></img>{{?}}
184+
</div>
185+
<div class="rc_event_postpad" style="height:{{=it.attr.t_postpad}}px;"></div>
186+
</div>
187+
{{?}}
188+
</script>
189+
190+
<!-- END TEMPLATES - - - - - - - - - - - - - - - - - - - - - - - - - - -->
191+
120192
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
121193
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
122194
<script src="js/jquery.pnotify.js" type="text/javascript"></script>

0 commit comments

Comments
 (0)