v/pol
1
0
Fork 0
mirror of https://github.com/taroved/pol synced 2025-05-16 22:30:09 -07:00
Code Issues Releases Wiki Activity

setup tool: title button is ready

Browse Source
This commit is contained in:
Alexandr Nesterenko 2015-12-09 14:35:37 +00:00
parent f6cb283599
commit 8e5a8d9886
2 changed files with 104 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
downloader.py
View File

@ -44,7 +44,12 @@ def setBaseAndRemoveScriptsAndMore(response, url):
head.insert(0, base) head.insert(0, base)
base.set('href', url) base.set('href', url)
i = 1
for bad in tree.xpath("//*"): for bad in tree.xpath("//*"):
# set tag-id attribute
bad.attrib['tag-id'] = str(i)
i += 1
# remove scripts # remove scripts
if bad.tag == 'script': if bad.tag == 'script':
bad.getparent().remove(bad) bad.getparent().remove(bad)

105
frontend/frontend/static/frontend/assets/js/setup-tool.js
View File

@ -1,41 +1,122 @@
(function(){ (function(){
var MODE_INACTIVE = 1,
MODE_PICKING = 2,
MODE_PICKED = 3;
var itemsData = {
title: { id: null, elementHoverBg: 'yellow', elementSelectedBg: '#006dcc', mode: MODE_INACTIVE },
description: { id: null, elementHoverBg: 'yellow', elementSelectedBg: '#2f96b4', mode: MODE_INACTIVE }
};
function updateButtonAndData(itemData, new_mode, tag_id){
if (new_mode)
itemData.mode = new_mode;
switch (itemData.mode) {
case MODE_INACTIVE:
$('#st-title').css('color', 'white');
$('#st-title').addClass('disabled');
itemData.id = null;
break;
case MODE_PICKING:
$('#st-title').css('color', 'yellow');
$('#st-title').removeClass('disabled');
itemData.id = null;
break;
case MODE_PICKED:
$('#st-title').css('color', 'white');
itemData.id = tag_id;
break;
}
}
var BG_DATA_KEY = 'st-origin-background'; var BG_DATA_KEY = 'st-origin-background';
function styleHoverElement(element) { function setBg(element, bg) {
$(element).data(BG_DATA_KEY, $(element).css('background')); if (!$(element).data(BG_DATA_KEY))
$(element).css({'background': 'yellow'}); $(element).data(BG_DATA_KEY, $(element).css('background')); // backup
$(element).css({'background': bg});
} }
function clearBg(element) {
function unstyleHoverElement(element) { if ($(element).data(BG_DATA_KEY))
$(element).css({'background': $(element).data(BG_DATA_KEY)}); $(element).css({'background': $(element).data(BG_DATA_KEY)});
} }
var previous_hover_element = null; function selectElement(element, itemData) {
setBg(element, itemData.elementSelectedBg);
}
function unselectElement(element) {
clearBg(element);
}
function styleHoverElement(element) {
setBg(element, itemsData.title.elementHoverBg);
}
function unstyleHoverElement(element) {
clearBg(element);
}
function onIframeElementClick(event) {
event.stopPropagation();
if (!$(this).attr('tag-id'))
return;
// unpick by click
if (itemsData.title.mode == MODE_PICKED && itemsData.title.id == $(this).attr('tag-id')) {
unselectElement($('iframe').contents().find('*[tag-id='+ itemsData.title.id +']')[0]);
updateButtonAndData(itemsData.title, MODE_PICKING);
styleHoverElement(this);
}
// pick by click
else if (itemsData.title.mode == MODE_PICKING) {
selectElement(this, itemsData.title);
updateButtonAndData(itemsData.title, MODE_PICKED, $(this).attr('tag-id'));
}
}
var previous_hover_element = [];
function onIframeElementHover(event) { function onIframeElementHover(event) {
event.stopPropagation(); event.stopPropagation();
//console.log(event.type + $(this).attr('tag-id'));
if (!$(this).attr('tag-id')) // tag is not from original html
return;
if ($(this).prop("tagName")) // is not document object if ($(this).prop("tagName")) // is not document object
if (itemsData.title.mode == MODE_PICKING)
if (event.type == 'mouseenter') { if (event.type == 'mouseenter') {
styleHoverElement(this); styleHoverElement(this);
if (previous_hover_element) if (this != previous_hover_element)
unstyleHoverElement(previous_hover_element); unstyleHoverElement(previous_hover_element);
previous_hover_element = this; previous_hover_element = this;
} }
else { else { // mouseleave
unstyleHoverElement(this); unstyleHoverElement(this);
} }
} }
var events_ready = false;
function onItemButtonClick(event) { function onItemButtonClick(event) {
if ($(this).hasClass('disabled')) { // start picking if (itemsData.title.mode == MODE_INACTIVE) { // start
$(this).removeClass('disabled'); if (!events_ready) { // temp logic: attche events on first button click
$('iframe').contents().on('mouseenter mouseleave', '*', onIframeElementHover); $('iframe').contents().on('mouseenter mouseleave', '*', onIframeElementHover);
$('iframe').contents().on('click', '*', onIframeElementClick);
events_ready = true;
}
updateButtonAndData(itemsData.title, MODE_PICKING);
} }
else { // stop picking else { // stop picking
$(this).addClass('disabled'); if (itemsData.title.mode == MODE_PICKED)
$('iframe').contents().off('mouseenter mouseleave', '*', onIframeElementHover); unselectElement($('iframe').contents().find('*[tag-id='+ itemsData.title.id +']')[0]);
updateButtonAndData(itemsData.title, MODE_INACTIVE);
} }
} }