first commit

lib/pkp/js/classes/VueRegistry.js

@@ -0,0 +1,62 @@
+/**
+ * @file js/classes/VueRegistry.js
+ *
+ * Copyright (c) 2014-2021 Simon Fraser University
+ * Copyright (c) 2000-2021 John Willinsky
+ * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
+ *
+ * @class VueRegistry
+ * @ingroup js_classes
+ *
+ * @brief Registry and initialization class for Vue.js handlers
+ */
+export default {
+	/**
+	 * Registry of all active vue instances
+	 */
+	_instances: {},
+
+	/**
+	 * Initialize a Vue controller
+	 *
+	 * This method is often called directly from a <script> tag in a template
+	 * file to spin up a Vue controller on-demand. This allows the Vue component
+	 * lifecycle to be compatible with the legacy JS framework.
+	 *
+	 * @param string id Element ID to attach this controller to
+	 * @param string type The type of controller to initialize
+	 * @param object The data object to pass to the controller. Can include
+	 *  configuration parameters, translatable strings and initial data.
+	 */
+	init: function (id, type, data) {
+		if (pkp.controllers[type] === undefined) {
+			return;
+		}
+
+		var baseData = {};
+		if (typeof pkp.controllers[type].data === 'function') {
+			baseData = pkp.controllers[type].data();
+		}
+
+		var args = $.extend(true, {}, pkp.controllers[type], {
+			el: '#' + id,
+			data: $.extend(true, {}, baseData, data, {id: id}),
+		});
+
+		pkp.registry._instances[id] = new pkp.Vue(args);
+
+		pkp.eventBus.$emit('root:mounted', id, pkp.registry._instances[id]);
+
+		// Register with a parent handler from the legacy JS framework, so that
+		// those componments can destroy a Vue instance when removing HTML code
+		var $parents = $(pkp.registry._instances[id].$el).parents();
+		$parents.each(function (i) {
+			if ($.pkp.classes.Handler.hasHandler($($parents[i]))) {
+				$.pkp.classes.Handler.getHandler($($parents[i])).handlerChildren_.push(
+					pkp.registry._instances[id]
+				);
+				return false; // only attach to the closest parent handler
+			}
+		});
+	},
+};