lexonomy_editor_vsms/main.js

var _code = {
prevodi: [],
zgledi: [],
vecjez: [],
indikatorji: [],
xml: null,
original: null,
freq_start: null,

empty_prevod: function() {
  var result = '<prevod>';
  for(let oznaka_tip in constants.oznake) {
      result += `<oznaka tip="${ oznaka_tip }"></oznaka>`;
  }
  result += '<tekst></tekst><vir></vir></prevod>';
  return result;
},
storeXml: function(xml) {
    this.xml = xml;

    for(let loznaka of xml.find("prevod > oznaka")) {
      var oznaka = $(loznaka);
      var tip = oznaka.attr('tip');
      if (!(tip in constants.oznake)) {
        oznaka.attr('tip', 'star');
      }
    }
  
    for(let fstring of constants.prevod_locations) {
        for(let vecjez of xml.find(fstring)) {
            for(let pp of $(vecjez).find('pp')) {
                $(pp).parent().attr('semicolon', 'true');
            }
            
            for(let lprevod of $(vecjez).find("prevod")) {
                var prevod = $(lprevod);
                if(true) {
                    prevod.attr('prevod_id', this.prevodi.length);
                    this.prevodi.push(prevod);
                }
                prevod.attr('line_num', this.vecjez.length);
                prevod.attr('semicolon', prevod.attr('semicolon') || false);

                for(let oznaka_tip in constants.oznake) {
                  var old = prevod.find(`oznaka[tip="${ oznaka_tip }"]`);
                  if(!old.length) {
                    to_prepend = `<oznaka tip="${ oznaka_tip }"></oznaka>`;
                    prevod.prepend($(to_prepend, xml));
                  }
                }
                
                if(prevod.find('rzg').length == 0) {
                    prevod.append($("<rzg />", xml));
                }
            }
            this.vecjez.push($(vecjez));
        }
    }
    
    for(let fstring of constants.zgledi_locations) {
        for(let zgledi of xml.find(fstring)) {
            for(let lzgled of $(zgledi).find('zgled')) {
                var zgled = $(lzgled);
                zgled.attr('jezik', zgled.attr('ime_korpusa') == "hunTenTen12" ? "hun" : "slo");
                zgled.attr('zgled_id', this.zgledi.length);
                this.zgledi.push(zgled);
            }
            for(let lprevod of $(zgledi).find('prevod')) {
                if(!$(lprevod).text().trim().length) {
                    $(lprevod).remove();
                }
            }
        }
    }
    
    for(let lpomen of xml.find("pomen")) {
        var pomen = $(lpomen);
        var indikator = pomen.children(':first');
        if(indikator.prop("tagName") != "indikator") {
            indikator = $(`<indikator />`, xml)
            pomen.prepend(indikator);
        }
            
        indikator.attr('indikator_id', this.indikatorji.length);
        this.indikatorji.push(indikator);        
    }
    
    var opomba = xml.find('glava > opomba');
    if(!opomba.length) {
        var zaglavje = xml.find('glava > zaglavje');
        zaglavje.after($('<opomba></opomba>', xml));
    }

  for(let lclanek of xml.find('clanek')) {
    var clanek = $(lclanek);
    if(!clanek.find('status').length) {
      clanek.prepend($("<status>A-HU</status>", xml));
    }
  }
},
render_freq_start: function() {
    var element = $("#myed-freq-start");
    var freq = element.attr("freq");
    element.text('FREKVENCA: ' + freq);
    /*
    for(let f_lim of constants.freq_stars_limits) {
        var cls = (f_lim > freq) ? "s0" : "s1";
        element.append($(`<span class=${ cls }>*</span>`));
    }
    */
},
isLast: function(el) {
    return el.next().hasClass("myed-prevod-add") || el.next().hasClass('myed-prevod-bin');
},
isFirst: function(el) {
    return !el.prev().hasClass('myed-prevod-div') || el.prev().is(':hidden');
},
moveLeft: function(el) {
    if(!this.isFirst(el)) {
        var xml_el = this.prevodi[el.attr('prevod_id')];
        
        el.prev().before(el);
        xml_el.prev().before(xml_el);
        Screenful.Editor.changed();
    }
},
moveRight: function(el) {
    if(el.next().length && !this.isLast(el)) {
        var xml_el = this.prevodi[el.attr('prevod_id')];
        
        el.next().after(el);
        xml_el.next().after(xml_el);
        Screenful.Editor.changed();
    }
},
cut: function(el) {
    var xml_el = this.prevodi[el.attr('prevod_id')];
    el.toggleClass('myed-prevod-cut');
    xml_el.attr('cut', el.hasClass('myed-prevod-cut'));
    
    // move to end if cutted
    if(el.hasClass('myed-prevod-cut')) {
        this.move_to_end(el);
    }
    Screenful.Editor.changed();
},
move_to_end: function(el) {
    var xml_el = this.prevodi[el.attr('prevod_id')];
    while(el.next().length && !this.isLast(el)) {
        el.next().after(el);
        xml_el.next().after(xml_el);
    }
},
bin: function(el) {
    el.toggleClass('myed-prevod-bin');
    this.move_to_end(el);
    this.prevodi[el.attr('prevod_id')].attr('bin', el.hasClass('myed-prevod-bin'));
    Screenful.Editor.changed();
},
change: function(el, func_after) {
    var text_el = el.find('.myed-prevod-text');
    var razlaga_el = el.find('.myed-prevod-razlaga');
    var oznake_el = el.find('.myed-oznaka').map(function() { 
        var result = $(this).text(); 
        if(result.length) 
            return result;
    });
    var self = this;
    
    self.show_modal(text_el.text(), razlaga_el, oznake_el, function(status, data) {
        var text = data["prevedek"];
        var razlaga = data['razlaga'];
        var razlaga_tax = data['razlaga_tax'];
        var deleteOld = data['remove_old'];
        var oznake = data['oznake'];
        
        if(status) {
            text_el.text(text);
            razlaga_el.text(razlaga);
            razlaga_el.attr('taksonomija', razlaga_tax);
            
            var xml_el = self.prevodi[el.attr('prevod_id')];
            xml_el.find('tekst').text(text);
            
            if(xml_el.find('rzg').length == 0) {
                xml_el.append("<rzg />", this.xml);
            }
            xml_el.find('rzg').text(razlaga);
            xml_el.find('rzg').attr('taksonomija', razlaga_tax);

            for (let oznaka of oznake) {
              var tip = oznaka[0];
              var value = oznaka[1];

              // remove --
              while(value.startsWith('-') || value.startsWith(' ')) {
                value = value.substring(1, );
              }

              // write into xml
              var oznaka_xml = xml_el.find(`oznaka[tip="${ tip }"]`);
              oznaka_xml.text(value);

              // write into html
              var oznaka_html = el.find(`span[title="${ tip }"]`);
              oznaka_html.text(value);
            }
            
            if(deleteOld) {
                xml_el.find(`oznaka[tip="star"]`).text("");
                el.find(`span[title="star"]`).text("");
            }

            Screenful.Editor.changed();
        }
        
        if(func_after) {
            func_after(status);
        }
        el.focus();
    });
},
add: function(el) {
    var self = this;
    
    var to_clone = $('.myed-prevod-div').first();
    var clone = $('<div class="myed-prevod-div">' + to_clone.html() + "</div>");
    clone.attr('tabindex', '1');
    clone.attr('prevod_id', this.prevodi.length);
    clone.find('.myed-clanek-select').prop("selectedIndex", -1);
    
    clone.insertBefore(el);
    var xml_container = this.vecjez[el.attr('line_num')];
    var new_child = $(this.empty_prevod(), this.xml);
    
    xml_container.append(new_child);
    this.prevodi.push(new_child);
    this.change(clone, function(result) { if(!result) { self.bin(clone); }});
},
semicolon: function(el) {
    var scel = el.find('.myed-prevod-semicolon');
    
    scel.toggleClass('myed-prevod-semicolon-hidden');
    var xml_el = this.prevodi[el.attr('prevod_id')];
    xml_el.attr('semicolon', !scel.hasClass('myed-prevod-semicolon-hidden'));
},
action: function(el, action) {
    if(action == 'left') {
        this.moveLeft(el);
    }
    else if(action == 'right') {
        this.moveRight(el);
    }
    else if(action == "cut") {
        this.cut(el);
    }
    else if(action == "bin") {
        this.bin(el);
    }
    else if(action == "edit") {
        this.change(el, null);
    }
    else if(action == "semicolon") {
        this.semicolon(el);
    }
},
indikatorEdit: function(el, val) {
    this.indikatorji[$(el).attr('indikator_id')].text(val);
    $(el).text(val);
    Screenful.Editor.changed();
},
zgledPrevod: function(el, val) {
    var zgled_id = el.attr('zgled_id');
    var zgled = this.zgledi[zgled_id];
    var new_el = $(`<prevod><tekst>${ val }</tekst></prevod>`);
    
    el.parent().text(val);
    el.remove();
    
    zgled.after(new_el);
    Screenful.Editor.changed();
},
registerCallbacks: function() {
    var self = this;
    var root = $(".clanek");
    
    function get_prevod_div(element) {
        while(element.parent().length) {
            if(element.hasClass('myed-prevod-div')) {
                return element;
            }
            element = element.parent();
        }
        return null;
    }
    
    root.on('change', '.myed-clanek-select', function(e) {
        var el = get_prevod_div($(this));
        var action = $(this).find(":selected").val();
        self.action(el, action);
        $(this).prop("selectedIndex", -1);
    });
    
    root.on('click', '.myed-prevod-add', function(e) {
        self.add($(this));
    });
    
    root.on('click', '.myed-indikator', function() {
        var el = $(this);
        $.sweetModal.prompt('Indikator', 'Vstavi:', el.text(), function(val) {
            self.indikatorEdit(el, val);
        });
    });
    
    root.on('keydown', '.myed-prevod-div', function(e) {
        var action = {
            13: "edit",
            37: "left",
            39: "right",
            46: "cut"
        }[e.keyCode];
        
        if(action) {
            self.action($(this), action);
            $(this).focus();
        }
    });
    
    root.on('click', '.myed-zgled-prevod-btn', function(e) {
        var el = $(this);
        $.sweetModal.prompt('Prevod Zgleda', 'Vstavi:', '', function(val) {
            self.zgledPrevod(el, val);
        });
    });
    
    root.on('click', '#myed-opomba', function() {
        var el = $(this);
        $.sweetModal.prompt('Opomba', 'Opomba', el.text(), function(val) {
            el.text(val);
            self.xml.find('glava > opomba').text(val);
            Screenful.Editor.changed();
        });
    });

    // fixing modal stuff
    $('body').on('keydown', '.sweet-modal-prompt', function(e) {
        if(e.keyCode == 13) {
            $('.greenB').first().trigger('click')
            return false;
        }
        else if(e.keyCode == 27) {
            $('.redB').first().trigger('click')
            return false;
        }
    });
},
clanekOldCode: function() {
    // script from original xslt, don't really wanna touch this!
    var clanekShowHide = function(button) {
        if(button.target.tagName !== "INPUT") {
            // this actually triggers a few times, so...
            return;
        }
        
        var clanek = $('.clanek');
        var boolCollocations = clanek.find(".lblCollocations input").prop("checked");
        var boolExamples = clanek.find(".lblExamples input").prop("checked");
        
        if(boolExamples) {
            clanek.find(".hiddenExample").slideDown();
        }
        else {
            clanek.find(".hiddenExample").slideUp();
        }
        if(boolCollocations) {
            clanek.find(".hiddenBlock").slideDown(); 
        }
        else {
            clanek.find(".hiddenBlock").slideUp();
        }
    };
    
    var clanek = $('.clanek');
    var lblCollocations = clanek.find(".lblCollocations");
    var lblExamples = clanek.find(".lblExamples");
    
    lblExamples.hide();
    lblCollocations.hide()
    
    if(clanek.find(".hiddenBlock").length > 0) {
        lblCollocations.show()
        lblCollocations.first().on("click", clanekShowHide);
        clanek.find(".buttons").show();
    }
    if(clanek.find("*:visible > .hiddenExample").length > 0) {
        lblExamples.show()
        lblExamples.first().on("click", clanekShowHide);
        clanek.find(".buttons").show();
    }
    
    // this is actually new but belongs here
    $(".lblPrevodi").first().on('click', function(e) {
        if(e.target.tagName !== "INPUT") {
            return;
        }
        $('.myed-zgled-prevod-btn').parent().toggle();
    });
    $('.myed-zgled-prevod-btn').parent().toggle();
},
editor: function(div, entry, uneditable) {
    var xml = $($.parseXML(entry.content));
    
    // for "dodajanje prevodov" we need a model div to copy.
    // we create one here, that is then made invisible, but is
    // available for copying
    $(this.empty_prevod(), xml).insertBefore(xml.find('prevod').first());
    
    // adding prevod_id to prevodi
    this.storeXml(xml);
    sessionStorage.myed_original = entry.content;
    
    var xsltProcessor = new XSLTProcessor();
    xsltProcessor.importStylesheet(plugin_xslt);
    resultDocument = xsltProcessor.transformToFragment(xml[0], document);
    $(div).append(resultDocument);
    
    // now I need to hide first prevod that was inserted into
    // xml by this script, in order to be able to clone it
    $('.myed-prevod-div').first().hide();   
    xml.find('prevod').first().remove();
    
    this.render_freq_start();
    this.clanekOldCode();
    this.registerCallbacks();
    
    // select nothing in all hamburger dropdowns
    $('.myed-clanek-select').prop("selectedIndex", -1);
},
oznaka_callback: function(el) {
  var select = el.parent().find('select');
  var text = window.prompt("Nova oznaka");
  select.append($('<option>', { text: text, selected: "selected" }));
},
show_modal: function(prevedek, razlaga, oznake, callback) {
    var self = this;

    function grabContent(status) {
        if(!callback) return;
        var oznake_t = $('.myed-oznaka-div').map(function() {
          var selected = $(this).find(":selected").text();
          var tip = $.trim($(this).find('.myed-oznaka-key').first().text());
          return [[tip, selected]];
        }).get();
        var callback_data = {
            "prevedek": $('#myed-sm-prevedek').val(),
            "razlaga":  $('#myed-sm-razlaga').val(),
            "razlaga_tax": $('#myed-tax').prop( "checked" ),
            "remove_old": $( ".myed-old-oznaka-delete" ).prop( "checked" ),
            "oznake": oznake_t
        };
        callback(status, callback_data);
    };
    
    function isOznakaChosen(opt) {
      for(let o of oznake) {
          var idx = opt.indexOf(o);
          // either the whole word or after '-- '
          // solving the problem of "-- biokemija" and "kemija" and simmilar (i know, a bad solution)
          if(idx == 0 || idx == 3) { 
            return true;
          }
      }
      return false;
    }
    
    var options = "";
    for(let [key, value] of Object.entries(constants.oznake)) {
      options += `<div class='myed-oznaka-div'><span class="myed-oznaka-key">${key}</span> <select><option></option>`;
      for(let option of value) {
        var optStart = "<option";
        if(isOznakaChosen(option)) {
            optStart += " selected";
        }
        options += `${optStart}>${ option }</option>`;
      }
      options += "</select><input class='myed-oznaka-input' type='button' value='drugo' /></div>";
    }
    
    var tax = razlaga.attr('taksonomija') == "true" ? "checked" : ""; 
    var izbrisiStareOznake = '<input class="myed-old-oznaka-delete" type="checkbox" name="deleteold" value="deleteold" id="deleteold"><label for="deleteold">Izbrisi stare oznake</label>';
    
    $.sweetModal({
        title: 'Spreminjanje Prevedka',
        content: `
        Prevedek: <div class="sweet-modal-prompt"><input id="myed-sm-prevedek" type="text" value="${ prevedek }" /></div><br />
        Razlaga: <div class="sweet-modal-prompt"><input id="myed-sm-razlaga" type="text" value="${ razlaga.text() }" /></div><br />
        <input id="myed-tax" type="checkbox" name="taksonomija" value="taksonomija" ${ tax }><label for="taksonomija">Razlaga je taksonomija</label><br />
        Oznake: ${ options }<br />${ izbrisiStareOznake }`,
        buttons: {
            save: {
                label: 'Shrani',
                classes: 'greenB',
                action: function() { grabContent(true); },
            },
            cancel: {
                label: 'Preklici',
                classes: 'redB',
                action: function() { grabContent(false); },
            }
        },
        onOpen: function() { 
          $('#myed-sm-prevedek').focus(); 
          $('.myed-oznaka-input').on('click', function(e) { self.oznaka_callback($(this)); });
        }
    });
},
harvester: function(div) {
    for(let fstring of constants.prevod_locations) {
        for(let vecjez of this.xml.find(fstring)) {
            for(let pp of $(vecjez).find('pp')) {
                $(pp).remove();
            }
            
            var all_prevod = $(vecjez).find("prevod");
            // if only one prevod and that one is deleted, just create an empty one.
            if(all_prevod.length == 1 && $(all_prevod[0]).attr('bin') == 'true') {
                var empty = this.empty_prevod();
                all_prevod.append(empty);
                $(all_prevod[0]).after(empty);
            }
            
            for(let lprevod of all_prevod) {
                var prevod = $(lprevod);
                if(prevod.attr('bin') == 'true') {
                    prevod.remove();
                    continue;
                }
                
                if(prevod.attr('semicolon') == 'true') {
                    prevod.append($("<pp/>", this.xml));
                }
                
                prevod.removeAttr('semicolon');
                prevod.removeAttr('bin');
            }
        }
    }

    // save status
    var status_txt = $('input[name=status]:checked', '#myed-status').val();
    this.xml.find('status').text(status_txt);
    
    return (new XMLSerializer()).serializeToString(this.xml[0]);
},
}

function plugin_render(div, entry) {
    _code.editor(div, entry, true);
}

function plugin_save(div) {
    _code.harvester(div, entry, true);
}