0% found this document useful (0 votes)
212 views

Zenbox Js

This document defines code for initializing and displaying a feedback tab in the browser. It includes functions for creating HTML elements, configuring settings, and showing/hiding an overlay window. The code defines a Zenbox object with methods for initializing, updating, rendering, and hiding the feedback tab and overlay.

Uploaded by

jaarit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
212 views

Zenbox Js

This document defines code for initializing and displaying a feedback tab in the browser. It includes functions for creating HTML elements, configuring settings, and showing/hiding an overlay window. The code defines a Zenbox object with methods for initializing, updating, rendering, and hiding the feedback tab and overlay.

Uploaded by

jaarit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

// IE6+SSL fix courtesy of http://www.tribalogic.

net/
;(function(window) {
// Zendesk Feedback Tab version 2.6
// Most of the assets are from version 2.1. There is a slight difference
// in the markup inside the feedback tab and some changes to the CSS for
// that markup.
// v.26: Reverts 2.5 and adds structure for future language support.
var document = window.document,
urlWithScheme = /^([a-zA-Z]+:)?\/\//,
settings = {
url:
null, // required
dropboxID:
null, // required
tabColor:
"#000000",
// the remaining settings are optional and listed here so users of the l
ibrary know what they can configure:
assetHost:
"//assets.zendesk.com",
tabTooltip:
"support", // tooltip text (appears when hovering over
tab)
tabImageURL:
null,
// optional; overrides URL generated from ta
bID
tabPosition:
'Left',
// or 'Right'
hide_tab:
false,
// if true, don't display the tab after init
ialization
request_subject:
null, // pre-populate the ticket submission form
subject
request_description: null, // "
"
"
"
"
"
description
requester_name:
null, // "
"
"
"
"
"
user name
requester_email:
null // "
"
"
"
"
"
user email
},
// references to elements on the page:
tab,
overlay,
container,
closeButton,
iframe,
scrim;
function attempt(fn) {
try {
return fn();
} catch(e) {
if (window.console && window.console.log && window.console.log.apply) {
window.console.log("Zenbox Error: ", e);
}
}
}
function bindEvent(element, eventName, callback) {
if (element && element.addEventListener) {
element.addEventListener(eventName, callback, false);
} else if (element && element.attachEvent) {
element.attachEvent('on' + eventName, callback);
}
}

function prependSchemeIfNecessary(url) {
if (url && !(urlWithScheme.test(url))) {
return document.location.protocol + '//' + url;
} else {
return url;
}
}
// must be called after the DOM is loaded
function createElements() {
tab = document.createElement('div');
tab.setAttribute('id', 'zenbox_tab');
tab.setAttribute('href', '#');
tab.style.display = 'none';
document.body.appendChild(tab);
overlay = document.createElement('div');
overlay.setAttribute('id', 'zenbox_overlay');
overlay.style.display = 'none';
overlay.innerHTML = '<div id="zenbox_container">' +
' <div class="zenbox_header"><img id="zenbox_close" /><
/div>' +
' <iframe id="zenbox_body" frameborder="0" scrolling="a
uto" allowTransparency="true"></iframe>' +
'</div>' +
'<div id="zenbox_scrim">&nbsp;</div>';
document.body.appendChild(overlay);
container
closeButton
iframe
scrim

=
=
=
=

document.getElementById('zenbox_container');
document.getElementById('zenbox_close');
document.getElementById('zenbox_body');
document.getElementById('zenbox_scrim');

bindEvent(tab,
'click', function() { window.Zenbox.show(); });
bindEvent(closeButton, 'click', function() { window.Zenbox.hide(); });
bindEvent(scrim,
'click', function() { window.Zenbox.hide(); });
}
function configure(options) {
var prop;
for (prop in options) {
if (options.hasOwnProperty(prop)) {
if (prop === 'url' || prop === 'assetHost') {
settings[prop] = prependSchemeIfNecessary(options[prop]);
} else {
settings[prop] = options[prop];
}
}
}
}
function updateTabImage() {
tab.innerHTML = '<img src="' + settings.tabImageURL + '" />';
}
function updateTab() {
if (settings.hide_tab) {
tab.style.display = 'none';
} else {
updateTabImage();

tab.setAttribute('title', settings.tabTooltip);
tab.setAttribute('class', 'ZenboxTab' + settings.tabPosition);
tab.setAttribute('className', 'ZenboxTab' + settings.tabPosition);
tab.style.backgroundColor = settings.tabColor;
tab.style.borderColor = settings.tabColor;
tab.style.display = 'block';
}
}
function cancelEvent(e) {
var event = e || window.event || {};
event.cancelBubble = true;
event.returnValue = false;
event.stopPropagation && event.stopPropagation();
event.preventDefault && event.preventDefault();
return false;
}
function getDocHeight(){
return Math.max(
Math.max(document.body.scrollHeight, document.documentElement.scrollHeight
),
Math.max(document.body.offsetHeight, document.documentElement.offsetHeight
),
Math.max(document.body.clientHeight, document.documentElement.clientHeight
)
);
}
function getScrollOffsets(){
return {
left: window.pageXOffset || document.documentElement.scrollLeft || documen
t.body.scrollLeft,
top: window.pageYOffset || document.documentElement.scrollTop || documen
t.body.scrollTop
};
}
function closeButtonURL() {
return settings.assetHost + '/external/zenbox/images/close_big.png';
}
// get the URL for the "loading" page to be used as iframe src while
// loading the Dropbox.
function loadingURL() {
return settings.assetHost + '/external/zenbox/v2.1/loading.html';
}
function dropboxURL() {
var url = settings.url + "/account/dropboxes/" + settings.dropboxID + '?x=1'
;
if (settings.request_subject)
st_subject; }
if (settings.request_description)
st_description; }
if (settings.requester_name)
ster_name; }
if (settings.requester_email)
ster_email; }
return url;

{ url += '&subject='

+ settings.reque

{ url += '&description=' + settings.reque


{ url += '&name='

+ settings.reque

{ url += '&email='

+ settings.reque

}
function initialize(options) {
if (!tab) { createElements(); }
configure(options);
updateTab();
closeButton.src = closeButtonURL();
iframe.src = loadingURL();
window.addEventListener('message', function(e) {
if (e.data === 'hideZenbox') {
hide();
}
}, false);
}
function show(evt) {
iframe.src = dropboxURL();
overlay.style.height = scrim.style.height = getDocHeight() + 'px';
container.style.top = getScrollOffsets().top + 50 + 'px';
overlay.style.display = "block";
return cancelEvent(evt);
}
function hide(evt) {
overlay.style.display = 'none';
iframe.src = loadingURL();
return cancelEvent(evt);
}
var Zenbox = {
/*
PUBLIC API
Methods in the public API can be used as callbacks or as direct calls. A
s such,
they will always reference "Zenbox" instead of "this." Each one is wrapp
ed
in a try/catch block to ensure that including Zenbox doesn't break the p
age.
*/
/*
* Build and render the Zenbox tab and build the frame for the Zenbox overl
ay,
* but do not display it.
* @see settings for options
* @param {Object} options
*/
init: function(options) {
attempt(function() { return initialize(options); });
},
/*
* Alias for #init.
*/
update: function(options) {
attempt(function() { return initialize(options); });
},

/*
* Render the Zenbox. Alias for #show.
* @see #show
*/
render: function(evt) {
attempt(function() { return show(evt); });
},
/*
* Show the Zenbox. Aliased as #render.
* @params {Event} event the DOM event that caused the show; optional
* @return {false} false always, in case users want to bind it to an
*
onclick or other event and want to prevent default behav
ior.
*/
show: function(evt) {
attempt(function() { return show(evt); });
},
/*
* Hide the Zenbox.
* @params {Event} event the DOM event that caused the show; optional
* @return {false} false always, in case users want to bind it to an
*
onclick or other event and want to prevent default beha
vior.
*/
hide: function (evt){
attempt(function() { return hide(evt); });
}
};
bindEvent(window, 'load', function() {
if (window.zenbox_params) {
Zenbox.init(window.zenbox_params);
}
});
window.Zenbox = Zenbox;
}(this.window || this));

You might also like