<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 lang='en' 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/kharrop/pen/ZOwOgL?limit=all&page=15&q=app" />
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
body {
-webkit-text-size-adjust: 100%;
font-family: 'Lato', sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
input {
-webkit-appearance: none;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.pen-description {
margin: 60px 0;
text-align: center;
}
.pen-description .summary {
margin-bottom: 10px;
}
.pen-description .note {
color: #555;
font-size: .85rem;
}
html, body {
min-height: 100%;
}
html {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: initial;
}
/* boostrap overrides */
a, a:hover, a:visited {
text-decoration: none;
}
p {
margin: 0;
}
label {
display: initial;
}
/*******************/
body {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyNmE5NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk5ZDVlOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, left bottom, right top, from(#226a96), to(#99d5e8));
background-image: linear-gradient(to right top, #226a96 0%, #99d5e8 100%);
font-family: 'Lato';
background-color: #eee;
color: #555;
min-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-perspective: 8000px;
perspective: 8000px;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
#app {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
ul {
list-style: none;
margin: auto;
padding: 0;
}
.card-container {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
}
li {
cursor: -webkit-grab;
cursor: grab;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
float: left;
}
li[draggable=false] {
cursor: default;
}
li[draggable=false] figure.front,
li[draggable=false] figure.back {
-webkit-box-shadow: none;
box-shadow: none;
}
li .card-container {
pointer-events: none;
}
li input[type="text"],
li input[type="number"] {
border: 0 none;
border-bottom: 1px solid #eee;
pointer-events: initial;
width: 100%;
height: 40px;
margin-bottom: 20px;
outline: 0 none;
font-size: 1rem;
-webkit-transition: border-bottom 0.2s ease-in-out;
transition: border-bottom 0.2s ease-in-out;
}
li input[type="text"]:focus,
li input[type="number"]:focus {
border-bottom: 1px solid #3a8bbb;
}
li.placeholder {
background: rgba(255, 255, 255, 0.2);
height: 494px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 330px;
border-radius: 5px;
}
.modal {
overflow-y: auto;
}
.modal-dialog {
width: 400px;
}
.modal .fund-container {
border: 1px solid #ddd;
border-radius: 3px;
height: 40px;
margin-left: 5px;
margin-top: 20px;
margin-bottom: 10px;
padding: 10px 0;
width: 125px;
text-align: right;
}
.modal label {
display: inline-block;
width: 48%;
}
.modal .data {
width: 50%;
text-align: right;
margin-left: 5px;
display: inline-block;
}
.modal .smallprint {
font-size: .7rem;
text-align: right;
}
.modal .pre-money {
opacity: .7;
}
h1, h2, h3, h4, h5 {
margin: 0;
}
.modal-container {
position: relative;
}
.modal-container .modal, .modal-container .modal-backdrop {
position: absolute;
}
button {
pointer-events: initial;
}
.card-title {
text-align: center;
margin-bottom: 20px;
font-size: 1rem;
}
.back-arrow {
pointer-events: initial;
display: table;
position: absolute;
padding: 20px;
margin: -20px;
font-size: 1.2rem;
}
.back-arrow:hover .fa {
color: #777777;
}
.edit-money {
display: table;
position: absolute;
margin-top: 10px;
opacity: .7;
}
.edit-money + input {
padding-left: 15px;
}
.delete {
color: #777;
pointer-events: initial;
text-align: center;
font-size: .8rem;
margin: 0 auto;
margin-top: 10px;
padding: 10px;
display: table;
-webkit-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.delete:hover {
color: #e54b4b;
}
figure {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure.front {
background: #fff;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
overflow: hidden;
pointer-events: intial;
border-radius: 5px;
padding: 20px;
margin: 10px;
width: 330px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-box-shadow: 0 10px 20px 0 rgba(13, 59, 86, 0.5);
box-shadow: 0 10px 20px 0 rgba(13, 59, 86, 0.5);
}
figure.back {
background-color: #fff;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-ms-flex-wrap: wrap;
flex-wrap: wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: absolute;
left: 0;
margin: 10px;
margin-top: 0;
padding: 20px;
width: 330px;
height: 100%;
top: 0;
border-radius: 5px;
opacity: 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
figure .input-container {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.flipped figure.back {
opacity: 1;
}
.flipped {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.goal__name {
color: #777;
font-size: .75rem;
text-align: center;
width: 80%;
margin: 10px auto;
text-transform: uppercase;
letter-spacing: 3px;
}
.goal--progress {
color: #222;
font-size: 1.7rem;
margin-bottom: 10px;
text-align: center;
}
.goal--remain {
color: #222;
}
.goal--amount {
color: #777;
font-size: .8rem;
text-align: center;
}
.goal--top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
height: 375px;
}
.goal--top__container {
margin: auto;
position: relative;
}
.edit {
pointer-events: initial;
padding: 20px;
position: absolute;
right: 0;
margin: -20px;
top: 0;
margin-top: -13px;
}
.edit:hover .fa {
color: #777777;
}
.edit .fa {
font-size: 1.2rem;
}
.money:before {
content: "$";
}
.right {
float: right;
margin-left: 5px;
}
.percent {
color: #777;
}
.descriptor {
font-size: .8rem;
margin-bottom: 20px;
}
.dropdown-wrapper {
margin-top: 10px;
pointer-events: initial;
border: 1px solid #eee;
border-radius: 5px;
position: relative;
cursor: pointer;
width: 100%;
-webkit-transition: border 0.2s ease-in-out;
transition: border 0.2s ease-in-out;
}
.dropdown-wrapper:hover {
border: 1px solid #d5d5d5;
}
.dropdown-wrapper:after {
font-family: 'FontAwesome';
content: "\f107";
color: #3FB8AF;
position: absolute;
right: 10px;
top: 7px;
}
.dropdown-wrapper.outline {
border: 1px solid rgba(63, 184, 175, 0.5);
-webkit-box-shadow: 0 0 10px rgba(63, 184, 175, 0.2);
box-shadow: 0 0 10px rgba(63, 184, 175, 0.2);
}
select {
cursor: pointer;
pointer-events: initial;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
border: 0 none;
font-size: .8em;
padding: 10px;
outline: 0;
width: 100%;
display: block;
}
.button {
background: #3a8bbb;
border: 0 none;
color: #fff;
margin-bottom: auto;
cursor: pointer;
border-radius: 5px;
pointer-events: initial;
height: 44px;
text-transform: uppercase;
text-align: center;
font-size: .7rem;
letter-spacing: 2px;
padding: 15px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
width: 100%;
}
.button:hover {
background: #347da8;
}
.fa {
font-family: 'FontAwesome';
display: block;
text-align: center;
}
.fa.category {
left: 0;
right: 0;
top: -40px;
margin: auto;
position: absolute;
}
.fa.fa-plane {
color: #3FB8AF;
}
.fa.fa-car {
color: #e54b4b;
}
.fa.fa-pencil-square-o, .fa.fa-angle-left {
color: #aaa;
-webkit-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
/** svg **/
.svg-container {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
vertical-align: middle;
overflow: hidden;
}
.svg-content {
display: inline-block;
margin: 0 auto;
margin-top: 20px;
width: 100%;
}
.animated {
-webkit-animation: dash 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
animation: dash 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.box {
width: 100%;
height: 100%;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
}
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
text {
text-anchor: middle;
}
circle {
stroke-linecap: round;
}
.shadow {
opacity: .6;
}
@-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style></head><body>
<div id="app"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://fb.me/react-with-addons-15.0.0.min.js'></script><script src='https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.29.5/react-bootstrap.min.js'></script><script src='https://npmcdn.com/react-dnd@2.1.4/dist/ReactDnD.js'></script><script src='https://npmcdn.com/react-dnd-html5-backend@2.1.2/dist/ReactDnDHTML5Backend.min.js'></script>
<script >//var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) {if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;} var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); }
window.CP.exitedLoop(1);
window.CP.exitedLoop(1);
} return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
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; }
var placeholder = document.createElement("li");
placeholder.className = "placeholder";
var Button = ReactBootstrap.Button;
var Modal = ReactBootstrap.Modal;
var OverlayTrigger = ReactBootstrap.OverlayTrigger;
var Pie = function (_React$Component) {
_inherits(Pie, _React$Component);
function Pie() {
_classCallCheck(this, Pie);
return _possibleConstructorReturn(this, (Pie.__proto__ || Object.getPrototypeOf(Pie)).apply(this, arguments));
}
_createClass(Pie, [{
key: "render",
value: function render() {
var _props = this.props,
color = _props.color,
width = _props.width,
progress = _props.progress;
var pi = 3.14159265359;
var r = 400 / 2;
var c = 2 * pi * r;
var realProgress = c * progress;
return React.createElement(
"div",
{ className: "svg-container" },
React.createElement(
"div",
{
className: "svg-content"
},
React.createElement(
"svg",
{
viewBox: "0 0 500 500",
preserveAspectRatio: "xMinYMin meet"
},
React.createElement(
"filter",
{ id: "shadow" },
React.createElement("feGaussianBlur", { "in": "SourceGraphic", stdDeviation: "15" }),
React.createElement("feOffset", { dx: "-5", dy: "-4" })
),
React.createElement("circle", {
className: "animated",
cx: "250",
cy: "250",
r: "200",
stroke: "",
fillOpacity: "0",
strokeWidth: width + 10,
strokeDasharray: [realProgress, c],
strokeDashoffset: c * progress
}),
React.createElement("circle", {
filter: "url(#shadow)",
className: "animated shadow",
cx: "250",
cy: "250",
r: "200",
stroke: color,
fillOpacity: "0",
strokeWidth: width,
strokeDasharray: [realProgress, c],
strokeDashoffset: c * progress
}),
React.createElement("circle", {
className: "animated fill",
cx: "250",
cy: "250",
r: "200",
stroke: color,
fillOpacity: "0",
strokeWidth: width,
strokeDasharray: [realProgress, c],
strokeDashoffset: c * progress
}),
React.createElement("circle", {
cx: "250",
cy: "250",
r: "200",
stroke: color,
fillOpacity: "0",
strokeWidth: "5",
strokeDasharray: [c, c],
strokeOpacity: "0.1"
})
)
)
);
}
}]);
return Pie;
}(React.Component);
var Application = function (_React$Component2) {
_inherits(Application, _React$Component2);
function Application() {
_classCallCheck(this, Application);
return _possibleConstructorReturn(this, (Application.__proto__ || Object.getPrototypeOf(Application)).apply(this, arguments));
}
_createClass(Application, [{
key: "render",
value: function render() {
var percent = this.props.percent;
var colorChart = this.props.colorChart;
return React.createElement(
"div",
null,
React.createElement(
"div",
{ className: "box" },
React.createElement(Pie, {
color: colorChart,
width: 15,
progress: percent
})
)
);
}
}]);
return Application;
}(React.Component);
var progressUpdate;
var goals = [{
category: 'car',
name: 'Car',
amount: 20000,
progress: 6593,
flipped: false,
dragStatus: true
}, {
category: 'plane',
name: 'Vacation',
amount: 3500,
progress: 2984,
flipped: false,
dragStatus: true
}];
var dragStatus = true;
var GoalCard = function (_React$Component3) {
_inherits(GoalCard, _React$Component3);
function GoalCard(props) {
_classCallCheck(this, GoalCard);
var _this3 = _possibleConstructorReturn(this, (GoalCard.__proto__ || Object.getPrototypeOf(GoalCard)).call(this, props));
_this3.state = { condition: false,
progress: _this3.props.item.progress,
input1: _this3.props.item.name,
input2: _this3.props.item.amount,
input3: _this3.props.item.progress,
selectValue: _this3.props.item.category
};
return _this3;
}
_createClass(GoalCard, [{
key: "addMoney",
value: function addMoney() {
var addFunds = prompt('Add funds for: ' + this.props.item.name, "0");
this.props.item.progress += Number(addFunds);
this.setState({
item: this.props.item
});
}
}, {
key: "onSave",
value: function onSave() {
this.props.item.progress = progressUpdate;
this.setState({
item: this.props.item
});
}
}, {
key: "editGoal",
value: function editGoal(index) {
this.props.onFlip(index);
this.setState({
condition: !this.state.condition,
input1: this.props.item.name,
input2: this.props.item.amount,
input3: this.props.item.progress,
selectValue: this.props.item.category
});
}
}, {
key: "deleteGoal",
value: function deleteGoal(index) {
this.props.onDelete(index);
this.setState({ condition: !this.state.condition,
input1: this.props.item.name,
input2: this.props.item.amount,
input3: this.props.item.progress,
selectValue: this.props.item.category,
flipped: false,
dragStatus: true
});
}
}, {
key: "cancelEdit",
value: function cancelEdit(index) {
this.props.onFlip(index);
this.setState({ condition: !this.state.condition,
input1: this.props.item.name,
input2: this.props.item.amount,
input3: this.props.item.progress,
selectValue: this.props.item.category });
}
}, {
key: "saveGoal",
value: function saveGoal(index) {
this.props.onFlip(index);
this.setState({ condition: !this.state.condition });
this.props.item.name = this.state.input1;
this.props.item.amount = Number(this.state.input2);
this.props.item.progress = Number(this.state.input3);
this.props.item.category = this.state.selectValue;
}
}, {
key: "handleChange",
value: function handleChange(name, e) {
var change = {};
change[name] = e.target.value;
this.setState(change);
}
}, {
key: "handleDropdown",
value: function handleDropdown(e) {
this.setState({ selectValue: e.target.value });
}
}, {
key: "render",
value: function render() {
var message;
var strokeColor;
var status;
var remaining;
var percentRemaining;
if (this.props.item.progress / this.props.item.amount < 1) {
strokeColor = "#01579B";
status = "Remaining";
remaining = (this.props.item.amount - this.props.item.progress).toLocaleString();
percentRemaining = "(" + ((this.props.item.amount - this.props.item.progress) / this.props.item.amount * 100).toFixed(0) + "%)";
} else {
strokeColor = "#7dbf69";
status = "Exceeded";
remaining = Math.abs(this.props.item.amount - this.props.item.progress).toLocaleString();
percentRemaining = "(" + Math.abs((this.props.item.amount - this.props.item.progress) / this.props.item.amount * 100).toFixed(0) + "%)";
}
return React.createElement(
"div",
{ className: this.state.condition ? "flipped card-container" : "card-container" },
React.createElement(
"figure",
{ className: "front" },
React.createElement(
"div",
{ className: "goal--top" },
React.createElement(
"a",
{ href: "#", className: "edit", onClick: this.editGoal.bind(this, this.props.item.index) },
React.createElement("i", { className: "fa fa-pencil-square-o" })
),
React.createElement(
"div",
{ className: "goal__name" },
this.props.item.name
),
React.createElement(Application, { percent: this.props.item.progress / this.props.item.amount, colorChart: strokeColor }),
React.createElement(
"div",
{ className: "goal--top__container" },
React.createElement("i", { className: 'category fa fa-' + this.props.item.category, "aria-hidden": "true" }),
React.createElement(
"div",
{ className: "goal--progress" },
React.createElement(
"span",
{ className: "money" },
this.props.item.progress.toLocaleString()
)
),
React.createElement(
"div",
{ className: "goal--amount" },
"of ",
React.createElement(
"span",
{ className: "money" },
this.props.item.amount.toLocaleString()
)
)
)
),
React.createElement(
"div",
{ className: "goal--bottom" },
React.createElement(
"div",
{ className: "descriptor" },
status,
React.createElement(
"span",
{ className: "money right goal--remain" },
remaining
),
React.createElement(
"span",
{ className: "percent right" },
percentRemaining
)
),
React.createElement(Example, {
name: this.props.item.name,
progress: this.props.item.progress,
amount: this.props.item.amount,
onSave: this.onSave.bind(this)
})
)
),
React.createElement(
"figure",
{ className: "back" },
React.createElement(
"a",
{ href: "#", className: "back-arrow", onClick: this.cancelEdit.bind(this, this.props.item.index) },
React.createElement("i", { className: "fa fa-angle-left" })
),
React.createElement(
"h3",
{ className: "card-title" },
"Goal Details"
),
React.createElement(
"div",
{ className: "input-container" },
React.createElement(
"label",
{ name: "name", className: "descriptor" },
"Name"
),
React.createElement("input", { type: "text", placeholder: "Goal Name", value: this.state.input1, onChange: this.handleChange.bind(this, 'input1') }),
React.createElement(
"label",
{ name: "amount", className: "descriptor" },
"Goal"
),
React.createElement(
"span",
{ className: "edit-money" },
"$"
),
React.createElement("input", { type: "number", placeholder: "Amount", value: this.state.input2, onChange: this.handleChange.bind(this, 'input2') }),
React.createElement(
"label",
{ name: "progress", className: "descriptor" },
"Progress"
),
React.createElement(
"span",
{ className: "edit-money" },
"$"
),
" ",
React.createElement("input", { type: "number", placeholder: "Progress", value: this.state.input3, onChange: this.handleChange.bind(this, 'input3') }),
" ",
React.createElement(
"label",
{ name: "icon", className: "descriptor" },
"Icon"
),
React.createElement(
"div",
{ className: "dropdown-wrapper" },
React.createElement(
"select",
{ value: this.state.selectValue,
onChange: this.handleDropdown.bind(this)
},
React.createElement(
"option",
{ value: "car" },
"Car"
),
React.createElement(
"option",
{ value: "plane" },
"Plane"
),
React.createElement(
"option",
{ value: "" },
"None"
)
)
)
),
React.createElement("input", { type: "button", className: "button", value: "Save Changes", onClick: this.saveGoal.bind(this, this.props.item.index) }),
React.createElement(
"a",
{ href: "#", className: "delete", onClick: this.deleteGoal.bind(this, this.props.item.index) },
"Delete Goal"
)
)
);
}
}]);
return GoalCard;
}(React.Component);
var Example = React.createClass({
displayName: "Example",
getInitialState: function getInitialState() {
return { showModal: false,
progress: this.props.progress,
input1: "",
sum: ""
};
},
close: function close() {
this.setState({ showModal: false });
},
submit: function submit(e) {
if (e.key === 'Enter') {
progressUpdate = this.state.sum;
this.props.onSave();
this.setState({
showModal: false
});
}
},
save: function save() {
progressUpdate = this.state.sum;
this.props.onSave();
this.setState({
showModal: false
});
},
open: function open() {
this.setState({ showModal: true,
sum: this.props.progress,
input1: "" });
},
handleChange: function handleChange(name, e) {
var change = {};
change[name] = e.target.value;
this.setState(change);
this.setState({
sum: Number(this.props.progress) + Number(change[name])
});
},
render: function render() {
return React.createElement(
"div",
null,
React.createElement(
Button,
{
bsStyle: "primary",
bsSize: "large",
onClick: this.open,
className: "button"
},
"Add funds"
),
React.createElement(
Modal,
{ show: this.state.showModal, onHide: this.close },
React.createElement(
Modal.Header,
{ closeButton: true },
React.createElement(
Modal.Title,
null,
"Add Funds for ",
this.props.name
)
),
React.createElement(
Modal.Body,
null,
React.createElement(
"label",
null,
"Current progress:"
),
React.createElement(
"div",
{ className: "data" },
"$",
this.props.progress.toLocaleString()
),
React.createElement(
"label",
null,
"Add amount:"
),
React.createElement(
"div",
{ className: "data" },
React.createElement(
"span",
{ className: "pre-money" },
"$"
),
" ",
React.createElement("input", { type: "number", className: "fund-container", defaultValue: "", onKeyPress: this.submit.bind(this), onChange: this.handleChange.bind(this, 'input1'), autoFocus: true })
),
React.createElement(
"p",
{ className: "smallprint" },
" Total Progress: ",
React.createElement(
"span",
{ className: "pre-money" },
"$"
),
this.state.sum.toLocaleString()
)
),
React.createElement(
Modal.Footer,
null,
React.createElement(
Button,
{ onClick: this.close },
"Close"
),
React.createElement(
Button,
{ type: "button", className: "btn-primary", onClick: this.save.bind(this, this.props) },
"Update Progress"
)
)
)
);
}
});
var GoalList = React.createClass({
displayName: "GoalList",
getInitialState: function getInitialState() {
return {
data: this.props.data
};
},
dragStart: function dragStart(e) {
//this.refs['update'].updateGoal();
this.dragged = e.currentTarget;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("text/html", e.currentTarget);
},
dragEnd: function dragEnd(e) {
this.dragged.style.display = "block";
placeholder.remove();
// Update data
var data = this.state.data;
var from = Number(this.dragged.dataset.id);
var to = Number(this.over.dataset.id);
if (from < to) to--;
if (this.nodePlacement == "after") to++;
data.splice(to, 0, data.splice(from, 1)[0]);
this.setState({
data: data
});
},
dragOver: function dragOver(e) {
e.preventDefault();
this.dragged.style.display = "none";
if (e.target.className == "placeholder") return;
this.over = e.target;
// Inside the dragOver method
var relY = e.pageY - this.over.offsetTop;
var height = this.over.offsetHeight / 2;
var relX = e.pageX - this.over.offsetLeft;
var width = this.over.offsetWidth / 2;
var parent = e.target.parentNode;
if (relX >= width) {
this.nodePlacement = "after";
parent.insertBefore(placeholder, e.target.nextElementSibling);
} else {
this.nodePlacement = "before";
parent.insertBefore(placeholder, e.target);
}
this.setState({
data: this.props.data
});
},
onFlip: function onFlip(i) {
var data = this.state.data;
data[i].flipped = !data[i].flipped;
this.setState({
data: data });
if (data[i].flipped) {
var data = this.props.data;
// data[i].dragStatus = false;
dragStatus = false;
} else {
// data[i].dragStatus= true;
dragStatus = true;
}
},
onDelete: function onDelete(i) {
var data = this.props.data;
var newData = this.state.data.slice(); //copy array
newData.splice(i, 1); //remove element
this.setState({ data: newData }); //update state
this.props = newData;
//var data = this.props.data;
data[i].flipped = !data[i].flipped;
if (data[i].flipped) {
// data[i].dragStatus = false;
dragStatus = false;
} else {
// data[i].dragStatus= true;
dragStatus = true;
}
data = newData;
//data.splice(i, 1);
// this.setState({ data: data});
},
render: function render() {
return React.createElement(
"ul",
{ className: "goal__list", onDragOver: this.dragOver },
this.state.data.map(function (item, i) {
return React.createElement(
"li",
{ "data-id": i,
key: i
// draggable={goals[i].dragStatus}
, draggable: dragStatus,
onDragEnd: this.dragEnd.bind(this),
onDragStart: this.dragStart.bind(this)
},
React.createElement(GoalCard, { item: item,
onFlip: this.onFlip.bind(this, i),
cancelEdit: this.onFlip.bind(this, i),
saveGoal: this.onFlip.bind(this, i),
onDelete: this.onDelete.bind(this, i)
})
);
}, this)
);
}
});
ReactDOM.render(React.createElement(GoalList, { data: goals }), document.getElementById('app'));
//# sourceURL=pen.js
</script>
</body></html>
