port atomic css

webmaker/src/components/CodeMirrorBox.jsx

@@ -14,6 +14,12 @@ export default class CodeMirrorBox extends Component {
 	initEditor() {
 		const options = this.props.options;
 		this.cm = CodeMirror.fromTextArea(this.textarea, this.props.options);
+		if (this.props.onChange) {
+			this.cm.on('change', this.props.onChange);
+		}
+		if (this.props.onBlur) {
+			this.cm.on('blur', this.props.onBlur);
+		}
 		this.props.onCreation(this.cm);
 	}
 

webmaker/src/components/ContentWrap.jsx

@@ -8,6 +8,7 @@ import { trackEvent } from '../analytics';
 import CodeMirror from '../CodeMirror';
 import CodeMirrorBox from './CodeMirrorBox';
 import { deferred } from '../deferred';
+import CssSettingsModal from './CssSettingsModal';
 
 const BASE_PATH = chrome.extension || window.DEBUG ? '/' : '/app';
 const minCodeWrapSize = 33;
@@ -159,6 +160,7 @@ export default class ContentWrap extends Component {
 			? this.detachedWindow.document.querySelector('iframe')
 			: this.frame;
 
+		const cssMode = this.props.currentItem.cssMode;
 		// If just CSS was changed (and everything shudn't be empty),
 		// change the styles inside the iframe.
 		if (
@@ -166,9 +168,12 @@ export default class ContentWrap extends Component {
 			currentCode.html === this.codeInPreview.html &&
 			currentCode.js === this.codeInPreview.js
 		) {
-			computeCss(currentCode.css, this.props.currentItem.cssMode).then(function(
+			computeCss(
-				css
+				cssMode === CssModes.ACSS ? currentCode.html : currentCode.css,
-			) {
+				cssMode,
+				this.props.currentItem.cssSettings
+			).then(function(css) {
+				this.cm.css.setValue(css);
 				if (targetFrame.contentDocument.querySelector('#webmakerstyle')) {
 					targetFrame.contentDocument.querySelector(
 						'#webmakerstyle'
@@ -181,11 +186,15 @@ export default class ContentWrap extends Component {
 				this.props.currentItem.htmlMode
 			);
 			var cssPromise = computeCss(
-				currentCode.css,
+				cssMode === CssModes.ACSS ? currentCode.html : currentCode.css,
-				this.props.currentItem.cssMode
+				cssMode,
+				this.props.currentItem.cssSettings
 			);
 			var jsPromise = computeJs(currentCode.js, this.props.currentItem.jsMode);
 			Promise.all([htmlPromise, cssPromise, jsPromise]).then(result => {
+				if (result[1]) {
+					this.cm.css.setValue(result[1]);
+				}
 				this.createPreviewFile(result[0], result[1], result[2]);
 			});
 		}
@@ -198,7 +207,10 @@ export default class ContentWrap extends Component {
 		return !!item.title;
 	}
 	shouldComponentUpdate(nextProps, nextState) {
-		return this.state.isConsoleOpen !== nextState.isConsoleOpen;
+		return (
+			this.state.isConsoleOpen !== nextState.isConsoleOpen ||
+			this.state.isCssSettingsModalOpen !== nextState.isCssSettingsModalOpen
+		);
 	}
 	componentDidUpdate() {
 		// HACK: becuase its a DOM manipulation
@@ -457,9 +469,9 @@ export default class ContentWrap extends Component {
 		cssModeLabel.parentElement.querySelector('select').value = value;
 		this.cm.css.setOption('mode', modes[value].cmMode);
 		this.cm.css.setOption('readOnly', modes[value].cmDisable);
-		// cssSettingsBtn.classList[modes[value].hasSettings ? 'remove' : 'add'](
+		window.cssSettingsBtn.classList[
-		// 'hide'
+			modes[value].hasSettings ? 'remove' : 'add'
-		// );
+		]('hide');
 		CodeMirror.autoLoadMode(
 			this.cm.css,
 			modes[value].cmPath || modes[value].cmMode
@@ -606,6 +618,14 @@ export default class ContentWrap extends Component {
 			trackEvent('fn', 'evalConsoleExpr');
 		}
 	}
+	cssSettingsBtnClickHandler() {
+		this.setState({ isCssSettingsModalOpen: true });
+		trackEvent('ui', 'cssSettingsBtnClick');
+	}
+	cssSettingsChangeHandler(settings) {
+		this.props.onCodeSettingsChange('css', settings);
+		this.setPreviewContent(true);
+	}
 
 	render() {
 		return (
@@ -714,10 +734,12 @@ export default class ContentWrap extends Component {
 									href="#"
 									id="cssSettingsBtn"
 									title="Atomic CSS configuration"
-									d-click="openCssSettingsModal"
+									onClick={this.cssSettingsBtnClickHandler.bind(this)}
 									class="code-wrap__header-btn hide"
 								>
-									Settings
+									<svg>
+										<use xlinkHref="#settings-icon" />
+									</svg>
 								</a>
 								<a
 									class="js-code-collapse-btn  code-wrap__header-btn  code-wrap__collapse-btn"
@@ -739,7 +761,6 @@ export default class ContentWrap extends Component {
 							onChange={this.onCssCodeChange.bind(this)}
 							onCreation={el => (this.cm.css = el)}
 						/>
-						{/* Inlet(scope.cm.css); */}
 					</div>
 					<div
 						data-code-wrap-id="2"
@@ -855,6 +876,15 @@ export default class ContentWrap extends Component {
 							/>
 						</div>
 					</div>
+					<CssSettingsModal
+						show={this.state.isCssSettingsModalOpen}
+						closeHandler={() =>
+							this.setState({ isCssSettingsModalOpen: false })
+						}
+						onChange={this.cssSettingsChangeHandler.bind(this)}
+						settings={this.props.currentItem.cssSettings}
+						editorTheme={this.props.prefs.editorTheme}
+					/>
 				</div>
 			</SplitPane>
 		);

webmaker/src/components/CssSettingsModal.jsx

@@ -0,0 +1,43 @@
+import { h, Component } from 'preact';
+import Modal from './Modal';
+import CodeMirrorBox from './CodeMirrorBox';
+
+export default class CssSettingsModal extends Component {
+	componentDidUpdate() {
+		if (this.props.show) {
+			setTimeout(() => {
+				if (this.props.settings) {
+					this.cm.setValue(this.props.settings.acssConfig);
+				}
+
+				// Refresh is required because codemirror gets scaled inside modal and loses alignement.
+				this.cm.refresh();
+				this.cm.focus();
+			}, 500);
+		}
+	}
+	render() {
+		return (
+			<Modal show={this.props.show} closeHandler={this.props.closeHandler}>
+				<h1>Atomic CSS Settings</h1>
+				<h3>
+					Configure Atomizer settings.{' '}
+					<a href="https://github.com/acss-io/atomizer#api" target="_blank">
+						Read more
+					</a>{' '}
+					about available settings.
+				</h3>
+				<div style="height: calc(100vh - 350px);">
+					<CodeMirrorBox
+						options={{
+							mode: 'application/ld+json',
+							theme: this.props.editorTheme
+						}}
+						onCreation={cm => (this.cm = cm)}
+						onBlur={cm => this.props.onChange(cm.getValue())}
+					/>
+				</div>
+			</Modal>
+		);
+	}
+}

webmaker/src/components/SplitPane.jsx

@@ -33,7 +33,8 @@ export class SplitPane extends Component {
 		if (this.props.onDragStart) {
 			options.onDragStart = this.props.onDragStart;
 		}
-		log('SIZE UPDATED', options);
+		// debugger;
+		// log('SIZE UPDATED', options);
 
 		this.splitInstance = Split(
 			this.props.children.map(node => '#' + node.attributes.id),

webmaker/src/components/app.jsx

@@ -526,14 +526,6 @@ export default class App extends Component {
 	}
 
 	saveCode(key) {
-		// currentItem.htmlMode = htmlMode;
-		// currentItem.cssMode = cssMode;
-		// currentItem.jsMode = jsMode;
-		if (modes['css' || cssMode].hasSettings) {
-			this.state.currentItem.cssSettings = {
-				acssConfig: scope.acssSettingsCm.getValue()
-			};
-		}
 		this.state.currentItem.updatedOn = Date.now();
 		this.state.currentItem.layoutMode = this.state.currentLayoutMode;
 
@@ -625,6 +617,11 @@ export default class App extends Component {
 			}
 		}
 	}
+	onCodeSettingsChange(type, settings) {
+		this.state.currentItem[`${type}Settings`] = {
+			acssConfig: settings
+		};
+	}
 
 	titleInputBlurHandler(e) {
 		this.state.currentItem.title = e.target.value;
@@ -678,11 +675,6 @@ export default class App extends Component {
 
 		this.contentWrap.applyCodemirrorSettings(this.state.prefs);
 
-		/*
-		scope.acssSettingsCm.setOption(
-			'theme',
-			$('[data-setting=editorTheme]').value
-		); */
 		if (prefs.autoSave) {
 			if (!this.autoSaveInterval) {
 				this.autoSaveInterval = setInterval(() => {
@@ -872,6 +864,7 @@ export default class App extends Component {
 						currentLayoutMode={this.state.currentLayoutMode}
 						currentItem={this.state.currentItem}
 						onCodeChange={this.onCodeChange.bind(this)}
+						onCodeSettingsChange={this.onCodeSettingsChange.bind(this)}
 						onCodeModeChange={this.onCodeModeChange.bind(this)}
 						onRef={comp => (this.contentWrap = comp)}
 						prefs={this.state.prefs}

webmaker/src/computes.js

@@ -21,7 +21,7 @@ export function computeHtml(code, mode) {
 
 	return d.promise;
 }
-export function computeCss(code, mode) {
+export function computeCss(code, mode, settings) {
 	var d = deferred();
 	// cleanupErrors('css');
 
@@ -77,19 +77,18 @@ export function computeCss(code, mode) {
 		if (!window.atomizer) {
 			d.resolve('');
 		} else {
-			const html = scope.cm.html.getValue();
+			const html = code;
 			const foundClasses = atomizer.findClassNames(html);
 			var finalConfig;
 			try {
 				finalConfig = atomizer.getConfig(
 					foundClasses,
-					JSON.parse(scope.acssSettingsCm.getValue())
+					JSON.parse(settings.acssConfig)
 				);
 			} catch (e) {
 				finalConfig = atomizer.getConfig(foundClasses, {});
 			}
 			const acss = atomizer.getCss(finalConfig);
-			scope.cm.css.setValue(acss);
 			d.resolve(acss);
 		}
 	}