xpath editor ui

frontend/frontend/settings.py.example

@@ -158,6 +158,7 @@ PIPELINE_JS = {
           'frontend/assets/js/bootstrap_and_overrides.js',
           'frontend/assets/js/xregexp-all.js',
           'frontend/assets/js/setup-tool.js',
+          'frontend/assets/js/setup-tool-ext.js',
           'frontend/assets/js/help.js',
         ),
         'output_filename': 'frontend/js/app.js',

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

@@ -10,20 +10,61 @@ function init_tool(pathes) {
 function check_pathes(pathes) {
 }
 
-function update_tool_ui(config) {
+var _config = null;
+var _active = false;
+
+function updateUI(config) {
+  console.log(config);
+  _config = config;
+
+  $('#ste-parent').val(config[0]);
+  ['title', 'description', 'link'].forEach(function(name){
+      $('#ste-'+ name).val(name in config[1] ? config[1][name] : '');
+  });
 }
 
-window.ext_tool = {
+function showIcon(show) {
+    $("#st-ext-trigger")[0].style.display = show ? "inline-block" : "none";
+}
+
+function changed() {
+    var ch = false;
+    if (_config[0] != $('#ste-parent').val())
+        ch = true;
+    ['title', 'description', 'link'].every(function(name){
+        if (name in _config[1]) {
+            if (_config[1][name] != $('#ste-'+ name).val())
+                ch = true;
+        }
+        else
+            ch = $('#ste-'+ name).val() != '';
+        return !ch;
+    });
+
+    return ch;
+}
+
+function active() {
+    return _active;
+}
+
+window.ET = {
+    'showIcon': showIcon,
     'init': init_tool,
     'check': check_pathes,
-    'update_ui': update_tool_ui
+    'updateUI': updateUI,
+    'active': active
 };
 
 function show_ext(show) {
+    if (show && changed() && !confirm($("#st-clicker-trigger").attr('confirm-text')))
+        return;
     $("#st-ext-trigger")[0].style.display = show ? "inline-block" : "none";
     $("#st-clicker-trigger")[0].style.display = !show ? "inline-block" : "none";
     $("#st-extended")[0].style.display = !show ? "block" : "none";
     $("#st-clicker")[0].style.display = show ? "block" : "none";
+    
+    _active = show;
 }
 
 $(document).ready(function(){

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

@@ -153,7 +153,7 @@ function Item(name, button) {
                 break;
         }
         that.updateButton();
-        updateCreateButton();
+        updateCreateButtonAndExtIcon();
     }
     $(this.button).click(_button_click);
 
@@ -185,7 +185,7 @@ function Item(name, button) {
         updateSelection().then(function(){
             that.state = STATE_SELECTED;
             that.updateButton();
-            updateCreateButton();
+            updateCreateButtonAndExtIcon();
             currentItem = null;
         });
     }
@@ -194,8 +194,11 @@ function Item(name, button) {
         //todo: freeze UI
         loader(true);
         return requestSelection().then(function(data){
+            if (!('xpathes' in data && 'ids' in data)) // removed all selections
+                data = [[] ['', []]];
+
             // go by items
-            for (var name in data) {
+            for (var name in data.ids) {
                 var item = items[name],
                     manual_id = $(item.manual_marker.element).attr('tag-id');
 
@@ -207,18 +210,24 @@ function Item(name, button) {
                     return !remove;
                 });
                 // go by tag-ids for item
-                data[name].forEach(function(id){
+                data.ids[name].forEach(function(id){
                     if (id != manual_id)
                         item._markers.push(new Marker(id2el[id], item.name +'_calculated'));
                 });
                 // remove all hover styles
                 styleTool.unstyleAll('hover');
             }
+
+            // update extended tool selectors
+            xpathes = 'xpathes' in data ? data.xpathes : ['', []];
+            ET.updateUI(xpathes);
+
             loader(false);
             return {};
         }, function(error){
             //unfreez UI
             loader(false);
+            alert("Server error. Developer note: check console log")
             console.log('Server error: '+ error);
         });
     }
@@ -374,19 +383,21 @@ function onItemButtonClick(event) {
 ////
 // ++++ Create button logic
 ////
-function updateCreateButton() {
+function updateCreateButtonAndExtIcon() {
-    var active = false;
+    var selected = false;
 
     for (var name in items)
         if (items[name].state == STATE_SELECTED) {
-            active = true;
+            selected = true;
             break;
         }
 
-    if (active)
+    if (selected)
         $('#create').removeClass('disabled');
     else
         $('#create').addClass('disabled');
+    
+    ET.showIcon(selected && (!currentItem || currentItem.state != STATE_SELECTING)); // hide ext icon in time of selection
 }
 
 function onCreateButtonClick() {

frontend/frontend/templates/frontend/setup.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% load staticfiles %}
-{% load i18n %}_
+{% load i18n %}
 
 {% block content %}
 <div id="loader-bg"><div id="loader"></div></div>
@@ -15,8 +15,8 @@
     <div id="st-extended" style="float:left; display:none">
         <form class="form-inline">
         <div class="input-append">
-            <label class="checkbox" style="width: 70px; margin-right:10px">Item path:</label>
+            <label class="checkbox" style="width: 70px; margin-right:10px">Item xpath:</label>
-            <input type="text" id="ste-parent" class="input-xxlarge"/>
+            <input type="text" id="ste-parent" class="input-xxlarge" placeholder="Skipped"/>
         </div>
         <br/>
         <div class="input-append">
@@ -25,7 +25,7 @@
                 <option selected="selected">Required</option>
                 <option>Optional</option>
             <select>
-            <input type="text" id="ste-title" class="input-xxlarge" />
+            <input type="text" id="ste-title" class="input-xxlarge" placeholder="Skipped"/>
         </div>
         <br/>
         <div class="input-append">
@@ -34,7 +34,7 @@
                 <option>Required</option>
                 <option selected="selected">Optional</option>
             <select>
-            <input type="text" id="ste-link"  class="input-xxlarge" />
+            <input type="text" id="ste-link"  class="input-xxlarge" placeholder="Skipped"/>
         </div>
         <br/>
         <div class="input-append">
@@ -43,14 +43,15 @@
                 <option selected="selected">Required</option>
                 <option>Optional</option>
             <select>
-            <input type="text" id="ste-description" class="input-xxlarge" />
+            <input type="text" id="ste-description" class="input-xxlarge" placeholder="Skipped"/>
         </div>
         </form>
     </div>
     <div style="float:right">
         <a id="st-clicker-trigger" href="javascript:void(0)" style="display:none" class="has-tooltip" title="{% trans 'setup.config' %}"
-            data-trigger="hover focus manual" data-animation="true"><img src="{% static 'frontend/images/target48.png' %}" /></a>
+           data-trigger="hover focus manual" data-animation="true"
-        <a id="st-ext-trigger" href="javascript:void(0)"  style="display:inline-block" class="has-tooltip" title="{% trans 'setup.config' %}"
+           confirm-text="You may loose your changes. Are you shure?"><img src="{% static 'frontend/images/target48.png' %}" /></a>
+        <a id="st-ext-trigger" href="javascript:void(0)"  style="display:none" class="has-tooltip" title="{% trans 'setup.config' %}"
             data-trigger="hover focus manual" data-animation="true"><img src="{% static 'frontend/images/wrench48.png' %}" /></a>
         <button id="create" class="btn btn-large btn-primary disabled" style="" data-page-url="{{ page_url }}" data-feed-page-url="{{ feed_page_url }}">{% trans 'setup.create' %} <i class="icon-arrow-right icon-white" style="margin-top: 3px"></i></button>
     </div>

frontend/frontend/views.py

@@ -74,7 +74,19 @@ def setup_get_selected_ids(request):
         if not _validate_html(html_json):
             return HttpResponseBadRequest('html is invalid')
 
-        return HttpResponse(json.dumps(get_selection_tag_ids(item_names, html_json)))
+        xpathes = build_xpathes_for_items(item_names, html_json)
+        if 'title' in xpathes[1]:
+            xpathes[1]['link'] = _get_link_xpath(xpathes[1]['title'])
+
+        resp = {
+            'xpathes': xpathes,
+            'ids': get_selection_tag_ids(item_names, html_json)
+        }
+
+        return HttpResponse(json.dumps(resp))
+
+def _get_link_xpath(title_xpath):
+    return '('+ title_xpath +')[1]/ancestor-or-self::node()[name()="a"]/@href'
 
 def _create_feed(url, xpathes):
     feed_xpath = xpathes[0]
@@ -90,7 +102,7 @@ def _create_feed(url, xpathes):
             ff = FeedField(feed=feed, field=field, xpath=item_xpathes[field.name])
             ff.save()
         if field.name == 'link' and 'title' in item_xpathes:
-            ff = FeedField(feed=feed, field=field, xpath='('+ item_xpathes['title'] +')[1]/ancestor-or-self::node()[name()="a"]/@href')
+            ff = FeedField(feed=feed, field=field, xpath= _get_link_xpath(item_xpathes['title']))
             ff.save()
 
     return feed.id