Keyboard Navigation for cpg1.5.x

[Αndré]

Navigate to the previous/next picture, go back to the thumbnail page and switch the file info details via the keyboard arrows.

Since version 2.0 it's possible to navigate to the previous/next thumbnail page.

[SaWey]

It might be easier to just use jQuery to do all that, wouldn't this code work:

Code (javascript) Select Expand


var sthhasfocus;

$('.navmenu_pic[rel!=nofollow]').each(function(id, el){
    if(id==0){
        $(this).attr('id', 'thumb');
    }else if(id==1){
        $(this).attr({id: 'prev', accesskey: 'p'});
    }else if(id==2){
        $(this).attr({id: 'next', accesskey: 'n'});
    }
});

$('.textinput').blur(function () {sthhasfocus = false;});
$('.textinput').focus(function () {sthhasfocus = true;});

$(window).keydown(function(e){
if (!e)
        e = window.event;
    if (e.which)
        Tastencode = e.which;
    else if (e.keyCode)
        Tastencode = e.keyCode;

console.log(sthhasfocus + ' ' + Tastencode);
    if (sthhasfocus != true)
    {
        if(Tastencode == 37 && $('#prev').attr('title') != '')
            window.location = $('#prev').attr('href');
        if(Tastencode == 39 && $('#next').attr('title') != '')
            window.location = $('#next').attr('href');
        if(Tastencode == 38)
            window.location = $('#thumb').attr('href');
        if(Tastencode == 40)
        {
            blocking('picinfo','yes', 'block');
            return false;
        }
    }
});


[Αndré]

I haven't worked with jQuery yet, but your code doesn't work as is.

Is this function correct?

Code Select Expand

function(id, el){
    if(id==0){
        $(this).attr('id', 'thumb');
    }else if(id==1){
        $(this).attr({id: 'prev', accesskey: 'p'});
    }else if(id==2){
        $(this).attr({id: 'next', accesskey: 'n'});
    }
}
I think it could come to problems, when someone change the order of (or add/remove) buttons in the navbar.

[SaWey]

I wrote this quickly and it worked for me, but there could be some mistakes

I just checked it and saw I left a firebug command in there, which prevents it from working when you don't have firebug

this code works for IE7, FF3 & Chrome:

Code (javascript) Select Expand


var sthhasfocus;
$(document).ready(function() {
$('.navmenu_pic[rel!=nofollow]').each(function(id, el){
if(id==0){
$(this).attr('id', 'thumb');
}else if(id==1){
$(this).attr({id: 'prev', accesskey: 'p'});
}else if(id==2){
$(this).attr({id: 'next', accesskey: 'n'});
}
});

$('.textinput').blur(function () {sthhasfocus = false;});
$('.textinput').focus(function () {sthhasfocus = true;});
});

$(document).keydown(function(e){
if (!e)
        e = window.event;
    if (e.which)
        Tastencode = e.which;
    else if (e.keyCode)
        Tastencode = e.keyCode;
    if (sthhasfocus != true)
    {
        if(Tastencode == 37 && $('#prev').attr('title') != '')
            window.location = $('#prev').attr('href');
        if(Tastencode == 39 && $('#next').attr('title') != '')
            window.location = $('#next').attr('href');
        if(Tastencode == 38)
            window.location = $('#thumb').attr('href');
        if(Tastencode == 40)
        {
            blocking('picinfo','yes', 'block');
            return false;
        }
    }
});



Concerning the change of order, I don't think the user will change the prev/next buttons But then again, who knows...

[Αndré]

I have firebug, too. But it doesn't work for me (I have to say, that I don't have the actual svn version). Maybe I do something wrong

My codebase.php:

Code Select Expand

<?php
if (!defined('IN_COPPERMINE')) die('Not in Coppermine...');
js_include('plugins/keyboard_navigation_jquery/js/keyboard_navigation.js');
The .js file will be included in the html source code.

In keyboard_navigation.js is your code. Something more to do?

[SaWey]

You shouldn't include the script directly like that, you should do it within a function that's been called by the API, because now, the script is loaded before jQuery and it has to be loaded after it to use its functionality.

[Αndré]

the script is loaded before jQuery and it has to be loaded after it to use its functionality.

You're right It works now in my gallery as plugin.

Can you explain me what the "el" is for?

   $('.navmenu_pic[rel!=nofollow]').each(function(id, el){

It still works, if I delete the "el"

Concerning the change of order, I don't think the user will change the prev/next buttons But then again, who knows...

See here - 1. prev file, 2. thumbnail page, 3. next file. Isn't there a better way to detect the buttons and give them an id? If not, I think my first plugin version is more flexible for the different themes.

[SaWey]

Can you explain me what the "el" is for? It still works, if I delete the "el"

'el' was used in my first version until I remembered I could use the 'this' keyword

See here - 1. prev file, 2. thumbnail page, 3. next file. Isn't there a better way to detect the buttons and give them an id? If not, I think my first plugin version is more flexible for the different themes.

Here I have a better one, this should work on all templates:

Code Select Expand


var sthhasfocus;
$(document).ready(function() {

$('.navmenu_pic img[src*=thumb]').parent().attr('id', 'thumb');
$('.navmenu_pic img[src*=prev]').parent().attr({id: 'prev', accesskey: 'p'});
$('.navmenu_pic img[src*=next]').parent().attr({id: 'next', accesskey: 'n'});
$('.textinput').blur(function () {sthhasfocus = false;});
$('.textinput').focus(function () {sthhasfocus = true;});
});

$(document).keydown(function(e){
if (!e)
        e = window.event;
    if (e.which)
        Tastencode = e.which;
    else if (e.keyCode)
        Tastencode = e.keyCode;
    if (sthhasfocus != true)
    {
        if(Tastencode == 37 && $('#prev').attr('title') != '')
            window.location = $('#prev').attr('href');
        if(Tastencode == 39 && $('#next').attr('title') != '')
            window.location = $('#next').attr('href');
        if(Tastencode == 38)
            window.location = $('#thumb').attr('href');
        if(Tastencode == 40)
        {
            blocking('picinfo','yes', 'block');
            return false;
        }
    }
});


[Αndré]

I attached the jQuery version (v1.1.0) in my first post.

I still use my plugin hook:

Code Select Expand

$template_img_navbar = CPGPluginAPI::filter('theme_img_navbar', $template_img_navbar);

Can someone commit this hook to the svn? I think it's useful for this plugin (because my plugin refers to the navbar) and maybe it can be used for other plugins (e.g. in my 1.4.x gallery I have added a button in the navbar to add/remove favorite pictures - I could use this hook to create a plugin for this). Thank you

[Paver]

Hook 'theme_img_navbar' committed to SVN.

[Αndré]

Thank you Paver. Shall we split the coding discussion from the announcement thread?

[Paver]

I think everything before the release of 1.5 (beta or final release) is coding discussion so why not keep it all here for development.

Later, a separate announcement thread can be created for the plugin once 1.5 is released and then you can use that for support from users.  This thread can be linked from it for historical purposes.

That's my suggestion.

[Joachim Müller]

Added plugin to downloads section and to subversion repository (http://coppermine.svn.sourceforge.net/viewvc/coppermine/branches/cpg1.5.x/plugins/keyboard_navigation/).

[bockor]

Hi guys!

I`m using this plugin v1.3 and LightBox Slideshow jquery (NotesFor.net) v2.9 plugin at the same time. When in LightBox view, the keyboard plugin overrides the LightBox keydown event and LightBox dissapears.
So I added one more condition before taking action on keydown event of this plugin. I`m checking if lightbox is currently on or not.
Added to codebase.php before line 40:

Code Select Expand


var lb = $("#jquery-lightbox").length;
if (sthhasfocus != true && lb!=1) { ....

Oh.. and description says "Coppermine 1.5.x Plugin - keyword_navigation" ... should be keyboard_navigation

Hope this helps for somebody else.

[Αndré]

Thanks for reporting. Attached updated plugin to initial post.

[papukaija]

Why not include javascript file with the $js_includes[]? The benefit is that the js file will be included at the same place than the other js files. The second benefit is that the Jsmin plugin would be able to use the javascript file from this plugin.

[Αndré]

I don't know / I can't remember Maybe it's a historical issue. I'll think about that

[Αndré]

Attached version 1.5 to initial post.

[papukaija]

Thanks for your fast updated release.

[pols1337]

Quick question: does the "Down" button do anything? 

I thought maybe it would show / hide the file information, but I can't see any changes on my gallery.