From 6cbd754f51ed2439c826d00e8fcc8b749ba413e9 Mon Sep 17 00:00:00 2001 From: Brenton Hughes Date: Wed, 16 Aug 2017 10:24:33 -0700 Subject: [PATCH] [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 icon --- web_widget_slickroom/README.rst | 94 +++++++++ web_widget_slickroom/__init__.py | 3 + web_widget_slickroom/__manifest__.py | 22 +++ .../static/description/icon.png | Bin 0 -> 9455 bytes .../static/src/js/web_widget_slickroom.js | 67 +++++++ .../static/src/less/web_widget_slickroom.less | 6 + .../static/tests/js/web_widget_slickroom.js | 179 ++++++++++++++++++ web_widget_slickroom/templates/assets.xml | 25 +++ web_widget_slickroom/tests/__init__.py | 5 + web_widget_slickroom/tests/test_ui.py | 15 ++ 10 files changed, 416 insertions(+) create mode 100644 web_widget_slickroom/README.rst create mode 100644 web_widget_slickroom/__init__.py create mode 100644 web_widget_slickroom/__manifest__.py create mode 100644 web_widget_slickroom/static/description/icon.png create mode 100644 web_widget_slickroom/static/src/js/web_widget_slickroom.js create mode 100644 web_widget_slickroom/static/src/less/web_widget_slickroom.less create mode 100644 web_widget_slickroom/static/tests/js/web_widget_slickroom.js create mode 100644 web_widget_slickroom/templates/assets.xml create mode 100644 web_widget_slickroom/tests/__init__.py create mode 100644 web_widget_slickroom/tests/test_ui.py diff --git a/web_widget_slickroom/README.rst b/web_widget_slickroom/README.rst new file mode 100644 index 00000000..9cb99875 --- /dev/null +++ b/web_widget_slickroom/README.rst @@ -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:: + + + +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 +`_. 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 +------------ + +* 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_slickroom/__init__.py b/web_widget_slickroom/__init__.py new file mode 100644 index 00000000..25e7ed3c --- /dev/null +++ b/web_widget_slickroom/__init__.py @@ -0,0 +1,3 @@ +# -*- coding: utf-8 -*- +# Copyright 2017 LasLabs Inc. +# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). diff --git a/web_widget_slickroom/__manifest__.py b/web_widget_slickroom/__manifest__.py new file mode 100644 index 00000000..1cc5b16e --- /dev/null +++ b/web_widget_slickroom/__manifest__.py @@ -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", + ], +} diff --git a/web_widget_slickroom/static/description/icon.png b/web_widget_slickroom/static/description/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..3a0328b516c4980e8e44cdb63fd945757ddd132d GIT binary patch literal 9455 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 z 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 Xviia!U7SGha1wx#SCgwmn*{w2TRX*I literal 0 HcmV?d00001 diff --git a/web_widget_slickroom/static/src/js/web_widget_slickroom.js b/web_widget_slickroom/static/src/js/web_widget_slickroom.js new file mode 100644 index 00000000..4ec6750e --- /dev/null +++ b/web_widget_slickroom/static/src/js/web_widget_slickroom.js @@ -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}; + +}); diff --git a/web_widget_slickroom/static/src/less/web_widget_slickroom.less b/web_widget_slickroom/static/src/less/web_widget_slickroom.less new file mode 100644 index 00000000..23aff24d --- /dev/null +++ b/web_widget_slickroom/static/src/less/web_widget_slickroom.less @@ -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; +} diff --git a/web_widget_slickroom/static/tests/js/web_widget_slickroom.js b/web_widget_slickroom/static/tests/js/web_widget_slickroom.js new file mode 100644 index 00000000..ee1bca1c --- /dev/null +++ b/web_widget_slickroom/static/tests/js/web_widget_slickroom.js @@ -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 $( + '
' + ); + } + + 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 + ); + } + ); + +}); diff --git a/web_widget_slickroom/templates/assets.xml b/web_widget_slickroom/templates/assets.xml new file mode 100644 index 00000000..a8608d69 --- /dev/null +++ b/web_widget_slickroom/templates/assets.xml @@ -0,0 +1,25 @@ + + + + +