Open External Links in Default Browser

[jlord]

Since Electron apps are showing webpages that you make they can also show other webpages that you link to in your app. If they're not actually a part of your app, you may prefer them to open up in the user's default browser.

That's what we're gonna do. In various places I link out to other GitHub or Git resources. Those will now open outside of the Git-it app and in the user's browser.

To do this we use the shell module and the method it has, openExternal, which takes in a url. You can read more about it on the documentation page for shell in Electron.

So in the template for each page, layout.hbs (and in the index.html) we require the script that we'll use to handle these external links:

<script>require('../handle-external-links.js')</script>

Note: I do this a couple of different ways in the app right now and will clean it up later 😁

Then in that script we wait until the page is loaded and loop through each of its links. We see if the link includes a http, meaning it's an external link, not a relative link (e.g. ../.../file.html) to another Git-it file.

With each external link we find we add a click event that uses shell to open the link in the browser.

shell.openExternal('http://github.com/jlord/git-it-electron')

Here's the rest of that code.

Fixes #7

[jlord]

Whoops, forgot to actually add the commit on index.html here so just pushed it to master: d6aa605

[max-mapper]

var shell = require('shell')

document.addEventListener('DOMContentLoaded', function (event) {
  var links = document.querySelectorAll('a[href]')

  [].forEach.call(links, function (link) {
    var url = link.getAttribute('href')
    if (url.indexOf('http:') > -1) {
      link.addEventListener('click', function (e) {
        e.preventDefault()
        shell.openExternal(url)
      })
    }
  }
})

[jlord]

Went over this with @maxogden IRL — gonna make a new PR with updates ✨