[IMP] web_widget_slick: Make requested changes

* Break up render_value method * Break up destroy_content method * Add unslicking to destroy_content, add test * Clean up qweb template formatting * Fix indentation * Change widget name Comment edit
OCA · Sep 6, 2017 · d4e3c4f · d4e3c4f
1 parent 3148551
commit d4e3c4f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 19 deletions.
diff --git a/web_widget_slick/static/src/js/web_widget_slick.js b/web_widget_slick/static/src/js/web_widget_slick.js
@@ -1,7 +1,7 @@
 /* Copyright 2016-2017 LasLabs Inc.
  * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html). */
 
-odoo.define('web_widget_slick.slick_widget', function(require){
+odoo.define('web_widget_slick', function(require) {
   "use strict";
 
   var core = require('web.core');
@@ -68,36 +68,40 @@ odoo.define('web_widget_slick.slick_widget', function(require){
     },
 
     destroy_content: function() {
-      var self = this;
       if (this.$slick) {
         var $imgs = this.$el.find('img');
-        $imgs.each(function(idx, val){
-          self.$slick.slick('slickRemove', idx);
-        });
+        // Unslicking removes the carousel but re-appends any images,
+        // so removal of images is also required
+        $imgs.each($.proxy(this._slickRemove, this));
+        this.$slick.slick('unslick');
       }
     },
 
     render_value: function() {
-      var self = this;
       this._super();
       this.destroy_content();
 
-      var baseUrl = '/web/image/' + this.options.modelName;
-
       this.$slick = $('<div class="slick-container"></div>');
       this.$el.append(this.$slick);
-      self.loading.push.apply(self.get('value'));
 
-      _.each(self.get('value'), function(id){
-        var $img = $('<img class="img img-responsive"></img>');
-        var $div = $('<div></div>');
-        $div.append($img);
-        $img.attr('data-lazy', baseUrl + '/' + id + '/' + self.options.fieldName);
-        self.$slick.append($div);
-      });
+      var baseUrl = '/web/image/' + this.options.modelName + '/';
+      var value = this.get('value');
+      this.loading.push.apply(value);
+      _.each(value, $.proxy(this._slickRender, this, [baseUrl]));
 
       this.$slick.slick(this.options);
+    },
+
+    _slickRemove: function (idx, val) {
+      this.$slick.slick('slickRemove', idx);
+    },
 
+    _slickRender: function (baseUrl, id) {
+      var $img = $('<img class="img img-responsive"></img>');
+      var $div = $('<div></div>');
+      $img.attr('data-lazy', baseUrl + id + '/' + this.options.fieldName);
+      $div.append($img);
+      this.$slick.append($div);
     }
 
   });

diff --git a/web_widget_slick/static/src/xml/web_widget_slick.xml b/web_widget_slick/static/src/xml/web_widget_slick.xml
@@ -4,6 +4,6 @@
 
 <template>
     <t t-name="FieldSlickImages">
-        <div t-att-class="'o_form_field '+widget.widget_class"></div>
+        <div t-attf-class="o_form_field {{ widget.widget_class }}"></div>
     </t>
 </template>
diff --git a/web_widget_slick/static/tests/js/web_widget_slick.js b/web_widget_slick/static/tests/js/web_widget_slick.js
@@ -1,8 +1,7 @@
 /* Copyright 2017 LasLabs Inc.
  * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html). */
 
-odoo.define_section('web_widget_slick', ['web.core', 'web.form_common'],
-                    function(test) {
+odoo.define_section('web_widget_slick', ['web.core', 'web.form_common'], function(test) {
     "use strict";
 
     function appendWidget (core, formCommon, $fix) {
@@ -57,6 +56,18 @@ odoo.define_section('web_widget_slick', ['web.core', 'web.form_common'],
         }
     );
 
+    test('.destroy_content() should remove carousel',
+        function (assert, core, formCommon) {
+            var $fix = $('#qunit-fixture');
+            var widget = appendWidget(core, formCommon, $fix);
+
+            widget.destroy_content();
+
+            var slickChildren = widget.$slick.children().length;
+            assert.strictEqual(slickChildren, 0);
+        }
+    );
+
     test('.render_value() should add images corresponding to field value',
         function(assert, core, formCommon) {
             var $fix = $('#qunit-fixture');