From afcff069f84e908a455d6fd228593bf3de89c556 Mon Sep 17 00:00:00 2001 From: Tom Blauwendraat Date: Mon, 25 Oct 2021 15:58:41 +0000 Subject: [PATCH 01/12] [ADD] website_prevent_cls --- website_prevent_cls/README.rst | 0 website_prevent_cls/__init__.py | 3 + website_prevent_cls/__manifest__.py | 14 +++++ website_prevent_cls/models/__init__.py | 3 + website_prevent_cls/models/ir_qweb_fields.py | 47 +++++++++++++++ website_prevent_cls/readme/CONTRIBUTORS.rst | 2 + website_prevent_cls/readme/DESCRIPTION.rst | 7 +++ website_prevent_cls/readme/ROADMAP.rst | 1 + website_prevent_cls/readme/USAGE.rst | 5 ++ .../static/src/js/alt_dialog.js | 27 +++++++++ .../static/src/js/widget_media.js | 22 +++++++ .../static/src/xml/alt_dialog.xml | 59 +++++++++++++++++++ website_prevent_cls/templates/assets.xml | 19 ++++++ 13 files changed, 209 insertions(+) create mode 100644 website_prevent_cls/README.rst create mode 100644 website_prevent_cls/__init__.py create mode 100644 website_prevent_cls/__manifest__.py create mode 100644 website_prevent_cls/models/__init__.py create mode 100644 website_prevent_cls/models/ir_qweb_fields.py create mode 100644 website_prevent_cls/readme/CONTRIBUTORS.rst create mode 100644 website_prevent_cls/readme/DESCRIPTION.rst create mode 100644 website_prevent_cls/readme/ROADMAP.rst create mode 100644 website_prevent_cls/readme/USAGE.rst create mode 100644 website_prevent_cls/static/src/js/alt_dialog.js create mode 100644 website_prevent_cls/static/src/js/widget_media.js create mode 100644 website_prevent_cls/static/src/xml/alt_dialog.xml create mode 100644 website_prevent_cls/templates/assets.xml diff --git a/website_prevent_cls/README.rst b/website_prevent_cls/README.rst new file mode 100644 index 0000000000..e69de29bb2 diff --git a/website_prevent_cls/__init__.py b/website_prevent_cls/__init__.py new file mode 100644 index 0000000000..31660d6a96 --- /dev/null +++ b/website_prevent_cls/__init__.py @@ -0,0 +1,3 @@ +# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). + +from . import models diff --git a/website_prevent_cls/__manifest__.py b/website_prevent_cls/__manifest__.py new file mode 100644 index 0000000000..ff2b917536 --- /dev/null +++ b/website_prevent_cls/__manifest__.py @@ -0,0 +1,14 @@ +# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). + +{ + "name": "Website Prevent Cumulative Layout Shift (CLS)", + "version": "13.0.1.0.0", + "author": "Sunflower IT,Odoo Community Association (OCA)", + "license": "AGPL-3", + "category": "Website", + "summary": "Website Prevent Cumulative Layout Shift (CLS) to improve " + "Pagespeed score", + "depends": ["website"], + "data": ["templates/assets.xml"], + "installable": True, +} diff --git a/website_prevent_cls/models/__init__.py b/website_prevent_cls/models/__init__.py new file mode 100644 index 0000000000..015b539cd6 --- /dev/null +++ b/website_prevent_cls/models/__init__.py @@ -0,0 +1,3 @@ +# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). + +from . import ir_qweb_fields diff --git a/website_prevent_cls/models/ir_qweb_fields.py b/website_prevent_cls/models/ir_qweb_fields.py new file mode 100644 index 0000000000..dcfeb67fc0 --- /dev/null +++ b/website_prevent_cls/models/ir_qweb_fields.py @@ -0,0 +1,47 @@ +# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). + +from odoo import api, models +from odoo.tools import ormcache +from odoo.tools.image import base64_to_image + + +class IrQweb(models.AbstractModel): + _inherit = "ir.qweb" + + def _post_processing_att(self, tagName, atts, options): + atts = super(IrQweb, self)._post_processing_att(tagName, atts, options) + + width = options.get("explicit_image_width") + height = options.get("explicit_image_height") + if width and height: + atts["width"] = width + atts["height"] = height + return atts + + +class Image(models.AbstractModel): + _inherit = "ir.qweb.field.image" + + @ormcache("base64_signature") + @api.model + def _get_image_size(self, record, field_name, base64_signature): + base64_source = record[field_name] + image = base64_to_image(base64_source) + width, height = image.size + return width, height + + @api.model + def record_to_html(self, record, field_name, options): + base64_signature = record[field_name][:256] + # don't process empty source or SVG + if not base64_signature or base64_signature[:1] in (b"P", "P"): + return super(Image, self).record_to_html(record, field_name, options) + + width, height = self._get_image_size(record, field_name, base64_signature) + + template_options = options.get("template_options", {}).copy() + template_options["explicit_image_width"] = width + template_options["explicit_image_height"] = height + options["template_options"] = template_options + + return super(Image, self).record_to_html(record, field_name, options) diff --git a/website_prevent_cls/readme/CONTRIBUTORS.rst b/website_prevent_cls/readme/CONTRIBUTORS.rst new file mode 100644 index 0000000000..cb606ac20f --- /dev/null +++ b/website_prevent_cls/readme/CONTRIBUTORS.rst @@ -0,0 +1,2 @@ +* Dan Kiplangat +* Tom Blauwendraat diff --git a/website_prevent_cls/readme/DESCRIPTION.rst b/website_prevent_cls/readme/DESCRIPTION.rst new file mode 100644 index 0000000000..1540dea3e3 --- /dev/null +++ b/website_prevent_cls/readme/DESCRIPTION.rst @@ -0,0 +1,7 @@ +This module can improve the Google PageSpeed score of individual website pages. + +In particular, it improves the score for Cumulative Layout Shift(CLS) by adding +the width and height to the images in the page. + +It also provides quick access to adjust the Width/height instead of using the +default optimize option when uploading an image. diff --git a/website_prevent_cls/readme/ROADMAP.rst b/website_prevent_cls/readme/ROADMAP.rst new file mode 100644 index 0000000000..d1e15083db --- /dev/null +++ b/website_prevent_cls/readme/ROADMAP.rst @@ -0,0 +1 @@ + * This does not add width/height for images that were already uploaded. These would either have to be reuploaded, or a migration script is needed. diff --git a/website_prevent_cls/readme/USAGE.rst b/website_prevent_cls/readme/USAGE.rst new file mode 100644 index 0000000000..357591325d --- /dev/null +++ b/website_prevent_cls/readme/USAGE.rst @@ -0,0 +1,5 @@ +To use this module: + + * By default, it will add the selected width/height when uploading a new image + * When editing the image, in the Description pop-up, there's a provision to + adjust the size. diff --git a/website_prevent_cls/static/src/js/alt_dialog.js b/website_prevent_cls/static/src/js/alt_dialog.js new file mode 100644 index 0000000000..e6687b56b2 --- /dev/null +++ b/website_prevent_cls/static/src/js/alt_dialog.js @@ -0,0 +1,27 @@ +odoo.define("website_prevent_cls.alt_dialog", function(require) { + "use strict"; + + var AltDialog = require("wysiwyg.widgets.AltDialog"); + + AltDialog.include({ + xmlDependencies: AltDialog.prototype.xmlDependencies.concat([ + "/website_prevent_cls/static/src/xml/alt_dialog.xml", + ]), + + init: function(parent, options, media) { + this._super.apply(this, arguments); + if (media.width && media.height) { + this.image_width = media.width; + this.image_height = media.height; + } + }, + + save: function() { + var newWidth = this.$("#image_width").val(); + var newHeight = this.$("#image_height").val(); + $(this.media).attr("width", newWidth); + $(this.media).attr("height", newHeight); + return this._super.apply(this, arguments); + }, + }); +}); diff --git a/website_prevent_cls/static/src/js/widget_media.js b/website_prevent_cls/static/src/js/widget_media.js new file mode 100644 index 0000000000..d2460b9e6d --- /dev/null +++ b/website_prevent_cls/static/src/js/widget_media.js @@ -0,0 +1,22 @@ +odoo.define("website_prevent_cls.widget_media", function(require) { + "use strict"; + + var FileWidget = require("wysiwyg.widgets.media").FileWidget; + + FileWidget.include({ + _save: function() { + var self = this; + var res = this._super.apply(this, arguments); + res.then(function() { + // Add the dimensions here + var $media = self.media; + var img = self.selectedAttachments[0]; + if (img.image_width && img.image_height) { + $media.width = img.image_width; + $media.height = img.image_height; + } + }); + return res; + }, + }); +}); diff --git a/website_prevent_cls/static/src/xml/alt_dialog.xml b/website_prevent_cls/static/src/xml/alt_dialog.xml new file mode 100644 index 0000000000..19afd6c3ea --- /dev/null +++ b/website_prevent_cls/static/src/xml/alt_dialog.xml @@ -0,0 +1,59 @@ + + +
+ +
+ +
+
+
+
+
Width
+
+ +
+
px
+
+
+
+
+ +
+
+
+
+
Height
+
+ +
+
px
+
+
+
+
+
+ + +
 diff --git a/website_prevent_cls/templates/assets.xml b/website_prevent_cls/templates/assets.xml new file mode 100644 index 0000000000..967bd9104e --- /dev/null +++ b/website_prevent_cls/templates/assets.xml @@ -0,0 +1,19 @@ + + +