Skip to content

Commit 05cc729

Browse files
sandywalkersandywalker
committed
fixed positions bugs,replace async loading animation to gif img,add escape key handler to close the pop
1 parent 07bc13b commit 05cc729

9 files changed

+137
-98
lines changed

‎demo/index-dev.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -327,8 +327,8 @@ <h1> <i class="glyphicon glyphicon-comment"></i> WebUI Popover Dev</h1>
327327

328328

329329
var
330-
asyncSettings = { width:260,
331-
height:350,
330+
asyncSettings = { width:'auto',
331+
height:'200',
332332
closeable:true,
333333
padding:false,
334334
cache:false,

‎dist/jquery.webui-popover.css‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -224,19 +224,15 @@
224224
.webui-popover-inverse.left-bottom > .arrow:after {
225225
border-left-color: #333333;
226226
}
227-
.webui-popover i.glyphicon-refresh {
227+
.webui-popover i.icon-refresh {
228228
display: block;
229-
margin-left: -15px;
230-
margin-top: -15px;
231-
width: 20px;
232-
height: 20px;
229+
width: 30px;
230+
height: 30px;
233231
font-size: 20px;
234232
top: 50%;
235233
left: 50%;
236234
position: absolute;
237-
-webkit-animation: rotate 1s linear 0 infinite;
238-
-o-animation: rotate 1s linear 0 infinite;
239-
animation: rotate 1s linear 0 infinite;
235+
background: url(../img/loading.gif) no-repeat;
240236
}
241237
@-webkit-keyframes rotate {
242238
100% {

‎dist/jquery.webui-popover.js‎

Lines changed: 60 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
'<div class="webui-popover-inner">'+
3434
'<a href="#" class="close">x</a>'+
3535
'<h3 class="webui-popover-title"></h3>'+
36-
'<div class="webui-popover-content"><i class="glyphicon glyphicon-refresh"></i> <p></p></div>'+
36+
'<div class="webui-popover-content"><i class="icon-refresh"></i> <p>&nbsp;</p></div>'+
3737
'</div>'+
3838
'</div>'
3939
};
@@ -60,6 +60,7 @@
6060
.on('mouseenter',$.proxy(this.mouseenterHandler,this))
6161
.on('mouseleave',$.proxy(this.mouseleaveHandler,this));
6262
}
63+
$('body').off('keyup.webui-popover').on('keyup.webui-popover',$.proxy(this.escapeHandler,this));
6364
this._poped = false;
6465
this._inited = true;
6566
},
@@ -89,6 +90,29 @@
8990
},
9091
/*core method ,show popover */
9192
show:function(){
93+
var
94+
$target = this.getTarget().removeClass().addClass(pluginClass);
95+
if (!this.options.multi){
96+
this.hideAll();
97+
}
98+
// use cache by default, if not cache setted , reInit the contents
99+
if (!this.options.cache||!this._poped){
100+
this.setTitle(this.getTitle());
101+
if (!this.options.closeable){
102+
$target.find('.close').off('click').remove();
103+
}
104+
if (!this.isAsync()){
105+
this.setContent(this.getContent());
106+
}else{
107+
this.setContentASync(this.options.content);
108+
this.displayContent();
109+
return;
110+
}
111+
$target.show();
112+
}
113+
this.displayContent();
114+
},
115+
displayContent:function(){
92116
var
93117
//element postion
94118
elementPos = this.getElementPosition(),
@@ -103,26 +127,9 @@
103127
//placement
104128
placement = 'bottom',
105129
e = $.Event('show.' + pluginType);
106-
107-
if (!this.options.multi){
108-
this.hideAll();
109-
}
110130
//if (this.hasContent()){
111-
this.$element.trigger(e);
131+
this.$element.trigger(e);
112132
//}
113-
// use cache by default, if not cache setted , reInit the contents
114-
if (!this.options.cache||!this._poped){
115-
if (!this.isAsync()){
116-
this.setContent(this.getContent());
117-
}else{
118-
this.setContentASync(this.options.content);
119-
}
120-
this.setTitle(this.getTitle());
121-
if (!this.options.closeable){
122-
$target.find('.close').off('click').remove();
123-
}
124-
$target.show();
125-
}
126133
if (this.options.width!=='auto') {$target.width(this.options.width);}
127134
if (this.options.height!=='auto'){$targetContent.height(this.options.height);}
128135

@@ -146,8 +153,8 @@
146153
if (this.options.style){
147154
this.$target.addClass(pluginClass+'-'+this.options.style);
148155
}
156+
149157
if (!this.options.padding){
150-
//fixed position offset bug
151158
$targetContent.css('height',$targetContent.outerHeight());
152159
this.$target.addClass('webui-no-padding');
153160
}
@@ -163,7 +170,13 @@
163170
}
164171
this._poped = true;
165172
this.$element.trigger('shown.'+pluginType);
173+
166174
},
175+
176+
isTargetLoaded:function(){
177+
return this.getTarget().find('i.glyphicon-refresh').length===0;
178+
},
179+
167180
/*getter setters */
168181
getTarget:function(){
169182
if (!this.$target){
@@ -228,6 +241,9 @@
228241
that.content = data;
229242
}
230243
that.setContent(that.content);
244+
var $targetContent = that.getContentElement();
245+
$targetContent.removeAttr('style');
246+
that.displayContent();
231247
}
232248
});
233249
},
@@ -244,6 +260,13 @@
244260
self.hide();
245261
},self.options.delay);
246262
},
263+
escapeHandler:function(e){
264+
if (e.keyCode===27){
265+
this.hide();
266+
this.hideAll();
267+
}
268+
},
269+
247270
//reset and init the target events;
248271
initTargetEvents:function(){
249272
if (this.options.trigger!=='click'){
@@ -274,7 +297,6 @@
274297
}else{
275298
placement = this.$element.data('placement')||this.options.placement;
276299
}
277-
console.log(pageY,scrollTop,clientHeight);
278300

279301
if (placement==='auto'){
280302
if (pageX<clientWidth/3){
@@ -320,47 +342,49 @@
320342
elementH = this.$element.outerHeight(),
321343
position={},
322344
arrowOffset=null,
323-
arrowSize = this.options.arrow?0:0;
345+
arrowSize = this.options.arrow?20:0,
346+
fixedW = elementW<arrowSize?arrowSize:0;
347+
fixedH = elementH<arrowSize?arrowSize:0;
324348
switch (placement) {
325349
case 'bottom':
326350
position = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - targetWidth / 2};
327351
break;
328352
case 'top':
329-
position = {top: pos.top - targetHeight-arrowSize, left: pos.left + pos.width / 2 - targetWidth / 2};
353+
position = {top: pos.top - targetHeight, left: pos.left + pos.width / 2 - targetWidth / 2};
330354
break;
331355
case 'left':
332-
position = {top: pos.top + pos.height / 2 - targetHeight / 2, left: pos.left - targetWidth -arrowSize};
356+
position = {top: pos.top + pos.height / 2 - targetHeight / 2, left: pos.left - targetWidth};
333357
break;
334358
case 'right':
335359
position = {top: pos.top + pos.height / 2 - targetHeight / 2, left: pos.left + pos.width};
336360
break;
337361
case 'top-right':
338-
position = {top: pos.top - targetHeight -arrowSize, left: pos.left};
339-
arrowOffset = {left: elementW /2 };
362+
position = {top: pos.top - targetHeight, left: pos.left-fixedW};
363+
arrowOffset = {left: elementW/2 + fixedW};
340364
break;
341365
case 'top-left':
342-
position = {top: pos.top - targetHeight -arrowSize, left: pos.left -targetWidth +pos.width};
343-
arrowOffset = {left: targetWidth - elementW /2 };
366+
position = {top: pos.top - targetHeight, left: pos.left -targetWidth +pos.width + fixedW};
367+
arrowOffset = {left: targetWidth - elementW /2 -fixedW};
344368
break;
345369
case 'bottom-right':
346-
position = {top: pos.top + pos.height, left: pos.left};
347-
arrowOffset = {left: elementW /2};
370+
position = {top: pos.top + pos.height, left: pos.left-fixedW};
371+
arrowOffset = {left: elementW /2+fixedW};
348372
break;
349373
case 'bottom-left':
350374
position = {top: pos.top + pos.height, left: pos.left -targetWidth +pos.width};
351375
arrowOffset = {left: targetWidth- elementW /2};
352376
break;
353377
case 'right-top':
354-
position = {top: pos.top -targetHeight + pos.height, left: pos.left + pos.width};
355-
arrowOffset = {top: targetHeight - elementH/2};
378+
position = {top: pos.top -targetHeight + pos.height + fixedH, left: pos.left + pos.width};
379+
arrowOffset = {top: targetHeight - elementH/2 -fixedH};
356380
break;
357381
case 'right-bottom':
358-
position = {top: pos.top , left: pos.left + pos.width};
359-
arrowOffset = {top: elementH /2 };
382+
position = {top: pos.top - fixedH, left: pos.left + pos.width};
383+
arrowOffset = {top: elementH /2 +fixedH };
360384
break;
361385
case 'left-top':
362-
position = {top: pos.top -targetHeight + pos.height, left: pos.left - targetWidth};
363-
arrowOffset = {top: targetHeight - elementH/2};
386+
position = {top: pos.top -targetHeight + pos.height+fixedH, left: pos.left - targetWidth};
387+
arrowOffset = {top: targetHeight - elementH/2 - fixedH};
364388
break;
365389
case 'left-bottom':
366390
position = {top: pos.top , left: pos.left -targetWidth};

‎dist/jquery.webui-popover.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)