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>'); | $('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).on('mouseenter','.item_container',function(e){Popup.show(this);Popup.setPosition(e);}); | $(document).on('mouseenter','.item_container',function(e){Popup.show(this);Popup.setPosition(e);}); | ||
$(document).on('mouseleave','.item_container',function(){Popup.hide()}); | $(document).on('mouseleave','.item_container',function(){Popup.hide();}); | ||
$(document).on('mousemove','.item_container', function(e){Popup.setPosition(e);}); | $(document).on('mousemove','.item_container', function(e){Popup.setPosition(e);}); | ||
$('.item_level').mousedown(function(e){ e.preventDefault(); }); | $('.item_level').mousedown(function(e){ e.preventDefault(); }); | ||
$(document).on('click','.upgrade',function(){ | $(document).on('click','.upgrade',function(){ | ||
var container = $(this).closest('.item_container'); | |||
var lvl = parseInt(container.attr('data-lvl')); | |||
if (lvl!==5){ | |||
container.attr('data-lvl',lvl+1); | |||
container.find('.level').html(lvl+1); | |||
} | |||
}) | Popup.show(container[0]); | ||
}); | |||
$(document).on('click','.downgrade',function(){ | $(document).on('click','.downgrade',function(){ | ||
var container = $(this).closest('.item_container'); | |||
var lvl = parseInt(container.attr('data-lvl')); | |||
if (lvl!==0){ | |||
container.attr('data-lvl',lvl-1); | |||
container.find('.level').html(lvl-1); | |||
} | |||
}) | Popup.show(container[0]); | ||
}); | |||
if ($("#input_level").length == 1) { | if ($("#input_level").length == 1) { | ||
var input_level = $('<input type="number" class="west" placeholder=" | var input_level = $('<input type="number" class="west" placeholder="Your level" min="0" max="150">').bind("propertychange keyup input paste", function() { | ||
if (this.value > 150) { | if (this.value > 150) { | ||
this.value = 150; | this.value = 150; | ||
Line 64: | Line 66: | ||
show: function(obj) { | show: function(obj) { | ||
console.time('create_popup'); | console.time('create_popup'); | ||
Popup.content = Popup.createPopup($(obj).attr('data-popup'), $(obj).attr('data-cdn-cat'), $(obj).attr('data-cdn-img')); | Popup.content = Popup.createPopup($(obj).attr('data-popup'), $(obj).attr('data-cdn-cat'), $(obj).attr('data-cdn-img'), parseInt($(obj).attr('data-lvl'))); | ||
Popup.active = true; | Popup.active = true; | ||
Popup.setTimeout(); | Popup.setTimeout(); | ||
Line 94: | Line 96: | ||
return $('.popup_contents'); | return $('.popup_contents'); | ||
}, | }, | ||
createPopup: function(data, cdn_cat, cdn_name) { | createPopup: function(data, cdn_cat, cdn_name, lvl) { | ||
data = JSON.parse(data); | 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><div class="popup_divider"></div><p class="popup_name">' + data.name + '</p><p class="popup_type">' + data.type + '</p><br/>'; | var html = '<div class="popup_image"><img src="https://westzzs.innogamescdn.com/images/items/' + data.cdn_cat + '/' + data.cdn_img + '.png' + '"/></div><div class="popup_divider"></div><p class="popup_name">' + data.name + '</p><p class="popup_type">' + data.type + '</p><br/>'; | ||
var upgraded = false; | |||
console.log('lvl : '+lvl); | |||
if ((lvl>=1)&&(lvl<=5)){ | |||
upgraded = true; | |||
data.auc = false; | |||
} | |||
console.log('upgraded :'+upgraded); | |||
if (data.dmg_min&&data.dmg_max){ | |||
if (upgraded) { | |||
data.dmg_min += Math.round(Math.max(1, data.dmg_min * 0.1 * lvl)); | |||
data.dmg_max += Math.round(Math.max(1, data.dmg_max * 0.1 * lvl)); | |||
} | |||
html += '<p class="popup_dmg">'+data.dmg_min+'-'+data.dmg_max+' Damages</p>'; | |||
} | |||
for (var cat in Popup.data) { | for (var cat in Popup.data) { | ||
var cnt = 0; | var cnt = 0; | ||
Line 106: | Line 122: | ||
if ($('#input_level input').val() > 0) { | if ($('#input_level input').val() > 0) { | ||
data[key] = Math.ceil($('#input_level input').val() * -data[key]); | data[key] = Math.ceil($('#input_level input').val() * -data[key]); | ||
if (upgraded){ | |||
console.log(key + ' ' + Math.round(Math.max(1, data[key] * 0.1 * lvl))); | |||
data[key] += Math.round(Math.max(1, data[key] * 0.1 * lvl)); | |||
} | |||
} else { | } else { | ||
data[key] = -data[key]; | |||
per_level = " (per Level)"; | per_level = " (per Level)"; | ||
if (upgraded){ | |||
console.log(key + ' ' + Math.round(Math.max(1, data[key] * 1000 * lvl))); | |||
data[key] += Math.round(Math.max(1, data[key] * 1000 * lvl)); | |||
} | |||
} | } | ||
} else if (upgraded) { | |||
console.log(key + ' ' + Math.round(Math.max(1, data[key] * 0.1 * lvl))); | |||
data[key] += Math.round(Math.max(1, data[key] * 0.1 * lvl)); | |||
} | } | ||
html += Popup.data[cat][key].replace('#1', data[key]).replace('#2', per_level); | html += Popup.data[cat][key].replace('#1', data[key]).replace('#2', per_level); | ||
Line 118: | Line 145: | ||
} | } | ||
} | } | ||
if (data.text){ | |||
for (var i = 0; i < data.text.length;i++){ | |||
html += '<p class="popup_text">'+data.text[i]+'</p>'; | |||
} | |||
html+='<br/>'; | |||
} | |||
if (data.bonus){ | |||
for (var i = 0; i < data.bonus.length;i++){ | |||
html += '<p class="popup_bonus">'+data.bonus[i]+'</p>'; | |||
} | |||
html+='<br/>'; | |||
} | |||
if (data.jobs){ | |||
html += '<div style="text-align:center;"><table class="popup_job">'; | |||
for (var i =0; i<data.jobs.length;i++){ | |||
html += '<tr><td><img src="https://westzzs.innogamescdn.com/images/jobs/'+data.jobs[i][1]+'.png"/></td><td><span> '+data.jobs[i][0]+'</span></td></tr>'; | |||
} | |||
html += '</table></div>'; | |||
} | |||
if (data.craft){ | |||
html += '<div style="text-align:center;"><table class="popup_crafteditem"><tr><td><img src="https://westzzs.innogamescdn.com/images/crafting/profsymbol_'+data.craft.id+'_small.png"/></td><td><table><tr>'; | |||
for (var i = 0;i<data.craft.req.length;i++){ | |||
html += '<td><img style="width:36px;height:36px;" src="https://westzzs.innogamescdn.com/images/items/yield/'+data.craft.req[i][0]+'.png"/></td>'; | |||
} | |||
html += '</tr><tr>'; | |||
for (var i = 0;i<data.craft.req.length;i++){ | |||
html += '<td><span>x'+data.craft.req[i][1]+'</span></td>'; | |||
} | |||
html += '</tr></table></td></tr></table></div>'; | |||
} | |||
html += '<div class="popup_infos">'; | html += '<div class="popup_infos">'; | ||
if (data.spd) html += '<p class="popup_speed">Speed: +' + data.spd + '%</p><br/>'; | if (data.spd) html += '<p class="popup_speed">Speed: +' + data.spd + '%</p><br/>'; | ||
Line 156: | Line 183: | ||
html += '<i>Unsalable</i><br/><br/>'; | html += '<i>Unsalable</i><br/><br/>'; | ||
} | } | ||
if (data.lvl) html += 'Level <b>' + data.lvl + '</b><br/>'; | if (data.lvl) html += 'Level <b>' + data.lvl + '</b><br/>'; | ||
if (data.sex) { | if (data.sex) { | ||
Line 166: | Line 191: | ||
} | } | ||
} | } | ||
if (data.auc == 1){ | |||
html += '<span class="popup_txtgreen">Auctionable</span><br/>'; | |||
} else { | |||
html += '<span class="popup_txtred">Not auctionable</span><br/>'; | html += '<span class="popup_txtred">Not auctionable</span><br/>'; | ||
} | } | ||
Line 179: | Line 204: | ||
return html; | return html; | ||
}, | }, | ||
setPosition : function (e) { | |||
var window_width = $(window).width(); | |||
var window_height = $(window).height(); | var window_height = $(window).height(); | ||
var popup_width = Popup.getEl().outerWidth(); | var popup_width = Popup.getEl().outerWidth(); | ||
var popup_height = Popup.getEl().outerHeight() | var popup_height = Popup.getEl().outerHeight(); | ||
var pos_x = e.clientX; | var pos_x = e.clientX; | ||
var pos_y = e.clientY; | var pos_y = e.clientY; | ||
Line 204: | Line 229: | ||
left: left | left: left | ||
}); | }); | ||
}, | |||
data: { | data: { | ||
dmg: { | dmg: { | ||
dmglvl: '<p class="popup_dmg">+ #1 Damages#2</p>' | |||
dmglvl: '<p class="popup_dmg">+ #1 Damages | |||
}, | }, | ||
skills: { | skills: { |
Revision as of 22:04, 6 July 2017
$('body').append('
');
$(document).on('mouseenter','.item_container',function(e){Popup.show(this);Popup.setPosition(e);}); $(document).on('mouseleave','.item_container',function(){Popup.hide();}); $(document).on('mousemove','.item_container', function(e){Popup.setPosition(e);});
$('.item_level').mousedown(function(e){ e.preventDefault(); }); $(document).on('click','.upgrade',function(){
var container = $(this).closest('.item_container'); var lvl = parseInt(container.attr('data-lvl')); if (lvl!==5){ container.attr('data-lvl',lvl+1); container.find('.level').html(lvl+1); } Popup.show(container[0]);
}); $(document).on('click','.downgrade',function(){
var container = $(this).closest('.item_container'); var lvl = parseInt(container.attr('data-lvl')); if (lvl!==0){ container.attr('data-lvl',lvl-1); container.find('.level').html(lvl-1); } Popup.show(container[0]);
});
if ($("#input_level").length == 1) {
var input_level = $('<input type="number" class="west" placeholder="Your level" min="0" max="150">').bind("propertychange keyup input paste", function() { if (this.value > 150) { this.value = 150; } else if (this.value < 0) { this.value = 0; } $(".calc").each(function() { if (input_level.val() == 0) { $(this).html(this.id); $('.per_level_off').addClass('per_level').removeClass('per_level_off'); } else { $(this).html(Math.ceil(Number(this.id) * input_level.val())); $('.per_level').addClass('per_level_off').removeClass('per_level'); } }); }).appendTo($("#input_level"));
}
//Search
if ($("#input_search").length == 1) {
var input_search = $('<input type="search" class="west" placeholder="Search">').bind("propertychange keyup input paste", function() { var val = this.value; if (val == ) { $('.item_container').show(); } else { $('.item_container').hide(); $('.item_container').filter(function() { return $(this).attr('data-popup').toLowerCase().indexOf(val) > -1; }).show(); } }).appendTo($("#input_search"));
}
var Popup = {
content : "", delay : 200, active : false, show: function(obj) { console.time('create_popup'); Popup.content = Popup.createPopup($(obj).attr('data-popup'), $(obj).attr('data-cdn-cat'), $(obj).attr('data-cdn-img'), parseInt($(obj).attr('data-lvl'))); Popup.active = true; Popup.setTimeout(); Popup.getContainer().html(Popup.content); console.timeEnd('create_popup'); }, hide: function() { Popup.getEl().css({ display: 'none', top: 0, left: 0 }); Popup.active = false; Popup.clearTimeout(); }, setTimeout: function() { Popup.clearTimeout(); Popup.timer = window.setTimeout(function() { Popup.getEl().css('display', 'block'); }, Popup.delay); }, clearTimeout : function() { if (Popup.timer) window.clearTimeout(Popup.timer); }, getEl : function() { return $('.popup_window'); }, getContainer : function() { return $('.popup_contents'); }, createPopup: function(data, cdn_cat, cdn_name, lvl) { data = JSON.parse(data);
var html = '
' + data.name + '
' + data.type + '
';
var upgraded = false; console.log('lvl : '+lvl); if ((lvl>=1)&&(lvl<=5)){ upgraded = true; data.auc = false; } console.log('upgraded :'+upgraded); if (data.dmg_min&&data.dmg_max){ if (upgraded) { data.dmg_min += Math.round(Math.max(1, data.dmg_min * 0.1 * lvl)); data.dmg_max += Math.round(Math.max(1, data.dmg_max * 0.1 * lvl)); }
html += '
'+data.dmg_min+'-'+data.dmg_max+' Damages
';
} for (var cat in Popup.data) { var cnt = 0; for (var key in Popup.data[cat]) { if (data.hasOwnProperty(key)) { cnt++; var per_level = ""; if (data[key] < 0) { if ($('#input_level input').val() > 0) { data[key] = Math.ceil($('#input_level input').val() * -data[key]); if (upgraded){ console.log(key + ' ' + Math.round(Math.max(1, data[key] * 0.1 * lvl))); data[key] += Math.round(Math.max(1, data[key] * 0.1 * lvl)); } } else { data[key] = -data[key]; per_level = " (per Level)"; if (upgraded){ console.log(key + ' ' + Math.round(Math.max(1, data[key] * 1000 * lvl))); data[key] += Math.round(Math.max(1, data[key] * 1000 * lvl)); } } } else if (upgraded) { console.log(key + ' ' + Math.round(Math.max(1, data[key] * 0.1 * lvl))); data[key] += Math.round(Math.max(1, data[key] * 0.1 * lvl)); } html += Popup.data[cat][key].replace('#1', data[key]).replace('#2', per_level); } } if (cnt > 0) { html += '
'; } } if (data.text){ for (var i = 0; i < data.text.length;i++){
html += '
'+data.text[i]+'
';
} html+='
'; } if (data.bonus){ for (var i = 0; i < data.bonus.length;i++){
html += '
'+data.bonus[i]+'
';
} html+='
'; } if (data.jobs){
html += '
for (var i =0; i<data.jobs.length;i++){html += '';
}html += '
<img src="https://westzzs.innogamescdn.com/images/jobs/'+data.jobs[i][1]+'.png"/> | '+data.jobs[i][0]+' |
';
} if (data.craft){
html += '
<img src="https://westzzs.innogamescdn.com/images/crafting/profsymbol_'+data.craft.id+'_small.png"/> | ';
for (var i = 0;i<data.craft.req.length;i++){html += ''; }html += ''; for (var i = 0;i<data.craft.req.length;i++){ html += ''; }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 + 'html += '
'; } else { html += 'Unsalable
'; } if (data.lvl) 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.auc == 1){ html += 'Auctionable
'; } else { html += 'Not auctionable
'; } if (data.upg == 0) { html += 'Not upgradeable
'; } else { html += 'Upgradeable
'; }
[item=' + data.id + ']
';
return html; }, setPosition : function (e) { var window_width = $(window).width(); var window_height = $(window).height(); var popup_width = Popup.getEl().outerWidth(); var popup_height = Popup.getEl().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.getEl().css({ top: top, left: left }); }, data: { dmg: {
dmglvl: '
+ #1 Damages#2
'
}, 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)
'
} }
};