mirror of
https://github.com/wintercms/winter.git
synced 2024-06-28 05:33:29 +02:00
Document and improve popover
This commit is contained in:
Samuel Georges
parent
4644218312
commit
49f5ec7557
@ -28,7 +28,7 @@ Sort the buttons
|
||||
}
|
||||
</style>
|
||||
|
||||
## JavaScript API:
|
||||
## JavaScript API
|
||||
|
||||
The `sortable()` method must be invoked on valid containers, meaning they must match the containerSelector option.
|
||||
|
||||
@ -47,7 +47,7 @@ Remove the sortable plugin from the set of matched elements
|
||||
`.sortable('serialize')`
|
||||
Serialize all selected containers. Returns a jQuery object . Use .get() to retrieve the array, if needed.
|
||||
|
||||
### Supported options:
|
||||
### Supported options
|
||||
|
||||
- `useAnimation`: Use animation when an item is removed or inserted into the tree.
|
||||
|
||||
@ -95,7 +95,7 @@ Serialize all selected containers. Returns a jQuery object . Use .get() to retri
|
||||
|
||||
- `tolerance`: Set tolerance while dragging. Positive values decrease sensitivity, negative values increase it.
|
||||
|
||||
### Supported options (container specific):
|
||||
### Supported options (container specific)
|
||||
|
||||
- `drag`: If true, items can be dragged from this container
|
||||
|
||||
|
||||
@ -1,64 +1,129 @@
|
||||
# Popover
|
||||
|
||||
Popover
|
||||
Renders a richer version of a tooltip, called a popover.
|
||||
|
||||
# Example
|
||||
## Examples
|
||||
|
||||
<div class="layout-column full-height-strict justify-center align-center">
|
||||
<div class="outer-form-container layout-item center relative" id="btngroup" style="width: 560px">
|
||||
<div class="btn-group">
|
||||
<a href="#" id="btn1" class="btn btn-primary oc-icon-angle-left" data-control="popover" data-container="#btngroup" data-content="This is a popover" data-placement="left">
|
||||
Popover on left
|
||||
</a>
|
||||
<a href="#" id="btn2" class="btn btn-primary oc-icon-angle-down">
|
||||
Popover on bottom
|
||||
</a>
|
||||
<a href="#" id="btn3" class="btn btn-primary oc-icon-angle-up">
|
||||
Popover on top
|
||||
</a>
|
||||
<a href="#" id="btn4" class="btn btn-primary oc-icon-angle-right" data-control="popover" data-container="#btngroup" data-content="<p>Default popover content</p>" data-placement="right" data-width="200">
|
||||
Popover on right
|
||||
### Basic usage
|
||||
|
||||
You may add `data-control="popover"` to an anchor or button to activate a popover. Use the `data-content` attribute to specify the contents.
|
||||
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="btn btn-primary"
|
||||
data-control="popover"
|
||||
data-content="I am a standard popover">
|
||||
Basic popover
|
||||
</a>
|
||||
|
||||
### Template content
|
||||
|
||||
Define the popover content as a template and reference it with `data-content="#myPopoverContent"`.
|
||||
|
||||
```html
|
||||
<script type="text/template" id="myPopoverContent">
|
||||
<div class="popover-head">
|
||||
<h3>Popover</h3>
|
||||
<button type="button" class="close" data-dismiss="popover">×</button>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
I am a popover
|
||||
</div>
|
||||
</script>
|
||||
```
|
||||
|
||||
<div style="display:none" id="myPopoverContent">
|
||||
<div class="popover-head">
|
||||
<h3>Popover</h3>
|
||||
<button type="button" class="close" data-dismiss="popover">×</button>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
I am a popover
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="btn btn-primary"
|
||||
data-control="popover"
|
||||
data-width="200"
|
||||
data-content="#myPopoverContent">
|
||||
Template popover
|
||||
</a>
|
||||
|
||||
### Event specified content
|
||||
|
||||
```js
|
||||
$('#btn1').on('showing.oc.popover', function(e, popover) {
|
||||
popover.options.content = '<div class="popover-body">Some other content</div>'
|
||||
})
|
||||
```
|
||||
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="btn btn-primary"
|
||||
data-control="popover"
|
||||
data-placement="right"
|
||||
id="btn1">
|
||||
Event content popover
|
||||
</a>
|
||||
|
||||
<script>
|
||||
$('#btn1').on('show.oc.popover', function(e, popover){
|
||||
popover.options.content = '<div class="popover-body"><p>Some other content</p></div>'
|
||||
$(document).ready(function() {
|
||||
$('#btn1').on('showing.oc.popover', function(e, popover) {
|
||||
popover.options.content = '<div class="popover-body">Some other content</div>'
|
||||
})
|
||||
|
||||
$('#btn2').on('click', function(){
|
||||
$(this).ocPopover({
|
||||
content: $('#popovertemplate').html(),
|
||||
modal: true,
|
||||
highlightModalTarget: true,
|
||||
placement: 'bottom',
|
||||
container: '#btngroup'
|
||||
})
|
||||
|
||||
return false
|
||||
})
|
||||
|
||||
$('#btn3').on('click', function(){
|
||||
$(this).ocPopover({
|
||||
content: function(element, popover) {
|
||||
return '<p>This is a generated content<button type="button" class="close" data-dismiss="popover" aria-hidden="true">×</button></p>'
|
||||
},
|
||||
placement: 'top',
|
||||
container: '#btngroup'
|
||||
})
|
||||
|
||||
return false
|
||||
})
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="popovertemplate">
|
||||
<div class="popover-body">
|
||||
<p>Modal popover</p>
|
||||
<p>Modal popover</p>
|
||||
<p>Modal popover</p>
|
||||
<p>Modal popover</p>
|
||||
<a class="btn btn-danger" href="#" onclick="$(this).trigger('close.oc.popover'); return false">Close</a>
|
||||
</div>
|
||||
</script>
|
||||
## JavaScript API
|
||||
|
||||
```js
|
||||
$('#element').ocPopover({
|
||||
content: '<p>This is a popover</p>'
|
||||
placement: 'top'
|
||||
})
|
||||
```
|
||||
|
||||
### Supported methods
|
||||
|
||||
`.ocPopover('hide')`
|
||||
Closes the popover. There are 3 ways to close the popover: call it's `hide()` method, trigger the `close.oc.popover` on any element inside the popover or click an element with attribute `data-dismiss="popover"` inside the popover.
|
||||
|
||||
### Supported options
|
||||
|
||||
- `placement`: top | bottom | left | right | center. The placement could automatically be changed if the popover doesn't fit into the desired position.
|
||||
|
||||
- `fallbackPlacement`: top | bottom | left | right. The placement to use if the default placement and all other possible placements do not work. The default value is "bottom".
|
||||
|
||||
- `content`: content HTML string or callback
|
||||
|
||||
- `width`: content width, optional. If not specified, the content width will be used.
|
||||
|
||||
- `modal`: make the popover modal
|
||||
|
||||
- `highlightModalTarget`: "pop" the popover target above the overlay, making it highlighted. The feature assigns the target position relative.
|
||||
|
||||
- `closeOnPageClick`: close the popover if the page was clicked outside the popover area.
|
||||
|
||||
- `container`: the popover container selector or element. The default container is the document body. The container must be relative positioned.
|
||||
|
||||
- `containerClass` - a CSS class to apply to the popover container element
|
||||
|
||||
- `offset` - offset in pixels to add to the calculated position, to make the position more "random"
|
||||
|
||||
- `offsetX` - X offset in pixels to add to the calculated position, to make the position more "random". If specified, overrides the offset property for the bottom and top popover placement.
|
||||
|
||||
- `offsetY` - Y offset in pixels to add to the calculated position, to make the position more "random". If specified, overrides the offset property for the left and right popover placement.
|
||||
|
||||
- `useAnimation`: adds animation to the open and close sequence, the equivalent of adding the CSS class 'fade' to the containerClass.
|
||||
|
||||
### Supported events
|
||||
|
||||
- `showing.oc.popover` - triggered before the popover is displayed. Allows to override the popover options (for example the content) or cancel the action with e.preventDefault()
|
||||
|
||||
- `show.oc.popover` - triggered after the popover is displayed.
|
||||
|
||||
- `hiding.oc.popover` - triggered before the popover is closed. Allows to cancel the action with e.preventDefault()
|
||||
|
||||
- `hide.oc.popover` - triggered after the popover is hidden.
|
||||
|
||||
@ -1,49 +1,9 @@
|
||||
/*
|
||||
* Popover plugin
|
||||
*
|
||||
* Options:
|
||||
* - placement: top | bottom | left | right | center. The placement could automatically be changed
|
||||
if the popover doesn't fit into the desired position.
|
||||
* - fallbackPlacement: top | bottom | left | right. The placement to use if the default placement
|
||||
* and all other possible placements do not work. The default value is "bottom".
|
||||
* - content: content HTML string or callback
|
||||
* - width: content width, optional. If not specified, the content width will be used.
|
||||
* - modal: make the popover modal
|
||||
* - highlightModalTarget: "pop" the popover target above the overlay, making it highlighted.
|
||||
* The feature assigns the target position relative.
|
||||
* - closeOnPageClick: close the popover if the page was clicked outside the popover area.
|
||||
* - container: the popover container selector or element. The default container is the document body.
|
||||
* The container must be relative positioned.
|
||||
* - containerClass - a CSS class to apply to the popover container element
|
||||
* - offset - offset in pixels to add to the calculated position, to make the position more "random"
|
||||
* - offsetX - X offset in pixels to add to the calculated position, to make the position more "random".
|
||||
* If specified, overrides the offset property for the bottom and top popover placement.
|
||||
* - offsetY - Y offset in pixels to add to the calculated position, to make the position more "random".
|
||||
* If specified, overrides the offset property for the left and right popover placement.
|
||||
* - useAnimation: adds animation to the open and close sequence, the equivalent of adding
|
||||
* the CSS class 'fade' to the containerClass.
|
||||
*
|
||||
* Methods:
|
||||
* - hide
|
||||
*
|
||||
* Closing the popover. There are 3 ways to close the popover: call it's hide() method, trigger
|
||||
* the close.oc.popover on any element inside the popover or click an element with attribute
|
||||
* data-dismiss="popover" inside the popover.
|
||||
*
|
||||
* Events:
|
||||
* - showing.oc.popover - triggered before the popover is displayed. Allows to override the
|
||||
* popover options (for example the content) or cancel the action with e.preventDefault()
|
||||
* - show.oc.popover - triggered after the popover is displayed.
|
||||
* - hiding.oc.popover - triggered before the popover is closed. Allows to cancel the action with
|
||||
* e.preventDefault()
|
||||
* - hide.oc.popover - triggered after the popover is hidden.
|
||||
*
|
||||
* JavaScript API:
|
||||
* $('#element').ocPopover({
|
||||
content: '<p>This is a popover</p>'
|
||||
placement: 'top'
|
||||
* })
|
||||
* Documentation: ../docs/popover.md
|
||||
*/
|
||||
|
||||
+function ($) { "use strict";
|
||||
|
||||
var Popover = function (element, options) {
|
||||
@ -108,25 +68,28 @@
|
||||
*/
|
||||
var e = $.Event('showing.oc.popover', { relatedTarget: this.$el })
|
||||
this.$el.trigger(e, this)
|
||||
if (e.isDefaultPrevented())
|
||||
return
|
||||
if (e.isDefaultPrevented()) return
|
||||
|
||||
/*
|
||||
* Create the popover container and overlay
|
||||
*/
|
||||
this.$container = $('<div />').addClass('control-popover')
|
||||
|
||||
if (this.options.containerClass)
|
||||
if (this.options.containerClass) {
|
||||
this.$container.addClass(this.options.containerClass)
|
||||
}
|
||||
|
||||
if (this.options.useAnimation)
|
||||
if (this.options.useAnimation) {
|
||||
this.$container.addClass('fade')
|
||||
}
|
||||
|
||||
var $content = $('<div />').html(this.getContent())
|
||||
|
||||
this.$container.append($content)
|
||||
|
||||
if (this.options.width)
|
||||
if (this.options.width) {
|
||||
this.$container.width(this.options.width)
|
||||
}
|
||||
|
||||
if (this.options.modal) {
|
||||
this.$overlay = $('<div />').addClass('popover-overlay')
|
||||
@ -135,14 +98,17 @@
|
||||
this.$el.addClass('popover-highlight')
|
||||
this.$el.blur()
|
||||
}
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
this.$overlay = false
|
||||
}
|
||||
|
||||
if (this.options.container)
|
||||
if (this.options.container) {
|
||||
$(this.options.container).append(this.$container)
|
||||
else
|
||||
}
|
||||
else {
|
||||
$(document.body).append(this.$container)
|
||||
}
|
||||
|
||||
/*
|
||||
* Determine the popover position
|
||||
@ -205,9 +171,17 @@
|
||||
}
|
||||
|
||||
Popover.prototype.getContent = function () {
|
||||
return typeof this.options.content == 'function'
|
||||
? this.options.content.call(this.$el[0], this)
|
||||
: this.options.content
|
||||
var content = this.options.content
|
||||
|
||||
if (typeof content == 'function') {
|
||||
return content.call(this.$el[0], this)
|
||||
}
|
||||
|
||||
if (content.charAt(0) === '#') {
|
||||
return $(content).html()
|
||||
}
|
||||
|
||||
return this.options.content
|
||||
}
|
||||
|
||||
Popover.prototype.calcDimensions = function() {
|
||||
|
||||
26
modules/system/assets/ui/storm-min.js
vendored
26
modules/system/assets/ui/storm-min.js
vendored
@ -3407,25 +3407,20 @@ this.options.onCheckDocumentClickTarget=null}
|
||||
Popover.prototype.show=function(options){var self=this
|
||||
var e=$.Event('showing.oc.popover',{relatedTarget:this.$el})
|
||||
this.$el.trigger(e,this)
|
||||
if(e.isDefaultPrevented())
|
||||
return
|
||||
if(e.isDefaultPrevented())return
|
||||
this.$container=$('<div />').addClass('control-popover')
|
||||
if(this.options.containerClass)
|
||||
this.$container.addClass(this.options.containerClass)
|
||||
if(this.options.useAnimation)
|
||||
this.$container.addClass('fade')
|
||||
if(this.options.containerClass){this.$container.addClass(this.options.containerClass)}
|
||||
if(this.options.useAnimation){this.$container.addClass('fade')}
|
||||
var $content=$('<div />').html(this.getContent())
|
||||
this.$container.append($content)
|
||||
if(this.options.width)
|
||||
this.$container.width(this.options.width)
|
||||
if(this.options.width){this.$container.width(this.options.width)}
|
||||
if(this.options.modal){this.$overlay=$('<div />').addClass('popover-overlay')
|
||||
$(document.body).append(this.$overlay)
|
||||
if(this.options.highlightModalTarget){this.$el.addClass('popover-highlight')
|
||||
this.$el.blur()}}else{this.$overlay=false}
|
||||
if(this.options.container)
|
||||
$(this.options.container).append(this.$container)
|
||||
else
|
||||
$(document.body).append(this.$container)
|
||||
this.$el.blur()}}
|
||||
else{this.$overlay=false}
|
||||
if(this.options.container){$(this.options.container).append(this.$container)}
|
||||
else{$(document.body).append(this.$container)}
|
||||
this.reposition()
|
||||
this.$container.addClass('in')
|
||||
if(this.$overlay)this.$overlay.addClass('in')
|
||||
@ -3445,7 +3440,10 @@ Popover.prototype.reposition=function(){var
|
||||
placement=this.calcPlacement(),position=this.calcPosition(placement)
|
||||
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)}
|
||||
Popover.prototype.getContent=function(){return typeof this.options.content=='function'?this.options.content.call(this.$el[0],this):this.options.content}
|
||||
Popover.prototype.getContent=function(){var content=this.options.content
|
||||
if(typeof content=='function'){return content.call(this.$el[0],this)}
|
||||
if(content.charAt(0)==='#'){return $(content).html()}
|
||||
return this.options.content}
|
||||
Popover.prototype.calcDimensions=function(){var
|
||||
documentWidth=$(document).width(),documentHeight=$(document).height(),targetOffset=this.$el.offset(),targetWidth=this.$el.outerWidth(),targetHeight=this.$el.outerHeight()
|
||||
return{containerWidth:this.$container.outerWidth()+this.arrowSize,containerHeight:this.$container.outerHeight()+this.arrowSize,targetOffset:targetOffset,targetHeight:targetHeight,targetWidth:targetWidth,spaceLeft:targetOffset.left,spaceRight:documentWidth-(targetWidth+targetOffset.left),spaceTop:targetOffset.top,spaceBottom:documentHeight-(targetHeight+targetOffset.top),spaceHorizontalBottom:documentHeight-targetOffset.top,spaceVerticalRight:documentWidth-targetOffset.left,documentWidth:documentWidth}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user