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

o2team-ambient · Sep 4, 2019 · 56d4c49 · 56d4c49
1 parent a4dc9a7
commit 56d4c49
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 14 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -6,13 +6,13 @@
   <meta name="format-detection" content="telephone=no">
   <title>demo</title>
 
-<link href="//storage.jd.com/ambient/styles-particles_emission.css?3ba975f8b4a8afe7d779" rel="stylesheet"></head>
+<link href="//storage.jd.com/ambient/styles-particles_emission.css?82a93bb8c7a5a4b55b67" rel="stylesheet"></head>
 <body>
   <!-- S 主体内容 -->
   <div class="o2team_ambient_main">
     <canvas></canvas>
   </div>
   <!-- E 主体内容 -->
 
-<script type="text/javascript" src="//storage.jd.com/ambient/control-particles_emission.js?3ba975f8b4a8afe7d779"></script><script type="text/javascript" src="//storage.jd.com/ambient/bundle-particles_emission.js?3ba975f8b4a8afe7d779"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-particles_emission.js?3ba975f8b4a8afe7d779"></script></body>
+<script type="text/javascript" src="//storage.jd.com/ambient/control-particles_emission.js?82a93bb8c7a5a4b55b67"></script><script type="text/javascript" src="//storage.jd.com/ambient/bundle-particles_emission.js?82a93bb8c7a5a4b55b67"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-particles_emission.js?82a93bb8c7a5a4b55b67"></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-particles_emission.css?3ba975f8b4a8afe7d779" rel="stylesheet"></head>
+<link href="//storage.jd.com/ambient/styles-particles_emission.css?82a93bb8c7a5a4b55b67" 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/control-particles_emission.js?3ba975f8b4a8afe7d779"></script><script type="text/javascript" src="//storage.jd.com/ambient/bundle-particles_emission.js?3ba975f8b4a8afe7d779"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-particles_emission.js?3ba975f8b4a8afe7d779"></script></body>
+<script type="text/javascript" src="//storage.jd.com/ambient/control-particles_emission.js?82a93bb8c7a5a4b55b67"></script><script type="text/javascript" src="//storage.jd.com/ambient/bundle-particles_emission.js?82a93bb8c7a5a4b55b67"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-particles_emission.js?82a93bb8c7a5a4b55b67"></script></body>
 </html>
diff --git a/info.json b/info.json
@@ -5,9 +5,9 @@
   "title": "particles_emission",
   "ambName": "粒子呼吸",
   "github": "https://github.com/o2team-ambient/particles_emission",
-  "demoSnippet": "<link href=\"//storage.jd.com/ambient/styles-particles_emission.css?t=1566463421000\" rel=\"stylesheet\"></link><!-- S 主体内容 -->\n  <div class=\"o2team_ambient_main\">\n    <canvas></canvas>\n  </div>\n  <!-- E 主体内容 --><script src=\"//storage.jd.com/ambient/bundle-particles_emission.js?t=1566463421000\"></script>",
-  "controlUrl": "//storage.jd.com/ambient/control-particles_emission.js?t=1566463421000",
-  "configUrl": "//storage.jd.com/ambient/config-particles_emission.js?t=1566463421000",
+  "demoSnippet": "<link href=\"//storage.jd.com/ambient/styles-particles_emission.css?t=1567587595000\" rel=\"stylesheet\"></link><!-- S 主体内容 -->\n  <div class=\"o2team_ambient_main\">\n    <canvas></canvas>\n  </div>\n  <!-- E 主体内容 --><script src=\"//storage.jd.com/ambient/bundle-particles_emission.js?t=1567587595000\"></script>",
+  "controlUrl": "//storage.jd.com/ambient/control-particles_emission.js?t=1567587595000",
+  "configUrl": "//storage.jd.com/ambient/config-particles_emission.js?t=1567587595000",
   "placeholderImg": "//storage.jd.com/ambient/particles_emission_placeholder.png?t=1554259855000",
   "spriteImg": "//storage.jd.com/ambient/particles_emission_sprite.png?t=1554259855000"
 }
diff --git a/package.json b/package.json
@@ -11,8 +11,8 @@
   "author": "liangwei",
   "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",
     "p5": "^0.6.1"
   },
   "devDependencies": {

diff --git a/src/index.js b/src/index.js
@@ -19,7 +19,7 @@ try {
 
 const handleReport = () => {
   Report.init({})
-  Report.processPV()
+  Report.processPV(33)
 }
 
 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_CONFIG
+  O2_AMBIENT_MAIN,
+  O2_AMBIENT_CONFIG,
+  O2_AMBIENT_CLASSNAME
 } from './utils/const'
 import Controller from './utils/controller'
 import { getParameterByName, getRandom, getRandomArr } 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.play = () => {
         if (!window[O2_AMBIENT_MAIN] || !window[O2_AMBIENT_MAIN].toggle || typeof window[O2_AMBIENT_MAIN].toggle !== 'function') return
@@ -53,12 +66,18 @@ let controlInit = () => {
     initBaseGUI () {
       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))
       this.isShowController && !this.isAmbientPlat && gui.addColor(otherConfig, 'backgroundColor').name('背景色(仅演示)').onFinishChange(val => {
         this.setBackgroundColor(val)
       })
-      gui.add(otherConfig, 'message').name('配置面板')
       gui.add(otherConfig, 'play').name('播放 / 暂停')
       gui.add(otherConfig, 'random').name('随机配置')
       this.gui = gui

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