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

description button; sending of html and getting of response

Browse Source
This commit is contained in:
Alexandr Nesterenko 2015-12-10 16:35:23 +00:00
parent 1bbf63c5cb
commit 2059b0a520
5 changed files with 179 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/frontend/setup_tool.py Normal file
View File

@ -0,0 +1,7 @@
def build_xpathes(item_tag_ids, html_json):
shared_tag_queue = [];
def get_selection_tag_ids(item_tag_ids, html_json):
return {'title': [], 'description': []}

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

@ -5,26 +5,107 @@ var MODE_INACTIVE = 1,
MODE_PICKED = 3;
var itemsData = {
title: { id: null, elementHoverBg: '#FFEB0D', elementSelectedBg: '#006dcc', mode: MODE_INACTIVE },
description: { id: null, elementHoverBg: '#FFEB0D', elementSelectedBg: '#2f96b4', mode: MODE_INACTIVE }
title: { id: null, elementHoverBg: '#FFEB0D', elementSelectedBg: '#006dcc', mode: MODE_INACTIVE, name: 'title' },
description: { id: null, elementHoverBg: '#FFEB0D', elementSelectedBg: '#2f96b4', mode: MODE_INACTIVE, name: 'description' }
};
var curItemData = null;
////
// +++ calculation of all selections on server side
////
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
// generate json [tag_name, {attributes_dict}, [children]]
var iframeHtmlJson = null;
function buildJsonFromHtml(doc) {
function tag2json(tag) {
if (tag.attr('tag-id')) {
var tagJson = [tag.prop("tagName").toLowerCase(), {'tag-id': tag.attr('tag-id')}],
children = [];
tag.children().each(function(_, t){
var res = tag2json($(t));
Array.prototype.push.apply(children, res);
});
tagJson.push(children);
return [ tagJson ]
}
else {
var tagListJson = [];
tag.children().each(function(_, t){
var res = tag2json($(t));
Array.prototype.push.apply(tagListJson, res);
});
return tagsListJson;
}
}
if (!iframeHtmlJson)
iframeHtmlJson = tag2json(doc.find(':root'));
return iframeHtmlJson;
}
function calcAllSelections() {
var htmlJson = buildJsonFromHtml($('iframe').contents());
var name_ids = {};
for (var name in itemsData) {
if (!!itemsData[name].id)
name_ids[name] = itemData.id;
}
$.ajax({
type: 'POST',
url: "/setup_generate_selected_ids",
data: JSON.stringify({ html: htmlJson, names: name_ids }),
contentType: "application/json; charset=utf-8",
dataType: "json",
headers: {"X-CSRFToken": getCookie('csrftoken')},
success: function(data){console.log(data);},
failure: function(errMsg) {
console.log('Error:'+ errMsg);
}
});
console.log(JSON.stringify(htmlJson));
}
////
// --- calculation of all selections on server side
////
function updateButtonAndData(itemData, new_mode, tag_id){
if (new_mode)
itemData.mode = new_mode;
var button = $('#st-'+ itemData.name);
switch (itemData.mode) {
case MODE_INACTIVE:
$('#st-title').css('color', '#FFEB0D');
$('#st-title').addClass('disabled');
button.css('color', 'white');
button.addClass('disabled');
itemData.id = null;
break;
case MODE_PICKING:
$('#st-title').css('color', '#FFEB0D');
$('#st-title').removeClass('disabled');
button.css('color', '#FFEB0D');
button.removeClass('disabled');
itemData.id = null;
break;
case MODE_PICKED:
$('#st-title').css('color', 'white');
button.css('color', 'white');
itemData.id = tag_id;
break;
}
@ -32,27 +113,51 @@ function updateButtonAndData(itemData, new_mode, tag_id){
var BG_DATA_KEY = 'st-origin-background';
var PICKED_NAMES_KEY = 'st-picked-item-names';
function setBg(element, bg, pick) {
// save origin background if it's not saved
if (typeof($(element).data(BG_DATA_KEY)) == 'undefined')
$(element).data(BG_DATA_KEY, $(element).css('background'));
// if it's picked element we push the item id into array
if (pick) { // redo for multiselect
if (typeof($(element).data(PICKED_NAMES_KEY)) == 'undefined')
$(element).data(PICKED_NAMES_KEY, []);
$(element).data(PICKED_NAMES_KEY).push(curItemData.name);
}
function setBg(element, bg) {
if (!$(element).data(BG_DATA_KEY))
$(element).data(BG_DATA_KEY, $(element).css('background')); // backup
$(element).css({'background': bg});
}
function clearBg(element) {
if ($(element).data(BG_DATA_KEY))
function clearBg(element, unpick) {
if (unpick) { // redo for multiselect
var picked_names = $(element).data(PICKED_NAMES_KEY);
// remove current item id from element
if (picked_names.indexOf(curItemData.name) > -1)
picked_names.splice(picked_names.indexOf(curItemData.name), 1);
}
// for first take selection color if element was selected
var picked_names = $(element).data(PICKED_NAMES_KEY);
if (typeof(picked_names) != 'undefined' && picked_names.length) {
var name = picked_names[picked_names.length-1];
$(element).css({'background': itemsData[name].elementSelectedBg});
}
// get original background if it saved
else if (typeof($(element).data(BG_DATA_KEY)) != 'undefined')
$(element).css({'background': $(element).data(BG_DATA_KEY)});
}
function selectElement(element, itemData) {
setBg(element, itemData.elementSelectedBg);
setBg(element, itemData.elementSelectedBg, true);
calcAllSelections();
}
function unselectElement(element) {
clearBg(element);
clearBg(element, true);
}
function styleHoverElement(element) {
setBg(element, itemsData.title.elementHoverBg);
setBg(element, curItemData.elementHoverBg);
}
function unstyleHoverElement(element) {
@ -62,19 +167,22 @@ function unstyleHoverElement(element) {
function onIframeElementClick(event) {
event.stopPropagation();
if (!curItemData)
return;
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);
if (curItemData.mode == MODE_PICKED && curItemData.id == $(this).attr('tag-id')) {
unselectElement($('iframe').contents().find('*[tag-id='+ curItemData.id +']')[0]);
updateButtonAndData(curItemData, 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'));
else if (curItemData.mode == MODE_PICKING) {
selectElement(this, curItemData);
updateButtonAndData(curItemData, MODE_PICKED, $(this).attr('tag-id'));
}
}
@ -83,13 +191,14 @@ var previous_hover_element = [];
function onIframeElementHover(event) {
event.stopPropagation();
//console.log(event.type + $(this).attr('tag-id'));
if (!curItemData)
return;
if (!$(this).attr('tag-id')) // tag is not from original html
return;
if ($(this).prop("tagName")) // is not document object
if (itemsData.title.mode == MODE_PICKING)
if (curItemData.mode == MODE_PICKING)
if (event.type == 'mouseenter') {
styleHoverElement(this);
if (this != previous_hover_element)
@ -104,24 +213,36 @@ function onIframeElementHover(event) {
var events_ready = false;
function onItemButtonClick(event) {
if (itemsData.title.mode == MODE_INACTIVE) { // start
var item_name = $(this).attr('id').substring('st-'.length);
if (curItemData && curItemData != itemsData[item_name]) {
// disable another button if it was active
if (curItemData.mode == MODE_PICKING)
updateButtonAndData(curItemData, MODE_INACTIVE);
}
curItemData = itemsData[item_name];
if (curItemData.mode == MODE_INACTIVE) { // start
if (!events_ready) { // temp logic: attche events on first button click
$('iframe').contents().on('mouseenter mouseleave', '*', onIframeElementHover);
$('iframe').contents().on('click', '*', onIframeElementClick);
events_ready = true;
}
updateButtonAndData(itemsData.title, MODE_PICKING);
updateButtonAndData(curItemData, MODE_PICKING);
}
else { // stop picking
if (itemsData.title.mode == MODE_PICKED)
unselectElement($('iframe').contents().find('*[tag-id='+ itemsData.title.id +']')[0]);
updateButtonAndData(itemsData.title, MODE_INACTIVE);
if (curItemData.mode == MODE_PICKED)
unselectElement($('iframe').contents().find('*[tag-id='+ curItemData.id +']')[0]);
updateButtonAndData(curItemData, MODE_INACTIVE);
curItemData = null;
}
}
$(document).ready(function(){
$(document).on('click', '#st-title', onItemButtonClick);
$(document).on('click', '*[id^="st-"]', onItemButtonClick);
});
})();

14
frontend/frontend/templates/frontend/setup.html
View File

@ -2,16 +2,16 @@
{% block content %}
<div class="page-header">
<h1>Feed setup</h1>
<h1 style="display: inline">Feed setup:</h1>
<b id="setup-tool-string">
You will create feed with
<button id="st-title" class="btn btn-large btn-primary disabled has-tooltip" title="Click on the button and move cursor to the below document and pick item you interested in.">Title</button> and
<button id="st-description" class="btn btn-large btn-info disabled">Description</button>.
</b>
</div>
<div class="container" id="setup-tool-string">
I will create feed with
<button id="st-title" class="btn btn-large btn-primary disabled has-tooltip" title="Click on the button and move cursor to the below document and pick item you interested in.">Title</button> and
<button class="btn btn-large btn-info disabled">Description</button>.
</div>
<iframe src="{{ external_page_url }}" frameborder="0" style="width:100%;/*for footer*/">
<iframe src="{{ external_page_url }}" frameborder="0" style="width:100%;/*for footer*/; border:solid">
</iframe>

2
frontend/frontend/urls.py
View File

@ -24,3 +24,5 @@ urlpatterns = i18n_patterns(
url(r'^setup$', views.setup, name='setup'),
url(r'^admin/', include(admin.site.urls)),
)
urlpatterns.append(url(r'^setup_generate_selected_ids$', views.setup_generate_selected_ids, name='setup_generate_selected_ids'))

13
frontend/frontend/views.py
View File

@ -1,5 +1,7 @@
import urllib
import json
from django.views.decorators.csrf import ensure_csrf_cookie
from django.http import HttpResponseRedirect, HttpResponse
from django.shortcuts import render
from django.core.validators import URLValidator
@ -9,6 +11,8 @@ from django.core.urlresolvers import reverse
from .forms import IndexForm
from .settings import DOWNLOADER_PAGE_URL
from .setup_tool import get_selection_tag_ids
def index(request):
if request.method == 'GET' and 'url' in request.GET:
form = IndexForm(request.GET)
@ -25,7 +29,7 @@ def index(request):
return render(request, 'frontend/index.html', {'form': form})
@ensure_csrf_cookie
def setup(request):
if request.method == 'GET' and 'url' in request.GET:
external_page_url = DOWNLOADER_PAGE_URL + urllib.quote(request.GET['url'], safe='')
@ -33,3 +37,10 @@ def setup(request):
return HttpResponse('Url is required')
def setup_generate_selected_ids(request):
if request.method == 'POST':
obj = json.loads(request.body)
html_json = obj['html']
item_names = obj['names']
return HttpResponse(json.dumps(get_selection_tag_ids(item_names, html_json)))