diff --git a/web_widget_slick/README.rst b/web_widget_slick/README.rst new file mode 100755 index 00000000..cd6449c9 --- /dev/null +++ b/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:: + + + +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 +`_. 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 `_. + +Contributors +------------ + +* Dave Lasley +* Brent Hughes + +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. diff --git a/web_widget_slick/__init__.py b/web_widget_slick/__init__.py new file mode 100644 index 00000000..a62ce000 --- /dev/null +++ b/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). diff --git a/web_widget_slick/__manifest__.py b/web_widget_slick/__manifest__.py new file mode 100644 index 00000000..d671a95a --- /dev/null +++ b/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", + ], +} diff --git a/web_widget_slick/static/description/icon.png b/web_widget_slick/static/description/icon.png new file mode 100644 index 00000000..3a0328b5 Binary files /dev/null and b/web_widget_slick/static/description/icon.png differ diff --git a/web_widget_slick/static/description/icon.svg b/web_widget_slick/static/description/icon.svg new file mode 100644 index 00000000..a7a26d09 --- /dev/null +++ b/web_widget_slick/static/description/icon.svg @@ -0,0 +1,79 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/web_widget_slick/static/lib/slick/ajax-loader.gif b/web_widget_slick/static/lib/slick/ajax-loader.gif new file mode 100755 index 00000000..e0e6e976 Binary files /dev/null and b/web_widget_slick/static/lib/slick/ajax-loader.gif differ diff --git a/web_widget_slick/static/lib/slick/slick-theme.less b/web_widget_slick/static/lib/slick/slick-theme.less new file mode 100755 index 00000000..a2d21f3f --- /dev/null +++ b/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; + } + } +} diff --git a/web_widget_slick/static/lib/slick/slick.js b/web_widget_slick/static/lib/slick/slick.js new file mode 100755 index 00000000..754ec097 --- /dev/null +++ b/web_widget_slick/static/lib/slick/slick.js @@ -0,0 +1,2996 @@ +/* Copyright 2013-2016 Ken Wheeler + * Version 1.7.1 + * License MIT (https://opensource.org/licenses/MIT) */ + +/* + _ _ _ _ + ___| (_) ___| | __ (_)___ +/ __| | |/ __| |/ / | / __| +\__ \ | | (__| < _ | \__ \ +|___/_|_|\___|_|\_(_)/ |___/ + |__/ + + Version: 1.7.1 + Author: Ken Wheeler + Website: http://kenwheeler.github.io + Docs: http://kenwheeler.github.io/slick + Repo: http://github.com/kenwheeler/slick + Issues: http://github.com/kenwheeler/slick/issues + + */ +/* global window, document, define, jQuery, setInterval, clearInterval */ +;(function(factory) { + 'use strict'; + if (typeof define === 'function' && define.amd) { + define(['jquery'], factory); + } else if (typeof exports !== 'undefined') { + module.exports = factory(require('jquery')); + } else { + factory(jQuery); + } + +}(function($) { + 'use strict'; + var Slick = window.Slick || {}; + + Slick = (function() { + + var instanceUid = 0; + + function Slick(element, settings) { + + var _ = this, dataSettings; + + _.defaults = { + accessibility: true, + adaptiveHeight: false, + appendArrows: $(element), + appendDots: $(element), + arrows: true, + asNavFor: null, + prevArrow: '', + nextArrow: '', + autoplay: false, + autoplaySpeed: 3000, + centerMode: false, + centerPadding: '50px', + cssEase: 'ease', + customPaging: function(slider, i) { + return $('