├── .eslintrc ├── .gitignore ├── .npmignore ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── README └── vue-good-links.gif ├── bili.config.js ├── dev ├── App.vue ├── index.html ├── main.js └── styles │ └── simplegrid.scss ├── dist ├── vue-good-links.cjs.js ├── vue-good-links.css ├── vue-good-links.es.js ├── vue-good-links.js ├── vue-good-links.min.css ├── vue-good-links.min.css.map ├── vue-good-links.min.js └── vue-good-links.min.js.map ├── docs ├── index.html ├── main.1218fcc6.js ├── main.1218fcc6.js.map ├── main.889cb514.css ├── vendors~main.e734ecf8.css ├── vendors~main.e734ecf8.js └── vendors~main.e734ecf8.js.map ├── package-lock.json ├── package.json └── src ├── index.js ├── vgl-ghost └── vgl-ghost.vue ├── vgl-rollup └── vgl-rollup.vue ├── vgl-rotate └── vgl-rotate.vue ├── vgl-slidein └── vgl-slidein.vue ├── vgl-swing └── vgl-swing.vue └── vgl-wave └── vgl-wave.vue /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "airbnb", 4 | "plugin:vue/base" 5 | ], 6 | "rules": { 7 | "func-names": ["error", "never"], 8 | "no-shadow": "off", 9 | "no-unused-vars": "off", 10 | "consistent-return": "off", 11 | "no-param-reassign": "off", 12 | "no-plusplus": "off", 13 | "import/no-unresolved": "off", 14 | "import/extensions": "off", 15 | "no-continue": "off", 16 | "comma-dangle": ["error", { 17 | "arrays": "always-multiline", 18 | "objects": "always-multiline", 19 | "imports": "always-multiline", 20 | "exports": "always-multiline", 21 | "functions": "never" 22 | }] 23 | }, 24 | "globals": { 25 | "_": false, 26 | "moment": false 27 | } 28 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules/ 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | .DS_Store 3 | node_modules/ 4 | *.log 5 | dev 6 | src 7 | .babelrc -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at anand.cooper@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-good-links 2 | 3 | 4 | [![npm](https://img.shields.io/github/package-json/v/xaksis/vue-good-links.svg?style=flat-square)](https://github.com/xaksis/vue-good-links/releases) 5 | [![npm](https://img.shields.io/github/license/xaksis/vue-good-links.svg?style=flat-square)](https://github.com/xaksis/vue-good-links/blob/master/LICENSE) 6 | 7 | 8 | An easy to use link/text hover effect library for VueJS 9 | ![Basic Screenshot](README/vue-good-links.gif) 10 | 11 | ## Live Demo 12 | 13 | [vue-good-links Demo](https://xaksis.github.io/vue-good-links/) 14 | 15 | If you endup using and liking vue-good-links, consider spreading the joy :) 16 | 17 | Buy Me A Coffee 18 | 19 | ## Follow the project progress live 20 | [Vue-good-links Project](https://timerbit.com/#/public/29XFY0N7Rw9uCBsujiTM) 21 | 22 | ### Installing 23 | 24 | Install with npm: 25 | ``` 26 | npm install --save vue-good-links 27 | ``` 28 | 29 | ### Usage 30 | 31 | import directly into components: 32 | 33 | ```vue 34 | 39 | 40 | 49 | ``` 50 | 51 | or use globally 52 | ```js 53 | import VueGoodLinks from 'vue-good-links'; 54 | 55 | // import the styles 56 | import 'vue-good-links/dist/vue-good-links.css'; 57 | 58 | Vue.use(VueGoodLinks); 59 | ``` 60 | 61 | ### List of Effects 62 | 63 | - VglWave 64 | - VglRollup 65 | - VglSlidein 66 | - VglGhost 67 | - VglSwing 68 | - VglRotate 69 | 70 | ### Component Options 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 88 | 89 | 90 | 91 | 92 | 97 | 98 | 99 |
OptionDescriptionType, Example
originalSpanStylecss styles for standing text span. (applies to all but VglWave) 84 | 
 85 | <vgl-swing :originalSpanStyle="{color: 'blue'}" text="fancy!"></vgl-swing>
 86 |
87 |
hoverSpanStylecss styles for hovering text span. (applies to all but VglWave) 93 | 
 94 | <vgl-swing :hoverSpanStyle="{color: 'blue'}" text="fancy!"></vgl-swing>
 95 |
96 |
100 | 101 | ## License 102 | 103 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details 104 | 105 | >inspiration for effects taken from [Tympanus](https://tympanus.net/Development/CreativeLinkEffects/) 106 | -------------------------------------------------------------------------------- /README/vue-good-links.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xaksis/vue-good-links/ef9e78d9e97daa65452311e7123823ad40737cb9/README/vue-good-links.gif -------------------------------------------------------------------------------- /bili.config.js: -------------------------------------------------------------------------------- 1 | const { version } = require('./package'); 2 | 3 | const banner = `/** 4 | * vue-good-links v${version} 5 | * (c) 2018-present xaksis 6 | * https://github.com/xaksis/vue-good-links 7 | * Released under the MIT License. 8 | */ 9 | `; 10 | 11 | module.exports = { 12 | name: 'vue-good-links', 13 | banner, 14 | format: [ 15 | 'cjs', 16 | 'es', 17 | 'umd', 18 | 'umd-min', 19 | ], 20 | compress: 'umd', 21 | plugins: ['vue'], 22 | vue: { 23 | css: true, 24 | }, 25 | buble: { 26 | transforms: { 27 | generator: true, 28 | dangerousForOf: true, 29 | }, 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /dev/App.vue: -------------------------------------------------------------------------------- 1 | 81 | 82 | 115 | 116 | 117 | 157 | 158 | -------------------------------------------------------------------------------- /dev/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-good-links 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /dev/main.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-extraneous-dependencies 2 | import Vue from 'vue'; 3 | import App from './App'; 4 | // import VueGoodLinks from '../dist/vue-good-links.es'; 5 | import VueGoodLinks from '../src'; 6 | 7 | Vue.use(VueGoodLinks); 8 | 9 | Vue.config.productionTip = false; 10 | 11 | /* eslint-disable no-new */ 12 | new Vue({ 13 | el: '#app', 14 | render: h => h(App), 15 | }); 16 | -------------------------------------------------------------------------------- /dev/styles/simplegrid.scss: -------------------------------------------------------------------------------- 1 | // SIMPLE GRID - SASS/SCSS 2 | 3 | @import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic); 4 | 5 | // fonts 6 | $font-family: 'Lato', Helvetica, sans-serif; 7 | $font-weight-light: 300; 8 | $font-weight-regular: 400; 9 | $font-weight-heavy: 700; 10 | $font-height: 1.5; 11 | 12 | // colors 13 | $dark-grey: #333447; 14 | $dark-gray: #333447; // for the Americans 15 | 16 | // universal 17 | 18 | html, 19 | body { 20 | height: 100%; 21 | width: 100%; 22 | margin: 0; 23 | padding: 0; 24 | left: 0; 25 | top: 0; 26 | font-size: 100%; 27 | } 28 | 29 | * { 30 | font-family: $font-family; 31 | color: $dark-grey; 32 | line-height: $font-height; 33 | } 34 | 35 | // typography 36 | 37 | h1 { 38 | font-size: 2.5rem; 39 | } 40 | 41 | h2 { 42 | font-size: 2rem; 43 | } 44 | 45 | h3 { 46 | font-size: 1.375rem; 47 | } 48 | 49 | h4 { 50 | font-size: 1.125rem; 51 | } 52 | 53 | h5 { 54 | font-size: 1rem; 55 | } 56 | 57 | h6 { 58 | font-size: 0.875rem; 59 | } 60 | 61 | p { 62 | font-size: 1.125rem; 63 | font-weight: 200; 64 | // line-height: 1.8; 65 | } 66 | 67 | .font-light { 68 | font-weight: $font-weight-light; 69 | } 70 | 71 | .font-regular { 72 | font-weight: $font-weight-regular; 73 | } 74 | 75 | .font-heavy { 76 | font-weight: $font-weight-heavy; 77 | } 78 | 79 | // utility 80 | 81 | .left { 82 | text-align: left; 83 | } 84 | 85 | .right { 86 | text-align: right; 87 | } 88 | 89 | .center { 90 | text-align: center; 91 | margin-left: auto; 92 | margin-right: auto; 93 | } 94 | 95 | .justify { 96 | text-align: justify; 97 | } 98 | 99 | .hidden-sm { 100 | display: none; 101 | } 102 | 103 | // grid 104 | 105 | $width: 96%; 106 | $gutter: 4%; 107 | $breakpoint-small: 33.75em; // 540px 108 | $breakpoint-med: 45em; // 720px 109 | $breakpoint-large: 60em; // 960px 110 | 111 | .container { 112 | width: 90%; 113 | margin-left: auto; 114 | margin-right: auto; 115 | 116 | @media only screen and (min-width: $breakpoint-small) { 117 | width: 80%; 118 | } 119 | 120 | @media only screen and (min-width: $breakpoint-large) { 121 | width: 75%; 122 | max-width: 60rem; 123 | } 124 | } 125 | 126 | .row { 127 | position: relative; 128 | width: 100%; 129 | } 130 | 131 | .row [class^="col"] { 132 | float: left; 133 | margin: 0.5rem 2%; 134 | min-height: 0.125rem; 135 | } 136 | 137 | .row::after { 138 | content: ""; 139 | display: table; 140 | clear: both; 141 | } 142 | 143 | .col-1, 144 | .col-2, 145 | .col-3, 146 | .col-4, 147 | .col-5, 148 | .col-6, 149 | .col-7, 150 | .col-8, 151 | .col-9, 152 | .col-10, 153 | .col-11, 154 | .col-12 { 155 | width: $width; 156 | } 157 | 158 | .col-1-sm { width:($width / 12) - ($gutter * 11 / 12); } 159 | .col-2-sm { width: ($width / 6) - ($gutter * 10 / 12); } 160 | .col-3-sm { width: ($width / 4) - ($gutter * 9 / 12); } 161 | .col-4-sm { width: ($width / 3) - ($gutter * 8 / 12); } 162 | .col-5-sm { width: ($width / (12 / 5)) - ($gutter * 7 / 12); } 163 | .col-6-sm { width: ($width / 2) - ($gutter * 6 / 12); } 164 | .col-7-sm { width: ($width / (12 / 7)) - ($gutter * 5 / 12); } 165 | .col-8-sm { width: ($width / (12 / 8)) - ($gutter * 4 / 12); } 166 | .col-9-sm { width: ($width / (12 / 9)) - ($gutter * 3 / 12); } 167 | .col-10-sm { width: ($width / (12 / 10)) - ($gutter * 2 / 12); } 168 | .col-11-sm { width: ($width / (12 / 11)) - ($gutter * 1 / 12); } 169 | .col-12-sm { width: $width; } 170 | 171 | @media only screen and (min-width: $breakpoint-med) { 172 | .col-1 { width:($width / 12) - ($gutter * 11 / 12); } 173 | .col-2 { width: ($width / 6) - ($gutter * 10 / 12); } 174 | .col-3 { width: ($width / 4) - ($gutter * 9 / 12); } 175 | .col-4 { width: ($width / 3) - ($gutter * 8 / 12); } 176 | .col-5 { width: ($width / (12 / 5)) - ($gutter * 7 / 12); } 177 | .col-6 { width: ($width / 2) - ($gutter * 6 / 12); } 178 | .col-7 { width: ($width / (12 / 7)) - ($gutter * 5 / 12); } 179 | .col-8 { width: ($width / (12 / 8)) - ($gutter * 4 / 12); } 180 | .col-9 { width: ($width / (12 / 9)) - ($gutter * 3 / 12); } 181 | .col-10 { width: ($width / (12 / 10)) - ($gutter * 2 / 12); } 182 | .col-11 { width: ($width / (12 / 11)) - ($gutter * 1 / 12); } 183 | .col-12 { width: $width; } 184 | 185 | .hidden-sm { 186 | display: block; 187 | } 188 | } -------------------------------------------------------------------------------- /dist/vue-good-links.cjs.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vue-good-links v0.0.3 3 | * (c) 2018-present xaksis 4 | * https://github.com/xaksis/vue-good-links 5 | * Released under the MIT License. 6 | */ 7 | 8 | 'use strict'; 9 | 10 | Object.defineProperty(exports, '__esModule', { value: true }); 11 | 12 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } 13 | 14 | var debounce = _interopDefault(require('lodash.debounce')); 15 | 16 | function _defineProperty(obj, key, value) { 17 | if (key in obj) { 18 | Object.defineProperty(obj, key, { 19 | value: value, 20 | enumerable: true, 21 | configurable: true, 22 | writable: true 23 | }); 24 | } else { 25 | obj[key] = value; 26 | } 27 | 28 | return obj; 29 | } 30 | 31 | var VglWave = { 32 | render: function render() { 33 | var _vm = this; 34 | 35 | var _h = _vm.$createElement; 36 | 37 | var _c = _vm._self._c || _h; 38 | 39 | return _c('span', _vm._g({ 40 | staticClass: "vgl-wave-wrap", 41 | on: { 42 | "mouseover": _vm.startAnimating, 43 | "mouseleave": _vm.stopAnimating 44 | } 45 | }, _vm.$listeners), _vm._l(_vm.letters, function (l, idx) { 46 | return _c('span', { 47 | key: idx, 48 | staticClass: "vgl-lettr", 49 | class: { 50 | 'vgl-active': _vm.activeIndex === idx 51 | } 52 | }, [_c('span', { 53 | staticClass: "vgl-lettr-inner" 54 | }, [_vm._v(_vm._s(l))]), _c('span', { 55 | staticStyle: { 56 | "opacity": "0" 57 | } 58 | }, [_vm._v(_vm._s(l))])]); 59 | })); 60 | }, 61 | staticRenderFns: [], 62 | name: 'vgl-wave', 63 | props: { 64 | text: { 65 | type: String, 66 | default: 'Sample Text' 67 | } 68 | }, 69 | data: function data() { 70 | return { 71 | activeIndex: -1, 72 | timeouts: [], 73 | intervals: [] 74 | }; 75 | }, 76 | computed: { 77 | letters: function letters() { 78 | return this.text ? this.text.split('') : ''; 79 | } 80 | }, 81 | methods: { 82 | startAnimating: debounce(function () { 83 | var _this = this; 84 | 85 | var delay = 150; // if animation is already going, we don't need to do anything 86 | 87 | if (this.activeIndex > -1) return; 88 | 89 | var _loop = function _loop(i) { 90 | _this.timeouts.push(setTimeout(function () { 91 | // start animating right away 92 | _this.activeIndex = i; // repeat animation for as long as I'm hovering 93 | 94 | _this.intervals.push(setInterval(function () { 95 | _this.activeIndex = i; 96 | }, _this.letters.length * delay)); 97 | }, i * delay)); 98 | }; 99 | 100 | for (var i = 0; i < this.letters.length; i++) { 101 | _loop(i); 102 | } 103 | }, 150), 104 | stopAnimating: debounce(function () { 105 | for (var i = 0; i < this.timeouts.length; i++) { 106 | clearTimeout(this.timeouts[i]); 107 | clearInterval(this.intervals[i]); 108 | } 109 | 110 | this.timeouts = []; 111 | this.intervals = []; 112 | this.activeIndex = -1; 113 | }, 150) 114 | }, 115 | mounted: function mounted() {}, 116 | components: {} 117 | }; 118 | 119 | var VglRollup = { 120 | render: function render() { 121 | var _vm = this; 122 | 123 | var _h = _vm.$createElement; 124 | 125 | var _c = _vm._self._c || _h; 126 | 127 | return _c('span', _vm._g({ 128 | staticClass: "vgl-rollup-wrap", 129 | style: { 130 | height: _vm.spanHeight 131 | }, 132 | on: { 133 | "mouseover": _vm.startAnimating, 134 | "mouseleave": _vm.stopAnimating 135 | } 136 | }, _vm.$listeners), [_c('span', { 137 | staticClass: "vgl-rollup-original", 138 | style: _vm.internalOriginalSpanStyle 139 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 140 | staticClass: "vgl-rollup-bold", 141 | style: _vm.internalBoldSpanStyle 142 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 143 | ref: "originalText", 144 | staticStyle: { 145 | "opacity": "0", 146 | "font-weight": "bold" 147 | } 148 | }, [_vm._v(_vm._s(_vm.text))])]); 149 | }, 150 | staticRenderFns: [], 151 | name: 'vgl-rollup', 152 | props: { 153 | text: { 154 | type: String, 155 | default: 'Sample Text' 156 | }, 157 | hoverSpanStyle: { 158 | type: Object, 159 | // eslint-disable-next-line 160 | default: function _default() { 161 | return {}; 162 | } 163 | }, 164 | originalSpanStyle: { 165 | type: Object, 166 | // eslint-disable-next-line 167 | default: function _default() { 168 | return {}; 169 | } 170 | } 171 | }, 172 | data: function data() { 173 | return { 174 | active: false, 175 | spanHeight: 0 176 | }; 177 | }, 178 | computed: { 179 | internalOriginalSpanStyle: function internalOriginalSpanStyle() { 180 | return Object.assign({}, this.originalSpanStyle, { 181 | top: this.active ? "-".concat(this.spanHeight) : 0 182 | }); 183 | }, 184 | internalBoldSpanStyle: function internalBoldSpanStyle() { 185 | return Object.assign({}, this.hoverSpanStyle, { 186 | top: this.active ? 0 : "".concat(this.spanHeight) 187 | }); 188 | } 189 | }, 190 | methods: { 191 | startAnimating: debounce(function () { 192 | this.active = true; 193 | }, 150), 194 | stopAnimating: debounce(function () { 195 | this.active = false; 196 | }, 150), 197 | init: function init() { 198 | var originalSpan = this.$refs.originalText; 199 | var spanStyle = window.getComputedStyle(originalSpan, null); // console.log(spanStyle); 200 | 201 | this.spanHeight = spanStyle.lineHeight; // const num = parseInt(spanHeight.substring(0, spanHeight.length - 2), 10) * 1.2; 202 | // this.spanHeight = `${num}px`; 203 | } 204 | }, 205 | mounted: function mounted() { 206 | this.init(); 207 | }, 208 | components: {} 209 | }; 210 | 211 | var VglSlidein = { 212 | render: function render() { 213 | var _vm = this; 214 | 215 | var _h = _vm.$createElement; 216 | 217 | var _c = _vm._self._c || _h; 218 | 219 | return _c('span', _vm._g({ 220 | staticClass: "vgl-slidein-wrap", 221 | style: { 222 | width: _vm.spanWidth 223 | }, 224 | on: { 225 | "mouseover": _vm.startAnimating, 226 | "mouseleave": _vm.stopAnimating 227 | } 228 | }, _vm.$listeners), [_c('span', { 229 | ref: "mainText", 230 | staticClass: "vgl-slidein-original", 231 | style: _vm.internalOriginalSpanStyle 232 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 233 | staticClass: "vgl-slidein-bold", 234 | style: _vm.internalBoldSpanStyle 235 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 236 | ref: "originalText", 237 | staticStyle: { 238 | "opacity": "0" 239 | } 240 | }, [_vm._v(_vm._s(_vm.text))])]); 241 | }, 242 | staticRenderFns: [], 243 | name: 'vgl-slidein', 244 | props: { 245 | text: { 246 | type: String, 247 | default: 'Sample Text' 248 | }, 249 | hoverSpanStyle: { 250 | type: Object, 251 | // eslint-disable-next-line 252 | default: function _default() { 253 | return {}; 254 | } 255 | }, 256 | originalSpanStyle: { 257 | type: Object, 258 | // eslint-disable-next-line 259 | default: function _default() { 260 | return {}; 261 | } 262 | } 263 | }, 264 | data: function data() { 265 | return { 266 | active: false, 267 | spanWidth: 0 268 | }; 269 | }, 270 | computed: { 271 | internalOriginalSpanStyle: function internalOriginalSpanStyle() { 272 | return Object.assign({ 273 | padding: '0px 5px' 274 | }, this.originalSpanStyle, { 275 | left: this.active ? "".concat(this.spanWidth) : 0 276 | }); 277 | }, 278 | internalBoldSpanStyle: function internalBoldSpanStyle() { 279 | return Object.assign({ 280 | backgroundColor: 'black', 281 | color: 'white', 282 | padding: '0px 5px' 283 | }, this.hoverSpanStyle, { 284 | left: this.active ? 0 : "-".concat(this.spanWidth) 285 | }); 286 | } 287 | }, 288 | methods: { 289 | startAnimating: debounce(function () { 290 | this.active = true; 291 | }, 150), 292 | stopAnimating: debounce(function () { 293 | this.active = false; 294 | }, 150), 295 | init: function init() { 296 | // const horizontalPadding = 5; 297 | var originalSpan = this.$refs.mainText; 298 | this.spanWidth = "".concat(originalSpan.offsetWidth, "px"); 299 | } 300 | }, 301 | mounted: function mounted() { 302 | this.init(); 303 | }, 304 | components: {} 305 | }; 306 | 307 | var VglGhost = { 308 | render: function render() { 309 | var _vm = this; 310 | 311 | var _h = _vm.$createElement; 312 | 313 | var _c = _vm._self._c || _h; 314 | 315 | return _c('span', _vm._g({ 316 | staticClass: "vgl-ghost-wrap", 317 | on: { 318 | "mouseover": _vm.startAnimating, 319 | "mouseleave": _vm.stopAnimating 320 | } 321 | }, _vm.$listeners), [_c('span', { 322 | staticClass: "vgl-ghost-original", 323 | staticStyle: {} 324 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 325 | staticClass: "vgl-ghost-bold", 326 | class: { 327 | 'vgl-active': _vm.active 328 | }, 329 | staticStyle: {} 330 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 331 | ref: "originalText", 332 | staticStyle: { 333 | "opacity": "0" 334 | } 335 | }, [_vm._v(_vm._s(_vm.text))])]); 336 | }, 337 | staticRenderFns: [], 338 | name: 'vgl-ghost', 339 | props: { 340 | text: { 341 | type: String, 342 | default: 'Sample Text' 343 | }, 344 | hoverSpanStyle: { 345 | type: Object, 346 | // eslint-disable-next-line 347 | default: function _default() { 348 | return {}; 349 | } 350 | }, 351 | originalSpanStyle: { 352 | type: Object, 353 | // eslint-disable-next-line 354 | default: function _default() { 355 | return {}; 356 | } 357 | } 358 | }, 359 | data: function data() { 360 | return { 361 | active: false, 362 | spanWidth: 0 363 | }; 364 | }, 365 | computed: {}, 366 | methods: { 367 | startAnimating: debounce(function () { 368 | this.active = true; 369 | }, 150), 370 | stopAnimating: debounce(function () { 371 | this.active = false; 372 | }, 150), 373 | init: function init() { 374 | var horizontalPadding = 5; 375 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth); 376 | 377 | this.spanWidth = "".concat(originalSpan.offsetWidth + horizontalPadding * 2, "px"); 378 | } 379 | }, 380 | mounted: function mounted() {}, 381 | components: {} 382 | }; 383 | 384 | var VglSwing = { 385 | render: function render() { 386 | var _vm = this; 387 | 388 | var _h = _vm.$createElement; 389 | 390 | var _c = _vm._self._c || _h; 391 | 392 | return _c('span', _vm._g({ 393 | staticClass: "vgl-swing-wrap", 394 | class: { 395 | 'vgl-active': _vm.active 396 | }, 397 | on: { 398 | "mouseover": _vm.startAnimating, 399 | "mouseleave": _vm.stopAnimating 400 | } 401 | }, _vm.$listeners), [_c('span', { 402 | staticClass: "vgl-swing-original", 403 | style: _vm.internalOriginalSpanStyle 404 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 405 | staticClass: "vgl-swing-bold", 406 | style: _vm.internalBoldSpanStyle 407 | }, [_vm._v(_vm._s(_vm.text))])]); 408 | }, 409 | staticRenderFns: [], 410 | name: 'vgl-swing', 411 | props: { 412 | text: { 413 | type: String, 414 | default: 'Sample Text' 415 | }, 416 | hoverSpanStyle: { 417 | type: Object, 418 | // eslint-disable-next-line 419 | default: function _default() { 420 | return {}; 421 | } 422 | }, 423 | originalSpanStyle: { 424 | type: Object, 425 | // eslint-disable-next-line 426 | default: function _default() { 427 | return {}; 428 | } 429 | } 430 | }, 431 | data: function data() { 432 | return { 433 | active: false, 434 | spanWidth: 0 435 | }; 436 | }, 437 | computed: { 438 | internalOriginalSpanStyle: function internalOriginalSpanStyle() { 439 | return Object.assign({ 440 | padding: '0px 5px' 441 | }, this.originalSpanStyle, { 442 | left: this.active ? "".concat(this.spanWidth) : 0 443 | }); 444 | }, 445 | internalBoldSpanStyle: function internalBoldSpanStyle() { 446 | return Object.assign({ 447 | padding: '0px 5px' 448 | }, this.hoverSpanStyle, { 449 | left: this.active ? 0 : "-".concat(this.spanWidth) 450 | }); 451 | } 452 | }, 453 | methods: { 454 | startAnimating: debounce(function () { 455 | this.active = true; 456 | }, 150), 457 | stopAnimating: debounce(function () { 458 | this.active = false; 459 | }, 150), 460 | init: function init() { 461 | var horizontalPadding = 5; 462 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth); 463 | 464 | this.spanWidth = "".concat(originalSpan.offsetWidth + horizontalPadding * 2, "px"); 465 | } 466 | }, 467 | mounted: function mounted() {}, 468 | components: {} 469 | }; 470 | 471 | var VglRotate = { 472 | render: function render() { 473 | var _vm = this; 474 | 475 | var _h = _vm.$createElement; 476 | 477 | var _c = _vm._self._c || _h; 478 | 479 | return _c('span', _vm._g({ 480 | staticClass: "vgl-rotate-wrap", 481 | class: { 482 | 'vgl-active': _vm.active 483 | }, 484 | on: { 485 | "mouseover": _vm.startAnimating, 486 | "mouseleave": _vm.stopAnimating 487 | } 488 | }, _vm.$listeners), [_c('span', { 489 | staticClass: "vgl-rotate-bold", 490 | style: _vm.internalBoldSpanStyle 491 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 492 | staticClass: "vgl-rotate-original", 493 | style: _vm.internalOriginalSpanStyle 494 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 495 | ref: "originalText", 496 | staticStyle: { 497 | "opacity": "0" 498 | }, 499 | style: _vm.internalBoldSpanStyle 500 | }, [_vm._v(_vm._s(_vm.text))])]); 501 | }, 502 | staticRenderFns: [], 503 | name: 'vgl-rotate', 504 | props: { 505 | text: { 506 | type: String, 507 | default: 'Sample Text' 508 | }, 509 | hoverSpanStyle: { 510 | type: Object, 511 | // eslint-disable-next-line 512 | default: function _default() { 513 | return {}; 514 | } 515 | }, 516 | originalSpanStyle: { 517 | type: Object, 518 | // eslint-disable-next-line 519 | default: function _default() { 520 | return {}; 521 | } 522 | } 523 | }, 524 | data: function data() { 525 | return { 526 | active: false, 527 | spanWidth: 0 528 | }; 529 | }, 530 | computed: { 531 | internalOriginalSpanStyle: function internalOriginalSpanStyle() { 532 | return Object.assign({ 533 | padding: '0px 5px' 534 | }, this.originalSpanStyle, { 535 | transformOrigin: "50% 50% -".concat(this.spanWidth) 536 | }); 537 | }, 538 | internalBoldSpanStyle: function internalBoldSpanStyle() { 539 | return Object.assign({ 540 | padding: '0px 5px' 541 | }, this.hoverSpanStyle, { 542 | transformOrigin: "50% 50% ".concat(this.spanWidth) 543 | }); 544 | } 545 | }, 546 | methods: { 547 | startAnimating: debounce(function () { 548 | this.active = true; 549 | }, 150), 550 | stopAnimating: debounce(function () { 551 | this.active = false; 552 | }, 150), 553 | init: function init() { 554 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth); 555 | 556 | this.spanWidth = "".concat(originalSpan.offsetWidth / 2, "px"); 557 | } 558 | }, 559 | mounted: function mounted() { 560 | this.init(); 561 | }, 562 | components: {} 563 | }; 564 | 565 | var _components; 566 | var components = (_components = {}, _defineProperty(_components, VglWave.name, VglWave), _defineProperty(_components, VglRollup.name, VglRollup), _defineProperty(_components, VglSlidein.name, VglSlidein), _defineProperty(_components, VglGhost.name, VglGhost), _defineProperty(_components, VglSwing.name, VglSwing), _defineProperty(_components, VglRotate.name, VglRotate), _components); 567 | 568 | function install(Vue, options) { 569 | if (options && options.components) { 570 | options.components.forEach(function (c) { 571 | return Vue.component(c.name, components[c.name]); 572 | }); 573 | } else { 574 | Object.keys(components).forEach(function (key) { 575 | Vue.component(key, components[key]); 576 | }); 577 | } 578 | } // Automatic installation if Vue has been added to the global scope. 579 | 580 | 581 | if (typeof window !== 'undefined' && window.Vue) { 582 | window.Vue.use({ 583 | install: install 584 | }); 585 | } 586 | 587 | var index = { 588 | install: install 589 | }; 590 | 591 | exports.default = index; 592 | exports.VglWave = VglWave; 593 | exports.VglRollup = VglRollup; 594 | exports.VglSlidein = VglSlidein; 595 | exports.VglGhost = VglGhost; 596 | exports.VglSwing = VglSwing; 597 | exports.VglRotate = VglRotate; 598 | -------------------------------------------------------------------------------- /dist/vue-good-links.css: -------------------------------------------------------------------------------- 1 | .vgl-wave-wrap { 2 | position: relative; } 3 | .vgl-wave-wrap .vgl-lettr { 4 | position: relative; } 5 | .vgl-wave-wrap .vgl-lettr .vgl-lettr-inner { 6 | position: absolute; 7 | transition: all 0.15s ease-out; 8 | bottom: 0; } 9 | .vgl-wave-wrap .vgl-lettr.vgl-active .vgl-lettr-inner { 10 | bottom: 20%; } 11 | 12 | .vgl-rollup-wrap { 13 | position: relative; 14 | display: inline-block; 15 | vertical-align: top; 16 | overflow: hidden; } 17 | .vgl-rollup-wrap .vgl-rollup-original, .vgl-rollup-wrap .vgl-rollup-bold { 18 | transition: all 0.3s; 19 | display: inline-block; 20 | position: absolute; } 21 | .vgl-rollup-wrap .vgl-rollup-bold { 22 | font-weight: bold; } 23 | 24 | .vgl-slidein-wrap { 25 | position: relative; 26 | display: inline-block; 27 | vertical-align: top; 28 | overflow: hidden; 29 | white-space: nowrap; } 30 | .vgl-slidein-wrap .vgl-slidein-original, .vgl-slidein-wrap .vgl-slidein-bold { 31 | transition: all 0.3s; 32 | display: inline-block; 33 | position: absolute; } 34 | 35 | .vgl-ghost-wrap { 36 | position: relative; 37 | display: inline-block; 38 | vertical-align: top; 39 | white-space: nowrap; } 40 | .vgl-ghost-wrap .vgl-ghost-original, .vgl-ghost-wrap .vgl-ghost-bold { 41 | transition: all 0.3s; 42 | display: inline-block; 43 | position: absolute; } 44 | .vgl-ghost-wrap .vgl-ghost-original { 45 | opacity: 0.6; } 46 | .vgl-ghost-wrap .vgl-ghost-bold { 47 | transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); 48 | transition: transform 0.3s, opacity 0.3s; 49 | opacity: 0; } 50 | .vgl-ghost-wrap .vgl-ghost-bold.vgl-active { 51 | opacity: 1; 52 | transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); } 53 | 54 | .vgl-swing-wrap { 55 | position: relative; 56 | display: inline-block; 57 | vertical-align: top; 58 | white-space: nowrap; } 59 | .vgl-swing-wrap .vgl-swing-original, .vgl-swing-wrap .vgl-swing-bold { 60 | display: inline-block; } 61 | .vgl-swing-wrap .vgl-swing-original { 62 | transform-origin: 0% 50%; 63 | transform-style: preserve-3d; } 64 | .vgl-swing-wrap .vgl-swing-bold { 65 | position: absolute; 66 | transform: rotateX(270deg); 67 | transition: transform 0.6s; 68 | transform-origin: 0 0; 69 | pointer-events: none; 70 | background-color: black; 71 | color: white; } 72 | .vgl-swing-wrap.vgl-active { 73 | perspective: 800px; } 74 | .vgl-swing-wrap.vgl-active .vgl-swing-bold { 75 | transform: rotateX(0deg); } 76 | 77 | .vgl-rotate-wrap { 78 | position: relative; 79 | display: inline-block; 80 | vertical-align: top; 81 | white-space: nowrap; } 82 | .vgl-rotate-wrap .vgl-rotate-original, .vgl-rotate-wrap .vgl-rotate-bold { 83 | display: inline-block; 84 | position: absolute; } 85 | .vgl-rotate-wrap .vgl-rotate-original { 86 | background: grey; 87 | transition: all 0.4s; } 88 | .vgl-rotate-wrap .vgl-rotate-bold { 89 | transform: rotateY(-90deg); 90 | transition: all 0.4s; 91 | background-color: black; 92 | color: white; } 93 | .vgl-rotate-wrap.vgl-active { 94 | perspective: 800px; 95 | transform-style: preserve-3d; } 96 | .vgl-rotate-wrap.vgl-active .vgl-rotate-original { 97 | transform: rotateY(-90deg); } 98 | .vgl-rotate-wrap.vgl-active .vgl-rotate-bold { 99 | transform: rotateY(0deg); } 100 | -------------------------------------------------------------------------------- /dist/vue-good-links.es.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vue-good-links v0.0.3 3 | * (c) 2018-present xaksis 4 | * https://github.com/xaksis/vue-good-links 5 | * Released under the MIT License. 6 | */ 7 | 8 | import debounce from 'lodash.debounce'; 9 | 10 | function _defineProperty(obj, key, value) { 11 | if (key in obj) { 12 | Object.defineProperty(obj, key, { 13 | value: value, 14 | enumerable: true, 15 | configurable: true, 16 | writable: true 17 | }); 18 | } else { 19 | obj[key] = value; 20 | } 21 | 22 | return obj; 23 | } 24 | 25 | var VglWave = { 26 | render: function render() { 27 | var _vm = this; 28 | 29 | var _h = _vm.$createElement; 30 | 31 | var _c = _vm._self._c || _h; 32 | 33 | return _c('span', _vm._g({ 34 | staticClass: "vgl-wave-wrap", 35 | on: { 36 | "mouseover": _vm.startAnimating, 37 | "mouseleave": _vm.stopAnimating 38 | } 39 | }, _vm.$listeners), _vm._l(_vm.letters, function (l, idx) { 40 | return _c('span', { 41 | key: idx, 42 | staticClass: "vgl-lettr", 43 | class: { 44 | 'vgl-active': _vm.activeIndex === idx 45 | } 46 | }, [_c('span', { 47 | staticClass: "vgl-lettr-inner" 48 | }, [_vm._v(_vm._s(l))]), _c('span', { 49 | staticStyle: { 50 | "opacity": "0" 51 | } 52 | }, [_vm._v(_vm._s(l))])]); 53 | })); 54 | }, 55 | staticRenderFns: [], 56 | name: 'vgl-wave', 57 | props: { 58 | text: { 59 | type: String, 60 | default: 'Sample Text' 61 | } 62 | }, 63 | data: function data() { 64 | return { 65 | activeIndex: -1, 66 | timeouts: [], 67 | intervals: [] 68 | }; 69 | }, 70 | computed: { 71 | letters: function letters() { 72 | return this.text ? this.text.split('') : ''; 73 | } 74 | }, 75 | methods: { 76 | startAnimating: debounce(function () { 77 | var _this = this; 78 | 79 | var delay = 150; // if animation is already going, we don't need to do anything 80 | 81 | if (this.activeIndex > -1) return; 82 | 83 | var _loop = function _loop(i) { 84 | _this.timeouts.push(setTimeout(function () { 85 | // start animating right away 86 | _this.activeIndex = i; // repeat animation for as long as I'm hovering 87 | 88 | _this.intervals.push(setInterval(function () { 89 | _this.activeIndex = i; 90 | }, _this.letters.length * delay)); 91 | }, i * delay)); 92 | }; 93 | 94 | for (var i = 0; i < this.letters.length; i++) { 95 | _loop(i); 96 | } 97 | }, 150), 98 | stopAnimating: debounce(function () { 99 | for (var i = 0; i < this.timeouts.length; i++) { 100 | clearTimeout(this.timeouts[i]); 101 | clearInterval(this.intervals[i]); 102 | } 103 | 104 | this.timeouts = []; 105 | this.intervals = []; 106 | this.activeIndex = -1; 107 | }, 150) 108 | }, 109 | mounted: function mounted() {}, 110 | components: {} 111 | }; 112 | 113 | var VglRollup = { 114 | render: function render() { 115 | var _vm = this; 116 | 117 | var _h = _vm.$createElement; 118 | 119 | var _c = _vm._self._c || _h; 120 | 121 | return _c('span', _vm._g({ 122 | staticClass: "vgl-rollup-wrap", 123 | style: { 124 | height: _vm.spanHeight 125 | }, 126 | on: { 127 | "mouseover": _vm.startAnimating, 128 | "mouseleave": _vm.stopAnimating 129 | } 130 | }, _vm.$listeners), [_c('span', { 131 | staticClass: "vgl-rollup-original", 132 | style: _vm.internalOriginalSpanStyle 133 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 134 | staticClass: "vgl-rollup-bold", 135 | style: _vm.internalBoldSpanStyle 136 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 137 | ref: "originalText", 138 | staticStyle: { 139 | "opacity": "0", 140 | "font-weight": "bold" 141 | } 142 | }, [_vm._v(_vm._s(_vm.text))])]); 143 | }, 144 | staticRenderFns: [], 145 | name: 'vgl-rollup', 146 | props: { 147 | text: { 148 | type: String, 149 | default: 'Sample Text' 150 | }, 151 | hoverSpanStyle: { 152 | type: Object, 153 | // eslint-disable-next-line 154 | default: function _default() { 155 | return {}; 156 | } 157 | }, 158 | originalSpanStyle: { 159 | type: Object, 160 | // eslint-disable-next-line 161 | default: function _default() { 162 | return {}; 163 | } 164 | } 165 | }, 166 | data: function data() { 167 | return { 168 | active: false, 169 | spanHeight: 0 170 | }; 171 | }, 172 | computed: { 173 | internalOriginalSpanStyle: function internalOriginalSpanStyle() { 174 | return Object.assign({}, this.originalSpanStyle, { 175 | top: this.active ? "-".concat(this.spanHeight) : 0 176 | }); 177 | }, 178 | internalBoldSpanStyle: function internalBoldSpanStyle() { 179 | return Object.assign({}, this.hoverSpanStyle, { 180 | top: this.active ? 0 : "".concat(this.spanHeight) 181 | }); 182 | } 183 | }, 184 | methods: { 185 | startAnimating: debounce(function () { 186 | this.active = true; 187 | }, 150), 188 | stopAnimating: debounce(function () { 189 | this.active = false; 190 | }, 150), 191 | init: function init() { 192 | var originalSpan = this.$refs.originalText; 193 | var spanStyle = window.getComputedStyle(originalSpan, null); // console.log(spanStyle); 194 | 195 | this.spanHeight = spanStyle.lineHeight; // const num = parseInt(spanHeight.substring(0, spanHeight.length - 2), 10) * 1.2; 196 | // this.spanHeight = `${num}px`; 197 | } 198 | }, 199 | mounted: function mounted() { 200 | this.init(); 201 | }, 202 | components: {} 203 | }; 204 | 205 | var VglSlidein = { 206 | render: function render() { 207 | var _vm = this; 208 | 209 | var _h = _vm.$createElement; 210 | 211 | var _c = _vm._self._c || _h; 212 | 213 | return _c('span', _vm._g({ 214 | staticClass: "vgl-slidein-wrap", 215 | style: { 216 | width: _vm.spanWidth 217 | }, 218 | on: { 219 | "mouseover": _vm.startAnimating, 220 | "mouseleave": _vm.stopAnimating 221 | } 222 | }, _vm.$listeners), [_c('span', { 223 | ref: "mainText", 224 | staticClass: "vgl-slidein-original", 225 | style: _vm.internalOriginalSpanStyle 226 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 227 | staticClass: "vgl-slidein-bold", 228 | style: _vm.internalBoldSpanStyle 229 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 230 | ref: "originalText", 231 | staticStyle: { 232 | "opacity": "0" 233 | } 234 | }, [_vm._v(_vm._s(_vm.text))])]); 235 | }, 236 | staticRenderFns: [], 237 | name: 'vgl-slidein', 238 | props: { 239 | text: { 240 | type: String, 241 | default: 'Sample Text' 242 | }, 243 | hoverSpanStyle: { 244 | type: Object, 245 | // eslint-disable-next-line 246 | default: function _default() { 247 | return {}; 248 | } 249 | }, 250 | originalSpanStyle: { 251 | type: Object, 252 | // eslint-disable-next-line 253 | default: function _default() { 254 | return {}; 255 | } 256 | } 257 | }, 258 | data: function data() { 259 | return { 260 | active: false, 261 | spanWidth: 0 262 | }; 263 | }, 264 | computed: { 265 | internalOriginalSpanStyle: function internalOriginalSpanStyle() { 266 | return Object.assign({ 267 | padding: '0px 5px' 268 | }, this.originalSpanStyle, { 269 | left: this.active ? "".concat(this.spanWidth) : 0 270 | }); 271 | }, 272 | internalBoldSpanStyle: function internalBoldSpanStyle() { 273 | return Object.assign({ 274 | backgroundColor: 'black', 275 | color: 'white', 276 | padding: '0px 5px' 277 | }, this.hoverSpanStyle, { 278 | left: this.active ? 0 : "-".concat(this.spanWidth) 279 | }); 280 | } 281 | }, 282 | methods: { 283 | startAnimating: debounce(function () { 284 | this.active = true; 285 | }, 150), 286 | stopAnimating: debounce(function () { 287 | this.active = false; 288 | }, 150), 289 | init: function init() { 290 | // const horizontalPadding = 5; 291 | var originalSpan = this.$refs.mainText; 292 | this.spanWidth = "".concat(originalSpan.offsetWidth, "px"); 293 | } 294 | }, 295 | mounted: function mounted() { 296 | this.init(); 297 | }, 298 | components: {} 299 | }; 300 | 301 | var VglGhost = { 302 | render: function render() { 303 | var _vm = this; 304 | 305 | var _h = _vm.$createElement; 306 | 307 | var _c = _vm._self._c || _h; 308 | 309 | return _c('span', _vm._g({ 310 | staticClass: "vgl-ghost-wrap", 311 | on: { 312 | "mouseover": _vm.startAnimating, 313 | "mouseleave": _vm.stopAnimating 314 | } 315 | }, _vm.$listeners), [_c('span', { 316 | staticClass: "vgl-ghost-original", 317 | staticStyle: {} 318 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 319 | staticClass: "vgl-ghost-bold", 320 | class: { 321 | 'vgl-active': _vm.active 322 | }, 323 | staticStyle: {} 324 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 325 | ref: "originalText", 326 | staticStyle: { 327 | "opacity": "0" 328 | } 329 | }, [_vm._v(_vm._s(_vm.text))])]); 330 | }, 331 | staticRenderFns: [], 332 | name: 'vgl-ghost', 333 | props: { 334 | text: { 335 | type: String, 336 | default: 'Sample Text' 337 | }, 338 | hoverSpanStyle: { 339 | type: Object, 340 | // eslint-disable-next-line 341 | default: function _default() { 342 | return {}; 343 | } 344 | }, 345 | originalSpanStyle: { 346 | type: Object, 347 | // eslint-disable-next-line 348 | default: function _default() { 349 | return {}; 350 | } 351 | } 352 | }, 353 | data: function data() { 354 | return { 355 | active: false, 356 | spanWidth: 0 357 | }; 358 | }, 359 | computed: {}, 360 | methods: { 361 | startAnimating: debounce(function () { 362 | this.active = true; 363 | }, 150), 364 | stopAnimating: debounce(function () { 365 | this.active = false; 366 | }, 150), 367 | init: function init() { 368 | var horizontalPadding = 5; 369 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth); 370 | 371 | this.spanWidth = "".concat(originalSpan.offsetWidth + horizontalPadding * 2, "px"); 372 | } 373 | }, 374 | mounted: function mounted() {}, 375 | components: {} 376 | }; 377 | 378 | var VglSwing = { 379 | render: function render() { 380 | var _vm = this; 381 | 382 | var _h = _vm.$createElement; 383 | 384 | var _c = _vm._self._c || _h; 385 | 386 | return _c('span', _vm._g({ 387 | staticClass: "vgl-swing-wrap", 388 | class: { 389 | 'vgl-active': _vm.active 390 | }, 391 | on: { 392 | "mouseover": _vm.startAnimating, 393 | "mouseleave": _vm.stopAnimating 394 | } 395 | }, _vm.$listeners), [_c('span', { 396 | staticClass: "vgl-swing-original", 397 | style: _vm.internalOriginalSpanStyle 398 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 399 | staticClass: "vgl-swing-bold", 400 | style: _vm.internalBoldSpanStyle 401 | }, [_vm._v(_vm._s(_vm.text))])]); 402 | }, 403 | staticRenderFns: [], 404 | name: 'vgl-swing', 405 | props: { 406 | text: { 407 | type: String, 408 | default: 'Sample Text' 409 | }, 410 | hoverSpanStyle: { 411 | type: Object, 412 | // eslint-disable-next-line 413 | default: function _default() { 414 | return {}; 415 | } 416 | }, 417 | originalSpanStyle: { 418 | type: Object, 419 | // eslint-disable-next-line 420 | default: function _default() { 421 | return {}; 422 | } 423 | } 424 | }, 425 | data: function data() { 426 | return { 427 | active: false, 428 | spanWidth: 0 429 | }; 430 | }, 431 | computed: { 432 | internalOriginalSpanStyle: function internalOriginalSpanStyle() { 433 | return Object.assign({ 434 | padding: '0px 5px' 435 | }, this.originalSpanStyle, { 436 | left: this.active ? "".concat(this.spanWidth) : 0 437 | }); 438 | }, 439 | internalBoldSpanStyle: function internalBoldSpanStyle() { 440 | return Object.assign({ 441 | padding: '0px 5px' 442 | }, this.hoverSpanStyle, { 443 | left: this.active ? 0 : "-".concat(this.spanWidth) 444 | }); 445 | } 446 | }, 447 | methods: { 448 | startAnimating: debounce(function () { 449 | this.active = true; 450 | }, 150), 451 | stopAnimating: debounce(function () { 452 | this.active = false; 453 | }, 150), 454 | init: function init() { 455 | var horizontalPadding = 5; 456 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth); 457 | 458 | this.spanWidth = "".concat(originalSpan.offsetWidth + horizontalPadding * 2, "px"); 459 | } 460 | }, 461 | mounted: function mounted() {}, 462 | components: {} 463 | }; 464 | 465 | var VglRotate = { 466 | render: function render() { 467 | var _vm = this; 468 | 469 | var _h = _vm.$createElement; 470 | 471 | var _c = _vm._self._c || _h; 472 | 473 | return _c('span', _vm._g({ 474 | staticClass: "vgl-rotate-wrap", 475 | class: { 476 | 'vgl-active': _vm.active 477 | }, 478 | on: { 479 | "mouseover": _vm.startAnimating, 480 | "mouseleave": _vm.stopAnimating 481 | } 482 | }, _vm.$listeners), [_c('span', { 483 | staticClass: "vgl-rotate-bold", 484 | style: _vm.internalBoldSpanStyle 485 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 486 | staticClass: "vgl-rotate-original", 487 | style: _vm.internalOriginalSpanStyle 488 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 489 | ref: "originalText", 490 | staticStyle: { 491 | "opacity": "0" 492 | }, 493 | style: _vm.internalBoldSpanStyle 494 | }, [_vm._v(_vm._s(_vm.text))])]); 495 | }, 496 | staticRenderFns: [], 497 | name: 'vgl-rotate', 498 | props: { 499 | text: { 500 | type: String, 501 | default: 'Sample Text' 502 | }, 503 | hoverSpanStyle: { 504 | type: Object, 505 | // eslint-disable-next-line 506 | default: function _default() { 507 | return {}; 508 | } 509 | }, 510 | originalSpanStyle: { 511 | type: Object, 512 | // eslint-disable-next-line 513 | default: function _default() { 514 | return {}; 515 | } 516 | } 517 | }, 518 | data: function data() { 519 | return { 520 | active: false, 521 | spanWidth: 0 522 | }; 523 | }, 524 | computed: { 525 | internalOriginalSpanStyle: function internalOriginalSpanStyle() { 526 | return Object.assign({ 527 | padding: '0px 5px' 528 | }, this.originalSpanStyle, { 529 | transformOrigin: "50% 50% -".concat(this.spanWidth) 530 | }); 531 | }, 532 | internalBoldSpanStyle: function internalBoldSpanStyle() { 533 | return Object.assign({ 534 | padding: '0px 5px' 535 | }, this.hoverSpanStyle, { 536 | transformOrigin: "50% 50% ".concat(this.spanWidth) 537 | }); 538 | } 539 | }, 540 | methods: { 541 | startAnimating: debounce(function () { 542 | this.active = true; 543 | }, 150), 544 | stopAnimating: debounce(function () { 545 | this.active = false; 546 | }, 150), 547 | init: function init() { 548 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth); 549 | 550 | this.spanWidth = "".concat(originalSpan.offsetWidth / 2, "px"); 551 | } 552 | }, 553 | mounted: function mounted() { 554 | this.init(); 555 | }, 556 | components: {} 557 | }; 558 | 559 | var _components; 560 | var components = (_components = {}, _defineProperty(_components, VglWave.name, VglWave), _defineProperty(_components, VglRollup.name, VglRollup), _defineProperty(_components, VglSlidein.name, VglSlidein), _defineProperty(_components, VglGhost.name, VglGhost), _defineProperty(_components, VglSwing.name, VglSwing), _defineProperty(_components, VglRotate.name, VglRotate), _components); 561 | 562 | function install(Vue, options) { 563 | if (options && options.components) { 564 | options.components.forEach(function (c) { 565 | return Vue.component(c.name, components[c.name]); 566 | }); 567 | } else { 568 | Object.keys(components).forEach(function (key) { 569 | Vue.component(key, components[key]); 570 | }); 571 | } 572 | } // Automatic installation if Vue has been added to the global scope. 573 | 574 | 575 | if (typeof window !== 'undefined' && window.Vue) { 576 | window.Vue.use({ 577 | install: install 578 | }); 579 | } 580 | 581 | var index = { 582 | install: install 583 | }; 584 | 585 | export default index; 586 | export { VglWave, VglRollup, VglSlidein, VglGhost, VglSwing, VglRotate }; 587 | -------------------------------------------------------------------------------- /dist/vue-good-links.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vue-good-links v0.0.3 3 | * (c) 2018-present xaksis 4 | * https://github.com/xaksis/vue-good-links 5 | * Released under the MIT License. 6 | */ 7 | 8 | (function (global, factory) { 9 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : 10 | typeof define === 'function' && define.amd ? define(['exports'], factory) : 11 | (factory((global.vueGoodLinks = {}))); 12 | }(this, (function (exports) { 'use strict'; 13 | 14 | function _defineProperty(obj, key, value) { 15 | if (key in obj) { 16 | Object.defineProperty(obj, key, { 17 | value: value, 18 | enumerable: true, 19 | configurable: true, 20 | writable: true 21 | }); 22 | } else { 23 | obj[key] = value; 24 | } 25 | 26 | return obj; 27 | } 28 | 29 | var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; 30 | 31 | /** 32 | * lodash (Custom Build) 33 | * Build: `lodash modularize exports="npm" -o ./` 34 | * Copyright jQuery Foundation and other contributors 35 | * Released under MIT license 36 | * Based on Underscore.js 1.8.3 37 | * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors 38 | */ 39 | 40 | /** Used as the `TypeError` message for "Functions" methods. */ 41 | var FUNC_ERROR_TEXT = 'Expected a function'; 42 | 43 | /** Used as references for various `Number` constants. */ 44 | var NAN = 0 / 0; 45 | 46 | /** `Object#toString` result references. */ 47 | var symbolTag = '[object Symbol]'; 48 | 49 | /** Used to match leading and trailing whitespace. */ 50 | var reTrim = /^\s+|\s+$/g; 51 | 52 | /** Used to detect bad signed hexadecimal string values. */ 53 | var reIsBadHex = /^[-+]0x[0-9a-f]+$/i; 54 | 55 | /** Used to detect binary string values. */ 56 | var reIsBinary = /^0b[01]+$/i; 57 | 58 | /** Used to detect octal string values. */ 59 | var reIsOctal = /^0o[0-7]+$/i; 60 | 61 | /** Built-in method references without a dependency on `root`. */ 62 | var freeParseInt = parseInt; 63 | 64 | /** Detect free variable `global` from Node.js. */ 65 | var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal; 66 | 67 | /** Detect free variable `self`. */ 68 | var freeSelf = typeof self == 'object' && self && self.Object === Object && self; 69 | 70 | /** Used as a reference to the global object. */ 71 | var root = freeGlobal || freeSelf || Function('return this')(); 72 | 73 | /** Used for built-in method references. */ 74 | var objectProto = Object.prototype; 75 | 76 | /** 77 | * Used to resolve the 78 | * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring) 79 | * of values. 80 | */ 81 | var objectToString = objectProto.toString; 82 | 83 | /* Built-in method references for those with the same name as other `lodash` methods. */ 84 | var nativeMax = Math.max, 85 | nativeMin = Math.min; 86 | 87 | /** 88 | * Gets the timestamp of the number of milliseconds that have elapsed since 89 | * the Unix epoch (1 January 1970 00:00:00 UTC). 90 | * 91 | * @static 92 | * @memberOf _ 93 | * @since 2.4.0 94 | * @category Date 95 | * @returns {number} Returns the timestamp. 96 | * @example 97 | * 98 | * _.defer(function(stamp) { 99 | * console.log(_.now() - stamp); 100 | * }, _.now()); 101 | * // => Logs the number of milliseconds it took for the deferred invocation. 102 | */ 103 | var now = function() { 104 | return root.Date.now(); 105 | }; 106 | 107 | /** 108 | * Creates a debounced function that delays invoking `func` until after `wait` 109 | * milliseconds have elapsed since the last time the debounced function was 110 | * invoked. The debounced function comes with a `cancel` method to cancel 111 | * delayed `func` invocations and a `flush` method to immediately invoke them. 112 | * Provide `options` to indicate whether `func` should be invoked on the 113 | * leading and/or trailing edge of the `wait` timeout. The `func` is invoked 114 | * with the last arguments provided to the debounced function. Subsequent 115 | * calls to the debounced function return the result of the last `func` 116 | * invocation. 117 | * 118 | * **Note:** If `leading` and `trailing` options are `true`, `func` is 119 | * invoked on the trailing edge of the timeout only if the debounced function 120 | * is invoked more than once during the `wait` timeout. 121 | * 122 | * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred 123 | * until to the next tick, similar to `setTimeout` with a timeout of `0`. 124 | * 125 | * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/) 126 | * for details over the differences between `_.debounce` and `_.throttle`. 127 | * 128 | * @static 129 | * @memberOf _ 130 | * @since 0.1.0 131 | * @category Function 132 | * @param {Function} func The function to debounce. 133 | * @param {number} [wait=0] The number of milliseconds to delay. 134 | * @param {Object} [options={}] The options object. 135 | * @param {boolean} [options.leading=false] 136 | * Specify invoking on the leading edge of the timeout. 137 | * @param {number} [options.maxWait] 138 | * The maximum time `func` is allowed to be delayed before it's invoked. 139 | * @param {boolean} [options.trailing=true] 140 | * Specify invoking on the trailing edge of the timeout. 141 | * @returns {Function} Returns the new debounced function. 142 | * @example 143 | * 144 | * // Avoid costly calculations while the window size is in flux. 145 | * jQuery(window).on('resize', _.debounce(calculateLayout, 150)); 146 | * 147 | * // Invoke `sendMail` when clicked, debouncing subsequent calls. 148 | * jQuery(element).on('click', _.debounce(sendMail, 300, { 149 | * 'leading': true, 150 | * 'trailing': false 151 | * })); 152 | * 153 | * // Ensure `batchLog` is invoked once after 1 second of debounced calls. 154 | * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 }); 155 | * var source = new EventSource('/stream'); 156 | * jQuery(source).on('message', debounced); 157 | * 158 | * // Cancel the trailing debounced invocation. 159 | * jQuery(window).on('popstate', debounced.cancel); 160 | */ 161 | function debounce(func, wait, options) { 162 | var lastArgs, 163 | lastThis, 164 | maxWait, 165 | result, 166 | timerId, 167 | lastCallTime, 168 | lastInvokeTime = 0, 169 | leading = false, 170 | maxing = false, 171 | trailing = true; 172 | 173 | if (typeof func != 'function') { 174 | throw new TypeError(FUNC_ERROR_TEXT); 175 | } 176 | wait = toNumber(wait) || 0; 177 | if (isObject(options)) { 178 | leading = !!options.leading; 179 | maxing = 'maxWait' in options; 180 | maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait; 181 | trailing = 'trailing' in options ? !!options.trailing : trailing; 182 | } 183 | 184 | function invokeFunc(time) { 185 | var args = lastArgs, 186 | thisArg = lastThis; 187 | 188 | lastArgs = lastThis = undefined; 189 | lastInvokeTime = time; 190 | result = func.apply(thisArg, args); 191 | return result; 192 | } 193 | 194 | function leadingEdge(time) { 195 | // Reset any `maxWait` timer. 196 | lastInvokeTime = time; 197 | // Start the timer for the trailing edge. 198 | timerId = setTimeout(timerExpired, wait); 199 | // Invoke the leading edge. 200 | return leading ? invokeFunc(time) : result; 201 | } 202 | 203 | function remainingWait(time) { 204 | var timeSinceLastCall = time - lastCallTime, 205 | timeSinceLastInvoke = time - lastInvokeTime, 206 | result = wait - timeSinceLastCall; 207 | 208 | return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result; 209 | } 210 | 211 | function shouldInvoke(time) { 212 | var timeSinceLastCall = time - lastCallTime, 213 | timeSinceLastInvoke = time - lastInvokeTime; 214 | 215 | // Either this is the first call, activity has stopped and we're at the 216 | // trailing edge, the system time has gone backwards and we're treating 217 | // it as the trailing edge, or we've hit the `maxWait` limit. 218 | return (lastCallTime === undefined || (timeSinceLastCall >= wait) || 219 | (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait)); 220 | } 221 | 222 | function timerExpired() { 223 | var time = now(); 224 | if (shouldInvoke(time)) { 225 | return trailingEdge(time); 226 | } 227 | // Restart the timer. 228 | timerId = setTimeout(timerExpired, remainingWait(time)); 229 | } 230 | 231 | function trailingEdge(time) { 232 | timerId = undefined; 233 | 234 | // Only invoke if we have `lastArgs` which means `func` has been 235 | // debounced at least once. 236 | if (trailing && lastArgs) { 237 | return invokeFunc(time); 238 | } 239 | lastArgs = lastThis = undefined; 240 | return result; 241 | } 242 | 243 | function cancel() { 244 | if (timerId !== undefined) { 245 | clearTimeout(timerId); 246 | } 247 | lastInvokeTime = 0; 248 | lastArgs = lastCallTime = lastThis = timerId = undefined; 249 | } 250 | 251 | function flush() { 252 | return timerId === undefined ? result : trailingEdge(now()); 253 | } 254 | 255 | function debounced() { 256 | var time = now(), 257 | isInvoking = shouldInvoke(time); 258 | 259 | lastArgs = arguments; 260 | lastThis = this; 261 | lastCallTime = time; 262 | 263 | if (isInvoking) { 264 | if (timerId === undefined) { 265 | return leadingEdge(lastCallTime); 266 | } 267 | if (maxing) { 268 | // Handle invocations in a tight loop. 269 | timerId = setTimeout(timerExpired, wait); 270 | return invokeFunc(lastCallTime); 271 | } 272 | } 273 | if (timerId === undefined) { 274 | timerId = setTimeout(timerExpired, wait); 275 | } 276 | return result; 277 | } 278 | debounced.cancel = cancel; 279 | debounced.flush = flush; 280 | return debounced; 281 | } 282 | 283 | /** 284 | * Checks if `value` is the 285 | * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types) 286 | * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`) 287 | * 288 | * @static 289 | * @memberOf _ 290 | * @since 0.1.0 291 | * @category Lang 292 | * @param {*} value The value to check. 293 | * @returns {boolean} Returns `true` if `value` is an object, else `false`. 294 | * @example 295 | * 296 | * _.isObject({}); 297 | * // => true 298 | * 299 | * _.isObject([1, 2, 3]); 300 | * // => true 301 | * 302 | * _.isObject(_.noop); 303 | * // => true 304 | * 305 | * _.isObject(null); 306 | * // => false 307 | */ 308 | function isObject(value) { 309 | var type = typeof value; 310 | return !!value && (type == 'object' || type == 'function'); 311 | } 312 | 313 | /** 314 | * Checks if `value` is object-like. A value is object-like if it's not `null` 315 | * and has a `typeof` result of "object". 316 | * 317 | * @static 318 | * @memberOf _ 319 | * @since 4.0.0 320 | * @category Lang 321 | * @param {*} value The value to check. 322 | * @returns {boolean} Returns `true` if `value` is object-like, else `false`. 323 | * @example 324 | * 325 | * _.isObjectLike({}); 326 | * // => true 327 | * 328 | * _.isObjectLike([1, 2, 3]); 329 | * // => true 330 | * 331 | * _.isObjectLike(_.noop); 332 | * // => false 333 | * 334 | * _.isObjectLike(null); 335 | * // => false 336 | */ 337 | function isObjectLike(value) { 338 | return !!value && typeof value == 'object'; 339 | } 340 | 341 | /** 342 | * Checks if `value` is classified as a `Symbol` primitive or object. 343 | * 344 | * @static 345 | * @memberOf _ 346 | * @since 4.0.0 347 | * @category Lang 348 | * @param {*} value The value to check. 349 | * @returns {boolean} Returns `true` if `value` is a symbol, else `false`. 350 | * @example 351 | * 352 | * _.isSymbol(Symbol.iterator); 353 | * // => true 354 | * 355 | * _.isSymbol('abc'); 356 | * // => false 357 | */ 358 | function isSymbol(value) { 359 | return typeof value == 'symbol' || 360 | (isObjectLike(value) && objectToString.call(value) == symbolTag); 361 | } 362 | 363 | /** 364 | * Converts `value` to a number. 365 | * 366 | * @static 367 | * @memberOf _ 368 | * @since 4.0.0 369 | * @category Lang 370 | * @param {*} value The value to process. 371 | * @returns {number} Returns the number. 372 | * @example 373 | * 374 | * _.toNumber(3.2); 375 | * // => 3.2 376 | * 377 | * _.toNumber(Number.MIN_VALUE); 378 | * // => 5e-324 379 | * 380 | * _.toNumber(Infinity); 381 | * // => Infinity 382 | * 383 | * _.toNumber('3.2'); 384 | * // => 3.2 385 | */ 386 | function toNumber(value) { 387 | if (typeof value == 'number') { 388 | return value; 389 | } 390 | if (isSymbol(value)) { 391 | return NAN; 392 | } 393 | if (isObject(value)) { 394 | var other = typeof value.valueOf == 'function' ? value.valueOf() : value; 395 | value = isObject(other) ? (other + '') : other; 396 | } 397 | if (typeof value != 'string') { 398 | return value === 0 ? value : +value; 399 | } 400 | value = value.replace(reTrim, ''); 401 | var isBinary = reIsBinary.test(value); 402 | return (isBinary || reIsOctal.test(value)) 403 | ? freeParseInt(value.slice(2), isBinary ? 2 : 8) 404 | : (reIsBadHex.test(value) ? NAN : +value); 405 | } 406 | 407 | var lodash_debounce = debounce; 408 | 409 | var VglWave = { 410 | render: function render() { 411 | var _vm = this; 412 | 413 | var _h = _vm.$createElement; 414 | 415 | var _c = _vm._self._c || _h; 416 | 417 | return _c('span', _vm._g({ 418 | staticClass: "vgl-wave-wrap", 419 | on: { 420 | "mouseover": _vm.startAnimating, 421 | "mouseleave": _vm.stopAnimating 422 | } 423 | }, _vm.$listeners), _vm._l(_vm.letters, function (l, idx) { 424 | return _c('span', { 425 | key: idx, 426 | staticClass: "vgl-lettr", 427 | class: { 428 | 'vgl-active': _vm.activeIndex === idx 429 | } 430 | }, [_c('span', { 431 | staticClass: "vgl-lettr-inner" 432 | }, [_vm._v(_vm._s(l))]), _c('span', { 433 | staticStyle: { 434 | "opacity": "0" 435 | } 436 | }, [_vm._v(_vm._s(l))])]); 437 | })); 438 | }, 439 | staticRenderFns: [], 440 | name: 'vgl-wave', 441 | props: { 442 | text: { 443 | type: String, 444 | default: 'Sample Text' 445 | } 446 | }, 447 | data: function data() { 448 | return { 449 | activeIndex: -1, 450 | timeouts: [], 451 | intervals: [] 452 | }; 453 | }, 454 | computed: { 455 | letters: function letters() { 456 | return this.text ? this.text.split('') : ''; 457 | } 458 | }, 459 | methods: { 460 | startAnimating: lodash_debounce(function () { 461 | var _this = this; 462 | 463 | var delay = 150; // if animation is already going, we don't need to do anything 464 | 465 | if (this.activeIndex > -1) return; 466 | 467 | var _loop = function _loop(i) { 468 | _this.timeouts.push(setTimeout(function () { 469 | // start animating right away 470 | _this.activeIndex = i; // repeat animation for as long as I'm hovering 471 | 472 | _this.intervals.push(setInterval(function () { 473 | _this.activeIndex = i; 474 | }, _this.letters.length * delay)); 475 | }, i * delay)); 476 | }; 477 | 478 | for (var i = 0; i < this.letters.length; i++) { 479 | _loop(i); 480 | } 481 | }, 150), 482 | stopAnimating: lodash_debounce(function () { 483 | for (var i = 0; i < this.timeouts.length; i++) { 484 | clearTimeout(this.timeouts[i]); 485 | clearInterval(this.intervals[i]); 486 | } 487 | 488 | this.timeouts = []; 489 | this.intervals = []; 490 | this.activeIndex = -1; 491 | }, 150) 492 | }, 493 | mounted: function mounted() {}, 494 | components: {} 495 | }; 496 | 497 | var VglRollup = { 498 | render: function render() { 499 | var _vm = this; 500 | 501 | var _h = _vm.$createElement; 502 | 503 | var _c = _vm._self._c || _h; 504 | 505 | return _c('span', _vm._g({ 506 | staticClass: "vgl-rollup-wrap", 507 | style: { 508 | height: _vm.spanHeight 509 | }, 510 | on: { 511 | "mouseover": _vm.startAnimating, 512 | "mouseleave": _vm.stopAnimating 513 | } 514 | }, _vm.$listeners), [_c('span', { 515 | staticClass: "vgl-rollup-original", 516 | style: _vm.internalOriginalSpanStyle 517 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 518 | staticClass: "vgl-rollup-bold", 519 | style: _vm.internalBoldSpanStyle 520 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 521 | ref: "originalText", 522 | staticStyle: { 523 | "opacity": "0", 524 | "font-weight": "bold" 525 | } 526 | }, [_vm._v(_vm._s(_vm.text))])]); 527 | }, 528 | staticRenderFns: [], 529 | name: 'vgl-rollup', 530 | props: { 531 | text: { 532 | type: String, 533 | default: 'Sample Text' 534 | }, 535 | hoverSpanStyle: { 536 | type: Object, 537 | // eslint-disable-next-line 538 | default: function _default() { 539 | return {}; 540 | } 541 | }, 542 | originalSpanStyle: { 543 | type: Object, 544 | // eslint-disable-next-line 545 | default: function _default() { 546 | return {}; 547 | } 548 | } 549 | }, 550 | data: function data() { 551 | return { 552 | active: false, 553 | spanHeight: 0 554 | }; 555 | }, 556 | computed: { 557 | internalOriginalSpanStyle: function internalOriginalSpanStyle() { 558 | return Object.assign({}, this.originalSpanStyle, { 559 | top: this.active ? "-".concat(this.spanHeight) : 0 560 | }); 561 | }, 562 | internalBoldSpanStyle: function internalBoldSpanStyle() { 563 | return Object.assign({}, this.hoverSpanStyle, { 564 | top: this.active ? 0 : "".concat(this.spanHeight) 565 | }); 566 | } 567 | }, 568 | methods: { 569 | startAnimating: lodash_debounce(function () { 570 | this.active = true; 571 | }, 150), 572 | stopAnimating: lodash_debounce(function () { 573 | this.active = false; 574 | }, 150), 575 | init: function init() { 576 | var originalSpan = this.$refs.originalText; 577 | var spanStyle = window.getComputedStyle(originalSpan, null); // console.log(spanStyle); 578 | 579 | this.spanHeight = spanStyle.lineHeight; // const num = parseInt(spanHeight.substring(0, spanHeight.length - 2), 10) * 1.2; 580 | // this.spanHeight = `${num}px`; 581 | } 582 | }, 583 | mounted: function mounted() { 584 | this.init(); 585 | }, 586 | components: {} 587 | }; 588 | 589 | var VglSlidein = { 590 | render: function render() { 591 | var _vm = this; 592 | 593 | var _h = _vm.$createElement; 594 | 595 | var _c = _vm._self._c || _h; 596 | 597 | return _c('span', _vm._g({ 598 | staticClass: "vgl-slidein-wrap", 599 | style: { 600 | width: _vm.spanWidth 601 | }, 602 | on: { 603 | "mouseover": _vm.startAnimating, 604 | "mouseleave": _vm.stopAnimating 605 | } 606 | }, _vm.$listeners), [_c('span', { 607 | ref: "mainText", 608 | staticClass: "vgl-slidein-original", 609 | style: _vm.internalOriginalSpanStyle 610 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 611 | staticClass: "vgl-slidein-bold", 612 | style: _vm.internalBoldSpanStyle 613 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 614 | ref: "originalText", 615 | staticStyle: { 616 | "opacity": "0" 617 | } 618 | }, [_vm._v(_vm._s(_vm.text))])]); 619 | }, 620 | staticRenderFns: [], 621 | name: 'vgl-slidein', 622 | props: { 623 | text: { 624 | type: String, 625 | default: 'Sample Text' 626 | }, 627 | hoverSpanStyle: { 628 | type: Object, 629 | // eslint-disable-next-line 630 | default: function _default() { 631 | return {}; 632 | } 633 | }, 634 | originalSpanStyle: { 635 | type: Object, 636 | // eslint-disable-next-line 637 | default: function _default() { 638 | return {}; 639 | } 640 | } 641 | }, 642 | data: function data() { 643 | return { 644 | active: false, 645 | spanWidth: 0 646 | }; 647 | }, 648 | computed: { 649 | internalOriginalSpanStyle: function internalOriginalSpanStyle() { 650 | return Object.assign({ 651 | padding: '0px 5px' 652 | }, this.originalSpanStyle, { 653 | left: this.active ? "".concat(this.spanWidth) : 0 654 | }); 655 | }, 656 | internalBoldSpanStyle: function internalBoldSpanStyle() { 657 | return Object.assign({ 658 | backgroundColor: 'black', 659 | color: 'white', 660 | padding: '0px 5px' 661 | }, this.hoverSpanStyle, { 662 | left: this.active ? 0 : "-".concat(this.spanWidth) 663 | }); 664 | } 665 | }, 666 | methods: { 667 | startAnimating: lodash_debounce(function () { 668 | this.active = true; 669 | }, 150), 670 | stopAnimating: lodash_debounce(function () { 671 | this.active = false; 672 | }, 150), 673 | init: function init() { 674 | // const horizontalPadding = 5; 675 | var originalSpan = this.$refs.mainText; 676 | this.spanWidth = "".concat(originalSpan.offsetWidth, "px"); 677 | } 678 | }, 679 | mounted: function mounted() { 680 | this.init(); 681 | }, 682 | components: {} 683 | }; 684 | 685 | var VglGhost = { 686 | render: function render() { 687 | var _vm = this; 688 | 689 | var _h = _vm.$createElement; 690 | 691 | var _c = _vm._self._c || _h; 692 | 693 | return _c('span', _vm._g({ 694 | staticClass: "vgl-ghost-wrap", 695 | on: { 696 | "mouseover": _vm.startAnimating, 697 | "mouseleave": _vm.stopAnimating 698 | } 699 | }, _vm.$listeners), [_c('span', { 700 | staticClass: "vgl-ghost-original", 701 | staticStyle: {} 702 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 703 | staticClass: "vgl-ghost-bold", 704 | class: { 705 | 'vgl-active': _vm.active 706 | }, 707 | staticStyle: {} 708 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 709 | ref: "originalText", 710 | staticStyle: { 711 | "opacity": "0" 712 | } 713 | }, [_vm._v(_vm._s(_vm.text))])]); 714 | }, 715 | staticRenderFns: [], 716 | name: 'vgl-ghost', 717 | props: { 718 | text: { 719 | type: String, 720 | default: 'Sample Text' 721 | }, 722 | hoverSpanStyle: { 723 | type: Object, 724 | // eslint-disable-next-line 725 | default: function _default() { 726 | return {}; 727 | } 728 | }, 729 | originalSpanStyle: { 730 | type: Object, 731 | // eslint-disable-next-line 732 | default: function _default() { 733 | return {}; 734 | } 735 | } 736 | }, 737 | data: function data() { 738 | return { 739 | active: false, 740 | spanWidth: 0 741 | }; 742 | }, 743 | computed: {}, 744 | methods: { 745 | startAnimating: lodash_debounce(function () { 746 | this.active = true; 747 | }, 150), 748 | stopAnimating: lodash_debounce(function () { 749 | this.active = false; 750 | }, 150), 751 | init: function init() { 752 | var horizontalPadding = 5; 753 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth); 754 | 755 | this.spanWidth = "".concat(originalSpan.offsetWidth + horizontalPadding * 2, "px"); 756 | } 757 | }, 758 | mounted: function mounted() {}, 759 | components: {} 760 | }; 761 | 762 | var VglSwing = { 763 | render: function render() { 764 | var _vm = this; 765 | 766 | var _h = _vm.$createElement; 767 | 768 | var _c = _vm._self._c || _h; 769 | 770 | return _c('span', _vm._g({ 771 | staticClass: "vgl-swing-wrap", 772 | class: { 773 | 'vgl-active': _vm.active 774 | }, 775 | on: { 776 | "mouseover": _vm.startAnimating, 777 | "mouseleave": _vm.stopAnimating 778 | } 779 | }, _vm.$listeners), [_c('span', { 780 | staticClass: "vgl-swing-original", 781 | style: _vm.internalOriginalSpanStyle 782 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 783 | staticClass: "vgl-swing-bold", 784 | style: _vm.internalBoldSpanStyle 785 | }, [_vm._v(_vm._s(_vm.text))])]); 786 | }, 787 | staticRenderFns: [], 788 | name: 'vgl-swing', 789 | props: { 790 | text: { 791 | type: String, 792 | default: 'Sample Text' 793 | }, 794 | hoverSpanStyle: { 795 | type: Object, 796 | // eslint-disable-next-line 797 | default: function _default() { 798 | return {}; 799 | } 800 | }, 801 | originalSpanStyle: { 802 | type: Object, 803 | // eslint-disable-next-line 804 | default: function _default() { 805 | return {}; 806 | } 807 | } 808 | }, 809 | data: function data() { 810 | return { 811 | active: false, 812 | spanWidth: 0 813 | }; 814 | }, 815 | computed: { 816 | internalOriginalSpanStyle: function internalOriginalSpanStyle() { 817 | return Object.assign({ 818 | padding: '0px 5px' 819 | }, this.originalSpanStyle, { 820 | left: this.active ? "".concat(this.spanWidth) : 0 821 | }); 822 | }, 823 | internalBoldSpanStyle: function internalBoldSpanStyle() { 824 | return Object.assign({ 825 | padding: '0px 5px' 826 | }, this.hoverSpanStyle, { 827 | left: this.active ? 0 : "-".concat(this.spanWidth) 828 | }); 829 | } 830 | }, 831 | methods: { 832 | startAnimating: lodash_debounce(function () { 833 | this.active = true; 834 | }, 150), 835 | stopAnimating: lodash_debounce(function () { 836 | this.active = false; 837 | }, 150), 838 | init: function init() { 839 | var horizontalPadding = 5; 840 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth); 841 | 842 | this.spanWidth = "".concat(originalSpan.offsetWidth + horizontalPadding * 2, "px"); 843 | } 844 | }, 845 | mounted: function mounted() {}, 846 | components: {} 847 | }; 848 | 849 | var VglRotate = { 850 | render: function render() { 851 | var _vm = this; 852 | 853 | var _h = _vm.$createElement; 854 | 855 | var _c = _vm._self._c || _h; 856 | 857 | return _c('span', _vm._g({ 858 | staticClass: "vgl-rotate-wrap", 859 | class: { 860 | 'vgl-active': _vm.active 861 | }, 862 | on: { 863 | "mouseover": _vm.startAnimating, 864 | "mouseleave": _vm.stopAnimating 865 | } 866 | }, _vm.$listeners), [_c('span', { 867 | staticClass: "vgl-rotate-bold", 868 | style: _vm.internalBoldSpanStyle 869 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 870 | staticClass: "vgl-rotate-original", 871 | style: _vm.internalOriginalSpanStyle 872 | }, [_vm._v(_vm._s(_vm.text))]), _vm._v(" "), _c('span', { 873 | ref: "originalText", 874 | staticStyle: { 875 | "opacity": "0" 876 | }, 877 | style: _vm.internalBoldSpanStyle 878 | }, [_vm._v(_vm._s(_vm.text))])]); 879 | }, 880 | staticRenderFns: [], 881 | name: 'vgl-rotate', 882 | props: { 883 | text: { 884 | type: String, 885 | default: 'Sample Text' 886 | }, 887 | hoverSpanStyle: { 888 | type: Object, 889 | // eslint-disable-next-line 890 | default: function _default() { 891 | return {}; 892 | } 893 | }, 894 | originalSpanStyle: { 895 | type: Object, 896 | // eslint-disable-next-line 897 | default: function _default() { 898 | return {}; 899 | } 900 | } 901 | }, 902 | data: function data() { 903 | return { 904 | active: false, 905 | spanWidth: 0 906 | }; 907 | }, 908 | computed: { 909 | internalOriginalSpanStyle: function internalOriginalSpanStyle() { 910 | return Object.assign({ 911 | padding: '0px 5px' 912 | }, this.originalSpanStyle, { 913 | transformOrigin: "50% 50% -".concat(this.spanWidth) 914 | }); 915 | }, 916 | internalBoldSpanStyle: function internalBoldSpanStyle() { 917 | return Object.assign({ 918 | padding: '0px 5px' 919 | }, this.hoverSpanStyle, { 920 | transformOrigin: "50% 50% ".concat(this.spanWidth) 921 | }); 922 | } 923 | }, 924 | methods: { 925 | startAnimating: lodash_debounce(function () { 926 | this.active = true; 927 | }, 150), 928 | stopAnimating: lodash_debounce(function () { 929 | this.active = false; 930 | }, 150), 931 | init: function init() { 932 | var originalSpan = this.$refs.originalText; // console.log(originalSpan.offsetWidth); 933 | 934 | this.spanWidth = "".concat(originalSpan.offsetWidth / 2, "px"); 935 | } 936 | }, 937 | mounted: function mounted() { 938 | this.init(); 939 | }, 940 | components: {} 941 | }; 942 | 943 | var _components; 944 | var components = (_components = {}, _defineProperty(_components, VglWave.name, VglWave), _defineProperty(_components, VglRollup.name, VglRollup), _defineProperty(_components, VglSlidein.name, VglSlidein), _defineProperty(_components, VglGhost.name, VglGhost), _defineProperty(_components, VglSwing.name, VglSwing), _defineProperty(_components, VglRotate.name, VglRotate), _components); 945 | 946 | function install(Vue, options) { 947 | if (options && options.components) { 948 | options.components.forEach(function (c) { 949 | return Vue.component(c.name, components[c.name]); 950 | }); 951 | } else { 952 | Object.keys(components).forEach(function (key) { 953 | Vue.component(key, components[key]); 954 | }); 955 | } 956 | } // Automatic installation if Vue has been added to the global scope. 957 | 958 | 959 | if (typeof window !== 'undefined' && window.Vue) { 960 | window.Vue.use({ 961 | install: install 962 | }); 963 | } 964 | 965 | var index = { 966 | install: install 967 | }; 968 | 969 | exports.default = index; 970 | exports.VglWave = VglWave; 971 | exports.VglRollup = VglRollup; 972 | exports.VglSlidein = VglSlidein; 973 | exports.VglGhost = VglGhost; 974 | exports.VglSwing = VglSwing; 975 | exports.VglRotate = VglRotate; 976 | 977 | Object.defineProperty(exports, '__esModule', { value: true }); 978 | 979 | }))); 980 | -------------------------------------------------------------------------------- /dist/vue-good-links.min.css: -------------------------------------------------------------------------------- 1 | .vgl-wave-wrap,.vgl-wave-wrap .vgl-lettr{position:relative}.vgl-wave-wrap .vgl-lettr .vgl-lettr-inner{position:absolute;transition:all .15s ease-out;bottom:0}.vgl-wave-wrap .vgl-lettr.vgl-active .vgl-lettr-inner{bottom:20%} 2 | .vgl-rollup-wrap{position:relative;display:inline-block;vertical-align:top;overflow:hidden}.vgl-rollup-wrap .vgl-rollup-bold,.vgl-rollup-wrap .vgl-rollup-original{transition:all .3s;display:inline-block;position:absolute}.vgl-rollup-wrap .vgl-rollup-bold{font-weight:700} 3 | .vgl-slidein-wrap{position:relative;display:inline-block;vertical-align:top;overflow:hidden;white-space:nowrap}.vgl-slidein-wrap .vgl-slidein-bold,.vgl-slidein-wrap .vgl-slidein-original{transition:all .3s;display:inline-block;position:absolute} 4 | .vgl-ghost-wrap{position:relative;display:inline-block;vertical-align:top;white-space:nowrap}.vgl-ghost-wrap .vgl-ghost-bold,.vgl-ghost-wrap .vgl-ghost-original{transition:all .3s;display:inline-block;position:absolute}.vgl-ghost-wrap .vgl-ghost-original{opacity:.6}.vgl-ghost-wrap .vgl-ghost-bold{transform:scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);transition:transform .3s,opacity .3s;opacity:0}.vgl-ghost-wrap .vgl-ghost-bold.vgl-active{opacity:1;transform:scale(1) translateX(0) translateY(0) rotate(0deg)} 5 | .vgl-swing-wrap{position:relative;vertical-align:top;white-space:nowrap}.vgl-swing-wrap,.vgl-swing-wrap .vgl-swing-bold,.vgl-swing-wrap .vgl-swing-original{display:inline-block}.vgl-swing-wrap .vgl-swing-original{transform-origin:0 50%;transform-style:preserve-3d}.vgl-swing-wrap .vgl-swing-bold{position:absolute;transform:rotateX(270deg);transition:transform .6s;transform-origin:0 0;pointer-events:none;background-color:#000;color:#fff}.vgl-swing-wrap.vgl-active{perspective:800px}.vgl-swing-wrap.vgl-active .vgl-swing-bold{transform:rotateX(0deg)} 6 | .vgl-rotate-wrap{position:relative;display:inline-block;vertical-align:top;white-space:nowrap}.vgl-rotate-wrap .vgl-rotate-bold,.vgl-rotate-wrap .vgl-rotate-original{display:inline-block;position:absolute}.vgl-rotate-wrap .vgl-rotate-original{background:grey;transition:all .4s}.vgl-rotate-wrap .vgl-rotate-bold{transform:rotateY(-90deg);transition:all .4s;background-color:#000;color:#fff}.vgl-rotate-wrap.vgl-active{perspective:800px;transform-style:preserve-3d}.vgl-rotate-wrap.vgl-active .vgl-rotate-original{transform:rotateY(-90deg)}.vgl-rotate-wrap.vgl-active .vgl-rotate-bold{transform:rotateY(0deg)} 7 | /*# sourceMappingURL=vue-good-links.min.css.map */ -------------------------------------------------------------------------------- /dist/vue-good-links.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["dist/vgl-wave.vue.0.vue.component.scss","dist/vgl-rollup.vue.0.vue.component.scss","dist/vgl-slidein.vue.0.vue.component.scss","dist/vgl-ghost.vue.0.vue.component.scss","dist/vgl-swing.vue.0.vue.component.scss","dist/vgl-rotate.vue.0.vue.component.scss"],"names":[],"mappings":"AAEE,yCACE,iBAAmB,CAAE,AACrB,2CACE,kBAAmB,AACnB,6BAA+B,AAC/B,QAAU,CAAE,AACd,sDACE,UAAY,CAAE;ACTpB,iBACE,kBAAmB,AACnB,qBAAsB,AACtB,mBAAoB,AACpB,eAAiB,CAAE,AACnB,wEACE,mBAAqB,AACrB,qBAAsB,AACtB,iBAAmB,CAAE,AACvB,kCACE,eAAkB,CAAE;ACVxB,kBACE,kBAAmB,AACnB,qBAAsB,AACtB,mBAAoB,AACpB,gBAAiB,AACjB,kBAAoB,CAAE,AACtB,4EACE,mBAAqB,AACrB,qBAAsB,AACtB,iBAAmB,CAAE;ACTzB,gBACE,kBAAmB,AACnB,qBAAsB,AACtB,mBAAoB,AACpB,kBAAoB,CAAE,AACtB,oEACE,mBAAqB,AACrB,qBAAsB,AACtB,iBAAmB,CAAE,AACvB,oCACE,UAAa,CAAE,AACjB,gCACE,qEAAsE,AACtE,qCAAyC,AACzC,SAAW,CAAE,AACb,2CACE,UAAW,AACX,2DAAiE,CAAE;ACjBzE,gBACE,kBAAmB,AAEnB,mBAAoB,AACpB,kBAAoB,CAAE,AACtB,oFAHA,oBAAsB,CAII,AAC1B,oCACE,uBAAyB,AACzB,2BAA6B,CAAE,AACjC,gCACE,kBAAmB,AACnB,0BAA2B,AAC3B,yBAA2B,AAC3B,qBAAsB,AACtB,oBAAqB,AACrB,sBAAwB,AACxB,UAAa,CAAE,AACjB,2BACE,iBAAmB,CAAE,AACrB,2CACE,uBAAyB,CAAE;ACrBjC,iBACE,kBAAmB,AACnB,qBAAsB,AACtB,mBAAoB,AACpB,kBAAoB,CAAE,AACtB,wEACE,qBAAsB,AACtB,iBAAmB,CAAE,AACvB,sCACE,gBAAiB,AACjB,kBAAqB,CAAE,AACzB,kCACE,0BAA2B,AAC3B,mBAAqB,AACrB,sBAAwB,AACxB,UAAa,CAAE,AACjB,4BACE,kBAAmB,AACnB,2BAA6B,CAAE,AAC/B,iDACE,yBAA2B,CAAE,AAC/B,6CACE,uBAAyB,CAAE","file":"dist/vue-good-links.min.css","sourcesContent":[".vgl-wave-wrap {\n position: relative; }\n .vgl-wave-wrap .vgl-lettr {\n position: relative; }\n .vgl-wave-wrap .vgl-lettr .vgl-lettr-inner {\n position: absolute;\n transition: all 0.15s ease-out;\n bottom: 0; }\n .vgl-wave-wrap .vgl-lettr.vgl-active .vgl-lettr-inner {\n bottom: 20%; }\n",".vgl-rollup-wrap {\n position: relative;\n display: inline-block;\n vertical-align: top;\n overflow: hidden; }\n .vgl-rollup-wrap .vgl-rollup-original, .vgl-rollup-wrap .vgl-rollup-bold {\n transition: all 0.3s;\n display: inline-block;\n position: absolute; }\n .vgl-rollup-wrap .vgl-rollup-bold {\n font-weight: bold; }\n",".vgl-slidein-wrap {\n position: relative;\n display: inline-block;\n vertical-align: top;\n overflow: hidden;\n white-space: nowrap; }\n .vgl-slidein-wrap .vgl-slidein-original, .vgl-slidein-wrap .vgl-slidein-bold {\n transition: all 0.3s;\n display: inline-block;\n position: absolute; }\n",".vgl-ghost-wrap {\n position: relative;\n display: inline-block;\n vertical-align: top;\n white-space: nowrap; }\n .vgl-ghost-wrap .vgl-ghost-original, .vgl-ghost-wrap .vgl-ghost-bold {\n transition: all 0.3s;\n display: inline-block;\n position: absolute; }\n .vgl-ghost-wrap .vgl-ghost-original {\n opacity: 0.6; }\n .vgl-ghost-wrap .vgl-ghost-bold {\n transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);\n transition: transform 0.3s, opacity 0.3s;\n opacity: 0; }\n .vgl-ghost-wrap .vgl-ghost-bold.vgl-active {\n opacity: 1;\n transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); }\n",".vgl-swing-wrap {\n position: relative;\n display: inline-block;\n vertical-align: top;\n white-space: nowrap; }\n .vgl-swing-wrap .vgl-swing-original, .vgl-swing-wrap .vgl-swing-bold {\n display: inline-block; }\n .vgl-swing-wrap .vgl-swing-original {\n transform-origin: 0% 50%;\n transform-style: preserve-3d; }\n .vgl-swing-wrap .vgl-swing-bold {\n position: absolute;\n transform: rotateX(270deg);\n transition: transform 0.6s;\n transform-origin: 0 0;\n pointer-events: none;\n background-color: black;\n color: white; }\n .vgl-swing-wrap.vgl-active {\n perspective: 800px; }\n .vgl-swing-wrap.vgl-active .vgl-swing-bold {\n transform: rotateX(0deg); }\n",".vgl-rotate-wrap {\n position: relative;\n display: inline-block;\n vertical-align: top;\n white-space: nowrap; }\n .vgl-rotate-wrap .vgl-rotate-original, .vgl-rotate-wrap .vgl-rotate-bold {\n display: inline-block;\n position: absolute; }\n .vgl-rotate-wrap .vgl-rotate-original {\n background: grey;\n transition: all 0.4s; }\n .vgl-rotate-wrap .vgl-rotate-bold {\n transform: rotateY(-90deg);\n transition: all 0.4s;\n background-color: black;\n color: white; }\n .vgl-rotate-wrap.vgl-active {\n perspective: 800px;\n transform-style: preserve-3d; }\n .vgl-rotate-wrap.vgl-active .vgl-rotate-original {\n transform: rotateY(-90deg); }\n .vgl-rotate-wrap.vgl-active .vgl-rotate-bold {\n transform: rotateY(0deg); }\n"]} -------------------------------------------------------------------------------- /dist/vue-good-links.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vue-good-links v0.0.3 3 | * (c) 2018-present xaksis 4 | * https://github.com/xaksis/vue-good-links 5 | * Released under the MIT License. 6 | */ 7 | 8 | !function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.vueGoodLinks={})}(this,function(t){"use strict";function n(t,n,e){return n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},i="Expected a function",a=NaN,s="[object Symbol]",o=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,c=/^0o[0-7]+$/i,u=parseInt,p="object"==typeof e&&e&&e.Object===Object&&e,f="object"==typeof self&&self&&self.Object===Object&&self,v=p||f||Function("return this")(),d=Object.prototype.toString,g=Math.max,h=Math.min,m=function(){return v.Date.now()};function y(t){var n=typeof t;return!!t&&("object"==n||"function"==n)}function S(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&d.call(t)==s}(t))return a;if(y(t)){var n="function"==typeof t.valueOf?t.valueOf():t;t=y(n)?n+"":n}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(o,"");var e=l.test(t);return e||c.test(t)?u(t.slice(2),e?2:8):r.test(t)?a:+t}var x,_=function(t,n,e){var a,s,o,r,l,c,u=0,p=!1,f=!1,v=!0;if("function"!=typeof t)throw new TypeError(i);function d(n){var e=a,i=s;return a=s=void 0,u=n,r=t.apply(i,e)}function x(t){var e=t-c;return void 0===c||e>=n||e<0||f&&t-u>=o}function _(){var t=m();if(x(t))return b(t);l=setTimeout(_,function(t){var e=n-(t-c);return f?h(e,o-(t-u)):e}(t))}function b(t){return l=void 0,v&&a?d(t):(a=s=void 0,r)}function O(){var t=m(),e=x(t);if(a=arguments,s=this,c=t,e){if(void 0===l)return function(t){return u=t,l=setTimeout(_,n),p?d(t):r}(c);if(f)return l=setTimeout(_,n),d(c)}return void 0===l&&(l=setTimeout(_,n)),r}return n=S(n)||0,y(e)&&(p=!!e.leading,o=(f="maxWait"in e)?g(S(e.maxWait)||0,n):o,v="trailing"in e?!!e.trailing:v),O.cancel=function(){void 0!==l&&clearTimeout(l),u=0,a=c=s=l=void 0},O.flush=function(){return void 0===l?r:b(m())},O},b={render:function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("span",t._g({staticClass:"vgl-wave-wrap",on:{mouseover:t.startAnimating,mouseleave:t.stopAnimating}},t.$listeners),t._l(t.letters,function(n,i){return e("span",{key:i,staticClass:"vgl-lettr",class:{"vgl-active":t.activeIndex===i}},[e("span",{staticClass:"vgl-lettr-inner"},[t._v(t._s(n))]),e("span",{staticStyle:{opacity:"0"}},[t._v(t._s(n))])])}))},staticRenderFns:[],name:"vgl-wave",props:{text:{type:String,default:"Sample Text"}},data:function(){return{activeIndex:-1,timeouts:[],intervals:[]}},computed:{letters:function(){return this.text?this.text.split(""):""}},methods:{startAnimating:_(function(){var t=this;if(!(this.activeIndex>-1))for(var n=function(n){t.timeouts.push(setTimeout(function(){t.activeIndex=n,t.intervals.push(setInterval(function(){t.activeIndex=n},150*t.letters.length))},150*n))},e=0;e\n * Build: `lodash modularize exports=\"npm\" -o ./`\n * Copyright jQuery Foundation and other contributors \n * Released under MIT license \n * Based on Underscore.js 1.8.3 \n * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors\n */\n\n/** Used as the `TypeError` message for \"Functions\" methods. */\nvar FUNC_ERROR_TEXT = 'Expected a function';\n\n/** Used as references for various `Number` constants. */\nvar NAN = 0 / 0;\n\n/** `Object#toString` result references. */\nvar symbolTag = '[object Symbol]';\n\n/** Used to match leading and trailing whitespace. */\nvar reTrim = /^\\s+|\\s+$/g;\n\n/** Used to detect bad signed hexadecimal string values. */\nvar reIsBadHex = /^[-+]0x[0-9a-f]+$/i;\n\n/** Used to detect binary string values. */\nvar reIsBinary = /^0b[01]+$/i;\n\n/** Used to detect octal string values. */\nvar reIsOctal = /^0o[0-7]+$/i;\n\n/** Built-in method references without a dependency on `root`. */\nvar freeParseInt = parseInt;\n\n/** Detect free variable `global` from Node.js. */\nvar freeGlobal = typeof global == 'object' && global && global.Object === Object && global;\n\n/** Detect free variable `self`. */\nvar freeSelf = typeof self == 'object' && self && self.Object === Object && self;\n\n/** Used as a reference to the global object. */\nvar root = freeGlobal || freeSelf || Function('return this')();\n\n/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/**\n * Used to resolve the\n * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)\n * of values.\n */\nvar objectToString = objectProto.toString;\n\n/* Built-in method references for those with the same name as other `lodash` methods. */\nvar nativeMax = Math.max,\n nativeMin = Math.min;\n\n/**\n * Gets the timestamp of the number of milliseconds that have elapsed since\n * the Unix epoch (1 January 1970 00:00:00 UTC).\n *\n * @static\n * @memberOf _\n * @since 2.4.0\n * @category Date\n * @returns {number} Returns the timestamp.\n * @example\n *\n * _.defer(function(stamp) {\n * console.log(_.now() - stamp);\n * }, _.now());\n * // => Logs the number of milliseconds it took for the deferred invocation.\n */\nvar now = function() {\n return root.Date.now();\n};\n\n/**\n * Creates a debounced function that delays invoking `func` until after `wait`\n * milliseconds have elapsed since the last time the debounced function was\n * invoked. The debounced function comes with a `cancel` method to cancel\n * delayed `func` invocations and a `flush` method to immediately invoke them.\n * Provide `options` to indicate whether `func` should be invoked on the\n * leading and/or trailing edge of the `wait` timeout. The `func` is invoked\n * with the last arguments provided to the debounced function. Subsequent\n * calls to the debounced function return the result of the last `func`\n * invocation.\n *\n * **Note:** If `leading` and `trailing` options are `true`, `func` is\n * invoked on the trailing edge of the timeout only if the debounced function\n * is invoked more than once during the `wait` timeout.\n *\n * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n * until to the next tick, similar to `setTimeout` with a timeout of `0`.\n *\n * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)\n * for details over the differences between `_.debounce` and `_.throttle`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to debounce.\n * @param {number} [wait=0] The number of milliseconds to delay.\n * @param {Object} [options={}] The options object.\n * @param {boolean} [options.leading=false]\n * Specify invoking on the leading edge of the timeout.\n * @param {number} [options.maxWait]\n * The maximum time `func` is allowed to be delayed before it's invoked.\n * @param {boolean} [options.trailing=true]\n * Specify invoking on the trailing edge of the timeout.\n * @returns {Function} Returns the new debounced function.\n * @example\n *\n * // Avoid costly calculations while the window size is in flux.\n * jQuery(window).on('resize', _.debounce(calculateLayout, 150));\n *\n * // Invoke `sendMail` when clicked, debouncing subsequent calls.\n * jQuery(element).on('click', _.debounce(sendMail, 300, {\n * 'leading': true,\n * 'trailing': false\n * }));\n *\n * // Ensure `batchLog` is invoked once after 1 second of debounced calls.\n * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });\n * var source = new EventSource('/stream');\n * jQuery(source).on('message', debounced);\n *\n * // Cancel the trailing debounced invocation.\n * jQuery(window).on('popstate', debounced.cancel);\n */\nfunction debounce(func, wait, options) {\n var lastArgs,\n lastThis,\n maxWait,\n result,\n timerId,\n lastCallTime,\n lastInvokeTime = 0,\n leading = false,\n maxing = false,\n trailing = true;\n\n if (typeof func != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n wait = toNumber(wait) || 0;\n if (isObject(options)) {\n leading = !!options.leading;\n maxing = 'maxWait' in options;\n maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;\n trailing = 'trailing' in options ? !!options.trailing : trailing;\n }\n\n function invokeFunc(time) {\n var args = lastArgs,\n thisArg = lastThis;\n\n lastArgs = lastThis = undefined;\n lastInvokeTime = time;\n result = func.apply(thisArg, args);\n return result;\n }\n\n function leadingEdge(time) {\n // Reset any `maxWait` timer.\n lastInvokeTime = time;\n // Start the timer for the trailing edge.\n timerId = setTimeout(timerExpired, wait);\n // Invoke the leading edge.\n return leading ? invokeFunc(time) : result;\n }\n\n function remainingWait(time) {\n var timeSinceLastCall = time - lastCallTime,\n timeSinceLastInvoke = time - lastInvokeTime,\n result = wait - timeSinceLastCall;\n\n return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;\n }\n\n function shouldInvoke(time) {\n var timeSinceLastCall = time - lastCallTime,\n timeSinceLastInvoke = time - lastInvokeTime;\n\n // Either this is the first call, activity has stopped and we're at the\n // trailing edge, the system time has gone backwards and we're treating\n // it as the trailing edge, or we've hit the `maxWait` limit.\n return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||\n (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));\n }\n\n function timerExpired() {\n var time = now();\n if (shouldInvoke(time)) {\n return trailingEdge(time);\n }\n // Restart the timer.\n timerId = setTimeout(timerExpired, remainingWait(time));\n }\n\n function trailingEdge(time) {\n timerId = undefined;\n\n // Only invoke if we have `lastArgs` which means `func` has been\n // debounced at least once.\n if (trailing && lastArgs) {\n return invokeFunc(time);\n }\n lastArgs = lastThis = undefined;\n return result;\n }\n\n function cancel() {\n if (timerId !== undefined) {\n clearTimeout(timerId);\n }\n lastInvokeTime = 0;\n lastArgs = lastCallTime = lastThis = timerId = undefined;\n }\n\n function flush() {\n return timerId === undefined ? result : trailingEdge(now());\n }\n\n function debounced() {\n var time = now(),\n isInvoking = shouldInvoke(time);\n\n lastArgs = arguments;\n lastThis = this;\n lastCallTime = time;\n\n if (isInvoking) {\n if (timerId === undefined) {\n return leadingEdge(lastCallTime);\n }\n if (maxing) {\n // Handle invocations in a tight loop.\n timerId = setTimeout(timerExpired, wait);\n return invokeFunc(lastCallTime);\n }\n }\n if (timerId === undefined) {\n timerId = setTimeout(timerExpired, wait);\n }\n return result;\n }\n debounced.cancel = cancel;\n debounced.flush = flush;\n return debounced;\n}\n\n/**\n * Checks if `value` is the\n * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)\n * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an object, else `false`.\n * @example\n *\n * _.isObject({});\n * // => true\n *\n * _.isObject([1, 2, 3]);\n * // => true\n *\n * _.isObject(_.noop);\n * // => true\n *\n * _.isObject(null);\n * // => false\n */\nfunction isObject(value) {\n var type = typeof value;\n return !!value && (type == 'object' || type == 'function');\n}\n\n/**\n * Checks if `value` is object-like. A value is object-like if it's not `null`\n * and has a `typeof` result of \"object\".\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is object-like, else `false`.\n * @example\n *\n * _.isObjectLike({});\n * // => true\n *\n * _.isObjectLike([1, 2, 3]);\n * // => true\n *\n * _.isObjectLike(_.noop);\n * // => false\n *\n * _.isObjectLike(null);\n * // => false\n */\nfunction isObjectLike(value) {\n return !!value && typeof value == 'object';\n}\n\n/**\n * Checks if `value` is classified as a `Symbol` primitive or object.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.\n * @example\n *\n * _.isSymbol(Symbol.iterator);\n * // => true\n *\n * _.isSymbol('abc');\n * // => false\n */\nfunction isSymbol(value) {\n return typeof value == 'symbol' ||\n (isObjectLike(value) && objectToString.call(value) == symbolTag);\n}\n\n/**\n * Converts `value` to a number.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to process.\n * @returns {number} Returns the number.\n * @example\n *\n * _.toNumber(3.2);\n * // => 3.2\n *\n * _.toNumber(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toNumber(Infinity);\n * // => Infinity\n *\n * _.toNumber('3.2');\n * // => 3.2\n */\nfunction toNumber(value) {\n if (typeof value == 'number') {\n return value;\n }\n if (isSymbol(value)) {\n return NAN;\n }\n if (isObject(value)) {\n var other = typeof value.valueOf == 'function' ? value.valueOf() : value;\n value = isObject(other) ? (other + '') : other;\n }\n if (typeof value != 'string') {\n return value === 0 ? value : +value;\n }\n value = value.replace(reTrim, '');\n var isBinary = reIsBinary.test(value);\n return (isBinary || reIsOctal.test(value))\n ? freeParseInt(value.slice(2), isBinary ? 2 : 8)\n : (reIsBadHex.test(value) ? NAN : +value);\n}\n\nmodule.exports = debounce;\n","\n\n\n\n\n","\n\n\n\n\n","\n\n\n\n\n","\n\n\n\n\n","\n\n\n\n\n","\n\n\n\n\n","import VglWave from './vgl-wave/vgl-wave.vue';\nimport VglRollup from './vgl-rollup/vgl-rollup.vue';\nimport VglSlidein from './vgl-slidein/vgl-slidein.vue';\nimport VglGhost from './vgl-ghost/vgl-ghost.vue';\nimport VglSwing from './vgl-swing/vgl-swing.vue';\nimport VglRotate from './vgl-rotate/vgl-rotate.vue';\n\nconst components = {\n [VglWave.name]: VglWave,\n [VglRollup.name]: VglRollup,\n [VglSlidein.name]: VglSlidein,\n [VglGhost.name]: VglGhost,\n [VglSwing.name]: VglSwing,\n [VglRotate.name]: VglRotate,\n};\n\nfunction install(Vue, options) {\n if (options && options.components) {\n options.components.forEach(c => Vue.component(c.name, components[c.name]));\n } else {\n Object.keys(components).forEach((key) => {\n Vue.component(key, components[key]);\n });\n }\n}\n\n// Automatic installation if Vue has been added to the global scope.\nif (typeof window !== 'undefined' && window.Vue) {\n window.Vue.use({ install });\n}\n\nexport default { install };\n\nexport {\n VglWave,\n VglRollup,\n VglSlidein,\n VglGhost,\n VglSwing,\n VglRotate,\n};\n\n"],"names":["FUNC_ERROR_TEXT","NAN","symbolTag","reTrim","reIsBadHex","reIsBinary","reIsOctal","freeParseInt","parseInt","freeGlobal","global","Object","freeSelf","self","root","Function","objectToString","prototype","toString","nativeMax","Math","max","nativeMin","min","now","Date","isObject","value","type","toNumber","isObjectLike","call","isSymbol","other","valueOf","replace","isBinary","test","slice","func","wait","options","lastArgs","lastThis","maxWait","result","timerId","lastCallTime","lastInvokeTime","leading","maxing","trailing","TypeError","invokeFunc","time","args","thisArg","undefined","apply","shouldInvoke","timeSinceLastCall","timerExpired","trailingEdge","setTimeout","remainingWait","debounced","isInvoking","arguments","this","leadingEdge","cancel","clearTimeout","flush","String","text","split","debounce","activeIndex","i","timeouts","push","intervals","setInterval","_this","letters","length","originalSpanStyle","active","spanHeight","hoverSpanStyle","originalSpan","$refs","originalText","spanStyle","window","getComputedStyle","lineHeight","init","spanWidth","mainText","offsetWidth","horizontalPadding","components","VglWave","name","VglRollup","VglSlidein","VglGhost","VglSwing","VglRotate","install","Vue","forEach","component","c","keys","key","use"],"mappings":";;;;;;;kaAUIA,EAAkB,sBAGlBC,EAAM,IAGNC,EAAY,kBAGZC,EAAS,aAGTC,EAAa,qBAGbC,EAAa,aAGbC,EAAY,cAGZC,EAAeC,SAGfC,EAA8B,iBAAVC,GAAsBA,GAAUA,EAAOC,SAAWA,QAAUD,EAGhFE,EAA0B,iBAARC,MAAoBA,MAAQA,KAAKF,SAAWA,QAAUE,KAGxEC,EAAOL,GAAcG,GAAYG,SAAS,cAATA,GAUjCC,EAPcL,OAAOM,UAOQC,SAG7BC,EAAYC,KAAKC,IACjBC,EAAYF,KAAKG,IAkBjBC,EAAM,WACR,OAAOV,EAAKW,KAAKD,OA4MnB,SAASE,EAASC,GAChB,IAAIC,SAAcD,EAClB,QAASA,IAAkB,UAARC,GAA4B,YAARA,GA4EzC,SAASC,EAASF,GAChB,GAAoB,iBAATA,EACT,OAAOA,EAET,GAhCF,SAAkBA,GAChB,MAAuB,iBAATA,GAtBhB,SAAsBA,GACpB,QAASA,GAAyB,iBAATA,EAsBtBG,CAAaH,IAAUX,EAAee,KAAKJ,IAAUzB,EA8BpD8B,CAASL,GACX,OAAO1B,EAET,GAAIyB,EAASC,GAAQ,CACnB,IAAIM,EAAgC,mBAAjBN,EAAMO,QAAwBP,EAAMO,UAAYP,EACnEA,EAAQD,EAASO,GAAUA,EAAQ,GAAMA,EAE3C,GAAoB,iBAATN,EACT,OAAiB,IAAVA,EAAcA,GAASA,EAEhCA,EAAQA,EAAMQ,QAAQhC,EAAQ,IAC9B,IAAIiC,EAAW/B,EAAWgC,KAAKV,GAC/B,OAAQS,GAAY9B,EAAU+B,KAAKV,GAC/BpB,EAAaoB,EAAMW,MAAM,GAAIF,EAAW,EAAI,GAC3ChC,EAAWiC,KAAKV,GAAS1B,GAAO0B,EAGvC,QAtPA,SAAkBY,EAAMC,EAAMC,GAC5B,IAAIC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EAAiB,EACjBC,GAAU,EACVC,GAAS,EACTC,GAAW,EAEf,GAAmB,mBAARZ,EACT,MAAM,IAAIa,UAAUpD,GAUtB,SAASqD,EAAWC,GAClB,IAAIC,EAAOb,EACPc,EAAUb,EAKd,OAHAD,EAAWC,OAAWc,EACtBT,EAAiBM,EACjBT,EAASN,EAAKmB,MAAMF,EAASD,GAqB/B,SAASI,EAAaL,GACpB,IAAIM,EAAoBN,EAAOP,EAM/B,YAAyBU,IAAjBV,GAA+Ba,GAAqBpB,GACzDoB,EAAoB,GAAOV,GANJI,EAAON,GAM8BJ,EAGjE,SAASiB,IACP,IAAIP,EAAO9B,IACX,GAAImC,EAAaL,GACf,OAAOQ,EAAaR,GAGtBR,EAAUiB,WAAWF,EAzBvB,SAAuBP,GACrB,IAEIT,EAASL,GAFWc,EAAOP,GAI/B,OAAOG,EAAS5B,EAAUuB,EAAQD,GAHRU,EAAON,IAGkCH,EAoBhCmB,CAAcV,IAGnD,SAASQ,EAAaR,GAKpB,OAJAR,OAAUW,EAINN,GAAYT,EACPW,EAAWC,IAEpBZ,EAAWC,OAAWc,EACfZ,GAeT,SAASoB,IACP,IAAIX,EAAO9B,IACP0C,EAAaP,EAAaL,GAM9B,GAJAZ,EAAWyB,UACXxB,EAAWyB,KACXrB,EAAeO,EAEXY,EAAY,CACd,QAAgBT,IAAZX,EACF,OAvEN,SAAqBQ,GAMnB,OAJAN,EAAiBM,EAEjBR,EAAUiB,WAAWF,EAAcrB,GAE5BS,EAAUI,EAAWC,GAAQT,EAiEzBwB,CAAYtB,GAErB,GAAIG,EAGF,OADAJ,EAAUiB,WAAWF,EAAcrB,GAC5Ba,EAAWN,GAMtB,YAHgBU,IAAZX,IACFA,EAAUiB,WAAWF,EAAcrB,IAE9BK,EAIT,OAxGAL,EAAOX,EAASW,IAAS,EACrBd,EAASe,KACXQ,IAAYR,EAAQQ,QAEpBL,GADAM,EAAS,YAAaT,GACHtB,EAAUU,EAASY,EAAQG,UAAY,EAAGJ,GAAQI,EACrEO,EAAW,aAAcV,IAAYA,EAAQU,SAAWA,GAiG1Dc,EAAUK,OAnCV,gBACkBb,IAAZX,GACFyB,aAAazB,GAEfE,EAAiB,EACjBN,EAAWK,EAAeJ,EAAWG,OAAUW,GA+BjDQ,EAAUO,MA5BV,WACE,YAAmBf,IAAZX,EAAwBD,EAASiB,EAAatC,MA4BhDyC,qcCvOD,6BAGIQ,eACG,oDAKK,iEAOPL,KAAKM,KAAON,KAAKM,KAAKC,MAAM,IAAM,6BAI3BC,EAAS,2BAGnBR,KAAKS,aAAe,sBAEfC,KACFC,SAASC,KAAKjB,WAAW,aAEvBc,YAAcC,IAGdG,UAAUD,KAAKE,YAAY,aACzBL,YAAcC,GAXX,IAYPK,EAAKC,QAAQC,UAZN,IAaTP,KATIA,EAAI,EAAGA,EAAIV,KAAKgB,QAAQC,OAAQP,MAAhCA,IAWR,mBAEYF,EAAS,eACjB,IAAIE,EAAI,EAAGA,EAAIV,KAAKW,SAASM,OAAQP,iBAC3BV,KAAKW,SAASD,kBACbV,KAAKa,UAAUH,SAE1BC,iBACAE,kBACAJ,aAAe,GACnB,4lBC3CC,+BAGIJ,eACG,oCAGH9D,eAEG,8CAMHA,eAEG,sDAQD,aACI,2EAMPyD,KAAKkB,uBACHlB,KAAKmB,kBAAanB,KAAKoB,YAAe,8DAKxCpB,KAAKqB,oBACHrB,KAAKmB,OAAS,YAAOnB,KAAKoB,wCAKnBZ,EAAS,gBAClBW,QAAS,GACb,mBAEYX,EAAS,gBACjBW,QAAS,GACb,yBAGKG,EAAetB,KAAKuB,MAAMC,aAC1BC,EAAYC,OAAOC,iBAAiBL,EAAc,WAEnDF,WAAaK,EAAUG,qCAMzBC,okBC7DD,gCAGIxB,eACG,oCAGH9D,eAEG,8CAMHA,eAEG,sDAQD,YACG,iFAMA,WACNyD,KAAKkB,wBACFlB,KAAKmB,iBAAYnB,KAAK8B,WAAc,4EAKzB,cACV,gBACE,WACN9B,KAAKqB,qBACFrB,KAAKmB,OAAS,aAAQnB,KAAK8B,uCAKrBtB,EAAS,gBAClBW,QAAS,GACb,mBAEYX,EAAS,gBACjBW,QAAS,GACb,yBAIKG,EAAetB,KAAKuB,MAAMQ,cAC3BD,oBAAeR,EAAaU,4CAI9BH,ihBChED,8BAGIxB,eACG,oCAGH9D,eAEG,8CAMHA,eAEG,sDAQD,YACG,wCAMGiE,EAAS,gBAClBW,QAAS,GACb,mBAEYX,EAAS,gBACjBW,QAAS,GACb,yBAIKG,EAAetB,KAAKuB,MAAMC,kBAE3BM,oBAAeR,EAAaU,YAAeC,mfC9C9C,8BAGI5B,eACG,oCAGH9D,eAEG,8CAMHA,eAEG,sDAQD,YACG,iFAMA,WACNyD,KAAKkB,wBACFlB,KAAKmB,iBAAYnB,KAAK8B,WAAc,oEAKjC,WACN9B,KAAKqB,qBACFrB,KAAKmB,OAAS,aAAQnB,KAAK8B,uCAKrBtB,EAAS,gBAClBW,QAAS,GACb,mBAEYX,EAAS,gBACjBW,QAAS,GACb,yBAIKG,EAAetB,KAAKuB,MAAMC,kBAE3BM,oBAAeR,EAAaU,YAAeC,4mBCtD9C,+BAGI5B,eACG,oCAGH9D,eAEG,8CAMHA,eAEG,sDAQD,YACG,iFAMA,WACNyD,KAAKkB,sDACqBlB,KAAK8B,6EAKzB,WACN9B,KAAKqB,kDACoBrB,KAAK8B,uCAKrBtB,EAAS,gBAClBW,QAAS,GACb,mBAEYX,EAAS,gBACjBW,QAAS,GACb,yBAIKG,EAAetB,KAAKuB,MAAMC,kBAE3BM,oBAAgBR,EAAaU,YAAe,kCAI9CH,uBC9EHK,UACHC,EAAQC,KAAOD,OACfE,EAAUD,KAAOC,OACjBC,EAAWF,KAAOE,OAClBC,EAASH,KAAOG,OAChBC,EAASJ,KAAOI,OAChBC,EAAUL,KAAOK,MAGpB,SAASC,EAAQC,EAAKtE,GAChBA,GAAWA,EAAQ6D,aACbA,WAAWU,QAAQ,mBAAKD,EAAIE,UAAUC,EAAEV,KAAMF,EAAWY,EAAEV,gBAE5DW,KAAKb,GAAYU,QAAQ,SAACI,KAC3BH,UAAUG,EAAKd,EAAWc,MAMd,oBAAXtB,QAA0BA,OAAOiB,YACnCA,IAAIM"} -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | vue-good-links
-------------------------------------------------------------------------------- /docs/main.1218fcc6.js: -------------------------------------------------------------------------------- 1 | !function(t){function e(e){for(var a,s,o=e[0],l=e[1],c=e[2],v=0,p=[];v-1))for(var e=function(e){t.timeouts.push(setTimeout(function(){t.activeIndex=e,t.intervals.push(setInterval(function(){t.activeIndex=e},150*t.letters.length))},150*e))},n=0;n')])])},function(){var t=this.$createElement,e=this._self._c||t;return e("pre",[e("code",{staticClass:"language-markup"},[this._v('')])])},function(){var t=this.$createElement,e=this._self._c||t;return e("pre",[e("code",{staticClass:"language-markup"},[this._v('')])])},function(){var t=this.$createElement,e=this._self._c||t;return e("pre",[e("code",{staticClass:"language-markup"},[this._v('')])])},function(){var t=this.$createElement,e=this._self._c||t;return e("pre",[e("code",{staticClass:"language-markup"},[this._v('')])])},function(){var t=this.$createElement,e=this._self._c||t;return e("pre",[e("code",{staticClass:"language-markup"},[this._v('')])])},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"container"},[n("div",{staticClass:"vgl-footer"},[n("div",{staticClass:"center text-muted"},[t._v("A project by "),n("a",{attrs:{href:"https://github.com/xaksis"}},[t._v("xaksis")])]),t._v(" "),n("div",{staticClass:"center space-top"},[n("span",{staticClass:"text-muted"},[t._v("you may also like")]),t._v(" "),n("br"),t._v(" "),n("a",{attrs:{href:"https://github.com/xaksis/vue-good-table"}},[t._v("vue-good-table")]),t._v("\n    &   \n "),n("a",{attrs:{href:"https://github.com/xaksis/vue-good-wizard"}},[t._v("vue-good-wizard")])])])])}],!1,null,null,null).exports);a.a.use(E),a.a.config.productionTip=!1,new a.a({el:"#app",render:function(t){return t($)}})},,,function(t,e,n){"use strict";var a=n(3);n.n(a).a},,,,,,function(t,e,n){"use strict";var a=n(5);n.n(a).a},,function(t,e,n){"use strict";var a=n(6);n.n(a).a},,function(t,e,n){"use strict";var a=n(7);n.n(a).a},,function(t,e,n){"use strict";var a=n(8);n.n(a).a},,function(t,e,n){"use strict";var a=n(9);n.n(a).a},,function(t,e,n){"use strict";var a=n(10);n.n(a).a},,,,function(t,e,n){t.exports=n(12)}]); 2 | //# sourceMappingURL=main.1218fcc6.js.map -------------------------------------------------------------------------------- /docs/main.889cb514.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);.vgl-wave-wrap,.vgl-wave-wrap .vgl-lettr{position:relative}.vgl-wave-wrap .vgl-lettr .vgl-lettr-inner{position:absolute;transition:all .15s ease-out;bottom:0}.vgl-wave-wrap .vgl-lettr.vgl-active .vgl-lettr-inner{bottom:20%}.vgl-rollup-wrap{position:relative;display:inline-block;vertical-align:top;overflow:hidden}.vgl-rollup-wrap .vgl-rollup-bold,.vgl-rollup-wrap .vgl-rollup-original{transition:all .3s;display:inline-block;position:absolute}.vgl-rollup-wrap .vgl-rollup-bold{font-weight:700}.vgl-slidein-wrap{position:relative;display:inline-block;vertical-align:top;overflow:hidden;white-space:nowrap}.vgl-slidein-wrap .vgl-slidein-bold,.vgl-slidein-wrap .vgl-slidein-original{transition:all .3s;display:inline-block;position:absolute}.vgl-ghost-wrap{position:relative;display:inline-block;vertical-align:top;white-space:nowrap}.vgl-ghost-wrap .vgl-ghost-bold,.vgl-ghost-wrap .vgl-ghost-original{transition:all .3s;display:inline-block;position:absolute}.vgl-ghost-wrap .vgl-ghost-original{opacity:.6}.vgl-ghost-wrap .vgl-ghost-bold{transform:scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);transition:transform .3s,opacity .3s;opacity:0}.vgl-ghost-wrap .vgl-ghost-bold.vgl-active{opacity:1;transform:scale(1) translateX(0) translateY(0) rotate(0deg)}.vgl-swing-wrap{position:relative;vertical-align:top;white-space:nowrap}.vgl-swing-wrap,.vgl-swing-wrap .vgl-swing-bold,.vgl-swing-wrap .vgl-swing-original{display:inline-block}.vgl-swing-wrap .vgl-swing-original{transform-origin:0 50%;transform-style:preserve-3d}.vgl-swing-wrap .vgl-swing-bold{position:absolute;transform:rotateX(270deg);transition:transform .6s;transform-origin:0 0;pointer-events:none;background-color:#000;color:#fff}.vgl-swing-wrap.vgl-active{perspective:800px}.vgl-swing-wrap.vgl-active .vgl-swing-bold{transform:rotateX(0deg)}.vgl-rotate-wrap{position:relative;display:inline-block;vertical-align:top;white-space:nowrap}.vgl-rotate-wrap .vgl-rotate-bold,.vgl-rotate-wrap .vgl-rotate-original{display:inline-block;position:absolute}.vgl-rotate-wrap .vgl-rotate-original{background:grey;transition:all .4s}.vgl-rotate-wrap .vgl-rotate-bold{transform:rotateY(-90deg);transition:all .4s;background-color:#000;color:#fff}.vgl-rotate-wrap.vgl-active{perspective:800px;transform-style:preserve-3d}.vgl-rotate-wrap.vgl-active .vgl-rotate-original{transform:rotateY(-90deg)}.vgl-rotate-wrap.vgl-active .vgl-rotate-bold{transform:rotateY(0deg)}body,html{height:100%;width:100%;margin:0;padding:0;left:0;top:0;font-size:100%}*{font-family:Lato,Helvetica,sans-serif;color:#333447;line-height:1.5}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.375rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:.875rem}p{font-size:1.125rem;font-weight:200}.font-light{font-weight:300}.font-regular{font-weight:400}.font-heavy{font-weight:700}.left{text-align:left}.right{text-align:right}.center{text-align:center;margin-left:auto;margin-right:auto}.justify{text-align:justify}.hidden-sm{display:none}.container{width:90%;margin-left:auto;margin-right:auto}@media only screen and (min-width:33.75em){.container{width:80%}}@media only screen and (min-width:60em){.container{width:75%;max-width:60rem}}.row{position:relative;width:100%}.row [class^=col]{float:left;margin:.5rem 2%;min-height:.125rem}.row:after{content:"";display:table;clear:both}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{width:96%}.col-1-sm{width:4.33333%}.col-2-sm{width:12.66667%}.col-3-sm{width:21%}.col-4-sm{width:29.33333%}.col-5-sm{width:37.66667%}.col-6-sm{width:46%}.col-7-sm{width:54.33333%}.col-8-sm{width:62.66667%}.col-9-sm{width:71%}.col-10-sm{width:79.33333%}.col-11-sm{width:87.66667%}.col-12-sm{width:96%}@media only screen and (min-width:45em){.col-1{width:4.33333%}.col-2{width:12.66667%}.col-3{width:21%}.col-4{width:29.33333%}.col-5{width:37.66667%}.col-6{width:46%}.col-7{width:54.33333%}.col-8{width:62.66667%}.col-9{width:71%}.col-10{width:79.33333%}.col-11{width:87.66667%}.col-12{width:96%}.hidden-sm{display:block}}*{color:#636366}a{line-height:inherit}a,a *{color:#3fa46a}section{margin-bottom:30px}.title{text-align:center;text-transform:uppercase}.text-muted{opacity:.7}.vgl-footer{margin:100px 0 50px;border-radius:10px;padding:20px;background:#f1f1f4}.space-top{margin-top:20px}.github-corner:hover .octo-arm{animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}} -------------------------------------------------------------------------------- /docs/vendors~main.e734ecf8.css: -------------------------------------------------------------------------------- 1 | code[class*=language-],pre[class*=language-]{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-good-links", 3 | "version": "0.0.3", 4 | "description": "An easy to use link/text hover effect library for VueJS", 5 | "main": "dist/vue-good-links.cjs.js", 6 | "module": "dist/vue-good-links.es.js", 7 | "files": [ 8 | "dist", 9 | "src" 10 | ], 11 | "scripts": { 12 | "bundle": "bili", 13 | "dev": "poi", 14 | "dev-build": "poi build", 15 | "test": "echo \"Error: no test specified\" && exit 1" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/xaksis/vue-good-links" 20 | }, 21 | "keywords": [ 22 | "vue", 23 | "vuejs", 24 | "links", 25 | "fancy" 26 | ], 27 | "author": { 28 | "name": "xaksis", 29 | "email": "shay@crayonbits.com" 30 | }, 31 | "poi": { 32 | "entry": "dev/main.js", 33 | "outDir": "docs", 34 | "homepage": "./", 35 | "publicPath": "./", 36 | "html": { 37 | "template": "dev/index.html" 38 | } 39 | }, 40 | "license": "MIT", 41 | "dependencies": { 42 | "lodash.debounce": "^4.0.8" 43 | }, 44 | "devDependencies": { 45 | "bili": "^3.1.2", 46 | "node-sass": "^4.9.0", 47 | "poi": "^10.2.1", 48 | "prismjs": "^1.14.0", 49 | "rollup-plugin-vue": "^3.0.0", 50 | "sass-loader": "^7.0.1" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import VglWave from './vgl-wave/vgl-wave.vue'; 2 | import VglRollup from './vgl-rollup/vgl-rollup.vue'; 3 | import VglSlidein from './vgl-slidein/vgl-slidein.vue'; 4 | import VglGhost from './vgl-ghost/vgl-ghost.vue'; 5 | import VglSwing from './vgl-swing/vgl-swing.vue'; 6 | import VglRotate from './vgl-rotate/vgl-rotate.vue'; 7 | 8 | const components = { 9 | [VglWave.name]: VglWave, 10 | [VglRollup.name]: VglRollup, 11 | [VglSlidein.name]: VglSlidein, 12 | [VglGhost.name]: VglGhost, 13 | [VglSwing.name]: VglSwing, 14 | [VglRotate.name]: VglRotate, 15 | }; 16 | 17 | function install(Vue, options) { 18 | if (options && options.components) { 19 | options.components.forEach(c => Vue.component(c.name, components[c.name])); 20 | } else { 21 | Object.keys(components).forEach((key) => { 22 | Vue.component(key, components[key]); 23 | }); 24 | } 25 | } 26 | 27 | // Automatic installation if Vue has been added to the global scope. 28 | if (typeof window !== 'undefined' && window.Vue) { 29 | window.Vue.use({ install }); 30 | } 31 | 32 | export default { install }; 33 | 34 | export { 35 | VglWave, 36 | VglRollup, 37 | VglSlidein, 38 | VglGhost, 39 | VglSwing, 40 | VglRotate, 41 | }; 42 | 43 | -------------------------------------------------------------------------------- /src/vgl-ghost/vgl-ghost.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 75 | 76 | 102 | -------------------------------------------------------------------------------- /src/vgl-rollup/vgl-rollup.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 90 | 91 | 108 | -------------------------------------------------------------------------------- /src/vgl-rotate/vgl-rotate.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 92 | 93 | 126 | -------------------------------------------------------------------------------- /src/vgl-slidein/vgl-slidein.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 92 | 93 | 111 | -------------------------------------------------------------------------------- /src/vgl-swing/vgl-swing.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 87 | 88 | 119 | -------------------------------------------------------------------------------- /src/vgl-wave/vgl-wave.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 73 | 74 | 93 | --------------------------------------------------------------------------------