done

rotick · May 16, 2020 · e4448b2 · e4448b2
commit e4448b2
Show file tree

Hide file tree

Showing 16 changed files with 772 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,26 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ]
+  ],
+  "plugins": [
+    "transform-vue-jsx",
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "corejs": false,
+        "helpers": false,
+        "regenerator": true,
+        "useESModules": false
+      }
+    ],
+    "@babel/plugin-transform-object-assign",
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-optional-chaining"
+  ]
+}
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+dist/*.js
+
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,20 @@
+module.exports = {
+    root: true,
+    parser: 'babel-eslint',
+    parserOptions: {
+        sourceType: 'module'
+    },
+    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+    extends: 'standard',
+    // required to lint *.vue files
+    plugins: [],
+    // add your custom rules here
+    'rules': {
+        // allow paren-less arrow functions
+        'arrow-parens': 0,
+        // allow async-await
+        'generator-star-spacing': 0,
+        // allow debugger during development
+        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+    }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,8 @@
+.DS_Store
+node_modules/
+bak/
+npm-debug.log
+.idea
+.vscode
+/package-lock.json
+/.vscode/
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020-present funinps
+
+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
diff --git a/README_zh.md b/README_zh.md
diff --git a/demo/esm.html b/demo/esm.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
+  <title>ESM</title>
+</head>
+<body>
+  <div style="display:flex;">
+    <div>
+      <div id="container" style="width:500px;height:600px;border:solid 1px #ddd;"></div>
+      <button id="updateBtn">update</button>
+      <button id="destroyBtn">destroy</button>
+    </div>
+    <div id="container1" style="width:500px;height:600px;border:solid 1px #ddd;margin-left:50px">
+
+    </div>
+  </div>
+
+  <script type="module">
+    import DomMark from '../src/index.js'
+
+    const domMark = new DomMark('#container', {
+      content: '好用的水印', // html,text
+      fontSize: 'inherit',
+      fontFamily: 'inherit',
+      color: '#f00',
+      opacity: .5,
+      padding: 20,
+      zIndex: 6000,
+      minMargin: [40, 20],
+      rotate: -15,
+      observe: true
+    })
+
+    domMark.render()
+
+    document.querySelector('#updateBtn').addEventListener('click', () => {
+      domMark.update({
+        content: `<span style="font-size:30px;color:#f00">升级</span>过的水印<br>${new Date().toLocaleDateString()}`,
+        color: '#f60'
+      })
+    })
+    document.querySelector('#destroyBtn').addEventListener('click', () => {
+      domMark.destroy()
+    })
+
+    const dm = new DomMark('#container1', {
+      content: '<img width="90" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAeCAYAAACsYQl4AAACk0lEQVRoge1YgW3bQAxkgy4gjqCO4I6gjOCM0Ixgj1CPkI5gj2CNII0gjUCNkIDByaColy1bRuC2PMBw8M8nn/fk/ccUCAQCgUAgEPjvwMwZM6/i5MeYy83TTH/q6HjnPf4rmMXNXKIDCxFEfxG++zCqOUT0Gy1RE9E2tRXY/SKiNRF1RPRHRA5mPtc5Edkx8wZ2n/5EpMN6HS+IqCSinY5fm/Y94sDHBjlfymWNvDsReTmzrz5uKSLlk5tUJ4KAJYYbIsoTG2sQUO1aInpj5gYBCGs2zFyZJNWv2hRYn2Fc41Zm7TVYFAeHY236XCqzhz7GXudgm0/tEf51/UpJHk0ysyDwgFQQKGasQVDvQ5M44u+Cmd+ZWbvD27zjUMn5fLuW5SVxkFvKJrPjJkbjiwFzlpscPA74sRW9RjvsrIGItKa61ZFWcTbRNq9aVXYzIuKlp0ScgxuvUYk34cY4WpUHbwNpqcHJIL9z8oYOquBzwI/V6AJtk0JpghbYxAgiUjNzB9sWeudxUYchTZdkpEMRTPm8GAdtXRrdtTFzz8dIBoZ7Vh97aPKrn/eX4dTm/PilJG7RWotNopo89LCfF8YhaPFnZePT5+Zl7FzOGUjeQss3Xhk80VMCb8e7GS0+1RmzgIoYVcW9AV3X3H4kXiLXRntRCWJmzX2v31aSrEbr4Gri5l8n7EaHAv2mhC4+KnK0uic5u/K+ON0F+D7g5XLi6EQ0DPQ0ju75s7YVDZ2qcWrWboX396BlHhydv7yRRzV1D80BLsIWcjIkGvgJvRHzpEuR94xNWrsKD/2/ieityUOfgw1+t9gulT9wlPXPvG8pC3Pr25s9ZWcf7u0t/9k9AubmGwgEAoFAIBAIBL4QRPQBaT5Kqoc+sx8AAAAASUVORK5CYII=">', // html,text
+      padding: 20,
+      minMargin: [40, 20],
+      rotate: -15,
+      observe: true
+    })
+    dm.render()
+  </script>
+</body>
+</html>
diff --git a/demo/mobile.html b/demo/mobile.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
+  <title>mobile</title>
+  <style>
+    *{margin:0;padding:0}
+  </style>
+</head>
+<body>
+  <div>
+    <div id="container" style="width:100vw;height:100vh;"></div>
+    <button id="updateBtn">update</button>
+    <button id="destroyBtn">destroy</button>
+  </div>
+  <div id="container1" style="width:100vw;height:100vh;"></div>
+
+  <script src="../dist/dom-mark.js"></script>
+  <script>
+    var domMark = new DomMark('#container', {
+      content: '好用的水印', // html,text
+      fontSize: 'inherit',
+      fontFamily: 'inherit',
+      color: '#f00',
+      opacity: .5,
+      padding: 20,
+      zIndex: 6000,
+      minMargin: [40, 20],
+      rotate: -15,
+      observe: true
+    })
+
+    domMark.render()
+
+    document.querySelector('#updateBtn').addEventListener('click', function () {
+      domMark.update({
+        content: '<span style="font-size:30px;color:#f00">升级</span>过的水印<br>' + new Date().toLocaleDateString(),
+        color: '#f60'
+      })
+    })
+    document.querySelector('#destroyBtn').addEventListener('click', function () {
+      domMark.destroy()
+    })
+
+    var dm = new DomMark('#container1', {
+      content: '<img width="90" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAeCAYAAACsYQl4AAACk0lEQVRoge1YgW3bQAxkgy4gjqCO4I6gjOCM0Ixgj1CPkI5gj2CNII0gjUCNkIDByaColy1bRuC2PMBw8M8nn/fk/ccUCAQCgUAgEPjvwMwZM6/i5MeYy83TTH/q6HjnPf4rmMXNXKIDCxFEfxG++zCqOUT0Gy1RE9E2tRXY/SKiNRF1RPRHRA5mPtc5Edkx8wZ2n/5EpMN6HS+IqCSinY5fm/Y94sDHBjlfymWNvDsReTmzrz5uKSLlk5tUJ4KAJYYbIsoTG2sQUO1aInpj5gYBCGs2zFyZJNWv2hRYn2Fc41Zm7TVYFAeHY236XCqzhz7GXudgm0/tEf51/UpJHk0ysyDwgFQQKGasQVDvQ5M44u+Cmd+ZWbvD27zjUMn5fLuW5SVxkFvKJrPjJkbjiwFzlpscPA74sRW9RjvsrIGItKa61ZFWcTbRNq9aVXYzIuKlp0ScgxuvUYk34cY4WpUHbwNpqcHJIL9z8oYOquBzwI/V6AJtk0JpghbYxAgiUjNzB9sWeudxUYchTZdkpEMRTPm8GAdtXRrdtTFzz8dIBoZ7Vh97aPKrn/eX4dTm/PilJG7RWotNopo89LCfF8YhaPFnZePT5+Zl7FzOGUjeQss3Xhk80VMCb8e7GS0+1RmzgIoYVcW9AV3X3H4kXiLXRntRCWJmzX2v31aSrEbr4Gri5l8n7EaHAv2mhC4+KnK0uic5u/K+ON0F+D7g5XLi6EQ0DPQ0ju75s7YVDZ2qcWrWboX396BlHhydv7yRRzV1D80BLsIWcjIkGvgJvRHzpEuR94xNWrsKD/2/ieityUOfgw1+t9gulT9wlPXPvG8pC3Pr25s9ZWcf7u0t/9k9AubmGwgEAoFAIBAIBL4QRPQBaT5Kqoc+sx8AAAAASUVORK5CYII=">', // html,text
+      padding: 20,
+      minMargin: [40, 20],
+      rotate: -15,
+      observe: true
+    })
+    dm.render()
+  </script>
+</body>
+</html>
diff --git a/demo/umd.html b/demo/umd.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
+  <title>UMD</title>
+</head>
+<body>
+  <div style="display:flex;">
+    <div>
+      <div id="container" style="width:500px;height:600px;border:solid 1px #ddd;"></div>
+      <button id="updateBtn">update</button>
+      <button id="destroyBtn">destroy</button>
+    </div>
+    <div id="container1" style="width:500px;height:600px;border:solid 1px #ddd;margin-left:50px">
+      <button style="width:100px;height:100px;">123</button>
+      123
+    </div>
+  </div>
+
+  <script src="../dist/dom-mark.js"></script>
+  <script>
+    var domMark = new DomMark('#container', {
+      content: '好用的水印<br><span style="font-size:12px;color:#333;">自适应排列</span>', // html,text
+      fontSize: 'inherit',
+      fontFamily: 'inherit',
+      color: '#f00',
+      opacity: .5,
+      padding: 20,
+      zIndex: 6000,
+      minMargin: [40, 20],
+      rotate: -15,
+      observe: true
+    })
+
+    domMark.render()
+
+    document.querySelector('#updateBtn').addEventListener('click', function () {
+      domMark.update({
+        content: '<span style="font-size:30px;color:#f00">升级</span>过的水印<br>' + new Date().toLocaleDateString(),
+        color: '#f60'
+      })
+    })
+    document.querySelector('#destroyBtn').addEventListener('click', function () {
+      domMark.destroy()
+    })
+
+    var dm = new DomMark('#container1', {
+      content: '<img width="90" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAeCAYAAACsYQl4AAACk0lEQVRoge1YgW3bQAxkgy4gjqCO4I6gjOCM0Ixgj1CPkI5gj2CNII0gjUCNkIDByaColy1bRuC2PMBw8M8nn/fk/ccUCAQCgUAgEPjvwMwZM6/i5MeYy83TTH/q6HjnPf4rmMXNXKIDCxFEfxG++zCqOUT0Gy1RE9E2tRXY/SKiNRF1RPRHRA5mPtc5Edkx8wZ2n/5EpMN6HS+IqCSinY5fm/Y94sDHBjlfymWNvDsReTmzrz5uKSLlk5tUJ4KAJYYbIsoTG2sQUO1aInpj5gYBCGs2zFyZJNWv2hRYn2Fc41Zm7TVYFAeHY236XCqzhz7GXudgm0/tEf51/UpJHk0ysyDwgFQQKGasQVDvQ5M44u+Cmd+ZWbvD27zjUMn5fLuW5SVxkFvKJrPjJkbjiwFzlpscPA74sRW9RjvsrIGItKa61ZFWcTbRNq9aVXYzIuKlp0ScgxuvUYk34cY4WpUHbwNpqcHJIL9z8oYOquBzwI/V6AJtk0JpghbYxAgiUjNzB9sWeudxUYchTZdkpEMRTPm8GAdtXRrdtTFzz8dIBoZ7Vh97aPKrn/eX4dTm/PilJG7RWotNopo89LCfF8YhaPFnZePT5+Zl7FzOGUjeQss3Xhk80VMCb8e7GS0+1RmzgIoYVcW9AV3X3H4kXiLXRntRCWJmzX2v31aSrEbr4Gri5l8n7EaHAv2mhC4+KnK0uic5u/K+ON0F+D7g5XLi6EQ0DPQ0ju75s7YVDZ2qcWrWboX396BlHhydv7yRRzV1D80BLsIWcjIkGvgJvRHzpEuR94xNWrsKD/2/ieityUOfgw1+t9gulT9wlPXPvG8pC3Pr25s9ZWcf7u0t/9k9AubmGwgEAoFAIBAIBL4QRPQBaT5Kqoc+sx8AAAAASUVORK5CYII=">', // html,text
+      padding: 20,
+      minMargin: [40, 20],
+      rotate: -15,
+      observe: true
+    })
+    dm.render()
+  </script>
+</body>
+</html>
diff --git a/dist/dom-mark.js b/dist/dom-mark.js
diff --git a/package.json b/package.json
@@ -0,0 +1,84 @@
+{
+  "name": "@funinps/dom-mark",
+  "version": "1.0.0",
+  "description": "Add text/HTML as watermark to DOM node, customizable content and style, automatically calculate size and position",
+  "author": "dongnaebi",
+  "main": "dist/dom-mark.js",
+  "module": "src/index.js",
+  "keywords": [
+    "watermark",
+    "dom-mark",
+    "HTML",
+    "dom"
+  ],
+  "scripts": {
+    "lint": "eslint --ext .js src",
+    "lint:fix": "eslint --fix --ext .js src",
+    "build1": "npm run lint && rimraf dist && webpack --config webpack.config.js -p --progress --hide-modules",
+    "build": "npm run lint && rimraf dist && rollup -c ./rollup.config.js",
+    "pub": "npm login && npm publish"
+  },
+  "dependencies": {},
+  "engines": {
+    "node": "> 8.1.4",
+    "npm": ">= 5.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@babel/parser": "7.7.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-object-assign": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.9.6",
+    "@babel/polyfill": "^7.8.7",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/runtime": "^7.9.6",
+    "autoprefixer": "^9.7.6",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-component": "^1.1.1",
+    "babel-plugin-import": "^1.13.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-vue-jsx": "^3.7.0",
+    "cross-env": "^7.0.2",
+    "css-loader": "^3.5.3",
+    "eslint": "^6.8.0",
+    "eslint-config-enough": "^0.4.3",
+    "eslint-config-standard": "^14.1.1",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-html": "^6.0.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "file-loader": "^6.0.0",
+    "html-loader": "^1.1.0",
+    "html-webpack-plugin": "^4.3.0",
+    "less": "^3.11.1",
+    "less-loader": "^6.1.0",
+    "node-sass": "^4.14.1",
+    "postcss-loader": "^3.0.0",
+    "raw-loader": "^4.0.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.10.2",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-uglify": "^6.0.4",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.2.1",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/funinps/dom-mark"
+  },
+  "bugs": {
+    "url": "https://github.com/funinps/dom-mark/issues"
+  },
+  "homepage": "https://github.com/funinps/dom-mark#readme",
+  "license": "MIT"
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')()
+  ]
+}
diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,23 @@
+const babel = require('rollup-plugin-babel')
+const { uglify } = require('rollup-plugin-uglify')
+const version = process.env.VERSION || require('./package.json').version
+
+module.exports = {
+  input: 'src/index.js',
+  plugins: [babel(), uglify({
+    output: {
+      preamble: `/**
+* @funinps/dom-mark v${version}
+* https://github.com/funinps/dom-mark
+* (c) ${new Date().toLocaleDateString()} @dongnaebi
+* @license MIT
+*/`
+    }
+  })],
+  output: {
+    file: 'dist/dom-mark.js',
+    format: 'umd',
+    name: 'DomMark',
+    exports: 'default'
+  }
+}