Extend assets search extending-assets-search

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Title Predicate"
    sling:resourceSuperType="foundation/components/parbase"
    allowedParents="[*/parsys]"
    componentGroup="Search"/>

<%--

  Sample title predicate component

--%><%@ page import="java.util.Calendar" %><%
%><%@include file="/libs/foundation/global.jsp"%><%

    // A unique id is necessary in case this predicate is inserted multiple times on the same page
    String elemId = "cq-predicate-" +  Long.toString(Calendar.getInstance().getTimeInMillis());

%><div class="predicatebox">

    <div class="title">Title</div>

    <%-- The wrapper for the form elements. All items are appended to this wrapper. --%>
    <div id="<%= elemId %>" class="content"></div>

</div><script type="text/javascript">

    CQ.Ext.onLoad(function() {

        var predicateName = "property";
        var propertyName = "jcr:content/metadata/dc:title";
        var elemId = "<%= elemId %>";

        // Get the page wide available QueryBuilder.
        var qb = CQ.search.Util.getQueryBuilder();

        // createId adds a counter to the predicate name - useful in case this predicate
        // is inserted multiple times on the same page.
        var id = qb.createId(predicateName);

        // Hidden field that defines the property to search for; in our case this
        // is the "dc:title" metadata. The name "property" (or "1_property", "2_property", and so on.)
        // indicates the server to use the property predicate
        // (com.day.cq.search.eval.JcrPropertyPredicateEvaluator).
        qb.addField({
            "xtype": "hidden",
            "renderTo": elemId,
            "name": id,
            "value": propertyName
        });

        // The visible text field. The name has to be like the one of the hidden field above
        // plus the ".value" suffix.
        qb.addField({
            "xtype": "textfield",
            "renderTo": elemId,
            "name": id + ".value"
        });

        // Depending on the predicate, additional parameters let you configure the
        // predicate. Here we add an operation parameter to create a "like" query.
        // Again note the name set to the id and a suffix.
        qb.addField({
            "xtype": "hidden",
            "renderTo": elemId,
            "name": id + ".operation",
            "value": "like"
        });
    });
</script>

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Image Formats"
    sling:resourceSuperType="foundation/components/parbase"
    allowedParents="[*/parsys]"
    componentGroup="Search"/>

<%--

  Sample group predicate component

--%><%@ page import="java.util.Calendar" %><%
%><%@include file="/libs/foundation/global.jsp"%><%

    // A unique id is necessary in case this predicate is inserted multiple times on the same page.
    String elemId = "cq-predicate-" +  Long.toString(Calendar.getInstance().getTimeInMillis());

%><div class="predicatebox">

    <div class="title">Image Formats</div>

    <%-- The wrapper for the form elements. All items are append to this wrapper. --%>
    <div id="<%= elemId %>" class="content"></div>

</div><script type="text/javascript">

    CQ.Ext.onLoad(function() {

        var predicateName = "property";
        var propertyName = "jcr:content/metadata/dc:format";
        var elemId = "<%= elemId %>";

        // Get the page wide available QueryBuilder.
        var qb = CQ.search.Util.getQueryBuilder();

        // Create a unique group ID; will return for example, "1_group".
        var groupId = qb.createGroupId();

        // Hidden field that defines the property to search for  - in our case "dc:format" -
        // and declares the group of predicates. "property" in the name ("1_group.property")
        // indicates to the server to use the "property predicate"
        // (com.day.cq.search.eval.JcrPropertyPredicateEvaluator).
        qb.addField({
            "xtype": "hidden",
            "renderTo": "<%= elemId %>",
            "name": groupId + "." + predicateName, // 1_group.property
            "value": propertyName
        });

        // Declare to combine the multiple values using OR.
        qb.add(new CQ.Ext.form.Hidden({
            "name": groupId + ".p.or",  // 1_group.p.or
            "value": "true"
        }));

        // The options
        var options = [
            { "label":"JPEG", "value":"image/jpeg"},
            { "label":"PNG",  "value":"image/png" },
            { "label":"GIF",  "value":"image/gif" }
        ];

        // Build a checkbox for each option.
        for (var i = 0; i < options.length; i++) {
            qb.addField({
                "xtype": "checkbox",
                "renderTo": "<%= elemId %>",
                // 1_group.property.0_value, 1_group.property.1_value, and so on.
                "name": groupId + "." +  predicateName + "." + i + "_value",
                "inputValue": options[i].value,
                "boxLabel": options[i].label,
                "listeners": {
                    "check": function() {
                        // Submit the search form when checking/unchecking a checkbox.
                        qb.submit();
                    }
                }
            });
        }
    });