feat: 更新配置功能、增加上报、去除背景色

o2team-ambient · Sep 4, 2019 · 092fdd3 · 092fdd3
1 parent 582181a
commit 092fdd3
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 13 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-star_flash.css?25240dea21bfd089d597" rel="stylesheet"></head>
+<link href="//storage.jd.com/ambient/styles-star_flash.css?23b3a3130fdc882c23de" rel="stylesheet"></head>
 <body>
   <!-- S 主体内容 -->
   <div class="o2team_ambient_main">
     <canvas></canvas>
   </div>
   <!-- E 主体内容 -->
 
-<script type="text/javascript" src="//storage.jd.com/ambient/control-star_flash.js?25240dea21bfd089d597"></script><script type="text/javascript" src="//storage.jd.com/ambient/bundle-star_flash.js?25240dea21bfd089d597"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-star_flash.js?25240dea21bfd089d597"></script></body>
+<script type="text/javascript" src="//storage.jd.com/ambient/control-star_flash.js?23b3a3130fdc882c23de"></script><script type="text/javascript" src="//storage.jd.com/ambient/bundle-star_flash.js?23b3a3130fdc882c23de"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-star_flash.js?23b3a3130fdc882c23de"></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-star_flash.css?25240dea21bfd089d597" rel="stylesheet"></head>
+<link href="//storage.jd.com/ambient/styles-star_flash.css?23b3a3130fdc882c23de" 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-star_flash.js?25240dea21bfd089d597"></script><script type="text/javascript" src="//storage.jd.com/ambient/bundle-star_flash.js?25240dea21bfd089d597"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-star_flash.js?25240dea21bfd089d597"></script></body>
+<script type="text/javascript" src="//storage.jd.com/ambient/control-star_flash.js?23b3a3130fdc882c23de"></script><script type="text/javascript" src="//storage.jd.com/ambient/bundle-star_flash.js?23b3a3130fdc882c23de"></script><script type="text/javascript" src="//storage.jd.com/ambient/config-star_flash.js?23b3a3130fdc882c23de"></script></body>
 </html>
diff --git a/info.json b/info.json
@@ -5,9 +5,9 @@
   "title": "star_flash",
   "ambName": "星星闪烁",
   "github": "https://github.com/o2team-ambient/star-flash",
-  "demoSnippet": "<link href=\"//storage.jd.com/ambient/styles-star_flash.css?t=1557058666000\" rel=\"stylesheet\"></link><!-- S 主体内容 -->\r\n  <div class=\"o2team_ambient_main\">\r\n    <canvas></canvas>\r\n  </div>\r\n  <!-- E 主体内容 --><script src=\"//storage.jd.com/ambient/bundle-star_flash.js?t=1557058666000\"></script>",
-  "controlUrl": "//storage.jd.com/ambient/control-star_flash.js?t=1557058666000",
-  "configUrl": "//storage.jd.com/ambient/config-star_flash.js?t=1557058666000",
+  "demoSnippet": "<link href=\"//storage.jd.com/ambient/styles-star_flash.css?t=1567588173000\" rel=\"stylesheet\"></link><!-- S 主体内容 -->\n  <div class=\"o2team_ambient_main\">\n    <canvas></canvas>\n  </div>\n  <!-- E 主体内容 --><script src=\"//storage.jd.com/ambient/bundle-star_flash.js?t=1567588173000\"></script>",
+  "controlUrl": "//storage.jd.com/ambient/control-star_flash.js?t=1567588173000",
+  "configUrl": "//storage.jd.com/ambient/config-star_flash.js?t=1567588173000",
   "placeholderImg": "//storage.jd.com/ambient/star-flash_placeholder.png?t=1557049231000",
   "spriteImg": "//storage.jd.com/ambient/star-flash_sprite.png?t=1557049231000"
 }
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
   "author": "src",
   "license": "ISC",
   "dependencies": {
-    "@o2team/ambient-dat.gui": "^0.7.9",
+    "@o2team/ambient-dat.gui": "^0.7.14",
+    "@o2team/ambient-report": "^1.0.5",
     "@tweenjs/tween.js": "^17.3.0"
   },
   "devDependencies": {

diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,7 @@
 import './css/base.scss'
 import './css/package.scss'
 
+import Report from '@o2team/ambient-report'
 import { O2_AMBIENT_CONFIG } from './js/utils/const'
 import initAmbient from './js/ambient'
 
@@ -14,3 +15,14 @@ try {
 } catch (e) {
   console.log(e)
 }
+
+const handleReport = () => {
+  Report.init({})
+  Report.processPV(38)
+}
+
+if (typeof window.XView === 'undefined') {
+  handleReport()
+} else {
+  window.handleReport = handleReport
+}
diff --git a/src/js/animate.js b/src/js/animate.js
@@ -41,7 +41,7 @@ class Animate{
     const { canvas } = this
     canvas.setAttribute('width', width)
     canvas.setAttribute('height', height)
-    canvas.style.background = '#000'
+    // canvas.style.background = '#000'
   }
 
   setProps () {

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('梦起 / 梦停')
       gui.add(config, 'layoutType', {
         '半遮面': 'curtain',

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