diff --git a/webmaker/src/components/CodeMirrorBox.jsx b/webmaker/src/components/CodeMirrorBox.jsx index a1132b9..cd01aaf 100644 --- a/webmaker/src/components/CodeMirrorBox.jsx +++ b/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); } diff --git a/webmaker/src/components/ContentWrap.jsx b/webmaker/src/components/ContentWrap.jsx index 02ccbcd..caa6f80 100644 --- a/webmaker/src/components/ContentWrap.jsx +++ b/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( - css - ) { + computeCss( + 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, - this.props.currentItem.cssMode + cssMode === CssModes.ACSS ? currentCode.html : currentCode.css, + 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']( - // 'hide' - // ); + window.cssSettingsBtn.classList[ + 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 + + + (this.cm.css = el)} /> - {/* Inlet(scope.cm.css); */}
+ + this.setState({ isCssSettingsModalOpen: false }) + } + onChange={this.cssSettingsChangeHandler.bind(this)} + settings={this.props.currentItem.cssSettings} + editorTheme={this.props.prefs.editorTheme} + /> ); diff --git a/webmaker/src/components/CssSettingsModal.jsx b/webmaker/src/components/CssSettingsModal.jsx new file mode 100644 index 0000000..dca7d33 --- /dev/null +++ b/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 ( + +

Atomic CSS Settings

+

+ Configure Atomizer settings.{' '} + + Read more + {' '} + about available settings. +

+
+ (this.cm = cm)} + onBlur={cm => this.props.onChange(cm.getValue())} + /> +
+ + ); + } +} diff --git a/webmaker/src/components/SplitPane.jsx b/webmaker/src/components/SplitPane.jsx index c6e7cde..3ed583f 100644 --- a/webmaker/src/components/SplitPane.jsx +++ b/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), diff --git a/webmaker/src/components/app.jsx b/webmaker/src/components/app.jsx index 630343a..a042d05 100644 --- a/webmaker/src/components/app.jsx +++ b/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} diff --git a/webmaker/src/computes.js b/webmaker/src/computes.js index 710277a..80d52d8 100644 --- a/webmaker/src/computes.js +++ b/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); } }