Changeset 291 in main


Ignore:
Timestamp:
09/15/11 12:50:50 (8 years ago)
Author:
pcosquer
Message:

navigate: add a preview of documents

Location:
trunk/openPLM
Files:
3 added
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/openPLM/media/css/openplm.css

    r289 r291  
    499499} 
    500500 
     501#closeThumbnails { 
     502    float: right; 
     503} 
     504 
     505#navThumbnailsBar { 
     506    border-bottom: 1px solid #ccc; 
     507    background-color: #dbb; 
     508    padding: 3px; 
     509} 
     510 
    501511div#navThumbnails { 
    502     overflow: scroll; 
    503512    width: 180px; 
    504513    display:none; 
     
    508517    position:absolute; 
    509518    right:0px; 
    510 } 
    511  
    512 div#navThumbnailus > img{ 
    513     width: 180px; 
     519    border-left: 1px solid #ccc; 
     520    background: rgba(200, 230, 230, 0.7); 
     521} 
     522 
     523div#thumbnailsList img{ 
     524    border-bottom: 1px solid #ccc; 
     525    max-width: 160px; 
     526    max-height: 160px; 
    514527} 
    515528 
  • trunk/openPLM/media/js/navigate.js

    r287 r291  
     1 
     2function show_thumbnails_panel(node){ 
     3    if ($("#navThumbnails").is(":hidden")) { 
     4        $("#navThumbnails").show(); 
     5        $("#FilterNav").css("right", "190px"); 
     6        var width = node.width(); 
     7        if (node.offset().left + width > $("#navThumbnails").offset().left){ 
     8            var left = $("#DivNav").position().left - 180; 
     9            $("#DivNav").css("left", left); 
     10        } 
     11    } 
     12} 
     13 
     14function hide_thumbnails_panel(){ 
     15    $("#navThumbnails").hide(); 
     16    $("#FilterNav").css("right", "10px"); 
     17} 
     18 
     19function display_thumbnails(node_id, ajax_url){ 
     20    $("#thumbnailsList").empty(); 
     21    $.ajax({ 
     22        url: ajax_url, 
     23        success: function( data ) { 
     24            $.each(data["files"], function(index, value){ 
     25                var name = value[0]; 
     26                var url = value[1]; 
     27                var img = value[2]; 
     28                var title = "Download " + name; 
     29                $("#thumbnailsList").append( 
     30                    $("<a href='"+ url +"'> <img src='" + img + "' width='160' height='160' title='" + title + "' /></a>")); 
     31                }); 
     32            $("#navDocument").text(data["doc"]); 
     33            show_thumbnails_panel($("#" + node_id)); 
     34        } 
     35    }); 
     36} 
     37 
    138$(document).ready(function(){ 
    239 
    3   // Supprime la scrollbar en JS 
    4   $('#Navigate').css('overflow', 'hidden'); 
     40        // Supprime la scrollbar en JS 
     41        $('#Navigate').css('overflow', 'hidden'); 
    542 
    6   // Insert les images de navigation 
    7 //    $('#Navigate') 
    8 //    .append('<div id="imgManagement"><span class="imgManagement" id="topControl"></span><span class="imgManagement" id="leftControl"></span><span class="imgManagement" id="rightControl"></span><span class="imgManagement" id="bottomControl"></span></div>'); 
     43        // Insert les images de navigation 
     44        //    $('#Navigate') 
     45        //    .append('<div id="imgManagement"><span class="imgManagement" id="topControl"></span><span class="imgManagement" id="leftControl"></span><span class="imgManagement" id="rightControl"></span><span class="imgManagement" id="bottomControl"></span></div>'); 
    946 
    10   // crée un écouteur pour l'évènement de type clic sur les div qui ont l' id #rightControl 
    11   $('#rightControl') 
    12     .bind('click', function(){ 
    13       // Move slideInner using left attribute for position 
    14       $('#DivNav').animate({ 
    15         "left": "-=100px" 
    16       }, "fast"); 
    17     }); 
    18      
    19   // crée un écouteur pour l'évènement de type clic sur les div qui ont l' id #leftControl 
    20   $('#leftControl') 
    21     .bind('click', function(){ 
    22       // Move slideInner using left attribute for position 
    23       $('#DivNav').animate({ 
    24         "left": "+=100px" 
    25       }, "fast"); 
    26     }); 
     47        // crée un écouteur pour l'évènement de type clic sur les div qui ont l' id #rightControl 
     48        $('#rightControl') 
     49        .bind('click', function(){ 
     50            // Move slideInner using left attribute for position 
     51            $('#DivNav').animate({ 
     52                "left": "-=100px" 
     53                }, "fast"); 
     54            }); 
    2755 
    28   // crée un écouteur pour l'évènement de type clic sur les div qui ont l' id #topControl 
    29   $('#topControl') 
    30     .bind('click', function(){ 
    31       // Move slideInner using top attribute for position 
    32       $('#DivNav').animate({ 
    33         "top": "+=100px" 
    34       }, "fast"); 
    35     }); 
     56        // crée un écouteur pour l'évènement de type clic sur les div qui ont l' id #leftControl 
     57        $('#leftControl') 
     58        .bind('click', function(){ 
     59            // Move slideInner using left attribute for position 
     60            $('#DivNav').animate({ 
     61                "left": "+=100px" 
     62                }, "fast"); 
     63            }); 
    3664 
    37   // crée un écouteur pour l'évènement de type clic sur les div qui ont l' id #bottomControl 
    38   $('#bottomControl') 
    39     .bind('click', function(){ 
    40       // Move slideInner using left attribute for position 
    41       $('#DivNav').animate({ 
    42         "top": "-=100px" 
    43       }, "fast"); 
    44     }); 
     65        // crée un écouteur pour l'évènement de type clic sur les div qui ont l' id #topControl 
     66        $('#topControl') 
     67            .bind('click', function(){ 
     68                    // Move slideInner using top attribute for position 
     69                    $('#DivNav').animate({ 
     70                        "top": "+=100px" 
     71                        }, "fast"); 
     72                    }); 
    4573 
    46   $("#DivNav").draggable({ 
    47       cursor: 'crosshair' 
    48       }); 
     74        // crée un écouteur pour l'évènement de type clic sur les div qui ont l' id #bottomControl 
     75        $('#bottomControl') 
     76            .bind('click', function(){ 
     77                    // Move slideInner using left attribute for position 
     78                    $('#DivNav').animate({ 
     79                        "top": "-=100px" 
     80                        }, "fast"); 
     81                    }); 
    4982 
    50   }); 
     83        $("#DivNav").draggable({ 
     84cursor: 'crosshair' 
     85}); 
     86        $("div.node").mouseenter( 
     87        function () { 
     88            $(this).find(".node_thumbnails").show(); 
     89        });  
     90        $("div.node").mouseleave( 
     91        function () { 
     92            $(this).find(".node_thumbnails").hide(); 
     93        } 
     94        ); 
     95 
     96        $("#closeThumbnails").button({ 
     97            icons : { 
     98                primary: 'ui-icon-close' 
     99                }, 
     100            text: false}).click(hide_thumbnails_panel); 
     101}); 
  • trunk/openPLM/plmapp/navigate.py

    r287 r291  
    285285            node.attr["label"] = obj.username.encode("utf-8") 
    286286        node.attr["label"] += "\\n" + extra_label.encode("utf-8") 
    287         node.attr["tooltip"] = node.attr["label"].replace("\\n", " ") 
    288  
     287        if type_ == DocumentController: 
     288            path = "/".join((obj.type.encode('utf-8'),                                                   obj.reference.encode('utf-8'), obj.revision.encode('utf-8'))) 
     289            node.attr["tooltip"] = "/ajax/thumbnails/" + path 
     290        else: 
     291            node.attr["tooltip"] = "None" 
    289292 
    290293    def convert_map(self, map_string): 
     
    295298            height = y2 - top 
    296299            style = "position:absolute;z-index:5;top:%dpx;left:%dpx;width:%dpx;height:%dpx;" % (top, left, width, height) 
    297             div = ET.Element("div", id="Nav-%s" % area.get("id"), style=style) 
     300            id_ = "Nav-%s" % area.get("id") 
     301            div = ET.Element("div", id=id_, style=style) 
    298302            div.set("class", "node") 
     303            url = area.get("title") 
     304            if url != "None": 
     305                thumbnails = ET.SubElement(div, "img", src="/media/img/search.png", 
     306                        title="Display thumbnails") 
     307                thumbnails.set("class", "node_thumbnails") 
     308                thumbnails.set("onclick", "display_thumbnails('%s', '%s');" % (id_, url)) 
    299309            a = ET.SubElement(div, "a", href=area.get("href"))  
    300310            ET.SubElement(a, "span") 
  • trunk/openPLM/plmapp/views.py

    r287 r291  
    15121512    return HttpResponse(json, mimetype='application/json') 
    15131513 
     1514@login_required 
     1515def ajax_thumbnails(request, obj_type, obj_ref, obj_revi): 
     1516    """ 
     1517     
     1518    :param request: :class:`django.http.QueryDict` 
     1519    :param obj_type: :attr:`.PLMObject.type` 
     1520    :type obj_type: str 
     1521    :param obj_ref: :attr:`.PLMObject.reference` 
     1522    :type obj_ref: str 
     1523    :param obj_revi: :attr:`.PLMObject.revision` 
     1524    :type obj_revi: str 
     1525    """ 
     1526    obj = get_obj(obj_type, obj_ref, obj_revi, request.user) 
     1527    files = [] 
     1528    doc = "|".join((obj_type, obj_ref, obj_revi)) 
     1529    for f in obj.files: 
     1530        if f.thumbnail: 
     1531            img = "/media/thumbnails/%s" % f.thumbnail  
     1532        else: 
     1533            img = "/media/img/image-missing.png" 
     1534        files.append((f.filename, "/file/%d/" % f.id, img)) 
     1535    json = JSONEncoder().encode(dict(files=files, doc=doc)) 
     1536    return HttpResponse(json, mimetype='application/json') 
     1537 
     1538 
  • trunk/openPLM/templates/Navigate.htm

    r286 r291  
    66{% block content %} 
    77    <div id="Navigate"> 
     8    <div id="navThumbnails"> 
     9         
     10        <div id="navThumbnailsBar"> 
     11            <span id="navDocument"></span> 
     12            <button id="closeThumbnails"/> 
     13        </div> 
     14        <div id="thumbnailsList"> 
     15        </div> 
     16 
     17    </div> 
    818        <div id="imgManagement"> 
    919            <span class="imgManagement" id="topControl"></span> 
  • trunk/openPLM/urls.py

    r279 r291  
    6868    (r'ajax/search/$', ajax_search_form), 
    6969    (r'ajax/complete/(?P<obj_type>\w+)/(?P<field>\w+)/$', ajax_autocomplete), 
    70      
     70    (r'ajax/thumbnails/(?P<obj_type>\w+)/(?P<obj_ref>%(x)s)/(?P<obj_revi>%(x)s)/' % {'x' : r'[^/?#\t\r\v\f]+'}, ajax_thumbnails), 
     71 
    7172    (object_url + r'$', display_object), 
    7273    (object_url + r'attributes/$', display_object_attributes), 
Note: See TracChangeset for help on using the changeset viewer.