Semantic-ui: [UI] Nag

[jlukic]

Nag

Nag is a component for providing important alerts above your website. These alerts can be dismissed and not shown again by a user with the value being stored by cookie, local storage, or api endpoint.

https://github.com/jlukic/Semantic-UI/blob/master/src/modules/nag.js

Required for 1.0

• Create documentation
• Create examples

• Minor code retooling

  Required for 2.0

• Nag can be automatically hidden after a set number of seconds

• Multiple nags can appear as growl style notifications at the top of the page

[brigand]

Local Storage keys and cookies should be prefixed. I suggest "sui-nag" and any other data we store should be prefixed with "sui-" as well. The chance of a conflict with "nag" is low, but it's good practice because who know what new modules/views will need to store.

[iamolivinius]

It seems to me that there is small spelling error in the nag less source file:

botton instead of bottom

[ProjectCleverWeb]

Since it's already mixed in, any chance we can get a example via a fiddle? (JS is not a forte of mine)

[jlukic]

Cheers will update typo.

With regards to namespacing, having a naming conflict with 'nag' for localstorage/cookies would generally be the exception and not the rule. In those rare cases, they can just change the settings object. And save the tedium (for most developers) of having to access the cookie by some odd namespaced name.

[eppfel]

The module seems to be broken. The example page http://semantic-ui.com/modules/nag.html throws 'Nag: undefined'.
On OSX 10.10 Chrome v42 / ubuntu 14.04 Chromium v41 + Firefox v37

[iamolivinius]

Looks like jquery-cookie plugin is missing. Load it right after jquery and you'll be fine.

[jlukic]

It's borked. Probably from when i reworked global includes in the docs. Will reupload tomorrow.

For now its fixed in beta docs
http://beta.semantic-ui.com/modules/nag.html

[jlukic]

Main docs should not be broken anymore, just reuploaded
http://semantic-ui.com/modules/nag.html

I'll try to write out simple docs for this for 2.0. Probably wont have time to recode it.

[iamolivinius]

Just found out the the Nag component has the Popup component as a hard dependency. Without the Popup component the Nag component can not be dismissed correctly.

I like the idea that components can be loaded separately but I suggest that dependencies should be listed in a subsection of each components documentation.

[jlukic]

Nag doesnt have any dependencies. It can use $.cookie for storing values, but otherwise none.

[iamolivinius]

Without the popup module the easeOutQuad function won't be available. Problem: the nag message does not hide.
https://github.com/Semantic-Org/Semantic-UI/blob/master/src/definitions/modules/popup.js#L1218

Without the icon module the close icon won't be visible. Problem: the nag message can not be dismissed.

For me, from a users point of view, these are dependencies to get the nag module up and running regarding to the current documentation.

http://jsbin.com/ziweqeqasu/1/edit?html,js,output

[jlukic]

Ahh i see you're right. I need to include the easing equations and a micro icon font for the (x).

[jpeffer]

Are there any currently scheduled plans to include colors to the nag component? It would make sense if the same styles as the Message collection. Nag really feels very similar to the dismissible Message, with the exception that the decision to dismiss is persisted.

[d8vjork]

Nag continue using $.cookie (jQuery Cookie: https://github.com/carhartl/jquery-cookie), but this component was moved, now is JS Cookie (https://github.com/js-cookie/js-cookie).

Please update Nag component.

[unki]

@d8vjork see #2905, seems to be already in pipeline

[Jabark]

@jpeffer Just add this to your _nag.overrides_ in your theme files:

.ui.nag.black {
    background-color: @black;
}
.ui.nag.blue {
    background-color: @blue;
}
.ui.nag.green {
    background-color: @green;
}
.ui.nag.grey {
    background-color: @grey;
}
.ui.nag.orange {
    background-color: @orange;
}
.ui.nag.pink {
    background-color: @pink;
}
.ui.nag.purple {
    background-color: @purple;
}
.ui.nag.red {
    background-color: @red;
}
.ui.nag.teal {
    background-color: @teal;
}
.ui.nag.yellow {
    background-color: @yellow;
}

[niittymaa]

As @iamolivinius already said just include before jQuery and it worked for me.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

https://cdnjs.com/libraries/jquery-cookie/

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[lubber-de]

We removed the general jquery plugin dependency, added colors and sizes, fixed bugs and did some more enhancements to the nag module in the community fork Fomantic-UI by
https://github.com/fomantic/Fomantic-UI/pull/1795

[d8vjork]

That's actually good news as Semantic UI seems dead