<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/linuxenko/pen/ONwxeB" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto'>
<style class="cp-pen-styles">body, html, .application {
height: 100%;
width: 100%;
font-family: Roboto;
font-size: 12px;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
cursor: default;
}
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.application {
background-color: #fff;
display: flex;
}
.mobile-wrapper {
position: relative;
display: flex;
margin: auto;
flex-direction: column;
width: 300px;
height: 480px;
overflow: hidden;
background: radial-gradient(#4a148c, #5617a2);
box-shadow: 1px 1px 5px #444;
}
.mobile-container {
height: 100%;
}
.mobile_nav {
position: absolute;
height: 20px;
line-height: 20px;
width: 96%;
left: 8px;
color: #fff;
font-size: 12px;
z-index: 10;
pointer-events: none;
}
.mobile_nav--dots {
display: inline-block;
}
.mobile_nav--dots > span {
display: block;
float: left;
background: #fff;
width: 5px;
height: 5px;
border-radius: 100%;
margin: 0px 1px;
}
.mobile_nav--left {
width: 100%;
position: absolute;
left: 0px;
top: 0px;
}
.mobile_nav--center {
width: 100%;
position: absolute;
left: 0px;
top: 0px;
font-weight: bold;
text-align: center;
}
.mobile_nav--right {
width: 100%;
position: absolute;
left: 0px;
top: 0px;
text-align: right;
}
.mobile-content {
height: 100%;
width: 100%;
position: relative;
}
.mobile-content .items_list {
height: 100%;
width: 100%;
position: absolute;
z-index: 5;
}
.mobile-content .items_list .slick-list, .mobile-content .items_list .slick-track {
height: 100%;
}
.mobile-content .items_list--screen-title {
position: absolute;
top: 40px;
color: #fff;
font-size: 14px;
width: 300px;
z-index: 8;
text-align: center;
}
.mobile-content .items_list--screen-title--desc {
padding: 0px 15px;
left: 0px;
position: absolute;
}
.mobile-content .items_list--screen-title--controls {
position: absolute;
right: 0px;
top: 0px;
padding: 0px 15px;
font-size: 18px;
cursor: pointer;
}
.mobile-content .items_list--screen-title--controls > * {
cursor: inherit;
}
.mobile-content .items_list--wrapper {
height: 100%;
}
.mobile-content .items_list--screen {
height: 100%;
margin-top: 100px;
width: 300px;
float: left;
background: #fff;
}
.mobile-content .items_list--tabs {
position: absolute;
width: 300px;
height: 30px;
top: 70px;
z-index: 7;
display: flex;
flex-direction: row;
}
.mobile-content .items_list--tab {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #fff;
font-size: 14px;
border-bottom: 3px solid #e91e63;
}
.mobile-content .items_list--tab small {
font-size: 12px;
}
.mobile-content .items_list--tab:not(.active) {
border-bottom: 3px solid #640a29;
color: #828282;
cursor: pointer;
}
.mobile-content .items_list--tab:not(.active) > * {
cursor: pointer;
}
.mobile-content .items_list--control {
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
width: 100%;
height: 100%;
color: #fff;
font-size: 14px;
cursor: pointer;
padding: 0px 10px;
}
.mobile-content .items_list--control > * {
cursor: pointer;
}
.mobile-content .items_list--control > i {
cursor: pointer;
margin-left: 4px;
margin-right: 10px;
font-size: 18px;
}
.mobile-content .items_list--control:last-child {
justify-content: flex-end;
}
.mobile-content {
height: 100%;
width: 100%;
position: relative;
}
.mobile-content .items_list--scroll {
height: 380px;
overflow: hidden;
}
.mobile-content .items_list h2 {
text-align: center;
margin-top: 180px;
color: #828282;
}
.mobile-content .items_list--item {
display: flex;
flex-direction: row;
width: 100%;
padding: 20px 0px;
align-items: center;
text-align: left;
position: relative;
}
.mobile-content .items_list--item:last-child .items_list--item--sp {
display: none;
}
.mobile-content .items_list--item.completed {
text-decoration: line-through;
}
.mobile-content .items_list--item.completed .items_list--item--title {
color: #828282;
font-style: italic;
}
.mobile-content .items_list--item.completed .items_list--item--checkbox {
color: #1de9b6;
}
.mobile-content .items_list--item--checkbox {
width: 40px;
color: #e91e63;
text-align: center;
font-size: 18px;
padding: 5px 0px;
cursor: pointer;
}
.mobile-content .items_list--item--checkbox > i {
cursor: pointer;
}
.mobile-content .items_list--item--title {
color: inherit;
font-size: 16px;
color: #444;
cursor: text;
}
.mobile-content .items_list--item--sp {
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
}
.mobile-content .items_list--item--sp:after {
width: 100px;
position: absolute;
bottom: 0px;
width: 100%;
display: block;
content: ". . . . . . . . . .";
font-size: 12px;
letter-spacing: 3px;
text-align: center;
color: #e91e63;
}
.edit-todo--close-icon {
position: absolute;
left: 250px;
top: 430px;
z-index: 8;
height: 40px;
width: 40px;
line-height: 44px;
border-radius: 100%;
box-shadow: 0px 0px 2px #828282;
text-align: center;
cursor: pointer;
transition: all 0.1s linear;
display: block;
background: #e91e63;
color: #fff;
}
.edit-todo--close-icon i {
cursor: pointer;
font-size: 16px;
}
.edit-todo--close-icon:hover {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.edit-todo--close-icon:hover {
box-shadow: 2px 2px 5px #727272;
}
.edit-todo--wrapper {
position: absolute;
left: -1px;
top: 40%;
z-index: 8;
background: #4a148c;
height: 0px;
width: 0px;
transition: all 0.1s linear;
}
.edit-todo--layout {
top: 0px;
left: 0px;
height: 100%;
width: 100%;
transition: all 0.1s linear;
}
.edit-todo--content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
padding: 0px 10px;
}
.edit-todo--content > i {
color: #fff;
font-size: 54px;
}
.edit-todo--content h3 {
text-transform: uppercase;
color: #ddd;
}
.edit-todo--content span.button {
color: #fff;
background-color: #f50057;
text-align: center;
letter-spacing: 0.5px;
cursor: pointer;
text-transform: uppercase;
height: 36px;
line-height: 36px;
outline: 0;
padding: 0 2rem;
width: 100%;
border-radius: 2px;
transition: box-shadow 0.2s ease;
}
.edit-todo--content span.button > * {
cursor: pointer;
}
.edit-todo--content span.button i {
margin-left: 5px;
}
.edit-todo--content span.button:hover {
transition: box-shadow 0.2s ease;
box-shadow: 2px 2px 5px #727272;
}
.edit-todo--content input {
background-color: transparent;
border: none;
border-bottom: 1px solid pink;
border-radius: 0;
outline: none;
height: 3rem;
width: 100%;
font-size: 2rem;
padding: 0;
box-shadow: none;
box-sizing: content-box;
color: #fff;
cursor: text;
display: block;
margin: 70px 0px 30px 0px;
}
.edit-todo--content input::-webkit-input-placeholder {
color: #fff;
}
.edit-todo--content input:-moz-placeholder {
color: #fff;
}
.edit-todo--content input::-moz-placeholder {
color: #fff;
}
.edit-todo--content input:-ms-input-placeholder {
color: #fff;
}
.new-todo {
position: absolute;
left: 250px;
top: 430px;
z-index: 8;
height: 40px;
width: 40px;
line-height: 44px;
border-radius: 100%;
box-shadow: 0px 0px 2px #828282;
text-align: center;
cursor: pointer;
transition: all 0.1s linear;
background: #00c853;
}
.new-todo i {
cursor: pointer;
font-size: 16px;
}
.new-todo:hover {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.new-todo--icon {
color: #fff;
}
.layout-new-todo {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
border-radius: 0px;
cursor: default;
}
.layout-new-todo .new-todo--close-icon {
position: absolute;
left: 250px;
top: 430px;
z-index: 8;
height: 40px;
width: 40px;
line-height: 44px;
border-radius: 100%;
box-shadow: 0px 0px 2px #828282;
text-align: center;
cursor: pointer;
transition: all 0.1s linear;
display: block;
background: #e91e63;
color: #fff;
}
.layout-new-todo .new-todo--close-icon i {
cursor: pointer;
font-size: 16px;
}
.layout-new-todo .new-todo--close-icon:hover {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.layout-new-todo--wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
padding: 0px 10px;
}
.layout-new-todo--wrapper h3 {
text-transform: uppercase;
padding-bottom: 30px;
}
.layout-new-todo--wrapper span.button {
color: #fff;
background-color: #f50057;
text-align: center;
letter-spacing: 0.5px;
cursor: pointer;
text-transform: uppercase;
height: 36px;
line-height: 36px;
outline: 0;
padding: 0 2rem;
width: 100%;
border-radius: 2px;
transition: box-shadow 0.2s ease;
}
.layout-new-todo--wrapper span.button > * {
cursor: pointer;
}
.layout-new-todo--wrapper span.button i {
margin-left: 5px;
font-size: 14px;
}
.layout-new-todo--wrapper span.button:hover {
transition: box-shadow 0.2s ease;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.layout-new-todo--wrapper input {
background-color: transparent;
border: none;
color: #fff;
border-bottom: 1px solid pink;
border-radius: 0;
outline: none;
height: 3rem;
width: 100%;
font-size: 2rem;
padding: 0;
box-shadow: none;
box-sizing: content-box;
cursor: text;
margin: 70px 0px 30px 0px;
}
.layout-new-todo--wrapper input::-webkit-input-placeholder {
color: #fff;
}
.layout-new-todo--wrapper input:-moz-placeholder {
color: #fff;
}
.layout-new-todo--wrapper input::-moz-placeholder {
color: #fff;
}
.layout-new-todo--wrapper input:-ms-input-placeholder {
color: #fff;
}
.layout-new-todo--wrapper > i {
color: #fff;
font-size: 54px;
}
</style></head><body>
<div id="application" class="application"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.1/redux.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react-slick/0.12.0/react-slick.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js'></script>
<script >'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/* Home: https://github.com/c0ncept/todo-list-mobile */
var Actions = function () {
function Actions() {
_classCallCheck(this, Actions);
}
Actions.ADD_TODO = function ADD_TODO() {
var title = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];
var completed = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1];
return {
type: 'ADD_TODO',
payload: { title: title, completed: completed }
};
};
Actions.EDIT_TODO = function EDIT_TODO() {
var id = arguments.length <= 0 || arguments[0] === undefined ? null : arguments[0];
var title = arguments.length <= 1 || arguments[1] === undefined ? '' : arguments[1];
return {
type: 'EDIT_TODO',
payload: { id: id, title: title }
};
};
Actions.TOGGLE_TODO = function TOGGLE_TODO() {
var id = arguments.length <= 0 || arguments[0] === undefined ? null : arguments[0];
return {
type: 'TOGGLE_TODO',
payload: { id: id }
};
};
Actions.DELETE_TODO = function DELETE_TODO() {
var id = arguments.length <= 0 || arguments[0] === undefined ? null : arguments[0];
return {
type: 'DELETE_TODO',
payload: { id: id }
};
};
Actions.SELECT_ALL = function SELECT_ALL() {
var completed = arguments.length <= 0 || arguments[0] === undefined ? false : arguments[0];
return {
type: 'SELECT_ALL',
payload: { completed: completed }
};
};
Actions.CLEAR_COMPLETED = function CLEAR_COMPLETED() {
return {
type: 'CLEAR_COMPLETED',
payload: {}
};
};
return Actions;
}();
var initalState = [{
id: 8,
title: 'Bug fixes',
completed: false
}, {
id: 7,
title: 'Custom global controls',
completed: true
}, {
id: 6,
title: 'Editable item behavior',
completed: true
}, {
id: 5,
title: 'New item creation support',
completed: true
}, {
id: 4,
title: 'Scollable items layout',
completed: true
}, {
id: 3,
title: 'Conceptual tasks filters',
completed: true
}, {
id: 2,
title: 'Conceptual tasks navigation',
completed: true
}, {
id: 1,
title: 'Create conceptual mobile design',
completed: true
}];
var items = function items() {
var state = arguments.length <= 0 || arguments[0] === undefined ? initalState : arguments[0];
var action = arguments[1];
function lastId(state) {
return state.reduce(function (p, c) {
return c.id > p ? c.id : p;
}, 0);
}
if (action.type === 'SELECT_ALL') {
return state.map(function (s) {
s.completed = action.payload.completed;
return s;
});
}
if (action.type === 'CLEAR_COMPLETED') {
return state.filter(function (s) {
return s.completed === false;
});
}
if (action.type === 'ADD_TODO') {
var todo = action.payload;
todo.id = lastId(state) + 1;
return [todo].concat(state);
}
if (action.type === 'EDIT_TODO') {
return state.map(function (s) {
if (s.id === action.payload.id) {
s.title = action.payload.title;
}
return s;
});
}
if (action.type === 'TOGGLE_TODO') {
return state.map(function (s) {
if (s.id === action.payload.id) {
s.completed = !s.completed;
}
return s;
});
}
if (action.type === 'DELETE_TODO') {
return state.filter(function (s) {
return s.id !== action.payload.id;
});
}
return state;
};
var pad = function pad(n) {
return n < 10 ? '0' + n : n;
};
var store = Redux.createStore(items
//window.devToolsExtension ? window.devToolsExtension() : f => f,
//applyMiddleware(logger)
);
var NewTodoCls = function (_React$Component) {
_inherits(NewTodoCls, _React$Component);
function NewTodoCls() {
_classCallCheck(this, NewTodoCls);
var _this = _possibleConstructorReturn(this, _React$Component.call(this));
_this.state = {
mode: 'button'
};
return _this;
}
NewTodoCls.prototype.setLayout = function setLayout(layout) {
if (layout === this.state.mode) {
return;
}
this.setState({
mode: layout
});
};
NewTodoCls.prototype.createTodo = function createTodo() {
var title = document.getElementById('new-todo-title').value;
if (title.length > 0) {
this.props.dispatch(Actions.ADD_TODO(title));
this.setLayout('button');
}
};
NewTodoCls.prototype.render = function render() {
return React.createElement(
'div',
{ className: this.state.mode === 'button' ? 'new-todo' : 'new-todo layout-new-todo',
onClick: this.setLayout.bind(this, 'layout') },
this.state.mode === 'button' ? React.createElement(
'span',
{ className: 'new-todo--icon' },
React.createElement('i', { className: 'fa fa-plus', 'aria-hidden': 'true' })
) : React.createElement(
'div',
{ className: 'layout-new-todo--wrapper' },
React.createElement('i', { className: 'fa fa-file', 'aria-hidden': 'true' }),
React.createElement('input', { id: 'new-todo-title', type: 'text', placeholder: 'New todo...' }),
React.createElement(
'span',
{ className: 'button', onClick: this.createTodo.bind(this) },
'Create Todo ',
React.createElement('i', { className: 'fa fa-file-o', 'aria-hidden': 'true' })
),
React.createElement(
'span',
{ className: 'new-todo--close-icon', onClick: this.setLayout.bind(this, 'button') },
React.createElement('i', { className: 'fa fa-times', 'aria-hidden': 'true' })
)
)
);
};
return NewTodoCls;
}(React.Component);
var NewTodo = ReactRedux.connect(function (state) {
return { state: state };
})(NewTodoCls);
var EditTodoCls = function (_React$Component2) {
_inherits(EditTodoCls, _React$Component2);
function EditTodoCls() {
_classCallCheck(this, EditTodoCls);
return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));
}
EditTodoCls.prototype.clearEditable = function clearEditable() {
this.props.setEditable(null);
};
EditTodoCls.prototype.removeTodo = function removeTodo() {
this.props.dispatch(Actions.DELETE_TODO(this.props.todo.id));
this.clearEditable();
};
EditTodoCls.prototype.saveTodo = function saveTodo() {
var title = document.getElementById('edit-todo-title').value;
if (title.length > 0) {
this.props.dispatch(Actions.EDIT_TODO(this.props.todo.id, title));
this.clearEditable();
}
};
EditTodoCls.prototype.render = function render() {
var layoutClass = this.props.todo === null ? 'edit-todo--wrapper' : 'edit-todo--wrapper edit-todo--layout';
return React.createElement(
'div',
{ className: layoutClass },
this.props.todo === null ? '' : React.createElement(
'div',
{ className: 'edit-todo--content' },
React.createElement('i', { className: 'fa fa-pencil-square-o', 'aria-hidden': 'true' }),
React.createElement('input', { id: 'edit-todo-title', type: 'text', placeholder: 'Edit todo...', defaultValue: this.props.todo.title }),
React.createElement(
'span',
{ className: 'button', onClick: this.saveTodo.bind(this) },
'Save Todo ',
React.createElement('i', { className: 'fa fa-floppy-o', 'aria-hidden': 'true' })
),
React.createElement('br', null),
React.createElement(
'span',
{ className: 'button', onClick: this.removeTodo.bind(this) },
'Remove Todo ',
React.createElement('i', { className: 'fa fa-times', 'aria-hidden': 'true' })
),
React.createElement(
'span',
{ className: 'edit-todo--close-icon', onClick: this.clearEditable.bind(this) },
React.createElement('i', { className: 'fa fa-times', 'aria-hidden': 'true' })
)
)
);
};
return EditTodoCls;
}(React.Component);
var EditTodo = ReactRedux.connect(function (state) {
return { state: state };
})(EditTodoCls);
var interval = null;
var MobileNav = function (_React$Component3) {
_inherits(MobileNav, _React$Component3);
function MobileNav() {
_classCallCheck(this, MobileNav);
var _this3 = _possibleConstructorReturn(this, _React$Component3.call(this));
_this3.state = { date: '00:00' };
return _this3;
}
MobileNav.prototype.updateTime = function updateTime() {
var date = new Date();
var hour = pad(date.getHours());
var min = pad(date.getMinutes());
var delim = date.getSeconds() % 2 === 0 ? ' ' : ':';
this.setState({
date: '' + hour + delim + min
});
};
MobileNav.prototype.componentDidMount = function componentDidMount() {
clearInterval(interval);
this.updateTime();
interval = setInterval(this.updateTime.bind(this), 1000);
};
MobileNav.prototype.render = function render() {
return React.createElement(
'div',
{ className: 'mobile_nav' },
React.createElement(
'div',
{ className: 'mobile_nav--left' },
React.createElement(
'span',
{ className: 'mobile_nav--dots' },
React.createElement('span', null),
React.createElement('span', null),
React.createElement('span', null),
React.createElement('span', null),
React.createElement('span', null),
React.createElement('span', null)
)
),
React.createElement(
'div',
{ className: 'mobile_nav--center' },
this.state.date
),
React.createElement(
'div',
{ className: 'mobile_nav--right' },
React.createElement(
'small',
null,
'80%'
),
' ',
React.createElement('i', { className: 'fa fa-battery-three-quarters', 'aria-hidden': 'true' })
)
);
};
return MobileNav;
}(React.Component);
var ItemsListCls = function (_React$Component4) {
_inherits(ItemsListCls, _React$Component4);
function ItemsListCls() {
_classCallCheck(this, ItemsListCls);
var _this4 = _possibleConstructorReturn(this, _React$Component4.call(this));
_this4.scrollOptions = {
mouseWheel: true,
scrollbars: false,
scrollX: false,
disableMouse: true,
useTransition: false,
HWCompositing: false,
useTransform: true,
scrollY: true
};
_this4.settings = {
dots: true,
infinite: false,
arrows: false,
speed: 200,
slidesToShow: 1,
slidesToScroll: 1,
swipe: true,
touchThreshold: 3000,
className: 'items_list--wrapper',
initialSlide: 0,
afterChange: _this4.afterChange.bind(_this4)
};
_this4.state = {
currentSlide: 0,
editable: null,
showControls: false,
selectedAll: false
};
return _this4;
}
ItemsListCls.prototype.slideTo = function slideTo(n) {
if (this.state.currentSlide === n) {
return;
}
this.setState({
currentSlide: n
});
};
ItemsListCls.prototype.afterChange = function afterChange(n) {
[].slice.call(document.querySelectorAll('.items_list--tab')).map(function (t) {
return t.classList.remove('active');
});
var tab = document.querySelector('.items_list--tab:nth-child(' + (n + 1) + ')');
if (tab) {
tab.classList.add('active');
}
this.lastSelectedTab = n;
};
ItemsListCls.prototype.setEditable = function setEditable(i) {
this.setState({
editable: i
});
};
ItemsListCls.prototype.selectAll = function selectAll(completed) {
this.props.dispatch(Actions.SELECT_ALL(completed));
this.setState({ selectedAll: completed });
};
ItemsListCls.prototype.clearCompleted = function clearCompleted() {
this.props.dispatch(Actions.CLEAR_COMPLETED());
};
ItemsListCls.prototype.toggleTodo = function toggleTodo(id) {
this.props.dispatch(Actions.TOGGLE_TODO(id));
};
ItemsListCls.prototype.showControls = function showControls() {
var _this5 = this;
this.setState({
showControls: !this.state.showControls
});
setTimeout(function () {
if (_this5.lastSelectedTab && !_this5.state.showControls) {
_this5.afterChange(_this5.lastSelectedTab);
}
}, 60);
};
ItemsListCls.prototype.compileItem = function compileItem(i, n) {
var itemCls = 'items_list--item';
itemCls += i.completed === true ? ' completed' : '';
return React.createElement(
'div',
{ key: i.title + n, className: itemCls },
React.createElement(
'div',
{ className: 'items_list--item--checkbox', onClick: this.toggleTodo.bind(this, i.id) },
i.completed === true ? React.createElement('i', { className: 'fa fa-check-square-o', 'aria-hidden': 'true' }) : React.createElement('i', { className: 'fa fa-square-o', 'aria-hidden': 'true' })
),
React.createElement(
'div',
{ className: 'items_list--item--title', onClick: this.setEditable.bind(this, i) },
i.title
),
React.createElement('div', { className: 'items_list--item--sp' })
);
};
ItemsListCls.prototype.componentDidMount = function componentDidMount() {
var allItems = document.getElementById('items-all');
var completeItems = document.getElementById('items-complete');
var incompleteItems = document.getElementById('items-incomplete');
this.scrolls = [new IScroll(allItems, this.scrollOptions), new IScroll(completeItems, this.scrollOptions), new IScroll(incompleteItems, this.scrollOptions)];
};
ItemsListCls.prototype.componentDidUpdate = function componentDidUpdate() {
if (this.scrolls) {
this.scrolls.map(function (s) {
return s.refresh();
});
}
};
ItemsListCls.prototype.render = function render() {
var compileItem = this.compileItem.bind(this);
var items = {
all: this.props.state.map(compileItem),
complete: this.props.state.filter(function (i) {
return i.completed === true;
}).map(compileItem),
incomplete: this.props.state.filter(function (i) {
return i.completed === false;
}).map(compileItem)
};
if (items.complete.length < 1) {
items.complete = React.createElement(
'h2',
null,
'No Complete Tasks'
);
}
if (items.incomplete.length < 1) {
items.incomplete = React.createElement(
'h2',
null,
'No Icomplete Tasks'
);
}
if (items.all.length < 1) {
items.all = React.createElement(
'h2',
null,
'No Tasks'
);
}
return React.createElement(
'div',
{ className: 'items_list' },
React.createElement(
'div',
{ className: 'items_list--screen-title' },
React.createElement(
'span',
{ className: 'items_list--screen-title--desc' },
React.createElement(
'small',
null,
items.incomplete.length || 0,
' item left'
)
),
'Todo List',
React.createElement(
'div',
{ className: 'items_list--screen-title--controls', onClick: this.showControls.bind(this) },
React.createElement('i', { className: 'fa fa-ellipsis-v', 'aria-hidden': 'true' })
)
),
this.state.showControls === true ? React.createElement(
'div',
{ className: 'items_list--tabs' },
this.state.selectedAll === true ? React.createElement(
'div',
{ className: 'items_list--control', onClick: this.selectAll.bind(this, false) },
React.createElement('i', { className: 'fa fa-check-square-o', 'aria-hidden': 'true' }),
'Uncomplete all'
) : React.createElement(
'div',
{ className: 'items_list--control', onClick: this.selectAll.bind(this, true) },
React.createElement('i', { className: 'fa fa-square-o', 'aria-hidden': 'true' }),
'Complete all'
),
React.createElement(
'div',
{ className: 'items_list--control', onClick: this.clearCompleted.bind(this) },
'Clear completed'
)
) : React.createElement(
'div',
{ className: 'items_list--tabs' },
React.createElement(
'div',
{ className: 'items_list--tab active', onClick: this.slideTo.bind(this, 0) },
React.createElement(
'small',
null,
'All'
)
),
React.createElement(
'div',
{ className: 'items_list--tab', onClick: this.slideTo.bind(this, 1) },
React.createElement(
'small',
null,
'Active'
)
),
React.createElement(
'div',
{ className: 'items_list--tab', onClick: this.slideTo.bind(this, 2) },
React.createElement(
'small',
null,
'Completed'
)
)
),
React.createElement(
Slider,
_extends({}, this.settings, { slickGoTo: this.state.currentSlide }),
React.createElement(
'div',
{ className: 'items_list--screen' },
React.createElement(
'div',
{ id: 'items-all', className: 'items_list--scroll' },
React.createElement(
'div',
null,
items.all
)
)
),
React.createElement(
'div',
{ className: 'items_list--screen' },
React.createElement(
'div',
{ id: 'items-incomplete', className: 'items_list--scroll' },
React.createElement(
'div',
null,
items.incomplete
)
)
),
React.createElement(
'div',
{ className: 'items_list--screen' },
React.createElement(
'div',
{ id: 'items-complete', className: 'items_list--scroll' },
React.createElement(
'div',
null,
items.complete
)
)
)
),
React.createElement(NewTodo, null),
React.createElement(EditTodo, { todo: this.state.editable, setEditable: this.setEditable.bind(this) })
);
};
return ItemsListCls;
}(React.Component);
var ItemsList = ReactRedux.connect(function (state) {
return { state: state };
})(ItemsListCls);
var ApplicationCls = function (_React$Component5) {
_inherits(ApplicationCls, _React$Component5);
function ApplicationCls() {
_classCallCheck(this, ApplicationCls);
return _possibleConstructorReturn(this, _React$Component5.apply(this, arguments));
}
ApplicationCls.prototype.render = function render() {
return React.createElement(
'div',
{ className: 'mobile-wrapper' },
React.createElement(
'div',
{ className: 'mobile-container' },
React.createElement(
'div',
{ className: 'mobile-content' },
React.createElement(MobileNav, null),
React.createElement(ItemsList, null)
)
)
);
};
return ApplicationCls;
}(React.Component);
var Application = ReactRedux.connect(function (state) {
return { state: state };
})(ApplicationCls);
var Provider = ReactRedux.Provider;
ReactDOM.render(React.createElement(
Provider,
{ store: store },
React.createElement(Application, null)
), document.getElementById('application'));
//# sourceURL=pen.js
</script>
</body></html>
