Stick Footer for Blackboard Learn

qut-stickyfooter.js

/**
 * qut-stickyfooter
 * @author Christopher Baldwin [https://staff.qut.edu.au/details?id=baldwicc]
 * @licence Simplified BSD License
 * @source https://gist.github.com/baldwicc/6362546
 */

/*
  Usage:
  -  Point options.csspath at a stylesheet, and edit html.footer as appropriate

  Update 20130924:
  -  Removed reliance on jQuery
  -  Removed pusher / wrapper elements, as this affected TinyMCE :(
  -  Using scroll and resize events instead of overloading native classes
 */

Event.observe(document, "dom:loaded", function() {

  var opts = {
    bindOnScrollResize: true,
    csspath: "${resourcePath}/qut-footer.css"
  };

  /**
   * html snippets
   * @type {Object}
   * @property {string} footer html for the footer
   */
  var html = {
    footer: [
      '<div id="qut-footer">',
      '  <div id="footer-content">',
      '    <ul id="footer-page-menu">',
      '      <li>',
      '        <a href="http://blogs.qut.edu.au/student-sharehouse/">',
      '          Home',
      '        </a>',
      '      </li>',
      '      <li class="page_item">',
      '        <a href="#">',
      '          <span>Link 1</span>',
      '        </a>',
      '      </li>',
      '      <li class="page_item">',
      '        <a href="#">',
      '          <span>Link 2</span>',
      '        </a>',
      '      </li>',
      '      <li class="page_item">',
      '        <a href="#">',
      '          <span>Link 3</span>',
      '        </a>',
      '      </li>',
      '      <li class="page_item">',
      '        <a href="#">',
      '          <span>Link 4</span>',
      '        </a>',
      '      </li>',
      '    </ul><!-- #footer-page-menu -->',
      '    <ul id="footer-social-media-links">',
      '      <li id="facebook-footer-icon">',
      '        <a href="http://www.facebook.com/QUTBrisbane">',
      '          <img src="${resourcePath}/facebook-icon-footer.png" alt="">',
      '        </a>',
      '      </li>',
      '      <li id="twitter-footer-icon">',
      '        <a href="http://twitter.com/qut">',
      '          <img src="${resourcePath}/twitter-icon-footer.png" alt="">',
      '        </a>',
      '      </li>',
      '      <li id="youtube-footer-icon">',
      '        <a href="http://www.youtube.com/user/TheQUTube">',
      '          <img src="${resourcePath}/youtube-icon-footer.png" alt="">',
      '        </a>',
      '      </li>',
      '      <li id="itunesu-footer-icon">',
      '        <a href="http://itunes.apple.com/au/institution/queensland-university-of-technology/id456443622">',
      '          <img alt="QUT on iTunes U" src="${resourcePath}/itunesu-icon-footer.png">',
      '        </a>',
      '      </li>',
      '      <li id="linkedin-footer-icon">',
      '        <a href="http://www.linkedin.com/company/165624">',
      '          <img src="${resourcePath}/linkedin-icon-footer.png" alt="QUT on LinkedIn">',
      '        </a>',
      '      </li>',
      '      <li id="email-footer-icon">',
      '        <a href="http://www.qut.edu.au/additional/stay-connected">',
      '          <img src="${resourcePath}/email-icon-footer.png" alt="Stay connected">',
      '        </a>',
      '      </li>',
      '    </ul><!-- #footer-social-media-links -->',
      '  </div><!-- #footer-content -->',
      '  <div id="footer-supplementary-wrapper">',
      '    <div id="footer-supplementary">',
      '      <p id="last-modified"><span><abbr title="Commonwealth Register of Institutions and Courses for Overseas Students">CRICOS</abbr> No. 00213J</span>  <abbr title="Australian Business Number">ABN</abbr> 83 791 724 622</p>',
      '      <ul>',
      '        <li><a href="http://www.qut.edu.au/additional/accessibility">Accessibility</a></li>',
      '        <li><a href="http://www.qut.edu.au/additional/copyright">Copyright</a></li>',
      '        <li><a href="http://www.qut.edu.au/additional/disclaimer">Disclaimer</a></li>',
      '        <li><a href="http://www.qut.edu.au/additional/privacy">Privacy</a></li>',
      '        <li><a href="http://www.qut.edu.au/additional/right-to-information">Right to Information</a></li>',
      '        <li><a href="http://www.qut.edu.au/about/contact/leave-feedback">Feedback</a></li>',
      '      </ul>',
      '    </div>',
      '  </div><!-- #footer-supplementary-wrapper-->',
      '</div>'
    ].join('\n'),
  };

  /**
   * sets height on locationPane to match contentPanel or menuWrap (whichever is taller)
   * then adjusts it to ensure footer stays at bottom of viewport, or bottom of body
   */
  var updateHeights = function() {

    // remove Bb's fixed heights from #navigationPane and #contentPanel
    // before getting the actual height
    var navigationpane_height = $('navigationPane').setStyle({
      height: 'auto'
    }).getHeight();

    var contentpanel_height = $('contentPanel').setStyle({
      height: 'auto'
    }).getHeight();

    var locationpane_newheight = navigationpane_height < contentpanel_height ? contentpanel_height : navigationpane_height;

    var locationpane_height = $$('.locationPane')[0].setStyle({
      height: locationpane_newheight + 'px'
    }).getHeight();

    var footer_offset = document.documentElement.clientHeight - $('qut-footer').cumulativeOffset().top - $('qut-footer').getHeight();

    if (footer_offset > 0) {
      locationpane_newheight = locationpane_newheight + footer_offset;
      locationpane_height = $$('.locationPane')[0].setStyle({
        height: locationpane_newheight + 'px'
      }).getHeight();
    }
  };

  /**
   * adds footer and css
   * @param  {string} csspath     path to css for footer
   * @param  {string} footer      html for footer
   */
  var addfooter = function(csspath, footer) {
    // pop stylesheet in head
    $(document.head).insert({
      bottom: '<link rel="stylesheet" type="text/css" href="' + csspath + '" />'
    });

    // tack footer on body
    $(document.body).insert({
      bottom: footer
    });
  };

  /**
   * fires updateHeights function on window.scroll and window.resize events
   */
  var bindOnScrollEvent = function() {
    if (opts.bindOnScrollResize) {
      Event.observe(window, 'scroll', function() {
        updateHeights();
      });
      Event.observe(window, 'resize', function() {
        updateHeights();
      });
    }
  };

  /**
   * business
   */
  var init = function() {
    bindOnScrollEvent();
    addfooter(opts.csspath, html.footer);
    updateHeights();
  };

  init();

});