Re-arranged code and updated the README to include the licensing issue.
Remembered the arbitrary container TO-DO.
This commit is contained in:
Ken Elf Mathieu Sternberg
parent
197800c32c
commit
9ceabc0a75
|
|
@ -3,5 +3,3 @@
|
|||
*#
|
||||
.#*
|
||||
*~
|
||||
frontend/logs/
|
||||
spiral.db
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
Copyright (c) 2011 Elf M. Sternberg
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
Sitedarts are content-within-a-page links laid out along the right
|
||||
side of the viewport, spaced proportionately to their target anchor
|
||||
positions within the document. They are meant to give users a visual
|
||||
indicator of where they are within long, scrolling documents, and to
|
||||
encourage exploration below the fold. The content of a dart is
|
||||
informed by <a name=""> ... </a> entries.
|
||||
|
||||
Sitedarts was inspired by book darts (www.bookdarts.com), hammered
|
||||
copper pointers that I regularly use in my notebooks to keep track of
|
||||
stuff. I wanted a page-side view of my anchors and headers since I
|
||||
develop code for e-book readers.
|
||||
|
||||
## Installation
|
||||
|
||||
Sitedarts uses jquery (1.3.2 or better required) and jquery.easing.
|
||||
Both are provided in this download. It's just Javascript, otherwise.
|
||||
Use as directed.
|
||||
|
||||
## Copyright
|
||||
|
||||
Sitedarts is copyright (c) 2011 Elf M. Sternberg. Included libraries
|
||||
are covered by their respective copyright holders, and are used with
|
||||
permission of the licenses included. See the MIT-LICENSE file for
|
||||
the license on sitedarts.js itself.
|
||||
|
||||
## To Do
|
||||
|
||||
Provide an alternative text on hover. Provide a mechanism for
|
||||
describing the alternative text. Provide a way that the <a name="">
|
||||
anchor can inform the visual content of the dart.
|
||||
|
||||
Provide themes for dart types (metal, glass, plain, colorful, drab).
|
||||
|
||||
Fix the arbitrariness of the layout: ensure that the bottom of the
|
||||
bottom dart, and the top of the top dart, are within the viewport.
|
||||
|
||||
Allow the darts to be on the left, or even across the top and bottom
|
||||
of the viewport.
|
||||
|
||||
Guarantee easing to the target even when the target mark is well
|
||||
within the viewport at the bottom of the document.
|
||||
|
||||
Set a highlight class on the dart corresponding to the anchor the user
|
||||
is "within." This is a nebulous concept. If two or more anchors are
|
||||
visible on the screen, keep the lower one highlighted if it was the
|
||||
last one chosen. (cf. Eugene Jarvis' "The way a program looks smart
|
||||
is it doesn't do anything stupid.")
|
||||
|
||||
Allow sitedarts to work within an arbitrary container pair, rather
|
||||
than $(window) and $(document).
|
||||
|
||||
Allow configuration to narrow the viewport.
|
||||
|
||||
## Stretch goal
|
||||
|
||||
Provide an alternative text search input box and decorate the sitedart
|
||||
layout with links to searched-for terms. On hover, provide some
|
||||
context.
|
||||
|
|
@ -2,8 +2,9 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Sample</title>
|
||||
<script type="text/javascript" src="./jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="./sitemarks.js"></script>
|
||||
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
|
||||
<script type="text/javascript" src="js/sitedarts.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$('body').siteDarts();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,140 @@
|
|||
/*
|
||||
* jQuery EasIng v1.1.2 - http://gsgd.co.uk/sandbox/jquery.easIng.php
|
||||
*
|
||||
* Uses the built In easIng capabilities added In jQuery 1.1
|
||||
* to offer multiple easIng options
|
||||
*
|
||||
* Copyright (c) 2007 George Smith
|
||||
* Licensed under the MIT License:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
|
||||
// t: current time, b: begInnIng value, c: change In value, d: duration
|
||||
|
||||
jQuery.extend( jQuery.easing,
|
||||
{
|
||||
easeInQuad: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t + b;
|
||||
},
|
||||
easeOutQuad: function (x, t, b, c, d) {
|
||||
return -c *(t/=d)*(t-2) + b;
|
||||
},
|
||||
easeInOutQuad: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t + b;
|
||||
return -c/2 * ((--t)*(t-2) - 1) + b;
|
||||
},
|
||||
easeInCubic: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t + b;
|
||||
},
|
||||
easeOutCubic: function (x, t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t + 1) + b;
|
||||
},
|
||||
easeInOutCubic: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t + 2) + b;
|
||||
},
|
||||
easeInQuart: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t + b;
|
||||
},
|
||||
easeOutQuart: function (x, t, b, c, d) {
|
||||
return -c * ((t=t/d-1)*t*t*t - 1) + b;
|
||||
},
|
||||
easeInOutQuart: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
|
||||
return -c/2 * ((t-=2)*t*t*t - 2) + b;
|
||||
},
|
||||
easeInQuint: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t*t + b;
|
||||
},
|
||||
easeOutQuint: function (x, t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t*t*t + 1) + b;
|
||||
},
|
||||
easeInOutQuint: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t*t*t + 2) + b;
|
||||
},
|
||||
easeInSine: function (x, t, b, c, d) {
|
||||
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
|
||||
},
|
||||
easeOutSine: function (x, t, b, c, d) {
|
||||
return c * Math.sin(t/d * (Math.PI/2)) + b;
|
||||
},
|
||||
easeInOutSine: function (x, t, b, c, d) {
|
||||
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
|
||||
},
|
||||
easeInExpo: function (x, t, b, c, d) {
|
||||
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
|
||||
},
|
||||
easeOutExpo: function (x, t, b, c, d) {
|
||||
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
|
||||
},
|
||||
easeInOutExpo: function (x, t, b, c, d) {
|
||||
if (t==0) return b;
|
||||
if (t==d) return b+c;
|
||||
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
|
||||
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
|
||||
},
|
||||
easeInCirc: function (x, t, b, c, d) {
|
||||
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
|
||||
},
|
||||
easeOutCirc: function (x, t, b, c, d) {
|
||||
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
|
||||
},
|
||||
easeInOutCirc: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
|
||||
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
|
||||
},
|
||||
easeInElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
},
|
||||
easeOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
|
||||
},
|
||||
easeInOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
|
||||
},
|
||||
easeInBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*(t/=d)*t*((s+1)*t - s) + b;
|
||||
},
|
||||
easeOutBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
|
||||
},
|
||||
easeInOutBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
|
||||
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
|
||||
},
|
||||
easeInBounce: function (x, t, b, c, d) {
|
||||
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
|
||||
},
|
||||
easeOutBounce: function (x, t, b, c, d) {
|
||||
if ((t/=d) < (1/2.75)) {
|
||||
return c*(7.5625*t*t) + b;
|
||||
} else if (t < (2/2.75)) {
|
||||
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
|
||||
} else if (t < (2.5/2.75)) {
|
||||
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
|
||||
} else {
|
||||
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
|
||||
}
|
||||
},
|
||||
easeInOutBounce: function (x, t, b, c, d) {
|
||||
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
|
||||
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
|
||||
}
|
||||
});
|
||||
|
|
@ -22,12 +22,12 @@
|
|||
var prop = $(window).height();
|
||||
var doch = $(document).height();
|
||||
|
||||
names.each(function() {
|
||||
names.each(function(dex) {
|
||||
var n = $(this).attr('name')
|
||||
var d = $(this).offset().top;
|
||||
var a = $("li." + options.markitem + ' a[href="#' + n + '"]');
|
||||
var p = a.parent();
|
||||
p.animate({top: prop * (d / doch)});
|
||||
p.animate({top: prop * (d / doch) - dex * 7});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -45,9 +45,13 @@
|
|||
event.preventDefault();
|
||||
var target = $(event.target).attr('href').replace('#', '')
|
||||
var targetOffset = $('a[name="' + target + '"]').offset().top;
|
||||
$(document).animate({scrollTop: targetOffset}, 400, function() {
|
||||
location.hash = target;
|
||||
});
|
||||
$('html body').animate({scrollTop: targetOffset},
|
||||
{duration: 800,
|
||||
easing: options.easing,
|
||||
complete: function() {
|
||||
location.hash = target;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -59,12 +63,7 @@
|
|||
$.fn.siteDarts.defaults = {
|
||||
marklist: 'marklist',
|
||||
markitem: 'marklistitem',
|
||||
css: {
|
||||
// default styling
|
||||
ul: { position: "fixed", top: 0, right: "-30px", height: "100%", "zindex": 99},
|
||||
li: { position: "absolute", top: 0, right: 0, overflow: "hidden", color: "white", cursor: "pointer"},
|
||||
a: { width: "29px", height: "24px", background: "transparent no-repeat" },
|
||||
}
|
||||
easing: 'easeOutQuint'
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue