Permalink
Browse files

fixed positions bugs,replace async loading animation to gif img,add e…

…scape key handler to close the pop
  • Loading branch information...
1 parent 07bc13b commit 05cc729a2cf803e0b0261cd7d91bd827b66462e3 @sandywalker committed Oct 22, 2014
View
@@ -327,8 +327,8 @@
var
- asyncSettings = { width:260,
- height:350,
+ asyncSettings = { width:'auto',
+ height:'200',
closeable:true,
padding:false,
cache:false,
@@ -224,19 +224,15 @@
.webui-popover-inverse.left-bottom > .arrow:after {
border-left-color: #333333;
}
-.webui-popover i.glyphicon-refresh {
+.webui-popover i.icon-refresh {
display: block;
- margin-left: -15px;
- margin-top: -15px;
- width: 20px;
- height: 20px;
+ width: 30px;
+ height: 30px;
font-size: 20px;
top: 50%;
left: 50%;
position: absolute;
- -webkit-animation: rotate 1s linear 0 infinite;
- -o-animation: rotate 1s linear 0 infinite;
- animation: rotate 1s linear 0 infinite;
+ background: url(../img/loading.gif) no-repeat;
}
@-webkit-keyframes rotate {
100% {
@@ -33,7 +33,7 @@
'<div class="webui-popover-inner">'+
'<a href="#" class="close">x</a>'+
'<h3 class="webui-popover-title"></h3>'+
- '<div class="webui-popover-content"><i class="glyphicon glyphicon-refresh"></i> <p></p></div>'+
+ '<div class="webui-popover-content"><i class="icon-refresh"></i> <p>&nbsp;</p></div>'+
'</div>'+
'</div>'
};
@@ -60,6 +60,7 @@
.on('mouseenter',$.proxy(this.mouseenterHandler,this))
.on('mouseleave',$.proxy(this.mouseleaveHandler,this));
}
+ $('body').off('keyup.webui-popover').on('keyup.webui-popover',$.proxy(this.escapeHandler,this));
this._poped = false;
this._inited = true;
},
@@ -90,6 +91,29 @@
/*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 setted , 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();
+ },
+ displayContent:function(){
+ var
//element postion
elementPos = this.getElementPosition(),
//target postion
@@ -103,26 +127,9 @@
//placement
placement = 'bottom',
e = $.Event('show.' + pluginType);
-
- if (!this.options.multi){
- this.hideAll();
- }
//if (this.hasContent()){
- this.$element.trigger(e);
+ this.$element.trigger(e);
//}
- // use cache by default, if not cache setted , reInit the contents
- if (!this.options.cache||!this._poped){
- if (!this.isAsync()){
- this.setContent(this.getContent());
- }else{
- this.setContentASync(this.options.content);
- }
- this.setTitle(this.getTitle());
- if (!this.options.closeable){
- $target.find('.close').off('click').remove();
- }
- $target.show();
- }
if (this.options.width!=='auto') {$target.width(this.options.width);}
if (this.options.height!=='auto'){$targetContent.height(this.options.height);}
@@ -146,8 +153,8 @@
if (this.options.style){
this.$target.addClass(pluginClass+'-'+this.options.style);
}
+
if (!this.options.padding){
- //fixed position offset bug
$targetContent.css('height',$targetContent.outerHeight());
this.$target.addClass('webui-no-padding');
}
@@ -163,7 +170,13 @@
}
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){
@@ -228,6 +241,9 @@
that.content = data;
}
that.setContent(that.content);
+ var $targetContent = that.getContentElement();
+ $targetContent.removeAttr('style');
+ that.displayContent();
}
});
},
@@ -244,6 +260,13 @@
self.hide();
},self.options.delay);
},
+ escapeHandler:function(e){
+ if (e.keyCode===27){
+ this.hide();
+ this.hideAll();
+ }
+ },
+
//reset and init the target events;
initTargetEvents:function(){
if (this.options.trigger!=='click'){
@@ -274,7 +297,6 @@
}else{
placement = this.$element.data('placement')||this.options.placement;
}
- console.log(pageY,scrollTop,clientHeight);
if (placement==='auto'){
if (pageX<clientWidth/3){
@@ -320,47 +342,49 @@
elementH = this.$element.outerHeight(),
position={},
arrowOffset=null,
- arrowSize = this.options.arrow?0:0;
+ arrowSize = this.options.arrow?20:0,
+ fixedW = elementW<arrowSize?arrowSize:0;
+ fixedH = elementH<arrowSize?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-arrowSize, left: pos.left + pos.width / 2 - targetWidth / 2};
+ 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 -arrowSize};
+ 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 -arrowSize, left: pos.left};
- arrowOffset = {left: elementW /2 };
+ position = {top: pos.top - targetHeight, left: pos.left-fixedW};
+ arrowOffset = {left: elementW/2 + fixedW};
break;
case 'top-left':
- position = {top: pos.top - targetHeight -arrowSize, left: pos.left -targetWidth +pos.width};
- arrowOffset = {left: targetWidth - elementW /2 };
+ 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};
- arrowOffset = {left: elementW /2};
+ 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};
arrowOffset = {left: targetWidth- elementW /2};
break;
case 'right-top':
- position = {top: pos.top -targetHeight + pos.height, left: pos.left + pos.width};
- arrowOffset = {top: targetHeight - elementH/2};
+ 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 , left: pos.left + pos.width};
- arrowOffset = {top: elementH /2 };
+ 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, left: pos.left - targetWidth};
- arrowOffset = {top: targetHeight - elementH/2};
+ 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};
@@ -1 +1 @@
-.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:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(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:700;line-height:20px;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20);text-decoration:none}.webui-popover-inner .close:hover,.webui-popover-inner .close:focus{opacity:.5;filter:alpha(opacity=50)}.webui-popover-title{padding:8px 14px;margin:0;font-size:14px;font-weight:400;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:#333;color:#eee}.webui-popover-inverse .webui-popover-title{background:#3b3b3b;border-bottom:none;color:#eee}.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:#999;border-top-color:rgba(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:#fff;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:#999;border-right-color:rgba(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:#fff}.webui-popover.bottom>.arrow,.webui-popover.bottom-right>.arrow,.webui-popover.bottom-left>.arrow{top:-11px;left:50%;margin-left:-11px;border-bottom-color:#999;border-bottom-color:rgba(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:#fff;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:#999;border-left-color:rgba(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:#fff;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:#333}.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:#333}.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:#333}.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:#333}.webui-popover i.glyphicon-refresh{display:block;margin-left:-15px;margin-top:-15px;width:20px;height:20px;font-size:20px;top:50%;left:50%;position:absolute;-webkit-animation:rotate 1s linear 0 infinite;-o-animation:rotate 1s linear 0 infinite;animation:rotate 1s linear 0 infinite}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg)}}@keyframes rotate{100%{transform:rotate(360deg)}}
+.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:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(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:700;line-height:20px;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20);text-decoration:none}.webui-popover-inner .close:hover,.webui-popover-inner .close:focus{opacity:.5;filter:alpha(opacity=50)}.webui-popover-title{padding:8px 14px;margin:0;font-size:14px;font-weight:400;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:#333;color:#eee}.webui-popover-inverse .webui-popover-title{background:#3b3b3b;border-bottom:none;color:#eee}.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:#999;border-top-color:rgba(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:#fff;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:#999;border-right-color:rgba(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:#fff}.webui-popover.bottom>.arrow,.webui-popover.bottom-right>.arrow,.webui-popover.bottom-left>.arrow{top:-11px;left:50%;margin-left:-11px;border-bottom-color:#999;border-bottom-color:rgba(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:#fff;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:#999;border-left-color:rgba(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:#fff;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:#333}.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:#333}.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:#333}.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:#333}.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%{transform:rotate(360deg)}}
Oops, something went wrong.

0 comments on commit 05cc729

Please sign in to comment.