mirror of
https://github.com/chinchang/web-maker.git
synced 2025-04-08 21:02:18 +02:00
move handleModeRequirements into utils
This commit is contained in:
Kushagra Gour
parent
fded86623e
commit
5c417e5d2f
@ -2,12 +2,15 @@ import { h, Component } from 'preact';
|
||||
import CodeEditor from './CodeEditor.jsx';
|
||||
import { computeHtml, computeCss, computeJs } from '../computes';
|
||||
import { modes, HtmlModes, CssModes, JsModes } from '../codeModes';
|
||||
import { log, writeFile, loadJS, getCompleteHtml } from '../utils';
|
||||
import {
|
||||
log,
|
||||
writeFile,
|
||||
getCompleteHtml,
|
||||
handleModeRequirements
|
||||
} from '../utils';
|
||||
import { SplitPane } from './SplitPane.jsx';
|
||||
import { trackEvent } from '../analytics';
|
||||
import CodeMirror from '../CodeMirror';
|
||||
import { Console } from './Console';
|
||||
import { deferred } from '../deferred';
|
||||
import CssSettingsModal from './CssSettingsModal';
|
||||
import { PreviewDimension } from './PreviewDimension.jsx';
|
||||
const minCodeWrapSize = 33;
|
||||
@ -313,9 +316,7 @@ export default class ContentWrap extends Component {
|
||||
|
||||
// Replace correct css file in LINK tags's href
|
||||
if (prefs.editorTheme) {
|
||||
window.editorThemeLinkTag.href = `lib/codemirror/theme/${
|
||||
prefs.editorTheme
|
||||
}.css`;
|
||||
window.editorThemeLinkTag.href = `lib/codemirror/theme/${prefs.editorTheme}.css`;
|
||||
}
|
||||
|
||||
window.fontStyleTag.textContent = window.fontStyleTemplate.textContent.replace(
|
||||
@ -450,56 +451,12 @@ export default class ContentWrap extends Component {
|
||||
document.body.classList.remove('is-dragging');
|
||||
this.updateSplits();
|
||||
}
|
||||
/**
|
||||
* Loaded the code comiler based on the mode selected
|
||||
*/
|
||||
handleModeRequirements(mode) {
|
||||
const baseTranspilerPath = 'lib/transpilers';
|
||||
// Exit if already loaded
|
||||
var d = deferred();
|
||||
if (modes[mode].hasLoaded) {
|
||||
d.resolve();
|
||||
return d.promise;
|
||||
}
|
||||
|
||||
function setLoadedFlag() {
|
||||
modes[mode].hasLoaded = true;
|
||||
d.resolve();
|
||||
}
|
||||
|
||||
if (mode === HtmlModes.JADE) {
|
||||
loadJS(`${baseTranspilerPath}/jade.js`).then(setLoadedFlag);
|
||||
} else if (mode === HtmlModes.MARKDOWN) {
|
||||
loadJS(`${baseTranspilerPath}/marked.js`).then(setLoadedFlag);
|
||||
} else if (mode === CssModes.LESS) {
|
||||
loadJS(`${baseTranspilerPath}/less.min.js`).then(setLoadedFlag);
|
||||
} else if (mode === CssModes.SCSS || mode === CssModes.SASS) {
|
||||
loadJS(`${baseTranspilerPath}/sass.js`).then(function() {
|
||||
window.sass = new Sass(`${baseTranspilerPath}/sass.worker.js`);
|
||||
setLoadedFlag();
|
||||
});
|
||||
} else if (mode === CssModes.STYLUS) {
|
||||
loadJS(`${baseTranspilerPath}/stylus.min.js`).then(setLoadedFlag);
|
||||
} else if (mode === CssModes.ACSS) {
|
||||
loadJS(`${baseTranspilerPath}/atomizer.browser.js`).then(setLoadedFlag);
|
||||
} else if (mode === JsModes.COFFEESCRIPT) {
|
||||
loadJS(`${baseTranspilerPath}/coffee-script.js`).then(setLoadedFlag);
|
||||
} else if (mode === JsModes.ES6) {
|
||||
loadJS(`${baseTranspilerPath}/babel.min.js`).then(setLoadedFlag);
|
||||
} else if (mode === JsModes.TS) {
|
||||
loadJS(`${baseTranspilerPath}/typescript.js`).then(setLoadedFlag);
|
||||
} else {
|
||||
d.resolve();
|
||||
}
|
||||
|
||||
return d.promise;
|
||||
}
|
||||
|
||||
updateHtmlMode(value) {
|
||||
this.props.onCodeModeChange('html', value);
|
||||
this.props.currentItem.htmlMode = value;
|
||||
this.cm.html.setLanguage(value);
|
||||
return this.handleModeRequirements(value);
|
||||
return handleModeRequirements(value);
|
||||
}
|
||||
updateCssMode(value) {
|
||||
this.props.onCodeModeChange('css', value);
|
||||
@ -509,13 +466,13 @@ export default class ContentWrap extends Component {
|
||||
modes[value].hasSettings ? 'remove' : 'add'
|
||||
]('hide');
|
||||
this.cm.css.setLanguage(value);
|
||||
return this.handleModeRequirements(value);
|
||||
return handleModeRequirements(value);
|
||||
}
|
||||
updateJsMode(value) {
|
||||
this.props.onCodeModeChange('js', value);
|
||||
this.props.currentItem.jsMode = value;
|
||||
this.cm.js.setLanguage(value);
|
||||
return this.handleModeRequirements(value);
|
||||
return handleModeRequirements(value);
|
||||
}
|
||||
codeModeChangeHandler(e) {
|
||||
var mode = e.target.value;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { h, Component } from 'preact';
|
||||
import CodeEditor from './CodeEditor';
|
||||
import { modes, HtmlModes, CssModes, JsModes } from '../codeModes';
|
||||
import { log, loadJS, BASE_PATH } from '../utils';
|
||||
import { modes, HtmlModes } from '../codeModes';
|
||||
import { log, handleModeRequirements, BASE_PATH } from '../utils';
|
||||
|
||||
import {
|
||||
linearizeFiles,
|
||||
@ -14,7 +14,6 @@ import { SplitPane } from './SplitPane';
|
||||
import { trackEvent } from '../analytics';
|
||||
import CodeMirror from '../CodeMirror';
|
||||
import 'codemirror/mode/meta';
|
||||
import { deferred } from '../deferred';
|
||||
import { SidePane } from './SidePane';
|
||||
import { Console } from './Console';
|
||||
import { SWITCH_FILE_EVENT } from '../commands';
|
||||
@ -353,9 +352,7 @@ export default class ContentWrapFiles extends Component {
|
||||
|
||||
// Replace correct css file in LINK tags's href
|
||||
if (prefs.editorTheme) {
|
||||
window.editorThemeLinkTag.href = `lib/codemirror/theme/${
|
||||
prefs.editorTheme
|
||||
}.css`;
|
||||
window.editorThemeLinkTag.href = `lib/codemirror/theme/${prefs.editorTheme}.css`;
|
||||
}
|
||||
|
||||
window.fontStyleTag.textContent = window.fontStyleTemplate.textContent.replace(
|
||||
@ -436,51 +433,6 @@ export default class ContentWrapFiles extends Component {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Loaded the code comiler based on the mode selected
|
||||
*/
|
||||
handleModeRequirements(mode) {
|
||||
const baseTranspilerPath = 'lib/transpilers';
|
||||
// Exit if already loaded
|
||||
var d = deferred();
|
||||
if (modes[mode].hasLoaded) {
|
||||
d.resolve();
|
||||
return d.promise;
|
||||
}
|
||||
|
||||
function setLoadedFlag() {
|
||||
modes[mode].hasLoaded = true;
|
||||
d.resolve();
|
||||
}
|
||||
|
||||
if (mode === HtmlModes.JADE) {
|
||||
loadJS(`${baseTranspilerPath}/jade.js`).then(setLoadedFlag);
|
||||
} else if (mode === HtmlModes.MARKDOWN) {
|
||||
loadJS(`${baseTranspilerPath}/marked.js`).then(setLoadedFlag);
|
||||
} else if (mode === CssModes.LESS) {
|
||||
loadJS(`${baseTranspilerPath}/less.min.js`).then(setLoadedFlag);
|
||||
} else if (mode === CssModes.SCSS || mode === CssModes.SASS) {
|
||||
loadJS(`${baseTranspilerPath}/sass.js`).then(function() {
|
||||
window.sass = new Sass(`${baseTranspilerPath}/sass.worker.js`);
|
||||
setLoadedFlag();
|
||||
});
|
||||
} else if (mode === CssModes.STYLUS) {
|
||||
loadJS(`${baseTranspilerPath}/stylus.min.js`).then(setLoadedFlag);
|
||||
} else if (mode === CssModes.ACSS) {
|
||||
loadJS(`${baseTranspilerPath}/atomizer.browser.js`).then(setLoadedFlag);
|
||||
} else if (mode === JsModes.COFFEESCRIPT) {
|
||||
loadJS(`${baseTranspilerPath}/coffee-script.js`).then(setLoadedFlag);
|
||||
} else if (mode === JsModes.ES6) {
|
||||
loadJS(`${baseTranspilerPath}/babel.min.js`).then(setLoadedFlag);
|
||||
} else if (mode === JsModes.TS) {
|
||||
loadJS(`${baseTranspilerPath}/typescript.js`).then(setLoadedFlag);
|
||||
} else {
|
||||
d.resolve();
|
||||
}
|
||||
|
||||
return d.promise;
|
||||
}
|
||||
|
||||
updateHtmlMode(value) {
|
||||
// this.props.onCodeModeChange('html', value);
|
||||
// this.props.currentItem.htmlMode = value;
|
||||
@ -489,7 +441,7 @@ export default class ContentWrapFiles extends Component {
|
||||
// this.cm,
|
||||
// modes[value].cmPath || modes[value].cmMode
|
||||
// );
|
||||
// return this.handleModeRequirements(value);
|
||||
// return handleModeRequirements(value);
|
||||
}
|
||||
updateCssMode(value) {
|
||||
// this.props.onCodeModeChange('css', value);
|
||||
@ -503,7 +455,7 @@ export default class ContentWrapFiles extends Component {
|
||||
this.cm,
|
||||
modes[value].cmPath || modes[value].cmMode
|
||||
);
|
||||
return this.handleModeRequirements(value);
|
||||
return handleModeRequirements(value);
|
||||
}
|
||||
updateJsMode(value) {
|
||||
this.cm.setOption('mode', modes[value].cmMode);
|
||||
@ -511,7 +463,7 @@ export default class ContentWrapFiles extends Component {
|
||||
this.cm,
|
||||
modes[value].cmPath || modes[value].cmMode
|
||||
);
|
||||
return this.handleModeRequirements(value);
|
||||
return handleModeRequirements(value);
|
||||
}
|
||||
|
||||
getDemoFrame(callback) {
|
||||
|
||||
51
src/utils.js
51
src/utils.js
@ -1,7 +1,7 @@
|
||||
import { trackEvent } from './analytics';
|
||||
|
||||
import { computeHtml, computeCss, computeJs } from './computes';
|
||||
import { JsModes } from './codeModes';
|
||||
import { modes, HtmlModes, CssModes, JsModes } from './codeModes';
|
||||
import { deferred } from './deferred';
|
||||
import { getExtensionFromFileName } from './fileUtils';
|
||||
const esprima = require('esprima');
|
||||
@ -394,9 +394,7 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
|
||||
'<script src="' +
|
||||
(chrome.extension
|
||||
? chrome.extension.getURL('lib/transpilers/babel-polyfill.min.js')
|
||||
: `${
|
||||
location.origin
|
||||
}${BASE_PATH}/lib/transpilers/babel-polyfill.min.js`) +
|
||||
: `${location.origin}${BASE_PATH}/lib/transpilers/babel-polyfill.min.js`) +
|
||||
'"></script>';
|
||||
}
|
||||
|
||||
@ -513,6 +511,51 @@ export function prettify({ file, content, type }) {
|
||||
return d.promise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Loaded the code comiler based on the mode selected
|
||||
*/
|
||||
export function handleModeRequirements(mode) {
|
||||
const baseTranspilerPath = 'lib/transpilers';
|
||||
// Exit if already loaded
|
||||
var d = deferred();
|
||||
if (modes[mode].hasLoaded) {
|
||||
d.resolve();
|
||||
return d.promise;
|
||||
}
|
||||
|
||||
function setLoadedFlag() {
|
||||
modes[mode].hasLoaded = true;
|
||||
d.resolve();
|
||||
}
|
||||
|
||||
if (mode === HtmlModes.JADE) {
|
||||
loadJS(`${baseTranspilerPath}/jade.js`).then(setLoadedFlag);
|
||||
} else if (mode === HtmlModes.MARKDOWN) {
|
||||
loadJS(`${baseTranspilerPath}/marked.js`).then(setLoadedFlag);
|
||||
} else if (mode === CssModes.LESS) {
|
||||
loadJS(`${baseTranspilerPath}/less.min.js`).then(setLoadedFlag);
|
||||
} else if (mode === CssModes.SCSS || mode === CssModes.SASS) {
|
||||
loadJS(`${baseTranspilerPath}/sass.js`).then(function() {
|
||||
window.sass = new Sass(`${baseTranspilerPath}/sass.worker.js`);
|
||||
setLoadedFlag();
|
||||
});
|
||||
} else if (mode === CssModes.STYLUS) {
|
||||
loadJS(`${baseTranspilerPath}/stylus.min.js`).then(setLoadedFlag);
|
||||
} else if (mode === CssModes.ACSS) {
|
||||
loadJS(`${baseTranspilerPath}/atomizer.browser.js`).then(setLoadedFlag);
|
||||
} else if (mode === JsModes.COFFEESCRIPT) {
|
||||
loadJS(`${baseTranspilerPath}/coffee-script.js`).then(setLoadedFlag);
|
||||
} else if (mode === JsModes.ES6) {
|
||||
loadJS(`${baseTranspilerPath}/babel.min.js`).then(setLoadedFlag);
|
||||
} else if (mode === JsModes.TS) {
|
||||
loadJS(`${baseTranspilerPath}/typescript.js`).then(setLoadedFlag);
|
||||
} else {
|
||||
d.resolve();
|
||||
}
|
||||
|
||||
return d.promise;
|
||||
}
|
||||
|
||||
if (window.IS_EXTENSION) {
|
||||
document.body.classList.add('is-extension');
|
||||
} else {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user