Browse Source

[ADD] web_widget_slick: Create module

* Create SlickJS widget field
* Remove template test
* Move web_widget_slick assets to backend only, update ReadMe, bump version
* Remove highlighting in ReadMe
pull/706/head
Dave Lasley 9 years ago
parent
commit
ec343b6ec8
No known key found for this signature in database GPG Key ID: 7DDBA4BA81B934CF
  1. 72
      web_widget_slick/README.rst
  2. 3
      web_widget_slick/__init__.py
  3. 25
      web_widget_slick/__openerp__.py
  4. BIN
      web_widget_slick/static/description/icon.png
  5. 12745
      web_widget_slick/static/description/icon.svg
  6. 8
      web_widget_slick/static/src/css/slick.css
  7. 114
      web_widget_slick/static/src/js/widget_slick.js
  8. 16
      web_widget_slick/static/src/xml/field_templates.xml
  9. 18
      web_widget_slick/views/assets.xml

72
web_widget_slick/README.rst

@ -0,0 +1,72 @@
.. image:: https://img.shields.io/badge/license-AGPL--3-blue.svg
:target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
:alt: License: AGPL-3
=================
Odoo Slick Widget
=================
This module provides a Slick Carousel widget for use in Odoo.
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 use 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="{}"/>
Example implementation - https://repo.laslabs.com/projects/ODOO/repos/web/browse/web_widget_slick_example
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
Credits
=======
Images
------
* LasLabs: `Icon <https://repo.laslabs.com/projects/TEM/repos/odoo-module_template/browse/module_name/static/description/icon.svg?raw>`_.
Contributors
------------
* Dave Lasley <dave@laslabs.com>
Maintainer
----------
.. image:: https://laslabs.com/logo.png
:alt: LasLabs Inc.
:target: https://laslabs.com
This module is maintained by LasLabs Inc.

3
web_widget_slick/__init__.py

@ -0,0 +1,3 @@
# -*- coding: utf-8 -*-
# © 2016-TODAY LasLabs Inc.
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).

25
web_widget_slick/__openerp__.py

@ -0,0 +1,25 @@
# -*- 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",
],
}

BIN
web_widget_slick/static/description/icon.png

After

Width: 600  |  Height: 518  |  Size: 10 KiB

12745
web_widget_slick/static/description/icon.svg
File diff suppressed because it is too large
View File

8
web_widget_slick/static/src/css/slick.css

@ -0,0 +1,8 @@
/* Copyright (C) 2016-TODAY LasLabs, Inc. [https://laslabs.com]
* @author Dave Lasley <dave@laslabs.com>
* @license AGPL-3
**/
.slick-arrow{
background-color: #4c4c4c !important;
}

114
web_widget_slick/static/src/js/widget_slick.js

@ -0,0 +1,114 @@
/* © 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,
}
});

16
web_widget_slick/static/src/xml/field_templates.xml

@ -0,0 +1,16 @@
<?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>

18
web_widget_slick/views/assets.xml

@ -0,0 +1,18 @@
<?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…
Cancel
Save