Add mvconfig tag

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

extension.json

@@ -19,7 +19,8 @@
         "MimeMagicImproveFromExtension": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onMimeMagicImproveFromExtension",
         "BeforePageDisplay": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onBeforePageDisplay",
         "AlternateEditPreview": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onAlternateEditPreview",
-        "UploadForm:BeforeProcessing": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onUploadFormBeforeProcessing"
+        "UploadForm:BeforeProcessing": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onUploadFormBeforeProcessing",
+        "ParserFirstCallInit": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onParserFirstCallInit"
     },
 	"ExtensionMessagesFiles": {
 		"GlModelHandlerMagic": "GlModelHandler.i18n.magic.php"

includes/GlModelHooks.php

@@ -34,6 +34,28 @@ class GlModelHooks {
         }
     }
 
+    /**
+     * MWHook: Called when the parser initializes for the first time
+     * 
+     * @param Parser $parser: Parser object being initialized
+     */
+    static function onParserFirstCallInit( $parser ) {
+        $parser->setHook('mvconfig', array( __CLASS__, 'renderConfigTag'));
+    }
+
+    /**
+     * Render the config json in a <pre> tag
+     * 
+     * @param $input The text inside the custom tag
+     * @param array $args Any attributes given in the tag
+     * @param Parser $parser The parser object
+     * @param PPFrame $frame The parent frame calling the parser
+     * @return string HTML string of output
+     */
+    static function renderConfigTag( $input, array $args, $parser, $frame ) {
+		return '<pre mvconfig>' . $input . '</pre>';
+	}
+
     /**
      * MWHook: Load the js and css modules if model-viewer element is found in the html output
      * 
@@ -110,7 +132,7 @@ class GlModelHooks {
     public static function onUploadFormBeforeProcessing( $uploadFormObj ) {
         $uploadFormObj->mComment .= <<<CONF
         
-        <pre>
+        <mvconfig>
         {
         "viewerConfig": {
             "default": {
@@ -120,7 +142,7 @@ class GlModelHooks {
         "annotations": {},
         "annotationSets": {}
         }
-        </pre>
+        </mvconfig>
         CONF;
 
         return true;

includes/GlModelTransformOutput.php

@@ -47,9 +47,10 @@ class GlModelTransformOutput extends MediaTransformOutput {
 	 */
 	public function toHtml($options = []) {
         $descriptText = $this->file->getDescriptionText();
+        preg_match('/<pre mvconfig.*?>([\S\s]*?)<\/pre>/',$descriptText,$modelDescript);   
+        $metadata = json_decode($modelDescript[1], true);
+
         if ($this->thumb) {
-            preg_match('/<pre>([\S\s]*?)<\/pre>/',$descriptText,$modelDescript);
-            $metadata = json_decode($modelDescript[1], true);
             $poster = $metadata['viewerConfig'][$this->view]['poster'] ?? false;
 
             if ($poster) {
@@ -78,7 +79,7 @@ class GlModelTransformOutput extends MediaTransformOutput {
             $this->parameters['preview'] = $options['preview'];
         }
 
-        return self::buildViewer($descriptText,$this->url,$this->parameters);
+        return self::buildViewer($metadata,$this->url,$this->parameters);
 	}
 
     /**
@@ -88,15 +89,13 @@ class GlModelTransformOutput extends MediaTransformOutput {
      * and produces the html string for the model-viewer and all relevant child 
      * elements.
      * 
-     * @param string $inText The metadata text which must include a json formatted string inside a pre tag
+     * @param string $metadata The metadata object parsed from the text
      * @param string $srcUrl The full url pointing to the model file
      * @param array $frameParams The additional user defined parameters for the viewer such as hotspot and view classes
      * @return string Html string of the complete model-viewer element inside a div container
      */
-    private function buildViewer($inText, $srcUrl, $viewParams) {
+    private function buildViewer($metadata, $srcUrl, $viewParams) {
         //Gather basic data
-        preg_match('/<pre>([\S\s]*?)<\/pre>/',$inText,$modelDescript);
-        $metadata = json_decode($modelDescript[1], true);
         $hsSet = (isset($metadata['annotationSets']) && isset($metadata['annotationSets'][$this->hsset])) ? $this->hsset : 'default';
         $view = (isset($metadata['viewerConfig']) && isset($metadata['viewerConfig'][$this->view])) ? $this->view : 'default';
 

modules/glmv.js

@@ -94,7 +94,7 @@ writeMetadata = function () {
     if (Object.keys(annotationsObj).length === 0) return false
     const [currentText, metadata] = extractMetadata()
     metadata.annotations = annotationsObj
-    const newText = currentText.replace(/(.*?<pre>)[\S\s]*?(<\/pre>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
+    const newText = currentText.replace(/(.*?<mvconfig>)[\S\s]*?(<\/mvconfig>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
     $('#wpTextbox1').val(newText)
     return true
 }
@@ -106,7 +106,7 @@ writeMetadata = function () {
  */
 extractMetadata = function() {
     const editText = $('#wpTextbox1').val()
-    const extractMetadata = editText.match(/<pre>([\S\s]*?)<\/pre>/)
+    const extractMetadata = editText.match(/<mvconfig>([\S\s]*?)<\/mvconfig>/)
     let metadata = (extractMetadata.length >= 2) ? JSON.parse(extractMetadata[1]) : {viewerConfig: {}, annotations: {}, annotationSets: {}}
     if (metadata.annotations === undefined) {
         metadata.annotations = {}
@@ -146,7 +146,7 @@ clickAddHotspot = function(e) {
         let targetObj = targetModel.getCameraTarget()
         hsOutput['data-target'] = `${targetObj.x.toFixed(5)}m ${targetObj.y.toFixed(5)}m ${targetObj.z.toFixed(5)}m`
         metadata.annotations['Hotspot ' + (Object.keys(metadata.annotations).length + 1)] = hsOutput
-        let newText = currentText.replace(/(.*?<pre>)[\S\s]*?(<\/pre>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
+        let newText = currentText.replace(/(.*?<mvconfig>)[\S\s]*?(<\/mvconfig>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
         $('#wpTextbox1').val(newText)
     }
     readMetadata()
@@ -376,7 +376,7 @@ releaseAnnotation = function(e) {
             "data-orbit": newOrb,
             "data-target": newTarg
         }
-        const newText = currentText.replace(/(.*?<pre>)[\S\s]*?(<\/pre>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
+        const newText = currentText.replace(/(.*?<mvconfig>)[\S\s]*?(<\/mvconfig>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
         $('#wpTextbox1').val(newText)
     }
     grabHotspot = null
@@ -481,7 +481,7 @@ limitCameraOrbit = function(axis, limit) {
     oldOrbitVals[valueIndex] = newOrbitVals[valueIndex]
     metadata.viewerConfig.default[`${limit}-camera-orbit`] = oldOrbitVals.join(' ')
     mView.setAttribute(`${limit}-camera-orbit`, oldOrbitVals.join(' '))
-    const newText = currentText.replace(/(.*?<pre>)[\S\s]*?(<\/pre>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
+    const newText = currentText.replace(/(.*?<mvconfig>)[\S\s]*?(<\/mvconfig>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
     $('#wpTextbox1').val(newText)
 }