Make the content selector more explicit (contentFrom)

This commit is contained in:
Samuel Georges 2017-04-22 15:31:27 +10:00
parent 49f5ec7557
commit eaf2c9e4d0
3 changed files with 12 additions and 12 deletions

View File

@ -18,7 +18,7 @@ You may add `data-control="popover"` to an anchor or button to activate a popove
### Template content ### Template content
Define the popover content as a template and reference it with `data-content="#myPopoverContent"`. Define the popover content as a template and reference it with `data-content-from="#myPopoverContent"`.
```html ```html
<script type="text/template" id="myPopoverContent"> <script type="text/template" id="myPopoverContent">
@ -47,7 +47,7 @@ Define the popover content as a template and reference it with `data-content="#m
class="btn btn-primary" class="btn btn-primary"
data-control="popover" data-control="popover"
data-width="200" data-width="200"
data-content="#myPopoverContent"> data-content-from="#myPopoverContent">
Template popover Template popover
</a> </a>
@ -98,6 +98,8 @@ Closes the popover. There are 3 ways to close the popover: call it's `hide()` me
- `content`: content HTML string or callback - `content`: content HTML string or callback
- `contentFrom`: selector to source the content HTML
- `width`: content width, optional. If not specified, the content width will be used. - `width`: content width, optional. If not specified, the content width will be used.
- `modal`: make the popover modal - `modal`: make the popover modal

View File

@ -171,14 +171,12 @@
} }
Popover.prototype.getContent = function () { Popover.prototype.getContent = function () {
var content = this.options.content if (this.options.contentFrom) {
return $(this.options.contentFrom).html()
if (typeof content == 'function') {
return content.call(this.$el[0], this)
} }
if (content.charAt(0) === '#') { if (typeof this.options.content == 'function') {
return $(content).html() return this.options.content.call(this.$el[0], this)
} }
return this.options.content return this.options.content
@ -319,6 +317,7 @@
placement: 'bottom', placement: 'bottom',
fallbackPlacement: 'bottom', fallbackPlacement: 'bottom',
content: '<p>Popover content<p>', content: '<p>Popover content<p>',
contentFrom: null,
width: false, width: false,
modal: false, modal: false,
highlightModalTarget: false, highlightModalTarget: false,

View File

@ -3440,9 +3440,8 @@ Popover.prototype.reposition=function(){var
placement=this.calcPlacement(),position=this.calcPosition(placement) placement=this.calcPlacement(),position=this.calcPosition(placement)
this.$container.removeClass('placement-center placement-bottom placement-top placement-left placement-right') this.$container.removeClass('placement-center placement-bottom placement-top placement-left placement-right')
this.$container.css({left:position.x,top:position.y}).addClass('placement-'+placement)} this.$container.css({left:position.x,top:position.y}).addClass('placement-'+placement)}
Popover.prototype.getContent=function(){var content=this.options.content Popover.prototype.getContent=function(){if(this.options.contentFrom){return $(this.options.contentFrom).html()}
if(typeof content=='function'){return content.call(this.$el[0],this)} if(typeof this.options.content=='function'){return this.options.content.call(this.$el[0],this)}
if(content.charAt(0)==='#'){return $(content).html()}
return this.options.content} return this.options.content}
Popover.prototype.calcDimensions=function(){var Popover.prototype.calcDimensions=function(){var
documentWidth=$(document).width(),documentHeight=$(document).height(),targetOffset=this.$el.offset(),targetWidth=this.$el.outerWidth(),targetHeight=this.$el.outerHeight() documentWidth=$(document).width(),documentHeight=$(document).height(),targetOffset=this.$el.offset(),targetWidth=this.$el.outerWidth(),targetHeight=this.$el.outerHeight()
@ -3490,7 +3489,7 @@ if(this.options.onCheckDocumentClickTarget&&this.options.onCheckDocumentClickTar
if($.contains(this.$container.get(0),e.target)) if($.contains(this.$container.get(0),e.target))
return return
this.hide();} this.hide();}
Popover.DEFAULTS={placement:'bottom',fallbackPlacement:'bottom',content:'<p>Popover content<p>',width:false,modal:false,highlightModalTarget:false,closeOnPageClick:true,closeOnEsc:true,container:false,containerClass:null,offset:15,useAnimation:false,onCheckDocumentClickTarget:null} Popover.DEFAULTS={placement:'bottom',fallbackPlacement:'bottom',content:'<p>Popover content<p>',contentFrom:null,width:false,modal:false,highlightModalTarget:false,closeOnPageClick:true,closeOnEsc:true,container:false,containerClass:null,offset:15,useAnimation:false,onCheckDocumentClickTarget:null}
var old=$.fn.ocPopover var old=$.fn.ocPopover
$.fn.ocPopover=function(option){var args=arguments;return this.each(function(){var $this=$(this) $.fn.ocPopover=function(option){var args=arguments;return this.each(function(){var $this=$(this)
var data=$this.data('oc.popover') var data=$this.data('oc.popover')