lexonomy_formatting/view.xsl

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html"/>
    
    <!-- ********************************
         Javascript logic goes here
         Please dont polute xslt with it
         ******************************** -->
         
    <xsl:variable name="global_script">
    <script type='text/javascript'>
        var more_txt = "▼ more";
        var less_txt = "▲ less";
        $(document).ready(function() {
            $(".morelessbutton").click(function() {
                var examples_div = $(this).parent().parent().find('.hideable').first();
                console.log(examples_div.is(":visible"));
                if(examples_div.is(":hidden")) {
                    $(this).text(less_txt);
                } else {
                    $(this).text(more_txt);
                }
                examples_div.slideToggle();
            });
        });
    </script>
    </xsl:variable>
    
    <!-- ********************************
         Here go css styles
         Please dont polute xslt with it
         ******************************** -->
         
    <xsl:variable name="global_style">
    <style type="text/css">
        :root {
            --light-gray: #999999;
            --dark-gray: #666666;
            --light-red: #dd8899;
            --dark-red:#cc3366
        }

        .xslt-clanek {
            font-family: Verdana, sans-serif; 
            font-size: 1rem; 
            line-height: 1.5em;
        }
        .xslt-iztocnica {
            font-size: 1.15em; 
            color: var(--dark-red); 
            font-weight: bold;
        }
        .xslt-besedna-vrsta {
            color: var(--dark-gray); 
            font-style: italic;
        }
        .xslt-pomen-top {
            border-top: 1px dotted var(--light-gray); 
            padding-top: 0.5em; 
            margin-top: 0.5em;
        }
        .xslt-pomen-number {
            float: left; 
            margin-left: 0.5em; 
            color: var(--light-gray); 
            font-weight: bold;
        }
        .xslt-indicator {
            color: var(--light-gray); 
            font-style: italic; 
            text-transform: uppercase;
        }
        .xslt-zgledi {
            list-style-type: circle; 
            float: left; 
            margin-left: 0em; 
            color: var(--dark-gray); 
            margin: 0.5em 0;"
        }
        .xslt-zgled-highlight {
            color: var(--light-red);
        }
        .xslt-morelessbutton-div {
            padding-left: 2em;
            display: inline;
        }
        .xslt-podpomen {
            margin: 0.5em 0.5em;
        }
        .xslt-kolokacija-head {
            color: var(--dark-red);
            display: block;
        }
        
        .xslt-clear {
            clear:both; 
            font-size:0;
        }
    </style>
    </xsl:variable>
    
    <!-- ********************************
         Pomen/podpomen logic
         ******************************** -->
        
    <xsl:template name="pomen_podpomen_logic">
        <xsl:apply-templates select="indikator | oznaka | pomenska_shema"/>
        <div class="xslt-morelessbutton-div">
            <a class="morelessbutton"  href="javascript:void(null)">▼ more</a>
        </div>
        <div class="hideable" style="display: none; ">
            <xsl:apply-templates select="skladenjske_skupine"/>
        </div>
    </xsl:template>
    
    <!-- ********************************
        Here are all of xslt rules
        Please dont polute xslt with it
        ******************************** -->
        
    <!-- Tags to skip -->
    
    <xsl:template match="zapis | korpusi | korpus | frek_lemma | opombe | 
                         pomenska_shema | definicija1 | definicija2 | struktura"/>
                         
    <!-- Tags to convert to insert space before -->
    
    <xsl:template match="kolokacije//p | kolokacije//i">
        <xsl:text xml:space="preserve"> </xsl:text>
        <xsl:apply-templates/>
    </xsl:template>
    
    <!-- root tag, includes global script and tag -->
    
    <xsl:template match="clanek">
        <xsl:copy-of select="$global_script" />
        <xsl:copy-of select="$global_style" />
        
        <div class="xslt-clanek">
            <xsl:apply-templates/>
        </div>
    </xsl:template>

    <xsl:template match="glava">
        <div>
            <xsl:apply-templates/>
        </div>
    </xsl:template>

    <xsl:template match="iztocnica">
        <xsl:text xml:space="preserve"> </xsl:text>
        <span class="xslt-iztocnica">
            <xsl:apply-templates/>
        </span>
        <xsl:text xml:space="preserve"> </xsl:text>
    </xsl:template>

    <xsl:template match="besedna_vrsta">
        <xsl:text xml:space="preserve"> </xsl:text>
        <span class="xslt-besedna-vrsta">
            <xsl:apply-templates/>
        </span>
        <xsl:text xml:space="preserve"> </xsl:text>
    </xsl:template>    
    
    <!-- END of HEAD (glava), go to BODY (geslo) -->

    <xsl:template match="pomen">
        <div class="xslt-pomen-top">
            <div class="xslt-pomen-number">
                <xsl:number />
            </div>
            <div style="margin-left: 2em;">
                <xsl:call-template name="pomen_podpomen_logic"/>
                <xsl:apply-templates select="podpomen"/>
            </div>
            <div style="clear: left;"></div>
        </div>
    </xsl:template>

    <xsl:template match="podpomen">
        <xsl:variable name="pomenNum">
            <xsl:number count="pomen" level="any"/>
        </xsl:variable>
    
        <div class="xslt-podpomen">
            <xsl:value-of select="$pomenNum"/>.<xsl:number/>
            <xsl:call-template name="pomen_podpomen_logic"/>
        </div>
    </xsl:template>

    <xsl:template match="skladenjska_struktura">
        <div style="margin: 0.5em 0; border-left: 8px solid #eeeeee; padding: 0 0 0 0.75em;">
            <xsl:apply-templates/>
        </div>
    </xsl:template>
    
    <xsl:template match="kolokacija | r_kolokacija">
        <xsl:text xml:space="preserve"> </xsl:text>
        <span class="xslt-kolokacija-head">
            <xsl:apply-templates select="ks | p | i"/>
        </span>
        <xsl:text xml:space="preserve"> </xsl:text>
        <xsl:apply-templates select="zgledi"/>
    </xsl:template>
    
    <xsl:template match="kolokacije//ks">
        <xsl:text xml:space="preserve"> (</xsl:text>
        <xsl:apply-templates/>
        <xsl:text xml:space="preserve">) </xsl:text>
    </xsl:template>
    
    <xsl:template match="k[not(position()=last())]">
        <xsl:apply-templates/>
        <xsl:text xml:space="preserve">, </xsl:text>
    </xsl:template>
    
    <xsl:template match="indikator | oznaka">
        <xsl:text xml:space="preserve"> </xsl:text>
        <span class="xslt-indicator">
            <xsl:apply-templates/>
        </span>
        <xsl:text xml:space="preserve"> </xsl:text>
    </xsl:template>
    
   <xsl:template match="zgledi">
        <ul class="xslt-zgledi" >
            <xsl:apply-templates/>
        </ul>
        <div class="xslt-clear"></div>
    </xsl:template>
    
    <xsl:template match="zgled">
        <li><xsl:apply-templates/></li>
    </xsl:template>
    
    <xsl:template match="zgled//i | zgled//k | zgled//l">
        <xsl:text xml:space="preserve"> </xsl:text>
        <span class="xslt-zgled-highlight"><xsl:apply-templates/></span>
    </xsl:template>
        
  </xsl:stylesheet>