Skip to content

Commit 4c11b05

Browse files
justb4justb4
committed
wegue-oss#122 add Share Button: Permalink Sharing with email
1 parent 993c04a commit 4c11b05

File tree

2 files changed

+104
-67
lines changed

2 files changed

+104
-67
lines changed

‎src/components/sharebutton/ShareButton.vue

+103-66
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,29 @@
1414
</v-tooltip>
1515
</template>
1616
<v-list>
17-
<v-list-tile
18-
v-for="(item, index) in items"
19-
:key="index"
20-
@click="onClick(item.action)"
21-
>
22-
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
17+
<v-list-tile @click="onCopyUrl()">
18+
<v-list-tile-action>
19+
<v-icon medium>file_copy</v-icon>
20+
</v-list-tile-action>
21+
<v-list-tile-content>
22+
<v-list-tile-title>{{copyUrlText}}</v-list-tile-title>
23+
</v-list-tile-content>
24+
</v-list-tile>
25+
<v-list-tile @click="onCopyEmbedHTML()">
26+
<v-list-tile-action>
27+
<v-icon medium>code</v-icon>
28+
</v-list-tile-action>
29+
<v-list-tile-content>
30+
<v-list-tile-title>{{copyEmbedHtmlText}}</v-list-tile-title>
31+
</v-list-tile-content>
32+
</v-list-tile>
33+
<v-list-tile>
34+
<v-list-tile-action>
35+
<v-icon medium>email</v-icon>
36+
</v-list-tile-action>
37+
<v-list-tile-content>
38+
<v-list-tile-title v-html="mailToUrl"/>
39+
</v-list-tile-content>
2340
</v-list-tile>
2441
</v-list>
2542
</v-menu>
@@ -33,29 +50,12 @@
3350
{{alertText}}
3451
</v-alert>
3552
</div>
36-
<!-- <div>-->
37-
<!-- <div>-->
38-
<!-- <v-btn icon :dark="dark" @click="onClick">-->
39-
<!-- <v-icon medium>{{icon}}</v-icon>-->
40-
<!-- {{text}}-->
41-
<!-- </v-btn>-->
42-
<!-- <textarea id="textstore" ref="textstore" style="display: none; position: relative"></textarea>-->
43-
<!-- </div>-->
44-
<!-- <v-alert-->
45-
<!-- class="wgu-alert"-->
46-
<!-- :value="alert"-->
47-
<!-- :dark="dark"-->
48-
<!-- type="info"-->
49-
<!-- transition="fade-transition"-->
50-
<!-- >-->
51-
<!-- {{alertText}}-->
52-
<!-- </v-alert>-->
53-
<!-- </div>-->
5453
</template>
5554

5655
<script>
5756
5857
import { Mapable } from '../../mixins/Mapable';
58+
import {WguEventBus} from '../../WguEventBus';
5959
6060
export default {
6161
name: 'wgu-share-btn',
@@ -64,61 +64,95 @@ export default {
6464
icon: {type: String, required: false, default: 'share'},
6565
text: {type: String, required: false, default: ''},
6666
hoverText: {type: String, required: false, default: 'Share permalink'},
67-
alertText: {type: String, required: false, default: 'Copied'},
6867
alertTimeMillis: {type: Number, required: false, default: 1000},
69-
dark: {type: Boolean, required: false, default: false}
68+
alertCopiedText: {type: String, required: false, default: 'Copied'},
69+
alertErrorText: {type: String, required: false, default: 'An error occurred'},
70+
dark: {type: Boolean, required: false, default: false},
71+
copyUrlText: {type: String, required: false, default: 'Copy URL'},
72+
copyEmbedHtmlText: {type: String, required: false, default: 'Copy HTML Embed Code'},
73+
emailUrlText: {type: String, required: false, default: 'Email URL'},
74+
emailSubjectText: {type: String, required: false, default: 'NPLH Url Share'}
7075
},
7176
data () {
7277
return {
7378
alert: false,
74-
items: [
75-
{ title: 'Copy URL', action: 'copy' },
76-
{ title: 'Copy HTML Embed Code', action: 'embed' }
77-
// { title: 'Email URL', action: 'email' }
78-
]
79+
alertText: this.alertCopiedText,
80+
mailToUrl: this.emailUrlText
7981
}
8082
},
83+
mounted () {
84+
// Listen to the ol-map-mounted event and receive the OL map instance
85+
WguEventBus.$on('ol-map-mounted', (olMap) => {
86+
// Listen to map state changes (pan, zoom)
87+
this.map.on('moveend', () => {
88+
this.onMapChange();
89+
});
90+
});
91+
},
8192
methods: {
82-
onClick (action) {
93+
showAlert (text) {
94+
// Show short alert
95+
this.alertText = text || this.alertCopiedText;
96+
this.alert = true;
97+
window.setTimeout(() => {
98+
this.alert = false;
99+
}, this.alertTimeMillis);
100+
},
101+
copyToClipboard (text) {
102+
const textArea = this.$refs.textstore;
103+
// Show and select textarea
104+
textArea.style.display = 'block';
105+
textArea.value = text;
106+
textArea.select();
107+
108+
// Copy to clipboard
109+
document.execCommand('copy');
110+
111+
// Hide textarea
112+
textArea.value = '';
113+
textArea.style.display = 'none';
114+
},
115+
onCopyUrl () {
83116
// Get permalink URL and copy to clipboard
84-
const permalinkController = this.map.get('permalinkcontroller');
85-
if (!permalinkController) {
86-
console.error('no permalink controller available!');
87-
return true;
88-
}
89117
try {
90118
// Copy to clipboard: selected text needs to be visible so
91119
// toggle textarea short time
92-
let text;
93-
94-
if (action === 'copy') {
95-
text = permalinkController.getShareUrl();
96-
} else if (action === 'embed') {
97-
text = permalinkController.getEmbedHTML();
98-
} else {
99-
console.error('no permalink controller available!');
100-
return true;
101-
}
102-
const textArea = this.$refs.textstore;
103-
// Show and select textarea
104-
textArea.style.display = 'block';
105-
textArea.value = text;
106-
textArea.select();
107-
108-
// Copy to clipboard
109-
document.execCommand('copy');
110-
// Hide textarea
111-
textArea.value = '';
112-
textArea.style.display = 'none';
113-
114-
// Show short alert
115-
this.alert = true;
116-
window.setTimeout(() => {
117-
this.alert = false;
118-
}, this.alertTimeMillis);
120+
const permalinkController = this.map.get('permalinkcontroller');
121+
this.copyToClipboard(permalinkController.getShareUrl());
122+
this.showAlert();
119123
} catch (error) {
120-
console.error(error);
124+
this.showAlert(this.alertErrorText);
121125
}
126+
},
127+
onCopyEmbedHTML () {
128+
// Get permalink URL and copy to clipboard
129+
try {
130+
const permalinkController = this.map.get('permalinkcontroller');
131+
this.copyToClipboard(permalinkController.getEmbedHTML());
132+
this.showAlert();
133+
} catch (error) {
134+
this.showAlert(this.alertErrorText);
135+
}
136+
},
137+
setMailtoUrl: function () {
138+
// if (!this.map) {
139+
// return 'Waiting for Map...';
140+
// }
141+
// https://css-tricks.com/snippets/html/mailto-links/
142+
// Get permalink URL and add to email Body
143+
try {
144+
const permalinkController = this.map.get('permalinkcontroller');
145+
const url = encodeURIComponent(permalinkController.getShareUrl());
146+
this.mailToUrl = `<a href="mailto:?subject=${this.emailSubjectText}&body=${url}">${this.emailUrlText}</a>`
147+
} catch (error) {
148+
this.showAlert(this.alertErrorText);
149+
}
150+
},
151+
/**
152+
* Callback when Map View has changed, e.g. 'moveend'.
153+
*/
154+
onMapChange () {
155+
this.setMailtoUrl();
122156
}
123157
}
124158
}
@@ -133,5 +167,8 @@ export default {
133167
right: 4em;
134168
z-index: 1;
135169
}
136-
170+
a {
171+
color: inherit;
172+
text-decoration: none !important;
173+
}
137174
</style>

‎static/app-conf.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"mapCenter": [0, 0],
1616

1717
"permalink": {
18-
"location": "hash",
18+
"location": "search",
1919
"layers": true,
2020
"extent": false,
2121
"projection": "EPSG:4326",

0 commit comments

Comments
 (0)