Преглед на файлове

[search] New binding clearable

Enrico Berti преди 11 години
родител
ревизия
9059baa
променени са 3 файла, в които са добавени 46 реда и са изтрити 1 реда
  1. 46 1
      apps/search/src/search/templates/search.mako
  2. BIN
      apps/search/static/art/clearField.png
  3. BIN
      apps/search/static/art/clearField@2x.png

+ 46 - 1
apps/search/src/search/templates/search.mako

@@ -65,7 +65,7 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
       </div>
 
       <span data-bind="foreach: query.qs">
-        <input data-bind="value: q" maxlength="256" type="text" class="search-query input-xlarge" style="cursor: auto;">
+        <input data-bind="clearable: q" maxlength="256" type="text" class="search-query input-xlarge">
         <!-- ko if: $index() >= 1 -->
         <a class="btn" href="javascript:void(0)" data-bind="click: $root.query.removeQ"><i class="fa fa-minus"></i></a>
         <!-- /ko -->
@@ -1343,6 +1343,29 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
     left: -4px;
   }
 
+  .clearable {
+    background: url(/search/static/art/clearField.png) no-repeat right -10px center;
+    border: 1px solid #999;
+    padding: 3px 18px 3px 4px;
+    border-radius: 3px;
+    transition: background 0.4s !important;
+  }
+
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    .clearable {
+      background: url(/search/static/art/clearField@2x.png) no-repeat right -10px center;
+    }
+  }
+
+  .clearable.x {
+    background-position: right 5px center;
+  }
+
+  .clearable.onX {
+    cursor: pointer !important;
+  }
+
+
 </style>
 
 <script type="text/javascript" charset="utf-8">
@@ -1753,6 +1776,28 @@ $(document).ready(function () {
     }
   }
 
+  ko.bindingHandlers.clearable = {
+    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
+      var _el = $(element);
+      function tog(v) {
+        return v ? 'addClass' : 'removeClass';
+      }
+      _el.addClass("clearable");
+      _el.on("input",function () {
+        _el[tog(this.value)]("x");
+        valueAccessor()(_el.val());
+      }).on("mousemove", function (e) {
+        _el[tog(this.offsetWidth - 18 < e.clientX - this.getBoundingClientRect().left)]("onX");
+      }).on("click", function () {
+        _el.removeClass("x onX").val("");
+        valueAccessor()("");
+      });
+    },
+    update: function (element, valueAccessor, allBindingsAccessor) {
+      $(element).val(ko.unwrap(valueAccessor()));
+    }
+  }
+
   ko.bindingHandlers.spinedit = {
     init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
       $(element).spinedit({

BIN
apps/search/static/art/clearField.png


BIN
apps/search/static/art/clearField@2x.png