[ADD] web_widget_slick: Add module #706

hughesbm · 2017-08-23T23:41:13Z

Slick Carousel Widget

The web_widget_slick module provides a Slick Carousel widget for use in Odoo.

The web_widget_slick_example module provides an example implementation; views can be found in Settings / Slick

Usage

Default usage is on a One2many attachment field, as defined below:

class SlickExample(models.Model):
    _name = 'slick.example'
    _description = 'Slick Example Model'
    image_ids = fields.One2many(
        name='Images',
        comodel_name='ir.attachment',
        inverse_name='res_id',
    )

Assuming the above model, you would add a Slick Carousel on the image_ids column by using the following field definition in the model's form view:

<field name="image_ids" widget="one2many_slick_images" options="{}"/>

Options

The widget passes options directly through to Slick, so any setting available to Slick is available to the widget.

Additionally, Odoo-specific options fieldName and modelName are available; see readme for details.

lasley

Few inline comments. High level notes:

Only pull in the library files we need, so in this case just the slick JS (make sure the version number is in header)
- I don't think we use the theme, but if you want to give it a shot go for it but use the LESS version. It's probably worth trying - it probably looks nice
Switch the icon to OCA

lasley · 2017-08-24T00:17:17Z

web_widget_slick/README.rst

+Odoo Slick Widget
+=================
+
+This module provides a Slick Carousel widget for use in Odoo.


"for use in the Odoo backend web interface"

lasley · 2017-08-24T00:21:04Z

web_widget_slick/static/src/css/slick.css

@@ -0,0 +1,20 @@
+/* Copyright 2017 LasLabs Inc.


Change to LESS

I don't think you'll need to do anything other than the file extension and folder for the most part though.

Also this was like 2015 or something when I made this - double check the timeline for copyright.

lasley · 2017-08-24T00:24:04Z

web_widget_slick/static/src/css/slick.css

+ * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html). */
+
+.slick-arrow{
+    background-color: #4c4c4c !important;


Ok so I never really liked this part - the arrows look like crap if I remember right. We should maybe try to use fontawesome or glyphs, and maybe the built-in LESS colors

hughesbm · 2017-08-24T20:40:14Z

Styling has been updated to be more Odoo-like. Arrow buttons now use left/right font awesome chevrons (also used in paging buttons in Odoo) and LESS mixins of button classes to match other brand-colored buttons.

lasley · 2017-08-24T21:35:49Z

Now that I'm thinking about it, let's go ahead and move the example module in too. It sucks, but I can't find any model in core that has a o2m attachments field that we could use 😦

hughesbm · 2017-08-25T00:10:48Z

The example module has been added. 👍 ayyyyyy 👍

lasley · 2017-08-25T02:25:19Z

web_widget_slick/README.rst

+Example
+-------
+
+An example implementation can be found in the web_widget_slick_example module.


Add a note here about functionally testing this module using the example

hughesbm · 2017-08-26T01:03:36Z

PhantomJS is failing to find the field template on Travis, but works without any problems locally. The tests themselves all pass when run in the browser. Functional tests on runbot work as expected, too.

Any ideas on what could cause this?

lasley · 2017-08-30T19:22:49Z

web_widget_slick/README.rst

+Example Module
+--------------
+
+An example implementation, for instructional purposes as well as convenient


How does a functional reviewer find the menu for testing? Assume that a functional reviewer does not review code, so pointing them to code is no bueno

pedrobaeza · 2017-08-30T19:28:06Z

Testing a bit this widget, I see that dragging over an image, there's a strange behavior that doesn't happen if you drag in the carousel outside an image. I see also that this control is readonly. Do you plan to add features for allowing to add or delete images?

lasley · 2017-08-30T19:36:03Z

I see also that this control is readonly. Do you plan to add features for allowing to add or delete images?

Not at this time, but that would be a good thing for roadmap.

We are, however, going to be implementing image editing with a module combining this with web_widget_darkroom from #595. The slick part will serve as an image browser with the darkroom part as the editor.

hughesbm · 2017-08-31T02:01:31Z

@pedrobaeza I believe I found and dealt with the dragging behavior you mentioned; if it's not resolved for you and I just worked on a different dragging issue instead, please let me know! 😄

@lasley I updated the readme with more detailed instructions, and added a roadmap item regarding adding/deleting images from the carousel.

I also fixed some other issues related to lazy-loaded images not displaying properly while being sized responsively, especially when using the Slick grid settings.

pedrobaeza · 2017-08-31T08:29:30Z

@hughesbm indeed, the dragging issue I mentioned is fixed with this commit, thanks!

hughesbm · 2017-09-01T22:51:42Z

Update: I was able to reproduce the PhantomJS failure to find the widget template locally, as well, so it's not a Travis issue. The template is loaded fine on subsequent test runs, but can't be found on the initial run.

hughesbm · 2017-09-06T00:58:39Z

The testing issue has been fixed! 🎉

lasley

Thanks @hughesbm - comments inline

lasley · 2017-09-06T15:15:28Z

web_widget_slick/static/src/js/web_widget_slick.js

+      if (this.$slick) {
+        var $imgs = this.$el.find('img');
+        $imgs.each(function(idx, val){
+          self.$slick.slick('slickRemove', idx);


Move this into a method slickRemove, delete the var self = this; above, and use proxy to send to destroy:

$imgs.each($.proxy(this.slickRemove, this));

lasley · 2017-09-06T15:16:25Z

web_widget_slick/static/src/js/web_widget_slick.js

+
+      this.$slick = $('<div class="slick-container"></div>');
+      this.$el.append(this.$slick);
+      self.loading.push.apply(self.get('value'));


lasley · 2017-09-06T15:17:07Z

web_widget_slick/static/src/js/web_widget_slick.js

+      self.loading.push.apply(self.get('value'));
+
+      _.each(self.get('value'), function(id){
+        var $img = $('<img class="img img-responsive"></img>');


Move this stuff into a slickRender then proxy to it just like recommended in slickRemove

In JS if you find yourself using the ol' this=self trick, you're probably nesting too much. I know I probably did this, so not your fault, but good to know regardless.

lasley · 2017-09-06T15:18:47Z

web_widget_slick/static/src/js/web_widget_slick.js

+/* 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){


Can just call this web_widget_slick

lasley · 2017-09-06T15:21:35Z

web_widget_slick/static/src/xml/web_widget_slick.xml

+
+<template>
+    <t t-name="FieldSlickImages">
+        <div t-att-class="'o_form_field '+widget.widget_class"></div>


t-attf-class="o_form_field {{ widget.widget_class }}"

lasley · 2017-09-06T15:22:30Z

web_widget_slick/static/tests/js/web_widget_slick.js

+/* 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'],


I typically suffix my tours with .tour, but that's stylistic so feel free to leave this.

These are just unit tests, not a tour. 😄

lasley · 2017-09-06T15:23:43Z

web_widget_slick/static/tests/js/web_widget_slick.js

+ * 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) {


Hrmmmm this tabbing is bugging the crap out of me. I think it would be best to just leave the function declaration on the first line - it won't be that much longer than your other ones and we don't have a 79 char hard limit like we do in Python.

lasley

Thanks @hughesbm

hughesbm · 2017-09-06T22:45:53Z

I just noticed there are display problems with multiple widgets per page, so this module still needs work.

hughesbm · 2017-09-09T00:08:34Z

The latest commit fixes display issues related to use of <group> and <sheet> tags. The widget should now display correctly and be sized appropriately.

lasley · 2017-09-09T00:46:01Z

web_widget_slick_example/views/slick_example_view.xml

+            <form string="Slick Example">
+                <header />
+                <sheet>
+                    <field name="image_ids" widget="one2many_slick_images"


Put this in a group to prove your fix works please

lasley

Great job @hughesbm

felixvillafranca

Great¡

pedrobaeza · 2017-09-10T10:57:28Z

@lasley squash at your taste before merging.

* Create SlickJS widget field * Remove template test * Move web_widget_slick assets to backend only, update ReadMe, bump version * Remove highlighting in ReadMe

* Add local slick files to use instead of CDN * Override CSS to display widget correctly * Adjust arrow button size/placement * Bump version * Rename __openerp__.py -> __manifest__.py * Rename widget_slick.js -> web_widget_slick.js * Update copyright, license (AGPL -> LGPL) * Update readme * Correct eslint errors * Change module name in various places for consistency * Improve styling of widget arrows, dots * Change css -> less * Remove unneeded slick files * Copyright 2017 -> 2016-2017 * Add OCA to authors * Use OCA icon * Fix readme * Clean up assets * Fix file permissions * Update readme with reference to example module * Fix formatting error, incorrect link * Add javascript tests * Add note to readme about functional testing with example module * Fix/cleanup javascript * Fix destroy_content() method * Move slide navigation out of slide addition loop * Remove unused variables * Remove unneeded DOM append * Reorganize files/directories * Adjust template tags (templates -> template) * Add slick-field class to field template instead of using jQuery * Misc cleanup * Adjust breakpoint settings to show fewer images by default * Enable adaptiveHeight by default * Add .img and .img-responsive classes to images * Fix dragging issues by preventing default mousedown and touchstart event behavior * Set swipeToSlide default to true * Change how slick slides are populated to allow grid mode * Fix issue causing carousel images to display improperly in some situations * Add better functional testing instructions to readme * Add roadmap to readme * Make minor styling changes * Fix issue with template loading w/ PhantomJS * Clean up template, use css class provided by widget * Remove unneeded dependency from tests * 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 * Add Slick copyright information * Add padding left/right, move arrows in to avoid clipping when widget not in a sheet tag * Apply dot and arrow styles only when needed * Add _resizeCarousel() and related methods to ensure accurate carousel sizing in various views * Resize carousel on core.bus resize * Account for differences in group layouts and labels, sheet/no-sheet layouts * Adjust, clean up less * Clean up js

* Create SlickJS widget field in example module for usage instructions * Add security to example slick widget model

* Bump version * Rename __openerp__.py -> __manifest__.py * Replace openerp import, tags with odoo * Remove data tags * Replace LasLabs icon w/ OCA icon * Update readme * Update license (AGPL -> LGPL) * Update copyright

lasley · 2017-09-11T14:46:33Z

I ended up reordering some of the commits as well so that we could have a clean 4 commits - one for each module creation by me, then another for each module upgrade by Brent.

I'll merge once we get a CI 🍏

lasley added the work in progress label Aug 24, 2017

lasley added this to the 10.0 milestone Aug 24, 2017

lasley suggested changes Aug 24, 2017

View reviewed changes

lasley reviewed Aug 25, 2017

View reviewed changes

hughesbm force-pushed the feature/10.0/SMD-263-mig-web_widget_slick branch 3 times, most recently from a900246 to 05cd4a3 Compare August 26, 2017 00:51

lasley reviewed Aug 30, 2017

View reviewed changes

hughesbm mentioned this pull request Sep 1, 2017

[ADD] web_widget_slickroom: Add module #715

Merged

2 tasks

lasley added needs review and removed work in progress labels Sep 6, 2017

lasley suggested changes Sep 6, 2017

View reviewed changes

lasley approved these changes Sep 6, 2017

View reviewed changes

hughesbm force-pushed the feature/10.0/SMD-263-mig-web_widget_slick branch from d4e3c4f to 170ae9b Compare September 6, 2017 20:59

lasley reviewed Sep 9, 2017

View reviewed changes

lasley approved these changes Sep 9, 2017

View reviewed changes

felixvillafranca approved these changes Sep 10, 2017

View reviewed changes

lasley and others added 4 commits September 11, 2017 07:40

[ADD] web_widget_slick: Create module

ec343b6

* Create SlickJS widget field * Remove template test * Move web_widget_slick assets to backend only, update ReadMe, bump version * Remove highlighting in ReadMe

[ADD] web_widget_slick_example: Create module

b3ffddf

* Create SlickJS widget field in example module for usage instructions * Add security to example slick widget model

[MIG] web_widget_slick_example: Migrate to v10

63bfc0f

* Bump version * Rename __openerp__.py -> __manifest__.py * Replace openerp import, tags with odoo * Remove data tags * Replace LasLabs icon w/ OCA icon * Update readme * Update license (AGPL -> LGPL) * Update copyright

lasley force-pushed the feature/10.0/SMD-263-mig-web_widget_slick branch from 8a2b90b to 63bfc0f Compare September 11, 2017 14:45

lasley merged commit ad466e2 into OCA:10.0 Sep 11, 2017

lasley deleted the feature/10.0/SMD-263-mig-web_widget_slick branch September 11, 2017 15:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ADD] web_widget_slick: Add module #706

[ADD] web_widget_slick: Add module #706

hughesbm commented Aug 23, 2017 •

edited

Loading

lasley left a comment

lasley Aug 24, 2017 •

edited

Loading

lasley Aug 24, 2017

lasley Aug 24, 2017

hughesbm commented Aug 24, 2017 •

edited

Loading

lasley commented Aug 24, 2017

hughesbm commented Aug 25, 2017

lasley Aug 25, 2017

hughesbm commented Aug 26, 2017

lasley Aug 30, 2017

pedrobaeza commented Aug 30, 2017

lasley commented Aug 30, 2017 •

edited

Loading

hughesbm commented Aug 31, 2017

pedrobaeza commented Aug 31, 2017

hughesbm commented Sep 1, 2017

hughesbm commented Sep 6, 2017

lasley left a comment

lasley Sep 6, 2017

lasley Sep 6, 2017

lasley Sep 6, 2017

lasley Sep 6, 2017

lasley Sep 6, 2017

lasley Sep 6, 2017

hughesbm Sep 6, 2017

lasley Sep 6, 2017

lasley left a comment

hughesbm commented Sep 6, 2017

hughesbm commented Sep 9, 2017

lasley Sep 9, 2017

lasley left a comment

felixvillafranca left a comment

pedrobaeza commented Sep 10, 2017

lasley commented Sep 11, 2017

[ADD] web_widget_slick: Add module #706

[ADD] web_widget_slick: Add module #706

Conversation

hughesbm commented Aug 23, 2017 • edited Loading

Slick Carousel Widget

Usage

Options

lasley left a comment

Choose a reason for hiding this comment

lasley Aug 24, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hughesbm commented Aug 24, 2017 • edited Loading

lasley commented Aug 24, 2017

hughesbm commented Aug 25, 2017

Choose a reason for hiding this comment

hughesbm commented Aug 26, 2017

Choose a reason for hiding this comment

pedrobaeza commented Aug 30, 2017

lasley commented Aug 30, 2017 • edited Loading

hughesbm commented Aug 31, 2017

pedrobaeza commented Aug 31, 2017

hughesbm commented Sep 1, 2017

hughesbm commented Sep 6, 2017

lasley left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lasley left a comment

Choose a reason for hiding this comment

hughesbm commented Sep 6, 2017

hughesbm commented Sep 9, 2017

Choose a reason for hiding this comment

lasley left a comment

Choose a reason for hiding this comment

felixvillafranca left a comment

Choose a reason for hiding this comment

pedrobaeza commented Sep 10, 2017

lasley commented Sep 11, 2017

hughesbm commented Aug 23, 2017 •

edited

Loading

lasley Aug 24, 2017 •

edited

Loading

hughesbm commented Aug 24, 2017 •

edited

Loading

lasley commented Aug 30, 2017 •

edited

Loading