Changeset 4601


Ignore:
Timestamp:
02/28/14 14:12:39 (10 years ago)
Author:
Twan Goosen
Message:

Expansion state for facet panels (through expansion state model)

Location:
vlo/branches/vlo-3.0/vlo-web-app/src/main
Files:
2 added
9 edited

Legend:

Unmodified
Added
Removed

  • vlo/branches/vlo-3.0/vlo-web-app/src/main/java/eu/clarin/cmdi/vlo/wicket/components/FacetPanel.html

    r4582 r4601  
    2424    <body>
    2525        <wicket:panel>
     26            <a wicket:id="expand" class="expandfacet"><span>expand</span></a>
     27            <a wicket:id="collapse" class="collapsefacet"><span>collapse</span></a>
    2628            <wicket:container wicket:id="facetValues" />
    2729            <wicket:container wicket:id="facetSelection" />

  • vlo/branches/vlo-3.0/vlo-web-app/src/main/java/eu/clarin/cmdi/vlo/wicket/components/FacetPanel.java

    r4599 r4601  
    1717package eu.clarin.cmdi.vlo.wicket.components;
    1818
     19import eu.clarin.cmdi.vlo.pojo.ExpansionState;
    1920import eu.clarin.cmdi.vlo.pojo.FacetSelection;
    2021import eu.clarin.cmdi.vlo.pojo.QueryFacetsSelection;
    … …  
    2223import java.util.HashSet;
    2324import org.apache.solr.client.solrj.response.FacetField;
     25import org.apache.wicket.AttributeModifier;
    2426import org.apache.wicket.ajax.AjaxRequestTarget;
     27import org.apache.wicket.ajax.markup.html.AjaxFallbackLink;
     28import org.apache.wicket.markup.html.link.Link;
    2529import org.apache.wicket.markup.html.panel.Panel;
     30import org.apache.wicket.model.AbstractReadOnlyModel;
    2631import org.apache.wicket.model.IModel;
     32import org.apache.wicket.model.Model;
    2733import org.apache.wicket.model.PropertyModel;
    2834
    … …  
    4147    private final SelectedFacetPanel selectedFacetPanel;
    4248    private final FacetValuesPanel facetValuesPanel;
     49    private final IModel<ExpansionState> expansionStateModel;
    4350
    44     public FacetPanel(String id, IModel<FacetSelection> model) {
     51    public FacetPanel(String id, IModel<FacetSelection> model, IModel<ExpansionState> expansionState) {
    4552        super(id, model);
    4653        this.model = model;
     54        this.expansionStateModel = expansionState;
    4755
    4856        // panel showing values for selection
    … …  
    5361        selectedFacetPanel = createSelectedFacetPanel("facetSelection");
    5462        add(selectedFacetPanel);
     63
     64        addExpansionComponents();
     65    }
     66
     67    private void addExpansionComponents() {
     68
     69        // class modifier to apply correct class depending on state
     70        add(new AttributeModifier("class", new AbstractReadOnlyModel<String>() {
     71
     72            @Override
     73            public String getObject() {
     74                switch (expansionStateModel.getObject()) {
     75                    case COLLAPSED:
     76                        return "facet collapsedfacet";
     77                    case EXPANDED:
     78                        return "facet expandedfacet";
     79                    default:
     80                        return "facet";
     81                }
     82            }
     83        }));
     84
     85        // add expansion link
     86        add(new AjaxFallbackLink("expand") {
     87
     88            @Override
     89            public void onClick(AjaxRequestTarget target) {
     90                expansionStateModel.setObject(ExpansionState.EXPANDED);
     91                if (target != null) {
     92                    target.add(FacetPanel.this);
     93                }
     94            }
     95        });
     96
     97        // add collapse link
     98        add(new AjaxFallbackLink("collapse") {
     99
     100            @Override
     101            public void onClick(AjaxRequestTarget target) {
     102                expansionStateModel.setObject(ExpansionState.COLLAPSED);
     103                if (target != null) {
     104                    target.add(FacetPanel.this);
     105                }
     106            }
     107        });
     108        setOutputMarkupId(true);
    55109    }
    56110
    … …  
    68122            @Override
    69123            public void onValuesSelected(String facet, Collection<String> value, AjaxRequestTarget target) {
    70                 // A value has been selected on this facet's panel,
    71                 // update the model!
     124                // A value has been selected on this facet's panel, update the model!
    72125                model.getObject().getSelection().selectValues(facet, value);
     126                // collapse after selection
     127                expansionStateModel.setObject(ExpansionState.COLLAPSED);
    73128                if (target != null) {
    74129                    // reload entire page for now
    … …  
    90145                // Update model
    91146                selection.selectValues(facet, newSelection);
     147                // collapse after removal
     148                expansionStateModel.setObject(ExpansionState.COLLAPSED);
    92149                if (target != null) {
    93150                    // reload entire page for now

  • vlo/branches/vlo-3.0/vlo-web-app/src/main/java/eu/clarin/cmdi/vlo/wicket/components/FacetValuesPanel.html

    r4595 r4601  
    2424    <body>
    2525        <wicket:panel>
    26             <a href="#" class="expandfacet"><span>expand</span></a>
    27             <a href="#" class="collapsefacet"><span>collapse</span></a>
    2826            <h1><a href="#"><wicket:container wicket:id="name">[TITLE]</wicket:container></a></h1>
    2927            <a href class="filtertoggle"><span>filter</span></a>

  • vlo/branches/vlo-3.0/vlo-web-app/src/main/java/eu/clarin/cmdi/vlo/wicket/components/FacetsPanel.html

    r4595 r4601  
    3232                </p>
    3333                <wicket:container wicket:id="facets">
    34                     <div class="facet collapsedfacet" wicket:id="facet">[facet]</div>
     34                    <div wicket:id="facet">[facet]</div>
    3535                </wicket:container>
    3636                <!-- rounded corners - bottom **** -->

  • vlo/branches/vlo-3.0/vlo-web-app/src/main/java/eu/clarin/cmdi/vlo/wicket/components/FacetsPanel.java

    r4599 r4601  
    1717package eu.clarin.cmdi.vlo.wicket.components;
    1818
     19import eu.clarin.cmdi.vlo.pojo.ExpansionState;
    1920import eu.clarin.cmdi.vlo.pojo.QueryFacetsSelection;
     21import eu.clarin.cmdi.vlo.wicket.model.FacetExpansionStateModel;
    2022import eu.clarin.cmdi.vlo.wicket.model.FacetSelectionModel;
     23import java.util.HashMap;
    2124import java.util.List;
     25import java.util.Map;
    2226import org.apache.solr.client.solrj.response.FacetField;
    2327import org.apache.wicket.ajax.AjaxRequestTarget;
    … …  
    2630import org.apache.wicket.markup.html.panel.Panel;
    2731import org.apache.wicket.model.IModel;
     32import org.apache.wicket.model.util.MapModel;
    2833
    2934/**
    … …  
    4752    public FacetsPanel(final String id, final IModel<List<FacetField>> facetsModel, final IModel<QueryFacetsSelection> selectionModel) {
    4853        super(id, selectionModel);
    49 
     54       
     55        final Map<String, ExpansionState> expansionStateMap = new HashMap<String, ExpansionState>();
     56        final MapModel<String, ExpansionState> expansionModel = new MapModel<String, ExpansionState>(expansionStateMap);
     57       
    5058        add(new ListView<FacetField>("facets", facetsModel) {
    51 
     59           
    5260            @Override
    5361            protected void populateItem(ListItem<FacetField> item) {
    5462                item.add(
    55                         new FacetPanel("facet", new FacetSelectionModel(item.getModel(), selectionModel)) {
    56 
     63                        new FacetPanel("facet",
     64                                new FacetSelectionModel(item.getModel(), selectionModel),
     65                                new FacetExpansionStateModel(item.getModel(), expansionModel)) {
     66                           
    5767                            @Override
    5868                            protected void selectionChanged(AjaxRequestTarget target) {

  • vlo/branches/vlo-3.0/vlo-web-app/src/main/java/eu/clarin/cmdi/vlo/wicket/components/SelectedFacetPanel.html

    r4595 r4601  
    2424    <body>
    2525        <wicket:panel>
    26             <a href="#" class="expandfacet"><span>expand</span></a>
    27             <a href="#" class="collapsefacet"><span>collapse</span></a>
    2826            <h1><a href="#"><wicket:container wicket:id="facet">[TITLE]</wicket:container></a></h1>
    2927            <div wicket:id="facetValueRemover" class="selectedvaluelabel">
    … …  
    3533            <div class="sbilinks facetvalues">
    3634                <ul>
    37                     <li><span class="selectedfacetvalue">Dutch</span><a class="unselectfacetvalue" title="unselect value" href="index2.html"><span>[unselect]</span></a></li>
    38                     <li><span class="facetvalue">English</span></li>
     35                    <li><span class="selectedfacetvalue">ITEM</span><a class="unselectfacetvalue" title="unselect value" href="index2.html"><span>[unselect]</span></a></li>
     36<!--                    <li><span class="facetvalue">English</span></li>
    3937                    <li><span class="facetvalue">German</span></li>
    4038                    <li><span class="facetvalue">French</span></li>
    … …  
    4341                    <li><span class="facetvalue">Japanese</span></li>
    4442                    <li><span class="facetvalue">Turkish</span></li>
    45                     <li><span class="facetvalue">Chinese</span></li>
     43                    <li><span class="facetvalue">Chinese</span></li>-->
    4644                    <!--<li class="more-link"><a href="#">more...</a></li>-->
    4745                </ul>

  • vlo/branches/vlo-3.0/vlo-web-app/src/main/java/eu/clarin/cmdi/vlo/wicket/pages/FacetedSearchPage.html

    r4599 r4601  
    6262            </div>
    6363
    64             <div class="facet collapsedfacet topbar" id="collections">
     64            <div class="topbar" id="collections">
    6565                <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
    6666                <div wicket:id="collectionsFacet">[COLLECTIONS]</div>

  • vlo/branches/vlo-3.0/vlo-web-app/src/main/java/eu/clarin/cmdi/vlo/wicket/pages/FacetedSearchPage.java

    r4599 r4601  
    22
    33import eu.clarin.cmdi.vlo.config.VloConfig;
     4import eu.clarin.cmdi.vlo.pojo.ExpansionState;
    45import eu.clarin.cmdi.vlo.wicket.components.FacetsPanel;
    56import eu.clarin.cmdi.vlo.pojo.QueryFacetsSelection;
    … …  
    6364        final FacetFieldModel collectionFacetFieldModel = new FacetFieldModel(facetFieldsService, vloConfig.getCollectionFacet(), queryModel);
    6465        final FacetSelectionModel collectionSelectionModel = new FacetSelectionModel(collectionFacetFieldModel, queryModel);
    65         final FacetPanel panel = new FacetPanel(id, collectionSelectionModel) {
     66        final FacetPanel panel = new FacetPanel(id, collectionSelectionModel, new Model<ExpansionState>(ExpansionState.COLLAPSED)) {
    6667
    6768            @Override

  • vlo/branches/vlo-3.0/vlo-web-app/src/main/webapp/js/vlo-facets.js

    r4599 r4601  
    1616 */
    1717
    18 function expandFacet(p) {
    19     p.find(".facetvalues").show(200);
    20     p.addClass("expandedfacet");
    21     p.removeClass("collapsedfacet");
    22     p.find(".filterform input").focus();
    23 }
    24 
    25 function collapseFacet(p) {
    26     p.find(".facetvalues").hide(200);
    27     p.addClass("collapsedfacet");
    28     p.removeClass("expandedfacet");
    29 }
    30 
    31 $(document).ready(function() {
    32     /* facet collapse/expand */
    33     $("a.expandfacet, a#showvalues").click(function(event) {
    34         event.preventDefault();
    35         var p = $(this).parents(".collapsedfacet");
    36         expandFacet(p);
    37     });
    38     $("a.collapsefacet").click(function(event) {
    39         event.preventDefault();
    40         var p = $(this).parents(".expandedfacet");
    41         collapseFacet(p);
    42     });
    43 
    44     $(".facet h1 a").click(function(event) {
    45         event.preventDefault();
    46         if ($(this).parents(".expandedfacet").length === 1) {
    47             var p = $(this).parents(".expandedfacet");
    48             collapseFacet(p);
    49         } else {
    50             var p = $(this).parents(".collapsedfacet");
    51             expandFacet(p);
    52         }
    53     });
    54 
    55     /* facet filter */
    56 //    $(".filterform").hide();
     18//function expandFacet(p) {
     19//    p.find(".facetvalues").show(200);
     20//    p.addClass("expandedfacet");
     21//    p.removeClass("collapsedfacet");
     22//    p.find(".filterform input").focus();
     23//}
    5724//
    58 //    $("a.filtertoggle").click(function(event) {
    59 //        // toggle link clicked, show or hide filter box and focus on input
     25//function collapseFacet(p) {
     26//    p.find(".facetvalues").hide(200);
     27//    p.addClass("collapsedfacet");
     28//    p.removeClass("expandedfacet");
     29//}
     30//
     31//$(document).ready(function() {
     32//    /* facet collapse/expand */
     33//    $("a.expandfacet, a#showvalues").click(function(event) {
    6034//        event.preventDefault();
    61 //        var form = $(this).parent(".facet").find(".filterform");
    62 //        form.siblings(".facetvalues").find("li").show();
    63 //        expandFacet($(this).parent(".collapsedfacet"));
    64 //        form.toggle(100, function(event) {
    65 //            var input = form.children("input");
    66 //            input.val('');
    67 //            input.focus();
    68 //        });
     35//        var p = $(this).parents(".collapsedfacet");
     36//        expandFacet(p);
    6937//    });
    70 
    71     var filterHandler = function(event) {
    72         // filter text entered, update result list
    73         var links = $(this).parents(".filterform").siblings(".facetvalues").find("li");
    74         var match = $(this).val().toUpperCase();
    75         if (match.length === 0) {
    76             links.show();
    77         } else {
    78             // hide all results
    79             links.hide();
    80             // show all matching results
    81             links.filter(function(index) {
    82                 // case insensitive match
    83                 return links[index].textContent.toUpperCase().indexOf(match) >= 0;
    84             }).show();
    85         }
    86     };
    87 
    88     $(".filterform input").on('input', filterHandler);
    89 
    90     /* Facet values popup */
    91 
    92     $(".more-link").click(function(event) {
    93         event.preventDefault();
    94         $("#facetvalues").toggle();
    95         var name = $(this).parents(".facet").find("h1").text();
    96         $("#facetvalues h2").text(name);
    97         $(window).scrollTop($('#facetvalues').position().top);
    98     });
    99 
    100     $("#facetvalues a").click(function(event) {
    101         event.preventDefault();
    102         $("#facetvalues").toggle();
    103     });
    104 });
     38//    $("a.collapsefacet").click(function(event) {
     39//        event.preventDefault();
     40//        var p = $(this).parents(".expandedfacet");
     41//        collapseFacet(p);
     42//    });
     43//
     44//    $(".facet h1 a").click(function(event) {
     45//        event.preventDefault();
     46//        if ($(this).parents(".expandedfacet").length === 1) {
     47//            var p = $(this).parents(".expandedfacet");
     48//            collapseFacet(p);
     49//        } else {
     50//            var p = $(this).parents(".collapsedfacet");
     51//            expandFacet(p);
     52//        }
     53//    });
     54//
     55//    /* facet filter */
     56////    $(".filterform").hide();
     57////
     58////    $("a.filtertoggle").click(function(event) {
     59////        // toggle link clicked, show or hide filter box and focus on input
     60////        event.preventDefault();
     61////        var form = $(this).parent(".facet").find(".filterform");
     62////        form.siblings(".facetvalues").find("li").show();
     63////        expandFacet($(this).parent(".collapsedfacet"));
     64////        form.toggle(100, function(event) {
     65////            var input = form.children("input");
     66////            input.val('');
     67////            input.focus();
     68////        });
     69////    });
     70//
     71//    var filterHandler = function(event) {
     72//        // filter text entered, update result list
     73//        var links = $(this).parents(".filterform").siblings(".facetvalues").find("li");
     74//        var match = $(this).val().toUpperCase();
     75//        if (match.length === 0) {
     76//            links.show();
     77//        } else {
     78//            // hide all results
     79//            links.hide();
     80//            // show all matching results
     81//            links.filter(function(index) {
     82//                // case insensitive match
     83//                return links[index].textContent.toUpperCase().indexOf(match) >= 0;
     84//            }).show();
     85//        }
     86//    };
     87//
     88//    $(".filterform input").on('input', filterHandler);
     89//
     90//    /* Facet values popup */
     91//
     92//    $(".more-link").click(function(event) {
     93//        event.preventDefault();
     94//        $("#facetvalues").toggle();
     95//        var name = $(this).parents(".facet").find("h1").text();
     96//        $("#facetvalues h2").text(name);
     97//        $(window).scrollTop($('#facetvalues').position().top);
     98//    });
     99//
     100//    $("#facetvalues a").click(function(event) {
     101//        event.preventDefault();
     102//        $("#facetvalues").toggle();
     103//    });
     104//});
Note: See TracChangeset for help on using the changeset viewer.