Team:Carnegie Mellon/tocjs

From 2012.igem.org

(Difference between revisions)
(Created page with "/*! * jquery.toc.js - A jQuery plugin that will automatically generate a table of contents. * v0.0.3 * https://github.com/jgallen23/toc * copyright JGA 2012 * MIT Lice...")
Line 1: Line 1:
-
/*!
+
/*  
-
  * jquery.toc.js - A jQuery plugin that will automatically generate a table of contents.
+
Initial source from Louis Lazaris:
-
  * v0.0.3
+
http://www.impressivewebs.com/fixed-table-of-contents-drop-down-menu-jquery-plugin/
-
  * https://github.com/jgallen23/toc
+
 
-
  * copyright JGA 2012
+
Modified by Yang Choo
-
  * MIT License
+
*/
-
  */
+
 
-
!function(e){e.fn.toc=function(t){var n=this,r=e.extend({},jQuery.fn.toc.defaults,t),i=e(r.container),s=e(r.selectors,i),o=[],u=r.prefix+"-active",a=function(t){for(var n=0,r=arguments.length;n<r;n++){var i=arguments[n],s=e(i);if(s.scrollTop()>0)return s;s.scrollTop(1);var o=s.scrollTop()>0;s.scrollTop(0);if(o)return s}return[]},f=a(r.container,"body","html"),l=function(t){if(r.smoothScrolling){t.preventDefault();var i=e(t.target).attr("href"),s=e(i);f.animate({scrollTop:s.offset().top},400,"swing",function(){location.hash=i})}e("li",n).removeClass(u),e(t.target).parent().addClass(u)},c,h=function(t){c&&clearTimeout(c),c=setTimeout(function(){var t=e(window).scrollTop(),i;for(var s=0,a=o.length;s<a;s++)if(o[s]>=t){e("li",n).removeClass(u),i=e("li:eq("+(s-1)+")",n).addClass(u),r.onHighlight(i);break}},50)};return r.highlightOnScroll&&(e(window).bind("scroll",h),h()),this.each(function(){var t=e(this),n=e("<ul/>");s.each(function(i,s){var u=e(s);o.push(u.offset().top-r.highlightOffset);var a=e("<span/>").attr("id",r.anchorName(i,s,r.prefix)).insertBefore(u),f=e("<a/>").text(u.text()).attr("href","#"+r.anchorName(i,s,r.prefix)).bind("click",function(n){l(n),t.trigger("selected",e(this).attr("href"))}),c=e("<li/>").addClass(r.prefix+"-"+u[0].tagName.toLowerCase()).append(f);n.append(c)}),t.html(n)})},jQuery.fn.toc.defaults={container:"body",selectors:"h1,h2,h3",smoothScrolling:!0,prefix:"toc",onHighlighted:function(){},highlightOnScroll:!0,highlightOffset:100,anchorName:function(e,t,n){return n+e}}}(jQuery)
+
(function ($) {
 +
    $.fixedTOC = function (el, settings) {
 +
 
 +
        var base = this,
 +
              s = null;
 +
 
 +
        base.$el = $(el);
 +
        base.el = el;
 +
 
 +
        // Add a reverse reference to the DOM object
 +
        base.$el.data("fixedTOC", base);
 +
        base.settings = $.extend({}, $.fixedTOC.defaultSettings, settings);
 +
        s = base.settings;
 +
 
 +
        if (!s.useSubMenus) {
 +
            s.tocLinks = '.toc-h1 > a';
 +
        }
 +
 
 +
        base.methods = {
 +
 
 +
            init : function () {
 +
 
 +
                // Put your initialization code here
 +
 
 +
                s.tocSub.slideUp();
 +
                s.tocHeight = base.$el.height() + 20;
 +
 
 +
                base.$el.css({
 +
                    top: '-' + s.tocHeight + 'px'
 +
                });
 +
 
 +
                base.$el.addClass(s.tocUpClass);
 +
 
 +
            },
 +
 
 +
            doOpenMenu : function () {
 +
 
 +
                s.tocLink.on(s.menuOpens, function () {
 +
 +
                    if (base.$el.hasClass(s.tocUpClass)) {
 +
 
 +
                        s.tocLink.find('span').addClass('rotate');
 +
 
 +
                        base.$el.stop().animate({
 +
                            top: '0'
 +
                        }, s.menuSpeed, function () {
 +
                            base.$el.removeClass(s.tocUpClass);
 +
                        });
 +
 
 +
                    } else {
 +
 
 +
                        s.tocHeight = base.$el.height() + 20;
 +
 
 +
                        s.tocLink.find('span').removeClass('rotate');
 +
 
 +
                        base.$el.stop().animate({
 +
                            top: '-' + s.tocHeight + 'px'
 +
                        }, s.menuSpeed, function () {
 +
                            base.$el.addClass(s.tocUpClass);
 +
                            s.tocSub.slideUp(0);
 +
                        });
 +
 
 +
                    }
 +
 
 +
                    return false;
 +
                });
 +
 
 +
            },
 +
 
 +
            doOpenItem : function () {
 +
 
 +
                $('.toc-h1>a, .toc-sub a').on('click', function () {
 +
 
 +
                    $(this).parent().siblings('.toc-h1').find('.toc-sub').stop().slideUp().addClass('closed');
 +
                    $(this).next('.toc-sub').stop().slideToggle().toggleClass('closed');
 +
 
 +
                    return false;
 +
 
 +
                });
 +
 
 +
            },
 +
 
 +
            doScroll : function () {
 +
 
 +
                $(s.tocLinks).on('click', function () {
 +
 
 +
                    s.currHash = $(this)[0].hash;
 +
 
 +
                    $('html, body').animate({
 +
                        scrollTop: $(s.currHash).offset().top - 80
 +
                    }, s.scrollSpeed, function () {
 +
                        location.hash = s.currHash;
 +
                    });
 +
 
 +
                    return false;
 +
 
 +
                });
 +
 
 +
            },
 +
 
 +
            doCloseMenu : function () {
 +
 
 +
                $('#toc-holder').on('mouseleave', function () {
 +
 
 +
                    s.tocHeight = base.$el.height() + 20;
 +
                    //s.tocLink.find('span').removeClass('rotate');
 +
 
 +
                    base.$el.animate(/*{
 +
                        top: '-' + s.tocHeight + 'px'
 +
                    },*/ s.menuSpeed, function () {
 +
                        base.$el.addClass(s.tocUpClass);
 +
                        if (s.resetSubMenus) {
 +
                            $('.toc-sub').slideUp(1).addClass('closed');
 +
                        }
 +
                    });
 +
 
 +
                });
 +
 
 +
            },
 +
 
 +
            doTopLink : function () {
 +
 
 +
                $(s.topLink).on('click', function () {
 +
 
 +
                    s.currHash = $(this)[0].hash;
 +
 
 +
                    $('html, body').animate({
 +
                        scrollTop: 0
 +
                    }, s.scrollSpeed, function () {
 +
                        location.hash = s.currHash;
 +
                    });
 +
 
 +
                    return false;
 +
 
 +
                });
 +
 
 +
            }
 +
 
 +
        };
 +
 
 +
        // Run methods
 +
        base.methods.init();
 +
        base.methods.doOpenMenu();
 +
        if (s.useSubMenus) {
 +
            base.methods.doOpenItem();
 +
        }
 +
        base.methods.doScroll();
 +
        base.methods.doCloseMenu();
 +
        if (s.topLinkWorks) {
 +
            base.methods.doTopLink();
 +
        }
 +
    };
 +
 
 +
    $.fixedTOC.defaultSettings = {
 +
        // non-customizable settings
 +
        tocHeight        : null,
 +
        tocSub          : $('.toc-sub'),
 +
        tocUpClass      : 'toc-up',
 +
        tocLink          : $('#toc-link'),
 +
        tocLinks        : '.toc-h1 ul a',
 +
        topLink          : $('#top-link'),
 +
        currHash        : null,
 +
        // customizable settings
 +
menuOpens : 'click',
 +
        scrollSpeed      : 1000,
 +
        menuSpeed        : 300,
 +
        useSubMenus      : true,
 +
        resetSubMenus    : true,
 +
        topLinkWorks    : true
 +
    };
 +
 
 +
    $.fn.fixedTOC = function (settings) {
 +
        return this.each(function () {
 +
            (new $.fixedTOC(this, settings));
 +
        });
 +
    };
 +
 
 +
})(jQuery);

Revision as of 17:15, 30 July 2012

/* Initial source from Louis Lazaris: http://www.impressivewebs.com/fixed-table-of-contents-drop-down-menu-jquery-plugin/

Modified by Yang Choo

  • /

(function ($) { 

   $.fixedTOC = function (el, settings) {

       var base = this,
              s = null;

       base.$el = $(el);
       base.el = el;

       // Add a reverse reference to the DOM object
       base.$el.data("fixedTOC", base);
       base.settings = $.extend({}, $.fixedTOC.defaultSettings, settings);
       s = base.settings;

       if (!s.useSubMenus) {
           s.tocLinks = '.toc-h1 > a';
       }

       base.methods = {

           init : function () {

               // Put your initialization code here

               s.tocSub.slideUp();
               s.tocHeight = base.$el.height() + 20;

               base.$el.css({
                   top: '-' + s.tocHeight + 'px'
               });

               base.$el.addClass(s.tocUpClass);

           },

           doOpenMenu : function () {

               s.tocLink.on(s.menuOpens, function () {

                   if (base.$el.hasClass(s.tocUpClass)) {

                       s.tocLink.find('span').addClass('rotate');

                       base.$el.stop().animate({
                           top: '0'
                       }, s.menuSpeed, function () {
                           base.$el.removeClass(s.tocUpClass);
                       });

                   } else {

                       s.tocHeight = base.$el.height() + 20;

                       s.tocLink.find('span').removeClass('rotate');

                       base.$el.stop().animate({
                           top: '-' + s.tocHeight + 'px'
                       }, s.menuSpeed, function () {
                           base.$el.addClass(s.tocUpClass);
                           s.tocSub.slideUp(0);
                       });

                   }

                   return false;
               });

           },

           doOpenItem : function () {

               $('.toc-h1>a, .toc-sub a').on('click', function () {

                   $(this).parent().siblings('.toc-h1').find('.toc-sub').stop().slideUp().addClass('closed');
                   $(this).next('.toc-sub').stop().slideToggle().toggleClass('closed');

                   return false;

               });

           },

           doScroll : function () {

               $(s.tocLinks).on('click', function () {

                   s.currHash = $(this)[0].hash;

                   $('html, body').animate({
                       scrollTop: $(s.currHash).offset().top - 80
                   }, s.scrollSpeed, function () {
                       location.hash = s.currHash;
                   });

                   return false;

               });

           },

           doCloseMenu : function () {

               $('#toc-holder').on('mouseleave', function () {

                   s.tocHeight = base.$el.height() + 20;
                   //s.tocLink.find('span').removeClass('rotate');

                   base.$el.animate(/*{
                       top: '-' + s.tocHeight + 'px'
                   },*/ s.menuSpeed, function () {
                       base.$el.addClass(s.tocUpClass);
                       if (s.resetSubMenus) {
                           $('.toc-sub').slideUp(1).addClass('closed');
                       }
                   });

               });

           },

           doTopLink : function () {

               $(s.topLink).on('click', function () {

                   s.currHash = $(this)[0].hash;

                   $('html, body').animate({
                       scrollTop: 0
                   }, s.scrollSpeed, function () {
                       location.hash = s.currHash;
                   });

                   return false;

               });

           }

       };

       // Run methods
       base.methods.init();
       base.methods.doOpenMenu();
       if (s.useSubMenus) {
           base.methods.doOpenItem();
       }
       base.methods.doScroll();
       base.methods.doCloseMenu();
       if (s.topLinkWorks) {
           base.methods.doTopLink();
       }
   };

   $.fixedTOC.defaultSettings = {
       // non-customizable settings
       tocHeight        : null,
       tocSub           : $('.toc-sub'),
       tocUpClass       : 'toc-up',
       tocLink          : $('#toc-link'),
       tocLinks         : '.toc-h1 ul a',
       topLink          : $('#top-link'),
       currHash         : null,
       // customizable settings

menuOpens  : 'click', 

       scrollSpeed      : 1000,
       menuSpeed        : 300,
       useSubMenus      : true,
       resetSubMenus    : true,
       topLinkWorks     : true
   };

   $.fn.fixedTOC = function (settings) {
       return this.each(function () {
           (new $.fixedTOC(this, settings));
       });
   };

})(jQuery);

Retrieved from "http://2012.igem.org/Team:Carnegie_Mellon/tocjs"