c3d2/c3d2-web
c3d2
/
c3d2-web
38
3
Fork 1
Code Issues 1 Pull Requests Releases Wiki Activity

pages/membership: implement a javascript membership form

This commit is contained in:
Astro 2017-06-09 00:40:52 +02:00
parent 8f8bbfb3ba
commit b020ab6184
5 changed files with 159 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
content/pages/membership.xml
View File

@ -37,11 +37,18 @@ Wir sind als gemeinnützig anerkannt.
<p id="wie" title="Wie trete ich bei?">
</p>
<ol>
<li>Fülle das <link href="nb/mitgliedschaftsformular.pdf">Formular</link> (zur Nutzung der Formularfunktion ggf. zuvor lokal abspeichern) aus,</li>
<li>Sende es an <link href="mailto:vorstand@c3d2.de">vorstand@c3d2.de</link>,</li>
<li>Alternativ, schicke einen Ausdruck an unsere <link href="/space.html#anschrift">postalische Anschrift</link>.</li>
<li>
Fülle das
<link href="nb/mitgliedschaftsformular.pdf">Formular</link>
(zur Nutzung der Formularfunktion ggf. zuvor lokal abspeichern)
aus, JavaScript-Alternative untenstehend,
</li>
<li>Sende es (am besten PGP-signiert) an <link href="mailto:vorstand@c3d2.de">vorstand@c3d2.de</link>,</li>
<li>Alternativ, schicke einen Ausdruck an unsere <link href="/space.html#anschrift">postalische Anschrift</link>.</li>
</ol>
<membership-form/>
<p id="firmen" title="Firmen">
Juristische Personen können Fördermitglied werden. Damit gibt es eine
einfache Möglichkeit der dauerhaften Unterstützung unserer

83
content/static/script/membership.js Normal file
View File

@ -0,0 +1,83 @@
function escape(s) {
return s.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;");
}
$('.membership-form').each(function() {
var container = $(this);
container.html('<h3>Mitgliedschaftsformular</h3>' +
'<p><input type="checkbox" id="neumitglied"><label for="neumitglied"> Ich möchte Mitglied im Netzbiotop Dresden e.V. werden und habe die Satzung 1 gelesen.</label></p>' +
'<p class="neumitglied indented"><input type="radio" id="ordentlich" name="art" value="ordentlich"><label for="ordentlich"> Ordentliche Mitgliedschaft</label></input></p>' +
'<p class="neumitglied indented"><input type="radio" id="foerder" name="art" value="foerder"><label for="foerder"> Fördermitgliedschaft</label></input></p>' +
'<p class="neumitglied indented"><input type="radio" id="reduziert" name="art" value="reduziert"><label for="reduziert"> Ermäßigte Mitgliedschaft</label></input></p>' +
'<p><input type="checkbox" id="update"><label for="update"> Ich möchte meine Mitgliedsdaten aktualisieren.</label></p>' +
'<p><input type="text" id="name"></p>' +
'<p class="desc"><label for="name">Name</label></p>' +
'<p><input type="text" id="email"></p>' +
'<p class="desc"><label for="email">E-Mail</label></p>' +
'<p><input type="text" id="pgp"></p>' +
'<p class="desc"><label for="pgp">PGP-Fingerprint (optional, erforderlich für verschlüsselte Komunikation)</label></p>' +
'<p><textarea rows="3" cols="40" id="note"></textarea>' +
'<p class="desc"><label for="note">Bemerkungen</label></p>' +
'<p><input type="text" id="date"></p>' +
'<p class="desc"><label for="date">Beitrittsdatum</label></p>' +
'<p style="margin: 2rem 0.5rem 1rem"><a href="#" download="antrag-netzbiotop.xml" id="ok">Antrag generieren</a> und dann an <a href="mailto:vorstand@c3d2.de?subject=Mitgliedschaftsantrag">vorstand@c3d2.de</a> senden, am besten signiert!</p>'
);
function getText(id) {
return container.find('#' + id).val();
}
function isChecked(id) {
return container.find('#' + id).prop('checked');
}
function generateXml() {
var xml =
'<member';
if (isChecked('neumitglied') && isChecked('foerder')) xml += ' type="Fördermitglied"';
xml += '>\n <name>' +
escape(getText('name')) +
'</name>\n <email>' +
escape(getText('email')) +
'</email>\n';
var pgp = getText('pgp');
if (pgp) xml += ' <pgp-fpr>' + escape(getText('pgp')) + '</pgp-fpr>\n';
if (isChecked('neumitglied')) {
var rate = isChecked('ordentlich') ? 42 :
isChecked('reduziert') ? 13.37 : 0;
xml += ' <term rate="' + rate + '" start="' + getText('date') + '"/>\n';
}
var note = getText('note');
if (note) xml += ' <note>' + escape(note) + '</note>\n';
xml +=
'</member>';
// console.log('xml: ' + xml);
return xml;
}
function update() {
if (isChecked('neumitglied')) {
container.find('.neumitglied').show();
} else {
container.find('.neumitglied').hide();
}
if (!getText('date')) {
var d = new Date();
d.setHours(23);
d.setDate(1);
var s = d.toISOString().replace(/T.+/, "");
container.find('#date').val(s);
}
var xmlUri = 'data:application/xml;charset=utf-8,' + encodeURIComponent(generateXml());
container.find('#ok').attr('href', xmlUri);
}
container.find('input').on('change', update);
container.find('textarea').on('change', update);
update();
});

46
content/static/style/default.css
View File

@ -945,3 +945,49 @@ h3 + div {
float: right;
color: #f99;
}
.membership-form {
margin: 1em 2em;
padding: 0.5em 1em;
width: 40em;
background-color: #ffffe0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
#content .membership-form h3 {
margin: 1rem 0.5rem;
}
#content .membership-form p {
margin: 0.5rem 0.5rem 0;
}
#content .membership-form p.indented {
margin-left: 2rem;
}
.membership-form label {
padding-right: 1rem;
}
.membership-form input[type=text], .membership-form textarea {
margin: 0.5rem 0 0;
width: 100%;
font-family: monospace;
font-size: 110%;
background-color: white;
color: #333;
border: none;
border-bottom: 1px solid black;
}
.membership-form input[type=text] {
height: 2em;
}
#content .membership-form p.desc {
margin: 0 0.5rem 0;
font-size: 70%;
}
.membership-form #ok {
background-color: white;
color: #333;
cursor: pointer;
font-weight: bold;
padding: 0.2rem 0.5rem;
border-radius: 2px;
border: 1px solid black;
}

20
xsl/header.xsl
View File

@ -42,27 +42,35 @@
<xsl:comment>[if lt IE 9]&gt;
&lt;script src="<xsl:value-of select="$baseurl"/>script/ie-html5.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;![endif]</xsl:comment>
<!-- Nur im Kalender -->
<xsl:if test="/page/calendar-summary">
<!-- vv01f: todo: build tags for existing files only -->
<xsl:call-template name="make-script-tag">
<xsl:with-param name="name" select="'calendar'"/>
<xsl:with-param name="name">calendar</xsl:with-param>
</xsl:call-template>
</xsl:if>
<xsl:call-template name="make-script-tag">
<xsl:with-param name="name" select="'jquery-1.8.3.min'"/>
<xsl:with-param name="name">jquery-1.8.3.min</xsl:with-param>
</xsl:call-template>
<xsl:call-template name="make-script-tag">
<xsl:with-param name="name" select="'jquery.dataset'"/>
<xsl:with-param name="name">jquery.dataset</xsl:with-param>
</xsl:call-template>
<xsl:call-template name="make-script-tag">
<xsl:with-param name="name" select="'pentamedia-comments'"/>
<xsl:with-param name="name">pentamedia-comments</xsl:with-param>
</xsl:call-template>
<xsl:call-template name="make-script-tag">
<xsl:with-param name="name" select="'play-resources'"/>
<xsl:with-param name="name">play-resources</xsl:with-param>
</xsl:call-template>
<xsl:call-template name="make-script-tag">
<xsl:with-param name="name" select="'bitlove-enclosures'"/>
<xsl:with-param name="name">bitlove-enclosures</xsl:with-param>
</xsl:call-template>
<!-- Nur auf membership.html -->
<xsl:if test="/page/membership-form">
<!-- vv01f: todo: build tags for existing files only -->
<xsl:call-template name="make-script-tag">
<xsl:with-param name="name">membership</xsl:with-param>
</xsl:call-template>
</xsl:if>
</xsl:template>

6
xsl/xhtml5.xsl
View File

@ -438,4 +438,10 @@
<img src="{{.}}"/>
</xsl:template>
<xsl:template match="membership-form">
<div class="membership-form">
<xsl:text>&#10;</xsl:text>
</div>
</xsl:template>
</xsl:stylesheet>