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

o2team-ambient · Sep 4, 2019 · bd7f300 · bd7f300
1 parent ed6c69b
commit bd7f300
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
@@ -7,12 +7,12 @@
   <meta name="format-detection" content="telephone=no">
   <title>demo</title>
 
-<link href="//storage.jd.com/ambient/styles-ember.css?9acd9ee5314116f64b23" rel="stylesheet"></head>
+<link href="//storage.jd.com/ambient/styles-ember.css?30dc0193ba6ed914301a" rel="stylesheet"></head>
 <body>
   <!-- S 主体内容 -->
   <div class="o2team_ambient_main">
   </div>
   <!-- E 主体内容 -->
 
-<script type="text/javascript" src="//storage.jd.com/ambient/bundle-ember.js?9acd9ee5314116f64b23"></script><script type="text/javascript" src="//storage.jd.com/ambient/control-ember.js?9acd9ee5314116f64b23"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-ember.js?9acd9ee5314116f64b23"></script></body>
+<script type="text/javascript" src="//storage.jd.com/ambient/bundle-ember.js?30dc0193ba6ed914301a"></script><script type="text/javascript" src="//storage.jd.com/ambient/control-ember.js?30dc0193ba6ed914301a"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-ember.js?30dc0193ba6ed914301a"></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-ember.css?9acd9ee5314116f64b23" rel="stylesheet"></head>
+<link href="//storage.jd.com/ambient/styles-ember.css?30dc0193ba6ed914301a" 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-ember.js?9acd9ee5314116f64b23"></script><script type="text/javascript" src="//storage.jd.com/ambient/control-ember.js?9acd9ee5314116f64b23"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-ember.js?9acd9ee5314116f64b23"></script></body>
+<script type="text/javascript" src="//storage.jd.com/ambient/bundle-ember.js?30dc0193ba6ed914301a"></script><script type="text/javascript" src="//storage.jd.com/ambient/control-ember.js?30dc0193ba6ed914301a"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-ember.js?30dc0193ba6ed914301a"></script></body>
 </html>
diff --git a/info.json b/info.json
@@ -5,9 +5,9 @@
   "title": "ember",
   "ambName": "灰烬",
   "github": "https://github.com/o2team-ambient/ember",
-  "demoSnippet": "<link href=\"//storage.jd.com/ambient/styles-ember.css?t=1566461824000\" rel=\"stylesheet\"></link><!-- S 主体内容 -->\n  <div class=\"o2team_ambient_main\">\n  </div>\n  <!-- E 主体内容 --><script src=\"//storage.jd.com/ambient/bundle-ember.js?t=1566461824000\"></script>",
-  "controlUrl": "//storage.jd.com/ambient/control-ember.js?t=1566461824000",
-  "configUrl": "//storage.jd.com/ambient/config-ember.js?t=1566461824000",
+  "demoSnippet": "<link href=\"//storage.jd.com/ambient/styles-ember.css?t=1567589217000\" rel=\"stylesheet\"></link><!-- S 主体内容 -->\n  <div class=\"o2team_ambient_main\">\n  </div>\n  <!-- E 主体内容 --><script src=\"//storage.jd.com/ambient/bundle-ember.js?t=1567589217000\"></script>",
+  "controlUrl": "//storage.jd.com/ambient/control-ember.js?t=1567589217000",
+  "configUrl": "//storage.jd.com/ambient/config-ember.js?t=1567589217000",
   "placeholderImg": "//storage.jd.com/ambient/ember_placeholder.png?t=1554279075000",
   "spriteImg": "//storage.jd.com/ambient/ember_sprite.png?t=1554279075000"
 }
diff --git a/package.json b/package.json
@@ -10,8 +10,8 @@
   "author": "liujianchao1",
   "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",
     "lodash": "^4.17.10"
   },
   "devDependencies": {

diff --git a/src/index.js b/src/index.js
@@ -19,7 +19,7 @@ try {
 
 const handleReport = () => {
   Report.init({})
-  Report.processPV()
+  Report.processPV(31)
 }
 
 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 = '#000000'
       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.particleNumber && gui.add(config, 'particleNumber', 3, 100, 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
+}