From 40d6c092f2fff5a7a7a4cf4b90b18c264f1e452e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9D=D0=B8=D0=BA=D0=BE=D0=BB=D0=B0=D0=B9=20=D0=AD=D0=BC?= =?UTF-8?q?=D1=80=D0=B8=D1=85?= Date: Mon, 18 Jun 2018 23:09:06 +0300 Subject: [PATCH 01/16] prompt --- gulpfile.js | 2 +- index-prompt.html | 103 +++++++++++++++++++++++++++++++++ index-silent.html | 12 ++++ index.html | 22 ++++++- index.html123 | 12 ++++ js/{main.js => console.js} | 96 +++++++++++++++++------------- js/enums.js | 9 --- js/index-prompt.js | 3 + js/index-silent.js | 4 +- js/index.js | 2 +- js/primitive/primitive-view.js | 12 +--- js/prompt/prompt-view.js | 38 ++++++++++++ js/prompt/prompt.js | 15 +++++ js/tests/configuration.test.js | 2 +- js/tests/markup.test.js | 2 +- js/utils.js | 13 +++++ sass/prompt.scss | 39 +++++++++++++ sass/style.scss | 17 ++---- 18 files changed, 323 insertions(+), 80 deletions(-) create mode 100644 index-prompt.html rename js/{main.js => console.js} (67%) create mode 100644 js/index-prompt.js create mode 100644 js/prompt/prompt-view.js create mode 100644 js/prompt/prompt.js create mode 100644 sass/prompt.scss diff --git a/gulpfile.js b/gulpfile.js index a4fc39a..c498a52 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -47,7 +47,7 @@ gulp.task(`style`, () => { }); gulp.task(`build-scripts`, () => { - return gulp.src([`js/index.js`, `js/index-silent.js`]) + return gulp.src([`js/index.js`, `js/index-silent.js`, `js/index-prompt.js`]) .pipe(debug({title: `debug`})) .pipe(plumber()) .pipe(sourcemaps.init()) diff --git a/index-prompt.html b/index-prompt.html new file mode 100644 index 0000000..bbd9834 --- /dev/null +++ b/index-prompt.html @@ -0,0 +1,103 @@ + + + + + console.js + + + + + +
+
+
+
+ + + + + diff --git a/index-silent.html b/index-silent.html index 44eb4de..0cec56b 100644 --- a/index-silent.html +++ b/index-silent.html @@ -3,6 +3,18 @@ console.js + + diff --git a/index.html b/index.html index 9801679..9a2f035 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,23 @@ console.js + + -
+
+
+ diff --git a/js/prompt/prompt-view.js b/js/prompt/prompt-view.js index 16c91d4..ba60d5a 100644 --- a/js/prompt/prompt-view.js +++ b/js/prompt/prompt-view.js @@ -1,6 +1,8 @@ import AbstractView from '../abstract-view'; import {escapeHTML} from '../utils'; +const emptyRE = /^\n$/; + export default class PromptView extends AbstractView { constructor() { super(); @@ -9,15 +11,21 @@ export default class PromptView extends AbstractView { get template() { return `\
\ -
\ - \ +
+
\ + \
`; } _bind() { - this._input = this.el.querySelector(`.prompt__input`); - this._input.addEventListener(`paste`, this._handlePaste); - this._input.addEventListener(`input`, this._handleInput); + this._inputEl = this.el.querySelector(`.prompt__input`); + this._inputEl.addEventListener(`paste`, this._handlePaste.bind(this)); + this._inputEl.addEventListener(`input`, this._handleInput.bind(this)); } _handlePaste(evt) { @@ -32,7 +40,9 @@ export default class PromptView extends AbstractView { selection.getRangeAt(0).insertNode(document.createTextNode(text)); } - _handleInput(evt) { - + _handleInput() { + if (emptyRE.test(this._inputEl.innerText)) { + this._inputEl.innerText = ``; + } } } diff --git a/sass/prompt.scss b/sass/prompt.scss index dab1048..bc8dc99 100644 --- a/sass/prompt.scss +++ b/sass/prompt.scss @@ -1,21 +1,20 @@ .prompt { display: flex; - align-items: baseline; + align-items: flex-start; + justify-content: space-around; padding: 8px; border-top: 1px solid #eeeeee; box-sizing: border-box; font-size: 0.8em; font-family: monospace, monospace; - &::before { - content: ">"; - width: 10px; + &__line-arrow { + width: 14px; height: 14px; - margin: 0 5px 0 5px; - display: inline-block; + margin-right: 10px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewbox%3D%220%200%2040%2040%22%20width%3D%2240%22%20height%3D%2240%22%3E%0A%20%20%3Cpolyline%20points%3D%2210%2C%202%2030%2C%2020%2010%2C%2038%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20/%3E%0A%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; - vertical-align: baseline; } &__input { @@ -31,9 +30,32 @@ } } - // &__send { - // padding: 8px; - // border: 1px solid black; - // border-radius: 10%; - // } + &__send-btn { + width: 36px; + height: 36px; + + &:active { + opacity: 0.5; + } + } + + &__send-icon { + width: 26px; + height: 26px; + transform: rotate(-90deg); + } +} + +.round-btn { + display: flex; + justify-content: center; + border-width: 1px; + border-style: solid; + border-radius: 50%; + outline: none; + + &--blue { + border-color: #157ffb; + background-color: #157ffb; + } } diff --git a/sass/style.scss b/sass/style.scss index bd35e1b..10da5af 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -217,5 +217,5 @@ __elem — element } -@import "entry-container"; -@import "prompt"; +// @import "entry-container"; +// @import "prompt"; From 6d3d48b7bc10afc40282611a344853761f868111 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9D=D0=B8=D0=BA=D0=BE=D0=BB=D0=B0=D0=B9=20=D0=AD=D0=BC?= =?UTF-8?q?=D1=80=D0=B8=D1=85?= Date: Sun, 24 Jun 2018 15:27:50 +0300 Subject: [PATCH 03/16] temp --- gulpfile.js | 35 +++++++++++++-- index.html | 26 ++++++++--- js/primitive/primitive-view.js | 14 +++--- js/prompt/prompt-view.js | 44 +++++++++--------- js/prompt/prompt.js | 25 +++++++++++ package-lock.json | 82 +++++++++++++++++++++++++++++++++- package.json | 3 ++ sass/prompt.scss | 31 ++++++------- sass/style.scss | 78 ++++++++++++++++---------------- 9 files changed, 247 insertions(+), 91 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index c498a52..5d964d3 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -23,7 +23,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}`, `node_modules/prismjs/themes/**/*.{css,scss,sass}`]) .pipe(plumber()) .pipe(sass()) .pipe(concat(`style.css`)) @@ -47,7 +47,7 @@ gulp.task(`style`, () => { }); gulp.task(`build-scripts`, () => { - return gulp.src([`js/index.js`, `js/index-silent.js`, `js/index-prompt.js`]) + return gulp.src([`js/index.js`, `js/index-silent.js`]) .pipe(debug({title: `debug`})) .pipe(plumber()) .pipe(sourcemaps.init()) @@ -70,6 +70,33 @@ gulp.task(`build-scripts`, () => { .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(), + commonjs(), + babel({ + babelrc: false, + exclude: [`node_modules/**`, `js/tests/**`], + presets: [ + [`env`, {modules: false}] + ], + plugins: [`external-helpers`, [`prismjs`, { + "languages": [`javascript`, `css`, `markup`], + "plugins": [`line-numbers`] + }]] + }) + ] + }, `iife`)) + // .pipe(uglify()) + .pipe(sourcemaps.write(``)) + .pipe(gulp.dest(`build/js`)); +}); + gulp.task(`build-js-presets`, () => { return gulp.src([`js/presets/**/*.js`]) .pipe(debug({title: `debug`})) @@ -134,7 +161,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`, () => { return gulp.src([ `fonts/**/*.{woff,woff2}`, `img/**.*` @@ -159,7 +186,7 @@ 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(); })); diff --git a/index.html b/index.html index a3f1473..0508f2e 100644 --- a/index.html +++ b/index.html @@ -10,20 +10,36 @@ 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; } + + .global-container { + display: flex; + margin: 0; + padding: 0; + width: 100%; + height: 99%; + /* box-sizing: content-box; */ + flex-direction: column; + } + + .global-container__prompt-container { + flex: 1 0 auto; + } -
-
+
+
+
+
- - - - From 240e8995d2f0a073c27d3f6bc29a509c5b20f196 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9D=D0=B8=D0=BA=D0=BE=D0=BB=D0=B0=D0=B9=20=D0=AD=D0=BC?= =?UTF-8?q?=D1=80=D0=B8=D1=85?= Date: Tue, 10 Jul 2018 20:25:32 +0300 Subject: [PATCH 15/16] ie11, sorry --- index-silent.html | 3 +-- js/array/array-view.js | 2 +- js/index-silent.js | 2 +- js/object/object-view.js | 2 +- js/type-view.js | 38 ++++++++------------------------------ 5 files changed, 12 insertions(+), 35 deletions(-) diff --git a/index-silent.html b/index-silent.html index 0cec56b..848c525 100644 --- a/index-silent.html +++ b/index-silent.html @@ -9,8 +9,7 @@ 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; } diff --git a/js/array/array-view.js b/js/array/array-view.js index b3b718a..cc67a38 100644 --- a/js/array/array-view.js +++ b/js/array/array-view.js @@ -77,7 +77,7 @@ export default class ArrayView extends TypeView { } toggleContentLengthShowed(isEnable) { - return !TypeView.toggleMiddleware(this._lengthEl, `hidden`, !isEnable); + return !this._lengthEl.classList.toggle(`hidden`, !isEnable); } get info() { diff --git a/js/index-silent.js b/js/index-silent.js index b633928..6618bc1 100644 --- a/js/index-silent.js +++ b/js/index-silent.js @@ -4,7 +4,7 @@ import mergeWith from 'lodash.mergewith'; import {customizer} from './utils'; import {Mode} from './enums'; -const CSS_URL = `//htmlacademy.github.io/console.js/0.2.4/css/style.min.css`; +const CSS_URL = `css/style.min.css`; const messages = []; diff --git a/js/object/object-view.js b/js/object/object-view.js index 97c10c1..705625b 100644 --- a/js/object/object-view.js +++ b/js/object/object-view.js @@ -188,7 +188,7 @@ export default class ObjectView extends TypeView { } toggleError(isEnable) { - return TypeView.toggleMiddleware(this.el, `error`, isEnable); + return this.el.classList.toggle(`error`, isEnable); } get headContent() { diff --git a/js/type-view.js b/js/type-view.js index ff48c75..8cd336c 100644 --- a/js/type-view.js +++ b/js/type-view.js @@ -210,35 +210,35 @@ export default class TypeView extends AbstractView { } toggleHeadContentBraced(isEnable) { - return TypeView.toggleMiddleware(this._headContentEl, `entry-container--braced`, isEnable); + return this._headContentEl.classList.toggle(`entry-container--braced`, isEnable); } toggleHeadContentOversized(isEnable) { - return TypeView.toggleMiddleware(this._headContentEl, `entry-container--oversize`, isEnable); + return this._headContentEl.classList.toggle(`entry-container--oversize`, isEnable); } toggleInfoShowed(isEnable) { - return !TypeView.toggleMiddleware(this._infoEl, `hidden`, !isEnable); + return !this._infoEl.classList.toggle(`hidden`, !isEnable); } toggleHeadContentShowed(isEnable) { - return !TypeView.toggleMiddleware(this._headContentEl, `hidden`, !isEnable); + return !this._headContentEl.classList.toggle(`hidden`, !isEnable); } toggleContentShowed(isEnable) { - return !TypeView.toggleMiddleware(this._contentEl, `hidden`, !isEnable); + return !this._contentEl.classList.toggle(`hidden`, !isEnable); } toggleItalic(isEnable) { - return TypeView.toggleMiddleware(this._headEl, `italic`, isEnable); + return this._headEl.classList.toggle(`italic`, isEnable); } togglePointer(isEnable) { - return TypeView.toggleMiddleware(this._headEl, `item__head--pointer`, isEnable); + return this._headEl.classList.toggle(`item__head--pointer`, isEnable); } toggleArrowBottom(isEnable) { - return TypeView.toggleMiddleware(this._headEl, `item__head--arrow-bottom`, isEnable); + return this._headEl.classList.toggle(`item__head--arrow-bottom`, isEnable); } get depth() { @@ -633,28 +633,6 @@ ${withoutKey ? `` : ` } } - /** - * Toggle CSS class on element - * If isEnable not present just toggle, otherwise add or remove - * @static - * @param {HTMLElement} el — element to toggle CSS class - * @param {string} className — CSS class - * @param {boolean|undefined} isEnable — add/remove if present, otherwise toggle - * @return {boolean} — added — true, removed — false - */ - static toggleMiddleware(el, className, isEnable) { - if (isEnable === void 0) { - return el.classList.toggle(className); - } - if (isEnable) { - el.classList.add(className); - return true; - } else { - el.classList.remove(className); - return false; - } - } - static compareProperties(a, b) { if (a === b) { return 0; From 382f95c4fa0709fec56e67ca8c3327615285def0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9D=D0=B8=D0=BA=D0=BE=D0=BB=D0=B0=D0=B9=20=D0=AD=D0=BC?= =?UTF-8?q?=D1=80=D0=B8=D1=85?= Date: Sun, 15 Jul 2018 14:45:12 +0300 Subject: [PATCH 16/16] Final --- index-silent.html | 4 +- index.html | 25 +++-------- js/function/function-view.js | 2 +- js/index-silent.js | 2 +- js/prompt/prompt.js | 2 +- js/type-view.js | 6 +-- jsconsole.html | 85 ++++++++++++++++++++++++++++++++++++ sass/style.scss | 19 +++----- index.html123 => test.html | 7 ++- 9 files changed, 107 insertions(+), 45 deletions(-) create mode 100644 jsconsole.html rename index.html123 => test.html (99%) diff --git a/index-silent.html b/index-silent.html index 848c525..34bad4a 100644 --- a/index-silent.html +++ b/index-silent.html @@ -4,12 +4,10 @@ console.js + - +
@@ -41,22 +40,6 @@ + + + + + diff --git a/sass/style.scss b/sass/style.scss index ddbd8d4..7e87e2e 100644 --- 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 b/test.html similarity index 99% rename from index.html123 rename to test.html index daa033b..3fe5820 100644 --- a/index.html123 +++ b/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; } -
+