<!doctype html>
<html lang="en" class="theme-bubblegum">
<head>
<title>chringel.dev</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Christian Engel">
<meta name="description" content="Christian Engel's personal blog about coding, spatial stuff and everything else">
<meta name="generator" content="Eleventy v3.0.0">
<meta name="theme-color" content="#ffffff">
<!-- Social -->
<meta property="og:title" content="Bookmarklet">
<meta property="og:type" content="website">
<meta property="og:site_name" content="chringel.dev">
<meta property="og:description" content="Christian Engel's personal blog about coding, spatial stuff and everything else">
<meta property="og:image" content="https://chringel.dev/og-image/bookmarklet">
<meta property="og:url" content="https://chringel.dev/bookmarklet">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://chringel.dev/og-image/bookmarklet">
<meta property="article:published_time" content="2024-07-11T14:06:32.395+02:00">
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
<link rel="token_endpoint" href="https://tokens.indieauth.com/token">
<link rel="webmention" href="https://jam.chringel.dev/webmention">
<link rel="pingback" href="https://jam.chringel.dev/pingback">
<meta name="robots" content="index,follow">
<link rel="canonical" href="https://chringel.dev/bookmarklet">
<link rel="preload" href="/fonts/space-grotesk-v13-latin-regular.woff2" as="font" type="font/woff2" crossorigin="crossorigin">
<link rel="preload" href="/fonts/space-grotesk-v13-latin-700.woff2" as="font" type="font/woff2" crossorigin="crossorigin">
<link rel="stylesheet" href="/css/index.css?v=1720699628">
<link rel="stylesheet" href="/bundle/z87_1WK_lJ.css">
<script async defer data-website-id="59e2e93a-9a05-4d4c-b671-33eaec1b46f7" src="https://analytics.chringel.dev/script.js"></script>
<script src="/js/main.js?v=1720699628" defer type="module"></script>
<script src="/bundle/2XxLyr40xB.js" defer type="module"></script>
<script defer src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
<div class="layout">
<header class="container flex items-center justify-between py-8">
<div class="wvoeca8pa">
<input type="checkbox" id="side-menu" class="side-menu">
<label for="side-menu" class="hamb"><span class="hamb-line"></span></label>
<nav class="nav">
<ul class="menu">
<li>
<a href="/" class="unset animated-link">Home</a>
</li>
<li>
<a href="/blog/" class="unset animated-link">Blog</a>
</li>
<li>
<a href="/notes/" class="unset animated-link">Notes</a>
</li>
<li>
<a href="/about/" class="unset animated-link">About Me</a>
</li>
</ul>
</nav>
</div>
<div class="flex items-center">
<div class="text-text-bold">
<a href="https://github.com/chringel21" title="Christian Engel on Github" rel="me" class="unset ml-4 rounded-sm transition-[background-size] duration-150 ease-in-out bg-left-bottom bg-[length:0%_55%] hover:bg-[length:100%_55%] bg-no-repeat bg-gradient-to-r from-primary-yellow to-primary-yellow dark:bg-none dark:hover:text-primary-yellow no-logo">
<span><svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" class="icon undefined">
<use xlink="http://www.w3.org/1999/xlink" href="/sprites/icons.svg#svg-logo-github"></use>
</svg>
</span>
</a>
<a href="https://fosstodon.org/@chringel" title="Christian Engel on Mastodon" rel="me" class="unset ml-4 rounded-sm transition-[background-size] duration-150 ease-in-out bg-left-bottom bg-[length:0%_55%] hover:bg-[length:100%_55%] bg-no-repeat bg-gradient-to-r from-primary-yellow to-primary-yellow dark:bg-none dark:hover:text-primary-yellow no-logo">
<span><svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" class="icon undefined">
<use xlink="http://www.w3.org/1999/xlink" href="/sprites/icons.svg#svg-logo-mastodon"></use>
</svg>
</span>
</a>
</div>
<mode-toggle class="flex wojollrse">
<button id="webc-QPYgn" role="switch" type="button" tabindex="0" aria-checked="false" data-headlessui-state class="justify-self-end bg-black dark:bg-white ml-4 inline-flex h-6 w-11 items-center rounded-full">
<span class="sr-only">Toggle dark mode</span>
<span id="mode-circle" class="light inline-block h-4 w-4 rounded-full bg-gradient-to-tr invisible">
<span class="absolute top-0 right-0 w-[10px] h-[10px] rounded-full bg-gray-700 scale-[0]"></span>
</span>
</button>
</mode-toggle>
</div>
</header>
<main id="main" class="main container"><a href="javascript:(function(){let title=document.getElementsByTagName("title")[0].innerHTML;title=encodeURIComponent(title);let selection="";if (window.getSelection) {selection=window.getSelection().toString();} else if (document.selection && document.selection.type !== "Control") {selection=document.selection.createRange().text;}selection=encodeURIComponent(selection);const url=`https://chringel.dev/share/?title=${title}&text=${selection}&url=+${encodeURIComponent(document.location.href)}`;const opts="resizable,scrollbars,status=0,toolbar=0,menubar=0,titlebar=0,width=680,height=700,location=0";window.open(url, "Sharer", opts);})();" class="p-1 w-fit cursor-grab bg-primary-green border-lime-700 border text-sm unset hover:text-bg-body">Share on chringel.dev</a>
<!-- prettier-ignore --><pre tabindex="0" class="language-javascript"><code class="language-javascript"> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// get link title</span><br> <span class="token keyword">let</span> title <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"title"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>innerHTML<span class="token punctuation">;</span><br> title <span class="token operator">=</span> <span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>title<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// get optional text selection</span><br> <span class="token keyword">let</span> selection <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span><br> <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>getSelection<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> selection <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>selection <span class="token operator">&&</span> document<span class="token punctuation">.</span>selection<span class="token punctuation">.</span>type <span class="token operator">!==</span> <span class="token string">"Control"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> selection <span class="token operator">=</span> document<span class="token punctuation">.</span>selection<span class="token punctuation">.</span><span class="token function">createRange</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>text<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> selection <span class="token operator">=</span> <span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>selection<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token comment">// generate share URL</span><br> <span class="token keyword">const</span> url <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://chringel.dev/share/?title=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&text=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selection<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&url=+</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">encodeURIComponent</span><span class="token punctuation">(</span><br> document<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href<br> <span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><br> <span class="token comment">// open popup window to sharing form</span><br> <span class="token keyword">const</span> opts <span class="token operator">=</span><br> <span class="token string">"resizable,scrollbars,status=0,toolbar=0,menubar=0,titlebar=0,width=680,height=700,location=0"</span><span class="token punctuation">;</span><br> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token string">"Sharer"</span><span class="token punctuation">,</span> opts<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
</main>
<footer class="flex flex-wrap justify-center items-center gap-8 text-sm mt-16 border-t border-border-code py-8 w57eqmt2_">
<p class="text-center">
CC-BY 4.0
<span class="h-card">
<a href="https://chringel.dev/" rel="me" class="unset gradient-link tracking-wider font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#f57111] to-[#f79605] hover:after:bg-gradient-to-r hover:after:from-[#f57111] hover:after:to-[#f79605] u-url p-name">Christian Engel</a>
<img loading="lazy" decoding="async" src="/img/vqjxFKbWTk-200.webp" alt="Christian Engel" width="200" height="200" class="hidden u-photo">
<span class="hidden p-note">Hi, I'm Christian Engel, software engineer by profession, blogger, photographer and open-source enthusiast by passion.</span>
</span>
<br>
Legal stuff:
<a href="/imprint" class="unset gradient-link tracking-wider font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#00abda] to-[#1476ff] hover:after:bg-gradient-to-r hover:after:from-[#00abda] hover:after:to-[#1476ff]">
Imprint</a>
•
<a href="/privacy-policy" class="unset gradient-link tracking-wider font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#00abda] to-[#1476ff] hover:after:bg-gradient-to-r hover:after:from-[#00abda] hover:after:to-[#1476ff]">
Privacy Policy</a>
</p>
<a href="https://github.com/chringel21/chringel.dev/blob/main/./content/blog/2022/google-maps-clone-part-2/index.md" class="hidden md:block">Edit this page on GitHub</a>
</footer>
</div>
</body>
</html>