mirror of https://github.com/OCA/web.git
[ADD] web_widget_slickroom: Create module
* Extend web_widget_slick widget to open web_widget_darkroom modal and update selected carousel image on close * Override _slickRender method from web_widget_slick to add data attribute w/ record id * Change cursor to pointer on slickroom images * Disable features in read-only mode * Keep default cursor * Prevent modal from opening * Add tests [IMP] web_widget_slickroom: Make requested changes * Use jquery .data instead of .attr for image record IDs * Add explicit img selector when finding images by record ID * Remove svg version of iconpull/853/head
Brenton Hughes
Jairo Llopis
parent
9298796eef
commit
6cbd754f51
|
|
@ -0,0 +1,94 @@
|
|||
.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg
|
||||
:target: http://www.gnu.org/licenses/agpl
|
||||
:alt: License: AGPL-3
|
||||
|
||||
===================================================
|
||||
Slick Carousel Widget with DarkroomJS Image Editing
|
||||
===================================================
|
||||
|
||||
This module extends the `Slick`_ carousel widget provided by
|
||||
`web_widget_slick` to include the `DarkroomJS`_ image editing features provided
|
||||
by `web_widget_darkroom`.
|
||||
|
||||
.. _Slick: http://kenwheeler.github.io/slick
|
||||
.. _DarkroomJS: https://github.com/MattKetmo/darkroomjs
|
||||
|
||||
Usage
|
||||
=====
|
||||
|
||||
To create a Slick carousel widget with DarkroomJS support, follow the
|
||||
usage instructions in the `web_widget_slick` documentation, but replace
|
||||
"one2many_slick_images" with "slickroom" in the field definition, as shown
|
||||
here::
|
||||
|
||||
<field name="image_ids" widget="slickroom" options="{}"/>
|
||||
|
||||
To edit an image in a carousel, simply click the Edit button in the form view,
|
||||
then click on the image you wish to edit to open a DarkroomJS modal. Edit the
|
||||
image as desired according to the `web_widget_darkroom` documentation, and
|
||||
click Save to save the changes and update the carousel.
|
||||
|
||||
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.
|
||||
* The standard Slick carousel widget (from `web_widget_slick`) is displayed on
|
||||
top, followed by the slickroom widget with DarkroomJS support. Click the Edit
|
||||
button in the form view to try out the DarkroomJS features.
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
------------
|
||||
|
||||
* Brent Hughes <brent.hughes@laslabs.com>
|
||||
|
||||
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.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# -*- coding: utf-8 -*-
|
||||
# Copyright 2017 LasLabs Inc.
|
||||
# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
# -*- coding: utf-8 -*-
|
||||
# Copyright 2017 LasLabs Inc.
|
||||
# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
|
||||
|
||||
{
|
||||
"name": "Slick Carousel Widget with DarkroomJS Image Editing",
|
||||
"summary": "Provides Slick Carousel Widget with DarkroomJS image editing",
|
||||
"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_widget_darkroom",
|
||||
"web_widget_slick",
|
||||
],
|
||||
"data": [
|
||||
"templates/assets.xml",
|
||||
],
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
|
|
@ -0,0 +1,67 @@
|
|||
/* Copyright 2017 LasLabs Inc.
|
||||
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html). */
|
||||
|
||||
odoo.define('web_widget_slickroom', function (require) {
|
||||
"use strict";
|
||||
|
||||
var core = require('web.core');
|
||||
var FieldSlickImages = require('web_widget_slick').FieldSlickImages;
|
||||
|
||||
var FieldSlickroomImages = FieldSlickImages.extend({
|
||||
|
||||
widget_class: FieldSlickImages.prototype.widget_class + ' o_slickroom',
|
||||
events: _.extend({}, FieldSlickImages.prototype.events, {
|
||||
'click img': '_openModal'
|
||||
}),
|
||||
|
||||
_openModal: function (ev) {
|
||||
if (this.get("effective_readonly")) {
|
||||
return;
|
||||
}
|
||||
|
||||
var recordId = $(ev.target).data('record-id');
|
||||
var modalAction = {
|
||||
type: 'ir.actions.act_window',
|
||||
res_model: 'darkroom.modal',
|
||||
name: 'Darkroom',
|
||||
views: [[false, 'form']],
|
||||
target: 'new',
|
||||
context: {
|
||||
active_field: this.options.fieldName,
|
||||
active_model: this.options.modelName,
|
||||
active_record_id: recordId
|
||||
}
|
||||
};
|
||||
|
||||
this.do_action(modalAction, {
|
||||
on_close: $.proxy(this._updateImage, this, recordId)
|
||||
});
|
||||
},
|
||||
|
||||
_slickRender: function(baseUrl, id) {
|
||||
this._super(baseUrl, id);
|
||||
this.$slick.find('img:last').data('record-id', id);
|
||||
},
|
||||
|
||||
_updateImage: function (recordId) {
|
||||
// SlickJS creates 'clones', so multiple elements need updated src
|
||||
var $imgs = this.$slick.find('img').filter(function () {
|
||||
return $(this).data('record-id') === recordId;
|
||||
});
|
||||
var $loaded = $imgs.filter('[src]');
|
||||
var $notLoaded = $imgs.filter('[data-lazy]');
|
||||
|
||||
var imgUrl = $loaded.first().attr('src');
|
||||
var imgUrlNew = imgUrl + "?unique=" + new Date().getTime();
|
||||
|
||||
$loaded.attr('src', imgUrlNew);
|
||||
$notLoaded.attr('data-lazy', imgUrlNew);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
core.form_widget_registry.add("slickroom", FieldSlickroomImages);
|
||||
|
||||
return {FieldSlickroomImages: FieldSlickroomImages};
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* Copyright 2017 LasLabs Inc.
|
||||
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html). */
|
||||
|
||||
.o_form_editable .o_slickroom img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
/* Copyright 2017 LasLabs Inc.
|
||||
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html). */
|
||||
|
||||
odoo.define_section('web_widget_slickroom', ['web.core', 'web.form_common'], function (test) {
|
||||
"use strict";
|
||||
|
||||
function appendWidget (core, formCommon, $fix) {
|
||||
var fieldManager = new formCommon.DefaultFieldManager(null, {});
|
||||
var node = {'attrs': {}};
|
||||
var FieldSlickroomImages = core.form_widget_registry.get('slickroom');
|
||||
var widget = new FieldSlickroomImages(fieldManager, node);
|
||||
widget.appendTo($fix);
|
||||
return widget;
|
||||
}
|
||||
|
||||
function imgHTML (id, attr) {
|
||||
return $(
|
||||
'<div><img data-record-id="' +id + '" ' + attr +
|
||||
'="/web/image/ir.attachment/' + id + '/datas"></div>'
|
||||
);
|
||||
}
|
||||
|
||||
test('._openModal() should open a darkroom modal with provided options',
|
||||
function (assert, core, formCommon) {
|
||||
var $fix = $('#qunit-fixture');
|
||||
var widget = appendWidget(core, formCommon, $fix);
|
||||
var recordId = 1;
|
||||
widget.$slick.slick('slickAdd', imgHTML(recordId, 'src'));
|
||||
|
||||
var modalAction = {};
|
||||
widget.do_action = function (action, options) {
|
||||
modalAction = action;
|
||||
};
|
||||
|
||||
var expectedAction = {
|
||||
"type": "ir.actions.act_window",
|
||||
"res_model": "darkroom.modal",
|
||||
"name": "Darkroom",
|
||||
"views": [[false, "form"]],
|
||||
"target": "new",
|
||||
"context": {
|
||||
"active_field": widget.options.fieldName,
|
||||
"active_model": widget.options.modelName,
|
||||
"active_record_id": recordId
|
||||
}
|
||||
};
|
||||
|
||||
widget.$('img').click();
|
||||
|
||||
assert.deepEqual(modalAction, expectedAction);
|
||||
}
|
||||
);
|
||||
|
||||
test('._openModal() should open a darkroom modal with on_close action ' +
|
||||
'that calls ._updateImage()',
|
||||
function (assert, core, formCommon) {
|
||||
var $fix = $('#qunit-fixture');
|
||||
var widget = appendWidget(core, formCommon, $fix);
|
||||
var recordId = 1;
|
||||
widget.$slick.slick('slickAdd', imgHTML(recordId, 'src'));
|
||||
|
||||
var modalOptions = {};
|
||||
widget.do_action = function (action, options) {
|
||||
modalOptions = options;
|
||||
};
|
||||
|
||||
var $img = widget.$('img');
|
||||
$img.click();
|
||||
modalOptions.on_close();
|
||||
|
||||
assert.notStrictEqual($img.attr('src').indexOf('?unique'), -1);
|
||||
}
|
||||
);
|
||||
|
||||
test('._slickRender() should add data-record-id to images',
|
||||
function (assert, core, formCommon) {
|
||||
var $fix = $('#qunit-fixture');
|
||||
var widget = appendWidget(core, formCommon, $fix);
|
||||
|
||||
var values = [1, 2, 3];
|
||||
|
||||
_.each(values, function(recordId) {
|
||||
widget._slickRender('/web/image/ir.attachments/', recordId);
|
||||
});
|
||||
|
||||
var slickImageIds = widget.$slick.find('img').map(function () {
|
||||
return $(this).data('record-id');
|
||||
}).get();
|
||||
|
||||
assert.deepEqual(slickImageIds, values);
|
||||
}
|
||||
);
|
||||
|
||||
test('._updateImage() should update source of matching/loaded slick images',
|
||||
function (assert, core, formCommon) {
|
||||
var $fix = $('#qunit-fixture');
|
||||
var widget = appendWidget(core, formCommon, $fix);
|
||||
var imgId = 1;
|
||||
|
||||
for(var i = 0; i < 5; i++) {
|
||||
widget.$slick.slick('slickAdd', imgHTML(imgId, 'src'));
|
||||
}
|
||||
|
||||
widget._updateImage(imgId);
|
||||
|
||||
var $matches = widget.$slick.find(
|
||||
'[data-record-id="' + imgId + '"]'
|
||||
);
|
||||
$matches.each(function () {
|
||||
var newSrc = $(this).attr('src');
|
||||
assert.notStrictEqual(newSrc.indexOf('?unique'), -1);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
test('._updateImage() should update lazy data attribute of matching/unloaded slick images',
|
||||
function (assert, core, formCommon) {
|
||||
var $fix = $('#qunit-fixture');
|
||||
var widget = appendWidget(core, formCommon, $fix);
|
||||
var imgId = 1;
|
||||
|
||||
for(var i = 0; i < 5; i++) {
|
||||
widget.$slick.slick('slickAdd', imgHTML(imgId, 'data-lazy'));
|
||||
}
|
||||
|
||||
widget._updateImage(1);
|
||||
|
||||
var $matches = widget.$slick.find(
|
||||
'[data-record-id="' + imgId + '"]'
|
||||
);
|
||||
$matches.each(function () {
|
||||
var newSrc = $(this).attr('data-lazy');
|
||||
assert.notStrictEqual(newSrc.indexOf('?unique'), -1);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
test('._updateImage() should not update source of non-matching/loaded slick images',
|
||||
function (assert, core, formCommon) {
|
||||
var $fix = $('#qunit-fixture');
|
||||
var widget = appendWidget(core, formCommon, $fix);
|
||||
var imgId = 1;
|
||||
var img2Id = 2;
|
||||
|
||||
widget.$slick.slick('slickAdd', imgHTML(imgId, 'src'));
|
||||
widget.$slick.slick('slickAdd', imgHTML(img2Id, 'src'));
|
||||
|
||||
widget._updateImage(1);
|
||||
|
||||
var $notMatch = widget.$slick.find(
|
||||
'[data-record-id="' + img2Id + '"]'
|
||||
);
|
||||
assert.strictEqual($notMatch.attr('src').indexOf('?unique'), -1);
|
||||
}
|
||||
);
|
||||
|
||||
test('._updateImage() should not update lazy data attribute of ' +
|
||||
'non-matching/unloaded slick images',
|
||||
function (assert, core, formCommon) {
|
||||
var $fix = $('#qunit-fixture');
|
||||
var widget = appendWidget(core, formCommon, $fix);
|
||||
var imgId = 1;
|
||||
var img2Id = 2;
|
||||
|
||||
widget.$slick.slick('slickAdd', imgHTML(imgId, 'data-lazy'));
|
||||
widget.$slick.slick('slickAdd', imgHTML(img2Id, 'data-lazy'));
|
||||
|
||||
widget._updateImage(1);
|
||||
|
||||
var $notMatch = widget.$slick.find(
|
||||
'[data-record-id="' + img2Id + '"]'
|
||||
);
|
||||
assert.strictEqual(
|
||||
$notMatch.attr('data-lazy').indexOf('?unique'), -1
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Copyright 2017 LasLabs Inc.
|
||||
License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
|
||||
|
||||
<odoo>
|
||||
<template id="assets_slickroom" inherit_id="web.assets_backend">
|
||||
<xpath expr="//script[last()]" position="after">
|
||||
<link rel="stylesheet"
|
||||
type="text/less"
|
||||
href="/web_widget_slickroom/static/src/less/web_widget_slickroom.less"
|
||||
/>
|
||||
<script type="application/javascript"
|
||||
src="/web_widget_slickroom/static/src/js/web_widget_slickroom.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_slickroom/static/tests/js/web_widget_slickroom.js"
|
||||
/>
|
||||
</xpath>
|
||||
</template>
|
||||
</odoo>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# -*- coding: utf-8 -*-
|
||||
# Copyright 2017 LasLabs Inc.
|
||||
# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
|
||||
|
||||
from . import test_ui
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
# -*- coding: utf-8 -*-
|
||||
# Copyright 2017 LasLabs Inc.
|
||||
# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
|
||||
|
||||
from odoo.tests.common import HttpCase
|
||||
|
||||
|
||||
class UICase(HttpCase):
|
||||
def test_ui_web(self):
|
||||
"""Test backend tests."""
|
||||
self.phantom_js(
|
||||
"/web/tests?debug=assets&module=web_widget_slickroom",
|
||||
"",
|
||||
login="admin",
|
||||
)
|
||||
Loading…
Reference in New Issue