Refactor remove option implementation

Refs #2756

Add disabled support
Fixes #1199

modules/backend/formwidgets/RecordFinder.php

@@ -123,6 +123,10 @@ class RecordFinder extends FormWidgetBase
             'recordsPerPage',
         ]);
 
+        if ($this->formField->disabled) {
+            $this->previewMode = true;
+        }
+
         if (post('recordfinder_flag')) {
             $this->listWidget = $this->makeListWidget();
             $this->listWidget->bindToController();
@@ -160,6 +164,15 @@ class RecordFinder extends FormWidgetBase
         return ['#'.$this->getId('container') => $this->makePartial('recordfinder')];
     }
 
+    public function onClearRecord()
+    {
+        list($model, $attribute) = $this->resolveModelAttribute($this->valueFrom);
+        $model->{$attribute} = null;
+
+        $this->prepareVars();
+        return ['#'.$this->getId('container') => $this->makePartial('recordfinder')];
+    }
+
     /**
      * Prepares the list data
      */

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

@@ -21,29 +21,43 @@
     // ============================
 
     var RecordFinder = function(element, options) {
-        this.options   = options
         this.$el       = $(element)
+        this.options = options || {}
 
+        $.oc.foundation.controlUtils.markDisposable(element)
         Base.call(this)
         this.init()
     }
 
-
     RecordFinder.prototype = Object.create(BaseProto)
     RecordFinder.prototype.constructor = RecordFinder
 
+    RecordFinder.prototype.init = function() {
+        this.$el.on('dblclick', this.proxy(this.onDoubleClick))
+        this.$el.one('dispose-control', this.proxy(this.dispose))
+    }
+
+    RecordFinder.prototype.dispose = function() {
+        this.$el.off('dblclick', this.proxy(this.onDoubleClick))
+        this.$el.off('dispose-control', this.proxy(this.dispose))
+        this.$el.removeData('oc.someDisposableControl')
+
+        this.$el = null
+
+        // In some cases options could contain callbacks, 
+        // so it's better to clean them up too.
+        this.options = null
+
+        BaseProto.dispose.call(this)
+    }
+
     RecordFinder.DEFAULTS = {
         refreshHandler: null,
         dataLocker: null
     }
 
-    RecordFinder.prototype.init = function() {
+    RecordFinder.prototype.onDoubleClick = function(linkEl, recordId) {
-        var self = this
+        $('.btn.find-record', this.$el).trigger('click')
-        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) {
@@ -59,13 +73,7 @@
             }
         })
 
-        if(linkEl){
+        $(linkEl).closest('.recordfinder-popup').popup('hide')
-            $(linkEl).closest('.recordfinder-popup').popup('hide')
-        }
-    }
-
-    RecordFinder.prototype.clearRecord = function() {
-        this.updateRecord(false, '')
     }
 
     // RECORDFINDER PLUGIN DEFINITION

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

@@ -16,11 +16,16 @@
     </span>
 
     <?php if (!$this->previewMode): ?>
-        <button
+        <?php if ($value): ?>
-            class="btn btn-default clear-record"
+            <button
-            type="button">
+                type="button"
-            <i class="icon-times"></i>
+                class="btn btn-default clear-record"
-        </button>
+                data-request="<?= $this->getEventHandler('onClearRecord') ?>"
+                data-request-confirm="<?= e(trans('backend::lang.form.action_confirm')) ?>"
+                aria-label="Remove">
+                <i class="icon-times"></i>
+            </button>
+        <?php endif ?>
         <button
             class="btn btn-default find-record"
             data-control="popup"

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

@@ -360,6 +360,7 @@
 
         &.clear-record {
             right: 30px;
+            margin-top: -44px;
         }
 
         i {

modules/system/assets/ui/storm.css

@@ -2496,7 +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.clear-record{right:30px;margin-top:-44px}
 .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}