Final

htmlacademy · Jul 15, 2018 · 382f95c · 382f95c
1 parent 240e899
commit 382f95c
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 45 deletions.
diff --git a/index-silent.html b/index-silent.html
@@ -4,12 +4,10 @@
     <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 {
-        margin: 0;
-        padding: 0;
-        height: 100%;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
         -webkit-tap-highlight-color: transparent;
       }

diff --git a/index.html b/index.html
@@ -22,7 +22,6 @@
         padding: 0;
         width: 100%;
         height: 99%;
-        /* box-sizing: content-box; */
         flex-direction: column;
       }
 
@@ -31,7 +30,7 @@
       }
     </style>
   </head>
-  <body ontouchstart="">
+  <body ontouchstart=""><!-- Чтобы :active на кнопку отправки работал на мобильных устройствах -->
     <div class="global-container">
       <div class="console-container"></div>
       <div class="prompt-container global-container__prompt-container"></div>
@@ -41,22 +40,6 @@
 
     <script>
       const consoleContainerEl = document.querySelector(`.console-container`);
-      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
-        };
-      };
       window.jsConsole = new Console(consoleContainerEl, {
         array: {
           countEntriesWithoutKeys: true
@@ -65,10 +48,14 @@
           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) => {

diff --git a/js/function/function-view.js b/js/function/function-view.js
@@ -28,7 +28,7 @@ export default class FunctionView extends TypeView {
     return `\
 <div class="console__item item item--${this.viewType} ${this._mode === Mode.ERROR ? `error` : ``}">\
   <div class="head item__head italic">\
-    <pre class="head__content ${nowrapOnLog ? `nowrap` : `` }"><span class="info info--function ${isShowInfo ? `` : `hidden`}">${this._getInfo()}</span>${isShowInfo && body ? ` ` : ``}${this._getBody()}</pre>\
+    <pre class="head__content pointer ${nowrapOnLog ? `nowrap` : `` }"><span class="info info--function ${isShowInfo ? `` : `hidden`}">${this._getInfo()}</span>${isShowInfo && body ? ` ` : ``}${this._getBody()}</pre>\
   </div>\
   <div class="item__content entry-container entry-container--${this.viewType} hidden"></div>\
 </div>`;

diff --git a/js/index-silent.js b/js/index-silent.js
@@ -27,7 +27,7 @@ window.console.error = collectMessages.bind({mode: Mode.ERROR});
 
 const init = function () {
   const div = window.document.createElement(`div`);
-  div.classList.add(`console`);
+  div.classList.add(`console-container`);
   let config;
   if (Array.isArray(window.jsConsolePresets)) {
     config = mergeWith({}, ...window.jsConsolePresets.slice().reverse(), customizer);

diff --git a/js/prompt/prompt.js b/js/prompt/prompt.js
@@ -3,7 +3,7 @@ import acorn from 'acorn/dist/acorn';
 import PromptView from './prompt-view';
 
 export default class Prompt {
-  constructor(container, consoleGlobalName = `console`, params = {}) {
+  constructor(container, consoleGlobalName, params = {}) {
     if (!container) {
       throw new Error(`Prompt is not inited!`);
     } else if (!(container instanceof HTMLElement)) {

diff --git a/js/type-view.js b/js/type-view.js
@@ -163,7 +163,7 @@ export default class TypeView extends AbstractView {
         if (self._isOpeningDisabled === bool) {
           return;
         }
-        self.togglePointer(!bool);
+        self.toggleArrowPointer(!bool);
         self._addOrRemoveHeadClickHandler(!bool);
         self._isOpeningDisabled = bool;
       },
@@ -233,8 +233,8 @@ export default class TypeView extends AbstractView {
     return this._headEl.classList.toggle(`italic`, isEnable);
   }
 
-  togglePointer(isEnable) {
-    return this._headEl.classList.toggle(`item__head--pointer`, isEnable);
+  toggleArrowPointer(isEnable) {
+    return this._headEl.classList.toggle(`item__head--arrow-pointer`, isEnable);
   }
 
   toggleArrowBottom(isEnable) {

diff --git a/jsconsole.html b/jsconsole.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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 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 consoleContainerEl = document.querySelector(`.console-container`);
+      window.jsConsole = new Console(consoleContainerEl, {
+        array: {
+          countEntriesWithoutKeys: true
+        },
+        common: {
+          excludeProperties: [`__proto__`],
+          expandDepth: 1,
+          maxFieldsInHead: 5,
+          minFieldsToExpand: 5, // значение как в object.maxFieldsInHead
+          maxFieldsToExpand: 15
+        }
+      });
+      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) => {
+        return bar;
+      };
+      arr.push(arr);
+      // arr.fn = fn;
+      fn.arr = arr;
+      fn.obj = obj;
+      obj.obj = obj;
+      obj.arr = arr;
+      obj.fn = fn;
+      jsConsole.log(obj);
+      jsConsole.dir(fn);
+      jsConsole.log(arr);
+    </script>
+  </body>
+</html>
diff --git a/sass/style.scss b/sass/style.scss
@@ -66,8 +66,8 @@ __elem — element
       vertical-align: baseline;
     }
 
-    &--pointer {
-      cursor: pointer;
+    &--arrow-pointer {
+      @extend .pointer;
 
       &::before {
         content: "";
@@ -87,11 +87,6 @@ __elem — element
     margin-left: 12px;
   }
 
-  // &--show-content {
-  //   & > #{$parent}__content {
-  //     display: flex;
-  //   }
-  // }
 
   &--primitive {}
 }
@@ -116,12 +111,6 @@ __elem — element
   &__info {
     display: inline-block;
     vertical-align: top;
-    // display: none;
-    //
-    // &--show {
-    //   display: inline-block;
-    //   vertical-align: top;
-    // }
   }
 }
 
@@ -191,6 +180,10 @@ __elem — element
   display: none;
 }
 
+.pointer {
+  cursor: pointer;
+}
+
 .editor-container {
   display: inline-block;
   box-sizing: border-box;

diff --git a/index.html123 → test.html b/index.html123 → test.html
@@ -10,15 +10,14 @@
       body {
         margin: 0;
         padding: 0;
-        height: 99%;
-        box-sizing: content-box;
+        height: 100%;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
         -webkit-tap-highlight-color: transparent;
       }
     </style>
   </head>
   <body>
-    <div class="console"></div>
+    <div class="console-container"></div>
     <script src="js/index.js"></script>
 
     <script>
@@ -38,7 +37,7 @@
           fnLength: functions.length
         };
       };
-      const jsConsole = new Console(document.querySelector(`.console`), {
+      const jsConsole = new Console(document.querySelector(`.console-container`), {
         common: {
           excludeProperties: [`__proto__`],
           minFieldsToExpand: 5, // как в object.maxFieldsInHead