Ignore:
Timestamp:
2010-08-04T16:42:22+12:00 (14 years ago)
Author:
sjb48
Message:

More work on javascript DOM manipulation using sortables and draggables

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r22516 r22569  
    1616    $('a.remove').bind('click', removeContent);
    1717
    18     /*   
    19     $('div.blockWrapper').NestedSortable(
    20     {
    21         accept: 'block',
    22         helperclass: 'sortHelper',
    23         activeclass :   'sortableactive',
    24         hoverclass :    'sortablehover',
    25 
    26         // Restricts sort start click to the specified element.
    27         handle: 'div.header',
    28         onStart : function()
    29             {
    30                 $.iAutoscroller.start(this, document.getElementsByTagName('body'));
     18    $(".elementType").draggable({
     19            connectToSortable: '.gsf_template',
     20            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');
    3126            },
    32             onStop : function()
    33             {
    34                 $.iAutoscroller.stop();
     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    */
     43   
     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     };   
     50 
     51    $('#formatStatement').sortable({
     52            cursor: 'pointer',
     53            tolerance: 'pointer',
     54            items: '.gsf_template',
     55            placeholder:'placeholder'
     56            //'nested':'div'
     57    });
     58   
     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                }
    3570            }
    36     }
    37     );
    38     */
     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    });
    3989 
    40      
    41     $('#formatStatement').sortable({
    42             'cursor':'pointer',
    43             'tolerance': 'pointer',
    44             'items':'.gsf\\:template',
     90    $('.gsf_choose-metadata').sortable({
     91            'cursor':'pointer',
     92            'tolerance': 'pointer',
     93            'items':'.gsf_metadata',
    4594            'placeholder':'placeholder',
    46             //'nested':'div'
     95            'connectWith':'.gsf_choose-metadata'
     96            //'nested':'.gsf:metadata'
    4797    });
    4898   
    49     $('.gsf\\:template').sortable({
    50             'cursor':'pointer',
    51             'tolerance': 'pointer',
    52             'items':'.table, .gsf\\:choose-metadata, .gsf\\:metadata',
    53             'placeholder':'placeholder'
    54             //'nested':'.gsf:metadata'
    55     });
    56 
    57     $('.table').sortable({
    58             'cursor':'pointer',
    59             'tolerance': 'pointer',
    60             'items':'.leaf .gsf\\:choose-metadata, .gsf\\:link, .gsf\\:switch',
    61             'placeholder':'placeholder'
    62             //'nested':'.gsf:metadata'
    63     });
    64  
    65     $('.gsf\\:choose-metadata').sortable({
    66             'cursor':'pointer',
    67             'tolerance': 'pointer',
    68             'items':'.gsf\\:metadata',
    69             'placeholder':'placeholder',
    70             'connectWith':'.gsf\\:choose-metadata'
    71             //'nested':'.gsf:metadata'
    72     });
    73    
    74     $('.gsf\\:link').sortable({
    75             'cursor':'pointer',
    76             'tolerance': 'pointer',
    77             'items':'.gsf\\:icon',
    78             'placeholder':'placeholder'
    79             //'nested':'.gsf:metadata'
    80     });
    81 
    82     $('.gsf\\:switch').sortable({
    83             'cursor':'pointer',
    84             'tolerance': 'pointer',
    85             'items':'.gsf\\:metadata, .gsf\\:when, .gsf\\otherwise',
    86             'placeholder':'placeholder'
    87             //'nested':'.gsf:metadata'
    88     });
    89 
    90     $('.gsf\\:when').sortable({
     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({
    91116            'cursor':'pointer',
    92117            'tolerance': 'pointer',
    … …  
    96121    });
    97122
    98     $('.gsf\\:otherwise').sortable({
     123    $('.gsf_otherwise').sortable({
    99124            'cursor':'pointer',
    100125            'tolerance': 'pointer',
    … …  
    104129    });
    105130
    106     /*
    107     $('div.blockWrapper').sortable(
    108         {
    109             accept: 'block',
    110             helperclass: 'sortHelper',
    111             activeclass :   'sortableactive',
    112             hoverclass :    'sortablehover',
    113 
    114             // Restricts sort start click to the specified element.
    115             handle: 'div.header',
    116 
    117             // This is the way the reordering behaves during drag. Possible values: 'intersect', 'pointer'. In some setups, 'pointer' is more natural.
    118             // * intersect: draggable overlaps the droppable at least 50%
    119             // * pointer: mouse pointer overlaps the droppable
    120             tolerance: 'pointer',
    121             //containment: 'parent',
    122             nested: 'div',
    123             onChange : function(ser)
    124             {
    125             },
    126             onStart : function()
    127             {
    128                 $.iAutoscroller.start(this, document.getElementsByTagName('body'));
    129             },
    130             onStop : function()
    131             {
    132                 $.iAutoscroller.stop();
    133             }
    134         }
    135     );
    136     */
     131    //$(".resizable").resizable({containment: 'parent', alsoResize:'parent'});
     132
     133    $('.tr').equalHeights();
     134
     135    $(".td").resizable({
     136                alsoResize: 'parent',
     137                //containment: 'parent',
     138                handles: 'e,s',
     139                stop: function(event, ui) {
     140                        $(this).parent().parent().equalHeights();
     141                }, });
     142
    137143
    138144    $(".block").mouseover(function()
    … …  
    175181};
    176182
    177 
     183/*--------------------------------------------------------------------
     184 * JQuery Plugin: "EqualHeights"
     185 * by:  Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
     186 *
     187 * Copyright (c) 2008 Filament Group
     188 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
     189 *
     190 * Description: Compares the heights or widths of the top-level children of a provided element
     191        and sets their min-height to the tallest height (or width to widest width). Sets in em units
     192        by default if pxToEm() method is available.
     193 * Dependencies: jQuery library, pxToEm method  (article:
     194        http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)                             
     195 * Usage Example: $(element).equalHeights();
     196        Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
     197 * Version: 2.0, 08.01.2008
     198--------------------------------------------------------------------*/
     199
     200// Modified to get children of children ie. tr -> td -> div
     201
     202$.fn.equalHeights = function(px) {
     203    console.log("EQUAL HEIGHTS");
     204    $(this).each(function(){
     205        var currentTallest = 0;
     206        console.log($(this).children());
     207        console.log($(this).children().children());
     208        //$(this).children().children().each(function(i){
     209        //    console.log($(this));
     210        //    console.log("THIS HEIGHT="+$(this).height()+ " CURRENT TALLEST="+ currentTallest);
     211            //if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
     212            //if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
     213        //});
     214        //if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
     215        // for ie6, set height since min-height isn't supported
     216        //if ($.browser.msie && $.browser.version == 6.0) { $(this).children().children().css({'height': $(this).currentTallest}); }
     217        $(this).children().children().css({'height': $(this).height()}); //currentTallest});
     218    });
     219    return this;
     220};
     221
Note: See TracChangeset for help on using the changeset viewer.