Skip to content
Caner Uguz edited this page Jan 30, 2015 · 2 revisions

Notifications appear on the rows, either the entire row or a column that you define. There is a notify property defined for each row object which allows multiple and simultanous use of notifications. The code below show examples. Use of notification is optional.

Notification screenshot

Update Notification

Updates existing notification or creates new one with the settings passed as arguments

  • message : Message to be displayed, can be string or mithril m() template -- required
  • type : Type setting that gives classes based on what you input here.
  • column : Index of the column you want the notification to appear on, Falsy values use the entire row.
  • timeout : When the notification should auto hide. Falsy values will keep it on
  • css : Any additional classes you want to add to the view
    // tb = Treebeard object
    item.notify.update('Delete failed.', 'danger', undefined, 3000);

Toggle

Toggles visibility of the notifications.

    // tb = Treebeard object
       item.notify.toggle();

Show

Shows notification when message and other settings are already applied.

    // tb = Treebeard object
    if(showNotification){
       item.notify.show();
    }

Hide

Onyl removes the notification and brings the view back to normal.

    // tb = Treebeard object
    if(cancel){
       item.notify.hide();
    }

Self Destruct

Not only removes the notification but also deletes the row.

  • treebeard : The treebeard object -required
  • item : Item object - required
  • timeout : When it should remove, default is 3000.
    // tb = Treebeard object
    if(uploadFail){
       item.notify.selfDestruct(tb, item, 2000)
    }

Treebeard Notification Code

    Notify = function _notify(message, type, column, timeout) {
        this.column = column || null;
        this.type = type || "info";
        this.message =  message || 'Hello';
        this.on = false;
        this.timeout = timeout === undefined ? DEFAULT_NOTIFY_TIMEOUT : timeout;
        this.css = '';
        this.toggle = function () {
            this.on = !this.on;
        };
        this.show = function () {
            this.on = true;
            var self = this;
            if (self.timeout && self.timeout > 1) {                     // set timeout to 1 to stay forever
                setTimeout(function () { self.hide(); }, self.timeout);
            }
            m.redraw(true);
        };
        this.hide = function () {
            this.on = false;
            m.redraw(true);
        };
        this.update = function(message, type, column, timeout, css) {
            this.type = type || this.type;
            this.column = column || this.column;
            this.timeout = timeout === undefined ? DEFAULT_NOTIFY_TIMEOUT : timeout;
            this.message = message;
            this.css = css || '';
            this.show(true);
        };
        this.selfDestruct = function (treebeard, item, timeout) {
            this.on = false;
            this.on = true;
            var self = this,
                out = timeout || 3000;
            setTimeout(function () { self.hide(); item.removeSelf(); treebeard.redraw(); }, out);
        };
    };

Treebeard Logo

<li><a href="https://github.com/caneruguz/treebeard/wiki/Quickstart">Quickstart</a></li>

<li>
    <a href="https://github.com/caneruguz/treebeard/wiki/Options">Options</a>

    <ul>
        <li><a href="https://github.com/caneruguz/treebeard/wiki/divID">divID</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/filesData">filesData</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/rowHeight">rowHeight</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/paginate">paginate</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/paginateToggle">paginateToggle</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/uploads">uploads</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/multiselect">multiselect</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/columnTitles">columnTitles</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/resolveRows">resolveRows</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/hoverClass">hoverClass</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/showFilter">showFilter</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/title">title</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/Drag-and-Drop-options">Drag and Drop</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/sortButtonSelector">sortButtonSelector</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/onfilter">onfilter</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/onload">onload</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/togglecheck">togglecheck</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/onfilterreset">onfilterreset</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/createcheck">createcheck</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/oncreate">oncreate</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/deletecheck">deletecheck</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/ondelete">ondelete</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/addcheck">addcheck</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/onadd">onadd</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/onselectrow">onselectrow</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/onmouseoverrow">onmouseoverrow</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/ontogglefolder">ontogglefolder</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/resolveIcon">resolveIcon</a></li>

    </ul>
</li>

<li><a href="https://github.com/caneruguz/treebeard/wiki/Item-API">Item API</a></li>

<li><a href="https://github.com/caneruguz/treebeard/wiki/Treebeard-API">Treebeard API</a></li>

<li><a href="https://github.com/caneruguz/treebeard/wiki/Modal">Modal</a></li>

<li><a href="https://github.com/caneruguz/treebeard/wiki/Notify">Notify</a></li>

<li><a href="https://github.com/caneruguz/treebeard/wiki/using-dropzone">Using Dropzone</a></li>
    <ul>
        <li><a href="https://github.com/caneruguz/treebeard/wiki/resolveUploadUrl">resolveUploadUrl</a></li>

        <li><a href="https://github.com/caneruguz/treebeard/wiki/resolveLazyloadUrl">resolveLazyloadUrl</a></li>
    </ul>
<li><a href="https://github.com/caneruguz/treebeard/wiki/Styling-the-Grid">Styling the Grid</a></li>

<li><a href="https://github.com/caneruguz/treebeard/wiki/FAQs">FAQs</a></li>

Clone this wiki locally