Fix google preview not truncating title and description on page load

CHANGELOG.md

@@ -2,12 +2,18 @@
 
 ## [Unreleased]
 
+## [0.2.1] - 2019-02-06
+
+### Fixed
+
+* Fix Google preview not truncating title and description on initial page load 🤦‍️
+
 ## [0.2.0] - 2019-02-06
 
 ### Fixed
 
 * Fix rendering of the meta title tag
-* Fix encoding of meta data containing placeholders.
+* Fix encoding of meta data containing placeholders
 
 ### Added
 
@@ -27,7 +33,8 @@ allow installations via Composer.
 
 * Initial release of the module 🐣
 
-[Unreleased]: https://github.com/wanze/SeoMaestro/compare/v0.2.0...HEAD
+[Unreleased]: https://github.com/wanze/SeoMaestro/compare/v0.2.1...HEAD
+[0.2.1]: https://github.com/wanze/SeoMaestro/releases/tag/v0.2.1
 [0.2.0]: https://github.com/wanze/SeoMaestro/releases/tag/v0.2.0
 [0.1.1]: https://github.com/wanze/SeoMaestro/releases/tag/v0.1.1
 [0.1.0]: https://github.com/wanze/SeoMaestro/releases/tag/v0.1.0

FieldtypeSeoMaestro.module.php

@@ -15,7 +15,7 @@ public static function getModuleInfo()
         return [
             'title' => 'Seo Maestro',
             'summary' => 'A fieldtype storing various meta tags (meta, opengraph, twitter etc.) and sitemap behaviour for pages.',
-            'version' => '0.1.1',
+            'version' => '0.2.1',
             'author' => 'Stefan Wanzenried (Wanze)',
             'installs' => 'InputfieldSeoMaestro',
             'requires' => [

InputfieldSeoMaestro.info.json

@@ -1,6 +1,6 @@
 {
     "title": "Inputfield Seo Maestro",
-    "version": "0.1.1",
+    "version": "0.2.1",
     "summary": "Inputfield to accompany FieldtypeSeoMaestro, allows to manage metatags and sitemap settings for a page",
     "author": "Stefan Wanzenried (Wanze)",
     "href": "",

SeoMaestro.info.json

@@ -1,6 +1,6 @@
 {
     "title": "Seo Maestro",
-    "version": "0.1.1",
+    "version": "0.2.1",
     "summary": "Seo Maestro allows to easily manage your page's metatags and the XML sitemap.",
     "author": "Stefan Wanzenried (Wanze)",
     "href": "",

resources/js/components/InputfieldGooglePreview.js

@@ -15,16 +15,21 @@ export default class InputfieldGooglePreview {
     }
 
     init() {
+        this.$title.innerHTML = this.truncateString(this.$title.innerHTML, this.maxLengths.title);
+        this.$desc.innerHTML = this.truncateString(this.$desc.innerHTML, this.maxLengths.desc);
+
         return this.initEventListeners();
     }
 
     initEventListeners() {
-        this.$inputTitle.addEventListener('keyup', () => {
-            this.$title.innerHTML = this.truncateString(this.$inputTitle.value, this.maxLengths.title);
-        });
+        ['keyup', 'blur'].forEach((event) => {
+            this.$inputTitle.addEventListener(event, () => {
+                this.$title.innerHTML = this.truncateString(this.$inputTitle.value, this.maxLengths.title);
+            });
 
-        this.$inputDesc.addEventListener('keyup', () => {
-            this.$desc.innerHTML = this.truncateString(this.$inputDesc.value, this.maxLengths.desc);
+            this.$inputDesc.addEventListener(event, () => {
+                this.$desc.innerHTML = this.truncateString(this.$inputDesc.value, this.maxLengths.desc);
+            });
         });
 
         this.$inputTitleInherit.addEventListener('change', () => {

resources/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seomaestro",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Frontend for the SeoMaestro module.",
   "main": "js/index.js",
   "dependencies": {},