phillip/ingress-intel-total-conversion
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[missions] use DOM instead of HTML string manipulation

Browse Source
This commit is contained in:
fkloft 2015-04-11 23:45:09 +02:00
parent 8fff4e3be9
commit 8ac1305110
2 changed files with 266 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
plugins/missions.css Normal file
View File

@ -0,0 +1,119 @@
.plugin-mission-summary {
padding: 5px;
border-top: black solid 1px;
min-height: 50px;
position: relative;
clear: left;
}
.plugin-mission-summary.checked::after {
content: "✓";
display: block;
pointer-events: none;
position: absolute;
text-align: center;
color: rgba(255, 187, 0, 0.3);
left: 5px;
top: 5px;
font-size: 50px;
line-height: 50px;
width: 50px;
}
.plugin-mission-summary:first-child {
border-top-width: 0px;
}
.plugin-mission-summary.checked {
background-color: rgba(255, 187, 0, 0.3);
}
.plugin-mission-summary > img {
float: left;
cursor: pointer;
width: 50px;
margin-right: 10px;
margin-bottom: 10px;
}
.plugin-mission-summary > a, .plugin-mission-summary > h4 {
display: block;
font-weight: bold;
font-size: 1.3em;
margin: 0 0 2px 60px;
}
.plugin-mission-summary > br {
margin-bottom: 2px;
}
.plugin-mission-info img {
height: 14px;
margin-right: 8px;
vertical-align: top;
}
.plugin-mission-summary description {
white-space: pre;
margin-left: 110px;
}
.plugin-mission-details .plugin-mission-summary.checked::after {
left: 0px;
top: 0px;
font-size: 100px;
line-height: 100px;
width: 100px;
}
.plugin-mission-details .plugin-mission-summary {
padding: 0;
background-color: transparent;
}
.plugin-mission-details .plugin-mission-summary > img {
width: 100px;
}
.plugin-mission-details ol {
clear: left;
list-style: none;
margin: 0;
padding: 0;
}
.plugin-mission-portal-indicator {
position: relative;
text-align: center;
float: left;
line-height: 18px;
height: 18px;
width: 18px;
margin-right: 5px;
}
.plugin-mission-portal-indicator div {
border-color: currentcolor transparent transparent;
border-style: solid;
border-width: 2px 1px;
box-sizing: border-box;
height: 0;
left: 6px;
position: absolute;
top: 0;
transform-origin: 4px 9px 0;
width: 8px;
}
.plugin-mission-waypoint .title {
font-size: 18px;
font-weight: bold;
}
.plugin-mission-waypoint label {
clear: left;
display: block;
}
.plugin-mission-waypoint input {
box-sizing: border-box;
margin: 3px 5px 8px 0;
width: 18px;
}

273
plugins/missions.user.js
View File

@ -249,168 +249,182 @@ window.plugin.missions = {
}, },
renderMissionList: function(missions) { renderMissionList: function(missions) {
return missions.map(this.renderMissionSummary, this).join(' '); var container = document.createElement('div');
missions.forEach(function(mission) {
container.appendChild(this.renderMissionSummary(mission));
}, this);
return container;
}, },
renderMissionSummary: function(mission) { renderMissionSummary: function(mission) {
var cachedMission = this.getMissionCache(mission.guid); var cachedMission = this.getMissionCache(mission.guid);
var html = '';
var checked = this.settings.checkedMissions[mission.guid]; var checked = this.settings.checkedMissions[mission.guid];
html += '<div class="mc-' + mission.guid + '" style="' + (checked ? 'background-color: rgba(255, 187, 0, 0.3);' : '') + 'padding: 5px; border-bottom: black solid 1px;margin-bottom: 5px;height: 50px; ">'; var container = document.createElement('div');
html += '<img style="width: 50px; float: left; margin-right: 20px" src="' + mission.image + '" >'; container.className = 'plugin-mission-summary mc-' + mission.guid;
html += '<div style="font-weight: bold;font-size: 1.3em;" ><a href="#" onclick="plugin.missions.openMission(\'' + mission.guid + '\')" >' + mission.title + '</a> </div>'; if(checked)
if (cachedMission) { container.classList.add('checked');
html += '<span class="' + (cachedMission.authorTeam === 'R' ? 'RESISTANCE' : 'ENLIGHTENED') + '">' + cachedMission.authorNickname + '</span>';
html += '<br />'; var img = container.appendChild(document.createElement('img'));
img.src = mission.image;
img.addEventListener('click', function(ev) {
plugin.missions.toggleMission(mission.guid);
}, false);
var title = container.appendChild(document.createElement('a'));
title.textContent = mission.title;
title.href = '/mission/' + mission.guid; // TODO make IITC load on mission permalinks as well
title.addEventListener('click', function(ev) {
plugin.missions.openMission(mission.guid);
// prevent browser from following link
ev.preventDefault();
return false;
}, false);
if(cachedMission) {
var span = container.appendChild(document.createElement('span'));
span.className = 'nickname ' + (cachedMission.authorTeam === 'R' ? 'res' : 'enl')
span.textContent = cachedMission.authorNickname;
} }
html += '<img style="height: 14px; margin-right: 8px; vertical-align: middle;" src="https://commondatastorage.googleapis.com/ingress.com/img/tm_icons/time.png" />' +
timeToRemaining((mission.medianCompletionTimeMs / 1000) | 0); container.appendChild(document.createElement('br'));
html += '<img style="height: 14px; margin-right: 8px; vertical-align: middle; margin-left: 5px;" src="https://commondatastorage.googleapis.com/ingress.com/img/tm_icons/like.png" />' +
(((mission.ratingE6 / 100) | 0) / 100) + '%'; var infoTime = container.appendChild(document.createElement('span'));
infoTime.className = 'plugin-mission-info time';
infoTime.textContent = timeToRemaining((mission.medianCompletionTimeMs / 1000) | 0) + ' ';
img = infoTime.insertBefore(document.createElement('img'), infoTime.firstChild);
img.src = 'https://commondatastorage.googleapis.com/ingress.com/img/tm_icons/time.png';
var infoRating = container.appendChild(document.createElement('span'));
infoRating.className = 'plugin-mission-info rating';
infoRating.textContent = (((mission.ratingE6 / 100) | 0) / 100) + '%' + ' ';
img = infoRating.insertBefore(document.createElement('img'), infoRating.firstChild);
img.src = 'https://commondatastorage.googleapis.com/ingress.com/img/tm_icons/like.png';
if (cachedMission) { if (cachedMission) {
html += '<img style="height: 14px; margin-right: 8px; vertical-align: middle; margin-left: 5px;" src="https://commondatastorage.googleapis.com/ingress.com/img/tm_icons/players.png" />' + var infoPlayers = container.appendChild(document.createElement('span'));
cachedMission.numUniqueCompletedPlayers; infoPlayers.className = 'plugin-mission-info players';
html += '<img style="height: 14px; margin-right: 8px; vertical-align: middle; margin-left: 5px;" src="https://commondatastorage.googleapis.com/ingress.com/img/map_icons/linkmodeicon.png" />' + infoPlayers.textContent = cachedMission.numUniqueCompletedPlayers + ' ';
cachedMission.waypoints.length; img = infoPlayers.insertBefore(document.createElement('img'), infoPlayers.firstChild);
img.src = 'https://commondatastorage.googleapis.com/ingress.com/img/tm_icons/players.png';
var infoWaypoints = container.appendChild(document.createElement('span'));
infoWaypoints.className = 'plugin-mission-info waypoints';
infoWaypoints.textContent = cachedMission.waypoints.length + ' ';
img = infoWaypoints.insertBefore(document.createElement('img'), infoWaypoints.firstChild);
img.src = 'https://commondatastorage.googleapis.com/ingress.com/img/map_icons/linkmodeicon.png';
} }
html += '<br />';
html += '</div>'; return container;
return html;
}, },
renderMission: function(mission) { renderMission: function(mission) {
var me = this; var container = document.createElement('div');
var checked = this.settings.checkedMissions[mission.guid]; container.className = 'plugin-mission-details';
//commondatastorage.googleapis.com/ingress.com/img/map_icons/linkmodeicon.png
var html = '<div style="height: 110px;" >'; var summary = container.appendChild(this.renderMissionSummary(mission));
html += '<a href="#" onclick="plugin.missions.toggleMission(\'' + mission.guid + '\')" >';
html += '<span class="m-' + mission.guid + '" style="' + (checked ? '' : 'display: none;') + 'position: absolute; float: left; left: 12px; vertical-align: middle; padding-left: 10px; padding-top: 40px; font-size: 8em;opacity: 0.5;width: 90px; height: 60px;" >&#10003;</span>'; // replace link with heading
html += '<img style="width: 100px;float: left; margin-right: 20px" src="' + mission.image + '" >'; var title = summary.getElementsByTagName('a')[0];
html += '</a>'; var newtitle = document.createElement('h4');
html += '<div style="font-weight: bold;font-size: 1.3em;" >' + mission.title + '</div>'; newtitle.textContent = mission.title;
html += '<span class="' + (mission.authorTeam === 'R' ? 'RESISTANCE' : 'ENLIGHTENED') + '">' + mission.authorNickname + '</span>'; title.parentNode.replaceChild(newtitle, title);
html += '<br />';
html += '<br />'; var desc = summary.appendChild(document.createElement('p'));
html += '<img style="height: 14px; margin-right: 8px; vertical-align: middle;" src="https://commondatastorage.googleapis.com/ingress.com/img/tm_icons/time.png" />' + desc.className = 'description';
timeToRemaining((mission.medianCompletionTimeMs / 1000) | 0); desc.textContent = mission.description;
html += '<img style="height: 14px; margin-right: 8px; vertical-align: middle; margin-left: 5px;" src="https://commondatastorage.googleapis.com/ingress.com/img/tm_icons/like.png" />' +
(((mission.ratingE6 / 100) | 0) / 100) + '%';
html += '<img style="height: 14px; margin-right: 8px; vertical-align: middle; margin-left: 5px;" src="https://commondatastorage.googleapis.com/ingress.com/img/tm_icons/players.png" />' + var list = container.appendChild(document.createElement('ol'))
mission.numUniqueCompletedPlayers; mission.waypoints.forEach(function(waypoint, index) {
html += '<img style="height: 14px; margin-right: 8px; vertical-align: middle; margin-left: 5px;" src="https://commondatastorage.googleapis.com/ingress.com/img/map_icons/linkmodeicon.png" />' + list.appendChild(this.renderMissionWaypoint(waypoint, index, mission));
mission.waypoints.length; }, this);
html += '<br />';
html += '<p>'; return container;
html += mission.description;
html += '</p>';
html += '</div>';
html += mission.waypoints.map(function(waypoint, index) {
return me.renderMissionWaypoint(waypoint, index, mission);
}).join(' ');
return html;
}, },
renderMissionWaypoint: function(waypoint, index, mission) { renderMissionWaypoint: function(waypoint, index, mission) {
var html = ''; var container = document.createElement('li');
html += '<p>'; container.className = 'plugin-mission-waypoint';
html += '<div style="font-weight: bold;font-size: 1.3em;padding-left: 20px;" >';
if (waypoint.portal) { if (waypoint.portal) {
var color = 'white'; container.appendChild(this.renderPortalCircle(waypoint.portal));
if (waypoint.portal.team === 'R') { // Yay
color = '#00c2ff'; var title = container.appendChild(document.createElement('a'));
} else if (waypoint.portal.team === 'E') { // Booo
color = '#28f428'; var lat = waypoint.portal.latE6/1E6;
} var lng = waypoint.portal.lngE6/1E6;
var realHealth = (waypoint.portal.resCount / 8) * (waypoint.portal.health / 100); var perma = '/intel?ll='+lat+','+lng+'&z=17&pll='+lat+','+lng;
html += this.renderPortalCircle(color, waypoint.portal.level, realHealth);
/* title.href = perma;
var radius = ((realHealth * 360) | 0); title.addEventListener("click", function(ev) {
html += '<div style="display: inline-block; position:relative;margin: 1px; margin-right: 10px;margin-left: -4px;" >'; renderPortalDetails(waypoint.portal.guid);
html += '<div class="arc_start" style="position:absolute;top:0;left:0;width:15px;height: 15px;border-radius:100%;border: 3px solid;border-color:transparent '+color+' '+color+' '+color+';transform: rotate('+radius+'deg);"></div>'; ev.preventDefault();
html += '<div class="arc_end" style="position:absolute;top:0;left:0;width:15px;height: 15px;border-radius:100%;border: 3px solid;border-color:'+color+' '+color+' '+color+' transparent;transform: rotate(405deg);"></div>'; // 360 + 45 return false;
html += '<div style="font-size: 0.8em; font-weight: bold; padding-top: 3px; padding-left: 6.5px;color: '+color+';" > ' + waypoint.portal.level + ' </div>'; }, false);
html += '</div>'; title.addEventListener("dblclick", function(ev) {
*/ zoomToAndShowPortal(waypoint.portal.guid, [lat, lng]);
} ev.preventDefault();
if (waypoint.portal) { return false;
html += '<a href="#" onclick="renderPortalDetails(\'' + waypoint.portal.guid + '\')" >'; }, false);
}
if (waypoint.title) {
html += waypoint.title;
} else { } else {
html += 'Unknown'; var title = container.appendChild(document.createElement('span'));
} }
if (waypoint.portal) {
html += '</a>'; title.className = 'title';
} if(waypoint.title)
html += '</div>'; title.textContent = waypoint.title;
/* else if(waypoint.portal && waypoint.portal.title)
checkbox_grey title.textContent = waypoint.portal.title;
checkbox_orange else
checkbox_cyan title.textContent = 'Unknown';
*/
var img = 'cyan';
if (index === 0) {
img = 'orange';
} else if (!waypoint.objective) {
img = 'grey';
}
// &#10003;
var mwpid = mission.guid + '-' + waypoint.guid; var mwpid = mission.guid + '-' + waypoint.guid;
var checked = this.settings.checkedWaypoints[mwpid]; var checked = this.settings.checkedWaypoints[mwpid];
html += '<a href="#" onclick="plugin.missions.toggleWaypoint(\'' + mission.guid + '\',\'' + waypoint.guid + '\')" >'; var label = container.appendChild(document.createElement('label'));
html += '<span class="wp-' + mwpid + '" style="' + (checked ? '' : 'display: none;') + 'position:absolute; float: left;margin-left: 4px">&#10003;</span>';
html += '<img style="height: 14px; margin-right: 8px; vertical-align: middle;" src="https://commondatastorage.googleapis.com/ingress.com/img/tm_icons/checkbox_' + img + '.png" />'; var checkbox = label.appendChild(document.createElement('input'));
html += '</a>'; checkbox.type = 'checkbox';
html += (waypoint.objective ? waypoint.objective : '?'); checkbox.addEventListener('change', function() {
html += '</p>'; plugin.missions.toggleWaypoint(mission.guid, waypoint.guid);
return html; }, false);
checkbox.className = 'wp-' + mwpid;
var objective = label.appendChild(document.createElement('span'));
objective.textContent = waypoint.objective ? waypoint.objective : '?';
return container;
}, },
renderPortalCircle: function(portalColor, portalLevel, portalHealth) {
var s = 20, renderPortalCircle: function(portal) {
bg = '#999', var team = TEAM_TO_CSS[getTeam(portal)];
c = portalColor, var resCount = portal.resCount;
i = 14, var level = resCount == 0 ? 0 : portal.level; // we want neutral portals to be level 0
ic = '#555',
s2 = ((s / 2) | 0), var container = document.createElement('div');
si = (((s - i) / 2) | 0), container.className = 'plugin-mission-portal-indicator help ' + team;
d = (portalHealth * 180) | 0, container.textContent = level;
num = portalLevel; container.title = 'Level:\t'+level+'\nResonators:\t'+resCount+'\nHealth:\t'+portal.health+'%';
var html = '<div style="width: ' + s + 'px;height: ' + s + 'px;background-color:' + bg + ';border-radius: 50%;position: absolute;margin-top: -4px;margin-left: -23px;" >';
html += '<div>'; for(var i = 0; i< resCount; i++) {
html += '<div style="width: ' + s + 'px;height: ' + s + 'px;position: absolute;border-radius: 50%;clip: rect(0px, ' + s + 'px, ' + s + 'px, ' + s2 + 'px);transform: rotate(' + d + 'deg);" >'; var resonator = container.appendChild(document.createElement('div'));
html += '<div style="width: ' + s + 'px;height: ' + s + 'px;position: absolute;border-radius: 50%;background-color:' + c + ';clip: rect(0px, ' + s2 + 'px, ' + s + 'px, 0px);transform: rotate(' + d + 'deg);">'; resonator.style.transform = 'rotate(' + i*45 + 'deg)';
html += '</div>'; }
html += '</div>'; return container;
html += '<div style="width: ' + s + 'px;height: ' + s + 'px;position: absolute;border-radius: 50%;clip: rect(0px, ' + s + 'px, ' + s + 'px, ' + s2 + 'px);" >';
html += '<div style="width: ' + s + 'px;height: ' + s + 'px;position: absolute;border-radius: 50%;background-color:' + c + ';clip: rect(0px, ' + s2 + 'px, ' + s + 'px, 0px);transform: rotate(' + d + 'deg);" >';
html += '</div>';
html += '</div>';
html += '</div>';
html += '<div style="width: ' + i + 'px;height: ' + i + 'px;position: absolute;margin-left: ' + si + 'px;margin-top: ' + si + 'px;background-color:' + ic + ';border-radius: 50%;" >';
html += '</div>';
html += '<div style="position: absolute; font-size: 0.7em; font-weight: bold;padding-top: 4px; padding-left: 7px;">' + num;
html += '</div>';
html += '</div>';
return html;
}, },
toggleWaypoint: function(mid, wpid, dontsave) { toggleWaypoint: function(mid, wpid, dontsave) {
var mwpid = mid + '-' + wpid; var mwpid = mid + '-' + wpid;
var el = document.getElementsByClassName('wp-' + mwpid); var el = document.getElementsByClassName('wp-' + mwpid);
if (!this.settings.checkedWaypoints[mwpid]) { if(!this.settings.checkedWaypoints[mwpid]) {
this.settings.checkedWaypoints[mwpid] = true; this.settings.checkedWaypoints[mwpid] = true;
window.runHooks('waypointFinished', { mission: this.getMissionCache(mid), waypointguid: wpid }); window.runHooks('waypointFinished', { mission: this.getMissionCache(mid), waypointguid: wpid });
$(el).show();
} else { } else {
delete this.settings.checkedWaypoints[mwpid]; delete this.settings.checkedWaypoints[mwpid];
$(el).hide();
} }
$(el).prop('checked', !!this.settings.checkedWaypoints[mwpid]);
if (!dontsave) { if (!dontsave) {
this.saveData(); this.saveData();
} }
@ -431,7 +445,7 @@ window.plugin.missions = {
} }
}, this); }, this);
$(el).show(); $(el).show();
$(sumel).css('background-color', 'rgba(255, 187, 0, 0.3)'); $(sumel).addClass('checked');
window.runHooks('missionFinished', { mission: mission }); window.runHooks('missionFinished', { mission: mission });
} else { } else {
delete this.settings.checkedMissions[mid]; delete this.settings.checkedMissions[mid];
@ -441,7 +455,7 @@ window.plugin.missions = {
} }
}, this); }, this);
$(el).hide(); $(el).hide();
$(sumel).css('background-color', ''); $(sumel).removeClass('checked');
} }
this.saveData(); this.saveData();
}, },
@ -622,6 +636,7 @@ window.plugin.missions = {
this.settings.checkedMissions = {}; this.settings.checkedMissions = {};
} }
$('<style>').prop('type', 'text/css').html('@@INCLUDESTRING:plugins/missions.css@@').appendTo('head');
$('#toolbox').append('<a href="#" onclick="plugin.missions.openTopMissions();" >Missions in view</a>'); $('#toolbox').append('<a href="#" onclick="plugin.missions.openTopMissions();" >Missions in view</a>');
// window.addPortalHighlighter('Mission start point', this.highlight.bind(this)); // window.addPortalHighlighter('Mission start point', this.highlight.bind(this));