ken120-mvc-vuejs-media-selection-editor.js

ken120-mvc-vuejs-media-selection-editor.js

(function() {
  "use strict";

  let appRoot = undefined;

  window.kentico.pageBuilder.registerInlineEditor("media-selection-editor", {
    init: function(options) {
      const editor = options.editor;

      appRoot = new Vue({
        el: `#${editor.attributes["data-id"].value}`,
        data: {
          hostUrl: editor.attributes["data-host-url"].value,
          selectedMediaUrl: editor.attributes["data-current-media"].value,
          propertyName: options.propertyName
        },
        methods: {
          onDispatch: function (media) {
            const widgetEvent = new CustomEvent("updateProperty", {
              detail: {
                name: this.propertyName,
                value: media.fileGUID,
                refreshMarkup: false
              }
            });

            editor.dispatchEvent(widgetEvent);

            this.selectedMediaUrl = media.permanentUrl;
          }
        }
      });
    },

    destroy: function() {
      if (appRoot) {
        appRoot.$destroy();
      }
    }
  });
})();