/* Name: UI Elements / Notificacao - Examples Written by: usp.br/nds */ (function( $ ) { 'use strict'; /* Notificacao padrao */ $('#default-primary').click(function() { new PNotify({ title: 'Aviso Padrao', text: 'Olhe para mim! Sou uma noticia.', type: 'custom', addclass: 'notification-primary', icon: 'fa fa-twitter' }); }); $('#default-notice').click(function() { new PNotify({ title: 'Aviso Padrao', text: 'Olhe para mim! Sou uma noticia.' }); }); $('#default-success').click(function() { new PNotify({ title: 'Aviso Padrao', text: 'Olhe para mim! Sou uma noticia.', type: 'success' }); }); $('#default-info').click(function() { new PNotify({ title: 'Aviso Padrao', text: 'Olhe para mim! Sou uma noticia.', type: 'info' }); }); $('#default-error').click(function() { new PNotify({ title: 'Aviso Padrao', text: 'Olhe para mim! Sou uma noticia.', type: 'error' }); }); $('#default-dark').click(function() { new PNotify({ title: 'Aviso Padrao', text: 'Olhe para mim! Sou uma noticia.', addclass: 'notification-dark', icon: 'fa fa-user' }); }); /* Shadowed Notificacaos */ $('#shadow-primary').click(function() { new PNotify({ title: 'Com sombra', text: 'Olhe para mim! Sou uma noticia.', shadow: true, addclass: 'notification-primary', icon: 'fa fa-twitter' }); }); $('#shadow-notice').click(function() { new PNotify({ title: 'Com sombra', text: 'Olhe para mim! Sou uma noticia.', shadow: true }); }); $('#shadow-success').click(function() { new PNotify({ title: 'Com sombra', text: 'Olhe para mim! Sou uma noticia.', type: 'success', shadow: true }); }); $('#shadow-info').click(function() { new PNotify({ title: 'Com sombra', text: 'Olhe para mim! Sou uma noticia.', type: 'info', shadow: true }); }); $('#shadow-error').click(function() { new PNotify({ title: 'Com sombra', text: 'Olhe para mim! Sou uma noticia.', type: 'error', shadow: true }); }); $('#shadow-dark').click(function() { new PNotify({ title: 'Com sombra', text: 'Olhe para mim! Sou uma noticia.', addclass: 'notification-dark', icon: 'fa fa-user', shadow: true }); }); /* No Icon Notificacao */ $('#no-icon-primary').click(function() { new PNotify({ title: 'Sem icone', text: 'Olhe para mim! Sou uma noticia.', addclass: 'ui-pnotify-no-icon notification-primary', icon: false }); }); $('#no-icon-notice').click(function() { new PNotify({ title: 'Sem icone', text: 'Olhe para mim! Sou uma noticia.', addclass: 'ui-pnotify-no-icon', icon: false }); }); $('#no-icon-success').click(function() { new PNotify({ title: 'Sem icone', text: 'Olhe para mim! Sou uma noticia.', type: 'success', addclass: 'ui-pnotify-no-icon', icon: false }); }); $('#no-icon-info').click(function() { new PNotify({ title: 'Sem icone', text: 'Olhe para mim! Sou uma noticia.', type: 'info', addclass: 'ui-pnotify-no-icon', icon: false }); }); $('#no-icon-error').click(function() { new PNotify({ title: 'Sem icone', text: 'Olhe para mim! Sou uma noticia.', type: 'error', addclass: 'ui-pnotify-no-icon', icon: false }); }); $('#no-icon-dark').click(function() { new PNotify({ title: 'Sem icone', text: 'Olhe para mim! Sou uma noticia.', addclass: 'ui-pnotify-no-icon notification-dark', icon: false }); }); /* No Border Radius Notificacao */ $('#no-radious-primary').click(function() { new PNotify({ title: 'border-radius: 0;', text: 'Olhe para mim! Sou uma noticia.', addclass: 'notification-primary', cornerclass: 'ui-pnotify-sharp', icon: 'fa fa-twitter' }); }); $('#no-radious-notice').click(function() { new PNotify({ title: 'border-radius: 0;', text: 'Olhe para mim! Sou uma noticia.', cornerclass: 'ui-pnotify-sharp' }); }); $('#no-radious-success').click(function() { new PNotify({ title: 'border-radius: 0;', text: 'Olhe para mim! Sou uma noticia.', type: 'success', cornerclass: 'ui-pnotify-sharp' }); }); $('#no-radious-info').click(function() { new PNotify({ title: 'border-radius: 0;', text: 'Olhe para mim! Sou uma noticia.', type: 'info', cornerclass: 'ui-pnotify-sharp' }); }); $('#no-radious-error').click(function() { new PNotify({ title: 'border-radius: 0;', text: 'Olhe para mim! Sou uma noticia.', type: 'error', cornerclass: 'ui-pnotify-sharp' }); }); $('#no-radious-dark').click(function() { new PNotify({ title: 'border-radius: 0;', text: 'Olhe para mim! Sou uma noticia.', addclass: 'notification-dark', icon: 'fa fa-user', cornerclass: 'ui-pnotify-sharp' }); }); /* Icone customizado Notificacao */ $('#custom-icon-primary').click(function() { new PNotify({ title: 'Icone customizado', text: 'Olhe para mim! Sou uma noticia.', addclass: 'notification-primary', icon: 'fa fa-home' }); }); $('#custom-icon-notice').click(function() { new PNotify({ title: 'Icone customizado', text: 'Olhe para mim! Sou uma noticia.', icon: 'fa fa-home' }); }); $('#custom-icon-success').click(function() { new PNotify({ title: 'Icone customizado', text: 'Olhe para mim! Sou uma noticia.', type: 'success', icon: 'fa fa-home' }); }); $('#custom-icon-info').click(function() { new PNotify({ title: 'Icone customizado', text: 'Olhe para mim! Sou uma noticia.', type: 'info', icon: 'fa fa-home' }); }); $('#custom-icon-error').click(function() { new PNotify({ title: 'Icone customizado', text: 'Olhe para mim! Sou uma noticia.', type: 'error', icon: 'fa fa-home' }); }); $('#custom-icon-dark').click(function() { new PNotify({ title: 'Icone customizado', text: 'Olhe para mim! Sou uma noticia.', addclass: 'notification-dark', icon: 'fa fa-home' }); }); /* Icon without border notification */ $('#icon-without-border-primary').click(function() { new PNotify({ title: 'Icone sem borda', text: 'Olhe para mim! Sou uma noticia.', addclass: 'notification-primary icon-nb', icon: 'fa fa-twitter' }); }); $('#icon-without-border-notice').click(function() { new PNotify({ title: 'Icone sem borda', text: 'Olhe para mim! Sou uma noticia.', addclass: 'icon-nb' }); }); $('#icon-without-border-success').click(function() { new PNotify({ title: 'Icone sem borda', text: 'Olhe para mim! Sou uma noticia.', type: 'success', addclass: 'icon-nb' }); }); $('#icon-without-border-info').click(function() { new PNotify({ title: 'Icone sem borda', text: 'Olhe para mim! Sou uma noticia.', type: 'info', addclass: 'icon-nb' }); }); $('#icon-without-border-error').click(function() { new PNotify({ title: 'Icone sem borda', text: 'Olhe para mim! Sou uma noticia.', type: 'error', addclass: 'icon-nb' }); }); $('#icon-without-border-dark').click(function() { new PNotify({ title: 'Icone sem borda', text: 'Olhe para mim! Sou uma noticia.', addclass: 'notification-dark icon-nb', icon: 'fa fa-user' }); }); /* Non-blocking notifications */ $('#non-blocking-primary').click(function() { new PNotify({ title: 'Non-Blocking', text: 'Eu sou um tipo especial de aviso chamado de "non-blocking". Quando vc passa o mouse por cima de mim eu vou desaparecer para mostrar os elementos por baixo. .\n\nNota: Links em HTML nao funcionam em alguns browsers, devido as configuracoes de seguranca.', addclass: 'notification-primary', icon: 'fa fa-twitter', nonblock: { nonblock: true, nonblock_opacity: .2 } }); }); $('#non-blocking-notice').click(function() { new PNotify({ title: 'Non-Blocking', text: 'Eu sou um tipo especial de aviso chamado de "non-blocking". Quando vc passa o mouse por cima de mim eu vou desaparecer para mostrar os elementos por baixo. .\n\nNota: Links em HTML nao funcionam em alguns browsers, devido as configuracoes de seguranca.', nonblock: { nonblock: true, nonblock_opacity: .2 } }); }); $('#non-blocking-success').click(function() { new PNotify({ title: 'Non-Blocking', text: 'Eu sou um tipo especial de aviso chamado de "non-blocking". Quando vc passa o mouse por cima de mim eu vou desaparecer para mostrar os elementos por baixo. .\n\nNota: Links em HTML nao funcionam em alguns browsers, devido as configuracoes de seguranca.', type: 'success', nonblock: { nonblock: true, nonblock_opacity: .2 } }); }); $('#non-blocking-info').click(function() { new PNotify({ title: 'Non-Blocking', text: 'Eu sou um tipo especial de aviso chamado de "non-blocking". Quando vc passa o mouse por cima de mim eu vou desaparecer para mostrar os elementos por baixo. .\n\nNota: Links em HTML nao funcionam em alguns browsers, devido as configuracoes de seguranca.', type: 'info', nonblock: { nonblock: true, nonblock_opacity: .2 } }); }); $('#non-blocking-error').click(function() { new PNotify({ title: 'Non-Blocking', text: 'Eu sou um tipo especial de aviso chamado de "non-blocking". Quando vc passa o mouse por cima de mim eu vou desaparecer para mostrar os elementos por baixo. .\n\nNota: Links em HTML nao funcionam em alguns browsers, devido as configuracoes de seguranca.', type: 'error', nonblock: { nonblock: true, nonblock_opacity: .2 } }); }); $('#non-blocking-dark').click(function() { new PNotify({ title: 'Non-Blocking', text: 'Eu sou um tipo especial de aviso chamado de "non-blocking". Quando vc passa o mouse por cima de mim eu vou desaparecer para mostrar os elementos por baixo. .\n\nNota: Links em HTML nao funcionam em alguns browsers, devido as configuracoes de seguranca.', addclass: 'notification-dark', icon: 'fa fa-user', nonblock: { nonblock: true, nonblock_opacity: .2 } }); }); /* Sticky notifications */ $('#sticky-primary').click(function() { new PNotify({ title: 'Chato', text: 'Olhe para mim! Sou uma noticia. Vc deve clicar para fechar.', addclass: 'notification-primary', icon: 'fa fa-twitter', hide: false, buttons: { sticker: false } }); }); $('#sticky-notice').click(function() { new PNotify({ title: 'Chato', text: 'Olhe para mim! Sou uma noticia. Vc deve clicar para fechar.', hide: false, buttons: { sticker: false } }); }); $('#sticky-success').click(function() { new PNotify({ title: 'Chato', text: 'Olhe para mim! Sou uma noticia. Vc deve clicar para fechar.', type: 'success', hide: false, buttons: { sticker: false } }); }); $('#sticky-info').click(function() { new PNotify({ title: 'Chato', text: 'Olhe para mim! Sou uma noticia. Vc deve clicar para fechar.', type: 'info', hide: false, buttons: { sticker: false } }); }); $('#sticky-error').click(function() { new PNotify({ title: 'Chato', text: 'Olhe para mim! Sou uma noticia. Vc deve clicar para fechar.', type: 'error', hide: false, buttons: { sticker: false } }); }); $('#sticky-dark').click(function() { new PNotify({ title: 'Chato', text: 'Olhe para mim! Sou uma noticia. Vc deve clicar para fechar.', addclass: 'notification-dark', icon: 'fa fa-user', hide: false, buttons: { sticker: false } }); }); /* Click to close notifications */ $('#click-to-close-primary').click(function() { var notice = new PNotify({ title: 'Clique para fechar', text: 'Olhe para mim! Sou uma noticia. Vc deve clicar em mim para fechar.', addclass: 'notification-primary click-2-close', icon: 'fa fa-twitter', hide: false, buttons: { closer: false, sticker: false } }); notice.get().click(function() { notice.remove(); }); }); $('#click-to-close-notice').click(function() { var notice = new PNotify({ title: 'Clique para fechar', text: 'Olhe para mim! Sou uma noticia. Vc deve clicar em mim para fechar.', addclass: 'click-2-close', hide: false, buttons: { closer: false, sticker: false } }); notice.get().click(function() { notice.remove(); }); }); $('#click-to-close-success').click(function() { var notice = new PNotify({ title: 'Clique para fechar', text: 'Olhe para mim! Sou uma noticia. Vc deve clicar em mim para fechar.', type: 'success', addclass: 'click-2-close', hide: false, buttons: { closer: false, sticker: false } }); notice.get().click(function() { notice.remove(); }); }); $('#click-to-close-info').click(function() { var notice = new PNotify({ title: 'Clique para fechar', text: 'Olhe para mim! Sou uma noticia. Vc deve clicar em mim para fechar.', type: 'info', addclass: 'click-2-close', hide: false, buttons: { closer: false, sticker: false } }); notice.get().click(function() { notice.remove(); }); }); $('#click-to-close-error').click(function() { var notice = new PNotify({ title: 'Clique para fechar', text: 'Olhe para mim! Sou uma noticia. Vc deve clicar em mim para fechar.', type: 'error', addclass: 'click-2-close', hide: false, buttons: { closer: false, sticker: false } }); notice.get().click(function() { notice.remove(); }); }); $('#click-to-close-dark').click(function() { var notice = new PNotify({ title: 'Clique para fechar', text: 'Olhe para mim! Sou uma noticia. Vc deve clicar em mim para fechar.', addclass: 'notification-dark click-2-close', icon: 'fa fa-user', hide: false, buttons: { closer: false, sticker: false } }); notice.get().click(function() { notice.remove(); }); }); /* Positions */ var stack_topleft = {"dir1": "down", "dir2": "right", "push": "top"}; var stack_bottomleft = {"dir1": "right", "dir2": "up", "push": "top"}; var stack_bottomright = {"dir1": "up", "dir2": "left", "firstpos1": 15, "firstpos2": 15}; var stack_bar_top = {"dir1": "down", "dir2": "right", "push": "top", "spacing1": 0, "spacing2": 0}; var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0}; $('#position-1-primary').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', addclass: 'notification-primary stack-topleft', icon: 'fa fa-twitter' }); }); $('#position-1-notice').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', addclass: 'stack-topleft' }); }); $('#position-1-success').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', type: 'success', addclass: 'stack-topleft' }); }); $('#position-1-info').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', type: 'info', addclass: 'stack-topleft' }); }); $('#position-1-error').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', type: 'error', addclass: 'stack-topleft' }); }); $('#position-1-dark').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', addclass: 'notification-dark stack-topleft', icon: 'fa fa-user' }); }); $('#position-2-primary').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', addclass: 'notification-primary stack-bottomleft', icon: 'fa fa-twitter', stack: stack_bottomleft }); }); $('#position-2-notice').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', addclass: 'stack-bottomleft', stack: stack_bottomleft }); }); $('#position-2-success').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', type: 'success', addclass: 'stack-bottomleft', stack: stack_bottomleft }); }); $('#position-2-info').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', type: 'info', addclass: 'stack-bottomleft', stack: stack_bottomleft }); }); $('#position-2-error').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', type: 'error', addclass: 'stack-bottomleft', stack: stack_bottomleft }); }); $('#position-2-dark').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', addclass: 'notification-dark stack-bottomleft', icon: 'fa fa-user', stack: stack_bottomleft }); }); $('#position-3-primary').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', addclass: 'notification-primary stack-bottomright', icon: 'fa fa-twitter', stack: stack_bottomright }); }); $('#position-3-notice').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', addclass: 'stack-bottomright', stack: stack_bottomright }); }); $('#position-3-success').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', type: 'success', addclass: 'stack-bottomright', stack: stack_bottomright }); }); $('#position-3-info').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', type: 'info', addclass: 'stack-bottomright', stack: stack_bottomright }); }); $('#position-3-error').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', type: 'error', addclass: 'stack-bottomright', stack: stack_bottomright }); }); $('#position-3-dark').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', addclass: 'notification-dark stack-bottomright', icon: 'fa fa-user', stack: stack_bottomright }); }); $('#position-4-primary').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', addclass: 'notification-primary stack-bar-top', icon: 'fa fa-twitter', stack: stack_bar_top, width: "100%" }); }); $('#position-4-notice').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', addclass: 'stack-bar-top', stack: stack_bar_top, width: "100%" }); }); $('#position-4-success').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', type: 'success', addclass: 'stack-bar-top', stack: stack_bar_top, width: "100%" }); }); $('#position-4-info').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', type: 'info', addclass: 'stack-bar-top', stack: stack_bar_top, width: "100%" }); }); $('#position-4-error').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', type: 'error', addclass: 'stack-bar-top', stack: stack_bar_top, width: "100%" }); }); $('#position-4-dark').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', addclass: 'notification-dark stack-bar-top', icon: 'fa fa-user', stack: stack_bar_top, width: "100%" }); }); $('#position-5-primary').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', addclass: 'notification-primary stack-bar-bottom', icon: 'fa fa-twitter', stack: stack_bar_bottom, width: "70%" }); }); $('#position-5-notice').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', addclass: 'stack-bar-bottom', stack: stack_bar_bottom, width: "70%" }); }); $('#position-5-success').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', type: 'success', addclass: 'stack-bar-bottom', stack: stack_bar_bottom, width: "70%" }); }); $('#position-5-info').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', type: 'info', addclass: 'stack-bar-bottom', stack: stack_bar_bottom, width: "70%" }); }); $('#position-5-error').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', type: 'error', addclass: 'stack-bar-bottom', stack: stack_bar_bottom, width: "70%" }); }); $('#position-5-dark').click(function() { var notice = new PNotify({ title: 'Notificacao', text: 'Algum texto.', addclass: 'notification-dark stack-bar-bottom', icon: 'fa fa-user', stack: stack_bar_bottom, width: "70%" }); }); /* Desktop Code */ $.each(['notice', 'error', 'info', 'success'], function( i, type ) { $( '#desktop-' + type ).click(function() { PNotify.desktop.permission(); (new PNotify({ title: 'Desktop ' + type.charAt(0).toUpperCase() + type.slice(1), text: 'Se vc me deu permissao, eu vou aparecer como uma notificacao de desktop. Se vc nao deu, eu ainda vou aparecer como um aviso regular.', type: type, desktop: { desktop: true } })).get().click(function() { alert('Olá! Vc clicou em uma notificacao de desktop!'); }); }); }); $('#desktop-sticky').click(function() { PNotify.desktop.permission(); (new PNotify({ title: 'Notificacao persistente', text: 'Eu sou um aviso chato, entao vc vai ter que me fechar. Se vc me deu permissao, eu vou aparecer como uma notificacao de desktop. Se vc nao deu, eu ainda vou aparecer como um aviso regular.', hide: false, desktop: { desktop: true } })).get().click(function() { alert('Olá! Vc clicou em uma notificacao de desktop!'); }); }); $('#desktop-custom').click(function() { PNotify.desktop.permission(); (new PNotify({ title: 'Icone customizado', text: 'Se vc me deu permissao, eu vou aparecer como uma notificacao de desktop. Se vc nao deu, eu ainda vou aparecer como um aviso regular.', desktop: { desktop: true, icon: 'assets/images/!happy-face.png' } })).get().click(function() { alert('Olá! Vc clicou em uma notificacao de desktop!'); }); }); }).apply( this, [ jQuery ]);