Merge pull request #31 from htmlacademy/feature/prompt

Prompt was added! Now it's a high-grade in-browser js console!
htmlacademy · Jul 15, 2018 · 101099b · 101099b
2 parents 0a9c7f0 + 382f95c
commit 101099b
Show file tree

Hide file tree

Showing 25 changed files with 4,592 additions and 3,971 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -14,6 +14,7 @@ const imagemin = require(`gulp-imagemin`);
 const babel = require(`rollup-plugin-babel`);
 const nodeResolve = require(`rollup-plugin-node-resolve`);
 const commonjs = require(`rollup-plugin-commonjs`);
+const json = require(`rollup-plugin-json`);
 const rollup = require(`gulp-better-rollup`);
 const uglify = require(`gulp-uglify`);
 const sourcemaps = require(`gulp-sourcemaps`);
@@ -23,7 +24,7 @@ const debug = require(`gulp-debug`);
 const KarmaServer = require(`karma`).Server;
 
 gulp.task(`style`, () => {
-  return gulp.src(`sass/**/*.{css,scss,sass}`)
+  return gulp.src([`sass/**/*.{css,scss,sass}`])
       .pipe(plumber())
       .pipe(sass())
       .pipe(concat(`style.css`))
@@ -46,22 +47,82 @@ gulp.task(`style`, () => {
       .pipe(gulp.dest(`build/css`));
 });
 
+gulp.task(`style-prism`, () => {
+  return gulp.src([`node_modules/prismjs/themes/prism.css`])
+      .pipe(plumber())
+      .pipe(concat(`prism.css`))
+      .pipe(postcss([
+        autoprefixer({
+          browsers: [
+            `last 1 version`,
+            `last 2 Chrome versions`,
+            `last 2 Firefox versions`,
+            `last 2 Opera versions`,
+            `last 2 Edge versions`
+          ]
+        }),
+        mqpacker({sort: true})
+      ]))
+      .pipe(gulp.dest(`build/css`))
+      .pipe(server.stream())
+      .pipe(minify())
+      .pipe(rename(`prism.min.css`))
+      .pipe(gulp.dest(`build/css`));
+});
+
 gulp.task(`build-scripts`, () => {
   return gulp.src([`js/index.js`, `js/index-silent.js`])
       .pipe(debug({title: `debug`}))
       .pipe(plumber())
       .pipe(sourcemaps.init())
       .pipe(rollup({
         plugins: [
-          nodeResolve(),
-          commonjs(),
+          nodeResolve({
+            jsnext: true,
+            browser: true
+          }),
+          commonjs({
+            include: `node_modules/**`
+          }),
+          json(),
+          babel({
+            babelrc: false,
+            exclude: [`node_modules/**`, `js/tests/**`],
+            presets: [
+              [`@babel/preset-env`, {modules: false}]
+            ]
+          })
+        ]
+      }, `iife`))
+      // .pipe(uglify())
+      .pipe(sourcemaps.write(``))
+      .pipe(gulp.dest(`build/js`));
+});
+
+gulp.task(`build-prompt`, () => {
+  return gulp.src([`js/index-prompt.js`])
+      .pipe(debug({title: `debug`}))
+      .pipe(plumber())
+      .pipe(sourcemaps.init())
+      .pipe(rollup({
+        plugins: [
+          nodeResolve({
+            jsnext: true,
+            browser: true
+          }),
+          commonjs({
+            include: `node_modules/**`
+          }),
+          json(),
           babel({
             babelrc: false,
             exclude: [`node_modules/**`, `js/tests/**`],
             presets: [
-              [`env`, {modules: false}]
+              [`@babel/preset-env`, {modules: false}]
             ],
-            plugins: [`external-helpers`]
+            plugins: [[`prismjs`, {
+              "languages": [`javascript`]
+            }]]
           })
         ]
       }, `iife`))
@@ -81,9 +142,8 @@ gulp.task(`build-js-presets`, () => {
           babel({
             babelrc: false,
             presets: [
-              [`env`, {modules: false}]
-            ],
-            plugins: [`external-helpers`]
+              [`@babel/preset-env`, {modules: false}]
+            ]
           })
         ]
       }, `iife`))
@@ -134,7 +194,7 @@ gulp.task(`copy-html`, () => {
       .pipe(server.stream());
 });
 
-gulp.task(`copy`, gulp.series(`copy-html`, `build-scripts`, `build-js-presets`, `build-tests`, `style`, () => {
+gulp.task(`copy`, gulp.series(`copy-html`, `build-scripts`, `build-prompt`, `build-js-presets`, `build-tests`, `style`, `style-prism`, () => {
   return gulp.src([
     `fonts/**/*.{woff,woff2}`,
     `img/**.*`
@@ -159,12 +219,12 @@ gulp.task(`clean`, () => {
   return del(`build`);
 });
 
-gulp.task(`js-watch`, gulp.series(`build-scripts`, `build-js-presets`, `build-tests`, (done) => {
+gulp.task(`js-watch`, gulp.series(`build-scripts`, `build-prompt`, `build-js-presets`, `build-tests`, (done) => {
   server.reload();
   done();
 }));
 
-gulp.task(`assemble`, gulp.series(`clean`, `copy`, `style`));
+gulp.task(`assemble`, gulp.series(`clean`, `copy`, `style`, `style-prism`));
 
 gulp.task(`serve`, gulp.series(`assemble`, () => {
   server.init({
@@ -181,7 +241,7 @@ gulp.task(`serve`, gulp.series(`assemble`, () => {
 }));
 
 gulp.task(`test-watch`, gulp.series(`assemble`, `test:noerror`, () => {
-  gulp.watch(`sass/**/*.{scss,sass}`, gulp.series(`style`));
+  gulp.watch(`sass/**/*.{scss,sass}`, gulp.series(`style`, `style-prism`));
   gulp.watch(`*.html`).on(`change`, (e) => {
     if (e.type !== `deleted`) {
       gulp.series(`copy-html`);

diff --git a/index-silent.html b/index-silent.html
@@ -3,6 +3,15 @@
   <head>
     <meta charset="UTF-8">
     <title>console.js</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+
+    <style>
+      html,
+      body {
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+        -webkit-tap-highlight-color: transparent;
+      }
+    </style>
 
     <script src="js/presets/autoexpand-all.js"></script>
     <script src="js/presets/htmlacademy.js"></script>

diff --git a/index.html b/index.html
@@ -4,40 +4,68 @@
     <meta charset="UTF-8">
     <title>console.js</title>
     <link href="css/style.css" rel="stylesheet">
+    <link href="css/prism.css" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+        -webkit-tap-highlight-color: transparent;
+      }
+
+      .global-container {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 99%;
+        flex-direction: column;
+      }
+
+      .global-container__prompt-container {
+        flex: 1 0 auto;
+      }
+    </style>
   </head>
-  <body>
-    <div class="console"></div>
+  <body ontouchstart=""><!-- Чтобы :active на кнопку отправки работал на мобильных устройствах -->
+    <div class="global-container">
+      <div class="console-container"></div>
+      <div class="prompt-container global-container__prompt-container"></div>
+    </div>
+    <script src="js/index-prompt.js"></script>
     <script src="js/index.js"></script>
 
     <script>
-      const getLengths = () => {
-        const objects = Array.from(
-            document.querySelectorAll(`.item--object:not(.hidden) > .item__content.entry-container--object:not(.hidden)`)
-        );
-        const arrays = Array.from(
-            document.querySelectorAll(`.item--array:not(.hidden) > .item__content.entry-container--array:not(.hidden)`)
-        );
-        const functions = Array.from(
-            document.querySelectorAll(`.item--function:not(.hidden) > .item__content.entry-container--function:not(.hidden)`)
-        );
-        return {
-          objLength: objects.length,
-          arrLength: arrays.length,
-          fnLength: functions.length
-        };
-      };
-      const jsConsole = new Console(document.querySelector(`.console`), {
+      const consoleContainerEl = document.querySelector(`.console-container`);
+      window.jsConsole = new Console(consoleContainerEl, {
         array: {
           countEntriesWithoutKeys: true
         },
         common: {
           excludeProperties: [`__proto__`],
           expandDepth: 1,
           maxFieldsInHead: 5,
-          minFieldsToExpand: 5, // как в object.maxFieldsInHead
+          minFieldsToExpand: 5, // значение как в object.maxFieldsInHead
           maxFieldsToExpand: 15
         }
       });
+      window.jsConsole.extend(window.console);
+      window.addEventListener(`error`, (evt) => {
+        window.jsConsole.error(evt.error);
+      });
+      const promptContainer = document.querySelector(`.prompt-container`);
+      const prompt = new Prompt(promptContainer, `jsConsole`);
+      window.jsConsole.onAny = (appendedElHeight) => {
+        const promptOffsetBottom = promptContainer.offsetTop + prompt.viewHeight;
+        if (promptOffsetBottom < document.body.clientHeight) {
+          window.scroll(0, document.body.scrollTop + appendedElHeight);
+        } else {
+          window.scroll(0, promptOffsetBottom);
+        }
+      };
       const obj = {};
       const arr = [obj];
       const fn = (bar = 123) => {

diff --git a/js/array/array-view.js b/js/array/array-view.js
@@ -77,14 +77,14 @@ export default class ArrayView extends TypeView {
   }
 
   toggleContentLengthShowed(isEnable) {
-    return !TypeView.toggleMiddleware(this._lengthEl, `hidden`, !isEnable);
+    return !this._lengthEl.classList.toggle(`hidden`, !isEnable);
   }
 
   get info() {
     if (this._value[Symbol.toStringTag]) {
       return this._value[Symbol.toStringTag];
     } else if (this.stringTagName !== `Object` &&
-    (this.stringTagName !== `Array` || this._value === Array.prototype)) {
+    (this.stringTagName !== `Array` || this._value === this._console.params.global.Array.prototype)) {
       return this.stringTagName;
     } else {
       return this.protoConstructorName;
@@ -145,7 +145,7 @@ export default class ArrayView extends TypeView {
         emptyCount = 0;
       }
       if (hasKey) {
-        if (this._propKey === `[[Entries]]` && this._parentView.value instanceof Map) {
+        if (this._propKey === `[[Entries]]` && this._console.checkInstanceOf(this._parentView.value, `Map`)) {
           const pair = arr[i];
           const el = new MapEntryView({val: pair, mode, depth: this.nextNestingLevel, parentView: this, propKey: this._propKey}, this._console).el;
           this.isAutoExpandNeeded = true;