diff --git a/public/dist/scripts/Main.js b/public/dist/scripts/Main.js new file mode 100644 index 0000000..8bb4fd5 --- /dev/null +++ b/public/dist/scripts/Main.js @@ -0,0 +1,57 @@ +(function () { + + let TodoMain = TODO_APP.components.TodoMain; + let AddTodos = TODO_APP.components.AddTodos; + let TodoList = TODO_APP.components.TodoList; + let TodoActionsBar = TODO_APP.components.TodoActionsBar; + + function init() { + + let todoMain = new TodoMain(); + let addTodos = new AddTodos(); + let todoList = new TodoList(); + let todoActionsBar = new TodoActionsBar(); + + + addTodos + .on('newTodo', + function (todoData) { + todoList.createItem(todoData); + } + ) + .on('markAsReadyAll', + function () { + todoList.markAsReadyAll(); + } + ); + + function itemsCountWatcher() { + let itemsCount = todoList.getItemsCount(); + + if (itemsCount !== 0) { + todoMain.showFullInterface(); + } else { + todoMain.hideFullInterface(); + } + + todoActionsBar.setItemsCount(itemsCount); + } + + todoList.on('itemAdd', itemsCountWatcher) + .on('itemDelete', itemsCountWatcher); + + todoActionsBar.on( + 'clearCompleted', + function () { + todoList.removeCompletedItems(); + } + ); + + todoActionsBar.on('filterSelected', function (filterId) { + todoList.setFilter(filterId); + }); + + } + + document.addEventListener('DOMContentLoaded', init); +}()); \ No newline at end of file diff --git a/public/dist/scripts/TODO_APP.js b/public/dist/scripts/TODO_APP.js new file mode 100644 index 0000000..1a5abe5 --- /dev/null +++ b/public/dist/scripts/TODO_APP.js @@ -0,0 +1,7 @@ +(function () { + window.TODO_APP = { + utils: {}, + modules: {}, + components: {} + }; +}()); \ No newline at end of file diff --git a/public/dist/scripts/components/AddTodos.js b/public/dist/scripts/components/AddTodos.js new file mode 100644 index 0000000..7a4abc8 --- /dev/null +++ b/public/dist/scripts/components/AddTodos.js @@ -0,0 +1,58 @@ +(function () { + let extendConstructor = TODO_APP.utils.extendConstructor; + let Eventable = TODO_APP.modules.Eventable; + + const ENTER_KEY_CODE = 13; + + const TODOS_TODO_INPUT_SELECTOR = '.js-todos-todo-input'; + const TODOS_SELECT_ALL_SELECTOR = '.js-todos-select-all'; + + /** + * @implements {EventListener} + * @extends {Eventable} + * @constructor + */ + function AddTodosConstructor() { + this._todoInput = document.querySelector(TODOS_TODO_INPUT_SELECTOR); + this._todoSelectAll = document.querySelector(TODOS_SELECT_ALL_SELECTOR); + + this._todoInput.addEventListener('keypress', this); + this._todoSelectAll.addEventListener('click', this); + + this._initEventable(); + } + + extendConstructor(AddTodosConstructor, Eventable); + + + AddTodosConstructor.prototype._markAsReadyAll = function () { + return this.trigger('markAsReadyAll'); + }; + + AddTodosConstructor.prototype._addItem = function () { + let todoInputValue = this._todoInput.value.trim(); + + if (todoInputValue.length !== 0) { + this._todoInput.value = ''; + } + + return this.trigger('newTodo', { + text: todoInputValue + }); + }; + + AddTodosConstructor.prototype.handleEvent = function (e) { + switch (e.type) { + case 'click': + this._markAsReadyAll(); + break; + case 'keypress': + if (e.keyCode === ENTER_KEY_CODE) { + this._addItem(); + } + break; + } + }; + + TODO_APP.components.AddTodos = AddTodosConstructor; +}()); \ No newline at end of file diff --git a/public/dist/scripts/components/Filter.js b/public/dist/scripts/components/Filter.js new file mode 100644 index 0000000..cd70df7 --- /dev/null +++ b/public/dist/scripts/components/Filter.js @@ -0,0 +1,54 @@ +(function () { + let Eventable = TODO_APP.modules.Eventable; + let extendConstructor = TODO_APP.utils.extendConstructor; + + const ACTIVE_FILTER_MODIFICATOR = '__active'; + + /** + * @param {HTMLElement} domRoot + * @constructor + * @implements {EventListener} + */ + function FilterConstructor(domRoot) { + this._initEventable(); + + let filters = this._filters = domRoot.querySelectorAll('.filter'); + this._currentActive = null; + + for (let i = filters.length; i--;) { + filters[i].addEventListener('click', this); + if (filters[i].classList.contains(ACTIVE_FILTER_MODIFICATOR)) { + this._currentActive = filters[i]; + } + } + } + + extendConstructor(FilterConstructor, Eventable); + + let filterConstructorPrototype = FilterConstructor.prototype; + + /** + * @param {HTMLElement} filterElement + * @return {FilterConstructor} + * @private + */ + filterConstructorPrototype._setFilter = function (filterElement) { + if (this._currentActive !== filterElement) { + this._currentActive.classList.remove(ACTIVE_FILTER_MODIFICATOR); + filterElement.classList.add(ACTIVE_FILTER_MODIFICATOR); + this._currentActive = filterElement; + this.trigger('filterSelected', filterElement.getAttribute('data-filter')); + } + return this; + }; + + filterConstructorPrototype.handleEvent = function (e) { + switch (e.type) { + case 'click': + this._setFilter(e.target); + break; + } + }; + + TODO_APP.components.Filter = FilterConstructor; +}()); \ No newline at end of file diff --git a/public/dist/scripts/components/TodoActionsBar.js b/public/dist/scripts/components/TodoActionsBar.js new file mode 100644 index 0000000..a0acaf7 --- /dev/null +++ b/public/dist/scripts/components/TodoActionsBar.js @@ -0,0 +1,63 @@ +(function () { + let extendConstructor = TODO_APP.utils.extendConstructor; + let getTextNode = TODO_APP.utils.getTextNode; + let Eventable = TODO_APP.modules.Eventable; + let Filter = TODO_APP.components.Filter; + + /** + * @constructor + * @implements {EventListener} + */ + function TodoActionsBarConstructor() { + this._initEventable(); + + this._counterNode = document.querySelector('.js-todos-actions-bar_counter'); + this._counterNodeText = getTextNode(this._counterNode); + this._clearCompletedNode = document.querySelector('.js-todos-actions-bar_clear-completed'); + + this._clearCompletedNode.addEventListener('click', this); + + this._filters = new Filter(document.querySelector('.js-todos-actions-bar_filter')); + + this._filters.on('filterSelected', this._onFilterSelected, this); + } + + extendConstructor(TodoActionsBarConstructor, Eventable); + + let todoActionsBarConstructorPrototype = TodoActionsBarConstructor.prototype; + + todoActionsBarConstructorPrototype._onFilterSelected = function (filterId) { + this.trigger('filterSelected', filterId); + }; + + /** + * @return {TodoActionsBarConstructor} + * @private + */ + todoActionsBarConstructorPrototype._clearCompleted = function () { + this.trigger('clearCompleted'); + return this; + }; + + /** + * @param {Number} count + * @return {TodoActionsBarConstructor} + */ + todoActionsBarConstructorPrototype.setItemsCount = function (count) { + this._counterNodeText.nodeValue = count + ' item' + (count === 0 ? '' : 's') + ' left'; + return this; + }; + + /** + * @param {Event} e + */ + todoActionsBarConstructorPrototype.handleEvent = function (e) { + switch (e.type) { + case 'click': + this._clearCompleted(); + break; + } + }; + + TODO_APP.components.TodoActionsBar = TodoActionsBarConstructor; +}()); \ No newline at end of file diff --git a/public/dist/scripts/components/TodoItem.js b/public/dist/scripts/components/TodoItem.js new file mode 100644 index 0000000..22040ab --- /dev/null +++ b/public/dist/scripts/components/TodoItem.js @@ -0,0 +1,141 @@ +(function () { + let Eventable = TODO_APP.modules.Eventable; + let extendConstructor = TODO_APP.utils.extendConstructor; + + let templatesEngine = TODO_APP.modules.templatesEngine; + + const READY_MODIFICATOR = '__ready'; + const HIDDEN_MODIFICATOR = '__hide'; + + /** + * @param itemData + * @implements {EventListener} + * @constructor + */ + function TodoItemConstructor(itemData) { + this._initEventable(); + + let templateResult = templatesEngine.todoItem({ + text: itemData.text + }); + + this._root = templateResult.root; + this._markReady = templateResult.markReady; + this._removeAction = templateResult.removeAction; + this._text = templateResult.text; + + this.model = { + id: itemData.id, + isReady: itemData.isReady || false, + text: itemData.text + }; + + if (itemData.isReady) { + this._setReadyModificator(true); + } + + this._markReady.addEventListener('change', this); + this._removeAction.addEventListener('click', this); + this._text.addEventListener('input', this); + } + + extendConstructor(TodoItemConstructor, Eventable); + + let todoItemConstructorPrototype = TodoItemConstructor.prototype; + + /** + * @param {HTMLElement} parent + * @return {TodoItemConstructor} + */ + todoItemConstructorPrototype.render = function (parent) { + parent.appendChild(this._root); + return this; + }; + + /** + * @param {Event} e + */ + todoItemConstructorPrototype.handleEvent = function (e) { + switch (e.type) { + case 'change': + this.setReady(this._markReady.checked); + break; + case 'click': + if (e.target === this._removeAction) { + this.remove(); + } + break; + case 'input': + this.setText(this._text.innerText); + break; + } + }; + + /** + * @param {String} text + * @return {TodoItemConstructor} + */ + todoItemConstructorPrototype.setText = function (text) { + if (this.model.text !== text) { + this._text.innerHTML = text; + this.model.text = text; + this.trigger('change', this.model); + } + return this; + }; + + /** + * @param {Boolean} isReady + * @return {TodoItemConstructor} + * @private + */ + todoItemConstructorPrototype._setReadyModificator = function (isReady) { + if (isReady) { + this._root.classList.add(READY_MODIFICATOR); + } else { + this._root.classList.remove(READY_MODIFICATOR); + } + return this; + }; + + /** + * @param {Boolean} isReady + * @return {TodoItemConstructor} + */ + todoItemConstructorPrototype.setReady = function (isReady) { + if (isReady !== this.model.isReady) { + this._markReady.checked = isReady; + this.model.isReady = isReady; + this._setReadyModificator(isReady); + this.trigger('change', this.model); + } + return this; + }; + + /** + * @return {TodoItemConstructor} + */ + todoItemConstructorPrototype.remove = function () { + this._root.parentNode.removeChild(this._root); + this.trigger('remove', this.model.id); + return this; + }; + + /** + * @return {TodoItemConstructor} + */ + todoItemConstructorPrototype.show = function () { + this._root.classList.remove(HIDDEN_MODIFICATOR); + return this; + }; + + /** + * @return {TodoItemConstructor} + */ + todoItemConstructorPrototype.hide = function () { + this._root.classList.add(HIDDEN_MODIFICATOR); + return this; + }; + + TODO_APP.components.TodoItem = TodoItemConstructor; +}()); \ No newline at end of file diff --git a/public/dist/scripts/components/TodoList.js b/public/dist/scripts/components/TodoList.js new file mode 100644 index 0000000..9ad806b --- /dev/null +++ b/public/dist/scripts/components/TodoList.js @@ -0,0 +1,158 @@ +(function () { + let Eventable = TODO_APP.modules.Eventable; + let extendConstructor = TODO_APP.utils.extendConstructor; + + let TodoItem = TODO_APP.components.TodoItem; + + const TODO_LIST_SELECTOR = '.js-todos-list'; + let itemsIdIterator = 0; + + /** + * @extends {Eventable} + * @constructor + */ + function TodoListConstructor() { + /** + * @type {Array.} + * @private + */ + this._items = []; + this._todosList = document.querySelector(TODO_LIST_SELECTOR); + this._currentFilter = 'all'; + + this._initEventable(); + } + + extendConstructor(TodoListConstructor, Eventable); + + /** + * @return {Number} + */ + TodoListConstructor.prototype.getItemsCount = function () { + return this._items.length; + }; + + /** + * @param {Object} todoItemData + * @return {TodoListConstructor} + */ + TodoListConstructor.prototype.createItem = function (todoItemData) { + var item = new TodoItem(Object.assign( + { + id: itemsIdIterator++, + }, + todoItemData + )); + + this._items.push(item); + + item.on('change', this._onItemChange, this) + .on('remove', this._onItemRemove, this) + .render(this._todosList); + + this.trigger('itemAdd', item); + + return this; + }; + + /** + * @return {TodoListConstructor} + */ + TodoListConstructor.prototype.removeCompletedItems = function () { + var items = this._items; + var i = items.length; + + for (; i--;) { + if (items[i].model.isReady) { + items[i].remove(); + } + } + + return this; + }; + + /** + * @param {Number} itemId + * @return {TodoItem|null} + * @private + */ + TodoListConstructor.prototype._getItemById = function (itemId) { + var items = this._items; + + for (var i = items.length; i--;) { + if (items[i].model.id === itemId) { + return items[i]; + } + } + + return null; + }; + + TodoListConstructor.prototype._onItemChange = function (itemModel) { + this.filterShowedItems(this._currentFilter); + }; + + TodoListConstructor.prototype._onItemRemove = function (itemId) { + var todoItemComponent = this._getItemById(itemId); + + if (todoItemComponent) { + todoItemComponent.off('change', this._onItemChange, this); + todoItemComponent.off('remove', this._onItemRemove, this); + var todoItemComponentIndex = this._items.indexOf(todoItemComponent); + this._items.splice(todoItemComponentIndex, 1); + this.trigger('itemDelete', todoItemComponent.model); + } + + return this; + }; + + /** + * @return {TodoListConstructor} + */ + TodoListConstructor.prototype.markAsReadyAll = function () { + this._items.forEach(function (todoItem) { + todoItem.setReady(true); + }); + return this; + }; + + /** + * @param {String} filterId + * @return {TodoListConstructor} + */ + TodoListConstructor.prototype.setFilter = function (filterId) { + this._currentFilter = filterId; + return this.filterShowedItems(filterId); + }; + + /** + * @param {String} filterId + * @return {TodoListConstructor} + */ + TodoListConstructor.prototype.filterShowedItems = function (filterId) { + this._items.forEach(function (item) { + switch (filterId) { + case 'all': + item.show(); + break; + case 'completed': + if (item.model.isReady) { + item.show(); + } else { + item.hide(); + } + break; + case 'active': + if (!item.model.isReady) { + item.show(); + } else { + item.hide(); + } + break; + } + }); + return this; + }; + + TODO_APP.components.TodoList = TodoListConstructor; +}()); \ No newline at end of file diff --git a/public/dist/scripts/components/TodoMain.js b/public/dist/scripts/components/TodoMain.js new file mode 100644 index 0000000..ba74e54 --- /dev/null +++ b/public/dist/scripts/components/TodoMain.js @@ -0,0 +1,30 @@ +(function () { + + const TODOS_MAIN_SELECTOR = '.js-todos-main'; + const FULL_INTERFACE_MODIFICATOR = '__hide'; + + /** + * @constructor + */ + function TodoMain() { + this._todosMain = document.querySelector(TODOS_MAIN_SELECTOR); + } + + /** + * @returns {TodoMain} + */ + TodoMain.prototype.showFullInterface = function () { + this._todosMain.classList.remove(FULL_INTERFACE_MODIFICATOR); + return this; + }; + + /** + * @returns {TodoMain} + */ + TodoMain.prototype.hideFullInterface = function () { + this._todosMain.classList.add(FULL_INTERFACE_MODIFICATOR); + return this; + }; + + TODO_APP.components.TodoMain = TodoMain; +}()); \ No newline at end of file diff --git a/public/dist/scripts/modules/Eventable.js b/public/dist/scripts/modules/Eventable.js new file mode 100644 index 0000000..e894c4c --- /dev/null +++ b/public/dist/scripts/modules/Eventable.js @@ -0,0 +1,71 @@ +(function () { + + /** + * @constructor + */ + function EventableConstructor() { + } + + let eventablePrototype = EventableConstructor.prototype; + + eventablePrototype._initEventable = function () { + this._eventable_registry = {}; + }; + + function getEventSubscribers(eventable, eventName, needCreate) { + let registry = eventable._eventable_registry; + + if (eventName in registry) { + return registry[eventName]; + + } else if (needCreate) { + return registry[eventName] = []; + } + + return null; + } + + eventablePrototype.on = function (eventName, handler, ctx) { + let subscribers = getEventSubscribers(this, eventName, true); + + subscribers.push({ + handler: handler, + ctx: ctx + }); + + return this; + }; + + eventablePrototype.off = function (eventName, handler, ctx) { + let subscribers = getEventSubscribers(this, eventName); + + if (subscribers) { + for (let i = subscribers.length; i--;) { + if ((subscribers[i].handler === handler) + && (subscribers[i].ctx === ctx) + ) { + subscribers.splice(i, 1); + return this; + } + } + } + + return this; + }; + + eventablePrototype.trigger = function (eventName, data) { + let subscribers = getEventSubscribers(this, eventName); + + if (subscribers) { + let subscribersCopy = subscribers.slice(); + for (let i = 0, l = subscribersCopy.length; i !== l; i += 1) { + subscribersCopy[i].handler.call(subscribersCopy[i].ctx, data); + } + } + + return this; + }; + + TODO_APP.modules.Eventable = EventableConstructor; + +}()); \ No newline at end of file diff --git a/public/dist/scripts/modules/TemplatesEngine.js b/public/dist/scripts/modules/TemplatesEngine.js new file mode 100644 index 0000000..09cd316 --- /dev/null +++ b/public/dist/scripts/modules/TemplatesEngine.js @@ -0,0 +1,38 @@ +(function () { + + let div = document.createElement('div'); + + function getTemplateRootNode(scriptId) { + let scriptTag = document.getElementById(scriptId); + div.innerHTML = scriptTag.innerHTML; + let result = div.children[0]; + div.removeChild(result); + return result; + } + + TODO_APP.modules.templatesEngine = { + todoItem: function (data) { + let root = getTemplateRootNode('todoItemTemplate'); + + let markReady = root.querySelector('.js-todo-item_mark-ready'); + let removeAction = root.querySelector('.js-todo-item_remove-action'); + let text = root.querySelector('.js-todo-item_text'); + + if (data.text) { + text.innerText = data.text; + } + + if (data.isReady) { + markReady.checked = true; + } + + return { + root: root, + text: text, + markReady: markReady, + removeAction: removeAction + }; + } + } + +}()); \ No newline at end of file diff --git a/public/dist/scripts/util/ExtendConstructor.js b/public/dist/scripts/util/ExtendConstructor.js new file mode 100644 index 0000000..288e866 --- /dev/null +++ b/public/dist/scripts/util/ExtendConstructor.js @@ -0,0 +1,19 @@ +(function () { + /** + * @param {Function} Extendable + * @param {Function} Extension + * @return {Function} Extendable + */ + function extendConstructor(Extendable, Extension) { + let extendablePrototype = Extendable.prototype; + let extensionPrototype = Extension.prototype; + + for (let p in extensionPrototype) { + extendablePrototype[p] = extensionPrototype[p]; + } + + return Extendable; + } + + TODO_APP.utils.extendConstructor = extendConstructor; +}()); \ No newline at end of file diff --git a/public/dist/scripts/util/getTextNode.js b/public/dist/scripts/util/getTextNode.js new file mode 100644 index 0000000..eff4a66 --- /dev/null +++ b/public/dist/scripts/util/getTextNode.js @@ -0,0 +1,23 @@ +(function () { + /** + * @param {HTMLElement} node + * @return {Node} + */ + function getTextNode(node) { + let children = node.childNodes; + + let l = children.length; + + for (let i = 0; i !== l; i += 1) { + if (children[i].nodeName === '#text') { + return children[i]; + } + } + + let result = document.createTextNode(''); + node.appendChild(result); + return result; + } + + TODO_APP.utils.getTextNode = getTextNode; +}()); \ No newline at end of file diff --git a/public/dist/styles/default.css b/public/dist/styles/default.css index af69d12..61134ec 100644 --- a/public/dist/styles/default.css +++ b/public/dist/styles/default.css @@ -88,6 +88,11 @@ margin-top: -6px; } +.__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, .todo-add_select-all-action .action_visual:after { content: ''; @@ -142,6 +147,10 @@ padding: 12px; } +.todo-item.__hide { + display: none; +} + .todo-item:hover { background-color: #fafafa; } @@ -172,6 +181,7 @@ .todo-item.__ready .todo-item_text { text-decoration: line-through; color: #cfcfcf; + transition: top 1s ease-out 0.5s; } .todo-item_ready-checker { diff --git a/public/dist/styles/default.css.map b/public/dist/styles/default.css.map index f625a4b..14ee7b6 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 .__hide .todo-add_select-all-action .action_visual {\n visibility: hidden;\n\n transition: top 1s ease-out 0.5s;\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 transition: top 1s ease-out 0.5s;\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..0cec68d 100644 --- a/public/index.html +++ b/public/index.html @@ -5,89 +5,77 @@ Todos - - -
-

todos

-
-
-
-
-
- -
+ -
- -
-
+ + + + -
+ + + + + + + + + + + + + + +
+

todos

+
+
-
-
- -
+
+
+
+ +
-
-
CSS
-
+
+
-
-
- -
-
+
-
-
- -
+
-
-
JS tools
-
-
-
3 items left +
0 item left
- -
+