Skip to content
This repository was archived by the owner on Aug 2, 2024. It is now read-only.

Commit 7caa1af

Browse files
tpl2gotpl2go
committed
first commit
1 parent f874f29 commit 7caa1af

35 files changed

+7115
-0
lines changed

‎images/disk.png

620 Bytes
Loading

‎index.html

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<html>
2+
<head>
3+
<title>Chronicle Generator</title>
4+
<script type="text/javascript" src="scripts/generator.js"></script>
5+
<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
6+
<script type="text/javascript" src="scripts/jquery-migrate-1.2.1.min.js"></script>
7+
<script type="text/javascript" src="scripts/jHtmlArea-0.7.5.js"></script>
8+
<script type="text/javascript" src="scripts/jquery.htmlClean.js"></script>
9+
<link rel="stylesheet" type="text/css" href="style/style.css" />
10+
<link rel="stylesheet" type="text/css" href="style/jHtmlArea.css" />
11+
</head>
12+
<body onload="init(); return false;">
13+
14+
<h1>Chronicle Generator</h1>
15+
16+
<div id="instructions">
17+
18+
<h2>How to use</h2>
19+
20+
<p>Click "Create new section" for every section you need to create in the Chronicle. Every section has its settings:</p>
21+
22+
<ul>
23+
<li>Heading: heading of the section.</li>
24+
<li>Subsection: e.g. section 2.3, 3.4 but not section 2, 5 etc.</li>
25+
<li>Section filler: a section heading with no body e.g. <em>4. Miscellaneous</em>, which has no body text, and is followed by a section <em>4.1 ...</em>. Makes for good formatting.</li>
26+
<li>Category: pick one category.</li>
27+
<li>Delete section: deletes section. This cannot be undone.</li>
28+
</ul>
29+
30+
<p>The first box is the opening paragraph of the e-mail. The "table of contents" is automatically generated.</p>
31+
32+
<p>You can always click on "Preview" to generate the HTML code and also preview the final e-mail at the bottom of the screen.</p>
33+
34+
<p>A session <em>cannot</em> be saved, so it is best to do it in a separate document first and using this to format everything nicely.</p>
35+
36+
<p>For best results, paste in <em>plain text</em>. Bold, italic, and underline functions are provided for extra formatting. Hyperlinks can be made as well.</p>
37+
38+
<h2>Sending the Chronicle</h2>
39+
40+
<p>This is quite troublesome because it is difficult to send an e-mail with the precise HTML generated. Open <a href="https://spreadsheets.google.com/spreadsheet/ccc?key=0AmxApiq9b5Q9dGpyNy1jMjhrUk0tUkVFcmpJYlF2d2c&newcopy=true">this Google Docs spreadsheet (in a new tab!)</a> and then choose Gmail -> HTML Mail. Authorise the sheet (it contains a safe script) to send mails using your Gmail account. This sheet should be in your Google Drive from now on.</p>
41+
42+
<p>Paste the HTML code generated below and <em>send the e-mail to yourself</em>. Once you're satisfied, send it using your cumsa.org alias to the mailing list.</p>
43+
44+
</div>
45+
46+
<hr />
47+
48+
<div id="controls">
49+
<button type="button" onclick="createNewSection(); return false;">Create new section</button>
50+
<button type="button" onclick="preview(); return false;">Preview</button>
51+
</div>
52+
53+
<hr />
54+
55+
<div id="chead" class="csection">
56+
</div>
57+
58+
<div id="csections">
59+
</div>
60+
61+
<hr />
62+
63+
<div id="code">
64+
</div>
65+
66+
<hr />
67+
68+
<div id="preview">
69+
</div>
70+
71+
<hr />
72+
73+
<div id="notes">
74+
75+
<h2>Technical notes</h2>
76+
77+
<p>This uses:</p>
78+
79+
<ul>
80+
<li>jQuery 1.10.2</li>
81+
<li>jQuery Migrate 1.2.1 - for compatability with jHtmlArea 0.7.5</li>
82+
<li><a href="https://jhtmlarea.codeplex.com/">jHtmlArea 0.7.5</a></li>
83+
<li><a href="https://code.google.com/p/jquery-clean/">jquery-clean</a></li>
84+
</ul>
85+
86+
<p>HTML is sanitised with an element whitelist, to remove font elements particularly, which may screw up font formatting. jHtmlArea is reduced to just bold, italics, underline, and hyperlinks because block elements (h1, h2) may be removed from e-mail clients.</p>
87+
88+
<p>HTML e-mail sending method courtesy of <a href="http://www.labnol.org/internet/send-html-email/">these guys</a>.</p>
89+
90+
</div>
91+
92+
</body>
93+
</html>

‎scripts/generator.js

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
var section_count = 0;
2+
var secretary_name = "Damien";
3+
var date = new Date();
4+
var year = date.getFullYear();
5+
6+
function init() {
7+
$("#chead").append($("<p/>", { text: "Opening paragraph" }));
8+
$("#chead").append($("<textarea/>", { id: "chead_input" }));
9+
$("textarea").htmlarea({ toolbar: ["bold", "italic", "underline", "|", "link", "unlink"] });
10+
}
11+
12+
function createNewSection() {
13+
section_count++;
14+
15+
section = $("<div/>", { id: "csection_"+section_count, class: "csection" });
16+
section_controls = $("<div/>", { id: "csection_"+section_count+"_controls" });
17+
18+
section_controls_form = $("<form/>");
19+
section_controls_form.append("Heading: ");
20+
section_controls_form.append($("<input/>", { type: "text", id: "csection_"+section_count+"_heading" }));
21+
section_controls_form.append("&nbsp;&nbsp;");
22+
section_controls_form.append("Subsection: ");
23+
section_controls_form.append($("<input/>", { type: "checkbox", id: "csection_"+section_count+"_sub" }));
24+
section_controls_form.append("&nbsp;&nbsp;");
25+
section_controls_form.append("Section filler: ");
26+
section_controls_form.append($("<input/>", { type: "checkbox", id: "csection_"+section_count+"_fill" }));
27+
section_controls_form.append("&nbsp;&nbsp;");
28+
section_controls_form.append("Category: ");
29+
section_controls_form_category = $("<select/>", { id: "csection_"+section_count+"_category" });
30+
section_controls_form_category.append($("<option/>", { value: "none", text: "None" }));
31+
section_controls_form_category.append($("<option/>", { value: "about-us", text: "About Us" }));
32+
section_controls_form_category.append($("<option/>", { value: "chronicle", text: "Chronicle" }));
33+
section_controls_form_category.append($("<option/>", { value: "contact-us", text: "Contact Us" }));
34+
section_controls_form_category.append($("<option/>", { value: "events", text: "Events" }));
35+
section_controls_form_category.append($("<option/>", { value: "feedback", text: "Feedback & Enquiries" }));
36+
section_controls_form_category.append($("<option/>", { value: "for-sponsors", text: "For Sponsors" }));
37+
section_controls_form_category.append($("<option/>", { value: "freshers", text: "Freshers" }));
38+
section_controls_form_category.append($("<option/>", { value: "membership", text: "Membership" }));
39+
section_controls_form_category.append($("<option/>", { value: "mental-health", text: "Mental Health Support" }));
40+
section_controls_form_category.append($("<option/>", { value: "opportunities", text: "Opportunities" }));
41+
section_controls_form_category.append($("<option/>", { value: "speakers", text: "Speaker Series" }));
42+
section_controls_form_category.append($("<option/>", { value: "sponsorship", text: "Sponsorship" }));
43+
section_controls_form.append(section_controls_form_category);
44+
section_controls_form.append("&nbsp;&nbsp;");
45+
46+
delete_button = $("<button/>", { type: "button" , text: "Delete section" });
47+
delete_button.click(function () { $("#csection_"+section_count).remove(); });
48+
section_controls_form.append(delete_button);
49+
50+
section_controls.append(section_controls_form);
51+
section.append(section_controls);
52+
section.append($("<textarea/>", { id: "csection_"+section_count+"_input" }));
53+
$("#csections").append(section);
54+
$("#csection_"+section_count+"_input").htmlarea({ toolbar: ["bold", "italic", "underline", "|", "link", "unlink"] });
55+
}
56+
57+
function preview() {
58+
$("#code").empty();
59+
$("#preview").empty();
60+
var output = "";
61+
62+
output += "<table width='800' border='0' cellspacing='2' cellpadding='0' style='font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; color: #444444;'>";
63+
output += "<tr><td>";
64+
output += "<table width='800' border='0'><tr><td width='700' valign='middle'><img src='http://www.cumsa.org/images/logo_cumsa_chronicle.jpg' alt='Cambridge University Malaysia and Singapore Association' border='0' /></td><td width='100' align='right' valign='middle'><img src='http://www.cumsa.org/images/icon_chronicle_chronicle.jpg' alt='[Chronicle]' border='0' /></td></tr></table>";
65+
output += "</td></tr>";
66+
67+
output += "<tr><td style='padding: 10px;'>";
68+
output += $.htmlClean($("#chead_input").val(), {
69+
allowedTags: ["table", "tr", "td", "img", "br", "hr", "a", "b", "i", "u", "strong", "em", "p"]
70+
});
71+
output += "<br /><hr width='400' color='#1166ff' />";
72+
output += "</td></tr>";
73+
74+
var section = 1;
75+
var subsection = 1;
76+
77+
var menu = "";
78+
var body = "";
79+
80+
for ( i = 1; i <= section_count; i++ ) {
81+
if ( $("#csection_"+i).length != 0 ) {
82+
if ( $("#csection_"+i+"_category").val() == "none" ) {
83+
icon = "";
84+
} else {
85+
icon = "<img src='http://www.cumsa.org/images/icon_" + $("#csection_"+i+"_category").val() + "_chronicle.jpg' alt='[" +$("#csection_"+i+"_category option:selected").text() + "]' border='0' />";
86+
}
87+
88+
if ( $("#csection_"+i+"_sub").prop("checked") ) {
89+
if ( subsection == 1 ) {
90+
section--;
91+
}
92+
heading = section + "." + subsection + " " + $("#csection_"+i+"_heading").val();
93+
menu += section + "." + subsection + " <a href='#csection" + i + "'>" + $("#csection_"+i+"_heading").val() + "</a><br />";
94+
subsection++;
95+
} else {
96+
if ( subsection != 1 ) {
97+
section++;
98+
}
99+
heading = section + ". " + $("#csection_"+i+"_heading").val();
100+
menu += section + ". <a href='#csection" + i + "'>" + $("#csection_"+i+"_heading").val() + "</a><br />";
101+
section++;
102+
subsection = 1;
103+
}
104+
105+
body += "<tr><td>";
106+
body += "<table><tr>";
107+
108+
if ( $("#csection_"+i+"_category").val() != "none" ) {
109+
body += "<td width='100' align='center' valign='center'>" + icon + "</td>";
110+
body += "<td id='csection" + i + "' name='csection" + i + "' width='700' valign='middle' style='padding: 10px; font-family: Georgia, serif; font-size: 21px; color: #333333; font-variant: small-caps;'>" + heading + "</td></tr></table>";
111+
} else {
112+
body += "<td id='csection" + i + "' name='csection" + i + "' width='800' valign='middle' style='padding: 10px; font-family: Georgia, serif; font-size: 21px; color: #333333; font-variant: small-caps;'>" + heading + "</td></tr></table>";
113+
}
114+
115+
body += "</td></tr>";
116+
117+
if ( $("#csection_"+i+"_fill").prop("checked") ) {
118+
} else {
119+
body += "<tr><td style='padding: 10px;'>";
120+
body += $.htmlClean($("#csection_"+i+"_input").val(), {
121+
allowedTags: ["table", "tr", "td", "img", "br", "hr", "a", "b", "i", "u", "strong", "em", "p"]
122+
});
123+
body += "<br /><br /></td></tr>";
124+
}
125+
}
126+
}
127+
128+
output += "<tr><td style='padding: 10px;'>";
129+
output += menu;
130+
output += "<br /><hr width='400' color='#1166ff' />";
131+
output += "</td></tr>";
132+
133+
output += body;
134+
135+
output += "<tr><td style='padding: 10px;'><hr width='400' color='#1166ff' /><br />If you have any queries, please contact me at <a href='mailto:[email protected]'>[email protected]</a>.<br /><br />Best wishes,<br />" + secretary_name + "<br /><br /><hr width='400' color='#1166ff' /></td></tr>";
136+
137+
// Start of Platinium and Gold Sponsors
138+
output += "<tr><td><table width='800' style='font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; color: #444444;'>";
139+
140+
output += "<tr>"; // Row 1
141+
output += "<td align='center' style='padding: 5px;'>Platinum Sponsors</td>";
142+
output += "<td align='center' style='padding: 5px;'>Gold Sponsors</td></tr>";
143+
output += "<tr>"; // Row2
144+
output += "<td align='center' style='padding: 5px;'><img src='http://www.cumsa.org/images/logo_osu.png' alt='Overseas Singaporean Unit' border='0' /></td>";
145+
output += "<td align='center' style='padding: 5px;'><img src='http://www.cumsa.org/images/logo_contactsg.jpg' alt='Contact Singapore' border='0' /></td></tr>";
146+
output += "<tr>"; // Row 3
147+
output += "<td align='center' style='padding: 5px;'><img src='http://www.cumsa.org/images/logo_leefoundation.png' alt='Lee Foundation' border='0' /></td>"
148+
output += "<td align='center' style='padding: 5px;'><img src='http://cumsa.org/images/logo_stee.png' alt='ST Electronics' border='0' /></td></tr>";
149+
output += "<tr>"; // Row 4
150+
output += "<td align='center' style='padding: 5px;'><img src='http://www.cumsa.org/images/logo_rajahtann.png' alt='Rajah and Tann' border='0' /></td>";
151+
output += "<td align='center' style='padding: 5px;'><img src='http://www.cumsa.org/images/logo_edb.png' alt='EDB Singapore' border='0' /></td></tr>";
152+
153+
output += "</table></td></tr>";
154+
155+
//Silver Sponsors
156+
output += "<tr><td><table width='800' style='font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; color: #444444;'>";
157+
output += "<tr><td align='center' style='padding: 5px;'>Silver Sponsors</td>";
158+
output += "<tr><td align='center' style='padding: 5px;'><img src='http://www.cumsa.org/images/logo_gic.png' alt='Government of Singapore Investment Corporation' border='0' /></td>";
159+
output += "<tr><td align='center' style='padding: 5px;'><img src='http://cumsa.org/images/logo_BNP.png' alt='BNP Paribas' border='0' /></td>";
160+
output += "</table></td></tr>";
161+
//End of Silver Sponsors
162+
output += "<tr><td align='center' style='padding: 10px;'>";
163+
output += "Copyright " + year + " <a href='http://www.cumsa.org/'>Cambridge University Malaysia and Singapore Association</a>";
164+
output += "</td></tr>";
165+
output += "</table>";
166+
167+
$("#code").text(output).html();
168+
$("#preview").append(output);
169+
}

0 commit comments

Comments
 (0)