Add dropdown selector (not clickable yet)

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -4,6 +4,9 @@ const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');
 const request = require('superagent');
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+const Themes = require('themes/themes.json');
 
 const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
 
@@ -115,6 +118,27 @@ const MetadataEditor = createClass({
 		</div>;
 	},
 
+	renderThemeDropdown : function(){
+		const listThemes = (renderer)=>{
+			return _.map(Themes[renderer], (theme)=>{
+				return <div href={''} className='item' key={''} target='_blank' rel='noopener noreferrer' title={''}>
+					{`${theme.renderer} : ${theme.name}`}
+				</div>;
+			});
+		};
+
+		return <div className='field themes'>
+			<label>theme</label>
+			<Nav.dropdown trigger='click'>
+				<div>
+					share <i class='fas fa-caret-down'></i>
+				</div>
+				{listThemes('Legacy')}
+				{listThemes('V3')}
+			</Nav.dropdown>
+		</div>;
+	},
+
 	renderRenderOptions : function(){
 		if(!global.enable_v3) return;
 
@@ -178,6 +202,8 @@ const MetadataEditor = createClass({
 				</div>
 			</div>
 
+			{this.renderThemeDropdown()}
+
 			{this.renderRenderOptions()}
 
 			<div className='field publish'>

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -14,7 +14,7 @@
 			display        : inline-block;
 			vertical-align : top;
 			width          : 80px;
-			font-size      : 0.7em;
+			font-size      : 11px;
 			font-weight    : 800;
 			line-height    : 1.8em;
 			text-transform : uppercase;
@@ -81,4 +81,35 @@
 		font-size: 0.8em;
 		line-height    : 1.5em;
 	}
+
+	.themes.field{
+		font-size: 13.33px;
+		.navDropdownContainer {
+			background-color: white;
+
+			width: 100%;
+			&:hover {
+				background-color: rgb(187, 187, 187);
+			}
+			&>div:first-child {
+				border : 2px solid rgb(118,118,118);
+				padding : 6px 2px;
+				background-color : inherit;
+				i {
+					float: right;
+				}
+			}
+			.navDropdown {
+				box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+				* {
+					padding: 3px 2px;
+					border-top: 1px solid rgb(118, 118, 118);
+					&:hover {
+						background-color: @blue;
+						color: white;
+					}
+				}
+			}
+		}
+	}
 }

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -39,7 +39,7 @@ const Snippetbar = createClass({
 	},
 
 	componentDidMount : async function() {
-		const rendererPath = this.props.renderer == 'V3' ? 'V3' : "Legacy";
+		const rendererPath = this.props.renderer == 'V3' ? 'V3' : 'Legacy';
 		const themePath    = this.props.theme ?? '5ePHB';
 		console.log(Themes);
 		console.log(Themes[`${rendererPath}_${themePath}`]);
@@ -51,7 +51,7 @@ const Snippetbar = createClass({
 
 	componentDidUpdate : async function(prevProps) {
 		if(prevProps.renderer != this.props.renderer) {
-			const rendererPath = this.props.renderer == 'V3' ? 'V3' : "Legacy";
+			const rendererPath = this.props.renderer == 'V3' ? 'V3' : 'Legacy';
 			const themePath    = this.props.theme ?? '5ePHB';
 			const snippets = Themes[`${rendererPath}_${themePath}`];
 			this.setState({

scripts/buildHomebrew.js

@@ -10,7 +10,7 @@ const assetTransform = require('vitreum/transforms/asset.js');
 const babel          = require('@babel/core');
 const less           = require('less');
 
-const babelify = async (code)=>(await babel.transformAsync(code, { presets: [["@babel/preset-env", { "exclude": ["proposal-dynamic-import"] }], '@babel/preset-react'], plugins: ['@babel/plugin-transform-runtime'] })).code;
+const babelify = async (code)=>(await babel.transformAsync(code, { presets: [['@babel/preset-env', { 'exclude': ['proposal-dynamic-import'] }], '@babel/preset-react'], plugins: ['@babel/plugin-transform-runtime'] })).code;
 
 const transforms = {
 	'.js'   : (code, filename, opts)=>babelify(code),
@@ -24,27 +24,6 @@ const build = async ({ bundle, render, ssr })=>{
 	await fs.outputFile('./build/homebrew/bundle.css', css);
 	await fs.outputFile('./build/homebrew/bundle.js', bundle);
 	await fs.outputFile('./build/homebrew/ssr.js', ssr);
-	await fs.copy('./themes/fonts', './build/fonts');
-	let src = './themes/Legacy/5ePHB/style.less';
-	//Parse brew theme files
-	less.render(fs.readFileSync(src).toString(), {
-		compress : !isDev
-	}, function(e, output) {
-		fs.outputFile('./build/themes/Legacy/5ePHB/style.css', output.css);
-	});
-	src = './themes/V3/5ePHB/style.less';
-	less.render(fs.readFileSync(src).toString(), {
-		compress : !isDev
-	}, function(e, output) {
-		fs.outputFile('./build/themes/V3/5ePHB/style.css', output.css);
-	});
-	// await less.render(lessCode, {
-	// 	compress  : !dev,
-	// 	sourceMap : (dev ? {
-	// 		sourceMapFileInline: true,
-	// 		outputSourceFiles: true
-	// 	} : false),
-	// })
 
 	//compress files in production
 	if(!isDev){
@@ -61,16 +40,64 @@ const build = async ({ bundle, render, ssr })=>{
 fs.emptyDirSync('./build');
 
 
-(async () => {
-	let bundles = await pack('./client/homebrew/homebrew.jsx', {
-		paths  : ['./shared','./'],
-		libs   : Proj.libs,
-		dev    : isDev && build,
+(async ()=>{
+
+	//v==----------------------------- COMPILE THEMES --------------------------------==v//
+
+	// Update list of all Theme files
+	const themes = { Legacy: [], V3: [] };
+
+	let themeFiles = fs.readdirSync('./themes/Legacy');
+	for (dir of themeFiles) {
+		const themeData = JSON.parse(fs.readFileSync(`./themes/Legacy/${dir}/settings.json`).toString());
+		themes.Legacy.push(themeData);
+	}
+
+	themeFiles = fs.readdirSync('./themes/V3');
+	for (dir of themeFiles) {
+		const themeData = JSON.parse(fs.readFileSync(`./themes/V3/${dir}/settings.json`).toString());
+		themes.V3.push(themeData);
+	}
+
+	await fs.outputFile('./themes/themes.json', JSON.stringify(themes, null, 2));
+
+	// Compile Less files TODO: MOVE INTO ABOVE SECTION TO PROGRAMATICALLY GRAB ALL LESS FILES
+	let src = './themes/Legacy/5ePHB/style.less';
+
+	less.render(fs.readFileSync(src).toString(), {
+		compress : !isDev
+	}, function(e, output) {
+		fs.outputFile('./build/themes/Legacy/5ePHB/style.css', output.css);
+	});
+	src = './themes/V3/5ePHB/style.less';
+	less.render(fs.readFileSync(src).toString(), {
+		compress : !isDev
+	}, function(e, output) {
+		fs.outputFile('./build/themes/V3/5ePHB/style.css', output.css);
+	});
+
+	// await less.render(lessCode, {
+	// 	compress  : !dev,
+	// 	sourceMap : (dev ? {
+	// 		sourceMapFileInline: true,
+	// 		outputSourceFiles: true
+	// 	} : false),
+	// })
+
+	// Move assets
+	await fs.copy('./themes/fonts', './build/fonts');
+
+	//v==----------------------------- BUNDLE PACKAGES --------------------------------==v//
+
+	const bundles = await pack('./client/homebrew/homebrew.jsx', {
+		paths : ['./shared', './'],
+		libs  : Proj.libs,
+		dev   : isDev && build,
 		transforms
 	});
 	build(bundles);
 
-	// Possible method for generating separate bundles for snippets: factor-bundle first sending all common files to bundle.js, then again using default settings, keeping only snippet bundles
+	// Possible method for generating separate bundles for theme snippets: factor-bundle first sending all common files to bundle.js, then again using default settings, keeping only snippet bundles
 	// await fs.outputFile('./build/junk.js', '');
 	// await fs.outputFile('./build/themes/Legacy/5ePHB/snippets.js', '');
 	//

server.js

@@ -60,7 +60,7 @@ const splitTextStyleAndMetadata = (brew)=>{
 		brew.style = brew.text.slice(7, index - 1);
 		brew.text = brew.text.slice(index + 5);
 	}
-	_.defaults(brew, {'renderer' : 'legacy', 'theme' : '5ePHB'});
+	_.defaults(brew, { 'renderer': 'legacy', 'theme': '5ePHB' });
 };
 
 app.use('/', serveCompressedStaticAssets(`${__dirname}/build`));

shared/naturalcrit/nav/nav.jsx

@@ -69,6 +69,12 @@ const Nav = {
 	}),
 
 	dropdown : createClass({
+		getDefaultProps : function() {
+			return {
+				trigger : 'hover'
+			};
+		},
+
 		getInitialState : function() {
 			return {
 				showDropdown : false
@@ -99,7 +105,8 @@ const Nav = {
 			});
 			return (
 				<div className='navDropdownContainer'
-					onMouseEnter={()=>this.handleDropdown(true)}
+					onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined}
+					onClick=     {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}
 					onMouseLeave={()=>this.handleDropdown(false)}>
 					{this.props.children[0]}
 					{this.renderDropdown(dropdownChildren)}

themes/Legacy/5ePHB/settings.json

@@ -1,4 +1,5 @@
 {
+  "name" : "5e PHB",
   "renderer" : "legacy",
   "baseTheme" : false
 }

themes/V3/5ePHB/settings.json

@@ -1,4 +1,5 @@
 {
+  "name" : "5e PHB",
   "renderer" : "V3",
   "baseTheme" : false
 }

themes/themes.json

@@ -0,0 +1,16 @@
+{
+  "Legacy": [
+    {
+      "name": "5e PHB",
+      "renderer": "legacy",
+      "baseTheme": false
+    }
+  ],
+  "V3": [
+    {
+      "name": "5e PHB",
+      "renderer": "V3",
+      "baseTheme": false
+    }
+  ]
+}