description button; sending of html and getting of response

frontend/frontend/setup_tool.py

@@ -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': []}

frontend/frontend/static/frontend/assets/js/setup-tool.js

@@ -5,26 +5,107 @@ var MODE_INACTIVE = 1,
     MODE_PICKED = 3;
 
 var itemsData = {
-    title: { id: null, elementHoverBg: '#FFEB0D', elementSelectedBg: '#006dcc', 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 }
+    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');
+            button.css('color', 'white');
-            $('#st-title').addClass('disabled');
+            button.addClass('disabled');
             itemData.id = null;
             break;
         case MODE_PICKING:
-            $('#st-title').css('color', '#FFEB0D');
+            button.css('color', '#FFEB0D');
-            $('#st-title').removeClass('disabled');
+            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) {
+function clearBg(element, unpick) {
-    if ($(element).data(BG_DATA_KEY))
+    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')) {
+    if (curItemData.mode == MODE_PICKED && curItemData.id == $(this).attr('tag-id')) {
-        unselectElement($('iframe').contents().find('*[tag-id='+ itemsData.title.id +']')[0]);
+        unselectElement($('iframe').contents().find('*[tag-id='+ curItemData.id +']')[0]);
-        updateButtonAndData(itemsData.title, MODE_PICKING);
+        updateButtonAndData(curItemData, MODE_PICKING);
         styleHoverElement(this);
     }
     // pick by click
-    else if (itemsData.title.mode == MODE_PICKING) {
+    else if (curItemData.mode == MODE_PICKING) {
-        selectElement(this, itemsData.title);
+        selectElement(this, curItemData);
-        updateButtonAndData(itemsData.title, MODE_PICKED, $(this).attr('tag-id'));
+        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)
+        if (curItemData.mode == MODE_PICKED)
-            unselectElement($('iframe').contents().find('*[tag-id='+ itemsData.title.id +']')[0]);
+            unselectElement($('iframe').contents().find('*[tag-id='+ curItemData.id +']')[0]);
-        updateButtonAndData(itemsData.title, MODE_INACTIVE);
+        updateButtonAndData(curItemData, MODE_INACTIVE);
+
+        curItemData = null;
     }
 }
 
 $(document).ready(function(){
-    $(document).on('click', '#st-title', onItemButtonClick);
+    $(document).on('click', '*[id^="st-"]', onItemButtonClick);
 });
 
 })();

frontend/frontend/templates/frontend/setup.html

@@ -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>
 

frontend/frontend/urls.py

@@ -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'))

frontend/frontend/views.py

@@ -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)))