Merge branch 'gh-pages' of https://github.com/parkjs814/AlgorithmVisualizer into gh-pages

Author: 64json

.babelrc

@@ -0,0 +1,3 @@
+{
+  presets: ['es2015']
+}

.gitignore

@@ -1,3 +1,4 @@
 .idea
 .DS_Store
 node_modules
+_*

ES6.md

@@ -1,11 +1,8 @@
-# ES6 Project Update
-
-The project is converted to ES6 and the code is added to the [master branch](https://github.com/parkjs814/AlgorithmVisualizer/tree/master). 
-It will stay there until it reaches the same level as`gh-pages`, at which point the master branch will become the default branch.
+# ES6 Project
 
 ## Build System
 
-The new app uses [gulp](http://gulpjs.com/) to:
+Our project uses [gulp](http://gulpjs.com/) to:
 
 - combine all individual modules into a single file
 - transpile ES6 code to ES5 with [babel.js](http://babeljs.io/)
@@ -31,54 +28,45 @@ gulp
 
 *Note:* Although no linter is added as of yet, the code closely follows the conventions from [Airbnb's Javascript style guide](https://github.com/airbnb/javascript)
 
-### [js/index.js](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/index.js)
+### [js/index.js](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/index.js)
 
-The app entry point is [`js/index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/index.js). 
+The app entry point is [`js/index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/index.js). 
 It performs the initial application setup (loads the app when jQuery loads, loads the initial data from the server etc.)
 
-### [js/app/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/app)
+### [js/app/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/app)
 
-The main application object is [`js/app/index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/app/index.js), which holds the necessary global application state flags and application level methods.
-It is [extended once the app loads in `index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/index.js#L30) with  the contents of [`app/constructor`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/app/constructor.js) and [`app/cache`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/app/cache.js).
+The main application object is [`js/app/index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/app/index.js), which holds the necessary global application state flags and application level methods.
+It is [extended once the app loads in `index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/index.js#L30) with  the contents of [`app/constructor`](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/app/constructor.js) and [`app/cache`](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/app/cache.js).
 This means that from here on now, any file that does `require(/* path to js/app */)` is getting that populated object since calls to `require` are cached.
 
-### [js/dom/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/dom)
+### [js/dom/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/dom)
 
 The `js/dom` folder holds all the code interacting with the DOM (go figure 😜). 
 The code is split into:
 
 - "static" methods that are used everywhere (such as adding algorithm info to the DOM) and,
 - setup code which is called within the `app/constructor`, after the DOM is ready, to initialize all the elements with their contents and listeners.
 
-### [js/editor/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/editor)
+### [js/editor/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/editor)
 
 The `js/editor` folder holds the code to create and execute code in the ace editor.
 
-### [js/module/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/module)
+### [js/module/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/module)
 
 The `js/module` folder holds all the tracers and their variations and it is essentially the same as [`js/module`](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/module) on the `gh-pages` branch. 
 The only changes are present in `js/tracer.js` where the code is converted to ES6. 
-All the modules are exported together and then "required" inside the entry point [`js/index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/index.js) where they are [attached to the global `window` object](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/index.js#L33) so [`eval` can use them](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/editor/executor.js#L7) when executing code in the code editor.
+All the modules are exported together and then "required" inside the entry point [`js/index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/index.js) where they are [attached to the global `window` object](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/index.js#L33) so [`eval` can use them](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/editor/executor.js#L7) when executing code in the code editor.
 
-### [js/server/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/server)
+### [js/server/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/server)
 
 The `js/server` folder holds all the code to load data from the server and utilizes promises from [RSVP.js](https://github.com/tildeio/rsvp.js/). 
-In [`js/server/ajax`](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/server/ajax) are some helper methods to make requesting from the server a little easier. 
-The main method is [`js/server/ajax/request.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/server/ajax/request.js) that is used by all other methods to call `$.ajax` with certain options and set/reset the global `isLoading` flag for every request.
+In [`js/server/ajax`](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/server/ajax) are some helper methods to make requesting from the server a little easier. 
+The main method is [`js/server/ajax/request.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/server/ajax/request.js) that is used by all other methods to call `$.ajax` with certain options and set/reset the global `isLoading` flag for every request.
 
-### [js/trace_manager/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/server/ajax)
+### [js/trace_manager/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/server/ajax)
 
 The `js/tracer_manager` folder holds the same logic as the [original `tracer_manager`](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/js/tracer_manager.js) from `gh-pages` branch converted to ES6 and split into modules based on functionality.
 
-### [js/utils/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/utils)
+### [js/utils/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/js/utils)
 
 The `utils` folder holds a few helper methods that are used everywhere such as building the strings for algorithm and file directories.
-
-## Remaining updates
-
-- Any algorithms added since ES6 updates were pushed to master.
-- The following pull-request code is still missing from the ES6 project and needs to be added before a full project update can be made:
-
-  - https://github.com/parkjs814/AlgorithmVisualizer/pull/97
-  - https://github.com/parkjs814/AlgorithmVisualizer/pull/101
-  - https://github.com/parkjs814/AlgorithmVisualizer/pull/102

README.md

@@ -1,5 +1,3 @@
-#### [Oh yeah, ES6 update is here 😎](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/ES6.md)
-
 # Algorithm Visualizer
 
 [![Join the chat at https://gitter.im/parkjs814/AlgorithmVisualizer](https://badges.gitter.im/parkjs814/AlgorithmVisualizer.svg)](https://gitter.im/parkjs814/AlgorithmVisualizer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -11,9 +9,10 @@ http://parkjs814.github.io/AlgorithmVisualizer
 ![Algorithm Visualizer](http://i.giphy.com/3o6EhJFgsyShX6MHeM.gif)
 
 ### Contributing
-If you run _Algorithm Visualizer_ locally and files are not loaded because Cross-Origin Requests are blocked, use [http-server](https://github.com/indexzero/http-server) or [SimpleHTTPServer](https://docs.python.org/2/library/simplehttpserver.html) to resolve the issue. [(Issue #2)](https://github.com/parkjs814/AlgorithmVisualizer/issues/2)
 
-If in need of any help check out [**Wiki**](https://github.com/parkjs814/AlgorithmVisualizer/wiki) or join our [Gitter](https://gitter.im/parkjs814/AlgorithmVisualizer?utm_source=share-link&utm_medium=link&utm_campaign=share-link) chatroom!
+We encourage you to check out [**Wiki**](https://github.com/parkjs814/AlgorithmVisualizer/wiki) before you get started.
+
+If in need of any help, join our [Gitter](https://gitter.im/parkjs814/AlgorithmVisualizer?utm_source=share-link&utm_medium=link&utm_campaign=share-link) chatroom!
 ### Backers
 
 Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/algorithmvisualizer#backer)]

branding/opencollective/logo.psd

@@ -295,8 +295,7 @@ section {
 }
 
 .files_bar > .wrapper.shadow-left.shadow-right {
-    box-shadow: inset 16px 0 16px -16px rgba(0, 0, 0, .6),
-    inset -16px 0 16px -16px rgba(0, 0, 0, .6);
+    box-shadow: inset 16px 0 16px -16px rgba(0, 0, 0, .6), inset -16px 0 16px -16px rgba(0, 0, 0, .6);
 }
 
 .explanation_container {
@@ -432,3 +431,57 @@ pre {
 .mtbl-col.notified {
     background: #f00;
 }
+
+#loading-slider {
+    position: absolute;
+    width: 100%;
+    height: 2px;
+}
+
+#loading-slider.loaded {
+    visibility: hidden;
+}
+
+.line {
+    position: absolute;
+    background: #4a8df8;
+    width: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 3px;
+}
+
+.break {
+    position: absolute;
+    background: #222;
+    width: 6px;
+    height: 2px;
+}
+
+.dot1 {
+    animation: loading 2s infinite;
+}
+
+.dot2 {
+    animation: loading 2s 0.5s infinite;
+}
+
+.dot3 {
+    animation: loading 2s 1s infinite;
+}
+
+@keyframes loading {
+    from {
+        left: 0;
+    }
+    to {
+        left: 100%;
+    }
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}

css/stylesheet.css

@@ -0,0 +1,150 @@
+'use strict';
+
+import path from 'path';
+import gulp from 'gulp';
+import uglify from 'gulp-uglify';
+import cleanCSS from 'gulp-clean-css';
+import autoprefixer from 'gulp-autoprefixer';
+import concat from 'gulp-concat';
+import header from 'gulp-header';
+import babel from 'gulp-babel';
+import gutil from 'gulp-util';
+import sourcemaps from 'gulp-sourcemaps';
+import connect from 'gulp-connect';
+import browserify from 'browserify';
+import babelify from 'babelify';
+import source from 'vinyl-source-stream';
+import buffer from 'vinyl-buffer';
+import pkg from './package.json';
+
+const appName = 'algorithm_visualizer';
+const appEntryPoint = './js/index.js';
+
+const outputPaths = {
+  javascript: './public',
+  css: './public',
+  sourceMaps: './'
+};
+
+const banner = [
+  '/**',
+  ' * <%= pkg.name %> - <%= pkg.description %>',
+  ' * @version v<%= pkg.version %>',
+  ' * @author <%= pkg.author %>',
+  ' * @link <%= pkg.homepage %>',
+  ' * @license <%= pkg.license %>',
+  ' */',
+  ''
+].join('\n');
+
+// build directories
+
+const cssDir = path.join(__dirname, 'css', '**', '*.css');
+const jsDir = path.join(__dirname, 'js', '**', '*.js');
+
+// CSS
+
+gulp.task('minify-css', () => {
+  gutil.log('\n\nBuild CSS Paths: \n', cssDir, '\n\n');
+
+  return gulp.src(cssDir)
+    .pipe(autoprefixer())
+    .pipe(cleanCSS({
+      compatibility: 'ie8'
+    }))
+    .pipe(concat(`${appName}.min.css`))
+    .pipe(header(banner, {
+      pkg
+    }))
+    .pipe(gulp.dest(outputPaths.css))
+    .pipe(connect.reload());
+});
+
+gulp.task('build-css', () => {
+  gutil.log('\n\nBuild CSS Paths: \n', cssDir, '\n\n');
+
+  return gulp.src(cssDir)
+    .pipe(autoprefixer())
+    .pipe(concat(`${appName}.css`))
+    .pipe(header(banner, {
+      pkg
+    }))
+    .pipe(gulp.dest(outputPaths.css))
+    .pipe(connect.reload());
+});
+
+// JS
+
+gulp.task('minify-js', () => {
+
+  gutil.log('\n\nBuild JS Paths: \n', jsDir, '\n\n');
+
+  return browserify({
+      entries: './js/index.js',
+      debug: true
+    })
+    .transform('babelify', {
+      presets: ['es2015']
+    })
+    .bundle()
+    .pipe(source(`${appName}.min.js`))
+    .pipe(header(banner, {
+      pkg
+    }))
+    .pipe(buffer())
+    .pipe(sourcemaps.init())
+    .pipe(uglify())
+    .pipe(sourcemaps.write(outputPaths.sourceMaps))
+    .pipe(gulp.dest(outputPaths.javascript))
+    .pipe(connect.reload());
+
+});
+
+gulp.task('build-js', () => {
+
+  gutil.log('\n\nBuild JS Paths: \n', jsDir, '\n\n');
+
+  return browserify({
+      entries: './js/index.js',
+      debug: true
+    })
+    .transform('babelify', {
+      presets: ['es2015']
+    })
+    .bundle()
+    .pipe(source(`${appName}.js`))
+    .pipe(header(banner, {
+      pkg
+    }))
+    .pipe(buffer())
+    .pipe(sourcemaps.init())
+    .pipe(sourcemaps.write(outputPaths.sourceMaps))
+    .pipe(gulp.dest(outputPaths.javascript))
+    .pipe(connect.reload());
+});
+
+// Build
+
+gulp.task('compile-css', ['build-css', 'minify-css']);
+gulp.task('compile-js', ['build-js', 'minify-js']);
+gulp.task('build', ['compile-css', 'compile-js']);
+
+// Server
+
+gulp.task('connect', function() {
+
+  connect.server({
+    livereload: true
+  });
+});
+
+// Watch
+
+gulp.task('watch', ['build'], function() {
+  gulp.watch(jsDir, ['compile-js']);
+  gulp.watch(cssDir, ['compile-css']);
+});
+
+// Default
+
+gulp.task('default', ['connect', 'watch']);