algorithm-visualizer · 64json · Jun 1, 2016 · May 29, 2016 · May 29, 2016 · May 29, 2016
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  presets: ['es2015']
+}
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .idea
 .DS_Store
 node_modules
+_*
diff --git a/branding/opencollective/logo.psd b/branding/opencollective/logo.psd
diff --git a/css/stylesheet.css b/css/stylesheet.css
@@ -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;
+}
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -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']);