rmariuzzo / dom-navigator Goto Github PK

To complete this task we need to complete the following:

• Add documentation to main code.
• Add documentation to test code.

This issue is mainly for any graphic designer who desire to volunteer and create the public site for this library. We agree to add a credit line at the bottom of the site.

Requirements:

• Singe page app.
• Information well structured:
  • Logo.
  • Title: "DOM Navigator".
  • Description: "JS library that allow keyboard navigation through DOM elements (←↑→↓)".
  • CTA button for dowload: "Download".
  • Secondary button to visit the Github project page: "View in Github".
  • Short list (~5) of features links (example: "IE9+ support").
  • Demo section that will consist of a grid of blocks.
  • Footer with graphic designer credits.

Any suggestion will be more than welcome!

Example of similar/expected site:

1. http://chieffancypants.github.io/angular-hotkeys/
2. http://craig.is/killing/mice
3. http://rmariuzzo.github.io/checkboxes.js/

I would like to bind to an event when the navigation occurs.

var dn = new DomNavigator( document.querySelector('#grid') );
dn.on('select', function(el, direction) {
    // custom code
});

To improve performance we need to support navigation modes. Currently we have an auto navigation mode which calculate the next closest element in the current direction.

The default navigation will be the currently implemented: auto. The new navigation modes will be:

• horizontal mode allow horizontal navigation using ←→.
• vertical mode allow vertical navigation using ↑↓.
• grid mode allow grid navigation using ←↑→↓, instead of auto guessing the next element with distance calculations, it will know the dimensions of the grid (numbers of columns) to just jump to the next element.

So I just cloned the project, followed the instructions from the readme and ran
npm install
bower install
grunt

and I got the following output

Running "clean:files" (clean) task
>> 1 path cleaned.

Running "jshint:gruntfile" (jshint) task

√ No problems


Running "jshint:src" (jshint) task

√ No problems


Running "jshint:test" (jshint) task

√ No problems


Running "babel:dist" (babel) task

Running "connect:server" (connect) task
Started connect web server on http://localhost:9000

Running "qunit:all" (qunit) task
Testing http://0.0.0.0:9000/test/main.html >> PhantomJS unable to load "http://0.0.0.0:9000/test/main.html" URI.
Warning: 1/1 assertions failed (0ms) Use --force to continue.

Aborted due to warnings.


Execution Time (2018-10-07 07:26:54 UTC-4)
jshint:gruntfile   45ms  ██ 1%
jshint:src        107ms  ███ 2%
jshint:test       124ms  ███ 3%
babel:dist        599ms  ███████████████ 14%
connect:server    415ms  ██████████ 9%
qunit:all          3.1s  █████████████████████████████████████████████████████████████████████████ 70%
Total 4.4s

I did no modify any files:

On branch develop
Your branch is up to date with 'origin/develop'.

Changes not staged for commit:
  (use "git add/rm <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   dist/dom-navigator.js
        deleted:    dist/dom-navigator.min.js

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        package-lock.json

no changes added to commit (use "git add" and/or "git commit -a"

I'm running it on windows using powershell if it makes any difference.

It is essential to scroll the viewport when to make the selected element always visible.

• Update existing fixture to simulate viewport.
• Create test code.
• All test passed (including created one).
• Detect when to scroll the container element or the window.

In the sample html files refers to files within bower_components (Folder does not exist in the repository).

Example:

 <script src="../bower_components/jquery/dist/jquery.js"></script>

Currently to use the DOM Navigator we do:

new DomNavigator( document.querySelector('#grid') );

Could we alos provide optionally a selector allowing both:

new DomNavigator( document.querySelector('#grid') ); // Ok
new DomNavigator('#grid'); // Ok

As a user I would like to be able to install it using NPM.

As a user I would like to be able to install it using Bower.

It is imperative to have a one page site introducing this library as well a nice demo.

• Create a public site using the latest release available.
• Add description based on the ones found in package.json and/or bower.json.
• Include an attractive demo showing the main feature.
• Add links to Github pages and to the latest release page (no hotlink).