Need Project Manager

    ui-logger-dom

    1.0.0 • Public • Published

    ui-logger-dom

    Simple utility to log information using the DOM (browser) instead of the console.

    1. Installation

    ~$ npm install -s ui-logger-dom

    2. Usage

    Step 1. Include the javascript and the css files in your HTML:
     <script src="node_modules/ui-logger-dom/src/ui-logger-dom.js"></script> 
     <link rel="stylesheet" type="text/css" href="node_modules/ui-logger-dom/src/ui-logger-dom.css" />
    Step 2. Instantiate a UILogger instance
    var logger = new UILogger();
    Step 3. Make it appear
    logger.show();
    Step 4. Log your messages
    logger.log("This is a message");
    Step 5. For further customization (which is considerable recommended), edit the CSS file at:

    node_modules/ui-logger-dom/src/ui-logger-dom.css

    or simply, override the CSS classes:

    .ui-logger-panel

    .ui-logger-message

    3. API


    Method: {UILogger}._

    Type: {Object}

    Description: Holds the internal data of the {UILogger} instance.


    Method: {UILogger}.show()

    Type: {Function}

    Returns: {UILogger}

    Description: Appends the {UILogger}._.panel, which is an {HTMLElement}, into the document.body.

    Example: see the Usage > Step 2 section of this document.


    Method: {UILogger}.hide()

    Type: {Function}

    Returns: {UILogger}

    Description: Sets to display: none the {UILogger}._.panel.

    Example:

    (new UILogger()).show().hide();

    Method: {UILogger}.log(String:message[, Boolean:isHTML])

    Type: {Function}

    Parameter: {String} message. The message to be logged.

    Parameter: {Boolean} isHTML. Tells if the message is HTML, or plain text. By default, this is false, so the HTML is escaped. Pass true if you want to log an HTML message instead.

    Returns: {UILogger}

    Description: Logs a message through the current {UILogger} instance.

    Example:

    var logger = new UILogger();
    logger.show().log("This is a plain text").log("This is <b>NOT</b> a plain text, but <b>HTML</b> text", true);

    Method: {UILogger}.close()

    Type: {Function}

    Returns: {void}

    Description: Destroys the current {UILogger} instance (removes the {UILogger}._.panel from the DOM.

    Example:

    var logger = new UILogger();
    logger.show();
    logger.log("This is a plain text");
    logger.close();

    4. Conclusion

    A very simple tool, but it can be useful for different tools for the browser.

    Highly recommended to customize the styles by your own.

    Keywords

    none

    Install

    npm i ui-logger-dom

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    13.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • allnulled