Skip to content

Instantly share code, notes, and snippets.

@nicogaldamez
Last active April 11, 2017 15:01
Show Gist options
  • Save nicogaldamez/ab73308e46214edf6dc4396ecedb6081 to your computer and use it in GitHub Desktop.
Save nicogaldamez/ab73308e46214edf6dc4396ecedb6081 to your computer and use it in GitHub Desktop.
HelpPopover
###
Permite mostrar globitos de ayuda asociados a un elemento
del DOM. Para ello hay que asignar data-behavior="helpPopover".
Las opciones se cargar sobre data-:
title: Título de la cajita. Default: 'Ayuda'
placement: Posición de la cajita. Default: 'right'
content: Texto de la cajita. Default: ''
forget: True si quiere mostrarse el botón de 'No mostrar más'. Default: true
delay: Demora para mostrar la cajita. Default: 1000
###
jQuery.fn.helpPopover = ->
defaults =
title: 'Ayuda'
placement: 'right'
content: ''
forget: true
delay: 1000
options =
title: this.data('popover-title') || defaults['title']
content: this.data('popover-content') || defaults['content']
placement: this.data('popover-placement') || defaults['placement']
forget: if this.data('popover-forget') then this.data('popover-forget') else defaults['forget']
delay: this.data('popover-delay') || defaults['delay']
id: this.data('popover-id')
html: true
if options['forget'] && options['id'] is undefined
throw 'HelpPopover: You must set popover-id to enable forget option'
return if localStorage.getItem("popover-#{options['id']}")
options['title'] += '<button type="button" class="close" data-dismiss="popover">&times;</button>'
if options['forget']
options['content'] += '<button type="button" class="forget btn btn-xs btn-default" data-behavior="forget-popover">No mostrar más</button>'
this.popover(options).on 'shown.bs.popover', =>
this.data('bs.popover').tip().find('[data-dismiss="popover"]').on 'click', =>
this.popover 'hide'
if options['forget']
this.data('bs.popover').tip().find('[data-behavior="forget-popover"]').on 'click', =>
localStorage.setItem("popover-#{options['id']}", 1)
this.popover 'hide'
if options['delay']
setTimeout(=>
this.popover 'show'
, options['delay']
)
else
this.popover 'show'
# ------- PAGE CHANGE -------
$(document).on "page:change", ->
if $('[data-behavior~=helpPopover]').length > 0
$('[data-behavior~=helpPopover]').helpPopover()
<button type="button"
data-behavior="helpPopover"
data-popover-title="Realizar un pago"
data-popover-content="Haga click aquí para acceder a la pantalla de pago"
data-popover-placement="left"
data-popover-id="payment-popover">
Nuevo pago
</button>
.popover-title {
color: white;
background: rgb(0, 192, 239);
}
.popover .close {
opacity: 1;
color: white;
line-height: 15px;
font-weight: normal;
}
.popover .forget {
display: block;
margin-top: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment