/*
Add this script line just before closing body tag
Any object that should open a survey needs to have the css class 'open-survey'
There are 2 ways to specify which survey the element should open
1: add the data attribute with the form url, without protocol
ex: data = 'form.responster.com/mxXvC4/[email protected]'
2: add the survey attribute to the element with the 6 letter survey id
ex: survey = 'mxXvC4'
if there are meta data, add the meta attribute to the element
ex: meta = '[email protected]'
*/
(function () {
addClickListeners('open-survey');
styleLaunchButton();
function addClickListeners(classname) {
var elements = document.getElementsByClassName(classname);
for (var i = 0; i < elements.length; i++) {
elements[i].style.cssText = 'cursor:pointer;';
addEvent(elements[i],'click',function(e) { showSurvey(e) });
}
}
function styleLaunchButton() {
var button = document.getElementsByClassName("responster-button")[0];
if (button) {
button.setAttribute("style", "background: #19adee; color: #fff; border: 0; padding: 18px 30px; font-weight: 400; border-radius: 4px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 14px; cursor: pointer; outline: 0 !important;");
}
}
function showSurvey(obj) {
obj.preventDefault();
var targeturl = createUrlForTarget(obj.target);
if(targeturl == '') { return false; }
createDivFrameToUrl(targeturl);
}
function createDivFrameToUrl(targeturl) {
var d = document;
var close = createCloseButton();
var iframe = createSurveyFrame('https://'+targeturl);
var overlay = createOverlayDiv();
overlay.appendChild(iframe);
overlay.appendChild(close);
d.body.appendChild(overlay);
}
function createCloseButton() {
var close = document.createElement('div');
close.style.cssText = 'cursor: pointer; top: 20px; right: 20px; width: 18px; height: 18px; position: fixed; background: url(https://account.responster.com/images/sprite.png) -232px -475px no-repeat;';
close.setAttribute('title', 'Close');
return close;
}
function createSurveyFrame(url) {
var iframe = document.createElement('iframe');
iframe.style.cssText = 'width: 90%; width: calc(100vw - 100px); height: 84%; height: calc(100vh - 100px); border: none;';
iframe.src = url;
var shadowWrapper = document.createElement('div');
shadowWrapper.style.cssText= 'background: rgba(20,20,0,.9); position: absolute; width: 90%; width: calc(100vw - 100px); height: 84%; height: calc(100vh - 100px); top: 5%; top: calc(0vh + 50px); left: 8%; left: calc(0vw + 50px); box-shadow: rgba(0,0,0,0.5) 0 0 200px; border-radius: 5px;';
var roundedWrapper = document.createElement('div');
roundedWrapper.style.cssText = 'border-radius: 5px; overflow: hidden;'
shadowWrapper.appendChild(roundedWrapper);
roundedWrapper.appendChild(iframe);
return shadowWrapper;
}
function createOverlayDiv() {
var div = document.createElement('div');
div.id = 'ResponsterSurvey';
div.style.cssText = 'top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 9999; background: rgba(0,0,0,0.8);';
addEvent(div,'click',function() { div.parentNode.removeChild(div) });
return div;
}
function createUrlForTarget(element) {
var targeturl = element.getAttribute('data');
if(!targeturl) {
var survey = element.getAttribute('survey');
if(!isValidFormID(survey)) {
return '';
}
var meta = element.getAttribute('meta');
targeturl = 'form.responster.com/' + encodeURI(survey);
if(meta) {
targeturl = targeturl + '/?' + encodeURI(meta);
}
}
return targeturl.replace(/https?\:\/+/i,'').replace(/^\/+/,'');
}
function isValidFormID(formID) {
return (formID.replace(/[a-z0-9]/ig,'') == '');
}
function addEvent(element, evnt, funct) {
if (element.attachEvent) {
element.attachEvent('on'+evnt, funct);
} else {
element.addEventListener(evnt, funct, false);
}
}
})();