From 9a9ec0f33b939ea4e6a80198d54e42b5376d3f0d Mon Sep 17 00:00:00 2001 From: olerom Date: Tue, 6 Jun 2017 02:27:27 +0300 Subject: [PATCH 1/9] Add very simple ability to add and delete items --- public/dist/scripts/dummy.js | 64 +++++++++++++++++++++ public/dist/styles/default.css | 4 ++ public/dist/styles/default.css.map | 2 +- public/index.html | 64 +++++++++++---------- src/styles/project/todo-list/todo-item.scss | 4 ++ 5 files changed, 106 insertions(+), 32 deletions(-) create mode 100644 public/dist/scripts/dummy.js diff --git a/public/dist/scripts/dummy.js b/public/dist/scripts/dummy.js new file mode 100644 index 0000000..b7ac578 --- /dev/null +++ b/public/dist/scripts/dummy.js @@ -0,0 +1,64 @@ +document.addEventListener('DOMContentLoaded', function () { + var input = document.querySelector('.todo-add_input'); + var addButton = document.getElementsByClassName('action_target')[0]; + var list = document.querySelector('.todo-list'); + input.addEventListener('keydown', function (e) { + if (e.keyCode === 13) { + processingInput(); + } + }); + addButton.addEventListener('click', processingInput); + function processingInput() { + var text = input.value.trim(); + if (text.length !== 0) { + input.value = ''; + addItem(text); + } + } + + function addItem(text) { + list.insertAdjacentHTML( + 'beforeend', + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + text + '
' + + '
' + + '
'); + + var removeItems = list.querySelectorAll('.js-todo-item_remove-action'); + removeItems[removeItems.length - 1].addEventListener( + 'click', + function (e) { + e.preventDefault(); + var item = this.closest('.todo-item'); + item.parentNode.removeChild(item); + } + ); + + var completeItems = list.querySelectorAll('.js-todo-item_mark-ready'); + completeItems[completeItems.length - 1].addEventListener( + 'click', + function (e) { + e.preventDefault(); + var item = this.closest('.todo-item'); + + if (item.className === 'todo-item') { + item.className += ' __ready'; + } else { + item.className = 'todo-item'; + } + } + ); + } + +}); diff --git a/public/dist/styles/default.css b/public/dist/styles/default.css index af69d12..e58c61e 100644 --- a/public/dist/styles/default.css +++ b/public/dist/styles/default.css @@ -142,6 +142,10 @@ padding: 12px; } +.todo-item.__hide { + display: none; +} + .todo-item:hover { background-color: #fafafa; } diff --git a/public/dist/styles/default.css.map b/public/dist/styles/default.css.map index f625a4b..03b559a 100644 --- a/public/dist/styles/default.css.map +++ b/public/dist/styles/default.css.map @@ -1 +1 @@ -{"version":3,"file":"default.css","sources":["default.scss","base/action/action.scss","base/filter/filter.scss","config/globals.scss","config/vars/colors.scss","config/vars/fonts.scss","config/vars/layout.scss","config/vars/offsets.scss","config/mixins/border-radius.scss","config/mixins/media.scss","config/mixins/clearfix.scss","base/input-checkbox/input-checkbox.scss","project/todos-add/todos-add.scss","project/todo-list/todo-list.scss","project/todo-list/todo-item.scss","project/todos-wrapper/todos-wrapper.scss","project/todos-header/header.scss","project/todos-bottom-cards/todos-bottom-cards.scss","project/todos-actions-bar/todos-actions-bar.scss","project/layout.scss"],"sourcesContent":["@import \"base/action/action\";\n@import \"base/filter/filter\";\n@import \"base/input-checkbox/input-checkbox\";\n\n@import \"project/todos-add/todos-add\";\n@import \"project/todo-list/todo-list\";\n@import \"project/todo-list/todo-item\";\n@import \"project/todos-wrapper/todos-wrapper\";\n@import \"project/todos-header/header\";\n@import \"project/todos-bottom-cards/todos-bottom-cards\";\n@import \"project/todos-actions-bar/todos-actions-bar\";\n\n@import \"project/layout\";",".action {\n position: relative;\n display: inline-block;\n}\n\n .action_target {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n z-index: 1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }","@import \"../../config/globals\";\n\n.filter {\n border: 0;\n background-color: $c-filters-background;\n color: $c-text;\n outline: none;\n cursor: pointer;\n padding: $offset_half $offset_2x;\n}\n\n.filter.__active {\n border: 1px solid $c-default-border;\n border-radius: 5%;\n}\n","@import \"vars/colors\";\n@import \"vars/fonts\";\n@import \"vars/layout\";\n@import \"vars/offsets\";\n\n@import \"mixins/border-radius\";\n@import \"mixins/media\";\n\n@import \"mixins/clearfix\";","$c-main-background: #f5f5f5;\n$c-text: #666;\n$c-completed-text: #cfcfcf;\n$c-header-text: rgba(175, 47, 47, 0.15);\n$c-default-border: #e6e6e6;\n$c-filters-background: #fff;\n$c-completed-todo: #5dc2af;\n$c-main-content-bg: #fff;\n$c-item-hover-bg: #fafafa;\n\n","$font-main: 'Helvetica Neue', Arial, sans-serif;\n$font-size-header: 100px;\n$font-weight-header: 100;\n$font-size-text: 22px;","$first-card-height: 5px;\n$second-card-margin-top: -1px;\n$second-card-height: $first-card-height + $second-card-margin-top;\n$text-content-height: 30px;\n\n$item-select-height: 35px;\n$item-select-width: $item-select-height;\n","$offset-card-first: 1px;\n$offset-card-second: $offset-card-first + 1px;\n$offset-todos-add: 10px;\n$offset-main-content: 15px;\n\n$offset: 4px;\n$offset_half: $offset / 2;\n$offset_2x: $offset * 2;\n$offset_3x: $offset * 3;\n$offset_4x: $offset * 4;\n$offset_5x: $offset * 5;\n$offset_6x: $offset * 6;\n$offset_7x: $offset * 7;\n$offset_8x: $offset * 8;\n$offset_9x: $offset * 9;\n$offset_10x: $offset * 10;\n","@mixin border-radius($radius, $border-size, $color) {\n -webkit-border-radius: $radius;\n -moz-border-radius: $radius;\n -ms-border-radius: $radius;\n border-radius: $radius;\n border: $border-size solid $color;\n}","@mixin retinaMedia {\n @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 120dpi), (min-resolution: 1.5dppx) {\n @content;\n }\n}\n","@mixin clearfix() {\n &:before,\n &:after {\n content: '';\n display: table;\n }\n\n &:after {\n clear: both;\n }\n}","@import \"../../config/globals\";\n\n$checkbox-size: 36px;\n$c-checkbox-active: #5dc2af;\n\n.input-checkbox {\n position: relative;\n width: $checkbox-size;\n min-width: $checkbox-size;\n height: $checkbox-size;\n}\n\n .input-checkbox_target {\n position: absolute;\n opacity: 0;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: pointer;\n }\n\n .input-checkbox_visual {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n @include border-radius(50%, 1px, $c-default-border);\n }\n\n .input-checkbox_target:hover ~ .input-checkbox_visual {\n }\n //todo fix icon as sprite\n .input-checkbox_target:checked ~ .input-checkbox_visual {\n border: 1px solid $c-checkbox-active;\n background: url('../../../images/svg/completed.svg') no-repeat center;\n }\n\n .input-checkbox_target:hover:checked ~ .input-checkbox_visual {\n }","@import \"../../config/globals\";\n\n$todos-add-height: 64px;\n\n.todos-add {\n height: $todos-add-height;\n border: 1px solid $c-default-border;\n margin-bottom: -1px;\n background: #fff;\n}\n\n .todo-add_select-all-action {\n width: 24px;\n height: 24px;\n float: left;\n margin: 20px 0 0 20px;\n }\n\n .todo-add_select-all-action .action_visual {\n width: 24px;\n height: 12px;\n position: absolute;\n top: 50%;\n margin-top: -6px;\n }\n\n .todo-add_select-all-action .action_visual:before,\n .todo-add_select-all-action .action_visual:after {\n content: '';\n position: absolute;\n height: 3px;\n background: #737373;\n width: 100%;\n }\n\n .todo-add_select-all-action .action_visual:before {\n transform: rotate(32.5deg);\n left: -9px;\n top: 2px;\n }\n\n .todo-add_select-all-action .action_visual:after {\n transform: rotate(-32.5deg);\n left: 9px;\n top: 2px;\n }\n\n .todo-add_input_w {\n overflow: hidden\n }\n\n .todo-add_input {\n height: $todos-add-height;\n border: none;\n background: $c-main-content-bg;\n outline: none;\n width: 100%;\n font-size: $font-size-text;\n font-style: italic;\n font-weight: 100;\n color: $c-text;\n align-self: center;\n padding: 16px;\n box-sizing: border-box; /* Свойства width и height включают в себя значения полей и границ, но не отступов (margin) */\n }\n","@import \"../../config/vars/colors\";\n\n\n.todo-list {\n //border: 1px solid $c-default-border;\n\n background-color: $c-main-content-bg;\n margin: 0 auto -2px;\n border: 1px solid $c-default-border;\n}","@import \"../../config/globals\";\n\n\n.todo-item {\n overflow: hidden;\n border-top: 1px solid $c-default-border;\n display: flex;\n padding: $offset_3x;\n}\n\n .todo-item:hover {\n background-color: $c-item-hover-bg;\n }\n\n .todo-item_text-w {\n overflow: hidden;\n padding-left: $offset_2x;\n padding-right: $offset_2x;\n margin: 0 2px 0 2px;\n padding-top: 10px;\n flex: 1 0;\n }\n\n .todo-item_text {\n overflow: hidden;\n border: none;\n resize: none;\n color: $c-text;\n outline: none;\n font-size: $font-size-text;\n min-height: $text-content-height;\n background-color: inherit;\n word-wrap: break-word;\n align-self: center;\n word-break: break-all;\n }\n\n .todo-item.__ready .todo-item_text {\n text-decoration: line-through;\n color: $c-completed-text;\n }\n\n\n .todo-item_ready-checker {\n align-self: center;\n float: left;\n }\n\n .todo-item_remove-action {\n margin-top: $offset_3x;\n margin-bottom: $offset_3x;\n order: 1;\n float: right;\n align-self: flex-end;\n }\n\n .todo-item_remove-action .action_visual {\n width: 18px;\n height: 18px;\n //position: relative;\n overflow: hidden;\n }\n\n .todo-item:hover .todo-item_remove-action .action_visual {\n background: url('../../../images/svg/close.svg') no-repeat center;\n }\n",".todos-wrapper {\n max-width: 600px;\n margin: 0 auto;\n}","@import \"../../config/vars/colors\";\n@import \"../../config/vars/fonts\";\n\n.todos-header {\n text-align: center;\n}\n\n .todos-title {\n display: inline-block;\n color: $c-header-text;\n text-transform: lowercase;\n font-weight: $font-weight-header;\n font-size: $font-size-header;\n\n -webkit-margin-before: 0;\n -webkit-margin-after: 0;\n -webkit-margin-start: 0;\n -webkit-margin-end: 0;\n }\n\n","@import \"../../config/vars/colors\";\n@import \"../../config/vars/offsets\";\n@import \"../../config/vars/layout\";\n\n.todos-bottom-cards {\n width: 100%;\n margin: 0 auto;\n}\n\n.todos-bottom-cards_first {\n height: $first-card-height;\n border: 1px solid $c-default-border;\n background-color: $c-main-content-bg;\n margin-left: $offset-card-first;\n margin-right: $offset-card-first;\n}\n\n.todos-bottom-cards_second {\n height: $second-card-height;\n border: 1px solid $c-default-border;\n background-color: $c-main-content-bg;\n margin-top: $second-card-margin-top;\n margin-left: $offset-card-second;\n margin-right: $offset-card-second;\n}","@import \"../../config/vars/colors\";\n@import \"../../config/vars/offsets\";\n\n.todos-actions-bar {\n border: 1px solid $c-default-border;\n padding-top: $offset-main-content;\n padding-bottom: $offset-main-content;\n margin: 0 auto -1px;\n background-color: $c-filters-background;\n min-height: $offset-main-content;\n color: $c-text;\n word-break: break-all;\n text-align: center;\n}\n\n .todos-actions-bar_counter {\n float: left;\n margin-left: $offset-main-content;\n }\n\n .todos-filters {\n margin: 0 auto;\n display: inline-block;\n }\n\n\n .todos-actions-bar_clear-completed {\n color: $c-text;\n border: none;\n outline: none;\n cursor: pointer;\n margin-right: $offset-main-content;\n float: right;\n background-color: $c-main-content-bg;\n }\n\n\n","@import \"../config/globals\";\n\nbody {\n background-color: $c-main-background;\n font-family: $font-main;\n}"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"default.css","sources":["default.scss","base/action/action.scss","base/filter/filter.scss","config/globals.scss","config/vars/colors.scss","config/vars/fonts.scss","config/vars/layout.scss","config/vars/offsets.scss","config/mixins/border-radius.scss","config/mixins/media.scss","config/mixins/clearfix.scss","base/input-checkbox/input-checkbox.scss","project/todos-add/todos-add.scss","project/todo-list/todo-list.scss","project/todo-list/todo-item.scss","project/todos-wrapper/todos-wrapper.scss","project/todos-header/header.scss","project/todos-bottom-cards/todos-bottom-cards.scss","project/todos-actions-bar/todos-actions-bar.scss","project/layout.scss"],"sourcesContent":["@import \"base/action/action\";\n@import \"base/filter/filter\";\n@import \"base/input-checkbox/input-checkbox\";\n\n@import \"project/todos-add/todos-add\";\n@import \"project/todo-list/todo-list\";\n@import \"project/todo-list/todo-item\";\n@import \"project/todos-wrapper/todos-wrapper\";\n@import \"project/todos-header/header\";\n@import \"project/todos-bottom-cards/todos-bottom-cards\";\n@import \"project/todos-actions-bar/todos-actions-bar\";\n\n@import \"project/layout\";",".action {\n position: relative;\n display: inline-block;\n}\n\n .action_target {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n z-index: 1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }","@import \"../../config/globals\";\n\n.filter {\n border: 0;\n background-color: $c-filters-background;\n color: $c-text;\n outline: none;\n cursor: pointer;\n padding: $offset_half $offset_2x;\n}\n\n.filter.__active {\n border: 1px solid $c-default-border;\n border-radius: 5%;\n}\n","@import \"vars/colors\";\n@import \"vars/fonts\";\n@import \"vars/layout\";\n@import \"vars/offsets\";\n\n@import \"mixins/border-radius\";\n@import \"mixins/media\";\n\n@import \"mixins/clearfix\";","$c-main-background: #f5f5f5;\n$c-text: #666;\n$c-completed-text: #cfcfcf;\n$c-header-text: rgba(175, 47, 47, 0.15);\n$c-default-border: #e6e6e6;\n$c-filters-background: #fff;\n$c-completed-todo: #5dc2af;\n$c-main-content-bg: #fff;\n$c-item-hover-bg: #fafafa;\n\n","$font-main: 'Helvetica Neue', Arial, sans-serif;\n$font-size-header: 100px;\n$font-weight-header: 100;\n$font-size-text: 22px;","$first-card-height: 5px;\n$second-card-margin-top: -1px;\n$second-card-height: $first-card-height + $second-card-margin-top;\n$text-content-height: 30px;\n\n$item-select-height: 35px;\n$item-select-width: $item-select-height;\n","$offset-card-first: 1px;\n$offset-card-second: $offset-card-first + 1px;\n$offset-todos-add: 10px;\n$offset-main-content: 15px;\n\n$offset: 4px;\n$offset_half: $offset / 2;\n$offset_2x: $offset * 2;\n$offset_3x: $offset * 3;\n$offset_4x: $offset * 4;\n$offset_5x: $offset * 5;\n$offset_6x: $offset * 6;\n$offset_7x: $offset * 7;\n$offset_8x: $offset * 8;\n$offset_9x: $offset * 9;\n$offset_10x: $offset * 10;\n","@mixin border-radius($radius, $border-size, $color) {\n -webkit-border-radius: $radius;\n -moz-border-radius: $radius;\n -ms-border-radius: $radius;\n border-radius: $radius;\n border: $border-size solid $color;\n}","@mixin retinaMedia {\n @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 120dpi), (min-resolution: 1.5dppx) {\n @content;\n }\n}\n","@mixin clearfix() {\n &:before,\n &:after {\n content: '';\n display: table;\n }\n\n &:after {\n clear: both;\n }\n}","@import \"../../config/globals\";\n\n$checkbox-size: 36px;\n$c-checkbox-active: #5dc2af;\n\n.input-checkbox {\n position: relative;\n width: $checkbox-size;\n min-width: $checkbox-size;\n height: $checkbox-size;\n}\n\n .input-checkbox_target {\n position: absolute;\n opacity: 0;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: pointer;\n }\n\n .input-checkbox_visual {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n @include border-radius(50%, 1px, $c-default-border);\n }\n\n .input-checkbox_target:hover ~ .input-checkbox_visual {\n }\n //todo fix icon as sprite\n .input-checkbox_target:checked ~ .input-checkbox_visual {\n border: 1px solid $c-checkbox-active;\n background: url('../../../images/svg/completed.svg') no-repeat center;\n }\n\n .input-checkbox_target:hover:checked ~ .input-checkbox_visual {\n }","@import \"../../config/globals\";\n\n$todos-add-height: 64px;\n\n.todos-add {\n height: $todos-add-height;\n border: 1px solid $c-default-border;\n margin-bottom: -1px;\n background: #fff;\n}\n\n .todo-add_select-all-action {\n width: 24px;\n height: 24px;\n float: left;\n margin: 20px 0 0 20px;\n }\n\n .todo-add_select-all-action .action_visual {\n width: 24px;\n height: 12px;\n position: absolute;\n top: 50%;\n margin-top: -6px;\n }\n\n .todo-add_select-all-action .action_visual:before,\n .todo-add_select-all-action .action_visual:after {\n content: '';\n position: absolute;\n height: 3px;\n background: #737373;\n width: 100%;\n }\n\n .todo-add_select-all-action .action_visual:before {\n transform: rotate(32.5deg);\n left: -9px;\n top: 2px;\n }\n\n .todo-add_select-all-action .action_visual:after {\n transform: rotate(-32.5deg);\n left: 9px;\n top: 2px;\n }\n\n .todo-add_input_w {\n overflow: hidden\n }\n\n .todo-add_input {\n height: $todos-add-height;\n border: none;\n background: $c-main-content-bg;\n outline: none;\n width: 100%;\n font-size: $font-size-text;\n font-style: italic;\n font-weight: 100;\n color: $c-text;\n align-self: center;\n padding: 16px;\n box-sizing: border-box; /* Свойства width и height включают в себя значения полей и границ, но не отступов (margin) */\n }\n","@import \"../../config/vars/colors\";\n\n\n.todo-list {\n //border: 1px solid $c-default-border;\n\n background-color: $c-main-content-bg;\n margin: 0 auto -2px;\n border: 1px solid $c-default-border;\n}","@import \"../../config/globals\";\n\n\n.todo-item {\n overflow: hidden;\n border-top: 1px solid $c-default-border;\n display: flex;\n padding: $offset_3x;\n}\n\n .todo-item.__hide {\n display: none;\n }\n\n .todo-item:hover {\n background-color: $c-item-hover-bg;\n }\n\n .todo-item_text-w {\n overflow: hidden;\n padding-left: $offset_2x;\n padding-right: $offset_2x;\n margin: 0 2px 0 2px;\n padding-top: 10px;\n flex: 1 0;\n }\n\n .todo-item_text {\n overflow: hidden;\n border: none;\n resize: none;\n color: $c-text;\n outline: none;\n font-size: $font-size-text;\n min-height: $text-content-height;\n background-color: inherit;\n word-wrap: break-word;\n align-self: center;\n word-break: break-all;\n }\n\n .todo-item.__ready .todo-item_text {\n text-decoration: line-through;\n color: $c-completed-text;\n }\n\n\n .todo-item_ready-checker {\n align-self: center;\n float: left;\n }\n\n .todo-item_remove-action {\n margin-top: $offset_3x;\n margin-bottom: $offset_3x;\n order: 1;\n float: right;\n align-self: flex-end;\n }\n\n .todo-item_remove-action .action_visual {\n width: 18px;\n height: 18px;\n //position: relative;\n overflow: hidden;\n }\n\n .todo-item:hover .todo-item_remove-action .action_visual {\n background: url('../../../images/svg/close.svg') no-repeat center;\n }\n",".todos-wrapper {\n max-width: 600px;\n margin: 0 auto;\n}","@import \"../../config/vars/colors\";\n@import \"../../config/vars/fonts\";\n\n.todos-header {\n text-align: center;\n}\n\n .todos-title {\n display: inline-block;\n color: $c-header-text;\n text-transform: lowercase;\n font-weight: $font-weight-header;\n font-size: $font-size-header;\n\n -webkit-margin-before: 0;\n -webkit-margin-after: 0;\n -webkit-margin-start: 0;\n -webkit-margin-end: 0;\n }\n\n","@import \"../../config/vars/colors\";\n@import \"../../config/vars/offsets\";\n@import \"../../config/vars/layout\";\n\n.todos-bottom-cards {\n width: 100%;\n margin: 0 auto;\n}\n\n.todos-bottom-cards_first {\n height: $first-card-height;\n border: 1px solid $c-default-border;\n background-color: $c-main-content-bg;\n margin-left: $offset-card-first;\n margin-right: $offset-card-first;\n}\n\n.todos-bottom-cards_second {\n height: $second-card-height;\n border: 1px solid $c-default-border;\n background-color: $c-main-content-bg;\n margin-top: $second-card-margin-top;\n margin-left: $offset-card-second;\n margin-right: $offset-card-second;\n}","@import \"../../config/vars/colors\";\n@import \"../../config/vars/offsets\";\n\n.todos-actions-bar {\n border: 1px solid $c-default-border;\n padding-top: $offset-main-content;\n padding-bottom: $offset-main-content;\n margin: 0 auto -1px;\n background-color: $c-filters-background;\n min-height: $offset-main-content;\n color: $c-text;\n word-break: break-all;\n text-align: center;\n}\n\n .todos-actions-bar_counter {\n float: left;\n margin-left: $offset-main-content;\n }\n\n .todos-filters {\n margin: 0 auto;\n display: inline-block;\n }\n\n\n .todos-actions-bar_clear-completed {\n color: $c-text;\n border: none;\n outline: none;\n cursor: pointer;\n margin-right: $offset-main-content;\n float: right;\n background-color: $c-main-content-bg;\n }\n\n\n","@import \"../config/globals\";\n\nbody {\n background-color: $c-main-background;\n font-family: $font-main;\n}"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 6a66a8a..7ae3bd9 100644 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,8 @@ Todos + +
@@ -35,7 +37,7 @@

todos

- +
@@ -43,40 +45,40 @@

todos

-
-
- -
-
+ + + + + + + -
-
- -
+ + + + -
-
CSS
-
-
-
-
- -
-
+ + + + + + + + + + + -
-
- -
+ + + + -
-
JS tools
-
-
+ + + +
Date: Tue, 6 Jun 2017 03:14:06 +0300 Subject: [PATCH 2/9] Add smart DOM template --- public/dist/scripts/dummy.js | 80 ++++++++++++++++++++++++++---------- public/dist/scripts/main.js | 3 ++ public/index.html | 34 --------------- 3 files changed, 62 insertions(+), 55 deletions(-) create mode 100644 public/dist/scripts/main.js diff --git a/public/dist/scripts/dummy.js b/public/dist/scripts/dummy.js index b7ac578..2ccc4f1 100644 --- a/public/dist/scripts/dummy.js +++ b/public/dist/scripts/dummy.js @@ -17,30 +17,17 @@ document.addEventListener('DOMContentLoaded', function () { } function addItem(text) { - list.insertAdjacentHTML( - 'beforeend', - '
' + - '
' + - '' + - '
' + - '
' + - '
' + - '
' + - '' + - '
' + - '
' + - '
' + text + '
' + - '
' + - '
'); - - var removeItems = list.querySelectorAll('.js-todo-item_remove-action'); - removeItems[removeItems.length - 1].addEventListener( + var templateResult = templates.item({ + text: text + }); + + list.appendChild(templateResult.root); + + templateResult.deleteLink.addEventListener( 'click', function (e) { e.preventDefault(); - var item = this.closest('.todo-item'); + var item = templateResult.root; item.parentNode.removeChild(item); } ); @@ -61,4 +48,55 @@ document.addEventListener('DOMContentLoaded', function () { ); } + var templates = { + item: function (data) { + var item = document.createElement('div'); + item.className = 'todo-item'; + + var inputCheckboxWrapper = document.createElement('div'); + inputCheckboxWrapper.className = 'input-checkbox todo-item_ready-checker'; + + var checkbox = document.createElement('input'); + checkbox.type = "checkbox"; + checkbox.className = "input-checkbox_target"; + + var checkboxVisual = document.createElement('div'); + checkboxVisual.className = 'input-checkbox_visual'; + + inputCheckboxWrapper.appendChild(checkbox); + inputCheckboxWrapper.appendChild(checkboxVisual); + item.appendChild(inputCheckboxWrapper); + + var removeWrapper = document.createElement('div'); + removeWrapper.className = 'action todo-item_remove-action'; + + var actionVisual = document.createElement('div'); + actionVisual.className = 'action_visual'; + + var deleteLink = document.createElement('button'); + deleteLink.className = 'action_target js-todo-item_remove-action'; + + removeWrapper.appendChild(actionVisual); + removeWrapper.appendChild(deleteLink); + item.appendChild(removeWrapper); + + var textWrapper = document.createElement('div'); + textWrapper.className = 'todo-item_text-w'; + + var text = document.createElement('div'); + text.className = 'todo-item_text'; + text.contentEditable = true; + text.appendChild(document.createTextNode(data.text || '')); + + textWrapper.appendChild(text); + item.appendChild(textWrapper); + + return { + root: item, + deleteLink: deleteLink + }; + } + }; + }); + diff --git a/public/dist/scripts/main.js b/public/dist/scripts/main.js new file mode 100644 index 0000000..5d150ce --- /dev/null +++ b/public/dist/scripts/main.js @@ -0,0 +1,3 @@ +/** + * Created by olerom on 06.06.17. + */ diff --git a/public/index.html b/public/index.html index 7ae3bd9..c128154 100644 --- a/public/index.html +++ b/public/index.html @@ -45,40 +45,6 @@

todos

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Date: Tue, 6 Jun 2017 03:34:02 +0300 Subject: [PATCH 3/9] Correct DOM templater: add completeLink --- public/dist/scripts/dummy.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/public/dist/scripts/dummy.js b/public/dist/scripts/dummy.js index 2ccc4f1..3978b11 100644 --- a/public/dist/scripts/dummy.js +++ b/public/dist/scripts/dummy.js @@ -32,11 +32,9 @@ document.addEventListener('DOMContentLoaded', function () { } ); - var completeItems = list.querySelectorAll('.js-todo-item_mark-ready'); - completeItems[completeItems.length - 1].addEventListener( + templateResult.completeLink.addEventListener( 'click', function (e) { - e.preventDefault(); var item = this.closest('.todo-item'); if (item.className === 'todo-item') { @@ -93,10 +91,10 @@ document.addEventListener('DOMContentLoaded', function () { return { root: item, - deleteLink: deleteLink + deleteLink: deleteLink, + completeLink: inputCheckboxWrapper }; } }; }); - From 68b67075902f22534a5ad8d41a190034d517a736 Mon Sep 17 00:00:00 2001 From: olerom Date: Tue, 6 Jun 2017 23:53:49 +0300 Subject: [PATCH 4/9] Add very simple realization --- public/dist/scripts/counter.js | 25 +++ public/dist/scripts/dummy.js | 270 ++++++++++++++++++++++++--------- public/dist/scripts/main.js | 3 - public/index.html | 45 +++--- 4 files changed, 243 insertions(+), 100 deletions(-) create mode 100644 public/dist/scripts/counter.js delete mode 100644 public/dist/scripts/main.js diff --git a/public/dist/scripts/counter.js b/public/dist/scripts/counter.js new file mode 100644 index 0000000..1eaae2a --- /dev/null +++ b/public/dist/scripts/counter.js @@ -0,0 +1,25 @@ +function TodoActionsBarCounter(counter) { + // this._counter = counter; + + var count = 0; + + this.set = function setCounter(setCount) { + count = setCount; + showCounter(); + }; + + this.inc = function incrementCounter() { + count++; + showCounter(); + }; + + this.dec = function decrementCounter() { + count--; + showCounter(); + + }; + + function showCounter() { + counter.textContent = count + " item(s) left"; + } +} \ No newline at end of file diff --git a/public/dist/scripts/dummy.js b/public/dist/scripts/dummy.js index 3978b11..7bfb4f2 100644 --- a/public/dist/scripts/dummy.js +++ b/public/dist/scripts/dummy.js @@ -1,100 +1,220 @@ document.addEventListener('DOMContentLoaded', function () { - var input = document.querySelector('.todo-add_input'); - var addButton = document.getElementsByClassName('action_target')[0]; - var list = document.querySelector('.todo-list'); - input.addEventListener('keydown', function (e) { - if (e.keyCode === 13) { - processingInput(); - } - }); - addButton.addEventListener('click', processingInput); - function processingInput() { - var text = input.value.trim(); - if (text.length !== 0) { - input.value = ''; - addItem(text); - } - } - function addItem(text) { - var templateResult = templates.item({ - text: text + var input = document.querySelector('.todo-add_input'); + var addButton = document.getElementsByClassName('action_target')[0]; + var list = document.querySelector('.todo-list'); + input.addEventListener('keydown', function (e) { + if (e.keyCode === 13) { + processingInput(); + } + }); + + var selectAll = document.querySelector('.js-todos-select-all'); + selectAll.addEventListener('click', function (e) { + e.preventDefault(); + + var hidden = document.getElementsByClassName('todo-item'); + var badMoves = document.getElementsByClassName('input-checkbox_target'); + + var size = hidden.length; + for (var i = 0; i < size; i++) { + hidden[i].classList.add("__ready"); + badMoves[i].checked = true; + } }); - list.appendChild(templateResult.root); - templateResult.deleteLink.addEventListener( - 'click', - function (e) { - e.preventDefault(); - var item = templateResult.root; - item.parentNode.removeChild(item); + var active = document.getElementsByClassName('filter')[1]; + active.addEventListener('click', function (e) { + e.preventDefault(); + + fixHidden(); + + active.classList.add("__active"); + showAll.classList.remove("__active"); + completed.classList.remove("__active"); + + + var hidden = document.getElementsByClassName('__ready'); + var size = hidden.length; + for (var i = 0; i < size; i++) { + hidden[i].classList.add("__hide"); } - ); + }); - templateResult.completeLink.addEventListener( - 'click', - function (e) { - var item = this.closest('.todo-item'); + var completed = document.getElementsByClassName('filter')[2]; + completed.addEventListener('click', function (e) { + e.preventDefault(); - if (item.className === 'todo-item') { - item.className += ' __ready'; - } else { - item.className = 'todo-item'; + fixHidden(); + + completed.classList.add("__active"); + showAll.classList.remove("__active"); + active.classList.remove("__active"); + + var hidden = document.getElementsByClassName('todo-item'); + var size = hidden.length; + + var uncompletedItems = []; + var j = 0; + for (var i = 0; i < size; i++) { + if (!hidden[i].classList.contains("__ready")) { + uncompletedItems[j++] = hidden[i]; } } - ); - } - var templates = { - item: function (data) { - var item = document.createElement('div'); - item.className = 'todo-item'; + for (i = 0; i < j; i++) { + uncompletedItems[i].classList.add("__hide"); + } + }); - var inputCheckboxWrapper = document.createElement('div'); - inputCheckboxWrapper.className = 'input-checkbox todo-item_ready-checker'; + var fixHidden = function () { + var hidden = document.getElementsByClassName('todo-item __ready __hide'); + var size = hidden.length; + for (var i = 0; i < size; i++) { + hidden[0].classList.remove("__hide"); + } - var checkbox = document.createElement('input'); - checkbox.type = "checkbox"; - checkbox.className = "input-checkbox_target"; + hidden = document.getElementsByClassName('todo-item __hide'); + size = hidden.length; + for (var j = 0; j < size; j++) { + hidden[0].classList.remove("__hide"); + } + }; + + var showAll = document.getElementsByClassName('filter')[0]; + showAll.addEventListener('click', function (e) { + e.preventDefault(); - var checkboxVisual = document.createElement('div'); - checkboxVisual.className = 'input-checkbox_visual'; + showAll.classList.add("__active"); + completed.classList.remove("__active"); + active.classList.remove("__active"); - inputCheckboxWrapper.appendChild(checkbox); - inputCheckboxWrapper.appendChild(checkboxVisual); - item.appendChild(inputCheckboxWrapper); - var removeWrapper = document.createElement('div'); - removeWrapper.className = 'action todo-item_remove-action'; + fixHidden(); + }); - var actionVisual = document.createElement('div'); - actionVisual.className = 'action_visual'; + var clearCompleted = document.querySelector('.js-todos-actions-bar_clear-completed'); + clearCompleted.addEventListener('click', function (e) { + e.preventDefault(); - var deleteLink = document.createElement('button'); - deleteLink.className = 'action_target js-todo-item_remove-action'; + var items = document.getElementsByClassName('todo-item __ready'); + var size = items.length; + for (var i = 0; i < size; i++) { + items[0].parentNode.removeChild(items[0]); + counter.dec(); + } - removeWrapper.appendChild(actionVisual); - removeWrapper.appendChild(deleteLink); - item.appendChild(removeWrapper); + }); - var textWrapper = document.createElement('div'); - textWrapper.className = 'todo-item_text-w'; + var itemsLeft = document.getElementsByClassName('js-todos-actions-bar_counter')[0]; + var counter = new TodoActionsBarCounter(itemsLeft); + counter.set(0); - var text = document.createElement('div'); - text.className = 'todo-item_text'; - text.contentEditable = true; - text.appendChild(document.createTextNode(data.text || '')); - textWrapper.appendChild(text); - item.appendChild(textWrapper); + clearCompleted.addEventListener('click', function (e) { + e.preventDefault(); - return { - root: item, - deleteLink: deleteLink, - completeLink: inputCheckboxWrapper - }; + var items = document.getElementsByClassName('todo-item __ready'); + var size = items.length; + for (var i = 0; i < size; i++) { + items[0].parentNode.removeChild(items[0]); + } + + }); + + addButton.addEventListener('click', processingInput); + function processingInput() { + var text = input.value.trim(); + if (text.length !== 0) { + input.value = ''; + addItem(text); + } } - }; -}); + function addItem(text) { + + counter.inc(); + + var templateResult = templates.item({ + text: text + }); + + list.appendChild(templateResult.root); + + templateResult.deleteLink.addEventListener( + 'click', + function (e) { + counter.dec(); + e.preventDefault(); + var item = templateResult.root; + item.parentNode.removeChild(item); + } + ); + + templateResult.completeLink.addEventListener( + 'click', + function (e) { + var item = this.closest('.todo-item'); + + if (item.className === 'todo-item') { + item.classList.add("__ready"); + } else { + item.classList.remove("__ready"); + } + } + ); + } + + var templates = { + item: function (data) { + var item = document.createElement('div'); + item.className = 'todo-item'; + + var inputCheckboxWrapper = document.createElement('div'); + inputCheckboxWrapper.className = 'input-checkbox todo-item_ready-checker'; + + var checkbox = document.createElement('input'); + checkbox.type = "checkbox"; + checkbox.className = "input-checkbox_target"; + + var checkboxVisual = document.createElement('div'); + checkboxVisual.className = 'input-checkbox_visual'; + + inputCheckboxWrapper.appendChild(checkbox); + inputCheckboxWrapper.appendChild(checkboxVisual); + item.appendChild(inputCheckboxWrapper); + + var removeWrapper = document.createElement('div'); + removeWrapper.className = 'action todo-item_remove-action'; + + var actionVisual = document.createElement('div'); + actionVisual.className = 'action_visual'; + + var deleteLink = document.createElement('button'); + deleteLink.className = 'action_target js-todo-item_remove-action'; + + removeWrapper.appendChild(actionVisual); + removeWrapper.appendChild(deleteLink); + item.appendChild(removeWrapper); + + var textWrapper = document.createElement('div'); + textWrapper.className = 'todo-item_text-w'; + + var text = document.createElement('div'); + text.className = 'todo-item_text'; + text.contentEditable = true; + text.appendChild(document.createTextNode(data.text || '')); + + textWrapper.appendChild(text); + item.appendChild(textWrapper); + + return { + root: item, + deleteLink: deleteLink, + completeLink: inputCheckboxWrapper + }; + } + }; + } +); diff --git a/public/dist/scripts/main.js b/public/dist/scripts/main.js deleted file mode 100644 index 5d150ce..0000000 --- a/public/dist/scripts/main.js +++ /dev/null @@ -1,3 +0,0 @@ -/** - * Created by olerom on 06.06.17. - */ diff --git a/public/index.html b/public/index.html index c128154..efdc497 100644 --- a/public/index.html +++ b/public/index.html @@ -6,7 +6,8 @@ - + +
@@ -17,45 +18,45 @@

todos

- +
-
-
-
-
- -
-
+
+ + + + + + + -
-
- -
+ + + + -
-
HTML
-
+ + + -
+
-
3 items left
- -
+
-
HTML
+
@@ -49,7 +49,7 @@

todos

-
+
diff --git a/src/styles/project/todo-list/todo-item.scss b/src/styles/project/todo-list/todo-item.scss index a6c15c2..9fd9d3a 100644 --- a/src/styles/project/todo-list/todo-item.scss +++ b/src/styles/project/todo-list/todo-item.scss @@ -42,6 +42,9 @@ .todo-item.__ready .todo-item_text { text-decoration: line-through; color: $c-completed-text; + + + transition: top 1s ease-out 0.5s; } diff --git a/src/styles/project/todos-add/todos-add.scss b/src/styles/project/todos-add/todos-add.scss index 1abc564..4f3667e 100644 --- a/src/styles/project/todos-add/todos-add.scss +++ b/src/styles/project/todos-add/todos-add.scss @@ -24,8 +24,10 @@ $todos-add-height: 64px; margin-top: -6px; } - .todo-add_select-all-action .action_visual .__hide { - display: none; + .__hide .todo-add_select-all-action .action_visual { + visibility: hidden; + + transition: top 1s ease-out 0.5s; } .todo-add_select-all-action .action_visual:before,