Advanced search  

News:

cpg1.5.46 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter recently discovered vulnerabilities. It is important that all users who run version cpg1.5.44 or older update to this latest version as soon as possible.
[more]

Pages: [1] 2   Go Down

Author Topic: Keyboard Navigation for cpg1.5.x  (Read 32977 times)

0 Members and 1 Guest are viewing this topic.

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15278
Keyboard Navigation for cpg1.5.x
« on: January 07, 2009, 10:00:40 AM »

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.
« Last Edit: December 16, 2013, 01:05:13 PM by Αndré »
Logged

SaWey

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1119
    • SaWey.be
Re: Keyboard Navigation for CPG 1.5.x
« Reply #1 on: January 07, 2009, 12:05:38 PM »

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

Code: (javascript) [Select]
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;
        }
    }
});
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15278
Re: Keyboard Navigation for CPG 1.5.x
« Reply #2 on: January 07, 2009, 12:34:52 PM »

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

Is this function correct?
Code: [Select]
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.
Logged

SaWey

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1119
    • SaWey.be
Re: Keyboard Navigation for CPG 1.5.x
« Reply #3 on: January 07, 2009, 12:44:13 PM »

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]
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...
« Last Edit: January 07, 2009, 12:50:34 PM by SaWey »
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15278
Re: Keyboard Navigation for CPG 1.5.x
« Reply #4 on: January 07, 2009, 12:53:04 PM »

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]
<?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?
Logged

SaWey

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1119
    • SaWey.be
Re: Keyboard Navigation for CPG 1.5.x
« Reply #5 on: January 07, 2009, 01:01:12 PM »

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.
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15278
Re: Keyboard Navigation for CPG 1.5.x
« Reply #6 on: January 07, 2009, 02:39:41 PM »

the script is loaded before jQuery and it has to be loaded after it to use its functionality.
You're right :D 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" :P


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.
Logged

SaWey

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1119
    • SaWey.be
Re: Keyboard Navigation for CPG 1.5.x
« Reply #7 on: January 07, 2009, 05:17:30 PM »

Can you explain me what the "el" is for? It still works, if I delete the "el" :P
'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]
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;
        }
    }
});
« Last Edit: January 07, 2009, 07:08:42 PM by SaWey »
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15278
Re: Keyboard Navigation for CPG 1.5.x
« Reply #8 on: January 08, 2009, 10:32:07 AM »

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

I still use my plugin hook:
Code: [Select]
$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 :)
Logged

Paver

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: us
  • Offline Offline
  • Gender: Male
  • Posts: 1608
  • Paul Van Rompay
Re: Keyboard Navigation for CPG 1.5.x
« Reply #9 on: January 08, 2009, 11:31:16 AM »

Hook 'theme_img_navbar' committed to SVN.
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15278
Re: Keyboard Navigation for CPG 1.5.x
« Reply #10 on: January 08, 2009, 11:39:48 AM »

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

Paver

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: us
  • Offline Offline
  • Gender: Male
  • Posts: 1608
  • Paul Van Rompay
Re: Keyboard Navigation for CPG 1.5.x
« Reply #11 on: January 08, 2009, 11:47:21 AM »

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.
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47844
  • aka "GauGau"
    • gaugau.de
Re: Keyboard Navigation for CPG 1.5.x
« Reply #12 on: March 21, 2009, 01:36:38 PM »

« Last Edit: January 28, 2010, 09:33:37 AM by Joachim Müller »
Logged

bockor

  • Coppermine newbie
  • Offline Offline
  • Posts: 1
Re: Keyboard Navigation for cpg1.5.x
« Reply #13 on: June 04, 2010, 12:48:08 AM »

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]

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.



Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15278
Re: Keyboard Navigation for cpg1.5.x
« Reply #14 on: June 04, 2010, 08:06:58 AM »

Thanks for reporting. Attached updated plugin to initial post.
Logged

papukaija

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: 00
  • Offline Offline
  • Posts: 333
Re: Keyboard Navigation for cpg1.5.x
« Reply #15 on: June 10, 2010, 09:52:05 AM »

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.
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15278
Re: Keyboard Navigation for cpg1.5.x
« Reply #16 on: June 10, 2010, 10:04:04 AM »

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

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15278
Re: Keyboard Navigation for cpg1.5.x
« Reply #17 on: June 11, 2010, 11:42:36 AM »

Attached version 1.5 to initial post.
Logged

papukaija

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: 00
  • Offline Offline
  • Posts: 333
Re: Keyboard Navigation for cpg1.5.x
« Reply #18 on: June 11, 2010, 11:31:50 PM »

Thanks for your fast updated release.
Logged

pols1337

  • Coppermine frequent poster
  • ***
  • Country: us
  • Offline Offline
  • Gender: Male
  • Posts: 240
Re: Keyboard Navigation for cpg1.5.x
« Reply #19 on: January 15, 2012, 05:35:13 AM »

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. 
Logged
Pages: [1] 2   Go Up
 

Page created in 0.085 seconds with 20 queries.