init

egoist · egoist · commit 98cee45fe085 · 2015-12-03T14:37:00.000+08:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,53 @@
+# app
+bundle.js
+/index.js
+/autolink.js
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
+node_modules
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear on external disk
+.Spotlight-V100
+.Trashes
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,4 @@
+webpack.config.demo.js
+bundle.js
+index.html
+/src
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 egoist 0x142857@gmail.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,44 @@
+# vue-autolink
+
+It's not just link, it's everything link-able in text.
+
+## Installation
+
+```bash
+npm i -D vue-autolink
+```
+
+## Example
+
+**app.js**
+
+```javascript
+// locally
+// `l` is lowercase
+import autoLink from 'vue-autolink/autolink'
+new Vue({
+  components: { autoLink }
+})
+// globally
+import autoLink from 'vue-autolink'
+Vue.use(autoLink)
+```
+
+**template**
+
+```html
+<!-- enable all embed and escape html -->
+<auto-link :content="content_variable" embed safe></auto-link>
+<!-- enable specific embed-able links -->
+<auto-link :content="content_variable" embed="youtube,youku"></auto-link>
+<!-- custom attributes -->
+<auto-link :content="content_variable" :link-attr="{'data-link': true}" :image-attr="{'data-image': true}"></auto-link>
+<!-- it's sure that you can still use :style :class on component -->
+<auto-link :class="{myStyle: true}" :style="{textAlign: 'center'}"></auto-link>
+```
+
+For more usages, check out [autolink.js](https://github.com/egoist/autolink.js)
+
+## License
+
+MIT &copy; [EGOIST](https://github.com/egoist)
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>vue-autolink</title>
+  </head>
+  <body>
+    <div id="app">
+      <auto-link
+        :style="{textAlign: 'center'}"
+        :class="{isOk: true}"
+        :content="content"
+        embed="youku,youtube"
+        safe
+        :link-attr="{ad:2}"
+        :image-attr="{what: 'good'}">
+      </auto-link>
+    </div>
+    <script src="./bundle.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "vue-autolink",
+  "version": "0.0.1",
+  "description": "Auto-link url and images in Vue components",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo 'lol'",
+    "build": "babel src --out-dir ./ && rm app.js",
+    "build:demo": "webpack --config webpack.config.demo.js",
+    "watch:demo": "webpack --config webpack.config.demo.js --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/egoist/vue-autolink.git"
+  },
+  "keywords": [
+    "vue",
+    "auto",
+    "link",
+    "url",
+    "image"
+  ],
+  "author": "EGOIST",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/egoist/vue-autolink/issues"
+  },
+  "homepage": "https://github.com/egoist/vue-autolink#readme",
+  "devDependencies": {
+    "babel-cli": "^6.2.0",
+    "babel-loader": "^6.2.0",
+    "babel-preset-es2015": "^6.1.18",
+    "vue": "^1.0.10",
+    "webpack": "^1.12.9"
+  },
+  "dependencies": {
+    "autolink.js": "^0.0.54"
+  }
+}
diff --git a/src/app.js b/src/app.js
@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import autoLink from './'
+Vue.use(autoLink)
+new Vue({
+  el: '#app',
+  data () {
+    return {
+      content: `<script></script> http://github.com/egoist/vue-autolink
+      https://www.kickstarter.com/projects/1546683916/treasures-of-the-universe-unique-astrophotography?ref=home_popular
+      http://ww4.sinaimg.cn/large/a15b4afegw1eyfizrn3w9j20go0goq3w.jpg
+      `
+    }
+  },
+  ready () {
+    console.log(this)
+  }
+})
diff --git a/src/autolink.js b/src/autolink.js
@@ -0,0 +1,55 @@
+import autoLink from 'autolink.js'
+
+function defaultFalse (val) {
+  if (typeof val === 'undefined') {
+    return false
+  }
+  if (val === false || val == 'false') {
+    return false
+  }
+  return true
+}
+
+function defaultTrue (val) {
+  if (typeof val === 'undefined') {
+    return true
+  }
+  if (val === false || val == 'false') {
+    return false
+  }
+  return true
+}
+
+function parseEmbed (opts, embed) {
+  if (typeof embed !== 'undefined') {
+    if (embed === 'false') {
+      opts.embed = false
+    } else {
+      if (embed.length === 0 || embed === 'true') {
+        opts.embed = true
+      } else {
+        embed.split(',').forEach(e => {
+          opts[e.trim()] = true
+        })
+      }
+    }
+  }
+  return opts
+}
+
+export default {
+  props: ['class', 'style', 'content', 'embed', 'image', 'link-attr', 'image-attr', 'safe'],
+  template: '<div :class="class" :style="style">{{{ content | autolink }}}</div>',
+  filters: {
+    autolink (val) {
+      let opts = {}
+      opts.image = defaultTrue(this.image)
+      opts = parseEmbed(opts, this.embed)
+      opts.linkAttr = this.linkAttr
+      opts.imageAttr = this.imageAttr
+      opts.safe = defaultFalse(this.safe)
+      console.log(opts)
+      return autoLink(val, opts)
+    }
+  }
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,5 @@
+import autoLink from './autolink'
+
+export default function (Vue) {
+  Vue.component('autoLink', autoLink)
+}
diff --git a/webpack.config.demo.js b/webpack.config.demo.js
@@ -0,0 +1,16 @@
+module.exports = {
+  entry: ['./src/app'],
+  output: {
+    path: __dirname,
+    filename: 'bundle.js'
+  },
+  resolve: {
+    extensions: ['', '.js']
+  },
+  module: {
+    loaders: [
+      { test: /\.js$/, loaders: ['babel'], exclude: [/node_modules/] }
+    ]
+  },
+  plugins: []
+}
