remove temp webmaker folder. thanq folder :)
6
webmaker/.gitignore
vendored
@@ -1,6 +0,0 @@
|
||||
node_modules
|
||||
/build
|
||||
/*.log
|
||||
*.lock
|
||||
|
||||
package-lock.json
|
@@ -1,22 +0,0 @@
|
||||
# webmaker
|
||||
|
||||
## CLI Commands
|
||||
|
||||
``` bash
|
||||
# install dependencies
|
||||
npm install
|
||||
|
||||
# serve with hot reload at localhost:8080
|
||||
npm run dev
|
||||
|
||||
# build for production with minification
|
||||
npm run build
|
||||
|
||||
# test the production build locally
|
||||
npm run serve
|
||||
|
||||
# run tests with jest and preact-render-spy
|
||||
npm run test
|
||||
```
|
||||
|
||||
For detailed explanation on how things work, checkout the [CLI Readme](https://github.com/developit/preact-cli/blob/master/README.md).
|
@@ -1,68 +0,0 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "webmaker",
|
||||
"version": "0.0.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev",
|
||||
"build": "preact build",
|
||||
"serve": "preact build && preact serve",
|
||||
"dev": "preact watch",
|
||||
"lint": "eslint src",
|
||||
"test": "jest ./tests"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "eslint-config-synacor"
|
||||
},
|
||||
"eslintIgnore": [
|
||||
"build/*"
|
||||
],
|
||||
"devDependencies": {
|
||||
"eslint": "^4.9.0",
|
||||
"eslint-config-synacor": "^2.0.2",
|
||||
"identity-obj-proxy": "^3.0.0",
|
||||
"if-env": "^1.0.0",
|
||||
"jest": "^21.2.1",
|
||||
"preact-cli": "^2.1.0",
|
||||
"preact-render-spy": "^1.2.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emmetio/codemirror-plugin": "^0.5.4",
|
||||
"codemirror": "^5.37.0",
|
||||
"copy-webpack-plugin": "^4.5.1",
|
||||
"esprima": "^4.0.0",
|
||||
"firebase": "^5.0.4",
|
||||
"preact": "^8.2.6",
|
||||
"preact-compat": "^3.17.0",
|
||||
"preact-router": "^2.5.7",
|
||||
"split.js": "^1.3.5"
|
||||
},
|
||||
"jest": {
|
||||
"verbose": true,
|
||||
"setupFiles": [
|
||||
"<rootDir>/src/tests/__mocks__/browserMocks.js"
|
||||
],
|
||||
"testURL": "http://localhost:8080",
|
||||
"moduleFileExtensions": [
|
||||
"js",
|
||||
"jsx"
|
||||
],
|
||||
"moduleDirectories": [
|
||||
"node_modules"
|
||||
],
|
||||
"moduleNameMapper": {
|
||||
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
|
||||
"\\.(css|less|scss)$": "identity-obj-proxy",
|
||||
"^./style$": "identity-obj-proxy",
|
||||
"^preact$": "<rootDir>/node_modules/preact/dist/preact.min.js",
|
||||
"^react$": "preact-compat",
|
||||
"^react-dom$": "preact-compat",
|
||||
"^create-react-class$": "preact-compat/lib/create-react-class",
|
||||
"^react-addons-css-transition-group$": "preact-css-transition-group"
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"last 3 Chrome versions",
|
||||
"last 3 Firefox versions"
|
||||
]
|
||||
}
|
@@ -1,60 +0,0 @@
|
||||
import CopyWebpackPlugin from 'copy-webpack-plugin'
|
||||
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
|
||||
|
||||
/**
|
||||
* Function that mutates original webpack config.
|
||||
* Supports asynchronous changes when promise is returned.
|
||||
*
|
||||
* @param {object} config - original webpack config.
|
||||
* @param {object} env - options passed to CLI.
|
||||
* @param {WebpackConfigHelpers} helpers - object with useful helpers when working with config.
|
||||
**/
|
||||
export default function (config, env, helpers) {
|
||||
if (env.isProd) {
|
||||
config.devtool = false; // disable sourcemaps
|
||||
|
||||
config.plugins.push(
|
||||
new CommonsChunkPlugin({
|
||||
name: 'vendor',
|
||||
minChunks: ({
|
||||
resource
|
||||
}) => /node_modules/.test(resource),
|
||||
})
|
||||
);
|
||||
|
||||
config.plugins.push(new CopyWebpackPlugin([{
|
||||
context: `${__dirname}/src/assets`,
|
||||
from: `*.*`
|
||||
}, {
|
||||
from: `${__dirname}/src/lib`,
|
||||
to: 'lib/'
|
||||
},
|
||||
{
|
||||
from: `${__dirname}/src/detached-window.js`
|
||||
},
|
||||
{
|
||||
from: `${__dirname}/src/*.ttf`
|
||||
},
|
||||
{
|
||||
from: `${__dirname}/src/patreon.png`
|
||||
},
|
||||
{
|
||||
from: `${__dirname}/src/preview.html`
|
||||
},
|
||||
{
|
||||
from: `${__dirname}/src/style.css`
|
||||
}
|
||||
]));
|
||||
|
||||
const {
|
||||
plugin
|
||||
} = helpers.getPluginsByName(config, 'SWPrecacheWebpackPlugin')[0];
|
||||
plugin.options.maximumFileSizeToCacheInBytes = 2900000;
|
||||
|
||||
const {
|
||||
index
|
||||
} = helpers.getPluginsByName(config, 'UglifyJsPlugin')[0]
|
||||
config.plugins.splice(index, 1)
|
||||
}
|
||||
|
||||
}
|
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"presets": [
|
||||
["preact-cli/babel", { "modules": "commonjs" }]
|
||||
]
|
||||
}
|
@@ -1,60 +0,0 @@
|
||||
// Most of the code from this file comes from:
|
||||
// https://github.com/codemirror/CodeMirror/blob/master/addon/mode/loadmode.js
|
||||
import CodeMirror from 'codemirror';
|
||||
|
||||
// Make CodeMirror available globally so the modes' can register themselves.
|
||||
window.CodeMirror = CodeMirror
|
||||
|
||||
if (!CodeMirror.modeURL) CodeMirror.modeURL = 'lib/codemirror/mode/%N/%N.js';
|
||||
|
||||
var loading = {}
|
||||
|
||||
function splitCallback(cont, n) {
|
||||
var countDown = n
|
||||
return function () {
|
||||
if (--countDown === 0) cont()
|
||||
}
|
||||
}
|
||||
|
||||
function ensureDeps(mode, cont) {
|
||||
var deps = CodeMirror.modes[mode].dependencies
|
||||
if (!deps) return cont()
|
||||
var missing = []
|
||||
for (var i = 0; i < deps.length; ++i) {
|
||||
if (!CodeMirror.modes.hasOwnProperty(deps[i])) missing.push(deps[i])
|
||||
}
|
||||
if (!missing.length) return cont()
|
||||
var split = splitCallback(cont, missing.length)
|
||||
for (i = 0; i < missing.length; ++i) CodeMirror.requireMode(missing[i], split)
|
||||
}
|
||||
|
||||
CodeMirror.requireMode = function (mode, cont) {
|
||||
if (typeof mode !== 'string') mode = mode.name
|
||||
if (CodeMirror.modes.hasOwnProperty(mode)) return ensureDeps(mode, cont)
|
||||
if (loading.hasOwnProperty(mode)) return loading[mode].push(cont)
|
||||
|
||||
var file = CodeMirror.modeURL.replace(/%N/g, mode)
|
||||
|
||||
var script = document.createElement('script')
|
||||
script.src = file
|
||||
var others = document.getElementsByTagName('script')[0]
|
||||
var list = loading[mode] = [cont]
|
||||
|
||||
CodeMirror.on(script, 'load', function () {
|
||||
ensureDeps(mode, function () {
|
||||
for (var i = 0; i < list.length; ++i) list[i]()
|
||||
})
|
||||
})
|
||||
|
||||
others.parentNode.insertBefore(script, others)
|
||||
}
|
||||
|
||||
CodeMirror.autoLoadMode = function (instance, mode) {
|
||||
if (CodeMirror.modes.hasOwnProperty(mode)) return
|
||||
|
||||
CodeMirror.requireMode(mode, function () {
|
||||
instance.setOption('mode', instance.getOption('mode'))
|
||||
})
|
||||
}
|
||||
|
||||
export default CodeMirror
|
@@ -1,49 +0,0 @@
|
||||
import {
|
||||
log
|
||||
} from "./utils";
|
||||
|
||||
/* global ga */
|
||||
|
||||
// eslint-disable-next-line max-params
|
||||
export function trackEvent(category, action, label, value) {
|
||||
if (window.DEBUG) {
|
||||
log('trackevent', category, action, label, value);
|
||||
return;
|
||||
}
|
||||
if (window.ga) {
|
||||
ga('send', 'event', category, action, label, value);
|
||||
}
|
||||
};
|
||||
|
||||
// if online, load after sometime
|
||||
if (false && navigator.onLine && !window.DEBUG) {
|
||||
/* eslint-disable */
|
||||
|
||||
// prettier-ignore
|
||||
setTimeout(function () {
|
||||
(function (i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function () {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
|
||||
if (location.href.indexOf('chrome-extension://') === -1) {
|
||||
ga('create', 'UA-87786708-1');
|
||||
} else {
|
||||
ga('create', 'UA-87786708-1', {
|
||||
'cookieDomain': 'none'
|
||||
});
|
||||
// required for chrome extension protocol
|
||||
ga('set', 'checkProtocolTask', function () { /* nothing */ });
|
||||
}
|
||||
ga('send', 'pageview');
|
||||
}, 100);
|
||||
|
||||
/* eslint-enable */
|
||||
}
|
Before Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 50 KiB |
Before Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 626 B |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 8.8 KiB |
@@ -1,43 +0,0 @@
|
||||
import {
|
||||
trackEvent
|
||||
} from './analytics';
|
||||
|
||||
import firebase from 'firebase/app'
|
||||
|
||||
export const auth = {
|
||||
logout() {
|
||||
firebase.auth().signOut();
|
||||
},
|
||||
login(providerName) {
|
||||
var provider;
|
||||
if (providerName === 'facebook') {
|
||||
provider = new firebase.auth.FacebookAuthProvider();
|
||||
} else if (providerName === 'twitter') {
|
||||
provider = new firebase.auth.TwitterAuthProvider();
|
||||
} else if (providerName === 'google') {
|
||||
provider = new firebase.auth.GoogleAuthProvider();
|
||||
provider.addScope('https://www.googleapis.com/auth/userinfo.profile');
|
||||
} else {
|
||||
provider = new firebase.auth.GithubAuthProvider();
|
||||
}
|
||||
|
||||
return firebase
|
||||
.auth()
|
||||
.signInWithPopup(provider)
|
||||
.then(function () {
|
||||
trackEvent('fn', 'loggedIn', providerName);
|
||||
// Save to recommend next time
|
||||
window.db.local.set({
|
||||
lastAuthProvider: providerName
|
||||
});
|
||||
})
|
||||
.catch(function (error) {
|
||||
utils.log(error);
|
||||
if (error.code === 'auth/account-exists-with-different-credential') {
|
||||
alert(
|
||||
'You have already signed up with the same email using different social login'
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
@@ -1,92 +0,0 @@
|
||||
export const HtmlModes = {
|
||||
HTML: 'html',
|
||||
MARKDOWN: 'markdown',
|
||||
JADE: 'jade' // unsafe eval is put in manifest for this file
|
||||
};
|
||||
export const CssModes = {
|
||||
CSS: 'css',
|
||||
SCSS: 'scss',
|
||||
SASS: 'sass',
|
||||
LESS: 'less',
|
||||
STYLUS: 'stylus',
|
||||
ACSS: 'acss'
|
||||
};
|
||||
export const JsModes = {
|
||||
JS: 'js',
|
||||
ES6: 'es6',
|
||||
COFFEESCRIPT: 'coffee',
|
||||
TS: 'typescript'
|
||||
};
|
||||
export const modes = {};
|
||||
modes[HtmlModes.HTML] = {
|
||||
label: 'HTML',
|
||||
cmMode: 'htmlmixed',
|
||||
codepenVal: 'none'
|
||||
};
|
||||
modes[HtmlModes.MARKDOWN] = {
|
||||
label: 'Markdown',
|
||||
cmMode: 'markdown',
|
||||
codepenVal: 'markdown'
|
||||
};
|
||||
modes[HtmlModes.JADE] = {
|
||||
label: 'Pug',
|
||||
cmMode: 'pug',
|
||||
codepenVal: 'pug'
|
||||
};
|
||||
modes[JsModes.JS] = {
|
||||
label: 'JS',
|
||||
cmMode: 'javascript',
|
||||
codepenVal: 'none'
|
||||
};
|
||||
modes[JsModes.COFFEESCRIPT] = {
|
||||
label: 'CoffeeScript',
|
||||
cmMode: 'coffeescript',
|
||||
codepenVal: 'coffeescript'
|
||||
};
|
||||
modes[JsModes.ES6] = {
|
||||
label: 'ES6 (Babel)',
|
||||
cmMode: 'jsx',
|
||||
codepenVal: 'babel'
|
||||
};
|
||||
modes[JsModes.TS] = {
|
||||
label: 'TypeScript',
|
||||
cmPath: 'jsx',
|
||||
cmMode: 'text/typescript-jsx',
|
||||
codepenVal: 'typescript'
|
||||
};
|
||||
modes[CssModes.CSS] = {
|
||||
label: 'CSS',
|
||||
cmPath: 'css',
|
||||
cmMode: 'css',
|
||||
codepenVal: 'none'
|
||||
};
|
||||
modes[CssModes.SCSS] = {
|
||||
label: 'SCSS',
|
||||
cmPath: 'css',
|
||||
cmMode: 'text/x-scss',
|
||||
codepenVal: 'scss'
|
||||
};
|
||||
modes[CssModes.SASS] = {
|
||||
label: 'SASS',
|
||||
cmMode: 'sass',
|
||||
codepenVal: 'sass'
|
||||
};
|
||||
modes[CssModes.LESS] = {
|
||||
label: 'LESS',
|
||||
cmPath: 'css',
|
||||
cmMode: 'text/x-less',
|
||||
codepenVal: 'less'
|
||||
};
|
||||
modes[CssModes.STYLUS] = {
|
||||
label: 'Stylus',
|
||||
cmMode: 'stylus',
|
||||
codepenVal: 'stylus'
|
||||
};
|
||||
modes[CssModes.ACSS] = {
|
||||
label: 'Atomic CSS',
|
||||
cmPath: 'css',
|
||||
cmMode: 'css',
|
||||
codepenVal: 'notsupported',
|
||||
cmDisable: true,
|
||||
hasSettings: true
|
||||
};
|
@@ -1,145 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { jsLibs, cssLibs } from '../libraryList';
|
||||
import { trackEvent } from '../analytics';
|
||||
import { LibraryAutoSuggest } from './LibraryAutoSuggest';
|
||||
|
||||
export default class AddLibrary extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
css: props.css || '',
|
||||
js: props.js || ''
|
||||
};
|
||||
}
|
||||
onSelectChange(e) {
|
||||
const target = e.target;
|
||||
if (!target.value) {
|
||||
return;
|
||||
}
|
||||
const type = target.selectedOptions[0].dataset.type;
|
||||
if (type === 'js') {
|
||||
this.setState({
|
||||
js: `${this.state.js}\n${target.value}`
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
css: `${this.state.css}\n${target.value}`
|
||||
});
|
||||
}
|
||||
|
||||
trackEvent('ui', 'addLibrarySelect', target.selectedOptions[0].label);
|
||||
this.props.onChange({ js: this.state.js, css: this.state.css });
|
||||
// Reset the select to the default value
|
||||
target.value = '';
|
||||
}
|
||||
textareaBlurHandler(e, textarea) {
|
||||
const target = e ? e.target : textarea;
|
||||
const type = target.dataset.lang;
|
||||
if (type === 'js') {
|
||||
this.setState({
|
||||
js: target.value || ''
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
css: target.value || ''
|
||||
});
|
||||
}
|
||||
|
||||
// trackEvent('ui', 'addLibrarySelect', target.selectedOptions[0].label);
|
||||
this.props.onChange({ js: this.state.js, css: this.state.css });
|
||||
}
|
||||
suggestionSelectHandler(value) {
|
||||
const textarea = value.match(/\.js$/)
|
||||
? window.externalJsTextarea
|
||||
: window.externalCssTextarea;
|
||||
textarea.value = `${textarea.value}\n${value}`;
|
||||
window.externalLibrarySearchInput.value = '';
|
||||
this.textareaBlurHandler(null, textarea);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Add Library</h1>
|
||||
|
||||
<div class="flex">
|
||||
<svg style="width: 30px; height: 30px;fill:#999">
|
||||
<use xlinkHref="#search" />
|
||||
</svg>
|
||||
<LibraryAutoSuggest
|
||||
fullWidth
|
||||
onSelect={this.suggestionSelectHandler.bind(this)}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="externalLibrarySearchInput"
|
||||
class="full-width"
|
||||
placeholder="Type here to search libraries"
|
||||
/>
|
||||
</LibraryAutoSuggest>
|
||||
</div>
|
||||
<div class="tar opacity--70">
|
||||
<small>Powered by cdnjs</small>
|
||||
</div>
|
||||
<div style="margin:20px 0;">
|
||||
Choose from popular libraries:
|
||||
<select
|
||||
name=""
|
||||
id="js-add-library-select"
|
||||
onChange={this.onSelectChange.bind(this)}
|
||||
>
|
||||
<option value="">-------</option>
|
||||
<optgroup label="JavaScript Libraries">
|
||||
{jsLibs.map(lib => (
|
||||
<option data-type={lib.type} value={lib.url}>
|
||||
{lib.label}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
<optgroup label="CSS Libraries">
|
||||
{cssLibs.map(lib => (
|
||||
<option data-type={lib.type} value={lib.url}>
|
||||
{lib.label}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h3 class="mb-0">JS</h3>
|
||||
<p class="mt-0 help-text">Put each library in new line</p>
|
||||
|
||||
<p style="font-size: 0.8em;" class="show-when-extension opacity--70">
|
||||
Note: You can load external scripts from following domains: localhost,
|
||||
https://ajax.googleapis.com, https://code.jquery.com,
|
||||
https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com,
|
||||
https://cdn77.com, https://maxcdn.bootstrapcdn.com,
|
||||
https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in
|
||||
</p>
|
||||
|
||||
<textarea
|
||||
onBlur={this.textareaBlurHandler.bind(this)}
|
||||
data-lang="js"
|
||||
class="full-width"
|
||||
id="externalJsTextarea"
|
||||
cols="30"
|
||||
rows="5"
|
||||
placeholder="Put each library in new line"
|
||||
value={this.state.js}
|
||||
/>
|
||||
|
||||
<h3 class="mb-0">CSS</h3>
|
||||
<p class="mt-0 help-text">Put each library in new line</p>
|
||||
<textarea
|
||||
onBlur={this.textareaBlurHandler.bind(this)}
|
||||
data-lang="css"
|
||||
class="full-width"
|
||||
id="externalCssTextarea"
|
||||
cols="30"
|
||||
rows="5"
|
||||
placeholder="Put each library in new line"
|
||||
value={this.state.css}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,12 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { log } from '../utils';
|
||||
|
||||
export class Alerts extends Component {
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
return false;
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div class="alerts-container" id="js-alerts-container" />;
|
||||
}
|
||||
}
|
@@ -1,39 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import Modal from './Modal';
|
||||
|
||||
export default class AskToImportModal extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Modal
|
||||
extraClasses="ask-to-import-modal"
|
||||
show={this.props.show}
|
||||
closeHandler={this.props.closeHandler}
|
||||
>
|
||||
<h2>Import your creations in your account</h2>
|
||||
|
||||
<div>
|
||||
<p>
|
||||
You have <span>{this.props.oldSavedCreationsCount}</span> creations
|
||||
saved in your local machine. Do you want to import those creations
|
||||
in your account so they are more secure and accessible anywhere?
|
||||
</p>
|
||||
<p>
|
||||
It's okay if you don't want to. You can simply logout and access
|
||||
them anytime on this browser.
|
||||
</p>
|
||||
<div class="flex flex-h-end">
|
||||
<button onClick={this.props.dontAskBtnClickHandler} class="btn">
|
||||
Don't ask me again
|
||||
</button>
|
||||
<button
|
||||
onClick={this.props.importBtnClickHandler}
|
||||
class="btn btn--primary ml-1"
|
||||
>
|
||||
Yes, please import
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,37 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import CodeMirror from '../CodeMirror';
|
||||
|
||||
import 'codemirror/mode/javascript/javascript.js';
|
||||
|
||||
export default class CodeMirrorBox extends Component {
|
||||
componentDidMount() {
|
||||
this.initEditor();
|
||||
}
|
||||
shouldComponentUpdate() {
|
||||
return false;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<textarea
|
||||
ref={el => (this.textarea = el)}
|
||||
name=""
|
||||
id=""
|
||||
cols="30"
|
||||
rows="10"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,946 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import UserCodeMirror from './UserCodeMirror.jsx';
|
||||
import { computeHtml, computeCss, computeJs } from '../computes';
|
||||
import { modes, HtmlModes, CssModes, JsModes } from '../codeModes';
|
||||
import { log, writeFile, loadJS, getCompleteHtml } from '../utils';
|
||||
import { SplitPane } from './SplitPane.jsx';
|
||||
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;
|
||||
|
||||
export default class ContentWrap extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isConsoleOpen: false,
|
||||
isCssSettingsModalOpen: false
|
||||
};
|
||||
this.updateTimer = null;
|
||||
this.updateDelay = 500;
|
||||
this.htmlMode = HtmlModes.HTML;
|
||||
this.jsMode = HtmlModes.HTML;
|
||||
this.cssMode = CssModes.CSS;
|
||||
this.jsMode = JsModes.JS;
|
||||
this.prefs = {};
|
||||
this.codeInPreview = { html: null, css: null, js: null };
|
||||
this.cmCodes = { html: props.currentItem.html, css: '', js: '' };
|
||||
this.cm = {};
|
||||
this.logCount = 0;
|
||||
|
||||
window.onMessageFromConsole = this.onMessageFromConsole.bind(this);
|
||||
|
||||
window.previewException = this.previewException.bind(this);
|
||||
// `clearConsole` is on window because it gets called from inside iframe also.
|
||||
window.clearConsole = this.clearConsole.bind(this);
|
||||
}
|
||||
|
||||
onHtmlCodeChange(editor, change) {
|
||||
this.cmCodes.html = editor.getValue();
|
||||
this.props.onCodeChange(
|
||||
'html',
|
||||
this.cmCodes.html,
|
||||
change.origin !== 'setValue'
|
||||
);
|
||||
this.onCodeChange(editor, change);
|
||||
}
|
||||
onCssCodeChange(editor, change) {
|
||||
this.cmCodes.css = editor.getValue();
|
||||
this.props.onCodeChange(
|
||||
'css',
|
||||
this.cmCodes.css,
|
||||
change.origin !== 'setValue'
|
||||
);
|
||||
this.onCodeChange(editor, change);
|
||||
}
|
||||
onJsCodeChange(editor, change) {
|
||||
this.cmCodes.js = editor.getValue();
|
||||
this.props.onCodeChange(
|
||||
'js',
|
||||
this.cmCodes.js,
|
||||
change.origin !== 'setValue'
|
||||
);
|
||||
this.onCodeChange(editor, change);
|
||||
}
|
||||
onCodeChange(editor, change) {
|
||||
clearTimeout(this.updateTimer);
|
||||
|
||||
this.updateTimer = setTimeout(() => {
|
||||
// This is done so that multiple simultaneous setValue don't trigger too many preview refreshes
|
||||
// and in turn too many file writes on a single file (eg. preview.html).
|
||||
if (change.origin !== 'setValue') {
|
||||
// Specifically checking for false so that the condition doesn't get true even
|
||||
// on absent key - possible when the setting key hasn't been fetched yet.
|
||||
if (this.prefs.autoPreview !== false) {
|
||||
this.setPreviewContent();
|
||||
}
|
||||
|
||||
// Track when people actually are working.
|
||||
trackEvent.previewCount = (trackEvent.previewCount || 0) + 1;
|
||||
if (trackEvent.previewCount === 4) {
|
||||
trackEvent('fn', 'usingPreview');
|
||||
}
|
||||
}
|
||||
}, this.updateDelay);
|
||||
}
|
||||
|
||||
createPreviewFile(html, css, js) {
|
||||
const shouldInlineJs =
|
||||
!window.webkitRequestFileSystem || !window.IS_EXTENSION;
|
||||
var contents = getCompleteHtml(
|
||||
html,
|
||||
css,
|
||||
shouldInlineJs ? js : null,
|
||||
this.props.currentItem
|
||||
);
|
||||
var blob = new Blob([contents], { type: 'text/plain;charset=UTF-8' });
|
||||
var blobjs = new Blob([js], { type: 'text/plain;charset=UTF-8' });
|
||||
|
||||
// Track if people have written code.
|
||||
if (!trackEvent.hasTrackedCode && (html || css || js)) {
|
||||
trackEvent('fn', 'hasCode');
|
||||
trackEvent.hasTrackedCode = true;
|
||||
}
|
||||
|
||||
if (shouldInlineJs) {
|
||||
if (this.detachedWindow) {
|
||||
log('✉️ Sending message to detached window');
|
||||
this.detachedWindow.postMessage({ contents }, '*');
|
||||
} else {
|
||||
this.frame.src = this.frame.src;
|
||||
setTimeout(() => {
|
||||
this.frame.contentDocument.open();
|
||||
this.frame.contentDocument.write(contents);
|
||||
this.frame.contentDocument.close();
|
||||
}, 10);
|
||||
}
|
||||
} else {
|
||||
// we need to store user script in external JS file to prevent inline-script
|
||||
// CSP from affecting it.
|
||||
writeFile('script.js', blobjs, function() {
|
||||
writeFile('preview.html', blob, function() {
|
||||
var origin = chrome.i18n.getMessage()
|
||||
? `chrome-extension://${chrome.i18n.getMessage('@@extension_id')}`
|
||||
: `${location.origin}`;
|
||||
var src = `filesystem:${origin}/temporary/preview.html`;
|
||||
if (scope.detachedWindow) {
|
||||
scope.detachedWindow.postMessage(src, '*');
|
||||
} else {
|
||||
frame.src = src;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
cleanupErrors(lang) {
|
||||
this.cm[lang].clearGutter('error-gutter');
|
||||
}
|
||||
|
||||
showErrors(lang, errors) {
|
||||
var editor = this.cm[lang];
|
||||
errors.forEach(function(e) {
|
||||
editor.operation(function() {
|
||||
var n = document.createElement('div');
|
||||
n.setAttribute('data-title', e.message);
|
||||
n.classList.add('gutter-error-marker');
|
||||
editor.setGutterMarker(e.lineNumber, 'error-gutter', n);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates the preview from the current code.
|
||||
* @param {boolean} isForced Should refresh everything without any check or not
|
||||
* @param {boolean} isManual Is this a manual preview request from user?
|
||||
*/
|
||||
setPreviewContent(isForced, isManual) {
|
||||
if (!this.props.prefs.autoPreview && !isManual) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.props.prefs.preserveConsoleLogs) {
|
||||
this.clearConsole();
|
||||
}
|
||||
this.cleanupErrors('html');
|
||||
this.cleanupErrors('css');
|
||||
this.cleanupErrors('js');
|
||||
|
||||
var currentCode = {
|
||||
html: this.cmCodes.html,
|
||||
css: this.cmCodes.css,
|
||||
js: this.cmCodes.js
|
||||
};
|
||||
log('🔎 setPreviewContent', isForced);
|
||||
const targetFrame = this.detachedWindow
|
||||
? 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 (
|
||||
!isForced &&
|
||||
currentCode.html === this.codeInPreview.html &&
|
||||
currentCode.js === this.codeInPreview.js
|
||||
) {
|
||||
computeCss(
|
||||
cssMode === CssModes.ACSS ? currentCode.html : currentCode.css,
|
||||
cssMode,
|
||||
this.props.currentItem.cssSettings
|
||||
).then(result => {
|
||||
if (cssMode === CssModes.ACSS) {
|
||||
this.cm.css.setValue(result.code || '');
|
||||
}
|
||||
if (targetFrame.contentDocument.querySelector('#webmakerstyle')) {
|
||||
targetFrame.contentDocument.querySelector(
|
||||
'#webmakerstyle'
|
||||
).textContent =
|
||||
result.code || '';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
var htmlPromise = computeHtml(
|
||||
currentCode.html,
|
||||
this.props.currentItem.htmlMode
|
||||
);
|
||||
var cssPromise = computeCss(
|
||||
cssMode === CssModes.ACSS ? currentCode.html : currentCode.css,
|
||||
cssMode,
|
||||
this.props.currentItem.cssSettings
|
||||
);
|
||||
var jsPromise = computeJs(
|
||||
currentCode.js,
|
||||
this.props.currentItem.jsMode,
|
||||
true,
|
||||
this.props.prefs.infiniteLoopTimeout
|
||||
);
|
||||
Promise.all([htmlPromise, cssPromise, jsPromise]).then(result => {
|
||||
if (cssMode === CssModes.ACSS) {
|
||||
this.cm.css.setValue(result[1].code || '');
|
||||
}
|
||||
|
||||
this.createPreviewFile(
|
||||
result[0].code || '',
|
||||
result[1].code || '',
|
||||
result[2].code || ''
|
||||
);
|
||||
result.forEach(result => {
|
||||
if (result.errors) {
|
||||
this.showErrors(result.errors.lang, result.errors.data);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
this.codeInPreview.html = currentCode.html;
|
||||
this.codeInPreview.css = currentCode.css;
|
||||
this.codeInPreview.js = currentCode.js;
|
||||
}
|
||||
isValidItem(item) {
|
||||
return !!item.title;
|
||||
}
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
return (
|
||||
this.state.isConsoleOpen !== nextState.isConsoleOpen ||
|
||||
this.state.isCssSettingsModalOpen !== nextState.isCssSettingsModalOpen ||
|
||||
this.state.codeSplitSizes != nextState.codeSplitSizes ||
|
||||
this.state.mainSplitSizes != nextState.mainSplitSizes ||
|
||||
this.props.currentLayoutMode !== nextProps.currentLayoutMode
|
||||
);
|
||||
}
|
||||
componentDidUpdate() {
|
||||
// HACK: becuase its a DOM manipulation
|
||||
window.logCountEl.textContent = this.logCount;
|
||||
|
||||
// log('🚀', 'didupdate', this.props.currentItem);
|
||||
// if (this.isValidItem(this.props.currentItem)) {
|
||||
// this.refreshEditor();
|
||||
// }
|
||||
}
|
||||
componentDidMount() {
|
||||
this.props.onRef(this);
|
||||
}
|
||||
refreshEditor() {
|
||||
this.cmCodes.html = this.props.currentItem.html;
|
||||
this.cmCodes.css = this.props.currentItem.css;
|
||||
this.cmCodes.js = this.props.currentItem.js;
|
||||
this.cm.html.setValue(this.cmCodes.html || '');
|
||||
this.cm.css.setValue(this.cmCodes.css || '');
|
||||
this.cm.js.setValue(this.cmCodes.js || '');
|
||||
this.cm.html.refresh();
|
||||
this.cm.css.refresh();
|
||||
this.cm.js.refresh();
|
||||
|
||||
this.clearConsole();
|
||||
|
||||
// Set preview only when all modes are updated so that preview doesn't generate on partially
|
||||
// correct modes and also doesn't happen 3 times.
|
||||
Promise.all([
|
||||
this.updateHtmlMode(this.props.currentItem.htmlMode),
|
||||
this.updateCssMode(this.props.currentItem.cssMode),
|
||||
this.updateJsMode(this.props.currentItem.jsMode)
|
||||
]).then(() => this.setPreviewContent(true));
|
||||
}
|
||||
applyCodemirrorSettings(prefs) {
|
||||
if (!this.cm) {
|
||||
return;
|
||||
}
|
||||
htmlCodeEl.querySelector(
|
||||
'.CodeMirror'
|
||||
).style.fontSize = cssCodeEl.querySelector(
|
||||
'.CodeMirror'
|
||||
).style.fontSize = jsCodeEl.querySelector(
|
||||
'.CodeMirror'
|
||||
).style.fontSize = `${parseInt(prefs.fontSize, 10)}px`;
|
||||
window.consoleEl.querySelector('.CodeMirror').style.fontSize = `${parseInt(
|
||||
prefs.fontSize,
|
||||
10
|
||||
)}px`;
|
||||
|
||||
// Replace correct css file in LINK tags's href
|
||||
window.editorThemeLinkTag.href = `lib/codemirror/theme/${
|
||||
prefs.editorTheme
|
||||
}.css`;
|
||||
window.fontStyleTag.textContent = window.fontStyleTemplate.textContent.replace(
|
||||
/fontname/g,
|
||||
(prefs.editorFont === 'other'
|
||||
? prefs.editorCustomFont
|
||||
: prefs.editorFont) || 'FiraCode'
|
||||
);
|
||||
// window.customEditorFontInput.classList[
|
||||
// prefs.editorFont === 'other' ? 'remove' : 'add'
|
||||
// ]('hide');
|
||||
this.consoleCm.setOption('theme', prefs.editorTheme);
|
||||
|
||||
['html', 'js', 'css'].forEach(type => {
|
||||
this.cm[type].setOption('indentWithTabs', prefs.indentWith !== 'spaces');
|
||||
this.cm[type].setOption(
|
||||
'blastCode',
|
||||
prefs.isCodeBlastOn ? { effect: 2, shake: false } : false
|
||||
);
|
||||
this.cm[type].setOption('indentUnit', +prefs.indentSize);
|
||||
this.cm[type].setOption('tabSize', +prefs.indentSize);
|
||||
this.cm[type].setOption('theme', prefs.editorTheme);
|
||||
|
||||
this.cm[type].setOption('keyMap', prefs.keymap);
|
||||
this.cm[type].setOption('lineWrapping', prefs.lineWrap);
|
||||
this.cm[type].refresh();
|
||||
});
|
||||
}
|
||||
|
||||
// Check all the code wrap if they are minimized or maximized
|
||||
updateCodeWrapCollapseStates() {
|
||||
// This is debounced!
|
||||
clearTimeout(this.updateCodeWrapCollapseStates.timeout);
|
||||
this.updateCodeWrapCollapseStates.timeout = setTimeout(() => {
|
||||
const { currentLayoutMode } = this.props;
|
||||
const prop =
|
||||
currentLayoutMode === 2 || currentLayoutMode === 5 ? 'width' : 'height';
|
||||
[htmlCodeEl, cssCodeEl, jsCodeEl].forEach(function(el) {
|
||||
const bounds = el.getBoundingClientRect();
|
||||
const size = bounds[prop];
|
||||
if (size < 100) {
|
||||
el.classList.add('is-minimized');
|
||||
} else {
|
||||
el.classList.remove('is-minimized');
|
||||
}
|
||||
if (el.style[prop].indexOf(`100% - ${minCodeWrapSize * 2}px`) !== -1) {
|
||||
el.classList.add('is-maximized');
|
||||
} else {
|
||||
el.classList.remove('is-maximized');
|
||||
}
|
||||
});
|
||||
}, 50);
|
||||
}
|
||||
|
||||
toggleCodeWrapCollapse(codeWrapEl) {
|
||||
if (
|
||||
codeWrapEl.classList.contains('is-minimized') ||
|
||||
codeWrapEl.classList.contains('is-maximized')
|
||||
) {
|
||||
codeWrapEl.classList.remove('is-minimized');
|
||||
codeWrapEl.classList.remove('is-maximized');
|
||||
this.codeSplitInstance.setSizes([33.3, 33.3, 33.3]);
|
||||
} else {
|
||||
const id = parseInt(codeWrapEl.dataset.codeWrapId, 10);
|
||||
var arr = [
|
||||
`${minCodeWrapSize}px`,
|
||||
`${minCodeWrapSize}px`,
|
||||
`${minCodeWrapSize}px`
|
||||
];
|
||||
arr[id] = `calc(100% - ${minCodeWrapSize * 2}px)`;
|
||||
|
||||
this.codeSplitInstance.setSizes(arr);
|
||||
codeWrapEl.classList.add('is-maximized');
|
||||
}
|
||||
}
|
||||
|
||||
collapseBtnHandler(e) {
|
||||
var codeWrapParent =
|
||||
e.currentTarget.parentElement.parentElement.parentElement;
|
||||
this.toggleCodeWrapCollapse(codeWrapParent);
|
||||
trackEvent('ui', 'paneCollapseBtnClick', codeWrapParent.dataset.type);
|
||||
}
|
||||
codeWrapHeaderDblClickHandler(e) {
|
||||
if (!e.target.classList.contains('js-code-wrap__header')) {
|
||||
return;
|
||||
}
|
||||
const codeWrapParent = e.target.parentElement;
|
||||
this.toggleCodeWrapCollapse(codeWrapParent);
|
||||
trackEvent('ui', 'paneHeaderDblClick', codeWrapParent.dataset.type);
|
||||
}
|
||||
|
||||
resetSplitting() {
|
||||
this.setState({
|
||||
codeSplitSizes: this.getCodeSplitSizes(),
|
||||
mainSplitSizes: this.getMainSplitSizesToApply()
|
||||
});
|
||||
}
|
||||
|
||||
// Returns the sizes of main code & preview panes.
|
||||
getMainSplitSizesToApply() {
|
||||
var mainSplitSizes;
|
||||
const { currentItem, currentLayoutMode } = this.props;
|
||||
if (currentItem && currentItem.mainSizes) {
|
||||
// For layout mode 3, main panes are reversed using flex-direction.
|
||||
// So we need to apply the saved sizes in reverse order.
|
||||
mainSplitSizes =
|
||||
currentLayoutMode === 3
|
||||
? [currentItem.mainSizes[1], currentItem.mainSizes[0]]
|
||||
: currentItem.mainSizes;
|
||||
} else {
|
||||
mainSplitSizes = currentLayoutMode === 5 ? [75, 25] : [50, 50];
|
||||
}
|
||||
return mainSplitSizes;
|
||||
}
|
||||
|
||||
getCodeSplitSizes() {
|
||||
if (this.props.currentItem && this.props.currentItem.sizes) {
|
||||
return this.props.currentItem.sizes;
|
||||
} else {
|
||||
return [33.33, 33.33, 33.33];
|
||||
}
|
||||
}
|
||||
|
||||
mainSplitDragEndHandler() {
|
||||
if (this.props.prefs.refreshOnResize) {
|
||||
// Running preview updation in next call stack, so that error there
|
||||
// doesn't affect this dragend listener.
|
||||
setTimeout(() => {
|
||||
this.setPreviewContent(true);
|
||||
}, 1);
|
||||
}
|
||||
}
|
||||
codeSplitDragStart() {
|
||||
document.body.classList.add('is-dragging');
|
||||
}
|
||||
codeSplitDragEnd() {
|
||||
this.updateCodeWrapCollapseStates();
|
||||
document.body.classList.remove('is-dragging');
|
||||
}
|
||||
/**
|
||||
* 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;
|
||||
const htmlModeLabel = $('#js-html-mode-label');
|
||||
|
||||
htmlModeLabel.textContent = modes[value].label;
|
||||
// FIXME - use a better selector for the mode selectbox
|
||||
htmlModeLabel.parentElement.querySelector('select').value = value;
|
||||
this.cm.html.setOption('mode', modes[value].cmMode);
|
||||
CodeMirror.autoLoadMode(
|
||||
this.cm.html,
|
||||
modes[value].cmPath || modes[value].cmMode
|
||||
);
|
||||
return this.handleModeRequirements(value);
|
||||
}
|
||||
updateCssMode(value) {
|
||||
this.props.onCodeModeChange('css', value);
|
||||
this.props.currentItem.cssMode = value;
|
||||
const cssModeLabel = $('#js-css-mode-label');
|
||||
cssModeLabel.textContent = modes[value].label;
|
||||
// FIXME - use a better selector for the mode selectbox
|
||||
cssModeLabel.parentElement.querySelector('select').value = value;
|
||||
this.cm.css.setOption('mode', modes[value].cmMode);
|
||||
this.cm.css.setOption('readOnly', modes[value].cmDisable);
|
||||
window.cssSettingsBtn.classList[
|
||||
modes[value].hasSettings ? 'remove' : 'add'
|
||||
]('hide');
|
||||
CodeMirror.autoLoadMode(
|
||||
this.cm.css,
|
||||
modes[value].cmPath || modes[value].cmMode
|
||||
);
|
||||
return this.handleModeRequirements(value);
|
||||
}
|
||||
updateJsMode(value) {
|
||||
this.props.onCodeModeChange('js', value);
|
||||
this.props.currentItem.jsMode = value;
|
||||
const jsModeLabel = $('#js-js-mode-label');
|
||||
|
||||
jsModeLabel.textContent = modes[value].label;
|
||||
// FIXME - use a better selector for the mode selectbox
|
||||
jsModeLabel.parentElement.querySelector('select').value = value;
|
||||
this.cm.js.setOption('mode', modes[value].cmMode);
|
||||
CodeMirror.autoLoadMode(
|
||||
this.cm.js,
|
||||
modes[value].cmPath || modes[value].cmMode
|
||||
);
|
||||
return this.handleModeRequirements(value);
|
||||
}
|
||||
codeModeChangeHandler(e) {
|
||||
var mode = e.target.value;
|
||||
var type = e.target.dataset.type;
|
||||
var currentMode = this.props.currentItem[
|
||||
type === 'html' ? 'htmlMode' : type === 'css' ? 'cssMode' : 'jsMode'
|
||||
];
|
||||
if (currentMode !== mode) {
|
||||
if (type === 'html') {
|
||||
this.updateHtmlMode(mode).then(() => this.setPreviewContent(true));
|
||||
} else if (type === 'js') {
|
||||
this.updateJsMode(mode).then(() => this.setPreviewContent(true));
|
||||
} else if (type === 'css') {
|
||||
this.updateCssMode(mode).then(() => this.setPreviewContent(true));
|
||||
}
|
||||
trackEvent('ui', 'updateCodeMode', mode);
|
||||
}
|
||||
}
|
||||
detachPreview() {
|
||||
if (this.detachedWindow) {
|
||||
this.detachedWindow.focus();
|
||||
return;
|
||||
}
|
||||
const iframeBounds = this.frame.getBoundingClientRect();
|
||||
const iframeWidth = iframeBounds.width;
|
||||
const iframeHeight = iframeBounds.height;
|
||||
document.body.classList.add('is-detached-mode');
|
||||
window.globalConsoleContainerEl.insertBefore(window.consoleEl, null);
|
||||
|
||||
this.detachedWindow = window.open(
|
||||
'./preview.html',
|
||||
'Web Maker',
|
||||
`width=${iframeWidth},height=${iframeHeight},resizable,scrollbars=yes,status=1`
|
||||
);
|
||||
// Trigger initial render in detached window
|
||||
setTimeout(() => {
|
||||
this.setPreviewContent(true);
|
||||
}, 1500);
|
||||
function checkWindow() {
|
||||
if (this.detachedWindow && this.detachedWindow.closed) {
|
||||
clearInterval(intervalID);
|
||||
document.body.classList.remove('is-detached-mode');
|
||||
$('#js-demo-side').insertBefore(window.consoleEl, null);
|
||||
this.detachedWindow = null;
|
||||
// Update main frame preview to get latest changes (which were not
|
||||
// getting reflected while detached window was open)
|
||||
this.setPreviewContent(true);
|
||||
}
|
||||
}
|
||||
var intervalID = window.setInterval(checkWindow.bind(this), 500);
|
||||
}
|
||||
|
||||
onMessageFromConsole() {
|
||||
/* eslint-disable no-param-reassign */
|
||||
[...arguments].forEach(arg => {
|
||||
if (
|
||||
arg &&
|
||||
arg.indexOf &&
|
||||
arg.indexOf('filesystem:chrome-extension') !== -1
|
||||
) {
|
||||
arg = arg.replace(
|
||||
/filesystem:chrome-extension.*\.js:(\d+):*(\d*)/g,
|
||||
'script $1:$2'
|
||||
);
|
||||
}
|
||||
try {
|
||||
this.consoleCm.replaceRange(
|
||||
arg +
|
||||
' ' +
|
||||
((arg + '').match(/\[object \w+]/) ? JSON.stringify(arg) : '') +
|
||||
'\n',
|
||||
{
|
||||
line: Infinity
|
||||
}
|
||||
);
|
||||
} catch (e) {
|
||||
this.consoleCm.replaceRange('🌀\n', {
|
||||
line: Infinity
|
||||
});
|
||||
}
|
||||
this.consoleCm.scrollTo(0, Infinity);
|
||||
this.logCount++;
|
||||
});
|
||||
logCountEl.textContent = this.logCount;
|
||||
|
||||
/* eslint-enable no-param-reassign */
|
||||
}
|
||||
|
||||
previewException(error) {
|
||||
console.error('Possible infinite loop detected.', error.stack);
|
||||
this.onMessageFromConsole('Possible infinite loop detected.', error.stack);
|
||||
}
|
||||
|
||||
toggleConsole() {
|
||||
this.setState({ isConsoleOpen: !this.state.isConsoleOpen });
|
||||
trackEvent('ui', 'consoleToggle');
|
||||
}
|
||||
consoleHeaderDblClickHandler(e) {
|
||||
if (!e.target.classList.contains('js-console__header')) {
|
||||
return;
|
||||
}
|
||||
trackEvent('ui', 'consoleToggleDblClick');
|
||||
this.toggleConsole();
|
||||
}
|
||||
clearConsole() {
|
||||
this.consoleCm.setValue('');
|
||||
this.logCount = 0;
|
||||
window.logCountEl.textContent = this.logCount;
|
||||
}
|
||||
clearConsoleBtnClickHandler() {
|
||||
this.clearConsole();
|
||||
trackEvent('ui', 'consoleClearBtnClick');
|
||||
}
|
||||
|
||||
evalConsoleExpr(e) {
|
||||
// Clear console on CTRL + L
|
||||
if ((e.which === 76 || e.which === 12) && e.ctrlKey) {
|
||||
this.clearConsole();
|
||||
trackEvent('ui', 'consoleClearKeyboardShortcut');
|
||||
} else if (e.which === 13) {
|
||||
this.onMessageFromConsole('> ' + e.target.value);
|
||||
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
this.frame.contentWindow._wmEvaluate(e.target.value);
|
||||
|
||||
/* eslint-enable no-underscore-dangle */
|
||||
|
||||
e.target.value = '';
|
||||
trackEvent('fn', 'evalConsoleExpr');
|
||||
}
|
||||
}
|
||||
cssSettingsBtnClickHandler() {
|
||||
this.setState({ isCssSettingsModalOpen: true });
|
||||
trackEvent('ui', 'cssSettingsBtnClick');
|
||||
}
|
||||
cssSettingsChangeHandler(settings) {
|
||||
this.props.onCodeSettingsChange('css', settings);
|
||||
this.setPreviewContent(true);
|
||||
}
|
||||
getDemoFrame(callback) {
|
||||
callback(this.frame);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SplitPane
|
||||
class="content-wrap flex flex-grow"
|
||||
sizes={this.state.mainSplitSizes}
|
||||
minSize={150}
|
||||
style=""
|
||||
direction={
|
||||
this.props.currentLayoutMode === 2 ? 'vertical' : 'horizontal'
|
||||
}
|
||||
onDragEnd={this.mainSplitDragEndHandler.bind(this)}
|
||||
>
|
||||
<SplitPane
|
||||
class="code-side"
|
||||
id="js-code-side"
|
||||
sizes={this.state.codeSplitSizes}
|
||||
minSize={minCodeWrapSize}
|
||||
direction={
|
||||
this.props.currentLayoutMode === 2 ||
|
||||
this.props.currentLayoutMode === 5
|
||||
? 'horizontal'
|
||||
: 'vertical'
|
||||
}
|
||||
onDragStart={this.codeSplitDragStart.bind(this)}
|
||||
onDragEnd={this.codeSplitDragEnd.bind(this)}
|
||||
onSplit={splitInstance => (this.codeSplitInstance = splitInstance)}
|
||||
>
|
||||
<div
|
||||
data-code-wrap-id="0"
|
||||
id="htmlCodeEl"
|
||||
data-type="html"
|
||||
class="code-wrap"
|
||||
onTransitionEnd={this.updateCodeWrapCollapseStates.bind(this)}
|
||||
>
|
||||
<div
|
||||
class="js-code-wrap__header code-wrap__header"
|
||||
title="Double click to toggle code pane"
|
||||
onDblClick={this.codeWrapHeaderDblClickHandler.bind(this)}
|
||||
>
|
||||
<label class="btn-group" dropdow title="Click to change">
|
||||
<span id="js-html-mode-label" class="code-wrap__header-label">
|
||||
HTML
|
||||
</span>
|
||||
<span class="caret" />
|
||||
<select
|
||||
data-type="html"
|
||||
class="js-mode-select hidden-select"
|
||||
onChange={this.codeModeChangeHandler.bind(this)}
|
||||
>
|
||||
<option value="html">HTML</option>
|
||||
<option value="markdown">Markdown</option>
|
||||
<option value="jade">Pug</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="code-wrap__header-right-options">
|
||||
<a
|
||||
class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn"
|
||||
title="Toggle code pane"
|
||||
onClick={this.collapseBtnHandler.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<UserCodeMirror
|
||||
options={{
|
||||
mode: 'htmlmixed',
|
||||
profile: 'xhtml',
|
||||
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
|
||||
noAutocomplete: true,
|
||||
matchTags: { bothTags: true },
|
||||
emmet: true
|
||||
}}
|
||||
onChange={this.onHtmlCodeChange.bind(this)}
|
||||
onCreation={el => (this.cm.html = el)}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
data-code-wrap-id="1"
|
||||
id="cssCodeEl"
|
||||
data-type="css"
|
||||
class="code-wrap"
|
||||
onTransitionEnd={this.updateCodeWrapCollapseStates.bind(this)}
|
||||
>
|
||||
<div
|
||||
class="js-code-wrap__header code-wrap__header"
|
||||
title="Double click to toggle code pane"
|
||||
onDblClick={this.codeWrapHeaderDblClickHandler.bind(this)}
|
||||
>
|
||||
<label class="btn-group" title="Click to change">
|
||||
<span id="js-css-mode-label" class="code-wrap__header-label">
|
||||
CSS
|
||||
</span>
|
||||
<span class="caret" />
|
||||
<select
|
||||
data-type="css"
|
||||
class="js-mode-select hidden-select"
|
||||
onChange={this.codeModeChangeHandler.bind(this)}
|
||||
>
|
||||
<option value="css">CSS</option>
|
||||
<option value="scss">SCSS</option>
|
||||
<option value="sass">SASS</option>
|
||||
<option value="less">LESS</option>
|
||||
<option value="stylus">Stylus</option>
|
||||
<option value="acss">Atomic CSS</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="code-wrap__header-right-options">
|
||||
<a
|
||||
href="#"
|
||||
id="cssSettingsBtn"
|
||||
title="Atomic CSS configuration"
|
||||
onClick={this.cssSettingsBtnClickHandler.bind(this)}
|
||||
class="code-wrap__header-btn hide"
|
||||
>
|
||||
<svg>
|
||||
<use xlinkHref="#settings-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn"
|
||||
title="Toggle code pane"
|
||||
onClick={this.collapseBtnHandler.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<UserCodeMirror
|
||||
options={{
|
||||
mode: 'css',
|
||||
gutters: [
|
||||
'error-gutter',
|
||||
'CodeMirror-linenumbers',
|
||||
'CodeMirror-foldgutter'
|
||||
],
|
||||
emmet: true
|
||||
}}
|
||||
onChange={this.onCssCodeChange.bind(this)}
|
||||
onCreation={el => (this.cm.css = el)}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
data-code-wrap-id="2"
|
||||
id="jsCodeEl"
|
||||
data-type="js"
|
||||
class="code-wrap"
|
||||
onTransitionEnd={this.updateCodeWrapCollapseStates.bind(this)}
|
||||
>
|
||||
<div
|
||||
class="js-code-wrap__header code-wrap__header"
|
||||
title="Double click to toggle code pane"
|
||||
onDblClick={this.codeWrapHeaderDblClickHandler.bind(this)}
|
||||
>
|
||||
<label class="btn-group" title="Click to change">
|
||||
<span id="js-js-mode-label" class="code-wrap__header-label">
|
||||
JS
|
||||
</span>
|
||||
<span class="caret" />
|
||||
<select
|
||||
data-type="js"
|
||||
class="js-mode-select hidden-select"
|
||||
onChange={this.codeModeChangeHandler.bind(this)}
|
||||
>
|
||||
<option value="js">JS</option>
|
||||
<option value="coffee">CoffeeScript</option>
|
||||
<option value="es6">ES6 (Babel)</option>
|
||||
<option value="typescript">TypeScript</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="code-wrap__header-right-options">
|
||||
<a
|
||||
class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn"
|
||||
title="Toggle code pane"
|
||||
onClick={this.collapseBtnHandler.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<UserCodeMirror
|
||||
options={{
|
||||
mode: 'javascript',
|
||||
gutters: [
|
||||
'error-gutter',
|
||||
'CodeMirror-linenumbers',
|
||||
'CodeMirror-foldgutter'
|
||||
]
|
||||
}}
|
||||
autoComplete={this.props.prefs.autoComplete}
|
||||
onChange={this.onJsCodeChange.bind(this)}
|
||||
onCreation={el => (this.cm.js = el)}
|
||||
/>
|
||||
{/* Inlet(scope.cm.js); */}
|
||||
</div>
|
||||
</SplitPane>
|
||||
<div class="demo-side" id="js-demo-side" style="">
|
||||
<iframe
|
||||
ref={el => (this.frame = el)}
|
||||
src="about://blank"
|
||||
frameborder="0"
|
||||
id="demo-frame"
|
||||
allowfullscreen
|
||||
/>
|
||||
<div
|
||||
id="consoleEl"
|
||||
class={`console ${this.state.isConsoleOpen ? '' : 'is-minimized'}`}
|
||||
>
|
||||
<div id="consoleLogEl" class="console__log">
|
||||
<div
|
||||
class="js-console__header code-wrap__header"
|
||||
title="Double click to toggle console"
|
||||
onDblClick={this.toggleConsole.bind(this)}
|
||||
>
|
||||
<span class="code-wrap__header-label">
|
||||
Console (<span id="logCountEl">0</span>)
|
||||
</span>
|
||||
<div class="code-wrap__header-right-options">
|
||||
<a
|
||||
class="code-wrap__header-btn"
|
||||
title="Clear console (CTRL + L)"
|
||||
onClick={this.clearConsoleBtnClickHandler.bind(this)}
|
||||
>
|
||||
<svg>
|
||||
<use xlinkHref="#cancel-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
class="code-wrap__header-btn code-wrap__collapse-btn"
|
||||
title="Toggle console"
|
||||
onClick={this.toggleConsole.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<CodeMirrorBox
|
||||
options={{
|
||||
mode: 'javascript',
|
||||
lineWrapping: true,
|
||||
theme: 'monokai',
|
||||
foldGutter: true,
|
||||
readOnly: true,
|
||||
gutters: ['CodeMirror-foldgutter']
|
||||
}}
|
||||
onCreation={el => (this.consoleCm = el)}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
id="consolePromptEl"
|
||||
class="console__prompt flex flex-v-center"
|
||||
>
|
||||
<svg width="18" height="18" fill="#346fd2">
|
||||
<use xlinkHref="#chevron-icon" />
|
||||
</svg>
|
||||
<input
|
||||
onKeyUp={this.evalConsoleExpr.bind(this)}
|
||||
class="console-exec-input"
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,43 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,215 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { A } from './common';
|
||||
|
||||
export default class Footer extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isKeyboardShortcutsModalOpen: false
|
||||
};
|
||||
}
|
||||
layoutBtnClickhandler(layoutId) {
|
||||
this.props.layoutBtnClickHandler(layoutId);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="footer" class="footer">
|
||||
<div class="footer__right fr">
|
||||
<a
|
||||
onClick={this.props.saveHtmlBtnClickHandler}
|
||||
id="saveHtmlBtn"
|
||||
class="mode-btn hint--rounded hint--top-left hide-on-mobile"
|
||||
data-hint="Save as HTML file"
|
||||
>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="codepen-logo" viewBox="0 0 120 120">
|
||||
<path
|
||||
class="outer-ring"
|
||||
d="M60.048 0C26.884 0 0 26.9 0 60.048s26.884 60 60 60.047c33.163 0 60.047-26.883 60.047-60.047 S93.211 0 60 0z M60.048 110.233c-27.673 0-50.186-22.514-50.186-50.186S32.375 9.9 60 9.9 c27.672 0 50.2 22.5 50.2 50.186S87.72 110.2 60 110.233z"
|
||||
/>
|
||||
<path
|
||||
class="inner-box"
|
||||
d="M97.147 48.319c-0.007-0.047-0.019-0.092-0.026-0.139c-0.016-0.09-0.032-0.18-0.056-0.268 c-0.014-0.053-0.033-0.104-0.05-0.154c-0.025-0.078-0.051-0.156-0.082-0.232c-0.021-0.053-0.047-0.105-0.071-0.156 c-0.033-0.072-0.068-0.143-0.108-0.211c-0.029-0.051-0.061-0.1-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.193 c-0.035-0.047-0.072-0.094-0.109-0.139c-0.051-0.059-0.104-0.117-0.159-0.172c-0.042-0.043-0.083-0.086-0.127-0.125 c-0.059-0.053-0.119-0.104-0.181-0.152c-0.048-0.037-0.095-0.074-0.145-0.109c-0.019-0.012-0.035-0.027-0.053-0.039L61.817 23.5 c-1.072-0.715-2.468-0.715-3.54 0L24.34 46.081c-0.018 0.012-0.034 0.027-0.053 0.039c-0.05 0.035-0.097 0.072-0.144 0.1 c-0.062 0.049-0.123 0.1-0.181 0.152c-0.045 0.039-0.086 0.082-0.128 0.125c-0.056 0.055-0.108 0.113-0.158 0.2 c-0.038 0.045-0.075 0.092-0.11 0.139c-0.047 0.062-0.092 0.127-0.134 0.193c-0.032 0.049-0.062 0.098-0.092 0.1 c-0.039 0.068-0.074 0.139-0.108 0.211c-0.024 0.051-0.05 0.104-0.071 0.156c-0.031 0.076-0.057 0.154-0.082 0.2 c-0.017 0.051-0.035 0.102-0.05 0.154c-0.023 0.088-0.039 0.178-0.056 0.268c-0.008 0.047-0.02 0.092-0.025 0.1 c-0.019 0.137-0.029 0.275-0.029 0.416V71.36c0 0.1 0 0.3 0 0.418c0.006 0 0 0.1 0 0.1 c0.017 0.1 0 0.2 0.1 0.268c0.015 0.1 0 0.1 0.1 0.154c0.025 0.1 0.1 0.2 0.1 0.2 c0.021 0.1 0 0.1 0.1 0.154c0.034 0.1 0.1 0.1 0.1 0.213c0.029 0 0.1 0.1 0.1 0.1 c0.042 0.1 0.1 0.1 0.1 0.193c0.035 0 0.1 0.1 0.1 0.139c0.05 0.1 0.1 0.1 0.2 0.2 c0.042 0 0.1 0.1 0.1 0.125c0.058 0.1 0.1 0.1 0.2 0.152c0.047 0 0.1 0.1 0.1 0.1 c0.019 0 0 0 0.1 0.039L58.277 96.64c0.536 0.4 1.2 0.5 1.8 0.537c0.616 0 1.233-0.18 1.77-0.537 l33.938-22.625c0.018-0.012 0.034-0.027 0.053-0.039c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.122-0.1 0.181-0.152 c0.044-0.039 0.085-0.082 0.127-0.125c0.056-0.055 0.108-0.113 0.159-0.172c0.037-0.045 0.074-0.09 0.109-0.139 c0.048-0.062 0.092-0.127 0.135-0.193c0.03-0.049 0.062-0.098 0.091-0.146c0.04-0.07 0.075-0.141 0.108-0.213 c0.024-0.051 0.05-0.102 0.071-0.154c0.031-0.078 0.057-0.156 0.082-0.234c0.017-0.051 0.036-0.102 0.05-0.154 c0.023-0.088 0.04-0.178 0.056-0.268c0.008-0.045 0.02-0.092 0.026-0.137c0.018-0.139 0.028-0.277 0.028-0.418V48.735 C97.176 48.6 97.2 48.5 97.1 48.319z M63.238 32.073l25.001 16.666L77.072 56.21l-13.834-9.254V32.073z M56.856 32.1 v14.883L43.023 56.21l-11.168-7.471L56.856 32.073z M29.301 54.708l7.983 5.34l-7.983 5.34V54.708z M56.856 88.022L31.855 71.4 l11.168-7.469l13.833 9.252V88.022z M60.048 67.597l-11.286-7.549l11.286-7.549l11.285 7.549L60.048 67.597z M63.238 88.022V73.14 l13.834-9.252l11.167 7.469L63.238 88.022z M90.794 65.388l-7.982-5.34l7.982-5.34V65.388z"
|
||||
/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<a
|
||||
href=""
|
||||
onClick={this.props.codepenBtnClickHandler}
|
||||
id="codepenBtn"
|
||||
class="mode-btn hint--rounded hint--top-left hide-on-mobile"
|
||||
aria-label="Edit on CodePen"
|
||||
>
|
||||
<svg>
|
||||
<use xlinkHref="#codepen-logo" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href=""
|
||||
id="screenshotBtn"
|
||||
class="mode-btn hint--rounded hint--top-left show-when-extension"
|
||||
onClick={this.props.screenshotBtnClickHandler}
|
||||
aria-label="Take screenshot of preview"
|
||||
>
|
||||
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
|
||||
<path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<div class="footer__separator hide-on-mobile" />
|
||||
|
||||
<a
|
||||
onClick={this.layoutBtnClickhandler.bind(this, 1)}
|
||||
id="layoutBtn1"
|
||||
class="mode-btn hide-on-mobile"
|
||||
>
|
||||
<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
|
||||
<use xlinkHref="#mode-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
onClick={this.layoutBtnClickhandler.bind(this, 2)}
|
||||
id="layoutBtn2"
|
||||
class="mode-btn hide-on-mobile"
|
||||
>
|
||||
<svg viewBox="0 0 100 100">
|
||||
<use xlinkHref="#mode-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
onClick={this.layoutBtnClickhandler.bind(this, 3)}
|
||||
id="layoutBtn3"
|
||||
class="mode-btn hide-on-mobile"
|
||||
>
|
||||
<svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
|
||||
<use xlinkHref="#mode-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
onClick={this.layoutBtnClickhandler.bind(this, 5)}
|
||||
id="layoutBtn5"
|
||||
class="mode-btn hide-on-mobile"
|
||||
>
|
||||
<svg viewBox="0 0 100 100">
|
||||
<use xlinkHref="#vertical-mode-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
onClick={this.layoutBtnClickhandler.bind(this, 4)}
|
||||
id="layoutBtn4"
|
||||
class="mode-btn hint--top-left hint--rounded hide-on-mobile"
|
||||
aria-label="Full Screen"
|
||||
>
|
||||
<svg viewBox="0 0 100 100">
|
||||
<rect x="0" y="0" width="100" height="100" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
class="mode-btn hint--top-left hint--rounded hide-on-mobile"
|
||||
aria-label="Detach Preview"
|
||||
onClick={this.props.detachedPreviewBtnHandler}
|
||||
>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<div class="footer__separator" />
|
||||
|
||||
<a
|
||||
onClick={this.props.notificationsBtnClickHandler}
|
||||
id="notificationsBtn"
|
||||
class={`notifications-btn mode-btn hint--top-left hint--rounded ${
|
||||
this.props.hasUnseenChangelog ? 'has-new' : ''
|
||||
}`}
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20H14M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2Z" />
|
||||
</svg>
|
||||
<span class="notifications-btn__dot" />
|
||||
</a>
|
||||
<A
|
||||
onClick={this.props.settingsBtnClickHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="settingsBtnClick"
|
||||
class="mode-btn hint--top-left hint--rounded"
|
||||
aria-label="Settings"
|
||||
>
|
||||
<svg>
|
||||
<use xlinkHref="#settings-icon" />
|
||||
</svg>
|
||||
</A>
|
||||
</div>
|
||||
<a href="https://webmakerapp.com/" target="_blank">
|
||||
<div class="logo" />
|
||||
</a>
|
||||
©
|
||||
<span class="web-maker-with-tag">Web Maker</span>
|
||||
<A
|
||||
onClick={this.props.helpBtnClickHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="helpButtonClick"
|
||||
class="footer__link hint--rounded hint--top-right"
|
||||
aria-label="Help"
|
||||
>
|
||||
<svg
|
||||
style="width:20px; height:20px; vertical-align:text-bottom"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
|
||||
</svg>
|
||||
</A>
|
||||
<A
|
||||
onClick={this.props.keyboardShortcutsBtnClickHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="keyboardShortcutButtonClick"
|
||||
class="footer__link hint--rounded hint--top-right hide-on-mobile"
|
||||
aria-label="Keyboard shortcuts"
|
||||
>
|
||||
<svg
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
verticalAlign: 'text-bottom'
|
||||
}}
|
||||
>
|
||||
<use xlinkHref="#keyboard-icon" />
|
||||
</svg>
|
||||
</A>
|
||||
<a
|
||||
class="footer__link hint--rounded hint--top-right"
|
||||
aria-label="Tweet about 'Web Maker'"
|
||||
href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,frontend,playground,offline"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
verticalAlign: 'text-bottom'
|
||||
}}
|
||||
>
|
||||
<use xlinkHref="#twitter-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<A
|
||||
onClick={this.props.supportDeveloperBtnClickHandler}
|
||||
data-event-action="supportDeveloperFooterBtnClick"
|
||||
class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile"
|
||||
aria-label="Support the developer by pledging some amount"
|
||||
target="_blank"
|
||||
>
|
||||
Support the developer
|
||||
</A>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,158 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import Modal from './Modal.jsx';
|
||||
|
||||
export default class Header extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Modal show={this.props.show} closeHandler={this.props.closeHandler}>
|
||||
<h1>
|
||||
<div class="web-maker-with-tag">Web Maker</div>
|
||||
<small style="font-size:14px;"> v3.2.0</small>
|
||||
</h1>
|
||||
|
||||
<div>
|
||||
<p>
|
||||
Made with
|
||||
<span style="margin-right: 8px;">💖</span> &
|
||||
<span style="margin-right: 8px;">🙌</span> by
|
||||
<a href="https://twitter.com/chinchang457" target="_blank">
|
||||
Kushagra Gour
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="/docs" target="_blank">
|
||||
Read the documentation
|
||||
</a>.
|
||||
</p>
|
||||
<p>
|
||||
Tweet out your feature requests, comments & suggestions to
|
||||
<a target="_blank" href="https://twitter.com/webmakerApp">
|
||||
@webmakerApp
|
||||
</a>.
|
||||
</p>
|
||||
<p>
|
||||
Like this extension? Please
|
||||
<a
|
||||
href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
|
||||
target="_blank"
|
||||
>
|
||||
rate it here
|
||||
</a>.
|
||||
</p>
|
||||
<p>
|
||||
<button
|
||||
aria-label="Support the developer"
|
||||
d-click="openSupportDeveloperModal"
|
||||
data-event-action="supportDeveloperHelpBtnClick"
|
||||
class="btn btn-icon"
|
||||
>
|
||||
<svg>
|
||||
<use xlinkHref="#gift-icon" />
|
||||
</svg>Support the developer
|
||||
</button>
|
||||
<a
|
||||
aria-label="Rate Web Maker"
|
||||
href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
|
||||
target="_blank"
|
||||
class="btn btn-icon"
|
||||
>
|
||||
<svg>
|
||||
<use xlinkHref="#heart-icon" />
|
||||
</svg>Share Web Maker
|
||||
</a>
|
||||
<a
|
||||
aria-label="Chat"
|
||||
href="https://web-maker.slack.com"
|
||||
target="_blank"
|
||||
class="btn btn-icon"
|
||||
>
|
||||
<svg>
|
||||
<use xlinkHref="#chat-icon" />
|
||||
</svg>Chat
|
||||
</a>
|
||||
<a
|
||||
aria-label="Report a Bug"
|
||||
href="https://github.com/chinchang/web-maker/issues"
|
||||
target="_blank"
|
||||
class="btn btn-icon"
|
||||
>
|
||||
<svg>
|
||||
<use xlinkHref="#bug-icon" />
|
||||
</svg>Report a bug
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<h3>Awesome libraries used</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a target="_blank" href="https://kushagragour.in/lab/hint/">
|
||||
Hint.css
|
||||
</a>{' '}
|
||||
&
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/chinchang/screenlog.js"
|
||||
>
|
||||
Screenlog.js
|
||||
</a>{' '}
|
||||
- By me :)
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://nathancahill.github.io/Split.js/"
|
||||
>
|
||||
Split.js
|
||||
</a>{' '}
|
||||
- Nathan Cahill
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" href="https://codemirror.net/">
|
||||
Codemirror
|
||||
</a>{' '}
|
||||
- Marijn Haverbeke
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" href="https://emmet.io/">
|
||||
Emmet
|
||||
</a>{' '}
|
||||
- Sergey Chikuyonok
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" href="http://esprima.org/">
|
||||
Esprima
|
||||
</a>{' '}
|
||||
- Ariya Hidayat
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" href="https://github.com/enjalot/Inlet">
|
||||
Inlet
|
||||
</a>{' '}
|
||||
- Ian Johnson
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" href="https://webmakerapp.com/">
|
||||
Web Maker!
|
||||
</a>{' '}
|
||||
- whhat!
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<h3>License</h3>
|
||||
"Web Maker" is
|
||||
<a target="_blank" href="https://github.com/chinchang/web-maker">
|
||||
open-source
|
||||
</a>{' '}
|
||||
under the
|
||||
<a href="https://opensource.org/licenses/MIT" target="_blank">
|
||||
MIT License
|
||||
</a>.
|
||||
</p>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,92 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import Modal from './Modal';
|
||||
|
||||
export default class KeyboardShortcutsModal extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Modal show={this.props.show} closeHandler={this.props.closeHandler}>
|
||||
<h1>Keyboard Shortcuts</h1>
|
||||
|
||||
<div class="flex">
|
||||
<div>
|
||||
<h2>Global</h2>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">Ctrl/⌘ + Shift + ?</span>
|
||||
<span class="kbd-shortcut__details">See keyboard shortcuts</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">Ctrl/⌘ + Shift + 5</span>
|
||||
<span class="kbd-shortcut__details">Refresh preview</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">Ctrl/⌘ + S</span>
|
||||
<span class="kbd-shortcut__details">Save current creations</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">Ctrl/⌘ + O</span>
|
||||
<span class="kbd-shortcut__details">
|
||||
Open list of saved creations
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">Ctrl + L</span>
|
||||
<span class="kbd-shortcut__details">
|
||||
Clear console (works when console input is focused)
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">Esc</span>
|
||||
<span class="kbd-shortcut__details">
|
||||
Close saved creations panel & modals
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<h2>Editor</h2>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">Ctrl/⌘ + F</span>
|
||||
<span class="kbd-shortcut__details">Find</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">Ctrl/⌘ + G</span>
|
||||
<span class="kbd-shortcut__details">Select next match</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">Ctrl/⌘ + Shift + G</span>
|
||||
<span class="kbd-shortcut__details">Select previous match</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">Ctrl/⌘ + Opt/Alt + F</span>
|
||||
<span class="kbd-shortcut__details">Find & replace</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">Shift + Tab</span>
|
||||
<span class="kbd-shortcut__details">Realign code</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">Ctrl/⌘ + ]</span>
|
||||
<span class="kbd-shortcut__details">Indent code right</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">Ctrl/⌘ + [</span>
|
||||
<span class="kbd-shortcut__details">Indent code left</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">Tab</span>
|
||||
<span class="kbd-shortcut__details">
|
||||
Emmet code completion{' '}
|
||||
<a href="https://emmet.io/" target="_blank">
|
||||
Read more
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="kbd-shortcut__keys">Ctrl/⌘ + /</span>
|
||||
<span class="kbd-shortcut__details">Single line comment</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,164 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { trackEvent } from '../analytics';
|
||||
|
||||
export class LibraryAutoSuggest extends Component {
|
||||
componentDidMount() {
|
||||
this.t = this.wrap.querySelector('input,textarea');
|
||||
this.filter = this.props.filter;
|
||||
this.selectedCallback = this.props.onSelect;
|
||||
|
||||
// after list is insrted into the DOM, we put it in the body
|
||||
// fixed at same position
|
||||
setTimeout(() => {
|
||||
requestIdleCallback(() => {
|
||||
document.body.appendChild(this.list);
|
||||
this.list.style.position = 'fixed';
|
||||
});
|
||||
}, 100);
|
||||
|
||||
this.t.addEventListener('input', e => this.onInput(e));
|
||||
this.t.addEventListener('keydown', e => this.onKeyDown(e));
|
||||
this.t.addEventListener('blur', e => this.closeSuggestions(e));
|
||||
this.list.addEventListener('mousedown', e => this.onListMouseDown(e));
|
||||
}
|
||||
componentWillUnmount() {
|
||||
this.t.removeEventListener('input', e => this.onInput(e));
|
||||
this.t.removeEventListener('keydown', e => this.onKeyDown(e));
|
||||
this.t.removeEventListener('blur', e => this.closeSuggestions(e));
|
||||
this.list.removeEventListener('mousedown', e => this.onListMouseDown(e));
|
||||
}
|
||||
|
||||
get currentLineNumber() {
|
||||
return this.t.value.substr(0, this.t.selectionStart).split('\n').length;
|
||||
}
|
||||
get currentLine() {
|
||||
var line = this.currentLineNumber;
|
||||
return this.t.value.split('\n')[line - 1];
|
||||
}
|
||||
closeSuggestions() {
|
||||
this.list.classList.remove('is-open');
|
||||
this.isShowingSuggestions = false;
|
||||
}
|
||||
getList(input) {
|
||||
var url = 'https://api.cdnjs.com/libraries?search=';
|
||||
return fetch(url + input).then(response => {
|
||||
return response.json().then(json => json.results);
|
||||
});
|
||||
}
|
||||
replaceCurrentLine(val) {
|
||||
var lines = this.t.value.split('\n');
|
||||
lines.splice(this.currentLineNumber - 1, 1, val);
|
||||
this.t.value = lines.join('\n');
|
||||
}
|
||||
onInput() {
|
||||
var currentLine = this.currentLine;
|
||||
if (currentLine) {
|
||||
if (currentLine.indexOf('/') !== -1 || currentLine.match(/https*:\/\//)) {
|
||||
return;
|
||||
}
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.loader.style.display = 'block';
|
||||
this.getList(currentLine).then(arr => {
|
||||
this.loader.style.display = 'none';
|
||||
if (!arr.length) {
|
||||
this.closeSuggestions();
|
||||
return;
|
||||
}
|
||||
this.list.innerHTML = '';
|
||||
if (this.filter) {
|
||||
/* eslint-disable no-param-reassign */
|
||||
arr = arr.filter(this.filter);
|
||||
}
|
||||
for (var i = 0; i < Math.min(arr.length, 10); i++) {
|
||||
this.list.innerHTML += `<li data-url="${arr[i].latest}"><a>${
|
||||
arr[i].name
|
||||
}</a></li>`;
|
||||
}
|
||||
this.isShowingSuggestions = true;
|
||||
if (!this.textareaBounds) {
|
||||
this.textareaBounds = this.t.getBoundingClientRect();
|
||||
this.list.style.top = this.textareaBounds.bottom + 'px';
|
||||
this.list.style.left = this.textareaBounds.left + 'px';
|
||||
this.list.style.width = this.textareaBounds.width + 'px';
|
||||
}
|
||||
this.list.classList.add('is-open');
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
onKeyDown(event) {
|
||||
var selectedItemElement;
|
||||
if (!this.isShowingSuggestions) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (event.keyCode === 27) {
|
||||
this.closeSuggestions();
|
||||
event.stopPropagation();
|
||||
}
|
||||
if (event.keyCode === 40 && this.isShowingSuggestions) {
|
||||
selectedItemElement = this.list.querySelector('.selected');
|
||||
if (selectedItemElement) {
|
||||
selectedItemElement.classList.remove('selected');
|
||||
selectedItemElement.nextElementSibling.classList.add('selected');
|
||||
} else {
|
||||
this.list.querySelector('li:first-child').classList.add('selected');
|
||||
}
|
||||
this.list.querySelector('.selected').scrollIntoView(false);
|
||||
event.preventDefault();
|
||||
} else if (event.keyCode === 38 && this.isShowingSuggestions) {
|
||||
selectedItemElement = this.list.querySelector('.selected');
|
||||
if (selectedItemElement) {
|
||||
selectedItemElement.classList.remove('selected');
|
||||
selectedItemElement.previousElementSibling.classList.add('selected');
|
||||
} else {
|
||||
this.list.querySelector('li:first-child').classList.add('selected');
|
||||
}
|
||||
this.list.querySelector('.selected').scrollIntoView(false);
|
||||
event.preventDefault();
|
||||
} else if (event.keyCode === 13 && this.isShowingSuggestions) {
|
||||
selectedItemElement = this.list.querySelector('.selected');
|
||||
this.selectSuggestion(selectedItemElement.dataset.url);
|
||||
this.closeSuggestions();
|
||||
}
|
||||
}
|
||||
onListMouseDown(event) {
|
||||
var target = event.target;
|
||||
if (target.parentElement.dataset.url) {
|
||||
this.selectSuggestion(target.parentElement.dataset.url);
|
||||
}
|
||||
}
|
||||
|
||||
selectSuggestion(value) {
|
||||
// Return back the focus which is getting lost for some reason
|
||||
|
||||
this.t.focus();
|
||||
trackEvent('ui', 'autoSuggestionLibSelected', value);
|
||||
if (this.selectedCallback) {
|
||||
this.selectedCallback.call(null, value);
|
||||
} else {
|
||||
this.replaceCurrentLine(value);
|
||||
}
|
||||
this.closeSuggestions();
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
class={`btn-group ${this.props.fullWidth ? 'flex-grow' : ''}`}
|
||||
ref={el => (this.wrap = el)}
|
||||
>
|
||||
{this.props.children}
|
||||
<ul
|
||||
ref={el => (this.list = el)}
|
||||
class="dropdown__menu autocomplete-dropdown"
|
||||
/>
|
||||
<div
|
||||
ref={el => (this.loader = el)}
|
||||
class="loader autocomplete__loader"
|
||||
style="display:none"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,74 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { jsLibs, cssLibs } from '../libraryList';
|
||||
import { trackEvent } from '../analytics';
|
||||
import { auth } from '../auth';
|
||||
|
||||
export default class Login extends Component {
|
||||
login(e) {
|
||||
const provider = e.target.dataset.authProvider;
|
||||
trackEvent('ui', 'loginProviderClick', provider);
|
||||
auth.login(provider);
|
||||
}
|
||||
componentDidMount() {
|
||||
window.db.local.get(
|
||||
{
|
||||
lastAuthProvider: ''
|
||||
},
|
||||
result => {
|
||||
if (result.lastAuthProvider) {
|
||||
document.body.classList.add(`last-login-${result.lastAuthProvider}`);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h2>Login / Signup</h2>
|
||||
|
||||
<div>
|
||||
<p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={this.login.bind(this)}
|
||||
class="social-login-btn social-login-btn--github btn btn-icon btn--big full-width hint--right hint--always"
|
||||
data-auth-provider="github"
|
||||
data-hint="You logged in with Github last time"
|
||||
>
|
||||
<svg>
|
||||
<use xlinkHref="#github-icon" />
|
||||
</svg>Login with Github
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={this.login.bind(this)}
|
||||
class="social-login-btn social-login-btn--google btn btn-icon btn--big full-width hint--right hint--always"
|
||||
data-auth-provider="google"
|
||||
data-hint="You logged in with Google last time"
|
||||
>
|
||||
<svg>
|
||||
<use xlinkHref="#google-icon" />
|
||||
</svg>Login with Google
|
||||
</button>
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={this.login.bind(this)}
|
||||
class="social-login-btn social-login-btn--facebook btn btn-icon btn--big full-width hint--right hint--always"
|
||||
data-auth-provider="facebook"
|
||||
data-hint="You logged in with Facebook last time"
|
||||
>
|
||||
<svg>
|
||||
<use xlinkHref="#fb-icon" />
|
||||
</svg>Login with Facebook
|
||||
</button>
|
||||
</p>
|
||||
<p>Join a community of 50,000+ Developers</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,131 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { A } from './common';
|
||||
|
||||
const DEFAULT_PROFILE_IMG =
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E";
|
||||
|
||||
export default class Header extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div class="main-header">
|
||||
<input
|
||||
type="text"
|
||||
id="titleInput"
|
||||
title="Click to edit"
|
||||
class="item-title-input"
|
||||
value={this.props.title}
|
||||
onBlur={this.props.titleInputBlurHandler}
|
||||
/>
|
||||
<div class="main-header__btn-wrap flex flex-v-center">
|
||||
<a
|
||||
id="runBtn"
|
||||
class="hide flex flex-v-center hint--rounded hint--bottom-left"
|
||||
aria-label="Run preview (Ctrl/⌘ + Shift + 5)"
|
||||
onClick={this.props.runBtnClickHandler}
|
||||
>
|
||||
<svg style="width: 14px; height: 14px;">
|
||||
<use xlinkHref="#play-icon" />
|
||||
</svg>Run
|
||||
</a>
|
||||
|
||||
<A
|
||||
onClick={this.props.addLibraryBtnHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="addLibraryButtonClick"
|
||||
class="flex-v-center hint--rounded hint--bottom-left"
|
||||
aria-label="Add a JS/CSS library"
|
||||
>
|
||||
Add library
|
||||
<span
|
||||
id="js-external-lib-count"
|
||||
style={`display:${
|
||||
this.props.externalLibCount ? 'inline' : 'none'
|
||||
}`}
|
||||
class="count-label"
|
||||
>
|
||||
{this.props.externalLibCount}
|
||||
</span>
|
||||
</A>
|
||||
|
||||
<a
|
||||
class="flex flex-v-center hint--rounded hint--bottom-left"
|
||||
aria-label="Start a new creation"
|
||||
onClick={this.props.newBtnHandler}
|
||||
>
|
||||
<svg
|
||||
style="vertical-align:middle;width:14px;height:14px"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
|
||||
</svg>New
|
||||
</a>
|
||||
<a
|
||||
id="saveBtn"
|
||||
class={`flex flex-v-center hint--rounded hint--bottom-left ${
|
||||
this.props.isSaving ? 'is-loading' : ''
|
||||
} ${this.props.unsavedEditCount ? 'is-marked' : 0}`}
|
||||
aria-label="Save current creation (Ctrl/⌘ + S)"
|
||||
onClick={this.props.saveBtnHandler}
|
||||
>
|
||||
<svg
|
||||
style="vertical-align:middle;width:14px;height:14px"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
|
||||
</svg>
|
||||
<svg class="btn-loader" width="15" height="15" stroke="#fff">
|
||||
<use xlinkHref="#loader-icon" />
|
||||
</svg>
|
||||
Save
|
||||
</a>
|
||||
<a
|
||||
id="openItemsBtn"
|
||||
class={`flex flex-v-center hint--rounded hint--bottom-left ${
|
||||
this.props.isFetchingItems ? 'is-loading' : ''
|
||||
}`}
|
||||
aria-label="Open a saved creation (Ctrl/⌘ + O)"
|
||||
onClick={this.props.openBtnHandler}
|
||||
>
|
||||
<svg
|
||||
style="width:14px;height:14px;vertical-align:middle;"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" />
|
||||
</svg>
|
||||
<svg class="btn-loader" width="15" height="15" stroke="#fff">
|
||||
<use xlinkHref="#loader-icon" />
|
||||
</svg>
|
||||
Open
|
||||
</a>
|
||||
<A
|
||||
onClick={this.props.loginBtnHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="loginButtonClick"
|
||||
class="hide-on-login flex flex-v-center hint--rounded hint--bottom-left"
|
||||
aria-label="Login/Signup"
|
||||
>
|
||||
Login/Signup
|
||||
</A>
|
||||
<A
|
||||
onClick={this.props.profileBtnHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="headerAvatarClick"
|
||||
aria-label="See profile or Logout"
|
||||
class="hide-on-logout hint--rounded hint--bottom-left"
|
||||
>
|
||||
<img
|
||||
id="headerAvatarImg"
|
||||
width="20"
|
||||
src={
|
||||
this.props.user
|
||||
? this.props.user.photoURL || DEFAULT_PROFILE_IMG
|
||||
: ''
|
||||
}
|
||||
class="main-header__avatar-img"
|
||||
/>
|
||||
</A>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,53 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
|
||||
export default class Modal extends Component {
|
||||
componentDidMount() {
|
||||
window.addEventListener('keydown', this.onKeyDownHandler.bind(this));
|
||||
}
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('keydown', this.onKeyDownHandler.bind(this));
|
||||
}
|
||||
onKeyDownHandler(e) {
|
||||
if (e.keyCode === 27) {
|
||||
this.props.closeHandler();
|
||||
}
|
||||
}
|
||||
onOverlayClick(e) {
|
||||
if (e.target === this.overlayEl) {
|
||||
this.props.closeHandler();
|
||||
}
|
||||
}
|
||||
componentDidUpdate(prevProps) {
|
||||
document.body.classList[this.props.show ? 'add' : 'remove'](
|
||||
'overlay-visible'
|
||||
);
|
||||
|
||||
if (this.props.show && !prevProps.show) {
|
||||
this.overlayEl.querySelector('.js-modal__close-btn').focus();
|
||||
}
|
||||
}
|
||||
render() {
|
||||
if (!this.props.show) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
class={`${this.props.extraClasses || ''} modal is-modal-visible`}
|
||||
ref={el => (this.overlayEl = el)}
|
||||
onClick={this.onOverlayClick.bind(this)}
|
||||
>
|
||||
<div class="modal__content">
|
||||
<button
|
||||
type="button"
|
||||
onClick={this.props.closeHandler}
|
||||
aria-label="Close modal"
|
||||
title="Close"
|
||||
class="js-modal__close-btn modal__close-btn"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,7 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
|
||||
export default class Header extends Component {
|
||||
render() {
|
||||
return <header class={style.header} />;
|
||||
}
|
||||
}
|
@@ -1,783 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
|
||||
export default class Notifications extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Whats new?</h1>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">3.1.1</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Bugfix</strong>: Fix the "Run" button not refreshing the
|
||||
preview after release 3.0.4.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">3.1.0</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Mobile Support (app only).</strong>: Make the Web Maker
|
||||
app usable on mobile. This is only for web app as Chrome
|
||||
extensions don't run on mobile.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<span class="notification__version">3.0.4</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Bugfix</strong>: Guarantee code doesn't execute when "auto
|
||||
preview" is off.
|
||||
</li>
|
||||
<li>
|
||||
Add link to our new
|
||||
<a href="https://web-maker.slack.com" target="_blank">
|
||||
Slack channel
|
||||
</a>{' '}
|
||||
🤗.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">3.0.3</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Bugfix (extension)</strong>: "Save as HTML" file saves
|
||||
with correct extension.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">3.0.1</span>
|
||||
<ul>
|
||||
<li>
|
||||
After months of work, here is Web Maker 3.0.
|
||||
<a
|
||||
href="https://medium.com/web-maker/web-maker-3-0-is-here-f158a40eeaee"
|
||||
target="_blank"
|
||||
>
|
||||
Read the blog post about it
|
||||
</a>.
|
||||
</li>
|
||||
<li>
|
||||
Web Maker is no more just a Chrome extension, it is also available
|
||||
as web app that runs offline just like the extension! Checkout it
|
||||
out ->
|
||||
<a href="https://webmakerapp.com/app/" target="_blank">
|
||||
https://webmakerapp.com/app/
|
||||
</a>.
|
||||
</li>
|
||||
<li>
|
||||
Now use Web Maker web app on any modern browser (tested with
|
||||
Chrome and Firefox).
|
||||
</li>
|
||||
<li>
|
||||
<strong>User Accounts</strong> - The much requested user accounts
|
||||
are here. Now maintain your account and store all your creations
|
||||
in the cloud and access them anywhere anytime.
|
||||
</li>
|
||||
<li>
|
||||
<strong>New layout mode</strong> - One more layout mode, that lets
|
||||
you align all the panes vertically.
|
||||
</li>
|
||||
<li>
|
||||
<strong>No more restriction on scripts (Web app only)</strong> -
|
||||
If you are using the web app, there is no more a restriction to
|
||||
load scripts from only specific domains. Load any script!
|
||||
</li>
|
||||
<li>
|
||||
<strong>Inline scripts (Web app only)</strong> - The restriction
|
||||
of writing JavaScript only in JS pane is also removed.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.7</span>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://tailwindcss.com/" target="_blank">
|
||||
Tailwind CSS
|
||||
</a>{' '}
|
||||
added to popular CSS libraries list. Thanks
|
||||
<a href="https://github.com/diomed" target="_blank">
|
||||
diomed
|
||||
</a>.
|
||||
</li>
|
||||
<li>
|
||||
Popular libraries list updated. Thanks
|
||||
<a href="https://github.com/diomed" target="_blank">
|
||||
diomed
|
||||
</a>.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Dev</strong>: Bug fixes and code refactoring to make
|
||||
things simple. Thanks
|
||||
<a href="https://github.com/iamandrewluca" target="_blank">
|
||||
iamandrewluca
|
||||
</a>.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.6</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Bugfix</strong>: Fix close buttons not working in
|
||||
notifications and keyboard shortcuts modal.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong>: Fix keyboard shortcut to see keyboard
|
||||
shortcuts :) Thanks
|
||||
<a href="https://github.com/ClassicOldSong" target="_blank">
|
||||
ClassicOldSong
|
||||
</a>.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.5</span>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://medium.com/web-maker/release-2-9-5-add-library-search-pane-collapsing-ux-improvements-more-1085216c1301"
|
||||
target="_blank"
|
||||
>
|
||||
Read blog post about this release.
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Keyboard shortcuts panel</strong>: Add a list of all
|
||||
keyboard shotcuts. Access with
|
||||
<code> Ctrl/⌘ + Shift + ?</code> or click keyboard button in
|
||||
footer.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Add external library</strong>: Better UX for searching
|
||||
third party libraries.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Improvement</strong>: Code panes now go fullscreen when
|
||||
double-clicked on their headers - which is much more intuitive
|
||||
behavior based on feedback from lot of developers.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Improvement</strong>: Add
|
||||
<code>allowfullscreen</code> attribute on iframes. Thanks
|
||||
<a href="https://github.com/ClassicOldSong" target="_blank">
|
||||
ClassicOldSong
|
||||
</a>.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - Stop screenlog.js from showing up in the
|
||||
exported HTML.
|
||||
</li>
|
||||
<li>
|
||||
Popular external libraries list updated. Thanks
|
||||
<a href="https://github.com/jlapitan" target="_blank">
|
||||
jlapitan
|
||||
</a>.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.4</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Improvement</strong>: Atomic CSS (Atomizer) has been
|
||||
updated to latest version. Now you can do things like psuedo
|
||||
elements. Learn More.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - Logging circular objects is now
|
||||
possible. It won't show in the Web Maker console, but will show
|
||||
fine in browser's console.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - Console's z-index issue has been fixed.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.3</span>
|
||||
<ul>
|
||||
<li>
|
||||
Choose the save location while exporting your saved creations. Now
|
||||
easily sync them to your Dropbox or any cloud storage.
|
||||
</li>
|
||||
<li>All modals inside the app now have a close button.</li>
|
||||
<li>
|
||||
Checkbox that showed on clicking a boolean value is now removed.
|
||||
Thanks
|
||||
<a href="https://github.com/gauravmuk" target="_blank">
|
||||
Gaurav Nanda
|
||||
</a>.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - Screenshots on retina device are now
|
||||
correct. Thanks
|
||||
<a href="https://github.com/AshBardhan" target="_blank">
|
||||
Ashish Bardhan
|
||||
</a>.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - Double console log in detached mode
|
||||
fixed.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - Console.clear now works in detached mode
|
||||
too.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - DOCTYPE added in preview.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - Typo correction in README. Thanks
|
||||
<a href="https://github.com/AdilMah" target="_blank">
|
||||
Adil Mahmood
|
||||
</a>.
|
||||
</li>
|
||||
<li>gstatic.com is available to load external JavaScripts from.</li>
|
||||
<li>
|
||||
Popular libraries list updated. Thanks
|
||||
<a href="https://github.com/diomed" target="_blank">
|
||||
diomed
|
||||
</a>.
|
||||
</li>
|
||||
<li>
|
||||
Added
|
||||
<a
|
||||
href="https://github.com/chinchang/web-maker/blob/master/CONTRIBUTING.md"
|
||||
target="_blank"
|
||||
>
|
||||
contribution guidelines
|
||||
</a>{' '}
|
||||
in the Github repository.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.2</span>
|
||||
<ul>
|
||||
<li>Minor bug fixes.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.1</span>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://medium.com/web-maker/v2-9-lots-of-goodies-bd1e939571f6"
|
||||
target="_blank"
|
||||
>
|
||||
Read blog post about last release.
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Use Ctrl/Cmd+D to select next occurence of matching selection.
|
||||
</li>
|
||||
<li>Improve onboard experience.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.0</span>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://medium.com/web-maker/v2-9-lots-of-goodies-bd1e939571f6"
|
||||
target="_blank"
|
||||
>
|
||||
Read blog post about this release.
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Detached Preview</strong> - Yes, you read that correct!
|
||||
You can now detach your preview and send it to your secondary
|
||||
monitor.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Find & Replace</strong> - Long awaited, now its there.
|
||||
Ctrl/Cmd+f to find and add Alt to replace.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Atomic CSS (Atomizer) configurations</strong> - Add custom
|
||||
config for Atomic CSS.
|
||||
<a href="https://github.com/acss-io/atomizer#api" target="_blank">
|
||||
Read more
|
||||
</a>.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Light mode</strong> - This new setting makes Web Maker
|
||||
drop some heavy effects like blur etc to gain more performance.
|
||||
Thanks
|
||||
<a href="https://github.com/iamandrewluca" target="_blank">
|
||||
Andrew
|
||||
</a>.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Preserve logs setting</strong> - Choose whether or not to
|
||||
preserve logs across preview refreshes. Thanks
|
||||
<a href="https://github.com/BasitAli" target="_blank">
|
||||
Basit
|
||||
</a>.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Line wrap setting</strong> - As the name says.
|
||||
</li>
|
||||
<li>Semantic UI added to popular libraries.</li>
|
||||
<li>
|
||||
Bootstrap, Vue, UI-Kit and more updated to latest versions in
|
||||
popular libraries.
|
||||
</li>
|
||||
<li>UX improvements in settings UI</li>
|
||||
|
||||
<li>
|
||||
<strong>Bugfix</strong> - Trigger preview refresh anytime with
|
||||
Ctrl/⌘ + Shift + 5. Even with auto-preview on.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.8.1</span>
|
||||
<ul>
|
||||
<li>
|
||||
Vue.js & UIKit version updated to latest version in 'Add Library'
|
||||
list.
|
||||
</li>
|
||||
<li>
|
||||
UTF-8 charset added to preview HTML to support universal
|
||||
characters.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.8.0</span>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://medium.com/web-maker/release-v2-8-is-out-f44e6ea5d9c4"
|
||||
target="_blank"
|
||||
>
|
||||
Read blog post about this release.
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Auto Save</strong> - Your creations now auto-save after
|
||||
your first manual save. This is configurable from settings.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Base2Tone-Meadow Editor Theme</strong> - First user
|
||||
contributed theme. Thanks to Diomed.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Use System Fonts</strong> - You can now use any of your
|
||||
existing system fonts in the editor!
|
||||
</li>
|
||||
<li>
|
||||
<strong>Matching Tag Highlight</strong> - Cursor over any HTML tag
|
||||
would highlight the matching pair tag.
|
||||
</li>
|
||||
<li>
|
||||
Auto-completion suggestion can now be switched off from settings.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Improvement</strong> - Stop white flicker in editor when
|
||||
the app opens.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - Add Babel Polyfill to enable use of
|
||||
next-gen built-ins like Promise or WeakMap.
|
||||
</li>
|
||||
<li>Vue.js version updated to 2.4.0 in popular library list.</li>
|
||||
<li>
|
||||
Downloads permission is optional. Asked only when you take
|
||||
screenshot.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.7.2</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>External Libraries</strong> - Add Foundation.js and update
|
||||
UIKit 3 to latest beta.
|
||||
</li>
|
||||
<li>
|
||||
<strong>rawgit.com</strong> &
|
||||
<strong>wzrd.in</strong> domains are now allowed for loading
|
||||
external libraries from.
|
||||
</li>
|
||||
<li>Minor booting speed improvements</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.7.1</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Framer.js support</strong> - You can now load the latest
|
||||
framer.js library from
|
||||
<a href="https://builds.framerjs.com/" target="_blank">
|
||||
framer builds page
|
||||
</a>{' '}
|
||||
and start coding framer prototypes.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong>: Edit on CodePen is back in action.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong>: Autocompletion menu doesn't show on cut
|
||||
and paste now.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong>: Updated & fixed urls of some common
|
||||
external libraries to latest versions. UIKit3 & Bootstrap 4α are
|
||||
now in the list.
|
||||
</li>
|
||||
<li>Preprocessor selector are now more accessible.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.7.0</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Fork any creation!</strong>: Now you can fork any existing
|
||||
creation of yours to start a new work based on it. One big use
|
||||
case of this feature is "Templates"!
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://kushagragour.in/blog/2017/05/web-maker-fork-templates/?utm_source=webmakerapp&utm_medium=referral"
|
||||
>
|
||||
Read more about it
|
||||
</a>.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Fonts 😍 </strong>: Super-awesome 4 fonts (mostly with
|
||||
ligature support) now available to choose from. Fira Code is the
|
||||
default font now.
|
||||
</li>
|
||||
<li>Updated most used external libraries to latest versions.</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong>: Add missing Bootstrap JS file to most
|
||||
used external libraries list.
|
||||
</li>
|
||||
<li>
|
||||
Several other minor bugfixes and improvements to make Web Maker
|
||||
awesome!
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Great news to share with you - Web Maker has been featured on the
|
||||
Chrome Webstore homepage! Thanks for all the love :)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.6.1</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Bugfix</strong>: Emojis vanishing while exporting to
|
||||
Codepen has been fixed.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong>:
|
||||
<code>console.clear()</code> now doesn't error and clears the
|
||||
inbuilt console.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong>: External libraries added to the creation
|
||||
are exported as well to Codepen.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.6.0</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>The "Console"</strong>: The most awaited feature is here!
|
||||
There is now an inbuilt console to see your logs, errors and for
|
||||
quickly evaluating JavaScript code inside your preview. Enjoy! I
|
||||
also a
|
||||
<a
|
||||
href="https://kushagragour.in/blog/2017/05/web-maker-console-is-here/?utm_source=webmakerapp&utm_medium=referral"
|
||||
target="_blank"
|
||||
>
|
||||
blog post about it
|
||||
</a>.
|
||||
</li>
|
||||
<li>
|
||||
Number slider which popped on clicking any number in the code has
|
||||
been removed due to poor user experience.
|
||||
</li>
|
||||
<li>Minor usability improvements.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.5.0</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Atomic CSS</strong>: Use can now use Atomic CSS(ACSS) in
|
||||
your work!
|
||||
<a href="https://acss.io/" target="_blank">
|
||||
Read more about it here
|
||||
</a>.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Search your saved creations</strong>: Easily search
|
||||
through all your saved creations by title.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Configurable Auto-preview</strong> - You can turn off the
|
||||
auto preview in settings if you don't want the preview to update
|
||||
as you type.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Configurable refresh on resize</strong> - You can
|
||||
configure whether you want the preview to refresh when you resize
|
||||
the preview panel.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - Fix indentation
|
||||
<a
|
||||
href="https://github.com/chinchang/web-maker/issues/104"
|
||||
target="_blank"
|
||||
>
|
||||
issue
|
||||
</a>{' '}
|
||||
with custom indentation size.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.4.2</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Improved infinite loop protection</strong>: Infinite loop
|
||||
protection is now faster and more reliable. And works without the
|
||||
need of Escodegen. Thanks to Ariya Hidayat!
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - Default parameters not working in
|
||||
JavaScript is fixed.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.4.0</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Import/Export</strong>: Your creations are most important.
|
||||
Now export all your creations into a single file as a backup that
|
||||
can be imported anytime & anywhere.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Editor themes</strong>: You have been heard. Now you can
|
||||
choose from a huge list of wonderful editor themes!
|
||||
</li>
|
||||
<li>
|
||||
<strong>Identation settings</strong>: Not a spaces fan? Switch to
|
||||
tabs and set your indentation size.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Vim key bindings</strong>: Rejoice Vim lovers!
|
||||
</li>
|
||||
<li>
|
||||
<strong>Code blast</strong>: Why don't you try coding with this
|
||||
switched on from the settings? Go on...
|
||||
</li>
|
||||
<li>
|
||||
<strong>Important</strong>: Due to security policy changes from
|
||||
Chrome 57 onwards, Web Maker now allows loading external
|
||||
JavaScript libraries only from certain whitelisted domains
|
||||
(localhost, https://ajax.googleapis.com, https://code.jquery.com,
|
||||
https://cdnjs.cloudflare.com, https://unpkg.com,
|
||||
https://maxcdn.com, https://cdn77.com,
|
||||
https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/)
|
||||
</li>
|
||||
<li>Save button now highlights when you have unsaved changes.</li>
|
||||
<li>Jade is now called Pug. Just a name change.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.3.2</span>
|
||||
<ul>
|
||||
<li>Update Babel to support latest and coolest ES6 features.</li>
|
||||
<li>Improve onboarding experience at first install.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.3.1</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - Splitting of code and preview panes is
|
||||
remembered by the editor.
|
||||
</li>
|
||||
<li>
|
||||
Title of the creation is used for the file name when saving as
|
||||
HTML.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.3.0</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Add Library Autocompletion</strong> - Just start typing
|
||||
the name of library and you'll be shown matching libraries from
|
||||
cdnjs.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Preview Screenshot Capture</strong> - Want to grab a nice
|
||||
screenshot of your creation. You have it! Click and capture.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Auto Indent Code</strong> - Select your code and hit
|
||||
Shift-Tab to auto-indent it!
|
||||
</li>
|
||||
<li>
|
||||
<strong>Keyboard Navigation in Saved List</strong> - Now select
|
||||
your creation using arrow keys and hit ENTER to open it.
|
||||
</li>
|
||||
<li>Highlight active line in code panes.</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - Fix in generated title of new creation.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - HTML autocompletion is manual triggered
|
||||
now with Ctrl+Space.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.2.0</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Code Autocompletion</strong> - See code suggestions while
|
||||
you type!
|
||||
</li>
|
||||
<li>
|
||||
<strong>Full Screen Preview</strong> - Checkout your creation in a
|
||||
full-screen layout.
|
||||
</li>
|
||||
<li>
|
||||
<strong>SASS</strong> - SASS support added for CSS.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Faster CSS update</strong> - Preview updates instantly
|
||||
without refresh when just CSS is changed.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - Indentation fixed while going on new
|
||||
line.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - Works even in Chrome Canary now. Though
|
||||
libraries can be added only through CDNs.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.1.0</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>TypeScript</strong> - Now you can code in TypeScript too!
|
||||
</li>
|
||||
<li>
|
||||
<strong>Stylus Preprocessor</strong> - Stylus supported adding for
|
||||
CSS.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Code Folding</strong> - Collapse large code blocks for
|
||||
easy editing.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bugfix</strong> - Support JSX in JavaScript.
|
||||
</li>
|
||||
<li>Better onboarding for first time users.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.0.0</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Save and Load</strong> - Long pending and super-useful,
|
||||
now you can save your creations and resume them anytime later.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Insert JS & CSS</strong> - Load popular JavaScript & CSS
|
||||
libraries in your work without writing any code.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Collapsed Panes</strong> - Collapse/uncollapse code panes
|
||||
with a single click. Your pane configuration is even saved with
|
||||
every creation!
|
||||
</li>
|
||||
<li>
|
||||
<strong>Quick color & number change</strong> - Click on any color
|
||||
or number and experiment with quick values using a slider.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Linting</strong> - See your code errors right where you
|
||||
are coding.
|
||||
</li>
|
||||
<li>No more browser hang due to infinite loops!</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<span class="notification__version">1.7.0</span>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Preprocessors!</strong> - Enjoy a whole list of
|
||||
preprocessors for HTML(Jade & markdown), CSS(SCSS & LESS) and
|
||||
JavaScript(CoffeeScript & Babel).
|
||||
</li>
|
||||
<li>More awesome font for code.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<span class="notification__version">1.6.0</span>
|
||||
<ul>
|
||||
<li>
|
||||
You can now configure Web-Maker to not replace new tab page from
|
||||
the settings. It is always accessible from the icon in the
|
||||
top-right.
|
||||
</li>
|
||||
<li>
|
||||
Download current code as HTML file with Ctrl/⌘ + S keyboard
|
||||
shortcut.
|
||||
</li>
|
||||
<li>
|
||||
New notifications panel added so you are always aware of the new
|
||||
changes in Web-Maker.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,38 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
|
||||
const DEFAULT_PROFILE_IMG =
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E";
|
||||
|
||||
export default class Profile extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div class="tac">
|
||||
<img
|
||||
height="80"
|
||||
class="profile-modal__avatar-img"
|
||||
src={
|
||||
this.props.user
|
||||
? this.props.user.photoURL || DEFAULT_PROFILE_IMG
|
||||
: ''
|
||||
}
|
||||
id="profileAvatarImg"
|
||||
alt="Profile image"
|
||||
/>
|
||||
<h3 id="profileUserName" class="mb-2">
|
||||
{this.props.user && this.props.user.displayName
|
||||
? this.props.user.displayName
|
||||
: 'Anonymous Creator'}
|
||||
</h3>
|
||||
<p>
|
||||
<button
|
||||
class="btn"
|
||||
aria-label="Logout from your account"
|
||||
onClick={this.props.logoutBtnHandler}
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,264 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { getHumanDate } from '../utils';
|
||||
import { trackEvent } from '../analytics';
|
||||
import { itemService } from '../itemService';
|
||||
import { alertsService } from '../notifications';
|
||||
|
||||
export default class SavedItemPane extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.items = [];
|
||||
this.state = {
|
||||
filteredItems: []
|
||||
};
|
||||
}
|
||||
componentWillUpdate(nextProps) {
|
||||
if (this.props.items !== nextProps.items) {
|
||||
this.items = Object.values(nextProps.items);
|
||||
this.items.sort(function(a, b) {
|
||||
return b.updatedOn - a.updatedOn;
|
||||
});
|
||||
this.setState({
|
||||
filteredItems: this.items
|
||||
});
|
||||
}
|
||||
}
|
||||
onCloseIntent() {
|
||||
this.props.closeHandler();
|
||||
}
|
||||
itemClickHandler(item) {
|
||||
this.props.itemClickHandler(item);
|
||||
}
|
||||
itemRemoveBtnClickHandler(item, e) {
|
||||
e.stopPropagation();
|
||||
this.props.itemRemoveBtnClickHandler(item);
|
||||
}
|
||||
itemForkBtnClickHandler(item, e) {
|
||||
e.stopPropagation();
|
||||
this.props.itemForkBtnClickHandler(item);
|
||||
}
|
||||
keyDownHandler(event) {
|
||||
if (!this.props.isOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isCtrlOrMetaPressed = event.ctrlKey || event.metaKey;
|
||||
const isForkKeyPressed = isCtrlOrMetaPressed && event.keyCode === 70;
|
||||
const isDownKeyPressed = event.keyCode === 40;
|
||||
const isUpKeyPressed = event.keyCode === 38;
|
||||
const isEnterKeyPressed = event.keyCode === 13;
|
||||
|
||||
const selectedItemElement = $('.js-saved-item-tile.selected');
|
||||
const havePaneItems = $all('.js-saved-item-tile').length !== 0;
|
||||
|
||||
if ((isDownKeyPressed || isUpKeyPressed) && havePaneItems) {
|
||||
const method = isDownKeyPressed ? 'nextUntil' : 'previousUntil';
|
||||
|
||||
if (selectedItemElement) {
|
||||
selectedItemElement.classList.remove('selected');
|
||||
selectedItemElement[method](
|
||||
'.js-saved-item-tile:not(.hide)'
|
||||
).classList.add('selected');
|
||||
} else {
|
||||
$('.js-saved-item-tile:not(.hide)').classList.add('selected');
|
||||
}
|
||||
$('.js-saved-item-tile.selected').scrollIntoView(false);
|
||||
}
|
||||
|
||||
if (isEnterKeyPressed && selectedItemElement) {
|
||||
const item = this.props.items[selectedItemElement.dataset.itemId];
|
||||
console.log('opening', item);
|
||||
this.props.itemClickHandler(item);
|
||||
}
|
||||
|
||||
// Fork shortcut inside saved creations panel with Ctrl/⌘ + F
|
||||
if (isForkKeyPressed) {
|
||||
event.preventDefault();
|
||||
const item = this.props.items[selectedItemElement.dataset.itemId];
|
||||
this.props.itemForkBtnClickHandler(item);
|
||||
trackEvent('ui', 'forkKeyboardShortcut');
|
||||
}
|
||||
}
|
||||
|
||||
mergeImportedItems(items) {
|
||||
var existingItemIds = [];
|
||||
var toMergeItems = {};
|
||||
const d = deferred();
|
||||
const savedItems = {};
|
||||
this.items.forEach(item => (savedItems[item.id] = item));
|
||||
items.forEach(item => {
|
||||
// We can access `savedItems` here because this gets set when user
|
||||
// opens the saved creations panel. And import option is available
|
||||
// inside the saved items panel.
|
||||
if (savedItems[item.id]) {
|
||||
// Item already exists
|
||||
existingItemIds.push(item.id);
|
||||
} else {
|
||||
log('merging', item.id);
|
||||
toMergeItems[item.id] = item;
|
||||
}
|
||||
});
|
||||
var mergedItemCount = items.length - existingItemIds.length;
|
||||
if (existingItemIds.length) {
|
||||
var shouldReplace = confirm(
|
||||
existingItemIds.length +
|
||||
' creations already exist. Do you want to replace them?'
|
||||
);
|
||||
if (shouldReplace) {
|
||||
log('shouldreplace', shouldReplace);
|
||||
items.forEach(item => {
|
||||
toMergeItems[item.id] = item;
|
||||
});
|
||||
mergedItemCount = items.length;
|
||||
}
|
||||
}
|
||||
if (mergedItemCount) {
|
||||
itemService.saveItems(toMergeItems).then(() => {
|
||||
d.resolve();
|
||||
alertsService.add(
|
||||
mergedItemCount + ' creations imported successfully.'
|
||||
);
|
||||
trackEvent('fn', 'itemsImported', mergedItemCount);
|
||||
});
|
||||
} else {
|
||||
d.resolve();
|
||||
}
|
||||
// FIXME: Move from here
|
||||
// toggleSavedItemsPane(false);
|
||||
|
||||
return d.promise;
|
||||
}
|
||||
|
||||
importFileChangeHandler(e) {
|
||||
var file = e.target.files[0];
|
||||
|
||||
var reader = new FileReader();
|
||||
reader.addEventListener('load', progressEvent => {
|
||||
var items;
|
||||
try {
|
||||
items = JSON.parse(progressEvent.target.result);
|
||||
log(items);
|
||||
this.mergeImportedItems(items);
|
||||
} catch (exception) {
|
||||
log(exception);
|
||||
alert(
|
||||
'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.'
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
reader.readAsText(file, 'utf-8');
|
||||
}
|
||||
|
||||
importBtnClickHandler(e) {
|
||||
var input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.style.display = 'none';
|
||||
input.accept = 'accept="application/json';
|
||||
document.body.appendChild(input);
|
||||
input.addEventListener('change', this.importFileChangeHandler.bind(this));
|
||||
input.click();
|
||||
trackEvent('ui', 'importBtnClicked');
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
searchInputHandler(e) {
|
||||
const text = e.target.value;
|
||||
let el;
|
||||
if (!text) {
|
||||
this.setState({
|
||||
filteredItems: this.items
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
filteredItems: this.items.filter(
|
||||
item => item.title.toLowerCase().indexOf(text) !== -1
|
||||
)
|
||||
});
|
||||
}
|
||||
trackEvent('ui', 'searchInputType');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
id="js-saved-items-pane"
|
||||
class={`saved-items-pane ${this.props.isOpen ? 'is-open' : ''}`}
|
||||
onKeyDown={this.keyDownHandler.bind(this)}
|
||||
>
|
||||
<button
|
||||
onClick={this.onCloseIntent.bind(this)}
|
||||
class="btn saved-items-pane__close-btn"
|
||||
id="js-saved-items-pane-close-btn"
|
||||
>
|
||||
X
|
||||
</button>
|
||||
<div class="flex flex-v-center" style="justify-content: space-between;">
|
||||
<h3>My Library ({this.items.length})</h3>
|
||||
|
||||
<div class="main-header__btn-wrap">
|
||||
<a
|
||||
onClick={this.props.exportBtnClickHandler}
|
||||
href=""
|
||||
class="btn btn-icon hint--bottom-left hint--rounded hint--medium"
|
||||
aria-label="Export all your creations into a single importable file."
|
||||
>
|
||||
Export
|
||||
</a>
|
||||
<a
|
||||
onClick={this.importBtnClickHandler.bind(this)}
|
||||
href=""
|
||||
class="btn btn-icon hint--bottom-left hint--rounded hint--medium"
|
||||
aria-label="Only the file that you export through the 'Export' button can be imported."
|
||||
>
|
||||
Import
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type=""
|
||||
id="searchInput"
|
||||
class="search-input"
|
||||
onInput={this.searchInputHandler.bind(this)}
|
||||
placeholder="Search your creations here..."
|
||||
/>
|
||||
|
||||
<div id="js-saved-items-wrap" class="saved-items-pane__container">
|
||||
{!this.state.filteredItems.length &&
|
||||
this.items.length && <div class="mt-1">No match found.</div>}
|
||||
{this.state.filteredItems.map(item => (
|
||||
<div
|
||||
class="js-saved-item-tile saved-item-tile"
|
||||
data-item-id={item.id}
|
||||
onClick={this.itemClickHandler.bind(this, item)}
|
||||
>
|
||||
<div class="saved-item-tile__btns">
|
||||
<a
|
||||
class="js-saved-item-tile__fork-btn saved-item-tile__btn hint--left hint--medium"
|
||||
aria-label="Creates a duplicate of this creation (Ctrl/⌘ + F)"
|
||||
onClick={this.itemForkBtnClickHandler.bind(this, item)}
|
||||
>
|
||||
Fork<span class="show-when-selected">(Ctrl/⌘ + F)</span>
|
||||
</a>
|
||||
<a
|
||||
class="js-saved-item-tile__remove-btn saved-item-tile__btn hint--left"
|
||||
aria-label="Remove"
|
||||
onClick={this.itemRemoveBtnClickHandler.bind(this, item)}
|
||||
>
|
||||
X
|
||||
</a>
|
||||
</div>
|
||||
<h3 class="saved-item-tile__title">{item.title}</h3>
|
||||
<span class="saved-item-tile__meta">
|
||||
Last updated: {getHumanDate(item.updatedOn)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{!this.items.length && (
|
||||
<h2 class="opacity--30">Nothing saved here.</h2>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,317 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { editorThemes } from '../editorThemes';
|
||||
|
||||
function CheckboxSetting({
|
||||
title,
|
||||
label,
|
||||
onChange,
|
||||
pref,
|
||||
name,
|
||||
showWhenExtension
|
||||
}) {
|
||||
return (
|
||||
<label
|
||||
class={`line ${showWhenExtension ? 'show-when-extension' : ''} `}
|
||||
title={title}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={pref}
|
||||
onChange={onChange}
|
||||
data-setting={name}
|
||||
/>
|
||||
{label}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
export default class Settings extends Component {
|
||||
updateSetting(e) {
|
||||
this.props.onChange(e);
|
||||
}
|
||||
shouldComponentUpdate() {
|
||||
// TODO: add check on prefs
|
||||
return true;
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Settings</h1>
|
||||
|
||||
<h3>Indentation</h3>
|
||||
<div
|
||||
class="line"
|
||||
title="I know this is tough, but you have to decide one!"
|
||||
>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="indentation"
|
||||
value="spaces"
|
||||
checked={this.props.prefs.indentation === 'spaces'}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
data-setting="indentWith"
|
||||
/>{' '}
|
||||
Spaces
|
||||
</label>
|
||||
<label class="ml-1">
|
||||
<input
|
||||
type="radio"
|
||||
name="indentation"
|
||||
value="tabs"
|
||||
checked={this.props.prefs.indentation === 'tabs'}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
data-setting="indentWith"
|
||||
/>{' '}
|
||||
Tabs
|
||||
</label>
|
||||
</div>
|
||||
<label class="line" title="">
|
||||
Indentation Size{' '}
|
||||
<input
|
||||
type="range"
|
||||
class="va-m ml-1"
|
||||
value={this.props.prefs.indentSize}
|
||||
min="1"
|
||||
max="7"
|
||||
list="indentationSizeList"
|
||||
data-setting="indentSize"
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>
|
||||
<span id="indentationSizeValueEl">{this.props.prefs.indentSize}</span>
|
||||
<datalist id="indentationSizeList">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>6</option>
|
||||
<option>7</option>
|
||||
</datalist>
|
||||
</label>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Editor</h3>
|
||||
<div class="flex block--mobile">
|
||||
<div>
|
||||
<label class="line">Default Preprocessors</label>
|
||||
<div class="flex line">
|
||||
<select
|
||||
style="flex:1;margin-left:20px"
|
||||
data-setting="htmlMode"
|
||||
value={this.props.prefs.htmlMode}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
>
|
||||
<option value="html">HTML</option>
|
||||
<option value="markdown">Markdown</option>
|
||||
<option value="jade">Pug</option>
|
||||
</select>
|
||||
<select
|
||||
style="flex:1;margin-left:20px"
|
||||
data-setting="cssMode"
|
||||
value={this.props.prefs.cssMode}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
>
|
||||
<option value="css">CSS</option>
|
||||
<option value="scss">SCSS</option>
|
||||
<option value="sass">SASS</option>
|
||||
<option value="less">LESS</option>
|
||||
<option value="stylus">Stylus</option>
|
||||
<option value="acss">Atomic CSS</option>
|
||||
</select>
|
||||
<select
|
||||
style="flex:1;margin-left:20px"
|
||||
data-setting="jsMode"
|
||||
value={this.props.prefs.jsMode}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
>
|
||||
<option value="js">JS</option>
|
||||
<option value="coffee">CoffeeScript</option>
|
||||
<option value="es6">ES6 (Babel)</option>
|
||||
<option value="typescript">TypeScript</option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="line">
|
||||
Theme
|
||||
<select
|
||||
style="flex:1;margin:0 20px"
|
||||
data-setting="editorTheme"
|
||||
value={this.props.prefs.editorTheme}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
>
|
||||
{editorThemes.map(theme => (
|
||||
<option value={theme}>{theme}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label class="line">
|
||||
Font
|
||||
<select
|
||||
style="flex:1;margin:0 20px"
|
||||
data-setting="editorFont"
|
||||
value={this.props.prefs.editorFont}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
>
|
||||
<option value="FiraCode">Fira Code</option>
|
||||
<option value="Inconsolata">Inconsolata</option>
|
||||
<option value="Monoid">Monoid</option>
|
||||
<option value="FixedSys">FixedSys</option>
|
||||
<option disabled="disabled">----</option>
|
||||
<option value="other">Other font from system</option>
|
||||
</select>
|
||||
{this.props.prefs.editorFont === 'other' && (
|
||||
<input
|
||||
id="customEditorFontInput"
|
||||
type="text"
|
||||
value={this.props.prefs.editorCustomFont}
|
||||
placeholder="Custom font name here"
|
||||
data-setting="editorCustomFont"
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>
|
||||
)}
|
||||
</label>
|
||||
<label class="line">
|
||||
Font Size{' '}
|
||||
<input
|
||||
style="width:70px"
|
||||
type="number"
|
||||
value={this.props.prefs.fontSize}
|
||||
data-setting="fontSize"
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>{' '}
|
||||
px
|
||||
</label>
|
||||
<div class="line">
|
||||
Key bindings
|
||||
<label class="ml-1">
|
||||
<input
|
||||
type="radio"
|
||||
name="keymap"
|
||||
value="sublime"
|
||||
checked={this.props.prefs.keymap === 'sublime'}
|
||||
data-setting="keymap"
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>{' '}
|
||||
Sublime
|
||||
</label>
|
||||
<label class="ml-1">
|
||||
<input
|
||||
type="radio"
|
||||
name="keymap"
|
||||
value="vim"
|
||||
checked={this.props.prefs.keymap === 'vim'}
|
||||
data-setting="keymap"
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>{' '}
|
||||
Vim
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-2 ml-0--mobile">
|
||||
<CheckboxSetting
|
||||
name="lineWrap"
|
||||
title="Toggle wrapping of long sentences onto new line"
|
||||
label="Line wrap"
|
||||
pref={this.props.prefs.lineWrap}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>
|
||||
<CheckboxSetting
|
||||
name="refreshOnResize"
|
||||
title="Your Preview will refresh when you resize the preview split"
|
||||
label="Refresh preview on resize"
|
||||
pref={this.props.prefs.refreshOnResize}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>
|
||||
<CheckboxSetting
|
||||
name="autoComplete"
|
||||
title="Turns on the auto-completion suggestions as you type"
|
||||
label="Auto-complete suggestions"
|
||||
pref={this.props.prefs.autoComplete}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>
|
||||
<CheckboxSetting
|
||||
name="autoPreview"
|
||||
title="Refreshes the preview as you code. Otherwise use the Run button"
|
||||
label="Auto-preview"
|
||||
pref={this.props.prefs.autoPreview}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>
|
||||
<CheckboxSetting
|
||||
name="autoSave"
|
||||
title="Auto-save keeps saving your code at regular intervals after you hit the first save manually"
|
||||
label="Auto-save"
|
||||
pref={this.props.prefs.autoSave}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>
|
||||
<CheckboxSetting
|
||||
name="preserveLastCode"
|
||||
title="Loads the last open creation when app starts"
|
||||
label="Preserve last written code"
|
||||
pref={this.props.prefs.preserveLastCode}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>
|
||||
<CheckboxSetting
|
||||
name="replaceNewTab"
|
||||
title="Turning this on will start showing Web Maker in every new tab you open"
|
||||
label="Replace new tab page"
|
||||
pref={this.props.prefs.replaceNewTab}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
showWhenExtension
|
||||
/>
|
||||
<CheckboxSetting
|
||||
name="preserveConsoleLogs"
|
||||
title="Preserves the console logs across your preview refreshes"
|
||||
label="Preserve console logs"
|
||||
pref={this.props.prefs.preserveConsoleLogs}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>
|
||||
<CheckboxSetting
|
||||
name="lightVersion"
|
||||
title="Switch to lighter version for better performance. Removes things like blur etc."
|
||||
label="Fast/light version"
|
||||
pref={this.props.prefs.lightVersion}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Fun</h3>
|
||||
<p>
|
||||
<CheckboxSetting
|
||||
title="Enjoy wonderful particle blasts while you type"
|
||||
label="Code blast!"
|
||||
name="isCodeBlastOn"
|
||||
pref={this.props.prefs.isCodeBlastOn}
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Advanced</h3>
|
||||
<p>
|
||||
<label
|
||||
class="line"
|
||||
title="This timeout is used to indentify a possible infinite loop and prevent it."
|
||||
>
|
||||
Maximum time allowed in a loop iteration
|
||||
<input
|
||||
type="number"
|
||||
value={this.props.prefs.infiniteLoopTimeout}
|
||||
data-setting="infiniteLoopTimeout"
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>{' '}
|
||||
ms
|
||||
</label>
|
||||
<div class="help-text">
|
||||
If any loop iteration takes more than the defined time, it is
|
||||
detected as a potential infinite loop and further iterations are
|
||||
stopped.
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,50 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import Split from 'split.js';
|
||||
import { log } from '../utils';
|
||||
|
||||
export class SplitPane extends Component {
|
||||
// shouldComponentUpdate(nextProps, nextState) {
|
||||
// return (
|
||||
// nextProps.direction !== this.props.direction ||
|
||||
// nextProps.sizes.join('') !== this.props.sizes.join('')
|
||||
// );
|
||||
// }
|
||||
componentDidMount() {
|
||||
this.updateSplit();
|
||||
}
|
||||
componentWillUpdate() {
|
||||
if (this.splitInstance) {
|
||||
this.splitInstance.destroy();
|
||||
}
|
||||
}
|
||||
componentDidUpdate() {
|
||||
this.updateSplit();
|
||||
}
|
||||
updateSplit() {
|
||||
const options = {
|
||||
direction: this.props.direction,
|
||||
minSize: this.props.minSize,
|
||||
gutterSize: 6,
|
||||
sizes: this.props.sizes
|
||||
};
|
||||
if (this.props.onDragEnd) {
|
||||
options.onDragEnd = this.props.onDragEnd;
|
||||
}
|
||||
if (this.props.onDragStart) {
|
||||
options.onDragStart = this.props.onDragStart;
|
||||
}
|
||||
|
||||
// log('SIZE UPDATTED', ...options);
|
||||
this.splitInstance = Split(
|
||||
this.props.children.map(node => '#' + node.attributes.id),
|
||||
options
|
||||
);
|
||||
if (this.props.onSplit) {
|
||||
this.props.onSplit(this.splitInstance);
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const { children, ...props } = this.props;
|
||||
return <div {...props}>{this.props.children}</div>;
|
||||
}
|
||||
}
|
@@ -1,58 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import Modal from './Modal';
|
||||
|
||||
export default class SupportDeveloperModal extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Modal
|
||||
extraClasses="pledge-modal"
|
||||
show={this.props.show}
|
||||
closeHandler={this.props.closeHandler}
|
||||
>
|
||||
<div class="tac">
|
||||
<h1>Support the Developer</h1>
|
||||
<p>
|
||||
Hi,{' '}
|
||||
<a href="https://kushagragour.in" target="_blank">
|
||||
Kushagra
|
||||
</a>{' '}
|
||||
here! Web Maker is a free and open-source project. To keep myself
|
||||
motivated for working on such open-source and free{' '}
|
||||
<a href="https://kushagragour.in/lab/" target="_blank">
|
||||
side projects
|
||||
</a>, I am accepting donations. Your pledge, no matter how small,
|
||||
will act as an appreciation towards my work and keep me going
|
||||
forward making Web Maker more awesome🔥. So please consider
|
||||
donating. 🙏🏼 (could be as small as $1/month).
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="flex flex-h-center"
|
||||
id="onboardDontShowInTabOptionBtn"
|
||||
d-click="onDontShowInTabClicked"
|
||||
>
|
||||
<a
|
||||
class="onboard-selection"
|
||||
href="https://patreon.com/kushagra"
|
||||
target="_blank"
|
||||
aria-label="Make a monthly pledge on Patreon"
|
||||
>
|
||||
<img src="patreon.png" height="60" alt="Become a patron image" />
|
||||
<h3 class="onboard-selection-text">
|
||||
Make a monthly pledge on Patreon
|
||||
</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://www.paypal.me/kushagragour"
|
||||
target="_blank"
|
||||
aria-label="Make a one time donation on Paypal"
|
||||
>
|
||||
Or, make a one time donation
|
||||
</a>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,144 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import CodeMirror from '../CodeMirror';
|
||||
|
||||
import 'codemirror/addon/edit/matchbrackets.js';
|
||||
import 'codemirror/addon/edit/matchtags.js';
|
||||
import 'codemirror/addon/edit/closebrackets.js';
|
||||
import 'codemirror/addon/edit/closetag.js';
|
||||
import 'codemirror/addon/comment/comment.js';
|
||||
import 'codemirror/addon/fold/foldcode.js';
|
||||
import 'codemirror/addon/fold/foldgutter.js';
|
||||
import 'codemirror/addon/fold/xml-fold.js';
|
||||
import 'codemirror/addon/fold/indent-fold.js';
|
||||
import 'codemirror/addon/fold/comment-fold.js';
|
||||
import 'codemirror/addon/fold/brace-fold.js';
|
||||
// import 'codemirror/addon/mode/loadmode.js';
|
||||
import 'codemirror/addon/hint/show-hint.js';
|
||||
import 'codemirror/addon/hint/javascript-hint.js';
|
||||
import 'codemirror/addon/hint/xml-hint.js';
|
||||
import 'codemirror/addon/hint/html-hint.js';
|
||||
import 'codemirror/addon/hint/css-hint.js';
|
||||
import 'codemirror/addon/selection/active-line.js';
|
||||
import 'codemirror/addon/search/searchcursor.js';
|
||||
import 'codemirror/addon/search/search.js';
|
||||
import 'codemirror/addon/dialog/dialog.js';
|
||||
import 'codemirror/addon/search/jump-to-line.js';
|
||||
|
||||
import 'codemirror/mode/xml/xml.js';
|
||||
import 'codemirror/mode/css/css.js';
|
||||
import 'codemirror/mode/javascript/javascript.js';
|
||||
import 'codemirror/mode/htmlmixed/htmlmixed.js';
|
||||
import 'codemirror/keymap/sublime.js';
|
||||
import 'codemirror/keymap/vim.js';
|
||||
|
||||
import emmet from '@emmetio/codemirror-plugin';
|
||||
|
||||
emmet(CodeMirror);
|
||||
|
||||
export default class UserCodeMirror extends Component {
|
||||
componentDidMount() {
|
||||
this.initEditor();
|
||||
}
|
||||
shouldComponentUpdate() {
|
||||
return false;
|
||||
}
|
||||
|
||||
initEditor() {
|
||||
const options = this.props.options;
|
||||
this.cm = CodeMirror.fromTextArea(this.textarea, {
|
||||
mode: options.mode,
|
||||
lineNumbers: true,
|
||||
lineWrapping: true,
|
||||
autofocus: options.autofocus || false,
|
||||
autoCloseBrackets: true,
|
||||
autoCloseTags: true,
|
||||
matchBrackets: true,
|
||||
matchTags: options.matchTags || false,
|
||||
tabMode: 'indent',
|
||||
keyMap: 'sublime',
|
||||
theme: 'monokai',
|
||||
lint: !!options.lint,
|
||||
tabSize: 2,
|
||||
foldGutter: true,
|
||||
styleActiveLine: true,
|
||||
gutters: options.gutters || [],
|
||||
// cursorScrollMargin: '20', has issue with scrolling
|
||||
profile: options.profile || '',
|
||||
extraKeys: {
|
||||
Up: function(editor) {
|
||||
// Stop up/down keys default behavior when saveditempane is open
|
||||
// if (isSavedItemsPaneOpen) {
|
||||
// return;
|
||||
// }
|
||||
CodeMirror.commands.goLineUp(editor);
|
||||
},
|
||||
Down: function(editor) {
|
||||
// if (isSavedItemsPaneOpen) {
|
||||
// return;
|
||||
// }
|
||||
CodeMirror.commands.goLineDown(editor);
|
||||
},
|
||||
'Shift-Tab': function(editor) {
|
||||
CodeMirror.commands.indentAuto(editor);
|
||||
},
|
||||
Tab: function(editor) {
|
||||
if (options.emmet) {
|
||||
const didEmmetWork = editor.execCommand('emmetExpandAbbreviation');
|
||||
if (didEmmetWork === true) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
const input = $('[data-setting=indentWith]:checked');
|
||||
if (
|
||||
!editor.somethingSelected() &&
|
||||
(!input || input.value === 'spaces')
|
||||
) {
|
||||
// softtabs adds spaces. This is required because by default tab key will put tab, but we want
|
||||
// to indent with spaces if `spaces` is preferred mode of indentation.
|
||||
// `somethingSelected` needs to be checked otherwise, all selected code is replaced with softtab.
|
||||
CodeMirror.commands.insertSoftTab(editor);
|
||||
} else {
|
||||
CodeMirror.commands.defaultTab(editor);
|
||||
}
|
||||
},
|
||||
Enter: 'emmetInsertLineBreak'
|
||||
}
|
||||
});
|
||||
this.cm.on('focus', editor => {
|
||||
// editorWithFocus = editor;
|
||||
});
|
||||
this.cm.on('change', this.props.onChange);
|
||||
this.cm.addKeyMap({
|
||||
'Ctrl-Space': 'autocomplete'
|
||||
});
|
||||
if (!options.noAutocomplete) {
|
||||
this.cm.on('inputRead', (editor, input) => {
|
||||
if (
|
||||
!this.props.autoComplete ||
|
||||
input.origin !== '+input' ||
|
||||
input.text[0] === ';' ||
|
||||
input.text[0] === ',' ||
|
||||
input.text[0] === ' '
|
||||
) {
|
||||
return;
|
||||
}
|
||||
CodeMirror.commands.autocomplete(this.cm, null, {
|
||||
completeSingle: false
|
||||
});
|
||||
});
|
||||
}
|
||||
this.props.onCreation(this.cm);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<textarea
|
||||
ref={el => (this.textarea = el)}
|
||||
name=""
|
||||
id=""
|
||||
cols="30"
|
||||
rows="10"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
@@ -1,26 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { log } from '../utils';
|
||||
import { trackEvent } from '../analytics';
|
||||
|
||||
class Clickable extends Component {
|
||||
handleClick(e) {
|
||||
const el = e.currentTarget;
|
||||
trackEvent(
|
||||
el.getAttribute('data-event-category'),
|
||||
el.getAttribute('data-event-action')
|
||||
);
|
||||
this.props.onClick();
|
||||
}
|
||||
render() {
|
||||
const { onClick, Tag, ...props } = this.props;
|
||||
return <Tag onClick={this.handleClick.bind(this)} {...props} />;
|
||||
}
|
||||
}
|
||||
|
||||
export function A(props) {
|
||||
return <Clickable Tag={'a'} {...props} />;
|
||||
}
|
||||
|
||||
export function Button(props) {
|
||||
return <Clickable Tag={'button'} {...props} />;
|
||||
}
|
@@ -1,284 +0,0 @@
|
||||
import {
|
||||
deferred
|
||||
} from './deferred';
|
||||
import {
|
||||
addInfiniteLoopProtection
|
||||
} from './utils';
|
||||
import {
|
||||
HtmlModes,
|
||||
CssModes,
|
||||
JsModes
|
||||
} from './codeModes';
|
||||
|
||||
const esprima = require('esprima');
|
||||
|
||||
// computeHtml, computeCss & computeJs evaluate the final code according
|
||||
// to whatever mode is selected and resolve the returned promise with the code.
|
||||
export function computeHtml(code, mode) {
|
||||
var d = deferred();
|
||||
if (mode === HtmlModes.HTML) {
|
||||
d.resolve({
|
||||
code
|
||||
});
|
||||
} else if (mode === HtmlModes.MARKDOWN) {
|
||||
d.resolve(window.marked ? {
|
||||
code: marked(code)
|
||||
} : {
|
||||
code
|
||||
});
|
||||
} else if (mode === HtmlModes.JADE) {
|
||||
d.resolve(window.jade ? {
|
||||
code: jade.render(code)
|
||||
} : {
|
||||
code
|
||||
});
|
||||
}
|
||||
|
||||
return d.promise;
|
||||
}
|
||||
export function computeCss(code, mode, settings) {
|
||||
var d = deferred();
|
||||
var errors;
|
||||
|
||||
if (mode === CssModes.CSS) {
|
||||
d.resolve({
|
||||
code
|
||||
});
|
||||
} else if (mode === CssModes.SCSS || mode === CssModes.SASS) {
|
||||
if (window.sass && code) {
|
||||
window.sass.compile(
|
||||
code, {
|
||||
indentedSyntax: mode === CssModes.SASS
|
||||
},
|
||||
function (result) {
|
||||
// Something was wrong
|
||||
if (result.line && result.message) {
|
||||
errors = {
|
||||
lang: 'css',
|
||||
data: [{
|
||||
lineNumber: result.line - 1,
|
||||
message: result.message
|
||||
}]
|
||||
};
|
||||
}
|
||||
d.resolve({
|
||||
code: result.text,
|
||||
errors
|
||||
});
|
||||
}
|
||||
);
|
||||
} else {
|
||||
d.resolve({
|
||||
code
|
||||
});
|
||||
}
|
||||
} else if (mode === CssModes.LESS) {
|
||||
less.render(code).then(
|
||||
function (result) {
|
||||
d.resolve({
|
||||
code: result.css
|
||||
});
|
||||
},
|
||||
function (error) {
|
||||
errors = {
|
||||
lang: 'css',
|
||||
data: [{
|
||||
lineNumber: error.line,
|
||||
message: error.message
|
||||
}]
|
||||
};
|
||||
d.resolve({
|
||||
code: '',
|
||||
errors
|
||||
})
|
||||
}
|
||||
);
|
||||
} else if (mode === CssModes.STYLUS) {
|
||||
stylus(code).render(function (error, result) {
|
||||
if (error) {
|
||||
window.err = error;
|
||||
// Last line of message is the actual message
|
||||
var tempArr = error.message.split('\n');
|
||||
tempArr.pop(); // This is empty string in the end
|
||||
errors = {
|
||||
lang: 'css',
|
||||
data: [{
|
||||
lineNumber: +error.message.match(/stylus:(\d+):/)[1] - 298,
|
||||
message: tempArr.pop()
|
||||
}]
|
||||
};
|
||||
}
|
||||
d.resolve({
|
||||
code: result,
|
||||
errors
|
||||
});
|
||||
});
|
||||
} else if (mode === CssModes.ACSS) {
|
||||
if (!window.atomizer) {
|
||||
d.resolve({
|
||||
code: ''
|
||||
});
|
||||
} else {
|
||||
const html = code;
|
||||
const foundClasses = atomizer.findClassNames(html);
|
||||
var finalConfig;
|
||||
try {
|
||||
finalConfig = atomizer.getConfig(
|
||||
foundClasses,
|
||||
JSON.parse(settings.acssConfig)
|
||||
);
|
||||
} catch (e) {
|
||||
finalConfig = atomizer.getConfig(foundClasses, {});
|
||||
}
|
||||
const acss = atomizer.getCss(finalConfig);
|
||||
d.resolve({
|
||||
code: acss
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return d.promise;
|
||||
}
|
||||
|
||||
export function computeJs(code, mode, shouldPreventInfiniteLoops, infiniteLoopTimeout) {
|
||||
var d = deferred();
|
||||
var errors;
|
||||
|
||||
if (!code) {
|
||||
d.resolve('');
|
||||
return d.promise;
|
||||
}
|
||||
|
||||
if (mode === JsModes.JS) {
|
||||
try {
|
||||
esprima.parse(code, {
|
||||
tolerant: true
|
||||
});
|
||||
} catch (e) {
|
||||
errors = {
|
||||
lang: 'js',
|
||||
data: [{
|
||||
lineNumber: e.lineNumber - 1,
|
||||
message: e.description
|
||||
}]
|
||||
};
|
||||
} finally {
|
||||
if (shouldPreventInfiniteLoops !== false) {
|
||||
// If errors are found in last parse, we don't run infinite loop
|
||||
// protection otherwise it will again throw error.
|
||||
code = errors ? code : addInfiniteLoopProtection(code, {
|
||||
timeout: infiniteLoopTimeout
|
||||
});
|
||||
}
|
||||
|
||||
d.resolve({
|
||||
code,
|
||||
errors
|
||||
});
|
||||
}
|
||||
} else if (mode === JsModes.COFFEESCRIPT) {
|
||||
if (!window.CoffeeScript) {
|
||||
d.resolve('');
|
||||
return d.promise;
|
||||
}
|
||||
try {
|
||||
code = CoffeeScript.compile(code, {
|
||||
bare: true
|
||||
});
|
||||
} catch (e) {
|
||||
errors = {
|
||||
lang: 'js',
|
||||
data: [{
|
||||
lineNumber: e.location.first_line,
|
||||
message: e.message
|
||||
}]
|
||||
};
|
||||
} finally {
|
||||
if (shouldPreventInfiniteLoops !== false) {
|
||||
code = errors ? code : addInfiniteLoopProtection(code, {
|
||||
timeout: infiniteLoopTimeout
|
||||
});
|
||||
}
|
||||
d.resolve({
|
||||
code,
|
||||
errors
|
||||
});
|
||||
}
|
||||
} else if (mode === JsModes.ES6) {
|
||||
if (!window.Babel) {
|
||||
d.resolve('');
|
||||
return d.promise;
|
||||
}
|
||||
try {
|
||||
esprima.parse(code, {
|
||||
tolerant: true,
|
||||
jsx: true
|
||||
});
|
||||
} catch (e) {
|
||||
errors = {
|
||||
lang: 'js',
|
||||
data: [{
|
||||
lineNumber: e.lineNumber - 1,
|
||||
message: e.description
|
||||
}]
|
||||
};
|
||||
} finally {
|
||||
code = Babel.transform(code, {
|
||||
presets: ['latest', 'stage-2', 'react']
|
||||
}).code;
|
||||
if (shouldPreventInfiniteLoops !== false) {
|
||||
code = errors ? code : addInfiniteLoopProtection(code, {
|
||||
timeout: infiniteLoopTimeout
|
||||
});
|
||||
}
|
||||
d.resolve({
|
||||
code,
|
||||
errors
|
||||
});
|
||||
}
|
||||
} else if (mode === JsModes.TS) {
|
||||
try {
|
||||
if (!window.ts) {
|
||||
d.resolve({
|
||||
code: ''
|
||||
});
|
||||
return d.promise;
|
||||
}
|
||||
code = ts.transpileModule(code, {
|
||||
reportDiagnostics: true,
|
||||
compilerOptions: {
|
||||
noEmitOnError: true,
|
||||
diagnostics: true,
|
||||
module: ts.ModuleKind.ES2015
|
||||
}
|
||||
});
|
||||
if (code.diagnostics.length) {
|
||||
/* eslint-disable no-throw-literal */
|
||||
errors = {
|
||||
lang: 'js',
|
||||
data: [{
|
||||
message: code.diagnostics[0].messageText,
|
||||
lineNumber: ts.getLineOfLocalPosition(
|
||||
code.diagnostics[0].file,
|
||||
code.diagnostics[0].start
|
||||
) - 1
|
||||
}]
|
||||
};
|
||||
}
|
||||
code = code.outputText;
|
||||
if (shouldPreventInfiniteLoops !== false && !errors) {
|
||||
code = addInfiniteLoopProtection(code, {
|
||||
timeout: infiniteLoopTimeout
|
||||
});
|
||||
}
|
||||
d.resolve({
|
||||
code,
|
||||
errors
|
||||
});
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
return d.promise;
|
||||
}
|
@@ -1,167 +0,0 @@
|
||||
import './firebaseInit';
|
||||
import firebase from 'firebase/app';
|
||||
import 'firebase/firestore';
|
||||
import {
|
||||
deferred
|
||||
} from './deferred';
|
||||
import {
|
||||
trackEvent
|
||||
} from './analytics';
|
||||
|
||||
|
||||
(() => {
|
||||
const FAUX_DELAY = 1;
|
||||
|
||||
var db;
|
||||
var dbPromise;
|
||||
|
||||
var local = {
|
||||
get: (obj, cb) => {
|
||||
const retVal = {};
|
||||
if (typeof obj === 'string') {
|
||||
retVal[obj] = JSON.parse(window.localStorage.getItem(obj));
|
||||
setTimeout(() => cb(retVal), FAUX_DELAY);
|
||||
} else {
|
||||
Object.keys(obj).forEach(key => {
|
||||
const val = window.localStorage.getItem(key);
|
||||
retVal[key] =
|
||||
val === undefined || val === null ? obj[key] : JSON.parse(val);
|
||||
});
|
||||
setTimeout(() => cb(retVal), FAUX_DELAY);
|
||||
}
|
||||
},
|
||||
set: (obj, cb) => {
|
||||
Object.keys(obj).forEach(key => {
|
||||
window.localStorage.setItem(key, JSON.stringify(obj[key]));
|
||||
});
|
||||
/* eslint-disable consistent-return */
|
||||
setTimeout(() => {
|
||||
if (cb) {
|
||||
return cb();
|
||||
}
|
||||
}, FAUX_DELAY);
|
||||
/* eslint-enable consistent-return */
|
||||
},
|
||||
remove: (key, cb) => {
|
||||
window.localStorage.removeItem(key);
|
||||
setTimeout(() => cb(), FAUX_DELAY);
|
||||
}
|
||||
};
|
||||
const dbLocalAlias = chrome && chrome.storage ? chrome.storage.local : local;
|
||||
const dbSyncAlias = chrome && chrome.storage ? chrome.storage.sync : local;
|
||||
|
||||
async function getDb() {
|
||||
if (dbPromise) {
|
||||
return dbPromise;
|
||||
}
|
||||
utils.log('Initializing firestore');
|
||||
dbPromise = new Promise((resolve, reject) => {
|
||||
if (db) {
|
||||
return resolve(db);
|
||||
}
|
||||
return firebase
|
||||
.firestore()
|
||||
.enablePersistence()
|
||||
.then(function () {
|
||||
// Initialize Cloud Firestore through firebase
|
||||
db = firebase.firestore();
|
||||
// const settings = {
|
||||
// timestampsInSnapshots: true
|
||||
// };
|
||||
// db.settings(settings);
|
||||
utils.log('firebase db ready', db);
|
||||
resolve(db);
|
||||
})
|
||||
.catch(function (err) {
|
||||
reject(err.code);
|
||||
if (err.code === 'failed-precondition') {
|
||||
// Multiple tabs open, persistence can only be enabled
|
||||
// in one tab at a a time.
|
||||
alert(
|
||||
"Opening Web Maker web app in multiple tabs isn't supported at present and it seems like you already have it opened in another tab. Please use in one tab."
|
||||
);
|
||||
trackEvent('fn', 'multiTabError');
|
||||
} else if (err.code === 'unimplemented') {
|
||||
// The current browser does not support all of the
|
||||
// features required to enable persistence
|
||||
// ...
|
||||
}
|
||||
});
|
||||
});
|
||||
return dbPromise;
|
||||
}
|
||||
|
||||
async function getUserLastSeenVersion() {
|
||||
const d = deferred();
|
||||
// Will be chrome.storage.sync in extension environment,
|
||||
// otherwise will fallback to localstorage
|
||||
dbSyncAlias.get({
|
||||
lastSeenVersion: ''
|
||||
},
|
||||
result => {
|
||||
d.resolve(result.lastSeenVersion);
|
||||
}
|
||||
);
|
||||
return d.promise;
|
||||
// Might consider getting actual value from remote db.
|
||||
// Not critical right now.
|
||||
}
|
||||
|
||||
async function setUserLastSeenVersion(version) {
|
||||
// Setting the `lastSeenVersion` in localStorage(sync for extension) always
|
||||
// because next time we need to fetch it irrespective of the user being
|
||||
// logged in or out quickly from local storage.
|
||||
dbSyncAlias.set({
|
||||
lastSeenVersion: version
|
||||
},
|
||||
function () {}
|
||||
);
|
||||
if (window.user) {
|
||||
const remoteDb = await getDb();
|
||||
remoteDb
|
||||
.doc(`users/${window.user.uid}`)
|
||||
.update({
|
||||
lastSeenVersion: version
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function getUser(userId) {
|
||||
const remoteDb = await getDb();
|
||||
return remoteDb
|
||||
.doc(`users/${userId}`)
|
||||
.get()
|
||||
.then(doc => {
|
||||
if (!doc.exists)
|
||||
return remoteDb.doc(`users/${userId}`).set({}, {
|
||||
merge: true
|
||||
});
|
||||
const user = doc.data();
|
||||
Object.assign(window.user, user);
|
||||
return user;
|
||||
});
|
||||
}
|
||||
|
||||
// Fetch user settings.
|
||||
// This isn't hitting the remote db because remote settings
|
||||
// get fetch asynchronously (in user/) and update the envioronment.
|
||||
function getSettings(defaultSettings) {
|
||||
const d = deferred();
|
||||
// Will be chrome.storage.sync in extension environment,
|
||||
// otherwise will fallback to localstorage
|
||||
dbSyncAlias.get(defaultSettings, result => {
|
||||
d.resolve(result);
|
||||
});
|
||||
return d.promise;
|
||||
}
|
||||
|
||||
window.db = {
|
||||
getDb,
|
||||
getUser,
|
||||
getUserLastSeenVersion,
|
||||
setUserLastSeenVersion,
|
||||
getSettings,
|
||||
local: dbLocalAlias,
|
||||
sync: dbSyncAlias
|
||||
};
|
||||
})();
|
@@ -1,12 +0,0 @@
|
||||
export function deferred() {
|
||||
var d = {};
|
||||
var promise = new Promise(function (resolve, reject) {
|
||||
d.resolve = resolve;
|
||||
d.reject = reject;
|
||||
});
|
||||
|
||||
// Add the native promise as a key on deferred object.
|
||||
d.promise = promise;
|
||||
// Also move all props/methods of native promise on the deferred obj.
|
||||
return Object.assign(d, promise);
|
||||
}
|
@@ -1,13 +0,0 @@
|
||||
window.addEventListener('message', e => {
|
||||
if (e.data && e.data.contents) {
|
||||
const frame = document.querySelector('iframe');
|
||||
frame.src = frame.src;
|
||||
setTimeout(() => {
|
||||
frame.contentDocument.open();
|
||||
frame.contentDocument.write(e.data.contents);
|
||||
frame.contentDocument.close();
|
||||
}, 10);
|
||||
} else {
|
||||
document.querySelector('iframe').src = e.data;
|
||||
}
|
||||
});
|
@@ -1,51 +0,0 @@
|
||||
export const editorThemes = [
|
||||
'3024-day',
|
||||
'3024-night',
|
||||
'abcdef',
|
||||
'ambiance',
|
||||
'base2tone-meadow-dark',
|
||||
'base16-dark',
|
||||
'base16-light',
|
||||
'bespin',
|
||||
'blackboard',
|
||||
'cobalt',
|
||||
'colorforth',
|
||||
'dracula',
|
||||
'duotone-dark',
|
||||
'duotone-light',
|
||||
'eclipse',
|
||||
'elegant',
|
||||
'erlang-dark',
|
||||
'hopscotch',
|
||||
'icecoder',
|
||||
'isotope',
|
||||
'lesser-dark',
|
||||
'liquibyte',
|
||||
'material',
|
||||
'mbo',
|
||||
'mdn-like',
|
||||
'midnight',
|
||||
'monokai',
|
||||
'neat',
|
||||
'neo',
|
||||
'night',
|
||||
'panda-syntax',
|
||||
'paraiso-dark',
|
||||
'paraiso-light',
|
||||
'pastel-on-dark',
|
||||
'railscasts',
|
||||
'rubyblue',
|
||||
'seti',
|
||||
'solarized dark',
|
||||
'solarized light',
|
||||
'the-matrix',
|
||||
'tomorrow-night-bright',
|
||||
'tomorrow-night-eighties',
|
||||
'ttcn',
|
||||
'twilight',
|
||||
'vibrant-ink',
|
||||
'xq-dark',
|
||||
'xq-light',
|
||||
'yeti',
|
||||
'zenburn'
|
||||
];
|
@@ -1,11 +0,0 @@
|
||||
import firebase from 'firebase/app';
|
||||
// import 'firebase/firestore';
|
||||
const config = {
|
||||
apiKey: 'AIzaSyBl8Dz7ZOE7aP75mipYl2zKdLSRzBU2fFc',
|
||||
authDomain: 'web-maker-app.firebaseapp.com',
|
||||
databaseURL: 'https://web-maker-app.firebaseio.com',
|
||||
projectId: 'web-maker-app',
|
||||
storageBucket: 'web-maker-app.appspot.com',
|
||||
messagingSenderId: '560473480645'
|
||||
};
|
||||
firebase.initializeApp(config);
|
Before Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,99 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Web Maker</title>
|
||||
<link rel="icon" href="icon-128.png">
|
||||
<meta name=viewport content="width=device-width, initial-scale=1">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
|
||||
<% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
|
||||
<meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
|
||||
<% } %>
|
||||
<% for (var chunk of webpack.chunks) { %>
|
||||
<% if (chunk.names.length === 1 && chunk.names[0] === 'polyfills') continue; %>
|
||||
<% for (var file of chunk.files) { %>
|
||||
<% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %>
|
||||
<link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
|
||||
<% } else if (file.match(/manifest\.json$/)) { %>
|
||||
<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath + file %>">
|
||||
<% } %>
|
||||
<% } %>
|
||||
<% } %>
|
||||
|
||||
|
||||
<style>
|
||||
/* Critically acclaimed CSS */
|
||||
|
||||
.saved-items-pane {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 450px;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.modal {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- build:css vendor.css -->
|
||||
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
|
||||
<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css">
|
||||
<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css">
|
||||
<link rel="stylesheet" href="lib/codemirror/addon/dialog/dialog.css">
|
||||
<link rel="stylesheet" href="lib/hint.min.css">
|
||||
<link rel="stylesheet" href="lib/inlet.css">
|
||||
<!-- endbuild -->
|
||||
|
||||
<link rel="stylesheet" id="editorThemeLinkTag" href="lib/codemirror/theme/monokai.css"></link>
|
||||
|
||||
<!-- build:css style.css -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<!-- endbuild -->
|
||||
|
||||
<style id="fontStyleTemplate" type="template">
|
||||
@font-face { font-family: 'fontname'; font-style: normal; font-weight: 400; src: url(fontname.ttf) format('truetype'); unicode-range:
|
||||
U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF,
|
||||
U+EFFD, U+F000; } .CodeMirror pre { font-family: 'fontname', monospace; }
|
||||
</style>
|
||||
<style type="text/css" id="fontStyleTag">
|
||||
@font-face {
|
||||
font-family: 'FiraCode';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(FiraCode.ttf) format('truetype');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
|
||||
.CodeMirror pre {
|
||||
font-family: 'FiraCode', monospace;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<%= htmlWebpackPlugin.options.ssr({
|
||||
url: '/'
|
||||
}) %>
|
||||
<script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
|
||||
<script>
|
||||
window.fetch || document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
@@ -1,4 +0,0 @@
|
||||
// import './style';
|
||||
import App from './components/app.jsx';
|
||||
|
||||
export default App;
|
@@ -1,233 +0,0 @@
|
||||
import {
|
||||
deferred
|
||||
} from './deferred';
|
||||
|
||||
export const itemService = {
|
||||
|
||||
async getItem(id) {
|
||||
var remoteDb = await window.db.getDb();
|
||||
return remoteDb
|
||||
.doc(`items/${id}`)
|
||||
.get()
|
||||
.then(doc => {
|
||||
return doc.data();
|
||||
});
|
||||
},
|
||||
async getUserItemIds() {
|
||||
if (window.user) {
|
||||
return new Promise(resolve => {
|
||||
resolve(window.user.items || {});
|
||||
});
|
||||
}
|
||||
var remoteDb = await window.db.getDb();
|
||||
return remoteDb
|
||||
.doc(`users/${window.user.uid}`)
|
||||
.get()
|
||||
.then(doc => {
|
||||
if (!doc.exists) {
|
||||
return {};
|
||||
}
|
||||
return doc.data().items;
|
||||
});
|
||||
},
|
||||
|
||||
async getAllItems() {
|
||||
var t = Date.now()
|
||||
var d = deferred();
|
||||
let itemIds = await this.getUserItemIds();
|
||||
itemIds = Object.getOwnPropertyNames(itemIds || {});
|
||||
utils.log('itemids', itemIds);
|
||||
|
||||
if (!itemIds.length) {
|
||||
d.resolve([]);
|
||||
}
|
||||
var remoteDb = await window.db.getDb();
|
||||
const items = [];
|
||||
remoteDb
|
||||
.collection('items')
|
||||
.where('createdBy', '==', window.user.uid)
|
||||
.onSnapshot(function (querySnapshot) {
|
||||
querySnapshot.forEach(function (doc) {
|
||||
items.push(doc.data());
|
||||
});
|
||||
utils.log('Items fetched in ', Date.now() - t, 'ms')
|
||||
|
||||
d.resolve(items);
|
||||
}, function () {
|
||||
d.resolve([])
|
||||
});
|
||||
return d.promise;
|
||||
},
|
||||
|
||||
async setUser() {
|
||||
const remoteDb = await window.db.getDb();
|
||||
return remoteDb.doc(`users/${window.user.uid}`).set({
|
||||
items: {}
|
||||
});
|
||||
},
|
||||
|
||||
async setItem(id, item) {
|
||||
const d = deferred();
|
||||
var remotePromise;
|
||||
// TODO: check why we need to save locally always?
|
||||
const obj = {
|
||||
[id]: item
|
||||
};
|
||||
db.local.set(obj, () => {
|
||||
// Is extension OR is app but logged out OR is logged in but offline
|
||||
// If logged in but offline, resolve immediately so
|
||||
// that you see the feedback msg immediately and not wait for
|
||||
// later sync.
|
||||
if (window.IS_EXTENSION || !window.user || !navigator.onLine) {
|
||||
d.resolve();
|
||||
}
|
||||
});
|
||||
|
||||
// If `id` is `code`, this is a call on unloadbefore to save the last open thing.
|
||||
// Do not presist that on remote.
|
||||
if (id === 'code') {
|
||||
// No deferred required here as this gets called on unloadbefore
|
||||
return false;
|
||||
}
|
||||
if (window.user) {
|
||||
var remoteDb = await window.db.getDb();
|
||||
utils.log(`Starting to save item ${id}`);
|
||||
item.createdBy = window.user.uid;
|
||||
remotePromise = remoteDb
|
||||
.collection('items')
|
||||
.doc(id)
|
||||
.set(item, {
|
||||
merge: true
|
||||
})
|
||||
.then(arg => {
|
||||
utils.log('Document written', arg);
|
||||
d.resolve();
|
||||
})
|
||||
.catch(d.reject);
|
||||
}
|
||||
|
||||
return window.user && navigator.onLine ? remotePromise : d.promise;
|
||||
},
|
||||
|
||||
/**
|
||||
* Saves the passed items in the database.
|
||||
* @param {Array} items to be saved in DB
|
||||
*/
|
||||
saveItems(items) {
|
||||
var d = deferred();
|
||||
// When not logged in
|
||||
if (!window.user) {
|
||||
// save new items
|
||||
window.db.local.set(items, d.resolve);
|
||||
// Push in new item IDs
|
||||
window.db.local.get({
|
||||
items: {}
|
||||
},
|
||||
function (result) {
|
||||
/* eslint-disable guard-for-in */
|
||||
for (var id in items) {
|
||||
result.items[id] = true;
|
||||
}
|
||||
window.db.local.set({
|
||||
items: result.items
|
||||
});
|
||||
/* eslint-enable guard-for-in */
|
||||
}
|
||||
);
|
||||
} else {
|
||||
window.db.getDb().then(remoteDb => {
|
||||
const batch = remoteDb.batch();
|
||||
/* eslint-disable guard-for-in */
|
||||
for (var id in items) {
|
||||
items[id].createdBy = window.user.uid;
|
||||
batch.set(remoteDb.doc(`items/${id}`), items[id]);
|
||||
batch.update(remoteDb.doc(`users/${window.user.uid}`), {
|
||||
[`items.${id}`]: true
|
||||
});
|
||||
// Set these items on our cached user object too
|
||||
window.user.items = window.user.items || {};
|
||||
window.user.items[id] = true;
|
||||
}
|
||||
batch.commit().then(d.resolve);
|
||||
/* eslint-enable guard-for-in */
|
||||
});
|
||||
}
|
||||
return d.promise;
|
||||
},
|
||||
|
||||
async removeItem(id) {
|
||||
// When not logged in
|
||||
if (!window.user) {
|
||||
var d = deferred();
|
||||
window.db.local.remove(id, d.resolve);
|
||||
return d.promise;
|
||||
}
|
||||
const remoteDb = await window.db.getDb();
|
||||
utils.log(`Starting to save item ${id}`);
|
||||
return remoteDb
|
||||
.collection('items')
|
||||
.doc(id)
|
||||
.delete()
|
||||
.then(arg => {
|
||||
utils.log('Document removed', arg);
|
||||
})
|
||||
.catch(error => utils.log(error));
|
||||
},
|
||||
|
||||
async setItemForUser(itemId) {
|
||||
// When not logged in
|
||||
if (!window.user) {
|
||||
return window.db.local.get({
|
||||
items: {}
|
||||
},
|
||||
function (result) {
|
||||
result.items[itemId] = true;
|
||||
window.db.local.set({
|
||||
items: result.items
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
const remoteDb = await window.db.getDb();
|
||||
return remoteDb
|
||||
.collection('users')
|
||||
.doc(window.user.uid)
|
||||
.update({
|
||||
[`items.${itemId}`]: true
|
||||
})
|
||||
.then(arg => {
|
||||
utils.log(`Item ${itemId} set for user`, arg);
|
||||
window.user.items = window.user.items || {};
|
||||
window.user.items[itemId] = true;
|
||||
})
|
||||
.catch(error => utils.log(error));
|
||||
},
|
||||
|
||||
async unsetItemForUser(itemId) {
|
||||
// When not logged in
|
||||
if (!window.user) {
|
||||
return window.db.local.get({
|
||||
items: {}
|
||||
},
|
||||
function (result) {
|
||||
delete result.items[itemId];
|
||||
window.db.local.set({
|
||||
items: result.items
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
const remoteDb = await window.db.getDb();
|
||||
return remoteDb
|
||||
.collection('users')
|
||||
.doc(window.user.uid)
|
||||
.update({
|
||||
[`items.${itemId}`]: firebase.firestore.FieldValue.delete()
|
||||
})
|
||||
.then(arg => {
|
||||
delete window.user.items[itemId];
|
||||
utils.log(`Item ${itemId} unset for user`, arg);
|
||||
})
|
||||
.catch(error => utils.log(error));
|
||||
}
|
||||
}
|
@@ -1,222 +0,0 @@
|
||||
/*
|
||||
Based on Joel Besada's lovely experiment
|
||||
https://twitter.com/JoelBesada/status/670343885655293952
|
||||
*/
|
||||
|
||||
;(function () {
|
||||
var shakeTime = 0,
|
||||
shakeTimeMax = 0,
|
||||
shakeIntensity = 5,
|
||||
lastTime = 0,
|
||||
particles = [],
|
||||
particlePointer = 0,
|
||||
MAX_PARTICLES = 100,
|
||||
PARTICLE_NUM_RANGE = { min: 2, max: 7 },
|
||||
PARTICLE_GRAVITY = 0.08,
|
||||
PARTICLE_ALPHA_FADEOUT = 0.96,
|
||||
PARTICLE_VELOCITY_RANGE = {
|
||||
x: [-1, 1],
|
||||
y: [-3.5, -1.5]
|
||||
},
|
||||
w = window.innerWidth,
|
||||
h = window.innerHeight,
|
||||
effect,
|
||||
isActive = false;
|
||||
|
||||
var codemirrors = [], cmNode;
|
||||
var canvas, ctx;
|
||||
var current_time, dt, magnitude, shakeX, shakeY; // loop vars
|
||||
var throttledShake = throttle(shake, 100);
|
||||
var throttledSpawnParticles = throttle(spawnParticles, 100);
|
||||
|
||||
function getRGBComponents(node) {
|
||||
var color = getComputedStyle(node).color;
|
||||
if (color) {
|
||||
try {
|
||||
return color.match(/(\d+), (\d+), (\d+)/).slice(1);
|
||||
} catch(e) {
|
||||
return [255, 255, 255];
|
||||
}
|
||||
} else {
|
||||
return [255, 255, 255];
|
||||
}
|
||||
}
|
||||
|
||||
function spawnParticles(cm, type) {
|
||||
var cursorPos = cm.getCursor();
|
||||
var pos = cm.cursorCoords();
|
||||
var node = document.elementFromPoint(pos.left - 5, pos.top + 5);
|
||||
type = cm.getTokenAt(cursorPos);
|
||||
if (type) { type = type.type; };
|
||||
var numParticles = random(PARTICLE_NUM_RANGE.min, PARTICLE_NUM_RANGE.max);
|
||||
var color = getRGBComponents(node);
|
||||
for (var i = numParticles; i--;) {
|
||||
particles[particlePointer] = createParticle(pos.left + 10, pos.top, color);
|
||||
particlePointer = (particlePointer + 1) % MAX_PARTICLES;
|
||||
}
|
||||
}
|
||||
|
||||
function createParticle(x, y, color) {
|
||||
var p = {
|
||||
x: x,
|
||||
y: y + 10,
|
||||
alpha: 1,
|
||||
color: color
|
||||
};
|
||||
if (effect === 1) {
|
||||
p.size = random(2, 4);
|
||||
p.vx = PARTICLE_VELOCITY_RANGE.x[0] + Math.random() *
|
||||
(PARTICLE_VELOCITY_RANGE.x[1] - PARTICLE_VELOCITY_RANGE.x[0]);
|
||||
p.vy = PARTICLE_VELOCITY_RANGE.y[0] + Math.random() *
|
||||
(PARTICLE_VELOCITY_RANGE.y[1] - PARTICLE_VELOCITY_RANGE.y[0]);
|
||||
} else if (effect === 2) {
|
||||
p.size = random(2, 8);
|
||||
p.drag = 0.92;
|
||||
p.vx = random(-3, 3);
|
||||
p.vy = random(-3, 3);
|
||||
p.wander = 0.15;
|
||||
p.theta = random(0, 360) * Math.PI / 180;
|
||||
}
|
||||
return p;
|
||||
}
|
||||
|
||||
function effect1(particle) {
|
||||
particle.vy += PARTICLE_GRAVITY;
|
||||
particle.x += particle.vx;
|
||||
particle.y += particle.vy;
|
||||
|
||||
particle.alpha *= PARTICLE_ALPHA_FADEOUT;
|
||||
|
||||
ctx.fillStyle = 'rgba('+ particle.color[0] +','+ particle.color[1] +','+ particle.color[2] + ',' + particle.alpha + ')';
|
||||
ctx.fillRect(Math.round(particle.x - 1), Math.round(particle.y - 1), particle.size, particle.size);
|
||||
}
|
||||
|
||||
// Effect based on Soulwire's demo: http://codepen.io/soulwire/pen/foktm
|
||||
function effect2(particle) {
|
||||
particle.x += particle.vx;
|
||||
particle.y += particle.vy;
|
||||
particle.vx *= particle.drag;
|
||||
particle.vy *= particle.drag;
|
||||
particle.theta += random( -0.5, 0.5 );
|
||||
particle.vx += Math.sin( particle.theta ) * 0.1;
|
||||
particle.vy += Math.cos( particle.theta ) * 0.1;
|
||||
particle.size *= 0.96;
|
||||
|
||||
ctx.fillStyle = 'rgba('+ particle.color[0] +','+ particle.color[1] +','+ particle.color[2] + ',' + particle.alpha + ')';
|
||||
ctx.beginPath();
|
||||
ctx.arc(Math.round(particle.x - 1), Math.round(particle.y - 1), particle.size, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function drawParticles(timeDelta) {
|
||||
var particle;
|
||||
for (var i = particles.length; i--;) {
|
||||
particle = particles[i];
|
||||
if (!particle || particle.alpha < 0.01 || particle.size <= 0.5) { continue; }
|
||||
|
||||
if (effect === 1) { effect1(particle); }
|
||||
else if (effect === 2) { effect2(particle); }
|
||||
}
|
||||
}
|
||||
|
||||
function shake(editor, time) {
|
||||
cmNode = editor.getWrapperElement();
|
||||
shakeTime = shakeTimeMax = time;
|
||||
}
|
||||
|
||||
function random(min, max) {
|
||||
if (!max) { max = min; min = 0; }
|
||||
return min + ~~(Math.random() * (max - min + 1))
|
||||
}
|
||||
|
||||
function throttle (callback, limit) {
|
||||
var wait = false;
|
||||
return function () {
|
||||
if (!wait) {
|
||||
callback.apply(this, arguments);
|
||||
wait = true;
|
||||
setTimeout(function () {
|
||||
wait = false;
|
||||
}, limit);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function loop() {
|
||||
if (!isActive) { return; }
|
||||
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
// get the time past the previous frame
|
||||
current_time = new Date().getTime();
|
||||
if(!lastTime) lastTime = current_time;
|
||||
dt = (current_time - lastTime) / 1000;
|
||||
lastTime = current_time;
|
||||
|
||||
if (shakeTime > 0) {
|
||||
shakeTime -= dt;
|
||||
magnitude = (shakeTime / shakeTimeMax) * shakeIntensity;
|
||||
shakeX = random(-magnitude, magnitude);
|
||||
shakeY = random(-magnitude, magnitude);
|
||||
cmNode.style.transform = 'translate(' + shakeX + 'px,' + shakeY + 'px)';
|
||||
}
|
||||
drawParticles();
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
function onCodeMirrorChange(editor, change) {
|
||||
if (change.origin !== '+input' && change.origin !== '+delete') { return; }
|
||||
|
||||
if (editor.getOption('blastCode') === true || editor.getOption('blastCode').shake === undefined) {
|
||||
throttledShake(editor, 0.3);
|
||||
}
|
||||
throttledSpawnParticles(editor);
|
||||
}
|
||||
|
||||
|
||||
function init(editor) {
|
||||
isActive = true;
|
||||
|
||||
if (!canvas) {
|
||||
canvas = document.createElement('canvas');
|
||||
ctx = canvas.getContext('2d'),
|
||||
|
||||
canvas.id = 'code-blast-canvas'
|
||||
canvas.style.position = 'absolute';
|
||||
canvas.style.top = 0;
|
||||
canvas.style.left = 0;
|
||||
canvas.style.zIndex = 1;
|
||||
canvas.style.pointerEvents = 'none';
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
|
||||
document.body.appendChild(canvas);
|
||||
loop();
|
||||
}
|
||||
|
||||
editor.on("change", onCodeMirrorChange);
|
||||
}
|
||||
|
||||
function destroy(editor) {
|
||||
editor.off('change', onCodeMirrorChange);
|
||||
codemirrors.splice(codemirrors.indexOf(editor), 1);
|
||||
if (!codemirrors.length) {
|
||||
isActive = false;
|
||||
if (canvas) {
|
||||
canvas.remove();
|
||||
canvas = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CodeMirror.defineOption('blastCode', false, function(editor, val, old) {
|
||||
if (val) {
|
||||
codemirrors.push(editor);
|
||||
effect = val.effect || 2;
|
||||
init(editor);
|
||||
} else {
|
||||
destroy(editor);
|
||||
}
|
||||
|
||||
});
|
||||
})();
|
8
webmaker/src/lib/codemirror/.gitattributes
vendored
@@ -1,8 +0,0 @@
|
||||
*.txt text
|
||||
*.js text
|
||||
*.html text
|
||||
*.md text
|
||||
*.json text
|
||||
*.yml text
|
||||
*.css text
|
||||
*.svg text
|
8
webmaker/src/lib/codemirror/.gitignore
vendored
@@ -1,8 +0,0 @@
|
||||
/node_modules
|
||||
/npm-debug.log
|
||||
/test*.html
|
||||
.tern-*
|
||||
*~
|
||||
*.swp
|
||||
.idea
|
||||
*.iml
|
@@ -1,10 +0,0 @@
|
||||
/node_modules
|
||||
/demo
|
||||
/doc
|
||||
/test
|
||||
/test*.html
|
||||
/index.html
|
||||
/mode/*/*test.js
|
||||
/mode/*/*.html
|
||||
/mode/index.html
|
||||
.*
|
@@ -1,4 +0,0 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- stable
|
||||
sudo: false
|
@@ -1,19 +0,0 @@
|
||||
Copyright (C) 2016 by Marijn Haverbeke <marijnh@gmail.com> and others
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
@@ -1,28 +0,0 @@
|
||||
# CodeMirror
|
||||
[](https://travis-ci.org/codemirror/CodeMirror)
|
||||
[](https://www.npmjs.org/package/codemirror)
|
||||
[](https://gitter.im/codemirror/CodeMirror)
|
||||
[Funding status: ](https://marijnhaverbeke.nl/fund/)
|
||||
|
||||
CodeMirror is a versatile text editor implemented in JavaScript for
|
||||
the browser. It is specialized for editing code, and comes with over
|
||||
100 language modes and various addons that implement more advanced
|
||||
editing functionality.
|
||||
|
||||
A rich programming API and a CSS theming system are available for
|
||||
customizing CodeMirror to fit your application, and extending it with
|
||||
new functionality.
|
||||
|
||||
You can find more information (and the
|
||||
[manual](http://codemirror.net/doc/manual.html)) on the [project
|
||||
page](http://codemirror.net). For questions and discussion, use the
|
||||
[discussion forum](https://discuss.codemirror.net/).
|
||||
|
||||
See
|
||||
[CONTRIBUTING.md](https://github.com/codemirror/CodeMirror/blob/master/CONTRIBUTING.md)
|
||||
for contributing guidelines.
|
||||
|
||||
The CodeMirror community aims to be welcoming to everybody. We use the
|
||||
[Contributor Covenant
|
||||
(1.1)](http://contributor-covenant.org/version/1/1/0/) as our code of
|
||||
conduct.
|
203
webmaker/src/lib/codemirror/addon/comment/comment.js
vendored
@@ -1,203 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
var noOptions = {};
|
||||
var nonWS = /[^\s\u00a0]/;
|
||||
var Pos = CodeMirror.Pos;
|
||||
|
||||
function firstNonWS(str) {
|
||||
var found = str.search(nonWS);
|
||||
return found == -1 ? 0 : found;
|
||||
}
|
||||
|
||||
CodeMirror.commands.toggleComment = function(cm) {
|
||||
cm.toggleComment();
|
||||
};
|
||||
|
||||
CodeMirror.defineExtension("toggleComment", function(options) {
|
||||
if (!options) options = noOptions;
|
||||
var cm = this;
|
||||
var minLine = Infinity, ranges = this.listSelections(), mode = null;
|
||||
for (var i = ranges.length - 1; i >= 0; i--) {
|
||||
var from = ranges[i].from(), to = ranges[i].to();
|
||||
if (from.line >= minLine) continue;
|
||||
if (to.line >= minLine) to = Pos(minLine, 0);
|
||||
minLine = from.line;
|
||||
if (mode == null) {
|
||||
if (cm.uncomment(from, to, options)) mode = "un";
|
||||
else { cm.lineComment(from, to, options); mode = "line"; }
|
||||
} else if (mode == "un") {
|
||||
cm.uncomment(from, to, options);
|
||||
} else {
|
||||
cm.lineComment(from, to, options);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Rough heuristic to try and detect lines that are part of multi-line string
|
||||
function probablyInsideString(cm, pos, line) {
|
||||
return /\bstring\b/.test(cm.getTokenTypeAt(Pos(pos.line, 0))) && !/^[\'\"`]/.test(line)
|
||||
}
|
||||
|
||||
CodeMirror.defineExtension("lineComment", function(from, to, options) {
|
||||
if (!options) options = noOptions;
|
||||
var self = this, mode = self.getModeAt(from);
|
||||
var firstLine = self.getLine(from.line);
|
||||
if (firstLine == null || probablyInsideString(self, from, firstLine)) return;
|
||||
|
||||
var commentString = options.lineComment || mode.lineComment;
|
||||
if (!commentString) {
|
||||
if (options.blockCommentStart || mode.blockCommentStart) {
|
||||
options.fullLines = true;
|
||||
self.blockComment(from, to, options);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
var end = Math.min(to.ch != 0 || to.line == from.line ? to.line + 1 : to.line, self.lastLine() + 1);
|
||||
var pad = options.padding == null ? " " : options.padding;
|
||||
var blankLines = options.commentBlankLines || from.line == to.line;
|
||||
|
||||
self.operation(function() {
|
||||
if (options.indent) {
|
||||
var baseString = null;
|
||||
for (var i = from.line; i < end; ++i) {
|
||||
var line = self.getLine(i);
|
||||
var whitespace = line.slice(0, firstNonWS(line));
|
||||
if (baseString == null || baseString.length > whitespace.length) {
|
||||
baseString = whitespace;
|
||||
}
|
||||
}
|
||||
for (var i = from.line; i < end; ++i) {
|
||||
var line = self.getLine(i), cut = baseString.length;
|
||||
if (!blankLines && !nonWS.test(line)) continue;
|
||||
if (line.slice(0, cut) != baseString) cut = firstNonWS(line);
|
||||
self.replaceRange(baseString + commentString + pad, Pos(i, 0), Pos(i, cut));
|
||||
}
|
||||
} else {
|
||||
for (var i = from.line; i < end; ++i) {
|
||||
if (blankLines || nonWS.test(self.getLine(i)))
|
||||
self.replaceRange(commentString + pad, Pos(i, 0));
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
CodeMirror.defineExtension("blockComment", function(from, to, options) {
|
||||
if (!options) options = noOptions;
|
||||
var self = this, mode = self.getModeAt(from);
|
||||
var startString = options.blockCommentStart || mode.blockCommentStart;
|
||||
var endString = options.blockCommentEnd || mode.blockCommentEnd;
|
||||
if (!startString || !endString) {
|
||||
if ((options.lineComment || mode.lineComment) && options.fullLines != false)
|
||||
self.lineComment(from, to, options);
|
||||
return;
|
||||
}
|
||||
|
||||
var end = Math.min(to.line, self.lastLine());
|
||||
if (end != from.line && to.ch == 0 && nonWS.test(self.getLine(end))) --end;
|
||||
|
||||
var pad = options.padding == null ? " " : options.padding;
|
||||
if (from.line > end) return;
|
||||
|
||||
self.operation(function() {
|
||||
if (options.fullLines != false) {
|
||||
var lastLineHasText = nonWS.test(self.getLine(end));
|
||||
self.replaceRange(pad + endString, Pos(end));
|
||||
self.replaceRange(startString + pad, Pos(from.line, 0));
|
||||
var lead = options.blockCommentLead || mode.blockCommentLead;
|
||||
if (lead != null) for (var i = from.line + 1; i <= end; ++i)
|
||||
if (i != end || lastLineHasText)
|
||||
self.replaceRange(lead + pad, Pos(i, 0));
|
||||
} else {
|
||||
self.replaceRange(endString, to);
|
||||
self.replaceRange(startString, from);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
CodeMirror.defineExtension("uncomment", function(from, to, options) {
|
||||
if (!options) options = noOptions;
|
||||
var self = this, mode = self.getModeAt(from);
|
||||
var end = Math.min(to.ch != 0 || to.line == from.line ? to.line : to.line - 1, self.lastLine()), start = Math.min(from.line, end);
|
||||
|
||||
// Try finding line comments
|
||||
var lineString = options.lineComment || mode.lineComment, lines = [];
|
||||
var pad = options.padding == null ? " " : options.padding, didSomething;
|
||||
lineComment: {
|
||||
if (!lineString) break lineComment;
|
||||
for (var i = start; i <= end; ++i) {
|
||||
var line = self.getLine(i);
|
||||
var found = line.indexOf(lineString);
|
||||
if (found > -1 && !/comment/.test(self.getTokenTypeAt(Pos(i, found + 1)))) found = -1;
|
||||
if (found == -1 && (i != end || i == start) && nonWS.test(line)) break lineComment;
|
||||
if (found > -1 && nonWS.test(line.slice(0, found))) break lineComment;
|
||||
lines.push(line);
|
||||
}
|
||||
self.operation(function() {
|
||||
for (var i = start; i <= end; ++i) {
|
||||
var line = lines[i - start];
|
||||
var pos = line.indexOf(lineString), endPos = pos + lineString.length;
|
||||
if (pos < 0) continue;
|
||||
if (line.slice(endPos, endPos + pad.length) == pad) endPos += pad.length;
|
||||
didSomething = true;
|
||||
self.replaceRange("", Pos(i, pos), Pos(i, endPos));
|
||||
}
|
||||
});
|
||||
if (didSomething) return true;
|
||||
}
|
||||
|
||||
// Try block comments
|
||||
var startString = options.blockCommentStart || mode.blockCommentStart;
|
||||
var endString = options.blockCommentEnd || mode.blockCommentEnd;
|
||||
if (!startString || !endString) return false;
|
||||
var lead = options.blockCommentLead || mode.blockCommentLead;
|
||||
var startLine = self.getLine(start), endLine = end == start ? startLine : self.getLine(end);
|
||||
var open = startLine.indexOf(startString), close = endLine.lastIndexOf(endString);
|
||||
if (close == -1 && start != end) {
|
||||
endLine = self.getLine(--end);
|
||||
close = endLine.lastIndexOf(endString);
|
||||
}
|
||||
if (open == -1 || close == -1 ||
|
||||
!/comment/.test(self.getTokenTypeAt(Pos(start, open + 1))) ||
|
||||
!/comment/.test(self.getTokenTypeAt(Pos(end, close + 1))))
|
||||
return false;
|
||||
|
||||
// Avoid killing block comments completely outside the selection.
|
||||
// Positions of the last startString before the start of the selection, and the first endString after it.
|
||||
var lastStart = startLine.lastIndexOf(startString, from.ch);
|
||||
var firstEnd = lastStart == -1 ? -1 : startLine.slice(0, from.ch).indexOf(endString, lastStart + startString.length);
|
||||
if (lastStart != -1 && firstEnd != -1 && firstEnd + endString.length != from.ch) return false;
|
||||
// Positions of the first endString after the end of the selection, and the last startString before it.
|
||||
firstEnd = endLine.indexOf(endString, to.ch);
|
||||
var almostLastStart = endLine.slice(to.ch).lastIndexOf(startString, firstEnd - to.ch);
|
||||
lastStart = (firstEnd == -1 || almostLastStart == -1) ? -1 : to.ch + almostLastStart;
|
||||
if (firstEnd != -1 && lastStart != -1 && lastStart != to.ch) return false;
|
||||
|
||||
self.operation(function() {
|
||||
self.replaceRange("", Pos(end, close - (pad && endLine.slice(close - pad.length, close) == pad ? pad.length : 0)),
|
||||
Pos(end, close + endString.length));
|
||||
var openEnd = open + startString.length;
|
||||
if (pad && startLine.slice(openEnd, openEnd + pad.length) == pad) openEnd += pad.length;
|
||||
self.replaceRange("", Pos(start, open), Pos(start, openEnd));
|
||||
if (lead) for (var i = start + 1; i <= end; ++i) {
|
||||
var line = self.getLine(i), found = line.indexOf(lead);
|
||||
if (found == -1 || nonWS.test(line.slice(0, found))) continue;
|
||||
var foundEnd = found + lead.length;
|
||||
if (pad && line.slice(foundEnd, foundEnd + pad.length) == pad) foundEnd += pad.length;
|
||||
self.replaceRange("", Pos(i, found), Pos(i, foundEnd));
|
||||
}
|
||||
});
|
||||
return true;
|
||||
});
|
||||
});
|
@@ -1,85 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
var modes = ["clike", "css", "javascript"];
|
||||
|
||||
for (var i = 0; i < modes.length; ++i)
|
||||
CodeMirror.extendMode(modes[i], {blockCommentContinue: " * "});
|
||||
|
||||
function continueComment(cm) {
|
||||
if (cm.getOption("disableInput")) return CodeMirror.Pass;
|
||||
var ranges = cm.listSelections(), mode, inserts = [];
|
||||
for (var i = 0; i < ranges.length; i++) {
|
||||
var pos = ranges[i].head, token = cm.getTokenAt(pos);
|
||||
if (token.type != "comment") return CodeMirror.Pass;
|
||||
var modeHere = CodeMirror.innerMode(cm.getMode(), token.state).mode;
|
||||
if (!mode) mode = modeHere;
|
||||
else if (mode != modeHere) return CodeMirror.Pass;
|
||||
|
||||
var insert = null;
|
||||
if (mode.blockCommentStart && mode.blockCommentContinue) {
|
||||
var end = token.string.indexOf(mode.blockCommentEnd);
|
||||
var full = cm.getRange(CodeMirror.Pos(pos.line, 0), CodeMirror.Pos(pos.line, token.end)), found;
|
||||
if (end != -1 && end == token.string.length - mode.blockCommentEnd.length && pos.ch >= end) {
|
||||
// Comment ended, don't continue it
|
||||
} else if (token.string.indexOf(mode.blockCommentStart) == 0) {
|
||||
insert = full.slice(0, token.start);
|
||||
if (!/^\s*$/.test(insert)) {
|
||||
insert = "";
|
||||
for (var j = 0; j < token.start; ++j) insert += " ";
|
||||
}
|
||||
} else if ((found = full.indexOf(mode.blockCommentContinue)) != -1 &&
|
||||
found + mode.blockCommentContinue.length > token.start &&
|
||||
/^\s*$/.test(full.slice(0, found))) {
|
||||
insert = full.slice(0, found);
|
||||
}
|
||||
if (insert != null) insert += mode.blockCommentContinue;
|
||||
}
|
||||
if (insert == null && mode.lineComment && continueLineCommentEnabled(cm)) {
|
||||
var line = cm.getLine(pos.line), found = line.indexOf(mode.lineComment);
|
||||
if (found > -1) {
|
||||
insert = line.slice(0, found);
|
||||
if (/\S/.test(insert)) insert = null;
|
||||
else insert += mode.lineComment + line.slice(found + mode.lineComment.length).match(/^\s*/)[0];
|
||||
}
|
||||
}
|
||||
if (insert == null) return CodeMirror.Pass;
|
||||
inserts[i] = "\n" + insert;
|
||||
}
|
||||
|
||||
cm.operation(function() {
|
||||
for (var i = ranges.length - 1; i >= 0; i--)
|
||||
cm.replaceRange(inserts[i], ranges[i].from(), ranges[i].to(), "+insert");
|
||||
});
|
||||
}
|
||||
|
||||
function continueLineCommentEnabled(cm) {
|
||||
var opt = cm.getOption("continueComments");
|
||||
if (opt && typeof opt == "object")
|
||||
return opt.continueLineComment !== false;
|
||||
return true;
|
||||
}
|
||||
|
||||
CodeMirror.defineOption("continueComments", null, function(cm, val, prev) {
|
||||
if (prev && prev != CodeMirror.Init)
|
||||
cm.removeKeyMap("continueComment");
|
||||
if (val) {
|
||||
var key = "Enter";
|
||||
if (typeof val == "string")
|
||||
key = val;
|
||||
else if (typeof val == "object" && val.key)
|
||||
key = val.key;
|
||||
var map = {name: "continueComment"};
|
||||
map[key] = continueComment;
|
||||
cm.addKeyMap(map);
|
||||
}
|
||||
});
|
||||
});
|
@@ -1,32 +0,0 @@
|
||||
.CodeMirror-dialog {
|
||||
position: absolute;
|
||||
left: 0; right: 0;
|
||||
background: inherit;
|
||||
z-index: 15;
|
||||
padding: .1em .8em;
|
||||
overflow: hidden;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.CodeMirror-dialog-top {
|
||||
border-bottom: 1px solid #eee;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-dialog-bottom {
|
||||
border-top: 1px solid #eee;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-dialog input {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
width: 20em;
|
||||
color: inherit;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.CodeMirror-dialog button {
|
||||
font-size: 70%;
|
||||
}
|
157
webmaker/src/lib/codemirror/addon/dialog/dialog.js
vendored
@@ -1,157 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
// Open simple dialogs on top of an editor. Relies on dialog.css.
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
function dialogDiv(cm, template, bottom) {
|
||||
var wrap = cm.getWrapperElement();
|
||||
var dialog;
|
||||
dialog = wrap.appendChild(document.createElement("div"));
|
||||
if (bottom)
|
||||
dialog.className = "CodeMirror-dialog CodeMirror-dialog-bottom";
|
||||
else
|
||||
dialog.className = "CodeMirror-dialog CodeMirror-dialog-top";
|
||||
|
||||
if (typeof template == "string") {
|
||||
dialog.innerHTML = template;
|
||||
} else { // Assuming it's a detached DOM element.
|
||||
dialog.appendChild(template);
|
||||
}
|
||||
return dialog;
|
||||
}
|
||||
|
||||
function closeNotification(cm, newVal) {
|
||||
if (cm.state.currentNotificationClose)
|
||||
cm.state.currentNotificationClose();
|
||||
cm.state.currentNotificationClose = newVal;
|
||||
}
|
||||
|
||||
CodeMirror.defineExtension("openDialog", function(template, callback, options) {
|
||||
if (!options) options = {};
|
||||
|
||||
closeNotification(this, null);
|
||||
|
||||
var dialog = dialogDiv(this, template, options.bottom);
|
||||
var closed = false, me = this;
|
||||
function close(newVal) {
|
||||
if (typeof newVal == 'string') {
|
||||
inp.value = newVal;
|
||||
} else {
|
||||
if (closed) return;
|
||||
closed = true;
|
||||
dialog.parentNode.removeChild(dialog);
|
||||
me.focus();
|
||||
|
||||
if (options.onClose) options.onClose(dialog);
|
||||
}
|
||||
}
|
||||
|
||||
var inp = dialog.getElementsByTagName("input")[0], button;
|
||||
if (inp) {
|
||||
inp.focus();
|
||||
|
||||
if (options.value) {
|
||||
inp.value = options.value;
|
||||
if (options.selectValueOnOpen !== false) {
|
||||
inp.select();
|
||||
}
|
||||
}
|
||||
|
||||
if (options.onInput)
|
||||
CodeMirror.on(inp, "input", function(e) { options.onInput(e, inp.value, close);});
|
||||
if (options.onKeyUp)
|
||||
CodeMirror.on(inp, "keyup", function(e) {options.onKeyUp(e, inp.value, close);});
|
||||
|
||||
CodeMirror.on(inp, "keydown", function(e) {
|
||||
if (options && options.onKeyDown && options.onKeyDown(e, inp.value, close)) { return; }
|
||||
if (e.keyCode == 27 || (options.closeOnEnter !== false && e.keyCode == 13)) {
|
||||
inp.blur();
|
||||
CodeMirror.e_stop(e);
|
||||
close();
|
||||
}
|
||||
if (e.keyCode == 13) callback(inp.value, e);
|
||||
});
|
||||
|
||||
if (options.closeOnBlur !== false) CodeMirror.on(inp, "blur", close);
|
||||
} else if (button = dialog.getElementsByTagName("button")[0]) {
|
||||
CodeMirror.on(button, "click", function() {
|
||||
close();
|
||||
me.focus();
|
||||
});
|
||||
|
||||
if (options.closeOnBlur !== false) CodeMirror.on(button, "blur", close);
|
||||
|
||||
button.focus();
|
||||
}
|
||||
return close;
|
||||
});
|
||||
|
||||
CodeMirror.defineExtension("openConfirm", function(template, callbacks, options) {
|
||||
closeNotification(this, null);
|
||||
var dialog = dialogDiv(this, template, options && options.bottom);
|
||||
var buttons = dialog.getElementsByTagName("button");
|
||||
var closed = false, me = this, blurring = 1;
|
||||
function close() {
|
||||
if (closed) return;
|
||||
closed = true;
|
||||
dialog.parentNode.removeChild(dialog);
|
||||
me.focus();
|
||||
}
|
||||
buttons[0].focus();
|
||||
for (var i = 0; i < buttons.length; ++i) {
|
||||
var b = buttons[i];
|
||||
(function(callback) {
|
||||
CodeMirror.on(b, "click", function(e) {
|
||||
CodeMirror.e_preventDefault(e);
|
||||
close();
|
||||
if (callback) callback(me);
|
||||
});
|
||||
})(callbacks[i]);
|
||||
CodeMirror.on(b, "blur", function() {
|
||||
--blurring;
|
||||
setTimeout(function() { if (blurring <= 0) close(); }, 200);
|
||||
});
|
||||
CodeMirror.on(b, "focus", function() { ++blurring; });
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* openNotification
|
||||
* Opens a notification, that can be closed with an optional timer
|
||||
* (default 5000ms timer) and always closes on click.
|
||||
*
|
||||
* If a notification is opened while another is opened, it will close the
|
||||
* currently opened one and open the new one immediately.
|
||||
*/
|
||||
CodeMirror.defineExtension("openNotification", function(template, options) {
|
||||
closeNotification(this, close);
|
||||
var dialog = dialogDiv(this, template, options && options.bottom);
|
||||
var closed = false, doneTimer;
|
||||
var duration = options && typeof options.duration !== "undefined" ? options.duration : 5000;
|
||||
|
||||
function close() {
|
||||
if (closed) return;
|
||||
closed = true;
|
||||
clearTimeout(doneTimer);
|
||||
dialog.parentNode.removeChild(dialog);
|
||||
}
|
||||
|
||||
CodeMirror.on(dialog, 'click', function(e) {
|
||||
CodeMirror.e_preventDefault(e);
|
||||
close();
|
||||
});
|
||||
|
||||
if (duration)
|
||||
doneTimer = setTimeout(close, duration);
|
||||
|
||||
return close;
|
||||
});
|
||||
});
|
@@ -1,47 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"))
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod)
|
||||
else // Plain browser env
|
||||
mod(CodeMirror)
|
||||
})(function(CodeMirror) {
|
||||
"use strict"
|
||||
|
||||
CodeMirror.defineOption("autoRefresh", false, function(cm, val) {
|
||||
if (cm.state.autoRefresh) {
|
||||
stopListening(cm, cm.state.autoRefresh)
|
||||
cm.state.autoRefresh = null
|
||||
}
|
||||
if (val && cm.display.wrapper.offsetHeight == 0)
|
||||
startListening(cm, cm.state.autoRefresh = {delay: val.delay || 250})
|
||||
})
|
||||
|
||||
function startListening(cm, state) {
|
||||
function check() {
|
||||
if (cm.display.wrapper.offsetHeight) {
|
||||
stopListening(cm, state)
|
||||
if (cm.display.lastWrapHeight != cm.display.wrapper.clientHeight)
|
||||
cm.refresh()
|
||||
} else {
|
||||
state.timeout = setTimeout(check, state.delay)
|
||||
}
|
||||
}
|
||||
state.timeout = setTimeout(check, state.delay)
|
||||
state.hurry = function() {
|
||||
clearTimeout(state.timeout)
|
||||
state.timeout = setTimeout(check, 50)
|
||||
}
|
||||
CodeMirror.on(window, "mouseup", state.hurry)
|
||||
CodeMirror.on(window, "keyup", state.hurry)
|
||||
}
|
||||
|
||||
function stopListening(_cm, state) {
|
||||
clearTimeout(state.timeout)
|
||||
CodeMirror.off(window, "mouseup", state.hurry)
|
||||
CodeMirror.off(window, "keyup", state.hurry)
|
||||
}
|
||||
});
|
@@ -1,6 +0,0 @@
|
||||
.CodeMirror-fullscreen {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
height: auto;
|
||||
z-index: 9;
|
||||
}
|
@@ -1,41 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
CodeMirror.defineOption("fullScreen", false, function(cm, val, old) {
|
||||
if (old == CodeMirror.Init) old = false;
|
||||
if (!old == !val) return;
|
||||
if (val) setFullscreen(cm);
|
||||
else setNormal(cm);
|
||||
});
|
||||
|
||||
function setFullscreen(cm) {
|
||||
var wrap = cm.getWrapperElement();
|
||||
cm.state.fullScreenRestore = {scrollTop: window.pageYOffset, scrollLeft: window.pageXOffset,
|
||||
width: wrap.style.width, height: wrap.style.height};
|
||||
wrap.style.width = "";
|
||||
wrap.style.height = "auto";
|
||||
wrap.className += " CodeMirror-fullscreen";
|
||||
document.documentElement.style.overflow = "hidden";
|
||||
cm.refresh();
|
||||
}
|
||||
|
||||
function setNormal(cm) {
|
||||
var wrap = cm.getWrapperElement();
|
||||
wrap.className = wrap.className.replace(/\s*CodeMirror-fullscreen\b/, "");
|
||||
document.documentElement.style.overflow = "";
|
||||
var info = cm.state.fullScreenRestore;
|
||||
wrap.style.width = info.width; wrap.style.height = info.height;
|
||||
window.scrollTo(info.scrollLeft, info.scrollTop);
|
||||
cm.refresh();
|
||||
}
|
||||
});
|
112
webmaker/src/lib/codemirror/addon/display/panel.js
vendored
@@ -1,112 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
CodeMirror.defineExtension("addPanel", function(node, options) {
|
||||
options = options || {};
|
||||
|
||||
if (!this.state.panels) initPanels(this);
|
||||
|
||||
var info = this.state.panels;
|
||||
var wrapper = info.wrapper;
|
||||
var cmWrapper = this.getWrapperElement();
|
||||
|
||||
if (options.after instanceof Panel && !options.after.cleared) {
|
||||
wrapper.insertBefore(node, options.before.node.nextSibling);
|
||||
} else if (options.before instanceof Panel && !options.before.cleared) {
|
||||
wrapper.insertBefore(node, options.before.node);
|
||||
} else if (options.replace instanceof Panel && !options.replace.cleared) {
|
||||
wrapper.insertBefore(node, options.replace.node);
|
||||
options.replace.clear();
|
||||
} else if (options.position == "bottom") {
|
||||
wrapper.appendChild(node);
|
||||
} else if (options.position == "before-bottom") {
|
||||
wrapper.insertBefore(node, cmWrapper.nextSibling);
|
||||
} else if (options.position == "after-top") {
|
||||
wrapper.insertBefore(node, cmWrapper);
|
||||
} else {
|
||||
wrapper.insertBefore(node, wrapper.firstChild);
|
||||
}
|
||||
|
||||
var height = (options && options.height) || node.offsetHeight;
|
||||
this._setSize(null, info.heightLeft -= height);
|
||||
info.panels++;
|
||||
return new Panel(this, node, options, height);
|
||||
});
|
||||
|
||||
function Panel(cm, node, options, height) {
|
||||
this.cm = cm;
|
||||
this.node = node;
|
||||
this.options = options;
|
||||
this.height = height;
|
||||
this.cleared = false;
|
||||
}
|
||||
|
||||
Panel.prototype.clear = function() {
|
||||
if (this.cleared) return;
|
||||
this.cleared = true;
|
||||
var info = this.cm.state.panels;
|
||||
this.cm._setSize(null, info.heightLeft += this.height);
|
||||
info.wrapper.removeChild(this.node);
|
||||
if (--info.panels == 0) removePanels(this.cm);
|
||||
};
|
||||
|
||||
Panel.prototype.changed = function(height) {
|
||||
var newHeight = height == null ? this.node.offsetHeight : height;
|
||||
var info = this.cm.state.panels;
|
||||
this.cm._setSize(null, info.height += (newHeight - this.height));
|
||||
this.height = newHeight;
|
||||
};
|
||||
|
||||
function initPanels(cm) {
|
||||
var wrap = cm.getWrapperElement();
|
||||
var style = window.getComputedStyle ? window.getComputedStyle(wrap) : wrap.currentStyle;
|
||||
var height = parseInt(style.height);
|
||||
var info = cm.state.panels = {
|
||||
setHeight: wrap.style.height,
|
||||
heightLeft: height,
|
||||
panels: 0,
|
||||
wrapper: document.createElement("div")
|
||||
};
|
||||
wrap.parentNode.insertBefore(info.wrapper, wrap);
|
||||
var hasFocus = cm.hasFocus();
|
||||
info.wrapper.appendChild(wrap);
|
||||
if (hasFocus) cm.focus();
|
||||
|
||||
cm._setSize = cm.setSize;
|
||||
if (height != null) cm.setSize = function(width, newHeight) {
|
||||
if (newHeight == null) return this._setSize(width, newHeight);
|
||||
info.setHeight = newHeight;
|
||||
if (typeof newHeight != "number") {
|
||||
var px = /^(\d+\.?\d*)px$/.exec(newHeight);
|
||||
if (px) {
|
||||
newHeight = Number(px[1]);
|
||||
} else {
|
||||
info.wrapper.style.height = newHeight;
|
||||
newHeight = info.wrapper.offsetHeight;
|
||||
info.wrapper.style.height = "";
|
||||
}
|
||||
}
|
||||
cm._setSize(width, info.heightLeft += (newHeight - height));
|
||||
height = newHeight;
|
||||
};
|
||||
}
|
||||
|
||||
function removePanels(cm) {
|
||||
var info = cm.state.panels;
|
||||
cm.state.panels = null;
|
||||
|
||||
var wrap = cm.getWrapperElement();
|
||||
info.wrapper.parentNode.replaceChild(wrap, info.wrapper);
|
||||
wrap.style.height = info.setHeight;
|
||||
cm.setSize = cm._setSize;
|
||||
cm.setSize();
|
||||
}
|
||||
});
|
@@ -1,62 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
CodeMirror.defineOption("placeholder", "", function(cm, val, old) {
|
||||
var prev = old && old != CodeMirror.Init;
|
||||
if (val && !prev) {
|
||||
cm.on("blur", onBlur);
|
||||
cm.on("change", onChange);
|
||||
cm.on("swapDoc", onChange);
|
||||
onChange(cm);
|
||||
} else if (!val && prev) {
|
||||
cm.off("blur", onBlur);
|
||||
cm.off("change", onChange);
|
||||
cm.off("swapDoc", onChange);
|
||||
clearPlaceholder(cm);
|
||||
var wrapper = cm.getWrapperElement();
|
||||
wrapper.className = wrapper.className.replace(" CodeMirror-empty", "");
|
||||
}
|
||||
|
||||
if (val && !cm.hasFocus()) onBlur(cm);
|
||||
});
|
||||
|
||||
function clearPlaceholder(cm) {
|
||||
if (cm.state.placeholder) {
|
||||
cm.state.placeholder.parentNode.removeChild(cm.state.placeholder);
|
||||
cm.state.placeholder = null;
|
||||
}
|
||||
}
|
||||
function setPlaceholder(cm) {
|
||||
clearPlaceholder(cm);
|
||||
var elt = cm.state.placeholder = document.createElement("pre");
|
||||
elt.style.cssText = "height: 0; overflow: visible";
|
||||
elt.className = "CodeMirror-placeholder";
|
||||
var placeHolder = cm.getOption("placeholder")
|
||||
if (typeof placeHolder == "string") placeHolder = document.createTextNode(placeHolder)
|
||||
elt.appendChild(placeHolder)
|
||||
cm.display.lineSpace.insertBefore(elt, cm.display.lineSpace.firstChild);
|
||||
}
|
||||
|
||||
function onBlur(cm) {
|
||||
if (isEmpty(cm)) setPlaceholder(cm);
|
||||
}
|
||||
function onChange(cm) {
|
||||
var wrapper = cm.getWrapperElement(), empty = isEmpty(cm);
|
||||
wrapper.className = wrapper.className.replace(" CodeMirror-empty", "") + (empty ? " CodeMirror-empty" : "");
|
||||
|
||||
if (empty) setPlaceholder(cm);
|
||||
else clearPlaceholder(cm);
|
||||
}
|
||||
|
||||
function isEmpty(cm) {
|
||||
return (cm.lineCount() === 1) && (cm.getLine(0) === "");
|
||||
}
|
||||
});
|
@@ -1,63 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
CodeMirror.defineOption("rulers", false, function(cm, val, old) {
|
||||
if (old && old != CodeMirror.Init) {
|
||||
clearRulers(cm);
|
||||
cm.off("refresh", refreshRulers);
|
||||
}
|
||||
if (val && val.length) {
|
||||
setRulers(cm);
|
||||
cm.on("refresh", refreshRulers);
|
||||
}
|
||||
});
|
||||
|
||||
function clearRulers(cm) {
|
||||
for (var i = cm.display.lineSpace.childNodes.length - 1; i >= 0; i--) {
|
||||
var node = cm.display.lineSpace.childNodes[i];
|
||||
if (/(^|\s)CodeMirror-ruler($|\s)/.test(node.className))
|
||||
node.parentNode.removeChild(node);
|
||||
}
|
||||
}
|
||||
|
||||
function setRulers(cm) {
|
||||
var val = cm.getOption("rulers");
|
||||
var cw = cm.defaultCharWidth();
|
||||
var left = cm.charCoords(CodeMirror.Pos(cm.firstLine(), 0), "div").left;
|
||||
var minH = cm.display.scroller.offsetHeight + 30;
|
||||
for (var i = 0; i < val.length; i++) {
|
||||
var elt = document.createElement("div");
|
||||
elt.className = "CodeMirror-ruler";
|
||||
var col, conf = val[i];
|
||||
if (typeof conf == "number") {
|
||||
col = conf;
|
||||
} else {
|
||||
col = conf.column;
|
||||
if (conf.className) elt.className += " " + conf.className;
|
||||
if (conf.color) elt.style.borderColor = conf.color;
|
||||
if (conf.lineStyle) elt.style.borderLeftStyle = conf.lineStyle;
|
||||
if (conf.width) elt.style.borderLeftWidth = conf.width;
|
||||
}
|
||||
elt.style.left = (left + col * cw) + "px";
|
||||
elt.style.top = "-50px";
|
||||
elt.style.bottom = "-20px";
|
||||
elt.style.minHeight = minH + "px";
|
||||
cm.display.lineSpace.insertBefore(elt, cm.display.cursorDiv);
|
||||
}
|
||||
}
|
||||
|
||||
function refreshRulers(cm) {
|
||||
clearRulers(cm);
|
||||
setRulers(cm);
|
||||
}
|
||||
});
|
@@ -1,195 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
var defaults = {
|
||||
pairs: "()[]{}''\"\"",
|
||||
triples: "",
|
||||
explode: "[]{}"
|
||||
};
|
||||
|
||||
var Pos = CodeMirror.Pos;
|
||||
|
||||
CodeMirror.defineOption("autoCloseBrackets", false, function(cm, val, old) {
|
||||
if (old && old != CodeMirror.Init) {
|
||||
cm.removeKeyMap(keyMap);
|
||||
cm.state.closeBrackets = null;
|
||||
}
|
||||
if (val) {
|
||||
cm.state.closeBrackets = val;
|
||||
cm.addKeyMap(keyMap);
|
||||
}
|
||||
});
|
||||
|
||||
function getOption(conf, name) {
|
||||
if (name == "pairs" && typeof conf == "string") return conf;
|
||||
if (typeof conf == "object" && conf[name] != null) return conf[name];
|
||||
return defaults[name];
|
||||
}
|
||||
|
||||
var bind = defaults.pairs + "`";
|
||||
var keyMap = {Backspace: handleBackspace, Enter: handleEnter};
|
||||
for (var i = 0; i < bind.length; i++)
|
||||
keyMap["'" + bind.charAt(i) + "'"] = handler(bind.charAt(i));
|
||||
|
||||
function handler(ch) {
|
||||
return function(cm) { return handleChar(cm, ch); };
|
||||
}
|
||||
|
||||
function getConfig(cm) {
|
||||
var deflt = cm.state.closeBrackets;
|
||||
if (!deflt) return null;
|
||||
var mode = cm.getModeAt(cm.getCursor());
|
||||
return mode.closeBrackets || deflt;
|
||||
}
|
||||
|
||||
function handleBackspace(cm) {
|
||||
var conf = getConfig(cm);
|
||||
if (!conf || cm.getOption("disableInput")) return CodeMirror.Pass;
|
||||
|
||||
var pairs = getOption(conf, "pairs");
|
||||
var ranges = cm.listSelections();
|
||||
for (var i = 0; i < ranges.length; i++) {
|
||||
if (!ranges[i].empty()) return CodeMirror.Pass;
|
||||
var around = charsAround(cm, ranges[i].head);
|
||||
if (!around || pairs.indexOf(around) % 2 != 0) return CodeMirror.Pass;
|
||||
}
|
||||
for (var i = ranges.length - 1; i >= 0; i--) {
|
||||
var cur = ranges[i].head;
|
||||
cm.replaceRange("", Pos(cur.line, cur.ch - 1), Pos(cur.line, cur.ch + 1), "+delete");
|
||||
}
|
||||
}
|
||||
|
||||
function handleEnter(cm) {
|
||||
var conf = getConfig(cm);
|
||||
var explode = conf && getOption(conf, "explode");
|
||||
if (!explode || cm.getOption("disableInput")) return CodeMirror.Pass;
|
||||
|
||||
var ranges = cm.listSelections();
|
||||
for (var i = 0; i < ranges.length; i++) {
|
||||
if (!ranges[i].empty()) return CodeMirror.Pass;
|
||||
var around = charsAround(cm, ranges[i].head);
|
||||
if (!around || explode.indexOf(around) % 2 != 0) return CodeMirror.Pass;
|
||||
}
|
||||
cm.operation(function() {
|
||||
cm.replaceSelection("\n\n", null);
|
||||
cm.execCommand("goCharLeft");
|
||||
ranges = cm.listSelections();
|
||||
for (var i = 0; i < ranges.length; i++) {
|
||||
var line = ranges[i].head.line;
|
||||
cm.indentLine(line, null, true);
|
||||
cm.indentLine(line + 1, null, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function contractSelection(sel) {
|
||||
var inverted = CodeMirror.cmpPos(sel.anchor, sel.head) > 0;
|
||||
return {anchor: new Pos(sel.anchor.line, sel.anchor.ch + (inverted ? -1 : 1)),
|
||||
head: new Pos(sel.head.line, sel.head.ch + (inverted ? 1 : -1))};
|
||||
}
|
||||
|
||||
function handleChar(cm, ch) {
|
||||
var conf = getConfig(cm);
|
||||
if (!conf || cm.getOption("disableInput")) return CodeMirror.Pass;
|
||||
|
||||
var pairs = getOption(conf, "pairs");
|
||||
var pos = pairs.indexOf(ch);
|
||||
if (pos == -1) return CodeMirror.Pass;
|
||||
var triples = getOption(conf, "triples");
|
||||
|
||||
var identical = pairs.charAt(pos + 1) == ch;
|
||||
var ranges = cm.listSelections();
|
||||
var opening = pos % 2 == 0;
|
||||
|
||||
var type, next;
|
||||
for (var i = 0; i < ranges.length; i++) {
|
||||
var range = ranges[i], cur = range.head, curType;
|
||||
var next = cm.getRange(cur, Pos(cur.line, cur.ch + 1));
|
||||
if (opening && !range.empty()) {
|
||||
curType = "surround";
|
||||
} else if ((identical || !opening) && next == ch) {
|
||||
if (triples.indexOf(ch) >= 0 && cm.getRange(cur, Pos(cur.line, cur.ch + 3)) == ch + ch + ch)
|
||||
curType = "skipThree";
|
||||
else
|
||||
curType = "skip";
|
||||
} else if (identical && cur.ch > 1 && triples.indexOf(ch) >= 0 &&
|
||||
cm.getRange(Pos(cur.line, cur.ch - 2), cur) == ch + ch &&
|
||||
(cur.ch <= 2 || cm.getRange(Pos(cur.line, cur.ch - 3), Pos(cur.line, cur.ch - 2)) != ch)) {
|
||||
curType = "addFour";
|
||||
} else if (identical) {
|
||||
if (!CodeMirror.isWordChar(next) && enteringString(cm, cur, ch)) curType = "both";
|
||||
else return CodeMirror.Pass;
|
||||
} else if (opening && (cm.getLine(cur.line).length == cur.ch ||
|
||||
isClosingBracket(next, pairs) ||
|
||||
/\s/.test(next))) {
|
||||
curType = "both";
|
||||
} else {
|
||||
return CodeMirror.Pass;
|
||||
}
|
||||
if (!type) type = curType;
|
||||
else if (type != curType) return CodeMirror.Pass;
|
||||
}
|
||||
|
||||
var left = pos % 2 ? pairs.charAt(pos - 1) : ch;
|
||||
var right = pos % 2 ? ch : pairs.charAt(pos + 1);
|
||||
cm.operation(function() {
|
||||
if (type == "skip") {
|
||||
cm.execCommand("goCharRight");
|
||||
} else if (type == "skipThree") {
|
||||
for (var i = 0; i < 3; i++)
|
||||
cm.execCommand("goCharRight");
|
||||
} else if (type == "surround") {
|
||||
var sels = cm.getSelections();
|
||||
for (var i = 0; i < sels.length; i++)
|
||||
sels[i] = left + sels[i] + right;
|
||||
cm.replaceSelections(sels, "around");
|
||||
sels = cm.listSelections().slice();
|
||||
for (var i = 0; i < sels.length; i++)
|
||||
sels[i] = contractSelection(sels[i]);
|
||||
cm.setSelections(sels);
|
||||
} else if (type == "both") {
|
||||
cm.replaceSelection(left + right, null);
|
||||
cm.triggerElectric(left + right);
|
||||
cm.execCommand("goCharLeft");
|
||||
} else if (type == "addFour") {
|
||||
cm.replaceSelection(left + left + left + left, "before");
|
||||
cm.execCommand("goCharRight");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function isClosingBracket(ch, pairs) {
|
||||
var pos = pairs.lastIndexOf(ch);
|
||||
return pos > -1 && pos % 2 == 1;
|
||||
}
|
||||
|
||||
function charsAround(cm, pos) {
|
||||
var str = cm.getRange(Pos(pos.line, pos.ch - 1),
|
||||
Pos(pos.line, pos.ch + 1));
|
||||
return str.length == 2 ? str : null;
|
||||
}
|
||||
|
||||
// Project the token type that will exists after the given char is
|
||||
// typed, and use it to determine whether it would cause the start
|
||||
// of a string token.
|
||||
function enteringString(cm, pos, ch) {
|
||||
var line = cm.getLine(pos.line);
|
||||
var token = cm.getTokenAt(pos);
|
||||
if (/\bstring2?\b/.test(token.type)) return false;
|
||||
var stream = new CodeMirror.StringStream(line.slice(0, pos.ch) + ch + line.slice(pos.ch), 4);
|
||||
stream.pos = stream.start = token.start;
|
||||
for (;;) {
|
||||
var type1 = cm.getMode().token(stream, token.state);
|
||||
if (stream.pos >= pos.ch + 1) return /\bstring2?\b/.test(type1);
|
||||
stream.start = stream.pos;
|
||||
}
|
||||
}
|
||||
});
|
169
webmaker/src/lib/codemirror/addon/edit/closetag.js
vendored
@@ -1,169 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
/**
|
||||
* Tag-closer extension for CodeMirror.
|
||||
*
|
||||
* This extension adds an "autoCloseTags" option that can be set to
|
||||
* either true to get the default behavior, or an object to further
|
||||
* configure its behavior.
|
||||
*
|
||||
* These are supported options:
|
||||
*
|
||||
* `whenClosing` (default true)
|
||||
* Whether to autoclose when the '/' of a closing tag is typed.
|
||||
* `whenOpening` (default true)
|
||||
* Whether to autoclose the tag when the final '>' of an opening
|
||||
* tag is typed.
|
||||
* `dontCloseTags` (default is empty tags for HTML, none for XML)
|
||||
* An array of tag names that should not be autoclosed.
|
||||
* `indentTags` (default is block tags for HTML, none for XML)
|
||||
* An array of tag names that should, when opened, cause a
|
||||
* blank line to be added inside the tag, and the blank line and
|
||||
* closing line to be indented.
|
||||
*
|
||||
* See demos/closetag.html for a usage example.
|
||||
*/
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"), require("../fold/xml-fold"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror", "../fold/xml-fold"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
CodeMirror.defineOption("autoCloseTags", false, function(cm, val, old) {
|
||||
if (old != CodeMirror.Init && old)
|
||||
cm.removeKeyMap("autoCloseTags");
|
||||
if (!val) return;
|
||||
var map = {name: "autoCloseTags"};
|
||||
if (typeof val != "object" || val.whenClosing)
|
||||
map["'/'"] = function(cm) { return autoCloseSlash(cm); };
|
||||
if (typeof val != "object" || val.whenOpening)
|
||||
map["'>'"] = function(cm) { return autoCloseGT(cm); };
|
||||
cm.addKeyMap(map);
|
||||
});
|
||||
|
||||
var htmlDontClose = ["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "meta", "param",
|
||||
"source", "track", "wbr"];
|
||||
var htmlIndent = ["applet", "blockquote", "body", "button", "div", "dl", "fieldset", "form", "frameset", "h1", "h2", "h3", "h4",
|
||||
"h5", "h6", "head", "html", "iframe", "layer", "legend", "object", "ol", "p", "select", "table", "ul"];
|
||||
|
||||
function autoCloseGT(cm) {
|
||||
if (cm.getOption("disableInput")) return CodeMirror.Pass;
|
||||
var ranges = cm.listSelections(), replacements = [];
|
||||
for (var i = 0; i < ranges.length; i++) {
|
||||
if (!ranges[i].empty()) return CodeMirror.Pass;
|
||||
var pos = ranges[i].head, tok = cm.getTokenAt(pos);
|
||||
var inner = CodeMirror.innerMode(cm.getMode(), tok.state), state = inner.state;
|
||||
if (inner.mode.name != "xml" || !state.tagName) return CodeMirror.Pass;
|
||||
|
||||
var opt = cm.getOption("autoCloseTags"), html = inner.mode.configuration == "html";
|
||||
var dontCloseTags = (typeof opt == "object" && opt.dontCloseTags) || (html && htmlDontClose);
|
||||
var indentTags = (typeof opt == "object" && opt.indentTags) || (html && htmlIndent);
|
||||
|
||||
var tagName = state.tagName;
|
||||
if (tok.end > pos.ch) tagName = tagName.slice(0, tagName.length - tok.end + pos.ch);
|
||||
var lowerTagName = tagName.toLowerCase();
|
||||
// Don't process the '>' at the end of an end-tag or self-closing tag
|
||||
if (!tagName ||
|
||||
tok.type == "string" && (tok.end != pos.ch || !/[\"\']/.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length == 1) ||
|
||||
tok.type == "tag" && state.type == "closeTag" ||
|
||||
tok.string.indexOf("/") == (tok.string.length - 1) || // match something like <someTagName />
|
||||
dontCloseTags && indexOf(dontCloseTags, lowerTagName) > -1 ||
|
||||
closingTagExists(cm, tagName, pos, state, true))
|
||||
return CodeMirror.Pass;
|
||||
|
||||
var indent = indentTags && indexOf(indentTags, lowerTagName) > -1;
|
||||
replacements[i] = {indent: indent,
|
||||
text: ">" + (indent ? "\n\n" : "") + "</" + tagName + ">",
|
||||
newPos: indent ? CodeMirror.Pos(pos.line + 1, 0) : CodeMirror.Pos(pos.line, pos.ch + 1)};
|
||||
}
|
||||
|
||||
for (var i = ranges.length - 1; i >= 0; i--) {
|
||||
var info = replacements[i];
|
||||
cm.replaceRange(info.text, ranges[i].head, ranges[i].anchor, "+insert");
|
||||
var sel = cm.listSelections().slice(0);
|
||||
sel[i] = {head: info.newPos, anchor: info.newPos};
|
||||
cm.setSelections(sel);
|
||||
if (info.indent) {
|
||||
cm.indentLine(info.newPos.line, null, true);
|
||||
cm.indentLine(info.newPos.line + 1, null, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function autoCloseCurrent(cm, typingSlash) {
|
||||
var ranges = cm.listSelections(), replacements = [];
|
||||
var head = typingSlash ? "/" : "</";
|
||||
for (var i = 0; i < ranges.length; i++) {
|
||||
if (!ranges[i].empty()) return CodeMirror.Pass;
|
||||
var pos = ranges[i].head, tok = cm.getTokenAt(pos);
|
||||
var inner = CodeMirror.innerMode(cm.getMode(), tok.state), state = inner.state;
|
||||
if (typingSlash && (tok.type == "string" || tok.string.charAt(0) != "<" ||
|
||||
tok.start != pos.ch - 1))
|
||||
return CodeMirror.Pass;
|
||||
// Kludge to get around the fact that we are not in XML mode
|
||||
// when completing in JS/CSS snippet in htmlmixed mode. Does not
|
||||
// work for other XML embedded languages (there is no general
|
||||
// way to go from a mixed mode to its current XML state).
|
||||
var replacement;
|
||||
if (inner.mode.name != "xml") {
|
||||
if (cm.getMode().name == "htmlmixed" && inner.mode.name == "javascript")
|
||||
replacement = head + "script";
|
||||
else if (cm.getMode().name == "htmlmixed" && inner.mode.name == "css")
|
||||
replacement = head + "style";
|
||||
else
|
||||
return CodeMirror.Pass;
|
||||
} else {
|
||||
if (!state.context || !state.context.tagName ||
|
||||
closingTagExists(cm, state.context.tagName, pos, state))
|
||||
return CodeMirror.Pass;
|
||||
replacement = head + state.context.tagName;
|
||||
}
|
||||
if (cm.getLine(pos.line).charAt(tok.end) != ">") replacement += ">";
|
||||
replacements[i] = replacement;
|
||||
}
|
||||
cm.replaceSelections(replacements);
|
||||
ranges = cm.listSelections();
|
||||
for (var i = 0; i < ranges.length; i++)
|
||||
if (i == ranges.length - 1 || ranges[i].head.line < ranges[i + 1].head.line)
|
||||
cm.indentLine(ranges[i].head.line);
|
||||
}
|
||||
|
||||
function autoCloseSlash(cm) {
|
||||
if (cm.getOption("disableInput")) return CodeMirror.Pass;
|
||||
return autoCloseCurrent(cm, true);
|
||||
}
|
||||
|
||||
CodeMirror.commands.closeTag = function(cm) { return autoCloseCurrent(cm); };
|
||||
|
||||
function indexOf(collection, elt) {
|
||||
if (collection.indexOf) return collection.indexOf(elt);
|
||||
for (var i = 0, e = collection.length; i < e; ++i)
|
||||
if (collection[i] == elt) return i;
|
||||
return -1;
|
||||
}
|
||||
|
||||
// If xml-fold is loaded, we use its functionality to try and verify
|
||||
// whether a given tag is actually unclosed.
|
||||
function closingTagExists(cm, tagName, pos, state, newTag) {
|
||||
if (!CodeMirror.scanForClosingTag) return false;
|
||||
var end = Math.min(cm.lastLine() + 1, pos.line + 500);
|
||||
var nextClose = CodeMirror.scanForClosingTag(cm, pos, null, end);
|
||||
if (!nextClose || nextClose.tag != tagName) return false;
|
||||
var cx = state.context;
|
||||
// If the immediate wrapping context contains onCx instances of
|
||||
// the same tag, a closing tag only exists if there are at least
|
||||
// that many closing tags of that type following.
|
||||
for (var onCx = newTag ? 1 : 0; cx && cx.tagName == tagName; cx = cx.prev) ++onCx;
|
||||
pos = nextClose.to;
|
||||
for (var i = 1; i < onCx; i++) {
|
||||
var next = CodeMirror.scanForClosingTag(cm, pos, null, end);
|
||||
if (!next || next.tag != tagName) return false;
|
||||
pos = next.to;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
@@ -1,51 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
var listRE = /^(\s*)(>[> ]*|[*+-]\s|(\d+)([.)]))(\s*)/,
|
||||
emptyListRE = /^(\s*)(>[> ]*|[*+-]|(\d+)[.)])(\s*)$/,
|
||||
unorderedListRE = /[*+-]\s/;
|
||||
|
||||
CodeMirror.commands.newlineAndIndentContinueMarkdownList = function(cm) {
|
||||
if (cm.getOption("disableInput")) return CodeMirror.Pass;
|
||||
var ranges = cm.listSelections(), replacements = [];
|
||||
for (var i = 0; i < ranges.length; i++) {
|
||||
var pos = ranges[i].head;
|
||||
var eolState = cm.getStateAfter(pos.line);
|
||||
var inList = eolState.list !== false;
|
||||
var inQuote = eolState.quote !== 0;
|
||||
|
||||
var line = cm.getLine(pos.line), match = listRE.exec(line);
|
||||
if (!ranges[i].empty() || (!inList && !inQuote) || !match) {
|
||||
cm.execCommand("newlineAndIndent");
|
||||
return;
|
||||
}
|
||||
if (emptyListRE.test(line)) {
|
||||
cm.replaceRange("", {
|
||||
line: pos.line, ch: 0
|
||||
}, {
|
||||
line: pos.line, ch: pos.ch + 1
|
||||
});
|
||||
replacements[i] = "\n";
|
||||
} else {
|
||||
var indent = match[1], after = match[5];
|
||||
var bullet = unorderedListRE.test(match[2]) || match[2].indexOf(">") >= 0
|
||||
? match[2]
|
||||
: (parseInt(match[3], 10) + 1) + match[4];
|
||||
|
||||
replacements[i] = "\n" + indent + bullet + after;
|
||||
}
|
||||
}
|
||||
|
||||
cm.replaceSelections(replacements);
|
||||
};
|
||||
});
|
@@ -1,120 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
var ie_lt8 = /MSIE \d/.test(navigator.userAgent) &&
|
||||
(document.documentMode == null || document.documentMode < 8);
|
||||
|
||||
var Pos = CodeMirror.Pos;
|
||||
|
||||
var matching = {"(": ")>", ")": "(<", "[": "]>", "]": "[<", "{": "}>", "}": "{<"};
|
||||
|
||||
function findMatchingBracket(cm, where, strict, config) {
|
||||
var line = cm.getLineHandle(where.line), pos = where.ch - 1;
|
||||
var match = (pos >= 0 && matching[line.text.charAt(pos)]) || matching[line.text.charAt(++pos)];
|
||||
if (!match) return null;
|
||||
var dir = match.charAt(1) == ">" ? 1 : -1;
|
||||
if (strict && (dir > 0) != (pos == where.ch)) return null;
|
||||
var style = cm.getTokenTypeAt(Pos(where.line, pos + 1));
|
||||
|
||||
var found = scanForBracket(cm, Pos(where.line, pos + (dir > 0 ? 1 : 0)), dir, style || null, config);
|
||||
if (found == null) return null;
|
||||
return {from: Pos(where.line, pos), to: found && found.pos,
|
||||
match: found && found.ch == match.charAt(0), forward: dir > 0};
|
||||
}
|
||||
|
||||
// bracketRegex is used to specify which type of bracket to scan
|
||||
// should be a regexp, e.g. /[[\]]/
|
||||
//
|
||||
// Note: If "where" is on an open bracket, then this bracket is ignored.
|
||||
//
|
||||
// Returns false when no bracket was found, null when it reached
|
||||
// maxScanLines and gave up
|
||||
function scanForBracket(cm, where, dir, style, config) {
|
||||
var maxScanLen = (config && config.maxScanLineLength) || 10000;
|
||||
var maxScanLines = (config && config.maxScanLines) || 1000;
|
||||
|
||||
var stack = [];
|
||||
var re = config && config.bracketRegex ? config.bracketRegex : /[(){}[\]]/;
|
||||
var lineEnd = dir > 0 ? Math.min(where.line + maxScanLines, cm.lastLine() + 1)
|
||||
: Math.max(cm.firstLine() - 1, where.line - maxScanLines);
|
||||
for (var lineNo = where.line; lineNo != lineEnd; lineNo += dir) {
|
||||
var line = cm.getLine(lineNo);
|
||||
if (!line) continue;
|
||||
var pos = dir > 0 ? 0 : line.length - 1, end = dir > 0 ? line.length : -1;
|
||||
if (line.length > maxScanLen) continue;
|
||||
if (lineNo == where.line) pos = where.ch - (dir < 0 ? 1 : 0);
|
||||
for (; pos != end; pos += dir) {
|
||||
var ch = line.charAt(pos);
|
||||
if (re.test(ch) && (style === undefined || cm.getTokenTypeAt(Pos(lineNo, pos + 1)) == style)) {
|
||||
var match = matching[ch];
|
||||
if ((match.charAt(1) == ">") == (dir > 0)) stack.push(ch);
|
||||
else if (!stack.length) return {pos: Pos(lineNo, pos), ch: ch};
|
||||
else stack.pop();
|
||||
}
|
||||
}
|
||||
}
|
||||
return lineNo - dir == (dir > 0 ? cm.lastLine() : cm.firstLine()) ? false : null;
|
||||
}
|
||||
|
||||
function matchBrackets(cm, autoclear, config) {
|
||||
// Disable brace matching in long lines, since it'll cause hugely slow updates
|
||||
var maxHighlightLen = cm.state.matchBrackets.maxHighlightLineLength || 1000;
|
||||
var marks = [], ranges = cm.listSelections();
|
||||
for (var i = 0; i < ranges.length; i++) {
|
||||
var match = ranges[i].empty() && findMatchingBracket(cm, ranges[i].head, false, config);
|
||||
if (match && cm.getLine(match.from.line).length <= maxHighlightLen) {
|
||||
var style = match.match ? "CodeMirror-matchingbracket" : "CodeMirror-nonmatchingbracket";
|
||||
marks.push(cm.markText(match.from, Pos(match.from.line, match.from.ch + 1), {className: style}));
|
||||
if (match.to && cm.getLine(match.to.line).length <= maxHighlightLen)
|
||||
marks.push(cm.markText(match.to, Pos(match.to.line, match.to.ch + 1), {className: style}));
|
||||
}
|
||||
}
|
||||
|
||||
if (marks.length) {
|
||||
// Kludge to work around the IE bug from issue #1193, where text
|
||||
// input stops going to the textare whever this fires.
|
||||
if (ie_lt8 && cm.state.focused) cm.focus();
|
||||
|
||||
var clear = function() {
|
||||
cm.operation(function() {
|
||||
for (var i = 0; i < marks.length; i++) marks[i].clear();
|
||||
});
|
||||
};
|
||||
if (autoclear) setTimeout(clear, 800);
|
||||
else return clear;
|
||||
}
|
||||
}
|
||||
|
||||
var currentlyHighlighted = null;
|
||||
function doMatchBrackets(cm) {
|
||||
cm.operation(function() {
|
||||
if (currentlyHighlighted) {currentlyHighlighted(); currentlyHighlighted = null;}
|
||||
currentlyHighlighted = matchBrackets(cm, false, cm.state.matchBrackets);
|
||||
});
|
||||
}
|
||||
|
||||
CodeMirror.defineOption("matchBrackets", false, function(cm, val, old) {
|
||||
if (old && old != CodeMirror.Init)
|
||||
cm.off("cursorActivity", doMatchBrackets);
|
||||
if (val) {
|
||||
cm.state.matchBrackets = typeof val == "object" ? val : {};
|
||||
cm.on("cursorActivity", doMatchBrackets);
|
||||
}
|
||||
});
|
||||
|
||||
CodeMirror.defineExtension("matchBrackets", function() {matchBrackets(this, true);});
|
||||
CodeMirror.defineExtension("findMatchingBracket", function(pos, strict, config){
|
||||
return findMatchingBracket(this, pos, strict, config);
|
||||
});
|
||||
CodeMirror.defineExtension("scanForBracket", function(pos, dir, style, config){
|
||||
return scanForBracket(this, pos, dir, style, config);
|
||||
});
|
||||
});
|
@@ -1,66 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"), require("../fold/xml-fold"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror", "../fold/xml-fold"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
CodeMirror.defineOption("matchTags", false, function(cm, val, old) {
|
||||
if (old && old != CodeMirror.Init) {
|
||||
cm.off("cursorActivity", doMatchTags);
|
||||
cm.off("viewportChange", maybeUpdateMatch);
|
||||
clear(cm);
|
||||
}
|
||||
if (val) {
|
||||
cm.state.matchBothTags = typeof val == "object" && val.bothTags;
|
||||
cm.on("cursorActivity", doMatchTags);
|
||||
cm.on("viewportChange", maybeUpdateMatch);
|
||||
doMatchTags(cm);
|
||||
}
|
||||
});
|
||||
|
||||
function clear(cm) {
|
||||
if (cm.state.tagHit) cm.state.tagHit.clear();
|
||||
if (cm.state.tagOther) cm.state.tagOther.clear();
|
||||
cm.state.tagHit = cm.state.tagOther = null;
|
||||
}
|
||||
|
||||
function doMatchTags(cm) {
|
||||
cm.state.failedTagMatch = false;
|
||||
cm.operation(function() {
|
||||
clear(cm);
|
||||
if (cm.somethingSelected()) return;
|
||||
var cur = cm.getCursor(), range = cm.getViewport();
|
||||
range.from = Math.min(range.from, cur.line); range.to = Math.max(cur.line + 1, range.to);
|
||||
var match = CodeMirror.findMatchingTag(cm, cur, range);
|
||||
if (!match) return;
|
||||
if (cm.state.matchBothTags) {
|
||||
var hit = match.at == "open" ? match.open : match.close;
|
||||
if (hit) cm.state.tagHit = cm.markText(hit.from, hit.to, {className: "CodeMirror-matchingtag"});
|
||||
}
|
||||
var other = match.at == "close" ? match.open : match.close;
|
||||
if (other)
|
||||
cm.state.tagOther = cm.markText(other.from, other.to, {className: "CodeMirror-matchingtag"});
|
||||
else
|
||||
cm.state.failedTagMatch = true;
|
||||
});
|
||||
}
|
||||
|
||||
function maybeUpdateMatch(cm) {
|
||||
if (cm.state.failedTagMatch) doMatchTags(cm);
|
||||
}
|
||||
|
||||
CodeMirror.commands.toMatchingTag = function(cm) {
|
||||
var found = CodeMirror.findMatchingTag(cm, cm.getCursor());
|
||||
if (found) {
|
||||
var other = found.at == "close" ? found.open : found.close;
|
||||
if (other) cm.extendSelection(other.to, other.from);
|
||||
}
|
||||
};
|
||||
});
|
@@ -1,27 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
CodeMirror.defineOption("showTrailingSpace", false, function(cm, val, prev) {
|
||||
if (prev == CodeMirror.Init) prev = false;
|
||||
if (prev && !val)
|
||||
cm.removeOverlay("trailingspace");
|
||||
else if (!prev && val)
|
||||
cm.addOverlay({
|
||||
token: function(stream) {
|
||||
for (var l = stream.string.length, i = l; i && /\s/.test(stream.string.charAt(i - 1)); --i) {}
|
||||
if (i > stream.pos) { stream.pos = i; return null; }
|
||||
stream.pos = l;
|
||||
return "trailingspace";
|
||||
},
|
||||
name: "trailingspace"
|
||||
});
|
||||
});
|
||||
});
|
105
webmaker/src/lib/codemirror/addon/fold/brace-fold.js
vendored
@@ -1,105 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
CodeMirror.registerHelper("fold", "brace", function(cm, start) {
|
||||
var line = start.line, lineText = cm.getLine(line);
|
||||
var startCh, tokenType;
|
||||
|
||||
function findOpening(openCh) {
|
||||
for (var at = start.ch, pass = 0;;) {
|
||||
var found = at <= 0 ? -1 : lineText.lastIndexOf(openCh, at - 1);
|
||||
if (found == -1) {
|
||||
if (pass == 1) break;
|
||||
pass = 1;
|
||||
at = lineText.length;
|
||||
continue;
|
||||
}
|
||||
if (pass == 1 && found < start.ch) break;
|
||||
tokenType = cm.getTokenTypeAt(CodeMirror.Pos(line, found + 1));
|
||||
if (!/^(comment|string)/.test(tokenType)) return found + 1;
|
||||
at = found - 1;
|
||||
}
|
||||
}
|
||||
|
||||
var startToken = "{", endToken = "}", startCh = findOpening("{");
|
||||
if (startCh == null) {
|
||||
startToken = "[", endToken = "]";
|
||||
startCh = findOpening("[");
|
||||
}
|
||||
|
||||
if (startCh == null) return;
|
||||
var count = 1, lastLine = cm.lastLine(), end, endCh;
|
||||
outer: for (var i = line; i <= lastLine; ++i) {
|
||||
var text = cm.getLine(i), pos = i == line ? startCh : 0;
|
||||
for (;;) {
|
||||
var nextOpen = text.indexOf(startToken, pos), nextClose = text.indexOf(endToken, pos);
|
||||
if (nextOpen < 0) nextOpen = text.length;
|
||||
if (nextClose < 0) nextClose = text.length;
|
||||
pos = Math.min(nextOpen, nextClose);
|
||||
if (pos == text.length) break;
|
||||
if (cm.getTokenTypeAt(CodeMirror.Pos(i, pos + 1)) == tokenType) {
|
||||
if (pos == nextOpen) ++count;
|
||||
else if (!--count) { end = i; endCh = pos; break outer; }
|
||||
}
|
||||
++pos;
|
||||
}
|
||||
}
|
||||
if (end == null || line == end && endCh == startCh) return;
|
||||
return {from: CodeMirror.Pos(line, startCh),
|
||||
to: CodeMirror.Pos(end, endCh)};
|
||||
});
|
||||
|
||||
CodeMirror.registerHelper("fold", "import", function(cm, start) {
|
||||
function hasImport(line) {
|
||||
if (line < cm.firstLine() || line > cm.lastLine()) return null;
|
||||
var start = cm.getTokenAt(CodeMirror.Pos(line, 1));
|
||||
if (!/\S/.test(start.string)) start = cm.getTokenAt(CodeMirror.Pos(line, start.end + 1));
|
||||
if (start.type != "keyword" || start.string != "import") return null;
|
||||
// Now find closing semicolon, return its position
|
||||
for (var i = line, e = Math.min(cm.lastLine(), line + 10); i <= e; ++i) {
|
||||
var text = cm.getLine(i), semi = text.indexOf(";");
|
||||
if (semi != -1) return {startCh: start.end, end: CodeMirror.Pos(i, semi)};
|
||||
}
|
||||
}
|
||||
|
||||
var start = start.line, has = hasImport(start), prev;
|
||||
if (!has || hasImport(start - 1) || ((prev = hasImport(start - 2)) && prev.end.line == start - 1))
|
||||
return null;
|
||||
for (var end = has.end;;) {
|
||||
var next = hasImport(end.line + 1);
|
||||
if (next == null) break;
|
||||
end = next.end;
|
||||
}
|
||||
return {from: cm.clipPos(CodeMirror.Pos(start, has.startCh + 1)), to: end};
|
||||
});
|
||||
|
||||
CodeMirror.registerHelper("fold", "include", function(cm, start) {
|
||||
function hasInclude(line) {
|
||||
if (line < cm.firstLine() || line > cm.lastLine()) return null;
|
||||
var start = cm.getTokenAt(CodeMirror.Pos(line, 1));
|
||||
if (!/\S/.test(start.string)) start = cm.getTokenAt(CodeMirror.Pos(line, start.end + 1));
|
||||
if (start.type == "meta" && start.string.slice(0, 8) == "#include") return start.start + 8;
|
||||
}
|
||||
|
||||
var start = start.line, has = hasInclude(start);
|
||||
if (has == null || hasInclude(start - 1) != null) return null;
|
||||
for (var end = start;;) {
|
||||
var next = hasInclude(end + 1);
|
||||
if (next == null) break;
|
||||
++end;
|
||||
}
|
||||
return {from: CodeMirror.Pos(start, has + 1),
|
||||
to: cm.clipPos(CodeMirror.Pos(end))};
|
||||
});
|
||||
|
||||
});
|
@@ -1,59 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
CodeMirror.registerGlobalHelper("fold", "comment", function(mode) {
|
||||
return mode.blockCommentStart && mode.blockCommentEnd;
|
||||
}, function(cm, start) {
|
||||
var mode = cm.getModeAt(start), startToken = mode.blockCommentStart, endToken = mode.blockCommentEnd;
|
||||
if (!startToken || !endToken) return;
|
||||
var line = start.line, lineText = cm.getLine(line);
|
||||
|
||||
var startCh;
|
||||
for (var at = start.ch, pass = 0;;) {
|
||||
var found = at <= 0 ? -1 : lineText.lastIndexOf(startToken, at - 1);
|
||||
if (found == -1) {
|
||||
if (pass == 1) return;
|
||||
pass = 1;
|
||||
at = lineText.length;
|
||||
continue;
|
||||
}
|
||||
if (pass == 1 && found < start.ch) return;
|
||||
if (/comment/.test(cm.getTokenTypeAt(CodeMirror.Pos(line, found + 1))) &&
|
||||
(lineText.slice(found - endToken.length, found) == endToken ||
|
||||
!/comment/.test(cm.getTokenTypeAt(CodeMirror.Pos(line, found))))) {
|
||||
startCh = found + startToken.length;
|
||||
break;
|
||||
}
|
||||
at = found - 1;
|
||||
}
|
||||
|
||||
var depth = 1, lastLine = cm.lastLine(), end, endCh;
|
||||
outer: for (var i = line; i <= lastLine; ++i) {
|
||||
var text = cm.getLine(i), pos = i == line ? startCh : 0;
|
||||
for (;;) {
|
||||
var nextOpen = text.indexOf(startToken, pos), nextClose = text.indexOf(endToken, pos);
|
||||
if (nextOpen < 0) nextOpen = text.length;
|
||||
if (nextClose < 0) nextClose = text.length;
|
||||
pos = Math.min(nextOpen, nextClose);
|
||||
if (pos == text.length) break;
|
||||
if (pos == nextOpen) ++depth;
|
||||
else if (!--depth) { end = i; endCh = pos; break outer; }
|
||||
++pos;
|
||||
}
|
||||
}
|
||||
if (end == null || line == end && endCh == startCh) return;
|
||||
return {from: CodeMirror.Pos(line, startCh),
|
||||
to: CodeMirror.Pos(end, endCh)};
|
||||
});
|
||||
|
||||
});
|
149
webmaker/src/lib/codemirror/addon/fold/foldcode.js
vendored
@@ -1,149 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
function doFold(cm, pos, options, force) {
|
||||
if (options && options.call) {
|
||||
var finder = options;
|
||||
options = null;
|
||||
} else {
|
||||
var finder = getOption(cm, options, "rangeFinder");
|
||||
}
|
||||
if (typeof pos == "number") pos = CodeMirror.Pos(pos, 0);
|
||||
var minSize = getOption(cm, options, "minFoldSize");
|
||||
|
||||
function getRange(allowFolded) {
|
||||
var range = finder(cm, pos);
|
||||
if (!range || range.to.line - range.from.line < minSize) return null;
|
||||
var marks = cm.findMarksAt(range.from);
|
||||
for (var i = 0; i < marks.length; ++i) {
|
||||
if (marks[i].__isFold && force !== "fold") {
|
||||
if (!allowFolded) return null;
|
||||
range.cleared = true;
|
||||
marks[i].clear();
|
||||
}
|
||||
}
|
||||
return range;
|
||||
}
|
||||
|
||||
var range = getRange(true);
|
||||
if (getOption(cm, options, "scanUp")) while (!range && pos.line > cm.firstLine()) {
|
||||
pos = CodeMirror.Pos(pos.line - 1, 0);
|
||||
range = getRange(false);
|
||||
}
|
||||
if (!range || range.cleared || force === "unfold") return;
|
||||
|
||||
var myWidget = makeWidget(cm, options);
|
||||
CodeMirror.on(myWidget, "mousedown", function(e) {
|
||||
myRange.clear();
|
||||
CodeMirror.e_preventDefault(e);
|
||||
});
|
||||
var myRange = cm.markText(range.from, range.to, {
|
||||
replacedWith: myWidget,
|
||||
clearOnEnter: true,
|
||||
__isFold: true
|
||||
});
|
||||
myRange.on("clear", function(from, to) {
|
||||
CodeMirror.signal(cm, "unfold", cm, from, to);
|
||||
});
|
||||
CodeMirror.signal(cm, "fold", cm, range.from, range.to);
|
||||
}
|
||||
|
||||
function makeWidget(cm, options) {
|
||||
var widget = getOption(cm, options, "widget");
|
||||
if (typeof widget == "string") {
|
||||
var text = document.createTextNode(widget);
|
||||
widget = document.createElement("span");
|
||||
widget.appendChild(text);
|
||||
widget.className = "CodeMirror-foldmarker";
|
||||
}
|
||||
return widget;
|
||||
}
|
||||
|
||||
// Clumsy backwards-compatible interface
|
||||
CodeMirror.newFoldFunction = function(rangeFinder, widget) {
|
||||
return function(cm, pos) { doFold(cm, pos, {rangeFinder: rangeFinder, widget: widget}); };
|
||||
};
|
||||
|
||||
// New-style interface
|
||||
CodeMirror.defineExtension("foldCode", function(pos, options, force) {
|
||||
doFold(this, pos, options, force);
|
||||
});
|
||||
|
||||
CodeMirror.defineExtension("isFolded", function(pos) {
|
||||
var marks = this.findMarksAt(pos);
|
||||
for (var i = 0; i < marks.length; ++i)
|
||||
if (marks[i].__isFold) return true;
|
||||
});
|
||||
|
||||
CodeMirror.commands.toggleFold = function(cm) {
|
||||
cm.foldCode(cm.getCursor());
|
||||
};
|
||||
CodeMirror.commands.fold = function(cm) {
|
||||
cm.foldCode(cm.getCursor(), null, "fold");
|
||||
};
|
||||
CodeMirror.commands.unfold = function(cm) {
|
||||
cm.foldCode(cm.getCursor(), null, "unfold");
|
||||
};
|
||||
CodeMirror.commands.foldAll = function(cm) {
|
||||
cm.operation(function() {
|
||||
for (var i = cm.firstLine(), e = cm.lastLine(); i <= e; i++)
|
||||
cm.foldCode(CodeMirror.Pos(i, 0), null, "fold");
|
||||
});
|
||||
};
|
||||
CodeMirror.commands.unfoldAll = function(cm) {
|
||||
cm.operation(function() {
|
||||
for (var i = cm.firstLine(), e = cm.lastLine(); i <= e; i++)
|
||||
cm.foldCode(CodeMirror.Pos(i, 0), null, "unfold");
|
||||
});
|
||||
};
|
||||
|
||||
CodeMirror.registerHelper("fold", "combine", function() {
|
||||
var funcs = Array.prototype.slice.call(arguments, 0);
|
||||
return function(cm, start) {
|
||||
for (var i = 0; i < funcs.length; ++i) {
|
||||
var found = funcs[i](cm, start);
|
||||
if (found) return found;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
CodeMirror.registerHelper("fold", "auto", function(cm, start) {
|
||||
var helpers = cm.getHelpers(start, "fold");
|
||||
for (var i = 0; i < helpers.length; i++) {
|
||||
var cur = helpers[i](cm, start);
|
||||
if (cur) return cur;
|
||||
}
|
||||
});
|
||||
|
||||
var defaultOptions = {
|
||||
rangeFinder: CodeMirror.fold.auto,
|
||||
widget: "\u2194",
|
||||
minFoldSize: 0,
|
||||
scanUp: false
|
||||
};
|
||||
|
||||
CodeMirror.defineOption("foldOptions", null);
|
||||
|
||||
function getOption(cm, options, name) {
|
||||
if (options && options[name] !== undefined)
|
||||
return options[name];
|
||||
var editorOptions = cm.options.foldOptions;
|
||||
if (editorOptions && editorOptions[name] !== undefined)
|
||||
return editorOptions[name];
|
||||
return defaultOptions[name];
|
||||
}
|
||||
|
||||
CodeMirror.defineExtension("foldOption", function(options, name) {
|
||||
return getOption(this, options, name);
|
||||
});
|
||||
});
|
@@ -1,20 +0,0 @@
|
||||
.CodeMirror-foldmarker {
|
||||
color: blue;
|
||||
text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
|
||||
font-family: arial;
|
||||
line-height: .3;
|
||||
cursor: pointer;
|
||||
}
|
||||
.CodeMirror-foldgutter {
|
||||
width: .7em;
|
||||
}
|
||||
.CodeMirror-foldgutter-open,
|
||||
.CodeMirror-foldgutter-folded {
|
||||
cursor: pointer;
|
||||
}
|
||||
.CodeMirror-foldgutter-open:after {
|
||||
content: "\25BE";
|
||||
}
|
||||
.CodeMirror-foldgutter-folded:after {
|
||||
content: "\25B8";
|
||||
}
|
146
webmaker/src/lib/codemirror/addon/fold/foldgutter.js
vendored
@@ -1,146 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"), require("./foldcode"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror", "./foldcode"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
CodeMirror.defineOption("foldGutter", false, function(cm, val, old) {
|
||||
if (old && old != CodeMirror.Init) {
|
||||
cm.clearGutter(cm.state.foldGutter.options.gutter);
|
||||
cm.state.foldGutter = null;
|
||||
cm.off("gutterClick", onGutterClick);
|
||||
cm.off("change", onChange);
|
||||
cm.off("viewportChange", onViewportChange);
|
||||
cm.off("fold", onFold);
|
||||
cm.off("unfold", onFold);
|
||||
cm.off("swapDoc", onChange);
|
||||
}
|
||||
if (val) {
|
||||
cm.state.foldGutter = new State(parseOptions(val));
|
||||
updateInViewport(cm);
|
||||
cm.on("gutterClick", onGutterClick);
|
||||
cm.on("change", onChange);
|
||||
cm.on("viewportChange", onViewportChange);
|
||||
cm.on("fold", onFold);
|
||||
cm.on("unfold", onFold);
|
||||
cm.on("swapDoc", onChange);
|
||||
}
|
||||
});
|
||||
|
||||
var Pos = CodeMirror.Pos;
|
||||
|
||||
function State(options) {
|
||||
this.options = options;
|
||||
this.from = this.to = 0;
|
||||
}
|
||||
|
||||
function parseOptions(opts) {
|
||||
if (opts === true) opts = {};
|
||||
if (opts.gutter == null) opts.gutter = "CodeMirror-foldgutter";
|
||||
if (opts.indicatorOpen == null) opts.indicatorOpen = "CodeMirror-foldgutter-open";
|
||||
if (opts.indicatorFolded == null) opts.indicatorFolded = "CodeMirror-foldgutter-folded";
|
||||
return opts;
|
||||
}
|
||||
|
||||
function isFolded(cm, line) {
|
||||
var marks = cm.findMarksAt(Pos(line));
|
||||
for (var i = 0; i < marks.length; ++i)
|
||||
if (marks[i].__isFold && marks[i].find().from.line == line) return marks[i];
|
||||
}
|
||||
|
||||
function marker(spec) {
|
||||
if (typeof spec == "string") {
|
||||
var elt = document.createElement("div");
|
||||
elt.className = spec + " CodeMirror-guttermarker-subtle";
|
||||
return elt;
|
||||
} else {
|
||||
return spec.cloneNode(true);
|
||||
}
|
||||
}
|
||||
|
||||
function updateFoldInfo(cm, from, to) {
|
||||
var opts = cm.state.foldGutter.options, cur = from;
|
||||
var minSize = cm.foldOption(opts, "minFoldSize");
|
||||
var func = cm.foldOption(opts, "rangeFinder");
|
||||
cm.eachLine(from, to, function(line) {
|
||||
var mark = null;
|
||||
if (isFolded(cm, cur)) {
|
||||
mark = marker(opts.indicatorFolded);
|
||||
} else {
|
||||
var pos = Pos(cur, 0);
|
||||
var range = func && func(cm, pos);
|
||||
if (range && range.to.line - range.from.line >= minSize)
|
||||
mark = marker(opts.indicatorOpen);
|
||||
}
|
||||
cm.setGutterMarker(line, opts.gutter, mark);
|
||||
++cur;
|
||||
});
|
||||
}
|
||||
|
||||
function updateInViewport(cm) {
|
||||
var vp = cm.getViewport(), state = cm.state.foldGutter;
|
||||
if (!state) return;
|
||||
cm.operation(function() {
|
||||
updateFoldInfo(cm, vp.from, vp.to);
|
||||
});
|
||||
state.from = vp.from; state.to = vp.to;
|
||||
}
|
||||
|
||||
function onGutterClick(cm, line, gutter) {
|
||||
var state = cm.state.foldGutter;
|
||||
if (!state) return;
|
||||
var opts = state.options;
|
||||
if (gutter != opts.gutter) return;
|
||||
var folded = isFolded(cm, line);
|
||||
if (folded) folded.clear();
|
||||
else cm.foldCode(Pos(line, 0), opts.rangeFinder);
|
||||
}
|
||||
|
||||
function onChange(cm) {
|
||||
var state = cm.state.foldGutter;
|
||||
if (!state) return;
|
||||
var opts = state.options;
|
||||
state.from = state.to = 0;
|
||||
clearTimeout(state.changeUpdate);
|
||||
state.changeUpdate = setTimeout(function() { updateInViewport(cm); }, opts.foldOnChangeTimeSpan || 600);
|
||||
}
|
||||
|
||||
function onViewportChange(cm) {
|
||||
var state = cm.state.foldGutter;
|
||||
if (!state) return;
|
||||
var opts = state.options;
|
||||
clearTimeout(state.changeUpdate);
|
||||
state.changeUpdate = setTimeout(function() {
|
||||
var vp = cm.getViewport();
|
||||
if (state.from == state.to || vp.from - state.to > 20 || state.from - vp.to > 20) {
|
||||
updateInViewport(cm);
|
||||
} else {
|
||||
cm.operation(function() {
|
||||
if (vp.from < state.from) {
|
||||
updateFoldInfo(cm, vp.from, state.from);
|
||||
state.from = vp.from;
|
||||
}
|
||||
if (vp.to > state.to) {
|
||||
updateFoldInfo(cm, state.to, vp.to);
|
||||
state.to = vp.to;
|
||||
}
|
||||
});
|
||||
}
|
||||
}, opts.updateViewportTimeSpan || 400);
|
||||
}
|
||||
|
||||
function onFold(cm, from) {
|
||||
var state = cm.state.foldGutter;
|
||||
if (!state) return;
|
||||
var line = from.line;
|
||||
if (line >= state.from && line < state.to)
|
||||
updateFoldInfo(cm, line, line + 1);
|
||||
}
|
||||
});
|
@@ -1,44 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
CodeMirror.registerHelper("fold", "indent", function(cm, start) {
|
||||
var tabSize = cm.getOption("tabSize"), firstLine = cm.getLine(start.line);
|
||||
if (!/\S/.test(firstLine)) return;
|
||||
var getIndent = function(line) {
|
||||
return CodeMirror.countColumn(line, null, tabSize);
|
||||
};
|
||||
var myIndent = getIndent(firstLine);
|
||||
var lastLineInFold = null;
|
||||
// Go through lines until we find a line that definitely doesn't belong in
|
||||
// the block we're folding, or to the end.
|
||||
for (var i = start.line + 1, end = cm.lastLine(); i <= end; ++i) {
|
||||
var curLine = cm.getLine(i);
|
||||
var curIndent = getIndent(curLine);
|
||||
if (curIndent > myIndent) {
|
||||
// Lines with a greater indent are considered part of the block.
|
||||
lastLineInFold = i;
|
||||
} else if (!/\S/.test(curLine)) {
|
||||
// Empty lines might be breaks within the block we're trying to fold.
|
||||
} else {
|
||||
// A non-empty line at an indent equal to or less than ours marks the
|
||||
// start of another block.
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (lastLineInFold) return {
|
||||
from: CodeMirror.Pos(start.line, firstLine.length),
|
||||
to: CodeMirror.Pos(lastLineInFold, cm.getLine(lastLineInFold).length)
|
||||
};
|
||||
});
|
||||
|
||||
});
|
@@ -1,49 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
CodeMirror.registerHelper("fold", "markdown", function(cm, start) {
|
||||
var maxDepth = 100;
|
||||
|
||||
function isHeader(lineNo) {
|
||||
var tokentype = cm.getTokenTypeAt(CodeMirror.Pos(lineNo, 0));
|
||||
return tokentype && /\bheader\b/.test(tokentype);
|
||||
}
|
||||
|
||||
function headerLevel(lineNo, line, nextLine) {
|
||||
var match = line && line.match(/^#+/);
|
||||
if (match && isHeader(lineNo)) return match[0].length;
|
||||
match = nextLine && nextLine.match(/^[=\-]+\s*$/);
|
||||
if (match && isHeader(lineNo + 1)) return nextLine[0] == "=" ? 1 : 2;
|
||||
return maxDepth;
|
||||
}
|
||||
|
||||
var firstLine = cm.getLine(start.line), nextLine = cm.getLine(start.line + 1);
|
||||
var level = headerLevel(start.line, firstLine, nextLine);
|
||||
if (level === maxDepth) return undefined;
|
||||
|
||||
var lastLineNo = cm.lastLine();
|
||||
var end = start.line, nextNextLine = cm.getLine(end + 2);
|
||||
while (end < lastLineNo) {
|
||||
if (headerLevel(end + 1, nextLine, nextNextLine) <= level) break;
|
||||
++end;
|
||||
nextLine = nextNextLine;
|
||||
nextNextLine = cm.getLine(end + 2);
|
||||
}
|
||||
|
||||
return {
|
||||
from: CodeMirror.Pos(start.line, firstLine.length),
|
||||
to: CodeMirror.Pos(end, cm.getLine(end).length)
|
||||
};
|
||||
});
|
||||
|
||||
});
|
182
webmaker/src/lib/codemirror/addon/fold/xml-fold.js
vendored
@@ -1,182 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
var Pos = CodeMirror.Pos;
|
||||
function cmp(a, b) { return a.line - b.line || a.ch - b.ch; }
|
||||
|
||||
var nameStartChar = "A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD";
|
||||
var nameChar = nameStartChar + "\-\:\.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040";
|
||||
var xmlTagStart = new RegExp("<(/?)([" + nameStartChar + "][" + nameChar + "]*)", "g");
|
||||
|
||||
function Iter(cm, line, ch, range) {
|
||||
this.line = line; this.ch = ch;
|
||||
this.cm = cm; this.text = cm.getLine(line);
|
||||
this.min = range ? range.from : cm.firstLine();
|
||||
this.max = range ? range.to - 1 : cm.lastLine();
|
||||
}
|
||||
|
||||
function tagAt(iter, ch) {
|
||||
var type = iter.cm.getTokenTypeAt(Pos(iter.line, ch));
|
||||
return type && /\btag\b/.test(type);
|
||||
}
|
||||
|
||||
function nextLine(iter) {
|
||||
if (iter.line >= iter.max) return;
|
||||
iter.ch = 0;
|
||||
iter.text = iter.cm.getLine(++iter.line);
|
||||
return true;
|
||||
}
|
||||
function prevLine(iter) {
|
||||
if (iter.line <= iter.min) return;
|
||||
iter.text = iter.cm.getLine(--iter.line);
|
||||
iter.ch = iter.text.length;
|
||||
return true;
|
||||
}
|
||||
|
||||
function toTagEnd(iter) {
|
||||
for (;;) {
|
||||
var gt = iter.text.indexOf(">", iter.ch);
|
||||
if (gt == -1) { if (nextLine(iter)) continue; else return; }
|
||||
if (!tagAt(iter, gt + 1)) { iter.ch = gt + 1; continue; }
|
||||
var lastSlash = iter.text.lastIndexOf("/", gt);
|
||||
var selfClose = lastSlash > -1 && !/\S/.test(iter.text.slice(lastSlash + 1, gt));
|
||||
iter.ch = gt + 1;
|
||||
return selfClose ? "selfClose" : "regular";
|
||||
}
|
||||
}
|
||||
function toTagStart(iter) {
|
||||
for (;;) {
|
||||
var lt = iter.ch ? iter.text.lastIndexOf("<", iter.ch - 1) : -1;
|
||||
if (lt == -1) { if (prevLine(iter)) continue; else return; }
|
||||
if (!tagAt(iter, lt + 1)) { iter.ch = lt; continue; }
|
||||
xmlTagStart.lastIndex = lt;
|
||||
iter.ch = lt;
|
||||
var match = xmlTagStart.exec(iter.text);
|
||||
if (match && match.index == lt) return match;
|
||||
}
|
||||
}
|
||||
|
||||
function toNextTag(iter) {
|
||||
for (;;) {
|
||||
xmlTagStart.lastIndex = iter.ch;
|
||||
var found = xmlTagStart.exec(iter.text);
|
||||
if (!found) { if (nextLine(iter)) continue; else return; }
|
||||
if (!tagAt(iter, found.index + 1)) { iter.ch = found.index + 1; continue; }
|
||||
iter.ch = found.index + found[0].length;
|
||||
return found;
|
||||
}
|
||||
}
|
||||
function toPrevTag(iter) {
|
||||
for (;;) {
|
||||
var gt = iter.ch ? iter.text.lastIndexOf(">", iter.ch - 1) : -1;
|
||||
if (gt == -1) { if (prevLine(iter)) continue; else return; }
|
||||
if (!tagAt(iter, gt + 1)) { iter.ch = gt; continue; }
|
||||
var lastSlash = iter.text.lastIndexOf("/", gt);
|
||||
var selfClose = lastSlash > -1 && !/\S/.test(iter.text.slice(lastSlash + 1, gt));
|
||||
iter.ch = gt + 1;
|
||||
return selfClose ? "selfClose" : "regular";
|
||||
}
|
||||
}
|
||||
|
||||
function findMatchingClose(iter, tag) {
|
||||
var stack = [];
|
||||
for (;;) {
|
||||
var next = toNextTag(iter), end, startLine = iter.line, startCh = iter.ch - (next ? next[0].length : 0);
|
||||
if (!next || !(end = toTagEnd(iter))) return;
|
||||
if (end == "selfClose") continue;
|
||||
if (next[1]) { // closing tag
|
||||
for (var i = stack.length - 1; i >= 0; --i) if (stack[i] == next[2]) {
|
||||
stack.length = i;
|
||||
break;
|
||||
}
|
||||
if (i < 0 && (!tag || tag == next[2])) return {
|
||||
tag: next[2],
|
||||
from: Pos(startLine, startCh),
|
||||
to: Pos(iter.line, iter.ch)
|
||||
};
|
||||
} else { // opening tag
|
||||
stack.push(next[2]);
|
||||
}
|
||||
}
|
||||
}
|
||||
function findMatchingOpen(iter, tag) {
|
||||
var stack = [];
|
||||
for (;;) {
|
||||
var prev = toPrevTag(iter);
|
||||
if (!prev) return;
|
||||
if (prev == "selfClose") { toTagStart(iter); continue; }
|
||||
var endLine = iter.line, endCh = iter.ch;
|
||||
var start = toTagStart(iter);
|
||||
if (!start) return;
|
||||
if (start[1]) { // closing tag
|
||||
stack.push(start[2]);
|
||||
} else { // opening tag
|
||||
for (var i = stack.length - 1; i >= 0; --i) if (stack[i] == start[2]) {
|
||||
stack.length = i;
|
||||
break;
|
||||
}
|
||||
if (i < 0 && (!tag || tag == start[2])) return {
|
||||
tag: start[2],
|
||||
from: Pos(iter.line, iter.ch),
|
||||
to: Pos(endLine, endCh)
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CodeMirror.registerHelper("fold", "xml", function(cm, start) {
|
||||
var iter = new Iter(cm, start.line, 0);
|
||||
for (;;) {
|
||||
var openTag = toNextTag(iter), end;
|
||||
if (!openTag || iter.line != start.line || !(end = toTagEnd(iter))) return;
|
||||
if (!openTag[1] && end != "selfClose") {
|
||||
var start = Pos(iter.line, iter.ch);
|
||||
var close = findMatchingClose(iter, openTag[2]);
|
||||
return close && {from: start, to: close.from};
|
||||
}
|
||||
}
|
||||
});
|
||||
CodeMirror.findMatchingTag = function(cm, pos, range) {
|
||||
var iter = new Iter(cm, pos.line, pos.ch, range);
|
||||
if (iter.text.indexOf(">") == -1 && iter.text.indexOf("<") == -1) return;
|
||||
var end = toTagEnd(iter), to = end && Pos(iter.line, iter.ch);
|
||||
var start = end && toTagStart(iter);
|
||||
if (!end || !start || cmp(iter, pos) > 0) return;
|
||||
var here = {from: Pos(iter.line, iter.ch), to: to, tag: start[2]};
|
||||
if (end == "selfClose") return {open: here, close: null, at: "open"};
|
||||
|
||||
if (start[1]) { // closing tag
|
||||
return {open: findMatchingOpen(iter, start[2]), close: here, at: "close"};
|
||||
} else { // opening tag
|
||||
iter = new Iter(cm, to.line, to.ch, range);
|
||||
return {open: here, close: findMatchingClose(iter, start[2]), at: "open"};
|
||||
}
|
||||
};
|
||||
|
||||
CodeMirror.findEnclosingTag = function(cm, pos, range) {
|
||||
var iter = new Iter(cm, pos.line, pos.ch, range);
|
||||
for (;;) {
|
||||
var open = findMatchingOpen(iter);
|
||||
if (!open) break;
|
||||
var forward = new Iter(cm, pos.line, pos.ch, range);
|
||||
var close = findMatchingClose(forward, open.tag);
|
||||
if (close) return {open: open, close: close};
|
||||
}
|
||||
};
|
||||
|
||||
// Used by addon/edit/closetag.js
|
||||
CodeMirror.scanForClosingTag = function(cm, pos, name, end) {
|
||||
var iter = new Iter(cm, pos.line, pos.ch, end ? {from: 0, to: end} : null);
|
||||
return findMatchingClose(iter, name);
|
||||
};
|
||||
});
|
@@ -1,41 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
var WORD = /[\w$]+/, RANGE = 500;
|
||||
|
||||
CodeMirror.registerHelper("hint", "anyword", function(editor, options) {
|
||||
var word = options && options.word || WORD;
|
||||
var range = options && options.range || RANGE;
|
||||
var cur = editor.getCursor(), curLine = editor.getLine(cur.line);
|
||||
var end = cur.ch, start = end;
|
||||
while (start && word.test(curLine.charAt(start - 1))) --start;
|
||||
var curWord = start != end && curLine.slice(start, end);
|
||||
|
||||
var list = options && options.list || [], seen = {};
|
||||
var re = new RegExp(word.source, "g");
|
||||
for (var dir = -1; dir <= 1; dir += 2) {
|
||||
var line = cur.line, endLine = Math.min(Math.max(line + dir * range, editor.firstLine()), editor.lastLine()) + dir;
|
||||
for (; line != endLine; line += dir) {
|
||||
var text = editor.getLine(line), m;
|
||||
while (m = re.exec(text)) {
|
||||
if (line == cur.line && m[0] === curWord) continue;
|
||||
if ((!curWord || m[0].lastIndexOf(curWord, 0) == 0) && !Object.prototype.hasOwnProperty.call(seen, m[0])) {
|
||||
seen[m[0]] = true;
|
||||
list.push(m[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return {list: list, from: CodeMirror.Pos(cur.line, start), to: CodeMirror.Pos(cur.line, end)};
|
||||
});
|
||||
});
|
@@ -1,60 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"), require("../../mode/css/css"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror", "../../mode/css/css"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
var pseudoClasses = {link: 1, visited: 1, active: 1, hover: 1, focus: 1,
|
||||
"first-letter": 1, "first-line": 1, "first-child": 1,
|
||||
before: 1, after: 1, lang: 1};
|
||||
|
||||
CodeMirror.registerHelper("hint", "css", function(cm) {
|
||||
var cur = cm.getCursor(), token = cm.getTokenAt(cur);
|
||||
var inner = CodeMirror.innerMode(cm.getMode(), token.state);
|
||||
if (inner.mode.name != "css") return;
|
||||
|
||||
if (token.type == "keyword" && "!important".indexOf(token.string) == 0)
|
||||
return {list: ["!important"], from: CodeMirror.Pos(cur.line, token.start),
|
||||
to: CodeMirror.Pos(cur.line, token.end)};
|
||||
|
||||
var start = token.start, end = cur.ch, word = token.string.slice(0, end - start);
|
||||
if (/[^\w$_-]/.test(word)) {
|
||||
word = ""; start = end = cur.ch;
|
||||
}
|
||||
|
||||
var spec = CodeMirror.resolveMode("text/css");
|
||||
|
||||
var result = [];
|
||||
function add(keywords) {
|
||||
for (var name in keywords)
|
||||
if (!word || name.lastIndexOf(word, 0) == 0)
|
||||
result.push(name);
|
||||
}
|
||||
|
||||
var st = inner.state.state;
|
||||
if (st == "pseudo" || token.type == "variable-3") {
|
||||
add(pseudoClasses);
|
||||
} else if (st == "block" || st == "maybeprop") {
|
||||
add(spec.propertyKeywords);
|
||||
} else if (st == "prop" || st == "parens" || st == "at" || st == "params") {
|
||||
add(spec.valueKeywords);
|
||||
add(spec.colorKeywords);
|
||||
} else if (st == "media" || st == "media_parens") {
|
||||
add(spec.mediaTypes);
|
||||
add(spec.mediaFeatures);
|
||||
}
|
||||
|
||||
if (result.length) return {
|
||||
list: result,
|
||||
from: CodeMirror.Pos(cur.line, start),
|
||||
to: CodeMirror.Pos(cur.line, end)
|
||||
};
|
||||
});
|
||||
});
|
348
webmaker/src/lib/codemirror/addon/hint/html-hint.js
vendored
@@ -1,348 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"), require("./xml-hint"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror", "./xml-hint"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
var langs = "ab aa af ak sq am ar an hy as av ae ay az bm ba eu be bn bh bi bs br bg my ca ch ce ny zh cv kw co cr hr cs da dv nl dz en eo et ee fo fj fi fr ff gl ka de el gn gu ht ha he hz hi ho hu ia id ie ga ig ik io is it iu ja jv kl kn kr ks kk km ki rw ky kv kg ko ku kj la lb lg li ln lo lt lu lv gv mk mg ms ml mt mi mr mh mn na nv nb nd ne ng nn no ii nr oc oj cu om or os pa pi fa pl ps pt qu rm rn ro ru sa sc sd se sm sg sr gd sn si sk sl so st es su sw ss sv ta te tg th ti bo tk tl tn to tr ts tt tw ty ug uk ur uz ve vi vo wa cy wo fy xh yi yo za zu".split(" ");
|
||||
var targets = ["_blank", "_self", "_top", "_parent"];
|
||||
var charsets = ["ascii", "utf-8", "utf-16", "latin1", "latin1"];
|
||||
var methods = ["get", "post", "put", "delete"];
|
||||
var encs = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"];
|
||||
var media = ["all", "screen", "print", "embossed", "braille", "handheld", "print", "projection", "screen", "tty", "tv", "speech",
|
||||
"3d-glasses", "resolution [>][<][=] [X]", "device-aspect-ratio: X/Y", "orientation:portrait",
|
||||
"orientation:landscape", "device-height: [X]", "device-width: [X]"];
|
||||
var s = { attrs: {} }; // Simple tag, reused for a whole lot of tags
|
||||
|
||||
var data = {
|
||||
a: {
|
||||
attrs: {
|
||||
href: null, ping: null, type: null,
|
||||
media: media,
|
||||
target: targets,
|
||||
hreflang: langs
|
||||
}
|
||||
},
|
||||
abbr: s,
|
||||
acronym: s,
|
||||
address: s,
|
||||
applet: s,
|
||||
area: {
|
||||
attrs: {
|
||||
alt: null, coords: null, href: null, target: null, ping: null,
|
||||
media: media, hreflang: langs, type: null,
|
||||
shape: ["default", "rect", "circle", "poly"]
|
||||
}
|
||||
},
|
||||
article: s,
|
||||
aside: s,
|
||||
audio: {
|
||||
attrs: {
|
||||
src: null, mediagroup: null,
|
||||
crossorigin: ["anonymous", "use-credentials"],
|
||||
preload: ["none", "metadata", "auto"],
|
||||
autoplay: ["", "autoplay"],
|
||||
loop: ["", "loop"],
|
||||
controls: ["", "controls"]
|
||||
}
|
||||
},
|
||||
b: s,
|
||||
base: { attrs: { href: null, target: targets } },
|
||||
basefont: s,
|
||||
bdi: s,
|
||||
bdo: s,
|
||||
big: s,
|
||||
blockquote: { attrs: { cite: null } },
|
||||
body: s,
|
||||
br: s,
|
||||
button: {
|
||||
attrs: {
|
||||
form: null, formaction: null, name: null, value: null,
|
||||
autofocus: ["", "autofocus"],
|
||||
disabled: ["", "autofocus"],
|
||||
formenctype: encs,
|
||||
formmethod: methods,
|
||||
formnovalidate: ["", "novalidate"],
|
||||
formtarget: targets,
|
||||
type: ["submit", "reset", "button"]
|
||||
}
|
||||
},
|
||||
canvas: { attrs: { width: null, height: null } },
|
||||
caption: s,
|
||||
center: s,
|
||||
cite: s,
|
||||
code: s,
|
||||
col: { attrs: { span: null } },
|
||||
colgroup: { attrs: { span: null } },
|
||||
command: {
|
||||
attrs: {
|
||||
type: ["command", "checkbox", "radio"],
|
||||
label: null, icon: null, radiogroup: null, command: null, title: null,
|
||||
disabled: ["", "disabled"],
|
||||
checked: ["", "checked"]
|
||||
}
|
||||
},
|
||||
data: { attrs: { value: null } },
|
||||
datagrid: { attrs: { disabled: ["", "disabled"], multiple: ["", "multiple"] } },
|
||||
datalist: { attrs: { data: null } },
|
||||
dd: s,
|
||||
del: { attrs: { cite: null, datetime: null } },
|
||||
details: { attrs: { open: ["", "open"] } },
|
||||
dfn: s,
|
||||
dir: s,
|
||||
div: s,
|
||||
dl: s,
|
||||
dt: s,
|
||||
em: s,
|
||||
embed: { attrs: { src: null, type: null, width: null, height: null } },
|
||||
eventsource: { attrs: { src: null } },
|
||||
fieldset: { attrs: { disabled: ["", "disabled"], form: null, name: null } },
|
||||
figcaption: s,
|
||||
figure: s,
|
||||
font: s,
|
||||
footer: s,
|
||||
form: {
|
||||
attrs: {
|
||||
action: null, name: null,
|
||||
"accept-charset": charsets,
|
||||
autocomplete: ["on", "off"],
|
||||
enctype: encs,
|
||||
method: methods,
|
||||
novalidate: ["", "novalidate"],
|
||||
target: targets
|
||||
}
|
||||
},
|
||||
frame: s,
|
||||
frameset: s,
|
||||
h1: s, h2: s, h3: s, h4: s, h5: s, h6: s,
|
||||
head: {
|
||||
attrs: {},
|
||||
children: ["title", "base", "link", "style", "meta", "script", "noscript", "command"]
|
||||
},
|
||||
header: s,
|
||||
hgroup: s,
|
||||
hr: s,
|
||||
html: {
|
||||
attrs: { manifest: null },
|
||||
children: ["head", "body"]
|
||||
},
|
||||
i: s,
|
||||
iframe: {
|
||||
attrs: {
|
||||
src: null, srcdoc: null, name: null, width: null, height: null,
|
||||
sandbox: ["allow-top-navigation", "allow-same-origin", "allow-forms", "allow-scripts"],
|
||||
seamless: ["", "seamless"]
|
||||
}
|
||||
},
|
||||
img: {
|
||||
attrs: {
|
||||
alt: null, src: null, ismap: null, usemap: null, width: null, height: null,
|
||||
crossorigin: ["anonymous", "use-credentials"]
|
||||
}
|
||||
},
|
||||
input: {
|
||||
attrs: {
|
||||
alt: null, dirname: null, form: null, formaction: null,
|
||||
height: null, list: null, max: null, maxlength: null, min: null,
|
||||
name: null, pattern: null, placeholder: null, size: null, src: null,
|
||||
step: null, value: null, width: null,
|
||||
accept: ["audio/*", "video/*", "image/*"],
|
||||
autocomplete: ["on", "off"],
|
||||
autofocus: ["", "autofocus"],
|
||||
checked: ["", "checked"],
|
||||
disabled: ["", "disabled"],
|
||||
formenctype: encs,
|
||||
formmethod: methods,
|
||||
formnovalidate: ["", "novalidate"],
|
||||
formtarget: targets,
|
||||
multiple: ["", "multiple"],
|
||||
readonly: ["", "readonly"],
|
||||
required: ["", "required"],
|
||||
type: ["hidden", "text", "search", "tel", "url", "email", "password", "datetime", "date", "month",
|
||||
"week", "time", "datetime-local", "number", "range", "color", "checkbox", "radio",
|
||||
"file", "submit", "image", "reset", "button"]
|
||||
}
|
||||
},
|
||||
ins: { attrs: { cite: null, datetime: null } },
|
||||
kbd: s,
|
||||
keygen: {
|
||||
attrs: {
|
||||
challenge: null, form: null, name: null,
|
||||
autofocus: ["", "autofocus"],
|
||||
disabled: ["", "disabled"],
|
||||
keytype: ["RSA"]
|
||||
}
|
||||
},
|
||||
label: { attrs: { "for": null, form: null } },
|
||||
legend: s,
|
||||
li: { attrs: { value: null } },
|
||||
link: {
|
||||
attrs: {
|
||||
href: null, type: null,
|
||||
hreflang: langs,
|
||||
media: media,
|
||||
sizes: ["all", "16x16", "16x16 32x32", "16x16 32x32 64x64"]
|
||||
}
|
||||
},
|
||||
map: { attrs: { name: null } },
|
||||
mark: s,
|
||||
menu: { attrs: { label: null, type: ["list", "context", "toolbar"] } },
|
||||
meta: {
|
||||
attrs: {
|
||||
content: null,
|
||||
charset: charsets,
|
||||
name: ["viewport", "application-name", "author", "description", "generator", "keywords"],
|
||||
"http-equiv": ["content-language", "content-type", "default-style", "refresh"]
|
||||
}
|
||||
},
|
||||
meter: { attrs: { value: null, min: null, low: null, high: null, max: null, optimum: null } },
|
||||
nav: s,
|
||||
noframes: s,
|
||||
noscript: s,
|
||||
object: {
|
||||
attrs: {
|
||||
data: null, type: null, name: null, usemap: null, form: null, width: null, height: null,
|
||||
typemustmatch: ["", "typemustmatch"]
|
||||
}
|
||||
},
|
||||
ol: { attrs: { reversed: ["", "reversed"], start: null, type: ["1", "a", "A", "i", "I"] } },
|
||||
optgroup: { attrs: { disabled: ["", "disabled"], label: null } },
|
||||
option: { attrs: { disabled: ["", "disabled"], label: null, selected: ["", "selected"], value: null } },
|
||||
output: { attrs: { "for": null, form: null, name: null } },
|
||||
p: s,
|
||||
param: { attrs: { name: null, value: null } },
|
||||
pre: s,
|
||||
progress: { attrs: { value: null, max: null } },
|
||||
q: { attrs: { cite: null } },
|
||||
rp: s,
|
||||
rt: s,
|
||||
ruby: s,
|
||||
s: s,
|
||||
samp: s,
|
||||
script: {
|
||||
attrs: {
|
||||
type: ["text/javascript"],
|
||||
src: null,
|
||||
async: ["", "async"],
|
||||
defer: ["", "defer"],
|
||||
charset: charsets
|
||||
}
|
||||
},
|
||||
section: s,
|
||||
select: {
|
||||
attrs: {
|
||||
form: null, name: null, size: null,
|
||||
autofocus: ["", "autofocus"],
|
||||
disabled: ["", "disabled"],
|
||||
multiple: ["", "multiple"]
|
||||
}
|
||||
},
|
||||
small: s,
|
||||
source: { attrs: { src: null, type: null, media: null } },
|
||||
span: s,
|
||||
strike: s,
|
||||
strong: s,
|
||||
style: {
|
||||
attrs: {
|
||||
type: ["text/css"],
|
||||
media: media,
|
||||
scoped: null
|
||||
}
|
||||
},
|
||||
sub: s,
|
||||
summary: s,
|
||||
sup: s,
|
||||
table: s,
|
||||
tbody: s,
|
||||
td: { attrs: { colspan: null, rowspan: null, headers: null } },
|
||||
textarea: {
|
||||
attrs: {
|
||||
dirname: null, form: null, maxlength: null, name: null, placeholder: null,
|
||||
rows: null, cols: null,
|
||||
autofocus: ["", "autofocus"],
|
||||
disabled: ["", "disabled"],
|
||||
readonly: ["", "readonly"],
|
||||
required: ["", "required"],
|
||||
wrap: ["soft", "hard"]
|
||||
}
|
||||
},
|
||||
tfoot: s,
|
||||
th: { attrs: { colspan: null, rowspan: null, headers: null, scope: ["row", "col", "rowgroup", "colgroup"] } },
|
||||
thead: s,
|
||||
time: { attrs: { datetime: null } },
|
||||
title: s,
|
||||
tr: s,
|
||||
track: {
|
||||
attrs: {
|
||||
src: null, label: null, "default": null,
|
||||
kind: ["subtitles", "captions", "descriptions", "chapters", "metadata"],
|
||||
srclang: langs
|
||||
}
|
||||
},
|
||||
tt: s,
|
||||
u: s,
|
||||
ul: s,
|
||||
"var": s,
|
||||
video: {
|
||||
attrs: {
|
||||
src: null, poster: null, width: null, height: null,
|
||||
crossorigin: ["anonymous", "use-credentials"],
|
||||
preload: ["auto", "metadata", "none"],
|
||||
autoplay: ["", "autoplay"],
|
||||
mediagroup: ["movie"],
|
||||
muted: ["", "muted"],
|
||||
controls: ["", "controls"]
|
||||
}
|
||||
},
|
||||
wbr: s
|
||||
};
|
||||
|
||||
var globalAttrs = {
|
||||
accesskey: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
|
||||
"class": null,
|
||||
contenteditable: ["true", "false"],
|
||||
contextmenu: null,
|
||||
dir: ["ltr", "rtl", "auto"],
|
||||
draggable: ["true", "false", "auto"],
|
||||
dropzone: ["copy", "move", "link", "string:", "file:"],
|
||||
hidden: ["hidden"],
|
||||
id: null,
|
||||
inert: ["inert"],
|
||||
itemid: null,
|
||||
itemprop: null,
|
||||
itemref: null,
|
||||
itemscope: ["itemscope"],
|
||||
itemtype: null,
|
||||
lang: ["en", "es"],
|
||||
spellcheck: ["true", "false"],
|
||||
style: null,
|
||||
tabindex: ["1", "2", "3", "4", "5", "6", "7", "8", "9"],
|
||||
title: null,
|
||||
translate: ["yes", "no"],
|
||||
onclick: null,
|
||||
rel: ["stylesheet", "alternate", "author", "bookmark", "help", "license", "next", "nofollow", "noreferrer", "prefetch", "prev", "search", "tag"]
|
||||
};
|
||||
function populate(obj) {
|
||||
for (var attr in globalAttrs) if (globalAttrs.hasOwnProperty(attr))
|
||||
obj.attrs[attr] = globalAttrs[attr];
|
||||
}
|
||||
|
||||
populate(s);
|
||||
for (var tag in data) if (data.hasOwnProperty(tag) && data[tag] != s)
|
||||
populate(data[tag]);
|
||||
|
||||
CodeMirror.htmlSchema = data;
|
||||
function htmlHint(cm, options) {
|
||||
var local = {schemaInfo: data};
|
||||
if (options) for (var opt in options) local[opt] = options[opt];
|
||||
return CodeMirror.hint.xml(cm, local);
|
||||
}
|
||||
CodeMirror.registerHelper("hint", "html", htmlHint);
|
||||
});
|
@@ -1,146 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
var Pos = CodeMirror.Pos;
|
||||
|
||||
function forEach(arr, f) {
|
||||
for (var i = 0, e = arr.length; i < e; ++i) f(arr[i]);
|
||||
}
|
||||
|
||||
function arrayContains(arr, item) {
|
||||
if (!Array.prototype.indexOf) {
|
||||
var i = arr.length;
|
||||
while (i--) {
|
||||
if (arr[i] === item) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return arr.indexOf(item) != -1;
|
||||
}
|
||||
|
||||
function scriptHint(editor, keywords, getToken, options) {
|
||||
// Find the token at the cursor
|
||||
var cur = editor.getCursor(), token = getToken(editor, cur);
|
||||
if (/\b(?:string|comment)\b/.test(token.type)) return;
|
||||
token.state = CodeMirror.innerMode(editor.getMode(), token.state).state;
|
||||
|
||||
// If it's not a 'word-style' token, ignore the token.
|
||||
if (!/^[\w$_]*$/.test(token.string)) {
|
||||
token = {start: cur.ch, end: cur.ch, string: "", state: token.state,
|
||||
type: token.string == "." ? "property" : null};
|
||||
} else if (token.end > cur.ch) {
|
||||
token.end = cur.ch;
|
||||
token.string = token.string.slice(0, cur.ch - token.start);
|
||||
}
|
||||
|
||||
var tprop = token;
|
||||
// If it is a property, find out what it is a property of.
|
||||
while (tprop.type == "property") {
|
||||
tprop = getToken(editor, Pos(cur.line, tprop.start));
|
||||
if (tprop.string != ".") return;
|
||||
tprop = getToken(editor, Pos(cur.line, tprop.start));
|
||||
if (!context) var context = [];
|
||||
context.push(tprop);
|
||||
}
|
||||
return {list: getCompletions(token, context, keywords, options),
|
||||
from: Pos(cur.line, token.start),
|
||||
to: Pos(cur.line, token.end)};
|
||||
}
|
||||
|
||||
function javascriptHint(editor, options) {
|
||||
return scriptHint(editor, javascriptKeywords,
|
||||
function (e, cur) {return e.getTokenAt(cur);},
|
||||
options);
|
||||
};
|
||||
CodeMirror.registerHelper("hint", "javascript", javascriptHint);
|
||||
|
||||
function getCoffeeScriptToken(editor, cur) {
|
||||
// This getToken, it is for coffeescript, imitates the behavior of
|
||||
// getTokenAt method in javascript.js, that is, returning "property"
|
||||
// type and treat "." as indepenent token.
|
||||
var token = editor.getTokenAt(cur);
|
||||
if (cur.ch == token.start + 1 && token.string.charAt(0) == '.') {
|
||||
token.end = token.start;
|
||||
token.string = '.';
|
||||
token.type = "property";
|
||||
}
|
||||
else if (/^\.[\w$_]*$/.test(token.string)) {
|
||||
token.type = "property";
|
||||
token.start++;
|
||||
token.string = token.string.replace(/\./, '');
|
||||
}
|
||||
return token;
|
||||
}
|
||||
|
||||
function coffeescriptHint(editor, options) {
|
||||
return scriptHint(editor, coffeescriptKeywords, getCoffeeScriptToken, options);
|
||||
}
|
||||
CodeMirror.registerHelper("hint", "coffeescript", coffeescriptHint);
|
||||
|
||||
var stringProps = ("charAt charCodeAt indexOf lastIndexOf substring substr slice trim trimLeft trimRight " +
|
||||
"toUpperCase toLowerCase split concat match replace search").split(" ");
|
||||
var arrayProps = ("length concat join splice push pop shift unshift slice reverse sort indexOf " +
|
||||
"lastIndexOf every some filter forEach map reduce reduceRight ").split(" ");
|
||||
var funcProps = "prototype apply call bind".split(" ");
|
||||
var javascriptKeywords = ("break case catch continue debugger default delete do else false finally for function " +
|
||||
"if in instanceof new null return switch throw true try typeof var void while with").split(" ");
|
||||
var coffeescriptKeywords = ("and break catch class continue delete do else extends false finally for " +
|
||||
"if in instanceof isnt new no not null of off on or return switch then throw true try typeof until void while with yes").split(" ");
|
||||
|
||||
function getCompletions(token, context, keywords, options) {
|
||||
var found = [], start = token.string, global = options && options.globalScope || window;
|
||||
function maybeAdd(str) {
|
||||
if (str.lastIndexOf(start, 0) == 0 && !arrayContains(found, str)) found.push(str);
|
||||
}
|
||||
function gatherCompletions(obj) {
|
||||
if (typeof obj == "string") forEach(stringProps, maybeAdd);
|
||||
else if (obj instanceof Array) forEach(arrayProps, maybeAdd);
|
||||
else if (obj instanceof Function) forEach(funcProps, maybeAdd);
|
||||
for (var name in obj) maybeAdd(name);
|
||||
}
|
||||
|
||||
if (context && context.length) {
|
||||
// If this is a property, see if it belongs to some object we can
|
||||
// find in the current environment.
|
||||
var obj = context.pop(), base;
|
||||
if (obj.type && obj.type.indexOf("variable") === 0) {
|
||||
if (options && options.additionalContext)
|
||||
base = options.additionalContext[obj.string];
|
||||
if (!options || options.useGlobalScope !== false)
|
||||
base = base || global[obj.string];
|
||||
} else if (obj.type == "string") {
|
||||
base = "";
|
||||
} else if (obj.type == "atom") {
|
||||
base = 1;
|
||||
} else if (obj.type == "function") {
|
||||
if (global.jQuery != null && (obj.string == '$' || obj.string == 'jQuery') &&
|
||||
(typeof global.jQuery == 'function'))
|
||||
base = global.jQuery();
|
||||
else if (global._ != null && (obj.string == '_') && (typeof global._ == 'function'))
|
||||
base = global._();
|
||||
}
|
||||
while (base != null && context.length)
|
||||
base = base[context.pop().string];
|
||||
if (base != null) gatherCompletions(base);
|
||||
} else {
|
||||
// If not, just look in the global object and any local scope
|
||||
// (reading into JS mode internals to get at the local and global variables)
|
||||
for (var v = token.state.localVars; v; v = v.next) maybeAdd(v.name);
|
||||
for (var v = token.state.globalVars; v; v = v.next) maybeAdd(v.name);
|
||||
if (!options || options.useGlobalScope !== false)
|
||||
gatherCompletions(global);
|
||||
forEach(keywords, maybeAdd);
|
||||
}
|
||||
return found;
|
||||
}
|
||||
});
|
@@ -1,38 +0,0 @@
|
||||
.CodeMirror-hints {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
|
||||
-webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
|
||||
-moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
|
||||
box-shadow: 2px 3px 5px rgba(0,0,0,.2);
|
||||
border-radius: 3px;
|
||||
border: 1px solid silver;
|
||||
|
||||
background: white;
|
||||
font-size: 90%;
|
||||
font-family: monospace;
|
||||
|
||||
max-height: 20em;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.CodeMirror-hint {
|
||||
margin: 0;
|
||||
padding: 0 4px;
|
||||
border-radius: 2px;
|
||||
max-width: 19em;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li.CodeMirror-hint-active {
|
||||
background: #08f;
|
||||
color: white;
|
||||
}
|
434
webmaker/src/lib/codemirror/addon/hint/show-hint.js
vendored
@@ -1,434 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
var HINT_ELEMENT_CLASS = "CodeMirror-hint";
|
||||
var ACTIVE_HINT_ELEMENT_CLASS = "CodeMirror-hint-active";
|
||||
|
||||
// This is the old interface, kept around for now to stay
|
||||
// backwards-compatible.
|
||||
CodeMirror.showHint = function(cm, getHints, options) {
|
||||
if (!getHints) return cm.showHint(options);
|
||||
if (options && options.async) getHints.async = true;
|
||||
var newOpts = {hint: getHints};
|
||||
if (options) for (var prop in options) newOpts[prop] = options[prop];
|
||||
return cm.showHint(newOpts);
|
||||
};
|
||||
|
||||
CodeMirror.defineExtension("showHint", function(options) {
|
||||
options = parseOptions(this, this.getCursor("start"), options);
|
||||
var selections = this.listSelections()
|
||||
if (selections.length > 1) return;
|
||||
// By default, don't allow completion when something is selected.
|
||||
// A hint function can have a `supportsSelection` property to
|
||||
// indicate that it can handle selections.
|
||||
if (this.somethingSelected()) {
|
||||
if (!options.hint.supportsSelection) return;
|
||||
// Don't try with cross-line selections
|
||||
for (var i = 0; i < selections.length; i++)
|
||||
if (selections[i].head.line != selections[i].anchor.line) return;
|
||||
}
|
||||
|
||||
if (this.state.completionActive) this.state.completionActive.close();
|
||||
var completion = this.state.completionActive = new Completion(this, options);
|
||||
if (!completion.options.hint) return;
|
||||
|
||||
CodeMirror.signal(this, "startCompletion", this);
|
||||
completion.update(true);
|
||||
});
|
||||
|
||||
function Completion(cm, options) {
|
||||
this.cm = cm;
|
||||
this.options = options;
|
||||
this.widget = null;
|
||||
this.debounce = 0;
|
||||
this.tick = 0;
|
||||
this.startPos = this.cm.getCursor("start");
|
||||
this.startLen = this.cm.getLine(this.startPos.line).length - this.cm.getSelection().length;
|
||||
|
||||
var self = this;
|
||||
cm.on("cursorActivity", this.activityFunc = function() { self.cursorActivity(); });
|
||||
}
|
||||
|
||||
var requestAnimationFrame = window.requestAnimationFrame || function(fn) {
|
||||
return setTimeout(fn, 1000/60);
|
||||
};
|
||||
var cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
|
||||
|
||||
Completion.prototype = {
|
||||
close: function() {
|
||||
if (!this.active()) return;
|
||||
this.cm.state.completionActive = null;
|
||||
this.tick = null;
|
||||
this.cm.off("cursorActivity", this.activityFunc);
|
||||
|
||||
if (this.widget && this.data) CodeMirror.signal(this.data, "close");
|
||||
if (this.widget) this.widget.close();
|
||||
CodeMirror.signal(this.cm, "endCompletion", this.cm);
|
||||
},
|
||||
|
||||
active: function() {
|
||||
return this.cm.state.completionActive == this;
|
||||
},
|
||||
|
||||
pick: function(data, i) {
|
||||
var completion = data.list[i];
|
||||
if (completion.hint) completion.hint(this.cm, data, completion);
|
||||
else this.cm.replaceRange(getText(completion), completion.from || data.from,
|
||||
completion.to || data.to, "complete");
|
||||
CodeMirror.signal(data, "pick", completion);
|
||||
this.close();
|
||||
},
|
||||
|
||||
cursorActivity: function() {
|
||||
if (this.debounce) {
|
||||
cancelAnimationFrame(this.debounce);
|
||||
this.debounce = 0;
|
||||
}
|
||||
|
||||
var pos = this.cm.getCursor(), line = this.cm.getLine(pos.line);
|
||||
if (pos.line != this.startPos.line || line.length - pos.ch != this.startLen - this.startPos.ch ||
|
||||
pos.ch < this.startPos.ch || this.cm.somethingSelected() ||
|
||||
(pos.ch && this.options.closeCharacters.test(line.charAt(pos.ch - 1)))) {
|
||||
this.close();
|
||||
} else {
|
||||
var self = this;
|
||||
this.debounce = requestAnimationFrame(function() {self.update();});
|
||||
if (this.widget) this.widget.disable();
|
||||
}
|
||||
},
|
||||
|
||||
update: function(first) {
|
||||
if (this.tick == null) return
|
||||
var self = this, myTick = ++this.tick
|
||||
fetchHints(this.options.hint, this.cm, this.options, function(data) {
|
||||
if (self.tick == myTick) self.finishUpdate(data, first)
|
||||
})
|
||||
},
|
||||
|
||||
finishUpdate: function(data, first) {
|
||||
if (this.data) CodeMirror.signal(this.data, "update");
|
||||
|
||||
var picked = (this.widget && this.widget.picked) || (first && this.options.completeSingle);
|
||||
if (this.widget) this.widget.close();
|
||||
|
||||
if (data && this.data && isNewCompletion(this.data, data)) return;
|
||||
this.data = data;
|
||||
|
||||
if (data && data.list.length) {
|
||||
if (picked && data.list.length == 1) {
|
||||
this.pick(data, 0);
|
||||
} else {
|
||||
this.widget = new Widget(this, data);
|
||||
CodeMirror.signal(data, "shown");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function isNewCompletion(old, nw) {
|
||||
var moved = CodeMirror.cmpPos(nw.from, old.from)
|
||||
return moved > 0 && old.to.ch - old.from.ch != nw.to.ch - nw.from.ch
|
||||
}
|
||||
|
||||
function parseOptions(cm, pos, options) {
|
||||
var editor = cm.options.hintOptions;
|
||||
var out = {};
|
||||
for (var prop in defaultOptions) out[prop] = defaultOptions[prop];
|
||||
if (editor) for (var prop in editor)
|
||||
if (editor[prop] !== undefined) out[prop] = editor[prop];
|
||||
if (options) for (var prop in options)
|
||||
if (options[prop] !== undefined) out[prop] = options[prop];
|
||||
if (out.hint.resolve) out.hint = out.hint.resolve(cm, pos)
|
||||
return out;
|
||||
}
|
||||
|
||||
function getText(completion) {
|
||||
if (typeof completion == "string") return completion;
|
||||
else return completion.text;
|
||||
}
|
||||
|
||||
function buildKeyMap(completion, handle) {
|
||||
var baseMap = {
|
||||
Up: function() {handle.moveFocus(-1);},
|
||||
Down: function() {handle.moveFocus(1);},
|
||||
PageUp: function() {handle.moveFocus(-handle.menuSize() + 1, true);},
|
||||
PageDown: function() {handle.moveFocus(handle.menuSize() - 1, true);},
|
||||
Home: function() {handle.setFocus(0);},
|
||||
End: function() {handle.setFocus(handle.length - 1);},
|
||||
Enter: handle.pick,
|
||||
Tab: handle.pick,
|
||||
Esc: handle.close
|
||||
};
|
||||
var custom = completion.options.customKeys;
|
||||
var ourMap = custom ? {} : baseMap;
|
||||
function addBinding(key, val) {
|
||||
var bound;
|
||||
if (typeof val != "string")
|
||||
bound = function(cm) { return val(cm, handle); };
|
||||
// This mechanism is deprecated
|
||||
else if (baseMap.hasOwnProperty(val))
|
||||
bound = baseMap[val];
|
||||
else
|
||||
bound = val;
|
||||
ourMap[key] = bound;
|
||||
}
|
||||
if (custom)
|
||||
for (var key in custom) if (custom.hasOwnProperty(key))
|
||||
addBinding(key, custom[key]);
|
||||
var extra = completion.options.extraKeys;
|
||||
if (extra)
|
||||
for (var key in extra) if (extra.hasOwnProperty(key))
|
||||
addBinding(key, extra[key]);
|
||||
return ourMap;
|
||||
}
|
||||
|
||||
function getHintElement(hintsElement, el) {
|
||||
while (el && el != hintsElement) {
|
||||
if (el.nodeName.toUpperCase() === "LI" && el.parentNode == hintsElement) return el;
|
||||
el = el.parentNode;
|
||||
}
|
||||
}
|
||||
|
||||
function Widget(completion, data) {
|
||||
this.completion = completion;
|
||||
this.data = data;
|
||||
this.picked = false;
|
||||
var widget = this, cm = completion.cm;
|
||||
|
||||
var hints = this.hints = document.createElement("ul");
|
||||
hints.className = "CodeMirror-hints";
|
||||
this.selectedHint = data.selectedHint || 0;
|
||||
|
||||
var completions = data.list;
|
||||
for (var i = 0; i < completions.length; ++i) {
|
||||
var elt = hints.appendChild(document.createElement("li")), cur = completions[i];
|
||||
var className = HINT_ELEMENT_CLASS + (i != this.selectedHint ? "" : " " + ACTIVE_HINT_ELEMENT_CLASS);
|
||||
if (cur.className != null) className = cur.className + " " + className;
|
||||
elt.className = className;
|
||||
if (cur.render) cur.render(elt, data, cur);
|
||||
else elt.appendChild(document.createTextNode(cur.displayText || getText(cur)));
|
||||
elt.hintId = i;
|
||||
}
|
||||
|
||||
var pos = cm.cursorCoords(completion.options.alignWithWord ? data.from : null);
|
||||
var left = pos.left, top = pos.bottom, below = true;
|
||||
hints.style.left = left + "px";
|
||||
hints.style.top = top + "px";
|
||||
// If we're at the edge of the screen, then we want the menu to appear on the left of the cursor.
|
||||
var winW = window.innerWidth || Math.max(document.body.offsetWidth, document.documentElement.offsetWidth);
|
||||
var winH = window.innerHeight || Math.max(document.body.offsetHeight, document.documentElement.offsetHeight);
|
||||
(completion.options.container || document.body).appendChild(hints);
|
||||
var box = hints.getBoundingClientRect(), overlapY = box.bottom - winH;
|
||||
if (overlapY > 0) {
|
||||
var height = box.bottom - box.top, curTop = pos.top - (pos.bottom - box.top);
|
||||
if (curTop - height > 0) { // Fits above cursor
|
||||
hints.style.top = (top = pos.top - height) + "px";
|
||||
below = false;
|
||||
} else if (height > winH) {
|
||||
hints.style.height = (winH - 5) + "px";
|
||||
hints.style.top = (top = pos.bottom - box.top) + "px";
|
||||
var cursor = cm.getCursor();
|
||||
if (data.from.ch != cursor.ch) {
|
||||
pos = cm.cursorCoords(cursor);
|
||||
hints.style.left = (left = pos.left) + "px";
|
||||
box = hints.getBoundingClientRect();
|
||||
}
|
||||
}
|
||||
}
|
||||
var overlapX = box.right - winW;
|
||||
if (overlapX > 0) {
|
||||
if (box.right - box.left > winW) {
|
||||
hints.style.width = (winW - 5) + "px";
|
||||
overlapX -= (box.right - box.left) - winW;
|
||||
}
|
||||
hints.style.left = (left = pos.left - overlapX) + "px";
|
||||
}
|
||||
|
||||
cm.addKeyMap(this.keyMap = buildKeyMap(completion, {
|
||||
moveFocus: function(n, avoidWrap) { widget.changeActive(widget.selectedHint + n, avoidWrap); },
|
||||
setFocus: function(n) { widget.changeActive(n); },
|
||||
menuSize: function() { return widget.screenAmount(); },
|
||||
length: completions.length,
|
||||
close: function() { completion.close(); },
|
||||
pick: function() { widget.pick(); },
|
||||
data: data
|
||||
}));
|
||||
|
||||
if (completion.options.closeOnUnfocus) {
|
||||
var closingOnBlur;
|
||||
cm.on("blur", this.onBlur = function() { closingOnBlur = setTimeout(function() { completion.close(); }, 100); });
|
||||
cm.on("focus", this.onFocus = function() { clearTimeout(closingOnBlur); });
|
||||
}
|
||||
|
||||
var startScroll = cm.getScrollInfo();
|
||||
cm.on("scroll", this.onScroll = function() {
|
||||
var curScroll = cm.getScrollInfo(), editor = cm.getWrapperElement().getBoundingClientRect();
|
||||
var newTop = top + startScroll.top - curScroll.top;
|
||||
var point = newTop - (window.pageYOffset || (document.documentElement || document.body).scrollTop);
|
||||
if (!below) point += hints.offsetHeight;
|
||||
if (point <= editor.top || point >= editor.bottom) return completion.close();
|
||||
hints.style.top = newTop + "px";
|
||||
hints.style.left = (left + startScroll.left - curScroll.left) + "px";
|
||||
});
|
||||
|
||||
CodeMirror.on(hints, "dblclick", function(e) {
|
||||
var t = getHintElement(hints, e.target || e.srcElement);
|
||||
if (t && t.hintId != null) {widget.changeActive(t.hintId); widget.pick();}
|
||||
});
|
||||
|
||||
CodeMirror.on(hints, "click", function(e) {
|
||||
var t = getHintElement(hints, e.target || e.srcElement);
|
||||
if (t && t.hintId != null) {
|
||||
widget.changeActive(t.hintId);
|
||||
if (completion.options.completeOnSingleClick) widget.pick();
|
||||
}
|
||||
});
|
||||
|
||||
CodeMirror.on(hints, "mousedown", function() {
|
||||
setTimeout(function(){cm.focus();}, 20);
|
||||
});
|
||||
|
||||
CodeMirror.signal(data, "select", completions[0], hints.firstChild);
|
||||
return true;
|
||||
}
|
||||
|
||||
Widget.prototype = {
|
||||
close: function() {
|
||||
if (this.completion.widget != this) return;
|
||||
this.completion.widget = null;
|
||||
this.hints.parentNode.removeChild(this.hints);
|
||||
this.completion.cm.removeKeyMap(this.keyMap);
|
||||
|
||||
var cm = this.completion.cm;
|
||||
if (this.completion.options.closeOnUnfocus) {
|
||||
cm.off("blur", this.onBlur);
|
||||
cm.off("focus", this.onFocus);
|
||||
}
|
||||
cm.off("scroll", this.onScroll);
|
||||
},
|
||||
|
||||
disable: function() {
|
||||
this.completion.cm.removeKeyMap(this.keyMap);
|
||||
var widget = this;
|
||||
this.keyMap = {Enter: function() { widget.picked = true; }};
|
||||
this.completion.cm.addKeyMap(this.keyMap);
|
||||
},
|
||||
|
||||
pick: function() {
|
||||
this.completion.pick(this.data, this.selectedHint);
|
||||
},
|
||||
|
||||
changeActive: function(i, avoidWrap) {
|
||||
if (i >= this.data.list.length)
|
||||
i = avoidWrap ? this.data.list.length - 1 : 0;
|
||||
else if (i < 0)
|
||||
i = avoidWrap ? 0 : this.data.list.length - 1;
|
||||
if (this.selectedHint == i) return;
|
||||
var node = this.hints.childNodes[this.selectedHint];
|
||||
node.className = node.className.replace(" " + ACTIVE_HINT_ELEMENT_CLASS, "");
|
||||
node = this.hints.childNodes[this.selectedHint = i];
|
||||
node.className += " " + ACTIVE_HINT_ELEMENT_CLASS;
|
||||
if (node.offsetTop < this.hints.scrollTop)
|
||||
this.hints.scrollTop = node.offsetTop - 3;
|
||||
else if (node.offsetTop + node.offsetHeight > this.hints.scrollTop + this.hints.clientHeight)
|
||||
this.hints.scrollTop = node.offsetTop + node.offsetHeight - this.hints.clientHeight + 3;
|
||||
CodeMirror.signal(this.data, "select", this.data.list[this.selectedHint], node);
|
||||
},
|
||||
|
||||
screenAmount: function() {
|
||||
return Math.floor(this.hints.clientHeight / this.hints.firstChild.offsetHeight) || 1;
|
||||
}
|
||||
};
|
||||
|
||||
function applicableHelpers(cm, helpers) {
|
||||
if (!cm.somethingSelected()) return helpers
|
||||
var result = []
|
||||
for (var i = 0; i < helpers.length; i++)
|
||||
if (helpers[i].supportsSelection) result.push(helpers[i])
|
||||
return result
|
||||
}
|
||||
|
||||
function fetchHints(hint, cm, options, callback) {
|
||||
if (hint.async) {
|
||||
hint(cm, callback, options)
|
||||
} else {
|
||||
var result = hint(cm, options)
|
||||
if (result && result.then) result.then(callback)
|
||||
else callback(result)
|
||||
}
|
||||
}
|
||||
|
||||
function resolveAutoHints(cm, pos) {
|
||||
var helpers = cm.getHelpers(pos, "hint"), words
|
||||
if (helpers.length) {
|
||||
var resolved = function(cm, callback, options) {
|
||||
var app = applicableHelpers(cm, helpers);
|
||||
function run(i) {
|
||||
if (i == app.length) return callback(null)
|
||||
fetchHints(app[i], cm, options, function(result) {
|
||||
if (result && result.list.length > 0) callback(result)
|
||||
else run(i + 1)
|
||||
})
|
||||
}
|
||||
run(0)
|
||||
}
|
||||
resolved.async = true
|
||||
resolved.supportsSelection = true
|
||||
return resolved
|
||||
} else if (words = cm.getHelper(cm.getCursor(), "hintWords")) {
|
||||
return function(cm) { return CodeMirror.hint.fromList(cm, {words: words}) }
|
||||
} else if (CodeMirror.hint.anyword) {
|
||||
return function(cm, options) { return CodeMirror.hint.anyword(cm, options) }
|
||||
} else {
|
||||
return function() {}
|
||||
}
|
||||
}
|
||||
|
||||
CodeMirror.registerHelper("hint", "auto", {
|
||||
resolve: resolveAutoHints
|
||||
});
|
||||
|
||||
CodeMirror.registerHelper("hint", "fromList", function(cm, options) {
|
||||
var cur = cm.getCursor(), token = cm.getTokenAt(cur);
|
||||
var to = CodeMirror.Pos(cur.line, token.end);
|
||||
if (token.string && /\w/.test(token.string[token.string.length - 1])) {
|
||||
var term = token.string, from = CodeMirror.Pos(cur.line, token.start);
|
||||
} else {
|
||||
var term = "", from = to;
|
||||
}
|
||||
var found = [];
|
||||
for (var i = 0; i < options.words.length; i++) {
|
||||
var word = options.words[i];
|
||||
if (word.slice(0, term.length) == term)
|
||||
found.push(word);
|
||||
}
|
||||
|
||||
if (found.length) return {list: found, from: from, to: to};
|
||||
});
|
||||
|
||||
CodeMirror.commands.autocomplete = CodeMirror.showHint;
|
||||
|
||||
var defaultOptions = {
|
||||
hint: CodeMirror.hint.auto,
|
||||
completeSingle: true,
|
||||
alignWithWord: true,
|
||||
closeCharacters: /[\s()\[\]{};:>,]/,
|
||||
closeOnUnfocus: true,
|
||||
completeOnSingleClick: true,
|
||||
container: null,
|
||||
customKeys: null,
|
||||
extraKeys: null
|
||||
};
|
||||
|
||||
CodeMirror.defineOption("hintOptions", null);
|
||||
});
|
281
webmaker/src/lib/codemirror/addon/hint/sql-hint.js
vendored
@@ -1,281 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"), require("../../mode/sql/sql"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror", "../../mode/sql/sql"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
var tables;
|
||||
var defaultTable;
|
||||
var keywords;
|
||||
var CONS = {
|
||||
QUERY_DIV: ";",
|
||||
ALIAS_KEYWORD: "AS"
|
||||
};
|
||||
var Pos = CodeMirror.Pos;
|
||||
|
||||
function isArray(val) { return Object.prototype.toString.call(val) == "[object Array]" }
|
||||
|
||||
function getKeywords(editor) {
|
||||
var mode = editor.doc.modeOption;
|
||||
if (mode === "sql") mode = "text/x-sql";
|
||||
return CodeMirror.resolveMode(mode).keywords;
|
||||
}
|
||||
|
||||
function getText(item) {
|
||||
return typeof item == "string" ? item : item.text;
|
||||
}
|
||||
|
||||
function wrapTable(name, value) {
|
||||
if (isArray(value)) value = {columns: value}
|
||||
if (!value.text) value.text = name
|
||||
return value
|
||||
}
|
||||
|
||||
function parseTables(input) {
|
||||
var result = {}
|
||||
if (isArray(input)) {
|
||||
for (var i = input.length - 1; i >= 0; i--) {
|
||||
var item = input[i]
|
||||
result[getText(item).toUpperCase()] = wrapTable(getText(item), item)
|
||||
}
|
||||
} else if (input) {
|
||||
for (var name in input)
|
||||
result[name.toUpperCase()] = wrapTable(name, input[name])
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function getTable(name) {
|
||||
return tables[name.toUpperCase()]
|
||||
}
|
||||
|
||||
function shallowClone(object) {
|
||||
var result = {};
|
||||
for (var key in object) if (object.hasOwnProperty(key))
|
||||
result[key] = object[key];
|
||||
return result;
|
||||
}
|
||||
|
||||
function match(string, word) {
|
||||
var len = string.length;
|
||||
var sub = getText(word).substr(0, len);
|
||||
return string.toUpperCase() === sub.toUpperCase();
|
||||
}
|
||||
|
||||
function addMatches(result, search, wordlist, formatter) {
|
||||
if (isArray(wordlist)) {
|
||||
for (var i = 0; i < wordlist.length; i++)
|
||||
if (match(search, wordlist[i])) result.push(formatter(wordlist[i]))
|
||||
} else {
|
||||
for (var word in wordlist) if (wordlist.hasOwnProperty(word)) {
|
||||
var val = wordlist[word]
|
||||
if (!val || val === true)
|
||||
val = word
|
||||
else
|
||||
val = val.displayText ? {text: val.text, displayText: val.displayText} : val.text
|
||||
if (match(search, val)) result.push(formatter(val))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function cleanName(name) {
|
||||
// Get rid name from backticks(`) and preceding dot(.)
|
||||
if (name.charAt(0) == ".") {
|
||||
name = name.substr(1);
|
||||
}
|
||||
return name.replace(/`/g, "");
|
||||
}
|
||||
|
||||
function insertBackticks(name) {
|
||||
var nameParts = getText(name).split(".");
|
||||
for (var i = 0; i < nameParts.length; i++)
|
||||
nameParts[i] = "`" + nameParts[i] + "`";
|
||||
var escaped = nameParts.join(".");
|
||||
if (typeof name == "string") return escaped;
|
||||
name = shallowClone(name);
|
||||
name.text = escaped;
|
||||
return name;
|
||||
}
|
||||
|
||||
function nameCompletion(cur, token, result, editor) {
|
||||
// Try to complete table, column names and return start position of completion
|
||||
var useBacktick = false;
|
||||
var nameParts = [];
|
||||
var start = token.start;
|
||||
var cont = true;
|
||||
while (cont) {
|
||||
cont = (token.string.charAt(0) == ".");
|
||||
useBacktick = useBacktick || (token.string.charAt(0) == "`");
|
||||
|
||||
start = token.start;
|
||||
nameParts.unshift(cleanName(token.string));
|
||||
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
if (token.string == ".") {
|
||||
cont = true;
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
}
|
||||
}
|
||||
|
||||
// Try to complete table names
|
||||
var string = nameParts.join(".");
|
||||
addMatches(result, string, tables, function(w) {
|
||||
return useBacktick ? insertBackticks(w) : w;
|
||||
});
|
||||
|
||||
// Try to complete columns from defaultTable
|
||||
addMatches(result, string, defaultTable, function(w) {
|
||||
return useBacktick ? insertBackticks(w) : w;
|
||||
});
|
||||
|
||||
// Try to complete columns
|
||||
string = nameParts.pop();
|
||||
var table = nameParts.join(".");
|
||||
|
||||
var alias = false;
|
||||
var aliasTable = table;
|
||||
// Check if table is available. If not, find table by Alias
|
||||
if (!getTable(table)) {
|
||||
var oldTable = table;
|
||||
table = findTableByAlias(table, editor);
|
||||
if (table !== oldTable) alias = true;
|
||||
}
|
||||
|
||||
var columns = getTable(table);
|
||||
if (columns && columns.columns)
|
||||
columns = columns.columns;
|
||||
|
||||
if (columns) {
|
||||
addMatches(result, string, columns, function(w) {
|
||||
var tableInsert = table;
|
||||
if (alias == true) tableInsert = aliasTable;
|
||||
if (typeof w == "string") {
|
||||
w = tableInsert + "." + w;
|
||||
} else {
|
||||
w = shallowClone(w);
|
||||
w.text = tableInsert + "." + w.text;
|
||||
}
|
||||
return useBacktick ? insertBackticks(w) : w;
|
||||
});
|
||||
}
|
||||
|
||||
return start;
|
||||
}
|
||||
|
||||
function eachWord(lineText, f) {
|
||||
if (!lineText) return;
|
||||
var excepted = /[,;]/g;
|
||||
var words = lineText.split(" ");
|
||||
for (var i = 0; i < words.length; i++) {
|
||||
f(words[i]?words[i].replace(excepted, '') : '');
|
||||
}
|
||||
}
|
||||
|
||||
function convertCurToNumber(cur) {
|
||||
// max characters of a line is 999,999.
|
||||
return cur.line + cur.ch / Math.pow(10, 6);
|
||||
}
|
||||
|
||||
function convertNumberToCur(num) {
|
||||
return Pos(Math.floor(num), +num.toString().split('.').pop());
|
||||
}
|
||||
|
||||
function findTableByAlias(alias, editor) {
|
||||
var doc = editor.doc;
|
||||
var fullQuery = doc.getValue();
|
||||
var aliasUpperCase = alias.toUpperCase();
|
||||
var previousWord = "";
|
||||
var table = "";
|
||||
var separator = [];
|
||||
var validRange = {
|
||||
start: Pos(0, 0),
|
||||
end: Pos(editor.lastLine(), editor.getLineHandle(editor.lastLine()).length)
|
||||
};
|
||||
|
||||
//add separator
|
||||
var indexOfSeparator = fullQuery.indexOf(CONS.QUERY_DIV);
|
||||
while(indexOfSeparator != -1) {
|
||||
separator.push(doc.posFromIndex(indexOfSeparator));
|
||||
indexOfSeparator = fullQuery.indexOf(CONS.QUERY_DIV, indexOfSeparator+1);
|
||||
}
|
||||
separator.unshift(Pos(0, 0));
|
||||
separator.push(Pos(editor.lastLine(), editor.getLineHandle(editor.lastLine()).text.length));
|
||||
|
||||
//find valid range
|
||||
var prevItem = 0;
|
||||
var current = convertCurToNumber(editor.getCursor());
|
||||
for (var i = 0; i < separator.length; i++) {
|
||||
var _v = convertCurToNumber(separator[i]);
|
||||
if (current > prevItem && current <= _v) {
|
||||
validRange = { start: convertNumberToCur(prevItem), end: convertNumberToCur(_v) };
|
||||
break;
|
||||
}
|
||||
prevItem = _v;
|
||||
}
|
||||
|
||||
var query = doc.getRange(validRange.start, validRange.end, false);
|
||||
|
||||
for (var i = 0; i < query.length; i++) {
|
||||
var lineText = query[i];
|
||||
eachWord(lineText, function(word) {
|
||||
var wordUpperCase = word.toUpperCase();
|
||||
if (wordUpperCase === aliasUpperCase && getTable(previousWord))
|
||||
table = previousWord;
|
||||
if (wordUpperCase !== CONS.ALIAS_KEYWORD)
|
||||
previousWord = word;
|
||||
});
|
||||
if (table) break;
|
||||
}
|
||||
return table;
|
||||
}
|
||||
|
||||
CodeMirror.registerHelper("hint", "sql", function(editor, options) {
|
||||
tables = parseTables(options && options.tables)
|
||||
var defaultTableName = options && options.defaultTable;
|
||||
var disableKeywords = options && options.disableKeywords;
|
||||
defaultTable = defaultTableName && getTable(defaultTableName);
|
||||
keywords = keywords || getKeywords(editor);
|
||||
|
||||
if (defaultTableName && !defaultTable)
|
||||
defaultTable = findTableByAlias(defaultTableName, editor);
|
||||
|
||||
defaultTable = defaultTable || [];
|
||||
|
||||
if (defaultTable.columns)
|
||||
defaultTable = defaultTable.columns;
|
||||
|
||||
var cur = editor.getCursor();
|
||||
var result = [];
|
||||
var token = editor.getTokenAt(cur), start, end, search;
|
||||
if (token.end > cur.ch) {
|
||||
token.end = cur.ch;
|
||||
token.string = token.string.slice(0, cur.ch - token.start);
|
||||
}
|
||||
|
||||
if (token.string.match(/^[.`\w@]\w*$/)) {
|
||||
search = token.string;
|
||||
start = token.start;
|
||||
end = token.end;
|
||||
} else {
|
||||
start = end = cur.ch;
|
||||
search = "";
|
||||
}
|
||||
if (search.charAt(0) == "." || search.charAt(0) == "`") {
|
||||
start = nameCompletion(cur, token, result, editor);
|
||||
} else {
|
||||
addMatches(result, search, tables, function(w) {return w;});
|
||||
addMatches(result, search, defaultTable, function(w) {return w;});
|
||||
if (!disableKeywords)
|
||||
addMatches(result, search, keywords, function(w) {return w.toUpperCase();});
|
||||
}
|
||||
|
||||
return {list: result, from: Pos(cur.line, start), to: Pos(cur.line, end)};
|
||||
});
|
||||
});
|
110
webmaker/src/lib/codemirror/addon/hint/xml-hint.js
vendored
@@ -1,110 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
var Pos = CodeMirror.Pos;
|
||||
|
||||
function getHints(cm, options) {
|
||||
var tags = options && options.schemaInfo;
|
||||
var quote = (options && options.quoteChar) || '"';
|
||||
if (!tags) return;
|
||||
var cur = cm.getCursor(), token = cm.getTokenAt(cur);
|
||||
if (token.end > cur.ch) {
|
||||
token.end = cur.ch;
|
||||
token.string = token.string.slice(0, cur.ch - token.start);
|
||||
}
|
||||
var inner = CodeMirror.innerMode(cm.getMode(), token.state);
|
||||
if (inner.mode.name != "xml") return;
|
||||
var result = [], replaceToken = false, prefix;
|
||||
var tag = /\btag\b/.test(token.type) && !/>$/.test(token.string);
|
||||
var tagName = tag && /^\w/.test(token.string), tagStart;
|
||||
|
||||
if (tagName) {
|
||||
var before = cm.getLine(cur.line).slice(Math.max(0, token.start - 2), token.start);
|
||||
var tagType = /<\/$/.test(before) ? "close" : /<$/.test(before) ? "open" : null;
|
||||
if (tagType) tagStart = token.start - (tagType == "close" ? 2 : 1);
|
||||
} else if (tag && token.string == "<") {
|
||||
tagType = "open";
|
||||
} else if (tag && token.string == "</") {
|
||||
tagType = "close";
|
||||
}
|
||||
|
||||
if (!tag && !inner.state.tagName || tagType) {
|
||||
if (tagName)
|
||||
prefix = token.string;
|
||||
replaceToken = tagType;
|
||||
var cx = inner.state.context, curTag = cx && tags[cx.tagName];
|
||||
var childList = cx ? curTag && curTag.children : tags["!top"];
|
||||
if (childList && tagType != "close") {
|
||||
for (var i = 0; i < childList.length; ++i) if (!prefix || childList[i].lastIndexOf(prefix, 0) == 0)
|
||||
result.push("<" + childList[i]);
|
||||
} else if (tagType != "close") {
|
||||
for (var name in tags)
|
||||
if (tags.hasOwnProperty(name) && name != "!top" && name != "!attrs" && (!prefix || name.lastIndexOf(prefix, 0) == 0))
|
||||
result.push("<" + name);
|
||||
}
|
||||
if (cx && (!prefix || tagType == "close" && cx.tagName.lastIndexOf(prefix, 0) == 0))
|
||||
result.push("</" + cx.tagName + ">");
|
||||
} else {
|
||||
// Attribute completion
|
||||
var curTag = tags[inner.state.tagName], attrs = curTag && curTag.attrs;
|
||||
var globalAttrs = tags["!attrs"];
|
||||
if (!attrs && !globalAttrs) return;
|
||||
if (!attrs) {
|
||||
attrs = globalAttrs;
|
||||
} else if (globalAttrs) { // Combine tag-local and global attributes
|
||||
var set = {};
|
||||
for (var nm in globalAttrs) if (globalAttrs.hasOwnProperty(nm)) set[nm] = globalAttrs[nm];
|
||||
for (var nm in attrs) if (attrs.hasOwnProperty(nm)) set[nm] = attrs[nm];
|
||||
attrs = set;
|
||||
}
|
||||
if (token.type == "string" || token.string == "=") { // A value
|
||||
var before = cm.getRange(Pos(cur.line, Math.max(0, cur.ch - 60)),
|
||||
Pos(cur.line, token.type == "string" ? token.start : token.end));
|
||||
var atName = before.match(/([^\s\u00a0=<>\"\']+)=$/), atValues;
|
||||
if (!atName || !attrs.hasOwnProperty(atName[1]) || !(atValues = attrs[atName[1]])) return;
|
||||
if (typeof atValues == 'function') atValues = atValues.call(this, cm); // Functions can be used to supply values for autocomplete widget
|
||||
if (token.type == "string") {
|
||||
prefix = token.string;
|
||||
var n = 0;
|
||||
if (/['"]/.test(token.string.charAt(0))) {
|
||||
quote = token.string.charAt(0);
|
||||
prefix = token.string.slice(1);
|
||||
n++;
|
||||
}
|
||||
var len = token.string.length;
|
||||
if (/['"]/.test(token.string.charAt(len - 1))) {
|
||||
quote = token.string.charAt(len - 1);
|
||||
prefix = token.string.substr(n, len - 2);
|
||||
}
|
||||
replaceToken = true;
|
||||
}
|
||||
for (var i = 0; i < atValues.length; ++i) if (!prefix || atValues[i].lastIndexOf(prefix, 0) == 0)
|
||||
result.push(quote + atValues[i] + quote);
|
||||
} else { // An attribute name
|
||||
if (token.type == "attribute") {
|
||||
prefix = token.string;
|
||||
replaceToken = true;
|
||||
}
|
||||
for (var attr in attrs) if (attrs.hasOwnProperty(attr) && (!prefix || attr.lastIndexOf(prefix, 0) == 0))
|
||||
result.push(attr);
|
||||
}
|
||||
}
|
||||
return {
|
||||
list: result,
|
||||
from: replaceToken ? Pos(cur.line, tagStart == null ? token.start : tagStart) : cur,
|
||||
to: replaceToken ? Pos(cur.line, token.end) : cur
|
||||
};
|
||||
}
|
||||
|
||||
CodeMirror.registerHelper("hint", "xml", getHints);
|
||||
});
|
@@ -1,41 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
// Depends on coffeelint.js from http://www.coffeelint.org/js/coffeelint.js
|
||||
|
||||
// declare global: coffeelint
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
CodeMirror.registerHelper("lint", "coffeescript", function(text) {
|
||||
var found = [];
|
||||
var parseError = function(err) {
|
||||
var loc = err.lineNumber;
|
||||
found.push({from: CodeMirror.Pos(loc-1, 0),
|
||||
to: CodeMirror.Pos(loc, 0),
|
||||
severity: err.level,
|
||||
message: err.message});
|
||||
};
|
||||
try {
|
||||
var res = coffeelint.lint(text);
|
||||
for(var i = 0; i < res.length; i++) {
|
||||
parseError(res[i]);
|
||||
}
|
||||
} catch(e) {
|
||||
found.push({from: CodeMirror.Pos(e.location.first_line, 0),
|
||||
to: CodeMirror.Pos(e.location.last_line, e.location.last_column),
|
||||
severity: 'error',
|
||||
message: e.message});
|
||||
}
|
||||
return found;
|
||||
});
|
||||
|
||||
});
|
@@ -1,35 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
// Depends on csslint.js from https://github.com/stubbornella/csslint
|
||||
|
||||
// declare global: CSSLint
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
CodeMirror.registerHelper("lint", "css", function(text) {
|
||||
var found = [];
|
||||
if (!window.CSSLint) return found;
|
||||
var results = CSSLint.verify(text), messages = results.messages, message = null;
|
||||
for ( var i = 0; i < messages.length; i++) {
|
||||
message = messages[i];
|
||||
var startLine = message.line -1, endLine = message.line -1, startCol = message.col -1, endCol = message.col;
|
||||
found.push({
|
||||
from: CodeMirror.Pos(startLine, startCol),
|
||||
to: CodeMirror.Pos(endLine, endCol),
|
||||
message: message.message,
|
||||
severity : message.type
|
||||
});
|
||||
}
|
||||
return found;
|
||||
});
|
||||
|
||||
});
|
@@ -1,46 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
// Depends on htmlhint.js from http://htmlhint.com/js/htmlhint.js
|
||||
|
||||
// declare global: HTMLHint
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"), require("htmlhint"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror", "htmlhint"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
var defaultRules = {
|
||||
"tagname-lowercase": true,
|
||||
"attr-lowercase": true,
|
||||
"attr-value-double-quotes": true,
|
||||
"doctype-first": false,
|
||||
"tag-pair": true,
|
||||
"spec-char-escape": true,
|
||||
"id-unique": true,
|
||||
"src-not-empty": true,
|
||||
"attr-no-duplication": true
|
||||
};
|
||||
|
||||
CodeMirror.registerHelper("lint", "html", function(text, options) {
|
||||
var found = [];
|
||||
if (!window.HTMLHint) return found;
|
||||
var messages = HTMLHint.verify(text, options && options.rules || defaultRules);
|
||||
for (var i = 0; i < messages.length; i++) {
|
||||
var message = messages[i];
|
||||
var startLine = message.line - 1, endLine = message.line - 1, startCol = message.col - 1, endCol = message.col;
|
||||
found.push({
|
||||
from: CodeMirror.Pos(startLine, startCol),
|
||||
to: CodeMirror.Pos(endLine, endCol),
|
||||
message: message.message,
|
||||
severity : message.type
|
||||
});
|
||||
}
|
||||
return found;
|
||||
});
|
||||
});
|
@@ -1,136 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
// declare global: JSHINT
|
||||
|
||||
var bogus = [ "Dangerous comment" ];
|
||||
|
||||
var warnings = [ [ "Expected '{'",
|
||||
"Statement body should be inside '{ }' braces." ] ];
|
||||
|
||||
var errors = [ "Missing semicolon", "Extra comma", "Missing property name",
|
||||
"Unmatched ", " and instead saw", " is not defined",
|
||||
"Unclosed string", "Stopping, unable to continue" ];
|
||||
|
||||
function validator(text, options) {
|
||||
if (!window.JSHINT) return [];
|
||||
JSHINT(text, options, options.globals);
|
||||
var errors = JSHINT.data().errors, result = [];
|
||||
if (errors) parseErrors(errors, result);
|
||||
return result;
|
||||
}
|
||||
|
||||
CodeMirror.registerHelper("lint", "javascript", validator);
|
||||
|
||||
function cleanup(error) {
|
||||
// All problems are warnings by default
|
||||
fixWith(error, warnings, "warning", true);
|
||||
fixWith(error, errors, "error");
|
||||
|
||||
return isBogus(error) ? null : error;
|
||||
}
|
||||
|
||||
function fixWith(error, fixes, severity, force) {
|
||||
var description, fix, find, replace, found;
|
||||
|
||||
description = error.description;
|
||||
|
||||
for ( var i = 0; i < fixes.length; i++) {
|
||||
fix = fixes[i];
|
||||
find = (typeof fix === "string" ? fix : fix[0]);
|
||||
replace = (typeof fix === "string" ? null : fix[1]);
|
||||
found = description.indexOf(find) !== -1;
|
||||
|
||||
if (force || found) {
|
||||
error.severity = severity;
|
||||
}
|
||||
if (found && replace) {
|
||||
error.description = replace;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function isBogus(error) {
|
||||
var description = error.description;
|
||||
for ( var i = 0; i < bogus.length; i++) {
|
||||
if (description.indexOf(bogus[i]) !== -1) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function parseErrors(errors, output) {
|
||||
for ( var i = 0; i < errors.length; i++) {
|
||||
var error = errors[i];
|
||||
if (error) {
|
||||
var linetabpositions, index;
|
||||
|
||||
linetabpositions = [];
|
||||
|
||||
// This next block is to fix a problem in jshint. Jshint
|
||||
// replaces
|
||||
// all tabs with spaces then performs some checks. The error
|
||||
// positions (character/space) are then reported incorrectly,
|
||||
// not taking the replacement step into account. Here we look
|
||||
// at the evidence line and try to adjust the character position
|
||||
// to the correct value.
|
||||
if (error.evidence) {
|
||||
// Tab positions are computed once per line and cached
|
||||
var tabpositions = linetabpositions[error.line];
|
||||
if (!tabpositions) {
|
||||
var evidence = error.evidence;
|
||||
tabpositions = [];
|
||||
// ugggh phantomjs does not like this
|
||||
// forEachChar(evidence, function(item, index) {
|
||||
Array.prototype.forEach.call(evidence, function(item,
|
||||
index) {
|
||||
if (item === '\t') {
|
||||
// First col is 1 (not 0) to match error
|
||||
// positions
|
||||
tabpositions.push(index + 1);
|
||||
}
|
||||
});
|
||||
linetabpositions[error.line] = tabpositions;
|
||||
}
|
||||
if (tabpositions.length > 0) {
|
||||
var pos = error.character;
|
||||
tabpositions.forEach(function(tabposition) {
|
||||
if (pos > tabposition) pos -= 1;
|
||||
});
|
||||
error.character = pos;
|
||||
}
|
||||
}
|
||||
|
||||
var start = error.character - 1, end = start + 1;
|
||||
if (error.evidence) {
|
||||
index = error.evidence.substring(start).search(/.\b/);
|
||||
if (index > -1) {
|
||||
end += index;
|
||||
}
|
||||
}
|
||||
|
||||
// Convert to format expected by validation service
|
||||
error.description = error.reason;// + "(jshint)";
|
||||
error.start = error.character;
|
||||
error.end = end;
|
||||
error = cleanup(error);
|
||||
|
||||
if (error)
|
||||
output.push({message: error.description,
|
||||
severity: error.severity,
|
||||
from: CodeMirror.Pos(error.line - 1, start),
|
||||
to: CodeMirror.Pos(error.line - 1, end)});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
@@ -1,31 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
// Depends on jsonlint.js from https://github.com/zaach/jsonlint
|
||||
|
||||
// declare global: jsonlint
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
CodeMirror.registerHelper("lint", "json", function(text) {
|
||||
var found = [];
|
||||
jsonlint.parseError = function(str, hash) {
|
||||
var loc = hash.loc;
|
||||
found.push({from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
|
||||
to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
|
||||
message: str});
|
||||
};
|
||||
try { jsonlint.parse(text); }
|
||||
catch(e) {}
|
||||
return found;
|
||||
});
|
||||
|
||||
});
|
73
webmaker/src/lib/codemirror/addon/lint/lint.css
vendored
@@ -1,73 +0,0 @@
|
||||
/* The lint marker gutter */
|
||||
.CodeMirror-lint-markers {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-tooltip {
|
||||
background-color: infobackground;
|
||||
border: 1px solid black;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
color: infotext;
|
||||
font-family: monospace;
|
||||
font-size: 10pt;
|
||||
overflow: hidden;
|
||||
padding: 2px 5px;
|
||||
position: fixed;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
z-index: 100;
|
||||
max-width: 600px;
|
||||
opacity: 0;
|
||||
transition: opacity .4s;
|
||||
-moz-transition: opacity .4s;
|
||||
-webkit-transition: opacity .4s;
|
||||
-o-transition: opacity .4s;
|
||||
-ms-transition: opacity .4s;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning {
|
||||
background-position: left bottom;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-mark-error {
|
||||
background-image:
|
||||
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==")
|
||||
;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-mark-warning {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
|
||||
}
|
||||
|
||||
.CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning {
|
||||
padding-left: 18px;
|
||||
background-position: top left;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
|
||||
}
|
||||
|
||||
.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
|
||||
}
|
||||
|
||||
.CodeMirror-lint-marker-multiple {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right bottom;
|
||||
width: 100%; height: 100%;
|
||||
}
|
239
webmaker/src/lib/codemirror/addon/lint/lint.js
vendored
@@ -1,239 +0,0 @@
|
||||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
var GUTTER_ID = "CodeMirror-lint-markers";
|
||||
|
||||
function showTooltip(e, content) {
|
||||
var tt = document.createElement("div");
|
||||
tt.className = "CodeMirror-lint-tooltip";
|
||||
tt.appendChild(content.cloneNode(true));
|
||||
document.body.appendChild(tt);
|
||||
|
||||
function position(e) {
|
||||
if (!tt.parentNode) return CodeMirror.off(document, "mousemove", position);
|
||||
tt.style.top = Math.max(0, e.clientY - tt.offsetHeight - 5) + "px";
|
||||
tt.style.left = (e.clientX + 5) + "px";
|
||||
}
|
||||
CodeMirror.on(document, "mousemove", position);
|
||||
position(e);
|
||||
if (tt.style.opacity != null) tt.style.opacity = 1;
|
||||
return tt;
|
||||
}
|
||||
function rm(elt) {
|
||||
if (elt.parentNode) elt.parentNode.removeChild(elt);
|
||||
}
|
||||
function hideTooltip(tt) {
|
||||
if (!tt.parentNode) return;
|
||||
if (tt.style.opacity == null) rm(tt);
|
||||
tt.style.opacity = 0;
|
||||
setTimeout(function() { rm(tt); }, 600);
|
||||
}
|
||||
|
||||
function showTooltipFor(e, content, node) {
|
||||
var tooltip = showTooltip(e, content);
|
||||
function hide() {
|
||||
CodeMirror.off(node, "mouseout", hide);
|
||||
if (tooltip) { hideTooltip(tooltip); tooltip = null; }
|
||||
}
|
||||
var poll = setInterval(function() {
|
||||
if (tooltip) for (var n = node;; n = n.parentNode) {
|
||||
if (n && n.nodeType == 11) n = n.host;
|
||||
if (n == document.body) return;
|
||||
if (!n) { hide(); break; }
|
||||
}
|
||||
if (!tooltip) return clearInterval(poll);
|
||||
}, 400);
|
||||
CodeMirror.on(node, "mouseout", hide);
|
||||
}
|
||||
|
||||
function LintState(cm, options, hasGutter) {
|
||||
this.marked = [];
|
||||
this.options = options;
|
||||
this.timeout = null;
|
||||
this.hasGutter = hasGutter;
|
||||
this.onMouseOver = function(e) { onMouseOver(cm, e); };
|
||||
this.waitingFor = 0
|
||||
}
|
||||
|
||||
function parseOptions(_cm, options) {
|
||||
if (options instanceof Function) return {getAnnotations: options};
|
||||
if (!options || options === true) options = {};
|
||||
return options;
|
||||
}
|
||||
|
||||
function clearMarks(cm) {
|
||||
var state = cm.state.lint;
|
||||
if (state.hasGutter) cm.clearGutter(GUTTER_ID);
|
||||
for (var i = 0; i < state.marked.length; ++i)
|
||||
state.marked[i].clear();
|
||||
state.marked.length = 0;
|
||||
}
|
||||
|
||||
function makeMarker(labels, severity, multiple, tooltips) {
|
||||
var marker = document.createElement("div"), inner = marker;
|
||||
marker.className = "CodeMirror-lint-marker-" + severity;
|
||||
if (multiple) {
|
||||
inner = marker.appendChild(document.createElement("div"));
|
||||
inner.className = "CodeMirror-lint-marker-multiple";
|
||||
}
|
||||
|
||||
if (tooltips != false) CodeMirror.on(inner, "mouseover", function(e) {
|
||||
showTooltipFor(e, labels, inner);
|
||||
});
|
||||
|
||||
return marker;
|
||||
}
|
||||
|
||||
function getMaxSeverity(a, b) {
|
||||
if (a == "error") return a;
|
||||
else return b;
|
||||
}
|
||||
|
||||
function groupByLine(annotations) {
|
||||
var lines = [];
|
||||
for (var i = 0; i < annotations.length; ++i) {
|
||||
var ann = annotations[i], line = ann.from.line;
|
||||
(lines[line] || (lines[line] = [])).push(ann);
|
||||
}
|
||||
return lines;
|
||||
}
|
||||
|
||||
function annotationTooltip(ann) {
|
||||
var severity = ann.severity;
|
||||
if (!severity) severity = "error";
|
||||
var tip = document.createElement("div");
|
||||
tip.className = "CodeMirror-lint-message-" + severity;
|
||||
tip.appendChild(document.createTextNode(ann.message));
|
||||
return tip;
|
||||
}
|
||||
|
||||
function lintAsync(cm, getAnnotations, passOptions) {
|
||||
var state = cm.state.lint
|
||||
var id = ++state.waitingFor
|
||||
function abort() {
|
||||
id = -1
|
||||
cm.off("change", abort)
|
||||
}
|
||||
cm.on("change", abort)
|
||||
getAnnotations(cm.getValue(), function(annotations, arg2) {
|
||||
cm.off("change", abort)
|
||||
if (state.waitingFor != id) return
|
||||
if (arg2 && annotations instanceof CodeMirror) annotations = arg2
|
||||
updateLinting(cm, annotations)
|
||||
}, passOptions, cm);
|
||||
}
|
||||
|
||||
function startLinting(cm) {
|
||||
var state = cm.state.lint, options = state.options;
|
||||
var passOptions = options.options || options; // Support deprecated passing of `options` property in options
|
||||
var getAnnotations = options.getAnnotations || cm.getHelper(CodeMirror.Pos(0, 0), "lint");
|
||||
if (!getAnnotations) return;
|
||||
if (options.async || getAnnotations.async) {
|
||||
lintAsync(cm, getAnnotations, passOptions)
|
||||
} else {
|
||||
updateLinting(cm, getAnnotations(cm.getValue(), passOptions, cm));
|
||||
}
|
||||
}
|
||||
|
||||
function updateLinting(cm, annotationsNotSorted) {
|
||||
clearMarks(cm);
|
||||
var state = cm.state.lint, options = state.options;
|
||||
|
||||
var annotations = groupByLine(annotationsNotSorted);
|
||||
|
||||
for (var line = 0; line < annotations.length; ++line) {
|
||||
var anns = annotations[line];
|
||||
if (!anns) continue;
|
||||
|
||||
var maxSeverity = null;
|
||||
var tipLabel = state.hasGutter && document.createDocumentFragment();
|
||||
|
||||
for (var i = 0; i < anns.length; ++i) {
|
||||
var ann = anns[i];
|
||||
var severity = ann.severity;
|
||||
if (!severity) severity = "error";
|
||||
maxSeverity = getMaxSeverity(maxSeverity, severity);
|
||||
|
||||
if (options.formatAnnotation) ann = options.formatAnnotation(ann);
|
||||
if (state.hasGutter) tipLabel.appendChild(annotationTooltip(ann));
|
||||
|
||||
if (ann.to) state.marked.push(cm.markText(ann.from, ann.to, {
|
||||
className: "CodeMirror-lint-mark-" + severity,
|
||||
__annotation: ann
|
||||
}));
|
||||
}
|
||||
|
||||
if (state.hasGutter)
|
||||
cm.setGutterMarker(line, GUTTER_ID, makeMarker(tipLabel, maxSeverity, anns.length > 1,
|
||||
state.options.tooltips));
|
||||
}
|
||||
if (options.onUpdateLinting) options.onUpdateLinting(annotationsNotSorted, annotations, cm);
|
||||
}
|
||||
|
||||
function onChange(cm) {
|
||||
var state = cm.state.lint;
|
||||
if (!state) return;
|
||||
clearTimeout(state.timeout);
|
||||
state.timeout = setTimeout(function(){startLinting(cm);}, state.options.delay || 500);
|
||||
}
|
||||
|
||||
function popupTooltips(annotations, e) {
|
||||
var target = e.target || e.srcElement;
|
||||
var tooltip = document.createDocumentFragment();
|
||||
for (var i = 0; i < annotations.length; i++) {
|
||||
var ann = annotations[i];
|
||||
tooltip.appendChild(annotationTooltip(ann));
|
||||
}
|
||||
showTooltipFor(e, tooltip, target);
|
||||
}
|
||||
|
||||
function onMouseOver(cm, e) {
|
||||
var target = e.target || e.srcElement;
|
||||
if (!/\bCodeMirror-lint-mark-/.test(target.className)) return;
|
||||
var box = target.getBoundingClientRect(), x = (box.left + box.right) / 2, y = (box.top + box.bottom) / 2;
|
||||
var spans = cm.findMarksAt(cm.coordsChar({left: x, top: y}, "client"));
|
||||
|
||||
var annotations = [];
|
||||
for (var i = 0; i < spans.length; ++i) {
|
||||
var ann = spans[i].__annotation;
|
||||
if (ann) annotations.push(ann);
|
||||
}
|
||||
if (annotations.length) popupTooltips(annotations, e);
|
||||
}
|
||||
|
||||
CodeMirror.defineOption("lint", false, function(cm, val, old) {
|
||||
if (old && old != CodeMirror.Init) {
|
||||
clearMarks(cm);
|
||||
if (cm.state.lint.options.lintOnChange !== false)
|
||||
cm.off("change", onChange);
|
||||
CodeMirror.off(cm.getWrapperElement(), "mouseover", cm.state.lint.onMouseOver);
|
||||
clearTimeout(cm.state.lint.timeout);
|
||||
delete cm.state.lint;
|
||||
}
|
||||
|
||||
if (val) {
|
||||
var gutters = cm.getOption("gutters"), hasLintGutter = false;
|
||||
for (var i = 0; i < gutters.length; ++i) if (gutters[i] == GUTTER_ID) hasLintGutter = true;
|
||||
var state = cm.state.lint = new LintState(cm, parseOptions(cm, val), hasLintGutter);
|
||||
if (state.options.lintOnChange !== false)
|
||||
cm.on("change", onChange);
|
||||
if (state.options.tooltips != false)
|
||||
CodeMirror.on(cm.getWrapperElement(), "mouseover", state.onMouseOver);
|
||||
|
||||
startLinting(cm);
|
||||
}
|
||||
});
|
||||
|
||||
CodeMirror.defineExtension("performLint", function() {
|
||||
if (this.state.lint) startLinting(this);
|
||||
});
|
||||
});
|