Skip to content

Instantly share code, notes, and snippets.

@baldwicc
Last active December 21, 2015 22:09
Show Gist options
  • Save baldwicc/6373071 to your computer and use it in GitHub Desktop.
Save baldwicc/6373071 to your computer and use it in GitHub Desktop.
Adds a native lightbox based on url regex, or a native inline messages based on matching css selectors. Useful when decommissioning tools.
/** qut-inlinewarnings
* Adds a native lightbox based on url regex, or a native inline messages based on matching css selectors. Useful when decommissioning tools.
*
* - Uses .html resources for lightbox iframes
* - Only shows lightbox once a day
* - Useful for building block pages, or standard pages with content items
* - Tracks to GA
*
* @author Christopher Baldwin [https://staff.qut.edu.au/details?id=baldwicc]
* @licence Simplified BSD License
* @source https://gist.github.com/baldwicc/6373071
*/
/*
Usage:
- add objects to triggers[]
- set use_ga for google analytics or not (uses _gaq)
- set courseid to the current course title or course pkid
*/
Event.observe(document, "dom:loaded", function() {
/* SETUP */
var options = {
// current course id. Used as event label for GATC
courseid: "${context.courseId.externalString}",
// whether or not to use google analytics
use_ga: true,
// how often to re-show the same lightbox (in seconds)
cookie_timeout: 86400, // one day
/*
* Define new triggers like so:
* triggers[#].name: gatc action label
* triggers[#].category: gatc category label
*
* Notes:
* - Leave triggers[#].inline and triggers[#].lightbox undefined if they are not required.
* - Using both urlregex and selector is probably silly
*
* Stuff for inline messages:
* triggers[#].inline.selector: css selector (jquery / prototype)
* triggers[#].inline.msgtype: type of message displayed ("bad","success" or "warning")
* triggers[#].inline.html: html to use for inline message
*
* Stuff for lightboxes:
* triggers[#].lightbox.urlregex: regex to determine if page requires a lightbox
* triggers[#].lightbox.selector: css selector (jquery / prototype).
* triggers[#].lightbox.lbframe: path to html for lightbox iframe
* triggers[#].lightbox.lbtitle: title of lightbox
*/
triggers: [
// START triggers
// campus pack wiki
{
name: "wiki",
category: "lobj_2013",
inline: {
selector: '#content_listContainer li img.item_icon[src^="/webapps/lobj-wiki-"]',
msgtype: "bad",
html: ["<p>Campus Pack Wikis will not function after Semester 2, 2013. Please use Blackboard native tools. For information about the Blackboard tools and archiving Campus Pack data, see the <a style='color: #fff; text-decoration: underline;' href='http://www.els.qut.edu.au/blendedlearning/blackboard/campuspack.jsp' target='_new'>project webpage</a>.</p>"].join("\n")
},
lightbox: {
urlregex: /^\/webapps\/lobj-wiki-/,
lbframe: "${resourcePath}/wiki.html",
lbtitle: "Important Message: "
},
},
// campus pack blog
{
name: "blog",
category: "lobj_2013",
inline: {
selector: '#content_listContainer li img.item_icon[src^="/webapps/lobj-journal-"]',
msgtype: "bad",
html: [" <p>", " Campus Pack Blogs will not function after Semester 2, 2013. Please use Blackboard native tools. For information about the Blackboard tools and archiving Campus Pack data, see the <a style='color: #fff; text-decoration: underline;' href='http://www.els.qut.edu.au/blendedlearning/blackboard/campuspack.jsp' target='_new'>project webpage</a>.", " </p>"].join("\n")
},
lightbox: {
urlregex: /^\/webapps\/lobj-journal-/,
lbframe: "${resourcePath}/blog.html",
lbtitle: "Important Message: "
},
},
// campus pack podcast
{
name: "podcast",
category: "lobj_2013",
inline: {
selector: '#content_listContainer li img.item_icon[src^="/webapps/lobj-podcast-"]',
msgtype: "bad",
html: [" <p>", " Campus Pack Podcast will not function after Semester 2, 2013. For information about other tools, see the <a style='color: #fff; text-decoration: underline;' href='http://www.els.qut.edu.au/blendedlearning/blackboard/campuspack.jsp' target='_new'>project webpage</a>.", " </p>"].join("\n")
},
lightbox: {
urlregex: /^\/webapps\/lobj-podcast-/,
lbframe: "${resourcePath}/podcast.html",
lbtitle: "Important Message: "
},
}
],
};
/**
* A complete cookies reader/writer framework with full unicode support.
*
* Syntaxes:
* docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
* docCookies.getItem(name)
* docCookies.removeItem(name[, path])
* docCookies.hasItem(name)
* docCookies.keys()
*
* @source https://developer.mozilla.org/en-US/docs/DOM/document.cookie
* @licence http://www.gnu.org/licenses/gpl-3.0-standalone.html
* @type {Object}
*/
var docCookies = {
getItem: function(sKey) {
return decodeURI(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURI(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
},
setItem: function(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) {
return false;
}
var sExpires = "";
if (vEnd) {
switch (vEnd.constructor) {
case Number:
sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
break;
case String:
sExpires = "; expires=" + vEnd;
break;
case Date:
sExpires = "; expires=" + vEnd.toGMTString();
break;
}
}
document.cookie = encodeURI(sKey) + "=" + encodeURI(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
return true;
},
removeItem: function(sKey, sPath, sDomain) {
if (!sKey || !this.hasItem(sKey)) {
return false;
}
document.cookie = encodeURI(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sPath ? "; path=" + sPath : "") + (sDomain ? "; domain=" + sDomain : "");
return true;
},
hasItem: function(sKey) {
return (new RegExp("(?:^|;\\s*)" + encodeURI(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
},
keys: /* optional method: you can safely remove it! */ function() {
var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
for (var nIdx = 0; nIdx < aKeys.length; nIdx++) {
aKeys[nIdx] = decodeURI(aKeys[nIdx]);
}
return aKeys;
}
};
/**
* track specific tool to gatc
* @param {object} tool a tool object from the triggers array
*/
var trackToGA = function(tool, actionsuffix) {
if (options.use_ga) {
var _gaq = window._gaq || [];
_gaq.push(['_trackEvent', tool.category, tool.name + actionsuffix, options.courseid]);
}
};
/**
* IE Detection
* @return {number|undefined} version of IE
* @source https://gist.github.com/527683
*/
var ie = (function() {
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', all[0]);
return v > 4 ? v : undef;
}());
/**
* add message using page.InlineConfirmation. will not overwrite existing message.
* @param {object} inline a inline object from a tool in the triggers array
*/
var addInlineMessage = function(inline) {
// page.InlineConfirmation.prototype = function( type, message, showRefreshLink, oneReceiptPerPage )
new page.InlineConfirmation(inline.msgtype, "</a>" + inline.html + "<a>", false, true);
};
/**
* Adds lightbox to page for a given tool
* @param {object} tool a tool from triggers
* @returns {boolean} whether or not a lb was added
*/
var addLightbox = function(tool) {
var lbadded = false;
// check if the current pages url matches this tool's regex, or if selector was matched
if ((tool.lightbox.urlregex && document.location.pathname.match(tool.lightbox.urlregex)) || $$(tool.lightbox.selector).length) {
lbadded = true;
// if we want a lightbox, and we're not in IE, and no cookie exists
if (tool.lightbox === "object" && !ie && docCookies.getItem(tool.category) !== tool.name) {
var lbInstance = new lightbox.Lightbox({
title: tool.lightbox.lbtitle,
contents: '<iframe src="' + tool.lightbox.lbframe + '" width="100%" height="400" />',
showCloseLink: true,
closeOnBodyClick: true,
useDefaultDimensionsAsMinimumSize: true,
defaultDimensions: {
w: 720,
h: 400
}
});
lbInstance.open();
// cookie it
docCookies.setItem(tool.category, tool.name, options.cookie_timeout, '/'); // twenty four hours. yep.
// track it
trackToGA(tool, '_lightbox_warning');
} else {
// fallback for ie or cookies people
addInlineMessage(tool.inline);
trackToGA(tool, '_lightbox_warning_cookieorie');
}
}
return lbadded;
};
/**
* initialise using prototype
*/
var init = function() {
var i, ii;
for (i = 0; i < options.triggers.length; i++) {
var tool = options.triggers[i];
var lbdone = false;
// first, add lightboxes for this tool.
lbdone = addLightbox(tool);
// if there were no lb's added, lets go parsing
if (tool.inline) {
if (!lbdone) {
// see if anything matches this tool's selector
var elems = $$(tool.inline.selector);
// add message and track for all found elements
for (ii = 0; ii < elems.length; ii++) {
addInlineMessage(tool.inline);
trackToGA(tool, '_inline_warning_css');
}
// and handle urlregexes
if (tool.inline.urlregex && document.location.pathname.match(tool.inline.urlregex)) {
addInlineMessage(tool.inline);
trackToGA(tool, '_inline_warning_url');
}
}
}
}
};
/** BUSINESS END */
init();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment