docs(ol-*-control): move demos to separate pages

MelihAltintas · Sep 19, 2023 · 8b201f5 · 8b201f5
1 parent 8cad716
commit 8b201f5
Show file tree

Hide file tree

Showing 32 changed files with 562 additions and 267 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -385,6 +385,10 @@ export default defineConfig({
             text: "ol-toggle-control",
             link: "/componentsguide/mapcontrols/toggle/",
           },
+          {
+            text: "ol-videorecorder-control",
+            link: "/componentsguide/mapcontrols/videorecorder/",
+          },
           {
             text: "ol-zone-control",
             link: "/componentsguide/mapcontrols/zone/",

diff --git a/docs/componentsguide/mapcontrols/attribution/index.md b/docs/componentsguide/mapcontrols/attribution/index.md
@@ -11,8 +11,6 @@ import AttributionControlDemo from "@demos/AttributionControlDemo.vue"
 
 ## Usage
 
-Add context menu to map
-
 ::: code-group
 
 <<< ../../../../src/demos/AttributionControlDemo.vue

diff --git a/docs/componentsguide/mapcontrols/fullscreen/index.md b/docs/componentsguide/mapcontrols/fullscreen/index.md
@@ -2,9 +2,20 @@
 
 > A Fullscreen control for OpenLayers.
 
-## Demo
+<script setup>
+import FullscreenControlDemo from "@demos/FullscreenControlDemo.vue"
+</script>
+<ClientOnly>
+<FullscreenControlDemo />
+</ClientOnly>
 
-See [Demo page for all Map Controls](../index.md)
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/FullscreenControlDemo.vue
+
+:::
 
 ## Properties
 

diff --git a/docs/componentsguide/mapcontrols/index.md b/docs/componentsguide/mapcontrols/index.md
@@ -7,23 +7,8 @@ aside: false
 A control is a visible widget with a DOM element in a fixed position on the screen.
 They can involve user input (buttons), or be informational only;
 the position is determined using CSS.
-By default these are placed in the container with CSS class name ol-overlaycontainer-stopevent, but can use any outside DOM element.
-
-<script setup>
-import MapControlDemo from "@demos/MapControlDemo.vue"
-</script>
-<ClientOnly>
-<MapControlDemo />
-</ClientOnly>
+By default these are placed in the container with CSS class name `ol-overlaycontainer-stopevent`, but can use any outside DOM element.
 
 ## Control List
 
 See menu items on the left.
-
-## Usage
-
-::: code-group
-
-<<< ../../../src/demos/MapControlDemo.vue
-
-:::
diff --git a/docs/componentsguide/mapcontrols/layerswitcher/index.md b/docs/componentsguide/mapcontrols/layerswitcher/index.md
@@ -2,9 +2,20 @@
 
 > A control for switching between layers.
 
-## Demo
+<script setup>
+import LayerswitcherControlDemo from "@demos/LayerswitcherControlDemo.vue"
+</script>
+<ClientOnly>
+<LayerswitcherControlDemo />
+</ClientOnly>
 
-See [Demo page for all Map Controls](../index.md)
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/LayerswitcherControlDemo.vue
+
+:::
 
 ## Properties
 

diff --git a/docs/componentsguide/mapcontrols/layerswitcherimage/index.md b/docs/componentsguide/mapcontrols/layerswitcherimage/index.md
@@ -4,9 +4,20 @@
 
 To see the correct thumbnail images, you may have to set the property `imagerySet` (e. g. for usage with [BingMaps](../../sources/bing/)).
 
-## Demo
+<script setup>
+import LayerswitcherimageControlDemo from "@demos/LayerswitcherimageControlDemo.vue"
+</script>
+<ClientOnly>
+<LayerswitcherimageControlDemo />
+</ClientOnly>
 
-See [Demo page for all Map Controls](../index.md)
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/LayerswitcherimageControlDemo.vue
+
+:::
 
 ## Properties
 

diff --git a/docs/componentsguide/mapcontrols/mouseposition/index.md b/docs/componentsguide/mapcontrols/mouseposition/index.md
@@ -2,9 +2,20 @@
 
 > A Mouse Position control for OpenLayers.
 
-## Demo
+<script setup>
+import MousepositionControlDemo from "@demos/MousepositionControlDemo.vue"
+</script>
+<ClientOnly>
+<MousepositionControlDemo />
+</ClientOnly>
 
-See [Demo page for all Map Controls](../index.md)
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/MousepositionControlDemo.vue
+
+:::
 
 ## Properties
 

diff --git a/docs/componentsguide/mapcontrols/printdialog/index.md b/docs/componentsguide/mapcontrols/printdialog/index.md
@@ -2,9 +2,20 @@
 
 > A print dialog to print the current map canvas content.
 
-## Demo
+<script setup>
+import PrintdialogControlDemo from "@demos/PrintdialogControlDemo.vue"
+</script>
+<ClientOnly>
+<PrintdialogControlDemo />
+</ClientOnly>
 
-See [Demo page for all Map Controls](../index.md)
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/PrintdialogControlDemo.vue
+
+:::
 
 ## Properties
 

diff --git a/docs/componentsguide/mapcontrols/rotate/index.md b/docs/componentsguide/mapcontrols/rotate/index.md
@@ -2,9 +2,20 @@
 
 > A Rotate control for OpenLayers.
 
-## Demo
+<script setup>
+import RotateControlDemo from "@demos/RotateControlDemo.vue"
+</script>
+<ClientOnly>
+<RotateControlDemo />
+</ClientOnly>
 
-See [Demo page for all Map Controls](../index.md)
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/RotateControlDemo.vue
+
+:::
 
 ## Properties
 

diff --git a/docs/componentsguide/mapcontrols/scaleline/index.md b/docs/componentsguide/mapcontrols/scaleline/index.md
@@ -2,9 +2,20 @@
 
 > A Scale Line control for OpenLayers.
 
-## Demo
+<script setup>
+import ScalelineControlDemo from "@demos/ScalelineControlDemo.vue"
+</script>
+<ClientOnly>
+<ScalelineControlDemo />
+</ClientOnly>
 
-See [Demo page for all Map Controls](../index.md)
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/ScalelineControlDemo.vue
+
+:::
 
 ## Properties
 

diff --git a/docs/componentsguide/mapcontrols/swipe/index.md b/docs/componentsguide/mapcontrols/swipe/index.md
@@ -2,9 +2,20 @@
 
 > A Swipe control for OpenLayers.
 
-## Demo
+<script setup>
+import SwipeControlDemo from "@demos/SwipeControlDemo.vue"
+</script>
+<ClientOnly>
+<SwipeControlDemo />
+</ClientOnly>
 
-See [Demo page for all Map Controls](../index.md)
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/SwipeControlDemo.vue
+
+:::
 
 ## Properties
 

diff --git a/docs/componentsguide/mapcontrols/toggle/index.md b/docs/componentsguide/mapcontrols/toggle/index.md
@@ -2,9 +2,20 @@
 
 > A simple toggle control The control can be created with an interaction to control its activation.
 
-## Demo
+<script setup>
+import ToggleControlDemo from "@demos/ToggleControlDemo.vue"
+</script>
+<ClientOnly>
+<ToggleControlDemo />
+</ClientOnly>
 
-See [Demo page for all Map Controls](../index.md)
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/ToggleControlDemo.vue
+
+:::
 
 ## Properties
 

diff --git a/docs/componentsguide/mapcontrols/videorecorder/index.md b/docs/componentsguide/mapcontrols/videorecorder/index.md
@@ -2,9 +2,20 @@
 
 > A simple toggle control The control can be created with an interaction to control its activation.
 
-## Demo
+<script setup>
+import VideorecorderControlDemo from "@demos/VideorecorderControlDemo.vue"
+</script>
+<ClientOnly>
+<VideorecorderControlDemo />
+</ClientOnly>
 
-See [Demo page for all Map Controls](../index.md)
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/VideorecorderControlDemo.vue
+
+:::
 
 ## Properties
 

diff --git a/docs/componentsguide/mapcontrols/zoom/index.md b/docs/componentsguide/mapcontrols/zoom/index.md
@@ -2,9 +2,20 @@
 
 > A Zoom control for OpenLayers.
 
-## Demo
+<script setup>
+import ZoomControlDemo from "@demos/ZoomControlDemo.vue"
+</script>
+<ClientOnly>
+<ZoomControlDemo />
+</ClientOnly>
+
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/ZoomControlDemo.vue
 
-See [Demo page for all Map Controls](../index.md)
+:::
 
 ## Properties
 

diff --git a/docs/componentsguide/mapcontrols/zoomslider/index.md b/docs/componentsguide/mapcontrols/zoomslider/index.md
@@ -2,9 +2,20 @@
 
 > A Zoom Slider control for OpenLayers.
 
-## Demo
+<script setup>
+import ZoomsliderControlDemo from "@demos/ZoomsliderControlDemo.vue"
+</script>
+<ClientOnly>
+<ZoomsliderControlDemo />
+</ClientOnly>
 
-See [Demo page for all Map Controls](../index.md)
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/ZoomsliderControlDemo.vue
+
+:::
 
 ## Properties
 

diff --git a/docs/componentsguide/mapcontrols/zoomtoextent/index.md b/docs/componentsguide/mapcontrols/zoomtoextent/index.md
@@ -2,9 +2,20 @@
 
 > A Zoom to extent control for OpenLayers.
 
-## Demo
+<script setup>
+import ZoomtoextentControlDemo from "@demos/ZoomtoextentControlDemo.vue"
+</script>
+<ClientOnly>
+<ZoomtoextentControlDemo />
+</ClientOnly>
 
-See [Demo page for all Map Controls](../index.md)
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/ZoomtoextentControlDemo.vue
+
+:::
 
 ## Properties
 

diff --git a/docs/public/sitemap.xml b/docs/public/sitemap.xml
@@ -357,6 +357,11 @@
   <lastmod>2021-08-15T21:05:05+00:00</lastmod>
   <priority>0.80</priority>
 </url>
+<url>
+  <loc>https://vue3openlayers.netlify.app/componentsguide/mapcontrols/videorecorder/</loc>
+  <lastmod>2023-09-19T23:00:00+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
 <url>
   <loc>https://vue3openlayers.netlify.app/componentsguide/mapcontrols/zoom/</loc>
   <lastmod>2021-08-15T21:05:05+00:00</lastmod>

diff --git a/src/demos/AppDemo.vue b/src/demos/AppDemo.vue
@@ -65,8 +65,7 @@
         title="LineString"
         :onToggle="(active) => changeDrawType(active, 'LineString')"
       />
-      <ol-videorecorder-control @stop="videoStopped">
-      </ol-videorecorder-control>
+      <ol-videorecorder-control @stop="videoStopped" />
       <ol-printdialog-control />
     </ol-control-bar>
 

diff --git a/src/demos/FullscreenControlDemo.vue b/src/demos/FullscreenControlDemo.vue
@@ -0,0 +1,23 @@
+<template>
+  <ol-map ref="map" style="height: 400px">
+    <ol-view
+      ref="view"
+      :center="center"
+      :rotation="rotation"
+      :zoom="zoom"
+      :projection="projection"
+    />
+
+    <ol-tile-layer>
+      <ol-source-osm />
+    </ol-tile-layer>
+    <ol-fullscreen-control />
+  </ol-map>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const center = ref([40, 40]);
+const projection = ref("EPSG:4326");
+const zoom = ref(8);
+</script>