allows for configurable custom styles - #103

fixed nested router bug - #104

Author: justenPalmer

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.

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",

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 (
 		<React.Fragment>
-			<Router>
+			<Router basename={config.homepage}>
 				{this.renderFrame()}
 			</Router>
 		</React.Fragment>

src/config/index.json

@@ -0,0 +1,3 @@
+{
+	"homepage": ""
+}

src/model/style/starterStyle.js renamed to 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": ""
-}
+}

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),
 		}
 	})
 }

src/model/style/constants.js

@@ -1,5 +1,3 @@
-import starter from './starterStyle'
-
 const localStoragePath = 'frescoStylesStore'
 
 const defaultLayers = [
@@ -15,20 +13,12 @@ const defaultLayers = [
 	}
 ]
 
-const defaultStyles = {
-	'hot-osm-starter':{
-		current:{
-			...starter
-		}
-	}
-}
 // source: https://osm-lambda.tegola.io/v1/capabilities/osm.json
 
 const defaultMapboxVersion = 8
 
 export default {
 	defaultLayers,
 	defaultMapboxVersion,
-	defaultStyles,
 	localStoragePath,
 }

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