Changeset 22598

Show
Ignore:
Timestamp:
10.08.2010 17:27:10 (9 years ago)
Author:
sjb48
Message:

More work on format statements. New elements can now be added by dragging in to the sortables. Javascript is now more modular.

Location:
main/trunk/greenstone3/web/interfaces/oran
Files:
1 added
3 modified

Legend:

Unmodified
Added
Removed
  • main/trunk/greenstone3/web/interfaces/oran/js/gui_div.js

    r22569 r22598  
    1313    console.log("Document ready function\n"); 
    1414 
    15     $('a.minmax').bind('click', toggleContent); 
    16     $('a.remove').bind('click', removeContent); 
    17  
    18     $(".elementType").draggable({ 
     15    /******************************************/ 
     16    /*              DRAGGABLES                */ 
     17    /******************************************/ 
     18 
     19    $(".element_type_gsf_template").draggable({ 
     20            connectToSortable: '#formatStatement', 
     21            helper: 'clone', 
     22            revert: 'invalid' 
     23    }); 
     24 
     25    $(".element_type_table").draggable({ 
    1926            connectToSortable: '.gsf_template', 
    2027            helper: 'clone', 
    21             revert: 'invalid', 
    22             //start: function(event, ui) { ui.item.addClass('replaceMe');}, 
    23             stop: function(event, ui) { 
    24                 console.log("Stopped dragging - do we want to create element?"+ui.helper); 
    25                 ui.helper.addClass('replaceMe'); 
    26             }, 
    27         }); 
    28  
    29     /* 
    30     $('.elementType').sortable({ 
    31             cursor: 'pointer', 
    32             tolerance: 'pointer', 
    33             //placeholder:'placeholder', 
    34             connectWith:'.gsf_template', 
    35             //cancel: '.elementType', 
    36              
    37             start: function(event, ui) { 
    38                         $(this).clone().insertAfter(this);; 
    39             }, 
    40  
    41     }); 
    42     */ 
     28            revert: 'invalid' 
     29    }); 
     30 
     31    $(".element_type_tr").draggable({ 
     32            connectToSortable: '.gsf_table', 
     33            helper: 'clone', 
     34            revert: 'invalid' 
     35    }) 
     36 
     37    $(".element_type_td").draggable({ 
     38            connectToSortable: '.gsf_table', 
     39            helper: 'clone', 
     40            revert: 'invalid' 
     41    }) 
     42 
     43    $(".element_type_text").draggable({ 
     44            connectToSortable: '.gsf_otherwise', 
     45            helper: 'clone', 
     46            revert: 'invalid' 
     47    }); 
    4348     
    44      function templateAdded() { 
    45          var item = $('.elementType'); 
    46          // do something with "item" - its your new pretty cloned dropped item ;] 
    47          item.replaceWith('<h2>REPLACED</h2>');   
    48          //item.addClass( 'added' ); 
    49      };     
     49    $(".element_type_gsf_choose_metadata").draggable({ 
     50            connectToSortable: '.gsf_template', 
     51            helper: 'clone', 
     52            revert: 'invalid' 
     53    }); 
     54 
     55    $(".element_type_gsf_metadata").draggable({ 
     56            connectToSortable: '.gsf_choose_metadata, .gsf_template, .gsf_when, .gsf_otherwise, .td', 
     57            helper: 'clone', 
     58            revert: 'invalid' 
     59    }); 
     60 
     61    $(".element_type_gsf_link").draggable({ 
     62            connectToSortable: '.gsf_template', 
     63            helper: 'clone', 
     64            revert: 'invalid' 
     65    }); 
     66 
     67    // switch, when, otherwise, icon 
     68    $(".element_type_gsf_switch").draggable({ 
     69            connectToSortable: '.gsf_template', 
     70            helper: 'clone', 
     71            revert: 'invalid' 
     72    }); 
     73 
     74    $(".element_type_gsf_when").draggable({ 
     75            connectToSortable: '.gsf_switch', 
     76            helper: 'clone', 
     77            revert: 'invalid' 
     78    }); 
     79 
     80    $(".element_type_gsf_otherwise").draggable({ 
     81            connectToSortable: '.gsf_switch', 
     82            helper: 'clone', 
     83            revert: 'invalid' 
     84    }); 
     85 
     86    $(".element_type_gsf_icon").draggable({ 
     87            connectToSortable: '.gsf_link', 
     88            helper: 'clone', 
     89            revert: 'invalid' 
     90    }); 
     91 
    5092  
     93    /******************************************/ 
     94    /*               SORTABLES                */ 
     95    /******************************************/ 
     96 
     97    bind_all_sortables(); 
     98 
    5199    $('#formatStatement').sortable({ 
    52100            cursor: 'pointer', 
    53101            tolerance: 'pointer', 
    54102            items: '.gsf_template', 
    55             placeholder:'placeholder' 
     103            placeholder:'placeholder', 
    56104            //'nested':'div' 
     105            stop: function(event, ui) { 
     106                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('css_gsf_template')) { replace_with(ui.item,gsf_template_element); } 
     107            } 
    57108    }); 
    58109     
    59     $('.gsf_template').sortable({ 
    60             'cursor':'pointer', 
    61             'tolerance': 'pointer', 
    62             'items':'.table, .gsf_choose-metadata, .gsf_metadata', 
    63             'placeholder':'placeholder', 
    64             //'nested':'.gsf:metadata' 
    65             stop: function(event, ui) { 
    66                 if (ui.item.hasClass("elementType") && ui.item.hasClass('css_gsf_template')) { 
    67                         ui.item.replaceWith(gsf_metadata_element); //'<div class="element element-txt">This text box has been added!</div>'); 
    68                         //ui.item.style.border =  
    69                 } 
    70             } 
    71  
    72             //receive: function(event, ui) {  
    73             //    console.log("I have received an item"); 
    74                 //var item = $('.ui_sortable/.elementType'); 
    75             //    var item = $('.div/.elementType'); //css_gsf_template not(.gsf_template)'); 
    76             //    console.log(item); 
    77                 //item.replaceWith('<h2>REPLACED</h2>'); 
    78             //} 
    79  
    80     }); 
    81  
    82     $('.td').sortable({ 
    83             'cursor':'pointer', 
    84             'tolerance': 'pointer', 
    85             'items':'.leaf .gsf_choose-metadata, .gsf_link, .gsf_switch', 
    86             'placeholder':'placeholder' 
    87             //'nested':'.gsf:metadata' 
    88     }); 
    89   
    90     $('.gsf_choose-metadata').sortable({ 
    91             'cursor':'pointer', 
    92             'tolerance': 'pointer', 
    93             'items':'.gsf_metadata', 
    94             'placeholder':'placeholder', 
    95             'connectWith':'.gsf_choose-metadata' 
    96             //'nested':'.gsf:metadata' 
    97     }); 
    98      
    99     $('.gsf_link').sortable({ 
    100             'cursor':'pointer', 
    101             'tolerance': 'pointer', 
    102             'items':'.gsf_icon', 
    103             'placeholder':'placeholder' 
    104             //'nested':'.gsf:metadata' 
    105     }); 
    106  
    107     $('.gsf_switch').sortable({ 
    108             'cursor':'pointer', 
    109             'tolerance': 'pointer', 
    110             'items':'.gsf_metadata, .gsf_when, .gsf_otherwise', 
    111             'placeholder':'placeholder' 
    112             //'nested':'.gsf:metadata' 
    113     }); 
    114  
    115     $('.gsf_when').sortable({ 
    116             'cursor':'pointer', 
    117             'tolerance': 'pointer', 
    118             'items':'.leaf', 
    119             'placeholder':'placeholder' 
    120             //'nested':'.gsf:metadata' 
    121     }); 
    122  
    123     $('.gsf_otherwise').sortable({ 
    124             'cursor':'pointer', 
    125             'tolerance': 'pointer', 
    126             'items':'.leaf', 
    127             'placeholder':'placeholder' 
    128             //'nested':'.gsf:metadata' 
    129     }); 
    130110 
    131111    //$(".resizable").resizable({containment: 'parent', alsoResize:'parent'}); 
     
    141121                }, }); 
    142122 
    143  
    144     $(".block").mouseover(function()  
     123});  
     124 
     125/*******************************************************************************/ 
     126 
     127function bind_all_sortables() 
     128{ 
     129    bind_template_sortable(); 
     130    bind_table_sortable(); 
     131    bind_tr_sortable(); 
     132    bind_td_sortable(); 
     133    bind_choose_metadata_sortable(); 
     134    bind_link_sortable(); 
     135    bind_switch_sortable(); 
     136    bind_when_sortable(); 
     137    bind_otherwise_sortable(); 
     138 
     139    bind_block_mouseover(); 
     140    bind_minmax_remove();     
     141} 
     142 
     143function replace_with(item, me) 
     144{ 
     145    item.replaceWith(me); //'<div class="element element-txt">This text box has been added!</div>'); 
     146    bind_all_sortables(); 
     147} 
     148 
     149function bind_template_sortable() 
     150{ 
     151    $('.gsf_template').sortable({ 
     152            'cursor':'pointer', 
     153            'tolerance': 'fit', 
     154            'items':'.table, .gsf_choose_metadata, .gsf_metadata', 
     155            'placeholder':'placeholder', 
     156            //'nested':'.gsf:metadata' 
     157            stop: function(event, ui) { 
     158                //if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('css_table')) { replace_with(ui.item, "<table border=\"1\" width=\"100%\" height=\"50px\"><tr><td><div class=\"td block\" title=\"td-div\">XXXXXXXXXXXXXXXXXXXXXXXX</div></td></tr></table>"); } 
     159                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_table')) { replace_with(ui.item, "<table class=\"table\" border=\"2\"></table>"); } 
     160                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_choose_metadata')) { replace_with(ui.item, gsf_choose_metadata_element); } 
     161                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); } 
     162                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_link')) { replace_with(ui.item, gsf_link_element); } 
     163                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_switch')) { replace_with(ui.item, gsf_switch_element); } 
     164            } 
     165    }); 
     166 
     167} 
     168 
     169function bind_table_sortable() 
     170{ 
     171    $('.table').sortable({ 
     172            'cursor':'pointer', 
     173            'tolerance': 'pointer', 
     174            'items':'.tr', 
     175            'placeholder':'placeholder', 
     176            //'nested':'.gsf:metadata' 
     177            stop: function(event, ui) { 
     178                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_tr')) { replace_with(ui.item, "<tr class=\"tr\"></tr>"); } 
     179            } 
     180 
     181    }); 
     182} 
     183 
     184function bind_tr_sortable() 
     185{ 
     186    $('.tr').sortable({ 
     187            'cursor':'pointer', 
     188            'tolerance': 'pointer', 
     189            'items':'.td', 
     190            'placeholder':'placeholder', 
     191            //'nested':'.gsf:metadata' 
     192            stop: function(event, ui) { 
     193                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_td')) { replace_with(ui.item, "<td class=\"td\"></td>"); } 
     194            } 
     195 
     196    }); 
     197} 
     198 
     199function bind_td_sortable() 
     200{ 
     201    $('.td').sortable({ 
     202            'cursor':'pointer', 
     203            'tolerance': 'pointer', 
     204            'items':'.gsf_metadata, .gsf_choose_metadata, .gsf_link, .gsf_switch', 
     205            'placeholder':'placeholder', 
     206            //'nested':'.gsf:metadata' 
     207            stop: function(event, ui) { 
     208                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); } 
     209            } 
     210 
     211    }); 
     212} 
     213 
     214function bind_choose_metadata_sortable() 
     215{ 
     216    $('.gsf_choose_metadata').sortable({ 
     217            'cursor':'pointer', 
     218            'tolerance': 'fit', 
     219            'items':'.gsf_metadata', 
     220            'placeholder':'placeholder', 
     221            'connectWith':'.gsf_choose_metadata', 
     222            //'nested':'.gsf:metadata' 
     223            stop: function(event, ui) { 
     224                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); } 
     225            } 
     226    }); 
     227} 
     228 
     229function bind_link_sortable() 
     230{ 
     231    $('.gsf_link').sortable({ 
     232            'cursor':'pointer', 
     233            'tolerance': 'pointer', 
     234            'items':'.gsf_icon', 
     235            'placeholder':'placeholder' 
     236            //'nested':'.gsf:metadata' 
     237    }); 
     238} 
     239 
     240function bind_switch_sortable() 
     241{ 
     242    $('.gsf_switch').sortable({ 
     243            'cursor':'pointer', 
     244            'tolerance': 'pointer', 
     245            'items':'.gsf_metadata, .gsf_when, .gsf_otherwise', 
     246            'placeholder':'placeholder', 
     247            //'nested':'.gsf:metadata' 
     248            stop: function(event, ui) { 
     249                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_when')) { replace_with(ui.item, gsf_when_element); } 
     250                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_otherwise')) { replace_with(ui.item, gsf_otherwise_element); } 
     251            } 
     252    }); 
     253} 
     254 
     255function bind_when_sortable() 
     256{ 
     257    $('.gsf_when').sortable({ 
     258            'cursor':'pointer', 
     259            'tolerance': 'pointer', 
     260            'items':'.leaf', 
     261            'placeholder':'placeholder', 
     262            //'nested':'.gsf:metadata' 
     263            stop: function(event, ui) { 
     264                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); } 
     265            } 
     266    }); 
     267} 
     268 
     269function bind_otherwise_sortable() 
     270{ 
     271    $('.gsf_otherwise').sortable({ 
     272            'cursor':'pointer', 
     273            'tolerance': 'pointer', 
     274            'items':'.leaf', 
     275            'placeholder':'placeholder', 
     276            //'nested':'.gsf:metadata' 
     277            stop: function(event, ui) { 
     278                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); } 
     279                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_text')) { replace_with(ui.item, "<input type=\"text\" name=\"rawtextinput\" size=\"10\"/>"); } 
     280            } 
     281    }); 
     282} 
     283 
     284function bind_block_mouseover() 
     285{ 
     286    $(".block").mouseover(function() 
    145287    { 
    146288        //alert("Mouse over event"); 
     
    152294        return false; 
    153295    }); 
    154  
    155 });  
     296} 
     297 
     298function bind_minmax_remove() 
     299{ 
     300    $('a.minmax').bind('click', toggleContent); 
     301    $('a.remove').bind('click', removeContent); 
     302}; 
    156303 
    157304var removeContent = (function () { 
  • main/trunk/greenstone3/web/interfaces/oran/transform/layouts/main.xsl

    r22569 r22598  
    99    xmlns:lxslt="http://xml.apache.org/xslt" 
    1010    xmlns:result="http://www.example.com/results" 
    11  
    12     extension-element-prefixes="java util result" 
     11    xmlns:exsl="http://exslt.org/common" 
     12 
     13    extension-element-prefixes="java util result exsl" 
    1314    exclude-result-prefixes="util java util"> 
    1415 
    1516    <xsl:include href="xml-to-gui.xsl"/> 
     17    <xsl:include href="xml-to-gui-templates.xsl"/> 
    1618 
    1719    <!-- put the URL or path of your site here site --> 
     
    120122<!-- Sam2's div code --> 
    121123 
    122     <!-- <style>div { background:yellow; margin:6px 0; }</style> --> 
    123     <!-- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"><xsl:text> </xsl:text></script> -->  
    124     <!-- <script type="text/javascript" src="/interface/interface.js"><xsl:text> </xsl:text></script> --> 
    125     <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"><xsl:text> </xsl:text></script> --> 
    126     <!-- <script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"><xsl:text> </xsl:text></script> --> 
    127  
    128     <!-- <script type="text/javascript" src="interfaces/oran/js/interface/interface.js"><xsl:text> </xsl:text></script> --> 
    129     <!-- <script type="text/javascript" src="interfaces/oran/js/ui.nestedSortable.js"><xsl:text> </xsl:text></script> --> 
    130     <!-- <script type="text/javascript" src="interfaces/oran/js/inestedsortable.js"> <xsl:text> </xsl:text></script> --> 
    131124    <script type="text/javascript" src="interfaces/oran/js/gui_div.js"><xsl:text> </xsl:text></script> 
    132125    
    133   
     126    <xsl:call-template name="xml-to-gui-templates"> 
     127        <xsl:with-param name="node-set" select="test"/> 
     128        <xsl:with-param name="metadataSets" select="//metadataSetList"/> 
     129    </xsl:call-template> 
     130 
    134131    <xsl:variable name="fmt1"> 
    135132        <xsl:call-template name="xml-to-string"> 
     
    152149 
    153150        .resizable { width: 150px; height: 150px; padding: 0.5em; }  
     151         
     152        .block { margin-left: 10px; border-left: dashed 1px black;} 
    154153 
    155154        <!-- .gsf_metadata { border: solid 2px #0000BB; background-color: #440077; } --> 
    156155 
    157         <!-- .gsf_choose-metadata { border: solid 1px #000000; background-color: #223344; } --> 
     156        <!-- .gsf_choose_metadata { border: solid 1px #000000; background-color: #223344; } --> 
    158157    </style> 
    159158 
    160159    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>  
    161160 
    162  
    163161    <table width="100%" border="1">  
    164162 
    165     <td width="60%"> 
     163    <td width="75%"> 
    166164 
    167165    <div id="formatStatement"> 
     
    176174 
    177175 
    178     <td width="40%" valign="top"> 
     176    <td width="25%" valign="top"> 
    179177        <h2> Elements to add </h2> 
    180         <div class="elementType css_gsf_template" title="gsf:metadata">NEW GSF:TEMPLATE</div> 
    181         <div class="elementType css_gsf_choose-metadata" title="gsf:metadata">NEW GSF:CHOOSE-METADATA</div> 
    182         <div class="elementType css_gsf_metadata" title="gsf:metadata">NEW GSF:METADATA</div> 
     178        <div class="element_type_gsf_template css_gsf_template" title="gsf:template">NEW GSF:TEMPLATE</div> 
     179        <div class="element_type_gsf_choose_metadata css_gsf_choose_metadata" title="gsf:choose-metadata">NEW GSF:CHOOSE-METADATA</div> 
     180        <div class="element_type_gsf_metadata css_gsf_metadata" title="gsf:metadata">NEW GSF:METADATA</div> 
     181        <div class="element_type_gsf_link css_gsf_link" title="gsf:link">NEW GSF:LINK</div> 
     182        <div class="element_type_gsf_switch css_gsf_switch" title="gsf:switch">NEW GSF:SWITCH</div> 
     183        <div class="element_type_gsf_when css_gsf_when" title="gsf:when">NEW GSF:WHEN</div> 
     184        <div class="element_type_gsf_otherwise css_gsf_otherwise" title="gsf:otherwise">NEW GSF:OTHERWISE</div> 
     185        <div class="element_type_gsf_icon css_gsf_icon" title="gsf:icon">NEW GSF:ICON</div> 
    183186        <br/> 
    184         <div class="elementType css_table" title="gsf:metadata">NEW TABLE</div> 
    185         <div class="elementType css_tr" title="gsf:metadata">NEW TABLE ROW</div> 
    186         <div class="elementType css_td" title="gsf:metadata">NEW TABLE COLUMN</div> 
     187        <div class="element_type_text css_text" title="text">TEXT</div> 
     188        <div class="element_type_table css_table" title="gsf:table">NEW TABLE</div> 
     189        <div class="element_type_tr css_tr" title="gsf:row">NEW TABLE ROW</div> 
     190        <div class="element_type_td css_td" title="gsf:column">NEW TABLE COLUMN</div> 
    187191 
    188192    </td> 
  • main/trunk/greenstone3/web/interfaces/oran/transform/layouts/xml-to-gui.xsl

    r22569 r22598  
    118118        <xsl:param name="metadataSets"/> 
    119119 
    120         <div class="gsf_choose-metadata css_gsf_choose-metadata block" title="gsf:choose-metadata"> 
     120        <div class="gsf_choose_metadata css_gsf_choose_metadata block" title="gsf:choose-metadata"> 
    121121                CHOOSE <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
    122122                <xsl:apply-templates mode="xml-to-gui"> 
     
    124124                    <xsl:with-param name="metadataSets" select="$metadataSets"/>  
    125125                </xsl:apply-templates> 
    126                 END CHOOSE 
    127126        </div>    
    128127    </xsl:template> 
     
    134133        <xsl:param name="metadataSets"/> 
    135134 
    136         <xsl:variable name="one"> 
    137135        <div class="gsf_metadata css_gsf_metadata block leaf" title="gsf:metadata">METADATA <xsl:call-template name="meta-to-combo"> 
    138136                        <xsl:with-param name="metadataSets" select="$metadataSets"/> 
     
    140138                     </xsl:call-template> <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
    141139        </div> 
    142         </xsl:variable> 
    143  
    144        
    145         <xsl:variable name="meta"> 
    146         <xsl:call-template name="xml-to-string"> 
    147             <xsl:with-param name="node-set" select="exsl:node-set($one)"/> 
    148         </xsl:call-template> 
    149         </xsl:variable> 
    150  
    151         <xsl:copy-of select="$one"/> 
    152  
    153         <br/> 
    154         <script type="text/javascript"> 
    155             gsf_metadata_element = <xsl:text disable-output-escaping="yes">'</xsl:text><xsl:copy-of select="$one" disable-output-escaping="yes"/><xsl:text disable-output-escaping="yes">';</xsl:text>  
    156  
    157         </script> 
    158  
    159140    </xsl:template> 
    160141 
     
    196177                    <xsl:with-param name="metadataSets" select="$metadataSets"/>  
    197178                </xsl:apply-templates> 
    198                 END LINK <br/> 
    199179        </div>  
    200180    </xsl:template> 
     
    215195 
    216196 
    217         <div class="gsf_template block" title="gsf:template"> 
    218                 TEMPLATE[match=<xsl:value-of select="@match"/>]<a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
     197        <div class="gsf_template css_gsf_template block" title="gsf:template"> 
     198                TEMPLATE[match=<input type="text" name="rawtextinput" size="10" value="{@match}"/>]<a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
    219199                <table border="1"> 
    220200                <tr class="tr"> 
     
    225205                </tr> 
    226206                </table> 
    227                 END TEMPLATE <br/> 
    228         </div> 
     207        </div><br/> 
    229208    </xsl:template> 
    230209 
     
    234213        <xsl:param name="metadataSets"/> 
    235214 
    236         <div class="gsf_switch block" title="gsf:switch"> 
     215        <div class="gsf_switch css_gsf_switch block" title="gsf:switch"> 
    237216                SWITCH <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
    238217                <xsl:apply-templates mode="xml-to-gui"> 
     
    240219                    <xsl:with-param name="metadataSets" select="$metadataSets"/> 
    241220                </xsl:apply-templates> 
    242                 END SWITCH 
    243221        </div> 
    244222    </xsl:template> 
     
    250228        <xsl:param name="metadataSets"/> 
    251229 
    252         <div class="gsf_when block" title="gsf:when">  
     230        <div class="gsf_when css_gsf_when block" title="gsf:when">  
    253231                WHEN[test=<xsl:value-of select="@test"/>] <br/><a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
    254232                <xsl:apply-templates mode="xml-to-gui"> 
     
    256234                  <xsl:with-param name="metadataSets" select="$metadataSets"/> 
    257235                </xsl:apply-templates> 
    258                 END WHEN 
    259236        </div> 
    260237    </xsl:template> 
     
    266243        <xsl:param name="metadataSets"/> 
    267244 
    268         <div class="gsf_otherwise block" title="gsf:otherwise"> 
     245        <div class="gsf_otherwise css_gsf_otherwise block" title="gsf:otherwise"> 
    269246                OTHERWISE <br/><a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
    270247                <xsl:apply-templates mode="xml-to-gui"> 
     
    272249                    <xsl:with-param name="metadataSets" select="$metadataSets"/> 
    273250                </xsl:apply-templates> 
    274                 END OTHERWISE 
    275251        </div> 
    276252    </xsl:template> 
     
    282258        <xsl:param name="metadataSets"/> 
    283259 
    284         <div class="gsf_icon block leaf" title="gsf:icon"> 
     260        <div class="gsf_icon css_gsf_icon block leaf" title="gsf:icon"> 
    285261                ICON[type= 
    286262                <select> 
     
    318294                    <xsl:with-param name="metadataSets" select="$metadataSets"/> 
    319295                </xsl:apply-templates> 
    320                 END DEFAULT 
    321296        </div> 
    322297    </xsl:template> 
     
    329304         
    330305        <div class="block leaf" title="gsf:text"> 
    331                 TEXT <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
    332306                <xsl:variable name="rawtext"><xsl:value-of select="."/></xsl:variable> 
    333                 TEXT = <input type="text" name="rawtextinput" size="10" value="{$rawtext}"/><br/> 
     307                TEXT = <input type="text" name="rawtextinput" size="10" value="{$rawtext}"/><a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
    334308        </div> 
    335309    </xsl:template>