prometheus/html/js/prometheus-map.js

160 lines
5.8 KiB
JavaScript

// prometheus-map.js
// rusEFI/Prometheus project
// (c) andreika, 2017 ([email protected])
// https://github.com/andreika-git/prometheus/
$(function() {
$('.map').maphilight();
$('.componentLink').mouseover(function(e) {
var area = $($(this).attr("href"));
area.mouseover();
}).click(function(e) {
var area = $($(this).attr("href"));
area.mouseover();
var re = /([0-9]+),([0-9]+)/g;
var m, sumX = 0, sumY = 0, cnt = 0;
while (m = re.exec(area.attr("coords"))) {
sumX += parseInt(m[1]); sumY += parseInt(m[2]);
cnt++;
}
sumX = parseInt(sumX / cnt) - $("#mapdiv").width() / 2;
sumY = parseInt(sumY / cnt) - $("#mapdiv").height() / 2;
$("#mapdiv").stop();
//if (!$("#mapdiv").is(':animated'))
$("#mapdiv").animate({scrollLeft: sumX, scrollTop: sumY }, 500);
e.preventDefault();
area.trigger("click");
}).mouseout(function(e) {
$($(this).attr("href")).mouseout();
});
});
$(function(){
$("table").colResizable({liveDrag:true});
});
var clicked = false, dragged = false, clickX, clickY;
$("document").ready(function(e) {
//document.onselectstart = function () { return false; }
$(document).mousemove(function(e) {
if (clicked && (e.pageX != clickX || e.pageY != clickY)) {
$("html").css('cursor', 'grabbing');
updateScrollPos(e);
clickX = e.pageX;
clickY = e.pageY;
dragged = true;
}
}).mouseup(function(e) {
if (clicked) {
if (dragged) {
$('html').css('cursor', 'auto');
e.preventDefault();
e.stopPropagation();
} else {
$("#mapdiv area").trigger('click');
}
clicked = false;
}
}).mousedown(function(e) {
var targets = $(e.target).parents().andSelf();
dragged = false;
if (targets.is('#mapdiv') || targets.is('#map')) {
e.preventDefault();
clicked = true;
clickX = e.pageX;
clickY = e.pageY;
return false;
}
}).click(function(e) {
if (clicked)
return false;
return true;
});
$(".maparea").click(function(e) {
if (dragged)
return false;
for (var i = 0; i < components.length; i++) {
if (components[i]["name"] == e.target.id) {
//alert(e.target.id);
$(this).data("maphilight", { alwaysOn: true }).trigger('alwaysOn.maphilight');
$('.selected').data('maphilight', { alwaysOn: false }).trigger('alwaysOn.maphilight');
$('.maparea').removeClass('selected');
$(this).addClass('selected');
var html = "<table border=0><tr><td>";
var imgUrl = (components[i]["more"] && components[i]["more"]["img"]) ? components[i]["more"]["img"] : "https://raw.githubusercontent.com/andreika-git/prometheus/master/html/img/image_na.jpg";
html += "<img src=\"" + imgUrl + "\" width=200 height=200>";
html += "</td><td width=370 valign=top><div>";
html += "<div>Designator: <b>"+components[i]["name"]+"</b></div>";
html += "<div><b>"+components[i]["descr"]+"</b></div>";
html += "<div>Value: <b>"+components[i]["value"]+"</b></div>";
html += "<div>Package: <b>"+components[i]["fp"]+"</b></div>";
if (components[i]["remark"])
html += "<div><b><i>"+components[i]["remark"]+"</i></b></div>";
html += "</div></td>";
if (components[i]["more"]) {
var m = components[i]["more"];
html += "<td valign=top><div>";
if (components[i]["part"]) {
html += "<div>"+(components[i]["supp"])+" Number: <b><a href=\""+(m["url"] ? m["url"] : "#")+"\">"+components[i]["part"]+"</a></b></div>";
}
if (m["ds"]) {
html += "<div><a href=\"" + m["ds"] + "\"><img src=\"https://raw.githubusercontent.com/andreika-git/prometheus/master/html/img/pdf-1.png\" width=32 height=32>" + (m["model"] ? m["model"] : "Datasheet") + "</a></div>";
}
if (m["vname"]) {
html += "<div>Manufacturer: " + (m["vurl"] ? "<a href=\"" + m["vurl"] + "\">" : "") + m["vname"] + (m["vurl"] ? "</a>" : "") + "</div>";
}
if (m["price"]) {
html += "<div>Price: <b>"+m["price"]+"</b></div>";
}
html += "</div></td>";
}
html += "</tr></table>";
$("#mapinfo").html(html);
}
}
e.preventDefault();
return false;
});
$(window).on("resize", function() {
$("#mapdiv").height($(window).height() - $("#mapinfo").height() - 40);
$("#maplinks").height($(window).height() - 40);
});
$(window).trigger('resize');
});
var updateScrollPos = function(e) {
$("html").css('cursor', 'grabbing');
$("#mapdiv").scrollTop($("#mapdiv").scrollTop() + (clickY - e.pageY));
$("#mapdiv").scrollLeft($("#mapdiv").scrollLeft() + (clickX - e.pageX));
}
function putLinks(components)
{
var letter = "", prev = "";
for (var i = 0; i < components.length; i++) {
var c = components[i];
var title = c['name']+"\n"+c['value']+"\n"+c['fp'];
var area = "<area class=\"maparea\" shape=\""+c['shape']+"\" coords=\""+c['coords']+"\" href=\"#"+c['name']+"\" alt=\""+c['name']+"\" id=\""+c['name']+"\" title=\""+title+"\" />";
document.writeln(area);
if (c['name'] != prev) {
prev = c['name'];
var value = c['value'] + ((c['more'] && c['more']['addrem']) ? " " + c['remark'] : "");
var maplinks = "<a class=\"componentLink\" href=\"#"+c['name']+"\" title=\""+title+"\"><b>"+c['name']+"</b> (" + value + ")</a> ";
if (c['name'].substr(0, 1) != letter) {
if (letter != "")
$("#maplinks").append("<br><hr>\n");
letter = c['name'].substr(0, 1);
}
$("#maplinks").append(maplinks);
}
}
$("#maplinks").append("<br>");
}