mirror of https://github.com/OCA/web.git
[MIG] web_widget_slick: Migrate to v10
* 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
pull/706/head
Brenton Hughes
Dave Lasley
parent
ec343b6ec8
commit
d59af25db3
|
|
@ -1,13 +1,12 @@
|
||||||
.. image:: https://img.shields.io/badge/license-AGPL--3-blue.svg
|
.. image:: https://img.shields.io/badge/license-LGPL--3-blue.svg
|
||||||
:target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
|
:target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
|
||||||
:alt: License: AGPL-3
|
:alt: License: LGPL-3
|
||||||
|
|
||||||
=================
|
=====================
|
||||||
Odoo Slick Widget
|
Slick Carousel Widget
|
||||||
=================
|
=====================
|
||||||
|
|
||||||
This module provides a Slick Carousel widget for use in Odoo.
|
|
||||||
|
|
||||||
|
This module provides a Slick Carousel widget for use in the Odoo backend web interface.
|
||||||
|
|
||||||
Usage
|
Usage
|
||||||
=====
|
=====
|
||||||
|
|
@ -23,16 +22,14 @@ Default usage is on a One2many attachment field, as defined below::
|
||||||
inverse_name='res_id',
|
inverse_name='res_id',
|
||||||
)
|
)
|
||||||
|
|
||||||
Assuming the above model, you would use add a Slick Carousel on the
|
Assuming the above model, you would add a Slick Carousel on the
|
||||||
``image_ids`` column by using the following field definition in the
|
``image_ids`` column by using the following field definition in the
|
||||||
model's form view::
|
model's form view::
|
||||||
|
|
||||||
<field name="image_ids" widget="one2many_slick_images" options="{}"/>
|
<field name="image_ids" widget="one2many_slick_images" options="{}"/>
|
||||||
|
|
||||||
Example implementation - https://repo.laslabs.com/projects/ODOO/repos/web/browse/web_widget_slick_example
|
|
||||||
|
|
||||||
Options
|
Options
|
||||||
=======
|
-------
|
||||||
|
|
||||||
The widget passes options directly through to Slick, so any `setting
|
The widget passes options directly through to Slick, so any `setting
|
||||||
available to Slick`_ is available to the widget. Additional options
|
available to Slick`_ is available to the widget. Additional options
|
||||||
|
|
@ -48,6 +45,42 @@ specific to Odoo are:
|
||||||
|
|
||||||
.. _setting available to Slick: http://kenwheeler.github.io/slick/#settings
|
.. _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
|
Credits
|
||||||
=======
|
=======
|
||||||
|
|
@ -55,18 +88,27 @@ Credits
|
||||||
Images
|
Images
|
||||||
------
|
------
|
||||||
|
|
||||||
* LasLabs: `Icon <https://repo.laslabs.com/projects/TEM/repos/odoo-module_template/browse/module_name/static/description/icon.svg?raw>`_.
|
* Odoo Community Association: `Icon <https://github.com/OCA/maintainer-tools/blob/master/template/module/static/description/icon.svg>`_.
|
||||||
|
|
||||||
Contributors
|
Contributors
|
||||||
------------
|
------------
|
||||||
|
|
||||||
* Dave Lasley <dave@laslabs.com>
|
* Dave Lasley <dave@laslabs.com>
|
||||||
|
* Brent Hughes <brent.hughes@laslabs.com>
|
||||||
|
|
||||||
|
Do not contact contributors directly about support or help with technical issues.
|
||||||
|
|
||||||
Maintainer
|
Maintainer
|
||||||
----------
|
----------
|
||||||
|
|
||||||
.. image:: https://laslabs.com/logo.png
|
.. image:: https://odoo-community.org/logo.png
|
||||||
:alt: LasLabs Inc.
|
:alt: Odoo Community Association
|
||||||
:target: https://laslabs.com
|
:target: https://odoo-community.org
|
||||||
|
|
||||||
This module is maintained by LasLabs Inc.
|
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.
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
# -*- coding: utf-8 -*-
|
# -*- coding: utf-8 -*-
|
||||||
# © 2016-TODAY LasLabs Inc.
|
# Copyright 2016-2017 LasLabs Inc.
|
||||||
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
|
# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
# -*- coding: utf-8 -*-
|
|
||||||
# © 2016-TODAY LasLabs Inc.
|
|
||||||
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
|
|
||||||
|
|
||||||
{
|
|
||||||
"name": "Web Slick Widget",
|
|
||||||
"summary": "Adds SlickJS slider widget for use as a carousel on Many2one"
|
|
||||||
" attachment fields in backend form views.",
|
|
||||||
"version": "9.0.1.0.1",
|
|
||||||
"category": "Web",
|
|
||||||
"website": "https://laslabs.com/",
|
|
||||||
"author": "LasLabs",
|
|
||||||
"license": "AGPL-3",
|
|
||||||
"application": False,
|
|
||||||
"installable": True,
|
|
||||||
"depends": [
|
|
||||||
"web",
|
|
||||||
],
|
|
||||||
"data": [
|
|
||||||
'views/assets.xml',
|
|
||||||
],
|
|
||||||
'qweb': [
|
|
||||||
"static/src/xml/*.xml",
|
|
||||||
],
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 9.2 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 932 KiB After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,104 @@
|
||||||
|
/* Copyright 2013-2016 Ken Wheeler
|
||||||
|
* Version 1.7.1
|
||||||
|
* License MIT (https://opensource.org/licenses/MIT) */
|
||||||
|
|
||||||
|
/* Slider */
|
||||||
|
|
||||||
|
.slick-slider {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
-ms-touch-action: pan-y;
|
||||||
|
touch-action: pan-y;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
.slick-list {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dragging {
|
||||||
|
cursor: pointer;
|
||||||
|
cursor: hand;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.slick-slider .slick-track,
|
||||||
|
.slick-slider .slick-list {
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
-moz-transform: translate3d(0, 0, 0);
|
||||||
|
-ms-transform: translate3d(0, 0, 0);
|
||||||
|
-o-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-track {
|
||||||
|
position: relative;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-loading & {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.slick-slide {
|
||||||
|
float: left;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 1px;
|
||||||
|
[dir="rtl"] & {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
&.slick-loading img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&.dragging img {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-initialized & {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-loading & {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-vertical & {
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.slick-arrow.slick-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
/* Copyright (C) 2016-TODAY LasLabs, Inc. [https://laslabs.com]
|
|
||||||
* @author Dave Lasley <dave@laslabs.com>
|
|
||||||
* @license AGPL-3
|
|
||||||
**/
|
|
||||||
|
|
||||||
.slick-arrow{
|
|
||||||
background-color: #4c4c4c !important;
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,172 @@
|
||||||
|
/* Copyright 2016-2017 LasLabs Inc.
|
||||||
|
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html). */
|
||||||
|
|
||||||
|
odoo.define('web_widget_slick', function(require) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var core = require('web.core');
|
||||||
|
var AbstractManyField = require('web.form_relational').AbstractManyField;
|
||||||
|
|
||||||
|
var FieldSlickImages = AbstractManyField.extend({
|
||||||
|
|
||||||
|
widget_class: 'o_slick',
|
||||||
|
template: 'FieldSlickImages',
|
||||||
|
$slick: null,
|
||||||
|
no_rerender: true,
|
||||||
|
loading: [],
|
||||||
|
loaded: 0,
|
||||||
|
|
||||||
|
events: {
|
||||||
|
'mousedown img': function(ev) {
|
||||||
|
ev.preventDefault();
|
||||||
|
},
|
||||||
|
'touchstart img': function(ev) {
|
||||||
|
ev.preventDefault();
|
||||||
|
},
|
||||||
|
// Triggering a resize on the lazyLoaded event prevents the carousel
|
||||||
|
// from appearing empty when page loads
|
||||||
|
'lazyLoaded': function(ev) {
|
||||||
|
$(ev.target).trigger('resize');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
defaults: {
|
||||||
|
lazyLoad: 'ondemand',
|
||||||
|
fieldName: 'datas',
|
||||||
|
modelName: 'ir.attachment',
|
||||||
|
slidesToShow: 3,
|
||||||
|
slidesToScroll: 1,
|
||||||
|
swipeToSlide: true,
|
||||||
|
dots: true,
|
||||||
|
infinite: true,
|
||||||
|
speed: 500,
|
||||||
|
arrows: true,
|
||||||
|
responsive: [
|
||||||
|
{
|
||||||
|
breakpoint: 1024,
|
||||||
|
settings: {
|
||||||
|
slidesToShow: 2,
|
||||||
|
slidesToScroll: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: 600,
|
||||||
|
settings: {
|
||||||
|
slidesToShow: 1,
|
||||||
|
slidesToScroll: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// You can unslick at a given breakpoint now by adding:
|
||||||
|
// settings: "unslick"
|
||||||
|
// instead of a settings object
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
init: function(field_manager, node) {
|
||||||
|
this._super(field_manager, node);
|
||||||
|
this.options = _.defaults(this.options, this.defaults);
|
||||||
|
},
|
||||||
|
|
||||||
|
destroy_content: function() {
|
||||||
|
if (this.$slick) {
|
||||||
|
var $imgs = this.$el.find('img');
|
||||||
|
// 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() {
|
||||||
|
this._super();
|
||||||
|
this.destroy_content();
|
||||||
|
|
||||||
|
this.$el.parent('td').addClass('o_slick_cell');
|
||||||
|
this.$slick = $('<div class="slick-container"></div>');
|
||||||
|
if (this.options.arrows) {
|
||||||
|
this.$slick.addClass('slick-arrowed');
|
||||||
|
}
|
||||||
|
this.$el.append(this.$slick);
|
||||||
|
|
||||||
|
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);
|
||||||
|
core.bus.on('resize', this, this._resizeCarousel);
|
||||||
|
},
|
||||||
|
|
||||||
|
_resizeCarousel: function () {
|
||||||
|
var maxWidth = this._resizeMaxWidth();
|
||||||
|
var containerWidth = maxWidth;
|
||||||
|
|
||||||
|
var $parentCell = this.$el.parent('td');
|
||||||
|
if ($parentCell.length) {
|
||||||
|
var scaledWidth = this._resizeScaledWidth($parentCell, maxWidth);
|
||||||
|
var labelWidth = this._resizeLabelWidth($parentCell);
|
||||||
|
containerWidth = scaledWidth - labelWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
var marginWidth = this._resizeMarginWidth(this.$slick);
|
||||||
|
var carouselWidth = containerWidth - marginWidth;
|
||||||
|
|
||||||
|
// Set outerWidth of carousel, with minimum size. Minimum size can cause
|
||||||
|
// overflow in some cases but prevents displaying with zero width
|
||||||
|
this.$slick.outerWidth(Math.max(carouselWidth, 150));
|
||||||
|
},
|
||||||
|
|
||||||
|
_resizeLabelWidth: function ($parentCell) {
|
||||||
|
// If the widget has a label, subtract label cell's width, plus the extra
|
||||||
|
// padding applied to the parent cell, from container width
|
||||||
|
var $labelCell = $parentCell.prev('.o_td_label');
|
||||||
|
if ($labelCell.length) {
|
||||||
|
var parentPadding = $parentCell.outerWidth() - $parentCell.width();
|
||||||
|
return $labelCell.outerWidth() + parentPadding;
|
||||||
|
}
|
||||||
|
|
||||||
|
return 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
_resizeMarginWidth: function ($element) {
|
||||||
|
// Subtract container's margins so outerWidth can be set properly
|
||||||
|
return $element.outerWidth(true) - $element.outerWidth();
|
||||||
|
},
|
||||||
|
|
||||||
|
_resizeMaxWidth: function () {
|
||||||
|
// Determine the maximum possible width the widget container can occupy
|
||||||
|
var parentSelectors = ['.o_form_sheet', '.o_form_nosheet'];
|
||||||
|
var containerWidth = parentSelectors.map(function (selector) {
|
||||||
|
return this.$el.closest(selector).width();
|
||||||
|
}, this).filter(function (width) {
|
||||||
|
return width !== null;
|
||||||
|
})[0];
|
||||||
|
|
||||||
|
return containerWidth;
|
||||||
|
},
|
||||||
|
|
||||||
|
_resizeScaledWidth: function ($parentCell, maxWidth) {
|
||||||
|
// If the widget is inside a group tag, scale carousel size based on
|
||||||
|
// intended % width of parent cell
|
||||||
|
return maxWidth * parseInt($parentCell[0].style.width, 10) / 100;
|
||||||
|
},
|
||||||
|
|
||||||
|
_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);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
core.form_widget_registry.add("one2many_slick_images", FieldSlickImages);
|
||||||
|
|
||||||
|
return {FieldSlickImages: FieldSlickImages};
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -1,114 +0,0 @@
|
||||||
/* © 2016-TODAY LasLabs Inc.
|
|
||||||
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
|
|
||||||
*/
|
|
||||||
|
|
||||||
odoo.define('web_widget_slick.slick_widget', function(require){
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
var core = require('web.core');
|
|
||||||
var AbstractManyField = require('web.form_relational').AbstractManyField;
|
|
||||||
|
|
||||||
var QWeb = core.qweb;
|
|
||||||
var _t = core._t;
|
|
||||||
|
|
||||||
var FieldSlickImages = AbstractManyField.extend({
|
|
||||||
|
|
||||||
className: 'o_slick',
|
|
||||||
template: 'FieldSlickImages',
|
|
||||||
$slick: null,
|
|
||||||
no_rerender: true,
|
|
||||||
loading: [],
|
|
||||||
loaded: 0,
|
|
||||||
|
|
||||||
defaults: {
|
|
||||||
lazyLoad: 'ondemand',
|
|
||||||
fieldName: 'datas',
|
|
||||||
modelName: 'ir.attachment',
|
|
||||||
slidesToShow: 3,
|
|
||||||
slidesToScroll: 1,
|
|
||||||
dots: true,
|
|
||||||
infinite: true,
|
|
||||||
speed: 500,
|
|
||||||
arrows: true,
|
|
||||||
responsive: [
|
|
||||||
{
|
|
||||||
breakpoint: 1024,
|
|
||||||
settings: {
|
|
||||||
slidesToShow: 3,
|
|
||||||
slidesToScroll: 3,
|
|
||||||
infinite: true,
|
|
||||||
dots: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
breakpoint: 600,
|
|
||||||
settings: {
|
|
||||||
slidesToShow: 2,
|
|
||||||
slidesToScroll: 2
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
breakpoint: 480,
|
|
||||||
settings: {
|
|
||||||
slidesToShow: 1,
|
|
||||||
slidesToScroll: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// You can unslick at a given breakpoint now by adding:
|
|
||||||
// settings: "unslick"
|
|
||||||
// instead of a settings object
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
init: function(field_manager, node) {
|
|
||||||
this._super(field_manager, node);
|
|
||||||
this.options = _.defaults(this.options, this.defaults);
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy_content: function() {
|
|
||||||
var self = this;
|
|
||||||
if (this.$slick) {
|
|
||||||
console.log('Destroying SlickJS');
|
|
||||||
var $imgs = this.$el.find('img');
|
|
||||||
$imgs.each(function(idx, val){
|
|
||||||
console.log('Removing ' + $imgs[idx]);
|
|
||||||
self.$slick.slick('slickRemove', $imgs[idx]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
render_value: function() {
|
|
||||||
var self = this;
|
|
||||||
this._super();
|
|
||||||
console.log('Rerendering SlickJS');
|
|
||||||
this.destroy_content();
|
|
||||||
|
|
||||||
var baseUrl = '/web/image/' + this.options.modelName;
|
|
||||||
|
|
||||||
this.$slick = $('<div class="slick-container"></div>');
|
|
||||||
this.$el.append(this.$slick);
|
|
||||||
this.$slick.slick(this.options);
|
|
||||||
|
|
||||||
self.loading.push.apply(self.get('value'));
|
|
||||||
|
|
||||||
_.each(self.get('value'), function(id){
|
|
||||||
var $img = $('<img></img>');
|
|
||||||
var $div = $('<div></div>');
|
|
||||||
$div.append($img);
|
|
||||||
$img.attr('data-lazy', baseUrl + '/' + id + '/' + self.options.fieldName);
|
|
||||||
self.$el.append($div);
|
|
||||||
self.$slick.slick('slickAdd', $div);
|
|
||||||
self.$slick.slick('slickGoTo', 0);
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
core.form_widget_registry.add("one2many_slick_images", FieldSlickImages);
|
|
||||||
|
|
||||||
return {
|
|
||||||
FieldSlickImages: FieldSlickImages,
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
/* Copyright 2016-2017 LasLabs Inc.
|
||||||
|
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html). */
|
||||||
|
|
||||||
|
@slick-arrow-margin: 40px;
|
||||||
|
@slick-arrow-offset: calc(-(@slick-arrow-margin - 5px));
|
||||||
|
@slick-font-family: "FontAwesome";
|
||||||
|
@slick-dot-character: "\f10c";
|
||||||
|
@slick-dot-character-active: "\f111";
|
||||||
|
@slick-dot-color: @odoo-brand-primary;
|
||||||
|
@slick-dot-offset: 35px;
|
||||||
|
@slick-dot-size: 12px;
|
||||||
|
@slick-next-character: "\f054";
|
||||||
|
@slick-prev-character: "\f053";
|
||||||
|
@slick-opacity-default: 1;
|
||||||
|
@slick-opacity-not-active: 0.5;
|
||||||
|
|
||||||
|
/* Odoo field */
|
||||||
|
|
||||||
|
.o_slick {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container */
|
||||||
|
|
||||||
|
.slick-container {
|
||||||
|
&.slick-dotted {
|
||||||
|
margin-bottom: @slick-dot-offset;
|
||||||
|
}
|
||||||
|
&.slick-arrowed {
|
||||||
|
margin-left: @slick-arrow-margin;
|
||||||
|
margin-right: @slick-arrow-margin;
|
||||||
|
.slick-prev {
|
||||||
|
left: @slick-arrow-offset;
|
||||||
|
}
|
||||||
|
.slick-next {
|
||||||
|
right: @slick-arrow-offset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Images */
|
||||||
|
|
||||||
|
.slick-slide {
|
||||||
|
margin-left: 2px;
|
||||||
|
margin-right: 2px;
|
||||||
|
outline: none;
|
||||||
|
img {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Arrows */
|
||||||
|
|
||||||
|
.slick-arrow {
|
||||||
|
height: 35px;
|
||||||
|
width: 30px;
|
||||||
|
font-size: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
.btn();
|
||||||
|
.btn-sm();
|
||||||
|
.btn-primary();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dots */
|
||||||
|
|
||||||
|
.slick-dots {
|
||||||
|
bottom: calc(-(@slick-dot-offset));
|
||||||
|
li {
|
||||||
|
&.slick-active button:before {
|
||||||
|
content: @slick-dot-character-active;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
© 2016-TODAY LasLabs Inc.
|
|
||||||
@license AGPL-3 or later (http://www.gnu.org/licenses/agpl.html).
|
|
||||||
-->
|
|
||||||
|
|
||||||
<templates id="field_templates" xml:space="preserve">
|
|
||||||
<t t-name="FieldSlickImages">
|
|
||||||
<span t-att-style="widget.node.attrs.style">
|
|
||||||
<t t-if="!widget.get('effective_readonly')">
|
|
||||||
|
|
||||||
</t>
|
|
||||||
</span>
|
|
||||||
</t>
|
|
||||||
</templates>
|
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Copyright 2016-2017 LasLabs Inc.
|
||||||
|
License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html). -->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<t t-name="FieldSlickImages">
|
||||||
|
<div t-attf-class="o_form_field {{ widget.widget_class }}"></div>
|
||||||
|
</t>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,225 @@
|
||||||
|
/* 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) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
function appendWidget (core, formCommon, $fix) {
|
||||||
|
var fieldManager = new formCommon.DefaultFieldManager(null, {});
|
||||||
|
var node = {'attrs': {}};
|
||||||
|
var FieldSlickImages = core.form_widget_registry.get('one2many_slick_images');
|
||||||
|
var widget = new FieldSlickImages(fieldManager, node);
|
||||||
|
widget.appendTo($fix);
|
||||||
|
return widget;
|
||||||
|
}
|
||||||
|
|
||||||
|
function imageUrl (modelName, fieldName, id) {
|
||||||
|
return '/web/image/' + modelName + '/' + id + '/' + fieldName;
|
||||||
|
}
|
||||||
|
|
||||||
|
test('It should add a slick widget',
|
||||||
|
function(assert, core, formCommon) {
|
||||||
|
var $fix = $('#qunit-fixture');
|
||||||
|
var widget = appendWidget(core, formCommon, $fix);
|
||||||
|
|
||||||
|
var slickContainerCount = $fix.find('.slick-container').length;
|
||||||
|
assert.strictEqual(slickContainerCount, 1);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
test('.init() should add defaults to options',
|
||||||
|
function(assert, core, formCommon) {
|
||||||
|
var $fix = $('#qunit-fixture');
|
||||||
|
var fieldManager = new formCommon.DefaultFieldManager(null, {});
|
||||||
|
var node = {'attrs': {}};
|
||||||
|
var FieldSlickImages = core.form_widget_registry.get('one2many_slick_images');
|
||||||
|
var widget = new FieldSlickImages(fieldManager, node);
|
||||||
|
widget.appendTo($fix);
|
||||||
|
|
||||||
|
widget.defaults.testing = 'tested';
|
||||||
|
widget.init(fieldManager, node);
|
||||||
|
assert.strictEqual(widget.options.testing, 'tested');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
test('.destroy_content() should remove images',
|
||||||
|
function(assert, core, formCommon) {
|
||||||
|
var $fix = $('#qunit-fixture');
|
||||||
|
var widget = appendWidget(core, formCommon, $fix);
|
||||||
|
|
||||||
|
var $slickImage = $('<div><img></div>');
|
||||||
|
widget.$slick.slick('slickAdd', $slickImage);
|
||||||
|
widget.destroy_content();
|
||||||
|
|
||||||
|
var slickImageCount = widget.$slick.find('img').length;
|
||||||
|
assert.strictEqual(slickImageCount, 0);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
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');
|
||||||
|
var widget = appendWidget(core, formCommon, $fix);
|
||||||
|
|
||||||
|
var fieldValues = [1, 2];
|
||||||
|
widget.set({'value': fieldValues});
|
||||||
|
widget.render_value();
|
||||||
|
|
||||||
|
var slickImages = widget.$slick.find('img');
|
||||||
|
var slickImageUrls = slickImages.map(function() {
|
||||||
|
return $(this).data('lazy');
|
||||||
|
}).get();
|
||||||
|
|
||||||
|
var modelName = widget.options.modelName;
|
||||||
|
var fieldName = widget.options.fieldName;
|
||||||
|
var expectedUrls = fieldValues.map(function(id) {
|
||||||
|
return '/web/image/' + modelName + '/' + id + '/' + fieldName;
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.deepEqual(slickImageUrls, expectedUrls);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
test('._resizeCarousel() should resize the widget',
|
||||||
|
function (assert, core, formCommon) {
|
||||||
|
var $fix = $('#qunit-fixture');
|
||||||
|
var $nosheet = $('<div class="o_form_nosheet"></div>');
|
||||||
|
$fix.append($nosheet);
|
||||||
|
|
||||||
|
var widget = appendWidget(core, formCommon, $nosheet);
|
||||||
|
var setWidth = 50;
|
||||||
|
widget.$slick.outerWidth(setWidth);
|
||||||
|
|
||||||
|
widget._resizeCarousel();
|
||||||
|
|
||||||
|
assert.notStrictEqual(widget.$slick.outerWidth(), setWidth);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
test('._resizeCarousel() should be called when container is resized',
|
||||||
|
function (assert, core, formCommon) {
|
||||||
|
var $fix = $('#qunit-fixture');
|
||||||
|
var $nosheet = $('<div class="o_form_nosheet"></div>');
|
||||||
|
$fix.append($nosheet);
|
||||||
|
|
||||||
|
var widget = appendWidget(core, formCommon, $nosheet);
|
||||||
|
var setWidth = 50;
|
||||||
|
widget.$slick.outerWidth(setWidth);
|
||||||
|
|
||||||
|
core.bus.trigger('resize');
|
||||||
|
|
||||||
|
assert.notStrictEqual(widget.$slick.outerWidth(), setWidth);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
test('._resizeLabelWidth() should return the width of the preceding ' +
|
||||||
|
'sibling label cell if it exists',
|
||||||
|
function (assert, core, formCommon) {
|
||||||
|
var $fix = $('#qunit-fixture');
|
||||||
|
var widget = appendWidget(core, formCommon, $fix);
|
||||||
|
|
||||||
|
var width = 100;
|
||||||
|
var $cell = $('<td style="width:10px;"></td>');
|
||||||
|
var $labelCell = $('<td class="o_td_label"></td>');
|
||||||
|
$labelCell.outerWidth(width);
|
||||||
|
|
||||||
|
widget.$slick.append($labelCell);
|
||||||
|
widget.$slick.append($cell);
|
||||||
|
|
||||||
|
assert.strictEqual(widget._resizeLabelWidth($cell), width);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
test('._resizeLabelWidth() should return 0 if the previous sibling cell ' +
|
||||||
|
' of the provided element is not a label cell',
|
||||||
|
function (assert, core, formCommon) {
|
||||||
|
var $fix = $('#qunit-fixture');
|
||||||
|
var widget = appendWidget(core, formCommon, $fix);
|
||||||
|
|
||||||
|
var width = '100px';
|
||||||
|
var $cell = $('<td></td>');
|
||||||
|
widget.$slick.append($('<td style="width:' + width + ';"></td>'));
|
||||||
|
widget.$slick.append($cell);
|
||||||
|
|
||||||
|
assert.strictEqual(widget._resizeLabelWidth($cell), 0);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
test('._resizeMarginWidth() should return the total left and right ' +
|
||||||
|
' margins of the provided element',
|
||||||
|
function (assert, core, formCommon) {
|
||||||
|
var $fix = $('#qunit-fixture');
|
||||||
|
var widget = appendWidget(core, formCommon, $fix);
|
||||||
|
|
||||||
|
var elementStyle = 'margin-left: 12px; margin-right: 7px;';
|
||||||
|
var marginTotal = 19;
|
||||||
|
var $element = $('<div style="' + elementStyle + '"></div>');
|
||||||
|
widget.$slick.append($element);
|
||||||
|
|
||||||
|
assert.strictEqual(widget._resizeMarginWidth($element), marginTotal);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
test('._resizeMaxWidth() should return the width of the closest sheet element',
|
||||||
|
function (assert, core, formCommon) {
|
||||||
|
var $fix = $('#qunit-fixture');
|
||||||
|
var $sheet1 = $('<div class="o_form_sheet"></div>');
|
||||||
|
var $sheet2 = $('<div class="o_form_sheet"></div>');
|
||||||
|
var expectedWidth = 266;
|
||||||
|
|
||||||
|
$sheet1.width(700);
|
||||||
|
$sheet2.width(expectedWidth);
|
||||||
|
$sheet1.append($sheet2);
|
||||||
|
$fix.append($sheet1);
|
||||||
|
|
||||||
|
var widget = appendWidget(core, formCommon, $sheet2);
|
||||||
|
|
||||||
|
assert.strictEqual(widget._resizeMaxWidth(), expectedWidth);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
test('._resizeMaxWidth() should return the width of the closest nosheet element',
|
||||||
|
function (assert, core, formCommon) {
|
||||||
|
var $fix = $('#qunit-fixture');
|
||||||
|
var $nosheet1 = $('<div class="o_form_nosheet"></div>');
|
||||||
|
var $nosheet2 = $('<div class="o_form_nosheet"></div>');
|
||||||
|
var expectedWidth = 266;
|
||||||
|
|
||||||
|
$nosheet1.width(700);
|
||||||
|
$nosheet2.width(expectedWidth);
|
||||||
|
$nosheet1.append($nosheet2);
|
||||||
|
$fix.append($nosheet1);
|
||||||
|
|
||||||
|
var widget = appendWidget(core, formCommon, $nosheet2);
|
||||||
|
|
||||||
|
assert.strictEqual(widget._resizeMaxWidth(), expectedWidth);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
test('._resizeScaledWidth() should return the provided integer, scaled' +
|
||||||
|
'to the % width in the provided element style attribute',
|
||||||
|
function (assert, core, formCommon) {
|
||||||
|
var $fix = $('#qunit-fixture');
|
||||||
|
var widget = appendWidget(core, formCommon, $fix);
|
||||||
|
|
||||||
|
var givenWidth = 100;
|
||||||
|
var widthPercent = 54;
|
||||||
|
var expectedWidth = widthPercent;
|
||||||
|
var $cell = $('<td style="width:' + widthPercent + '%;"></td>');
|
||||||
|
|
||||||
|
assert.strictEqual(widget._resizeScaledWidth($cell, givenWidth), expectedWidth);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Copyright 2016-2017 LasLabs Inc.
|
||||||
|
License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
|
||||||
|
|
||||||
|
<odoo>
|
||||||
|
<template id="assets_slick" inherit_id="web.assets_backend">
|
||||||
|
<xpath expr="//script[last()]" position="after">
|
||||||
|
<link rel="stylesheet"
|
||||||
|
type="text/less"
|
||||||
|
href="/web_widget_slick/static/lib/slick/slick.less"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet"
|
||||||
|
type="text/less"
|
||||||
|
href="/web_widget_slick/static/lib/slick/slick-theme.less"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet"
|
||||||
|
type="text/less"
|
||||||
|
href="/web_widget_slick/static/src/less/slick.less"
|
||||||
|
/>
|
||||||
|
<script type="application/javascript"
|
||||||
|
src="/web_widget_slick/static/lib/slick/slick.js"
|
||||||
|
/>
|
||||||
|
<script type="application/javascript"
|
||||||
|
src="/web_widget_slick/static/src/js/web_widget_slick.js"
|
||||||
|
/>
|
||||||
|
</xpath>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template id="qunit_suite" inherit_id="web.qunit_suite">
|
||||||
|
<xpath expr="//t[@t-set='head']" position="inside">
|
||||||
|
<script type="application/javascript"
|
||||||
|
src="/web_widget_slick/static/tests/js/web_widget_slick.js"
|
||||||
|
/>
|
||||||
|
</xpath>
|
||||||
|
</template>
|
||||||
|
</odoo>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
# -*- coding: utf-8 -*-
|
||||||
|
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
|
||||||
|
|
||||||
|
from . import test_ui
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
# -*- coding: utf-8 -*-
|
||||||
|
# Copyright 2017 LasLabs Inc.
|
||||||
|
# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
|
||||||
|
|
||||||
|
from odoo.tests.common import HttpCase
|
||||||
|
|
||||||
|
|
||||||
|
class UICase(HttpCase):
|
||||||
|
|
||||||
|
post_install = True
|
||||||
|
at_install = False
|
||||||
|
|
||||||
|
def test_ui_web(self):
|
||||||
|
"""Test backend tests."""
|
||||||
|
self.phantom_js(
|
||||||
|
"/web/tests?debug=assets&module=web_widget_slick",
|
||||||
|
"",
|
||||||
|
login="admin",
|
||||||
|
)
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
© 2016-TODAY LasLabs Inc.
|
|
||||||
@license AGPL-3 or later (http://www.gnu.org/licenses/agpl.html).
|
|
||||||
-->
|
|
||||||
|
|
||||||
<odoo>
|
|
||||||
<template id="assets_slick" name="web_widget_slick Assets" inherit_id="web.assets_backend">
|
|
||||||
<xpath expr="//script[last()]" position="after">
|
|
||||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet" type="text/css" />
|
|
||||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet" type="text/css" />
|
|
||||||
<link href="/web_widget_slick/static/src/css/slick.css" rel="stylesheet" type="text/css" />
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js" />
|
|
||||||
<script src="/web_widget_slick/static/src/js/widget_slick.js" />
|
|
||||||
</xpath>
|
|
||||||
</template>
|
|
||||||
</odoo>
|
|
||||||
Loading…
Reference in New Issue