mirror/pcottle.learnGitBranching
1
0
Fork 0
mirror of https://github.com/pcottle/learnGitBranching.git synced 2025-06-21 13:49:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

defer parsing of JavaScript

Browse source
This commit is contained in:
hongarc 2020-04-21 19:12:29 +07:00
parent ec6f612fca
commit fbe3312398
9 changed files with 131 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
assets/forkme_right_darkblue_121621.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

Before After
Before After

29
gulpfile.js
View file

@ -22,18 +22,6 @@ _.templateSettings.interpolate = /\{\{(.+?)\}\}/g;
_.templateSettings.escape = /\{\{\{(.*?)\}\}\}/g; _.templateSettings.escape = /\{\{\{(.*?)\}\}\}/g;
_.templateSettings.evaluate = /\{\{-(.*?)\}\}/g; _.templateSettings.evaluate = /\{\{-(.*?)\}\}/g;
var prodDependencies = [
'<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.1/es5-shim.min.js"></script>',
'<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>',
'<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>'
];
var devDependencies = [
'<script src="lib/jquery-1.8.0.min.js"></script>',
'<script src="lib/raphael-min.js"></script>',
'<script src="lib/es5-shim.min.js"></script>'
];
// precompile for speed // precompile for speed
var indexFile = readFileSync('src/template.index.html').toString(); var indexFile = readFileSync('src/template.index.html').toString();
var indexTemplate = _.template(indexFile); var indexTemplate = _.template(indexFile);
@ -57,7 +45,7 @@ const lintStrings = (done) => {
var destDir = './build/'; var destDir = './build/';
var buildIndex = function(config) { var buildIndex = function(done) {
log('Building index...'); log('Building index...');
// first find the one in here that we want // first find the one in here that we want
@ -85,19 +73,8 @@ var buildIndex = function(config) {
var outputIndex = indexTemplate({ var outputIndex = indexTemplate({
jsFile, jsFile,
styleFile, styleFile,
jsDependencies: config.isProd ?
prodDependencies.join('\n') :
devDependencies.join('\n')
}); });
writeFileSync('index.html', outputIndex); writeFileSync('index.html', outputIndex);
};
var buildIndexProd = function(done) {
buildIndex({ isProd: true });
done();
};
var buildIndexDev = function(done) {
buildIndex({ isProd: false });
done(); done();
}; };
@ -176,11 +153,11 @@ var gitDeployPushOrigin = function(done) {
done(); done();
}; };
var fastBuild = series(clean, ifyBuild, style, buildIndexDev, jshint); var fastBuild = series(clean, ifyBuild, style, buildIndex, jshint);
var build = series( var build = series(
clean, clean,
miniBuild, style, buildIndexProd, miniBuild, style, buildIndex,
gitAdd, jasmine, jshint, gitAdd, jasmine, jshint,
lintStrings, compliment lintStrings, compliment
); );

7
lib/es5-shim.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
lib/jquery-1.8.0.min.js vendored
View file

File diff suppressed because one or more lines are too long

10
lib/raphael-min.js vendored
View file

File diff suppressed because one or more lines are too long

3
package.json
View file

@ -36,10 +36,11 @@
"dependencies": { "dependencies": {
"backbone": "^1.4.0", "backbone": "^1.4.0",
"flux": "^3.1.3", "flux": "^3.1.3",
"jquery": "^3.4.0", "jquery": "^1.8.0",
"markdown": "^0.5.0", "markdown": "^0.5.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"q": "^1.5.1", "q": "^1.5.1",
"raphael": "^2.1.0",
"react": "^16.13.0", "react": "^16.13.0",
"react-dom": "^16.13.0", "react-dom": "^16.13.0",
"underscore": "~1.4.3" "underscore": "~1.4.3"

11
src/js/app/index.js
View file

@ -1,4 +1,5 @@
var Backbone = require('backbone'); var Backbone = require('backbone');
var jQuery = require('jquery');
var EventEmitter = require('events').EventEmitter; var EventEmitter = require('events').EventEmitter;
var React = require('react'); var React = require('react');
var ReactDOM = require('react-dom'); var ReactDOM = require('react-dom');
@ -11,6 +12,16 @@ var LocaleActions = require('../actions/LocaleActions');
/** /**
* Globals * Globals
*/ */
Backbone.$ = jQuery;
// Bypass jasmine
if (util.isBrowser()) {
window.jQuery = jQuery;
window.$ = jQuery;
window.Raphael = require('raphael');
}
var events = Object.assign( var events = Object.assign(
{}, {},
EventEmitter.prototype, EventEmitter.prototype,

210
src/template.index.html
View file

@ -18,117 +18,7 @@
<link rel="stylesheet" href="src/style/font-awesome.css" type="text/css" charset="utf-8"> <link rel="stylesheet" href="src/style/font-awesome.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="src/style/rainbows.css" type="text/css" charset="utf-8"> <link rel="stylesheet" href="src/style/rainbows.css" type="text/css" charset="utf-8">
<link rel="icon" href="src/style/favicon.ico" type="image/x-icon"> <link rel="icon" href="src/style/favicon.ico" type="image/x-icon">
</head>
<body>
<!-- lol noscript. I did not write 9k+ lines of JS just for you to bounce off my website -->
<noscript>
<div style="z-index:1000000;background:red;color:white;position:absolute;top:0;left:0;height:300px;width:300px;">
This application simulates a git repository in your browser, so you will need
JS to use the app. Try enabling and refreshing the page -- Thanks!
</div>
</noscript>
<!-- The entire interface is within this div -->
<div id="interfaceWrapper" class="box horizontal flex1">
<div id="controls" class="box vertical flex1 visBackgroundColor">
<div id="commandLineHistory" class="box vertical flex3">
<div class="toolbar box vertical center">
<div class="controls box horizontal justify">
<div class="box flex1">
<div class="close">
</div>
</div>
<div class="box flex1">
<div class="minimize">
</div>
</div>
<div class="box flex1">
<div class="plus">
</div>
</div>
</div>
<div>
<i class="icon-home"></i>
<span class="vcs-mode-aware intl-aware" data-intl="learn-git-branching">
Learn Git Branching
</span>
</div>
</div>
<div id="levelToolbarMount">
</div>
<div id="terminal" class="box flex1 horizontal startAlign">
<div id="commandDisplay" class="box vertical flex1">
</div>
</div>
<div id="commandLineBar" class="box vertical flex0">
<div id="prompt" class="">
<span class="promptSign box">$</span>
<span class="cursor box">&nbsp;</span>
<p class="command"></p>
</div>
<textarea
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
id="commandTextField">
</textarea>
</div>
</div>
</div>
<div id="mainVisSpace" class="box flex2 horizontal transitionAll visBackgroundColor">
<span class="modeText transitionOpacity gitMode">
Git
</span>
<span class="modeText transitionOpacity hgMode">
Hg
</span>
</div>
<!-- If you drag the goal window to the right side of the screen, this gets shown and causes
the main visualization to squeeze a bit. This way, you could have the goal window hang out
on the right side of the screen and still see the repo visualization. -->
<div id="goalPlaceholder" class="box flex1 visBackgroundColor" style="display: none;"></div>
</div>
<div id="canvasHolder">
</div>
<div id="reactMount">
</div>
<div id="helperBarMount">
</div>
<!-- lol inline styles -->
<a class="githubLink" href="https://github.com/pcottle/learnGitBranching" target="_blank">
<img
style="position: absolute; top: 0; right: 0; border: 0;"
src="assets/forkme_right_darkblue_121621.png"
alt="Fork me on GitHub"
/>
</a>
<!-- Dependencies -->
<script type="text/javascript">
// PhantomJS doesn't support bind yet LOL. polyfill locally so tests
// can pass while offline
Function.prototype.bind = Function.prototype.bind || function (thisp) {
var fn = this;
return function () {
return fn.apply(thisp, arguments);
};
};
</script>
{{jsDependencies}}
<script src="lib/jquery-ui-1.9.0.custom.min.js"></script>
<!-- Templates from here on out... --> <!-- Templates from here on out... -->
<script type="text/html" id="modal-view-template"> <script type="text/html" id="modal-view-template">
@ -464,11 +354,109 @@
</div> </div>
</li> </li>
</script> </script>
<!-- The compiled and minified build file (that actually does everything) is below. <!-- The compiled and minified build file (that actually does everything) is below.
For a much easier time perusing the source, see the individual files at: For a much easier time perusing the source, see the individual files at:
https://github.com/pcottle/learnGitBranching https://github.com/pcottle/learnGitBranching
--> -->
<script src="build/{{jsFile}}"></script> <script defer src="build/{{jsFile}}"></script>
<script defer src="lib/jquery-ui-1.9.0.custom.min.js"></script>
</head>
<body>
<!-- lol noscript. I did not write 9k+ lines of JS just for you to bounce off my website -->
<noscript>
<div style="z-index:1000000;background:red;color:white;position:absolute;top:0;left:0;height:300px;width:300px;">
This application simulates a git repository in your browser, so you will need
JS to use the app. Try enabling and refreshing the page -- Thanks!
</div>
</noscript>
<!-- The entire interface is within this div -->
<div id="interfaceWrapper" class="box horizontal flex1">
<div id="controls" class="box vertical flex1 visBackgroundColor">
<div id="commandLineHistory" class="box vertical flex3">
<div class="toolbar box vertical center">
<div class="controls box horizontal justify">
<div class="box flex1">
<div class="close">
</div>
</div>
<div class="box flex1">
<div class="minimize">
</div>
</div>
<div class="box flex1">
<div class="plus">
</div>
</div>
</div>
<div>
<i class="icon-home"></i>
<span class="vcs-mode-aware intl-aware" data-intl="learn-git-branching">
Learn Git Branching
</span>
</div>
</div>
<div id="levelToolbarMount">
</div>
<div id="terminal" class="box flex1 horizontal startAlign">
<div id="commandDisplay" class="box vertical flex1">
</div>
</div>
<div id="commandLineBar" class="box vertical flex0">
<div id="prompt" class="">
<span class="promptSign box">$</span>
<span class="cursor box">&nbsp;</span>
<p class="command"></p>
</div>
<textarea
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
id="commandTextField">
</textarea>
</div>
</div>
</div>
<div id="mainVisSpace" class="box flex2 horizontal transitionAll visBackgroundColor">
<span class="modeText transitionOpacity gitMode">
Git
</span>
<span class="modeText transitionOpacity hgMode">
Hg
</span>
</div>
<!-- If you drag the goal window to the right side of the screen, this gets shown and causes
the main visualization to squeeze a bit. This way, you could have the goal window hang out
on the right side of the screen and still see the repo visualization. -->
<div id="goalPlaceholder" class="box flex1 visBackgroundColor" style="display: none;"></div>
</div>
<div id="canvasHolder">
</div>
<div id="reactMount">
</div>
<div id="helperBarMount">
</div>
<!-- lol inline styles -->
<a class="githubLink" href="https://github.com/pcottle/learnGitBranching" target="_blank">
<img width="149" height="149"
style="position: absolute; top: 0; right: 0; border: 0;"
src="assets/forkme_right_darkblue_121621.png"
alt="Fork me on GitHub"
/>
</a>
<!-- The advantage of github pages: super-easy, simple, slick static hostic. <!-- The advantage of github pages: super-easy, simple, slick static hostic.
The downside? No raw logs to parse for analytics, so I have to include The downside? No raw logs to parse for analytics, so I have to include

20
yarn.lock
View file

@ -1421,6 +1421,11 @@ esutils@^2.0.0, esutils@^2.0.2:
resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64" resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g== integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
eve-raphael@0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/eve-raphael/-/eve-raphael-0.5.0.tgz#17c754b792beef3fa6684d79cf5a47c63c4cda30"
integrity sha1-F8dUt5K+7z+maE15z1pHxjxM2jA=
events@^2.0.0: events@^2.0.0:
version "2.1.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/events/-/events-2.1.0.tgz#2a9a1e18e6106e0e812aa9ebd4a819b3c29c0ba5" resolved "https://registry.yarnpkg.com/events/-/events-2.1.0.tgz#2a9a1e18e6106e0e812aa9ebd4a819b3c29c0ba5"
@ -2499,10 +2504,10 @@ jasmine@^3.1.0:
glob "^7.1.4" glob "^7.1.4"
jasmine-core "~3.5.0" jasmine-core "~3.5.0"
jquery@^3.4.0: jquery@^1.8.0:
version "3.4.1" version "1.12.4"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2" resolved "https://registry.yarnpkg.com/jquery/-/jquery-1.12.4.tgz#01e1dfba290fe73deba77ceeacb0f9ba2fec9e0c"
integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw== integrity sha1-AeHfuikP5z3rp3zurLD5ui/sngw=
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
version "4.0.0" version "4.0.0"
@ -3766,6 +3771,13 @@ randomfill@^1.0.3:
randombytes "^2.0.5" randombytes "^2.0.5"
safe-buffer "^5.1.0" safe-buffer "^5.1.0"
raphael@^2.1.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/raphael/-/raphael-2.3.0.tgz#eabeb09dba861a1d4cee077eaafb8c53f3131f89"
integrity sha512-w2yIenZAQnp257XUWGni4bLMVxpUpcIl7qgxEgDIXtmSypYtlNxfXWpOBxs7LBTps5sDwhRnrToJrMUrivqNTQ==
dependencies:
eve-raphael "0.5.0"
rcfinder@^0.1.6: rcfinder@^0.1.6:
version "0.1.9" version "0.1.9"
resolved "https://registry.yarnpkg.com/rcfinder/-/rcfinder-0.1.9.tgz#f3e80f387ddf9ae80ae30a4100329642eae81115" resolved "https://registry.yarnpkg.com/rcfinder/-/rcfinder-0.1.9.tgz#f3e80f387ddf9ae80ae30a4100329642eae81115"