2.2.3 Auto Focus & Change Watcher Fix

Author: jcohlmeyer

meta.yaml

@@ -1,5 +1,5 @@
 name: VideoEmbed
-version: 2.2.2
+version: 2.2.3
 description: A field type for embedding YouTube and Vimeo Videos
 url: https://github.com/jrc9designstudio/statamic-video-embed
 developer: JRC9 Design Studio

readme.md

@@ -1,6 +1,6 @@
 # Video Embed for Statamic 2
 *Requirement:* Statamic v2.6.x, curl
-*Version:* 2.2.2
+*Version:* 2.2.3
 
 ### What is this?
 Add YouTube and Vimeo videos to Statamic with a Video Embed field.
@@ -120,6 +120,7 @@ If you really want a simple tag that does it all for you, you can create your ow
   - `portrait_cinema` 9:21
 
 ### Version Log
+- 2.2.3 Auto Focus & Change Watcher Fix
 - 2.2.2 Add Replicator Preview Text
 - 2.2.1 Fix for Statamic 2.6
 - 2.2.0 Added support for duration from YouTube thanks to @JayVerb for your work on this & ajax abort (for slow requests)

resources/assets/js/fieldtype.js

@@ -1,13 +1,16 @@
+/* global Vue, $, Fieldtype, translate */
+
 Vue.component('video_embed-fieldtype', {
-    props: ['data', 'config', 'name'],
+    mixins: [Fieldtype],
 
     data: function() {
         return {
             loading: true,
             fail: false,
             previous_url: '',
             youTubeKeySet: this.data.key.length > 0,
-            ajax: undefined
+            ajax: undefined,
+            autoBindChangeWatcher: false // Disable the automagic binding
         }
     },
 
@@ -106,13 +109,20 @@ Vue.component('video_embed-fieldtype', {
     },
 
     methods: {
-        getReplicatorPreviewText() {
+        getReplicatorPreviewText: function() {
             return this.title;
         },
+        focus: function() {
+           this.$els.videoUrlField.focus();
+        },
         getData: function () {
             // We are now loading ...
             this.loading = this.urlChanged ? true : false;
 
+            if (this.urlChanged) {
+                this.bindChangeWatcher(); // Bind the change watcher
+            }
+
             $.ajaxSetup({
               cache: false,
               contentType: 'application/json; charset=utf-8',
@@ -250,6 +260,6 @@ Vue.component('video_embed-fieldtype', {
                 '</div>' +
             '</div>' +
       '</div>' +
-      '<input type="text" class="form-control" v-model="data.url" v-on:blur="getData" v-on:keyup="getData" v-on:input="getData" />' +
+      '<input type="text" class="form-control" v-model="data.url" v-on:blur="getData" v-on:keyup="getData" v-on:input="getData" v-el:video-url-field />' +
     ''
 });