my-snip
Version:
This tool allows you to quickly prototype and develop a bookmarklet, aggregate snippets, and write user-flow scripts.
167 lines (153 loc) • 5.28 kB
HTML
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/vuetify@3.0.5/dist/vuetify.min.css"
rel="stylesheet"
/>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.5/dist/vuetify.min.js"></script>
<script type="text/x-template" id="app-template">
<v-app>
<v-card
class="mx-auto"
width="400px"
>
<v-card-title>
Создайте bookmarklet
</v-card-title>
<v-card-subtitle>
<v-btn
small
@click="showPrimer = !showPrimer"
>
или воспользуйтесь примерами
</v-btn>
</v-card-subtitle>
<v-expand-transition>
<div v-show="showPrimer">
<v-divider></v-divider>
<v-card-text>
<v-btn text @click="setGistExample()">пример gist</v-btn>
<v-btn text @click="setLocalExample()">пример локальный файл</v-btn>
</v-card-text>
</div>
</v-expand-transition>
<v-card-content>
<v-radio-group
v-model="typeSnip"
>
<v-radio label="ES modules" value="module"></v-radio>
<v-radio label="Gist" value="gist"></v-radio>
</v-radio-group>
<div v-if="typeSnip === 'module'">
<v-text-field label="url" v-model="url"></v-text-field>
<v-switch label="из локального проекта?" v-model="isLocalUrl"></v-switch>
</div>
<div v-if="typeSnip === 'gist'">
<v-text-field label="id" v-model="gistid"></v-text-field>
<v-text-field label="имя файла" v-model="fileName"></v-text-field>
</div>
<v-switch label="будут env?" v-model="isEnv"></v-switch>
<v-textarea v-if="isEnv" label="env object" v-model="envObject"></v-textarea>
<pre style="font-size: 10px;">{{tempalteSnippet()}}</pre>
</v-card-content>
<v-card-actions>
<v-btn :href="tempalteSnippet()">my-snip ссылка</v-btn>
<v-btn text @click="clickCopyLink()">скопировать</v-btn>
</v-card-actions>
</v-card>
</v-app>
</script>
<script>
const { createApp } = Vue;
const { createVuetify } = Vuetify;
const vuetify = createVuetify();
const app = createApp({
template: "#app-template",
data: () => ({
typeSnip: "gist",
showPrimer: false,
url: "",
gistid: "",
fileName: "main.js",
envObject: JSON.stringify({
TOKEN: "",
}, null, 4),
isLocalUrl: false,
isEnv: false,
}),
methods: {
setGistExample(){
this.typeSnip = "gist";
this.gistid = "7c314e6ce97b044a8305f0daa3ffe0f0";
this.fileName = "snippets.js";
},
setLocalExample(){
this.typeSnip = "module";
this.url = "/src/public/snippets.js";
this.isLocalUrl = true;
},
clickCopyLink() {
window.navigator.clipboard
.writeText(this.tempalteSnippet())
.then(() => {
alert('Скопирован bookmarklet');
})
.catch((err) => {
alert('Что то пошло не так');
});
},
testLink(){
window.location = this.tempalteSnippet();
},
getSnipObjGist(){
return {
id: this.gistid,
file: this.fileName
};
},
getSnipObjURL(){
const url = this.url;
const urlTmpl = this.isLocalUrl ? `"window.location.origin + "/${url}?" + Math.random()"` : url;
return {
url: urlTmpl
};
},
tempalteSnippet() {
//const lib = "http://localhost:3000/dist/snip.js";
const lib = "https://cdn.jsdelivr.net/gh/bastsoft/my-snip@2.2.9/dist/snip.js";
const snipObjModule = this.typeSnip === 'module' ? this.getSnipObjURL() : this.getSnipObjGist();
if(this.isEnv){
let env = {};
try{
env = JSON.parse(this.envObject);
}catch(e){
//console.error(e);
}
snipObjModule.env = env;
}
return `
javascript:(function(){
var el = document.createElement('script');
el.onload = function (){
snip(${JSON.stringify(snipObjModule).replace(/"\\"/g, "").replace(/\\""/g, "").replace(/\\"/g, '"')});
};
document.head.appendChild(el).src = "${lib}";
})();
`;
},
},
})
.use(vuetify)
.mount("#app");
</script>
</body>
</html>