Add feedback form sending
This commit is contained in:
parent
372ef5d3b8
commit
42364c1337
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" data-view="home" class="no-js">
|
||||
<html lang="en" data-view="contact" class="no-js">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
|
|
@ -75,20 +75,21 @@
|
|||
<div class="contacts__arrow"></div>
|
||||
</div>
|
||||
<div class="contacts__feedback">
|
||||
<form method="post" action="/">
|
||||
<div class="contacts__message">
|
||||
<label for="feedback__message">Your Message</label>
|
||||
<textarea id="feedback__message" class="float-label"></textarea>
|
||||
<form method="post" id="feedback__form">
|
||||
<div class="contacts__msg">
|
||||
<label for="feedback__msg">Your Message</label>
|
||||
<textarea id="feedback__msg" class="float-label"></textarea>
|
||||
</div>
|
||||
<div class="contacts__email">
|
||||
<label for="feedback__email">Your E-Mail</label>
|
||||
<input type="email" id="feedback__email" text="" class="float-label" />
|
||||
</div>
|
||||
<div class="contacts__terms">
|
||||
<input id="feedback__terms" type="checkbox" name="terms_accepted" value="1" />
|
||||
<label for="feedback__terms" class="box-label">I agree with <a
|
||||
<!--input id="feedback__terms" type="checkbox" name="terms_accepted" value="1" />
|
||||
<label for="feedback__terms" class="box-label"-->
|
||||
By submitting this form you agree with <a
|
||||
href="/privacy-statement.html">Privacy Statement</a> and accept
|
||||
<a href="terms-of-use.html">Terms of Use</a>.</label>
|
||||
<a href="terms-of-use.html">Terms of Use</a>.
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<button type="submit">Send</button>
|
||||
|
|
|
|||
212
static/main.js
212
static/main.js
|
|
@ -1,8 +1,8 @@
|
|||
'use strict';
|
||||
|
||||
// jStuff
|
||||
// JStuff
|
||||
|
||||
function jStuff(query)
|
||||
function JStuff(query)
|
||||
{
|
||||
this.nodes = null;
|
||||
|
||||
|
|
@ -33,6 +33,11 @@ function jStuff(query)
|
|||
return this;
|
||||
};
|
||||
|
||||
this.onSubmit = function(handler) {
|
||||
this.all(function(n, f) {n.addEventListener('submit', f, false)}, handler);
|
||||
return this;
|
||||
};
|
||||
|
||||
this.addClass = function(className) {
|
||||
this.all(function(node, cn) {
|
||||
if (node.classList)
|
||||
|
|
@ -77,20 +82,22 @@ function jStuff(query)
|
|||
}
|
||||
}, className);
|
||||
}
|
||||
|
||||
this.value = function(value) {
|
||||
return this.all(function(node, value) {
|
||||
if (node.value) {
|
||||
if (value)
|
||||
node.value = value;
|
||||
return node.value;
|
||||
}
|
||||
return null;
|
||||
}, value);
|
||||
}
|
||||
}
|
||||
|
||||
jStuff.create = function(tagName, childNode) {
|
||||
var n = document.createElement(tagName);
|
||||
if (childNode)
|
||||
n.appendChild(childNode);
|
||||
return new jStuff(n);
|
||||
}
|
||||
window.$ = function(q){return new JStuff(q)};
|
||||
|
||||
jStuff.createLabel = function(text) {
|
||||
return new jStuff(document.createTextNode(text));
|
||||
}
|
||||
|
||||
jStuff.main = function(func) {
|
||||
window.$.main = function(func) {
|
||||
if (window.addEventListener) {
|
||||
addEventListener("load", func, false);
|
||||
} else if (window.attachEvent) {
|
||||
|
|
@ -100,7 +107,105 @@ jStuff.main = function(func) {
|
|||
}
|
||||
}
|
||||
|
||||
window.$ = jStuff;
|
||||
$.create = function(tagName, childNode) {
|
||||
var n = document.createElement(tagName);
|
||||
if (childNode)
|
||||
n.appendChild(childNode);
|
||||
return new JStuff(n);
|
||||
}
|
||||
|
||||
$.createLabel = function(text) {
|
||||
return new JStuff(document.createTextNode(text));
|
||||
}
|
||||
|
||||
// AJAX
|
||||
|
||||
function JStuffAjax(attr) {
|
||||
var GET = 'GET',
|
||||
POST = 'POST',
|
||||
t = this,
|
||||
query = '',
|
||||
method,
|
||||
r;
|
||||
|
||||
try {
|
||||
method = (attr.method == POST) ? POST : GET;
|
||||
} catch(e) {
|
||||
method = GET;
|
||||
}
|
||||
|
||||
this.onReadyStateChange = function() {
|
||||
if (this.request.readyState == 4) {
|
||||
if (this.request.status === 200) {
|
||||
if (typeof (this.attr.load) !== 'undefined') {
|
||||
this.attr.load(this.request.status, this.request.responseText);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
try {
|
||||
r = new XMLHttpRequest();
|
||||
} catch(e) {
|
||||
var iev=[
|
||||
"MSXML2.XmlHttp.5.0",
|
||||
"MSXML2.XmlHttp.4.0",
|
||||
"MSXML2.XmlHttp.3.0",
|
||||
"MSXML2.XmlHttp.2.0",
|
||||
"Microsoft.XmlHttp"
|
||||
];
|
||||
|
||||
for(var i = 0; i < iev.length; i++) {
|
||||
try {
|
||||
r = new ActiveXObject(iev[i]);
|
||||
break;
|
||||
} catch(e){
|
||||
// do nothing
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof (attr.data) !== 'undefined') {
|
||||
for (var key in attr.data) {
|
||||
if (query != '')
|
||||
query += '&';
|
||||
query += encodeURIComponent(key)+'='+encodeURIComponent(attr.data[key]);
|
||||
}
|
||||
|
||||
if (method == GET) {
|
||||
attr.url += '?'+query;
|
||||
query = null;
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof (attr.sync) === 'undefined') {
|
||||
attr.sync = true;
|
||||
}
|
||||
|
||||
r.overrideMimeType("text/plain");
|
||||
r.open(method, attr.url, attr.sync);
|
||||
r.setRequestHeader("Content-type","application/x-www-form-urlencoded");
|
||||
r.onreadystatechange = function() {t.onReadyStateChange()};
|
||||
|
||||
r.send(query);
|
||||
|
||||
this.request = r;
|
||||
this.attr = attr;
|
||||
}
|
||||
|
||||
$.ajax = function(attr) {return new JStuffAjax(attr)};
|
||||
|
||||
$.log = function(msg, ex) {
|
||||
if (console.log) {
|
||||
if (ex) {
|
||||
msg += ' E('+ex.message+')';
|
||||
}
|
||||
console.log(msg);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// SVG fix
|
||||
|
||||
|
|
@ -341,62 +446,63 @@ function getSVGAncestor(node) {
|
|||
}
|
||||
|
||||
|
||||
// Main
|
||||
// Core
|
||||
var gCore = {
|
||||
mod: null
|
||||
};
|
||||
|
||||
function main()
|
||||
// Contact
|
||||
|
||||
function Contact()
|
||||
{
|
||||
/*
|
||||
var inps = document.querySelectorAll('.float-label');
|
||||
var t = this;
|
||||
|
||||
console.log('INputs: '+JSON.stringify(inps));
|
||||
this.email = $('#feedback__email');
|
||||
this.msg = $('#feedback__msg');
|
||||
|
||||
for (var i=0; i<inps.length; i++)
|
||||
{
|
||||
var inp = inps[i];
|
||||
this.onLoad = function(httpStatus, content) {
|
||||
if (httpStatus == 200) {
|
||||
this.email.value('');
|
||||
this.msg.value('');
|
||||
$.log('Success!');
|
||||
alert("Thank you for your message!");
|
||||
} else {
|
||||
alert("Your message was not sent!");
|
||||
$.log('server response: '+httpStatus);
|
||||
}
|
||||
};
|
||||
|
||||
if (inp.value != '')
|
||||
inp.parentNode.classList.add('active');
|
||||
|
||||
inp.addEventListener('focus', (event) => {
|
||||
var t = event.currentTarget;
|
||||
t.parentNode.classList.add('active');
|
||||
});
|
||||
|
||||
inp.addEventListener('blur', (event) => {
|
||||
var t = event.currentTarget;
|
||||
console.log(t.value)
|
||||
if (t.value == '')
|
||||
t.parentNode.classList.remove('active');
|
||||
this.onSubmit = function(evt) {
|
||||
$.ajax({
|
||||
url: '/hook/feedback/',
|
||||
handler: function(httpStatus, content) {t.onLoad(httpStatus, content)},
|
||||
data: {email: this.email.value(), msg: this.msg.value()},
|
||||
method: 'POST'
|
||||
});
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', (event) => {
|
||||
|
||||
var nodes = document.querySelectorAll('.slider'),
|
||||
scrollTop = window.scrollY;
|
||||
|
||||
for(var i=0; i<nodes.length; i++)
|
||||
{
|
||||
var speed = parseInt(nodes[i].getAttribute('data-speed'));
|
||||
console.log(scrollTop);
|
||||
console.log(nodes[i].getAttribute('data-speed'));
|
||||
console.log('speed '+speed);
|
||||
nodes[i].style['transform'] = 'translateY(' + -(scrollTop / speed) + 'px)';
|
||||
console.log('style '+nodes[i].style.transform);
|
||||
}
|
||||
|
||||
});
|
||||
*/
|
||||
|
||||
$('#feedback__form').onSubmit(function(evt) {return t.onSubmit(evt)});
|
||||
}
|
||||
|
||||
// Main
|
||||
|
||||
$.main(function(){
|
||||
// initialize menu
|
||||
var sw = $('#menu__switch').onClick(function(evt) {
|
||||
var menu = $('#menu'),
|
||||
targ = $(evt.currentTarget);
|
||||
menu.switchClass('menu--visible');
|
||||
targ.switchClass('menu__switch--opened');
|
||||
});
|
||||
// modules
|
||||
switch($(document.documentElement).attribute('data-view')) {
|
||||
case 'contact':
|
||||
gCore.mod = new Contact();
|
||||
break;
|
||||
}
|
||||
|
||||
svg4everybody();
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue