You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
242 lines
8.8 KiB
242 lines
8.8 KiB
// Horrible proof of concept code :)
|
|
// yes - this is really a hack, if you are a front-ender and want to help, please get in touch!
|
|
|
|
$(document).ready(function () {
|
|
|
|
var current_selected_i;
|
|
var state_clicked = false;
|
|
|
|
var c;
|
|
|
|
// greyed out fill context
|
|
var xctx;
|
|
// redline highlight context
|
|
var ctx;
|
|
|
|
var current_default_xpath = [];
|
|
var x_scale = 1;
|
|
var y_scale = 1;
|
|
var selector_image;
|
|
var selector_image_rect;
|
|
var selector_data;
|
|
|
|
$('#visualselector-tab').click(function () {
|
|
$("img#selector-background").off('load');
|
|
state_clicked = false;
|
|
current_selected_i = false;
|
|
bootstrap_visualselector();
|
|
});
|
|
|
|
$(document).on('keydown', function (event) {
|
|
if ($("img#selector-background").is(":visible")) {
|
|
if (event.key == "Escape") {
|
|
state_clicked = false;
|
|
ctx.clearRect(0, 0, c.width, c.height);
|
|
}
|
|
}
|
|
});
|
|
|
|
// For when the page loads
|
|
if (!window.location.hash || window.location.hash != '#visualselector') {
|
|
$("img#selector-background").attr('src', '');
|
|
return;
|
|
}
|
|
|
|
// Handle clearing button/link
|
|
$('#clear-selector').on('click', function (event) {
|
|
if (!state_clicked) {
|
|
alert('Oops, Nothing selected!');
|
|
}
|
|
state_clicked = false;
|
|
ctx.clearRect(0, 0, c.width, c.height);
|
|
xctx.clearRect(0, 0, c.width, c.height);
|
|
$("#include_filters").val('');
|
|
});
|
|
|
|
|
|
bootstrap_visualselector();
|
|
|
|
|
|
function bootstrap_visualselector() {
|
|
if (1) {
|
|
// bootstrap it, this will trigger everything else
|
|
$("img#selector-background").bind('load', function () {
|
|
console.log("Loaded background...");
|
|
c = document.getElementById("selector-canvas");
|
|
// greyed out fill context
|
|
xctx = c.getContext("2d");
|
|
// redline highlight context
|
|
ctx = c.getContext("2d");
|
|
if ($("#include_filters").val().trim().length) {
|
|
current_default_xpath = $("#include_filters").val().split(/\r?\n/g);
|
|
} else {
|
|
current_default_xpath = [];
|
|
}
|
|
fetch_data();
|
|
$('#selector-canvas').off("mousemove mousedown");
|
|
// screenshot_url defined in the edit.html template
|
|
}).attr("src", screenshot_url);
|
|
}
|
|
// Tell visualSelector that the image should update
|
|
var s = $("img#selector-background").attr('src')+"?"+ new Date().getTime();
|
|
$("img#selector-background").attr('src',s)
|
|
}
|
|
|
|
function fetch_data() {
|
|
// Image is ready
|
|
$('.fetching-update-notice').html("Fetching element data..");
|
|
|
|
$.ajax({
|
|
url: watch_visual_selector_data_url,
|
|
context: document.body
|
|
}).done(function (data) {
|
|
$('.fetching-update-notice').html("Rendering..");
|
|
selector_data = data;
|
|
console.log("Reported browser width from backend: " + data['browser_width']);
|
|
state_clicked = false;
|
|
set_scale();
|
|
reflow_selector();
|
|
$('.fetching-update-notice').fadeOut();
|
|
});
|
|
};
|
|
|
|
|
|
function set_scale() {
|
|
|
|
// some things to check if the scaling doesnt work
|
|
// - that the widths/sizes really are about the actual screen size cat elements.json |grep -o width......|sort|uniq
|
|
$("#selector-wrapper").show();
|
|
selector_image = $("img#selector-background")[0];
|
|
selector_image_rect = selector_image.getBoundingClientRect();
|
|
|
|
// make the canvas the same size as the image
|
|
$('#selector-canvas').attr('height', selector_image_rect.height);
|
|
$('#selector-canvas').attr('width', selector_image_rect.width);
|
|
$('#selector-wrapper').attr('width', selector_image_rect.width);
|
|
x_scale = selector_image_rect.width / selector_data['browser_width'];
|
|
y_scale = selector_image_rect.height / selector_image.naturalHeight;
|
|
ctx.strokeStyle = 'rgba(255,0,0, 0.9)';
|
|
ctx.fillStyle = 'rgba(255,0,0, 0.1)';
|
|
ctx.lineWidth = 3;
|
|
console.log("scaling set x: " + x_scale + " by y:" + y_scale);
|
|
$("#selector-current-xpath").css('max-width', selector_image_rect.width);
|
|
}
|
|
|
|
function reflow_selector() {
|
|
$(window).resize(function () {
|
|
set_scale();
|
|
highlight_current_selected_i();
|
|
});
|
|
var selector_currnt_xpath_text = $("#selector-current-xpath span");
|
|
|
|
set_scale();
|
|
|
|
console.log(selector_data['size_pos'].length + " selectors found");
|
|
|
|
// highlight the default one if we can find it in the xPath list
|
|
// or the xpath matches the default one
|
|
found = false;
|
|
if (current_default_xpath.length) {
|
|
// Find the first one that matches
|
|
// @todo In the future paint all that match
|
|
for (const c of current_default_xpath) {
|
|
for (var i = selector_data['size_pos'].length; i !== 0; i--) {
|
|
if (selector_data['size_pos'][i - 1].xpath === c) {
|
|
console.log("highlighting " + c);
|
|
current_selected_i = i - 1;
|
|
highlight_current_selected_i();
|
|
found = true;
|
|
break;
|
|
}
|
|
}
|
|
if (found) {
|
|
break;
|
|
}
|
|
}
|
|
if (!found) {
|
|
alert("Unfortunately your existing CSS/xPath Filter was no longer found!");
|
|
}
|
|
}
|
|
|
|
|
|
$('#selector-canvas').bind('mousemove', function (e) {
|
|
if (state_clicked) {
|
|
return;
|
|
}
|
|
ctx.clearRect(0, 0, c.width, c.height);
|
|
current_selected_i = null;
|
|
|
|
// Add in offset
|
|
if ((typeof e.offsetX === "undefined" || typeof e.offsetY === "undefined") || (e.offsetX === 0 && e.offsetY === 0)) {
|
|
var targetOffset = $(e.target).offset();
|
|
e.offsetX = e.pageX - targetOffset.left;
|
|
e.offsetY = e.pageY - targetOffset.top;
|
|
}
|
|
|
|
// Reverse order - the most specific one should be deeper/"laster"
|
|
// Basically, find the most 'deepest'
|
|
var found = 0;
|
|
ctx.fillStyle = 'rgba(205,0,0,0.35)';
|
|
for (var i = selector_data['size_pos'].length; i !== 0; i--) {
|
|
// draw all of them? let them choose somehow?
|
|
var sel = selector_data['size_pos'][i - 1];
|
|
// If we are in a bounding-box
|
|
if (e.offsetY > sel.top * y_scale && e.offsetY < sel.top * y_scale + sel.height * y_scale
|
|
&&
|
|
e.offsetX > sel.left * y_scale && e.offsetX < sel.left * y_scale + sel.width * y_scale
|
|
|
|
) {
|
|
|
|
// FOUND ONE
|
|
set_current_selected_text(sel.xpath);
|
|
ctx.strokeRect(sel.left * x_scale, sel.top * y_scale, sel.width * x_scale, sel.height * y_scale);
|
|
ctx.fillRect(sel.left * x_scale, sel.top * y_scale, sel.width * x_scale, sel.height * y_scale);
|
|
|
|
// no need to keep digging
|
|
// @todo or, O to go out/up, I to go in
|
|
// or double click to go up/out the selector?
|
|
current_selected_i = i - 1;
|
|
found += 1;
|
|
break;
|
|
}
|
|
}
|
|
|
|
}.debounce(5));
|
|
|
|
function set_current_selected_text(s) {
|
|
selector_currnt_xpath_text[0].innerHTML = s;
|
|
}
|
|
|
|
function highlight_current_selected_i() {
|
|
if (state_clicked) {
|
|
state_clicked = false;
|
|
xctx.clearRect(0, 0, c.width, c.height);
|
|
return;
|
|
}
|
|
|
|
var sel = selector_data['size_pos'][current_selected_i];
|
|
if (sel[0] == '/') {
|
|
// @todo - not sure just checking / is right
|
|
$("#include_filters").val('xpath:' + sel.xpath);
|
|
} else {
|
|
$("#include_filters").val(sel.xpath);
|
|
}
|
|
xctx.fillStyle = 'rgba(205,205,205,0.95)';
|
|
xctx.strokeStyle = 'rgba(225,0,0,0.9)';
|
|
xctx.lineWidth = 3;
|
|
xctx.fillRect(0, 0, c.width, c.height);
|
|
// Clear out what only should be seen (make a clear/clean spot)
|
|
xctx.clearRect(sel.left * x_scale, sel.top * y_scale, sel.width * x_scale, sel.height * y_scale);
|
|
xctx.strokeRect(sel.left * x_scale, sel.top * y_scale, sel.width * x_scale, sel.height * y_scale);
|
|
state_clicked = true;
|
|
set_current_selected_text(sel.xpath);
|
|
|
|
}
|
|
|
|
|
|
$('#selector-canvas').bind('mousedown', function (e) {
|
|
highlight_current_selected_i();
|
|
});
|
|
}
|
|
|
|
}); |