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

setup tools working well; hover highlight is not finished

Browse Source
This commit is contained in:
Alexandr Nesterenko 2016-02-05 08:42:16 -08:00
parent ace68c6979
commit 20114d0f42
1 changed files with 59 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,12 +36,11 @@ var styleTool = {
origin_styles: {}, origin_styles: {},
// list of style for every element // list of style for every element
style_names: {}, style_names: {},
init: function() { hasStyle: function(element, style_name) {
for (var tag_id in id2el) { var id = $(element).attr('tag-id');
styleTool.origin_styles[tag_id] = Style.take(id2el[tag_id]); return id in styleTool.style_names
styleTool.style_names[tag_id] = []; && styleTool.style_names[id].indexOf(style_name) > -1;
}
}, },
unstyle: function(element, style_name) { unstyle: function(element, style_name) {
var id = $(element).attr('tag-id'), var id = $(element).attr('tag-id'),
@ -57,11 +56,15 @@ var styleTool = {
styleTool.origin_styles[id].applyStyle(element); styleTool.origin_styles[id].applyStyle(element);
}, },
style: function(element, style_name) { style: function(element, style_name) {
var id = $(element).attr('tag-id'), var id = $(element).attr('tag-id');
names = styleTool.style_names[id];
// add style to list // add style to list
names.push(style_name); if (!(id in styleTool.style_names))
styleTool.style_names[id] = [];
styleTool.style_names[id].push(style_name);
// backup origin style
if (!(id in styleTool.origin_styles))
styleTool.origin_styles[id] = Style.take(id2el[id]);
// apply style // apply style
styles[style_name].applyStyle(element); styles[style_name].applyStyle(element);
@ -119,7 +122,7 @@ function Item(name, button) {
switch (that.state) { switch (that.state) {
case STATE_INACTIVE: case STATE_INACTIVE:
that.state = STATE_SELECTING; that.state = STATE_SELECTING;
currentItem = that.name; currentItem = that;
break; break;
case STATE_SELECTING: case STATE_SELECTING:
that.state = STATE_INACTIVE; that.state = STATE_INACTIVE;
@ -127,12 +130,14 @@ function Item(name, button) {
break; break;
case STATE_SELECTED: case STATE_SELECTED:
//remove markers //remove markers
that._markers.forEach(function(m){
m.remove();
});
that._markers = [];
that.state = STATE_INACTIVE; that.state = STATE_INACTIVE;
currentItem = null; currentItem = null;
updateSelection().then(function(){ updateSelection();
that.state = STATE_SELECTING;
});
break; break;
} }
_update_button(); _update_button();
@ -149,7 +154,7 @@ function Item(name, button) {
$(button).css('color', '#FFEB0D'); $(button).css('color', '#FFEB0D');
$(button).removeClass('disabled'); $(button).removeClass('disabled');
break; break;
case MODE_SELECTED: case STATE_SELECTED:
$(button).css('color', 'white'); $(button).css('color', 'white');
break; break;
} }
@ -164,7 +169,10 @@ function Item(name, button) {
that.manual_marker = new Marker(element, that.name +'_manual', that._manual_marker_click); that.manual_marker = new Marker(element, that.name +'_manual', that._manual_marker_click);
that._markers.push(that.manual_marker); that._markers.push(that.manual_marker);
updateSelection(); updateSelection().then(function(){
that.state = STATE_SELECTED;
_update_button();
});
} }
function updateSelection() { function updateSelection() {
@ -274,28 +282,37 @@ function requestSelection() {
// gather selected tag-ids // gather selected tag-ids
var name_ids = {}; var name_ids = {};
var selected_any = false;
for (var name in items) { for (var name in items) {
if ([STATE_SELECTING, STATE_SELECTED].indexOf(items[name].state) != -1) if ([STATE_SELECTING, STATE_SELECTED].indexOf(items[name].state) != -1) {
name_ids[name] = $(items[name].manual_marker.element).attr('tag-id'); name_ids[name] = $(items[name].manual_marker.element).attr('tag-id');
selected_any = true;
}
} }
return new Promise(function(resolve, reject){ if (selected_any)
$.ajax({ return new Promise(function(resolve, reject){
type: 'POST', $.ajax({
url: "/setup_get_selected_ids", type: 'POST',
data: JSON.stringify({ html: htmlJson, names: name_ids }), url: "/setup_get_selected_ids",
contentType: "application/json; charset=utf-8", data: JSON.stringify({ html: htmlJson, names: name_ids }),
dataType: "json", contentType: "application/json; charset=utf-8",
headers: {"X-CSRFToken": getCookie('csrftoken')}, dataType: "json",
success: function(data){ headers: {"X-CSRFToken": getCookie('csrftoken')},
resolve(data) success: function(data){
}, resolve(data)
failure: function(errMsg) { },
reject(errMsg); failure: function(errMsg) {
} reject(errMsg);
}
});
console.log(JSON.stringify(htmlJson));
}); });
console.log(JSON.stringify(htmlJson)); else {
}); return new Promise(function(resolve, reject){
setTimeout(function(){ resolve({}); }, 0);
});
}
} }
//// ////
// --- calculation of all selections on server side // --- calculation of all selections on server side
@ -306,7 +323,7 @@ function onIframeElementClick(event) {
event.stopPropagation(); event.stopPropagation();
if (currentItem) if (currentItem)
items[currentItem].onSelectionElementClick(this); currentItem.onSelectionElementClick(this);
} }
var previous_hover_element = []; var previous_hover_element = [];
@ -314,22 +331,17 @@ var previous_hover_element = [];
function onIframeElementHover(event) { function onIframeElementHover(event) {
event.stopPropagation(); event.stopPropagation();
if (!curItemData) if (!currentItem)
return;
if (!$(this).attr('tag-id')) // tag is not from original html
return; return;
if ($(this).prop("tagName")) // is not document object if ($(this).prop("tagName")) // is not document object
if (curItemData.mode == MODE_SELECTING) if (currentItem.state == STATE_SELECTING)
if (event.type == 'mouseenter') { if (event.type == 'mouseenter') {
styleHoverElement(this); styleTool.style(this, 'hover');
if (this != previous_hover_element)
unstyleHoverElement(previous_hover_element);
previous_hover_element = this;
} }
else { // mouseleave else { // mouseleave
unstyleHoverElement(this); if (styleTool.hasStyle(this, 'hover'))
styleTool.unstyle(this, 'hover');
} }
} }
@ -373,11 +385,11 @@ $(document).ready(function(){
// init id2el // init id2el
$('iframe').contents().find('*[tag-id]').each(function(){ $('iframe').contents().find('*[tag-id]').each(function(){
id2el[$(this).attr('tag-id')] = this; id2el[$(this).attr('tag-id')] = this;
// init styleTool
styleTool.init();
}); });
// attach iframe elements click // attach iframe elements event handlers
$('iframe').contents().on('click', '*[tag-id]', onIframeElementClick); $('iframe').contents().on('click', '*[tag-id]', onIframeElementClick);
$('iframe').contents().on('mouseenter mouseleave', '*[tag-id]', onIframeElementHover);
}); });
blinkButton($('#st-title'), 3); blinkButton($('#st-title'), 3);