Author: fil@rezo.net
Date: Sat Aug 5 22:35:23 2006
New Revision: 4412
Log:
navigation thickbox au clavier
Added:
_plugins_/thickbox/test.html (with props)
Modified:
_plugins_/thickbox/head.php
_plugins_/thickbox/thickbox.js
Modified: _plugins_/thickbox/head.php
--- _plugins_/thickbox/head.php (original)
+++ _plugins_/thickbox/head.php Sat Aug 5 22:35:23 2006
@@ -2,16 +2,23 @@
function ThickBox_insert_head($flux){
- $flux .='
-<style type="text/css" media="all">
-@import "'.url_absolue(find_in_path('thickbox.css')).'";
-</style>
+// on ajoute la class thickbox aux liens de type="image/xxx"
+// TODO: ne charger thickbox.js et thickbox.css que si
+// $("a.thickbox,a[@type='image/jpeg'],...").size() > 0)
+
+$flux .=
+
+'
<script type="text/javascript"><!--
TB_chemin_animation = "'.url_absolue(find_in_path('circle_animation.gif')).'";
TB_chemin_close = "'.url_absolue(find_in_path('close.gif')).'";
+TB_chemin_css = "'.url_absolue(find_in_path('thickbox.css')).'";
+$(document).load(function() {
+ $("a[@type=\'image/jpeg\'],a[@type=\'image/png\'],a[@type=\'image/gif\']").addClass("thickbox");
+} );
// --></script>
-<script src="'.url_absolue(find_in_path('thickbox.js')).'" type="text/javascript"></script>
+<script src=\''.url_absolue(find_in_path('thickbox.js')).'\' type=\'text/javascript\'></script>
';
return $flux;
Added: _plugins_/thickbox/test.html
--- _plugins_/thickbox/test.html (added)
+++ _plugins_/thickbox/test.html Sat Aug 5 22:35:23 2006
@@ -0,0 +1,16 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html dir="ltr" lang="fr">
+<head>
+ <title>test thickbox</title>
+ <script src="/~fil/spip/plugins/_plugins_/-jQuery/jquery.js" type="text/javascript"></script>
+ <script src='thickbox.js' type='text/javascript'></script>
+
+</head>
+
+
+<body>
+
+<a href="/" class="thickbox">rien</a>
+
+</body>
+</html>
Propchange: _plugins_/thickbox/test.html
------------------------------------------------------------------------------
svn:executable = *
Modified: _plugins_/thickbox/thickbox.js
--- _plugins_/thickbox/thickbox.js (original)
+++ _plugins_/thickbox/thickbox.js Sat Aug 5 22:35:23 2006
@@ -4,8 +4,13 @@
* Under an Attribution, Share Alike License
* Thickbox is built on top of the very light weight jquery library.
*
- * Modified for SPIP <www.spip.net> by Fil <fil@rezo.net>
- *
+ * Modified for SPIP <www.spip.net> by Fil <fil@rezo.net>:
+ * - added recognition of images based on a.type
+ * - added an image gallery
+ * - added keyboard navigation ('n'ext, 'p'revious, 'q'uit)
+ * - customize path to the css and wheel image
+ * - don't load css when not needed
+ * - TODO: don't load js when not needed!!
*/
@@ -17,62 +22,85 @@
return false;
}
+function TB_text() {
+ var t = this.title || this.name || '<small>'+this.href+'</small>';
+ TB_on();
+ TB_show(t,this.href, 'text');
+ return false;
+}
+
function TB_init(){
// add the thickbox to all links of class=thickbox
- $("a.thickbox").click(TB_Image);
-
- // and to all links of type image/jpeg (or gif|png)
- // here we also deal with the prev/next thing
- $("a[@type]")
- .each(
+ $("a.thickbox").each(
function(i) {
if (
- this.type.match(/^image[\/](jpeg|gif|png)$/i)
+ (this.type && this.type.match(/^image[\/](jpeg|gif|png)$/i))
+ || (this.href && this.href.match(/\.(jpeg|jpg|png|gif)$/i))
) {
this.onclick = TB_Image;
- // on stocke le lien dans un tableau
+ // we store image links in an array (for a gallery)
imageArray.push ([
this.href,
this.title || this.name
]);
}
+ else {
+ this.onclick = TB_text;
+ }
}
);
-
- // and to all links to images (maybe too slow?)
-/*
- $("a[@href]").each(
- function(i) {
- if (
- this.href.match(/^[^?]+\.(jpeg|jpg|gif|png)$/i)
- ) {
- this.onclick = TB_Image;
}
+
+// keyboard controls:
+// q,x => quit
+// n, space => next
+// p => previous
+function TB_keys (e) {
+ if (e == null) { // ie
+ keycode = event.keyCode;
+ } else { // mozilla
+ keycode = e.which;
+ }
+ key = String.fromCharCode(keycode).toLowerCase();
+ if (key == 'x' || key =='q'){
+ e.stopPropagation();
+ TB_remove();
+ } else if (key == ' ' || key == 'n') {
+ e.stopPropagation();
+ TB_next();
+ } else if (key == 'p') {
+ e.stopPropagation();
+ TB_prev();
}
- );
-*/
}
function TB_on() {
+ // charger la css
+ $("head").append(
+ "<style type='text/css' media='all'>@import '"
+ + TB_chemin_css
+ + "';</style>"
+ );
+
$("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
- $("#TB_overlay").click(TB_next);
+ $("#TB_overlay").click(TB_remove);
$(window).scroll(TB_position);
TB_overlaySize();
- $("body").append("<div id='TB_load' style='display:none;'><img src='"+TB_chemin_animation+"' /></div>");
+ $("body").append("<div id='TB_load'><img src='"+TB_chemin_animation+"' /></div>");
TB_load_position();
+
+ old_onkeypress = document.onkeypress;
+ document.onkeypress = TB_keys;
}
function TB_show(caption, url, type) {//function called when the user clicks on a thickbox link
try {
- var urlString = /\.jpg|\.jpeg|\.png|\.gif|\.html|\.htm|\.php|\.cfm|\.asp|\.aspx|\.jsp|\.jst|\.rb|\.txt/g;
- var urlType = url.toLowerCase().match(urlString);
-
- if (type=='image' || urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'){//code to show images
+ if (type=='image') {//code to show images
imgPreloader = new Image();
imgPreloader.onload = function(){
@@ -124,13 +152,13 @@
imgPreloader.src = url;
}
- if(urlType=='.htm'||urlType=='.html'||urlType=='.php'||urlType=='.asp'||urlType=='.aspx'||urlType=='.jsp'||urlType=='.jst'||urlType=='.rb'||urlType=='.txt'||urlType=='.cfm' || (url.indexOf('TB_inline') != -1)){//code to show html pages
+ else {//code to show html pages
var queryString = url.replace(/^[^\?]+\??/,'');
var params = parseQuery( queryString );
- TB_WIDTH = (params['width']*1) + 30;
- TB_HEIGHT = (params['height']*1) + 40;
+ TB_WIDTH = ((params['width'] || 640)*1) + 30;
+ TB_HEIGHT = ((params['height'] || 480)*1) + 40;
ajaxContentW = TB_WIDTH - 30;
ajaxContentH = TB_HEIGHT - 45;
$("#TB_window").append("<div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");
@@ -161,6 +189,7 @@
//helper functions below
function TB_remove() {
+ document.onkeypress = old_onkeypress;
$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay').remove();});
$("#TB_load").remove();
return false;
@@ -192,6 +221,28 @@
return false;
}
+function TB_prev() {
+ var current = $("#TB_Image").get(0).src;
+ var prev = -1;
+ for (var i=0; i<imageArray.length; i++) {
+ if (imageArray[i][0] == current) {
+ prev = i-1;
+ }
+ }
+
+ if (prev>=0) {
+ $("#TB_window").html('');
+ TB_show(imageArray[prev][1] || imageArray[prev][0],
+ imageArray[prev][0], 'image');
+ }
+ else {
+ TB_remove();
+ }
+
+ return false;
+}
+
+
function TB_position() {
var pagesize = getPageSize();
var arrayPageScroll = getPageScrollTop();
@@ -237,6 +288,13 @@
return Params;
}
+function lignes_longues(t, n){
+var _debut_ = t.substring(0, n);
+var _fin_ = t.substring(n, 500);
+t = "".concat(_debut_,'<br />',_fin_);
+return t;
+}
+
function getPageScrollTop(){
var yScrolltop;
@@ -260,17 +318,12 @@
return arrayPageSize;
}
-function lignes_longues(t, n){
-var _debut_ = t.substring(0, n);
-var _fin_ = t.substring(n, 500);
-t = "".concat(_debut_,'<br />',_fin_);
-return t;
-}
-
-
-/* init */
-// $(document).load(TB_init) si on veut que ca marche dans l'espace prive
+//
+// init
+//
+// note: $(document).load() si on veut que ca marche dans l'espace prive
// (a cause des document_write() qu'il y a en pagaille...)
-// $(document).ready(TB_init);
var imageArray = [];
+if(typeof TB_chemin_css == 'undefined') { TB_chemin_css = 'thickbox.css'; }
+if(typeof TB_chemin_animation == 'undefined') { TB_chemin_animation = 'circle_animation.gif'; }
$(document).load(TB_init);