Floating Sticky Notes

Introduction

Floating Sticky Notes gives every user a private notepad on your Drupal site, opened from a floating button in the
corner of the screen. Notes remember the page they were written on, so “check this image” or “update
this price” stays with the page it is about — and any note can be pinned to float on its page and dragged
anywhere, like a real sticky note on the screen.

It suits editors and site builders who want to jot down to-dos and reminders while they work, without leaving the
page or setting up a separate task tool.

Project Summary

Private, page-aware sticky notes for logged-in users — write a note on any page, pin it there, drag it out of
the way, and find it again from any other page.

Features

• Private notes: each user only ever sees their own notes, and can add, edit, recolour and delete them from a panel opened by the floating button.
• Page-aware: the panel has This page and All notes tabs. Notes from other pages link back to the page they were written on, and the button shows a badge with the number of notes on the current page.
• Pin to page: a pinned note floats on top of its page and can be dragged anywhere by its top bar, with mouse or touch. Its position is saved and kept within the screen on smaller windows.
• Five note colours (yellow, pink, green, blue, purple), with a configurable default.
• Show the button on every page (optionally hidden on administration pages), or only where the Sticky notes button block is placed.
• Admin report (Content → Sticky notes) listing every user's notes, filterable by author, text and page, with bulk delete.
• Keyboard and screen-reader friendly: real buttons, labels and ARIA states; Esc closes the panel and Ctrl/⌘+Enter saves a note.
• Secure by design: note text is always shown as text, never as HTML; the JSON API only exposes the current user's notes and requires a CSRF token for every change. A user's notes are deleted along with their account.

Post-Installation

After installing the module:

1. Go to People → Permissions and grant Use sticky notes to the roles that should have notes. Notes are private per user, so this is meant for logged-in roles.
2. Go to Configuration → User interface → Floating sticky notes (/admin/config/user-interface/floating-sticky-notes) to choose whether the button appears on every page or only where the block is placed, its corner of the screen, the default note colour and the maximum note length.
3. If you turned off Show the button on every page, place the Sticky notes button block in a region of your theme.
4. Administrators can review and remove notes at Content → Sticky notes (/admin/content/sticky-notes).

Upgrading from 1.0.x? Run drush updb. The update keeps the button wherever the block was placed and
grants Use sticky notes to authenticated users. Notes written before the update have no known author
and are only shown in the admin report.

Additional Requirements

• Drupal 10.3+ or 11

No contributed modules or JavaScript libraries are required — the module uses Drupal core only (the 1.0.x
dependency on jQuery UI has been removed).

Similar projects

Notes about site content are often kept in an external task tracker, or as revision log messages and editorial
comments attached to a specific entity. This module is deliberately lighter: notes belong to a user rather than to
content, work on any page (including Views listings and admin screens), and live right where the user is working,
with nothing to configure per content type.

Supporting this Module

Bug reports, feature requests, patches, and documentation improvements are welcome through the Drupal.org issue
queue.

Community Documentation

Documentation is available in the project repository's README, including setup, permissions, the upgrade path from
1.0.x, and how to restyle the widget with CSS custom properties.

Permissions

• Use sticky notes – create, edit, pin and delete your own notes.
• Administer sticky notes (restricted) – change the settings, and view and delete any user's notes in the admin report.

Architecture

• StickyNoteStorage – reads and writes notes in the floating_sticky_notes table: per-user lists, create, update, delete, and the paged, filterable search behind the admin report.
• StickyNoteApiController – the JSON API used by the widget (/sticky-notes/api/notes): lists, adds, updates and deletes the current user's notes, validates input, and returns 404 for anyone else's note. Write requests require the X-CSRF-Token header.
• StickyNoteWidget – builds the button and panel for users with permission, adding it to every page via hook_page_bottom() or through the block, with the right cache contexts.
• StickyNoteBlock – a Plugin/Block plugin for placing the button only on chosen pages.
• sticky_notes.js – dependency-free JavaScript for the panel, tabs, inline editing and draggable pinned notes (Pointer Events), rendering note text with textContent only.
• StickyNotesAdminForm / StickyNotesSettingsForm – the admin report and the settings screen.

The module is fully compatible with Drupal 11.