Skip to content

Commit

Permalink
doc: improve playground
Browse files Browse the repository at this point in the history
  • Loading branch information
@mistic100
mistic100 committed Mar 4, 2022
1 parent ad2379b commit e62e667
Showing 1 changed file with 41 additions and 13 deletions.
54 changes: 41 additions & 13 deletions docs/.vuepress/components/Playground.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,16 +297,24 @@
</div>

<div class="md-layout md-gutter" v-if="markerForm.type === 'image' || markerForm.type === 'imageLayer'">
<md-button class="md-icon-button md-raised" style="margin: 15px 0 0 20px;"
v-bind:class="{'md-primary': markerForm[markerForm.type] === PIN_RED_URL }"
v-on:click="markerForm[markerForm.type] = PIN_RED_URL">
<md-button v-if="markerForm.type === 'image'"
class="md-icon-button md-raised" style="margin: 15px 0 0 20px;"
v-bind:class="{'md-primary': markerForm.image === PIN_RED_URL }"
v-on:click="markerForm.image = PIN_RED_URL">
<img v-bind:src="PIN_RED_URL" width="32px">
</md-button>
<md-button class="md-icon-button md-raised" style="margin: 15px 0 0 15px;"
<md-button v-if="markerForm.type === 'image'"
class="md-icon-button md-raised" style="margin: 15px 0 0 15px;"
v-bind:class="{'md-primary': markerForm[markerForm.type] === PIN_BLUE_URL }"
v-on:click="markerForm[markerForm.type] = PIN_BLUE_URL">
<img v-bind:src="PIN_BLUE_URL" width="32px">
</md-button>
<md-button v-if="markerForm.type === 'imageLayer'"
class="md-icon-button md-raised" style="margin: 15px 0 0 15px;"
v-bind:class="{'md-primary': markerForm.imageLayer === TARGET_URL }"
v-on:click="markerForm.imageLayer = TARGET_URL">
<img v-bind:src="TARGET_URL" width="32px">
</md-button>
<div class="md-layout-item">
<md-field>
<label>Image URL</label>
Expand Down Expand Up @@ -342,22 +350,34 @@
</div>

<div class="md-layout md-gutter" v-if="markerForm.type === 'image' || markerForm.type === 'imageLayer' || markerForm.type === 'html'">
<div class="md-layout-item md-size-33">
<div class="md-layout-item md-size-25">
<md-field>
<label>Width</label>
<md-input type="number" min="0" step="1" v-model="markerForm.width"
:required="markerForm.type === 'image' || markerForm.type === 'imageLayer'"/>
</md-field>
</div>
<div class="md-layout-item md-size-33">
<div class="md-layout-item md-size-25">
<md-field>
<label>Height</label>
<md-input type="number" min="0" step="1" v-model="markerForm.height"
:required="markerForm.type === 'image' || markerForm.type === 'imageLayer'"/>
</md-field>
</div>

<div class="md-layout-item md-size-33">
<div class="md-layout-item md-size-25" v-if="markerForm.type === 'imageLayer'">
<md-field>
<label>Orientation</label>
<md-select v-model="markerForm.orientation">
<md-option value="front">front</md-option>
<md-option value="horizontal">horizontal</md-option>
<md-option value="vertical-left">vertical-left</md-option>
<md-option value="vertical-right">vertical-tight</md-option>
</md-select>
</md-field>
</div>

<div class="md-layout-item md-size-25">
<md-field>
<label>Anchor</label>
<md-select v-model="markerForm.anchor">
Expand All @@ -376,14 +396,14 @@
</div>

<div class="md-layout md-gutter">
<div class="md-layout-item md-size-66">
<div class="md-layout-item md-size-75">
<md-field>
<label>Tooltip content</label>
<md-input type="text" v-model="markerForm.tooltip.content"/>
</md-field>
</div>

<div class="md-layout-item md-size-33">
<div class="md-layout-item md-size-25">
<md-field>
<label>Tooltip position</label>
<md-select v-model="markerForm.tooltip.position">
Expand Down Expand Up @@ -547,6 +567,7 @@
polylineRad: null,
width : null,
height : null,
orientation: null,
anchor : null,
listContent: null,
content : null,
Expand Down Expand Up @@ -575,6 +596,7 @@
this.CLIPBOARD_AVAILABLE = false; // SSR rendering dissallow "window" usage here
this.PIN_RED_URL = 'https://photo-sphere-viewer.js.org/assets/pin-red.png';
this.PIN_BLUE_URL = 'https://photo-sphere-viewer.js.org/assets/pin-blue.png';
this.TARGET_URL = 'https://photo-sphere-viewer.js.org/assets/target.png';
this.FONT_SIZES = range(10, 31).map(i => `${i}px`);
this.FONT_SIZES_2 = range(10, 31, 5).map(i => `${i}px`);
},
Expand Down Expand Up @@ -734,6 +756,7 @@
this.cancelMarker();
this.markerForm.id = 'marker-' + Math.random().toString(36).slice(2);
this.markerForm.type = type;
this.markerForm.orientation = 'front';
this.markerForm.anchor = 'center center';
this.markerForm.tooltip.position = 'top center';
Expand All @@ -745,10 +768,9 @@
this.markerForm.anchor = 'bottom center';
break;
case 'imageLayer':
this.markerForm.imageLayer = this.PIN_RED_URL;
this.markerForm.width = 48;
this.markerForm.height = 48;
this.markerForm.anchor = 'bottom center';
this.markerForm.imageLayer = this.TARGET_URL;
this.markerForm.width = 120;
this.markerForm.height = 120;
break;
case 'html':
this.markerForm.html = 'Test content';
Expand Down Expand Up @@ -958,6 +980,12 @@
if (marker.config.height) {
m.height = marker.config.height;
}
if (marker.config.anchor !== 'center center') {
m.anchor = marker.config.anchor;
}
if (marker.config.orientation !== 'front') {
m.orientation = marker.config.orientation;
}
if (marker.config.tooltip.content) {
m.tooltip = marker.config.tooltip;
}
Expand Down

0 comments on commit e62e667

Please sign in to comment.