feat: 增加配置功能、新增上报 ID

o2team-ambient · Sep 4, 2019 · a13c4bf · a13c4bf
1 parent 8e3d638
commit a13c4bf
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 15 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -6,12 +6,12 @@
   <meta name="format-detection" content="telephone=no">
   <title>demo</title>
 
-<link href="//storage.jd.com/ambient/styles-little_thing.css?df1d6a92cca825081f37" rel="stylesheet"></head>
+<link href="//storage.jd.com/ambient/styles-little_thing.css?c5e771def14b44d83e9a" rel="stylesheet"></head>
 <body>
   <!-- S 主体内容 -->
   <div class="o2team_ambient_main" id="o2team_ambient_main"></div>
   <!-- E 主体内容 -->
   <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin.min.js"></script> -->
 
-<script type="text/javascript" src="//storage.jd.com/ambient/bundle-little_thing.js?df1d6a92cca825081f37"></script><script type="text/javascript" src="//storage.jd.com/ambient/control-little_thing.js?df1d6a92cca825081f37"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-little_thing.js?df1d6a92cca825081f37"></script></body>
+<script type="text/javascript" src="//storage.jd.com/ambient/bundle-little_thing.js?c5e771def14b44d83e9a"></script><script type="text/javascript" src="//storage.jd.com/ambient/control-little_thing.js?c5e771def14b44d83e9a"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-little_thing.js?c5e771def14b44d83e9a"></script></body>
 </html>
diff --git a/dist/index_demo.html b/dist/index_demo.html
@@ -8,7 +8,7 @@
 
     <script type="text/javascript" src="//storage.jd.com/ambient-global/ambient-autoStop-head.js"></script>
 
-<link href="//storage.jd.com/ambient/styles-little_thing.css?df1d6a92cca825081f37" rel="stylesheet"></head>
+<link href="//storage.jd.com/ambient/styles-little_thing.css?c5e771def14b44d83e9a" rel="stylesheet"></head>
 <body>
   <!-- S 主体内容 -->
   <div class="o2team_ambient_main" id="o2team_ambient_main"></div>
@@ -17,5 +17,5 @@
 
     <script type="text/javascript" src="//storage.jd.com/ambient-global/ambient-autoStop-body.js"></script>
 
-<script type="text/javascript" src="//storage.jd.com/ambient/bundle-little_thing.js?df1d6a92cca825081f37"></script><script type="text/javascript" src="//storage.jd.com/ambient/control-little_thing.js?df1d6a92cca825081f37"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-little_thing.js?df1d6a92cca825081f37"></script></body>
+<script type="text/javascript" src="//storage.jd.com/ambient/bundle-little_thing.js?c5e771def14b44d83e9a"></script><script type="text/javascript" src="//storage.jd.com/ambient/control-little_thing.js?c5e771def14b44d83e9a"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-little_thing.js?c5e771def14b44d83e9a"></script></body>
 </html>
diff --git a/info.json b/info.json
@@ -5,9 +5,9 @@
   "title": "little_thing",
   "ambName": "运动墨迹",
   "github": "https://github.com/o2team-ambient/little_thing",
-  "demoSnippet": "<link href=\"//storage.jd.com/ambient/styles-little_thing.css?t=1566461916000\" rel=\"stylesheet\"></link><!-- S 主体内容 -->\n  <div class=\"o2team_ambient_main\" id=\"o2team_ambient_main\"></div>\n  <!-- E 主体内容 --><script src=\"//storage.jd.com/ambient/bundle-little_thing.js?t=1566461916000\"></script>",
-  "controlUrl": "//storage.jd.com/ambient/control-little_thing.js?t=1566461916000",
-  "configUrl": "//storage.jd.com/ambient/config-little_thing.js?t=1566461916000",
+  "demoSnippet": "<link href=\"//storage.jd.com/ambient/styles-little_thing.css?t=1567589419000\" rel=\"stylesheet\"></link><!-- S 主体内容 -->\n  <div class=\"o2team_ambient_main\" id=\"o2team_ambient_main\"></div>\n  <!-- E 主体内容 --><script src=\"//storage.jd.com/ambient/bundle-little_thing.js?t=1567589419000\"></script>",
+  "controlUrl": "//storage.jd.com/ambient/control-little_thing.js?t=1567589419000",
+  "configUrl": "//storage.jd.com/ambient/config-little_thing.js?t=1567589419000",
   "placeholderImg": "//storage.jd.com/ambient/little_thing_placeholder.png?t=1554256256000",
   "gifImg": "//storage.jd.com/ambient/little_thing_motion.gif?t=1553866143000",
   "spriteImg": "//storage.jd.com/ambient/little_thing_sprite.png?t=1554256256000"

diff --git a/package.json b/package.json
@@ -11,8 +11,8 @@
   "author": "yvonnexchen",
   "license": "ISC",
   "dependencies": {
-    "@o2team/ambient-dat.gui": "^0.7.9",
-    "@o2team/ambient-report": "^1.0.3",
+    "@o2team/ambient-dat.gui": "^0.7.14",
+    "@o2team/ambient-report": "^1.0.5",
     "lottie-web": "^5.1.20"
   },
   "devDependencies": {

diff --git a/src/index.js b/src/index.js
@@ -22,7 +22,7 @@ try {
 
 const handleReport = () => {
   Report.init({})
-  Report.processPV()
+  Report.processPV(32)
 }
 
 if (typeof window.XView === 'undefined') {

diff --git a/src/js/configs/keys.js b/src/js/configs/keys.js
@@ -0,0 +1,3 @@
+export default {
+  default: '默认'
+}
diff --git a/src/js/controlinit.js b/src/js/controlinit.js
@@ -6,19 +6,31 @@
 import dat from '@o2team/ambient-dat.gui'
 import {
   O2_AMBIENT_MAIN,
-  O2_AMBIENT_CONFIG
+  O2_AMBIENT_CONFIG,
+  O2_AMBIENT_CLASSNAME
 } from './utils/const'
 import Controller from './utils/controller'
 import { getParameterByName } from './utils/util'
+import processLocalConfig from './utils/processLocalConfig'
+
+import configKeys from './configs/keys'
 
 /* eslint-disable no-unused-vars */
 const isLoop = getParameterByName('loop')
+const configKeyVal = getParameterByName('configKey')
+const configKey = configKeys[configKeyVal] || configKeys['default']
+
+const loadData = {
+  '默认': {
+    '0': {...window[O2_AMBIENT_CONFIG]}
+  }
+}
+const allLoadData = processLocalConfig({ configKey, guiName: O2_AMBIENT_CLASSNAME, loadData })
 
 let controlInit = () => {
   // 非必要配置字段（仅用于展示，如背景颜色、启动/暂停）
   class OtherConfig {
     constructor () {
-      this.message = '小元素'
       this.backgroundColor = '#ffffff'
       this.style = 'red'
       this.objectColor = [212, 54, 54]
@@ -41,9 +53,15 @@ let controlInit = () => {
       // demo code
       const config = this.config
       const otherConfig = this.otherConfig
-      const gui = new dat.GUI()
-      // const COLOR = window[O2_AMBIENT_CONFIG].color
-      gui.add(otherConfig, 'message').name('配置面板')
+      const gui = new dat.GUI({
+        name: O2_AMBIENT_CLASSNAME,
+        preset: configKey,
+        load: {
+          'remembered': { ...allLoadData.remembered }
+        }
+      })
+      gui.remember(config)
+
       gui.add(otherConfig, 'loop').name('循环').onFinishChange(val => {
         window[O2_AMBIENT_CONFIG].loop = val
         this.resetCanvas()

diff --git a/src/js/utils/processLocalConfig.js b/src/js/utils/processLocalConfig.js
@@ -0,0 +1,25 @@
+/**
+ * 处理 localStorage 配置
+ * @param {object} opts
+ * @param {string} opts.configKey 当前 configKey 值
+ * @param {string} opts.guiName localStorage 前缀
+ * @param {object} opts.loadData 官方配置数据
+ */
+
+export default function ({ configKey = '', guiName = '', loadData = {} }) {
+  const localData = JSON.parse(localStorage.getItem(`${guiName || document.location.href}.gui`))
+
+  if (!localData) return { remembered: { ...loadData } }
+
+  if (localData.preset) {
+    localData.preset = configKey
+  }
+
+  if (localData.remembered) {
+    localData.remembered = { ...localData.remembered, ...loadData }
+  }
+
+  localStorage.setItem(`${guiName || document.location.href}.gui`, JSON.stringify(localData))
+
+  return localData
+}