Use ooui for edit action buttons (#32)

This PR converts the original basic preview edit actions buttons to MediaWiki's ooui to better match the style of the edit page.

Reviewed-on: #32

extension.json

@@ -47,6 +47,18 @@
             "packageFiles": [
                 "glmv-upl.js"
             ]
+        },
+        "ext.glmv.prev": {
+			"dependencies": [
+				"oojs-ui-core",
+				"oojs-ui-toolbars",
+                "oojs-ui.styles.icons-interactions",
+                "oojs-ui.styles.icons-media",
+                "oojs-ui.styles.icons-location"
+			],
+            "packageFiles": [
+                "glmv-prev.js"
+            ]
         }
     }
 }

includes/GlModelHooks.php

@@ -44,11 +44,15 @@ class GlModelHooks {
     public static function onBeforePageDisplay($out) {
         preg_match('/(<model-viewer src="\S*?\.(glb|gltf"))/',$out->getHTML(),$findGltf);
         if ($findGltf[0]) {
-            $mvScriptAttr = array(
+            $out->addHeadItems(
+                Html::rawElement(
+                    'script',
+                    array(
                         'src' => 'https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js',
                         'type' => 'module'
+                    )
+                )
             );
-            $out->addHeadItems(Html::rawElement('script',$mvScriptAttr));
             $out->addModules('ext.glmv');
         }
     }
@@ -72,45 +76,12 @@ class GlModelHooks {
         }
 
         $out = $editor->getContext()->getOutput();
-        $out->addModules('ext.glmv');
+        $out->addModules('ext.glmv.prev');
 
         $mvTransform = $file->transform([ 'width' => '800', 'hight' => '600', 'view' => 'test']);
         $previewViewer = $mvTransform->toHtml([ 'preview' => true]);
 
-        $addButtonAttr = array(
+        $previewHTML = Html::rawElement('div',NULL,$previewViewer);
-            'class' => 'preview-button AddHotspot',
-            'onclick' => 'readyAddHotspot()'
-        );
-
-        $readButtonAttr = array(
-            'class' => 'preview-button ReadHotspots',
-            'onclick' => 'readMetadata()'
-        );
-
-        $delButtonAttr = array(
-            'class' => 'preview-button DeleteHotspots',
-            'onclick' => 'readyDelHotspot()'
-        );
-
-        $dldButtonAttr = array(
-            'class' => 'preview-button MakeImage',
-            'onclick' => 'downloadImage("' . $title . '")'
-        );
-
-        $orbButtonAttr = array(
-            'class' => 'preview-button SetOrbit',
-            'onclick' => 'writeCameraOrbit()'
-        );
-
-        $addHsButton = array(
-            Html::rawElement('button',$addButtonAttr,'Add a new hotspot'),
-            Html::rawElement('button',$readButtonAttr,'Update hotspots'),
-            Html::rawElement('button',$delButtonAttr,'Delete hotspot'),
-            Html::rawElement('button',$dldButtonAttr,'Download image'),
-            Html::rawElement('button',$orbButtonAttr,'Set start view')
-        );
-
-        $previewHTML = Html::rawElement('div',NULL,$previewViewer.implode($addHsButton));
         return false;
     }
 

modules/glmv-prev.js

@@ -0,0 +1,68 @@
+const addHS = new OO.ui.ButtonWidget({
+	icon: 'mapPinAdd',
+	label: 'Add annotation',
+	invisibleLabel: true,
+    class: 'edit-button'
+})
+addHS.on('click', readyAddHotspot)
+addHS.setDisabled(true)
+console.log(addHS)
+
+const updateHS = new OO.ui.ButtonWidget({
+	icon: 'reload',
+	label: 'Update annotations',
+	invisibleLabel: true
+})
+updateHS.on('click', readMetadata)
+updateHS.setDisabled(true)
+
+const deleteHS = new OO.ui.ButtonWidget({
+	icon: 'cancel',
+	label: 'Delete annotation',
+	invisibleLabel: true
+})
+deleteHS.on('click', readyDelHotspot)
+deleteHS.setDisabled(true)
+
+const hotspotButtons = new OO.ui.ButtonGroupWidget( {
+    items: [ addHS, updateHS, deleteHS ]
+} );
+console.log(hotspotButtons)
+
+const downloadViewerImage = new OO.ui.ButtonWidget({
+	icon: 'imageAdd',
+	label: 'Download current image',
+	invisibleLabel: true
+})
+downloadViewerImage.on('click', () => {
+    downloadImage("TempTitle.glb")
+})
+downloadViewerImage.setDisabled(true)
+
+const setView = new OO.ui.ButtonWidget({
+	icon: 'camera',
+	label: 'Set Initial View',
+	invisibleLabel: true
+})
+setView.on('click', writeCameraOrbit)
+setView.setDisabled(true)
+
+const cameraButtons = new OO.ui.ButtonGroupWidget( {
+    items: [ downloadViewerImage, setView ]
+} );
+
+const modelMenu = new OO.ui.HorizontalLayout( {
+    items: [
+      hotspotButtons,
+      cameraButtons
+    ],
+    id: 'edit-model-menu'
+});
+
+$('#wikiPreview').after(modelMenu.$element);
+
+enableMenu = function() {
+    modelMenu.items.forEach(group => {
+        group.items.forEach(el => el.setDisabled(false))
+    });
+}

modules/glmv.js

@@ -8,6 +8,7 @@ let deleteHotspot = null
  */
 modelLoaded = function() {
     $('.awaiting-model').css('display', 'flex').removeClass('awaiting-model')
+    enableMenu()
 }
 
 /**