Bookmark.vue

<template lang="pug">
  a.button.bookmark-action(
    @click.prevent='bookmarkAction',
    :href='href',
    :rel='rel',
    :title='title'
  )
    .svg-icon.small.fill-cream(
      v-once='',
      v-html='icon'
    )
</template>

<script>
// REQUIRED: npm install svg-inline-loader pug --save-dev
export default {
  name: 'bookmark-action',
  methods: {
    bookmarkAction () {
      // from: https://gist.github.com/oilvier/70abd45d1f2ffc98b568
      if (window.sidebar &&
        window.sidebar.addPanel) { // Firefox <23
        window.sidebar.addPanel(document.title, window.location.href, '')
      } else if (window.external &&
        ('AddFavorite' in window.external)) { // Internet Explorer
        window.external.AddFavorite(location.href, document.title)
      } else if (window.opera &&
        window.print || window.sidebar &&
        !(window.sidebar instanceof Node)) { // Opera <15 and Firefox >23
        /**
         * For Firefox <23 and Opera <15, no need for JS to add to bookmarks
         * The only thing needed is a `title` and a `rel="sidebar"`
         * To ensure that the bookmarked URL doesn't have a complementary `#` from our trigger's href
         * we force the current URL
         */
        this.rel = 'sidebar'
        this.title = document.title
        this.href = window.location.href
        return true
      } else { // For the other browsers (mainly WebKit) we use a simple alert to inform users that they can add to bookmarks with ctrl+D/cmd+D
        alert('You can add this page to your bookmarks by pressing ' + (navigator.userAgent.toLowerCase().indexOf('mac') !== -1 ? 'Command/Cmd' : 'CTRL') + ' + D on your keyboard.')
      }
      // If you have something in the `href` of your trigger
      return false
    }
  },
  data () {
    return {
      icon: require(`!svg-inline-loader!@/assets/icons/star-full.svg`),
      title: 'Add to bookmarks.',
      rel: '',
      href: '#bookmark'
    }
  }
}
</script>

<style lang="scss" scoped>
// call settings for global SCSS access
// @import '~@/styles/settings';
.bookmark-action {
//   // margin: $global-padding*3;
//   filter: drop-shadow(rem-calc(1) rem-calc(2) rem-calc(2) $dark-yellow);
//   &:hover {
//     filter: drop-shadow(rem-calc(1) rem-calc(2) rem-calc(2) rgba($dark-yellow, 0.4));
//   }
  .svg-icon{
    margin-bottom: 0;
  }
}
</style>