├── LICENSE
├── .gitignore
├── .babelrc
├── .github
    └── images
    │   ├── example-1.png
    │   └── example-2.png
├── .eslintrc
├── themes
    └── default.css
├── package.json
├── README.md
├── popover.js
└── example.html


/LICENSE:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .vscode/
3 | npm-debug.log
4 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["es2015", { "modules": false }],
4 |     "stage-0"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/.github/images/example-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klummy/VueLinkPopover/HEAD/.github/images/example-1.png


--------------------------------------------------------------------------------
/.github/images/example-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/klummy/VueLinkPopover/HEAD/.github/images/example-2.png


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "standard",
3 |   "parser": "babel-eslint",
4 |   "rules": {
5 |     "strict": 0
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/themes/default.css:
--------------------------------------------------------------------------------
 1 | .v-popover-enter-active {
 2 |   transition: all .3s ease-in-out;
 3 | }
 4 | 
 5 | .v-popover-leave-active {
 6 |   transition: all .3s ease-in-out;
 7 | }
 8 | 
 9 | .v-popover-enter,
10 | .v-popover-leave-active {
11 |   opacity: 0;
12 |   transform: translateX(10px);
13 | }
14 | 
15 | .v-popover {
16 |   /*v-popover container*/
17 |   display: inline-block;
18 |   position: relative;
19 | }
20 | 
21 | .v-popover__content {
22 |   /*Style of hidden v-popover content*/
23 |   background: #fff;
24 |   border: 1px solid #eee;
25 |   box-shadow: 0 6px 6px rgba(16, 16, 16, 0.04), 0 6px 6px rgba(0, 0, 0, 0.05);
26 |   max-width: 70vw;
27 |   padding: 10px;
28 |   position: absolute;
29 |   width: 300px;
30 |   z-index: 999;
31 | }
32 | 
33 | .v-popover__content:hover {
34 |   /*background-color: red;*/
35 | }
36 | 
37 | .v-popover__text {
38 |   /*Initially shown text*/
39 | }
40 | 
41 | .v-popover__text:hover {
42 | 
43 | }
44 | 
45 | .v-popover__close-icon {
46 |   cursor: pointer;
47 |   display: inline-block;
48 |   fill: #000;
49 |   fill-opacity: .3;
50 |   height: .6rem;
51 |   position: absolute;
52 |   right: 10px;
53 |   stroke-width: 0;
54 |   stroke: currentColor;
55 |   width: .6em;
56 | }
57 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-link-popover",
 3 |   "version": "2.0.2",
 4 |   "description": "Customisable, flexible, easy to use popover contents for Vue.js similar to that used by Facebook & Twitter",
 5 |   "main": "popover.js",
 6 |   "scripts": {
 7 |     "start": "node_modules/browser-sync/bin/browser-sync.js start -s '.' reload -f '*.html,**/*.css,*.js'",
 8 |     "build": "",
 9 |     "test": "echo \"Error: no test specified\" && exit 1"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/klummy/VueLinkpopover.git"
14 |   },
15 |   "keywords": [
16 |     "Vue",
17 |     "popover",
18 |     "vue",
19 |     "plugins"
20 |   ],
21 |   "author": "Yekeen Ajeigbe <aayekeen@gmail.com>",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/klummy/VueLinkpopover/issues"
25 |   },
26 |   "homepage": "https://github.com/klummy/VueLinkpopover#readme",
27 |   "devDependencies": {
28 |     "babel-core": "^6.24.0",
29 |     "babel-eslint": "^8.0.2",
30 |     "babel-loader": "^7.1.2",
31 |     "babel-preset-es2015": "^6.22.0",
32 |     "babel-preset-stage-0": "^6.22.0",
33 |     "browser-sync": "^2.18.7",
34 |     "eslint": "^4.11.0",
35 |     "eslint-config-standard": "^10.2.1",
36 |     "eslint-loader": "^1.6.1",
37 |     "eslint-plugin-promise": "^3.4.0",
38 |     "eslint-plugin-standard": "^3.0.1"
39 |   },
40 |   "dependencies": {}
41 | }
42 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # VueLinkPopover
 2 | Customisable, flexible, easy to use popover contents for Vue.js similar to that used by Facebook & Twitter
 3 | 
 4 | ## [Deprecated] This module has been deprecated
 5 | 
 6 | *Inspired by [this](https://medium.com/@jilsonthomas/reusable-user-link-popover-component-using-vue-js-d37e525a8d27#.mxkgxtwj3)*
 7 | 
 8 | [Demo](https://klummy.github.io/VueLinkPopover/example.html)
 9 | 
10 | ## Installation
11 | In a Vue.js project, install with ```npm install --save vue-link-popover```.
12 | 
13 | For browser based environments, download popover.js or use it from a CDN:
14 | ```<script src="https://unpkg.com/vue-link-popover@2.0.0/popover.js"><script>```
15 | 
16 | Optionally but recommended, include the default stylings by either copying & tweaking the styles in themes/default.css or by including it via CDN - ```<link rel="stylesheet" href="https://unpkg.com/vue-link-popover@2.0.0/themes/default.css" />```
17 | 
18 | ## Usage
19 | Usage
20 | 
21 | For browser environments, the plugin is automatically initialized with the default options so it be used immediately with the ```<link-popover>``` tag.
22 | 
23 | Import it as a component:
24 | ```javascript
25 |   // Import style
26 |   import 'vue-link-popover/themes/default.css'
27 |   import LinkPopover from 'vue-link-popover'
28 | 
29 |   // Register component
30 |   components: {
31 |   LinkPopover
32 |   }
33 | ```
34 | 
35 | To use it globally, import it from the package & then register it:
36 | 
37 | ```javascript
38 |   import Vue from 'vue'
39 | 
40 |   import 'vue-link-popover/themes/default.css'
41 |   import LinkPopover from 'vue-link-popover'
42 | 
43 |   Vue.component('link-popover', LinkPopover)
44 | ```
45 | 
46 | ### Available Options
47 | - **click**: By default, the popover shows when hovered upon, however, you can change this behaviour to open the popup only when the click parameter is passed. Unlike the other options, this is used right on the popup container. For example:
48 | ```html
49 |   <link-popover click="true">
50 |     Opens the popover click.
51 |     <div slot="content">Opened on click</div>
52 |   </link-popover>
53 | ```
54 | 
55 | - **transitionName**: This is the name of the transition to be used. See the VueJS animation guide for how to use animations in Vue. You can use this by including it in the options when initializing the plugin. ```Vue.use(LinkPopover, { transitionName: 'myAwesomeTransitionName' })```
56 | 
57 | - **theme**: This is the root class of the popup which you can use to easily customise the popup. You can use this by including it in the options when initializing the plugin - ```Vue.use(LinkPopover, { theme: 'my-awesome-theme' })```. The theme can then be used like this when styling:
58 | 
59 | ```scss
60 |   .my-awesome-theme.popover {
61 |     // Popup container
62 | 
63 |     &__text {
64 |       // Visible text shown in browser
65 |     }
66 | 
67 |     &__content {
68 |       // Hidden popover content container                    }
69 |     }
70 |   }
71 | 
72 | ```
73 | 
74 | 
75 | 
76 | ## TODO
77 | 
78 | - Indicator arrow
79 | -
80 | 


--------------------------------------------------------------------------------
/popover.js:
--------------------------------------------------------------------------------
  1 | (function () {
  2 |   const methods = {
  3 |     hoverIn () {
  4 |       if (!this.click) {
  5 |         let vm = this
  6 |         this.timer = setTimeout(function () {
  7 |           vm.showPopover()
  8 |         }, 100)
  9 |       }
 10 |     },
 11 | 
 12 |     hoverOut () {
 13 |       if (!this.click) {
 14 |         let vm = this
 15 |         clearTimeout(vm.timer)
 16 |         this.timer = setTimeout(function () {
 17 |           if (!vm.isInInfo) {
 18 |             vm.closePopover()
 19 |           }
 20 |         }, 200)
 21 |       }
 22 |     },
 23 | 
 24 |     hoverInfo () {
 25 |       this.isInInfo = true
 26 |     },
 27 | 
 28 |     hoverOutInfo () {
 29 |       this.isInInfo = false
 30 |       this.hoverOut()
 31 |     },
 32 | 
 33 |     showPopover () {
 34 |       this.showpopover = true
 35 |     },
 36 | 
 37 |     closePopover () {
 38 |       this.showpopover = false
 39 |     },
 40 | 
 41 |     clickToOpen () {
 42 |       if (this.click) {
 43 |         this.showpopover = true
 44 |       }
 45 |     }
 46 |   }
 47 | 
 48 |   const template = `
 49 |     <div class="v-popover" :class="this.$popoverOpts ? this.$popoverOpts.theme : ''">
 50 |       <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol id="icon-cross" viewBox="0 0 32 32"><title>cross</title><path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z"></path></symbol></defs></svg>
 51 | 
 52 | 
 53 |       <a href
 54 |         class="v-popover__text"
 55 |         v-on:click.prevent="clickToOpen"
 56 |         v-on:mouseover="hoverIn"
 57 |         v-on:mouseleave="hoverOut"
 58 |       >
 59 |         <slot></slot>
 60 |       </a>
 61 |       <transition :name="this.$popoverOpts ? this.$popoverOpts.transitionName : 'v-popover'">
 62 |         <div class="v-popover__content"
 63 |           v-if="showpopover"
 64 |           v-on:mouseover="hoverInfo"
 65 |           v-on:mouseout="hoverOutInfo"
 66 |           v-on:click.prevent="hoverInfo"
 67 |         >
 68 |           <svg class="v-popover__close-icon" @click.prevent="closePopover">
 69 |             <use xlink:href="#icon-cross"></use>
 70 |           </svg>
 71 |           <slot name="content"></slot>
 72 |         </div>
 73 |       </transition>
 74 |     </div>
 75 |   `
 76 | 
 77 |   const Component = {
 78 |     name: 'link-popover',
 79 |     data () {
 80 |       return {
 81 |         showpopover: false,
 82 |         isInInfo: false
 83 |       }
 84 |     },
 85 |     methods,
 86 |     props: ['click'],
 87 |     template
 88 |   }
 89 | 
 90 |   let Plugin = {}
 91 | 
 92 |   Plugin.install = function (Vue, options) {
 93 |     if (options) {
 94 |       Vue.prototype.$popoverOpts = options
 95 |     }
 96 |     Vue.component(Component.name, Component)
 97 |   }
 98 | 
 99 |   /* eslint-disable */
100 |   if (typeof exports === 'object') {
101 |     module.exports = Component
102 |   } else if (typeof define === 'function' && define.amd) {
103 |     define([], function () {
104 |       return Component
105 |     })
106 |   } else if (window.Vue) {
107 |     // Options object should take 'theme', transitionName, params
108 |     Vue.use(Plugin)
109 |   }
110 |   /* eslint-enable */
111 | })()
112 | 


--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 
  8 |   <title>Welcome to Vue</title>
  9 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
 10 |   <link rel="stylesheet" href="themes/default.css" />
 11 |   <script src="https://unpkg.com/vue/dist/vue.js"></script>
 12 |   <script src="popover.js"></script>
 13 | </head>
 14 | <body>
 15 |   <div id="app">
 16 |     <section class="hero is-medium is-light is-bold">
 17 |       <div class="hero-body">
 18 |         <div class="container">
 19 |           <h1 class="title">
 20 |             Vue Link Popover
 21 |           </h1>
 22 |           <h2 class="subtitle">
 23 |             Customisable, flexible, easy to use popover contents for Vue.js similar to that used by Facebook &amp; Twitter
 24 |           </h2>
 25 |         </div>
 26 |       </div>
 27 |     </section>
 28 | 
 29 |     <div class="container">
 30 | 
 31 |       <section class="section">
 32 |         <h2 class="title is-4">Demos</h2>
 33 | 
 34 |         <div class="content">
 35 |           <link-popover>
 36 |             <button class="button primary">Default Popup</button>
 37 |             <div slot="content">
 38 |               By default, the popup is shown when the trigger text/content is hovered upon
 39 |             </div>
 40 |           </link-popover>
 41 | 
 42 |           <link-popover click="true">
 43 |             <button class="button is-black">Click Me To Open Popup</button>
 44 |             <div slot="content">
 45 |               <h1>The Man James Bond</h1>
 46 |               <p>Royal Navy Commander James Bond, CMG, RNVR, is a fictional character created by British journalist and novelist Ian Fleming in 1953. He is the protagonist of the James Bond series of novels, films, comics and video games. Fleming wrote twelve Bond novels and two short story collections, although the last two books—The Man with the Golden Gun and Octopussy and The Living Daylights—were published posthumously.</p>
 47 |               <button>Read More</button>
 48 |             </div>
 49 |           </link-popover>
 50 |         </div>
 51 |       </section>
 52 | 
 53 |       <section class="section">
 54 |         <div class="heading">
 55 |           <h2 class="title is-4">Installation</h2>
 56 |           <h3 class="subtitle is-6">Get up and running with Vue-Link-Popover</h3>
 57 |         </div>
 58 | 
 59 |         <div class="content">
 60 |           <p>In a Vue.js project, install with <code>npm install --save vue-link-popover</code>.</p>
 61 | 
 62 |           <p>
 63 |             For browser based environments, download <a href="#">popover.js</a> or use it from a CDN:
 64 |             <br />
 65 |             <code>&lt;script src="https://unpkg.com/vue-link-popover/popover.js"&gt;&lt;script&gt;</code>
 66 |           </p>
 67 | 
 68 |           <p>
 69 |             Optionally but recommended, include the default stylings by either copying &amp; tweaking the styles in <a href="#">themes/default.css</a> or by including it via CDN - <code>&lt;link rel="stylesheet" href="https://unpkg.com/vue-link-popover/themes/default.css" /&gt;</code>
 70 |           </p>
 71 |         </div>
 72 |       </section>
 73 | 
 74 |       <section class="section">
 75 |         <h2 class="title is-4">Usage</h2>
 76 |         <div class="content">
 77 |           <p>
 78 |             For browser environments, the plugin is automatically initialized with the default options so it can be used immediately with the <code>&lt;link-popover&gt;</code> tag.
 79 |           </p>
 80 | 
 81 |           <p>
 82 |             Import it as a component:
 83 |             <pre>
 84 |               <code>
 85 |                 import LinkPopover from 'vue-link-popover'<br />
 86 |                 // Register component
 87 |                 components: {
 88 |                   LinkPopover
 89 |                 }
 90 |               </code>
 91 |             </pre>
 92 | 
 93 |             To use it globally, import it from the package &amp; then register it:
 94 |             <pre>
 95 |               <code>
 96 |                 import Vue from 'vue' <br />
 97 |                 import 'vue-link-popover/themes/default.css' <br />
 98 |                 import LinkPopover from 'vue-link-popover'<br />
 99 |                 Vue.component('link-popover', LinkPopover)
100 |               </code>
101 |             </pre>
102 | 
103 |             Importing it globally allows the passing of customisation options such as transitionName &amp; custom themes. For example: <code>Vue.use(LinkPopover, { theme: 'snow-white', transitionName: 'my-awesome-transition'})</code>
104 |           </p>
105 | 
106 |           <h3 class="title is-6">Available Options</h3>
107 |           <ul>
108 |             <li><strong>click</strong> By default, the popover shows when hovered upon, however, you can change this behaviour to open the popup only when the click parameter is passed. Unlike the other options, this is used right on the popup container. For example, <code><link-popover click="true">Opens the popover click. <div slot="content">Opened on click</div></link-popover></code></a></li>
109 |             <li><strong>transitionName;</strong> This is the name of the transition to be used. <a href="https://vuejs.org/v2/guide/transitions.html">See the VueJS animation guide for how to use animations in Vue</a></li>
110 |             <li><strong>theme: </strong>This is the root class of the popup which you can use to easily customise the popup. For example, passing a theme variable of 'snow-white' can be used like this when styling:
111 |               <br />
112 |               <pre>
113 |                 <code>
114 |                   .snow-white.popover {
115 |                     // Popup container
116 | 
117 |                     &__text {
118 |                       // Visible text shown in browser
119 |                     }
120 | 
121 |                     &__content {
122 |                       // Hidden popover content container                    }
123 |                   }
124 | 
125 |                 </code>
126 |               </pre>
127 |             </li>
128 |             <!-- <li><strong>theme: </strong></li> -->
129 |           </ul>
130 | 
131 | 
132 |         </div>
133 |       </section>
134 |     </div>
135 |   </div>
136 | 
137 |   <script>
138 |     new Vue({
139 |       el: '#app',
140 |       data: {
141 |       },
142 |       methods: {
143 |         humanizeURL: function (url) {
144 |           return url
145 |             .replace(/^https?:\/\//, '')
146 |             .replace(/\/$/, '')
147 |         }
148 |       }
149 |     })
150 |   </script>
151 | </body>
152 | </html>
153 | 


--------------------------------------------------------------------------------