lottie-helper 1.0.3 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle.min.js +1 -1
- package/package.json +1 -1
- package/readme.md +19 -0
- package/rollup.config.controller.js +0 -31
- package/rollup.config.js +0 -36
- package/src/controller/animateControl.js +0 -43
- package/src/controller/index.js +0 -41
- package/src/html/index.html +0 -21
- package/src/index.js +0 -71
- package/src/json/jsonAnimate.json +0 -1
- package/src/loadJson.js +0 -86
- package/src/utils/index.js +0 -25
package/src/index.js
DELETED
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import argv from "minimist";
|
|
2
|
-
import cheerio from "cheerio";
|
|
3
|
-
import { loadHTML, writeHTML, loadJs } from "./loadJson";
|
|
4
|
-
import axios from "axios";
|
|
5
|
-
// import { nodeRunShell } from "./utils/index";
|
|
6
|
-
|
|
7
|
-
const argvJson = argv(process.argv.slice(2));
|
|
8
|
-
|
|
9
|
-
console.log("pickJson:");
|
|
10
|
-
console.dir(argvJson);
|
|
11
|
-
const { userJsonURL } = argvJson;
|
|
12
|
-
console.log("userJsonURL：", userJsonURL);
|
|
13
|
-
const hasUserJsonURL = userJsonURL === 'undefined' ? false : userJsonURL;
|
|
14
|
-
|
|
15
|
-
(async () => {
|
|
16
|
-
// * 加载动画JSON
|
|
17
|
-
// 1.本地加载JSON
|
|
18
|
-
// const jsonResult = await loadJson("lottie.json");
|
|
19
|
-
// 将读取的文件，写入指定位置
|
|
20
|
-
// TODO 这里增加引入JSON的方式： 1.本地JSON 2.远程URL加载
|
|
21
|
-
// 2.URL加载JSON
|
|
22
|
-
let jsonResult = "it fuckin empty jsonResult.";
|
|
23
|
-
const jsonURL = hasUserJsonURL || "https://callbackhell.xyz/lottie-json/lottie-2.json";
|
|
24
|
-
console.log(`finaly JSON-URL: ${jsonURL}`)
|
|
25
|
-
try {
|
|
26
|
-
const { status, data } = await axios(jsonURL);
|
|
27
|
-
if (status === 200) {
|
|
28
|
-
jsonResult = JSON.stringify(data);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
// 将获取的JSON资源打包整合
|
|
32
|
-
|
|
33
|
-
// * 根据参数获取资源，插入指定文件
|
|
34
|
-
// * 1.获取源HTML文件
|
|
35
|
-
// TODO 优化：遍历自动寻找，执行命令的目录下index
|
|
36
|
-
// 暂使用执行命令目录下的index.html， 支持传入文件名
|
|
37
|
-
const htmlFileName = "index.html";
|
|
38
|
-
const htmlResult = await loadHTML(htmlFileName);
|
|
39
|
-
const $ = cheerio.load(htmlResult);
|
|
40
|
-
|
|
41
|
-
// * 2.操作HTML，插入内容
|
|
42
|
-
// 插入controller动画逻辑
|
|
43
|
-
// ! TODO 这里加载逻辑在npm全局模式下，引用路径有问题
|
|
44
|
-
const bundleResult = await loadJs("controller.min.js");
|
|
45
|
-
$("body").prepend(
|
|
46
|
-
`<script type="text/javascript">${bundleResult}</script>`
|
|
47
|
-
);
|
|
48
|
-
// 将加载的json文件，动态在第一行插入 `window.animateJson = 动画json`
|
|
49
|
-
$("body").prepend(
|
|
50
|
-
`<script type="text/javascript">window.animateJson=${jsonResult}</script>`
|
|
51
|
-
);
|
|
52
|
-
// lottie动画DOM容器
|
|
53
|
-
$("body").prepend(`<div id="lottie-wrapper"><div id="lottie"></div></div>`);
|
|
54
|
-
$("head").append(
|
|
55
|
-
`<style>#lottie-wrapper {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff;background-size: cover;z-index: 999999 !important;transition: all 1s;overflow: hidden;}#lottie {position: absolute;left: 50%;top: 50%;width: 50%;transform: translate(-50%, -50%);}</style>`
|
|
56
|
-
);
|
|
57
|
-
// lottie依赖库
|
|
58
|
-
$("head").append(
|
|
59
|
-
`<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.6/lottie.min.js"></script>`
|
|
60
|
-
);
|
|
61
|
-
|
|
62
|
-
// * 3.输出修改后的HTML资源
|
|
63
|
-
const htmlStr = $.html();
|
|
64
|
-
// TODO 优化：输出到之前遍历获取的HTML路径
|
|
65
|
-
const writeRes = await writeHTML(htmlFileName, htmlStr);
|
|
66
|
-
console.log(writeRes);
|
|
67
|
-
} catch (error) {
|
|
68
|
-
console.log(error);
|
|
69
|
-
console.log("get jsonURL error, please check you jsonURL.");
|
|
70
|
-
}
|
|
71
|
-
})();
|