`;
17 | html += `
18 |
19 | ${currentPosition}
20 |
21 | `;
22 | html += '
';
23 | return html;
24 | }
25 |
26 | if (commits.length === 0) {
27 | return '';
28 | }
29 | return commits.map(process).join('');
30 | };
31 |
32 | export default function story(state, onChange) {
33 | const container = el.withFallback('.read-only');
34 | const git = state.git();
35 |
36 | if (!container.found()) return;
37 |
38 | const render = () => {
39 | DEBUG && console.log('story:render');
40 | const allCommits = git.log();
41 | const commits = Object.keys(allCommits).map(hash => ({
42 | hash,
43 | message: allCommits[hash].message,
44 | position: allCommits[hash].meta ? parseInt(allCommits[hash].meta.position, 10) || null : null
45 | })).sort((a, b) => {
46 | if (a.position !== null && b.position !== null) {
47 | return a.position - b.position;
48 | } else if (a.position !== null && b.position === null) {
49 | return -1;
50 | } else if (a.position === null && b.position !== null) {
51 | return 1;
52 | }
53 | return a.hash - b.hash;
54 | });
55 | const numOfCommits = commits.length;
56 | const diffs = commitDiff(numOfCommits > 0 ? git.show().files : [], git.getAll());
57 | const renderedCommits = renderCommits(git, commits);
58 |
59 | container.attr('class', 'editor-section story');
60 | container.content(`
61 | ${ renderedCommits !== '' ? '' + renderedCommits + '
' : '' }
62 | `).forEach(el => {
63 | if (el.attr('data-export') === 'checkoutLink') {
64 | el.onClick(() => {
65 | const hashToCheckout = el.attr('data-hash');
66 |
67 | if (diffs.length > 0) {
68 | confirmPopUp(
69 | 'Checkout',
70 | 'You are about to checkout another commit. You have an unstaged changes. Are you sure?',
71 | decision => {
72 | if (decision && allCommits[hashToCheckout]) {
73 | git.checkout(hashToCheckout, true);
74 | onChange();
75 | render();
76 | }
77 | }
78 | );
79 | } else {
80 | if (allCommits[hashToCheckout]) {
81 | git.checkout(hashToCheckout);
82 | onChange();
83 | render();
84 | }
85 | }
86 | });
87 | }
88 | });
89 | };
90 |
91 | state.listen(event => {
92 | render();
93 | });
94 |
95 | render();
96 | }
97 |
--------------------------------------------------------------------------------
/src/js-vendor/overlay.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | // CodeMirror, copyright (c) by Marijn Haverbeke and others
3 | // Distributed under an MIT license: https://codemirror.net/LICENSE
4 |
5 | // Utility function that allows modes to be combined. The mode given
6 | // as the base argument takes care of most of the normal mode
7 | // functionality, but a second (typically simple) mode is used, which
8 | // can override the style of text. Both modes get to parse all of the
9 | // text, but when both assign a non-null style to a piece of code, the
10 | // overlay wins, unless the combine argument was true and not overridden,
11 | // or state.overlay.combineTokens was true, in which case the styles are
12 | // combined.
13 |
14 | (function(mod) {
15 | if (typeof exports == "object" && typeof module == "object") // CommonJS
16 | mod(require("../../lib/codemirror"));
17 | else if (typeof define == "function" && define.amd) // AMD
18 | define(["../../lib/codemirror"], mod);
19 | else // Plain browser env
20 | mod(CodeMirror);
21 | })(function(CodeMirror) {
22 | "use strict";
23 |
24 | CodeMirror.overlayMode = function(base, overlay, combine) {
25 | return {
26 | startState: function() {
27 | return {
28 | base: CodeMirror.startState(base),
29 | overlay: CodeMirror.startState(overlay),
30 | basePos: 0, baseCur: null,
31 | overlayPos: 0, overlayCur: null,
32 | streamSeen: null
33 | };
34 | },
35 | copyState: function(state) {
36 | return {
37 | base: CodeMirror.copyState(base, state.base),
38 | overlay: CodeMirror.copyState(overlay, state.overlay),
39 | basePos: state.basePos, baseCur: null,
40 | overlayPos: state.overlayPos, overlayCur: null
41 | };
42 | },
43 |
44 | token: function(stream, state) {
45 | if (stream != state.streamSeen ||
46 | Math.min(state.basePos, state.overlayPos) < stream.start) {
47 | state.streamSeen = stream;
48 | state.basePos = state.overlayPos = stream.start;
49 | }
50 |
51 | if (stream.start == state.basePos) {
52 | state.baseCur = base.token(stream, state.base);
53 | state.basePos = stream.pos;
54 | }
55 | if (stream.start == state.overlayPos) {
56 | stream.pos = stream.start;
57 | state.overlayCur = overlay.token(stream, state.overlay);
58 | state.overlayPos = stream.pos;
59 | }
60 | stream.pos = Math.min(state.basePos, state.overlayPos);
61 |
62 | // state.overlay.combineTokens always takes precedence over combine,
63 | // unless set to null
64 | if (state.overlayCur == null) return state.baseCur;
65 | else if (state.baseCur != null &&
66 | state.overlay.combineTokens ||
67 | combine && state.overlay.combineTokens == null)
68 | return state.baseCur + " " + state.overlayCur;
69 | else return state.overlayCur;
70 | },
71 |
72 | indent: base.indent && function(state, textAfter, line) {
73 | return base.indent(state.base, textAfter, line);
74 | },
75 | electricChars: base.electricChars,
76 |
77 | innerMode: function(state) { return {state: state.base, mode: base}; },
78 |
79 | blankLine: function(state) {
80 | var baseToken, overlayToken;
81 | if (base.blankLine) baseToken = base.blankLine(state.base);
82 | if (overlay.blankLine) overlayToken = overlay.blankLine(state.overlay);
83 |
84 | return overlayToken == null ?
85 | baseToken :
86 | (combine && baseToken != null ? baseToken + " " + overlayToken : overlayToken);
87 | }
88 | };
89 | };
90 |
91 | });
--------------------------------------------------------------------------------
/src/js/story/renderCommits.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len, no-use-before-define */
2 | import { CHECK_ICON, CLOSE_ICON, TRASH_ICON, DOT_CIRCLE, BOOK } from '../utils/icons';
3 | import getTitleFromCommitMessage from './getTitleFromCommitMessage';
4 |
5 | export default function renderCommits(git, commits, editMode, currentlyEditingHash) {
6 | function process(commit) {
7 | const { hash, message, position } = commit;
8 | const isEditing = currentlyEditingHash === hash && editMode;
9 | const currentPosition = position && position > 0 ? `${position}` : '';
10 | const messageFirstLine = getTitleFromCommitMessage(message);
11 | const isCurrent = git.head() === hash;
12 | let html = '';
13 |
14 | html += ``;
15 | html += !isEditing ? `
16 |
17 | ${currentPosition}
18 |
19 | ` : '';
20 | if (isEditing) {
21 | html += `
22 | ${CHECK_ICON(12)} save
23 | ${ git.head() !== hash ? `${ DOT_CIRCLE(12) } checkout` : '' }
24 | ${ TRASH_ICON(12) } delete
25 |
26 | ${ CLOSE_ICON(12) }
27 |
28 |
29 | 32 | 37 | `; 38 | } else { 39 | html += ` 40 | 41 | ${ BOOK(12) + ' edit' } 42 | 43 | `; 44 | } 45 | html += '
';
46 |
47 | if (isEditing) {
48 | html += `
49 | 29 | 32 | 37 | `; 38 | } else { 39 | html += ` 40 | 41 | ${ BOOK(12) + ' edit' } 42 | 43 | `; 44 | } 45 | html += '
50 |
51 |
52 | `;
53 | }
54 | return html;
55 | }
56 |
57 | if (commits.length === 0) {
58 | return '';
59 | }
60 | return commits.map(process).join('');
61 | };
62 |
63 | function getPublishOptions(git, currentHash) {
64 | const allCommits = git.log();
65 | const { meta } = allCommits[currentHash];
66 | const currentPosition = meta ? parseInt(meta.position, 10) : 0;
67 | let options = [];
68 |
69 | options.push(``);
70 | for (let i = 1; i < Object.keys(allCommits).length + 1; i++) {
71 | options.push(``);
72 | }
73 |
74 | return options.join('');
75 | }
76 | function getFileInjectionOptions(git, currentHash) {
77 | const files = git.show(currentHash).files;
78 |
79 | return files.map(file => ``);
80 | }
81 |
--------------------------------------------------------------------------------
/samples/Canvas.json:
--------------------------------------------------------------------------------
1 | {
2 | "editor": {
3 | "theme": "dark",
4 | "statusBar": true,
5 | "layout": {
6 | "name": "layoutEO",
7 | "direction": "horizontal",
8 | "sizes": [
9 | 69.0625,
10 | 30.9375
11 | ],
12 | "elements": [
13 | "editor",
14 | "output"
15 | ]
16 | }
17 | },
18 | "dependencies": [],
19 | "files": [
20 | {
21 | "content": "import 'layout.html';\nimport 'styles.css';\n\n// JS Port of PlusParticle\n// k3lab ( http://wonderfl.net/user/k3lab )\n// http://wa.zozuar.org/code.php?c=hEiW\n\"use strict\";\nconst canvas = document.querySelector(\"canvas\");\nconst ctx = canvas.getContext(\"2d\", { lowLatency: true, alpha: false });\nconst w = (canvas.width = canvas.offsetWidth / 2);\nconst h = (canvas.height = canvas.offsetHeight / 2);\n///////////////////////////////////////\nconst createDot = () => {\n\tconst dot = document.createElement('canvas');\n\tdot.width = 20;\n\tdot.height = 20;\n\tconst ctx = dot.getContext(\"2d\");\n\tctx.globalCompositeOperation = \"xor\";\n\tctx.fillStyle = \"#fff\";\n\tctx.fillRect(0, 10 - 2, 20, 2);\n\tctx.fillRect(10 - 2, 0, 2, 20);\n\treturn dot;\n}\n///////////////////////////////////////\nconst Particle = class {\n\tconstructor(x, y, z) {\n\t\tthis.x = x;\n\t\tthis.y = y;\n\t\tthis.z = z;\n\t}\n};\n///////////////////////////////////////\nconst count = 4000;\nconst degree = 2 * Math.PI / count;\nconst particles = [];\nconst dot = createDot();\n///////////////////////////////////////\nconst run = time => {\n\trequestAnimationFrame(run);\n\tctx.fillRect(0, 0, w, h);\n\tconst horizontal = Math.sin(time / 2000) * 2;\n\tconst vertical = Math.sin(time / 30000);\n\tconst cosY = Math.cos(horizontal);\n\tconst sinY = Math.sin(horizontal);\n\tconst cosX = Math.cos(vertical);\n\tconst sinX = Math.sin(vertical);\n\tconst s = 2500 + 1500 * Math.sin(time / 1000);\n\tconst a = s * 2 / count;\n\tconst round = degree * 2 * Math.sin(time / 10000);\n\tfor (let i = 0; i < count; i++) {\n\t\tconst p = particles[i];\n\t\tconst size = s * Math.sin(time / 10000 + i / 10);\n\t\tconst radius = size * Math.sin(degree / 2 * i);\n\t\tp.x = radius * Math.sin(round * i + time / 1000);\n\t\tp.y = radius * Math.cos(round * i + time / 1000);\n\t\tp.z = -s + i * a;\n\t\tconst z1 = p.z * cosY + p.x * sinY;\n\t\tconst z2 = z1 * cosX + p.y * sinX;\n\t\tif (z2 > -600) {\n\t\t\tconst perspective = 300 / (600 + z2);\n\t\t\tconst px = w / 2 + (p.x * cosY - p.z * sinY) * perspective;\n\t\t\tconst py = h / 2 + (p.y * cosX - z1 * sinX) * perspective;\n\t\t\tif (px > -30 && px < w && py > -30 && py < h) {\n\t\t\t\tlet wi = (z2 - 200) * -1 / 200;\n\t\t\t\tif (wi < 0.1) wi = 0.1;\n\t\t\t\tctx.save();\n\t\t\t\tctx.translate(px, py);\n\t\t\t\tctx.rotate(i / 100);\n\t\t\t\tctx.scale(wi, wi);\n\t\t\t\tctx.drawImage(dot, -10, -10);\n\t\t\t\tctx.restore();\n\t\t\t}\n\t\t}\n\t}\n};\n///////////////////////////////////////\nfor (let i = 0; i < count; i++) {\n\tparticles.push(\n\t\tnew Particle(\n\t\t\t200 * Math.sin(degree * i),\n\t\t\t200 * Math.cos(degree * i),\n\t\t\t-100 + i / 100\n\t\t)\n\t);\n}\nrun();\n",
22 | "filename": "app.js",
23 | "entryPoint": true,
24 | "editing": false
25 | },
26 | {
27 | "content": "",
28 | "filename": "layout.html",
29 | "editing": false
30 | },
31 | {
32 | "content": "#output {\n\toverflow: hidden;\n\ttouch-action: none;\n\tcontent-zooming: none;\n\tmargin: 0;\n\tpadding: 0;\n\twidth: 100%;\n\theight: 100%;\n\tbackground: #111;\n}\n#output canvas {\n\tposition:absolute;\n width: 100%;\n height: 100%;\n\tbackground: #000;\n}",
33 | "filename": "styles.css",
34 | "editing": false
35 | }
36 | ]
37 | }
--------------------------------------------------------------------------------
/src/js/popups/settingsPopUp.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len */
2 | import Layout from 'layout-architect';
3 | import createPopup from './popup';
4 | import { LAYOUT_BLOCKS, DEFAULT_LAYOUT } from '../layout';
5 | import { IS_PROD } from '../constants';
6 |
7 | const generateIframe = url => ``;
8 |
9 | export default function settingsPopUp(
10 | enableDownload,
11 | { layout, theme },
12 | dependenciesStr,
13 | onDepsUpdated,
14 | onGeneralUpdate,
15 | defaultTab,
16 | version
17 | ) {
18 | return new Promise(done => createPopup({
19 | defaultTab: defaultTab || 0,
20 | buttons: [
21 | 'General',
22 | 'Dependencies',
23 | 'Export/Share',
24 | 'About'
25 | ],
26 | content: [
27 | `
28 | 29 | Theme: 30 | 34 |
35 |Layout:
36 | 37 | 38 | `, 39 | ` 40 | 41 |(Separate your dependencies by a new line)
42 | 43 | `, 44 | ` 45 |Embed
46 | 47 | ${ IS_PROD ? ` 48 |Download/Offline mode
49 |The archive contains all the files that you need to run the app locally. Including your dependencies.
50 | ` : '' } 51 | `, 52 | ` 53 |
54 | v${ version }
55 | On the web: poet.krasimir.now.sh
56 | GitHub repo: github.com/krasimir/poet.krasimir.now.sh.feedback
57 |
');
32 | await loadAppDeps();
33 |
34 | // Initializing CodeMirror
35 | const codeMirrorEditor = codeMirror(
36 | container.empty(),
37 | state.getEditorSettings(),
38 | state.getActiveFileContent(),
39 | onSave,
40 | function onChange() {
41 | listener(ON_FILE_CHANGE);
42 | },
43 | function showFile(index) {
44 | state.setActiveFileByIndex(index);
45 | loadFileInEditor();
46 | },
47 | function onSelection(code, list) {
48 | listener(ON_SELECT, { code, list }, codeMirrorEditor);
49 | }
50 | );
51 |
52 | // The function that we call to execute a file
53 | async function loadFileInEditor() {
54 | clearConsole();
55 | codeMirrorEditor.setValue(state.getActiveFileContent());
56 | if (!isEmbedded()) { codeMirrorEditor.focus(); }
57 | switch (state.getActiveFile().split('.').pop().toLowerCase()) {
58 | case 'css': codeMirrorEditor.setOption('mode', 'css'); break;
59 | case 'scss': codeMirrorEditor.setOption('mode', 'css'); break;
60 | case 'html': codeMirrorEditor.setOption('mode', 'htmlmixed'); break;
61 | case 'md':
62 | codeMirrorEditor.setOption('mode', {
63 | name: 'gfm',
64 | highlightFormatting: true,
65 | emoji: true,
66 | xml: true
67 | });
68 | break;
69 | default: codeMirrorEditor.setOption('mode', 'jsx'); break;
70 | }
71 | execute();
72 | }
73 |
74 | return { loadFileInEditor, save: () => {
75 | onSave(codeMirrorEditor.getValue());
76 | codeMirrorEditor.focus();
77 | }};
78 | }
79 |
80 | function codeMirror(container, editorSettings, value, onSave, onChange, showFile, onSelection) {
81 | defineCodeMirrorCommands(CodeMirror);
82 |
83 | const editor = CodeMirror(container.e, {
84 | value: value || '',
85 | mode: 'jsx',
86 | tabSize: 2,
87 | lineNumbers: false,
88 | autofocus: false,
89 | foldGutter: false,
90 | gutters: [],
91 | styleSelectedText: true,
92 | matchBrackets: true,
93 | autoCloseBrackets: true,
94 | lineWrapping: true,
95 | theme: editorSettings.theme,
96 | highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }
97 | });
98 | const save = () => onSave(editor.getValue());
99 | const change = (instance, { origin }) => {
100 | if (origin !== 'setValue') {
101 | onChange(editor.getValue());
102 | }
103 | };
104 |
105 | editor.on('change', change);
106 | editor.setOption('extraKeys', {
107 | 'Ctrl-S': save,
108 | 'Cmd-S': save,
109 | 'Cmd-1': () => showFile(0),
110 | 'Cmd-2': () => showFile(1),
111 | 'Cmd-3': () => showFile(2),
112 | 'Cmd-4': () => showFile(3),
113 | 'Cmd-5': () => showFile(4),
114 | 'Cmd-6': () => showFile(5),
115 | 'Cmd-7': () => showFile(6),
116 | 'Cmd-8': () => showFile(7),
117 | 'Cmd-9': () => showFile(8),
118 | 'Ctrl-1': () => showFile(0),
119 | 'Ctrl-2': () => showFile(1),
120 | 'Ctrl-3': () => showFile(2),
121 | 'Ctrl-4': () => showFile(3),
122 | 'Ctrl-5': () => showFile(4),
123 | 'Ctrl-6': () => showFile(5),
124 | 'Ctrl-7': () => showFile(6),
125 | 'Ctrl-8': () => showFile(7),
126 | 'Ctrl-9': () => showFile(8),
127 | 'Cmd-D': 'selectNextOccurrence',
128 | 'Ctrl-D': 'selectNextOccurrence',
129 | 'Cmd-/': 'toggleCommentIndented',
130 | 'Ctrl-/': 'toggleCommentIndented'
131 | });
132 | CodeMirror.normalizeKeyMap();
133 |
134 | container.onMouseUp(() => {
135 | const selection = editor.getSelection();
136 | const list = editor.listSelections();
137 |
138 | selection !== '' && onSelection(selection, list);
139 | });
140 |
141 | return editor;
142 | };
143 |
--------------------------------------------------------------------------------
/src/js-vendor/split.js:
--------------------------------------------------------------------------------
1 | /*! Split.js - v1.5.7 */
2 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Split=t()}(this,function(){"use strict";var B=window,L=B.document,T="addEventListener",N="removeEventListener",R="getBoundingClientRect",q="horizontal",H=function(){return!1},I=B.attachEvent&&!B[T],i=["","-webkit-","-moz-","-o-"].filter(function(e){var t=L.createElement("div");return t.style.cssText="width:"+e+"calc(9px)",!!t.style.length}).shift()+"calc",s=function(e){return"string"==typeof e||e instanceof String},W=function(e){if(s(e)){var t=L.querySelector(e);if(!t)throw new Error("Selector "+e+" did not match a DOM element");return t}return e},X=function(e,t,n){var r=e[t];return void 0!==r?r:n},Y=function(e,t,n,r){if(t){if("end"===r)return 0;if("center"===r)return e/2}else if(n){if("start"===r)return 0;if("center"===r)return e/2}return e},G=function(e,t){var n=L.createElement("div");return n.className="gutter gutter-"+t,n},J=function(e,t,n){var r={};return s(t)?r[e]=t:r[e]=I?t+"%":i+"("+t+"% - "+n+"px)",r},K=function(e,t){var n;return(n={})[e]=t+"px",n};return function(e,i){void 0===i&&(i={});var u,t,s,o,r,a,l=e;Array.from&&(l=Array.from(l));var c=W(l[0]).parentNode,f=getComputedStyle?getComputedStyle(c).flexDirection:null,m=X(i,"sizes")||l.map(function(){return 100/l.length}),n=X(i,"minSize",100),h=Array.isArray(n)?n:l.map(function(){return n}),d=X(i,"expandToMin",!1),g=X(i,"gutterSize",10),v=X(i,"gutterAlign","center"),p=X(i,"snapOffset",30),y=X(i,"dragInterval",1),z=X(i,"direction",q),S=X(i,"cursor",z===q?"col-resize":"row-resize"),b=X(i,"gutter",G),_=X(i,"elementStyle",J),E=X(i,"gutterStyle",K);function w(t,e,n,r){var i=_(u,e,n,r);Object.keys(i).forEach(function(e){t.style[e]=i[e]})}function k(){return a.map(function(e){return e.size})}function x(e){return"touches"in e?e.touches[0][t]:e[t]}function M(e){var t=a[this.a],n=a[this.b],r=t.size+n.size;t.size=e/this.size*r,n.size=r-e/this.size*r,w(t.element,t.size,this._b,t.i),w(n.element,n.size,this._c,n.i)}function U(){var e=a[this.a].element,t=a[this.b].element,n=e[R](),r=t[R]();this.size=n[u]+r[u]+this._b+this._c,this.start=n[s],this.end=n[o]}function O(s){var o=function(e){if(!getComputedStyle)return null;var t=getComputedStyle(e),n=e[r];return n-=z===q?parseFloat(t.paddingLeft)+parseFloat(t.paddingRight):parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)}(c);if(null===o)return s;var a=0,u=[],e=s.map(function(e,t){var n=o*e/100,r=Y(g,0===t,t===s.length-1,v),i=h[t]+r;return n
');
35 | files.forEach(([ filename, file ]) => {
36 | const isCurrentFile = state.isCurrentFile(filename);
37 |
38 | items.push(createLink(
39 | 'file:' + filename,
40 | `${ filename }${ isCurrentFile && pending ? '*' : ''}`,
41 | `file${ isCurrentFile ? ' active' : '' }${ file.en ? ' entry' : ''}`
42 | ));
43 | });
44 | items.push(createLink('newFileButton', PLUS_ICON(14), 'new-file'));
45 | items.push(`
46 |
52 | `);
53 | items.push(createLink('menuButton', BARS(14)));
54 | items.push(createLink('closeButton', CLOSE_ICON(14)));
55 | items.push('
');
56 |
57 | // `/login?did=${ demoId }`;
58 | // '/u/' + state.getProfile().id;
59 | IS_PROD && menuItems.push(createLink(
60 | 'profileButton',
61 | state.loggedIn() ?
62 | showProfilePicAndName(state.getProfile()) + ' Profile' :
63 | NO_USER() + ' Log in',
64 | 'profile',
65 | state.loggedIn() ?
66 | '/u/' + state.getProfile().id :
67 | `/login?did=${ state.getDemoId() }`
68 | ));
69 | IS_PROD && menuItems.push(createLink('', PLUS_ICON(14) + ' New story', '', '/new'));
70 | state.isForkable() && menuItems.push(createLink('forkButton', FORK(14) + ' Fork'));
71 | IS_PROD && menuItems.push(createLink('shareButton', SHARE(14) + ' Share/Embed'));
72 | state.isDemoOwner() && menuItems.push(createLink('nameButton', SETTINGS_ICON(14) + ' Story'));
73 | menuItems.push(createLink('settingsButton', SETTINGS_ICON(14) + ' Editor'));
74 | state.isForkable() && menuItems.push(createLink('', NO_USER() + ' Log out', '', `/logout?r=e/${ state.getDemoId() }`));
75 |
76 | bar.content(items.join('')).forEach(button => {
77 | if (button.attr('data-export').indexOf('file') === 0) {
78 | const filename = button.attr('data-export').split(':').pop();
79 |
80 | button.onClick(() => {
81 | if (!state.isCurrentFile(filename)) {
82 | showFile(filename);
83 | } else if (pending) {
84 | saveCurrentFile();
85 | }
86 | });
87 | button.onRightClick(() => editFile(filename));
88 | }
89 | });
90 | menu.content(menuItems.join(''));
91 |
92 | const { newFileButton, closeButton, menuButton } = bar.namedExports();
93 | const { forkButton, shareButton, nameButton, settingsButton } = menu.namedExports();
94 |
95 | const manageVisibility = () => {
96 | const { buttons } = bar.namedExports();
97 |
98 | buttons.css('display', visibility ? 'grid' : 'none');
99 | buttons.css('gridTemplateColumns', [
100 | createStr('minmax(auto, 135px) ', state.getNumOfFiles() + 1),
101 | '30px',
102 | '1fr',
103 | '30px',
104 | '30px'
105 | ].filter(value => value).join(' '));
106 | bar.css('height', visibility ? STATUS_BAR_VISIBLE_HEIGHT : STATUS_BAR_HIDDEN_HEIGHT);
107 | layout.css('height', visibility ? `calc(100% - ${ STATUS_BAR_VISIBLE_HEIGHT })` : `calc(100% - ${ STATUS_BAR_HIDDEN_HEIGHT })`);
108 | state.updateStatusBarVisibility(visibility);
109 | };
110 |
111 | newFileButton && newFileButton.onClick(newFile);
112 | shareButton && shareButton.onClick(() => (showSettings(2), toggleMenu()));
113 | settingsButton && settingsButton.onClick(() => (showSettings(), toggleMenu()));
114 | state.isDemoOwner() && nameButton && nameButton.onClick(() => (editName(), toggleMenu()));
115 | forkButton && forkButton.onClick(() => (state.fork(), toggleMenu()));
116 | menuButton && menuButton.onClick(toggleMenu);
117 | closeButton.onClick(e => {
118 | e.stopPropagation();
119 | visibility = false;
120 | manageVisibility();
121 | });
122 | bar.onClick(() => {
123 | if (!visibility) {
124 | visibility = true;
125 | manageVisibility();
126 | }
127 | });
128 |
129 | manageVisibility();
130 | };
131 |
132 | render();
133 |
134 | state.listen(render);
135 |
136 | return (value) => {
137 | pending = value;
138 | render();
139 | };
140 | }
141 |
--------------------------------------------------------------------------------
/src/js-vendor/htmlmixed.js:
--------------------------------------------------------------------------------
1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others
2 | // Distributed under an MIT license: https://codemirror.net/LICENSE
3 |
4 | (function(mod) {
5 | if (typeof exports == "object" && typeof module == "object") // CommonJS
6 | mod(require("../../lib/codemirror"), require("../xml/xml"), require("../javascript/javascript"), require("../css/css"));
7 | else if (typeof define == "function" && define.amd) // AMD
8 | define(["../../lib/codemirror", "../xml/xml", "../javascript/javascript", "../css/css"], mod);
9 | else // Plain browser env
10 | mod(CodeMirror);
11 | })(function(CodeMirror) {
12 | "use strict";
13 |
14 | var defaultTags = {
15 | script: [
16 | ["lang", /(javascript|babel)/i, "javascript"],
17 | ["type", /^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^module$|^$/i, "javascript"],
18 | ["type", /./, "text/plain"],
19 | [null, null, "javascript"]
20 | ],
21 | style: [
22 | ["lang", /^css$/i, "css"],
23 | ["type", /^(text\/)?(x-)?(stylesheet|css)$/i, "css"],
24 | ["type", /./, "text/plain"],
25 | [null, null, "css"]
26 | ]
27 | };
28 |
29 | function maybeBackup(stream, pat, style) {
30 | var cur = stream.current(), close = cur.search(pat);
31 | if (close > -1) {
32 | stream.backUp(cur.length - close);
33 | } else if (cur.match(/<\/?$/)) {
34 | stream.backUp(cur.length);
35 | if (!stream.match(pat, false)) stream.match(cur);
36 | }
37 | return style;
38 | }
39 |
40 | var attrRegexpCache = {};
41 | function getAttrRegexp(attr) {
42 | var regexp = attrRegexpCache[attr];
43 | if (regexp) return regexp;
44 | return attrRegexpCache[attr] = new RegExp("\\s+" + attr + "\\s*=\\s*('|\")?([^'\"]+)('|\")?\\s*");
45 | }
46 |
47 | function getAttrValue(text, attr) {
48 | var match = text.match(getAttrRegexp(attr))
49 | return match ? /^\s*(.*?)\s*$/.exec(match[2])[1] : ""
50 | }
51 |
52 | function getTagRegexp(tagName, anchored) {
53 | return new RegExp((anchored ? "^" : "") + "<\/\s*" + tagName + "\s*>", "i");
54 | }
55 |
56 | function addTags(from, to) {
57 | for (var tag in from) {
58 | var dest = to[tag] || (to[tag] = []);
59 | var source = from[tag];
60 | for (var i = source.length - 1; i >= 0; i--)
61 | dest.unshift(source[i])
62 | }
63 | }
64 |
65 | function findMatchingMode(tagInfo, tagText) {
66 | for (var i = 0; i < tagInfo.length; i++) {
67 | var spec = tagInfo[i];
68 | if (!spec[0] || spec[1].test(getAttrValue(tagText, spec[0]))) return spec[2];
69 | }
70 | }
71 |
72 | CodeMirror.defineMode("htmlmixed", function (config, parserConfig) {
73 | var htmlMode = CodeMirror.getMode(config, {
74 | name: "xml",
75 | htmlMode: true,
76 | multilineTagIndentFactor: parserConfig.multilineTagIndentFactor,
77 | multilineTagIndentPastTag: parserConfig.multilineTagIndentPastTag
78 | });
79 |
80 | var tags = {};
81 | var configTags = parserConfig && parserConfig.tags, configScript = parserConfig && parserConfig.scriptTypes;
82 | addTags(defaultTags, tags);
83 | if (configTags) addTags(configTags, tags);
84 | if (configScript) for (var i = configScript.length - 1; i >= 0; i--)
85 | tags.script.unshift(["type", configScript[i].matches, configScript[i].mode])
86 |
87 | function html(stream, state) {
88 | var style = htmlMode.token(stream, state.htmlState), tag = /\btag\b/.test(style), tagName
89 | if (tag && !/[<>\s\/]/.test(stream.current()) &&
90 | (tagName = state.htmlState.tagName && state.htmlState.tagName.toLowerCase()) &&
91 | tags.hasOwnProperty(tagName)) {
92 | state.inTag = tagName + " "
93 | } else if (state.inTag && tag && />$/.test(stream.current())) {
94 | var inTag = /^([\S]+) (.*)/.exec(state.inTag)
95 | state.inTag = null
96 | var modeSpec = stream.current() == ">" && findMatchingMode(tags[inTag[1]], inTag[2])
97 | var mode = CodeMirror.getMode(config, modeSpec)
98 | var endTagA = getTagRegexp(inTag[1], true), endTag = getTagRegexp(inTag[1], false);
99 | state.token = function (stream, state) {
100 | if (stream.match(endTagA, false)) {
101 | state.token = html;
102 | state.localState = state.localMode = null;
103 | return null;
104 | }
105 | return maybeBackup(stream, endTag, state.localMode.token(stream, state.localState));
106 | };
107 | state.localMode = mode;
108 | state.localState = CodeMirror.startState(mode, htmlMode.indent(state.htmlState, ""));
109 | } else if (state.inTag) {
110 | state.inTag += stream.current()
111 | if (stream.eol()) state.inTag += " "
112 | }
113 | return style;
114 | };
115 |
116 | return {
117 | startState: function () {
118 | var state = CodeMirror.startState(htmlMode);
119 | return {token: html, inTag: null, localMode: null, localState: null, htmlState: state};
120 | },
121 |
122 | copyState: function (state) {
123 | var local;
124 | if (state.localState) {
125 | local = CodeMirror.copyState(state.localMode, state.localState);
126 | }
127 | return {token: state.token, inTag: state.inTag,
128 | localMode: state.localMode, localState: local,
129 | htmlState: CodeMirror.copyState(htmlMode, state.htmlState)};
130 | },
131 |
132 | token: function (stream, state) {
133 | return state.token(stream, state);
134 | },
135 |
136 | indent: function (state, textAfter, line) {
137 | if (!state.localMode || /^\s*<\//.test(textAfter))
138 | return htmlMode.indent(state.htmlState, textAfter);
139 | else if (state.localMode.indent)
140 | return state.localMode.indent(state.localState, textAfter, line);
141 | else
142 | return CodeMirror.Pass;
143 | },
144 |
145 | innerMode: function (state) {
146 | return {state: state.localState || state.htmlState, mode: state.localMode || htmlMode};
147 | }
148 | };
149 | }, "xml", "javascript", "css");
150 |
151 | CodeMirror.defineMIME("text/html", "htmlmixed");
152 | });
--------------------------------------------------------------------------------
/src/js-vendor/match-highlighter.js:
--------------------------------------------------------------------------------
1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others
2 | // Distributed under an MIT license: https://codemirror.net/LICENSE
3 |
4 | // Highlighting text that matches the selection
5 | //
6 | // Defines an option highlightSelectionMatches, which, when enabled,
7 | // will style strings that match the selection throughout the
8 | // document.
9 | //
10 | // The option can be set to true to simply enable it, or to a
11 | // {minChars, style, wordsOnly, showToken, delay} object to explicitly
12 | // configure it. minChars is the minimum amount of characters that should be
13 | // selected for the behavior to occur, and style is the token style to
14 | // apply to the matches. This will be prefixed by "cm-" to create an
15 | // actual CSS class name. If wordsOnly is enabled, the matches will be
16 | // highlighted only if the selected text is a word. showToken, when enabled,
17 | // will cause the current token to be highlighted when nothing is selected.
18 | // delay is used to specify how much time to wait, in milliseconds, before
19 | // highlighting the matches. If annotateScrollbar is enabled, the occurences
20 | // will be highlighted on the scrollbar via the matchesonscrollbar addon.
21 |
22 | (function(mod) {
23 | if (typeof exports == "object" && typeof module == "object") // CommonJS
24 | mod(require("../../lib/codemirror"), require("./matchesonscrollbar"));
25 | else if (typeof define == "function" && define.amd) // AMD
26 | define(["../../lib/codemirror", "./matchesonscrollbar"], mod);
27 | else // Plain browser env
28 | mod(CodeMirror);
29 | })(function(CodeMirror) {
30 | "use strict";
31 |
32 | var defaults = {
33 | style: "matchhighlight",
34 | minChars: 2,
35 | delay: 100,
36 | wordsOnly: false,
37 | annotateScrollbar: false,
38 | showToken: false,
39 | trim: true
40 | }
41 |
42 | function State(options) {
43 | this.options = {}
44 | for (var name in defaults)
45 | this.options[name] = (options && options.hasOwnProperty(name) ? options : defaults)[name]
46 | this.overlay = this.timeout = null;
47 | this.matchesonscroll = null;
48 | this.active = false;
49 | }
50 |
51 | CodeMirror.defineOption("highlightSelectionMatches", false, function(cm, val, old) {
52 | if (old && old != CodeMirror.Init) {
53 | removeOverlay(cm);
54 | clearTimeout(cm.state.matchHighlighter.timeout);
55 | cm.state.matchHighlighter = null;
56 | cm.off("cursorActivity", cursorActivity);
57 | cm.off("focus", onFocus)
58 | }
59 | if (val) {
60 | var state = cm.state.matchHighlighter = new State(val);
61 | if (cm.hasFocus()) {
62 | state.active = true
63 | highlightMatches(cm)
64 | } else {
65 | cm.on("focus", onFocus)
66 | }
67 | cm.on("cursorActivity", cursorActivity);
68 | }
69 | });
70 |
71 | function cursorActivity(cm) {
72 | var state = cm.state.matchHighlighter;
73 | if (state.active || cm.hasFocus()) scheduleHighlight(cm, state)
74 | }
75 |
76 | function onFocus(cm) {
77 | var state = cm.state.matchHighlighter
78 | if (!state.active) {
79 | state.active = true
80 | scheduleHighlight(cm, state)
81 | }
82 | }
83 |
84 | function scheduleHighlight(cm, state) {
85 | clearTimeout(state.timeout);
86 | state.timeout = setTimeout(function() {highlightMatches(cm);}, state.options.delay);
87 | }
88 |
89 | function addOverlay(cm, query, hasBoundary, style) {
90 | var state = cm.state.matchHighlighter;
91 | cm.addOverlay(state.overlay = makeOverlay(query, hasBoundary, style));
92 | if (state.options.annotateScrollbar && cm.showMatchesOnScrollbar) {
93 | var searchFor = hasBoundary ? new RegExp("\\b" + query.replace(/[\\\[.+*?(){|^$]/g, "\\$&") + "\\b") : query;
94 | state.matchesonscroll = cm.showMatchesOnScrollbar(searchFor, false,
95 | {className: "CodeMirror-selection-highlight-scrollbar"});
96 | }
97 | }
98 |
99 | function removeOverlay(cm) {
100 | var state = cm.state.matchHighlighter;
101 | if (state.overlay) {
102 | cm.removeOverlay(state.overlay);
103 | state.overlay = null;
104 | if (state.matchesonscroll) {
105 | state.matchesonscroll.clear();
106 | state.matchesonscroll = null;
107 | }
108 | }
109 | }
110 |
111 | function highlightMatches(cm) {
112 | cm.operation(function() {
113 | var state = cm.state.matchHighlighter;
114 | removeOverlay(cm);
115 | if (!cm.somethingSelected() && state.options.showToken) {
116 | var re = state.options.showToken === true ? /[\w$]/ : state.options.showToken;
117 | var cur = cm.getCursor(), line = cm.getLine(cur.line), start = cur.ch, end = start;
118 | while (start && re.test(line.charAt(start - 1))) --start;
119 | while (end < line.length && re.test(line.charAt(end))) ++end;
120 | if (start < end)
121 | addOverlay(cm, line.slice(start, end), re, state.options.style);
122 | return;
123 | }
124 | var from = cm.getCursor("from"), to = cm.getCursor("to");
125 | if (from.line != to.line) return;
126 | if (state.options.wordsOnly && !isWord(cm, from, to)) return;
127 | var selection = cm.getRange(from, to)
128 | if (state.options.trim) selection = selection.replace(/^\s+|\s+$/g, "")
129 | if (selection.length >= state.options.minChars)
130 | addOverlay(cm, selection, false, state.options.style);
131 | });
132 | }
133 |
134 | function isWord(cm, from, to) {
135 | var str = cm.getRange(from, to);
136 | if (str.match(/^\w+$/) !== null) {
137 | if (from.ch > 0) {
138 | var pos = {line: from.line, ch: from.ch - 1};
139 | var chr = cm.getRange(pos, from);
140 | if (chr.match(/\W/) === null) return false;
141 | }
142 | if (to.ch < cm.getLine(from.line).length) {
143 | var pos = {line: to.line, ch: to.ch + 1};
144 | var chr = cm.getRange(to, pos);
145 | if (chr.match(/\W/) === null) return false;
146 | }
147 | return true;
148 | } else return false;
149 | }
150 |
151 | function boundariesAround(stream, re) {
152 | return (!stream.start || !re.test(stream.string.charAt(stream.start - 1))) &&
153 | (stream.pos == stream.string.length || !re.test(stream.string.charAt(stream.pos)));
154 | }
155 |
156 | function makeOverlay(query, hasBoundary, style) {
157 | return {token: function(stream) {
158 | if (stream.match(query) &&
159 | (!hasBoundary || boundariesAround(stream, hasBoundary)))
160 | return style;
161 | stream.next();
162 | stream.skipTo(query.charAt(0)) || stream.skipToEnd();
163 | }};
164 | }
165 | });
--------------------------------------------------------------------------------
/src/js/utils/icons.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len */
2 |
3 | export const TRASH_ICON = (size = 20) => ``;
4 | export const CHECK_ICON = (size = 20) => ``;
5 | export const CLOSE_ICON = (size = 24) => ``;
6 | export const PLUS_ICON = (size = 24) => ``;
7 | export const SETTINGS_ICON = (size = 24) => ``;
8 | export const DOT_CIRCLE = (size = 24) => ``;
9 | export const NO_USER = (sizeW = 16, sizeH = 14) => ``;
10 | export const FORK = (size = 14) => ``;
11 | export const SHARE = (size = 14) => ``;
12 | export const BARS = (size = 14) => ``;
13 | export const EYE = (size = 14) => ``;
14 | export const BOOK = (size = 14) => ``;
15 |
--------------------------------------------------------------------------------
/src/js-vendor/matchbrackets.js:
--------------------------------------------------------------------------------
1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others
2 | // Distributed under an MIT license: https://codemirror.net/LICENSE
3 |
4 | (function(mod) {
5 | if (typeof exports == "object" && typeof module == "object") // CommonJS
6 | mod(require("../../lib/codemirror"));
7 | else if (typeof define == "function" && define.amd) // AMD
8 | define(["../../lib/codemirror"], mod);
9 | else // Plain browser env
10 | mod(CodeMirror);
11 | })(function(CodeMirror) {
12 | var ie_lt8 = /MSIE \d/.test(navigator.userAgent) &&
13 | (document.documentMode == null || document.documentMode < 8);
14 |
15 | var Pos = CodeMirror.Pos;
16 |
17 | var matching = {"(": ")>", ")": "(<", "[": "]>", "]": "[<", "{": "}>", "}": "{<", "<": ">>", ">": "<<"};
18 |
19 | function bracketRegex(config) {
20 | return config && config.bracketRegex || /[(){}[\]]/
21 | }
22 |
23 | function findMatchingBracket(cm, where, config) {
24 | var line = cm.getLineHandle(where.line), pos = where.ch - 1;
25 | var afterCursor = config && config.afterCursor
26 | if (afterCursor == null)
27 | afterCursor = /(^| )cm-fat-cursor($| )/.test(cm.getWrapperElement().className)
28 | var re = bracketRegex(config)
29 |
30 | // A cursor is defined as between two characters, but in in vim command mode
31 | // (i.e. not insert mode), the cursor is visually represented as a
32 | // highlighted box on top of the 2nd character. Otherwise, we allow matches
33 | // from before or after the cursor.
34 | var match = (!afterCursor && pos >= 0 && re.test(line.text.charAt(pos)) && matching[line.text.charAt(pos)]) ||
35 | re.test(line.text.charAt(pos + 1)) && matching[line.text.charAt(++pos)];
36 | if (!match) return null;
37 | var dir = match.charAt(1) == ">" ? 1 : -1;
38 | if (config && config.strict && (dir > 0) != (pos == where.ch)) return null;
39 | var style = cm.getTokenTypeAt(Pos(where.line, pos + 1));
40 |
41 | var found = scanForBracket(cm, Pos(where.line, pos + (dir > 0 ? 1 : 0)), dir, style || null, config);
42 | if (found == null) return null;
43 | return {from: Pos(where.line, pos), to: found && found.pos,
44 | match: found && found.ch == match.charAt(0), forward: dir > 0};
45 | }
46 |
47 | // bracketRegex is used to specify which type of bracket to scan
48 | // should be a regexp, e.g. /[[\]]/
49 | //
50 | // Note: If "where" is on an open bracket, then this bracket is ignored.
51 | //
52 | // Returns false when no bracket was found, null when it reached
53 | // maxScanLines and gave up
54 | function scanForBracket(cm, where, dir, style, config) {
55 | var maxScanLen = (config && config.maxScanLineLength) || 10000;
56 | var maxScanLines = (config && config.maxScanLines) || 1000;
57 |
58 | var stack = [];
59 | var re = bracketRegex(config)
60 | var lineEnd = dir > 0 ? Math.min(where.line + maxScanLines, cm.lastLine() + 1)
61 | : Math.max(cm.firstLine() - 1, where.line - maxScanLines);
62 | for (var lineNo = where.line; lineNo != lineEnd; lineNo += dir) {
63 | var line = cm.getLine(lineNo);
64 | if (!line) continue;
65 | var pos = dir > 0 ? 0 : line.length - 1, end = dir > 0 ? line.length : -1;
66 | if (line.length > maxScanLen) continue;
67 | if (lineNo == where.line) pos = where.ch - (dir < 0 ? 1 : 0);
68 | for (; pos != end; pos += dir) {
69 | var ch = line.charAt(pos);
70 | if (re.test(ch) && (style === undefined || cm.getTokenTypeAt(Pos(lineNo, pos + 1)) == style)) {
71 | var match = matching[ch];
72 | if ((match.charAt(1) == ">") == (dir > 0)) stack.push(ch);
73 | else if (!stack.length) return {pos: Pos(lineNo, pos), ch: ch};
74 | else stack.pop();
75 | }
76 | }
77 | }
78 | return lineNo - dir == (dir > 0 ? cm.lastLine() : cm.firstLine()) ? false : null;
79 | }
80 |
81 | function matchBrackets(cm, autoclear, config) {
82 | // Disable brace matching in long lines, since it'll cause hugely slow updates
83 | var maxHighlightLen = cm.state.matchBrackets.maxHighlightLineLength || 1000;
84 | var marks = [], ranges = cm.listSelections();
85 | for (var i = 0; i < ranges.length; i++) {
86 | var match = ranges[i].empty() && findMatchingBracket(cm, ranges[i].head, config);
87 | if (match && cm.getLine(match.from.line).length <= maxHighlightLen) {
88 | var style = match.match ? "CodeMirror-matchingbracket" : "CodeMirror-nonmatchingbracket";
89 | marks.push(cm.markText(match.from, Pos(match.from.line, match.from.ch + 1), {className: style}));
90 | if (match.to && cm.getLine(match.to.line).length <= maxHighlightLen)
91 | marks.push(cm.markText(match.to, Pos(match.to.line, match.to.ch + 1), {className: style}));
92 | }
93 | }
94 |
95 | if (marks.length) {
96 | // Kludge to work around the IE bug from issue #1193, where text
97 | // input stops going to the textare whever this fires.
98 | if (ie_lt8 && cm.state.focused) cm.focus();
99 |
100 | var clear = function() {
101 | cm.operation(function() {
102 | for (var i = 0; i < marks.length; i++) marks[i].clear();
103 | });
104 | };
105 | if (autoclear) setTimeout(clear, 800);
106 | else return clear;
107 | }
108 | }
109 |
110 | function doMatchBrackets(cm) {
111 | cm.operation(function() {
112 | if (cm.state.matchBrackets.currentlyHighlighted) {
113 | cm.state.matchBrackets.currentlyHighlighted();
114 | cm.state.matchBrackets.currentlyHighlighted = null;
115 | }
116 | cm.state.matchBrackets.currentlyHighlighted = matchBrackets(cm, false, cm.state.matchBrackets);
117 | });
118 | }
119 |
120 | CodeMirror.defineOption("matchBrackets", false, function(cm, val, old) {
121 | if (old && old != CodeMirror.Init) {
122 | cm.off("cursorActivity", doMatchBrackets);
123 | if (cm.state.matchBrackets && cm.state.matchBrackets.currentlyHighlighted) {
124 | cm.state.matchBrackets.currentlyHighlighted();
125 | cm.state.matchBrackets.currentlyHighlighted = null;
126 | }
127 | }
128 | if (val) {
129 | cm.state.matchBrackets = typeof val == "object" ? val : {};
130 | cm.on("cursorActivity", doMatchBrackets);
131 | }
132 | });
133 |
134 | CodeMirror.defineExtension("matchBrackets", function() {matchBrackets(this, true);});
135 | CodeMirror.defineExtension("findMatchingBracket", function(pos, config, oldConfig){
136 | // Backwards-compatibility kludge
137 | if (oldConfig || typeof config == "boolean") {
138 | if (!oldConfig) {
139 | config = config ? {strict: true} : null
140 | } else {
141 | oldConfig.strict = config
142 | config = oldConfig
143 | }
144 | }
145 | return findMatchingBracket(this, pos, config)
146 | });
147 | CodeMirror.defineExtension("scanForBracket", function(pos, dir, style, config){
148 | return scanForBracket(this, pos, dir, style, config);
149 | });
150 | });
--------------------------------------------------------------------------------
/src/js-vendor/closebrackets.js:
--------------------------------------------------------------------------------
1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others
2 | // Distributed under an MIT license: https://codemirror.net/LICENSE
3 |
4 | (function(mod) {
5 | if (typeof exports == "object" && typeof module == "object") // CommonJS
6 | mod(require("../../lib/codemirror"));
7 | else if (typeof define == "function" && define.amd) // AMD
8 | define(["../../lib/codemirror"], mod);
9 | else // Plain browser env
10 | mod(CodeMirror);
11 | })(function(CodeMirror) {
12 | var defaults = {
13 | pairs: "()[]{}''\"\"",
14 | triples: "",
15 | explode: "[]{}"
16 | };
17 |
18 | var Pos = CodeMirror.Pos;
19 |
20 | CodeMirror.defineOption("autoCloseBrackets", false, function(cm, val, old) {
21 | if (old && old != CodeMirror.Init) {
22 | cm.removeKeyMap(keyMap);
23 | cm.state.closeBrackets = null;
24 | }
25 | if (val) {
26 | ensureBound(getOption(val, "pairs"))
27 | cm.state.closeBrackets = val;
28 | cm.addKeyMap(keyMap);
29 | }
30 | });
31 |
32 | function getOption(conf, name) {
33 | if (name == "pairs" && typeof conf == "string") return conf;
34 | if (typeof conf == "object" && conf[name] != null) return conf[name];
35 | return defaults[name];
36 | }
37 |
38 | var keyMap = {Backspace: handleBackspace, Enter: handleEnter};
39 | function ensureBound(chars) {
40 | for (var i = 0; i < chars.length; i++) {
41 | var ch = chars.charAt(i), key = "'" + ch + "'"
42 | if (!keyMap[key]) keyMap[key] = handler(ch)
43 | }
44 | }
45 | ensureBound(defaults.pairs + "`")
46 |
47 | function handler(ch) {
48 | return function(cm) { return handleChar(cm, ch); };
49 | }
50 |
51 | function getConfig(cm) {
52 | var deflt = cm.state.closeBrackets;
53 | if (!deflt || deflt.override) return deflt;
54 | var mode = cm.getModeAt(cm.getCursor());
55 | return mode.closeBrackets || deflt;
56 | }
57 |
58 | function handleBackspace(cm) {
59 | var conf = getConfig(cm);
60 | if (!conf || cm.getOption("disableInput")) return CodeMirror.Pass;
61 |
62 | var pairs = getOption(conf, "pairs");
63 | var ranges = cm.listSelections();
64 | for (var i = 0; i < ranges.length; i++) {
65 | if (!ranges[i].empty()) return CodeMirror.Pass;
66 | var around = charsAround(cm, ranges[i].head);
67 | if (!around || pairs.indexOf(around) % 2 != 0) return CodeMirror.Pass;
68 | }
69 | for (var i = ranges.length - 1; i >= 0; i--) {
70 | var cur = ranges[i].head;
71 | cm.replaceRange("", Pos(cur.line, cur.ch - 1), Pos(cur.line, cur.ch + 1), "+delete");
72 | }
73 | }
74 |
75 | function handleEnter(cm) {
76 | var conf = getConfig(cm);
77 | var explode = conf && getOption(conf, "explode");
78 | if (!explode || cm.getOption("disableInput")) return CodeMirror.Pass;
79 |
80 | var ranges = cm.listSelections();
81 | for (var i = 0; i < ranges.length; i++) {
82 | if (!ranges[i].empty()) return CodeMirror.Pass;
83 | var around = charsAround(cm, ranges[i].head);
84 | if (!around || explode.indexOf(around) % 2 != 0) return CodeMirror.Pass;
85 | }
86 | cm.operation(function() {
87 | var linesep = cm.lineSeparator() || "\n";
88 | cm.replaceSelection(linesep + linesep, null);
89 | cm.execCommand("goCharLeft");
90 | ranges = cm.listSelections();
91 | for (var i = 0; i < ranges.length; i++) {
92 | var line = ranges[i].head.line;
93 | cm.indentLine(line, null, true);
94 | cm.indentLine(line + 1, null, true);
95 | }
96 | });
97 | }
98 |
99 | function contractSelection(sel) {
100 | var inverted = CodeMirror.cmpPos(sel.anchor, sel.head) > 0;
101 | return {anchor: new Pos(sel.anchor.line, sel.anchor.ch + (inverted ? -1 : 1)),
102 | head: new Pos(sel.head.line, sel.head.ch + (inverted ? 1 : -1))};
103 | }
104 |
105 | function handleChar(cm, ch) {
106 | var conf = getConfig(cm);
107 | if (!conf || cm.getOption("disableInput")) return CodeMirror.Pass;
108 |
109 | var pairs = getOption(conf, "pairs");
110 | var pos = pairs.indexOf(ch);
111 | if (pos == -1) return CodeMirror.Pass;
112 | var triples = getOption(conf, "triples");
113 |
114 | var identical = pairs.charAt(pos + 1) == ch;
115 | var ranges = cm.listSelections();
116 | var opening = pos % 2 == 0;
117 |
118 | var type;
119 | for (var i = 0; i < ranges.length; i++) {
120 | var range = ranges[i], cur = range.head, curType;
121 | var next = cm.getRange(cur, Pos(cur.line, cur.ch + 1));
122 | if (opening && !range.empty()) {
123 | curType = "surround";
124 | } else if ((identical || !opening) && next == ch) {
125 | if (identical && stringStartsAfter(cm, cur))
126 | curType = "both";
127 | else if (triples.indexOf(ch) >= 0 && cm.getRange(cur, Pos(cur.line, cur.ch + 3)) == ch + ch + ch)
128 | curType = "skipThree";
129 | else
130 | curType = "skip";
131 | } else if (identical && cur.ch > 1 && triples.indexOf(ch) >= 0 &&
132 | cm.getRange(Pos(cur.line, cur.ch - 2), cur) == ch + ch) {
133 | if (cur.ch > 2 && /\bstring/.test(cm.getTokenTypeAt(Pos(cur.line, cur.ch - 2)))) return CodeMirror.Pass;
134 | curType = "addFour";
135 | } else if (identical) {
136 | var prev = cur.ch == 0 ? " " : cm.getRange(Pos(cur.line, cur.ch - 1), cur)
137 | if (!CodeMirror.isWordChar(next) && prev != ch && !CodeMirror.isWordChar(prev)) curType = "both";
138 | else return CodeMirror.Pass;
139 | } else if (opening) {
140 | curType = "both";
141 | } else {
142 | return CodeMirror.Pass;
143 | }
144 | if (!type) type = curType;
145 | else if (type != curType) return CodeMirror.Pass;
146 | }
147 |
148 | var left = pos % 2 ? pairs.charAt(pos - 1) : ch;
149 | var right = pos % 2 ? ch : pairs.charAt(pos + 1);
150 | cm.operation(function() {
151 | if (type == "skip") {
152 | cm.execCommand("goCharRight");
153 | } else if (type == "skipThree") {
154 | for (var i = 0; i < 3; i++)
155 | cm.execCommand("goCharRight");
156 | } else if (type == "surround") {
157 | var sels = cm.getSelections();
158 | for (var i = 0; i < sels.length; i++)
159 | sels[i] = left + sels[i] + right;
160 | cm.replaceSelections(sels, "around");
161 | sels = cm.listSelections().slice();
162 | for (var i = 0; i < sels.length; i++)
163 | sels[i] = contractSelection(sels[i]);
164 | cm.setSelections(sels);
165 | } else if (type == "both") {
166 | cm.replaceSelection(left + right, null);
167 | cm.triggerElectric(left + right);
168 | cm.execCommand("goCharLeft");
169 | } else if (type == "addFour") {
170 | cm.replaceSelection(left + left + left + left, "before");
171 | cm.execCommand("goCharRight");
172 | }
173 | });
174 | }
175 |
176 | function charsAround(cm, pos) {
177 | var str = cm.getRange(Pos(pos.line, pos.ch - 1),
178 | Pos(pos.line, pos.ch + 1));
179 | return str.length == 2 ? str : null;
180 | }
181 |
182 | function stringStartsAfter(cm, pos) {
183 | var token = cm.getTokenAt(Pos(pos.line, pos.ch + 1))
184 | return /\bstring/.test(token.type) && token.start == pos.ch &&
185 | (pos.ch == 0 || !/\bstring/.test(cm.getTokenTypeAt(pos)))
186 | }
187 | });
--------------------------------------------------------------------------------
/src/js/story/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len, no-use-before-define, no-sequences, no-undef */
2 | import el from '../utils/element';
3 | import commitDiff from '../utils/commitDiff';
4 | import { formatDate } from '../utils';
5 | import confirmPopUp from '../popups/confirmPopUp';
6 | import { DEBUG } from '../constants';
7 | import setAnnotationLink from './setAnnotationLink';
8 | import renderCommits from './renderCommits';
9 | import getTitleFromCommitMessage from './getTitleFromCommitMessage';
10 | import renderDiffs from './renderDiffs';
11 | import codeMirror from './codeMirror';
12 | import renderGraph from './renderGraph';
13 |
14 | export default function story(state, onChange) {
15 | const container = el.withFallback('.story');
16 | const git = state.git();
17 | let editor = null,
18 | editMode = false,
19 | currentlyEditingHash;
20 | const onSave = message => git.amend(currentlyEditingHash, { message });
21 | const onCancel = message => {
22 | editMode = false;
23 | editor = null;
24 | if (message === '') {
25 | git.amend(currentlyEditingHash, {
26 | message: formatDate()
27 | });
28 | }
29 | render();
30 | };
31 |
32 | if (!container.found()) return () => {};
33 |
34 | const render = () => {
35 | DEBUG && console.log('story:render');
36 | const allCommits = git.log();
37 | const commits = Object.keys(allCommits).map(hash => ({
38 | hash,
39 | message: allCommits[hash].message,
40 | position: allCommits[hash].meta ? parseInt(allCommits[hash].meta.position, 10) || null : null
41 | })).sort((a, b) => {
42 | if (a.position !== null && b.position !== null) {
43 | return a.position - b.position;
44 | } else if (a.position !== null && b.position === null) {
45 | return -1;
46 | } else if (a.position === null && b.position !== null) {
47 | return 1;
48 | }
49 | return a.hash - b.hash;
50 | });
51 | const numOfCommits = commits.length;
52 | const diffs = commitDiff(numOfCommits > 0 ? git.show().files : [], git.getAll());
53 | const renderedCommits = renderCommits(git, commits, editMode, currentlyEditingHash);
54 |
55 | container.attr('class', numOfCommits <= 1 || editMode ? 'editor-section story no-graph' : 'editor-section story');
56 | container.content(`
57 | ${ renderedCommits !== '' ? '' + renderedCommits + '
' : '' }
58 | ${ editMode ? '' : renderDiffs(git, diffs) }
59 |
60 | `).forEach(el => {
61 | if (el.attr('data-export') === 'checkoutLink') {
62 | el.onClick(() => {
63 | const hashToCheckout = el.attr('data-hash');
64 |
65 | if (diffs.length > 0) {
66 | confirmPopUp(
67 | 'Checkout',
68 | 'You are about to checkout another commit. You have an unstaged changes. Are you sure?',
69 | decision => {
70 | if (decision && allCommits[hashToCheckout]) {
71 | git.checkout(hashToCheckout, true);
72 | onChange();
73 | render();
74 | }
75 | }
76 | );
77 | } else {
78 | if (allCommits[hashToCheckout]) {
79 | git.checkout(hashToCheckout);
80 | onChange();
81 | render();
82 | }
83 | }
84 | });
85 | }
86 | if (el.attr('data-export') === 'editMessage') {
87 | el.onClick(() => {
88 | const hash = el.attr('data-hash');
89 |
90 | if (editMode && currentlyEditingHash === hash) {
91 | editMode = false;
92 | onCancel();
93 | } else {
94 | editMode = true;
95 | currentlyEditingHash = el.attr('data-hash');
96 | render();
97 | }
98 | });
99 | }
100 | if (el.attr('data-export') === 'deleteCommit') {
101 | el.onClick(() => {
102 | confirmPopUp(
103 | 'Deleting a commit',
104 | `Deleting "${el.attr('data-commit-message')}" commit. Are you sure?`,
105 | decision => {
106 | if (decision) {
107 | editMode = false;
108 | git.adios(el.attr('data-hash'));
109 | onChange();
110 | }
111 | }
112 | );
113 | });
114 | }
115 | if (el.attr('data-export') === 'publishStatus') {
116 | el.onChange(position => {
117 | const hash = el.attr('data-hash');
118 |
119 | git.amend(hash, {
120 | message: git.show(hash).message,
121 | meta: { position }
122 | });
123 | render();
124 | });
125 | }
126 | });
127 |
128 | const {
129 | editButton,
130 | addButton,
131 | discardButton,
132 | messageArea,
133 | confirmButton,
134 | injector
135 | } = container.namedExports();
136 |
137 | editButton &&
138 | editButton.onClick(() => {
139 | git.amend();
140 | render();
141 | });
142 |
143 | addButton &&
144 | addButton.onClick(() => {
145 | editMode = true;
146 | git.add();
147 | currentlyEditingHash = git.commit('');
148 | render();
149 | });
150 |
151 | discardButton &&
152 | discardButton.onClick(() => {
153 | confirmPopUp('Discard changes', 'You are about to discard your current changes. Are you sure?', decision => {
154 | if (decision) {
155 | git.discard();
156 | onChange();
157 | }
158 | });
159 | });
160 |
161 | if (messageArea) {
162 | editor = codeMirror(
163 | messageArea,
164 | state.getEditorSettings(),
165 | git.show(currentlyEditingHash).message,
166 | function onSaveInEditor(message) {
167 | confirmButton.css('opacity', '0.3');
168 | onSave(message);
169 | el.withFallback(`[data-hash="${ currentlyEditingHash }"] > .commit-message-text`)
170 | .text(getTitleFromCommitMessage(message));
171 | },
172 | function onChange() {
173 | confirmButton.css('opacity', '1');
174 | numOfCommits > 1 && renderGraph(commits, git.logAsTree());
175 | },
176 | onCancel
177 | );
178 | confirmButton.css('opacity', '0.3');
179 | confirmButton.onClick(() => {
180 | onSave(editor.getValue());
181 | editMode = false;
182 | editor = null;
183 | render();
184 | });
185 | injector.onChange(str => {
186 | setTimeout(() => {
187 | editor.focus();
188 | editor.refresh();
189 | editor.replaceSelection(str);
190 | injector.e.value = '';
191 | }, 1);
192 | });
193 | }
194 |
195 | numOfCommits > 1 && renderGraph(commits, git.logAsTree());
196 | };
197 |
198 | state.listen(event => {
199 | if (!editMode) render();
200 | });
201 |
202 | render();
203 |
204 | return function addToStory({ code, list }, otherEditor) {
205 | if (editMode && editor) {
206 | otherEditor.setCursor({ line: 0, ch: 0 });
207 | setTimeout(() => {
208 | editor.focus();
209 | editor.refresh();
210 |
211 | setAnnotationLink(editor, code, list, state.getActiveFile());
212 | }, 1);
213 | }
214 | };
215 | }
216 |
--------------------------------------------------------------------------------
/src/js/state.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-use-before-define, no-undef */
2 | import gitfred from 'gitfred';
3 | import {
4 | getParam,
5 | readFromJSONFile,
6 | ensureDemoIdInPageURL,
7 | ensureUniqueFileName,
8 | jsEncode,
9 | clone
10 | } from './utils';
11 | import { IS_PROD, DEBUG } from './constants';
12 | import { DEFAULT_LAYOUT } from './layout';
13 | import API from './providers/api';
14 | import LS from './utils/localStorage';
15 |
16 | const git = gitfred();
17 | const LS_PROFILE_KEY = 'DEMOIT_PROFILE';
18 | const DEFAULT_STATE = {
19 | 'editor': {
20 | 'theme': 'light',
21 | 'statusBar': true,
22 | 'layout': DEFAULT_LAYOUT
23 | },
24 | 'dependencies': [],
25 | 'files': {
26 | 'working': [
27 | [
28 | 'code.js',
29 | {
30 | 'c': `document.querySelector('#output').innerHTML = 'Hello world';
31 |
32 | console.log('Hello world');`
33 | }
34 | ]
35 | ],
36 | 'head': null,
37 | 'i': 0,
38 | 'stage': [],
39 | 'commits': {}
40 | }
41 | };
42 |
43 | const getFirstFile = function () {
44 | const allFiles = git.getAll();
45 |
46 | if (allFiles.length === 0) {
47 | return 'untitled.js';
48 | }
49 | return git.getAll()[0][0];
50 | };
51 | const resolveActiveFile = function () {
52 | const hash = location.hash.replace(/^#/, '');
53 |
54 | if (hash !== '' && git.get(hash)) return hash;
55 | return getFirstFile();
56 | };
57 |
58 | export const FILE_CHANGED = 'FILE_CHANGED';
59 |
60 | export default async function createState(version) {
61 | let onChangeListeners = [];
62 | const onChange = event => {
63 | DEBUG && console.log('state:onChange event=' + event);
64 | onChangeListeners.forEach(c => c(event));
65 | };
66 | let profile = LS(LS_PROFILE_KEY);
67 |
68 | var state = window.state;
69 | var initialState;
70 |
71 | if (!state) {
72 | const stateFromURL = getParam('state');
73 |
74 | if (stateFromURL) {
75 | try {
76 | state = await readFromJSONFile(stateFromURL);
77 | } catch (error) {
78 | console.error(`Error reading ${ stateFromURL }`);
79 | }
80 | } else {
81 | state = DEFAULT_STATE;
82 | }
83 | }
84 |
85 | state.v = version;
86 | initialState = clone(state);
87 |
88 | git.import(state.files);
89 | git.listen(event => {
90 | if (event === git.ON_COMMIT) {
91 | DEBUG && console.log('state:git:commit event=' + event);
92 | persist('git.listen');
93 | DEBUG && console.log('state:git:checkout event=' + event);
94 | } else if (event === git.ON_CHECKOUT) {
95 | api.setActiveFileByIndex(0);
96 | persist('git.listen');
97 | }
98 | onChange(event);
99 | });
100 |
101 | let activeFile = resolveActiveFile();
102 |
103 | const persist = (reason, fork = false, done = () => {}) => {
104 | DEBUG && console.log('state:persist reason=' + reason);
105 | if (api.isForkable()) {
106 | if (!fork && !api.isDemoOwner()) { return; }
107 | let diff = DeepDiff.diff(initialState, state);
108 | let stateData;
109 |
110 | initialState = clone(state);
111 | if (fork) {
112 | diff = '';
113 | delete state.owner;
114 | stateData = state;
115 | } else if (typeof diff === 'undefined' || !diff) {
116 | // no diff and no forking so doesn't make sense to call the API
117 | return;
118 | } else {
119 | diff = jsEncode(JSON.stringify(diff));
120 | stateData = { demoId: state.demoId, owner: state.owner };
121 | }
122 | API.saveDemo(stateData, profile.token, diff).then(demoId => {
123 | if (demoId && demoId !== state.demoId) {
124 | state.demoId = demoId;
125 | state.owner = profile.id;
126 | ensureDemoIdInPageURL(demoId);
127 | }
128 | done();
129 | });
130 | }
131 | };
132 |
133 | const api = {
134 | getDemoId() {
135 | return state.demoId;
136 | },
137 | getActiveFile() {
138 | return activeFile;
139 | },
140 | getActiveFileContent() {
141 | return git.get(activeFile).c;
142 | },
143 | setActiveFile(filename) {
144 | activeFile = filename;
145 | location.hash = filename;
146 | onChange('setActiveFile');
147 | return filename;
148 | },
149 | setActiveFileByIndex(index) {
150 | const filename = git.getAll()[index][0];
151 |
152 | if (filename) {
153 | this.setActiveFile(filename);
154 | onChange(FILE_CHANGED);
155 | }
156 | },
157 | isCurrentFile(filename) {
158 | return activeFile === filename;
159 | },
160 | isDemoOwner() {
161 | return state.owner && profile && state.owner === profile.id;
162 | },
163 | getFiles() {
164 | return git.getAll();
165 | },
166 | getNumOfFiles() {
167 | return git.getAll().length;
168 | },
169 | meta(meta) {
170 | if (meta) {
171 | const { name, description, published, storyWithCode, comments } = meta;
172 |
173 | state.name = name;
174 | state.desc = description;
175 | state.published = !!published;
176 | state.storyWithCode = !!storyWithCode;
177 | state.comments = !!comments;
178 | onChange('meta');
179 | persist('meta');
180 | return null;
181 | }
182 |
183 | const m = {
184 | name: state.name,
185 | description: state.desc,
186 | published: !!state.published,
187 | storyWithCode: !!state.storyWithCode,
188 | comments: !!state.comments
189 | };
190 |
191 | if (state.demoId) m.id = state.demoId;
192 |
193 | return m;
194 | },
195 | getDependencies() {
196 | return state.dependencies;
197 | },
198 | setDependencies(dependencies) {
199 | state.dependencies = dependencies;
200 | persist('setDependencies');
201 | },
202 | getEditorSettings() {
203 | return state.editor;
204 | },
205 | editFile(filename, updates) {
206 | git.save(filename, updates);
207 | persist('editFile');
208 | },
209 | renameFile(filename, newName) {
210 | if (activeFile === filename) {
211 | this.setActiveFile(newName);
212 | }
213 | git.rename(filename, newName);
214 | persist('renameFile');
215 | },
216 | addNewFile(filename = 'untitled.js') {
217 | filename = git.get(filename) ? ensureUniqueFileName(filename) : filename;
218 | git.save(filename, { c: '' });
219 | this.setActiveFile(filename);
220 | persist('addNewFile');
221 | },
222 | deleteFile(filename) {
223 | git.del(filename);
224 | if (filename === activeFile) {
225 | this.setActiveFile(getFirstFile());
226 | }
227 | persist('deleteFile');
228 | },
229 | listen(callback) {
230 | onChangeListeners.push(callback);
231 | },
232 | removeListeners() {
233 | onChangeListeners = [];
234 | },
235 | updateThemeAndLayout(newLayout, newTheme) {
236 | if (newLayout) {
237 | state.editor.layout = newLayout;
238 | }
239 | if (newTheme) {
240 | state.editor.theme = newTheme;
241 | };
242 | persist('updateThemeAndLayout');
243 | },
244 | updateStatusBarVisibility(value) {
245 | if (state.editor.statusBar !== value) {
246 | state.editor.statusBar = value;
247 | persist('updateStatusBarVisibility');
248 | }
249 | },
250 | setEntryPoint(filename) {
251 | const newValue = !git.get(filename).en;
252 |
253 | git.saveAll({ en: false });
254 | git.save(filename, { en: newValue });
255 | persist();
256 | },
257 | dump() {
258 | return state;
259 | },
260 | // forking
261 | isForkable() {
262 | return IS_PROD && api.loggedIn();
263 | },
264 | fork() {
265 | persist('fork', true, () => onChange('fork'));
266 | },
267 | // profile methods
268 | loggedIn() {
269 | return profile !== null;
270 | },
271 | getProfile() {
272 | return profile;
273 | },
274 | getDemos() {
275 | return API.getDemos(profile.id, profile.token);
276 | },
277 | // misc
278 | version() {
279 | return state.v;
280 | },
281 | git() {
282 | return git;
283 | },
284 | export() {
285 | return state;
286 | },
287 | getStoryURL() {
288 | const meta = this.meta();
289 | let slug = 'story';
290 |
291 | if (meta && meta.name) {
292 | slug = meta.name.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '');
293 | }
294 | return `/s/${ this.getDemoId() }/${ slug }`;
295 | }
296 | };
297 |
298 | window.__state = api;
299 |
300 | return api;
301 | }
302 |
--------------------------------------------------------------------------------