From 3053691516b405eec4d6ce33ddb40a20421db45a Mon Sep 17 00:00:00 2001 From: Lee EC Date: Wed, 4 Sep 2019 16:42:59 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E4=B8=8A=E6=8A=A5=20?= =?UTF-8?q?ID=E3=80=81=E5=A2=9E=E5=8A=A0=E9=85=8D=E7=BD=AE=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/index.html | 4 ++-- dist/index_demo.html | 4 ++-- info.json | 6 +++--- package.json | 2 +- src/index.js | 2 +- src/js/configs/keys.js | 3 +++ src/js/controlinit.js | 27 +++++++++++++++++++++++---- src/js/utils/processLocalConfig.js | 25 +++++++++++++++++++++++++ 8 files changed, 60 insertions(+), 13 deletions(-) create mode 100644 src/js/configs/keys.js create mode 100644 src/js/utils/processLocalConfig.js diff --git a/dist/index.html b/dist/index.html index eed9380..9266ce9 100644 --- a/dist/index.html +++ b/dist/index.html @@ -7,12 +7,12 @@ demo - +
- + \ No newline at end of file diff --git a/dist/index_demo.html b/dist/index_demo.html index 4654013..9ea4bf9 100644 --- a/dist/index_demo.html +++ b/dist/index_demo.html @@ -9,7 +9,7 @@ - +
@@ -18,5 +18,5 @@ - + \ No newline at end of file diff --git a/info.json b/info.json index cabe0d1..5834db7 100755 --- a/info.json +++ b/info.json @@ -5,9 +5,9 @@ "title": "aesthetic", "ambName": "梦幻", "github": "https://github.com/o2team-ambient/aesthetic", - "demoSnippet": "\n
\n
\n ", - "controlUrl": "//storage.jd.com/ambient/control-aesthetic.js?t=1566460071000", - "configUrl": "//storage.jd.com/ambient/config-aesthetic.js?t=1566460071000", + "demoSnippet": "\n
\n
\n ", + "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 index e6ff91e..c38f790 100755 --- 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 index afa670f..11a19a3 100755 --- 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 new file mode 100644 index 0000000..ce3ee8b --- /dev/null +++ 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 index a191954..386833e 100755 --- 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 new file mode 100644 index 0000000..8fb77c0 --- /dev/null +++ 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 +}