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

o2team-ambient · Sep 4, 2019 · 3053691 · 3053691
1 parent 72d5b5e
commit 3053691
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 13 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -7,12 +7,12 @@
   <meta name="format-detection" content="telephone=no">
   <title>demo</title>
 
-<link href="//storage.jd.com/ambient/styles-aesthetic.css?5ca6f4914f9b6fc07cf6" rel="stylesheet"></head>
+<link href="//storage.jd.com/ambient/styles-aesthetic.css?9d39593759d62631158a" rel="stylesheet"></head>
 <body>
   <!-- S 主体内容 -->
   <div class="o2team_ambient_main">
   </div>
   <!-- E 主体内容 -->
 
-<script type="text/javascript" src="//storage.jd.com/ambient/bundle-aesthetic.js?5ca6f4914f9b6fc07cf6"></script><script type="text/javascript" src="//storage.jd.com/ambient/control-aesthetic.js?5ca6f4914f9b6fc07cf6"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-aesthetic.js?5ca6f4914f9b6fc07cf6"></script></body>
+<script type="text/javascript" src="//storage.jd.com/ambient/bundle-aesthetic.js?9d39593759d62631158a"></script><script type="text/javascript" src="//storage.jd.com/ambient/control-aesthetic.js?9d39593759d62631158a"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-aesthetic.js?9d39593759d62631158a"></script></body>
 </html>
diff --git a/dist/index_demo.html b/dist/index_demo.html
@@ -9,7 +9,7 @@
 
     <script type="text/javascript" src="//storage.jd.com/ambient-global/ambient-autoStop-head.js"></script>
 
-<link href="//storage.jd.com/ambient/styles-aesthetic.css?5ca6f4914f9b6fc07cf6" rel="stylesheet"></head>
+<link href="//storage.jd.com/ambient/styles-aesthetic.css?9d39593759d62631158a" rel="stylesheet"></head>
 <body>
   <!-- S 主体内容 -->
   <div class="o2team_ambient_main">
@@ -18,5 +18,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-aesthetic.js?5ca6f4914f9b6fc07cf6"></script><script type="text/javascript" src="//storage.jd.com/ambient/control-aesthetic.js?5ca6f4914f9b6fc07cf6"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-aesthetic.js?5ca6f4914f9b6fc07cf6"></script></body>
+<script type="text/javascript" src="//storage.jd.com/ambient/bundle-aesthetic.js?9d39593759d62631158a"></script><script type="text/javascript" src="//storage.jd.com/ambient/control-aesthetic.js?9d39593759d62631158a"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-aesthetic.js?9d39593759d62631158a"></script></body>
 </html>
diff --git a/info.json b/info.json
@@ -5,9 +5,9 @@
   "title": "aesthetic",
   "ambName": "梦幻",
   "github": "https://github.com/o2team-ambient/aesthetic",
-  "demoSnippet": "<link href=\"//storage.jd.com/ambient/styles-aesthetic.css?t=1566460071000\" rel=\"stylesheet\"></link><!-- S 主体内容 -->\n  <div class=\"o2team_ambient_main\">\n  </div>\n  <!-- E 主体内容 --><script src=\"//storage.jd.com/ambient/bundle-aesthetic.js?t=1566460071000\"></script>",
-  "controlUrl": "//storage.jd.com/ambient/control-aesthetic.js?t=1566460071000",
-  "configUrl": "//storage.jd.com/ambient/config-aesthetic.js?t=1566460071000",
+  "demoSnippet": "<link href=\"//storage.jd.com/ambient/styles-aesthetic.css?t=1567586552000\" rel=\"stylesheet\"></link><!-- S 主体内容 -->\n  <div class=\"o2team_ambient_main\">\n  </div>\n  <!-- E 主体内容 --><script src=\"//storage.jd.com/ambient/bundle-aesthetic.js?t=1567586552000\"></script>",
+  "controlUrl": "//storage.jd.com/ambient/control-aesthetic.js?t=1567586552000",
+  "configUrl": "//storage.jd.com/ambient/config-aesthetic.js?t=1567586552000",
   "placeholderImg": "//storage.jd.com/ambient/aesthetic_placeholder.png?t=1554195745000",
   "spriteImg": "//storage.jd.com/ambient/aesthetic_sprite.png?t=1554195745000"
 }
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   "author": "liujianchao1",
   "license": "ISC",
   "dependencies": {
-    "@o2team/ambient-dat.gui": "^0.7.9",
+    "@o2team/ambient-dat.gui": "^0.7.14",
     "@o2team/ambient-report": "^1.0.5"
   },
   "devDependencies": {

diff --git a/src/index.js b/src/index.js
@@ -19,7 +19,7 @@ try {
 
 const handleReport = () => {
   Report.init({})
-  Report.processPV()
+  Report.processPV(29)
 }
 
 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
@@ -5,19 +5,32 @@
 
 import dat from '@o2team/ambient-dat.gui'
 import {
-  O2_AMBIENT_MAIN
+  O2_AMBIENT_MAIN,
+  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 = '#000'
       this.play = () => {
         if (!window[O2_AMBIENT_MAIN] || !window[O2_AMBIENT_MAIN].toggle || typeof window[O2_AMBIENT_MAIN].toggle !== 'function') return
@@ -40,10 +53,16 @@ let controlInit = () => {
       // demo code
       const config = this.config
       const otherConfig = this.otherConfig
-      const gui = new dat.GUI()
+      const gui = new dat.GUI({
+        name: O2_AMBIENT_CLASSNAME,
+        preset: configKey,
+        load: {
+          remembered: { ...allLoadData.remembered }
+        }
+      })
+      gui.remember(config)
       gui.addCallbackFunc(this.resetCanvas.bind(this))
 
-      gui.add(otherConfig, 'message').name('配置面板')
       gui.add(otherConfig, 'play').name('播放 / 暂停')
       // config.hue && gui.add(config, 'hue', 0, 360, 1).name('色调').onFinishChange(val => {
       //   // window[O2_AMBIENT_INIT]()

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
+}