Opomba implemented and freq logic moved (xsl -> js)

main.css

@@ -2,6 +2,19 @@
     font-size: 1em
 }
 
+#myed-freq-start {
+    float: right;
+}
+
+#myed-opomba {
+    float: right;
+    margin-right: 1em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    background-color: #e9d76d;
+    cursor: pointer;
+}
+
 .myed-prevod-div {
     display: inline;
     color: #3366ee;

main.js

@@ -4,6 +4,7 @@ zgledi: null,
 vecjez: null,
 xml: null,
 original: null,
+freq_start: null,
 
 prevod_locations: [
     'pomen > vecjez', 
@@ -17,6 +18,7 @@ zgledi_locations: [
 ],
 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;
@@ -58,6 +60,12 @@ storeXml: function(xml) {
             }
         }
     }
+    
+    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");
@@ -78,6 +86,14 @@ loadJs: function(url) {
     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');
 },
@@ -160,6 +176,7 @@ add: function(el) {
     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')];
@@ -253,6 +270,15 @@ registerCallbacks: function() {
         });
     });
     
+    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) {
@@ -346,6 +372,7 @@ editor: function(div, entry, uneditable) {
     styleTag.appendChild(document.createTextNode(this.css));
     document.head.appendChild(styleTag);
     
+    this.render_freq_start();
     this.clanekOldCode();
     this.loadDependencies();
     this.registerCallbacks();

main.xslt

@@ -11,21 +11,22 @@
     <xsl:template match="clanek/glava">
         <div>
             <xsl:apply-templates select="korpusi/korpus[1]/frek_lema | oblika/iztocnica | zaglavje/besedna_vrsta"/>
+            <span id="myed-opomba"><xsl:apply-templates select="opomba"/></span>
         </div>
     </xsl:template>
 
     <xsl:template match="korpusi/korpus/frek_lema">
+        <xsl:element name="span">
+            <xsl:attribute name="id">myed-freq-start</xsl:attribute>
+            <xsl:attribute name="freq"><xsl:apply-templates /></xsl:attribute>
+        </xsl:element>
+    </xsl:template>
+
+    <xsl:template match="clanek/opomba">
         <xsl:text xml:space="preserve"> </xsl:text>
-        <span style="float: right;">
+        <span style="font-size: 1.2em; color: #cc3366; font-weight: bold;">
-            <xsl:choose>
+            <xsl:apply-templates/>
-                <xsl:when test="number(.)&gt;22561"><span class="s1">⁕</span><span class="s1">⁕</span><span class="s1">⁕</span><span class="s1">⁕</span><span class="s1">⁕</span></xsl:when>
-                <xsl:when test="number(.)&gt;8613"> <span class="s1">⁕</span><span class="s1">⁕</span><span class="s1">⁕</span><span class="s1">⁕</span><span class="s0">⁕</span></xsl:when>
-                <xsl:when test="number(.)&gt;5206"> <span class="s1">⁕</span><span class="s1">⁕</span><span class="s1">⁕</span><span class="s0">⁕</span><span class="s0">⁕</span></xsl:when>
-                <xsl:when test="number(.)&gt;552">  <span class="s1">⁕</span><span class="s1">⁕</span><span class="s0">⁕</span><span class="s0">⁕</span><span class="s0">⁕</span></xsl:when>
-                <xsl:otherwise>                     <span class="s1">⁕</span><span class="s0">⁕</span><span class="s0">⁕</span><span class="s0">⁕</span><span class="s0">⁕</span></xsl:otherwise>
-            </xsl:choose>
         </span>
-        <xsl:text xml:space="preserve"> </xsl:text>
     </xsl:template>
 
     <xsl:template match="clanek/glava/oblika/iztocnica">