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>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Sample</title>
|
<title>Sample</title>
|
||||||
<script type="text/javascript" src="./jquery-1.3.2.js"></script>
|
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
|
||||||
<script type="text/javascript" src="./sitemarks.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">
|
<script type="text/javascript">
|
||||||
$(function() {
|
$(function() {
|
||||||
$('body').siteDarts();
|
$('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 prop = $(window).height();
|
||||||
var doch = $(document).height();
|
var doch = $(document).height();
|
||||||
|
|
||||||
names.each(function() {
|
names.each(function(dex) {
|
||||||
var n = $(this).attr('name')
|
var n = $(this).attr('name')
|
||||||
var d = $(this).offset().top;
|
var d = $(this).offset().top;
|
||||||
var a = $("li." + options.markitem + ' a[href="#' + n + '"]');
|
var a = $("li." + options.markitem + ' a[href="#' + n + '"]');
|
||||||
var p = a.parent();
|
var p = a.parent();
|
||||||
p.animate({top: prop * (d / doch)});
|
p.animate({top: prop * (d / doch) - dex * 7});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -45,9 +45,13 @@
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
var target = $(event.target).attr('href').replace('#', '')
|
var target = $(event.target).attr('href').replace('#', '')
|
||||||
var targetOffset = $('a[name="' + target + '"]').offset().top;
|
var targetOffset = $('a[name="' + target + '"]').offset().top;
|
||||||
$(document).animate({scrollTop: targetOffset}, 400, function() {
|
$('html body').animate({scrollTop: targetOffset},
|
||||||
location.hash = target;
|
{duration: 800,
|
||||||
});
|
easing: options.easing,
|
||||||
|
complete: function() {
|
||||||
|
location.hash = target;
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -59,12 +63,7 @@
|
||||||
$.fn.siteDarts.defaults = {
|
$.fn.siteDarts.defaults = {
|
||||||
marklist: 'marklist',
|
marklist: 'marklist',
|
||||||
markitem: 'marklistitem',
|
markitem: 'marklistitem',
|
||||||
css: {
|
easing: 'easeOutQuint'
|
||||||
// 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" },
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
Loading…
Reference in New Issue