Tasknote

Designed to integrate with existing workload pages to add realtime multi-user task management. Fast, graceful and decoupled.

View the demo

Created by David King for a client, please get in touch for licensing options.


Include the .js

Include tasknote.min.js after jQuery:

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://tasknote.co.uk/tasknote.min.js"></script>

Create inline tasks

Add class="tasknote" to your links to create inline tasks.

These must have a title attribute!

<a href="/task-234" class="tasknote" title="a custom title">Task 234</a>

Set the page

Tasknote needs to know some details about the page being viewed, use the tasknote.setPage method like so:

tasknote.setPage({
    url:   '/task-123',
    task:  true,
    title: 'The Task Title'
});

The page might not represent a task, just set the flag:

tasknote.setPage({
    url:   '/todo-list',
    task:  false,
    title: 'A list of tasks'
});

If your page uses "hash urls" to navigate between tasks you will need to subscribe to the hashchange event to keep tasknote updated, ie:

$(window).on('hashchange', function() {
    tasknote.setPage({
        url:   location.pathname+location.hash,
        task:  true,
        title: 'The Task Title'
    });
});

Set the user

Set the user to initialise Tasknote.

tasknote.setUser({
    email:  'david@oodavid.com',
    name:   'David King',
    avatar: '/gfx/user-1-32.jpg'
});

The avatar should be 32x32.

Because setUser needs to be called every page, you may want to store the details in localStorage for later use, ie:

// When logging in...
var user = {
    email:  'david@oodavid.com',
    name:   'David King',
    avatar: '/gfx/user-1-32.jpg'
};
localStorage.setItem('user', JSON.stringify(user));

// On all pages
var user = JSON.parse(localStorage.getItem('user'));
if(user){
    tasknote.setUser(user);
}

// When logging out
localStorage.removeItem('user');

Customisation

You can use custom colors for tasknote, here's an example for a dark-themed page:

tasknote.setColours({
  inline:  { link: '#6495ED', bg: '#000000' },
  tab:     { bg: '#EEEEEE', text: '#333333', border: '#000000', glow: '#666666' },
  notify:  { bg: '#FF0000', text: '#FFFFFF', border: '#000000' },
  drawer:  { bg: '#222222', text: '#EEEEEE', link: '#6495ED', muted: '#444444', border: '#444444', line: '#444444', hover: '#171002' },
  avatar:  { border: '#000000', user: '#FFFFFF', viewer: '#999999', subscriber: '#FFD700', owner: '#7CFC00' }
});

It's worth noting that all values are optional. You could update a single color if you want to:

tasknote.setColours({
  inline:  { link: '#6495ED' }
});

You can read the colors like so:

tasknote.getColours();

Callback

tasknote.setCallbackURL('http://mysite.com/task-complete');

Manual DOM Observation

Tasknote watches for new a.tasknote elements on the whole DOM using the lightening fast MutationObserver API. You can limit the scope of this operation by observing a custom element (for example a list or table). This may yield performance gains on more complex pages.

tasknote.observeElement(element);

For even finer control you can even disable observation altogether and manually analyse elements, like so:

tasknote.stopObserving();
tasknote.analyseElements(elements);

Created by David King for a client, please get in touch for licensing options.