Ignore:
Timestamp:
2010-08-18T17:28:49+12:00 (14 years ago)
Author:
sjb48
Message:

Working on auto-resizing tables and column insertion. Partially working.

Location:
main/trunk/greenstone3/web/interfaces/oran
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • main/trunk/greenstone3/web/interfaces/oran/js/gui_div.js

    r22598 r22676  
    3636
    3737    $(".element_type_td").draggable({
    38             connectToSortable: '.gsf_table',
     38            //connectToSortable: '.td',
    3939            helper: 'clone',
    4040            revert: 'invalid'
    … …  
    107107            }
    108108    });
    109    
     109 
     110    $('div.gsf_template').children(".block,.table").slideUp(300);
     111    //$('div.gsf_template .table').hide(); 
     112    //$('div.block').click(function() {   
     113        //alert("I was clicked!");
     114    //    $(this).children(".block").slideToggle('fast');
     115    //    return false;
     116    //});
     117
     118 
     119    //hide the all of the element with class msg_body
     120  //$(".gsf_template > table").hide();
     121  //toggle the componenet with class msg_body
     122  //$(".gsf_template").click(function()
     123  //{
     124    //alert("You clicked? " + $("this > .table"));
     125    //$(this).getElementsByTagName("table")[0].slideToggle(600);
     126  //});
    110127
    111128    //$(".resizable").resizable({containment: 'parent', alsoResize:'parent'});
    112129
    113     $('.tr').equalHeights();
    114 
    115     $(".td").resizable({
    116                 alsoResize: 'parent',
     130    //$('.tr').equalHeights();
     131
     132    //$(".td").resizable({
     133    //            alsoResize: 'parent',
    117134                //containment: 'parent',
    118                 handles: 'e,s',
    119                 stop: function(event, ui) {
    120                         $(this).parent().parent().equalHeights();
    121                 }, });
     135    //            handles: 'e,s',
     136    //            stop: function(event, ui) {
     137    //                    $(this).parent().parent().equalHeights();
     138    //            }, });
    122139
    123140});
    … …  
    125142/*******************************************************************************/
    126143
     144function minimize_templates()
     145{
     146    //$(".msg_body").hide();
     147    //var targetContent = $('.table');
     148    //targetContent.hide();
     149    //targetContent.parent().css('display','none');
     150    //targetContent.slideUp(300);
     151    //targetContent.parent().html('[+]');
     152
     153}
     154
    127155function bind_all_sortables()
    128156{
    129157    bind_template_sortable();
    130     bind_table_sortable();
    131     bind_tr_sortable();
    132     bind_td_sortable();
     158    //bind_table_sortable();
     159    //bind_tr_sortable();
     160    //bind_td_sortable();
    133161    bind_choose_metadata_sortable();
    134162    bind_link_sortable();
    … …  
    137165    bind_otherwise_sortable();
    138166
     167    bind_tables();
     168
    139169    bind_block_mouseover();
    140170    bind_minmax_remove();   
    141171}
    142172
     173function bind_tables()
     174{
     175    $('.tr').equalHeights();
     176
     177    $(".td").resizable({
     178                alsoResize: 'parent',
     179                //containment: 'parent',
     180                handles: 'w,e',
     181                stop: function(event, ui) {
     182                        $(this).parent().parent().equalHeights();
     183                }, });
     184
     185    $(".droppable").droppable({
     186            accept: '.element_type_td',
     187            tolerance: 'pointer',
     188            activate: function(event, ui) { $(this).addClass("droppable_hl"); console.log("droppable activated")},
     189            deactivate: function(event, ui) { $(this).removeClass("droppable_hl"); console.log("droppable deactivated")},
     190            drop: function(event, ui) {
     191                //alert("Something has been dropped on me!!");
     192                //$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
     193                 //var tr = this.parentNode.parentNode; //$(this).getElementsByTagName("tr")[0];
     194                 var td = document.createElement("td");
     195                 var div = document.createElement("div"); // class=\"td block\" title=\"td-div\"");
     196                 div.setAttribute("title","td-div");
     197                 div.setAttribute("class","td block");
     198                 div.setAttribute("width","25px");
     199                 td.appendChild(div);
     200                 var sep = document.createElement("td");
     201                 sep.setAttribute("class","droppable");
     202                 sep.setAttribute("width","10px");
     203                 $(this).after(sep);               
     204                 $(this).after(td);               
     205                 bind_tables();
     206                 //bind_td_sortable();
     207                 //bind_all_sortables();
     208            }
     209        });
     210
     211}
     212
    143213function replace_with(item, me)
    144214{
     215/*
     216    (item.parents('.table')).each(function(index) {
     217        $(this).children().children().children('td').each(function() {
     218            var sum = 0;
     219            $(this).children('.block').each(function() { sum = sum + $(this).height(); } );
     220            console.log("My height is " + $(this).height() + ", sum height is " + sum);
     221        });
     222    });
     223*/
     224    /*
     225    alert(item.parents('.td').length);
     226
     227    (item.parents('.td')).each(function(index) {
     228        $(this).children.each(function()
     229        alert(index + " height is " + $(this).height()); // + $(this).style('height') + $(this).offsetHeight);
     230        var h = $(this).height();
     231        var a = 0;
     232        // if we are now the maximum then set to h otherwise ignore?
     233        $(this).parents('.table').each(function() {$(this).children().children().children().each(function() { if($(this).height() > a) a = $(this).height(); } ) } );
     234        alert("A is " + a);
     235        if( h > a)
     236        {
     237            h = h + 25;
     238            alert("Increasing height to " + h);
     239            $(this).height(h);
     240            alert("height is now " + $(this).height());
     241        }
     242        else
     243            alert("height did not need increasing (h=" + h + ",a=" + a + ")");
     244    }); //forEach().css('height'));
     245    */
     246   
    145247    item.replaceWith(me); //'<div class="element element-txt">This text box has been added!</div>');
     248
     249    (item.parents('.table')).each(function(index) {
     250        $(this).children().children().children().each(function() {
     251            var sum = 0;
     252            $(this).children('.block').each(function() { sum = sum + $(this).height(); } );
     253            console.log("My height is " + $(this).height() + ", sum height is " + sum);
     254        });
     255    });
     256
    146257    bind_all_sortables();
    147258}
    … …  
    167278}
    168279
     280/*
    169281function bind_table_sortable()
    170282{
    … …  
    197309}
    198310
     311*/
     312
    199313function bind_td_sortable()
    200314{
    201315    $('.td').sortable({
    202316            'cursor':'pointer',
    203             'tolerance': 'pointer',
    204             'items':'.gsf_metadata, .gsf_choose_metadata, .gsf_link, .gsf_switch',
    205             'placeholder':'placeholder',
    206             //'nested':'.gsf:metadata'
     317            'containment':'parent',
     318            'tolerance': 'pointer',
     319            'items':'.gsf_metadata, .gsf_choose_metadata, .gsf_link, .gsf_switch, .td',
     320            'placeholder':'placeholder',
     321            //'nested':'.gsf:metadata'
     322            receive: function(event, ui) { alert("Attempted to receive"); },
    207323            stop: function(event, ui) {
    208324                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
     325                /*if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_td')) {
     326                    alert("Inserting td " + this.parentNode.parentNode + " " + $('.td').sortable( "widget" ));
     327                    var tr = this.parentNode.parentNode; //$(this).getElementsByTagName("tr")[0];
     328                    var td = document.createElement("td");
     329                    var div = document.createElement("div"); // class=\"td block\" title=\"td-div\"");
     330                    //var cls = document.createAttribute("class");
     331                    div.setAttribute("title","td-div");
     332                    div.setAttribute("class","td block");
     333                    var span = document.createElement("div");
     334                    span.setAttribute("class", "block gsf_metadata");
     335                    span.setAttribute("style","height:50px");
     336                    //div.setAttribute(cls,"block");
     337                    div.appendChild(span);
     338                    td.appendChild(div);
     339                    tr.appendChild(td);
     340                    ui.item.remove();
     341                    bind_all_sortables();
     342                }*/
     343               
    209344            }
    210345
    … …  
    233368            'tolerance': 'pointer',
    234369            'items':'.gsf_icon',
    235             'placeholder':'placeholder'
    236             //'nested':'.gsf:metadata'
     370            'placeholder':'placeholder',
     371            //'nested':'.gsf:metadata'
     372            stop: function(event, ui) {
     373                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_icon')) { replace_with(ui.item, gsf_icon_element); }
     374            }
    237375    });
    238376}
    … …  
    311449var toggleContent = function(e)
    312450{
    313     var targetContent = $('div.block', this.parentNode);
    314     if (targetContent.css('display') == 'none') {
    315         targetContent.slideDown(300);
     451    //var targetContent = $('div.block', this.parentNode);
     452    //$(".msg_head").click(function()
     453  //{
     454    //$(this).next(".block").slideToggle(600);
     455  //});
     456    //alert($(this).html() + " " + $(this).css('display') + " " + targetContent.css('display'));
     457    if ($(this).html() == '[+]'){ //targetContent.css('display') == 'none') {
     458    //if ($(this).css('display') == 'none') {
     459   //     var targetContent2 = $('.table');
     460   //     targetContent2.show();
     461
     462   //     targetContent.show();
     463   //     targetContent.slideDown(300);
     464   //     alert("I should be sliding down! " + $(this).parent());
     465        $(this).parent().children(".block,.table").slideDown(300);
    316466        $(this).html('[-]');
    317467    } else {
    318         targetContent.slideUp(300);
     468    //    targetContent.slideUp(300);
     469        $(this).parent().children(".block,.table").slideUp(300);
    319470        $(this).html('[+]');
    320471    }
     472    //$(this).children(".block, .table").slideToggle('fast');
    321473    return false;
    322474};
    … …  
    348500
    349501$.fn.equalHeights = function(px) {
    350     console.log("EQUAL HEIGHTS");
     502    //console.log("EQUAL HEIGHTS");
    351503    $(this).each(function(){
    352504        var currentTallest = 0;
    353         console.log($(this).children());
    354         console.log($(this).children().children());
     505        //console.log($(this).children());
     506        //console.log($(this).children().children());
    355507        //$(this).children().children().each(function(i){
    356508        //    console.log($(this));

  • main/trunk/greenstone3/web/interfaces/oran/transform/layouts/main.xsl

    r22598 r22676  
    3434                <link rel="stylesheet" href="interfaces/{$interface_name}/style/core.css" type="text/css"/>
    3535                <!-- <script type="text/javascript" src="interfaces/oran/js/jquery.js"><xsl:text> </xsl:text></script> -->
    36                 <script type="text/javascript" src="interfaces/oran/js/jquery-1.4.2.min.js"><xsl:text> </xsl:text></script>
     36                <script type="text/javascript" src="interfaces/oran/js/jquery-1.4.2.js"><xsl:text> </xsl:text></script>
    3737                <script type="text/javascript" src="interfaces/oran/js/jquery-ui-1.8.2.custom.min.js"><xsl:text> </xsl:text></script>
    3838                <!-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"><xsl:text> </xsl:text></script> -->
    … …  
    152152        .block { margin-left: 10px; border-left: dashed 1px black;}
    153153
     154        .droppable { background-color: #99dd99;}
     155        .droppable_hl { border: dashed 1px #ccc; background-color:#FFFFCC; }
     156
    154157        <!-- .gsf_metadata { border: solid 2px #0000BB; background-color: #440077; } -->
    155158
    … …  
    176179    <td width="25%" valign="top">
    177180        <h2> Elements to add </h2>
    178         <div class="element_type_gsf_template css_gsf_template" title="gsf:template">NEW GSF:TEMPLATE</div>
     181        <div class="element_type_gsf_template css_gsf_template" title="gsf:template">NEW GSF:TEMPLATE MATCH</div>
    179182        <div class="element_type_gsf_choose_metadata css_gsf_choose_metadata" title="gsf:choose-metadata">NEW GSF:CHOOSE-METADATA</div>
    180183        <div class="element_type_gsf_metadata css_gsf_metadata" title="gsf:metadata">NEW GSF:METADATA</div>

  • main/trunk/greenstone3/web/interfaces/oran/transform/layouts/xml-to-gui-templates.xsl

    r22598 r22676  
    4646    <!-- ********** GSF:METADATA ********** -->
    4747        <xsl:variable name="metadata">
    48         <div class="gsf_metadata css_gsf_metadata block leaf" title="gsf:metadata">METADATA <xsl:call-template name="meta-to-combo">
     48        <div class="gsf_metadata css_gsf_metadata block leaf" title="gsf:metadata"><xsl:call-template name="meta-to-combo">
    4949                        <xsl:with-param name="metadataSets" select="$metadataSets"/>
    5050                        <xsl:with-param name="current" select="ex.title"/>
    51                      </xsl:call-template> <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a></div>
     51                     </xsl:call-template><a href="#" class="remove">[x]</a></div>
    5252        </xsl:variable>
    5353
    … …  
    7575
    7676        <xsl:variable name="template">
    77         <div class="gsf_template block" title="gsf:template">TEMPLATE[match=<input type="text" name="rawtextinput" size="10"/>]<a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a><table border="1"><tr class="tr"></tr></table></div><br/>
     77        <div class="gsf_template block" title="gsf:template">MATCH=<input type="text" name="rawtextinput" size="10"/><a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a><table border="1"><tr class="tr"></tr></table></div><br/>
    7878        </xsl:variable>
    7979

  • main/trunk/greenstone3/web/interfaces/oran/transform/layouts/xml-to-gui.xsl

    r22598 r22676  
    133133        <xsl:param name="metadataSets"/>
    134134
    135         <div class="gsf_metadata css_gsf_metadata block leaf" title="gsf:metadata">METADATA <xsl:call-template name="meta-to-combo">
     135        <div class="gsf_metadata css_gsf_metadata block leaf" title="gsf:metadata"><xsl:call-template name="meta-to-combo">
    136136                        <xsl:with-param name="metadataSets" select="$metadataSets"/>
    137137                        <xsl:with-param name="current" select="@name"/>
    138                      </xsl:call-template> <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
     138                     </xsl:call-template><a href="#" class="remove">[x]</a>
    139139        </div>
    140140    </xsl:template>
    … …  
    196196
    197197        <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>
    199                 <table border="1">
     198                MATCH=<input type="text" name="rawtextinput" size="10" value="{@match}"/><xsl:choose>
     199                    <xsl:when test="not(@mode)"> <!-- parameter has not been supplied -->
     200                    </xsl:when>
     201                    <xsl:otherwise>MODE=<input type="text" name="rawtextinput" size="10" value="{@mode}"/></xsl:otherwise>
     202                    </xsl:choose><a href="#" class="minmax">[+]</a><a href="#" class="remove">[x]</a>
     203                <table class="table" border="1">
     204                <tbody>
    200205                <tr class="tr">
     206                <td class="droppable" width="10px"/>
    201207                <xsl:apply-templates mode="xml-to-gui">
    202208                    <xsl:with-param name="depth" select="$depth"/>
    … …  
    204210                </xsl:apply-templates>
    205211                </tr>
     212                </tbody>
    206213                </table>
    207214        </div><br/>
    … …  
    229236
    230237        <div class="gsf_when css_gsf_when block" title="gsf:when">
    231                 WHEN[test=<xsl:value-of select="@test"/>] <br/><a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
     238                WHEN[test=<xsl:value-of select="@test"/>]<a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
    232239                <xsl:apply-templates mode="xml-to-gui">
    233240                  <xsl:with-param name="depth" select="$depth"/>
    … …  
    327334            </div>
    328335        </td>
     336        <td class="droppable" width="10px"/>
    329337    </xsl:template>
    330338
Note: See TracChangeset for help on using the changeset viewer.