Improve keyboard navigation

[Skalman]

You should be able to do everything using the keyboard - not having to rely on a mouse.

Some improvements off the top of my head:

• Add/remove a content section
• Highlighting the currently edited section
• Rearrange sections
• Add/remove a link
• Tooltips for each button/item indicating the shortcut

[higgis]

+1

On Friday, 18 October 2013 at 08:03, Dan wrote:

You should be able to do everything using the keyboard - not having to rely on a mouse. Some improvements off the top of my head: Add/remove a content section Highlighting the currently edited section Rearrange sections Add/remove a link Tooltips for each button/item indicating the shortcut

— Reply to this email directly or view it on GitHub (https://github.com/madebymany/sir-trevor-js/issues/50).

[cjbell]

Agreed. Will look into this.

[nhubbard]

Could we possibly use the excellent Mousetrap library by @ccampbell? I have used it before and it's very easy to use. https://github.com/ccampbell/mousetrap

Maybe I can look into doing this myself, too...

[callum]

Great idea @nhubbard. We first might want to submit a pull request to add proper UMD support to Mousetrap so that we can require it using our new CommonJS setup. See here:

https://github.com/umdjs/umd/blob/master/returnExports.js

It would be brilliant if you could have a go at implementing some of those shortcuts listed above.

[nhubbard]

Hey @callum, Sorry I haven't responded in a while. I looked at the source, and turns out it already has an AMD and CommonJS setup. If I quote the file:

// expose mousetrap to the global object
    window.Mousetrap = Mousetrap;

    // expose as a common js module
    if (typeof module !== 'undefined' && module.exports) {
        module.exports = Mousetrap;
    }

    // expose mousetrap as an AMD module
    if (typeof define === 'function' && define.amd) {
        define(function() {
            return Mousetrap;
        });
    }

(lines 1007 - 1020)

[callum]

@nhubbard that's great then. I'd missed that!

[nhubbard]

@callum So how would we go along putting these events into Sir Trevor?

[callum]

Let’s take the block reordering as an example then. That stuff is handled here

https://github.com/madebymany/sir-trevor-js/blob/master/src/block-reorder.js

You could create some new methods on that prototype like onMoveBlockUp and onMoveBlockDown that behave similarly to the existing onDrop method – the method that handles the actual moving of the blocks. You then would bind those with using Mousetrap

Mousetrap.bind('command+shift+up', this.onMoveBlockUp);
Mousetrap.bind('command+shift+down', this.onMoveBlockDown);

Would love to see your attempt at this @nhubbard

[nhubbard]

Hey @callum: I figured out how to do so. (After reading through the docs and surviving through a broken computer :smile: :imp:)

We create a new script in the src folder called keyboard.js.

In that file:

var Mousetrap = require("mousetrap"); // Load Mousetrap via NPM
Mousetrap.bind("mod+shift+up", function() {
    this.onMoveBlockUp();
});
Mousetrap.bind("mod+shift+down", function() {
    this.onMoveBlockDown();
});

My only issue is: how will we hook this into the core?

And if you are wondering why I used mod instead of command, it auto-selects the OS and maps the proper key (command on Mac, ctrl on Windows and Linux).

[hugowetterberg]

I'm looking at doing something similar to add shortcuts for adding specific types of blocks. Is there a programmatic API for adding blocks, moving them et.c. or is everything tied to DOM manipulation + events at the moment?

[ninjabiscuit]

@hugowetterberg at the moment there is a basic api for adding and removing blocks.

MyInstance.block_manager.createBlock("Text");
MyInstance.block_manager.removeBlock(MyInstance.block_manager.blocks[0].blockID);

Most of the block manipulation can be performed using the methods on the block manager class.

Be warned that I'm currently in the process of rewriting the block manager and some of the API will probably change.

Reordering is currently tied to DOM manipulation but that is scheduled to change in 0.6.0 which we're working on now.

[hugowetterberg]

Thank you. It sounds like 0.6.0 is going to be a great release for programmatic access to block CRUD+reorder. I'll try to use what's there until then.