Merge pull request #706 from LasLabs/feature/10.0/SMD-263-mig-web_wid…

…get_slick

[ADD] web_widget_slick: Add module

web_widget_slick/README.rst

@@ -0,0 +1,114 @@
+.. image:: https://img.shields.io/badge/license-LGPL--3-blue.svg
+   :target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
+   :alt: License: LGPL-3
+
+=====================
+Slick Carousel Widget
+=====================
+
+This module provides a Slick Carousel widget for use in the Odoo backend web interface.
+
+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. Additional options
+specific to Odoo are:
+
++-----------------+--------------+---------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
+| Name            | Type         | Default             | Description                                                                                                                                                                 |
++=================+==============+=====================+=============================================================================================================================================================================+
+| ``fieldName``   | ``String``   | ``datas``           | Field to lookup on relation table. Defaults to ``datas``, which is the data field used in ``ir.attachment`` table. This would be used to define a custom attachment model   |
++-----------------+--------------+---------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
+| ``modelName``   | ``String``   | ``ir.attachment``   | Model of attachment relation. This would be used to define a custom attachment model instead of default ``ir.attachment``                                                   |
++-----------------+--------------+---------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
+
+.. _setting available to Slick: http://kenwheeler.github.io/slick/#settings
+
+Example Module
+--------------
+
+An example implementation, for instructional purposes as well as convenient
+functional testing, is provided in the `web_widget_slick_example` module.
+
+* Install `web_widget_slick_example`.
+* Activate Developer Mode.
+* Go to Settings / Technical / Slick, and open the record to view the widget.
+
+To try out different Slick settings:
+
+* Go to Settings/User Interface/Views and search for 'slick.example.view.form'.
+* Open the form view record.
+* Click the Edit button.
+* In the Architecture editor, find `options="{'slidesToShow': 2}`, and add
+  any desired settings (separated by commas) inside the curly braces.
+* Save the changes and browse to the widget, as described above, to see the
+  widget with the new settings in effect.
+
+.. image:: https://odoo-community.org/website/image/ir.attachment/5784_f2813bd/datas
+   :alt: Try me on Runbot
+   :target: https://runbot.odoo-community.org/runbot/162/10.0
+
+Known issues / Roadmap
+======================
+
+* Adding / Deleting images from a carousel is not currently supported.
+
+Bug Tracker
+===========
+
+Bugs are tracked on `GitHub Issues
+<https://github.com/OCA/web/issues>`_. In case of trouble, please
+check there if your issue has already been reported. If you spotted it first,
+help us smash it by providing detailed and welcomed feedback.
+
+Credits
+=======
+
+Images
+------
+
+* Odoo Community Association: `Icon <https://github.com/OCA/maintainer-tools/blob/master/template/module/static/description/icon.svg>`_.
+
+Contributors
+------------
+
+* Dave Lasley <[email protected]>
+* Brent Hughes <[email protected]>
+
+Do not contact contributors directly about support or help with technical issues.
+
+Maintainer
+----------
+
+.. image:: https://odoo-community.org/logo.png
+   :alt: Odoo Community Association
+   :target: https://odoo-community.org
+
+This module is maintained by the OCA.
+
+OCA, or the Odoo Community Association, is a nonprofit organization whose
+mission is to support the collaborative development of Odoo features and
+promote its widespread use.
+
+To contribute to this module, please visit https://odoo-community.org.

web_widget_slick/__init__.py

@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+# Copyright 2016-2017 LasLabs Inc.
+# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).

web_widget_slick/__manifest__.py

@@ -0,0 +1,25 @@
+# -*- coding: utf-8 -*-
+# Copyright 2016-2017 LasLabs Inc.
+# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
+
+{
+    "name": "Slick Carousel Widget",
+    "summary": "Adds SlickJS slider widget for use as a carousel on Many2one"
+    " attachment fields in backend form views.",
+    "version": "10.0.1.0.0",
+    "category": "Web",
+    "website": "https://laslabs.com/",
+    "author": "LasLabs, Odoo Community Association (OCA)",
+    "license": "LGPL-3",
+    "application": False,
+    "installable": True,
+    "depends": [
+        "web",
+    ],
+    "data": [
+        "templates/assets.xml",
+    ],
+    "qweb": [
+        "static/src/xml/web_widget_slick.xml",
+    ],
+}

web_widget_slick/static/lib/slick/slick-theme.less

@@ -0,0 +1,172 @@
+/* Copyright 2013-2016 Ken Wheeler
+ * Version 1.7.1
+ * License MIT (https://opensource.org/licenses/MIT) */
+
+@charset "UTF-8";
+
+// Default Variables
+
+@slick-font-path: "./fonts/";
+@slick-font-family: "slick";
+@slick-loader-path: "./";
+@slick-arrow-color: white;
+@slick-dot-color: black;
+@slick-dot-color-active: @slick-dot-color;
+@slick-prev-character: "←";
+@slick-next-character: "→";
+@slick-dot-character: "•";
+@slick-dot-size: 6px;
+@slick-opacity-default: 0.75;
+@slick-opacity-on-hover: 1;
+@slick-opacity-not-active: 0.25;
+
+/* Slider */
+.slick-loading .slick-list{
+    background: #fff url('@{slick-loader-path}ajax-loader.gif') center center no-repeat;
+}
+
+/* Arrows */
+.slick-prev,
+.slick-next {
+    position: absolute;
+    display: block;
+    height: 20px;
+    width: 20px;
+    line-height: 0px;
+    font-size: 0px;
+    cursor: pointer;
+    background: transparent;
+    color: transparent;
+    top: 50%;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+    padding: 0;
+    border: none;
+    outline: none;
+    &:hover, &:focus {
+        outline: none;
+        background: transparent;
+        color: transparent;
+        &:before {
+            opacity: @slick-opacity-on-hover;
+        }
+    }
+    &.slick-disabled:before {
+        opacity: @slick-opacity-not-active;
+    }
+}
+
+.slick-prev:before, .slick-next:before {
+    font-family: @slick-font-family;
+    font-size: 20px;
+    line-height: 1;
+    color: @slick-arrow-color;
+    opacity: @slick-opacity-default;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    & when ( @slick-font-family = 'slick' ) {
+        /* Icons */
+        @font-face {
+            font-family: 'slick';
+            font-weight: normal;
+            font-style: normal;
+            src: url('@{slick-font-path}slick.eot');
+            src: url('@{slick-font-path}slick.eot?#iefix') format('embedded-opentype'), url('@{slick-font-path}slick.woff') format('woff'), url('@{slick-font-path}slick.ttf') format('truetype'), url('@{slick-font-path}slick.svg#slick') format('svg');
+        }
+    }
+}
+
+.slick-prev {
+    left: -25px;
+    [dir="rtl"] & {
+        left: auto;
+        right: -25px;
+    }
+    &:before {
+        content: @slick-prev-character;
+        [dir="rtl"] & {
+            content: @slick-next-character;
+        }
+    }
+}
+
+.slick-next {
+    right: -25px;
+    [dir="rtl"] & {
+        left: -25px;
+        right: auto;
+    }
+    &:before {
+        content: @slick-next-character;
+        [dir="rtl"] & {
+            content: @slick-prev-character;
+        }
+    }
+}
+
+/* Dots */
+
+.slick-dotted .slick-slider {
+    margin-bottom: 30px;
+}
+
+.slick-dots {
+    position: absolute;
+    bottom: -25px;
+    list-style: none;
+    display: block;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    li {
+        position: relative;
+        display: inline-block;
+        height: 20px;
+        width: 20px;
+        margin: 0 5px;
+        padding: 0;
+        cursor: pointer;
+        button {
+            border: 0;
+            background: transparent;
+            display: block;
+            height: 20px;
+            width: 20px;
+            outline: none;
+            line-height: 0px;
+            font-size: 0px;
+            color: transparent;
+            padding: 5px;
+            cursor: pointer;
+            &:hover, &:focus {
+                outline: none;
+                &:before {
+                    opacity: @slick-opacity-on-hover;
+                }
+            }
+            &:before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                content: @slick-dot-character;
+                width: 20px;
+                height: 20px;
+                font-family: @slick-font-family;
+                font-size: @slick-dot-size;
+                line-height: 20px;
+                text-align: center;
+                color: @slick-dot-color;
+                opacity: @slick-opacity-not-active;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+            }
+        }
+        &.slick-active button:before {
+            color: @slick-dot-color-active;
+            opacity: @slick-opacity-default;
+        }
+    }
+}