From 97da13000c9616debe62540b7fbca9864b682d1a Mon Sep 17 00:00:00 2001 From: Trever Fischer Date: Wed, 29 Aug 2012 22:50:42 -0400 Subject: [PATCH] Add a small, minimal popup tray for future expansion. --- static/css/interact.css | 20 ++++++++++++ static/js/interactive.js | 9 ++++++ static/js/lockScroll.js | 61 +++++++++++++++++++++++++++++++++++++ templates/base_full.html | 19 ++++++++++++ templates/forums/reply.html | 2 +- templates/forums/topic.html | 14 ++++++++- 6 files changed, 123 insertions(+), 2 deletions(-) create mode 100644 static/css/interact.css create mode 100644 static/js/interactive.js create mode 100644 static/js/lockScroll.js diff --git a/static/css/interact.css b/static/css/interact.css new file mode 100644 index 0000000..989b76e --- /dev/null +++ b/static/css/interact.css @@ -0,0 +1,20 @@ +#server-interaction { + position:fixed; + bottom: 0%; + right: 0%; +} + +#server-interaction .drawer { + background-color: #000; + color: #fff; + float: right; +} + +#server-interaction .canvas { + display: none; +} + +#server-interaction .drawer .drawer-label { + font-weight: bold; + padding: 10px; +} diff --git a/static/js/interactive.js b/static/js/interactive.js new file mode 100644 index 0000000..13fba7d --- /dev/null +++ b/static/js/interactive.js @@ -0,0 +1,9 @@ +$(document).ready(function() { + $('#server-interaction .drawer').each(function() { + console.log(this); + var canvas = $(this).children('.canvas'); + $(this, '.drawer-label').click(function() { + canvas.slideToggle("blind"); + }); + }); +}); diff --git a/static/js/lockScroll.js b/static/js/lockScroll.js new file mode 100644 index 0000000..63dcedf --- /dev/null +++ b/static/js/lockScroll.js @@ -0,0 +1,61 @@ +/** + * lockScroll plugin for JQuery + * @author Anthony McLin + * @website http://anthonymclin.com + * Allows you to make an element toggle between fixed and absolute layouts + * This exposes far more options than the original + * + * Based on FixedScroll JQuery plugin + * by Dan Bentley with example at http://csswizardry.com/ + * + * @options + * triggerElement : Optional element that will be the threshold that triggers change in scrolling behavior + * triggerPosition: If no triggerElement is provided, an exact pixel value is necessary for how far the page scrolls before triggering the change in scrolling behavior + * triggerThreshold : Override the calculated point where the scrolling page elements trigger the change in scrolling behavior + * offsetTop : Optionally force the distance from the top of the window for positioning the moving element +**/ +(function($) { + $.fn.lockScroll = function( settings ) { + //Configuration + var options = $.extend({ + triggerElement : null, + triggerPosition: null, + triggerThreshold : null, + offsetTop : null + }, settings); + + return this.each(function() { + //Grab the element to speed up dom acess + var el = $(this); + + //Make sure things can actually run + if( options.triggerElement.length == 0 && options.triggerPosition == null ) $.error('Threshold scrolling element or value required'); //We don't have element or distance to trigger the behavior change + if( el.css('position') != 'fixed') $.error('The element to be locked must have position:fixed'); //This won't work if the locked element isn't fixed to begin with + + //Get the offset of the locked element + options.offsetTop = (!options.offsetTop) ? el.offset().top : options.offsetTop; + + //Find the top of the element that triggers the change + if(!options.triggerPosition) { + options.triggerPosition = $(options.triggerElement).offset().top; + }; + + //Set the threshold where the change happens + if(!options.triggerThreshold) { + options.triggerThreshold = options.triggerPosition - el.outerHeight(); + }; + + //Bind to the window scroll event + $(window).bind('load scroll', function(e) { + if($(window).scrollTop() + options.offsetTop >= options.triggerThreshold) { + //threshold object is above the bottom of our locked element + el.css({ position: "absolute", top: options.triggerThreshold }); + } else { + //threshold object is below the bottom of our locked element + el.css({ position: "fixed", top: options.offsetTop }); + } + }); + + }); + }; +})(jQuery); \ No newline at end of file diff --git a/templates/base_full.html b/templates/base_full.html index d69a463..5537bed 100644 --- a/templates/base_full.html +++ b/templates/base_full.html @@ -14,6 +14,7 @@ + {% block extracss %}{% endblock extracss %} + {% block extrahead %}{% endblock %} + +{% endblock %} + {% block sectiontitle %}Forums{% endblock %} {% block localnav %} @@ -34,7 +46,7 @@ Home {%endblock%} {%block content %} -
+
{% avatar topic.rootPost.user 32 %}

{{topic.title}}

Started by {{ topic.created|timesince }} ago.
Last updated {{topic.updated|timesince}} ago.