From 0b73853636792e32c1f1de1b712f2957e8426231 Mon Sep 17 00:00:00 2001
From: Stefan Wanzenried <stefan.wanzenried@gmail.com>
Date: Wed, 6 Feb 2019 15:02:23 +0100
Subject: [PATCH] Fix google preview not truncating title and description on
 page load

---
 CHANGELOG.md                                      | 11 +++++++++--
 FieldtypeSeoMaestro.module.php                    |  2 +-
 InputfieldSeoMaestro.info.json                    |  2 +-
 InputfieldSeoMaestro.js                           |  2 +-
 SeoMaestro.info.json                              |  2 +-
 .../js/components/InputfieldGooglePreview.js      | 15 ++++++++++-----
 resources/package.json                            |  2 +-
 7 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 874c5f1..c1b85dd 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/FieldtypeSeoMaestro.module.php b/FieldtypeSeoMaestro.module.php
index cb48173..95ac1ed 100644
--- a/FieldtypeSeoMaestro.module.php
+++ b/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' => [
diff --git a/InputfieldSeoMaestro.info.json b/InputfieldSeoMaestro.info.json
index b662977..dbc60a2 100644
--- a/InputfieldSeoMaestro.info.json
+++ b/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": "",
diff --git a/InputfieldSeoMaestro.js b/InputfieldSeoMaestro.js
index 9d8bb2b..7b921ad 100644
--- a/InputfieldSeoMaestro.js
+++ b/InputfieldSeoMaestro.js
@@ -1,7 +1,7 @@
 parcelRequire=function(e,r,n,t){var i="function"==typeof parcelRequire&&parcelRequire,o="function"==typeof require&&require;function u(n,t){if(!r[n]){if(!e[n]){var f="function"==typeof parcelRequire&&parcelRequire;if(!t&&f)return f(n,!0);if(i)return i(n,!0);if(o&&"string"==typeof n)return o(n);var c=new Error("Cannot find module '"+n+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[n][1][r]||r},p.cache={};var l=r[n]=new u.Module(n);e[n][0].call(l.exports,p,l,l.exports,this)}return r[n].exports;function p(e){return u(p.resolve(e))}}u.isParcelRequire=!0,u.Module=function(e){this.id=e,this.bundle=u,this.exports={}},u.modules=e,u.cache=r,u.parent=i,u.register=function(r,n){e[r]=[function(e,r){r.exports=n},{}]};for(var f=0;f<n.length;f++)u(n[f]);if(n.length){var c=u(n[n.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=c:"function"==typeof define&&define.amd?define(function(){return c}):t&&(this[t]=c)}return u}({"T2Xs":[function(require,module,exports) {
 
 },{}],"44Yw":[function(require,module,exports) {
-"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function n(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var i=function(){function e(n,i){t(this,e),this.$inputTitle=document.querySelector('[name="'.concat(i,'_meta_title"]')),this.$inputTitleInherit=document.querySelector('[name="'.concat(i,'_meta_title_inherit"]')),this.$title=n.querySelector("[data-title]"),this.$inputDesc=document.querySelector('[name="'.concat(i,'_meta_description"]')),this.$desc=n.querySelector("[data-desc]"),this.$inputDescInherit=document.querySelector('[name="'.concat(i,'_meta_description_inherit"]')),this.maxLengths={title:60,desc:160}}return n(e,[{key:"init",value:function(){return this.initEventListeners()}},{key:"initEventListeners",value:function(){var t=this;return this.$inputTitle.addEventListener("keyup",function(){t.$title.innerHTML=t.truncateString(t.$inputTitle.value,t.maxLengths.title)}),this.$inputDesc.addEventListener("keyup",function(){t.$desc.innerHTML=t.truncateString(t.$inputDesc.value,t.maxLengths.desc)}),this.$inputTitleInherit.addEventListener("change",function(){var e=t.maxLengths.title;t.$inputTitleInherit.checked?t.$title.innerHTML=t.truncateString(t.$title.dataset.title,e):t.$inputTitle.value&&(t.$title.innerHTML=t.truncateString(t.$inputTitle.value,e))}),this.$inputDescInherit.addEventListener("change",function(){var e=t.maxLengths.desc;t.$inputDescInherit.checked?t.$desc.innerHTML=t.truncateString(t.$desc.dataset.desc,e):t.$inputDesc.value&&(t.$desc.innerHTML=t.truncateString(t.$inputDesc.value,e))}),this}},{key:"truncateString",value:function(t,e){if(t.length<e)return t;var n=t.substring(0,e);return n?"".concat(n,"..."):""}}]),e}();exports.default=i;
+"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function n(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var i=function(){function e(n,i){t(this,e),this.$inputTitle=document.querySelector('[name="'.concat(i,'_meta_title"]')),this.$inputTitleInherit=document.querySelector('[name="'.concat(i,'_meta_title_inherit"]')),this.$title=n.querySelector("[data-title]"),this.$inputDesc=document.querySelector('[name="'.concat(i,'_meta_description"]')),this.$desc=n.querySelector("[data-desc]"),this.$inputDescInherit=document.querySelector('[name="'.concat(i,'_meta_description_inherit"]')),this.maxLengths={title:60,desc:160}}return n(e,[{key:"init",value:function(){return this.$title.innerHTML=this.truncateString(this.$title.innerHTML,this.maxLengths.title),this.$desc.innerHTML=this.truncateString(this.$desc.innerHTML,this.maxLengths.desc),this.initEventListeners()}},{key:"initEventListeners",value:function(){var t=this;return["keyup","blur"].forEach(function(e){t.$inputTitle.addEventListener(e,function(){t.$title.innerHTML=t.truncateString(t.$inputTitle.value,t.maxLengths.title)}),t.$inputDesc.addEventListener(e,function(){t.$desc.innerHTML=t.truncateString(t.$inputDesc.value,t.maxLengths.desc)})}),this.$inputTitleInherit.addEventListener("change",function(){var e=t.maxLengths.title;t.$inputTitleInherit.checked?t.$title.innerHTML=t.truncateString(t.$title.dataset.title,e):t.$inputTitle.value&&(t.$title.innerHTML=t.truncateString(t.$inputTitle.value,e))}),this.$inputDescInherit.addEventListener("change",function(){var e=t.maxLengths.desc;t.$inputDescInherit.checked?t.$desc.innerHTML=t.truncateString(t.$desc.dataset.desc,e):t.$inputDesc.value&&(t.$desc.innerHTML=t.truncateString(t.$inputDesc.value,e))}),this}},{key:"truncateString",value:function(t,e){if(t.length<e)return t;var n=t.substring(0,e);return n?"".concat(n,"..."):""}}]),e}();exports.default=i;
 },{}],"Focm":[function(require,module,exports) {
 "use strict";require("../scss/styles.scss");var e=t(require("./components/InputfieldGooglePreview"));function t(e){return e&&e.__esModule?e:{default:e}}document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll("[data-seomaestro-googlepreview]").forEach(function(t){new e.default(t,t.dataset.seomaestroGooglepreview).init()}),document.querySelectorAll("[data-seomaestro-metadata-inherit]").forEach(function(e){e.addEventListener("change",function(t){if(!t.target.checked){var o=e.dataset.seomaestroMetadataInherit,a=document.querySelector('input[name="'.concat(o,'"], textarea[name="').concat(o,'"]'));a&&a.focus()}})})});
 },{"../scss/styles.scss":"T2Xs","./components/InputfieldGooglePreview":"44Yw"}]},{},["Focm"], null)
diff --git a/SeoMaestro.info.json b/SeoMaestro.info.json
index b052b7a..dd6b127 100644
--- a/SeoMaestro.info.json
+++ b/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": "",
diff --git a/resources/js/components/InputfieldGooglePreview.js b/resources/js/components/InputfieldGooglePreview.js
index 2cd8766..522c80b 100644
--- a/resources/js/components/InputfieldGooglePreview.js
+++ b/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', () => {
diff --git a/resources/package.json b/resources/package.json
index 810eaa1..aee4064 100644
--- a/resources/package.json
+++ b/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": {},