lexonomy_editor_vsms/main.js

{
prevodi: null,
zgledi: null,
vecjez: null,
xml: null,
original: null,
freq_start: null,

prevod_locations: [
    'pomen > vecjez', 
    'pomen > skladenjske_skupine > skladenjska_struktura > kolokacije > vecjez',
    'pomen > stalne_zveze > stalna_zveza > vecjez',
    'frazeoloske_zveze > frazeoloska_enota > vecjez'
],
zgledi_locations: [
    'zgledi > vecjez',
    'zgledi'
],
empty_prevod: '<prevod><tekst></tekst><vir></vir></prevod>',
oznake: ["a", "b", "c", "iztok", "ozbo", "hhhh"],
freq_stars_limits: [0, 552, 5206, 8613, 22561],

storeXml: function(xml) {
    this.xml = xml;
    this.prevodi = [];
    this.vecjez = [];
    this.zgledi = [];
    
    for(let fstring of this.prevod_locations) {
        for(let vecjez of xml.find(fstring)) {
            for(let pp of $(vecjez).find('pp')) {
                $(pp).prev().attr('semicolon', 'true');
            }
            
            for(let lprevod of $(vecjez).find("prevod")) {
                var prevod = $(lprevod);
                if(prevod.text()) {
                    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);
            }
            this.vecjez.push($(vecjez));
        }
    }
    
    for(let fstring of this.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();
                }
            }
        }
    }
    
    var opomba = xml.find('glava > opomba');
    if(!opomba.length) {
        var zaglavje = xml.find('glava > zaglavje');
        zaglavje.after($('<opomba></opomba>', xml));
    }
},
loadDependencies: function(url) {
    this.loadJs("https://cdn.jsdelivr.net/npm/sweet-modal@1.3.2/dist/min/jquery.sweet-modal.min.js");
    this.loadCss('https://cdn.jsdelivr.net/npm/sweet-modal@1.3.2/dist/min/jquery.sweet-modal.min.css');
},
loadCss: function(url) {
    var link  = document.createElement('link');
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = url;
    link.media = 'all';
    $('head').append(link);
},
loadJs: function(url) {
    var newscript = document.createElement('script');
    newscript.type = 'text/javascript';
    newscript.async = true;
    newscript.src = url;
    $('head').append(newscript);
},
render_freq_start: function() {
    var element = $("#myed-freq-start");
    var freq = element.attr("freq");
    for(let f_lim of this.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 self = this;
    
    self.show_modal(text_el.text(), razlaga_el.text(), function(status, text, razlaga) {
        if(status) {
            text_el.text(text);
            razlaga_el.text(razlaga);
            
            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);
            
            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);
    }
},
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('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 xslt_content = new window.DOMParser().parseFromString(this.xslt, "text/xml");
    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(xslt_content);
    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();
    
    var styleTag = document.createElement('style');
    styleTag.type = 'text/css';
    styleTag.appendChild(document.createTextNode(this.css));
    document.head.appendChild(styleTag);
    
    this.render_freq_start();
    this.clanekOldCode();
    this.loadDependencies();
    this.registerCallbacks();
    
    // select nothing in all hamburger dropdowns
    $('.myed-clanek-select').prop("selectedIndex", -1);
},
show_modal: function(prevedek, razlaga, callback) {
    function grabContent(status) {
        if(!callback) return;
        var prevedek_t = $('#myed-sm-prevedek').val();
        var razlaga_t = $('#myed-sm-razlaga').val();
        callback(status, prevedek_t, razlaga_t);
    };
    
    var options = "";
    for(let option of this.oznake) {
        options += `<option>${ option }</option>`;
    }
    
    $.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 }" /></div><br />
        Oznaka: <select> ${ options } </select`,
        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(); }
    });
},
harvester: function(div) {
    for(let fstring of this.prevod_locations) {
        for(let vecjez of this.xml.find(fstring)) {
            for(let pp of $(vecjez).find('pp')) {
                $(pp).remove();
            }
            
            for(let lprevod of $(vecjez).find("prevod")) {
                var prevod = $(lprevod);
                if(prevod.attr('semicolon') == 'true') {
                    prevod.append($("<pp/>", this.xml));
                }
            }
        }
    }
    
    // console.log((new XMLSerializer()).serializeToString(this.xml[0]));
    // return sessionStorage.myed_original;
    return (new XMLSerializer()).serializeToString(this.xml[0]);
},
xslt: XSLFILE,
css: CSS,
}