Changeset 23276 for main/trunk


Ignore:
Timestamp:
2010-11-02T17:52:01+13:00 (13 years ago)
Author:
sjb48
Message:

Starting working on live preview. Made progress with iframes but hit brick wall. Maybe ajax is a better option.

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

Legend:

Unmodified
Added
Removed

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

    r23255 r23276  
    22console.log("Loading gui_div.js\n");
    33
     4var initialised_iframe = "false";
     5/*
     6$("#iframe").ready(function(){
     7        console.log("iframe is ready ...");
     8        var iframe = document.getElementById('iframe');
     9        var iframe_document = iframe.document;
     10
     11        if(iframe.contentDocument)
     12        {
     13            iframe_document = iframe.contentDocument; // For NS6
     14            console.log("Chose content document");
     15        }
     16        else if(iframe.contentWindow)
     17        {
     18            iframe_document = iframe.contentWindow.document; // For IE5.5 and IE6
     19            console.log("Chose content window");
     20        }
     21
     22        console.log(iframe_document.documentElement.innerHTML); //document.documentElement.outerHTML
     23
     24        $(iframe_document.documentElement.innerHTML).find('a').each(function() {
     25            console.log("data "+$(this).data('href'));
     26            console.log("getAttribute "+$(this).getAttribute('href'));
     27            console.log("attr "+$(this).attr('href'));
     28            console.log("this.href "+this.href);
     29            var original = this.href; //$(this).attr('href');
     30            // check if greenstone link ie. starts with format
     31            //var original = $(this).data('href');
     32            var modified = original.toString().concat("&excerptid=gs_content");
     33            console.log(modified);
     34            this.href = modified;
     35            //$(this).attr('href',modified);
     36            //$(this).data('href', modified);
     37            //console.log($(this).attr('href'));
     38            console.log("data "+$(this).data('href'));
     39            console.log("getAttribute "+$(this).getAttribute('href'));
     40            console.log("attr "+$(this).attr('href'));
     41            console.log("this.href "+this.href);
     42            console.log("**********");
     43
     44        });
     45}); */
     46
    447$(document).ready(function(){
    548
    … …  
    750
    851    var CURRENT_SELECT_VALUE = "";
     52
     53    /*
     54    var iframe = document.getElementById('iframe');
     55    var iframe_document = iframe.document;
     56   
     57    if(iframe.contentDocument)
     58    {
     59        iframe_document = iframe.contentDocument; // For NS6
     60        console.log("Chose content document");
     61    }
     62    else if(iframe.contentWindow)
     63    {
     64        iframe_document = iframe.contentWindow.document; // For IE5.5 and IE6
     65        console.log("Chose content window");
     66    }
     67    // Put the content in the iframe
     68    if(initialised_iframe == "false")
     69    {
     70        console.log("Initialised iframe with preview html");
     71        iframe_document.open();
     72        iframe_document.writeln(preview_html); //.concat("&excerptid=gs_content"));
     73        iframe_document.close();
     74        initialised_iframe = "true";
     75    }
     76   
     77    $(iframe_document.documentElement.innerHTML).find('a').each(function() {
     78            console.log("data "+$(this).data('href'));
     79            console.log("getAttribute "+this.getAttribute('href'));
     80            console.log("attr "+$(this).attr('href'));
     81            console.log("this.href "+this.href);
     82            var original = this.href; //$(this).attr('href');
     83            // check if greenstone link ie. starts with format
     84            //var original = $(this).data('href');
     85            var modified = original.toString().concat("&excerptid=gs_content");
     86            console.log("*                      *");
     87            console.log(modified);
     88            console.log("*                      *");
     89            //this.href = modified;
     90            //$(this).attr('href',modified);
     91            //$(this).data('href', modified);
     92            $(this).attr({ 'href': modified });
     93            //console.log($(this).attr('href'));
     94            console.log("data "+$(this).data('href'));
     95            console.log("getAttribute "+this.getAttribute('href'));
     96            console.log("attr "+$(this).attr('href'));
     97            console.log("this.href "+this.href);
     98            console.log("***********************");
     99    });
     100    */
    9101
    10102    /******************************************/
    … …  
    12104    /******************************************/
    13105
    14     $(".element_type_gsf_template").draggable({
     106    $(".draggable_gsf_template").draggable({
    15107            cursor: 'crosshair',
    16108            connectToSortable: '#formatStatement',
    … …  
    19111    });
    20112
    21     $(".element_type_table").draggable({
     113    $(".draggable_table").draggable({
    22114            cursor: 'crosshair',
    23115            connectToSortable: '.gsf_template',
    … …  
    26118    });
    27119
    28     $(".element_type_tr").draggable({
     120    $(".draggable_tr").draggable({
    29121            cursor: 'crosshair',
    30122            connectToSortable: '.gsf_table',
    … …  
    33125    })
    34126
    35     $(".element_type_td").draggable({
     127    $(".draggable_td").draggable({
    36128            cursor: 'crosshair',
    37129            //connectToSortable: '.td',
    … …  
    40132    })
    41133
    42     $(".element_type_text").draggable({
    43             cursor: 'crosshair',
    44             connectToSortable: '.gsf_otherwise, .gsf_link',
     134    $(".draggable_text").draggable({
     135            cursor: 'crosshair',
     136            connectToSortable: '.gsf_otherwise, .gsf_link, .gsf_choose, .gsf_when',
    45137            helper: 'clone',
    46138            revert: 'invalid'
    … …  
    49141    $(".draggable_gsf_choose_metadata").draggable({
    50142            cursor: 'crosshair',
    51             connectToSortable: '.td-div',
     143            connectToSortable: '.td-div, .gsf_link, .gsf_when, .gsf_otherwise',
    52144            helper: 'clone',
    53145            revert: 'invalid'
    … …  
    57149    $(".draggable_gsf_metadata").draggable({
    58150            cursor: 'crosshair',
    59             connectToSortable: '.gsf_choose_metadata, .gsf_when, .gsf_otherwise, .td-div',
     151            connectToSortable: '.gsf_choose_metadata, .gsf_when, .gsf_otherwise, .gsf_link, .td-div',
    60152            helper: 'clone',
    61153            revert: 'invalid'
    … …  
    64156    $(".draggable_gsf_link").draggable({
    65157            cursor: 'crosshair',
    66             connectToSortable: '.td-div',
     158            connectToSortable: '.td-div, .gsf_when, .gsf_otherwise, .gsf_link',
    67159            helper: 'clone',
    68160            revert: 'invalid'
    … …  
    72164    $(".draggable_gsf_switch").draggable({
    73165            cursor: 'crosshair',
    74             connectToSortable: '.td-div',
     166            connectToSortable: '.td-div, .gsf_link',
    75167            helper: 'clone',
    76168            revert: 'invalid'
    … …  
    285377            stop: function(event, ui) {
    286378                //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>"); }
    287                 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_table')) { replace_with(ui.item, "<table class=\"table\" border=\"2\"></table>"); }
    288                 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_choose_metadata')) { replace_with(ui.item, gsf_choose_metadata_element); }
    289                 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
    290                 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_link')) { replace_with(ui.item, gsf_link_element); }
    291                 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_switch')) { replace_with(ui.item, gsf_switch_element); }
     379                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_table')) { replace_with(ui.item, "<table class=\"table\" border=\"2\"></table>"); }
     380                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_choose_metadata')) { replace_with(ui.item, gsf_choose_metadata_element); }
     381                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
     382                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_link')) { replace_with(ui.item, gsf_link_element); }
     383                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_switch')) { replace_with(ui.item, gsf_switch_element); }
    292384            }
    293385    });
    … …  
    340432            receive: function(event, ui) { alert("Attempted to receive"); },
    341433            stop: function(event, ui) {
    342                 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
     434                // gsf metadata
     435                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
     436                // gsf choose metadata
     437                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_choose_metadata')) { replace_with(ui.item, gsf_choose_metadata_element); }
     438                // gsf link
     439                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_link')) { replace_with(ui.item, gsf_link_element); }
     440                // gsf switch
     441                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_switch')) { replace_with(ui.item, gsf_switch_element); }
    343442               
    344443            }
    … …  
    362461            'cursor':'pointer',
    363462            'tolerance': 'pointer',
    364             'items':'.gsf_metadata, .gsf_default',
     463            'items':'.gsf_metadata, .gsf_text, .gsf_default',
    365464            'placeholder':'placeholder',
    366465            'connectWith':'.gsf_choose_metadata',
    367466            //'nested':'.gsf:metadata'
    368467            stop: function(event, ui) {
    369                 //alert("STOP");
    370                 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_metadata')) {
    371                     console.log("Current select value = "+CURRENT_SELECT_VALUE);
    372                     var select = $(ui.item).find('select');
    373                     var value = select.attr("value");
    374                     console.log("We want this:"+value);
    375 
    376                     replace_with(ui.item, gsf_metadata_element);
    377                    
    378                 }
     468                // gsf metadata
     469                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
     470                // gsf text
     471                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_text')) { replace_with(ui.item, gsf_text_element); }
     472                // gsf default
     473                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_default')) { replace_with(ui.item, gsf_default_element); }
     474
    379475                bind_all_sortables();
    380476            }
    … …  
    388484            'cursor':'pointer',
    389485            'tolerance': 'pointer',
    390             'items':'.gsf_icon, .gsf_text',
     486            'items':'.leaf, .gsf_link, .gsf_switch, .gsf_choose',
    391487            'placeholder':'placeholder',
    392488            'connectWith':'.gsf_link',
    393489            //'nested':'.gsf:metadata'
    394490            stop: function(event, ui) {
    395                 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_icon')) { replace_with(ui.item, gsf_icon_element); }
    396                 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_text')) { replace_with(ui.item, "<input type=\"text\" name=\"rawtextinput\" size=\"10\"/>"); }
     491                // gsf icon
     492                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_icon')) { replace_with(ui.item, gsf_icon_element); }
     493                // gsf text
     494                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_text')) { replace_with(ui.item, "<input type=\"text\" name=\"rawtextinput\" size=\"10\"/>"); }
     495                // gsf metadata
     496                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
     497                // gsf link
     498                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_link')) { replace_with(ui.item, gsf_link_element); }
     499                // gsf switch
     500                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_switch')) { replace_with(ui.item, gsf_switch_element); }
     501                // gsf choose
     502                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_choose_metadata')) { replace_with(ui.item, gsf_choose_metadata_element); }
    397503            }
    398504    });
    … …  
    405511            'cursor':'pointer',
    406512            'tolerance': 'pointer',
    407             'items':'.gsf_metadata, .gsf_when, .gsf_otherwise',
     513            'items':'.gsf_metadata, .gsf_when, .gsf_otherwise, .gsf_text',
    408514            'placeholder':'placeholder',
    409515            'connectWith':'.gsf_switch',
    410516            //'nested':'.gsf:metadata'
    411517            stop: function(event, ui) {
    412                 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_when')) { replace_with(ui.item, gsf_when_element); }
    413                 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_otherwise')) { replace_with(ui.item, gsf_otherwise_element); }
     518                // gsf when
     519                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_when')) { replace_with(ui.item, gsf_when_element); }
     520                // gsf otherwise
     521                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_otherwise')) { replace_with(ui.item, gsf_otherwise_element); }
     522                // gsf metadata
     523                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
     524                // gsf text
     525                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_text')) { replace_with(ui.item, gsf_text_element); }
    414526            }
    415527    });
    … …  
    422534            'cursor':'pointer',
    423535            'tolerance': 'pointer',
    424             'items':'.leaf',
     536            'items':'.leaf, .gsf_link, .gsf_choose',
    425537            'placeholder':'placeholder',
    426538            //'nested':'.gsf:metadata'
    427539            stop: function(event, ui) {
    428                 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
     540                // gsf metadata
     541                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
     542                // gsf icon
     543                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_icon')) { replace_with(ui.item, gsf_icon_element); }
     544                // gsf text
     545                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_text')) { replace_with(ui.item, gsf_text_element); }
     546                // gsf link
     547                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_link')) { replace_with(ui.item, gsf_link_element); }
     548                // gsf choose
     549                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_choose')) { replace_with(ui.item, gsf_choose_element); }
    429550            }
    430551    });
    … …  
    437558            'cursor':'pointer',
    438559            'tolerance': 'pointer',
    439             'items':'.leaf',
     560            'items':'.leaf, .gsf_link, .gsf_choose',
    440561            'placeholder':'placeholder',
    441562            //'nested':'.gsf:metadata'
    442563            stop: function(event, ui) {
    443                 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
    444                 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_text')) { replace_with(ui.item, "<input type=\"text\" name=\"rawtextinput\" size=\"10\"/>"); }
     564                // gsf metadata
     565                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
     566                // gsf text
     567                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_text')) { replace_with(ui.item, "<input type=\"text\" name=\"rawtextinput\" size=\"10\"/>"); }
     568                // gsf icon
     569                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_icon')) { replace_with(ui.item, gsf_icon_element); }
     570                // gsf link
     571                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_link')) { replace_with(ui.item, gsf_link_element); }
     572                // gsf choose
     573                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_choose')) { replace_with(ui.item, gsf_choose_element); }
    445574            }
    446575    });

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

    r23255 r23276  
    2323
    2424    <!-- the output format for this layout is html -->
    25     <xsl:output method="html"/> 
     25    <xsl:output method="html" omit-xml-declaration="yes"/> 
    2626
    2727    <!-- the main layout is defined here -->
    … …  
    190190        <div class="draggable_gsf_template css_gsf_template block" title="gsf:template"><table class="header"><tbody><tr><td class="header">MATCH=<input type="text" name="rawtextinput" size="10"/></td><td><a href="#" class="minmax ui-icon ui-icon-minusthick">[-]</a></td><td><a href="#" class="remove ui-icon ui-icon-closethick">[x]</a></td></tr></tbody></table><table border="1"><tr class="tr"><td class="droppable" width="10px"></td></tr></table></div><br/>
    191191
    192         <div class="draggable_gsf_choose css_gsf_choose_metadata block" title="gsf:choose-metadata"><table class="header"><tbody><tr><td class="header">CHOOSE</td><td class="header"><a href="#" class="minmax ui-icon ui-icon-minusthick" title="Click me to expand">[-]</a></td><td class="header"><a href="#" class="remove ui-icon ui-icon-closethick" title="Click me to remove"/></td></tr></tbody></table></div>
     192        <div class="draggable_gsf_choose_metadata css_gsf_choose_metadata block" title="gsf:choose-metadata"><table class="header"><tbody><tr><td class="header">CHOOSE</td><td class="header"><a href="#" class="minmax ui-icon ui-icon-minusthick" title="Click me to expand">[-]</a></td><td class="header"><a href="#" class="remove ui-icon ui-icon-closethick" title="Click me to remove"/></td></tr></tbody></table></div>
    193193
    194194        <div class="draggable_gsf_metadata css_gsf_metadata block" title="gsf:metadata"><table class="header"><tbody><tr><td class="header"><xsl:call-template name="meta-to-combo">
    … …  
    212212        <div class="draggable_gsf_icon css_gsf_icon block" title="gsf:icon"><table class="header"><tbody><tr><td class="header">ICON<select><option value = "document" selected = "document">Document</option><option value = "classifier">Classifier</option><option value = "source">Source</option></select></td><td><a href="#" class="remove ui-icon ui-icon-closethick">[x]</a></td></tr></tbody></table></div>
    213213        <br/>
    214         <div class="element_type_text css_text" title="text">TEXT</div>
    215         <div class="element_type_table css_table" title="gsf:table">NEW TABLE</div>
    216         <div class="element_type_tr css_tr" title="gsf:row">NEW TABLE ROW</div>
    217         <div class="element_type_td css_td" title="gsf:column">NEW TABLE COLUMN</div>
     214        <div class="draggable_gsf_text css_text" title="text">TEXT</div>
     215        <div class="draggable_table css_table" title="gsf:table">NEW TABLE</div>
     216        <div class="draggable_tr css_tr" title="gsf:row">NEW TABLE ROW</div>
     217        <div class="draggable_td css_td" title="gsf:column">NEW TABLE COLUMN</div>
    218218
    219219    </td>
    220220    </table>
    221221
     222    <!--
    222223    <div id="format">
    223224        <p>
    … …  
    227228          </i>
    228229        </p>
    229     </div>
     230    </div> -->
    230231    <!--    <p>
    231232          <i>
    … …  
    237238
    238239<!-- *************************************************************************************** -->
    239 
     240<H2>Preview</H2>
     241                    <!-- <iframe name="preview" id="iframe" width="98%" height="300">Your browser does not support iframes</iframe> -->
     242
     243                    <!-- <xsl:variable name="preview"> -->
    240244                    <div id="gs_content">
    241245                        <!--
    … …  
    246250
    247251                    </div>
     252                    <!-- </xsl:variable> -->
     253
     254                    <!-- <script type="text/javascript">
     255                        preview_html = <xsl:text disable-output-escaping="yes">'</xsl:text><xsl:copy-of select="$preview"/><xsl:text disable-output-escaping="yes">';</xsl:text>
     256                    </script> -->
    248257
    249258                    <div id="gs_footer">
Note: See TracChangeset for help on using the changeset viewer.