Popup.js: Difference between revisions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
$('body').append('<div class="popup_window"><div class="popup_front"><div class="tw_bg_tl"></div><div class="tw_bg_tr"></div><div class="tw_bg_bl"></div><div class="tw_bg_br"></div></div><div class="popup_contents"></div></div>'); | |||
$(document).mousemove(function(e) { | |||
if ($('.popup_window:visible').length !== 0) { | |||
var window_width = $(window).width(); | |||
var window_height = $(window).height(); | |||
var popup_width = $('.popup_window:visible').outerWidth(); | |||
var popup_height = $('.popup_window:visible').outerHeight() | |||
var pos_x = e.clientX; | |||
var pos_y = e.clientY; | |||
var top; | |||
var left; | |||
var margin_top = 20; | |||
var margin_left = 20; | |||
if (pos_x + popup_width + margin_left > window_width){ | |||
left = pos_x - popup_width - margin_left + (e.pageX-e.clientX); | |||
} else { | |||
left = pos_x + margin_left + (e.pageX-e.clientX); | |||
} | |||
if (pos_y + popup_height + margin_top > window_height){ | |||
top = window_height - popup_height + (e.pageY-e.clientY); | |||
} else { | |||
top = pos_y + margin_top + (e.pageY-e.clientY); | |||
} | |||
$('.popup_window:visible').css({ | |||
top: top, | |||
left: left | |||
}); | |||
} | |||
}); | |||
var popup = { | |||
dmg: { | |||
dmg: '<p class="popup_dmg">#1 Damages</p>', | |||
dmglvl: '<p class="popup_dmg">+ #1 Damages (per Level)</p>' | |||
}, | |||
skills: { | |||
str: '<p class="popup_attribute">+ #1 Strength#2</p>', | |||
mob: '<p class="popup_attribute">+ #1 Mobility#2</p>', | |||
dex: '<p class="popup_attribute">+ #1 Dexterity#2</p>', | |||
cha: '<p class="popup_attribute">+ #1 Charisma#2</p>', | |||
con: '<p class="popup_skill">+ #1 Construction#2</p>', | |||
vig: '<p class="popup_skill">+ #1 Vigor#2</p>', | |||
tou: '<p class="popup_skill">+ #1 Toughness#2</p>', | |||
sta: '<p class="popup_skill">+ #1 Stamina#2</p>', | |||
hea: '<p class="popup_skill">+ #1 Health Points#2</p>', | |||
rid: '<p class="popup_skill">+ #1 Horseback Riding#2</p>', | |||
ref: '<p class="popup_skill">+ #1 Reflex#2</p>', | |||
dod: '<p class="popup_skill">+ #1 Dodging#2</p>', | |||
hid: '<p class="popup_skill">+ #1 Hiding#2</p>', | |||
swi: '<p class="popup_skill">+ #1 Swimming#2</p>', | |||
aim: '<p class="popup_skill">+ #1 Aiming#2</p>', | |||
sho: '<p class="popup_skill">+ #1 Shooting#2</p>', | |||
pit: '<p class="popup_skill">+ #1 Setting traps#2</p>', | |||
fin: '<p class="popup_skill">+ #1 Fine Motor Skills#2</p>', | |||
rep: '<p class="popup_skill">+ #1 Repairing#2</p>', | |||
lea: '<p class="popup_skill">+ #1 Leadership#2</p>', | |||
tac: '<p class="popup_skill">+ #1 Tactics#2</p>', | |||
tra: '<p class="popup_skill">+ #1 Trading#2</p>', | |||
ani: '<p class="popup_skill">+ #1 Animal Instinct#2</p>', | |||
app: '<p class="popup_skill">+ #1 Appearance#2</p>' | |||
}, | |||
fb: { | |||
fbdef: '<p class="popup_fb">+ #1 <b>Defense</b> (Fort battle bonus)</p>', | |||
fboff: '<p class="popup_fb">+ #1 <b>Attack</b> (Fort battle bonus)</p>', | |||
fbres: '<p class="popup_fb">+ #1 <b>Resistance</b> (Fort battle bonus)</p>', | |||
fbdefs: '<p class="popup_fb">+ #1 <b>Defense</b> (Fort battle sector bonus)</p>', | |||
fboffs: '<p class="popup_fb">+ #1 <b>Attack</b> (Fort battle sector bonus)</p>', | |||
fbdmgs: '<p class="popup_fb">+ #1 <b>Damages</b> (Fort battle sector bonus)</p>' | |||
}, | |||
txt: { | |||
t1: '<p class="popup_text">#1</p>', | |||
t2: '<p class="popup_text">#1</p>', | |||
t3: '<p class="popup_text">#1</p>', | |||
t4: '<p class="popup_text">#1</p>' | |||
}, | |||
bonus: { | |||
b1: '<p class="popup_bonus">#1</p>', | |||
b2: '<p class="popup_bonus">#1</p>', | |||
b3: '<p class="popup_bonus">#1</p>', | |||
b4: '<p class="popup_bonus">#1</p>' | |||
} | |||
} | |||
function createPopup(data, cdn_cat, cdn_name) { | |||
data = JSON.parse(data); | |||
var html = '<div class="popup_image"><img src="https://westzzs.innogamescdn.com/images/items/' + data.cdn_cat + '/' + data.cdn_img + '.png' + '"/></div><img class="popup_divider"/><p class="popup_name">' + data.name + '</p><p class="popup_type">' + data.type + '</p><br/>'; | |||
for (var cat in popup) { | |||
var cnt = 0; | |||
for (var key in popup[cat]) { | |||
if (data.hasOwnProperty(key)) { | |||
cnt++; | |||
var per_level = ""; | |||
if (Math.sign(data[key]) == -1) { | |||
per_level = " (per Level)"; | |||
data[key] = -data[key]; | |||
} | |||
html += popup[cat][key].replace('#1', data[key]).replace('#2', per_level); | |||
} | |||
} | |||
if (cnt > 0) { | |||
html += '<br/>'; | |||
} | |||
} | |||
html += '<div class="popup_infos">'; | |||
if (data.spd) html += '<p class="popup_speed">Speed: +'+data.spd+'%</p><br/>'; | |||
if (data.set) html += '<p class="popup_set">'+data.set+'</p><br/>'; | |||
if (data.sp) { | |||
html += '<img src="/images/5/57/Buy_price.png">' + data.bp + ' <img src="/images/f/fc/Sell_price.png"> ' + data.sp + '<br/><br/>'; | |||
} else { | |||
html += '<i>Unsalable</i><br/><br/>'; | |||
} | |||
html += 'Level <b>' + data.lvl + '</b><br/>'; | |||
if (data.sex) { | |||
if (data.sex == 0) { | |||
html += '<img src="/images/c/c5/Gender_m.png"> '; | |||
} else { | |||
html += '<img src="/images/4/41/Gender_f.png"> '; | |||
} | |||
} | |||
if (data.upg) { | |||
if (data.upg == 0) { | |||
html += '<span class="popup_txtred">Not upgradeable</span>'; | |||
} else { | |||
html += '<span class="popup_txtgreen">Upgradeable</span>'; | |||
} | |||
} | |||
html += '<p class="popup_id"><br/>ID: <b>' + data.id + '</b></p></div>'; | |||
return html; | |||
} | |||
function showPopup(obj) { | |||
console.time('popup'); | |||
var html = createPopup($(obj).attr('data-popup'), $(obj).attr('data-cdn-cat'), $(obj).attr('data-cdn-img')); | |||
$('.popup_contents').html(html); | |||
$('.popup_window').delay(100).show(0); | |||
console.timeEnd('popup'); | |||
} | |||
function hidePopup() { | |||
$('.popup_window').hide(); | |||
} |
Revision as of 10:35, 14 June 2017
$('body').append('
');
$(document).mousemove(function(e) {
if ($('.popup_window:visible').length !== 0) { var window_width = $(window).width(); var window_height = $(window).height();
var popup_width = $('.popup_window:visible').outerWidth(); var popup_height = $('.popup_window:visible').outerHeight()
var pos_x = e.clientX; var pos_y = e.clientY;
var top; var left; var margin_top = 20; var margin_left = 20;
if (pos_x + popup_width + margin_left > window_width){
left = pos_x - popup_width - margin_left + (e.pageX-e.clientX); } else { left = pos_x + margin_left + (e.pageX-e.clientX); } if (pos_y + popup_height + margin_top > window_height){ top = window_height - popup_height + (e.pageY-e.clientY); } else { top = pos_y + margin_top + (e.pageY-e.clientY); }
$('.popup_window:visible').css({ top: top, left: left }); } });
var popup = {
dmg: {
dmg: '
#1 Damages
', dmglvl: '
+ #1 Damages (per Level)
'
}, skills: {
str: '
+ #1 Strength#2
', mob: '
+ #1 Mobility#2
', dex: '
+ #1 Dexterity#2
', cha: '
+ #1 Charisma#2
', con: '
+ #1 Construction#2
', vig: '
+ #1 Vigor#2
', tou: '
+ #1 Toughness#2
', sta: '
+ #1 Stamina#2
', hea: '
+ #1 Health Points#2
', rid: '
+ #1 Horseback Riding#2
', ref: '
+ #1 Reflex#2
', dod: '
+ #1 Dodging#2
', hid: '
+ #1 Hiding#2
', swi: '
+ #1 Swimming#2
', aim: '
+ #1 Aiming#2
', sho: '
+ #1 Shooting#2
', pit: '
+ #1 Setting traps#2
', fin: '
+ #1 Fine Motor Skills#2
', rep: '
+ #1 Repairing#2
', lea: '
+ #1 Leadership#2
', tac: '
+ #1 Tactics#2
', tra: '
+ #1 Trading#2
', ani: '
+ #1 Animal Instinct#2
', app: '
+ #1 Appearance#2
'
}, fb: {
fbdef: '
+ #1 Defense (Fort battle bonus)
', fboff: '
+ #1 Attack (Fort battle bonus)
', fbres: '
+ #1 Resistance (Fort battle bonus)
', fbdefs: '
+ #1 Defense (Fort battle sector bonus)
', fboffs: '
+ #1 Attack (Fort battle sector bonus)
', fbdmgs: '
+ #1 Damages (Fort battle sector bonus)
'
}, txt: {
t1: '
#1
', t2: '
#1
', t3: '
#1
', t4: '
#1
'
}, bonus: {
b1: '
#1
', b2: '
#1
', b3: '
#1
', b4: '
#1
'
}
}
function createPopup(data, cdn_cat, cdn_name) {
data = JSON.parse(data);
var html = '
<img class="popup_divider"/>
' + data.name + '
' + data.type + '
';
for (var cat in popup) {
var cnt = 0;
for (var key in popup[cat]) { if (data.hasOwnProperty(key)) {
cnt++;
var per_level = ""; if (Math.sign(data[key]) == -1) { per_level = " (per Level)"; data[key] = -data[key]; } html += popup[cat][key].replace('#1', data[key]).replace('#2', per_level); } } if (cnt > 0) { html += '
'; } }
html += '
Speed: +'+data.spd+'%
'; if (data.set) html += '
'+data.set+'
';
if (data.sp) { html += '<img src="/images/5/57/Buy_price.png">' + data.bp + ' <img src="/images/f/fc/Sell_price.png"> ' + data.sp + '
'; } else { html += 'Unsalable
'; } html += 'Level ' + data.lvl + '
'; if (data.sex) { if (data.sex == 0) { html += '<img src="/images/c/c5/Gender_m.png"> '; } else { html += '<img src="/images/4/41/Gender_f.png"> '; } } if (data.upg) { if (data.upg == 0) { html += 'Not upgradeable'; } else { html += 'Upgradeable'; }
}html += '
ID: ' + data.id + '
';
return html;
}
function showPopup(obj) { console.time('popup');
var html = createPopup($(obj).attr('data-popup'), $(obj).attr('data-cdn-cat'), $(obj).attr('data-cdn-img')); $('.popup_contents').html(html); $('.popup_window').delay(100).show(0);
console.timeEnd('popup'); }
function hidePopup() {
$('.popup_window').hide();
}