<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/nemesiscodex/pen/MKJOPb?depth=everything&order=popularity&page=59&q=editable&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.css'>
<style class="cp-pen-styles">.card.active {
box-shadow: 1px 1px 6px 2px rgba(80, 9, 20, 0.6) !important;
border: 1px solid rgba(80, 9, 20, 0.6) !important;
background-color: #fcfcfc !important;
}
.label.fluid {
margin-top: 10px !important;
}
</style></head><body>
<p></p>
<div class="ui container" id="app"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.js'></script>
<script >var imgs = ['https://bit.ly/1VzLSsS', //cake
'https://bit.ly/1mtmDNj', //coffee
'https://bit.ly/22G70Cn', //drink
'https://bit.ly/1Sud3Wb', //icecream
'https://bit.ly/1mYU7mx', //meal
'https://bit.ly/1PFf3bI' //pizza
];
var testData = [{
creationDate: new Date().toDateString(),
img: "https://bit.ly/1mtmDNj",
ingredients: ["Espresso", "Steamed milk", "Sugar"],
name: "Latte",
id: 1
}, {
creationDate: new Date().toDateString(),
img: "https://bit.ly/22G70Cn",
ingredients: ["cachaza 5 cl.", "lima ½ unidad", "azúcar 20gr"],
name: "Caipiriña",
id: 2
}, {
creationDate: new Date().toDateString(),
img: "https://bit.ly/1PFf3bI",
ingredients: ["2½ oz (60 g) ricotta", "2 oz (50 g) Mozzarella", "2 oz (50 g) Gorgonzola Piccante", "1 oz (25 g) Parmesan"],
name: "4 Formaggio",
id: 3
}];
var emptyObj = {
creationDate: "",
img: ".",
ingredients: [],
name: "",
id: null
};
var RecipeList = React.createClass({
displayName: 'RecipeList',
getNewObject: function getNewObject() {
return JSON.parse(JSON.stringify(emptyObj));
},
getInitialState: function getInitialState() {
var recipes = [];
if (window.localStorage) {
//get from localstorage
recipes = localStorage.getItem("recipes");
if (!recipes) recipes = testData;else recipes = JSON.parse(recipes);
localStorage.getItem("recipes", recipes);
}
return {
recipes: recipes,
selected: null,
selectedObject: this.getNewObject(),
edit: false,
show: false
};
},
createRecipe: function createRecipe() {
this.setState({
selectedObject: this.getNewObject(),
selected: null,
edit: true,
show: false
});
},
removeRecipe: function removeRecipe(index) {
if (!confirm("Are you sure you want to delete this recipe?")) return;
this.state.recipes.splice(index, 1);
this.setState({
recipes: this.state.recipes
});
if (window.localStorage) {
window.localStorage.setItem("recipes", JSON.stringify(this.state.recipes));
}
},
editRecipe: function editRecipe(index) {
this.setState({
selectedObject: this.state.recipes[index],
edit: true,
selected: index,
show: false
});
},
showRecipe: function showRecipe(index) {
if (this.state.show && this.state.selected === index) this.setState({
selected: null,
edit: false,
show: false,
selectedObject: this.getNewObject()
});else this.setState({
selected: index,
edit: false,
show: true,
selectedObject: this.state.recipes[index]
});
},
cancelRecipe: function cancelRecipe() {
this.setState({
selectedObject: this.getNewObject(),
selected: null,
edit: false,
show: false
});
},
editCard: function editCard(display) {
if (this.state.edit && this.state.selected === null || display) return React.createElement(
'div',
{ key: this.state.selectedObject.id,
className: 'active card' },
React.createElement(
'div',
{ className: 'image' },
React.createElement('img', { src: this.state.selectedObject.img
}),
' '
),
' ',
React.createElement(
'div',
{ className: 'content' },
React.createElement(
'div',
{ className: 'ui two buttons' },
React.createElement(
'div',
{ className: 'ui button',
onClick: this.save },
' ',
React.createElement('i', { className: 'save icon' }),
' Save '
),
' ',
React.createElement(
'div',
{ className: 'ui button',
onClick: this.cancelRecipe },
' ',
React.createElement('i', { className: 'remove icon' }),
' Cancel '
),
' '
),
' ',
React.createElement(
'div',
{ className: 'ui form' },
React.createElement(
'div',
{ className: 'field' },
React.createElement(
'label',
null,
' Image URL '
),
' ',
React.createElement('input', { defaultValue: this.state.selectedObject.img,
onChange: this.changeInForm,
ref: 'img',
type: 'text',
placeholder: '' })
),
' ',
React.createElement(
'div',
{ className: 'field' },
React.createElement(
'label',
null,
' Name '
),
' ',
React.createElement('input', { defaultValue: this.state.selectedObject.name,
ref: 'name',
type: 'text',
placeholder: '',
onChange: this.changeInForm
}),
' '
),
' ',
React.createElement(
'div',
{ className: 'field' },
React.createElement(
'label',
null,
' Ingredients '
),
' ',
React.createElement('input', { defaultValue: this.state.selectedObject.ingredients.join(", "),
ref: 'ingredients',
type: 'text',
placeholder: '',
onChange: this.changeInForm
}),
' '
),
' '
),
' '
)
);
},
showIngredients: function showIngredients(obj, idx) {
if (this.state.show && this.state.selected == idx) {
return obj.ingredients.map(function (ingredient, idx) {
return React.createElement(
'div',
{ key: idx + "label",
className: 'ui fluid label' },
' ',
React.createElement('i', { className: 'checkmark box icon' }),
' ',
ingredient,
' '
);
});
}
},
cards: function cards(obj, idx) {
if (idx === this.state.selected && this.state.show == false) return this.editCard(true);
return React.createElement(
'div',
{ key: obj.id,
className: 'card' },
React.createElement(
'div',
{ className: 'blurring dimmable image' },
React.createElement(
'div',
{ className: 'ui dimmer transition hidden' },
React.createElement(
'div',
{ className: 'content' },
React.createElement(
'div',
{ className: 'center' },
' ',
React.createElement(
'div',
{ className: 'ui circular inverted huge icon button',
onClick: this.showRecipe.bind(null, idx) },
React.createElement('i', { className: 'search icon' }),
' '
),
' ',
React.createElement(
'div',
{ className: 'ui circular inverted huge icon button',
onClick: this.editRecipe.bind(null, idx) },
React.createElement('i', { className: 'write icon' }),
' '
),
' ',
React.createElement(
'div',
{ className: 'ui circular inverted huge icon button',
onClick: this.removeRecipe.bind(null, idx) },
React.createElement('i', { className: 'trash icon' }),
' '
),
' '
),
' '
),
' '
),
' ',
React.createElement('img', { src: obj.img
}),
' '
),
' ',
React.createElement(
'div',
{ className: 'content' },
React.createElement(
'a',
{ className: 'header',
onClick: this.showRecipe.bind(null, idx) },
' ',
obj.name,
' '
),
' ',
React.createElement(
'div',
{ className: 'meta' },
React.createElement(
'span',
{ className: 'date' },
' Created in ',
obj.creationDate,
' '
),
' '
),
' '
),
' ',
React.createElement(
'div',
{ className: 'extra content' },
React.createElement(
'span',
null,
React.createElement(
'i',
{ className: 'book icon' },
' '
),
' ',
obj.ingredients.length,
' ingredients'
),
' ',
this.showIngredients(obj, idx),
' '
),
' '
);
},
save: function save() {
var selected = this.state.selectedObject;
var selectedIdx = this.state.selected;
var recipes = this.state.recipes;
var date = new Date();
selected.creationDate = date.toDateString();
if (!selected.id) selected.id = recipes.reduce(function (a, b) {
return Math.max(a, b.id);
}, 0) + 1;
if (selectedIdx > 0) recipes[selectedIdx] = selected;else recipes.push(selected);
this.setState({
recipes: recipes,
selected: null,
edit: false,
selectedObject: this.getNewObject()
});
if (window.localStorage) {
window.localStorage.setItem("recipes", JSON.stringify(recipes));
}
},
changeInForm: function changeInForm() {
var selected = this.state.selectedObject;
selected.img = this.refs.img.value;
selected.name = this.refs.name.value;
selected.ingredients = this.refs.ingredients.value.split(",");
this.setState({
selectedObject: selected
});
},
render: function render() {
setTimeout(function () {
$('.card .dimmable.image').dimmer({
on: 'hover'
});
$('img').error(function () {
this.src = "https://bit.ly/1Z2icod";
});
});
return React.createElement(
'div',
{ className: 'container' },
React.createElement(
'div',
{ className: 'ui button',
onClick: this.createRecipe },
' ',
React.createElement('i', { className: 'plus circle icon' }),
' New recipe '
),
React.createElement('br', null),
' ',
React.createElement('br', null),
React.createElement(
'div',
{
className: 'ui centered cards' },
this.editCard(),
' ',
this.state.recipes.sort(function (a, b) {
return b.id - a.id;
}).map(this.cards),
' '
),
' '
);
}
});
ReactDOM.render(React.createElement(RecipeList, null), document.getElementById("app"));
// Analytics
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments);
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-66606764-13', 'auto');
ga('send', 'pageview');
//# sourceURL=pen.js
</script>
</body></html>
