Selaa lähdekoodia

[search] Restyle of highlighting admin section

Changed jHueSelector plugin to respond to onChange event
Simplified admin page
Enrico Berti 12 vuotta sitten
vanhempi
commit
68eb15c

+ 23 - 17
apps/search/src/search/templates/admin_core_highlighting.mako

@@ -34,23 +34,21 @@ ${ commonheader(_('Search'), "search", user) | n,unicode }
   </%def>
 
   <%def name="content()">
-    <form method="POST" class="form-horizontal" data-bind="submit: submit">
+    <form method="POST" class="form" data-bind="submit: submit">
       <div class="section">
-        <div class="alert alert-info"><h4>${_('Highlighting')}</h4></div>
-        <div data-bind="visible: highlightedFields().length == 0" style="padding-left: 10px;margin-bottom: 20px">
+        <div class="alert alert-info">
+          <div class="pull-right">
+            <label><input type='checkbox' data-bind="checked: isEnabled" style="margin-top: -2px; margin-right: 4px"/> ${_('Enabled') }</label>
+          </div>
+          <h4>${_('Highlighting')}</h4>
+        </div>
+        <div data-bind="visible: highlightedFields().length > 0" style="padding-left: 10px;margin-bottom: 20px">
           <em>${_('Please select some fields to highlight in the result below.')}</em>
         </div>
 
-        <div class="clearfix"></div>
-        <div class="miniform">
-          ${_('Is enabled') }
-          </br>
-          <input type='checkbox' data-bind="checked: isEnabled" />
-          </br>
-          ${_('Fields') }
-          </br>
-          <select data-bind="options: fields, selectedOptions: highlightedFields" size="20" multiple="true"></select>
-          <select id="fields" data-bind="options: fields, selectedOptions: highlightedFields" size="20" multiple="true"></select>
+        <div class="selector">
+          <select data-bind="options: fields, selectedOptions: highlightedFields" size="20" multiple="true" class="hide"></select>
+          <select id="fields" size="20" multiple="true"></select>
         </div>
       </div>
 
@@ -120,13 +118,21 @@ ${ commonheader(_('Search'), "search", user) | n,unicode }
   $(document).ready(function () {
     ko.applyBindings(viewModel);
 
-    ## TODO
+    ko.utils.arrayForEach(viewModel.fields(), function(field) {
+      $("<option>").attr("value", field).text(field).appendTo($("#fields"));
+    });
+
+    $("#fields").val(viewModel.highlightedFields());
+
     $("#fields").jHueSelector({
       selectAllLabel: "${_('Select all')}",
       searchPlaceholder: "${_('Search')}",
-      noChoicesFound: "${_('No groups found.')}",
-      width:600,
-      height:240
+      noChoicesFound: "${_('No fields found.')}",
+      width:$(".selector").width(),
+      height:240,
+      onChange: function(){
+        viewModel.highlightedFields($("#fields").val());
+      }
     });
   });
 </script>

+ 6 - 2
apps/search/src/search/templates/index.mako

@@ -60,7 +60,7 @@ ${ commonheader(_('Search'), "search", user, "40px") | n,unicode }
       </div>
     </div>
     %else:
-    % if response and response['response']['docs'] and len(response['response']['docs']) > 0 and solr_query['facets'] == 1:
+    % if response and response['response']['docs'] and len(response['response']['docs']) > 0 and solr_query['facets'] == 1 and response.get('facet_counts'):
     <div class="span2">
       <ul class="facet-list">
         % if response and response.get('facet_counts'):
@@ -129,7 +129,11 @@ ${ commonheader(_('Search'), "search", user, "40px") | n,unicode }
     </div>
     % endif
     % if response and response['response']['docs'] and len(response['response']['docs']) > 0:
-    <div class="span10">
+      %if response.get('facet_counts'):
+      <div class="span10">
+      %else:
+      <div class="span12">
+      %endif
       <ul class="breadcrumb">
         <li class="pull-right">
           <select class="sort-by">

+ 133 - 128
desktop/core/static/js/Source/jHue/jquery.selector.js

@@ -17,149 +17,154 @@
  * jHue selector plugin
  * it tranforms a select multiple into a searchable/selectable alphabetical list
  */
-;(function ($, window, document, undefined) {
+;
+(function ($, window, document, undefined) {
 
-    var pluginName = "jHueSelector",
-        defaults = {
-            selectAllLabel: "Select all",
-            searchPlaceholder: "Search",
-            noChoicesFound: "No choices found for this element",
-            width: 300,
-            height: 200
-        };
-
-    function Plugin(element, options) {
-        this.element = element;
-        this.options = $.extend({}, defaults, options) ;
-        this._defaults = defaults;
-        this._name = pluginName;
-        this.init();
-    }
-
-    Plugin.prototype.setOptions = function(options) {
-        this.options = $.extend({}, defaults, options) ;
-    };
-
-    Plugin.prototype.init = function () {
-        var _this = this;
-        var addressBook = [];
-        var selectorContainer = $("<div>");
-        if (this.options.width != 300) {
-            selectorContainer.width(this.options.width);
-        }
-        $(_this.element).hide();
-        $(_this.element).find("option").each(function (cnt, opt) {
-            var initial = $(opt).text().substr(0, 1).toLowerCase();
-            if (addressBook[initial] == null) {
-                addressBook[initial] = [];
-            }
-            addressBook[initial].push($(opt));
-        });
-        var sortedKeys = [];
-        for (var key in addressBook) {
-            sortedKeys.push(key);
+  var pluginName = "jHueSelector",
+      defaults = {
+        selectAllLabel: "Select all",
+        searchPlaceholder: "Search",
+        noChoicesFound: "No choices found for this element",
+        width: 300,
+        height: 200,
+        onChange: function () {
         }
-        sortedKeys.sort();
+      };
 
-        if (sortedKeys.length == 0){
-            $(_this.element).after($("<div>").addClass("alert").css("margin-top", "-2px").css("float", "left").html(this.options.noChoicesFound));
-        }
-        else {
-            selectorContainer.addClass("jHueSelector");
-            var body = $("<div>").addClass("jHueSelectorBody");
-            body.appendTo(selectorContainer);
+  function Plugin(element, options) {
+    this.element = element;
+    this.options = $.extend({}, defaults, options);
+    this._defaults = defaults;
+    this._name = pluginName;
+    this.init();
+  }
 
-            for (var i = 0; i < sortedKeys.length; i++) {
-                var key = sortedKeys[i];
-                var ul = $("<ul>");
-                var dividerLi = $("<li>").addClass("selectorDivider");
-                dividerLi.html("<strong>" + key.toUpperCase() + "</strong>");
-                dividerLi.appendTo(ul);
-                $.each(addressBook[key], function (cnt, opt) {
-                    var li = $("<li>");
-                    var lbl = $("<label>").text(opt.text());
-                    var chk = $("<input>").attr("type", "checkbox").addClass("selector").change(function () {
-                        if ($(this).is(":checked")) {
-                            $(this).data("opt").attr("selected", "selected");
-                        }
-                        else {
-                            $(this).data("opt").removeAttr("selected");
-                        }
-                    }).data("opt", opt).prependTo(lbl);
-                    if (opt.is(":selected")) {
-                        chk.attr("checked", "checked");
-                    }
-                    lbl.appendTo(li);
-                    li.appendTo(ul);
-                });
-                ul.appendTo(body);
-            }
+  Plugin.prototype.setOptions = function (options) {
+    this.options = $.extend({}, defaults, options);
+  };
 
-            var header = $("<div>").addClass("jHueSelectorHeader");
-            header.prependTo(selectorContainer);
+  Plugin.prototype.init = function () {
+    var _this = this;
+    var addressBook = [];
+    var selectorContainer = $("<div>");
+    if (this.options.width != 300) {
+      selectorContainer.width(this.options.width);
+    }
+    $(_this.element).hide();
+    $(_this.element).find("option").each(function (cnt, opt) {
+      var initial = $(opt).text().substr(0, 1).toLowerCase();
+      if (addressBook[initial] == null) {
+        addressBook[initial] = [];
+      }
+      addressBook[initial].push($(opt));
+    });
+    var sortedKeys = [];
+    for (var key in addressBook) {
+      sortedKeys.push(key);
+    }
+    sortedKeys.sort();
 
-            var selectAll = $("<label>").text(this.options.selectAllLabel);
-            $("<input>").attr("type", "checkbox").change(function () {
-                var isChecked = $(this).is(":checked");
-                selectorContainer.find("input.selector:visible").each(function () {
-                    if (isChecked) {
-                        $(this).attr("checked", "checked");
-                        $(this).data("opt").attr("selected", "selected");
-                    }
-                    else {
-                        $(this).removeAttr("checked");
-                        $(this).data("opt").removeAttr("selected");
-                    }
-                });
-                if (searchBox.val() != "") {
-                    $(this).removeAttr("checked");
-                }
-            }).prependTo(selectAll);
-            selectAll.appendTo(header);
+    if (sortedKeys.length == 0) {
+      $(_this.element).after($("<div>").addClass("alert").css("margin-top", "-2px").css("float", "left").html(this.options.noChoicesFound));
+    }
+    else {
+      selectorContainer.addClass("jHueSelector");
+      var body = $("<div>").addClass("jHueSelectorBody");
+      body.appendTo(selectorContainer);
 
-            var searchBox = $("<input>").attr("type", "text").attr("placeholder", this.options.searchPlaceholder).keyup(function () {
-                body.find("ul").attr("show", true).show();
-                var q = $.trim($(this).val());
-                if (q != "") {
-                    body.find("li.selectorDivider").hide();
-                    body.find("label").each(function () {
-                        if ($(this).text().toLowerCase().indexOf(q.toLowerCase()) > -1) {
-                            $(this).parent().show();
-                        }
-                        else {
-                            $(this).parent().hide();
-                        }
-                    });
-                    body.find("ul").attr("show", false);
-                    body.find("ul > *:visible").parent().attr("show", true).find("li.selectorDivider").show();
-                }
-                else {
-                    body.find("li.selectorDivider").show();
-                    body.find("label").parent().show();
-                }
-                body.find("ul[show=false]").hide();
-                body.find("ul[show=true]").show();
-            });
-            if (this.options.width != 300) {
-                searchBox.css("margin-left", this.options.width - 120 + "px");
+      for (var i = 0; i < sortedKeys.length; i++) {
+        var key = sortedKeys[i];
+        var ul = $("<ul>");
+        var dividerLi = $("<li>").addClass("selectorDivider");
+        dividerLi.html("<strong>" + key.toUpperCase() + "</strong>");
+        dividerLi.appendTo(ul);
+        $.each(addressBook[key], function (cnt, opt) {
+          var li = $("<li>");
+          var lbl = $("<label>").text(opt.text());
+          var chk = $("<input>").attr("type", "checkbox").addClass("selector").change(function () {
+            if ($(this).is(":checked")) {
+              $(this).data("opt").attr("selected", "selected");
+            }
+            else {
+              $(this).data("opt").removeAttr("selected");
             }
-            searchBox.prependTo(header);
+            _this.options.onChange();
+          }).data("opt", opt).prependTo(lbl);
+          if (opt.is(":selected")) {
+            chk.attr("checked", "checked");
+          }
+          lbl.appendTo(li);
+          li.appendTo(ul);
+        });
+        ul.appendTo(body);
+      }
 
-            body.height(this.options.height - header.outerHeight());
+      var header = $("<div>").addClass("jHueSelectorHeader");
+      header.prependTo(selectorContainer);
 
-            $(_this.element).after(selectorContainer);
+      var selectAll = $("<label>").text(this.options.selectAllLabel);
+      $("<input>").attr("type", "checkbox").change(function () {
+        var isChecked = $(this).is(":checked");
+        selectorContainer.find("input.selector:visible").each(function () {
+          if (isChecked) {
+            $(this).attr("checked", "checked");
+            $(this).data("opt").attr("selected", "selected");
+          }
+          else {
+            $(this).removeAttr("checked");
+            $(this).data("opt").removeAttr("selected");
+          }
+        });
+        if (searchBox.val() != "") {
+          $(this).removeAttr("checked");
         }
-    };
+        _this.options.onChange();
+      }).prependTo(selectAll);
+      selectAll.appendTo(header);
 
-    $.fn[pluginName] = function (options) {
-        return this.each(function () {
-            if (!$.data(this, 'plugin_' + pluginName)) {
-                $.data(this, 'plugin_' + pluginName, new Plugin( this, options));
+      var searchBox = $("<input>").attr("type", "text").attr("placeholder", this.options.searchPlaceholder).keyup(function () {
+        body.find("ul").attr("show", true).show();
+        var q = $.trim($(this).val());
+        if (q != "") {
+          body.find("li.selectorDivider").hide();
+          body.find("label").each(function () {
+            if ($(this).text().toLowerCase().indexOf(q.toLowerCase()) > -1) {
+              $(this).parent().show();
             }
             else {
-                $.data(this, 'plugin_' + pluginName).setOptions(options);
+              $(this).parent().hide();
             }
-        });
+          });
+          body.find("ul").attr("show", false);
+          body.find("ul > *:visible").parent().attr("show", true).find("li.selectorDivider").show();
+        }
+        else {
+          body.find("li.selectorDivider").show();
+          body.find("label").parent().show();
+        }
+        body.find("ul[show=false]").hide();
+        body.find("ul[show=true]").show();
+      });
+      if (this.options.width != 300) {
+        searchBox.css("margin-left", this.options.width - 120 + "px");
+      }
+      searchBox.prependTo(header);
+
+      body.height(this.options.height - header.outerHeight());
+
+      $(_this.element).after(selectorContainer);
     }
+  };
+
+  $.fn[pluginName] = function (options) {
+    return this.each(function () {
+      if (!$.data(this, 'plugin_' + pluginName)) {
+        $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
+      }
+      else {
+        $.data(this, 'plugin_' + pluginName).setOptions(options);
+      }
+    });
+  }
 
 })(jQuery, window, document);