I have recently been getting into the habit of leveraging the revealing module pattern for all my code. I used this guide for inspiration, but my code doesn't feel as elegant.
var styleGuide = (function styleGuideHandler() {
'use strict';
var publicAPI,
intervalId = null,
clipboard = new Clipboard('.copyButton'),
btns = document.querySelectorAll('.style-guide');
function setTooltip(btn, message) {
$(btn).attr('data-original-title', message);
setTimeout(function() {
$(btn).tooltip('show');
}, 150);
}
function hideTooltip(btn) {
if (intervalId !== null) {
clearTimeout(intervalId);
}
intervalId = setTimeout(function() {
$(btn).tooltip('hide');
intervalId = null;
}, 500);
}
publicAPI = {
init: function() {
clipboard.on('success', function(e) {
setTooltip(e.trigger, 'Copied!');
hideTooltip(e.trigger);
e.clearSelection();
console.log(e);
});
clipboard.on('error', function(e) {
setTooltip(e.trigger, 'Failed!');
hideTooltip(e.trigger);
console.log(e);
});
$('.copyButton').tooltip({
trigger: 'click',
placement: 'bottom'
});
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
/* preventDefault on buttons */
for (var i = 0, l = btns.length; i < l; i++) {
btns[i].addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
}
}
};
return publicAPI;
})();
$(document).ready(styleGuide.init);
Also, would executing the ready
function like this $(document).ready(function(){styleGuide.init});
encapsulate the module further? Meaning, there would be no chance the styleGuide
module could overwritten?