mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-08-02 11:30:22 +02:00
Code Issues Releases Wiki Activity

move handleModeRequirements into utils

Browse Source
This commit is contained in:
Kushagra Gour
2019-07-16 16:50:31 +05:30
parent fded86623e
commit 5c417e5d2f
3 changed files with 63 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/ContentWrap.jsx
View File

@@ -2,12 +2,15 @@ import { h, Component } from 'preact';
import CodeEditor from './CodeEditor.jsx'; import CodeEditor from './CodeEditor.jsx';
import { computeHtml, computeCss, computeJs } from '../computes'; import { computeHtml, computeCss, computeJs } from '../computes';
import { modes, HtmlModes, CssModes, JsModes } from '../codeModes'; 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 { SplitPane } from './SplitPane.jsx';
import { trackEvent } from '../analytics'; import { trackEvent } from '../analytics';
import CodeMirror from '../CodeMirror';
import { Console } from './Console'; import { Console } from './Console';
import { deferred } from '../deferred';
import CssSettingsModal from './CssSettingsModal'; import CssSettingsModal from './CssSettingsModal';
import { PreviewDimension } from './PreviewDimension.jsx'; import { PreviewDimension } from './PreviewDimension.jsx';
const minCodeWrapSize = 33; const minCodeWrapSize = 33;
@@ -313,9 +316,7 @@ export default class ContentWrap extends Component {
// Replace correct css file in LINK tags's href // Replace correct css file in LINK tags's href
if (prefs.editorTheme) { if (prefs.editorTheme) {
window.editorThemeLinkTag.href = `lib/codemirror/theme/${ window.editorThemeLinkTag.href = `lib/codemirror/theme/${prefs.editorTheme}.css`;
prefs.editorTheme
}.css`;
} }
window.fontStyleTag.textContent = window.fontStyleTemplate.textContent.replace( window.fontStyleTag.textContent = window.fontStyleTemplate.textContent.replace(
@@ -450,56 +451,12 @@ export default class ContentWrap extends Component {
document.body.classList.remove('is-dragging'); document.body.classList.remove('is-dragging');
this.updateSplits(); 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) { updateHtmlMode(value) {
this.props.onCodeModeChange('html', value); this.props.onCodeModeChange('html', value);
this.props.currentItem.htmlMode = value; this.props.currentItem.htmlMode = value;
this.cm.html.setLanguage(value); this.cm.html.setLanguage(value);
return this.handleModeRequirements(value); return handleModeRequirements(value);
} }
updateCssMode(value) { updateCssMode(value) {
this.props.onCodeModeChange('css', value); this.props.onCodeModeChange('css', value);
@@ -509,13 +466,13 @@ export default class ContentWrap extends Component {
modes[value].hasSettings ? 'remove' : 'add' modes[value].hasSettings ? 'remove' : 'add'
]('hide'); ]('hide');
this.cm.css.setLanguage(value); this.cm.css.setLanguage(value);
return this.handleModeRequirements(value); return handleModeRequirements(value);
} }
updateJsMode(value) { updateJsMode(value) {
this.props.onCodeModeChange('js', value); this.props.onCodeModeChange('js', value);
this.props.currentItem.jsMode = value; this.props.currentItem.jsMode = value;
this.cm.js.setLanguage(value); this.cm.js.setLanguage(value);
return this.handleModeRequirements(value); return handleModeRequirements(value);
} }
codeModeChangeHandler(e) { codeModeChangeHandler(e) {
var mode = e.target.value; var mode = e.target.value;

60
src/components/ContentWrapFiles.jsx
View File

@@ -1,7 +1,7 @@
import { h, Component } from 'preact'; import { h, Component } from 'preact';
import CodeEditor from './CodeEditor'; import CodeEditor from './CodeEditor';
import { modes, HtmlModes, CssModes, JsModes } from '../codeModes'; import { modes, HtmlModes } from '../codeModes';
import { log, loadJS, BASE_PATH } from '../utils'; import { log, handleModeRequirements, BASE_PATH } from '../utils';
import { import {
linearizeFiles, linearizeFiles,
@@ -14,7 +14,6 @@ import { SplitPane } from './SplitPane';
import { trackEvent } from '../analytics'; import { trackEvent } from '../analytics';
import CodeMirror from '../CodeMirror'; import CodeMirror from '../CodeMirror';
import 'codemirror/mode/meta'; import 'codemirror/mode/meta';
import { deferred } from '../deferred';
import { SidePane } from './SidePane'; import { SidePane } from './SidePane';
import { Console } from './Console'; import { Console } from './Console';
import { SWITCH_FILE_EVENT } from '../commands'; 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 // Replace correct css file in LINK tags's href
if (prefs.editorTheme) { if (prefs.editorTheme) {
window.editorThemeLinkTag.href = `lib/codemirror/theme/${ window.editorThemeLinkTag.href = `lib/codemirror/theme/${prefs.editorTheme}.css`;
prefs.editorTheme
}.css`;
} }
window.fontStyleTag.textContent = window.fontStyleTemplate.textContent.replace( 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) { updateHtmlMode(value) {
// this.props.onCodeModeChange('html', value); // this.props.onCodeModeChange('html', value);
// this.props.currentItem.htmlMode = value; // this.props.currentItem.htmlMode = value;
@@ -489,7 +441,7 @@ export default class ContentWrapFiles extends Component {
// this.cm, // this.cm,
// modes[value].cmPath || modes[value].cmMode // modes[value].cmPath || modes[value].cmMode
// ); // );
// return this.handleModeRequirements(value); // return handleModeRequirements(value);
} }
updateCssMode(value) { updateCssMode(value) {
// this.props.onCodeModeChange('css', value); // this.props.onCodeModeChange('css', value);
@@ -503,7 +455,7 @@ export default class ContentWrapFiles extends Component {
this.cm, this.cm,
modes[value].cmPath || modes[value].cmMode modes[value].cmPath || modes[value].cmMode
); );
return this.handleModeRequirements(value); return handleModeRequirements(value);
} }
updateJsMode(value) { updateJsMode(value) {
this.cm.setOption('mode', modes[value].cmMode); this.cm.setOption('mode', modes[value].cmMode);
@@ -511,7 +463,7 @@ export default class ContentWrapFiles extends Component {
this.cm, this.cm,
modes[value].cmPath || modes[value].cmMode modes[value].cmPath || modes[value].cmMode
); );
return this.handleModeRequirements(value); return handleModeRequirements(value);
} }
getDemoFrame(callback) { getDemoFrame(callback) {

51
src/utils.js
View File

@@ -1,7 +1,7 @@
import { trackEvent } from './analytics'; import { trackEvent } from './analytics';
import { computeHtml, computeCss, computeJs } from './computes'; import { computeHtml, computeCss, computeJs } from './computes';
import { JsModes } from './codeModes'; import { modes, HtmlModes, CssModes, JsModes } from './codeModes';
import { deferred } from './deferred'; import { deferred } from './deferred';
import { getExtensionFromFileName } from './fileUtils'; import { getExtensionFromFileName } from './fileUtils';
const esprima = require('esprima'); const esprima = require('esprima');
@@ -394,9 +394,7 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
'<script src="' + '<script src="' +
(chrome.extension (chrome.extension
? chrome.extension.getURL('lib/transpilers/babel-polyfill.min.js') ? 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>'; '"></script>';
} }
@@ -513,6 +511,51 @@ export function prettify({ file, content, type }) {
return d.promise; 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) { if (window.IS_EXTENSION) {
document.body.classList.add('is-extension'); document.body.classList.add('is-extension');
} else { } else {