From 6c6f4f7cd71dee1b712019f8664c509c1f13e755 Mon Sep 17 00:00:00 2001 From: jPalmer Date: Sun, 14 Jun 2020 09:44:23 -0700 Subject: [PATCH] allows for configurable custom styles - #103 fixed nested router bug - #104 --- README.md | 34 +++++++++++++++++-- package.json | 3 +- src/component/Page/index.jsx | 3 +- src/config/index.json | 3 ++ .../stylesDefault.json} | 4 +-- src/model/style/actions.js | 33 ++++++++++++++++-- src/model/style/constants.js | 10 ------ src/utility/utilType.js | 15 ++++++++ 8 files changed, 86 insertions(+), 19 deletions(-) create mode 100644 src/config/index.json rename src/{model/style/starterStyle.js => config/stylesDefault.json} (99%) create mode 100644 src/utility/utilType.js diff --git a/README.md b/README.md index 8aefbee..b5f38d6 100644 --- a/README.md +++ b/README.md @@ -48,18 +48,46 @@ Fresco is built on top of React. To run Fresco from source use the following ste Fresco is able to be hosted from a subdirectory of a domain (i.e. https://yourhost.com/fresco/). To enable this functionality, modify the `package.json` file -``` +``` json { - "name": "fresco-app", - "version": "0.1.0", + "name": "fresco", + "version": "0.0.1", "private": true, "homepage": "/fresco", ... ``` +Also, you'll need to modify the config inside `/src/config/index.json`. + +``` json +{ + "homepage": "/fresco" +} +``` + Then use `npm run build` to build Fresco for deployment. +## Change default Fresco styles + +You are able to change the default styles that Fresco loads up with. Update `/src/config/stylesDefault.json` with any number of Mapbox style JSONs. To load multiple styles in use an array structure like shown below: + +``` json +[ + { + "id": "style1", + ... + },{ + "id": "style2", + ... + } +] +``` + +For a single style, just replace the contents of `/src/config/stylesDefault.json` with the style JSON. + +When testing default styles, you'll have to clear out your localStorage `frescoStylesStore` or use an incognito window. + ## Contributing Contributions are welcome! Fork the repo and send in a PR with any bug fixes or features. diff --git a/package.json b/package.json index 83b9355..fdbea76 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { - "name": "fresco-new", + "name": "fresco", "version": "0.1.0", "private": true, + "homepage": "", "dependencies": { "@mapbox/mapbox-gl-style-spec": "^13.13.1", "@testing-library/jest-dom": "^4.2.4", diff --git a/src/component/Page/index.jsx b/src/component/Page/index.jsx index aa977c4..70fc81a 100644 --- a/src/component/Page/index.jsx +++ b/src/component/Page/index.jsx @@ -8,6 +8,7 @@ import Loader from './Loader' import Nav from './Nav' import Route from './Route' +import config from '../../config' import modelApp from '../../model/app' import modelPreference from '../../model/preference' import modelSource from '../../model/source' @@ -35,7 +36,7 @@ class Page extends React.Component { render(){ return ( - + {this.renderFrame()} diff --git a/src/config/index.json b/src/config/index.json new file mode 100644 index 0000000..54c37c6 --- /dev/null +++ b/src/config/index.json @@ -0,0 +1,3 @@ +{ + "homepage": "" +} \ No newline at end of file diff --git a/src/model/style/starterStyle.js b/src/config/stylesDefault.json similarity index 99% rename from src/model/style/starterStyle.js rename to src/config/stylesDefault.json index a89a050..9cd1892 100644 --- a/src/model/style/starterStyle.js +++ b/src/config/stylesDefault.json @@ -1,4 +1,4 @@ -export default { +{ "version": 8, "name": "hot-osm-starter", "metadata": { @@ -3241,4 +3241,4 @@ export default { ], "id": "hot-osm-starter", "owner": "" -} +} \ No newline at end of file diff --git a/src/model/style/actions.js b/src/model/style/actions.js index fb11284..9c0d307 100644 --- a/src/model/style/actions.js +++ b/src/model/style/actions.js @@ -5,7 +5,9 @@ import {fromJS, Map} from 'immutable' import fileDownload from 'js-file-download' import actions from '../actions' +import stylesDefault from '../../config/stylesDefault' +import utilType from '../../utility/utilType' import utilFile from '../../utility/utilFile' import utilLocalStorage from '../../utility/utilLocalStorage' import utilMapboxErr from '../../utility/utilMapboxErr' @@ -178,12 +180,39 @@ const init = async ()=>{ return } - const stylesDefault = fromJS(constants.defaultStyles) + // get all config styles + + // check if it's an array or obj + + + const type = utilType.get(stylesDefault) + let styles = {} + if (type === 'ary'){ + stylesDefault.forEach(style => { + const id = style.id? style.id: utilUid.make() + styles[id] = { + current:{ + ...style, + id + } + } + }) + } else if (type === 'obj'){ + const id = stylesDefault.id? stylesDefault.id: utilUid.make() + styles[id] = { + current:{ + ...stylesDefault, + id + } + } + } else { + throw new Error(`style.init: defaultStyles (${type}) is not an array or object`) + } Store.dispatch({ type:'STYLES_SET', payload:{ - styles: stylesDefault, + styles: fromJS(styles), } }) } diff --git a/src/model/style/constants.js b/src/model/style/constants.js index 39ea02a..6134161 100644 --- a/src/model/style/constants.js +++ b/src/model/style/constants.js @@ -1,5 +1,3 @@ -import starter from './starterStyle' - const localStoragePath = 'frescoStylesStore' const defaultLayers = [ @@ -15,13 +13,6 @@ const defaultLayers = [ } ] -const defaultStyles = { - 'hot-osm-starter':{ - current:{ - ...starter - } - } -} // source: https://osm-lambda.tegola.io/v1/capabilities/osm.json const defaultMapboxVersion = 8 @@ -29,6 +20,5 @@ const defaultMapboxVersion = 8 export default { defaultLayers, defaultMapboxVersion, - defaultStyles, localStoragePath, } \ No newline at end of file diff --git a/src/utility/utilType.js b/src/utility/utilType.js new file mode 100644 index 0000000..8ce2981 --- /dev/null +++ b/src/utility/utilType.js @@ -0,0 +1,15 @@ +const get = (val)=>{ + if (val === undefined) return 'und' + if (val === null) return 'nul' + if (val === true || val === false) return 'bool' + var type = typeof val + if (type === 'string') return 'str' + if (type === 'number') return 'num' + if (type === 'function') return 'fun' + if (Object.prototype.toString.call(val) === '[object Array]') return 'ary' + return 'obj' +} + +export default { + get, +} \ No newline at end of file