RecordFinder - add a remove button

modules/backend/formwidgets/recordfinder/assets/js/recordfinder.js

@@ -14,24 +14,38 @@
 
 +function ($) { "use strict";
 
+    var Base = $.oc.foundation.base,
+        BaseProto = Base.prototype
+
     // RECORDFINDER CLASS DEFINITION
     // ============================
 
     var RecordFinder = function(element, options) {
-        var self       = this
         this.options   = options
         this.$el       = $(element)
 
-        this.$el.on('dblclick', function () {
-            $('.btn:first', self.$el).trigger('click')
-        })
+        Base.call(this)
+        this.init()
     }
 
+
+    RecordFinder.prototype = Object.create(BaseProto)
+    RecordFinder.prototype.constructor = RecordFinder
+
     RecordFinder.DEFAULTS = {
         refreshHandler: null,
         dataLocker: null
     }
 
+    RecordFinder.prototype.init = function() {
+        var self = this
+        this.$el.on('dblclick', function () {
+            $('.btn.find-record', self.$el).trigger('click')
+        })
+
+        this.$el.on('click', '.clear-record', this.proxy(this.clearRecord))
+    }
+
     RecordFinder.prototype.updateRecord = function(linkEl, recordId) {
         if (!this.options.dataLocker) return
         var self = this
@@ -45,7 +59,13 @@
             }
         })
 
-        $(linkEl).closest('.recordfinder-popup').popup('hide')
+        if(linkEl){
+            $(linkEl).closest('.recordfinder-popup').popup('hide')
+        }
+    }
+
+    RecordFinder.prototype.clearRecord = function() {
+        this.updateRecord(false, '')
     }
 
     // RECORDFINDER PLUGIN DEFINITION

modules/backend/formwidgets/recordfinder/partials/_recordfinder.htm

@@ -17,7 +17,12 @@
 
     <?php if (!$this->previewMode): ?>
         <button
-            class="btn btn-default"
+            class="btn btn-default clear-record"
+            type="button">
+            <i class="icon-times"></i>
+        </button>
+        <button
+            class="btn btn-default find-record"
             data-control="popup"
             data-size="huge"
             data-handler="<?= $this->getEventHandler('onFindRecord') ?>"

modules/system/assets/ui/less/form.less

@@ -358,6 +358,10 @@
         padding-left: 15px;
         padding-right: 15px;
 
+        &.clear-record {
+            right: 30px;
+        }
+
         i {
             font-size: 14px;
         }

modules/system/assets/ui/storm.css

@@ -2496,6 +2496,7 @@ html.cssanimations .cursor-loading-indicator.hide{display:none}
 .field-recordfinder{background-color:#ffffff;border:1px solid #d1d6d9;overflow:hidden;position:relative;-webkit-box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
 .field-recordfinder .form-control{background:transparent;border-color:transparent;height:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:7px 30px 7px 11px;-webkit-box-shadow:none;box-shadow:none}
 .field-recordfinder .btn{background:transparent;position:absolute;right:-2px;top:50%;margin-top:-43px;height:88px;color:#595959;text-shadow:none;padding-left:15px;padding-right:15px}
+.field-recordfinder .btn.clear-record {right:30px;}
 .field-recordfinder .btn i{font-size:14px}
 .field-recordfinder .btn:hover{color:#333333}
 .field-recordfinder .text-muted i{font-size:14px;position:relative;top:1px;display:inline-block;margin:0 2px}