js: Remove dead or unused JS
Remove all the commented out stuff, which is clearly not coming back, along with code that was applied to elements with the ID of 'toggle-definitions', none of which exist. This in turns allows us to remove all the webuiPopover stuff since that only applied to elements with the 'gloss' class, which the 'toggle-definitions' code was creating. Change-Id: Ie0780e41194e5add90c8ea6f63dc496acbb0b85a Signed-off-by: Stephen Finucane <sfinucan@redhat.com>
This commit is contained in:
Stephen Finucane
parent
be07b385a3
commit
9e64a25ec3
|
|
@ -10,9 +10,6 @@
|
||||||
<!-- Docs JS -->
|
<!-- Docs JS -->
|
||||||
<script type="text/javascript" src="{{pathto('_static/js/docs.js', 1)}}"></script>
|
<script type="text/javascript" src="{{pathto('_static/js/docs.js', 1)}}"></script>
|
||||||
|
|
||||||
<!-- Popovers -->
|
|
||||||
<script type="text/javascript" src="{{pathto('_static/js/webui-popover.js', 1)}}"></script>
|
|
||||||
|
|
||||||
<!-- standard sphinx include libraries, which allow search highlighting -->
|
<!-- standard sphinx include libraries, which allow search highlighting -->
|
||||||
<script type="text/javascript" src="{{pathto('_static/underscore.js', 1)}}"></script>
|
<script type="text/javascript" src="{{pathto('_static/underscore.js', 1)}}"></script>
|
||||||
<script type="text/javascript" src="{{pathto('_static/doctools.js', 1)}}"></script>
|
<script type="text/javascript" src="{{pathto('_static/doctools.js', 1)}}"></script>
|
||||||
|
|
|
||||||
|
|
@ -611,22 +611,6 @@ a.docs-sidebar-section-title:hover {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis; }
|
text-overflow: ellipsis; }
|
||||||
|
|
||||||
/* TODO(stephenfin): '.docs-has-sub' is referenced from docs.js, so we need to
|
|
||||||
* clean that up before we can remove it here */
|
|
||||||
li.docs-has-sub > a {
|
|
||||||
font-weight: 700; }
|
|
||||||
|
|
||||||
li.docs-has-sub:before {
|
|
||||||
content: "+";
|
|
||||||
padding: 0 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
background: #C2CAD8;
|
|
||||||
border-radius: 4px; }
|
|
||||||
|
|
||||||
li.docs-has-sub.open:before {
|
|
||||||
content: "-";
|
|
||||||
padding: 0 6px; }
|
|
||||||
|
|
||||||
.docs-actions {
|
.docs-actions {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin-top: 35px; }
|
margin-top: 35px; }
|
||||||
|
|
@ -709,26 +693,6 @@ a.headerlink {
|
||||||
a.headerlink:hover {
|
a.headerlink:hover {
|
||||||
color: #30739C; }
|
color: #30739C; }
|
||||||
|
|
||||||
/* TODO(stephenfin): '.gloss' is referenced from docs.js, so we need to
|
|
||||||
* clean that up before we can remove it here */
|
|
||||||
a.gloss {
|
|
||||||
background: #edf2f7;
|
|
||||||
color: #2A4E68;
|
|
||||||
padding: 2px 5px;
|
|
||||||
text-decoration: none; }
|
|
||||||
|
|
||||||
a.gloss:hover {
|
|
||||||
background: #D4DCE6; }
|
|
||||||
|
|
||||||
a.gloss:focus {
|
|
||||||
outline: none; }
|
|
||||||
|
|
||||||
a.gloss.off {
|
|
||||||
background: transparent;
|
|
||||||
padding: 0;
|
|
||||||
color: #333;
|
|
||||||
cursor: default; }
|
|
||||||
|
|
||||||
code {
|
code {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
|
|
@ -916,196 +880,6 @@ ul.pagination li a:hover {
|
||||||
background: white; }
|
background: white; }
|
||||||
/*End Pagination Overrides*/
|
/*End Pagination Overrides*/
|
||||||
|
|
||||||
/*webui Popover styles*/
|
|
||||||
.webui-popover {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1060;
|
|
||||||
display: none;
|
|
||||||
width: 276px;
|
|
||||||
min-height: 50px;
|
|
||||||
padding: 1px;
|
|
||||||
text-align: left;
|
|
||||||
white-space: normal;
|
|
||||||
background-color: #ffffff;
|
|
||||||
background-clip: padding-box;
|
|
||||||
border: 1px solid #cccccc;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }
|
|
||||||
|
|
||||||
.webui-popover.top, .webui-popover.top-left, .webui-popover.top-right {
|
|
||||||
margin-top: -10px; }
|
|
||||||
|
|
||||||
.webui-popover.right, .webui-popover.right-top, .webui-popover.right-bottom {
|
|
||||||
margin-left: 10px; }
|
|
||||||
|
|
||||||
.webui-popover.bottom, .webui-popover.bottom-left, .webui-popover.bottom-right {
|
|
||||||
margin-top: 10px; }
|
|
||||||
|
|
||||||
.webui-popover.left, .webui-popover.left-top, .webui-popover.left-bottom {
|
|
||||||
margin-left: -10px; }
|
|
||||||
|
|
||||||
.webui-popover-inner .close {
|
|
||||||
font-family: arial;
|
|
||||||
margin: 5px 10px 0 0;
|
|
||||||
float: right;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 20px;
|
|
||||||
color: #000000;
|
|
||||||
text-shadow: 0 1px 0 #fff;
|
|
||||||
opacity: 0.2;
|
|
||||||
filter: alpha(opacity=20);
|
|
||||||
text-decoration: none; }
|
|
||||||
|
|
||||||
.webui-popover-inner .close:hover, .webui-popover-inner .close:focus {
|
|
||||||
opacity: 0.5;
|
|
||||||
filter: alpha(opacity=50); }
|
|
||||||
|
|
||||||
.webui-popover-title {
|
|
||||||
padding: 8px 14px;
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: normal;
|
|
||||||
line-height: 18px;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
border-bottom: 1px solid #ebebeb;
|
|
||||||
border-radius: 5px 5px 0 0; }
|
|
||||||
|
|
||||||
.webui-popover-content {
|
|
||||||
padding: 9px 14px;
|
|
||||||
overflow: auto; }
|
|
||||||
|
|
||||||
.webui-popover-inverse {
|
|
||||||
background-color: #333333;
|
|
||||||
color: #eeeeee; }
|
|
||||||
|
|
||||||
.webui-popover-inverse .webui-popover-title {
|
|
||||||
background: #3b3b3b;
|
|
||||||
border-bottom: none;
|
|
||||||
color: #eeeeee; }
|
|
||||||
|
|
||||||
.webui-no-padding .webui-popover-content {
|
|
||||||
padding: 0; }
|
|
||||||
|
|
||||||
.webui-no-padding .list-group-item {
|
|
||||||
border-right: none;
|
|
||||||
border-left: none; }
|
|
||||||
|
|
||||||
.webui-no-padding .list-group-item:first-child {
|
|
||||||
border-top: 0; }
|
|
||||||
|
|
||||||
.webui-no-padding .list-group-item:last-child {
|
|
||||||
border-bottom: 0; }
|
|
||||||
|
|
||||||
.webui-popover > .arrow, .webui-popover > .arrow:after {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-color: transparent;
|
|
||||||
border-style: solid; }
|
|
||||||
|
|
||||||
.webui-popover > .arrow {
|
|
||||||
border-width: 11px; }
|
|
||||||
|
|
||||||
.webui-popover > .arrow:after {
|
|
||||||
border-width: 10px;
|
|
||||||
content: ""; }
|
|
||||||
|
|
||||||
.webui-popover.top > .arrow, .webui-popover.top-right > .arrow, .webui-popover.top-left > .arrow {
|
|
||||||
bottom: -11px;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -11px;
|
|
||||||
border-top-color: #999999;
|
|
||||||
border-top-color: rgba(0, 0, 0, 0.25);
|
|
||||||
border-bottom-width: 0; }
|
|
||||||
|
|
||||||
.webui-popover.top > .arrow:after, .webui-popover.top-right > .arrow:after, .webui-popover.top-left > .arrow:after {
|
|
||||||
content: " ";
|
|
||||||
bottom: 1px;
|
|
||||||
margin-left: -10px;
|
|
||||||
border-top-color: #ffffff;
|
|
||||||
border-bottom-width: 0; }
|
|
||||||
|
|
||||||
.webui-popover.right > .arrow, .webui-popover.right-top > .arrow, .webui-popover.right-bottom > .arrow {
|
|
||||||
top: 50%;
|
|
||||||
left: -11px;
|
|
||||||
margin-top: -11px;
|
|
||||||
border-left-width: 0;
|
|
||||||
border-right-color: #999999;
|
|
||||||
border-right-color: rgba(0, 0, 0, 0.25); }
|
|
||||||
|
|
||||||
.webui-popover.right > .arrow:after, .webui-popover.right-top > .arrow:after, .webui-popover.right-bottom > .arrow:after {
|
|
||||||
content: " ";
|
|
||||||
left: 1px;
|
|
||||||
bottom: -10px;
|
|
||||||
border-left-width: 0;
|
|
||||||
border-right-color: #ffffff; }
|
|
||||||
|
|
||||||
.webui-popover.bottom > .arrow, .webui-popover.bottom-right > .arrow, .webui-popover.bottom-left > .arrow {
|
|
||||||
top: -11px;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -11px;
|
|
||||||
border-bottom-color: #999999;
|
|
||||||
border-bottom-color: rgba(0, 0, 0, 0.25);
|
|
||||||
border-top-width: 0; }
|
|
||||||
|
|
||||||
.webui-popover.bottom > .arrow:after, .webui-popover.bottom-right > .arrow:after, .webui-popover.bottom-left > .arrow:after {
|
|
||||||
content: " ";
|
|
||||||
top: 1px;
|
|
||||||
margin-left: -10px;
|
|
||||||
border-bottom-color: #ffffff;
|
|
||||||
border-top-width: 0; }
|
|
||||||
|
|
||||||
.webui-popover.left > .arrow, .webui-popover.left-top > .arrow, .webui-popover.left-bottom > .arrow {
|
|
||||||
top: 50%;
|
|
||||||
right: -11px;
|
|
||||||
margin-top: -11px;
|
|
||||||
border-right-width: 0;
|
|
||||||
border-left-color: #999999;
|
|
||||||
border-left-color: rgba(0, 0, 0, 0.25); }
|
|
||||||
|
|
||||||
.webui-popover.left > .arrow:after, .webui-popover.left-top > .arrow:after, .webui-popover.left-bottom > .arrow:after {
|
|
||||||
content: " ";
|
|
||||||
right: 1px;
|
|
||||||
border-right-width: 0;
|
|
||||||
border-left-color: #ffffff;
|
|
||||||
bottom: -10px; }
|
|
||||||
|
|
||||||
.webui-popover-inverse.top > .arrow, .webui-popover-inverse.top-left > .arrow, .webui-popover-inverse.top-right > .arrow, .webui-popover-inverse.top > .arrow:after, .webui-popover-inverse.top-left > .arrow:after, .webui-popover-inverse.top-right > .arrow:after {
|
|
||||||
border-top-color: #333333; }
|
|
||||||
|
|
||||||
.webui-popover-inverse.right > .arrow, .webui-popover-inverse.right-top > .arrow, .webui-popover-inverse.right-bottom > .arrow, .webui-popover-inverse.right > .arrow:after, .webui-popover-inverse.right-top > .arrow:after, .webui-popover-inverse.right-bottom > .arrow:after {
|
|
||||||
border-right-color: #333333; }
|
|
||||||
|
|
||||||
.webui-popover-inverse.bottom > .arrow, .webui-popover-inverse.bottom-left > .arrow, .webui-popover-inverse.bottom-right > .arrow, .webui-popover-inverse.bottom > .arrow:after, .webui-popover-inverse.bottom-left > .arrow:after, .webui-popover-inverse.bottom-right > .arrow:after {
|
|
||||||
border-bottom-color: #333333; }
|
|
||||||
|
|
||||||
.webui-popover-inverse.left > .arrow, .webui-popover-inverse.left-top > .arrow, .webui-popover-inverse.left-bottom > .arrow, .webui-popover-inverse.left > .arrow:after, .webui-popover-inverse.left-top > .arrow:after, .webui-popover-inverse.left-bottom > .arrow:after {
|
|
||||||
border-left-color: #333333; }
|
|
||||||
|
|
||||||
.webui-popover i.icon-refresh {
|
|
||||||
display: block;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
font-size: 20px;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
position: absolute;
|
|
||||||
background: url(../img/loading.gif) no-repeat; }
|
|
||||||
|
|
||||||
@-webkit-keyframes rotate {
|
|
||||||
100% {
|
|
||||||
-webkit-transform: rotate(360deg); } }
|
|
||||||
|
|
||||||
@keyframes rotate {
|
|
||||||
100% {
|
|
||||||
-webkit-transform: rotate(360deg);
|
|
||||||
transform: rotate(360deg); } }
|
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
border: 1px solid #CCCCCC;
|
border: 1px solid #CCCCCC;
|
||||||
padding: 20px 17px 20px 17px;
|
padding: 20px 17px 20px 17px;
|
||||||
|
|
|
||||||
|
|
@ -2,81 +2,12 @@
|
||||||
$(".docs-sidebar-section-title").click(function () {
|
$(".docs-sidebar-section-title").click(function () {
|
||||||
$('.docs-sidebar-section').not(this).closest('.docs-sidebar-section').removeClass('active');
|
$('.docs-sidebar-section').not(this).closest('.docs-sidebar-section').removeClass('active');
|
||||||
$(this).closest('.docs-sidebar-section').toggleClass('active');
|
$(this).closest('.docs-sidebar-section').toggleClass('active');
|
||||||
// Bug #1422454
|
|
||||||
// Commenting out next line, the default behavior which was preventing links
|
|
||||||
// from working.
|
|
||||||
// event.preventDefault();
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Bug #1422454
|
|
||||||
The toggle functions below enable the expand/collapse, but for now
|
|
||||||
there's no easy way to get deeper links from other guides. So,
|
|
||||||
commenting both toggle functions out.
|
|
||||||
// Toggle 1st sub-sections
|
|
||||||
$(".docs-sidebar-section ol lh").click(function () {
|
|
||||||
$('.docs-sidebar-section ol').not(this).closest('.docs-sidebar-section ol').removeClass('active');
|
|
||||||
$(this).closest('.docs-sidebar-section ol').toggleClass('active');
|
|
||||||
if ($('.docs-has-sub').hasClass('active')) {
|
|
||||||
$(this).closest('.docs-sidebar-section ol li').addClass('open');
|
|
||||||
}
|
|
||||||
event.preventDefault();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Toggle 2nd sub-sections
|
|
||||||
$(".docs-sidebar-section ol > li > a").click(function () {
|
|
||||||
$('.docs-sidebar-section ol li').not(this).removeClass('active').removeClass('open');
|
|
||||||
$(this).closest('.docs-sidebar-section ol li').toggleClass('active');
|
|
||||||
if ($('.docs-has-sub').hasClass('active')) {
|
|
||||||
$(this).closest('.docs-sidebar-section ol li').addClass('open');
|
|
||||||
}
|
|
||||||
event.preventDefault();
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Bug #1417291
|
|
||||||
The rule below creates a shaded plus sign next to
|
|
||||||
a numbered sublist of a bulleted list.
|
|
||||||
It's probably there to implement expand/collapse of
|
|
||||||
list items, but unfortunately it affects also those
|
|
||||||
lists where expand/collapse is not intended.
|
|
||||||
|
|
||||||
I am commenting it out to fix this bug. If it causes
|
|
||||||
problems elsewhere, they have to be fixed elsewhere. */
|
|
||||||
|
|
||||||
// $('ol > li:has(ul)').addClass('docs-has-sub');
|
|
||||||
|
|
||||||
// webui popover
|
|
||||||
$(document).ready(function() {
|
|
||||||
function checkWidth() {
|
|
||||||
var windowSize = $(window).width();
|
|
||||||
|
|
||||||
if (windowSize <= 767) {
|
|
||||||
$('.gloss').webuiPopover({placement:'auto',trigger:'click'});
|
|
||||||
}
|
|
||||||
else if (windowSize >= 768) {
|
|
||||||
$('.gloss').webuiPopover({placement:'auto',trigger:'hover'});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Execute on load
|
|
||||||
checkWidth();
|
|
||||||
// Bind event listener
|
|
||||||
$(window).resize(checkWidth);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Bootstrap stuff
|
// Bootstrap stuff
|
||||||
$('.docs-actions i').tooltip();
|
$('.docs-actions i').tooltip();
|
||||||
$('.docs-sidebar-home').tooltip();
|
$('.docs-sidebar-home').tooltip();
|
||||||
|
|
||||||
// Hide/Toggle definitions
|
|
||||||
$("#toggle-definitions").click(function () {
|
|
||||||
$(this).toggleClass('docs-info-off');
|
|
||||||
if ($('.gloss').hasClass('on')) {
|
|
||||||
$('.gloss').removeClass('on').addClass('off').webuiPopover('destroy');
|
|
||||||
} else if ($('.gloss').hasClass('off')) {
|
|
||||||
$('.gloss').removeClass('off').addClass('on').webuiPopover();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* BB 150310
|
/* BB 150310
|
||||||
openstackdocstheme provides three types of admonitions, important, note
|
openstackdocstheme provides three types of admonitions, important, note
|
||||||
and warning. We decorate their title paragraphs with Font Awesome icons
|
and warning. We decorate their title paragraphs with Font Awesome icons
|
||||||
|
|
|
||||||
|
|
@ -1,434 +0,0 @@
|
||||||
;(function ( $, window, document, undefined ) {
|
|
||||||
|
|
||||||
// Create the defaults once
|
|
||||||
var pluginName = 'webuiPopover';
|
|
||||||
var pluginClass = 'webui-popover';
|
|
||||||
var pluginType = 'webui.popover';
|
|
||||||
var defaults = {
|
|
||||||
placement:'auto',
|
|
||||||
width:'auto',
|
|
||||||
height:'auto',
|
|
||||||
trigger:'click',
|
|
||||||
style:'',
|
|
||||||
delay:300,
|
|
||||||
cache:true,
|
|
||||||
multi:false,
|
|
||||||
arrow:true,
|
|
||||||
title:'',
|
|
||||||
content:'',
|
|
||||||
closeable:false,
|
|
||||||
padding:true,
|
|
||||||
url:'',
|
|
||||||
type:'html',
|
|
||||||
template:'<div class="webui-popover">'+
|
|
||||||
'<div class="arrow"></div>'+
|
|
||||||
'<div class="webui-popover-inner">'+
|
|
||||||
'<a href="#" class="close">x</a>'+
|
|
||||||
'<h3 class="webui-popover-title"></h3>'+
|
|
||||||
'<div class="webui-popover-content"><i class="icon-refresh"></i> <p> </p></div>'+
|
|
||||||
'</div>'+
|
|
||||||
'</div>'
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
// The actual plugin constructor
|
|
||||||
function WebuiPopover ( element, options ) {
|
|
||||||
this.$element = $(element);
|
|
||||||
this.options = $.extend( {}, defaults, options );
|
|
||||||
this._defaults = defaults;
|
|
||||||
this._name = pluginName;
|
|
||||||
this.init();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
WebuiPopover.prototype = {
|
|
||||||
//init webui popover
|
|
||||||
init: function () {
|
|
||||||
//init the event handlers
|
|
||||||
if (this.options.trigger==='click'){
|
|
||||||
this.$element.off('click').on('click',$.proxy(this.toggle,this));
|
|
||||||
}else{
|
|
||||||
this.$element.off('mouseenter mouseleave')
|
|
||||||
.on('mouseenter',$.proxy(this.mouseenterHandler,this))
|
|
||||||
.on('mouseleave',$.proxy(this.mouseleaveHandler,this));
|
|
||||||
}
|
|
||||||
this._poped = false;
|
|
||||||
this._inited = true;
|
|
||||||
},
|
|
||||||
/* api methods and actions */
|
|
||||||
destroy:function(){
|
|
||||||
this.hide();
|
|
||||||
this.$element.data('plugin_'+pluginName,null);
|
|
||||||
this.$element.off();
|
|
||||||
if (this.$target){
|
|
||||||
this.$target.remove();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hide:function(event){
|
|
||||||
if (event){
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
}
|
|
||||||
var e = $.Event('hide.' + pluginType);
|
|
||||||
this.$element.trigger(e);
|
|
||||||
if (this.$target){this.$target.removeClass('in').hide();}
|
|
||||||
this.$element.trigger('hidden.'+pluginType);
|
|
||||||
},
|
|
||||||
toggle:function(e){
|
|
||||||
if (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
}
|
|
||||||
this[this.getTarget().hasClass('in') ? 'hide' : 'show']();
|
|
||||||
},
|
|
||||||
hideAll:function(){
|
|
||||||
$('div.webui-popover').not('.webui-popover-fixed').removeClass('in').hide();
|
|
||||||
},
|
|
||||||
/*core method ,show popover */
|
|
||||||
show:function(){
|
|
||||||
var
|
|
||||||
$target = this.getTarget().removeClass().addClass(pluginClass);
|
|
||||||
if (!this.options.multi){
|
|
||||||
this.hideAll();
|
|
||||||
}
|
|
||||||
// use cache by default, if not cache set, reInit the contents
|
|
||||||
if (!this.options.cache||!this._poped){
|
|
||||||
this.setTitle(this.getTitle());
|
|
||||||
if (!this.options.closeable){
|
|
||||||
$target.find('.close').off('click').remove();
|
|
||||||
}
|
|
||||||
if (!this.isAsync()){
|
|
||||||
this.setContent(this.getContent());
|
|
||||||
}else{
|
|
||||||
this.setContentASync(this.options.content);
|
|
||||||
this.displayContent();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
$target.show();
|
|
||||||
}
|
|
||||||
this.displayContent();
|
|
||||||
this.bindBodyEvents();
|
|
||||||
},
|
|
||||||
displayContent:function(){
|
|
||||||
var
|
|
||||||
//element position
|
|
||||||
elementPos = this.getElementPosition(),
|
|
||||||
//target position
|
|
||||||
$target = this.getTarget().removeClass().addClass(pluginClass),
|
|
||||||
//target content
|
|
||||||
$targetContent = this.getContentElement(),
|
|
||||||
//target Width
|
|
||||||
targetWidth = $target[0].offsetWidth,
|
|
||||||
//target Height
|
|
||||||
targetHeight = $target[0].offsetHeight,
|
|
||||||
//placement
|
|
||||||
placement = 'bottom',
|
|
||||||
e = $.Event('show.' + pluginType);
|
|
||||||
//if (this.hasContent()){
|
|
||||||
this.$element.trigger(e);
|
|
||||||
//}
|
|
||||||
if (this.options.width!=='auto') {$target.width(this.options.width);}
|
|
||||||
if (this.options.height!=='auto'){$targetContent.height(this.options.height);}
|
|
||||||
|
|
||||||
//init the popover and insert into the document body
|
|
||||||
if (!this.options.arrow){
|
|
||||||
$target.find('.arrow').remove();
|
|
||||||
}
|
|
||||||
$target.remove().css({ top: -1000, left: -1000, display: 'block' }).appendTo(document.body);
|
|
||||||
targetWidth = $target[0].offsetWidth;
|
|
||||||
targetHeight = $target[0].offsetHeight;
|
|
||||||
placement = this.getPlacement(elementPos,targetHeight);
|
|
||||||
this.initTargetEvents();
|
|
||||||
var postionInfo = this.getTargetPositin(elementPos,placement,targetWidth,targetHeight);
|
|
||||||
this.$target.css(postionInfo.position).addClass(placement).addClass('in');
|
|
||||||
|
|
||||||
if (this.options.type==='iframe'){
|
|
||||||
var $iframe = $target.find('iframe');
|
|
||||||
$iframe.width($target.width()).height($iframe.parent().height());
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.options.style){
|
|
||||||
this.$target.addClass(pluginClass+'-'+this.options.style);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.options.padding){
|
|
||||||
$targetContent.css('height',$targetContent.outerHeight());
|
|
||||||
this.$target.addClass('webui-no-padding');
|
|
||||||
}
|
|
||||||
if (!this.options.arrow){
|
|
||||||
this.$target.css({'margin':0});
|
|
||||||
}
|
|
||||||
if (this.options.arrow){
|
|
||||||
var $arrow = this.$target.find('.arrow');
|
|
||||||
$arrow.removeAttr('style');
|
|
||||||
if (postionInfo.arrowOffset){
|
|
||||||
$arrow.css(postionInfo.arrowOffset);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this._poped = true;
|
|
||||||
this.$element.trigger('shown.'+pluginType);
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
isTargetLoaded:function(){
|
|
||||||
return this.getTarget().find('i.glyphicon-refresh').length===0;
|
|
||||||
},
|
|
||||||
|
|
||||||
/*getter setters */
|
|
||||||
getTarget:function(){
|
|
||||||
if (!this.$target){
|
|
||||||
this.$target = $(this.options.template);
|
|
||||||
}
|
|
||||||
return this.$target;
|
|
||||||
},
|
|
||||||
getTitleElement:function(){
|
|
||||||
return this.getTarget().find('.'+pluginClass+'-title');
|
|
||||||
},
|
|
||||||
getContentElement:function(){
|
|
||||||
return this.getTarget().find('.'+pluginClass+'-content');
|
|
||||||
},
|
|
||||||
getTitle:function(){
|
|
||||||
return this.options.title||this.$element.attr('data-title')||this.$element.attr('title');
|
|
||||||
},
|
|
||||||
setTitle:function(title){
|
|
||||||
var $titleEl = this.getTitleElement();
|
|
||||||
if (title){
|
|
||||||
$titleEl.html(title);
|
|
||||||
}else{
|
|
||||||
$titleEl.remove();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hasContent:function () {
|
|
||||||
return this.getContent();
|
|
||||||
},
|
|
||||||
getContent:function(){
|
|
||||||
if (this.options.url){
|
|
||||||
if (this.options.type==='iframe'){
|
|
||||||
this.content = $('<iframe frameborder="0"></iframe>').attr('src',this.options.url);
|
|
||||||
}
|
|
||||||
}else if (!this.content){
|
|
||||||
var content='';
|
|
||||||
if ($.isFunction(this.options.content)){
|
|
||||||
content = this.options.content.apply(this.$element[0],arguments);
|
|
||||||
}else{
|
|
||||||
content = this.options.content;
|
|
||||||
}
|
|
||||||
this.content = this.$element.attr('data-content')||content;
|
|
||||||
}
|
|
||||||
return this.content;
|
|
||||||
},
|
|
||||||
setContent:function(content){
|
|
||||||
var $target = this.getTarget();
|
|
||||||
this.getContentElement().html(content);
|
|
||||||
this.$target = $target;
|
|
||||||
},
|
|
||||||
isAsync:function(){
|
|
||||||
return this.options.type==='async';
|
|
||||||
},
|
|
||||||
setContentASync:function(content){
|
|
||||||
var that = this;
|
|
||||||
$.ajax({
|
|
||||||
url:this.options.url,
|
|
||||||
type:'GET',
|
|
||||||
cache:this.options.cache,
|
|
||||||
success:function(data){
|
|
||||||
if (content&&$.isFunction(content)){
|
|
||||||
that.content = content.apply(that.$element[0],[data]);
|
|
||||||
}else{
|
|
||||||
that.content = data;
|
|
||||||
}
|
|
||||||
that.setContent(that.content);
|
|
||||||
var $targetContent = that.getContentElement();
|
|
||||||
$targetContent.removeAttr('style');
|
|
||||||
that.displayContent();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
bindBodyEvents:function(){
|
|
||||||
$('body').off('keyup.webui-popover').on('keyup.webui-popover',$.proxy(this.escapeHandler,this));
|
|
||||||
$('body').off('click.webui-popover').on('click.webui-popover',$.proxy(this.bodyClickHandler,this));
|
|
||||||
},
|
|
||||||
|
|
||||||
/* event handlers */
|
|
||||||
mouseenterHandler:function(){
|
|
||||||
var self = this;
|
|
||||||
if (self._timeout){clearTimeout(self._timeout);}
|
|
||||||
if (!self.getTarget().is(':visible')){self.show();}
|
|
||||||
},
|
|
||||||
mouseleaveHandler:function(){
|
|
||||||
var self = this;
|
|
||||||
//key point, set the _timeout then use clearTimeout when mouse leave
|
|
||||||
self._timeout = setTimeout(function(){
|
|
||||||
self.hide();
|
|
||||||
},self.options.delay);
|
|
||||||
},
|
|
||||||
escapeHandler:function(e){
|
|
||||||
if (e.keyCode===27){
|
|
||||||
this.hideAll();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
bodyClickHandler:function(){
|
|
||||||
this.hideAll();
|
|
||||||
},
|
|
||||||
|
|
||||||
targetClickHandler:function(e){
|
|
||||||
e.stopPropagation();
|
|
||||||
},
|
|
||||||
|
|
||||||
//reset and init the target events;
|
|
||||||
initTargetEvents:function(){
|
|
||||||
if (this.options.trigger!=='click'){
|
|
||||||
this.$target.off('mouseenter mouseleave')
|
|
||||||
.on('mouseenter',$.proxy(this.mouseenterHandler,this))
|
|
||||||
.on('mouseleave',$.proxy(this.mouseleaveHandler,this));
|
|
||||||
}
|
|
||||||
this.$target.find('.close').off('click').on('click', $.proxy(this.hide,this));
|
|
||||||
this.$target.off('click.webui-popover').on('click.webui-popover',$.proxy(this.targetClickHandler,this));
|
|
||||||
},
|
|
||||||
/* utils methods */
|
|
||||||
//caculate placement of the popover
|
|
||||||
getPlacement:function(pos,targetHeight){
|
|
||||||
var
|
|
||||||
placement,
|
|
||||||
de = document.documentElement,
|
|
||||||
db = document.body,
|
|
||||||
clientWidth = de.clientWidth,
|
|
||||||
clientHeight = de.clientHeight,
|
|
||||||
scrollTop = Math.max(db.scrollTop,de.scrollTop),
|
|
||||||
scrollLeft = Math.max(db.scrollLeft,de.scrollLeft),
|
|
||||||
pageX = Math.max(0,pos.left - scrollLeft),
|
|
||||||
pageY = Math.max(0,pos.top - scrollTop),
|
|
||||||
arrowSize = 20;
|
|
||||||
|
|
||||||
//if placement equals auto，caculate the placement by element information;
|
|
||||||
if (typeof(this.options.placement)==='function'){
|
|
||||||
placement = this.options.placement.call(this, this.getTarget()[0], this.$element[0]);
|
|
||||||
}else{
|
|
||||||
placement = this.$element.data('placement')||this.options.placement;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (placement==='auto'){
|
|
||||||
if (pageX<clientWidth/3){
|
|
||||||
if (pageY<clientHeight/3){
|
|
||||||
placement = 'bottom-right';
|
|
||||||
}else if (pageY<clientHeight*2/3){
|
|
||||||
placement = 'right';
|
|
||||||
}else{
|
|
||||||
placement = 'top-right';
|
|
||||||
}
|
|
||||||
//placement= pageY>targetHeight+arrowSize?'top-right':'bottom-right';
|
|
||||||
}else if (pageX<clientWidth*2/3){
|
|
||||||
if (pageY<clientHeight/3){
|
|
||||||
placement = 'bottom';
|
|
||||||
}else if (pageY<clientHeight*2/3){
|
|
||||||
placement = 'bottom';
|
|
||||||
}else{
|
|
||||||
placement = 'top';
|
|
||||||
}
|
|
||||||
}else{
|
|
||||||
placement = pageY>targetHeight+arrowSize?'top-left':'bottom-left';
|
|
||||||
if (pageY<clientHeight/3){
|
|
||||||
placement = 'bottom-left';
|
|
||||||
}else if (pageY<clientHeight*2/3){
|
|
||||||
placement = 'left';
|
|
||||||
}else{
|
|
||||||
placement = 'top-left';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return placement;
|
|
||||||
},
|
|
||||||
getElementPosition:function(){
|
|
||||||
return $.extend({},this.$element.offset(), {
|
|
||||||
width: this.$element[0].offsetWidth,
|
|
||||||
height: this.$element[0].offsetHeight
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
getTargetPositin:function(elementPos,placement,targetWidth,targetHeight){
|
|
||||||
var pos = elementPos,
|
|
||||||
elementW = this.$element.outerWidth(),
|
|
||||||
elementH = this.$element.outerHeight(),
|
|
||||||
position={},
|
|
||||||
arrowOffset=null,
|
|
||||||
arrowSize = this.options.arrow?28:0,
|
|
||||||
fixedW = elementW<arrowSize+10?arrowSize:0,
|
|
||||||
fixedH = elementH<arrowSize+10?arrowSize:0;
|
|
||||||
switch (placement) {
|
|
||||||
case 'bottom':
|
|
||||||
position = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - targetWidth / 2};
|
|
||||||
break;
|
|
||||||
case 'top':
|
|
||||||
position = {top: pos.top - targetHeight, left: pos.left + pos.width / 2 - targetWidth / 2};
|
|
||||||
break;
|
|
||||||
case 'left':
|
|
||||||
position = {top: pos.top + pos.height / 2 - targetHeight / 2, left: pos.left - targetWidth};
|
|
||||||
break;
|
|
||||||
case 'right':
|
|
||||||
position = {top: pos.top + pos.height / 2 - targetHeight / 2, left: pos.left + pos.width};
|
|
||||||
break;
|
|
||||||
case 'top-right':
|
|
||||||
position = {top: pos.top - targetHeight, left: pos.left-fixedW};
|
|
||||||
arrowOffset = {left: elementW/2 + fixedW};
|
|
||||||
break;
|
|
||||||
case 'top-left':
|
|
||||||
position = {top: pos.top - targetHeight, left: pos.left -targetWidth +pos.width + fixedW};
|
|
||||||
arrowOffset = {left: targetWidth - elementW /2 -fixedW};
|
|
||||||
break;
|
|
||||||
case 'bottom-right':
|
|
||||||
position = {top: pos.top + pos.height, left: pos.left-fixedW};
|
|
||||||
arrowOffset = {left: elementW /2+fixedW};
|
|
||||||
break;
|
|
||||||
case 'bottom-left':
|
|
||||||
position = {top: pos.top + pos.height, left: pos.left -targetWidth +pos.width+fixedW};
|
|
||||||
arrowOffset = {left: targetWidth- elementW /2 - fixedW};
|
|
||||||
break;
|
|
||||||
case 'right-top':
|
|
||||||
position = {top: pos.top -targetHeight + pos.height + fixedH, left: pos.left + pos.width};
|
|
||||||
arrowOffset = {top: targetHeight - elementH/2 -fixedH};
|
|
||||||
break;
|
|
||||||
case 'right-bottom':
|
|
||||||
position = {top: pos.top - fixedH, left: pos.left + pos.width};
|
|
||||||
arrowOffset = {top: elementH /2 +fixedH };
|
|
||||||
break;
|
|
||||||
case 'left-top':
|
|
||||||
position = {top: pos.top -targetHeight + pos.height+fixedH, left: pos.left - targetWidth};
|
|
||||||
arrowOffset = {top: targetHeight - elementH/2 - fixedH};
|
|
||||||
break;
|
|
||||||
case 'left-bottom':
|
|
||||||
position = {top: pos.top , left: pos.left -targetWidth};
|
|
||||||
arrowOffset = {top: elementH /2 };
|
|
||||||
break;
|
|
||||||
|
|
||||||
}
|
|
||||||
return {position:position,arrowOffset:arrowOffset};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
$.fn[ pluginName ] = function ( options ) {
|
|
||||||
return this.each(function() {
|
|
||||||
var webuiPopover = $.data( this, 'plugin_' + pluginName );
|
|
||||||
if (!webuiPopover) {
|
|
||||||
if (!options){
|
|
||||||
webuiPopover = new WebuiPopover( this, null);
|
|
||||||
}else if (typeof options ==='string'){
|
|
||||||
if (options!=='destroy'){
|
|
||||||
webuiPopover = new WebuiPopover( this, null );
|
|
||||||
webuiPopover[options]();
|
|
||||||
}
|
|
||||||
}else if (typeof options ==='object'){
|
|
||||||
webuiPopover = new WebuiPopover( this, options );
|
|
||||||
}
|
|
||||||
$.data( this, 'plugin_' + pluginName, webuiPopover);
|
|
||||||
}else{
|
|
||||||
if (options==='destroy'){
|
|
||||||
webuiPopover.destroy();
|
|
||||||
}else if (typeof options ==='string'){
|
|
||||||
webuiPopover[options]();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
})( jQuery, window, document );
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue