Notify

Custom simple draggable visual console for web development.

Usage

Import Notify and initiate first custom console.

import Notify from "..." // Entry point is notify/index.ts

const MyConsole = Notify.initConsole({
    id: 'Debug',
    historySize: 10,
    logger: true, 
});

MyConsole.display();

// id: string - Displayed name. More for semantic.
// historySize: number - Maximum logs, displayed in one time.
// logger?: boolean - If true - will write logs you can later export. Default - false.
// interfaceId? --- currently unavailable ---. For changing console view interface. Default - 'terminal'.

// .display() mounts element to DOM (Just makes it visible, logs and messages are still working even it don't mounted). it can take a parameter - custom mount point. By default it's document.body.

Your first console will appear on the page. You can create any amount of consoles.

Consoles are fully draggble, you can put them in any place on the page by dragging them by the title part of the console.

Interface

There are two buttons - minimize view and clear history.

Minimize view will hide history but not clear it. History is still will receive messages and write logs.

Clear history deletes all elements from the history.

By clicking on the any message cell content will be copied to clipboard.

Try it / Test

Notify also includes file with visual test.

To use it just import NotifyCoreTest from "notify/test" and call function NotifyCoreTest().

import NotifyCoreTest from "./notify/test";
NotifyCoreTest();

It will insert a light preview to the DOM.

API

Return console

const customConsole = Notify.initConsole()

Mount interface to document

customConsole.display(mountPoint?: any)

Send message

Similar to console.log(), but logs a string. Return responce: string - what was send and deleted.

customConsole.message(content: any)

Highlighted line - last message

Minimize / Expand

Just a minimize button functionality, but programmatically.

MyConsole.collapse()
MyConsole.expand()

Clear history and view from messages displayed in the console

If onlyLast = true - will delete only last element.

Returns object { removedElements: number, responce: string }

const cache = MyConsole.clear(onlyLast? boolean)

cache.removedElements
cache.responce

See console details

const cache = MyConsole.info

cache.historySize: number
cache.id: string
cache.interface: ---
cache.logger: boolean

Return console logs

If header = true - some additional details will appear in the top of responce. Default false.

const cache = MyConsole.logs(header: boolean)
console.log(cache);

Hide console (not just minimize)

MyConsole.hide()