pages/membership: implement a javascript membership form

content/pages/membership.xml

@@ -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>
-	<li>Sende es an <link href="mailto:vorstand@c3d2.de">vorstand@c3d2.de</link>,</li>
+    Fülle das
-	<li>Alternativ, schicke einen Ausdruck an unsere <link href="/space.html#anschrift">postalische Anschrift</link>.</li>
+    <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

content/static/script/membership.js

@@ -0,0 +1,83 @@
+function escape(s) {
+    return s.replace(/&/g, "&")
+        .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();
+});

content/static/style/default.css

@@ -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;
+}

xsl/header.xsl

@@ -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>
 

xsl/xhtml5.xsl

@@ -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>